민병수 / Voicoding

Go to a project
Toggle navigation Toggle navigation pinning
민병수
f48d90c1 1 parent abd7134d

Translation

Expand all
Inline Side-by-side
Showing 7 changed files with 330 additions and 7 deletions
...@@ -2,6 +2,8 @@ ...@@ -2,6 +2,8 @@
2 --text-color:#fffde7; 2 --text-color:#fffde7;
3 --background-color:#ff94c2; 3 --background-color:#ff94c2;
4 --accent-color:#ba2d65; 4 --accent-color:#ba2d65;
5 + --output-color:#ff7043;
6 + --output-accent-color:#c63f17;
5 } 7 }
6 8
7 body{ 9 body{
...@@ -87,25 +89,45 @@ a{ ...@@ -87,25 +89,45 @@ a{
87 } 89 }
88 } 90 }
89 button{ 91 button{
90 - background-color:#60ad5e; 92 + background-color:var(--output-color);
91 border:none; 93 border:none;
92 color:var(--text-color); 94 color:var(--text-color);
93 font-size:50px; 95 font-size:50px;
94 - padding:12px 24px 24px 24px; 96 + padding: 24px;
95 border-radius: 4px; 97 border-radius: 4px;
96 } 98 }
97 button:hover{ 99 button:hover{
98 - background-color:#005005; 100 + background-color:var(--output-accent-color);
99 border-radius: 4px; 101 border-radius: 4px;
100 } 102 }
101 .controls{ 103 .controls{
102 - padding:12px 24px;
103 height:70px; 104 height:70px;
104 font-size:100px; 105 font-size:100px;
105 display:flex; 106 display:flex;
106 justify-content:space-around; 107 justify-content:space-around;
107 border-radius:4px; 108 border-radius:4px;
109 + margin: 23px;
110 +}
111 +#output{
112 + width:50%;
113 + margin-left:20px;
114 + display:flex;
115 + border: 3px solid var(--accent-color);
116 + height:700px;
108 } 117 }
109 #recordButton{ 118 #recordButton{
119 + line-height: 22px;
120 +}
121 +#transcribeButton{
122 + line-height: 22px;
123 +}
124 +.output_bar{
125 + display:flex;
126 + justify-content:space-around;
127 + color:black;
128 + border: 3px solid var(--accent-color);
129 + margin: 20px;
130 +}
131 +.ttp{
110 132
111 } 133 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -10,6 +10,65 @@ ...@@ -10,6 +10,65 @@
10 <script src="menu.js" defer></script> 10 <script src="menu.js" defer></script>
11 <link rel="preconnect" href="https://fonts.gstatic.com"> 11 <link rel="preconnect" href="https://fonts.gstatic.com">
12 <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet"> 12 <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
13 + <script src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>
14 + <script defer src="client.js"></script>
15 + <meta name="description" content="Free and open-source online code editor that allows you to write and execute code from a rich set of languages.">
16 + <meta name="keywords" content="online editor, online code editor, online ide, online compiler, online interpreter, run code online, learn programming online,
17 + online debugger, programming in browser, online code runner, online code execution, debug online, debug C code online, debug C++ code online,
18 + programming online, snippet, snippets, code snippet, code snippets, pastebin, execute code, programming in browser, run c online, run C++ online,
19 + run java online, run python online, run ruby online, run c# online, run rust online, run pascal online, run basic online">
20 +
21 +
22 + <meta property="og:title" content="Judge0 IDE - Free and open-source online code editor">
23 + <meta property="og:description" content="Free and open-source online code editor that allows you to write and execute code from a rich set of languages.">
24 + <meta property="og:image" content="https://raw.githubusercontent.com/judge0/ide/master/.github/wallpaper.png">
25 +
26 + <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
27 +
28 + <script src="https://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.9/goldenlayout.min.js" integrity="sha256-NhJAZDfGgv4PiB+GVlSrPdh3uc75XXYSM4su8hgTchI=" crossorigin="anonymous"></script>
29 +
30 +
31 + <script>
32 + var require = {
33 + paths: {
34 + "vs": "https://unpkg.com/monaco-editor/min/vs",
35 + "monaco-vim": "https://unpkg.com/monaco-vim/dist/monaco-vim",
36 + "monaco-emacs": "https://unpkg.com/monaco-emacs/dist/monaco-emacs"
37 + }
38 + };
39 + </script>
40 + <script src="https://unpkg.com/monaco-editor/min/vs/loader.js"></script>
41 + <script src="https://unpkg.com/monaco-editor@0.23.0/min/vs/editor/editor.main.nls.js"></script>
42 + <script src="https://unpkg.com/monaco-editor@0.23.0/min/vs/editor/editor.main.js"></script>
43 +
44 + <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha256-t8GepnyPmw9t+foMh3mKNvcorqNHamSKtKRxxpUEgFI=" crossorigin="anonymous"></script>
45 +
46 + <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
47 +
48 + <script type="text/javascript" src="third_party/download.js"></script>
49 +
50 + <script type="text/javascript" src="js/ide.js" defer></script>
51 +
52 + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha256-9mbkOfVho3ZPXfM7W8sV2SndrGDuh7wuyLjtsWeTI1Q=" crossorigin="anonymous" />
53 + <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha256-t8GepnyPmw9t+foMh3mKNvcorqNHamSKtKRxxpUEgFI=" crossorigin="anonymous"></script>
54 + <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
55 +
56 + <script src="https://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.9/goldenlayout.min.js" integrity="sha256-NhJAZDfGgv4PiB+GVlSrPdh3uc75XXYSM4su8hgTchI=" crossorigin="anonymous"></script>
57 + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.9/css/goldenlayout-base.css" integrity="sha256-oIDR18yKFZtfjCJfDsJYpTBv1S9QmxYopeqw2dO96xM=" crossorigin="anonymous" />
58 + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.9/css/goldenlayout-dark-theme.css" integrity="sha256-ygw8PvSDJJUGLf6Q9KIQsYR3mOmiQNlDaxMLDOx9xL0=" crossorigin="anonymous" />
59 + <script>
60 + var require = {
61 + paths: {
62 + "vs": "https://unpkg.com/monaco-editor/min/vs",
63 + "monaco-vim": "https://unpkg.com/monaco-vim/dist/monaco-vim",
64 + "monaco-emacs": "https://unpkg.com/monaco-emacs/dist/monaco-emacs"
65 + }
66 + };
67 + </script>
68 + <script src="https://unpkg.com/monaco-editor/min/vs/loader.js"></script>
69 + <script src="https://unpkg.com/monaco-editor@0.23.0/min/vs/editor/editor.main.nls.js"></script>
70 + <script src="https://unpkg.com/monaco-editor@0.23.0/min/vs/editor/editor.main.js"></script>
71 +
13 </head> 72 </head>
14 <body> 73 <body>
15 <nav class="menu"> 74 <nav class="menu">
...@@ -32,8 +91,17 @@ ...@@ -32,8 +91,17 @@
32 <button id="recordButton">Speech</button> 91 <button id="recordButton">Speech</button>
33 <button id="transcribeButton" disabled>To text</button> 92 <button id="transcribeButton" disabled>To text</button>
34 </div> 93 </div>
94 + <div class="output_bar">
95 + <h3>Transcription Raw Data</h3>
96 + <h3 style= "width:174.462px; text-align:center">TTP</h3>
97 + </div>
35 <div id="output"></div> 98 <div id="output"></div>
36 - <script src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script> 99 + <div class="ttp">
37 - <script src="\client.js"></script> 100 + <div class="item no-left-padding borderless">
101 + <button id="run-btn" class="ui primary labeled icon button"><i class="play icon"></i>Run (F9)</button>
102 + </div>
103 + <div id="site-content"></div>
104 + </div>
105 +
38 </body> 106 </body>
39 </html> 107 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 +let rec = null;
2 +let audioStream = null;
3 +const recordButton = document.getElementById("recordButton");
4 +const transcribeButton = document.getElementById("transcribeButton");
5 +recordButton.addEventListener("click", startRecording);
6 +transcribeButton.addEventListener("click", transcribeText);
7 +let cnt = 0;
8 +function startRecording() {
9 + let constraints = { audio: true, video:false }
10 + recordButton.disabled = true;
11 + transcribeButton.disabled = false;
12 + navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
13 + const audioContext = new window.AudioContext();
14 + audioStream = stream;
15 + const input = audioContext.createMediaStreamSource(stream);
16 + rec = new Recorder(input, { numChannels:1 })
17 + rec.record()
18 + }).catch(function(err) {
19 + recordButton.disabled = false;
20 + transcribeButton.disabled = true;
21 + });
22 +}
23 +function transcribeText() {
24 + transcribeButton.disabled = true;
25 + recordButton.disabled = false;
26 + rec.stop();
27 + audioStream.getAudioTracks()[0].stop();
28 + rec.exportWAV(uploadSoundData);
29 +}
30 +function uploadSoundData(blob) {
31 + let filename = new Date().toISOString();
32 + let xhr = new XMLHttpRequest();
33 + let formData = new FormData();
34 + xhr.onload = function(e) {
35 + if(this.readyState === 4) {
36 + document.getElementById("output").innerHTML += `${cnt++}: ${JSON.parse(e.target.responseText)}<br>`;
37 + }
38 + };
39 + formData.append("audio_data", blob, filename);
40 + xhr.open("POST", "/upload_sound", true);
41 + xhr.send(formData);
42 +}
...\ No newline at end of file ...\ No newline at end of file
1 +
2 +body {
3 + background: url(/images/judge0_background.png) no-repeat center center fixed;
4 + -webkit-background-size: cover;
5 + -moz-background-size: cover;
6 + -o-background-size: cover;
7 + background-size: cover;
8 +}
9 +
10 +.ui[class*="left action"].input>.dropdown {
11 + border-radius: 0 .28571429rem .28571429rem 0;
12 +}
13 +
14 +.ui.selection.dropdown {
15 + width: 205px;
16 +}
17 +
18 +.lm_header .lm_tab {
19 + padding-bottom: 3px;
20 + height: 16px;
21 + font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback";
22 + font-size: 14px;
23 +}
24 +
25 +.lm_header .lm_tab.lm_active {
26 + box-shadow: none;
27 + padding-bottom: 3px;
28 +}
29 +
30 +#site-navigation {
31 + border-radius: 0;
32 + margin: 0;
33 + background: #1e1e1e;
34 + border-bottom: 1px solid rgba(255, 255, 255, 0.08);
35 + height: 45px;
36 +}
37 +
38 +#navigation-message {
39 + font-size: 1.2em;
40 + white-space: nowrap;
41 + overflow: hidden;
42 +}
43 +
44 +@keyframes slide {
45 + 0% { transform: translateX(570px); }
46 + 100% { transform: translateX(-100%); }
47 +}
48 +@-webkit-keyframes slide {
49 + 0% { transform: translateX(570px); }
50 + 100% { transform: translateX(-100%); }
51 +}
52 +
53 +.navigation-message-text {
54 + white-space: nowrap;
55 + -moz-animation: slide 60s linear infinite;
56 + -webkit-animation: slide 60s linear infinite;
57 + animation: slide 60s linear infinite;
58 +}
59 +
60 +.navigation-message-text:hover {
61 + -moz-animation-play-state: paused;
62 + -webkit-animation-play-state: paused;
63 + animation-play-state: paused;
64 +}
65 +
66 +#navigation-message a {
67 + color: #41a5f1;
68 + font-weight: bold;
69 +}
70 +
71 +#site-icon {
72 + width: 30px;
73 + height: 30px;
74 + vertical-align: middle;
75 +}
76 +
77 +#site-header {
78 + padding-left: 0;
79 + padding-top: 0;
80 + padding-bottom: 0;
81 +}
82 +
83 +#site-header h2 {
84 + display: inline;
85 + vertical-align: middle;
86 + font-family: 'Exo 2', sans-serif;
87 +}
88 +
89 +#site-content {
90 + height: calc(100% - 45px - 19px);
91 +}
92 +
93 +#site-modal .header {
94 + color: #db2828;
95 +}
96 +
97 +#site-footer, #status-line, #donate-line {
98 + background-color: #0E6EB8;
99 + bottom: 0;
100 + font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback";
101 + font-size: 13px;
102 + height: 19px;
103 + padding-left: 16px;
104 + padding-right: 16px;
105 + position: fixed;
106 +}
107 +
108 +#site-footer {
109 + color: #41a5f1;
110 + left: 0;
111 + text-align: center;
112 + width: 100%;
113 +}
114 +
115 +#site-footer a {
116 + color: #41a5f1;
117 + font-weight: bold;
118 +}
119 +
120 +#site-footer a:hover {
121 + color: #a0d2f8;
122 +}
123 +
124 +#donate-line {
125 + float: left;
126 + left: 0;
127 + text-align: left;
128 + width: fit-content;
129 +}
130 +
131 +#status-line {
132 + color: #fff;
133 + float: right;
134 + right: 0;
135 + text-align: right;
136 + width: fit-content;
137 +}
138 +
139 +#editor-status-line {
140 + background: transparent;
141 + color: #fff;
142 + font-family: monospace;
143 + height: 19px;
144 + padding: 0px 16px;
145 + width: inherit;
146 +}
147 +
148 +#editor-status-line input[type=text] {
149 + background: transparent;
150 + border: none;
151 + color: #fff;
152 + font-family: monospace;
153 + outline: none;
154 +}
155 +
156 +#editor-status-line input[type=text]::selection {
157 + background-color: #cce2ff;
158 + color: #fff;
159 +}
160 +
161 +.blink {
162 + animation: blinker 1s linear infinite;
163 +}
164 +
165 +@keyframes blinker {
166 + 50% {
167 + background: #FFD700;
168 + }
169 +}
170 +
171 +.dot {
172 + background: #0E6EB8;
173 + position: absolute;
174 + border-radius: 50px;
175 + width: 5px;
176 + height: 5px;
177 + right: 7.5px;
178 + top: 7.5px;
179 +}
180 +
181 +.no-left-padding {
182 + padding-left: 0 !important;
183 +}
184 +
185 +input[type="text"] {
186 + width: 205px !important;
187 +}
...\ No newline at end of file ...\ No newline at end of file
This diff is collapsed. Click to expand it.
1 +{
2 + "lockfileVersion": 1
3 +}
...@@ -4,6 +4,7 @@ const recordButton = document.getElementById("recordButton"); ...@@ -4,6 +4,7 @@ const recordButton = document.getElementById("recordButton");
4 const transcribeButton = document.getElementById("transcribeButton"); 4 const transcribeButton = document.getElementById("transcribeButton");
5 recordButton.addEventListener("click", startRecording); 5 recordButton.addEventListener("click", startRecording);
6 transcribeButton.addEventListener("click", transcribeText); 6 transcribeButton.addEventListener("click", transcribeText);
7 +let cnt = 0;
7 function startRecording() { 8 function startRecording() {
8 let constraints = { audio: true, video:false } 9 let constraints = { audio: true, video:false }
9 recordButton.disabled = true; 10 recordButton.disabled = true;
...@@ -32,7 +33,7 @@ function uploadSoundData(blob) { ...@@ -32,7 +33,7 @@ function uploadSoundData(blob) {
32 let formData = new FormData(); 33 let formData = new FormData();
33 xhr.onload = function(e) { 34 xhr.onload = function(e) {
34 if(this.readyState === 4) { 35 if(this.readyState === 4) {
35 - document.getElementById("output").innerHTML += '<br><br><strong>Result: </strong>' + JSON.parse(e.target.responseText); 36 + document.getElementById("output").innerHTML += `${cnt++}: ${JSON.parse(e.target.responseText)}<br>`;
36 } 37 }
37 }; 38 };
38 formData.append("audio_data", blob, filename); 39 formData.append("audio_data", blob, filename);
......