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

无脑利用API实现文心一言AI对话功能？(附代码)

news 2026/2/10 19:04:43

前言：在当今数字化的时代，人工智能（AI）技术正在不断演进，为开发者提供了丰富的工具和资源。其中，API（应用程序接口）成为构建强大AI应用的关键组成部分之一。本文将介绍如何利用API来打造一个AI对话网站，使用户能够与智能系统进行交互。

以下内容不作太多解释，不懂就无脑套用就行，这里的api接口以文心一言示例，先在LuckyCola注册账号然后在个人中心申请appKey
在这里插入图片描述
在这里插入图片描述

1.请求方式

请求方式: POST

https://luckycola.com.cn/ai/openwxyy

建议使用https协议,当https协议无法使用时再尝试使用http协议

2.请求参数

序号参数是否必须说明
1ques是提交问题
2appKey是唯一验证AppKey
3uid是唯一标识
4isLongChat否是否支持上下文(值为1或者0)

3.请求参数示例

{"ques": "hello","appKey": "*****************","uid": "***************",// 是否支持上下文 值1表示支持,0表示不支持"isLongChat": 0
}

3.接口 返回示例

{// 	成功状态码"code": 0,// 	成功提示"msg": "AI接口返回成功","data": {// 	AI回答结果"result": "您好，如果您需要帮助或有任何问题，请随时告诉我，我将竭诚为您服务。","countMsg": "无穷",// 当前是否是上下文对话模式,1表示是上下文模式,0为非上下文模式"longChat": 0}
}

建立前端页面，创建一个用户友好的前端页面，可以使用HTML、CSS和JavaScript等技术来实现交互式的用户界面。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AI对话网站</title><style>/* 在这里添加你的样式 */</style>
</head>
<body><div id="chat-container"><div id="chat-display"></div><input type="text" id="user-input" placeholder="请输入你的问题..."><button onclick="sendUserMessage()">发送</button></div><script>// 在这里添加用户交互的JavaScript代码</script>
</body>
</html>

然后我这里简单写了一段，完成简单对话页面UI，替换自己的uid和appkey即可，供参考

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>body {font-family: 'Arial', sans-serif;margin: 0;padding: 0;background-color: #f4f4f4;display: flex;align-items: center;justify-content: center;height: 100vh;overflow: hidden;}#chat-container {width: 90%; max-width: 400px; border: 1px solid #ccc;border-radius: 10px;overflow: hidden;height: 100%; display: flex;flex-direction: column;}#chat-messages {flex: 1; /* 让消息容器占据剩余空间 */padding: 10px;overflow-y: auto;background-color: #fff;}.message {clear: both;padding: 8px;margin-bottom: 8px;border-radius: 5px;max-width: 70%;word-wrap: break-word;}.message.sent {float: right;background-color: #4caf50;color: #fff;}.message.received {float: left;background-color: #e0e0e0;}#chat-input {display: flex;align-items: center;justify-content: space-between;padding: 10px;background-color: #fff;border-top: 1px solid #ccc;}#chat-input input {flex: 1;padding: 8px;margin-right: 10px;border: 1px solid #ccc;border-radius: 5px;}#chat-input button {padding: 8px;border: none;border-radius: 5px;background-color: #4caf50;color: #fff;cursor: pointer;}#chat-input button:disabled {background-color: #ccc;cursor: not-allowed;}</style>
</head>
<body><div id="chat-container"><div id="chat-messages"><div class="message received">这里是NDIR博客，内容是如何利用API搭建文心一言AI，你有任何问题吗？</div></div><div id="chat-input"><input type="text" id="user-input" placeholder="Type your message..."><button onclick="sendMessage()" id="sendButton">Send</button></div>
</div><script>async function sendMessage() {var inputElement = document.querySelector('#user-input');var messageText = inputElement.value.trim();var sendButton = document.getElementById('sendButton');if (messageText !== "") {var messagesContainer = document.querySelector('#chat-messages');// Display user's messagevar userMessage = document.createElement('div');userMessage.className = 'message sent';userMessage.textContent = messageText;messagesContainer.appendChild(userMessage);// Disable send button until AI responsesendButton.disabled = true;// Call AI APItry {var aiResponse = await getAiResponse(messageText);// Display AI's response with formatted code blocksvar aiMessage = document.createElement('div');aiMessage.className = 'message received';aiMessage.innerHTML = formatCodeBlocks(aiResponse.data.result);messagesContainer.appendChild(aiMessage);// Scroll to the bottommessagesContainer.scrollTop = messagesContainer.scrollHeight;} catch (error) {console.error("Error fetching AI response:", error);}// Clear input and enable send buttoninputElement.value = '';sendButton.disabled = false;}}async function getAiResponse(userInput) {var apiUrl = 'https://luckycola.com.cn/ai/openwxyy';var requestBody = {ques: userInput,//替换你的标识appKey: "*********************",uid: "************************",isLongChat: 0};var response = await fetch(apiUrl, {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify(requestBody),});if (response.ok) {return response.json();} else {throw new Error('Failed to fetch AI response');}}function formatCodeBlocks(text) {// Match code blocks enclosed in triple backticks (```code ```)return text.replace(/```([\s\S]*?)```/g, '<pre>$1</pre>');}
</script></body>
</html>
运行效果

在这里插入图片描述

下面是用低代码设计的界面
在这里插入图片描述

相关文章：

无脑利用API实现文心一言AI对话功能？(附代码)

前言&#xff1a;在当今数字化的时代&#xff0c;人工智能&#xff08;AI&#xff09;技术正在不断演进&#xff0c;为开发者提供了丰富的工具和资源。其中&#xff0c;API&#xff08;应用程序接口&#xff09;成为构建强大AI应用的关键组成部分之一。本文将介绍如何利用API来…...

编程日记 2023/12/15 16:39:55

加速数据采集：用OkHttp和Kotlin构建Amazon图片爬虫

引言 曾想过轻松获取亚马逊上的商品图片用于项目或研究吗&#xff1f;是否曾面对网络速度慢或被网站反爬虫机制拦截而无法完成数据采集任务&#xff1f;如果是&#xff0c;那么本文将为您介绍如何用OkHttp和Kotlin构建一个高效的Amazon图片爬虫解决方案。 背景介绍 亚马逊&a…...

编程日记 2023/12/15 16:38:54

lua安装

lua安装 1.Lua介绍 特点&#xff1a;轻量、小巧。C语言开发。开源。 设计的目的&#xff1a;嵌入到应用程序当中&#xff0c;提供灵活的扩展和定制化的功能。 luanginx&#xff0c;luaredis。 2.windows安装lua windows上安装lua&#xff1a; 检查机器上是否有lua C:\U…...

编程日记 2023/12/15 16:36:52

博士毕业需要发表几篇cssci论文

大家好&#xff0c;今天来聊聊博士毕业需要发表几篇cssci论文&#xff0c;希望能给大家提供一点参考。 以下是针对论文重复率高的情况&#xff0c;提供一些修改建议和技巧&#xff1a; 博士毕业需要发表几篇CSSCI论文 背景介绍 CSSCI即“中文社会科学引文索引”&#xff0c;被…...

编程日记 2023/12/15 16:34:51

UDP报文格式详解

✏️✏️✏️各位看官好&#xff0c;今天给大家分享的是 传输层的另外一个重点协议——UDP。 清风的CSDN博客 &#x1f6e9;️&#x1f6e9;️&#x1f6e9;️希望我的文章能对你有所帮助&#xff0c;有不足的地方还请各位看官多多指教&#xff0c;大家一起学习交流&#xff0…...

编程日记 2023/12/15 16:25:43

Python自动化测试如何自动生成测试用例?

汽车软件开发自动化测试攻略 随着软件开发在造车行业中占有越来越重要的地位&#xff0c;敏捷开发的思想在造车领域中也逐渐地被重视起来&#xff0c;随之而来的是整车厂对自动化测试需求越来越强烈。本文结合北汇在自动化测试方面的丰富经验&#xff0c;简单介绍一下实施自动…...

编程日记 2023/12/15 16:21:40

椋鸟C语言笔记#27：字符串数字提取（atoi、atol、atoll、atof）

萌新的学习笔记&#xff0c;写错了恳请斧正。 目录 atoi 模拟实现 atol与atoll&#xff08;C99起&#xff09; atof 合法的浮点值 返回值 使用示例 在stdlib.h中还有几个有意思的字符串函数 它们的功能是将字符串开头的数字提取出来 下面我们具体看一看这几个函数吧 …...

编程日记 2023/12/15 16:20:39

Git 命令使用总结

git init: 在当前目录创建一个新的空Git仓库。git clone [url]: 从远程仓库克隆一个项目到本地。git add [file]: 将文件添加到暂存区。git commit -m “message”: 提交暂存区的文件到本地仓库&#xff0c;并添加一条提交信息。git status: 查看当前工作区的状态&#xff08;已…...

编程日记 2023/12/15 16:17:36

Linux常见面试题30题详细答案解析（二）

1. 如何使用Linux中的包管理器进行软件包依赖管理&#xff1f; Linux中的包管理器如apt、yum等可以自动处理软件包的依赖关系。当安装或升级软件包时&#xff0c;包管理器会自动解决软件包的依赖关系&#xff0c;确保所需的库和工具都已经安装。掌握如何使用包管理器进行依赖管…...

编程日记 2023/12/15 16:16:35

Linux查询指定时间点段日志Linux查询指定文件

Linux服务器高效查询日志查询文件 Ⅰ、常用几种日志查询语法Ⅱ、常用几种查询语法 Ⅰ、常用几种日志查询语法 #查询某日志前xx行日志 head -n 行数 日志文件名 #查询某日志后xx行日志 tail -n 行数 日志文件名 #查询固定时间点日志&#xff08;前提是这个时间点确实有日志输出…...

编程日记 2023/12/15 16:15:35

2023年华为HCIA认证H12-811题库讲解

在VRP平台上&#xff0c;可以通过下面哪种方式返回到上一条历史命令&#xff1f;&#xff08; &#xff09; A、Ctr1U B、Ctr1P C、左光标 D、上光标 试题答案&#xff1a;BD 试题解析&#xff1a;在VRP系统中&#xff0c;ctrlU为自定义快捷键&#xff0c;ct…...

编程日记 2023/12/15 16:12:32

MacOS上配置Jenkins开机自启动

之前文章有写过&#xff0c;如何在Windows环境下&#xff0c;通过vbsbat脚本的组合拳实现Jenkins的开机自启动&#xff0c;最近换了电脑&#xff0c;又要搭建Jenkins了&#xff0c;顺带整理分享下MacOS上配置Jenkins开机自启动的方法。 具体配置步骤&#xff1a; 打开终端应用…...

编程日记 2023/12/15 16:09:30

指针相关知识(入门)

通过前面的学习&#xff0c;我们已经对c语言有了一个初步的认识 接下来&#xff0c;我们继续学习。进入下一个阶段&#xff0c;指针。这个部分的知识较多&#xff0c;可能学习起来有些吃力&#xff0c;但是&#xff0c;从简到难&#xff0c;我们慢慢学习。 一.指针的概念 导入…...

编程日记 2023/12/15 16:00:22

我的NPI项目之Android 安全系列 -- Android Strongbox 初识

从Android9(Pie)开始,Google强烈建议支持Strongbox. 具体描述如下: 一直到目前的Android14. 对应的内容也一并贴出来: 说人话就是Android开始通过独立于主SoC的单元进行密钥存储了。 通常&#xff0c;这样的单元就是我们通常称作的Secure Element&#xff08;SE&#xff09;&am…...

编程日记 2023/12/15 15:59:21

3、Kafka 线上集群部署方案怎么做？

文章目录 1、操作系统的选择1.1、I/O 模型的使用1.2、数据网络传输效率1.3、社区支持度 2、磁盘的选择3、磁盘容量的规划3.1、举例思考本问题&#xff1a;3.2、计算一下&#xff1a;3.3、规划磁盘容量时你需要考虑下面这几个元素&#xff1a; 4、带宽规划4.1、计算 总结 1、操作…...

编程日记 2023/12/15 15:57:20

【Oracle】常用数据库sql记录

文章目录 1、获取指定日期所在年份2、获取指定日期所在月份3、获取指定日期去年同期日期4、获取指定日期所在年份的总天数5、获取年初到指定日期的天数6、除法运算7、递归查询8、REPLACE函数9、DECODE 函数10、聚合函数11、窗口函数11.1 ROW_NUMBER函数11.2 RANK函数11.3 LEAD …...

编程日记 2023/12/15 15:56:19

在线监控网址源码/ 网站监控工具源码/ 网站监控系统源码/定时任务/网站网址URL状态监控神器

源码介绍&#xff1a; 在线监控网址源码、 网站监控工具源码&#xff0c;它作为网站监控系统源码&#xff0c;有定时任务&#xff0c;支持卡密充值&#xff0c;是网站网址URL状态监控神器。让数据库监控更加简单和专业。远程云中监控、实时邮件告警、丰富的指标和图表、分析和…...

编程日记 2023/12/15 15:55:18

【Mysql】myisam和innodb的区别？

0 回答 myisam引擎是5.1版本之前的默认引擎，支持全文检索、压缩、空间函数等，但是不支持事务和行级锁，所以一般用于有大量查询少量插入的场景来使用，而且myisam不支持外键，并且索引和数据是分开存储的。innodb是基于聚簇索引建立的，和myisam相反它支持事务、外键，并且通…...

编程日记 2023/12/15 15:54:17

vue 集成行政区域选择插件region和数据回显

故事&#xff1a;最近&#xff0c;项目需要进行行政区域围栏的绘制&#xff0c;由于老旧项目是利用js保存全国行政区域地址和编码&#xff0c;在选择器select进行匹配显示&#xff0c;但此方法复杂&#xff0c;因此选择集成区域插件region 步骤一&#xff1a;用命令安装region…...

编程日记 2023/12/15 15:52:15

The LINQ expression “xxx“ could not be translated

错误示例&#xff1a; var A B .GroupBy(item > item.id) .Select(groupedList > new { PlannerId groupedList.Key, RxList groupedList }); 解决方案&#xff1a; var A B .GroupBy(item > item.id) .Select(groupedList > new { PlannerId groupedList.…...

编程日记 2023/12/15 15:51:14

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/11/16 19:06:23

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2026/2/8 20:42:41

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

编程新知 2026/2/6 14:42:11

Mac软件卸载指南，简单易懂！

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2026/2/7 0:48:56

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/11/30 11:30:47

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/12/10 20:45:02

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2026/2/8 5:28:24

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

编程新知 2026/1/26 5:44:16

（一）单例模式

一、前言 单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

编程新知 2026/1/30 6:03:31

高考志愿填报管理系统---开发介绍

高考志愿填报管理系统是一款专为教育机构、学校和教师设计的学生信息管理和志愿填报辅助平台。系统基于Django框架开发&#xff0c;采用现代化的Web技术&#xff0c;为教育工作者提供高效、安全、便捷的学生管理解决方案。 ## &#x1f4cb; 系统概述 ### &#x1f3af; 系统定…...

编程新知 2026/1/23 4:26:12