Teleprompter-STT
Demo Link(Only work in chrome) 👉 https://teleprompterstt.herokuapp.com
Table of Contents
🎙 프로젝트 소개
- 음성에 맞춰 대본을 화면에 실시간으로 출력하는 프롬프터 서비스
- Untact시대에 화상회의에서 편하게 발표할 수 있도록 도와주는 서비스
📜 주요 기능
- Web Speech API && string-similarity API 사용
- Real-time Script Output
🏛 System Architecture
🗂 Directory 구조
Teleprompter-STT
├── client ---> Front-end [React]
│ ├── public ---> 정적 파일 보관
│ │ ├── index.html
│ │ ├── manifest.json
│ │ └── robots.txt
│ ├── src
│ │ ├── components
│ │ │ └── Teleprompter.js ---> 음성인식 && 문장유사도 수행
│ │ ├── pages
│ │ │ ├── MainPage.js ---> 메인 화면
│ │ │ └── PrompterPage.js ---> 대본 출력 화면
│ │ ├── App.css
│ │ ├── App.js ---> Router
│ │ ├── App.test.js
│ │ ├── index.css
│ │ ├── index.js
│ │ ├── reportWebVitals.js
│ │ ├── serviceWorker.js
│ │ ├── setupTests.js
│ │ └── styles.js ---> PrompterPage.js Style
│ ├── .gitignore
│ ├── package-lock.json
│ └── package.json
│
├── .gitignore
├── LICENSE ---> MIT License
├── package-lock.json
├── package.json
├── README.md
└── server.js ---> Back-end [Node.js Express]
설치 방법
☝️ React & Express 서버 동시 구동 (Local Server로 동작)
client 폴더 이동
$ cd Teleprompter-STT/client
React에 필요한 모듈 설치
$ npm install
Teleprompter-STT 폴더 이동
$ cd ..
Node.js에 필요한 모듈 설치
$ npm install
React & Express 서버 동시 시작
$ npm run dev
✌️ Express 서버로만 구동 (Heroku로 배포 가능)
client 폴더 이동
$ cd Teleprompter-STT/client
React에 필요한 모듈 설치
$ npm install
Build File 생성
$ npm run build
Teleprompter-STT 폴더 이동
$ cd ..
Node.js에 필요한 모듈 설치
$ npm install
Express 서버 시작
$ npm run server
👥 팀원
- 권동영 (2016110307)
- 김다솔 (2017110268)
📋 Reference
📋 License
Teleprompter-STT is MIT licensed.