Update app.py

app.py

@@ -73,6 +73,29 @@ body::before {
     50% { background-position: 100% 50%; }
     100% { background-position: 0% 50%; }
 }
+.carousel {
+    display: flex;
+    overflow-x: auto;
+    scroll-behavior: smooth;
+}
+.carousel .image-container {
+    display: inline-block;
+    text-align: center;
+    margin: 0 10px;
+}
+.carousel img {
+    max-height: 200px;
+    border-radius: 10px;
+    transition: transform 0.3s;
+}
+.carousel img:hover {
+    transform: scale(1.1);
+}
+.carousel .caption {
+    margin-top: 5px;
+    font-size: 14px;
+    color: #333;
+}
 """
 
 # JavaScript for text-to-speech and particles
@@ -105,17 +128,36 @@ document.addEventListener('DOMContentLoaded', function () {
 </script>
 """
 
+# Gallery Images with captions
+gallery_images = [
+    ("https://gaur3009-phone-c.hf.space/gradio_api/file=/tmp/gradio/387f5407e32dd2e2d9e7017977f5ee98e4f40dcb8b1d2a9ef23612255a675163/image.webp
+", "Red Color, iPhone 14, Naruto Anime Theme"),
+    ("https://gaur3009-phone-c.hf.space/gradio_api/file=/tmp/gradio/3037d9cae7a86b29be5969cf3a361ae847915b54d97d6d5dffb6e019a2b9ddc9/image.webp
+", "Red Color, iPhone 14, Darth Vader Theme"),
+    ("https://gaur3009-phone-c.hf.space/gradio_api/file=/tmp/gradio/1958c8d60219357edbb2e1f69331152f1cd1109407b274c4511a810650dd574b/image.webp
+", "Black, iPhone 15, Thomas Shelby(Peaky Blinders) Theme"),
+    ("https://gaur3009-phone-c.hf.space/gradio_api/file=/tmp/gradio/183392add00a7fa3d53653f856bc88d4113bd74c0d37c43de7a9af414e9c1d84/image.webp", "Green color, iPhone, Green Goblin"),
+    ("https://gaur3009-phone-c.hf.space/gradio_api/file=/tmp/gradio/b7b0b2415f15f810f71658616a885b97c0466d09f1d852684a868ab9b5d18e6c/image.webp
+", "White and Cream Color, iPhone 15, Iron-Man"),
+]
+
 # Gradio interface
 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_url, caption in gallery_images:
+                gallery_html += f"<div class='image-container'><img src='{img_url}' alt='Design'><div class='caption'>{caption}</div></div>"
+            gallery_html += "</div>"
+            gr.HTML(gallery_html)
+
         with gr.Tab("Design"):
             with gr.Row():
                 with gr.Column(scale=1):