app.py

import gradio as gr
import base64
import mimetypes


bg_path = "./assets/background_image/living_room.png"
with open(bg_path, "rb") as f:
    bg_bytes = f.read()
bg_base64 = base64.b64encode(bg_bytes).decode("utf-8")

mime_type, _ = mimetypes.guess_type(bg_path)
if mime_type is None:
    mime_type = "image/png"

BACKGROUND_CSS = f"""
.gradio-container {{
    background-image: url("data:{mime_type};base64,{bg_base64}");
    background-size: cover !important;
    background-position: center !important;
    max-width: 100% !important;
    height: auto !important;  
}}
"""

GLASS_CSS = """
.glass {
    background: rgba(255, 255, 255, 0.85) !important;
    border-radius: 16px !important;
    padding: 8px !important;
}
"""

USER_INPUT_CSS = """
#user-input textarea,
#user-input input {
    border-radius: 999px !important;
    border: 2px solid rgba(0, 0, 0, 0.15) !important;
    padding: 0.6rem 1rem !important;
    font-size: 0.95rem !important;
    color: #222 !important;
    outline: none !important;
}

#user-input textarea:focus,
#user-input input:focus {
    border-color: #4a7cf7 !important;
    box-shadow: 0 0 0 2px rgba(74, 124, 247, 0.25) !important;
}
"""

CSS = BACKGROUND_CSS + \
      "\n" + GLASS_CSS + \
      "\n" + USER_INPUT_CSS


def respond(message, history, name, job, age, city):
    history = history or []

    info = (
        f"Name: {name or '-'}\n"
        f"Beruf: {job or '-'}\n"
        f"Alter: {age or '-'}\n"
        f"Stadt: {city or '-'}"
    )

    bot_reply = f"Du hast geschrieben: '{message}'.\n\nDeine Angaben:\n{info}"
    history.append((message, bot_reply))
    return history, "", "", "", "", ""


with gr.Blocks(title="Form + Chat") as demo:
    with gr.Row():
        name = gr.Textbox(label="Name", elem_classes=["name-textbox"])
        job = gr.Textbox(label="Beruf")

    with gr.Row():
        with gr.Column():
            age = gr.Textbox(label="Alter")
            city = gr.Textbox(label="Stadt")

        with gr.Column():
            chatbot = gr.Chatbot(
                label="Chat",
                avatar_images=(
                    "./assets/chat_icons/person_icon.png",
                    "./assets/chat_icons/robot_icon.png"
                ),
                elem_classes=["glass"]
            )
            with gr.Row():
                chat_input = gr.Textbox(
                    label="Nachricht",
                    elem_id="user-input"
                )
                submit = gr.Button(
                    "Submit",
                    elem_classes=["glass"])

    submit.click(
        fn=respond,
        inputs=[chat_input, chatbot, name, job, age, city],
        outputs=[chatbot, chat_input, name, job, age, city],
    )

demo.launch(css=CSS)