Tutorials, Εισαγωγή στην ml5.js

Classification με την ml5.js (2/5)

Αναρτήθηκε την από manolisdag
06
Ιαν

Ήρθε η ώρα να ασχοληθούμε με τον κώδικα μας. Ανοίγουμε λοιπόν τον p5 web editor και απευθείας έχουμε ένα πρόγραμμα, πολύ απλό, με εντολές της p5. Το πρώτο πράγμα που πρέπει να γίνει είναι να κάνουμε κλικ στο κουμπί με το γρανάζι που βρίσκεται επάνω δεξιά και να αλλάξουμε το theme μας από light σε dark (ή high contrast αν προτιμάτε). 🙂

Το πρόγραμμα που έχουμε μπροστά μας δημιουργεί έναν καμβά (canvas) με διαστάσεις 400px X 400px και τον χρωματίζει με rgb(200,200,200). Ο καμβάς αυτός δημιουργεί ένα καρτεσιανό σύστημα αξόνων x και y όπου το 0,0 βρίσκεται στην επάνω αριστερή γωνία και στην κάτω δεξιά γωνία έχουμε πλάτος-1, ύψος-1. Είναι ακριβώς αυτό που χρειαζόμαστε μιας και θέλουμε να κάνουμε track την θέση του ποντικιού (όπως και το κλικ). Αυτές είναι οι ευκολίες της p5.

Φόρτωση βιβλιοθηκών

Ανοίγουμε το panel με τα αρχεία (αριστερά), εντοπίζουμε το index.html και φορτώνουμε τις απαραίτητες βιβλιοθήκες. Έτσι το αρχείο μας θα είναι ως εξής

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script>
    <script src="https://unpkg.com/ml5@0.4.2/dist/ml5.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

Το πρώτο μας νευρωνικό δίκτυο

Ας φτιάξουμε το νευρωνικό μας δίκτυο σύμφωνα με τις ανάγκες μας. Θέλουμε δηλαδή ένα nn με 2 inputs και 7 outputs. Ακολουθώντας τις οδηγίες για τη δημιουργία του στην ml5 μπορούμε να αρχικοποιήσουμε ένα nn με μια απλή μέθοδο που παίρνει κάποια options. Για αρχή αυτά τα options είναι ο αριθμός των εισόδων (inputs) και ο αριθμός των εξόδων (outputs).

let nn;

function setup() {
  createCanvas(400, 400);
  background(200);
  
  let nnOptions = {
        inputs: 2,
        outputs: 7,
    };  

    nn = ml5.neuralNetwork(nnOptions);
    
}

Έτσι, πολύ απλά, δημιουργήσαμε ένα νευρωνικό δίκτυο (nn = neural network) με 2 εισόδους και 7 εξόδους και ολα τα ενδιάμεσα που χρειάζονται τα φροντίζει η ml5 αντί εμείς.

Διαβάζοντας παρακάτω στο documentation της ml5 μας δίνεται η δυνατότητα να αρχικοποιήσουμε το nn μας με διαφορετικούς τρόπους. Ένας από αυτούς είναι ονοματίζοντας τις εισόδους και τις εξόδους μας.

Οι είσοδοι μας είναι 2 και αντιστοιχούν στο x και y του ποντικού στη θέση του καμβά που μόλις δημιουργήσαμε.

Οι έξοδοι τώρα είναι κάτι διαφορετικό. Όπως είδαμε στο προηγούμε μέρος του tutorial το nn μας εσωτερικά έχει 7 εξόδους με αποτελέσματα ποσοστού σιγουριάς. Βλέποντας όμως την εικόνα από ψηλά, χρησιμοποιώντας δηλαδή την ml5, μπορούμε να ονοματίσουμε την έξοδο μας (με ένα εύστοχο όνομα, note στην περίπτωση μας) και η ml5 θα αναλάβει να υπολογίσει τον αριθμό των εξόδων, χωρίς να ασχοληθούμε με αυτό. Εμάς μας ενδιαφέρει η πρόβλεψη να είναι το όνομα μιας νότας, όχι αριθμοί με ποσοστά σιγουριάς.

  let nnOptions = {
        inputs: ['x', 'y'],
        outputs: ['note'],
    };  

    nn = ml5.neuralNetwork(nnOptions);

Μία ακόμα παράμετρος που θέλουμε να ρυθμίσουμε είναι το είδος του προβλήματος που θέλουμε να λύσουμε. Στην περίπτωση μας είναι τύπου ταξινόμησης (classification) , αλλά θα μπορούσε να είναι και τύπου regression κάτι που θα δούμε σε επερχόμενο tutorial.

  let nnOptions = {
        inputs: ['x', 'y'],
        outputs: ['note'],
        task: 'classification'
    };
Δείτε στον p5 editor
manolisdag

Web artisan, DIYer