OpenAI Realtime API Next.js: шаблон Next.js для создания приложений ИИ с голосовым диалогом в реальном времени

Общее введение

OpenAI Realtime API Next.js - это проект с открытым исходным кодом, основанный на фреймворке Next.js, призванный помочь разработчикам быстро создавать приложения голосового ИИ в реальном времени. Проект интегрирует API реального времени OpenAI и технологию WebRTC, предоставляя современные компоненты пользовательского интерфейса и инструменты для вызова функций. Используя этот шаблон, разработчики могут легко создавать приложения голосового ИИ, поддерживающие аудиопереговоры в реальном времени с многоязыковой локализацией. Проект также включает в себя строгую безопасность типов TypeScript и правила eslint для обеспечения качества и сопровождаемости кода.

Онлайн-демонстрация: https://openai-rt-shadcn.vercel.app/

Список функций

• Next.js Framework: Серверный рендеринг и маршрутизация API с помощью Next.js.
• Модернизированный пользовательский интерфейс: Анимационный дизайн с помощью Tailwind CSS и Framer Motion, с использованием компонентов shadcn/ui.
• Поддержка WebRTC: Предоставьте крючок, который абстрагирует обработку WebRTC для упрощения реализации аудиодиалогов в реальном времени.
• Вызов инструмента: Содержит пять примеров функций, демонстрирующих использование клиентских инструментов в сочетании с API реального времени.
• Многоязычная локализация: Поддержка выбора языка (английский, испанский, французский, китайский), на котором будут применяться строки и голосовые агенты.
• безопасность типа: Используйте TypeScript и следуйте строгим правилам eslint.

Использование помощи

Процесс установки

1. склад клонов

   git clone https://github.com/cameronking4/openai-realtime-api-nextjs.git
cd openai-realtime-api-nextjs

2. Параметры окружающей среды В корневом каталоге создайте.envи добавьте свой ключ API OpenAI:

   OPENAI_API_KEY=your-openai-api-key

3. Установка зависимостей Если вы используете Node.js:

   npm install

При использовании Deno:

   deno install

4. Запуск приложения Если вы используете Node.js:

   npm run dev

При использовании Deno:

   deno task start

Приложение будет работать наhttp://localhost:3000.

Инструкция по применению

1. Откройте приложение Откройте в браузереhttp://localhost:3000.
2. Выберите голос Выберите голос и начните аудиосеанс.
3. Вызов инструмента Проект содержит пять примеров функций, которые показывают, как вызывать инструмент на стороне клиента:
   • getCurrentTime: Получение текущего времени.
   • partyMode: Переключение в режим вечеринки.
   • changeBackground: Измените фон.
   • launchWebsite: Запустите сайт.
   • copyToClipboard: Копировать в буфер обмена.
4. Поддержка нескольких языков Многоязычная локализация строк приложений и голосовых агентов может быть достигнута путем выбора различных языков.

Развертывание в Верселе

1. Развертывание одним щелчком мыши С помощью платформы Vercel приложение можно развернуть одним щелчком мыши.
2. Настройка переменных среды В настройках проекта Vercel добавьте свой ключ API OpenAI.

лицензии

Проект имеет открытый исходный код под лицензией MIT, подробности см. в файле LICENSE.

благодарственная записка

Спасибо OpenAI за API и модели, фреймворку Next.js, Tailwind CSS за стилизацию, а также блогу Саймона Уиллисона за вдохновение.