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>
|