From 0ddb0dd93c061ab0d04648ec1e0f7dcd40698fdd Mon Sep 17 00:00:00 2001
From: HuangHai <10402852@qq.com>
Date: Mon, 1 Sep 2025 13:09:46 +0800
Subject: [PATCH] 'commit'

---
 .../static/RecognizeEduQuestionOcr.html       | 285 ++++++++++++------
 1 file changed, 199 insertions(+), 86 deletions(-)

diff --git a/dsLightRag/static/RecognizeEduQuestionOcr.html b/dsLightRag/static/RecognizeEduQuestionOcr.html
index 2c5f9e7f..6bda9644 100644
--- a/dsLightRag/static/RecognizeEduQuestionOcr.html
+++ b/dsLightRag/static/RecognizeEduQuestionOcr.html
@@ -113,6 +113,7 @@
             height: 150px;
             object-fit: contain;
             background-color: #f9f9f9;
+            cursor: pointer; /* 添加鼠标悬停小手效果 */
         }
 
         .example-image-card .description {
@@ -181,6 +182,7 @@
             background-color: #f9f9f9;
             line-height: 1.8; /* 优化行高 */
         }
+
         .option-item {
             margin: 8px 0; /* 为选项添加上下间距 */
             background-color: #f9f9f9;
@@ -224,14 +226,19 @@
             position: relative; /* 关键：作为动画容器的定位基准 */
             overflow: hidden; /* 防止动画溢出 */
         }
+
         .option-item {
             margin: 8px 0; /* 为选项添加上下间距 */
             background-color: #f9f9f9;
         }
 
         @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
         }
 
         /* 图片模态框样式 */
@@ -245,7 +252,7 @@
             width: 100%;
             height: 100%;
             overflow: auto;
-            background-color: rgba(0,0,0,0.9);
+            background-color: rgba(0, 0, 0, 0.9);
         }
 
         .modal-content {
@@ -278,6 +285,7 @@
     <div class="tab-container">
         <button class="tab-button active" onclick="switchTab('formula')">公式识别</button>
         <button class="tab-button" onclick="switchTab('question')">试题识别</button>
+        <button class="tab-button" onclick="switchTab('handwriting')">手写识别</button>
     </div>
 
     <!-- 公式识别标签页 -->
@@ -285,8 +293,11 @@
         <div class="example-section">
             <h2>示例公式图片</h2>
             <div class="example-images">
+                <!-- 公式识别示例图片 -->
                 <div class="example-image-card">
-                    <img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/GongShi.jpg" alt="公式示例1">
+                    <img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/GongShi.jpg"
+                         alt="公式示例1"
+                         onclick="openModal(this.src)">
                     <div class="description">数学公式示例</div>
                 </div>
             </div>
@@ -296,7 +307,8 @@
             <h2>公式识别</h2>
             <div class="input-area">
                 <div class="input-group">
-                    <input type="text" id="formulaImageUrl" placeholder="请输入图片URL或使用示例图片" value="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/GongShi.jpg">
+                    <input type="text" id="formulaImageUrl" placeholder="请输入图片URL或使用示例图片"
+                           value="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/GongShi.jpg">
                     <button onclick="recognizeFormula()">识别公式</button>
                 </div>
                 <div id="formulaResult" class="result-area">
@@ -312,7 +324,9 @@
             <h2>示例试题图片</h2>
             <div class="example-images">
                 <div class="example-image-card">
-                    <img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/ShiTi.jpg" alt="试题示例1">
+                    <img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/ShiTi.jpg"
+                         alt="试题示例1"
+                         onclick="openModal(this.src)">
                     <div class="description">试题示例</div>
                 </div>
             </div>
@@ -322,7 +336,8 @@
             <h2>试题识别</h2>
             <div class="input-area">
                 <div class="input-group">
-                    <input type="text" id="questionImageUrl" placeholder="请输入图片URL或使用示例图片" value="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/ShiTi.jpg">
+                    <input type="text" id="questionImageUrl" placeholder="请输入图片URL或使用示例图片"
+                           value="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/ShiTi.jpg">
                     <button onclick="recognizeQuestion()">识别试题</button>
                 </div>
                 <div id="questionResult" class="result-area">
@@ -330,6 +345,7 @@
                 </div>
             </div>
         </div>
+
     </div>
 
     <!-- 图片查看模态框 -->
@@ -350,13 +366,13 @@
             processEscapes: true,
             packages: {'[+]': ['ams']}
         },
-        svg: { fontCache: 'global' },
-        startup: { pageReady: pageReady }
+        svg: {fontCache: 'global'},
+        startup: {pageReady: pageReady}
     };
 
     // MathJax 加载完成后执行
     function pageReady() {
-        return MathJax.startup.defaultPageReady().then(function() {
+        return MathJax.startup.defaultPageReady().then(function () {
             console.log('MathJax 3 加载完成');
         });
     }
@@ -367,15 +383,19 @@
 <script>
     // 切换标签页
     function switchTab(tabName) {
+        // 移除所有标签的激活状态
         document.querySelectorAll('.tab-button').forEach(button => button.classList.remove('active'));
         document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
 
-        if (tabName === 'formula') {
-            document.querySelectorAll('.tab-button')[0].classList.add('active');
-            document.getElementById('formula-tab').classList.add('active');
+        // 激活当前标签
+        const targetButton = document.querySelector(`.tab-button[onclick="switchTab('${tabName}')"]`);
+        const targetContent = document.getElementById(`${tabName}-tab`);
+
+        if (targetButton && targetContent) {
+            targetButton.classList.add('active');
+            targetContent.classList.add('active');
         } else {
-            document.querySelectorAll('.tab-button')[1].classList.add('active');
-            document.getElementById('question-tab').classList.add('active');
+            console.error(`标签 ${tabName} 未找到`);
         }
     }
 
@@ -384,7 +404,10 @@
         const imageUrl = document.getElementById('formulaImageUrl').value.trim();
         const resultArea = document.getElementById('formulaResult');
 
-        if (!imageUrl) { alert('请输入图片URL！'); return; }
+        if (!imageUrl) {
+            alert('请输入图片URL！');
+            return;
+        }
 
         resultArea.innerHTML = '<div class="loading-animation"><div class="spinner"></div><div>正在识别公式...</div></div>';
 
@@ -392,30 +415,36 @@
         setTimeout(() => {
             // 读取本地JSON文件
             fetch('Formula.json')
-            .then(response => {
-                console.log('JSON请求响应:', response);
-                if (!response.ok) throw new Error('无法加载本地JSON文件');
-                return response.json();
-            })
-            .then(data => {
-                if (data.error) { resultArea.innerHTML = `<div style="color:red">识别失败: ${data.error}</div>`; return; }
+                .then(response => {
+                    console.log('JSON请求响应:', response);
+                    if (!response.ok) throw new Error('无法加载本地JSON文件');
+                    return response.json();
+                })
+                .then(data => {
+                    if (data.error) {
+                        resultArea.innerHTML = `<div style="color:red">识别失败: ${data.error}</div>`;
+                        return;
+                    }
 
-                const content = data.Data?.content || '';
-                if (!content) { resultArea.innerHTML = '<div>未识别到公式内容</div>'; return; }
+                    const content = data.Data?.content || '';
+                    if (!content) {
+                        resultArea.innerHTML = '<div>未识别到公式内容</div>';
+                        return;
+                    }
 
-                try {
-                    resultArea.innerHTML = `<div class="tex2jax_process">$$${content}$$</div>`;
-                    renderWithMathJax(resultArea);
-                } catch (error) {
-                    console.error('公式处理错误:', error);
-                    resultArea.innerHTML = `<div style="color:red">公式处理失败: ${error.message}</div>`;
-                }
-            })
-            .catch(error => {
-                console.error('请求错误:', error);
-                const errorMsg = '加载本地JSON失败: ' + error.message;
-                resultArea.innerHTML = `<div style="color:red">${errorMsg}</div>`;
-            });
+                    try {
+                        resultArea.innerHTML = `<div class="tex2jax_process">$$${content}$$</div>`;
+                        renderWithMathJax(resultArea);
+                    } catch (error) {
+                        console.error('公式处理错误:', error);
+                        resultArea.innerHTML = `<div style="color:red">公式处理失败: ${error.message}</div>`;
+                    }
+                })
+                .catch(error => {
+                    console.error('请求错误:', error);
+                    const errorMsg = '加载本地JSON失败: ' + error.message;
+                    resultArea.innerHTML = `<div style="color:red">${errorMsg}</div>`;
+                });
         }, 1000); // 1秒延迟
     }
 
@@ -424,7 +453,10 @@
         const imageUrl = document.getElementById('questionImageUrl').value.trim();
         const resultArea = document.getElementById('questionResult');
 
-        if (!imageUrl) { alert('请输入图片URL！'); return; }
+        if (!imageUrl) {
+            alert('请输入图片URL！');
+            return;
+        }
 
         // 立即显示加载动画（关键修复）
         console.log('显示加载动画');
@@ -434,53 +466,56 @@
         setTimeout(() => {
             // 读取本地JSON文件
             fetch('ShiTi.json')
-            .then(response => {
-                console.log('JSON请求响应:', response);
-                if (!response.ok) throw new Error('无法加载本地JSON文件');
-                return response.json();
-            })
-            .then(data => {
-                if (data.error) { resultArea.innerHTML = `<div style="color:red">识别失败: ${data.error}</div>`; return; }
-
-                let content = data.Data?.content || '';
-                console.log("处理前："+content);
-
-                try {
-                    // 彻底修复选项标签闭合问题 - 采用分而治之策略
-                    // 1. 首先拆分所有选项为独立数组
-                    const options = content.split(/(?=[A-D]\s*\.)/);
-                    // 2. 逐个处理每个选项确保标签完整
-                    content = options.map(option => {
-                      // 仅处理以选项标签开头的部分
-                      if (/^[A-D]\s*\./.test(option)) {
-                        return `<span class="option-item">$${option}$</span>`; // 添加$符号
-                      }
-                      return option;
-                    }).join('');
-                    // 3. 清理可能的空标签
-                    content = content.replace(/<span class="option-item"><\/span>/g, '');
-                    if (!content.includes('<span class="option-item">')) {
-                      content = content.replace(/((?:[A-D]\s*\.\s*[^.]+)+)/g, '<span class="option-item">$1</span>');
+                .then(response => {
+                    console.log('JSON请求响应:', response);
+                    if (!response.ok) throw new Error('无法加载本地JSON文件');
+                    return response.json();
+                })
+                .then(data => {
+                    if (data.error) {
+                        resultArea.innerHTML = `<div style="color:red">识别失败: ${data.error}</div>`;
+                        return;
                     }
-                    // 添加选项间的分隔处理
-                    content = content.replace(/<\/span>\s*<span class="option-item">/g, '</span>\n<span class="option-item">');
-                    const latexContainer = document.createElement('div');
-                    latexContainer.className = 'tex2jax_process';
-                    latexContainer.innerHTML = content;
-                    console.log('预处理后的内容:', latexContainer.innerHTML);
-                    resultArea.innerHTML = '';
-                    resultArea.appendChild(latexContainer);
-                    renderWithMathJax(resultArea);
-                } catch (error) {
-                    console.error('试题处理错误:', error);
-                    resultArea.innerHTML = `<div style="color:red">试题处理失败: ${error.message}</div>`;
-                }
-            })
-            .catch(error => {
-                console.error('请求错误:', error);
-                const errorMsg = '加载本地JSON失败: ' + error.message;
-                resultArea.innerHTML = `<div style="color:red">${errorMsg}</div>`;
-            });
+
+                    let content = data.Data?.content || '';
+                    console.log("处理前：" + content);
+
+                    try {
+                        // 彻底修复选项标签闭合问题 - 采用分而治之策略
+                        // 1. 首先拆分所有选项为独立数组
+                        const options = content.split(/(?=[A-D]\s*\.)/);
+                        // 2. 逐个处理每个选项确保标签完整
+                        content = options.map(option => {
+                            // 仅处理以选项标签开头的部分
+                            if (/^[A-D]\s*\./.test(option)) {
+                                return `<span class="option-item">$${option}$</span>`; // 添加$符号
+                            }
+                            return option;
+                        }).join('');
+                        // 3. 清理可能的空标签
+                        content = content.replace(/<span class="option-item"><\/span>/g, '');
+                        if (!content.includes('<span class="option-item">')) {
+                            content = content.replace(/((?:[A-D]\s*\.\s*[^.]+)+)/g, '<span class="option-item">$1</span>');
+                        }
+                        // 添加选项间的分隔处理
+                        content = content.replace(/<\/span>\s*<span class="option-item">/g, '</span>\n<span class="option-item">');
+                        const latexContainer = document.createElement('div');
+                        latexContainer.className = 'tex2jax_process';
+                        latexContainer.innerHTML = content;
+                        console.log('预处理后的内容:', latexContainer.innerHTML);
+                        resultArea.innerHTML = '';
+                        resultArea.appendChild(latexContainer);
+                        renderWithMathJax(resultArea);
+                    } catch (error) {
+                        console.error('试题处理错误:', error);
+                        resultArea.innerHTML = `<div style="color:red">试题处理失败: ${error.message}</div>`;
+                    }
+                })
+                .catch(error => {
+                    console.error('请求错误:', error);
+                    const errorMsg = '加载本地JSON失败: ' + error.message;
+                    resultArea.innerHTML = `<div style="color:red">${errorMsg}</div>`;
+                });
         }, 1000); // 1秒延迟
     }
 
@@ -513,10 +548,88 @@
         }
     }
 
+    // 打开图片模态框
+    function openModal(imageSrc) {
+        const modal = document.getElementById('imageModal');
+        const modalImg = document.getElementById('modalImage');
+        modal.style.display = 'block';
+        modalImg.src = imageSrc;
+    }
+
+    // 关闭图片模态框
+    function closeModal() {
+        const modal = document.getElementById('imageModal');
+        modal.style.display = 'none';
+    }
+
+    // 点击模态框外部关闭
+    window.onclick = function (event) {
+        const modal = document.getElementById('imageModal');
+        if (event.target === modal) {
+            closeModal();
+        }
+    }
+
     // HTML转义函数
     function escapeHtml(text) {
         const div = document.createElement('div');
         div.textContent = text;
         return div.innerHTML;
     }
-</script>
\ No newline at end of file
+
+    // 识别手写（仅显示提示信息）
+    function recognizeHandwriting() {
+        alert("功能尚未实现，敬请期待!");
+    }
+</script>
+
+<!-- 手写识别标签页 -->
+<div id="handwriting-tab" class="tab-content">
+    <div class="example-section">
+        <h2>示例手写图片</h2>
+        <div class="example-images">
+            <div class="example-image-card">
+                <img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/ShouXie1.jpg"
+                     alt="手写示例1"
+                     onclick="openModal(this.src)">
+                <div class="description">手写示例1</div>
+            </div>
+            <div class="example-image-card">
+                <img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/ShouXie2.jpg"
+                     alt="手写示例2"
+                     onclick="openModal(this.src)">
+                <div class="description">手写示例2</div>
+            </div>
+            <div class="example-image-card">
+                <img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/ShouXie3.jpg"
+                     alt="手写示例3"
+                     onclick="openModal(this.src)">
+                <div class="description">手写示例3</div>
+            </div>
+            <div class="example-image-card">
+                <img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/ShouXie4.jpg"
+                     alt="手写示例4"
+                     onclick="openModal(this.src)">
+                <div class="description">手写示例4</div>
+            </div>
+        </div>
+    </div>
+
+    <div class="recognize-section">
+        <h2>手写识别</h2>
+        <div class="input-area">
+            <div class="input-group">
+                <input type="text" id="handwritingImageUrl" placeholder="请输入图片URL或使用示例图片"
+                       value="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/ShouXie1.jpg">
+
+                <button onclick="recognizeHandwriting()">识别手写</button>
+            </div>
+            <div id="handwritingResult" class="result-area">
+                <div style="color:#666; text-align:center; padding:20px;">识别结果将在此处显示</div>
+            </div>
+        </div>
+    </div>
+</div>
+
+</body>
+</html>
\ No newline at end of file