Spaces:

SolarumAsteridion
/

Notebook

Running

App Files Files Community

SolarumAsteridion commited on Aug 26

Commit

eef9e19

verified ·

1 Parent(s): 0c535f1

Update index.html

Browse files

Files changed (1) hide show

index.html +167 -165

index.html CHANGED Viewed

@@ -1,3 +1,4 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -54,7 +55,6 @@ window.MathJax = {
   --code-border:     #e6e0d2;
   --inline-code-bg:  #f2efe8;
 }
 body.dark {
   --desk-bg:        #2c2a27;
   --desk-dot:       #3a3733;
@@ -273,7 +273,29 @@ th{font-weight:600}
   background:var(--code-bg);
   border:1px solid var(--code-border);
   padding:12px;border-radius:6px;
-  margin-top: 8px; /* Add some spacing */
 }
 /* responsive & print */
@@ -323,11 +345,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>
@@ -356,9 +378,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);
@@ -376,7 +398,6 @@ async function imageToBase64(file) {
   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);
@@ -412,7 +433,7 @@ async function ocrImage(base64Image) {
         messages: [
           {
             role: 'system',
-            content: 'GIVE AS TEXT WITH LATEX like $this$ or $$this$$. DO NOT SOLVE THE QUESTION. DO NOT OUTPUT ANYTHING BUT THE FORMAT OF THE QUESTION.'
           },
           {
             role: 'user',
@@ -420,7 +441,7 @@ async function ocrImage(base64Image) {
               { type: 'text', text: 'Image:' },
               {
                 type: 'image_url',
-                image_url: { url: `data:image/png;base64,${base64Image}` } // Assuming PNG, adjust if needed
               }
             ]
           }
@@ -429,44 +450,77 @@ async function ocrImage(base64Image) {
     });
     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 ======= */
 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) {
@@ -475,97 +529,84 @@ 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, // 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;
   }
 }
@@ -573,142 +614,103 @@ async function solveQuestion(question) {
 /* ======= 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>

 <!DOCTYPE html>
 <html lang="en">
 <head>
   --code-border:     #e6e0d2;
   --inline-code-bg:  #f2efe8;
 }
 body.dark {
   --desk-bg:        #2c2a27;
   --desk-dot:       #3a3733;
   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 */
       <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);
   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);
         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',
               { type: 'text', text: 'Image:' },
               {
                 type: 'image_url',
+                image_url: { url: `data:image/png;base64,${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) {
   }
   showProcessing('Solving the question...');
+  const ui = beginStreamingUI(question);   // lightweight view while streaming
   try {
     const response = await fetch('https://api.cerebras.ai/v1/chat/completions', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
+        'Accept': 'text/event-stream',
         'Authorization': `Bearer ${cerebrasKey}`
       },
       body: JSON.stringify({
         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;
   }
 }
 /* ======= 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>