Skip to content

Commit d778de6

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

File tree

7 files changed

+290
-1
lines changed

7 files changed

+290
-1
lines changed

‎docs/README-USECASES.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,9 +79,12 @@ Here is a GPTScript that summarizes the the code stored under the current direct
7979
## Vision, Image, and Audio
8080

8181
### Vision
82+
8283
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).
8384

84-
[More details to come]
85+
### Image Generation
86+
87+
Here is a GPTScript that takes a story prompt and generates an illustrated children's book: [story-book.gpt](../examples/story-book)
8588

8689
## Memory Management
8790

‎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/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/template.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Story Book</title>
5+
<style>
6+
body {
7+
display: flex;
8+
flex-direction: column;
9+
justify-content: center;
10+
align-items: center;
11+
text-align: center;
12+
height: 100vh;
13+
margin: 0 20px;
14+
}
15+
16+
img {
17+
max-width: 100%;
18+
height: auto;
19+
}
20+
21+
p {
22+
margin: 15%;
23+
font-size: 24px;
24+
}
25+
</style>
26+
</head>
27+
<body>
28+
<img src="exact/path/to/image.jpg" alt="Image Description">
29+
<p>
30+
Story text goes here.
31+
</p>
32+
</body>
33+
</html>

‎examples/story-book/story-book.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

‎index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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>Goldilocks Story Book</title>
7+
</head>
8+
<body>
9+
<script>
10+
const pages = [
11+
'page1.html',
12+
'page2.html'
13+
];
14+
15+
pages.forEach((page, index) => {
16+
const link = document.createElement('a');
17+
link.href = page;
18+
link.innerText = `Page ${index + 1}`;
19+
document.body.appendChild(link);
20+
document.body.appendChild(document.createElement('br'));
21+
});
22+
</script>
23+
</body>
24+
</html>

‎test.gpt‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
tools: sys.write, sys.read, sys.find
2+
3+
Read the files of examples/story-book and write a README.md that explains it and how to use it. Provide
4+
a sample command.

0 commit comments

Comments
 (0)