Update CrossTalk AI with translator-style visible output

app.py

@@ -261,170 +261,218 @@ def safe_search(query):
 
 
 
+
 custom_css = """
 .gradio-container {
-    background: #212121 !important;
-    color: #ECECEC !important;
+    background: #202124 !important;
+    color: #E8EAED !important;
     font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
 }
 
 #shell {
-    max-width: 980px;
+    max-width: 1120px;
     margin: 0 auto;
-    padding: 34px 18px 42px 18px;
+    padding: 28px 18px 44px 18px;
 }
 
 .topbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 26px;
-    color: #B4B4B4;
+    margin-bottom: 28px;
+    color: #BDC1C6;
     font-size: 14px;
 }
 
 .brand {
-    font-weight: 700;
-    color: #ECECEC;
+    font-size: 20px;
+    font-weight: 750;
+    color: #F1F3F4;
 }
 
 .model-badge {
-    background: #2F2F2F;
-    border: 1px solid #3A3A3A;
-    color: #CFCFCF;
-    padding: 7px 11px;
+    background: #303134;
+    border: 1px solid #3C4043;
+    color: #BDC1C6;
+    padding: 7px 12px;
     border-radius: 999px;
     font-size: 12px;
+    font-weight: 650;
 }
 
 .hero {
     text-align: center;
-    padding: 22px 10px 20px 10px;
-    margin-bottom: 18px;
+    margin-bottom: 24px;
 }
 
 .title {
-    font-size: 38px;
-    line-height: 1.12;
-    font-weight: 750;
+    font-size: 34px;
+    font-weight: 760;
     letter-spacing: -0.035em;
     margin: 0;
-    color: #F5F5F5;
+    color: #F1F3F4;
 }
 
 .subtitle {
-    max-width: 760px;
-    margin: 14px auto 0 auto;
-    color: #B4B4B4;
+    max-width: 800px;
+    margin: 12px auto 0 auto;
+    color: #BDC1C6;
     font-size: 15px;
     line-height: 1.65;
 }
 
-.capabilities {
+.search-box {
+    background: #303134 !important;
+    border: 1px solid #3C4043 !important;
+    border-radius: 22px !important;
+    padding: 16px !important;
+    margin-bottom: 20px !important;
+    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
+}
+
+textarea, input {
+    background: #303134 !important;
+    color: #F1F3F4 !important;
+    border: 1px solid #5F6368 !important;
+    border-radius: 16px !important;
+    font-size: 17px !important;
+}
+
+textarea:focus, input:focus {
+    border-color: #8AB4F8 !important;
+    box-shadow: 0 0 0 2px rgba(138,180,248,0.18) !important;
+}
+
+button.search-button {
+    background: #8AB4F8 !important;
+    color: #202124 !important;
+    border: 1px solid #8AB4F8 !important;
+    border-radius: 14px !important;
+    font-weight: 850 !important;
+    min-height: 46px !important;
+}
+
+button.clear-button {
+    background: #303134 !important;
+    color: #E8EAED !important;
+    border: 1px solid #5F6368 !important;
+    border-radius: 14px !important;
+    font-weight: 750 !important;
+    min-height: 46px !important;
+}
+
+.translator-grid {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 12px;
-    margin: 26px 0 22px 0;
+    grid-template-columns: 1fr 1fr;
+    gap: 14px;
+    margin-bottom: 18px;
 }
 
-.cap-card {
-    background: #2A2A2A;
-    border: 1px solid #3A3A3A;
-    border-radius: 16px;
-    padding: 14px 15px;
-    color: #D7D7D7;
+.translator-card {
+    background: #303134;
+    border: 1px solid #3C4043;
+    border-radius: 22px;
+    min-height: 230px;
+    padding: 20px;
+    box-shadow: 0 12px 28px rgba(0,0,0,0.16);
+}
+
+.card-label {
+    color: #8AB4F8;
+    font-weight: 750;
     font-size: 13px;
-    line-height: 1.45;
+    margin-bottom: 18px;
 }
 
-.cap-card strong {
-    display: block;
-    color: #FFFFFF;
-    font-size: 14px;
-    margin-bottom: 4px;
+.source-word {
+    font-size: 34px;
+    line-height: 1.25;
+    font-weight: 760;
+    color: #F1F3F4;
+    word-break: break-word;
 }
 
-.search-panel {
-    background: #2F2F2F !important;
-    border: 1px solid #454545 !important;
-    border-radius: 24px !important;
-    padding: 14px 16px 16px 16px !important;
-    box-shadow: 0 14px 38px rgba(0,0,0,0.20);
-    margin-bottom: 18px !important;
+.output-main {
+    font-size: 36px;
+    line-height: 1.22;
+    font-weight: 780;
+    color: #FFFFFF;
+    word-break: break-word;
 }
 
-textarea, input {
-    background: #2F2F2F !important;
-    color: #FFFFFF !important;
-    border: 1px solid #4A4A4A !important;
-    border-radius: 18px !important;
-    font-size: 16px !important;
+.output-bangla {
+    margin-top: 14px;
+    font-size: 24px;
+    line-height: 1.35;
+    font-weight: 650;
+    color: #E8EAED;
+    word-break: break-word;
 }
 
-textarea:focus, input:focus {
-    border-color: #6B7280 !important;
-    box-shadow: 0 0 0 2px rgba(255,255,255,0.08) !important;
+.meta-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 18px;
 }
 
-button.send-button {
-    background: #ECECEC !important;
-    color: #111111 !important;
-    border: 1px solid #ECECEC !important;
-    border-radius: 14px !important;
-    font-weight: 800 !important;
-    min-height: 44px !important;
+.meta-pill {
+    background: #202124;
+    border: 1px solid #4B4F52;
+    color: #BDC1C6;
+    padding: 6px 10px;
+    border-radius: 999px;
+    font-size: 12px;
+    font-weight: 650;
 }
 
-button.send-button:hover {
-    background: #FFFFFF !important;
+.status-good {
+    color: #81C995;
 }
 
-button.clear-button {
-    background: #262626 !important;
-    color: #D1D5DB !important;
-    border: 1px solid #414141 !important;
-    border-radius: 14px !important;
-    font-weight: 700 !important;
-    min-height: 44px !important;
+.status-warn {
+    color: #FDD663;
 }
 
-.output-panel {
-    background: transparent !important;
-    border: none !important;
-    padding: 0 !important;
-    margin-top: 8px !important;
+.status-bad {
+    color: #F28B82;
 }
 
-.answer-card {
-    background: #2A2A2A;
-    border: 1px solid #3D3D3D;
+.message-card {
+    background: #303134;
+    border: 1px solid #3C4043;
     border-radius: 18px;
-    padding: 18px 20px;
-    margin-bottom: 14px;
-    color: #ECECEC;
-    line-height: 1.65;
+    padding: 15px 18px;
+    margin-bottom: 16px;
+    color: #E8EAED;
+    line-height: 1.6;
 }
 
-.answer-title {
+.message-title {
     font-weight: 800;
-    color: #FFFFFF;
-    margin-bottom: 8px;
+    margin-bottom: 4px;
 }
 
-.answer-note {
-    color: #C7C7C7;
+.message-subtitle {
+    color: #BDC1C6;
     font-size: 14px;
 }
 
+.details-title {
+    color: #F1F3F4;
+    font-weight: 750;
+    margin: 18px 0 8px 0;
+}
+
 .dataframe {
     border-radius: 16px !important;
     overflow: hidden !important;
-    border: 1px solid #3D3D3D !important;
+    border: 1px solid #3C4043 !important;
 }
 
 .footer {
     text-align: center;
-    color: #9CA3AF;
+    color: #BDC1C6;
     font-size: 12.5px;
     line-height: 1.6;
     margin-top: 24px;
@@ -436,9 +484,9 @@ button.clear-button {
 
 #examples-block button {
     border-radius: 999px !important;
-    background: #2A2A2A !important;
-    border: 1px solid #3D3D3D !important;
-    color: #D1D5DB !important;
+    background: #303134 !important;
+    border: 1px solid #5F6368 !important;
+    color: #E8EAED !important;
 }
 
 .block {
@@ -446,20 +494,24 @@ button.clear-button {
 }
 
 label {
-    color: #CFCFCF !important;
+    color: #BDC1C6 !important;
 }
 
 @media (max-width: 900px) {
-    #shell {
-        padding: 24px 14px 34px 14px;
+    .translator-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .source-word {
+        font-size: 28px;
     }
 
-    .title {
+    .output-main {
         font-size: 30px;
     }
 
-    .capabilities {
-        grid-template-columns: 1fr;
+    .output-bangla {
+        font-size: 21px;
     }
 }
 """
@@ -467,54 +519,180 @@ label {
 
 EMPTY_RESULTS = pd.DataFrame(
     columns=[
-        "query",
+        "rank",
+        "language",
+        "source_text",
+        "english_meaning",
+        "bangla_meaning",
+        "confidence",
         "score",
         "method",
-        "confidence",
+        "note"
+    ]
+)
+
+
+def html_escape(x):
+    import html
+    return html.escape("" if x is None else str(x))
+
+
+def simplify_results_table(df):
+    if df is None or len(df) == 0:
+        return EMPTY_RESULTS
+
+    temp = df.copy()
+
+    keep_cols = [
         "language",
         "source_text",
         "english_meaning",
         "bangla_meaning",
-        "part_of_speech",
+        "confidence",
+        "score",
+        "method",
         "note"
     ]
-)
+
+    for col in keep_cols:
+        if col not in temp.columns:
+            temp[col] = ""
+
+    temp = temp[keep_cols].copy()
+    temp.insert(0, "rank", range(1, len(temp) + 1))
+
+    return temp
 
 
-def clean_markdown_summary(x):
-    x = "" if x is None else str(x)
-    x = x.replace('<div class="result-note">', "")
-    x = x.replace("</div>", "")
-    return x.strip()
+def translator_style_search(query):
+    status, summary, df = safe_search(query)
 
+    query = clean_text(query)
+
+    if df is None or len(df) == 0:
+        left_html = f"""
+        <div class="translator-card">
+            <div class="card-label">Input</div>
+            <div class="source-word">{html_escape(query if query else "No input")}</div>
+        </div>
+        """
+
+        right_html = f"""
+        <div class="translator-card">
+            <div class="card-label">Output</div>
+            <div class="output-main status-bad">No verified match</div>
+            <div class="output-bangla">No translation is claimed.</div>
+            <div class="meta-row">
+                <div class="meta-pill">Safe output</div>
+                <div class="meta-pill">No verified dictionary result</div>
+            </div>
+        </div>
+        """
+
+        message_html = f"""
+        <div class="message-card">
+            <div class="message-title status-bad">{html_escape(status)}</div>
+            <div class="message-subtitle">{html_escape(summary)}</div>
+        </div>
+        """
+
+        return left_html + right_html, message_html, EMPTY_RESULTS
+
+    main = df.iloc[0]
+
+    language = html_escape(main.get("language", ""))
+    source_text = html_escape(main.get("source_text", query))
+    english_meaning = html_escape(main.get("english_meaning", ""))
+    bangla_meaning = html_escape(main.get("bangla_meaning", ""))
+    confidence = html_escape(main.get("confidence", ""))
+    method = html_escape(main.get("method", ""))
+    score = main.get("score", "")
+
+    try:
+        score_text = f"{float(score):.3f}"
+    except Exception:
+        score_text = html_escape(score)
+
+    if "Verified" in str(status) or "verified" in str(status):
+        status_class = "status-good"
+        output_type = "Verified dictionary output"
+    elif "Low-confidence" in str(status) or "low" in str(status).lower():
+        status_class = "status-warn"
+        output_type = "Semantic candidate only"
+    else:
+        status_class = "status-warn"
+        output_type = "Candidate output"
+
+    display_english = english_meaning if english_meaning else "No English meaning available"
+    display_bangla = bangla_meaning if bangla_meaning else "No Bangla meaning available"
+
+    left_html = f"""
+    <div class="translator-card">
+        <div class="card-label">Input word</div>
+        <div class="source-word">{source_text}</div>
+        <div class="meta-row">
+            <div class="meta-pill">Query: {html_escape(query)}</div>
+        </div>
+    </div>
+    """
 
-def chat_style_search(query):
-    status, summary, result = safe_search(query)
-    summary = clean_markdown_summary(summary)
+    right_html = f"""
+    <div class="translator-card">
+        <div class="card-label">Retrieved meaning</div>
+        <div class="output-main">{display_english}</div>
+        <div class="output-bangla">{display_bangla}</div>
+        <div class="meta-row">
+            <div class="meta-pill">Language: {language}</div>
+            <div class="meta-pill">{output_type}</div>
+            <div class="meta-pill">Confidence: {confidence}</div>
+            <div class="meta-pill">Score: {score_text}</div>
+        </div>
+    </div>
+    """
 
-    answer_html = f"""
-    <div class="answer-card">
-        <div class="answer-title">{status}</div>
-        <div class="answer-note">{summary}</div>
+    message_html = f"""
+    <div class="message-card">
+        <div class="message-title {status_class}">{html_escape(status)}</div>
+        <div class="message-subtitle">{html_escape(summary)}</div>
     </div>
     """
 
-    return answer_html, result
+    table = simplify_results_table(df)
+
+    return left_html + right_html, message_html, table
 
 
 def clear_interface():
-    return "", """
-    <div class="answer-card">
-        <div class="answer-title">Ready.</div>
-        <div class="answer-note">Enter a source word to retrieve verified dictionary matches or semantic candidates.</div>
+    empty_translator = """
+    <div class="translator-card">
+        <div class="card-label">Input word</div>
+        <div class="source-word">Enter a word</div>
+    </div>
+    <div class="translator-card">
+        <div class="card-label">Retrieved meaning</div>
+        <div class="output-main">Translation support output</div>
+        <div class="output-bangla">Results will appear here.</div>
+        <div class="meta-row">
+            <div class="meta-pill">Verified lookup first</div>
+            <div class="meta-pill">Semantic fallback if needed</div>
+        </div>
+    </div>
+    """
+
+    message_html = """
+    <div class="message-card">
+        <div class="message-title">Ready.</div>
+        <div class="message-subtitle">Enter a source word and click Search.</div>
     </div>
-    """, EMPTY_RESULTS
+    """
+
+    return "", empty_translator, message_html, EMPTY_RESULTS
 
 
 with gr.Blocks(
     css=custom_css,
     theme=gr.themes.Base(
-        primary_hue="slate",
+        primary_hue="blue",
         secondary_hue="slate",
         neutral_hue="zinc"
     )
@@ -529,41 +707,26 @@ with gr.Blocks(
             </div>
 
             <div class="hero">
-                <h1 class="title">What ethnic word would you like to search?</h1>
+                <h1 class="title">Low-resource ethnic language retrieval</h1>
                 <div class="subtitle">
-                    CrossTalk AI identifies and retrieves meanings from low-resource ethnic language dictionaries using verified lexical matching,
-                    fine-tuned E5 semantic retrieval, FAISS vector search, and confidence-aware output control.
-                </div>
-            </div>
-
-            <div class="capabilities">
-                <div class="cap-card">
-                    <strong>Verified lookup</strong>
-                    Exact and base-form dictionary matches are returned first.
-                </div>
-                <div class="cap-card">
-                    <strong>Semantic fallback</strong>
-                    Fine-tuned E5 suggests candidates when verified matches are unavailable.
-                </div>
-                <div class="cap-card">
-                    <strong>Safe output</strong>
-                    Low-confidence semantic results are not claimed as confirmed translations.
+                    Enter a source word to retrieve verified dictionary meanings first.
+                    If no verified match is found, the fine-tuned E5 semantic retriever suggests possible candidates safely.
                 </div>
             </div>
             """
         )
 
-        with gr.Column(elem_classes=["search-panel"]):
+        with gr.Column(elem_classes=["search-box"]):
             query = gr.Textbox(
                 label="Source word",
-                placeholder="Message CrossTalk AI...",
+                placeholder="Type a word, for example: kəkhyáŋ, Hula, Aina, aam, bajaoo",
                 lines=1,
                 show_label=False
             )
 
             with gr.Row():
                 clear_btn = gr.Button("Clear", elem_classes=["clear-button"])
-                submit_btn = gr.Button("Search", elem_classes=["send-button"])
+                submit_btn = gr.Button("Search", elem_classes=["search-button"])
 
             gr.Examples(
                 examples=[
@@ -579,48 +742,69 @@ with gr.Blocks(
                 elem_id="examples-block"
             )
 
-        with gr.Column(elem_classes=["output-panel"]):
-            answer = gr.HTML(
-                """
-                <div class="answer-card">
-                    <div class="answer-title">Ready.</div>
-                    <div class="answer-note">Enter a source word to retrieve verified dictionary matches or semantic candidates.</div>
+        translator_view = gr.HTML(
+            """
+            <div class="translator-card">
+                <div class="card-label">Input word</div>
+                <div class="source-word">Enter a word</div>
+            </div>
+            <div class="translator-card">
+                <div class="card-label">Retrieved meaning</div>
+                <div class="output-main">Translation support output</div>
+                <div class="output-bangla">Results will appear here.</div>
+                <div class="meta-row">
+                    <div class="meta-pill">Verified lookup first</div>
+                    <div class="meta-pill">Semantic fallback if needed</div>
                 </div>
-                """
-            )
+            </div>
+            """,
+            elem_classes=["translator-grid"]
+        )
 
-            results = gr.Dataframe(
-                label="Retrieved results",
-                value=EMPTY_RESULTS,
-                interactive=False,
-                wrap=True,
-                max_height=470
-            )
+        message = gr.HTML(
+            """
+            <div class="message-card">
+                <div class="message-title">Ready.</div>
+                <div class="message-subtitle">Enter a source word and click Search.</div>
+            </div>
+            """
+        )
+
+        gr.HTML('<div class="details-title">Detailed candidates</div>')
+
+        results = gr.Dataframe(
+            label="",
+            value=EMPTY_RESULTS,
+            interactive=False,
+            wrap=True,
+            max_height=430
+        )
 
         gr.HTML(
             """
             <div class="footer">
-                Exact/base-form matches are verified dictionary outputs. Fine-tuned semantic fallback results are candidate suggestions only, not confirmed translations.
+                Exact/base-form matches are verified dictionary outputs. Semantic fallback results are candidate suggestions only, not confirmed translations.
             </div>
             """
+ 
         )
 
     submit_btn.click(
-        fn=chat_style_search,
+        fn=translator_style_search,
         inputs=query,
-        outputs=[answer, results]
+        outputs=[translator_view, message, results]
     )
 
     query.submit(
-        fn=chat_style_search,
+        fn=translator_style_search,
         inputs=query,
-        outputs=[answer, results]
+        outputs=[translator_view, message, results]
     )
 
     clear_btn.click(
         fn=clear_interface,
         inputs=None,
-        outputs=[query, answer, results]
+        outputs=[query, translator_view, message, results]
     )