Update app.py

app.py

@@ -49,144 +49,101 @@ def save_design(image):
     image.save(file_path)
     return f"Design saved as {file_path}!"
 
-# Updated Custom CSS for Modern Background and Animation
+# Custom CSS for animations
 custom_css = """
 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     margin: 0;
     padding: 0;
     overflow: hidden;
-    background: linear-gradient(135deg, #ff9a9e, #fad0c4, #fbc2eb, #8fd3f4);
+}
+body::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(-45deg, #ff9a9e, #fad0c4, #fbc2eb, #8fd3f4);
     background-size: 400% 400%;
+    z-index: -1;
     animation: gradientShift 15s ease infinite;
 }
-
 @keyframes gradientShift {
     0% { background-position: 0% 50%; }
     50% { background-position: 100% 50%; }
     100% { background-position: 0% 50%; }
 }
-
-h1, h2, h3 {
-    animation: fadeIn 1s ease-in-out;
-}
-
-h1:hover, h2:hover, h3:hover {
-    color: #fbc2eb;
-    transform: scale(1.05);
-    transition: transform 0.3s, color 0.3s;
-}
-
 .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, box-shadow 0.3s;
+    transition: transform 0.3s;
 }
-
 .carousel img:hover {
     transform: scale(1.1);
-    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
 }
-
 .carousel .caption {
     margin-top: 5px;
     font-size: 14px;
     color: #333;
 }
+"""
 
-#gallery-container {
-    max-width: 100%;
-    padding: 20px;
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-}
-
-#gallery-container img {
-    width: 200px;
-    height: auto;
-    border-radius: 10px;
-    margin: 10px;
-    transition: transform 0.3s, box-shadow 0.3s;
-}
-
-#gallery-container img:hover {
-    transform: scale(1.05);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-}
-
-h1 {
-    font-size: 3em;
-    text-align: center;
-    color: #fff;
-    margin-top: 50px;
-}
-
-h2 {
-    font-size: 2em;
-    text-align: center;
-    color: #fff;
-    margin-top: 20px;
-}
-
-h3 {
-    font-size: 1.2em;
-    text-align: center;
-    color: #fff;
-}
-
-@media (max-width: 768px) {
-    h1 {
-        font-size: 2em;
-    }
-    h2 {
-        font-size: 1.5em;
-    }
-    h3 {
-        font-size: 1em;
-    }
-
-    #gallery-container {
-        flex-direction: column;
-        align-items: center;
+# JavaScript for text-to-speech
+custom_js = """
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+    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>
 """
+def load_gallery_images():
+    folder_path = "New folder (4)"  # Ensure this path is correct
+    images = []
+    if not os.path.exists(folder_path):
+        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))  
+            images.append(img_path)  # Append only the file paths
+    return images
+
+gallery_images = load_gallery_images()
 
-# Update the gallery layout and add responsive behavior
 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.")
-    
+
     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.")
-            
-            # Add animation and more visual elements
-            gr.Markdown("### Gallery of Designs")
+            gr.Markdown("### Gallery")
             if gallery_images:
-                # Adjust the gallery to fit the new responsive design
-                gr.Gallery(value=gallery_images, label="Design Gallery", columns=2, height="auto").style(width="100%", height="auto")
+                gr.Gallery(value=gallery_images, label="Design Gallery", columns=2, height="auto")
             else:
                 gr.Markdown("No images found in the gallery folder.")
-                
-            gr.Markdown("""
-            ## Get Inspired!
-            Browse through our design gallery to see what others have created, and get inspiration for your next custom phone cover!
-            """)
+
 
         with gr.Tab("Design"):
             with gr.Row():
@@ -213,7 +170,7 @@ with gr.Blocks(css=custom_css) as interface:
             )
 
         with gr.Tab("About"):
-            gr.Markdown(""" 
+            gr.Markdown("""
             ## About AI Phone Cover Maker
             The **AI Phone Cover Maker** is a cutting-edge tool designed to help users create personalized phone cover designs quickly and easily. 
             Powered by AI, it uses advanced image generation techniques to craft unique, high-quality designs for any mobile device.
@@ -226,4 +183,4 @@ with gr.Blocks(css=custom_css) as interface:
             Start designing today and bring your creative ideas to life!
             """)
 
-interface.launch(debug=True)
+interface.launch(debug=True)