UI: side-by-side 원문/교열후 panes, larger input, remove metrics/step view

app.py

@@ -19,29 +19,31 @@ SAMPLE_TEXT = (
     "실수요자의 구매 심리가 되살아났기 때문이라는 분석이 나온다."
 )
 
-LLM_STEPS = {"proofread", "basic_correction", "context_correction", "style_correction"}
+PANE_STYLE = (
+    "border:1px solid rgba(128,128,128,.35);border-radius:8px;"
+    "padding:14px 16px;line-height:1.9;font-size:1.02rem;min-height:120px"
+)
 
 
-def diff_html(src: str, dst: str) -> tuple[str, int]:
-    """어절 단위 diff 를 HTML 로. (마크업, 바뀐 세그먼트 수) 반환."""
+def diff_panes(src: str, dst: str) -> tuple[str, str, int]:
+    """어절 단위 diff 를 좌(원문)/우(교정) 패널 HTML 로. 바뀐 세그먼트 수도 반환."""
     a, b = src.split(), dst.split()
     sm = difflib.SequenceMatcher(a=a, b=b, autojunk=False)
-    parts: list[str] = []
+    left: list[str] = []
+    right: list[str] = []
     n_changed = 0
     for op, i1, i2, j1, j2 in sm.get_opcodes():
         before, after = html.escape(" ".join(a[i1:i2])), html.escape(" ".join(b[j1:j2]))
         if op == "equal":
-            parts.append(after)
+            left.append(before)
+            right.append(after)
             continue
         n_changed += 1
         if before:
-            parts.append(
-                f'<span style="background:rgba(230,80,80,.18);'
-                f'text-decoration:line-through">{before}</span>'
-            )
+            left.append(f'<span style="background:rgba(230,80,80,.20)">{before}</span>')
         if after:
-            parts.append(f'<span style="background:rgba(60,170,90,.22)">{after}</span>')
-    return " ".join(parts), n_changed
+            right.append(f'<span style="background:rgba(60,170,90,.24)">{after}</span>')
+    return " ".join(left), " ".join(right), n_changed
 
 
 @st.cache_resource
@@ -68,9 +70,8 @@ with st.sidebar:
         if key:
             os.environ["UPSTAGE_API_KEY"] = key
     model = st.selectbox("모델 (step1–3 주입)", ["solar-pro4", "solar-pro2"], index=0)
-    st.caption("FT 교열 스텝은 파이프라인에 고정된 ft:solar-news-correction 을 사용합니다.")
 
-text = st.text_area("기사 본문", value=SAMPLE_TEXT, height=180, max_chars=4000)
+text = st.text_area("기사 본문", value=SAMPLE_TEXT, height=320, max_chars=4000)
 
 if st.button("교열 실행", type="primary", disabled=not text.strip()):
     if not os.environ.get("UPSTAGE_API_KEY"):
@@ -78,41 +79,19 @@ if st.button("교열 실행", type="primary", disabled=not text.strip()):
             "UPSTAGE_API_KEY 가 필요합니다 — 사이드바에 입력하거나 Space Secrets 에 설정하세요."
         )
         st.stop()
-    with st.spinner("교열 중입니다… (파이프라인 최악 실측 37.5초, 보통 10초 내)"):
+    with st.spinner("교열 중입니다…"):
         try:
             result = runner.run_proofread(get_pipeline(), text.strip(), model=model)
         except Exception as e:  # noqa: BLE001 — 데모 표면에서는 원인 요약만 보여준다
             st.error(f"실행 실패: {type(e).__name__}: {e}")
             st.stop()
 
-    markup, n_changed = diff_html(text.strip(), result["output"])
-    usage = result.get("usage") or {}
-
-    c1, c2, c3 = st.columns(3)
-    c1.metric("소요 시간", f"{result['elapsed_s']:.1f}s")
-    c2.metric("바뀐 곳", f"{n_changed}곳")
-    c3.metric("토큰 (입력+출력)", f"{usage.get('total_tokens', 0):,}")
-
-    st.subheader("교정 결과 (원문 대비 변경 표시)")
-    st.markdown(
-        f'<div style="line-height:1.9;font-size:1.02rem">{markup}</div>',
-        unsafe_allow_html=True,
-    )
-
-    with st.expander("교정 전문 (복사용)"):
-        st.code(result["output"], language=None)
-
-    with st.expander("파이프라인 스텝별 출력"):
-        prev = text.strip()
-        for name, snapshot in result["step_outputs"].items():
-            kind = "LLM" if name in LLM_STEPS else "rule"
-            changed = snapshot != prev
-            st.markdown(f"**{name}** · {kind} · {'변경함' if changed else '변경 없음'}")
-            if changed:
-                step_markup, _ = diff_html(prev, snapshot)
-                st.markdown(
-                    f'<div style="line-height:1.8;font-size:.92rem;opacity:.9">{step_markup}</div>',
-                    unsafe_allow_html=True,
-                )
-            prev = snapshot
-            st.divider()
+    left, right, _n_changed = diff_panes(text.strip(), result["output"])
+
+    c1, c2 = st.columns(2, gap="medium")
+    with c1:
+        st.subheader("원문")
+        st.markdown(f'<div style="{PANE_STYLE}">{left}</div>', unsafe_allow_html=True)
+    with c2:
+        st.subheader("교열 후")
+        st.markdown(f'<div style="{PANE_STYLE}">{right}</div>', unsafe_allow_html=True)