# NOTE:
# This is a starter layout for the redesigned MTQE demo.
# Copy your existing evaluate() function and LANGUAGES dictionary into this file.

import os
import requests
import gradio as gr

API_URL = "https://api.pangeanic.com/mtqe/v2/score"
API_KEY = os.environ.get("MTQE_API_Key", "")

LANGUAGES = {
    "English": "en-us",
    "Spanish": "es-es",
    "French": "fr-fr",
    "German": "de-de",
    "Italian": "it-it",
    "Portuguese": "pt-pt",
    "Russian": "ru-ru",
    "Chinese": "zh-cn",
    "Japanese": "ja-jp",
    "Korean": "ko-kr",
    "Arabic": "ar-001",
    "Thai": "th-th",
    "Vietnamese": "vi-vn",
    "Lithuanian": "lt-lt",
    "Swedish": "sv-se",
}

def score_color(score):
    if score >= 90:
        return "#22C55E"      # Green
    elif score >= 75:
        return "#84CC16"      # Lime
    elif score >= 60:
        return "#FACC15"      # Yellow
    elif score >= 40:
        return "#FB923C"      # Orange
    else:
        return "#EF4444"      # Red

def evaluate(source_language, target_language, source, target):
    payload = {
        "source": source,
        "target": target,
        "source_language": LANGUAGES[source_language],
        "target_language": LANGUAGES[target_language],
        "ape": False,
    }

    headers = {
        "accept": "application/json",
        "Content-Type": "application/json",
        "X-API-Key": API_KEY,
    }

    r = requests.post(API_URL, json=payload, headers=headers, timeout=60)
    r.raise_for_status()
    j = r.json()

    score = j["score"]
    explanation = j["explanation"]
    
    color = score_color(score)
    
    html = f"""
    <div style="
    border:1px solid #ececec;
    border-radius:14px;
    padding:18px 20px;
    background:white;
    display:flex;
    align-items:flex-start;
    gap:18px;
    ">
    
    <div style="
    min-width:56px;
    height:36px;
    border-radius:10px;
    background:{color}20;
    color:{color};
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:20px;
    ">
    {round(score)}
    </div>
    
    <div style="
    border-left:2px solid #d6d6d6;
    padding-left:18px;
    flex:1;
    font-size:16px;
    line-height:1.7;
    color:#374151;
    ">
    
    {explanation if explanation else "<span style='color:#16A34A;'>No issues detected.</span>"}
    
    </div>
    
    </div>
    """
    
    return html


theme = gr.themes.Soft(primary_hue="orange", radius_size="lg")

with gr.Blocks(title="Pangeanic MTQE") as demo:

    gr.HTML("""
<div style="
    background: linear-gradient(180deg,#ffffff,#fafafa);
    border:1px solid #ececec;
    border-radius:20px;
    padding:8px 12px;
    margin-bottom:12px;
">

<div style="display:flex;justify-content:space-between;align-items:center;">

<div>

<img src="https://blog.pangeanic.com/hubfs/assets/logo-pangeanic.png"
     style="height:42px;margin-bottom:18px;">

<div style="
font-size:42px;
font-weight:700;
color:#F58220;
line-height:1.1;
margin-bottom:8px;
">
MTQE v2
</div>

<div style="
font-size:22px;
font-weight:500;
color:#25324B;
margin-bottom:24px;
">
Reference-free Machine Translation Quality Estimation
</div>

<div style="
max-width:760px;
font-size:17px;
line-height:1.8;
color:#5A6473;
">
</div>

</div>

</div>

</div>
""")

    with gr.Group():

        with gr.Row():
            source_language = gr.Dropdown(
                choices=list(LANGUAGES.keys()),
                value="English",
                label="Source Language",
            )

            target_language = gr.Dropdown(
                choices=list(LANGUAGES.keys()),
                value="Spanish",
                label="Target Language",
            )

        with gr.Row():

            source = gr.Textbox(
                label="Source Text",
                lines=3,
                placeholder="Enter the original text...",
                scale=1,
            )

            target = gr.Textbox(
                label="Translation",
                lines=3,
                placeholder="Enter the translated text...",
                scale=1,
            )

        with gr.Row():
            evaluate_btn = gr.Button(
                "Evaluate Translation",
                variant="primary",
                scale=3,
            )

            clear = gr.ClearButton(scale=1)

    gr.HTML("""
    <h2 style="margin:15px 0 10px 0;">Results</h2>
    """)

    result = gr.HTML(label="Assessment")

    evaluate_btn.click(
        evaluate,
        inputs=[
            source_language,
            target_language,
            source,
            target,
        ],
        outputs=result,
    )

    clear.add(
        [source, target, result]
    )

    gr.HTML("""
<div style="max-width:1100px;margin:20px auto;font-family:Inter,Segoe UI,sans-serif;">

<!-- ======================================================= -->
<!-- Beyond the Demo -->
<!-- ======================================================= -->

<div style="
background:#ffffff;
border:1px solid #e8e8e8;
border-radius:18px;
padding:36px;
box-shadow:0 4px 16px rgba(0,0,0,.05);
margin-bottom:32px;
">

<h2 style="
margin-top:0;
color:#F58220;
font-size:32px;
font-weight:700;
">
Beyond the Demo
</h2>

<p style="
font-size:17px;
line-height:1.8;
color:#555;
margin-bottom:28px;
">

This interactive demo showcases the core capabilities of
Pangeanic MTQE v2 by estimating translation quality from a source
sentence and its translation without requiring reference translations.

The complete enterprise platform extends these capabilities with advanced
features designed for production localization workflows.

</p>

<div style="
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:18px;
">

<div style="border:1px solid #eee;border-radius:14px;padding:18px;">
<h3 style="color:#F58220;margin-top:0;">Translation Memory</h3>
<p>Incorporate Translation Memory matches into quality estimation.</p>
</div>

<div style="border:1px solid #eee;border-radius:14px;padding:18px;">
<h3 style="color:#F58220;margin-top:0;">Glossary Validation</h3>
<p>Detect terminology inconsistencies and enforce approved terminology.</p>
</div>

<div style="border:1px solid #eee;border-radius:14px;padding:18px;">
<h3 style="color:#F58220;margin-top:0;">Automatic Post-Editing</h3>
<p>Automatically improve low-quality translations before delivery.</p>
</div>

<div style="border:1px solid #eee;border-radius:14px;padding:18px;">
<h3 style="color:#F58220;margin-top:0;">Human Post-Editing</h3>
<p>Prioritize segments requiring human review to optimize post-editing effort.</p>
</div>

<div style="border:1px solid #eee;border-radius:14px;padding:18px;">
<h3 style="color:#F58220;margin-top:0;">REST API</h3>
<p>Integrate MTQE directly into CAT tools and enterprise localization platforms.</p>
</div>

<div style="border:1px solid #eee;border-radius:14px;padding:18px;">
<h3 style="color:#F58220;margin-top:0;">70+ Languages</h3>
<p>Supports more than 70 languages and regional variants for multilingual enterprise workflows.</p>
</div>

</div>

</div>

<!-- ======================================================= -->
<!-- Benchmark -->
<!-- ======================================================= -->

<div style="
background:#ffffff;
border:1px solid #e8e8e8;
border-radius:18px;
padding:36px;
box-shadow:0 4px 16px rgba(0,0,0,.05);
margin-bottom:32px;
">

<h2 style="margin-top:0;color:#F58220;font-size:32px;">
Benchmark Highlights
</h2>

<div style="
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:20px;
margin:30px 0;
text-align:center;
">

<div>
<div style="font-size:42px;font-weight:700;color:#F58220;">98.9%</div>
<div>Correct rejection accuracy</div>
</div>

<div>
<div style="font-size:42px;font-weight:700;color:#F58220;">6006</div>
<div>Incorrect segments</div>
</div>

<div>
<div style="font-size:42px;font-weight:700;color:#F58220;">16</div>
<div>Language pairs</div>
</div>

<div>
<div style="font-size:42px;font-weight:700;color:#F58220;">0.49s</div>
<div>Average latency</div>
</div>

</div>

<h3 style="color:#F58220;">Benchmark Methodology</h3>

<p style="line-height:1.8;color:#555;">

Pangeanic MTQE v2 was validated using a representative subset of the
<b><a href="https://huggingface.co/datasets/nikitam/ACES" target="_blank">
ACES multilingual benchmark</a></b>,
covering <b>6,006 deliberately incorrect translation segments</b>,
<b>16 language pairs</b>, and
<b>68 translation error categories</b>.

</p>

<ol style="line-height:1.8;color:#555;">

<li>Machine translations were generated across sixteen multilingual language pairs.</li>

<li>Thousands of deliberately incorrect translation segments were collected to simulate realistic production errors.</li>

<li>MTQE evaluated each segment using only the source sentence and translated output, without requiring reference translations.</li>

<li>Predictions were compared against manually validated quality labels.</li>

<li>Additional experiments evaluated Automatic Post-Editing recovery performance.</li>

</ol>

<p>

<a href="https://pangeanic.com/hubfs/MTQE_Benchmark_Whitepaper.pdf" target="_blank">
Read the Benchmark Whitepaper
</a>

</p>

</div>

<!-- ======================================================= -->
<!-- Contact -->
<!-- ======================================================= -->

<div style="
background:#F58220;
border-radius:20px;
padding:40px;
color:white;
text-align:center;
">

<h2 style="margin-top:0;color:white;">
Interested in the Full MTQE Platform?
</h2>

<p style="
font-size:17px;
line-height:1.8;
max-width:850px;
margin:auto;
margin-bottom:30px;
color:#25324B;
">

The complete enterprise platform includes Translation Memory support,
Glossary validation, Automatic and Human Post-Editing workflows,
batch processing, REST API integration, and multilingual support for
more than 70 languages and dialects.

</p>

<div style="display:flex;justify-content:center;gap:20px;flex-wrap:wrap;">

<a href="https://pangeanic.com/hubfs/MTQE_Benchmark_Whitepaper.pdf"
target="_blank"
style="background:white;color:#F58220;padding:14px 24px;border-radius:10px;text-decoration:none;font-weight:600;">
Whitepaper
</a>

<a href="https://docs.pangeanic.com/"
target="_blank"
style="background:white;color:#F58220;padding:14px 24px;border-radius:10px;text-decoration:none;font-weight:600;">
API Docs
</a>

<a href="https://www.pangeanic.com/"
target="_blank"
style="background:white;color:#F58220;padding:14px 24px;border-radius:10px;text-decoration:none;font-weight:600;">
Website
</a>

<a href="https://www.pangeanic.com/contact-us/"
target="_blank"
style="background:white;color:#F58220;padding:14px 24px;border-radius:10px;text-decoration:none;font-weight:600;">
Contact Us
</a>

</div>

</div>

</div>
""")

demo.launch(theme=theme, css="style.css")