| | import gradio as gr |
| |
|
| | from scripts.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], |
| | ) |
| |
|
