Önceki

Sonraki

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:

• Node.js
• npm
• Visual Studio Code
• Vue CLI

Dekont

Vue CLI ile çalışmak için makinenizde Node ve npm'nin kullanılabilir olması gerekir. Ayrıca Vue CLI’yı kapsayan grafik kullanıcı arabirimi (GUI) Vue UI’yi de yebilirsiniz. girerek vue uiCLI için bir GUI başlatın ve uygulamanızı daha görsel bir şekilde oluşturun.

Uygulamanızın iskelesini kurma

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

    vue create this-or-that

CLI ön ayarları mı yoksa el ile iskeleyi mi kullanmak istediğinizi sorduğunda "el ile" seçeneğini belirleyin. Bu şekilde yüklemek istediğiniz eklentiler üzerinde denetiminiz olur.

CLI kurulum yordamının bu ekranındaki seçeneklerde Aşamalı Web Uygulaması'nı seçtiğinizden emin olun. Hem çevrimiçi hem de çevrimdışı çalışan bir uygulama istiyorsunuz.

Dekont

Vue CLI'yi yüklerken Vue 2'yi seçtiğinizden emin olun.

Temel uygulama oluşturulduktan sonra şunu girerek uygulamayı ç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.

Geliştirici Araçları'nda Denetimler'i seçin ve uygulamanızın Lighthouse alanını gözden geçirin. Aşamalı Web Uygulamanızın performansını bu aracı kullanarak test edebilirsiniz, ancak daha sonra uygulamayı azurewebsites.net'e dağıtana kadar bunu yapmayacaksı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 dalmaçyalıların ve çikolatalı dondurmanın bazı görüntülerini 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>

Çıkarım için kullanacağınız görüntüleri barındıracak adlı bir klasör /src/assets 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 Karen Zack'in dalmaçyalı v dondurma kolajını oluşturmak için kullandıkları resimlerdir.

öğesini aşağıdaki düzeni içerecek şekilde düzenleyerek <template>DetectImage.vue geçiş yapmak için 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>

Veriler için yer tutucular oluşturmak için içindeki nesnenin props kapanış parantezinin altına bir data() yöntem ekleyin (nesnenin DetectImage.vue kapanışında virgül ekleyin).

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

Bu nesnenin altında, görüntünün computed dizinini döndürmek ve dizine ulaşılırsa ş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;
    },
},

Kullanıcı etkileşimini yakalamak için hesaplanan özellikler nesnesinin altında bir methods nesne oluşturun.

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

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

<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, boş bir resimle başlayarak 16 resimden oluşan bir galeriden geçebiliyor olmanız gerekir. Bundan sonra bu uygulamada kullanılacak bir model oluşturmanız gerekiyor.

Devam et