Skip to content

Commit 4f4c5b8

Browse files
tylerslatontylerslaton
committed
docs: add story-book example
Signed-off-by: tylerslaton <[email protected]>
1 parent 01583db commit 4f4c5b8

File tree

14 files changed

+444
-1
lines changed

14 files changed

+444
-1
lines changed

‎docs/README-USECASES.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,8 @@ Here is a GPTScript that summarizes the the code stored under the current direct
8181
### Vision
8282
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).
8383

84-
[More details to come]
84+
Here is a GPTScript that takes a story prompt and generates an illustrated
85+
children's book: [../examples/story-book.gpt]
8586

8687
## Memory Management
8788

‎examples/story-book.gpt

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
tools: story-writer, story-illustrator, server, mkdir, sys.write, sys.read, sys.download
2+
description: Writes a children's book and generates illustrations for it.
3+
args: story: The story to write and illustrate. Can be a prompt or a complete story.
4+
5+
Do the following steps sequentially:
6+
7+
1. Create a folder called story with mkdir.
8+
2. If ${story} is a prompt and not a complete children's story, call story-writer
9+
to write a story based on the prompt.
10+
3. Take ${story} and break it up into logical chunks of text.
11+
4. For each chunk:
12+
- Call story-illustrator to illustrate it.
13+
- Download the illustration to a file at story/<chunk_number>.png.
14+
5. Compile the chunks and their illustrations into an HTML file to story/story.html where
15+
the text and illustrations are side-by-side scrolling down with good padding. Make sure
16+
the image is not too large and the text is not too small.
17+
6. Finally, call serve to serve the story as a webpage and print "Serving at http://localhost:8081".
18+
19+
---
20+
name: story-writer
21+
description: Writes a story for children
22+
args: prompt: The prompt to use for the story
23+
24+
Write a story with a tone for children based on ${prompt}.
25+
26+
---
27+
name: story-illustrator
28+
temperature: 0.5
29+
# assumes you have image-generation.gpt installed
30+
tools: ../../image-generation/tool.gpt
31+
description: Generates a illustration for a children's story
32+
args: prompt: The text of the page to illustrate
33+
34+
Summarize ${promt} to 7 or less words and use the summary to generate an illustration
35+
for the summary in a cartoon style appropriate for children. Only return the URL of the
36+
illustration.
37+
38+
---
39+
name: mkdir
40+
description: Creates a directory
41+
args: name: The name of the directory to create
42+
43+
#!bash
44+
mkdir -p ${name}
45+
46+
---
47+
name: server
48+
description: Serves the story as a webpage
49+
50+
#!python
51+
import http.server
52+
import socketserver
53+
54+
PORT = 8081
55+
56+
class Handler(http.server.SimpleHTTPRequestHandler):
57+
def do_GET(self):
58+
if self.path == '/':
59+
self.path = 'story/story.html'
60+
return http.server.SimpleHTTPRequestHandler.do_GET(self)
61+
62+
with socketserver.TCPServer(('', PORT), Handler) as httpd:
63+
print(f"Serving at port {PORT}")
64+
httpd.serve_forever()

‎examples/story-book/README.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Story Book
2+
3+
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
4+
by `index.html` which has some JS/CSS to make the story styling consistent and readable.
5+
6+
## How to Use
7+
1. Install the `image-generation` tool.
8+
9+
```shell
10+
git clone https://github.com/gptscript-ai/image-generation
11+
```
12+
13+
2. Bootstrap the `image-generation` tool.
14+
15+
```shell
16+
(
17+
cd image-generation
18+
make bootstrap
19+
)
20+
```
21+
22+
3. Source the `venv` for `image-generation`.
23+
```
24+
source image-generation/venv/bin/activate
25+
```
26+
27+
4. Run the `story-book.gpt` script.
28+
29+
```shell
30+
gptscript story-book.gpt --prompt "Goldilocks" --pages 3
31+
```

‎examples/story-book/generate.gpt

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
tools: story-writer, story-illustrator, sys.write, sys.read, sys.download, open
2+
description: Writes a children's book and generates illustrations for it.
3+
args: story: The story to write and illustrate. Can be a prompt or a complete story.
4+
args: pages: The number of pages to generate
5+
6+
Do the following steps sequentially:
7+
8+
1. If ${story} is a prompt and not a complete children's story, call story-writer
9+
to write a story based on the prompt.
10+
3. Take ${story} and break it up into ${pages} logical "pages" of text.
11+
3. For each page:
12+
- Call story-illustrator to illustrate it.
13+
- Download the illustration to a file at examples/story-book/pages/<page_number>.png.
14+
4. For each page and its illustration write an html file that:
15+
- Use examples/story-book/pages/template.html as an exact guide
16+
- Make sure the format and tags are the same
17+
- Include the exact same <style> tag
18+
- All text content is written in a <p> tag and the image is in an <img> tag.
19+
- Is created at examples/story-book/pages/page<page number>.html
20+
5. Edit the "pages" array in examples/story-book/index.html to serve the pages you created.
21+
6. Open examples/story-book/index.html
22+
23+
---
24+
name: story-writer
25+
description: Writes a story for children
26+
args: prompt: The prompt to use for the story
27+
28+
Write a story with a tone for children based on ${prompt}.
29+
30+
---
31+
name: story-illustrator
32+
tools: ../../../image-generation/tool.gpt
33+
description: Generates a illustration for a children's story
34+
args: text: The text of the page to illustrate
35+
36+
Think of a good prompt to generate an image to represent $text. Make sure to
37+
include the name of any relevant characters in your prompt. Then use that prompt to
38+
generate an illustration. Append any prompt that you have with "in a children's book
39+
cartoon style". Only return the URL of the illustration.
40+
41+
---
42+
name: open
43+
description: Opens a given file
44+
args: file-path: Path to the file to open
45+
46+
#!/bin/bash
47+
open examples/story-book/index.html

‎examples/story-book/index.html

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Story Book</title>
5+
<style>
6+
body {
7+
display: flex;
8+
flex-direction: column;
9+
align-items: center;
10+
justify-content: center;
11+
padding: 0;
12+
margin: 0 150px;
13+
font-family: Arial, sans-serif;
14+
min-height: 100vh;
15+
background-color: #f5f5f5;
16+
}
17+
18+
h1 {
19+
text-align: center;
20+
color: #333;
21+
margin-bottom: 20px;
22+
}
23+
24+
p {
25+
margin-bottom: 10px;
26+
}
27+
28+
select {
29+
width: 200px;
30+
margin-bottom: 20px;
31+
}
32+
33+
iframe {
34+
width: 100%;
35+
height: calc(100vh - 200px); /* Adjust the height to leave space for other elements */
36+
border: none;
37+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
38+
}
39+
40+
.select-container {
41+
display: flex;
42+
flex-direction: column;
43+
align-items: center;
44+
justify-content: center;
45+
margin-bottom: 20px;
46+
}
47+
48+
.select-container select {
49+
margin-bottom: 10px;
50+
}
51+
52+
.next-page-button,
53+
.previous-page-button {
54+
position: fixed;
55+
top: 50%;
56+
padding: 10px;
57+
background-color: transparent;
58+
color: #333;
59+
border: none;
60+
cursor: pointer;
61+
font-size: 150px;
62+
}
63+
64+
.next-page-button {
65+
right: 160px;
66+
transform: translateY(-50%);
67+
}
68+
69+
.previous-page-button {
70+
left: 160px;
71+
transform: translateY(-36%) rotate(180deg);
72+
}
73+
74+
.next-page-button:hover,
75+
.previous-page-button:hover {
76+
color: #666;
77+
}
78+
79+
</style>
80+
</head>
81+
<body>
82+
<h1>Story Book</h1>
83+
<div class="select-container">
84+
<select id="pageSelect">
85+
<!-- Options will be populated by JavaScript, do not edit this -->
86+
</select>
87+
</div>
88+
<iframe id="pageFrame"></iframe>
89+
<button id="previousButton" class="previous-page-button">&#x2192;</button>
90+
<button id="nextButton" class="next-page-button">&#x2192;</button>
91+
92+
<script>
93+
// List of pages to display
94+
var pages = [];
95+
96+
// Populate the select element with options
97+
var select = document.getElementById("pageSelect");
98+
var addedValues = []; // Track added values to avoid duplicates
99+
for (var i = 0; i < pages.length; i++) {
100+
var option = document.createElement("option");
101+
option.value = pages[i];
102+
option.text = "Page " + (i + 1);
103+
if (!addedValues.includes(option.value)) {
104+
select.appendChild(option);
105+
addedValues.push(option.value);
106+
}
107+
}
108+
109+
// Function to change the iframe source
110+
function changePage() {
111+
var iframe = document.getElementById("pageFrame");
112+
iframe.src = select.value;
113+
}
114+
115+
// Function to switch to the next page
116+
function switchPage() {
117+
var currentIndex = select.selectedIndex;
118+
var nextIndex = (currentIndex + 1) % pages.length;
119+
select.selectedIndex = nextIndex;
120+
changePage();
121+
}
122+
123+
// Function to switch to the previous page
124+
function previousPage() {
125+
var currentIndex = select.selectedIndex;
126+
var previousIndex = (currentIndex - 1 + pages.length) % pages.length;
127+
select.selectedIndex = previousIndex;
128+
changePage();
129+
}
130+
131+
// Event listener for select change
132+
select.addEventListener("change", changePage);
133+
134+
// Event listener for next button click
135+
var nextButton = document.getElementById("nextButton");
136+
nextButton.addEventListener("click", switchPage);
137+
138+
// Event listener for previous button click
139+
var previousButton = document.getElementById("previousButton");
140+
previousButton.addEventListener("click", previousPage);
141+
142+
// Load the first page by default
143+
select.selectedIndex = 0;
144+
changePage();
145+
</script>
146+
</body>
147+
</html>

‎examples/story-book/pages/1.png

3.02 MB
Loading

‎examples/story-book/pages/2.png

3.02 MB
Loading

‎examples/story-book/pages/3.png

3.02 MB
Loading

‎examples/story-book/pages/page1.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Page 1</title>
7+
<style>
8+
body {
9+
font-family: 'Arial', sans-serif;
10+
margin: 0;
11+
padding: 0;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
height: 100vh;
16+
flex-direction: column;
17+
}
18+
img {
19+
max-width: 100%;
20+
height: auto;
21+
}
22+
</style>
23+
</head>
24+
<body>
25+
<p>Once upon a time, in a lush, green forest filled with chirping birds and fragrant flowers, there lived a curious little girl named Goldilocks. She had bright, sunny hair that shimmered like gold in the sunlight, which is how she got her name.</p>
26+
<p>One day, while exploring the forest, Goldilocks stumbled upon a quaint little cottage. The door was slightly ajar, and being the curious girl she was, she couldn't resist peeking inside. To her wonder, she found three bowls of porridge on the table, three chairs by the fireplace, and three beds in the bedroom.</p>
27+
<img src="1.png" alt="Illustration for Page 1">
28+
</body>
29+
</html>

‎examples/story-book/pages/page2.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Page 2</title>
7+
<style>
8+
body {
9+
font-family: 'Arial', sans-serif;
10+
margin: 0;
11+
padding: 0;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
height: 100vh;
16+
flex-direction: column;
17+
}
18+
img {
19+
max-width: 100%;
20+
height: auto;
21+
}
22+
</style>
23+
</head>
24+
<body>
25+
<p>First, Goldilocks tried the porridge in the big bowl, but it was too hot. Then, she tried the porridge in the medium bowl, but it was too cold. Finally, she tried the porridge in the small bowl, and it was just right, so she ate it all up.</p>
26+
<p>Feeling full and a bit tired, Goldilocks decided to rest. She tried sitting in the big chair, but it was too hard. Then, she tried the medium chair, but it was too soft. Finally, she tried the small chair, and it was just right, but as she settled in, it broke under her weight!</p>
27+
<img src="2.png" alt="Illustration for Page 2">
28+
</body>
29+
</html>

0 commit comments

Comments
 (0)