import gradio as gr
import torch
from diffusers import AutoPipelineForInpainting, UNet2DConditionModel
import diffusers
from share_btn import community_icon_html, loading_icon_html
pipe = AutoPipelineForInpainting.from_pretrained("SG161222/Realistic_Vision_V5.0_noVAE")
def read_content(file_path: str) -> str:
"""read the content of target file
"""
with open(file_path, 'r', encoding='utf-8') as f:
content = f.read()
return content
def predict(dict, prompt="", negative_prompt="", guidance_scale=7.5, steps=20, strength=1.0, scheduler="EulerDiscreteScheduler"):
if negative_prompt == "":
negative_prompt = None
scheduler_class_name = scheduler.split("-")[0]
add_kwargs = {}
if len(scheduler.split("-")) > 1:
add_kwargs["use_karras"] = True
if len(scheduler.split("-")) > 2:
add_kwargs["algorithm_type"] = "sde-dpmsolver++"
scheduler = getattr(diffusers, scheduler_class_name)
pipe.scheduler = scheduler.from_pretrained("stabilityai/stable-diffusion-xl-base-1.0", subfolder="scheduler", **add_kwargs)
init_image = dict["image"].convert("RGB").resize((1024, 1024))
mask = dict["mask"].convert("RGB").resize((1024, 1024))
output = pipe(prompt = prompt, negative_prompt=negative_prompt, image=init_image, mask_image=mask, guidance_scale=guidance_scale, num_inference_steps=int(steps), strength=strength)
return output.images[0], gr.update(visible=True)
css = '''
.gradio-container{max-width: 1100px !important}
#image_upload{min-height:400px}
#image_upload [data-testid="image"], #image_upload [data-testid="image"] > div{min-height: 400px}
#mask_radio .gr-form{background:transparent; border: none}
#word_mask{margin-top: .75em !important}
#word_mask textarea:disabled{opacity: 0.3}
.footer {margin-bottom: 45px;margin-top: 35px;text-align: center;border-bottom: 1px solid #e5e5e5}
.footer>p {font-size: .8rem; display: inline-block; padding: 0 10px;transform: translateY(10px);background: white}
.dark .footer {border-color: #303030}
.dark .footer>p {background: #0b0f19}
.acknowledgments h4{margin: 1.25em 0 .25em 0;font-weight: bold;font-size: 115%}
#image_upload .touch-none{display: flex}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#share-btn-container {padding-left: 0.5rem !important; padding-right: 0.5rem !important; background-color: #000000; justify-content: center; align-items: center; border-radius: 9999px !important; max-width: 13rem; margin-left: auto;}
div#share-btn-container > div {flex-direction: row;background: black;align-items: center}
#share-btn-container:hover {background-color: #060606}
#share-btn {all: initial; color: #ffffff;font-weight: 600; cursor:pointer; font-family: 'IBM Plex Sans', sans-serif; margin-left: 0.5rem !important; padding-top: 0.5rem !important; padding-bottom: 0.5rem !important;right:0;}
#share-btn * {all: unset}
#share-btn-container div:nth-child(-n+2){width: auto !important;min-height: 0px !important;}
#share-btn-container .wrap {display: none !important}
#share-btn-container.hidden {display: none!important}
#prompt input{width: calc(100% - 160px);border-top-right-radius: 0px;border-bottom-right-radius: 0px;}
#run_button{position:absolute;margin-top: 11px;right: 0;margin-right: 0.8em;border-bottom-left-radius: 0px;
border-top-left-radius: 0px;}
#prompt-container{margin-top:-18px;}
#prompt-container .form{border-top-left-radius: 0;border-top-right-radius: 0}
#image_upload{border-bottom-left-radius: 0px;border-bottom-right-radius: 0px}
'''
share_js = """async () => {
async function uploadFile(file){
const UPLOAD_URL = 'https://huggingface.co/uploads';
const response = await fetch(UPLOAD_URL, {
method: 'POST',
headers: {
'Content-Type': file.type,
'X-Requested-With': 'XMLHttpRequest',
},
body: file, /// <- File inherits from Blob
});
const url = await response.text();
return url;
}
async function getInputImgFile(imgCanvas){
const blob = await new Promise(resolve => imgCanvas.toBlob(resolve));
const imgId = Date.now() % 200;
const fileName = `sd-inpainting-${{imgId}}.png`;
return new File([blob], fileName, { type: 'image/png' });
}
async function getOutoutImgFile(imgEl){
const res = await fetch(imgEl.src);
const blob = await res.blob();
const imgId = Date.now() % 200;
const fileName = `sd-inpainting-${{imgId}}.png`;
return new File([blob], fileName, { type: 'image/png' });
}
const gradioEl = document.querySelector('body > gradio-app');
// const gradioEl = document.querySelector("gradio-app").shadowRoot;
const inputImgCanvas = gradioEl.querySelector('canvas[key="drawing"]');
const outputImgEl = gradioEl.querySelector('#output-img img');
const promptTxt = gradioEl.querySelector('#prompt textarea').value;
let titleTxt = promptTxt;
if(titleTxt.length > 100){
titleTxt = titleTxt.slice(0, 100) + ' ...';
}
const shareBtnEl = gradioEl.querySelector('#share-btn');
const shareIconEl = gradioEl.querySelector('#share-btn-share-icon');
const loadingIconEl = gradioEl.querySelector('#share-btn-loading-icon');
if(!outputImgEl){
return;
};
shareBtnEl.style.pointerEvents = 'none';
shareIconEl.style.display = 'none';
loadingIconEl.style.removeProperty('display');
const inputImgFile = await getInputImgFile(inputImgCanvas);
const outputImgFile = await getOutoutImgFile(outputImgEl);
const files = [inputImgFile, outputImgFile];
const urls = await Promise.all(files.map((f) => uploadFile(f)));
const htmlImgs = urls.map(url => ``);
const [inputImgUrl, outputImgUrl] = htmlImgs;
const descriptionMd = `