Je čas oslav 🎉. Právě jsme skončili s pohádkovými Vánocemi 🎅 a čekáme na zazvonění nového roku. Vánoční Hackathon od Hashnode je také úspěšný, protože mnoho nadšenců staví něco skvělého a píše o tom.

Neměla by existovat žádná omluva, proč se od toho držet dál. A tak mě napadlo postavit něco skvělého (alespoň moje 7letá dcera si to myslí 😍) a naučit se trochu strojového učení. O co tedy jde?

Půjčil jsem si všechny panenky Disney Princess od své dcery, abych vytvořil model strojového učení tak, aby je aplikace mohla s jistotou rozpoznat pomocí webové kamery. Také jsem tomu dal jméno. Aplikace se jmenuje Princess Finder . V tomto článku se seznámíme s technologiemi, které za tím stojí, spolu s možnostmi jeho rozšíření.

Hledač princezny

Princess Finder aplikace je vytvořena pomocí,

• The Teachable Machine:Co takhle snadný a rychlý způsob, jak vytvořit strojové učení models které můžete přímo použít ve své aplikaci nebo webu? Teachable Machine vám umožňuje train počítač s obrázky, zvuky a pózami. Vytvořili jsme model pomocí princezny Disney, takže můžeme provést Image Classification pomocí v naší aplikaci.
• ml5.js:Jedná se o strojové učení pro web pomocí vašeho webového prohlížeče. K provádění rychlých výpočtů využívá vestavěný grafický procesor (GPU) webového prohlížeče. Můžeme použít API jako imageClassifier(model) , classify atd. k provedení klasifikace obrázku.
• Reagovat:Je to JavaScriptová knihovna pro vytváření uživatelských rozhraní. Můžeme použít ml5.js v aplikaci React pouhým nainstalováním a importem jako závislost.

Zde je snímek z aplikace ukazuje, že je 93% jisté, že princezna je Jasmine. Označuje jej také zlatým prstenem.

Vzhledem k tomu, že v žádném případě nevypadám jako princezna od Disneyho (ani jako panenka). Můj vlastní obrázek byl tedy klasifikován správně a řekl, No Dolls .

Zde je rychlé demo se spoustou vzrušení,

Několik terminologií

Pokud jste ve strojovém učení nováčkem, možná se vám některé terminologie budou zdát trochu ohromující. Je lepší znát jejich význam na vysoké úrovni, abyste pochopili jejich použití.

Více o těchto a dalších terminologiích strojového učení si můžete přečíst zde.

Naše Princess Finder aplikace používá Supervised Machine learning kde máme trained model se spoustou examples obrázky princezen. Každé z ukázkových dat také obsahuje label identifikovat konkrétní princeznu podle jména.

Učitelný stroj

Modely ML můžeme vytvořit pomocí několika jednoduchých kroků pomocí uživatelského rozhraní Teachable Machine. Chcete-li začít, přejděte na tento odkaz. Můžete si vybrat buď projekt obrázku, zvuku nebo pózy. V našem případě to bude obrazový projekt.

Dále musíme definovat klasifikace výběrem příkladů (obrázků a štítků). K pořízení snímků můžeme použít buď webovou kameru, nebo můžeme snímky nahrát.

Po načtení příkladů zahájíme školení. Toto pro nás vytvoří model.

Po dokončení školení můžete model otestovat pomocí živých dat. Jakmile budete spokojeni, můžete model exportovat a použít jej v aplikaci.

Nakonec si můžeme stáhnout model a použít jej v naší aplikaci. Volitelně můžete model nahrát do cloudu a použít ho pomocí adresy URL. Projekt můžete také uložit na Disk Google.

Pokud máte zájem použít nebo rozšířit model, který jsem vytvořil, můžete si jej stáhnout a importovat do rozhraní Teachable Machine.

Uživatelské rozhraní využívající ml5.js a React

Takže už máme model. Použijeme ml5.js knihovny pro import modelu a klasifikaci snímků pomocí živého přenosu. Použil jsem React, protože jej znám nejlépe. Pro totéž můžete použít jakoukoli knihovnu uživatelského rozhraní, framework nebo vanilkový JavaScript. Použil jsem aplikaci create-react-app ke spuštění kostry své aplikace během minuty.

Nainstalujte ml5.js závislost

# Or, npm install ml5

yarn add ml5

Rozbalte model pod public složku projektu. Můžeme vytvořit složku s názvem model pod veřejným a extrahujte soubory.

Použijte ml5.js knihovny pro načtení modelu. Použijeme imageClassifier způsob předání souboru modelu. Toto volání metody vrací objekt klasifikátoru, který za chvíli použijeme ke klasifikaci živých obrázků. Všimněte si také, že jakmile je model úspěšně načten, inicializujeme zařízení s webovou kamerou, abychom mohli sbírat snímky z živého přenosu.

useEffect(() => {
    classifier = ml5.imageClassifier("./model/model.json", () => {
      navigator.mediaDevices
        .getUserMedia({ video: true, audio: false })
        .then((stream) => {
          videoRef.current.srcObject = stream;
          videoRef.current.play();
          setLoaded(true);
        });
    });
  }, []);

Potřebujeme také definovat video komponentu ve funkci render,

 <video
     ref={videoRef}
     style={{ transform: "scale(-1, 1)" }}
     width="200"
     height="150" />

Dále zavoláme classify() metoda na klasifikátoru k získání výsledků. results je pole všech štítků s faktorem spolehlivosti shody.

classifier.classify(videoRef.current, (error, results) => {
  if (error) {
     console.error(error);
     return;
  }
  setResult(results);
});

Měli bychom použít classify volání metody v určeném intervalu. Pro totéž můžete použít hák React s názvem useInterval. Pole výsledků může vypadat takto,

Vyhledejte prosím úplný kód App.js soubor odtud. To je vše, toto pole výsledků nyní můžete použít k poskytnutí libovolné reprezentace uživatelského rozhraní, kterou byste chtěli. V našem případě jsme toto pole výsledků použili ve dvou komponentách React,

1. Vypište princeznu a zvýrazněte tu s maximální shodou

   <Princess data={result} />
   

2. Ukažte graf měřidel k označení spolehlivosti shody.

   <Chart data={result[0]} />
   

Komponenta Princess prochází polem výsledků a vykresluje je spolu s použitím některých stylů CSS ke zvýraznění jednoho.

import React from "react";

const Princess = (props) => {
  const mostMatched = props.data[0];
  const allLabels = props.data.map((elem) => elem.label);
  const sortedLabels = allLabels.sort((a, b) => a.localeCompare(b));
  return (
    <>
      <ul className="princes">
        {sortedLabels.map((label) => (
          <li key={label}>
            <span>
              <img
                className={`img ${
                  label === mostMatched.label ? "selected" : null
                }`}
                src={
                  label === "No Dolls"
                    ? "./images/No.png"
                    : `./images/${label}.png`
                }
                alt={label}
              />
              <p className="name">{label}</p>
            </span>
          </li>
        ))}
      </ul>
    </>
  );
};

export default Princess;

Komponenta Chart je taková,

import React from "react";
import GaugeChart from "react-gauge-chart";

const Chart = (props) => {
  const data = props.data;
  const label = data.label;
  const confidence = parseFloat(data.confidence.toFixed(2));
  return (
    <div>
      <h3>Classification Confidence: {label}</h3>  
      <GaugeChart
        id="gauge-chart3"
        nrOfLevels={3}
        colors={["#FF5F6D", "#FFC371", "rgb(26 202 26)"]}
        arcWidth={0.3}
        percent={confidence}
      />
    </div>
  );
};
export default Chart;

To je asi tak všechno. Celý zdrojový kód naleznete v repozitáři GitHub. Neváhejte dát projektu hvězdičku (⭐), pokud se vám práce líbila.

Než skončíme...

Doufám, že vám článek přijde srozumitelný. Prosím 👍 lajkujte/sdílejte, ať se to dostane i k ostatním. Pojďme se spojit. Neváhejte a napište DM nebo mě sledujte na Twitteru (@tapasadhikary). Bavte se a přeji vám šťastný rok 2021.