Skip to content

Commit f47674a

Browse files
Matteo-itMatteo-it
committed
Update char container
1 parent 9c0a077 commit f47674a

File tree

9 files changed

+766
-109
lines changed

9 files changed

+766
-109
lines changed

‎examples/bedtime-story-teller/app.yaml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description:
55
It uses a cloud-based language model to generate a story based on user input and shows the story on a web interface.
66

77
bricks:
8-
- arduino:cloud_llm
9-
variables:
10-
API_KEY: <API_KEY>
8+
- arduino:cloud_llm:
9+
variables:
10+
API_KEY: <API_KEY>
1111
- arduino:web_ui

‎examples/bedtime-story-teller/assets/app.js‎

Lines changed: 284 additions & 73 deletions
Large diffs are not rendered by default.

‎examples/bedtime-story-teller/assets/img/copy.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎examples/bedtime-story-teller/assets/img/double-arrow.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎examples/bedtime-story-teller/assets/img/logo.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎examples/bedtime-story-teller/assets/img/trash.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎examples/bedtime-story-teller/assets/index.html‎

Lines changed: 67 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,10 @@ <h2 class="column-title">Set parameters</h2>
2626

2727
<div></div> <!-- This is for the gap -->
2828

29-
<h2 class="column-title">Your story</h2>
29+
<div class="your-story-header">
30+
<h2 class="column-title">Your story</h2>
31+
<button id="clear-story-button" style="display: none;">New story</button>
32+
</div>
3033

3134
<div class="container">
3235

@@ -87,7 +90,7 @@ <h4 class="paragraph-title">Tone</h4>
8790
<h4 class="paragraph-title">Ending type</h4>
8891
<div class="chips-container">
8992
<span class="chip"><img src="./img/happy.svg" alt="happy icon"><span>Happy and reassuring</span></span>
90-
<span class="chip"><img src="./img/misterious.svg" alt="misterious icon"><span>open and mysterious</span></span>
93+
<span class="chip"><img src="./img/misterious.svg" alt="misterious icon"><span>Open and mysterious</span></span>
9194
<span class="chip"><img src="./img/doubt.svg" alt="doubt icon"><span>With a moral</span></span>
9295
<span class="chip"><img src="./img/hope.svg" alt="hope icon"><span>Dramatic but with hope</span></span>
9396
</div>
@@ -114,11 +117,37 @@ <h4 class="paragraph-title">Duration (min)</h4>
114117
<div class="parameter-container">
115118
<div class="parameter-header">
116119
<h3 class="parameter-title">Characters</h3>
117-
<span class="selected-value"></span>
120+
<span class="optional-text">(max 5)</span>
118121
<img src="./img/arrow-right.svg" class="arrow-icon" alt="arrow icon">
119122
</div>
120123
<div class="parameter-content">
121-
CONTENUTO
124+
<div class="characters-list">
125+
<div class="character-input-group">
126+
<div class="character-inputs">
127+
<div class="character-first-row">
128+
<input type="text" placeholder="Name" class="character-name">
129+
<select class="character-role">
130+
<option value="" disabled selected>Select role...</option>
131+
<option value="protagonist">👑 Protagonist</option>
132+
<option value="positive-helper">🧸 Positive helper</option>
133+
<option value="antagonist">😈 Antagonist</option>
134+
<option value="negative-helper">🐍 Negative helper</option>
135+
<option value="other">🐧 Other characters</option>
136+
</select>
137+
</div>
138+
<div class="character-second-row">
139+
<input type="text" placeholder="Something about character traits, goals ..." class="character-description">
140+
<span class="optional-text">(optional)</span>
141+
</div>
142+
</div>
143+
<button class="delete-character-button" style="display: none;">
144+
<img src="./img/trash.svg" alt="delete character">
145+
</button>
146+
</div>
147+
</div>
148+
<div class="add-character-container">
149+
<button class="add-character-button">Add character +</button>
150+
</div>
122151
</div>
123152
</div>
124153

@@ -140,12 +169,45 @@ <h3 class="parameter-title">Other</h3>
140169

141170
</div>
142171

143-
<div class="story-output-container"></div>
172+
<div class="story-output-container">
173+
<div class="story-output-placeholder">
174+
<p>Set parameters to generate story</p>
175+
</div>
176+
<div id="story-response-area" style="display: none;">
177+
<div id="loading-spinner" class="spinner" style="display: none;"></div>
178+
<div class="response-container" id="story-container" style="display: none;">
179+
<div class="response-header">
180+
<h3 class="response-title">Story</h3>
181+
<div class="response-header-buttons">
182+
<button id="copy-story-button" class="icon-button">
183+
Copy <img src="./img/copy.svg" alt="copy icon">
184+
</button>
185+
</div>
186+
</div>
187+
<div id="story-response" class="response-content"></div>
188+
</div>
189+
</div>
190+
</div>
144191

145192
</div>
146193
</div>
147194
</div>
148195

196+
<div id="new-story-modal" class="modal" style="display: none;">
197+
<div class="modal-content">
198+
<div class="modal-header">
199+
<h2>New Story</h2>
200+
<span class="close-button">&times;</span>
201+
</div>
202+
<div class="modal-body">
203+
<p>Creating a new story will delete the existing one, Are you sure? This action cannot be undone.</p>
204+
</div>
205+
<div class="modal-footer">
206+
<button id="confirm-new-story-button" class="primary-button">Create new story</button>
207+
</div>
208+
</div>
209+
</div>
210+
149211
<script src="libs/socket.io.min.js"></script>
150212
<script src="app.js"></script>
151213
</body>

0 commit comments

Comments
 (0)