Előző

Következő

Gyakorlat – A gépi tanulási modell betanítása, és a használatához szükséges webes felület elkészítése

Befejeződött

Most megkezdheti az egyéni gépi tanulási modellek betanítását az alkalmazásban használttól eltérő képek használatával. Az alkalmazás képeivel fogja tesztelni a modell dedukciós pontosságát. Magát a modellt a Custom Vision AI felületén, egy másik képkészlettel hozza létre.

Megjegyzés:

Csak néhány képet használ a betanításhoz, amely egy éles rendszerben nem lenne elegendő egy minőségi modell létrehozásához. Ez a betanítási készlet csak bemutatásként szolgál.

Töltse le ezt a tizenkét betanítási képből álló tömörített fájlt, és bontsa ki a helyi számítógépre.

Custom Vision AI

Egy böngészőben keresse meg a Custom Vision AI-t , és jelentkezzen be. Hozzon létre egy új projektet Chocolate vagy Dalmatian néven. Az előugró ablakban adjon meg egy leírást a projektnek, és foglaljon le egy erőforrást, hogy a modell betanulható legyen a felhőben. Szükség esetén hozzon létre egy újat.

Ügyeljen arra, hogy ennek a projektnek a besorolási típust adja meg, mivel az egyszerűen meghatározza a típusok között. Ez a projekt egy többosztályos besorolási típus, mivel képenként egy egyszerű címkét használ. Válassza az Általános (kompakt) lehetőséget, mivel a TensorFlow.js-hez exportálja.

Saját modell betanítása

Már készen áll a képkészlettel való betanításra.

A letöltött mappában két mappa található: egy „ice cream” (jégkrém) és egy „dalmatian” (dalmata) címkéjűt. Válassza a Custom Vision AI-projekt Képek hozzáadása gombját, és jelölje ki a mappában lévő dalmatian képeket. Lássa el őket a következő címkével: dalmatian. Hajtsa végre ugyanezt a folyamatot az ice cream mappával, itt az ice cream címkét használva.

Feltöltötte és felcímkézte a 12 betanítási képet. Kattintson a felül található Betanítás gombra, és válassza a Gyors betanítás lehetőséget. Megjelennek az eredmények és az elemzett teljesítmény. Tesztelje az adatokat egy új, jégkrémet vagy dalmatát ábrázoló képen. Próbálja ki ezt:

Húzza a képet az asztalra, majd a Custom Vision AI felületén válassza a Gyorsteszt gombot, és tallózással keresse meg a képet az asztalon. A modell dalmataként osztályozza az új képet.

A modell letöltése

A Custom Vision AI-felület tetején található Exportálás gombra kattintva töltse le a modellt és a hozzá tartozó eszközöket. Modelltípusként válassza a TensorFlow lehetőséget, majd tensorflow.js a legördülő listában. Ha a csomag elkészült, válassza a Letöltés lehetőséget.

Ekkor megjelenik egy tömörített fájl a helyi gépen. Bontsa ki ezt a fájlt, és nevezze el az eredményül kapott mappát models. A mappában négy fájl található: cvexport.manifest, labels.txt, model.json és weights.bin.

Töltse fel a teljes models mappát a webalkalmazás public könyvtárába.

Mostantól integrálhatja ezeket a fájlokat úgy, hogy azokat használhassa az alkalmazás.

A modell integrálása a webalkalmazásba

Az első teendő egy speciális npm-csomag telepítése a webalkalmazásba, a customvision-tfjsbe. Ez a könyvtár lehetővé teszi, hogy a webalkalmazás kihasználja a tensorflow.js fájlt és a Custom Vision AI-ban betanított modelleket.

1. A webalkalmazás gyökérkönyvtárában lévő package.json fájlban adja hozzá a "customvision-tfjs": "^1.0.1", csomagot a dependencies listához.

2. Ugyanebben a fájlban adja hozzá a "raw-loader": "^4.0.0", elemet a devDependencies listához. Erre a csomagra a Vue-alkalmazástól érkező .txt-fájlok beolvasásának kezeléséhez lesz szükség.

3. Ugyanebben a fájlban adja hozzá "webpack-cli": "^3.3.10" a devDependencies listához, hogy a Webpack parancssori felület használható legyen az alkalmazásban, ami a szövegfájl-elemzéshez szükséges.

Állítsa le a webalkalmazást, ha fut, nyomja le a Ctrl+C billentyűkombinációt, és futtassa npm i a gyökérről a terminálon keresztül. Ez telepíti a csomagot.

Most újraindíthatja a webalkalmazást, és folytathatja a munkát (npm run serve).

Ezután integrálja az imént telepített csomagokat úgy, hogy hozzáadja az alábbi sort a DetectImage.vue nyitó <script> címkéje alatt:

import * as cvstfjs from "customvision-tfjs";
import labels from "raw-loader!../../public/models/labels.txt";

Most engedélyeznie kell, hogy a nyersbetöltő csomag beolvassa a labels.txt modell címkéinek fájljából.

Ehhez hozzon létre egy, webpack.config.js nevű fájlt az alkalmazás gyökerében. Ebben a fájlban adja hozzá a következő kódot.

module.exports = {
    module: {
        rules: [
            {
                test: /\.txt$/i,
                use: 'raw-loader',
            },
        ],
    },
};

Ezután adjon hozzá további három adatelemet a data<script> blokkban lévő objektumhoz DetectImage.vue.

labels: labels,
model: null,
predictions: []

Az alkalmazás most már készen áll a modell és a címkék listájának használatára, valamint előrejelzések tömbjének készítésére.

Most adjon hozzá egy életciklus-horgot mounted az objektum végén computed lévő záró vessző után.

async mounted() {
    this.image++;
    //load up a new model
    this.model = new cvstfjs.ClassificationModel();
    await this.model.loadModelAsync("models/model.json");
    //parse labels
    this.labels = labels.split("\n").map(e => {
      return e.trim();
    });
    //run prediction
    this.predict();
  },

Ha az alkalmazás csatlakoztatva van, ez az aszinkron módszer aktiválódik, növeli a képtömböt, betölti a modellt, elemzi a címkéket, és futtat egy előrejelzési metódust.

Adjon hozzá egy aszinkron előrejelzési módszert az methods objektumhoz.

async predict() {
      //execute inference
      let prediction = await this.model.executeAsync(this.$refs.img);
      let label = prediction[0];
      //build up a predictions object by parsing details to labels and probability
      this.predictions = label.map((p, i) => {
        return { index: i, label: this.labels[i], probability: p * 100 };
      });
    },

Ez a metódus egy képet mutat a modellnek, amely egy előrejelzést küld vissza a pontosságból származtatott, 100-zal megszorzott valószínűséggel, ami így egy százalékos pontosságot eredményez.

A felhasználói felület befejezése

Végső lépésként bemutathatja az előrejelzéseket a felhasználói felületen.

Adjon hozzá egy <div> zárás fölötti elemet <div> a következő sablonban>: .DetectImage.vue

<div v-for="pred in predictions" :key="pred.index">{{ pred.label }}: {{ pred.probability.toFixed(0) + '%' }}</div>
<div v-if="!predictions.length">hmm.....</div>

Ez a kód megjeleníti a címkét és annak valószínűségét, hogy a kép megfelel a címkének.

Ha most futtatja az alkalmazást, egy előrejelzésnek kell megjelennie, amikor a Tovább gombot választja a képek forgatásának előmozdításához.

Web.config fájl hozzáadása

Az alkalmazás Azure-beli Windows-példányon való futtatásához egy web.config nevű fájlt kell hozzáadnia a public mappához. A kiszolgáló ezzel a fájllal olvashatja be a .json-modellt. Adja hozzá ezt a kódot a fájlhoz.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <remove fileExtension=".json"/>
      <mimeMap fileExtension=".json" mimeType="application/json"/>
    </staticContent>
  </system.webServer>
</configuration>

A kód közzététele a GitHubon

Ideje leküldeni a kódbázist a GitHubnak. Hozzon létre egy új adattárat a GitHubon, és kapcsolja hozzá a kódbázist.

git remote add origin https://github.com/<your-github-handle>/<repo-name>.git

A Visual Studio Code Git-eszköztárával mostantól véglegesítheti és leküldheti a kódot a GitHubnak.

Folytatás