martonlyra / video-transcript-ai Goto Github PK

by Marton Lyra

Instrutor: Diego Fernandes

Projeto criado do zero por Marton Lyra em Setembro de 2023, seguindo instruções do instrutor.

Objetivo: receber um vídeo do usuário via upload e, usando inteligência artificial, faremos um transcript do audio para texto seguido de solicitações à IA como, por exemplo, solicitar sugestões de títulos e descrições para o vídeo.

• [13m00s] O primeiro passo foi gerar o projeto usando o ViteJs, uma ferramenta para gerar a estrutura inicial de vários tipos de projetos. Para isso, usei o template React e TypeScript como linguagem principal.

• [14m45s] Uma vez criado a estrutura, baixei as dependências usando o pnpm, excluí alguns arquivos desnecessários e configurei outros.

• [17m50s] Vamos usar os componentes do RadixUI, que são vários componentes prontos, funcionais, porém sem estilo.

• [17m00s] Estaremos usando o Tailwind CSS, uma biblioteca onde descrevemos componentes diretamente no class do HTML. Apesar dele deixar o HTML um pouco mais poluído, isso não chega a ser problema já que o React é bem dividido em componentes.

• [19m40s] Também vamos usar o shadcn/ui, uma biblioteca com vários componentes implementados usando themas. O shadcn/ui é perfeito para agrupar as funcionalidades do RadixUI com o Tailwind CSS. O shadcn/ui possui todos os componentes do RadixUI e mais alguns, estilizados, usando um Style Guide, ou seja, um padrão entre eles. Excelente para buscar produtividade, principalmente se você não precisa se preocupar muito em personalizar o front, de forma exclusiva. Se sua aplicação precisa de um design bem específico, então esquece o shadcn/ui, que trás uma estilização própria, coda a aplicação usando o RadixUI e o Tailwind CSS.

• [20m40s] Quando instalamos o shadcn/ui, ele automaticamente já instala o RadixUI e o Tailwind CSS. Portanto, basta se preocupar em instalar o shadcn/ui.

• [21m00s] Para instalar o shadcn/ui, basta ir na página de instalação e, como estamos usando o ViteJs, clicar no ícone do Vite.

• [30m40s] Usei o VSCode com as seguintes extensões para desenvolver: Code Spell Checker, Prisma, Tailwind CSS IntelliSense, PostCSS Language Support.

• [31m30s] Por padrão, o shadcn/ui tem um tema light. Para mudar para o Dark, navegue até o site do shadcn/ui e clique em Themes e, no botão Customize, customizei diferente do instrutor, escolhendo o estilo (New York), cor (Verde), Mode (Dark), dentre outros. [32m30s] Uma vez personalizado, clique em Copy code, selecione o conteúdo da tag .dark, abre o arquivo no projeto index.css, e cole tudo dentro da tag :root, sem apagar a última linha --radius. Também pode excluir toda a tag .dark.

• [33m30s] O arquivo src/App.tsx é o arquivo principal do React. Aqui podemos escrever HTML, CSS, JavaScript, tudo junto, que é o grande poder do React.

• [34m30s] O shadcn/ui trás os componentes mais específicos como botões, select. Mas, por exemplo, um cabeçalho, nós temos que criar.

• [37m40s] Quando você define a cor de um texto ou objeto, você poderia, usando o Tailwind CSS, colocar a dor diretamente (exemplo: text-zinc-400). Porém, como estamos usando o shadcn-ui, ele tráz umas cores meio que padrão, para você utilizar de forma fácil em várias partes do projeto. Por exemplo: text-muted-foregrount que é um texto discreto, sem muito destaque. A vantagem de usar os nomes do shadcn-ui é que, se um dia, você quiser colocar um thema de outra cor, dessa forma fica mais fácil de alterar.

• [39m20s] Vamos configurar o primeiro componente do shadcn-ui, o Button.

• [40m05s] Instalando e usando a biblioteca lucide-react que permite usar diversos ícones no projeto. No caso, usaremos o ícone do Github.

• [40m45s] Instalando o componente separator do shadcn/ui: pnpm dlx shadcn-ui@latest add separator. O componente foi salvo em src/components/ui/separator.tsx.

• [42m10s] Queremos que a aplicação ocupe a tela inteira, um full screen. Para isso, no div principal, colocamos o className "min-h-screen". E seguimos a construção do front da aplicação.

• [49m10s] Agora adicionamos o componente textarea do shadcn-ui: pnpm dlx shadcn-ui@latest add textarea. Sempre lembrando que todos os componentes do shadcn-ui possuem a primeira letra em maiúsculo, para não confundir com as tags do HTML.

• [53m15s] Inserindo o input type file para fazer o upload do vídeo. Usamos a propriedade "sr-only", ou seja, screen reader only. Essa propriedade vai remover da tela, visualmente, mas o elemento continua na DOM com suas funcionalidades, por conta de acessibilidade.

• [59m10s] Instalando e usando o componente label do shadcn-ui: pnpm dlx shadcn-ui@latest add label, seguido pelo prompt de transcrição.

• [1h01m15s] Configurando o botão para carregar o vídeo.

• [1h02m20s] Vamos agora incluir: o prompt, o modelo, a temperatura e o executar.

• [1h03m50s] Instalando componente select do shadcn-ui: pnpm dlx shadcn-ui@latest add select, para selecionar o modelo de linguagem. O componente Select não é um componente apenas. Ele é formado por vários, Select´s, como, Select, SelectTrigger, SelectValue, dentre outros.

• [1h06m38s] Agora vamos incluir a temperatura instalando componente slider do shadcn-ui: pnpm dlx shadcn-ui@latest add slider.

• [1h08m20s] Incluímos o botão executar.

• [1h09m08s] Faltou incluir o prompt da IA. Fizemos isso e concluímos a interface da aplicação.

• Analisando o resultado da interface, optei por alterar a altura da tag de upload de vídeo. Ao invés de aspect-ratio, alterei para h-20.