Update chatgpt.html

Ffeixing · web-flow · commit 97df4988ddc8 · 2024-11-24T09:01:38.000+08:00
diff --git a/chatgpt.html b/chatgpt.html
@@ -1,11 +1,14 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
+    <!-- 设置网页的字符编码为 UTF-8，确保中文显示正常 -->
     <meta charset="UTF-8">
+    <!-- 设置页面视口，以适配移动端设备 -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- 设置网页标题 -->
     <title>ChatGPT 接口调用示例</title>
     <style>
-        /* 样式文件 */
+        /* 设置整个网页的字体样式和布局 */
         body {
             font-family: Arial, sans-serif;
             display: flex;
@@ -17,6 +20,7 @@
             overflow: hidden;
         }
 
+        /* 聊天容器样式 */
         .chat-container {
             width: 90%;
             max-width: 600px;
@@ -30,6 +34,7 @@
             box-sizing: border-box;
         }
 
+        /* 聊天记录框样式 */
         .chat-box {
             flex: 1;
             overflow-y: auto;
@@ -40,26 +45,30 @@
             margin-bottom: 10px;
         }
 
+        /* 聊天消息的通用样式 */
         .message {
             margin: 10px 0;
             font-size: 16px;
             line-height: 1.5;
-            white-space: pre-wrap; /* 支持换行 */
+            white-space: pre-wrap;
             position: relative;
         }
 
+        /* 用户消息样式 */
         .user-message {
             text-align: right;
             color: #007bff;
             font-weight: bold;
         }
 
+        /* AI 消息样式 */
         .assistant-message {
             text-align: left;
             color: #333;
             font-style: italic;
         }
 
+        /* 删除按钮样式 */
         .delete-button {
             position: absolute;
             top: 50%;
@@ -75,10 +84,12 @@
             display: none;
         }
 
+        /* 删除按钮的悬停效果 */
         .delete-button:hover {
             background-color: #cc0000;
         }
 
+        /* 输入框容器样式 */
         .input-container {
             display: flex;
             align-items: center;
@@ -87,6 +98,7 @@
             border-radius: 8px;
         }
 
+        /* 输入框样式 */
         input[type="text"] {
             flex: 1;
             padding: 10px;
@@ -98,6 +110,7 @@
             box-sizing: border-box;
         }
 
+        /* 按钮样式 */
         button {
             padding: 10px 20px;
             font-size: 16px;
@@ -110,47 +123,47 @@
             transition: background-color 0.3s;
         }
 
+        /* 按钮的悬停效果 */
         button:hover {
             background-color: #0056b3;
         }
     </style>
 </head>
 <body>
+<!-- 主容器 -->
 <div class="chat-container">
-    <div class="chat-box" id="chatBox">
-        <!-- 聊天记录 -->
-    </div>
+    <!-- 聊天记录框 -->
+    <div class="chat-box" id="chatBox"></div>
+    <!-- 输入框容器 -->
     <div class="input-container">
+        <!-- 用户输入框 -->
         <input type="text" id="userInput" placeholder="请输入您的问题..." />
+        <!-- 发送按钮 -->
         <button onclick="sendMessage()">发送</button>
     </div>
 </div>
 <script>
-    // 从 Cookie 获取历史会话
-    function getHistoryFromCookies() {
-        const cookies = document.cookie.split('; ').reduce((acc, cookie) => {
-            const [key, value] = cookie.split('=');
-            acc[key] = decodeURIComponent(value);
-            return acc;
-        }, {});
-        return cookies.chatHistory ? JSON.parse(cookies.chatHistory) : [];
+    // 从 Local Storage 中获取历史记录
+    function getHistoryFromLocalStorage() {
+        const history = localStorage.getItem('chatHistory');
+        return history ? JSON.parse(history) : [];
     }
 
-    // 保存会话到 Cookie
-    function saveHistoryToCookies(history) {
-        document.cookie = `chatHistory=${encodeURIComponent(JSON.stringify(history))}; path=/; max-age=${60 * 60 * 24 * 365 * 10}`;
+    // 将历史记录保存到 Local Storage
+    function saveHistoryToLocalStorage(history) {
+        localStorage.setItem('chatHistory', JSON.stringify(history));
     }
 
-    // 加载历史记录
+    // 加载历史聊天记录并显示到聊天框
     function loadHistory() {
         const chatBox = document.getElementById('chatBox');
-        const history = getHistoryFromCookies();
+        const history = getHistoryFromLocalStorage();
         history.forEach(({ role, content }) => {
             addMessage(role, content);
         });
     }
 
-    // 添加消息
+    // 添加一条聊天消息到聊天框
     function addMessage(role, content) {
         const chatBox = document.getElementById('chatBox');
         const message = document.createElement('div');
@@ -164,52 +177,46 @@
         deleteButton.onclick = () => deleteMessage(message, content);
         message.appendChild(deleteButton);
 
-        // 点击显示删除按钮
+        // 点击消息显示删除按钮
         message.onclick = () => {
             deleteButton.style.display = deleteButton.style.display === 'inline-block' ? 'none' : 'inline-block';
         };
 
         chatBox.appendChild(message);
     }
 
-    // 删除单条消息
+    // 删除指定消息并更新历史记录
     function deleteMessage(element, content) {
         const chatBox = document.getElementById('chatBox');
         chatBox.removeChild(element);
 
-        // 更新历史记录
-        const history = getHistoryFromCookies();
+        const history = getHistoryFromLocalStorage();
         const updatedHistory = history.filter(item => item.content !== content);
-        saveHistoryToCookies(updatedHistory);
+        saveHistoryToLocalStorage(updatedHistory);
     }
 
+    // 发送消息到接口
     async function sendMessage() {
         const chatBox = document.getElementById('chatBox');
         const userInput = document.getElementById('userInput').value;
 
         if (userInput.trim() === '') return;
 
-        // 用户输入显示
         addMessage('user', userInput);
-
-        // 清空输入框
         document.getElementById('userInput').value = '';
 
-        // 显示加载中提示
         const loadingMessage = document.createElement('div');
         loadingMessage.className = 'message assistant-message';
         loadingMessage.textContent = '加载中，较长文字等待时间较长';
         chatBox.appendChild(loadingMessage);
 
-        // 请求参数
         const payload = {
             model: "gpt-4o-mini",
             messages: [{ role: "user", content: userInput }],
             stream: false
         };
 
         try {
-            // API 请求
             const response = await fetch("https://apiserver.alcex.cn/v1/chat/completions", {
                 method: "POST",
                 headers: {
@@ -222,25 +229,22 @@
             const result = await response.json();
             const content = result.choices[0].message.content;
 
-            // 显示返回内容
-            loadingMessage.remove(); // 移除加载提示
+            loadingMessage.remove();
             addMessage('assistant', content);
 
-            // 保存会话到 Cookie
-            const history = getHistoryFromCookies();
+            const history = getHistoryFromLocalStorage();
             history.push({ role: 'user', content: userInput });
             history.push({ role: 'assistant', content });
-            saveHistoryToCookies(history);
+            saveHistoryToLocalStorage(history);
         } catch (error) {
             console.error("Error:", error);
             loadingMessage.textContent = '请求失败，请稍后再试。';
         }
 
-        // 自动滚动到底部
         chatBox.scrollTop = chatBox.scrollHeight;
     }
 
-    // 加载历史记录
+    // 页面加载时自动加载历史记录
     loadHistory();
 </script>
 </body>
