coder/pdf-translate-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 实现对比查看功能

Browse Source 
- 读取翻译结果文件内容
- 尝试从原PDF提取原文（OCR识别的文字）
- 按页面分块显示对比
- 前端支持分页对比展示
This commit is contained in:
coder
2026-04-16 23:45:57 +08:00
parent e5c9ea322a
commit 3479cbd04c
2 changed files with 102 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
static/js/main.js
View File

@@ -204,18 +204,55 @@ document.getElementById('viewCompare')?.addEventListener('click', async function
function showCompareView(data) {
const resultContent = document.getElementById('resultContent');
resultContent.innerHTML = `
<div class="compare-container">
<div class="compare-panel original">
<h5>原文</h5>
<div class="content">${escapeHtml(data.original)}</div>
// 如果有分页数据，按页显示
if (data.pages && data.pages.length > 0) {
let html = '<div class="compare-container">';
for (const page of data.pages) {
html += `
<div class="compare-section mb-4">
<h5 class="text-center mb-3">第 ${page.page} 页</h5>
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">原文（OCR识别）</div>
<div class="card-body"><pre style="white-space: pre-wrap;">${escapeHtml(data.original || '原文内容')}</pre></div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">译文</div>
<div class="card-body">${renderMarkdown(page.content)}</div>
</div>
</div>
</div>
</div>
`;
}
html += '</div>';
resultContent.innerHTML = html;
} else {
// 单一对比视图
resultContent.innerHTML = `
<div class="compare-container">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">原文</div>
<div class="card-body"><pre style="white-space: pre-wrap;">${escapeHtml(data.original || '无原文内容')}</pre></div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">译文</div>
<div class="card-body">${renderMarkdown(data.translated || '无译文内容')}</div>
</div>
</div>
</div>
</div>
<div class="compare-panel translated">
<h5>译文</h5>
<div class="content">${renderMarkdown(data.translated)}</div>
</div>
</div>
`;
`;
}
}
// 重新翻译