Update app.py

app.py

@@ -1,9 +1,8 @@
 import gradio as gr
 import requests
-from PIL import Image, ImageDraw, ImageFont
+from PIL import Image
 from io import BytesIO
 from tqdm import tqdm
-import numpy as np
 import time
 
 repo = "artificialguybr/TshirtDesignRedmond-V2"
@@ -43,70 +42,12 @@ def infer(color_prompt, phone_type_prompt, design_prompt):
         else:
             raise Exception(f"API Error: {response.status_code}")
 
-def save_design(image, color_prompt, phone_type_prompt, design_prompt):
-    # Convert NumPy array to PIL Image
-    if isinstance(image, np.ndarray):
-        image = Image.fromarray(image)
-
-    # Add caption
-    draw = ImageDraw.Draw(image)
-    caption = f"Color: {color_prompt}\nMobile Type: {phone_type_prompt}\nDesign: {design_prompt}"
-    font_size = 20
-
-    try:
-        # Attempt to load a default font
-        font = ImageFont.truetype("arial.ttf", font_size)
-    except IOError:
-        font = ImageFont.load_default()
-
-    # Calculate position for text
-    text_width, text_height = font.getsize_multiline(caption)  # Updated function
-    position = (10, image.height - text_height - 10)  # Bottom-left corner with padding
-
-    # Add caption to the image
-    draw.multiline_text(position, caption, fill="white", font=font)
-
-    # Save the image
-    file_path = "saved_design_with_caption.png"
+# Function to save the design
+def save_design(image):
+    file_path = "saved_design.png"
     image.save(file_path)
     return f"Design saved as {file_path}!"
 
-
-# HTML-based carousel content
-carousel_html = """
-<div class="carousel">
-    <div class="slides">
-        <img src="https://via.placeholder.com/300x400.png?text=Design+1" alt="Design 1">
-        <img src="https://via.placeholder.com/300x400.png?text=Design+2" alt="Design 2">
-        <img src="https://via.placeholder.com/300x400.png?text=Design+3" alt="Design 3">
-    </div>
-</div>
-<style>
-.carousel {
-    display: flex;
-    overflow: hidden;
-    width: 100%;
-    max-width: 800px;
-    margin: 0 auto;
-}
-.slides {
-    display: flex;
-    transition: transform 0.5s ease-in-out;
-    animation: slide 10s infinite;
-}
-.slides img {
-    width: 300px;
-    height: 400px;
-    margin: 0 10px;
-}
-@keyframes slide {
-    0%, 20% { transform: translateX(0); }
-    40%, 60% { transform: translateX(-320px); }
-    80%, 100% { transform: translateX(-640px); }
-}
-</style>
-"""
-
 # Custom CSS for animations
 custom_css = """
 body {
@@ -134,17 +75,46 @@ 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**!")
-            gr.Markdown("Below is a carousel showcasing some of the saved designs.")
-            gr.HTML(carousel_html)
+            gr.Markdown("Welcome to the **AI Phone Cover Designer**! Use the 'Design' tab to start creating custom designs.")
         
         with gr.Tab("Design"):
             with gr.Row():
@@ -152,6 +122,7 @@ 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):
@@ -166,7 +137,7 @@ with gr.Blocks(css=custom_css) as interface:
             )
             save_button.click(
                 save_design,
-                inputs=[output_image, color_prompt, phone_type_prompt, design_prompt],
+                inputs=[output_image],
                 outputs=output_message,
             )
 
@@ -184,4 +155,5 @@ 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)