Spaces:

alexchenc10
/

aicomp_demo

Running

File size: 32,332 Bytes

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>糖尿病诊断系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstati    // --- 核心修复：页面状态切换逻辑 ---
    // 修复Jinja2模板语法与JavaScript解析器的冲突
    const hasResult = {% if has_result %}true{% else %}false{% endif %};
    if (hasResult) {
        uploadSection.hidden = true;
        resultSection.hidden = false;
    } else {
        uploadSection.hidden = false;
        resultSection.hidden = true;
    }sorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/tsparticles@2.12.0/tsparticles.bundle.min.js"></script>
    
    <style>
        :root {
            /* 浅色模式变量 */
            --bg-image: url('https://images.unsplash.com/photo-1544197150-b99a580bb7a8?q=80&w=2070&auto=format&fit=crop');
            --panel-bg: rgba(255, 255, 255, 0.9);
            --border-color: rgba(0, 0, 0, 0.1);
            --primary-text: #2d3748;
            --secondary-text: #718096;
            --accent-color: #667eea;
            --accent-gradient: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
            --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
            --border-radius: 1rem;
            --bg-overlay: rgba(255, 255, 255, 0.1);
            --card-bg: rgba(255, 255, 255, 0.8);
            --chat-user-bg: #667eea;
            --chat-assistant-bg: rgba(0, 0, 0, 0.05);
            --input-bg: rgba(255, 255, 255, 0.8);
            --hover-bg: rgba(0, 0, 0, 0.05);
        }

        /* 深色模式变量 */
        [data-theme="dark"] {
            --bg-image: url('https://images.unsplash.com/photo-1554141316-1282c0a97c92?q=80&w=2070&auto=format&fit=crop');
            --panel-bg: rgba(30, 30, 45, 0.9);
            --border-color: rgba(255, 255, 255, 0.2);
            --primary-text: #f0f2f5;
            --secondary-text: #a8b2d1;
            --accent-color: #928CEE;
            --accent-gradient: linear-gradient(90deg, #928CEE 0%, #a29dff 100%);
            --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
            --bg-overlay: rgba(10, 10, 20, 0.5);
            --card-bg: rgba(0, 0, 0, 0.2);
            --chat-user-bg: #928CEE;
            --chat-assistant-bg: rgba(0, 0, 0, 0.3);
            --input-bg: rgba(0, 0, 0, 0.2);
            --hover-bg: rgba(255, 255, 255, 0.1);
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }

        html { height: 100%; }

        body {
            height: 100%;
            font-family: 'Noto Sans SC', sans-serif;
            background-color: var(--primary-text);
            color: var(--primary-text);
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        [data-theme="dark"] body {
            background-color: #111118;
        }
        
        body::before {
            content: '';
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background-image: var(--bg-image);
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            z-index: -2;
        }
        body::after {
            content: '';
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background-color: rgba(10, 10, 20, 0.5);
            z-index: -2;
        }
        
        #tsparticles {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            z-index: -1;
        }

        .main-container {
            display: flex;
            height: 100vh;
            padding: 1rem;
            gap: 1.5rem;
        }

        .panel {
            background: var(--panel-bg);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: all 0.3s ease;
            padding: 1.5rem;
        }
        
        .panel ::-webkit-scrollbar { width: 6px; }
        .panel ::-webkit-scrollbar-track { background: transparent; }
        .panel ::-webkit-scrollbar-thumb { background-color: rgba(146, 140, 238, 0.5); border-radius: 10px; }
        .panel ::-webkit-scrollbar-thumb:hover { background-color: rgba(146, 140, 238, 0.8); }

        .left-panel { flex: 1.2; }
        .right-panel { flex: 1; padding: 0; }

        h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: 0.5rem; }
        .subtitle { font-size: 0.95rem; color: var(--secondary-text); margin-bottom: 1.5rem; }
        
        .uploader-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            border: 2px dashed var(--border-color);
            border-radius: 0.75rem;
            padding: 2rem 1.5rem;
            cursor: pointer;
            transition: background-color 0.2s, border-color 0.2s;
            background-color: var(--card-bg);
            position: relative; /* 为内部input定位做准备 */
            overflow: hidden; /* 隐藏任何可能溢出的子元素 */
        }
        .uploader-container:hover {
            background-color: var(--hover-bg);
            border-color: var(--accent-color);
        }
        .uploader-container input[type="file"] {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0; /* 完全透明 */
            cursor: pointer;
        }
        .uploader-icon { font-size: 3rem; color: var(--accent-color); margin-bottom: 1rem; }
        .uploader-text { font-size: 1.125rem; font-weight: 500; margin-bottom: 0.5rem; }
        .uploader-hint { color: var(--secondary-text); }

        .example-selector { margin-top: 1.5rem !important; }

        .submit-btn, .reset-btn, .example-btn, .home-btn {
            width: 100%;
            padding: 0.875rem;
            margin-top: 1.25rem;
            border: none;
            border-radius: 0.5rem;
            color: white;
            font-size: 1rem;
            font-weight: 500;
            background: var(--accent-gradient);
            cursor: pointer;
            transition: all 0.2s ease;
            transform: scale(1);
        }
        .submit-btn:hover, .reset-btn:hover, .example-btn:hover, .home-btn:hover {
            opacity: 0.9;
            transform: scale(1.02);
        }
        .home-btn {
            background: transparent !important;
            color: var(--primary-text) !important;
            border: 1px solid var(--border-color) !important;
        }
        .home-btn:hover { background: var(--hover-bg) !important; }

        .upload-section, .result-wrapper {
            display: flex;
            flex-direction: column;
            height: 100%;
            animation: fadeIn 0.5s ease;
        }

        /* 核心修复: 确保 hidden 属性能够强制隐藏元素 */
        [hidden] {
            display: none !important;
        }

        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        .result-content { flex-grow: 1; overflow-y: auto; padding-right: 15px; }

        .image-preview { 
            width: 100%;
            max-height: 300px;
            object-fit: contain;
            border-radius: 0.75rem; 
            margin-bottom: 1.5rem; 
            border: 1px solid var(--border-color); 
            background-color: var(--card-bg);
        }
        
        .result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
        .result-card { background-color: var(--card-bg); border: 1px solid var(--border-color); padding: 1rem; border-radius: 0.625rem; }
        .result-card .label { font-size: 0.875rem; color: var(--secondary-text); margin-bottom: 0.5rem; }
        .result-card .value { font-size: 1.375rem; font-weight: 700; color: var(--accent-color); }
        .ai-advice h3 { font-size: 1.125rem; margin-bottom: 0.75rem; }
        .ai-advice-content { background-color: var(--card-bg); border: 1px solid var(--border-color); padding: 1rem; border-radius: 0.625rem; color: var(--secondary-text); font-size: 0.9375rem; line-height: 1.7; white-space: pre-line; }

        .chat-header { padding: 1.5rem; font-size: 1.25rem; font-weight: 700; border-bottom: 1px solid var(--border-color); }
        .chat-history { flex-grow: 1; padding: 1.5rem; overflow-y: auto; }
        .chat-message { max-width: 85%; padding: 0.75rem 1rem; border-radius: 0.75rem; margin-bottom: 1rem; line-height: 1.6; animation: fadeIn 0.3s; }
        .chat-message.user { background: var(--chat-user-bg); color: white; margin-left: auto; border-bottom-right-radius: 2px; }
        .chat-message.assistant { background: var(--chat-assistant-bg); color: var(--primary-text); margin-right: auto; border-bottom-left-radius: 2px; }
        .chat-message.assistant p { margin-bottom: 0.5em; }
        .chat-message.assistant ul, .chat-message.assistant ol { padding-left: 20px; }
        .chat-message.assistant li { margin-bottom: 0.2em; }
        .chat-input-area { padding: 1rem 1.5rem; border-top: 1px solid var(--border-color); background-color: var(--card-bg); }
        .chat-input-wrapper { display: flex; align-items: center; gap: 0.75rem; background-color: var(--input-bg); border: 1px solid var(--border-color); border-radius: 0.625rem; padding: 0.375rem; transition: border-color 0.2s; }
        .chat-input-wrapper:focus-within { border-color: var(--accent-color); }
        #ai-user-input { flex-grow: 1; border: none; outline: none; padding: 0.625rem; font-size: 0.9375rem; background: transparent; color: var(--primary-text); }
        #send-to-ai { border: none; background: var(--accent-color); color: white; border-radius: 0.5rem; width: 2.5rem; height: 2.5rem; cursor: pointer; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s; }
        #send-to-ai:hover { opacity: 0.9; }

    @media (max-width: 900px) {
        body { overflow: auto; }
        .main-container { flex-direction: column; height: auto; padding: 1rem; gap: 1rem; }
        
        /* 移动端性能优化 */
        .uploader-container {
            padding: 1.5rem 1rem;
        }
        
        .image-preview {
            max-height: 250px;
        }
        
        .loading-content {
            padding: 1.5rem;
            margin: 1rem;
        }
        
        /* 减少动画复杂度以提高性能 */
        .loading-spinner {
            width: 1.5rem;
            height: 1.5rem;
        }
        
        /* 优化触摸交互 */
        .submit-btn, .reset-btn, .example-btn, .home-btn {
            min-height: 44px; /* iOS推荐的最小触摸目标 */
            font-size: 1.1rem;
        }
    }

    /* 低性能设备优化 */
    @media (max-width: 600px) {
        /* 减少粒子效果 */
        #tsparticles {
            display: none;
        }
        
        /* 简化背景 */
        body::before {
            background-size: cover;
            filter: blur(2px);
        }
        
        /* 减少动画 */
        .submit-btn:hover, .reset-btn:hover, .example-btn:hover, .home-btn:hover {
            transform: none;
            opacity: 0.9;
        }
    }        /* 主题切换按钮样式 */
        .theme-toggle {
            position: fixed;
            top: 1rem;
            right: 1rem;
            z-index: 1000;
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-radius: 50%;
            width: 3rem;
            height: 3rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            transition: all 0.3s ease;
            box-shadow: var(--shadow);
        }

        .theme-toggle:hover {
            transform: scale(1.1);
            background: var(--hover-bg);
        }

        .theme-toggle::before {
            content: '🌙';
        }

        [data-theme="dark"] .theme-toggle::before {
            content: '☀️';
        }

        /* 简单加载动画 */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease;
        }

        .loading-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        .loading-content {
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-radius: 1rem;
            padding: 2rem;
            text-align: center;
            box-shadow: var(--shadow);
        }

        .loading-spinner {
            width: 2rem;
            height: 2rem;
            border: 2px solid var(--border-color);
            border-top: 2px solid var(--accent-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 1rem;
        }

        .loading-text {
            color: var(--primary-text);
            font-size: 1rem;
            font-weight: 500;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>

{% set has_result = (result is defined and result) or (error is defined and error) %}
<body>

<!-- 简单加载遮罩 -->
<div class="loading-overlay" id="loading-overlay">
    <div class="loading-content">
        <div class="loading-spinner"></div>
        <div class="loading-text">正在分析您的眼底照片，请稍候...</div>
    </div>
</div>

<div id="tsparticles"></div>

<!-- 主题切换按钮 -->
<button class="theme-toggle" id="theme-toggle" title="切换主题"></button>

<div class="main-container">
    <div class="panel left-panel">
        <div class="upload-section" id="upload-section">
            <h1>糖尿病视网膜病变智能诊断</h1>
            <p class="subtitle">上传眼底照片，即刻获取AI分析报告与健康建议。</p>
            <form action="/predict" method="post" enctype="multipart/form-data" id="upload-form">
                <label for="file-upload" class="uploader-container">
                    <div class="uploader-icon">📤</div>
                    <div class="uploader-text" id="uploader-text">点击或拖拽上传眼底照片</div>
                    <div class="uploader-hint">支持 PNG, JPG, JPEG 格式</div>
                </label>
                <input id="file-upload" type="file" name="file" accept="image/*" required>
                <button class="submit-btn" type="submit">开始诊断</button>
            </form>

            <div class="example-selector" style="margin-top: 2rem;">
                <h3 style="font-size: 1.125rem; margin-bottom: 1rem; color: var(--primary-text);">或选择示例照片进行演示</h3>
                <select id="example-select" style="width: 100%; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.9375rem; background: var(--input-bg); color: var(--primary-text);">
                    <option value="">请选择示例照片</option>
                </select>
                <button id="load-example" class="submit-btn" style="margin-top:0;">加载并诊断示例照片</button>
            </div>
        </div>

        <div class="result-wrapper" id="result-section">
            <div class="result-content">
                {% if result and img_path %}
                <img src="{{ img_path }}" alt="上传图片预览" class="image-preview">
                {% endif %}

                {% if result %}
                <div class="result-grid">
                    <div class="result-card">
                        <div class="label">分级结果</div>
                        <div class="value">{{ result.grading }} <span style="font-size: 0.8rem; color: var(--secondary-text); font-weight: normal;">（级别越高代表糖尿病越严重，共有0-4级）</span></div>
                    </div>
                    <div class="result-card">
                        <div class="label">糖尿病风险</div>
                        <div class="value">{{ result.diabetic }}</div>
                    </div>
                </div>
                {% endif %}
                
                {% if result and result.ai_advice %}
                <div class="ai-advice">
                    <h3>AI 健康建议</h3>
                    <div class="ai-advice-content" id="ai-advice-text">{{ result.ai_advice }}</div>
                </div>
                {% endif %}

                {% if error %}
                <div class="ai-advice" style="margin-top: 24px;">
                    <h3 style="color: #ff8a8a;">诊断出错</h3>
                    <div class="ai-advice-content" style="border-color: #ff8a8a; background-color: rgba(220, 38, 38, 0.2); color: #f0f2f5;">
                        {{ error }}
                    </div>
                </div>
                {% endif %}
            </div>
            
            <div class="action-buttons" style="display: flex; gap: 0.75rem; margin-top: 1.5rem; justify-content: center; flex-wrap: wrap;">
                <button class="reset-btn" id="reset-btn" style="flex: 1; min-width: 150px; max-width: 200px;">上传新图片</button>
                <button class="example-btn" id="example-btn" style="flex: 1; min-width: 150px; max-width: 200px;">选择其他示例</button>
                <button class="home-btn" id="home-btn" style="flex: 1; min-width: 150px; max-width: 200px;">回到起始界面</button>
            </div>
        </div>
    </div>

    <div class="panel right-panel">
        <div class="chat-header">AI 健康助手</div>
        <div class="chat-history" id="chat-history">
            <div class="chat-message assistant">
                你好！我是您的AI健康助手。完成诊断后，您可以在此基于报告向我提问。
            </div>
        </div>
        <div class="chat-input-area">
            <div class="chat-input-wrapper">
                <input id="ai-user-input" type="text" placeholder="基于诊断结果进一步提问...">
                <button id="send-to-ai" title="发送">➔</button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // --- 主题切换功能 ---
    const themeToggle = document.getElementById('theme-toggle');
    const html = document.documentElement;

    // 从localStorage获取保存的主题
    const savedTheme = localStorage.getItem('theme') || 'light';
    if (savedTheme === 'dark') {
        html.setAttribute('data-theme', 'dark');
    }

    // 主题切换事件
    themeToggle.addEventListener('click', () => {
        const currentTheme = html.getAttribute('data-theme');
        if (currentTheme === 'dark') {
            html.removeAttribute('data-theme');
            localStorage.setItem('theme', 'light');
        } else {
            html.setAttribute('data-theme', 'dark');
            localStorage.setItem('theme', 'dark');
        }
    });

    const uploadSection = document.getElementById('upload-section');
    const resultSection = document.getElementById('result-section');
    const fileInput = document.getElementById('file-upload');
    const uploaderText = document.getElementById('uploader-text');
    const exampleSelect = document.getElementById('example-select');
    const loadExampleBtn = document.getElementById('load-example');
    const resetBtn = document.getElementById('reset-btn');
    const homeBtn = document.getElementById('home-btn');
    const exampleBtn = document.getElementById('example-btn');
    const loadingOverlay = document.getElementById('loading-overlay');

    // 显示加载动画
    function showLoading() {
        loadingOverlay.classList.add('show');
    }

    // 隐藏加载动画
    function hideLoading() {
        loadingOverlay.classList.remove('show');
    }

    // 表单提交时显示加载动画
    document.getElementById('upload-form').addEventListener('submit', function() {
        showLoading();
    });

    if (resetBtn) resetBtn.addEventListener('click', () => window.location.href = '/');
    if (homeBtn) homeBtn.addEventListener('click', () => window.location.href = '/');
    if (exampleBtn) exampleBtn.addEventListener('click', () => {
        resultSection.hidden = true;
        uploadSection.hidden = false;
        fileInput.value = '';
        uploaderText.textContent = '点击或拖拽上传眼底照片';
        exampleSelect.value = '';
    });

    // --- 核心修复：页面状态切换逻辑 ---
    // 使用DOM元素检查来避免Jinja2模板语法解析错误
    const resultCards = document.querySelectorAll('.result-card');
    const hasResult = resultCards.length > 0 || document.querySelector('.ai-advice') !== null;
    if (hasResult) {
        uploadSection.hidden = true;
        resultSection.hidden = false;
        // 如果页面已经有结果，隐藏加载动画
        hideLoading();
    } else {
        uploadSection.hidden = false;
        resultSection.hidden = true;
    }

    async function loadExamples() {
        try {
            const response = await fetch('/get_examples');
            const data = await response.json();
            data.examples.forEach(example => {
                const option = document.createElement('option');
                option.value = example;
                option.textContent = example;
                exampleSelect.appendChild(option);
            });
        } catch (error) {
            console.error('Failed to load examples:', error);
        }
    }
    loadExamples();
    
    loadExampleBtn.addEventListener('click', async () => {
        const selectedExample = exampleSelect.value;
        if (!selectedExample) {
            alert('请先选择一个示例照片');
            return;
        }
        try {
            showLoading();
            const response = await fetch("/examples/" + selectedExample);
            const blob = await response.blob();
            const file = new File([blob], selectedExample, { type: blob.type });
            const dt = new DataTransfer();
            dt.items.add(file);
            fileInput.files = dt.files;
            uploaderText.textContent = selectedExample;
            document.getElementById('upload-form').submit();
        } catch (error) {
            console.error('Failed to load example:', error);
            hideLoading();
            alert('加载示例照片失败，请检查网络或文件是否存在');
        }
    });

    // 图像压缩函数
    function compressImage(file, maxWidth = 1024, quality = 0.8) {
        return new Promise((resolve) => {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            const img = new Image();

            img.onload = () => {
                // 计算压缩后的尺寸
                let { width, height } = img;
                if (width > maxWidth) {
                    height = (height * maxWidth) / width;
                    width = maxWidth;
                }

                canvas.width = width;
                canvas.height = height;

                // 绘制并压缩
                ctx.drawImage(img, 0, 0, width, height);

                canvas.toBlob(resolve, 'image/jpeg', quality);
            };

            img.src = URL.createObjectURL(file);
        });
    }

    // 文件选择处理
    fileInput.addEventListener('change', async () => {
        const file = fileInput.files[0];
        if (file) {
            try {
                // 显示加载动画
                showLoading();

                // 压缩图像
                const compressedBlob = await compressImage(file);

                // 创建新的File对象
                const compressedFile = new File([compressedBlob], file.name, {
                    type: 'image/jpeg',
                    lastModified: Date.now()
                });

                // 更新file input
                const dt = new DataTransfer();
                dt.items.add(compressedFile);
                fileInput.files = dt.files;

                uploaderText.textContent = `已压缩: ${file.name} (${(compressedBlob.size / 1024).toFixed(1)}KB)`;

                // 隐藏加载动画
                hideLoading();
            } catch (error) {
                console.error('图像压缩失败:', error);
                uploaderText.textContent = file.name;
                hideLoading();
            }
        } else {
            uploaderText.textContent = '点击或拖拽上传眼底照片';
        }
    });

    const adviceTextElement = document.getElementById('ai-advice-text');
    const userInput = document.getElementById('ai-user-input');
    const sendBtn = document.getElementById('send-to-ai');
    const chatHistory = document.getElementById('chat-history');
    let conversationHistory = [];
    
    if (adviceTextElement && adviceTextElement.textContent.trim().length > 0) {
        const initialAdvice = adviceTextElement.textContent.trim();
        chatHistory.innerHTML = '';
        const systemPrompt = `你是一位专业的医疗健康顾问。以下是用户通过眼底照片AI诊断系统得到的初步结果和建议，请基于此信息，用专业、严谨且易于理解的语言回答用户的后续提问。诊断报告：

${initialAdvice}`;
        conversationHistory.push({ role: 'system', content: systemPrompt });
        const grading = "{{ result.grading if result and result.grading else 'N/A' }}";
        const diabetic = "{{ result.diabetic if result and result.diabetic else 'N/A' }}";
        const summaryContent = `我已收到您的诊断报告，摘要如下：

* **分级结果**: ${grading}
* **糖尿病风险**: ${diabetic}

您可以就此报告向我提问了。`;
        addMessageToChat('assistant', summaryContent);
    }

    // 简单的缓存机制
    const responseCache = new Map();
    const CACHE_DURATION = 5 * 60 * 1000; // 5分钟缓存

    function getCachedResponse(key) {
        const cached = responseCache.get(key);
        if (cached && Date.now() - cached.timestamp < CACHE_DURATION) {
            return cached.data;
        }
        return null;
    }

    function setCachedResponse(key, data) {
        responseCache.set(key, {
            data: data,
            timestamp: Date.now()
        });
    }

    async function callLargeModelAPI(messages) {
        // 创建缓存键
        const cacheKey = JSON.stringify(messages);

        // 检查缓存
        const cachedResponse = getCachedResponse(cacheKey);
        if (cachedResponse) {
            return cachedResponse;
        }

        try {
            const response = await fetch('/chat', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ messages: messages })
            });
            if (!response.ok) {
                const errorData = await response.json();
                return "抱歉，AI助手服务暂时出现问题。错误: " + (errorData.error || response.statusText);
            }
            const data = await response.json();
            const content = data.content || 'AI助手暂时无法回复。';

            // 缓存响应
            setCachedResponse(cacheKey, content);

            return content;
        } catch (error) {
            console.error('API call failed:', error);
            return '抱歉，无法连接到AI助手服务，请检查网络连接或联系管理员。';
        }
    }
    
    function addMessageToChat(role, content) {
        const messageElement = document.createElement('div');
        messageElement.classList.add('chat-message', role);
        if (typeof marked !== 'undefined' && marked.parse) {
            messageElement.innerHTML = marked.parse(content);
        } else {
            messageElement.textContent = content;
        }
        chatHistory.appendChild(messageElement);
        chatHistory.scrollTop = chatHistory.scrollHeight;
    }

    async function handleSendMessage() {
        const userQuery = userInput.value.trim();
        if (!userQuery) return;
        addMessageToChat('user', userQuery);
        conversationHistory.push({ role: 'user', content: userQuery });
        userInput.value = '';
        const thinkingElement = document.createElement('div');
        thinkingElement.classList.add('chat-message', 'assistant');
        thinkingElement.innerHTML = "AI助手正在思考中...";
        chatHistory.appendChild(thinkingElement);
        chatHistory.scrollTop = chatHistory.scrollHeight;
        const aiResponse = await callLargeModelAPI(conversationHistory);
        if (typeof marked !== 'undefined' && marked.parse) {
            thinkingElement.innerHTML = marked.parse(aiResponse);
        } else {
            thinkingElement.textContent = aiResponse;
        }
        conversationHistory.push({ role: 'assistant', content: aiResponse });
    }

    sendBtn.addEventListener('click', handleSendMessage);
    userInput.addEventListener('keydown', (event) => {
        if (event.key === 'Enter' && !event.shiftKey) {
            event.preventDefault();
            handleSendMessage();
        }
    });
});
</script>

<script>
    if (typeof tsParticles !== 'undefined' && tsParticles.load) {
        tsParticles.load("tsparticles", {
            fpsLimit: 120,
            interactivity: {
                events: {
                    onHover: {
                        enable: true,
                        mode: "grab" // 核心改动：将交互模式设置为 "grab"
                    },
                    onClick: {
                        enable: true,
                        mode: "push"
                    },
                    resize: true
                },
                modes: {
                    grab: {
                        distance: 200, // 鼠标与粒子产生连线的最大距离
                        links: {
                            opacity: 0.8,
                            color: "#ffffff" // 连线的颜色
                        }
                    },
                    push: {
                        quantity: 4
                    },
                    // 保留 repulse 配置，方便未来可能切换回去
                    repulse: {
                        distance: 100,
                        duration: 0.4
                    }
                }
            },
        particles: {
            color: { value: "#ffffff" },
            links: { color: "#ffffff", distance: 150, enable: true, opacity: 0.2, width: 1 },
            collisions: { enable: true },
            move: { direction: "none", enable: true, outModes: { default: "bounce" }, random: false, speed: 1, straight: false },
            number: { density: { enable: true, area: 800 }, value: 80 },
            opacity: { value: 0.3 },
            shape: { type: "circle" },
            size: { value: { min: 1, max: 3 } },
        },
            detectRetina: true,
        });
    } else {
        console.warn('tsParticles library not loaded, particle effects will be disabled.');
    }
</script>

</body>
</html>