prompt update

Author: Matteo-it

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

@@ -10,6 +10,7 @@ function initSocketIO() {
     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';
         const clearStoryButton = document.getElementById('clear-story-button');
         clearStoryButton.style.display = 'block';
@@ -135,6 +136,7 @@ function gatherDataAndGenerateStory() {
     const endingType = storyTypeContainer.querySelector('.story-type-paragraph:nth-child(2) .chip.selected')?.textContent.trim() || 'any';
     const narrativeStructure = storyTypeContainer.querySelector('.story-type-paragraph:nth-child(3) .chip.selected')?.textContent.trim() || 'any';
     const duration = storyTypeContainer.querySelector('.story-type-paragraph:nth-child(4) .chip.selected')?.textContent.trim() || 'any';
+    
     const characters = [];
     const characterGroups = document.querySelectorAll('.character-input-group');
     characterGroups.forEach(group => {
@@ -145,29 +147,32 @@ function gatherDataAndGenerateStory() {
             characters.push({ name, role, description });
         }
     });
-    const protagonist = characters.find(c => c.role === 'protagonist');
-    const helper = characters.find(c => c.role === 'positive-helper');
-    const antagonist = characters.find(c => c.role === 'antagonist');
+
     const other = document.querySelector('.other-textarea').value.trim();
-    const formattedPrompt = `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 about an <strong>${protagonist ? protagonist.description : ''}</strong>, <strong>${protagonist ? protagonist.name : 'a character'}</strong> accompanied by his <strong>${helper ? helper.description : ''}</strong> helper <strong>${helper ? helper.name : 'a friend'}</strong> who will have to face the <strong>${antagonist ? antagonist.description : ''}</strong> antagonist <strong>${antagonist ? antagonist.name : 'a villain'}</strong>. 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>${narrativeStructure}</strong> narrative structure, leaving the child with a sense of <strong>${endingType}</strong>. The language should be easy to understand and suitable for my child's age comprehension.
-    ${other ? `
-
-Other on optional stuff for the story: <strong>${other}</strong>` : ''}`;
-    document.getElementById('prompt-display').innerHTML = formattedPrompt;
-    document.getElementById('prompt-container').style.display = 'flex';
-    const rawPrompt = formattedPrompt.replace(/<strong>/g, '').replace(/<\/strong>/g, '');
-    generateStory(rawPrompt);
+
+    const storyData = {
+        age,
+        theme,
+        tone,
+        endingType,
+        narrativeStructure,
+        duration,
+        characters,
+        other,
+    };
+
+    generateStory(storyData);
 }
 
-function generateStory(msg) {
+function generateStory(data) {
     document.querySelector('.story-output-placeholder').style.display = 'none';
     const responseArea = document.getElementById('story-response-area');
     responseArea.style.display = 'flex';
     document.getElementById('story-container').style.display = 'none';
     document.getElementById('loading-spinner').style.display = 'block';
     document.getElementById('story-response').textContent = '';
     document.getElementById('clear-story-button').style.display = 'none';
-    socket.emit('generate_story', msg);
+    socket.emit('generate_story', data);
 }
 
 function resetStoryView() {

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

@@ -175,10 +175,6 @@ <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/python/main.py

@@ -17,8 +17,47 @@
 
 ui = WebUI()
 
-def generate_story(_, msg):
-    for resp in llm.chat_stream(msg):
+def find_character_by_role(characters, role):
+    for char in characters:
+        if char['role'] == role:
+            return char
+    return None
+
+def generate_story(_, data):
+    age = data.get('age', 'any')
+    theme = data.get('theme', 'any')
+    tone = data.get('tone', 'any')
+    ending_type = data.get('endingType', 'any')
+    narrative_structure = data.get('narrativeStructure', 'any')
+    duration = data.get('duration', 'any')
+    characters = data.get('characters', [])
+    other = data.get('other', '')
+
+    protagonist = find_character_by_role(characters, 'protagonist')
+    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."
+    if protagonist:
+        prompt += f" about an {protagonist['description']}, {protagonist['name']}"
+    else:
+        prompt += " about a character"
+
+    if helper:
+        prompt += f" accompanied by his {helper['description']} helper {helper['name']}"
+    else:
+        prompt += " accompanied by a friend"
+    
+    if antagonist:
+        prompt += f" who will have to face the {antagonist['description']} antagonist {antagonist['name']}"
+    else:
+        prompt += " who will have to face a villain"
+
+    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."
+    if other:
+        prompt += f"\n\nOther on optional stuff for the story: {other}"
+
+    for resp in llm.chat_stream(prompt):
         ui.send_message("response", resp)
 
 ui.on_message("generate_story", generate_story)