Spaces:
Sleeping
Sleeping
import gradio as gr | |
import requests | |
import io | |
import random | |
import os | |
from PIL import Image | |
API_URL = "https://api-inference.huggingface.co/models/runwayml/stable-diffusion-v1-5" | |
API_TOKEN = os.getenv("HF_READ_TOKEN") # it is free | |
headers = {"Authorization": f"Bearer {API_TOKEN}"} | |
def query(prompt, is_negative=False, steps=1, cfg_scale=6, seed=None): | |
payload = { | |
"inputs": prompt, | |
"is_negative": is_negative, | |
"steps": steps, | |
"cfg_scale": cfg_scale, | |
"seed": seed if seed is not None else random.randint(-1, 2147483647) | |
} | |
image_bytes = requests.post(API_URL, headers=headers, json=payload).content | |
image = Image.open(io.BytesIO(image_bytes)) | |
return image | |
css = """ | |
/* Improve overall layout and styling */ | |
.gradio-container { | |
font-family: 'IBM Plex Sans', sans-serif; | |
max-width: 800px; /* Adjusted max-width for better readability */ | |
margin: auto; | |
padding: 1.5rem; | |
background-color: #f4f4f4; /* Added a light background color */ | |
border-radius: 10px; /* Added border radius for a softer look */ | |
} | |
/* Improve button styling */ | |
.gr-button { | |
color: #fff; | |
background: #3498db; /* Changed button color to a shade of blue */ | |
border: 1px solid #2980b9; /* Added a border for contrast */ | |
border-radius: 5px; /* Added border radius for rounded corners */ | |
padding: 10px 20px; /* Increased padding for a better click target */ | |
} | |
.gr-button:hover { | |
background: #217dbb; /* Darker shade on hover for visual feedback */ | |
} | |
/* Improve range input styling */ | |
input[type='range'] { | |
accent-color: #3498db; /* Adjusted accent color for better visibility */ | |
} | |
/* Improve gallery styling */ | |
#gallery { | |
min-height: 300px; | |
margin: 15px auto; /* Centered the gallery with margin */ | |
border-radius: 10px; /* Added border radius for a softer look */ | |
overflow: hidden; /* Hide overflow for a cleaner appearance */ | |
} | |
/* Add box shadow to gallery for depth */ | |
#gallery>div { | |
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | |
} | |
/* Add transition to details for smoother underline effect */ | |
.details { | |
transition: text-decoration 0.3s ease; | |
} | |
/* Add styling to advanced options button */ | |
#advanced-btn { | |
font-size: 1rem; | |
line-height: 24px; | |
background-color: #27ae60; /* Green color for contrast */ | |
color: #fff; | |
border-radius: 10px; | |
padding: 8px 16px; | |
cursor: pointer; | |
} | |
#advanced-btn:hover { | |
background-color: #219653; /* Darker green on hover */ | |
} | |
/* Show advanced options by default */ | |
#advanced-options { | |
display: block; | |
margin-bottom: 20px; | |
} | |
/* Improve footer styling */ | |
.footer { | |
margin: 35px auto; | |
text-align: center; | |
border-top: 1px solid #e5e5e5; | |
padding: 15px 0; | |
} | |
.footer>p { | |
font-size: 1rem; | |
display: inline-block; | |
padding: 0 10px; | |
background: #fff; | |
border-radius: 5px; | |
margin: 0; | |
} | |
/* Improve acknowledgments heading */ | |
.acknowledgments h4 { | |
margin: 1em 0 0.25em 0; | |
font-weight: bold; | |
font-size: 120%; /* Slightly increased font size */ | |
} | |
/* Add a subtle spin animation to the loading spinner */ | |
.animate-spin { | |
animation: spin 1s linear infinite; | |
} | |
/* Add box shadow to share button container for depth */ | |
#share-btn-container { | |
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | |
overflow: hidden; /* Hide overflow for a cleaner appearance */ | |
} | |
/* Adjust prompt container styles */ | |
#prompt-container { | |
gap: 10px; /* Increased gap for better spacing */ | |
} | |
/* Adjust prompt text input padding */ | |
#prompt-text-input, #negative-prompt-text-input { | |
padding: 10px; | |
} | |
/* Adjust tab item styles */ | |
.tabitem { | |
border: 1px solid #ddd; /* Added a subtle border */ | |
border-radius: 5px; /* Added border radius for a softer look */ | |
margin: 5px; | |
padding: 10px; | |
cursor: pointer; | |
} | |
.tabitem:hover { | |
background-color: #f5f5f5; /* Light background color on hover */ | |
} | |
""" | |
with gr.Blocks(css=css, theme="pseudolab/huggingface-korea-theme") as dalle: | |
gr.HTML( | |
""" | |
<div style="text-align: center; margin: 0 auto;"> | |
<div | |
style=" | |
display: inline-flex; | |
align-items: center; | |
gap: 0.8rem; | |
font-size: 1.75rem; | |
" | |
> | |
<h1 style="font-weight: 900; margin-bottom: 7px;margin-top:5px"> | |
Stable Diffusion v1.5 XL | |
</h1> | |
</div> | |
<p style="margin-bottom: 10px; font-size: 94%; line-height: 23px;"> | |
</p> | |
</div> | |
""" | |
) | |
with gr.Row(): | |
image_output = gr.Image(type="pil", label="Output Image", elem_id="gallery") | |
with gr.Column(elem_id="prompt-container"): | |
text_prompt = gr.Textbox(label="Prompt", placeholder="a cute dog", lines=1, elem_id="prompt-text-input") | |
text_button = gr.Button("Generate", variant='primary', elem_id="gen-button") | |
with gr.Accordion("Advanced settings", open=False): | |
negative_prompt = gr.Textbox(label="Negative Prompt", value="text, blurry, fuzziness", lines=1, elem_id="negative-prompt-text-input") | |
text_button.click(query, inputs=[text_prompt, negative_prompt], outputs=image_output) | |
dalle.launch(show_api=False) |