import gradio as gr
import xmltodict
import requests
import json
import uuid
from pypipertts import PyPiper
pp=PyPiper()

style="""
.title_div{
    font-size: x-large;
    font-weight: 700;
    margin-bottom: 10px;
    color: white;
}
.card_div{
    background: #050523;
    color: white;
    margin: 10px;
    padding: 15px;
    border-radius: 5px;
    cursor: pointer;
}
.x_btn{
    font-size: xx-large;
    font-weight: 900;
    background: chocolate;
    width: fit-content;
    padding: 0 10px;
    border-radius: 10px 10px 0 0;
    float: right;
    cursor: pointer;
    
}
.read_btn{
    font-size: xx-large;
    font-weight: 900;
    background: chocolate;
    width: fit-content;
    padding: 0 10px;
    border-radius: 10px 10px 0 0;
    float: left;
    cursor: pointer;
    
}
.frame_class{
    display:none;
}
#big_btn {
    height:5em;
    border-radius:15px;
}
"""

head = """
<script>
function run(inn, url_in) {
    let url = String(url_in)
    console.log(inn);
    console.log(url);
    
    var frame_on = document.getElementById('frame' + String(inn));
    frame_on.style.display = 'block';
    var framediv = document.getElementById('framediv' + String(inn));
    let child0 = framediv.lastElementChild;
    while (child0) {
        framediv.removeChild(child0);
        child0=framediv.lastElementChild;
    }   
    const iframediv = document.createElement('iframe');
      iframediv.src = 'https://docs.google.com/viewer?url=' + url +'&embedded=true';
      iframediv.width = '100%'; 
      iframediv.height = '1000px';
      iframediv.frameborder="0";
      framediv.appendChild(iframediv);
}
</script>
<script>
function closefn(inn) {
    console.log(inn);
    var frame_off = document.getElementById('frame' + String(inn));
    var aud = document.getElementById('aud' + String(inn));
    var framediv = document.getElementById('framediv' + String(inn));
    frame_off.style.display = 'none';
    let child1 = aud.lastElementChild;
    while (child1) {
        aud.removeChild(child1);
        child1=aud.lastElementChild;
    }
    let child2 = framediv.lastElementChild;
    while (child2) {
        framediv.removeChild(child2);
        child2 = framediv.lastElementChild;
    }      
}
</script>
<script>
function readfn(inn, url_in, payload) {
    let url = String(url_in);
    console.log(inn);
    console.log(url);
    var readit = document.getElementById('aud' + String(inn));
    let api = 'https://broadfield-fast-voice.hf.space/?pdfurl=' + url + '&mod=' + payload['model'] + '&len=' + payload['length']+ '&nos=' + payload['noise']+ '&wid=' + payload['width'] + '&pau=' + payload['pause'];
    console.log(api);
    let child = readit.lastElementChild;
    while (child) {
        readit.removeChild(child);
        child=readit.lastElementChild;
    }    
    const iframe = document.createElement('iframe');
    
      iframe.src = api;
      iframe.width = '100%'; 
      iframe.height = '220px';
      readit.appendChild(iframe);
}
</script>
"""
def update_voice(names,length,noise,width,sen_pause):
    payload={
        "model": names,
        "length": length,
        "noise": noise,
        "width": width,
        "pause": sen_pause
    }
    return payload
def search(q,rn,st,names,length,noise,width,sen_pause):
    payload={
    "model": names,
    "length": length,
    "noise": noise,
    "width": width,
    "pause": sen_pause
}
    api=f"http://export.arxiv.org/api/query?search_query={str(q)}&start={str(st)}&max_results={str(rn)}"
    r=requests.get(api)
    cont=xmltodict.parse(r.content)['feed']['entry']
    html=""
    for i,c in enumerate(cont):
        pdflink=c['id'].replace('/abs/','/pdf/').replace('http:','https:')
        print(pdflink)
        html+=f"""<div class='card_div' id='id{i}' onclick="run('{i}','{pdflink}')">
                   <div class='title_div'>{c['title']}</div>
                    <div style='color:white;'>{c['summary']}</div>
                    <div><a href='{pdflink}' target='_blank'>{pdflink}</a></div>
                   </div>
        <div id=frame{i} class='frame_class'>
        <div id=read{i} class='read_btn' onclick="readfn('{i}','{pdflink}',{payload})">Read</div>
        <div id=close{i} class='x_btn' onclick='closefn({i})'>X</div>
        <div id=aud{i}></div>
        <div id=framediv{i}></div>
        </div>"""
    return html
def next_show(cur):
    new=int(cur)+10
    return gr.update(interactive=True),new
def prev_show(cur):
    if int(cur)-10 <=0:
        new=0
        out_gr=gr.update(interactive=False)
    else:
        new=int(cur)-10
        out_gr=gr.update(interactive=True)
    return out_gr,new
def show_num(cur):
    new=int(cur)+10
    html_out=f"<div><center>Showing {cur} through {new}</center></div>"
    return html_out

with gr.Blocks(css=style,head=head) as b:
    gr.HTML("""<center><div><h1 style='font-size:xxx-large;font-weight:900;'>arXiv Reader with Voice</h1>
    <h2>Read arXiv papers using Piper Text-to-Voice</h2></div><br>
    <div style="justify-self:center;">
    <h7 style="float:left;">Piper: <a href='https://github.com/rhasspy/piper' target='_blank'>https://github.com/rhasspy/piper</a></h7><br>
    <h7 style="float:left;">PyPiperTTS: <a href='https://github.com/broadfield-dev/PyPiperTTS' target='_blank'>https://github.com/broadfield-dev/PyPiperTTS</a></h7>
    </div></center>""")
    with gr.Row():
        gr.Column(scale=1)
        with gr.Column(scale=3):
            with gr.Group():
                query=gr.Textbox(label="Query",info="Search arXiv papers")
                with gr.Accordion("Voice Controls",open=False):
                    names=gr.Dropdown(label="Voice", choices=pp.key_list,value="en_US-lessac-high")
                    length=gr.Slider(label="Length", minimum=0.01, maximum=10.0, value=1)
                    noise=gr.Slider(label="Noise", minimum=0.01, maximum=3.0, value=0.5)
                    width=gr.Slider(label="Noise Width", minimum=0.01, maximum=3.0, value=0.5)
                    sen_pause=gr.Slider(label="Sentence Pause", minimum=0.1, maximum=10.0, value=1)
                    upd_btn=gr.Button("Update")
            sub=gr.Button(elem_id='big_btn')

            with gr.Group():
                with gr.Row():
                    prev_btn=gr.Button("Previous",interactive=False)
                    next_btn=gr.Button("Next")
                show_html=gr.HTML()
        gr.Column(scale=1)
    html_out=gr.HTML()
    
    with gr.Column(visible=False):
        num=gr.Number(label="Count",step=1,value=10,interactive=False)
        json_out=gr.JSON()
    
    hid_start=gr.Number(step=1,value=0,visible=False, interactive=False)    
    
    next_btn.click(next_show,[hid_start],[prev_btn,hid_start]).then(show_num,hid_start,show_html).then(search,[query,num,hid_start],[html_out])
    prev_btn.click(prev_show,[hid_start],[prev_btn,hid_start]).then(show_num,hid_start,show_html).then(search,[query,num,hid_start],[html_out])
    upd_btn.click(search,[query,num,hid_start,names,length,noise,width,sen_pause],[html_out]).then(show_num,hid_start,show_html)
    sub.click(search,[query,num,hid_start,names,length,noise,width,sen_pause],[html_out]).then(show_num,hid_start,show_html)
b.queue(default_concurrency_limit=20).launch(max_threads=40)