Projeto Next.js criado com create-next-app.

Começando

Clone o repositório:

   git clone https://github.com/geraldohomero/app-masters-elevenlabs-project.git

Variáveis

Crie um arquivo .env.local na raiz do projeto e adicione:

NEXT_PUBLIC_API_KEY=<sua chave API ElevenLabs>
BLOB_READ_WRITE_TOKEN=<Token para o Blob Storage>

No terminal:

npm install

npm run dev

Abra http://localhost:3000

Projeto Texto em Voz

Este projeto é uma aplicação web que converte texto em voz utilizando a API da ElevenLabs. O projeto foi desenvolvido como parte do Projeto App Masters e utiliza diversas tecnologias modernas, incluindo React, TypeScript e Ant Design.

Funcionalidades

• Entrada de Texto: Permite ao usuário digitar o texto que deseja converter em voz.
• Seleção de Voz: O usuário pode selecionar diferentes vozes disponíveis para a conversão.
• Filtro de vozes: Podendo escolher por categoria, idade, gênero, sotaque e descrição.
• Reprodução de Áudio: O usuário pode ouvir a conversão do texto em voz diretamente na aplicação.
• Download de Áudio: O usuário pode baixar o áudio gerado em formato MP3.

Tecnologias Utilizadas

• React: Biblioteca JavaScript para construção de interfaces de usuário.
• TypeScript: Superset do JavaScript que adiciona tipagem estática ao código.
• Ant Design: Biblioteca de componentes de interface de usuário para React.
• API da ElevenLabs: Serviço de conversão de texto em voz.
• Vercel Blob Storage: Serviço de armazenamento de arquivos para download.
• Vercel: Plataforma de deploy de aplicações web.

Estrutura do Projeto

Componentes Principais

• textInput: Componente para entrada de texto.
• voiceSelect: Componente para seleção de voz.
• voiceDetails: Componente que exibe detalhes da voz selecionada.
• VoiceFilter.tsx: Componente de filtro da lista de vozes
• listaVozes: Componente principal que integra os demais componentes e gerencia o estado da aplicação.

Estrutura de diretórios

.
├── app/
│   ├── components/
│   │   ├── listaVozes.tsx
│   │   ├── textInput.tsx
│   │   ├── VoiceFilter.tsx
│   │   └── voiceSelect.tsx
│   ├── hooks/
│   |   └── useVoiceFilter.ts
│   ├── types/
│   |   └── voice.d.ts
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── node_modules
├── pages/
│   └── api/
│       ├── get-audio.ts
│       └── voices.ts
├── public/
├── .env.local
├── .gitignore
├── next-env.d.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── README.md
└── tsconfig.json