I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione.
L'apprendimento automatico è una tecnologia fondamentale nel mondo moderno. I computer possono imparare a riconoscere le immagini, creare opere d'arte e persino scrivere il proprio codice, il tutto con un intervento umano minimo.
Ma come funziona l'apprendimento automatico e come puoi usarlo tu stesso?
Cos'è l'apprendimento automatico?
L'apprendimento automatico è un concetto relativamente semplice. I sistemi informatici possono apprendere e adattarsi analizzando i modelli di dati esistenti da pool di informazioni. Questo di solito viene fatto senza istruzioni esplicite da parte degli umani.
Un buon esempio si presenta sotto forma di strumenti di assistente virtuale. Siri, Cortana e Google Assistant fanno tutti ampio uso dell'apprendimento automatico per comprendere il linguaggio umano. Questo inizia con un pool di registrazioni audio esistenti, ma questi strumenti possono anche imparare dalle interazioni che hanno con te. Ciò consente loro di migliorare da soli.
Cos'è ml5.js?
La maggior parte degli algoritmi e degli strumenti di apprendimento automatico utilizza R o Python per il proprio codice, ma ml5.js è diverso. Agendo come interfaccia per la libreria Tensorflow.js di Google, ml5.js è un progetto open source che mette l'apprendimento automatico nelle mani degli sviluppatori JavaScript.
Puoi iniziare a utilizzare ml5.js per la tua applicazione Web includendo un singolo script esterno nel codice HTML.
Introduzione all'apprendimento automatico: il processo di apprendimento
L'addestramento di un algoritmo di apprendimento automatico richiede tempo. I computer imparano molto più velocemente degli umani, ma imparano anche in modi diversi. Per fortuna, però, ml5.js viene fornito con una selezione di modelli pre-addestrati in modo da poter saltare questo passaggio.
Apprendimento come si allenano gli algoritmi di machine learning è un ottimo modo per comprendere meglio strumenti come questo.
ml5.js semplifica la creazione di uno strumento di classificazione delle immagini da eseguire sul tuo sito web. La pagina HTML in questo esempio contiene un campo di input file per selezionare un'immagine. Le immagini caricate vengono visualizzate all'interno di un elemento HTML preparato per consentire a ml5.js di scansionarle e identificarle.
Passaggio 1: includi la libreria ml5.js
Questo progetto richiede due librerie per funzionare: ml5.js e p5.js. ml5.js è la libreria di machine learning, mentre p5.js consente di lavorare correttamente con le immagini. Sono necessarie due righe di codice HTML per aggiungere queste librerie:
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>Passaggio 2: creare alcuni elementi HTML
Successivamente, è il momento di creare alcuni elementi HTML. Il più importante è un div con un ID e una classe etichettata imageResult che memorizzerà il risultato finale:
<h1>MakeUseOf Classificatore di immagini</h1><h2>Clic "Scegli il file" per aggiungere un'immagine</h2>
<classe div="immagineRisultato" id="immagineRisultato"></div>
Successivamente, aggiungi un elemento di input file per raccogliere l'immagine che il programma deve classificare.
<classe div="imageInput">
<tipo di input="file"
oninput="uploadedImage.src=finestra. URL.createObjectURL(this.files[0]); startImageScan()">
</div>
L'input ascolta un evento oninput ed esegue due istruzioni in risposta, separate da un punto e virgola. Il primo crea un oggetto URL per l'immagine, che consente di lavorare con i dati senza doverli caricare su un server. Il secondo chiama una funzione startImageScan() che creerai nel passaggio successivo.
Infine, aggiungi un elemento img per visualizzare l'immagine che l'utente ha caricato:
<classe img="immagine caricata" id="immagine caricata" />Passaggio 3: creare una funzione JS di scansione delle immagini
Ora che hai un po' di HTML, è il momento di aggiungere un po' di JS al mix. Inizia aggiungendo una variabile const per archiviare l'elemento imageResult che hai creato nell'ultimo passaggio.
cost elemento = documento.getElementById("risultatoimmagine");Successivamente, aggiungi una funzione chiamata startImageScan() e, al suo interno, inizializza il classificatore di immagini ml5.js utilizzando MobileNet.
Segui questo con il comando classifier.classify. Passagli un riferimento all'elemento uploadedImage che hai aggiunto in precedenza, insieme a una funzione di callback per elaborare il risultato.
funzionestartImageScan() {
// Creare UN variabileA inizializzare il classificatore di immagini ml5.js con Rete mobile
const classificatore = ml5.imageClassifier('Rete mobile');
classifier.classify (document.getElementById("immagine caricata"), imageScanResult);
elemento.innerHTML = "...";
}Passaggio 4: creare una funzione di visualizzazione dei risultati
È inoltre necessaria una funzione per visualizzare i risultati della classificazione dell'immagine eseguita. Questa funzione contiene una semplice istruzione if per controllare eventuali errori.
funzioneimageScanResult(errore, risultati) {
se (errore) {
element.innerHTML = errore;
} altro {
permettere num = risultati[0].fiducia * 100;
element.innerHTML = risultati[0].label + "<fratello>Fiducia: " + num.toFisso (0) + "%";
}
}Passaggio 5: metti tutto insieme
Infine, è il momento di mettere insieme tutto questo codice. È importante essere consapevoli del
,
