feat: 流式应答ui

2025-09-07 11:42:01 +08:00
2 changed files with 311 additions and 0 deletions
--- a/docs/nginx/html/ai-case-04.html
+++ b/docs/nginx/html/ai-case-04.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Chat</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-100 h-screen">
+<div class="container mx-auto max-w-3xl h-screen flex flex-col">
+    <!-- 消息容器 -->
+    <div id="messageContainer" class="flex-1 overflow-y-auto p-4 space-y-4 bg-white rounded-lg shadow-lg">
+        <!-- 消息历史将在此动态生成 -->
+    </div>
+
+    <!-- 输入区域 -->
+    <div class="p-4 bg-white rounded-lg shadow-lg mt-4">
+        <div class="flex space-x-2">
+            <input
+                    type="text"
+                    id="messageInput"
+                    placeholder="输入消息..."
+                    class="flex-1 p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    onkeypress="handleKeyPress(event)"
+            >
+            <button
+                    onclick="sendMessage()"
+                    class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+            >
+                发送
+            </button>
+        </div>
+    </div>
+</div>
+
+<script>
+        // 添加消息到容器
+        function addMessage(content, isUser = false) {
+            const container = document.getElementById('messageContainer');
+            const messageDiv = document.createElement('div');
+
+            messageDiv.className = `flex ${isUser ? 'justify-end' : 'justify-start'}`;
+            messageDiv.innerHTML = `
+                <div class="max-w-[80%] p-3 rounded-lg ${
+                    isUser ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800'
+                }">
+                    ${content}
+                </div>
+            `;
+
+            container.appendChild(messageDiv);
+            container.scrollTop = container.scrollHeight; // 滚动到底部
+        }
+
+        // 发送消息
+        async function sendMessage() {
+            const input = document.getElementById('messageInput');
+            const message = input.value.trim();
+
+            if (!message) return;
+
+            // 清空输入框
+            input.value = '';
+
+            // 添加用户消息
+            addMessage(message, true);
+
+            // 添加初始AI消息占位
+            addMessage('<span class="animate-pulse">▍</span>');
+
+            // 构建API URL
+            const apiUrl = `http://localhost:8090/api/v1/ollama/generate_stream?model=deepseek-r1:1.5b&message=${encodeURIComponent(message)}`;
+
+            // 使用EventSource接收流式响应
+            const eventSource = new EventSource(apiUrl);
+            let buffer = '';
+
+            eventSource.onmessage = (event) => {
+                try {
+                    const data = JSON.parse(event.data);
+                    const content = data.result?.output?.content || '';
+                    const finishReason = data.result?.metadata?.finishReason;
+
+                    if (content) {
+                        buffer += content;
+                        updateLastMessage(buffer + '<span class="animate-pulse">▍</span>');
+                    }
+
+                    if (finishReason === 'STOP') {
+                        eventSource.close();
+                        updateLastMessage(buffer); // 移除加载动画
+                    }
+                } catch (error) {
+                    console.error('解析错误:', error);
+                }
+            };
+
+            eventSource.onerror = (error) => {
+                console.error('EventSource错误:', error);
+                eventSource.close();
+            };
+        }
+
+        // 更新最后一条消息
+        function updateLastMessage(content) {
+            const container = document.getElementById('messageContainer');
+            const lastMessage = container.lastChild.querySelector('div');
+            lastMessage.innerHTML = content;
+            container.scrollTop = container.scrollHeight;
+        }
+
+        // 回车发送
+        function handleKeyPress(event) {
+            if (event.key === 'Enter' && !event.shiftKey) {
+                event.preventDefault();
+                sendMessage();
+            }
+        }
+    </script>
+</body>
+</html>
--- a/docs/nginx/html/index.html
+++ b/docs/nginx/html/index.html
@@ -0,0 +1,190 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AI Chat</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>
+    /* Custom scrollbar for chat container */
+    .chat-container::-webkit-scrollbar {
+      width: 6px;
+    }
+    .chat-container::-webkit-scrollbar-track {
+      background: #f3f4f6;
+    }
+    .chat-container::-webkit-scrollbar-thumb {
+      background: #d1d5db;
+      border-radius: 3px;
+    }
+    .chat-container::-webkit-scrollbar-thumb:hover {
+      background: #9ca3af;
+    }
+  </style>
+</head>
+<body class="bg-gray-100 min-h-screen flex flex-col">
+<div class="container mx-auto px-4 py-8 max-w-4xl">
+  <!-- Header -->
+  <div class="text-center mb-8">
+    <h1 class="text-3xl font-bold text-gray-800">AI Chat</h1>
+    <p class="text-gray-600 mt-2">Simple AI conversation powered by Ollama</p>
+  </div>
+
+  <!-- Chat Container -->
+  <div id="chatContainer" class="chat-container bg-white rounded-lg shadow-lg h-96 overflow-y-auto mb-4 p-4 space-y-4 flex flex-col">
+    <!-- Messages will be appended here -->
+  </div>
+
+  <!-- Input Form -->
+  <form id="messageForm" class="flex space-x-2">
+    <input
+            type="text"
+            id="messageInput"
+            placeholder="Type your message..."
+            class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            required
+    >
+    <button
+            type="submit"
+            class="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+            id="sendButton"
+    >
+      Send
+    </button>
+  </form>
+</div>
+
+<script>
+  const API_BASE = 'http://localhost:8090/api/v1/ollama/generate_stream';
+  const MODEL = 'deepseek-r1:1.5b';
+  const chatContainer = document.getElementById('chatContainer');
+  const messageInput = document.getElementById('messageInput');
+  const sendButton = document.getElementById('sendButton');
+  const messageForm = document.getElementById('messageForm');
+
+  let currentEventSource = null;
+  let currentAIMessageElement = null;
+
+  // Function to add user message to chat
+  function addUserMessage(message) {
+    const messageDiv = document.createElement('div');
+    messageDiv.className = 'flex justify-end mb-4';
+    messageDiv.innerHTML = `
+                <div class="max-w-xs lg:max-w-md px-4 py-2 bg-blue-500 text-white rounded-lg rounded-tr-sm">
+                    ${escapeHtml(message)}
+                </div>
+            `;
+    chatContainer.appendChild(messageDiv);
+    chatContainer.scrollTop = chatContainer.scrollHeight;
+  }
+
+  // Function to add AI message container
+  function addAIMessageContainer() {
+    const messageDiv = document.createElement('div');
+    messageDiv.className = 'flex justify-start mb-4';
+    messageDiv.id = 'aiMessage';
+    messageDiv.innerHTML = `
+                <div class="max-w-xs lg:max-w-md px-4 py-2 bg-gray-200 text-gray-800 rounded-lg rounded-tl-sm">
+                    <span id="aiContent"></span>
+                </div>
+            `;
+    chatContainer.appendChild(messageDiv);
+    currentAIMessageElement = document.getElementById('aiContent');
+    chatContainer.scrollTop = chatContainer.scrollHeight;
+  }
+
+  // Function to append text to AI message
+  function appendToAIMessage(text) {
+    if (currentAIMessageElement && text) {
+      currentAIMessageElement.textContent += text;
+      chatContainer.scrollTop = chatContainer.scrollHeight;
+    }
+  }
+
+  // Function to escape HTML
+  function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  // Function to close EventSource
+  function closeEventSource() {
+    if (currentEventSource) {
+      currentEventSource.close();
+      currentEventSource = null;
+    }
+  }
+
+  // Form submit handler
+  messageForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const message = messageInput.value.trim();
+    if (!message || currentEventSource) return; // Prevent multiple requests
+
+    // Add user message
+    addUserMessage(message);
+
+    // Clear input
+    messageInput.value = '';
+
+    // Disable send button
+    sendButton.disabled = true;
+    sendButton.textContent = 'Sending...';
+
+    // Add AI message container
+    addAIMessageContainer();
+
+    // Prepare API URL
+    const encodedMessage = encodeURIComponent(message);
+    const apiUrl = `${API_BASE}?model=${MODEL}&message=${encodedMessage}`;
+
+    // Create EventSource for streaming
+    currentEventSource = new EventSource(apiUrl);
+
+    currentEventSource.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data && data.result) {
+          const content = data.result.output?.content || '';
+          const finishReason = data.result.metadata?.finishReason;
+
+          // Append content if not empty
+          if (content) {
+            appendToAIMessage(content);
+          }
+
+          // Check for end of stream
+          if (finishReason === 'STOP') {
+            closeEventSource();
+            sendButton.disabled = false;
+            sendButton.textContent = 'Send';
+            currentAIMessageElement = null;
+          }
+        }
+      } catch (error) {
+        console.error('Error parsing SSE data:', error);
+      }
+    };
+
+    currentEventSource.onerror = (error) => {
+      console.error('EventSource failed:', error);
+      closeEventSource();
+      sendButton.disabled = false;
+      sendButton.textContent = 'Send';
+      console.log(currentAIMessageElement)
+      // if (currentAIMessageElement) {
+      //   currentAIMessageElement.textContent += ' (Error: Connection failed)';
+      // }
+    };
+  });
+
+  // Handle input focus to scroll to bottom
+  messageInput.addEventListener('focus', () => {
+    setTimeout(() => {
+      chatContainer.scrollTop = chatContainer.scrollHeight;
+    }, 100);
+  });
+</script>
+</body>
+</html>