Hugging Face's logo

Spaces:
rahul7star
/
ai-clone-me
Running

App Files Community
rahul7star commited on
Commit
1b98f96
·
verified ·
1 Parent(s): c81b265

change the main a[pp bg color to light theme . also show "train your ai model" when image upload API is success. load spinner till API call is going . add same logic for ZIP upload also ..once zip is uploaded then only show the "train ai model : - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +57 -17
index.html CHANGED
@@ -8,7 +8,7 @@
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
  .gradient-bg {
11
- background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
12
  }
13
  .upload-area {
14
  border: 2px dashed #cbd5e0;
@@ -48,7 +48,7 @@
48
  }
49
  </style>
50
  </head>
51
- <body class="min-h-screen">
52
  <!-- Navigation Bar -->
53
  <nav class="bg-gray-900 shadow-sm sticky top-0 z-10 border-b border-purple-500">
54
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
@@ -94,8 +94,8 @@
94
  <main class="max-w-4xl mx-auto">
95
  <!-- Home Section -->
96
  <section id="home" class="text-center py-16">
97
- <h1 class="text-4xl font-bold text-purple-200 mb-4">OhamLab - Create Your Digital Twin</h1>
98
- <p class="text-xl text-purple-300 mb-8">Generate AI-powered avatars that look just like you</p>
99
  <div class="flex space-x-4 justify-center">
100
  <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">
101
  Get Started
@@ -110,8 +110,8 @@
110
  <section id="features" class="mb-16">
111
  <h2 class="text-2xl font-bold text-gray-800 mb-8 text-center">Key Features</h2>
112
  <div class="grid md:grid-cols-3 gap-8">
113
- <div class="bg-gray-800 p-6 rounded-xl shadow-md border border-purple-500">
114
- <div class="text-purple-400 text-3xl mb-4 neon-glow">
115
  <i class="fas fa-user-circle"></i>
116
  </div>
117
  <h3 class="text-lg font-semibold mb-2">Realistic Avatars</h3>
@@ -135,7 +135,7 @@
135
  </section>
136
 
137
  <!-- Upload Section -->
138
- <section id="create" class="mb-12 bg-gray-800 rounded-xl shadow-lg p-6 hidden border border-purple-500">
139
  <h2 class="text-xl font-semibold text-gray-800 mb-6">Create Your AI Clone</h2>
140
 
141
  <div class="grid md:grid-cols-2 gap-6">
@@ -261,7 +261,7 @@
261
  </section>
262
 
263
  <!-- Pricing Plans -->
264
- <section id="pricing" class="mb-12 bg-gray-800 rounded-xl shadow-lg p-6 border border-purple-500">
265
  <h2 class="text-xl font-semibold text-gray-800 mb-6">Choose Your Plan</h2>
266
 
267
  <div class="grid md:grid-cols-3 gap-6">
@@ -382,8 +382,8 @@
382
  </main>
383
 
384
  <!-- Footer -->
385
- <footer class="mt-12 bg-gray-900 py-8 border-t border-purple-500">
386
- <div class="container mx-auto px-4 text-center text-gray-600">
387
  <p>© 2025 OhamLab. All rights reserved.</p>
388
  <div class="flex justify-center space-x-4 mt-4">
389
  <a href="https://www.instagram.com/ohamlab/" target="_blank" class="text-gray-600 hover:text-pink-500">
@@ -565,10 +565,12 @@
565
  selectedImages = files.slice(0, 5); // Limit to 5 images
566
  updateImagePreview();
567
 
568
- // Show the train model button if we have enough images
569
- trainModelSection.classList.remove('hidden');
 
 
 
570
 
571
- // Mock API call when images are ready
572
  try {
573
  const formData = new FormData();
574
  selectedImages.forEach(file => formData.append('files', file));
@@ -576,21 +578,44 @@
576
  const res = await fetch("https://rahul7star-ohamlab-uploader.hf.space/upload", {
577
  method: "POST",
578
  body: formData,
579
- // Do NOT set Content-Type here! Let browser handle it
580
  });
581
 
582
  if (!res.ok) throw new Error('Upload failed');
583
  const data = await res.json();
584
- console.log('Upload successful:', data);
 
 
 
 
 
 
 
 
 
585
  showToast('Images uploaded successfully!');
586
  } catch (err) {
587
  console.error('Upload error:', err);
 
 
 
 
 
 
 
 
 
588
  showToast('Upload failed. Please try again.');
589
  }
590
  }
591
 
592
  async function handleZipUpload(e) {
593
  if (e.target.files.length > 0) {
 
 
 
 
 
 
594
  try {
595
  const formData = new FormData();
596
  formData.append('zip', e.target.files[0]);
@@ -598,16 +623,31 @@
598
  const res = await fetch("https://rahul7star-ohamlab-uploader.hf.space/upload-zip", {
599
  method: "POST",
600
  body: formData,
601
- // Do NOT set Content-Type here! Let browser handle it
602
  });
603
 
604
  if (!res.ok) throw new Error('ZIP upload failed');
605
 
606
- // Show the train model button when ZIP is uploaded
 
 
 
 
 
 
 
607
  trainModelSection.classList.remove('hidden');
608
  showToast("ZIP file uploaded successfully!");
609
  } catch (err) {
610
  console.error('ZIP upload error:', err);
 
 
 
 
 
 
 
 
 
611
  showToast('ZIP upload failed. Please try again.');
612
  }
613
  }
 
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
  .gradient-bg {
11
+ background: linear-gradient(135deg, #f9f9f9 0%, #f0f4ff 50%, #f5f7fa 100%);
12
  }
13
  .upload-area {
14
  border: 2px dashed #cbd5e0;
 
48
  }
49
  </style>
50
  </head>
51
+ <body class="min-h-screen bg-gray-50">
52
  <!-- Navigation Bar -->
53
  <nav class="bg-gray-900 shadow-sm sticky top-0 z-10 border-b border-purple-500">
54
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
 
94
  <main class="max-w-4xl mx-auto">
95
  <!-- Home Section -->
96
  <section id="home" class="text-center py-16">
97
+ <h1 class="text-4xl font-bold text-gray-800 mb-4">OhamLab - Create Your Digital Twin</h1>
98
+ <p class="text-xl text-gray-600 mb-8">Generate AI-powered avatars that look just like you</p>
99
  <div class="flex space-x-4 justify-center">
100
  <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">
101
  Get Started
 
110
  <section id="features" class="mb-16">
111
  <h2 class="text-2xl font-bold text-gray-800 mb-8 text-center">Key Features</h2>
112
  <div class="grid md:grid-cols-3 gap-8">
113
+ <div class="bg-white p-6 rounded-xl shadow-md border border-indigo-100">
114
+ <div class="text-indigo-500 text-3xl mb-4">
115
  <i class="fas fa-user-circle"></i>
116
  </div>
117
  <h3 class="text-lg font-semibold mb-2">Realistic Avatars</h3>
 
135
  </section>
136
 
137
  <!-- Upload Section -->
138
+ <section id="create" class="mb-12 bg-white rounded-xl shadow-lg p-6 hidden border border-gray-200">
139
  <h2 class="text-xl font-semibold text-gray-800 mb-6">Create Your AI Clone</h2>
140
 
141
  <div class="grid md:grid-cols-2 gap-6">
 
261
  </section>
262
 
263
  <!-- Pricing Plans -->
264
+ <section id="pricing" class="mb-12 bg-white rounded-xl shadow-lg p-6 border border-gray-200">
265
  <h2 class="text-xl font-semibold text-gray-800 mb-6">Choose Your Plan</h2>
266
 
267
  <div class="grid md:grid-cols-3 gap-6">
 
382
  </main>
383
 
384
  <!-- Footer -->
385
+ <footer class="mt-12 bg-gray-50 py-8 border-t border-gray-200">
386
+ <div class="container mx-auto px-4 text-center text-gray-500">
387
  <p>© 2025 OhamLab. All rights reserved.</p>
388
  <div class="flex justify-center space-x-4 mt-4">
389
  <a href="https://www.instagram.com/ohamlab/" target="_blank" class="text-gray-600 hover:text-pink-500">
 
565
  selectedImages = files.slice(0, 5); // Limit to 5 images
566
  updateImagePreview();
567
 
568
+ // Show loading spinner
569
+ const uploadSpinner = document.createElement('div');
570
+ uploadSpinner.className = 'inline-block animate-spin rounded-full h-6 w-6 border-t-2 border-b-2 border-indigo-500';
571
+ imageUpload.innerHTML = '';
572
+ imageUpload.appendChild(uploadSpinner);
573
 
 
574
  try {
575
  const formData = new FormData();
576
  selectedImages.forEach(file => formData.append('files', file));
 
578
  const res = await fetch("https://rahul7star-ohamlab-uploader.hf.space/upload", {
579
  method: "POST",
580
  body: formData,
 
581
  });
582
 
583
  if (!res.ok) throw new Error('Upload failed');
584
  const data = await res.json();
585
+
586
+ // Restore upload area with success message
587
+ imageUpload.innerHTML = `
588
+ <i class="fas fa-check-circle text-green-500 text-4xl mb-4"></i>
589
+ <h3 class="text-lg font-medium text-gray-700 mb-2">Upload Complete</h3>
590
+ <p class="text-gray-500 mb-4">${selectedImages.length} images uploaded successfully</p>
591
+ `;
592
+
593
+ // Show the train model button
594
+ trainModelSection.classList.remove('hidden');
595
  showToast('Images uploaded successfully!');
596
  } catch (err) {
597
  console.error('Upload error:', err);
598
+ // Restore original upload area
599
+ imageUpload.innerHTML = `
600
+ <i class="fas fa-images text-indigo-500 text-4xl mb-4"></i>
601
+ <h3 class="text-lg font-medium text-gray-700 mb-2">Upload Images</h3>
602
+ <p class="text-gray-500 mb-4">Upload at least 5 images of yourself from different angles</p>
603
+ <button class="bg-indigo-100 text-indigo-600 px-4 py-2 rounded-full text-sm font-medium">
604
+ Select Files
605
+ </button>
606
+ `;
607
  showToast('Upload failed. Please try again.');
608
  }
609
  }
610
 
611
  async function handleZipUpload(e) {
612
  if (e.target.files.length > 0) {
613
+ // Show loading spinner
614
+ const uploadSpinner = document.createElement('div');
615
+ uploadSpinner.className = 'inline-block animate-spin rounded-full h-6 w-6 border-t-2 border-b-2 border-purple-500';
616
+ zipUpload.innerHTML = '';
617
+ zipUpload.appendChild(uploadSpinner);
618
+
619
  try {
620
  const formData = new FormData();
621
  formData.append('zip', e.target.files[0]);
 
623
  const res = await fetch("https://rahul7star-ohamlab-uploader.hf.space/upload-zip", {
624
  method: "POST",
625
  body: formData,
 
626
  });
627
 
628
  if (!res.ok) throw new Error('ZIP upload failed');
629
 
630
+ // Restore upload area with success message
631
+ zipUpload.innerHTML = `
632
+ <i class="fas fa-check-circle text-green-500 text-4xl mb-4"></i>
633
+ <h3 class="text-lg font-medium text-gray-700 mb-2">Upload Complete</h3>
634
+ <p class="text-gray-500 mb-4">ZIP file uploaded successfully</p>
635
+ `;
636
+
637
+ // Show the train model button
638
  trainModelSection.classList.remove('hidden');
639
  showToast("ZIP file uploaded successfully!");
640
  } catch (err) {
641
  console.error('ZIP upload error:', err);
642
+ // Restore original upload area
643
+ zipUpload.innerHTML = `
644
+ <i class="fas fa-file-archive text-purple-500 text-4xl mb-4"></i>
645
+ <h3 class="text-lg font-medium text-gray-700 mb-2">Upload ZIP File</h3>
646
+ <p class="text-gray-500 mb-4">Compress your images into a single .zip file</p>
647
+ <button class="bg-purple-100 text-purple-600 px-4 py-2 rounded-full text-sm font-medium">
648
+ Select ZIP File
649
+ </button>
650
+ `;
651
  showToast('ZIP upload failed. Please try again.');
652
  }
653
  }