Upload folder using huggingface_hub

app.py

@@ -110,336 +110,270 @@ def generate_image(
     except Exception as e:
         raise gr.Error(f"Generation failed: {str(e)}")
 
-# Create a custom Apple-inspired theme
+# Create 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_lg,
-    text_size=gr.themes.sizes.text_lg,
-    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"],
+    text_size=gr.themes.sizes.text_md,
+    font=[gr.themes.GoogleFont("Inter"), "SF Pro Display", "-apple-system", "BlinkMacSystemFont", "system-ui", "sans-serif"],
+    font_mono=[gr.themes.GoogleFont("JetBrains Mono"), "SF 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)',
+    body_background_fill='#f5f5f7',
+    body_background_fill_dark='#000000',
+    button_primary_background_fill='#0071e3',
+    button_primary_background_fill_hover='#0077ed',
+    button_primary_text_color='#ffffff',
+    block_background_fill='#ffffff',
+    block_background_fill_dark='#1d1d1f',
     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)',
+    block_shadow='0 2px 12px rgba(0, 0, 0, 0.08)',
+    block_shadow_dark='0 2px 12px rgba(0, 0, 0, 0.4)',
+    input_background_fill='#ffffff',
+    input_background_fill_dark='#1d1d1f',
     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)',
+    input_border_color='#d2d2d7',
+    input_border_color_dark='#424245',
+    input_shadow='none',
+    input_shadow_focus='0 0 0 4px rgba(0, 113, 227, 0.15)',
 )
 
-# Custom CSS for Apple-style design
+# Apple-style CSS
 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: 1200px !important;
+    max-width: 980px !important;
     margin: 0 auto !important;
-    padding: 2rem !important;
-    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif !important;
+    padding: 48px 20px !important;
+    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Roboto', sans-serif !important;
 }
 
-/* Hero Section */
-.hero-section {
+/* Header */
+.header-container {
     text-align: center;
-    padding: 3rem 1rem;
-    margin-bottom: 2rem;
-    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);
+    margin-bottom: 48px;
 }
 
-.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-title {
+    font-size: 56px !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.02em !important;
+    line-height: 1.07 !important;
+    color: #1d1d1f !important;
+    margin: 0 0 12px 0 !important;
 }
 
-.hero-subtitle {
-    font-size: 1.5rem !important;
-    color: #6b7280 !important;
+.subtitle {
+    font-size: 21px !important;
     font-weight: 400 !important;
-    margin: 1rem 0 !important;
-    letter-spacing: -0.01em;
-}
-
-.attribution {
-    margin-top: 1.5rem;
-    font-size: 0.95rem;
-    color: #9ca3af;
-    font-weight: 500;
+    line-height: 1.38 !important;
+    color: #6e6e73 !important;
+    margin: 0 0 24px 0 !important;
 }
 
-.attribution a {
-    color: #667eea !important;
-    text-decoration: none;
-    font-weight: 600;
-    transition: all 0.3s ease;
+.attribution-link {
+    display: inline-block;
+    font-size: 14px !important;
+    color: #0071e3 !important;
+    text-decoration: none !important;
+    font-weight: 400 !important;
+    transition: color 0.2s ease !important;
 }
 
-.attribution a:hover {
-    color: #764ba2 !important;
+.attribution-link:hover {
+    color: #0077ed !important;
+    text-decoration: underline !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);
+.input-section {
+    background: #ffffff;
+    border-radius: 18px;
+    padding: 32px;
+    margin-bottom: 24px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
 }
 
-/* Textbox Styling */
+/* Textbox */
 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;
+    font-size: 17px !important;
+    line-height: 1.47 !important;
+    border-radius: 12px !important;
+    border: 1px solid #d2d2d7 !important;
+    padding: 12px 16px !important;
+    transition: all 0.2s ease !important;
+    background: #ffffff !important;
+    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
 }
 
 textarea:focus {
-    border-color: #667eea !important;
-    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1) !important;
+    border-color: #0071e3 !important;
+    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15) !important;
     outline: none !important;
 }
 
 textarea::placeholder {
-    color: #9ca3af !important;
-    font-weight: 400 !important;
+    color: #86868b !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;
+/* Button */
+button.primary {
+    font-size: 17px !important;
+    font-weight: 400 !important;
+    padding: 12px 32px !important;
+    border-radius: 980px !important;
+    background: #0071e3 !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;
+    color: #ffffff !important;
+    min-height: 44px !important;
+    transition: all 0.2s ease !important;
+    letter-spacing: -0.01em !important;
+    cursor: pointer !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;
+button.primary:hover {
+    background: #0077ed !important;
+    transform: scale(1.02) !important;
 }
 
-.generate-btn button:active {
-    transform: translateY(0) !important;
-    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3) !important;
+button.primary:active {
+    transform: scale(0.98) !important;
 }
 
 /* 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);
+.output-section {
+    background: #ffffff;
+    border-radius: 18px;
+    padding: 32px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
     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;
+.output-section img {
+    border-radius: 12px !important;
+    width: 100% !important;
+    height: auto !important;
 }
 
 /* Footer */
-.footer-section {
+.footer-text {
     text-align: center;
-    padding: 2rem 1rem;
-    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);
+    margin-top: 48px;
+    font-size: 14px !important;
+    color: #86868b !important;
+    line-height: 1.43 !important;
 }
 
-.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 */
 .progress-bar {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    border-radius: 8px !important;
+    background: #0071e3 !important;
+    border-radius: 4px !important;
 }
 
-/* Animations */
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+/* Dark Mode */
+.dark .main-title {
+    color: #f5f5f7 !important;
 }
 
-.gradio-container > * {
-    animation: fadeIn 0.6s ease-out;
+.dark .subtitle {
+    color: #a1a1a6 !important;
 }
 
-/* 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);
+.dark .input-section,
+.dark .output-section {
+    background: #1d1d1f;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
 }
 
 .dark textarea {
-    background: rgba(40, 40, 40, 0.95) !important;
-    border-color: rgba(255, 255, 255, 0.1) !important;
-    color: #e5e7eb !important;
+    background: #1d1d1f !important;
+    border-color: #424245 !important;
+    color: #f5f5f7 !important;
 }
 
-.dark .footer-section {
-    background: rgba(30, 30, 30, 0.4);
+.dark textarea::placeholder {
+    color: #86868b !important;
 }
 
-/* Responsive Design */
-@media (max-width: 768px) {
-    .hero-title {
-        font-size: 2.5rem !important;
+/* Responsive */
+@media (max-width: 734px) {
+    .main-title {
+        font-size: 40px !important;
     }
     
-    .hero-subtitle {
-        font-size: 1.25rem !important;
+    .subtitle {
+        font-size: 19px !important;
     }
     
     .gradio-container {
-        padding: 1rem !important;
+        padding: 32px 16px !important;
     }
     
-    .input-container,
-    .output-container {
-        padding: 1.5rem !important;
-    }
-    
-    .generate-btn button {
-        width: 100% !important;
-        padding: 0.875rem 2rem !important;
+    .input-section,
+    .output-section {
+        padding: 24px !important;
     }
 }
 
-/* Smooth scrolling */
-html {
-    scroll-behavior: smooth;
+/* Remove default Gradio styling */
+.contain {
+    padding: 0 !important;
 }
 """
 
-# Create the Gradio interface
+# Create the interface
 with gr.Blocks(
-    title="Z-Image Turbo - AI Image Generation",
+    title="Z-Image Turbo",
+    theme=apple_theme,
+    css=apple_css,
     fill_height=False,
 ) as demo:
     
-    # 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>
-        """)
+    # Header
+    gr.HTML("""
+        <div class="header-container">
+            <h1 class="main-title">Z-Image Turbo</h1>
+            <p class="subtitle">Transform your ideas into stunning visuals with AI</p>
+            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="attribution-link">
+                Built with anycoder
+            </a>
+        </div>
+    """)
     
     # Input Section
-    with gr.Column(elem_classes="input-container"):
+    with gr.Column(elem_classes="input-section"):
         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,
+            placeholder="Describe the image you want to create...",
+            lines=3,
+            max_lines=6,
             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
-            )
+        generate_btn = gr.Button(
+            "Generate",
+            variant="primary",
+            size="lg",
+            elem_classes="primary"
+        )
     
     # Output Section
-    with gr.Column(elem_classes="output-container"):
+    with gr.Column(elem_classes="output-section"):
         output_image = gr.Image(
             type="pil",
             label="",
             show_label=False,
-            buttons=["download"],
             container=False,
-            height=600,
-            elem_classes="output-image"
+            show_download_button=True,
         )
     
     # Footer
     gr.HTML("""
-        <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 class="footer-text">
+            <p>Powered by Z-Image Turbo from Tongyi-MAI</p>
         </div>
     """)
     
@@ -448,21 +382,16 @@ with gr.Blocks(
         fn=generate_image,
         inputs=prompt,
         outputs=output_image,
-        api_name="generate"
     )
     
-    # Also allow generation on Enter key
     prompt.submit(
         fn=generate_image,
         inputs=prompt,
-        outputs=output_image
+        outputs=output_image,
     )
 
-# Launch the app
 if __name__ == "__main__":
     demo.launch(
         share=False,
         show_error=True,
-        theme=apple_theme,
-        css=apple_css
     )

requirements.txt

@@ -11,4 +11,4 @@ gradio
 requests
 Pillow
 numpy
-scipy
+scipy