Skip to content

Latest commit

 

History

History
97 lines (76 loc) · 3.06 KB

README.md

File metadata and controls

97 lines (76 loc) · 3.06 KB
Raw

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

image