内部专用AI助手（Chrome边栏扩展）-AI Chatbot Side Panel
2025-05-30 10:31:03
行业：企业内部管理、企业服务(saas)
载体：插件
技术：JavaScript
业务和功能介绍
这是一个基于Chrome浏览器的AI聊天扩展程序，名为"AI Chatbot Extension"。该扩展使用Chrome的侧边栏功能提供一个现代化的聊天界面，允许用户与基于Azure OpenAI API的GPT-4o模型进行交互。
此扩展以聊天对话的形式，为用户提供了一个便捷的工作方式，可以在浏览工作网页的同时随时访问强大的AI助手，特别适合需要频繁使用AI服务进行特定内容查询、生成或图像分析的日常工作场景。
（此项目为企业内部定制项目，服务于企业内部的已授权团队成员。）
- 智能对话：通过Azure OpenAI的GPT-4o模型提供自然、流畅的对话体验，支持上下文记忆，使对话更加连贯。
- 图像分析：用户可以直接粘贴图片到聊天界面，AI能够识别并分析图片内容，特别适合UI设计审查和图像内容识别。
- Markdown渲染：AI回复支持完整的Markdown格式，包括文本样式、列表、表格等，使回复内容更加结构化和易读。
- 代码块优化：自动识别代码片段并提供语法高亮显示，配备便捷的复制按钮，支持一键复制代码。
- 历史记录管理：可配置的聊天历史记录系统，用户可自定义保存的历史记录数量和上下文大小，平衡记忆能力与性能需求。
- 个性化配置：提供直观的设置界面，允许用户自定义API密钥、历史记录设置等参数。
- 时间感知：根据当前时间自动生成相应的问候语，增强用户体验的个性化。
- 图像预览与放大：支持图片预览功能，点击可放大查看图片细节，提升用户查看体验。
此扩展完美实现了现代化UI设计和强大的AI聊天机器人功能，为用户提供了一个随时可用的智能助手，为企业内部日常工作的查询和引导提供即时支持。
此扩展以聊天对话的形式，为用户提供了一个便捷的工作方式，可以在浏览工作网页的同时随时访问强大的AI助手，特别适合需要频繁使用AI服务进行特定内容查询、生成或图像分析的日常工作场景。
（此项目为企业内部定制项目，服务于企业内部的已授权团队成员。）
- 智能对话：通过Azure OpenAI的GPT-4o模型提供自然、流畅的对话体验，支持上下文记忆，使对话更加连贯。
- 图像分析：用户可以直接粘贴图片到聊天界面，AI能够识别并分析图片内容，特别适合UI设计审查和图像内容识别。
- Markdown渲染：AI回复支持完整的Markdown格式，包括文本样式、列表、表格等，使回复内容更加结构化和易读。
- 代码块优化：自动识别代码片段并提供语法高亮显示，配备便捷的复制按钮，支持一键复制代码。
- 历史记录管理：可配置的聊天历史记录系统，用户可自定义保存的历史记录数量和上下文大小，平衡记忆能力与性能需求。
- 个性化配置：提供直观的设置界面，允许用户自定义API密钥、历史记录设置等参数。
- 时间感知：根据当前时间自动生成相应的问候语，增强用户体验的个性化。
- 图像预览与放大：支持图片预览功能，点击可放大查看图片细节，提升用户查看体验。
此扩展完美实现了现代化UI设计和强大的AI聊天机器人功能，为用户提供了一个随时可用的智能助手，为企业内部日常工作的查询和引导提供即时支持。
项目实现
本项目采用模块化架构实现，主要包含以下关键组件：
- UI界面实现：通过HTML、CSS构建现代化聊天界面，利用CSS Flexbox和Grid实现响应式布局，确保在Chrome侧边栏中的良好显示效果。界面包括聊天消息区、输入框、配置模态框等组件。
- DOM操作与事件处理：使用原生JavaScript进行DOM操作，通过事件委托模式处理用户交互，包括消息发送、图片粘贴和配置更改等操作。
- AI通信模块：通过Fetch API实现与Azure OpenAI服务的通信，构建请求头部和消息格式，处理响应数据并展示在界面中。支持文本和图像的多模态交互。
- 存储管理：利用Chrome Storage API实现配置和聊天历史的持久化存储，区分sync和local存储类型，确保用户数据的安全性和可访问性。
- Markdown渲染：集成Marked.js库处理AI回复中的Markdown格式，增强了文本展示的丰富度，特别是对代码块的处理添加了复制功能和语法高亮。
- 图像处理：使用FileReader API和Data URL实现图像的粘贴、预览和发送功能，支持点击放大查看细节。
- 日志系统：自定义Logger模块记录应用运行状态，便于调试和问题排查，支持不同级别的日志记录。
- Chrome扩展集成：遵循Manifest V3规范开发，利用后台服务、内容脚本和侧边栏API实现浏览器扩展功能，确保与Chrome浏览器的无缝集成。
整体实现采用了现代JavaScript特性和最佳实践，确保代码的可维护性和性能表现。
- UI界面实现：通过HTML、CSS构建现代化聊天界面，利用CSS Flexbox和Grid实现响应式布局，确保在Chrome侧边栏中的良好显示效果。界面包括聊天消息区、输入框、配置模态框等组件。
- DOM操作与事件处理：使用原生JavaScript进行DOM操作，通过事件委托模式处理用户交互，包括消息发送、图片粘贴和配置更改等操作。
- AI通信模块：通过Fetch API实现与Azure OpenAI服务的通信，构建请求头部和消息格式，处理响应数据并展示在界面中。支持文本和图像的多模态交互。
- 存储管理：利用Chrome Storage API实现配置和聊天历史的持久化存储，区分sync和local存储类型，确保用户数据的安全性和可访问性。
- Markdown渲染：集成Marked.js库处理AI回复中的Markdown格式，增强了文本展示的丰富度，特别是对代码块的处理添加了复制功能和语法高亮。
- 图像处理：使用FileReader API和Data URL实现图像的粘贴、预览和发送功能，支持点击放大查看细节。
- 日志系统：自定义Logger模块记录应用运行状态，便于调试和问题排查，支持不同级别的日志记录。
- Chrome扩展集成：遵循Manifest V3规范开发，利用后台服务、内容脚本和侧边栏API实现浏览器扩展功能，确保与Chrome浏览器的无缝集成。
整体实现采用了现代JavaScript特性和最佳实践，确保代码的可维护性和性能表现。
示例图片视频
相似推荐
memRagAgent - 智能认知记忆系统
开源地址：https://github.com/daoyou-zhang/memRangeAgent
### 记忆增强检索（Memory RAG）
系统的核心是三层记忆架构的实现。情节记忆（Episodic）采用 PostgreSQL 存储，每条记录包含对话内容、时间戳、用户 ID、会话 ID 等元数据，并通过向量化技术生成 embedding，支持语义检索。语义记忆（Semantic）通过 LLM 从情节记忆中提炼，存储抽象概念、用户偏好、领域知识等，形成结构化的知识条目。程序记忆（Procedural）记录成功的工具调用序列和操作流程，支持流程复用。
向量检索基于余弦相似度算法，将用户输入向量化后，在记忆库中检索最相关的历史记录。检索结果按相关性和时间衰减加权排序，确保既考虑语义相关性，又优先召回近期记忆。通过 Redis 缓存热点查询，将 RAG 检索延迟控制在 100ms 以内。
### 认知控制器（Cognitive Controller）
认知流程分为四个阶段：意图理解 → 上下文聚合 → 回复生成 → 学习闭环。意图理解使用独立的快速模型（qwen-flash），低温度（0.1）保证稳定的 JSON 输出，分析用户意图类别、实体、置信度和是否需要工具调用。上下文聚合从记忆服务获取用户画像、工作记忆（最近对话）和 RAG 检索结果，从知识服务获取图谱查询结果，融合成完整上下文。回复生成使用高质量模型（deepseek-v3），温度 0.5 保证创造性和稳定性的平衡。学习闭环将对话存入情节记忆，触发异步的画像聚合任务。
### 知识图谱集成
采用 Neo4j 图数据库构建知识图谱，支持实体（Entity）、关系（Relationship）、属性（Property）的灵活建模。实体包括人物、概念、事件等，关系包括"属于"、"相关"、"导致"等语义连接。通过 Cypher 查询语言实现路径查询、社区发现、中心性分析等图算法。
电商类型-Home Live
HomeLive是一款服务于全球用户的在线外贸交易平台，核心定位是打破跨境购物壁垒，满足中国消费者不出国门就能便捷选购全球商品的需求。平台汇集全球各地知名品牌供应商，打造多元化服务体系，涵盖在线直播带货频道、认证商家一站式购物服务，同时保障海外商品现货库存充足，提供全球货物护航直邮服务，全方位提升跨境购物的便捷性与安全性。
.该工具仅采集互联网上公开可商用、无版权声明且符合国家
为解决电商从业者手动整理商品信息效率低的问题，我用 Python 开发了一款自动爬取公开商品列表的小工具，能按设定的关键词抓取商品名称、价格和销量信息，并自动整理成表格格式，帮助快速汇总竞品或目标类目的基础数据，降低人工整理的时间成本。该工具仅支持爬取用户授权或平台公开可商用的非版权类图片与基础数据，不涉及影视、付费素材等有版权保护的内容，全程遵守网站 robots 协议和数据使用规范，确保爬取行为合法合规
本地生活小程序
本地生活小程序，为了相应政策的拉动消费，让本地人群实现物美价廉的购物体验，包括在线超市，本地商家等，超市支持配送到家，平台商户折扣消费后返积分，积分可以兑换优惠券，再次消费，打造良性循环。
充电宝小程序，用于充电宝租借，电池包租借小程序用于电池包租借
立项背景和目标：
随着共享经济发展，共享充电宝已成为人们外出时解决手机电量焦虑的刚需。本项目旨在开发一款跨平台的充电宝租借小程序/App，覆盖用户从查找附近机柜、扫码租借、在线支付到归还的全流程。同时通过电池包租借功能拓展业务场景（如便携充电包），提升用户体验与平台收益。
核心功能模块：
地图找点：基于LBS显示附近可用机柜，支持按距离/空闲状态筛选，一键导航。
扫码租借：扫描机柜二维码或手动输入编号，快速租借充电宝或电池包。
信用免押：接入第三方信用分（如芝麻信用），高信用用户免押金租借。
订单与支付：实时计费，支持微信/支付宝支付，订单历史可查，押金秒退。
用户中心：个人信息、优惠券、客服反馈、使用帮助等。
业务流程描述：
用户打开小程序 → 授权定位 → 首页地图展示附近机柜 → 点击机柜查看详情（剩余充电宝数、距离）→ 选择“扫码租借”扫描二维码 → 确认租借，系统判断信用分 → 免押/支付押金 → 机柜弹出充电宝 → 使用中可查看剩余电量/计费 → 归还时扫描任意同品牌机柜二维码 → 插入充电宝 → 系统自动结算费用并扣款 → 订单完成。
帮助文档
Copyright @ 2021-2024 程聚宝 | 浙ICP备2021014372号
人工客服