add initialization modal

Author: TechMitten

src/App.tsx

@@ -21,6 +21,7 @@ import { BrowserVideoRenderer, videoEvents } from './services/BrowserVideoRender
 import { RuntimeResourceModal, type ResourceSelection } from './components/RuntimeResourceModal';
 import { WebGPUInstructionsModal } from './components/WebGPUInstructionsModal';
 import { UnifiedInitModal } from './components/UnifiedInitModal';
+import { WebLLMLoadingModal } from './components/WebLLMLoadingModal';
 import { initWebLLM, webLlmEvents, checkWebGPUSupport } from './services/webLlmService';
 
 
@@ -39,7 +40,8 @@ function MainApp() {
   const [isTutorialOpen, setIsTutorialOpen] = useState(false);
   const [isResourceModalOpen, setIsResourceModalOpen] = useState(false);
   const [isWebGPUModalOpen, setIsWebGPUModalOpen] = useState(false);
-  const [isWebLLMInitModalOpen, setIsWebLLMInitModalOpen] = useState(false);
+  const [isWebLLMInitModalOpen, setIsWebLLMInitModalOpen] = useState(false); // For first-time download/setup
+  const [isWebLLMLoadingOpen, setIsWebLLMLoadingOpen] = useState(false); // For subsequent cached loading
   const [preinstalledResources, setPreinstalledResources] = useState({ tts: false, ffmpeg: false, webllm: false });
   const [activeDownloads, setActiveDownloads] = useState({ tts: false, ffmpeg: false, webllm: false });
   const [isActionsMenuOpen, setIsActionsMenuOpen] = useState(false);
@@ -141,8 +143,14 @@ function MainApp() {
           const model = settings.webLlmModel || 'gemma-2-2b-it-q4f32_1-MLC';
 
           if (cached.webllm) {
-              // Already cached, initialize silently in background
-              initWebLLM(model, (progress) => console.log('WebLLM Init:', progress)).catch(console.error);
+              // Already cached, initialize with loading modal
+              setIsWebLLMLoadingOpen(true);
+              initWebLLM(model, (progress) => console.log('WebLLM Init:', progress))
+                  .then(() => setIsWebLLMLoadingOpen(false))
+                  .catch((e) => {
+                      console.error(e);
+                      setIsWebLLMLoadingOpen(false);
+                  });
           } else if (!webLLMPreinitialized && !hideSetupModal) {
               // First time using WebLLM - show initialization modal
               // This ensures users see the progress and understand it's a one-time process
@@ -802,6 +810,11 @@ function MainApp() {
           onClose={() => setIsWebGPUModalOpen(false)}
        />
 
+        <WebLLMLoadingModal 
+           isOpen={isWebLLMLoadingOpen}
+           onComplete={() => setIsWebLLMLoadingOpen(false)}
+        />
+
        {isWebLLMInitModalOpen && (
         <UnifiedInitModal
            isOpen={isWebLLMInitModalOpen}

src/components/SlideEditor.tsx

@@ -476,6 +476,7 @@ const SortableSlideItem = ({
       }, slide.script, globalSettings?.aiFixScriptSystemPrompt);
       onUpdate(index, { script: transformed, selectionRanges: undefined, originalScript: slide.script });
     } catch (error) {
+      console.error("[SlideEditor] Transformation Error:", error);
       showAlert('Transformation failed: ' + (error instanceof Error ? error.message : String(error)), { type: 'error', title: 'Transformation Failed' });
     } finally {
       setIsTransforming(false);

src/components/UnifiedInitModal.tsx

@@ -163,7 +163,7 @@ export const UnifiedInitModal: React.FC<UnifiedInitModalProps> = ({
               ) : (
                 <>
                   We're downloading some resources to your browser. This <strong className="text-white">one-time setup</strong> enables
-                  everything to work offline and privately. Future visits will be instant.
+                  everything to work offline and privately. Future visits will be much faster.
                 </>
               )}
             </p>

src/components/WebLLMLoadingModal.tsx

@@ -0,0 +1,98 @@
+import React, { useEffect, useState } from 'react';
+import { BrainCircuit } from 'lucide-react';
+import { webLlmEvents } from '../services/webLlmService';
+import type { InitProgressReport } from '@mlc-ai/web-llm';
+
+interface WebLLMLoadingModalProps {
+  isOpen: boolean;
+  onComplete: () => void;
+}
+
+export const WebLLMLoadingModal: React.FC<WebLLMLoadingModalProps> = ({ isOpen, onComplete }) => {
+  const [progress, setProgress] = useState<InitProgressReport | null>(null);
+  const [maxPercent, setMaxPercent] = useState(0);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setProgress(null);
+      setMaxPercent(0);
+      return;
+    }
+
+    const handleWebLLMProgress = (e: Event) => {
+      const report = (e as CustomEvent<InitProgressReport>).detail;
+      setProgress(report);
+      
+      const newPercent = Math.round(report.progress * 100);
+      setMaxPercent(prev => Math.max(prev, newPercent));
+
+      if (report.progress === 1) {
+         // Determine if we should wait or close immediately
+         // We'll let the parent close it via the Promise resolution in App.tsx for speed,
+         // but keep a fallback here just in case.
+         setTimeout(onComplete, 500);
+      }
+    };
+
+    webLlmEvents.addEventListener('webllm-init-progress', handleWebLLMProgress);
+    // Also listen for pure completion just in case progress doesn't hit exactly 1 or event order is weird
+    const handleComplete = () => {
+        setTimeout(() => onComplete(), 500);
+    };
+    webLlmEvents.addEventListener('webllm-init-complete', handleComplete);
+
+    return () => {
+      webLlmEvents.removeEventListener('webllm-init-progress', handleWebLLMProgress);
+      webLlmEvents.removeEventListener('webllm-init-complete', handleComplete);
+    };
+  }, [isOpen, onComplete]);
+  if (!isOpen) return null;
+
+  const text = progress?.text || 'Initializing AI Engine...';
+  
+  // Use tracked max progress to avoid flickering/jumping backwards
+  const percent = maxPercent;
+
+  // Extract a cleaner message for the user if possible
+  let userMessage = text;
+  // Common WebLLM strings to pretty print
+  if (text.includes("Finish loading")) userMessage = "Finalizing AI engine...";
+  else if (text.includes("Loading model")) userMessage = "Loading AI model into memory...";
+  else if (text.includes("Fetching param")) userMessage = "Verifying model parameters...";
+
+  return (
+    <div className="fixed inset-0 z-60 flex items-center justify-center bg-black/80 backdrop-blur-sm animate-in fade-in duration-300">
+      <div className="w-full max-w-md mx-4 bg-[#18181b] border border-white/10 rounded-2xl shadow-2xl p-6 flex flex-col items-center text-center">
+        
+        <div className="relative mb-6">
+          <div className="absolute inset-0 bg-cyan-500/20 blur-xl rounded-full animate-pulse" />
+          <div className="relative p-4 bg-white/5 rounded-full border border-white/10">
+            <BrainCircuit className="w-8 h-8 text-cyan-400" />
+          </div>
+        </div>
+
+        <h3 className="text-xl font-bold text-white mb-2">
+            Starting AI Assistant
+        </h3>
+        
+        <p className="text-sm text-white/60 mb-6 max-w-[80%]">
+            Loading the AI model into your device's graphics processor.
+        </p>
+
+        <div className="w-full space-y-2">
+            <div className="flex justify-between text-xs font-medium text-white/50 uppercase tracking-wider">
+                <span>{userMessage}</span>
+                <span>{percent}%</span>
+            </div>
+            
+            <div className="h-1.5 w-full bg-white/10 rounded-full overflow-hidden">
+                <div 
+                    className="h-full bg-cyan-400 transition-all duration-300 ease-out"
+                    style={{ width: `${percent}%` }}
+                />
+            </div>
+        </div>
+      </div>
+    </div>
+  );
+};

src/services/aiService.ts

@@ -68,13 +68,13 @@ Before writing anything, read the ENTIRE slide content carefully. Identify:
 
 STEP 2 — WRITE THE NARRATION:
 Using your understanding of the slide's title and topic from Step 1, write a complete, natural spoken narration. The narration MUST:
-- Open by clearly stating the slide's title or subject so the listener immediately knows what the slide is about
-- Flow naturally from the title into the supporting content
-- Connect all fragmented text (titles, bullets, metadata) into coherent, conversational sentences
-- NOT hallucinate new facts — only "connect the dots" between what is already on the slide
+- ALWAYS begin with the exact title of the slide (or a concise subject summary if no title exists), followed immediately by a period.
+- Continue with complete sentences of the original slide data (transformed from broken up fragments) as if presenting the slide to a viewer.
+- Connect all fragmented text (titles, bullets, metadata) into coherent, conversational sentences.
+- NOT hallucinate new facts — only "connect the dots" between what is already on the slide.
 
 Write in a conversational, engaging style. Use natural transitions such as:
-- "This slide covers..." or "In this section, we'll look at..." to open with the topic
+- After the title, start the next sentence with "This slide covers..." or "In this section, we'll look at..."
 - "As you can see" or "Notice that" when pointing out visual elements
 - "Let's explore" or "Moving on to" when transitioning between points
 - "This is important because" to highlight key concepts
@@ -115,35 +115,41 @@ Example Input:
 "How to Install Visual Studio Code on Windows A Complete Beginner's Guide Step-by-Step Instructions for First-Time Users  Windows 10/11  ~5 Minutes  Free & Open Source Download: https://code.visualstudio.com Download size: 85 MiB $ npm install ."
 
 Example Output:
-This slide covers how to install Visual Studio Code on Windows. This is a complete beginner's guide with step-by-step instructions designed for first-time users. The guide is compatible with Windows 10 and Windows 11, and should take around 5 minutes to complete. Visual Studio Code is free and open-source software. You can download it from https colon slash slash code dot visualstudio dot com. The download size is approximately 85 mebibytes. To install dependencies, type npm install space period.`;
+How to Install Visual Studio Code on Windows. This slide covers installing Visual Studio Code on Windows. This is a complete beginner's guide with step-by-step instructions designed for first-time users. The guide is compatible with Windows 10 and Windows 11, and should take around 5 minutes to complete. Visual Studio Code is free and open-source software. You can download it from https colon slash slash code dot visualstudio dot com. The download size is approximately 85 mebibytes. To install dependencies, type npm install space period.`;
 
 export const transformText = async (settings: LLMSettings, text: string, customSystemPrompt?: string): Promise<string> => {
   const systemPrompt = customSystemPrompt?.trim() || DEFAULT_SYSTEM_PROMPT;
 
   const userPrompt = `Slide Content (full text extracted from the slide):
 "${text}"
 
-Read all of the above content, identify the slide's title and topic, then write the spoken narration.`;
+Read all of the above content. Start the narration with the slide's title/topic, then present the rest as complete sentences.`;
 
   if (settings.useWebLLM) {
     if (!settings.webLlmModel) {
         throw new Error("WebLLM is enabled but no model is selected.");
     }
-    try {
-        // Check if WebLLM is already initialized (it should be from the setup modal)
-        if (!isWebLLMLoaded()) {
-            throw new Error("WebLLM is not initialized. Please load a model in Settings (WebLLM tab) first.");
-        }
+    
+    // Check if WebLLM is already initialized (it should be from the setup modal)
+    if (!isWebLLMLoaded()) {
+        throw new Error("WebLLM is not initialized. Please load a model in Settings (WebLLM tab) first.");
+    }
 
+    try {
         const messages = [
             { role: "system" as const, content: systemPrompt },
             { role: "user" as const, content: userPrompt }
         ];
 
+        console.log("[AI Service] Sending request to WebLLM...", { model: settings.webLlmModel, promptLength: userPrompt.length });
         const response = await generateWebLLMResponse(messages);
-        return cleanLLMResponse(response);
+        console.log("[AI Service] Raw WebLLM Response:", response);
+        
+        const cleaned = cleanLLMResponse(response);
+        console.log("[AI Service] Cleaned Response:", cleaned);
+        return cleaned;
     } catch (error) {
-        console.error("WebLLM Error:", error);
+        console.error("WebLLM Error in aiService:", error);
         throw error;
     }
   }

src/services/webLlmService.ts

@@ -98,6 +98,7 @@ export const checkWebGPUSupport = async (): Promise<{ supported: boolean; hasF16
 
 let engine: MLCEngine | null = null;
 let currentModelId: string | null = null;
+let pendingInitPromise: Promise<MLCEngine> | null = null;
 
 
 export const webLlmEvents = new EventTarget();
@@ -113,32 +114,28 @@ export const unloadWebLLM = async () => {
 export const initWebLLM = async (
     modelId: string,
     onProgress: InitProgressCallback
-) => {
+): Promise<MLCEngine> => {
     // If engine exists and is loaded with the same model, do nothing
     if (engine && currentModelId === modelId) {
         return engine;
     }
 
+    // If an initialization is already in progress for the same model, return that promise
+    if (pendingInitPromise && currentModelId === modelId) {
+        return pendingInitPromise;
+    }
+
     // Apply WebGPU patch for vision models that require higher workgroup invocations
     await patchWebGPU();
 
-    try {
-        if (!engine) {
-            // Wrap the progress callback to also dispatch events
-            const wrappedCallback: InitProgressCallback = (report) => {
-                // Call the original callback
-                onProgress(report);
-                // Dispatch event for UI components
-                webLlmEvents.dispatchEvent(new CustomEvent('webllm-init-progress', { detail: report }));
-            };
-
-            const { CreateMLCEngine } = await import("@mlc-ai/web-llm");
-            engine = await CreateMLCEngine(modelId, { initProgressCallback: wrappedCallback });
-        } else {
-            // Reload/recreate engine if model changed
-            // We'll create a new engine instance to ensure clean state and correct callback binding
-            await engine.unload();
-            engine = null; // Prevent access to unloaded engine
+    // Start a new initialization
+    pendingInitPromise = (async () => {
+        try {
+            if (engine) {
+                // If switching models, unload first
+                await engine.unload();
+                engine = null;
+            }
 
             // Wrap the progress callback
             const wrappedCallback: InitProgressCallback = (report) => {
@@ -147,25 +144,30 @@ export const initWebLLM = async (
             };
 
             const { CreateMLCEngine } = await import("@mlc-ai/web-llm");
-            engine = await CreateMLCEngine(modelId, { initProgressCallback: wrappedCallback });
+            const newEngine = await CreateMLCEngine(modelId, { initProgressCallback: wrappedCallback });
+            
+            engine = newEngine;
+            currentModelId = modelId;
+
+            // Dispatch final progress events
+            webLlmEvents.dispatchEvent(new CustomEvent('webllm-init-progress', {
+                detail: { progress: 1, text: 'Initialization complete' }
+            }));
+            webLlmEvents.dispatchEvent(new CustomEvent('webllm-init-complete', { detail: { modelId } }));
+
+            return engine;
+        } catch (error) {
+            console.error("Failed to initialize WebLLM:", error);
+            engine = null;
+            currentModelId = null;
+            throw error;
+        } finally {
+            // Clear the pending promise so future calls can start fresh if needed
+            pendingInitPromise = null;
         }
-        currentModelId = modelId;
-
-        // Dispatch final progress event
-        webLlmEvents.dispatchEvent(new CustomEvent('webllm-init-progress', {
-            detail: { progress: 1, text: 'Initialization complete' }
-        }));
-        webLlmEvents.dispatchEvent(new CustomEvent('webllm-init-complete', { detail: { modelId } }));
+    })();
 
-        return engine;
-    } catch (error) {
-        console.error("Failed to initialize WebLLM:", error);
-        // CRITICAL: Clear the engine reference if initialization fails
-        // This prevents the "Cannot pass deleted object" error on retry
-        engine = null;
-        currentModelId = null;
-        throw error;
-    }
+    return pendingInitPromise;
 };
 
 export const getWebLLMEngine = () => engine;
@@ -179,15 +181,25 @@ export const generateWebLLMResponse = async (
     }
 
     try {
+        // Ensure engine is ready (sometimes it might be in a weird state)
+        if (!engine) {
+             throw new Error("WebLLM Engine lost connection. Please try again.");
+        }
+        console.log("[WebLLM] Generating response with engine:", engine, "Model:", currentModelId);
         const reply = await engine.chat.completions.create({
             messages,
             temperature,
             stream: false, // For now, no streaming to keep it simple with existing architecture
         });
+        console.log("[WebLLM] Raw Reply Object:", reply);
 
         return reply.choices[0].message.content || "";
     } catch (error) {
         console.error("WebLLM Generation Error:", error);
+        // Force reload next time if something critical failed
+        // engine = null; 
+        // Actually, let's not force null immediately unless it's a specific error, 
+        // but the parent service (aiService) handles the retry logic now.
         throw error;
     }
 };