Upload folder using huggingface_hub

app.py

@@ -110,144 +110,335 @@ def generate_image(
     except Exception as e:
         raise gr.Error(f"Generation failed: {str(e)}")
 
-# Create a custom theme based on Soft theme with Apple-inspired colors
-custom_theme = gr.themes.Soft(
+# Create a custom Apple-inspired theme
+apple_theme = gr.themes.Soft(
     primary_hue=gr.themes.colors.blue,
     secondary_hue=gr.themes.colors.slate,
     neutral_hue=gr.themes.colors.gray,
     spacing_size=gr.themes.sizes.spacing_lg,
-    radius_size=gr.themes.sizes.radius_md,
+    radius_size=gr.themes.sizes.radius_lg,
     text_size=gr.themes.sizes.text_lg,
-    font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"],
-    font_mono=[gr.themes.GoogleFont("IBM Plex Mono"), "ui-monospace", "Consolas", "monospace"],
+    font=[gr.themes.GoogleFont("SF Pro Display"), gr.themes.GoogleFont("Inter"), "-apple-system", "BlinkMacSystemFont", "system-ui", "sans-serif"],
+    font_mono=[gr.themes.GoogleFont("SF Mono"), gr.themes.GoogleFont("IBM Plex Mono"), "ui-monospace", "monospace"],
+).set(
+    body_background_fill='linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)',
+    body_background_fill_dark='linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%)',
+    button_primary_background_fill='linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    button_primary_background_fill_hover='linear-gradient(135deg, #764ba2 0%, #667eea 100%)',
+    button_primary_text_color='white',
+    block_background_fill='rgba(255, 255, 255, 0.95)',
+    block_background_fill_dark='rgba(30, 30, 30, 0.95)',
+    block_border_width='0px',
+    block_shadow='0 20px 60px -15px rgba(0, 0, 0, 0.15)',
+    block_shadow_dark='0 20px 60px -15px rgba(0, 0, 0, 0.5)',
+    input_background_fill='rgba(255, 255, 255, 0.9)',
+    input_background_fill_dark='rgba(40, 40, 40, 0.9)',
+    input_border_width='1px',
+    input_shadow='0 2px 8px rgba(0, 0, 0, 0.05)',
+    input_shadow_focus='0 4px 16px rgba(102, 126, 234, 0.2)',
 )
 
-# Custom CSS for additional styling
-custom_css = """
+# Custom CSS for Apple-style design
+apple_css = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+/* Global Styles */
 .gradio-container {
-    max-width: 900px !important;
+    max-width: 1200px !important;
     margin: 0 auto !important;
+    padding: 2rem !important;
+    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif !important;
 }
 
-.main-header {
+/* Hero Section */
+.hero-section {
     text-align: center;
+    padding: 3rem 1rem;
     margin-bottom: 2rem;
-    padding-bottom: 2rem;
-    border-bottom: 1px solid #e5e5e7;
+    background: rgba(255, 255, 255, 0.6);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border-radius: 24px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
 }
 
-.main-header h1 {
-    font-size: 3rem !important;
-    font-weight: 600 !important;
-    color: #1d1d1f !important;
-    margin: 0 0 0.5rem 0 !important;
-    letter-spacing: -1px;
+.hero-title {
+    font-size: 3.5rem !important;
+    font-weight: 700 !important;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin: 0 0 1rem 0 !important;
+    letter-spacing: -0.02em;
+    line-height: 1.1 !important;
 }
 
-.main-header .subtitle {
-    font-size: 1.25rem !important;
-    color: #86868b !important;
-    margin: 0.5rem 0 !important;
+.hero-subtitle {
+    font-size: 1.5rem !important;
+    color: #6b7280 !important;
+    font-weight: 400 !important;
+    margin: 1rem 0 !important;
+    letter-spacing: -0.01em;
 }
 
 .attribution {
-    margin-top: 1rem;
-    font-size: 0.875rem;
-    color: #86868b;
+    margin-top: 1.5rem;
+    font-size: 0.95rem;
+    color: #9ca3af;
+    font-weight: 500;
 }
 
 .attribution a {
-    color: #0071e3 !important;
+    color: #667eea !important;
     text-decoration: none;
-    font-weight: 500;
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+
+.attribution a:hover {
+    color: #764ba2 !important;
+}
+
+/* Input Section */
+.input-container {
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border-radius: 20px;
+    padding: 2rem;
+    margin-bottom: 2rem;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
+    transition: all 0.3s ease;
+}
+
+.input-container:hover {
+    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.1);
+    transform: translateY(-2px);
+}
+
+/* Textbox Styling */
+textarea {
+    font-size: 1.1rem !important;
+    line-height: 1.6 !important;
+    border-radius: 16px !important;
+    border: 2px solid #e5e7eb !important;
+    padding: 1rem 1.25rem !important;
+    transition: all 0.3s ease !important;
+    background: rgba(255, 255, 255, 0.95) !important;
+}
+
+textarea:focus {
+    border-color: #667eea !important;
+    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1) !important;
+    outline: none !important;
+}
+
+textarea::placeholder {
+    color: #9ca3af !important;
+    font-weight: 400 !important;
+}
+
+/* Button Styling */
+.generate-btn button {
+    font-size: 1.125rem !important;
+    font-weight: 600 !important;
+    padding: 1rem 3rem !important;
+    border-radius: 16px !important;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    border: none !important;
+    color: white !important;
+    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3) !important;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    letter-spacing: 0.02em !important;
+    text-transform: none !important;
+    min-width: 200px !important;
+}
+
+.generate-btn button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.4) !important;
+    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
+}
+
+.generate-btn button:active {
+    transform: translateY(0) !important;
+    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3) !important;
 }
 
-.footer-info {
+/* Output Section */
+.output-container {
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border-radius: 20px;
+    padding: 2rem;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
+    overflow: hidden;
+}
+
+.output-container img {
+    border-radius: 16px !important;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
+    transition: transform 0.3s ease !important;
+}
+
+.output-container img:hover {
+    transform: scale(1.02) !important;
+}
+
+/* Footer */
+.footer-section {
     text-align: center;
     padding: 2rem 1rem;
-    color: #86868b;
-    font-size: 0.875rem;
-    margin-top: 2rem;
-    border-top: 1px solid #e5e5e7;
+    margin-top: 3rem;
+    color: #6b7280;
+    font-size: 0.95rem;
+    background: rgba(255, 255, 255, 0.4);
+    backdrop-filter: blur(10px);
+    border-radius: 16px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.footer-section p {
+    margin: 0.5rem 0;
+    font-weight: 500;
+}
+
+.footer-highlight {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-weight: 600;
+}
+
+/* Progress Bar */
+.progress-bar {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    border-radius: 8px !important;
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.gradio-container > * {
+    animation: fadeIn 0.6s ease-out;
 }
 
-.footer-info p {
-    margin: 0.25rem 0;
+/* Dark mode adjustments */
+.dark .hero-section,
+.dark .input-container,
+.dark .output-container {
+    background: rgba(30, 30, 30, 0.8);
+    border-color: rgba(255, 255, 255, 0.1);
 }
 
-button.primary {
-    background-color: #0071e3 !important;
-    transition: all 0.2s ease !important;
+.dark textarea {
+    background: rgba(40, 40, 40, 0.95) !important;
+    border-color: rgba(255, 255, 255, 0.1) !important;
+    color: #e5e7eb !important;
 }
 
-button.primary:hover {
-    background-color: #0077ed !important;
-    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.3) !important;
+.dark .footer-section {
+    background: rgba(30, 30, 30, 0.4);
 }
 
+/* Responsive Design */
 @media (max-width: 768px) {
-    .main-header h1 {
-        font-size: 2rem !important;
+    .hero-title {
+        font-size: 2.5rem !important;
+    }
+    
+    .hero-subtitle {
+        font-size: 1.25rem !important;
+    }
+    
+    .gradio-container {
+        padding: 1rem !important;
+    }
+    
+    .input-container,
+    .output-container {
+        padding: 1.5rem !important;
     }
     
-    .main-header .subtitle {
-        font-size: 1rem !important;
+    .generate-btn button {
+        width: 100% !important;
+        padding: 0.875rem 2rem !important;
     }
 }
+
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
+}
 """
 
 # Create the Gradio interface
 with gr.Blocks(
-    title="Z-Image Turbo",
-    fill_height=False
+    title="Z-Image Turbo - AI Image Generation",
+    fill_height=False,
 ) as demo:
     
-    # Header
-    with gr.Column(elem_classes="main-header"):
-        gr.Markdown(
-            """
-            # Z-Image Turbo
-            ### Create stunning images from text
-            """,
-            elem_classes="main-header"
-        )
+    # Hero Section
+    with gr.Column(elem_classes="hero-section"):
         gr.HTML("""
+            <h1 class="hero-title">Z-Image Turbo</h1>
+            <p class="hero-subtitle">Transform your ideas into stunning visuals</p>
             <div class="attribution">
                 Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
             </div>
         """)
     
-    # Prompt input
-    prompt = gr.Textbox(
-        placeholder="Describe the image you want to create...",
-        lines=3,
-        max_lines=6,
-        label="Prompt",
-        show_label=False,
-        container=True
-    )
-    
-    # Generate button
-    generate_btn = gr.Button(
-        "Generate",
-        variant="primary",
-        size="lg",
-        scale=1
-    )
+    # Input Section
+    with gr.Column(elem_classes="input-container"):
+        prompt = gr.Textbox(
+            placeholder="Describe your vision in detail... (e.g., 'A serene mountain landscape at sunset with vibrant colors')",
+            lines=4,
+            max_lines=8,
+            label="",
+            show_label=False,
+            container=False,
+            elem_classes="prompt-input"
+        )
+        
+        with gr.Row(elem_classes="generate-btn"):
+            generate_btn = gr.Button(
+                "✨ Generate Image",
+                variant="primary",
+                size="lg",
+                scale=1
+            )
     
-    # Output image
-    output_image = gr.Image(
-        type="pil",
-        label="Generated Image",
-        show_label=False,
-        buttons=["download"],
-        container=True
-    )
+    # Output Section
+    with gr.Column(elem_classes="output-container"):
+        output_image = gr.Image(
+            type="pil",
+            label="",
+            show_label=False,
+            buttons=["download"],
+            container=False,
+            height=600,
+            elem_classes="output-image"
+        )
     
     # Footer
     gr.HTML("""
-        <div class="footer-info">
-            <p>Powered by Z-Image Turbo from Tongyi-MAI</p>
+        <div class="footer-section">
+            <p>Powered by <span class="footer-highlight">Z-Image Turbo</span> from Tongyi-MAI</p>
             <p>Optimized for fast, high-quality image generation</p>
         </div>
     """)
@@ -272,6 +463,23 @@ if __name__ == "__main__":
     demo.launch(
         share=False,
         show_error=True,
-        theme=custom_theme,
-        css=custom_css
-    )
+        theme=apple_theme,
+        css=apple_css
+    )
+
+---
+
+## Key Apple-Style Design Improvements:
+
+1. **Clean Typography**: Using SF Pro Display-inspired fonts with proper hierarchy
+2. **Glassmorphism**: Frosted glass effect with backdrop blur for modern Apple aesthetic
+3. **Smooth Animations**: Fade-in animations and smooth transitions throughout
+4. **Color Gradients**: Beautiful purple-blue gradients inspired by Apple's marketing
+5. **Card-based Layout**: Elevated cards with subtle shadows and rounded corners
+6. **Minimalist UI**: Removed unnecessary labels and clutter
+7. **Responsive Design**: Mobile-friendly with proper breakpoints
+8. **Hover Effects**: Smooth interactions on buttons and images
+9. **Better Spacing**: Generous padding and margins for breathing room
+10. **Enhanced Button**: Large, prominent CTA button with gradient and shadow effects
+
+The design now feels more premium, polished, and aligned with Apple's design philosophy while maintaining full functionality!

requirements.txt

@@ -1,5 +1,14 @@
-gradio
-git+https://github.com/huggingface/diffusers
 torch
-transformers
-accelerate
+torchvision
+torchaudio
+git+https://github.com/huggingface/diffusers
+git+https://github.com/huggingface/transformers
+sentencepiece
+accelerate
+tokenizers
+spaces
+gradio
+requests
+Pillow
+numpy
+scipy