Update index.html

index.html

@@ -75,7 +75,7 @@ body.dark {
 }
 
 /* ─────────────────────────────────────────
-   GLOBAL “DESK” BACKGROUND
+   GLOBAL "DESK" BACKGROUND
    ───────────────────────────────────────── */
 html,body{height:100%}
 body{
@@ -127,24 +127,25 @@ body{
   pointer-events:none;
 }
 
-/* dark-mode gradient uses the *same* var so stays consistent */
-
 /* ───────── theme toggle ───────── */
 #themeToggle{
   position:absolute;top:12px;right:14px;
   font-size:20px;background:none;border:none;cursor:pointer;
   transition:transform .25s;
   user-select:none;
+  z-index:10;
 }
+#themeToggle:hover{transform:rotate(20deg)scale(1.15)}
 
-  /* put this anywhere after the existing #themeToggle rule */
-#themeToggle{
-  position:absolute;      /* you already have this */
-  z-index:10;             /* NEW – lift it above the curl */
+/* ───────── settings button ───────── */
+#settingsBtn{
+  position:absolute;top:12px;right:50px;
+  font-size:20px;background:none;border:none;cursor:pointer;
+  transition:transform .25s;
+  user-select:none;
+  z-index:10;
 }
-
-  
-#themeToggle:hover{transform:rotate(20deg)scale(1.15)}
+#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)}
@@ -199,6 +200,65 @@ th{font-weight:600}
 }
 .processing.show{opacity:.9}
 
+/* ───────── settings modal ───────── */
+.modal{
+  display:none;
+  position:fixed;top:0;left:0;width:100%;height:100%;
+  background:rgba(0,0,0,0.5);z-index:3000;
+}
+.modal.show{display:flex;align-items:center;justify-content:center}
+.modal-content{
+  background:var(--paper-bg);
+  color:var(--paper-text);
+  padding:30px;
+  border-radius:8px;
+  max-width:500px;
+  width:90%;
+  box-shadow:0 20px 60px rgba(0,0,0,0.3);
+}
+.modal h2{margin-top:0;font-family:'Libre Baskerville',serif}
+.modal label{
+  display:block;
+  margin-top:15px;
+  font-weight:600;
+  font-size:14px;
+  font-family:'PT Mono',monospace;
+}
+.modal input{
+  width:100%;
+  padding:8px;
+  margin-top:5px;
+  border:1px solid var(--code-border);
+  border-radius:4px;
+  background:var(--code-bg);
+  color:var(--paper-text);
+  font-family:'PT Mono',monospace;
+  font-size:13px;
+}
+.modal-buttons{
+  margin-top:20px;
+  display:flex;
+  gap:10px;
+  justify-content:flex-end;
+}
+.modal button{
+  padding:8px 16px;
+  border:none;
+  border-radius:4px;
+  cursor:pointer;
+  font-family:'PT Mono',monospace;
+  font-size:14px;
+}
+.btn-save{
+  background:#4a5f4a;
+  color:#fff;
+}
+.btn-cancel{
+  background:var(--code-bg);
+  color:var(--paper-text);
+  border:1px solid var(--code-border);
+}
+
 /* responsive & print */
 @media(max-width:768px){
   .container{margin:20px 16px;padding:28px}
@@ -208,7 +268,7 @@ th{font-weight:600}
 @media print{
   body{background:#fff}
   .container{box-shadow:none;border:none}
-  .header,.processing,.instructions,#themeToggle{display:none}
+  .header,.processing,.instructions,#themeToggle,#settingsBtn{display:none}
 }
 </style>
 </head>
@@ -217,6 +277,8 @@ th{font-weight:600}
   <div class="container">
     <!-- theme icon -->
     <button id="themeToggle" title="Toggle dark / light">🌙</button>
+    <!-- settings icon -->
+    <button id="settingsBtn" title="API Settings">⚙️</button>
 
     <div class="header">
       <h1>LaTeX Notepad</h1>
@@ -225,24 +287,47 @@ th{font-weight:600}
 
     <div id="content">
       <div class="placeholder">
-        Press <kbd>Ctrl</kbd>+<kbd>V</kbd> (or <kbd>⌘</kbd>+<kbd>V</kbd>) to paste and render Markdown / LaTeX
+        Press <kbd>Ctrl</kbd>+<kbd>V</kbd> (or <kbd>⌘</kbd>+<kbd>V</kbd>) to paste and render Markdown / LaTeX<br>
+        <small style="font-size:14px;opacity:0.8">You can also paste images to OCR and solve them!</small>
       </div>
     </div>
 
     <div class="instructions" style="text-align:center;font-family:'PT Mono',monospace;font-size:14px;color:#666;font-style:italic;margin-top:22px;">
-      Tip: you can paste raw Markdown or TeX – it will be rendered instantly ✨
+      Tip: you can paste raw Markdown, TeX, or images – they will be processed instantly ✨
     </div>
   </div>
 
   <div class="processing">Processing…</div>
 
+  <!-- Settings Modal -->
+  <div id="settingsModal" class="modal">
+    <div class="modal-content">
+      <h2>API Settings</h2>
+      <label for="nebiusKey">Nebius API Key:</label>
+      <input type="password" id="nebiusKey" placeholder="Enter your Nebius API key">
+      
+      <label for="cerebrasKey">Cerebras API Key:</label>
+      <input type="password" id="cerebrasKey" placeholder="Enter your Cerebras API key">
+      
+      <div class="modal-buttons">
+        <button class="btn-cancel" onclick="closeSettings()">Cancel</button>
+        <button class="btn-save" onclick="saveSettings()">Save</button>
+      </div>
+    </div>
+  </div>
+
 <script>
 /* ======= processing badge helpers ======= */
 const content        = document.getElementById('content');
 const processingNode = document.querySelector('.processing');
 
-function showProcessing(){processingNode.classList.add('show')}
-function hideProcessing(){setTimeout(()=>processingNode.classList.remove('show'),300)}
+function showProcessing(text = 'Processing…'){
+  processingNode.textContent = text;
+  processingNode.classList.add('show');
+}
+function hideProcessing(){
+  setTimeout(()=>processingNode.classList.remove('show'),300);
+}
 
 /* ======= markdown + latex pipeline ======= */
 function processContent(text){
@@ -267,14 +352,241 @@ function processContent(text){
   }else{hideProcessing()}
 }
 
-/* ======= paste listener ======= */
-document.addEventListener('paste',e=>{
+/* ======= Image to Base64 converter ======= */
+async function imageToBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const base64 = reader.result.split(',')[1];
+      resolve(base64);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+
+/* ======= OCR with Nebius API ======= */
+async function ocrImage(base64Image) {
+  const nebiusKey = localStorage.getItem('nebius-api-key');
+  if (!nebiusKey) {
+    alert('Please set your Nebius API key in settings (⚙️)');
+    return null;
+  }
+
+  showProcessing('Extracting text from image...');
+
+  try {
+    const response = await fetch('https://api.studio.nebius.com/v1/chat/completions', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': '*/*',
+        'Authorization': `Bearer ${nebiusKey}`
+      },
+      body: JSON.stringify({
+        model: 'mistralai/Mistral-Small-3.1-24B-Instruct-2503',
+        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',
+            content: [
+              { type: 'text', text: 'Image:' },
+              { 
+                type: 'image_url', 
+                image_url: { url: `data:image/png;base64,${base64Image}` }
+              }
+            ]
+          }
+        ]
+      })
+    });
+
+    if (!response.ok) {
+      throw new Error(`OCR API error: ${response.status}`);
+    }
+
+    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;
+  }
+}
+
+/* ======= Solve with Cerebras API (Streaming) ======= */
+async function solveQuestion(question) {
+  const cerebrasKey = localStorage.getItem('cerebras-api-key');
+  if (!cerebrasKey) {
+    alert('Please set your Cerebras API key in settings (⚙️)');
+    return null;
+  }
+
+  showProcessing('Solving the question...');
+
+  try {
+    const response = await fetch('https://api.cerebras.ai/v1/chat/completions', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${cerebrasKey}`
+      },
+      body: JSON.stringify({
+        model: 'gpt-oss-120b',
+        stream: true,
+        max_tokens: 65536,
+        temperature: 0.23,
+        top_p: 1,
+        reasoning_effort: 'high',
+        messages: [
+          {
+            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}`);
+    }
+
+    // Process streaming response
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let fullAnswer = '';
+
+    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);
+            }
+          } catch (e) {
+            console.error('Error parsing stream chunk:', e);
+          }
+        }
+      }
+    }
+
+    return fullAnswer;
+  } catch (error) {
+    console.error('Solving Error:', error);
+    alert('Error during solving: ' + error.message);
+    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);
+    if (!answer) {
+      hideProcessing();
+      return;
+    }
+
+    // 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);
+    hideProcessing();
+  }
+}
+
+/* ======= paste listener (updated for images) ======= */
+document.addEventListener('paste', async (e) => {
   e.preventDefault();
-  const txt=e.clipboardData.getData('text/plain');
-  if(txt.trim())processContent(txt);
+  
+  // Check for image files
+  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);
+  } 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 */
+/* small "bounce" on placeholder click */
 content.addEventListener('click',()=>{
   const ph=content.querySelector('.placeholder');
   if(ph){