支持OCR和AI解釋的Web PDF閱讀器：解決大文檔閱讀難題
- 一、背景：為什么需要這個工具？
- 問題場景
- 解決方案
- 二、技術原理：如何實現這些功能？
- 1、核心技術組件
- 2、工作流程
- 3、關鍵點
- 三、操作指南
- 1、環境準備
- 2、生成Html代碼
- 3、Web服務端
- 4、啟動服務端
- 四、效果
一、背景：為什么需要這個工具？
問題場景
當你在手機上閱讀掃描版PDF文檔（特別是超長文檔如2000頁的書籍）時，是否遇到過這些問題：
- 翻頁卡頓：越往后翻頁，加載速度越慢
- 文字識別失敗：嘗試復制文字時，OCR識別經常失敗或需要長時間等待
- 內容理解困難：專業術語或復雜段落難以理解，需要額外查詢
技術解釋：掃描版PDF本質上是圖片合集，手機自帶的OCR功能對長文檔處理能力有限，特別是：
- 內存限制導致大文檔處理困難
- 后臺進程被系統強制終止
- 缺乏持續優化的大文檔處理機制
解決方案
為此我開發了這款Web版PDF閱讀器，核心功能包括：
- 區域選擇識別：自由框選文檔任意區域進行OCR
- 文字即時編輯：直接修改識別結果
- AI智能解釋：一鍵獲取復雜內容的通俗解釋
- 跨平臺使用：在電腦/手機瀏覽器中都能流暢運行
設計理念：將OCR和AI能力轉移到服務器端處理，突破移動設備性能限制，同時通過Web技術實現免安裝使用
二、技術原理：如何實現這些功能？
1、核心技術組件
| 組件 | 功能 | 使用技術 |
|---|---|---|
| 前端界面 | PDF渲染/用戶交互 | PDF.js + HTML5 Canvas |
| OCR引擎 | 圖片轉文字 | 百度文字識別API |
| AI解釋引擎 | 文本內容解釋 | DeepSeek LLM大模型 |
| 服務端 | 功能調度 | Python Flask框架 |
2、工作流程
3、關鍵點
-
智能區域選擇：
- 自動適配不同分辨率設備
- 支持觸摸屏手勢操作
- 實時顯示選擇框效果
-
閱讀記憶功能：
- 自動記錄上次閱讀位置
- 本地存儲閱讀進度
- 翻頁進度可視化展示
三、操作指南
1、環境準備
cat > .env <<-'EOF'
APP_ID = '您的百度APPID'
API_KEY = '您的百度APIKEY'
SECRET_KEY = '您的百度SECRETKEY'
OPENAI_API_KEY = "您的DeepSeek密鑰"
OPENAI_BASE_URL = "https://api.deepseek.com"
EOF
注意：
- 百度OCR服務需在AI開放平臺申請
- DeepSeek API可在官網獲取
2、生成Html代碼
mkdir templates
cd templates
cat > index.html <<-'EOF'
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>本地化PDF閱讀器 - OCR識別與文本解釋</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;touch-action: manipulation;}body {background: linear-gradient(135deg, #1a2a6c, #2a5298);min-height: 100vh;padding: 15px;color: #333;display: flex;flex-direction: column;align-items: center;overflow-x: hidden;}.container {width: 100%;max-width: 100%;background: white;border-radius: 12px;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);overflow: hidden;display: flex;flex-direction: column;height: calc(100vh - 30px);}header {background: linear-gradient(to right, #2c3e50, #4a6491);color: white;padding: 15px 25px;display: flex;align-items: center;justify-content: space-between;}.logo {display: flex;align-items: center;gap: 12px;}.logo i {font-size: 30px;color: #4dabf7;animation: pulse 2s infinite;}@keyframes pulse {0%, 100% { transform: scale(1); }50% { transform: scale(1.1); }}.logo h1 {font-size: 24px;font-weight: 600;text-shadow: 1px 1px 3px rgba(0,0,0,0.3);}/* 修改開始：移除固定寬度，使用彈性布局 */.controls {display: flex;padding: 12px 15px;background: #f1f3f5;gap: 12px;border-bottom: 1px solid #dee2e6;align-items: center;width: 100%;overflow-x: auto;overflow-y: hidden;flex-wrap: nowrap;}/* 修改結束 */.file-controls, .progress-container {display: flex;align-items: center;gap: 10px;flex-shrink: 0;}.file-controls {flex: 1;min-width: 300px;}.progress-container {flex: 2;min-width: 400px;}button {padding: 9px 16px;border: none;border-radius: 6px;cursor: pointer;font-weight: 500;transition: all 0.2s ease;display: flex;align-items: center;gap: 6px;background: #339af0;color: white;box-shadow: 0 3px 5px rgba(0,0,0,0.1);flex-shrink: 0;}button:hover {background: #228be6;transform: translateY(-2px);box-shadow: 0 5px 10px rgba(0,0,0,0.15);}button:active {transform: translateY(1px);}button:disabled {background: #adb5bd;cursor: not-allowed;transform: none;box-shadow: none;}button i {font-size: 15px;}.page-info {font-weight: 500;background: #fff;padding: 7px 12px;border-radius: 6px;box-shadow: 0 2px 4px rgba(0,0,0,0.08);min-width: 110px;text-align: center;flex-shrink: 0;}.progress-bar {flex: 1;height: 8px;background: #e9ecef;border-radius: 4px;position: relative;overflow: hidden;box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);}.progress-fill {height: 100%;background: linear-gradient(90deg, #4dabf7, #40c057);border-radius: 4px;width: 0%;transition: width 0.3s ease;}input[type="range"] {width: 100%;height: 8px;-webkit-appearance: none;background: transparent;flex: 1;}input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none;width: 18px;height: 18px;border-radius: 50%;background: #339af0;cursor: pointer;box-shadow: 0 2px 6px rgba(0,0,0,0.25);border: 2px solid white;}.viewer-container {position: relative;flex: 1;background: #2c3e50;overflow: hidden;display: flex;justify-content: center;align-items: center;}#pdf-viewer {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;padding: 8px;overflow: auto;}.canvas-container {position: relative;display: flex;justify-content: center;align-items: center;margin: 0;box-shadow: 0 6px 15px rgba(0, 0, 0, 0.45);border: 1px solid #dee2e6;transition: transform 0.3s ease;max-width: 100%;max-height: 100%;overflow: hidden;}.canvas-container canvas {display: block;cursor: pointer;max-width: 100%;max-height: 100%;touch-action: none;}#selection-overlay {position: absolute;top: 0;left: 0;cursor: crosshair;border: 2px dashed rgba(77, 171, 247, 0.9);background: rgba(77, 171, 247, 0.2);pointer-events: none;z-index: 10;}.status-bar {background: #3d5a80;color: white;padding: 8px 15px;display: flex;justify-content: space-between;font-size: 13px;font-weight: 300;}.loading-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.85);display: flex;flex-direction: column;justify-content: center;align-items: center;color: white;z-index: 100;}.spinner {width: 50px;height: 50px;border: 4px solid rgba(255, 255, 255, 0.3);border-radius: 50%;border-top: 4px solid #4dabf7;animation: spin 1s linear infinite;margin-bottom: 15px;}@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}.modal {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);display: flex;justify-content: center;align-items: center;z-index: 1000;opacity: 0;visibility: hidden;transition: all 0.3s ease;}.modal.active {opacity: 1;visibility: visible;}.modal-content {background: white;border-radius: 10px;width: 85%;max-width: 550px;max-height: 85vh;overflow: hidden;box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);transform: translateY(-15px);transition: transform 0.3s ease;}.modal.active .modal-content {transform: translateY(0);}.modal-header {padding: 16px;background: linear-gradient(to right, #3d5a80, #4dabf7);color: white;display: flex;justify-content: space-between;align-items: center;}.modal-header h3 {font-size: 20px;font-weight: 600;}.close-btn {background: none;border: none;color: white;font-size: 22px;cursor: pointer;width: 32px;height: 32px;border-radius: 50%;display: flex;align-items: center;justify-content: center;transition: all 0.3s ease;}.close-btn:hover {background: rgba(255,255,255,0.2);}.modal-body {padding: 20px;overflow-y: auto;max-height: 55vh;}.modal-footer {padding: 16px;display: flex;justify-content: flex-end;gap: 12px;background: #f8f9fa;border-top: 1px solid #e9ecef;}.btn-secondary {background: #adb5bd;color: white;}.btn-primary {background: #339af0;color: white;}#ocr-text {width: 100%;min-height: 130px;padding: 12px;border: 1px solid #dee2e6;border-radius: 6px;font-size: 15px;line-height: 1.5;resize: vertical;margin-bottom: 15px;background: #f8f9fa;transition: border-color 0.3s;}#ocr-text:focus {border-color: #4dabf7;outline: none;box-shadow: 0 0 0 3px rgba(77, 171, 247, 0.2);}#deepseek-response {background: #f1f3f5;border-radius: 6px;border: 1px solid #e9ecef;padding: 16px;font-size: 14px;line-height: 1.5;max-height: 180px;overflow-y: auto;transition: all 0.3s ease;}.hidden {display: none;}.api-response {padding: 12px;background: #e7f5ff;border-left: 4px solid #4dabf7;border-radius: 4px;margin: 12px 0;animation: fadeIn 0.4s ease;}@keyframes fadeIn {from { opacity: 0; transform: translateY(8px); }to { opacity: 1; transform: translateY(0); }}.ocr-hint {text-align: center;color: #5c7cfa;font-style: italic;margin-top: 8px;padding: 8px;background: #f1f3f5;border-radius: 6px;margin-bottom: 12px;}.error-message {background: #ffe3e3;border: 1px solid #ff6b6b;border-radius: 8px;padding: 12px;margin: 0 auto 15px;text-align: center;max-width: 600px;display: none;}.api-status {display: flex;align-items: center;gap: 6px;margin-top: 8px;font-size: 13px;color: #495057;}.response-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 8px;}.api-tag {background: #4dabf7;color: white;padding: 3px 8px;border-radius: 4px;font-size: 11px;font-weight: bold;}.api-time {color: #868e96;font-size: 11px;}@media (max-width: 1024px) {.file-controls {min-width: 250px;}.progress-container {min-width: 350px;}}@media (max-width: 900px) {.controls {flex-wrap: wrap;padding: 10px;}.file-controls, .progress-container {min-width: 100%;}.progress-container {margin-top: 10px;}}@media (max-width: 768px) {body {padding: 10px;}.container {height: calc(100vh - 20px);}.logo h1 {font-size: 18px;}.status-bar {flex-direction: column;gap: 6px;text-align: center;}.modal-content {width: 95%;}button {padding: 10px;font-size: 14px;}.modal-footer {flex-wrap: wrap;justify-content: center;}.modal-footer button {flex: 1;min-width: 45%;margin-bottom: 8px;}.file-controls {gap: 6px;min-width: 100%;}.file-controls button {flex: 1;}}@media (max-width: 480px) {.page-info {min-width: auto;padding: 5px 8px;}.file-controls button span {display: none;}.file-controls button i {margin-right: 0;}}</style>
</head>
<body> <div class="error-message" id="error-message"><i class="fas fa-exclamation-triangle"></i><span id="error-text">發生了錯誤，請查看控制臺獲取詳細信息</span></div><div class="container"> <div class="controls"><div class="file-controls"><button id="open-file"><i class="fas fa-folder-open"></i> 打開PDF</button><button id="prev-page"><i class="fas fa-arrow-left"></i> 上一頁</button><button id="next-page"><i class="fas fa-arrow-right"></i> 下一頁</button></div><div class="progress-container"><div class="page-info">頁碼: <span id="current-page">1</span> / <span id="total-pages">1</span></div><div class="progress-bar"><div class="progress-fill"></div></div><input type="range" id="page-slider" min="1" max="1" value="1"></div></div><div class="viewer-container"><div id="pdf-viewer"></div><div id="selection-overlay" class="hidden"></div><div id="loading-overlay" class="loading-overlay hidden"><div class="spinner"></div><p id="loading-text">加載中...</p></div></div><div class="status-bar"><div>狀態: <span id="ocr-status">準備就緒</span></div></div></div><!-- OCR模態框 --><div class="modal" id="ocr-modal"><div class="modal-content"><div class="modal-header"><h3><i class="fas fa-font"></i> OCR識別結果</h3><button class="close-btn" id="close-ocr-modal">×</button></div><div class="modal-body"><div class="ocr-hint"><i class="fas fa-lightbulb"></i> 您選擇了以下內容（可進行編輯）：</div><textarea id="ocr-text" placeholder="識別內容將顯示在這里..."></textarea><div id="api-response-section" class="hidden"><div class="response-header"><p><strong><i class="fas fa-robot"></i> AI 響應：</strong></p><div class="api-time" id="api-time"></div></div><div id="deepseek-response">等待AI的回復...</div></div></div><div class="modal-footer"><button class="btn-secondary" id="copy-text"><i class="fas fa-copy"></i> 復制</button><button class="btn-primary" id="explain-text"><i class="fas fa-robot"></i> 解釋</button></div></div></div><!-- 使用本地文件 --><script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script><script>// 設置PDF.js工作環境pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';// 常量const STORAGE_PREFIX = 'pdfReader_';// DOM元素const viewer = document.getElementById('pdf-viewer');const fileInput = document.createElement('input');fileInput.type = 'file';fileInput.accept = '.pdf';const openFileButton = document.getElementById('open-file');const prevPageButton = document.getElementById('prev-page');const nextPageButton = document.getElementById('next-page');const currentPageElement = document.getElementById('current-page');const totalPagesElement = document.getElementById('total-pages');const pageSlider = document.getElementById('page-slider');const progressFill = document.querySelector('.progress-fill');const loadingOverlay = document.getElementById('loading-overlay');const loadingText = document.getElementById('loading-text');const ocrStatus = document.getElementById('ocr-status');const ocrModal = document.getElementById('ocr-modal');const closeOcrModal = document.getElementById('close-ocr-modal');const ocrText = document.getElementById('ocr-text');const copyTextButton = document.getElementById('copy-text');const explainTextButton = document.getElementById('explain-text');const apiResponseSection = document.getElementById('api-response-section');const deepseekResponse = document.getElementById('deepseek-response');const selectionOverlay = document.getElementById('selection-overlay');const errorMessage = document.getElementById('error-message');const errorText = document.getElementById('error-text');const apiTimeElement = document.getElementById('api-time');// 全局變量let pdfDoc = null;let currentPage = 1;let currentScale = 1;let pageRendering = false;let pageNumPending = null;let fileName = null;let fileKey = null;let canvasMap = new Map();let selection = {};let currentCanvas = null;let currentCanvasRect = null;let dpr = window.devicePixelRatio || 1;let isMobile = /Mobi|Android/i.test(navigator.userAgent);let viewerContainer = document.querySelector('.viewer-container');// 初始化openFileButton.addEventListener('click', () => fileInput.click());fileInput.addEventListener('change', loadPDF);prevPageButton.addEventListener('click', () => gotoPage(currentPage - 1));nextPageButton.addEventListener('click', () => gotoPage(currentPage + 1));pageSlider.addEventListener('input', () => gotoPage(parseInt(pageSlider.value)));closeOcrModal.addEventListener('click', closeOCRModal);copyTextButton.addEventListener('click', copyOCRText);explainTextButton.addEventListener('click', explainTextWithAI);// 顯示錯誤信息function showError(message) {errorText.textContent = message;errorMessage.style.display = 'block';console.error(message);}// 隱藏錯誤信息function hideError() {errorMessage.style.display = 'none';}// 加載PDF文件function loadPDF(e) {const file = e.target.files[0];if (!file) return;if (file.type !== 'application/pdf') {alert('請選擇PDF文件');return;}fileName = file.name;fileKey = STORAGE_PREFIX + fileName;showLoading('加載PDF文件...');hideError();const fileReader = new FileReader();fileReader.onload = function() {const typedArray = new Uint8Array(this.result);try {// 加載PDF文檔pdfjsLib.getDocument(typedArray).promise.then(function(pdf) {pdfDoc = pdf;const numPages = pdf.numPages;// 顯示總頁數totalPagesElement.textContent = numPages;pageSlider.max = numPages;// 嘗試從本地存儲獲取閱讀位置const lastPage = localStorage.getItem(fileKey + '_page');const initPage = lastPage ? parseInt(lastPage) : 1;// 加載第一頁（或上次閱讀的頁面）gotoPage(initPage);// 清除畫布映射canvasMap.clear();// 移除加載狀態hideLoading();}).catch(function(error) {hideLoading();showError('加載PDF失敗: ' + error.message);});} catch (error) {hideLoading();showError('PDF.js初始化失敗: ' + error.message);}};fileReader.onerror = function() {hideLoading();showError('讀取文件失敗');};fileReader.readAsArrayBuffer(file);}// 渲染指定頁碼function renderPage(num) {if (!pdfDoc) return;pageRendering = true;showLoading(`渲染第 ${num} 頁...`);ocrStatus.textContent = '正在渲染頁面...';hideError();try {// 獲取頁面的promisepdfDoc.getPage(num).then(function(page) {const container = document.createElement('div');container.className = 'canvas-container';// 創建Canvasconst canvas = document.createElement('canvas');const ctx = canvas.getContext('2d', { willReadFrequently: true });// 獲取PDF頁面原始尺寸const viewport = page.getViewport({ scale: 1 });const originalWidth = viewport.width;const originalHeight = viewport.height;// 計算縮放比例以適應容器const viewerContainer = document.querySelector('.viewer-container');const viewerWidth = viewer.clientWidth - 20; // 減去內邊距const viewerHeight = viewer.clientHeight - 20;// 計算合適的縮放比例const widthScale = viewerWidth / originalWidth;const heightScale = viewerHeight / originalHeight;const scale = Math.min(widthScale, heightScale) * currentScale;const scaledViewport = page.getViewport({ scale: scale });// 設置Canvas尺寸（考慮設備像素比）const displayWidth = scaledViewport.width;const displayHeight = scaledViewport.height;const pixelWidth = Math.floor(displayWidth * dpr);const pixelHeight = Math.floor(displayHeight * dpr);canvas.width = pixelWidth;canvas.height = pixelHeight;canvas.style.width = displayWidth + 'px';canvas.style.height = displayHeight + 'px';// 縮放上下文以匹配設備像素比ctx.scale(dpr, dpr);container.appendChild(canvas);// 清空查看器并添加新容器viewer.innerHTML = '';viewer.appendChild(container);// 將Canvas存儲在映射中canvasMap.set(num, {canvas: canvas,rect: container.getBoundingClientRect(),viewport: scaledViewport,dpr: dpr});// 設置事件監聽器用于OCR選擇setupSelectionEvents(container);// 渲染PDF頁面到Canvasconst renderContext = {canvasContext: ctx,viewport: scaledViewport};const renderTask = page.render(renderContext);renderTask.promise.then(function() {if (pageNumPending !== null) {gotoPage(pageNumPending);pageNumPending = null;}pageRendering = false;hideLoading();updateStatus(`已渲染第 ${num} 頁`);updateFileInfo();}).catch(function(error) {pageRendering = false;hideLoading();showError('渲染頁面失敗: ' + error.message);});}).catch(function(error) {hideLoading();showError('獲取PDF頁面失敗: ' + error.message);});} catch (error) {hideLoading();showError('渲染頁面時出錯: ' + error.message);}}// 設置選擇事件（同時支持鼠標和觸摸）function setupSelectionEvents(container) {container.addEventListener('mousedown', startSelection);container.addEventListener('touchstart', handleTouchStart, { passive: false });}// 處理觸摸開始事件function handleTouchStart(e) {if (e.touches.length === 1) {// 單指觸摸，開始選擇startSelection(e.touches[0]);}}// 處理觸摸移動事件function handleTouchMove(e) {if (e.touches.length === 1) {// 單指移動，調整選擇區域resizeSelection(e.touches[0]);}}// 處理觸摸結束事件function handleTouchEnd(e) {if (e.touches.length === 0) {// 所有手指離開，結束選擇finishSelection();}}// 跳轉到指定頁面function gotoPage(num) {if (!pdfDoc) return;if (pageRendering) {pageNumPending = num;return;}if (num < 1 || num > pdfDoc.numPages) return;currentPage = num;currentPageElement.textContent = num;pageSlider.value = num;// 更新進度條const percent = Math.round((num / pdfDoc.numPages) * 100);progressFill.style.width = percent + '%';// 保存當前頁到本地存儲if (fileKey) {localStorage.setItem(fileKey + '_page', num);}// 清空當前查看器內容viewer.innerHTML = '';selectionOverlay.classList.add('hidden');// 渲染該頁renderPage(num);updateFileInfo();}// 更新底部狀態欄信息function updateFileInfo() {}// 更新OCR狀態function updateStatus(message) {ocrStatus.textContent = message;}// 顯示加載狀態function showLoading(message) {loadingText.textContent = message;loadingOverlay.classList.remove('hidden');}// 隱藏加載狀態function hideLoading() {loadingOverlay.classList.add('hidden');}// OCR區域選擇function startSelection(e) {e.preventDefault();const container = e.currentTarget;if (!container) return;const canvas = container.querySelector('canvas');if (!canvas) return;// 存儲當前canvas和其邊界currentCanvas = canvas;currentCanvasRect = container.getBoundingClientRect();// 獲取事件坐標const clientX = e.clientX || e.pageX;const clientY = e.clientY || e.pageY;// 計算相對于容器的坐標（考慮滾動位置）const viewerRect = viewer.getBoundingClientRect();const containerRect = container.getBoundingClientRect();// 計算容器在viewer中的位置（考慮滾動）const containerXInViewer = containerRect.left - viewerRect.left + viewer.scrollLeft;const containerYInViewer = containerRect.top - viewerRect.top + viewer.scrollTop;// 計算事件在容器內的坐標const x = clientX - containerRect.left;const y = clientY - containerRect.top;// 初始化選擇框位置selectionOverlay.style.width = '0';selectionOverlay.style.height = '0';selectionOverlay.style.left = (containerXInViewer + x) + 'px';selectionOverlay.style.top = (containerYInViewer + y) + 'px';selectionOverlay.classList.remove('hidden');// 存儲初始位置（相對于容器）selection = {startX: x,startY: y,endX: x,endY: y};// 添加事件監聽if (isMobile) {document.addEventListener('touchmove', handleTouchMove, { passive: false });document.addEventListener('touchend', handleTouchEnd);} else {document.addEventListener('mousemove', resizeSelection);document.addEventListener('mouseup', finishSelection);}}// 調整選擇框大小function resizeSelection(e) {const container = document.querySelector('.canvas-container');if (!container) return;// 獲取事件坐標const clientX = e.clientX || e.pageX;const clientY = e.clientY || e.pageY;// 獲取容器和viewer的邊界矩形const viewerRect = viewer.getBoundingClientRect();const containerRect = container.getBoundingClientRect();// 計算容器在viewer中的位置（考慮滾動）const containerXInViewer = containerRect.left - viewerRect.left + viewer.scrollLeft;const containerYInViewer = containerRect.top - viewerRect.top + viewer.scrollTop;// 計算事件在容器內的坐標const x = clientX - containerRect.left;const y = clientY - containerRect.top;// 限制在畫布顯示范圍內const clampedX = Math.max(0, Math.min(x, containerRect.width));const clampedY = Math.max(0, Math.min(y, containerRect.height));// 更新選擇框尺寸const left = Math.min(selection.startX, clampedX);const top = Math.min(selection.startY, clampedY);const width = Math.abs(clampedX - selection.startX);const height = Math.abs(clampedY - selection.startY);// 設置選擇框在viewer中的位置selectionOverlay.style.left = (containerXInViewer + left) + 'px';selectionOverlay.style.top = (containerYInViewer + top) + 'px';selectionOverlay.style.width = width + 'px';selectionOverlay.style.height = height + 'px';// 更新結束位置selection.endX = clampedX;selection.endY = clampedY;}// 完成選擇并進行OCR識別function finishSelection() {// 移除事件監聽if (isMobile) {document.removeEventListener('touchmove', handleTouchMove);document.removeEventListener('touchend', handleTouchEnd);} else {document.removeEventListener('mousemove', resizeSelection);document.removeEventListener('mouseup', finishSelection);}// 檢查選擇區域是否有效const minArea = 20;const width = Math.abs(selection.endX - selection.startX);const height = Math.abs(selection.endY - selection.startY);if (width < minArea || height < minArea) {selectionOverlay.classList.add('hidden');return;}// 獲取當前頁的Canvasconst container = document.querySelector('.canvas-container');if (!container || !currentCanvas) return;const canvas = currentCanvas;const ctx = canvas.getContext('2d');// 計算畫布的實際像素與顯示尺寸的比率const scaleX = canvas.width / currentCanvasRect.width;const scaleY = canvas.height / currentCanvasRect.height;// 轉換為畫布的實際像素坐標const pixelX = selection.startX * scaleX;const pixelY = selection.startY * scaleY;const pixelW = width * scaleX;const pixelH = height * scaleY;try {// 獲取圖像數據const imageData = ctx.getImageData(Math.round(pixelX), Math.round(pixelY), Math.round(pixelW), Math.round(pixelH));// 創建臨時Canvas來存儲選擇區域的圖像const tempCanvas = document.createElement('canvas');tempCanvas.width = Math.round(pixelW);tempCanvas.height = Math.round(pixelH);const tempCtx = tempCanvas.getContext('2d');tempCtx.putImageData(imageData, 0, 0);// 顯示OCR模態框ocrModal.classList.add('active');ocrText.value = '';apiResponseSection.classList.add('hidden');deepseekResponse.innerHTML = '等待AI的回復...';updateStatus('準備進行OCR識別...');// 將圖像轉換為DataURLconst imageDataURL = tempCanvas.toDataURL('image/jpeg');// 發送到Flask服務端進行OCR識別fetch('/ocr', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ image: imageDataURL })}).then(response => response.json()).then(data => {if (data.success) {ocrText.value = data.text.trim() || '未能識別到文字';updateStatus('OCR識別完成');} else {throw new Error(data.error || 'OCR識別失敗');}}).catch(err => {ocrText.value = 'OCR錯誤: ' + err.message;updateStatus('OCR識別失敗');showError('OCR識別失敗: ' + err.message);}).finally(() => {selectionOverlay.classList.add('hidden');});} catch (error) {showError('獲取圖像數據失敗: ' + error.message);selectionOverlay.classList.add('hidden');updateStatus('選擇區域錯誤');}}// 關閉OCR模態框function closeOCRModal() {ocrModal.classList.remove('active');}// 復制識別文本function copyOCRText() {ocrText.select();document.execCommand('copy');alert('文本已復制到剪貼板');}// 使用AI解釋文本 - 調用Flask服務function explainTextWithAI() {const text = ocrText.value.trim();if (!text) {alert('請先識別出文本內容');return;}apiResponseSection.classList.remove('hidden');updateStatus('正在使用AI解釋文本...');deepseekResponse.innerHTML = '<div class="api-response">正在分析文本內容...</div>';const startTime = new Date();// 調用Flask服務的/explain端點fetch('/explain', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ text: text })}).then(response => {if (!response.ok) {throw new Error('服務器錯誤: ' + response.status);}return response.json();}).then(data => {const endTime = new Date();const timeTaken = (endTime - startTime) / 1000;deepseekResponse.innerHTML = `<div class="api-response"><div class="api-tag">解釋結果</div><p>${data.explanation || '未能獲取解釋內容'}</p><div class="api-status"><i class="fas fa-clock"></i> 本次分析耗時 ${timeTaken.toFixed(2)} 秒</div></div>`;updateStatus('AI解釋完成');apiTimeElement.textContent = `處理時間: ${timeTaken.toFixed(2)}秒`;}).catch(err => {deepseekResponse.innerHTML = `<div class="api-response" style="background:#ffecec;border-left-color:#ff6b6b;"><p>錯誤: ${err.message}</p><p>請檢查服務是否正常運行</p></div>`;updateStatus('AI解釋失敗');showError('調用解釋服務失敗: ' + err.message);});}// 顯示示例PDF加載window.addEventListener('load', function() {updateStatus('準備就緒 | 請打開PDF文件');});</script>
</body>
</html>
EOF
cd -
3、Web服務端
cat > main.py <<-'EOF'
import os
import base64
import io
import re
import logging
from logging.handlers import RotatingFileHandler
from flask import Flask, render_template, jsonify, request, send_from_directory
from PIL import Image
from aip import AipOcr
from dotenv import load_dotenv
import openai# 加載環境變量
load_dotenv()app = Flask(__name__)# 配置日志系統
def configure_logging():# 創建日志目錄log_dir = "logs"if not os.path.exists(log_dir):os.makedirs(log_dir)# 設置日志格式log_format = '%(asctime)s - %(name)s - %(levelname)s - %(message)s'formatter = logging.Formatter(log_format)# 文件日志處理器（滾動日志，最大10MB，保留3個備份）file_handler = RotatingFileHandler(os.path.join(log_dir, 'app.log'),maxBytes=10*1024*1024,backupCount=3)file_handler.setFormatter(formatter)file_handler.setLevel(logging.DEBUG)# 控制臺日志處理器console_handler = logging.StreamHandler()console_handler.setFormatter(formatter)console_handler.setLevel(logging.DEBUG)# 獲取應用日志器并添加處理器app.logger.setLevel(logging.DEBUG)app.logger.addHandler(file_handler)app.logger.addHandler(console_handler)# 禁用werkzeug的默認日志處理werkzeug_logger = logging.getLogger('werkzeug')werkzeug_logger.setLevel(logging.ERROR)werkzeug_logger.addHandler(file_handler)configure_logging()class OpenAILLM:"""OpenAI語言模型封裝類"""def __init__(self, model_name: str = "deepseek-chat"):self.model_name = model_nameself.client = openai.OpenAI()app.logger.info(f"初始化OpenAI模型: {model_name}")def predict(self, query: str) -> str:"""使用LLM生成解釋文本"""try:app.logger.debug(f"LLM查詢開始: {query[:100]}... (長度:{len(query)})")response = self.client.chat.completions.create(model=self.model_name,messages=[{"role": "system", "content": "請用簡潔且通俗易懂的方式解釋下面這句話:"},{"role": "user", "content": query} ],temperature=0.7,)result = response.choices[0].message.content.strip()cleaned_result = re.sub(r'<think>.*?</think>', '', result, flags=re.DOTALL)app.logger.debug(f"LLM原始響應: {result[:200]}...")app.logger.debug(f"LLM清理后結果: {cleaned_result[:200]}...")return cleaned_resultexcept openai.APIError as api_err:app.logger.error(f"OpenAI API錯誤: {str(api_err)}", exc_info=True)return "API服務錯誤，請稍后再試"except openai.APIConnectionError as conn_err:app.logger.error(f"OpenAI連接錯誤: {str(conn_err)}", exc_info=True)return "網絡連接錯誤，請檢查網絡"except openai.RateLimitError as limit_err:app.logger.error(f"OpenAI限流錯誤: {str(limit_err)}", exc_info=True)return "請求過于頻繁，請稍后再試"except Exception as e:app.logger.exception("LLM處理未知錯誤")return "解釋生成失敗，請稍后再試"# 初始化全局模型實例
llm = OpenAILLM()@app.route('/')
def index():"""主頁面路由"""app.logger.info("訪問首頁")return render_template('index.html')@app.route('/ocr', methods=['POST'])
def ocr_processing():"""OCR文字識別接口"""try:app.logger.info("收到OCR請求")data = request.jsonimage_data = data.get('image', '')# 記錄圖像數據基本信息app.logger.debug(f"收到圖像數據: 長度={len(image_data)} 字符, 類型={type(image_data)}")# 提取Base64編碼數據if 'base64,' in image_data:image_data = image_data.split('base64,', 1)[1]app.logger.debug("已剝離Base64前綴")# 解碼圖像img_bytes = base64.b64decode(image_data)app.logger.debug(f"圖像解碼成功: {len(img_bytes)} 字節")# 使用百度OCR APIclient = AipOcr(os.getenv('APP_ID'), os.getenv('API_KEY'), os.getenv('SECRET_KEY'))app.logger.info("調用百度OCR API...")result = client.basicAccurate(img_bytes)# 檢查OCR結果if 'words_result' not in result:app.logger.warning(f"OCR返回異常結果: {result}")return jsonify(success=False, error="OCR識別失敗"), 500text = ' '.join(item['words'] for item in result.get('words_result', []))app.logger.info(f"OCR識別成功: 識別到{len(result['words_result'])}個文本塊")app.logger.debug(f"OCR識別結果: {text[:200]}...")return jsonify(success=True, text=text)except base64.binascii.Error as e:app.logger.error(f"Base64解碼失敗: {str(e)}", exc_info=True)return jsonify(success=False, error="無效的圖像數據"), 400except KeyError as e:app.logger.error(f"請求數據缺少必要字段: {str(e)}", exc_info=True)return jsonify(success=False, error="請求數據不完整"), 400except Exception as e:app.logger.exception("OCR處理未知錯誤")return jsonify(success=False, error="服務器內部錯誤"), 500@app.route('/explain', methods=['POST'])
def text_explanation():"""文本解釋接口"""try:app.logger.info("收到解釋請求")data = request.jsontext = data.get('text', '')if not text:app.logger.warning("解釋請求缺少文本數據")return jsonify(success=False, error='缺少文本數據'), 400app.logger.debug(f"待解釋文本: {text[:200]}... (長度:{len(text)})")explanation = llm.predict(text)app.logger.info("解釋生成成功")app.logger.debug(f"完整解釋結果: {explanation}")return jsonify(success=True, explanation=explanation)except KeyError as e:app.logger.error(f"請求數據缺少必要字段: {str(e)}", exc_info=True)return jsonify(success=False, error="請求數據不完整"), 400except Exception as e:app.logger.exception("解釋生成未知錯誤")return jsonify(success=False, error="服務器內部錯誤"), 500if __name__ == '__main__':app.run(debug=os.getenv('DEBUG_MODE', 'False').lower() == 'true')
EOF
4、啟動服務端
python main.py
四、效果
并且推送至nexus私有依賴倉庫（筆記）)
)
)