From 39575b82d2615053023f6ff00bf2454897bd8afa Mon Sep 17 00:00:00 2001 From: tylerslaton Date: Thu, 29 Feb 2024 17:27:02 -0500 Subject: [PATCH 1/2] docs: add story-book example Signed-off-by: tylerslaton --- docs/README-USECASES.md | 5 +- examples/story-book/README.md | 30 +++++ examples/story-book/index.html | 147 ++++++++++++++++++++++++ examples/story-book/pages/template.html | 33 ++++++ examples/story-book/story-book.gpt | 59 ++++++++++ 5 files changed, 273 insertions(+), 1 deletion(-) create mode 100644 examples/story-book/README.md create mode 100644 examples/story-book/index.html create mode 100644 examples/story-book/pages/template.html create mode 100644 examples/story-book/story-book.gpt diff --git a/docs/README-USECASES.md b/docs/README-USECASES.md index ff848ae0..a7420a57 100644 --- a/docs/README-USECASES.md +++ b/docs/README-USECASES.md @@ -79,9 +79,12 @@ Here is a GPTScript that summarizes the the code stored under the current direct ## Vision, Image, and Audio ### Vision + Here is an example of a web app that leverages GPTScript to recognize ingredients in a photo and suggest a recipe based on them: [recipe-generator](../examples/recipegenerator). -[More details to come] +### Image Generation + +Here is a GPTScript that takes a story prompt and generates an illustrated children's book: [story-book.gpt](../examples/story-book) ## Memory Management diff --git a/examples/story-book/README.md b/examples/story-book/README.md new file mode 100644 index 00000000..1a803d57 --- /dev/null +++ b/examples/story-book/README.md @@ -0,0 +1,30 @@ +# Story Book + +Story Book is a GPTScript that can generate a story based on a prompt and the number of pages you want the story to be in. It is generated in HTML format and can then be viewed +by `index.html` which has some JS/CSS to make the story styling consistent and readable. + +## How to Use +1. Install the `image-generation` tool. + +```shell +git clone https://github.com/gptscript-ai/image-generation +``` + +2. Bootstrap the `image-generation` tool. + +```shell +( + cd image-generation + make bootstrap + source .venv/bin/activate +) +``` + +3. In the `story-book` directory of `gptscript`, run the `story-book.gpt` script. + +```shell +cd examples/story-book +gptscript examples/story-book/story-book.gpt --prompt "Goldilocks" --pages 3 +``` + +4. Open `index.html` in your browser to view the story. \ No newline at end of file diff --git a/examples/story-book/index.html b/examples/story-book/index.html new file mode 100644 index 00000000..7cd4ea11 --- /dev/null +++ b/examples/story-book/index.html @@ -0,0 +1,147 @@ + + + + Story Book + + + +

Story Book

+
+ +
+ + + + + + + \ No newline at end of file diff --git a/examples/story-book/pages/template.html b/examples/story-book/pages/template.html new file mode 100644 index 00000000..65518747 --- /dev/null +++ b/examples/story-book/pages/template.html @@ -0,0 +1,33 @@ + + + + Story Book + + + + Image Description +

+ Story text goes here. +

+ + \ No newline at end of file diff --git a/examples/story-book/story-book.gpt b/examples/story-book/story-book.gpt new file mode 100644 index 00000000..f357b0bf --- /dev/null +++ b/examples/story-book/story-book.gpt @@ -0,0 +1,59 @@ +tools: story-writer, story-illustrator, sys.write, sys.read, sys.download +description: Writes a children's book and generates illustrations for it. +args: story: The story to write and illustrate. Can be a prompt or a complete story. +args: pages: The number of pages to generate + +Do the following steps sequentially: + +1. If ${story} is a prompt and not a complete children's story, call story-writer + to write a story based on the prompt. +3. Take ${story} and break it up into ${pages} logical "pages" of text. +3. For each page: + - Call story-illustrator to illustrate it. Be sure to include any relevant characters to include when + asking it to illustrate the page. + - Download the illustration to a file at pages/.png. +4. For each page and its illustration write an html file with the text on top and the image below it to + pages/page.html. Add this style tag to the HTML file: + ```html + + ``` +5. Edit the "pages" variable array in index.html to serve the pages you created. Do not + edit anything else. Do not edit the page select field. + +--- +name: story-writer +description: Writes a story for children +args: prompt: The prompt to use for the story + +Write a story with a tone for children based on ${prompt}. + +--- +name: story-illustrator +tools: ../../../image-generation/tool.gpt +description: Generates a illustration for a children's story +args: text: The text of the page to illustrate + +Think of a good prompt to generate an image to represent $text. Make sure to +include the name of any relevant characters in your prompt. Then use that prompt to +generate an illustration. Append any prompt that you have with ". In an pointilism cartoon +children's book style with no text in it". Only return the URL of the illustration. + From 527989ed0a415618a2619b28cf15a5bacbbfa083 Mon Sep 17 00:00:00 2001 From: tylerslaton Date: Mon, 4 Mar 2024 17:47:53 -0500 Subject: [PATCH 2/2] fix: address issue with image-generation bootstrap not working and improve doc for story-book Signed-off-by: tylerslaton --- examples/story-book/README.md | 36 ++++++++++++++----------- examples/story-book/index.html | 2 +- examples/story-book/pages/template.html | 33 ----------------------- examples/story-book/story-book.gpt | 22 ++++++++++----- 4 files changed, 37 insertions(+), 56 deletions(-) delete mode 100644 examples/story-book/pages/template.html diff --git a/examples/story-book/README.md b/examples/story-book/README.md index 1a803d57..a30f4e68 100644 --- a/examples/story-book/README.md +++ b/examples/story-book/README.md @@ -3,28 +3,32 @@ Story Book is a GPTScript that can generate a story based on a prompt and the number of pages you want the story to be in. It is generated in HTML format and can then be viewed by `index.html` which has some JS/CSS to make the story styling consistent and readable. -## How to Use -1. Install the `image-generation` tool. +## Usage Instructions -```shell -git clone https://github.com/gptscript-ai/image-generation -``` +1. **Install and bootstrap the `image-generation` tool.** -2. Bootstrap the `image-generation` tool. + This tool uses the `image-generation` tool, which is in a separate repository. To install and bootstrap the `image-generation` tool, starting at the root of `gptscript` run the following commands: -```shell -( + > Note: We'll soon have package management that handles tools installation for you, but until then, you have to manually clone and boostrap tools. + + ```shell + cd .. # This assumes you're starting at the root of the gptscript project. We want image-generation to be a sibling of gptscript. + git clone https://github.com/gptscript-ai/image-generation cd image-generation make bootstrap source .venv/bin/activate -) -``` + cd - # returns you back to your original directory + ``` + +2. **Run the `story-book.gpt` script.** + + In the same terminal session where the virtual environment (venv) is now activated, navigate to the `story-book` example directory and run the `story-book.gpt` script: -3. In the `story-book` directory of `gptscript`, run the `story-book.gpt` script. + ```shell + cd examples/story-book + gptscript story-book.gpt --prompt "Goldilocks" --pages 3 + ``` -```shell -cd examples/story-book -gptscript examples/story-book/story-book.gpt --prompt "Goldilocks" --pages 3 -``` +3. **View the story.** -4. Open `index.html` in your browser to view the story. \ No newline at end of file + Open `index.html` in your browser to view the generated story. diff --git a/examples/story-book/index.html b/examples/story-book/index.html index 7cd4ea11..e8bf7ebd 100644 --- a/examples/story-book/index.html +++ b/examples/story-book/index.html @@ -91,7 +91,7 @@

Story Book