개인 개발 프로젝트/AI 숫자 판별 앱

[AI 숫자 판별 앱] 1. 프로젝트 소개

종범2 2019. 12. 15. 16:47

최근 AI 분야의 딥러닝 공부를 시작했다. 석사 과정 중에 딥러닝 수업을 들었지만 시간이 지나니 기억이 나지 않아 처음부터 다시 시작했다. 딥러닝을 처음 공부하면 코딩에서 Hello World 같은 존재가 바로 Mnist일 것이다. Mnist는 숫자 손글씨 데이터로 딥러닝 모델을 트레이닝하고 테스트하는 프로젝트이다. Mnist를 공부하다가 이를 웹앱으로 만들어서 웹상에서 손글씨를 이미지를 업로드하고 결과를 확인하면 재밌겠다는 생각이 들었다. 그래서 AI 숫자 판별 앱이라는 이름으로 Mnist 웹앱을 개발해보았다.

 

웹사이트 접속 링크는 다음과 같다.

클라이언트 배포 링크

https://jb-mnist-client.herokuapp.com/

 

Mnist

 

jb-mnist-client.herokuapp.com

서버 배포 링크

https://jb-mnist-server.herokuapp.com/

 

https://jb-mnist-server.herokuapp.com/

 

jb-mnist-server.herokuapp.com

웹사이트는 3개의 페이지로 구성되어 있다.

홈 - AI 숫자 판별 앱의 소개이다.

가이드라인 - 판별 대상인 손글씨 이미지를 만드는 방법을 설명한다.

파일 업로드 - 파일을 업로드하여 AI가 판별한 결과를 확인한다.

 

화면은 React로 구현하였고 Heroku에 배포하였다. Mnist의 사전 트레이닝된 딥러닝 모델은 Python으로 구현하였고 Heroku에 배포하였다.

 

클라이언트 소스

https://github.com/Jongbeom2/mnist-client

 

Jongbeom2/mnist-client

Contribute to Jongbeom2/mnist-client development by creating an account on GitHub.

github.com

서버 소스

https://github.com/Jongbeom2/mnist-server

 

Jongbeom2/mnist-server

Contribute to Jongbeom2/mnist-server development by creating an account on GitHub.

github.com

전체 글의 구성은 다음과 같다.

 

[AI 숫자 판별 앱] 8. 마무리

[AI 숫자 판별 앱] 7. React 앱 Heroku에 배포

[AI 숫자 판별 앱] 6. React 화면 코드 작성

[AI 숫자 판별 앱] 5. React 앱 생성 및 설정

[AI 숫자 판별 앱] 4. API Heroku 배포 및 테스트

[AI 숫자 판별 앱] 3. 숫자 판별 API 작성 및 테스트

[AI 숫자 판별 앱] 2. 숫자 판별 함수 작성

[AI 숫자 판별 앱] 1. 프로젝트 소개