新乐市住房和城乡建设局网站,微商网,安徽网站推广优化,google关键词分析工具前言#xff1a;在当今数字化的时代#xff0c;人工智能#xff08;AI#xff09;技术正在不断演进#xff0c;为开发者提供了丰富的工具和资源。其中#xff0c;API#xff08;应用程序接口#xff09;成为构建强大AI应用的关键组成部分之一。本文将介绍如何利用API来…前言在当今数字化的时代人工智能AI技术正在不断演进为开发者提供了丰富的工具和资源。其中API应用程序接口成为构建强大AI应用的关键组成部分之一。本文将介绍如何利用API来打造一个AI对话网站使用户能够与智能系统进行交互。
以下内容不作太多解释不懂就无脑套用就行这里的api接口以文心一言示例先在LuckyCola注册账号然后在个人中心申请appKey
1.请求方式
请求方式: POST
https://luckycola.com.cn/ai/openwxyy建议使用https协议,当https协议无法使用时再尝试使用http协议
2.请求参数
序号参数是否必须说明1ques是提交问题2appKey是唯一验证AppKey3uid是唯一标识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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleAI对话网站/titlestyle/* 在这里添加你的样式 *//style
/head
bodydiv idchat-containerdiv idchat-display/divinput typetext iduser-input placeholder请输入你的问题...button onclicksendUserMessage()发送/button/divscript// 在这里添加用户交互的JavaScript代码/script
/body
/html然后我这里简单写了一段完成简单对话页面UI替换自己的uid和appkey即可供参考
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0stylebody {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
bodydiv idchat-containerdiv idchat-messagesdiv classmessage received这里是NDIR博客内容是如何利用API搭建文心一言AI你有任何问题吗/div/divdiv idchat-inputinput typetext iduser-input placeholderType your message...button onclicksendMessage() idsendButtonSend/button/div
/divscriptasync 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 users 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 AIs 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运行效果 下面是用低代码设计的界面
