carvus-lens 1.0.0

package/render.js

@@ -0,0 +1,651 @@
+const { ipcRenderer } = require('electron');
+
+// ─── CONFIG ──────────────────────────────────────────────────────────────────
+const GROQ_API_KEY = "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";
+const IMG_HOST_KEY = "6d207e02198a847aa98d0a2a901485a5";
+
+// ─── DOM ─────────────────────────────────────────────────────────────────────
+const canvas        = document.getElementById("captureCanvas");
+const ctx           = canvas.getContext("2d");
+const resultPopup   = document.getElementById("resultPopup");
+const resultContent = document.getElementById("resultContent");
+const loadingEl     = document.getElementById("loading");
+const loadingText   = document.getElementById("loadingText");
+const closeBtn      = document.getElementById("closeBtn");
+const actionBar     = document.getElementById("actionBar");
+const btnCopy       = document.getElementById("btnCopy");
+const btnRead       = document.getElementById("btnRead");
+const btnAskAI      = document.getElementById("btnAskAI");
+const btnTranslate  = document.getElementById("btnTranslate");
+const btnSearch     = document.getElementById("btnSearch");
+const gcseContainer = document.getElementById("gcseContainer");
+const statusPill    = document.getElementById("statusPill");
+const statusText    = document.getElementById("statusText");
+const hintOverlay   = document.getElementById("hintOverlay");
+const edgeLighting  = document.getElementById("edgeLighting");
+const edgeLightCanvas = document.getElementById("edgeLightingCanvas");
+const particleCanvas  = document.getElementById("particleCanvas");
+
+// ─── STATE ───────────────────────────────────────────────────────────────────
+let drawing = false, points = [], screenImage = null;
+let animFrameId = null, dashOffset = 0;
+let currentImageData = "", currentExtractedText = "";
+let drawParticles = [], ambientParticles = [];
+let isReading = false;
+let tesseractWorker = null;
+
+// Set canvas to fill window
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+// ─── PRE-INIT TESSERACT (for AI/Translate only) ─────────────────────────────
+(async function initTesseract() {
+  try {
+    tesseractWorker = await Tesseract.createWorker('eng', 1, { logger: () => {} });
+    console.log('[Carvus Lens] Tesseract ready');
+  } catch (e) {
+    console.warn('[Carvus Lens] Tesseract pre-init failed:', e);
+  }
+})();
+
+// ─── KEYBOARD ────────────────────────────────────────────────────────────────
+window.addEventListener('keydown', (e) => {
+  if ((e.key.toLowerCase() === 'c' && e.ctrlKey) || e.key === 'Escape') {
+    ipcRenderer.send('dismiss-overlay');
+  }
+});
+
+// ─── DRAGGABLE POPUP ─────────────────────────────────────────────────────────
+let isDragging = false, dragOX = 0, dragOY = 0;
+const popupHeader = document.getElementById('popupHeader');
+popupHeader.style.cursor = 'grab';
+
+popupHeader.addEventListener('mousedown', (e) => {
+  if (e.target.closest('.close-btn')) return;
+  isDragging = true;
+  dragOX = e.clientX - resultPopup.offsetLeft;
+  dragOY = e.clientY - resultPopup.offsetTop;
+  popupHeader.style.cursor = 'grabbing';
+  e.preventDefault();
+});
+
+window.addEventListener('mousemove', (e) => {
+  if (!isDragging) return;
+  resultPopup.style.left = (e.clientX - dragOX) + 'px';
+  resultPopup.style.top = (e.clientY - dragOY) + 'px';
+  resultPopup.style.bottom = 'auto';
+  resultPopup.style.transform = 'none';
+});
+
+window.addEventListener('mouseup', () => {
+  isDragging = false;
+  popupHeader.style.cursor = 'grab';
+});
+
+// ─── HELPERS ─────────────────────────────────────────────────────────────────
+function show(el) { el.classList.add('visible'); }
+function hide(el) { el.classList.remove('visible'); }
+function setStatus(msg) { statusText.textContent = msg; show(statusPill); }
+
+// ─── EDGE LIGHTING ──────────────────────────────────────────────────────────
+function initEdgeLighting() {
+  const elc = edgeLightCanvas;
+  elc.width = window.innerWidth;
+  elc.height = window.innerHeight;
+  const ectx = elc.getContext('2d');
+  let t = 0;
+  const trails = [
+    { speed: 0.25, color: [201,100,66], alpha: 0.5 },
+    { speed: 0.2, color: [212,132,90], alpha: 0.35 },
+    { speed: 0.15, color: [226,169,109], alpha: 0.25 }
+  ];
+
+  function draw() {
+    t += 0.008;
+    ectx.clearRect(0, 0, elc.width, elc.height);
+    const w = elc.width, h = elc.height, perim = 2*(w+h), len = perim*0.25;
+    for (let i = 0; i < trails.length; i++) {
+      const tr = trails[i];
+      const offset = ((t * tr.speed + i * 0.33) % 1) * perim;
+      for (let d = 0; d < len; d += 3) {
+        const pos = (offset + d) % perim;
+        let x, y;
+        if (pos < w)            { x = pos; y = 0; }
+        else if (pos < w + h)   { x = w; y = pos - w; }
+        else if (pos < 2*w + h) { x = w - (pos - w - h); y = h; }
+        else                    { x = 0; y = h - (pos - 2*w - h); }
+        const a = (1 - d / len) * tr.alpha;
+        ectx.fillStyle = `rgba(${tr.color.join(',')},${a.toFixed(3)})`;
+        ectx.fillRect(x - 3, y - 3, 6, 6);
+      }
+    }
+    requestAnimationFrame(draw);
+  }
+  draw();
+  show(edgeLighting);
+}
+
+// ─── AMBIENT PARTICLES ──────────────────────────────────────────────────────
+function initAmbientParticles() {
+  const pc = particleCanvas, pctx = pc.getContext('2d');
+  pc.width = window.innerWidth;
+  pc.height = window.innerHeight;
+  const colors = ['#c96442','#d4845a','#e2a96d','#bfb5a8'];
+
+  for (let i = 0; i < 25; i++) {
+    ambientParticles.push({
+      x: Math.random() * pc.width, y: Math.random() * pc.height,
+      vx: (Math.random() - 0.5) * 0.2, vy: (Math.random() - 0.5) * 0.2,
+      r: Math.random() * 1.5 + 0.4,
+      color: colors[Math.floor(Math.random() * colors.length)],
+      alpha: Math.random() * 0.25 + 0.05
+    });
+  }
+
+  function draw() {
+    pctx.clearRect(0, 0, pc.width, pc.height);
+    for (const p of ambientParticles) {
+      p.x += p.vx; p.y += p.vy;
+      if (p.x < 0) p.x = pc.width; if (p.x > pc.width) p.x = 0;
+      if (p.y < 0) p.y = pc.height; if (p.y > pc.height) p.y = 0;
+      pctx.globalAlpha = p.alpha;
+      pctx.fillStyle = p.color;
+      pctx.beginPath();
+      pctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+      pctx.fill();
+    }
+    pctx.globalAlpha = 1;
+    requestAnimationFrame(draw);
+  }
+  draw();
+}
+
+// ─── SCREEN CAPTURE (background only — NOT displayed) ───────────────────────
+async function captureScreen() {
+  try {
+    const sourceId = await ipcRenderer.invoke('get-desktop-stream-id');
+    const stream = await navigator.mediaDevices.getUserMedia({
+      audio: false,
+      video: {
+        mandatory: {
+          chromeMediaSource: 'desktop',
+          chromeMediaSourceId: sourceId,
+          minWidth: 1, maxWidth: window.screen.width * 2,
+          minHeight: 1, maxHeight: window.screen.height * 2
+        }
+      }
+    });
+
+    const video = document.createElement('video');
+    video.srcObject = stream;
+    video.play();
+    video.onloadedmetadata = () => {
+      setTimeout(() => {
+        // Capture to hidden canvas — do NOT display
+        const hiddenCanvas = document.createElement('canvas');
+        hiddenCanvas.width = video.videoWidth;
+        hiddenCanvas.height = video.videoHeight;
+        const hCtx = hiddenCanvas.getContext('2d');
+        hCtx.drawImage(video, 0, 0, hiddenCanvas.width, hiddenCanvas.height);
+        screenImage = hCtx.getImageData(0, 0, hiddenCanvas.width, hiddenCanvas.height);
+        // Store dimensions for coordinate mapping
+        canvas._captureW = hiddenCanvas.width;
+        canvas._captureH = hiddenCanvas.height;
+        stream.getTracks().forEach(t => t.stop());
+        ipcRenderer.send('show-window');
+
+        show(hintOverlay);
+        setStatus('Draw a circle to search');
+        initEdgeLighting();
+        initAmbientParticles();
+      }, 150);
+    };
+  } catch (err) {
+    console.error("Screen capture failed:", err);
+    setStatus('Capture failed — try again');
+  }
+}
+
+captureScreen();
+
+// ─── DRAWING ON TRANSPARENT CANVAS ──────────────────────────────────────────
+canvas.addEventListener("mousedown", (e) => {
+  if (animFrameId) cancelAnimationFrame(animFrameId);
+  resultPopup.classList.remove('visible');
+  hide(gcseContainer);
+  hide(hintOverlay);
+  drawing = true;
+  points = [{ x: e.clientX, y: e.clientY }];
+  setStatus('Drawing...');
+});
+
+canvas.addEventListener("mousemove", (e) => {
+  if (!drawing) return;
+  points.push({ x: e.clientX, y: e.clientY });
+  const colors = ['#c96442','#d4845a','#e2a96d'];
+  for (let i = 0; i < 3; i++) {
+    drawParticles.push({
+      x: e.clientX + (Math.random() - 0.5) * 10,
+      y: e.clientY + (Math.random() - 0.5) * 10,
+      vx: (Math.random() - 0.5) * 2,
+      vy: (Math.random() - 0.5) * 2,
+      life: 1.0,
+      color: colors[Math.floor(Math.random() * 3)]
+    });
+  }
+  renderSelection();
+});
+
+function renderSelection() {
+  if (points.length === 0) return;
+
+  // Clear transparent canvas
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  // Draw filled selection area with subtle highlight
+  if (points.length > 2) {
+    ctx.save();
+    ctx.beginPath();
+    ctx.moveTo(points[0].x, points[0].y);
+    for (let i = 1; i < points.length; i++) ctx.lineTo(points[i].x, points[i].y);
+    ctx.closePath();
+    ctx.fillStyle = "rgba(201, 100, 66, 0.06)";
+    ctx.fill();
+    ctx.restore();
+  }
+
+  // Draw border with thick glow
+  ctx.save();
+  ctx.beginPath();
+  ctx.moveTo(points[0].x, points[0].y);
+  for (let i = 1; i < points.length; i++) ctx.lineTo(points[i].x, points[i].y);
+  if (!drawing) ctx.closePath();
+
+  ctx.setLineDash([18, 10]);
+  ctx.lineDashOffset = -dashOffset;
+  ctx.lineWidth = 5;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+
+  // Outer warm glow
+  ctx.shadowColor = "#c96442";
+  ctx.shadowBlur = 30;
+  ctx.strokeStyle = "rgba(201, 100, 66, 0.85)";
+  ctx.stroke();
+
+  // Inner bright stroke
+  ctx.shadowColor = "#e2a96d";
+  ctx.shadowBlur = 18;
+  ctx.strokeStyle = "rgba(245, 239, 231, 0.9)";
+  ctx.stroke();
+  ctx.restore();
+
+  // Draw particles
+  for (let i = drawParticles.length - 1; i >= 0; i--) {
+    const p = drawParticles[i];
+    p.x += p.vx; p.y += p.vy; p.life -= 0.025;
+    if (p.life <= 0) { drawParticles.splice(i, 1); continue; }
+    ctx.globalAlpha = p.life * 0.7;
+    ctx.fillStyle = p.color;
+    ctx.shadowColor = p.color;
+    ctx.shadowBlur = 5;
+    ctx.beginPath();
+    ctx.arc(p.x, p.y, Math.random() * 2 + 0.8, 0, Math.PI * 2);
+    ctx.fill();
+  }
+  ctx.globalAlpha = 1;
+  ctx.shadowBlur = 0;
+}
+
+function animateCircle() {
+  dashOffset += 1.2;
+  if (!drawing && points.length > 0 && Math.random() > 0.5) {
+    const rp = points[Math.floor(Math.random() * points.length)];
+    drawParticles.push({
+      x: rp.x + (Math.random() - 0.5) * 20,
+      y: rp.y + (Math.random() - 0.5) * 20,
+      vx: (Math.random() - 0.5) * 1,
+      vy: (Math.random() - 0.5) * 1,
+      life: 1.0, color: '#c96442'
+    });
+  }
+  renderSelection();
+  animFrameId = requestAnimationFrame(animateCircle);
+}
+
+// ─── PROCESS SELECTION — IMAGE BASED ────────────────────────────────────────
+canvas.addEventListener("mouseup", async () => {
+  if (!drawing) return;
+  drawing = false;
+  if (points.length < 5) { ctx.clearRect(0, 0, canvas.width, canvas.height); return; }
+
+  animateCircle();
+  setStatus('Processing...');
+
+  const minX = Math.min(...points.map(p => p.x));
+  const maxX = Math.max(...points.map(p => p.x));
+  const minY = Math.min(...points.map(p => p.y));
+  const maxY = Math.max(...points.map(p => p.y));
+  const w = maxX - minX, h = maxY - minY;
+
+  if (w < 10 || h < 10) {
+    cancelAnimationFrame(animFrameId);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    return;
+  }
+
+  if (!screenImage) {
+    setStatus('No screen data — try again');
+    return;
+  }
+
+  // Map screen coordinates to captured image coordinates
+  const scaleX = (canvas._captureW || canvas.width) / window.innerWidth;
+  const scaleY = (canvas._captureH || canvas.height) / window.innerHeight;
+  const cropX = Math.round(minX * scaleX);
+  const cropY = Math.round(minY * scaleY);
+  const cropW = Math.round(w * scaleX);
+  const cropH = Math.round(h * scaleY);
+
+  // Crop from the hidden screen capture
+  const tempCanvas = document.createElement("canvas");
+  tempCanvas.width = canvas._captureW || canvas.width;
+  tempCanvas.height = canvas._captureH || canvas.height;
+  tempCanvas.getContext("2d").putImageData(screenImage, 0, 0);
+
+  const cropCanvas = document.createElement("canvas");
+  cropCanvas.width = cropW;
+  cropCanvas.height = cropH;
+  cropCanvas.getContext("2d").drawImage(tempCanvas, cropX, cropY, cropW, cropH, 0, 0, cropW, cropH);
+  currentImageData = cropCanvas.toDataURL("image/png");
+
+  // Show popup + loading
+  show(resultPopup);
+  show(loadingEl);
+  hide(resultContent);
+  hide(actionBar);
+  hide(gcseContainer);
+
+  // IMMEDIATELY send image to Google Lens (primary action)
+  loadingText.textContent = 'Uploading to Google Lens...';
+  setStatus('Searching Google Lens...');
+
+  try {
+    // Upload image to get a public URL for Google Lens
+    const imageUrl = await uploadImage(currentImageData);
+
+    hide(loadingEl);
+    show(actionBar);
+
+    if (imageUrl) {
+      openGoogleLens(imageUrl);
+    } else {
+      // Fallback: open Google Lens upload page directly
+      openGoogleLensUpload();
+    }
+
+    // Run OCR in background for AI/Translate (non-blocking)
+    extractTextInBackground(currentImageData);
+
+  } catch (err) {
+    hide(loadingEl);
+    show(actionBar);
+    show(resultContent);
+    resultContent.textContent = "Error: " + err.message;
+    setStatus('Error occurred');
+    // Still try OCR
+    extractTextInBackground(currentImageData);
+  }
+});
+
+// ─── IMAGE UPLOAD (for Google Lens URL) ──────────────────────────────────────
+async function uploadImage(dataUrl) {
+  try {
+    const base64 = dataUrl.split(',')[1];
+    const formData = new FormData();
+    formData.append("source", base64);
+    formData.append("type", "base64");
+    formData.append("action", "upload");
+    formData.append("format", "json");
+
+    const res = await fetch(`https://freeimage.host/api/1/upload?key=${IMG_HOST_KEY}`, {
+      method: "POST",
+      body: formData
+    });
+    const data = await res.json();
+
+    if (data && data.image && data.image.url) {
+      return data.image.url;
+    }
+    return null;
+  } catch (e) {
+    console.error('[Carvus Lens] Image upload failed:', e);
+    return null;
+  }
+}
+
+// ─── GOOGLE LENS ─────────────────────────────────────────────────────────────
+function openGoogleLens(imageUrl) {
+  show(gcseContainer);
+  hide(resultContent);
+
+  let wv = document.getElementById("searchWebview");
+  if (!wv) {
+    wv = document.createElement("webview");
+    wv.id = "searchWebview";
+    wv.style.width = "100%";
+    wv.style.height = "100%";
+    wv.setAttribute("useragent",
+      "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36");
+    gcseContainer.appendChild(wv);
+  }
+  wv.src = `https://lens.google.com/uploadbyurl?url=${encodeURIComponent(imageUrl)}`;
+  setStatus('Google Lens results loading...');
+}
+
+function openGoogleLensUpload() {
+  show(gcseContainer);
+  hide(resultContent);
+
+  let wv = document.getElementById("searchWebview");
+  if (!wv) {
+    wv = document.createElement("webview");
+    wv.id = "searchWebview";
+    wv.style.width = "100%";
+    wv.style.height = "100%";
+    wv.setAttribute("useragent",
+      "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36");
+    gcseContainer.appendChild(wv);
+  }
+  wv.src = "https://lens.google.com/";
+  setStatus('Open Google Lens — upload your image');
+}
+
+// ─── BACKGROUND OCR (for AI/Translate) ──────────────────────────────────────
+async function extractTextInBackground(imageData) {
+  try {
+    let text = '';
+    if (tesseractWorker) {
+      const { data } = await tesseractWorker.recognize(imageData);
+      text = data.text.trim();
+    } else {
+      const result = await Tesseract.recognize(imageData, 'eng');
+      text = result.data.text.trim();
+    }
+    currentExtractedText = text;
+    if (text) {
+      console.log('[Carvus Lens] OCR extracted:', text.substring(0, 100));
+    }
+  } catch (e) {
+    console.warn('[Carvus Lens] Background OCR failed:', e);
+    currentExtractedText = '';
+  }
+}
+
+// ─── GROQ AI ─────────────────────────────────────────────────────────────────
+async function queryGroq(prompt, statusLabel) {
+  hide(actionBar);
+  show(resultContent);
+  show(loadingEl);
+  hide(gcseContainer);
+  loadingText.textContent = statusLabel || 'Thinking...';
+  setStatus(statusLabel || 'AI is thinking...');
+  resultContent.textContent = '';
+
+  try {
+    const model = document.getElementById("modelSelect").value;
+    const res = await fetch("https://api.groq.com/openai/v1/chat/completions", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Authorization": `Bearer ${GROQ_API_KEY}`
+      },
+      body: JSON.stringify({
+        model,
+        messages: [{ role: "user", content: prompt }],
+        temperature: 0.6,
+        max_tokens: 2048
+      })
+    });
+
+    const data = await res.json();
+    hide(loadingEl);
+    show(actionBar);
+
+    if (data.error) {
+      resultContent.textContent = "API Error: " + data.error.message;
+      setStatus('API error');
+      return;
+    }
+
+    const reply = data.choices[0].message.content;
+    resultContent.textContent = reply;
+    currentExtractedText = reply;
+    setStatus('Response ready');
+  } catch (err) {
+    hide(loadingEl);
+    show(actionBar);
+    resultContent.textContent = "Connection Error: " + err.message;
+    setStatus('Connection failed');
+  }
+}
+
+// ─── BUTTON: COPY ────────────────────────────────────────────────────────────
+btnCopy.addEventListener('click', () => {
+  const text = currentExtractedText || resultContent.textContent || "";
+  if (!text) { setStatus('No text to copy'); return; }
+  navigator.clipboard.writeText(text).then(() => {
+    const orig = btnCopy.innerHTML;
+    btnCopy.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6L9 17l-5-5"/></svg>Copied!`;
+    btnCopy.classList.add('success');
+    setStatus('Copied to clipboard');
+    setTimeout(() => { btnCopy.innerHTML = orig; btnCopy.classList.remove('success'); }, 2000);
+  });
+});
+
+// ─── BUTTON: READ ALOUD (toggle) ─────────────────────────────────────────────
+btnRead.addEventListener('click', () => {
+  if (!('speechSynthesis' in window)) return;
+  const text = currentExtractedText || resultContent.textContent || "";
+  if (!text) { setStatus('No text to read'); return; }
+
+  if (isReading) {
+    window.speechSynthesis.cancel();
+    isReading = false;
+    btnRead.classList.remove('reading');
+    btnRead.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 010 7.07"/></svg>Read Aloud`;
+    setStatus('Stopped');
+    return;
+  }
+
+  window.speechSynthesis.cancel();
+  const utterance = new SpeechSynthesisUtterance(text);
+  utterance.rate = 0.95;
+  const voices = window.speechSynthesis.getVoices();
+  const pref = voices.find(v => v.name.includes('Google') || v.name.includes('Daniel'));
+  if (pref) utterance.voice = pref;
+
+  isReading = true;
+  btnRead.classList.add('reading');
+  btnRead.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>Stop`;
+  setStatus('Reading aloud...');
+
+  utterance.onend = () => {
+    isReading = false;
+    btnRead.classList.remove('reading');
+    btnRead.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 010 7.07"/></svg>Read Aloud`;
+    setStatus('Finished');
+  };
+  utterance.onerror = () => { isReading = false; btnRead.classList.remove('reading'); };
+  window.speechSynthesis.speak(utterance);
+});
+
+// ─── BUTTON: GOOGLE LENS (re-search) ────────────────────────────────────────
+btnSearch.addEventListener('click', async () => {
+  if (!currentImageData) { setStatus('No image to search'); return; }
+  show(loadingEl);
+  loadingText.textContent = 'Uploading to Google Lens...';
+  setStatus('Re-searching...');
+  hide(resultContent);
+
+  try {
+    const url = await uploadImage(currentImageData);
+    hide(loadingEl);
+    if (url) {
+      openGoogleLens(url);
+    } else {
+      openGoogleLensUpload();
+    }
+  } catch (e) {
+    hide(loadingEl);
+    setStatus('Upload failed');
+  }
+});
+
+// ─── BUTTON: ASK AI ──────────────────────────────────────────────────────────
+btnAskAI.addEventListener('click', () => {
+  const text = currentExtractedText || "";
+  if (!text) {
+    setStatus('Waiting for OCR... try again in a moment');
+    // If OCR hasn't finished, try again after a short delay
+    setTimeout(() => {
+      if (currentExtractedText) btnAskAI.click();
+    }, 1500);
+    return;
+  }
+  hide(gcseContainer);
+  queryGroq(
+    `You are Carvus Lens AI — a concise, helpful assistant. The user circled something on their screen and wants analysis. Provide a clear, well-structured response.\n\nExtracted text from screen:\n"""${text}"""`,
+    'Analyzing with AI...'
+  );
+});
+
+// ─── BUTTON: TRANSLATE ──────────────────────────────────────────────────────
+btnTranslate.addEventListener('click', () => {
+  const text = currentExtractedText || "";
+  if (!text) {
+    setStatus('Waiting for OCR... try again in a moment');
+    setTimeout(() => {
+      if (currentExtractedText) btnTranslate.click();
+    }, 1500);
+    return;
+  }
+  hide(gcseContainer);
+  queryGroq(
+    `Translate the following text. If English, translate to Spanish. If any other language, translate to English. Provide ONLY the translation:\n\n"""${text}"""`,
+    'Translating...'
+  );
+});
+
+// ─── CLOSE BUTTON ────────────────────────────────────────────────────────────
+closeBtn.addEventListener('click', () => {
+  if (animFrameId) cancelAnimationFrame(animFrameId);
+  resultPopup.classList.remove('visible');
+  hide(gcseContainer); hide(actionBar); hide(loadingEl); hide(resultContent);
+  if (isReading) { window.speechSynthesis.cancel(); isReading = false; }
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  show(hintOverlay);
+  setStatus('Draw a circle to search');
+  points = [];
+  drawParticles = [];
+});