민병수 / Voicoding

Go to a project
Toggle navigation Toggle navigation pinning
민병수
f14d0fe4 1 parent 0107219e

Home layout re-locate

Inline Side-by-side
Showing 6 changed files with 38 additions and 61 deletions
......@@ -25,10 +25,12 @@ a{
.menu_bar_content li:hover{
background-color:var(--accent-color);
border-radius: 4px;
color:var(--text-color);
}
.menu_bar_icons li:hover{
background-color:var(--accent-color);
border-radius: 4px;
color:var(--text-color);
}
.menu_bar_logo{
font-size: 20px;
......@@ -37,6 +39,9 @@ a{
.menu_bar_logo i{
color:var(--accent-color);
}
.basic:hover{
color:var(--text-color);
}
.menu_bar_content{
display:flex;
list-style: none;
......@@ -54,13 +59,17 @@ a{
padding: 8px 12px;
}
.menu_toggle{
color:var(--text-color);
display: none;
position: absolute;
right:32px;
font-size: 24px;
}
.menu_toggle:hover{
color:var(--text-color);
}
@media screen and (max-width: 500px) {
.menu{
.voi_menu{
flex-direction: column;
align-items: flex-start;
padding: 8px 24px;
......@@ -82,6 +91,7 @@ a{
}
.menu_toggle{
display: block;
color:var(--text-color);
}
.menu_bar_content.active,
.menu_bar_icons.active{
......@@ -112,22 +122,32 @@ button:hover{
margin:20px;
display:flex;
align-items:center;
border: 3px solid var(--accent-color);
height:700px;
background-color:rgba(0,0,0,.87);
color:var(--text-color);
}
#recordButton{
line-height: 22px;
font-size:50px;
}
#transcribeButton{
line-height: 22px;
font-size:50px;
}
.output_bar{
display:flex;
justify-content:center;
color:black;
border: 3px solid var(--accent-color);
margin: 20px;
font-size:100px;
}
.ttp{
.basic{
color:var(--text-color);
font-size:20px;
}
.fas.fa-arrow-circle-down{
color:var(--background-color);
font-size:70px;
display:block;
text-align:center;
}
\ No newline at end of file
......
......@@ -7,11 +7,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Voicoding</title>
<script defer src="https://kit.fontawesome.com/a5f26fa106.js" crossorigin="anonymous"></script>
<script defer src="menu.js" defer></script>
<script defer src="menu.js"></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 defer src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>
<script defer defer src="client.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,
......@@ -72,16 +72,16 @@
<nav class="voi_menu">
<div class="menu_bar_logo">
<i class="fas fa-microphone-alt"></i>
<a href="Voico_Home.html">Voicoding</a>
<a class = "basic" href="Voico_Menu.html">Voicoding</a>
</div>
<ul class="menu_bar_content">
<a href="Voico_Home.html"><li>Home</li></a>
<a href="\Manual.txt"><li>Manual</li></a>
<a href="Voico_Info.html"><li>info</li></a>
<a class = "basic" href="Voico_Home.html"><li>Home</li></a>
<a class = "basic" href="\Manual.txt"><li>Manual</li></a>
<a class = "basic" href="Voico_Info.html"><li>Info</li></a>
</ul>
<ul class="menu_bar_icons">
<li><a = href="https://www.instagram.com/waterinbottle48/"><i class="fab fa-instagram"></i></a></li>
<li><a = href="http://khuhub.khu.ac.kr/2019102168/Voicoding"><i class="fab fa-github"></i></a></li>
<li><a class = "basic" href="https://www.instagram.com/waterinbottle48/"><i class="fab fa-instagram"></i></a></li>
<li><a class = "basic" href="http://khuhub.khu.ac.kr/2019102168/Voicoding"><i class="fab fa-github"></i></a></li>
</ul>
<a href="#" class="menu_toggle"><i class="fas fa-bars"></i></a>
</nav>
......@@ -90,11 +90,12 @@
<button id="transcribeButton" disabled>To text</button>
</div>
<div class="output_bar">
<h3>Transcription Raw Data</h3>
<h2>Transcription Raw Data</h2>
</div>
<div id="output"></div>
<i class="fas fa-arrow-circle-down"></i>
<div class="output_bar">
<h3>TTP</h3>
<h2>TTP</h2>
</div>
<div id="site-navigation" class="ui small inverted menu" style="margin:20px 20px 0px 20px;">
<div id="site-header" class="header item">
......
body {
background: url(/images/judge0_background.png) no-repeat center center fixed;
-webkit-background-size: cover;
......
......@@ -473,7 +473,6 @@ function updateScreenElements() {
$(window).resize(function() {
layout.updateSize();
console.log(`${layout.height}, ${layout.width}`);
updateScreenElements();
showMessages();
});
......@@ -583,7 +582,7 @@ $(document).ready(function () {
theme: "vs-dark",
scrollBeyondLastLine: true,
readOnly: state.readOnly,
language: "cpp",
language: "python",
minimap: {
enabled: false
}
......
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
......@@ -3,7 +3,7 @@ const multer = require('multer');
const fs = require('fs');
const upload = multer();
const app = express();
const port = 5501;
const port = 5500;
app.use(express.static('Voicoding_web'));
app.use(express.static('./'));
async function testGoogleTextToSpeech(audioBuffer) {
......