Refactor: Remove test settings and functionality

Removed the 'Generate randomly' button from the UI, the associated 'generateRandomTestStory' function, and its event listener. This change prepares the application for use with the live Arduino backend by removing test-specific code.

Author: Matteo-it

examples/bedtime-story-teller/app.yaml

@@ -5,7 +5,7 @@ description:
   It uses a cloud-based language model to generate a story based on user input and shows the story on a web interface.
 
 bricks:
-  - arduino:cloud_llm
-    variables:
-      API_KEY: <API_KEY>
+  - arduino:cloud_llm:
+      variables:
+        API_KEY: <API_KEY>
   - arduino:web_ui

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

@@ -4,26 +4,7 @@
 
 const socket = io(`http://${window.location.host}`);
 
-function generateRandomTestStory() {
-    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('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';
-    setTimeout(() => {
-        const randomStory = `Once upon a time, in a land far, far away, there lived a brave ${Math.random() > 0.5 ? 'knight' : 'princess'}. They embarked on a quest to find a magical ${Math.random() > 0.5 ? 'dragon' : 'unicorn'} and save their kingdom from a wicked ${Math.random() > 0.5 ? 'sorcerer' : 'giant'}. After many adventures and challenges, they succeeded and lived happily ever after. The end.`;
-        document.getElementById('story-container').style.display = 'flex';
-        const storyResponse = document.getElementById('story-response');
-        storyResponse.textContent += randomStory;
-        document.getElementById('loading-spinner').style.display = 'none';
-        const clearStoryButton = document.getElementById('clear-story-button');
-        clearStoryButton.style.display = 'block';
-        clearStoryButton.disabled = false;
-    }, 1500);
-}
+
 
 function initSocketIO() {
     socket.on('response', (data) => {
@@ -347,7 +328,7 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     document.querySelector('.generate-story-button').addEventListener('click', gatherDataAndGenerateStory);
-    document.querySelector('.generate-randomly-button').addEventListener('click', generateRandomTestStory);
+
 
     const modal = document.getElementById('new-story-modal');
     const clearButton = document.getElementById('clear-story-button');

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

@@ -172,10 +172,6 @@ <h3 class="parameter-title">Other</h3>
                         <div class="story-output-container">
                             <div class="story-output-placeholder">
                                 <p>Set parameters to generate story</p>
-                                <p>or</p>
-                                <button class="generate-randomly-button">
-                                    Generate randomly <img src="./img/double-arrow.svg" alt="double arrow icon">
-                                </button>
                             </div>
                             <div id="story-response-area" style="display: none;">
                                 <div id="loading-spinner" class="spinner" style="display: none;"></div>

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

@@ -666,10 +666,6 @@ body {
  */
 
 @media (max-width: 768px) {
-    body {
-        padding: 12px 16px;
-    }
-
     .container {
         max-width: none;
         width: 100%;