From 2b5b2c9763c0d4ce3a2a85bd2014d63cc51e108f Mon Sep 17 00:00:00 2001
From: Zylan <zihan.jian@outlook.com>
Date: Tue, 4 Feb 2025 21:27:03 +0800
Subject: [PATCH] format mathpix return value

---
 static/js/main.js    | 60 +++++++++++++++++++++++++++++++++++++++++---
 static/style.css     | 59 +++++++++++++++++++++++++++++++++++++++++++
 templates/index.html | 20 ++++++++++++---
 3 files changed, 132 insertions(+), 7 deletions(-)

diff --git a/static/js/main.js b/static/js/main.js
index 739c1c9..6d847bf 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -27,6 +27,12 @@ class SnapSolver {
         this.responseContent = document.getElementById('responseContent');
         this.claudePanel = document.getElementById('claudePanel');
         this.statusLight = document.querySelector('.status-light');
+        
+        // Format toggle elements
+        this.textFormatBtn = document.getElementById('textFormatBtn');
+        this.latexFormatBtn = document.getElementById('latexFormatBtn');
+        this.confidenceIndicator = document.getElementById('confidenceIndicator');
+        this.confidenceValue = document.querySelector('.confidence-value');
     }
 
     initializeState() {
@@ -34,6 +40,11 @@ class SnapSolver {
         this.cropper = null;
         this.croppedImage = null;
         this.history = JSON.parse(localStorage.getItem('snapHistory') || '[]');
+        this.currentFormat = 'text';
+        this.extractedFormats = {
+            text: '',
+            latex: ''
+        };
     }
 
     setupAutoScroll() {
@@ -146,14 +157,36 @@ class SnapSolver {
                 }
                 this.sendExtractedTextBtn.disabled = false;  // Re-enable send button on server error
             } else if (data.content) {
+                // Parse the content to extract text and LaTeX
+                const lines = data.content.split('\n');
+                let confidence = null;
+                
+                // Process the content
+                for (let i = 0; i < lines.length; i++) {
+                    const line = lines[i];
+                    if (line.startsWith('Confidence:')) {
+                        confidence = parseFloat(line.match(/[\d.]+/)[0]) / 100;
+                    } else if (line === 'Text Content:' && i + 1 < lines.length) {
+                        this.extractedFormats.text = lines[i + 1];
+                    } else if (line === 'LaTeX (Styled):' && i + 1 < lines.length) {
+                        this.extractedFormats.latex = lines[i + 1];
+                    }
+                }
+                
+                // Update confidence indicator
+                if (confidence !== null) {
+                    this.confidenceValue.textContent = `${(confidence * 100).toFixed(0)}%`;
+                    this.confidenceIndicator.style.display = 'flex';
+                }
+                
+                // Update text editor with current format
                 if (this.extractedText) {
-                    this.extractedText.value = data.content;
+                    this.extractedText.value = this.extractedFormats[this.currentFormat];
                     this.extractedText.disabled = false;
-                    // Scroll to make text editor visible
                     this.extractedText.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-                    // Enable the Send Text to AI button
                     this.sendExtractedTextBtn.disabled = false;
                 }
+                
                 window.showToast('Text extracted successfully');
             }
             
@@ -282,6 +315,27 @@ class SnapSolver {
         this.setupCropEvents();
         this.setupAnalysisEvents();
         this.setupKeyboardShortcuts();
+        this.setupFormatToggle();
+    }
+
+    setupFormatToggle() {
+        this.textFormatBtn.addEventListener('click', () => {
+            if (this.currentFormat !== 'text') {
+                this.currentFormat = 'text';
+                this.textFormatBtn.classList.add('active');
+                this.latexFormatBtn.classList.remove('active');
+                this.extractedText.value = this.extractedFormats.text;
+            }
+        });
+
+        this.latexFormatBtn.addEventListener('click', () => {
+            if (this.currentFormat !== 'latex') {
+                this.currentFormat = 'latex';
+                this.latexFormatBtn.classList.add('active');
+                this.textFormatBtn.classList.remove('active');
+                this.extractedText.value = this.extractedFormats.latex;
+            }
+        });
     }
 
     setupCaptureEvents() {
diff --git a/static/style.css b/static/style.css
index f699719..dff230e 100644
--- a/static/style.css
+++ b/static/style.css
@@ -798,3 +798,62 @@ button:disabled {
         padding: 0.75rem;
     }
 }
+
+/* Text Format Controls */
+.text-format-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+}
+
+.format-toggle {
+    display: flex;
+    gap: 0.25rem;
+    background-color: var(--background);
+    padding: 0.25rem;
+    border-radius: 0.375rem;
+    border: 1px solid var(--border-color);
+}
+
+.format-btn {
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: 0.25rem;
+    background: transparent;
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.format-btn.active {
+    background-color: var(--primary-color);
+    color: white;
+}
+
+.send-text-group {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.confidence-indicator {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 0.875rem;
+    color: var(--success-color);
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    background-color: var(--background);
+    border: 1px solid var(--border-color);
+}
+
+.confidence-indicator i {
+    font-size: 1rem;
+}
+
+.confidence-value {
+    font-weight: 500;
+}
diff --git a/templates/index.html b/templates/index.html
index f706974..c66775a 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -65,10 +65,22 @@
                         </div>
                         <div id="textEditor" class="text-editor hidden">
                             <textarea id="extractedText" rows="4" placeholder="Extracted text will appear here..."></textarea>
-                            <button id="sendExtractedText" class="btn-primary">
-                                <i class="fas fa-paper-plane"></i>
-                                <span>Send Text to AI</span>
-                            </button>
+                            <div class="text-format-controls">
+                                <div class="format-toggle">
+                                    <button id="textFormatBtn" class="format-btn active">Text</button>
+                                    <button id="latexFormatBtn" class="format-btn">LaTeX</button>
+                                </div>
+                                <div class="send-text-group">
+                                    <div id="confidenceIndicator" class="confidence-indicator" title="OCR Confidence">
+                                        <i class="fas fa-check-circle"></i>
+                                        <span class="confidence-value"></span>
+                                    </div>
+                                    <button id="sendExtractedText" class="btn-primary">
+                                        <i class="fas fa-paper-plane"></i>
+                                        <span>Send Text to AI</span>
+                                    </button>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>