Update app.py

app.py

@@ -49,101 +49,144 @@ def save_design(image):
     image.save(file_path)
     return f"Design saved as {file_path}!"
 
-# Custom CSS for animations
+# Updated Custom CSS for Modern Background and Animation
 custom_css = """
 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     margin: 0;
     padding: 0;
     overflow: hidden;
-}
-body::before {
-    content: "";
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(-45deg, #ff9a9e, #fad0c4, #fbc2eb, #8fd3f4);
+    background: linear-gradient(135deg, #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;
+    transition: transform 0.3s, box-shadow 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;
 }
-"""
 
-# 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);
+#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;
     }
-    document.addEventListener('gradio_event:output_update', (event) => {
-        const outputText = event.detail?.text || '';
-        if (outputText) {
-            speak(outputText);
-        }
-    });
-});
-</script>
+    h3 {
+        font-size: 1em;
+    }
+
+    #gallery-container {
+        flex-direction: column;
+        align-items: center;
+    }
+}
 """
-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.")
-            gr.Markdown("### Gallery")
+            
+            # Add animation and more visual elements
+            gr.Markdown("### Gallery of Designs")
             if gallery_images:
-                gr.Gallery(value=gallery_images, label="Design Gallery", columns=2, height="auto")
+                # 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")
             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():
@@ -170,7 +213,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.
@@ -183,4 +226,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)