Upload folder using huggingface_hub

app.py

@@ -13,9 +13,6 @@ pipe.to("cuda")
 @spaces.GPU(duration=120)
 def generate_image(
     prompt: str,
-    negative_prompt: str,
-    num_inference_steps: int,
-    true_cfg_scale: float,
     progress=gr.Progress(track_tqdm=True)
 ):
     if not prompt.strip():
@@ -23,142 +20,176 @@ def generate_image(
     
     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
+        negative_prompt="",
+        num_inference_steps=50,
+        true_cfg_scale=5.0
     ).images[0]
     
     return image
 
-# Clean Apple-inspired CSS
+# Apple-inspired CSS that works for both light and dark mode
 apple_css = """
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
+@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');
 
 * {
-    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif !important;
+    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif !important;
 }
 
+/* Light mode styles */
 .gradio-container {
-    max-width: 900px !important;
+    max-width: 700px !important;
     margin: 0 auto !important;
-    background: #fbfbfd !important;
+    padding: 0 16px !important;
 }
 
+/* Main header */
 .main-header {
     text-align: center;
-    padding: 48px 24px 32px;
+    padding: 40px 20px 32px;
 }
 
 .main-header h1 {
-    font-size: 44px;
+    font-size: 40px;
     font-weight: 600;
-    color: #1d1d1f;
+    letter-spacing: -0.025em;
     margin: 0 0 8px 0;
-    letter-spacing: -0.03em;
+    background: linear-gradient(135deg, #1d1d1f 0%, #424245 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
 }
 
 .main-header p {
     font-size: 17px;
-    color: #86868b;
-    margin: 0;
     font-weight: 400;
+    margin: 0;
+    opacity: 0.7;
 }
 
-.main-header a {
-    color: #0071e3;
-    text-decoration: none;
+/* 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;
 }
 
-.main-header a:hover {
-    text-decoration: underline;
+/* 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);
 }
 
-.card {
-    background: #ffffff;
-    border-radius: 16px;
-    padding: 28px;
-    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
-    border: 1px solid #e5e5e7;
+.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);
 }
 
-textarea, input[type="text"] {
-    background: #f5f5f7 !important;
+/* Textbox styling */
+textarea {
+    background: rgba(142, 142, 147, 0.12) !important;
     border: none !important;
-    border-radius: 10px !important;
-    padding: 14px 16px !important;
-    font-size: 15px !important;
-    color: #1d1d1f !important;
-    transition: all 0.2s ease !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;
 }
 
-textarea:focus, input[type="text"]:focus {
-    background: #ffffff !important;
-    box-shadow: 0 0 0 3px rgba(0,113,227,0.2) !important;
+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;
 }
 
-textarea::placeholder, input::placeholder {
-    color: #86868b !important;
+textarea::placeholder {
+    opacity: 0.5 !important;
+}
+
+.dark textarea {
+    background: rgba(142, 142, 147, 0.16) !important;
 }
 
+.dark textarea:focus {
+    background: rgba(142, 142, 147, 0.24) !important;
+}
+
+/* Label styling */
 label span {
-    font-size: 13px !important;
+    font-size: 14px !important;
     font-weight: 500 !important;
-    color: #1d1d1f !important;
+    letter-spacing: -0.01em !important;
 }
 
+/* Button styling */
 button.primary {
-    background: #0071e3 !important;
+    background: linear-gradient(180deg, #0a84ff 0%, #0077ed 100%) !important;
     color: white !important;
     border: none !important;
     border-radius: 980px !important;
-    padding: 12px 28px !important;
-    font-size: 15px !important;
+    padding: 14px 32px !important;
+    font-size: 17px !important;
     font-weight: 500 !important;
+    letter-spacing: -0.01em !important;
     cursor: pointer !important;
-    transition: all 0.2s ease !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;
 }
 
 button.primary:hover {
-    background: #0077ed !important;
-    transform: scale(1.02);
+    transform: scale(1.02) !important;
+    box-shadow: 0 4px 16px rgba(10, 132, 255, 0.4) !important;
 }
 
 button.primary:active {
-    transform: scale(0.98);
+    transform: scale(0.98) !important;
 }
 
-.settings-section {
-    background: #f5f5f7;
-    border-radius: 12px;
-    padding: 20px;
-    margin-top: 16px;
+/* Output image styling */
+.output-container {
+    border-radius: 20px;
+    overflow: hidden;
+    background: rgba(142, 142, 147, 0.08);
+    min-height: 300px;
 }
 
-input[type="range"] {
-    accent-color: #0071e3 !important;
+.dark .output-container {
+    background: rgba(142, 142, 147, 0.12);
 }
 
-.output-image {
-    border-radius: 12px;
-    overflow: hidden;
-    background: #f5f5f7;
-    min-height: 400px;
+/* Image container */
+.output-container img {
+    border-radius: 16px;
 }
 
-.footer-text {
+/* Footer styling */
+.footer-link {
     text-align: center;
-    padding: 24px;
+    padding: 24px 0;
     font-size: 13px;
-    color: #86868b;
 }
 
-.footer-text a {
-    color: #0071e3;
+.footer-link a {
+    color: #0a84ff;
     text-decoration: none;
+    font-weight: 500;
+    transition: opacity 0.2s;
 }
 
-/* Hide unnecessary elements */
+.footer-link a:hover {
+    opacity: 0.7;
+}
+
+/* Remove default Gradio styling */
 .block.padded:not(.gradio-group) {
     padding: 0 !important;
     background: transparent !important;
@@ -166,21 +197,57 @@ input[type="range"] {
     box-shadow: none !important;
 }
 
-.gradio-accordion {
-    border: none !important;
-    background: transparent !important;
+/* Progress bar styling */
+.progress-bar {
+    background: linear-gradient(90deg, #0a84ff, #5ac8fa) !important;
+    border-radius: 4px !important;
 }
 
-.gradio-accordion > .label-wrap {
-    background: #f5f5f7 !important;
-    border-radius: 10px !important;
-    padding: 12px 16px !important;
+/* Mobile responsive */
+@media (max-width: 640px) {
+    .gradio-container {
+        padding: 0 12px !important;
+    }
+    
+    .main-header {
+        padding: 32px 16px 24px;
+    }
+    
+    .main-header h1 {
+        font-size: 32px;
+    }
+    
+    .main-header p {
+        font-size: 15px;
+    }
+    
+    .card-container {
+        padding: 20px;
+        border-radius: 16px;
+    }
+    
+    button.primary {
+        width: 100% !important;
+        padding: 16px 24px !important;
+    }
+    
+    textarea {
+        font-size: 16px !important;
+    }
+}
+
+/* Smooth transitions for dark mode */
+.gradio-container,
+.card-container,
+textarea,
+button {
+    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
 }
 """
 
 with gr.Blocks(title="OVIS Image Generator") as demo:
     
-    # Clean header
+    # Header
     gr.HTML("""
         <div class="main-header">
             <h1>OVIS Image</h1>
@@ -188,57 +255,33 @@ with gr.Blocks(title="OVIS Image Generator") as demo:
         </div>
     """)
     
-    with gr.Column(elem_classes="card"):
+    # Input card
+    with gr.Column(elem_classes="card-container"):
         prompt = gr.Textbox(
-            label="What do you want to create?",
-            placeholder="A serene mountain landscape at sunset...",
+            label="Describe your image",
+            placeholder="A serene mountain landscape at golden hour with snow-capped peaks...",
             lines=3,
-            show_label=True
+            show_label=True,
+            max_lines=5
         )
         
-        with gr.Accordion("Advanced Settings", open=False):
-            negative_prompt = gr.Textbox(
-                label="Negative prompt",
-                placeholder="Things to avoid...",
-                lines=2
-            )
-            
-            with gr.Row():
-                num_steps = gr.Slider(
-                    label="Steps",
-                    minimum=10,
-                    maximum=100,
-                    value=50,
-                    step=5
-                )
-                
-                cfg_scale = gr.Slider(
-                    label="CFG Scale",
-                    minimum=1.0,
-                    maximum=15.0,
-                    value=5.0,
-                    step=0.5
-                )
-        
         generate_btn = gr.Button(
             "Generate",
             variant="primary",
             size="lg"
         )
     
-    gr.HTML("<div style='height: 16px'></div>")
-    
-    with gr.Column(elem_classes="card"):
+    # Output card
+    with gr.Column(elem_classes="card-container output-container"):
         output_image = gr.Image(
-            label="",
+            label="Generated Image",
             type="pil",
-            show_label=False,
-            elem_classes="output-image"
+            show_label=False
         )
     
     # Footer
     gr.HTML("""
-        <div class="footer-text">
+        <div class="footer-link">
             <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
         </div>
     """)
@@ -246,14 +289,14 @@ with gr.Blocks(title="OVIS Image Generator") as demo:
     # Events
     generate_btn.click(
         fn=generate_image,
-        inputs=[prompt, negative_prompt, num_steps, cfg_scale],
+        inputs=[prompt],
         outputs=output_image,
         api_visibility="public"
     )
     
     prompt.submit(
         fn=generate_image,
-        inputs=[prompt, negative_prompt, num_steps, cfg_scale],
+        inputs=[prompt],
         outputs=output_image,
         api_visibility="public"
     )

requirements.txt

@@ -1,13 +1,17 @@
 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
+Pillow
+torchvision
+torchaudio
+numpy
+scipy
+opencv-python
+matplotlib