app.py

import time
import gradio as gr
from huggingface_hub import InferenceClient

client = InferenceClient(
    model = "HuggingFaceH4/zephyr-7b-beta",
    # model = "mistralai/Mistral-7B-Instruct-v0.3",
)


def respond(message, history: list[tuple[str, str]]):

    output = ""

    messages = []
    for val in history:
        if val[0]:
            messages.append({"role": "user", "content": val[0]})
        if val[1]:
            messages.append({"role": "assistant", "content": val[1]})
    messages.append({"role": "user", "content": message})

    for word in client.chat_completion(
        messages=messages,
        max_tokens=512,
        stream=True,
    ):
        output += word.choices[0].delta.content

    for i in range(len(output)):
        time.sleep(0.002)
        yield output[: i+1]


gr.ChatInterface(
    fn = respond,
    theme = gr.themes.Base(
        primary_hue = "stone",
    ),
    textbox = gr.Textbox(
        elem_id="custom-gr-textbox",
        placeholder = "Type your message here...",
        container = False,
        scale = 10,
    ),
    chatbot = gr.Chatbot(
        elem_id="custom-gr-chatbot",
        height = '92%',
        bubble_full_width = False,
        show_copy_button = True,
        likeable = True,
        show_label = False,
        show_share_button = False,
        container = False,
        render_markdown = True,
        line_breaks = True,
        avatar_images = (
            'assets/user.png',
            'assets/bot.png',
        ),
        layout = 'bubble',
        # value = [
        #     [
        #         None, 
        #         "Hello",
        #     ],
        # ],
    ),
    css = '\
        footer, [data-testid="block-label"] { \
            display: none !important; visibility: hidden !important; opacity: 0.0 !important; \
        } \
        .gradio-container { \
            max-width: initial !important; padding: 16px !important; \
        } \
        .contain { \
            height: 1vh !important; \
        } \
        .contain > div { \
            height: 100% !important; \
        } \
        #custom-gr-chatbot + .stretch { \
            display: none !important; \
        } \
        #custom-gr-textbox { \
            background: hsl(0 0% 98%) !important; \
        } \
        #custom-gr-textbox textarea { \
            font-size: 16px !important; \
            margin: 8px 0px 14px 10px !important; \
            background: hsl(0 0% 98%) !important; \
        } \
        #custom-gr-textbox + button.lg.primary, #custom-gr-textbox + button.lg.stop { \
            min-width: min(100px, 100%) !important; \
        } \
        .avatar-container { \
            height: 24px !important; \
            width: 24px !important; \
        } \
        .message { \
            padding: 10px 16px !important; \
        } \
        .message-buttons-bot, .message-buttons-user { \
            bottom: -18px !important; \
            transform: scale(0.8) !important; \
        } \
        .user-row .avatar-container { \
            display: none !important; visibility: hidden !important; opacity: 0.0 !important; \
        } \
    ',
    retry_btn = None,
    undo_btn = None,
    clear_btn = None,
    submit_btn = "Send",
    stop_btn = "Stop",
    autofocus = True,
    fill_height = True,
).launch(debug = False, share = False)