diff --git a/static/index.html b/static/index.html index 7ac78b8..2329432 100644 --- a/static/index.html +++ b/static/index.html @@ -15,7 +15,10 @@ -
+
+
+ +
diff --git a/static/main.css b/static/main.css index 1ea0f95..40c4ce6 100644 --- a/static/main.css +++ b/static/main.css @@ -87,13 +87,28 @@ button { background-repeat: no-repeat; background-image: url("material-icons/transcribe.svg"); } -.transcript { +.copyBtn { + width: 2.5rem; + height: 2.5rem; + background-size: 2rem; + background-image: url("material-icons/copy.svg"); +} +.transcriptContainer { margin-top: 5rem; - display: block; + display: flex; + flex-direction: column; + align-items: center; + justify-content: start; + gap: 1rem; width: 60%; height: fit-content; text-align: center; } +.transcript { + display: block; + width: 100%; + height: 100%; +} .transcript.loading { font-size: 0; background-image: url("material-icons/cycle.svg"); @@ -112,7 +127,7 @@ button { } } @media only screen and (max-width: 800px) { - .transcript { + .transcriptContainer { width: 90%; } } \ No newline at end of file diff --git a/static/main.js b/static/main.js index 2e7db58..c0b4991 100644 --- a/static/main.js +++ b/static/main.js @@ -17,6 +17,7 @@ async function api_is_online(settings) { let audioPrev = document.getElementById("audioPrev"); let transcribeBtn = document.getElementById("transcribeBtn"); let transcriptText = document.getElementById("transcript"); + let copyBtn = document.getElementById("copyBtn"); // Load Settings const settings_resp = await fetch("settings.json"); const settings = await settings_resp.json(); @@ -24,7 +25,7 @@ async function api_is_online(settings) { settings.api_url = settings.api_url.substring(0, settings.api_url.length - 1); } if (await api_is_online(settings)) { - // Recorder + // Audio Recorder let audioBlob; const recorder = new Recorder(startBtn, stopBtn, async (blob) => { audioBlob = blob; @@ -34,16 +35,22 @@ async function api_is_online(settings) { transcribeBtn.classList.remove("nodisplay"); }); recorder.init(); - // Additional handlers + // Handlers + copyBtn.addEventListener("click", () => { + navigator.clipboard.writeText(transcriptText.innerText); + }); startBtn.addEventListener("click", () => { + // Recording audioPrev.classList.add("nodisplay"); transcribeBtn.classList.add("nodisplay"); transcriptText.innerText = ""; - }) - // Transcribe + copyBtn.classList.add("nodisplay"); + }); transcribeBtn.addEventListener("click", async () => { + // Transcription transcribeBtn.disabled = true; transcriptText.classList.add("loading"); + copyBtn.classList.add("nodisplay"); const formData = new FormData(); formData.append("audio", audioBlob); let response = await fetch(settings.api_url, { @@ -52,6 +59,9 @@ async function api_is_online(settings) { }); let t = await response.text(); transcriptText.innerText = t; + if (transcriptText.innerText.length > 0) { + copyBtn.classList.remove("nodisplay"); + } transcriptText.classList.remove("loading"); transcribeBtn.disabled = false; }); diff --git a/static/material-icons/copy.svg b/static/material-icons/copy.svg new file mode 100644 index 0000000..04b4c7f --- /dev/null +++ b/static/material-icons/copy.svg @@ -0,0 +1 @@ + \ No newline at end of file