thzxx
6088ea4629
模型选择栏: - 去掉原生 select 样式，自定义 appearance:none + 箭头图标 - 模型列表显示参数大小 (如 qwen2.5 · 7B) - 选中模型后展示能力标签 (🧠 Think / 👁️ Vision) Think 模式: - 从模型栏移至输入区域，紧邻发送按钮 - 使用灯泡图标按钮替代原来的 toggle 开关 - 默认 disabled，切换模型时调用 /api/show 检测 capabilities - capabilities 包含 'thinking' 时才启用，否则禁用并灰显 - 模型能力结果缓存，避免重复请求
🦙 Metona Ollama Client
基于原生 JavaScript 的 Ollama AI 聊天客户端，支持流式对话、多模态图片、Think 推理模式、历史管理，可安装为 PWA 离线使用。
✨ 功能特性
- 流式对话 — 基于 ReadableStream 的实时打字机效果
- 多模型支持 — 自动加载 Ollama 已安装模型，一键切换
- Think 推理模式 — 可展开/收起的思考过程展示
- 多模态输入 — 支持图片上传，兼容视觉模型
- 历史管理 — IndexedDB 持久化，支持搜索、分页、导出（Markdown/HTML/TXT/JSON）
- PWA 离线 — Service Worker 缓存，可安装到桌面
- 连接检测 — 实时状态指示，CORS 问题自动提示
- 显存管理 — 一键卸载模型释放显存
- XSS 防护 — 内置 HTML 净化器，安全渲染 Markdown
🚀 快速开始
前置条件
- 安装 Ollama 并启动服务
- 下载至少一个模型（例如
ollama pull qwen2.5）
启动
# 克隆仓库
git clone https://gitee.com/thzxx/metona-ollama.git
cd metona-ollama
# 直接用浏览器打开
open index.html
# 或用任意 HTTP 服务器托管
python3 -m http.server 8080
# 然后访问 http://localhost:8080
跨域配置
如果 Ollama 和页面不在同一域，需要设置环境变量：
OLLAMA_ORIGINS="*" ollama serve
📁 项目结构
metona-ollama/
├── index.html # 入口页面（纯模板）
├── manifest.json # PWA 清单
├── sw.js # Service Worker (PWA)
├── LICENSE
├── README.md
│
├── assets/
│ └── icons/ # 图标资源
│ ├── llama.ico
│ └── llama.png
│
├── css/
│ └── style.css # 暗色主题样式
│
└── js/
├── app.js # 主入口 / 初始化协调
├── ollama-api.js # Ollama REST API 封装
├── chat-db.js # IndexedDB 持久化层
├── state.js # 响应式状态管理
├── utils.js # 通用工具函数
├── sanitizer.js # HTML XSS 净化器
├── marked-config.js # Markdown 渲染器配置
├── lib/
│ └── marked.esm.js # Markdown 渲染器（第三方）
└── components/
├── chat-area.js # 消息渲染 / 流式更新 / 导出
├── input-area.js # 文本输入 / 图片上传 / 发送
├── history-modal.js # 历史记录面板 / 搜索 / 分页
├── settings-modal.js # 设置面板 / 数据管理
├── header.js # 顶部导航 / 连接状态
├── model-bar.js # 模型选择栏
├── toast.js # Toast 通知
└── lightbox.js # 图片预览
⚙️ 设置项
| 设置 | 说明 | 默认值 |
|---|---|---|
| Ollama 服务地址 | API 端点 | http://127.0.0.1:11434 |
| 系统提示词 | 全局 System Prompt | 关闭 |
| 上下文长度 | num_ctx 参数 |
24576 tokens |
| Think 模式 | 启用深度推理（需要模型支持） | 关闭 |
📦 数据导出
支持以下导出格式：
- Markdown — 单会话导出，便于阅读
- HTML — 带样式的离线页面
- TXT — 纯文本备份
- JSON — 全量备份/迁移，可跨设备导入
🛠️ 技术栈
- 纯原生 JS — 零依赖（除 marked.js），无构建步骤
- IndexedDB — 异步持久化，支持大数据存储
- Fetch API + ReadableStream — 流式 NDJSON 解析
- PWA — Service Worker 离线缓存
- CSS Variables — 暗色主题，响应式布局
🔒 安全
- 内置 HTML 净化器（白名单标签 + 属性过滤）
- Markdown 链接协议白名单（http/https/mailto/tel）
- 阻止
javascript:/vbscript:/data:协议注入 - 输入内容自动转义
📄 License
MIT