Update index.html

index.html

@@ -219,7 +219,7 @@
           </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="text-gray-500 uppercase">Compilation</div>
               <div class="font-bold" id="metric-compilation">-</div>
             </div>
             <div class="bg-white p-1 border border-black">
@@ -1087,8 +1087,7 @@
       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 loadStart = performance.now();
-          console.log("⏱️ Starting model load...");
+          console.log("⏱️ Loading model...");
           
           tokenizer = await AutoTokenizer.from_pretrained(MODEL_ID);
           model = await AutoModelForCausalLM.from_pretrained(MODEL_ID, {
@@ -1096,9 +1095,16 @@
             dtype: "q4",
           });
           
-          const loadEnd = performance.now();
-          STATE.modelCompilationTime = loadEnd - loadStart;
-          console.log(`✅ Model loaded in ${STATE.modelCompilationTime.toFixed(2)}ms (${(STATE.modelCompilationTime / 1000).toFixed(2)}s)`);
+          console.log("✅ Model loaded, starting compilation warmup...");
+          
+          // Compilation warmup
+          const compileStart = performance.now();
+          const inputs = tokenizer("test");
+          await model.generate({ ...inputs, max_new_tokens: 1 });
+          const compileEnd = performance.now();
+          
+          STATE.modelCompilationTime = compileEnd - compileStart;
+          console.log(`✅ Compilation complete 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`;
@@ -1137,37 +1143,34 @@
             
             // 4. Generate with performance tracking
             const generationStart = performance.now();
-            let ttftRecorded = false;
+            let numTokens = 0;
             let ttft = 0;
-            let callbackCount = 0;
+            let tps = 0;
             
             const output = await model.generate({ 
               ...inputs, 
               max_new_tokens: 128, 
               do_sample: false,
               callback_function: (tokens) => {
-                callbackCount++;
-                console.log(`🔍 Callback #${callbackCount}, tokens:`, tokens);
-                // Record TTFT on first callback (first token generated)
-                if (!ttftRecorded) {
+                // Record TTFT on first token (before incrementing counter)
+                if (numTokens === 0) {
                   ttft = performance.now() - generationStart;
-                  ttftRecorded = true;
-                  console.log(`⚡ Time to First Token (TTFT): ${ttft.toFixed(2)}ms`);
+                }
+                numTokens++;
+                // Calculate TPS after incrementing
+                if (numTokens > 0) {
+                  tps = (numTokens / (performance.now() - generationStart)) * 1000;
                 }
               }
             });
             
             const generationEnd = performance.now();
             const totalTime = generationEnd - generationStart;
-            const inputTokenCount = inputs.input_ids.dims[1];
-            const totalTokenCount = output.dims ? output.dims[1] : output.size;
-            const outputTokenCount = Math.max(0, totalTokenCount - inputTokenCount);
-            const tps = outputTokenCount / (totalTime / 1000);
             
             // Store and display metrics
             STATE.lastTTFT = ttft;
             STATE.lastTPS = tps;
-            console.log(`📊 Performance: TTFT=${ttft.toFixed(0)}ms, TPS=${tps.toFixed(1)} tok/s`);
+            console.log(`📊 Performance: TTFT=${ttft.toFixed(0)}ms, TPS=${tps.toFixed(1)} tok/s, Tokens=${numTokens}`);
             document.getElementById("metric-ttft").innerText = `${ttft.toFixed(0)}ms`;
             document.getElementById("metric-tps").innerText = `${tps.toFixed(1)} t/s`;