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

本文涉及的产品
NLP 自学习平台,3个模型定制额度 1个月
NLP自然语言处理_高级版,每接口累计50万次
NLP自然语言处理_基础版,每接口每天50万次
简介: WebChat 是一个基于 Chrome 扩展开发的 AI 助手,能够帮助用户理解和分析当前网页的内容,支持自定义 API 和本地大模型。

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

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


🚀 快速阅读

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

正文(附运行示例)

WebChat 是什么

https://github.com/user-attachments/assets/a0ae0231-cc22-43d4-811f-b1a6e95f3d19

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. 项目官网:https://github.com/Airmomo/WebChat
  2. Ollama 官网:https://ollama.ai

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

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

相关文章
|
23天前
|
人工智能 API 开发工具
【重磅发布】 免费领取阿里云百炼AI大模型100万Tokens教程出炉,API接口实战操作,DeepSeek-R1满血版即刻体验!
阿里云百炼是一站式大模型开发及应用构建平台,支持开发者和业务人员轻松设计、构建大模型应用。通过简单操作,用户可在5分钟内开发出大模型应用或在几小时内训练专属模型,专注于创新。
502 88
【重磅发布】 免费领取阿里云百炼AI大模型100万Tokens教程出炉,API接口实战操作,DeepSeek-R1满血版即刻体验!
|
1月前
|
人工智能 自然语言处理 搜索推荐
【上篇】-分两篇步骤介绍-如何用topview生成和自定义数字人-关于AI的使用和应用-如何生成数字人-优雅草卓伊凡-如何生成AI数字人
【上篇】-分两篇步骤介绍-如何用topview生成和自定义数字人-关于AI的使用和应用-如何生成数字人-优雅草卓伊凡-如何生成AI数字人
135 24
【上篇】-分两篇步骤介绍-如何用topview生成和自定义数字人-关于AI的使用和应用-如何生成数字人-优雅草卓伊凡-如何生成AI数字人
|
1月前
|
人工智能 JSON 自然语言处理
AI 程序员的4个分身 | 代码生成专家+注释精灵+API集成助手+智能调试伙伴
AI 程序员的4个分身 | 代码生成专家+注释精灵+API集成助手+智能调试伙伴
198 35
|
27天前
|
人工智能 Rust 安全
DeepClaude:结合 DeepSeek R1 和 Claude AI 各自优势开发的 AI 应用平台,支持 API 调用和零延迟的即时响应
DeepClaude 是一个开源的 AI 应用开发平台,结合了 DeepSeek R1 和 Claude 模型的优势,提供即时响应、端到端加密和高度可配置的功能。
295 4
DeepClaude:结合 DeepSeek R1 和 Claude AI 各自优势开发的 AI 应用平台,支持 API 调用和零延迟的即时响应
|
7天前
|
人工智能 Java API
ai-api-union项目,适配各AI厂商api
本项目旨在实现兼容各大模型厂商API的流式对话和同步对话接口,现已支持智谱、豆包、通义、通义版DeepSeek。项目地址:[https://gitee.com/alpbeta/ai-api-union](https://gitee.com/alpbeta/ai-api-union)。通过`ChatController`类暴露两个接口,入参为`ChatRequest`,包含会话ID、大模型标识符和聊天消息列表。流式对话返回`Flux<String>`,同步调用返回`String`
80 2
|
2月前
|
人工智能 自然语言处理 API
百聆:集成Deepseek API及语音技术的开源AI语音对话助手,实时交互延迟低至800ms
百聆是一款开源的AI语音对话助手,结合ASR、VAD、LLM和TTS技术,提供低延迟、高质量的语音对话体验,适用于边缘设备和低资源环境。
1084 5
百聆:集成Deepseek API及语音技术的开源AI语音对话助手,实时交互延迟低至800ms
|
1月前
|
API PHP 开发者
速卖通商品详情接口(速卖通API系列)
速卖通(AliExpress)是阿里巴巴旗下的跨境电商平台,提供丰富的商品数据。通过速卖通开放平台(AliExpress Open API),开发者可获取商品详情、订单管理等数据。主要功能包括商品搜索、商品详情、订单管理和数据报告。商品详情接口aliexpress.affiliate.productdetail.get用于获取商品标题、价格、图片等详细信息。开发者需注册账号并创建应用以获取App Key和App Secret,使用PHP等语言调用API。该接口支持多种请求参数和返回字段,方便集成到各类电商应用中。
|
27天前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
64 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
7天前
|
机器学习/深度学习 JSON 算法
淘宝拍立淘按图搜索API接口系列的应用与数据解析
淘宝拍立淘按图搜索API接口是阿里巴巴旗下淘宝平台提供的一项基于图像识别技术的创新服务。以下是对该接口系列的应用与数据解析的详细分析
|
27天前
|
监控 供应链 搜索推荐
亚马逊商品详情接口(亚马逊 API 系列)
亚马逊作为全球最大的电商平台之一,提供了丰富的商品资源。开发者和电商从业者可通过亚马逊商品详情接口获取商品的描述、价格、评论、排名等数据,对市场分析、竞品研究、价格监控及业务优化具有重要价值。接口基于MWS服务,支持HTTP/HTTPS协议,需注册并获得API权限。Python示例展示了如何使用mws库调用接口获取商品详情。应用场景包括价格监控、市场调研、智能选品、用户推荐和库存管理等,助力电商运营和决策。
94 23

热门文章

最新文章