Update app.py

app.py

@@ -7,6 +7,7 @@ import time
 
 repo = "artificialguybr/TshirtDesignRedmond-V2"
 
+# Generate design based on prompts
 def infer(color_prompt, phone_type_prompt, design_prompt):
     prompt = (
         f"A single vertical {color_prompt} colored {phone_type_prompt} back cover featuring a bold {design_prompt} design on the front, hanging on the plain wall. The soft light and shadows, creating a striking contrast against the minimal background, evoking modern sophistication."
@@ -42,20 +43,32 @@ def infer(color_prompt, phone_type_prompt, design_prompt):
             raise Exception(f"API Error: {response.status_code}")
 
 
+# Custom CSS for Apple-like design
 custom_css = """
 body {
-    font-family: 'Poppins', sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     margin: 0;
     padding: 0;
-    transition: background-color 0.3s, color 0.3s;
+    background: linear-gradient(135deg, #f7f8fa, #dfe2e6);
+    color: #333;
 }
-.light-mode {
+.navbar {
     background-color: #f8f9fa;
-    color: #333;
+    padding: 10px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+.navbar a {
+    color: #0071e3;
+    text-decoration: none;
+    font-weight: 500;
+    margin: 0 15px;
+    transition: color 0.3s;
 }
-.dark-mode {
-    background-color: #333;
-    color: #f8f9fa;
+.navbar a:hover {
+    color: #0056b3;
 }
 .avatar-container {
     text-align: center;
@@ -77,66 +90,56 @@ body {
     0%, 100% { transform: scale(1); }
     50% { transform: scale(1.05); }
 }
-@keyframes head-move {
-    0%, 100% { transform: translateX(0); }
-    50% { transform: translateX(5px); }
-}
 """
 
+# JavaScript for text-to-speech and animations
 custom_js = """
 <script>
 document.addEventListener('DOMContentLoaded', function () {
-    // Add AI avatar container with animation
+    // 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');
-    
-    // Add AI avatar image
     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);
-    
-    // Add Greeting Text
-    const messageText = document.createElement('h2');
+    const greeting = document.createElement('h2');
     const currentHour = new Date().getHours();
-    let greeting = "Welcome!";
-    if (currentHour < 12) greeting = "Good Morning!";
-    else if (currentHour < 18) greeting = "Good Afternoon!";
-    else greeting = "Good Evening!";
-    messageText.textContent = greeting + " I'm your AI assistant. Let's design something amazing!";
-    avatarContainer.appendChild(messageText);
-
-    // Prepend the avatar container to the body
+    greeting.textContent = currentHour < 12 ? "Good Morning!" : currentHour < 18 ? "Good Afternoon!" : "Good Evening!";
+    avatarContainer.appendChild(greeting);
     document.body.prepend(avatarContainer);
 
-    // Function to trigger Text-to-Speech
-    function speakMessage(text) {
+    // Text-to-speech functionality
+    function speak(text) {
         const synth = window.speechSynthesis;
         const utterance = new SpeechSynthesisUtterance(text);
-        utterance.lang = 'en-US';
         synth.speak(utterance);
     }
-
-    // Trigger the speech when the output message is updated
     document.addEventListener('gradio_event:output_update', (event) => {
         const outputText = event.detail?.text || '';
         if (outputText) {
-            speakMessage(outputText);
+            speak(outputText);
         }
     });
 });
 </script>
 """
 
+# Gradio interface
 with gr.Blocks(css=custom_css) as interface:
     gr.HTML(custom_js)
-    gr.Markdown(
-        """
-        # **AI Phone Cover Designer**
-        Create custom designs for your brand with AI. Specify color, style, and design details.
-        """
-    )
+    gr.Markdown("# **AI Phone Cover Designer**")
     with gr.Row():
         with gr.Column(scale=1):
             color_prompt = gr.Textbox(label="Color", placeholder="E.g., Red")
@@ -148,19 +151,11 @@ with gr.Blocks(css=custom_css) as interface:
             output_image = gr.Image(label="Generated Design")
             output_message = gr.Textbox(label="AI Assistant Message", interactive=False)
 
-    def update_chatbot(color, phone_type, design):
-        return [("User", f"Color: {color}, Mobile: {phone_type}, Design: {design}")]
-
     generate_button.click(
         infer,
         inputs=[color_prompt, phone_type_prompt, design_prompt],
         outputs=[output_image, output_message],
     )
-    generate_button.click(
-        update_chatbot,
-        inputs=[color_prompt, phone_type_prompt, design_prompt],
-        outputs=[chatbot],
-    )
 
 # Launch the app
-interface.launch(debug=True)
+interface.launch(debug=True)