<p align="center">
  <img src="./.github/header.png" width="100%" />
</p>
<br>
<p align="center">
  <a href="https://www.linkedin.com/in/omarcoaur3lio/">
    <img alt="Marco Aurélio" src="https://img.shields.io/badge/-Marco Aurélio-000?style=flat&logo=Linkedin&logoColor=FFF&labelColor=9b6bfa" />
  </a>
  <a aria-label="Completed" href="https://rocketseat.com.br/">
    <img src="https://img.shields.io/badge/NLW-000?style=flat&logo=data:image/png;base64, &labelColor=9b6bfa&logoColor=000"></img>
  </a>
</p>

## :speech_balloon: Sobre

Este projeto foi desenvolvido na trilha Mastery da NLW IA da [Rocketseat](https://www.rocketseat.com.br). 
O projeto consiste em um gerador de descrições e títulos de vídeos a partir da transcrição de seu conteúdo. 
<br />
O processo é básicamente o seguinte:
1. O usuário carrega o vído para o qual deseja gerar o título e a descrição;
2. O vídeo é transformado em áudio com o FFmpeg (no browser usando WebAssembly);
3. O áudio é enviado ao back-end que, usando a API da OpenAI, utiliza o modelo Whisper para gerar a transcrição completa do áudio;
4. Com a transcrição do áudio, é realizado uma nova chamada à API da OpenAI para que, com base no prompt fornecido pelo usuário, sejam geradas a descrição e o título;


## :camera: Preview 

<div align="center">
  <img src="./.github/cover.png" width=80% />
</div>

## :rocket: Tecnologias Utilizadas

  <a href="https://react.dev/">
    <img alt="reactjs" src="https://img.shields.io/badge/React-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%FF5C00" />
  </a>
  <a href="https://www.typescriptlang.org/">
    <img alt="typescript" src="https://img.shields.io/badge/typescript-%2320232a.svg?style=for-the-badge&logo=typescript&logoColor=2d6ee6" />
  </a>
  <a href="https://tailwindcss.com/">
    <img alt="tailwind" src="https://img.shields.io/badge/tailwindCSS-%2320232a.svg?style=for-the-badge&logo=tailwindcss&logoColor=3DB4FE" />
  </a>
  <a href="https://nodejs.org/">
    <img alt="nodejs" src="https://img.shields.io/badge/Nodejs-%2320232a.svg?style=for-the-badge&logo=node.js&logoColor=67BB4A" />
  </a>
  <a href="https://www.radix-ui.com/">
    <img alt="radix-ui" src="https://img.shields.io/badge/RadixUI-%2320232a.svg?style=for-the-badge&logo=radixui&logoColor=D688FD" />
  </a>
  <a href="https://openai.com/">
    <img alt="open.ai" src="https://img.shields.io/badge/OpenAI-%2320232a.svg?style=for-the-badge&logo=openai&logoColor=FFF" />
  </a>
  <a href="https://www.prisma.io/">
    <img alt="prisma" src="https://img.shields.io/badge/prisma-%2320232a.svg?style=for-the-badge&logo=prisma&logoColor=5A67D8" />
  </a>
  <a href="https://fastify.dev/">
    <img alt="fatify" src="https://img.shields.io/badge/Fastify-%2320232a.svg?style=for-the-badge&logo=fastify&logoColor=5A67D8" />
  </a>
  <a href="https://www.langchain.com/">
    <img alt="Langchain" src="https://img.shields.io/badge/Langchain-%2320232a.svg?style=for-the-badge&logo=LangChain&logoColor=5A67D8" />
  </a>


<br>

<p align="center">
  Feito com :purple_heart:
</p>