准备工作：
1.打开dify网站：https://cloud.dify.ai/apps
2.准备两段知识文本：“蓝牙音箱使用说明”和“蓝牙音箱售后政策”
创建智能体：
1.用模板创建一个Question Classifier + Knowledge + Chatbot 智能体
2.将两段知识分别添加到售后政策和产品知识知识库中
3.发布并创建API
调用api：
使用Dify API的简单AI对话测试网页HTML示例：
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>AI对话测试</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.container {
background-color: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.chat-box {
height: 500px;
overflow-y: auto;
border: 1px solid #ddd;
padding: 15px;
margin-bottom: 20px;
border-radius: 5px;
}
.message {
margin: 10px 0;
padding: 10px;
border-radius: 5px;
}
.user-message {
background-color: #e3f2fd;
margin-left: 20%;
}
.bot-message {
background-color: #f5f5f5;
margin-right: 20%;
}
.input-group {
display: flex;
gap: 10px;
}
input[type="text"] {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1>AI对话测试</h1>
<div class="chat-box" id="chatBox"></div>
<div class="input-group">
<input type="text" id="userInput" placeholder="输入消息..." />
<button onclick="sendMessage()">发送</button>
</div>
</div>
<script>
const API_ENDPOINT = 'https://api.dify.ai/v1/chat-messages'; // 替换为实际API地址
const API_KEY = 'app-2xHndY3X9MxNm2Y5LTYZ6qE5';
async function sendMessage() {
const userInput = document.getElementById('userInput');
const chatBox = document.getElementById('chatBox');
const message = userInput.value.trim();
if (!message) return;
// 添加用户消息
addMessage(message, 'user');
userInput.value = '';
try {
const response = await fetch(API_ENDPOINT, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${API_KEY}`
},
body: JSON.stringify({
inputs: {},
query: message,
response_mode: "blocking",
user: "test_user" // 可自定义用户标识
})
});
const data = await response.json();
const aiResponse = data.answer || "未能获取响应";
addMessage(aiResponse, 'bot');
} catch (error) {
console.error('请求出错:', error);
addMessage("请求出错，请检查控制台", 'bot');
}
}
function addMessage(text, sender) {
const chatBox = document.getElementById('chatBox');
const messageDiv = document.createElement('div');
messageDiv.className = `message ${sender}-message`;
messageDiv.textContent = text;
chatBox.appendChild(messageDiv);
chatBox.scrollTop = chatBox.scrollHeight;
}
// 回车键发送
document.getElementById('userInput').addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
sendMessage();
}
});
</script>
</body>
</html>