A-A+

使用HuggingFace的Hosted API白嫖AI Chat的教程

2023年06月24日 VPS评价 等您评论

先上效果图


源码
<!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>

标签：

给我留言