UI Update

src/app/(web)/transcribe/page.tsx

@@ -1,9 +1,20 @@
 "use client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 //import Hero1 from '@/components/Hero1'
 //IMPORT THE HERO1 FUNCTION TO MAKE THE TRANSCRIBE PAGE LOOK BETTER
 import React, { useState, useRef } from "react";
 // import axios from "axios";
 
+import { AlertCircle } from "lucide-react"
+
+import {
+	Alert,
+	AlertDescription,
+	AlertTitle,
+} from "@/components/ui/alert"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 const AudioTranscriber: React.FC = () => {
 	const [file, setFile] = useState<File | null>(null);
 	const [transcription, setTranscription] = useState<string | null>(null);
@@ -32,7 +43,6 @@ const AudioTranscriber: React.FC = () => {
 
 		const formData = new FormData();
 		formData.append("file", audioFile);
-    console.log(audioFile);
 		setLoading(true);
 		setError(null); // Clear previous errors
 		try {
@@ -44,8 +54,9 @@ const AudioTranscriber: React.FC = () => {
 				}
 			})
 
+			console.log("! response:", response);
 			response = await response.json();
-      console.log("Transcription response:", response);
+			console.log("@ response:", response);
 
 			// if (response.data && response.data.transcription) {
 			//   setTranscription(response.data.transcription);
@@ -107,49 +118,56 @@ const AudioTranscriber: React.FC = () => {
 	};
 
 	return (
-    <div>
-      <h1>
+		<section className="mx-auto my-auto bg-white dark:bg-neutral-950 h-screen w-1/2">
+			<h1 className="text-4xl font-bold text-center mb-8">
 				<center>
 					Audio Transcription
 				</center>
 			</h1>
+			<br />
 			<div>
 				<h2>Upload or Record Audio</h2>
 
-        <input type="file" accept="audio/*" onChange={handleFileChange} />
-        <button onClick={() => file && handleTranscription(file)} disabled={loading || !file}>
+				<Input type="file" accept="audio/*" onChange={handleFileChange} />
+				<Button className="my-4" onClick={() => file && handleTranscription(file)} disabled={loading || !file}>
 					{loading ? "Transcribing..." : "Transcribe"}
-        </button>
+				</Button>
 			</div>
 
 			<div>
 				<h2>Record Audio</h2>
 				{!recording ? (
-          <button onClick={startRecording}>Start Recording</button>
+					<Button onClick={startRecording}>Start Recording</Button>
 				) : (
-          <button onClick={stopRecording} disabled={!recording}>
-            Stop Recording
-          </button>
+					<Button onClick={stopRecording} disabled={!recording}>Stop Recording</Button>
 				)}
 			</div>
 
-      <div>
-        <h2>Transcription:</h2>
-        {loading ? (
-          <p>Processing transcription...</p>
-        ) : transcription ? (
-          <p>{transcription}</p>
-        ) : (
-          <p>No transcription available yet.</p>
-        )}
-      </div>
+			<Card className="mt-4 bg-neutral-200 dark:bg-neutral-800">
+				<CardHeader>
+					<CardTitle>Transcription Result</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<CardContent>
+						{loading
+							? "Processing transcription..."
+							: transcription
+								? "Your transcription is ready"
+								: "No transcription available yet"}
+					</CardContent>
+				</CardContent>
+			</Card>
 
 			{error && (
-        <div style={{ color: "red" }}>
+				<Alert variant="destructive">
+					<AlertCircle className="h-4 w-4" />
+					<AlertTitle>Error</AlertTitle>
+					<AlertDescription>
 						<strong>Error:</strong> {error}
-        </div>
+					</AlertDescription>
+				</Alert>
 			)}
-    </div>
+		</section>
 	);
 };