Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών.

Η μηχανική μάθηση είναι μια θεμελιώδης τεχνολογία στον σύγχρονο κόσμο. Οι υπολογιστές μπορούν να μάθουν να αναγνωρίζουν εικόνες, να δημιουργούν έργα τέχνης, ακόμη και να γράφουν τον δικό τους κώδικα, όλα με ελάχιστη ανθρώπινη παρέμβαση.

Πώς λειτουργεί όμως η μηχανική εκμάθηση και πώς μπορείτε να τη χρησιμοποιήσετε μόνοι σας;

Τι είναι η Μηχανική Μάθηση;

Η μηχανική μάθηση είναι μια σχετικά απλή έννοια. Τα συστήματα υπολογιστών μπορούν να μάθουν και να προσαρμοστούν αναλύοντας υπάρχοντα πρότυπα δεδομένων από δεξαμενές πληροφοριών. Αυτό γίνεται συνήθως χωρίς ρητές οδηγίες από τον άνθρωπο.

Ένα καλό παράδειγμα έρχεται με τη μορφή εργαλείων εικονικού βοηθού. Η Siri, η Cortana και ο Βοηθός Google κάνουν εκτενή χρήση της μηχανικής μάθησης για την κατανόηση της ανθρώπινης ομιλίας. Αυτό ξεκινά με μια ομάδα υπαρχουσών ηχογραφήσεων, αλλά αυτά τα εργαλεία μπορούν επίσης να μάθουν από τις αλληλεπιδράσεις που έχουν μαζί σας. Αυτό τους δίνει τη δυνατότητα να βελτιωθούν μόνοι τους.

instagram viewer

Τι είναι το ml5.js;

Οι περισσότεροι αλγόριθμοι και εργαλεία μηχανικής μάθησης χρησιμοποιούν R ή Python για τον κώδικά τους, αλλά το ml5.js είναι διαφορετικό. Λειτουργώντας ως διεπαφή για τη βιβλιοθήκη Tensorflow.js της Google, το ml5.js είναι ένα έργο ανοιχτού κώδικα που δίνει τη μηχανική μάθηση στα χέρια των προγραμματιστών JavaScript.

Μπορείτε να αρχίσετε να χρησιμοποιείτε το ml5.js για τη δική σας εφαρμογή ιστού, συμπεριλαμβάνοντας ένα μόνο εξωτερικό σενάριο στο HTML σας.

Ξεκινώντας με τη Μηχανική Μάθηση: Η διαδικασία εκμάθησης

Η εκπαίδευση ενός αλγόριθμου μηχανικής μάθησης απαιτεί χρόνο. Οι υπολογιστές μαθαίνουν πολύ πιο γρήγορα από τους ανθρώπους, αλλά μαθαίνουν επίσης με διαφορετικούς τρόπους. Ευτυχώς, ωστόσο, το ml5.js συνοδεύεται από μια επιλογή προεκπαιδευμένων μοντέλων, ώστε να μπορείτε να παραλείψετε αυτό το βήμα.

Μάθηση πώς εκπαιδεύονται οι αλγόριθμοι μηχανικής μάθησης είναι ένας πολύ καλός τρόπος για να κατανοήσετε καλύτερα εργαλεία όπως αυτό.

Το ml5.js διευκολύνει τη δημιουργία ενός εργαλείου ταξινόμησης εικόνων για εκτέλεση στον ιστότοπό σας. Η σελίδα HTML σε αυτό το παράδειγμα περιέχει ένα πεδίο εισαγωγής αρχείου για την επιλογή μιας εικόνας. Οι μεταφορτωμένες εικόνες εμφανίζονται μέσα σε ένα προετοιμασμένο στοιχείο HTML για να μπορέσει το ml5.js να τις σαρώσει και να τις αναγνωρίσει.

Βήμα 1: Συμπεριλάβετε τη βιβλιοθήκη ml5.js

Αυτό το έργο απαιτεί δύο βιβλιοθήκες για να λειτουργήσει: ml5.js και p5.js. Το ml5.js είναι η βιβλιοθήκη μηχανικής εκμάθησης, ενώ το p5.js καθιστά δυνατή τη σωστή εργασία με εικόνες. Χρειάζεστε δύο γραμμές HTML για να προσθέσετε αυτές τις βιβλιοθήκες:

<σενάριο src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<σενάριο src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>

Βήμα 2: Δημιουργήστε μερικά στοιχεία HTML

Στη συνέχεια, ήρθε η ώρα να δημιουργήσετε μερικά στοιχεία HTML. Το πιο σημαντικό είναι ένα div με αναγνωριστικό και κλάση με την ένδειξη imageResult που θα αποθηκεύσει το τελικό αποτέλεσμα:

<h1>MakeUseOf Image Classifier</h1>
<h2>Κάντε κλικ "Επιλέξτε το αρχείο" για να προσθέσετε μια εικόνα</h2>
<div class="Αποτέλεσμα εικόνας" id="Αποτέλεσμα εικόνας"></div>

Μετά από αυτό, προσθέστε ένα στοιχείο εισαγωγής αρχείου για να συλλέξετε την εικόνα που θα ταξινομήσει το πρόγραμμα.

<div class="Εισαγωγή εικόνας">
<τύπος εισόδου="αρχείο"
 oninput="uploadedImage.src=παράθυρο. URL.createObjectURL(this.files[0]); startImageScan()">
</div>

Η είσοδος ακούει για ένα συμβάν εισόδου και εκτελεί δύο εντολές σε απόκριση, διαχωρισμένες με άνω και κάτω τελεία. Η πρώτη δημιουργεί μια διεύθυνση URL αντικειμένου για την εικόνα, η οποία σας επιτρέπει να εργαστείτε με τα δεδομένα χωρίς να χρειάζεται να τα ανεβάσετε σε διακομιστή. Το δεύτερο καλεί μια συνάρτηση startImageScan() που θα δημιουργήσετε στο επόμενο βήμα.

Τέλος, προσθέστε ένα στοιχείο img για να εμφανίσετε την εικόνα που έχει ανεβάσει ο χρήστης:

<img class="μεταφορτωμένηΕικόνα" id="μεταφορτωμένηΕικόνα" />

Βήμα 3: Δημιουργήστε μια λειτουργία σάρωσης εικόνας JS

Τώρα που έχετε λίγο HTML, ήρθε η ώρα να προσθέσετε λίγο JS στη μίξη. Ξεκινήστε προσθέτοντας μια μεταβλητή const για να αποθηκεύσετε το στοιχείο imageResult που δημιουργήσατε στο τελευταίο βήμα.

συνθ στοιχείο = έγγραφο.getElementById("imageResult");

Στη συνέχεια, προσθέστε μια συνάρτηση που ονομάζεται startImageScan() και, μέσα σε αυτήν, αρχικοποιήστε τον ταξινομητή εικόνας ml5.js χρησιμοποιώντας το MobileNet.

Ακολουθήστε αυτό με την εντολή classifier.classify. Δώστε του μια αναφορά στο στοιχείο uploadedImage που προσθέσατε νωρίτερα, μαζί με μια συνάρτηση επανάκλησης για την επεξεργασία του αποτελέσματος.

λειτουργίαstartImageScan() {
 // Δημιουργώ ένα μεταβλητόςπρος την αρχικοποιήστε τον ταξινομητή εικόνας ml5.js με MobileNet
 const classifier = ml5.imageClassifier('MobileNet');
 classifier.classify (document.getElementById("μεταφορτωμένηΕικόνα"), imageScanResult);
 στοιχείο.innerHTML = "...";
}

Βήμα 4: Δημιουργήστε μια λειτουργία εμφάνισης αποτελεσμάτων

Χρειάζεστε επίσης μια συνάρτηση για την εμφάνιση των αποτελεσμάτων της ταξινόμησης εικόνων που πραγματοποιήσατε. Αυτή η συνάρτηση περιέχει μια απλή δήλωση if για έλεγχο τυχόν σφαλμάτων.

λειτουργίαimageScanResult(σφάλμα, αποτελέσματα) {
 αν (σφάλμα) {
 element.innerHTML = σφάλμα;
 } αλλού {
αφήνω αριθμός = αποτελέσματα[0].αυτοπεποίθηση * 100;
 element.innerHTML = αποτελέσματα[0].label + "<br>Αυτοπεποίθηση: " + num.toFixed (0) + "%";
 }
}

Βήμα 5: Βάλτε τα όλα μαζί

Επιτέλους, ήρθε η ώρα να συγκεντρώσουμε όλο αυτόν τον κώδικα. Είναι σημαντικό να προσέχετε το

,