Showing
12 changed files
with
76 additions
and
46 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/) | ||
84 | 108 | ||
85 | 109 | ||
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 | ... | ... |
... | @@ -17,4 +17,4 @@ | ... | @@ -17,4 +17,4 @@ |
17 | <noscript>You need to enable JavaScript to run this app.</noscript> | 17 | <noscript>You need to enable JavaScript to run this app.</noscript> |
18 | <div id="root"></div> | 18 | <div id="root"></div> |
19 | </body> | 19 | </body> |
20 | -</html> | 20 | +</html> |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -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 | } | ... | ... |
... | @@ -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,14 +21,16 @@ function PrompterPage({match}) { | ... | @@ -21,14 +21,16 @@ 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 | - .then(res => { // .then : μλ΅(μνμ½λ200~300λ―Έλ§)μ±κ³΅μ | 25 | + axios.get('api/script') |
26 | - console.log(res.data); | 26 | + .then(res => { // .then : μλ΅(μνμ½λ200~300λ―Έλ§)μ±κ³΅μ |
27 | - setWords(res.data.split(" ")); // λ°μμ¨ Script λ¬Έμμ΄ μ²λ¦¬ | 27 | + console.log(res.data); |
28 | - }) | 28 | + setWords(res.data.split(" ")); // λ°μμ¨ Script λ¬Έμμ΄ μ²λ¦¬ |
29 | - .catch(error => { | 29 | + }) |
30 | - console.log(error); | 30 | + .catch(error => { |
31 | - }); | 31 | + console.log(error); |
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")); | ... | ... |
-
Please register or login to post a comment