Alıştırma - Web uygulamasının iskelesini kurma ve çıkarım için arabirim oluşturma

Tamamlandı

Başlamadan önce aşağıdaki yazılımların makinenizde yüklü olduğundan emin olun:

Not

Vue CLI ile çalışmak için makinenizde Node ve NPM kullanılabilir olmalıdır. Ayrıca Vue CLI’yı kapsayan grafik kullanıcı arabirimi (GUI) Vue UI’yi de yebilirsiniz. vue ui' İ girerek ve uygulamanızı daha görsel bir biçimde oluşturarak CLI için BIR GUI başlatın.

Uygulamanızın iskelesini kurma

Node, NPM ve Vue CLı yüklendikten sonra yeni bir uygulama oluşturmak kolaydır. cdKodunuzun gitmesini istediğiniz klasöre gitmek için kullanın, bir komut istemi veya Terminal açın ve şunu girin:

    vue create this-or-that

CLı, önayarları veya el ile bir scafkatlama kullanmak isteyip istemediğinizi sorduğunda, ' el ile ' yi seçin. Bu şekilde yüklemek istediğiniz eklentiler üzerinde denetiminiz olur.

Vue CLı.

CLI kurulum yordamının bu ekranındaki seçenekler arasından 'Progressive Web App' (Aşamalı Web Uygulaması) öğesi seçtiğinizden emin olun. Hem çevrimiçi hem de çevrimdışı çalışan bir uygulama istiyorsunuz.

Temel uygulama derlendikten sonra şunu girerek çalıştırın:

    cd this-or-that && npm run serve

Tarayıcınızda yerel olarak iskelesi kurulmuş temel bir Vue.js uygulaması görüyor olmalısınız.

Uygulamanızı.

Geliştirici Araçları, denetimler' i seçin ve uygulamanızın açık olan alanını gözden geçirin. Bu aracı kullanarak aşamalı Web uygulamanızın nasıl gerçekleştiğini test edebilirsiniz, ancak daha sonra uygulamayı azurewebsites.net 'e dağıtırken bunu yapamayacaksınız.

Çıkarım arabirimini oluşturma

Şimdi modelin çıkarım yapabileceği bir resim yükleyecek, çok basit bir arabirim oluşturmanız gerekiyor. Model resimleri kesinlik düzeyine göre ayırt eden bir puan sağlayacaktır. Bu puan resmin verilen etikete ne düzeyde karşılık geldiğini belirler. Bu örnekte bazı dalmaçyalı ve çikolata parçalı dondurma resimleri sağlayacağız. Modeli daha sonra eğiteceksiniz.

İlk olarak kod tabanınızın /src/components klasöründeki HelloWorld.vue dosyasını DetectImage.vue olarak yeniden adlandırın. App.vue içindeki HelloWorld başvurularını da kaldırın. Şimdi App.vue dosyanız şuna benzer:

<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>

/src/assetsÇıkarımı için kullanacağınız görüntüleri barındırmak için, çağrılan görüntüler ' de bir klasör oluşturun. Bu zip dosyasını söz konusu klasöre ayıklayın. Bu dosyada on yedi resim bulunur ve biri de boştur.

Bu görüntüler, Dalmatians v buz kreyeni oluşturmak için kullanılan Karen Zack ' dir.

<template> DetectImage.vue Aşağıdaki düzeni dahil etmek için içindeki ' i düzenleyerek bir görüntü ve düğme görüntüleyin.

<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>

data() props DetectImage.vue Verilerin yer tutucuları oluşturmak için, içinde nesnenin kapatma parantezinin (bu nesnenin kapanmasında virgül ekleyin) altına bir yöntem ekleyin.

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

Bu nesnenin altında, computed bir görüntünün dizinini döndürmek ve dizine ulaşıldığında şablondaki düğmeyi devre dışı bırakmak için bir özellik oluşturun.

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

methodsKullanıcı etkileşimini yakalamak için hesaplanmış Özellikler nesnesi altında bir nesne oluşturun.

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

Son olarak, dosyanın alt kısmındaki bloğun üzerine yazarak bazı stiller ekleyin <styles> DetectImage.vue .

<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>

Şimdi 16 resimlik galeride boş resimden başlayarak tıklayıp birbiri ardına resimlerde ilerleyebilirsiniz. Bundan sonra bu uygulamada kullanılacak bir model oluşturmanız gerekiyor.