천현우 / 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 @@
--text-color:#fffde7;
--background-color:#ff94c2;
--accent-color:#ba2d65;
--output-color:#ff7043;
--output-accent-color:#c63f17;
}
body{
......@@ -87,25 +89,45 @@ a{
}
}
button{
background-color:#60ad5e;
background-color:var(--output-color);
border:none;
color:var(--text-color);
font-size:50px;
padding:12px 24px 24px 24px;
padding: 24px;
border-radius: 4px;
}
button:hover{
background-color:#005005;
background-color:var(--output-accent-color);
border-radius: 4px;
}
.controls{
padding:12px 24px;
height:70px;
font-size:100px;
display:flex;
justify-content:space-around;
border-radius:4px;
margin: 23px;
}
#output{
width:50%;
margin-left:20px;
display:flex;
border: 3px solid var(--accent-color);
height:700px;
}
#recordButton{
line-height: 22px;
}
#transcribeButton{
line-height: 22px;
}
.output_bar{
display:flex;
justify-content:space-around;
color:black;
border: 3px solid var(--accent-color);
margin: 20px;
}
.ttp{
}
\ No newline at end of file
......
......@@ -10,6 +10,65 @@
<script src="menu.js" defer></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
<script src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>
<script defer src="client.js"></script>
<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.">
<meta name="keywords" content="online editor, online code editor, online ide, online compiler, online interpreter, run code online, learn programming online,
online debugger, programming in browser, online code runner, online code execution, debug online, debug C code online, debug C++ code online,
programming online, snippet, snippets, code snippet, code snippets, pastebin, execute code, programming in browser, run c online, run C++ online,
run java online, run python online, run ruby online, run c# online, run rust online, run pascal online, run basic online">
<meta property="og:title" content="Judge0 IDE - Free and open-source online code editor">
<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.">
<meta property="og:image" content="https://raw.githubusercontent.com/judge0/ide/master/.github/wallpaper.png">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.9/goldenlayout.min.js" integrity="sha256-NhJAZDfGgv4PiB+GVlSrPdh3uc75XXYSM4su8hgTchI=" crossorigin="anonymous"></script>
<script>
var require = {
paths: {
"vs": "https://unpkg.com/monaco-editor/min/vs",
"monaco-vim": "https://unpkg.com/monaco-vim/dist/monaco-vim",
"monaco-emacs": "https://unpkg.com/monaco-emacs/dist/monaco-emacs"
}
};
</script>
<script src="https://unpkg.com/monaco-editor/min/vs/loader.js"></script>
<script src="https://unpkg.com/monaco-editor@0.23.0/min/vs/editor/editor.main.nls.js"></script>
<script src="https://unpkg.com/monaco-editor@0.23.0/min/vs/editor/editor.main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha256-t8GepnyPmw9t+foMh3mKNvcorqNHamSKtKRxxpUEgFI=" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
<script type="text/javascript" src="third_party/download.js"></script>
<script type="text/javascript" src="js/ide.js" defer></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha256-9mbkOfVho3ZPXfM7W8sV2SndrGDuh7wuyLjtsWeTI1Q=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha256-t8GepnyPmw9t+foMh3mKNvcorqNHamSKtKRxxpUEgFI=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.9/goldenlayout.min.js" integrity="sha256-NhJAZDfGgv4PiB+GVlSrPdh3uc75XXYSM4su8hgTchI=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.9/css/goldenlayout-base.css" integrity="sha256-oIDR18yKFZtfjCJfDsJYpTBv1S9QmxYopeqw2dO96xM=" crossorigin="anonymous" />
<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" />
<script>
var require = {
paths: {
"vs": "https://unpkg.com/monaco-editor/min/vs",
"monaco-vim": "https://unpkg.com/monaco-vim/dist/monaco-vim",
"monaco-emacs": "https://unpkg.com/monaco-emacs/dist/monaco-emacs"
}
};
</script>
<script src="https://unpkg.com/monaco-editor/min/vs/loader.js"></script>
<script src="https://unpkg.com/monaco-editor@0.23.0/min/vs/editor/editor.main.nls.js"></script>
<script src="https://unpkg.com/monaco-editor@0.23.0/min/vs/editor/editor.main.js"></script>
</head>
<body>
<nav class="menu">
......@@ -32,8 +91,17 @@
<button id="recordButton">Speech</button>
<button id="transcribeButton" disabled>To text</button>
</div>
<div class="output_bar">
<h3>Transcription Raw Data</h3>
<h3 style= "width:174.462px; text-align:center">TTP</h3>
</div>
<div id="output"></div>
<script src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>
<script src="\client.js"></script>
<div class="ttp">
<div class="item no-left-padding borderless">
<button id="run-btn" class="ui primary labeled icon button"><i class="play icon"></i>Run (F9)</button>
</div>
<div id="site-content"></div>
</div>
</body>
</html>
\ No newline at end of file
......
let rec = null;
let audioStream = null;
const recordButton = document.getElementById("recordButton");
const transcribeButton = document.getElementById("transcribeButton");
recordButton.addEventListener("click", startRecording);
transcribeButton.addEventListener("click", transcribeText);
let cnt = 0;
function startRecording() {
let constraints = { audio: true, video:false }
recordButton.disabled = true;
transcribeButton.disabled = false;
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
const audioContext = new window.AudioContext();
audioStream = stream;
const input = audioContext.createMediaStreamSource(stream);
rec = new Recorder(input, { numChannels:1 })
rec.record()
}).catch(function(err) {
recordButton.disabled = false;
transcribeButton.disabled = true;
});
}
function transcribeText() {
transcribeButton.disabled = true;
recordButton.disabled = false;
rec.stop();
audioStream.getAudioTracks()[0].stop();
rec.exportWAV(uploadSoundData);
}
function uploadSoundData(blob) {
let filename = new Date().toISOString();
let xhr = new XMLHttpRequest();
let formData = new FormData();
xhr.onload = function(e) {
if(this.readyState === 4) {
document.getElementById("output").innerHTML += `${cnt++}: ${JSON.parse(e.target.responseText)}<br>`;
}
};
formData.append("audio_data", blob, filename);
xhr.open("POST", "/upload_sound", true);
xhr.send(formData);
}
\ No newline at end of file
body {
background: url(/images/judge0_background.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.ui[class*="left action"].input>.dropdown {
border-radius: 0 .28571429rem .28571429rem 0;
}
.ui.selection.dropdown {
width: 205px;
}
.lm_header .lm_tab {
padding-bottom: 3px;
height: 16px;
font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback";
font-size: 14px;
}
.lm_header .lm_tab.lm_active {
box-shadow: none;
padding-bottom: 3px;
}
#site-navigation {
border-radius: 0;
margin: 0;
background: #1e1e1e;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
height: 45px;
}
#navigation-message {
font-size: 1.2em;
white-space: nowrap;
overflow: hidden;
}
@keyframes slide {
0% { transform: translateX(570px); }
100% { transform: translateX(-100%); }
}
@-webkit-keyframes slide {
0% { transform: translateX(570px); }
100% { transform: translateX(-100%); }
}
.navigation-message-text {
white-space: nowrap;
-moz-animation: slide 60s linear infinite;
-webkit-animation: slide 60s linear infinite;
animation: slide 60s linear infinite;
}
.navigation-message-text:hover {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
#navigation-message a {
color: #41a5f1;
font-weight: bold;
}
#site-icon {
width: 30px;
height: 30px;
vertical-align: middle;
}
#site-header {
padding-left: 0;
padding-top: 0;
padding-bottom: 0;
}
#site-header h2 {
display: inline;
vertical-align: middle;
font-family: 'Exo 2', sans-serif;
}
#site-content {
height: calc(100% - 45px - 19px);
}
#site-modal .header {
color: #db2828;
}
#site-footer, #status-line, #donate-line {
background-color: #0E6EB8;
bottom: 0;
font-family: "Droid Sans Mono", monospace, monospace, "Droid Sans Fallback";
font-size: 13px;
height: 19px;
padding-left: 16px;
padding-right: 16px;
position: fixed;
}
#site-footer {
color: #41a5f1;
left: 0;
text-align: center;
width: 100%;
}
#site-footer a {
color: #41a5f1;
font-weight: bold;
}
#site-footer a:hover {
color: #a0d2f8;
}
#donate-line {
float: left;
left: 0;
text-align: left;
width: fit-content;
}
#status-line {
color: #fff;
float: right;
right: 0;
text-align: right;
width: fit-content;
}
#editor-status-line {
background: transparent;
color: #fff;
font-family: monospace;
height: 19px;
padding: 0px 16px;
width: inherit;
}
#editor-status-line input[type=text] {
background: transparent;
border: none;
color: #fff;
font-family: monospace;
outline: none;
}
#editor-status-line input[type=text]::selection {
background-color: #cce2ff;
color: #fff;
}
.blink {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
background: #FFD700;
}
}
.dot {
background: #0E6EB8;
position: absolute;
border-radius: 50px;
width: 5px;
height: 5px;
right: 7.5px;
top: 7.5px;
}
.no-left-padding {
padding-left: 0 !important;
}
input[type="text"] {
width: 205px !important;
}
\ No newline at end of file
This diff is collapsed. Click to expand it.
{
"lockfileVersion": 1
}
......@@ -4,6 +4,7 @@ const recordButton = document.getElementById("recordButton");
const transcribeButton = document.getElementById("transcribeButton");
recordButton.addEventListener("click", startRecording);
transcribeButton.addEventListener("click", transcribeText);
let cnt = 0;
function startRecording() {
let constraints = { audio: true, video:false }
recordButton.disabled = true;
......@@ -32,7 +33,7 @@ function uploadSoundData(blob) {
let formData = new FormData();
xhr.onload = function(e) {
if(this.readyState === 4) {
document.getElementById("output").innerHTML += '<br><br><strong>Result: </strong>' + JSON.parse(e.target.responseText);
document.getElementById("output").innerHTML += `${cnt++}: ${JSON.parse(e.target.responseText)}<br>`;
}
};
formData.append("audio_data", blob, filename);
......