From fe2cde9df0412eda70de89d3848c1337c12a1946 Mon Sep 17 00:00:00 2001 From: "suraj.shenoy.b@gmail.com" Date: Sun, 26 Jan 2025 04:20:42 -0600 Subject: [PATCH 1/5] update --- src/app/(web)/transcribe/page.tsx | 28 +++++++++++----------------- tsconfig.json | 3 ++- 2 files changed, 13 insertions(+), 18 deletions(-) diff --git a/src/app/(web)/transcribe/page.tsx b/src/app/(web)/transcribe/page.tsx index 7358505..e18af8a 100644 --- a/src/app/(web)/transcribe/page.tsx +++ b/src/app/(web)/transcribe/page.tsx @@ -2,7 +2,7 @@ //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 axios from "axios"; const AudioTranscriber: React.FC = () => { const [file, setFile] = useState(null); @@ -32,27 +32,20 @@ const AudioTranscriber: React.FC = () => { const formData = new FormData(); formData.append("file", audioFile); - console.log(audioFile); + setLoading(true); setError(null); // Clear previous errors try { - let response = await fetch("/api/transcribe", { - method: "POST", - body: formData, - headers: { - "Content-Type": "multipart/form-data", - } - }) + const response = await axios.post("/api/transcribe", formData); - response = await response.json(); - console.log("Transcription response:", response); + console.log("Transcription response:", response.data); - // if (response.data && response.data.transcription) { - // setTranscription(response.data.transcription); - // } else { - // setError("Unexpected response format. Check backend API."); - // console.error("Invalid response format:", response.data); - // } + if (response.data && response.data.transcription) { + setTranscription(response.data.transcription); + } else { + setError("Unexpected response format. Check backend API."); + console.error("Invalid response format:", response.data); + } } catch (error) { console.error("Error transcribing audio:", error); setError("Failed to transcribe audio. Please try again."); @@ -157,6 +150,7 @@ export default AudioTranscriber; + /* "use client" diff --git a/tsconfig.json b/tsconfig.json index ac07830..432c55b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -22,6 +22,7 @@ "@/*": ["./src/*"] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/api/connectDB.js", "src/lib/utils.js", "src/app/(web)/account/page.jsx", "src/app/(panels)/suite/patient/account/page.jsx", "src/app/(panels)/suite/patient/dashboard/MedicationTable.jsx", "src/app/(panels)/suite/patient/dashboard/page.jsx", "src/app/api/transcribe/route.js", "src/components/ui/calendar.jsx", "src/app/(web)/page.jsx", "src/app/(web)/transcribe/page.jsx", "src/app/(web)/login/page.jsx", "src/app/(panels)/suite/layout.jsx", "src/app/(panels)/suite/doctor/dashboard/page.jsx", "src/app/(panels)/suite/patient/chat/page.jsx"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/api/connectDB.js", "src/lib/utils.js", "src/app/(web)/account/page.jsx", "src/app/(panels)/suite/patient/account/page.jsx", "src/app/(panels)/suite/patient/dashboard/MedicationTable.jsx", "src/app/(panels)/suite/patient/dashboard/page.jsx", "src/app/api/transcribe/route.js", "src/components/ui/calendar.jsx", "src/app/(web)/page.jsx", "src/app/(web)/transcribe/page.tsx", "src/app/(web)/login/page.jsx", "src/app/(panels)/suite/layout.jsx", "src/app/(panels)/suite/doctor/dashboard/page.jsx", "src/app/(panels)/suite/patient/chat/page.jsx"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/api/connectDB.js", "src/lib/utils.js", "src/app/(web)/account/page.jsx", "src/app/(panels)/suite/patient/account/page.jsx", "src/app/(panels)/suite/patient/dashboard/MedicationTable.jsx", "src/app/(panels)/suite/patient/dashboard/page.jsx", "src/app/api/transcribe/route.js", "src/components/ui/calendar.jsx", "src/app/(web)/page.jsx", "src/app/(web)/transcribe/page.tsx"], "exclude": ["node_modules"] } From f705390c3fdc7593837413fe7ef47c2d9005a8ca Mon Sep 17 00:00:00 2001 From: Sir Blob <76974209+GamerBoss101@users.noreply.github.com> Date: Sun, 26 Jan 2025 05:50:08 -0500 Subject: [PATCH 2/5] UI Update --- src/app/(web)/transcribe/page.tsx | 568 +++++++++++++++--------------- 1 file changed, 293 insertions(+), 275 deletions(-) diff --git a/src/app/(web)/transcribe/page.tsx b/src/app/(web)/transcribe/page.tsx index 7358505..d460e86 100644 --- a/src/app/(web)/transcribe/page.tsx +++ b/src/app/(web)/transcribe/page.tsx @@ -1,156 +1,174 @@ "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(null); - const [transcription, setTranscription] = useState(null); - const [loading, setLoading] = useState(false); - const [recording, setRecording] = useState(false); - const [error, setError] = useState(null); - const mediaRecorderRef = useRef(null); - const audioChunksRef = useRef([]); + const [file, setFile] = useState(null); + const [transcription, setTranscription] = useState(null); + const [loading, setLoading] = useState(false); + const [recording, setRecording] = useState(false); + const [error, setError] = useState(null); + const mediaRecorderRef = useRef(null); + const audioChunksRef = useRef([]); - // Handle file selection - const handleFileChange = (event: React.ChangeEvent) => { - if (event.target.files && event.target.files.length > 0) { - setFile(event.target.files[0]); - console.log("File selected:", event.target.files[0].name); - } - }; + // Handle file selection + const handleFileChange = (event: React.ChangeEvent) => { + if (event.target.files && event.target.files.length > 0) { + setFile(event.target.files[0]); + console.log("File selected:", event.target.files[0].name); + } + }; - // Handle file transcription - const handleTranscription = async (audioFile: File) => { - if (!audioFile) { - alert("No audio file to transcribe!"); - return; - } + // Handle file transcription + const handleTranscription = async (audioFile: File) => { + if (!audioFile) { + alert("No audio file to transcribe!"); + return; + } - console.log("Starting transcription for:", audioFile.name); + console.log("Starting transcription for:", audioFile.name); - const formData = new FormData(); - formData.append("file", audioFile); - console.log(audioFile); - setLoading(true); - setError(null); // Clear previous errors - try { - let response = await fetch("/api/transcribe", { - method: "POST", - body: formData, - headers: { - "Content-Type": "multipart/form-data", - } - }) + const formData = new FormData(); + formData.append("file", audioFile); + setLoading(true); + setError(null); // Clear previous errors + try { + let response = await fetch("/api/transcribe", { + method: "POST", + body: formData, + headers: { + "Content-Type": "multipart/form-data", + } + }) - response = await response.json(); - console.log("Transcription response:", response); + console.log("! response:", response); + response = await response.json(); + console.log("@ response:", response); - // if (response.data && response.data.transcription) { - // setTranscription(response.data.transcription); - // } else { - // setError("Unexpected response format. Check backend API."); - // console.error("Invalid response format:", response.data); - // } - } catch (error) { - console.error("Error transcribing audio:", error); - setError("Failed to transcribe audio. Please try again."); - } finally { - setLoading(false); - } - }; + // if (response.data && response.data.transcription) { + // setTranscription(response.data.transcription); + // } else { + // setError("Unexpected response format. Check backend API."); + // console.error("Invalid response format:", response.data); + // } + } catch (error) { + console.error("Error transcribing audio:", error); + setError("Failed to transcribe audio. Please try again."); + } finally { + setLoading(false); + } + }; - // Start recording audio - const startRecording = async () => { - try { - const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); - console.log("Microphone access granted."); + // Start recording audio + const startRecording = async () => { + try { + const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); + console.log("Microphone access granted."); - mediaRecorderRef.current = new MediaRecorder(stream); - audioChunksRef.current = []; // Reset audio chunks + mediaRecorderRef.current = new MediaRecorder(stream); + audioChunksRef.current = []; // Reset audio chunks - mediaRecorderRef.current.ondataavailable = (event) => { - if (event.data.size > 0) { - console.log("Audio chunk received:", event.data); - audioChunksRef.current.push(event.data); - } - }; + mediaRecorderRef.current.ondataavailable = (event) => { + if (event.data.size > 0) { + console.log("Audio chunk received:", event.data); + audioChunksRef.current.push(event.data); + } + }; - mediaRecorderRef.current.onstop = async () => { - const audioBlob = new Blob(audioChunksRef.current, { type: "audio/mp3" }); - const audioFile = new File([audioBlob], "recording.mp3", { type: "audio/mp3" }); + mediaRecorderRef.current.onstop = async () => { + const audioBlob = new Blob(audioChunksRef.current, { type: "audio/mp3" }); + const audioFile = new File([audioBlob], "recording.mp3", { type: "audio/mp3" }); - console.log("Recording stopped. Blob created:", audioBlob); + console.log("Recording stopped. Blob created:", audioBlob); - setFile(audioFile); // Save the recorded file - setTranscription("Processing transcription for recorded audio..."); - await handleTranscription(audioFile); // Automatically transcribe - }; + setFile(audioFile); // Save the recorded file + setTranscription("Processing transcription for recorded audio..."); + await handleTranscription(audioFile); // Automatically transcribe + }; - mediaRecorderRef.current.start(); - console.log("Recording started."); - setRecording(true); - } catch (error) { - console.error("Error starting recording:", error); - setError("Failed to start recording. Please check microphone permissions."); - } - }; + mediaRecorderRef.current.start(); + console.log("Recording started."); + setRecording(true); + } catch (error) { + console.error("Error starting recording:", error); + setError("Failed to start recording. Please check microphone permissions."); + } + }; - // Stop recording audio - const stopRecording = () => { - if (mediaRecorderRef.current) { - console.log("Stopping recording..."); - mediaRecorderRef.current.stop(); - setRecording(false); - } - }; + // Stop recording audio + const stopRecording = () => { + if (mediaRecorderRef.current) { + console.log("Stopping recording..."); + mediaRecorderRef.current.stop(); + setRecording(false); + } + }; - return ( -
-

-
- Audio Transcription -
-

-
-

Upload or Record Audio

- - - -
+ return ( +
+

+
+ Audio Transcription +
+

+
+
+

Upload or Record Audio

-
-

Record Audio

- {!recording ? ( - - ) : ( - - )} -
+ + +
-
-

Transcription:

- {loading ? ( -

Processing transcription...

- ) : transcription ? ( -

{transcription}

- ) : ( -

No transcription available yet.

- )} -
+
+

Record Audio

+ {!recording ? ( + + ) : ( + + )} +
- {error && ( -
- Error: {error} -
- )} -
- ); + + + Transcription Result + + + + {loading + ? "Processing transcription..." + : transcription + ? "Your transcription is ready" + : "No transcription available yet"} + + + + + {error && ( + + + Error + + Error: {error} + + + )} + + ); }; export default AudioTranscriber; @@ -182,179 +200,179 @@ const AudioTranscriber: React.FC = () => { const audioChunksRef = useRef([]) const handleFileChange = (event: React.ChangeEvent) => { - if (event.target.files && event.target.files.length > 0) { - setFile(event.target.files[0]) - console.log("File selected:", event.target.files[0].name) - } + if (event.target.files && event.target.files.length > 0) { + setFile(event.target.files[0]) + console.log("File selected:", event.target.files[0].name) + } } const handleTranscription = async (audioFile: File) => { - if (!audioFile) { - setError("No audio file to transcribe!") - return - } + if (!audioFile) { + setError("No audio file to transcribe!") + return + } - console.log("Starting transcription for:", audioFile.name) + console.log("Starting transcription for:", audioFile.name) - const formData = new FormData() - formData.append("file", audioFile) + const formData = new FormData() + formData.append("file", audioFile) - setLoading(true) - setError(null) - try { - const response = await axios.post("http://localhost:8000/transcribe", formData, { - headers: { - "Content-Type": "multipart/form-data", - }, - }) + setLoading(true) + setError(null) + try { + const response = await axios.post("http://localhost:8000/transcribe", formData, { + headers: { + "Content-Type": "multipart/form-data", + }, + }) - console.log("Transcription response:", response.data) + console.log("Transcription response:", response.data) - if (response.data && response.data.transcription) { - setTranscription(response.data.transcription) - } else { - setError("Unexpected response format. Check backend API.") - console.error("Invalid response format:", response.data) - } - } catch (error) { - console.error("Error transcribing audio:", error) - setError("Failed to transcribe audio. Please try again.") - } finally { - setLoading(false) - } + if (response.data && response.data.transcription) { + setTranscription(response.data.transcription) + } else { + setError("Unexpected response format. Check backend API.") + console.error("Invalid response format:", response.data) + } + } catch (error) { + console.error("Error transcribing audio:", error) + setError("Failed to transcribe audio. Please try again.") + } finally { + setLoading(false) + } } const startRecording = async () => { - try { - const stream = await navigator.mediaDevices.getUserMedia({ audio: true }) - console.log("Microphone access granted.") + try { + const stream = await navigator.mediaDevices.getUserMedia({ audio: true }) + console.log("Microphone access granted.") - mediaRecorderRef.current = new MediaRecorder(stream) - audioChunksRef.current = [] + mediaRecorderRef.current = new MediaRecorder(stream) + audioChunksRef.current = [] - mediaRecorderRef.current.ondataavailable = (event) => { - if (event.data.size > 0) { - console.log("Audio chunk received:", event.data) - audioChunksRef.current.push(event.data) - } - } + mediaRecorderRef.current.ondataavailable = (event) => { + if (event.data.size > 0) { + console.log("Audio chunk received:", event.data) + audioChunksRef.current.push(event.data) + } + } - mediaRecorderRef.current.onstop = async () => { - const audioBlob = new Blob(audioChunksRef.current, { type: "audio/mp3" }) - const audioFile = new File([audioBlob], "recording.mp3", { type: "audio/mp3" }) + mediaRecorderRef.current.onstop = async () => { + const audioBlob = new Blob(audioChunksRef.current, { type: "audio/mp3" }) + const audioFile = new File([audioBlob], "recording.mp3", { type: "audio/mp3" }) - console.log("Recording stopped. Blob created:", audioBlob) + console.log("Recording stopped. Blob created:", audioBlob) - setFile(audioFile) - setTranscription("Processing transcription for recorded audio...") - await handleTranscription(audioFile) - } + setFile(audioFile) + setTranscription("Processing transcription for recorded audio...") + await handleTranscription(audioFile) + } - mediaRecorderRef.current.start() - console.log("Recording started.") - setRecording(true) - } catch (error) { - console.error("Error starting recording:", error) - setError("Failed to start recording. Please check microphone permissions.") - } + mediaRecorderRef.current.start() + console.log("Recording started.") + setRecording(true) + } catch (error) { + console.error("Error starting recording:", error) + setError("Failed to start recording. Please check microphone permissions.") + } } const stopRecording = () => { - if (mediaRecorderRef.current) { - console.log("Stopping recording...") - mediaRecorderRef.current.stop() - setRecording(false) - } + if (mediaRecorderRef.current) { + console.log("Stopping recording...") + mediaRecorderRef.current.stop() + setRecording(false) + } } return ( -
-

Audio Transcriber

+
+

Audio Transcriber

- - - Transcribe Audio - Upload an audio file or record directly to transcribe - - - - - Upload Audio - Record Audio - - -
- - - -
- - -
- - {!recording ? ( - - ) : ( - - )} -
- - - - + + + Transcribe Audio + Upload an audio file or record directly to transcribe + + + + + Upload Audio + Record Audio + + +
+ + + +
+ + +
+ + {!recording ? ( + + ) : ( + + )} +
+ + + + - - - Transcription Result - - {loading - ? "Processing transcription..." - : transcription - ? "Your transcription is ready" - : "No transcription available yet"} - - - -