2021.06.25 - [AWS] - [AWS][S3] S3 정적 웹 호스팅
[AWS][S3] S3 정적 웹 호스팅
https://velog.io/@nari120/AWS-%EC%A0%95%EC%A0%81%EC%9D%B8-%EC%9B%B9-%ED%98%B8%EC%8A%A4%ED%8C%85%ED%95%98%EA%B8%B0-S3-%EC%9D%B4%EC%9A%A9 AWS 정적인 웹 호스팅하기 (S3 이용) 2020 AWS 에서 가장 핫한 서..
hidden-loca.tistory.com
머신러닝 딥러닝을 서비스 하다 느낀점이 있다.
- 어떻게 모델을 제공할 것인가?
- 추론에 필요한 자원은 어떻게 감당할 것인가?
일단 1번에 대한 답으로 가장 많이 쓰이는 방법은 웨상으로 모델을들 올려놓고 필요한곳에서 불러서 사용한다. tensorflowhub, 혹은 개인이 모델 파일을 저장해 놓는 경우(json 대표적으로.) 비슷하게 구성이 가능할것이다.
2번의 답을 생각해보자.
- 로컬 서비스 환경을 구성하고 쿠버네티스를 통해 서비스 환경을 구성한다. 문제점은 쿠버네티스를 써본적없고.. 단순히 이것들 외에도 신경써야할 네트워크 문제 등등 많고, gpu 가격이 미쳐 날뛰어 고생에 비해 '가성비'가 안나온다
- 외부 서버에 환경을 구성하고 필요할때 마다 불러쓴다. gpu 가격이 미쳐 날뛰는 타이밍이니 구글이나 아마존의 클라우드 서비스는 매력적으로 다가오고 뭔가 어려울것 같으면 네이버도 클라우드에서 텐서플로를 쓸수 있게 만들어 놓은것 같다.(확인 안해봄..) 다른 서비스 환경을 고려할 필요 없지만 vpc를 계속 임대하는 것은 비효율적이란 생각이 들었다.
- aws 람다. 람다는 호출이 있는 경우만 켜져 실행되고 다시 꺼진다. gpu를 쓸 수 없지만, 어차피 이미지 한두장 추론하는데 gpu는 쓸 필요 없다. 다만 람다에 직접 코드를 작성할수 없어(텐서플로가 너무 크다..)관리가 어렵고, 모델 로드 되는 시간이 실제 추론보다 길어져 배보다 배꼽이 큰 느낌이 든다. 위의 방법 보다는 좋아보이지만..
- 문득 안드로이드에서 tflite를 이용 했던 것이 생각났다. 모자란 스펙으로도 거의 실시간으로 추론이 가능 했으니 방법이 있을 것이라 생각을 하고 찾던 찰나에..
- java script를 이용한 방법을 찾아냈다. 일단은 js로 학습도 된다는 듯하나, 굳이 그럴 필요는 없다고 생각하고.. 추론 및 서비스 용도로는 제격이란 생각이 들었다. 무엇보다 서버쪽 부담이 거의 없을 것이다.
이전 글을 통해 s3 상에 정적 페이지를 호스팅 하였으므로 마찬가지로 페이지를 만들어 열어보자.
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
</head>
<div id="app">
<input type="file" id="file" @change='file_change'>
<button id="button1" @click="button1_click">predict</button>
<p id="pred">predict</p>
<img src="" id="img" height="500px">
</div>
<script>
new Vue({
el: '#app',
data() {
return {
classifier:null
}
},
created() {
// 버튼 액션안으로 들어갈 경우 매번 모델을 로드하여 속도가 느려진다.
// Initialize the Image Classifier method with MobileNet
const classifier = ml5.imageClassifier('MobileNet', modelLoaded);
this.classifier = classifier;
// When the model is loaded
function modelLoaded() {
console.log('Model Loaded!');
}
},
methods: {
async button1_click() {
var img = document.getElementById('img');
// Make a prediction with a selected image
this.classifier.classify(document.getElementById('img'), (err, results) => {
var tag = document.getElementById('pred')
console.log(results);
tag.textContent = results[0].label;
});
},
file_change(event) {
var fileReader = new FileReader();
fileReader.readAsDataURL(event.target.files[0]);
fileReader.onload = function (e) {
document.getElementById('img').src = e.target.result;
}
},
}
})
</script>
</html>
뷰를 통해서 간단하게 페이지를 구성했다. 이미지 파일을 불러와 띄우고 predict 버튼을 누르면 결과중 가장 높은 확률의 라벨이 표시된다.
모델은 Mobilenet을 불러와 사용하며 페이지가 처음 생성될때(created) 될 때 로드 된다. 모델을 따로 로드해놔야 딜레이가 없으니 주의 할것.
무거운 모델이 아니라 가벼운 모델이라면, 만족할 만한 속도가 나오는것 같다.
덤으로 keras로 직접 학습한 모델을 변환하여 시도해 봤는데. 온갖 오류로.. 제대로 추런할 수 없었다. 이부분은 나중에 해결해 봐야 할 것 같다.
'Front > Vue.js' 카테고리의 다른 글
| [Error][Vue] Optional Chaning Error, 물음표 에러 (0) | 2022.11.28 |
|---|---|
| [JS][VUE] Axios GET, POST 전송. (0) | 2021.06.01 |