Как транслировать ответ OpenAI в NextJS

Опубликовано: 2024-03-22

ИИ/МО 4 минуты 3

22 марта 2024 г.

Краткое содержание:

Узнайте, как беспрепятственно передавать ответы OpenAI в NextJS с помощью AI SDK от Vercel. С помощью простого процесса интеграции, описанного в этом руководстве, разработчики могут эффективно использовать возможности генерации искусственного интеллекта в реальном времени, улучшая взаимодействие с пользователем и повышая эффективность рабочего процесса.

В сегодняшней быстро развивающейся цифровой среде интеграция передовых возможностей искусственного интеллекта стала обязательным условием для компаний, стремящихся оставаться конкурентоспособными. Для компании-разработчика OpenAI использование возможностей передовых технологий, таких как NextJS, для оптимизации процесса создания и управления ответами OpenAI дает множество преимуществ.

Опыт компании-разработчика OpenAI может существенно повлиять на плавную интеграцию и использование возможностей OpenAI в рамках NextJS, от улучшения пользовательского опыта до оптимизации рабочего процесса. В этом руководстве мы углубляемся в стратегии и идеи, необходимые компаниям-разработчикам OpenAI для эффективного использования потенциала NextJS для оптимизации реагирования OpenAI, тем самым давая компаниям возможность открыть новые сферы инноваций и эффективности.

Мы знаем, что вы были разочарованы и искали потоковые ответы OpenAI в NextJS. Существует множество способов потоковой передачи ответа OpenAI, а также многое, что нужно сделать после потока, который анализирует данные, чтобы сделать их читабельными.

Примечание. На протяжении всего блога мы будем использовать NextJS и Vercel AI SDK.

Что такое Next.js?

Next.js — это платформа React для создания полнофункциональных веб-приложений. Вы используете компоненты React для создания пользовательских интерфейсов и Next.js для дополнительных функций и оптимизации.

Под капотом Next.js также абстрагирует и автоматически настраивает инструменты, необходимые для React, такие как объединение, компиляция и многое другое. Это позволяет вам сосредоточиться на создании приложения, а не тратить время на настройку.

Независимо от того, являетесь ли вы индивидуальным разработчиком или частью более крупной команды, Next.js поможет вам создавать интерактивные, динамичные и быстрые приложения React.

Что такое Версель?

Vercel — это платформа для разработчиков, которая предоставляет инструменты, рабочие процессы и инфраструктуру, необходимые для более быстрого создания и развертывания веб-приложений без необходимости дополнительной настройки.

Vercel поддерживает популярные интерфейсные платформы «из коробки», а ее масштабируемая и безопасная инфраструктура распределена по всему миру для обслуживания контента из центров обработки данных рядом с вашими пользователями на оптимальной скорости.

Какая связь между Vercel и Nextjs?

Платформа Vercel создана создателями Next.js и предназначена для приложений Next.js. В заключение отметим, что отношения между Vercel и Next.js представляют собой симбиотическое партнерство, которое переопределяет способы создания и развертывания веб-приложений. Используя сильные стороны обеих платформ, разработчики могут открыть новые возможности и предоставить исключительный веб-интерфейс, выделяющийся в современной конкурентной среде.

Во время разработки Vercel предоставляет инструменты для совместной работы над вашими проектами в режиме реального времени, такие как автоматический предварительный просмотр и рабочие среды, а также комментарии к предварительным развертываниям.

Как мы можем упростить потоковую передачу с помощью Vercel и NextJS?

В июне 2023 года Vercel выпустила новую библиотеку ai (Vercel AI SDK), которая предоставляет встроенные адаптеры LLM, помощники пользовательского интерфейса Streaming First, помощники потока и обратные вызовы. С появлением этой библиотеки потоковая передача ответов OpenAI стала намного проще.

Прежде чем углубляться в пример, позвольте мне рассказать вам, какие библиотеки/фреймворки узлов поддерживает Vercel AI SDK.

Он поддерживает React/Next.js, Svelte/SvelteKit, поддержка Nuxt/Vue появится в ближайшее время.

Пример — интерфейс и серверная часть в NextJS (фреймворк реагирования)

Шаг 1. Создание приложения NextJS и установка Vercel AI SDK

npx create-next-app@latest

Чтобы установить SDK, введите в терминале следующую команду:

НПМ, я ИИ

Чтобы установить Openai, введите в терминале следующую команду:

нпм, я открываю

Я только что воспользовался простой/стандартной структурой папок, которую создал для меня npx create-next-app@latest, чтобы сделать эту демонстрацию простой и понятной.

Шаг 2. Создайте интерфейсную страницу для потоковой передачи ответа.

"использовать клиент"

импортировать {useState} из «реагировать»;

экспортировать функцию по умолчанию Home() {

const [вопрос, setQuestion] = useState("")

const [ответ, setAnswer] = useState("")

/// функция для вызова маршрутизатора openai и обработки потокового ответа

асинхронная функция retiveResponse() {

/// вызываем маршрут

константный ответ: любой = await fetch("/api/chat", {

метод: «ПОСТ»,

тело: JSON.stringify({

вопрос

}),

следующий: {перепроверить: 0 }

})

пусть ответтекст = "";

константный читатель = response.body

.pipeThrough(новый TextDecoderStream())

.getReader();

/// продолжаем поток

в то время как (истина) {

const {значение, выполнено} = ожидание read.read();

если (сделано) {

перерыв;

}

соответствующий текст += значение;

setAnswer (соответственный текст);

}

возвращаться (

<дел>

<input type="text" value={question} onChange={(e)=>setQuestion(e.target.value)}/>

<button onClick={retiveResponse}>Ответ потока</button>

<br />

<p>{ответ</p>

</div>

);

}

Вышеупомянутый компонент создает интерфейс, в котором пользователи могут вводить вопросы и нажимать кнопку, чтобы отправить вопрос в серверный API (/api/chat), а также отображать потоковый ответ с сервера в режиме реального времени.

Шаг 3. Создайте внутренний маршрут для потоковой передачи ответа.

импортировать { OpenAIStream, StreamingTextResponse } из "ai";

импортировать OpenAI из «openai»;

// Установите время выполнения на Edge для лучшей производительности

экспортировать константную конфигурацию = {

время выполнения: «край»,

};

экспортировать обработчик асинхронной функции по умолчанию (запрос, ответ) {

const {вопрос} = ожидайте request.json();

// Получаем ответ от OpenAI API

const openai = новый OpenAI({

apiKey:process.env.NEXT_PUBLIC_OPENAI_KEY,

});

const responseFromOpenAI = await openai.chat.completions.create({

модель: "ГПТ-3,5-турбо",

температура: 0,

топ_п: 1,

сообщения: [{ роль: "пользователь", содержимое: вопрос }],

поток: правда,

})

пытаться {

// Преобразуем ответ в удобный текстовый поток

константный поток = OpenAIStream (responseFromOpenAI);

// Ответить потоком

вернуть новый StreamingTextResponse(поток);

} поймать (ошибка) {

вернуть ответ.отправить(400).отправить(ошибка);

}

Приведенный выше код определяет бессерверную функцию, которая получает вопрос из HTTP-запроса, отправляет его в API OpenAI для обработки и передает ответ клиенту.

Шаг 4. Запустите приложение.

npm run dev

Выход

Видео.webm

Видео демо-версии

диск.google.com

Если вы смотрели видео, вы, вероятно, хорошо понимаете, как работает демо. Желающие изучить полный код могут найти его на GitHub по этой ссылке: Next.js OpenAI Streaming.

Использованная литература:

https://vercel.com/blog/introducing-the-vercel-ai-sdk

https://sdk.vercel.ai/docs https://platform.openai.com/docs/introduction

https://platform.openai.com/docs/introduction

Чтобы быть в курсе последних событий в области искусственного интеллекта, рекомендуется следить за документацией Vercel по искусственному интеллекту. Обязательно следите за обновлениями и улучшениями, поскольку Vercel продолжает продвигать свои предложения в области искусственного интеллекта.