{% extends "base.html" %}

{% block title %}PaddleOCR识别 - AI字体工具{% endblock %}

{% block extra_css %}
<style>
/* 卡片网格容器 - 参考标注页 card-grid-container */
.ocr-card-grid-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 20px;
    background: #3a3a3a;
}
/* 卡片网格 - 参考标注页 card-grid */
.ocr-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    grid-auto-rows: min-content;
    gap: 15px;
}
/* 卡片 - 参考标注页 char-card */
.ocr-card {
    background: #e8e4df;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: default;
}
/* 图片区 - 参考标注页 card-image，padding-bottom实现正方形 */
.ocr-card .card-img {
    width: 100%;
    padding-bottom: 100%;
    position: relative;
    background: #000;
    flex-shrink: 0;
}
.ocr-card .card-img img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.ocr-card .card-info {
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    font-size: 12px;
}
.ocr-card .card-text {
    font-size: 22px;
    font-weight: 700;
    color: #4a4a4a;
    line-height: 1;
    min-width: 24px;
    text-align: center;
}
.ocr-card .card-text.empty {
    color: #ccc;
    font-size: 14px;
}
.ocr-card .card-status {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
.ocr-card .card-status.pass {
    background: #e8f0e8;
    color: #5a8a5a;
}
.ocr-card .card-status.fail {
    background: #f0e8e8;
    color: #a06060;
}
.ocr-card .card-name {
    padding: 0 8px 6px;
    font-size: 20px;
    font-family: monospace;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
{% endblock %}

{% block content %}
<div class="ocr-layout">
    <!-- 左侧控制面板 -->
    <div class="ocr-panel">
        <!-- 说明 -->
        <div style="font-size:11px;color:#8fa3b0;padding:4px 0 8px 0;border-bottom:1px solid #e0ddd8;margin-bottom:10px">
            本项目基于开源项目 <a href="https://github.com/PaddlePaddle/PaddleOCR" target="_blank" style="color:#7ba3b0">PaddleOCR</a>
        </div>
        <div class="param-group">
            <h4>OCR配置</h4>
            <div class="path-row">
                <label>OCR环境</label>
                <input type="text" id="ocrPython" data-persist value="D:\Claudecode\paddle-ocr\venv\Scripts\python.exe">
                <button class="btn-browse" onclick="browseFile('ocrPython',['.exe'])">浏览</button>
            </div>
            <div class="path-row">
                <label>输入目录</label>
                <input type="text" id="inputDir" data-persist placeholder="图片目录路径">
                <button class="btn-browse" onclick="browseDir('inputDir')">浏览</button>
            </div>
            <div class="param-row">
                <label>文件过滤</label>
                <input type="text" id="fileFilter" value="*.png">
            </div>
            <div class="param-row">
                <label>识别模型</label>
                <select id="ocrModel">
                    <option value="ch">中英文标准（ch）</option>
                    <option value="ch_server">服务器版（ch_server）</option>
                    <option value="handwriting" selected>手写体（handwriting）</option>
                    <option value="chinese_cht">繁体中文</option>
                    <option value="en">英文（en）</option>
                    <option value="japan">日文</option>
                    <option value="korean">韩文</option>
                </select>
            </div>
            <div class="param-row">
                <label>置信阈值</label>
                <input type="number" id="confThreshold" value="0.5" step="0.05" min="0" max="1">
            </div>
            <div class="param-row">
                <label>批量大小</label>
                <input type="number" id="batchSize" value="50" min="1" max="200">
            </div>
        </div>

        <div class="btn-row">
            <button class="btn btn-primary" onclick="startOCR()">开始识别</button>
            <button class="btn btn-danger" onclick="stopOCR()">停止</button>
        </div>
        <div class="btn-row">
            <button class="btn btn-secondary" onclick="exportResults()">导出CSV</button>
        </div>
        <div class="btn-row">
            <button class="btn btn-secondary" onclick="addSuffix()" title="uni4E00.png → uni4E00_一.png">加汉字后缀</button>
            <button class="btn btn-secondary" onclick="removeSuffix()" title="uni4E00_一.png → uni4E00.png">去汉字后缀</button>
        </div>

        <!-- 页面导航 -->
        <div class="nav-buttons">
            <button class="nav-btn" onclick="location.href='/train'">模型训练</button>
            <button class="nav-btn" onclick="location.href='/generate'">字库生字</button>
            <button class="nav-btn active">OCR识别</button>
        </div>
    </div>

    <!-- 右侧结果区 -->
    <div class="ocr-result">
        <div class="ocr-progress">
            <div class="ocr-stats">
                <span id="ocrProgress">0%</span> |
                <span id="ocrProcessed">0</span>/<span id="ocrTotal">0</span> |
                通过 <span id="ocrPass" style="color:#5a8a5a">0</span> |
                未通过 <span id="ocrFail" style="color:#a06060">0</span> |
                耗时 <span id="ocrTime">-</span>
            </div>
            <div class="ocr-progress-bar">
                <div class="ocr-progress-fill" id="ocrProgressBar"></div>
            </div>
        </div>

        <div class="ocr-card-grid-wrap">
            <div id="ocrCardGrid" class="ocr-card-grid">
                <div style="grid-column:1/-1;text-align:center;color:#aaa;padding:60px 0">等待识别...</div>
            </div>
        </div>

        <div class="ocr-summary" id="ocrSummary" style="display:none">
            <div class="stat">总数: <span class="stat-value" id="sumTotal">0</span></div>
            <div class="stat">通过: <span class="stat-value" id="sumPass" style="color:#5a8a5a">0</span></div>
            <div class="stat">未通过: <span class="stat-value" id="sumFail" style="color:#a06060">0</span></div>
            <div class="stat">平均置信度: <span class="stat-value" id="sumAvgConf">0</span></div>
        </div>
    </div>
</div>

<!-- 浏览弹窗 -->
<div id="browseModal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(58,56,52,0.5);z-index:2000;align-items:center;justify-content:center">
    <div style="background:#faf8f5;border-radius:8px;padding:20px;width:520px;max-height:70vh;display:flex;flex-direction:column;border:1px solid #e0ddd8">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
            <h3 style="font-size:16px;color:#4a4a4a" id="browseTitle">选择目录</h3>
            <div style="display:flex;gap:6px">
                <button class="btn btn-primary" onclick="confirmBrowse()" style="padding:4px 14px;font-size:12px">确认</button>
                <button class="btn btn-secondary" onclick="closeBrowse()" style="padding:4px 14px;font-size:12px">取消</button>
            </div>
        </div>
        <div id="browseCurrent" style="font-size:11px;font-family:monospace;color:#8fa3b0;margin-bottom:8px;padding:6px 10px;background:#fff;border-radius:4px;border:1px solid #e0ddd8;word-break:break-all"></div>
        <input type="text" id="browseInput" style="width:100%;padding:8px 12px;border:1px solid #ddd8d0;border-radius:4px;font-size:12px;font-family:monospace;margin-bottom:8px" placeholder="手动输入路径后回车确认">
        <div id="browseList" style="flex:1;overflow-y:auto;max-height:350px"></div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/ocr.js') }}"></script>
{% endblock %}