import gradio as gr
import os
import requests
import random
import time
r = requests.get(f'https://huggingface.co/spaces/xp3857/text-to-image/raw/main/css.css') 
css = r.text
name2 = "runwayml/stable-diffusion-v1-5"

model = gr.Interface.load(f"models/{name2}")
models=[
    gr.Interface.load(f"models/{name2}"),
    gr.Interface.load(f"models/{name2}"),
    gr.Interface.load(f"models/{name2}"),
    gr.Interface.load(f"models/{name2}"),
    gr.Interface.load(f"models/{name2}"),
    gr.Interface.load(f"models/{name2}"),
    gr.Interface.load(f"models/{name2}"),
    gr.Interface.load(f"models/{name2}"),
    gr.Interface.load(f"models/{name2}"),
    gr.Interface.load(f"models/{name2}"),
    gr.Interface.load(f"models/{name2}"),
    gr.Interface.load(f"models/{name2}"),
    gr.Interface.load(f"models/{name2}"),
    gr.Interface.load(f"models/{name2}"),
    gr.Interface.load(f"models/{name2}"),
    gr.Interface.load(f"models/{name2}"),
    gr.Interface.load(f"models/{name2}"),
    gr.Interface.load(f"models/{name2}"),
    gr.Interface.load(f"models/{name2}"),
    gr.Interface.load(f"models/{name2}"),
]
#o = os.getenv("P")
o = "V"

t_out = ("""

   <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <!--Stylesheets-->
    <style media="screen">
      *,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

#container{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    z-index:19999;
    background: #ff000059;

}






.popup{
    background-color: #ffffff;
    width: 420px;
    padding: 30px 40px;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    border-radius: 8px;
    font-family: "Poppins",sans-serif;
    text-align: center;
    position: fixed;
    width: 200px;
    height: 200px;
    top: 0px;
    left: 0px;
    z-index:199999;
}
.popup button{
    display: block;
    margin:  0 0 20px auto;
    background-color: transparent;
    font-size: 30px;
    color: #ffffff;
    background: #03549a;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    border: none;
    outline: none;
    cursor: pointer;
}
.popup h2{
  margin-top: -20px;
}
.popup p{
    font-size: 14px;
    text-align: justify;
    margin: 20px 0;
    line-height: 25px;
}

    </style>

<div id="container">
    <div class="popup">
        <button id="close">&times;</button>
        <h2>Max Loading Time Reached</h2>
        <p><center>
            Click to Continue, or use a simplier Prompt
        </center>
        </p>
        <a href="#">Let's Go</a>
    </div>
</div>
    <!--Script-->
    <script type="text/javascript">
window.addEventListener("load", function(){
    setTimeout(
        function open(event){
            document.querySelector(".popup").style.display = "block";
        },
        2000 
    )
});


document.querySelector("#close").addEventListener("click", function(){
    document.querySelector(".popup").style.display = "none";
});
    </script>

""")
m_out = ("""

<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

<style>
#restart_btn{
position: fixed;
top: 50%;
left: 50%;
z-index:19999;
font-family: "Poppins",sans-serif;
text-align: center;
border-radius: 8px;
background: #0037ff9e;
border-style: solid;
border-width: 3px;
border-color: #9f00ff;
width: 100%;
height: 200px;
padding: 0px 20px;
transform: translate(-50%,-100%);
}

#restart{
position: relative;
top: 50%;
left: 50%;
font-family: "Poppins",sans-serif;
text-align: center;
border-radius: 8px;
background: #0037ff9e;
border-style: solid;
border-width: 3px;
border-color: #9f00ff;
width: 100%;
height: 200px;
padding: 0px 20px;
transform: translate(-50%,-100%);
}




#head{
color:white;
margin-top:35px;
margin-bottom:5px;
}
#cont{
color:white;
margin-top:5px;
margin-bottom:5px;
font-size:1.1rem;
}
</style>
<div id="restart">
<h3 id="head">Loading Time Limit Reached.</h3><br>
<h4 id="cont">Please Click Launch again to Continue, or choose a Simpler Prompt</h4>
</div>

""")

def ac():
    def clear():
        return gr.update(value=0),gr.update(value=0)
    def start():
        print ("start")
        stamp = time.time()
        return gr.update(value=stamp),gr.update(value=0)
    def end(stamp):
        ts = stamp + 10
        ti = time.time()
        if ti > ts and stamp != 0:
            print("Cancelling")
            return gr.update(value=1),gr.HTML.update(f"{m_out}", visible=True)
            #return gr.update(value=1)
            
        else:
            print("Passing")
            return gr.update(value=0),None
    
    def im_fn(put,fac="",h=None):
        if h == o:
            put = f"{put}{fac}"
            fac = f"{fac} "
            rn = random.randint(0, 19)
            model=models[rn]
            return model(put),fac
        elif h != o:
            return(None,None)
    def cl_fac():
        return "",gr.HTML.update("", visible=False)
    with gr.Blocks(css=css) as b:
        message=gr.HTML("", visible=False)
        
        with gr.Row():
            put = gr.Textbox()            
            btn1 = gr.Button()
        with gr.Row():
            out1 = gr.Image()
            out2 = gr.Image()
        with gr.Row():
            out3 = gr.Image()
            out4 = gr.Image()

        with gr.Row(visible=False):
            h=gr.Textbox(value="V")
            t_state=gr.Number()
            t_switch=gr.Textbox(value=0)
        
        fac_b = gr.Textbox(value="",visible=False)
        btn1.click(cl_fac,None,[fac_b,message])

        b1=btn1.click(start,None,[t_state,t_switch])
        sta = t_state.change(end,t_state,[t_switch,message],every=1,show_progress=False)

        b2=btn1.click(im_fn,[put,fac_b,h],[out1,fac_b])
        b3=out1.change(im_fn,[put,fac_b,h],[out2,fac_b])        
        b4=out2.change(im_fn,[put,fac_b,h],[out3,fac_b])        
        b5=out3.change(im_fn,[put,fac_b,h],[out4,fac_b])  

        t_switch.change(clear,None,[t_switch,fac_b], cancels=[sta,b2,b3,b4,b5])
        
    b.queue(concurrency_count=100).launch(show_api=False)
ac()