Aprendizagem pessoal com IA
e orientação prática
讯飞绘镜

OpenAI Realtime API Next.js: um modelo Next.js para criar aplicativos de IA de diálogo de voz em tempo real

Introdução geral

O OpenAI Realtime API Next.js é um projeto de código aberto baseado na estrutura Next.js, projetado para ajudar os desenvolvedores a criar rapidamente aplicativos de IA de voz em tempo real. O projeto integra a API em tempo real da OpenAI e a tecnologia WebRTC, fornecendo componentes modernos de interface do usuário e ferramentas para chamar a função. Ao usar esse modelo, os desenvolvedores podem criar facilmente aplicativos de IA de voz que suportam conversas de áudio em tempo real com localização em vários idiomas. O projeto também inclui segurança rigorosa do tipo TypeScript e regras de eslint para garantir a qualidade e a manutenção do código.

OpenAI Realtime API Next.js:构建实时语音对话AI应用的Next.js模板-1

Demonstração on-line: https://openai-rt-shadcn.vercel.app/


 

Lista de funções

  • Estrutura Next.jsRenderização no lado do servidor e roteamento de API usando Next.js.
  • Interface do usuário modernizadaDesign de animação com Tailwind CSS e Framer Motion, usando componentes shadcn/ui.
  • Suporte a WebRTCGancho: fornece um gancho que abstrai o processamento de WebRTC para simplificar a implementação de diálogos de áudio em tempo real.
  • Chamada de ferramentaContém cinco funções de amostra que demonstram o uso de ferramentas do lado do cliente em conjunto com a API em tempo real.
  • Localização em vários idiomasSuporte para selecionar o idioma (inglês, espanhol, francês, chinês) no qual as cadeias de caracteres e os agentes de voz são aplicados.
  • segurança de tipoUse TypeScript e siga rigorosamente as regras do eslint.

 

Usando a Ajuda

Processo de instalação

  1. armazém de clones
复制复制复制复制复制复制复制
复制
   git clone https://github.com/cameronking4/openai-realtime-api-nextjs.git
cd openai-realtime-api-nextjs
  1. Configurações ambientais No diretório raiz, crie um arquivo.enve adicione sua chave de API da OpenAI:
复制复制复制复制复制复制
复制
   OPENAI_API_KEY=your-openai-api-key
  1. Instalação de dependências Se estiver usando o Node.js:
复制复制复制复制复制
复制
   npm install

Se estiver usando o Deno:

复制复制复制复制
复制
   deno install
  1. Executar o aplicativo Se estiver usando o Node.js:
复制复制复制
复制
   npm run dev

Se estiver usando o Deno:

复制复制
复制
   deno task start

O aplicativo será executado nohttp://localhost:3000.

Instruções de uso

  1. Abra o aplicativo Abrir em seu navegadorhttp://localhost:3000.
  2. Selecionar voz Selecione uma voz e inicie uma sessão de áudio.
  3. Chamada de ferramenta O projeto fornece cinco funções de amostra que mostram como chamar a ferramenta no lado do cliente:
    • getCurrentTimeHora atual: obtém a hora atual.
    • partyModeMudança para o modo de festa.
    • changeBackground: Alterar o plano de fundo.
    • launchWebsiteLançamento do site.
    • copyToClipboardCopiar para a área de transferência.
  4. Suporte a vários idiomas A localização multilíngue de strings de aplicativos e agentes de voz pode ser obtida selecionando-se diferentes idiomas.

Implantação em Vercel

  1. Implementação em um clique Com a plataforma Vercel, o aplicativo pode ser implantado com um único clique.
  2. Configuração de variáveis de ambiente Nas configurações de projeto do Vercel, adicione sua chave de API do OpenAI.

licenças

O projeto é de código aberto sob a licença MIT, consulte o arquivo LICENSE para obter detalhes.

uma nota de agradecimento

Agradecemos à OpenAI pela API e pelos modelos, à estrutura Next.js, ao Tailwind CSS pelo estilo e ao blog de Simon Willison pela inspiração.

Não pode ser reproduzido sem permissão:Chefe do Círculo de Compartilhamento de IA " OpenAI Realtime API Next.js: um modelo Next.js para criar aplicativos de IA de diálogo de voz em tempo real
pt_BRPortuguês do Brasil