fix: address issue with image-generation bootstrap not working and improve doc for story-book

Signed-off-by: tylerslaton <[email protected]>

Author: tylerslaton

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.
+    Open `index.html` in your browser to view the generated story.

examples/story-book/index.html

@@ -91,7 +91,7 @@ <h1>Story Book</h1>
 
     <script>
         // List of pages to display
-        var pages = [];
+        var pages = ["pages/page1.html", "pages/page2.html"];
 
         // Populate the select element with options
         var select = document.getElementById("pageSelect");

examples/story-book/pages/template.html

@@ -1,19 +1,20 @@
-tools: story-writer, story-illustrator, sys.write, sys.read, sys.download
+tools: story-writer, story-illustrator, mkdir, 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
+1. Create the `pages` directory if it does not already exist.
+2. 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:
+4. 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/<page_number>.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<page number>.html. Add this style tag to the HTML file:
+5. For each page and its illustration write an html file with the text on top and image below it to pages/page<page number>.html.
+   Assume the illustration file is a sibling to the html file, Add this style tag to the HTML file:
    ```html
    <style>
       body {
@@ -36,7 +37,7 @@ Do the following steps sequentially:
       }
    </style>
    ```
-5. Edit the "pages" variable array in index.html to serve the pages you created. Do not 
+6. 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.
 
 ---
@@ -57,3 +58,12 @@ include the name of any relevant characters in your prompt. Then use that prompt
 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.
 
+---
+name: mkdir
+tools: sys.write
+description: Creates a specified directory
+args: dir: Path to the directory to be created
+
+#!bash
+
+mkdir ${dir}