ui.py

"""Gradio UI layout for the playground."""
import gradio as gr

import executor
from templates import TEMPLATES

CSS = """
.gradio-container { max-width:95vw!important; }
@media(max-width:768px){ h1{font-size:1.5rem} }
.cscroll { overflow-anchor:auto; }
.cscroll::after { content:""; display:block; overflow-anchor:auto; height:1px; }
"""

theme = gr.themes.Soft(
    primary_hue="yellow", secondary_hue="amber", neutral_hue="slate",
    font=gr.themes.GoogleFont("Inter"), text_size="lg", spacing_size="md", radius_size="lg",
).set(button_primary_background_fill="*primary_500",
      button_primary_background_fill_hover="*primary_600",
      block_title_text_weight="600")


def build_app():
    gr.Markdown("# 🤗 **HF Playground** — code-driven model playground")

    template_dd = gr.Dropdown(
        label="Template", choices=list(TEMPLATES.keys()),
        value="💬 Chat", container=True,
    )
    custom_code = gr.Code(label="Code", language="python", lines=20,
        value=TEMPLATES["💬 Chat"])
    code_state = gr.State(TEMPLATES["💬 Chat"])
    custom_code.change(fn=lambda c: c, inputs=[custom_code], outputs=[code_state])
    custom_code.blur(fn=lambda c: c, inputs=[custom_code], outputs=[code_state])

    with gr.Row():
        custom_run = gr.Button("▶ Run", variant="primary", visible=True)
        custom_stop = gr.Button("■ Stop", variant="stop", visible=False)

    with gr.Accordion("▶ Console", open=True):
        console_out = gr.HTML()

    out_img = gr.Image(label="Output", type="filepath", visible=False, height=400)
    out_aud = gr.Audio(label="Output", type="filepath", visible=False)
    out_vid = gr.Video(label="Output", visible=False, height=400)
    out_txt = gr.Markdown(label="Output", visible=False)

    chat_col = gr.Column(visible=False)
    with chat_col:
        chat_input_box = gr.Textbox(placeholder="Type a message... (Enter to send, Shift+Enter newline)", show_label=False, lines=3)
        with gr.Row():
            chat_send_btn = gr.Button("Send", variant="primary")

    out_previews = [out_img, out_aud, out_vid, out_txt]

    def _send_chat(msg):
        if msg.strip() and executor._current_input_queue is not None:
            executor._current_input_queue.put(msg.strip())
        return gr.update(value="")

    def _on_template_change(name):
        code = TEMPLATES.get(name, TEMPLATES["Custom"])
        return ([gr.update(value="")]
                + [gr.update(value=None, visible=False) for _ in range(4)]
                + [gr.update(visible=True),   # custom_run
                   gr.update(visible=False),  # custom_stop
                   gr.update(value=code),     # custom_code
                   code,                      # code_state
                   gr.update(visible=False)]) # chat_col

    chat_send_btn.click(fn=_send_chat, inputs=[chat_input_box], outputs=[chat_input_box])
    chat_input_box.submit(fn=_send_chat, inputs=[chat_input_box], outputs=[chat_input_box])

    template_dd.change(
        fn=_on_template_change,
        inputs=[template_dd],
        outputs=[console_out] + out_previews + [custom_run, custom_stop, custom_code, code_state, chat_col],
    )
    custom_run.click(
        fn=executor.run_custom_code, inputs=[code_state],
        outputs=[console_out] + out_previews + [chat_col, custom_run, custom_stop],
    )
    custom_stop.click(
        fn=executor.cancel_run,
        outputs=[custom_run, custom_stop],
    )

    gr.Markdown("""
    ---
    <div style="text-align:center;opacity:0.7;font-size:0.85em;padding:0.5rem 0;">
    🤗 Pick a template, edit model IDs, and run.
    </div>
    """)