fix examples

static/app.js

@@ -68,6 +68,36 @@ marked.setOptions({
 
 // Setup Initial State & Event Handlers
 async function initializeApp() {
+    // Re-query all DOM elements to ensure they are fully resolved after DOMContentLoaded
+    dom.effortRadioButtons = document.querySelectorAll('input[name="reasoning-effort"]');
+    dom.maxTokensSlider = document.getElementById("max-tokens-slider");
+    dom.maxTokensVal = document.getElementById("max-tokens-val");
+    dom.temperatureSlider = document.getElementById("temperature-slider");
+    dom.temperatureVal = document.getElementById("temperature-val");
+    dom.sidebarRight = document.getElementById("sidebar-right");
+    dom.sidebarOverlay = document.getElementById("sidebar-overlay");
+    dom.btnToggleRight = document.getElementById("btn-toggle-right");
+    dom.btnCloseDrawer = document.getElementById("btn-close-drawer");
+    dom.studioDashboard = document.getElementById("studio-dashboard");
+    dom.chatThreadContainer = document.getElementById("chat-thread-container");
+    dom.chatMessagesFeed = document.getElementById("chat-messages-feed");
+    dom.studioPromptInput = document.getElementById("studio-prompt-input");
+    dom.innerShelfPreview = document.getElementById("inner-shelf-preview");
+    dom.studioUploadTrigger = document.getElementById("studio-upload-trigger");
+    dom.studioSendBtn = document.getElementById("studio-send-button");
+    dom.studioSpinner = document.getElementById("studio-spinner");
+    dom.miniPromptInput = document.getElementById("mini-prompt-input");
+    dom.miniShelfPreview = document.getElementById("mini-shelf-preview");
+    dom.miniUploadTrigger = document.getElementById("mini-upload-trigger");
+    dom.miniSendBtn = document.getElementById("mini-send-button");
+    dom.miniSpinner = document.getElementById("mini-spinner");
+    dom.fileUploader = document.getElementById("file-uploader");
+    dom.shelfList = document.getElementById("shelf-list");
+    dom.dropZone = document.getElementById("drop-zone");
+    dom.menuNewChat = document.getElementById("menu-new-chat");
+    dom.clearChatBtn = document.getElementById("clear-chat-button");
+    dom.recipeChips = document.querySelectorAll(".recipe-chip");
+
     // 1. Connect Gradio Client in background (Non-blocking)
     Client.connect(window.location.origin)
         .then(app => {
@@ -299,28 +329,26 @@ function removeFile(id) {
 
 // Load Cookbook Showcase Recipes
 function loadRecipe(recipeType) {
-    const mockImageBase64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
     STATE.uploadedFiles = [];
-
     let promptText = "";
 
-    if (recipeType === "whiteboard") {
-        promptText = "Here is a snapshot of our whiteboard project plan sketch. Translate this visual sequence of tasks and boxes into a clean, itemized roadmap plan with a structured markdown table.";
+    if (recipeType === "landscape") {
+        promptText = "Analyze this landscape photograph. Describe the lighting, composition, colors, and the general mood of the environment shown.";
         STATE.uploadedFiles.push({
-            id: "recipe-whiteboard",
-            name: "whiteboard_gantt.png",
-            type: "image/png",
-            size: "0.02 MB",
-            base64: mockImageBase64
+            id: "recipe-landscape",
+            name: "nature_landscape.jpg",
+            type: "image/jpeg",
+            size: "0.15 MB",
+            base64: "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=800&q=80"
         });
-    } else if (recipeType === "diagnostic") {
-        promptText = "This is a recorded visual sequence of steps leading to a runtime exception crash. Provide a detailed reconstruction of the event timeline, summarize the diagnostic signals, and suggest an engineering hotfix.";
+    } else if (recipeType === "wildlife") {
+        promptText = "Describe the subject in this video, its actions, the environment it's in, and compile a second-by-second activity log of what happens.";
         STATE.uploadedFiles.push({
-            id: "recipe-diagnostics",
-            name: "console_bug.mp4",
+            id: "recipe-wildlife",
+            name: "wildlife_clip.mp4",
             type: "video/mp4",
-            size: "1.45 MB",
-            base64: mockImageBase64
+            size: "0.68 MB",
+            base64: "https://www.w3schools.com/html/mov_bbb.mp4"
         });
     }
 
@@ -479,7 +507,7 @@ function appendUserBubble(text, files) {
             } else {
                 attachmentsHtml += `
                     <div class="bubble-attachment-card">
-                        <div class="media-chip-preview" style="width:100%;height:100%;">🎬</div>
+                        <video src="${file.base64}" controls preload="metadata"></video>
                         <div class="bubble-attachment-label">VIDEO</div>
                     </div>
                 `;
@@ -638,4 +666,8 @@ function scrollToBottom() {
 }
 
 // Initialise application when DOM is fully set up
-window.addEventListener("DOMContentLoaded", initializeApp);
+if (document.readyState === "loading") {
+    window.addEventListener("DOMContentLoaded", initializeApp);
+} else {
+    initializeApp();
+}

static/index.html

@@ -14,7 +14,7 @@
     <!-- Marked.js for Markdown Parsing -->
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <!-- Custom Style Sheet -->
-    <link rel="stylesheet" href="/static/style.css">
+    <link rel="stylesheet" href="/static/style.css?v=3">
 </head>
 <body>
     <div class="app-container">
@@ -70,13 +70,13 @@
                     <div class="showcase-section">
                         <h3 class="showcase-title">Try these tasks</h3>
                         <div class="showcase-chips-row">
-                            <div class="recipe-chip" data-recipe="whiteboard">
-                                <span class="chip-icon">🖼️</span>
-                                <span class="chip-text">Analyze Whiteboard Gantt</span>
+                            <div class="recipe-chip" data-recipe="landscape">
+                                <span class="chip-icon">🌳</span>
+                                <span class="chip-text">Analyze Landscape Image</span>
                             </div>
-                            <div class="recipe-chip" data-recipe="diagnostic">
+                            <div class="recipe-chip" data-recipe="wildlife">
                                 <span class="chip-icon">🎬</span>
-                                <span class="chip-text">Diagnose Video Logs</span>
+                                <span class="chip-text">Analyze Wildlife Video</span>
                             </div>
                         </div>
                     </div>
@@ -170,6 +170,6 @@
     </div>
 
     <!-- Gradio Client JS connection -->
-    <script type="module" src="/static/app.js"></script>
+    <script type="module" src="/static/app.js?v=4"></script>
 </body>
 </html>