diff --git a/src/app/globals.css b/src/app/globals.css index a2dc41e..9f428e7 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -3,11 +3,15 @@ :root { --background: #ffffff; --foreground: #171717; + --card: #ffffff; + --card-foreground: #171717; } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); } @@ -16,6 +20,8 @@ :root { --background: #0a0a0a; --foreground: #ededed; + --card: #0a0a0a; + --card-foreground: #ededed; } } @@ -24,3 +30,21 @@ body { color: var(--foreground); font-family: Arial, Helvetica, sans-serif; } + +/* Custom scrollbar for conversation area */ +::-webkit-scrollbar { + width: 6px; +} + +::-webkit-scrollbar-track { + background: transparent; +} + +::-webkit-scrollbar-thumb { + background: #888; + border-radius: 3px; +} + +::-webkit-scrollbar-thumb:hover { + background: #666; +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f7fa87e..09c3078 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -13,8 +13,8 @@ const geistMono = Geist_Mono({ }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "AI Podcast Generator", + description: "Convert any URL into a natural sounding podcast audio file", }; export default function RootLayout({ diff --git a/src/app/page.tsx b/src/app/page.tsx index a932894..3208175 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,103 +1,307 @@ -import Image from "next/image"; +'use client'; + +import { useState } from 'react'; + +interface Message { + id: string; + speaker: 'host1' | 'host2'; + text: string; + timestamp: string; +} export default function Home() { - return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - src/app/page.tsx - - . -
    2. -
  2. - Save and see your changes instantly. -
    3. -
+ const [url, setUrl] = useState(''); + const [isLoading, setIsLoading] = useState(false); + const [messages, setMessages] = useState([]); + const [isPlaying, setIsPlaying] = useState(false); + const [currentTime, setCurrentTime] = useState(0); + const [duration, setDuration] = useState(0); + const [progressInterval, setProgressInterval] = useState(null); -
- - Vercel logomark - Deploy now - - - Read our docs - + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setIsLoading(true); + + // Simulate API call + setTimeout(() => { + setMessages(mockMessages); + setIsLoading(false); + setDuration(320); // 5 minutes 20 seconds + }, 2000); + }; + + const togglePlay = () => { + if (isPlaying) { + setIsPlaying(false); + if (progressInterval) { + clearInterval(progressInterval); + setProgressInterval(null); + } + } else { + setIsPlaying(true); + const interval = setInterval(() => { + setCurrentTime(prev => { + if (prev >= duration) { + setIsPlaying(false); + clearInterval(interval); + setProgressInterval(null); + return duration; + } + return prev + 1; + }); + }, 1000); + setProgressInterval(interval); + } + }; + + const restartAudio = () => { + setCurrentTime(0); + setIsPlaying(false); + if (progressInterval) { + clearInterval(progressInterval); + setProgressInterval(null); + } + }; + + return ( +
+ {/* Header */} +
+
+

AI Podcast Generator

+
+
+ + {/* Main Content */} +
+
+ {/* Left Column - URL Input */} +
+
+

Generate Podcast

+
+
+ + setUrl(e.target.value)} + placeholder="https://example.com" + className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500" + required + /> +
+ +
+ + {messages.length > 0 && ( +
+

+ Podcast generated successfully! Listen to the conversation below. +

+
+ )} +
+
+ + {/* Middle Column - Conversation */} +
+
+

Podcast Conversation

+
+ {messages.length === 0 ? ( +
+

Enter a URL and generate a podcast to see the conversation here.

+
+ ) : ( + messages.map((message) => ( +
+
+
+ {message.speaker === 'host1' ? 'Alex' : 'Sarah'} +
+

{message.text}

+
{message.timestamp}
+
+
+ )) + )} +
+
+
+ + {/* Right Column - Audio Player */} +
+
+

Audio Player

+ {messages.length === 0 ? ( +
+

Generate a podcast to enable audio playback.

+
+ ) : ( +
+ {/* Audio Controls */} +
+ + +
+ + {/* Progress Bar */} +
+
+
+
+
+ {formatTime(currentTime)} + {formatTime(duration)} +
+
+ + {/* Volume Control */} +
+ + + + +
+ + {/* Episode Info */} +
+

Episode Details

+

+ Duration: {formatTime(duration)} +

+

+ Speakers: Alex & Sarah +

+
+
+ )} +
+
-
); } + +// Helper function to format time +function formatTime(seconds: number): string { + const mins = Math.floor(seconds / 60); + const secs = Math.floor(seconds % 60); + return `${mins}:${secs.toString().padStart(2, '0')}`; +} + +// Mock conversation data +const mockMessages: Message[] = [ + { + id: '1', + speaker: 'host1', + text: "Hey Sarah! Today we're discussing this fascinating article about artificial intelligence and its impact on creative industries.", + timestamp: '0:15' + }, + { + id: '2', + speaker: 'host2', + text: "That's really interesting, Alex! I've been following this topic closely. The article mentions some really compelling points about AI-generated art and music.", + timestamp: '0:45' + }, + { + id: '3', + speaker: 'host1', + text: "Exactly! What I found most surprising was the section about how AI is actually helping human creators become more productive rather than replacing them entirely.", + timestamp: '1:20' + }, + { + id: '4', + speaker: 'host2', + text: "That's a crucial distinction. The article highlights several case studies where artists are using AI as a collaborative tool to enhance their creative process.", + timestamp: '1:55' + }, + { + id: '5', + speaker: 'host1', + text: "I particularly loved the example about the musician who used AI to generate backing tracks and then added their own creative twist on top.", + timestamp: '2:30' + }, + { + id: '6', + speaker: 'host2', + text: "And what about the ethical considerations? The article raises some important questions about copyright and attribution when AI is involved in the creative process.", + timestamp: '3:05' + }, + { + id: '7', + speaker: 'host1', + text: "That's definitely something we need to think about. The author suggests that we might need new frameworks for understanding creativity in the age of AI.", + timestamp: '3:40' + }, + { + id: '8', + speaker: 'host2', + text: "I agree. It's not about rejecting AI, but finding ways to integrate it responsibly into our creative workflows while maintaining human oversight and artistic vision.", + timestamp: '4:15' + }, + { + id: '9', + speaker: 'host1', + text: "The future looks really exciting! Imagine what we'll be able to create when we embrace these technologies as tools rather than threats.", + timestamp: '4:50' + }, + { + id: '10', + speaker: 'host2', + text: "Absolutely! Thanks for sharing this article with our listeners. It really gives us a lot to think about regarding the future of creativity and AI.", + timestamp: '5:20' + } +];