Aprenda a construir aplicações interativas com Blazor e .NET 8, integrando com a poderosa API GPT-4 Vision da OpenAI. Este vídeo te guiará pelo processo de análise de imagens, desenvolvimento e geração de conteúdo de forma prática e direta. Iremos criar uma pequena aplicação Blazor .net 8 que permitirá o upload de imagens para análise, resposta à questões, e criação de conteúdo.
Índice de Capítulos:
- 00:00:00 - Introdução: Objetivos e Ferramentas Utilizadas
- 00:00:49 - Começando a Aplicação Blazor: Estrutura e Layout
- 00:03:14 - Criando e Configurando API Key na OpenAI
- 00:04:00 - Configurando Ambiente de Desenvolvimento dotnet 8 Blazor (dotnet list / new)
- 00:07:41 - Executando e Testando o Projeto Blazor Inicial (dotnet build / watch)
- 00:12:36 - Preparando o Layout para Perguntas e Respostas (HTML e SCSS)
- 00:19:27 - Usando SASS/SCSS com Blazor (com o Live SASS Compiler)
- 00:21:14 - Estilizando a Aplicação com SASS e CSS
- 00:22:22 - Extensões VSCode para desenvolvimento com Blazor
- 00:45:45 - Criando namespace e model de payload para serialização com o HttpClient
- 00:47:11 - Codificando Blazor usando Binding com variáveis, listas, e eventos
- 00:52:09 - Atribuindo RenderMode InteractiveServer à página
- 00:54:42 - Implementando upload de arquivos de imagem em Blazor
- 00:56:58 - Serializando arquivo de imagem para base64
- 01:06:00 - Implementando o envio de informações com a tecla Enter e tratamento de erros
- 01:11:54 - Montando Payload, Models, Trabalhando com serialização JSON, e fazendo o POST a API OpenAI com HttpClient
- 01:29:22 - Criando uma API Key OpenAI GPT 4
Descubra como usar a API GPT-4 Vision em uma aplicação Ionic neste tutorial prático. Passaremos pelo processo de configuração, desenvolvimento e testes tando em ambiente Web como em um Dispositivo Móvel (AVD) de um aplicativo que interage com a poderosa API de análise de imagens do OpenAI, explorando as funcionalidades através de perguntas e respostas sobre as imagens.
### Índice de capítulos:
00:00:00 - Introdução ao GPT-4 Vision e configuração do projeto Ionic
00:00:49 - Criação do projeto (aplicação) Ionic (e verificando a versão)
00:03:06 - Exploração do mecanismo de módulos Standalone do Angular
00:04:44 - Execução da aplicação com Ionic serve
00:05:52 - Estrutura de diretórios do projeto Ionic
00:07:12 - Estilização inicial da aplicação (ion-input, ion-buttons, img)
00:11:42 - Ajustes finais de estilo com SCSS
00:14:21 - Criação de variáveis para bind com TypeScript
00:15:54 - Inclusão da plataforma Android, Instalação e configuração da câmera do Capacitor (npx cap sync)
00:20:25 - Preparação para consumir a API do GPT-4 Vision
00:21:01 - Implementação do método para chamar a API de Vision
00:22:14 - Geração e uso de uma chave da API OpenAI (usando environment)
00:24:29 - Execução da chamada API dentro do código
00:27:10 - Teste de requisição e análise dos erros de CORS
00:27:58 - Ajuste do método de chamada API com o Capacitor HTTP
00:30:53 - Adição de um loading controller
00:32:26 - Testes finais no navegador da aplicação
00:34:09 - Execução e teste da aplicação em um emulador AVD Android
Nessa dica básica iremos que criar, do zero, usando o template web, uma aplicação Mvc, entender a configuração de rotas e criar tasks no VSCode para compilação automática de styles escritos em SASS.
