diff --git a/src/app/(web)/layout.tsx b/src/app/(web)/layout.tsx index ffc4161..c1e53de 100644 --- a/src/app/(web)/layout.tsx +++ b/src/app/(web)/layout.tsx @@ -1,5 +1,7 @@ -"use client" +/* +"use client" +import Head from 'next/head'; import React from 'react'; import { Navbar } from '@/components/navbar'; import { Footer } from '@/components/footer'; @@ -23,6 +25,61 @@ export default function RootLayout({ children }: { children: React.ReactNode }) ) } +*/ +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 deleted file mode 100644 index 9d09d9a..0000000 --- a/src/app/(web)/page.css +++ /dev/null @@ -1,106 +0,0 @@ -/* - -"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 new file mode 100644 index 0000000..d33658c --- /dev/null +++ b/src/app/(web)/page.tsx @@ -0,0 +1,23 @@ + +"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 dba0fd3..8af3b25 100644 --- a/src/app/(web)/transcribe/page.tsx +++ b/src/app/(web)/transcribe/page.tsx @@ -1,7 +1,7 @@ /* - "use client"; - +//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"; @@ -18,48 +18,59 @@ const AudioTranscriber: React.FC = () => { 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); } }; - // Send the file to the backend for transcription + // Handle file transcription const handleTranscription = async (audioFile: File) => { + if (!audioFile) { + alert("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); - + setError(null); // Clear previous errors try { - const response = await axios.post("/api/transcribe", formData, { + const response = await axios.post("http://localhost:8000/transcribe", formData, { headers: { "Content-Type": "multipart/form-data", }, }); - - // Handle missing transcription property in the response + + console.log("Transcription response:", response.data); + if (response.data && response.data.transcription) { setTranscription(response.data.transcription); } else { - setError("No transcription available."); + setError("Unexpected response format. Check backend API."); + console.error("Invalid response format:", response.data); } } catch (error) { - console.error("Error during transcription:", 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."); + mediaRecorderRef.current = new MediaRecorder(stream); - audioChunksRef.current = []; + 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); } }; @@ -68,11 +79,15 @@ const AudioTranscriber: React.FC = () => { 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); // 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); @@ -83,6 +98,7 @@ const AudioTranscriber: React.FC = () => { // Stop recording audio const stopRecording = () => { if (mediaRecorderRef.current) { + console.log("Stopping recording..."); mediaRecorderRef.current.stop(); setRecording(false); } @@ -90,19 +106,25 @@ const AudioTranscriber: React.FC = () => { return (
-

Audio Transcription Tool

- +

+
+ Audio Transcription +
+

Upload or Record Audio

+ {/* File Upload */ //} + + /* -
+ {/* Recording Controls */ //} + + /*

Record Audio

{!recording ? ( @@ -114,13 +136,23 @@ const AudioTranscriber: React.FC = () => { )}
- {transcription && ( -
-

Transcription:

-

{transcription}

-
- )} + {/* Transcription Result */ //} + /* +
+

Transcription:

+ {loading ? ( +

Processing transcription...

+ ) : transcription ? ( +

{transcription}

+ ) : ( +

No transcription available yet.

+ )} +
+ + {/* Error Message */ //} + + /* {error && (
Error: {error} @@ -131,10 +163,8 @@ const AudioTranscriber: React.FC = () => { }; export default AudioTranscriber; - */ - "use client" import type React from "react" diff --git a/src/app/globals.css b/src/app/globals.css index 5fcf6dc..31bd520 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -2,86 +2,69 @@ @tailwind components; @tailwind utilities; -body { - font-family: Arial, Helvetica, sans-serif; -} - @layer base { :root { --background: 0 0% 100%; - --foreground: 0 0% 3.9%; - --card: 0 0% 100%; - --card-foreground: 0 0% 3.9%; + --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: 0 0% 3.9%; - --primary: 0 0% 9%; - --primary-foreground: 0 0% 98%; - --secondary: 0 0% 96.1%; - --secondary-foreground: 0 0% 9%; - --muted: 0 0% 96.1%; - --muted-foreground: 0 0% 45.1%; - --accent: 0 0% 96.1%; - --accent-foreground: 0 0% 9%; + --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: 0 0% 98%; - --border: 0 0% 89.8%; - --input: 0 0% 89.8%; - --ring: 0 0% 3.9%; - --chart-1: 12 76% 61%; - --chart-2: 173 58% 39%; - --chart-3: 197 37% 24%; - --chart-4: 43 74% 66%; - --chart-5: 27 87% 67%; + --destructive-foreground: 210 40% 98%; + + --ring: 215 20.2% 65.1%; + --radius: 0.5rem; - --sidebar-background: 0 0% 98%; - --sidebar-foreground: 240 5.3% 26.1%; - --sidebar-primary: 240 5.9% 10%; - --sidebar-primary-foreground: 0 0% 98%; - --sidebar-accent: 240 4.8% 95.9%; - --sidebar-accent-foreground: 240 5.9% 10%; - --sidebar-border: 220 13% 91%; - --sidebar-ring: 217.2 91.2% 59.8%; } + .dark { - --background: 0 0% 3.9%; - --foreground: 0 0% 98%; - --card: 0 0% 3.9%; - --card-foreground: 0 0% 98%; - --popover: 0 0% 3.9%; - --popover-foreground: 0 0% 98%; - --primary: 0 0% 98%; - --primary-foreground: 0 0% 9%; - --secondary: 0 0% 14.9%; - --secondary-foreground: 0 0% 98%; - --muted: 0 0% 14.9%; - --muted-foreground: 0 0% 63.9%; - --accent: 0 0% 14.9%; - --accent-foreground: 0 0% 98%; + --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 0% 98%; - --border: 0 0% 14.9%; - --input: 0 0% 14.9%; - --ring: 0 0% 83.1%; - --chart-1: 220 70% 50%; - --chart-2: 160 60% 45%; - --chart-3: 30 80% 55%; - --chart-4: 280 65% 60%; - --chart-5: 340 75% 55%; - --sidebar-background: 240 5.9% 10%; - --sidebar-foreground: 240 4.8% 95.9%; - --sidebar-primary: 224.3 76.3% 48%; - --sidebar-primary-foreground: 0 0% 100%; - --sidebar-accent: 240 3.7% 15.9%; - --sidebar-accent-foreground: 240 4.8% 95.9%; - --sidebar-border: 240 3.7% 15.9%; - --sidebar-ring: 217.2 91.2% 59.8%; - } - .centered-content { - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - width: 100vw; + --destructive-foreground: 0 85.7% 97.3%; + + --ring: 217.2 32.6% 17.5%; } } diff --git a/src/components/Hero1.tsx b/src/components/Hero1.tsx index e69de29..4ed0427 100644 --- a/src/components/Hero1.tsx +++ b/src/components/Hero1.tsx @@ -0,0 +1,41 @@ +"use client" + +import Link from "next/link" +import { Button } from "@/components/ui/button" + +export function Hero1() { + return ( +
+
+
+

+ Revolutionize Your HealthCare +

+

+ Improving your recovery journey with personalized care. +

+ +
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/facts.tsx b/src/components/facts.tsx index e92aca8..b10e1bf 100644 --- a/src/components/facts.tsx +++ b/src/components/facts.tsx @@ -1,20 +1,20 @@ "use client" +import { AlignLeft } from "lucide-react" +import { Card, CardContent } from "./ui/card" export function Facts() { return (
-
-
-

- Our Mission -

-

- At PostCare we want to ensure the health of those throughout the world. - Our goal is to make sure that our services can ensure clarity and accessibility -

As well as a smooth experience
-

-
-
-
+ + +

+ OUR MISSION +

+ PostCare we want to ensure the health of those throughout the world. + Our goal is to make sure that our services can ensure clarity and accessibility + As well as a smooth experience + + + ) } \ No newline at end of file