Spaces:

rahul7star
/

ai-clone-me

Running

App Files Files Community

rahul7star commited on Jul 8

Commit

c81b265

verified ·

1 Parent(s): 1872782

fix API Type - Post URL - “https://rahul7star-ohamlab-uploader.hf.space/upload"  Upload Zip Api type - POST URL fetch("https://rahul7star-ohamlab-uploader.hf.space/upload-zip" - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +157 -57

index.html CHANGED Viewed

@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         .gradient-bg {
-            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
         }
         .upload-area {
             border: 2px dashed #cbd5e0;
@@ -48,13 +48,13 @@
         }
     </style>
 </head>
-<body class="gradient-bg min-h-screen">
     <!-- Navigation Bar -->
-    <nav class="bg-white shadow-sm sticky top-0 z-10">
         <div class="container mx-auto px-4 py-3 flex justify-between items-center">
             <div class="flex items-center">
-                <i class="fas fa-robot text-indigo-600 text-2xl mr-2"></i>
-                <span class="text-xl font-bold text-gray-800">OhamLab</span>
             </div>
             <div class="hidden md:flex space-x-8">
                 <a href="#home" class="nav-link text-gray-700 hover:text-indigo-600 font-medium">Home</a>
@@ -94,10 +94,10 @@
         <main class="max-w-4xl mx-auto">
             <!-- Home Section -->
             <section id="home" class="text-center py-16">
-                <h1 class="text-4xl font-bold text-gray-800 mb-4">OhamLab - Create Your Digital Twin</h1>
-                <p class="text-xl text-gray-600 mb-8">Generate AI-powered avatars that look just like you</p>
                 <div class="flex space-x-4 justify-center">
-                    <button id="get-started-btn" class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-8 py-3 rounded-full font-medium shadow-lg hover:opacity-90 transition">
                         Get Started
                     </button>
                     <button id="demo-btn" class="bg-white text-indigo-600 border-2 border-indigo-600 px-8 py-3 rounded-full font-medium shadow-lg hover:bg-indigo-50 transition">
@@ -110,8 +110,8 @@
             <section id="features" class="mb-16">
                 <h2 class="text-2xl font-bold text-gray-800 mb-8 text-center">Key Features</h2>
                 <div class="grid md:grid-cols-3 gap-8">
-                    <div class="bg-white p-6 rounded-xl shadow-md">
-                        <div class="text-indigo-500 text-3xl mb-4">
                             <i class="fas fa-user-circle"></i>
                         </div>
                         <h3 class="text-lg font-semibold mb-2">Realistic Avatars</h3>
@@ -135,7 +135,7 @@
             </section>
             <!-- Upload Section -->
-            <section id="create" class="mb-12 bg-white rounded-xl shadow-lg p-6 hidden">
                 <h2 class="text-xl font-semibold text-gray-800 mb-6">Create Your AI Clone</h2>
                 <div class="grid md:grid-cols-2 gap-6">
@@ -261,7 +261,7 @@
             </section>
             <!-- Pricing Plans -->
-            <section id="pricing" class="mb-12 bg-white rounded-xl shadow-lg p-6">
                 <h2 class="text-xl font-semibold text-gray-800 mb-6">Choose Your Plan</h2>
                 <div class="grid md:grid-cols-3 gap-6">
@@ -382,7 +382,7 @@
         </main>
         <!-- Footer -->
-        <footer class="mt-12 bg-white py-8 border-t border-gray-200">
             <div class="container mx-auto px-4 text-center text-gray-600">
                 <p>© 2025 OhamLab. All rights reserved.</p>
                 <div class="flex justify-center space-x-4 mt-4">
@@ -554,7 +554,7 @@
             });
         }
-        function handleImageUpload(e) {
             const files = Array.from(e.target.files);
             if (files.length < 5) {
@@ -567,13 +567,49 @@
             // Show the train model button if we have enough images
             trainModelSection.classList.remove('hidden');
         }
-        function handleZipUpload(e) {
             if (e.target.files.length > 0) {
-                // Show the train model button when ZIP is uploaded
-                trainModelSection.classList.remove('hidden');
-                showToast("ZIP file uploaded successfully!");
             }
         }
@@ -608,28 +644,52 @@
             trainModelSection.classList.add('hidden');
         }
-        function trainModel() {
             // Show training progress
             trainingProgress.classList.remove('hidden');
             trainModelSection.classList.add('hidden');
-            // Simulate training progress
-            let progress = 0;
-            const interval = setInterval(() => {
-                progress += Math.random() * 10;
-                if (progress > 100) progress = 100;
-                progressBar.style.width = `${progress}%`;
-                progressPercent.textContent = `${Math.floor(progress)}%`;
-                if (progress === 100) {
-                    clearInterval(interval);
-                    setTimeout(() => {
-                        trainingProgress.classList.add('hidden');
-                        showResults();
-                    }, 500);
-                }
-            }, 500);
         }
         function showResults() {
@@ -657,7 +717,7 @@
             }, 800);
         }
-        function generateVideo() {
             if (!promptInput.value.trim()) {
                 showToast("Please enter a prompt first");
                 return;
@@ -666,35 +726,75 @@
             videoLoading.classList.remove('hidden');
             videoPreview.classList.add('hidden');
-            // Simulate video generation
-            setTimeout(() => {
                 videoLoading.classList.add('hidden');
                 videoPreview.classList.remove('hidden');
                 showToast("Video generated successfully!");
-            }, 3000);
         }
-        function selectPlan(plan) {
             selectedPlan = plan;
-            // Update UI
-            planCards.forEach(card => {
-                if (card.dataset.plan === plan) {
-                    card.classList.add('selected-plan');
-                    card.querySelector('button').classList.add('bg-indigo-600', 'text-white');
-                    card.querySelector('button').classList.remove('border-gray-300', 'text-gray-700');
-                } else {
-                    card.classList.remove('selected-plan');
-                    card.querySelector('button').classList.remove('bg-indigo-600', 'text-white');
-                    card.querySelector('button').classList.add('border-gray-300', 'text-gray-700');
-                }
-            });
-            // Show confirmation
-            planConfirmation.classList.remove('hidden');
-            setTimeout(() => {
-                planConfirmation.classList.add('hidden');
-            }, 3000);
         }
         function showToast(message) {

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         .gradient-bg {
+            background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
         }
         .upload-area {
             border: 2px dashed #cbd5e0;
         }
     </style>
 </head>
+<body class="min-h-screen">
     <!-- Navigation Bar -->
+    <nav class="bg-gray-900 shadow-sm sticky top-0 z-10 border-b border-purple-500">
         <div class="container mx-auto px-4 py-3 flex justify-between items-center">
             <div class="flex items-center">
+                <i class="fas fa-robot text-purple-400 text-2xl mr-2"></i>
+                <span class="text-xl font-bold text-purple-200">OhamLab</span>
             </div>
             <div class="hidden md:flex space-x-8">
                 <a href="#home" class="nav-link text-gray-700 hover:text-indigo-600 font-medium">Home</a>
         <main class="max-w-4xl mx-auto">
             <!-- Home Section -->
             <section id="home" class="text-center py-16">
+                <h1 class="text-4xl font-bold text-purple-200 mb-4">OhamLab - Create Your Digital Twin</h1>
+                <p class="text-xl text-purple-300 mb-8">Generate AI-powered avatars that look just like you</p>
                 <div class="flex space-x-4 justify-center">
+                    <button id="get-started-btn" class="bg-gradient-to-r from-purple-500 to-pink-600 text-white px-8 py-3 rounded-full font-medium shadow-lg hover:opacity-90 transition">
                         Get Started
                     </button>
                     <button id="demo-btn" class="bg-white text-indigo-600 border-2 border-indigo-600 px-8 py-3 rounded-full font-medium shadow-lg hover:bg-indigo-50 transition">
             <section id="features" class="mb-16">
                 <h2 class="text-2xl font-bold text-gray-800 mb-8 text-center">Key Features</h2>
                 <div class="grid md:grid-cols-3 gap-8">
+                    <div class="bg-gray-800 p-6 rounded-xl shadow-md border border-purple-500">
+                        <div class="text-purple-400 text-3xl mb-4 neon-glow">
                             <i class="fas fa-user-circle"></i>
                         </div>
                         <h3 class="text-lg font-semibold mb-2">Realistic Avatars</h3>
             </section>
             <!-- Upload Section -->
+            <section id="create" class="mb-12 bg-gray-800 rounded-xl shadow-lg p-6 hidden border border-purple-500">
                 <h2 class="text-xl font-semibold text-gray-800 mb-6">Create Your AI Clone</h2>
                 <div class="grid md:grid-cols-2 gap-6">
             </section>
             <!-- Pricing Plans -->
+            <section id="pricing" class="mb-12 bg-gray-800 rounded-xl shadow-lg p-6 border border-purple-500">
                 <h2 class="text-xl font-semibold text-gray-800 mb-6">Choose Your Plan</h2>
                 <div class="grid md:grid-cols-3 gap-6">
         </main>
         <!-- Footer -->
+        <footer class="mt-12 bg-gray-900 py-8 border-t border-purple-500">
             <div class="container mx-auto px-4 text-center text-gray-600">
                 <p>© 2025 OhamLab. All rights reserved.</p>
                 <div class="flex justify-center space-x-4 mt-4">
             });
         }
+        async function handleImageUpload(e) {
             const files = Array.from(e.target.files);
             if (files.length < 5) {
             // Show the train model button if we have enough images
             trainModelSection.classList.remove('hidden');
+            // Mock API call when images are ready
+            try {
+                const formData = new FormData();
+                selectedImages.forEach(file => formData.append('files', file));
+                const res = await fetch("https://rahul7star-ohamlab-uploader.hf.space/upload", {
+                    method: "POST",
+                    body: formData,
+                    // Do NOT set Content-Type here! Let browser handle it
+                });
+                if (!res.ok) throw new Error('Upload failed');
+                const data = await res.json();
+                console.log('Upload successful:', data);
+                showToast('Images uploaded successfully!');
+            } catch (err) {
+                console.error('Upload error:', err);
+                showToast('Upload failed. Please try again.');
+            }
         }
+        async function handleZipUpload(e) {
             if (e.target.files.length > 0) {
+                try {
+                    const formData = new FormData();
+                    formData.append('zip', e.target.files[0]);
+                    const res = await fetch("https://rahul7star-ohamlab-uploader.hf.space/upload-zip", {
+                        method: "POST",
+                        body: formData,
+                        // Do NOT set Content-Type here! Let browser handle it
+                    });
+                    if (!res.ok) throw new Error('ZIP upload failed');
+                    // Show the train model button when ZIP is uploaded
+                    trainModelSection.classList.remove('hidden');
+                    showToast("ZIP file uploaded successfully!");
+                } catch (err) {
+                    console.error('ZIP upload error:', err);
+                    showToast('ZIP upload failed. Please try again.');
+                }
             }
         }
             trainModelSection.classList.add('hidden');
         }
+        async function trainModel() {
             // Show training progress
             trainingProgress.classList.remove('hidden');
             trainModelSection.classList.add('hidden');
+            // Mock API call
+            try {
+                const res = await fetch("https://rahul7star-ohamlab-uploader.hf.space/train", {
+                    method: "POST",
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        imageCount: selectedImages.length
+                    })
+                });
+                if (!res.ok) throw new Error('Training failed');
+                // Simulate training progress with real API response
+                const data = await res.json();
+                console.log('Training started:', data);
+                let progress = 0;
+                const interval = setInterval(() => {
+                    progress += Math.random() * 10;
+                    if (progress > 100) progress = 100;
+                    progressBar.style.width = `${progress}%`;
+                    progressPercent.textContent = `${Math.floor(progress)}%`;
+                    if (progress === 100) {
+                        clearInterval(interval);
+                        setTimeout(() => {
+                            trainingProgress.classList.add('hidden');
+                            showResults();
+                        }, 500);
+                    }
+                }, 500);
+            } catch (err) {
+                console.error('Training error:', err);
+                showToast('Training failed. Please try again.');
+                trainingProgress.classList.add('hidden');
+                trainModelSection.classList.remove('hidden');
+            }
         }
         function showResults() {
             }, 800);
         }
+        async function generateVideo() {
             if (!promptInput.value.trim()) {
                 showToast("Please enter a prompt first");
                 return;
             videoLoading.classList.remove('hidden');
             videoPreview.classList.add('hidden');
+            // Mock API call
+            try {
+                const res = await fetch("https://rahul7star-ohamlab-uploader.hf.space/generate-video", {
+                    method: "POST",
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        prompt: promptInput.value.trim()
+                    })
+                });
+                if (!res.ok) throw new Error('Video generation failed');
+                const data = await res.json();
+                console.log('Video generated:', data);
                 videoLoading.classList.add('hidden');
                 videoPreview.classList.remove('hidden');
                 showToast("Video generated successfully!");
+            } catch (err) {
+                console.error('Video generation error:', err);
+                showToast('Video generation failed. Please try again.');
+                videoLoading.classList.add('hidden');
+            }
         }
+        async function selectPlan(plan) {
             selectedPlan = plan;
+            // Mock API call
+            try {
+                const res = await fetch("https://rahul7star-ohamlab-uploader.hf.space/update-plan", {
+                    method: "POST",
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        plan: plan
+                    })
+                });
+                if (!res.ok) throw new Error('Plan update failed');
+                const data = await res.json();
+                console.log('Plan updated:', data);
+                // Update UI
+                planCards.forEach(card => {
+                    if (card.dataset.plan === plan) {
+                        card.classList.add('selected-plan');
+                        card.querySelector('button').classList.add('bg-indigo-600', 'text-white');
+                        card.querySelector('button').classList.remove('border-gray-300', 'text-gray-700');
+                    } else {
+                        card.classList.remove('selected-plan');
+                        card.querySelector('button').classList.remove('bg-indigo-600', 'text-white');
+                        card.querySelector('button').classList.add('border-gray-300', 'text-gray-700');
+                    }
+                });
+                // Show confirmation
+                planConfirmation.classList.remove('hidden');
+                setTimeout(() => {
+                    planConfirmation.classList.add('hidden');
+                }, 3000);
+            } catch (err) {
+                console.error('Plan update error:', err);
+                showToast('Plan update failed. Please try again.');
+            }
         }
         function showToast(message) {

fix API Type - Post URL - “https://rahul7star-ohamlab-uploader.hf.space/upload" Upload Zip Api type - POST URL fetch("https://rahul7star-ohamlab-uploader.hf.space/upload-zip" - Follow Up Deployment

fix API Type - Post URL - “https://rahul7star-ohamlab-uploader.hf.space/upload"  Upload Zip Api type - POST URL fetch("https://rahul7star-ohamlab-uploader.hf.space/upload-zip" - Follow Up Deployment