Update app.py

app.py

@@ -48,6 +48,16 @@ def save_design(image):
     image.save(file_path)
     return f"Design saved as {file_path}!"
 
+# Function to fetch saved designs for carousel
+def fetch_saved_designs_with_captions():
+    # Replace with your own logic to fetch saved images and captions
+    designs = [
+        ("saved_design_1.png", "Bold Red Geometric Design"),
+        ("saved_design_2.png", "Blue Abstract Art"),
+        ("saved_design_3.png", "Green Floral Pattern"),
+    ]
+    return [{"image": img, "caption": cap} for img, cap in designs]
+
 # Custom CSS for animations
 custom_css = """
 body {
@@ -75,46 +85,28 @@ body::before {
 }
 """
 
-# JavaScript for text-to-speech and particles
-custom_js = """
-<script>
-document.addEventListener('DOMContentLoaded', function () {
-    // Add particles
-    const particlesContainer = document.createElement('div');
-    particlesContainer.classList.add('particles');
-    for (let i = 0; i < 5; i++) {
-        const particle = document.createElement('div');
-        particle.classList.add('particle');
-        particlesContainer.appendChild(particle);
-    }
-    document.body.appendChild(particlesContainer);
-
-    // Text-to-speech functionality
-    function speak(text) {
-        const synth = window.speechSynthesis;
-        const utterance = new SpeechSynthesisUtterance(text);
-        synth.speak(utterance);
-    }
-    document.addEventListener('gradio_event:output_update', (event) => {
-        const outputText = event.detail?.text || '';
-        if (outputText) {
-            speak(outputText);
-        }
-    });
-});
-</script>
-"""
-
 # 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("### Welcome to the **AI Phone Cover Designer**!")
+            gr.Markdown("Below is a carousel showcasing some of the saved designs.")
+
+            # Carousel to display saved designs
+            design_carousel = gr.Carousel(
+                items=fetch_saved_designs_with_captions(),
+                item_width=300,
+                item_height=400,
+                item_spacing=10,
+                loop=True,
+                autoplay=True,
+                autoplay_interval=3000,
+                label="Saved Designs Carousel",
+            )
         
         with gr.Tab("Design"):
             with gr.Row():
@@ -122,7 +114,6 @@ with gr.Blocks(css=custom_css) as interface:
                     color_prompt = gr.Textbox(label="Color", placeholder="E.g., Red")
                     phone_type_prompt = gr.Textbox(label="Mobile type", placeholder="E.g., iPhone, Samsung")
                     design_prompt = gr.Textbox(label="Design Details", placeholder="E.g., Bold stripes with geometric patterns")
-                    chatbot = gr.Chatbot()
                     generate_button = gr.Button("Generate Design")
                     save_button = gr.Button("Save Design")
                 with gr.Column(scale=1):
@@ -155,5 +146,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)