Poprzednie

Następne

Ćwiczenie — szkolenie modelu uczenia maszynowego i tworzenie interfejsu internetowego do korzystania z niego

Ukończone

Teraz możesz rozpocząć trenowanie niestandardowego modelu uczenia maszynowego przy użyciu obrazów innych niż używane w aplikacji. Obrazy w aplikacji będą używane do testowania dokładności modelu w trakcie wnioskowania. Model utworzysz w interfejsie usługi Custom Vision AI przy użyciu innego zestawu obrazów.

Uwaga

Przeprowadzisz szkolenie przy użyciu tylko kilku obrazów, co nie jest odpowiednie do utworzenia modelu o dobrej jakości w systemie produkcyjnym. Ten zestaw szkoleniowy służy tylko do celów demonstracyjnych.

Pobierz ten skompresowany plik dwunastu obrazów szkoleniowych i wyodrębnij go na komputer lokalny.

Usługa Custom Vision AI

W przeglądarce przejdź do usługi Custom Vision AI i zaloguj się. Utwórz nowy projekt o nazwie Chocolate lub Dalmatyńczyk. W oknie podręcznym nadaj projektowi opis i przydziel zasób, aby model mógł zostać wytrenowany w chmurze. W razie potrzeby utwórz nowy.

Upewnij się, że ten projekt ma typ Klasyfikacja , ponieważ po prostu określi między typami. Jest to typ projektu z klasyfikacją wieloklasową, ponieważ będzie udostępniać jeden tag dla każdego obrazu. Wybierz pozycję Ogólne (kompaktowy), aby wyeksportować go dla biblioteki TensorFlow.js.

Szkolenie modelu

Teraz możesz przeprowadzić szkolenie z użyciem zestawu obrazów.

W pobranym folderze znajdują się dwa foldery — jeden oznaczony jako „ice cream” (lody), a drugi jako „dalmatian” (dalmatyńczyk). Wybierz przycisk Dodaj obrazy w projekcie usługi Custom Vision AI i wybierz obrazy w folderzedalmatian. Oznacz je tagiem dalmatian. Wykonaj ten sam proces dla folderu ice cream, oznaczając obrazy tagiem ice cream.

Teraz masz dwanaście obrazów szkoleniowych, które zostały przekazane i oznaczone tagami. Wybierz przycisk Train (Trenowanie) u góry, a następnie wybierz pozycję Quick Training (Szybkie szkolenie). Zostaną wyświetlone wyniki z analizą wydajności. Przetestuj swoje dane na nowym obrazie lodów lub dalmatyńczyka. Oto jeden z nich do wypróbowania:

Przeciągnij ten obraz na pulpit, a następnie wybierz przycisk Szybki test w interfejsie usługi Custom Vision AI i przejdź, aby znaleźć obraz na pulpicie. Model sklasyfikuje ten nowy obraz jako dalmatyńczyka!

Pobieranie modelu

Wybierz przycisk Eksportuj w górnej części interfejsu usługi Custom Vision AI, aby pobrać model i skojarzone z nim zasoby. Wybierz pozycję TensorFlow jako typ modelu i tensorflow.js na liście rozwijanej. Po zakończeniu pakietu wybierz pozycję Pobierz.

Na komputer lokalny zostanie wyeksportowany skompresowany plik. Wyodrębnij ten plik i nazwij wynikowy folder models. W tym folderze znajdziesz cztery pliki: cvexport.manifest, labels.txt, model.json i weights.bin.

Przekaż cały folder models do katalogu public aplikacji internetowej.

Teraz możesz zintegrować te pliki, tak aby aplikacja mogła ich używać.

Integrowanie modelu z aplikacją internetową

Najpierw należy zainstalować specjalny pakiet npm w aplikacji internetowej customvision-tfjs. Ta biblioteka umożliwia aplikacji internetowej korzystanie ze struktury tensorflow.js przy użyciu modeli wyszkolonych w usłudze Custom Vision AI.

1. W pliku package.json w katalogu głównym aplikacji internetowej dodaj pozycję "customvision-tfjs": "^1.0.1", do listy dependencies.

2. W tym samym pliku dodaj też pozycję "raw-loader": "^4.0.0", do listy devDependencies. Ten pakiet jest potrzebny do zarządzania odczytywaniem plików txt z aplikacji Vue.

3. W tym samym pliku dodaj "webpack-cli": "^3.3.10" do devDependencies listy, aby interfejs wiersza polecenia pakietu Webpack mógł być używany w aplikacji, co jest niezbędne do analizowania plików tekstowych.

Zatrzymaj aplikację internetową, jeśli jest uruchomiona, naciskając klawisze Ctrl+C i uruchamiając npm i polecenie z katalogu głównego za pośrednictwem terminalu. Spowoduje to zainstalowanie tego pakietu.

Teraz możesz uruchomić ponownie aplikację internetową i kontynuować pracę (npm run serve).

Następnie zintegruj zainstalowane właśnie pakiety, dodając ten wiersz bezpośrednio pod tagiem otwierającym <script> w pliku DetectImage.vue:

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

Teraz należy zezwolić pakietowi raw-loader na odczytywanie z labels.txt pliku tagów modelu.

W tym celu utwórz w katalogu głównym aplikacji nowy plik o nazwie webpack.config.js. W tym pliku dodaj następujący kod.

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

Następnie dodaj trzy kolejne elementy danych do data obiektu w <script> bloku DetectImage.vue.

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

Aplikacja jest teraz gotowa do korzystania z modelu oraz listy etykiet i tworzenia tablicy przewidywań.

Teraz dodaj mounted punkt zaczepienia cyklu życia po przecinku zamykającym na końcu computed obiektu.

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();
  },

Po zainstalowaniu aplikacji zostanie uruchomiona ta metoda asynchroniczna, która zwiększy tablicę obrazów, załaduje model, przeanalizuje etykiety i uruchomi metodę przewidywania.

Dodaj metodę przewidywania asynchronicznego do methods obiektu .

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 };
      });
    },

Ta metoda przekaże obraz do modelu, a model odeśle przewidywanie z prawdopodobieństwem określonym na podstawie dokładności pomnożonej przez 100, aby wartość była wyświetlana jako procent dokładności.

Kończenie tworzenia interfejsu użytkownika

Na koniec możesz wyświetlić te przewidywania w interfejsie użytkownika.

Dodaj powyższy <div> kod zamykający <div> w szablonie><.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>

Ten kod będzie wyświetlał etykietę i prawdopodobieństwo, że obraz jest zgodny z tą etykietą.

Jeśli teraz uruchomisz aplikację, powinna zostać wyświetlona prognoza, gdy wybierzesz pozycję Dalej , aby przejść do rotacji obrazów.

Dodawanie pliku web.config

Ostatnim krokiem wymaganym do tego, aby uruchomić aplikację w wystąpieniu systemu Windows na platformie Azure, jest dodanie pliku o nazwie web.config w folderze public. Ten plik umożliwia odczytywanie modelu json przez serwer. Dodaj ten kod do tego pliku.

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

Publikowanie kodu w usłudze GitHub

Teraz jest odpowiedni moment na wypchnięcie bazy kodu do usługi GitHub. Utwórz nowe repozytorium w usłudze GitHub i połącz z nim bazę kodu.

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

Teraz możesz użyć narzędzi Git w programie Visual Studio Code, aby zatwierdzić kod i wypchnąć go do obszaru master w usłudze GitHub.

Kontynuuj