Update app.py

app.py

@@ -40,25 +40,66 @@ def reset_latch():
     return "0", "1", "HOLD", ""
 
 
+custom_css = """
+.gradio-container {
+    max-width: 720px !important;
+    margin: auto;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+h1 {
+    color: #1a1a2e !important;
+    font-size: 28px !important;
+    font-weight: 700 !important;
+    margin-bottom: 4px !important;
+}
+.subtitle {
+    color: #5a5a6e !important;
+    font-size: 15px !important;
+}
+.output-box textarea {
+    font-size: 22px !important;
+    font-weight: 600 !important;
+    text-align: center !important;
+    color: #1a1a2e !important;
+}
+.history-box textarea {
+    font-family: "SF Mono", "Fira Code", "Consolas", monospace !important;
+    font-size: 13px !important;
+    color: #3a3a4e !important;
+}
+.truth-table-wrap table {
+    font-size: 14px !important;
+}
+.truth-table-wrap th {
+    color: #5a5a6e !important;
+    font-weight: 600 !important;
+}
+.truth-table-wrap td {
+    color: #1a1a2e !important;
+}
+"""
+
 with gr.Blocks(title="SR Latch Simulator") as demo:
-    gr.Markdown("## SR Latch Simulator")
+    gr.Markdown("# SR Latch Simulator")
     gr.Markdown(
-        "Toggle **S** (set) and **R** (reset) inputs to see how the latch responds. "
-        "The latch remembers its previous state when both inputs are 0."
+        "Toggle the S (set) and R (reset) inputs and click Apply to observe the latch behavior.",
+        elem_classes=["subtitle"],
     )
 
     with gr.Row():
         s_input = gr.Radio(choices=["0", "1"], value="0", label="S (Set)")
         r_input = gr.Radio(choices=["0", "1"], value="0", label="R (Reset)")
 
-    apply_btn = gr.Button("Apply", variant="primary")
+    with gr.Row():
+        apply_btn = gr.Button("Apply", variant="primary")
+        reset_btn = gr.Button("Reset")
 
     with gr.Row():
-        q_output = gr.Textbox(label="Q", value="0", interactive=False)
-        q_bar_output = gr.Textbox(label="Q'", value="1", interactive=False)
-        state_output = gr.Textbox(label="State", value="HOLD", interactive=False)
+        q_output = gr.Textbox(label="Q", value="0", interactive=False, elem_classes=["output-box"])
+        q_bar_output = gr.Textbox(label="Q'", value="1", interactive=False, elem_classes=["output-box"])
+        state_output = gr.Textbox(label="State", value="HOLD", interactive=False, elem_classes=["output-box"])
 
-    gr.Markdown("### Truth table")
+    gr.Markdown("### Truth Table")
     gr.Dataframe(
         value=[
             ["0", "0", "Prev", "Prev", "Hold"],
@@ -68,12 +109,16 @@ with gr.Blocks(title="SR Latch Simulator") as demo:
         ],
         headers=["S", "R", "Q", "Q'", "State"],
         interactive=False,
+        elem_classes=["truth-table-wrap"],
     )
 
     gr.Markdown("### History")
-    history_box = gr.Textbox(label="Log", lines=8, interactive=False)
-
-    reset_btn = gr.Button("Reset latch")
+    history_box = gr.Textbox(
+        label="Log",
+        lines=6,
+        interactive=False,
+        elem_classes=["history-box"],
+    )
 
     apply_btn.click(
         fn=sr_latch,
@@ -88,4 +133,4 @@ with gr.Blocks(title="SR Latch Simulator") as demo:
     )
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(css=custom_css, theme=gr.themes.Base())