123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8" />
- <title>智能体助手 - 流式输出演示</title>
- <style>
- body {
- font-family: 'Segoe UI', sans-serif;
- background: #f5f5f5;
- margin: 0;
- padding: 0;
- display: flex;
- flex-direction: column;
- height: 100vh;
- }
- header {
- background-color: #4CAF50;
- color: white;
- padding: 1rem;
- font-size: 1.5rem;
- text-align: center;
- }
- #chat-container {
- flex: 1;
- overflow-y: auto;
- padding: 1rem;
- background-color: #ffffff;
- box-shadow: inset 0 0 5px #ddd;
- }
- .message {
- padding: 0.6rem 1rem;
- margin-bottom: 0.8rem;
- border-radius: 10px;
- max-width: 90%;
- line-height: 1.6;
- font-size: 1.1rem;
- }
- .bot {
- background-color: #e0f7fa;
- align-self: flex-start;
- }
- .typing::after {
- content: '|';
- animation: blink 1s infinite;
- color: gray;
- }
- @keyframes blink {
- 0% { opacity: 1; }
- 50% { opacity: 0; }
- 100% { opacity: 1; }
- }
- footer {
- padding: 1rem;
- background-color: #fff;
- display: flex;
- gap: 0.5rem;
- border-top: 1px solid #ccc;
- }
- input[type="text"] {
- flex: 1;
- padding: 0.6rem;
- font-size: 1rem;
- border: 1px solid #ccc;
- border-radius: 5px;
- }
- button {
- padding: 0.6rem 1.2rem;
- font-size: 1rem;
- background-color: #4CAF50;
- color: white;
- border: none;
- border-radius: 5px;
- cursor: pointer;
- }
- button:hover {
- background-color: #45a049;
- }
- </style>
- </head>
- <body>
- <header>智能体助手 - 流式回复展示</header>
- <div id="chat-container"></div>
- <footer>
- <input id="message-input" type="text" placeholder="请输入您的消息..." />
- <button onclick="sendMessage()">发送</button>
- </footer>
- <script>
- const chatContainer = document.getElementById('chat-container');
- const input = document.getElementById('message-input');
- let source = null;
- let currentLine = null;
- function sendMessage() {
- const message = input.value.trim();
- if (!message) return;
- if (source) {
- source.close(); // 停止旧的连接
- }
- // 创建新消息容器
- currentLine = document.createElement('div');
- currentLine.className = 'message bot typing';
- chatContainer.appendChild(currentLine);
- chatContainer.scrollTop = chatContainer.scrollHeight;
- // 启动 SSE
- source = new EventSource(`/stream_text?message=${encodeURIComponent(message)}`);
- source.onmessage = function (event) {
- try {
- if (!event.data.startsWith('RunResponseContentEvent')) return;
- const contentMatch = event.data.match(/content='(.*?)'/);
- if (contentMatch && contentMatch[1]) {
- const text = contentMatch[1];
- currentLine.textContent += text;
- chatContainer.scrollTop = chatContainer.scrollHeight;
- }
- } catch (e) {
- console.warn('解析失败:', event.data);
- }
- };
- source.onerror = function () {
- currentLine.classList.remove('typing');
- source.close();
- };
- input.value = '';
- }
- </script>
- </body>
- </html>
|