Update app.py

app.py

@@ -7,9 +7,10 @@ import time
 
 repo = "artificialguybr/TshirtDesignRedmond-V2"
 
-def infer(color_prompt, Phone_type_prompt, design_prompt):
+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.")
+        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."
+    )
     full_prompt = f"{prompt}"
 
     print("Generating image with prompt:", full_prompt)
@@ -20,7 +21,7 @@ def infer(color_prompt, Phone_type_prompt, design_prompt):
         "parameters": {
             "negative_prompt": "(worst quality, low quality, lowres, oversaturated, grayscale, bad photo:1.4)",
             "num_inference_steps": 30,
-            "scheduler": "DPMSolverMultistepScheduler"
+            "scheduler": "DPMSolverMultistepScheduler",
         },
     }
 
@@ -29,7 +30,8 @@ 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:
-            return Image.open(BytesIO(response.content))
+            speech_text = f"Your image 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)
             pbar.update(1)
@@ -55,83 +57,64 @@ body {
     background-color: #333;
     color: #f8f9fa;
 }
-.gr-markdown-container {
-    transition: color 0.3s;
-}
-.light-mode .gr-markdown-container {
-    color: #333;
-}
-.dark-mode .gr-markdown-container {
-    color: #f8f9fa;
-}
-textarea, input {
-    padding: 10px;
-    border-radius: 8px;
-    border: 2px solid #ccc;
-    margin-bottom: 10px;
-    width: 100%;
-}
-textarea.dark-mode, input.dark-mode {
-    background-color: #444;
-    color: #f8f9fa;
-    border: 2px solid #555;
-}
-textarea.light-mode, input.light-mode {
-    background-color: #fff;
-    color: #333;
-}
-.output-image {
-    max-width: 100%;
-    border-radius: 12px;
-    margin-top: 20px;
-}
 .avatar-container {
     text-align: center;
     margin-bottom: 20px;
 }
-.avatar-container img {
-    border-radius: 50%;
+.avatar-img {
     width: 150px;
     height: 150px;
-    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
-    animation: bounce 2s infinite;
+    border-radius: 50%;
+    animation: blink 3s infinite;
 }
-@keyframes bounce {
-    0%, 100% {
-        transform: translateY(0);
-    }
-    50% {
-        transform: translateY(-10px);
-    }
+@keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.7; }
+}
+/* Neon Button Styling */
+button {
+    font-size: 1.2rem;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    border: none;
+    color: white;
+    background: linear-gradient(90deg, red, orange, yellow, green, cyan, blue, violet);
+    background-size: 400%;
+    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6),
+                0 0 20px rgba(255, 255, 255, 0.4),
+                0 0 40px rgba(255, 255, 255, 0.2);
+    animation: neon-button 2s infinite;
+    transition: transform 0.3s;
+}
+button:hover {
+    transform: scale(1.1);
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8),
+                0 0 40px rgba(255, 255, 255, 0.6),
+                0 0 60px rgba(255, 255, 255, 0.4);
+}
+/* Neon Animation */
+@keyframes neon-button {
+    0% { background-position: 0%; }
+    100% { background-position: 400%; }
 }
 """
 
 custom_js = """
 <script>
 document.addEventListener('DOMContentLoaded', function () {
-    const toggleButton = document.createElement('button');
-    toggleButton.textContent = 'Toggle Light/Dark Mode';
-    toggleButton.style.marginBottom = '20px';
-    toggleButton.onclick = () => {
-        document.body.classList.toggle('dark-mode');
-        document.body.classList.toggle('light-mode');
-    };
-    document.body.prepend(toggleButton);
-    document.body.classList.add('light-mode'); // Default to light mode
-
     // Dynamic Welcome Message with AI avatar speech
     const welcomeMessage = document.createElement('div');
     welcomeMessage.classList.add('avatar-container');
+    
+    // Avatar Image
     const avatarImg = document.createElement('img');
-    avatarImg.src = 'https://th.bing.com/th/id/OIP.zeeoSeLcH19kuQ1ABNOGCwHaHU?rs=1&pid=ImgDetMain'; // Use a valid AI avatar image URL
+    avatarImg.src = 'https://th.bing.com/th/id/OIP.zeeoSeLcH19kuQ1ABNOGCwHaHU?rs=1&pid=ImgDetMain';
     avatarImg.alt = "AI Assistant Avatar";
-    avatarImg.style.width = "150px";
-    avatarImg.style.height = "150px";
-    avatarImg.style.borderRadius = "50%";
-    avatarImg.style.margin = "20px auto";
-    avatarImg.style.display = "block";
+    avatarImg.classList.add('avatar-img');
     welcomeMessage.appendChild(avatarImg);
 
+    // Greeting Text
     const messageText = document.createElement('h2');
     const currentHour = new Date().getHours();
     let greeting = "Welcome!";
@@ -139,19 +122,10 @@ document.addEventListener('DOMContentLoaded', function () {
     else if (currentHour < 18) greeting = "Good Afternoon!";
     else greeting = "Good Evening!";
     messageText.textContent = greeting + " I'm your AI assistant. Let's design something amazing!";
-    messageText.style.textAlign = "center";
-    messageText.style.fontSize = "1.5rem";
     welcomeMessage.appendChild(messageText);
 
+    // Add to body
     document.body.prepend(welcomeMessage);
-
-    // Speech synthesis
-    const speech = new SpeechSynthesisUtterance();
-    speech.text = messageText.textContent;
-    speech.pitch = 1;
-    speech.rate = 1;
-    speech.lang = 'en-US';
-    window.speechSynthesis.speak(speech);
 });
 </script>
 """
@@ -162,19 +136,32 @@ with gr.Blocks(css=custom_css) as interface:
         """
         # **AI Phone Cover Designer**
         Create custom designs for your brand with AI. Specify color, style, and design details.
-        """,
-        elem_id="gr-markdown-container"  
+        """
     )
-    with gr.Row(elem_id="responsive-row"):
-        with gr.Column(scale=1, min_width=300):
-            color_prompt = gr.Textbox(label="Color", placeholder="E.g., Red", elem_id="component-1")
-            Back_cover_prompt = gr.Textbox(label="Mobile type", placeholder="E.g., iPhone, Samsung", elem_id="component-2")
-            design_prompt = gr.Textbox(label="Design Details", placeholder="E.g., Bold stripes with geometric patterns", elem_id="component-3")
+    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, min_width=300):
-            output = gr.Image(label="Generated Design", elem_id="output-image")
+        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, Back_cover_prompt, design_prompt], outputs=output)
+    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)