Spaces:

SolarumAsteridion
/

Notebook

Running

App Files Files Community

SolarumAsteridion commited on Aug 26

Commit

fb65023

verified ·

1 Parent(s): eef9e19

Update index.html

Browse files

Files changed (1) hide show

index.html +263 -164

index.html CHANGED Viewed

@@ -1,4 +1,3 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -55,6 +54,7 @@ window.MathJax = {
   --code-border:     #e6e0d2;
   --inline-code-bg:  #f2efe8;
 }
 body.dark {
   --desk-bg:        #2c2a27;
   --desk-dot:       #3a3733;
@@ -148,7 +148,7 @@ body{
 #settingsBtn:hover{transform:rotate(20deg)scale(1.15)}
 /* ───────── header ───────── */
-.header{text-align:center;margin-bottom:34px;padding-bottom:18px;border-bottom:1px solid rgba(0,0,0,.05)}
 h1{font-family:'Libre Baskerville',serif;margin:0;font-size:30px;letter-spacing:.5px}
 .subtitle{font-family:'PT Mono',monospace;font-size:14px;color:#666;margin-top:6px;letter-spacing:1px}
@@ -273,30 +273,29 @@ th{font-weight:600}
   background:var(--code-bg);
   border:1px solid var(--code-border);
   padding:12px;border-radius:6px;
-  margin-top: 8px;
 }
-/* ───────── copy button & QA block styling ───────── */
 .copy-btn{
-  background:none;
-  border:none;
-  cursor:pointer;
-  font-size:0.9em;
   margin-left:8px;
-  vertical-align:middle;
   color:var(--paper-text);
 }
-.copy-btn:hover{
-  transform:scale(1.1);
-}
-.qa-block{
-  margin-bottom:1.5em;
-}
-.qa-header{
-  display:flex;
-  align-items:baseline;
-  margin-bottom:0.4em;
-}
 /* responsive & print */
 @media(max-width:768px){
@@ -345,11 +344,11 @@ th{font-weight:600}
       <label for="nebiusKey">Nebius API Key:</label>
       <input type="password" id="nebiusKey" placeholder="Enter your Nebius API key" autocomplete="off">
       <div class="api-hint">Used for OCR image processing</div>
       <label for="cerebrasKey">Cerebras API Key:</label>
       <input type="password" id="cerebrasKey" placeholder="Enter your Cerebras API key" autocomplete="off">
       <div class="api-hint">Used for solving questions</div>
       <div class="modal-buttons">
         <button class="btn-cancel" onclick="closeSettings()">Cancel</button>
         <button class="btn-save" onclick="saveSettings()">Save</button>
@@ -378,9 +377,9 @@ function processContent(text){
   const keep=m=>(store.push(m),PL(idx++));
   text = text
-          .replace(/\\\[[\s\S]*?\\\]/g, keep)   // \[ ... \]
-          .replace(/\$\$[\s\S]*?\$\$/g, keep)   // $$ ... $$
-          .replace(/\\\([\s\S]*?\\\)/g, keep)   // \( ... \)
           .replace(/\$([^\$\n]+?)\$/g,    keep); // $ ... $
   let html = marked.parse(text);
@@ -388,9 +387,13 @@ function processContent(text){
   content.innerHTML = html;
   if(window.MathJax?.typesetPromise){
-    MathJax.typesetPromise([content]).then(hideProcessing)
-      .catch(e=>{console.error('MathJax error:',e);hideProcessing()});
-  }else{hideProcessing()}
 }
 /* ======= Image to Base64 converter ======= */
@@ -398,6 +401,7 @@ async function imageToBase64(file) {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.onload = () => {
       if (reader.result && reader.result.includes(',')) {
         const base64 = reader.result.split(',')[1];
         resolve(base64);
@@ -433,7 +437,7 @@ async function ocrImage(base64Image) {
         messages: [
           {
             role: 'system',
-            content: 'GIVE AS TEXT WITH LATEX like $this$ or $$this$$. DO NOT USE ITEMIZE. DO NOT SOLVE THE QUESTION. DO NOT OUTPUT ANYTHING BUT THE FORMAT OF THE QUESTION.'
           },
           {
             role: 'user',
@@ -441,7 +445,7 @@ async function ocrImage(base64Image) {
               { type: 'text', text: 'Image:' },
               {
                 type: 'image_url',
-                image_url: { url: `data:image/png;base64,${base64Image}` }
               }
             ]
           }
@@ -450,77 +454,120 @@ async function ocrImage(base64Image) {
     });
     if (!response.ok) {
-      const err = await response.text();
-      throw new Error(`OCR API error: ${response.status} – ${err}`);
     }
     const data = await response.json();
     return data.choices[0].message.content;
-  } catch (e) {
-    console.error('OCR error:', e);
-    alert('Error during OCR: ' + e.message);
     return null;
   }
 }
-/* ======= UI helpers for streaming ======= */
 function beginStreamingUI(question){
   content.innerHTML = `
-    <div class="qa-block">
-      <div class="qa-header"><strong>Question</strong> <button class="copy-btn" data-copy-id="qStream" title="Copy question">📋</button></div>
       <div class="mono-stream" id="qStream"></div>
-    </div>
-    <hr style="opacity:.35; margin: 20px 0;">
-    <div class="qa-block">
-      <div class="qa-header"><strong>Answer</strong> <button class="copy-btn" data-copy-id="aStream" title="Copy answer">📋</button></div>
       <div class="mono-stream" id="aStream">(generating...)</div>
     </div>`;
   const qEl = document.getElementById('qStream');
   const aEl = document.getElementById('aStream');
-  qEl.textContent = question;
-  aEl.textContent = '';
-  return { qEl, aEl };
 }
-/* ======= Final render after streaming ======= */
 function finalizeStreaming(question, fullAnswer){
-  const questionHTML = marked.parse(question);
-  const answerHTML   = marked.parse(fullAnswer);
-  const finalHTML = `
-    <div class="qa-block">
-      <div class="qa-header"><strong>Question</strong> <button class="copy-btn" data-copy-id="finalQuestion" title="Copy question">📋</button></div>
-      <div class="qa-content" id="finalQuestion">${questionHTML}</div>
-    </div>
-    <div class="qa-block">
-      <div class="qa-header"><strong>Answer</strong> <button class="copy-btn" data-copy-id="finalAnswer" title="Copy answer">📋</button></div>
-      <div class="qa-content" id="finalAnswer">${answerHTML}</div>
-    </div>`;
-  content.innerHTML = finalHTML;
-  if (window.MathJax?.typesetPromise) {
-    MathJax.typesetPromise([content]).then(hideProcessing)
-      .catch(e=>{console.error('MathJax error:',e);hideProcessing();});
-  } else {
-    hideProcessing();
-  }
 }
-/* ======= Copy‑button handler (delegated) ======= */
-content.addEventListener('click', e => {
-  const btn = e.target.closest('.copy-btn');
-  if (!btn) return;
-  const targetId = btn.dataset.copyId;
-  const target   = document.getElementById(targetId);
-  if (!target) return;
-  navigator.clipboard.writeText(target.innerText).then(() => {
-    const original = btn.textContent;
-    btn.textContent = '✅';
-    setTimeout(() => btn.textContent = original, 1200);
-  }).catch(err => console.error('Copy failed', err));
-});
-/* ======= Solve with Cerebras API (streaming) ======= */
 async function solveQuestion(question) {
   const cerebrasKey = localStorage.getItem('cerebras-api-key');
   if (!cerebrasKey) {
@@ -529,7 +576,7 @@ async function solveQuestion(question) {
   }
   showProcessing('Solving the question...');
-  const ui = beginStreamingUI(question);   // lightweight view while streaming
   try {
     const response = await fetch('https://api.cerebras.ai/v1/chat/completions', {
@@ -543,70 +590,83 @@ async function solveQuestion(question) {
         model: 'gpt-oss-120b',
         stream: true,
         max_tokens: 65536,
-        temperature: 0.1,
-        reasoning_effort: 'medium',
         messages: [
-          { role: 'system', content: 'Solve this Question. Provide a clear, step‑by‑step solution.' },
-          { role: 'user',   content: question }
         ]
       })
     });
     if (!response.ok) {
-      const err = await response.text();
-      throw new Error(`Cerebras API error: ${response.status} – ${err}`);
     }
     const reader  = response.body.getReader();
     const decoder = new TextDecoder();
     let fullAnswer = '';
-    let buffer = '';
-    let lastFlush = 0;
-    const FLUSH_MS = 120;   // throttle UI updates
-    const flush = () => {
       ui.aEl.textContent = fullAnswer;
-      lastFlush = performance.now();
     };
     while (true) {
-      const {done, value} = await reader.read();
       if (done) break;
-      buffer += decoder.decode(value, {stream:true});
       const events = buffer.split('\n\n');
-      buffer = events.pop() || '';
-      for (const ev of events) {
-        const dataLine = ev.split('\n').find(l => l.startsWith('data: '));
         if (!dataLine) continue;
-        const data = dataLine.slice(6).trim();
-        if (data === '[DONE]') continue;
         try {
-          const json = JSON.parse(data);
-          const delta = json.choices?.[0]?.delta?.content
-                     ?? json.choices?.[0]?.message?.content
-                     ?? json.choices?.[0]?.text
-                     ?? '';
-          if (delta) {
-            fullAnswer += delta;
-            if (performance.now() - lastFlush > FLUSH_MS) flush();
           }
         } catch (e) {
-          // ignore malformed chunks
         }
       }
     }
-    // final UI update before heavy render
-    flush();
     finalizeStreaming(question, fullAnswer);
     return fullAnswer;
-  } catch (e) {
-    console.error('Solve error:', e);
-    alert('Error while solving: ' + e.message);
-    hideProcessing();
     return null;
   }
 }
@@ -614,103 +674,142 @@ async function solveQuestion(question) {
 /* ======= Process image pipeline ======= */
 async function processImage(file) {
   try {
     const base64 = await imageToBase64(file);
-    const ocr    = await ocrImage(base64);
-    if (!ocr) { hideProcessing(); return; }
-    await solveQuestion(ocr);
-  } catch (e) {
-    console.error('Image pipeline error:', e);
-    alert('Error processing image: ' + e.message);
     hideProcessing();
   }
 }
-/* ======= Paste listener (keeps normal input fields functional) ======= */
-document.addEventListener('paste', async e => {
-  const active = document.activeElement;
-  const isInput = active && (
-    active.tagName === 'INPUT' ||
-    active.tagName === 'TEXTAREA' ||
-    active.isContentEditable
   );
-  if (isInput) return;               // let the browser handle normal paste
   e.preventDefault();
   const items = Array.from(e.clipboardData.items);
-  const imgItem = items.find(i => i.type.startsWith('image/'));
-  if (imgItem) {
-    const file = imgItem.getAsFile();
-    if (file) await processImage(file);
-    else alert('Could not retrieve image from clipboard.');
   } else {
     const txt = e.clipboardData.getData('text/plain');
     if (txt.trim()) processContent(txt);
   }
 });
-/* ======= Settings modal handling ======= */
-const settingsBtn   = document.getElementById('settingsBtn');
 const settingsModal = document.getElementById('settingsModal');
-const nebiusKeyInput   = document.getElementById('nebiusKey');
 const cerebrasKeyInput = document.getElementById('cerebrasKey');
 settingsBtn.addEventListener('click', () => {
-  nebiusKeyInput.value   = localStorage.getItem('nebius-api-key')   || '';
   cerebrasKeyInput.value = localStorage.getItem('cerebras-api-key') || '';
   settingsModal.classList.add('show');
 });
-function closeSettings(){ settingsModal.classList.remove('show'); }
-function saveSettings(){
-  const nb = nebiusKeyInput.value.trim();
-  const cb = cerebrasKeyInput.value.trim();
-  if (nb) localStorage.setItem('nebius-api-key', nb);
-  if (cb) localStorage.setItem('cerebras-api-key', cb);
   closeSettings();
   alert('API keys saved successfully!');
 }
-/* close modal on background click or Escape */
-settingsModal.addEventListener('click', e => { if (e.target===settingsModal) closeSettings(); });
-document.addEventListener('keydown', e => { if (e.key==='Escape' && settingsModal.classList.contains('show')) closeSettings(); });
-/* placeholder click animation */
 content.addEventListener('click',()=>{
-  const ph = content.querySelector('.placeholder');
-  if (ph){
     ph.style.transform='scale(.97)';
     ph.style.transition='transform .12s';
     setTimeout(()=>ph.style.transform='scale(1)',120);
   }
 });
-/* fade‑in on load */
 document.addEventListener('DOMContentLoaded',()=>{
   const sheet=document.querySelector('.container');
   sheet.style.opacity='0';
-  setTimeout(()=>{sheet.style.transition='opacity .6s ease';sheet.style.opacity='1';},80);
 });
-/* theme toggler */
-const themeBtn = document.getElementById('themeToggle');
-const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
-const savedTheme = localStorage.getItem('note-theme');
 initTheme();
-themeBtn.addEventListener('click',()=>{
   document.body.classList.toggle('dark');
   updateIcon();
-  localStorage.setItem('note-theme', document.body.classList.contains('dark') ? 'dark' : 'light');
 });
 function initTheme(){
-  if (savedTheme) document.body.classList.toggle('dark', savedTheme==='dark');
-  else if (prefersDark.matches) document.body.classList.add('dark');
   updateIcon();
 }
-function updateIcon(){ themeBtn.textContent = document.body.classList.contains('dark') ? '☀️' : '🌙'; }
 </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
   --code-border:     #e6e0d2;
   --inline-code-bg:  #f2efe8;
 }
 body.dark {
   --desk-bg:        #2c2a27;
   --desk-dot:       #3a3733;
 #settingsBtn:hover{transform:rotate(20deg)scale(1.15)}
 /* ───────── header ───────── */
+.header{text-align:center;margin-bottom:34px;padding-bottom:18px;border-bottom:1px solid rgba(0,0,0,.05')}
 h1{font-family:'Libre Baskerville',serif;margin:0;font-size:30px;letter-spacing:.5px}
 .subtitle{font-family:'PT Mono',monospace;font-size:14px;color:#666;margin-top:6px;letter-spacing:1px}
   background:var(--code-bg);
   border:1px solid var(--code-border);
   padding:12px;border-radius:6px;
+  margin-top: 8px; /* Add some spacing */
 }
+/* Copy button styles */
 .copy-btn{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  gap:6px;
+  font-family:'PT Mono',monospace;
+  font-size:13px;
+  padding:6px 8px;
   margin-left:8px;
+  background: #efefef;
   color:var(--paper-text);
+  border:1px solid var(--code-border);
+  border-radius:6px;
+  cursor:pointer;
+  user-select:none;
 }
+.copy-btn.small{ padding:4px 6px; font-size:12px; border-radius:5px; }
+.copy-btn:active{ transform: translateY(1px); }
+body.dark .copy-btn{ background:#444; color:var(--paper-text); border-color:var(--code-border); }
 /* responsive & print */
 @media(max-width:768px){
       <label for="nebiusKey">Nebius API Key:</label>
       <input type="password" id="nebiusKey" placeholder="Enter your Nebius API key" autocomplete="off">
       <div class="api-hint">Used for OCR image processing</div>
       <label for="cerebrasKey">Cerebras API Key:</label>
       <input type="password" id="cerebrasKey" placeholder="Enter your Cerebras API key" autocomplete="off">
       <div class="api-hint">Used for solving questions</div>
       <div class="modal-buttons">
         <button class="btn-cancel" onclick="closeSettings()">Cancel</button>
         <button class="btn-save" onclick="saveSettings()">Save</button>
   const keep=m=>(store.push(m),PL(idx++));
   text = text
+          .replace(/\\\[[\s\S]*?\\\]/g, keep)  // \[ ... \]
+          .replace(/\$\$[\s\S]*?\$\$/g, keep)  // $$ ... $$
+          .replace(/\\\([\s\S]*?\\\)/g, keep)  // \( ... \)
           .replace(/\$([^\$\n]+?)\$/g,    keep); // $ ... $
   let html = marked.parse(text);
   content.innerHTML = html;
   if(window.MathJax?.typesetPromise){
+    return MathJax.typesetPromise([content])
+      .then(()=>{ hideProcessing(); })
+      .catch(e=>{ console.error('MathJax error:',e); hideProcessing(); });
+  }else{
+    hideProcessing();
+    return Promise.resolve();
+  }
 }
 /* ======= Image to Base64 converter ======= */
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.onload = () => {
+      // 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);
         messages: [
           {
             role: 'system',
+            content: 'You are an OCR assistant. Extract the question as plain text and preserve math using LaTeX delimiters ($...$ or $$...$$) only. Under no circumstances output LaTeX list environments or list commands such as \\begin{itemize}, \\end{itemize}, \\begin{enumerate}, \\end{enumerate}, or \\item. If the original image uses bullets or numbered lists, convert them into plain text lines labeled (a), (b), (c) or 1., 2., etc., without using LaTeX list environments. Do not attempt to solve the question. Output only the question text with required math markup and no additional commentary or headings.'
           },
           {
             role: 'user',
               { type: 'text', text: 'Image:' },
               {
                 type: 'image_url',
+                image_url: { url: `data:image/png;base64,${base64Image}` } // Assuming PNG, adjust if needed
               }
             ]
           }
     });
     if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`OCR API error: ${response.status} - ${errorText}`);
     }
     const data = await response.json();
     return data.choices[0].message.content;
+  } catch (error) {
+    console.error('OCR Error:', error);
+    alert('Error during OCR: ' + error.message);
     return null;
   }
 }
+/* ======= UI Helpers for Streaming + Copy ======= */
+/* Copy helper with fallback and small "Copied!" feedback */
+async function copyTextToClipboard(text, btn) {
+  if (!btn) { // make a dummy if none supplied
+    btn = document.createElement('button');
+  }
+  const origLabel = btn.textContent;
+  try {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      await navigator.clipboard.writeText(text);
+    } else {
+      const ta = document.createElement('textarea');
+      ta.value = text;
+      ta.setAttribute('readonly', '');
+      ta.style.position = 'absolute';
+      ta.style.left = '-9999px';
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand('copy');
+      document.body.removeChild(ta);
+    }
+    btn.textContent = 'Copied!';
+    setTimeout(()=>{ btn.textContent = origLabel; }, 1100);
+  } catch (e) {
+    console.error('Copy failed', e);
+    alert('Copy failed: ' + e.message);
+  }
+}
 function beginStreamingUI(question){
+  // Show a lightweight, non-MathJax view while the model streams
   content.innerHTML = `
+    <div>
+      <p><strong>Question</strong>:
+        <button class="copy-btn small" id="copyQBtn" title="Copy question">📋</button>
+      </p>
       <div class="mono-stream" id="qStream"></div>
+      <hr style="opacity:.35; margin: 20px 0;">
+      <p><strong>Answer</strong>:
+        <button class="copy-btn small" id="copyABtn" title="Copy answer">📋</button>
+      </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...)"
+  // attach copy handlers
+  const qBtn = document.getElementById('copyQBtn');
+  const aBtn = document.getElementById('copyABtn');
+  if (qBtn) qBtn.addEventListener('click', ()=> copyTextToClipboard(question, qBtn));
+  if (aBtn) aBtn.addEventListener('click', ()=> copyTextToClipboard(aEl.textContent, aBtn));
+  return { qEl, aEl, qBtn, aBtn };
+}
+/* After final render, add copy buttons next to the rendered Question/Answer
+   (copies the original plain-text question/answer passed in) */
+function addCopyButtonsToRenderedContent(question, answer){
+  // Find paragraphs containing <strong>Question</strong> or <strong>Answer</strong>
+  const pEls = content.querySelectorAll('p');
+  pEls.forEach(p => {
+    const st = p.querySelector('strong');
+    if(!st) return;
+    const label = st.textContent.replace(':','').trim().toLowerCase();
+    if(label.startsWith('question')){
+      // remove existing copy if present
+      const existing = p.querySelector('.copy-btn');
+      if(existing) existing.remove();
+      const btn = document.createElement('button');
+      btn.className = 'copy-btn small';
+      btn.title = 'Copy question text';
+      btn.innerHTML = '📋';
+      btn.addEventListener('click', ()=> copyTextToClipboard(question, btn));
+      // insert right after the strong label
+      st.after(btn);
+    } else if(label.startsWith('answer')){
+      const existing = p.querySelector('.copy-btn');
+      if(existing) existing.remove();
+      const btn = document.createElement('button');
+      btn.className = 'copy-btn small';
+      btn.title = 'Copy answer text';
+      btn.innerHTML = '📋';
+      btn.addEventListener('click', ()=> copyTextToClipboard(answer, btn));
+      st.after(btn);
+    }
+  });
 }
 function finalizeStreaming(question, fullAnswer){
+  // One single heavy render (Markdown + MathJax) at the end
+  const formatted = `**Question**: ${question}\n\n**Answer**: ${fullAnswer}`;
+  processContent(formatted).then(()=> {
+    // After render + MathJax finished, add copy buttons that copy the *raw* texts
+    addCopyButtonsToRenderedContent(question, fullAnswer);
+  });
 }
+/* ======= Solve with Cerebras API (Streaming Optimization) ======= */
 async function solveQuestion(question) {
   const cerebrasKey = localStorage.getItem('cerebras-api-key');
   if (!cerebrasKey) {
   }
   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', {
         model: 'gpt-oss-120b',
         stream: true,
         max_tokens: 65536,
+        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.' },
+          { role: 'user', content: question }
         ]
       })
     });
     if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Cerebras API error: ${response.status} - ${errorText}`);
     }
     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;
+      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) {
+          // 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;
   }
 }
 /* ======= Process image pipeline ======= */
 async function processImage(file) {
   try {
+    // Convert image to base64
     const base64 = await imageToBase64(file);
+    // OCR the image
+    const ocrText = await ocrImage(base64);
+    if (!ocrText) {
+      hideProcessing();
+      return;
+    }
+    // Solve the question
+    const answer = await solveQuestion(ocrText);
+    // The solveQuestion function now handles hiding the processing indicator
+    // unless an error occurred, in which case it was hidden earlier.
+  } catch (error) {
+    console.error('Image processing error:', error);
+    alert('Error processing image: ' + error.message);
     hideProcessing();
   }
 }
+/* ======= FIXED paste listener - allows normal paste in input fields ======= */
+document.addEventListener('paste', async (e) => {
+  // Check if we're pasting into an input, textarea, or contenteditable element
+  const activeElement = document.activeElement;
+  const isInputField = activeElement && (
+    activeElement.tagName === 'INPUT' ||
+    activeElement.tagName === 'TEXTAREA' ||
+    activeElement.isContentEditable === true // Use isContentEditable for modern check
   );
+  // If pasting into an input field, let the browser handle it normally
+  if (isInputField) {
+    return; // Don't prevent default, let normal paste happen
+  }
+  // Otherwise, handle custom paste logic
   e.preventDefault();
+  // 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();
+    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');
     if (txt.trim()) processContent(txt);
   }
 });
+/* ======= Settings modal functions ======= */
+const settingsBtn = document.getElementById('settingsBtn');
 const settingsModal = document.getElementById('settingsModal');
+const nebiusKeyInput = document.getElementById('nebiusKey');
 const cerebrasKeyInput = document.getElementById('cerebrasKey');
 settingsBtn.addEventListener('click', () => {
+  // Load existing keys
+  nebiusKeyInput.value = localStorage.getItem('nebius-api-key') || '';
   cerebrasKeyInput.value = localStorage.getItem('cerebras-api-key') || '';
   settingsModal.classList.add('show');
 });
+function closeSettings() {
+  settingsModal.classList.remove('show');
+}
+function saveSettings() {
+  const nebiusKey = nebiusKeyInput.value.trim();
+  const cerebrasKey = cerebrasKeyInput.value.trim();
+  if (nebiusKey) localStorage.setItem('nebius-api-key', nebiusKey);
+  if (cerebrasKey) localStorage.setItem('cerebras-api-key', cerebrasKey);
   closeSettings();
   alert('API keys saved successfully!');
 }
+// Close modal on escape or background click
+settingsModal.addEventListener('click', (e) => {
+  if (e.target === settingsModal) closeSettings();
+});
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape' && settingsModal.classList.contains('show')) {
+    closeSettings();
+  }
+});
+/* small "bounce" on placeholder click */
 content.addEventListener('click',()=>{
+  const ph=content.querySelector('.placeholder');
+  if(ph){
     ph.style.transform='scale(.97)';
     ph.style.transition='transform .12s';
     setTimeout(()=>ph.style.transform='scale(1)',120);
   }
 });
+/* smooth fade in */
 document.addEventListener('DOMContentLoaded',()=>{
   const sheet=document.querySelector('.container');
   sheet.style.opacity='0';
+  setTimeout(()=>{sheet.style.transition='opacity .6s ease';sheet.style.opacity='1'},80);
 });
+/* ======= theme toggler ======= */
+const btn          = document.getElementById('themeToggle');
+const prefersDark  = window.matchMedia('(prefers-color-scheme: dark)');
+const savedTheme   = localStorage.getItem('note-theme');
 initTheme();
+btn.addEventListener('click',()=>{
   document.body.classList.toggle('dark');
   updateIcon();
+  localStorage.setItem('note-theme',document.body.classList.contains('dark')?'dark':'light');
 });
 function initTheme(){
+  if(savedTheme){
+    document.body.classList.toggle('dark',savedTheme==='dark');
+  }else if(prefersDark.matches){
+    document.body.classList.add('dark');
+  }
   updateIcon();
 }
+function updateIcon(){
+  btn.textContent=document.body.classList.contains('dark')?'☀️':'🌙';
+}
 </script>
 </body>
 </html>