企业官网建设流程全解析

洛阳建设企业网站公司,电商 网站 建设,WordPress 百度分享代码,做微信公众平台的网站DeepSeek-OCR-WEBUI SpringBoot 构建智能单据处理系统 1. 背景与需求分析 在企业级应用中#xff0c;大量纸质单据#xff08;如采购订单、发票、入库单等#xff09;仍需人工录入到业务系统。这一过程不仅效率低下#xff0c;且容易出错。随着AI技术的发展#xff0c;…DeepSeek-OCR-WEBUI SpringBoot 构建智能单据处理系统1. 背景与需求分析在企业级应用中大量纸质单据如采购订单、发票、入库单等仍需人工录入到业务系统。这一过程不仅效率低下且容易出错。随着AI技术的发展尤其是大模型驱动的OCR能力显著提升构建一个自动化、高精度的智能单据识别系统已成为可能。DeepSeek-OCR-WEBUI 是基于深度学习的大模型OCR工具具备强大的文本定位与结构化信息提取能力尤其擅长表格、图表和复杂布局文档的识别。结合SpringBoot构建后端服务可以实现从图像上传、OCR识别到数据结构化解析的完整流程最终形成可落地的企业级解决方案。本文将围绕“如何使用 DeepSeek-OCR-WEBUI 与 SpringBoot 构建智能单据处理系统”展开涵盖环境部署、接口调用、HTML解析、前后端集成及容器化发布全过程帮助开发者快速实现业务场景中的自动化数据采集。2. 系统架构设计2.1 整体架构图------------------ HTTP POST --------------------- | 前端页面 (Vue) | ---------------- | SpringBoot 应用服务 | ------------------ -------------------- | 调用 OCR API | v ----------------------------- | DeepSeek-OCR-WEBUI (Docker) | ----------------------------- | 返回 HTML 表格字符串 | v ---------------------------- | SpringBoot 解析为 JSON 数据 | ---------------------------- | 返回给前端展示/入库 | v -------------------- | 数据库存储或人工校验 | --------------------该系统采用分层解耦设计前端层Vue 实现用户交互界面支持图片上传与结果展示应用层SpringBoot 提供 RESTful 接口负责协调文件传输与OCR调用识别层DeepSeek-OCR-WEBUI 提供高性能OCR能力返回结构化HTML解析层Java 后端对HTML中的table进行DOM解析并转换为JSON持久层可选接入数据库完成数据持久化。3. DeepSeek-OCR-WEBUI 部署与API说明3.1 部署OCR服务确保已安装 Docker 和 GPU驱动推荐NVIDIA 4090D单卡执行以下命令启动OCR服务cd ~/DeepSeek-OCR-WebUI docker compose up -d查看日志确认服务正常启动docker logs -f deepseek-ocr-webui服务启动后默认监听http://localhost:8080提供Web UI 和 API 接口。3.2 OCR核心API详解OCR服务暴露的核心接口位于/web_service.py中app.post(/ocr) async def ocr_endpoint( file: UploadFile File(...), prompt_type: str Form(document), find_term: str Form(), custom_prompt: str Form(), grounding: bool Form(False) ):参数说明参数名类型可选值用途说明file文件必填待识别的图像文件prompt_type字符串document,ocr,free,figure,describe,find,freeform指定识别模式find_term字符串可选查找特定字段如“发票号”custom_prompt字符串可选自定义提示词grounding布尔值true/false是否启用实体标注本项目关键配置为了识别表格内容必须设置prompt_typefigure该模式专为图表、公式、表格设计能准确还原行列结构。示例请求POST http://localhost:8080/ocr Content-Type: multipart/form-data file: voucher.jpg prompt_type: figure响应示例简化table trtd序号/tdtd条码/tdtd名称/td.../tr trtd1/tdtd6949123352617/tdtd飞科PR-5261毛球修剪器/td.../tr ... /table4. SpringBoot 应用开发实践4.1 项目结构概览src/ ├── main/ │ ├── java/com/kaifamiao/dswebui/ │ │ ├── controller/OcrController.java │ │ ├── service/OcrService.java │ │ └── service/DeepSeekOcrService.java │ └── resources/ │ ├── static/ -- Vue 打包产物 │ └── application.yml └── test/ └── java/com/kaifamiao/dswebui/service/OcrServiceTest.java使用 Maven 构建依赖包括dependencies dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdorg.jsoup/groupId artifactIdjsoup/artifactId version1.16.1/version /dependency dependency groupIdcom.alibaba.fastjson2/groupId artifactIdfastjson2/artifactId version2.0.43/version /dependency /dependencies4.2 定义OCR服务接口// OcrService.java public interface OcrService { /** * 识别表格图片并返回结构化数据 * * param file 上传的包含表格的图片文件 * return 包含表格数据的Map对象将以JSON格式返回给前端 */ MapString, Object recognitionTable(MultipartFile file); }4.3 实现OCR调用逻辑// DeepSeekOcrService.java Service Slf4j public class DeepSeekOcrService implements OcrService { private static final String OCR_SERVICE_URL http://localhost:8080/ocr; Override public MapString, Object recognitionTable(MultipartFile file) { log.info(开始处理文件: {}, file.getOriginalFilename()); RestTemplate restTemplate new RestTemplate(); try { // 准备文件资源 ByteArrayResource resource new ByteArrayResource(file.getBytes()) { Override public String getFilename() { return file.getOriginalFilename(); } }; // 构建请求参数 MultiValueMapString, Object body new LinkedMultiValueMap(); body.add(file, resource); body.add(prompt_type, figure); // 关键使用图表模式识别表格 // 设置请求头 HttpHeaders headers new HttpHeaders(); headers.setContentType(MediaType.MULTIPART_FORM_DATA); // 创建请求实体 HttpEntityMultiValueMapString, Object requestEntity new HttpEntity(body, headers); // 发送POST请求 ResponseEntityString response restTemplate.postForEntity( OCR_SERVICE_URL, requestEntity, String.class); if (response.getStatusCode().is2xxSuccessful()) { String htmlContent response.getBody(); return parseHtmlTableToJSON(htmlContent); } else { log.error(OCR服务返回错误状态: {}, response.getStatusCode()); throw new RuntimeException(OCR识别失败); } } catch (Exception e) { log.error(调用OCR服务异常, e); throw new RuntimeException(文件处理失败: e.getMessage(), e); } } /** * 将HTML表格解析为JSON格式 * * param html 包含表格的HTML字符串 * return 转换后的JSON数据 */ private MapString, Object parseHtmlTableToJSON(String html) { Document doc Jsoup.parse(html); Element table doc.selectFirst(table); if (table null) { throw new IllegalArgumentException(未找到表格元素); } ListMapString, String rows new ArrayList(); Elements trList table.select(tr); boolean isFirstRow true; ListString headers new ArrayList(); for (Element tr : trList) { Elements tds tr.select(td,th); MapString, String row new HashMap(); for (int i 0; i tds.size(); i) { String text tds.get(i).text().trim(); if (isFirstRow) { headers.add(col_ i); row.put(col_ i, text); } else { String key i headers.size() ? headers.get(i) : col_ i; row.put(key, text); } } rows.add(row); isFirstRow false; } MapString, Object result new HashMap(); result.put(success, true); result.put(data, rows); result.put(totalRows, rows.size()); return result; } }关键技术点说明使用RestTemplate发起多部分表单请求prompt_typefigure是识别表格的关键利用Jsoup解析HTMLtable结构动态生成列名col_0,col_1...避免空标题问题输出标准JSON结构便于前端渲染。4.4 控制器层暴露接口// OcrController.java RestController RequestMapping(/api/ocr) Slf4j public class OcrController { Autowired private OcrService ocrService; PostMapping(/process) public MapString, Object processFile(RequestParam(file) MultipartFile file) { if (file.isEmpty()) { return Map.of(success, false, message, 文件为空); } try { MapString, Object result ocrService.recognitionTable(file); log.info(OCR识别成功共 {} 行数据, result.get(totalRows)); return result; } catch (Exception e) { log.error(处理文件失败, e); return Map.of(success, false, message, 识别失败 e.getMessage()); } } }4.5 编写单元测试验证功能// OcrServiceTest.java SpringBootTest Slf4j public class OcrServiceTest { Autowired private OcrService ocrService; Test void testRecognitionTableSuccess() throws Exception { ClassPathResource resource new ClassPathResource(voucher.jpg); MockMultipartFile file new MockMultipartFile( file, voucher.jpg, image/jpeg, resource.getInputStream() ); MapString, Object result ocrService.recognitionTable(file); log.info(OCR识别结果: {}, JSON.toJSONString(result)); Assertions.assertTrue((Boolean) result.get(success)); Assertions.assertTrue((Integer) result.get(totalRows) 0); } }运行测试可验证是否能正确调用OCR服务并解析出表格数据。5. 前端页面集成Vue5.1 页面功能设计前端使用 Vue 实现简单操作界面主要功能包括图片上传组件实时进度提示表格数据预览导出或提交按钮。5.2 核心代码片段template div classcontainer h2智能单据识别系统/h2 input typefile changehandleFileUpload acceptimage/* / button clicksubmit :disabled!selectedFile开始识别/button div v-ifloading正在识别.../div table v-iftableData.length 0 border1 cellpadding8 stylemargin-top: 20px; thead tr v-for(row, i) in tableData.slice(0, 1) :keyi th v-for(value, key) in row :keykey{{ key }}/th /tr /thead tbody tr v-for(row, i) in tableData :keyi td v-for(value, key) in row :keykey{{ value }}/td /tr /tbody /table /div /template script export default { data() { return { selectedFile: null, tableData: [], loading: false }; }, methods: { handleFileUpload(e) { this.selectedFile e.target.files[0]; }, async submit() { if (!this.selectedFile) return; const formData new FormData(); formData.append(file, this.selectedFile); this.loading true; try { const res await fetch(/api/ocr/process, { method: POST, body: formData }); const data await res.json(); if (data.success) { this.tableData data.data; } else { alert(识别失败: data.message); } } catch (err) { alert(请求失败: err.message); } finally { this.loading false; } } } }; /script5.3 前端打包与集成进入ui/目录执行npm install npm run build将生成的dist/文件夹复制到 SpringBoot 的src/main/resources/static/下即可通过/访问页面。6. 容器化部署方案6.1 Dockerfile 构建应用镜像FROM openjdk:21-jdk-slim WORKDIR /app COPY target/deepseek-web-ui.jar /app/deepseek-web-ui.jar EXPOSE 8080 ENTRYPOINT [java, -jar, deepseek-web-ui.jar]6.2 docker-compose.yml 统一编排version: 3.8 services: ocr-app: build: . ports: - 8080:8080 environment: - SERVER_PORT8080 volumes: - ./logs:/app/logs depends_on: - deepseek-ocr-webui deepseek-ocr-webui: image: deepseek-ocr-webui:latest container_name: deepseek-ocr-webui ports: - 8081:8080 runtime: nvidia deploy: resources: reservations: devices: - driver: nvidia count: 1 capabilities: [gpu]注意OCR服务映射为8081:8080避免端口冲突。6.3 启动完整服务栈docker compose up -d --build访问http://localhost:8080即可使用完整的单据识别系统。7. 总结本文详细介绍了如何利用DeepSeek-OCR-WEBUI SpringBoot构建一套完整的智能单据处理系统实现了从图像上传、表格识别、结构化解析到前后端展示的全流程闭环。核心价值总结高精度识别借助大模型OCR能力显著提升复杂单据的识别准确率工程可落地通过标准化REST API调用易于集成进现有系统结构化输出将HTML表格自动转为JSON便于后续处理全栈可控从前端到后端再到AI引擎全部自主掌控容器化部署支持一键启动适合生产环境部署。最佳实践建议对于敏感字段如金额、条码建议增加人工复核环节可扩展添加图像预处理模块去噪、矫正倾斜以提高识别率在并发量较大时考虑引入消息队列异步处理OCR任务定期更新OCR模型版本以获得更好的识别效果。该方案已在多个实际项目中验证其稳定性与实用性适用于金融、物流、零售等行业场景下的数字化转型需求。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。