《DeepSeek RAG 增强检索知识库系统》Ollama DeepSeek 流式应答页面对接之三

前言
自从有了 AI 工具以后，所有以前头疼前端页面开发的后端程序员👨🏻‍💻，都漏出了友善😊微笑！

主要我们可以清楚地表达编写页面诉求，AI 工具就可以非常准确且迅速的完成代码的实现。这里我们可以选择的 AI 有很多，包括；OpenAI、DeepSeek、智谱AI等等。
功能实现
服务端接口

curl 'http://localhost:8090/api/v1/ollama/generate_stream?model=deepseek-r1:1.5b&message=1%2B1'

要告诉 AI 你的接口请求方式。我们这里是 GET 请求。

应答结果

[
  {
    "result": {
      "output": {
        "messageType": "ASSISTANT",
        "properties": {
          "id": "chatcmpl-B3HPw95SsqmhoWeJ8azGLxK1Vf4At",
          "role": "ASSISTANT",
          "finishReason": ""
        },
        "content": "1",
        "media": []
      },
      "metadata": {
        "finishReason": null,
        "contentFilterMetadata": null
      }
    }
  },
  {
    "result": {
      "output": {
        "messageType": "ASSISTANT",
        "properties": {
          "id": "chatcmpl-B3HPw95SsqmhoWeJ8azGLxK1Vf4At",
          "role": "ASSISTANT",
          "finishReason": ""
        },
        "content": " +",
        "media": []
      },
      "metadata": {
        "finishReason": null,
        "contentFilterMetadata": null
      }
    }
  },
  {
    "result": {
      "output": {
        "messageType": "ASSISTANT",
        "properties": {
          "id": "chatcmpl-B3HPw95SsqmhoWeJ8azGLxK1Vf4At",
          "role": "ASSISTANT",
          "finishReason": ""
        },
        "content": " ",
        "media": []
      },
      "metadata": {
        "finishReason": null,
        "contentFilterMetadata": null
      }
    }
  },
  {
    "result": {
      "output": {
        "messageType": "ASSISTANT",
        "properties": {
          "id": "chatcmpl-B3HPw95SsqmhoWeJ8azGLxK1Vf4At",
          "role": "ASSISTANT",
          "finishReason": ""
        },
        "content": "1",
        "media": []
      },
      "metadata": {
        "finishReason": null,
        "contentFilterMetadata": null
      }
    }
  },
  {
    "result": {
      "output": {
        "messageType": "ASSISTANT",
        "properties": {
          "id": "chatcmpl-B3HPw95SsqmhoWeJ8azGLxK1Vf4At",
          "role": "ASSISTANT",
          "finishReason": ""
        },
        "content": " equals",
        "media": []
      },
      "metadata": {
        "finishReason": null,
        "contentFilterMetadata": null
      }
    }
  },
  {
    "result": {
      "output": {
        "messageType": "ASSISTANT",
        "properties": {
          "id": "chatcmpl-B3HPw95SsqmhoWeJ8azGLxK1Vf4At",
          "role": "ASSISTANT",
          "finishReason": ""
        },
        "content": "2",
        "media": []
      },
      "metadata": {
        "finishReason": null,
        "contentFilterMetadata": null
      }
    }
  },
  {
    "result": {
      "output": {
        "messageType": "ASSISTANT",
        "properties": {
          "id": "chatcmpl-B3HPw95SsqmhoWeJ8azGLxK1Vf4At",
          "role": "ASSISTANT",
          "finishReason": "STOP"
        },
        "content": null,
        "media": []
      },
      "metadata": {
        "finishReason": "STOP",
        "contentFilterMetadata": null
      }
    }
  }
]

注意：原本的 json 文件很大，不适合全部发给 openai。我这里做了截取。能体现出应答和结束标识STOP即可。

整理提问

请根据以下信息，编写UI对接服务端接口；

流式GET请求接口，由 SpringBoot Spring AI 框架实现，如下；

/**
 * curl http://localhost:8090/api/v1/ollama/generate_stream?model=deepseek-r1:1.5b&message=1+1
 */
@RequestMapping(value = "generate_stream", method = RequestMethod.GET)
@Override
public Flux<ChatResponse> generateStream(@RequestParam String model, @RequestParam String message) {
    return chatClient.stream(new Prompt(
            message,
            OllamaOptions.create()
                    .withModel(model)
    ));
}

流式GET应答数据，数组中的一条对象；

[
    {
        "result": {
            "output": {
            "messageType": "ASSISTANT",
            "properties": {
                "id": "chatcmpl-B3HPw95SsqmhoWeJ8azGLxK1Vf4At",
                "role": "ASSISTANT",
                "finishReason": ""
            },
            "content": "1",
            "media": []
            },
            "metadata": {
                "finishReason": null,
                "contentFilterMetadata": null
                }
        }
    }
]

如描述说明，帮我编写一款简单的AI对话页面。

1. 输入内容，点击发送按钮，调用服务端流式请求接口，前端渲染展示。
2. 以html、js代码方式实现，css样式使用 tailwind 编写。
3. 通过 const eventSource = new EventSource(apiUrl); 调用api接口。    
4. 从 result.output.content 获取，应答的文本展示。注意 content 可能为空。
5. 从 result.metadata.finishReason = STOP 获取，结束标识。
6. 注意整体样式的简洁美观。

执行过程 （v0.dev、DeepSeek）

虽然有AI可以帮助生成，不过有时候并不能一次就成功。
得到实现

<!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>

好了 至此 《DeepSeek RAG 增强检索知识库系统》Ollama DeepSeek 流式应答页面对接之三 点点关注不迷路 老铁们！！！！！