Sobre | Objetivo | Tecnologias e ferramentas | Features | Instalação e execução | Integração com o Backend | Como contribuir | Licença
Este repositório contém o código-fonte do frontend do projeto Let me ask, desenvolvido durante a NLW Agents (Next Level Week) da Rocketseat.
Este projeto integra a API do Google Gemini, busca semântica e processamento de dados vetoriais para fornecer respostas automáticas às perguntas dos participantes durante transmissões ao vivo. O sistema funciona da seguinte forma: com base na transcrição em tempo real da apresentação, a IA processa e armazena vetores semânticos dos assuntos abordados. Quando um usuário faz uma pergunta na sala, o sistema utiliza busca semântica para verificar se essa questão já foi respondida pelo apresentador na transcrição e, caso positivo, fornece automaticamente a resposta contextualizada.
O objetivo principal do Let me ask é de criar uma solução inteligente para transmissões ao vivo, onde perguntas dos participantes serão respondidas automaticamente através de inteligência artificial. O sistema utiliza:
- Transcrição em tempo real de transmissões ao vivo
- Processamento de dados vetoriais para armazenar contexto semântico
- Busca semântica para identificar se perguntas já foram respondidas
A aplicação foi desenvolvida com o intuito de aprimorar os conhecimentos em React, Vite, TypeScript, Tailwind CSS, React Query e React Router, além de integrar tecnologias modernas de IA e processamento de linguagem natural.
|
|
|
|
|
|
|
|
| React | Vite | TypeScript | Tailwind CSS | React Query | React Router | Lucide React | shadcn/ui |
demo-letmeask-web.mp4
✅ Criação e listagem de salas: interface para criação, navegação e listagem de salas disponíveis via API.
✅ Formulário intuitivo: interface para envio de perguntas com validação avançada e contador de caracteres.
✅ Perguntas e respostas: exibição organizada de perguntas com respostas geradas por IA em tempo real.
✅ Feedback visual: indicadores de status durante a geração de respostas pela IA.
✅ Modal de gravação: interface simplificada em modal para gravação de áudio, substituindo a página dedicada.
✅ Controles avançados: botões para iniciar, pausar, retomar e finalizar gravação com feedback visual.
✅ Gravação em segundo plano: possibilidade de gravar áudio enquanto visualiza as perguntas e respostas.
✅ Timer em tempo real: cronômetro exibindo o tempo de gravação no formato HH:MM:SS.
✅ Upload automático: captura e upload de áudio em tempo real com divisão em chunks de 10 segundos.
✅ Respostas automáticas: respostas contextualmente relevantes via Google Gemini API.
✅ Transcrição em tempo real: processamento de áudio para texto via backend.
✅ Processamento vetorial: armazenamento de vetores semânticos (embeddings) para busca eficiente.
✅ Busca semântica: identificação inteligente de respostas já fornecidas anteriormente.
A aplicação conta com uma interface moderna e responsiva, incluindo:
✅ Design responsivo: interface adaptável para diferentes tamanhos de tela.
✅ Estados de carregamento: exibição de skeleton loading durante o carregamento das salas para melhor experiência do usuário.
✅ Estados vazios: componentes de No-content quando não há salas ou perguntas cadastradas
✅ Gravação de áudio simplificada através de modal integrado à página da sala com exibição de tempo de gravação e botões de controle de pausa, retomada e finalização
✅ Tema claro/escuro com alternância suave e persistência de preferência
✅ Navegação otimizada com header fixo e botão de rolagem automática para o topo da página
✅ Diálogos adaptáveis: modais que se transformam em bottom sheets no mobile para melhor usabilidade
✅ FABs (Floating Action Buttons): botões flutuantes para ações principais no mobile (criação de salas e perguntas)
✅ Barra de status de gravação: indicador fixo no mobile mostrando status da gravação em tempo real
✅ Busca de salas: campo de pesquisa com debounce para filtrar salas
demo-letmeask-mobile.mp4
Para baixar o código-fonte do projeto em sua máquina, primeiramente terá que ter instalado o Git. Com o Git instalado, em seu terminal execute o seguinte comando:
git clone https://github.com/mathrb22/let-me-ask-web.gitPara instalar as dependências e executar o projeto terá que ter instalado em sua máquina o node.js, que vem acompanhado do npm. Instale as dependências usando o comando abaixo:
npm installExecutar o projeto:
npm run devA aplicação estará disponível em http://localhost:5173. Você poderá acessá-la a partir do seu navegador.
Esta aplicação frontend requer uma API backend para funcionar completamente. O servidor está configurado para rodar em http://localhost:3333 e é essencial para o funcionamento das principais funcionalidades.
O código-fonte do backend está disponível em um repositório separado:
O backend é responsável por:
- 🏠 Gerenciamento de salas: criação, listagem e gerenciamento de salas de Q&A
- ❓ Sistema de perguntas: armazenamento e processamento de perguntas dos usuários
- 🎙️ Processamento de áudio: captura, processamento e transcrição de áudio em tempo real
- 🤖 Integração com IA: conexão com Google Gemini API para geração de respostas
- 🔍 Busca semântica: algoritmo de busca vetorial para identificar contexto
- 📊 Processamento vetorial: geração e armazenamento de vetores semânticos (embeddings)
Para ter acesso completo às funcionalidades do sistema, é necessário configurar e executar o servidor backend.
📋 Siga o guia completo de instalação e configuração:
🔗 Instalação e execução da API
- Faça um fork desse repositório;
- Crie um branch para a sua feature:
git checkout -b minha-feature; - Faça um commit com suas alterações:
git commit -m 'feat: Minha nova feature'; - Faça um push para o seu branch:
git push origin minha-feature; - Faça um pull request com sua feature;
Pull requests são sempre bem-vindos. Em caso de dúvidas ou sugestões, crie uma issue ou entre em contato comigo.
Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
Desenvolvido com 💚 por mathrb22
