DongyoungKwon / Teleprompter-SST

Go to a project
Toggle navigation Toggle navigation pinning
DongyoungKwon
b8f1f57b 1 parent c1d976f0

Fix a bug that occurred when multiple people use

Expand all
Inline Side-by-side
Showing 12 changed files with 67 additions and 37 deletions
1 -# Teleprompter-SST 1 +# Teleprompter-STT
2 +
3 +## Table of Contents
4 + - [ν”„λ‘œμ νŠΈ μ†Œκ°œ](#-ν”„λ‘œμ νŠΈ-μ†Œκ°œ)
5 + - [μ£Όμš” κΈ°λŠ₯](#-μ£Όμš”-κΈ°λŠ₯)
6 + - [Directory ꡬ쑰](#-directory-ꡬ쑰)
7 + - [μ„€μΉ˜ 방법](#-μ„€μΉ˜-방법)
8 + - [νŒ€μ›](#-νŒ€μ›)
9 + - [Reference](#-reference)
10 + - [License](#-license)
11 +
2 12
3 ## πŸŽ™ ν”„λ‘œμ νŠΈ μ†Œκ°œ 13 ## πŸŽ™ ν”„λ‘œμ νŠΈ μ†Œκ°œ
4 - μŒμ„±μ— 맞좰 λŒ€λ³Έμ„ 화면에 μ‹€μ‹œκ°„μœΌλ‘œ 좜λ ₯ν•˜λŠ” 프둬프터 μ„œλΉ„μŠ€ 14 - μŒμ„±μ— 맞좰 λŒ€λ³Έμ„ 화면에 μ‹€μ‹œκ°„μœΌλ‘œ 좜λ ₯ν•˜λŠ” 프둬프터 μ„œλΉ„μŠ€
5 - Untactμ‹œλŒ€μ— ν™”μƒνšŒμ˜μ—μ„œ νŽΈν•˜κ²Œ λ°œν‘œν•  수 μžˆλ„λ‘ λ„μ™€μ£ΌλŠ” μ„œλΉ„μŠ€ 15 - Untactμ‹œλŒ€μ— ν™”μƒνšŒμ˜μ—μ„œ νŽΈν•˜κ²Œ λ°œν‘œν•  수 μžˆλ„λ‘ λ„μ™€μ£ΌλŠ” μ„œλΉ„μŠ€
6 16
7 17
8 -## πŸ“œ μ£Όμš”κΈ°λŠ₯ 18 +## πŸ“œ μ£Όμš” κΈ°λŠ₯
9 - 19 + - [**Web Speech API**](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API) && [**string-similarity API**](https://www.npmjs.com/package/string-similarity) μ‚¬μš©
10 - - [**Web Speech API**](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API) && [**String-Similarity API**](https://www.npmjs.com/package/string-similarity) μ‚¬μš©
11 - Real-time Script Output 20 - Real-time Script Output
12 21
13 22
14 ## πŸ—‚ Directory ꡬ쑰 23 ## πŸ—‚ Directory ꡬ쑰
15 -
16 ```bash 24 ```bash
17 -Teleprompter-SST 25 +Teleprompter-STT
18 β”œβ”€β”€ client ---> Front-end [React] 26 β”œβ”€β”€ client ---> Front-end [React]
19 β”‚ β”œβ”€β”€ public ---> 정적 파일 보관 27 β”‚ β”œβ”€β”€ public ---> 정적 파일 보관
20 -β”‚ β”‚ β”œβ”€β”€ favicon.ico
21 β”‚ β”‚ β”œβ”€β”€ index.html 28 β”‚ β”‚ β”œβ”€β”€ index.html
22 β”‚ β”‚ β”œβ”€β”€ manifest.json 29 β”‚ β”‚ β”œβ”€β”€ manifest.json
23 β”‚ β”‚ └── robots.txt 30 β”‚ β”‚ └── robots.txt
...@@ -38,50 +45,71 @@ Teleprompter-SST ...@@ -38,50 +45,71 @@ Teleprompter-SST
38 β”‚ β”‚ └── styles.js ---> PrompterPage.js Style 45 β”‚ β”‚ └── styles.js ---> PrompterPage.js Style
39 β”‚ β”œβ”€β”€ .gitignore 46 β”‚ β”œβ”€β”€ .gitignore
40 β”‚ β”œβ”€β”€ package-lock.json 47 β”‚ β”œβ”€β”€ package-lock.json
41 -β”‚ β”œβ”€β”€ package.json 48 +β”‚ └── package.json
42 -β”‚ └── yarn.lock
43 β”‚ 49 β”‚
44 β”œβ”€β”€ .gitignore 50 β”œβ”€β”€ .gitignore
45 β”œβ”€β”€ LICENSE ---> MIT License 51 β”œβ”€β”€ LICENSE ---> MIT License
46 β”œβ”€β”€ package-lock.json 52 β”œβ”€β”€ package-lock.json
47 β”œβ”€β”€ package.json 53 β”œβ”€β”€ package.json
48 β”œβ”€β”€ README.md 54 β”œβ”€β”€ README.md
49 -β”œβ”€β”€ server.js ---> Back-end [Node Express] 55 +└── server.js ---> Back-end [Node.js Express]
50 -└── yarn.lock
51 ``` 56 ```
52 57
58 +## :keyboard: μ„€μΉ˜ 방법
59 +#### ☝️ React & Express μ„œλ²„ λ™μ‹œ ꡬ동 (Local Server둜 λ™μž‘)
60 +
61 +##### client 폴더 이동
62 +`$ cd Teleprompter-STT/client`
63 +
64 +##### React에 ν•„μš”ν•œ λͺ¨λ“ˆ μ„€μΉ˜
65 +`$ npm install`
66 +
67 +##### Teleprompter-STT 폴더 이동
68 +`$ cd ..`
53 69
70 +##### Node.js에 ν•„μš”ν•œ λͺ¨λ“ˆ μ„€μΉ˜
71 +`$ npm install`
54 72
55 -## ⌨️ μ„€μΉ˜ 방법 73 +##### React & Express μ„œλ²„ λ™μ‹œ μ‹œμž‘
74 +`$ npm run dev`
56 75
76 +<br>
77 +#### ✌️ Express μ„œλ²„λ‘œλ§Œ ꡬ동 (Heroku둜 배포 κ°€λŠ₯)
57 78
58 -#### client 폴더 이동 79 +##### client 폴더 이동
59 -`$ cd Teleprompter-SST/client` 80 +`$ cd Teleprompter-STT/client`
60 81
61 -#### package.json에 λͺ…μ‹œλœ λͺ¨λ“ˆ μ„€μΉ˜ 82 +##### React에 ν•„μš”ν•œ λͺ¨λ“ˆ μ„€μΉ˜
62 `$ npm install` 83 `$ npm install`
63 84
64 -#### Teleprompter-SST 폴더 이동 85 +##### Build File 생성
86 +`$ npm run build`
87 +
88 +##### Teleprompter-STT 폴더 이동
65 `$ cd ..` 89 `$ cd ..`
66 -#### package.json에 λͺ…μ‹œλœ λͺ¨λ“ˆ μ„€μΉ˜ 90 +
91 +##### Node.js에 ν•„μš”ν•œ λͺ¨λ“ˆ μ„€μΉ˜
67 `$ npm install` 92 `$ npm install`
68 93
69 -#### μ‹œμž‘ 94 +##### Express μ„œλ²„ μ‹œμž‘
70 `$ npm run server` 95 `$ npm run server`
71 96
72 -#### Local Address 접속
73 -`http://localhost:3000`
74 97
75 - 98 +## πŸ‘₯ νŒ€μ›
76 -## πŸ§‘β€πŸ’» νŒ€μ›
77 - κΆŒλ™μ˜ (2016110307) 99 - κΆŒλ™μ˜ (2016110307)
78 - 김닀솔 (2017110268) 100 - 김닀솔 (2017110268)
79 101
80 102
103 +
81 ## πŸ“‹ Reference 104 ## πŸ“‹ Reference
82 - [**Web Speech API**](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API) 105 - [**Web Speech API**](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API)
83 -- [**String-Similarity API**](https://www.npmjs.com/package/string-similarity) 106 +- [**string-similarity API**](https://www.npmjs.com/package/string-similarity)
107 +- [**Material-Ui**](https://material-ui.com/)
108 +
84 109
85 110
86 ## πŸ“‹ License 111 ## πŸ“‹ License
87 -Teleprompter-SST is [MIT licensed](./LICENSE).
...\ No newline at end of file ...\ No newline at end of file
112 +Teleprompter-STT is [MIT licensed](./LICENSE).
113 +
114 +<br>
115 +[πŸ‘†Back To The Top](#teleprompter-stt)
...\ No newline at end of file ...\ No newline at end of file
......
1 { 1 {
2 - "name": "teleprompter-frontend", 2 + "name": "teleprompter-stt-frontend",
3 - "version": "0.1.0", 3 + "version": "1.0.0",
4 "lockfileVersion": 1, 4 "lockfileVersion": 1,
5 "requires": true, 5 "requires": true,
6 "dependencies": { 6 "dependencies": {
......
1 { 1 {
2 - "name": "teleprompter-frontend", 2 + "name": "teleprompter-stt-frontend",
3 - "version": "0.1.0", 3 + "version": "1.0.0",
4 "private": true, 4 "private": true,
5 "dependencies": { 5 "dependencies": {
6 "@material-ui/core": "^4.11.0", 6 "@material-ui/core": "^4.11.0",
......
...@@ -9,7 +9,7 @@ class App extends Component { ...@@ -9,7 +9,7 @@ class App extends Component {
9 return ( 9 return (
10 <> 10 <>
11 <Route path="/" component={MainPage} exact={true} /> 11 <Route path="/" component={MainPage} exact={true} />
12 - <Route path="/prompter:script" component={PrompterPage} exact={true} /> 12 + <Route path="/prompter" component={PrompterPage} exact={true} />
13 </> 13 </>
14 ); 14 );
15 } 15 }
......
1 -@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); 1 +@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
2 2
3 body { 3 body {
4 margin: 0; 4 margin: 0;
......
...@@ -70,7 +70,7 @@ class MainPage extends Component { ...@@ -70,7 +70,7 @@ class MainPage extends Component {
70 this.setState({ 70 this.setState({
71 script: '' 71 script: ''
72 }) 72 })
73 - this.props.history.push(`/prompter:${this.script}`); 73 + this.props.history.push('/prompter');
74 } 74 }
75 75
76 // Send script to Server 76 // Send script to Server
......
1 -import React, { Fragment } from 'react'; 1 +import React, { Fragment, useEffect } from 'react';
2 import axios from 'axios' 2 import axios from 'axios'
3 import { withStyles, Button} from '@material-ui/core'; 3 import { withStyles, Button} from '@material-ui/core';
4 import { 4 import {
...@@ -21,7 +21,8 @@ function PrompterPage({match}) { ...@@ -21,7 +21,8 @@ function PrompterPage({match}) {
21 const [progress, setProgress] = React.useState(0); 21 const [progress, setProgress] = React.useState(0);
22 22
23 // Serverλ‘œλΆ€ν„° Script λ°›μ•„μ˜΄ 23 // Serverλ‘œλΆ€ν„° Script λ°›μ•„μ˜΄
24 - axios.get(`api/${match.params["script"].slice(1)}`) 24 + useEffect(() => {
25 + axios.get('api/script')
25 .then(res => { // .then : 응닡(μƒνƒœμ½”λ“œ200~300미만)μ„±κ³΅μ‹œ 26 .then(res => { // .then : 응닡(μƒνƒœμ½”λ“œ200~300미만)μ„±κ³΅μ‹œ
26 console.log(res.data); 27 console.log(res.data);
27 setWords(res.data.split(" ")); // λ°›μ•„μ˜¨ Script λ¬Έμžμ—΄ 처리 28 setWords(res.data.split(" ")); // λ°›μ•„μ˜¨ Script λ¬Έμžμ—΄ 처리
...@@ -29,6 +30,7 @@ function PrompterPage({match}) { ...@@ -29,6 +30,7 @@ function PrompterPage({match}) {
29 .catch(error => { 30 .catch(error => {
30 console.log(error); 31 console.log(error);
31 }); 32 });
33 + }, [match.params]);
32 34
33 const handleListening = () => { 35 const handleListening = () => {
34 if (listening) { 36 if (listening) {
......
This diff is collapsed. Click to expand it.
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
5 "main": "index.js", 5 "main": "index.js",
6 "scripts": { 6 "scripts": {
7 "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client", 7 "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client",
8 - "client": "cd client && yarn start", 8 + "client": "cd client && npm run start",
9 "server": "nodemon server.js", 9 "server": "nodemon server.js",
10 - "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"" 10 + "dev": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\""
11 }, 11 },
12 "repository": { 12 "repository": {
13 "type": "git", 13 "type": "git",
......
...@@ -13,14 +13,14 @@ let scriptReceived = ""; ...@@ -13,14 +13,14 @@ let scriptReceived = "";
13 app.get('/api/:script', (req, res) => { 13 app.get('/api/:script', (req, res) => {
14 res.send( 14 res.send(
15 scriptReceived 15 scriptReceived
16 - ) 16 + );
17 }); 17 });
18 18
19 app.post('/api/:script', (req, res) => { 19 app.post('/api/:script', (req, res) => {
20 scriptReceived = req.body.script; 20 scriptReceived = req.body.script;
21 }); 21 });
22 22
23 -app.use(express.static(path.join(__dirname, './client/build'))); // μ •μ νŒŒμΌλ‘œ 바꿔진 React[front-end]λ₯Ό Express μ„œλ²„λ‘œ μ‚¬μš©ν•˜μ—¬ 기쑴의 2개의 μ„œλ²„λ‘œ μš΄μ˜ν•˜λŠ” 것을 ν•˜λ‚˜μ˜ μ„œλ²„λ‘œ μ‚¬μš©ν•  수 μžˆλ„λ‘ ν•΄μ€Œ 23 +app.use(express.static(path.join(__dirname, './client/build'))); // μ •μ νŒŒμΌλ‘œ 바꿔진 React[front-end]λ₯Ό Express μ„œλ²„λ‘œλ§Œ μ΄μš©ν•  수 μžˆλ„λ‘ ν•΄μ€Œ
24 24
25 app.get('*', (req, res, next)=>{ 25 app.get('*', (req, res, next)=>{
26 res.sendFile(path.join(__dirname, "./client/build", "index.html")); 26 res.sendFile(path.join(__dirname, "./client/build", "index.html"));
......