【眼底辅助诊断开放平台】项目笔记

Reuuse

已于 2025-04-14 09:10:22 修改

阅读量715

点赞数 21

文章标签：笔记

于 2025-04-13 18:52:17 首次发布

本文链接：https://blog.youkuaiyun.com/Reeuse/article/details/146345386

版权

这是一个标题

src/coponents 目录下新增新文件 MarkdownRenderer.tsx
修改页面 src/pages/SelfDeployAI/index.tsx

任务一

前端页面开发：

所涉及知识点：《眼底视网膜解读》

页面位于 page 目录下的两个新文件中，查看 Git 提交记录可以找到具体文件。
需要适配手机端，支持弹性变化布局。

后端接口配置：

将 config.tsx 中的端口替换为 10.3.36.106，以便访问的后端服务。✅

修改 ./proxy 文件：确保 target 指向 http://。✅

重启项目：确保配置生效。

http://7529

负责前端页面开发、后端接口配置和代码拉取。

任务二

自行部署

1、历史记录实现✅已实现
2、后台任务上传、假、真列表展示✅已实现

3、excel导出 pdf打印

安装必要的依赖：
```
yarn add jspdf jspdf-autotable
```
更改导出方式
最适合这种场景的库通常是jsPDF，它是一个轻量级的客户端PDF生成库，易于使用。

  // 导出诊断报告
  const exportReport = () => {
    if (messages.length === 0) {
      message.info('暂无诊断结果可导出');
      return;
    }

    // 找最近的一次分析结果
    let reportContent = '';
    let hasAnalysis = false;

    for (let i = messages.length - 1; i >= 0; i--) {
      if (messages[i].aiAnalysis) {
        // 找到了分析结果
        const analysis = messages[i].aiAnalysis;
        const content = messages[i].content;

        reportContent = `
# 眼底诊断报告
生成时间：${moment().format('YYYY-MM-DD HH:mm:ss')}

## 分析结果
主要诊断: ${analysis.main_class.label} (置信度: ${(analysis.main_class.confidence * 100).toFixed(2)}%)
分级: ${analysis.main_class.grade}级
左眼: ${analysis.left_eye.severity} (置信度: ${(analysis.left_eye.confidence * 100).toFixed(2)}%)
右眼: ${analysis.right_eye.severity} (置信度: ${(analysis.right_eye.confidence * 100).toFixed(2)}%)
预测年龄: ${analysis.age_prediction}
预测性别: ${analysis.gender_prediction}

## 病灶测量
微血管瘤: ${analysis.measurements?.microaneurysm_count ?? '未测量'}个
出血点: ${analysis.measurements?.hemorrhage_count ?? '未测量'}处
硬性渗出: ${analysis.measurements?.exudate_count ?? '未测量'}处

## 特征重要性
${analysis.feature_importance?.factors?.map(f =>
          `- ${f.name}: ${(f.value * 100).toFixed(1)}%`
        ).join('\n') || '无特征重要性数据'}

## 可视化分析
- 左眼分析图: ${analysis.visualizations?.left_eye ? '已生成' : '无'}
- 右眼分析图: ${analysis.visualizations?.right_eye ? '已生成' : '无'}
- 包含视图: ${analysis.visualizations?.left_eye?.filtered_views ?
          Object.keys(analysis.visualizations.left_eye.filtered_views).join(', ') : '无'}

## 诊断解读
${analysis.explanation.text}
关键发现：${analysis.explanation.findings.join('，')}

## 诊断建议
${content}

`;
        hasAnalysis = true;
        break;
      }
    }

    if (!hasAnalysis) {
      message.info('暂无分析结果可导出');
      return;
    }

    // 创建下载链接
    const blob = new Blob([reportContent], {type: 'text/plain'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `眼底诊断报告_${moment().format('YYYYMMDD_HHmmss')}.txt`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);

    message.success('诊断报告已导出');
  };

创建导出工具函数
创建src/utils/exportUtils.ts文件：
exportUtils.ts文件的作用是提供可重用的导出功能，比如将数据导出为PDF或Excel等格式。这样可以避免在多个组件中重复编写相同的导出逻辑，使代码更加模块化和易于维护。

创建完成后，将我之前提供的PDF导出代码放入这个文件中，然后在主组件中导入使用。

或者直接靠浏览器自带的下载

接入服务

1、添加详细介绍
2、提示词预设
3、功能介绍如可以智能导诊、查看名医

创建更详细的提示词分类和数据结构
增加一个侧边栏或下拉菜单来展示提示词预设
添加功能让用户选择这些预设
将选择的预设直接填入输入框或直接发送

日志

修改样式和解析MD文档

SelfDeployAI/index.tsx

修改 Layout 的样式

怎么感觉没变化啊靠

修改加载动画的样式

在这里插入图片描述

接入服务

导入缺失的Avatar组件。

- import { Card, message, Typography, Layout, Button, Switch, Space, Tooltip, Spin } from 'antd';
+ import { Card, message, Typography, Layout, Button, Switch, Space, Tooltip, Spin, Avatar } from 'antd';

新增消息元数据字段

// 原结构
setMessages([...prev, { sender, content, timestamp }])

// 修改后应包含AI角色和消息类型
setMessages([...prev, {
  sender: '用户',
  role: 'patient', // 新增用户角色标识
  contentType: 'text', // 新增消息类型(text/image)
  attachments: [], // 新增附件字段
  diagnosticData: {}, // 新增诊断数据字段
  timestamp
}])

Note

前端登陆不进去/更改后端api接口

多半是因为后端没有部署，或者可以更改后端api
config -> config.ts

openAPI: [
    {
      requestLibPath: "import { request } from '@umijs/max'",
      schemaPath: 'http://localhost:7529/api/v3/api-docs', //更改后端api
      projectName: 'cai-api-backend',
    },
  ],

304 Not Modified

浏览器缓存问题，但是刷新后仍然出现报错，我查看了其他报错原因

mf-dep____vendor.0983249d.js:343218

        POST http://127.0.0.1:7529/api/user/login?token%20=%20123 net::ERR_CONNECTION_REFUSED

我的端口并不是这个，所以肯定有哪些遗漏的
可以排查：后端服务未启动、端口配置错误、网络问题或跨域问题

login.cache.json

账号密码

"payload": {
      "username": "admin",
      "password": "ant.design",
      "autoLogin": true,
      "type": "account"
    },

ERR_CONNECTION_TIMED_OUT

浏览器在尝试连接到服务器时，等待响应的时间过长，超出了设置的超时时间

网络连接较慢
服务器无法响应
求目标地址不可访问

建议：查看端口号，我这里需要的端口号不是8080，所以需要更改

跨域

有的时候直接申请网址会出现失败的情况
这种就是跨域了
在这里插入图片描述

一般提交格式

feat: - 新功能
fix: - 修复问题
docs: - 文档相关
style: - 样式/格式变更
refactor: - 代码重构
perf: - 性能优化
test: - 测试相关
chore: - 日常维护任务

proxy.ts

请添加图片描述

pre是生产环境
dev配置是开发环境改掉dev的target为10.3.36.106:7529
openapi的是接口文档的地址不需要快速开发不需要改