Skip to content

Commit 39575b8

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

File tree

5 files changed

+273
-1
lines changed

5 files changed

+273
-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: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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+
source .venv/bin/activate
20+
)
21+
```
22+
23+
3. In the `story-book` directory of `gptscript`, run the `story-book.gpt` script.
24+
25+
```shell
26+
cd examples/story-book
27+
gptscript examples/story-book/story-book.gpt --prompt "Goldilocks" --pages 3
28+
```
29+
30+
4. Open `index.html` in your browser to view the story.

‎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: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
tools: story-writer, story-illustrator, 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+
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. Be sure to include any relevant characters to include when
13+
asking it to illustrate the page.
14+
- Download the illustration to a file at pages/<page_number>.png.
15+
4. For each page and its illustration write an html file with the text on top and the image below it to
16+
pages/page<page number>.html. Add this style tag to the HTML file:
17+
```html
18+
<style>
19+
body {
20+
display: flex;
21+
flex-direction: column;
22+
justify-content: center;
23+
align-items: center;
24+
text-align: center;
25+
}
26+
27+
img {
28+
max-width: 100%;
29+
height: auto;
30+
margin-bottom: 5%
31+
}
32+
33+
p {
34+
margin: 5%;
35+
font-size: 24px;
36+
}
37+
</style>
38+
```
39+
5. Edit the "pages" variable array in index.html to serve the pages you created. Do not
40+
edit anything else. Do not edit the page select field.
41+
42+
---
43+
name: story-writer
44+
description: Writes a story for children
45+
args: prompt: The prompt to use for the story
46+
47+
Write a story with a tone for children based on ${prompt}.
48+
49+
---
50+
name: story-illustrator
51+
tools: ../../../image-generation/tool.gpt
52+
description: Generates a illustration for a children's story
53+
args: text: The text of the page to illustrate
54+
55+
Think of a good prompt to generate an image to represent $text. Make sure to
56+
include the name of any relevant characters in your prompt. Then use that prompt to
57+
generate an illustration. Append any prompt that you have with ". In an pointilism cartoon
58+
children's book style with no text in it". Only return the URL of the illustration.
59+

0 commit comments

Comments
 (0)