연습 - 웹앱을 스캐폴드하고 유추를 위한 인터페이스 만들기
시작하기 전에 머신에 다음 소프트웨어가 설치되어 있는지 확인하세요.
참고
Vue CLI를 사용하려면 컴퓨터에서 사용할 수 있는 Node 및 npm이 필요합니다. Vue CLI의 GUI인 Vue UI를 사용해 볼 수도 있습니다. vue ui를 입력하여 CLI용 GUI를 시작하고 더 시각적인 방식으로 앱을 만듭니다.
앱 스캐폴드
Node, npm 및 Vue CLI가 설치되면 새 앱을 쉽게 만들 수 있습니다. cd를 사용하여 코드를 보내고자 하는 폴더로 이동하고 명령 프롬프트 또는 터미널을 열어 다음을 입력합니다.
vue create this-or-that
CLI에서 사전 설정 또는 수동 스캐폴드를 사용할지 묻는 메시지를 표시하면 ‘수동’을 선택합니다. 이러한 방식으로 설치할 플러그를 제어할 수 있습니다.
이 CLI 설정 루틴 화면의 선택 항목에서 프로그레시브 웹앱을 선택해야 합니다. 온라인 및 오프라인 모두에서 작동하는 앱을 만들 수 있습니다.
참고
Vue CLI를 설치할 때 Vue 2를 선택해야 합니다.
기본 앱을 빌드한 후 다음을 입력하여 실행합니다.
cd this-or-that && npm run serve
브라우저에서 로컬에 스캐폴드된 기본 Vue.js 앱이 표시됩니다.
개발자 도구에서 감사를 선택하고 앱의 Lighthouse 영역을 검토합니다. 이 도구를 사용하여 프로그레시브 웹앱 성능을 테스트할 수 있지만 나중에 azurewebsites.net에 앱을 배포할 때까지 이 작업을 수행하지 않습니다.
유추 인터페이스 빌드하기
이제 모델이 유추를 수행할 수 있는 이미지를 로드하는 매우 간단한 인터페이스를 빌드해야 합니다. 모델은 이미지가 지정된 레이블에 해당하는지 판단하는 확실성의 수준으로 이미지를 구별하는 점수를 제공합니다. 여기서는 달마티안과 초콜릿 칩 아이스크림의 일부 이미지를 제공해드립니다. 나중에 모델을 학습시킵니다.
먼저 코드베이스의 /src/components 폴더에 있는 HelloWorld.vue 파일의 이름을 DetectImage.vue로 바꿉니다. App.vue의 HelloWorld에 대한 참조도 제거합니다. 이제 App.vue 파일은 다음과 같습니다.
<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>
유추에 사용할 이미지를 저장할 수 있도록 images라는 폴더를 /src/assets에 만듭니다. 해당 폴더에 이 zip 파일을 풉니다. 이 파일에는 빈 이미지를 비롯한 17개의 이미지가 있습니다.
Karen Zack이 달마티안 대 아이스크림 콜라주를 만드는 데 사용한 이미지입니다.
DetectImage.vue에서 이 레이아웃을 포함하도록 <template>을 편집하여 이미지 및 이미지 전환 단추를 표시합니다.
<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>
DetectImage.vue에서 props 개체(닫는 괄호 아래에 쉼표 추가)의 닫는 괄호 아래 data() 메서드를 추가하여 데이터에 대한 자리 표시자를 만듭니다.
data() {
return {
image: 0,
numImages: 16,
};
},
이 개체 아래에 computed 속성을 만들어서 이미지의 인덱스를 반환하고, 인덱스에 도달하면 템플릿에서 단추를 사용하지 않도록 설정합니다.
computed: {
getImgIndex() {
return this.image.toString();
},
disable() {
if (this.image == this.numImages) {
return true;
} else return false;
},
},
사용자 조작을 캡처하기 위해 계산된 속성 개체 아래에 methods 개체를 만듭니다.
methods: {
next() {
this.image++;
this.predictions = [];
setTimeout(this.predict, 500);
},
},
마지막으로 DetectImage.vue 파일의 아래쪽에 있는 <styles> 블록을 덮어써서 일부 스타일을 추가합니다.
<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>
이제 빈 이미지부터 시작하여 16개의 이미지로 구성된 갤러리의 이미지를 차례대로 살펴볼 수 있습니다. 다음으로, 이 앱에서 사용할 모델을 빌드해야 합니다.