demo-custom-css / app.py
sayakpaul's picture
sayakpaul HF staff
more elements.
484064c
raw
history blame
4.44 kB
from constants import css
import gradio as gr
block = gr.Blocks(css=css)
with block:
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;
"
>
<svg
width="0.65em"
height="0.65em"
viewBox="0 0 115 115"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="23" height="23" fill="white"></rect>
<rect y="69" width="23" height="23" fill="white"></rect>
<rect x="23" width="23" height="23" fill="#AEAEAE"></rect>
<rect x="23" y="69" width="23" height="23" fill="#AEAEAE"></rect>
<rect x="46" width="23" height="23" fill="white"></rect>
<rect x="46" y="69" width="23" height="23" fill="white"></rect>
<rect x="69" width="23" height="23" fill="black"></rect>
<rect x="69" y="69" width="23" height="23" fill="black"></rect>
<rect x="92" width="23" height="23" fill="#D9D9D9"></rect>
<rect x="92" y="69" width="23" height="23" fill="#AEAEAE"></rect>
<rect x="115" y="46" width="23" height="23" fill="white"></rect>
<rect x="115" y="115" width="23" height="23" fill="white"></rect>
<rect x="115" y="69" width="23" height="23" fill="#D9D9D9"></rect>
<rect x="92" y="46" width="23" height="23" fill="#AEAEAE"></rect>
<rect x="92" y="115" width="23" height="23" fill="#AEAEAE"></rect>
<rect x="92" y="69" width="23" height="23" fill="white"></rect>
<rect x="69" y="46" width="23" height="23" fill="white"></rect>
<rect x="69" y="115" width="23" height="23" fill="white"></rect>
<rect x="69" y="69" width="23" height="23" fill="#D9D9D9"></rect>
<rect x="46" y="46" width="23" height="23" fill="black"></rect>
<rect x="46" y="115" width="23" height="23" fill="black"></rect>
<rect x="46" y="69" width="23" height="23" fill="black"></rect>
<rect x="23" y="46" width="23" height="23" fill="#D9D9D9"></rect>
<rect x="23" y="115" width="23" height="23" fill="#AEAEAE"></rect>
<rect x="23" y="69" width="23" height="23" fill="black"></rect>
</svg>
<h1 style="font-weight: 900; margin-bottom: 7px;margin-top:5px">
Stable Diffusion fine-tuned Pokemons ๐Ÿพ
</h1>
</div>
<p style="margin-bottom: 10px; font-size: 94%; line-height: 23px;">
This Space demonstrates a fine-tuned version of the <a style="text-decoration: underline;" href="https://github.com/keras-team/keras-cv/tree/master/keras_cv/models/stable_diffusion">Stable Diffusion (v1) model shipped by KerasCV</a>. You can use the model to generate custom Pokemon-like characters. To get started either enter a text prompt or try one from the ones given below.
</p>
</div>
"""
)
with gr.Group():
with gr.Box():
with gr.Row(elem_id="prompt-container").style(
mobile_collapse=False, equal_height=True
):
with gr.Column():
text = gr.Textbox(
label="Enter your prompt",
show_label=False,
max_lines=1,
placeholder="Enter your prompt",
elem_id="prompt-text-input",
).style(
border=(True, False, True, True),
rounded=(True, False, False, True),
container=False,
)
guidance_scale = gr.Slider(
label="Guidance Scale", minimum=10, maximum=50, value=40, step=1.0
)
btn = gr.Button("Generate image").style(
margin=False, rounded=(False, True, True, False), full_width=False
)
block.launch()