Construisez un écran rapide, clair et sûr pour le travail de l'IA. Vous transformez l'API de tickets de Larkfield en une vraie interface de support avec React et TypeScript, vous affichez les brouillons de l'IA pendant leur rédaction, vous suivez les tâches lentes de l'IA, et vous prouvez chaque gain de vitesse par une mesure dans le navigateur.
Lisez toutes les leçons sans compte, ou connectez-vous pour vous inscrire et suivre vos progrès.
Inscrivez-vous pour enregistrer les leçons que vous terminez. C'est gratuit.
À la fin de ce cours, vous pourrez :
Les agents du support de Larkfield utilisent l’API de tickets avec curl et la page de documentation de l’API. Grace, la responsable du support, demande un vrai écran : une liste de tickets qui reste rapide avec des milliers de tickets, une vue de ticket qui montre le brouillon de l’IA pendant sa rédaction, et des messages clairs quand un travail lent de l’IA est encore en cours ou a échoué.
Dans ce cours, vous construisez cet écran un module à la fois. Si vous n’avez jamais écrit de HTML, de CSS ou de JavaScript, le premier module les enseigne depuis le début, avec l’API de tickets que vous connaissez déjà. Ensuite, vous construisez l’interface avec React et TypeScript : de petits composants avec des rôles clairs, et des données de l’API qui restent justes pendant que les gens travaillent.
Puis vous ajoutez ce dont le travail de l’IA a besoin. Un brouillon apparaît mot par mot et s’arrête quand vous appuyez sur Arrêter. Une tâche lente montre si elle attend, tourne ou a échoué. Chaque brouillon montre ses sources et indique si une personne doit le vérifier.
Enfin, vous rendez l’interface rapide, sûre et utilisable par tous. Vous mesurez dans le navigateur avant de changer quoi que ce soit, vous affichez le texte du modèle sans le laisser exécuter du code, vous gardez les secrets hors du navigateur, et vous réalisez chaque tâche au clavier. Tout tourne sur votre ordinateur, y compris une API de tickets simulée dont les réponses d’IA ont été enregistrées à partir de vrais modèles dans des cours précédents.
Vous avez suivi le cours Créer et déployer votre première API, ou vous avez les mêmes compétences. Si vous construisez déjà des interfaces web avec JavaScript, vous pouvez réussir la tâche d'entrée du premier module et commencer par le deuxième. Vous n'avez besoin ni d'un compte ni d'argent. L'API de tickets de ce cours est simulée et tourne sur votre ordinateur ; ses réponses d'IA sont enregistrées ou simulées.
Cours à suivre avant : Créer et déployer votre première API.
Les personnes qui savent construire et appeler une petite API, comme dans le cours Créer et déployer votre première API, et qui ont maintenant besoin d'une interface dans le navigateur pour une fonction d'IA. Vous n'avez pas besoin de connaître HTML, CSS ou JavaScript : le premier module les enseigne. Les développeurs et ingénieurs en IA qui doivent mettre un service d'IA devant de vrais utilisateurs.
Des spécialistes de l'IA expérimentés ont conçu ce cours. L'IA nous a aidés à rédiger le contenu; des personnes ont choisi l'approche pédagogique et les exemples, et ont révisé chaque leçon. Les résultats que vous voyez sont les vrais résultats de l'exécution du code. Comment nous créons les cours
Apprenez le Web depuis le début. Vous lancez l'API de tickets simulée, vous écrivez une page avec HTML et CSS, vous la faites fonctionner avec JavaScript, puis vous la passez à npm, à un serveur de développement et à TypeScript.
Construisez l'interface à partir de composants. Vous apprenez les composants, les props et l'état de React, vous découpez un grand écran par responsabilité, et vous comprenez quand React dessine à nouveau et pourquoi.
Récupérez des données qui restent justes. Vous séparez ce que l'utilisateur a choisi de ce que le serveur garde, vous mettez en cache et rafraîchissez les réponses, vous parcourez des milliers de tickets page par page, et une ancienne recherche ne remplace jamais une nouvelle.
Montrez le travail de l'IA honnêtement. Vous affichez un brouillon pendant sa rédaction avec un bouton Arrêter, vous suivez les tâches lentes en arrière-plan, et vous montrez les sources, l'incertitude et les erreurs avec des mots que les gens comprennent.
Rendez l'interface rapide, avec des preuves. Vous mesurez dans le navigateur la taille du code, le temps de rendu et le temps d'attente, vous chargez moins de travail avec le découpage du code et la virtualisation, et vous choisissez comment les pages sont rendues.
Rendez-la sûre, accessible et prête à être remise. Vous affichez le texte généré sans danger, vous gardez les secrets hors du navigateur, chaque tâche fonctionne au clavier et avec un lecteur d'écran, et vous testez tout, des composants à un parcours complet.
Deux études de cas de bout en bout. Construisez une interface de recherche rapide sur un jeu de données public, et rendez accessible une interface de chat d'IA. Terminez-en au moins une pour obtenir le certificat. Chacune peut entrer dans votre portfolio.
Terminez au moins une étude de cas pour obtenir le certificat. Les autres sont facultatives. Ce que couvre chacune
Des projets réalistes du début à la fin, sur de vraies données, avec chaque résultat expliqué. Chacun devient une pièce de votre portfolio. Terminez-en au moins une pour obtenir le certificat; les autres sont facultatives.
Recherche rapide dans un jeu de données publicBientôt
Construire une interface de recherche sur un jeu de données ouvert, avec une pagination sur le serveur, la gestion des réponses périmées et la virtualisation, puis la mesurer.
Rendre accessible une interface de chat d'IABientôt
Rendre une interface de chat utilisable au clavier et avec un lecteur d'écran : le focus, les libellés et des annonces qui ne lisent pas chaque morceau de texte, testés avec l'arbre d'accessibilité du navigateur.
Chargement des avis…
Vous avez suivi ce cours? Connectez-vous pour donner votre avis. Vous pouvez donner un avis après avoir terminé 25 % des leçons.
