Update app.py

app.py

@@ -118,29 +118,18 @@ document.addEventListener('DOMContentLoaded', function () {
 </script>
 """
 def load_gallery_images():
-    folder_path = "New folder (4)"
-    images_with_captions = []
+    folder_path = "New folder (4)"  # Ensure this path is correct
+    images = []
     if not os.path.exists(folder_path):
-        return images_with_captions  
+        return images  
     for filename in os.listdir(folder_path):
         if filename.lower().endswith(('.png', '.jpg', '.jpeg', '.webp')):
             img_path = os.path.abspath(os.path.join(folder_path, filename))  
-            caption = filename.rsplit('.', 1)[0]  
-            images_with_captions.append((img_path, caption))
-    return images_with_captions
+            images.append(img_path)  # Append only the file paths
+    return images
 
 gallery_images = load_gallery_images()
 
-gallery_html = "<div class='carousel'>"
-for img_path, caption in gallery_images:
-    gallery_html += (
-        f"<div class='image-container'>"
-        f"<img src='file://{img_path}' alt='Design'>"
-        f"<div class='caption'>{caption}</div>"
-        f"</div>"
-    )
-gallery_html += "</div>"
-
 with gr.Blocks(css=custom_css) as interface:
     gr.HTML(custom_js)
     gr.Markdown("# **AI Phone Cover Designer**")
@@ -150,7 +139,10 @@ with gr.Blocks(css=custom_css) as interface:
         with gr.Tab("Home"):
             gr.Markdown("Welcome to the **AI Phone Cover Designer**! Use the 'Design' tab to start creating custom designs.")
             gr.Markdown("### Gallery")
-            gr.HTML(gallery_html)
+            if gallery_images:
+                gr.Gallery(value=gallery_images, label="Design Gallery").style(grid=[2], height="auto")
+            else:
+                gr.Markdown("No images found in the gallery folder.")
 
         with gr.Tab("Design"):
             with gr.Row():