logo

Tensorflow.js pro začátečníky – klasifikace obrázků

Všichni víme, že aplikace založené na umělé inteligenci mají mnoho případů použití a dokázaly pozvednout uživatelský zážitek na zcela novou úroveň. Pro mnoho vývojářů však zůstává mimo dosah, protože se zdá, že vytváření aplikací využívajících umělou inteligenci vyžaduje mnoho znalostí na pozadí, takže křivka učení je pro mnohé příliš strmá.

V této sérii se snažím ukázat nejen, že můžete používat AI ve svých aplikacích, aniž byste se výrazně zabývali teoriemi, ale také ji můžete mít dokonce na svém statickém webu pomocí Tensorflow.js.

Dnes vám ukážu, jak přidat klasifikaci obrázků na váš statický web, o kterém jsem si jistý, že můžete smíchat to, co se dnes naučíte, s hromadou kreativních nápadů a přijít se skutečně zajímavými řešeními. Na konci příspěvku vám dokonce ukážu, jak aplikaci snadno nasadit a sdílet náš výsledek s ostatními.

Vytvořme jednoduchý index.html soubor pro začátek a přidejte do něj základní kód:

<html>
  <head>
    <!-- Load the latest version of TensorFlow.js -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet"></script>
  </head>

  </body>
</html>

Zde jsme právě importovali Tensorflow a MobileNet na naši stránku.

Ale co je MobileNet?

V jednoduché angličtině nám MobileNet poskytuje jednoduchý způsob, jak používat předem připravené (což znamená připravené k použití) modely k použití v naší aplikaci.

Nyní do našeho html souboru přidáme několik obrázků, které budou klasifikovány. 

<html>
  <head>
    <!-- Load the latest version of TensorFlow.js -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet"></script>
  </head>
  <body>
    <div id="console"></div>
    <!-- Add an image that we will use to test -->
    <img id="img1" src="./manja-vitolic-gKXKBY-C-Dk-unsplash.jpg" width="320"/>
    <img id="img2" src="./marliese-streefland-2l0CWTpcChI-unsplash.jpg" width="320"/>
    <img id="img3" src="./giorgio-trovato-K62u25Jk6vo-unsplash.jpg" width="320"/>

    <div>Image one is %<span id="img1_prob"></span> a/an <span id="img1_class"></span></div>
    <div>Image two is %<span id="img2_prob"></span> a/an <span id="img2_class"></span></div>
    <div>Image three is %<span id="img3_prob"></span> a/an <span id="img3_class"></span></div>



    <!-- Load index.js after the content of the page -->
    <script src="index.js"></script>
  </body>
</html>

Takto zatím vypadá naše super jednoduchá webová stránka (předpokládejme, že jsem obrázky vložil do místního adresáře. Všechny zdroje můžete upravit zde )

Takže jsme právě přidali nějaké img značky s ID, na které lze odkazovat v našem kódu javascript, plus několik značek div s zobrazí výsledek klasifikace.

Nyní implementujme část, kterou klasifikujeme každý obrázek, jako bychom ukázali obrázky člověku a požádali je, aby obrázek označili. Za tímto účelem vytvoříme název souboru index.js ve stejném adresáři a vyplňte jej tímto kódem:

async function predict() {
  console.log('Loading mobilenet...');
  // Load the pre-trained model
  let net = await mobilenet.load();

  // Make a prediction through the model on our image.
  let images = document.getElementsByTagName('img');
  for (var i = 0; i < images.length; i++) {
    const result = await net.classify(images[i]);
    console.log(images[i].src, result);
    document.getElementById(`img${i+1}_class`).innerText = result[0].className;
    document.getElementById(`img${i+1}_prob`).innerText = result[0].probability;
  }
}

Zde jsme definovali asynchronní funkci, která nejprve načte mobilní síť 

let net = await mobilenet.load();

Nyní jej můžeme jednoduše použít ke klasifikaci našich obrázků pomocí classify metoda:

const result = await net.classify(images[i]);

Zbytek kódu je nějaký základní javascript, který zobrazí výsledek na naší stránce. Za zmínku stojí classify metoda vrací standardně tři výsledky s různými názvy tříd (štítky/předpovědi) s pravděpodobností, že klasifikace je správná. Protože jsou výsledky seřazeny od nejpravděpodobnějšího po nejméně pravděpodobné, zde jednoduše vybereme první odpověď.

Nakonec do našeho index.html přidáme tlačítko pro klasifikaci obrázků a zobrazení výsledků při každém kliknutí:

<button style="display: block; width: 200px; margin-left: 200px; background-color: #10f; color: white" onclick="predict()">predict</button>

Takto vypadá naše index.html vypadá to konečně:

<html>
  <head>
    <!-- Load the latest version of TensorFlow.js -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet"></script>
  </head>
  <body>
    <div id="console"></div>
    <!-- Add an image that we will use to test -->
    <img id="img1" src="./manja-vitolic-gKXKBY-C-Dk-unsplash.jpg" width="320"/>
    <img id="img2" src="./marliese-streefland-2l0CWTpcChI-unsplash.jpg" width="320"/>
    <img id="img3" src="./giorgio-trovato-K62u25Jk6vo-unsplash.jpg" width="320"/>

    <div>Image one is %<span id="img1_prob"></span> a/an <span id="img1_class"></span></div>
    <div>Image two is %<span id="img2_prob"></span> a/an <span id="img2_class"></span></div>
    <div>Image three is %<span id="img3_prob"></span> a/an <span id="img3_class"></span></div>

    <button style="display: block; width: 200px; margin-left: 200px; background-color: #10f; color: white" onclick="predict()">predict</button>

    <script src="index.js"></script>
  </body>
</html>

Nyní nasadíme naši webovou aplikaci s Utopiops.

Přejděte na Fully managed applications část, protože chceme používat bezplatné statické nasazení a hosting webových stránek, které Utopiops nabízí.

Nyní zvolíme Static website jako typ aplikace, která má být vytvořena. (Utopiops také nabízí bezplatné plány pro Function a Dockerized aplikace)

Nyní jediné, co potřebujeme vědět, je specifikovat úložiště, do kterého ukládáme náš kód (Utopiops podporuje Github, Bitbucket a Gitlab).

A je to, za pár sekund máme náš web připravený a pokaždé, když provedeme změnu v našem kódu, automaticky nasadí naše změny.

https://tesnsorflow-js-image-classification-3acd0e5e.sites.utopiops.com

Poznámka:Utopiops je v době psaní tohoto příspěvku ve veřejné beta verzi a pohled, který uvidíte, když se přihlásíte do Utopiops na https://www.utopiops.com, se může lišit, ale dobrou zprávou je, že se to právě stalo uživatelsky přívětivější a snadněji se používá.