app.py

import gradio as gr
from huggingface_hub import InferenceClient

# Initialize the Hugging Face Inference Client
client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")

# Function to handle chatbot responses
def respond(message, history: list[tuple[str, str]], system_message):
    # Set default values for max_tokens, temperature, and top_p
    max_tokens = 512
    temperature = 0.7
    top_p = 0.95

    # Prepare messages for the chat model
    messages = [{"role": "system", "content": system_message}]

    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})

    response = ""

    for message in client.chat_completion(
        messages,
        max_tokens=max_tokens,
        stream=True,
        temperature=temperature,
        top_p=top_p,
    ):
        token = message.choices[0].delta.content

        response += token
        yield response


# Gradio Interface
with gr.Blocks(theme="soft") as demo:
    gr.HTML(
        """
        <div style="background: rgba(0, 0, 0, 0); 
                    padding: 20px; border-radius: 10px; text-align: center; 
                    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); animation: fadeIn 2s;">
            <h1 style="color: white; font-size: 36px;">FlashMind AI</h1>
            <p style="font-size: 18px; color: white;">
                Your intelligent assistant, powered by Hugging Face's Zephyr-7B model.
                Designed by <strong>Shamil Shahbaz</strong>.
            </p>
        </div>
        """
    )

    with gr.Row():
        with gr.Column(scale=6):  # Increased scale value to make the chat interface bigger
            chat = gr.ChatInterface(
                respond,
                additional_inputs=[
                    gr.Textbox(
                        value="You are a friendly Chatbot.",
                        label="System message",
                        lines=2,
                        max_lines=3,
                        visible=False,  # Hide the system message from the display
                        interactive=False,  # Ensure the user cannot interact with it
                    ),
                ],
            )

    # Styling the background, chat transparency, and text color
    demo.css = """
    @keyframes fadeIn {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }

    body {
        background: url('https://wallpapers.com/images/featured/unique-laptop-bnw8292wzppmnfmr.jpg') no-repeat center center fixed;
        background-size: cover;
        font-family: Arial, sans-serif;
    }

    .gr-textbox {
        border: 1px solid #e1e4e8;
        border-radius: 5px;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }

    .gr-textbox:hover {
        transform: scale(1.02);
        border-color: #6fc3df;
    }

    .gr-slider {
        display: none;  /* Hides sliders from the interface */
    }

    .gr-button {
        background-color: #4a90e2;
        color: white;
        border-radius: 5px;
    }

    /* Make the chat messages transparent and set text to white */
    .gr-chatbox {
        background: rgba(0, 0, 0, 0.4);  /* Transparent black background */
        color: white !important;          /* Set text color to white */
    }

    .gr-chatbox .gr-message {
        color: white !important;  /* Ensures messages are white */
    }
    
    .gr-chatbox .gr-message-user {
        color: white !important;  /* User messages are white */
    }

    .gr-chatbox .gr-message-assistant {
        color: white !important;  /* Assistant messages are white */
    }
    """
    
if __name__ == "__main__":
    demo.launch()