update storyteller UI

Author: Matteo-it

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

@@ -4,18 +4,34 @@
 
 const socket = io(`http://${window.location.host}`);
 
+let generateStoryButtonOriginalHTML = ''; // To store the original content of the generate story button
 
 
 function initSocketIO() {
+    socket.on('prompt', (data) => {
+        const promptContainer = document.getElementById('prompt-container');
+        const promptDisplay = document.getElementById('prompt-display');
+        promptDisplay.innerHTML = data;
+        promptContainer.style.display = 'flex';
+    });
+
     socket.on('response', (data) => {
         document.getElementById('story-container').style.display = 'flex';
         const storyResponse = document.getElementById('story-response');
-        storyResponse.textContent = data;
-        document.getElementById('loading-spinner').style.display = 'none';
+        storyResponse.textContent += data;
+        document.getElementById('loading-spinner').style.display = 'none'; // Hide the general loading spinner
         const clearStoryButton = document.getElementById('clear-story-button');
         clearStoryButton.style.display = 'block';
         clearStoryButton.disabled = false;
     });
+
+    socket.on('stream_end', () => {
+        const generateStoryButton = document.querySelector('.generate-story-button');
+        if (generateStoryButton) {
+            generateStoryButton.disabled = false;
+            generateStoryButton.innerHTML = generateStoryButtonOriginalHTML; // Restore original content
+        }
+    });
 }
 
 function unlockAndOpenNext(currentContainer) {
@@ -168,9 +184,19 @@ function generateStory(data) {
     document.querySelector('.story-output-placeholder').style.display = 'none';
     const responseArea = document.getElementById('story-response-area');
     responseArea.style.display = 'flex';
+    document.getElementById('prompt-container').style.display = 'none';
+    document.getElementById('prompt-display').textContent = '';
     document.getElementById('story-container').style.display = 'none';
-    document.getElementById('loading-spinner').style.display = 'block';
     document.getElementById('story-response').textContent = '';
+    document.getElementById('loading-spinner').style.display = 'none'; // Hide the general loading spinner
+
+    const generateStoryButton = document.querySelector('.generate-story-button');
+    if (generateStoryButton) {
+        generateStoryButton.disabled = true;
+        // Append the spinner instead of replacing innerHTML
+        generateStoryButton.innerHTML += '<div class="button-spinner spinner"></div>';
+    }
+    
     document.getElementById('clear-story-button').style.display = 'none';
     socket.emit('generate_story', data);
 }
@@ -223,10 +249,12 @@ function resetStoryView() {
         }
     }
 
-    // Hide "Generate story" button
+    // Restore "Generate story" button to original state
     const generateStoryButton = document.querySelector('.generate-story-button');
     if (generateStoryButton) {
-        generateStoryButton.style.display = 'none';
+        generateStoryButton.style.display = 'none'; // Keep hidden if no chars, will be set to flex by checkCharactersAndUnlockNext
+        generateStoryButton.disabled = false;
+        generateStoryButton.innerHTML = generateStoryButtonOriginalHTML;
     }
 
     // Reset parameter containers state
@@ -250,6 +278,11 @@ function resetStoryView() {
 document.addEventListener('DOMContentLoaded', () => {
     initSocketIO();
 
+    const generateStoryButton = document.querySelector('.generate-story-button');
+    if (generateStoryButton) {
+        generateStoryButtonOriginalHTML = generateStoryButton.innerHTML; // Store original content
+    }
+
     const parameterContainers = document.querySelectorAll('.parameter-container');
 
     parameterContainers.forEach((container, index) => {

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

@@ -175,6 +175,10 @@ <h3 class="parameter-title">Other</h3>
                             </div>
                             <div id="story-response-area" style="display: none;">
                                 <div id="loading-spinner" class="spinner" style="display: none;"></div>
+                                <div class="response-container" id="prompt-container" style="display: none;">
+                                    <h3 class="response-title">Prompt</h3>
+                                    <div id="prompt-display" class="response-content"></div>
+                                </div>
                                 <div class="response-container" id="story-container" style="display: none;">
                                     <div class="response-header">
                                         <h3 class="response-title">Story</h3>

examples/bedtime-story-teller/assets/style.css

@@ -144,10 +144,8 @@ body {
 .parameter-header {
     display: flex;
     align-items: center;
-}
+    gap: 8px;
 
-.parameter-header .parameter-title {
-    margin-right: 8px; /* Gap between title and optional text/selected value */
 }
 
 .parameter-header .arrow-icon {
@@ -224,9 +222,10 @@ body {
     border: 1px solid #C9D2D2;
     border-radius: 4px;
     background: #FFF;
-    margin: 4px;
+    margin: 0px 4px 4px 0px;
     font-size: 12px;
     font-weight: 600;
+    white-space: nowrap;
 }
 
 .selection-pill img {
@@ -266,6 +265,8 @@ body {
     font-weight: 400;
     line-height: 160%;
     letter-spacing: 0.12px;
+    align-items: center;
+    gap: 4px;
 }
 
 .paragraph-title {
@@ -322,6 +323,11 @@ body {
     width: fit-content; /* Make it not full width */
 }
 
+.generate-story-button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
 .story-output-placeholder {
     display: flex;
     flex-direction: column;
@@ -615,11 +621,22 @@ body {
     overflow-y: auto;
 }
 
+#prompt-display strong {
+    color: #008184;
+    font-weight: bold;
+}
+
 .response-content strong {
     color: #25C2C7; /* Highlight color for parameters */
 }
 
+.story-type-paragraph {
+    margin-bottom: 8px;
+}
 
+.response-title {
+    margin-bottom: 8px;
+}
 
 #story-container .response-title,
 #story-container .response-content {
@@ -637,6 +654,13 @@ body {
     display: inline-block;
     vertical-align: middle;
 }
+
+.button-spinner.spinner {
+    width: 20px;
+    height: 20px;
+    border-width: 2px; /* Smaller border for smaller spinner */
+    margin: 0; /* Remove margin-left if inside button */
+}
 @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
@@ -650,14 +674,54 @@ body {
 
 @media (max-width: 1024px) {
     .main-content {
-        flex-direction: column;
-        align-items: center;
-        gap: 24px;
+        grid-template-columns: 1fr; /* Switch to a single column layout */
+        gap: 24px; /* Adjust the gap for the new single-column layout */
     }
 
-    .container {
-        max-width: 800px;
-        width: 90%;
+    /* Reorder grid items for single-column layout */
+    .main-content > .column-title:nth-child(1) {
+        grid-row: 1; /* Parameters title */
+    }
+
+        .main-content > .container { /* Parameters content */
+
+            grid-row: 2; /* Parameters content */
+
+            grid-column: 1;
+
+            max-width: none;
+
+            width: 100%;
+
+            padding: 0; /* Remove padding for alignment */
+
+        }
+
+
+
+        .your-story-header {
+
+            grid-row: 3; /* Story title */
+
+            grid-column: 1;
+
+        }
+
+
+
+        .story-output-container {
+
+            grid-row: 4; /* Story content */
+
+            grid-column: 1;
+
+            padding: 0; /* Remove padding for alignment */
+
+        }
+
+    /* Hide the empty div that created the column gap */
+    .main-content > div:nth-child(2) {
+        display: none;
     }
 }
 

examples/bedtime-story-teller/python/main.py

@@ -3,6 +3,7 @@
 # SPDX-License-Identifier: MPL-2.0
 
 import os
+import re
 from arduino.app_bricks.cloud_llm import CloudLLM, CloudModel
 from arduino.app_bricks.web_ui import WebUI
 from arduino.app_utils import App
@@ -37,29 +38,40 @@ def generate_story(_, data):
     helper = find_character_by_role(characters, 'positive-helper')
     antagonist = find_character_by_role(characters, 'antagonist')
 
-    prompt = f"As a parent who loves to read bedtime stories to my {age} year old child, I need a delightful and age-appropriate story."
+    # Create a prompt with HTML for display
+    prompt_for_display = f"As a parent who loves to read bedtime stories to my <strong>{age}</strong> year old child, I need a delightful and age-appropriate story."
     if protagonist:
-        prompt += f" about an {protagonist['description']}, {protagonist['name']}"
+        prompt_for_display += f" about an <strong>{protagonist['description']}</strong>, <strong>{protagonist['name']}</strong>"
     else:
-        prompt += " about a character"
+        prompt_for_display += " about <strong>a character</strong>"
 
     if helper:
-        prompt += f" accompanied by his {helper['description']} helper {helper['name']}"
+        prompt_for_display += f" accompanied by his <strong>{helper['description']}</strong> helper <strong>{helper['name']}</strong>"
     else:
-        prompt += " accompanied by a friend"
-    
+        prompt_for_display += " accompanied by <strong>a friend</strong>"
+
     if antagonist:
-        prompt += f" who will have to face the {antagonist['description']} antagonist {antagonist['name']}"
+        prompt_for_display += f" who will have to face the <strong>{antagonist['description']}</strong> antagonist <strong>{antagonist['name']}</strong>"
     else:
-        prompt += " who will have to face a villain"
+        prompt_for_display += " who will have to face <strong>a villain</strong>"
 
-    prompt += f". The story type is {theme}. The tone should be {tone}. The format should be a narrative-style story with a clear beginning, middle, and end, allowing for a smooth and engaging reading experience. The objective is to entertain and soothe the child before bedtime. Provide a brief introduction to set the scene and introduce the main character. The scope should revolve around the topic: managing emotions and conflicts. The length should be approximately {duration}. Please ensure the story has a {narrative_structure} narrative structure, leaving the child with a sense of {ending_type}. The language should be easy to understand and suitable for my child's age comprehension."
+    prompt_for_display += f". The story type is <strong>{theme}</strong>. The tone should be <strong>{tone}</strong>. The format should be a narrative-style story with a clear beginning, middle, and end, allowing for a smooth and engaging reading experience. The objective is to entertain and soothe the child before bedtime. Provide a brief introduction to set the scene and introduce the main character. The scope should revolve around the topic: managing emotions and conflicts. The length should be approximately <strong>{duration}</strong>. Please ensure the story has a <strong>{narrative_structure}</strong> narrative structure, leaving the child with a sense of <strong>{ending_type}</strong>. The language should be easy to understand and suitable for my child's age comprehension."
     if other:
-        prompt += f"\n\nOther on optional stuff for the story: {other}"
+        prompt_for_display += f"\n\nOther on optional stuff for the story: <strong>{other}</strong>"
+
+    # Create a plain text prompt for the LLM by stripping HTML tags
+    prompt_for_llm = re.sub('<[^>]*>', '', prompt_for_display)
 
-    for resp in llm.chat_stream(prompt):
+    # Send the display prompt to the UI
+    ui.send_message("prompt", prompt_for_display)
+
+    # Use the plain text prompt for the LLM and stream the response
+    for resp in llm.chat_stream(prompt_for_llm):
         ui.send_message("response", resp)
 
+    # Signal the end of the stream
+    ui.send_message("stream_end", {})
+
 ui.on_message("generate_story", generate_story)
 
 App.run()