JS+H5在线文心AI聊天（第三方接口）
源码在最后面 调用的不是文心官方接口
可以正常聊天 有打字动画
效果图
源代码
<!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 => {// 先删除原有的“正在输入...”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调用方法(与上面无关)
代码实现
// 定义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…...
kafka源码阅读-ReplicaStateMachine(副本状态机)解析
概述 Kafka源码包含多个模块，每个模块负责不同的功能。以下是一些核心模块及其功能的概述： 服务端源码 ：实现Kafka Broker的核心功能，包括日志存储、控制器、协调器、元数据管理及状态机管理、延迟机制、消费者组管理、高并发网络…...
【MetaGPT系列】【MetaGPT完全实践宝典——如何定义单一行为多行为Agent】
目录 前言一、智能体1-1、Agent概述1-2、Agent与ChatGPT的区别 二、多智能体框架MetaGPT2-1、安装&配置2-2、使用已有的Agent（ProductManager）2-3、拥有单一行为的Agent（SimpleCoder）2-3-1、定义写代码行为2-3-2、角色定义2-3…...
Kolla-Ansible的确是不支持CentOS-Stream系列产品了
看着OpenStack最新的 C 版本出来一段时间了，想尝个鲜、用Kolla-Ansible进行容器化部署，结果嘛。。。 根据实验结果，自OpenStack Bobcat版本开始，Kolla-Ansible就适合在CentOS系列产品上部署了，通过对 Bobcat和Caracal…...
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博客)...
ctfshow298-300（java信息泄露，代码审计）
Web298 代码审计 这里看到getVipStatus方法，获得了获取flag的条件就是user等于admin，password等于ctfshow Poc: https://d036a90d-ac1c-4de1-9b0b-86f52d2586b9.challenge.ctf.show/ctfshow/login?usernameadmin&passwordctfshow Web299 打开页面…...
Java 基础 and 进阶面试知识点（超详细）
一个 Java 文件中是否可以存在多个类（修饰类除外）？ 一个 Java 文件中是可以存在多个类的，但是一个 Java 文件中只能存在一个 public 所修饰的类，而且这个 Java 文件的文件名还必须和 public 所修饰类的类名保持一致&a…...
【LabVIEW作业篇 - 5】：水仙花数、数组与for循环的连接
文章目录 水仙花数数组与for循环的连接 水仙花数 水仙花数，是指一个3位数，它的每个位上的数字的3次幂之和等于它本身。如371 3^3 7^3 1^3，则371是一个水仙花数。 思路：水仙花数是一个三位数，通过使用for循环…...
Kafka系列之如何提高消费者消费速度
前言 在实际开发过程中，如果使用Kafka处理超大数据量(千万级、亿级)的场景，Kafka消费者的消费速度可能决定系统性能瓶颈。 实现方案 为了提高消费者的消费速度，我们可以采取以下措施： 将主题的分区数量增大，如 20&…...
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/…...
Linux：进程概述（什么是进程、进程控制块PCB、并发与并行、进程的状态、进程的相关命令）
进程概述 (1)What（什么是进程） 程序：磁盘上的可执行文件，它占用磁盘、是一个静态概念 进程：程序执行之后的状态，占用CPU和内存，是一个动态概念；每一个进程都有一个对应的进程控制块…...
Unity UGUI 之 坐标转换
本文仅作学习笔记与交流，不作任何商业用途 本文包括但不限于unity官方手册，唐老狮，麦扣教程知识，引用会标记，如有不足还请斧正 本文在发布时间选用unity 2022.3.8稳定版本，请注意分别 前置知识：…...
使用 uPlot 在 Vue 中创建交互式图表
本文由ScriptEcho平台提供技术支持 项目地址：传送门 使用 uPlot 在 Vue 中创建交互式图表 应用场景介绍 uPlot 是一个轻量级、高性能的图表库，适用于创建各种交互式图表。它具有丰富的功能，包括可自定义的轴、网格、刻度和交互性。本篇博…...
SpringBoot 项目配置文件注释乱码的问题解决方案
一、问题描述 在项目的配置文件中，我们写了一些注释，如下所示： 但是再次打开注释会变成乱码，如下所示： 那么如何解决呢？ 二、解决方案 1. 点击” File→Setting" 2. 搜索“File Encodings”, 将框…...
TTS如何正确读AI缩写、金额和数字
案例：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...
python基础知识点（蓝桥杯python科目个人复习计划75）
第一题：ip补充 题目描述： 小蓝的ip地址为192.168.*.21，其中*是一个数字，请问这个数字最大可能是多少？ import os import sys# 请在此输入您的代码 print("255") 第二题：出现最多的字符 题目描…...
小技巧：如何在已知PDF密码情况下去掉PDF的密码保护
第一步，用Edge打开你的pdf，输入密码进去 第二步，点击打印 第三步，选择导出PDF，选择彩印 第四步，选择导出位置，导出成功后打开发现没有密码限制了！...
Java泛型的介绍和基本使用
什么是泛型 泛型就是将类型参数化，比如定义了一个栈，你必须在定义之前声明这个栈中存放的数据的类型，是int也好是double或者其他的引用数据类型也好，定义好了之后这个栈就无法用来存放其他类型的数据。如果这时候我们想要使用这…...
【C++】动态内存管理与模版
目录 1、关键字new： 1、用法： 2、理解： 3、与malloc的相同与不同： 1、相同： 2、不同： 2、模版初阶： 1、函数模版： 1、概念： 2、关键字：template&…...
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->…...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX（不访问内存）XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...
华硕a豆14 Air香氛版，美学与科技的馨香融合
在快节奏的现代生活中，我们渴望一个能激发创想、愉悦感官的工作与生活伙伴，它不仅是冰冷的科技工具，更能触动我们内心深处的细腻情感。正是在这样的期许下，华硕a豆14 Air香氛版翩然而至，它以一种前所未有的方式&#x…...
招商蛇口 | 执笔CID，启幕低密生活新境
作为中国城市生长的力量，招商蛇口以“美好生活承载者”为使命，深耕全球111座城市，以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子，招商蛇口始终与城市发展同频共振，以建筑诠释对土地与生活的…...
【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...
提升移动端网页调试效率：WebDebugX 与常见工具组合实践
在日常移动端开发中，网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时，开发者迫切需要一套高效、可靠且跨平台的调试方案。过去，我们或多或少使用过 Chrome DevTools、Remote Debug…...
Spring Security 认证流程——补充
一、认证流程概述 Spring Security 的认证流程基于 过滤器链（Filter Chain），核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤： 用户提交登录请求拦…...
渗透实战PortSwigger靶场：lab13存储型DOM XSS详解
进来是需要留言的，先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码，输入的<>当成字符串处理回显到页面中，看来只是把用户输…...
高考志愿填报管理系统---开发介绍
高考志愿填报管理系统是一款专为教育机构、学校和教师设计的学生信息管理和志愿填报辅助平台。系统基于Django框架开发，采用现代化的Web技术，为教育工作者提供高效、安全、便捷的学生管理解决方案。 ## 📋 系统概述 ### 🎯 系统定…...
数据结构第5章：树和二叉树完全指南（自整理详细图文笔记）
名人说：莫道桑榆晚，为霞尚满天。——刘禹锡（刘梦得，诗豪） 原创笔记：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 上一篇：《数据结构第4章 数组和广义表》…...