https://github.com/mathrb22/let-me-ask-web
Frontend React + TypeScript para sistema inteligente de Q&A com respostas automáticas por IA, transcrição de áudio em tempo real e busca semântica para automação de transmissões ao vivo.
https://github.com/mathrb22/let-me-ask-web
ai audio-processing audio-transcription frontend gemini-api let-me-ask nlw nlw-agents qa-system react-query reactjs rocketseat rocketseat-nlw semantic-search semantic-vector-evaluation shadcn-ui tailwindcss typescript vite webapp
Last synced: 3 months ago
JSON representation
Frontend React + TypeScript para sistema inteligente de Q&A com respostas automáticas por IA, transcrição de áudio em tempo real e busca semântica para automação de transmissões ao vivo.
- Host: GitHub
- URL: https://github.com/mathrb22/let-me-ask-web
- Owner: mathrb22
- License: mit
- Created: 2025-07-10T02:54:15.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-07-22T16:07:42.000Z (11 months ago)
- Last Synced: 2025-09-02T13:56:36.594Z (10 months ago)
- Topics: ai, audio-processing, audio-transcription, frontend, gemini-api, let-me-ask, nlw, nlw-agents, qa-system, react-query, reactjs, rocketseat, rocketseat-nlw, semantic-search, semantic-vector-evaluation, shadcn-ui, tailwindcss, typescript, vite, webapp
- Language: TypeScript
- Homepage:
- Size: 1.82 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[**Sobre**](#-sobre) **|**
[**Objetivo**](#-objetivo) **|**
[**Tecnologias e ferramentas**](#-tecnologias-e-ferramentas) **|**
[**Features**](#-features) **|**
[**Instalação e execução**](#-instalação-e-execução) **|**
[**Integração com o Backend**](#-integração-com-o-backend) **|**
[**Como contribuir**](#-como-contribuir) **|**
[**Licença**](#-licença)
## 📃 Sobre
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**](https://github.com/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.
## 🎯 Objetivo
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.
## 🚀 Tecnologias e ferramentas
React
Vite
TypeScript
Tailwind CSS
React Query
React Router
Lucide React
shadcn/ui
## ✨ Features
https://github.com/user-attachments/assets/ae41d2c9-62df-4606-875d-d86f6366ce3b
### 🏠 **Sistema de Salas**
✅ **Criação e listagem de salas:** interface para criação, navegação e listagem de salas disponíveis via API.
### ❓ **Sistema de Perguntas**
✅ **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.
### 🎙️ **Gravação de Áudio Inteligente**
✅ **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.
### 🤖 **Integração com IA**
✅ **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.
### 🎨 **Interface e Experiência do Usuário**
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
### 📱 **Melhorias Mobile e Responsividade**
✅ **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
https://github.com/user-attachments/assets/bf38a187-6d79-4e6b-9db1-75c598ddd57e
## 🔧 Instalação e execução
Para baixar o código-fonte do projeto em sua máquina, primeiramente terá que ter instalado o [**Git**](https://git-scm.com/).
Com o Git instalado, em seu terminal execute o seguinte comando:
```bash
git clone https://github.com/mathrb22/let-me-ask-web.git
```
Para instalar as dependências e executar o projeto terá que ter instalado em sua máquina o [**node.js**](https://nodejs.org/en/), que vem acompanhado do npm. Instale as dependências usando o comando abaixo:
```bash
npm install
```
Executar o projeto:
```bash
npm run dev
```
A aplicação estará disponível em http://localhost:5173. Você poderá acessá-la a partir do seu navegador.
## 🔗 Integração com o Backend
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.
### 📦 Repositório do backend
O código-fonte do backend está disponível em um repositório separado:
🔗 **[Let me ask - Server (API)](https://github.com/mathrb22/let-me-ask-server)**
### ⚙️ Funcionalidades do backend
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)_
### 🚀 Como executar o backend
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](https://github.com/mathrb22/let-me-ask-server?tab=readme-ov-file#-instala%C3%A7%C3%A3o-e-execu%C3%A7%C3%A3o)**
## 💡 Como contribuir
- 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.
## 📝 Licença
Esse projeto está sob a licença **MIT**. Veja o arquivo _**LICENSE**_ para mais detalhes.
---
Desenvolvido com 💚 por mathrb22
