Hackathons/HoyaHax2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI Update

Browse Source
This commit is contained in:
Sir Blob
2025-01-26 05:50:08 -05:00
parent 6fbd80c3fb
commit f705390c3f
1 changed files with 293 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/app/(web)/transcribe/page.tsx
View File

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