如何把 PaddleOCR.js 集成到 Web 應(yīng)用在瀏覽器端運(yùn)行 PP-OCR 推理【免費(fèi)下載鏈接】PaddleOCRTurn any PDF or image document into structured data for your AI. A powerful, lightweight OCR toolkit that bridges the gap between images/PDFs and LLMs. Supports 100 languages.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/pa/PaddleOCR如果你的 Web 應(yīng)用需要在前端完成文字檢測(cè)與識(shí)別不想把圖片上傳到服務(wù)端做 OCR可以把 PaddleOCR 官方瀏覽器 SDKPaddleOCR.jsnpm 包名paddleocr/paddleocr-js集成進(jìn)去。它通過 ONNX Runtime Web 和 OpenCV.js 在客戶端完成 PP-OCR 產(chǎn)線的推理輸入Blob/ImageBitmap/HTMLCanvasElement等瀏覽器圖像對(duì)象輸出帶坐標(biāo)、文本和置信度的識(shí)別結(jié)果。本文給出一條可直接執(zhí)行的集成路徑安裝 SDK、構(gòu)造產(chǎn)線、讀取結(jié)果并說明宿主應(yīng)用必須自己承擔(dān)的運(yùn)行時(shí)環(huán)境職責(zé)。先跑通官方 Vite 演示應(yīng)用倉(cāng)庫(kù)的paddleocr-js目錄是一個(gè) monorepopackages/core/是 SDK 源碼發(fā)布到 npm 的包apps/demo/是依賴該 SDK 的 Vite 演示應(yīng)用見 paddleocr-js/README_cn.md。演示應(yīng)用要求Node.js 20.11見 apps/demo 的 package.json 中engines聲明在倉(cāng)庫(kù)paddleocr-js目錄下執(zhí)行npm install npm run dev:demodev:demo等價(jià)于npm run dev --workspace apps/demo啟動(dòng) Vite 開發(fā)服務(wù)器。打開頁面后可以看到完整交互選擇模型預(yù)設(shè)PP-OCRv5_mobile/PP-OCRv6_small/PP-OCRv6_tiny、選擇運(yùn)行時(shí)后端auto/webgpu/wasm、上傳圖片、運(yùn)行 OCR并在頁面上看到檢測(cè)框疊加的可視化圖和識(shí)別結(jié)果列表。演示應(yīng)用的價(jià)值不只是能跑它的 Vite 配置就是宿主環(huán)境職責(zé)的現(xiàn)成參考。apps/demo/vite.config.js 中為server和preview都設(shè)置了headers: { Cross-Origin-Opener-Policy: same-origin, Cross-Origin-Embedder-Policy: credentialless }并配置了worker: { format: es }。這正是 SDK 文檔中宿主環(huán)境職責(zé)一節(jié)要求應(yīng)用自行處理的兩件事見下文。跑通演示后再改造到自己的項(xiàng)目遇到問題時(shí)可以直接對(duì)照 demo 的 main.ts。在自己的應(yīng)用中安裝并構(gòu)造產(chǎn)線npm install paddleocr/paddleocr-js最小接入代碼來自 browser.md 快速開始import { PaddleOCR } from paddleocr/paddleocr-js; const ocr await PaddleOCR.create({ lang: ch, ocrVersion: PP-OCRv5, ortOptions: { backend: auto } }); const [result] await ocr.predict(fileOrBlob); console.log(result.items);模型有兩種選法都通過PaddleOCR.create的選項(xiàng)傳入按語言與版本lang: chocrVersion: PP-OCRv5。文檔還說明ocrVersion: PP-OCRv6會(huì)把受支持的lang映射到內(nèi)置的 PP-OCRv6_small 檢測(cè)/識(shí)別模型對(duì)見 SDK README。按內(nèi)置模型名顯式傳入檢測(cè)與識(shí)別模型名await PaddleOCR.create({ textDetectionModelName: PP-OCRv5_mobile_det, textRecognitionModelName: PP-OCRv5_mobile_rec });如果要用PP-OCRv6_tiny必須顯式指定模型名不能只靠langocrVersionawait PaddleOCR.create({ textDetectionModelName: PP-OCRv6_tiny_det, textRecognitionModelName: PP-OCRv6_tiny_rec });另一種構(gòu)造方式是傳入產(chǎn)線配置pipelineConfigYAML 文本或已解析對(duì)象例如const pipelineConfig pipeline_name: OCR SubModules: TextDetection: model_name: PP-OCRv5_mobile_det batch_size: 2 TextRecognition: model_name: PP-OCRv5_mobile_rec batch_size: 6 ; const ocr await PaddleOCR.create({ pipelineConfig });瀏覽器端對(duì)pipelineConfig有一個(gè)限制子模塊的model_dir僅支持null或資源描述對(duì)象形如{ url: ... }不支持本地路徑字符串。若同時(shí)提供了直接參數(shù)與pipelineConfig以直接參數(shù)為準(zhǔn)。推理參數(shù)textDetectionBatchSize、textRecognitionBatchSize、ortOptions等也通過同一組 create 選項(xiàng)設(shè)置例如固定使用 wasm 后端并指定 wasm 資源路徑await PaddleOCR.create({ lang: ch, ocrVersion: PP-OCRv5, textDetectionBatchSize: 2, textRecognitionBatchSize: 8, ortOptions: { backend: wasm, wasmPaths: /assets/ } });預(yù)測(cè)調(diào)用與結(jié)果驗(yàn)證ocr.predict(image | images[], params?)接受Blob、ImageBitmap、ImageData、HTMLCanvasElement、HTMLImageElement、cv.Mat類型的輸入傳數(shù)組可一次處理多圖。檢測(cè)/識(shí)別的閾值參數(shù)同時(shí)支持 camelCase 與 PaddleOCR 風(fēng)格的 snake_case例如textDetThresh/text_det_thresh、textDetBoxThresh/text_det_box_thresh、textDetUnclipRatio/text_det_unclip_ratio、textRecScoreThresh/text_rec_score_thresh等。predict返回PromiseOcrResult[]每張輸入圖像對(duì)應(yīng)一項(xiàng)——即使只傳單個(gè)Blob/File得到的也是長(zhǎng)度為 1 的數(shù)組用解構(gòu)const [result] await ocr.predict(file)或results[0]取值。每個(gè)OcrResult包含image源圖尺寸{ width, height }items識(shí)別行每行含poly多邊形坐標(biāo)、text、scoremetricsdetMs、recMs、totalMs、detectedBoxes、recognizedCount。注意框數(shù)與行數(shù)是每張圖統(tǒng)計(jì)而三個(gè)耗時(shí)字段是整次predict()調(diào)用的總耗時(shí)多圖時(shí)每項(xiàng)上相同runtime請(qǐng)求的后端與各階段 Provider 等元數(shù)據(jù)。驗(yàn)證集成是否成功文檔給出的檢查手段有兩層初始化檢查調(diào)用ocr.getInitializationSummary()它會(huì)返回elapsedMs初始化耗時(shí)、backend、detProvider、recProvider、assets等信息。演示應(yīng)用就是這樣在頁面上展示初始化結(jié)果的見 main.ts 中initializeOcrEngine對(duì) summary 字段的讀取。推理結(jié)果檢查對(duì)已知含文字的圖片調(diào)用predict檢查result.items中的text與score以及result.metrics.recognizedCount。演示應(yīng)用在跑完后會(huì)在狀態(tài)區(qū)顯示形如OCR complete: N text lines recognized.的提示這是演示 UI 的展示行為N取決于圖片內(nèi)容不是固定預(yù)期值。predict拋出異常時(shí)演示應(yīng)用的做法是讀取err.message展示為OCR failed: ...集成時(shí)建議同樣捕獲并展示錯(cuò)誤信息而不是靜默吞掉。宿主應(yīng)用必須處理的三件事SDK 內(nèi)部負(fù)責(zé)管理 OpenCV.js 與 ONNX Runtime但以下三件事必須由你的應(yīng)用承擔(dān)這是 browser.md 宿主環(huán)境職責(zé)一節(jié)明確列出的COOP/COEP 響應(yīng)頭啟用多線程 WASM 或 WebGPU 時(shí)需要。Vite 的寫法見前文 demo 配置其他框架在服務(wù)器配置響應(yīng)頭即可。ORT 環(huán)境選項(xiàng)wasm 資源托管路徑wasmPaths、線程數(shù)numThreads、SIMD 開關(guān)simd。demo 中把 wasm 資源指向了https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/你也可以把 onnxruntime-web 的 dist 文件放到自己的靜態(tài)資源目錄把wasmPaths改成對(duì)應(yīng)路徑。module worker 支持使用worker: true時(shí)構(gòu)建工具需能產(chǎn)出并加載 module worker。demo 用 Vite 的worker: { format: es }解決?？蛇x把推理移到 Worker對(duì)大圖推理可能阻塞 UI 時(shí)可以讓產(chǎn)線跑在獨(dú)立 Worker 中高層 API 不變const ocr await PaddleOCR.create({ lang: ch, ocrVersion: PP-OCRv5, worker: true, ortOptions: { backend: wasm, wasmPaths: https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/, numThreads: 2, simd: true } });文檔說明的行為要點(diǎn)Worker 模式使用包內(nèi) Worker 腳本路徑而非 ONNX Runtime Web 的env.wasm.proxy啟用worker: true時(shí)包內(nèi)會(huì)關(guān)閉 ORT 的 wasm proxy 以避免雙層 Worker瀏覽器輸入先在主線程標(biāo)準(zhǔn)化再傳入 Worker。因此cv.Mat在 Worker 模式下無法傳輸不能作為 Worker 路徑的輸入它只支持主線程產(chǎn)線路徑?？蛇x使用自己訓(xùn)練的模型如果要替換為自有模型為檢測(cè)/識(shí)別分別傳入模型名與資源地址await PaddleOCR.create({ textDetectionModelName: my_det_model, textDetectionModelAsset: { url: https://example.com/models/my_det_model.tar }, textRecognitionModelName: my_rec_model, textRecognitionModelAsset: { url: https://example.com/models/my_rec_model.tar } });資源包格式有硬性要求不滿足時(shí)會(huì)在初始化階段以帶明確信息的Error失敗不會(huì)靜默失敗要求說明歸檔格式響應(yīng)體必須是未壓縮的.tar當(dāng)前實(shí)現(xiàn)對(duì).tar.gz/ gzip 不做解壓必需文件tar 內(nèi)必須包含inference.onnx與inference.yml可在子目錄中按文件名匹配model_nameinference.yml中必須能解析出model_name且與create中傳入的模型名完全一致初始化加載后會(huì)校驗(yàn)典型失敗原因下載非 2xx、tar 中找不到inference.onnx/inference.yml、資源為空、model_name缺失或不匹配、模型配置不完整、ONNX 無法加載。如需從 Paddle 模型轉(zhuǎn)換出 ONNX 模型文件可參考倉(cāng)庫(kù)中的 獲取 ONNX 模型轉(zhuǎn)換得到的標(biāo)準(zhǔn)模型文件按上述要求打包為.tar后即可提供給 PaddleOCR.js 使用。可選可視化結(jié)果子路徑paddleocr/paddleocr-js/viz提供把 OCR 結(jié)果渲染為圖像的工具viz 模塊會(huì)渲染一張左右對(duì)比的合成圖左側(cè)為帶檢測(cè)框的原始圖右側(cè)為識(shí)別出的文字。import { OcrVisualizer } from paddleocr/paddleocr-js/viz; const viz new OcrVisualizer({ font: { family: Noto Sans SC, source: /fonts/NotoSansSC-Regular.ttf } }); const blob await viz.toBlob(imageBitmap, result);注意toBlob只接受單個(gè)OcrResult多圖時(shí)取predict返回?cái)?shù)組的首項(xiàng)即可中日韓文字渲染需傳入可訪問的自定義字體文件路徑demo 使用了遠(yuǎn)程字體 URL按你的部署環(huán)境替換為可訪問的地址。用完記得viz.dispose()。一次性函數(shù)renderOcrToBlob和配色函數(shù)deterministicColor同樣從 viz 子路徑導(dǎo)出。邊界與清理PaddleOCR.create是異步操作切換模型或后端時(shí)需要先await ocr.dispose()再重建demo 的Reinitialize按鈕就是這個(gè)流程dispose 舊實(shí)例后重新 create。初始化、預(yù)測(cè)都可能拋錯(cuò)模型下載失敗、ONNX 會(huì)話創(chuàng)建失敗、后端不可用等建議按 demo 的方式捕獲Error并向用戶展示 message。完整的 API 面PaddleOCR.create(options)、ocr.initialize()、ocr.getInitializationSummary()、ocr.predict(image | images[], params?)、ocr.dispose()、parseOcrPipelineConfigText(text)、normalizeOcrPipelineConfig(config)。進(jìn)一步細(xì)節(jié)可查閱 PaddleOCR.js 瀏覽器端部署文檔、SDK 包 README 以及 paddleocr-js/docs/architecture_cn.md 的架構(gòu)說明?！久赓M(fèi)下載鏈接】PaddleOCRTurn any PDF or image document into structured data for your AI. A powerful, lightweight OCR toolkit that bridges the gap between images/PDFs and LLMs. Supports 100 languages.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/pa/PaddleOCR創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考