Update index.html

index.html

@@ -266,6 +266,16 @@ th{font-weight:600}
   font-style:italic;
 }
 
+/* Styles for the lightweight streaming area */
+.mono-stream{
+  font-family:'PT Mono',monospace;
+  white-space:pre-wrap;
+  background:var(--code-bg);
+  border:1px solid var(--code-border);
+  padding:12px;border-radius:6px;
+  margin-top: 8px; /* Add some spacing */
+}
+
 /* responsive & print */
 @media(max-width:768px){
   .container{margin:20px 16px;padding:28px}
@@ -366,10 +376,15 @@ async function imageToBase64(file) {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.onload = () => {
-      const base64 = reader.result.split(',')[1];
-      resolve(base64);
+      // Ensure it's a valid data URL and extract base64 part
+      if (reader.result && reader.result.includes(',')) {
+        const base64 = reader.result.split(',')[1];
+        resolve(base64);
+      } else {
+        reject(new Error("Failed to read file as Data URL."));
+      }
     };
-    reader.onerror = reject;
+    reader.onerror = () => reject(reader.error);
     reader.readAsDataURL(file);
   });
 }
@@ -403,9 +418,9 @@ async function ocrImage(base64Image) {
             role: 'user',
             content: [
               { type: 'text', text: 'Image:' },
-              { 
-                type: 'image_url', 
-                image_url: { url: `data:image/png;base64,${base64Image}` }
+              {
+                type: 'image_url',
+                image_url: { url: `data:image/png;base64,${base64Image}` } // Assuming PNG, adjust if needed
               }
             ]
           }
@@ -414,7 +429,8 @@ async function ocrImage(base64Image) {
     });
 
     if (!response.ok) {
-      throw new Error(`OCR API error: ${response.status}`);
+      const errorText = await response.text();
+      throw new Error(`OCR API error: ${response.status} - ${errorText}`);
     }
 
     const data = await response.json();
@@ -426,7 +442,31 @@ async function ocrImage(base64Image) {
   }
 }
 
-/* ======= Solve with Cerebras API (Streaming) ======= */
+/* ======= UI Helpers for Streaming ======= */
+function beginStreamingUI(question){
+  // Show a lightweight, non-MathJax view while the model streams
+  content.innerHTML = `
+  <div>
+    <p><strong>Question</strong>:</p>
+    <div class="mono-stream" id="qStream"></div>
+    <hr style="opacity:.35; margin: 20px 0;">
+    <p><strong>Answer</strong>:</p>
+    <div class="mono-stream" id="aStream">(generating...)</div>
+  </div>`;
+  const qEl = document.getElementById('qStream');
+  const aEl = document.getElementById('aStream');
+  qEl.textContent = question;   // plain text now; pretty render later
+  aEl.textContent = '';         // clear "(generating...)"
+  return { qEl, aEl };
+}
+
+function finalizeStreaming(question, fullAnswer){
+  // One single heavy render (Markdown + MathJax) at the end
+  const formatted = `**Question**: ${question}\n\n**Answer**: ${fullAnswer}`;
+  processContent(formatted); // processContent calls hideProcessing after MathJax
+}
+
+/* ======= Solve with Cerebras API (Streaming Optimization) ======= */
 async function solveQuestion(question) {
   const cerebrasKey = localStorage.getItem('cerebras-api-key');
   if (!cerebrasKey) {
@@ -435,74 +475,97 @@ async function solveQuestion(question) {
   }
 
   showProcessing('Solving the question...');
+  const ui = beginStreamingUI(question); // Prepare the lightweight streaming UI
 
   try {
     const response = await fetch('https://api.cerebras.ai/v1/chat/completions', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
+        'Accept': 'text/event-stream', // Specify that we expect a stream
         'Authorization': `Bearer ${cerebrasKey}`
       },
       body: JSON.stringify({
         model: 'gpt-oss-120b',
         stream: true,
         max_tokens: 65536,
-        temperature: 0.1,
-        reasoning_effort: 'medium',
+        temperature: 0.1, // Set temperature to 0.1
+        reasoning_effort: 'medium', // Set reasoning_effort to 'medium'
+        // top_p: 1, // Removed as per user's request
         messages: [
-          {
-            role: 'system',
-            content: 'Solve this Question. Provide a clear, step-by-step solution with LaTeX.'
-          },
-          {
-            role: 'user',
-            content: question
-          }
+          { role: 'system', content: 'Solve this Question. Provide a clear, step-by-step solution.' },
+          { role: 'user', content: question }
         ]
       })
     });
 
     if (!response.ok) {
-      throw new Error(`Cerebras API error: ${response.status}`);
+      const errorText = await response.text();
+      throw new Error(`Cerebras API error: ${response.status} - ${errorText}`);
     }
 
-    // Process streaming response
-    const reader = response.body.getReader();
+    const reader  = response.body.getReader();
     const decoder = new TextDecoder();
     let fullAnswer = '';
+    let buffer = '';                // buffer for partial SSE frames
+    let lastFlushTime = 0;
+    const flushThrottle = 120;      // milliseconds to wait between DOM updates
+
+    const flushUI = () => {
+      // Update the lightweight streaming area without MathJax
+      ui.aEl.textContent = fullAnswer;
+      lastFlushTime = performance.now();
+    };
 
     while (true) {
       const { done, value } = await reader.read();
       if (done) break;
 
-      const chunk = decoder.decode(value);
-      const lines = chunk.split('\n').filter(line => line.trim() !== '');
-
-      for (const line of lines) {
-        if (line.startsWith('data: ')) {
-          const data = line.slice(6);
-          if (data === '[DONE]') continue;
-          
-          try {
-            const parsed = JSON.parse(data);
-            const content = parsed.choices[0]?.delta?.content;
-            if (content) {
-              fullAnswer += content;
-              // Update display in real-time
-              const formatted = `**Question**: ${question}\n\n**Answer**: ${fullAnswer}`;
-              processContent(formatted);
+      buffer += decoder.decode(value, { stream: true });
+      // SSE events are typically separated by '\n\n'
+      const events = buffer.split('\n\n');
+      buffer = events.pop() || ''; // Keep any incomplete event for the next chunk
+
+      for (const evt of events) {
+        // Find the 'data:' line, which contains the JSON payload
+        const dataLine = evt.split('\n').find(line => line.trim().startsWith('data: '));
+        if (!dataLine) continue;
+        
+        const data = dataLine.slice(6).trim(); // Remove 'data: ' prefix
+        if (data === '[DONE]') continue; // End of stream marker
+
+        try {
+          const parsed = JSON.parse(data);
+          // Extract content, being flexible with potential API response structures
+          const deltaContent = parsed.choices?.[0]?.delta?.content
+                             ?? parsed.choices?.[0]?.message?.content
+                             ?? parsed.choices?.[0]?.text // Some APIs might use 'text'
+                             ?? '';
+
+          if (deltaContent) {
+            fullAnswer += deltaContent;
+            // Throttle DOM updates to prevent excessive rendering and jank
+            if (performance.now() - lastFlushTime > flushThrottle) {
+              flushUI();
             }
-          } catch (e) {
-            console.error('Error parsing stream chunk:', e);
           }
+        } catch (e) {
+          // Ignore errors parsing JSON chunks if it's just partial data
+          console.error('Error parsing stream chunk data:', e, 'Chunk:', data);
         }
       }
     }
 
+    // Final flush to ensure all streamed content is displayed in the lightweight view
+    flushUI();
+
+    // Once streaming is complete, perform the final, heavier render with Markdown and MathJax
+    finalizeStreaming(question, fullAnswer);
     return fullAnswer;
   } catch (error) {
     console.error('Solving Error:', error);
     alert('Error during solving: ' + error.message);
+    hideProcessing(); // Ensure the processing indicator is hidden on error
     return null;
   }
 }
@@ -522,14 +585,9 @@ async function processImage(file) {
 
     // Solve the question
     const answer = await solveQuestion(ocrText);
-    if (!answer) {
-      hideProcessing();
-      return;
-    }
+    // The solveQuestion function now handles hiding the processing indicator
+    // unless an error occurred, in which case it was hidden earlier.
 
-    // Display the result
-    const formatted = `**Question**: ${ocrText}\n\n**Answer**: ${answer}`;
-    processContent(formatted);
   } catch (error) {
     console.error('Image processing error:', error);
     alert('Error processing image: ' + error.message);
@@ -544,7 +602,7 @@ document.addEventListener('paste', async (e) => {
   const isInputField = activeElement && (
     activeElement.tagName === 'INPUT' || 
     activeElement.tagName === 'TEXTAREA' || 
-    activeElement.contentEditable === 'true'
+    activeElement.isContentEditable === true // Use isContentEditable for modern check
   );
   
   // If pasting into an input field, let the browser handle it normally
@@ -555,14 +613,18 @@ document.addEventListener('paste', async (e) => {
   // Otherwise, handle custom paste logic
   e.preventDefault();
   
-  // Check for image files
+  // Check for image files first
   const items = Array.from(e.clipboardData.items);
   const imageItem = items.find(item => item.type.startsWith('image/'));
   
   if (imageItem) {
     // Handle image paste
     const file = imageItem.getAsFile();
-    await processImage(file);
+    if (file) {
+      await processImage(file);
+    } else {
+      alert("Could not get image file from clipboard.");
+    }
   } else {
     // Handle text paste (existing functionality)
     const txt = e.clipboardData.getData('text/plain');