refactor: move hint and char count from textbox info to gr.HTML element

Replace the input textbox's info field with a standalone gr.HTML element
so both input and output panels have matching textbox styling.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

app.py

@@ -87,11 +87,15 @@ def translate(
 
 
 def _format_info(char_count: int) -> str:
-    return f"Press Ctrl+Enter to apply · {char_count} / 2,000"
+    return (
+        f'<p style="font-size: 0.85em; color: #888; margin: 4px 0 0 0;">'
+        f"Press Ctrl+Enter to apply · {char_count} / 2,000"
+        f"</p>"
+    )
 
 
-def _update_char_count(text: str) -> dict:
-    return gr.update(info=_format_info(len(text)))
+def _update_char_count(text: str) -> str:
+    return _format_info(len(text))
 
 
 def _translate_with_loading(
@@ -120,8 +124,8 @@ def _build_demo() -> gr.Blocks:
                     max_length=2000,
                     show_label=False,
                     buttons=["clear"],
-                    info=_format_info(0),
                 )
+                input_info = gr.HTML(value=_format_info(0))
             with gr.Column():
                 target_language = gr.Dropdown(
                     choices=language_names,
@@ -152,7 +156,7 @@ def _build_demo() -> gr.Blocks:
         input_text.change(
             fn=_update_char_count,
             inputs=input_text,
-            outputs=input_text,
+            outputs=input_info,
         )
 
     return demo

tests/test_app.py

@@ -185,28 +185,25 @@ def test_translate_handlers_wire_text_and_language(demo):
 
 
 def test_char_count_handler_exists(demo):
-    """Character count handler should wire input text back to itself."""
+    """Character count handler should wire input text to the HTML info element."""
     char_fns = [
         fn
         for fn in demo.fns.values()
-        if [type(i).__name__ for i in fn.inputs] == ["Textbox"]
-        and [type(o).__name__ for o in fn.outputs] == ["Textbox"]
+        if [type(i).__name__ for i in fn.inputs] == ["Textbox"] and [type(o).__name__ for o in fn.outputs] == ["HTML"]
     ]
     assert len(char_fns) == 1, f"Expected 1 char count handler, found {len(char_fns)}"
 
 
 def test_char_count_shows_limit(demo):
-    """Input textbox info should show '0 / 2,000' format."""
-    textboxes = [b for b in demo.blocks.values() if type(b).__name__ == "Textbox"]
-    interactive = [t for t in textboxes if t.interactive is not False]
-    assert "2,000" in interactive[0].info, f"Expected '2,000' in info, got {interactive[0].info!r}"
+    """HTML info element should show '0 / 2,000' format."""
+    html_blocks = [b for b in demo.blocks.values() if type(b).__name__ == "HTML"]
+    assert any("2,000" in (h.value or "") for h in html_blocks), "Expected '2,000' in an HTML block"
 
 
 def test_shortcut_hint_exists(demo):
-    """Input textbox info should include shortcut hint."""
-    textboxes = [b for b in demo.blocks.values() if type(b).__name__ == "Textbox"]
-    interactive = [t for t in textboxes if t.interactive is not False]
-    assert "Press Ctrl+Enter to apply" in interactive[0].info, f"Expected hint in info, got {interactive[0].info!r}"
+    """HTML info element should include shortcut hint."""
+    html_blocks = [b for b in demo.blocks.values() if type(b).__name__ == "HTML"]
+    assert any("Press Ctrl+Enter to apply" in (h.value or "") for h in html_blocks), "Expected hint in an HTML block"
 
 
 def test_no_title(demo):