Update app.py

app.py

@@ -117,35 +117,39 @@ document.addEventListener('DOMContentLoaded', function () {
 });
 </script>
 """
-
-# Function to load images dynamically from "New folder (4)"
 def load_gallery_images():
     folder_path = "New folder (4)"
     images_with_captions = []
+    if not os.path.exists(folder_path):
+        return images_with_captions  
     for filename in os.listdir(folder_path):
         if filename.lower().endswith(('.png', '.jpg', '.jpeg', '.webp')):
-            img_path = os.path.join(folder_path, filename)
-            caption = filename.rsplit('.', 1)[0]  # Use filename (without extension) as caption
+            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
 
 gallery_images = load_gallery_images()
 
-# Gradio interface
+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**")
     gr.Markdown("Create custom phone covers with AI. Save your designs for future use.")
 
-    # Navigation Tabs
     with gr.Tabs():
         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")
-            gallery_html = "<div class='carousel'>"
-            for img_path, caption in gallery_images:
-                gallery_html += f"<div class='image-container'><img src='{img_path}' alt='Design'><div class='caption'>{caption}</div></div>"
-            gallery_html += "</div>"
             gr.HTML(gallery_html)
 
         with gr.Tab("Design"):
@@ -161,7 +165,6 @@ with gr.Blocks(css=custom_css) as interface:
                     output_image = gr.Image(label="Generated Design")
                     output_message = gr.Textbox(label="AI Assistant Message", interactive=False)
 
-            # Button Actions
             generate_button.click(
                 infer,
                 inputs=[color_prompt, phone_type_prompt, design_prompt],
@@ -187,5 +190,4 @@ with gr.Blocks(css=custom_css) as interface:
             Start designing today and bring your creative ideas to life!
             """)
 
-# Launch the app
 interface.launch(debug=True)