Coco-AI 支持嵌入,让你的网站拥有 AI 搜索力
在之前的实践中,我们已经成功地把 Hexo、Hugo 等静态博客和 Coco-AI 检索系统打通了:只要完成向量化索引,就可以通过客户端问答界面实现基于内容的智能检索。
这一层已经很好用了,但总觉得少了点什么——
比如用户还得专门打开一个“AI 客户端”,有点割裂。那能不能像搜索框一样,直接把问答体验嵌进网页里,做到随时可问,实时返回,就像 ChatGPT 驻扎在你自己的网站里?
答案是可以的。从 Coco-AI v0.3 开始,我们终于可以像调用前端组件一样,将搜索框直接嵌入到网页中,而且配置极简,几乎零门槛。
🧱 零配置启动:Coco 搜索框长这样
实际上,哪怕你完全不改配置,直接使用默认参数,就能跑出一个干净、简洁的 AI 搜索框:
它默认采用悬浮式设计,右下角一个小 logo,点击之后弹出一个输入框,你可以直接输入问题,系统自动返回答案。
对于很多不熟前端的朋友来说,这个“即插即用”的特性真的太香了。
🚀 一步到位:HTML 页面嵌入组件
当然,如果你有自己的网页结构,也可以通过标准的 ES Module 写法,把组件嵌入到指定位置。
下面是一个最小 HTML 示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>搜索组件嵌入示例</title><style>body {font-family: sans-serif;padding: 2rem;}#searchbox {margin-top: 20px;border: 1px solid #ccc;padding: 16px;border-radius: 8px;}</style>
</head>
<body><h1>欢迎使用 Cloudsmithy 搜索组件</h1><p>下面是通过 ES Module 引入的搜索框:</p><div id="searchbox"></div><script type="module">import { searchbox } from "http://localhost:9000/integration/cvmhvjl92jog2dokvsd0/widget";searchbox({container: "#searchbox"});</script>
</body>
</html>
✅ 总结一句话:
只要在页面里加一个div
,然后调用searchbox()
,AI 搜索就能跑起来。
🧪 实测效果:Live Server 本地运行
为了确认效果,我用 VS Code 的 Live Server 插件本地打开这个 HTML 文件,页面加载后就能看到组件成功加载,完全不需要编译打包或插件支持:
搜索框组件会自动初始化,可以立即输入问题,体验自然语言问答。
🌀 从 Hexo 编译失败,到想到油猴
本来我打算把这个搜索框组件嵌到 Hexo 博客中,想法很简单:直接在页面模板里引入这个模块。
结果 Hexo 的构建流程不太配合:
- 没法直接在页面里用
import
; - 改动主题文件构建后会被覆盖;
- 找不到原始 HTML,很多逻辑是动态拼装的;
这让我意识到:有时候,静态博客并不是一个容易动手脚的地方。
于是我换了个思路:干脆用油猴脚本直接“外挂”到页面里。
🐵 为什么选 Tampermonkey?
✅ 优点:
- 无需改动原站源码;
- 能在任意网页上注入组件,连别人家的站也行;
- 适合自己内测、小范围使用。
⚠️ 缺点:
- 需要用户安装 Tampermonkey 插件;
- 某些网站的 CSP 策略可能会阻止模块加载。
🧩 油猴脚本完整代码
这是我用的实际代码,只做了最基本的挂载和模块加载操作:
// ==UserScript==
// @name Searchbox Embedder
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 在任意网页中注入 searchbox 小部件
// @author You
// @match *://*/*
// @grant none
// @run-at document-end
// ==/UserScript==(function () {'use strict';// 创建搜索框容器const searchboxDiv = document.createElement('div');searchboxDiv.id = 'searchbox';document.body.appendChild(searchboxDiv);// 插入模块化脚本const script = document.createElement('script');script.type = 'module';script.textContent = `import { searchbox } from "http://localhost:9000/integration/cvmhvjl92jog2dokvsd0/widget";searchbox({ container: "#searchbox" });`;document.body.appendChild(script);
})();
📸 最终效果:Coco 搜索框上线!
下面这个截图就是油猴脚本挂载组件后的样子,运行脚本后,你会在网页右下角看到一个熟悉的 Coco logo,点击它,就能唤出对话框:
你可以输入问题,比如“这篇博客在哪提到 RAG?”系统会自动返回你想要的内容。对于博客站长来说,这种方式几乎等同于给读者配了个“专属智能客服”。
🎯 总结一下,推荐给谁?
不管你是:
- 做个人博客的开发者;
- 运营公司知识库或文档站;
- 想给现有网页加点 AI “魔法”;
Coco-AI 的嵌入式搜索组件,都是一个轻量又实用的方案。
你可以选择两种方式:
嵌入方式 | 适用场景 | 优点 | 限制 |
---|---|---|---|
HTML 原生嵌入 | 可控部署的网站、博客模板 | 不依赖任何插件、原生体验 | 需要动源码、构建系统支持模块化 |
Tampermonkey 插件 | 自测网页、不可修改站点 | 快速部署、无需改网页 | 需要浏览器插件、不适合普通用户 |
相关文章:
Coco-AI 支持嵌入,让你的网站拥有 AI 搜索力
在之前的实践中,我们已经成功地把 Hexo、Hugo 等静态博客和 Coco-AI 检索系统打通了:只要完成向量化索引,就可以通过客户端问答界面实现基于内容的智能检索。 这一层已经很好用了,但总觉得少了点什么—— 比如用户还得专门打开一…...
深入解析Java哈希表:从理论到实践
哈希表(Hash Table)是计算机科学中最重要的数据结构之一,也是Java集合框架的核心组件。本文将以HashMap为切入点,深入剖析Java哈希表的实现原理、使用技巧和底层机制。 一、哈希表基础原理 1. 核心概念 键值对存储:通…...
leetcode76.最小覆盖子串
思路源于 【小白都能听懂的算法课】【力扣】【LeetCode 76】最小覆盖子串|滑动窗口|字符串 初始化先创建t的哈希表记录t中的字符以及它出现的次数,t的have记录t中有几种字符 s的哈希表记录窗口中涵盖t的字符以及它出现的次数,初始…...
【HTB】Windwos-easy-Legacy靶机渗透
靶机介绍,一台很简单的WIndows靶机入门 知识点 msfconsole利用 SMB历史漏洞利用 WIndows命令使用,type查看命令 目录标题 一、信息收集二、边界突破三、权限提升 一、信息收集 靶机ip:10.10.10.4攻击机ip:10.10.16.26 扫描TC…...
一问讲透redis持久化机制-rdb aof
一问讲透redis持久化机制-rdb aof 文章目录 一问讲透redis持久化机制-rdb aof前言一、RDB二、AOF二、原理 前言 提示:这里可以添加本文要记录的大概内容: redis作为内存数据库,常常作为系统的缓存使用,但是内存是断电清空数据的…...
【大模型基础_毛玉仁】6.4 生成增强
目录 6.4 生成增强6.4.1 何时增强1)外部观测法2)内部观测法 6.4.2 何处增强6.4.3 多次增强6.4.4 降本增效1)去除冗余文本2)复用计算结果 6.4 生成增强 检索器得到相关信息后,将其传递给大语言模型以期增强模型的生成能…...
4.1-泛型编程深入指南
4.1 泛型编程深入指南 本节将带您深入探索C#泛型机制在游戏开发中的高级应用。通过游戏对象池、数据管理器、事件系统等实际案例,您将学习如何运用泛型构建高效、灵活的游戏系统。掌握这些知识将帮助您开发出性能更好、架构更清晰的游戏。 前置知识 在学习本节内容…...
《K230 从熟悉到...》识别机器码(AprilTag)
《K230 从熟悉到...》识别机器码(aprirltag) tag id 《庐山派 K230 从熟悉到...》 识别机器码(AprilTag) AprilTag是一种基于二维码的视觉标记系统,最早是由麻省理工学院(MIT)在2008年开发的。A…...
操作系统(二):实时系统介绍与实例分析
目录 一.概念 1.1 分类 1.2 主要指标 二.实现原理 三.主流实时系统对比 一.概念 实时系统(Real-Time System, RTS)是一类以时间确定性为核心目标的计算机系统,其设计需确保在严格的时间约束内完成任务响应。 1.1 分类 根据时间约束的严…...
虚拟电商-话费充值业务(六)话费充值业务回调补偿
一、话费充值回调业务补偿 业务需求:供应商对接下单成功后充吧系统将订单状态更改为:等待确认中,此时等待供应商系统进行回调,当供应商系统回调时说明供应商充值成功,供应商回调充吧系统将充吧的订单改为充值成功&…...
加密解密工具箱 - 专业的在线加密解密工具
加密解密工具箱 - 专业的在线加密解密工具 您可以通过以下地址访问该工具: https://toolxq.com/static/hub/secret/index.html 工具简介 加密解密工具箱是一个功能强大的在线加密解密工具,支持多种主流加密算法,包括 Base64、AES、RSA、DES…...
印度股票实时数据API接口选型指南:iTick.org如何成为开发者优选
在全球金融数字化浪潮中,印度股票市场因其高速增长潜力备受关注。对于量化交易开发者、金融科技公司而言,稳定可靠的股票报价API接口是获取市场数据的核心基础设施。本文将深度对比主流印度股票API,并揭示iTick在数据服务领域的独特优势。 一…...
使用python实现视频播放器(支持拖动播放位置跳转)
使用python实现视频播放器(支持拖动播放位置跳转) Python实现视频播放器,在我早期的博文中介绍或作为资料记录过 Python实现视频播放器 https://blog.csdn.net/cnds123/article/details/145926189 Python实现本地视频/音频播放器https://bl…...
Python星球日记 - 第2天:数据类型与变量
🌟引言: 上一篇:Python星球日记 - 第1天:欢迎来到Python星球 名人说:莫听穿林打叶声,何妨吟啸且徐行。—— 苏轼《定风波莫听穿林打叶声》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和…...
CyclicBarrier、Semaphore、CountDownLatch的区别,适用场景
CyclicBarrier、Semaphore 和 CountDownLatch 是 Java 并发包中用于线程协作的工具类,它们虽然都与线程同步相关,但设计目的和使用场景有显著差异。以下是它们的核心区别和典型应用场景: 1. CountDownLatch 核心机制 一次性计数器…...
【愚公系列】《高效使用DeepSeek》050-外汇交易辅助
🌟【技术大咖愚公搬代码:全栈专家的成长之路,你关注的宝藏博主在这里!】🌟 📣开发者圈持续输出高质量干货的"愚公精神"践行者——全网百万开发者都在追更的顶级技术博主! 👉 江湖人称"愚公搬代码",用七年如一日的精神深耕技术领域,以"…...
java短连接,长连接
在网络通信中,短连接(Short Connection)是指客户端与服务器建立连接后,仅完成一次或几次数据交互就立即断开连接的通信方式。以下是关于短链接的详细说明: 一、短链接的核心特点 连接短暂 数据传输完成后立即关闭连接…...
从零开始训练Codebook:基于ViT的图像重建实践
完整代码在文末,可以一键运行。 1. 核心原理 Codebook是一种离散表征学习方法,其核心思想是将连续特征空间映射到离散的码本空间。我们的实现方案包含三个关键组件: 1.1 ViT编码器 class ViTEncoder(nn.Module):def __init__(self, codebo…...
每日一题洛谷P8664 [蓝桥杯 2018 省 A] 付账问题c++
P8664 [蓝桥杯 2018 省 A] 付账问题 - 洛谷 (luogu.com.cn) 思路:要使方差小,那么钱不能一下付的太多,可以让钱少的全付玩,剩下还需要的钱再让钱多的付(把钱少的补上)。 将钱排序,遍历一遍&…...
蓝桥杯真题——传送阵
原题连接:蓝桥杯2024年第十五届省赛真题-传送阵 - C语言网 知识点:并查集 题目描述 小蓝在环球旅行时来到了一座古代遗迹,里面并排放置了 n 个传送阵,进入第 i 个传送阵会被传送到第 ai 个传送阵前,并且可以随时选择…...
解释回溯算法,如何应用回溯算法解决组合优化问题?
一、回溯算法核心原理 回溯算法本质是暴力穷举的优化版本,采用"试错剪枝"策略解决问题。其核心流程如下: 路径构建:记录当前选择路径选择列表:确定可用候选元素终止条件:确定递归结束时机剪枝优化…...
opencv连接vs2015
需要改的地方: 1.debug x64 2.vc目录 包含目录:D:\softword\opencv\opencv3416\opencv\build\include 3.vc目录 库目录:D:\softword\opencv\opencv3416\opencv\build\x64\vc14\lib 4.链接器——输入:D:\softword\ope…...
用matlab搭建一个简单的图像分类网络
文章目录 1、数据集准备2、网络搭建3、训练网络4、测试神经网络5、进行预测6、完整代码 1、数据集准备 首先准备一个包含十个数字文件夹的DigitsData,每个数字文件夹里包含1000张对应这个数字的图片,图片的尺寸都是 28281 像素的,如下图所示…...
移动端六大语言速记:第6部分 - 错误处理与调试
移动端六大语言速记:第6部分 - 错误处理与调试 本文将对比Java、Kotlin、Flutter(Dart)、Python、ArkTS和Swift这六种移动端开发语言在错误处理与调试方面的特性,帮助开发者理解和掌握各语言的异常处理机制。 6. 错误处理与调试 6.1 异常处理 各语言异常处理的语法对比:…...
【数据库】达梦arm64安装
话不多说,快速开始~ 1.下载 进入官网: 产品下载 | 达梦在线服务平台 下载安装包。 选飞腾、鲲鹏都可以,都是arm架构的。我选择的是: 直接下载地址是https://download.dameng.com/eco/adapter/DM8/202502/dm8_20250117_HWarm920…...
QTableWidget 中insertRow(0)(头插)和 insertRow(rowCount())(尾插)的性能差异
一、目的 在 Qt 的 QTableWidget 中,insertRow(0) (头插)和 insertRow(rowCount())(尾插)在性能上存在显著差异。 二、QAbstractItemModel:: insertRows 原文解释 QAbstractItemModel Class | Qt Core 5.15.18 AI 解…...
使用MFC ActiveX开发KingScada控件(OCX)
最近有个需求,要在KingScada上面开发一个控件。 原来是用的WinCC,WinCC本身是支持调用.net控件,就是winform控件的,winform控件开发简单,相对功能也更丰富。奈何WinCC不是国产的。 话说KingScada,国产组态软…...
大模型学习二:DeepSeek R1+蒸馏模型组本地部署与调用
一、说明 DeepSeek R1蒸馏模型组是基于DeepSeek-R1模型体系,通过知识蒸馏技术优化形成的系列模型,旨在平衡性能与效率。 1、技术路径与核心能力 基础架构与训练方法 DeepSeek-R1-Zero:通过强化学习(RL)训练&…...
通过 Markdown 改进 RAG 文档处理
通过 Markdown 改进 RAG 文档处理 作者:Tableau 原文地址:https://zhuanlan.zhihu.com/p/29139791931 通过 Markdown 改进 RAG 文档处理https://mp.weixin.qq.com/s/LOBOKNA71dANXHuwxe7yxw 如何将 PDF 转换为 Markdown 以获得更好的 LLM RAG 结果 Mar…...
Java学习总结-IO流
什么IO流? 以内存为主体。input:磁盘向内存输入内容。output:内存向磁盘输入内容。 IO流的分类:...
python发送qq邮件
1.发送邮件的前提是你的qq邮箱设置能够用程序访问 这个服务点打开 就在 设置->账号 中 可以找到 # 导入 smtplib 库,用于实现 SMTP 协议,可实现邮件的发送功能 import smtplib # 从 email.mime.multipart 模块导入 MIMEMultipart 类,用…...
使用Deployment运行无状态应用
使用Deployment运行无状态应用 文章目录 使用Deployment运行无状态应用[toc]一、工作负载资源与控制器二、ReplicationController、ReplicaSet和Deployment1. ReplicationController(已淘汰)2. ReplicaSet(ReplicationController 的增强版&am…...
QT Quick(C++)跨平台应用程序项目实战教程 6 — 弹出框
目录 1. Popup组件介绍 2. 使用 上一章内容完成了音乐播放器程序的基本界面框架设计。本小节完成一个简单的功能。单击该播放器顶部菜单栏的“关于”按钮,弹出该程序的相关版本信息。我们将使用Qt Quick的Popup组件来实现。 1. Popup组件介绍 Qt 中的 Popup 组件…...
Design Compiler:库特征分析(ALIB)
相关阅读 Design Compilerhttps://blog.csdn.net/weixin_45791458/category_12738116.html?spm1001.2014.3001.5482 简介 在使用Design Compiler时,可以对目标逻辑库进行特征分析,并创建一个称为ALIB的伪库(可以被认为是缓存)&…...
2025高频面试设计模型总结篇
文章目录 设计模型概念单例模式工厂模式策略模式责任链模式 设计模型概念 设计模式是前人总结的软件设计经验和解决问题的最佳方案,它们为我们提供了一套可复用、易维护、可扩展的设计思路。 (1)定义: 设计模式是一套经过验证的…...
41. 评论日记
越复杂的结构越脆弱,你不能因为有智驾有只能,你就全交给它了,手机永久了还发热呢,你全交给它那你要死了也怪不了谁。 这年头的手机基本都有防水,但是你天天拿着这个在泳池里玩,哪天炸了我都只能说炸的响炸的…...
Python第七章09:自定义python包.py
# 自定义python包# 从物理上看,包就是一个文件夹,在该文件夹下包含了一个_init_.py文件,该文件夹可用于包含多个模块文件 # 从逻辑上看,包的本质依然是模块 # _init_.py 标识python包,没有就是普通文件夹࿰…...
基于大模型预测升主动脉瘤的多维度诊疗研究报告
目录 一、引言 1.1 研究背景 1.2 研究目的与意义 二、升主动脉瘤概述 2.1 定义与分类 2.2 发病原因与机制 2.3 流行病学现状 三、大模型技术原理及应用现状 3.1 大模型基本原理 3.2 在医疗领域的应用进展 3.3 针对升主动脉瘤预测的独特价值 四、术前大模型预测方案…...
Lua中table函数使用详解
目录 1. table.concat(list [, sep [, i [, j]]])2. table.insert(list, [pos,] value)3. table.move(src, a, b, dest [, dest_pos]) (Lua 5.3)4. table.pack(...) (Lua 5.2)5. table.remove(list [, pos])6. table.sort(list [, comp])7. table.unpack(list [, i [, j]])总结…...
如何在Windows上找到Python安装路径?两种方法快速定位
原文:如何在Windows上找到Python安装路径?两种方法快速定位 | w3cschool笔记 在 Windows 系统上找到 Python 的安装路径对于设置环境变量或排查问题非常重要。本文将介绍两种方法,帮助你找到 Python 的安装路径:一种是通过命令提…...
图形库 EasyX - EasyX 初识(EasyX 概述、EasyX 下载与安装、打开一个窗口、打开一个彩色窗口、绘制简易图形、输出文字)
一、EasyX 概述 EasyX 是一款专为 C 开发者设计的轻量级图形库,主要面向 Windows 平台,它有如下特点 EasyX 的 API 设计简洁直观,易学易用,绘图效果所见即所得 二、EasyX 下载与安装 1、EasyX 下载 官方网址:https…...
《深度探秘:SQL助力经典Apriori算法实现》
在数据的广袤世界里,隐藏着无数有价值的信息,等待着我们去挖掘和发现。关联规则挖掘算法,作为数据挖掘领域的关键技术,能够从海量数据中找出事物之间潜在的关联关系,为商业决策、学术研究等诸多领域提供有力支撑。其中…...
AVR128单片机红外遥控8*8LED点阵屏显示
1)将接收到的红外解码信号用LCD液晶显示屏显示。 2)将接收到的5种红外解码信号分别控制88的液晶点阵屏MATRIX-88-GREEN (颜色可以自定)进行不同的显示:整行从上到下、从下到上轮流显示;整列从左到右、从右到左轮流显示;…...
前端Uniapp接入UviewPlus详细教程!!!
相信大家在引入UviewPlusUI时遇到很头疼的问题,那就是明明自己是按照官网教程一步一步的走,为什么到处都是bug呢?今天我一定要把这个让人头疼的问题解决了! 1.查看插件市场 重点: 我们打开Dcloud插件市场搜素uviewPl…...
【c++深入系列】:类与对象详解(中)
🔥 本文专栏:c 🌸作者主页:努力努力再努力wz 💪 今日博客励志语录: 不是因为看到希望才坚持,而是坚持了才能看到希望 那么上一篇博客我讲解了什么是类和对象以及类和对象是怎么定义的࿰…...
【Linux】远程登录时,使用图形界面报错:MoTTY X11 proxy: Unsupported authorisation protocol
1、问题描述 使用 MobaXterm 远程登录Ubuntu后,使用sudo权限运行图形界面程序报错: MoTTY X11 proxy: Unsupported authorisation protocol (gpartedbin:10518): Gtk-WARNING **: 22:01:34.377: cannot open display: localhost:10.02、查看SSH配置 修改 SSH 服务端配置,…...
作用域与上下文:JavaScript魔法森林探秘
在JavaScript的魔法森林里,作用域和上下文是两位神秘的守护者,它们掌控着代码的逻辑流向和变量的生杀大权。今天,就让我们一起踏入这片神奇的土地,揭开全局作用域、函数作用域和闭包的神秘面纱,看它们如何影响我们的代…...
虚拟电商-话费充值业务(五)充值成功逻辑和网络异常重试逻辑
一、网络异常重试逻辑编写 如果在对接供应商的过程中出现了网络异常,我们需要做一个补偿机制,在任务类型枚举类:TaskTypeEnum中有一种业务状态码是针对远程调用失败的 步骤一:在对接供应商的方法:SupplierServiceImp…...
42.评论日记
怎么看待算命? 我能算到你今晚睡觉前会上一次厕所。 你可以选择相信我算的内容,也可以不信。 你也可以有感觉要上厕所的时候不去拉兜里。 也可以选择相信,早早的拿好纸做准备。 你今晚可能不止上一次,也可能今晚没吃没喝早早…...
MTK-GMS版本国内WIFI受限问题
MTK-GMS版本国内WIFI受限问题解决 文章目录 问题参考资料解决方案方案一 修改配置坑点 方案二 直接修改属性 问题 最近负责ROOM 产品,出现WIFI受限显示,但是网络是通畅的。 GMS 版本,在国外或者国内翻墙网络不会出现WIFI受限显示问题&#…...