glowz/ocr-based-qwen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update worker.js

Browse Source
This commit is contained in:
programmerWsy
2025-01-13 19:21:00 +08:00
committed by GitHub
parent 2a39a2c969
commit ee53bd6ecf
1 changed files with 318 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

327
worker.js
View File

@@ -236,7 +236,7 @@ function getHTML() {
'<head>',
'<meta charset="UTF-8">',
'<meta name="viewport" content="width=device-width, initial-scale=1.0">',
'<title>智能公式识别</title>',
'<title>Qwen VL 智能识别系统</title>',
// 添加 MathJax 支持
'<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>',
@@ -273,6 +273,7 @@ function getHTML() {
' .container {',
' background: rgba(255, 255, 255, 0.95);',
' padding: 2.5rem;',
' padding-bottom: 4rem;',
' border-radius: 16px;',
' box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);',
' width: 90%;',
@@ -282,9 +283,63 @@ function getHTML() {
' h1 {',
' color: #2c3e50;',
' margin-bottom: 1.5rem;',
' font-size: 1.8rem;',
' margin-bottom: 0.5rem;',
' font-size: 2.2rem;',
' text-align: center;',
' font-weight: 700;',
' text-transform: uppercase;',
' letter-spacing: 2px;',
' background: linear-gradient(135deg, #1a5fb4 0%, #3498db 100%);',
' -webkit-background-clip: text;',
' -webkit-text-fill-color: transparent;',
' text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);',
' position: relative;',
' padding-bottom: 10px;',
' animation: titleFadeIn 1s ease-out;',
' }',
' @keyframes titleFadeIn {',
' from {',
' opacity: 0;',
' transform: translateY(-20px);',
' }',
' to {',
' opacity: 1;',
' transform: translateY(0);',
' }',
' }',
' h1::after {',
' content: "";',
' position: absolute;',
' bottom: 0;',
' left: 50%;',
' transform: translateX(-50%);',
' width: 100px;',
' height: 3px;',
' background: linear-gradient(90deg, transparent, #3498db, transparent);',
' }',
' .subtitle {',
' color: #7f8c8d;',
' text-align: center;',
' font-size: 1.1rem;',
' margin-bottom: 1.5rem;',
' font-weight: 300;',
' letter-spacing: 1px;',
' opacity: 0.8;',
' animation: subtitleFadeIn 1s ease-out 0.3s both;',
' }',
' @keyframes subtitleFadeIn {',
' from {',
' opacity: 0;',
' transform: translateY(10px);',
' }',
' to {',
' opacity: 0.8;',
' transform: translateY(0);',
' }',
' }',
' .upload-area {',
@@ -631,11 +686,12 @@ function getHTML() {
' /* 添加左侧边栏样式 */',
' .history-sidebar {',
' position: fixed;',
' left: -300px;',
' left: -400px;',
' top: 0;',
' width: 300px;',
' width: 400px;',
' height: 100vh;',
' background: white;',
' background: rgba(255, 255, 255, 0.98);',
' backdrop-filter: blur(10px);',
' box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);',
' transition: left 0.3s ease;',
' padding: 20px;',
@@ -710,6 +766,193 @@ function getHTML() {
' .toggle-btn:hover {',
' background: #2980b9;',
' }',
' /* 修改历史记录侧边栏样式 */',
' .history-item {',
' background: #ffffff;',
' border-radius: 12px;',
' margin-bottom: 20px;',
' box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);',
' overflow: hidden;',
' transition: transform 0.2s ease, box-shadow 0.2s ease;',
' }',
' .history-item:hover {',
' transform: translateY(-2px);',
' box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);',
' }',
' .history-image-container {',
' position: relative;',
' width: 100%;',
' height: 200px;',
' overflow: hidden;',
' }',
' .history-image {',
' width: 100%;',
' height: 100%;',
' object-fit: cover;',
' transition: transform 0.3s ease;',
' }',
' .image-overlay {',
' position: absolute;',
' top: 0;',
' left: 0;',
' width: 100%;',
' height: 100%;',
' background: rgba(0, 0, 0, 0.4);',
' display: flex;',
' justify-content: center;',
' align-items: center;',
' opacity: 0;',
' transition: opacity 0.3s ease;',
' }',
' .history-image-container:hover .image-overlay {',
' opacity: 1;',
' }',
' .history-image-container:hover .history-image {',
' transform: scale(1.05);',
' }',
' .overlay-btn {',
' background: rgba(255, 255, 255, 0.9);',
' color: #2c3e50;',
' border: none;',
' padding: 8px 16px;',
' border-radius: 20px;',
' cursor: pointer;',
' font-size: 0.9rem;',
' transition: all 0.2s ease;',
' }',
' .overlay-btn:hover {',
' background: #ffffff;',
' transform: scale(1.05);',
' }',
' .history-content {',
' padding: 16px;',
' }',
' .history-header {',
' display: flex;',
' justify-content: space-between;',
' align-items: center;',
' margin-bottom: 12px;',
' padding-bottom: 12px;',
' border-bottom: 1px solid #eee;',
' }',
' .history-time {',
' color: #7f8c8d;',
' font-size: 0.9rem;',
' }',
' .history-actions {',
' display: flex;',
' gap: 8px;',
' }',
' .action-btn {',
' background: none;',
' border: 1px solid #e0e0e0;',
' padding: 4px 8px;',
' border-radius: 4px;',
' cursor: pointer;',
' font-size: 0.8rem;',
' transition: all 0.2s ease;',
' }',
' .action-btn.copy-btn {',
' color: #3498db;',
' }',
' .action-btn.delete-btn {',
' color: #e74c3c;',
' }',
' .action-btn:hover {',
' background: #f8f9fa;',
' transform: translateY(-1px);',
' }',
' .history-text {',
' color: #2c3e50;',
' font-size: 0.95rem;',
' line-height: 1.6;',
' max-height: 200px;',
' overflow-y: auto;',
' padding-right: 8px;',
' }',
' .history-text::-webkit-scrollbar {',
' width: 4px;',
' }',
' .history-text::-webkit-scrollbar-track {',
' background: #f1f1f1;',
' }',
' .history-text::-webkit-scrollbar-thumb {',
' background: #c0c0c0;',
' border-radius: 2px;',
' }',
' .footer {',
' position: fixed;',
' bottom: 0;',
' left: 0;',
' width: 100%;',
' padding: 15px;',
' text-align: center;',
' background: rgba(255, 255, 255, 0.9);',
' backdrop-filter: blur(5px);',
' z-index: 900;',
' border-top: 1px solid rgba(0, 0, 0, 0.1);',
' }',
' .powered-by {',
' color: #7f8c8d;',
' font-size: 0.9rem;',
' }',
' .powered-by a {',
' color: #3498db;',
' text-decoration: none;',
' transition: color 0.3s ease;',
' font-weight: 500;',
' }',
' .powered-by a:hover {',
' color: #2980b9;',
' }',
' .footer-content {',
' margin-top: 2rem;',
' padding-top: 1rem;',
' border-top: 1px solid #eee;',
' text-align: center;',
' }',
' .powered-by {',
' color: #7f8c8d;',
' font-size: 0.9rem;',
' }',
' .powered-by a {',
' color: #3498db;',
' text-decoration: none;',
' transition: color 0.3s ease;',
' font-weight: 500;',
' }',
' .powered-by a:hover {',
' color: #2980b9;',
' }',
'</style>',
'</head>',
'<body>',
@@ -728,7 +971,8 @@ function getHTML() {
'</div>',
'<div class="container">',
'<h1>智能图片识别</h1>',
'<h1>Qwen VL 智能识别系统</h1>',
'<div class="subtitle">基于通义千问大模型的多模态智能识别引擎</div>',
'<div class="upload-area" id="uploadArea">',
'<i>📸</i>',
'<div class="upload-text">',
@@ -752,6 +996,11 @@ function getHTML() {
'<h2>识别历史</h2>',
'<div id="historyList"></div>',
'</div>',
'<div class="footer-content">',
'<div class="powered-by">',
'由 <a href="https://chat.qwenlm.ai/" target="_blank" rel="noopener noreferrer">Qwen VL</a> 提供支持，一切仅用于学习使用！',
'</div>',
'</div>',
'</div>',
'<div id="imageModal" class="modal">',
@@ -806,14 +1055,38 @@ function getHTML() {
' var html = \'\';',
' for (var i = 0; i < history.length; i++) {',
' var record = history[i];',
' const timestamp = new Date(record.timestamp);',
' const timeStr = timestamp.toLocaleString(\'zh-CN\', {',
' year: \'numeric\',',
' month: \'2-digit\',',
' day: \'2-digit\',',
' hour: \'2-digit\',',
' minute: \'2-digit\'',
' });',
' html += \'<div class="history-item">\';',
' html += \'<div class="history-image-container">\';',
' html += \'<img src="\' + record.image + \'" class="history-image" alt="历史图片" onclick="showFullImage(this.src)">\';',
' html += \'<div class="image-overlay">\';',
' html += \'<button class="overlay-btn" onclick="showFullImage(\\\'\' + record.image + \'\\\')">查看大图</button>\';',
' html += \'</div>\';',
' html += \'</div>\';',
' html += \'<div class="history-content">\';',
' html += \'<div class="history-header">\';',
' html += \'<span class="history-time">\' + timeStr + \'</span>\';',
' html += \'<div class="history-actions">\';',
' html += \'<button class="action-btn copy-btn" onclick="copyHistoryResult(\' + i + \')">复制结果</button>\';',
' html += \'<button class="action-btn delete-btn" onclick="deleteHistoryItem(\' + i + \')">删除</button>\';',
' html += \'</div>\';',
' html += \'</div>\';',
' html += \'<div class="history-text">\' + record.result + \'</div>\';',
' html += \'<div class="history-time">\' + new Date(record.timestamp).toLocaleString() + \'</div>\';',
' html += \'</div></div>\';',
' html += \'</div>\';',
' html += \'</div>\';',
' }',
' historyList.innerHTML = html;',
' // 渲染数学公式',
' MathJax.typesetPromise([historyList]);',
' };',
' // 初始化变量',
@@ -1019,6 +1292,12 @@ function getHTML() {
' function showFullImage(src) {',
' modal.style.display = "block";',
' modalImg.src = src;',
' modalImg.style.opacity = "0";',
' setTimeout(() => {',
' modalImg.style.transition = "opacity 0.3s ease";',
' modalImg.style.opacity = "1";',
' }, 50);',
' }',
' // 点击模态框关闭',
@@ -1121,6 +1400,36 @@ function getHTML() {
' }',
' }',
' });',
' // 复制历史记录结果',
' async function copyHistoryResult(index) {',
' const history = historyManager.loadHistory(currentToken);',
' const result = history[index].result;',
' try {',
' await navigator.clipboard.writeText(result);',
' const btn = event.target;',
' btn.textContent = \'已复制\';',
' btn.style.background = \'#27ae60\';',
' btn.style.color = \'#fff\';',
' setTimeout(() => {',
' btn.textContent = \'复制结果\';',
' btn.style.background = \'none\';',
' btn.style.color = \'#3498db\';',
' }, 2000);',
' } catch (err) {',
' console.error(\'复制失败:\', err);',
' }',
' }',
' // 删除历史记录项',
' function deleteHistoryItem(index) {',
' if (confirm(\'确定要删除这条历史记录吗？\')) {',
' const history = historyManager.loadHistory(currentToken);',
' history.splice(index, 1);',
' historyManager.saveHistory(currentToken, history);',
' historyManager.displayHistory(currentToken);',
' }',
' }',
'</script>',
'</body>',
'</html>'