|
import gradio as gr |
|
|
|
from lib_controlnet.controlnet_ui.modal import ModalInterface |
|
|
|
PHOTOPEA_LOGO = """ |
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" |
|
width="100%" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve" |
|
style="width: 0.75rem; height 0.75rem; margin-left: 2px;" |
|
> |
|
<path fill="#18A497" opacity="1.000000" stroke="none" |
|
d=" |
|
M1.000000,228.000000 |
|
C1.000000,162.312439 1.000000,96.624878 1.331771,30.719650 |
|
C2.026278,30.171114 2.594676,29.904894 2.721949,29.500008 |
|
C6.913495,16.165672 15.629609,7.322631 28.880219,2.875538 |
|
C29.404272,2.699659 29.633436,1.645129 30.000000,1.000000 |
|
C95.687561,1.000000 161.375122,1.000000 227.258057,1.317018 |
|
C227.660217,1.893988 227.815079,2.296565 228.081207,2.393433 |
|
C241.304657,7.206383 250.980164,15.550970 255.215851,29.410040 |
|
C255.321625,29.756128 256.383850,29.809898 257.000000,30.000000 |
|
C257.000000,95.687561 257.000000,161.375122 256.682983,227.257858 |
|
C256.106049,227.659790 255.699371,227.815521 255.607178,228.080658 |
|
C250.953033,241.462830 242.292618,250.822968 228.591782,255.214935 |
|
C228.239929,255.327698 228.190491,256.383820 228.000000,257.000000 |
|
C175.312439,257.000000 122.624878,257.000000 69.468582,256.531342 |
|
C68.672188,244.948196 68.218323,233.835587 68.052299,222.718674 |
|
C67.885620,211.557587 67.886772,200.390717 68.027298,189.229050 |
|
C68.255180,171.129044 68.084618,152.997421 69.151917,134.942368 |
|
C70.148468,118.083969 77.974228,103.689308 89.758743,91.961365 |
|
C104.435837,77.354736 122.313736,69.841736 143.417328,69.901505 |
|
C168.662338,69.972984 186.981964,90.486633 187.961487,114.156334 |
|
C189.042435,140.277435 166.783981,163.607941 140.303482,160.823074 |
|
C137.092346,160.485382 133.490692,158.365784 131.192612,155.987366 |
|
C126.434669,151.063141 126.975357,144.720825 129.168777,138.834930 |
|
C131.533630,132.489014 137.260605,130.548050 143.413757,130.046677 |
|
C150.288467,129.486496 156.424942,123.757378 157.035324,117.320816 |
|
C157.953949,107.633820 150.959381,101.769096 145.533951,101.194389 |
|
C132.238846,99.786079 120.699944,104.963120 111.676735,114.167313 |
|
C102.105782,123.930222 97.469498,136.194061 99.003151,150.234955 |
|
C100.540352,164.308228 107.108505,175.507980 118.864334,183.311539 |
|
C128.454544,189.677597 138.866959,191.786957 150.657837,190.245651 |
|
C166.242554,188.208420 179.874283,182.443329 191.251801,172.056793 |
|
C209.355011,155.530380 217.848694,134.938721 216.116119,110.085892 |
|
C214.834335,91.699440 207.721039,76.015915 195.289444,62.978828 |
|
C175.658447,42.391735 150.833389,37.257801 123.833740,42.281937 |
|
C98.675804,46.963364 78.315033,60.084667 62.208153,80.157814 |
|
C46.645889,99.552216 39.305275,121.796379 39.149052,146.201981 |
|
C38.912663,183.131317 39.666767,220.067017 40.000000,257.000000 |
|
C36.969406,257.000000 33.938812,257.000000 30.705070,256.668213 |
|
C30.298622,256.078369 30.144913,255.669220 29.884926,255.583878 |
|
C16.317770,251.131058 7.127485,242.317780 2.778462,228.591797 |
|
C2.667588,228.241821 1.613958,228.190567 1.000000,228.000000 |
|
z"/> |
|
<path fill="#000000" opacity="1.000000" stroke="none" |
|
d=" |
|
M40.468658,257.000000 |
|
C39.666767,220.067017 38.912663,183.131317 39.149052,146.201981 |
|
C39.305275,121.796379 46.645889,99.552216 62.208153,80.157814 |
|
C78.315033,60.084667 98.675804,46.963364 123.833740,42.281937 |
|
C150.833389,37.257801 175.658447,42.391735 195.289444,62.978828 |
|
C207.721039,76.015915 214.834335,91.699440 216.116119,110.085892 |
|
C217.848694,134.938721 209.355011,155.530380 191.251801,172.056793 |
|
C179.874283,182.443329 166.242554,188.208420 150.657837,190.245651 |
|
C138.866959,191.786957 128.454544,189.677597 118.864334,183.311539 |
|
C107.108505,175.507980 100.540352,164.308228 99.003151,150.234955 |
|
C97.469498,136.194061 102.105782,123.930222 111.676735,114.167313 |
|
C120.699944,104.963120 132.238846,99.786079 145.533951,101.194389 |
|
C150.959381,101.769096 157.953949,107.633820 157.035324,117.320816 |
|
C156.424942,123.757378 150.288467,129.486496 143.413757,130.046677 |
|
C137.260605,130.548050 131.533630,132.489014 129.168777,138.834930 |
|
C126.975357,144.720825 126.434669,151.063141 131.192612,155.987366 |
|
C133.490692,158.365784 137.092346,160.485382 140.303482,160.823074 |
|
C166.783981,163.607941 189.042435,140.277435 187.961487,114.156334 |
|
C186.981964,90.486633 168.662338,69.972984 143.417328,69.901505 |
|
C122.313736,69.841736 104.435837,77.354736 89.758743,91.961365 |
|
C77.974228,103.689308 70.148468,118.083969 69.151917,134.942368 |
|
C68.084618,152.997421 68.255180,171.129044 68.027298,189.229050 |
|
C67.886772,200.390717 67.885620,211.557587 68.052299,222.718674 |
|
C68.218323,233.835587 68.672188,244.948196 68.999924,256.531342 |
|
C59.645771,257.000000 50.291542,257.000000 40.468658,257.000000 |
|
z"/> |
|
<path fill="#000000" opacity="1.000000" stroke="none" |
|
d=" |
|
M257.000000,29.531342 |
|
C256.383850,29.809898 255.321625,29.756128 255.215851,29.410040 |
|
C250.980164,15.550970 241.304657,7.206383 228.081207,2.393433 |
|
C227.815079,2.296565 227.660217,1.893988 227.726715,1.317018 |
|
C237.593155,1.000000 247.186295,1.000000 257.000000,1.000000 |
|
C257.000000,10.353075 257.000000,19.707878 257.000000,29.531342 |
|
z"/> |
|
<path fill="#000000" opacity="1.000000" stroke="none" |
|
d=" |
|
M228.468658,257.000000 |
|
C228.190491,256.383820 228.239929,255.327698 228.591782,255.214935 |
|
C242.292618,250.822968 250.953033,241.462830 255.607178,228.080658 |
|
C255.699371,227.815521 256.106049,227.659790 256.682983,227.726517 |
|
C257.000000,237.593155 257.000000,247.186295 257.000000,257.000000 |
|
C247.646927,257.000000 238.292114,257.000000 228.468658,257.000000 |
|
z"/> |
|
<path fill="#000000" opacity="1.000000" stroke="none" |
|
d=" |
|
M1.000000,228.468658 |
|
C1.613958,228.190567 2.667588,228.241821 2.778462,228.591797 |
|
C7.127485,242.317780 16.317770,251.131058 29.884926,255.583878 |
|
C30.144913,255.669220 30.298622,256.078369 30.250959,256.668213 |
|
C20.406853,257.000000 10.813705,257.000000 1.000000,257.000000 |
|
C1.000000,247.646927 1.000000,238.292114 1.000000,228.468658 |
|
z"/> |
|
<path fill="#000000" opacity="1.000000" stroke="none" |
|
d=" |
|
M29.531342,1.000000 |
|
C29.633436,1.645129 29.404272,2.699659 28.880219,2.875538 |
|
C15.629609,7.322631 6.913495,16.165672 2.721949,29.500008 |
|
C2.594676,29.904894 2.026278,30.171114 1.331771,30.250992 |
|
C1.000000,20.406855 1.000000,10.813709 1.000000,1.000000 |
|
C10.353074,1.000000 19.707878,1.000000 29.531342,1.000000 |
|
z"/> |
|
</svg>""" |
|
|
|
|
|
class Photopea(object): |
|
def __init__(self) -> None: |
|
self.modal = None |
|
self.triggers = [] |
|
self.render_editor() |
|
|
|
def render_editor(self): |
|
"""Render the editor modal.""" |
|
with gr.Group(elem_classes=["cnet-photopea-edit"]): |
|
self.modal = ModalInterface( |
|
|
|
|
|
|
|
f""" |
|
<div class="photopea-button-group"> |
|
<button class="photopea-button photopea-fetch">Fetch from ControlNet</button> |
|
<button class="photopea-button photopea-send">Send to ControlNet</button> |
|
</div> |
|
<iframe class="photopea-iframe" src="about:blank"></iframe> |
|
""", |
|
open_button_text="Edit", |
|
open_button_classes=["cnet-photopea-main-trigger"], |
|
open_button_extra_attrs="hidden", |
|
).create_modal(visible=True) |
|
|
|
def render_child_trigger(self): |
|
self.triggers.append( |
|
gr.HTML( |
|
f"""<div class="cnet-photopea-child-trigger"> |
|
Edit {PHOTOPEA_LOGO} |
|
</div>""" |
|
) |
|
) |
|
|
|
def attach_photopea_output(self, generated_image: gr.Image): |
|
"""Called in ControlNetUiGroup to attach preprocessor preview image Gradio element |
|
as the photopea output. If the front-end directly change the img HTML element's src |
|
to reflect the edited image result from photopea, the backend won't be notified. |
|
|
|
In this method we let the front-end upload the result image an invisible gr.Image |
|
instance and mirrors the value to preprocessor preview gr.Image. This is because |
|
the generated image gr.Image instance is inferred to be an output image by Gradio |
|
and has no ability to accept image upload directly. |
|
|
|
Arguments: |
|
generated_image: preprocessor result Gradio Image output element. |
|
|
|
Returns: |
|
None |
|
""" |
|
output = gr.Image( |
|
visible=False, |
|
source="upload", |
|
type="numpy", |
|
elem_classes=[f"cnet-photopea-output"], |
|
) |
|
|
|
output.upload( |
|
fn=lambda img: img, |
|
inputs=[output], |
|
outputs=[generated_image], |
|
) |
|
|
