WebChat:开源的网页内容增强问答 AI 助手,基于 Chrome 扩展的最佳实践开发,支持自定义 API 和本地大模型

274 阅读3分钟

❤️ 如果你也关注大模型与 AI 的发展现状,且对大模型应用开发非常感兴趣,我会快速跟你分享最新的感兴趣的 AI 应用和热点信息,也会不定期分享自己的想法和开源实例,欢迎关注我哦!

🥦 微信公众号|搜一搜:蚝油菜花 🥦


🚀 快速阅读

  1. WebChat 是基于 Chrome 扩展开发的 AI 助手,能够基于当前网页内容进行智能问答。
  2. 支持自定义 API 和本地大模型,消息渲染支持 Markdown 格式。
  3. 提供详细的安装和使用指南,确保用户轻松上手。

正文(附运行示例)

WebChat 是什么

WebChat.png

演示视频:github.com/user-attach…

WebChat 是一个完全开源的 AI 助手,基于 Chrome 扩展的最佳实践开发。它可以基于当前网页内容进行智能问答,支持自定义 API 和本地大模型。WebChat 的消息渲染支持 Markdown 格式,提供流式输出回答内容,使用户能够更方便地理解和分析当前网页的信息。

WebChat 的主要功能

  • 基于网页内容的智能问答:WebChat 能够根据当前网页的内容回答用户的问题。
  • 流式输出回答内容:答案会逐步显示,提升用户体验。
  • 消息渲染支持 Markdown 格式:支持 Markdown 格式的消息渲染,使回答更加清晰易读。
  • 支持自定义 API 和本地模型:用户可以配置自定义 API 接口或使用本地部署的开源模型。

WebChat 的技术原理

  • Chrome 扩展:WebChat 作为一个 Chrome 扩展,通过注入内容脚本与网页进行交互。
  • 自定义 API:支持 OpenAI 兼容的 API 接口,用户可以配置自定义端点。
  • 本地模型:支持使用本地部署的 Ollama 模型,通过配置环境变量和启动服务,实现与本地模型的交互。

如何安装 WebChat

  1. 下载项目代码:
git clone https://github.com/Airmomo/WebChat.git
  1. 打开 Chrome 扩展管理页面 (chrome://extensions/)
  2. 开启"开发者模式"
  3. 点击"加载已解压的扩展程序"
  4. 选择项目文件夹

基本使用说明

  • 插件开启后刷新页面会显示一颗悬浮球,点击它打开对话框。
  • 输入问题后点击发送并等待 AI 回答。
  • 右键点击历史消息可复制内容。

支持的 API

自定义 API

  • 支持 OpenAI 兼容的 API 接口:用户可以配置自定义端点。

Ollama 本地部署开源模型

  1. 官网下载安装 Ollama
  2. 设置允许跨域并启动:
  • macOS
launchctl setenv OLLAMA_ORIGINS "*"
  • Windows
  1. 打开控制面板-系统属性-环境变量
  2. 在用户环境变量中新建:
  • 变量名:OLLAMA_HOST,变量值:0.0.0.0
  • 变量名:OLLAMA_ORIGINS,变量值:*
  • Linux
OLLAMA_ORIGINS="*" ollama serve
  1. 安装模型:
ollama pull qwen2.5
  1. 启动或重启 Ollama 服务:
ollama serve
  1. 注意事项
  • 可使用自定义 API 接口地址来请求 ollama 服务:http://localhost:11434/v1/chat/completions
  • 如果是在局域网内其他主机运行的 ollama 服务,那么请将localhost替换为你的主机 IP 地址。

注意事项

  1. 使用自定义 API 需要配置 API 密钥。
  2. 使用本地模型需要先安装并启动 ollama,并确保服务在后台运行。
  3. 确保网络连接正常。
  4. 网页内容仅用于当前对话,刷新页面后对话的内容以及历史记录会丢失。

隐私说明

  • 本插件完全开源,不会收集任何个人信息。
  • 配置信息默认保存在本地浏览器中。

资源

  1. 项目官网:github.com/Airmomo/Web…
  2. Ollama 官网:ollama.ai

❤️ 如果你也关注大模型与 AI 的发展现状,且对大模型应用开发非常感兴趣,我会快速跟你分享最新的感兴趣的 AI 应用和热点信息,也会不定期分享自己的想法和开源实例,欢迎关注我哦!

🥦 微信公众号|搜一搜:蚝油菜花 🥦