Nutt

FE 저장소 | BE 저장소 | AI 저장소(Python) | AI 저장소(Node.js)

객체 탐지 시스템과 대화형 인공지능을 이용한 식단 기록 웹 앱

Caution

본 프로젝트는 전시용으로 개발되었습니다. OpenAI API 키가 클라이언트에 노출되므로 실서비스 운영에 적합하지 않습니다.

Overview

• 사용자가 촬영한 사진을 통해 식단을 구성하는 음식을 탐지합니다.
• ChatGPT를 활용하여 식단에 대한 개선 방향 및 피드백을 제공합니다.
• PWA를 적용하여 네이티브 앱과 같은 사용자 경험을 제공합니다.

Tech Stack

• Language: HTML, CSS, TypeScript
• Library: React, Redux, Axios, Chakra UI, Tensorflow
• Server: Linux, Docker

Deployment

Basic Method

1. Node.js 16.20.2 설치

2. .env.template 파일명을 .env로 변경

3. .env 수정

   예시:

   REACT_APP_OPENAI_API_KEY=sk-abc123def456ghi789jkl012mno345pqr678stu9vwx0yz
   REACT_APP_NUTT_API_URL=https://api.example.com
   REACT_APP_PHOTO_DETECTION_URL=https://detection.example.com
   

4. 프로덕션을 위한 빌드 스크립트 실행

   npm run build
   

5. 웹 서버에 빌드 결과물을 업로드

Docker Method

1. Docker 이미지 빌드

   아래는 예시 명령어입니다. 환경 변수를 변경해야 함에 유의하세요.

   docker build \
   -t nutt:latest \
   --build-arg REACT_APP_OPENAI_API_KEY=sk-abc123def456ghi789jkl012mno345pqr678stu9vwx0yz \
   --build-arg REACT_APP_NUTT_API_URL=https://api.example.com \
   --build-arg REACT_APP_PHOTO_DETECTION_URL=https://detection.example.com \
   .

2. Docker 컨테이너 시작

   docker run --name nutt -p 8080:80 -d nutt:latest

3. http://localhost:8080 접속

Samples

BE 리포지토리에서 다양한 예시 동영상을 확인할 수 있습니다.

References

• 제품 소개 포스터: 링크
• 제품 소개 동영상: 링크
• 학술 논문: 링크