still upload images not working - Follow Up Deployment

index.html

@@ -125,13 +125,13 @@
                             <h4 class="text-lg font-medium mb-4">Upload Options</h4>
                             <div class="grid grid-cols-2 gap-4 mb-4">
                                 <div id="images-upload" class="upload-area rounded-lg p-6 text-center cursor-pointer">
-                                    <input type="file" id="image-upload" class="hidden" accept="image/*" multiple capture="environment">
+                                    <input type="file" id="image-upload" class="hidden" accept="image/*" multiple>
                                     <div id="images-upload-content" class="flex flex-col items-center justify-center">
                                         <i class="fas fa-images text-3xl text-purple-500 mb-3"></i>
                                         <p class="font-medium mb-1">Upload Multiple Images</p>
                                         <p class="text-sm text-gray-500">(Minimum 5 required)</p>
                                         <button id="images-upload-btn" class="mt-3 bg-purple-500 hover:bg-purple-600 text-white text-sm font-medium py-1.5 px-4 rounded-full transition">
-                                            Select Images
+                                            Open Gallery
                                         </button>
                                     </div>
                                 </div>
@@ -150,10 +150,10 @@
                             <div id="upload-preview-container" class="hidden">
                                 <div id="images-preview" class="hidden mb-4">
                                     <p class="text-sm font-medium mb-2"><span id="image-count">0</span> images selected</p>
-                                    <div class="flex space-x-2 overflow-x-auto pb-2">
+                                    <div class="flex space-x-2 overflow-x-auto pb-2" style="max-height: 200px; flex-wrap: wrap; gap: 8px;">
                                         <!-- Images will be added here -->
                                     </div>
-                                </div>
+>                                </div>
                                 <div id="zip-preview" class="hidden mb-4">
                                     <p class="text-sm font-medium mb-2">ZIP file ready for training</p>
                                     <div class="flex items-center text-gray-500">
@@ -366,7 +366,7 @@
 
         <!-- About Section -->
         <section id="about" class="bg-white rounded-xl shadow-lg p-8 mb-12">
-            <h3 class="text-2xl font-bold mb-6">About AI Clone Creator</h3>
+            <h3 class="text-2xl font-bold mb-6">About AI Clone Creators</h3>
             <div class="prose max-w-none">
                 <p class="mb-4">
                     AI Clone Creator uses advanced artificial intelligence to generate realistic digital twins from just a single photo. Our technology can create images and videos of you in any scenario you imagine.
@@ -476,7 +476,7 @@
                     return;
                 }
 
-                document.getElementById('upload-preview').classList.remove('hidden');
+                document.getElementById('upload-preview-container').classList.remove('hidden');
                 document.getElementById('images-preview').classList.remove('hidden');
                 document.getElementById('zip-preview').classList.add('hidden');
                 
@@ -489,9 +489,8 @@
                 
                 document.getElementById('image-count').textContent = files.length;
                 
-                // Show first 5 images as preview
-                const filesToShow = Math.min(files.length, 5);
-                for (let i = 0; i < filesToShow; i++) {
+                // Show all images as preview in a scrollable container
+                for (let i = 0; i < files.length; i++) {
                     const file = files[i];
                     if (!file.type.match('image.*')) continue;