JS+H5在线文心AI聊天（第三方接口）

最新推荐文章于 2024-09-08 23:31:24 发布

睿智的海鸥

最新推荐文章于 2024-09-08 23:31:24 发布

阅读量692

点赞数 14

本文链接：https://blog.csdn.net/w11111xxxl/article/details/140701146

版权

源码在最后面 调用的不是文心官方接口

可以正常聊天有打字动画

效果图

源代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天界面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #121212;
            margin: 0;
            padding: 0;
            color: #ffffff;
        }
        .chat-container {
            width: 400px;
            margin: 50px auto;
            background-color: #1f1f1f;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            padding: 20px;
        }
        .system-message {
            text-align: center;
            background-color: #ff4d4d;
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0;
            cursor: pointer;
            color: #ffffff;
        }
        .message {
            display: flex;
            align-items: flex-start;
            margin-bottom: 15px;
            cursor: pointer;
        }
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
        }
        .message-content {
            max-width: 70%;
            background-color: #2c2c2c;
            border-radius: 10px;
            padding: 10px;
            position: relative;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }
        .message-content p {
            margin: 0;
            word-wrap: break-word;
            color: #ffffff;
        }
        .username {
            font-size: 12px;
            color: #ff9999;
            margin-bottom: 5px;
        }
        .message.left {
            justify-content: flex-start;
        }
        .message.right {
            justify-content: flex-end;
        }
        .message.right .message-content {
            background-color: #ff4d4d;
            color: white;
        }
        .message.right .avatar {
            margin-left: 10px;
            margin-right: 0;
        }
        .input-group {
            display: flex;
            align-items: center;
            margin-top: 20px;
        }
        .input-group input[type="text"] {
            flex: 1;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            outline: none;
            color: #ffffff;
            background-color: #1f1f1f;
        }
        .input-group button {
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            background-color: #ff4d4d;
            color: white;
            cursor: pointer;
            outline: none;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }
        .input-group button:hover {
            background-color: #cc2e2e;
        }
    </style>
</head>
<body>

<div class="chat-container">
    <div class="system-message" id="system-message-1" onclick="showId('system-message-1')">AI聊天</div>
    
    <!-- 省略其他聊天消息 -->
    
    <div class="input-group">
        <input type="text" id="user-input" placeholder="输入你的消息...">
        <button onclick="sendMessage()">发送</button>
    </div>
</div>
<script>
function sendMessage() {
    var userInput = document.getElementById('user-input').value;
    if (userInput.trim()!== '') {
        // 添加用户发送的消息
        var messageElement = document.createElement('div');
        messageElement.classList.add('message', 'right');
        messageElement.innerHTML = `
            <div class="message-content">
                <div class="username">我</div>
                <p>${userInput}</p>
            </div>
            <img src="https://via.placeholder.com/40" alt="头像" class="avatar">
        `;
        document.querySelector('.chat-container').appendChild(messageElement);

        // 清空输入框
        document.getElementById('user-input').value = '';

        // 添加 AI 正在输入的消息
        var aiMessageElement = document.createElement('div');
        aiMessageElement.classList.add('message', 'left');
        aiMessageElement.innerHTML = `
            <img src="https://via.placeholder.com/40" alt="头像" class="avatar">
            <div class="message-content">
                <div class="username">AI</div>
                <p>正在输入...</p>
            </div>
        `;
        document.querySelector('.chat-container').appendChild(aiMessageElement);

        // 进行 API 请求
        fetch(`https://api.lolimi.cn/API/AI/wx.php?msg=${encodeURIComponent(userInput)}`)
          .then(response => response.json())
          .then(data => {
                // 先删除原有的&ldquo;正在输入...&rdquo;
                aiMessageElement.querySelector('p').textContent = '';
                // 使用打字特效更新 AI 的消息内容
                typeWriterEffect(aiMessageElement.querySelector('p'), data.data.output);
            })
          .catch(error => {
                console.error('请求出错:', error);
                // 在出错时也可以更新 AI 的消息内容
                aiMessageElement.querySelector('p').textContent = '出错了，请稍后再试。';
            });
    }
}

// 打字特效函数
function typeWriterEffect(element, text, speed = 50) {
    let index = 0;
    let interval = setInterval(() => {
        if (index < text.length) {
            element.textContent += text.charAt(index);
            index++;
        } else {
            clearInterval(interval);
        }
    }, speed);
}
</script>
</body>
</html>

JavaScript API调用方法(与上面无关)

1. 定义API URL

- 定义要调用的API的URL

- 例如“https://api.oioweb.cn/api/common/Get60sWorldInsight”

2. 使用Fetch API发起请求

- 使用 fetch函数发起 GET请求

- fetch函数返回一个 Promise，该 Promise在请求完成时解析为一个 Response对象。

3. 处理响应

- 检查响应是否成功

- 如果响应成功，调用 json()解析响应体为JSON格式。

- json()方法也返回一个 Promise，该 Promise在解析完成后解析为一个 JavaScript对象。

4. 提取数据

- 从解析后的 JavaScript对象中提取 “result”字段的数据。

代码实现

// 定义API URL
const url = 'https://api.oioweb.cn/api/common/Get60sWorldInsight';

// 使用fetch API发起请求
fetch(url)
  .then(response => {
    // 检查响应是否成功
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    // 解析JSON响应
    return response.json();
  })
  .then(data => {
    // 提取'result'数据
    const result = data.result;
    // 输出结果到控制台
    console.log(result);
  })
  .catch(error => {
    // 处理任何发生的错误
    console.error('There was a problem with the fetch operation:', error);
  });