[IA] Créer une application Web de identification d'objet avec Python et React

1. Introduction: Bonjour, tout le monde. Je suis Alex Baker, et je suis ravi de vous accueillir dans ce cours. En tant que développeur full stack, ingénieur mobile, formateur et passionné d'IA, j'ai le privilège de travailler avec plusieurs grandes entreprises technologiques lorsque je me spécialise dans des technologies telles que React, React Native, Engler et Aujourd'hui, nous entreprenons ensemble un voyage passionnant. Nous allons créer une application de reconnaissance d'objets à partir de zéro, en combinant la puissance de React pour notre front end avec FAS PI et PTN pour notre back-end Mais il ne s'agit pas simplement d'un autre cours de développement Web. Nous allons nous plonger dans le monde fascinant de l' IA et de l'apprentissage automatique, appliquant ce concept à des scénarios du monde réel. Que vous soyez un passionné, désireux de créer votre première application intelligente, un développeur en herbe qui cherche à percer dans le domaine de la technologie ou un programmeur expérimenté souhaitant élargir ses compétences grâce à React ou à l'intégration de l'IA Ce cours est conçu pour vous. Nous travaillerons avec des technologies de mesure de découpe telles que l'API rapide, le PTN et le flux de tenseurs, pour vous donner une expérience complète dans la création d'applications modernes basées sur l' IA Préparez-vous à passer du statut de spectateur à celui de créateur de technologies d'intelligence artificielle À la fin de ce cours, vous aurez les compétences nécessaires pour créer des applications qui ne se contentent pas de traiter des données. Ils voient et comprennent le monde qui les entoure. Transformons vos inspirations liées à l'IA en réalité. 2. 02. IA, apprentissage automatique et apprentissage profond: Bienvenue à tous. commencer par le codage pratique, nous aborderons un peu de théorie concernant l'IA, l'apprentissage automatique et l'apprentissage en profondeur. Aujourd'hui, nous entamons voyage passionnant dans le monde de l' intelligence artificielle, de apprentissage automatique et de l'apprentissage profond Ce sont des technologies transformatrices qui refaçonnent le monde aujourd'hui et elles font apparaître de nouvelles technologies, de nouvelles fonctionnalités liées aux technologies associées nos appareils qui changent Et cela dit, qu'est-ce que l'IA ou l'intelligence artificielle ? renseignement officiel ou IA est une branche de l' informatique qui se concentre sur la création de machines intelligentes capables d' exécuter des tâches qui nécessitent généralement l'intelligence humaine. Mais qu'est-ce que cela signifie vraiment ? Imaginez un système informatique capable de comprendre le langage naturel, reconnaître des objets et des images, prendre des décisions et même de tirer des leçons de ses expériences. C'est donc l'essence de l'IA en général. Il s'agit de créer des machines qui imitent les fonctions cognitives nous associons à l'esprit humain, telles que l'apprentissage et la résolution de problèmes Les systèmes d'IA peuvent aller de simples programmes basés sur des règles à des systèmes complets capables de s'adapter et d'évoluer. L'objectif est de créer des machines capables de percevoir l'environnement, raisonner sur ce qu'elles perçoivent et de prendre des mesures qui maximisent leurs chances d'atteindre objectif que nous voulons atteindre dans ce cas. Maintenant, quels sont les types d'IA ou que pouvons-nous trouver comme ces types d'IA ? Lorsque nous parlons d'IA, il est important de comprendre qu'il existe différents types ou niveaux d'IA. Explorons-en donc les deux principales catégories. Nous avons donc une IA faible ou étroite, une IA forte ou générale. Qu'il s'agisse d'une IA faible ou d'une IA étroite, c'est un type d'IA que nous interagissons avec notre vie quotidienne. Il est conçu pour effectuer une tâche précise ou un ensemble de tâches spécifiques que nous pouvons inclure dans ce cas, comme l' assistance vocale comme l'assistance City Alex ou Bullet, les systèmes de recommandation, comme ceux que nous voyons sur assistance vocale comme l'assistance City Alex ou Bullet, les systèmes de recommandation, Netflix ou Amazon, logiciels de reconnaissance d' images et les filtres spa dans les e-mails. Ces systèmes sont excellents et constituent des tâches spécifiques mais peuvent être exécutées en dehors des domaines de leur programme. Ils n'ont ni intelligence ni conscience générales. Dans ce cas, nous arrivons à l'IA forte ou à l'IA générale. À ce stade, il s'agit plutôt d'un concept théorique. IA forte désigne une machine dotée de conscience, sensibilité et d'esprit, capable d' appliquer son intelligence à n'importe quel problème, plutôt qu'à une seule tâche spécifique Ces types d'IA incluraient des éléments tels que le raisonnement, la résolution d'énigmes, prise de décisions avec certitude, la planification, l'apprentissage, la communication en langage naturel, l' intégration de toutes les compétences vers un objectif commun. Bien que vous n'y soyez pas encore, c'est l' objectif ultime des chercheurs en IA. C'est le genre d'IA que nous voyons dans des films comme Terminator, Matrix, etc. Nous allons maintenant apprendre ce qu' est l'apprentissage automatique. L'apprentissage automatique est un sous-ensemble de l'IA. L'apprentissage automatique est l'endroit où les choses deviennent vraiment intéressantes de notre point de vue. Dans le cadre de la programmation traditionnelle, nous fournissons à l'ordinateur un ensemble d'instructions explicites pour résoudre un problème. Mais avec l'apprentissage automatique, nous adoptons une approche différente. Au lieu d'écrire des instructions explicites, nous donnons à la machine une grande quantité de données et la laissons apprendre à résoudre nos problèmes. Et comment cela fonctionne-t-il ? Nous alimentons donc la machine avec de grands ensembles de données. La machine analyse et identifie les modèles. Sur la base de ces modèles, la machine peut créer ses propres règles ou algorithmes. La machine peut ensuite appliquer les règles aux nouvelles données de péché afin de faire des prédictions. Par exemple, au lieu de programmer un ordinateur avec toutes ces règles, ce qui fait d'un e-mail un spam, nous pouvons le montrer sous forme de milliers d' exemples de courriers indésirables ou non. L' algorithme d'apprentissage automatique apprendra ensuite à identifier les caractéristiques des spams et pourra ensuite appliquer ces connaissances à de nouveaux e-mails inédits. L'essentiel ici est que les systèmes d'apprentissage automatique améliorent leurs performances grâce à l'expérience. Plus ils traitent de données, ils deviennent une meilleure tâche. Cette capacité à apprendre et à s'améliorer grâce à l'expérience sans être explicitement programmé est ce qui distingue l'apprentissage automatique. Et puis côté apprentissage automatique, il existe plusieurs types d'apprentissage. Dans le cadre de l'apprentissage non supervisé , les données ne sont pas étiquetées ou les clusters de données ne sont pas étiquetés, et c'est à la machine d' identifier et d'étiqueter ces ensembles Ensuite, nous avons l' apprentissage supervisé où nous avons alimenté la machine avec des données déjà étiquetées. Il sera plus facile pour la machine d'apprendre avec ces ensembles de données. Ensuite, nous avons l'apprentissage renforcé dans le cadre duquel la machine apprendra en recevant des récompenses ou des punitions tout comme elle apprendra avec ces données et en nous donnant le résultat Nous pouvons donc maintenant passer à la troisième partie de notre contexte de l'IA, à savoir le deep learning. deep learning fait le machine learning à un niveau supérieur. Il s'agit d'un sous-ensemble de cette partie de l'apprentissage automatique inspirée de la structure et du fonctionnement du cerveau, en particulier de l'interconnexion de nombreux neurones L'apprentissage profond utilise des structures appelées réseaux neuronaux artificiels, qui sont des systèmes logiciels conçus pour imiter la façon dont les neurones de notre cerveau se connectent et communiquent Tout comme notre cerveau peut identifier des modèles et donner un sens à des données complexes, les algorithmes d'apprentissage profond peuvent exécuter des fonctionnalités similaires. L' apprentissage profond et profond fait référence au nombre de couches de ces réseaux neuronaux, alors qu'un réseau neuronal simple peut n'avoir qu' une ou deux couches, et les systèmes d'apprentissage profond peuvent en avoir des centaines. Chaque couche du réseau neuronal Depo traite les données qu'elle reçoit, extrait les caractéristiques et transmet les informations traitées à la couche suivante Au fur et à mesure que les données traversent ces couches, le réseau peut apprendre caractéristiques de données de plus en plus abstraites et complexes. Cela rend l'apprentissage profond particulièrement efficace pour la reconnaissance d'images et de voix, traitement du langage naturel, traduction entre les langues, génération d' images et de vidéos réalistes même la création d'art musical Comme nous le voyons maintenant à l'écran, nous avons également les parties des réseaux neuronaux. Examinons donc un peu plus en profondeur réseaux neuronaux, car ils sont à la base de l'épuisement. Il existe plusieurs types de réseaux neuronaux, chacun étant conçu pour des types de tâches spécifiques. Vous avez donc le réseau neuronal à transmission directe. Ce sont les types les plus simples de réseaux neuronaux artificiels. Les informations se déplacent dans une seule direction entre la couche d'entrée et les couches cachées, puis nous obtenons le résultat sur la couche de sortie. Ils sont utilisés pour des tâches simples telles que la classification et la régression. Nous avons également le réseau neuronal récurrent. Ces réseaux disposent de connexions pour ces cycles de formulaires, ce qui permet aux informations de persister. Ils sont particulièrement efficaces pour traiter des données séquentielles telles que du texte ou des séries chronologiques Et ils sont utilisés dans des tâches telles que la traduction linguistique et la reconnaissance vocale. Nous voyons ensuite les réseaux neuronaux convolutifs. Ils sont conçus pour traiter les données avec une topologie en grille, telles que les images Ils utilisent une opération mathématique appelée convolution au lieu d' une multiplication matricielle générale dans au moins une de ces couches là qu'ils ont le choix pour tout type de tâche d'analyse d' image. Chacun de ces réseaux a ses forces et ses faiblesses, et nous avons choisi en fonction du problème spécifique à résoudre. Et maintenant, comment assembler toutes ces pièces pour créer une application ? Maintenant que nous avons compris les différents composants, voyons comment l'apprentissage automatique basé sur l'IA et deep learning fonctionnent ensemble dans le scénario du monde réel. Prenons l'exemple d'un système de détection d' objets dans une voiture autonome. La partie IA, le système exagéré qui permet à la voiture de percevoir son environnement, prendre des décisions et de contrôler ses mouvements Cela inclut non seulement la détection d'objets, mais également la planification des itinéraires, le respect des règles de circulation et l'interaction avec les autres véhicules et les piétons Nous passons ensuite à la partie apprentissage automatique qui est le moteur sous-jacent qui permet à l'IA d' apprendre à partir de grandes quantités de données de conduite. Cela inclut d'apprendre à reconnaître différents types d' objets tels que les voitures, les piétons et les panneaux de signalisation, comprendre l' état des routes et s'adapter aux différents scénarios de conduite L'architecture d'apprentissage profond et, dans ce cas, les CNN ou les réseaux neuronaux convolutifs utilisés entrent dans la tâche complexe de détection d' objets dans les images et Le CNN traite l' entrée visuelle de la caméra de la voiture, identifiant et localisant les objets en temps réel Dans ce scénario, l'IA fournit le cadre global et le processus de prise de décision. L'apprentissage automatique nous permettra ensuite d'améliorer les performances du système au fil du temps à mesure qu'il sera confronté nouveaux scénarios et à des scénarios de complexité. Dans ce cas, l'apprentissage en profondeur nous fournira un modèle puissant pour reconnaître les capacités nécessaires à pour reconnaître les capacités nécessaires détection et à la classification d'objets en temps réel. Quelles sont donc les applications réelles de ce type de technologies que nous pouvons rencontrer ou avoir dans un avenir proche ? Dans les applications d'intelligence artificielle, nous pouvons utiliser des robots de discussion, la reconnaissance vocale, des voitures autonomes, assistants virtuels tels que City, Alexa et Google, des appareils domotiques, appareils domotiques ainsi que la maintenance prédictive dans le secteur de la fabrication. Nous pouvons ensuite passer à l'apprentissage automatique où nous avons le filtrage des e-mails, la détection des fraudes, les systèmes de recommandation tels que Netflix, Amazon, Spotify, ainsi que les prévisions météorologiques. Dans le domaine de l'apprentissage profond, nous pouvons avoir recours à des technologies telles que la reconnaissance faciale , la conduite autonome, le diagnostic médical , le traitement du langage naturel, etc. Les avantages de cette technologie pour le monde entier peuvent avoir un impact considérable sur les soins de santé, la protection de l'environnement, l'éducation, l'accessibilité, recherche scientifique, les affaires, l'économie et les transports. Comme nous l'avons vu, l'IA, le machine learning et le deep learning ne façonnent pas seulement notre avenir. Ils sont également actifs pour améliorer notre présent. Ces technologies résolvent des problèmes et créent des opportunités inimaginables il y a encore quelques années Cependant, il est important de se rappeler qu'un grand pouvoir implique de grandes responsabilités. À mesure que ces technologies s' intègrent de plus en plus dans nos vies, nous devons également tenir compte de leurs implications éthiques. Et veillez à ce qu'ils soient développés et utilisés de manière à bénéficier à l'humanité tout entière. L'avenir est certainement prometteur, et il repose sur des lignes d'objectifs, des réseaux neuronaux et des données. Que vous soyez étudiant, professionnel ou simplement curieux, je vous encourage à continuer à vous renseigner sur ces domaines fascinants car qui sait, vous pourriez peut-être être à l'origine d' une prochaine découverte. Merci de m'avoir rejoint dans ce voyage à travers l' IA, l'apprentissage automatique et le deep learning. Et maintenant, nous pouvons passer aux parties les plus intéressantes qui sont le codage des zones de terminaison 3. 03.Réseaux neuronaux: Nous abordons maintenant la partie du réseau neuronal que nous utiliserons dans ce cours pour détecter les images Nous utiliserons le réseau neuronal convolutif que nous avons appris auparavant mieux comprendre de quoi il s'agit Nous pouvons donc commencer par définir un réseau convolutif constitué de un réseau convolutif constitué types spécialisés de réseaux neuronaux conçus spécifiquement pour le traitement de données visuelles Ils sont devenus l'épine dorsale de nombreuses applications, jouant un rôle crucial dans des tâches telles que la détection d'objets, classification d' images, la reconnaissance faciale, etc. Mais qu'est-ce qui rend les CNN si spéciaux ? Eh bien, ils s'inspirent des processus biologiques du cortex visuel des animaux. Tout comme notre cerveau peut rapidement reconnaître des modèles et des objets dans ce que nous voyons, les CNN peuvent être entraînés à faire exactement la même chose avec les images et les vidéos numériques Les réseaux neuronaux convolutifs nous présentent certaines caractéristiques clés Alors maintenant, décomposons-les. Nous avons donc d'abord les couches convolutives. Ils sont au cœur des éléments de base de CNN. Ils appliquent une série de filtres à l'image d'entrée, chacun étant conçu pour détecter des caractéristiques spécifiques telles que les bords, les textures ou les motifs plus complexes. Au fur et à mesure que nous approfondissons le réseau, ces fonctionnalités deviennent de plus plus abstraites et sophistiquées. Nous avons alors également des couches de traction. Après la convolution, nous utilisons souvent ces couches de traction. Ils réduisent la dimension spatiale des données, rendent le réseau plus efficace en termes de calcul et l'aident à se concentrer sur les fonctionnalités les plus importantes Les types courants incluent la traction maximale et la traction moyenne. Nous passons ensuite aux couches entièrement connectées qui se trouvent généralement à l'extrémité du réseau. Ces couches connectent chaque neurone de la couche précédente à chaque neurone de la suivante, et elles sont utilisées pour effectuer la classification ou la prédiction finale en fonction des caractéristiques, des extraits des couches Tout cela fonctionne, c'est le calcul qui sous-tend tout cela. Nous avons donc ici un exemple de réseau neuronal dans cette image. La fonction d'activation est un élément crucial. Dans de nombreux CNN, nous avons utilisé ce que l'on appelle la fonction Lu, comme vous pouvez le voir ici, qui signifie unité linéaire rectifiée, et la forme est simplement cette formule mathématique qui est notre fonction d'activation dans ce cas Cela signifie que pour toute entrée X, si X est négatif, la fonction renverra zéro. Si X est positif, il renvoie X lui-même. Cette fonction simple permet d'introduire non-linéarité dans notre réseau, lui permettant d'apprendre des modèles plus complexes L'avantage de ce Lu réside dans son efficacité informatique et contribue à atténuer les dégradés de disparition qui peuvent se produire Maintenant, pour ce qui est de la structure et de la raison d'être de ce réseau neuronal profond, nous en comprenons les composants. Voyons donc comment ils se combinent dans le CNN typique pour la détection en temps réel dans ce cas, que nous allons utiliser dans notre application. Donc, pour notre détection d' objets en temps réel, nous avons les entrées. C'est là que nous alimentons nos données. Dans ce cas, nous avons un modèle de tendance prane. Ensuite, la convolution, la première couche convolutionnelle qui applique les filtres pour détecter les entités de bas niveau Dans ce cas, nous utilisons le framework package tensor flow dans notre application Nous utilisons ensuite la couche de traction pour réduire la dimension spéciale. Nous utilisons également la convolution, une autre couche convolutionnelle qui détecte le niveau des yeux des entités Nous utilisons ensuite à nouveau le pull, tel que nous le voyons sur l'image, nous réduisons les dimensions et nous nous concentrons sur les fonctionnalités clés. Nous avons également à la fin la couche entièrement connectée qui effectue notre classification et notre détection. Ensuite, nous voyons le résultat sur la couche de sortie, telles que les classes d'objets et les allocations dans l'image. Cette structure permet au réseau d' apprendre progressivement des caractéristiques plus complexes des arêtes simples aux objets complexes. Lorsqu'il s'agit de mettre en œuvre la détection d' objets au moment du fichier de CNN, nous utilisons souvent des modèles pré-entraînés Il s'agit de CNN qui ont déjà été entraînés sur de grands ensembles de données et qui peuvent reconnaître une grande variété d'objets Nous pouvons ensuite les affiner pour trouver notre cas spécifique, ce nous permet d'économiser beaucoup de temps et de ressources informatiques Un cadre populaire pour cela est celui que nous avons mentionné précédemment, le flux tensoriel Il fournit une API de haut niveau qui facilite la création, entraînement et le déploiement de réseaux de neurones, y compris notre réseau de neurones convolutifs Les applications de ces CNN sont vastes Nous pouvons donc utiliser ces réseaux pour les véhicules autonomes, imagerie médicale, la reconnaissance faciale, la modération de contenu et la réalité augmentée. En conclusion, les réseaux neuronaux convolutifs ont révolutionné le domaine de la vision par ordinateur, permettant aux machines de voir et de comprendre le monde comme nous le faisions dans le domaine de la science-fiction Alors que nous continuons à affiner ces modèles et à développer de nouvelles architectures, les possibilités sont vraiment passionnantes. Que vous soyez chercheur, développeur ou simple intéressé par ce domaine, CNN sont définitivement une technologie à surveiller Ils ne font que façonner la vision par ordinateur et améliorer la fonctionnalité elle-même. Cela nous permet de mieux comprendre comment nous allons créer notre application. 4. 04.Installer VSCode: Dans ce cours, j'utiliserai code de Visual Studio pour modifier du texte. Ce sera donc notre identifiant. N'hésitez pas à utiliser celui auquel vous êtes le plus habitué. Si vous n'en avez pas, je vous conseille d'installer celui-ci pour coder avec moi sur cette coque. Et si vous ne le savez pas, code de Visual Studio est un identifiant, éditeur de texte ou un éditeur de code Il fait partie de l'environnement Microsoft et nous permet d' avoir de nombreuses extensions prises en charge par la communauté et également par les grandes entreprises. Et cet identifiant prend en charge de nombreuses langues. Encore une fois, les extensions sont un élément essentiel pour cet identifiant et le développement de logiciels, également en tant que terminal intégré, ce qui est très cool, et en tant que support GIT. Donc, pour installer le code Visual Studio, il vous suffit de cliquer ici sur ce bouton. Dans mon cas, il apparaît que je vais déménager pour Mac parce que j' utilise un environnement Mac. Mais selon le type de système d'exploitation que vous possédez, cela vous semblera différent. Il suffit donc de cliquer dessus. Et une fois qu'il sera téléchargé, nous continuerons. Donc, une fois le téléchargement terminé, il vous suffit de vous rendre sur le site de téléchargement de Con. Il peut s'agir d'un fichier Zip, il vous suffit de l'extraire, et selon votre système d'exploitation, vous aurez un fichier exécutable ou un fichier DMG pour MAC Nous allons donc appuyer deux fois dessus et procéder à l'installation. Une chose à noter est que nous avons une petite case à cocher à ajouter à Path. Faites-le car cela vous permet d'ouvrir l'éditeur via le terminal avec une simple commande. Une fois installé, il est ouvert, vous pouvez voir l'identifiant ici, et nous y reviendrons ensuite. Mais pour l'instant, notre identifiant est installé et nous pouvons continuer. 5. Extensions 05.VSCode: Maintenant que nous avons notre éditeur, nous allons installer quelques extensions. Les extensions nous permettent donc essentiellement d'améliorer le flux de travail. Nous a aidés à corriger quelques bugs pour détecter certaines parties, avec le GID et même le texte à colorier Donc, c'est vraiment à vous de décider. Mais dans ce cas, nous utiliserons une partie de PyTON et de l'API FAST, et nous installerons des extensions qui s'appuieront sur elle Dans notre base d'extensions, nous aurons donc besoin de tous ces packages Byton pour nous aider à mieux coder, à coder plus facilement et à assurer le support Il existe des pylônes dotés essentiellement de l'intelligence nécessaire pour prédire ce que nous voulons sur la côte et également signaler certaines erreurs sur la côte ou certaines options pour l' améliorer Nous avons également besoin de Biton, donc du langage, du débogueur pour déboguer notre système, l'environnement géré. Nous aurons donc gestion virtuelle ou des environnements virtuels pour exécuter notre Ils auront donc également besoin du lien ou du pylône pour masquer notre code afin de voir où nous voulons le formater et le garder le même pour toutes les équipes dans ce cas Et ce sont les packages dont nous avons besoin, et nous pouvons installer tous ces packages avec un seul. Nous avons donc ce pack d' extension Python dans lequel nous installerons tous les packages que nous avons vus auparavant. Il suffit donc de procéder à l' installation de celui-ci. Il installera les autres avec, et nous vous demanderons de relos Il suffit donc de recharger le code de Visual Studio, et nous aurons les packages nécessaires 6. La meilleure façon de suivre le cours: Dans cette conférence, nous allons apprendre comment tirer le meilleur parti de ce cours. Dans le domaine des logiciels, en particulier lorsque nous apprenons, nous rencontrons de nombreux obstacles, même lorsque nous suivons les codes en même temps que les vidéos. Cela est dû à une mauvaise saisie, des erreurs du professeur ou, plus fréquemment des logiciels et à des packages en constante évolution. Alors, que devez-vous faire si vous êtes bloqué, vous ne pouvez plus poursuivre le cours Tout d'abord, ne payez pas un sou, c'est normal. Cela arrive à tout le monde. Comme je ne peux pas répondre à toutes les questions, assurez-vous d'utiliser l'onglet de discussion sur les partages de compétences où vous pourrez trouver étudiants ayant le même problème que vous et où vous pourrez avoir un fil de discussion avec toutes vos questions et réponses. Nous pouvons donc vous aider à poursuivre le cours. Comme les logiciels changent constamment, je m'assurerai de laisser ressources dans les sections des ressources de Skills Share, où vous pourrez télécharger les exigences, package Jason et les versions correctes de tous les packages dont vous avez besoin pour ce cours. Nous laisserons également les images afin que vous puissiez télécharger les images que nous utiliserons dans ce cours. Si vous êtes toujours bloqué, utilisez Google. Dans la solution, Google renvoie souvent de nombreux résultats, et vous pouvez également tirer des leçons de cette recherche. De nombreux étudiants auront la même erreur. De nombreuses personnes dans le domaine des logiciels auront la même erreur, ce qui peut vous aider à la résoudre. Lisez la documentation. De nombreuses plateformes, packages ou langages de programmation nous fournissent une documentation complète ou didacticiels sur la façon de l'installer et de l'utiliser. Donc, si vous en avez plein, veuillez parcourir la documentation et suivre les étapes qui s'y trouvent, car cela pourrait vous aider à suivre le cours et à vous approvisionner Vous pouvez également demander à AI. Ces outils sont là pour vous aider à coup sûr, et nous pouvons fournir une solution rapide au problème avec des explications supplémentaires. Cela vous aidera à résoudre le problème expliquer ce qui s'est passé et ce que vous avez mal fait. Si vous suivez ces recommandations, votre expérience sera plus fluide et votre qualité globale sera améliorée. Une fois tout cela clarifié, nous pouvons tous aller plus loin. 7. Ressources: Dans ce cours, nous utiliserons certaines ressources, et pour les trouver, il vous suffit de parcourir le cours et de les trouver ici. Le dossier zip contiendra donc des liens, des images et d'autres ressources nécessaires que nous allons insérer tout au long du cours . N'hésitez donc pas à le télécharger et à suivre la vidéo. 8. 08. FastAPI et Python: Dans cette conférence, nous allons donc explorer certaines technologies passionnantes qui constituent la base de notre application de reconnaissance d' objets basée sur l'IA. Plus précisément, nous discuterons BTN et de l'API rapide et de la manière dont ces puissants outils nous permettent de créer un backend robuste et efficace dans notre application d'IA Commençons donc par BTN. Beaucoup d'entre vous connaissent déjà ce langage de programmation polyvalent, mais rappelons pourquoi il est si crucial pour notre projet PyTon est souvent appelé le langage de l'IA pour de bonnes raisons Tout d'abord, sa syntaxe est claire et intuitive, ce qui facilite l'écriture et la compréhension d'algorithmes complexes. Cela est particulièrement important lorsqu'il s'agit de concepts d' IA et d'apprentissage automatique. PyTN possède également un riche écosystème de bibliothèques et frameworks spécialement conçus pour IA et l'apprentissage automatique Cela signifie que nous disposons d'une multitude d'outils pour créer des applications d'IA sophistiquées. De plus, la communauté nombreuse et active de Python garantit que nous disposons de nombreuses ressources, didacticiels et supports pendant le développement de notre application. Mais le PTN n'est pas réservé à l'IA. Sa polyvalence nous permet également de l'utiliser pour le développement Web. Analyse des données, automatisation et bien plus encore. Cela constitue un guichet unique pour bon nombre de nos besoins de développement, y compris la fin de notre application de reconnaissance d'objets AI. Parlons maintenant un peu plus de FASTEPI. FASTEPI est donc un framework Web moderne de haute performance pour créer des API avec Mais qu'est-ce que cela signifie et pourquoi est-ce important pour notre projet ? D'abord et avant tout, l'API FAST porte bien son nom. C'est rapide. En fait, c'est l'un des frameworks PyTN les plus rapides du marché. Cette vitesse est cruciale lorsqu'il s'agit reconnaître des objets en temps réel, car nous avons besoin que notre application réponde rapidement aux entrées des utilisateurs. L'API Fast est également incroyablement facile à utiliser. Si vous êtes à l'aise avec PyTon, vous constaterez que vous pouvez rapidement familiariser avec Fast API Il utilise des indices de type PTN standard, qui non seulement facilitent la compréhension de votre code mais permettent également une validation automatique des données Une autre fonctionnalité intéressante de l' API FAST est la génération automatique de documentation. Cela signifie que lorsque nous créons notre API, l' API FAST crée automatiquement une documentation interactive pour celle-ci. Nous verrons cela plus loin dans notre cours. Et cela est extrêmement utile pour tester notre API pour tous les futurs développeurs susceptibles de travailler sur notre projet. FASTEPI prend également en charge la programmation synchrone, ce qui permet à notre application de traiter efficacement plusieurs Et cela est essentiel pour créer une application d'IA réactive capable de servir plusieurs utilisateurs simultanément. Alors, comment PyTon et FASEPI sont-ils intégrés dans notre application que nous allons créer à partir de personne ? Alors décomposons-le. Nous utilisons Python pour gérer la logique de base de notre application, notamment les images de traitement, exécution de notre modèle d'IA pour la reconnaissance d'objets et la gestion du flux global de données dans notre système. L'API FAS, quant à elle, fournit un cadre pour notre API Web Cela nous permet de créer des points de terminaison avec lesquels notre interface peut communiquer Par exemple, nous pouvons avoir un point de terminaison qui accepte et applaudit l'image et renvoie une liste des objets reconnus dans cette image L'API rapide nous aide à mettre fin à toutes ces demandes entrantes et réponses sortantes. Il prend en charge des tâches telles que l' analyse de l' image et des données entrantes et le formatage de nos modèles d' IA pour obtenir une réponse compréhensible par notre interface La simplicité de PTN et la nature intuitive de API FAST nous permettent également de développer et d'interagir rapidement, ce qui est crucial dans le monde trépidant de l'IA En conclusion, PTN et FASEPI forment un duo puissant qui nous permet de créer un back-end robuste, efficace et évolutif pour notre application de reconnaissance d'objets basée sur l' IA PTN nous fournit les outils et les bibliothèques dont nous avons besoin pour le développement de l'IA, tandis que FASEPI propose un cadre de haute performance pour exposer nos capacités d'IA au monde entier Au fur et à mesure que nous progressons dans ce cours, vous gagnerez de l'expérience avec PyTON et l'API FAST En voyant d'abord toutes ces technologies se réunir pour créer quelque chose de vraiment passionnant. N'oubliez pas que les compétences que vous apprenez ici ne sont applicables qu'à notre projet spécifique. La combinaison de PyTon et d'une API rapide utilise diverses applications d'intelligence artificielle et d'apprentissage automatique dans tous les secteurs Vous êtes en train de développer un ensemble de compétences de base qui vous sera utile dans de nombreux projets de longs métrages. Lors de nos prochaines sessions, nous commencerons à écrire du code et verrons ces concepts en action. Préparez-vous à donner vie à votre acte de reconnaissance des objectifs en matière d'IA . 9. 09. Installer Python sur MacOS: Nous allons donc maintenant installer PyTon dans un environnement Mac OS. Si vous n'avez pas de Mac OS, vous pouvez sauter cette leçon et passer à la conférence Windows où nous installons PyTon sur Windows Machine Dans macOS, nous avons donc plusieurs options pour installer PTN. Donc, le premier que nous allons utiliser est d'installer PyTon via Brew Brew est donc un gestionnaire de packages ou un installateur de packages sous macOS. Nous devons d'abord ouvrir notre terminal et entrer cette commande. Ne t'inquiète pas. Je vais laisser toutes ces commandes dans les ressources afin que vous puissiez les copier facilement. Donc, une fois que nous avons cette commande, il vous suffit de la coller ici et d'appuyer sur Entrée. Je vais vous demander vos mots de passe. Il suffit donc de saisir les mots de passe. Et nous appuyons sur Entrée pour installer le breuvage. Maintenant que notre brew est installé, nous pouvons procéder à l' installation de PyTon Dans ce cas, je vais simplement vider mon terminal. Il suffit de taper Brew Install PytnPressenter, et après cela, PyTon Donc, si tout s'est bien passé, vous devriez voir quelque chose comme ça. Une autre façon d' installer PTN la plus courante et la plus conseillée pour installer le langage PyTON, consiste à utiliser le site Web officiel , puis à télécharger Donc, simplement ici, vous avez des téléchargements, ne vous inquiétez pas, je vais laisser tous ces liens dans les ressources. Il vous suffit de trouver la version dont vous avez besoin. Dans ce cas, si vous appuyez sur ce bouton, la dernière version de votre système d'exploitation sera déchargée votre système d'exploitation Il ne s'agira que d'un package à installer. Vous allez le télécharger, l'installer, et PTN et le package feront tout pour vous. La troisième façon d'installer PTN est d'utiliser BM, donc PM nous permet d'installer des versions spécifiques de PTN, et nous l' installons également via Brew, nous pouvons donc simplement dire Installez Pi M. Il suffit donc de cliquer dessus. Après son installation, nous pouvons consulter la liste d'installation de PyM Si nous cliquons, cela nous donnera la liste des pytes et des versions disponibles à installer, il suffit donc d'appuyer sur Entrée Et comme vous pouvez le constater, nous avons de nombreuses versions de Python à installer. Quoi qu'il en soit, vous choisissez toujours le dernier . Nous l'avons installé. Et une fois Python installé, nous pouvons simplement effacer mon terminal. Nous pouvons voir le Python que nous avons installé, et si tout va bien, vous devriez pouvoir taper Python 3 car Python 3 est le dernier en date et c'est celui que nous allons utiliser dans ce cours. Et nous utilisons simplement le tag Version, et nous voyons celui que nous avons installé. Appuyez donc sur Entrée. Et comme vous pouvez le voir, actuellement, dans mon système, Python 3.12 0.0 est installé Nous devrions donc également avoir quelque chose autour de cette version. Et avec cela, nous voyons que tout s'est bien passé et que PyTon est installé sur notre système 10. 10. Installer Python sur Windows: Nous allons maintenant procéder à l'installation de BTN sur la machine Windows S'il est sur notre machine Windows, vous pouvez sauter cette leçon et passer à la partie MacBook où nous allons installer PytNon Quoi qu'il en soit, si vous avez une machine Windows et que vous voulez suivre ce cours via Windows, vous pouvez continuer avec cette vidéo. la plus recommandée pour installer PyTon sur la machine Windows consiste donc PyTon sur la machine Windows consiste le site officiel Je laisserai le lien lien direct vers le site Web sur les ressources. Donc, en gros, il vous suffit de vous rendre sur le site Web de PyTon, de télécharger des parties Et vous aurez ici la bonne version pour votre machine. Il vous suffit d'appuyer sur le bouton de téléchargement, de télécharger le package, puis de procéder à l'installation. Donc, après les téléchargements, vous cliquez sur l'icône qui télécharge et vous verrez une fenêtre comme celle-ci. Il est donc important de noter que nous devons cocher cette case ici Nous demanderons donc à PTN de passer, et une fois cette case cochée, vous pourrez simplement procéder à l'installation maintenant Ici aussi, nous pouvons désactiver la limite de longueur de chemin car certains systèmes n'autorisent pas un grand nombre de caractères, mais cela peut entraîner des problèmes dans notre système, nous pouvons donc simplement la désactiver. Et puis nous avons une installation réussie. Ensuite, après l'installation, nous pouvons ouvrir notre invite de commande pour vérifier la version, nous faisons simplement Python puis l'indicateur de version. Comme nous pouvons le constater, nous avons installé avec succès PTN sur notre machine Windows Une autre façon d'installer PyTon est d'ouvrir notre Microsoft Store et pendant la guerre de recherche, nous faisons simplement PyTon, puis nous pouvons voir PyTon 3 et nous avons ces versions Python de la dernière version stable, puis nous appuyons simplement sur G, et le PTN sera installé À noter, c'est le moyen le plus simple d'installer le PTN, mais le moins personnalisable 11. 11. Installer et exécuter FastAPI: Nous allons donc maintenant créer notre serveur d'API rapide. La première chose à faire est de créer un nouveau dossier dans lequel nous conserverons nos applications. Je peux donc simplement créer un nouveau dossier ici. Vous pouvez créer vos dossiers comme vous le souhaitez. Cela n'a pas d'importance et ce que vous voulez n'a pas d'importance non plus. Et maintenant, je vais l'appeler mon application d'apprentissage. Maintenant que vous avez notre dossier, nous pouvons ouvrir notre dossier et encore une fois, créer un nouveau dossier que nous appellerons serveur. Et nous avons créé nos dossiers. Encore une fois, nous devons l'ouvrir avec le code Visual Studio. Si vous avez votre code Visual Studio dans le message, vous pouvez simplement l'ouvrir comme ceci. Sinon, nous l'ouvrirons via le terminal. Ouvrons donc un terminal. Maintenant, j'ai mon terminal et je vais accéder à mon bureau. Et sur mon bureau, j'ai un dossier appelé mon application d'apprentissage. Et à l'intérieur de ce dossier, j'ai, encore une fois, un autre dossier appelé serveur. Alors maintenant, je peux l'ouvrir avec code Visual Studio avec ce code simple, un espace, puis un point. Et puis nous avons notre code Visual Studio, et nous sommes dans le bon dossier ici. Si, pour une raison quelconque, la commande cos point n' ouvre pas votre Visual Studio, nous pouvons résoudre ce problème très facilement. Ouvrez donc votre code Visual Studio d'une autre manière. Il suffit donc de cliquer sur l'application où vous l'avez sur votre système, puis elle s'ouvrira, puis vous pourrez voir ici la commande. Ainsi, vous pouvez voir la commande. Donc, sur Mac, la commande Shift et B sous Windows devraient être Control, Shift B. Donc, veuillez l'ouvrir, puis vous pourrez rechercher Shell Commandez, et vous pouvez déjà le voir. Installez donc le code dans le chemin de commande. suffit donc de cliquer ici et vous devrez peut-être redémarrer votre terminal, puis nous aurons cette commande à votre disposition. Maintenant, à l'intérieur de notre serveur, nous allons créer un fichier, et notre fichier s'appellera main point pi ou PY four PyTon Ainsi, à l'intérieur de notre point principal pi, nous ajouterons la première route pour le FastAPI. Nous appellerons les premiers packages nécessaires à l'API FAST Nous pouvons donc simplement dire qu' à partir de l'API FAST, nous importons le package d'API rapide. Nous devons donc l'utiliser, puis nous le démarrons dans la constante, donc il y aura API rapide et les accolades parce que c'est une classe D'accord, nous allons maintenant avoir le premier itinéraire. Notre premier itinéraire sera donc un get route, par exemple , et une démonstration de l'API rapide. Nous allons donc dire ajouter. Comme nous appelons une classe FastAPI, puis nous disons G, puis G, nous avons nos routes ou route racine qui ne seront qu'une Et puis, dans nos méthodes get, nous aurons une fonction de synchronisation. Un récepteur est donc une fonction synchrone qui s' exécute dans les deux sens sans attendre le reste du code Et puis Df est ce que nous appelons une fonction en Python, et nous disons deroot Donc, le nom de notre fonction, les accolades ouvertes, puis le point-virgule, puis nous avons le retour et nous allons simplement renvoyer Le message sera donc juste entre guillemets, puis nous retournerons au monde inférieur. Donc, ce qui est important ici à Byton, nous avons toujours besoin de cette identification pour que le code fonctionne Si nous le faisons comme ça, cela provoquera une erreur car ce bloc identifié est vraiment nécessaire Maintenant, pour que notre application fonctionne, nous devons créer un environnement virtuel. L'environnement virtuel nous permet d'exécuter le Python dans un environnement fermé. Et pour cela, il ne nous reste plus qu'à nous concentrer sur notre projet. Je peux simplement ouvrir un terminal dans le code sal Studio. Donc ici, et ensuite je dirai juste PyTon ou Python trois. VM pour environnement virtuel, puis point VM. Et pourquoi créons-nous un environnement virtuel ? Ainsi, dans un environnement virtuel cela nous permet d'exécuter des versions de PyTon et même nos packages sans être influencés par le système extérieur Nous créons donc juste une sorte d'encapsulation, donc un environnement qui permet d'exécuter cette version de PyTon sans perturber ou entrer en conflit avec notre Ici, je vais simplement appuyer sur Entrée. Et là, vous pouvez voir crée deux dossiers. Ainsi, le cache cache les codes Python et l'environnement virtuel, lequel l' application s'exécute, puis à l' avenir, les packages. Mais nous devons tout de même gérer notre environnement virtuel. Donc, pour l'exécuter, nous pouvons simplement dire source point VM BMF Mac. Si vous êtes sur un Mac, c'est BM si vous êtes sur Windows, ce sont des scripts. Donc, comme nous avons un dossier BM, vous pouvez le consulter ici. Nous dirons Bin, puis nous activerons l'environnement virtuel. Il suffit donc d'appuyer sur Entrée. Et comme vous pouvez le constater, nous fonctionnons maintenant dans l'environnement virtuel. Cet environnement virtuel y exécutera donc toujours la même version de Python et le package sera installé sans qu'il soit nécessaire de modifier chaque fois que vous changez de système, qui est suffisant pour ce que vous voulez faire ici. Maintenant, nous pouvons enfin lancer notre application. Dans ce cas, nous disons simplement fast API, dev, puis le fichier que nous voulons exécuter. Nous voulons donc exécuter le point principal PI, nous nous contentons du point principal py. Donc, PY pour Python, puis il suffit d'appuyer sur Entrée et l'application s'exécute. Ici, vous pouvez suivre cet itinéraire, et c'est ce que notre itinéraire renvoie. Donc, la barre oblique dans ce cas. Alors, si vous le remarquez, nous avons également ici cette documentation d'API. L'API FAST sera donc créée immédiatement sous forme de document, et nous pourrons vérifier toutes nos routes et tester nos routes ainsi que la documentation, en accédant simplement à cette URL ici Encore une fois, si je passe par le même et ensuite par un Doc, nous aurons un FastAPI fanfaron avec notre pourriture Pour l'instant, nous n'avons que le root, mais au final, plus loin dans le parcours, nous aurons d'autres itinéraires ici. Donc, ici, sur les quais, vous pouvez voir, vous pouvez essayer le parcours Donc, si je veux simplement exécuter, nous aurons des tests que nous définirons ici 12. 12. Un autre exemple d'itinéraire: Nous pouvons envisager un itinéraire plus complexe que nous pouvons utiliser dans notre application. Donc, tout d'abord, je vais coller ici un simple objet. Donc, cet objet, vous pouvez voir que nous avons trois éléments avec un nom et une description. Ce sera donc en quelque sorte notre assistant de description de l'article qui nous permettra de naviguer vers une page contenant ces informations. Je vais laisser cet objet dans les ressources afin que vous puissiez simplement copier-coller dans votre projet afin de ne pas avoir à tout taper. Alors maintenant, la première chose à faire est de créer un autre Grow comme nous le faisions auparavant, nous le ferons simplement sur l'application. Encore une fois, notre application Fast API, puis nous disons G, puis nous ouvrons les accolades, et nous voudrons que notre itinéraire soit nommé items Ensuite, slash, puis pour chaque article, nous aurons l'article Nous allons donc passer à cet argument pour obtenir chacun de ces éléments. Encore une fois, nous devons définir notre fonction et cette fonction, nous pouvons la nommer get item, puis nous transmettrons notre identifiant Im qui sera, dans ce cas, un entier. Donc, ici, nous supposons simplement le type. Nous sommes toujours un nombre entier. Ensuite, nous fermons ici, puis nous pouvons créer une variable nommée item, qui serait les items. Donc, notre objet get get et obtiendra l'identifiant ITNS. Nous allons donc transmettre cet identifiant Ian dans notre fonction, puis nous obtiendrons exactement le même entier à partir de notre objet. Ensuite, nous gérons un peu les erreurs. Donc, si ITN n'est pas, donc si nous n'existons pas, nous pouvons simplement renvoyer une simple erreur Et puis nous disons que l'ITN n'a pas été trouvé. Et le set sera l'erreur 04. Ainsi, 404 est généralement l'erreur introuvable dans le développement de l'application. Mais si tout se passe comme prévu, nous retournerons simplement l'article. Nous vous retournerons donc simplement le bon article. Nous pouvons donc maintenant enregistrer et revenir à notre navigateur. Et ici, comme nous le voyons, nous avons notre premier itinéraire que nous avons créé, puis il nous suffit de parcourir deux éléments. Et si nous appuyons sur Ions, c'est introuvable car nous devons définir l'entier comme nous l'avons vu dans notre fonction. Encore une fois, encore une barre oblique, passons au point numéro deux, et ce n'est pas drôle parce que j'ai oublié d'ajouter une tranche ici Il devrait donc s'agir de la barre oblique inS , puis de l'élément 80. Donc, si vous revenez à notre navigateur, il suffit de le rafraîchir et nous l'avons ici. Encore une fois, notre deuxième point de notre liste. Nous pouvons voir les deux autres. Donc, le premier, le premier est correct, puis le point trois. Donc, cohébergez 800 , puis slash DGS. Nous avons, encore une fois, notre PI Swagger, plus rapide, et nous avons ici un nouvel itinéraire Nous pouvons donc simplement l'ouvrir ici. Selon nos paramètres, notre itinéraire ne prend que l'identifiant de l'article, puis l'identifiant de l'article sera un, deux ou trois, comme nous l'avons défini auparavant, et nous pouvons l'essayer. La boîte s'ouvrira pour que nous puissions tester, et nous pouvons répéter le point deux. Et si nous disons exécuter, nous acheminons les objets vers notre itinéraire, puis le bon article. Essayons donc à nouveau. Donc, effacez, puis dites le premier élément, exécutez, et je suis le bon. Maintenant, si nous définissons l'élément quatre, comme nous l'avons testé dans notre rousa auparavant, nous pouvons simplement exécuter à nouveau et nous obtenons le message d'erreur 13. 13. Exécuter une application avec Uvicorn: Nous allons maintenant installer UVCorn dans notre application. UVCorn est une interface de passerelle de serveur synchrone ASGI une interface de passerelle de serveur synchrone conçue pour être très rapide afin de permettre aux applications de les distribuer avec des performances optimales. Mais maintenant, vous me demandez pourquoi en avons-nous besoin ? Notre serveur fonctionne déjà avec une API rapide normale. Eh bien, UVCorn nous a donc offert plus d'avantages en raison de la rapidité L'API Fast est basée sur les normes ASGI, et UVCorn prend pleinement en charge les normes, garantissant ainsi une intégration transparente De plus, UVCorn dispose d'un support synchrone. Le Python possède des fonctionnalités synchrones permettant une gestion efficace et des requêtes simultanées UVCorn est également prêt pour la production et peut gérer des charges électroniques, ce qui le rend adapté au développement et au déploiement Nous permet également de configurer facilement les paramètres UVCornn. Les avantages pour les applications Web avec UVCorn sont donc l' amélioration des temps de réponse, évolutivité et le fait qu'il est prêt à être utilisé avec Python moderne Maintenant, pour installer UVCorn dans notre application, il suffit de revenir aux codes hysal Studio Nous pouvons arrêter notre serveur avec le contrôle C, nous l'avons arrêté, puis je peux effacer notre serveur pour que vous puissiez mieux le voir. Ensuite, nous pouvons simplement dire PIP. PIP est donc le gestionnaire de paquets de PyTon, nous installons nos packages dans PyTon installons Maintenant, nous pouvons simplement appuyer sur Entrée et laisser le package s'installer. Enfin, lorsque nous installons notre UVCorn, nous pouvons exécuter l' application avec celui-ci Dans ce cas, nous disons simplement colonne principale d' UVCorn, puis haut, puis nous rechargeons Cet indicateur de rechargement permettra donc l'application de se recharger chaque fois que des modifications Nous pouvons également ajouter d'autres options à l'UVCord. Supposons donc que nous voulions l'évincer sur un autre port. Nous disons donc simplement application principale UVCorn, puis nous pouvons dire port Donc, actuellement, nous utilisons le port 8 000 et nous pouvons simplement dire 80, 80, puis notre application s' exécutera sur ce port. Mais pour l'instant, nous allons simplement l' exécuter normalement avec un indicateur de rechargement. OK. OK, alors maintenant, notre application fonctionne avec UVCorn. Voyons voir ça sur un navigateur. Et nous avons notre documentation et notre application normale en cours d'exécution. Et essayons Ins point 1. Et il semble que tout s'est bien passé, et maintenant notre application fonctionne avec UVCorn 14. 14. Installer des paquets avec des exigences: de la conférence précédente, nous avons vu le package Twinstyle utilisant PIP Utilisez donc les packages BIP Twinstyle et Byton. Mais imaginez ce qui suit. Imaginons que nous ayons une grande équipe et que toute l'équipe utilise les mêmes packages sans être installés un par un manuellement. De plus, les mêmes versions sont préférées, sorte que l'application fonctionnera de la même manière pour tout le monde. Alors, comment pouvons-nous le faire ? Ainsi, dans l'API FAST, nous pouvons ajouter le texte des exigences, puis l'application installera toutes les exigences via ce fichier. Ici, dans notre barre latérale, nous créons un nouveau fichier que nous appelons « texte des exigences ». Nous l'enregistrons donc, puis nous avons un fichier texte. Et pour cela, nous pouvons ajouter les packages ici. Supposons, par exemple, notre API rapide, puis la version du package. Donc, dans ce cas, nous avons le 0,1 15 et zéro. Ne t'inquiète pas Je vais laisser ce fichier dans les ressources. Et s'il vous plaît, la méthode préférée est copier le contenu de ce fichier et de le coller ici, car les versions peuvent être différentes pour vous au moment où vous regardez ce cours. Et ainsi, nous veillons ce que vous exécutiez l' application exactement comme moi. Nous avons donc ici le numéro de version, mais disons que nous voulons utiliser la dernière version. Dans ce cas, nous avons juste besoin de l'avoir comme une API rapide, puis les utilisateurs obtiennent le package le plus récent. Nous allons donc maintenant utiliser les versions actuelles. Je dirais donc que FAST NPI est égal à zéro point 115 point zéro. Ensuite, nous utiliserons également le flux de tenseurs qui est le point 1 de la version 2.16 Vous pouvez ignorer cette partie et simplement copier les fichiers que nous avons mentionnés précédemment. Nous avons également besoin d'un NPi 1,26 point quatre. Nous utiliserons également le CV ouvert Piton 410, point zéro point 84 Et puis la version UVCorn que nous avons installée auparavant. Mais encore une fois, donc zéro point 30 point six, puis nous sauvegardons le fichier. Alors maintenant, comment pouvons-nous tout installer en même temps ? Encore une fois, dans notre terminal, nous arrêtons simplement le serveur avec Control C, puis nous pouvons simplement dire PP Install air quatre exigences, puis nos exigences en texte à points. Maintenant, si nous appuyons sur Entrée, tous les packages seront installés. Il suffit donc d'appuyer sur Entrée. Et puis tu l'as. Tous les packages sont donc installés, puis nous pouvons simplement exécuter, à nouveau, le UviCorn main up, puis Comme vous pouvez le constater, tout s'est bien passé et maintenant tous nos packages sont installés. 15. 15. Qu'est-ce que React et TypeScript: Imaginez que vous êtes en train de construire votre maison. Vous voulez qu'il soit robuste, efficace et facile à modifier si vous devez ajouter une pièce ou modifier une disposition. Dans le monde du développement Web, React et Typescript sont comme les outils avancés et le jeu de plans qui vous aident à construire Commençons donc par React. Imaginez React comme un maître menuisier spécialisé dans la création de composants réutilisables Au lieu de construire sa pièce à partir de zéro à chaque fois, React vous permet de créer des éléments modulaires tels que des murs préfabriqués , des fenêtres ou même des pièces entières. Que vous pouvez utiliser encore et encore. Cela permet non seulement de gagner du temps, mais également de garantir la cohérence dans l'ensemble de votre maison ou de vos applications Web. React rend votre site Web interactif et dynamique. C'est comme avoir une maison où les lumières s'allument automatiquement lorsque vous entrez dans votre pièce ou la température s'ajuste tout seul. Dans une application React, lorsque vous cliquez sur un bouton ou que vous entrez du texte, la page peut être mise à jour instantanément sans qu'il soit nécessaire de la recharger complètement Cela crée une expérience d'application fluide pour les utilisateurs. Parlons maintenant du tapuscrit. Si React est notre maître charpentier, dactylographier, c'est comme avoir un assistant super intelligent qui vérifie tout avant de le TypeScript est un langage de programmation basé sur Javascript, ajoutant une couche supplémentaire de sécurité et de clarté à votre Imaginez que vous essayez d'insérer un piquet carré dans un trou rond. Cela ne fonctionne tout simplement pas, non ? Typescript empêche ce type d' erreurs dans votre code avant qu'elles ne se produisent C'est comme avoir un gars qui s'assure que vous utilisez le bon type de matériau pour chaque partie de votre maison. Si vous avez accidentellement essayé d'utiliser une fenêtre là où devrait se trouver une porte, dactylographié vous le fera savoir avant même de commencer à construire Cela peut sembler compliqué, mais cela vous simplifie la vie à long terme. Avec le dactylographié, vous détectez les erreurs plus tôt, votre cours devient plus explicite et le travail en équipe devient plus fluide, car tout le monde peut comprendre le plan Lorsque vous combinez React Typescript, vous obtenez le meilleur des deux mondes Vous avez le pouvoir de créer des applications Web interactives dynamiques avec des composants réutilisables tout en bénéficiant du filet de sécurité qui détecte les erreurs potentielles et renforce la robustesse de votre code. Lorsque les étudiants se lancent dans le développement Web, imaginez qu'apprendre à réagir et dactylographier permet d' acquérir des super pouvoirs React vous permet de créer des interfaces utilisateur flexibles et efficaces. Wild TypeScript vous fournit une vision par rayons X pour détecter et prévenir les problèmes avant qu'ils ne surviennent Ensemble, ils vous fournissent les outils nécessaires pour créer applications Web modernes et fiables, capables résister à l'épreuve du temps et de faire évoluer vos projets. Dans ce cours, nous utiliserons donc à la fois React et Typescript pour créer notre application frontale 16. 16. Installer les nodejs: Nous allons donc maintenant installer Nojs. Mais qu'est-ce qu'un JS ? NoJS est donc une plateforme open source fermée qui permet aux des environnements d'exécution JavaScript développeurs d' utiliser et d'exécuter Donc, pour installer no Js, c'est très facile, vous pouvez simplement vous rendre sur tonjs.org, et il apparaîtra sur le bouton vers le bas Et cette version contient déjà la version de votre système. Donc, si vous utilisez un environnement Windows, les téléchargements seront pour le système Windows. Si vous utilisez un MAC, ce sera également le cas pour macOS. Il vous suffit donc de télécharger, vous assurer que vous utilisez LTS, et pour notre projet ici, nous utiliserons toujours une version supérieure à 20. Donc, au moment de ce cours, ça devrait aller. Il suffit donc de télécharger no Js là où cela vous convient le mieux, d'exécuter le fichier et d'installer no Js. Après avoir terminé l' installation de NGS, vous pouvez ouvrir un terminal pour vérifier l'installation. Il se peut que vous deviez redémarrer votre système, mais cela se produit rarement. Ainsi, dans notre terminal, nous pouvons vérifier la version de NGS en écrivant simplement une note. Version Dash Dash et vous pouvez voir ici que j' utilise la dernière version, mais qu'en tant que fonctionnalités avancées, nous n'en avons pas vraiment besoin, vous l'utilisez ici ou nous n'en avons pas vraiment besoin ici. Donc, dans ce cas, vous pouvez simplement utiliser le 20, le LTS qui est courant et meilleur pour l'utilisateur habituel. Nous allons donc vérifier votre version. Vous pouvez également vérifier votre version en utilisant le raccourci, donc pas de V. Même chose. Vous pouvez donc voir votre version de no Js ici. 17. 17. Créer la première application React avec Vite: Nous pouvons donc maintenant commencer à créer notre interface. Et pour créer notre interface, nous allons utiliser VT. T est donc un outil qui nous permet de créer facilement des applications avec React, View, etc. Même des applications JavaScript classiques. Son framework nous permet un échafaudage rapide des applications ainsi qu'une construction et un rendu rapides Donc pour créer une application, donc nous revenons à notre terminal dans notre terminal, nous sommes dans le dossier de notre serveur. Nous descendons donc d'un niveau, donc cd point point. Ensuite, nous sommes dans notre dossier de projet, puis nous pouvons simplement faire NPM, créer et ensuite nous disons « au plus tard » pour pouvoir installer la dernière version Il vous suffit donc d'appuyer sur Entrée, puis nous disons oui. Le nom du projet, nous allons le nommer comme reconnaissance d' objets. Le nom d'un Packers peut rester le même Ensuite, nous avons toutes les options avec lesquelles nous pouvons créer notre application. Donc, dans ce cas, il vous suffit de choisir celui de réaction, utiliser les touches fléchées pour naviguer, de réagir, puis nous allons également utiliser le tapuscrit, et notre application est installée Nous pouvons maintenant accéder au dossier de l'application. Consultez donc l'application de reconnaissance d'objets. Entrez, puis nous allons l' ouvrir avec notre code Visual Studio, donc code, puis point. Maintenant que nous ouvrons notre application avec le code Visual Studio, nous devons installer nos packages. Nous allons donc maintenant ouvrir notre terminal dans notre code Visual Studio. Et si, pour une raison quelconque, l'option permettant d'ouvrir le terminal n' apparaît pas dans vos paramètres, vous pouvez simplement dire Shift Control P sous Windows ou Command, Shift P sur Mac. Et puis vous avez une liste déroulante et vous pouvez simplement écrire Toggle. Borne. Et ici, nous avons la possibilité d'ouvrir le terminal, il vous suffit d'appuyer sur Entrée que le nouveau terminal apparaisse pour vous. Et nous sommes dans le dossier de notre projet. Nous pouvons simplement dire NPM install pour installer le package ou NPMI en abrégé Installons donc le package et laissez-les fonctionner. Maintenant, les packages sont installés. Nous pouvons exécuter notre application. Et dans ce cas de WVD, il suffit de faire tourner NPM sourd pour exécuter le mode développement, comme nous pouvons le voir ici Sur notre package Jason, comment exécuter l'application en mode mort, comment créer notre application, exécuter Leading et même prévisualiser le mode Has Build. Fermons donc ceci et exécutons le NPM run Def. Une fois construite, vous voyez que vous avez notre local où l' application s'exécute. Copions donc simplement ceci et accédons à notre navigateur, puis nous verrons que nos applications VID et React sont en cours d'exécution. 18. 18. Composant de commande d'image et style: Maintenant, pour le front-end principal, nous pouvons revenir au coût de Visual Studio, et dans notre source, nous avons cette application point TSX, qui est notre point d'entrée, et nous n'aurons pas besoin de certaines choses ici Je vais juste fermer ou poser termotte et nous n'avons pas besoin de ce thé. Et nous pouvons supprimer tout ce qui se trouve dans notre déclaration. De plus, comme vous le voyez, ces packages ne sont pas utilisés, nous pouvons donc également les supprimer. Et pour l'instant, on laisse les choses comme ça. Donc, ici, nous allons créer un nouveau dossier, donc une icône ici, et nous l'appelons composants à l'intérieur de nos composants parce que notre application est très simple. Du côté frontal, nous pouvons simplement créer un composant, puis créer un nouveau fichier et nous l'appelons image control point tsx pour le tapuscrit Et comme nous avons également besoin de CSS, nous pouvons créer un nouveau fichier et l' appeler simplement CSS à points d'index. Maintenant, pour revenir à notre composant, le contrôle d'image TSX, nous allons devoir créer notre modèle Pour cela, nous allons d'abord importer notre fichier CSS, donc nous disons importer. Indexez le CSS, puis nous créons nos composants, disons le coût. Et notre composant sera simplement le contrôle de l'image. Et en tant que composant fonctionnel, nous créons une fonction R pour celui-ci, puis nous renvoyons simplement quelque chose à l'intérieur, qui pour le moment peut être juste un div. Ensuite, comme notre contrôle d'image n'est pas encore utilisé, nous devons l'exporter pour qu'il soit utilisé dans UPTTSx Dites « exporter le contrôle d'image par défaut ». Je vais le sauvegarder. Et puis, sur notre PTSx, à notre retour, nous pouvons utiliser le composant pour créer, disons Contrôle. Et comme vous pouvez le voir ici, mon Visual Studio dit déjà d'importer le contrôle d' image pour les composants, le contrôle d'image. Et puis comme vous pouvez le voir, vous venez d'importer le contrôle d' image depuis notre dossier de composants et notre composant. Ensuite, les appels et l'app point TSX sont terminés pour le moment. Et nous pouvons revenir à notre composant principal car si vous revenez dans le navigateur, vous verrez que celui-ci est vide car nous ne sommes pas encore en train de restituer quoi que ce soit. Donc, encore et encore, c'est une application simple, je vais simplement coller du CSS pour notre application. Je vais laisser ce fichier CSS dans les ressources afin que nous puissions simplement le copier-coller ici. Donc, juste du CSS standard pour nos conteneurs et notre conteneur d'images. Je vais simplement l'enregistrer, puis nous aurons accès à ces classes dans notre composant. Et d'abord, nous allons créer nos conteneurs afin pouvoir commencer à voir quelque chose dans l'application. Nous utilisons donc ce DIF et comme nous allons utiliser plusieurs conteneurs et plusieurs DV ici sur le modèle, nous avons besoin d'un support Ouvrez donc les brankets et je peux simplement les couper et les copier ici, et ce div aura le nom de classe du conteneur Donc, à partir de notre fichier CSS, nous avons cette classe de conteneur. Ensuite, en continuant sur ce div, nous aurons un autre div qui sera notre conteneur intérieur. Le nom de notre classe sera donc un conteneur interne. Pour l'instant, nous pouvons simplement le sauvegarder. J'ai une faute de frappe, donc c'est un conteneur. Dans le cas contraire, le cours ne fonctionnera pas. Ensuite, je peux simplement mettre un simple Ptag pour voir notre application s'exécuter Pour en revenir à notre navigateur, nous voyons déjà courir ici apparaître sur notre écran sur notre application, qui signifie que tout est correct. 19. 19. Paramétrer nos variables d'état: Donc, tout d'abord, nous devons définir nos variables d'état afin de pouvoir les utiliser dans notre logique à l'intérieur de notre composant. Nous aurons donc besoin d' une première variable d'état l'image, indiquant coût, image, puis image définie. Et cette image sera une chaîne. Donc, en venant de notre backend, nous nous contentons d'une chaîne pour l'image, et nous disons use state, puis nous ouvrons les crochets Nous devons maintenant importer l'état d'utilisation pour pouvoir l'utiliser. Nous laissons donc l' indice d'importation ESS en bas, et en haut, nous disons import, use state, et cela vient de React. Nous pouvons maintenant enregistrer et nous devons définir le type de notre image. Donc, pour l'instant, nous n'avons aucun type pour notre image, rien au démarrage du composant. Nous voulons donc que cette image soit de type chaîne ou nulle car au début nous n'avons pas d'image, elle peut donc être nulle et nous avons défini l'état initial sur null. Nous avons également besoin d' une variable d'état pour contenir le fichier que nous allons envoyer au front-end puis au back-end afin d' obtenir la prédiction et les résultats Encore une fois, coût et nous avons le fichier sélectif, et nous disons ensemble sélectionné. Dossier. Et encore une fois, utilisez state. Et dans ce cas, nous aurons besoin d'un type spécial qui est fichier contenant toutes les propriétés du fichier. Et nous voulons également qu' il soit nul, ou nul. Ensuite, nous n'en avons pas besoin, puis nous fermons simplement les crochets et nous définissons l'état initial sur null car au début nous n' avons aucun fichier sélectionné. Et maintenant, pour continuer dans notre interface, nous devons également définir trois autres variables qui seront modifiées ultérieurement. Quoi qu'il en soit, nous allons le configurer maintenant pour que vous puissiez voir comment il fonctionne. Dans ce cas, nous aurons donc besoin d'une prédiction. Mais dans ce cas, nous n'avons pas besoin d'être une variable d'état. Nous pouvons simplement définir une prédiction normale de const say. C'est un tableau et nous avons défini un tableau vide. Nous avons également besoin de voir le chargement. Donc, lorsque notre application est en cours de chargement, et que ce dossier est un lingot, nous définissons le vrai faux Et la dernière sera une erreur. Supposons donc une erreur de coût, également booléenne, donc pour le mot faux, puis nous l'avons également définie sur Ces trois variables seront donc ensuite envoyées à notre hook où nous serons placées sous les requêtes et définies sur le modèle. Mais pour l'instant, nous allons simplement le définir comme ceci afin qu'il puisse être utilisé sur notre modèle. 20. 20. Modèle de boîtes de prédiction et d'image: Continuez maintenant à créer notre interface de base où nous avons le bouton pour applaudir l'image, une boîte dans laquelle l' image s'affichera. Et aussi le numéro de prédiction, nous allons simplement supprimer ce P ici, puis nous dirons ouvrir les bretelles bouclées et dire si nous n'avons pas Donc, si l'image est nulle ou indéfinie ou si elle est vide, nous disons simplement image Et N, disons, ouvrez un B, et vous dites, s'il vous plaît, applaudissez votre image Alors enregistrons-le et voyons ce qui se passe sur le front-end. Et nous avons un message disant : Veuillez télécharger votre image. Jusqu'ici, tout va bien. Continuez ici. Mais si nous avons une image, nous revenons ici encore et encore, avec des accolades et nous disons que l'image existe Nous ouvrons donc maintenant des accolades et un DIV et ce nom de classe adoré de Dv conteneur d'images depuis Ensuite, nous ouvrons la balise image qui est la source de notre variable d'image. Vous pouvez donc voir ici qu' il apparaît déjà en surbrillance. Cela signifie donc qu'il est utilisé. Nous pouvons simplement dire quelque chose comme applaudir et le nom de la classe sera l'image, notre classe CSS, puis fermer la balise Et nous enregistrons simplement que rien n'apparaîtra sur le front end car nous n'avons toujours pas d'image. Donc, en continuant à l'intérieur du même conteneur, nous aurons notre permission. Nous disons donc, encore une fois, selon Curlbra, que si la préversion existe, nous prendrons le premier élément de notre tableau, et vous verrez pourquoi plus tard, mais c'est pourquoi nous l'avons défini comme selon Curlbra, que si la préversion existe, nous prendrons le premier élément de notre tableau, et vous verrez pourquoi plus tard, mais c'est pourquoi nous l'avons défini comme un tableau. Dans ce cas, il est vide. Et encore une fois, nous ouvrons aces et ouvrons un div div avec un nom de classe ou une boîte de prédiction. Notre boîte de prédiction contiendra donc les informations provenant de la production elle-même. Fermez le Div et à l'intérieur, nous avons un PTA avec un nom de classe texte de la catégorie reprend et le texte de la catégorie contiendra le texte provenant de la prédiction, dans ce cas, nous ouvrons à nouveau, les accolades, et cela viendra du Il sera donc affiché sur notre back-end dans notre demande. Et nous avons la prédiction à partir de zéro. C'est toujours une erreur car nous n'avons toujours pas type défini, mais c'est bon. Catégorie de prédiction, et nous voulons que tout soit écrit en majuscules. Disons donc deux majuscules. Et pour que N pour que ces erreurs disparaissent dans votre application, nous pouvons simplement revenir à notre ensemble constant. Nous en voulons une gamme. N'importe quel type sera donc utilisé ici. Il s'agit d'une erreur avec l'heure d'été B avec une lentille qui n' autorise aucun type, mais cela sera modifié ultérieurement Peu importe pour null. Et comme ça, nous n' avons aucune erreur ici. Mais en continuant l'année, encore une fois, à la baisse, nous ouvrons un autre PTA qui portera le nom de classe de précision de la catégorie Ce sera donc l'exactitude de la prédiction. Cela est attaqué avec l'image, puis nous fermons, puis nous redescendons, nous disons Clibrass entre crochets ouverts et nous disons prédiction Encore une fois, à partir de zéro à partir du premier élément de notre tableau, nous voulons un score. Une fois et parce que nous voulons créer sous forme de pourcentage, puis nous disons deux fixes un. Donc, parce qu'il y aura un grand nombre et que nous voulons le transformer en pourcentage. Ensuite, en dehors des caribras, nous disons pourcentage, pourcentage, précision Mais nous verrons plus tard comment cela fonctionne exactement. Alors maintenant, vous vous demandez ce qui se passe dans notre interface. Alors allons-y et voyons. Donc toujours rien car nous n'avons aucune image à montrer. Maintenant, je vois que le conteneur est un peu vers la droite, et c'est parce que nous avons défini la largeur pour pouvoir revenir en arrière. Et dans notre index CSS, il suffit de supprimer le w et de l'enregistrer. Et maintenant c'est exactement au milieu. Pour en revenir à notre contrôle d'image, nous devons définir le conteneur pour l'erreur. Donc, après ce div, qui est notre prédiction et les accolades également pour notre prédiction, nous laissons un peu d'espace ici, et nous disons erreur, encore une fois, accolades, puis erreur, P, et ces personnes auront un nom de classe d' Ensuite, nous le fermons, puis à l'intérieur, nous adorons l'erreur qui provient alors de notre demande Pour l'instant, c'est tout simplement faux. Cela ne devrait pas être faux, mais il devrait plutôt s' agir d'une chaîne et vous dites, chaîne, nous dirons qu'il n'y a pas d'erreur. Mangez un peu ici. Ensuite, nous aurons notre contribution pour télécharger l'image. 21. 21. Saisie de téléchargement d'images: Passons maintenant à notre saisie, où nous téléchargerons l'image directement de notre système vers l'application. Après l'erreur ici, nous allons ouvrir la balise d'entrée, donc input. Et le type de cette entrée sera un fichier car nous téléchargerons un fichier depuis le système. Donc, dans ce cas, le fichier image, et nous disons « en cas de modification », aura l' événement de changement de notre entrée. Mais maintenant, dans ce cas, nous définissons simplement une fonction vide, donc nous n'avons aucune erreur. Ensuite, nous disons «   acceptez l'image ». Images Dans ce cas, nous voulons toutes sortes d'images maintenant. Il suffit donc de mettre une étoile et tous les types d' images seront acceptés. Ensuite, nous fermons la balise d'entrée. Juste en bas, nous voulons un bouton où nous allons procéder à l'insertion de l'image. Donc, cliquez sur le bouton et nous disons OnClick. Et encore une fois, comme nous n' avons pas encore la fonction pour le clic, nous allons simplement créer une fonction vide et dire que nous la désactivons sera désactivé. Ce bouton lorsque nous n'avons pas de fichier de sélection. Ou s'il est en train de charger. Donc, si nous n'avons aucun fichier de la demande que l' application est en train de charger, le bouton sera désactivé. Ensuite, nous fermons le bouton, puis à l'intérieur du bouton, nous avons le texte dont nous avons besoin, et le texte changera en fonction l'état de l'application et des applaudissements de l'image Encore une fois, caribrs, nous disons que s'il y a du chargement, nous allons applaudir, c'est perdre. S'il ne s'agit pas d'un vêtement et que nous avons une image, nous voulons que le bouton indique que cela identifie ou identifie l'image afin que nous puissions avoir une prédiction. Sinon, nous voulons que le bouton indique une plosimage et les fonctions seront différentes Alors maintenant, si nous enregistrons et accédons à notre navigateur, nous disons déjà ici que nous avons quelque chose à l'écran. Nous avons donc ici le bouton pour choisir le fichier. Donc, notre saisie Et si vous cliquez, une fenêtre s'ouvre dans laquelle nous pouvons vérifier nos images et le bouton Blosimage est désactivé car nous n'avons aucune Aucune erreur n' apparaît ici car nous l'avons définie comme une erreur d'investissement qui existe, et dans notre cas, elle existe vraiment Mais si vous mettez, disons, null donne une erreur car il doit s'agir d'une chaîne ou d' une valeur nulle, elle n' apparaîtra pas. 22. 22. Expliquer Tensorflow SSDMobileNetV2 et COCO DataSet: Nous allons maintenant examiner brièvement les packages ou les modèles d'apprentissage que nous allons utiliser dans le front-end. Tout d'abord, tensor flow est développé par Google, et il s'agit d'une puissante bibliothèque de logiciels open source pour l'apprentissage automatique et l'intelligence artificielle C'est la base qui permet aux ordinateurs d' apprendre à partir des données et de prendre des décisions. ingénieurs et les chercheurs utilisent le flux de tenseurs pour créer et entraîner des réseaux neuronaux destinés à des tâches telles que la reconnaissance d' images, traitement du langage naturel et, dans notre cas, la détection d'objets Le SStam de A net version 2 à utiliser ici est une architecture de réseau neuronal spécifique conçue pour la détection d'objets C'est une combinaison intelligente de deux concepts. Donc SSD, détecteur à coup unique et Mobile Net version 2. Le SSD permet à un réseau de détecter plusieurs objets dans une image et en un seul transfert, ce qui le rend rapide et efficace. La deuxième version de Mobile Net est une structure réseau légère optimisée pour les appareils mobiles ainsi que pour les navigateurs, ce qui garantit que le modèle peut fonctionner rapidement, même sur les smartphones, les systèmes intégrés et les ordinateurs de rangement Le coco, les objets courants en contexte, le jeu de données Coco est une vaste collection d'images qui sert de manuel pour l'entraînement des modèles de détection d'objets Il contient plus de 330 000 images avec plus de 2,5 millions d'instances étiquetées d'objets dans 80 catégories Ces catégories vont des objets courants tels que les voitures et les chiens à des objets plus spécifiques tels que les feux de signalisation et les raquettes de tennis Lorsqu'ils sont combinés, ces trois composants créent un puissant système de détection d'objets dans le monde réel. TensorFlow fournit les outils et l'environnement nécessaires pour créer et entraîner le modèle SST mobile net version 2 aide du Le résultat est un détecteur d'objets rapide et efficace. Cela permet d'identifier et de créer rapidement plusieurs objets dans des images ou des flux vidéo, même sur des appareils mobiles. Cette technologie a de nombreuses applications pratiques. Il est utilisé dans les véhicules autonomes pour identifier les panneaux de signalisation et piétons, ainsi que dans les systèmes de sécurité pour détecter les objets ou les comportements suspects Dans le commerce de détail, pour la gestion de l'environnement et même dans les applications de réalité augmentée pour reconnaître et interagir avec des objets du monde réel. La rapidité et l'efficacité de SSD Mobile net, associées à une formation complète de données Coco, le rendent particulièrement utile pour les applications en temps réel où une détection rapide et précise des objets est cruciale 23. 23. Ajouter le modèle de DataSet COCO SSD MobileNetV2: Nous pouvons donc maintenant commencer à ajouter le modèle de prédiction et le jeu de données à notre application. Nous allons donc utiliser ce modèle d'apprentissage par flux tensoriel avec un ensemble de données Coco Je vais donc laisser ce lien dans la description. Il vous suffit d'accéder à cette page Github, puis nous allons utiliser ce modèle exact ici Donc le SSD, le réseau mobile Vt Coco. Nous allons donc simplement cliquer sur le lien, et vous aurez probablement un avertissement de sécurité, mais vous continuerez simplement sur le site. Donc, après avoir téléchargé le modèle, vous avez un fichier zip comme celui-ci. Nous allons simplement l'extraire. Et puis nous adorons le dossier que nous voulons. Copiez simplement le dossier dans notre projet de serveur, donc dans le dossier de serveur que nous avons créé auparavant pour notre backend. Et puis ici, il suffit de modifier le titre supprimer la date de création et de laisser Coco à la fin. Alors maintenant, nous pouvons enregistrer puis revenir à notre application. Nous avons donc l'endroit où notre code pour notre serveur est en cours d'exécution, donc notre back-end. Et nous pouvons voir ici que notre modèle est déjà intégré, et maintenant nous devons encore le transmettre à notre application. 24. 24. Chargement du modèle préformé dans l'application: Donc, revenons à notre code, première chose que nous faisons est de simplement supprimer une partie du code. Nous pouvons simplement laisser la route racine juste pour tester et supprimer tout le reste, puis enregistrer, et nous allons importer le jeu de données que nous venons d' ajouter à notre projet. Donc, tout d'abord, nous devons créer l' environnement approprié. Nous devrons donc importer le système d'exploitation afin pouvoir détecter notre système d'exploitation et permettre l'accès à tous les points. Ensuite, nous utilisons simplement le système d'exploitation que nous avons importé, puis le point environ. Ensuite, nous allons ouvrir les crochets , puis nous allons définir notre flux tensoriel pour activer tout en majuscules. Activez donc un D et un N, les valeurs optimales D, et nous définirons ces Cela permet donc à l'environnement d'exécuter le flux de tenseurs ultérieurement Nous devons donc également importer le flux de tenseurs. Et pour cela, nous allons le faire ici. Nous allons donc simplement dire que import TensorFlow a un flux de tenseurs. N'oubliez pas que pour installer le flux de tenseurs plus tôt, nous ajoutons une explication sur la vidéo précédente Ensuite, nous avons importé le flux de tenseurs. Nous devons définir les variables afin de pouvoir utiliser ce modèle dans notre projet. Juste après avoir défini notre environnement, nous devons d'abord appeler notre modèle. Nous créons donc simplement une variable d'environnement dans ce cas, avec des majuscules, modèle ici. Et ici, nous voulons appeler le modèle et la taille enregistrés de notre dossier réseau mobile qui n'était pas marié auparavant. Donc, dans ce cas, nous ouvrons simplement les guillemets et nous disons SSD, et elle serait en petites lettres. Nous disons donc simplement, SS D. Mobile net version 2, modèle enregistré par Coco. Assurez-vous que ce chemin correspond exactement à ce que vous avez écrit ici car vous vous souvenez que nous venons de supprimer la date, mais si vous avez laissé la date, vous devez ajouter le reste ici. Ensuite, nous devons définir le modèle du flux tensoriel. Nous disons donc modèle, puis TF a enregistré les charges du modèle. Être une ficelle, et nous y perdrons notre museau Donc le répertoire de notre modèle. Cela garantit donc que nous exécutons le modèle de production. Notre modèle prégénéré provient donc flux de tenseurs et du réseau mobile V deux dans cette variable Ensuite, nous devons signer le modèle à déduire, afin qu'il serve de modèle par défaut dans ce cas, et il existe de nombreuses options, mais dans ce cas, nous allons le faire par défaut Il suffit donc de dire inférer notre variable , puis de modéliser les signatures par points puis d'ouvrir les crochets, et nous disons servir par défaut. Alors, sauvegardez-le. Maintenant, nous avons perdu notre nom de variable dans notre application, et nous allons maintenant voir comment nous allons les utiliser. 25. 25. Fonction d'inférence de course: Et maintenant, nous sommes prêts à créer notre première fonction, c'est-à-dire à exécuter la fonction d'interférence. Et cette fonction est conçue pour effectuer la détection d'objets sur l'image donnée en utilisant le flux tensoriel de pré-perte que nous avons ajouté ici Cette fonction se chargera de préparer l'image au format correct pour le modèle , puis d'exécuter l'interférence puis de renvoyer les résultats. Ensuite, nous renvoyons également la boîte avec les objets que nous aimons, tels que les boîtes de sélection, étiquettes de classe et le score de confiance que nous allons utiliser dans notre interface utilisateur. Et puis ces fonctions servent pont entre l'image brute que nous allons télécharger et le modèle de détection d'objets que nous avons ajouté ici. Donc, pour commencer, nous allons simplement commencer par créer une nouvelle fonction, donc fonction Python, nous utilisons DF, puis nous l'appellerons run inference ou run inference Et nous allons prendre et cette fonction prendra une image comme argument. Et le type de cette image que nous voulons être NPi. Et un tableau D. Il ne nous reste plus qu' à importer le num Pi. Pour en revenir à nos importations, nous ouvrons un nouveau vin et nous disons import num Pi S&P. Maintenant, l'erreur a disparu Nous avons le numPi, nous disons tout sur le NumPi, même la documentation si vous voulez plus d' informations Et cette fonction renverra un dictionnaire de chaînes, puis nous en ferons n'importe lequel pour le moment. Nous voulons donc simplement un dictionnaire, des crochets ouverts, et nous ajouterons la chaîne comme étiquette ou nom, puis nous ajouterons simplement n'importe quelle taille. Ensuite, nous fermons simplement la fonction. Maintenant que vous voyez ici, nous avons ces deux erreurs car elles ne sont pas toutes deux définies Nous devons donc revenir à nos importations et importer la saisie. Donc, en tapant, nous allons importer les extraits du dictionnaire et de N. Et là, j'ai une faute de frappe Il ne s'agit pas de taper, mais de taper, alors maintenant c'est correct, et les erreurs ont disparu. Donc, en continuant notre fonction, nous entrons à l'intérieur. Fais attention. Encore une fois, nous avons besoin de cette identification dans Piton et nous allons simplement définir notre première variable, le tenseur d'entrée qui prend un flux de tenseurs et nous allons le convertir en tenseur Et cela devra transmettre notre image. Il s'agit donc essentiellement de la préparation ou de la conversion du tableau numpy Donc, cette image ici, associée à un tenseur de flux de tenseurs, est une entrée requise pour le modèle de données d'objet dont le flux de tenseurs a besoin pour détecter l' Donc, en gros, nous convertissons notre tableau NumPi en tenseur de flux tensoriel, donc en tenseur Et pourtant j'ai oublié de demander l'erreur donc input tensor. Ensuite, nous assignerons à notre tenseur d'entrée notre tenseur d'entrée d'avant. Donc celui-ci. Et nous avons de nouveau ouvert les crochets et vous dites «   flux tensoriel », « Nouvel axe Ensuite, étalez et notre deuxième variable est terminée. Et qu'est-ce que cela signifie ? Cela ajoute donc une dimension supplémentaire au tenseur, donc à notre assez fin. Tensor créant un lot de taille 1. De nombreux modèles s'attendent à ce que les entrées soient groupées, même s'il ne s'agit que d'une seule image Nous devons donc créer ces lots à transmettre à l' entrée de notre modèle Ensuite, pour la variable détections, nous déduirons le capteur d'entrée que nous avons créé Alors, qu'est-ce que cela signifie ici ? Donc, déduisez que cette inférence provient de la signature de notre modèle, de notre modèle préchargé et préentraîné Et ce modèle s' exécutera tout seul, traitera l'image et renverra ses détections. Donc, une fois que nous aurons pris soin de l' image, que nous l'aurons traitée correctement, nous passerons à notre modèle qui gérera la détection. Encore une fois, j'ai oublié les détections S et B parce qu'il y en a plusieurs Et puis, en gros, il suffit de renvoyer ces détections. Nous sommes donc maintenant prêts à utiliser cette fonction dans l'itinéraire. 26. 26. Prédire l'itinéraire: Nous sommes donc maintenant prêts à créer notre itinéraire pour obtenir les prévisions dans notre interface. Et pour cela et comme il s' agira d'une demande de publication, nous devons le faire juste après notre application où nous définissons notre application API rapide. Nous pouvons donc simplement dire at up, donc à partir de l'API rapide, puis publier. Il en sera de même pour une demande de publication. Et le nom que nous avons donné à notre itinéraire peut être simplement prédit. L'itinéraire est donc défini. Nous avons maintenant besoin de la fonctionnalité pour elle-même. Nous allons donc avoir une fonction de synchronisation qui sera synchrone tout au long du cours et une fonction approfondie Et puis nous l'appelons prédire. Et ce que notre fonction doit prendre, quel type de fichiers doit prendre en charge. Nous avons donc besoin d'un dossier. Donc, l'image que nous allons charger sur le front-end , puis le type de ce fichier doit être Donc, dans ce cas, il devrait s'agir d'un BlothFle égal à un fichier avec une propagation, qui égal à un fichier avec une propagation, peut contenir n'importe quoi, puis nous reviendrons ou nous voulions retourner à une réponse JSON Nous allons donc renvoyer notre réponse json afin de pouvoir ensuite la gérer dans le front-end. Mais là encore, nous voyons quelques erreurs ici, ce qui signifie que nous ne l'avons pas encore importé Revenons donc en haut. Et depuis notre API FAST, nous avons également besoin du fichier et du fichier de téléchargement. Les deux proviennent donc de l'importation rapide de l'API. Ensuite, nous avons également besoin du JCNRSponse, car c'est la seule année manquante que nous voulons revenir Et pour cela, nous ouvrons simplement une autre oreille et nous disons qu'à partir de l'API FAST, puis à partir des réponses de l'API FAST, nous voulons importer JCNRSponse et c'est tout pour Pour continuer avec notre fonction, nous devons d'abord créer une variable pour attendre notre réponse. Nous pouvons donc simplement appeler la variable content ou contents, car il s' agira de plusieurs contenus, puis nous dirons « wait », puis « file res ». Donc, fonction python qui va résoudre notre fichier, donc le type de fichier de téléchargement. Cela permet au fichier d' être téléchargé et lu de manière asynchrone Ensuite, nous devons convertir les fichiers que nous téléchargeons en image, exemple en les convertissant à partir d'un tableau Numpi puis en image RGB Alors, comment s'y prendre ? Tout d'abord, ici bas, nous l'appelons simplement image. C'est ma variable, et elle sera égale au tableau Numpi, alors nous avons le SV deux Les deux SV correspondent aux codes de l'image, puis on dit code EMD E. Le S V two est donc principalement utilisé pour chargement d'images ou conversion de l'espace colorimétrique et le redimensionnement potentiel de l'image Nous sommes donc en train de démarrer l' image ou de convertir l'image, la taille exacte ou le type exact, la taille, les couleurs que nous voulons applaudir Donc, dans ce cas, nous avons le C V deux, encore une fois, qui reçoit une erreur. Nous devons l'importer. Revenons donc en haut de page. Et donnons-lui une nouvelle ligne ici. Ensuite, nous disons importer comme nous le faisons. Et ici, nous devons y remédier un peu. Donnons également les importations provenant d'un ensemble et les importations uniques. Alors nettoyons tout ça. Pour être plus précis et plus précis. va de même pour le système d'exploitation, et nous avons maintenant un code propre et plus organisé. Donc, pour en revenir à notre fonction, encore une fois, l'erreur a disparu. Et à l'intérieur de nos décodages d'images EM, nous ouvrons à nouveau d'autres crochets, et encore une fois, à partir de notre numpi que nous voulons extraire de notre tampon, nous voulons convertir notre contenu num pi entier ou en U entier huit Donc avec huit personnages. Et puis en continuant ici, il suffit de mettre une virgule et encore une fois, le SV deux, et nous disons que l'image est en couleur pour que nous puissions également obtenir la couleur. Parce que l'image est livrée avec des couleurs et que le modèle a besoin des couleurs RGB exactes pour faciliter la détection. Et avec cela, nous allons redéfinir ces couleurs. Nous devons donc convertir le BGR en couleurs RGB. Nous pouvons donc définir une nouvelle variable ici, donc nous disons image RGB. C'est ce que nous voulons obtenir. Encore une fois, à partir de SV deux, et vous dites couleur SVT. Il s'agit donc d'une fonction ou d'une classe provenant du SV deux. Puis nous avons transmis notre image que nous avons convertie ici. Ensuite, nous disons SV deux et je dis Color. Et comme il s'agit de BGR, nous disons BGR to RGB. Nous nous assurons donc que les couleurs avant d'envoyer l'image au modèle sont disponibles sous forme de RBG Nous avons donc l'image définie, les couleurs, tout est converti et prêt à être utilisé. Nous devons passer le test de détection. Nous créons donc simplement une nouvelle variable détections. Et puis ici, nous appelons simplement la fonction que nous avions auparavant. Exécutez donc une inférence qui convertira l'image en tenseur et obtiendra le résultat Lancez donc l'inférence, puis nous transmettons notre image correctement convertie Donc, image RGB. Ensuite, nous allons obtenir les résultats. Donc, ces résultats de la détection que nous avons définie précédemment proviennent de cette variable ici, mais nous devons encore la formater correctement et la convertir en objet afin qu'elle puisse être envoyée au front-end Dans ce cas, nous avons d'abord défini le nombre de détections. Le nombre, bien sûr, est un entier, et nous disons détections, pop nombre de détections Cela extrait donc un certain nombre de détections, puis nous convertissons le résultat de la détection en un tableau d'arbitres, ce que nous allons faire maintenant Encore une fois, des détections. Donc, en appelant la même variable, nous ouvrons curly Brass pour object et chaque objet aura la clé et la valeur Donc, cette valeur, nous l'ouvrons entre crochets et nous disons que nous allons commencer par zéro. Donc une colonne, puis on dit le nombre de détections. Celui-ci est là. Nous pouvons juste fermer ceci et un point et nous deviendrons arbitres Et pour chaque clé et valeur des détections. Est. Est. Alors, que s'est-il passé ici ? Nous définissons donc ici l'objet pour lequel nous voulons que les détections passent par a. Donc, dans ce cas, nous disons « pour », nous voulons définir une clé et une valeur sous forme de numbi pour le nombre total de Ainsi, pour chaque clé et chaque valeur des détections effectuées lors de ces détections, nous voulons définir une clé et une valeur correspondantes dans l'objet OK. Ensuite, nous devons créer une liste à retourner. Nous avons donc ces valeurs ici, donc une liste avec toutes ces clés issues des détections, et nous devons créer une boucle pour convertir les résultats de détection en liste Et pour cela, nous disons simplement quatre clés dans les détections. Nous parlons de détections. La clé est égale aux détections. Clé pour accéder à la liste. Après avoir examiné les clés de nos détections ici, nous avons défini l'index de chaque clé de détection dans la liste Ensuite, nous devons mapper les classes détectées à des étiquettes lisibles par l'homme que nous allons utiliser avec notre carte d'étiquettes d'utilisation. Donc pour l'instant, il suffit d'ajouter les résultats. Faites attention à l'atentation puis nous avons juste besoin, encore une fois, des résultats et nos résultats seront renvoyés sous forme de tableau Laissez-le donc vide pour le moment, et nous allons ajouter des cartes d'étiquettes. 27. 27. Label_Map: Non, nous allons avoir besoin d'une carte d'étiquettes dans notre code pour faire les prédictions ou de notre modèle pour obtenir un identifiant, et le service informatique aura une étiquette portant le nom de l'objet qui sera affiché sur le front-end. Et comme nous utilisons le SST mobile et le jeu de données coco, ils nous fournissent déjà carte d'étiquettes avec un fichier PTN afin que nous puissions ajouter notre application Donc, si vous passez à cette URL, je la laisserai dans les ressources, vous pouvez voir qu'une carte d'étiquettes avec un numéro d'identification et ensuite un nom, l'étiquette de l'objet lui-même est déjà fournie carte d'étiquettes avec un numéro d'identification et ensuite un nom, . Cette carte d'étiquettes particulière peut être assez grande. Je peux avoir des centaines de milliers d'étiquettes, mais je les raccourcis, et maintenant nous pouvons les ajouter à notre application. Nous pouvons donc accéder à nos codes Visal Studio et là, dans le dossier principal, nous créons un nouveau fichier que nous appelons label Point de carte Pi. Ensuite, je vais simplement coller la carte des étiquettes. Je vais également laisser ce fichier dans la description, il vous suffit donc de le copier-coller, puis nous avons notre carte d'étiquettes ici. Mais pour l'utiliser dans notre fichier principal, nous devons l'importer. Nous remontons donc ici et nous sauvegardons de son à partir de la partie des importations, c'est-à-dire à partir de la carte des étiquettes, nous importons la carte des étiquettes. Donc, en gros, ce que nous faisons ici, nous importons cet objet ici dans notre application principale. Donc, ne faites pas importer notre carte d'étiquettes dans notre dossier principal, nous pouvons continuer notre itinéraire. 28. 28. Retourner les résultats de la route de prédiction: Nous pouvons maintenant poursuivre notre itinéraire Pre-Vic. Nous nous sommes donc arrêtés ici lorsque nous avons créé notre tableau de résultats. Donc, juste avant le tableau de données, nous allons passer en revue le nombre de détections. On peut donc dire quatre dans l'intervalle du nombre de détections. Nous examinons donc la gamme complète du nombre de détections que nous allons obtenir ici Nous continuons la fonction et nous disons que si nos détections sont détectées, celle-ci notée parce que si vous vous souvenez que plusieurs détections se produiront celle-ci sera notée parce que si vous vous souvenez que plusieurs détections se produiront sur une image, puis nous voulons simplement tirer parti de la détection la plus importante ayant un score le plus élevé, car elle est la plus proche de l' objet que nous voulons Donc, si la détection a obtenu un score sur notre image d'index, nous voulons que ce soit celui qui nous intéresse s'il est égal ou supérieur à 0,5 . Donc, si nous avons ce score et cette détection, nous dirons que l'ID de classe sera un entier dans ce cas, et nous définirons simplement le même numéro d'index. Les classes de détection auront donc le numéro de notre index, selon notre apparence. Donc, en gros, nous convertissons notre identifiant de classe en un nombre entier. Ensuite, nous pouvons également définir la catégorie. Et la catégorie sera donc notre carte des labels. Nous devons utiliser les étiquettes du fichier que nous avons ajouté précédemment. Et à l'intérieur de notre carte d'étiquettes, nous allons obtenir l' identifiant de classe ou inconnu. Inconnu Ici, la catégorie obtiendra l'ID de classe de la détection que nous transformerons en entier et nous ferons correspondre l'un de ces index ici Nous avons donc également besoin de notre boîte de détections. Nous disons boîte, et nous disons détections. Et ici, nous voulons obtenir tous les scores de détection. Avec un SA pour environ 12 S ici, il suffit de faire les scores de détection, puis nous voulons également l'indice. Enfin, nous pouvons faire part de nos résultats. Nous allons donc appeler OR array results et ajouter ces résultats Nous pouvons donc vérifier ce tableau, l' essayer et avoir les données dont nous avons besoin sur le front-end. Mais ici, nous devons ouvrir un objet et nous avons la boîte. Ce sera juste la boîte que nous avons créée auparavant. Nous aurons également la catégorie. Encore une fois, même catégorie à partir d' ici, puis le score. Nous avons donc besoin que le score soit affiché sur le devant pour avoir tendance à marquer et à marquer. Et comme nous n'avions pas le score, nous devons effectuer un audit ici. Le score sera donc « J'ai une erreur ici » et je peux voir maintenant que les cases doivent être notées au lieu de cases . Ensuite, nous en ouvrons un nouveau, et nous encadrons les détections, ouvrons à nouveau les crochets, et nous disons détection Boîtes. Encore une fois, nous voulons un index. Alors maintenant, tout devrait bien se passer avec cette boucle. Ensuite, nous voulons voir les résultats d'une manière ou d'une autre. Nous revenons ici, donc deux lignes en arrière à cause de la citation et nous voulons imprimer nos résultats Nous disons donc final, et nous disons résultats à des fins de test, afin que nous puissions voir les résultats sur notre console, puis nous devons renvoyer les données déjà formatées pour notre interface Donc, comme la fonction doit renvoyer une réponse adjacente, nous devons également la renvoyer. Nous disons donc retour. Et puis Jason répond, et notre contenu en sera le résultat. Voici donc notre tableau dans lequel nous avons ajouté des données par le biais de ces méthodes. Nous pouvons donc l'enregistrer, puis tester dans notre console. 29. 29. Tester notre itinéraire: Nous pouvons maintenant aller tester notre itinéraire et notre serveur pour le moment. Je télécharge juste quelques images pour que nous puissions les tester, et nous les laisserons ici dans les ressources, et nous devrons exécuter notre application avec UVCorn Mais je lance l'application avec UVCorn et j'ai eu cette erreur Si vous avez cette erreur, veuillez simplement suivre ces méthodes pour la résoudre. Vous devez donc installer PIP multip pour pouvoir le faire. Mais d'abord, je dois arrêter cela à nouveau et dire, P installez Python en plusieurs parties C'est parce que cela nécessite formulaire parce que nous utilisons un formulaire ici, puis nous pouvons réutiliser l'UVCorn Nous disons donc UVcorn main colon up, puis relos. Et maintenant, nous pouvons le vérifier dans le navigateur. Et si nous allons dans notre navigateur, nous passons à notre itinéraire vers notre application WireL que nous avions et à la partie documentation Nous pouvons donc déjà tester si notre itinéraire de prédiction fonctionne ou non. Nous allons donc simplement l'ouvrir ici. Et puis, comme vous pouvez le voir, il y a plusieurs données de formulaire. C'est pourquoi nous avons dû exécuter cette installation de PIP car notre route ne fonctionnait pas simplement à cause de cette méthode post Nous disons donc simplement de l'essayer. Et ici, nous pouvons choisir un fichier. Veuillez donc choisir le fichier de votre choix, mais n'oubliez pas qu'il doit figurer sur la carte des étiquettes. Vous pouvez donc simplement utiliser les images laissées sur les ressources. Nous allons juste utiliser une image, disons ce bateau, nous le téléchargeons, puis nous disons exécuter. Et maintenant, l'exécution s'est bien déroulée, tout fonctionne bien, et nous avons notre réponse. Donc, comme vous pouvez le voir, plusieurs cases, mais dans ce cas, nous allons obtenir le maximum de cases qui ont un score. Cela a donc permis d'identifier la catégorie dans laquelle l'équipe utilise un bateau comme nous nous y attendions et avec une précision de 98 %. Donc, au début, nous allons simplement arrondir au pourcentage supérieur. Mais ici, nous avons un nombre décimal de 0,98, soit 98 %. Nous pouvons essayer avec une autre image. Nous le réinitialisons donc, disons qu' un chat dit « exécuter » et que notre prédiction soit un chat. Vous pouvez également voir les résultats ici sur votre console, sur votre terminal. Donc, les deux derniers que nous avons prédits sont les deux, le chat avec 99 % de points et l'autre avec 98 Les images sont donc suffisamment claires pour que notre modèle puisse les détecter. 30. 30. Utiliser le crochet d'image de téléchargement: Maintenant que notre back-end ou notre serveur est configuré, nous pouvons revenir à notre interface et gérer cette connexion. Tout d'abord, nous allons créer un hook de réaction. Ainsi, un hook React nous permet d'avoir un morceau de code, une fonction ou n'importe quelle donnée dans un seul fichier qui peut être utilisé ou connecté à notre application Donc, pour créer cela, nous arrivons ici sur notre site où nous avons nos fichiers et nous allons créer un nouveau dossier, que nous appellerons hooks. Ensuite, à l'intérieur de ce dossier de crochets, nous allons créer un fichier et le fichier appellera use. Les hooks React doivent donc toujours avoir le préfixe use puis dire image AppLosHok. Et c'est un fichier Ts, donc un fichier dactylographié Maintenant, à l'intérieur du Hook de réaction, nous allons d'abord transmettre ce dont nous avons besoin. Nous aurons donc besoin de l'état d'utilisation de React. Nous aurons également besoin d'Axios Axios répondra donc à toutes nos demandes HCTP via l'application Si vous ne savez pas, whatxus est une simple requête XTTP pour obtenir la date ou recevoir des demandes de publication, voici un package utile pour vous voici un package utile pour Nous allons donc créer un look avec Export à utiliser dans toute l'application et const, et nous l'appelons use image up loads Et lorsque nous applaudissons, nous recevons un argument, et cet argument sera la chaîne ou le L que nous enverrons d'où nous le voulons Et nous l'appellerons simplement applause WL, et le type est une chaîne Ensuite, nous pouvons simplement avoir la fonction flèche et tout renvoyer ici. abord, nous devons avoir certains états, afin de créer le premier. Nous l'appelons prédiction. La prédiction est ce que nous allons retourner à notre composant. Prédiction. Ces résultats proviendront du back-end, traités ici, puis nous pourrons les utiliser n'importe où. Nous disons « utiliser l'état » et « juste le provoquer ». Ensuite, nous avons également besoin d'un indicateur de perte. Nous allons créer un volan dont les appels sont en cours de chargement, puis nous disons que set est en train de perdre, puis nous réutilisons state. Et dans ce cas, nous voulons que ce soit un type de booléen, et nous lançons l' application sous Notre état de chargement sera donc faux au début. Ensuite, reprenez le coût, et nous avons également besoin d' une variable d'état en cas d' erreur. Alors dites erreur. Cette application aura donc une erreur, nous allons simplement la définir ici, puis dire erreur. Et ici, comme il s' agira d'un message d'erreur, nous devons le définir sous forme de chaîne. Mais s'il n'y a pas d'erreur, nous avons une valeur nulle. Nous démarrons donc le cycle de vie de ce hook avec cet état nul, donc aucune erreur au début. Ensuite, nous créons notre fonction en vous. Nous avons donc besoin d'une fonction pour télécharger notre image. Nous pouvons simplement dire Cost, aploimage qui sera une fonction de synchronisation qui prendra le fichier comme argument Nous téléchargeons donc ici notre image et le type sera un fichier. Ensuite, nous retournons simplement quelque chose à l'intérieur. Et à l'intérieur, nous avons d'abord besoin de données de formulaire, car nous agirons comme un formulaire lorsque nous téléchargerons notre image telle que nous l'avons créée auparavant, c'est un formulaire, et nous devons la définir comme de nouvelles données de formulaire. Ensuite, nous ajouterons cette image aux données de notre formulaire. Les données du formulaire ajoutent donc le fichier que nous avons passé en argument. Donc, c'est amusant de archiver. D'accord, alors parce que nous nous opposons à l'image, nous devons considérer la défaite comme vraie. Ainsi, lorsque nous applaudissons l'image, nous avons tendance à montrer que la perte est vraie, puis nous créons un indicateur de rotation ou de perte pour notre application est donc vrai de perdre lorsque nous nous opposons à l'image, puis que nous définissons l'erreur comme nulle. Nous n'avons donc toujours aucune erreur ici. Ensuite, nous ferons une promenade d'essai. Et d' abord, en faisant des essais, nous obtiendrons ou essaierons d'obtenir les informations dont nous avons besoin, et nous détecterons toute erreur éventuelle. Donc, pour créer une marche d'essai qui est un essai , puis de retour ici, nous détectons et nous transmettrons toute erreur si elle existe Nous allons donc détecter n'importe quelle erreur puis ouvrir un autre bloc. Mais il nous manque certaines parties de notre application, comme, par exemple, les types. Nous voulons donc que notre hook renvoie un type spécifique. Nous voulons également que notre prédiction soit d'un type spécifique. Donc, pour cela, j'ai d'abord une faute de frappe, donc c'est une prédiction Pour cela, nous allons maintenant créer nos types. 31. 31. Types de résultats: Non, pour nos types, nous pouvons soit créer les types ici soit pour rendre l'application plus organisée. Nous allons créer un nouveau dossier, que nous appelons types de dossiers Ensuite, à l'intérieur des types de dossiers, nous créons un autre fichier appelé type point Ts. Et ici, nous pouvons commencer à créer les types que nous voulons utiliser. Nous allons donc d'abord utiliser le type de production que nous allons ensuite envoyer à notre composant principal. Et pour cela, nous disons exporter, afin de pouvoir exporter ce type, type, et nous l'aurons lors de la prédiction. La prédiction équivaut à des accolades de rôles ouvertes, puis nous disons catégorie pour laquelle nous avons besoin d'une catégorie. Donc, comme vous vous en souvenez, l'étiquette et appelez-la une chaîne. Ensuite, nous devons également montrer le score. Nous avons donc notre score, et notre score sera un chiffre si vous vous souvenez 0,98 que nous allons envoyer en plus de notre émission là-bas Après cela, nous devons également renvoyer quelque chose à partir de notre fonction. Nous voulons donc obtenir les types exacts que nous voulons renvoyer à partir de notre fonction, utilisant principalement le résultat des applaudissements sous forme d'image Ensuite, nous pouvons dire, encore une fois, exporter le type, utiliser l'image, applaudir, puis le résultat Et ce seront les applaudissements. Image qui, dans ce cas, sera une fonction comme nous avons notre fonction qui appelle un fichier en tant que fichier type, puis nous allons simplement renvoyer ici la voix de promesse. Nous pouvons donc y retourner toutes les promesses que nous voulons. Ensuite, nous avons également la prédiction. Donc, si vous vous souvenez, ces prédictions se présentaient sous la forme d'un tableau. Donc pour cela, nous allons utiliser ici ce type, que nous appelons prédiction. Mais comme il s'agit d'un tableau, nous voulons un tableau contenant des prédictions, mais il peut également être nul, ne rien avoir en cas d'erreur ou s'il n'y a aucune correspondance trouvée Nous devons donc définir aussi bien que null. Ensuite, nous avons, encore une fois, chargement qui, dans ce cas, est un lingot, puis l'erreur et la flèche, si vous vous souvenez de la chaîne ou non Alors maintenant, nous pouvons revenir à notre hameçon et définir ce dont nous avons besoin ici. Donc, ici, dans la première variable d' état, nous devons la définir comme prédiction. Ouvrez donc le tag ici, puis nous disons prédiction. Il s'agit d'un tableau de prédictions qui peut également être nul. Et le premier état où le composant rend tout est nul Ainsi, lorsque le composant s'affiche, nous n'avons encore rien, nous devons donc le définir comme nul Maintenant, nous devons importer notre type pour pouvoir l' utiliser dans l'application. Donc, si nous passons ici à la partie des importations, nous disons importer, puis ouvrons Kern Pass, et nous importerons nos deux types C'est donc une prédiction et les applaudissements utilisent une image, appliquent le résultat. Et j'ai importé une erreur dans le temps, alors supprimez simplement celle-ci. Maintenant, là où nous voulons l'utiliser, nous voulons l'utiliser comme type de notre fonction ou comme résultat de notre fonction, ce qu'ils renverront à la fin. Nous utilisons donc une image, un résultat applaudi. Alors maintenant, nous obtenons cette erreur car nous devons renvoyer quelque chose et nous ne renvoyons toujours rien. Cette erreur disparaîtra donc fois que nous aurons terminé ce bloc de code ici. Nous allons continuer à la prochaine. 32. 32. Retourner les données de Hook: Non, ici, dans notre bloc try and catch, nous devons encore faire quelques appels afin d'avoir les résultats exacts pour ensuite l' utiliser sur le composant principal. Donc, tout d'abord, nous allons faire la demande de publication, puis avec l'axe que nous importons, et pour cela, nous disons coût, et ce sera une réponse égale. Et comme il s'agit d'une opération synchrone, nous dirons attendre le résultat, puis nous disons axios post et nous voulons augmenter parce que nous allons l'envoyer depuis notre composant principal qui sera prédiction sur un tableau de Ensuite, nous ouvrons les bretelles et nous indiquons ce que nous allons envoyer, type d'informations que nous allons envoyer Nous avons donc d'abord besoin de l'URL dont nous n'avons toujours pas l'URL dans l'application, mais nous la définirons plus tard. Ensuite, les données du formulaire. Il s'agit donc de données de formulaire que nous avons définies ici. Et encore une fois, une virgule, et on ouvre les oreilles avec des bretelles bouclées. Donc, pour les ers, nous disons d'abord « ers curly braces puis nous définissons simplement le type de contenu donc de guillemets ouverts, de type de contenu et dans ce cas, si vous vous en souvenez, d'après nos tests sur le serveur , de données de formulaire en plusieurs parties C'est le cas des données de formulaire en plusieurs parties. OK, alors je mets une virgule ici. Et la première chose que nous pouvons faire, c'est après la variable de réponse ou la demande de réponse, nous donnons une autre ligne ici et nous pouvons d'abord définir le journal de la console, afin que nous puissions voir la réponse. Disons réponse du serveur, car si quelque chose se produit et que les données n'arrivent pas, nous pouvons vérifier sur la console si elles arrivent réellement ou non, puis les données de réponse. Ensuite, nous devons vérifier si tout va bien. Nous disons donc si notre tableau prédictions est un tableau avec des données de réponse. Donc, s'il s'agit d'un tableau, et la réponse est que c'est parce que c'est un RA en tant que longueur. Et si cette longueur est supérieure à zéro, ce qui signifie qu'elle est renseignée, nous pouvons dire que les données existent et nous définissons la prédiction en fonction des données de réponse. Si ce n'est pas le cas, sinon, nous définissons l'erreur. Donc, comme cela ne correspond pas à la vérité et que nous n'avons aucune donnée, nous renvoyons simplement une erreur, et comme ça, nous devons définir l'erreur et indiquer format de réponse inattendu de la part du serveur. Cela signifie que quelque chose s'est mal passé sur le serveur. Si tout se passe correctement, notre application enverra ces données et nos prévisions seront renseignées. Mais n'oubliez pas, nous sommes toujours dans un état perdant parce que c'est vrai, donc toujours rien, et nous nous mettrons plus tard à afficher les données. Alors maintenant, nous poursuivons notre pêche. Donc, si nous avons une erreur, nous définissons d' abord une erreur de console. Et comme je l'ai dit, nous ajoutons une erreur. Nous avons eu une erreur en bloquant l'image, puis nous indiquons de quel type d'erreur il s'agissait Donc, cette erreur sera également affichée sous forme d'erreur de console. Ensuite, nous ouvrons I. Et c'est parce que nous utilisons Axios, nous disons Axios C'est une erreur axiale. Axis le détectera donc en cas d'erreur et le définira comme une erreur axios ici Nous allons définir une autre erreur. Nous disons donc, peut-être, donnez-lui plus d'espace parce que nous en avons besoin ici et nous disons « ouvrez une case arrière Et puis vous dites, donc retour en arrière, dix guillemets différents, disons « échec de perte d'image ». Ensuite, ouvrez le signe 1$, Curly Races, puis nous transmettons le message d' erreur ou le message d'erreur qui vient d'ici Ensuite, nous pouvons continuer ici. Nous avons un point, puis un statut. Ce ne sont donc que des informations utiles en cas d'erreur. Nous parlons d'état de réponse aux erreurs. Nous pouvons à nouveau fermer les bretelles, un autre point, un autre signe du dollar, et nous pouvons dire erreur Dot répond. Nous avons mis ce point d'interrogation parce qu'il s'agit d'un état facultatif. Ainsi, autoriser s' il n'existe pas, ne continue pas, puis détaille ou simplement une chaîne vide. Ensuite, dans notre bloc I, nous devons également définir s, et le s ira bien Nous définissons simplement une erreur différente si l'une de ces erreurs est vraie, mais nous avons toujours une erreur. Nous devons juste dire que nous n'avons pas réussi à faire exploser l'image. Veuillez réessayer. Donc, s'il n'y a aucune erreur du serveur ou aucune erreur d'Axios, nous définissons simplement ce message d'erreur Ensuite, nous voulons terminer le bloc , puis nous disons ici. Donc, après avoir attrapé et essayé, nous devons finaliser, puis nous disons que si tout se passe correctement, nous avons dit que le set était perdu face au foss Nous ne perdons donc plus. Nous affichons soit une erreur, soit les données réelles. Enregistrer mais ensuite comment extraire ? Nous devons rendre quelque chose. Nous devons donc renvoyer toutes les variables d'état que nous avons créées. Nous disons donc simplement retourner les accolades Carl ouvertes, et nous renvoyons une image graphique Donc, pour définir la fonction du composant principal pour l'envoyer ici, la prédiction que nous devons également envoyer, ce chargement afin que vous puissiez vérifier l'état du chargement puis l'erreur. Donc maintenant, si nous sauvegardons, et que nous avons toujours cette erreur d'erreur parce que c'est un type inconnu, donc pour le réparer facilement, il suffit de le définir comme ici, et l'erreur disparaît. Mais j'ai une erreur d'ici. Il s'agit de mon peluchage, car idéalement, dans une application de grande envergure sur une application de production, nous ne devrions jamais utiliser aucun cas ou uniquement des cas très spécifiques, car cela peut interrompre l'application et le long terme ou le développement continu J'essaie donc généralement d'éviter d'en utiliser, mais dans ce cas, nous pouvons simplement l'utiliser. Maintenant, enregistrez-le, et nous sommes prêts à tester cette partie dans notre application. 33. Utiliser le hook dans la commande d'image: Donc, la première chose à faire est d'y retourner. Nous pouvons fermer tout cela et revenir à notre point de contrôle d'image TSX Et si vous vous souvenez, nous avons créé ici ces variables dont nous n'aurions pas besoin ou que nous n'utiliserions pas, mais nous devons changer cela maintenant. Donc, tout d'abord, nous disons simplement le coût. Ensuite, nous voulons avoir les mêmes choses que celles que nous revenons après notre séjour. Nous avons donc l'image fermée. Nous aurons besoin d'une prédiction. C'est la perte et l'erreur. est donc ce que nous allons utiliser déjà défini au cours de notre première année, et cela se fera dès le départ avec les bonnes données. Ensuite, nous devons utiliser le crochet, donc nous disons image, utilisons Image applaud Et si j'appuie juste sur un onglet, le crochet sera importé pour moi. Importez donc, utilisez l'image applaud depuis notre dossier de crochets et le bon fichier Maintenant, parce que j'ai une erreur ici et pourquoi ? Parce que si vous vous souvenez, notre hook qui utilise Image plus nécessite un argument qui est un plus gagné, ce qui signifie que nous devons passer notre clé. Donc pour l'instant, nous avons juste défini une chaîne vide, mais nous devons toujours demander la clé à notre serveur. 34. Clé API: Non, nous avons besoin de la clé de notre serveur ou de l' URL de notre serveur pour pouvoir l'utiliser ici. Donc, pour cela et pour les méthodes de séparation, nous ne serons donc pas visibles ici, nous créons un nouveau dossier appelé keys. Et à l'intérieur, nous créons un nouveau fichier appelé APi kis dots. Veuillez noter qu'il s'agit d'un moyen très simple de choisir les clés à ne pas afficher ici, mais pour des raisons de sécurité, vous ne devez pas l'utiliser de cette manière si vous l'utilisez soit sur une variable d'environnement, soit sur un fichier journal. L'utilisateur n'y aura donc pas accès via les outils de développement ou d'autres méthodes. Pour cela, il suffit de créer une constante pour indiquer export, cost, puis nous l'appelons API key equals, puis comme il s' agit d'une chaîne, nous ouvrons des codes Et si vous vous souvenez que c'est HTTP, slash slash 127.0 0.04 0.1, et nous exécutons le serveur sur le port 800 Si vous changez de port, veuillez donc utiliser le port que vous utilisez. Nous devons donc également définir le type typescript, puis comme il s'agit d'une chaîne, nous le définissons en tant que Et maintenant, nous pouvons utiliser cette clé d'API dans notre application. Nous revenons donc à notre contrôle d'image, et nous devons d'abord l'importer. Encore une fois, nous allons dire importer des bretelles bouclées ouvertes, et nous importons notre clé API constante depuis notre dossier Kiss et APIs kiss Donc, ici, lorsque l'image apparaît, nous transmettons facilement ce que nous voulons Nous devons donc d'abord ouvrir le Bectix. Encore une fois, le ctix nous permet d' utiliser des variables à l'intérieur de la chaîne, et nous voulons ouvrir le signe du dollar et les courses bouclées, puis nous avons notre clé APA Mais parce que notre clé APA ou l'itinéraire que nous voulons utiliser ne s'arrête tout simplement pas à un port. Nous devons également passer notre barre oblique, prédire, car c'est notre méthode de publication que nous avons créée auparavant dans notre application Alors maintenant, nous l'enregistrons, et maintenant nous pouvons continuer. 35. Gérer le téléchargement et la gestion de l'image: Nous pouvons déjà utiliser ces méthodes dissuasives dès maintenant, mais nous devons tout de même créer des fonctions pour gérer le changement d'image ou le téléchargement de l'image Donc, la première chose que nous allons faire est d'avoir une nouvelle fonction ici, que nous appellerons gérer le changement d'image. Donc, l'événement que nous allons utiliser pour changer l'image ou pour télécharger une nouvelle image, et l'autre sera un événement. Et cet événement aura le type d'événement de changement. Donc, événement d'entrée HTML parce que nous perdons ou perdons une image de notre ordinateur à cause de cette méthode ici Nous l'appelons donc change event, le type qui vient de React, puis nous ouvrons les balises, et à l'intérieur, nous avons l'élément d'entrée HTML. Donc, pour utiliser cette méthode ici. Et comme nous utilisons ce type depuis React, nous devons l'importer. Ainsi, après l'état d'utilisation, nous disons « change d'événement » pour l' importer dans notre code ici. L'erreur a donc disparu et nous sommes prêts à poursuivre notre fonction. Ce sera donc la fonction flèche, puis curibass. Et la première chose que nous allons faire est de définir une variable pour le fichier, donc const file Et il s'agit d'un événement que la cible, les fichiers que nous allons télécharger, sont facultatifs car ils peuvent être vides, et nous voulons le premier élément de ce tableau Ensuite, nous pouvons également le gérer pour vérifier si tout est correct. Donc, si nous avons un fichier, nous ouvrons à nouveau les bretelles Carly Nous avons dit fichier sélectionné par la secte. Souvenez-vous donc de notre variable d'état ici, à savoir le type de fichier. Nous disons donc secter le fichier sélectionné par fichier. Donc, celui que nous avons téléchargé, puis nous avons défini l'image sur l'URL. Donc, une autre interface dans ce cas pour l'URL, puis vous dites créer une URL d'objet. Ainsi, lorsque nous perdons une image, cet événement crée une URL, afin que nous puissions l'afficher immédiatement Alors nous enregistrons et j'ai une erreur ici car le RL est en majuscules. Ensuite, nous l'enregistrons, donc notre image finale change, elle fonctionne, mais nous devons l'utiliser dans notre modèle pour revenir à notre entrée. Nous avons cette méthode pour la méthode inchangée, et il suffit de supprimer cette partie ici , puis d'appeler une fonction et un changement d'image. note également une erreur ici, et c'est parce que j'ai oublié les accolades ici parce que la méthode des deux par cas est une méthode qui nécessite des accolades Il suffit donc d'ajouter les bretelles ici, je les complète. Nous devons maintenant gérer le téléchargement. Pour cela, lorsque nous voulons que le téléchargement soit téléchargé sur notre serveur, il suffit de dire « Coût, suffit de dire « Coût, gérer les téléchargements » équivaut à nouveau à une fonction de flèche de synchronisation, puis de dire « un fichier est sélectionné, nous attendons l'image de téléchargement Pour renvoyer quelque chose avec le fichier sélectionné. L'image de téléchargement est donc la fonction que nous avons dans notre hook que nous avons créé pour gérer cette partie. Pendant le téléchargement, nous pouvons attendre que tout se passe correctement, il nous enverra la date Sinon, nous pouvons simplement définir l'erreur de console en disant qu'aucun fichier n'est solide. Maintenant, nous pouvons économiser. Mais avant de le tester, nous devons ajouter cette fonction quelque part dans notre modèle car cela va déclencher l'événement. Et si vous vous souvenez, nous avons ce bouton avec un clic vide ici, et c'est là que nous allons avoir notre fonction. Nous disons donc « Endo Applaudissements ». Nous pouvons donc maintenant l'enregistrer et tester notre application. 36. Test de téléchargement d'image: Donc, dans notre application, si l' application n'est pas en cours d'exécution, suffit de NPM run Def pour démarrer notre application informatique, puis d'aller sur l'hôte local, puis sur notre hôte local, il y a une erreur Et c'est parce que nous n'avons pas installé Axios. Arrêtons donc notre serveur, puis nous disons «   NPM install Axios D'accord. Maintenant, nous pouvons réessayer et envoyer un message au développeur sur notre navigateur et tout est correct. Nous pouvons maintenant télécharger l'image. Il suffit donc de choisir le fichier ici. Et nos images sont pliées et nous pouvons simplement ouvrir celle-ci, l'événement changeant change correctement l'image ici, puis nous pouvons simplement appuyer sur Identifier l'image, et nous avons une erreur réseau. Et pourquoi avons-nous une erreur réseau car ces applications se terminent par HTTP, et nous devons définir ou mettre fin aux demandes d'origine croisée à accepter dans l' C'est donc ce que nous allons faire ensuite. 37. Autoriser CORS: À notre serveur dans notre fichier PTN principal, nous devons ajouter autre chose pour gérer les origines croisées de notre application Nous devons donc d'abord importer certaines pièces dont nous aurons besoin pour l'utiliser. Donc, pour en revenir aux importations provenant, disons, du cours sur le middleware de l'API FAST pour l'origine croisée, nous importons le middleware de cours Ensuite, nous revenons à notre API up fast, nous ouvrons quelques lignes et nous disons « up ». Donc, de l'API FAST, sous forme d'appareils orthopédiques à usure intermédiaire et de bretelles ouvertes. Ensuite, nous évoquons la guerre du milieu, puis nous disons « autoriser Et toutes les origines seront des matrices. Ensuite, sur la ligne suivante, nous disons autoriser les informations d'identification à être vraies. Et nous disons autoriser, puis nous disons autoriser les méthodes. Et ces méthodes seront à nouveau un tableau. Mais dans ce cas, nous ouvrons les guillemets et nous disons étoile pour les autoriser tous, puis encore une virgule, puis nous disons autoriser Es, pareil Donc tableau, guillemets et allow of. Ensuite, il suffit d' ajouter des virgules ici, et tout devrait être prêt Ici, sur Loigin, nous allons définir les chaînes de notre interface URL que nous utilisons, et nous pouvons en utiliser plusieurs pour utiliser, par exemple, l'hôte local HCTP parce que nos applications s' exécutent sur un hôte local, nous pouvons définir, par exemple, cet hôte local , ou nous pouvons même utiliser plusieurs hôtes locaux ici, par exemple , ou nous pouvons même utiliser plusieurs hôtes locaux ici, , encore une fois, entre guillemets et dire, encore une fois, Hôte local HCTB puis 42. Ainsi, par exemple, nous avons une application React ici et application angulaire ici que nous pouvons utiliser, et l'hôte local sera disponible et les origines ne poseront plus de problèmes. Donc, si je le sauvegarde, nous pourrons le tester à nouveau. 38. Mettre les résultats à l'écran: Non, revenons à notre interface, nous pouvons simplement rafraîchir la page et réessayer. Ouvrez donc à nouveau les images. Laisse-moi planifier à nouveau, puis nous allons juste identifier l'image Et comme vous pouvez le constater, un ploding. Et voici l'étiquette qu'il a détectée comme étant un avion et le pourcentage. Donc, le pourcentage, nous l'avons défini ici. Si vous vous souvenez de ce nombre étrange, ce long nombre avec décimos, nous le traitons ici pour le fixer sous forme de pourcentage Nous pouvons donc essayer une autre solution, disons Zebra, et vous verrez l'image modifiée, mais nous devons encore l'identifier Ici, Zebra est en fait une image très facile à identifier à cause des rayures Ensuite, nous pouvons essayer davantage, par exemple, un bus, avec une précision de 98 %. Alors maintenant, n'hésitez pas à ajouter d'autres images et à essayer. Gardez à l'esprit que modéliser c'est toujours apprendre et que nous faisons des erreurs. Nous allons modifier les étiquettes et la précision ou même dire que l'image n'existe pas. N'hésitez pas à essayer de créer une application plus complexe soit sur le back-end, soit à essayer d'améliorer ce front-end afin de répondre à vos propres besoins. 39. Se scinder en composants plus petits: Sees of React est basé sur des composants. Tout doit donc être dans composants plus petits pour que le code reste propre, que le projet soit plus compréhensible, et que les composants puissent également être réutilisables dans d'autres composants. Voici donc comment nous procédons. abord, nous allons diviser ces deux composants en composants plus petits. Nous pouvons donc démarrer le composant image, et pour cela, nous retournons dans notre dossier de composants et nous créons un nouveau fichier, que nous appelons image component point DSX Ensuite, nous pouvons simplement définir const, appeler le composant image. C'est un composant fonctionnel, donc notre fonction, puis ici nous renvoyons simplement quelque chose, puis nous exportons le composant d'image par défaut. Ensuite, il suffit de copier ce div et tout ce qu'il contient, de le couper. Et à l'intérieur du retour, nous collons le contenu de l'image. Nous avons une erreur ici, puis nous verrons plus tard comment éviter cette erreur et nous transmettrons également des accessoires Nous pouvons donc le garder pour le moment. Ensuite, nous pouvons importer notre composant nouvellement créé. Nous disons donc simplement image. Composez et fermez le deck. Voyons donc ici. Comme vous pouvez le voir, nous importons ce composant d'image à partir du composant d'image. Nous pouvons également diviser ces boîtes de prédiction où se trouvent notre cicatrice et nos catégories en un autre composant. Encore une fois, nous arrivons ici et nous disons « composante de prédiction point TSX Et puis il en va de même pour le composant de prévision des coûts. Encore une fois, composant fonctionnel. Ensuite, nous renvoyons ce qu'il y à l'intérieur de cette prédiction, la boîte ici. Copiez Div et tout ce qu'il contient, découpez-le, accédez à un composant de prédiction J'ai toujours l'erreur. Regardez-le plus tard, comme je l'ai mentionné, puis nous devrons exporter par défaut. Composant de prédiction à enregistrer. Ensuite, dans notre contrôle d'image, nous appelons à nouveau le composant. Donc, dans ce cas, cette composante de prédiction est-elle issue de la composante de prédiction. N'oubliez pas de l'importer ici. Et maintenant, pour nous débarrasser de ces erreurs, nous devons transmettre des accessoires, et nous y reviendrons ensuite 40. Accessoires React: Nous voyons donc ici ces deux erreurs qui se produisent dans notre composant, et c'est parce que nous n'avons pas d'accessoires ou cet objet n'existe pas ici Et pour résoudre ce problème, il nous faut simplement passer les accessoires, comme je l'ai mentionné Les accessoires sont donc un moyen de transmettre des données d'un parent à un enfant. Quels composants transmettront donc des données à un autre composant, afin qu'il puisse être rendu dynamique. Selon que vous souhaitez réutiliser le composant ou non, vous pouvez transmettre différentes données à ce composant. Et ici, comment pouvons-nous le faire ? Nous allons d'abord transformer ce composant en un composant fonctionnel. Nous avons donc ici une colonne puis FC pour le composant fonctionnel et ouvrons ce texte ici. Nous devons donc transmettre notre type de balise. Donc, si vous vous souvenez, dans notre type, nous avons ce type de prédiction qui contient score de catégorie N que nous avions l'habitude d'afficher à l'écran. Ici, nous pouvons simplement importer ce type de prédiction. Importez donc la prédiction à partir des types. Et cette erreur est également due au fait que nous devons importer le composant fonctionnel depuis la bibliothèque React. Supposons donc que vous importez des étalonnages ouverts FC depuis Reacts. Et comme vous pouvez le constater, les erreurs sont v. Maintenant, nous avons également besoin de nos accessoires que nous allons utiliser comme arguments Et pour cela, nous pouvons ouvrir des étalonnages. Et n'oubliez pas que nous avons au lieu de taper la catégorie et noyau DS et que nous pouvons simplement indiquer votre catégorie et votre score. Donc, comme ça, l' erreur disparaîtra. Mais pour l'instant, elle est toujours là, suffit de supprimer cette prédiction ici que nous n'utilisons pas pour simplement utiliser la catégorie et le score. Toutes les erreurs ont donc disparu, nous les enregistrons, puis pour les utiliser dans notre contrôle d'image, comme vous pouvez le voir ici, nous affichons immédiatement une erreur, et cela parce qu'il manque ces types. Ce dont nous avons besoin ici, c'est d'abord d'une catégorie, puis nous ouvrons une orthèse bouclée et nous réussissons le pronostic Premier élément du tableau et de la catégorie. Et nous devons également faire de même pour le score. Encore une fois, bretelles frisées, prédiction et Donc, si nous passons comme ça, cela donne une erreur car il attend un nombre. La cicatrice est donc un chiffre, toutes les erreurs ont disparu. Faisons de même pour le composant image et le composant image. Et comme nous n'en avons pas le type dans ce cas, nous allons procéder différemment. Alors d'abord, encore une fois, créez un composant fonctionnel. Transmettons-le à partir de la bibliothèque React. Et puis ici, si vous vous souvenez que cette image est une chaîne, nous pouvons simplement la transmettre si nous n'avons pas de type pour la transmettre directement ici. Donc curly se soulève et nous disons image RL, c'est une chaîne. Nous attendons donc une chaîne. Et puis passez-le également ici comme argument. Ensuite, nous devons également changer le niveau en image o, et toutes les erreurs auront disparu. Ensuite, dans notre composant image, encore une fois, nous avons le même problème et nous devons transmettre cette image que nous gérons selon notre logique au composant image. Donc, disons image RL, égale image. Toutes les erreurs ont donc disparu et nous pouvons maintenant le tester dans notre application. Pour en revenir à notre application, nous pouvons simplement choisir un fichier. Je n'ai qu'une image faible ici, et nous pouvons essayer sans erreur. Tout fonctionne comme prévu, et voilà. Voici donc comment nous transmettons les données du composant parent au composant enfant et à l'application React. 41. Cas d'utilisation et limites: Dans le monde d'aujourd'hui, les applications de reconnaissance d' objets sont devenues des outils incroyablement utiles, transformant la façon dont nous interagissons avec notre environnement. Imaginez donc que vous marchez sur un téléphone intelligent dans une rue très fréquentée pour ensuite le scanner rapidement Votre appareil peut identifier les dangers potentiels vous aider à naviguer en toute sécurité. Ou imaginez-vous dans un supermarché où la même application aide à gérer les stocks, ce qui facilite le réapprovisionnement pour les propriétaires de magasins . Cependant, ces applications ne sont pas réservées aux entreprises. Ils ouvrent de nouveaux horizons aux personnes malvoyantes en décrivant l' environnement en temps réel. Les amoureux de la nature les trouvent d'une valeur inestimable pour identifier Fada et la faune sur eux-mêmes. Dans les salles de classe, ces applications rendent l'apprentissage plus interactif, transformant les objets du quotidien en opportunités pédagogiques. Mais tout ne se passe pas bien. Bien que ces applications soient intelligentes, elles ne sont pas infaillibles. Par temps nuageux ou dans une pièce faiblement éclairée, ils peuvent avoir du mal à identifier les objets avec précision. Bien qu'ils soient doués pour reconnaître des objets courants, ils peuvent se gratter la tête numérique en voyant des objets plus obscurs ou spécialisés. Il y a aussi la question de autonomie de la batterie dans le cas des appareils mobiles exécution de ces applications peut vider continuellement votre téléphone plus rapidement que prévu, vous retrouver avec une batterie déchargée à un moment opportun, voire même décharger la batterie de votre ordinateur Et dans notre monde soucieux de la vie privée, l'utilisation constante de caméras fait sourciller. Les gens peuvent se sentir mal à l'aise de savoir que leur environnement est constamment analysé. De plus, ceux-ci voient des objets, mais ne les comprennent pas complètement. Ils peuvent vous dire qu' il y a une part sur un téléviseur, mais ils ne comprendront pas qu'ensemble, ils créent un ensemble de salle à manger. Ils sont comme un touriste dans un pays étranger, reconnaissant les mots de la vidéo mais oubliant le contexte complet de la conversation. Alors que nous continuons à intégrer ces applications dans notre vie quotidienne, nous découvrons à la fois leur potentiel et leurs limites. Ce sont des outils incroyablement utiles, mais non sans leurs particularités et leurs défis que la technologie évolue, nous apprenons à trouver un équilibre entre ses avantages et ses inconvénients, trouvant la bonne place pour ces technologies numériques dans notre monde analogique Cela dit, j'ai hâte de voir ce que vous pouvez trouver ou vos idées pour créer ce type d'applications.