🎨 Redesign from AnyCoder

This Pull Request contains a redesigned version of the app with:

- ✨ Modern, mobile-friendly design
- 🎯 Minimal, clean components
- 📱 Responsive layout
- 🚀 Improved user experience

Generated by [AnyCoder](https://huggingface.co/spaces/akhaliq/anycoder)

app.py

@@ -11,10 +11,7 @@ pipe = OvisImagePipeline.from_pretrained(
 pipe.to("cuda")
 
 @spaces.GPU(duration=120)
-def generate_image(
-    prompt: str,
-    progress=gr.Progress(track_tqdm=True)
-):
+def generate_image(prompt: str, progress=gr.Progress(track_tqdm=True)):
     if not prompt.strip():
         raise gr.Error("Please enter a prompt to generate an image.")
     
@@ -27,266 +24,382 @@ def generate_image(
     
     return image
 
-# Apple-inspired CSS that works for both light and dark mode
-apple_css = """
-@import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500;600;700&family=SF+Pro+Text:wght@300;400;500;600&display=swap');
+# Modern minimal CSS with mobile-first approach
+modern_css = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+:root {
+    --primary: #6366f1;
+    --primary-hover: #4f46e5;
+    --bg-light: #ffffff;
+    --bg-dark: #0f172a;
+    --text-light: #1e293b;
+    --text-dark: #f1f5f9;
+    --border-light: #e2e8f0;
+    --border-dark: #334155;
+    --card-light: #ffffff;
+    --card-dark: #1e293b;
+}
 
 * {
-    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif !important;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
+}
+
+body {
+    background: var(--bg-light);
+    transition: background 0.3s ease;
+}
+
+.dark body {
+    background: var(--bg-dark);
 }
 
-/* Light mode styles */
 .gradio-container {
-    max-width: 700px !important;
+    max-width: 680px !important;
     margin: 0 auto !important;
-    padding: 0 16px !important;
+    padding: 0 20px 40px !important;
 }
 
-/* Main header */
-.main-header {
+/* Hero Section */
+.hero {
     text-align: center;
-    padding: 40px 20px 32px;
+    padding: 48px 0 40px;
+    margin-bottom: 32px;
 }
 
-.main-header h1 {
-    font-size: 40px;
-    font-weight: 600;
-    letter-spacing: -0.025em;
-    margin: 0 0 8px 0;
-    background: linear-gradient(135deg, #1d1d1f 0%, #424245 100%);
+.hero-title {
+    font-size: clamp(32px, 5vw, 48px);
+    font-weight: 700;
+    margin: 0 0 12px 0;
+    background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
+    letter-spacing: -0.02em;
 }
 
-.main-header p {
-    font-size: 17px;
+.hero-subtitle {
+    font-size: clamp(16px, 2.5vw, 20px);
+    color: #64748b;
     font-weight: 400;
     margin: 0;
-    opacity: 0.7;
+    line-height: 1.6;
 }
 
-/* Dark mode header */
-.dark .main-header h1 {
-    background: linear-gradient(135deg, #f5f5f7 0%, #a1a1a6 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+.dark .hero-subtitle {
+    color: #94a3b8;
 }
 
-/* Card styling */
-.card-container {
-    border-radius: 20px;
-    padding: 24px;
-    margin-bottom: 16px;
-    background: rgba(255, 255, 255, 0.8);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border: 1px solid rgba(0, 0, 0, 0.08);
-    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
+/* Main Card */
+.main-card {
+    background: var(--card-light);
+    border-radius: 24px;
+    padding: 32px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 20px 40px rgba(0, 0, 0, 0.03);
+    border: 1px solid var(--border-light);
+    margin-bottom: 24px;
+    transition: all 0.3s ease;
 }
 
-.dark .card-container {
-    background: rgba(30, 30, 32, 0.8);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
+.dark .main-card {
+    background: var(--card-dark);
+    border-color: var(--border-dark);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 20px 40px rgba(0, 0, 0, 0.2);
 }
 
-/* Textbox styling */
-textarea {
-    background: rgba(142, 142, 147, 0.12) !important;
-    border: none !important;
-    border-radius: 12px !important;
-    padding: 16px !important;
-    font-size: 16px !important;
-    line-height: 1.5 !important;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
-    resize: none !important;
+/* Input Section */
+.input-section {
+    margin-bottom: 24px;
 }
 
-textarea:focus {
-    background: rgba(142, 142, 147, 0.18) !important;
-    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.15) !important;
-    outline: none !important;
+label {
+    display: block;
+    margin-bottom: 12px;
 }
 
-textarea::placeholder {
-    opacity: 0.5 !important;
+label span {
+    font-size: 14px !important;
+    font-weight: 600 !important;
+    color: var(--text-light) !important;
+    letter-spacing: -0.01em !important;
+}
+
+.dark label span {
+    color: var(--text-dark) !important;
+}
+
+textarea {
+    width: 100% !important;
+    background: #f8fafc !important;
+    border: 2px solid transparent !important;
+    border-radius: 16px !important;
+    padding: 16px 18px !important;
+    font-size: 15px !important;
+    line-height: 1.6 !important;
+    color: var(--text-light) !important;
+    transition: all 0.2s ease !important;
+    resize: none !important;
+    box-sizing: border-box !important;
 }
 
 .dark textarea {
-    background: rgba(142, 142, 147, 0.16) !important;
+    background: #0f172a !important;
+    color: var(--text-dark) !important;
+    border-color: transparent !important;
+}
+
+textarea:focus {
+    background: #ffffff !important;
+    border-color: var(--primary) !important;
+    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1) !important;
+    outline: none !important;
 }
 
 .dark textarea:focus {
-    background: rgba(142, 142, 147, 0.24) !important;
+    background: #1e293b !important;
+    border-color: var(--primary) !important;
 }
 
-/* Label styling */
-label span {
-    font-size: 14px !important;
-    font-weight: 500 !important;
-    letter-spacing: -0.01em !important;
+textarea::placeholder {
+    color: #94a3b8 !important;
+    opacity: 1 !important;
 }
 
-/* Button styling */
+/* Button */
 button.primary {
-    background: linear-gradient(180deg, #0a84ff 0%, #0077ed 100%) !important;
+    width: 100% !important;
+    background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 100%) !important;
     color: white !important;
     border: none !important;
-    border-radius: 980px !important;
-    padding: 14px 32px !important;
-    font-size: 17px !important;
-    font-weight: 500 !important;
-    letter-spacing: -0.01em !important;
+    border-radius: 12px !important;
+    padding: 16px 24px !important;
+    font-size: 16px !important;
+    font-weight: 600 !important;
     cursor: pointer !important;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
-    box-shadow: 0 2px 8px rgba(10, 132, 255, 0.3) !important;
-    min-height: 50px !important;
+    transition: all 0.2s ease !important;
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25) !important;
+    min-height: 52px !important;
+    letter-spacing: -0.01em !important;
 }
 
-button.primary:hover {
-    transform: scale(1.02) !important;
-    box-shadow: 0 4px 16px rgba(10, 132, 255, 0.4) !important;
+button.primary:hover:not(:disabled) {
+    transform: translateY(-1px) !important;
+    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35) !important;
 }
 
-button.primary:active {
-    transform: scale(0.98) !important;
+button.primary:active:not(:disabled) {
+    transform: translateY(0) !important;
 }
 
-/* Output image styling */
-.output-container {
-    border-radius: 20px;
-    overflow: hidden;
-    background: rgba(142, 142, 147, 0.08);
-    min-height: 300px;
+button.primary:disabled {
+    opacity: 0.6 !important;
+    cursor: not-allowed !important;
 }
 
-.dark .output-container {
-    background: rgba(142, 142, 147, 0.12);
+/* Output Image */
+.output-card {
+    background: var(--card-light);
+    border-radius: 24px;
+    padding: 24px;
+    border: 1px solid var(--border-light);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 20px 40px rgba(0, 0, 0, 0.03);
+    margin-bottom: 24px;
+    min-height: 400px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+}
+
+.dark .output-card {
+    background: var(--card-dark);
+    border-color: var(--border-dark);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 20px 40px rgba(0, 0, 0, 0.2);
+}
+
+.output-card img {
+    border-radius: 16px !important;
+    max-width: 100% !important;
+    height: auto !important;
+    display: block !important;
 }
 
-/* Image container */
-.output-container img {
-    border-radius: 16px;
+/* Empty state */
+.output-card:empty::before {
+    content: 'Your generated image will appear here';
+    color: #94a3b8;
+    font-size: 15px;
+    font-weight: 500;
 }
 
-/* Footer styling */
-.footer-link {
+/* Footer */
+.footer {
     text-align: center;
-    padding: 24px 0;
-    font-size: 13px;
+    padding: 32px 0 0;
 }
 
-.footer-link a {
-    color: #0a84ff;
+.footer a {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--primary);
     text-decoration: none;
+    font-size: 14px;
     font-weight: 500;
-    transition: opacity 0.2s;
+    transition: opacity 0.2s ease;
+    padding: 8px 16px;
+    border-radius: 8px;
+    background: rgba(99, 102, 241, 0.05);
 }
 
-.footer-link a:hover {
-    opacity: 0.7;
+.dark .footer a {
+    background: rgba(99, 102, 241, 0.1);
 }
 
-/* Remove default Gradio styling */
-.block.padded:not(.gradio-group) {
-    padding: 0 !important;
-    background: transparent !important;
+.footer a:hover {
+    opacity: 0.8;
+    background: rgba(99, 102, 241, 0.1);
+}
+
+.dark .footer a:hover {
+    background: rgba(99, 102, 241, 0.15);
+}
+
+/* Progress bar */
+.progress-bar-wrap {
+    border-radius: 8px !important;
+    overflow: hidden !important;
+}
+
+.progress-bar {
+    background: linear-gradient(90deg, var(--primary), #8b5cf6) !important;
+    border-radius: 8px !important;
+}
+
+/* Remove default Gradio padding */
+.block {
     border: none !important;
     box-shadow: none !important;
+    background: transparent !important;
 }
 
-/* Progress bar styling */
-.progress-bar {
-    background: linear-gradient(90deg, #0a84ff, #5ac8fa) !important;
-    border-radius: 4px !important;
+.block.padded {
+    padding: 0 !important;
 }
 
-/* Mobile responsive */
+/* Mobile optimizations */
 @media (max-width: 640px) {
     .gradio-container {
-        padding: 0 12px !important;
-    }
-    
-    .main-header {
-        padding: 32px 16px 24px;
+        padding: 0 16px 32px !important;
     }
     
-    .main-header h1 {
-        font-size: 32px;
+    .hero {
+        padding: 32px 0 32px;
+        margin-bottom: 24px;
     }
     
-    .main-header p {
-        font-size: 15px;
+    .main-card {
+        padding: 24px 20px;
+        border-radius: 20px;
     }
     
-    .card-container {
+    .output-card {
         padding: 20px;
-        border-radius: 16px;
-    }
-    
-    button.primary {
-        width: 100% !important;
-        padding: 16px 24px !important;
+        border-radius: 20px;
+        min-height: 320px;
     }
     
     textarea {
         font-size: 16px !important;
+        padding: 14px 16px !important;
+    }
+    
+    button.primary {
+        padding: 14px 20px !important;
+        font-size: 15px !important;
     }
 }
 
-/* Smooth transitions for dark mode */
+/* Smooth transitions */
+* {
+    -webkit-tap-highlight-color: transparent;
+}
+
 .gradio-container,
-.card-container,
+.main-card,
+.output-card,
 textarea,
 button {
-    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
+    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease !important;
+}
+
+/* Loading state */
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+.generating {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Accessibility */
+button:focus-visible,
+textarea:focus-visible {
+    outline: 2px solid var(--primary) !important;
+    outline-offset: 2px !important;
 }
 """
 
-with gr.Blocks(title="OVIS Image Generator") as demo:
+# Create the Gradio interface
+with gr.Blocks() as demo:
     
-    # Header
+    # Hero Section
     gr.HTML("""
-        <div class="main-header">
-            <h1>OVIS Image</h1>
-            <p>Transform your ideas into images</p>
+        <div class="hero">
+            <h1 class="hero-title">OVIS Image Generator</h1>
+            <p class="hero-subtitle">Transform your imagination into stunning visuals with AI</p>
         </div>
     """)
     
-    # Input card
-    with gr.Column(elem_classes="card-container"):
-        prompt = gr.Textbox(
-            label="Describe your image",
-            placeholder="A serene mountain landscape at golden hour with snow-capped peaks...",
-            lines=3,
-            show_label=True,
-            max_lines=5
-        )
+    # Main Input Card
+    with gr.Column(elem_classes="main-card"):
+        with gr.Column(elem_classes="input-section"):
+            prompt = gr.Textbox(
+                label="What would you like to create?",
+                placeholder="A mystical forest with glowing mushrooms under moonlight, digital art style...",
+                lines=4,
+                max_lines=8,
+                show_label=True
+            )
         
         generate_btn = gr.Button(
-            "Generate",
+            "Generate Image",
             variant="primary",
             size="lg"
         )
     
-    # Output card
-    with gr.Column(elem_classes="card-container output-container"):
+    # Output Card
+    with gr.Column(elem_classes="output-card"):
         output_image = gr.Image(
             label="Generated Image",
             type="pil",
-            show_label=False
+            show_label=False,
+            show_download_button=True,
+            show_share_button=True,
+            container=False
         )
     
     # Footer
     gr.HTML("""
-        <div class="footer-link">
-            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
+        <div class="footer">
+            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">
+                ✨ Built with anycoder
+            </a>
         </div>
     """)
     
-    # Events
+    # Event handlers
     generate_btn.click(
         fn=generate_image,
         inputs=[prompt],
@@ -303,7 +416,16 @@ with gr.Blocks(title="OVIS Image Generator") as demo:
 
 if __name__ == "__main__":
     demo.launch(
-        css=apple_css,
+        theme=gr.themes.Soft(
+            primary_hue="indigo",
+            secondary_hue="purple",
+            neutral_hue="slate",
+            font=gr.themes.GoogleFont("Inter"),
+            text_size="md",
+            spacing_size="md",
+            radius_size="lg"
+        ),
+        css=modern_css,
         footer_links=[
             {"label": "Built with anycoder", "url": "https://huggingface.co/spaces/akhaliq/anycoder"}
         ]