[IA] Crea una aplicación web de reconocimiento de objetos con Python y React

1. Introducción: Hola a todos. Soy Alex Baker, y estoy encantada de darle la bienvenida a este curso Como desarrollador full stack, ingeniero móvil, instructor y entusiasta de la IA, tengo el privilegio de trabajar con varias grandes compañías tecnológicas cuando me especializo en tecnologías como React, React Native, Engler y Biton Hoy nos embarcamos en un emocionante viaje juntos. Construiremos una aplicación de reconocimiento de objetos desde cero, combinando el poder de reacción para nuestro front-end con FAS PI y PTN para nuestro back-end Pero este no es solo otro curso de desarrollo web. Vamos a adentrarnos en el fascinante mundo de la IA y el machine learning, aplicando este concepto en escenarios del mundo real. Si eres un entusiasta, ansioso por construir tu primera aplicación inteligente, un aspirante a desarrollador que busca entrar en la tecnología o un programador experimentado que quiere expandir tu conjunto de habilidades con la integración de React o AI Este curso está diseñado para ti. Trabajaremos con tecnologías de calibre de corte como API rápida, PTN y flujo tensor, lo que le brinda una experiencia final en la creación de aplicaciones modernas impulsadas por IA Prepárate para transformarte de espectador en creador de tecnología de IA Al final de este curso, tendrás las habilidades para construir aplicaciones que no solo procesen datos. Ellos ven y entienden el mundo que les rodea. Convirtamos tus inspiraciones de IA en realidad. 2. 02. IA, aprendizaje automático y aprendizaje profundo: Bienvenidos, todos. Entonces, antes comenzar con la codificación práctica, tendremos un poco de teoría con respecto a la IA, aprendizaje automático y el aprendizaje profundo. Hoy, nos estamos embarcando en un emocionante viaje por el mundo de la inteligencia artificial, aprendizaje automático y el aprendizaje profundo trata de tecnologías transformadoras que están remodelando el mundo que vemos hoy y están apareciendo nuevas tecnologías, nuevas características respecto a aquellas tecnologías nuevas características respecto a aquellas tecnologías alrededor de nuestros dispositivos que están cambiando nuestras Y con eso, ¿qué es la IA o la inteligencia artificial? La inteligencia oficial o IA es una rama de la informática que se enfoca en crear máquinas inteligentes capaces de realizar tareas que normalmente requieren inteligencia humana. Pero, ¿qué significa realmente? Imagine un sistema informático que pueda entender el lenguaje natural, reconocer objetos e imágenes, tomar decisiones e incluso aprender de sus experiencias. Entonces esa es la esencia de la IA en general. Se trata de crear máquinas que imiten las funciones cognitivas, nos asociamos con las mentes humanas, como aprender y resolver nuestro problema Los sistemas de IA pueden variar desde simples programas basados en reglas hasta sistemas completos que pueden adaptarse y evolucionar. El objetivo es crear máquinas que puedan percibir el entorno, razonar sobre lo que perciben y tomar acciones que maximicen sus posibilidades de éxito en ese objetivo que queremos en este caso. Ahora, ¿cuáles son los tipos de IA o qué podemos encontrar como esos tipos de IA? Cuando hablamos de IA, es importante entender que existen diferentes tipos o niveles de IA. Entonces, exploremos las dos categorías principales de la misma. Entonces tenemos IA débil o estrecha, IA fuerte o general. Tan débil IA o IA estrecha, este es un tipo de IA que interactuamos con nuestra vida diaria. Está diseñado para realizar una tarea estrecha o un conjunto específico de tareas que podamos incluir en este caso, algo como asistencia de voz como City Alex o Bullet, sistemas de recomendación, como vemos en Netflix o Amazon, software de reconocimiento de imágenes y filtros de spa en correo electrónico. Estos sistemas son excelentes y son tareas específicas pero pueden desempeñarse fuera de sus dominios de programa. No tienen inteligencia general ni conciencia. Con ese caso, llegamos a la IA fuerte o IA general. Eso es más un concepto teórico en este punto. La IA fuerte se refiere a una máquina que con conciencia, sensibilidad y mente, con la capacidad de aplicar la inteligencia a cualquier problema, más bien a una sola tarea específica Este tipo de IA incluirían algo como razonamiento, resolver acertijos, emitir juicios con certeza, planificar, aprender, comunicarse con el lenguaje natural, integrar todas las habilidades hacia un objetivo común. Si bien aún no estás ahí, este es el objetivo final de los investigadores de IA. Es el tipo de IA que vemos en películas como terminator, matrix, etc. Ahora vamos a aprender qué es el aprendizaje automático. El aprendizaje automático es un subconjunto de IA. El aprendizaje automático es donde las cosas realmente se ponen interesantes desde nuestra perspectiva. En la programación tradicional, proporcionamos a la computadora un conjunto de instrucciones explícitas para resolver un problema. Pero con el aprendizaje automático, tomamos un enfoque diferente. En lugar de escribir instrucciones explícitas, le damos a la máquina una gran cantidad de datos y dejamos que aprenda a resolver nuestros problemas. ¿Y cómo funciona esto? Entonces alimentamos la máquina con grandes conjuntos de datos. La máquina analiza e identifica patrones. En base a estos patrones, la máquina puede crear sus propias reglas o algoritmos. La máquina entonces puede aplicar las reglas a los nuevos datos de pecado para hacer predicciones. Por ejemplo, en lugar de programar una computadora con todas estas reglas, lo que hace que un correo electrónico sea spam, podemos mostrarlo en miles de ejemplos de correos no deseados y no spam. El algoritmo de aprendizaje automático aprenderá entonces a identificar las características del correo electrónico no deseado y luego podrá aplicar este conocimiento a nuevos correos electrónicos que no se habían visto antes. La clave aquí es que los sistemas de aprendizaje automático mejoren su rendimiento con experiencia. Cuantos más datos procesen, mejor se convierten en una mejor tarea. Esta capacidad de aprender y mejorar a partir de la experiencia sin estar explícitamente programado es lo que distingue al aprendizaje automático. Y luego lado del aprendizaje automático, hay varios tipos de aprendizaje. Tenemos el aprendizaje sin supervisión donde los datos vienen sin etiquetar, o los clústeres de datos vienen sin etiquetar, y es una tarea de la máquina identificar y etiquetar esos conjuntos Entonces tenemos el aprendizaje supervisado donde alimentamos a la máquina con datos ya etiquetados. Voy a ser más fácil para la máquina aprender con esos conjuntos de datos. Entonces tenemos el aprendizaje reforzado donde la máquina aprenderá al tener recompensas o castigos como va a aprender con esos datos y dándonos la salida Entonces ahora podemos pasar a la tercera parte de nuestro contexto de IA, que es el deep learning. Un aprendizaje profundo lleva el aprendizaje automático al siguiente nivel. Es un subconjunto de esa parte de aprendizaje automático inspirado en la estructura y función del cerebro, especialmente la interconexión de muchas neuronas El aprendizaje profundo utiliza estructuras llamadas redes neuronales artificiales que son sistemas de software diseñados para imitar la forma nuestras neuronas en nuestro cerebro se conectan y comunican Así como nuestros cerebros pueden identificar patrones y dar sentido a datos complejos, los algoritmos de aprendizaje profundo pueden realizar características similares. El aprendizaje profundo y profundo se refiere al número de capas en estas redes neuronales, mientras que una red neuronal simple podría tener solo una o dos capas, y los sistemas de aprendizaje profundo pueden tener cientos. Cada capa de la red neuronal Depo procesa los datos que recibe, extrae entidades y pasa la información procesada a la siguiente capa A medida que los datos se mueven a través de estas capas, la red puede aprender características cada vez más abstractas y complejas de los datos. Esto hace que el aprendizaje profundo sea particularmente bueno en el reconocimiento de imágenes y voz, procesamiento del lenguaje natural, traducción entre los idiomas, generación de imágenes y videos realistas, incluso crear arte de la música Como ahora como vemos aquí en la pantalla, tenemos también las partes de las redes neuronales. Entonces, profundicemos un poco más en las redes neuronales ya que son la base del agotamiento Existen varios tipos de redes neuronales, cada una diseñada para tipos específicos de tareas. Entonces tienes la red neuronal feed forward. Estos son los tipos más simples de redes neuronales artificiales. La información se mueve en una sola dirección desde la capa de entrada a través de las capas ocultas, y luego obtenemos el resultado en la capa de salida. Se utilizan para tareas sencillas como clasificación y regresión. También tenemos la red neuronal recurrente. Estas redes tienen conexiones para que formen ciclos, permitiendo que la información persista. Son particularmente buenos para procesar datos secuenciales como texto o datos de series temporales. Y se utilizan en tareas como traducción de idiomas y el reconocimiento de voz. Luego vemos las redes neuronales convolucionales . Estos están diseñados para procesar datos con topología de cuadrícula, como imágenes Utilizan una operación matemática llamada convolución en lugar de una multiplicación matricial general en al menos una de Ahí van a elección para cualquier tipo de tarea de análisis de imágenes. Cada una de estas redes tiene sus fortalezas y debilidades, y elegimos en base al problema específico que nos ocupa. Y ahora, ¿cómo juntamos todas estas partes para crear una aplicación? Ahora que entendemos los componentes individuales, veamos cómo el aprendizaje automático de IA y el aprendizaje profundo funcionan juntos en el escenario del mundo real. Tomemos el ejemplo del sistema de detección de objetos en un automóvil autónomo. La parte AI, el sistema de extralimitación que permite que el automóvil perciba su entorno, toma decisiones y controla su movimiento Esto incluye no solo detectar objetos, sino también planear rutas, seguir las reglas de tránsito e interactuar con los demás vehículos y peatones Luego pasamos a la parte de aprendizaje automático que es el motor subyacente que permite a la IA aprender de grandes cantidades de datos de conducción. Esto incluye aprender a reconocer diferentes tipos de objetos como autos, peatones y señales de tráfico, comprender las condiciones de la carretera y adaptarse a diferentes escenarios de manejo La arquitectura de deep learning y en este caso, utiliza las CNN o las redes neuronales convolucionales entra en la compleja tarea de detección de objetos en imágenes La CNN procesa la entrada visual de la cámara del automóvil, identificando y localizando objetos en tiempo real En este escenario, la IA proporciona el marco general y el proceso de toma de decisiones. El machine learning entonces nos permitirá al sistema mejorar el rendimiento a lo largo del tiempo ya que encuentra más escenarios y escenarios de complejidad en este caso, el aprendizaje profundo nos proporcionará un patrón poderoso para reconocer las capacidades necesarias para detección y clasificación de objetos en tiempo real. Entonces, ¿cuáles son las aplicaciones del mundo real de este tipo de tecnologías que podemos encontrar o tener en un futuro cercano? En aplicaciones de IA, podemos obtener bots de chat, reconocimiento de voz, autos autónomos, asistentes virtuales como City, Alexa y Google, dispositivos Smart Home, mantenimiento predictivo en manufactura también. Luego podemos pasar al aprendizaje automático donde tenemos el filtrado de correo electrónico, la detección de fraudes, sistemas de recomendación como Netflix, Amazon, Spotify y pronóstico del tiempo también En el aprendizaje profundo, podemos tener tecnologías como el reconocimiento facial, conducción autónoma, el diagnóstico médico, procesamiento del lenguaje natural, etc. Los beneficios de esta tecnología para el mundo pueden tener mucho impacto en la salud, la protección del medio ambiente, la educación, la accesibilidad, investigación científica, los negocios y la economía y el transporte. Como hemos visto, la IA y el aprendizaje automático y el aprendizaje profundo no solo están dando forma a nuestro futuro. También están activos mejorando nuestro presente. Estas tecnologías están resolviendo problemas y creando oportunidades que eran inimaginables hace apenas unos años No obstante, es importante recordar que el gran poder viene con una gran responsabilidad. A medida que estas tecnologías se integran más en nuestras vidas, también debemos considerar las implicaciones éticas de la misma. Y asegurar que se desarrollen y utilicen de formas que beneficien a toda la humanidad. Seguro que el futuro es emocionante y está construido con líneas de objetivos, redes neuronales y datos. Si eres un estudiante, un profesional, o simplemente un individuo curioso, te animo a que sigas aprendiendo sobre estos fascinantes campos porque quién sabe tal vez podrías desarrollar un próximo avance. Gracias por acompañarme en este viaje a través del aprendizaje automático de IA y el aprendizaje profundo. Y ahora podemos pasar a las partes más interesantes que son la codificación endzone 3. 03.Redes neuronales convulsivas: Ahora llegamos a la parte de la red neuronal que usaremos en este curso para detectar las imágenes, y usaremos la red neuronal convolucional que aprendimos antes, y tendremos una comprensión más profunda sobre qué es Entonces podemos comenzar con la definición de una red convolucional que son tipos especializados de redes neuronales diseñadas específicamente para procesar datos visuales Se han convertido en la columna vertebral de numerosas aplicaciones, desempeñando un papel crucial en tareas como la detección de objetos, clasificación de imágenes, reconocimiento facial y mucho más. Pero, ¿qué hace que las CNN sean tan especiales? Bueno, se inspiran en procesos biológicos en la corteza visual de los animales. Así como nuestros cerebros pueden reconocer rápidamente patrones y objetos en lo que vemos, CNN pueden ser entrenadas para hacer exactamente lo mismo con imágenes y videos digitales Las redes neuronales convolucionales nos presentan algunas características clave Entonces ahora vamos a desglosarlos. Entonces primero, tenemos las capas convolucionales. Son el núcleo de los bloques de construcción de CNN. Aplican una serie de filtros a la imagen de entrada, cada uno diseñado para detectar características específicas como bordes, texturas o patrones más complejos. A medida que profundizamos en la red, estas características se vuelven cada vez más abstractas y sofisticadas. Entonces tenemos también algunas capas de tracción. Después de la convolución, a menudo usamos estas capas de tracción. Reducen la dimensión espacial de los datos, haciendo que la red sea más eficiente computacionalmente y ayudándola a enfocarse en las características más importantes Los tipos comunes incluyen tracción máxima y tracción promedio. Luego nos dirigimos a las capas completamente conectadas que normalmente se encuentran al final de la red. Estas capas conectan cada neurona de la capa anterior a cada neurona en la siguiente, y se utilizan para hacer la clasificación o predicción final basada en las características, extractos en las capas Todo esto funciona es la matemática detrás de todo esto. Entonces aquí tenemos un ejemplo de red neuronal en esta imagen. Un componente crucial es la función de activación. En muchos CNN, utilizamos lo que se llama la función Lu, como se puede ver allí, que significa unidad lineal rectificada, y la forma es simplemente esta fórmula matemática es nuestra función de activación en este caso Esto significa que para cualquier entrada X, si X es negativo, la función devolverá cero. Si X es positivo, devuelve X en sí. Esta sencilla función ayuda a introducir no linealidad en nuestra red, lo que le permite aprender patrones más complejos La belleza de este Lu es que computacionalmente eficiente y ayuda a mitigar los gradientes de desvanecimiento que pueden ocurrir Y ahora por la estructura y razón de esta profunda red neuronal, entendemos los componentes. Entonces veamos cómo se juntan en la típica CNN para detección en tiempo real en este caso, que vamos a utilizar en nuestra aplicación Entonces, para nuestra detección de objetos en tiempo real, tenemos las entradas. Aquí es donde alimentamos nuestros datos. Tenemos un modelo de tendencia prane en este caso. Después la convolución, la primera capa convolucional que aplica los filtros para detectar entidades de bajo En este caso, utilizamos el framework de flujo tensor de paquete en nuestra aplicación Luego usamos la capa de tracción para reducir la dimensión especial. También utilizamos convolución, otra capa convolucional que detecta el nivel de los ojos de las entidades Luego usamos tirar de nuevo, tal y como lo vemos en la imagen, y reducimos las dimensiones y nos enfocamos en características clave. También tenemos entonces al final la capa completamente conectada que hace nuestra clasificación y detección. Entonces vemos el resultado en la capa de salida, tales clases de objetos y asignaciones en la imagen Esta estructura permite que la red aprenda progresivamente entidades más complejas desde aristas simples hasta objetos complejos. Cuando se trata de implementar la detección de objetos de tiempo de archivo CNNs, a menudo usamos modelos preentrenados Se trata de CNN que ya han sido entrenados en grandes conjuntos de datos y pueden reconocer una amplia variedad de objetos Luego podemos afinarlos para encontrar nuestro caso específico, ahorrándonos una cantidad significativa de tiempo y recursos computacionales Un marco popular para esto es como mencionamos antes, el flujo tensor Proporciona una API de alto nivel que facilita la construcción, entrenamiento y el despliegue de redes neuronales, incluida nuestra red neuronal convolucional La aplicación de estas CNN es vasta, por lo que podemos obtener estas redes para vehículos autónomos, imágenes médicas, reconocimiento facial, moderación de contenido y realidad aumentada Entonces, en conclusión, las redes neuronales convolucionales han revolucionado el campo de la visión por computador, permitiendo que las máquinas vean y comprendan el mundo de formas en las que estábamos en estábamos en A medida que continuamos perfeccionando estos modelos y desarrollando nuevas arquitecturas, las posibilidades son realmente emocionantes Ya sea que seas investigador, desarrollador o sencillo, alguien que esté interesado en este campo, CNN son definitivamente una tecnología para observar Simplemente están dando forma a la visión por computadora y mejorando la característica en sí. Con esto, tenemos una mejor comprensión cómo vamos a construir nuestra aplicación. 4. 04.Instalación de VSCode: En este curso, usaré código de Visual Studio para editar a texto. Por lo que será nuestra identificación. Siéntete libre de usar el que estás más acostumbrado a él. Si no tienes ninguno, te aconsejo que instales este para codificar junto conmigo en este caso. Y si no lo sabes, código de Visual Studio es ID, editor de texto o editor de código, y forma parte de Microsoft Environment y nos permite tener muchas extensiones apoyadas por la comunidad y también por grandes empresas. Y este ID soporta, muchos idiomas. Nuevamente, las extensiones son parte vital para este desarrollo de ID y software, también como terminal integrado, que es muy cool y soporte GIT. Entonces, para instalar el código de Visual Studio, simplemente da clic aquí en este botón. En mi caso aparece me mudaré para Mac porque estoy ejecutando un entorno Mac. Pero dependiendo de qué tipo de sistema operativo tengas, te parecerá diferente. Así que solo haz clic en esto. Y una vez que se descargue, continuaremos. Entonces, una vez que haya terminado de descargarse, solo tienes que ir a la descarga de Con. Mi abeja un archivo Zip, solo necesitas extraerlo, y depende de tu sistema operativo nuevamente, tendrás archivo ejecutible o un archivo DMG Así que simplemente lo presionaremos dos veces y procederemos con la instalación. Una cosa a notar es que tenemos una pequeña casilla de garrapata para agregar a Path. Por favor hazlo porque te permite abrir el editor a través de la terminal con un simple comando. Una vez instalado, está abierto, se puede ver el ID aquí, y vamos a ir más allá en él a continuación. Pero por ahora, tenemos nuestro ID instalado y podemos continuar. 5. 05.Extensiones de VSCode: Ahora que tenemos nuestro editor, instalaremos algunas extensiones. Así que las extensiones básicamente nos permiten obtener un mejor flujo de trabajo. Nos ayudó con algunos bugs para detectar algunas partes, con GID e incluso colorear texto. Entonces, realmente depende de ti. Pero en este caso, usaremos parte de PyTon y FAST API, e instalaremos extensiones que confiarán en ella Entonces, en nuestra base de extensión, necesitaremos todos estos paquetes Byton para ayudarnos a codificar mejor y codificar más fácilmente y soportar Hay pilones que tiene básicamente la inteligencia que puede predecir lo que queremos en la costa y también decir algunos errores en la costa o algunos opcionales para mejorarla También necesitamos Biton, así el lenguaje, el depurador para depurar nuestro cos, el entorno gestionado, así tendremos administración virtual o tendremos entornos virtuales para ejecutar nuestro entorno Python Por lo que también necesitarán el enlace para que el pilón cegue nuestro código para ver dónde queremos formatear nuestro código y mantenerlo igual entre todos los equipos en este caso Y estos son los paquetes que necesitamos, y podemos instalar todo este paquete con solo uno. Así que tenemos este paquete de extensión de Python que instalaremos todos los paquetes que vimos antes. Por lo que basta proceder con la instalación de éste. Instalará los demás con él, y te pediremos relos Entonces solo recargue el código de Visual Studio, y tendremos los paquetes necesarios 6. La mejor manera de tomar el curso: En esta conferencia, aprenderemos a sacar el máximo provecho y aprovechar este curso. En el software, especialmente cuando estamos aprendiendo, nos encontraremos con muchos bloqueos de carreteras, incluso cuando sigamos códigos junto con los videos. Esto sucedió por mal mecanografía, errores del instructor o más frecuentemente por software y paquetes que siempre están cambiando. Entonces, ¿qué debes hacer si te quedas atascado, entonces ya no puedes continuar con el curso? En primer lugar, no peniques, es normal. Esto le pasa a todos. Como no puedo responder a todas las preguntas, asegúrate de usar la pestaña de discusión de habilidades compartidas donde puedes encontrar estudiantes con el mismo problema que tú y puedes tener un hilo con todas tus preguntas y respuestas. Por lo que podemos ayudarle a continuar con el curso. A medida que el software cambia todo el tiempo, me aseguraré de dejar los recursos en las secciones de recursos en skill share, donde podrás descargar requisitos, empaquetar Jason y las versiones correctas de todos los paquetes que necesites para este curso. También te dejaremos las imágenes para que puedas descargar las imágenes que usaremos en este curso. Si sigues atascado, usa Google. Google en la solución a menudo devolverá muchos resultados, y también puedes aprender de esa búsqueda. Muchos alumnos tendrán el mismo error. Mucha gente en el software tendrá el mismo error, y eso puede ayudarte a resolverlo. Leer documentación. Muchas plataformas y paquetes o lenguajes de programación nos proporcionan documentación completa o tutoriales sobre cómo instalarlo y proceder con él. Entonces, si te apilan, por favor, repasa la documentación y sigue los pasos en ella, ya que podría ayudarte a continuar con el curso y abastecerte También puedes preguntar a la IA. Estas herramientas son de oído para ayudar con seguridad, y podemos proporcionar una solución rápida para el problema con mayor explicación. Te ayudará a resolver el problema además de explicar qué pasó y qué estabas haciendo mal. Si sigues estas recomendaciones, hará que tu experiencia sea más suave y de calidad general. Con todo esto aclarado, todos podemos seguir adelante. 7. Recursos: Este curso, vamos a utilizar algunos recursos, y para encontrar los recursos, simplemente necesitas bajar al curso y encontrarlo aquí. Entonces la carpeta zip contendrá enlaces, imágenes, y otros recursos necesarios que a lo largo del curso, vamos a insertar en ella. Así que siéntete libre de descargar esto y seguir el video. 8. 08. Configuración de FastAPI y Python: Entonces, en esta conferencia, vamos a explorar algunas tecnologías emocionantes que forman la base de nuestra aplicación de reconocimiento de objetos de IA. Entonces, específicamente, discutiremos BTN y API rápida y cómo estas poderosas herramientas nos permiten construir un backend robusto y eficiente en nuestra aplicación de IA Entonces comencemos con BTN. Muchos de ustedes ya están familiarizados con este versátil lenguaje de programación, pero recapitulemos por qué es tan crucial para nuestro proyecto PyTon a menudo se llama el lenguaje de la IA por buenas razones En primer lugar, su sintaxis es clara, intuitiva, facilitando la escritura y comprensión de algoritmos complejos. Esto es particularmente importante cuando se trata de conceptos de IA y aprendizaje automático. PyTN también cuenta con un rico ecosistema de bibliotecas y marcos diseñados específicamente para IA y aprendizaje automático Esto significa que tenemos una gran cantidad de herramientas a nuestra disposición para construir sofisticadas aplicaciones de IA. Además, la comunidad grande y activa de Python asegura que tengamos muchos recursos y tutoriales y soporte disponibles a medida que desarrollamos nuestra aplicación. Pero PTN no es solo para IA. Su versatilidad nos permite utilizarlo también para el desarrollo web. Análisis de datos, automatización y mucho más. Esto hace que una ventanilla única para muchas de nuestras necesidades de desarrollo, incluido el final de nuestra aplicación de reconocimiento de objetos de IA. Ahora hablemos un poco más sobre FASTEPI. Así que FASTEPI es un marco web moderno de alto rendimiento para construir APIs con PyTN Pero, ¿qué significa y por qué es importante para nuestro proyecto? En primer lugar, FAST API hace honor a su nombre. Es rápido. De hecho, es uno de los frameworks PyTN más rápidos disponibles Esta velocidad es crucial cuando tratamos con el reconocimiento de objetos en tiempo real, ya que necesitamos que nuestra aplicación responda rápidamente a las entradas de los usuarios. La API rápida también es increíblemente fácil de usar. Si se siente cómodo con PyTon, encontrará que puede ponerse al día rápidamente con Fast API Utiliza sugerencias de tipo PTN estándar, que no solo hacen que su código sea más fácil de entender sino que también proporcionan validación automática de datos Otra gran característica de FAST API es la generación automática de documentación. Esto significa que a medida que construimos nuestra API, FAST API crea automáticamente documentación interactiva para ella. Eso lo veremos más adelante en nuestro curso. Y esto es increíblemente útil para probar nuestra API para cualquier futuro desarrollador que pueda trabajar en nuestro proyecto. FASTEPI también soporta programación sincrónica, lo que permite a nuestra aplicación manejar múltiples solicitudes Y esto es vital para crear una aplicación de IA receptiva que pueda servir a múltiples usuarios simultáneamente. Entonces, ¿cómo se unen PyTon y FASEPI en nuestra aplicación que vamos a construir desde nadie? Así que vamos a desglosarlo. Usamos Python para manejar la lógica central de nuestra aplicación, y esto incluye imágenes de proceso, ejecutar nuestro modelo de IA para el reconocimiento de objetos y administrar el flujo general de datos a través de nuestro sistema. API de FAS en el otro extremo proporciona un marco para nuestra API web. Nos permite crear puntos finales con los que nuestro front-end pueda comunicarse Por ejemplo, podríamos tener un punto final que acepte y aplause la imagen y devuelva una lista de objetos reconocidos en esa imagen La API rápida nos ayuda a terminar con todas estas solicitudes entrantes y respuestas salientes. Se encarga de cosas como analizar la imagen entrante, los datos y formatear nuestros modelos de IA da como resultado una respuesta que nuestro front-end puede entender La simplicidad de PTN y la naturaleza intuitiva de FAST API también nos permiten desarrollarnos e interactuar rápidamente, lo cual es crucial en el acelerado mundo del de IA En conclusión, PTN y FASEPI forman un potente dúo que nos permite construir un back-end robusto, eficiente y escalable, back-end robusto, eficiente y escalable, para nuestra aplicación de reconocimiento de objetos de IA PTN nos proporciona las herramientas y bibliotecas que necesitamos para el desarrollo I, mientras que FASEPI ofrece un marco de alto rendimiento para exponer nuestras capacidades de IA al mundo A medida que avancemos en este curso, obtendrás finales en experiencia tanto con PyTon como con FAST API Al ver primero y todas estas tecnologías se unen para crear algo verdaderamente emocionante. Recuerda, las habilidades que estás aprendiendo aquí son solo aplicables para nuestro proyecto específico. La combinación de PyTon y API rápida está utilizando varias aplicaciones de inteligencia artificial y aprendizaje automático en todas las industrias Estás construyendo un conjunto de habilidades básicas que te servirá bien en muchos proyectos de características. En nuestras próximas sesiones, comenzaremos a escribir algún código y veremos estos conceptos en acción. Prepárate para dar vida a tu acto de reconocimiento objetivo de IA . 9. 09. Instalar Python en MacOS: Así que ahora entraremos en instalar PyTon en un entorno Mac OS Si no tienes un Mac OS, puedes saltarte esta conferencia e ir a la conferencia de Windows donde instalamos PyTon en Windows Machine Entonces en macOS, tenemos varias opciones para instalar PTN Entonces el primero que usaremos es instalar PyTon a través de Brew Así Brew es un gestor de paquetes o instalador de paquetes en macOS. Primero necesitamos abrir nuestra terminal e ingresar este comando. No te preocupes. Dejaré todos estos comandos en los recursos para que puedas copiarlo fácilmente. Entonces después de que tengamos este comando, solo tienes que pegarlo aquí y presionar Enter. Voy a solicitar sus contraseñas. Entonces solo ingresa las contraseñas. Y presionamos Enter para instalar el brebaje. Entonces ahora que tenemos nuestra brebaje instalada, podemos proceder con la instalación de PyTon En este caso, sólo voy a despejar mi terminal. Solo necesitamos escribir Brew Install PytnPressenter, y después de eso, y después de eso, A así que si todo salió bien, deberías ver algo como esto. Otra forma de instalar PTN y es la forma más común y asesorada de instalar el lenguaje PyTon es a través del sitio web oficial y luego descarga partes Entonces simplemente aquí, tienes descargas, no te preocupes, voy a dejar todos estos enlaces en los recursos. Simplemente encuentra la versión que necesita. Entonces en este caso, si pulsas este botón, descargará la última versión para tu sistema operativo Simplemente será un paquete para instalar. descargarás, lo instalarás, y PTN y el paquete harán todo por ti mismo La tercera forma de instalar PTN es a través de BM, por lo que PM nos permite instalar versiones específicas de PTN, y también lo instalamos a través de Brew, así que solo podemos decir Instalar Pi M. Así que simplemente damos clic en él. Después de que esté instalado, podemos consultar la lista PyM Install Si hacemos clic, nos dará la lista de pytes y versiones disponibles para instalar, así que simplemente presionamos Enter Y como puedes ver, tenemos muchas versiones de Python para instalar. Pero de todos modos, eliges el último siempre. Lo hemos instalado. Y después de tener instalado Python, solo podemos borrar mi terminal. Podemos ver el Python que tenemos instalado, y si todo va bien, deberías poder escribir Python tres porque Python tres es el último y es el que vamos a usar en este curso. Y solo hacemos la etiqueta Version, y vemos la que tenemos instalada. Así que presiona Enter. Y como pueden ver, actualmente, en mi sistema, tengo instalado Python 3.12 0.0 Entonces también deberíamos tener algo alrededor de esta versión. Y con esto, vemos que todo salió bien, y nuestro sistema tiene PyTon instalado 10. 10. Instalar Python en Windows: Ahora procederemos con la instalación de BTN en la máquina Windows Si está en nuestra máquina Windows, puedes saltarte esta conferencia e ir a la parte de MacBook donde instalaremos PyTNon Pero de todas formas, si tienes una máquina Windows y harás este curso a través de Windows, puedes continuar con este video. Por lo que la forma más recomendada de instalar PyTon en la máquina Windows es a través del sitio web oficial Dejaré el enlace enlace directo al sitio web en los recursos. Entonces básicamente, solo necesitas ir al sitio web de PyTon, descarga partes Y aquí tendrás la versión correcta para tu máquina. Simplemente presione el botón de descarga, descargue el paquete y luego continúe con la instalación. Entonces después de las descargas, haces clic en el icono que descarga y verás una ventana como esta. Tan importante tener en cuenta que necesitamos marcar esta casilla de verificación aquí, así que le pediremos a PTN que pase, y después de que esto esté marcado, solo puede instalar ahora También aquí, podemos deshabilitar el límite de longitud de ruta porque algunos sistemas no permiten muchos caracteres en el límite, pero esto puede causar problemas en nuestro sistema, por lo que solo podemos deshabilitarlo. Y luego tenemos una configuración exitosa. Después después de la instalación, podremos abrir nuestro símbolo del sistema para verificar la versión, solo hacemos Python y luego el indicador Version. Como podemos ver, hemos instalado correctamente PTN en nuestra máquina Windows Otra forma de instalar PyTon es abrir nuestra tienda de Microsoft y en la guerra de búsqueda solo hacemos PyTon y luego podemos ver PyTon tres y tenemos todas estas versiones Python del último establo, y luego simplemente presionamos G, y nos instalará el PTN A tener en cuenta, esta es la forma más fácil de instalar PTN, pero la menos personalizable 11. 11. Instalación y ejecución de FastAPI: Así que ahora crearemos nuestro servidor API rápido. Lo primero que haremos es crear una nueva carpeta donde guardaremos nuestras aplicaciones. Así que sólo puedo crear una nueva carpeta aquí. Puedes crear tus carpetas de la manera que quieras. No importa y lo que quieras, tampoco importa. Y ahora la llamaré mi app de aprendizaje. Entonces ahora que tienes nuestra carpeta, podemos abrir nuestra carpeta y nuevamente, crear una nueva carpeta donde la llamamos servidor. Y tenemos nuestras carpetas creadas. Así que de nuevo, necesitamos abrir esto con código de Visual Studio. Si tienes tu código de Visual Studio en el post puedes simplemente abrirlo así. Si no, lo abriremos a través de la terminal. Entonces abramos una terminal. Entonces ahora tengo mi terminal y voy a navegar a mi escritorio. Y en mi escritorio, tengo mi carpeta que se llama mi app de aprendizaje. Y dentro de esta carpeta, tengo, nuevamente, otra carpeta llamada server. Así que ahora puedo abrirlo con código de Visual Studio con este sencillo código, espacio, y luego punto. Y luego tenemos nuestro código de Visual Studio, y estamos dentro de la carpeta correcta aquí. Si por alguna razón el comando cos dot no abrirá tu Visual Studio, podemos arreglarlo muy fácilmente. Así que abre tu código de Visual Studio de cualquier otra manera. Así que simplemente haz clic en la aplicación donde la tienes en tu sistema y luego se abrirá, y luego podrás ver aquí el comando. Entonces y luego se puede ver el comando. Entonces en Macs, comando Shift, y B en Windows deberían ser Control, Shift B. Así que súplica ábrelo, y luego puedes buscar Shell Comando, y ahí ya lo puedes ver. Así que instale el código a la ruta de comando. Así que simplemente haz clic aquí y es posible que tengas que reiniciar tu terminal, y luego tendremos ese comando disponible para ti. Así que ahora dentro de nuestro servidor aquí, vamos a crear un archivo, y nuestro archivo se llamará punto principal pi o PY cuatro PyTon Entonces dentro de nuestro punto pi principal, agregaremos la primera ruta para la FastAPI Llamaremos a los primeros paquetes necesarios para la API FAST, así que solo podemos decir desde FAST API, importamos el paquete de API rápida. Entonces entonces tenemos que usarlo, y luego lo iniciamos en la constante, así arriba será rápido API y las llaves porque es una clase Bien, entonces ahora tendremos la primera ruta. Entonces nuestra primera ruta será una ruta get solo por ejemplo y demo de la API rápida. Entonces diremos agregar. Porque estamos llamando a una clase FastAPI, y luego decimos G, y luego la G, tenemos nuestras rutas o ruta raíz que será solo una barra diagonal Y luego dentro de nuestros métodos get, tendremos función sync. Entonces un sumidero es una función síncrona que se ejecutará de cualquier manera sin esperar el resto del código. Y entonces Df es lo que llamamos una función en Python, y decimos deroot Entonces el nombre de nuestra función, llaves abiertas y luego punto y coma, y luego tenemos el retorno y solo devolveremos un mensaje sencillo Entonces el mensaje estará justo dentro de las citas, y luego regresaremos al mundo bajo. Entonces, lo que es importante aquí en Byton siempre necesitamos esta identación para que se ejecute el código Si lo hacemos así, causará un error porque este bloque identado es realmente necesario Así que ahora para que nuestra app funcione, necesitamos crear un entorno virtual. El entorno virtual nos permite ejecutar Python dentro de un entorno cerrado. Y para eso, sólo tenemos que volver a entrar en nuestro proyecto. Sólo puedo abrir una terminal dentro del código de sal Studio. Entonces aquí, y luego voy a decir solo PyTon o Python tres. VM para entorno virtual, y luego VM punto. ¿Y por qué creamos un entorno virtual? Así que en entorno virtual El nos permite ejecutar versiones de PyTon e incluso nuestros paquetes sin ser influenciados por el sistema externo Así que creamos sólo una especie de encapsulación, de modo que el entorno para ejecutar esa versión de PyTon sin meterse o entrar en conflicto con Entonces aquí solo presionaré Enter. Y ahí se puede ver crea dos carpetas. Así que la caché caché los códigos Python y el entorno virtual, donde tenemos la aplicación ejecutándose, y luego en el futuro, los paquetes. Pero entonces todavía necesitamos ejecutar nuestro entorno virtual. Entonces para ejecutarlo, solo podemos decir fuente punto VM BMF Mac. Si estás en un Mac es BM si estás en el Windows es scripts. Entonces porque tenemos una carpeta BM, puedes consultar aquí. Diremos Bin, y luego activaremos el entorno virtual. Así que solo presiona Enter. Y como puedes ver, ahora estamos corriendo dentro del entorno virtual. Por lo que este entorno virtual ejecutará siempre la misma versión de Python ahí y el paquete se instala sin necesidad de cambiar cada vez que cambies en nuestro sistema, cual es suficiente para lo que quieres hacer aquí. Así que ahora por fin podemos ejecutar nuestra aplicación. Entonces en este caso, solo decimos rápido API, dev, y luego el archivo que queremos ejecutar. Entonces queremos ejecutar el punto principal PI, nosotros solo al punto principal py. Entonces PY para Python, y luego solo presionamos Enter y la aplicación se está ejecutando. Entonces aquí, puedes navegar a esta ruta, y eso es lo que vuelve nuestra ruta. Entonces el slash en este caso. Entonces si te das cuenta, aquí tenemos también esta API docs. Así que FAST API creará como doc inmediatamente, y podremos consultar todas nuestras rutas y probar nuestras rutas así como la documentación, solo por simpl ir a este RL aquí Entonces otra vez, si voy al mismo y luego un Doc tendremos un FastAPI swagger con Por ahora, solo tenemos la raíz pero al final, más abajo en el curso, aquí tendremos más rutas. Entonces aquí en los muelles, se puede ver, se puede probar la ruta Entonces, si sólo voy a ejecutar, tendremos ensayos que establecemos aquí. 12. 12. Otro ejemplo de ruta: Podemos buscar una ruta más compleja que podamos usar en nuestra aplicación. Entonces antes que nada, voy a pegar aquí sólo un simple objeto. Entonces este objeto, se puede ver que tenemos tres elementos con nombre y descripción. Por lo que esta será una especie de nuestro asistente de artículos en descripción que podemos navegar a una página que contiene esta información. Dejaré este objeto en los recursos para que solo puedas copiarlo y pegarlo en tu proyecto para que no tengas que escribir todo esto. Así que ahora, lo primero que tenemos que hacer es crear otro Grow como lo hicimos antes, solo lo haremos en entonces app. Así que de nuevo, nuestra aplicación Fast API, y luego decimos G y luego abrimos llaves, y vamos a querer que nuestra ruta se llame items Luego slash, y luego para cada artículo, tendremos el artículo Por lo que vamos a pasar esto un argumento para obtener cada uno de estos ítems. Entonces otra vez, necesitamos definir nuestra función y esta función podemos nombrarla get item y luego pasaremos nuestro Im ID que va a ser, en este caso, integer. Entonces aquí sólo estamos asumiendo el tipo. Siempre seremos un entero. Entonces simplemente cerramos aquí, entonces podemos crear una variable llamada item, que serían los itens Entonces nuestro objeto get get y obtendrá ITNs ID. Entonces pasaremos ese ID de Ian en nuestra función, y luego obtendremos exactamente el mismo entero de nuestro objeto. Y luego solo hacemos un poco de manejo de errores. Entonces, si ITN no es, así que si no existimos, podemos simplemente devolver un simple error Y entonces decimos ITN no encontrado. Y el conjunto será error 04. Entonces 404 suele ser el error no encontrado en el desarrollo de la aplicación. Pero si todo sale como se esperaba, solo devolveremos el artículo. Así que solo devolveremos el artículo correcto. Así que ahora podemos guardar y volver a nuestro navegador. Y aquí como vemos tenemos nuestra primera ruta que creamos, y luego solo necesitamos navegar dos elementos. Y si presionamos Iones, no encontramos porque necesitamos establecer el entero como vimos en nuestra función. Entonces otra vez, otro slash, vamos a conseguir el artículo número dos, y no hay diversión porque me olvidé de agregar una porción aquí Por lo que deberían ser los INs de barras de raíz y luego el ítem 80. Entonces, si vuelves a nuestro navegador, solo necesitamos refrescar esto y aquí lo tenemos. Entonces nuevamente, nuestro punto dos de nuestra lista. Podemos ver los otros dos. Entonces el ítem uno, el ítem uno es correcto, y luego el ítem tres. Así cohost 800 y luego slash DGS. Tenemos, nuevamente, nuestro PI Swagger más rápido, y aquí tenemos una nueva ruta Así que sólo podemos abrirla aquí. Tenemos nuestros parámetros de que nuestra ruta solo toma el ID del artículo, y luego el ID del artículo será uno, dos o tres, como lo configuramos antes, y podemos probarlo. Se abrirá la caja para que probemos, y podemos volver a decir el punto dos. Y si decimos ejecutar, obtenemos artículos a nuestra ruta y luego el ítem correcto. Así que vamos a intentarlo de nuevo. Tan claro y luego di el ítem uno, ejecuta, y yo soy uno, el correcto. Ahora bien, si establecemos el ítem cuatro, como probamos en nuestra rousa antes, solo podemos ejecutar de nuevo y obtenemos el mensaje de error 13. 13. Aplicación para correr con Uvicorn: Ahora instalaremos UVcorn en nuestra aplicación. UVcorn es ASGI por lo que una interfaz de puerta de enlace de servidor síncrona que está diseñada para ser muy rápida para aplicaciones pyting para serle Pero ahora me preguntas, ¿por qué necesitamos esto? Ya tenemos nuestro servidor funcionando con una API rápida normal. Bueno, entonces UVcorn nos ofreció más beneficios por la velocidad Fast API se construye sobre los estándares ASGI, y UVcorn es totalmente compatible con los estándares, lo que garantiza una integración perfecta Además, UVcorn tiene un soporte sincrónico. Python como características sincrónicas que permiten un manejo eficiente y solicitudes simultáneas UVcorn también está listo para la producción y puede manejar cargas e, lo que lo hace adecuado tanto para el desarrollo como para el despliegue También nos permite configurar fácilmente los ajustes de UVcornn. Por lo que los beneficios para las aplicaciones web con UVcorn son los mejores tiempos de respuesta, escalabilidad y está preparado para ser utilizado con Python moderno Ahora, para instalar UVcorn en nuestra aplicación, simplemente volvemos a los códigos de hysal Studio Podemos detener nuestro servidor con control C, paramos nuestro servidor, y luego puedo borrar nuestro servidor para que sea para que ustedes puedan verlo mejor. Y entonces sólo podemos decir PIP. Por lo que PIP es el gestor de paquetes de PyTon, instalamos nuestros paquetes en PyTon instalamos Ahora solo podemos presionar Enter y dejar que el paquete se instale. Así que finalmente, que instalemos nuestro UVcorn, podemos ejecutar la aplicación con él. Entonces en este caso, solo decimos UVcorn columna principal y luego arriba, y luego vuelve a cargar Por lo que este indicador de recarga permitirá que la aplicación se vuelva a cargar cada vez que ocurran algunos cambios También podemos agregar más opciones al cable UVcord. Entonces digamos que queremos echarlo en un puerto diferente. Entonces solo decimos la aplicación principal de UVcorn, y luego podemos decir puerto Entonces actualmente estamos ejecutando el puerto 8,000 y solo podemos decir 80, 80, y luego nuestra aplicación se ejecutará en este puerto. Pero por ahora, simplemente lo ejecutaremos normalmente con una bandera de recargas. Bien. Bien, entonces ahora, nuestra aplicación se está ejecutando con UVcorn. Vamos a verlo en un navegador. Y tenemos nuestros documentos y nuestra aplicación normal funcionando. Y probemos Ins punto uno. Y parece que todo salió bien, y ahora tenemos nuestra aplicación ejecutándose con UVcorn 14. 14. Instalación de paquetes con requisitos: En la conferencia anterior, vimos el paquete Twinstyle usando Así que usa paquetes BIP Twinstyle y Byton. Pero imagina lo siguiente. Imagina que tenemos un equipo grande y todo el equipo debería usar los mismos paquetes sin ser instalados uno por uno manualmente. Además, se prefieren las mismas versiones, por lo que la aplicación se ejecutará igual para todos. Entonces, ¿cómo podemos hacer eso? Entonces en FAST API, podemos agregar el texto de requisitos, y luego la aplicación instalará todos los requisitos a través de ese archivo. Entonces aquí, en nuestra barra lateral, creamos un nuevo archivo y lo llamamos requisitos texto. Entonces lo guardamos, y luego tenemos un archivo de texto. Y para eso, podemos agregar los paquetes aquí. Digamos, por ejemplo, nuestra API rápida, y luego la versión del paquete. Entonces en este caso, tenemos el 0.1 15 y el cero. No te preocupes. Dejaré este expediente en los recursos. Y por favor, la forma preferida es copiar el contenido de ese archivo y pegarlo aquí porque las versiones pueden ser diferentes para ti en el momento que estás viendo este curso. Y así, nos aseguramos que ejecutes la aplicación exactamente como yo. Entonces aquí tenemos el número de versión, pero digamos que queremos usar la última versión. En este caso, solo necesitamos tenerlo como API rápida, y luego la gente obtiene el paquete más reciente. Entonces ahora usaremos las versiones actuales. Entonces voy a decir FAST NPI es cero punto 115 punto cero. Entonces también usaremos flujo tensor que es la versión 2.16 punto uno Puedes saltarte esta parte y simplemente copiar los archivos que mencionamos antes. También necesitamos un nPi 1.26 punto cuatro. También utilizaremos el CV abierto Piton 410, punto cero punto 84 Y luego la versión UVcorn que instalamos antes. Pero nuevamente, así cero punto 30 punto seis, y luego guardamos el archivo. Entonces ahora, ¿cómo instalamos todo a la vez? Así que de nuevo, en nuestro terminal, simplemente paramos el servidor con Control C, y luego solo podemos decir PP Instalar aire cuatro requisitos, y luego nuestros requisitos punto texto. Ahora si presionamos Enter, instalará todos los paquetes. Entonces, solo presionemos Enter. Y entonces lo tienes. Entonces todos los paquetes están instalados, y luego podemos simplemente ejecutar, de nuevo, el UVIcorn main up, y luego Entonces como puedes ver, todo salió sin problemas y ahora todos nuestros paquetes están instalados. 15. 15. Qué es React y TypeScript: Imagina que estás construyendo tu casa. Desea que sea resistente, eficiente y fácil de modificar si necesita agregar una habitación o cambiar un diseño. En el mundo del desarrollo web, react y mecanografiado son como las herramientas avanzadas y el conjunto de planos te ayudan a construir Entonces comencemos con reaccionar. Piense en reaccionar como un maestro carpintero que se especializa en crear componentes reutilizables En lugar de construir su habitación desde cero cada vez, React le permite crear piezas modulares como paredes preconstruidas, ventanas o incluso habitaciones enteras. Que puedes usar una y otra vez. Esto no solo ahorra tiempo, sino que también garantiza la consistencia en toda su casa o aplicaciones web. React hace que su sitio web sea interactivo y dinámico. Es como tener una casa donde las luces se encienden automáticamente cuando entras a tu habitación o la temperatura se ajusta por cuenta propia. En una aplicación de reacción, cuando haces clic en un botón o ingresas algún texto, la página puede actualizarse instantáneamente sin necesidad de recargarla por completo Esto crea una experiencia de aplicación fluida para los usuarios. Ahora hablemos de mecanografiado. Si React es nuestro maestro carpintero, mecanografiado es como tener un asistente súper inteligente que doble verifica todo antes de que se construya TypeScript es un lenguaje de programación que se basa en Javascript, agregando una capa adicional de seguridad y claridad a su Imagina que estás tratando de encajar una clavija cuadrada en un agujero redondo. Simplemente no funciona, ¿verdad? El mecanografiado evita este tipo de errores en tu código antes de que Es como tener un chico que se asegure de que estás usando el tipo de material adecuado para cada parte de tu casa. Si accidentalmente intentaste usar una ventana donde debería estar una puerta, mecanografiada te avisará incluso antes de comenzar a construir Esto puede sonar complicado, pero en realidad te hace la vida más fácil a la larga. Con el mecanografiado, captas errores antes, tu curso se vuelve más autoexplicativo y el trabajo en equipo se vuelve más suave porque todos pueden entender el plano con Cuando se combinan reaccionar mecanografiado, obtienes lo mejor de ambos mundos Tiene el poder de construir aplicaciones web interactivas dinámicas con componentes reutilizables al mismo tiempo que tiene la red de seguridad que atrapa posibles errores y hace que su código sea más robusto. A medida que los estudiantes se sumergen en el desarrollo web, piensan que el aprendizaje reacciona y mecanografiado es ganar superpoderes React le brinda la capacidad de crear interfaces de usuario flexibles y eficientes. Wild TypeScript te proporciona visión de rayos X para detectar y prevenir problemas antes de que Juntos, te mantienen con las herramientas para construir aplicaciones web modernas y confiables que pueden soportar la prueba del tiempo y escalar el crecimiento de tus proyectos. Entonces, en este curso, usaremos este tanto react como mecanografiado para construir nuestra aplicación front-end 16. 16. Instalación de Nodejs: Así que ahora instalaremos Nojs. Pero, ¿qué no es JS? Por lo que NOJs es una plataforma cerrada de código abierto que permite que JavaScript desarrolladores usen y ejecuten entornos de tiempo de ejecución de Así que instalar no Js es muy fácil, solo puedes ir tonjs.org, y aparecerá en el botón hacia abajo para Y esto ya tiene la versión de su sistema. Entonces, si estás ejecutando el entorno Windows, las descargas serán para el sistema Windows. Si estás ejecutando un MAC, también será para macOS. Entonces solo necesitas descargar, asegúrate de que estás usando LTS, y para nuestro proyecto aquí, usaremos siempre la versión mayor a 20 Entonces, al momento de este curso, debería estar bien. Así que solo descarga no Js a donde más te convenga y simplemente ejecuta el archivo e instala no Js. Después de completar la instalación de NGS, puede abrir un terminal para verificar la instalación Puede que tengas que reiniciar tu sistema, pero rara vez sucede. Entonces en nuestro terminal, podemos verificar la versión de NGS simplemente escribiendo nota Versión Dash Dash y aquí puedes ver que estoy ejecutando la última, pero que como características avanzadas, realmente no la necesitamos, la usas aquí o realmente no la necesitamos aquí. Entonces en este caso, solo puedes usar el 20, el LTS que es común y mejor para el usuario habitual Así que vamos a revisar tu versión. También puedes verificar tu versión usando el atajo, así que no V. Lo mismo. Para que puedas ver tu versión de no Js aquí. 17. 17. Crea una aplicación de First React con Vite: Así que ahora podemos empezar a crear nuestro front end. Y para crear nuestro front-end, vamos a usar VT. Entonces T es una herramienta que nos permite crear fácilmente aplicaciones con react, view, etc. Incluso aplicaciones JavaScript vainilla. Su marco nos permite un andamiaje rápido de las aplicaciones y también una rápida construcción y renderización Entonces para crear una aplicación, así volvemos a nuestro terminal en nuestro terminal, estamos en nuestra carpeta servidor. Así que solo vamos un nivel abajo, así que cd punto punto. Y luego estamos en nuestra carpeta de proyectos, y luego solo podemos hacer NPM, crear t y luego solo decimos a más tardar para que podamos instalar la última versión Entonces solo presionas Enter, y luego decimos que sí. El nombre del proyecto, lo vamos a nombrar como reconocimiento de objetos un nombre de Packers puede permanecer igual. Y luego tenemos todas las opciones con las que podemos construir nuestra aplicación. Entonces en este caso, solo vas a elegir el de reaccionar, usar las teclas de flecha para navegar, reaccionar, y luego también vamos a usar mecanografiado, y nuestra aplicación está instalada Así que ahora podemos navegar a la carpeta de la aplicación. Así que mira la aplicación de reconocimiento de objetos. Entra, y luego lo vamos a abrir con nuestro código de Visual Studio, así código, y luego punto. Y ahora que abrimos nuestra aplicación con código de Visual Studio, necesitamos instalar nuestros paquetes. Así que ahora abriremos nuestra terminal dentro de nuestro código de Visual Studio. Y si por alguna razón no aparece la opción de abrir el terminal en tu configuración ahí, solo puedes decir Shift Control P en Windows o Comando, Shift P en Mac. Y luego tienes un desplegable y solo puedes escribir Toggle. Terminal. Y aquí tenemos la opción de abrir la terminal, y solo tienes que pulsar Enter, y la nueva terminal aparecerá para ti. Y estamos dentro de nuestra carpeta de proyectos. Podemos simplemente decir NPM install para instalar el paquete o NPMI como corto Así que instalemos el paquete y dejemos que se ejecuten. Entonces ahora los paquetes están instalados. Podemos ejecutar nuestra aplicación. Y en este caso de WVD, solo a NPM corremos sordos para ejecutar el modo de desarrollo como podemos ver aquí En nuestro paquete Jason, cómo ejecutar la aplicación en modo muerte, cómo construir nuestra aplicación, ejecutar líder e incluso previsualizar el modo Has Build. Entonces cerremos esto y ejecutemos la ejecución de NPM Def. Después de que se haya construido, verá que tiene nuestro local como donde se ejecuta la aplicación. Así que vamos a copiar esto e ir a nuestro navegador, y luego vemos que tenemos nuestra aplicación VID y reaccionar ejecutándose. 18. 18. Componente y estilo de control de imagen: Ahora para el front-end principal, podemos volver al costo de Visual Studio, y dentro de nuestra fuente, tenemos esta app dot TSX, ese es nuestro punto de entrada, y aquí no vamos a necesitar algunas cosas Simplemente cerraré o pondré termot bit abajo y no necesitamos este te Y podemos borrar todo lo que esté dentro de nuestra devolución. Además, como ves, estos paquetes no se utilizan, por lo que también podemos eliminarlos. Y por ahora, lo dejamos así. Entonces B aquí, vamos a crear una nueva carpeta, entonces icono aquí, y lo llamamos componentes dentro de nuestros componentes porque nuestra aplicación es muy simple, en el lado frontal, podemos simplemente crear un componente y luego crear un nuevo archivo y lo llamamos control de imagen punto tsx para el mecanografiado Y debido a que también necesitamos CSS, podemos crear un nuevo archivo y llamarlo simplemente index dot CSS. Así que ahora en nuestra espalda a nuestro componente, el control de imagen TSX, necesitaremos crear nuestra plantilla Entonces para eso, primero, vamos a importar nuestro archivo CSS, así decimos import. Indexe CSS, y luego creamos nuestros componentes, así digamos costo. Y nuestro componente será solo control de imagen. Y como componente funcional, creamos la función R para ello, y luego simplemente devolvemos algo dentro, que por ahora puede ser solo un div. Entonces debido a que nuestro control de imagen aún no se usa, necesitamos exportarlo para que se use en UpttsX Digamos exportar control de imagen predeterminado. Yo lo guardaré. Y luego en nuestro PTSx a nuestro regreso, podemos usar el componente para crear digamos imagen Control. Y como puedes ver aquí, mi Visual Studio ya dice importar control de imagen para componentes, control de imagen. Y luego como puedes ver, acabas de importar el control de imagen de nuestra carpeta de componentes y de nuestro componente. Entonces las llamadas y app dot TSX se hace por ahora. Y podemos volver a nuestro componente principal porque si vas a volver al navegador, ves que está vacío porque aún no estamos renderizando nada. Así que una y otra vez, porque es un simple at app, solo voy a pegar algunos CSS para nuestra aplicación. Dejaré este archivo CSS en los recursos para que simplemente podamos copiarlo y pegarlo aquí. Así que solo CSS estándar para nuestros contenedores y nuestro contenedor de imágenes. Yo solo lo guardaré, y luego tenemos acceso a esas clases dentro de nuestro componente. Y primero, crearemos nuestros contenedores para que podamos empezar a ver algo en la app. Entonces usamos este DIF y porque vamos a usar más de un contenedor y más de un DV aquí en la plantilla, necesitamos un soporte. Entonces abre brankets y solo puedo cortar esto y copiarlo aquí, y este div tendrá el nombre de clase de container Entonces, desde nuestro archivo CSS, tenemos esta clase contenedora. Entonces continuando en ese div, tendremos otro div que es nuestro contenedor interno. Entonces nuestro nombre de clase será contenedor interno. Por ahora, sólo podemos salvarla. Tengo un errata aquí, entonces es contenedor. Si no, la clase no va a funcionar. Entonces aquí sólo puedo poner un simple Ptag para ver nuestra aplicación funcionando De vuelta a nuestro navegador, vemos ya corriendo aquí apareciendo en nuestra pantalla en nuestra aplicación, que significa que todo es correcto. 19. 19. Configuración de nuestras variables de estado: Entonces lo primero es lo primero, necesitamos establecer nuestras variables de estado para poder usarlas dentro de nuestra lógica dentro de nuestro componente. Entonces vamos a necesitar primero la variable de estado de la imagen, por lo que decir costo, imagen, y luego decir establecer imagen. Y esta imagen será de cadena. Entonces, viniendo de nuestro backend, solo tenemos cadena para imagen, y decimos use state y luego abrimos corchetes Ahora necesitamos importar estado de uso para que podamos usarlo. Entonces dejamos abajo el índice de importación ESS, y encima, decimos import, use state, y esto viene de react. Ahora podemos guardar, y necesitamos establecer el tipo de nuestra imagen. Entonces aquí por ahora, no tenemos ningún tipo para nuestra imagen, nada cuando arranca el componente. Entonces queremos que esta imagen sea string como un tipo O null porque al principio no tenemos imagen, así que puede ser nula y establecemos el estado inicial en null. También necesitamos tener una variable de estado para mantener el archivo que vamos a plod al front end y luego al back-end para que podamos obtener la predicción y los resultados Entonces nuevamente, costo y tenemos el archivo selectivo, y decimos conjunto seleccionado. Archivo. Y nuevamente, usa el estado. Y en este caso, necesitaremos un tipo especial que sea archivo que tenga todas las propiedades de los archivos. Y también queremos que sea nulo, o nulo. Entonces esto borra esto no necesitamos, y luego simplemente cerramos los corchetes y establecemos el estado inicial como nulo porque al principio no tenemos ningún archivo seleccionado. Y ahora para continuar en nuestro front end, también necesitamos establecer tres variables más que van a ser cambiadas posteriormente. Pero de todos modos, lo configuraremos ahora para que veas cómo funciona. Entonces en este caso, necesitaremos una predicción. Pero en este caso, no necesitamos ser variables de estado. Podemos simplemente establecer una predicción const say normal. Eso es un array y nos fijamos en array vacío. También necesitamos ese cargando. Entonces cuando nuestra aplicación se está cargando, y este caso es un lingote, y establecemos el verdadero falso Y el último será error. Entonces digamos error de costo, también booleano, así que a word false y luego también lo establecemos Entonces estas tres variables irán posteriormente a nuestro gancho donde vamos a debajo las solicitudes y se establecerán en la plantilla. Pero por ahora, simplemente lo configuraremos así para que pueda usarse en nuestra plantilla. 20. 20. Plantilla de cuadros de predicción e imagen: Continúa ahora creando nuestro front-end básico donde tenemos el botón para aplaudir la imagen, una caja donde la imagen se renderizará Y también el número de predicción, simplemente borraremos esta P aquí, y luego decimos llaves abiertas y decimos si no tenemos imagen Entonces, si la imagen es nula o indefinida o está vacía, solo decimos imagen. Y N, digamos, abre una B, y dices, por favor aplausos tu imagen Así que vamos a guardarlo y a ver qué pasa en el front end. Y tenemos un mensaje que dice: Por favor sube tu imagen. Hasta el momento tan bueno. Continúe aquí. Pero si tenemos una imagen, venimos aquí una y otra vez, llaves rizadas y decimos que la imagen existe, así que solo abrimos ahora llaves y un DIV y este Dv amaba el nombre de clase de contenedor de imagen de nuestro archivo CSS Y luego abrimos la etiqueta de imagen que la fuente de nuestra variable de imagen. Por lo que aquí se puede ver ya aparece resaltado. Entonces significa que está en uso. En solo podemos decir algo así como aplausos y el nombre de la clase será la imagen, nuestra clase CSS, y luego cerrar la etiqueta Y simplemente guardamos nada va a aparecer en el front end porque todavía no tenemos imagen. Entonces continuando dentro del mismo contenedor, vamos a tener nuestra pervición Entonces decimos, nuevamente, dice Curlbra, si la previción existe, tomaremos el primer ítem de nuestra matriz, y verás por qué más adelante, pero por eso lo configuramos como dice Curlbra, si la previción existe, tomaremos el primer ítem de nuestra matriz, y verás por qué más adelante, pero por eso lo configuramos como una matriz. En este caso, está vacío. Y nuevamente, abrimos ases y abrimos un div div con un nombre de clase de cuadro de predicción. Por lo que nuestro cuadro de predicción contendrá la información proveniente de la propia producción. Cerrar la Div y dentro, tenemos una PTA con un nombre de clase de texto de categoría va de nuevo y el texto de categoría tendrá el texto proveniente de la predicción, que en este caso, abrimos de nuevo las llaves, y esto vendrá del backend Entonces se renderizará en nuestro back-end en nuestra solicitud. Y tenemos la predicción desde el cero esto sigue siendo un error porque todavía no tenemos un tipo definido ahí, pero está bien. Categoría de predicción, y queremos todo en mayúsculas. Entonces dicen dos mayúsculas. Y para que N para que estos errores desaparezcan en tu aplicación, solo podemos volver a nuestro conjunto constante. Queremos una variedad de cualquiera. Por lo que cualquier tipo se utilizará aquí. Este es un error con DST B con una lenteja que no permite ningún tipo, pero esto se cambiará más adelante No importa para nulo. Y así, aquí no tenemos ningún error. Pero continuando año, nuevamente, abajo, abrimos otra PTA que tendrá el nombre de clase de precisión de categoría. Entonces será la precisión de la predicción. Eso es atacado con la imagen, y luego cerramos, y luego abajo otra vez, diremos Clibrass vuelve a abrir corchetes y decimos predicción Nuevamente, desde cero desde el primer elemento de nuestra matriz, queremos una puntuación. Veces uno y porque queremos crear como número porcentual, y luego decimos dos fijos uno. Entonces porque va a llegar un gran número y queremos convertirlo como un valor porcentual. Entonces fuera de las caribras decimos porcentaje, porcentaje, precisión Pero esto se mostrará más adelante cómo funciona exactamente. Entonces ahora te estás preguntando qué está pasando en nuestro front end. Así que vamos a ver. Entonces todavía nada porque no tenemos ninguna imagen que mostrar. Ahora estoy viendo que el contenedor está un poco a la derecha, y esto se debe a que establecemos el ancho para que podamos volver atrás. Y en nuestro índice CSS, solo eliminamos la w y la guardamos. Y ahora es exactamente en el medio. Así que volviendo a nuestro control de imagen, necesitamos establecer el contenedor para el error. Entonces después de este div, que nos nuestra predicción y las llaves rizadas también para nuestra predicción, damos algo de espacio aquí, y decimos error, de nuevo, llaves y luego error, P, y luego estas personas tendrán un nombre de clase de Y luego lo cerramos, y luego al interior, nos encanta el error que viene entonces de nuestra petición Por ahora, es simplemente falso. No debería ser falso, sino que debería ser una cadena en su lugar y dices, cadena diremos que no hay error. Sólo come en un poquito aquí. Después de eso, tendremos nuestro insumo para subir la imagen. 21. 21. Entrada de carga de imágenes: Así que ahora para nuestra entrada, donde subiremos la imagen directamente desde nuestro sistema a la aplicación. Después del error aquí, abriremos la etiqueta de entrada, por lo que la entrada. Y el tipo de esa entrada será un archivo porque vamos a subir un archivo del sistema. Entonces en este caso, archivo de imagen, y decimos sobre el cambio, eso tendrá el evento de cambio de nuestra entrada. Pero ahora, en este caso, acabamos de establecer la función vacía, así que no tenemos ningún error. Y entonces decimos aceptar la imagen. Imágenes en este caso, queremos todo tipo de imagen ahora. Entonces solo pon una estrella y se aceptarán todos los tipos de imagen. Y luego cerramos la etiqueta de entrada. Justo abajo, queremos botón donde procederemos con la inserción de la imagen. Entonces botón y decimos onClick. Y nuevamente, debido a que aún no tenemos la función para el clic, simplemente crearemos una función vacía y el decir luego lo deshabilitamos se deshabilitará este botón cuando no tengamos un archivo select. O si se está cargando. Entonces, si no tenemos ningún archivo de la solicitud de que se está cargando la aplicación, se deshabilitará el botón. Y luego cerramos el botón, y luego dentro del botón, tenemos el texto que necesitamos, y el texto cambiará dependiendo del estado de la aplicación y los aplausos de la imagen Entonces otra vez, caribrs decimos, si se está cargando, diremos aplausando Si no es una vestimenta y tenemos una imagen, queremos que el botón diga que esta identificando o identificando la imagen para que podamos tener la predicción. Pero si no, queremos que el botón diga un plosimage y las funciones serán distintas Entonces ahora si guardamos y vamos a nuestro navegador, decimos ya aquí que tenemos algo arriba en la pantalla. Entonces aquí tenemos el botón para elegir el archivo. Entonces nuestra entrada Y si haces clic, se abre una ventana donde podremos comprobar nuestras imágenes y el botón Blosimage está deshabilitado porque no tenemos ninguna Aquí no aparece ningún error porque lo configuramos como un error de lingotes que existe, y en nuestro caso, realmente existe Pero si pones, digamos, null da un error porque necesita ser string o null no aparecerá. 22. 22. Explicación de Tensorflow SSDMobileNetV2 y COCO DataSet: Ahora vamos a echar un breve vistazo a los paquetes o los modelos de aprendizaje que vamos a usar en el front-end. Entonces, antes que nada, flujo tensor es desarrollado por Google, y es una poderosa biblioteca de software de código abierto para el aprendizaje automático y la inteligencia artificial Es la base que permite a las computadoras aprender de los datos y tomar decisiones. ingenieros e investigadores utilizan el flujo tensor para construir y entrenar redes neuronales para tareas como el reconocimiento de imágenes, procesamiento del lenguaje natural y, en nuestro caso, la detección de objetos El SSTAm de A net versión dos para usar aquí es una arquitectura de red neuronal específica diseñada para la detección de objetos Es una ingeniosa combinación de dos conceptos. Así SSD, detector de disparo único y Red Móvil Versión dos. SSD permite que una red detecte múltiples objetos en una imagen y en un pase directo, haciéndolo rápido y eficiente. versión dos de Mobile Net es una estructura de red liviana que está optimizada para dispositivos móviles y navegadores, lo que garantiza que el modelo pueda ejecutarse rápidamente, incluso en teléfonos inteligentes, sistemas integrados y computadoras de almacenamiento. El coco, los objetos comunes en contexto, el dataset Coco es una gran colección de imágenes que sirve como libros de texto para entrenar modelos de detección de objetos Contiene más de 330,000 imágenes con más 2.5 millones de instancias etiquetadas de objetos en 80 categorías Estas categorías van desde artículos comunes como autos y perros hasta objetos más específicos como semáforos y raquetas de tenis Cuando se combinan, estos tres componentes crean un potente sistema para la detección de objetos del mundo real. TensorFlow proporciona las herramientas y el entorno para construir y entrenar el modelo de la versión dos de la red móvil SST utilizando el El resultado es un detector de objetos rápido y eficiente. Eso puede identificar y crear rápidamente múltiples objetos en imágenes o transmisiones de video, incluso en dispositivos móviles. Esta tecnología tiene numerosas aplicaciones prácticas. Se utiliza en vehículos autónomos para identificar señales viales y peatones y sistemas de seguridad para detectar objetos o comportamientos sospechosos En retail, para la gestión del entorno, e incluso en aplicaciones de realidad aumentada para reconocer e interactuar con objetos del mundo real La velocidad y la eficiencia de la reversión de la red SSD Mobile combinada con una capacitación integral del conjunto de datos Coco, hacen particularmente útil para aplicaciones en tiempo real donde la detección de objetos rápida y precisa es crucial 23. 23. Agregar el modelo de COCO de MobileNetV2 SSD: Así que ahora podemos comenzar a agregar el modelo de predicción y el conjunto de datos a nuestra aplicación. Así que vamos a utilizar este modelo de aprendizaje de flujo tensor con un conjunto de datos de Coco Entonces dejaré este enlace en la descripción. Simplemente necesitas navegar a esta página de Github, y luego vamos a usar este modelo exacto aquí. Así que el SSD, red móvil Vt Coco. Entonces vamos a simplemente hacer clic en el enlace, y luego probablemente tengas una advertencia de seguridad, pero solo continuarás al sitio. Entonces después de descargar el modelo, tienes un archivo zip como este. Nosotros sólo lo extraeremos. Y luego nos encanta la carpeta que queremos. Simplemente copie la carpeta a nuestro proyecto de servidor, así que en la carpeta del servidor que creamos antes para nuestro back end. Y luego aquí solo necesitamos editar el título y eliminar la fecha de creación y simplemente dejarla Coco al final. Así que ahora podemos ahorrar para luego volver a nuestra aplicación. Así que tenemos donde tenemos nuestro código para nuestro servidor funcionando, así nuestro back end. Y podemos ver aquí ya tenemos nuestro modelo integrado, y ahora todavía tenemos que pasarlo a nuestra aplicación. 24. 24. Carga de modelos preentrenados en una aplicación: Así que volviendo a nuestro código, lo primero que hacemos es simplemente eliminar alguna parte del código. Podemos simplemente dejar la ruta raíz solo para probar y eliminar todo lo demás y luego guardar, e iremos a importar el conjunto de datos que acabamos de agregar a nuestro proyecto. Entonces lo primero es lo primero, necesitamos crear el entorno para ello. Por lo que tendremos que importar sistema operativo para que podamos detectar nuestro sistema operativo y habilitar el acceso a todos los puntos. Entonces después de eso, solo hacemos el sistema operativo que importamos, luego dot environ Y luego aquí abriremos las llaves cuadradas y luego estableceremos nuestro flujo tensor para habilitar todo en mayúscula, así habilitaremos una D y N, óptimos Ds, y pondremos estas Entonces esto es para permitir que el ambiente ejecute el flujo del tensor más tarde Entonces entonces tenemos que importar el flujo del tensor también. Y para eso, lo haremos aquí arriba. Así que solo diremos import TensorFlow tiene flujo tensor. Recuerda que para instalar el flujo tensor antes y añadimos una explicación sobre el video anterior Entonces tenemos el flujo tensor importado. Necesitamos establecer las variables para poder usar este modelo en nuestro proyecto. Justo después de establecer nuestro entorno, tenemos que llamar primero a nuestro modelo. Así que solo creamos una variable de entorno en este caso, con mayúsculas, modelo ahí. Y aquí queremos llamar al modelo guardado y tamaño de nuestra carpeta de red móvil que antes estaba desamparada Entonces en este caso, solo abrimos cotizaciones y decimos SSD, y ella estaría en letra minúscula. Entonces solo decimos, SS D. Red móvil Versión dos, Coco salvó modelo. Por favor, asegúrate de que esta ruta sea exactamente como escribiste aquí porque recuerdas que acabamos de eliminar la fecha, pero si dejaste la fecha, necesitas agregar el resto aquí. Entonces necesitamos establecer el modelo del flujo del tensor. Entonces decimos modelo y luego TF guardó las cargas del modelo. Para ser una cuerda, y ahí vamos a perder nuestro hocico Entonces el directorio de nuestro modelo. Por lo que esto asegura que estamos ejecutando el modelo de producción. Así que nuestro modelo pre generado viene del flujo tensor y la red móvil V dos en esta variable Y entonces necesitamos firmar el modelo a inferir, que podamos tenerlo sirviendo como predeterminado en este caso, y hay muchas opciones, pero en este caso, vamos a hacerlo por defecto Entonces solo digamos inferir nuestra variable y luego modelar firmas de puntos y luego abrir corchetes, y decimos servir por defecto. Así que guárdala. Y ahora hemos perdido nuestro hocico en variable en nuestra aplicación, y a continuación vamos a ver cómo los vamos a usar. 25. 25. Función de inferencia de ejecución: Y ahora estamos listos para crear nuestra primera función, así que nuestra función de interferencia de ejecución. Y esta función está diseñada para realizar la detección de objetos en la imagen dada usando el flujo tensor de pre pérdida que agregamos aquí Esta función se encargará de preparar la imagen en el formato correcto para el modelo y luego ejecuta la interferencia y luego devuelve los resultados. Luego también devolvemos caja con ella que amamos los objetos como cajas delimitadoras, etiquetas de clase y la puntuación de confianza que vamos a usar en nuestro front-end Y luego estas funciones sirve puente entre la imagen en bruto que vamos a subir y el modelo de detección de objetos que agregamos aquí. Entonces para comenzar eso, solo comenzaremos creando una nueva función así que la función Python, usamos DF luego simplemente la llamaremos ejecutar inferencia o ejecutar inferencia Y vamos a tomar y esta función tomará una imagen como argumento. Y el tipo de esta imagen queremos que sea nPi. Y matriz D. Entonces ahora solo necesitamos importar el num Pi. Así que volvamos a nuestras importaciones, abrimos un nuevo vino y decimos import num Pi S&P Así que ahora el error aquí se ha ido. Así que ahora el error aquí se ha ido Tenemos el num Pi estamos diciendo todo sobre el NumPI incluso la docmuación si quieres más información Y esta función devolverá un diccionario de cadena, y luego simplemente haremos cualquiera por ahora. Entonces solo queremos un diccionario, abrir corchetes, y agregaremos la cadena como etiqueta o nombre, y luego simplemente agregaremos cualquiera en tamaño. Y luego simplemente cerramos la función. Y ahora ves aquí, tenemos estos dos errores porque ambos no están definidos, por lo que necesitamos volver a nuestras importaciones e importar la mecanografía. Entonces de escribir vamos a importar las excavaciones de diccionario y N. Y aquí tengo un error tipográfico No es escribir, sino escribir, así que ahora es correcto, y los errores aquí se han ido. Entonces continuando con nuestra función, entramos. Ten cuidado. Nuevamente, necesitamos esta identación en Piton y solo vamos a establecer nuestra primera variable, el tensor de entrada que toma un flujo de tensor y lo convertiremos en tensor Y esto tendrá que pasar nuestra imagen. Entonces esto es básicamente la preparación o la conversión de la matriz numpy Entonces esta imagen aquí, a un tensor de flujo tensor, que es una entrada requerida al modelo de datos de objeto que el flujo tensor requiere para detectar la Entonces, básicamente, estamos convirtiendo nuestra matriz NumPI en tensor de flujo tensor, entonces a tensor Y sin embargo me olvidé preguntar el error así que entré tensor. A continuación, asignaremos a nuestro tensor de entrada será nuestro tensor de entrada de antes. Entonces éste. Y volvimos a abrir los corchetes y dices flujo tensor, Nuevo eje Y luego se extendió y se hace nuestra segunda variable. ¿Y qué significa esto? Entonces esto agrega dimensión extra al tensor, así que a nuestro bastante bien Tensor creando un lote de tamaño uno. Muchos modelos esperan que las entradas estén en lotes, aunque sea solo una imagen. Entonces necesitamos crear estos lotes para pasar a la entrada de nuestro modelo. Y luego para la variable de detecciones, inferiremos el sensor de entrada que Entonces, ¿qué significa esto aquí? Entonces inferir que esta inferir viene de la firma de nuestro modelo, de nuestro modelo precargado y pre entrenado Y este modelo se ejecutará por sí mismo y procesará la imagen y devolverá sus detecciones. Entonces después de cuidar la imagen, manejarla correctamente, pasaremos a nuestro modelo que manejará la detección. Entonces aquí otra vez, olvidé las detecciones S y B porque es más de una Y luego básicamente solo necesitamos devolver estas detecciones. Entonces ahora estamos listos para usar esta función en la ruta. 26. 26. Predice la ruta: Entonces ahora estamos listos para crear nuestra ruta para obtener las predicciones en nuestro front end. Y para eso y porque va a ser una postsolicitud, tenemos que hacerlo justo después de nuestra app donde definimos nuestra app rápida API. Así que solo podemos decir al alza, así que desde la API rápida y luego publicar. Así será una postsolicitud. Y el nombre que tenemos para nuestra ruta puede ser solo predicho. Entonces se define la ruta. Ahora necesitamos la funcionalidad para sí mismo. Así que vamos a tener una función de sincronización para que sea sincrónica a lo largo del curso y profundidad para la función. Y entonces lo llamamos predecir. Y lo que nuestra función necesita tomar, qué tipo de archivos hay que tomar. Entonces necesitamos un archivo. Entonces la imagen que vamos a plod en el front-end y luego cual tipo este archivo debería ser Entonces en este caso, debería ser un BlothFle que sea igual a file con un spread, puede ser cualquier cosa dentro de él, y luego volveremos o quisiéramos regresar en Entonces devolveremos nuestra respuesta json luego podamos manejarla en el front end. Pero entonces otra vez, aquí vemos algunos errores, así que eso significa que aún no lo importamos, así que volvamos a la cima. Y desde nuestra API FAST, también necesitamos el archivo y el archivo de subida. Entonces ambos provienen de la rápida importación de API. Y entonces también necesitamos el JCNRSponse porque es el único año faltante que queremos regresar Y para eso, solo abrimos otra oreja de vino y decimos desde FAST API, y luego de las respuestas de FAST API, queremos importar JCNRSponse y eso es todo para Así que continuando con nuestra función, primero necesitamos crear una variable para esperar nuestra respuesta. Así que podemos simplemente llamar a la variable content o content porque va a ser más de un contenido, y luego vamos a decir, espera, y decimos archivo res. Así que la función python que va a res nuestro archivo, por lo que el tipo de archivo de subida. Y esto permite que el archivo sea subido y leído asincrónicamente Entonces necesitamos convertir los archivos que subimos en una imagen, como convertir de una matriz Numpi y luego a imagen RGB Entonces, ¿cómo hacemos eso? Primero, de nuevo, aquí abajo, solo lo llamamos imagen. Esa es mi nuestra variable, y será igual a la matriz Numpi entonces tenemos la SV dos El SV dos son los códigos para la imagen y luego decimos código EMD E. Por lo que el S V dos se utiliza principalmente a partir de carga de imagen o conversión de espacio de color y potencial redimensionamiento de la imagen. Entonces aquí estamos arrancando la imagen o convirtiendo la imagen, el tamaño exacto o el tipo exacto, tamaño, colores que queremos que se aplaudan Entonces en este caso, tenemos el C V dos, nuevamente, se le da un error. Tenemos que importarlo. Así que volvamos a la cima. Y vamos a darle una nueva línea aquí. Entonces decimos importar como lo hacemos nosotros. Y aquí tenemos que limpiar esto un poco. Demos las importaciones de juntos y las importaciones individuales juntas también. Así que vamos a limpiar esto. Para ser más limpio y específico. Lo mismo aquí con OS, y ahora tenemos un código limpio y más organizado. Entonces volviendo a nuestra función, nuevamente, el error se ha ido. Y dentro de nuestras decodificaciones de imagen EM, volvemos a abrir otros paréntesis, y nuevamente, desde nuestro numpi queremos de nuestro búfer, queremos convertir nuestro contenido a num pi entero o U entero ocho Entonces con ocho caracteres. Y luego continuando aquí, solo ponle un coma y otra vez, el SV dos, y decimos que la imagen era color para que podamos obtener el color también. Porque la imagen viene con colores y luego el modelo necesita los colores RGB exactos para facilitar la detección. Y con eso, vamos a volver a establecer esos colores. Entonces necesitamos convertir el BGR a colores RGB. Entonces podemos establecer una nueva variable aquí, así decimos imagen RGB. Eso es lo que queremos conseguir. De nuevo, de SV dos, y dices color SVT Entonces esta es una función o una clase proveniente del SV dos. Y luego pasamos nuestra imagen a la que convertimos aquí. Y luego decimos SV dos y yo digo, Color. Y porque viene como BGR, decimos BGR a RGB Por lo que nos estamos asegurando que los colores antes de enviar Imagen al modelo vienen como nuestro camino como RBG Entonces tenemos el conjunto de imágenes, los colores, todo convertido y listo para funcionar. Tenemos que pasar la detección. Así que solo creamos unas nuevas detecciones de variables. Y entonces aquí solo llamamos a la función que teníamos antes. Así que ejecuta inferencia que convertirá la imagen en tensor y obtendrá el resultado Así que ejecuta la inferencia, y luego pasamos nuestra imagen correctamente convertida Así imagen RGB. Entonces vamos a obtener los resultados. Entonces estos resultados de la detección que establecemos antes de esta variable aquí, pero aún necesitamos formatearlo correctamente y convertirlo en un objeto para que pueda enviar al front-end. Entonces en este caso, primero establecemos el número de detecciones. El número por supuesto, es un número entero, y decimos detecciones, pop número de detecciones Así que esto extrae una serie de detecciones, y luego convertimos el resultado de la detección en una matriz de árbitros que vamos a hacer ahora Entonces otra vez, detecciones. Entonces llamando a la misma variable, y aquí abrimos Brass rizado para objeto y cada objeto tendrá la clave y el valor. Entonces este valor, abrimos corchete y decimos que los iniciaremos con cero. Entonces una columna y luego decimos el número de detecciones. Éste está aquí. Podemos simplemente cerrar esto y un punto y luego seremos árbitros Y por cada clave y valor en detecciones. Es. Es. Entonces, ¿qué pasó aquí? Entonces aquí estamos configurando el objeto queremos que las detecciones pasen por a. entonces en este caso, decimos for, queremos establecer una clave y el valor como un numbi en todo el número de Entonces, para cada clave y cada valor en las detecciones en estas detecciones, queremos establecer una clave y un valor para ella en el objeto Bien. Entonces necesitamos crear una lista para regresar. Entonces tenemos estos valores aquí, así que una lista con todas estas claves que vienen de las detecciones, y necesitamos hacer un bucle para convertir los resultados de la detección en una lista Y para eso, solo decimos cuatro claves en detecciones. Nosotros decimos detecciones. Clave es igual a detecciones. Clave para enumerar. Después de revisar las claves en nuestras detecciones aquí, establecemos el índice de cada clave de detección de cada detección a la lista Entonces necesitamos mapear las clases detectadas a etiquetas legibles por humanos que vamos a usar con nuestro mapa de etiquetas de uso. Entonces, por ahora, solo podemos necesitar sumar los resultados. Ten cuidado con la atentación y luego solo necesitamos, nuevamente, los resultados y nuestros resultados serán devueltos como una matriz Así que dejémoslo vacío por ahora, y vamos a agregar mapas de etiquetas. 27. 27. Label_Map: No, vamos a necesitar un mapa de etiquetas en nuestro código para hacer las predicciones o nuestro modelo para obtener un ID, y el IT tendrá una etiqueta que tenga el nombre del objeto que se renderizará en el front-end. Y debido a que estamos usando el móvil SST y el dataset coco, ya nos proporcionan un mapa de etiquetas con un archivo PTN para que podamos agregar nuestra aplicación Entonces si vas entonces aquí a este RL, lo dejaré en los recursos, puedes ver que ya se proporciona un mapa de etiquetas con número de identificación y luego con un nombre, la etiqueta del propio objeto. Este mapa de etiquetas en particular puede ser bastante grande. Puedo tener cientos de miles de etiquetas, pero la acorto, y ahora podemos agregarla a nuestra aplicación Entonces podemos ir a nuestros códigos Visal Studio y ahí aquí en la carpeta principal, creamos un nuevo archivo y lo llamamos etiqueta Mapa punto pi. Y luego sólo voy a pegar el mapa de etiquetas. Dejaré este archivo también en la descripción, así que solo necesitas copiar y pegar, y luego tenemos nuestro mapa de etiquetas aquí. Pero luego para usarlo en nuestro archivo principal, necesitamos importarlo. Entonces subimos aquí otra vez y salvamos de hijo de importaciones parte, para decir de mapa de etiquetas, importamos mapa de etiquetas. Entonces básicamente lo que estamos haciendo aquí, estamos importando este objeto aquí a nuestra aplicación principal. Así que no es que tengamos nuestro mapa de etiquetas importado a nuestra carpeta principal, podemos continuar con nuestra ruta. 28. 28. Devolución de resultados de predicción de ruta: Ahora podemos continuar con nuestra ruta Pre vic. Así que nos detuvimos aquí cuando creamos nuestra matriz de resultados. Así que justo antes de la matriz de datos, vamos a recorrer el número de detecciones. Entonces podemos decir cuatro en el rango de número de detección. Entonces miramos a través del rango, rango completo de nuestro número de detecciones que obtendremos aquí Seguimos con la función y decimos, si nuestras detecciones, esta es obtener la detección puntuada porque si recuerdas eso vendrán varias detecciones de una imagen, y luego solo queremos aprovechar la detección de mayor valor que tenga una puntuación más alta porque es la más aproximada al objeto que queremos Entonces, si la detección puntuó uno en nuestra imagen de índice, queremos solo si es igual o superior a 0.5, ese es el que nos interesa. Entonces, si tenemos esa puntuación y esa detección, diremos que el ID de clase será un entero en este caso, y solo establecemos el mismo número del índice. Entonces las clases de clase de detección tendrán el número de nuestro índice, en nuestro aspecto, Así que básicamente, estamos convirtiendo nuestro ID de clase a un número a un entero. Y luego podemos establecer la categoría también. Y la categoría será así nuestro mapa de etiquetas. Necesitamos usar nuestras etiquetas del archivo que agregamos antes. Y dentro de nuestro mapa de etiquetas, vamos a obtener el ID de clase o desconocido. Desconocido. Entonces aquí, la categoría obtendrá el ID de clase de la detección que convertimos en entero y vamos a hacer coincidir uno de estos índices aquí. Entonces también necesitamos nuestra caja de detecciones. Nosotros decimos box, y decimos detecciones. Y aquí queremos obtener todos los puntajes de detección. Con una SA por cerca de 12 S aquí, así que por favor haga los puntajes de detección, y luego queremos el índice también. Y luego finalmente, podemos de nuestros resultados. Así que vamos a llamar a los resultados de matriz OR y anexar estos resultados Entonces podremos comprobar esta matriz y probarla y tener nuestros datos que necesitamos en el front-end. Pero aquí necesitamos abrir un objeto y tenemos la caja. Esa solo será la caja que creamos antes. También tendremos la categoría. Nuevamente, misma categoría de aquí, y luego la puntuación. Entonces necesitamos que la partitura para renderizar en el frente tendemos a anotar y anotar. Y como no teníamos el puntaje, necesitamos auditar aquí. Entonces el puntaje será tengo un error aquí y puedo ver ahora las casillas aquí en lugar de las casillas deberían ser anotadas las puntuaciones. Y luego aquí abrimos una nueva, y así encajamos las detecciones de nuevo abrimos corchetes, y decimos detección Cajas. Nuevamente, queremos índice. Entonces ahora todo debería estar bien con este bucle. Entonces queremos ver los resultados de alguna manera. Volvemos aquí, así que dos líneas atrás por la ditación y queremos imprimir Nuestros resultados Entonces decimos final, y decimos resultados con fines de prueba, para que podamos ver los resultados en nuestra consola, y luego necesitamos devolver los datos ya formateados para nuestro front-end. Entonces, debido a que la función debe devolver la respuesta adyacente, necesitamos devolverla también. Entonces decimos regreso. Y luego Jason respuesta, y nuestro contenido serán los resultados. Así que aquí, nuestra matriz que agregamos datos a través de estos métodos. Para que podamos guardarlo, y luego a continuación, podemos probarlo en nuestra consola. 29. 29. Prueba de nuestra ruta: Ahora podemos ir a probar nuestra ruta y nuestro servidor por ahora. Solo descargo como unas imágenes para que las probemos, y las dejaremos aquí sobre los recursos, y tenemos que ejecutar nuestra aplicación con UVcorn Pero ejecuto la aplicación con UVcorn y obtuve este error Si tienes este error, solo sigue estos métodos para resolverlo. Entonces necesitas instalar PIP multip para que puedas hacerlo. Pero primero, necesito detener esto otra vez y decir, P instalar Python multiparte Esto es porque nos requiere formulario porque estamos usando un formulario aquí, y luego podemos volver a usar el UVcorn Entonces decimos UVcorn colon principal arriba, y luego relos. Y ahora podemos comprobarlo en el navegador. Y si vamos a nuestro navegador, vamos a nuestra ruta a nuestro wirel teníamos aplicación y a la parte docs Entonces ahí ya podemos probar si nuestra ruta predictiva está funcionando o no. Así que sólo vamos a abrirlo aquí. Y entonces como se puede ver, es un formulario multip de datos. Por eso necesitábamos ejecutar esa instalación de PIP porque porque nuestra ruta no funcionaba solo por este método post Entonces solo decimos que pruébalo. Y aquí podemos elegir un archivo. Así que por favor elige el archivo de tu preferencia, pero ten en cuenta que tiene que estar en el mapa de etiquetas. Así que solo puedes usar las imágenes que quedan en los recursos. Nosotros solo vamos a usar imagen, digamos este barco, lo subimos, y luego decimos ejecutar. Y ahora la ejecución salió bien, todo funciona bien, y tenemos nuestra respuesta. Entonces como pueden ver, varias cajas, pero en este caso, vamos a sacar el máximo que tenga una puntuación. Por lo que esto identificó la categoría del equipo utiliza una embarcación como esperábamos y con 98% de precisión. Entonces esto en la parte delantera, sólo vamos a redondear hasta porcentaje. Pero aquí tenemos un número decimal que es 0.98, es decir 98% Podemos probar con otra imagen. Entonces solo lo reiniciamos digamos un gato dice ejecutar y nuestra predicción es un gato. También puedes ver los resultados aquí en tu consola, en tu terminal. Entonces los dos últimos que predijimos que son ambos y el gato uno con 99% anotado y el otro con 98, por lo que las imágenes son lo suficientemente claras para que nuestro modelo las detecte. 30. 30. Usa el gancho de carga de imágenes: Ahora que tenemos nuestro back end o nuestro servidor configurado, podemos volver a nuestro front-end y manejar esa conexión. Lo primero es lo primero, vamos a crear un gancho de reacción. Así que un gancho de reacción nos permite tener un fragmento de código o una función o cualquier dato en un solo archivo que se pueda usar o enganchar alrededor de nuestra aplicación. Entonces para crear eso, venimos aquí a nuestro sitio donde tenemos nuestros archivos y vamos a crear una nueva carpeta, y la llamaremos hooks. Y luego dentro de esta carpeta de gancho, crearemos un archivo y el archivo llamará uso. Así que los ganchos reaccionan siempre tienen que tener el prefijo usar y luego decir imagen aploshok Y este es un archivo Ts, entonces un archivo mecanografiado Ahora dentro de la reacción Hook, primero impartiremos lo que necesitamos, por lo que necesitaremos el estado de uso de react También necesitaremos Axios Por lo que Axios lo hará y todas nuestras solicitudes HCTP a través de la aplicación Si no sabes whatxus es justo y todo XTTP solicita obtener la fecha u obtener solicitudes de correos, y este es un paquete útil para Entonces entonces vamos a crear alook con Export para ser usado a lo largo de la aplicación y const, y lo llamamos use image up loads. Y los aplausos de imagen obtenemos un argumento, y este argumento va a ser la cadena o L que vamos a enviar desde donde queramos Y lo llamaremos solo aplausos WL, y el tipo es una cuerda Entonces solo podemos tener función de flecha y devolver todo aquí. Primero, lo que tenemos que hacer es tener algunos estados, que podamos crear el primero y lo llamamos predicción y la predicción es lo que vamos a volver a nuestro componente. Predicción. Estos resultados vendrán del back end, procesaremos aquí, y luego podremos usarlo en cualquier lugar. Decimos usar estado y solo causarlo. Entonces también necesitamos un indicador perdedor. Vamos a crear un volan llamadas se está cargando, y luego decimos set está perdiendo, y luego usamos estado de nuevo Y en este caso, queremos que sea un tipo de booleano, e iniciamos la aplicación como falsa Por lo que nuestro estado de carga será falso al principio. Luego volvió a costar, y también necesitamos una variable de estado para el error. Así decir error. Entonces esta aplicación tendrá algún error, solo la configuraremos aquí, y luego diremos error. Y aquí, porque va a ser un mensaje de error, tenemos que configurarlo como string. Pero si no tenemos ningún error, tenemos nulo. Entonces iniciamos el ciclo de vida de este gancho con este estado nulo, por lo que no hay error en el inicio. Entonces creamos nuestra función dentro de ti. Entonces necesitamos una función para subir nuestra imagen. Podemos simplemente decir Cost, aploimage que será una función de sincronización que tomará archivo como argumento Entonces aquí subimos nuestra imagen y el tipo será archivo. Y luego solo devolvemos algo dentro de aquí. Y dentro de aquí, primero necesitamos un formulario de datos porque vamos a actuar como formulario cuando subamos nuestra imagen como creamos antes, es un formulario, y tenemos que configurarlo como un nuevo formulario de datos. Y luego agregaremos esa imagen a los datos de nuestro formulario. Así que los datos de formulario anexan el archivo que pasamos como argumento. Así que archivo divertido. Bien, entonces porque nos estamos oponiendo a la imagen, necesitamos tener el perdedor como cierto. Entonces cuando estamos aplaudiendo la imagen, hemos tendido a tener que mostrar perder como verdadero, y luego creamos un giro o un indicador de pérdida a nuestra Entonces perder es cierto cuando estamos oponiéndonos a la imagen, y luego establecemos el error como nulo. Entonces todavía no tenemos ningún error aquí. Y luego tenemos un try and catch walk. Y primero con un try and catch walk, obtendremos o intentaremos obtener esa información que necesitamos, y cogemos cualquier error si existen. Entonces para crear un try and catch walk que es un try y luego de vuelta aquí atrapamos y pasaremos cualquier error si existe, así que cogeremos cualquier error y luego abriremos otro bloque. Pero nos faltan algunas partes aquí de nuestra aplicación, como, por ejemplo, tipos. Entonces queremos que nuestro gancho devuelva un tipo específico. También queremos que nuestra predicción sea de un tipo específico. Entonces para eso, primero tengo un error tipográfico aquí, entonces es predicción Entonces para eso, ahora vamos a crear nuestros tipos. 31. 31. Tipos de resultados: No, para nuestros tipos, podemos o crear los tipos aquí o para hacer que la aplicación sea más organizada. Vamos a crear una nueva carpeta, y la llamamos folers types Y luego dentro de los tipos de carpetas, creamos otro archivo llamado type dot Ts. Y aquí, podemos empezar a crear los tipos que queremos usar. Entonces primero, vamos a usar el tipo de producción que luego vamos a enviar a nuestro componente principal. Y para eso, decimos exportar, así podemos exportar este tipo, tipo, y lo tendremos en la predicción. Predicción es igual a llaves de rol abiertas, y luego decimos categoría que necesitamos una categoría Entonces la etiqueta, como recuerdas, y lo llaman cadena. Y luego también necesitamos mostrar la partitura. Entonces tenemos nuestro puntaje, y nuestro puntaje será un número si recuerdas ese 0.98 que vamos a mandar también nuestro show ahí Entonces después de eso, también necesitamos devolver algo de nuestra función. Entonces queremos los tipos exactos que queremos devolver de nuestra función, principalmente usamos el resultado de aplausos de imagen Y entonces podemos decir, nuevamente, exportar tipo, usar imagen, aplausos, luego resultado Y ese será el aplauso. Imagen que, en este caso, será una función como tenemos nuestra función que llamó archivo como archivo tipo, y luego simplemente devolveremos aquí la voz de promesa. Para que podamos devolver cualquier promesa ahí que queramos. Entonces también tenemos la predicción. Entonces, si recuerdas, esas predicciones venían como una matriz. Entonces para eso, aquí usaremos este tipo, y lo llamamos predicción. Pero debido a que es una matriz, queremos una matriz a partir de predicciones, pero también puede ser nula, tampoco puede tener nada si hay un error de si no hay coincidencias encontradas, así que tenemos que establecer así como null. Entonces tenemos, de nuevo, que está cargando que, en este caso, es un lingote, y luego el error y la flecha, si recuerdas la cuerda o no Entonces ahora, podemos volver a nuestro gancho y luego establecer lo que necesitamos aquí. Entonces aquí en la primera variable de estado, necesitamos establecerla como la predicción. Así que abre la etiqueta aquí, y luego decimos predicción y es una matriz de predicciones y también puede ser nulo. Y el primer estado cuando el componente hace que todos sean nulos. Entonces cuando el componente se renderiza, aún no tenemos nada, así que tenemos que establecer esto como nulo. Y ahora necesitamos importar nuestro tipo para que podamos usarlo en la aplicación. Entonces si vamos aquí a nuestra parte de importaciones, decimos import, luego abrir kern pass, e importaremos ambos de nuestros tipos Entonces es predicción y aplausos usan imagen, resultado de aplod. Y error lo importé a tiempo, así que solo borra este. Ahora aquí, donde queremos usar esto, queremos usar esto como el tipo de nuestra función o el resultado de nuestra función, lo que devolverán al final. Entonces usamos imagen, resultado aplaudido. Entonces ahora nos sale este error porque necesita devolver algo y todavía no estamos devolviendo nada. Entonces este error desaparecerá después de que completemos este bloque de código aquí. Continuaremos en el próximo. 32. 32. Devolución de datos de Hook: No, aquí en nuestro bloque try and catch, todavía necesitamos hacer algunas llamadas para poder tener los resultados exactos para luego usarlo en el componente principal. Entonces antes que nada, vamos a hacer la post request, luego con eje que importamos, y para eso, decimos costo, y esa será una respuesta igual. Y debido a que es una operación sincrónica, diremos esperar el resultado, y luego decimos axios post y queremos impulsar porque vamos a enviarlo a desde nuestro componente principal será predicción sobre matriz de predicciones Y luego aquí abrimos los frenillos y lo que vamos a enviar, qué tipo de información vamos a enviar Entonces primero, necesitamos el RL que aún no tenemos nuestro RL en la aplicación, pero lo configuraremos más adelante. Después los datos del formulario. Así forman los datos que establecemos aquí. Y otra vez, coma, y abrimos los ers con llaves rizadas. Entonces para los ers, primero decimos ers llaves rizadas y aquí solo establecemos el tipo de contenido Así que abre cotizaciones, tipo de contenido, y en este caso, si recuerdas, de nuestras pruebas en el servidor es un formulario multiparte de datos Entonces digamos datos de forma de múltiples partes. Bien, entonces yo comino aquí. Y lo primero que podemos hacer es después de la variable de respuesta o la solicitud de respuesta, damos otra línea aquí y podemos establecer primero el registro de la consola, para que podamos ver la respuesta. Decir respuesta del servidor porque si pasa algo y los datos no vienen, podemos verificar en la consola si realmente viene o no, luego datos de respuesta. Entonces tenemos que verificar si todo está bien. Entonces decimos si nuestra matriz por lo que nuestra matriz de predicciones es una matriz con datos de respuesta. Entonces si esto es una matriz, y la respuesta eso porque es un RA como una longitud. Y si esa longitud es mayor que cero, lo que significa que está poblada, podemos decir que los datos existen y establecemos la predicción a datos de respuesta. Si no, entonces, de lo contrario, establecemos el error. Entonces porque esto no corresponde a la verdad y no tenemos ningún dato, simplemente lanzamos un error, y así, tenemos que establecer el error y decir formato de respuesta inesperado desde el servidor. Entonces, significa que algo salió mal en el servidor. Si todo va correctamente, nuestra aplicación le enviaremos estos datos y nuestras predicciones se rellenan. Pero recuerden, aquí todavía estamos en estado perdedor porque es cierto, así que todavía nada, y nos pondremos más adelante para mostrar los datos. Entonces ahora, continuando con nuestra captura. Entonces, si tenemos un error, primero establecemos un error de consola. Y como digo, agregamos un error. Tuvimos un error de blosing la imagen y luego decimos qué tipo de error fue Entonces este error entonces también lo renderizaremos como un error de consola. Entonces otra vez, abrimos I. Y esto es porque estamos usando Axios, decimos Axios Yo es error axios. Entonces eje detectará esto en error y lo establecerá como un error de axios aquí Vamos a establecer un error diferente. Entonces aquí decimos, tal vez darle más espacio porque necesitamos aquí el espacio y decimos abrir un backtick Y entonces usted dice, así que vuelta garrapatas aquí diferentes diez citas, dicen fallido a los imagen. Entonces abre el signo de $1, carreras rizadas, y luego pasamos el mensaje de error o mensaje de punto de error que viene de aquí. Entonces podemos continuar aquí. Tenemos un punto y luego estado. Entonces esta es solo información útil en caso de errores. Decimos estado de respuesta de error. Podemos volver a cerrar las llaves, otro punto, otro signo de dólar, y decimos error Dot responde. Ponemos este signo de interrogación porque es un estado opcional. Para que permitir si no existe, no continúe y luego detalle o simplemente una cadena vacía. Entonces en nuestro bloque I, también necesitamos establecer s, y el s va a estar bien, solo establecemos un error diferente si alguno de esos errores es cierto, pero aun así tenemos un error. Sólo hay que decir que falló en soplar imagen. Por favor, inténtalo de nuevo. Entonces, si no hay error del servidor o ningún error de Axios, simplemente configuramos este mensaje de error Y luego queremos terminar el bloque y luego decimos aquí. Entonces a partir de nuestra captura y nuestro intento, necesitamos finalizar y luego decimos justo por fin si todo va correctamente, dijimos que set está perdiendo ante foss Entonces ahora ya no estamos perdiendo. O estamos mostrando un error o los datos reales. Guardar pero entonces ¿cómo extraemos? Tenemos que devolver algo. Entonces necesitamos devolver cada variable de estado que creamos. Entonces solo decimos volver a abrir llaves Carl, y devolvemos una imagen de trama Entonces para establecer la función desde el componente principal para enviarla aquí, la predicción que necesitamos enviar también, esta carga para que pueda verificar el estado de carga y luego error. Entonces ahora si guardamos, y todavía tenemos este error alrededor de error porque es tipo de desconocido, así que para arreglarlo fácilmente, solo necesitamos configurarlo como aquí, y el error desaparece. Pero tengo un error de cualquiera de aquí. Esto es sobre mi linting, porque idealmente en una aplicación grande en una producción aplicaciones, nunca debemos usar ninguno o solo casos muy específicos porque puede romper la aplicación y el largo plazo o el desarrollo continuo lo que suelo tratar de evitar el uso de cualquiera, pero en este caso, sólo podemos usarlo. Ahora, guárdala, y estamos listos para probar esta parte en nuestra aplicación. 33. Uso de Hook en el control de imágenes: Entonces, lo primero que debemos hacer es regresar. Podemos cerrar todo esto y volver a nuestro control de imagen punto TSX Y si recuerdas, creamos aquí estas variables que no necesitaríamos o no usaríamos, pero tenemos que cambiarlas ahora. Entonces lo primero, solo decimos costo. Y entonces queremos tener las mismas cosas que estamos regresando de nuestro gancho. Entonces tenemos la imagen cerrada. Vamos a necesitar una predicción. Está perdiendo y el error. Entonces esto eso es lo que vamos a usar ya están establecidos en nuestro front end año, y esto vendrá del gancho con los datos correctos. Y luego necesitamos usar el gancho, entonces decimos imagen, usa Imagen aplaudir Y si presiono solo una pestaña , me importará el gancho. Así que importa, usa imagen aplaudir de nuestra carpeta de gancho y el archivo correcto Ahora bien, porque aquí tengo un error y ¿por qué es eso? Porque si recuerdas, nuestro gancho que usa Image plus requiere de un argumento que sea un plus ganado, es decir, necesitamos pasar nuestra clave. Así que por ahora, solo establecemos como cadena vacía, pero aún necesitamos pedir la clave a nuestro servidor. 34. Clave de API: No, necesitamos la clave de nuestro servidor o la URL de nuestro servidor, para que podamos usarla aquí. Entonces para eso y los métodos de separar, así no vamos a ser visibles aquí, creamos una nueva carpeta llamada keys. Y dentro, creamos un nuevo archivo llamado APi kis dots. Tenga en cuenta que esta es una forma muy sencilla lo que las claves no deben mostrar aquí, pero por cuestión de seguridad, no debe usarla así si la usa ya sea en la variable de entorno o en un archivo de registro. Por lo que el usuario no tendrá acceso a él a través de herramientas de desarrollo o algún otro método. Entonces para eso, solo necesitamos crear una const primero para decir export, cost, y luego lo llamamos API key equals, y luego porque es una cadena, abrimos códigos Y si recuerdas es HTTP, barra diagonal 127.0 0.04 0.1, y estamos ejecutando el servidor en el puerto 800 Si cambia el puerto, por favor utilice el puerto que está utilizando. Así que solo necesitamos también establecer el tipo mecanografiado, y luego porque es una cadena, configuramos como una Y ahora podemos usar esta ApiKey en nuestra aplicación. Entonces volvemos a nuestro control de imagen, y primero, necesitamos importarlo. Así que de nuevo, aquí diremos importar llaves abiertas, e importamos nuestra clave API constante de nuestra carpeta kiss y APIs kiss Entonces entonces aquí cuando la imagen aplos, simplemente pasamos fácilmente lo que queremos Entonces primero, necesitamos abrir el Bectix. Entonces nuevamente, el ctix nos permite usar variables dentro de la cadena, y queremos abrir el signo de dólar y las razas rizadas, y luego tenemos nuestra clave APA Pero porque nuestra clave APA o la ruta que queremos utilizar simplemente no termina con un puerto. También necesitamos pasar nuestra barra, predecir porque es nuestro método post que creamos antes en nuestra aplicación Entonces ahora lo guardamos, y ahora podemos continuar con esto. 35. Manejar la carga y manejar imágenes: Ya podemos usar estos métodos disuasores desde nuestro ok, pero aún necesitamos crear funciones para manejar el cambio de imagen o la carga de la Entonces lo primero que vamos a hacer es tener una nueva función aquí, y la llamamos manejar cambio de imagen. Entonces el evento que vamos a usar para cambiar la imagen o para subir una nueva imagen, y el otro será un evento. Y este evento tendrá el tipo de evento de cambio. Entonces evento de entrada HTML porque estamos perdiendo o plosing una imagen de nuestro equipo a este método aquí Entonces lo llamamos change event, el tipo que viene de react, y luego abrimos las etiquetas, y dentro, tenemos el elemento de entrada HTML. Entonces, para usar este método aquí. Y debido a que estamos usando este tipo de react, necesitamos importarlo. Entonces después del estado de uso, decimos change event para importarlo a nuestro código aquí. Entonces el error se ha ido, y estamos listos para continuar con nuestra función. Entonces va a ser la función flecha y luego curibass. Y lo primero que vamos a hacer es establecer una variable para el archivo, así const file Y este es un evento el objetivo, los archivos que vamos a subir tiene opcional porque puede estar vacío, y queremos el primer elemento en esta matriz Entonces también podemos manejarlo para verificar si todo es correcto. Entonces si tenemos un archivo, abrimos de nuevo Carly llaves. Dijimos secc archivo seleccionado. Así que recuerda nuestra variable de estado aquí, ese es el archivo tipo. Entonces decimos secc seleccionado archivo a archivo. Entonces el que subimos, y luego configuramos la imagen a la URL. Entonces otra interfaz en este caso para la URL, y luego dices crear Objeto RL. Entonces, cuando aplosemos la imagen, este evento creará RL, para que podamos mostrarla de inmediato Entonces entonces guardamos y aquí tengo un error porque el RL es mayúsculas. Entonces entonces lo guardamos, así que nuestra imagen final cambia, está funcionando, pero necesitamos usarla en nuestra plantilla de vuelta aquí a nuestra entrada. Tenemos este método al método sin cambios, y solo necesitamos eliminar esta parte aquí y luego simplemente llamar a una función y Cambio de imagen. También señalando el error aquí, y esto es porque olvidé las llaves aquí porque el método de dos oper case es un método y necesita un frenillos Entonces solo agrega los frenillos aquí los relleno. Ahora tenemos que encargarnos de la subida. Entonces para eso, cuando queremos tener la subida para subirla a nuestro servidor, solo decimos Costo, manejamos subidas Igual a una función de flecha de sincronización nuevamente y luego decimos, hay un archivo seleccionado, esperamos la imagen de subida Para devolver algo con ese archivo seleccionado. Entonces la imagen de subida es la función que tenemos en nuestro gancho que creamos para manejar esa parte. Mientras esto está subiendo, podemos esperar si todo sale correcto, nos enviará la fecha De lo contrario, podemos simplemente establecer el error de la consola diciendo que ningún archivo es sólido. Así que ahora podemos ahorrar. Pero antes de probarlo, necesitamos agregar esta función en algún lugar de nuestra plantilla porque eso va a desencadenar el evento. Y si recuerdas, tenemos este botón con un click vacío aquí, y ahí es donde vamos a tener nuestra función. Entonces decimos endo aplausos. Así que ahora podemos guardarlo y podemos probar nuestra aplicación. 36. Prueba de la carga de imágenes: Entonces en nuestra aplicación, si no tienes la aplicación ejecutándose, solo necesitamos que NPM ejecute Def para iniciar nuestra aplicación it, luego ir al host local, y luego a nuestro host local, hay un error Y esto es porque no instalamos Axios. Entonces detengamos nuestro servidor, y luego decimos NPM instalar Axios Bien. Así que ahora podemos volver a intentarlo y PM en dev volver a nuestro navegador y todo es correcto. Ahora ya podemos subir la imagen. Así que solo elige archivo aquí. Y tenemos nuestras imágenes dobladas y solo podemos abrir esta, el evento cambiante cambia la imagen correctamente aquí, y luego solo podemos presionar identificar imagen, y tenemos error de red. Y por qué tenemos el error de red porque estas aplicaciones terminan con HTTP, y necesitamos establecer o endle las solicitudes de origen cruzado para que sean aceptadas en la Entonces hagámoslo a continuación. 37. Permitir CORS: A nuestro servidor en nuestro archivo PTN principal, necesitamos agregar algo más para manejar los orígenes cruzados de nuestra aplicación Entonces primero, necesitamos importar algunas partes que vamos a necesitar para usarla. Así que aquí de vuelta en las importaciones de decimos desde FAST API middleware dot course for cross origin, importamos curso Luego volvemos después de nuestra API arriba rápida, abrimos algunas líneas y decimos arriba. Así que de FAST API como desgaste medio y tirantes abiertos. Y luego llamamos a través la guerra intermedia y luego decimos permitir orígenes Y todo origen va a ser array. Entonces en la siguiente línea, decimos permitir que las credenciales sean verdaderas. Y decimos permitir, luego decimos permitir métodos. Y estos métodos van a ser de nuevo una matriz. Pero en este caso, abrimos citas y decimos estrella para permitirles a todos, luego otra vez, coma y luego decimos permitir Es, lo mismo Entonces array, cotizaciones y permitir de. Entonces solo necesitamos agregar comas aquí, y debería estar listo para funcionar Aquí en el LoiGin, vamos a establecer las cadenas de nuestro front-end de nuestras URL que estamos usando, y podremos usar varias para que podamos usar el, por ejemplo, el host local HCTP porque nuestras aplicaciones se están ejecutando en host local, podemos configurar, por ejemplo, este host local, este host local, o incluso podemos usar múltiples hosts locales aquí, por ejemplo, nuevamente, comillas y digamos, HCTB host local y luego 42. Entonces, por ejemplo, tenemos una aplicación react aquí y la aplicación angular aquí que podemos usar, y el host local estará disponible y los orígenes ya no causarán problemas. Entonces si lo guardo, y entonces podremos probarlo de nuevo. 38. Cómo llevar los resultados a la pantalla: No, de vuelta a nuestro front-end, solo podemos actualizar la página y volver a intentarlo. Así que abre de nuevo las imágenes. Permítanme avión aplous otra vez, y luego nosotros sólo para identificar imagen Y como se puede ver, un ploding. Y aquí tenemos la etiqueta que detectó como avión y el porcentaje. Entonces el porcentaje, lo fijamos aquí. Si recuerdas antes ese extraño número, ese número largo con decimos, lo estamos manejando aquí para que se fije como un número porcentual. Entonces podemos intentar otro decir Zebra, y ves que la imagen cambió, pero aún necesitamos identificarnos. Entonces aquí, Zebra es en realidad una imagen muy fácil de identificar debido a las rayas. Y entonces podemos probar más, por ejemplo, un autobús, más 98% de precisión. Así que ahora, siéntete libre de en ambas más imágenes e inténtalo. tener en cuenta que modelar sigue aprendiendo y nos equivocamos. Vamos a diferentes etiquetas y precisión o incluso diciendo que la imagen no existe. Siéntase libre de intentar hacer una aplicación más compleja ya sea en el back end o incluso tratar mejorar este front-end para que pueda adaptarse a sus propias necesidades. 39. Dividir en componentes más pequeños: Ve de reaccionar es su base de componentes. Entonces todo debe estar en componentes más pequeños para mantener limpio el código, el proyecto más comprensible, y luego los componentes también pueden ser reutilizables en otros componentes. Entonces aquí cómo hacemos esto. Primero, lo que vamos a hacer es dividir estos dos componentes en componentes más pequeños. Entonces podemos iniciar componente de imagen, y para eso, vamos de nuevo a nuestra carpeta de componentes y creamos un nuevo archivo, y lo llamamos componente de imagen punto DSX Entonces aquí podemos simplemente establecer const, llamar componente de imagen. Es un componente funcional, entonces nuestra función, y luego aquí solo devolvemos algo, y luego exportamos el componente de imagen predeterminado. Entonces simplemente necesitamos copiar este div y todo lo que hay dentro de él, cortarlo. Y dentro del regreso, pegamos el contenido de la imagen. Aquí tenemos un error, y luego lo veremos más adelante, cómo evitar este error y también pasaremos props Así podemos guardarla por ahora. Y entonces aquí podemos importar nuestro componente recién creado. Entonces solo decimos imagen. Componente y cerrar la cubierta. Así que vamos a ver aquí. Entonces, como puede ver, importamos este componente de imagen desde el componente de imagen. También podemos dividir estas cajas de predicción donde tenemos nuestra cicatriz y categorías en otro componente. Entonces nuevamente, venimos aquí y decimos componente de predicción punto TSX Y luego simplemente lo mismo por lo que el componente de predicción de costos. Nuevamente, componente funcional. Y luego volvemos lo que hay dentro de esta predicción, la caja aquí. Copiar Div y todo dentro de él, Scut it, ir a un componente de predicción Aún tengo el error. Mírelo más tarde, como mencioné, y luego tendremos que exportar por defecto. Componente de predicción para guardar. Y luego en nuestro control de imagen, volvemos a llamar al componente. Entonces en este caso, es ese componente de predicción a partir del componente de predicción. No olvides importarlo aquí. Y ahora para deshacernos de estos errores, tenemos que pasar accesorios, y vamos a echar un vistazo a eso a continuación 40. Accesorios de React: Entonces aquí vemos ambos errores que ocurren en nuestro componente, y eso es porque no tenemos props o este objeto aquí no existe Y para arreglarlo, necesitamos sencillo pasar los apoyos, como ya mencioné Entonces props es una forma de pasar datos de padre a hijo. Entonces, qué componentes pasarán datos a otro componente, para que pueda renderizar dinámico. Depende de si quieres reutilizar el componente o no, puedes pasar diferentes datos a ese componente. Y aquí, ¿cómo podemos hacer eso? Primero, convertiremos este componente en un componente funcional. Entonces aquí tenemos una columna y luego FC para componente funcional y abrimos este texto aquí. Entonces esta etiqueta tenemos que pasar nuestro tipo. Entonces si recuerdas, en nuestro tipo, tenemos este tipo de predicción que contiene puntaje de categoría N que usamos para renderizar en la pantalla. Entonces aquí solo podemos importar ese tipo de predicción. Así que importa la predicción de los tipos. Y este error también se debe a que necesitamos importar el componente funcional de la biblioteca react. Así dicen importar calibraciones abiertas FC de reacciona. Y como pueden ver los errores son v. Ahora necesitamos tener también nuestros apoyos que vamos a utilizar como argumento Y para eso, podemos abrir calibraciones. Y recuerda, tenemos en lugar de escribir la categoría y DS core y solo podemos decir tu categoría y puntuación. Entonces así, el error se habrá ido. Pero por ahora, todavía está aquí, solo necesitamos eliminar esta predicción aquí que no usamos para simplemente usar categoría y puntaje. Entonces todos los errores se han ido, lo guardamos, y luego para ser utilizados en nuestro control de imagen, como puedes ver aquí, inmediatamente mostramos un error, y eso porque le faltan esos tipos. Lo que necesitamos aquí, primero, necesitamos una categoría, y abrimos una llave y pasamos la predicción. Primer elemento de la matriz y categoría. Y también tenemos que hacer lo mismo para el marcador. Así que de nuevo, llaves rizadas, predicción, y cicatriz Entonces, si simplemente pasamos así, da un error porque espera un número. Entonces la cicatriz es un número, todos los errores se han ido. Ahora, hagamos lo mismo para el componente de imagen y el componente de imagen. Y porque no tenemos el tipo en este caso, lo haremos de otra manera. Entonces primero, nuevamente, crear un componente funcional. Vamos a impartir desde la biblioteca de reaccionar. Y luego aquí, si recuerdas que esta imagen es una cadena, solo podemos pasar si no tenemos un tipo para pasarla directamente aquí. Así que rizado sube y decimos imagen RL, eso es una cadena. Entonces estamos esperando una cadena. Y luego pasarlo aquí como argumento también. Entonces también necesitamos cambiar el nivel a imagen o, y todos los errores se han ido. Entonces en nuestro componente de imagen, nuevamente, tenemos el mismo problema y necesitamos pasar esta imagen que estamos manejando nuestra lógica al componente de imagen. Así decir imagen RL, es igual a imagen. Entonces todos los errores se han ido, y ahora podemos probarlo en nuestra aplicación. Así que de vuelta a nuestra aplicación, sólo podemos elegir archivo. Yo solo baja imagen aquí, y podemos intentar así que no hay errores. Todo está funcionando como se esperaba, y ahí lo tenemos. Entonces así es como pasamos datos de componente padre a hijo y reaccionamos aplicación. 41. Casos de uso y limitaciones: En el mundo actual, las aplicaciones de reconocimiento de objetos se han convertido en herramientas increíblemente útiles, transformando la forma en que interactuamos con nuestro entorno. Así que imagina caminar por un teléfono inteligente de calle concurrida al final con un escaneo rápido, tu dispositivo puede identificar peligros potenciales, ayudándote a navegar de manera segura. O imagínate en un supermercado donde la misma app ayuda a administrar el inventario, haciendo que la repoblación sea una brisa para los dueños de tiendas Sin embargo, estas aplicaciones no son solo para negocios. Están abriendo nuevos mundos para las personas con discapacidad visual, describiendo el entorno en tiempo real. Los entusiastas de la naturaleza los encuentran invaluables para identificar la Fada y la fauna en su s. En las aulas, estas aplicaciones están haciendo que el aprendizaje sea más interactivo, convirtiendo los objetos cotidianos en oportunidades educativas. Pero no todo es una navegación suave. Si bien estas aplicaciones son inteligentes, no son infalibles En un día nublado o en una habitación con poca luz, podrían tener dificultades para identificar con precisión los objetos. Y si bien son excelentes para reconocer elementos comunes, podrían rascarse la cabeza digital en objetos más oscuros o especializados También está la cuestión de la duración de la batería en el caso de los dispositivos móviles, ejecutar estas aplicaciones puede drenar continuamente tu teléfono más rápido de lo que cabría esperar, potencialmente dejándote con una batería agotada en un momento oportuno, o incluso agotar la batería de tu computadora Y en nuestro mundo consciente de la privacidad, el uso constante de cámaras levanta algunas cejas. La gente puede sentirse incómoda sabiendo su entorno está siendo analizado constantemente. Además, estos ven objetos, pero no los entienden completamente. Te pueden decir que hay una parte en una t, pero no van a entender eso juntos, hacen un juego de comedor. Son como un turista en una tierra extranjera, reconociendo las palabras vid pero faltando el contexto completo de la conversación. A medida que continuamos integrando estas aplicaciones en nuestra vida diaria, estamos descubriendo tanto su potencial como sus limitaciones. Son herramientas increíblemente útiles, pero no sin sus peculiaridades y desafíos A medida que la tecnología evoluciona, estamos aprendiendo a equilibrar sus beneficios con sus inconvenientes, encontrando el lugar adecuado para estos se digitalicen en nuestro mundo analógico Entonces con eso dicho, no puedo esperar a ver qué se te ocurra o tus ideas para crear este tipo de aplicaciones.