
Voice Label은 시각 장애인 사용자가 편의점 제품을 식별하고 이미지 인식을 통해 제품의 상세 정보와 영양 정보를 음성 피드백으로 제공하는 웹 서비스입니다.

GIF라 음성이 지원되지 않습니다. 해당 링크로 접속하시면 음성도 들으실 수 있습니다. 여기 클릭
- Google 로그인 이용: Google 로그인 API를 사용하여 사용자 인증 및 프로필 접근을 용이하게 함
- 제품 식별: Teachable Machine 이미지 분류를 사용하여 제품을 인식하고, 화면을 두 번 터치하면 구매 기록으로 데이터를 전송
- 음성 피드백:
react-speech-recognition
을 사용하여 음성으로 피드백을 말하면 Speech to Text를 거쳐 서버에 저장 - 결제 통합:
tosspayments 결제 api
를 사용하여 결제 처리 - 기록 및 구독 관리: 사용자 프로필을 통해 구매 기록과 구독을 관리
- 로그인 페이지: Google 로그인을 사용하여 사용자 인증을 허용합니다.
- 메인 페이지: 로그인 후 홈페이지입니다.
- 스캔 페이지: 카메라 입력을 사용한 제품 스캔.
- 피드백 페이지: 사용자가 제품 정보 정확성에 대한 피드백을 제공할 수 있습니다.
- 마이 페이지: 구독 세부 정보와 사용자의 구매 기록이 포함됩니다.
- react-webcam: 웹캠 기능을 처리합니다.
- Teachable Machine 이미지 분류: Teachable Machine-Google에서 학습시킨 가중치 결과 파일을 프로젝트에 넣어놓고 웹캠으로 들어오는 이미지를 분류
- react-speech-recognition: 음성 인식 기능을 제공합니다.
- Text to Speech: 외부 라이브러리 없이 기본적으로 구현됩니다.
- 상태 관리:
recoil
을 사용하여 로그인 및 구독 상태를 관리합니다.
- Spring JPA: 데이터 관리를 위해 Spring Data JPA를 사용
- MySQL (RDS): 데이터베이스는 Amazon RDS를 활용한 MySQL을 사용
- Swagger: API 문서화.
- Actuator: Health Check
- Spring Security/OAuth2.0 Client & OAuth2.0 Google: Spring Security로 소셜 로그인을 통해 간편 인증을 처리했고 JWT로 인가 처리
- Toss Payments 결제 API - test: 토스 페이먼츠 결제 API 연동
- 개발 및 클라우드 아키텍처
- 기획: 김리사
- 디자인: 최성희
- 프론트엔드: 김수아, 노경인
- 백엔드 + AI + 클라우드: 이주승, 박진홍
Node.js가 기기에 설치되어 있는지 확인한 후, 프로젝트 디렉토리에서 다음 명령어를 실행하세요:
npm install
npm install --save react-speech-recognition
npm install @reduxjs/toolkit react-redux
npm install axios
npm install jwt-decode
npm install --save react-scroll
npm install @tosspayments/payment-sdk --save
npm install recoil
애플리케이션 실행 애플리케이션을 시작하려면 프로젝트 디렉토리로 이동하여 다음을 실행하세요:
npm start
선호하는 브라우저에서 서버 주소로 이동하여 배포를 확인하세요.
모든 기능이 다양한 브라우저에서 예상대로 작동하는지 확인하세요, 특히 카메라 접근 및 음성 인식 기능을 확인합니다.