Skip to content

Commit 326a84e

Browse files
author
Aleksander Grygier
committed
feat: Transcribed recordings PoC
1 parent f9de580 commit 326a84e

File tree

12 files changed

+265
-26
lines changed

12 files changed

+265
-26
lines changed

‎apps/web/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"eslint-config-prettier": "^9.1.0",
2828
"eslint-plugin-svelte": "^2.36.0",
2929
"globals": "^15.0.0",
30+
"openai": "^4.67.3",
3031
"prettier": "^3.1.1",
3132
"prettier-plugin-svelte": "^3.1.2",
3233
"svelte": "^5.0.0-next.1",

‎apps/web/src/app.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,17 @@
1212
<link rel="preload"
1313
href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap" as="style"
1414
onload="this.onload=null;this.rel='stylesheet'">
15+
<link rel="preload"
16+
href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap"
17+
as="style" onload="this.onload=null;this.rel='stylesheet'">
1518
<link rel="preload"
1619
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"
1720
as="style" onload="this.onload=null;this.rel='stylesheet'">
1821
<noscript>
1922
<link rel="stylesheet"
2023
href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap">
24+
<link rel="stylesheet"
25+
href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap">
2126
<link rel="stylesheet"
2227
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap">
2328
</noscript>

‎apps/web/src/lib/components/Button.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@
9393
}
9494
9595
.primary {
96-
--background-preset: var(--c-surface-2);
96+
--background-preset: var(--bg-surface-2);
9797
color: var(--c-text);
9898
}
9999
@@ -103,7 +103,7 @@
103103
}
104104
105105
.secondary {
106-
--background-preset: var(--c-surface-1);
106+
--background-preset: var(--bg-surface-1);
107107
color: var(--c-text);
108108
}
109109
</style>

‎apps/web/src/lib/components/ButtonPause.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
<style>
2323
button {
24-
background: var(--c-surface-1);
24+
background: var(--bg-surface-1);
2525
border: none;
2626
border-radius: 100%;
2727
color: var(--c-accent);

‎apps/web/src/lib/components/ButtonPlay.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020

2121
<style>
2222
button {
23-
background: var(--c-surface-1);
23+
background: var(--bg-surface-1);
2424
border: none;
2525
border-radius: 100%;
2626
color: var(--c-accent);

‎apps/web/src/lib/components/ButtonRecord.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020

2121
<style>
2222
button {
23-
background: var(--c-surface-1);
23+
background: var(--bg-surface-1);
2424
border: none;
2525
border-radius: 100%;
2626
color: var(--c-accent);

‎apps/web/src/lib/components/Recorder.svelte‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,10 @@
6868
6969
record.on('record-progress', (time: number) => {
7070
updateProgress(time);
71+
72+
if (time > 60000) {
73+
stopRecording();
74+
}
7175
});
7276
}
7377
@@ -154,7 +158,9 @@
154158
return;
155159
}
156160
157-
const transcription = 'Transcription text here';
161+
const transcription = await getTranscriptionFromBackend(blob);
162+
163+
console.log('Transcription:', transcription);
158164
159165
const { error: insertError } = await $page.data.supabase.from('user_recordings').insert([
160166
{
@@ -179,6 +185,28 @@
179185
}
180186
}
181187
188+
async function getTranscriptionFromBackend(audioBlob: Blob): Promise<string | null> {
189+
try {
190+
const formData = new FormData();
191+
formData.append('audio', audioBlob, 'audio.webm');
192+
193+
const response = await fetch('/api/transcribe', {
194+
method: 'POST',
195+
body: formData
196+
});
197+
198+
if (!response.ok) {
199+
throw new Error('Error in transcription request');
200+
}
201+
202+
const result = await response.text();
203+
return result;
204+
} catch (error) {
205+
console.error('Error fetching transcription:', error);
206+
return null;
207+
}
208+
}
209+
182210
function updateProgress(time: number) {
183211
const formattedTime = [
184212
Math.floor((time % 3600000) / 60000), // minutes
@@ -223,7 +251,7 @@
223251
</div>
224252

225253
<div class="recording-actions">
226-
<Button label="Save recording" onclick={saveRecording} />
254+
<Button label="Save & transcribe recording" onclick={saveRecording} />
227255

228256
<Button kind="danger" label="Delete recording" onclick={deleteRecording} />
229257
</div>

‎apps/web/src/lib/components/RecordingTile.svelte‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,14 @@
6767

6868
<div bind:this={waveformContainer}></div>
6969

70+
{#if transcription}
71+
<div class="transcription">
72+
<div class="inner">
73+
{transcription}
74+
</div>
75+
</div>
76+
{/if}
77+
7078
<div class="actions">
7179
<Button
7280
kind="primary"
@@ -87,17 +95,11 @@
8795

8896
<Button kind="danger" onclick={async () => await deleteRecording()} label="Delete" />
8997
</div>
90-
91-
{#if transcription}
92-
<div class="transcription">
93-
{transcription}
94-
</div>
95-
{/if}
9698
</div>
9799

98100
<style>
99101
.recording-tile {
100-
background: var(--c-body-dark);
102+
background: var(--bg-body-dark);
101103
color: var(--c-text);
102104
display: grid;
103105
gap: 1rem;
@@ -124,7 +126,16 @@
124126
}
125127
126128
.transcription {
127-
display: inline-flex;
128129
padding: 1rem;
130+
131+
.inner {
132+
padding: 1rem;
133+
background: var(--bg-surface-3);
134+
display: inline-flex;
135+
margin-top: 1rem;
136+
font-size: 1.25rem;
137+
font-family: 'Crimson Text', serif;
138+
color: var(--c-text);
139+
}
129140
}
130141
</style>

‎apps/web/src/lib/styles/base.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
body {
22
margin: 0;
33
color: var(--c-text);
4-
background-color: var(--c-body);
4+
background-color: var(--bg-body);
55
font-family: 'Plus Jakarta Sans', sans-serif;
66
font-optical-sizing: auto;
77
font-weight: <weight>;

‎apps/web/src/lib/styles/variables.css‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
:root {
2-
--c-body: #faf8f4;
3-
--c-surface-1: #e7e4e190;
4-
--c-surface-2: #ece4d7;
5-
--c-text: #110d0d;
6-
--c-text-light: #958d8d;
7-
--c-text: #110d0d;
2+
--bg-body: #faf8f4;
3+
--bg-error: #fb313120;
4+
--bg-surface-1: #e7e4e190;
5+
--bg-surface-2: #ece4d7;
6+
--bg-surface-3: #ece4d750;
87
--c-accent: #fe7171;
98
--c-error: #fb3131;
10-
--bg-error: #fb313120;
9+
--c-text: #110d0d;
10+
--c-text-light: #958d8d;
11+
--c-text-extra-light: #958d8d;
1112
}
1213

1314
@media (prefers-color-scheme: dark) {
1415
:root {
15-
--c-body: #1d1e1e;
16-
--c-surface-1: #e7e4e120;
17-
--c-surface-2: #ece4d720;
16+
--bg-body: #1d1e1e;
17+
--bg-surface-1: #e7e4e120;
18+
--bg-surface-2: #ece4d720;
19+
--bg-surface-3: #cccccc10;
1820
--c-text: #f5f5f5;
1921
}
2022
}

0 commit comments

Comments
 (0)