[IA] Crie um aplicativo web de reconhecimento de objetos com Python e React

1. Apresentação: Oi, todo mundo. Sou Alex Baker e estou muito feliz em recebê-lo neste curso Como desenvolvedor completo, engenheiro móvel, instrutor e entusiasta de IA, tenho o privilégio de trabalhar com várias grandes empresas de tecnologia quando me especializo várias grandes empresas de tecnologia quando em tecnologias como React, React Native, React Native Hoje estamos embarcando em uma jornada emocionante juntos. Criaremos um aplicativo de reconhecimento de objetos do zero, combinando o poder de reação para nosso front-end com o FAS PI e o PTN para nosso back-end Mas esse não é apenas mais um curso de desenvolvimento web. Vamos mergulhar profundamente no fascinante mundo da IA e do aprendizado de máquina, aplicando esse conceito em cenários do mundo real. Seja você um entusiasta, ansioso por criar seu primeiro aplicativo inteligente, um aspirante a desenvolvedor que deseja entrar na tecnologia ou um programador experiente que deseja expandir seu conjunto de habilidades com a integração com Este curso foi desenvolvido para você. Trabalharemos com tecnologias de medição de corte , como API rápida, PTN e fluxo tensor, oferecendo a você uma experiência completa na criação de aplicativos modernos baseados em IA Prepare-se para se transformar de espectador em criador da tecnologia de IA Ao final deste curso, você terá as habilidades necessárias para criar aplicativos que não processam apenas dados. Eles veem e entendem o mundo ao seu redor. Vamos transformar suas inspirações de IA em realidade. 2. 02. IA, aprendizagem de máquina e aprendizagem profunda: Bem-vindos, pessoal. Portanto, antes começarmos com a codificação prática, teremos um pouco de teoria sobre IA, aprendizado de máquina e aprendizado profundo Hoje, estamos embarcando em uma jornada empolgante pelo mundo da inteligência artificial, aprendizado de máquina e do aprendizado profundo Essas são tecnologias transformadoras que estão remodelando o mundo que vemos hoje e estão surgindo novas tecnologias, novos recursos relacionados às tecnologias novos recursos relacionados às tecnologias em nossos dispositivos que estão mudando nossas E com isso, o que é IA ou inteligência artificial? inteligência oficial ou IA é um ramo da ciência da computação que se concentra na criação de máquinas inteligentes capazes de realizar tarefas que normalmente exigem inteligência humana. Mas o que isso realmente significa? Imagine um sistema de computador capaz de entender a linguagem natural, reconhecer objetos e imagens, tomar decisões e até mesmo aprender com suas experiências. Então essa é a essência da IA em geral. Trata-se de criar máquinas que imitam as funções cognitivas associamos às mentes humanas, como aprender e resolver nosso problema Os sistemas de IA podem variar de programas simples baseados em regras a sistemas completos que podem se adaptar e evoluir O objetivo é criar máquinas que possam perceber o ambiente, raciocinar sobre o que percebem e realizar ações que maximizem suas chances de sucesso suas chances de sucesso na meta que queremos neste caso. Agora, quais são os tipos de IA ou o que podemos encontrar como esses tipos de IA? Quando falamos sobre IA, é importante entender que existem diferentes tipos ou níveis de IA. Então, vamos explorar as duas categorias principais. Portanto, temos IA fraca ou estreita, IA forte ou geral. Então, IA fraca ou IA restrita, esse é um tipo de IA com a qual interagimos em nossas vidas diárias. Ele foi projetado para realizar uma tarefa restrita ou um conjunto específico de tarefas que podemos incluir nesse caso, como assistência por voz, como assistência City Alex ou Bullet, sistemas de recomendação, como vemos na Netflix ou na Amazon, software de reconhecimento de imagem e filtros de spa em e-mail Esses sistemas são excelentes e são tarefas específicas, mas podem ser executados fora dos domínios do programa Eles não têm inteligência ou consciência geral. Nesse caso, chegamos à IA forte ou IA geral. Esse é mais um conceito teórico neste momento. IA forte se refere a uma máquina que, com consciência, senciência e mente, a capacidade de aplicar inteligência a qualquer problema, em vez de apenas a uma tarefa específica Esses tipos de IA incluiriam algo como raciocinar, resolver quebra-cabeças, fazer julgamentos com certeza, planejar, aprender, comunicar-se com linguagem natural, comunicar-se com linguagem natural, integrar todas as habilidades em prol de um objetivo comum Embora você ainda não esteja lá, esse é o objetivo final dos pesquisadores de IA. É o tipo de IA que vemos em filmes como Terminator, Matrix e assim por diante Agora vamos aprender o que é aprendizado de máquina. O aprendizado de máquina é um subconjunto da IA. O aprendizado de máquina é onde as coisas realmente ficam interessantes do nosso ponto de vista. Na programação tradicional, fornecemos ao computador um conjunto de instruções explícitas para resolver um problema Mas com o aprendizado de máquina, adotamos uma abordagem diferente. Em vez de escrever instruções explícitas, fornecemos à máquina uma grande quantidade de dados e deixamos que ela aprenda a resolver nossos problemas E como isso funciona? Então, alimentamos a máquina com grandes conjuntos de dados. A máquina analisa e identifica padrões. Com base nesses padrões, a máquina pode criar suas próprias regras ou algoritmos. A máquina então pode aplicar as regras aos novos dados de pecado para fazer previsões. Por exemplo, em vez de programar um computador com todas essas regras, o que torna um e-mail spam, podemos mostrá-lo em milhares de exemplos de e-mails com e sem spam. O algoritmo de aprendizado de máquina aprenderá então a identificar as características do e-mail de spam e poderá aplicar esse conhecimento a novos e-mails que nunca foram vistos antes. A chave aqui é que os sistemas de aprendizado de máquina melhoram seu desempenho com a experiência. Quanto mais dados eles processam, melhor se tornam uma tarefa melhor. Essa capacidade de aprender e melhorar com a experiência sem ser explicitamente programado é o que diferencia o aprendizado de máquina Além do aprendizado de máquina, existem vários tipos de aprendizado. Temos o aprendizado não supervisionado em que os dados vêm sem rótulos ou clusters de dados não são rotulados, e é uma tarefa da máquina identificar e rotular esses conjuntos de identificar e Depois, temos o aprendizado supervisionado em que alimentamos a máquina com dados já rotulados Será mais fácil para a máquina aprender com esses conjuntos de dados. Depois, temos o aprendizado reforçado em que a máquina aprenderá recebendo recompensas ou punições assim como aprenderá com esses dados e nos fornecendo o resultado Então, agora podemos passar para a terceira parte do nosso contexto de IA, que é o aprendizado profundo. aprendizado profundo leva o aprendizado de máquina a um novo patamar. É um subconjunto dessa parte do aprendizado de máquina inspirado na estrutura e função do cérebro, especialmente na interconexão de muitos O aprendizado profundo usa estruturas chamadas redes neurais artificiais, que são sistemas de software projetados para imitar a maneira como nossos neurônios em nosso cérebro se conectam e se comunicam Assim como nosso cérebro pode identificar padrões e dar sentido a dados complexos, os algoritmos de aprendizado profundo podem realizar recursos semelhantes O aprendizado profundo e profundo se refere ao número de camadas nessas redes neurais, enquanto uma rede neural simples pode ter apenas uma ou duas camadas e os sistemas de aprendizado profundo podem ter centenas. Cada camada na rede neural do Depo processa os dados que recebe, extrai recursos e passa as informações processadas para a próxima À medida que os dados se movem por essas camadas, a rede pode aprender características cada vez mais abstratas e complexas dos dados. Isso torna o aprendizado profundo particularmente bom em reconhecimento de imagem e fala, processamento de linguagem natural, tradução entre idiomas, geração de imagens e vídeos realistas e até mesmo criação de arte musical Agora, como vemos aqui na tela, temos também as partes das redes neurais. Então, vamos nos aprofundar um pouco mais nas redes neurais, pois elas são a base do esgotamento Existem vários tipos de redes neurais, cada uma projetada para tipos específicos de tarefas. Então você tem a rede neural de alimentação direta. Esses são os tipos mais simples de redes neurais artificiais. As informações se movem em apenas uma direção da camada de entrada até as camadas ocultas e, em seguida, obtemos o resultado na camada de saída. Eles são usados para tarefas simples como classificação e Também temos a rede neural recorrente. Essas redes têm conexões que formam ciclos, permitindo que as informações persistam. Eles são particularmente bons no processamento de sequenciais, como texto ou dados de séries temporais E eles são usados em tarefas como tradução de idiomas e reconhecimento de fala. Em seguida, vemos as redes neurais convolucionais . Eles são projetados para processar dados com topologia de grade, como imagens Eles usam uma operação matemática chamada convolução no lugar de uma multiplicação geral de matrizes em pelo menos uma Lá, eles podem escolher qualquer tipo de tarefa de análise de imagem. Cada uma dessas redes tem seus pontos fortes e fracos, e nós escolhemos com base no problema específico em questão E agora, como juntamos todas essas partes para criar um aplicativo? Agora que entendemos os componentes individuais, vamos ver como o aprendizado de máquina de IA e aprendizado profundo funcionam juntos no cenário do mundo real. Vamos dar o exemplo do sistema de detecção de objetos em um carro autônomo. A parte de IA, o sistema abrangente que permite ao carro perceber seu ambiente, tomar decisões e controlar seu movimento Isso inclui não apenas detectar objetos, mas também planejar rotas, seguir as regras de trânsito e interagir com outros veículos e Em seguida, passamos para a parte de aprendizado de máquina, que é o mecanismo subjacente que permite que a IA aprenda com grandes quantidades de dados de direção. Isso inclui aprender a reconhecer diferentes tipos de objetos, como carros, pedestres e sinais de trânsito, entender as condições da estrada e se adaptar a A arquitetura de aprendizado profundo e, neste caso, as CNNs ou as redes neurais convolucionais usadas entram na complexa tarefa de detecção de objetos em imagens A CNN processa a entrada visual da câmera do carro, identificando e localizando objetos em tempo real Nesse cenário, a IA fornece a estrutura geral e o processo de tomada de decisão. O aprendizado de máquina então permitirá que o sistema melhore o desempenho ao longo do tempo, à medida que encontra mais cenários e cenários de complexidade . Nesse caso, o aprendizado profundo nos fornecerá um padrão poderoso para reconhecer recursos necessários para detecção e classificação de objetos em tempo real Então, quais são as aplicações reais desses tipos de tecnologias que podemos encontrar ou ter em um futuro próximo? Em aplicativos de IA, podemos obter bots de bate-papo, reconhecimento de fala, carros autônomos, assistentes virtuais como City, Alexa e Google, dispositivos domésticos inteligentes manutenção preditiva na manufatura Em seguida, podemos passar para o aprendizado de máquina onde temos a filtragem de e-mail, a detecção de fraudes, sistemas de recomendação como Netflix, Amazon, Spotify e também a previsão No aprendizado profundo, podemos ter tecnologias como reconhecimento facial, direção autônoma, diagnóstico médico, processamento de linguagem natural e assim por diante. Os benefícios dessa tecnologia para o mundo podem ter um grande impacto na saúde, proteção ambiental, educação, acessibilidade, pesquisa científica, negócios e economia e transporte. Como vimos, a IA, o aprendizado de máquina e o aprendizado profundo não estão apenas moldando nosso futuro. Eles também estão ativamente melhorando nosso presente. Essas tecnologias estão resolvendo problemas e criando oportunidades que eram inimagináveis há apenas alguns anos No entanto, é importante lembrar que grandes poderes vêm com grandes responsabilidades. À medida que essas tecnologias se tornam mais integradas em nossas vidas, também devemos considerar suas implicações éticas. E garanta que eles sejam desenvolvidos e usados de forma a beneficiar toda a humanidade. O futuro é empolgante, com certeza, e é construído com linhas de metas, redes neurais e dados. Seja você um estudante, um profissional ou simplesmente um indivíduo curioso, eu o encorajo a continuar aprendendo sobre esses campos fascinantes porque quem sabe talvez você possa desenvolver uma próxima descoberta Obrigado por se juntar a mim nessa jornada pelo aprendizado de máquina de IA e aprendizado profundo. E agora podemos passar para partes mais interessantes que são a codificação de endzone 3. 03.Redes neurais convulucionais: Agora chegamos à parte da rede neural que usaremos neste curso para detectar as imagens, usaremos a rede neural convolucional que aprendemos antes e teremos uma compreensão mais profunda sobre o que é Portanto, podemos começar com a definição de uma rede convolucional que são tipos especializados de redes neurais projetadas especificamente para processar dados visuais Eles se tornaram a espinha dorsal de vários aplicativos, desempenhando um papel crucial em tarefas como detecção de objetos, classificação de imagens, reconhecimento facial e muito mais Mas o que torna as CNNs tão especiais? Bem, eles são inspirados por processos biológicos no córtex visual dos animais Assim como nosso cérebro pode reconhecer rapidamente padrões e objetos no que vemos, CNNs podem ser treinadas para fazer exatamente o mesmo com imagens e vídeos digitais As redes neurais convolucionais nos apresentam algumas Então, agora vamos detalhá-los. Então, primeiro, temos as camadas convolucionais. Eles são o núcleo dos blocos de construção da CNN. Eles aplicam uma série de filtros à imagem de entrada, cada um projetado para detectar características específicas, como bordas, texturas ou padrões mais complexos À medida que nos aprofundamos na rede, esses recursos se tornam cada vez mais abstratos e sofisticados. Em seguida, temos também algumas camadas de tração. Após a convolução, geralmente usamos essas camadas de tração. Eles reduzem a dimensão espacial dos dados, tornando a rede mais eficiente computacionalmente e ajudando-a a se concentrar nos recursos mais importantes Os tipos comuns incluem tração máxima e tração média. Em seguida, vamos para as camadas totalmente conectadas que normalmente são encontradas no final da rede. Essas camadas conectam cada neurônio da camada anterior a cada neurônio da próxima e são usadas para fazer a classificação ou previsão final com base nas características, trechos das Tudo isso funciona é a matemática por trás de tudo isso. Então, aqui temos um exemplo de rede neural nesta imagem. Um componente crucial é a função de ativação. Em muitas CNNs, usamos o que é chamado função Lu, como você pode ver lá, que significa unidade linear retificada, e a forma é simplesmente essa fórmula matemática é nossa função de ativação neste Isso significa que para qualquer entrada X, se X for negativo, a função retornará zero. Se X for positivo, ele retornará o próprio X. Essa função simples ajuda a introduzir a não linearidade em nossa rede, permitindo que ela aprenda padrões mais complexos A beleza desse Lu é que é computacionalmente eficiente e ajuda a mitigar gradientes de desaparecimento que podem E agora, quanto à estrutura e à razão dessa rede neural profunda, entendemos os componentes. Então, vamos ver como eles se reúnem na CNN típica para detecção em tempo real, neste caso, que vamos usar em nosso aplicativo Portanto, para nossa detecção de objetos em tempo real, temos as entradas É aqui que alimentamos nossos dados. Neste caso, temos um modelo de tendência de prane. Em seguida, a convolução, a primeira camada convolucional que aplica os filtros para detectar características de baixo Nesse caso, usamos a estrutura de fluxo tensor do pacote em nosso aplicativo Em seguida, usamos a camada de tração para reduzir a dimensão especial Também usamos a convolução, outra camada convolucional que detecta Em seguida, usamos o recurso de puxar novamente, como vemos na imagem, e reduzimos as dimensões e focamos nos principais recursos Também temos, no final a camada totalmente conectada que faz nossa classificação e detecção. Em seguida, vemos o resultado na camada de saída, tais classes de objetos e alocações na imagem Essa estrutura permite que a rede aprenda progressivamente recursos mais complexos desde bordas simples até objetos complexos Quando se trata de implementar a detecção de objetos de tempo de arquivo da CNNs, geralmente usamos modelos pré-treinados Essas são CNNs que já foram treinadas em grandes conjuntos de dados e podem reconhecer uma grande variedade de objetos Podemos então ajustá-los para encontrar nosso caso específico, economizando uma quantidade significativa de tempo e recursos computacionais Uma estrutura popular para isso é como mencionamos anteriormente, o fluxo tensor Ele fornece uma API de alto nível que facilita a criação, o treinamento e a implantação de redes neurais, incluindo nossa rede neural convolucional A aplicação dessas CNNs é vasta, então também podemos obter essas redes para veículos autônomos, imagens médicas, reconhecimento facial, moderação de conteúdo e realidade aumentada Então, para concluir, as redes neurais convolucionais revolucionaram o campo da visão computacional, permitindo que as máquinas vissem e entendessem o mundo da mesma forma que fazíamos na À medida que continuamos refinando esses modelos e desenvolvendo novas arquiteturas, as possibilidades são realmente Seja você um pesquisador, desenvolvedor ou simplesmente alguém interessado nesse campo, alguém interessado nesse campo, CNNs são definitivamente uma tecnologia a ser observada Eles estão apenas moldando a visão computacional e aprimorando o recurso em si. Com isso, entendemos melhor como vamos criar nosso aplicativo. 4. 04.Instalando o VSCode: Neste curso, usarei o código do Visual Studio para editar o texto. Então, será nossa identidade. Sinta-se à vontade para usar aquele com o qual você está mais acostumado. Se você não tiver nenhum, aconselho você a instalar este para codificar comigo neste caso. E se você não sabe, código do Visual Studio é ID, editor de texto ou editor de código, faz parte do ambiente Microsoft e nos permite ter muitas extensões suportadas pela comunidade e também por grandes empresas. E esse ID suporta vários idiomas. Novamente, as extensões são parte vital para esse ID e desenvolvimento de software, também como terminal integrado, o que é muito legal e suporte ao GIT Então, para instalar o código do Visual Studio, basta clicar aqui neste botão. No meu caso, parece que vou mudar para o Mac porque estou executando um ambiente Mac. Mas, dependendo do tipo de sistema operacional que você tem, ele parecerá diferente para você. Então, basta clicar aqui. E depois de baixado, continuaremos. Então, quando o download terminar, basta acessar o Con downloade Pode ser um arquivo Zip, você só precisa extraí-lo e, dependendo do seu sistema operacional novamente, você terá um arquivo executável ou um arquivo DMG Então, vamos pressioná-lo duas vezes e continuar com a instalação. Uma coisa a notar é que temos uma pequena caixa de seleção para adicionar ao Path. Por favor, faça isso porque ele permite que você abra o editor através do terminal com um simples comando. Depois de instalado, está aberto, você pode ver o ID aqui e abordaremos mais a seguir. Mas, por enquanto, temos nosso ID instalado e podemos prosseguir. 5. Extensões 05.VSCode: Agora que temos nosso editor, instalaremos algumas extensões. Então, as extensões basicamente nos permitem obter um melhor fluxo de trabalho. Nos ajudou com alguns bugs para detectar algumas partes, com GID e até mesmo texto colorido Então, realmente depende de você. Mas, nesse caso, usaremos parte da API PyTon e FAST e instalaremos extensões que dependerão dela Portanto, em nossa base de extensões, precisaremos de todos esses pacotes Byton para nos ajudar a programar melhor, codificar com mais facilidade e oferecer suporte Existem postes que têm basicamente a inteligência que pode prever o que queremos na costa e também dizer alguns erros na costa ou algumas opções para melhorá-la Também precisamos do Biton, então a linguagem, o depurador para depurar nosso cos, o ambiente é gerenciado, então teremos gerenciamento virtual ou teremos ambientes virtuais para executar Portanto, eles também precisarão da vinculação para que o poste cegue nosso código para ver onde queremos formatar nosso código e mantê-lo igual entre todas as equipes nesse E esses são os pacotes que precisamos, e podemos instalar todo esse pacote com apenas um. Portanto, temos esse pacote de extensão do Python no qual instalaremos todos os pacotes que vimos Então, basta prosseguir com a instalação deste. Ele instalará os outros com ele e solicitaremos que você relos Então, basta recarregar o código do Visual Studio e teremos os pacotes necessários 6. Melhor maneira de tomar o curso: Nesta palestra, aprenderemos como aproveitar ao máximo e as vantagens deste curso No software, especialmente quando estamos aprendendo, nos deparamos com muitos obstáculos, mesmo seguindo os códigos junto com os vídeos. Isso aconteceu por causa de erros de digitação, erros do instrutor ou, mais frequentemente, por causa de softwares e pacotes que estão sempre mudando Então, o que você deve fazer se ficar preso não poderá mais continuar com o curso. Em primeiro lugar, não dê um centavo, é normal. Isso acontece com todo mundo. Como não consigo responder a todas as perguntas, certifique-se de usar a guia de discussão de compartilhamentos de habilidades onde você pode encontrar alunos com o mesmo problema que você e um tópico com todas as suas perguntas e respostas. Assim, podemos ajudá-lo a prosseguir com o curso. Como o software muda o tempo todo, vou deixar os recursos nas seções de recursos no compartilhamento de habilidades, onde você pode baixar os requisitos, pacote Jason e as versões corretas de todos os pacotes necessários para este curso Também deixaremos as imagens para que você possa baixar as imagens que usaremos neste curso. Se você continuar preso, use o Google. O Google na solução geralmente retorna muitos resultados, e você também pode aprender com essa pesquisa. Muitos estudantes cometerão o mesmo erro. Muitas pessoas no software terão o mesmo erro e isso pode ajudá-lo a resolvê-lo. Leia a documentação. Muitas plataformas, pacotes ou linguagens de programação nos fornecem documentação abrangente ou tutoriais sobre como instalá-los e proceder com eles Portanto, se você ficar empilhado, consulte a documentação e siga as etapas contidas nela, pois isso pode ajudá-lo a prosseguir com o curso e abastecer Você também pode perguntar à IA. Essas ferramentas estão prontas para ajudar, com certeza, e podemos fornecer uma solução rápida para o problema com mais explicações. Isso o ajudará a resolver o problema além de explicar o que aconteceu e o que você estava fazendo de errado. Se você seguir essas recomendações , sua experiência será mais suave e com qualidade geral Com tudo isso esclarecido, todos podemos prosseguir 7. Materiais: Neste curso, usaremos alguns recursos e, para encontrar os recursos, basta acessar o curso e encontrá-lo aqui. Portanto, a pasta zip conterá links, imagens e outros recursos necessários que, ao longo do curso, inseriremos nela. Portanto, fique à vontade para fazer o download e acompanhar o vídeo. 8. 08. Configuração de FastAPI e Python: Então, nesta palestra, vamos explorar algumas tecnologias interessantes que formam base do nosso aplicativo de reconhecimento de objetos de IA Então, especificamente, discutiremos BTN e a API rápida e como essas ferramentas poderosas nos permitem criar um back-end robusto e eficiente em nosso aplicativo de IA Então, vamos começar com o BTN. Muitos de vocês já estão familiarizados com essa linguagem de programação versátil, mas vamos recapitular por que ela é tão crucial para nosso projeto O PyTon costuma ser chamado de linguagem da IA por boas razões Primeiro, sua sintaxe é clara e intuitiva, facilitando a escrita e a compreensão de algoritmos complexos Isso é particularmente importante quando lidamos com conceitos de IA e aprendizado de máquina. O PyTN também possui um rico ecossistema de bibliotecas e estruturas projetadas especificamente para IA e Isso significa que temos uma grande variedade de ferramentas à nossa disposição para criar aplicativos sofisticados de IA. Além disso, a grande e ativa comunidade do Python garante que tenhamos muitos recursos, tutoriais e suporte disponíveis à medida que desenvolvemos nosso aplicativo Mas a PTN não serve apenas para IA. Sua versatilidade também nos permite usá-lo para desenvolvimento web Análise de dados, automação e muito mais. Isso é um balcão único para muitas de nossas necessidades de desenvolvimento, incluindo o fim do nosso aplicativo de reconhecimento de objetos de IA. Agora vamos falar um pouco mais sobre o FASTEPI. Portanto, o FASTEPI é uma estrutura web moderna de alto desempenho para criar APIs Mas o que isso significa e por que é importante para o nosso projeto? Em primeiro lugar, a FAST API faz jus ao seu nome. É rápido. Na verdade, é uma das estruturas PyTN mais rápidas Essa velocidade é crucial quando lidamos com o reconhecimento de objetos em tempo real, pois precisamos que nosso aplicativo responda rapidamente às entradas do usuário A API rápida também é incrivelmente fácil de usar. Se você se sentir confortável com o PyTon, descobrirá que pode se familiarizar rapidamente com o Fast API Ele usa dicas padrão do tipo PTN, que não apenas tornam seu código mais fácil de entender mas também fornecem validação automática de dados Outro ótimo recurso da API FAST é a geração automática de documentação. Isso significa que, à medida que construímos nossa API, FAST API cria automaticamente documentação interativa para ela. Veremos isso mais adiante em nosso curso. E isso é incrivelmente útil para testar nossa API para futuros desenvolvedores que possam trabalhar em nosso projeto. O FASTEPI também suporta programação síncrona, que permite que nosso aplicativo gerencie várias solicitações com eficiência E isso é vital para criar um aplicativo de IA responsivo que possa atender a vários usuários simultaneamente Então, como o PyTon e o FASEPI se unem em nosso aplicativo que não criaremos a partir de ninguém? Então, vamos detalhá-lo. Usamos Python para lidar com a lógica central do nosso aplicativo, e isso inclui imagens de processo, execução de nosso modelo de IA para reconhecimento de objetos e gerenciamento do fluxo geral de dados em nosso sistema A API FAS, por outro lado, fornece uma estrutura para nossa API da web. Isso nos permite criar endpoints com os quais nosso front-end pode se comunicar Por exemplo, podemos ter um endpoint que aceita e aplaude a imagem e retorna uma lista de objetos reconhecidos nessa A API rápida nos ajuda, eventualmente, a encerrar todas essas solicitações recebidas e respostas enviadas Ele cuida de coisas como analisar a imagem e os dados recebidos e formatar os resultados de nossos modelos de IA em uma resposta que nosso front-end A simplicidade do PTN e a natureza intuitiva da API FAST também nos permitem desenvolver e interagir rapidamente, que é crucial no mundo acelerado de IA Concluindo, PTN e FASEPI formam uma dupla poderosa que nos permite criar um back-end robusto, eficiente e escalável para nosso aplicativo de reconhecimento de objetos de IA PTN nos fornece as ferramentas e bibliotecas de que precisamos para o desenvolvimento de IA, enquanto a FASEPI oferece uma estrutura de alto desempenho para expor nossas capacidades de IA À medida que avançamos neste curso, você ganhará experiência com API PyTon e FAST Vendo primeiro, todas essas tecnologias se unem para criar algo realmente empolgante. Lembre-se de que as habilidades que você está aprendendo aqui são aplicáveis apenas ao nosso projeto específico. A combinação de PyTon e API rápida está usando vários aplicativos de IA e aprendizado de máquina em todos os setores Você está construindo um conjunto básico de habilidades que servirá bem em muitos projetos especiais. Em nossas próximas sessões, começaremos a escrever alguns códigos e veremos esses conceitos em ação. Prepare-se para dar vida ao seu ato de reconhecimento de objetivos de IA . 9. 09. Instale o Python no MacOS: Então, agora vamos instalar o PyTon em um ambiente Mac OS. Se você não tem um Mac OS, pode pular esta palestra e ir para a palestra sobre Windows, onde instalamos o PyTon Portanto, no macOS, temos várias opções para instalar o PTN Portanto, o primeiro que usaremos é instalar o PyTon por meio do Brew Portanto, o Brew é um gerenciador ou instalador de pacotes no macOS Primeiro, precisamos abrir nosso terminal e inserir esse comando. Não se preocupe. Vou deixar todos esses comandos nos recursos para que você possa copiá-los facilmente. Então, depois de termos esse comando, basta colá-lo aqui e pressionar Enter. Vou solicitar suas senhas. Então, basta digitar as senhas. E pressionamos Enter para instalar a bebida. Então, agora que temos nosso brew instalado, podemos prosseguir com a instalação do PyTon Nesse caso, vou apenas limpar meu terminal. Só precisamos digitar Brew Install PytnPressEnter e, depois disso, e, depois disso, Então, se tudo correu bem, você deveria ver algo assim. Outra forma de instalar o PTN e a forma mais comum e recomendada de instalar a linguagem PyTon é através do site oficial e depois baixa Então, simplesmente aqui, você tem downloads, não se preocupe, vou deixar todos esses links nos recursos. Você acabou de encontrar a versão de que precisa. Portanto, nesse caso, se você pressionar esse botão, ele descarregará a versão mais recente do seu sistema operacional Será apenas um pacote para instalar. Você o baixará, instalará e o PTN e o pacote farão tudo por você A terceira maneira de instalar o PTN é por meio do BM, então o PM nos permite instalar versões específicas do PTN, e também o instalamos por meio do Brew, então podemos simplesmente dizer então podemos simplesmente Instale o Pi M. Então, basta clicar nele. Depois de instalado, podemos verificar a lista de instalação do PyM Se clicarmos, ele nos dará a lista de pytes e versões disponíveis para instalação, então basta pressionar Enter E, como você pode ver, temos muitas versões do Python para instalar Mas de qualquer forma, você sempre escolhe o mais recente . Nós o instalamos. E depois de instalarmos o Python, podemos simplesmente limpar meu terminal Podemos ver o Python que instalamos e, se tudo correr bem, você deve ser capaz de digitar o Python três porque o Python três é o mais recente e é o que vamos E nós apenas fazemos a tag Version e vemos a que instalamos . Então pressione Enter. E como você pode ver, atualmente, no meu sistema, tenho o Python 3.12 Portanto, devemos ter algo em torno dessa versão também. E com isso, vemos que tudo correu bem e nosso sistema tem o PyTon instalado 10. 10. Instale o Python no Windows: Agora, prosseguiremos com a instalação do BTN na máquina Windows Se ele estiver em nossa máquina Windows, você pode pular esta palestra e ir para parte do MacBook, onde instalaremos o De qualquer forma, se você tiver uma máquina Windows e fizer esse curso pelo Windows, poderá continuar com este vídeo. Portanto, a forma mais recomendada de instalar o PyTon na máquina Windows é por meio do site oficial Vou deixar o link direto para o site nos recursos. Então, basicamente, você só precisa acessar o site da PyTon, baixar partes E aqui você terá a versão correta para sua máquina. Basta pressionar o botão de download, baixar o pacote e prosseguir com a instalação. Então, após os downloads, você clica no ícone que baixa e verá uma janela como esta. É importante observar que precisamos marcar essa caixa de seleção aqui, então solicitaremos que o PTN seja aprovado e, depois que isso for marcado, basta instalar agora Também aqui, podemos desativar o limite de comprimento do caminho porque alguns sistemas não permitem muitos caracteres no limite, mas isso pode causar problemas em nosso sistema, então podemos simplesmente desativá-lo E então temos uma configuração bem-sucedida. Depois da instalação, podemos abrir nosso prompt de comando para verificar a versão, basta fazer Python e depois o sinalizador Version Como podemos ver, instalamos o PTN com sucesso em nossa máquina Windows Outra maneira de instalar o PyTon é abrir nossa loja da Microsoft e, na guerra de pesquisa, apenas fazemos o PyTon e, em seguida, podemos ver PyTon três e temos todas essas versões do Python da versão mais recente estável, e então pressionamos G e ele instalará o Observe que essa é a maneira mais fácil de instalar o PTN, mas menos personalizável 11. 11. Como instalar e rodar a FastAPI: Então, agora vamos criar nosso servidor de API rápido. A primeira coisa que faremos é criar uma nova pasta onde manteremos nossos aplicativos. Então, eu posso simplesmente criar uma nova pasta aqui. Você pode criar suas pastas da maneira que quiser. Não importa e o que você quiser, também não importa. E agora vou chamá-lo de meu aplicativo de aprendizado. Então, agora que você tem nossa pasta, podemos abrir nossa pasta e, novamente, criar uma nova pasta onde a chamamos de servidor. E criamos nossas pastas. Então, novamente, precisamos abrir isso com o código do Visual Studio. Se você tiver seu código do Visual Studio na postagem, basta abri-lo assim. Caso contrário, abriremos através do terminal. Então, vamos abrir um terminal. Agora eu tenho meu terminal e vou navegar até minha área de trabalho. E no meu desktop, tenho minha pasta chamada meu aplicativo de aprendizado. E dentro dessa pasta, eu tenho, novamente, outra pasta chamada servidor. Agora eu posso abri-lo com o código do Visual Studio com esse código simples, espaço e, em seguida, ponto. E então temos nosso código do Visual Studio e estamos dentro da pasta correta aqui. Se por algum motivo o comando cos dot não abrir seu Visual Studio, podemos corrigir isso com muita facilidade. Portanto, abra seu código do Visual Studio de qualquer outra forma. Então, basta clicar no aplicativo que você o tem no seu sistema e, em seguida, ele abrirá, e então você poderá ver aqui o comando. Então, em seguida, você pode ver o comando. Portanto, em Macs, o comando Shift e B no Windows devem ser Control, Shift B. Então, por favor, abra-o e você poderá pesquisar por Shell Comande, e aí você já pode ver. Portanto, instale o código no caminho do comando. Então, basta clicar aqui e talvez você precise reiniciar seu terminal, e então teremos esse comando disponível para você. Então, agora dentro do nosso servidor aqui, criaremos um arquivo, e nosso arquivo será denominado main dot pi ou PY four PyTon Então, dentro do nosso ponto principal pi, adicionaremos a primeira rota para a FastAPI Chamaremos os primeiros pacotes necessários para a API FAST, então podemos dizer que, a partir da API FAST, importamos o pacote de API rápida. Então temos que usá-la e, em seguida, iniciá-la na constante, então a API rápida e as chaves serão ativadas porque é uma classe Ok, então agora teremos a primeira rota. Portanto, nossa primeira rota será uma rota de obtenção, por exemplo, e uma demonstração da API rápida. Então, vamos dizer adicionar. Como estamos chamando uma classe FastAPI e, em seguida, dizemos G e, em seguida, G, temos nossas rotas ou rota raiz que será apenas uma barra E então, dentro de nossos métodos get, teremos a função de sincronização. Portanto, um coletor é uma função síncrona que será executada de qualquer maneira sem esperar pelo resto do código E então Df é o que chamamos de função em Python e dizemos deroot Então, o nome da nossa função, chaves abertas e, em seguida, ponto e vírgula, e então temos o retorno e retornaremos apenas uma Portanto, a mensagem estará apenas dentro das aspas e, em seguida, retornaremos ao mundo inferior. Então, o que é importante aqui em Byton, sempre precisamos dessa identificação para que o código seja executado Se fizermos assim, isso causará um erro porque esse bloco identificado é realmente necessário Agora, para que nosso aplicativo seja executado, precisamos criar um ambiente virtual. O ambiente virtual nos permite executar o Python dentro de um ambiente fechado E para isso, só precisamos entrar novamente em nosso projeto. Eu posso simplesmente abrir um terminal dentro do código do sal Studio. Então, aqui e depois eu direi apenas Pyton ou Python três. VM para ambiente virtual e, em seguida, dot VM E por que criamos um ambiente virtual? Portanto, no ambiente virtual, o The nos permite executar versões do PyTon e até mesmo nossos pacotes sem sermos influenciados pelo sistema externo Então, criamos apenas uma espécie de encapsulamento, ou seja, ambiente para executar essa versão do PyTon sem mexer ou entrar em conflito com Então, aqui vou pressionar Enter. E aí você pode ver que cria duas pastas. Então, o cache armazena em cache os códigos Python e o ambiente virtual, onde temos o aplicativo em execução e, no futuro, os pacotes Mas ainda precisamos executar nosso ambiente virtual. Então, para executá-lo, podemos apenas dizer source dot VM BMF Mac. Se você estiver em um Mac, é BM se estiver no Windows, são scripts Então, como temos uma pasta BM, você pode conferir aqui. Diremos Bin e, em seguida, ativaremos o ambiente virtual. Então, basta pressionar Enter. E, como você pode ver, agora estamos rodando dentro do ambiente virtual. Portanto, esse ambiente virtual rodará sempre a mesma versão do Python lá e o pacote instalado sem a necessidade alteração sempre que você mudar em nosso sistema, que é suficiente para o que você quer fazer Então, agora podemos finalmente executar nosso aplicativo. Então, nesse caso, dizemos apenas API rápida, dev e, em seguida, o arquivo que queremos executar. Então, queremos executar o ponto principal PI, apenas o ponto principal py. Então, PY para Python e, em seguida, basta pressionar Enter e o aplicativo está Então, aqui, você pode navegar até essa rota, e é isso que nossa rota retorna. Então, a barra neste caso. Então, se você notar, aqui também temos esses documentos de API. Portanto, a API FAST será criada como um documento imediatamente, e podemos verificar todas as nossas rotas e testar nossas rotas, bem como a documentação, basta acessar este URL Então, novamente, se eu for para o mesmo e depois para um Doc, teremos uma FastAPI arrogante com Por enquanto, só temos a raiz, mas no final, mais adiante no percurso, teremos mais rotas aqui. Então, aqui nas docas, você pode ver, você pode experimentar a rota Então, se eu apenas executar, teremos os ensaios que definimos aqui 12. 12. Outra rota de exemplo: Podemos procurar uma rota mais complexa que possamos usar em nosso aplicativo. Então, primeiro de tudo, vou colar aqui apenas um objeto simples. Então, neste objeto, você pode ver que temos três itens com nome e descrição. Portanto, esse será nosso tipo de assistente de itens, na descrição, para que possamos navegar até uma página contendo essas informações. Vou deixar esse objeto nos recursos para que você possa simplesmente copiá-lo e colá-lo em seu projeto para não precisar digitar tudo isso. Então, agora, a primeira coisa que precisamos fazer é criar outro Grow, como fizemos antes, faremos apenas no aplicativo. Então, novamente, nosso aplicativo Fast API, e então dizemos G e depois abrimos chaves, e queremos que nossa rota seja nomeada como itens Em seguida, corte e , para cada item, teremos o item Então, passaremos um argumento para obter cada um desses itens. Então, novamente, precisamos definir nossa função e essa função, podemos chamá-la get item e, em seguida, passaremos nosso ID Im que será, neste caso, inteiro Então, aqui estamos apenas assumindo o tipo. Sempre somos um número inteiro. Depois fechamos aqui, então podemos criar uma variável chamada item, que seriam os itens. Portanto, nosso objeto obtém e receberá o ID ITNS. Então, passaremos esse ID Ian em nossa função e, em seguida, obteremos exatamente o mesmo número inteiro do nosso objeto E então fazemos um pouco de tratamento de erros. Portanto, se o ITN não for, se não existirmos, podemos simplesmente retornar um erro simples E então dizemos que o ITN não foi encontrado. E o conjunto será o erro 04. Portanto, 404 geralmente é o erro não encontrado no desenvolvimento do aplicativo Mas se tudo correr conforme o esperado, apenas devolveremos o item. Então, vamos devolver o item correto. Agora podemos salvar e voltar ao nosso navegador. E aqui, como vemos, temos nossa primeira rota que criamos e, em seguida, precisamos navegar por dois itens. E se pressionarmos Íons, não será encontrado porque precisamos definir o número inteiro como vimos em nossa função Então, novamente, outra barra, vamos pegar o item número dois, e não é divertido porque esqueci de adicionar uma fatia aqui Portanto, deve ser a barra raiz inS e depois o item 80. Então, se você voltar ao nosso navegador, só precisamos atualizar isso e aqui está Então, novamente, nosso item dois da nossa lista. Podemos ver os outros dois. Então, o item um, o item um está correto e, em seguida, o item três. Então, cohospede 800 e depois corte o DGS. Temos, novamente, nosso PI Swagger mais rápido, e aqui temos uma nova rota Então, podemos simplesmente abri-lo aqui. Temos nossos parâmetros de que nossa rota usa apenas o ID do item e, em seguida, o ID do item será um, dois ou três, conforme configuramos anteriormente, e podemos experimentá-lo. A caixa se abrirá para testarmos, e podemos dizer novamente o item dois. E se dissermos executar, obtemos itens para nossa rota e, em seguida, o item correto. Então, vamos tentar novamente. Então, esclareça e diga o item um, execute, e eu sou um, o correto. Agora, se definirmos o item quatro, como testamos em nosso rousa antes, podemos simplesmente executar novamente e receberemos a mensagem de erro 13. 13. Aplicação de corrida com o Uvicorn: Agora vamos instalar o UVcorn em nosso aplicativo. UVcorn é ASGI, portanto, uma interface síncrona de gateway de servidor projetada para ser muito rápida para colocar aplicativos para atendê-los aplicativos para Mas agora você me pergunta, por que precisamos disso? Já temos nosso servidor funcionando com uma API normal e rápida. Bem, então o UVcorn nos ofereceu mais benefícios por causa da velocidade A API rápida é construída com base nos padrões ASGI, e o UVcorn oferece suporte total aos padrões, garantindo Além disso, o UVcorn tem um suporte síncrono. O Python tem recursos síncronos que permitem tratamento eficiente e solicitações O UVcorn também está pronto para produção e pode lidar com cargas eletrônicas, tornando-o adequado tanto para desenvolvimento quanto para tanto para desenvolvimento quanto Também nos permite definir facilmente as configurações de UVCornn. Portanto, os benefícios dos aplicativos web com o UVcorn são a melhoria dos tempos de resposta, escalabilidade e o fato de estar preparado para ser usado com o Python moderno Agora, para instalar o UvCorn em nosso aplicativo, basta voltar aos códigos físicos do Studio Podemos parar nosso servidor com o controle C, paramos nosso servidor, e então eu posso limpar nosso servidor para que vocês possam vê-lo melhor. E então podemos simplesmente dizer PIP. Portanto, o PIP é o gerenciador de pacotes do PyTon, instalamos nossos pacotes no PyTon e instalamos o Agora, basta pressionar Enter e deixar o pacote ser instalado. Então, finalmente, quando instalamos nosso UVcorn, podemos executar o aplicativo com Portanto, neste caso, dizemos apenas coluna principal do UVcorn, depois para cima e , em seguida, recarregamos Portanto, esse sinalizador de recarga permitirá que o aplicativo seja recarregado sempre que ocorrerem algumas alterações Também podemos adicionar mais opções ao UVcord. Então, digamos que queremos colocá-lo em uma porta diferente. Então, dizemos apenas o aplicativo principal do UVcorn e, em seguida, podemos dizer porta Então, atualmente, estamos executando a porta 8.000 e podemos dizer 80, 80, e então nosso aplicativo será executado nessa porta Mas, por enquanto, vamos executá-lo normalmente com um sinalizador de recargas. OK. Ok, agora, nosso aplicativo está sendo executado com o UVcorn. Vamos ver isso em um navegador. E temos nossos documentos e nosso aplicativo normal em execução. E vamos tentar In's dot one. E parece que tudo correu bem, e agora temos nosso aplicativo rodando com o UVcorn 14. 14. Como instalar pacotes com requisitos: Na palestra anterior, vimos o pacote Twinstyle usando PIP Portanto, use pacotes BIP Twinstyle e Byton. Mas imagine o seguinte. Imagine que temos uma grande equipe e toda a equipe deve usar os mesmos pacotes sem ser instalada manualmente um por um. Além disso, as mesmas versões são preferidas, para que o aplicativo seja executado da mesma forma para todos. Então, como podemos fazer isso? Portanto, na API FAST, podemos adicionar o texto dos requisitos e, em seguida, o aplicativo instalará todos os requisitos por meio desse arquivo. Então, aqui, na nossa barra lateral, criamos um novo arquivo e o chamamos de texto de requisitos. Então, nós o salvamos e, em seguida, temos um arquivo de texto. E para isso, podemos adicionar os pacotes aqui. Digamos, por exemplo, nossa API rápida e, em seguida, a versão do pacote. Então, neste caso, temos 0,1 15 e zero. Não se preocupe Vou deixar esse arquivo nos recursos. E, por favor, a forma preferida é copiar o conteúdo desse arquivo e colá-lo aqui, pois as versões podem ser diferentes para você no momento em que você está assistindo a este curso. E assim, garantimos que você execute o aplicativo exatamente como eu. Então, aqui temos o número da versão, mas digamos que queremos usar a versão mais recente. Nesse caso, precisamos apenas tê-la como uma API rápida e, em seguida, as pessoas obtêm o pacote mais recente. Então, agora vamos usar as versões atuais. Então, eu direi que o FAST NPI é zero ponto 115 ponto zero. Em seguida, também usaremos o fluxo tensor que é a versão 2.16 dot one Você pode pular essa parte e simplesmente copiar os arquivos que mencionamos anteriormente Também precisamos de um NPi de 1,26 ponto quatro. Também usaremos o CV aberto Piton 410, ponto zero, ponto 84 E então a versão do UVcorn que instalamos antes. Mas, novamente, zero ponto 30 ponto seis, e então salvamos o arquivo. Então, agora, como instalamos tudo de uma vez? Então, novamente, em nosso terminal, simplesmente paramos o servidor com o Control C e, em seguida, podemos simplesmente dizer PP Install air four requirements e, em seguida, nossos requisitos pontuam o texto. Agora, se pressionarmos Enter, ele instalará todos os pacotes. Então, vamos pressionar Enter. E então você tem. Então, todos os pacotes são instalados, e então podemos simplesmente executar, novamente, o UVIcorn main up e depois Então, como você pode ver, tudo correu bem e agora todos os nossos pacotes estão instalados 15. 15. O que é React e TypeScript: Imagine que você está construindo sua casa. Você quer que seja robusto, eficiente e fácil de modificar se precisar adicionar uma sala ou alterar um layout No mundo do desenvolvimento web, react e o typescript são como as ferramentas avançadas e o conjunto de plantas que ajudam você a construir Então, vamos começar com react. Pense no react como um mestre carpinteiro especializado na criação de componentes reutilizáveis Em vez de construir sua sala do zero todas as vezes, react permite que você crie peças modulares, como paredes pré-construídas, janelas ou até salas inteiras. Que você pode usar repetidamente. Isso não apenas economiza tempo, mas também garante consistência em toda a sua casa ou em seus aplicativos da web. O React torna seu site interativo e dinâmico. É como ter uma casa em que as luzes se acendem automaticamente quando você entra no quarto ou a temperatura se ajusta sozinha Em um aplicativo de reação, quando você clica em um botão ou insere algum texto, a página pode ser atualizada instantaneamente sem precisar ser totalmente recarregada Isso cria uma experiência de aplicativo tranquila para os usuários. Agora vamos falar sobre texto datilografado. Se o React é nosso mestre carpinteiro, datilografado é como ter um assistente super inteligente que verifica tudo antes de ser construído TypeScript é uma linguagem de programação baseada em Javascript, adicionando uma camada extra de segurança e clareza ao seu código Imagine que você está tentando encaixar um pino quadrado em um orifício redondo. Simplesmente não funciona, certo? datilografado evita esses tipos de erros em seu código antes que eles aconteçam É como ter um cara que garante que você está usando o tipo certo de material para cada parte da sua casa. Se você acidentalmente tentou usar uma janela onde deveria estar uma porta, datilografado o informará antes mesmo de começar a construir Isso pode parecer complicado, mas na verdade facilita sua vida a longo prazo. Com o texto datilografado, você detecta erros mais cedo, seu curso se torna mais autoexplicativo e o trabalho em equipe fica mais fácil, pois todos podem entender o Quando combinado com o texto datilografado de reação, você obtém o melhor dos dois mundos Você tem o poder de criar aplicativos web interativos dinâmicos com componentes reutilizáveis além de ter a rede de segurança que detecta possíveis erros e torna seu código À medida que os estudantes estão mergulhando no desenvolvimento web, pense em aprender a reagir e digitar como ganhar superpoderes React oferece a capacidade de criar interfaces de usuário flexíveis e eficientes. Wild TypeScript fornece visão de raio-X para detectar e evitar problemas antes que eles Juntos, eles mantêm você com as ferramentas para criar aplicativos web modernos e confiáveis que podem resistir ao teste do tempo e escalar o crescimento de seus projetos. Portanto, neste curso, usaremos tanto o react quanto o typescript para criar nosso aplicativo de front-end 16. 16. Como instalar Nodejs: Então, agora vamos instalar o Nojs. Mas o que não é JS? Portanto, o NoJS é uma plataforma fechada de código aberto que permite que ambientes de tempo de execução de JavaScript sejam usados e executados por desenvolvedores Então, instalar no Js é muito fácil, basta acessar tonjs.org, e ele aparecerá no botão descendente para E isso já tem a versão do seu sistema. Portanto, se você estiver executando o ambiente Windows, os downloads serão para o sistema Windows. Se você estiver executando um MAC , também será para macOS Então, basta fazer o download, verificar se está usando o LTS e, para nosso projeto aqui, usaremos sempre a versão maior que 20 Então, no momento deste curso, tudo deve estar bem. Então, basta baixar nenhum Js para onde for melhor para você e apenas executar o arquivo e instalar nenhum Js. Depois de concluir a instalação do NGS, você pode abrir um terminal para verificar a instalação Talvez seja necessário reiniciar o sistema, mas isso raramente acontece. Portanto, em nosso terminal, podemos verificar a versão do NGS simplesmente escrevendo uma nota Versão do Dash Dash e aqui você pode ver que estou executando a versão mais recente, mas como recursos avançados, nós realmente não precisamos dela, você a usa aqui ou não precisa dela Então, neste caso, você pode simplesmente usar o 20, o LTS que é comum e melhor para o usuário comum Então, vamos verificar sua versão. Você também pode verificar sua versão usando o atalho, então não V. Mesma coisa Então você pode ver sua versão do no Js aqui. 17. 17. Crie o primeiro aplicativo React com o Vite: Então, agora podemos começar a criar nosso front-end. E para criar nosso front-end, vamos usar o VT. Portanto, T é uma ferramenta que nos permite criar facilmente aplicativos com react, view e assim por diante. Até mesmo aplicativos JavaScript básicos. Sua estrutura nos permite uma rápida estruturação dos aplicativos e também uma rápida construção e Então, para criar um aplicativo, voltamos ao nosso terminal em nosso terminal, estamos na pasta do nosso servidor. Então, vamos um nível abaixo, então cd dot dot. E então estamos na pasta do nosso projeto, e então podemos simplesmente fazer o NPM, criá-lo e, em seguida , dizer o mais tardar para que possamos instalar a versão mais recente Então, basta pressionar Enter e, em seguida, dizemos sim. O nome do projeto, vamos chamá-lo de reconhecimento de objeto, o nome do Packers pode permanecer o mesmo E então temos todas as opções com as quais podemos criar nosso aplicativo. Então, neste caso, você só vai escolher o react, usar as teclas de seta para navegar, reagir, e então vamos usar o texto datilografado também, e nosso aplicativo é instalado Agora podemos navegar até a pasta do aplicativo. Então, veja o aplicativo de reconhecimento de objetos. Digite e, em seguida, vamos abri-lo com nosso código do Visual Studio, então codifique e, em seguida, pontue. E agora que abrimos nosso aplicativo com o código do Visual Studio, precisamos instalar nossos pacotes. Então, agora vamos abrir nosso terminal dentro do nosso código do Visual Studio. E se por algum motivo não aparecer a opção de abrir o terminal em suas configurações, basta dizer Shift Control P no Windows ou Command, Shift P no Mac. E então você tem uma lista suspensa e pode simplesmente escrever Toggle. Terminal. E aqui temos a opção de abrir o terminal, basta pressionar Enter e o novo terminal aparecerá para você. E estamos dentro da pasta do nosso projeto. Podemos simplesmente dizer NPM install para instalar o pacote ou NPMI Então, vamos instalar o pacote e deixá-lo rodar. Então, agora os pacotes estão instalados. Podemos executar nosso aplicativo. E neste caso do WVD, basta executar o NPM como surdo para executar o modo de desenvolvimento, como podemos Em nosso pacote Jason, como executar o aplicativo no modo de morte, como criar nosso aplicativo, executar o principal e até mesmo visualizar o modo Has Build Então, vamos fechar isso e executar o NPM run Def. Depois de criado, você vê que tem nosso local como onde o aplicativo está sendo executado. Então, vamos copiar isso e ir para o nosso navegador, e então vemos que temos nosso aplicativo VID e react em execução. 18. 18. Componente e estilo de controle de imagem: Agora, para o front-end principal, podemos voltar ao custo do Visual Studio e, dentro de nossa fonte, temos esse aplicativo dot TSX, que é nosso ponto de entrada, e não precisaremos de algumas coisas aqui Vou apenas fechar ou colocar termostato no chão e não precisamos dessa gravata. E podemos excluir tudo dentro da nossa devolução. Além disso, como você vê, esses pacotes não são usados, então também podemos excluí-los. E, por enquanto, deixamos assim. Então, B aqui, vamos criar uma nova pasta, então o ícone aqui, e nós a chamamos de componentes dentro de nossos componentes porque nosso aplicativo é muito simples. No front-end, podemos simplesmente criar um componente e depois criar um novo arquivo e o chamamos controle de imagem dot tsx para o texto datilografado E como também precisamos de CSS, podemos criar um novo arquivo e chamá-lo apenas de CSS de ponto índice. Então, agora, voltando ao nosso componente, o controle de imagem TSX, precisaremos criar nosso modelo Então, para isso, primeiro importaremos nosso arquivo CSS, então dizemos importar. Indexamos CSS e, em seguida, criamos nossos componentes, então digamos custo. E nosso componente será apenas controle de imagem. E como componente funcional, criamos a função R para ela e depois retornamos algo interno, que por enquanto pode ser apenas uma div Então, como nosso controle de imagem ainda não foi usado, precisamos exportá-lo para ser usado no uPTTSx Digamos que exporte o controle de imagem padrão. Vou guardá-lo. E então, em nosso PTSx em nosso retorno, podemos usar o componente para criar, digamos Controle. E como você pode ver aqui, meu Visual Studio já diz para importar controle de imagem para componentes, controle de imagem. E então, como você pode ver, você acabou de importar o controle de imagem da nossa pasta de componentes e do nosso componente. Em seguida, as chamadas e o aplicativo dot TSX estão prontos por enquanto. E podemos voltar ao nosso componente principal, porque se você voltar para o navegador, verá que está vazio porque ainda não estamos renderizando nada Então, repetidamente, como é um aplicativo simples, vou colar um pouco de CSS para nosso aplicativo. Vou deixar esse arquivo CSS nos recursos para que possamos simplesmente copiá-lo e colá-lo aqui. Então, apenas CSS padrão para nossos contêineres e nosso contêiner de imagens. Vou apenas salvá-lo e, em seguida, teremos acesso a essas classes dentro do nosso componente. E primeiro, criaremos nossos contêineres para que possamos começar a ver algo no aplicativo. Então, usamos esse DIF e, como vamos usar mais de um contêiner e mais de um DV aqui no modelo, precisamos de um Então, abra os branquetes e eu posso simplesmente recortar isso e copiá-lo aqui, e esse div terá o nome da classe do contêiner Então, do nosso arquivo CSS, temos essa classe de contêiner. Em seguida, continuando com essa div, teremos outra div que é nosso contêiner interno Portanto, o nome da nossa classe será contêiner interno. Por enquanto, podemos simplesmente salvá-lo. Eu tenho um erro de digitação aqui, então é contêiner. Caso contrário, a aula não funcionará. Então, aqui eu posso simplesmente colocar uma simples Ptag para ver nosso aplicativo em execução De volta ao nosso navegador, vemos que já está em execução aqui aparecendo na tela do nosso aplicativo, o que significa que tudo está correto. 19. 19. Como definir nossas variáveis de estado: Então, primeiro de tudo, precisamos definir nossas variáveis de estado para que possamos usá-las dentro de nossa lógica dentro de nosso componente. Então, precisaremos da primeira variável de estado da imagem, então ela diz custo, imagem e depois diz definir imagem. E essa imagem será uma string. Então, vindo do nosso back-end, nós apenas usamos string para imagem e dizemos use state e depois abrimos colchetes Agora precisamos importar o estado de uso para que possamos usá-lo. Então, deixamos o índice de importação ESS inativo e, no topo, dizemos importar, usar o estado, e isso vem do react. Agora podemos salvar e precisamos definir o tipo da nossa imagem. Então, por enquanto, não temos nenhum tipo para nossa imagem, nada quando o componente é iniciado. Então, queremos que essa imagem seja string como um tipo Or null porque no começo não temos imagem, então ela pode ser nula e definimos o estado inicial como nulo Também precisamos ter uma variável de estado para armazenar o arquivo que vamos enviar para o front-end e depois para o back-end para que possamos obter a previsão e os resultados Então, novamente, custo e temos o arquivo seletivo, e dizemos conjunto selecionado Arquivo. E, novamente, use o estado. E nesse caso, precisaremos de um tipo especial que seja arquivo que contenha todas as propriedades do arquivo. E também queremos que seja nulo ou nulo. Em seguida, exclua isso que não precisamos e, em seguida, fechamos os colchetes e definimos o estado inicial como nulo, porque no início não temos nenhum arquivo selecionado E agora, para continuar em nosso front-end, também precisamos definir mais três variáveis que serão alteradas posteriormente. De qualquer forma, vamos configurá-lo agora para que você possa ver como funciona. Então, nesse caso, precisaremos de uma previsão. Mas, nesse caso, não precisamos ser variáveis de estado. Podemos simplesmente definir uma previsão normal de const say. Isso é uma matriz e definimos como matriz vazia. Também precisamos de um carregamento rápido. Então, quando nosso aplicativo está carregando, e essa caixa é uma barra de ouro, definimos o verdadeiro como falso E o último será um erro. Então, digamos erro de custo, também booleano, ou seja falso, e então também o definimos como falso Então, essas três variáveis irão posteriormente para nosso gancho, onde veremos as solicitações e serão definidas no modelo. Mas, por enquanto, vamos configurá-lo assim para que possa ser usado em nosso modelo. 20. 20. Modelo de caixas de previsão e imagem: Continue agora criando nosso front-end básico onde temos o botão para aplaudir a imagem, uma caixa na qual a imagem será renderizada E também o número de previsão, vamos simplesmente deletar esse P aqui, e então dizemos abrir colchetes e dizer se não temos imagem Portanto, se a imagem for nula ou indefinida ou estiver vazia, dizemos apenas E N, digamos, abra um B, e você diz, por favor, aplauda sua imagem Então, vamos salvá-lo e ver o que acontece no front-end. E temos uma mensagem dizendo: Por favor, faça o upload da sua imagem. Até agora tudo bem. Continue aqui. Mas se temos uma imagem, viemos aqui repetidamente, colchetes e dizemos que a imagem existe, então abrimos agora as chaves e um DIV e esse Dv adorou o nome de classe contêiner de imagem do E então abrimos a tag de imagem que é a fonte da nossa variável de imagem. Então aqui você pode ver que já aparece destacado. Então isso significa que está em uso. Em, podemos simplesmente dizer algo como aplausos e o nome da classe será a imagem, nossa classe CSS, e depois fechar a tag E acabamos de salvar que nada aparecerá no front-end porque ainda não temos imagem. Então, continuando dentro do mesmo contêiner, teremos nossa pervição Então, dizemos, novamente, Curlbra diz que, se a previsão existir, pegaremos o primeiro item da nossa matriz e você verá o porquê mais tarde, mas é por isso que a definimos como uma Curlbra diz que, se a previsão existir, pegaremos o primeiro item da nossa matriz e você verá o porquê mais tarde, mas é por isso que a definimos como uma matriz. Nesse caso, está vazio. E, novamente, abrimos ases e abrimos uma div div com o nome de classe da caixa de previsão Portanto, nossa caixa de previsão conterá as informações provenientes da própria produção. Feche a Div e, por dentro, temos um PTA com o nome da classe de texto da categoria que volta e o texto da categoria terá o texto proveniente da previsão, que neste caso, abrimos novamente, as chaves curvas, e isso virá Portanto, ele será renderizado em nosso back-end em nossa solicitação. E temos a previsão do zero, isso ainda é um erro porque ainda não temos um tipo definido, mas está tudo bem. Categoria de previsão, e queremos tudo em letras maiúsculas. Então, diga duas letras maiúsculas. E para que N esses erros desapareçam em seu aplicativo, podemos simplesmente voltar ao nosso conjunto constante. Queremos uma variedade de qualquer. Portanto, qualquer tipo será usado aqui. Esse é um erro com o horário de verão B com uma lentina que não permite nenhum tipo, mas isso será alterado posteriormente Não importa para null. E assim, não temos nenhum erro aqui. Mas, continuando o ano, novamente, abrimos outro PTA que terá o nome da classe de precisão da categoria Então, será a precisão da previsão. Isso é atacado com a imagem, depois fechamos e depois abaixamos novamente, diremos Clibrass, colchetes abertos novamente e dizemos previsão Novamente, a partir de zero do primeiro elemento da nossa matriz, queremos uma pontuação. Vezes um e porque queremos criar como um número percentual, e então dizemos dois fixos um. Então, porque virá um número grande e queremos transformá-lo em um valor percentual. Então, fora das caribras, dizemos porcentagem, porcentagem, precisão Mas isso será mostrado mais tarde como funciona exatamente. Agora você está se perguntando o que está acontecendo em nosso front-end. Então, vamos ver. Então, ainda nada porque não temos nenhuma imagem para mostrar. Agora estou vendo que o contêiner está um pouco para a direita, e isso ocorre porque definimos a largura para que possamos voltar. E em nosso índice CSS, simplesmente excluímos o w e o salvamos. E agora está exatamente no meio. Então, voltando ao nosso controle de imagem, precisamos configurar o contêiner para o erro. Então, depois dessa divisão, que é nossa previsão e os colchetes também para nossa previsão, damos algum espaço aqui e dizemos erro, novamente, colchetes e depois erro, P, e então essas pessoas terão um E depois a fechamos e, em seguida, lá dentro, adoramos o erro que vem da nossa solicitação Por enquanto, é simplesmente falso. Não deveria ser falso, mas deveria ser uma string em vez disso, e você diz, string, diremos que não há erro. Apenas coma um pouco aqui. Depois disso, teremos nossa opinião para fazer o upload da imagem. 21. 21. Entrada de upload de imagem: Agora, vamos dar nossa opinião, onde carregaremos a imagem diretamente do nosso sistema para o aplicativo. Após o erro aqui, abriremos a tag de entrada, então insira. E o tipo dessa entrada será um arquivo porque faremos o upload de um arquivo do sistema. Então, neste caso, arquivo de imagem, e dizemos que na mudança, terá o evento de mudança de nossa entrada. Mas agora, neste caso, acabamos de definir uma função vazia, para que não tenhamos erros. E então dizemos aceitar a imagem. Imagens, neste caso, queremos todos os tipos de imagem agora. Então, basta colocar uma estrela e todos os tipos de imagem serão aceitos. E então fechamos a tag de entrada. Logo abaixo, queremos um botão onde prosseguiremos com a inserção da imagem Então, botão e dizemos onClick. E, novamente, como ainda não temos a função para o clique, criaremos uma função vazia e, digamos que a desativemos , esse botão será desativado quando não tivermos um arquivo selecionado. Ou se estiver carregando. Portanto, se não tivermos nenhum arquivo da solicitação que o aplicativo está carregando, o botão será desativado. E então fechamos o botão e, dentro do botão, temos o texto de que precisamos, e o texto mudará dependendo do estado do aplicativo e do aplauso da imagem Então, novamente, dizemos que, se estiver carregando, diremos aplaudindo Se não for uma roupa e tivermos uma imagem, queremos que o botão diga que identificando ou identifique a imagem para que possamos ter a previsão. Mas se não, queremos que o botão diga uma plosimagem e as funções serão diferentes Então, agora, se salvarmos e acessarmos nosso navegador, já dizemos aqui que temos algo acontecendo na tela. Então, aqui temos o botão para escolher o arquivo. Então, nossa entrada E se você clicar, abre uma janela onde podemos verificar nossas imagens e o botão Blosimage é desativado porque não temos nenhuma Nenhum erro aqui está aparecendo porque o definimos como um erro de ouro que existe e, no nosso caso, ele realmente existe Mas se você colocar, digamos, null dá um erro porque precisa ser string ou null ele não aparecerá 22. 22. Explicando o conjunto de dados Tensorflow SSDMobileNetV2 e COCO: Agora vamos dar uma olhada rápida nos pacotes ou nos modelos de aprendizado que vamos usar no front-end. Então, primeiro de tudo, tensor flow é desenvolvido pelo Google e é uma poderosa biblioteca de software de código aberto para aprendizado de máquina e inteligência artificial É a base que permite que os computadores aprendam com os dados e tomem decisões. Engenheiros e pesquisadores usam o fluxo tensor para criar e treinar redes neurais para tarefas como reconhecimento de imagens, processamento de linguagem natural e, no nosso caso, detecção de objetos O sSTam de A net versão dois para usar aqui é uma arquitetura de rede neural específica projetada para detecção de objetos É uma combinação inteligente de dois conceitos. Então, SSD, detector de disparo único e Mobile Net versão dois. SSD permite que uma rede detecte vários objetos em uma imagem e em uma passagem para frente, tornando-a rápida e eficiente versão dois do Mobile Net é uma estrutura de rede leve que é otimizada para dispositivos móveis e navegadores, garantindo que o modelo possa ser executado rapidamente, mesmo em smartphones, sistemas embarcados e computadores embutidos O coco, os objetos comuns no contexto, o conjunto de dados Coco é uma grande coleção de imagens que serve como livros didáticos para treinar modelos de detecção de objetos Ele contém mais de 330.000 imagens com mais 2,5 milhões de instâncias rotuladas de objetos em Essas categorias variam de itens comuns, como carros e cachorros, a objetos mais específicos como semáforos e raquetes de tênis Quando combinados, esses três componentes criam um sistema poderoso para detecção de objetos no mundo real. TensorFlow fornece as ferramentas e o ambiente para criar e treinar o modelo SST mobile net versão dois usando o conjunto de dados Coco O resultado é um detector de objetos rápido e eficiente. Isso pode identificar e criar rapidamente vários objetos em imagens ou streams de vídeo, mesmo em dispositivos móveis Essa tecnologia tem inúmeras aplicações práticas. É usado em veículos autônomos para identificar sinais de trânsito e pedestres e sistemas de segurança para detectar objetos ou comportamentos suspeitos No varejo, para gerenciamento ambiental e até mesmo em aplicativos de realidade aumentada para reconhecer e interagir com objetos do mundo real A velocidade e a eficiência da reversão da rede móvel SSD combinadas com um treinamento abrangente conjunto de dados Coco, tornam particularmente útil para aplicações em tempo real em que a detecção rápida e precisa de objetos 23. 23. Como adicionar o conjunto de dados do modelo COCO SSD MobileNetV2: Então, agora podemos começar a adicionar o modelo de previsão e o conjunto de dados ao nosso aplicativo Então, vamos usar esse modelo de aprendizado de fluxo tensorial com um conjunto de dados Coco Então, vou deixar esse link na descrição. Você simplesmente precisa navegar até esta página do Github e, em seguida, usaremos esse modelo exato aqui Então, o SSD, rede móvel Vt Coco. Então, vamos clicar no link e, provavelmente, você receberá um aviso de segurança, mas continuará acessando o site. Então, depois de baixar o modelo, você tem um arquivo zip como este. Vamos apenas extraí-lo. E então adoramos a pasta que queremos. Basta copiar a pasta para o nosso projeto de servidor e, em seguida, para a pasta do servidor que criamos anteriormente para nosso back-end. E aqui só precisamos editar o título e remover a data de criação e deixar Coco no final. Agora podemos salvar e voltar ao nosso aplicativo. Então, temos onde temos nosso código para nosso servidor em execução, ou seja, nosso back-end. E podemos ver aqui que já temos nosso modelo integrado e agora ainda precisamos passá-lo para nosso aplicativo. 24. 24. Como carregar modelo pré-treinado no aplicativo: Então, voltando ao nosso código, primeira coisa que fazemos é excluir uma parte do código. Podemos simplesmente deixar a rota raiz apenas para testar e excluir todo o resto e depois salvar, e iremos importar o conjunto de dados que acabamos de adicionar ao nosso projeto Então, em primeiro lugar, precisamos criar o ambiente para isso. Portanto, precisaremos importar o sistema operacional para que possamos detectar nosso sistema operacional e permitir que todos os pontos sejam acessados. Então, depois disso, nós apenas fazemos o sistema operacional que importamos e, em seguida, dotenviron E aqui abriremos as chaves retas e, em seguida, definiremos nosso fluxo tensorial para habilitar tudo em maiúsculas, então habilite um D e N, ótimos Ds, e definiremos essas Então, isso é para permitir que o ambiente execute o fluxo do tensor posteriormente Então, temos que importar o fluxo do tensor também. E para isso, faremos isso aqui em cima. Então, vamos apenas dizer que import TensorFlow tem fluxo de tensor. Lembre-se disso para instalar o fluxo tensor mais cedo, adicionamos uma explicação no vídeo anterior Em seguida, importamos o fluxo do tensor. Precisamos definir as variáveis para que possamos usar esse modelo em nosso projeto. Logo após definirmos nosso ambiente, precisamos chamar nosso modelo primeiro. Então, nós apenas criamos uma variável de ambiente neste caso, com letras maiúsculas, modelamos lá. E aqui queremos chamar o modelo salvo e o tamanho de nossa pasta de rede móvel que não era casada antes Então, neste caso, nós apenas abrimos aspas e dizemos SSD, e ela estaria em letra minúscula Então, nós apenas dizemos, SS D. Mobile Net Versão 2, Coco salvou o modelo. Certifique-se de que esse caminho esteja exatamente como você escreveu aqui pois lembra que acabamos de excluir a data, mas se você deixou a data, precisará adicionar o restante aqui. Em seguida, precisamos definir o modelo do fluxo tensorial. Então, dizemos modelo e, em seguida, TF economizou as cargas do modelo. Ser uma corda, e perderemos nosso focinho lá Então, o diretório do nosso modelo. Portanto, isso garante que estamos executando o modelo de produção. Portanto, nosso modelo pré-gerado vem do fluxo tensorial e da rede móvel V dois para essa variável E então precisamos assinar o modelo a ser inferido, para que possamos fazer com que ele sirva como padrão nesse caso, e há muitas opções, mas, nesse caso, vamos fazer isso como padrão Então, basta dizer inferir nossa variável e , em seguida, modelar assinaturas de pontos e, em seguida, abrir colchetes, e dizemos servir como padrão. Então, salve-o. E agora perdemos nosso foco em variáveis em nosso aplicativo e, a seguir, veremos como vamos usá-las. 25. 25. Função de inferência: E agora estamos prontos para criar nossa primeira função, ou seja, nossa função de interferência de execução. E essa função foi projetada para realizar a detecção de objetos na imagem fornecida usando o fluxo tensor de pré-perda que adicionamos aqui Essa função se encarregará de preparar a imagem no formato correto para o modelo e , em seguida, executará a interferência e retornará os resultados. Em seguida, também devolvemos uma caixa com qual adoramos os objetos, como caixas delimitadoras, rótulos de classe e a pontuação de confiança que usaremos em nosso front-end E então essas funções servem como uma ponte entre a imagem bruta que vamos carregar e o modelo de detecção de objetos que adicionamos aqui. Então, para começar, vamos começar criando uma nova função para a função Python, usamos DF e depois a chamaremos run inference E nós pegaremos e essa função tomará uma imagem como argumento. E o tipo dessa imagem que queremos que seja NPi. E matriz D. Então, agora precisamos apenas importar o num Pi. Então, voltando às nossas importações, abrimos um novo vinho e dizemos import num Pi S&P. Então agora o erro aqui Temos o numPi, estamos dizendo tudo sobre o NumPi, até mesmo a documentação se você quiser mais informações sobre ele E essa função retornará um dicionário de string e, em seguida, faremos qualquer um por enquanto. Então, vamos querer apenas um dicionário, abrir colchetes, adicionar a string como rótulo ou nome e, em seguida, adicionar qualquer tamanho E então simplesmente fechamos a função. E agora você vê aqui, temos esses dois erros porque ambos não estão definidos, então precisamos voltar às nossas importações e importar a digitação Então, ao digitar, importaremos as digs do dicionário e do N. E aqui eu tenho um Não está digitando, mas digitando, então agora está correto e os erros aqui Então, continuando nossa função, entramos. Tenha cuidado Novamente, precisamos dessa identificação em Piton e vamos definir nossa primeira variável, o entrada que recebe um fluxo tensorial e vamos converter em tensor E isso precisará passar nossa imagem. Então, isso é basicamente a preparação ou a conversão da matriz numpy Então, essa imagem aqui, para um tensor de fluxo tensorial, é uma entrada necessária para o modelo de dados do objeto que o fluxo tensorial requer para detectar a Então, basicamente, estamos convertendo nossa matriz NumPi em tensor de fluxo tensorial, então em tensor Mesmo assim, esqueci de perguntar o erro, então insira o tensor. Em seguida, atribuiremos ao nosso tensor de entrada o nosso tensor de entrada anterior. Então, esse. E abrimos os colchetes novamente e você diz fluxo tensorial, Novo eixo E então espalhe e nossa segunda variável está pronta. E o que isso significa? Então, isso adiciona uma dimensão extra ao tensor, ou seja, à nossa bondade. Tensor criando um lote de tamanho um. Muitos modelos esperam que as entradas sejam em lotes, mesmo que seja apenas uma imagem Então, precisamos criar esses lotes para passar para a entrada do nosso modelo E então, para a variável de detecções, inferiremos o sensor de entrada que criamos Então, o que isso significa aqui? Portanto, deduza que essa inferência vem da assinatura do nosso modelo, do nosso modelo pré-carregado e pré-treinado E esse modelo funcionará sozinho e processará a imagem e retornará suas detecções. Então, depois de cuidarmos da imagem, manuseá-la adequadamente, passaremos para o nosso modelo que tratará da detecção. Então, novamente, esqueci as detecções S e B porque é mais de uma E então, basicamente, só precisamos retornar essas detecções. Então, agora estamos prontos para usar essa função na rota. 26. 26. Prever a rota: Então, agora estamos prontos para criar nossa rota para obter as previsões em nosso front-end E para isso, e porque será uma solicitação de postagem, precisamos fazer isso logo após nosso aplicativo, onde definimos nosso aplicativo de API rápido. Então, podemos simplesmente dizer “up”, partir da API rápida e depois postar. Então, será uma solicitação de postagem. E o nome que temos para nossa rota pode ser apenas previsto. Então, a rota está definida. Agora precisamos da funcionalidade por si só. Então, teremos uma função de sincronização para ser síncrona durante todo o curso e profundidade para função E então chamamos isso de prever. E o que nossa função precisa assumir, quais tipos de arquivos precisam receber. Então, precisamos de um arquivo. Então, a imagem que vamos colocar no front-end e, em seguida, qual tipo esse arquivo deve ser Então, neste caso, deve ser um blothFle que seja igual a um arquivo com um spread, pode ser qualquer coisa dentro dele, e então retornaremos ou gostaríamos de retornar na resposta JSON Então, retornaremos nossa resposta json para que possamos lidar com ela no front-end Mas, novamente, vemos alguns erros aqui, que significa que ainda não o importamos, então vamos voltar ao topo. E da nossa API FAST, também precisamos do arquivo e do arquivo de upload. Portanto, ambos vêm da importação rápida da API. E também precisamos do JCNRSponse porque é o único ano que falta que queremos retornar E para isso, simplesmente abrimos outro wine ear e dizemos que a partir da API FAST e, a partir das respostas da API FAST, queremos importar o JCNRSponse e pronto para nossas importações aqui Então, continuando com nossa função, primeiro precisamos criar uma variável para aguardar nossa resposta Então, podemos simplesmente chamar a variável de conteúdo ou conteúdos porque ela será mais de um conteúdo e, em seguida, diremos, espere, e diremos resolução de arquivo. Então, função python que resolverá nosso arquivo, então o tipo de arquivo de upload E isso permite que o arquivo seja carregado e lido de forma assíncrona Em seguida, precisamos converter os arquivos que carregamos em uma imagem, como a conversão de uma matriz Numpi e depois em uma imagem RGB Então, como fazemos isso? Primeiro, novamente, aqui embaixo, chamamos isso de imagem. Essa é minha nossa variável, e será igual à matriz Numpi, então teremos o SV dois Os dois SV são os códigos da imagem e depois dizemos o código EMD E. Portanto, o S V two é usado principalmente para carregamento de imagens ou conversão de espaço de cores e possível redimensionamento da imagem Então, aqui estamos inicializando a imagem ou convertendo a imagem, no tamanho exato ou tipo exato, tamanho e cores que queremos que sejam Então, neste caso, temos o C V dois, novamente, recebendo um erro. Precisamos importá-lo. Então, vamos voltar ao topo. E vamos dar uma nova linha aqui. Então dizemos importar da mesma forma que fazemos. E aqui precisamos limpar isso um pouco. Vamos dar as importações de juntas e as importações únicas juntas também. Então, vamos limpar isso. Para ser mais limpo e específico. mesmo aqui com o sistema operacional, e agora temos um código limpo e mais organizado. Então, voltando à nossa função, novamente, o erro desapareceu. E dentro de nossas decodificações de imagem EM, abrimos novamente outros colchetes e, novamente, partir do nosso numpi que queremos do nosso buffer, queremos converter nosso conteúdo um pi inteiro ou U inteiro oito Então, com oito caracteres. E continuando aqui, basta colocar um coma e, novamente, o SV dois, e dizemos que a imagem era colorida para que possamos obter a cor também Porque a imagem vem com cores e, em seguida, o modelo precisa das cores RGB exatas para facilitar a detecção E com isso, vamos definir novamente essas cores. Portanto, precisamos converter as cores BGR em RGB. Então, podemos definir uma nova variável aqui, então dizemos imagem RGB É isso que queremos obter. Novamente, a partir de SV dois, e você diz SVT color. Portanto, esta é uma função ou uma classe proveniente do SV two. E então passamos nossa imagem que convertemos para aqui. E então dizemos SV dois e eu digo, Cor. E porque vem como BGR, dizemos BGR para RGB Portanto, estamos nos certificando que as cores antes de enviarmos a imagem para o modelo venham como RBG Então temos o conjunto de imagens, as cores, tudo convertido e pronto para uso. Precisamos passar pela detecção. Então, acabamos de criar novas detecções de variáveis. E então aqui nós apenas chamamos a função que tínhamos antes. Então, execute uma inferência que converterá a imagem em tensor e obterá o resultado Então, execute a inferência e, em seguida, passamos nossa imagem devidamente convertida Então, imagem RGB. Em seguida, obteremos os resultados. Então, esses resultados da detecção que definimos anteriormente vêm dessa variável aqui, mas ainda precisamos formatá-la corretamente e convertê-la em um objeto para que ela possa ser enviada para o front-end Então, nesse caso, primeiro definimos o número de detecções. O número, claro, é um número inteiro, e dizemos detecções, número pop de Então, isso extrai várias detecções e, em seguida, convertemos o resultado da detecção em uma matriz de árbitros, o que faremos agora Então, novamente, detecções. Então, chamando a mesma variável, e aqui abrimos Curly Brass para objeto e cada objeto terá a chave e o Então, esse valor, abrimos colchetes e dizemos que vamos começar com zero Então, uma coluna e depois dizemos o número de detecções. Esse está aqui. Podemos fechar isso com um ponto e depois seremos árbitros E para cada chave e valor nas detecções. É. É. Então, o que aconteceu aqui? Então, aqui estamos definindo o objeto pelo qual queremos que as detecções passem por a. Então, neste caso, dizemos para, queremos definir uma chave e o valor como um número em todo o número de Portanto, para cada chave e cada valor nas detecções dessas detecções, queremos definir uma chave e um valor para ela no objeto OK. Em seguida, precisamos criar uma lista para retornar. Então, temos esses valores aqui, então uma lista com todas essas chaves que vêm das detecções, e precisamos fazer um loop para converter os resultados da detecção em uma lista E para isso, dizemos apenas quatro chaves nas detecções. Dizemos detecções. Chave é igual a detecções. Chave para listar. Depois de examinarmos as chaves em nossas detecções aqui, definimos o índice de cada chave de detecção de cada detecção na lista Em seguida, precisamos mapear as classes detectadas para rótulos legíveis por humanos que usaremos com nosso mapa de rótulos de uso Então, por enquanto, só precisamos adicionar os resultados. Tenha cuidado com a atentação e então só precisaremos, novamente, dos resultados e nossos resultados serão retornados como uma matriz Então, vamos deixá-lo vazio por enquanto e vamos adicionar mapas de rótulos. 27. 27. Label_Map: Não, precisaremos de um mapa de rótulos em nosso código para fazer as previsões ou de nosso modelo para obter um ID, e a TI terá um rótulo o nome do objeto que será renderizado no front-end E como estamos usando o SST mobile e o conjunto de dados coco, eles já nos fornecem um mapa de etiquetas com um arquivo PTN para que possamos adicionar Então, se você for aqui para este RL, vou deixá-lo nos recursos, você pode ver que já é fornecido um mapa de etiquetas com o número de identificação e, em seguida, com um nome, a etiqueta do próprio objeto Esse mapa de etiquetas específico pode ser bem grande. Posso ter centenas de milhares de rótulos, mas eu os encurto e agora podemos adicioná-los ao nosso aplicativo Assim, podemos acessar nossos códigos do Visual Studio e, aqui na pasta principal, criamos um novo arquivo e o chamamos de rótulo Mapa de pontos pi. E então vou colar o mapa do rótulo. Vou deixar esse arquivo também na descrição, então você só precisa copiar e colar, e então temos nosso mapa de etiquetas aqui. Mas, para usá-lo em nosso arquivo principal, precisamos importá-lo. Então, subimos aqui novamente e salvamos do filho da parte de importações, por exemplo, do mapa de etiquetas, importamos o mapa de etiquetas. Então, basicamente, o que estamos fazendo aqui, estamos importando esse objeto aqui para nosso aplicativo principal Portanto, não importa que nosso mapa de etiquetas seja importado para nossa pasta principal, podemos continuar com nossa rota. 28. 28. Como retornar os resultados da rota de previsão: Agora podemos continuar com nossa rota pré-vítima. Então, paramos aqui quando criamos nossa matriz de resultados. Então, logo antes da matriz de dados, vamos analisar o número de detecções. Portanto, podemos dizer quatro na faixa de número de detecção. Então, examinamos a faixa, toda a gama de nosso número de detecções que obteremos aqui Continuamos a função e dizemos que, se nossas detecções, esta obterá a pontuação de detecção porque, se você se lembrar, ocorrerão várias detecções de uma imagem, e então só queremos aproveitar a detecção de maior valor que tenha uma pontuação mais alta porque é a mais aproximada do objeto que Portanto, se a detecção obteve uma pontuação em nossa imagem de índice, queremos que, se for igual ou maior que 0,5, essa seja a que nos interessa. Então, se tivermos essa pontuação e essa detecção, diremos que o ID da classe será um número inteiro nesse caso e apenas definiremos o mesmo número do índice Então, as classes da classe de detecção terão o número do nosso índice, em nossa aparência. Então, basicamente, estamos convertendo nosso ID de classe em um número inteiro E então também podemos definir a categoria. E a categoria será, portanto, nosso mapa de etiquetas. Precisamos usar nossos rótulos do arquivo que adicionamos anteriormente. E dentro do nosso mapa de etiquetas, obteremos o ID da classe ou desconhecido. Desconhecido. Então, aqui, a categoria obterá o ID da classe da detecção que transformamos em número inteiro e corresponderemos a um desses índices Então, também precisamos da nossa caixa de detecções. Dizemos caixa e dizemos detecções. E aqui queremos obter todas as pontuações de detecção. Com um SA de cerca de 12 S aqui, então, por favor, faça as pontuações de detecção e, em seguida, queremos o índice também. E então, finalmente, podemos fazer nossos resultados. Então, vamos chamar os resultados da matriz OR e anexar esses Então, podemos verificar essa matriz e testá-la e ter nossos dados de que precisamos no front-end. Mas aqui precisamos abrir um objeto e temos a caixa. Essa será apenas a caixa que criamos antes. Também teremos a categoria. Novamente, a mesma categoria daqui e depois a pontuação. Portanto, precisamos que a pontuação seja renderizada na frente para marcar e marcar pontos. E como não tínhamos a pontuação, precisamos auditar aqui. Então, a pontuação será: eu tenho um erro aqui e agora posso ver que as caixas aqui, em vez das caixas devem ser pontuações pontuadas. E aqui abrimos uma nova, e então abrimos as detecções em caixa, abrimos colchetes novamente e dizemos Caixas. Novamente, queremos um índice. Então, agora tudo deve ficar bem com esse loop. Então, queremos ver os resultados de alguma forma. Voltamos aqui, então duas linhas atrás por causa do ditado e queremos imprimir nossos resultados Então, dizemos final e dizemos resultados para fins de teste, que possamos ver os resultados em nosso console e, em seguida, precisamos retornar os dados já formatados para nosso front-end Então, como a função deve retornar uma resposta adjacente, precisamos retorná-la também. Então, dizemos “volte”. E então Jason responde, e nosso conteúdo será o resultado Então, aqui, nossa matriz à qual adicionamos dados por meio desses métodos. Assim, podemos salvá-lo e, em seguida, podemos testá-lo em nosso console. 29. 29. Testando nossa rota: Agora podemos testar nossa rota e nosso servidor por enquanto. Acabei de baixar algumas imagens para testarmos, e as deixaremos aqui nos recursos, e temos que executar nosso aplicativo com o UVcorn Mas eu executo o aplicativo com o UVcorn e recebo esse erro Se você tiver esse erro, siga estes métodos para resolvê-lo. Portanto, você precisa instalar o PIP multip para poder fazer isso. Mas primeiro, preciso parar com isso novamente e dizer: P instale o Python Isso ocorre porque ele exige nosso formulário porque estamos usando um formulário aqui, e então podemos usar novamente o UVcorn Então, dizemos UVcorn com o cólon principal para cima e depois relos. E agora podemos verificar isso no navegador. E se formos ao nosso navegador, seguimos nossa rota para o nosso aplicativo WiRel, tínhamos e para a parte de documentos. Portanto, já podemos testar se nossa rota prevista está funcionando ou não. Então, vamos abri-lo aqui. E então, como você pode ver, é um formulário múltiplo de dados. É por isso que precisávamos executar essa instalação do PIP porque nossa rota não estava funcionando apenas por causa desse método de postagem Então, nós apenas dizemos que experimente. E aqui podemos escolher um arquivo. Portanto, escolha o arquivo de sua preferência, mas lembre-se de que ele deve estar no mapa do rótulo. Assim, você pode simplesmente usar as imagens deixadas nos recursos. Vamos apenas usar a imagem, digamos, este barco, fazemos o upload e depois dizemos executar. E agora a execução correu bem, tudo funciona bem e temos nossa resposta. Então, como você pode ver, várias caixas, mas neste caso, vamos obter o máximo que tem uma pontuação. Então, isso identificou a categoria em que a equipe usa um barco como esperávamos e com 98% de precisão Então, no front-end, vamos apenas arredondar para a porcentagem. Mas aqui temos um número decimal que é 0,98, o que significa Podemos tentar com outra imagem. Então, acabamos de reiniciá-lo, digamos que um gato, digamos, execute, e nossa previsão seja um gato. Você também pode ver os resultados aqui no seu console, no seu terminal. Então, as duas últimas que previmos são ambas: uma do gato com 99% de pontuação e a outra com 98, então as imagens são claras o suficiente para que nosso modelo as detecte. 30. 30. Use o gancho de upload de imagem: Agora que temos nosso back-end ou servidor configurado, podemos voltar ao front-end e lidar com essa conexão. Em primeiro lugar, criaremos um gancho de reação. Portanto, um hook de reação nos permite ter um trecho de código, uma função ou qualquer dado em um único arquivo que possa ser usado ou conectado ao nosso aplicativo Então, para criar isso, chegamos aqui ao nosso site onde temos nossos arquivos e vamos criar uma nova pasta, chamaremos de ganchos E então, dentro dessa pasta hook, criaremos um arquivo e o arquivo chamará use. Portanto, os ganchos de reação sempre precisam ter o prefixo use e, em seguida, dizer imagem E este é um arquivo Ts, então um arquivo datilografado Agora, dentro do react Hook, primeiro transmitiremos o que precisamos, então precisaremos do estado de uso do react. Também precisaremos do Axios Assim, o Axios enviará todas as nossas solicitações de HCTP por meio do Se você não sabe, whatxus é apenas uma solicitação XTTP para obter a data ou receber solicitações de postagem, este é um pacote útil para simplificar este é um pacote útil para Então, vamos criar um look com Export para ser usado em todo o aplicativo e const, e o chamaremos de use image up loads E no aplauso da imagem, recebemos um argumento, e esse argumento será a string ou L que enviaremos de onde quisermos E vamos chamá-lo apenas aplause WL, e o tipo é uma string Então, podemos simplesmente ter função de seta e retornar tudo aqui. Primeiro, o que precisamos fazer é ter alguns estados, para que possamos criar o primeiro e chamá-lo previsão, e a previsão é o que retornaremos ao nosso componente. Previsão. Esses resultados virão do back-end, processados aqui e poderemos usá-los em qualquer lugar. Dizemos usar o estado e causar isso. Então, também precisamos de um indicador de perda. Criaremos um volan que as chamadas estão carregando e, em seguida, dizemos que set está perdendo e, em seguida, usaremos o estado novamente. E, nesse caso, queremos que seja um tipo de booleano e iniciamos o aplicativo como falso Portanto, nosso estado de carregamento será falso no início. Em seguida, custe novamente, e também precisamos de uma variável de estado para erro. Então diga erro. Portanto, esse aplicativo terá algum erro, basta configurá-lo aqui e dizer erro. E aqui, como será uma mensagem de erro, temos que defini-la como string. Mas se não tivermos nenhum erro, teremos null. Então, começamos o ciclo de vida desse gancho com esse estado nulo, então não há erro no início Então criamos nossa função dentro de você. Portanto, precisamos de uma função para fazer o upload de nossa imagem. Podemos apenas dizer Cost, aploimage que será uma função de sincronização que tomará o arquivo como argumento Então, aqui nós carregamos nossa imagem e o tipo será arquivo. E então nós simplesmente devolvemos algo aqui dentro. E aqui dentro, primeiro precisamos de dados de um formulário porque atuaremos como um formulário quando carregarmos nossa imagem, pois criamos anteriormente, é um formulário e precisamos configurá-lo como um novo formulário de dados. Em seguida, anexaremos essa imagem aos dados do nosso formulário. Portanto, os dados do formulário acrescentam o arquivo que passamos como argumento. Então, arquive a diversão. Ok, então, como estamos nos opondo à imagem, precisamos ter a perda como verdadeira Portanto, quando aplaudimos a imagem, tendemos a mostrar a perda como verdadeira e, em seguida, criamos um indicador de rotação ou perda para nosso Portanto, perder é verdade quando estamos nos opondo à imagem e, em seguida, definimos o erro como nulo Portanto, ainda não temos nenhum erro aqui. E então temos uma caminhada de tentativa e captura. E primeiro, com uma caminhada de tentativa e captura, obteremos ou tentaremos obter as informações de que precisamos e detectaremos qualquer erro, se existir. Então, para criar uma caminhada de tentativa e captura, que é uma tentativa , e depois voltamos aqui pegamos e passamos qualquer erro, se existir, então detectaremos qualquer erro e abriremos outro bloco. Mas faltam algumas partes aqui do nosso aplicativo, como, por exemplo, tipos. Então, queremos que nosso gancho retorne um tipo específico. Também queremos que nossa previsão seja de um tipo específico. Então, para isso, primeiro eu tenho um erro de digitação aqui, então é uma previsão Então, para isso, vamos agora criar nossos tipos. 31. 31. Tipos de resultados: Não, para nossos tipos, podemos criar os tipos aqui ou tornar o aplicativo mais organizado. Vamos criar uma nova pasta, chamamos de tipos de pastas E então, dentro dos tipos de pasta, criamos outro arquivo chamado type dot Ts. E aqui, podemos começar a criar os tipos que queremos usar. Então, primeiro, usaremos o tipo de produção que enviaremos para nosso componente principal. E para isso, dizemos exportar, então podemos exportar esse tipo, tipo, e teremos isso na previsão. Predição é igual a chaves abertas, e então dizemos que precisamos de uma categoria Então, o rótulo, como você se lembra, e chame-o de string. E então também precisamos mostrar a pontuação. Então, temos nossa pontuação, e nossa pontuação será um número se você se lembrar daquele 0,98 que enviaremos, bem como nosso programa para lá Então, depois disso, também precisamos retornar algo da nossa função. Portanto, queremos os tipos exatos que queremos retornar de nossa função, usando principalmente o resultado do aplauso da imagem E então podemos dizer, novamente, tipo de exportação, uso de imagem, aplausos e, em seguida, resultado E esses serão os aplausos. Imagem que, nesse caso, será uma função como a nossa função que chamou arquivo como um arquivo de tipo e, em seguida, retornaremos aqui a voz da promessa. Assim, podemos devolver qualquer promessa que quisermos. Então, também temos a previsão. Então, se você se lembra, essas previsões vinham como uma matriz. Então, para isso, aqui vamos usar esse tipo, e o chamamos de previsão. Mas como é uma matriz, queremos uma matriz a partir das previsões, mas também pode ser nula, também não pode ter nada se houver um erro se não houver correspondências encontradas, então temos que definir tão bem quanto Então temos, novamente, carregamento que, neste caso, é um lingote, e depois o erro e a seta, se você se lembra da string ou não Agora, podemos voltar ao nosso gancho e definir o que precisamos aqui. Então, aqui na primeira variável de estado, precisamos defini-la como a previsão. Então, abra a tag aqui, e então dizemos previsão e é uma matriz de previsões e também pode ser nula E o primeiro estado que o componente renderiza tudo é nulo Então, quando o componente é renderizado, ainda não temos nada, então temos que definir isso como nulo E agora precisamos importar nosso tipo para que possamos usá-lo no aplicativo. Então, se formos aqui para nossa parte de importações, dizemos import, depois abrimos kern pass e importaremos nossos dois tipos Então, é previsão e aplausos, use a imagem, o resultado do applod. E erro eu importei a tempo, então exclua este. Agora, aqui, onde queremos usar isso, queremos usar isso como o tipo de nossa função ou o resultado de nossa função, o que eles retornarão no final. Então usamos imagem, resultado aplaudido. Então, agora recebemos esse erro porque precisamos retornar algo e ainda não estamos retornando nada. Portanto, esse erro desaparecerá depois de concluirmos esse bloco de código aqui. Continuaremos na próxima. 32. 32. Como retornar dados da Hook: Não, aqui em nosso bloco try and catch, ainda precisamos fazer algumas chamadas para que possamos ter os resultados exatos e depois usá-los no componente principal. Então, primeiro, vamos fazer a solicitação de postagem, depois com o eixo que importamos e, para isso, dizemos custo, e essa será uma resposta igual E como é uma operação síncrona, diremos espere pelo resultado e, em seguida, dizemos axios post e queremos aumentar porque vamos enviá-la a partir de nosso componente principal que será a nosso componente principal que será previsão em uma matriz de E então aqui abrimos as chaves e o que vamos enviar, que tipo de informação vamos enviar Então, primeiro, precisamos do RL que ainda não temos no aplicativo, mas vamos defini-lo Em seguida, os dados do formulário. Então, forme os dados que definimos aqui. E novamente, vírgula, e abrimos as orelhas com chaves encaracoladas. Então, para os usuários, primeiro dizemos ers curly braces e aqui apenas definimos o tipo de conteúdo Portanto, abra aspas, tipo de conteúdo e, nesse caso, se você se lembra, de nossos testes no servidor, há um formulário de dados com várias partes Então, digamos que sejam dados de várias partes. Ok, então eu coloco a vírgula aqui. E a primeira coisa que podemos fazer é depois da variável de resposta ou da solicitação de resposta, dar outra linha aqui e definir primeiro o log do console, para que possamos ver a resposta. Digamos resposta do servidor, porque se algo acontecer e os dados não chegarem, podemos verificar no console se eles realmente estão chegando ou não e, em seguida, os dados de resposta. Então precisamos verificar se está tudo bem. Então, dizemos que se nossa matriz, nossa matriz de previsões é uma matriz com dados de resposta Então, se isso é uma matriz, e a resposta é porque é um RA como comprimento. E se esse comprimento for maior que zero, o que significa que está preenchido, podemos dizer que os dados existem e definimos a previsão para os dados de resposta Caso contrário, então, definimos o erro. Então, como isso não corresponde à verdade e não temos dados, simplesmente geramos um erro e, assim, temos que definir o erro e dizer o formato de resposta inesperada do servidor. Então, significa que algo deu errado no servidor. Se tudo correr corretamente, nosso aplicativo enviará esses dados e nossas previsões serão preenchidas Mas lembre-se de que aqui ainda estamos em estado de perda porque é verdade, então ainda nada, e configuraremos posteriormente para mostrar os dados. Então, agora, continuando nossa captura. Então, se tivermos um erro, primeiro definimos um erro no console. E, como eu disse, adicionamos um erro. Tivemos um erro ao borrar a imagem e depois dizemos que tipo de erro foi Então, esse erro também será renderizado como um erro do console. Então, novamente, abrimos I. E isso é porque estamos usando Axios, dizemos Axios É um erro axial. Portanto, o axis detectará isso em caso de erro e o definirá como um erro de axios aqui Definiremos um erro diferente. Então, aqui dizemos, talvez dê mais espaço porque precisamos aqui do espaço e dizemos abrir uma craqueta. E então você diz, então, preenche aqui dez aspas diferentes, digamos que não consegui perder a imagem Em seguida, abra o sinal de $1, Curly Races, e então passamos a mensagem de erro ou a mensagem de ponto de erro que vem daqui Então, podemos continuar aqui. Temos um ponto e depois um status. Portanto, essa é apenas uma informação útil em caso de erros. Dizemos status de resposta de erro. Podemos fechar novamente os colchetes, outro ponto, outro cifrão e dizer erro Dot responde. Colocamos esse ponto de interrogação porque é um estado opcional. Então, para permitir que não exista, não continue e depois detalhe ou apenas uma string vazia. Então, em nosso bloco I, também precisamos definir s, e o s ficará bem, apenas definimos um erro diferente se algum desses erros for verdadeiro, mas ainda temos um erro. Só precisamos dizer que falhou em explodir a imagem. Por favor, tente novamente. Portanto, se não houver erro do servidor ou do Axios, basta definir essa mensagem de erro E então queremos terminar o bloco e depois dizemos aqui. Então, a partir de nossa captura e tentativa, precisamos finalizar e, finalmente, dizer que , se tudo correr corretamente, dissemos que o set está perdendo para o fio dental Então, agora não estamos mais perdendo. Ou estamos mostrando um erro ou os dados reais. Economize, mas então como extraímos? Precisamos devolver alguma coisa. Portanto, precisamos retornar todas as variáveis de estado que criamos. Então, dizemos apenas retorne as chaves Carl abertas e retornamos uma imagem do gráfico Então, para definir a função do componente principal para enviá-la aqui, a previsão que precisamos enviar também é esse carregamento para que você possa verificar o estado do carregamento e depois dar um erro. Então, agora, se salvarmos, e ainda tivermos esse erro em torno do erro porque é um tipo desconhecido, então, para corrigi-lo facilmente basta configurá-lo como aqui, e o erro desaparecerá Mas eu tenho um erro de qualquer um aqui. Isso é sobre meu linting, porque, idealmente, em grandes aplicações em aplicações de produção, nunca devemos usar nenhum ou apenas casos muito específicos, pois isso pode prejudicar o aplicativo e o desenvolvimento contínuo ou a longo prazo Então, eu geralmente tento evitar o uso de qualquer um, mas neste caso, podemos simplesmente usá-lo. Agora, salve-o e estamos prontos para testar essa parte em nosso aplicativo. 33. Usando o gancho no controle de imagem: Então, a primeira coisa que devemos fazer é voltar. Podemos fechar tudo isso e voltar ao nosso ponto de controle de imagem TSX E se você se lembra, criamos essas variáveis aqui que não precisaríamos ou não usaríamos, mas temos que mudar isso agora. Então, em primeiro lugar, dizemos apenas custo. E então queremos ter as mesmas coisas que estamos devolvendo do nosso gancho. Então, temos a imagem fechada. Precisaremos de uma previsão. É perder e o erro. Então, isso é o que vamos usar, já está definido em nosso primeiro ano, e isso virá do gancho com os dados corretos. E então precisamos usar o gancho, então dizemos imagem, use Imagem aplaud E se eu pressionar apenas uma aba, ele importará o gancho para mim. Portanto, importe, use image aplaud da nossa pasta hook e do arquivo correto Agora, porque eu tenho um erro aqui e por que isso? Porque, se você se lembra, nosso gancho que usa Image plus requer um argumento que seja mais ganho, o que significa que precisamos passar nossa chave. Então, por enquanto, acabamos de definir como string vazia, mas ainda precisamos pedir a chave ao nosso servidor. 34. Chave de API: Não, precisamos da chave do nosso servidor ou da URL do nosso servidor, para que possamos usá-la aqui. Então, para isso e os métodos de separação, para que não fiquemos visíveis aqui, criamos uma nova pasta chamada keys. E por dentro, criamos um novo arquivo chamado APi kis dots. Observe que essa é uma maneira muito simples de não mostrar as chaves aqui, mas por uma questão de segurança, você não deve usá-las dessa forma se usá-las em uma variável de ambiente ou em um arquivo de log. Portanto, o usuário não terá acesso a ele por meio de ferramentas de desenvolvimento ou outros métodos. Então, para isso, precisamos primeiro criar um const para dizer export, cost e depois chamá-lo de API key equals e, em seguida, como é uma string, abrimos códigos E se você se lembra que é HTTP, corte a barra 127.0 0.04 0.1, e estamos executando o servidor na porta 800 Se você alterar a porta, use a porta que você está usando. Então, precisamos também definir o tipo typescript e, como é uma string, nós o definimos como uma E agora podemos usar essa ApiKey em nosso aplicativo. Então, voltamos ao nosso controle de imagem e, primeiro, precisamos importá-lo. Então, novamente, aqui diremos importar chaves abertas e importamos nossa chave de API constante da nossa pasta kiss e das APIs kiss Então, aqui, quando a imagem é exibida, passamos facilmente o que queremos Então, primeiro, precisamos abrir o Bectix. Então, novamente, o ctix nos permite usar variáveis dentro da string, e queremos abrir o cifrão e as raças curvas, e então temos nossa Mas porque nossa chave APA ou a rota que queremos usar simplesmente não termina com uma porta. Também precisamos passar nossa barra, prever, porque é nosso método post que criamos anteriormente em nosso aplicativo Então, agora nós o salvamos e agora podemos continuar com isso. 35. Gerenciar upload e gerenciar imagem: Já podemos usar esses métodos de dissuasão do nosso ok, mas ainda precisamos criar funções para lidar com a alteração da imagem ou o upload da Então, a primeira coisa que vamos fazer é ter uma nova função aqui, chamamos de lidar com a mudança de imagem. Então, o evento que vamos usar para alterar a imagem ou fazer o upload de uma nova imagem, e o outro será um evento. E esse evento terá o tipo de evento de mudança. Então, evento de entrada de HTML porque estamos perdendo ou perdendo uma imagem do nosso computador para esse método aqui Então, chamamos isso de evento de mudança, o tipo que vem de react, e depois abrimos as tags e, dentro, temos o elemento de entrada HTML. Então, para usar esse método aqui. E como estamos usando esse tipo do react, precisamos importá-lo. Então, após o estado de uso, dizemos change event para importá-lo para nosso código aqui. Portanto, o erro desapareceu e estamos prontos para continuar com nossa função. Então, será a função de seta e depois o curibass. E a primeira coisa que vamos fazer é definir uma variável para o arquivo, então const file E esse é um evento que o destino, os arquivos que vamos enviar são opcionais porque podem estar vazios, e queremos o primeiro item nessa matriz Então, também podemos lidar com isso para verificar se tudo está correto. Então, se tivermos um arquivo, abriremos novamente as chaves de Carly Dissemos que a seita selecionou o arquivo. Então, lembre-se da nossa variável de estado aqui, que é o tipo de arquivo. Então, dizemos setar arquivo selecionado para arquivo. Então, aquela que enviamos e, em seguida, definimos a imagem para o URL. Então, outra interface, neste caso, para o URL, e então você diz criar Object RL. Então, quando perdemos uma imagem, esse evento criará uma URL, para que possamos exibi-la imediatamente Então salvamos e eu tenho um erro aqui porque o RL está em letras maiúsculas Então nós a salvamos, então nossa imagem final muda, está funcionando, mas precisamos usá-la em nosso modelo de volta aqui para nossa entrada. Temos esse método para o método inalterado, e só precisamos excluir essa parte aqui e depois chamar uma função e alterar a imagem Também estou observando um erro aqui, porque esqueci as chaves aqui porque o método de dois casos por caso é um método e precisa Então, basta adicionar as chaves aqui que eu preencho. Agora precisamos lidar com o upload. Então, para isso, quando queremos que o upload seja carregado em nosso servidor, basta dizer Custo, basta dizer Custo, manipular uploads é igual uma função de seta de sincronização novamente e depois dizemos, há um arquivo selecionado, há um arquivo selecionado aguardamos Para retornar algo com o arquivo selecionado. Portanto, a imagem de upload é a função que temos em nosso gancho que criamos para lidar com essa parte. Enquanto o upload estiver sendo feito, podemos aguardar se tudo estiver correto Ele nos enviará a data Caso contrário, podemos simplesmente definir o erro do console dizendo que nenhum arquivo é sólido. Então, agora podemos economizar. Mas antes de testá-la, precisamos adicionar essa função em algum lugar do nosso modelo pois isso acionará o evento. E se você se lembra, temos esse botão com um clique vazio aqui, e é aí que teremos nossa função. Então, dizemos “endo aplausos”. Agora podemos salvá-lo e testar nosso aplicativo. 36. Testando o upload de imagens: Portanto, em nosso aplicativo, se você não tiver o aplicativo em execução, precisamos apenas do NPM run Def para iniciar nosso aplicativo de TI, depois ir para o host local e, em seguida, para o host local, há um erro E isso é porque não instalamos o Axios. Então, vamos parar nosso servidor e dizer que o NPM instale o Axios OK. Então, agora podemos tentar novamente e mandar um PM no desenvolvedor de volta para o nosso navegador e tudo está correto. Agora podemos fazer o upload da imagem. Então, basta escolher o arquivo aqui. E temos nossas imagens dobradas e podemos simplesmente abrir esta, o evento de mudança altera a imagem corretamente aqui, e então podemos simplesmente pressionar identificar imagem, e temos um erro de rede E por que temos o erro de rede porque esses aplicativos terminam com HTTP e precisamos definir ou encerrar as solicitações de origem cruzada para serem aceitas no Então, vamos fazer isso a seguir. 37. Permitir CORS: nosso servidor em nosso arquivo PTN principal, precisamos adicionar outra coisa para lidar com as origens cruzadas de nosso aplicativo Então, primeiro, precisamos importar algumas partes que precisaremos usar. Então, voltando às importações de, dizemos que do middleware FAST API dot course for cross origin, importamos o middleware do curso Em seguida, voltamos depois de nossa API rápida, abrimos algumas linhas e dizemos “up”. Então, da FAST API como colchetes de desgaste médio e abertos. E então ligamos para o meio da guerra e dizemos permitir origens E toda origem será matriz. Então, na próxima linha, dizemos permitir que as credenciais sejam verdadeiras E dizemos permitir, depois dizemos permitir métodos. E esses métodos serão novamente uma matriz. Mas, neste caso, abrimos aspas e dizemos estrela para permitir todas elas, depois novamente, vírgula e depois dizemos permitir Es, a mesma coisa Então, arraste, aspas e permita. Então, só precisamos adicionar vírgulas aqui, e ele deve estar pronto para ser Aqui no LOiGIN, definiremos as cadeias de caracteres do front-end de nossos URLs que estamos usando e podemos usar várias para usar, por exemplo, o host local HCTP porque nossos aplicativos estão sendo executados no host local, podemos definir, por exemplo, esse host local ou podemos até mesmo usar vários hosts locais aqui, por exemplo, novamente, aspas e diga, novamente, Host local HCTB e depois 42. Então, por exemplo, temos um aplicativo react aqui e o aplicativo angular aqui que podemos usar, e o host local estará disponível e as origens não causarão mais problemas. Então, se eu salvá-lo, poderemos testá-lo novamente. 38. Como obter os resultados na tela: Não, voltando ao nosso front-end, podemos apenas atualizar a página e tentar novamente. Então, abra novamente as imagens. Deixe-me um avião de novo, e depois vamos identificar a imagem E, como você pode ver, uma inundação. E aqui temos a etiqueta que ele detectou como um avião e a porcentagem Então, a porcentagem, nós a definimos aqui. Se você se lembra daquele número estranho antes, aquele número longo com decimos, estamos tratando isso aqui para ser fixado como um número percentual Então, podemos tentar outra, digamos Zebra, e você vê a imagem alterada, mas ainda precisamos identificar Então, aqui, a Zebra é, na verdade uma imagem muito fácil de identificar por causa das listras E então podemos tentar mais, por exemplo, um ônibus, mais 98% de precisão Então, agora, fique à vontade para ver mais duas imagens e experimentar. Lembre-se de que modelar ainda é aprender e erramos. Usamos rótulos e precisão diferentes ou até mesmo dizemos que a imagem não existe. Sinta-se à vontade para tentar criar um aplicativo mais complexo no back-end ou até mesmo tentar melhorar esse front-end para que você possa atender às suas próprias necessidades. 39. Dividindo-se em componentes menores: Sees of react é baseado em componentes. Portanto, tudo deve estar em componentes menores para manter o código limpo, o projeto mais compreensível e, em seguida, os componentes também podem ser reutilizáveis em Então, aqui está como fazemos isso. Primeiro, o que vamos fazer é dividir esses dois componentes em componentes menores. Assim, podemos iniciar o componente de imagem e, para isso, vamos novamente para nossa pasta de componentes e criamos um novo arquivo, e o chamamos de componente de imagem dot DSX Então, aqui podemos simplesmente definir const, chamar o componente de imagem. É um componente funcional, então nossa função, e aqui retornamos algo e exportamos o componente de imagem padrão. Então, simplesmente precisamos copiar esse div e tudo dentro dele, recortá-lo E dentro da devolução, colamos o conteúdo da imagem. Temos um erro aqui e veremos isso mais tarde, como evitar esse erro e também passaremos adereços Então, podemos guardá-lo por enquanto. E aqui podemos importar nosso componente recém-criado. Então, dizemos apenas imagem. Componente e feche o convés. Então, vamos ver aqui. Como você pode ver, importamos esse componente de imagem do componente de imagem. Também podemos dividir essas caixas de previsão onde temos nossa cicatriz e categorias em outro componente Então, novamente, chegamos aqui e dizemos componente de predição dot TSX E então usamos o mesmo componente de previsão de custos. Novamente, componente funcional. E então retornamos o que está dentro dessa previsão, a caixa aqui. Copie Div e tudo dentro dele, corte-o, vá para um componente de previsão Ainda tenho o erro. Veja isso mais tarde, como mencionei, e então teremos que exportar o padrão. Componente de previsão para salvar. E então, em nosso controle de imagem, chamamos o componente novamente. Então, neste caso, é esse componente de previsão do componente de previsão. Não se esqueça de importá-lo aqui. E agora, para nos livrarmos desses erros, precisamos passar adereços e veremos isso a seguir 40. Adereços do React: Então, aqui vemos esses dois erros que acontecem em nosso componente, e isso é porque não temos adereços ou esse objeto aqui não existe E para corrigir isso, precisamos simplesmente passar os adereços, como mencionei Portanto, props é uma forma de passar dados de pai para filho. Então, quais componentes passarão dados para outro componente, que ele possa ser renderizado de forma dinâmica. Depende se você deseja reutilizar o componente ou não, você pode passar dados diferentes para esse componente E aqui, como podemos fazer isso? Primeiro, transformaremos esse componente em um componente funcional. Então, aqui temos uma coluna e, em seguida, FC para componente funcional e abrimos esse texto aqui. Então, essa tag precisamos passar nosso tipo. Então, se você se lembra, em nosso tipo, temos esse tipo de previsão que contém pontuação da categoria N que usamos para renderizar na tela. Então, aqui podemos simplesmente importar esse tipo de previsão. Portanto, importe a previsão dos tipos. E esse erro também ocorre porque precisamos importar o componente funcional da biblioteca react. Então, digamos que importe calibrações abertas FC de reacts. E, como você pode ver, os erros são v. Agora, precisamos ter também nossos adereços que vamos usar como argumento E para isso, podemos abrir calibragens. E lembre-se de que, em vez de digitar a categoria e núcleo do DS, podemos apenas dizer sua categoria e pontuação. Então, assim, o erro desaparecerá. Mas, por enquanto, ainda está aqui, só precisamos excluir essa previsão aqui que não usamos para simplesmente usar categoria e pontuação. Então, todos os erros desapareceram, nós os salvamos e, em seguida, para serem usados em nosso controle de imagem, como você pode ver aqui, mostramos imediatamente um erro, e isso porque estão faltando esses tipos. O que precisamos aqui, primeiro, precisamos de uma categoria, abrimos uma chave e aprovamos a previsão Primeiro elemento da matriz e da categoria. E também precisamos fazer o mesmo com a pontuação. Então, novamente, coletes encaracolados, predição e cicatriz Então, se passarmos assim, dá um erro porque espera um número. Então a cicatriz é um número, todos os erros desapareceram. Agora, vamos fazer o mesmo com o componente de imagem e o componente de imagem. E como não temos o tipo nesse caso, faremos isso de forma diferente. Então, primeiro, novamente, crie um componente funcional. Vamos compartilhar a partir da biblioteca react. E aqui, se você lembrar que esta imagem é uma string, podemos simplesmente passar se não tivermos um tipo para passá-la diretamente aqui. Então curly aumenta e dizemos RL da imagem, que é uma string. Então, estamos esperando uma string. E depois passe isso aqui como um argumento também. Em seguida, precisamos também alterar o nível para a imagem o e todos os erros desaparecerão. Então, em nosso componente de imagem, novamente, temos o mesmo problema e precisamos passar essa imagem de que tratamos nossa lógica para o componente de imagem. Então, digamos que RL da imagem, é igual à imagem. Portanto, todos os erros desapareceram e agora podemos testá-los em nosso aplicativo. Então, voltando ao nosso aplicativo, podemos simplesmente escolher o arquivo. Acabei de baixar a imagem aqui, e podemos tentar para não cometer erros. Tudo está funcionando conforme o esperado, e aí está. Então é assim que passamos dados do componente pai para o componente filho e reagimos ao aplicativo. 41. Casos de uso e limitações: No mundo atual, os aplicativos de reconhecimento de objetos se tornaram ferramentas incrivelmente úteis, transformando a forma como interagimos com o ambiente Então, imagine andar um smartphone de uma rua movimentada e, com uma varredura rápida, seu dispositivo pode identificar possíveis perigos, ajudando você a navegar com segurança Ou imagine-se em um supermercado onde o mesmo aplicativo ajuda a gerenciar o estoque, facilitando o reabastecimento para os lojistas No entanto, esses aplicativos não são apenas para negócios. Eles estão abrindo novos mundos para pessoas com deficiência visual, descrevendo o ambiente em tempo real Os entusiastas da natureza os consideram inestimáveis para identificar a fada e a fauna em seu habitat Nas salas de aula, esses aplicativos estão tornando o aprendizado mais interativo, transformando objetos do cotidiano em oportunidades educacionais Mas nem tudo é fácil. Embora esses aplicativos sejam inteligentes, eles não são infalíveis Em um dia nublado ou em uma sala com pouca iluminação, eles podem ter dificuldade em identificar objetos com precisão E embora sejam ótimos em reconhecer itens comuns, eles podem coçar suas cabeças digitais em objetos mais obscuros ou especializados Há também a questão da duração da bateria no caso dos dispositivos móveis. A execução desses aplicativos pode esgotar continuamente seu telefone mais rápido do que você imagina, potencialmente deixando você com bateria descarregada em um momento oportuno ou até mesmo esgotando a bateria do seu computador E em nosso mundo preocupado com a privacidade, o uso constante de câmeras levanta algumas sobrancelhas As pessoas podem se sentir desconfortáveis sabendo seus arredores estão sendo constantemente analisados. Além disso, eles veem objetos, mas não os entendem completamente. Eles podem dizer que há uma parte em um t, mas não entenderão que juntos fazem um conjunto de jantar. Eles são como um turista em um país estrangeiro, reconhecendo as palavras em vídeo , mas perdendo o contexto completo da conversa À medida que continuamos a integrar esses aplicativos em nossa vida diária, estamos descobrindo seu potencial e suas limitações São ferramentas incrivelmente úteis, mas não isentas de peculiaridades e desafios À medida que a tecnologia evolui, estamos aprendendo a equilibrar seus benefícios com seus inconvenientes, encontrando o lugar certo para eles se digitalizem em nosso Dito isso, mal posso esperar para ver o que você pode criar ou suas ideias para criar esse tipo de aplicativo.