forked from vorojar/Folio-OCR
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
144 lines (134 loc) · 7.62 KB
/
index.html
File metadata and controls
144 lines (134 loc) · 7.62 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Folio-OCR</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Top Bar -->
<div class="topbar">
<span class="topbar-brand">Folio-OCR</span>
<a class="topbar-github" href="https://github.com/vorojar/Folio-OCR" target="_blank" rel="noopener" title="GitHub">
<svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0016 8c0-4.42-3.58-8-8-8z"/>
</svg>
</a>
<span class="topbar-divider"></span>
<span class="topbar-filename" id="topFilename">No document</span>
<button class="topbar-delete-btn" id="deleteDocBtn" title="Delete current document" style="display:none;">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2"/>
</svg>
</button>
<span class="topbar-spacer"></span>
<span class="search-wrap" id="searchWrap" style="display:none;">
<button class="search-toggle" id="searchToggle" title="Search (Ctrl+F)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8" />
<line x1="21" y1="21" x2="16.65" y2="16.65" />
</svg>
</button>
<input class="search-input" id="searchInput" type="text" placeholder="Search...">
<span class="search-info" id="searchInfo"></span>
<button class="search-nav-btn" id="searchPrev" disabled>▲</button>
<button class="search-nav-btn" id="searchNext" disabled>▼</button>
</span>
<span class="topbar-status">
<span class="status-dot" id="statusDot"></span>
<span id="statusText">Checking...</span>
</span>
<button class="topbar-btn" id="loadModelBtn" style="display:none;">Load Model</button>
<button class="topbar-btn" id="newFileBtn" title="Upload new file">Upload</button>
<span class="layout-toggle" id="layoutToggleWrap" style="display:none;">
<div class="layout-switch on" id="layoutSwitch" title="Toggle layout detection"></div>
<span>Layout</span>
</span>
<button class="topbar-btn primary" id="ocrAllBtn" style="display:none;">OCR All Pages</button>
<span class="export-wrap" id="exportWrap" style="display:none;">
<button class="topbar-btn" id="exportBtn">Export</button>
<div class="export-menu" id="exportMenu">
<div class="export-item" data-fmt="md">.md Markdown</div>
<div class="export-item" data-fmt="txt">.txt Plain Text</div>
<div class="export-item" data-fmt="docx">.docx Word</div>
</div>
</span>
<button class="topbar-btn" id="copyAllBtn" style="display:none;">Copy All</button>
</div>
<!-- Progress bar (below topbar) -->
<div class="ocr-progress" id="ocrProgress" style="display:none;">
<div class="ocr-progress-bar" id="ocrProgressBar" style="width:0%"></div>
</div>
<!-- Main 3-Column Layout -->
<div class="main">
<!-- Left: Doc List + Page List -->
<div class="panel-left hidden" id="panelLeft">
<!-- Document list (upper) -->
<div class="doc-list-section" id="docListSection">
<div class="panel-header doc-list-header" id="docListHeader">
<span>Documents</span>
<span class="doc-list-count" id="docListCount"></span>
<span class="panel-header-spacer"></span>
<button class="doc-list-toggle" id="docListToggle" title="Collapse">▲</button>
</div>
<div class="doc-list" id="docList"></div>
</div>
<div class="panel-divider"></div>
<!-- Page list (lower) -->
<div class="page-list-section">
<div class="panel-header">Pages</div>
<div class="page-list" id="pageList"></div>
</div>
</div>
<!-- Center: Preview / Upload -->
<div class="panel-center" id="panelCenter">
<div class="upload-zone" id="uploadZone">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round">
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
<polyline points="17 8 12 3 7 8" />
<line x1="12" y1="3" x2="12" y2="15" />
</svg>
<p>Click or drag files here</p>
<small>Supports: PNG, JPG, GIF, BMP, PDF</small>
</div>
<div class="preview-container" id="previewContainer">
<div class="preview-wrap" id="previewWrap">
<img id="previewImage" src="" alt="Preview">
<div class="bbox-overlay" id="bboxOverlay"></div>
</div>
</div>
</div>
<!-- Resize handle -->
<div class="resize-handle hidden" id="resizeHandle"></div>
<!-- Right: OCR Result -->
<div class="panel-right hidden" id="panelRight">
<div class="result-header">
<div class="result-header-row">
<span class="result-header-title">OCR Result</span>
<span class="result-header-spacer"></span>
<span class="result-time" id="resultTime" style="display:none;"></span>
</div>
<div class="result-header-row" id="resultToolbar" style="display:none;">
<div class="view-toggle" id="viewToggle">
<button class="view-btn" data-mode="edit">Edit</button>
<button class="view-btn active" data-mode="preview">Preview</button>
</div>
<span class="result-header-spacer"></span>
<button class="copy-btn" id="reflowBtn" title="Merge broken lines into paragraphs">Reflow</button>
<button class="copy-btn" id="reflowAllBtn" title="Reflow all pages">Reflow All</button>
<button class="copy-btn" id="copyPageBtn">Copy</button>
</div>
</div>
<div class="result-body" id="resultBody">
<div class="result-placeholder">Select a page to view OCR result</div>
</div>
</div>
</div>
<input type="file" id="fileInput" accept=".png,.jpg,.jpeg,.gif,.bmp,.pdf" multiple>
<div class="toast-container" id="toastContainer"></div>
<script src="script.js"></script>
</body>
</html>