---

这是一个开箱即用的实时视觉分析演示，通过摄像头实时捕获画面并使用 SmolVLM 或 SmolVLM2 视觉语言模型进行智能分析。项目采用纯前端实现，配合 llama.cpp 后端，无需复杂的深度学习框架配置。

• 🎥 实时视觉分析 - 通过摄像头实时捕获并分析画面内容
• 🤖 多模型支持 - 支持 SmolVLM 和 SmolVLM2 两代模型
• 🎨 炫酷 UI - 赛博朋克风格的交互界面，带扫描线动画
• 🔍 AR 叠加层 - 可选的实时目标检测（基于 TensorFlow.js Coco-SSD）
• ⚡ 可调参数 - 灵活配置刷新频率、系统指令等参数
• 📝 历史记录 - 实时显示分析历史，方便回溯
• 🚀 零依赖部署 - 纯 HTML + JavaScript，直接在浏览器中运行

---

• llama.cpp - 推理后端
• 现代浏览器（Chrome/Firefox/Safari/Edge）
• 摄像头设备

# 克隆仓库
git clone https://github.com/ggml-org/llama.cpp.git
cd llama.cpp

# 编译（根据你的平台选择）
make

# 或使用 CMake
cmake -B build
cmake --build build --config Release

选择方式 A：SmolVLM（第一代）

llama-server -hf ggml-org/SmolVLM-500M-Instruct-GGUF -ngl 99

选择方式 B：SmolVLM2（第二代，推荐）

llama-server -hf ggml-org/SmolVLM2-500M-Instruct-GGUF -ngl 99

💡 参数说明：

• -hf - 从 Hugging Face 自动下载模型
• -ngl 99 - 启用 GPU 加速（适用于 NVIDIA/AMD/Intel GPU）
• 首次运行会自动下载模型文件（约 500MB）

# 克隆本项目
git clone https://github.com/quyangminddock/SmolVLMDemo.git
cd SmolVLMDemo

# 在浏览器中打开 index.html
# macOS
open index.html

# Linux
xdg-open index.html

# Windows
start index.html

1. 允许浏览器访问摄像头
2. 点击右上角 ⚙ 图标打开配置面板
3. 确认 API 地址为 http://localhost:8080（默认）
4. 点击 "初始化系统" 按钮
5. 享受实时视觉分析！

---

• 主画面区 - 显示摄像头实时画面和 AR 检测框
• 左侧历史面板 - 显示最近 10 条分析记录
• 底部终端 - 显示当前分析结果和系统状态
• 右上角配置 - 调整 API 地址、系统指令、刷新频率等

在配置面板中修改"系统指令"可以改变模型的输出格式：

示例 1（默认）：Describe what you see briefly.
示例 2（中文）：用中文简短描述你看到的内容
示例 3（JSON）：Describe the scene in JSON format with keys: objects, actions, colors
示例 4（计数）：Count how many people and objects you see

• 极速 (100ms) - 最流畅，GPU 要求高
• 标准 (500ms) - 推荐，平衡性能和体验
• 节能 (1s) - 降低资源占用
• 缓慢 (3s) - 最低负载

开启 AR 模式后，界面会叠加 TensorFlow.js Coco-SSD 的实时目标检测结果，在画面中用高光边框标注识别到的物体。

---

• 后端推理: llama.cpp - 高性能 C++ 推理引擎
• 视觉模型: SmolVLM / SmolVLM2 - 轻量级视觉语言模型
• 前端框架: 原生 HTML/CSS/JavaScript
• 目标检测: TensorFlow.js + Coco-SSD
• 字体: Google Fonts (Orbitron, Rajdhani)

---

• 参数量: 500M
• 上下文: 支持图像 + 文本输入
• 优势: 轻量级，推理速度快
• 适用场景: 实时场景理解、物体识别、简单视觉问答

• 参数量: 500M（优化架构）
• 改进: 更好的理解能力和响应质量
• 推荐: 作为首选模型

📖 更多关于 SmolVLM 的信息，请访问 Hugging Face Model Card

---

Q: 摄像头无法访问？

确保：

1. 浏览器已授予摄像头权限
2. 其他应用没有占用摄像头
3. 使用 HTTPS 或 localhost（部分浏览器要求）

Q: 连接 API 失败？

检查：

1. llama-server 是否正常运行（默认端口 8080）
2. API 地址配置是否正确
3. 浏览器控制台是否有 CORS 错误
4. 尝试运行 curl http://localhost:8080/health 测试服务

Q: 推理速度很慢？

优化建议：

1. 确保启用了 GPU（-ngl 99 参数）
2. 降低刷新频率到 1s 或 3s
3. 关闭 AR 目标检测
4. 使用性能更好的硬件

Q: 想使用其他模型？

llama.cpp 支持多种多模态模型：

• LLaVA 系列
• BakLLaVA
• Obsidian
• MobileVLM

查看完整列表：llama.cpp multimodal docs

修改启动命令中的模型名称即可。

---

欢迎提交 Issue 和 Pull Request！

如果这个项目对你有帮助，请考虑给个 ⭐ Star！

---

本项目采用 MIT 许可证 - 详见 LICENSE 文件

---

• llama.cpp - 强大的推理后端
• SmolVLM - 优秀的视觉语言模型
• TensorFlow.js - 浏览器端机器学习

---