small fix with bugs

2025-01-25 11:12:43 -05:00
parent 6875f060ea
commit 24f6d7a4df
5 changed files with 66 additions and 73 deletions
--- a/src/app/(web)/transcribe/layout.tsx
+++ b/src/app/(web)/transcribe/layout.tsx
@@ -0,0 +1,16 @@
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
--- a/src/app/(web)/transcribe/page.tsx
+++ b/src/app/(web)/transcribe/page.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import React, { useState } from "react";
+import axios from "axios";
+
+const AudioTranscriber: React.FC = () => {
+	const [file, setFile] = useState<File | null>(null);
+	const [transcription, setTranscription] = useState<string | null>(null);
+	const [loading, setLoading] = useState(false);
+
+	const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		if (event.target.files && event.target.files.length > 0) {
+			setFile(event.target.files[0]);
+		}
+	};
+
+	const handleTranscription = async () => {
+		if (!file) return alert("Please select an audio file to transcribe!");
+
+		const formData = new FormData();
+		formData.append("file", file);
+
+		setLoading(true);
+		try {
+			const response = await axios.post("http://localhost:8000/transcribe", formData, {
+				headers: {
+					"Content-Type": "multipart/form-data",
+				},
+			});
+			setTranscription(response.data.transcription);
+		} catch (error) {
+			console.error("Error transcribing audio:", error);
+			alert("Failed to transcribe audio. Please try again.");
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	return (
+		<div>
+			<h1>Audio Transcription</h1>
+			<input type="file" accept="audio/*" onChange={handleFileChange} />
+			<button onClick={handleTranscription} disabled={loading}>
+				{loading ? "Transcribing..." : "Transcribe"}
+			</button>
+			{transcription && (
+				<div>
+					<h2>Transcription:</h2>
+					<p>{transcription}</p>
+				</div>
+			)}
+		</div>
+	);
+};
+
+export default AudioTranscriber;