thzxx
41b512c779
- assets/icons/ → 图标资源 (llama.ico, llama.png) - css/ → 样式文件 (style.css) - js/ → 所有业务代码 - js/lib/ → 第三方库 (marked.esm.js) - js/components/ → UI 组件 修正所有 import 路径、HTML 引用、SW 缓存列表
126 lines
4.1 KiB
Markdown
126 lines
4.1 KiB
Markdown
# 🦙 Metona Ollama Client
|
||
|
||
基于原生 JavaScript 的 [Ollama](https://ollama.com) AI 聊天客户端，支持流式对话、多模态图片、Think 推理模式、历史管理，可安装为 PWA 离线使用。
|
||
|
||
|
||
|
||
|
||
|
||
## ✨ 功能特性
|
||
|
||
- **流式对话** — 基于 ReadableStream 的实时打字机效果
|
||
- **多模型支持** — 自动加载 Ollama 已安装模型，一键切换
|
||
- **Think 推理模式** — 可展开/收起的思考过程展示
|
||
- **多模态输入** — 支持图片上传，兼容视觉模型
|
||
- **历史管理** — IndexedDB 持久化，支持搜索、分页、导出（Markdown/HTML/TXT/JSON）
|
||
- **PWA 离线** — Service Worker 缓存，可安装到桌面
|
||
- **连接检测** — 实时状态指示，CORS 问题自动提示
|
||
- **显存管理** — 一键卸载模型释放显存
|
||
- **XSS 防护** — 内置 HTML 净化器，安全渲染 Markdown
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 前置条件
|
||
|
||
1. 安装 [Ollama](https://ollama.com) 并启动服务
|
||
2. 下载至少一个模型（例如 `ollama pull qwen2.5`）
|
||
|
||
### 启动
|
||
|
||
```bash
|
||
# 克隆仓库
|
||
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 和页面不在同一域，需要设置环境变量：
|
||
|
||
```bash
|
||
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
|