Spaces:
Running
on
Zero
Running
on
Zero
| import os | |
| import subprocess | |
| import sys | |
| import io | |
| import re | |
| import gradio as gr | |
| import numpy as np | |
| import random | |
| import spaces | |
| import torch | |
| from diffusers import Flux2Pipeline, Flux2Transformer2DModel | |
| from diffusers import BitsAndBytesConfig as DiffBitsAndBytesConfig | |
| import requests | |
| from PIL import Image | |
| import json | |
| import base64 | |
| from huggingface_hub import InferenceClient | |
| subprocess.check_call([sys.executable, "-m", "pip", "install", "spaces==0.43.0"]) | |
| dtype = torch.bfloat16 | |
| device = "cuda" if torch.cuda.is_available() else "cpu" | |
| MAX_SEED = np.iinfo(np.int32).max | |
| MAX_IMAGE_SIZE = 1024 | |
| hf_client = InferenceClient( | |
| api_key=os.environ.get("HF_TOKEN"), | |
| ) | |
| VLM_MODEL = "baidu/ERNIE-4.5-VL-424B-A47B-Base-PT" | |
| SYSTEM_PROMPT_TEXT_ONLY = """You are an expert prompt engineer for FLUX.2 by Black Forest Labs. Rewrite user prompts to be more descriptive while strictly preserving their core subject and intent. | |
| Guidelines: | |
| 1. Structure: Keep structured inputs structured (enhance within fields). Convert natural language to detailed paragraphs. | |
| 2. Details: Add concrete visual specifics - form, scale, textures, materials, lighting (quality, direction, color), shadows, spatial relationships, and environmental context. | |
| 3. Text in Images: Put ALL text in quotation marks, matching the prompt's language. Always provide explicit quoted text for objects that would contain text in reality (signs, labels, screens, etc.) - without it, the model generates gibberish. | |
| Output only the revised prompt and nothing else.""" | |
| SYSTEM_PROMPT_WITH_IMAGES = """You are FLUX.2 by Black Forest Labs, an image-editing expert. You convert editing requests into one concise instruction (50-80 words, ~30 for brief requests). | |
| Rules: | |
| - Single instruction only, no commentary | |
| - Use clear, analytical language (avoid "whimsical," "cascading," etc.) | |
| - Specify what changes AND what stays the same (face, lighting, composition) | |
| - Reference actual image elements | |
| - Turn negatives into positives ("don't change X" → "keep X") | |
| - Make abstractions concrete ("futuristic" → "glowing cyan neon, metallic panels") | |
| - Keep content PG-13 | |
| Output only the final instruction in plain text and nothing else.""" | |
| def remote_text_encoder(prompts): | |
| response = requests.post( | |
| "https://remote-text-encoder-flux-2.huggingface.co/predict", | |
| json={"prompt": prompts}, | |
| headers={ | |
| "Authorization": f"Bearer {os.environ['HF_TOKEN']}", | |
| "Content-Type": "application/json", | |
| }, | |
| ) | |
| assert response.status_code == 200, f"Text encoder failed: {response.status_code}" | |
| prompt_embeds = torch.load(io.BytesIO(response.content)) | |
| return prompt_embeds | |
| # Load model | |
| repo_id = "black-forest-labs/FLUX.2-dev" | |
| dit = Flux2Transformer2DModel.from_pretrained( | |
| repo_id, | |
| subfolder="transformer", | |
| torch_dtype=torch.bfloat16 | |
| ) | |
| pipe = Flux2Pipeline.from_pretrained( | |
| repo_id, | |
| text_encoder=None, | |
| transformer=dit, | |
| torch_dtype=torch.bfloat16 | |
| ) | |
| pipe.to(device) | |
| # Pull pre-compiled Flux2 Transformer blocks from HF hub | |
| spaces.aoti_blocks_load(pipe.transformer, "zerogpu-aoti/FLUX.2", variant="fa3") | |
| def image_to_data_uri(img): | |
| buffered = io.BytesIO() | |
| img.save(buffered, format="PNG") | |
| img_str = base64.b64encode(buffered.getvalue()).decode("utf-8") | |
| return f"data:image/png;base64,{img_str}" | |
| def upsample_prompt_logic(prompt, image_list): | |
| try: | |
| if image_list and len(image_list) > 0: | |
| # Image + Text Editing Mode | |
| system_content = SYSTEM_PROMPT_WITH_IMAGES | |
| # Construct user message with text and images | |
| user_content = [{"type": "text", "text": prompt}] | |
| for img in image_list: | |
| data_uri = image_to_data_uri(img) | |
| user_content.append({ | |
| "type": "image_url", | |
| "image_url": {"url": data_uri} | |
| }) | |
| messages = [ | |
| {"role": "system", "content": system_content}, | |
| {"role": "user", "content": user_content} | |
| ] | |
| else: | |
| # Text Only Mode | |
| system_content = SYSTEM_PROMPT_TEXT_ONLY | |
| messages = [ | |
| {"role": "system", "content": system_content}, | |
| {"role": "user", "content": prompt} | |
| ] | |
| completion = hf_client.chat.completions.create( | |
| model=VLM_MODEL, | |
| messages=messages, | |
| max_tokens=1024 | |
| ) | |
| return completion.choices[0].message.content | |
| except Exception as e: | |
| print(f"Upsampling failed: {e}") | |
| return prompt | |
| def update_dimensions_from_image(image_list): | |
| """Update width/height sliders based on uploaded image aspect ratio. | |
| Keeps one side at 1024 and scales the other proportionally, with both sides as multiples of 8.""" | |
| if image_list is None or len(image_list) == 0: | |
| return 1024, 1024 # Default dimensions | |
| # Get the first image to determine dimensions | |
| img = image_list[0][0] # Gallery returns list of tuples (image, caption) | |
| img_width, img_height = img.size | |
| aspect_ratio = img_width / img_height | |
| if aspect_ratio >= 1: # Landscape or square | |
| new_width = 1024 | |
| new_height = int(1024 / aspect_ratio) | |
| else: # Portrait | |
| new_height = 1024 | |
| new_width = int(1024 * aspect_ratio) | |
| # Round to nearest multiple of 8 | |
| new_width = round(new_width / 8) * 8 | |
| new_height = round(new_height / 8) * 8 | |
| # Ensure within valid range (minimum 256, maximum 1024) | |
| new_width = max(256, min(1024, new_width)) | |
| new_height = max(256, min(1024, new_height)) | |
| return new_width, new_height | |
| # Updated duration function to match generate_image arguments (including progress) | |
| def get_duration(prompt_embeds, image_list, width, height, num_inference_steps, guidance_scale, seed, progress=gr.Progress(track_tqdm=True)): | |
| num_images = 0 if image_list is None else len(image_list) | |
| step_duration = 1 + 0.8 * num_images | |
| return max(65, num_inference_steps * step_duration + 10) | |
| def generate_image(prompt_embeds, image_list, width, height, num_inference_steps, guidance_scale, seed, progress=gr.Progress(track_tqdm=True)): | |
| # Move embeddings to GPU only when inside the GPU decorated function | |
| prompt_embeds = prompt_embeds.to(device) | |
| generator = torch.Generator(device=device).manual_seed(seed) | |
| pipe_kwargs = { | |
| "prompt_embeds": prompt_embeds, | |
| "image": image_list, | |
| "num_inference_steps": num_inference_steps, | |
| "guidance_scale": guidance_scale, | |
| "generator": generator, | |
| "width": width, | |
| "height": height, | |
| } | |
| # Progress bar for the actual generation steps | |
| if progress: | |
| progress(0, desc="Starting generation...") | |
| image = pipe(**pipe_kwargs).images[0] | |
| return image | |
| def parse_aspect_ratio(aspect_ratio_str): | |
| """Parse aspect ratio string to get width and height.""" | |
| # Extract dimensions from format like "1:1 (1024x1024)" | |
| match = re.search(r'\((\d+)x(\d+)\)', aspect_ratio_str) | |
| if match: | |
| return int(match.group(1)), int(match.group(2)) | |
| return 1024, 1024 # Default | |
| def infer(prompt, aspect_ratio="1:1 (1024x1024)", progress=gr.Progress(track_tqdm=True)): | |
| """Generate an image using FLUX.2 model.""" | |
| if not prompt.strip(): | |
| raise gr.Error("Please enter a prompt to generate an image.") | |
| # Always use random seed | |
| seed = random.randint(0, MAX_SEED) | |
| # Parse aspect ratio to get width and height | |
| width, height = parse_aspect_ratio(aspect_ratio) | |
| # Fixed inference parameters | |
| num_inference_steps = 30 | |
| guidance_scale = 4.0 | |
| # Text Encoding (Network bound - No GPU needed) | |
| progress(0.1, desc="Encoding prompt...") | |
| prompt_embeds = remote_text_encoder(prompt) | |
| # Image Generation (GPU bound) | |
| progress(0.3, desc="Generating image...") | |
| image = generate_image( | |
| prompt_embeds, | |
| None, # No input images | |
| width, | |
| height, | |
| num_inference_steps, | |
| guidance_scale, | |
| seed, | |
| progress | |
| ) | |
| return image | |
| examples = [ | |
| ["Create a vase on a table in living room, the color of the vase is a gradient of color, starting with #02eb3c color and finishing with #edfa3c. The flowers inside the vase have the color #ff0088"], | |
| ["Photorealistic infographic showing the complete Berlin TV Tower (Fernsehturm) from ground base to antenna tip, full vertical view with entire structure visible including concrete shaft, metallic sphere, and antenna spire. Slight upward perspective angle looking up toward the iconic sphere, perfectly centered on clean white background. Left side labels with thin horizontal connector lines: the text '368m' in extra large bold dark grey numerals (#2D3748) positioned at exactly the antenna tip with 'TOTAL HEIGHT' in small caps below. The text '207m' in extra large bold with 'TELECAFÉ' in small caps below, with connector line touching the sphere precisely at the window level. Right side label with horizontal connector line touching the sphere's equator: the text '32m' in extra large bold dark grey numerals with 'SPHERE DIAMETER' in small caps below. Bottom section arranged in three balanced columns: Left - Large text '986' in extra bold dark grey with 'STEPS' in caps below. Center - 'BERLIN TV TOWER' in bold caps with 'FERNSEHTURM' in lighter weight below. Right - 'INAUGURATED' in bold caps with 'OCTOBER 3, 1969' below. All typography in modern sans-serif font (such as Inter or Helvetica), color #2D3748, clean minimal technical diagram style. Horizontal connector lines are thin, precise, and clearly visible, touching the tower structure at exact corresponding measurement points. Professional architectural elevation drawing aesthetic with dynamic low angle perspective creating sense of height and grandeur, poster-ready infographic design with perfect visual hierarchy."], | |
| ["Soaking wet capybara taking shelter under a banana leaf in the rainy jungle, close up photo"], | |
| ["A kawaii die-cut sticker of a chubby orange cat, featuring big sparkly eyes and a happy smile with paws raised in greeting and a heart-shaped pink nose. The design should have smooth rounded lines with black outlines and soft gradient shading with pink cheeks."], | |
| ] | |
| examples_images = [ | |
| # ["Replace the top of the person from image 1 with the one from image 2", ["person1.webp", "woman2.webp"]], | |
| ["The person from image 1 is petting the cat from image 2, the bird from image 3 is next to them", ["woman1.webp", "cat_window.webp", "bird.webp"]] | |
| ] | |
| # Apple-inspired CSS styling (matching Z-Image exactly) | |
| css = """ | |
| /* Global Styles */ | |
| .gradio-container { | |
| max-width: 85vw !important; | |
| margin: 0 auto !important; | |
| padding: 16px 20px !important; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Roboto', sans-serif !important; | |
| } | |
| /* Disable all transitions globally */ | |
| * { | |
| transition: none !important; | |
| animation: none !important; | |
| } | |
| /* Header */ | |
| .header-container { | |
| text-align: left; | |
| margin-bottom: 12px; | |
| } | |
| .main-title { | |
| font-size: 28px !important; | |
| font-weight: 600 !important; | |
| letter-spacing: -0.02em !important; | |
| line-height: 1.07 !important; | |
| color: #f5f5f7 !important; | |
| margin: 0 0 8px 0 !important; | |
| } | |
| /* Input Section */ | |
| .input-section { | |
| background: #1d1d1f !important; | |
| border-radius: 18px !important; | |
| padding: 32px !important; | |
| box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important; | |
| width: 550px !important; | |
| min-width: 550px !important; | |
| max-width: 550px !important; | |
| flex: 0 0 550px !important; | |
| flex-shrink: 0 !important; | |
| flex-grow: 0 !important; | |
| } | |
| /* Textbox */ | |
| textarea { | |
| font-size: 15px !important; | |
| line-height: 1.47 !important; | |
| border-radius: 12px !important; | |
| border: 1px solid #424245 !important; | |
| padding: 12px 16px !important; | |
| background: #2d2d2f !important; | |
| color: #f5f5f7 !important; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important; | |
| min-height: 480px !important; | |
| max-height: 600px !important; | |
| height: 480px !important; | |
| resize: vertical !important; | |
| overflow-y: auto !important; | |
| margin-bottom: 12px !important; | |
| } | |
| /* Disable label click highlight */ | |
| label { | |
| pointer-events: none !important; | |
| } | |
| textarea:focus { | |
| border-color: #0071e3 !important; | |
| box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15) !important; | |
| outline: none !important; | |
| } | |
| textarea::placeholder { | |
| color: #86868b !important; | |
| } | |
| /* Character counter */ | |
| .char-counter { | |
| text-align: center; | |
| font-size: 13px; | |
| color: #86868b; | |
| margin-top: -12px; | |
| margin-bottom: 16px; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif; | |
| } | |
| .char-counter.warning { | |
| color: #ff9500; | |
| } | |
| .char-counter.limit { | |
| color: #ff3b30; | |
| } | |
| /* 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: #ffffff !important; | |
| min-height: 44px !important; | |
| letter-spacing: -0.01em !important; | |
| cursor: pointer !important; | |
| width: 100% !important; | |
| } | |
| button.primary:hover { | |
| background: #0077ed !important; | |
| } | |
| button.primary:active { | |
| opacity: 0.9 !important; | |
| } | |
| /* Output Section - White outer, dark inner like Z-Image */ | |
| div.output-section { | |
| background: #ffffff !important; | |
| border-radius: 18px !important; | |
| padding: 32px !important; | |
| box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important; | |
| overflow: hidden !important; | |
| display: flex !important; | |
| align-items: center !important; | |
| justify-content: center !important; | |
| min-height: 80vh !important; | |
| max-height: 90vh !important; | |
| will-change: auto !important; | |
| position: relative !important; | |
| flex-grow: 1 !important; | |
| flex-shrink: 0 !important; | |
| flex-basis: auto !important; | |
| } | |
| .output-section * { | |
| transform: none !important; | |
| transition: none !important; | |
| animation: none !important; | |
| } | |
| .output-section img { | |
| border-radius: 12px !important; | |
| max-width: 100% !important; | |
| max-height: 85vh !important; | |
| width: auto !important; | |
| height: auto !important; | |
| object-fit: contain !important; | |
| transform: none !important; | |
| transition: none !important; | |
| animation: none !important; | |
| backface-visibility: hidden !important; | |
| -webkit-backface-visibility: hidden !important; | |
| } | |
| /* Inner image area - white background matching Z-Image */ | |
| .output-section > div { | |
| width: 100% !important; | |
| min-height: 75vh !important; | |
| max-height: 85vh !important; | |
| display: flex !important; | |
| align-items: center !important; | |
| justify-content: center !important; | |
| } | |
| .output-section > div > div { | |
| min-height: 75vh !important; | |
| max-height: 85vh !important; | |
| width: 100% !important; | |
| display: flex !important; | |
| align-items: center !important; | |
| justify-content: center !important; | |
| } | |
| .output-section * { | |
| max-width: 100% !important; | |
| } | |
| /* Dark mode - input section only (output stays white like Z-Image) */ | |
| .dark .input-section { | |
| background: #1d1d1f !important; | |
| box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important; | |
| } | |
| /* Title color */ | |
| .input-section .main-title { | |
| color: #f5f5f7 !important; | |
| } | |
| /* Layout - Force horizontal layout */ | |
| #main-row { | |
| align-items: flex-start !important; | |
| flex-direction: row !important; | |
| display: flex !important; | |
| flex-wrap: nowrap !important; | |
| width: 100% !important; | |
| gap: 24px !important; | |
| } | |
| .gradio-row { | |
| align-items: flex-start !important; | |
| flex-direction: row !important; | |
| display: flex !important; | |
| flex-wrap: nowrap !important; | |
| width: 100% !important; | |
| } | |
| .gradio-row > .gradio-column:first-child, | |
| .gradio-row > div:first-child { | |
| width: 550px !important; | |
| min-width: 550px !important; | |
| max-width: 550px !important; | |
| flex: 0 0 550px !important; | |
| } | |
| .gradio-row > .gradio-column:last-child, | |
| .gradio-row > div:last-child { | |
| flex: 1 1 auto !important; | |
| min-width: 0 !important; | |
| } | |
| /* Hide footer */ | |
| footer { | |
| display: none !important; | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 1200px) { | |
| #main-row { | |
| flex-direction: column !important; | |
| flex-wrap: wrap !important; | |
| } | |
| .input-section { | |
| width: 100% !important; | |
| min-width: 100% !important; | |
| max-width: 100% !important; | |
| flex: 1 1 100% !important; | |
| } | |
| .output-section { | |
| width: 100% !important; | |
| min-height: 50vh !important; | |
| } | |
| } | |
| """ | |
| # JavaScript for layout control and character counter (matching Z-Image) | |
| js_code = """ | |
| function() { | |
| function setupCharCounter() { | |
| const textbox = document.querySelector('#prompt-textbox textarea'); | |
| const counter = document.querySelector('.char-counter'); | |
| const countSpan = document.getElementById('char-count'); | |
| if (textbox && counter && countSpan) { | |
| function updateCount() { | |
| const len = textbox.value.length; | |
| countSpan.textContent = len; | |
| counter.classList.remove('warning', 'limit'); | |
| if (len >= 2000) { | |
| counter.classList.add('limit'); | |
| } else if (len >= 1800) { | |
| counter.classList.add('warning'); | |
| } | |
| } | |
| textbox.addEventListener('input', updateCount); | |
| updateCount(); | |
| } | |
| } | |
| function forceHorizontalLayout() { | |
| const container = document.querySelector('.gradio-container'); | |
| if (container) { | |
| container.style.maxWidth = '85vw'; | |
| container.style.width = '85vw'; | |
| } | |
| const mainRow = document.getElementById('main-row'); | |
| if (mainRow) { | |
| mainRow.style.flexDirection = 'row'; | |
| mainRow.style.flexWrap = 'nowrap'; | |
| mainRow.style.display = 'flex'; | |
| mainRow.style.width = '100%'; | |
| } | |
| const rows = document.querySelectorAll('.gradio-row'); | |
| rows.forEach(row => { | |
| row.style.flexDirection = 'row'; | |
| row.style.flexWrap = 'nowrap'; | |
| row.style.display = 'flex'; | |
| }); | |
| const inputCol = document.getElementById('input-column'); | |
| if (inputCol) { | |
| inputCol.style.width = '550px'; | |
| inputCol.style.minWidth = '550px'; | |
| inputCol.style.maxWidth = '550px'; | |
| inputCol.style.flex = '0 0 550px'; | |
| } | |
| const outputCol = document.getElementById('output-column'); | |
| if (outputCol) { | |
| outputCol.style.flex = '1 1 auto'; | |
| outputCol.style.minWidth = '0'; | |
| } | |
| } | |
| forceHorizontalLayout(); | |
| setupCharCounter(); | |
| setTimeout(forceHorizontalLayout, 100); | |
| setTimeout(forceHorizontalLayout, 500); | |
| setTimeout(forceHorizontalLayout, 1000); | |
| setTimeout(forceHorizontalLayout, 2000); | |
| setTimeout(setupCharCounter, 100); | |
| setTimeout(setupCharCounter, 500); | |
| const observer = new MutationObserver(forceHorizontalLayout); | |
| observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); | |
| } | |
| """ | |
| with gr.Blocks( | |
| title="FLUX.2-Image", | |
| fill_height=False, | |
| ) as demo: | |
| # Two-column layout | |
| with gr.Row(equal_height=False, variant="panel", elem_id="main-row"): | |
| # LEFT COLUMN - Input Controls | |
| with gr.Column(scale=0, min_width=550, elem_classes="input-section", elem_id="input-column"): | |
| # Header | |
| gr.HTML(""" | |
| <div class="header-container"> | |
| <h1 class="main-title">FLUX.2-Image</h1> | |
| </div> | |
| """) | |
| # Prompt Textbox | |
| prompt = gr.Textbox( | |
| placeholder="Describe the image you want to create...", | |
| value="Ultra-detailed isometric 3D diorama of a compact AI research lab inside a cutaway cube room. One person seated at a large desk placed directly against the left wall, equipped with exactly three displays, working at a keyboard, wearing large white over-ear headphones, with the mouse positioned next to the person's right hand. A large whiteboard mounted on the left wall directly in front of the desk, filled with technical diagrams and flowcharts. The room is bright, clean, and uncluttered, with a minimalist gray floor and walls.\n\nAlong the right side of the room, arranged from left to right: two tall server racks standing side by side with no gap between them, fully filled from floor to top with dense AI server units and glowing green LED indicator lights; next to the racks, a small snack bar with neatly arranged packaged snacks on shelves and a counter; and at the far right, a clear glass-front refrigerator filled with energy drinks. These are the only server racks in the room. Clean modern lighting, realistic soft shadows, no floating screens or holograms, high realism, sharp focus, professional isometric 3D style.", | |
| lines=20, | |
| max_lines=25, | |
| max_length=2000, | |
| label="Prompt", | |
| show_label=True, | |
| container=True, | |
| autoscroll=False, | |
| elem_id="prompt-textbox", | |
| ) | |
| # Character Counter | |
| char_counter = gr.HTML( | |
| '<div class="char-counter"><span id="char-count">0</span> characters (max 2000)</div>' | |
| ) | |
| # Aspect Ratio Dropdown | |
| aspect_ratio = gr.Dropdown( | |
| choices=[ | |
| "1:1 (1024x1024)", | |
| "2:3 (680x1024)", | |
| "3:2 (1024x680)", | |
| "3:4 (768x1024)", | |
| "4:3 (1024x768)", | |
| "9:16 (576x1024)", | |
| "16:9 (1024x576)", | |
| ], | |
| value="1:1 (1024x1024)", | |
| label="Aspect Ratio", | |
| show_label=True, | |
| container=True, | |
| ) | |
| # Generate Button | |
| generate_btn = gr.Button( | |
| "Generate", | |
| variant="primary", | |
| size="lg", | |
| elem_classes="primary" | |
| ) | |
| # RIGHT COLUMN - Image Output | |
| with gr.Column(scale=2, elem_classes="output-section", elem_id="output-column"): | |
| result = gr.Image( | |
| label="Result", | |
| show_label=False, | |
| type="pil", | |
| format="png", | |
| ) | |
| # Event handlers | |
| gr.on( | |
| triggers=[generate_btn.click, prompt.submit], | |
| fn=infer, | |
| inputs=[prompt, aspect_ratio], | |
| outputs=[result], | |
| show_progress="full" | |
| ) | |
| # Load JavaScript for layout control | |
| demo.load(None, None, None, js=js_code) | |
| demo.launch( | |
| share=False, | |
| show_error=True, | |
| 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_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='#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 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_border_color='#d2d2d7', | |
| input_border_color_dark='#424245', | |
| input_shadow='none', | |
| input_shadow_focus='0 0 0 4px rgba(0, 113, 227, 0.15)', | |
| ), | |
| css=css, | |
| ) |