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

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

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


def get_screenshot(chat,css_in):
    print(chat)
    html_body=""
    for user,bot in chat:
        print (f'user::{user}')
        print (f'bot::{bot}')
        html_body += html_user.replace("$chat",user)
        html_body += html_bot.replace("$chat",bot)
    html=html_card.replace("$body",html_body)
    #css = css
    #hti.screenshot(html_str=html, save_as='red_page.png')
    #hti.screenshot(html_str=html_card, css_str=css, save_as='red_page.png')
    #hti.size = (1500, 1000)
    hti.screenshot(html_str=html, css_str=css_in, save_as='red_page.png')
    return 'red_page.png',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=5000)
                    im_width=gr.Number(label="Width",value=500)
                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],chat_b)
    im_btn.click(get_screenshot,[chat_b,css_box],[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()