Стрімінг API-відповідей від AI-моделей до користувацького інтерфейсу за допомогою Web Streams API

Стрімінг API-відповідей від AI-моделей, таких як OpenAI або LLaMA, до користувацького інтерфейсу може значно покращити досвід користувача.

Ця стаття пояснює, як це реалізувати за допомогою Web Streams API, який обробляє дані частинами по мірі їх надходження, замість того, щоб чекати на всю відповідь.

Ось покрокова інструкція з реалізації цієї функціональності.

Крок 1: Зрозуміти Web Streams API

Web Streams API дозволяє обробляти потоки даних поступово. Це ідеально підходить для додатків, які потребують оновлень в реальному часі, таких як чат-боти або сервіси живої транскрипції.

Крок 2: Налаштування бекенду для стрімінгу

Переконайтеся, що ваш бекенд підтримує стрімінгові відповіді. AI-моделі, такі як GPT від OpenAI, підтримують цю функціональність, дозволяючи вказати параметр stream у запитах API.

Приклад: Бекенд на Node.js для OpenAI API

Ось як налаштувати сервер на Node.js для стрімінгу даних з OpenAI до клієнта:

const express = require('express');  
const fetch = require('node-fetch');  

const app = express();  

app.get('/api/stream', async (req, res) => {  
 const response = await fetch('https://api.openai.com/v1/chat/completions', {  
 method: 'POST',  
 headers: {  
 'Authorization': `Bearer YOUR_API_KEY`,  
 'Content-Type': 'application/json',  
 },  
 body: JSON.stringify({  
 model: 'gpt-4',  
 messages: [{ role: 'user', content: 'Hello!' }],  
 stream: true, // Enable streaming  
 }),  
 });  

 // Set headers for streaming  
 res.setHeader('Content-Type', 'text/event-stream');  
 res.setHeader('Cache-Control', 'no-cache');  
 res.setHeader('Connection', 'keep-alive');  

 // Stream response data  
 response.body.on('data', (chunk) => {  
 res.write(chunk.toString()); // Stream chunks to the client  
 });  

 response.body.on('end', () => {  
 res.end(); // End the stream  
 });  

 response.body.on('error', (err) => {  
 console.error('Error:', err);  
 res.status(500).end();  
 });  
});  

app.listen(3000, () => console.log('Server is running on http://localhost:3000'));

Крок 3: Інтеграція на фронтенді з Web Streams API

Фронтенд має обробляти потік даних та поступово оновлювати інтерфейс.

Приклад: Фронтенд на React

Ось як обробити стрімінгову відповідь у React-додатку:

import React, { useState } from 'react';  

function StreamAPIResponse() {  
 const [output, setOutput] = useState('');  

 const handleStream = async () => {  
 const response = await fetch('/api/stream'); // Connect to the backend API  

 if (!response.body) {  
 console.error('No response body');  
 return;  
 }  

 const reader = response.body.getReader();  
 const decoder = new TextDecoder();  
 let done = false;  

 while (!done) {  
 const { value, done: readerDone } = await reader.read();  
 done = readerDone;  
 const chunk = decoder.decode(value);  
 setOutput((prev) => prev + chunk); // Append chunk to output  
 }  
 };  

 return (  
  <div>  
    <button onClick={handleStream}>Start Streaming</button>  
    <div>{output}</div>  
  </div>  
 );  
}  

export default StreamAPIResponse;

Крок 4: Ключові особливості реалізації

1. Бекенд:

   • Виконує запит POST до OpenAI API з увімкненим параметром stream: true.
   • Стрімить частини даних, використовуючи res.write().

2. Фронтенд:

   • Обробляє ReadableStream з відповіді API, використовуючи getReader().
   • Оновлює UI поступово, додаючи частини до стану.

Висновок

Цей підхід особливо корисний для додатків, таких як інтерфейси чату, оновлення в реальному часі подій та стрімінг великих даних поступово. Виконуючи кроки, описані тут, ви зможете створити безперебійний стрімінг для ваших користувачів.

Перекладено з: Streaming API Responses from AI Models to the UI Using Web Streams API