[Model Serving] 이미지 분류 모델

[jiminchur]

• Flask랑 spring이랑 통신되는지 확인
• javascript로 업로드된 이미지 Flask에 보내기
• 받은 이미지 전처리 진행하기
• Flask를 통해 저장된 모델 불러오기
• 예측값 return해주고 중간에 DB에 저장하기

[jiminchur]

• 이미지 업로드 하는 js 코드 구현하기
• Flask 환경 세팅하기

[jiminchur]

• 이미지 업로드
• CSS

  
  .upload-container {
  margin: 20px;
  }

previewImage {

max-width: 500px;
max-height: 500px;

}

* Html

* JS

document.getElementById('imageUpload').addEventListener('change', function(event) { if (event.target.files && event.target.files[0]) { const reader = new FileReader();

    reader.onload = function(e) {
        const previewImage = document.getElementById('previewImage');
        previewImage.src = e.target.result;
        previewImage.style.display = 'block';
    };

    reader.readAsDataURL(event.target.files[0]);
}

});

* 성공
![스크린샷 2024-03-13 오후 12 18 00](https://github.com/jiminchur/Closet_Cody_recommendModel/assets/145955453/3133c12e-c5d0-4061-830f-1d3c61793ee7)

[jiminchur]

• 업로드된 이미지 flask서버에 전송하기

  
  document.getElementById('imageUpload').addEventListener('change', function(event) {
  const file = event.target.files[0];
  if (file) {
      const formData = new FormData();
      formData.append('image', file);
  
      sendByApi('POST', 'http://127.0.0.1:5000/predict', formData, (json) => {
          console.log('업로드 성공:', json);
          document.getElementById('predictionResult').textContent = `예측 결과: ${json.tagName}`;
          // 성공 콜백 로직
      }, (json) => {
          console.error('업로드 실패:', json);
          // 실패 콜백 로직
      });
  }
  });

const sendByApi = (method, url, formData, success_callback, failure_callback) => { let options = { method: method, body: formData // FormData 객체 사용 };

fetch(url, options)
    .then(response => response.json().then(json => ({ status: response.status, body: json })))
    .then(({ status, body }) => {
        if(status >= 200 && status < 300) {
            alert("요청 결과 성공");
            if(success_callback) success_callback(body);
        } else {
            alert("요청 결과 오류");
            if(failure_callback) failure_callback(body);
        }
    })
    .catch(error => {
        alert("API 호출 오류 (서버 호출 오류)");
        console.error(error); // 콘솔에 오류 로깅
    });

};

[jiminchur]

• Azure 에서 학습된 모델 api 로 받아서 test 해보기

[jiminchur]

• Spring에서 flask로 전송 되는지 테스트 하기
• issue
• Spring 하고 flask의 전송 오류

[jiminchur]

• 이미지 전송받아서 예측값 출력하는 test(flask에서)

[jiminchur]

• 예측값을 다시 spring에서 받기

[jiminchur]

• issue 1
• Auzre 계정 요금 문제
  • 크레딧 모두 소진을 해서 더 이상 예측을 수행 할수가 없음
• 해결하기 위한 시도
  • AWS에서 Rekognition 이라는 서비스를 이용할 예정
  • 커스텀 라벨을 통해 우리만의 라벨 값으로 이미지 분류가 가능한 서비스
  • 모델 학습 완료
• issue 2
• Azure 때 처럼 endpoint url이 존재 하지 않음
  • 파이썬 코드랑 aws cli 코드로 모델 시작 예측 종료 하는 코드만 존재
• 해결하기 위한 시도
  • lamdba 와 api gateway를 통해 endpoint url 생성

[jiminchur]

• 모델 서빙하기 위한 설계
• 사용자 이미지 업로드 -> javascript -> S3에 저장 및 S3 저장 경로 endpoint url에 전달
  • 실패
  • 바로 s3에 저장하는 거랑 s3 경로를 전달 하는 방법들이 통하지 않음