非常好！为用户提供**更多模型选择**不仅能提升灵活性，还能满足不同场景下的需求（如：追求速度 vs 追求生成质量）。我们可以构建一个 **用户友好的模型选择界面**，结合你之前实现的设备分级系统，既支持自动推荐，也允许用户手动切换。
---
## ✅ 目标
1. **展示多个可用模型**
2. **标注每个模型的特点（大小、速度、能力）**
3. **高亮推荐模型（基于设备）**
4. **允许用户自由切换，并记住偏好**
5. **加载时有进度反馈**
---
## ✅ 完整代码：支持多模型选择的前端界面
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=
device-width, initial-scale=1.0"/>
<title>🧠 多模型代码生成器</title>
<script type="module">
import { setGlobalOptions, pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.1';
// 模型配置列表
const
MODEL_CATALOG = [
{
id: 'codegen-350m',
name: 'CodeGen 350M
(轻量
)',
modelId: 'Xenova/codegen-350m-multi',
size: '350M',
description: '极快加载，适合低端设备',
color: 'bg-green-500'
},
{
id: 'starcoderbase-1b',
name: 'StarCoderBase 1B',
modelId: 'Xenova/starcoderbase-1b',
size: '1B',
description: '平衡性能与速度',
color: 'bg-blue-500'
},
{
id: 'codegen-2b',
name: 'CodeGen 2B
(中等
)',
modelId: 'Xenova/codegen-2b-multi',
size: '2B',
description: '更强逻辑理解',
color: 'bg-purple-500'
},
{
id: 'starcoderbase-3b',
name: 'StarCoderBase 3B
(强
)',
modelId: 'Xenova/starcoderbase-3b',
size: '3B',
description: '高质量生成，需高性能设备',
color: 'bg-red-500'
}
];
let current
ModelId = null;
let generator = null;
// 设置全局选项
setGlobalOptions
({
cacheDir: 'multi-
model-cache-v3',
progressCallback:
(progress
) => {
const bar = document.getElementById
('progress-bar'
);
bar.style.width = `${Math.floor
(progress * 100
)}%`;
bar.textContent = `${Math.floor
(progress * 100
)}%`;
}
}
);
// 获取存储的用户偏好
function getSavedPreference
() {
return localStorage.getItem
('preferred-codegen-
model'
) || null;
}
// 保存用户偏好
function savePreference
(modelId
) {
localStorage.setItem
('preferred-codegen-
model',
modelId
);
}
// 设备评分逻辑（同前）
async function get
DeviceScore
() {
let score = 0;
const
deviceMemory = navigator.
deviceMemory || 2;
score += Math.min
(deviceMemory * 10, 40
);
const hardwareConcurrency = navigator.hardwareConcurrency || 2;
score += Math.min
(hardwareConcurrency * 5, 20
);
if
(/Android|
iPhone/i.test
(navigator.userAgent
)) score -= 10;
try {
const estimate = await navigator.storage?.estimate?.
();
score += Math.min
((estimate?.quota / 1e9
) * 15, 15
);
} catch {}
if
(!!document.createElement
('canvas'
).getContext
('webgl'
)) score += 15;
if
(typeof WebAssembly === 'object'
) score += 10;
else score -= 20;
return Math.
max(0, Math.min
(100, Math.round
(score
)));
}
function getRecommended
ModelId
(score
) {
if
(score < 20
) return 'codegen-350m';
if
(score < 40
) return 'starcoderbase-1b';
if
(score < 60
) return 'codegen-2b';
return 'starcoderbase-3b';
}
// 渲染模型选择器
async function render
ModelSelector
() {
const container = document.getElementById
('
model-selector'
);
const savedPref = getSavedPreference
();
const score = await get
DeviceScore
();
const recommendedId = getRecommended
ModelId
(score
);
MODEL_CATALOG.forEach
(model => {
const div = document.createElement
('div'
);
div.className = `
model-option p-3 border rounded-lg cursor-pointer mb-2 relative`;
div.dataset.
model =
model.id;
if
(model.id === recommendedId
) {
div.class
List.add
('border-yellow-400', 'bg-yellow-50'
);
div.innerHTML += '<span class="absolute top-2 right-2 text-
xs bg-yellow-400 text-white px-2 py-1 rounded">推荐</span>';
} else {
div.class
List.add
('border-gray-200', 'hover:border-gray-400'
);
}
if
(savedPref ===
model.id
) {
div.class
List.add
('ring-2', 'ring-blue-500'
);
}
div.innerHTML += `
<div class="font-semibold">${
model.name}</div>
<div class="text-sm text-gray-600">${
model.description}</div>
<div class="text-
xs text-gray-500">大小: ${
model.size}</div>
`;
div.onclick =
() => select
Model(model.id
);
container.appendChild
(div
);
}
);
// 自动选择（优先用用户偏好，否则用推荐）
const autoSelect = savedPref || recommendedId;
select
Model(autoSelect
);
}
// 切换模型
async function select
Model(modelId
) {
const optionEls = document.querySelectorAll
('.
model-option'
);
optionEls.forEach
(el => {
el.class
List.remove
('ring-2', 'ring-blue-500'
);
if
(el.dataset.
model ===
modelId
) {
el.class
List.add
('ring-2', 'ring-blue-500'
);
}
}
);
const
model =
MODEL_CATALOG.find
(m => m.id ===
modelId
);
if
(!
model) return;
//
更新 UI
document.getElementById
('current-
model-name'
).textContent =
model.name;
document.getElementById
('progress-container'
).class
List.remove
('hidden'
);
document.getElementById
('status'
).textContent = `加载模型: ${
model.name}...`;
try {
generator = await pipeline
('text-generation',
model.
modelId
);
current
ModelId =
modelId;
savePreference
(modelId
); // 保存选择
document.getElementById
('status'
).textContent = `✅ 模型就绪: ${
model.name}`;
document.getElementById
('progress-container'
).class
List.add
('hidden'
);
} catch
(err
) {
document.getElementById
('status'
).textContent = `❌ 加载失败: ${err.message}`;
console.error
(err
);
// 回退到轻量模型
alert
("该模型加载失败，已尝试切换至最小模型"
);
select
Model('codegen-350m'
);
}
}
// 生成代码
window.generateCode = async
() => {
const input = document.getElementById
('prompt'
).value.trim
();
if
(!input
) return alert
("请输入描述！"
);
if
(!generator
) return alert
("模型未加载"
);
document.getElementById
('output'
).textContent = "🧠 正在生成...";
try {
const result = await generator
(input, {
max_new_tokens: 128,
temperature: 0.5,
top_p: 0.95
}
);
const code = result[0].generated_text.replace
(input, ''
).trim
();
document.getElementById
('output'
).textContent = code || "
(无输出
)";
} catch
(err
) {
document.getElementById
('output'
).textContent = "生成失败：" + err.message;
}
};
// 页面加载完成
document.addEvent
Listener
('DOMContentLoaded',
() => {
render
ModelSelector
();
// 绑定事件
document.getElementById
('generateBtn'
).onclick = generateCode;
document.getElementById
('prompt'
).addEvent
Listener
('keypress', e => {
if
(e.key === 'Enter'
) generateCode
();
}
);
}
);
</script>
<style>
body {
font-family: -
apple-system, BlinkMacSystemFont, sans-serif;
padding: 16px;
background: #f8f9fa;
font-size: 14px;
}
h1 { color: #1a1a1a; text-align: center; margin-bottom: 24px; }
label { display: block; margin-top: 1em; font-weight: bold; }
textarea {
width: 100%; padding: 12px; border: 1px solid #ccc;
border-radius: 8px; resize: vertical; min-height: 80px;
font-size: 16px;
}
button {
margin-top: 12px;
padding: 12px 24px;
background-color: #007AFF;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
}
button:active { background-color: #005ED1; }
#status, #output {
margin-top: 12px;
padding: 12px;
border-radius: 8px;
border: 1px dashed #aaa;
}
#status {
background-color: #e8f5e8;
color: #2e7d32;
}
#output {
background-color: #fff;
min-height: 60px;
white-space: pre-wrap;
}
#progress-container {
margin-top: 8px;
height: 20px;
background: #eee;
border-radius: 4px;
overflow: hidden;
}
#progress-bar {
height: 100%;
background: #4caf50;
text-align: center;
line-height: 20px;
color: white;
transition: width 0.3s ease;
width: 0;
}
.
model-option {
position: relative;
}
@media
(max-width: 600px
) {
body { font-size: 14px; }
textarea { font-size: 14px; }
}
</style>
</head>
<body>
<h1>🧠 多模型代码生成器</h1>
<label for="
model-selector">选择模型：</label>
<div id="
model-selector"></div>
<div id="current-
model-info" style="margin-top: 12px;">
当前使用: <strong id="current-
model-name">未知</strong>
</div>
<div id="progress-container" class="hidden">
<div id="progress-bar">0%</div>
</div>
<label for="prompt">输入编程需求：</label>
<textarea id="prompt" placeholder="例如：写一个 Python 函数计算斐波那契数列"></textarea>
<button id="generateBtn">生成代码</button>
<div id="status">⏳ 初始化...</div>
<label><strong>输出：</strong></label>
<pre id="output"></pre>
</body>
</html>
```
---
## 🔍 功能亮点说明
| 特性 | 实现方式 |
|------|----------|
| ✅ 多模型支持 | 使用 `
MODEL_CATALOG` 配置表统一管理 |
| ✅ 推荐标识 | 根据设备评分高亮推荐项 |
| ✅ 用户偏好记忆 | `localStorage` 保存上次选择 |
| ✅ 加载进度条 | `progressCallback` 显示下载状态 |
| ✅ 点击切换模型 | 支持运行时动态加载新模型 |
| ✅ 自动回退机制 | 加载失败则降级到小模型 |
| ✅ 响应式设计 | 适配手机和平板 |
---
## 🧩 可扩展方向
### 1. 添加“自定义模型”功能（高级用户）
```js
// 允许输入 Hugging Face 模型 ID
{
id: 'custom',
modelId: prompt
("请输入模型ID，如：Xenova/codegen-2b-multi"
)
}
```
### 2. 显示模型缓存状态
```js
// 在 UI 上显示 “✔️ 已缓存” 或 “⬇️ 需下载”
if
(await TransformersCache.exists
(model.
modelId
)) { /* 显示图标 */ }
```
### 3. 分组展示（按语言/用途）
- 💻 通用编程模型
- 🐍 Python 专用微调版
- 💾 超轻量压缩版（int8）
### 4. 性能测试模式
让用户点击“测试所有模型”，记录加载时间和推理延迟，生成报告。
---
## ⚠️ 注意事项
| 问题 | 解决方案 |
|------|----------|
| 同一页面不能同时加载多个模型 | 卸载旧模型再加载新模型（内存释放） |
| Safari 私密模式无法缓存 | 提示“每次都将重新下载” |
| 某些模型格式不兼容 | 捕获异常并提示“仅支持 Transformers.js 格式” |
---
本文提供了详尽的Apple设备型号清单，覆盖iPhone、iPad、iPod、Apple TV、Apple Watch及HomePod等产品线，从初代到最新款iphonexs、iphonexsmax，帮助读者快速识别和理解各种Apple设备。
扫一扫
1万+
到【灌水乐园】发言
