Update app.py

app.py

@@ -31,7 +31,7 @@ def infer(color_prompt, phone_type_prompt, design_prompt):
     while True:
         response = requests.post(api_url, headers=headers, json=payload)
         if response.status_code == 200:
-            speech_text = f"Your image is generated with the color {color_prompt}, mobile type {phone_type_prompt}, and design {design_prompt}."
+            speech_text = f"Your design is generated with the color '{color_prompt}', mobile type '{phone_type_prompt}', and design '{design_prompt}'."
             return Image.open(BytesIO(response.content)), speech_text
         elif response.status_code == 503:
             time.sleep(1)
@@ -42,83 +42,52 @@ def infer(color_prompt, phone_type_prompt, design_prompt):
         else:
             raise Exception(f"API Error: {response.status_code}")
 
+# 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}!"
 
-# Custom CSS for Apple-like design
+# Custom CSS for animations
 custom_css = """
 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     margin: 0;
     padding: 0;
-    background: linear-gradient(135deg, #f7f8fa, #dfe2e6);
-    color: #333;
+    overflow: hidden;
 }
-.navbar {
-    background-color: #f8f9fa;
-    padding: 10px 20px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+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;
 }
-.navbar a {
-    color: #0071e3;
-    text-decoration: none;
-    font-weight: 500;
-    margin: 0 15px;
-    transition: color 0.3s;
-}
-.navbar a:hover {
-    color: #0056b3;
-}
-.avatar-container {
-    text-align: center;
-    margin-bottom: 20px;
-    position: relative;
-    animation: head-move 3s infinite;
-}
-.avatar-img {
-    width: 150px;
-    height: 150px;
-    border-radius: 50%;
-    animation: blink 3s infinite, scale 5s infinite;
-}
-@keyframes blink {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.7; }
-}
-@keyframes scale {
-    0%, 100% { transform: scale(1); }
-    50% { transform: scale(1.05); }
+@keyframes gradientShift {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
 }
 """
 
-# JavaScript for text-to-speech and animations
+# JavaScript for text-to-speech and particles
 custom_js = """
 <script>
 document.addEventListener('DOMContentLoaded', function () {
-    // Add navigation bar
-    const navbar = document.createElement('div');
-    navbar.classList.add('navbar');
-    navbar.innerHTML = `
-        <a href="#">Home</a>
-        <a href="#">Design</a>
-        <a href="#">About</a>
-    `;
-    document.body.prepend(navbar);
-
-    // Add AI assistant avatar and greeting
-    const avatarContainer = document.createElement('div');
-    avatarContainer.classList.add('avatar-container');
-    const avatarImg = document.createElement('img');
-    avatarImg.src = 'https://th.bing.com/th/id/OIP.zeeoSeLcH19kuQ1ABNOGCwHaHU?rs=1&pid=ImgDetMain';
-    avatarImg.alt = "AI Assistant Avatar";
-    avatarImg.classList.add('avatar-img');
-    avatarContainer.appendChild(avatarImg);
-    const greeting = document.createElement('h2');
-    const currentHour = new Date().getHours();
-    greeting.textContent = currentHour < 12 ? "Good Morning!" : currentHour < 18 ? "Good Afternoon!" : "Good Evening!";
-    avatarContainer.appendChild(greeting);
-    document.body.prepend(avatarContainer);
+    // 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) {
@@ -140,22 +109,51 @@ document.addEventListener('DOMContentLoaded', function () {
 with gr.Blocks(css=custom_css) as interface:
     gr.HTML(custom_js)
     gr.Markdown("# **AI Phone Cover Designer**")
-    with gr.Row():
-        with gr.Column(scale=1):
-            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")
-        with gr.Column(scale=1):
-            output_image = gr.Image(label="Generated Design")
-            output_message = gr.Textbox(label="AI Assistant Message", interactive=False)
+    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.")
+        
+        with gr.Tab("Design"):
+            with gr.Row():
+                with gr.Column(scale=1):
+                    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):
+                    output_image = gr.Image(label="Generated Design")
+                    output_message = gr.Textbox(label="AI Assistant Message", interactive=False)
 
-    generate_button.click(
-        infer,
-        inputs=[color_prompt, phone_type_prompt, design_prompt],
-        outputs=[output_image, output_message],
-    )
+            # Button Actions
+            generate_button.click(
+                infer,
+                inputs=[color_prompt, phone_type_prompt, design_prompt],
+                outputs=[output_image, output_message],
+            )
+            save_button.click(
+                save_design,
+                inputs=[output_image],
+                outputs=output_message,
+            )
+
+        with gr.Tab("About"):
+            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.
+            
+            ### Features:
+            - Create custom designs using simple prompts.
+            - Generate designs for various phone models.
+            - Save your designs for future use.
+            
+            Start designing today and bring your creative ideas to life!
+            """)
 
 # Launch the app
 interface.launch(debug=True)