style: update UI module style to latest version and add code input

app.py

@@ -258,4 +258,4 @@ def generate_response(prompt: str) -> str:
 app = build_ui(validate_and_evaluate)
 
 # Launch the web application
-app.launch()
+app.launch(css=CUSTOM_CSS)

ui_module.py

@@ -4,6 +4,7 @@ import gradio as gr
 # ---------------------------------------------------------------------------
 # MODULE 1 — UI Module
 # ---------------------------------------------------------------------------
+
 CUSTOM_CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');
 *, *::before, *::after { box-sizing: border-box; }
@@ -40,6 +41,11 @@ body, .gradio-container {
     color: #E8EAF0 !important;
     margin: 0 !important;
 }
+.eval-header p {
+    font-size: 13px !important;
+    color: #9DA0B0 !important;
+    margin: 2px 0 0 !important;
+}
 .eval-header .model-badge {
     margin-left: auto;
     font-family: 'Space Mono', monospace;
@@ -75,10 +81,11 @@ body, .gradio-container {
 .gradio-textbox textarea::placeholder {
     color: #4A4E60 !important;
 }
-#code-input textarea {
-    font-family: 'Space Mono', monospace !important;
-    font-size: 12.5px !important;
-    line-height: 1.65 !important;
+#code-input {
+    min-height: 300px;
+}
+#code-input .cm-editor {
+    min-height: 300px;
 }
 .gradio-textbox label span,
 .gradio-code label span {
@@ -102,8 +109,13 @@ body, .gradio-container {
     transition: background 0.15s, transform 0.1s !important;
     letter-spacing: -0.1px !important;
 }
-#eval-btn:hover { background: #7F77DD !important; transform: translateY(-1px) !important; }
-#eval-btn:active { transform: translateY(0) !important; }
+#eval-btn:hover {
+    background: #7F77DD !important;
+    transform: translateY(-1px) !important;
+}
+#eval-btn:active {
+    transform: translateY(0) !important;
+}
 #clear-btn {
     background: transparent !important;
     border: 1px solid #3A3E52 !important;
@@ -115,7 +127,10 @@ body, .gradio-container {
     cursor: pointer !important;
     transition: border-color 0.15s, color 0.15s !important;
 }
-#clear-btn:hover { border-color: #7F77DD !important; color: #E8EAF0 !important; }
+#clear-btn:hover {
+    border-color: #7F77DD !important;
+    color: #E8EAF0 !important;
+}
 .results-heading {
     font-size: 11px !important;
     font-weight: 500 !important;
@@ -127,31 +142,51 @@ body, .gradio-container {
     margin-bottom: 20px !important;
 }
 #verdict-out textarea {
-    background: #161820 !important; border: 1px solid #2E3140 !important;
-    border-radius: 10px !important; font-family: 'Space Mono', monospace !important;
-    font-size: 26px !important; font-weight: 700 !important;
-    text-align: center !important; padding: 20px !important;
-    color: #E8EAF0 !important; cursor: default !important;
+    background: #161820 !important;
+    border: 1px solid #2E3140 !important;
+    border-radius: 10px !important;
+    font-family: 'Space Mono', monospace !important;
+    font-size: 26px !important;
+    font-weight: 700 !important;
+    text-align: center !important;
+    padding: 20px !important;
+    color: #E8EAF0 !important;
+    cursor: default !important;
 }
 #accuracy-out textarea {
-    background: #161820 !important; border: 1px solid #2E3140 !important;
-    border-radius: 10px !important; font-family: 'Space Mono', monospace !important;
-    font-size: 26px !important; font-weight: 700 !important;
-    text-align: center !important; padding: 20px !important;
-    color: #E8EAF0 !important; cursor: default !important;
+    background: #161820 !important;
+    border: 1px solid #2E3140 !important;
+    border-radius: 10px !important;
+    font-family: 'Space Mono', monospace !important;
+    font-size: 26px !important;
+    font-weight: 700 !important;
+    text-align: center !important;
+    padding: 20px !important;
+    color: #E8EAF0 !important;
+    cursor: default !important;
 }
 #summary-out textarea {
-    background: #161820 !important; border: 1px solid #2E3140 !important;
-    border-radius: 10px !important; font-family: 'DM Sans', sans-serif !important;
-    font-size: 13.5px !important; line-height: 1.7 !important;
-    padding: 16px !important; color: #C0C3D0 !important; cursor: default !important;
+    background: #161820 !important;
+    border: 1px solid #2E3140 !important;
+    border-radius: 10px !important;
+    font-family: 'DM Sans', sans-serif !important;
+    font-size: 13.5px !important;
+    line-height: 1.7 !important;
+    padding: 16px !important;
+    color: #C0C3D0 !important;
+    cursor: default !important;
 }
 #issues-out textarea {
-    background: #161820 !important; border: 1px solid #2E3140 !important;
-    border-radius: 10px !important; font-family: 'DM Sans', sans-serif !important;
-    font-size: 13.5px !important; line-height: 1.8 !important;
-    padding: 16px !important; color: #C0C3D0 !important;
-    cursor: default !important; min-height: 120px !important;
+    background: #161820 !important;
+    border: 1px solid #2E3140 !important;
+    border-radius: 10px !important;
+    font-family: 'DM Sans', sans-serif !important;
+    font-size: 13.5px !important;
+    line-height: 1.8 !important;
+    padding: 16px !important;
+    color: #C0C3D0 !important;
+    cursor: default !important;
+    min-height: 120px !important;
 }
 #error-out textarea {
     background: #1A0E0E !important;
@@ -162,22 +197,27 @@ body, .gradio-container {
     padding: 14px 16px !important;
     color: #F0997B !important;
     cursor: default !important;
-    min-height: 120px !important;
-    width: 100% !important;
 }
-.divider { height: 1px; background: #2E3140; margin: 20px 0; }
+.divider {
+    height: 1px;
+    background: #2E3140;
+    margin: 20px 0;
+}
 footer { display: none !important; }
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: #3A3E52; border-radius: 3px; }
+.gradio-container > .wrap > footer { display: none !important; }
+::-webkit-scrollbar        { width: 6px; height: 6px; }
+::-webkit-scrollbar-track  { background: transparent; }
+::-webkit-scrollbar-thumb  { background: #3A3E52; border-radius: 3px; }
 ::-webkit-scrollbar-thumb:hover { background: #534AB7; }
 """
 
 HEADER_HTML = """
 <div class="eval-header">
   <div class="logo">🔍</div>
-  <div><h1>Python Code Evaluator</h1></div>
-  <div class="model-badge">GEMMA-4 · 31B-IT</div>
+  <div>
+    <h1>Python Code Evaluator</h1>
+  </div>
+  <div class="model-badge">GEMMA-3 · 4B-IT</div>
 </div>
 """
 
@@ -188,11 +228,12 @@ RESULTS_HEADING_HTML = """
 
 INPUT_HINT_HTML = """
 <div style="font-size:12px;color:#4A4E60;margin-top:-4px;padding-bottom:4px;">
-  Tip — paste your description and code above, then click
-  <strong style="color:#7F77DD">Evaluate</strong>.
+  Tip — paste your description and code above, then click <strong style="color:#7F77DD">Evaluate</strong>.
+  Token limit: 2 048 per request.
 </div>
 """
 
+
 def build_ui(evaluate_fn):
 
     def _split_metrics(metrics_str: str):
@@ -209,32 +250,13 @@ def build_ui(evaluate_fn):
     def _ui_evaluate(description: str, code: str):
         verdict, metrics, issues, error = evaluate_fn(description, code)
         accuracy, summary = _split_metrics(metrics)
-    
-        if error:
-            # Error occurred — show only the error box, hide all result boxes
-            return (
-                gr.update(value="",       visible=False),  # verdict
-                gr.update(value="",       visible=False),  # accuracy
-                gr.update(value="",       visible=False),  # summary
-                gr.update(value="",       visible=False),  # issues
-                gr.update(value=error,    visible=True),   # error ← only this shows
-            )
-    
-        # No error — show all result boxes, hide the error box
         if "PASS" in verdict.upper():
             verdict_display = "✅  PASS"
         elif "FAIL" in verdict.upper():
             verdict_display = "❌  FAIL"
         else:
             verdict_display = verdict or ""
-    
-        return (
-            gr.update(value=verdict_display, visible=True),   # verdict
-            gr.update(value=accuracy,        visible=True),   # accuracy
-            gr.update(value=summary,         visible=True),   # summary
-            gr.update(value=issues,          visible=True),   # issues
-            gr.update(value="",              visible=False),  # error ← hidden when no error
-        )
+        return verdict_display, accuracy, summary, issues, error
 
     with gr.Blocks(title="Python Code Evaluator") as ui:
 
@@ -253,18 +275,10 @@ def build_ui(evaluate_fn):
                 max_lines=20,
                 elem_id="desc-input",
             )
-            code_input = gr.Textbox(
+
+            code_input = gr.Code(
                 label="Python Code",
-                placeholder=(
-                    "# Paste your Python code here…\n\n"
-                    "# Note: Ensure proper indentation for accurate evaluation.\n\n"
-                    "def example(numbers):\n"
-                    "    total = 0\n"
-                    "    for item in numbers:\n"
-                    "        if item % 2 == 0:\n"
-                    "            total += item\n"
-                    "    return total\n"
-                ),
+                language="python",
                 lines=10,
                 max_lines=30,
                 elem_id="code-input",
@@ -275,26 +289,45 @@ def build_ui(evaluate_fn):
         with gr.Row():
             eval_btn  = gr.Button("Evaluate", variant="primary",
                                   elem_id="eval-btn", scale=0)
-            clear_btn = gr.Button("Clear", variant="secondary",
+            clear_btn = gr.Button("Clear",          variant="secondary",
                                   elem_id="clear-btn", scale=0)
 
         gr.HTML(RESULTS_HEADING_HTML)
 
         with gr.Row(equal_height=True):
-            verdict_out  = gr.Textbox(label="Verdict",   interactive=False, elem_id="verdict-out",  scale=1)
-            accuracy_out = gr.Textbox(label="Accuracy",  interactive=False, elem_id="accuracy-out", scale=1)
-            summary_out  = gr.Textbox(label="Summary",   interactive=False, elem_id="summary-out",  scale=2, lines=3)
-
-        issues_out = gr.Textbox(label="Issues Detected", interactive=False, lines=5, elem_id="issues-out")
-
-        with gr.Row():
-            error_out = gr.Textbox(
-                label="Status / Errors",
+            verdict_out = gr.Textbox(
+                label="Verdict",
+                interactive=False,
+                elem_id="verdict-out",
+                scale=1,
+            )
+            accuracy_out = gr.Textbox(
+                label="Accuracy",
                 interactive=False,
-                visible=True,
-                elem_id="error-out",
+                elem_id="accuracy-out",
                 scale=1,
             )
+            summary_out = gr.Textbox(
+                label="Summary",
+                interactive=False,
+                lines=3,
+                elem_id="summary-out",
+                scale=2,
+            )
+
+        issues_out = gr.Textbox(
+            label="Issues Detected",
+            interactive=False,
+            lines=5,
+            elem_id="issues-out",
+        )
+
+        error_out = gr.Textbox(
+            label="Status / Errors",
+            interactive=False,
+            visible=True,
+            elem_id="error-out",
+        )
 
         gr.HTML("""
         <div style="text-align:right;font-size:11px;color:#4A4E60;margin-top:8px;">
@@ -306,8 +339,6 @@ def build_ui(evaluate_fn):
 
         outputs = [verdict_out, accuracy_out, summary_out, issues_out, error_out]
         eval_btn.click(fn=_ui_evaluate, inputs=[description_input, code_input], outputs=outputs)
-        description_input.submit(fn=_ui_evaluate, inputs=[description_input, code_input], outputs=outputs)
-        code_input.submit(fn=_ui_evaluate, inputs=[description_input, code_input], outputs=outputs)
 
         def _clear():
             return "", "", "", "", "", ""