张铭个人网站

本页面只读。您可以查看源文件，但不能更改它。如果您觉得这是系统错误，请联系管理员。
====== AI 病历诊断 ======

----

<wrap em>诊断结果为 AI 生成的文本，需审慎对待，仅供参考使用。</wrap>

**测试数据：** 
  * [[github>BasicLLM/ai-diagnosis/blob/master/docs/病历测试案例.md|病历测试案例]]：该数据集的病历信息较全，用于不启用 RAG 的情况下测试大模型在医疗诊断方面的基础能力。
  * [[github>BasicLLM/ai-diagnosis/blob/master/docs/RAG主诉测试案例.md|RAG主诉测试案例]]：该数据集仅包含主诉信息，用于测试 RAG 的数据召回能力以及在大模型在有额外信源的情况下的信息处理能力。

**微调数据：** [[modelscope>datasets/zhangmingme/medical-record-diagnosis-chinese|zhangmingme/medical-record-diagnosis-chinese]] \\
**开源地址：** [[github>BasicLLM/ai-diagnosis|BasicLLM/ai-diagnosis]] 

----

<html>
<body>
   <style>
        .container {
           display: flex;
           padding: 20px;
           gap: 30px;
           align-items: flex-start; /* 新增：顶部对齐，防止等高 */
        }
        
        .left-panel {
            flex: 1;
            background: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
        }

        .input-group {
            margin-bottom: 20px;
        }

        .input-group label {
            display: block;
            margin-bottom: 8px;
            color: #2c3e50;
            font-weight: 500;
        }

        .input-group input,
        .input-group textarea,
        .input-group select {
            width: 100%;
            padding: 12px;
            border: 2px solid #e0e6ed;
            border-radius: 6px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .input-group input:focus,
        .input-group textarea:focus,
        .input-group select:focus {
            border-color: #3498db;
            outline: none;
        }

        .right-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        .diagnosis-section {
            background: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
        }

        .diagnosis-section h3 {
            color: #2c3e50;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #3498db;
        }

        .readonly-input {
            width: 100%;
            padding: 12px;
            border: 2px solid #e0e6ed;
            border-radius: 6px;
            background: #f8f9fb;
            margin-bottom: 10px;
        }

        .readonly-textarea {
            width: 100%;
            height: 200px;
            padding: 15px;
            border: 2px solid #e0e6ed;
            border-radius: 6px;
            background: #f8f9fb;
            resize: vertical;
        }

        .diagnosis-btn {
            bottom: 30px;
            padding: 15px 50px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(52,152,219,0.3);
            transition: all 0.3s; 
        }

        .diagnosis-btn:hover {
            background: #2980b9;
        }
        
        .diagnosis-btn:focus{
            background: #2980b9;
        }
        
        .collapsible {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }
        
        .toggle-button {
            background: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            margin: 10px 0;
            cursor: pointer;
            display: block;
            width: 100%;
        }
        
        .toggle-button:hover {
            background: #2980b9;
        }
        
        /* 添加开关样式 */
        .switch-group {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 15px;
            margin-bottom: 0px;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 28px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: #3498db;
        }

        input:checked + .slider:before {
            transform: translateX(22px);
        }

        .tooltip-trigger {
            position: relative;
            display: inline-block;
            cursor: help;
        }

        .tooltip-content {
            position: absolute;
            top: 20px; /* 调整距离，更靠近目标标签 */
            left: 50%;
            transform: translateX(-50%);
            background-color: #000000CC; /* rgba(52, 152, 219, 0.95); */
            color: white;
            padding: 10px 15px;
            border-radius: 6px;
            font-size: 12px;
            white-space: normal; /* 允许文字换行 */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s, visibility 0.3s;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            pointer-events: none;
            min-width: 350px; /* 设置最小宽度 */
            max-width: 350px; /* 增加气泡宽度 */
            text-align: left;
        }

        .tooltip-trigger:hover .tooltip-content {
            opacity: 1;
            visibility: visible;
        }

        .tooltip-content.data-tooltip {
            display: block !important;
        }

        #collapseBtn {
            margin-top: 20px;
        }
        
        #expandBtn {
            margin-bottom: 10px;
        }
        
    </style>
    <div class="container">
        <div class="left-panel">
            <div class="input-group">
                <label>性别</label>
                <select name="gender">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            
            <div class="input-group">
                <label>年龄</label>
                <input type="number" name="age" placeholder="请输入年龄">
            </div>

            <div class="input-group">
                <label>主诉</label>
                <textarea name="chiefComplaint" placeholder="请输入主诉内容" ></textarea>
            </div>

            <div class="input-group">
                <label>现病史</label>
                <textarea name="historyOfPresentIllness" placeholder="请输入现病史"></textarea>
            </div>

            <div class="input-group">
                <label>既往史</label>
                <textarea name="pastHistory" placeholder="请输入既往史"></textarea>
            </div>
            
            <div class="input-group">
                <label>体格检查结果</label>
                <textarea name="physicalExamination" placeholder="请输入检查结果"></textarea>
            </div>

            <div class="input-group">
                <label>辅助检查结果</label>
                <textarea name="auxiliaryExamination" placeholder="请输入检查结果"></textarea>
            </div>

            <button class="toggle-button" id="expandBtn" onclick="expandDetails()">补充更多详情 ▼</button>
            <div class="collapsible" id="moreDetails">
                <div class="input-group">
                    <label>生育史（TPAL 数据）</label>
                    <textarea name="reproductiveHistory" placeholder="请输入生育史"></textarea>
                </div>
            
                <div class="input-group">
                    <label>个人史</label>
                    <textarea name="personalHistory" placeholder="请输入个人史"></textarea>
                </div>

                <div class="input-group">
                    <label>过敏史</label>
                    <textarea name="allergicHistory" placeholder="请输入过敏史"></textarea>
                </div>

                <div class="input-group">
                    <label>婚育史</label>
                    <textarea name="pregnancyAndDelivery" placeholder="请输入婚育史"></textarea>
                </div>

                <div class="input-group">
                    <label>流行病史</label>
                    <textarea name="epidemicHistory" placeholder="请输入流行病史"></textarea>
                </div>

            </div>
            <button class="toggle-button" id="collapseBtn" onclick="collapseDetails()" style="display: none;">收起 ▲</button>
        </div>

        <div class="right-panel">
            
            <!-- 新增模型选择区块 -->
            <div class="diagnosis-section">
                <h3>模型配置</h3>
                <div class="input-group">
                    <select id="modelSelect" class="model-select">
                        <optgroup label="通用大模型">
                            <option value="deepseek" data-provider="deepseek" data-model="deepseek-chat">Deepseek (deepseek-chat)</option>
                            <option value="moonshot" data-provider="kimi" data-model="moonshot-v1-128k">Moonshot (moonshot-v1-128k)</option>
                            <option value="qwen2.5" data-provider="bailian" data-model="qwen-max-latest">Qwen-Max (qwen-max-latest)</option>
                            <option value="qwen3" data-provider="bailian-dashboard" data-model="qwen3-235b-a22b">Qwen3 (qwen3-235b-a22b)</option>
                        </optgroup>
                        <optgroup label="微调大模型">
                            <option value="qwen-finetune" data-provider="bailian-dashboard" data-model="qwen2.5-7b-instruct-ft-202505081135-db12" data-disable-rag="true">Qwen2.5-7B LoRA 微调</option>
                        </optgroup>
                    </select>
                </div>
                <div class="input-group switch-group">
                    <label>
                    启用 RAG 
                        <span 
                        class="tooltip-trigger" 
                        data-tooltip="RAG（Retrieval-Augmented Generation）功能会在诊断过程中结合知识库中的相关信息，帮助生成更准确的诊断结果。启用后，系统会根据输入的病历信息检索相关知识并辅助诊断。">
                             <svg viewBox="64 64 896 896" focusable="false" data-icon="question-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"></path></svg>
                        </span>
                    </label>
                    <label class="switch">
                        <input type="checkbox" id="ragToggle">
                        <span class="slider"></span>
                    </label>
                </div>
                <!-- 添加RAG不可用提示 -->
                <div id="ragDisabledWarning" style="color: #e74c3c; font-size: 14px; margin-top: 10px; display: none;">
                    ⚠️ RAG不可用（当前模型不支持）
                </div>
            </div>
            
            <div class="diagnosis-section">
                <h3>诊断疾病列表</h3>
                <div id="diseases-container">
                    <input type="text" class="readonly-input" readonly>
                </div>
            </div>

            <div class="diagnosis-section">
                <h3>诊断分析</h3>
                <textarea class="readonly-textarea" id="analyses" readonly></textarea>
            </div>

            <button class="diagnosis-btn" onclick="collectData()">开始诊断</button>
        </div>
    </div>

    <script>
        function expandDetails() {
            const details = document.getElementById('moreDetails');
            details.style.maxHeight = details.scrollHeight + 'px';
            document.getElementById('expandBtn').style.display = 'none';
            document.getElementById('collapseBtn').style.display = 'block';
        }

        function collapseDetails() {
            const details = document.getElementById('moreDetails');
            details.style.maxHeight = null;
            document.getElementById('collapseBtn').style.display = 'none';
            document.getElementById('expandBtn').style.display = 'block';
        }

        function updateDiseases(diseases) {
            const container = document.getElementById('diseases-container');
            container.innerHTML = '';
            
            const displayDiseases = diseases.length > 0 ? diseases : [''];
            
            displayDiseases.forEach(disease => {
                const input = document.createElement('input');
                input.type = 'text';
                input.className = 'readonly-input';
                input.value = disease;
                input.readOnly = true;
                container.appendChild(input);
            });
        }

        function collectData() {

            // 获取模型选择
            const modelSelect = document.getElementById('modelSelect');
            const selectedOption = modelSelect.options[modelSelect.selectedIndex];

            // 获取RAG开关状态
            const enableRAG = document.getElementById('ragToggle').checked;
            
            // 新增按钮状态修改代码（开始）
            const diagnosisBtn = document.querySelector('.diagnosis-btn');
            diagnosisBtn.disabled = true;
            diagnosisBtn.style.backgroundColor = '#cccccc';

            if (enableRAG) {
                diagnosisBtn.textContent = '正在检索知识库...';
            } else {
                diagnosisBtn.textContent = '正在诊断...';
            }

            // 清空现有内容
            updateDiseases([]);
            const analysesTextarea = document.getElementById('analyses');
            analysesTextarea.value = ''; 

            // 收集表单数据
            const formData = {
                    setting: {
                        provider: selectedOption.dataset.provider,
                        model: selectedOption.dataset.model,
                        useRag: enableRAG
                    },
                    condition: {} 
                };
            document.querySelectorAll('.left-panel input, .left-panel textarea, .left-panel select').forEach(input => {
                formData.condition[input.name] = input.value.trim();
            });

            // 标记是否已处理疾病数据
            let diseasesProcessed = false;

            fetch('https://api.zhangming.me/v1/ai/diagnose', {
                method: 'POST',
                headers: { 
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(formData)
            })
            .then(response => {
                const reader = response.body.getReader();
                const decoder = new TextDecoder();
                let buffer = '';

                function processChunk({ done, value }) {
                    if (done) return;

                    buffer += decoder.decode(value, { stream: true });
                    
                    // 修改点1：改为按 SSE 标准分割事件（双换行符）
                    while (buffer.indexOf('\n\n') > -1) {
                        const eventEnd = buffer.indexOf('\n\n');
                        const eventContent = buffer.slice(0, eventEnd);
                        buffer = buffer.slice(eventEnd + 2);

                        // 修改点2：处理可能的多行数据
                        eventContent.split('\n').forEach(line => {
                            if (line.startsWith('data:')) {
                                try {
                                    const jsonStr = line.slice(5).trim(); // 去掉"data:"前缀
                                    const data = JSON.parse(jsonStr);
                                    
                                    // 更换按钮文本
                                    if (enableRAG && diagnosisBtn.textContent != '正在诊断...') {
                                        diagnosisBtn.textContent = '正在诊断...';
                                    }

                                    // 保持原有的数据处理逻辑
                                    if (!diseasesProcessed && data.diseases) {
                                        updateDiseases(data.diseases);
                                        diseasesProcessed = true;
                                        if (data.reasons) {
                                            analysesTextarea.value += data.reasons.trimStart();
                                        }
                                    } else if (data.reasons) {
                                        analysesTextarea.value += data.reasons;
                                        // 新增滚动控制
                                        analysesTextarea.scrollTop = analysesTextarea.scrollHeight;
                                    }

                                } catch (e) {
                                    console.error('JSON parse error:', e);
                                }
                            }
                        });
                    }

                    return reader.read().then(processChunk);
                }

                return reader.read().then(processChunk);
            })
            .catch(err => console.error('Fetch Error:', err))
            .finally(() => {  // 新增恢复按钮状态代码
                diagnosisBtn.disabled = false;
                diagnosisBtn.textContent = '开始诊断';
                diagnosisBtn.style.backgroundColor = '#3498db';
            });
        }

        updateDiseases([]);

        // 添加模型选择变化监听
        document.getElementById('modelSelect').addEventListener('change', function() {
            const selectedOption = this.options[this.selectedIndex];
            const ragToggle = document.getElementById('ragToggle');
            const ragWarning = document.getElementById('ragDisabledWarning');
            
            // 检查是否禁用RAG
            const disableRAG = selectedOption.dataset.disableRag === 'true';
            
            if (disableRAG) {
                ragToggle.checked = false;  // 关闭开关
                ragToggle.disabled = true;  // 禁用开关
                ragWarning.style.display = 'block'; // 显示警告
            } else {
                ragToggle.disabled = false; // 启用开关
                ragWarning.style.display = 'none'; // 隐藏警告
            }
        });

        // 提示气泡处理
        document.addEventListener('DOMContentLoaded', function() {
            // 触发模型选择变化事件
            document.getElementById('modelSelect').dispatchEvent(new Event('change'));
    
            const tooltipTriggers = document.querySelectorAll('.tooltip-trigger');
            
            tooltipTriggers.forEach(trigger => {
                const tooltipText = trigger.getAttribute('data-tooltip');
                const tooltipContent = document.createElement('span');
                tooltipContent.className = 'tooltip-content';
                tooltipContent.textContent = tooltipText;
                trigger.appendChild(tooltipContent);
            });
        });
    </script>
</body>
</html>