当前位置: 首页 > article >正文

从零用java实现 小红书 springboot vue uniapp (11)集成AI聊天机器人

前言

移动端演示 http://8.146.211.120:8081/#/

管理端演示 http://8.146.211.120:8088/#/

项目整体介绍及演示

前面的文章我们主要完成了基础模块的开发 这次我们跟一下热点 创建AI聊天机器人 并嵌入到我们的uniapp中
首先需要了解dify我已经完成了搭建win10 VMware安装ubuntu24部署 dify
实现效果
1.先去dify后台创建一个应用
在这里插入图片描述
2.配置模型运营商 deepseek 的最简单 开通配置apikey即可
在这里插入图片描述
3.编排聊天机器人的能力
在这里插入图片描述
4.设置语言图标等
在这里插入图片描述
5.选择嵌入 到我们的页面中
在这里插入图片描述
由于嵌套代码是html 且uniapp vue文件中只能存在一个script标签
我们将代码放到项目的index.hml里

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="referrer" content="no-referrer"><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||CSS.supports('top: constant(a)'))document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +(coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><title></title><!--preload-links--><!--app-context--><script>window.difyChatbotConfig = {token: ''}</script><scriptsrc="https://udify.app/embed.min.js"id=""defer></script><style>#dify-chatbot-bubble-button {background-color: #FF2442 !important;top:85% !important;}#dify-chatbot-bubble-window {width: 24rem !important;height: 40rem !important;}</style></head><body><div id="app"><!--app-html--></div><script type="module" src="/main.js"></script></body>
</html>

这样完成ai聊天机器人的搭建了

后面我们实现支持图片 回复、聊天

代码地址
https://gitee.com/ddeatrr/springboot_vue_xhs

相关文章:

从零用java实现 小红书 springboot vue uniapp (11)集成AI聊天机器人

前言 移动端演示 http://8.146.211.120:8081/#/ 管理端演示 http://8.146.211.120:8088/#/ 项目整体介绍及演示 前面的文章我们主要完成了基础模块的开发 这次我们跟一下热点 创建AI聊天机器人 并嵌入到我们的uniapp中 首先需要了解dify我已经完成了搭建win10 VMware安装ubuntu…...

Redis中AOF的实现方式和AOF重写

一、AOF 的实现方式 核心原理 AOF 通过将写操作命令以追加方式记录到日志文件中&#xff0c;重启时通过重放命令恢复数据。与 RDB 的快照机制不同&#xff0c;AOF 是增量记录&#xff0c;更适用于数据一致性要求较高的场景。写入流程 命令执行&#xff1a;客户端发送写命令&am…...

深入理解 React useLayoutEffect:精准掌控 DOM 更新时机

一、useLayoutEffect 的核心定位 1.1 与 useEffect 的关键差异 特性useEffectuseLayoutEffect执行时机浏览器绘制后异步执行DOM 更新后、绘制前同步执行视觉影响可能产生布局闪烁避免布局抖动性能影响对渲染阻塞较小可能阻塞浏览器渲染适用场景数据获取、事件订阅等DOM 测量、…...

Spring Boot 3.x 中 WebClient 全面详解及示例

Spring Boot 3.x 中 WebClient 全面详解及示例 1. WebClient 简介 定义&#xff1a;Spring 5 引入的响应式 HTTP 客户端&#xff0c;用于替代 RestTemplate&#xff08;已弃用&#xff09;&#xff0c;支持异步非阻塞的 HTTP 请求。核心特性&#xff1a; 支持所有 HTTP 方法&a…...

Vue3+Vite+TypeScript+Element Plus开发-06.Header响应式菜单缩展

系列文档目录 Vue3+Vite+TypeScript安装 Element Plus安装与配置 主页设计与router配置 静态菜单设计 Pinia引入 Header响应式菜单缩展 Mockjs引用与Axios封装 登录设计 登录成功跳转主页 多用户动态加载菜单 Pinia持久化 动态路由-配置 文章目录 目录 系列文档…...

深入解析原生鸿蒙中的 RN 日志系统:从入门到精通!

全文目录&#xff1a; 开篇语&#x1f4d6; 目录&#x1f3af; 前言&#xff1a;鸿蒙日志系统究竟有多重要&#xff1f;&#x1f6e0;️ 鸿蒙 RN 日志系统的基础结构&#x1f4dc; 1. 日志的作用⚙️ 2. 日志分类 &#x1f527; 如何在鸿蒙 RN 中使用日志系统&#x1f58b;️ 1…...

下一代AI App架构:前端生成,后端消失

过去十年&#xff0c;Web 和 App 的开发范式基本稳定&#xff1a;前端负责交互体验&#xff0c;后端负责业务逻辑和数据管理。即使是“无服务架构”也只是将后端“拆散”而非“消失”。 但随着 AI 原生应用的兴起&#xff0c;特别是 大模型本地化、小模型部署、WebAssembly、L…...

$_POST 超级全局变量

$_POST 是一个超级全局变量&#xff0c;在 PHP 中用于收集通过 HTTP POST 方法发送到服务器的数据。与 $_GET 不同&#xff0c;$_POST 允许发送大量数据&#xff0c;且数据不会显示在 URL 中&#xff0c;因此更适用于提交敏感信息&#xff0c;如用户登录信息、表单数据等。 使…...

开发一个环保回收小程序需要哪些功能?环保回收小程序

废品分类展示与识别 详细分类列表&#xff1a;清晰展示常见废品类型&#xff0c;如废纸&#xff08;报纸、书本纸、包装纸等&#xff09;、塑料&#xff08;塑料瓶、塑料容器、塑料薄膜等&#xff09;、金属&#xff08;易拉罐、铁制品、铜制品等&#xff09;、玻璃&#xff0…...

Debezium嵌入式连接postgresql封装服务

文章目录 1.项目结构&#xff1a;2.依赖&#xff1a;3.application.properties4.DebeziumConnectorConfig类5.TableEnum类6.TableHandler接口&#xff08;表处理抽象&#xff09;7.DefaultTableHandler默认实现类8.UserTableHandler处理类9.TableHandlerFactory工厂10.Debezium…...

Mixed Content: The page at https://xxx was loaded over HTTPS

一、核心原因分析 Mixed Content 警告是由于 HTTPS 页面中引用了 HTTP 协议的资源(如脚本、图片、iframe 等),导致浏览器因安全策略阻止加载这些非加密内容。HTTP 资源可能被中间人攻击篡改,破坏 HTTPS 页面的整体安全性。 二、推荐解决方案 1. 强制资源升级为 HTTPS •…...

深度学习、图像算法学习记录

深度学习加速 综述文档&#xff1a; https://chenzomi12.github.io/02Hardware01Foundation/02ArchSlim.html winograd: https://zhuanlan.zhihu.com/p/260109670 ncnn 1.修改模型结构&#xff0c;优化模型内存访问次数&#xff0c;加速。 VGG 和 InceptionNet &#xff1a; …...

对象的创建方式有哪些?在虚拟机中具体的创建过程是怎样的?

在Java中&#xff0c;对象的创建方式及其在虚拟机中的具体过程如下&#xff1a; 一、对象的创建方式 使用 new 关键字 最常见的对象创建方式&#xff0c;直接调用类的构造方法。 MyClass obj new MyClass();反射&#xff08;Reflection&#xff09; 通过 Class 或 Constructor…...

Python 爬取 1688.item_get_factory 接口:获取工厂档案信息实战指南

在电商采购和供应链管理中&#xff0c;了解供应商的工厂信息是至关重要的一步。1688 作为国内领先的 B2B 平台&#xff0c;提供了丰富的供应商和工厂档案信息。通过 item_get_factory API 接口&#xff0c;开发者可以获取工厂的详细信息&#xff0c;包括工厂名称、地址、联系方…...

15. git push

基本概述 git push 的作用是&#xff1a;把本地分支的提交推送到远程仓库。推送分支需要满足快进规则&#xff08;Fast-Forward&#xff09;&#xff0c;即远程分支的最新提交必须是本地分支的直接祖先&#xff0c;这个是通过哈希值值进行判断的。 基本用法 1.完整格式 git…...

Perl 发送邮件

Perl 发送邮件 概述 Perl 是一种强大的编程语言&#xff0c;广泛应用于系统管理、网络编程和数据分析等领域。其中&#xff0c;使用 Perl 发送邮件是一项非常实用的技能。本文将详细介绍使用 Perl 发送邮件的方法&#xff0c;包括必要的配置、代码示例以及注意事项。 准备工…...

Rust所有权详解

文章目录 Rust所有权所有权规则作用域 内存和分配移动与克隆栈空间堆空间 关于函数的所有权机制作为参数作为返回值 引用与租借垂悬引用 Rust所有权 C/C中我们对于堆内存通常需要自己手动管理&#xff0c;手动申请和释放&#xff0c;即便有了智能指针&#xff0c;对于效率的影…...

大模型推理--Qwen2.5-Omni在A100上的初体验

过去的一周Qwen2.5-Omni产生了很高的热度&#xff0c;吸引了很多人的目光。它的多模态确实很吸引人&#xff0c;放出来的demo体验还算尚可&#xff08;语音对话的延迟还是太大&#xff09;&#xff0c;所以就在A100 PCIe上实地部署了一下&#xff0c;初步对其速度进行了测试&am…...

CExercise_07_1指针和数组_2数组元素的逆序数组逆序(指针版 reverse_by_ptr 和下标版 reverse_arr)

题目&#xff1a; 数组元素的逆序。要求使用[]运算符以及纯粹指针操作两种方式来完成。 关键点 arr[i] arr[len - 1 - i]; arr[0]arr[len-1]; 如果数组序列是偶数,则调换最中间一对为止;若为奇数,则单出一个不用反转. 思想就是长度取一半 eg:8/2, 9/24.5,反转一半,到5时固定…...

框架PasteForm实际开发案例,换个口味显示数据,支持echarts,只需要标记几个特性即可在管理端显示(2)

PasteForm框架的主要思想就是对Dto进行标记特性,然后管理端的页面就会以不一样的UI呈现 使用PasteForm框架开发,让你免去开发管理端的烦恼,你只需要专注于业务端和用户端! 在管理端中,如果说表格是基本的显示方式,那么图表chart就是一个锦上添花的体现! 如果一个项目拥…...

Starrocks的Bitmap索引和Bloom filter索引以及全局字典

写这个的主要作用是梳理一下Starrocks的索引效率以及使用场景。 Starrocks Bitmap索引 原理&#xff1a; Bitmap 索引是一种使用 bitmap 的特殊数据库索引。bitmap 即为一个 bit 数组&#xff0c;一个 bit 的取值有两种&#xff1a;0 或 1。 每一个 bit 对应数据表中的一行&…...

Explain的使用

1.使用explain语句去查看分析结果 如explain select * from test1 where id=1;会出现:id selecttype table type possible_keys key key_len ref rows extra各列。 其中, type=const表示通过索引一次就找到了; key=primary的话,表示使用了主键; type=all,表示为全表…...

QML面试笔记--UI设计篇05容器控件

1. QML中容器控件全解&#xff1a;构建灵活界面的基石 1.1. Item&#xff08;万物容器&#xff09;1.2. Rectangle&#xff08;视觉容器&#xff09;1.3. ListView&#xff08;动态列表容器&#xff09;1.4. Frame&#xff08;表单容器&#xff09;1.5. SwipeView&#xff08;页…...

Windows操作系统安全配置(一)

1.操作系统和数据库系统管理用户身份标识应具有不易被冒用的特点&#xff0c;口令应有复杂度要求并定期更换 配置方法&#xff1a;运行“gpedit.msc”计算机配置->Windows设置->安全设置>帐户策略->密码策略: 密码必须符合复杂性要求->启用 密码长度最小值->…...

LibreOffice 自动化操作目录

‌一、应用场景‌ 批量更新 Word/ODT 文档目录自动化生成报告模板与 Python 结合实现文档处理流水线 ‌二、环境准备‌ ‌1. 安装 LibreOffice‌ ‌下载地址‌: LibreOffice 官网‌版本要求‌: 7.2&#xff08;确保支持最新 UNO API&#xff09;‌安装注意‌: 勾选“创建快速…...

基于大模型应用技能的学习路径

总览与优先级 基础知识巩固与扩展&#xff08;2-4周&#xff09;数据处理与机器学习基础&#xff08;4-6周&#xff09;深度学习基础与PyTorch框架&#xff08;6-8周&#xff09;自然语言处理&#xff08;NLP&#xff09;基础与Transformer架构&#xff08;6-8周&#xff09;F…...

VSCode运行,各类操作缓慢,如何清理

VSCode写代码&#xff0c;随着项目逐步进展&#xff0c;代码量在增加&#xff0c;依赖的第三方头文件也在增加&#xff0c; 先是发现代码提示的速度变慢&#xff0c; 后来格式化代码速度太慢 然后c/c代码的语法检查有时候压根就失败&#xff0c;来个错误提示 还有source contro…...

2024年的核心技术与最佳实践

前端开发领域近年来经历了翻天覆地的变化&#xff0c;从简单的HTML/CSS页面到如今复杂的单页应用(SPA)和渐进式Web应用(PWA)。本文将探讨2024年前端开发的核心技术栈、工具链和最佳实践。 一、前端三大基石的最新进展 1. HTML5的增强特性 Web Components标准化 原生对话框(&…...

redis(2)-mysql-锁

1.数据倾斜&#xff1a; 解决&#xff1a;虚拟节点 2.缓存穿透&#xff1a;缓存雪崩、击穿 3.分布式锁 多把锁控制不同节点上的一致性问题。 锁是有失效时间的。 强制回收。 4.redis 和zookeeper的区别 redis 数据支持有效期 4.1 zookeeper 分布式一致性服务框架&am…...

LeetCode 热题 100 题解记录

LeetCode 热题 100 题解记录 哈希 1. 两数之和 利用Map判断是否包含需要的值来求解 49. 字母异位词分组 初始化哈希表&#xff1a; 创建一个哈希表 map&#xff0c;用于存储分组结果。键为排序后的字符串&#xff0c;值为原字符串列表。 遍历输入字符串数组&#xff1a; 对于…...