"""HORST: Deutsche Rechtschreib- und Grammatikkorrektur mit einem eigenen Modell (ZeroGPU)."""
import base64
from pathlib import Path

import gradio as gr
import sentencepiece as spm
import spaces
import torch
from huggingface_hub import hf_hub_download

from evaluate import correct_text, load_model
from prepare import detokenize, split_sentences, tokenize
from ui_helpers import EMPTY_DIFF, MAX_WORDS, counter_html, diff_html, stats_html

HERE = Path(__file__).parent
LOGO = "data:image/svg+xml;base64," + base64.b64encode((HERE / "horst-wordmark.svg").read_bytes()).decode()
REPO = "Bayernator/horst-ai"

# ZeroGPU emuliert CUDA außerhalb von @spaces.GPU, das Modell gehört laut Doku auf Modulebene auf "cuda"
device = "cuda" if torch.cuda.is_available() else "cpu"
model = load_model([hf_hub_download(REPO, "horst-ai.pt")], device)
sp = spm.SentencePieceProcessor(model_file=hf_hub_download(REPO, "spm.model"))


def duration(text, beam):
    return min(120, 15 + int(len((text or "").split()) * 0.2))  # kurze Dauer = bessere Warteschlangen-Priorität


@spaces.GPU(duration=duration)
def correct(text, beam):
    text = (text or "").strip()
    if not text:
        return ""
    if len(text.split()) > MAX_WORDS:
        raise gr.Error(f"Bitte höchstens {MAX_WORDS} Wörter auf einmal eingeben ({len(text.split())} sind zu viel).")
    out = []
    for line in text.split("\n"):  # Absätze bleiben erhalten
        sents = [tokenize(s) for s in split_sentences(line) if s.strip()]
        out.append(detokenize(correct_text(model, sp, sents, beam=int(beam))) if sents else "")
    return "\n".join(out)


def show_diff(old, new):
    if not (new or "").strip():
        return EMPTY_DIFF, result_head()
    html, n = diff_html(old, new)
    return html, result_head(stats_html(new, n))


def result_head(chips=""):
    return f'<div class="px-row"><span class="px-kicker">Ergebnis</span>{chips}</div>'


def clear():
    return "", "", EMPTY_DIFF, result_head(), counter_html("")


ARROW = ('<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" '
         'stroke-linecap="square" aria-hidden="true"><path d="M12 5v14M6 13l6 6 6-6"/></svg>')
def pixels(*colors):
    return "".join(f'<i style="background:{c}"></i>' for c in colors)


MARK = pixels("#FFD23F", "#FF8A1F", "#F2601C", "#D9381E")

HERO = f"""
<header class="px-nav">
  <div class="px-brand"><span class="px-mark" aria-hidden="true">{MARK}</span>HORST</div>
  <nav class="px-links" aria-label="Links">
    <a href="https://huggingface.co/Bayernator/horst-ai" target="_blank">Modell</a>
    <a href="https://bavarianator.github.io/horst/benchmark.html" target="_blank">Benchmark</a>
    <a href="https://bavarianator.github.io/horst/" target="_blank">Website</a>
    <a class="px-btn dark" href="#korrektur">Ausprobieren</a>
  </nav>
</header>
<section class="px-hero">
  <div>
    <span class="px-new">Neu: Trainingsstufe 2</span>
    <h1 class="px-h1">Deutsche Text&shy;korrektur. Von Grund auf <mark>selbst trainiert.</mark></h1>
    <p class="px-lead">Rechtschreibung, Groß- und Kleinschreibung, Kommas und Grammatik: korrigiert von einem KI-Modell,
    das komplett von Grund auf selbst trainiert wurde.</p>
    <div class="px-cta">
      <a class="px-btn dark" href="#korrektur">Text korrigieren {ARROW}</a>
      <a class="px-btn line" href="https://huggingface.co/Bayernator/horst-ai" target="_blank">Modell ansehen</a>
    </div>
    <div class="px-facts">
      <div class="px-fact"><b>209 Mio.</b><span>Parameter</span></div>
      <div class="px-fact"><b>0</b><span>fremde Gewichte</span></div>
      <div class="px-fact"><b>{MAX_WORDS}</b><span>Wörter am Stück</span></div>
      <div class="px-fact"><b>GPU</b><span>ZeroGPU</span></div>
    </div>
  </div>
  <div class="px-poster">
    <span class="px-kicker">Deutsche Rechtschreib- und Grammatikkorrektur</span>
    <img src="{LOGO}" alt="HORST">
    <div class="px-stair small" aria-hidden="true"></div>
  </div>
</section>
<div class="px-stair" aria-hidden="true"></div>
<div class="px-head">
  <div><span class="px-kicker">01 / Korrektur</span><h2 class="px-h2">Text rein. Fehler raus.</h2></div>
  <span class="px-count">Bis {MAX_WORDS} Wörter · Absätze bleiben erhalten</span>
</div>
"""


def pbar(label, value, stage2=False):
    n = round(value * 20)  # 20 Pixel = F0,5 von 1,0
    shown = f"{value:.2f}".replace(".", ",")
    return (f'<div class="px-bar"><span>{label}</span><div class="px-pbar{" s2" if stage2 else ""}" style="--n:{n}"></div>'
            f'<span>{shown}</span></div>')


def metric(big, label, src, s1, s2):
    return (f'<div class="px-metric"><div class="px-big">{big}</div><p class="px-mlabel">{label}</p><p class="px-msrc">{src}</p>'
            f'<div class="px-bars">{pbar("Stufe 1", s1)}{pbar("Stufe 2", s2, True)}</div></div>')


INFO = f"""
<section class="px-model">
  <span class="px-kicker">02 / Neu im Space</span>
  <h2 class="px-h2">Trainingsstufe 2 ist da.</h2>
  <p class="px-sub">Gemischte Daten mit echten Korrekturen aus Wikipedia und Lernertexten, dazu lange Passagen bis 500 Wörter.
  Gleiche Modellgröße, deutlich bessere Korrekturen.</p>
  <div class="px-metrics">
    {metric("0,63", "Echte Lernertexte", "Falko-MERLIN · dev", 0.40, 0.633)}
    {metric("0,88", "Harte Rechtschreibfälle", "german-ortho · bench-dev", 0.69, 0.879)}
    <div class="px-metric"><span class="px-kicker">Steckbrief</span><div class="px-specs">
      <div class="px-spec"><span>Parameter</span><b>209 Mio.</b></div>
      <div class="px-spec"><span>Kontext</span><b>1024 Tokens</b></div>
      <div class="px-spec"><span>Stufe 1</span><b>256 Tokens</b></div>
      <div class="px-spec"><span>Trainingsschritt</span><b>32.000</b></div>
    </div></div>
  </div>
  <p class="px-cap">F0,5 auf Edit-Ebene, je 200 Beispiele, greedy (Beam 1). Höher ist besser.</p>
</section>
<section class="px-section">
  <span class="px-kicker">03 / So entsteht HORST</span>
  <div class="px-steps">
    <div class="px-step"><div class="px-num" aria-hidden="true">{pixels("#FFD23F")}</div><h3>Von Grund auf trainiert</h3>
      <p>Keine fremden Gewichte: Tokenizer und Transformer sind komplett selbst gebaut und trainiert.</p></div>
    <div class="px-step"><div class="px-num" aria-hidden="true">{pixels("#FFD23F", "#FF8A1F")}</div>
      <h3>Millionen Übungssätze</h3>
      <p>30 Mio. saubere deutsche Sätze mit künstlichen Fehlern. In Stufe 2 kommen echte Korrekturen aus Wikipedia-Versionen
      und Lernertexten dazu.</p></div>
    <div class="px-step"><div class="px-num" aria-hidden="true">{pixels("#FFD23F", "#FF8A1F", "#D9381E")}</div><h3>Auch für lange Texte</h3>
      <p>Absätze bleiben erhalten. Stufe 2 liest bis zu 1024 Tokens am Stück und korrigiert mit Kontext aus den Nachbarsätzen.</p></div>
  </div>
  <div class="px-note">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square"
      aria-hidden="true"><rect x="3" y="3" width="18" height="18"/><path d="M12 11v6M12 7v1"/></svg>
    <span>HORST ist ein Forschungsmodell (Trainingsstufe 2) und macht noch Fehler. Prüfe wichtige Texte immer selbst.</span>
  </div>
</section>
<footer class="px-foot">
  <div class="px-stair" aria-hidden="true"></div>
  <div class="px-foot-in">
    <img src="{LOGO}" alt="HORST">
    <nav aria-label="Weiterführend">
      <a href="https://huggingface.co/Bayernator/horst-ai" target="_blank">Modell</a>
      <a href="https://huggingface.co/datasets/Bayernator/german-spelling-data" target="_blank">Trainingsdaten</a>
      <a href="https://huggingface.co/datasets/Bayernator/german-ortho" target="_blank">Benchmark-Daten</a>
      <a href="https://bavarianator.github.io/horst/" target="_blank">Website</a>
    </nav>
  </div>
</footer>
"""

# Pixeltreppe: Zeilen per Hintergrund (von rechts), Pixelspalten per Maske
STAIR = ("linear-gradient(#FFD23F,#FFD23F) right 0/{0} 18px no-repeat,linear-gradient(#FFB020,#FFB020) right 20px/{1} 18px no-repeat,"
         "linear-gradient(#FF8A1F,#FF8A1F) right 40px/{2} 18px no-repeat,linear-gradient(#F2601C,#F2601C) right 60px/{3} 18px no-repeat,"
         "linear-gradient(#D9381E,#D9381E) right 80px/{4} 18px no-repeat")
PIXELS = ("-webkit-mask-image:linear-gradient(90deg,#000 0 {0}px,transparent {0}px);-webkit-mask-size:{1}px 100%;-webkit-mask-repeat:repeat-x;"
          "mask-image:linear-gradient(90deg,#000 0 {0}px,transparent {0}px);mask-size:{1}px 100%;mask-repeat:repeat-x")

CSS = """
.gradio-container { max-width: 1200px !important; margin: 0 auto !important; padding: 0 32px !important; }
.px-kicker, [data-testid="block-info"] { font-family: "IBM Plex Mono", ui-monospace, monospace !important; font-size: 12.5px !important;
  font-weight: 500 !important; letter-spacing: .12em; text-transform: uppercase; color: #4B453E !important; }

.px-stair { height: 118px; -webkit-mask-position: right top; mask-position: right top;
  background: STAIR_BIG, linear-gradient(#161412,#161412) right 100px/100% 18px no-repeat; PIXELS_BIG; }
.px-stair.small { height: 98px; margin: 0 -36px; background: STAIR_SMALL; }
.px-foot .px-stair { height: 98px; background: STAIR_FOOT; }

.px-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 30px 0 22px; }
.px-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 22px; letter-spacing: .02em; }
.px-mark { display: grid; grid-template-columns: repeat(2, 10px); gap: 2px; }
.px-mark i, .px-num i { display: block; width: 10px; height: 10px; }
.px-links { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; font-size: 15px; font-weight: 500; }
.px-links a { color: #161412; text-decoration: none; }
.px-links a:hover { color: #C02E15; }
.px-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border: 1.5px solid #161412; font-weight: 700; font-size: 16px; text-decoration: none !important; }
.px-btn.dark, .px-links a.px-btn { background: #161412; color: #FBF6EC !important; }
.px-btn.dark:hover { background: #F2601C; border-color: #F2601C; color: #161412 !important; }
.px-btn.line { color: #161412; }
.px-btn.line:hover { background: #161412; color: #FBF6EC; }

.px-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; padding: 40px 0 56px; }
.px-new { display: inline-block; background: #FFD23F; font-family: "IBM Plex Mono", monospace; font-size: 12.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; }
h1.px-h1 { font-size: clamp(44px, 6.2vw, 80px) !important; font-weight: 800 !important; line-height: .98 !important;
  letter-spacing: -.035em; margin: 22px 0 !important; }
.px-h1 mark { background: linear-gradient(transparent 58%, #FFD23F 58% 92%, transparent 92%); color: inherit; padding: 0 .04em; }
.px-lead { font-size: 20px; line-height: 1.5; color: #4B453E; margin: 0; max-width: 34em; }
.px-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.px-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 40px; border-top: 1.5px solid #161412; }
.px-fact { padding: 14px 14px 0 0; display: flex; flex-direction: column; gap: 2px; }
.px-fact b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.px-fact span, .px-count, .px-msrc, .px-cap { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; color: #6F675D; }
.px-poster { background: #161412; aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: space-between;
  padding: 36px 36px 0; box-sizing: border-box; overflow: hidden; }
.px-poster img { width: 100%; height: auto; display: block; }
.px-poster .px-kicker { color: #C9BFAE !important; }

.px-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 72px 0 22px; }
h2.px-h2 { font-size: clamp(32px, 4.4vw, 52px) !important; font-weight: 800 !important; line-height: 1 !important;
  letter-spacing: -.03em; margin: 10px 0 0 !important; }

.px-work { gap: 0 !important; border: 1.5px solid #161412; background: #fff; }
.px-panel { padding: 24px !important; gap: 16px !important; }
.px-panel .form { background: transparent !important; border: 0 !important; gap: 16px !important; overflow: visible !important; }
#px-result { flex-grow: 0 !important; }
.px-panel .tabs { flex-grow: 1; }
.px-panel + .px-panel { border-left: 1.5px solid #161412; }
.counter { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: #6F675D; text-align: right; margin-top: -6px; }
.counter.over { color: #C02E15; font-weight: 600; }
.px-beam .wrap:has(> label) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 !important;
  border: 1.5px solid #161412; }
.px-beam label { justify-content: center; text-align: center; min-height: 48px; padding: 0 6px !important; font-weight: 600 !important;
  font-size: 15px !important; }
.px-beam label + label { border-left: 1.5px solid #161412 !important; }
.px-beam label:focus-within { outline: 2px solid #F2601C; outline-offset: -4px; }
.px-beam label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.px-btns { gap: 10px !important; }
.px-btns button { min-height: 56px; font-size: 17px !important; }

.px-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 30px; }
.stats { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; font-weight: 600; padding: 5px 10px; background: #161412; color: #FBF6EC; }
.chip.ok { background: #FFD23F; color: #161412; }
.chip.n { background: #F3EBDB; color: #161412; }
.diff { min-height: 240px; box-sizing: border-box; background: #FBF6EC; border: 1px solid #E2D8C6; padding: 16px 18px;
  font-size: 17px; line-height: 2.1; white-space: pre-wrap; }
.diff.empty { color: #6F675D; line-height: 1.8; }
.diff del { color: #C02E15; background: #FBE3DA; text-decoration: line-through; text-decoration-thickness: 2px; padding: 1px 5px; }
.diff ins { color: #161412; background: #FFD23F; text-decoration: none; font-weight: 700; padding: 2px 6px; }

#px-examples { margin-top: 40px; }
#px-examples .gallery-item { border: 0 !important; border-bottom: 1px solid #E2D8C6 !important; background: transparent !important;
  text-align: left; min-height: 52px; }
#px-examples .gallery-item:hover { color: #C02E15; }

.px-model { box-shadow: 0 0 0 100vmax #F3EBDB; clip-path: inset(0 -100vmax); background: #F3EBDB; margin-top: 88px; padding: 72px 0 80px; }
.px-sub { font-size: 19px; color: #4B453E; margin: 16px 0 0; max-width: 38em; }
.px-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.px-metric { background: #fff; border: 1.5px solid #161412; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.px-big { font-size: 84px; font-weight: 800; line-height: .9; letter-spacing: -.04em; }
.px-mlabel { font-size: 17px; font-weight: 700; margin: 0; }
.px-msrc { margin: -8px 0 0; }
.px-bars { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.px-bar { display: grid; grid-template-columns: 58px minmax(0, 240px) auto; gap: 12px; align-items: center;
  font-family: "IBM Plex Mono", monospace; font-size: 12.5px; color: #4B453E; }
.px-pbar { height: 14px; background: linear-gradient(#8F867A, #8F867A) 0 0 / calc(var(--n) * 12px) 100% no-repeat, #E6DCCB; PIXELS_BAR; }
.px-pbar.s2 { background: linear-gradient(90deg, #FFD23F, #FF8A1F 50%, #D9381E) 0 0 / calc(var(--n) * 12px) 100% no-repeat, #E6DCCB; }
.px-specs { display: flex; flex-direction: column; }
.px-spec { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px solid #E2D8C6; }
.px-spec:last-child { border-bottom: 0; }
.px-spec span { color: #4B453E; font-size: 15px; }
.px-spec b { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 15px; }
.px-cap { margin: 16px 0 0; }

.px-section { padding-top: 72px; }
.px-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 30px; }
.px-step { border-top: 1.5px solid #161412; padding-top: 18px; }
.px-num { display: flex; gap: 2px; margin-bottom: 18px; }
.px-num i { width: 14px; height: 14px; }
.px-step h3 { font-size: 21px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 8px; }
.px-step p { margin: 0; color: #4B453E; font-size: 16px; }
.px-note { margin-top: 56px; display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1.5px solid #161412;
  padding: 14px 18px; font-size: 15px; }
.px-note svg { flex: none; margin-top: 2px; color: #F2601C; }

.px-foot { box-shadow: 0 0 0 100vmax #161412; clip-path: inset(0 -100vmax); background: #161412; color: #FBF6EC; margin-top: 88px; }
.px-foot-in { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; padding: 48px 0 40px; }
.px-foot img { width: min(100%, 360px); height: auto; display: block; }
.px-foot nav { display: flex; gap: 24px; flex-wrap: wrap; font-size: 15px; }
.px-foot a { color: #FBF6EC; }
.px-foot a:hover { color: #FFB020; }

@media (max-width: 860px) {
  .gradio-container { padding: 0 16px !important; }
  .px-hero, .px-metrics, .px-steps { grid-template-columns: minmax(0, 1fr); }
  .px-work { flex-direction: column; }
  .px-panel + .px-panel { border-left: 0; border-top: 1.5px solid #161412; }
  .px-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-beam label { font-size: 13.5px !important; }
  .px-panel { padding: 16px !important; }
  .px-poster { padding: 24px 24px 0; }
  .px-stair.small { margin: 0 -24px; }
  .px-stair, .px-foot .px-stair { background-size: 60px 18px, 120px 18px, 180px 18px, 240px 18px, 300px 18px, 100% 18px; }
}
""".replace("STAIR_BIG", STAIR.format("200px", "400px", "600px", "800px", "1000px")) \
   .replace("STAIR_SMALL", STAIR.format("80px", "160px", "240px", "320px", "100%")) \
   .replace("STAIR_FOOT", STAIR.format("200px", "400px", "600px", "800px", "100%")) \
   .replace("PIXELS_BIG", PIXELS.format(18, 20)).replace("PIXELS_BAR", PIXELS.format(10, 12))

HEAD = ('<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>'
        '<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900'
        '&family=IBM+Plex+Mono:wght@400;500;600&display=swap">')

INK, SAND, PAPER, LINE = "#161412", "#FBF6EC", "#FFFFFF", "#E2D8C6"
THEME = gr.themes.Base(
    primary_hue=gr.themes.Color("#FFF8E0", "#FFEFB3", "#FFE27A", "#FFD23F", "#FFB020", "#FF8A1F", "#F2601C", "#D9381E",
                                "#C02E15", "#8F2410", "#5E180B", name="glut"),
    neutral_hue=gr.themes.Color(SAND, "#F3EBDB", LINE, "#C9BFAE", "#8F867A", "#6F675D", "#4B453E", "#39342E",
                                "#26221E", "#1C1916", INK, name="sand"),
    radius_size=gr.themes.sizes.radius_none,
    font=["Archivo", "ui-sans-serif", "system-ui", "sans-serif"],
    font_mono=["IBM Plex Mono", "ui-monospace", "monospace"],
).set(
    body_background_fill=SAND, body_text_color=INK, body_text_color_subdued="#4B453E",
    background_fill_primary=PAPER, background_fill_secondary=SAND, border_color_primary=LINE, border_color_accent=INK,
    block_background_fill="transparent", block_border_width="0px", block_shadow="none", block_padding="0px",
    block_title_text_color="#4B453E", block_title_background_fill="transparent", block_label_background_fill="transparent",
    block_title_padding="0px", block_label_padding="0px", block_label_text_color="#4B453E", block_info_text_color="#6F675D",
    input_background_fill=SAND, input_border_color=LINE, input_border_color_focus=INK, input_shadow="none",
    input_shadow_focus="none", input_placeholder_color="#6F675D", input_radius="0px",
    color_accent="#F2601C", color_accent_soft="#FFEFB3", link_text_color=INK, link_text_color_hover="#C02E15",
    checkbox_label_background_fill="transparent", checkbox_label_background_fill_hover="#F3EBDB",
    checkbox_label_background_fill_selected=INK, checkbox_label_text_color=INK, checkbox_label_text_color_selected=SAND,
    checkbox_label_border_color="transparent", checkbox_label_border_color_selected=INK, checkbox_label_shadow="none",
    button_border_width="1.5px", button_large_radius="0px", button_medium_radius="0px", button_small_radius="0px",
    button_primary_shadow="none", button_secondary_shadow="none", button_large_text_weight="700", button_medium_text_weight="700",
    button_primary_background_fill=INK, button_primary_background_fill_hover="#F2601C", button_primary_text_color=SAND,
    button_primary_text_color_hover=INK, button_primary_border_color=INK, button_primary_border_color_hover="#F2601C",
    button_secondary_background_fill="transparent", button_secondary_background_fill_hover=INK,
    button_secondary_text_color=INK, button_secondary_text_color_hover=SAND, button_secondary_border_color=INK,
    button_secondary_border_color_hover=INK,
)
for k in [k for k in vars(THEME) if k.endswith("_dark")]:  # ein Look, auch wenn der Browser Dunkelmodus will
    setattr(THEME, k, getattr(THEME, k[:-5], getattr(THEME, k)))

EXAMPLES = [
    "ich weis nicht das es so ist. Morgen gehen wir in die stadt , und kaufen ein.",
    "Die Studenten haben in der Biliothek einen intressanten Vortrag über umweltschutz gehört.",
    "Wen das Wetter schön ist gehen wir mit unseren freunden spaziren.",
    "Gestern habe ich meinen Freund getroffen der schon seid Jahren in Berlin Wohnt. "
    "Er hat mir erzählt das er bald ein neues Auto kaufen will, weil sein altes nicht mehr Zuverlässig ist.",
]

with gr.Blocks(title="HORST – Deutsche Textkorrektur") as demo:
    gr.HTML(HERO, apply_default_css=False)
    with gr.Row(equal_height=True, elem_classes=["px-work"], elem_id="korrektur"):
        with gr.Column(scale=1, elem_classes=["px-panel"]):
            inp = gr.Textbox(lines=10, max_lines=20, label="Dein Text",
                             placeholder=f"Füge hier einen deutschen Text ein, bis zu {MAX_WORDS} Wörter …")
            counter = gr.HTML(counter_html(""))
            beam = gr.Radio(choices=[("Schnell", 1), ("Ausgewogen", 3), ("Sehr genau", 5)], value=1, label="Genauigkeit",
                            info="Höhere Genauigkeit braucht etwas mehr GPU-Zeit.", elem_classes=["px-beam"])
            with gr.Row(elem_classes=["px-btns"]):
                clear_btn = gr.Button("Leeren", variant="secondary", scale=1)
                run_btn = gr.Button("Korrigieren →", variant="primary", scale=2)
        with gr.Column(scale=1, elem_classes=["px-panel"]):
            stats = gr.HTML(result_head(), apply_default_css=False, elem_id="px-result")
            with gr.Tabs():
                with gr.Tab("Änderungen"):
                    diff = gr.HTML(EMPTY_DIFF)
                with gr.Tab("Korrigierter Text"):
                    out = gr.Textbox(lines=10, max_lines=20, label="Text zum Kopieren", interactive=False, buttons=["copy"])
    gr.Examples(examples=[[e] for e in EXAMPLES], inputs=[inp], label="Beispiele zum Ausprobieren", elem_id="px-examples")
    gr.HTML(INFO, apply_default_css=False)

    inp.change(counter_html, inp, counter, show_progress="hidden", api_name=False)
    run_btn.click(correct, [inp, beam], out, api_name="correct").success(show_diff, [inp, out], [diff, stats], api_name=False)
    clear_btn.click(clear, None, [inp, out, diff, stats, counter], api_name=False)

if __name__ == "__main__":
    demo.launch(theme=THEME, css=CSS, head=HEAD, favicon_path=str(HERE / "favicon.png"))