Poprzednie

Następne

Ćwiczenie — tworzenie szkieletu aplikacji internetowej i interfejsu do wnioskowania

Ukończone

Przed rozpoczęciem upewnij się, że następujące oprogramowanie jest zainstalowane na Twojej maszynie:

• Node.js
• npm
• Visual Studio Code
• Interfejs wiersza polecenia struktury Vue

Uwaga

Aby pracować z interfejsem wiersza polecenia Vue, na maszynie będzie potrzebny węzeł i narzędzie npm. Możesz też wypróbować interfejs użytkownika struktury Vue, który jest graficznym interfejsem użytkownika nałożonym na interfejs wiersza polecenia tej struktury. Uruchom graficzny interfejs wiersza polecenia, wprowadzając ciąg vue uii tworząc aplikację w bardziej wizualny sposób.

Tworzenie szkieletu aplikacji

Po zainstalowaniu środowiska Node, npm i interfejsu wiersza polecenia programu Vue tworzenie nowej aplikacji jest łatwe. Użyj cd polecenia , aby przejść do folderu, w którym chcesz przejść kod, otworzyć wiersz polecenia lub terminal, a następnie wprowadzić:

    vue create this-or-that

Gdy interfejs wiersza polecenia pyta, czy chcesz użyć ustawień wstępnych, czy ręcznego szkieletu, wybierz pozycję "manual". Dzięki temu masz kontrolę nad wtyczkami do zainstalowania.

Upewnij się, że wybrano pozycję Progresywna aplikacja internetowa w opcjach na tym ekranie procedury konfiguracji interfejsu wiersza polecenia. Należy utworzyć aplikację działającą zarówno w trybie online, jak i offline.

Uwaga

Upewnij się, że podczas instalowania interfejsu wiersza polecenia programu Vue wybrano pozycję Vue 2.

Po skompiluj podstawową aplikację, uruchom ją, wprowadzając następujące polecenie:

    cd this-or-that && npm run serve

W przeglądarce lokalnej powinna zostać wyświetlona podstawowa aplikacja Vue.js z utworzonym szkieletem.

W obszarze Narzędzia deweloperskie wybierz pozycję Audit (Inspekcje) i przejrzyj obszar Lighthouse aplikacji. Możesz przetestować sposób działania progresywnej aplikacji internetowej przy użyciu tego narzędzia, ale nie zrobisz tego dopiero później podczas wdrażania aplikacji w azurewebsites.net.

Tworzenie interfejsu wnioskowania

Teraz należy utworzyć bardzo prosty interfejs służący do ładowania obrazu, dla którego model może przeprowadzić wnioskowanie. Model będzie dostarczać wskaźnik rozróżniający obrazy według ustalonego poziomu pewności, że obraz odpowiada danej etykiecie. W tym przypadku przedstawimy kilka obrazów dalmatyńczyków i lodów z chipami czekoladowymi. Wytrenujesz model później.

Najpierw zmień nazwę pliku HelloWorld.vue w folderze /src/components bazy kodu na DetectImage.vue. Usuń też odwołania do elementu HelloWorld w pliku App.vue. Teraz plik App.vue wygląda następująco:

<template>
    <div id="app">
        <DetectImage msg="What do you see?" />
    </div>
</template>

<script>
    import DetectImage from './components/DetectImage.vue';

    export default {
        name: 'app',
        components: {
            DetectImage,
        },
    };
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

Utwórz folder w /src/assets nazwach obrazów do przechowywania obrazów, które będą używane do wnioskowania. Wyodrębnij ten plik zip do tego folderu. Ten plik zawiera siedemnaście obrazów, w tym jeden pusty.

Te obrazy to te, które Karen Zack wykorzystała do utworzenia jej dalmatyńczyków przeciwko kolażu lodów.

Wyświetl obraz i przycisk, aby go przełączyć, edytując <template> element w DetectImage.vue , aby uwzględnić następujący układ.

<div>
    <h1>{{ msg }}</h1>
    <div>
        <img class="image" ref="img" :src="require('../assets/images/' + getImgIndex + '.jpg')" />
    </div>
    <div>
        <button class="button" @click="next()" :disabled="disable">Next</button>
    </div>
    <div v-for="pred in predictions" :key="pred.index">
        {{ pred.label }}: {{ pred.probability.toFixed(0) + '%' }}
    </div>
    <div v-if="!predictions.length">hmm.....</div>
</div>

Dodaj metodę data() w nawiasie props zamykającym obiektu (dodaj przecinek na zamknięciu tego obiektu), DetectImage.vue aby utworzyć symbole zastępcze dla danych.

data() {
    return {
        image: 0,
        numImages: 16,
    };
},

W tym obiekcie utwórz computed właściwość, aby zwrócić indeks obrazu, i wyłączyć przycisk w szablonie, jeśli indeks zostanie osiągnięty.

computed: {
    getImgIndex() {
        return this.image.toString();
    },
    disable() {
        if (this.image == this.numImages) {
            return true;
        } else return false;
    },
},

methods Utwórz obiekt w obiekcie właściwości obliczeniowych w celu przechwycenia interakcji użytkownika.

methods: {
    next() {
        this.image++;
        this.predictions = [];
        setTimeout(this.predict, 500);
    },
},

Na koniec dodaj niektóre style, zastępując <styles> blok w dolnej części DetectImage.vue pliku.

<style scoped>
h3 {
    margin: 40px 0 0;
}
.image {
    min-height: 300px;
    max-height: 300px;
    max-width: 100%;
}
.button {
    width: 200px;
    height: 50px;
    border-radius: 5px;
    background-color: blueviolet;
    color: white;
    font-size: 20pt;
    margin: 10px;
}
.button:disabled,
.button[disabled] {
    border: 1px solid #999999;
    background-color: #cccccc;
    color: #666666;
}
</style>

Teraz powinno być możliwe przejście przez galerię 16 obrazów, jeden po drugim, zaczynając od pustego. Następnie należy utworzyć model do użycia w tej aplikacji.

Kontynuuj