huanghai/dsProject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'commit'

Browse Source
This commit is contained in:
HuangHai
2025-09-01 13:09:46 +08:00
parent d7e5b1f312
commit 0ddb0dd93c
1 changed files with 199 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

285
dsLightRag/static/RecognizeEduQuestionOcr.html
View File

@@ -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>
// 识别手写（仅显示提示信息）
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>