Update app.py

app.py

@@ -39,6 +39,7 @@ def infer(color_prompt, Phone_type_prompt, design_prompt):
         else:
             raise Exception(f"API Error: {response.status_code}")
 
+
 custom_css = """
 body {
     font-family: 'Poppins', sans-serif;
@@ -84,64 +85,23 @@ textarea.light-mode, input.light-mode {
     border-radius: 12px;
     margin-top: 20px;
 }
-/* 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%; }
+.avatar-container {
+    text-align: center;
+    margin-bottom: 20px;
 }
-/* Loading Spinner */
-#loading-spinner {
-    display: none;
-    margin: 20px auto;
-    border: 6px solid #f3f3f3;
-    border-top: 6px solid #3498db;
+.avatar-container img {
     border-radius: 50%;
-    width: 50px;
-    height: 50px;
-    animation: spin 1s linear infinite;
-}
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-@media screen and (max-width: 768px) {
-    .gradio-container {
-        padding: 10px;
+    width: 150px;
+    height: 150px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
+    animation: bounce 2s infinite;
+}
+@keyframes bounce {
+    0%, 100% {
+        transform: translateY(0);
     }
-    textarea, input {
-        font-size: 0.9rem;
-    }
-    button {
-        font-size: 0.9rem;
-    }
-}
-@media screen and (min-width: 769px) {
-    .gradio-container {
-        padding: 20px;
-        max-width: 1200px;
-        margin: auto;
+    50% {
+        transform: translateY(-10px);
     }
 }
 """
@@ -159,24 +119,29 @@ document.addEventListener('DOMContentLoaded', function () {
     document.body.prepend(toggleButton);
     document.body.classList.add('light-mode'); // Default to light mode
 
-    // Dynamic Welcome Message
-    const welcomeMessage = document.createElement('h2');
+    // Dynamic Welcome Message with AI avatar speech
+    const welcomeMessage = document.createElement('div');
+    welcomeMessage.classList.add('avatar-container');
+    const avatarImg = document.createElement('img');
+    avatarImg.src = 'https://i.postimg.cc/Qd9Gjc5Z/ai-girl-avatar.png'; // Replace with your AI girl avatar image
+    welcomeMessage.appendChild(avatarImg);
+    const messageText = 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!";
-    welcomeMessage.textContent = greeting + " Customize your phone cover!";
-    welcomeMessage.style.textAlign = "center";
+    messageText.textContent = greeting + " I'm your AI assistant. Let's design something amazing!";
+    welcomeMessage.appendChild(messageText);
     document.body.prepend(welcomeMessage);
 
-    // Add spinner toggle on button click
-    const generateButton = document.querySelector('button:contains("Generate Design")');
-    const spinner = document.getElementById('loading-spinner');
-    generateButton.onclick = () => {
-        spinner.style.display = 'block';
-        setTimeout(() => spinner.style.display = 'none', 5000); // Mock loading
-    };
+    // 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>
 """
@@ -196,11 +161,10 @@ with gr.Blocks(css=custom_css) as interface:
             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")
             generate_button = gr.Button("Generate Design")
-            spinner = gr.HTML('<div id="loading-spinner"></div>')
         with gr.Column(scale=1, min_width=300):
             output = gr.Image(label="Generated Design", elem_id="output-image")
 
     generate_button.click(infer, inputs=[color_prompt, Back_cover_prompt, design_prompt], outputs=output)
 
 # Launch the app
-interface.launch(debug=True)
+interface.launch(debug=True)