app.py

from huggingface_hub import InferenceClient
import gradio as gr
import random
from html2image import Html2Image
hti = Html2Image()
client = InferenceClient("mistralai/Mixtral-8x7B-Instruct-v0.1")

css="""
.user_chat{
    background: #367bb9;
    border-radius: 10px 10px 0px 10px;
    padding: 10px;
    max-width: 100%;
    text-wrap: pretty;
    margin-left:10px;
    margin-bottom: 10px;

}
.bot_chat{
    background: #1c3c9b;
    border-radius: 10px 10px 10px 0px;
    padding: 10px;
    max-width: 100%;
    text-wrap: pretty;
    margin-right:10px;
    margin-bottom: 10px;
    
}
.chat_card{
    background: #253251;
    color:#ffffff;
    border-radius: 15px;
    border-width: thin;
    padding: 15px;
    font-family: system-ui;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    max-width:100%;
}
"""

html_user="""
<div class="user_chat">
$chat
</div>
"""
html_bot="""
<div class="bot_chat">
$chat
</div>
"""
html_card="""
<pre class="chat_card">
$body
</pre>
"""

def make_filename(inp):
    if len(inp)<=30:
        first_name=inp
    else:
        first_name=inp[:30]
    first_name=first_name.replace(" ","_")
    print(first_name)
    last_name=random.randint(1,99999999999999)
    filename=first_name+str(last_name)
    return filename
    
def get_screenshot(chat,css_in,w,h,user_c,bot_c,background_c,font_c):
    if user_c:
        html_user=html_user.replace("background: #367bb9;",f"background: {user_c};")
    html_body=""
    for user,bot in chat:
        html_body += html_user.replace("$chat",user)
        html_body += html_bot.replace("$chat",bot)
    html=html_card.replace("$body",html_body)
    hti.size = (w, h)
    filename=f'{make_filename(chat[0][0])}.png'
    print(filename)
    hti.screenshot(html_str=html, css_str=css_in, save_as=filename)
    return filename,html


def format_prompt(message, history):
    prompt = "<s>"
    if history:
        for user_prompt, bot_response in history:
            prompt += f"[INST] {user_prompt} [/INST]"
            prompt += f" {bot_response}</s> "
    prompt += f"[INST] {message} [/INST]"
    return prompt


def chat_inf(system_prompt,prompt,history):
    if not history:
        history = []
        hist_len=0
    if history:
        hist_len=len(history)
        print(hist_len)
    seed = random.randint(1,1111111111111111)
    generate_kwargs = dict(
        temperature=0.9,
        max_new_tokens=10480,
        top_p=0.95,
        repetition_penalty=1.0,
        do_sample=True,
        seed=seed,
    )
        
    formatted_prompt = format_prompt(f"{system_prompt}, {prompt}", history)
    stream = client.text_generation(formatted_prompt, **generate_kwargs, stream=True, details=True, return_full_text=False)
    output = ""
        
    for response in stream:
        output += response.token.text
        yield [(prompt,output)]
    history.append((prompt,output))
    yield history
        
chat=[('user','bot'),('user','bot')]

#get_screenshot(chat=[('user','bot'),('user','bot')])
with gr.Blocks(css=css) as app:
    with gr.Row():
        with gr.Column(scale=3):
            with gr.Group():
                chat_b = gr.Chatbot()
                with gr.Row():
                    with gr.Column(scale=3):
                        inp = gr.Textbox(label="Prompt")
                        sys_inp = gr.Textbox(label="System Prompt (optional)")
                        btn = gr.Button("Chat")
                        
                    with gr.Column(scale=1):
                        with gr.Group():
                            stop_btn=gr.Button("Stop")
                            clear_btn=gr.Button("Clear")
        with gr.Column(scale=1):
            with gr.Group():
                with gr.Row():
                    im_height=gr.Number(label="Height",value=1000)
                    im_width=gr.Number(label="Width",value=500)
                with gr.Row():
                    user_c=gr.Color_Picker(value="#367bb9")
                    bot_c=gr.Color_Picker(value="#1c3c9b")
                with gr.Row():
                    background_c=gr.Color_Picker(value="#253251")
                    font_c=gr.Color_Picker(value="#ffffff")                    
                wait_time=gr.Number(label="Wait Time",value=3000)
                theme=gr.Radio(label="Theme", choices=["light","dark"],value="light")
                chatblock=gr.Dropdown(label="Chatblocks",choices=[c for c in range(1,40)],multiselect=True)
                
                im_btn=gr.Button("Screenshot")
                img=gr.Image(type='filepath')
    css_box=gr.Textbox(lines=50,value=css)
    html_view=gr.HTML()
    btn.click(chat_inf,[sys_inp,inp,chat_b,user_c,bot_c,background_c,font_c],chat_b)
    im_btn.click(get_screenshot,[chat_b,css_box,im_width,im_height],[img,html_view])
    #im_btn.click(get_screenshot,[chat_b,im_height,im_width,chatblock,theme,wait_time],img)
    #app.load(get_screenshot,inp,img)
app.launch()