From b5385bb2e3abfb6089ad6c0b61a388659b058cbd Mon Sep 17 00:00:00 2001 From: r-III03 Date: Sat, 25 Jan 2025 22:39:06 -0500 Subject: [PATCH] somefix --- package.json | 1 + src/app/(web)/layout.tsx | 61 ++++++++- src/app/(web)/page.css | 106 +++++++++++++++ src/app/(web)/page.tsx | 22 ---- src/app/(web)/transcribe/page.tsx | 207 ++++++++++++++++++++++++++++++ src/components/ui/alert.tsx | 59 +++++++++ src/components/ui/tabs.tsx | 55 ++++++++ 7 files changed, 488 insertions(+), 23 deletions(-) create mode 100644 src/app/(web)/page.css delete mode 100644 src/app/(web)/page.tsx create mode 100644 src/components/ui/alert.tsx create mode 100644 src/components/ui/tabs.tsx diff --git a/package.json b/package.json index 68086fa..323b64c 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@radix-ui/react-navigation-menu": "^1.2.4", "@radix-ui/react-separator": "^1.1.1", "@radix-ui/react-slot": "^1.1.1", + "@radix-ui/react-tabs": "^1.1.2", "@radix-ui/react-tooltip": "^1.1.7", "@tanstack/react-table": "^8.20.6", "@vercel/analytics": "^1.4.1", diff --git a/src/app/(web)/layout.tsx b/src/app/(web)/layout.tsx index 162fc12..21891a3 100644 --- a/src/app/(web)/layout.tsx +++ b/src/app/(web)/layout.tsx @@ -1,3 +1,5 @@ +/* + "use client" import React from 'react'; @@ -22,4 +24,61 @@ export default function RootLayout({ children }: { children: React.ReactNode }) ) -} \ No newline at end of file +} + +*/ + +import type { Metadata } from "next" +import { Inter } from "next/font/google" +import "./globals.css" +import { Mic } from "lucide-react" + +const inter = Inter({ subsets: ["latin"] }) + +export default function RootLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + + +
+
+
+
+ +

PostCare

+
+ +
+
+
{children}
+
+
+
+
+
+ + + ) +} + diff --git a/src/app/(web)/page.css b/src/app/(web)/page.css new file mode 100644 index 0000000..9d09d9a --- /dev/null +++ b/src/app/(web)/page.css @@ -0,0 +1,106 @@ +/* + +"use client" + +import { Hero } from "@/components/hero"; +import { Facts } from "@/components/facts"; + +import Link from "next/link"; + +export default function Home() { + return ( +
+ + + + +
+ + + +
+
+ ); +} +*/ + + +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; + + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; + + --ring: 215 20.2% 65.1%; + + --radius: 0.5rem; + } + + .dark { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; + + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 85.7% 97.3%; + + --ring: 217.2 32.6% 17.5%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} + diff --git a/src/app/(web)/page.tsx b/src/app/(web)/page.tsx deleted file mode 100644 index 52eaa47..0000000 --- a/src/app/(web)/page.tsx +++ /dev/null @@ -1,22 +0,0 @@ -"use client" - -import { Hero } from "@/components/hero"; -import { Facts } from "@/components/facts"; - -import Link from "next/link"; - -export default function Home() { - return ( -
- - - - -
- - - -
-
- ); -} diff --git a/src/app/(web)/transcribe/page.tsx b/src/app/(web)/transcribe/page.tsx index 02843e6..dba0fd3 100644 --- a/src/app/(web)/transcribe/page.tsx +++ b/src/app/(web)/transcribe/page.tsx @@ -1,3 +1,5 @@ +/* + "use client"; import React, { useState, useRef } from "react"; @@ -129,3 +131,208 @@ const AudioTranscriber: React.FC = () => { }; export default AudioTranscriber; + +*/ + + +"use client" + +import type React from "react" +import { useState, useRef } from "react" +import axios from "axios" +import { Button } from "@/components/ui/button" +import { Input } from "@/components/ui/input" +import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" +import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" +import { Mic, Upload, StopCircle, FileAudio } from "lucide-react" +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" +import { Label } from "@/components/ui/label" +import { Textarea } from "@/components/ui/textarea" + +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 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) + } + } + + const handleTranscription = async (audioFile: File) => { + if (!audioFile) { + setError("No audio file to transcribe!") + return + } + + console.log("Starting transcription for:", audioFile.name) + + 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", + }, + }) + + 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) + } + } + + const startRecording = async () => { + try { + const stream = await navigator.mediaDevices.getUserMedia({ audio: true }) + console.log("Microphone access granted.") + + 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.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) + + 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.") + } + } + + const stopRecording = () => { + if (mediaRecorderRef.current) { + console.log("Stopping recording...") + mediaRecorderRef.current.stop() + setRecording(false) + } + } + + return ( +
+

Audio Transcriber

+ + + + 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"} + + + +