Spaces:

SolarumAsteridion
/

Notebook

Running

App Files Files Community

SolarumAsteridion commited on Aug 26

Commit

b52d177

verified ·

1 Parent(s): 814e789

Update index.html

Browse files

Files changed (1) hide show

index.html +85 -8

index.html CHANGED Viewed

@@ -1,4 +1,3 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -277,6 +276,39 @@ th{font-weight:600}
   margin-top: 8px; /* Add some spacing */
 }
 /* responsive & print */
 @media(max-width:768px){
   .container{margin:20px 16px;padding:28px}
@@ -286,7 +318,7 @@ th{font-weight:600}
 @media print{
   body{background:#fff}
   .container{box-shadow:none;border:none}
-  .header,.processing,.instructions,#themeToggle,#settingsBtn{display:none}
 }
 </style>
 </head>
@@ -349,6 +381,22 @@ function hideProcessing(){
   setTimeout(()=>processingNode.classList.remove('show'),300);
 }
 /* ======= markdown + latex pipeline ======= */
 function processContent(text){
   showProcessing();
@@ -413,7 +461,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',
@@ -444,14 +492,26 @@ async function ocrImage(base64Image) {
 }
 /* ======= 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');
@@ -462,9 +522,25 @@ function beginStreamingUI(question){
 }
 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) ======= */
@@ -515,6 +591,7 @@ async function solveQuestion(question) {
     const flushUI = () => {
       // Update the lightweight streaming area without MathJax
       ui.aEl.textContent = fullAnswer;
       lastFlushTime = performance.now();
     };

 <!DOCTYPE html>
 <html lang="en">
 <head>
   margin-top: 8px; /* Add some spacing */
 }
+/* ───────── copy button styles ───────── */
+.copy-btn {
+  display: inline-block;
+  margin-left: 10px;
+  padding: 4px 8px;
+  background: var(--code-bg);
+  border: 1px solid var(--code-border);
+  border-radius: 4px;
+  font-family: 'PT Mono', monospace;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  user-select: none;
+}
+.copy-btn:hover {
+  background: var(--blockquote-bg);
+  transform: translateY(-1px);
+}
+.copy-btn.copied {
+  background: #4a5f4a;
+  color: #fff;
+  border-color: #4a5f4a;
+}
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 0;
+}
+.section-header strong {
+  margin: 0;
+}
 /* responsive & print */
 @media(max-width:768px){
   .container{margin:20px 16px;padding:28px}
 @media print{
   body{background:#fff}
   .container{box-shadow:none;border:none}
+  .header,.processing,.instructions,#themeToggle,#settingsBtn,.copy-btn{display:none}
 }
 </style>
 </head>
   setTimeout(()=>processingNode.classList.remove('show'),300);
 }
+/* ======= Copy to clipboard helper ======= */
+function copyToClipboard(text, button) {
+  navigator.clipboard.writeText(text).then(() => {
+    const originalText = button.textContent;
+    button.textContent = '✓ Copied';
+    button.classList.add('copied');
+    setTimeout(() => {
+      button.textContent = originalText;
+      button.classList.remove('copied');
+    }, 2000);
+  }).catch(err => {
+    console.error('Failed to copy:', err);
+    alert('Failed to copy to clipboard');
+  });
+}
 /* ======= markdown + latex pipeline ======= */
 function processContent(text){
   showProcessing();
         messages: [
           {
             role: 'system',
+            content: 'GIVE AS TEXT WITH LATEX like $this$ or $$this$$. NEVER USE \\itemize, \\begin{itemize}, \\end{itemize}, \\item or any list environments. Use plain text with numbers or letters for lists. DO NOT SOLVE THE QUESTION. DO NOT OUTPUT ANYTHING BUT THE EXACT FORMAT OF THE QUESTION AS IT APPEARS IN THE IMAGE.'
           },
           {
             role: 'user',
 }
 /* ======= UI Helpers for Streaming ======= */
+let currentQuestion = '';
+let currentAnswer = '';
 function beginStreamingUI(question){
+  currentQuestion = question;
+  currentAnswer = '';
   // Show a lightweight, non-MathJax view while the model streams
   content.innerHTML = `
     <div>
+      <div class="section-header">
+        <p><strong>Question</strong>:</p>
+        <button class="copy-btn" onclick="copyToClipboard(currentQuestion, this)">📋 Copy</button>
+      </div>
       <div class="mono-stream" id="qStream"></div>
       <hr style="opacity:.35; margin: 20px 0;">
+      <div class="section-header">
+        <p><strong>Answer</strong>:</p>
+        <button class="copy-btn" onclick="copyToClipboard(currentAnswer, this)">📋 Copy</button>
+      </div>
       <div class="mono-stream" id="aStream">(generating...)</div>
     </div>`;
   const qEl = document.getElementById('qStream');
 }
 function finalizeStreaming(question, fullAnswer){
+  currentQuestion = question;
+  currentAnswer = fullAnswer;
+  // Create HTML with copy buttons
+  const htmlContent = `
+<div class="section-header">
+  <strong>Question</strong>:
+  <button class="copy-btn" onclick="copyToClipboard(currentQuestion, this)">📋 Copy</button>
+</div>
+<div style="margin-bottom: 20px;">${question}</div>
+<div class="section-header">
+  <strong>Answer</strong>:
+  <button class="copy-btn" onclick="copyToClipboard(currentAnswer, this)">📋 Copy</button>
+</div>
+<div>${fullAnswer}</div>`;
+  // Process the content with Markdown and MathJax
+  processContent(htmlContent);
 }
 /* ======= Solve with Cerebras API (Streaming Optimization) ======= */
     const flushUI = () => {
       // Update the lightweight streaming area without MathJax
       ui.aEl.textContent = fullAnswer;
+      currentAnswer = fullAnswer; // Update global variable for copy button
       lastFlushTime = performance.now();
     };