React中实现大模型的打字机效果

React 想实现一个打字机的效果,类似千问、Kimi 返回的效果。调用大模型时,模型的回答通常是流式输出的,如果等到模型所有的回答全部完成之后再展示给最终用户,交互效果不好,因为模型计算推理时间比较长。本文将采用原生 React 写一个简单的组件,调用本地 Ollama 模型进行对话。

服务端实现

由于要流式返回数据数据,正常的 http 请求是一来一回,不会一段一段返回,Websocket 是一个解决方案,Websocket比较重,模型对话只需要单向的返回就可以。所以,OpenAI提供的 API是基于 SSE (Server Sent Event)协议的,SSE 协议采用 Http Chunk Response 实现。下图中可以看到,Response 是 Chunked 编码的。

客户端实现

通过 Fetch 调用 Ollama 提供的接口,并对返回进行处理,Fetch API 默认支持 Chunk 编码。由于是流式输出,需要定义从 Reponse body 中获取一个 reader,代码如下:

复制代码
import React, { useState, useEffect } from 'react';

const ChunkedJSONResponseComponent = () => {
  const [responses, setResponses] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('http://10.91.3.116:11434/api/generate', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          model: "testllama3",
          prompt: "Why is the sky blue?",
          stream: true
        })
      });

      const reader = response.body.getReader();
      const decoder = new TextDecoder();
	  #处理返回值
      const processChunk = ({ done, value }) => {
        if (done) {
          console.log('Stream complete');
          setLoading(false);
          return;
        }

        const chunk = decoder.decode(value, { stream: true });
        const lines = chunk.split('\n').filter(line => line.trim() !== '');

        lines.forEach(line => {
          try {
            const jsonObject = JSON.parse(line);
            setResponses(prevResponses => [...prevResponses, jsonObject.response]);
          } catch (e) {
            console.error("Failed to parse JSON:", e);
          }
        });

        reader.read().then(processChunk);
      };

      reader.read().then(processChunk);
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>Chunked JSON Response</h1>
      <p>
        {responses.map((response, index) => (
          <span>{response}</span>
        ))}
      </p>
      {loading && <div>Loading...</div>}
    </div>
  );
};

export default ChunkedJSONResponseComponent;

总结

OpenAI 设计的接口比较简单,后续出来的大模型都遵循了 OpenAPI 的接口格式,感谢各位大佬没有再造轮子。打字机效果实现很简单,由于原生 Fetch API 就支持 Chunk 编码,做对应的处理既可以完成。

相关推荐
子兮曰1 小时前
🚀前端依赖配置避坑指南:深度解析package.json中devDependencies的常见误解
前端·javascript·npm
forever_Mamba1 小时前
实现一个高性能倒计时:从踩坑到最佳实践
前端·javascript
小帆聊前端1 小时前
JS 原型链深度解读:从混乱到通透,掌握 90% 前端面试核心
javascript
子兮曰1 小时前
浏览器与 Node.js 全局变量体系详解:从 window 到 global 的核心差异
前端·javascript·node.js
召摇1 小时前
API 设计最佳实践 Javascript 篇
前端·javascript·vue.js
小桥风满袖1 小时前
极简三分钟ES6 - ES9中Promise扩展
前端·javascript
Mintopia1 小时前
🧑‍💻 用 Next.js 打造全栈项目的 ESLint + Prettier 配置指南
前端·javascript·next.js
Mintopia1 小时前
🤖 微服务架构下 WebAI 服务的高可用技术设计
前端·javascript·aigc
江城开朗的豌豆1 小时前
React 跨级组件通信:避开 Context 的那些坑,我还有更好的选择!
前端·javascript·react.js
吃饺子不吃馅2 小时前
root.render(<App />)之后 React 干了哪些事?
前端·javascript·面试