from huggingface_hub import InferenceClient
import gradio as gr

client = InferenceClient("mistralai/Mixtral-8x7B-Instruct-v0.1")

def format_prompt(message, history):
  prompt = "<s>"
  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 generate(
    prompt, history, temperature=0.2, max_new_tokens=256, top_p=0.95, repetition_penalty=1.0,
):
    temperature = float(temperature)
    if temperature < 1e-2:
        temperature = 1e-2
    top_p = float(top_p)

    generate_kwargs = dict(
        temperature=temperature,
        max_new_tokens=max_new_tokens,
        top_p=top_p,
        repetition_penalty=repetition_penalty,
        do_sample=True,
        seed=42,
    )

    formatted_prompt = format_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 output
    return output

    
mychatbot = gr.Chatbot(
    avatar_images=["./user.png", "./botm.png"], bubble_full_width=False, show_label=False, show_copy_button=True, likeable=True,)

demo = gr.ChatInterface(fn=generate, 
                        chatbot=mychatbot,
                        title="SF's AI Chat",
                        retry_btn=None,
                        undo_btn=None,
                        css="body { background-color: inherit; }"
                        "#component2 {display: none;}"
                        ".gradio-container.gradio-container-4-8-0.svelte-1kyws56.app {max-width: 100% !important;}"
                        "gradio-app {background: linear-gradient(134deg,#00425e 0%,#001a3f 43%,#421438 77%) !important; background-attachment: fixed !important; background-position: top;}"
                        ".panel.svelte-vt1mxs {background: transparent;}"
                        ".block.svelte-90oupt {    background: transparent;    border-color: transparent;}"
                        ".bot.svelte-12dsd9j.svelte-12dsd9j.svelte-12dsd9j {    background: #ffffff1a;    border-color: transparent;    color: white;}"
                        ".user.svelte-12dsd9j.svelte-12dsd9j.svelte-12dsd9j {    background: #ffffff1a;    border-color: transparent;    color: white;    padding: 5px 13px;}"
                        "div.svelte-iyf88w{    background: #cc98d445;    border-color: transparent; border-radius: 25px;}"
                        "textarea.scroll-hide.svelte-1f354aw {    background: transparent;}"
                        ".primary.svelte-cmf5ev {   background: transparent;    color: white;}"
                        ".primary.svelte-cmf5ev:hover {   background: transparent;    color: white;}"
                        "button#component-8 {    display: flex;    position: absolute;    margin-top: 60px;    border-radius: 25px;}"
                        "button#component-10 {    flex: none;    margin-left: auto;    border-radius: 25px;}"
                        ".share-button.svelte-12dsd9j {    display: none;}"
                        "footer.svelte-mpyp5e {    display: none !important;}"
                        
                       )

demo.queue().launch(show_api=False)