Upload 2 files

App.tsx

@@ -0,0 +1,347 @@
+import React, { useState } from 'react';
+import { Youtube, Download, Play, Pause, Volume2, FileAudio, FileVideo, Loader2, CheckCircle, AlertCircle, Globe, Mic, Languages, Speaker } from 'lucide-react';
+
+interface ProcessingStep {
+  id: string;
+  title: string;
+  description: string;
+  status: 'pending' | 'processing' | 'completed' | 'error';
+  icon: React.ReactNode;
+}
+
+function App() {
+  const [youtubeUrl, setYoutubeUrl] = useState('');
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [currentStep, setCurrentStep] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [showResults, setShowResults] = useState(false);
+
+  const processingSteps: ProcessingStep[] = [
+    {
+      id: 'extract',
+      title: 'Extract Audio',
+      description: 'Downloading video and extracting high-quality audio',
+      status: 'pending',
+      icon: <FileAudio className="w-5 h-5" />
+    },
+    {
+      id: 'transcribe',
+      title: 'Transcribe Speech',
+      description: 'Converting English audio to accurate text',
+      status: 'pending',
+      icon: <Mic className="w-5 h-5" />
+    },
+    {
+      id: 'translate',
+      title: 'Translate Content',
+      description: 'Translating English text to natural Hindi',
+      status: 'pending',
+      icon: <Languages className="w-5 h-5" />
+    },
+    {
+      id: 'synthesize',
+      title: 'Generate Audio',
+      description: 'Creating Hindi speech with natural voice',
+      status: 'pending',
+      icon: <Speaker className="w-5 h-5" />
+    },
+    {
+      id: 'sync',
+      title: 'Synchronize Video',
+      description: 'Matching audio timing with original video',
+      status: 'pending',
+      icon: <FileVideo className="w-5 h-5" />
+    }
+  ];
+
+  const [steps, setSteps] = useState(processingSteps);
+
+  const isValidYouTubeUrl = (url: string) => {
+    const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/.+/;
+    return youtubeRegex.test(url);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!isValidYouTubeUrl(youtubeUrl)) return;
+
+    setIsProcessing(true);
+    setCurrentStep(0);
+    setShowResults(false);
+
+    // Simulate processing steps
+    for (let i = 0; i < steps.length; i++) {
+      setCurrentStep(i);
+      
+      // Update step to processing
+      setSteps(prev => prev.map((step, index) => 
+        index === i ? { ...step, status: 'processing' } : step
+      ));
+
+      // Simulate processing time
+      await new Promise(resolve => setTimeout(resolve, 2000 + Math.random() * 1000));
+
+      // Update step to completed
+      setSteps(prev => prev.map((step, index) => 
+        index === i ? { ...step, status: 'completed' } : step
+      ));
+    }
+
+    setIsProcessing(false);
+    setShowResults(true);
+  };
+
+  const getStepStatusIcon = (step: ProcessingStep, index: number) => {
+    if (step.status === 'completed') {
+      return <CheckCircle className="w-5 h-5 text-emerald-500" />;
+    } else if (step.status === 'processing') {
+      return <Loader2 className="w-5 h-5 text-indigo-500 animate-spin" />;
+    } else if (step.status === 'error') {
+      return <AlertCircle className="w-5 h-5 text-red-500" />;
+    } else {
+      return <div className="w-5 h-5 rounded-full border-2 border-gray-300 flex items-center justify-center">
+        <div className="w-2 h-2 rounded-full bg-gray-300"></div>
+      </div>;
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-indigo-50 via-white to-purple-50">
+      {/* Header */}
+      <header className="bg-white/80 backdrop-blur-sm border-b border-gray-100 sticky top-0 z-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <div className="flex items-center space-x-3">
+            <div className="bg-gradient-to-r from-indigo-500 to-purple-600 p-2 rounded-xl">
+              <Globe className="w-6 h-6 text-white" />
+            </div>
+            <div>
+              <h1 className="text-xl font-bold text-gray-900">YouTube Translator</h1>
+              <p className="text-sm text-gray-600">English to Hindi Video Dubbing</p>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Hero Section */}
+        <div className="text-center mb-12">
+          <div className="inline-flex items-center space-x-2 bg-indigo-100 text-indigo-700 px-4 py-2 rounded-full text-sm font-medium mb-6">
+            <Youtube className="w-4 h-4" />
+            <span>Powered by Advanced AI Translation</span>
+          </div>
+          <h2 className="text-4xl font-bold text-gray-900 mb-4">
+            Transform English Videos to
+            <span className="bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent"> Hindi</span>
+          </h2>
+          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+            Automatically extract, transcribe, translate, and dub YouTube videos with natural-sounding Hindi voiceovers
+          </p>
+        </div>
+
+        {/* Input Form */}
+        <div className="bg-white rounded-2xl shadow-xl border border-gray-100 p-8 mb-8">
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div>
+              <label htmlFor="youtube-url" className="block text-sm font-semibold text-gray-700 mb-3">
+                YouTube Video URL
+              </label>
+              <div className="relative">
+                <Youtube className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+                <input
+                  type="url"
+                  id="youtube-url"
+                  value={youtubeUrl}
+                  onChange={(e) => setYoutubeUrl(e.target.value)}
+                  placeholder="https://www.youtube.com/watch?v=..."
+                  className="w-full pl-12 pr-4 py-4 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all duration-200 text-lg"
+                  required
+                />
+              </div>
+              {youtubeUrl && !isValidYouTubeUrl(youtubeUrl) && (
+                <p className="mt-2 text-sm text-red-600 flex items-center space-x-1">
+                  <AlertCircle className="w-4 h-4" />
+                  <span>Please enter a valid YouTube URL</span>
+                </p>
+              )}
+            </div>
+
+            <button
+              type="submit"
+              disabled={!isValidYouTubeUrl(youtubeUrl) || isProcessing}
+              className="w-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-4 px-6 rounded-xl font-semibold text-lg hover:from-indigo-600 hover:to-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 flex items-center justify-center space-x-2"
+            >
+              {isProcessing ? (
+                <>
+                  <Loader2 className="w-5 h-5 animate-spin" />
+                  <span>Processing...</span>
+                </>
+              ) : (
+                <>
+                  <Languages className="w-5 h-5" />
+                  <span>Start Translation</span>
+                </>
+              )}
+            </button>
+          </form>
+        </div>
+
+        {/* Processing Steps */}
+        {(isProcessing || showResults) && (
+          <div className="bg-white rounded-2xl shadow-xl border border-gray-100 p-8 mb-8">
+            <h3 className="text-2xl font-bold text-gray-900 mb-6">Processing Pipeline</h3>
+            <div className="space-y-4">
+              {steps.map((step, index) => (
+                <div key={step.id} className="flex items-center space-x-4 p-4 rounded-xl bg-gray-50 hover:bg-gray-100 transition-colors duration-200">
+                  <div className="flex-shrink-0">
+                    {getStepStatusIcon(step, index)}
+                  </div>
+                  <div className="flex-1">
+                    <div className="flex items-center space-x-2">
+                      {step.icon}
+                      <h4 className="font-semibold text-gray-900">{step.title}</h4>
+                    </div>
+                    <p className="text-gray-600 text-sm mt-1">{step.description}</p>
+                  </div>
+                  {step.status === 'processing' && (
+                    <div className="flex-shrink-0">
+                      <div className="w-32 bg-gray-200 rounded-full h-2">
+                        <div className="bg-indigo-500 h-2 rounded-full animate-pulse" style={{ width: '60%' }}></div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Results Section */}
+        {showResults && (
+          <div className="bg-white rounded-2xl shadow-xl border border-gray-100 p-8">
+            <div className="flex items-center space-x-3 mb-6">
+              <CheckCircle className="w-8 h-8 text-emerald-500" />
+              <div>
+                <h3 className="text-2xl font-bold text-gray-900">Translation Complete!</h3>
+                <p className="text-gray-600">Your Hindi dubbed video is ready</p>
+              </div>
+            </div>
+
+            {/* Audio Player */}
+            <div className="bg-gradient-to-r from-gray-50 to-gray-100 rounded-xl p-6 mb-6">
+              <div className="flex items-center justify-between mb-4">
+                <h4 className="font-semibold text-gray-900">Hindi Audio Preview</h4>
+                <div className="flex items-center space-x-2 text-sm text-gray-600">
+                  <Volume2 className="w-4 h-4" />
+                  <span>2:34 duration</span>
+                </div>
+              </div>
+              
+              {/* Waveform Visualization */}
+              <div className="bg-white rounded-lg p-4 mb-4">
+                <div className="flex items-center justify-center space-x-1 h-16">
+                  {Array.from({ length: 50 }).map((_, i) => (
+                    <div
+                      key={i}
+                      className="bg-indigo-400 rounded-full animate-pulse"
+                      style={{
+                        width: '3px',
+                        height: `${Math.random() * 40 + 10}px`,
+                        animationDelay: `${i * 0.1}s`
+                      }}
+                    ></div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Audio Controls */}
+              <div className="flex items-center justify-center space-x-4">
+                <button
+                  onClick={() => setIsPlaying(!isPlaying)}
+                  className="bg-indigo-500 hover:bg-indigo-600 text-white p-3 rounded-full transition-colors duration-200"
+                >
+                  {isPlaying ? <Pause className="w-6 h-6" /> : <Play className="w-6 h-6" />}
+                </button>
+                <div className="flex-1 bg-gray-200 rounded-full h-2 max-w-md">
+                  <div className="bg-indigo-500 h-2 rounded-full" style={{ width: '30%' }}></div>
+                </div>
+                <span className="text-sm text-gray-600">0:45 / 2:34</span>
+              </div>
+            </div>
+
+            {/* Download Options */}
+            <div className="grid md:grid-cols-2 gap-4">
+              <button className="flex items-center justify-center space-x-3 bg-emerald-50 hover:bg-emerald-100 text-emerald-700 border border-emerald-200 p-4 rounded-xl transition-colors duration-200">
+                <Download className="w-5 h-5" />
+                <div className="text-left">
+                  <div className="font-semibold">Download Hindi Audio</div>
+                  <div className="text-sm opacity-75">MP3 • 3.2 MB</div>
+                </div>
+              </button>
+              <button className="flex items-center justify-center space-x-3 bg-purple-50 hover:bg-purple-100 text-purple-700 border border-purple-200 p-4 rounded-xl transition-colors duration-200">
+                <Download className="w-5 h-5" />
+                <div className="text-left">
+                  <div className="font-semibold">Download Dubbed Video</div>
+                  <div className="text-sm opacity-75">MP4 • 15.7 MB</div>
+                </div>
+              </button>
+            </div>
+
+            {/* Quality Metrics */}
+            <div className="mt-6 p-4 bg-gray-50 rounded-xl">
+              <h5 className="font-semibold text-gray-900 mb-3">Translation Quality</h5>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-emerald-600">98%</div>
+                  <div className="text-sm text-gray-600">Accuracy</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-indigo-600">Natural</div>
+                  <div className="text-sm text-gray-600">Voice Quality</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-purple-600">+99%</div>
+                  <div className="text-sm text-gray-600">Sync Match</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-orange-600">2:34</div>
+                  <div className="text-sm text-gray-600">Duration</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Feature Highlights */}
+        {!isProcessing && !showResults && (
+          <div className="grid md:grid-cols-3 gap-6 mt-12">
+            <div className="bg-white rounded-xl p-6 shadow-lg border border-gray-100 hover:shadow-xl transition-shadow duration-200">
+              <div className="bg-indigo-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
+                <Mic className="w-6 h-6 text-indigo-600" />
+              </div>
+              <h3 className="font-semibold text-gray-900 mb-2">High-Quality Transcription</h3>
+              <p className="text-gray-600 text-sm">Advanced AI accurately converts speech to text with 99%+ accuracy</p>
+            </div>
+
+            <div className="bg-white rounded-xl p-6 shadow-lg border border-gray-100 hover:shadow-xl transition-shadow duration-200">
+              <div className="bg-emerald-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
+                <Languages className="w-6 h-6 text-emerald-600" />
+              </div>
+              <h3 className="font-semibold text-gray-900 mb-2">Natural Translation</h3>
+              <p className="text-gray-600 text-sm">Context-aware translation that preserves meaning and cultural nuances</p>
+            </div>
+
+            <div className="bg-white rounded-xl p-6 shadow-lg border border-gray-100 hover:shadow-xl transition-shadow duration-200">
+              <div className="bg-purple-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
+                <Speaker className="w-6 h-6 text-purple-600" />
+              </div>
+              <h3 className="font-semibold text-gray-900 mb-2">Realistic Voice Synthesis</h3>
+              <p className="text-gray-600 text-sm">Natural-sounding Hindi voices with proper intonation and emotion</p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default App;