前言：在當(dāng)今數(shù)字化的時(shí)代，人工智能（AI）技術(shù)正在不斷演進(jìn)，為開發(fā)者提供了豐富的工具和資源。其中，API（應(yīng)用程序接口）成為構(gòu)建強(qiáng)大AI應(yīng)用的關(guān)鍵組成部分之一。本文將介紹如何利用API來打造一個(gè)AI對(duì)話網(wǎng)站，使用戶能夠與智能系統(tǒng)進(jìn)行交互。
以下內(nèi)容不作太多解釋，不懂就無腦套用就行，這里的api接口以文心一言示例，先在LuckyCola注冊(cè)賬號(hào)然后在個(gè)人中心申請(qǐng)appKey
1.請(qǐng)求方式
請(qǐng)求方式: POST
https://luckycola.com.cn/ai/openwxyy
建議使用https協(xié)議,當(dāng)https協(xié)議無法使用時(shí)再嘗試使用http協(xié)議
2.請(qǐng)求參數(shù)
| 序號(hào) | 參數(shù) | 是否必須 | 說明 |
|---|---|---|---|
| 1 | ques | 是 | 提交問題 |
| 2 | appKey | 是 | 唯一驗(yàn)證AppKey |
| 3 | uid | 是 | 唯一標(biāo)識(shí) |
| 4 | isLongChat | 否 | 是否支持上下文(值為1或者0) |
3.請(qǐng)求參數(shù)示例
{
"ques": "hello",
"appKey": "*****************",
"uid": "***************",
// 是否支持上下文 值1表示支持,0表示不支持
"isLongChat": 0
}
3.接口 返回示例
{
// 成功狀態(tài)碼
"code": 0,
// 成功提示
"msg": "AI接口返回成功",
"data": {
// AI回答結(jié)果
"result": "您好，如果您需要幫助或有任何問題，請(qǐng)隨時(shí)告訴我，我將竭誠(chéng)為您服務(wù)。",
"countMsg": "無窮",
// 當(dāng)前是否是上下文對(duì)話模式,1表示是上下文模式,0為非上下文模式
"longChat": 0
}
}
建立前端頁面，創(chuàng)建一個(gè)用戶友好的前端頁面，可以使用HTML、CSS和JavaScript等技術(shù)來實(shí)現(xiàn)交互式的用戶界面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI對(duì)話網(wǎng)站</title>
<style>
/* 在這里添加你的樣式 */
</style>
</head>
<body>
<div id="chat-container">
<div id="chat-display"></div>
<input type="text" id="user-input" placeholder="請(qǐng)輸入你的問題...">
<button onclick="sendUserMessage()">發(fā)送</button>
</div>
<script>
// 在這里添加用戶交互的JavaScript代碼
</script>
</body>
</html>
然后我這里簡(jiǎn)單寫了一段，完成簡(jiǎn)單對(duì)話頁面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; /* 讓消息容器占據(jù)剩余空間 */
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博客，內(nèi)容是如何利用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 message
var userMessage = document.createElement('div');
userMessage.className = 'message sent';
userMessage.textContent = messageText;
messagesContainer.appendChild(userMessage);
// Disable send button until AI response
sendButton.disabled = true;
// Call AI API
try {
var aiResponse = await getAiResponse(messageText);
// Display AI's response with formatted code blocks
var aiMessage = document.createElement('div');
aiMessage.className = 'message received';
aiMessage.innerHTML = formatCodeBlocks(aiResponse.data.result);
messagesContainer.appendChild(aiMessage);
// Scroll to the bottom
messagesContainer.scrollTop = messagesContainer.scrollHeight;
} catch (error) {
console.error("Error fetching AI response:", error);
}
// Clear input and enable send button
inputElement.value = '';
sendButton.disabled = false;
}
}
async function getAiResponse(userInput) {
var apiUrl = 'https://luckycola.com.cn/ai/openwxyy';
var requestBody = {
ques: userInput,
//替換你的標(biāo)識(shí)
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>
| 運(yùn)行效果 |
|---|
文章來源：http://www.zghlxwxcb.cn/news/detail-761087.html
下面是用低代碼設(shè)計(jì)的界面
文章來源地址http://www.zghlxwxcb.cn/news/detail-761087.html
到了這里，關(guān)于無腦利用API實(shí)現(xiàn)文心一言AI對(duì)話功能？(附代碼)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
