当前位置： 首页 > news >正文

JS+H5在线文心AI聊天（第三方接口）

news 2026/2/9 0:08:33

源码在最后面 调用的不是文心官方接口

可以正常聊天 有打字动画 

效果图

121e20f58a084b2aa032b70c19363dd5.jpg

 源代码

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>聊天界面</title><style>body {font-family: Arial, sans-serif;background-color: #121212;margin: 0;padding: 0;color: #ffffff;}.chat-container {width: 400px;margin: 50px auto;background-color: #1f1f1f;border-radius: 10px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);overflow: hidden;padding: 20px;}.system-message {text-align: center;background-color: #ff4d4d;padding: 10px;border-radius: 5px;margin: 10px 0;cursor: pointer;color: #ffffff;}.message {display: flex;align-items: flex-start;margin-bottom: 15px;cursor: pointer;}.avatar {width: 40px;height: 40px;border-radius: 50%;margin-right: 10px;}.message-content {max-width: 70%;background-color: #2c2c2c;border-radius: 10px;padding: 10px;position: relative;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);}.message-content p {margin: 0;word-wrap: break-word;color: #ffffff;}.username {font-size: 12px;color: #ff9999;margin-bottom: 5px;}.message.left {justify-content: flex-start;}.message.right {justify-content: flex-end;}.message.right .message-content {background-color: #ff4d4d;color: white;}.message.right .avatar {margin-left: 10px;margin-right: 0;}.input-group {display: flex;align-items: center;margin-top: 20px;}.input-group input[type="text"] {flex: 1;padding: 10px;border: 1px solid #ccc;border-radius: 5px;outline: none;color: #ffffff;background-color: #1f1f1f;}.input-group button {padding: 10px 15px;border: none;border-radius: 5px;background-color: #ff4d4d;color: white;cursor: pointer;outline: none;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);}.input-group button:hover {background-color: #cc2e2e;}</style>
</head>
<body><div class="chat-container"><div class="system-message" id="system-message-1" onclick="showId('system-message-1')">AI聊天</div><!-- 省略其他聊天消息 --><div class="input-group"><input type="text" id="user-input" placeholder="输入你的消息..."><button onclick="sendMessage()">发送</button></div>
</div>
<script>
function sendMessage() {var userInput = document.getElementById('user-input').value;if (userInput.trim()!== '') {// 添加用户发送的消息var messageElement = document.createElement('div');messageElement.classList.add('message', 'right');messageElement.innerHTML = `<div class="message-content"><div class="username">我</div><p>${userInput}</p></div><img src="https://via.placeholder.com/40" alt="头像" class="avatar">`;document.querySelector('.chat-container').appendChild(messageElement);// 清空输入框document.getElementById('user-input').value = '';// 添加 AI 正在输入的消息var aiMessageElement = document.createElement('div');aiMessageElement.classList.add('message', 'left');aiMessageElement.innerHTML = `<img src="https://via.placeholder.com/40" alt="头像" class="avatar"><div class="message-content"><div class="username">AI</div><p>正在输入...</p></div>`;document.querySelector('.chat-container').appendChild(aiMessageElement);// 进行 API 请求fetch(`https://api.lolimi.cn/API/AI/wx.php?msg=${encodeURIComponent(userInput)}`).then(response => response.json()).then(data => {// 先删除原有的&ldquo;正在输入...&rdquo;aiMessageElement.querySelector('p').textContent = '';// 使用打字特效更新 AI 的消息内容typeWriterEffect(aiMessageElement.querySelector('p'), data.data.output);}).catch(error => {console.error('请求出错:', error);// 在出错时也可以更新 AI 的消息内容aiMessageElement.querySelector('p').textContent = '出错了，请稍后再试。';});}
}// 打字特效函数
function typeWriterEffect(element, text, speed = 50) {let index = 0;let interval = setInterval(() => {if (index < text.length) {element.textContent += text.charAt(index);index++;} else {clearInterval(interval);}}, speed);
}
</script>
</body>
</html>

JavaScript API调用方法(与上面无关)

1. 定义API URL
- 定义要调用的API的URL
- 例如“https://api.oioweb.cn/api/common/Get60sWorldInsight”
2. 使用Fetch API发起请求
- 使用 fetch函数发起 GET请求
- fetch函数返回一个 Promise，该 Promise在请求完成时解析为一个 Response对象。
3. 处理响应
- 检查响应是否成功
- 如果响应成功，调用 json()解析响应体为JSON格式。
- json()方法也返回一个 Promise，该 Promise在解析完成后解析为一个 JavaScript对象。
4. 提取数据
- 从解析后的 JavaScript对象中提取 “result”字段的数据。

代码实现

// 定义API URL
const url = 'https://api.oioweb.cn/api/common/Get60sWorldInsight';// 使用fetch API发起请求
fetch(url).then(response => {// 检查响应是否成功if (!response.ok) {throw new Error(`HTTP error! Status: ${response.status}`);}// 解析JSON响应return response.json();}).then(data => {// 提取'result'数据const result = data.result;// 输出结果到控制台console.log(result);}).catch(error => {// 处理任何发生的错误console.error('There was a problem with the fetch operation:', error);});

 

 

相关文章：

JS+H5在线文心AI聊天（第三方接口）

源码在最后面 调用的不是文心官方接口 可以正常聊天 有打字动画 效果图 源代码 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-s…...

编程日记 2024/7/27 19:55:57

kafka源码阅读-ReplicaStateMachine(副本状态机)解析

概述 Kafka源码包含多个模块&#xff0c;每个模块负责不同的功能。以下是一些核心模块及其功能的概述&#xff1a; 服务端源码 &#xff1a;实现Kafka Broker的核心功能&#xff0c;包括日志存储、控制器、协调器、元数据管理及状态机管理、延迟机制、消费者组管理、高并发网络…...

编程日记 2024/7/27 19:53:54

【MetaGPT系列】【MetaGPT完全实践宝典——如何定义单一行为多行为Agent】

目录 前言一、智能体1-1、Agent概述1-2、Agent与ChatGPT的区别 二、多智能体框架MetaGPT2-1、安装&配置2-2、使用已有的Agent&#xff08;ProductManager&#xff09;2-3、拥有单一行为的Agent&#xff08;SimpleCoder&#xff09;2-3-1、定义写代码行为2-3-2、角色定义2-3…...

编程日记 2024/7/27 19:52:53

Kolla-Ansible的确是不支持CentOS-Stream系列产品了

看着OpenStack最新的 C 版本出来一段时间了&#xff0c;想尝个鲜、用Kolla-Ansible进行容器化部署&#xff0c;结果嘛。。。 根据实验结果&#xff0c;自OpenStack Bobcat版本开始&#xff0c;Kolla-Ansible就适合在CentOS系列产品上部署了&#xff0c;通过对 Bobcat和Caracal…...

编程日记 2024/7/27 19:51:52

IDEA启动C:\Users\badboy\.jdks\corretto-17.0.7\bin\java.exe -Xmx700m报错

这篇文章写的就很详细了(IDEA启动C:\Users\badboy\.jdks\corretto-17.0.7\bin\java.exe -Xmx700m报错_error occurred during initialization of vm failed -CSDN博客)...

编程日记 2024/7/27 19:47:46

ctfshow298-300（java信息泄露，代码审计）

Web298 代码审计 这里看到getVipStatus方法&#xff0c;获得了获取flag的条件就是user等于admin&#xff0c;password等于ctfshow Poc: https://d036a90d-ac1c-4de1-9b0b-86f52d2586b9.challenge.ctf.show/ctfshow/login?usernameadmin&passwordctfshow Web299 打开页面…...

编程日记 2024/7/27 19:46:45

Java 基础 and 进阶面试知识点（超详细）

一个 Java 文件中是否可以存在多个类&#xff08;修饰类除外&#xff09;&#xff1f; 一个 Java 文件中是可以存在多个类的&#xff0c;但是一个 Java 文件中只能存在一个 public 所修饰的类&#xff0c;而且这个 Java 文件的文件名还必须和 public 所修饰类的类名保持一致&a…...

编程日记 2024/7/27 19:43:41

【LabVIEW作业篇 - 5】：水仙花数、数组与for循环的连接

文章目录 水仙花数数组与for循环的连接 水仙花数 水仙花数&#xff0c;是指一个3位数&#xff0c;它的每个位上的数字的3次幂之和等于它本身。如371 3^3 7^3 1^3&#xff0c;则371是一个水仙花数。 思路&#xff1a;水仙花数是一个三位数&#xff0c;通过使用for循环&#xf…...

编程日记 2024/7/27 19:42:40

Kafka系列之如何提高消费者消费速度

前言 在实际开发过程中&#xff0c;如果使用Kafka处理超大数据量(千万级、亿级)的场景&#xff0c;Kafka消费者的消费速度可能决定系统性能瓶颈。 实现方案 为了提高消费者的消费速度&#xff0c;我们可以采取以下措施&#xff1a; 将主题的分区数量增大&#xff0c;如 20&…...

编程日记 2024/7/27 19:41:39

mac安装Whisper

Whisper 官方git https://github.com/openai/whisper?tabreadme-ov-file 基本上参考官方的安装流程 pip3 install -U openai-whisper pip3 install githttps://github.com/openai/whisper.git pip3 install --upgrade --no-deps --force-reinstall githttps://github.com/…...

编程日记 2024/7/27 19:40:38

Linux：进程概述（什么是进程、进程控制块PCB、并发与并行、进程的状态、进程的相关命令）

进程概述 (1)What&#xff08;什么是进程&#xff09; 程序&#xff1a;磁盘上的可执行文件&#xff0c;它占用磁盘、是一个静态概念 进程&#xff1a;程序执行之后的状态&#xff0c;占用CPU和内存&#xff0c;是一个动态概念&#xff1b;每一个进程都有一个对应的进程控制块…...

编程日记 2024/7/27 19:39:37

Unity UGUI 之 坐标转换

本文仅作学习笔记与交流&#xff0c;不作任何商业用途 本文包括但不限于unity官方手册&#xff0c;唐老狮&#xff0c;麦扣教程知识&#xff0c;引用会标记&#xff0c;如有不足还请斧正 本文在发布时间选用unity 2022.3.8稳定版本&#xff0c;请注意分别 前置知识&#xff1a;…...

编程日记 2024/7/27 19:37:34

使用 uPlot 在 Vue 中创建交互式图表

本文由ScriptEcho平台提供技术支持 项目地址&#xff1a;传送门 使用 uPlot 在 Vue 中创建交互式图表 应用场景介绍 uPlot 是一个轻量级、高性能的图表库&#xff0c;适用于创建各种交互式图表。它具有丰富的功能&#xff0c;包括可自定义的轴、网格、刻度和交互性。本篇博…...

编程日记 2024/7/27 19:36:32

SpringBoot 项目配置文件注释乱码的问题解决方案

一、问题描述 在项目的配置文件中&#xff0c;我们写了一些注释&#xff0c;如下所示&#xff1a; 但是再次打开注释会变成乱码&#xff0c;如下所示&#xff1a; 那么如何解决呢&#xff1f; 二、解决方案 1. 点击” File→Setting" 2. 搜索“File Encodings”, 将框…...

编程日记 2024/7/27 19:35:31

TTS如何正确读AI缩写、金额和数字

案例&#xff1a;Tell me whats AI(a i), you need pay $186.30, your card Number is 1 2 3, your work Number is 5 6 7 8...

编程日记 2024/7/27 19:28:24

python基础知识点（蓝桥杯python科目个人复习计划75）

第一题&#xff1a;ip补充 题目描述&#xff1a; 小蓝的ip地址为192.168.*.21&#xff0c;其中*是一个数字&#xff0c;请问这个数字最大可能是多少&#xff1f; import os import sys# 请在此输入您的代码 print("255") 第二题&#xff1a;出现最多的字符 题目描…...

编程日记 2024/7/27 19:27:23

小技巧：如何在已知PDF密码情况下去掉PDF的密码保护

第一步&#xff0c;用Edge打开你的pdf&#xff0c;输入密码进去 第二步&#xff0c;点击打印 第三步&#xff0c;选择导出PDF&#xff0c;选择彩印 第四步&#xff0c;选择导出位置&#xff0c;导出成功后打开发现没有密码限制了&#xff01;...

编程日记 2024/7/27 19:25:20

Java泛型的介绍和基本使用

什么是泛型 ​ 泛型就是将类型参数化&#xff0c;比如定义了一个栈&#xff0c;你必须在定义之前声明这个栈中存放的数据的类型&#xff0c;是int也好是double或者其他的引用数据类型也好&#xff0c;定义好了之后这个栈就无法用来存放其他类型的数据。如果这时候我们想要使用这…...

编程日记 2024/7/27 19:24:19

【C++】动态内存管理与模版

目录 1、关键字new&#xff1a; 1、用法&#xff1a; 2、理解&#xff1a; 3、与malloc的相同与不同&#xff1a; 1、相同&#xff1a; 2、不同&#xff1a; 2、模版初阶&#xff1a; 1、函数模版&#xff1a; 1、概念&#xff1a; 2、关键字&#xff1a;template&…...

编程日记 2024/7/27 19:20:13

MongoDB - 组合聚合阶段：$group、$match、$limit、$sort、$skip、$project、$count

文章目录 1. $group2. $group-> $project2.1 $group2.2 $group-> $project2.3 SpringBoot 整合 MongoDB 3. $match-> $group -> $match3.1 $match3.2 $match-> $group3.3 $match-> $group-> $match3.4 SpringBoot 整合 MongoDB 4. $match-> $group->…...

编程日记 2024/7/27 19:19:11

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/10/7 0:32:40

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/12/13 1:32:15

九天毕昇深度学习平台 | 如何安装库？

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

编程新知 2026/1/31 2:13:57

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47

Linux 内存管理实战精讲：核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

编程新知 2026/1/25 10:16:57

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

编程新知 2025/10/22 6:06:44

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

编程新知 2026/2/7 17:45:38

保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画！！！

目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...

编程新知 2026/2/4 3:31:19

智能职业发展系统：AI驱动的职业规划平台技术解析

智能职业发展系统&#xff1a;AI驱动的职业规划平台技术解析 引言&#xff1a;数字时代的职业革命 在当今瞬息万变的就业市场中&#xff0c;传统的职业规划方法已无法满足个人和企业的需求。据统计&#xff0c;全球每年有超过2亿人面临职业转型困境&#xff0c;而企业也因此遭…...

编程新知 2025/9/26 10:15:18

对象回调初步研究

_OBJECT_TYPE结构分析 在介绍什么是对象回调前&#xff0c;首先要熟悉下结构 以我们上篇线程回调介绍过的导出的PsProcessType 结构为例&#xff0c;用_OBJECT_TYPE这个结构来解析它&#xff0c;0x80处就是今天要介绍的回调链表&#xff0c;但是先不着急&#xff0c;先把目光…...

编程新知 2026/1/26 18:44:47