Update CrossTalk AI with ChatGPT-style UX

app.py

@@ -260,359 +260,206 @@ def safe_search(query):
 
 
 
-custom_css = """
-:root {
-    --bg: #0A0E17;
-    --panel: #10151F;
-    --panel-border: #1E2635;
-    --panel-border-strong: #2A3549;
-    --text-primary: #F8FAFC;
-    --text-secondary: #94A3B8;
-    --text-tertiary: #64748B;
-    --accent-blue: #3B82F6;
-    --accent-blue-hover: #2563EB;
-    --accent-green: #22C55E;
-    --input-bg: #0B1120;
-    --radius-lg: 16px;
-    --radius-md: 12px;
-    --radius-sm: 8px;
-    --space-1: 8px;
-    --space-2: 12px;
-    --space-3: 16px;
-    --space-4: 24px;
-    --space-5: 32px;
-}
-
-* {
-    box-sizing: border-box;
-}
 
+custom_css = """
 .gradio-container {
-    background: var(--bg) !important;
-    color: var(--text-primary) !important;
-    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
-}
-
-/* Gradio wraps every component in its own bordered/background "block".
-   We already draw our own card + input borders, so strip the default
-   wrapper chrome everywhere to avoid double-boxing labels/inputs. */
-.gradio-container .block,
-.gradio-container .form {
-    background: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-    padding: 0 !important;
+    background: #212121 !important;
+    color: #ECECEC !important;
+    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
 }
 
 #shell {
-    max-width: 880px;
+    max-width: 980px;
     margin: 0 auto;
-    padding: var(--space-5) var(--space-3) 48px var(--space-3);
+    padding: 34px 18px 42px 18px;
 }
 
-/* ---------- HERO ---------- */
+.topbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 26px;
+    color: #B4B4B4;
+    font-size: 14px;
+}
 
-.hero {
-    background: linear-gradient(180deg, #131A29 0%, #10151F 100%);
-    border: 1px solid var(--panel-border);
-    border-radius: var(--radius-lg);
-    padding: 32px 34px;
-    margin-bottom: var(--space-4);
-    box-shadow: 0 20px 50px rgba(0,0,0,0.30);
+.brand {
+    font-weight: 700;
+    color: #ECECEC;
 }
 
-.badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 12px;
+.model-badge {
+    background: #2F2F2F;
+    border: 1px solid #3A3A3A;
+    color: #CFCFCF;
+    padding: 7px 11px;
     border-radius: 999px;
-    background: rgba(59,130,246,0.10);
-    border: 1px solid rgba(59,130,246,0.35);
-    color: #93C5FD;
-    font-weight: 650;
     font-size: 12px;
-    letter-spacing: 0.02em;
-    text-transform: uppercase;
-    margin-bottom: var(--space-3);
+}
+
+.hero {
+    text-align: center;
+    padding: 22px 10px 20px 10px;
+    margin-bottom: 18px;
 }
 
 .title {
-    font-size: 36px;
-    line-height: 1.15;
-    font-weight: 800;
-    letter-spacing: -0.03em;
-    margin: 0 0 12px 0;
-    color: #FFFFFF;
+    font-size: 38px;
+    line-height: 1.12;
+    font-weight: 750;
+    letter-spacing: -0.035em;
+    margin: 0;
+    color: #F5F5F5;
 }
 
 .subtitle {
-    color: var(--text-secondary);
+    max-width: 760px;
+    margin: 14px auto 0 auto;
+    color: #B4B4B4;
     font-size: 15px;
     line-height: 1.65;
-    max-width: 640px;
-    margin: 0 0 var(--space-4) 0;
-}
-
-.info-strip {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-}
-
-.info-pill {
-    padding: 8px 13px;
-    border-radius: var(--radius-sm);
-    background: var(--input-bg);
-    border: 1px solid var(--panel-border);
-    color: #CBD5E1;
-    font-size: 12.5px;
-    font-weight: 600;
-}
-
-/* ---------- CARDS ---------- */
-
-.main-card {
-    background: var(--panel) !important;
-    border: 1px solid var(--panel-border) !important;
-    border-radius: var(--radius-lg) !important;
-    padding: 28px !important;
-    box-shadow: 0 16px 40px rgba(0,0,0,0.24);
-    margin-bottom: var(--space-3) !important;
-    position: relative;
-    overflow: hidden;
-}
-
-.main-card::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 3px;
 }
 
-.search-card::before {
-    background: var(--accent-blue);
+.capabilities {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+    margin: 26px 0 22px 0;
 }
 
-.output-card::before {
-    background: var(--accent-green);
+.cap-card {
+    background: #2A2A2A;
+    border: 1px solid #3A3A3A;
+    border-radius: 16px;
+    padding: 14px 15px;
+    color: #D7D7D7;
+    font-size: 13px;
+    line-height: 1.45;
 }
 
-.section-header {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
+.cap-card strong {
+    display: block;
+    color: #FFFFFF;
+    font-size: 14px;
     margin-bottom: 4px;
 }
 
-.section-title {
-    color: var(--text-primary);
-    font-size: 19px;
-    font-weight: 750;
-    letter-spacing: -0.01em;
+.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;
 }
 
-.section-subtitle {
-    color: var(--text-secondary);
-    font-size: 13.5px;
-    line-height: 1.6;
-    margin-bottom: var(--space-3);
-}
-
-/* ---------- FORM CONTROLS ---------- */
-
-label span {
-    color: var(--text-secondary) !important;
-    font-size: 12.5px !important;
-    font-weight: 650 !important;
-    text-transform: uppercase;
-    letter-spacing: 0.03em;
-    display: inline-block;
-    margin-bottom: 6px;
-}
-
-textarea, input[type="text"] {
-    background: var(--input-bg) !important;
+textarea, input {
+    background: #2F2F2F !important;
     color: #FFFFFF !important;
-    border: 1px solid var(--panel-border-strong) !important;
-    border-radius: var(--radius-md) !important;
-    font-size: 15px !important;
-    padding: 12px 14px !important;
-    transition: border-color 0.15s ease, box-shadow 0.15s ease;
-}
-
-textarea:focus, input[type="text"]:focus {
-    border-color: var(--accent-blue) !important;
-    box-shadow: 0 0 0 3px rgba(59,130,246,0.16) !important;
-    outline: none !important;
+    border: 1px solid #4A4A4A !important;
+    border-radius: 18px !important;
+    font-size: 16px !important;
 }
 
-textarea::placeholder, input::placeholder {
-    color: var(--text-tertiary) !important;
+textarea:focus, input:focus {
+    border-color: #6B7280 !important;
+    box-shadow: 0 0 0 2px rgba(255,255,255,0.08) !important;
 }
 
-.input-wide {
-    margin: var(--space-1) 0 var(--space-3) 0;
+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;
 }
 
-/* ---------- BUTTONS ---------- */
-
-.button-row {
-    display: flex;
-    gap: 10px;
-    margin-bottom: var(--space-1);
+button.send-button:hover {
+    background: #FFFFFF !important;
 }
 
-button.search-button {
-    background: var(--accent-blue) !important;
-    border: 1px solid var(--accent-blue) !important;
-    border-radius: var(--radius-md) !important;
-    color: #FFFFFF !important;
+button.clear-button {
+    background: #262626 !important;
+    color: #D1D5DB !important;
+    border: 1px solid #414141 !important;
+    border-radius: 14px !important;
     font-weight: 700 !important;
-    font-size: 14.5px !important;
-    min-height: 46px !important;
-    flex: 2;
-    transition: background 0.15s ease, transform 0.05s ease;
-}
-
-button.search-button:hover {
-    background: var(--accent-blue-hover) !important;
-}
-
-button.search-button:active {
-    transform: translateY(1px);
+    min-height: 44px !important;
 }
 
-button.clear-button {
+.output-panel {
     background: transparent !important;
-    border: 1px solid var(--panel-border-strong) !important;
-    border-radius: var(--radius-md) !important;
-    color: var(--text-secondary) !important;
-    font-weight: 650 !important;
-    font-size: 14.5px !important;
-    min-height: 46px !important;
-    flex: 1;
-    transition: border-color 0.15s ease, color 0.15s ease;
-}
-
-button.clear-button:hover {
-    border-color: var(--text-secondary) !important;
-    color: #FFFFFF !important;
-}
-
-/* ---------- EXAMPLES ---------- */
-
-#examples-block {
-    margin-top: var(--space-3);
-    padding-top: var(--space-3);
-    border-top: 1px solid var(--panel-border);
+    border: none !important;
+    padding: 0 !important;
+    margin-top: 8px !important;
 }
 
-#examples-block .label-wrap span {
-    color: var(--text-tertiary) !important;
-    font-size: 12px !important;
-    text-transform: uppercase;
-    letter-spacing: 0.03em;
+.answer-card {
+    background: #2A2A2A;
+    border: 1px solid #3D3D3D;
+    border-radius: 18px;
+    padding: 18px 20px;
+    margin-bottom: 14px;
+    color: #ECECEC;
+    line-height: 1.65;
 }
 
-#examples-block button {
-    background: var(--input-bg) !important;
-    border: 1px solid var(--panel-border) !important;
-    border-radius: 999px !important;
-    color: #CBD5E1 !important;
-    font-size: 13px !important;
-    font-weight: 550 !important;
-    padding: 6px 14px !important;
+.answer-title {
+    font-weight: 800;
+    color: #FFFFFF;
+    margin-bottom: 8px;
 }
 
-#examples-block button:hover {
-    border-color: var(--accent-blue) !important;
-    color: #FFFFFF !important;
+.answer-note {
+    color: #C7C7C7;
+    font-size: 14px;
 }
 
-/* ---------- STATUS + OUTPUT ---------- */
-
-.status-panel textarea {
-    background: #070C16 !important;
-    border: 1px solid var(--panel-border) !important;
-    color: #E2E8F0 !important;
-    font-weight: 650 !important;
-    font-size: 13.5px !important;
-    min-height: 40px !important;
-    padding: 10px 14px !important;
+.dataframe {
+    border-radius: 16px !important;
+    overflow: hidden !important;
+    border: 1px solid #3D3D3D !important;
 }
 
-.result-note {
-    background: var(--input-bg);
-    border: 1px solid var(--panel-border);
-    border-radius: var(--radius-md);
-    padding: 14px 16px;
-    color: var(--text-secondary);
-    font-size: 13.5px;
+.footer {
+    text-align: center;
+    color: #9CA3AF;
+    font-size: 12.5px;
     line-height: 1.6;
+    margin-top: 24px;
 }
 
-/* The table has 10 columns — it must scroll horizontally rather than
-   shrink, or headers wrap into unreadable fragments. */
-.dataframe {
-    border-radius: var(--radius-md) !important;
-    border: 1px solid var(--panel-border) !important;
-    font-size: 13.5px !important;
-}
-
-.dataframe .table-wrap,
-.dataframe [class*="scroll"] {
-    overflow-x: auto !important;
+#examples-block {
+    margin-top: 10px;
 }
 
-.dataframe table {
-    min-width: 1100px !important;
-    border-collapse: collapse !important;
+#examples-block button {
+    border-radius: 999px !important;
+    background: #2A2A2A !important;
+    border: 1px solid #3D3D3D !important;
+    color: #D1D5DB !important;
 }
 
-.dataframe th {
-    background: #0D1420 !important;
-    color: var(--text-secondary) !important;
-    font-size: 11.5px !important;
-    text-transform: uppercase;
-    letter-spacing: 0.03em;
-    font-weight: 700 !important;
-    white-space: nowrap !important;
-    padding: 10px 14px !important;
+.block {
+    background: transparent !important;
 }
 
-.dataframe td {
-    color: #E2E8F0 !important;
-    padding: 10px 14px !important;
-    max-width: 220px;
+label {
+    color: #CFCFCF !important;
 }
 
-/* ---------- FOOTER ---------- */
-
-.footer {
-    text-align: center;
-    color: var(--text-tertiary);
-    font-size: 12.5px;
-    line-height: 1.7;
-    margin-top: var(--space-4);
-    padding-top: var(--space-3);
-    border-top: 1px solid var(--panel-border);
-}
+@media (max-width: 900px) {
+    #shell {
+        padding: 24px 14px 34px 14px;
+    }
 
-@media (max-width: 640px) {
     .title {
-        font-size: 28px;
-    }
-    .main-card {
-        padding: 20px !important;
-    }
-    .hero {
-        padding: 24px 22px;
+        font-size: 30px;
     }
-    .button-row {
-        flex-direction: column;
+
+    .capabilities {
+        grid-template-columns: 1fr;
     }
 }
 """
@@ -634,62 +481,89 @@ EMPTY_RESULTS = pd.DataFrame(
 )
 
 
+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 chat_style_search(query):
+    status, summary, result = safe_search(query)
+    summary = clean_markdown_summary(summary)
+
+    answer_html = f"""
+    <div class="answer-card">
+        <div class="answer-title">{status}</div>
+        <div class="answer-note">{summary}</div>
+    </div>
+    """
+
+    return answer_html, result
+
+
+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>
+    </div>
+    """, EMPTY_RESULTS
+
+
 with gr.Blocks(
     css=custom_css,
     theme=gr.themes.Base(
-        primary_hue="blue",
+        primary_hue="slate",
         secondary_hue="slate",
-        neutral_hue="slate"
-    ),
-    title="CrossTalk AI"
+        neutral_hue="zinc"
+    )
 ) as demo:
 
     with gr.Column(elem_id="shell"):
         gr.HTML(
             """
+            <div class="topbar">
+                <div class="brand">CrossTalk AI</div>
+                <div class="model-badge">Full trained retrieval system</div>
+            </div>
+
             <div class="hero">
-                <div class="badge">Hybrid retrieval system</div>
-                <h1 class="title">CrossTalk AI</h1>
-                <p class="subtitle">
-                    A retrieval-based language identification and translation support system for
-                    low-resource ethnic languages of Bangladesh — combining verified dictionary lookup
-                    with fine-tuned E5 semantic retrieval and FAISS vector search.
-                </p>
-                <div class="info-strip">
-                    <div class="info-pill">12 language groups</div>
-                    <div class="info-pill">70K+ indexed entries</div>
-                    <div class="info-pill">Fine-tuned E5 retriever</div>
-                    <div class="info-pill">FAISS vector search</div>
-                    <div class="info-pill">Confidence-aware output</div>
+                <h1 class="title">What ethnic word would you like to search?</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>
-            """
-        )
 
-        # SEARCH SECTION
-        with gr.Column(elem_classes=["main-card", "search-card"]):
-            gr.HTML(
-                """
-                <div class="section-header">
-                    <div class="section-title">Search</div>
+            <div class="capabilities">
+                <div class="cap-card">
+                    <strong>Verified lookup</strong>
+                    Exact and base-form dictionary matches are returned first.
                 </div>
-                <div class="section-subtitle">
-                    Enter a source word. Exact and base-form matches are treated as verified
-                    dictionary outputs; everything else is a semantic suggestion.
+                <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.
+                </div>
+            </div>
+            """
+        )
 
+        with gr.Column(elem_classes=["search-panel"]):
             query = gr.Textbox(
                 label="Source word",
-                placeholder="e.g. kəkhyáŋ, Hula, Aina, aam, bajaoo",
+                placeholder="Message CrossTalk AI...",
                 lines=1,
-                elem_classes=["input-wide"]
+                show_label=False
             )
 
-            with gr.Row(elem_classes=["button-row"]):
-                submit_btn = gr.Button("Search", elem_classes=["search-button"])
+            with gr.Row():
                 clear_btn = gr.Button("Clear", elem_classes=["clear-button"])
+                submit_btn = gr.Button("Search", elem_classes=["send-button"])
 
             gr.Examples(
                 examples=[
@@ -701,77 +575,52 @@ with gr.Blocks(
                     ["unknown tribal word"]
                 ],
                 inputs=query,
-                label="Try an example",
+                label="Try examples",
                 elem_id="examples-block"
             )
 
-        # OUTPUT SECTION
-        with gr.Column(elem_classes=["main-card", "output-card"]):
-            gr.HTML(
-                """
-                <div class="section-header">
-                    <div class="section-title">Results</div>
-                </div>
-                <div class="section-subtitle">
-                    Verified dictionary matches appear first. Semantic fallback results are shown
-                    only when no verified match exists.
-                </div>
+        with gr.Column(elem_classes=["output-panel"]):
+            answer = gr.HTML(
                 """
-            )
-
-            status = gr.Textbox(
-                label="Status",
-                lines=1,
-                elem_classes=["status-panel"],
-                value="Ready."
-            )
-
-            summary = gr.HTML(
-                value="""
-                <div class="result-note">
-                Enter a source word above and click Search — results will appear here.
+                <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>
                 </div>
                 """
             )
 
             results = gr.Dataframe(
-                label="Results table",
+                label="Retrieved results",
                 value=EMPTY_RESULTS,
                 interactive=False,
                 wrap=True,
-                max_height=460
+                max_height=470
             )
 
         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. Fine-tuned semantic fallback results are candidate suggestions only, not confirmed translations.
             </div>
             """
         )
 
     submit_btn.click(
-        fn=safe_search,
+        fn=chat_style_search,
         inputs=query,
-        outputs=[status, summary, results]
+        outputs=[answer, results]
     )
 
     query.submit(
-        fn=safe_search,
+        fn=chat_style_search,
         inputs=query,
-        outputs=[status, summary, results]
+        outputs=[answer, results]
     )
 
     clear_btn.click(
-        fn=lambda: (
-            "",
-            "Ready.",
-            '<div class="result-note">Enter a source word above and click Search — results will appear here.</div>',
-            EMPTY_RESULTS
-        ),
+        fn=clear_interface,
         inputs=None,
-        outputs=[query, status, summary, results]
+        outputs=[query, answer, results]
     )