2026-07-19 18:08:36 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>llama.cpp 命令生成器</title>
|
|
|
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="app">
|
|
|
|
|
<header>
|
|
|
|
|
<h1>🦙 llama.cpp 命令生成器</h1>
|
|
|
|
|
</header>
|
|
|
|
|
|
2026-07-19 23:35:20 +08:00
|
|
|
<!-- Sticky memory bar (always visible on top) -->
|
|
|
|
|
<div id="sticky-mem-bar" class="sticky-mem-bar">
|
|
|
|
|
<div class="sticky-vram-row" id="sticky-vram-row">
|
|
|
|
|
<span class="sticky-label">🎮 VRAM</span>
|
|
|
|
|
<div class="sticky-bar-container">
|
|
|
|
|
<div class="sticky-bar" id="sticky-vram-bar"></div>
|
|
|
|
|
<span class="sticky-bar-text" id="sticky-vram-text">等待配置...</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sticky-ram-row hidden" id="sticky-ram-row">
|
|
|
|
|
<span class="sticky-label">💾 内存</span>
|
|
|
|
|
<div class="sticky-bar-container">
|
|
|
|
|
<div class="sticky-bar ram-sticky-bar" id="sticky-ram-bar"></div>
|
|
|
|
|
<span class="sticky-bar-text" id="sticky-ram-text">等待配置...</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-07-19 18:08:36 +08:00
|
|
|
<!-- Version & Mode Selection -->
|
|
|
|
|
<section class="top-controls">
|
|
|
|
|
<div class="control-group">
|
|
|
|
|
<label>llama.cpp 版本</label>
|
|
|
|
|
<select id="version-select" onchange="onVersionChange()"></select>
|
|
|
|
|
</div>
|
2026-07-20 00:30:21 +08:00
|
|
|
<div class="control-group control-group-large">
|
2026-07-19 18:08:36 +08:00
|
|
|
<label>运行模式</label>
|
|
|
|
|
<div class="mode-switch">
|
|
|
|
|
<button class="mode-btn active" data-mode="gpu" onclick="switchMode('gpu')">🎮 GPU 模式</button>
|
|
|
|
|
<button class="mode-btn" data-mode="gpu_cpu" onclick="switchMode('gpu_cpu')">🎮+💻 GPU+CPU 模式</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-07-20 00:30:21 +08:00
|
|
|
<div class="control-group control-group-small">
|
2026-07-20 13:07:33 +08:00
|
|
|
<label>执行程序</label>
|
|
|
|
|
<select id="binary-select" onchange="onBinaryChange()">
|
2026-07-19 18:08:36 +08:00
|
|
|
<option value="llama-server">llama-server</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
2026-07-19 23:35:20 +08:00
|
|
|
<!-- GPU Configuration + System Memory (merged) -->
|
2026-07-19 18:08:36 +08:00
|
|
|
<section class="panel" id="gpu-panel">
|
|
|
|
|
<h2>🖥️ GPU 配置</h2>
|
|
|
|
|
<div id="gpu-slots"></div>
|
|
|
|
|
<button class="btn-add" id="btn-add-gpu" onclick="addGpuSlot()">+ 添加显卡</button>
|
2026-07-19 23:35:20 +08:00
|
|
|
|
|
|
|
|
<!-- VRAM Display -->
|
2026-07-19 18:08:36 +08:00
|
|
|
<div class="vram-display" id="vram-display">
|
|
|
|
|
<div class="vram-bar-container">
|
|
|
|
|
<div class="vram-bar" id="vram-bar"></div>
|
|
|
|
|
<div class="vram-label" id="vram-label">VRAM: 等待配置...</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="vram-breakdown" id="vram-breakdown"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-07-19 23:35:20 +08:00
|
|
|
<!-- System Memory (inline, only for GPU+CPU mode) -->
|
|
|
|
|
<div class="inline-memory-config hidden" id="inline-memory-config">
|
|
|
|
|
<div class="memory-input-row">
|
|
|
|
|
<label>系统内存上限</label>
|
|
|
|
|
<input type="number" id="sys-memory" value="0" min="0" step="1" onchange="updateEstimate()" placeholder="0 = 无限制">
|
|
|
|
|
<span class="memory-unit">GB</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="vram-display" id="ram-display">
|
|
|
|
|
<div class="vram-bar-container">
|
|
|
|
|
<div class="vram-bar ram-bar" id="ram-bar"></div>
|
|
|
|
|
<div class="vram-label" id="ram-label">内存: 等待配置...</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="vram-breakdown" id="ram-breakdown"></div>
|
2026-07-19 18:08:36 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
2026-07-19 22:57:38 +08:00
|
|
|
<!-- Model Selection (two-step) -->
|
2026-07-19 18:08:36 +08:00
|
|
|
<section class="panel">
|
2026-07-19 18:49:05 +08:00
|
|
|
<h2>📦 选择模型</h2>
|
2026-07-19 22:57:38 +08:00
|
|
|
<div class="model-step">
|
|
|
|
|
<label class="model-step-label">第1步：选择模型</label>
|
|
|
|
|
<div class="model-select-container">
|
2026-07-20 00:05:18 +08:00
|
|
|
<input type="text" id="model-search" placeholder="搜索模型名称..." oninput="filterBaseModels()" onfocus="onModelSearchFocus()" onblur="onModelSearchBlur()" autocomplete="off">
|
2026-07-19 22:57:38 +08:00
|
|
|
<div class="model-dropdown" id="model-dropdown"></div>
|
|
|
|
|
</div>
|
2026-07-19 18:08:36 +08:00
|
|
|
</div>
|
2026-07-19 22:57:38 +08:00
|
|
|
<div class="model-step hidden" id="quant-step">
|
|
|
|
|
<label class="model-step-label">第2步：选择量化版本</label>
|
|
|
|
|
<div id="quant-options"></div>
|
|
|
|
|
</div>
|
2026-07-19 18:49:05 +08:00
|
|
|
<div id="model-selected-info" class="model-selected-info"></div>
|
2026-07-19 18:08:36 +08:00
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- Natural Language Input -->
|
2026-07-20 00:41:01 +08:00
|
|
|
<section class="panel" id="nl-section">
|
2026-07-19 18:08:36 +08:00
|
|
|
<h2>💬 自然语言生成</h2>
|
|
|
|
|
<div class="nl-input-container">
|
2026-07-20 00:05:18 +08:00
|
|
|
<textarea id="nl-input" rows="3" placeholder="加载中..."></textarea>
|
2026-07-19 18:08:36 +08:00
|
|
|
<button onclick="parseNaturalLanguage()">解析</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="nl-result" class="nl-result"></div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- Parameters -->
|
|
|
|
|
<section class="panel">
|
|
|
|
|
<h2>⚙️ 参数配置</h2>
|
2026-07-19 22:57:38 +08:00
|
|
|
<div class="param-search-container">
|
|
|
|
|
<input type="text" id="param-search" placeholder="搜索全部参数..." oninput="onParamSearch()" autocomplete="off">
|
|
|
|
|
<span id="search-hint" class="search-hint"></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="param-tabs" id="param-tabs">
|
2026-07-19 18:08:36 +08:00
|
|
|
<button class="tab-btn active" data-cat="common" onclick="switchTab('common')">通用参数</button>
|
|
|
|
|
<button class="tab-btn" data-cat="sampling" onclick="switchTab('sampling')">采样参数</button>
|
|
|
|
|
<button class="tab-btn" data-cat="server" onclick="switchTab('server')">服务器参数</button>
|
|
|
|
|
<button class="tab-btn" data-cat="model_source" onclick="switchTab('model_source')">模型来源</button>
|
|
|
|
|
<button class="tab-btn" data-cat="lora" onclick="switchTab('lora')">LoRA</button>
|
|
|
|
|
<button class="tab-btn" data-cat="logging" onclick="switchTab('logging')">日志</button>
|
|
|
|
|
<button class="tab-btn" data-cat="advanced" onclick="switchTab('advanced')">高级</button>
|
2026-07-20 00:05:18 +08:00
|
|
|
<button class="tab-btn tab-modified" data-cat="modified" onclick="switchTab('modified')">已改参数</button>
|
2026-07-19 18:08:36 +08:00
|
|
|
</div>
|
|
|
|
|
<div id="param-container"></div>
|
|
|
|
|
<button class="btn-toggle-advanced" onclick="toggleHiddenParams()" id="toggle-advanced-btn">▼ 显示更多参数</button>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- Generated Command -->
|
|
|
|
|
<section class="panel command-panel">
|
|
|
|
|
<h2>📋 生成命令</h2>
|
2026-07-19 23:48:18 +08:00
|
|
|
<div class="command-output-wrap">
|
|
|
|
|
<button class="command-copy-btn" onclick="copyCommand()" id="copy-btn">📋 复制</button>
|
2026-07-20 00:05:18 +08:00
|
|
|
<div class="command-output" id="command-output">请在上方配置参数...</div>
|
2026-07-19 18:08:36 +08:00
|
|
|
</div>
|
2026-07-19 23:48:18 +08:00
|
|
|
<div class="command-hint" id="command-hint"></div>
|
2026-07-19 18:08:36 +08:00
|
|
|
</section>
|
|
|
|
|
</div>
|
|
|
|
|
<script src="/js/main.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
