Podstawy Machine Learning z biblioteką ml5.js

Dzięki bibliotekom takim jak ml5.js można tworzyć projekty wykorzystujące sztuczną inteligencję bez znajomości zaawansowanej matematyki czy programowania w jęzuku Python. Wystarczy podstawowa znajomość JavaScriptu i przeglądarka internetowa. W tym wpisie pokażę podstawy machine learning oraz wykorzystanie biblioteki ml5.js od podstaw.

Czym jest biblioteka ml5.js?

ml5.js to biblioteka JavaScript oparta na TensorFlow.js. Umożliwia korzystanie z gotowych modeli AI bez konieczności trenowania sieci neuronowych od zera. Biblioteka działa bezpośrednio w przeglądarce i integruje się świetnie z:
  • JavaScript
  • HTML5
  • Canvas API
  • p5.js
  • kamerą internetową
  • dźwiękiem i multimediami
Dzięki temu można budować interaktywne aplikacje współpracujące z AI działające lokalnie na komputerze użytkownika. Strona www biblioteki ml5.js

Co to jest Machine Learning?

Machine Learning czyli uczenie maszynowe to dział sztucznej inteligencji, w której komputer uczy się rozpoznawać wzorce na podstawie danych. Zamiast programować każdą regułę ręcznie, przykładowo: 
if(obraz == kot) {
   // ...
}
model AI analizuje tysiące przykładów i sam uczy się rozpoznawania obiektów. Istnieją trzy rodzaje uczenia maszynowego. Supervised Learning, gdzie model uczy się na podstawie oznaczonych danych np. na zbiorze zdjęć różnych przedmiotów oznaczonych przez człowieka etykietami. Unsupervised Learning - tu model sam szuka wzorców w danych bez etykiet np. grupowanie podobnych użytkowników. Reinforcement Learning, w którym model uczy się metodą nagród i kar np. autonomiczne roboty czy AI grające w różne gry.

Instalacja biblioteki ml5.js i pierwszy projekt

Najprostszym sposobem instalacji jest po prostu dodanie biblioteki z CDN. 
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
Zbudujemy teraz prostą aplikację wykorzystującą model MobileNet, która będzie rozpoznawała obrazy. Oto pełny kod html: 
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>ml5.js Image Classification</title>

<style>

body {
    margin:0;
    background:#111;
    color:white;
    font-family:Arial;
    text-align:center;
}

.container{
    padding:40px;
}

img {
    width:400px;
    border-radius:12px;
    margin-top:20px;
    box-shadow:0 0 20px rgba(0,0,0,0.5);
}

#result {
    margin-top:30px;
    font-size:28px;
}

#confidence {
    margin-top:10px;
    font-size:18px;
    color:#aaa;
}

button {
    margin-top:30px;
    padding:12px 24px;
    border:none;
    border-radius:8px;
    background:#2979ff;
    color:white;
    font-size:18px;
    cursor:pointer;
}

button:hover {
    background:#5393ff;
}

</style>
</head>
<body>
<div class="container">
    <h1>ml5.js — Image Classification</h1>
    <img
        id="image"
        crossorigin="anonymous"
        src="https://picsum.photos/400/300"
    >
    <div id="result">
        Ładowanie modelu...
    </div>
    <div id="confidence"></div>
    <button id="analyzeBtn">
        Analizuj obraz
    </button>

</div>
<script src="https://unpkg.com/ml5@1/dist/ml5.min.js"></script>
<script>
let classifier;

const image = document.getElementById("image");
const result = document.getElementById("result");
const confidence = document.getElementById("confidence");
const analyzeBtn = document.getElementById("analyzeBtn");

async function init() {
    result.innerHTML = "Ładowanie modelu MobileNet...";
    classifier = await ml5.imageClassifier("MobileNet");
    result.innerHTML = "Model załadowany";
}

async function classifyImage() {

    if (!classifier) {
        return;
    }

    result.innerHTML = "Analiza obrazu...";

    try {

        const results = await classifier.classify(image);

        console.log(results);

        result.innerHTML =
            results[0].label;

        confidence.innerHTML =
            "Pewność: " +
            Math.round(results[0].confidence * 100) +
            "%";

    }
    catch (error) {
        console.error(error);
        result.innerHTML =
            "Błąd analizy";
    }
}

analyzeBtn.addEventListener(
    "click",
    classifyImage
);

init();
</script>
</body>
</html>
Omówię teraz pokrótce działanie projektu. Najpierw ładujemy model AI. Biblioteka pobiera gotową sieć neuronową. 
classifier = ml5.imageClassifier(
    "MobileNet",
    modelLoaded
);
Kolejnym krokiem jest analiza obrazu. Sztuczna inteligencja analizuje piksele obrazu. 
classifier.classify(
    image,
    gotResult
);
results[0].label zwraca nazwę obiektu, a results[0].confidence zwraca pewność predykcji. Dobrym rozwiązaniem jest połączenie Teachable Machine i ml5.js. W Google Teachable Machine można wytrenować własny model, a następnie użyć go w JavaScript.

Może Cię zainteresować:
Serwer plików statycznych bez pisania kodu w nodejs
Facebook Messenger bot w node.js
Node-webkit podstawy