api

apitest.py

@@ -0,0 +1,9 @@
+from gradio_client import Client
+
+client = Client("al1808th/macronizer")
+result = client.predict(
+	text="νεανίας ἀάατός ἐστιν καὶ καλός. τὰ παῖδες τὰ καλά",
+	model_label="Macronizer Mega v1 (Pretrained ModernBERT)",
+	api_name="/render_results",
+)
+print(result)

app.py

@@ -499,6 +499,14 @@ def render_results(text: str, model_label: str):
     return html_result, "\n".join(plain_lines)
 
 
+def render_plain_output(text: str) -> str:
+    lines = [line.strip() for line in text.splitlines() if line.strip()]
+    if not lines:
+        return ""
+
+    return "\n".join(_render_plain_line_per_word(line, DEFAULT_MODEL_ID) for line in lines)
+
+
 examples = [
         "νεανίας ἀάατός ἐστιν καὶ καλός. τὰ παῖδες τὰ καλά\nκαλὰ μὲν ἠέξευ, καλὰ δ᾽ ἔτραφες, οὐράνιε Ζεῦ,",
         "Ἆρες, Ἄρες βροτολοιγὲ μιαιφόνε τειχεσιπλῆτα\nἈτρεΐδαι τε καὶ ἄλλοι ἐϋκνήμιδες Ἀχαιοί",
@@ -542,7 +550,9 @@ CSS = """
 }
 
 html.dark-mode,
-body.dark-mode {
+body.dark-mode,
+html[data-theme="dark"],
+body[data-theme="dark"] {
     --bg-start: #050506;
     --bg-end: #101015;
     --ink: #f3f3f8;
@@ -558,7 +568,9 @@ body.dark-mode {
 }
 
 html.light-mode,
-body.light-mode {
+body.light-mode,
+html[data-theme="light"],
+body[data-theme="light"] {
     --bg-start: #f5f0e8;
     --bg-end: #e8edf4;
     --ink: #23242a;
@@ -576,14 +588,27 @@ body.light-mode {
 .gradio-container {
     font-family: 'Space Grotesk', sans-serif;
     background: radial-gradient(circle at top left, var(--bg-start), var(--bg-end));
-    color: var(--ink);
+    color: var(--ink) !important;
     transition: background-color 0.3s, color 0.3s;
+    min-height: 100vh;
 }
 
-.dark-mode-toggle {
-    position: fixed;
+#dark-mode-toggle {
+    position: fixed !important;
     top: 20px;
     right: 20px;
+    width: auto !important;
+    min-width: 0 !important;
+    max-width: max-content !important;
+    flex: 0 0 auto !important;
+    display: inline-flex !important;
+    z-index: 1000;
+}
+
+#dark-mode-toggle button,
+#dark-mode-toggle .gr-button,
+.dark-mode-toggle button,
+button.dark-mode-toggle {
     background: var(--paper);
     border: 2px solid var(--ink);
     color: var(--ink);
@@ -593,15 +618,28 @@ body.light-mode {
     font-weight: 600;
     font-family: 'Space Grotesk', sans-serif;
     font-size: 0.95rem;
-    z-index: 1000;
+    width: auto !important;
+    min-width: 0 !important;
+    white-space: nowrap;
     transition: all 0.3s;
 }
 
-.dark-mode-toggle:hover {
+#dark-mode-toggle:hover,
+#dark-mode-toggle button:hover,
+.dark-mode-toggle button:hover {
     transform: scale(1.05);
     opacity: 0.9;
 }
 
+.title,
+.title h1,
+.title p,
+.gradio-container .title,
+.gradio-container .title h1,
+.gradio-container .title p {
+    color: var(--ink) !important;
+}
+
 .title h1 {
     font-family: 'Cormorant Garamond', serif;
     font-size: 3rem;
@@ -629,7 +667,12 @@ body.light-mode {
 .panel .gr-markdown,
 .panel .gradio-markdown,
 .panel .gr-form label,
-.panel .gr-form span {
+.panel .gr-form span,
+.panel span,
+.panel p,
+.panel button,
+.panel .prose,
+.panel .prose * {
     color: var(--ink) !important;
 }
 
@@ -641,7 +684,10 @@ body.light-mode {
 .panel .gr-radio,
 .panel .gr-radio label,
 .panel .gr-box,
-.panel .gr-form {
+.panel .gr-form,
+.panel .wrap,
+.panel .block,
+.panel .block * {
     color: var(--ink) !important;
 }
 
@@ -659,7 +705,7 @@ body.light-mode {
 
 .dark-mode .panel .gr-button,
 .dark-mode .panel button {
-    color: #f6f2e8 !important;
+    color: var(--ink) !important;
     border-color: rgba(232, 228, 220, 0.28) !important;
 }
 
@@ -669,6 +715,10 @@ body.light-mode {
     color: #f7f9ff !important;
 }
 
+#try-examples .example-text {
+    white-space: pre-wrap;
+}
+
 .legend {
     display: flex;
     align-items: center;
@@ -755,11 +805,10 @@ body.light-mode {
 
 @media (max-width: 820px) {
     .title h1 { font-size: 2.2rem; }
-    .dark-mode-toggle {
-        position: relative;
-        top: auto;
-        right: auto;
-        margin-bottom: 1rem;
+    #dark-mode-toggle {
+        position: fixed !important;
+        top: 12px;
+        right: 12px;
     }
 }
 """
@@ -770,9 +819,11 @@ THEME_INIT_JS = """
         const isDark = mode === 'dark';
         document.documentElement.classList.toggle('dark-mode', isDark);
         document.documentElement.classList.toggle('light-mode', !isDark);
+        document.documentElement.dataset.theme = mode;
         if (document.body) {
             document.body.classList.toggle('dark-mode', isDark);
             document.body.classList.toggle('light-mode', !isDark);
+            document.body.dataset.theme = mode;
         }
         return isDark ? 'Light Mode' : 'Dark Mode';
     }
@@ -791,9 +842,11 @@ THEME_TOGGLE_JS = """
         const isDark = mode === 'dark';
         document.documentElement.classList.toggle('dark-mode', isDark);
         document.documentElement.classList.toggle('light-mode', !isDark);
+        document.documentElement.dataset.theme = mode;
         if (document.body) {
             document.body.classList.toggle('dark-mode', isDark);
             document.body.classList.toggle('light-mode', !isDark);
+            document.body.dataset.theme = mode;
         }
         localStorage.setItem('themeMode', mode);
         return isDark ? 'Light Mode' : 'Dark Mode';
@@ -816,7 +869,10 @@ with gr.Blocks() as demo:
                 """
                 <div class="title">
                     <h1>Ancient Greek Macronizer</h1>
-                    <p>Enter Ancient Greek to have the alphas, iotas and ypsilons marked as long or short. Made by Albin Thörn Cleland (Lund university) and Eric Cullhed (Uppsala university). Training the models was made possible by resources provided by the National Academic Infrastructure for Supercomputing in Sweden (NAISS), partially funded by the Swedish Research Council (grant agreement no. 2022-06725).</p>
+                    <p>
+                        Enter Ancient Greek to have the alphas, iotas and ypsilons marked as long or short. <br><br>
+                        Made by Albin Thörn Cleland (Lund university) and Eric Cullhed (Uppsala university). Training the models was made possible by resources provided by the National Academic Infrastructure for Supercomputing in Sweden (NAISS), partially funded by the Swedish Research Council (grant agreement no. 2022-06725).
+                    </p>
                 </div>
                 """
         )
@@ -836,14 +892,38 @@ with gr.Blocks() as demo:
                 with gr.Row():
                     classify_btn = gr.Button("Classify", variant="primary")
                     clear_btn = gr.Button("Clear")
-                gr.Examples(examples=examples, inputs=text_input, label="Try examples")
+                gr.Examples(
+                    examples=examples,
+                    inputs=text_input,
+                    label="Try examples",
+                    elem_id="try-examples",
+                )
 
             with gr.Column(elem_classes=["panel"]):
                 html_output = gr.HTML(label="Styled Results")
                 text_output = gr.Textbox(label="Plain Output", lines=12, buttons=["copy"])
 
-        classify_btn.click(render_results, inputs=[text_input, model_choice], outputs=[html_output, text_output])
-        clear_btn.click(lambda: ("", "", ""), outputs=[text_input, html_output, text_output])
+        api_text = gr.Textbox(label="text", visible=False)
+        api_output = gr.Textbox(label="plain_output", visible=False)
+        api_btn = gr.Button("API", visible=False)
+
+        classify_btn.click(
+            render_results,
+            inputs=[text_input, model_choice],
+            outputs=[html_output, text_output],
+            api_name=False,
+        )
+        clear_btn.click(
+            lambda: ("", "", ""),
+            outputs=[text_input, html_output, text_output],
+            api_name=False,
+        )
+        api_btn.click(
+            render_plain_output,
+            inputs=api_text,
+            outputs=api_output,
+            api_name="render_results",
+        )
         theme_toggle.click(fn=None, inputs=None, outputs=theme_toggle, js=THEME_TOGGLE_JS)
         demo.load(fn=None, inputs=None, outputs=theme_toggle, js=THEME_INIT_JS)
 

pytest.ini

@@ -10,3 +10,4 @@ addopts = -v --tb=short
 # Markers
 markers =
     markup: Tests for markup output preservation
+    online_api: Tests that call the hosted Gradio API

tests/test_markup.py

@@ -18,6 +18,7 @@ from app import (
     _render_plain_line_per_word,
     _render_styled_line_per_word,
     preprocess_and_syllabify,
+    render_plain_output,
     render_results,
 )
 
@@ -158,5 +159,26 @@ def test_plain_output_box_contains_only_output_lines(monkeypatch):
     assert '<div class="line-output">alpha</div>' in html_output
 
 
+def test_api_returns_only_plain_output(monkeypatch):
+    monkeypatch.setattr("app._render_plain_line_per_word", lambda line, model_id: f"marked {line}")
+
+    assert render_plain_output("alpha\nbeta") == "marked alpha\nmarked beta"
+
+
+def test_public_api_endpoint_is_plain_output_only():
+    import app
+
+    public_deps = [
+        dep
+        for dep in app.demo.config.get("dependencies", [])
+        if dep.get("api_name") == "render_results"
+        and dep.get("api_visibility") == "public"
+    ]
+
+    assert len(public_deps) == 1
+    assert len(public_deps[0].get("inputs", [])) == 1
+    assert len(public_deps[0].get("outputs", [])) == 1
+
+
 if __name__ == "__main__":
     pytest.main([__file__, "-v", "-s"])

tests/test_online_api.py

@@ -0,0 +1,14 @@
+from gradio_client import Client
+import pytest
+
+
+@pytest.mark.online_api
+def test_online_api_returns_plain_output_only():
+    client = Client("al1808th/macronizer")
+
+    result = client.predict(
+        text="νεανίας ἀάατός ἐστιν καὶ καλός. τὰ παῖδες τὰ καλά",
+        api_name="/render_results",
+    )
+
+    assert result == "νεα_νί^ας ἀ^ά_α^τός ἐστι^ν καὶ κα^λός. τὰ^ παῖδες τὰ^ κα_λά_"