thzxx
38edaee0f0
将单文件巨型 IIFE (1608行) 拆分为 14 个 ES Module： 核心层: - js/state.js - 轻量级响应式状态管理 (发布-订阅) - js/utils.js - 通用工具函数 - js/sanitizer.js - HTML XSS 净化器 - js/marked-config.js - Markdown 渲染器配置 组件层: - js/components/chat-area.js - 消息渲染/流式更新/导出 - js/components/input-area.js - 文本输入/图片上传/发送 - js/components/history-modal.js - 历史记录面板/搜索/分页 - js/components/settings-modal.js - 设置面板/数据管理 - js/components/header.js - 顶部导航/连接状态 - js/components/model-bar.js - 模型选择栏 - js/components/toast.js - Toast 通知 - js/components/lightbox.js - 图片预览 入口层: - js/app.js - 主入口/初始化协调 index.html: 1608行 → 204行纯模板
🦙 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 # 主页面 + 应用逻辑
├── style.css # 暗色主题样式
├── ollama-api.js # Ollama REST API 封装
├── chat-db.js # IndexedDB 持久化层
├── marked.esm.js # Markdown 渲染器
├── sw.js # Service Worker (PWA)
├── manifest.json # PWA 清单
└── README.md
⚙️ 设置项
| 设置 | 说明 | 默认值 |
|---|---|---|
| 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