左侧导航栏样式做到了统一
This commit is contained in:
@@ -101,123 +101,134 @@
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased bg-gray-50">
|
||||
<!-- 面包屑 -->
|
||||
<div class="flex items-center text-sm mb-6">
|
||||
<a href="main.html?page=model-compare" class="text-primary hover:underline">模型对比</a>
|
||||
<span class="mx-2 text-gray-300">/</span>
|
||||
<span id="breadcrumbTask" class="text-gray-800 font-medium">对比任务</span>
|
||||
<!-- 主内容区域 - 由 main.html 提供侧边栏和顶部导航 -->
|
||||
<div class="bg-white rounded-lg shadow-sm">
|
||||
<!-- 面包屑导航和返回按钮 -->
|
||||
<div class="px-4 py-3 border-b border-gray-100 flex items-center justify-between">
|
||||
<div class="flex items-center text-sm">
|
||||
<a href="main.html?page=model-compare" class="text-primary hover:underline">模型对比</a>
|
||||
<span class="mx-2 text-gray-300">/</span>
|
||||
<span class="text-gray-800 font-medium" id="breadcrumbTask">对话</span>
|
||||
</div>
|
||||
<a href="main.html?page=model-compare" class="text-gray-500 hover:text-gray-700 text-sm flex items-center">
|
||||
<i class="fa fa-arrow-left mr-1"></i>返回列表
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<div class="p-6">
|
||||
<form id="chatForm">
|
||||
<!-- 已配置模型展示 -->
|
||||
<div class="mb-6">
|
||||
<label class="form-label flex items-center mb-3">
|
||||
<i class="fa fa-server text-primary mr-2"></i>
|
||||
已配置模型
|
||||
<span class="ml-2 text-xs text-gray-400 font-normal">（共 <span id="modelCount">0</span> 个）</span>
|
||||
</label>
|
||||
<div id="selectedModelsList" class="flex flex-wrap gap-2">
|
||||
<!-- 模型标签将通过JS渲染 -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 系统提示词 -->
|
||||
<div class="mb-5">
|
||||
<label class="form-label flex items-center">
|
||||
<i class="fa fa-cog text-primary mr-2"></i>
|
||||
系统提示词
|
||||
<span class="ml-2 text-xs text-gray-400 font-normal">（可选，设置模型行为）</span>
|
||||
</label>
|
||||
<textarea id="systemPrompt" class="form-input" rows="3"
|
||||
placeholder="例如：你是一个专业的技术助手，善于回答各类问题。请用简洁清晰的语言回答。"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- 用户提问 -->
|
||||
<div class="mb-5">
|
||||
<label class="form-label flex items-center">
|
||||
<i class="fa fa-comment text-primary mr-2"></i>
|
||||
用户提问
|
||||
<span class="text-red-500 ml-1">*</span>
|
||||
</label>
|
||||
<textarea id="userQuestion" class="form-input" rows="4"
|
||||
placeholder="请输入您想要对比的问题..."></textarea>
|
||||
</div>
|
||||
|
||||
<!-- 推理参数设置 -->
|
||||
<div class="mb-6">
|
||||
<label class="form-label flex items-center mb-4">
|
||||
<i class="fa fa-sliders text-primary mr-2"></i>
|
||||
推理参数设置
|
||||
</label>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
<!-- Temperature -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-gray-600">Temperature</span>
|
||||
<span id="tempValue" class="text-sm text-primary font-medium">0.7</span>
|
||||
</div>
|
||||
<input type="range" id="temperature" class="slider-thumb" min="0" max="2" step="0.1" value="0.7">
|
||||
<div class="flex justify-between text-xs text-gray-400 mt-1">
|
||||
<span>保守</span>
|
||||
<span>随机</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Top-p -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-gray-600">Top-p</span>
|
||||
<span id="topPValue" class="text-sm text-primary font-medium">0.9</span>
|
||||
</div>
|
||||
<input type="range" id="topP" class="slider-thumb" min="0" max="1" step="0.05" value="0.9">
|
||||
<div class="flex justify-between text-xs text-gray-400 mt-1">
|
||||
<span>集中</span>
|
||||
<span>广泛</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Top-k -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-gray-600">Top-k</span>
|
||||
<span id="topKValue" class="text-sm text-primary font-medium">50</span>
|
||||
</div>
|
||||
<input type="range" id="topK" class="slider-thumb" min="1" max="100" step="1" value="50">
|
||||
<div class="flex justify-between text-xs text-gray-400 mt-1">
|
||||
<span>精确</span>
|
||||
<span>多样</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Max Tokens -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-gray-600">Max Tokens</span>
|
||||
<span id="maxTokensValue" class="text-sm text-primary font-medium">2048</span>
|
||||
</div>
|
||||
<input type="range" id="maxTokens" class="slider-thumb" min="256" max="4096" step="256" value="2048">
|
||||
<div class="flex justify-between text-xs text-gray-400 mt-1">
|
||||
<span>短</span>
|
||||
<span>长</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 按钮区域 -->
|
||||
<div class="flex items-center justify-end pt-4 border-t border-gray-100">
|
||||
<div class="flex items-center space-x-3">
|
||||
<button type="button" onclick="goBack()" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300 transition-colors">
|
||||
取消
|
||||
</button>
|
||||
<button type="button" id="startBtn" class="px-6 py-2 bg-primary text-white rounded-lg text-sm hover:bg-primary/90 transition-colors flex items-center disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<i class="fa fa-play mr-2"></i>
|
||||
开始提问
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id="chatForm">
|
||||
<!-- 已配置模型展示 -->
|
||||
<div class="mb-6">
|
||||
<label class="form-label flex items-center mb-3">
|
||||
<i class="fa fa-server text-primary mr-2"></i>
|
||||
已配置模型
|
||||
<span class="ml-2 text-xs text-gray-400 font-normal">（共 <span id="modelCount">0</span> 个）</span>
|
||||
</label>
|
||||
<div id="selectedModelsList" class="flex flex-wrap gap-2">
|
||||
<!-- 模型标签将通过JS渲染 -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 系统提示词 -->
|
||||
<div class="mb-5">
|
||||
<label class="form-label flex items-center">
|
||||
<i class="fa fa-cog text-primary mr-2"></i>
|
||||
系统提示词
|
||||
<span class="ml-2 text-xs text-gray-400 font-normal">（可选，设置模型行为）</span>
|
||||
</label>
|
||||
<textarea id="systemPrompt" class="form-input" rows="3"
|
||||
placeholder="例如：你是一个专业的技术助手，善于回答各类问题。请用简洁清晰的语言回答。"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- 用户提问 -->
|
||||
<div class="mb-5">
|
||||
<label class="form-label flex items-center">
|
||||
<i class="fa fa-comment text-primary mr-2"></i>
|
||||
用户提问
|
||||
<span class="text-red-500 ml-1">*</span>
|
||||
</label>
|
||||
<textarea id="userQuestion" class="form-input" rows="4"
|
||||
placeholder="请输入您想要对比的问题..."></textarea>
|
||||
</div>
|
||||
|
||||
<!-- 推理参数设置 -->
|
||||
<div class="mb-6">
|
||||
<label class="form-label flex items-center mb-4">
|
||||
<i class="fa fa-sliders text-primary mr-2"></i>
|
||||
推理参数设置
|
||||
</label>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
<!-- Temperature -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-gray-600">Temperature</span>
|
||||
<span id="tempValue" class="text-sm text-primary font-medium">0.7</span>
|
||||
</div>
|
||||
<input type="range" id="temperature" class="slider-thumb" min="0" max="2" step="0.1" value="0.7">
|
||||
<div class="flex justify-between text-xs text-gray-400 mt-1">
|
||||
<span>保守</span>
|
||||
<span>随机</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Top-p -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-gray-600">Top-p</span>
|
||||
<span id="topPValue" class="text-sm text-primary font-medium">0.9</span>
|
||||
</div>
|
||||
<input type="range" id="topP" class="slider-thumb" min="0" max="1" step="0.05" value="0.9">
|
||||
<div class="flex justify-between text-xs text-gray-400 mt-1">
|
||||
<span>集中</span>
|
||||
<span>广泛</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Top-k -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-gray-600">Top-k</span>
|
||||
<span id="topKValue" class="text-sm text-primary font-medium">50</span>
|
||||
</div>
|
||||
<input type="range" id="topK" class="slider-thumb" min="1" max="100" step="1" value="50">
|
||||
<div class="flex justify-between text-xs text-gray-400 mt-1">
|
||||
<span>精确</span>
|
||||
<span>多样</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Max Tokens -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-gray-600">Max Tokens</span>
|
||||
<span id="maxTokensValue" class="text-sm text-primary font-medium">2048</span>
|
||||
</div>
|
||||
<input type="range" id="maxTokens" class="slider-thumb" min="256" max="4096" step="256" value="2048">
|
||||
<div class="flex justify-between text-xs text-gray-400 mt-1">
|
||||
<span>短</span>
|
||||
<span>长</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 按钮区域 -->
|
||||
<div class="flex items-center justify-end pt-4 border-t border-gray-100">
|
||||
<div class="flex items-center space-x-3">
|
||||
<button type="button" onclick="goBack()" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300 transition-colors">
|
||||
取消
|
||||
</button>
|
||||
<button type="button" id="startBtn" class="px-6 py-2 bg-primary text-white rounded-lg text-sm hover:bg-primary/90 transition-colors flex items-center disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<i class="fa fa-play mr-2"></i>
|
||||
开始提问
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
// 动态获取 API 基础地址
|
||||
const getApiBase = () => {
|
||||
@@ -325,7 +336,10 @@
|
||||
|
||||
// 更新页面标题
|
||||
function updatePageTitle(title) {
|
||||
document.getElementById('breadcrumbTask').textContent = title;
|
||||
const breadcrumb = document.getElementById('breadcrumbTask');
|
||||
if (breadcrumb) {
|
||||
breadcrumb.textContent = title;
|
||||
}
|
||||
}
|
||||
|
||||
// 加载模型列表
|
||||
|
||||
Reference in New Issue
Block a user