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: $user_c;
    border-radius: 10px 10px 0px 10px;
    padding: 10px;
    max-width: 100%;
    text-wrap: pretty;
    margin-left:10px;
    margin-bottom: 10px;

}
.bot_chat{
    background: $bot_c;
    border-radius: 10px 10px 10px 0px;
    padding: 10px;
    max-width: 100%;
    text-wrap: pretty;
    margin-right:10px;
    margin-bottom: 10px;
    
}
.chat_card{
    background: $background_c;
    color: $font_c;
    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,block=[],css_in=css,w=500,h=800,user_c="#367bb9",bot_c="#1c3c9b",background_c="#253251",font_c="#ffffff"):
    chat_len=len(chat)
    print(chat_len)
    block_box=[]
    if user_c:
        user_c=user_c.strip('""').strip("''")
        css_in=css_in.replace("$user_c",user_c).replace("$bot_c",bot_c).replace("$background_c",background_c).replace("$font_c",font_c)
    html_body=""
    if block:
        for i in range(chat_len):
            if i+1 in block:
                block_box.append(chat[i])
        chat=block_box
    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


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(label="Chatbot Mixtral-8x7b-instruct-v0.1")
                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")
            css_box=gr.Textbox(label="CSS",lines=50,value=css)
            
        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.ColorPicker(label="User Color",value="#367bb9")
                    bot_c=gr.ColorPicker(label="Bot Color",value="#1c3c9b")
                with gr.Row():
                    background_c=gr.ColorPicker(label="Background Color",value="#253251")
                    font_c=gr.ColorPicker(label="Font Color",value="#ffffff")                    
                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')
    #html_view=gr.HTML()
    btn.click(chat_inf,[sys_inp,inp,chat_b],chat_b)
    im_btn.click(get_screenshot,[chat_b,chatblock,css_box,im_width,im_height,user_c,bot_c,background_c,font_c],[img])
    #im_btn.click(get_screenshot,[chat_b,im_height,im_width,chatblock,theme,wait_time],img)
    #app.load(get_screenshot,inp,img)
app.queue(default_concurrency_limit=10).launch()