Ressources Magic Makers

Exemples d'App avec AppInventor et MachinLearningForKid

Créer la page d'accueil

Sur AppInventor, tu vas pouvoir créer des applications pour Android en te connectant à une adresse gmail ! L’interface se divise en deux espaces : 

Designer : pour placer des composants (images, boutons, etc)

Blocks : pour programmer tes composants avec des blocs.

Pour commencer, on va créer un écran d’accueil avec une image et un bouton. Tu peux aussi ajouter un simple texte avec le composant Label. Le premier écran s’appellera toujours Screen1.

Tips : Tu peux créer ton titre sur Textcraft pour trouver des polices sympas !

Pour mettre en forme notre écran et aligner au center les éléments, on utilise le composant VerticalArrangement des composants Layout.

On va ensuite créer un second écran et programmer le changement d’écran dans la partie Blocks quand on appuie sur notre bouton ! 

Ajouter le module ML4K

Dans la partie Extension, tu vas importer l’extension ML4K par URL.

Il te suffit de copier le lien que ton animateur te passe puis de cliquer sur Import !

Il apparaît ensuite comme un composant invisible. Dans la partie Blocks, tu vas alors pouvoir accéder aux blocs pour utiliser ton IA.

Tu vas par exemple pouvoir déclencher des actions en fonction de la prédiction de ton IA sur une photo ou encore changer un texte pour l’afficher avec le pourcentage de confiance : 

Reconnaissance de chiffres écrits à la main AVEC UN DESSIN

Côté Designer

Pour cette partie, on a besoin :

    • de deux boutons (un pour lancer la prédiction et un pour effacer le dessin si on veut le recommencer)
    • d’un texte (où on affichera la prédiction)
    • d’un canvas (pour pouvoir dessiner)
    • de l’extension ML4K (ton IA pour prédire sur la photo)

Côté Blocks

Le code va se faire en 3 temps : 

    • on dessine le tracé du doigt quand on glisse son doigt sur le canvas (l’espace de dessin)
    • quand on appuie sur le bouton pour prédire, on demande à notre IA de prédire sur l’image du canvas 
    • quand on a une prédiction, on l’affiche dans un texte et on peut ensuite l’utiliser dans une condition

Dans cet exemple, on a en plus ajouté un bouton pour effacer le canvas si on veut recommencer son dessin ! 

Reconnaissance de chiffres écrits à la main AVEC UNE PHOTO

Côté Designer

Pour cette partie, on a besoin :

    • d’un bouton (pour déclencher la webcam et prendre une photo)
    • d’un texte (où on affichera la prédiction)
    • du composant Camera (pour pouvoir prendre une photo)
    • de l’extension ML4K (ton IA pour prédire sur la photo)

Côté Blocks

Le code va se faire en 3 temps : 

    • on prend une photo quand on appuie sur le bouton pour prendre une photo
    • quand une photo est prise, on demande à notre IA de prédire dessus 
    • quand on a une prédiction, on l’affiche dans un texte et on peut ensuite l’utiliser dans une condition