Skip to content

Commit c1d4989

Browse files
tylerslatontylerslaton
authored
docs: add story-book.gpt example (#99)
* docs: add story-book example Signed-off-by: tylerslaton <[email protected]>
1 parent b480cc0 commit c1d4989

File tree

4 files changed

+254
-1
lines changed

4 files changed

+254
-1
lines changed

‎docs/README-USECASES.md

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

104104
### Vision
105+
105106
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).
106107

107-
[More details to come]
108+
### Image Generation
109+
110+
Here is a GPTScript that takes a story prompt and generates an illustrated children's book: [story-book.gpt](../examples/story-book)
108111

109112
## Memory Management
110113

‎examples/story-book/README.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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+
## Usage Instructions
7+
8+
1. **Install and bootstrap the `image-generation` tool.**
9+
10+
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:
11+
12+
> Note: We'll soon have package management that handles tools installation for you, but until then, you have to manually clone and boostrap tools.
13+
14+
```shell
15+
cd .. # This assumes you're starting at the root of the gptscript project. We want image-generation to be a sibling of gptscript.
16+
git clone https://github.com/gptscript-ai/image-generation
17+
cd image-generation
18+
make bootstrap
19+
source .venv/bin/activate
20+
cd - # returns you back to your original directory
21+
```
22+
23+
2. **Run the `story-book.gpt` script.**
24+
25+
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:
26+
27+
```shell
28+
cd examples/story-book
29+
gptscript story-book.gpt --prompt "Goldilocks" --pages 3
30+
```
31+
32+
3. **View the story.**
33+
34+
Open `index.html` in your browser to view the generated 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 = ["pages/page1.html", "pages/page2.html"];
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/story-book.gpt

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
tools: story-writer, story-illustrator, 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+
args: pages: The number of pages to generate
5+
6+
Do the following steps sequentially:
7+
8+
1. Create the `pages` directory if it does not already exist.
9+
2. If ${story} is a prompt and not a complete children's story, call story-writer
10+
to write a story based on the prompt.
11+
3. Take ${story} and break it up into ${pages} logical "pages" of text.
12+
4. For each page:
13+
- Call story-illustrator to illustrate it. Be sure to include any relevant characters to include when
14+
asking it to illustrate the page.
15+
- Download the illustration to a file at pages/<page_number>.png.
16+
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.
17+
Assume the illustration file is a sibling to the html file, Add this style tag to the HTML file:
18+
```html
19+
<style>
20+
body {
21+
display: flex;
22+
flex-direction: column;
23+
justify-content: center;
24+
align-items: center;
25+
text-align: center;
26+
}
27+
28+
img {
29+
max-width: 100%;
30+
height: auto;
31+
margin-bottom: 5%
32+
}
33+
34+
p {
35+
margin: 5%;
36+
font-size: 24px;
37+
}
38+
</style>
39+
```
40+
6. Edit the "pages" variable array in index.html to serve the pages you created. Do not
41+
edit anything else. Do not edit the page select field.
42+
43+
---
44+
name: story-writer
45+
description: Writes a story for children
46+
args: prompt: The prompt to use for the story
47+
48+
Write a story with a tone for children based on ${prompt}.
49+
50+
---
51+
name: story-illustrator
52+
tools: ../../../image-generation/tool.gpt
53+
description: Generates a illustration for a children's story
54+
args: text: The text of the page to illustrate
55+
56+
Think of a good prompt to generate an image to represent $text. Make sure to
57+
include the name of any relevant characters in your prompt. Then use that prompt to
58+
generate an illustration. Append any prompt that you have with ". In an pointilism cartoon
59+
children's book style with no text in it". Only return the URL of the illustration.
60+
61+
---
62+
name: mkdir
63+
tools: sys.write
64+
description: Creates a specified directory
65+
args: dir: Path to the directory to be created
66+
67+
#!bash
68+
69+
mkdir ${dir}

0 commit comments

Comments
 (0)