Spaces:

SolarumAsteridion
/

Notebook

Running

File size: 23,437 Bytes


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>LaTeX Notepad</title>

<!-- ────────  MathJax  ──────── -->
<script>
window.MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']],
    displayMath: [['$$', '$$'], ['\\[', '\\]']],
    processEscapes: true,
    processEnvironments: true,
  },
  options: { skipHtmlTags: ['script','noscript','style','textarea','pre'] }
};
</script>
<script
  id="MathJax-script"
  async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"
></script>

<!-- marked.js for Markdown -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

<!-- Google fonts -->
<link
  href="https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600&family=Libre+Baskerville:wght@400;700&family=PT+Mono&display=swap"
  rel="stylesheet"
/>

<style>
/* ─────────────────────────────────────────
   COLOR SYSTEM (light / dark via variables)
   ───────────────────────────────────────── */
:root {
  --desk-bg:         #fbf9f5;
  --desk-dot:        #e2dccd;

  --paper-bg:        #fffefa;
  --paper-text:      #222;
  --shadow:          rgba(0,0,0,.35);

  --line:            rgba(201,190,170,.18);
  --perforation:     #d0c6b7;

  --tbl-border:      #d7cebf;
  --blockquote-bg:   #fbf8f1;
  --blockquote-bar:  #ccbfae;
  --code-bg:         #f4f2ec;
  --code-border:     #e6e0d2;
  --inline-code-bg:  #f2efe8;
}

body.dark {
  --desk-bg:        #2c2a27;
  --desk-dot:       #3a3733;

  --paper-bg:       #302e2b;
  --paper-text:     #e9e7e2;
  --shadow:         rgba(0,0,0,.55);

  --line:           rgba(110,103,94,.28);
  --perforation:    #6d6456;

  --tbl-border:     #555048;
  --blockquote-bg:  #38332e;
  --blockquote-bar: #6a604e;
  --code-bg:        #3a3530;
  --code-border:    #514b42;
  --inline-code-bg: #4a443d;
}

/* ─────────────────────────────────────────
   GLOBAL "DESK" BACKGROUND
   ───────────────────────────────────────── */
html,body{height:100%}
body{
  margin:0;
  background: var(--desk-bg);
  background-image: radial-gradient(var(--desk-dot) 1px,transparent 1px);
  background-size:14px 14px;
  font-family:'Crimson Text','Times New Roman',serif;
  color:var(--paper-text);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}

/* ─────────────────────────────────────────
   PAPER SHEET
   ───────────────────────────────────────── */
.container{
  max-width:840px;
  margin:40px auto;
  padding:40px 60px 60px;
  background:var(--paper-bg);
  color:var(--paper-text);
  border:1px solid rgba(0,0,0,.05);
  border-radius:12px 12px 10px 10px;
  position:relative;
  box-shadow:0 18px 40px -22px var(--shadow),
             inset 0 2px 6px rgba(0,0,0,.06);
  background-size:160px 160px,100% 100%;
}

/* perforation holes */
.container::before{
  content:'';
  position:absolute;top:26px;bottom:26px;left:30px;width:9px;
  background-image:radial-gradient(circle var(--perforation) 0%,var(--perforation) 2px,transparent 3px);
  background-size:9px 28px;
  background-repeat:repeat-y;
  pointer-events:none;
}
/* curled corner */
.container::after{
  content:'';position:absolute;top:0;right:0;width:110px;height:110px;
  background:
    linear-gradient(135deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 42%),
    linear-gradient(135deg,var(--paper-bg) 0%,var(--paper-bg) 50%,rgba(255,255,255,0) 51%);
  background-size:100% 100%;
  border-bottom-left-radius:12px;
  transform:translate(1px,-1px);
  pointer-events:none;
}

/* ───────── 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)}

/* ───────── 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;
}
#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}

/* ───────── content area ───────── */
#content{
  min-height:520px;font-size:18px;position:relative;
  padding:10px 0 10px 26px;overflow-wrap:break-word;hyphens:auto;
}
#content::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(
    0deg,
    transparent,transparent 2.65em,
    var(--line) 2.65em,var(--line) 2.7em);
  pointer-events:none;z-index:1;
}
#content *{position:relative;z-index:2}
.placeholder{color:#888;font-style:italic;text-align:center;padding:110px 20px;user-select:none}

/* ───────── markdown tweaks ───────── */
blockquote{
  border-left:4px solid var(--blockquote-bar);
  margin:20px 0;padding:15px 26px;
  background:var(--blockquote-bg);font-style:italic
}
code{font-family:'PT Mono',monospace;background:var(--inline-code-bg);
  padding:2px 6px;border-radius:3px;font-size:.9em}
pre{background:var(--code-bg);padding:16px 20px;border:1px solid var(--code-border);
  border-radius:6px;overflow-x:auto;font-family:'PT Mono',monospace}

/* lists */
ol{counter-reset:item;padding-left:0;list-style:none}
ol>li{counter-increment:item;margin:.5em 0 .5em 2em}
ol>li::before{content:counter(item)')';display:inline-block;width:1.5em;margin-left:-2em;text-align:right;font-weight:600}
ol ol>li::before{content:counter(item,lower-alpha)')'}

/* ───────── TABLES ───────── */
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin:1.2em 0}
thead tr{border-bottom:1px solid var(--tbl-border)}
tbody tr:not(:last-child){border-bottom:1px solid var(--tbl-border)}
th,td{padding:.55em .8em;text-align:right}
th{font-weight:600}

/* ───────── processing badge ───────── */
.processing{
  position:fixed;top:20px;right:20px;background:#333;color:#fff;
  padding:10px 20px;border-radius:6px;font-family:'PT Mono',monospace;
  font-size:14px;opacity:0;transition:opacity .25s;z-index:2000
}
.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;
  box-sizing: border-box;
}
.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);
}
.api-hint{
  font-size:11px;
  color:#888;
  margin-top:3px;
  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}
  #content{font-size:16px}
  h1{font-size:24px}
}
@media print{
  body{background:#fff}
  .container{box-shadow:none;border:none}
  .header,.processing,.instructions,#themeToggle,#settingsBtn{display:none}
}
</style>
</head>

<body>
  <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>
      <div class="subtitle">press ctrl+v anywhere to render</div>
    </div>

    <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<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, 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" 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>
      </div>
    </div>
  </div>

<script>
/* ======= processing badge helpers ======= */
const content        = document.getElementById('content');
const processingNode = document.querySelector('.processing');

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){
  showProcessing();

  const store=[], PL=i=>`%%LATEX_${i}%%`; let idx=0;
  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);
  store.forEach((latex,i)=>{html=html.replaceAll(PL(i),latex)});
  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 ======= */
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);
      } else {
        reject(new Error("Failed to read file as Data URL."));
      }
    };
    reader.onerror = () => reject(reader.error);
    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: 'google/gemma-3-27b-it',
        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',
            content: [
              { 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 ======= */
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) {
    alert('Please set your Cerebras API key in settings (⚙️)');
    return null;
  }

  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',
        '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;
  }
}

/* ======= 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>