1. 我的模型页面修改

web/pages/main.html

@@ -443,7 +443,7 @@
                 columns: [
                     { title: '模型名称', key: 'name' },
                     { title: '训练方法', key: 'train_methods', render: (val) => val && val[0] ? val[0].name : '-' },
-                    { title: '模型路径', key: 'path', render: (val) => `<span class="text-xs text-gray-500 truncate max-w-xs block" title="${val}">${val}</span>` },
+                    { title: '基座模型', key: 'base_model_path', render: (val) => `<span class="text-xs text-gray-500 truncate block" title="${val}">${val || '-'}</span>` },
                     { title: '创建时间', key: 'create_time', render: (val) => val ? new Date(val).toLocaleString('zh-CN') : '-' }
                 ],
                 actions: ['view', 'delete']
@@ -3164,12 +3164,10 @@
             document.body.style.overflow = '';
         }
 
-        // 查看已训练模型详情
+        // 查看已训练模型详情 - 跳转到推理页面
         window.viewTrainedModel = function(name, method, path) {
-            const message = '<p class="mb-2">模型名称：' + name + '</p>' +
+            // 跳转到推理测试页面（main.html在pages目录下，所以直接用文件名）
-                           '<p class="mb-2">训练方法：' + method + '</p>' +
+            window.location.href = `model-inference.html?model=${encodeURIComponent(name)}&method=${encodeURIComponent(method)}`;
-                           '<p class="text-sm text-gray-500 break-all">路径：' + path + '</p>';
-            showMessage('模型详情', message, 'info');
         };
 
         // 确认弹窗（两个按钮）- 使用 window 确保全局可访问

web/pages/model-compare-create.html

@@ -316,14 +316,46 @@
         // 加载模型列表
         async function loadModels() {
             try {
-                const response = await fetch(`${API_BASE}/model-manage`);
+                // 并行加载数据库模型和已训练模型
-                const result = await response.json();
+                const [dbResponse, trainedResponse] = await Promise.all([
-                if (result.code === 0) {
+                    fetch(`${API_BASE}/model-manage`),
-                    allModels = result.data || [];
+                    fetch(`${API_BASE}/model-manage/trained-models`)
-                    renderModels();
+                ]);
-                } else {
+
-                    showMessage('错误', result.message || '加载模型失败', 'error');
+                const dbResult = await dbResponse.json();
+                const trainedResult = await trainedResponse.json();
+
+                let dbModels = [];
+                let trainedModels = [];
+
+                // 数据库模型
+                if (dbResult.code === 0) {
+                    dbModels = dbResult.data || [];
                 }
+
+                // 已训练模型
+                if (trainedResult.code === 0) {
+                    const trainedData = trainedResult.data?.models || [];
+                    trainedData.forEach(model => {
+                        if (model.train_methods && model.train_methods.length > 0) {
+                            model.train_methods.forEach(method => {
+                                trainedModels.push({
+                                    id: `trained_${model.name}_${method.name}`.replace(/[^a-zA-Z0-9]/g, '_'),
+                                    name: `${model.name} (${method.name})`,
+                                    type: 'LLM',
+                                    source: 'trained',
+                                    model_path: model.path,
+                                    train_method: method.name
+                                });
+                            });
+                        }
+                    });
+                }
+
+                // 合并所有模型
+                allModels = [...dbModels, ...trainedModels];
+                console.log('[DEBUG] 数据库模型:', dbModels.length, '已训练模型:', trainedModels.length);
+                renderModels();
             } catch (error) {
                 console.error('加载模型失败:', error);
                 document.getElementById('modelList').innerHTML = `
@@ -335,9 +367,14 @@
             }
         }
 
-        // 渲染模型列表
+        // 渲染模型列表 - 使用分栏显示数据库模型和已训练模型
         function renderModels() {
             const container = document.getElementById('modelList');
+
+            // 分离数据库模型和已训练模型
+            const dbModels = allModels.filter(m => m.source !== 'trained');
+            const trainedModels = allModels.filter(m => m.source === 'trained');
+
             if (allModels.length === 0) {
                 container.innerHTML = `
                     <div class="p-8 text-center text-gray-400">
@@ -348,42 +385,74 @@
                 return;
             }
 
-            container.innerHTML = allModels.map(model => {
+            let html = '';
-                const isSelected = selectedModels.has(model.id);
-                const isDisabled = !isSelected && selectedModels.size >= 4;
-                const typeText = {
-                    'LLM': '大语言模型',
-                    'CV': '计算机视觉',
-                    'NLP': '自然语言处理',
-                    'Embedding': '向量模型',
-                    'Other': '其他'
-                }[model.type] || model.type || '其他';
 
-                return `
+            // 数据库模型区域
-                    <div class="model-card border-b border-gray-100 last:border-b-0 p-4 cursor-pointer ${isSelected ? 'selected bg-blue-50/50' : ''} ${isDisabled ? 'disabled opacity-50' : ''} hover:bg-gray-50 transition-colors"
+            if (dbModels.length > 0) {
-                         onclick="toggleModel(${model.id})">
+                html += `
-                        <div class="flex items-center justify-between">
+                    <div class="border-b border-gray-200">
-                            <div class="flex items-center flex-1 min-w-0">
+                        <div class="px-4 py-2 bg-gray-50 text-xs font-medium text-gray-600 flex items-center">
-                                <div class="w-5 h-5 rounded-full border-2 ${isSelected ? 'border-primary bg-primary' : 'border-gray-300'} flex items-center justify-center mr-3 flex-shrink-0">
+                            <i class="fa fa-database mr-1"></i> 数据库模型 (${dbModels.length})
-                                    ${isSelected ? '<i class="fa fa-check text-white text-xs"></i>' : ''}
+                        </div>
-                                </div>
+                        <div class="divide-y divide-gray-100">
-                                <div class="min-w-0">
+                `;
-                                    <div class="flex items-center mb-1">
+                html += dbModels.map(model => renderModelCard(model)).join('');
-                                        <span class="font-medium text-gray-800 truncate">${model.name}</span>
+                html += '</div>';
-                                        <span class="ml-2 px-2 py-0.5 bg-blue-100 text-blue-700 text-xs rounded flex-shrink-0">${typeText}</span>
+            }
-                                    </div>
+
-                                    <p class="text-sm text-gray-500 truncate">${model.description || '暂无描述'}</p>
+            // 已训练模型区域
-                                </div>
+            if (trainedModels.length > 0) {
+                html += `
+                    <div class="border-b border-gray-200">
+                        <div class="px-4 py-2 bg-green-50 text-xs font-medium text-green-700 flex items-center">
+                            <i class="fa fa-check-circle mr-1"></i> 已训练模型 (${trainedModels.length})
+                        </div>
+                        <div class="divide-y divide-gray-100">
+                `;
+                html += trainedModels.map(model => renderModelCard(model)).join('');
+                html += '</div>';
+            }
+
+            container.innerHTML = html;
+            updateSelectedCount();
+        }
+
+        // 渲染单个模型卡片
+        function renderModelCard(model) {
+            const isSelected = selectedModels.has(model.id);
+            const isDisabled = !isSelected && selectedModels.size >= 4;
+            const typeText = {
+                'LLM': '大语言模型',
+                'CV': '计算机视觉',
+                'NLP': '自然语言处理',
+                'Embedding': '向量模型',
+                'Other': '其他'
+            }[model.type] || model.type || '其他';
+            // 处理字符串类型的ID
+            const modelId = typeof model.id === 'string' ? `'${model.id.replace(/'/g, "\\'")}'` : model.id;
+
+            return `
+                <div class="model-card border-b border-gray-100 last:border-b-0 p-4 cursor-pointer ${isSelected ? 'selected bg-blue-50/50' : ''} ${isDisabled ? 'disabled opacity-50' : ''} hover:bg-gray-50 transition-colors"
+                     onclick="toggleModel(${modelId})">
+                    <div class="flex items-center justify-between">
+                        <div class="flex items-center flex-1 min-w-0">
+                            <div class="w-5 h-5 rounded-full border-2 ${isSelected ? 'border-primary bg-primary' : 'border-gray-300'} flex items-center justify-center mr-3 flex-shrink-0">
+                                ${isSelected ? '<i class="fa fa-check text-white text-xs"></i>' : ''}
                             </div>
-                            <div class="ml-4 text-xs text-gray-400 flex-shrink-0">
+                            <div class="min-w-0">
-                                ${model.model_source === 'local' ? '本地模型' : '在线模型'}
+                                <div class="flex items-center mb-1">
+                                    <span class="font-medium text-gray-800 truncate">${model.name}</span>
+                                    <span class="ml-2 px-2 py-0.5 bg-blue-100 text-blue-700 text-xs rounded flex-shrink-0">${typeText}</span>
+                                </div>
+                                <p class="text-sm text-gray-500 truncate">${model.description || '暂无描述'}</p>
                             </div>
                         </div>
+                        <div class="ml-4 text-xs text-gray-400 flex-shrink-0">
+                            ${model.source === 'trained' || model.model_source === 'local' ? '本地模型' : '在线模型'}
+                        </div>
                     </div>
-                `;
+                </div>
-            }).join('');
+            `;
-
-            updateSelectedCount();
         }
 
         // 切换模型选择
@@ -399,6 +468,11 @@
             renderModels();
         }
 
+        // 暴露到全局作用域供 onclick 调用
+        window.toggleModel = toggleModel;
+        window.goBack = goBack;
+        window.submitForm = submitForm;
+
         // 筛选模型
         function filterModels(keyword) {
             const filtered = allModels.filter(model => {
@@ -411,7 +485,7 @@
             renderFilteredModels(filtered);
         }
 
-        // 渲染筛选后的模型列表
+        // 渲染筛选后的模型列表 - 使用分栏显示
         function renderFilteredModels(models) {
             const container = document.getElementById('modelList');
             if (models.length === 0) {
@@ -424,40 +498,39 @@
                 return;
             }
 
-            container.innerHTML = models.map(model => {
+            // 分离数据库模型和已训练模型
-                const isSelected = selectedModels.has(model.id);
+            const dbModels = models.filter(m => m.source !== 'trained');
-                const isDisabled = !isSelected && selectedModels.size >= 4;
+            const trainedModels = models.filter(m => m.source === 'trained');
-                const typeText = {
-                    'LLM': '大语言模型',
-                    'CV': '计算机视觉',
-                    'NLP': '自然语言处理',
-                    'Embedding': '向量模型',
-                    'Other': '其他'
-                }[model.type] || model.type || '其他';
 
-                return `
+            let html = '';
-                    <div class="model-card border-b border-gray-100 last:border-b-0 p-4 cursor-pointer ${isSelected ? 'selected bg-blue-50/50' : ''} ${isDisabled ? 'disabled opacity-50' : ''} hover:bg-gray-50 transition-colors"
+
-                         onclick="toggleModel(${model.id})">
+            // 数据库模型区域
-                        <div class="flex items-center justify-between">
+            if (dbModels.length > 0) {
-                            <div class="flex items-center flex-1 min-w-0">
+                html += `
-                                <div class="w-5 h-5 rounded-full border-2 ${isSelected ? 'border-primary bg-primary' : 'border-gray-300'} flex items-center justify-center mr-3 flex-shrink-0">
+                    <div class="border-b border-gray-200">
-                                    ${isSelected ? '<i class="fa fa-check text-white text-xs"></i>' : ''}
+                        <div class="px-4 py-2 bg-gray-50 text-xs font-medium text-gray-600 flex items-center">
-                                </div>
+                            <i class="fa fa-database mr-1"></i> 数据库模型 (${dbModels.length})
-                                <div class="min-w-0">
-                                    <div class="flex items-center mb-1">
-                                        <span class="font-medium text-gray-800 truncate">${model.name}</span>
-                                        <span class="ml-2 px-2 py-0.5 bg-blue-100 text-blue-700 text-xs rounded flex-shrink-0">${typeText}</span>
-                                    </div>
-                                    <p class="text-sm text-gray-500 truncate">${model.description || '暂无描述'}</p>
-                                </div>
-                            </div>
-                            <div class="ml-4 text-xs text-gray-400 flex-shrink-0">
-                                ${model.model_source === 'local' ? '本地模型' : '在线模型'}
-                            </div>
                         </div>
-                    </div>
+                        <div class="divide-y divide-gray-100">
                 `;
-            }).join('');
+                html += dbModels.map(model => renderModelCard(model)).join('');
+                html += '</div>';
+            }
+
+            // 已训练模型区域
+            if (trainedModels.length > 0) {
+                html += `
+                    <div class="border-b border-gray-200">
+                        <div class="px-4 py-2 bg-green-50 text-xs font-medium text-green-700 flex items-center">
+                            <i class="fa fa-check-circle mr-1"></i> 已训练模型 (${trainedModels.length})
+                        </div>
+                        <div class="divide-y divide-gray-100">
+                `;
+                html += trainedModels.map(model => renderModelCard(model)).join('');
+                html += '</div>';
+            }
+
+            container.innerHTML = html;
         }
 
         // 更新已选数量

web/pages/model-inference.html

@@ -0,0 +1,522 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>模型推理 - 远光软件微调平台</title>
+    <script src="../lib/tailwindcss/tailwind.js"></script>
+    <script>
+        if (typeof console !== 'undefined' && console.warn) {
+            const originalWarn = console.warn;
+            console.warn = function(...args) {
+                if (args[0] && args[0].includes && args[0].includes('cdn.tailwindcss.com')) {
+                    return;
+                }
+                originalWarn.apply(console, args);
+            };
+        }
+    </script>
+    <link href="../lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
+    <style>
+        :root { --primary: #1890ff; --danger: #f5222d; --success: #52c41a; }
+        .sidebar-section-title {
+            padding: 0.5rem 1rem;
+            font-size: 0.75rem;
+            color: rgba(191, 203, 217, 0.7);
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+        .nav-link:hover { background-color: rgba(0, 21, 41, 0.2); }
+        .sidebar-item-active {
+            background-color: rgba(24, 144, 255, 0.1);
+            color: #1890ff;
+            border-left: 4px solid #1890ff;
+        }
+        /* 侧边栏滑块动画 */
+        .sidebar-slider {
+            position: absolute;
+            width: 4px;
+            height: 0;
+            background-color: #1890ff;
+            border-radius: 0 2px 2px 0;
+            transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+                        height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            pointer-events: none;
+            z-index: 10;
+        }
+        .nav-item-wrapper {
+            position: relative;
+        }
+        .nav-link {
+            position: relative;
+            z-index: 1;
+        }
+        .chat-message { animation: fadeIn 0.3s ease; }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+        .typing-indicator span {
+            display: inline-block;
+            width: 6px;
+            height: 6px;
+            background-color: #1890ff;
+            border-radius: 50%;
+            margin: 0 2px;
+            animation: typing 1.4s infinite ease-in-out;
+        }
+        .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
+        .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
+        @keyframes typing { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } }
+        .bg-primary { background-color: #1890ff; }
+        .text-primary { color: #1890ff; }
+        .border-primary { border-color: #1890ff; }
+    </style>
+</head>
+<body class="antialiased bg-gray-100 flex h-screen overflow-hidden">
+    <!-- 侧边导航 -->
+    <aside class="w-64 text-[#bfcbd9] flex-shrink-0 hidden md:block flex flex-col h-full" style="background-color: #001529;">
+        <!-- 平台LOGO区域 -->
+        <div class="pt-5 pb-3 border-b border-[#001529]/30 flex items-center justify-center pl-2">
+            <img src="../assets/logo/logo.png" alt="Logo" class="w-8 h-8 object-contain mr-2">
+            <span class="text-white font-medium text-base">远光软件微调平台</span>
+        </div>
+
+        <!-- 导航主区域 -->
+        <nav class="flex-1 overflow-y-auto py-2 relative">
+            <!-- 滑块指示器 -->
+            <div class="sidebar-slider" id="sidebar-slider"></div>
+
+            <!-- 第一分区：模型服务 -->
+            <div class="sidebar-section-title">模型服务</div>
+            <div class="nav-item-wrapper">
+                <a href="#" data-page="fine-tune" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
+                    <i class="fa fa-cogs w-5 text-center"></i>
+                    <span class="ml-2">模型调优</span>
+                </a>
+            </div>
+            <div class="nav-item-wrapper">
+                <a href="main.html?page=my-models" data-page="my-models" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
+                    <i class="fa fa-database w-5 text-center"></i>
+                    <span class="ml-2">我的模型</span>
+                </a>
+            </div>
+            <div class="nav-item-wrapper">
+                <a href="#" data-page="model-eval" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
+                    <i class="fa fa-line-chart w-5 text-center"></i>
+                    <span class="ml-2">模型评测</span>
+                </a>
+            </div>
+            <div class="nav-item-wrapper">
+                <a href="#" data-page="model-compare" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
+                    <i class="fa fa-server w-5 text-center"></i>
+                    <span class="ml-2">模型对比</span>
+                </a>
+            </div>
+
+            <!-- 第二分区：资源管理 -->
+            <div class="sidebar-section-title mt-6">资源管理</div>
+            <div class="nav-item-wrapper">
+                <a href="#" data-page="model-manage" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
+                    <i class="fa fa-cube w-5 text-center"></i>
+                    <span class="ml-2">模型管理</span>
+                </a>
+            </div>
+            <div class="nav-item-wrapper">
+                <a href="#" data-page="dataset-manage" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
+                    <i class="fa fa-file-text w-5 text-center"></i>
+                    <span class="ml-2">数据集管理</span>
+                </a>
+            </div>
+            <div class="nav-item-wrapper">
+                <a href="#" data-page="data-generate" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
+                    <i class="fa fa-database w-5 text-center"></i>
+                    <span class="ml-2">其他工具</span>
+                </a>
+            </div>
+
+            <!-- 第三分区：系统设置 -->
+            <div class="sidebar-section-title mt-6">系统设置</div>
+            <div class="nav-item-wrapper">
+                <a href="#" data-page="config" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
+                    <i class="fa fa-bar-chart w-5 text-center"></i>
+                    <span class="ml-2">平台性能</span>
+                </a>
+            </div>
+            <div class="nav-item-wrapper">
+                <a href="main.html?page=logs" data-page="logs" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
+                    <i class="fa fa-file-text w-5 text-center"></i>
+                    <span class="ml-2">查看日志</span>
+                </a>
+            </div>
+        </nav>
+
+        <div class="p-4 border-t border-[#001529]/30 text-xs mt-auto">
+            <div class="mb-2 text-[#bfcbd9]/80">默认业务空间</div>
+            <div class="flex items-center justify-between">
+                <span class="text-[#bfcbd9]">版本 v1.0.0</span>
+            </div>
+        </div>
+    </aside>
+
+    <!-- 主内容区 -->
+    <div class="flex-1 flex flex-col overflow-hidden">
+        <!-- 顶部导航 -->
+        <header class="bg-white border-b border-gray-200 shadow-sm">
+            <div class="flex items-center justify-between px-6 h-14">
+                <div class="flex items-center space-x-4">
+                    <a href="main.html?page=my-models" class="text-gray-500 hover:text-gray-700 flex items-center">
+                        <i class="fa fa-arrow-left"></i>
+                        <span class="ml-1">返回我的模型</span>
+                    </a>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <div class="flex items-center text-sm text-gray-600">
+                        <i class="fa fa-cube text-primary mr-2"></i>
+                        <span id="modelTitle">加载中...</span>
+                    </div>
+                </div>
+            </div>
+        </header>
+
+        <!-- 对话区域 -->
+        <main class="flex-1 flex flex-col overflow-hidden bg-gray-50">
+            <!-- 模型信息栏 -->
+            <div class="bg-white border-b border-gray-200 px-6 py-3 flex items-center justify-between">
+                <div class="flex items-center space-x-6">
+                    <div class="flex items-center">
+                        <span class="text-xs text-gray-400 mr-2">训练方法:</span>
+                        <span id="trainMethod" class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded">-</span>
+                    </div>
+                    <div class="flex items-center">
+                        <span class="text-xs text-gray-400 mr-2">基座模型:</span>
+                        <span id="baseModel" class="text-sm text-gray-700">-</span>
+                    </div>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <div class="flex items-center">
+                        <label class="text-xs text-gray-400 mr-2">Temperature:</label>
+                        <input type="range" id="temperature" min="0" max="1" step="0.1" value="0.7" class="w-24">
+                        <span id="temperatureValue" class="ml-2 text-sm text-gray-600">0.7</span>
+                    </div>
+                    <button onclick="clearChat()" class="text-xs text-gray-500 hover:text-gray-700">
+                        <i class="fa fa-trash-o mr-1"></i>清空对话
+                    </button>
+                </div>
+            </div>
+
+            <!-- 聊天消息区域 -->
+            <div id="chatContainer" class="flex-1 overflow-y-auto p-6 space-y-4">
+                <!-- 欢迎消息 -->
+                <div class="chat-message flex justify-start">
+                    <div class="max-w-3xl bg-white rounded-lg shadow-sm p-4 border border-gray-200">
+                        <div class="flex items-start">
+                            <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
+                                <i class="fa fa-robot text-white text-sm"></i>
+                            </div>
+                            <div class="ml-3">
+                                <div class="text-xs text-gray-400 mb-1">AI 助手</div>
+                                <div class="text-sm text-gray-700 leading-relaxed">
+                                    您好！我是基于该模型训练的AI助手。请在下方输入您的问题，我会尽力为您解答。
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 输入区域 -->
+            <div class="bg-white border-t border-gray-200 p-4">
+                <div class="max-w-4xl mx-auto">
+                    <div class="flex items-stretch gap-3">
+                        <div class="flex-1">
+                            <textarea id="userInput" placeholder="请输入您的问题..." rows="2"
+                                class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:border-primary focus:outline-none resize-none text-sm h-full"
+                                onkeydown="if(event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); sendMessage(); }"></textarea>
+                        </div>
+                        <button onclick="sendMessage()" id="sendBtn"
+                            class="px-5 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors flex items-center justify-center h-auto self-center">
+                            <i class="fa fa-paper-plane mr-1.5"></i>
+                            <span>发送</span>
+                        </button>
+                    </div>
+                    <div class="mt-2 text-xs text-gray-400 flex items-center">
+                        <i class="fa fa-info-circle mr-1"></i>
+                        按 Enter 发送，Shift+Enter 换行
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <script>
+        // API 基础地址
+        const getApiBase = () => {
+            const protocol = window.location.protocol;
+            const hostname = window.location.hostname;
+            return `${protocol}//${hostname}:7861/api`;
+        };
+        const API_BASE = typeof window.API_BASE !== 'undefined' ? window.API_BASE : getApiBase();
+
+        // 全局状态
+        let currentModel = {
+            name: '',
+            trainMethod: '',
+            baseModel: ''
+        };
+        let chatHistory = [];
+        let isLoading = false;
+
+        // 页面初始化
+        document.addEventListener('DOMContentLoaded', function() {
+            // 解析URL参数
+            const urlParams = new URLSearchParams(window.location.search);
+            const modelName = urlParams.get('model');
+            const trainMethod = urlParams.get('method');
+
+            if (modelName) {
+                currentModel.name = decodeURIComponent(modelName);
+                document.getElementById('modelTitle').textContent = currentModel.name;
+            }
+
+            if (trainMethod) {
+                currentModel.trainMethod = decodeURIComponent(trainMethod);
+                const methodDisplay = {
+                    'lora': 'LoRA',
+                    'full': '全参微调',
+                    'sft': 'SFT',
+                    'dpo': 'DPO',
+                    'cpt': 'CPT'
+                };
+                document.getElementById('trainMethod').textContent = methodDisplay[currentModel.trainMethod] || currentModel.trainMethod;
+            }
+
+            // 绑定侧边栏导航点击事件
+            document.querySelectorAll('.nav-link').forEach(link => {
+                link.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    const page = this.dataset.page;
+                    if (page === 'logs') {
+                        window.location.href = `main.html?page=${page}`;
+                    } else if (page) {
+                        window.location.href = `main.html?page=${page}`;
+                    }
+                });
+                if (link.dataset.page === 'my-models') {
+                    link.classList.add('sidebar-item-active');
+                    link.classList.remove('hover:bg-[#001529]/20');
+                }
+            });
+            updateSidebarSlider();
+
+            // 绑定温度滑块
+            const tempSlider = document.getElementById('temperature');
+            const tempValue = document.getElementById('temperatureValue');
+            tempSlider.addEventListener('input', function() {
+                tempValue.textContent = this.value;
+            });
+
+            // 聚焦输入框
+            document.getElementById('userInput').focus();
+
+            console.log('[DEBUG] 模型推理页面初始化:', currentModel);
+        });
+
+        // 发送消息
+        async function sendMessage() {
+            const input = document.getElementById('userInput');
+            const message = input.value.trim();
+
+            if (!message) return;
+            if (isLoading) return;
+            if (!currentModel.name) {
+                alert('请先选择模型');
+                return;
+            }
+
+            // 添加用户消息
+            addMessage('user', message);
+            chatHistory.push({ role: 'user', content: message });
+
+            // 清空输入框
+            input.value = '';
+
+            // 显示加载状态
+            isLoading = true;
+            updateSendButton(true);
+
+            // 添加AI加载提示
+            const loadingId = addLoadingMessage();
+
+            try {
+                const response = await fetch(`${API_BASE}/model-chat/trained`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        model_name: currentModel.name,
+                        train_method: currentModel.trainMethod || 'lora',
+                        system_prompt: '',
+                        user_question: message,
+                        temperature: parseFloat(document.getElementById('temperature').value),
+                        max_tokens: 2048
+                    })
+                });
+
+                const result = await response.json();
+
+                // 移除加载提示
+                removeLoadingMessage(loadingId);
+
+                if (result.code === 0) {
+                    const aiResponse = result.data?.response || '（无回复）';
+                    addMessage('assistant', aiResponse);
+                    chatHistory.push({ role: 'assistant', content: aiResponse });
+                } else {
+                    addMessage('assistant', `推理失败: ${result.message || '未知错误'}`);
+                }
+            } catch (error) {
+                removeLoadingMessage(loadingId);
+                addMessage('assistant', `请求异常: ${error.message}`);
+            } finally {
+                isLoading = false;
+                updateSendButton(false);
+            }
+        }
+
+        // 添加消息到聊天框
+        function addMessage(role, content) {
+            const container = document.getElementById('chatContainer');
+            const isUser = role === 'user';
+
+            const messageDiv = document.createElement('div');
+            messageDiv.className = 'chat-message flex justify-' + (isUser ? 'end' : 'start');
+
+            const avatar = isUser
+                ? `<div class="w-8 h-8 rounded-full bg-gray-400 flex items-center justify-center flex-shrink-0">
+                     <i class="fa fa-user text-white text-sm"></i>
+                   </div>`
+                : `<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
+                     <i class="fa fa-robot text-white text-sm"></i>
+                   </div>`;
+
+            const bgClass = isUser ? 'bg-primary text-white' : 'bg-white border border-gray-200';
+
+            messageDiv.innerHTML = `
+                <div class="max-w-3xl ${bgClass} rounded-lg shadow-sm p-4">
+                    <div class="flex items-start ${isUser ? 'flex-row-reverse' : ''}">
+                        ${avatar}
+                        <div class="ml-3 ${isUser ? 'text-right' : ''} flex-1">
+                            <div class="text-xs ${isUser ? 'text-gray-300' : 'text-gray-400'} mb-1">
+                                ${isUser ? '你' : 'AI 助手'}
+                            </div>
+                            <div class="text-sm leading-relaxed whitespace-pre-wrap">${escapeHtml(content)}</div>
+                        </div>
+                    </div>
+                </div>
+            `;
+
+            container.appendChild(messageDiv);
+            container.scrollTop = container.scrollHeight;
+        }
+
+        // 添加加载中的消息
+        function addLoadingMessage() {
+            const container = document.getElementById('chatContainer');
+            const loadingId = 'loading-' + Date.now();
+
+            const loadingDiv = document.createElement('div');
+            loadingDiv.id = loadingId;
+            loadingDiv.className = 'chat-message flex justify-start';
+
+            loadingDiv.innerHTML = `
+                <div class="max-w-3xl bg-white rounded-lg shadow-sm p-4 border border-gray-200">
+                    <div class="flex items-start">
+                        <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
+                            <i class="fa fa-robot text-white text-sm"></i>
+                        </div>
+                        <div class="ml-3">
+                            <div class="text-xs text-gray-400 mb-1">AI 助手</div>
+                            <div class="typing-indicator">
+                                <span></span><span></span><span></span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+
+            container.appendChild(loadingDiv);
+            container.scrollTop = container.scrollHeight;
+
+            return loadingId;
+        }
+
+        // 移除加载消息
+        function removeLoadingMessage(id) {
+            const loadingDiv = document.getElementById(id);
+            if (loadingDiv) {
+                loadingDiv.remove();
+            }
+        }
+
+        // 更新发送按钮状态
+        function updateSendButton(loading) {
+            const btn = document.getElementById('sendBtn');
+            if (loading) {
+                btn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>处理中';
+                btn.disabled = true;
+                btn.classList.add('opacity-50', 'cursor-not-allowed');
+            } else {
+                btn.innerHTML = '<i class="fa fa-paper-plane mr-2"></i>发送';
+                btn.disabled = false;
+                btn.classList.remove('opacity-50', 'cursor-not-allowed');
+            }
+        }
+
+        // 清空对话
+        function clearChat() {
+            const container = document.getElementById('chatContainer');
+            container.innerHTML = `
+                <div class="chat-message flex justify-start">
+                    <div class="max-w-3xl bg-white rounded-lg shadow-sm p-4 border border-gray-200">
+                        <div class="flex items-start">
+                            <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
+                                <i class="fa fa-robot text-white text-sm"></i>
+                            </div>
+                            <div class="ml-3">
+                                <div class="text-xs text-gray-400 mb-1">AI 助手</div>
+                                <div class="text-sm text-gray-700 leading-relaxed">
+                                    对话已清空，请继续提问。
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+            chatHistory = [];
+        }
+
+        // HTML转义
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+
+        // 更新侧边栏滑块位置
+        function updateSidebarSlider() {
+            const slider = document.getElementById('sidebar-slider');
+            if (!slider) return;
+            const activeLink = document.querySelector('.nav-link.bg-\\[\\#1890ff\\]\\/10');
+            if (activeLink) {
+                const wrapper = activeLink.closest('.nav-item-wrapper');
+                if (wrapper) {
+                    slider.style.top = wrapper.offsetTop + 'px';
+                    slider.style.height = wrapper.offsetHeight + 'px';
+                }
+            }
+        }
+
+        // 暴露到全局
+        window.sendMessage = sendMessage;
+        window.clearChat = clearChat;
+    </script>
+</body>
+</html>