Add stop button and new styles

app.py

@@ -4,21 +4,39 @@ from openai import OpenAI
 import gradio as gr
 
 from theme import apriel
-from utils import COMMUNITY_POSTFIX_URL, get_model_config, log_message, check_format, models_config
+from utils import COMMUNITY_POSTFIX_URL, get_model_config, log_message, check_format, models_config, DEBUG_MODE
 
 MODEL_TEMPERATURE = 0.8
 BUTTON_WIDTH = 160
 
-DEFAULT_MODEL_NAME = "Apriel-Nemotron-15b-Thinker"
+DEFAULT_MODEL_NAME = "Apriel-Nemotron-15b-Thinker" if not DEBUG_MODE else "Apriel-5b"
 # DEFAULT_MODEL_NAME = "Apriel-5b"
 
 print(f"Gradio version: {gr.__version__}")
 
+BUTTON_ENABLED = gr.update(interactive=True)
+BUTTON_DISABLED = gr.update(interactive=False)
+INPUT_ENABLED = gr.update(interactive=True)
+INPUT_DISABLED = gr.update(interactive=False)
+DROPDOWN_ENABLED = gr.update(interactive=True)
+DROPDOWN_DISABLED = gr.update(interactive=False)
+
+SEND_BUTTON_ENABLED = gr.update(interactive=True, visible=True)
+SEND_BUTTON_DISABLED = gr.update(interactive=True, visible=False)
+STOP_BUTTON_ENABLED = gr.update(interactive=True, visible=True)
+STOP_BUTTON_DISABLED = gr.update(interactive=True, visible=False)
+
 chat_start_count = 0
 model_config = {}
 openai_client = None
 
 
+def update_model_and_clear_chat(model_name):
+    actual_model_name = model_name.replace("Model: ", "")
+    desc = setup_model(actual_model_name)
+    return desc, []
+
+
 def setup_model(model_name, intial=False):
     global model_config, openai_client
     model_config = get_model_config(model_name)
@@ -40,194 +58,170 @@ def setup_model(model_name, intial=False):
         return _description
 
 
-def chat_fn(message, history):
-    log_message(f"{'-' * 80}")
-    log_message(f"chat_fn() --> Message: {message}")
-    log_message(f"chat_fn() --> History: {history}")
+def chat_started():
+    # outputs: model_dropdown, user_input, send_btn, stop_btn, clear_btn
+    return (DROPDOWN_DISABLED, gr.update(value="", interactive=False),
+            SEND_BUTTON_DISABLED, STOP_BUTTON_ENABLED, BUTTON_DISABLED)
 
-    # Check if the message is empty
-    if not message.strip():
-        gr.Warning("Please enter a message before sending.")
-        yield history
-        return
 
-    global chat_start_count
-    chat_start_count = chat_start_count + 1
-    print(
-        f"{datetime.datetime.now()}: chat_start_count: {chat_start_count}, turns: {int(len(history if history else []) / 3)}")
+def chat_finished():
+    # outputs: model_dropdown, user_input, send_btn, stop_btn, clear_btn
+    return DROPDOWN_ENABLED, INPUT_ENABLED, SEND_BUTTON_ENABLED, STOP_BUTTON_DISABLED, BUTTON_ENABLED
 
-    is_reasoning = model_config.get("REASONING")
 
-    # Remove any assistant messages with metadata from history for multiple turns
-    log_message(f"Initial History: {history}")
-    check_format(history, "messages")
-    history.append({"role": "user", "content": message})
-    log_message(f"History with user message: {history}")
-    check_format(history, "messages")
+def stop_chat(state):
+    state["stop_flag"] = True
+    gr.Info("Chat stopped")
+    return state
+
+
+def run_chat_inference(history, message, state):
+    global chat_start_count
+    state["is_streaming"] = True
+    state["stop_flag"] = False
+
+    # outputs: model_dropdown, user_input, send_btn, stop_btn, clear_btn, session_state
+    log_message(f"{'-' * 80}")
+    log_message(f"chat_fn() --> Message: {message}")
+    log_message(f"chat_fn() --> History: {history}")
 
-    # Create the streaming response
     try:
-        history_no_thoughts = [item for item in history if
-                               not (isinstance(item, dict) and
-                                    item.get("role") == "assistant" and
-                                    isinstance(item.get("metadata"), dict) and
-                                    item.get("metadata", {}).get("title") is not None)]
-        log_message(f"Updated History: {history_no_thoughts}")
-        check_format(history_no_thoughts, "messages")
-        log_message(f"history_no_thoughts with user message: {history_no_thoughts}")
-
-        stream = openai_client.chat.completions.create(
-            model=model_config.get('MODEL_NAME'),
-            messages=history_no_thoughts,
-            temperature=MODEL_TEMPERATURE,
-            stream=True
-        )
-    except Exception as e:
-        print(f"Error: {e}")
-        yield [{"role": "assistant", "content": "😔 The model is unavailable at the moment. Please try again later."}]
-        return
+        # Check if the message is empty
+        if not message.strip():
+            gr.Info("Please enter a message before sending")
+            yield history, INPUT_ENABLED, SEND_BUTTON_ENABLED, STOP_BUTTON_DISABLED, BUTTON_ENABLED, state
+            return history, INPUT_ENABLED, SEND_BUTTON_ENABLED, STOP_BUTTON_DISABLED, BUTTON_ENABLED, state
+
+        chat_start_count = chat_start_count + 1
+        print(
+            f"{datetime.datetime.now()}: chat_start_count: {chat_start_count}, turns: {int(len(history if history else []) / 3)}")
+
+        is_reasoning = model_config.get("REASONING")
 
-    if is_reasoning:
-        history.append(gr.ChatMessage(
-            role="assistant",
-            content="Thinking...",
-            metadata={"title": "🧠 Thought"}
-        ))
-        log_message(f"History added thinking: {history}")
+        # Remove any assistant messages with metadata from history for multiple turns
+        log_message(f"Initial History: {history}")
         check_format(history, "messages")
-    else:
-        history.append(gr.ChatMessage(
-            role="assistant",
-            content="",
-        ))
-        log_message(f"History added empty assistant: {history}")
+        history.append({"role": "user", "content": message})
+        log_message(f"History with user message: {history}")
         check_format(history, "messages")
 
-    output = ""
-    completion_started = False
-    for chunk in stream:
-        # Extract the new content from the delta field
-        content = getattr(chunk.choices[0].delta, "content", "")
-        output += content
+        # Create the streaming response
+        try:
+            history_no_thoughts = [item for item in history if
+                                   not (isinstance(item, dict) and
+                                        item.get("role") == "assistant" and
+                                        isinstance(item.get("metadata"), dict) and
+                                        item.get("metadata", {}).get("title") is not None)]
+            log_message(f"Updated History: {history_no_thoughts}")
+            check_format(history_no_thoughts, "messages")
+            log_message(f"history_no_thoughts with user message: {history_no_thoughts}")
+
+            stream = openai_client.chat.completions.create(
+                model=model_config.get('MODEL_NAME'),
+                messages=history_no_thoughts,
+                temperature=MODEL_TEMPERATURE,
+                stream=True
+            )
+        except Exception as e:
+            print(f"Error: {e}")
+            yield ([{"role": "assistant",
+                     "content": "😔 The model is unavailable at the moment. Please try again later."}],
+                   INPUT_ENABLED, SEND_BUTTON_ENABLED, STOP_BUTTON_DISABLED, BUTTON_ENABLED, state)
+            return history, INPUT_ENABLED, SEND_BUTTON_ENABLED, STOP_BUTTON_DISABLED, BUTTON_ENABLED, state
 
         if is_reasoning:
-            parts = output.split("[BEGIN FINAL RESPONSE]")
-
-            if len(parts) > 1:
-                if parts[1].endswith("[END FINAL RESPONSE]"):
-                    parts[1] = parts[1].replace("[END FINAL RESPONSE]", "")
-                if parts[1].endswith("[END FINAL RESPONSE]\n<|end|>"):
-                    parts[1] = parts[1].replace("[END FINAL RESPONSE]\n<|end|>", "")
-                if parts[1].endswith("<|end|>"):
-                    parts[1] = parts[1].replace("<|end|>", "")
-
-            history[-1 if not completion_started else -2] = gr.ChatMessage(
+            history.append(gr.ChatMessage(
                 role="assistant",
-                content=parts[0],
+                content="Thinking...",
                 metadata={"title": "🧠 Thought"}
-            )
-            if completion_started:
-                history[-1] = gr.ChatMessage(
+            ))
+            log_message(f"History added thinking: {history}")
+            check_format(history, "messages")
+        else:
+            history.append(gr.ChatMessage(
+                role="assistant",
+                content="",
+            ))
+            log_message(f"History added empty assistant: {history}")
+            check_format(history, "messages")
+
+        output = ""
+        completion_started = False
+        for chunk in stream:
+            if state["stop_flag"]:
+                log_message(f"chat_fn() --> Stopping streaming...")
+                break  # Exit the loop if the stop flag is set
+            # Extract the new content from the delta field
+            content = getattr(chunk.choices[0].delta, "content", "")
+            output += content
+
+            if is_reasoning:
+                parts = output.split("[BEGIN FINAL RESPONSE]")
+
+                if len(parts) > 1:
+                    if parts[1].endswith("[END FINAL RESPONSE]"):
+                        parts[1] = parts[1].replace("[END FINAL RESPONSE]", "")
+                    if parts[1].endswith("[END FINAL RESPONSE]\n<|end|>"):
+                        parts[1] = parts[1].replace("[END FINAL RESPONSE]\n<|end|>", "")
+                    if parts[1].endswith("<|end|>"):
+                        parts[1] = parts[1].replace("<|end|>", "")
+
+                history[-1 if not completion_started else -2] = gr.ChatMessage(
                     role="assistant",
-                    content=parts[1]
+                    content=parts[0],
+                    metadata={"title": "🧠 Thought"}
                 )
-            elif len(parts) > 1 and not completion_started:
-                completion_started = True
-                history.append(gr.ChatMessage(
+                if completion_started:
+                    history[-1] = gr.ChatMessage(
+                        role="assistant",
+                        content=parts[1]
+                    )
+                elif len(parts) > 1 and not completion_started:
+                    completion_started = True
+                    history.append(gr.ChatMessage(
+                        role="assistant",
+                        content=parts[1]
+                    ))
+            else:
+                if output.endswith("<|end|>"):
+                    output = output.replace("<|end|>", "")
+                history[-1] = gr.ChatMessage(
                     role="assistant",
-                    content=parts[1]
-                ))
-        else:
-            if output.endswith("<|end|>"):
-                output = output.replace("<|end|>", "")
-            history[-1] = gr.ChatMessage(
-                role="assistant",
-                content=output
-            )
+                    content=output
+                )
 
-        # log_message(f"Yielding messages: {history}")
-        yield history
+            # log_message(f"Yielding messages: {history}")
+            yield history, INPUT_DISABLED, SEND_BUTTON_DISABLED, STOP_BUTTON_ENABLED, BUTTON_DISABLED, state
 
-    log_message(f"Final History: {history}")
-    check_format(history, "messages")
+        log_message(f"Final History: {history}")
+        check_format(history, "messages")
+        yield history, INPUT_ENABLED, SEND_BUTTON_ENABLED, STOP_BUTTON_DISABLED, BUTTON_ENABLED, state
+    finally:
+        state["is_streaming"] = False
+        state["stop_flag"] = False
+        log_message(f"chat_fn() --> Finished streaming. {chat_start_count} chats started.")
+        return history, INPUT_ENABLED, SEND_BUTTON_ENABLED, STOP_BUTTON_DISABLED, BUTTON_ENABLED, state
 
 
 title = None
 description = None
-
-# theme = gr.themes.Default(primary_hue="green")
-# theme = gr.themes.Soft(primary_hue="gray", secondary_hue="slate", neutral_hue="slate",
-#   text_size=gr.themes.sizes.text_lg, font=[gr.themes.GoogleFont("Inconsolata"), "Arial", "sans-serif"])
-# theme = gr.Theme.from_hub("earneleh/paris")
 theme = apriel
 
-with gr.Blocks(theme=theme) as demo:
-    gr.HTML("""
-    <style>
-        .html-container:has(.css-styles) {
-            padding: 0;
-            margin: 0;
-        }
-        
-        .css-styles { height: 0; }
-        
-        .model-message {
-            text-align: end;
-        }
-    
-        .model-dropdown-container {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            padding: 0;
-        }
-        
-        .chatbot {
-            max-height: 1400px;
-        }
-        
-        @media (max-width: 800px) {
-            .responsive-row {
-                flex-direction: column;
-            }
-            .model-message {
-                text-align: start;
-                font-size: 10px !important;
-            }
-            .model-dropdown-container {
-                flex-direction: column;
-                align-items: flex-start;
-            }
-            .chatbot {
-                max-height: 850px;
-            }
-        }
-
-        @media (max-width: 400px) {
-            .responsive-row {
-                flex-direction: column;
-            }
-            .model-message {
-                text-align: start;
-                font-size: 10px !important;
-            }
-            .model-dropdown-container {
-                flex-direction: column;
-                align-items: flex-start;
-            }
-            .chatbot {
-                max-height: 400px;
-            }
-        }
-    """ + f"""
-        @media (min-width: 1024px) {{
-            .send-button-container, .clear-button-container {{
-                max-width: {BUTTON_WIDTH}px;
-            }}
-        }}
-    </style>
-    """, elem_classes="css-styles")
+with open('styles.css', 'r') as f:
+    custom_css = f.read()
 
+with gr.Blocks(theme=theme, css=custom_css) as demo:
+    session_state = gr.State(value={"is_streaming": False, "stop_flag": False})  # Store session state as a dictionary
+
+    gr.HTML(f"""
+        <style>
+            @media (min-width: 1024px) {{
+                .send-button-container, .clear-button-container {{
+                    max-width: {BUTTON_WIDTH}px;
+                }}
+            }}
+        </style>
+        """, elem_classes="css-styles")
     with gr.Row(variant="panel", elem_classes="responsive-row"):
         with gr.Column(scale=1, min_width=400, elem_classes="model-dropdown-container"):
             model_dropdown = gr.Dropdown(
@@ -248,55 +242,50 @@ with gr.Blocks(theme=theme) as demo:
         elem_classes="chatbot",
     )
 
-    # chat_interface = gr.ChatInterface(
-    #     chat_fn,
-    #     description="",
-    #     type="messages",
-    #     chatbot=chatbot,
-    #     fill_height=True,
-    # )
-
     with gr.Row():
         with gr.Column(scale=10, min_width=400, elem_classes="user-input-container"):
             user_input = gr.Textbox(
                 show_label=False,
                 placeholder="Type your message here and press Enter",
-                container=False,
+                container=False
             )
         with gr.Column(scale=1, min_width=BUTTON_WIDTH * 2 + 20):
             with gr.Row():
                 with gr.Column(scale=1, min_width=BUTTON_WIDTH, elem_classes="send-button-container"):
                     send_btn = gr.Button("Send", variant="primary")
+                    stop_btn = gr.Button("Stop", variant="cancel", visible=False)
                 with gr.Column(scale=1, min_width=BUTTON_WIDTH, elem_classes="clear-button-container"):
                     clear_btn = gr.ClearButton(chatbot, value="New Chat", variant="secondary")
 
-    # on Enter: stream into the chatbot, then clear the textbox
-    user_input.submit(
-        fn=chat_fn,
-        inputs=[user_input, chatbot],
-        outputs=[chatbot]
+    gr.on(
+        triggers=[send_btn.click, user_input.submit],
+        fn=run_chat_inference,  # this generator streams results. do not use logged_event_handler wrapper
+        inputs=[chatbot, user_input, session_state],
+        outputs=[chatbot, user_input, send_btn, stop_btn, clear_btn, session_state]
+    ).then(
+        fn=chat_finished, inputs=None, outputs=[model_dropdown, user_input, send_btn, stop_btn, clear_btn], queue=False)
+
+    # In parallel, disable or update the UI controls
+    gr.on(
+        triggers=[send_btn.click, user_input.submit],
+        fn=chat_started,
+        inputs=None,
+        outputs=[model_dropdown, user_input, send_btn, stop_btn, clear_btn],
+        queue=False,
+        show_progress='hidden'
     )
-    user_input.submit(lambda: "", None, user_input, queue=False)
 
-    send_btn.click(
-        fn=chat_fn,
-        inputs=[user_input, chatbot],
-        outputs=[chatbot]
+    stop_btn.click(
+        fn=stop_chat,
+        inputs=[session_state],
+        outputs=[session_state]
     )
-    send_btn.click(lambda: "", None, user_input, queue=False)
 
     # Ensure the model is reset to default on page reload
     demo.load(lambda: setup_model(DEFAULT_MODEL_NAME, intial=False), [], [description_html])
 
-
-    def update_model_and_clear(model_name):
-        actual_model_name = model_name.replace("Model: ", "")
-        desc = setup_model(actual_model_name)
-        return desc, []
-
-
     model_dropdown.change(
-        fn=update_model_and_clear,
+        fn=update_model_and_clear_chat,
         inputs=[model_dropdown],
         outputs=[description_html, chatbot]
     )

gradio_runner.py

@@ -0,0 +1,10 @@
+import re
+import sys
+from gradio.cli import cli
+
+# This runs a gradio app so that it can be automatically reloaded in the browser
+# Example: python gradio_runner.py app.py
+
+if __name__ == '__main__':
+    sys.argv[0] = re.sub(r'(-script\.pyw|\.exe)?$', '', sys.argv[0])
+    sys.exit(cli())

styles.css

@@ -0,0 +1,84 @@
+:root {
+    --color-grey-50: #f9fafb;
+}
+
+.toast-body {
+    background-color: var(--color-grey-50);
+}
+
+.html-container:has(.css-styles) {
+    padding: 0;
+    margin: 0;
+}
+
+.css-styles {
+    height: 0;
+}
+
+.model-message {
+    text-align: end;
+}
+
+.model-dropdown-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 0;
+}
+
+.chatbot {
+    max-height: 1400px;
+}
+
+button.cancel {
+    border: var(--button-border-width) solid var(--button-cancel-border-color);
+    background: var(--button-cancel-background-fill);
+    color: var(--button-cancel-text-color);
+    box-shadow: var(--button-cancel-shadow);
+}
+
+button.cancel:hover, .cancel[disabled] {
+    background: var(--button-cancel-background-fill-hover);
+    color: var(--button-cancel-text-color-hover);
+}
+
+
+@media (max-width: 800px) {
+    .responsive-row {
+        flex-direction: column;
+    }
+
+    .model-message {
+        text-align: start;
+        font-size: 10px !important;
+    }
+
+    .model-dropdown-container {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .chatbot {
+        max-height: 850px;
+    }
+}
+
+@media (max-width: 400px) {
+    .responsive-row {
+        flex-direction: column;
+    }
+
+    .model-message {
+        text-align: start;
+        font-size: 10px !important;
+    }
+
+    .model-dropdown-container {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .chatbot {
+        max-height: 400px;
+    }
+}

theme.py

@@ -1,10 +1,36 @@
-# from __future__ import annotations
 from typing import Iterable
-import gradio as gr
 from gradio.themes import Soft
-# from gradio.themes.base import Base
 from gradio.themes.utils import colors, fonts, sizes
-import time
+
+colors.teal_gray = colors.Color(
+    name="teal_gray",
+    c50="#e8f1f4",
+    c100="#cddde3",
+    c200="#a8c3cf",
+    c300="#7da6b8",
+    c400="#588aa2",
+    c500="#3d6e87",
+    c600="#335b70",
+    c700="#2b495a",
+    c800="#2c5364",
+    c900="#233f4b",
+    c950="#1b323c",
+)
+
+colors.red_gray = colors.Color(
+    name="red_gray",
+    c50="#f7eded",
+    c100="#f5dcdc",
+    c200="#efb4b4",
+    c300="#e78f8f",
+    c400="#d96a6a",
+    c500="#c65353",
+    c600="#b24444",
+    c700="#8f3434",
+    c800="#732d2d",
+    c900="#5f2626",
+    c950="#4d2020",
+)
 
 
 class Apriel(Soft):
@@ -12,8 +38,8 @@ class Apriel(Soft):
             self,
             *,
             primary_hue: colors.Color | str = colors.gray,
-            secondary_hue: colors.Color | str = colors.slate,
-            neutral_hue: colors.Color | str = colors.gray,
+            secondary_hue: colors.Color | str = colors.teal_gray,
+            neutral_hue: colors.Color | str = colors.slate,
             # spacing_size: sizes.Size | str = sizes.spacing_md,
             # radius_size: sizes.Size | str = sizes.radius_md,
             text_size: sizes.Size | str = sizes.text_md,
@@ -43,19 +69,47 @@ class Apriel(Soft):
             font_mono=font_mono,
         )
         super().set(
-            body_background_fill="linear-gradient(135deg, *primary_200, *secondary_300)",
-            body_background_fill_dark="linear-gradient(135deg, *primary_900, *secondary_800)",
-            button_primary_background_fill="linear-gradient(90deg, *primary_400, *secondary_600)",
-            button_primary_background_fill_hover="linear-gradient(90deg, *primary_200, *secondary_300)",
+            background_fill_primary="*primary_50",
+            background_fill_primary_dark="*primary_900",
+
+            body_background_fill="linear-gradient(135deg, *primary_200, *primary_100)",
+            body_background_fill_dark="linear-gradient(135deg, *primary_900, *primary_800)",
+
             button_primary_text_color="white",
             button_primary_text_color_hover="black",
-            button_primary_background_fill_dark="linear-gradient(90deg, *primary_500, *secondary_600)",
+            button_primary_background_fill="linear-gradient(90deg, *secondary_400, *secondary_400)",
+            button_primary_background_fill_hover="linear-gradient(90deg, *secondary_300, *secondary_300)",
+            button_primary_background_fill_dark="linear-gradient(90deg, *secondary_600, *secondary_800)",
+            button_primary_background_fill_hover_dark="linear-gradient(90deg, *secondary_500, *secondary_500)",
 
             button_secondary_text_color="black",
             button_secondary_text_color_hover="white",
-            button_secondary_background_fill="linear-gradient(90deg, *primary_200, *secondary_300)",
-            button_secondary_background_fill_hover="linear-gradient(90deg, *secondary_400, *secondary_500)",
-            button_secondary_background_fill_dark="linear-gradient(90deg, *secondary_500, *secondary_600)",
+            button_secondary_background_fill="linear-gradient(90deg, *primary_300, *primary_300)",
+            button_secondary_background_fill_hover="linear-gradient(90deg, *primary_400, *primary_400)",
+            button_secondary_background_fill_dark="linear-gradient(90deg, *primary_500, *primary_600)",
+            button_secondary_background_fill_hover_dark="linear-gradient(90deg, *primary_500, *primary_500)",
+
+            button_cancel_background_fill=f"linear-gradient(90deg, {colors.red_gray.c400}, {colors.red_gray.c500})",
+            button_cancel_background_fill_dark=f"linear-gradient(90deg, {colors.red_gray.c700}, {colors.red_gray.c800})",
+            button_cancel_background_fill_hover=f"linear-gradient(90deg, {colors.red_gray.c500}, {colors.red_gray.c600})",
+            button_cancel_background_fill_hover_dark=f"linear-gradient(90deg, {colors.red_gray.c800}, {colors.red_gray.c900})",
+            # button_cancel_background_fill=f"linear-gradient(90deg, {colors.red.c400}, {colors.red.c500})",
+            # button_cancel_background_fill_dark=f"linear-gradient(90deg, {colors.red.c700}, {colors.red.c800})",
+            # button_cancel_background_fill_hover=f"linear-gradient(90deg, {colors.red.c500}, {colors.red.c600})",
+            # button_cancel_background_fill_hover_dark=f"linear-gradient(90deg, {colors.red.c800}, {colors.red.c900})",
+            button_cancel_text_color="white",
+            button_cancel_text_color_dark="white",
+            button_cancel_text_color_hover="white",
+            button_cancel_text_color_hover_dark="white",
+
+            # button_cancel_background_fill=colors.red.c500,
+            # button_cancel_background_fill_dark=colors.red.c700,
+            # button_cancel_background_fill_hover=colors.red.c600,
+            # button_cancel_background_fill_hover_dark=colors.red.c800,
+            # button_cancel_text_color="white",
+            # button_cancel_text_color_dark="white",
+            # button_cancel_text_color_hover="white",
+            # button_cancel_text_color_hover_dark="white",
 
             slider_color="*secondary_300",
             slider_color_dark="*secondary_600",
@@ -66,26 +120,29 @@ class Apriel(Soft):
             button_large_padding="11px",
 
             color_accent_soft="*primary_100",
-        )
 
+            block_label_background_fill="*primary_200",
 
-apriel = Apriel()
-
-with gr.Blocks(theme=apriel) as demo:
-    textbox = gr.Textbox(label="Name")
-    slider = gr.Slider(label="Count", minimum=0, maximum=100, step=1)
-    with gr.Row():
-        button = gr.Button("Submit", variant="primary")
-        clear = gr.Button("Clear")
-    output = gr.Textbox(label="Output")
-
-
-    def repeat(name, count):
-        time.sleep(3)
-        return name * count
+        )
 
 
-    button.click(repeat, [textbox, slider], output)
+apriel = Apriel()
 
-if __name__ == "__main__":
-    demo.launch()
+# with gr.Blocks(theme=apriel) as demo:
+#     textbox = gr.Textbox(label="Name")
+#     slider = gr.Slider(label="Count", minimum=0, maximum=100, step=1)
+#     with gr.Row():
+#         button = gr.Button("Submit", variant="primary")
+#         clear = gr.Button("Clear")
+#     output = gr.Textbox(label="Output")
+#
+#
+#     def repeat(name, count):
+#         time.sleep(3)
+#         return name * count
+#
+#
+#     button.click(repeat, [textbox, slider], output)
+#
+# if __name__ == "__main__":
+#     demo.launch()

utils.py

@@ -4,6 +4,7 @@ from typing import Any, Literal
 
 from gradio import ChatMessage
 from gradio.components.chatbot import Message
+from functools import wraps
 
 COMMUNITY_POSTFIX_URL = "/discussions"
 DEBUG_MODE = False or os.environ.get("DEBUG_MODE") == "True"
@@ -79,3 +80,26 @@ def check_format(messages: Any, type: Literal["messages", "tuples"] = "messages"
         raise Exception(
             "Data incompatible with tuples format. Each message should be a list of length 2."
         )
+
+
+def logged_event_handler(log_message='', event_handler=None, timer=None, clear_timer=False):
+    @wraps(event_handler)
+    def wrapped_event_handler(*args, **kwargs):
+        # Log before
+        if timer:
+            if clear_timer:
+                timer.clear()
+            timer.add_step(f"Start: {log_message}")
+        log_message(f"::: Before event: {log_message}")
+
+        # Call the original event handler
+        result = event_handler(*args, **kwargs)
+
+        # Log after
+        if timer:
+            timer.add_step(f"Completed: {log_message}")
+        log_message(f"::: After event: {log_message}")
+
+        return result
+
+    return wrapped_event_handler