Update app.py

app.py

@@ -84,7 +84,6 @@ textarea.light-mode, input.light-mode {
     border-radius: 12px;
     margin-top: 20px;
 }
-
 /* Neon Button Styling */
 button {
     font-size: 1.2rem;
@@ -101,20 +100,32 @@ button {
     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%; }
 }
-
+/* Loading Spinner */
+#loading-spinner {
+    display: none;
+    margin: 20px auto;
+    border: 6px solid #f3f3f3;
+    border-top: 6px solid #3498db;
+    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;
@@ -147,6 +158,25 @@ 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');
+    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";
+    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
+    };
 });
 </script>
 """
@@ -166,6 +196,7 @@ 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")