Yuuko
1018416a7a
- Canvas-based dual display (image + text) - Grid rendering system with layout support - Uniform font size rendering - Double-line small character handling - Comprehensive documentation of OCR rules and algorithms 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
152 lines
5.5 KiB
HTML
152 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>古籍OCR对照查看器 - Canvas版</title>
|
||
<link rel="stylesheet" href="src/css/style.css">
|
||
</head>
|
||
<body>
|
||
<!-- 顶部工具栏 -->
|
||
<header class="toolbar">
|
||
<div class="toolbar-left">
|
||
<h1>古籍OCR对照查看器</h1>
|
||
<span class="file-info" id="fileInfo">加载中...</span>
|
||
</div>
|
||
<div class="toolbar-right">
|
||
<button id="resetBtn" class="btn">重置视图</button>
|
||
<button id="exportBtn" class="btn">导出对比图</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 主容器 -->
|
||
<main class="main-container">
|
||
<!-- 左侧：原始图片Canvas -->
|
||
<section class="canvas-panel">
|
||
<div class="panel-header">
|
||
<h2>原始图片</h2>
|
||
<span class="panel-info" id="imageInfo"></span>
|
||
</div>
|
||
<div class="canvas-wrapper" id="imageCanvasWrapper">
|
||
<canvas id="imageCanvas"></canvas>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 右侧：文字渲染Canvas -->
|
||
<section class="canvas-panel">
|
||
<div class="panel-header">
|
||
<h2>OCR文字渲染</h2>
|
||
<span class="panel-info" id="textInfo"></span>
|
||
</div>
|
||
<div class="canvas-wrapper" id="textCanvasWrapper">
|
||
<canvas id="textCanvas"></canvas>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- 底部控制面板 -->
|
||
<aside class="control-panel" id="controlPanel">
|
||
<div class="control-header">
|
||
<h3>控制面板</h3>
|
||
<button id="togglePanel" class="toggle-btn">▼</button>
|
||
</div>
|
||
|
||
<div class="control-content" id="controlContent">
|
||
<!-- 缩放控制 -->
|
||
<div class="control-group">
|
||
<label>缩放比例</label>
|
||
<div class="control-row">
|
||
<input type="range" id="scaleSlider" min="10" max="200" value="100" step="5">
|
||
<span class="value" id="scaleValue">100%</span>
|
||
<button id="fitBtn" class="btn-sm">适应窗口</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 文字渲染控制 -->
|
||
<div class="control-group">
|
||
<label>文字大小调整</label>
|
||
<div class="control-row">
|
||
<input type="range" id="fontScaleSlider" min="50" max="150" value="100" step="5">
|
||
<span class="value" id="fontScaleValue">100%</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 显示选项 -->
|
||
<div class="control-group">
|
||
<label>显示选项</label>
|
||
<div class="control-options">
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="showBoundsCheck" checked>
|
||
显示文字边框
|
||
</label>
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="showGridCheck">
|
||
显示网格
|
||
</label>
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="syncScrollCheck" checked>
|
||
同步滚动
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 文字颜色 -->
|
||
<div class="control-group">
|
||
<label>文字颜色</label>
|
||
<div class="control-row">
|
||
<input type="color" id="textColorPicker" value="#000000">
|
||
<span>背景</span>
|
||
<input type="color" id="bgColorPicker" value="#ffffff">
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="transparentBgCheck">
|
||
透明背景
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 置信度过滤 -->
|
||
<div class="control-group">
|
||
<label>最低置信度</label>
|
||
<div class="control-row">
|
||
<input type="range" id="confidenceSlider" min="0" max="100" value="0" step="5">
|
||
<span class="value" id="confidenceValue">0%</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 统计信息 -->
|
||
<div class="control-group stats">
|
||
<label>统计信息</label>
|
||
<div class="stats-content" id="statsContent">
|
||
<div class="stat-item">
|
||
<span>总字符数：</span>
|
||
<span id="totalChars">0</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span>显示字符：</span>
|
||
<span id="visibleChars">0</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span>平均置信度：</span>
|
||
<span id="avgConfidence">0%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- 字符详情浮窗 -->
|
||
<div class="char-tooltip" id="charTooltip">
|
||
<div class="tooltip-content"></div>
|
||
</div>
|
||
|
||
<!-- 加载提示 -->
|
||
<div class="loading-overlay" id="loadingOverlay">
|
||
<div class="loading-spinner"></div>
|
||
<p>加载中...</p>
|
||
</div>
|
||
|
||
<!-- JavaScript模块 -->
|
||
<script type="module" src="src/js/main.js"></script>
|
||
</body>
|
||
</html>
|