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

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

news 2026/5/16 10:53:45

前言：在当今数字化的时代，人工智能（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

Rusted PackFile Manager：全面战争模组制作的新手入门完全指南

Rusted PackFile Manager&#xff1a;全面战争模组制作的新手入门完全指南 【免费下载链接】rpfm Rusted PackFile Manager (RPFM) is a... reimplementation in Rust and Qt6 of PackFile Manager (PFM), one of the best modding tools for Total War Games. 项目地址: htt…...

编程新知 2026/5/16 10:43:03

从架构到应用：DNNGP、DeepGS与DLGWAS三大基因预测模型深度剖析

1. 基因预测模型的崛起与挑战 基因组学研究正在经历一场由AI驱动的革命。过去十年间&#xff0c;随着高通量测序技术的普及&#xff0c;生物医学领域积累了海量的基因数据&#xff0c;但传统统计方法在处理复杂性状预测时逐渐显得力不从心。正是在这样的背景下&#xff0c;DNNG…...

编程新知 2026/5/16 10:36:26

别再手动画UML了！用IDEA Diagrams插件自动生成类关系图，附赠符号含义速查表

高效架构可视化&#xff1a;IDEA Diagrams插件全指南与UML符号解析 在软件开发过程中&#xff0c;清晰的架构设计是团队协作和代码维护的基石。传统的手绘UML类图不仅耗时费力&#xff0c;更难以与快速迭代的代码保持同步。JetBrains IDEA内置的Diagrams插件正是为解决这一痛点…...

编程新知 2026/5/16 10:17:33

RK3576开发板PCIE NVMe SSD扩展实战：从硬件连接到性能优化

1. 项目概述&#xff1a;当开发板遇上高性能存储 最近在折腾一块基于瑞芯微RK3576的开发板&#xff0c;这玩意儿性能确实不错&#xff0c;四核A55加上一个独立的NPU&#xff0c;跑一些边缘计算和轻量级AI推理任务绰绰有余。但玩着玩着就发现一个问题&#xff1a;板载的eMMC存储…...

编程新知 2026/5/16 8:49:41

基于RAG的Obsidian智能知识库：本地部署与优化实战

1. 项目概述&#xff1a;当知识管理遇上大语言模型 如果你和我一样&#xff0c;是 Obsidian 的深度用户&#xff0c;同时又对大语言模型&#xff08;LLM&#xff09;的智能涌现能力感到着迷&#xff0c;那么你肯定也想过一个问题&#xff1a;能不能让我的知识库“活”起来&…...

编程新知 2026/5/16 8:12:36

CircuitPython硬件编程在Linux单板机上的实现：以ODROID C2为例

1. 项目概述&#xff1a;当CircuitPython遇见Linux单板机如果你玩过树莓派Pico或者Adafruit的Feather开发板&#xff0c;肯定对CircuitPython不陌生。它让Python跑在了微控制器上&#xff0c;用几行代码就能点亮LED、读取传感器&#xff0c;对硬件新手和快速原型开发来说&#…...

编程新知 2026/5/16 7:44:58

告别adb命令行：用C++和libusb手撸一个USB调试工具（附完整源码）

告别adb命令行&#xff1a;用C和libusb手撸一个USB调试工具&#xff08;附完整源码&#xff09; 你是否厌倦了反复敲击adb命令&#xff0c;却对背后的USB通信机制充满好奇&#xff1f;本文将带你深入Android调试桥&#xff08;ADB&#xff09;的底层世界&#xff0c;用C和libus…...

编程新知 2026/5/16 5:18:17

PADS Layout老手进阶：Gerber文件生成背后的‘负片’、‘钻孔图’与制造工艺解读

PADS Layout老手进阶&#xff1a;Gerber文件生成背后的‘负片’、‘钻孔图’与制造工艺解读 在PCB设计领域&#xff0c;Gerber文件是连接设计与制造的桥梁。对于使用PADS Layout的中高级工程师而言&#xff0c;仅仅掌握操作步骤远远不够。当面对四层或以上的复杂PCB板&#xff…...

编程新知 2026/5/16 4:54:50

Python篇---常考的数据类型

一、常见数据类型及其特点Python 的数据类型可以分两大类&#xff1a;不可变类型和可变类型。这个区分是很多考点的基础。1. 不可变类型&#xff08;值变了&#xff0c;对象就换了&#xff09;整数 int特点&#xff1a;精度无限&#xff0c;只有整数不分长短。适合大数运算。考…...

编程新知 2026/5/16 3:10:22

RocketMQ Dashboard 部署实战：从源码到生产可用的控制台

1. RocketMQ Dashboard 是什么&#xff1f; RocketMQ Dashboard 是 Apache RocketMQ 官方提供的可视化监控管理工具&#xff0c;相当于给 RocketMQ 装上了"仪表盘"。想象一下开车没有仪表盘&#xff0c;不知道油量、车速、发动机状态有多可怕&#xff1f;RocketMQ Da…...

编程新知 2026/5/16 2:54:53