Deploy frontend

README.md

@@ -1,6 +1,6 @@
 ---
-title: Parayomi ふりがなデモ
-emoji: 🦜📖
+title: Parayomi — ふりがな予測モデル
+emoji: 📖
 colorFrom: green
 colorTo: red
 sdk: gradio

app.py

@@ -12,6 +12,7 @@ from __future__ import annotations
 import os
 
 import gradio as gr
+import jaconv
 from gradio_client import Client
 
 # ---------------------------------------------------------------------------
@@ -24,13 +25,14 @@ DEFAULT_TEXT = "深夜の路地は人気が無くて怖い。"
 
 EXAMPLES = [
     DEFAULT_TEXT,
-    "報告が半月も遅れたことで、取り返しのつかない大事になった。",
-    "綺麗な半月の絵だけど、これは何で色を塗ったの？",
-    "綺麗な半月の絵だけど、これは何で金色を塗ったの？",
+    "人気の絶えない観光地だが、一本裏道に入ると急に人気がなくなる。",
+    "大事になる前に話し合うべき",
+    "歌が上手な彼女は、交渉事でも常に一枚上手であり、舞台の上手で堂々と振る舞った。",
+    "綺麗な絵だけど、これは何で色を塗ったの？",
+    "綺麗な絵だけど、これは何で金色を塗ったの？",
     "金の時計を買うために、一生懸命に金を貯めた。",
     "あちらの方がお見えになった理由は、皆まで言わずとも分かる。",
     "天気いいし、皆で表に出て遊ぼ？",
-    "この表の右上の角に、通し番号を記入してください。",
     "カブトムシの立派な角に止まった小さな虫を、指で軽く弾く。",
     "ギターを弾く銀髪の彼は何人だ？",
     "この美しい紅葉の絶景を独り占めすることなど、何人たりとも許されない。",
@@ -46,7 +48,10 @@ def _segments_to_ruby(segments: list[dict]) -> str:
     """Convert segment dicts to HTML with ruby annotations."""
     parts: list[str] = []
     for seg in segments:
-        if seg["surface"] == seg["yomi"]:
+        if (
+            seg["surface"] == seg["yomi"]
+            or jaconv.kata2hira(seg["surface"]) == seg["yomi"]
+        ):
             parts.append(seg["surface"])
         else:
             parts.append(
@@ -63,12 +68,12 @@ CARD_CSS = """\
 .result-container {
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 8px;
 }
 .result-card {
     border: 1px solid var(--border-color-primary);
     border-radius: 12px;
-    padding: 16px 20px;
+    padding: 12px 16px;
     background: var(--background-fill-primary);
     transition: box-shadow 0.2s;
 }
@@ -106,13 +111,13 @@ CARD_CSS = """\
     text-align: right;
 }
 .ruby-text {
-    font-size: 2.0em;
+    font-size: 1.5em;
     line-height: 2.2;
     letter-spacing: 0.02em;
     color: var(--body-text-color);
 }
 .ruby-text rt {
-    font-size: 0.7em;
+    font-size: 0.8em;
     color: var(--color-accent);
 }
 .result-card:not(:first-child) .ruby-text {
@@ -184,7 +189,11 @@ def build_result_html(data: dict) -> str:
     pyopenjtalk_segments = data.get("pyopenjtalk_segments", [])
 
     if fugashi_segments or pyopenjtalk_segments:
-        baselines = '<div class="baseline-row">'
+        baselines = (
+            '<p style="font-size:0.9em;color:var(--body-text-color-subdued);margin:0 0 8px;">'
+            "既存の2つの形態素解析器による読み推定の結果：</p>"
+            '<div class="baseline-row">'
+        )
         if fugashi_segments:
             fugashi_ruby = _segments_to_ruby(fugashi_segments)
             baselines += f"""\
@@ -217,10 +226,10 @@ def build_result_html(data: dict) -> str:
 
 TITLE_HTML = """\
 <h1 style="text-align:center;margin-bottom:4px;">
-  <ruby>Parayomi<rp>(</rp><rt>ぱらよみ</rt><rp>)</rp></ruby> ふりがなデモ
+  <ruby>Parayomi<rp>(</rp><rt>ぱらよみ</rt><rp>)</rp></ruby> — ふりがな予測モデル
 </h1>
-<p style="text-align:center;color:var(--body-text-color-subdued);margin-top:0;">
-  日本語の漢字仮名混じり文を入力すると、文脈から判断した自然な読みを推定します。
+<p style="text-align:center;margin-top:0;">
+  日本語の漢字仮名混じり文を入力すると、Parayomiモデルが文脈を考慮した自然な読みを予測します。
 </p>
 """
 
@@ -232,10 +241,7 @@ def get_client() -> Client:
     global backend_client
     if backend_client is None:
         if not backend_space:
-            raise gr.Error(
-                "BACKEND_SPACE env var is not set. "
-                "Set it to the HF Space name (e.g. 'user/parayomi-backend')."
-            )
+            raise gr.Error("BACKEND_SPACE env var is not set. ")
         backend_client = Client(backend_space)
     return backend_client
 
@@ -252,13 +258,13 @@ def process(text: str) -> str:
 # Define textbox outside Blocks so gr.Examples can reference it above
 text_input = gr.Textbox(
     label="日本語テキスト",
-    lines=2,
+    lines=1,
     value=DEFAULT_TEXT,
     max_length=100,
 )
 
 with gr.Blocks(
-    title="Parayomi ふりがなデモ",
+    title="Parayomi — ふりがな予測モデル",
     theme=gr.themes.Ocean(),
 ) as demo:
     gr.HTML(TITLE_HTML)
@@ -274,7 +280,7 @@ with gr.Blocks(
     text_input.render()
 
     with gr.Row():
-        submit_btn = gr.Button("変換", variant="primary")
+        submit_btn = gr.Button("予測", variant="primary")
 
     output_html = gr.HTML(label="結果")
 

requirements.txt

@@ -1,2 +1,3 @@
 gradio>=5.0.0
 gradio_client>=1.0.0
+jaconv