Update index.html

index.html

@@ -212,6 +212,27 @@
           </div>
         </div>
 
+        <!-- Performance Metrics -->
+        <div class="p-3 bg-gray-50 border-2 border-black shadow-neo-sm">
+          <div class="text-xs font-bold mb-2 flex items-center gap-2">
+            <i class="fas fa-tachometer-alt"></i> PERFORMANCE
+          </div>
+          <div class="grid grid-cols-3 gap-2 text-[10px] font-mono">
+            <div class="bg-white p-1 border border-black">
+              <div class="text-gray-500 uppercase">Model Load</div>
+              <div class="font-bold" id="metric-compilation">-</div>
+            </div>
+            <div class="bg-white p-1 border border-black">
+              <div class="text-gray-500 uppercase">TTFT</div>
+              <div class="font-bold" id="metric-ttft">-</div>
+            </div>
+            <div class="bg-white p-1 border border-black">
+              <div class="text-gray-500 uppercase">TPS</div>
+              <div class="font-bold" id="metric-tps">-</div>
+            </div>
+          </div>
+        </div>
+
         <!-- Action Bar -->
         <div class="p-4 bg-gray-100 border-t-2 border-black flex gap-3 shrink-0">
           <button id="btn-play"
@@ -640,6 +661,10 @@
         currentBall: null,
         progress: { unlockedIndex: 0, stars: {} },
         winCondition: null,
+        // Performance metrics
+        modelCompilationTime: 0,
+        lastTTFT: 0,
+        lastTPS: 0,
       };
       function loadProgress() {
         const saved = localStorage.getItem(STORAGE_KEY);
@@ -1062,11 +1087,21 @@
       const TOOL_SCHEMA = [{"type": "function", "function": {"name": "add", "description": "Add a shape into the game scene.", "parameters": {"type": "object", "properties": {"shape": {"type": "string", "enum": ["circle", "square", "triangle", "star", "rectangle", "line", "ellipse"], "description": "The kind shape to add. Required."}, "location": {"type": "string", "description": "The [x, y] coordinates where the shape will be placed or a descriptive string. Required."}, "size": {"type": "number", "description": "The size of the object (between 0.1 and 10.0). Default is 1.0."}, "rotation": {"type": "integer", "description": "The initial clockwise rotation of the object in degrees (0-360). Default is 0."}, "friction": {"type": "number", "description": "The friction of the object (between 0.0 and 1.0). Default is 0.0."}, "restitution": {"type": "number", "description": "The bounciness of the object (between 0.0 and 1.0). Default is 0.0."}, "mass": {"type": "number", "description": "The mass of the object (between 1.0 and 10.0). Default is 1.0."}, "delay": {"type": "number", "description": "The time in seconds to wait before the object appears in the scene. Default is 0.0."}, "static": {"type": "boolean", "description": "Whether the object is static (immovable) or dynamic. Default is False."}, "velocity": {"type": "array", "items": {"type": "number"}, "description": "The initial [vx, vy] velocity vector of the object (values between -10.0 and 10.0). Default is [0.0, 0.0]."}, "color": {"type": "string", "description": "The color of the object as a string or hex code (e.g., \"red\", \"blue\", \"#FF00FF\"). Default is \"red\"."}}, "required": ["shape", "location"]}, "return": {"type": "string", "description": "A unique identifier for the added shape."}}}];
       async function initModel() {
         try {
+          const compilationStart = performance.now();
+          console.log("⏱️ Starting model compilation...");
+          
           tokenizer = await AutoTokenizer.from_pretrained(MODEL_ID);
           model = await AutoModelForCausalLM.from_pretrained(MODEL_ID, {
             device: "webgpu",
             dtype: "q4",
           });
+          
+          const compilationEnd = performance.now();
+          STATE.modelCompilationTime = compilationEnd - compilationStart;
+          console.log(`✅ Model compiled in ${STATE.modelCompilationTime.toFixed(2)}ms (${(STATE.modelCompilationTime / 1000).toFixed(2)}s)`);
+          
+          // Update UI
+          document.getElementById("metric-compilation").innerText = `${(STATE.modelCompilationTime / 1000).toFixed(2)}s`;
           document.getElementById("loading-overlay").classList.add("hidden");
         } catch (e) {
           console.error(e);
@@ -1087,6 +1122,8 @@
         try {
           const lines = input.split('\n').map(l => l.trim()).filter(l => l.length > 0 && !l.startsWith("//"));
           for (const line of lines) {
+            console.log(`\n🎯 Processing command: "${line}"`);
+            
             // 2. Prepare Messages
             const messages = [
               { role: "developer", content: systemPrompt },
@@ -1099,8 +1136,49 @@
               add_generation_prompt: true,
               return_dict: true,
             });
-            // 4. Generate
-            const output = await model.generate({ ...inputs, max_new_tokens: 128, do_sample: false });
+            
+            // 4. Generate with performance tracking
+            const generationStart = performance.now();
+            let ttftRecorded = false;
+            let ttft = 0;
+            let firstTokenTime = 0;
+            
+            const output = await model.generate({ 
+              ...inputs, 
+              max_new_tokens: 128, 
+              do_sample: false,
+              callback_function: (tokens) => {
+                // Record TTFT on first token
+                if (!ttftRecorded && tokens.length > 0) {
+                  firstTokenTime = performance.now();
+                  ttft = firstTokenTime - generationStart;
+                  ttftRecorded = true;
+                  console.log(`⚡ Time to First Token (TTFT): ${ttft.toFixed(2)}ms`);
+                }
+              }
+            });
+            
+            const generationEnd = performance.now();
+            const totalTime = generationEnd - generationStart;
+            const inputTokenCount = inputs.input_ids.dims[1];
+            const outputTokenCount = output.length - inputTokenCount;
+            const tps = outputTokenCount / (totalTime / 1000);
+            
+            // Store metrics
+            STATE.lastTTFT = ttft;
+            STATE.lastTPS = tps;
+            
+            // Log performance
+            console.log(`📊 Performance Metrics:`);
+            console.log(`   - Total generation time: ${totalTime.toFixed(2)}ms`);
+            console.log(`   - Input tokens: ${inputTokenCount}`);
+            console.log(`   - Output tokens: ${outputTokenCount}`);
+            console.log(`   - Tokens Per Second (TPS): ${tps.toFixed(2)} tok/s`);
+            
+            // Update UI
+            document.getElementById("metric-ttft").innerText = `${ttft.toFixed(0)}ms`;
+            document.getElementById("metric-tps").innerText = `${tps.toFixed(1)} t/s`;
+            
             const decoded = tokenizer.decode(output.slice(0, [inputs.input_ids.dims[1], null]), { skip_special_tokens: false });
             // 5. Parse Output
             // Format: <start_function_call>call:add{...}<end_function_call>