在隐私敏感和边缘计算场景下，完全离线的 AI 应用需求日益增长。Microsoft Foundry Local 提供了一个优秀的解决方案，它允许在本地硬件上运行优化后的生成式 AI 模型，支持 OpenAI 兼容的 API 接口，无需云端订阅。通过结合轻量级前端框架 Svelte，我们可以快速构建一个响应式、直观的 Web UI，实现模型管理、下载和实时推理。这种组合的优势在于：Svelte 的编译时响应式机制确保 UI 高效渲染，即使在资源有限的本地环境中也能流畅运行；Foundry Local 自动适配硬件（如 NVIDIA CUDA、Qualcomm NPU 或 CPU），最大化性能。
首先，确保环境准备就绪。安装 Foundry Local：Windows 用户执行 winget install Microsoft.FoundryLocal，macOS 用户用 brew install microsoft/foundrylocal/foundrylocal。运行 foundry model ls 查看可用模型列表，如 phi-3.5-mini、qwen2.5-0.5b 等别名。启动服务：foundry model run phi-3.5-mini，默认暴露 OpenAI 兼容 API 于 http://localhost:8000/v1（具体端口视配置）。[1] 此 API 支持 chat/completions 等端点，与标准 OpenAI SDK 无缝集成。
接下来，创建 Svelte 项目。使用官方模板：npm create svelte@latest foundry-ui，选择 Skeleton 项目，添加 TypeScript 支持。安装依赖：
npm install openai foundry-local-sdk svelte/sveltekit
npm install -D @sveltejs/adapter-static
foundry-local-sdk 提供模型管理和 endpoint 获取，openai 用于 API 调用。
核心功能实现分为三模块：模型管理、聊天界面和监控面板。
1. 模型管理组件（ModelManager.svelte） 使用 JS SDK 列出、下载模型。关键代码：
<script lang="ts">
import { FoundryLocalManager } from 'foundry-local-sdk';
import { OpenAI } from 'openai';
let manager: FoundryLocalManager;
let models: any[] = [];
let loading = false;
async function init() {
manager = new FoundryLocalManager();
const catalog = await manager.getCatalogAsync(); // 伪码，参考 SDK
models = await catalog.listModelsAsync();
}
async function downloadModel(alias: string) {
loading = true;
const model = await manager.getModelAsync(alias);
await model.downloadAsync(progress => {
console.log(`下载进度: ${progress}%`);
});
loading = false;
}
</script>
<div class="model-list">
{#each models as model}
<div class="model-card">
<h3>{model.alias}</h3>
<p>大小: {model.size} GB</p>
<button on:click={() => downloadModel(model.alias)} disabled={loading}>
{loading ? '下载中...' : '下载'}
</button>
</div>
{/each}
</div>
此组件展示模型变体，支持进度反馈。参数建议：优先选择硬件匹配变体，如 CUDA 版需 GPU 内存 ≥8GB。
2. 流式聊天界面（Chat.svelte） 集成 OpenAI SDK 实现实时输出：
<script lang="ts">
import { OpenAI } from 'openai';
const client = new OpenAI({
baseURL: 'http://localhost:8000/v1',
apiKey: 'dummy' // 本地无需真实 key
});
let messages: any[] = [];
let input = '';
let streaming = false;
async function sendMessage() {
if (!input) return;
const userMsg = { role: 'user', content: input };
messages = [...messages, userMsg];
input = '';
streaming = true;
const stream = await client.chat.completions.create({
model: 'phi-3.5-mini-instruct', // 从别名获取 ID
messages: [...messages],
stream: true,
temperature: 0.7,
max_tokens: 1024
});
let aiMsg = { role: 'assistant', content: '' };
messages = [...messages, aiMsg];
for await (const chunk of stream) {
if (chunk.choices[0]?.delta?.content) {
aiMsg.content += chunk.choices[0].delta.content;
messages = messages; // 触发响应式更新
}
}
streaming = false;
}
</script>
<div class="chat-container">
{#each messages as msg}
<div class="{msg.role}-msg">{msg.content}</div>
{/each}
<div class="input-area">
<input bind:value={input} disabled={streaming} />
<button on:click={sendMessage} disabled={streaming || !input}>
{streaming ? '生成中...' : '发送'}
</button>
</div>
</div>
参数优化：temperature 0.5-0.8 平衡创造性；max_tokens 依上下文限 2048，避免 OOM。流式输出利用 Svelte 细粒度更新，延迟 <100ms。
3. 监控面板
集成简单指标：模型加载状态、推理时长、硬件使用。使用 Performance API 或外部工具如 nvidia-smi（需脚本调用）。清单：
- 硬件阈值：GPU VRAM ≥模型大小 *1.5；CPU 核心 ≥8。
- 性能监控：推理延迟 >5s 则卸载模型
model.unloadAsync()。 - 回滚策略：若 NPU 失败，回退 CPU 变体。
- 存储管理：缓存路径
foundry cache location，定期清理旧模型。
部署：npm run build，生成静态文件，可用本地服务器如 npx serve dist 托管。整个 UI <500KB，加载 <1s。
风险与限界：大型模型（如 7B 参数）下载需 10GB+ 空间，首跑优化 5-10min；无训练支持，仅推理。隐私优势：数据全本地。
实际落地案例：开发者原型验证，集成到 Electron App 成桌面工具。
通过此方案，Svelte UI 赋予 Foundry Local 生产级交互，参数化配置确保可复现。未来可扩展多模型路由。
资料来源： [1] https://github.com/microsoft/Foundry-Local “Foundry Local brings the power of Azure AI Foundry to your local device without requiring an Azure subscription.” [2] https://aka.ms/foundry-local-docs （CLI 与 SDK 参考）。
（正文字数：约 1250 字）