<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Palette</title>
    <!-- 主题 -->
    <script src="/static/js/theme.js"></script>
    <!-- 配置 -->
    <script src="/static/js/tailwind.js"></script>
    <script>
    tailwind.config = {
        darkMode: 'class',
        theme: {
            extend: {}
        }
    }
    </script>
    <!-- 样式 -->
    <style type="text/tailwindcss">
        @layer components {
            .whitespace-pre-wrap {
                @apply text-slate-400 dark:text-slate-200;
            }

            /* 分隔线保持块级 */
            .whitespace-pre-wrap hr {
                @apply block my-4 border-t border-slate-200 dark:border-slate-700;
            }
        
            .whitespace-pre-wrap br{
                display: inline-block;
                margin-bottom: 0.5rem;
                margin-top: 0.5rem;
            }
            
            .whitespace-pre-wrap p {
                display: inline-block;
                margin-bottom: 0.5rem;
                margin-top: 0.5rem;
            }
        
            .whitespace-pre-wrap li {
                display: inline-block;
                margin-left: 1rem;
                margin-bottom: 0.5rem;
                margin-top: 0.5rem;
            }
        
            .whitespace-pre-wrap h1,
            .whitespace-pre-wrap h2,
            .whitespace-pre-wrap h3,
            .whitespace-pre-wrap h4,
            .whitespace-pre-wrap h5,
            .whitespace-pre-wrap h6 {
                display: inline-block;
            }
        
            .gradient-bg {
                @apply dark:bg-gradient-to-br dark:from-slate-900 dark:to-slate-800 bg-gradient-to-br from-slate-50 to-slate-100;
            }
            .floating-image {
                @apply fixed left-8 top-8 w-[320px] rounded-lg shadow-lg transition-transform duration-300
                       hover:shadow-xl z-50;
                filter: drop-shadow(0 4px 12px rgba(0, 120, 255, 0.2));
            }
            .floating-image:hover {
                @apply -translate-y-1 rotate-1;
                filter: drop-shadow(0 8px 16px rgba(0, 120, 255, 0.3));
            }
            .github-corner:hover .octo-arm {
                animation: octocat-wave 560ms ease-in-out;
            }
            @keyframes octocat-wave {
                0%, 100% { transform: rotate(0) }
                20%, 60% { transform: rotate(-25deg) }
                40%, 80% { transform: rotate(10deg) }
            }
            .input-base {
                @apply w-full rounded-lg border shadow-sm backdrop-blur-sm px-4 py-3
                       dark:border-gray-700/50 dark:bg-gray-800/50 dark:text-gray-100
                       border-gray-200 bg-white/90 text-gray-900
                       dark:hover:border-blue-400/40 dark:hover:bg-gray-800/70
                       hover:border-blue-400/40 hover:bg-white
                       dark:focus:border-blue-400 dark:focus:bg-gray-800/90 dark:focus:ring-2 dark:focus:ring-blue-500/20
                       focus:border-blue-400 focus:bg-white focus:ring-2 focus:ring-blue-500/20 focus:outline-none
                       transition-all duration-200;
            }
            .btn-primary {
                @apply w-full bg-gradient-to-r from-blue-500 to-blue-600
                       text-white py-3 px-4 rounded-lg font-medium
                       hover:opacity-90 active:opacity-80
                       transform active:scale-[0.99]
                       transition-all duration-200
                       shadow-sm hover:shadow-blue-500/10 focus:shadow-md focus:outline-none;
            }
            .label-text {
                @apply block text-sm font-medium mb-1.5
                       dark:text-gray-300 text-gray-700;
            }
            .response-box {
                @apply w-full rounded-lg p-4 min-h-[100px] whitespace-pre-wrap backdrop-blur-sm shadow-sm
                       dark:bg-gray-800/50 dark:border dark:border-gray-700/50 dark:text-gray-100
                       bg-white/90 border border-gray-200 text-gray-900;
            }
            select {
                @apply input-base appearance-none bg-no-repeat cursor-pointer pr-10;
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
                background-position: right 0.75rem center;
                background-size: 1.5em 1.5em;
            }
            input[type="checkbox"] {
                @apply w-5 h-5 rounded-md cursor-pointer transition-colors duration-200
                       focus:ring-0 focus:ring-offset-0
                       dark:border-gray-700 dark:bg-gray-800 dark:text-blue-500
                       border-gray-300 bg-white text-blue-500;
            }
            ::placeholder {
                @apply dark:text-gray-500 text-gray-400;
            }
            option {
                @apply dark:bg-gray-800 dark:text-gray-100 bg-white text-gray-900;
            }
            .reasoning-content {
                @apply overflow-hidden transition-all duration-300 ease-in-out;
            }
            .reasoning-arrow {
                @apply transform transition-transform duration-300 ease-in-out;
            }
            .breathing-button {
                @apply animate-pulse;
                animation: breathing 2s ease-in-out infinite;
            }
            
            @keyframes breathing {
                0% {
                    box-shadow: 0 0 0 0 rgba(147, 51, 234, 0.7);
                }
                70% {
                    box-shadow: 0 0 0 10px rgba(147, 51, 234, 0);
                }
                100% {
                    box-shadow: 0 0 0 0 rgba(147, 51, 234, 0);
                }
            }
        
            .thinking-label {
                @apply px-2 py-0.5;
                animation: thinkingBreathing 2s ease-in-out infinite;
            }
            
            @keyframes thinkingBreathing {
                0% {
                    color: rgb(244, 114, 182);
                    text-shadow: 0 0 5px rgba(244, 114, 182, 0.5);
                }
                50% {
                    color: rgb(236, 72, 153);
                    text-shadow: 0 0 10px rgba(236, 72, 153, 0.7);
                }
                100% {
                    color: rgb(244, 114, 182);
                    text-shadow: 0 0 5px rgba(244, 114, 182, 0.5);
                }
            }
        
            .thinking-label.thinking-done {
                @apply text-slate-400;
                animation: none;
                text-shadow: none;
            }
        
            .thinking-text {
                @apply text-slate-400;
            }
        
            .code-block {
                @apply font-mono text-sm whitespace-pre;
            }
            .code-block code {
                @apply dark:text-slate-300 text-slate-700 whitespace-pre;
            }
            .drawer-open {
                @apply pr-[600px] transition-all duration-300 ease-in-out;
            }
            
            input:checked + .toggle-label {
                @apply dark:bg-blue-600 bg-blue-600;
            }
            
            input:checked + .toggle-label .toggle-dot {
                transform: translateX(1.5rem);
            }
        }
    </style>

</head>
<body class="dark:bg-slate-900 dark:text-slate-200 bg-slate-50 text-slate-900">
    <!-- 欢迎模态框 -->
    <div id="welcomeModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 opacity-0 pointer-events-none transition-opacity duration-300">
        <div class="relative bg-white dark:bg-slate-800 rounded-xl max-w-lg w-full mx-4 p-6 shadow-xl transform transition-transform duration-300 scale-95">
            <div class="absolute top-4 right-4">
                <button onclick="closeWelcomeModal()" class="dark:text-slate-400 text-slate-500 dark:hover:text-slate-300 hover:text-slate-700">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none">
                        <path d="M18 6l-12 12"></path>
                        <path d="M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            <div class="space-y-4">
                <h2 class="text-2xl font-bold dark:text-white text-slate-900">欢迎使用 AI Palette! 🎨</h2>
                <div class="space-y-2">
                    <p class="dark:text-slate-300 text-slate-600">AI Palette 是一个统一的 AI 接口平台，支持多种平台：</p>
                    <ul class="list-disc pl-5 dark:text-slate-300 text-slate-600 space-y-1">
                        <li><span class="font-medium text-blue-500"><a href="https://cloud.siliconflow.cn/i/gQhQNfpv" target="_blank" class="text-blue-500 hover:text-blue-600">硅基流动</a></span> - 推荐！提供丰富的模型选择，响应速度快</li>
                        <li><span class="font-medium">Ollama</span> - 本地部署，无需 API Key</li>
                        <li><span class="font-medium">其他</span> - DeepSeek、OpenAI、智谱、千问等。</li>
                    </ul>
                </div>
                <div class="bg-slate-50 dark:bg-slate-700/50 rounded-lg p-4 space-y-2">
                    <p class="dark:text-slate-300 text-slate-600 font-medium">快速开始：</p>
                    <p class="dark:text-slate-400 text-slate-600">1. 选择平台（推荐使用硅基流动，免费用Qwen2.5）</p>
                    <p class="dark:text-slate-400 text-slate-600">2. 输入 API Key（<a href="https://cloud.siliconflow.cn/i/gQhQNfpv" target="_blank" class="text-blue-500 hover:text-blue-600">点击获取</a>）</p>
                    <p class="dark:text-slate-400 text-slate-600">3. 开始对话！</p>
                </div>
                <div class="bg-slate-50 dark:bg-slate-700/50 rounded-lg p-4">
                    <div class="flex items-center justify-between">
                        <div class="dark:text-slate-300 text-slate-600">
                            <p class="font-medium">有任何想法？</p>
                            <p class="text-sm mt-1">扫描二维码关注我们，获取帮助和更新！</p>
                        </div>
                        <img src="/static/image/qrcode.jpg" alt="Connect" class="w-24 h-24 rounded-lg dark:border-slate-600 border-slate-200 border">
                    </div>
                </div>
                <div class="flex justify-end pt-2">
                    <button onclick="closeWelcomeModal()" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-slate-800 focus:ring-offset-white">
                        开始使用
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 主容器 -->
    <div class="flex h-screen">
        <!-- 左侧设置面板 -->
        <div class="w-80 border-r dark:border-slate-700 border-slate-200 dark:bg-slate-800 bg-white p-6 flex flex-col">
            <div class="mb-6">
                <div class="flex items-center justify-between mb-2">
                    <h1 class="text-2xl font-bold dark:text-white text-slate-800">AI Palette 🎨</h1>
                    <div class="flex">
                        <div class="rounded-md border dark:border-slate-200/20 border-slate-200">
                            <div class="flex text-[10px] font-medium leading-4">
                                <button onclick="toggleTheme('dark')" class="theme-toggle dark-toggle flex w-auto gap-1 rounded-l-md px-2 py-1 focus:outline-none dark:text-slate-300 text-slate-500 dark:hover:bg-slate-700/50 hover:bg-slate-100">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="inline-flex h-3.5 w-3.5">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
                                    </svg>
                                </button>
                                <button onclick="toggleTheme('light')" class="theme-toggle light-toggle flex gap-1 rounded-r-md px-2 py-1 focus:outline-none dark:text-slate-300 text-slate-500 dark:hover:bg-slate-700/50 hover:bg-slate-100">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" class="inline-flex h-3.5 w-3.5" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <p class="dark:text-slate-400 text-slate-600 text-sm">统一 AI 接口，一个调用满足所有需求</p>
            </div>

            <!-- 模型设置 -->
            <div class="space-y-4 flex-1">
                <div>
                    <label class="block text-sm font-medium dark:text-slate-300 text-slate-600 mb-1">模型提供商</label>
                    <select id="modelType" onchange="handleModelTypeChange()" class="input-base">
                        <option value="siliconflow">硅基流动</option>
                        <option value="deepseek">DeepSeek</option>
                        <option value="ollama">Ollama</option>
                        <option value="openai">OpenAI</option>
                        <option value="zhipu">智谱AI</option>
                        <option value="dashscope">通义千问</option>
                        <option value="minimax">MiniMax</option>
                        <option value="ernie">百度文心</option>
                        <option value="volcengine">火山引擎</option>
                        <option value="dual_chain">双链推理</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-medium dark:text-slate-300 text-slate-600 mb-1">API Key</label>
                    <div class="relative">
                        <input type="password" id="apiKey" class="input-base" 
                            placeholder="输入你的 API Key"
                            onblur="handleApiKeyChange()">
                        <button onclick="toggleApiKeyVisibility()" class="absolute right-2 top-1/2 -translate-y-1/2 dark:text-slate-400 text-slate-500 dark:hover:text-slate-300 hover:text-slate-700">
                            <svg id="eyeIcon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none">
                                <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
                                <path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7"></path>
                            </svg>
                        </button>
                    </div>
                    <a id="apiKeyHelp" href="#" target="_blank" class="text-sm text-blue-500 hover:text-blue-600 mt-1 inline-block">
                        跳转官网获取 API Key
                    </a>
                </div>

                <div>
                    <label class="block text-sm font-medium dark:text-slate-300 text-slate-600 mb-1">模型名称</label>
                    <div class="relative">
                        <input 
                            type="text" 
                            id="model" 
                            class="input-base pr-20" 
                            placeholder="选择或输入模型名称"
                            oninput="filterModels(this.value)"
                            onclick="showModelDropdown()"
                            autocomplete="off"
                        >
                        <button 
                            onclick="refreshModels()"
                            type="button"
                            class="absolute right-2 top-1/2 -translate-y-1/2 dark:text-slate-400 text-slate-500 dark:hover:text-slate-300 hover:text-slate-700"
                        >
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none">
                                <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path>
                                <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path>
                            </svg>
                        </button>
                        <!-- 模型列表下拉框 -->
                        <div id="modelDropdown" class="hidden absolute left-0 right-0 z-50 mt-1 max-h-60 overflow-auto rounded-lg dark:bg-slate-700 bg-white dark:border-slate-600 border-slate-200 border shadow-lg">
                            <div id="modelList" class="py-1">
                                <!-- 模型选项将通过 JavaScript 动态添加 -->
                            </div>
                        </div>
                    </div>
                </div>

                <div class="space-y-3">
                    <!-- 添加配置双链推理按钮 -->
                    <div class="flex items-center justify-between dark:bg-slate-700/50 bg-slate-50 rounded-lg px-4 py-2">
                        <div class="flex items-center">
                            <label class="text-sm font-medium dark:text-slate-300 text-slate-600">配置双链推理</label>
                            <button onclick="showChainInfo()" class="ml-2 text-blue-500 hover:text-blue-600">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            </button>
                        </div>
                        <button onclick="toggleChainModal()" class="flex items-center justify-center space-x-2 px-3 py-1.5 rounded-lg dark:bg-slate-600 bg-slate-200 dark:text-slate-300 text-slate-600 hover:bg-slate-300 dark:hover:bg-slate-500 transition-colors duration-200">
                            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                            </svg>
                            <span>配置</span>
                        </button>
                    </div>

                    <div class="flex items-center justify-between dark:bg-slate-700/50 bg-slate-50 rounded-lg px-4 py-2">
                        <label for="enableStreaming" class="text-sm font-medium dark:text-slate-300 text-slate-600">启用流式输出</label>
                        <div class="relative inline-block w-12 h-6">
                            <input type="checkbox" id="enableStreaming" onchange="handleStreamingChange()" class="hidden">
                            <label for="enableStreaming" class="toggle-label block w-12 h-6 rounded-full dark:bg-slate-600 bg-slate-300 cursor-pointer relative transition-colors duration-300">
                                <span class="toggle-dot absolute top-1 left-1 bg-white w-4 h-4 rounded-full transition-transform duration-300 ease-in-out shadow-sm"></span>
                            </label>
                        </div>
                    </div>

                    <div class="flex items-center justify-between dark:bg-slate-700/50 bg-slate-50 rounded-lg px-4 py-2">
                        <label for="showCodeExamples" class="text-sm font-medium dark:text-slate-300 text-slate-600">显示调用代码示例</label>
                        <div class="relative inline-block w-12 h-6">
                            <input type="checkbox" id="showCodeExamples" onchange="toggleCodeDrawer()" class="hidden">
                            <label for="showCodeExamples" class="toggle-label block w-12 h-6 rounded-full dark:bg-slate-600 bg-slate-300 cursor-pointer relative transition-colors duration-300">
                                <span class="toggle-dot absolute top-1 left-1 bg-white w-4 h-4 rounded-full transition-transform duration-300 ease-in-out shadow-sm"></span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部链接 -->
            <div class="mt-auto space-y-4">
                <!-- 清除对话历史 -->
                <div>
                    <button onclick="clearAllMessages()" class="w-full flex items-center justify-center space-x-2 px-4 py-3 rounded-lg bg-red-500/10 dark:text-red-400 text-red-600 hover:bg-red-500/20 dark:hover:bg-red-500/20 transition-colors duration-200 border dark:border-red-900/50 border-red-200">
                        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>
                        <span class="text-base">清空对话历史</span>
                    </button>
                </div>

                <!-- GitHub 链接 -->
                <div class="text-center space-x-4">
                    <a href="https://github.com/itshen/ai_palette" class="inline-flex items-center gap-2 text-sm font-medium dark:text-slate-200 text-slate-600 hover:text-blue-500 transition-colors duration-200" target="_blank">
                        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0012 2z"/>
                        </svg>
                        GitHub 仓库
                    </a>
                    <a href="javascript:void(0)" onclick="showWelcomeModal()" class="inline-flex items-center gap-2 text-sm font-medium text-blue-500 hover:text-blue-600 transition-colors duration-200">
                        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-4l-4 4-4-4z" />
                        </svg>
                        意见反馈
                    </a>
                </div>
            </div>
        </div>

        <!-- 右侧对话界面 -->
        <div class="flex-1 flex flex-col relative transition-all duration-300" id="chatContainer">
            <!-- 双链推理配置模态框 -->
            <div id="chainModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 opacity-0 pointer-events-none transition-opacity duration-300">
                <div class="relative bg-white dark:bg-slate-800 rounded-xl w-[80vw] h-[80vh] mx-4 shadow-xl transform transition-transform duration-300 scale-95 flex flex-col">
                    <!-- 模态框头部 -->
                    <div class="absolute top-4 right-4">
                        <button onclick="toggleChainModal()" class="dark:text-slate-400 text-slate-500 dark:hover:text-slate-300 hover:text-slate-700">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none">
                                <path d="M18 6l-12 12"></path>
                                <path d="M6 6l12 12"></path>
                            </svg>
                        </button>
                    </div>

                    <!-- 模态框内容区域 -->
                    <div class="flex flex-1 p-6 gap-6 overflow-hidden">
                        <!-- 左侧列表 -->
                        <div class="w-1/4 flex flex-col dark:bg-slate-900 bg-slate-50 rounded-lg p-4">
                            <div class="flex items-center justify-between mb-4">
                                <h3 class="text-lg font-medium dark:text-slate-200 text-slate-900">推理链列表</h3>
                                <button onclick="addNewChain()" class="p-1.5 dark:hover:bg-slate-700 hover:bg-slate-200 rounded-lg dark:text-slate-400 text-slate-600" style="margin-right: 10px;">
                                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                                    </svg>
                                </button>
                            </div>
                            <div class="flex-1 overflow-y-auto">
                                <ul id="chainList" class="space-y-2">
                                    <!-- 列表项将通过 JavaScript 动态添加 -->
                                </ul>
                            </div>
                        </div>

                        <!-- 右侧编辑区域 -->
                        <div class="flex-1 flex flex-col ml-0"> 
                            <!-- 右侧顶部标题区域 -->
                            <div class="flex items-center justify-between mb-4">
                                <h2 id="chainTitle" class="text-xl font-medium dark:text-slate-200 text-slate-900 px-2 py-1 rounded cursor-pointer" ondblclick="makeEditable(this)">未选择推理链</h2>
                                <div class="flex gap-2 mr-8">
                                    <button onclick="importChain()" class="px-4 py-2 rounded-lg dark:bg-slate-700 bg-slate-100 dark:text-slate-300 text-slate-600 dark:hover:bg-slate-600 hover:bg-slate-200 transition-colors duration-200">
                                        导入
                                    </button>
                                    <button onclick="exportChain()" class="px-4 py-2 rounded-lg dark:bg-slate-700 bg-slate-100 dark:text-slate-300 text-slate-600 dark:hover:bg-slate-600 hover:bg-slate-200 transition-colors duration-200">
                                        导出
                                    </button>
                                </div>
                            </div>

                            <!-- 右侧内容区域 -->
                            <div class="flex-1 flex flex-col gap-4">
                                <!-- 思考 prompt -->
                                <div class="flex-1">
                                    <label class="block text-sm font-medium dark:text-slate-300 text-slate-600 mb-2">思考 Prompt</label>
                                    <p class="text-xs dark:text-slate-400 text-slate-500 mb-2">需要包含用户请求占位符 <a href="#" onclick="insertAtCursor('thinkingPrompt', '[$query$]'); return false;" class="text-blue-500 hover:text-blue-600">[$query$]</a></p>
                                    <!-- 思考 prompt 的模型配置 -->
                                    <div class="grid grid-cols-3 gap-2 mb-2">
                                        <div>
                                            <select id="thinkingModelType" class="input-base">
                                                <option value="siliconflow">硅基流动</option>
                                                <option value="deepseek">DeepSeek</option>
                                                <option value="ollama">Ollama</option>
                                                <option value="openai">OpenAI</option>
                                                <option value="zhipu">智谱AI</option>
                                                <option value="dashscope">通义千问</option>
                                                <option value="minimax">MiniMax</option>
                                                <option value="ernie">百度文心</option>
                                                <option value="volcengine">火山引擎</option>
                                            </select>
                                        </div>
                                        <div>
                                            <input type="text" id="thinkingModel" class="input-base" placeholder="模型名称">
                                        </div>
                                        <div>
                                            <input type="password" id="thinkingApiKey" class="input-base" placeholder="API Key">
                                        </div>
                                    </div>
                                    <textarea 
                                        id="thinkingPrompt" 
                                        class="w-full h-[calc(100%-6rem)] rounded-lg border shadow-sm px-4 py-3 dark:bg-slate-900 bg-slate-50 dark:text-slate-200 text-slate-900 dark:border-slate-700 border-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
                                        placeholder="输入思考过程的 prompt..."
                                        onblur="validateThinkingPrompt(this)"
                                    ></textarea>
                                </div>
                                <p> </p>

                                <!-- 结果 prompt -->
                                <div class="flex-1">
                                    <label class="block text-sm font-medium dark:text-slate-300 text-slate-600 mb-2">结果 Prompt</label>
                                    <p class="text-xs dark:text-slate-400 text-slate-500 mb-2">需要包含：思考占位符 <a href="#" onclick="insertAtCursor('resultPrompt', '[$thought$]'); return false;" class="text-blue-500 hover:text-blue-600">[$thought$]</a>、用户请求占位符 <a href="#" onclick="insertAtCursor('resultPrompt', '[$query$]'); return false;" class="text-blue-500 hover:text-blue-600">[$query$]</a></p>
                                    <!-- 结果 prompt 的模型配置 -->
                                    <div class="grid grid-cols-3 gap-2 mb-2">
                                        <div>
                                            <select id="resultModelType" class="input-base">
                                                <option value="siliconflow">硅基流动</option>
                                                <option value="deepseek">DeepSeek</option>
                                                <option value="ollama">Ollama</option>
                                                <option value="openai">OpenAI</option>
                                                <option value="zhipu">智谱AI</option>
                                                <option value="dashscope">通义千问</option>
                                                <option value="minimax">MiniMax</option>
                                                <option value="ernie">百度文心</option>
                                                <option value="volcengine">火山引擎</option>
                                            </select>
                                        </div>
                                        <div>
                                            <input type="text" id="resultModel" class="input-base" placeholder="模型名称">
                                        </div>
                                        <div>
                                            <input type="password" id="resultApiKey" class="input-base" placeholder="API Key">
                                        </div>
                                    </div>
                                    <textarea 
                                        id="resultPrompt" 
                                        class="w-full h-[calc(100%-6rem)] rounded-lg border shadow-sm px-4 py-3 dark:bg-slate-900 bg-slate-50 dark:text-slate-200 text-slate-900 dark:border-slate-700 border-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
                                        placeholder="输入生成结果的 prompt..."
                                        onblur="validateResultPrompt(this)"
                                    ></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 代码示例抽屉 -->
            <div id="codeDrawer" class="fixed right-0 top-0 h-full w-[600px] transform translate-x-full transition-all duration-300 ease-in-out bg-white dark:bg-slate-800 shadow-xl border-l dark:border-slate-700 border-slate-200 flex flex-col">
                <div class="flex items-center justify-between p-4 border-b dark:border-slate-700 border-slate-200">
                    <h3 class="text-lg font-medium dark:text-slate-200 text-slate-900">代码示例</h3>
                    <button onclick="toggleCodeDrawer()" class="dark:text-slate-400 text-slate-500 dark:hover:text-slate-300 hover:text-slate-700">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none">
                            <path d="M18 6l-12 12"></path>
                            <path d="M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
                <div class="flex-1 overflow-y-auto p-4">
                    <!-- 前端代码示例 -->
                    <div class="mb-8">
                        <h4 class="text-base font-medium dark:text-slate-200 text-slate-900 mb-4">前端调用示例</h4>
                        <div class="mb-4">
                            <select id="frontendCodeType" onchange="switchCodeExample('frontend')" class="input-base">
                                <option value="curl">cURL</option>
                                <option value="requests">Python 3.x - Requests</option>
                                <option value="fetch">JavaScript (Fetch)</option>
                                <option value="eventsource">JavaScript (EventSource)</option>
                            </select>
                        </div>

                        <div id="frontendExamples">
                            <!-- cURL -->
                            <div id="curlExample" class="code-example">
                                <div class="relative">
                                    <div class="absolute right-2 top-2">
                                        <button onclick="copyCode(this)" class="text-xs px-2 py-1 rounded dark:bg-slate-700 bg-slate-100 dark:text-slate-300 text-slate-600 dark:hover:bg-slate-600 hover:bg-slate-200">
                                            复制代码
                                        </button>
                                    </div>
                                    <pre class="code-block dark:bg-slate-900 bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto">
<code class="language-bash">curl -X POST http://localhost:18000/api/chat \\
-H "Content-Type: application/json" \\
-d '{
    "model_type": "[$MODEL_TYPE$]",  // 当前选择的模型类型
    "model": "[$MODEL$]",  // 当前选择的模型
    "api_key": "[$API_KEY$]",  // 当前输入的 API Key
    "prompt": "Your message here",
    "enable_streaming": [$STREAMING$]  // 是否启用流式输出
}'</code></pre>
                                </div>
                            </div>

                            <!-- Python Requests -->
                            <div id="requestsExample" class="code-example hidden">
                                <div class="relative">
                                    <div class="absolute right-2 top-2">
                                        <button onclick="copyCode(this)" class="text-xs px-2 py-1 rounded dark:bg-slate-700 bg-slate-100 dark:text-slate-300 text-slate-600 dark:hover:bg-slate-600 hover:bg-slate-200">
                                            复制代码
                                        </button>
                                    </div>
                                    <pre class="code-block dark:bg-slate-900 bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto">
<code class="language-python">import requests

response = requests.post(
    'http://localhost:18000/api/chat',
    json={
        'model_type': "[$MODEL_TYPE$]",  # 当前选择的模型类型
        'model': "[$MODEL$]",  # 当前选择的模型
        'api_key': "[$API_KEY$]",  # 当前输入的 API Key
        'prompt': 'Your message here',
        'enable_streaming': True if '[$STREAMING$]' == 'true' else False  # 是否启用流式输出
    }
)

print(response.json()['response'])</code></pre>
                                </div>
                            </div>
                            
                            <!-- JavaScript (Fetch) -->
                            <div id="fetchExample" class="code-example hidden">
                                <div class="relative">
                                    <div class="absolute right-2 top-2">
                                        <button onclick="copyCode(this)" class="text-xs px-2 py-1 rounded dark:bg-slate-700 bg-slate-100 dark:text-slate-300 text-slate-600 dark:hover:bg-slate-600 hover:bg-slate-200">
                                            复制代码
                                        </button>
                                    </div>
                                    <pre class="code-block dark:bg-slate-900 bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto">
<code class="language-javascript">const response = await fetch('/api/chat', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        model_type: "[$MODEL_TYPE$]",  // 当前选择的模型类型
        model: "[$MODEL$]",  // 当前选择的模型
        api_key: "[$API_KEY$]",  // 当前输入的 API Key
        prompt: 'Your message here',
        enable_streaming: True if '[$STREAMING$]' == 'true' else False  // 是否启用流式输出
    })
});

const data = await response.json();
console.log(data.response);</code></pre>
                                </div>
                            </div>
                            
                            <!-- JavaScript (EventSource) -->
                            <div id="eventsourceExample" class="code-example hidden">
                                <div class="relative">
                                    <div class="absolute right-2 top-2">
                                        <button onclick="copyCode(this)" class="text-xs px-2 py-1 rounded dark:bg-slate-700 bg-slate-100 dark:text-slate-300 text-slate-600 dark:hover:bg-slate-600 hover:bg-slate-200">
                                            复制代码
                                        </button>
                                    </div>
                                    <pre class="code-block dark:bg-slate-900 bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto">
<code class="language-javascript">const params = new URLSearchParams({
    model_type: "[$MODEL_TYPE$]",  // 当前选择的模型类型
    model: "[$MODEL$]",  // 当前选择的模型
    api_key: "[$API_KEY$]",  // 当前输入的 API Key
    prompt: 'Your message here',
    enable_streaming: true  // 流式输出始终启用
});

const eventSource = new EventSource(\`/api/chat?\${params}\`);

eventSource.onmessage = (event) => {
    const data = JSON.parse(event.data);
    console.log(data.content);
};

eventSource.onerror = () => {
    eventSource.close();
};</code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 后端代码示例 -->
                    <div>
                        <h4 class="text-base font-medium dark:text-slate-200 text-slate-900 mb-4">后端调用示例</h4>
                        <div class="relative">
                            <div class="absolute right-2 top-2">
                                <button onclick="copyCode(this)" class="text-xs px-2 py-1 rounded dark:bg-slate-700 bg-slate-100 dark:text-slate-300 text-slate-600 dark:hover:bg-slate-600 hover:bg-slate-200">
                                    复制代码
                                </button>
                            </div>
                            <pre class="code-block dark:bg-slate-900 bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto">
<code class="language-python">from ai_palette import AIChat

# 初始化聊天实例
chat = AIChat(
    provider="[$MODEL_TYPE$]",  # 当前选择的模型类型
    model="[$MODEL$]",  # 当前选择的模型
    api_key="[$API_KEY$]",  # 当前输入的 API Key
    enable_streaming=True if '[$STREAMING$]' == 'true' else False  # 是否启用流式输出
)

# 发送消息
response = chat.ask("Your message here")
print(response)

# 流式输出
for chunk in chat.ask("Your message here"):
    print(chunk["content"], end="", flush=True)</code></pre>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 消息列表 -->
            <div class="flex-1 overflow-y-auto p-4" id="messageList">
                <!-- 对话建议 -->
                <div id="suggestionBox" class="mb-4">
                    <div class="flex flex-wrap gap-2 text-xs">
                        <button onclick="usePromptAndSend(this)" class="rounded-lg dark:bg-slate-800 bg-white px-3 py-1.5 dark:hover:bg-blue-600 hover:bg-blue-50 dark:hover:text-slate-200 hover:text-blue-600 dark:text-slate-300 text-slate-600 dark:border-slate-700 border-slate-200 border">
                            帮我制定一份一周健康饮食计划
                        </button>
                        <button onclick="usePromptAndSend(this)" class="rounded-lg dark:bg-slate-800 bg-white px-3 py-1.5 dark:hover:bg-blue-600 hover:bg-blue-50 dark:hover:text-slate-200 hover:text-blue-600 dark:text-slate-300 text-slate-600 dark:border-slate-700 border-slate-200 border">
                            如何缓解工作压力和情绪
                        </button>
                        <button onclick="usePromptAndSend(this)" class="rounded-lg dark:bg-slate-800 bg-white px-3 py-1.5 dark:hover:bg-blue-600 hover:bg-blue-50 dark:hover:text-slate-200 hover:text-blue-600 dark:text-slate-300 text-slate-600 dark:border-slate-700 border-slate-200 border">
                            推荐一些室内植物养护小技巧
                        </button>
                        <button onclick="usePromptAndSend(this)" class="rounded-lg dark:bg-slate-800 bg-white px-3 py-1.5 dark:hover:bg-blue-600 hover:bg-blue-50 dark:hover:text-slate-200 hover:text-blue-600 dark:text-slate-300 text-slate-600 dark:border-slate-700 border-slate-200 border">
                            分享一些提高睡眠质量的方法
                        </button>
                        <button onclick="usePromptAndSend(this)" class="rounded-lg dark:bg-slate-800 bg-white px-3 py-1.5 dark:hover:bg-blue-600 hover:bg-blue-50 dark:hover:text-slate-200 hover:text-blue-600 dark:text-slate-300 text-slate-600 dark:border-slate-700 border-slate-200 border">
                            推荐几道简单美味的家常菜
                        </button>
                        <button onclick="usePromptAndSend(this)" class="rounded-lg dark:bg-slate-800 bg-white px-3 py-1.5 dark:hover:bg-blue-600 hover:bg-blue-50 dark:hover:text-slate-200 hover:text-blue-600 dark:text-slate-300 text-slate-600 dark:border-slate-700 border-slate-200 border">
                            如何整理和收纳小户型空间
                        </button>
                        <button onclick="usePromptAndSend(this)" class="rounded-lg dark:bg-slate-800 bg-white px-3 py-1.5 dark:hover:bg-blue-600 hover:bg-blue-50 dark:hover:text-slate-200 hover:text-blue-600 dark:text-slate-300 text-slate-600 dark:border-slate-700 border-slate-200 border">
                            分享一些省钱小妙招
                        </button>
                    </div>
                </div>
            </div>

            <!-- 输入框 -->
            <div class="p-4 border-t dark:border-slate-700 border-slate-200">
                <form onsubmit="sendMessage(); return false;">
                    <div class="relative">
                        <textarea 
                            id="prompt" 
                            class="input-base pr-24 resize-none"
                            rows="3"
                            placeholder="输入你想问的问题..."
                        ></textarea>
                        <button 
                            type="submit"
                            class="absolute bottom-3 right-3 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-slate-800 focus:ring-offset-white"
                        >
                            发送
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- 推理链说明模态框 -->
    <div id="chainInfoModal" class="fixed inset-0 hidden z-50">
        <!-- 毛玻璃背景 -->
        <div class="absolute inset-0 bg-black/20 backdrop-blur-sm transition-opacity duration-300 opacity-0"></div>
        
        <!-- 模态框内容 -->
        <div class="relative min-h-screen flex items-center justify-center p-4">
            <div class="relative w-full max-w-3xl transform transition-all duration-300 scale-95 opacity-0">
                <div class="relative bg-white/80 dark:bg-slate-800/80 backdrop-blur-md rounded-2xl shadow-xl">
                    <div class="p-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-xl font-semibold dark:text-slate-200">推理链功能说明</h3>
                            <button onclick="hideChainInfo()" class="text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                </svg>
                            </button>
                        </div>
                        
                        <div class="space-y-4 dark:text-slate-300 max-h-[calc(100vh-12rem)] overflow-y-auto">
                            <p class="text-base">推理链是一个强大的功能，它允许你使用两个模型进行两阶段推理：一个用于深度思考，一个用于生成最终结果。这对于需要复杂推理的任务特别有用。</p>
                            
                            <div class="bg-slate-100 dark:bg-slate-700 p-4 rounded-lg">
                                <h4 class="font-semibold mb-2">实际案例</h4>
                                <div class="space-y-4">
                                    <div>
                                        <p class="font-medium">案例1：数学问题分析</p>
                                        <p class="text-sm mt-1">思考prompt：</p>
                                        <pre class="text-sm bg-slate-200 dark:bg-slate-600 p-2 rounded mt-1">让我们一步步分析这个数学问题：[$query$]。请列出解题思路和关键步骤。</pre>
                                        <p class="text-sm mt-1">结果prompt：</p>
                                        <pre class="text-sm bg-slate-200 dark:bg-slate-600 p-2 rounded mt-1">基于以下解题思路：[$thought$]，请用通俗易懂的语言回答问题：[$query$]</pre>
                                    </div>
                                    
                                    <div>
                                        <p class="font-medium">案例2：代码优化建议</p>
                                        <p class="text-sm mt-1">思考prompt：</p>
                                        <pre class="text-sm bg-slate-200 dark:bg-slate-600 p-2 rounded mt-1">分析这段代码：[$query$]。请从性能、可读性、安全性等方面进行深入思考，找出可能的优化点。</pre>
                                        <p class="text-sm mt-1">结果prompt：</p>
                                        <pre class="text-sm bg-slate-200 dark:bg-slate-600 p-2 rounded mt-1">基于以下分析：[$thought$]，我将为代码：[$query$] 提供具体的优化建议和改进代码。</pre>
                                    </div>
                                    
                                    <div>
                                        <p class="font-medium">案例3：文章改写</p>
                                        <p class="text-sm mt-1">思考prompt：</p>
                                        <pre class="text-sm bg-slate-200 dark:bg-slate-600 p-2 rounded mt-1">分析这段文字：[$query$]。请从内容结构、用词用语、表达方式等方面进行思考，找出可以改进的地方。</pre>
                                        <p class="text-sm mt-1">结果prompt：</p>
                                        <pre class="text-sm bg-slate-200 dark:bg-slate-600 p-2 rounded mt-1">根据以下分析：[$thought$]，我将对文章：[$query$] 进行重写和优化。</pre>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mt-4">
                                <h4 class="font-semibold mb-2">使用提示</h4>
                                <ul class="list-disc list-inside space-y-2">
                                    <li>在思考prompt中使用 <code class="bg-slate-200 dark:bg-slate-600/80 px-1 rounded">[$query$]</code> 引用用户输入</li>
                                    <li>在结果prompt中使用 <code class="bg-slate-200 dark:bg-slate-600/80 px-1 rounded">[$thought$]</code> 引用思考结果</li>
                                    <li>可以为两个阶段配置不同的模型，例如使用更强大的模型进行思考</li>
                                    <li>建议在思考prompt中加入具体的思考方向和步骤指导</li>
                                    <li>结果prompt应该明确如何利用思考结果生成最终答案</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/js/app.js"></script>
</body>
</html> 