slipnote.app
Built for people who think better out loud.
frontend: Add transcribe demo page and proxy-friendly endpoint
isaaccorbrey.com
+1
-25
frontend/src/components/MicRecorderBackendDemo.svelte
+1
-25
frontend/src/components/MicRecorderBackendDemo.svelte
···
1
1
<script lang="ts">
2
-
import Input from "./Input.svelte";
3
2
import MicRecorder from "./MicRecorder.svelte";
4
3
import Textarea from "./Textarea.svelte";
5
4
import { transcribeWithBackend } from "../lib/transcriptionClient";
···
8
7
blob: Blob;
9
8
};
10
9
11
-
let endpointUrl = $state("http://localhost:3001/api/transcribe");
12
10
let transcript = $state("");
13
11
let isTranscribing = $state(false);
14
12
let errorMessage = $state("");
···
16
14
let activeRequestId = 0;
17
15
18
16
async function transcribeAudio(blob: Blob) {
19
-
const trimmedEndpoint = endpointUrl.trim();
20
-
if (!trimmedEndpoint) {
21
-
errorMessage = "Enter a backend endpoint before recording.";
22
-
statusMessage = "Missing backend endpoint.";
23
-
return;
24
-
}
25
-
26
17
const requestId = ++activeRequestId;
27
18
isTranscribing = true;
28
19
errorMessage = "";
···
30
21
31
22
try {
32
23
const payload = await transcribeWithBackend({
33
-
endpointUrl: trimmedEndpoint,
24
+
endpointUrl: "/api/transcribe",
34
25
blob,
35
26
});
36
27
if (requestId !== activeRequestId) return;
···
62
53
<p class="text-sm font-base text-slate-700">
63
54
Requires a backend transcription endpoint and configured OpenAI credentials.
64
55
</p>
65
-
66
-
<label class="block text-sm font-base text-slate-900">
67
-
Backend endpoint
68
-
<Input
69
-
type="text"
70
-
autocomplete="off"
71
-
spellcheck={false}
72
-
value={endpointUrl}
73
-
oninput={(event) => {
74
-
endpointUrl = (event.currentTarget as HTMLInputElement).value;
75
-
}}
76
-
placeholder="http://localhost:3001/api/transcribe"
77
-
class="mt-1 w-full"
78
-
/>
79
-
</label>
80
56
81
57
<Textarea
82
58
rows={6}
+26
frontend/src/pages/transcribe.astro
+26
frontend/src/pages/transcribe.astro
···
1
+
---
2
+
import '../styles/global.css';
3
+
import MicRecorderBackendDemo from '../components/MicRecorderBackendDemo.svelte';
4
+
---
5
+
6
+
<html lang="en">
7
+
<head>
8
+
<meta charset="utf-8" />
9
+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
10
+
<link rel="icon" href="/favicon.ico" />
11
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
12
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
13
+
<link
14
+
href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&family=Playwrite+AT:ital,wght@0,100..400;1,100..400&display=swap"
15
+
rel="stylesheet"
16
+
/>
17
+
<meta name="viewport" content="width=device-width" />
18
+
<meta name="generator" content={Astro.generator} />
19
+
<title>Transcribe</title>
20
+
</head>
21
+
<body class="min-h-screen bg-slate-50 text-slate-900">
22
+
<main class="mx-auto flex min-h-screen max-w-3xl items-center px-6 py-16">
23
+
<MicRecorderBackendDemo client:load />
24
+
</main>
25
+
</body>
26
+
</html>