From a903c7114ccec1886e11651d95348c81c67f9789 Mon Sep 17 00:00:00 2001
From: mylomen <1290251929@qq.com>
Date: Tue, 30 Apr 2024 20:30:12 +0800
Subject: [PATCH] to:sync

---
 static/ai-chat.html  | 293 +++++++++++++++++++++++++++++++++++++++++++
 static/ai-chat1.html |   2 +-
 2 files changed, 294 insertions(+), 1 deletion(-)
 create mode 100644 static/ai-chat.html
diff --git a/static/ai-chat.html b/static/ai-chat.html
new file mode 100644
index 0000000..9a2270a
--- /dev/null
+++ b/static/ai-chat.html
@@ -0,0 +1,293 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <style>
+        /* CSS样式 */
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+        }
+
+        .chat-container {
+            max-width: 600px;
+            margin: 20px auto;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            padding: 10px;
+        }
+
+        .chat-box {
+            height: 300px;
+            overflow-y: scroll;
+            border-bottom: 1px solid #ccc;
+            padding-bottom: 10px;
+        }
+
+        #user-input {
+            width: calc(100% - 100px);
+            padding: 8px;
+            margin-top: 10px;
+            border-radius: 5px;
+            border: 1px solid #ccc;
+        }
+
+        button {
+            padding: 8px 15px;
+            margin-left: 10px;
+            border-radius: 5px;
+        }
+
+        .message {
+            margin-bottom: 10px;
+        }
+
+        .sender {
+            font-weight: bold;
+        }
+    </style>
+</head>
+
+<body>
+<div class="chat-container" id="chat-container">
+    <div class="chat-box" id="chat-box">
+        <!-- 聊天消息将会在这里显示 -->
+    </div>
+    <input type="text" id="user-input" placeholder="Type a message...">
+    <button id="send-button" onclick="sendMessage()">Send</button>
+</div>
+</body>
+
+<script>
+    // --------------------init--------------------------------------
+    const API_KEY = "你的key";
+    const ENDPOINT = "https://api.openai.com/v1/chat/completions";
+
+    // 获取输入框元素
+    const userInput = document.getElementById('user-input');
+
+    // 监听输入框的回车事件
+    userInput.addEventListener('keydown', (event) => {
+        if (event.key === "Enter") {
+            // 处理回车事件
+            sendMessage();
+        }
+    });
+
+    // 历史消息
+    const messages = [];
+
+    // 等待
+    let waiting = false;
+    // -------------------------------------------------------------------------------------------------
+
+    /**
+     * 发送消息
+     */
+    function sendMessage() {
+        // 等待
+        if (waiting) {
+            alert('等待回复中');
+            return;
+        }
+        waiting = true;
+        // 获取到用户的输入
+        const message = userInput.value.trim();
+        // 判断用户输入是否为空
+        if (message === '') {
+            alert('请输入内容');
+            waiting = false;
+            return;
+        }
+        // 将用户输入显示在聊天框中
+        displayUserMessage(message);
+        userInput.value = '';
+        // 创建ChatGPT的回复，并获取到显示回复的容器
+        const htmlSpanElement = displayChatGPTMessageAndGetContainer();
+        // 发送消息到ChatGPT
+        addMessage("user", message);
+        const body = JSON.stringify({model: "gpt-3.5-turbo", messages: messages, stream: true});
+        ssePost(
+            // 请求地址
+            ENDPOINT,
+            // 请求头
+            {"Content-Type": "application/json", Authorization: "Bearer " + API_KEY },
+            // params，这里没有参数
+            {},
+            // body
+            body,
+            // 收到事件时的回调。这里将事件的data显示在htmlSpanElement中
+            (event) => {const content = getContent(event.data); if (content) htmlSpanElement.innerHTML += content},
+            // 结束时的回调。1.将消息添加到历史消息中 2.将等待状态设置为false
+            () => {addMessage("assistant", htmlSpanElement.innerHTML); waiting = false},
+            // 发生错误时的回调
+            (error) => {console.log(error)}
+        );
+    }
+
+
+    // 匹配回复内容的正则表达式
+    const contentPattern = /"content":"(.*?)"}/;
+
+    /**
+     * 获取回复内容
+     * @param data 数据
+     * @returns 回复内容
+     */
+    function getContent(data) {
+        const match = data.match(contentPattern);
+        if (match) {
+            return match[1];
+        } else {
+            return null;
+        }
+    }
+
+
+    /**
+     * 将消息添加到历史消息中
+     * @param role 角色。user或者assistant
+     * @param content 消息内容
+     */
+    function addMessage(role, content) {
+        messages.push({role: role, content: content});
+    }
+
+    const chatBox = document.getElementById('chat-box');
+
+    /**
+     * 将用户输入显示在聊天框中
+     * @param text 用户的输入
+     */
+    function displayUserMessage(text) {
+        const messageDiv = document.createElement('div');
+        messageDiv.classList.add('message');
+
+        const senderSpan = document.createElement('span');
+        senderSpan.classList.add('sender');
+        senderSpan.textContent = 'You: ';
+
+        const textSpan = document.createElement('span');
+        textSpan.textContent = text;
+
+        messageDiv.appendChild(senderSpan);
+        messageDiv.appendChild(textSpan);
+
+        chatBox.appendChild(messageDiv);
+        chatBox.scrollTop = chatBox.scrollHeight;
+    }
+
+    /**
+     * 将ChatGPT的回复显示在聊天框中
+     * @returns {HTMLSpanElement}
+     */
+    function displayChatGPTMessageAndGetContainer() {
+        const messageDiv = document.createElement('div');
+        messageDiv.classList.add('message');
+
+        const senderSpan = document.createElement('span');
+        senderSpan.classList.add('sender');
+        senderSpan.textContent = 'ChatGPT: ';
+
+        const textSpan = document.createElement('span');
+        messageDiv.appendChild(senderSpan);
+        messageDiv.appendChild(textSpan);
+
+        chatBox.appendChild(messageDiv);
+        chatBox.scrollTop = chatBox.scrollHeight;
+        return textSpan;
+    }
+
+
+
+
+
+
+
+
+    function objectToQueryString(obj) {
+        return Object.keys(obj)
+            .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`)
+            .join('&');
+    }
+
+    /**
+     * 发送POST请求并处理sse事件
+     * @param url 请求地址
+     * @param headers 请求头
+     * @param params 请求参数
+     * @param body 请求体
+     * @param onEvent 收到事件时的回调
+     * @param onEnd 结束时的回调
+     * @param onError 发生错误时的回调
+     */
+    function ssePost(url, headers, params, body, onEvent, onEnd, onError) {
+        // 拼接url
+        if (Object.keys(params).length > 0) {
+            url += '?' + objectToQueryString(params);
+        }
+        // 发送请求
+        fetch(url, {
+            method: 'POST',
+            headers: headers,
+            body: body,
+        }).then(async response => {
+            // 判断响应状态码
+            if (!response.ok) {
+                onError(new Error('Network response was not ok'));
+                return;
+            }
+            // 异步处理响应流
+            const reader = response.body.getReader();
+            // 响应缓冲区
+            let buffer = '';
+            // 响应的前一个字符，用于判断一个事件是否结束
+            let before = '';
+            // 循环读取响应流，直到响应流结束
+            while (true) {
+                // 读取响应流
+                const {done, value} = await reader.read();
+                // 响应流结束
+                if (done) {
+                    break;
+                }
+                // 将响应流转换为文本
+                const text = new TextDecoder().decode(value);
+                // 遍历文本
+                for (const element of text) {
+                    // 判断是否为事件结束。连续两个'\n'表示一个事件结束
+                    if (element === '\n' && before === '\n') {
+                        // 将事件中的字段分割出来。例如：event: message \n data: hello world \n id: 123 \n\n
+                        const eventAndData = buffer.substring(0, buffer.length - 1).split('\n');
+                        // 将事件中的字段转换为对象, 例如：{event: message, data: hello world, id: 123}
+                        const resultObject = {};
+                        eventAndData.forEach(pair => {
+                            const colonIndex = pair.indexOf(':');
+                            if (colonIndex === -1) {
+                                return;
+                            }
+                            resultObject[pair.substring(0, colonIndex)] = pair.substring(colonIndex + 2);
+                        });
+                        // 回调
+                        onEvent(resultObject);
+                        // 清空缓冲区
+                        buffer = '';
+                    } else
+                        // 不是事件结束，将字符添加到缓冲区
+                    {
+                        before = element;
+                        buffer += element;
+                    }
+                }
+            }
+            // 结束时的回调
+            onEnd();
+        }).catch(error => {
+            // 发生错误时的回调
+            onError(error);
+        })
+    }
+</script>
+</html>
diff --git a/static/ai-chat1.html b/static/ai-chat1.html
index 743fbb6..34cb371 100644
--- a/static/ai-chat1.html
+++ b/static/ai-chat1.html
@@ -191,7 +191,7 @@
             history: messageHistory
         };
         $.ajax({
-            url: "http://127.0.0.1:8081/assistant",
+            url: "http://127.0.0.1:11434/api/chat",
             type: "POST",
             contentType: "application/json",
             dataType: "json",
