import gradio as gr

def func(percent, numBlocks):
    filledSquares = "<div style='height:20px;width:20px;background-color:#555;display:inline-block;position:relative' id='filled'><span class='tooltiptext' style='color:#FFF'>Here is a sentence that goes on for a really really really really really really really long time</span></div> "
    emptySquares = "<div style='height:20px;width:20px;background-color:#999;display:inline-block;position:relative' id='empty'><span class='tooltiptext' style='color:#FFF'>Here is a sentence that goes on for a really really really really really really really long time</span></div> "
    numFilled = round((percent/100) * numBlocks)
    print(f"numFilled: {numFilled}")
    numEmpty = numBlocks - numFilled
    print(f"numEmpty: {numEmpty}")
    HTMLstr = filledSquares * numFilled + emptySquares * numEmpty
    return (
        gr.update(value=HTMLstr),
        gr.update(value=HTMLstr)
    )
    

css_adds = ".tooltiptext {visibility: hidden;width:50ch;top: 100%;left: 105%;background-color: #222;text-align: center;border-radius: 6px;padding: 5px 0;position: absolute;z-index: 1;} \
#filled:hover .tooltiptext {visibility: visible;} \
#empty:hover .tooltiptext {visibility: visible;}"

with gr.Blocks(css=css_adds) as demo:
    percent = gr.Slider(1, 100, value=50, step=1, label="percentage")
    numBlocks = gr.Slider(3, 100, value=4, step=1, label="number of blocks")
    button = gr.Button("button")
    with gr.Row():
        with gr.Column():
            html1 = gr.HTML()
        with gr.Column():
            html2 = gr.HTML()
    button.click(func, inputs=[percent, numBlocks], outputs=[html1, html2])
# hi
demo.launch()