Upload folder using huggingface_hub

app.py

@@ -2,20 +2,13 @@ import gradio as gr
 import torch
 import spaces
 from diffusers import OvisImagePipeline
-from PIL import Image
 
-# Initialize the pipeline globally
-pipe = None
-
-def load_model():
-    global pipe
-    if pipe is None:
-        pipe = OvisImagePipeline.from_pretrained(
-            "AIDC-AI/Ovis-Image-7B", 
-            torch_dtype=torch.bfloat16
-        )
-        pipe.to("cuda")
-    return pipe
+# Load the model at startup
+pipe = OvisImagePipeline.from_pretrained(
+    "AIDC-AI/Ovis-Image-7B", 
+    torch_dtype=torch.bfloat16
+)
+pipe.to("cuda")
 
 @spaces.GPU(duration=120)
 def generate_image(
@@ -28,336 +21,370 @@ def generate_image(
     if not prompt.strip():
         raise gr.Error("Please enter a prompt to generate an image.")
     
-    progress(0, desc="Loading model...")
-    model = load_model()
-    
-    progress(0.1, desc="Generating image...")
-    
-    image = model(
+    image = pipe(
         prompt=prompt,
         negative_prompt=negative_prompt if negative_prompt.strip() else "",
         num_inference_steps=int(num_inference_steps),
         true_cfg_scale=true_cfg_scale
     ).images[0]
     
-    progress(1, desc="Done!")
     return image
 
 # Apple-inspired CSS
 apple_css = """
-/* Global Apple-style design */
+/* Apple-style design system */
+@import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500;600;700&family=SF+Pro+Text:wght@400;500;600&display=swap');
+
+:root {
+    --apple-blue: #0071e3;
+    --apple-blue-hover: #0077ED;
+    --apple-gray-1: #f5f5f7;
+    --apple-gray-2: #e8e8ed;
+    --apple-gray-3: #d2d2d7;
+    --apple-gray-4: #86868b;
+    --apple-gray-5: #1d1d1f;
+    --apple-white: #ffffff;
+    --apple-black: #000000;
+    --apple-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+    --apple-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12);
+    --apple-radius: 12px;
+    --apple-radius-lg: 18px;
+    --apple-transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+/* Base styles */
 .gradio-container {
-    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif !important;
-    background: linear-gradient(180deg, #f5f5f7 0%, #ffffff 100%) !important;
+    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
+    background: linear-gradient(180deg, var(--apple-gray-1) 0%, var(--apple-white) 100%) !important;
     min-height: 100vh;
+    max-width: 1200px !important;
+    margin: 0 auto !important;
+    padding: 40px 20px !important;
 }
 
 /* Header styling */
 .header-container {
     text-align: center;
-    padding: 40px 20px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border-radius: 24px;
-    margin-bottom: 32px;
-    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
+    padding: 60px 20px 40px;
+    margin-bottom: 40px;
 }
 
 .header-container h1 {
-    font-size: 3rem !important;
-    font-weight: 700 !important;
-    color: white !important;
-    margin: 0 !important;
-    letter-spacing: -0.02em;
+    font-size: 56px !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.02em !important;
+    color: var(--apple-gray-5) !important;
+    margin-bottom: 16px !important;
+    line-height: 1.1 !important;
 }
 
 .header-container p {
-    color: rgba(255, 255, 255, 0.9) !important;
-    font-size: 1.2rem !important;
-    margin-top: 12px !important;
-    font-weight: 400;
+    font-size: 21px !important;
+    font-weight: 400 !important;
+    color: var(--apple-gray-4) !important;
+    max-width: 600px;
+    margin: 0 auto !important;
+    line-height: 1.5 !important;
 }
 
 .header-container a {
-    color: rgba(255, 255, 255, 0.8) !important;
-    text-decoration: none;
-    transition: color 0.2s ease;
+    color: var(--apple-blue) !important;
+    text-decoration: none !important;
+    transition: var(--apple-transition);
 }
 
 .header-container a:hover {
-    color: white !important;
+    text-decoration: underline !important;
 }
 
-/* Main container panels */
-.main-panel {
-    background: white !important;
-    border-radius: 20px !important;
+/* Card-like containers */
+.input-section, .output-section {
+    background: var(--apple-white) !important;
+    border-radius: var(--apple-radius-lg) !important;
     padding: 32px !important;
-    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
-    border: 1px solid rgba(0, 0, 0, 0.04) !important;
+    box-shadow: var(--apple-shadow) !important;
+    border: 1px solid var(--apple-gray-2) !important;
+    transition: var(--apple-transition);
+}
+
+.input-section:hover, .output-section:hover {
+    box-shadow: var(--apple-shadow-hover) !important;
 }
 
-/* Input styling */
-.input-container textarea, .input-container input {
-    border-radius: 12px !important;
-    border: 2px solid #e5e5ea !important;
+/* Textbox styling */
+.gradio-textbox textarea, .gradio-textbox input {
+    font-family: inherit !important;
+    font-size: 17px !important;
+    border: 2px solid var(--apple-gray-2) !important;
+    border-radius: var(--apple-radius) !important;
     padding: 16px !important;
-    font-size: 16px !important;
-    transition: all 0.3s ease !important;
-    background: #fafafa !important;
+    background: var(--apple-gray-1) !important;
+    transition: var(--apple-transition);
+    color: var(--apple-gray-5) !important;
 }
 
-.input-container textarea:focus, .input-container input:focus {
-    border-color: #667eea !important;
-    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15) !important;
-    background: white !important;
+.gradio-textbox textarea:focus, .gradio-textbox input:focus {
+    border-color: var(--apple-blue) !important;
+    background: var(--apple-white) !important;
+    outline: none !important;
+    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15) !important;
 }
 
-/* Labels */
-.input-container label {
-    font-weight: 600 !important;
-    color: #1d1d1f !important;
+.gradio-textbox label {
     font-size: 14px !important;
+    font-weight: 600 !important;
+    color: var(--apple-gray-5) !important;
+    letter-spacing: -0.01em !important;
     margin-bottom: 8px !important;
 }
 
-/* Sliders */
-input[type="range"] {
-    accent-color: #667eea !important;
+/* Slider styling */
+.gradio-slider input[type="range"] {
+    height: 6px !important;
+    background: var(--apple-gray-2) !important;
+    border-radius: 3px !important;
 }
 
-/* Generate button */
-.generate-btn {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    border: none !important;
-    border-radius: 14px !important;
-    padding: 16px 32px !important;
-    font-size: 17px !important;
+.gradio-slider input[type="range"]::-webkit-slider-thumb {
+    width: 22px !important;
+    height: 22px !important;
+    background: var(--apple-white) !important;
+    border: 2px solid var(--apple-gray-3) !important;
+    border-radius: 50% !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
+    cursor: pointer !important;
+    transition: var(--apple-transition);
+}
+
+.gradio-slider input[type="range"]::-webkit-slider-thumb:hover {
+    transform: scale(1.1);
+    border-color: var(--apple-blue) !important;
+}
+
+.gradio-slider label {
+    font-size: 14px !important;
     font-weight: 600 !important;
-    color: white !important;
+    color: var(--apple-gray-5) !important;
+}
+
+.gradio-slider .wrap {
+    background: transparent !important;
+}
+
+/* Button styling */
+.gradio-button {
+    font-family: inherit !important;
+    font-size: 17px !important;
+    font-weight: 500 !important;
+    border-radius: 980px !important;
+    padding: 16px 32px !important;
+    transition: var(--apple-transition);
+    border: none !important;
     cursor: pointer !important;
-    transition: all 0.3s ease !important;
-    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35) !important;
-    width: 100% !important;
-    margin-top: 16px !important;
+    letter-spacing: -0.01em !important;
 }
 
-.generate-btn:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.45) !important;
+.gradio-button.primary {
+    background: var(--apple-blue) !important;
+    color: var(--apple-white) !important;
 }
 
-.generate-btn:active {
-    transform: translateY(0) !important;
+.gradio-button.primary:hover {
+    background: var(--apple-blue-hover) !important;
+    transform: scale(1.02);
 }
 
-/* Output image */
-.output-image {
-    border-radius: 16px !important;
-    overflow: hidden !important;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
+.gradio-button.primary:active {
+    transform: scale(0.98);
 }
 
-.output-image img {
-    border-radius: 16px !important;
+.gradio-button.secondary {
+    background: var(--apple-gray-1) !important;
+    color: var(--apple-blue) !important;
 }
 
-/* Accordion */
-.accordion {
-    border-radius: 16px !important;
-    border: 1px solid #e5e5ea !important;
-    overflow: hidden !important;
-    margin-top: 16px !important;
+.gradio-button.secondary:hover {
+    background: var(--apple-gray-2) !important;
 }
 
-/* Examples section */
-.examples-container {
-    background: #f5f5f7 !important;
-    border-radius: 16px !important;
-    padding: 24px !important;
-    margin-top: 24px !important;
+/* Image output styling */
+.gradio-image {
+    border-radius: var(--apple-radius-lg) !important;
+    overflow: hidden !important;
+    background: var(--apple-gray-1) !important;
+    border: 1px solid var(--apple-gray-2) !important;
 }
 
-/* Footer */
-.footer-text {
-    text-align: center;
-    color: #86868b;
-    font-size: 13px;
-    margin-top: 32px;
-    padding: 16px;
+.gradio-image img {
+    border-radius: var(--apple-radius) !important;
 }
 
-.footer-text a {
-    color: #667eea;
-    text-decoration: none;
-    font-weight: 500;
+/* Row and column spacing */
+.gradio-row {
+    gap: 16px !important;
 }
 
-/* Info text */
-.info-text {
-    color: #86868b !important;
-    font-size: 13px !important;
+.gradio-column {
+    gap: 16px !important;
 }
 
-/* Section titles */
-.section-title {
-    font-size: 1.5rem !important;
+/* Section labels */
+.section-label {
+    font-size: 13px !important;
     font-weight: 600 !important;
-    color: #1d1d1f !important;
+    color: var(--apple-gray-4) !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.02em !important;
     margin-bottom: 16px !important;
 }
 
-/* Zero GPU badge */
-.zero-gpu-badge {
-    display: inline-block;
-    background: linear-gradient(135deg, #00c853 0%, #00e676 100%);
-    color: white;
-    padding: 4px 12px;
-    border-radius: 20px;
-    font-size: 12px;
-    font-weight: 600;
-    margin-left: 8px;
+/* Slider container */
+.slider-row {
+    background: var(--apple-gray-1) !important;
+    border-radius: var(--apple-radius) !important;
+    padding: 20px !important;
+    margin-top: 8px !important;
+}
+
+/* Footer link styling */
+.built-with {
+    text-align: center;
+    padding: 40px 20px;
+    color: var(--apple-gray-4);
+    font-size: 14px;
+}
+
+.built-with a {
+    color: var(--apple-blue) !important;
+    text-decoration: none !important;
+}
+
+.built-with a:hover {
+    text-decoration: underline !important;
+}
+
+/* Progress bar */
+.progress-bar {
+    background: var(--apple-gray-2) !important;
+    border-radius: 4px !important;
+}
+
+.progress-bar > div {
+    background: linear-gradient(90deg, var(--apple-blue), #34C759) !important;
+    border-radius: 4px !important;
+}
+
+/* Placeholder text */
+::placeholder {
+    color: var(--apple-gray-4) !important;
+    opacity: 1 !important;
+}
+
+/* Remove default borders and shadows */
+.block {
+    border: none !important;
+    box-shadow: none !important;
+}
+
+/* Group styling */
+.group {
+    background: var(--apple-white) !important;
+    border-radius: var(--apple-radius-lg) !important;
+    padding: 24px !important;
+    box-shadow: var(--apple-shadow) !important;
+}
+
+/* Accordion styling */
+.gradio-accordion {
+    border: 1px solid var(--apple-gray-2) !important;
+    border-radius: var(--apple-radius) !important;
+    overflow: hidden !important;
+}
+
+.gradio-accordion > button {
+    background: var(--apple-gray-1) !important;
+    font-weight: 500 !important;
+}
+
+/* Hide default footer items we don't want */
+footer {
+    opacity: 0.7;
 }
 """
 
-# Build the Gradio interface
 with gr.Blocks(
     title="OVIS Image Generator",
-    theme=gr.themes.Soft(
-        primary_hue="violet",
-        secondary_hue="purple",
-        neutral_hue="slate",
-        font=gr.themes.GoogleFont("Inter")
-    ),
-    fill_width=True,
-    footer_links=[
-        {"label": "Built with anycoder", "url": "https://huggingface.co/spaces/akhaliq/anycoder"}
-    ]
+    css=apple_css
 ) as demo:
-    
     # Header
     gr.HTML("""
         <div class="header-container">
-            <h1>✨ OVIS Image <span class="zero-gpu-badge">⚡ ZeroGPU</span></h1>
-            <p>Transform your imagination into stunning visuals with AI</p>
-            <p style="font-size: 0.9rem; margin-top: 8px;">
+            <h1>OVIS Image</h1>
+            <p>Create stunning images with OVIS-Image-7B. Simply describe what you imagine.</p>
+            <p style="margin-top: 12px; font-size: 14px;">
                 <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
             </p>
         </div>
     """)
     
-    with gr.Row(equal_height=True):
-        # Left column - Inputs
-        with gr.Column(scale=1, elem_classes=["main-panel"]):
-            gr.Markdown("### 🎨 Create Your Image", elem_classes=["section-title"])
+    with gr.Row():
+        # Left column - Input
+        with gr.Column(scale=1, elem_classes="input-section"):
+            gr.HTML('<div class="section-label">Create</div>')
+            
+            prompt = gr.Textbox(
+                label="Prompt",
+                placeholder="Describe the image you want to create...",
+                lines=4,
+                elem_id="prompt-input"
+            )
             
-            with gr.Group(elem_classes=["input-container"]):
-                prompt = gr.Textbox(
-                    label="Prompt",
-                    placeholder="Describe the image you want to create...",
-                    lines=4,
-                    max_lines=8,
-                    info="Be descriptive! Include style, lighting, colors, and details."
+            negative_prompt = gr.Textbox(
+                label="Negative Prompt",
+                placeholder="What to avoid (optional)...",
+                lines=2
+            )
+            
+            gr.HTML('<div class="section-label" style="margin-top: 24px;">Settings</div>')
+            
+            with gr.Group(elem_classes="slider-row"):
+                num_steps = gr.Slider(
+                    label="Inference Steps",
+                    minimum=10,
+                    maximum=100,
+                    value=50,
+                    step=5,
+                    info="More steps = higher quality, slower generation"
                 )
                 
-                with gr.Accordion("⚙️ Advanced Settings", open=False, elem_classes=["accordion"]):
-                    negative_prompt = gr.Textbox(
-                        label="Negative Prompt",
-                        placeholder="What to avoid in the image...",
-                        lines=2,
-                        value="",
-                        info="Describe elements you don't want in your image"
-                    )
-                    
-                    with gr.Row():
-                        num_steps = gr.Slider(
-                            label="Inference Steps",
-                            minimum=10,
-                            maximum=100,
-                            value=50,
-                            step=5,
-                            info="More steps = higher quality but slower"
-                        )
-                        
-                        cfg_scale = gr.Slider(
-                            label="CFG Scale",
-                            minimum=1.0,
-                            maximum=15.0,
-                            value=5.0,
-                            step=0.5,
-                            info="How closely to follow the prompt"
-                        )
-                
-                generate_btn = gr.Button(
-                    "✨ Generate Image",
-                    variant="primary",
-                    elem_classes=["generate-btn"]
+                cfg_scale = gr.Slider(
+                    label="CFG Scale",
+                    minimum=1.0,
+                    maximum=15.0,
+                    value=5.0,
+                    step=0.5,
+                    info="How closely to follow your prompt"
                 )
+            
+            generate_btn = gr.Button(
+                "Generate Image",
+                variant="primary",
+                size="lg",
+                elem_id="generate-btn"
+            )
         
         # Right column - Output
-        with gr.Column(scale=1, elem_classes=["main-panel"]):
-            gr.Markdown("### 🖼️ Generated Image", elem_classes=["section-title"])
+        with gr.Column(scale=1, elem_classes="output-section"):
+            gr.HTML('<div class="section-label">Result</div>')
             
             output_image = gr.Image(
-                label="Result",
+                label="Generated Image",
                 type="pil",
-                elem_classes=["output-image"],
-                height=512,
-                buttons=["download", "share", "fullscreen"]
+                elem_id="output-image",
+                height=512
             )
     
-    # Examples section
-    with gr.Row():
-        with gr.Column(elem_classes=["examples-container"]):
-            gr.Markdown("### 💡 Example Prompts")
-            gr.Examples(
-                examples=[
-                    [
-                        'A creative 3D artistic render where the text "OVIS-IMAGE" is written in a bold, expressive handwritten brush style using thick, wet oil paint. The paint is a mix of vibrant rainbow colors (red, blue, yellow) swirling together like toothpaste or impasto art. You can see the ridges of the brush bristles and the glossy, wet texture of the paint. The background is a clean artist\'s canvas. Dynamic lighting creates soft shadows behind the floating paint strokes. Colorful, expressive, tactile texture, 4k detail.',
-                        "",
-                        50,
-                        5.0
-                    ],
-                    [
-                        "A serene Japanese zen garden at sunrise, with carefully raked sand patterns, moss-covered stones, and a small wooden bridge over a koi pond. Cherry blossom petals gently falling. Soft morning light, photorealistic, 8k quality.",
-                        "cartoon, anime, illustration",
-                        50,
-                        5.0
-                    ],
-                    [
-                        "A majestic snow leopard resting on a rocky mountain peak, overlooking a vast valley below. Golden hour lighting, cinematic composition, National Geographic style photography, ultra detailed fur texture.",
-                        "blurry, low quality",
-                        50,
-                        5.0
-                    ],
-                    [
-                        "An enchanted library with floating books, magical glowing orbs, ancient wooden shelves reaching to the ceiling, dust particles in beams of light, fantasy art style, highly detailed, mystical atmosphere.",
-                        "",
-                        50,
-                        5.0
-                    ],
-                    [
-                        "A futuristic cyberpunk cityscape at night, neon signs in Japanese and English, flying cars, holographic advertisements, rain-slicked streets reflecting colorful lights, blade runner aesthetic, 4k cinematic.",
-                        "daytime, bright, sunny",
-                        50,
-                        5.0
-                    ],
-                ],
-                inputs=[prompt, negative_prompt, num_steps, cfg_scale],
-                label="Click an example to try it"
-            )
-    
-    # Footer
-    gr.HTML("""
-        <div class="footer-text">
-            <p>Powered by <strong>OVIS-Image-7B</strong> from AIDC-AI · Running on <strong>ZeroGPU</strong></p>
-            <p>
-                <a href="https://huggingface.co/AIDC-AI/Ovis-Image-7B" target="_blank">Model Card</a> · 
-                <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
-            </p>
-        </div>
-    """)
-    
-    # Event handler
+    # Event handlers
     generate_btn.click(
         fn=generate_image,
         inputs=[prompt, negative_prompt, num_steps, cfg_scale],
@@ -365,7 +392,6 @@ with gr.Blocks(
         api_visibility="public"
     )
     
-    # Also trigger on Enter key in prompt
     prompt.submit(
         fn=generate_image,
         inputs=[prompt, negative_prompt, num_steps, cfg_scale],
@@ -373,6 +399,9 @@ with gr.Blocks(
         api_visibility="public"
     )
 
-# Launch the app
 if __name__ == "__main__":
-    demo.launch(css=apple_css)
+    demo.launch(
+        footer_links=[
+            {"label": "Built with anycoder", "url": "https://huggingface.co/spaces/akhaliq/anycoder"}
+        ]
+    )

requirements.txt

@@ -1,13 +1,35 @@
 spaces
-git+https://github.com/DoctorKey/diffusers.git@ovis-image
+gradio
+git+https://github.com/huggingface/diffusers
+torch
 git+https://github.com/huggingface/transformers
 sentencepiece
 accelerate
-torch
-torchvision
-torchaudio
 tokenizers
 datasets
-gradio
 requests
 Pillow
+torchvision
+torchaudio
+numpy
+scipy
+opencv-python
+matplotlib
+tqdm
+safetensors
+pillow-heif
+xformers
+omegaconf
+ftfy
+regex
+einops
+timm
+webdataset
+wandb
+tensorboard
+huggingface-hub
+safetensors
+bitsandbytes
+peft
+diffusers
+transformers