Update app.py

app.py

@@ -1,24 +1,20 @@
-import html
 import os
 from functools import lru_cache
 from pathlib import Path
 
 import gradio as gr
+import pandas as pd
 import spaces
 import stanza
 from huggingface_hub import snapshot_download
 
 
-# ============================================================
-# MODEL CONFIGURATION
-# ============================================================
-
 MODEL_REPO_ID = "usmannawaz/old-church-slavonic-tokenizer-lemmatizer"
 MODEL_VARIANT = "combined"
 
 LANG = "cu"
-TOKENIZER_PACKAGE = "proiel"
 POS_PACKAGE = "proiel_nocharlm"
+TOKENIZER_PACKAGE = "proiel"
 LEMMATIZER_PACKAGE = "proiel_nocharlm"
 
 HF_LOCAL_DIR = "hf_models/old-church-slavonic-tokenizer-lemmatizer"
@@ -28,18 +24,14 @@ os.environ["STANZA_RESOURCES_DIR"] = STANZA_DIR
 
 EXAMPLE_TEXT = "тѣма пророчьскꙑи ликъ д͞ховьнꙑѧ благодѣти исплъни сѧ"
 
-
-# ============================================================
-# PRIVATE-USE / LEGACY CHARACTERS -> UNICODE OCS
-# ============================================================
-
-REPLACEMENTS = {
+REPLACEMENTS1 = {
     "": "и",
     "": "ч",
     "": "ѥ",
     "": "н",
     "": ":~",
     "": "~",
+    "ⷣ": "ⷣ҇",
     "": "̅",
     "": "҆̀",
     "": "ⷮ",
@@ -65,7 +57,6 @@ REPLACEMENTS = {
     "": "ⱉ",
     "": "͡",
     "": "҃",
-    "ⷣ": "ⷣ҇",
     "ⷮ": "ⷮ҇",
     "ⷯ": "ⷯ҇",
     "": "ꙩ́",
@@ -76,17 +67,12 @@ REPLACEMENTS = {
     "": "҃",
 }
 
-
-# ============================================================
-# FONT SETUP
-# ============================================================
-
 FONT_DIR = Path("fonts")
 
 if FONT_DIR.exists():
     gr.set_static_paths(paths=[FONT_DIR])
 
-CUSTOM_CSS = r"""
+CUSTOM_CSS = """
 @font-face {
     font-family: "Menaion";
     src: url("/gradio_api/file=fonts/Menaion.otf") format("opentype");
@@ -94,22 +80,14 @@ CUSTOM_CSS = r"""
     font-weight: normal;
     font-display: swap;
 }
-
 body {
-    background: linear-gradient(
-        135deg,
-        #f8fafc 0%,
-        #eef6ff 50%,
-        #f3f7fb 100%
-    ) !important;
+    background: linear-gradient(135deg, #f8fafc 0%, #eef6ff 50%, #f3f7fb 100%) !important;
 }
-
 .gradio-container {
-    max-width: 1050px !important;
+    max-width: 980px !important;
     margin: auto !important;
     font-family: Inter, Arial, sans-serif !important;
 }
-
 #hero {
     background: linear-gradient(135deg, #0f172a, #0f5f8f);
     border-radius: 28px;
@@ -117,82 +95,67 @@ body {
     margin-bottom: 22px;
     box-shadow: 0 22px 60px rgba(15, 23, 42, 0.22);
 }
-
 #hero h1 {
     color: #ffffff;
     font-size: 2.4rem;
-    font-weight: 900;
     margin: 0 0 10px 0;
+    font-weight: 900;
 }
-
 #hero p {
     color: #e0f2fe;
     font-size: 1.05rem;
     line-height: 1.55;
     margin: 0;
 }
-
-#main-card,
-#output-card {
+#main-card {
     background: #ffffff;
     border: 1px solid #cbd5e1;
     border-radius: 24px;
     padding: 24px;
     box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
 }
-
 #output-card {
+    background: #ffffff;
+    border: 1px solid #cbd5e1;
+    border-radius: 24px;
+    padding: 22px;
     margin-top: 22px;
+    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
 }
-
-textarea,
-input {
+textarea, input {
     border-radius: 16px !important;
     border: 1.5px solid #94a3b8 !important;
     background: #ffffff !important;
     color: #0f172a !important;
 }
-
-textarea:focus,
-input:focus {
+textarea:focus, input:focus {
     border-color: #0f5f8f !important;
     box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.18) !important;
 }
-
 label {
     color: #0f172a !important;
     font-weight: 850 !important;
 }
-
 button {
     border-radius: 16px !important;
     font-weight: 900 !important;
     box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14) !important;
 }
-
 button.primary {
     background: linear-gradient(90deg, #0f172a, #0f5f8f) !important;
     color: #ffffff !important;
     border: none !important;
 }
-
 button.primary:hover {
     background: linear-gradient(90deg, #020617, #075985) !important;
     transform: translateY(-1px);
 }
-
-/* Menaion changes only browser rendering, not the text sent to Stanza. */
-#ocs-input textarea,
-.ocs-font {
-    font-family: "Menaion", "Noto Sans Cyrillic", serif !important;
-    font-weight: normal !important;
-}
-
 #ocs-input textarea {
-    font-size: 23px !important;
-    line-height: 1.75 !important;
+    font-family: "Menaion", serif !important;
+    font-size: 24px !important;
+    line-height: 1.8 !important;
+    font-weight: normal !important;
 }
-
 #sentence-box {
     background: #f8fafc;
     border: 1px solid #cbd5e1;
@@ -200,80 +163,46 @@ button.primary:hover {
     border-radius: 18px;
     padding: 16px;
     color: #0f172a;
-    margin-bottom: 20px;
+    font-size: 1.05rem;
+    line-height: 1.7;
+    margin-bottom: 18px;
 }
-
-#sentence-box .label {
-    font-family: Inter, Arial, sans-serif;
+#sentence-box b {
+    color: #0f172a;
+    font-family: Inter, Arial, sans-serif !important;
     font-size: 1rem;
-    font-weight: 850;
 }
-
 #sentence-text {
     color: #0f172a;
-    font-size: 25px;
-    line-height: 1.85;
-    margin-top: 10px;
-    overflow-wrap: anywhere;
+    font-family: "Menaion", serif !important;
+    font-size: 25px !important;
+    font-weight: normal !important;
+    line-height: 1.8 !important;
+    margin-top: 8px;
 }
-
 #table-title {
     color: #0f5f8f;
-    font-family: Inter, Arial, sans-serif;
     font-weight: 900;
-    font-size: 1.05rem;
-    margin: 6px 0 12px 0;
-}
-
-.ocs-table-wrap {
-    border: 1px solid #cbd5e1;
-    border-radius: 16px;
-    overflow: auto;
-}
-
-.ocs-table {
-    width: 100%;
-    border-collapse: collapse;
-    table-layout: fixed;
-}
-
-.ocs-table th {
-    background: #eef6ff;
-    color: #0f172a;
-    font-family: Inter, Arial, sans-serif;
-    font-size: 0.95rem;
-    text-align: left;
-    padding: 12px;
-    border-bottom: 1px solid #cbd5e1;
-}
-
-.ocs-table td {
-    color: #0f172a;
-    font-size: 22px;
-    line-height: 1.6;
-    padding: 11px 12px;
-    border-bottom: 1px solid #e2e8f0;
-    vertical-align: top;
-    overflow-wrap: anywhere;
-}
-
-.ocs-table tr:last-child td {
-    border-bottom: none;
+    font-size: 1rem;
+    margin: 6px 0 10px 0;
 }
-
-.ocs-table tbody tr:nth-child(even) {
-    background: #f8fafc;
+#lemma-table,
+#lemma-table table,
+#lemma-table td,
+#lemma-table th,
+#lemma-table input,
+#lemma-table textarea,
+#lemma-table .cell-wrap,
+#lemma-table .table-wrap {
+    font-family: "Menaion", serif !important;
+    font-size: 21px !important;
+    font-weight: normal !important;
+    line-height: 1.6 !important;
 }
-
-.status-box {
-    border-radius: 16px;
-    padding: 14px 16px;
-    background: #fff7ed;
-    border: 1px solid #fdba74;
-    color: #7c2d12;
-    font-family: Inter, Arial, sans-serif;
+.dataframe {
+    border-radius: 16px !important;
+    overflow: hidden !important;
 }
-
 footer,
 .api,
 .settings,
@@ -285,19 +214,14 @@ button[aria-label="Settings"] {
 
 HERO_HTML = """
 <div id="hero">
-    <h1>OCS Combined Lemmatizer</h1>
+    <h1>Combo New Tool</h1>
     <p>
-        Pasted text is mapped from legacy/private-use characters to Unicode,
-        processed by Stanza, and displayed using the Menaion font.
+        Paste Old Church Slavonic text. The app preprocesses the input, tokenizes it, and returns each token with its predicted lemma.
     </p>
 </div>
 """
 
 
-# ============================================================
-# MODEL LOADING
-# ============================================================
-
 @lru_cache(maxsize=1)
 def get_model_paths():
     repo_dir = snapshot_download(
@@ -307,31 +231,14 @@ def get_model_paths():
 
     model_dir = Path(repo_dir)
 
-    tokenizer_model = (
-        model_dir
-        / "models"
-        / MODEL_VARIANT
-        / "tokenize"
-        / "cu_proiel_tokenizer.pt"
-    )
-
-    lemma_model = (
-        model_dir
-        / "models"
-        / MODEL_VARIANT
-        / "lemma"
-        / "cu_proiel_nocharlm_lemmatizer.pt"
-    )
+    tokenizer_model = model_dir / "models" / MODEL_VARIANT / "tokenize" / "cu_proiel_tokenizer.pt"
+    lemma_model = model_dir / "models" / MODEL_VARIANT / "lemma" / "cu_proiel_nocharlm_lemmatizer.pt"
 
     if not tokenizer_model.exists():
-        raise FileNotFoundError(
-            f"Tokenizer model not found: {tokenizer_model}"
-        )
+        raise FileNotFoundError(f"Tokenizer model not found: {tokenizer_model}")
 
     if not lemma_model.exists():
-        raise FileNotFoundError(
-            f"Lemmatizer model not found: {lemma_model}"
-        )
+        raise FileNotFoundError(f"Lemmatizer model not found: {lemma_model}")
 
     return tokenizer_model, lemma_model
 
@@ -365,133 +272,92 @@ def load_nlp_pipeline():
     )
 
 
-# ============================================================
-# TEXT PROCESSING
-# ============================================================
-
 def clean_text(text):
     return str(text or "").strip()
 
 
 def apply_mapping(text, mapping):
-    ordered = sorted(
-        mapping.items(),
-        key=lambda item: len(item[0]),
-        reverse=True,
-    )
-
-    for old_text, new_text in ordered:
-        text = text.replace(old_text, new_text)
-
+    for old_char, new_char in sorted(mapping.items(), key=lambda item: len(item[0]), reverse=True):
+        text = text.replace(old_char, new_char)
     return text
 
 
 def preprocess_text(text):
-    return apply_mapping(text, REPLACEMENTS)
+    text = apply_mapping(text, REPLACEMENTS1)
+    return text
 
 
 def make_sentence_html(text):
-    return f"""
-    <div id="sentence-box">
-        <div class="label">Processed Unicode OCS input</div>
-        <div id="sentence-text" class="ocs-font">
-            {html.escape(text)}
-        </div>
-    </div>
-    """
-
-
-def make_results_html(rows):
-    if not rows:
-        return """
-        <div class="status-box">
-            No tokens were returned by the model.
-        </div>
-        """
-
-    table_rows = "".join(
-        f"""
-        <tr>
-            <td class="ocs-font">{html.escape(token)}</td>
-            <td class="ocs-font">{html.escape(lemma)}</td>
-        </tr>
-        """
-        for token, lemma in rows
+    safe_text = (
+        text.replace("&", "&amp;")
+        .replace("<", "&lt;")
+        .replace(">", "&gt;")
     )
 
     return f"""
-    <div id="table-title">Token and lemma output</div>
-    <div class="ocs-table-wrap">
-        <table class="ocs-table">
-            <thead>
-                <tr>
-                    <th>Token</th>
-                    <th>Lemma</th>
-                </tr>
-            </thead>
-            <tbody>
-                {table_rows}
-            </tbody>
-        </table>
+    <div id="sentence-box">
+        <b>Input text</b>
+        <div id="sentence-text">{safe_text}</div>
     </div>
     """
 
 
 @spaces.GPU(duration=120)
 def analyze_text(text):
-    raw_text = clean_text(text)
+    text = clean_text(text)
 
-    if not raw_text:
+    if not text:
+        empty_table = pd.DataFrame(columns=["Token", "Lemma"])
         return (
             gr.update(visible=True),
-            """
-            <div class="status-box">
-                Please paste a sentence or raw OCS text first.
-            </div>
-            """,
-            "",
+            gr.update(value="<div id='sentence-box'>Please paste a sentence or raw text first.</div>"),
+            gr.update(value="", visible=False),
+            gr.update(value=empty_table, visible=False),
         )
 
     try:
-        processed_text = preprocess_text(raw_text)
-
+        processed_text = preprocess_text(text)
         nlp = load_nlp_pipeline()
-        document = nlp(processed_text)
+        doc = nlp(processed_text)
 
-        rows = [
-            (
-                word.text or "_",
-                word.lemma or "_",
-            )
-            for sentence in document.sentences
-            for word in sentence.words
-        ]
+        rows = []
+
+        for sentence in doc.sentences:
+            for word in sentence.words:
+                rows.append({
+                    "Token": word.text or "_",
+                    "Lemma": word.lemma or "_",
+                })
+
+        table = pd.DataFrame(rows, columns=["Token", "Lemma"])
 
         return (
             gr.update(visible=True),
-            make_sentence_html(processed_text),
-            make_results_html(rows),
+            gr.update(value=make_sentence_html(processed_text)),
+            gr.update(value="<div id='table-title'>Token and lemma output</div>", visible=True),
+            gr.update(value=table, visible=True),
         )
 
     except Exception as error:
+        empty_table = pd.DataFrame(columns=["Token", "Lemma"])
+
         return (
             gr.update(visible=True),
-            f"""
-            <div class="status-box">
-                <strong>Error:</strong>
-                {html.escape(str(error))}
-            </div>
-            """,
-            "",
+            gr.update(value=f"<div id='sentence-box'>Error: {str(error)}</div>"),
+            gr.update(value="", visible=False),
+            gr.update(value=empty_table, visible=False),
         )
 
 
 def clear_all():
+    empty_table = pd.DataFrame(columns=["Token", "Lemma"])
+
     return (
         "",
         gr.update(visible=False),
-        "",
-        "",
+        gr.update(value=""),
+        gr.update(value="", visible=False),
+        gr.update(value=empty_table, visible=False),
     )
 
 
@@ -499,19 +365,14 @@ def load_example():
     return EXAMPLE_TEXT
 
 
-# ============================================================
-# GRADIO APP
-# Event handlers must stay inside the Blocks context.
-# ============================================================
-
-APP_THEME = gr.themes.Soft(
-    primary_hue="cyan",
-    secondary_hue="blue",
-    neutral_hue="slate",
-)
-
 with gr.Blocks(
-    title="OCS Combined Lemmatizer",
+    title="Combo New Tool",
+    css=CUSTOM_CSS,
+    theme=gr.themes.Soft(
+        primary_hue="cyan",
+        secondary_hue="blue",
+        neutral_hue="slate",
+    ),
 ) as demo:
     gr.HTML(HERO_HTML)
 
@@ -524,29 +385,27 @@ with gr.Blocks(
         )
 
         with gr.Row():
-            analyze_button = gr.Button(
-                "Lemmatize",
-                variant="primary",
-            )
-
+            analyze_button = gr.Button("Lemmatize", variant="primary")
             example_button = gr.Button("Load example")
             clear_button = gr.Button("Clear")
 
-    with gr.Column(
-        elem_id="output-card",
-        visible=False,
-    ) as output_panel:
+    with gr.Column(elem_id="output-card", visible=False) as output_panel:
         sentence_output = gr.HTML()
-        results_output = gr.HTML()
+        table_title = gr.HTML(visible=False)
+
+        lemma_table = gr.Dataframe(
+            headers=["Token", "Lemma"],
+            interactive=False,
+            wrap=True,
+            show_label=False,
+            visible=False,
+            elem_id="lemma-table",
+        )
 
     analyze_button.click(
         fn=analyze_text,
         inputs=text_input,
-        outputs=[
-            output_panel,
-            sentence_output,
-            results_output,
-        ],
+        outputs=[output_panel, sentence_output, table_title, lemma_table],
         show_progress="hidden",
     )
 
@@ -560,18 +419,9 @@ with gr.Blocks(
     clear_button.click(
         fn=clear_all,
         inputs=None,
-        outputs=[
-            text_input,
-            output_panel,
-            sentence_output,
-            results_output,
-        ],
+        outputs=[text_input, output_panel, sentence_output, table_title, lemma_table],
         show_progress="hidden",
     )
 
 
-if __name__ == "__main__":
-    demo.launch(
-        css=CUSTOM_CSS,
-        theme=APP_THEME,
-    )
+demo.launch()