通过HuggingFace的Hosted API免费使用AI Chat的代码
106 人阅读 | 时间：2023年06月24日 08:02
| 阿里云服务器 | 腾讯云服务器 | VPS2EZ：老牌低调VPS | ZJI：香港日本美国独服 |
| LOCVPS服务周到 | HostKvm低调KVM VPS | 傲游主机：优质VPS | 80VPS：老牌VPS主机 |
| 搬瓦工：CN2 GIA线路 | CloudCone：性价比高 | JustMySocks科学上网 | RackNerd：超级便宜 |
| JustMySocks科学上网 | 好用的宝塔面板 | 购买搬瓦工VPS | 恒创：香港CN2服务器 |
先上效果图
源码
<!DOCTYPE html>
<html>
<head>
<title>AI Chat</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 20px auto;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.header {
background-color: #f8f8f8;
padding: 10px;
text-align: center;
font-size: 24px;
}
.chat-area {
padding: 20px;
height: 400px;
overflow-y: scroll;
}
.message {
margin-bottom: 10px;
}
.user-message {
text-align: right;
}
.user-message .message-bubble {
background-color: #DCF8C6;
color: #333;
border-radius: 10px;
padding: 10px;
display: inline-block;
max-width: 70%;
}
.bot-message {
text-align: left;
}
.bot-message .message-bubble {
background-color: #E5E5EA;
color: #333;
border-radius: 10px;
padding: 10px;
display: inline-block;
max-width: 70%;
}
.input-area {
padding: 10px;
background-color: #f8f8f8;
text-align: center;
}
.input-area input[type="text"] {
width: 70%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
.input-area button {
padding: 10px 20px;
border-radius: 5px;
background-color: #4CAF50;
color: #fff;
border: none;
cursor: pointer;
}
</style></head>
<body>
<div class="container">
<div class="header">
AI Chat
</div>
<div class="chat-area" id="chatArea"></div>
<div class="input-area">
<input type="text" id="inputText" placeholder="请输入要发送的消息" />
<button onclick="sendMessage()">发送</button>
</div>
</div>
<script>
functiON sendMessage() {
var input = document.getElementById("inputText").value;
var chatArea = document.getElementById("chatArea");
// 用户发送的消息
var userMessage = document.createElement("div");
userMessage.classList.add("message");
userMessage.classList.add("user-message");
var userMessageBubble = document.createElement("div");
userMessageBubble.classList.add("message-bubble");
userMessageBubble.innerText = input;
userMessage.appendChild(userMessageBubble);
chatArea.appendChild(userMessage);
// 发送消息到服务器
var xhr = new XMLHttpRequest();
var url = "https://api-inference.huggingface.co/models/ClueAI/ChatYuan-large-v1";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "你的KEY");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// AI回复的消息
var botMessage = document.createElement("div");
botMessage.classList.add("message");
botMessage.classList.add("bot-message");
var botMessageBubble = document.createElement("div");
botMessageBubble.classList.add("message-bubble");
botMessageBubble.innerText = response[0].generated_text;
botMessage.appendChild(botMessageBubble);
chatArea.appendChild(botMessage);
// 滚动到最新消息
chatArea.scrollTop = chatArea.scrollHeight;
}
};
var data = JSON.stringify({
inputs: "用户：" + input + "\n 小元:"
});
xhr.send(data);
// 清空输入框
document.getElementById("inputText").value = "";
}
</script></body>
</html>
评论专区