Complete MVP with awesome UI

src/api/main.py

@@ -75,6 +75,9 @@ async def get_recommendations(request: RecommendationRequest):
             filters=filters if filters else None
         )
         end_time = time.time()
+
+        print(f"Retrieved anime : \n{result["retrieved_count"]}")
+        print(f"Result Recommendations: \n{result["recommendations"][:20]}")
         return RecommendationResponse(
             query=result["query"],
             recommendations=result["recommendations"],

src/llm/tool_use_schema.json

@@ -0,0 +1,35 @@
+{
+  "tools": [
+    {
+      "type": "function",
+      "function": {
+        "name": "get_weather",
+        "description": "Get current weather for a location",
+        "parameters": {
+          "type": "object",
+          "properties": {
+            "location": {
+              "type": "string",
+              "description": "City and state, e.g. San Francisco, CA"
+            },
+            "unit": {
+              "type": "string",
+              "enum": ["celsius", "fahrenheit"]
+            }
+          },
+          "required": ["location"]
+        }
+      }
+    }
+  ],
+  "messages": [
+    {
+      "role": "system",
+      "content": "You are a weather assistant. Respond to the user question and use tools if needed to answer the query."
+    },
+    {
+      "role": "user",
+      "content": "What's the weather in San Francisco?" 
+    }
+  ],
+}

ui/gradio_app.py

@@ -1,118 +1,5 @@
-# import gradio as gr
-# import requests
-# import os
-
-# API_URL = os.getenv("API_URL", "http://127.0.0.1:8000")
-
-
-# def get_recommendations(query, min_score, genre_filter, n_results):
-#     """Call the fastapi backend"""
-#     try:
-#         payload = {
-#             "query": query,
-#             "n_results": n_results
-#         }
-
-#         if min_score > 0:
-#             payload["min_score"] = min_score
-
-#         if genre_filter and genre_filter != None:
-#             payload["genre_filter"] = genre_filter
-
-#         response = requests.post(
-#             f"{API_URL}/recommend",
-#             json=payload,
-#             timeout=30
-#         )
-#         response.raise_for_status()
-
-#         result = response.json()
-#         print(result["metadata"])
-#         return result["recommendations"]
-#     except requests.exceptions.RequestException as e:
-#         return f"Error connecting to the API. Make sure FastAPI server is running. \nDetails: {str(e)}"
-#     except Exception as e:
-#         return f"Error: {str(e)}"
-
-
-# with gr.Blocks(title="Anime Recommender") as demo:
-#     gr.Markdown("""
-#     # Anime Recommendation System
-
-#     Powered by RAG(Retrieval-Augmented Generation)
-
-#     Ask for anime recommendations and get AI-powered suggestions!
-#     """)
-#     with gr.Row():
-#         with gr.Column(scale=2):
-#             query_input = gr.Textbox(
-#                 label="What are you looking for?",
-#                 placeholder="e.g., 'Anime similar to Death Note but lighter' or 'Romantic comedy set in high school'",
-#                 lines=3
-#             )
-
-#             with gr.Row():
-#                 min_score_slider = gr.Slider(
-#                     minimum=0,
-#                     maximum=10,
-#                     value=0,
-#                     step=0.5,
-#                     label="Minimum Rating this animes should have (0 = no filter)"
-#                 )
-
-#                 genre_dropdown = gr.Dropdown(
-#                     choices=["None", "Action", "Comedy", "Drama",
-#                              "Romance", "Sci-Fi", "Fantasy", "Thriller"],
-#                     value="None",
-#                     label="Genre Filter (optional)"
-#                 )
-
-#                 n_results_dropdown = gr.Slider(
-#                     minimum=1,
-#                     maximum=8,
-#                     value=3,
-#                     step=1,
-#                     label="Number of recommendation you want to get"
-#                 )
-
-#             submit_btn = gr.Button("Get Recommendations",
-#                                    variant="primary", size="lg")
-
-#         with gr.Column(scale=3):
-#             output = gr.Markdown(label="Recommendations")
-
-#     # Examples
-#     gr.Examples(
-#         examples=[
-#             ["Anime similar to Death Note but lighter", 0, "None", 3],
-#             ["Romantic comedy set in high school", 7.5, "Comedy", 4],
-#             ["Dark psychological thriller", 8.0, "None", 2],
-#             ["Action anime with epic fights", 7.0, "Action", 1],
-#         ],
-#         inputs=[query_input, min_score_slider,
-#                 genre_dropdown, n_results_dropdown],
-#     )
-
-#     # Connect button to function
-#     submit_btn.click(
-#         fn=get_recommendations,
-#         inputs=[query_input, min_score_slider,
-#                 genre_dropdown, n_results_dropdown],
-#         outputs=output
-#     )
-
-# # Launch
-# if __name__ == "__main__":
-#     print("Starting Gradio UI...")
-#     print("Make sure FastAPI server is running at http://localhost:8000")
-#     demo.launch(
-#         server_name="0.0.0.0",
-#         server_port=7860,
-#         share=True  # Set to True to get public URL
-#     )
-
-
 import gradio as gr
+from gradio import themes
 import requests
 import os
 
@@ -120,404 +7,411 @@ API_URL = os.getenv("API_URL", "http://127.0.0.1:8000")
 
 
 def get_recommendations(query, min_score, genre_filter, n_results):
+    if not query or not query.strip():
+        return (
+            "<div class='status-badge warning'>Waiting for prompt</div>",
+            "Tell me what you're in the mood for to get started."
+        )
+
     try:
-        payload = {"query": query, "n_results": int(n_results)}
+        payload = {
+            "query": query.strip(),
+            "n_results": int(n_results)
+        }
         if min_score > 0:
-            payload["min_score"] = min_score
-        if genre_filter and genre_filter != "None":
+            payload["min_score"] = float(min_score)
+        if genre_filter and genre_filter != "Any":
             payload["genre_filter"] = genre_filter
 
         response = requests.post(
             f"{API_URL}/recommend", json=payload, timeout=30)
         response.raise_for_status()
         result = response.json()
-        print(result["metadata"])
-        return result["recommendations"]
-    except requests.exceptions.RequestException as e:
-        return f"**Connection Error** — Make sure FastAPI is running.\n\n`{str(e)}`"
+
+        recommendations_text = result.get("recommendations", "")
+        retrieved_count = result.get("retrieved_count", 0)
+        time_taken = result.get("metadata", {}).get(
+            "Time taken for LLM + vector search", "unknown")
+
+        if not recommendations_text or recommendations_text.strip() == "":
+            return (
+                "<div class='status-badge error'>No Matches</div>",
+                "Couldn't find anything matching that exact vibe. Try tweaking your search."
+            )
+
+        header_html = f"""
+        <div class='results-dashboard'>
+            <div class='metric'>
+                <span class='label'>TITLES SCANNED</span>
+                <span class='value'>{retrieved_count}</span>
+            </div>
+            <div class='metric'>
+                <span class='label'>SEARCH TIME</span>
+                <span class='value'>{time_taken}</span>
+            </div>
+            <div class='status-badge success'>Search Complete</div>
+        </div>
+        """
+        return header_html, recommendations_text
+
+    except requests.exceptions.ConnectionError:
+        return (
+            "<div class='status-badge error'>Offline</div>",
+            "**Error:** Cannot connect to backend. Make sure the FastAPI server is running."
+        )
     except Exception as e:
-        return f"**Error:** {str(e)}"
+        return ("<div class='status-badge error'>Error</div>", f"**Something went wrong:** {str(e)}")
 
 
-css = """
-@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Serif+Display:ital@0;1&display=swap');
+CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&family=Inter:wght@400;500&display=swap');
 
 :root {
-    --bg:      #1c1714;
-    --surface: #241e1a;
-    --card:    #2d2520;
-    --border:  #3d3028;
-    --accent:  #d4845a;
-    --gold:    #c9a97a;
-    --text:    #f5ede3;
-    --sub:     #d0bfae;
-    --muted:   #9a8878;
-    --faint:   #6a5a4a;
-    --radius:  16px;
-    --shadow:  0 4px 28px rgba(0,0,0,0.4);
+    --bg-base: #0b0f19;
+    --bg-panel: #111827;
+    --accent: #6366f1;
+    --accent-hover: #4f46e5;
+    --text-main: #f3f4f6;
+    --text-muted: #9ca3af;
+    --border-dim: #1f2937;
 }
 
-/* ── GLOBAL ── */
 body, .gradio-container {
-    background: var(--bg) !important;
-    font-family: 'DM Sans', sans-serif !important;
-    color: var(--text) !important;
+    background-color: var(--bg-base) !important;
+    font-family: 'Inter', sans-serif !important;
+    color: var(--text-main) !important;
 }
-footer { display: none !important; }
+
 .gradio-container {
-    max-width: 980px !important;
+    max-width: 960px !important;
     margin: 0 auto !important;
-    padding: 0 36px !important;
+    padding: 50px 20px !important;
 }
 
-/* ── HEADER ── */
-.app-header { text-align: center; padding: 56px 0 40px; }
-.app-header h1 {
-    font-family: 'DM Serif Display', serif !important;
-    font-size: 46px !important;
-    font-weight: 400 !important;
-    color: var(--text) !important;
-    margin: 0 0 8px !important;
-    letter-spacing: -0.5px;
-}
-.app-header h1 em { font-style: italic; color: var(--accent); }
-.app-header p { font-size: 15px; color: var(--sub); margin: 0; }
-.header-line { width: 44px; height: 2px; background: var(--accent); border-radius: 2px; margin: 16px auto 0; opacity: 0.75; }
-
-/* ── STEP CARDS ── */
-.step-card {
-    background: var(--card);
-    border-radius: var(--radius);
-    padding: 28px 32px 26px;
-    margin-bottom: 14px;
-    box-shadow: var(--shadow);
-    border: 1px solid var(--border);
+/* Typography & Headers */
+.app-header {
+    text-align: center;
+    margin-bottom: 40px;
 }
-.step-label {
-    font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
-    text-transform: uppercase; color: var(--muted);
-    margin-bottom: 16px; display: flex; align-items: center; gap: 10px;
+
+.app-title {
+    font-family: 'Outfit', sans-serif;
+    font-size: 42px;
+    font-weight: 800;
+    color: #ffffff;
+    margin: 0 0 8px 0;
+    letter-spacing: -1px;
 }
-.step-label .num {
-    width: 21px; height: 21px; background: var(--accent); color: #1c1714;
-    border-radius: 50%; display: inline-flex; align-items: center;
-    justify-content: center; font-size: 10px; font-weight: 700;
+
+.app-title span { color: var(--accent); }
+.app-subtitle { font-size: 16px; color: var(--text-muted); line-height: 1.5; }
+
+/* 🔥 NEW Unified Chat Input Bar 🔥 */
+#chat-input-container {
+    background: var(--bg-panel);
+    border: 1px solid var(--border-dim);
+    border-radius: 24px;
+    padding: 8px 8px 8px 16px;
+    margin-bottom: 16px;
+    display: flex;
+    align-items: flex-end;
+    transition: all 0.2s ease;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 }
 
-/* ── INPUTS ── */
-textarea, input[type="text"] {
-    background: var(--surface) !important;
-    border: 1.5px solid var(--border) !important;
-    border-radius: 10px !important;
-    color: var(--text) !important;
-    font-family: 'DM Sans', sans-serif !important;
-    font-size: 15px !important;
-    transition: border-color 0.2s, box-shadow 0.2s !important;
+#chat-input-container:focus-within {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
 }
-textarea::placeholder, input::placeholder { color: var(--faint) !important; }
-textarea:focus, input:focus {
-    border-color: var(--accent) !important;
-    box-shadow: 0 0 0 3px rgba(212,132,90,0.15) !important;
-    outline: none !important;
+
+/* Override Gradio's internal Textbox styling */
+#query-input {
+    border: none !important;
+    box-shadow: none !important;
+    background: transparent !important;
+    flex-grow: 1;
 }
-label > span {
-    font-size: 13px !important; font-weight: 500 !important;
-    color: var(--sub) !important; letter-spacing: 0 !important;
-    text-transform: none !important;
+
+#query-input textarea {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    color: #ffffff !important;
+    font-family: 'Inter', sans-serif !important;
+    font-size: 16px !important;
+    padding: 12px 0 !important;
+    resize: none !important; /* Removes the little drag handle */
 }
 
-/* ── SLIDER ── */
-input[type="range"] { accent-color: var(--accent) !important; }
+#query-input textarea:focus {
+    box-shadow: none !important;
+    border: none !important;
+}
 
-/* ── SUBMIT BUTTON ── */
-#submit-btn button {
-    width: 100% !important;
+/* 🔥 The Circle Send Button 🔥 */
+#send-btn {
     background: var(--accent) !important;
-    color: #1c1714 !important;
+    color: #ffffff !important;
     border: none !important;
-    border-radius: 12px !important;
-    font-family: 'DM Sans', sans-serif !important;
-    font-size: 15px !important;
-    font-weight: 700 !important;
-    padding: 17px !important;
-    cursor: pointer !important;
-    letter-spacing: 0.03em !important;
-    transition: background 0.2s, transform 0.15s, box-shadow 0.2s !important;
-    box-shadow: 0 4px 20px rgba(212,132,90,0.30) !important;
-}
-#submit-btn button:hover {
-    background: var(--gold) !important;
-    transform: translateY(-2px) !important;
-    box-shadow: 0 8px 28px rgba(212,132,90,0.42) !important;
-}
-#submit-btn button:active { transform: translateY(0) !important; }
-
-/* ── LOADER ── */
-#ao-loader { display: none; text-align: center; padding: 44px 0 36px; }
-.ao-loader-phrase {
-    font-family: 'DM Serif Display', serif;
-    font-size: 20px; font-style: italic;
-    color: var(--text); margin-bottom: 24px;
-    min-height: 30px; transition: opacity 0.35s;
-}
-.ao-dots { display: flex; justify-content: center; gap: 10px; }
-.ao-dots span {
-    width: 9px; height: 9px; background: var(--accent);
-    border-radius: 50%; animation: aobounce 1.2s infinite ease-in-out;
-}
-.ao-dots span:nth-child(2) { animation-delay: 0.18s; background: var(--gold); }
-.ao-dots span:nth-child(3) { animation-delay: 0.36s; background: var(--faint); }
-@keyframes aobounce {
-    0%, 80%, 100% { transform: translateY(0) scale(0.75); opacity: 0.35; }
-    40%            { transform: translateY(-11px) scale(1.15); opacity: 1; }
+    border-radius: 50% !important;
+    width: 44px !important;
+    height: 44px !important;
+    min-width: 44px !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px !important;
+    padding: 0 !important;
+    margin-left: 12px;
+    margin-bottom: 4px; /* Keeps it aligned to the bottom when text expands */
+    cursor: pointer;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
 }
 
-/* ── OUTPUT BOX ── */
-/* Target the Gradio Markdown block container via elem_id */
-#ao-output-wrap,
-#ao-output-wrap > .wrap,
-div#ao-output-wrap {
-    background: var(--card) !important;
-    border-radius: var(--radius) !important;
-    border: 1px solid var(--border) !important;
-    box-shadow: var(--shadow) !important;
-    padding: 32px 36px !important;
-    margin-top: 4px !important;
-    transition: opacity 0.45s !important;
+#send-btn:hover {
+    background: var(--accent-hover) !important;
+    transform: scale(1.05);
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4) !important;
 }
-/* The actual prose inside Markdown */
-#ao-output-wrap .prose,
-#ao-output-wrap .md,
-#ao-output-wrap > div {
-    color: var(--sub) !important;
+
+#send-btn:active {
+    transform: scale(0.95);
 }
-#ao-output-wrap p,
-#ao-output-wrap .prose p {
-    font-size: 14.5px !important;
-    line-height: 1.78 !important;
-    color: var(--sub) !important;
-    margin: 0 0 10px !important;
+
+/* Controls Row */
+.control-panel {
+    background: transparent;
+    margin-bottom: 30px;
 }
-#ao-output-wrap h1, #ao-output-wrap h2,
-#ao-output-wrap .prose h1, #ao-output-wrap .prose h2 {
-    font-family: 'DM Serif Display', serif !important;
-    font-size: 22px !important;
-    font-weight: 400 !important;
-    color: var(--text) !important;
-    padding-bottom: 10px !important;
-    border-bottom: 1px solid var(--border) !important;
-    margin: 28px 0 12px !important;
+
+.control-panel .gr-box, .control-panel select {
+    background: var(--bg-panel) !important;
+    border: 1px solid var(--border-dim) !important;
+    border-radius: 8px !important;
 }
-#ao-output-wrap h2:first-child,
-#ao-output-wrap .prose h2:first-child { margin-top: 0 !important; }
-#ao-output-wrap h3,
-#ao-output-wrap .prose h3 {
-    font-size: 15px !important;
-    color: var(--accent) !important;
-    font-weight: 600 !important;
-    margin: 0 0 5px !important;
+
+label {
+    font-family: 'Outfit', sans-serif !important;
+    font-size: 12px !important;
+    color: var(--text-muted) !important;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
 }
-#ao-output-wrap strong,
-#ao-output-wrap .prose strong { color: var(--text) !important; font-weight: 600 !important; }
-#ao-output-wrap em,
-#ao-output-wrap .prose em { color: var(--gold) !important; }
-#ao-output-wrap code,
-#ao-output-wrap .prose code {
-    background: var(--surface) !important;
-    color: var(--accent) !important;
-    padding: 2px 7px !important;
-    border-radius: 5px !important;
-    font-size: 13px !important;
-    border: 1px solid var(--border) !important;
+
+/* Output Dashboard Elements */
+.results-dashboard {
+    display: flex;
+    gap: 30px;
+    align-items: center;
+    background: var(--bg-panel);
+    border: 1px solid var(--border-dim);
+    padding: 16px 24px;
+    border-radius: 8px;
+    margin-bottom: 16px;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 }
-#ao-output-wrap ul,
-#ao-output-wrap .prose ul { padding-left: 18px !important; }
-#ao-output-wrap li,
-#ao-output-wrap .prose li {
-    font-size: 14.5px !important;
-    line-height: 1.72 !important;
-    color: var(--sub) !important;
-    margin-bottom: 4px !important;
+
+.metric { display: flex; flex-direction: column; }
+.metric .label { font-family: 'Outfit', sans-serif; font-size: 11px; color: var(--text-muted); letter-spacing: 0.5px; }
+.metric .value { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 600; color: #fff; }
+
+.status-badge {
+    margin-left: auto;
+    font-family: 'Outfit', sans-serif;
+    font-size: 12px;
+    padding: 6px 12px;
+    border-radius: 20px;
+    font-weight: 600;
 }
 
-/* ── EXAMPLES ── */
-.examples-label {
-    font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
-    text-transform: uppercase; color: var(--faint); margin: 26px 0 12px;
+.status-badge.success { background: rgba(16, 185, 129, 0.1); color: #10b981; }
+.status-badge.error { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
+.status-badge.warning { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
+
+/* Markdown Styling for LLM Output */
+.markdown-output {
+    background: transparent;
+    font-size: 16px;
+    line-height: 1.8;
+    color: var(--text-main);
 }
-.gr-samples-table td, .examples-holder td {
-    background: var(--card) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: 8px !important;
-    color: var(--sub) !important;
-    font-size: 13px !important; padding: 10px 15px !important;
-    transition: all 0.15s !important; cursor: pointer !important;
-    font-family: 'DM Sans', sans-serif !important;
+.markdown-output h1, .markdown-output h2, .markdown-output h3 { font-family: 'Outfit', sans-serif; color: #fff; margin-top: 24px; margin-bottom: 12px; }
+.markdown-output strong { color: #a855f7; font-weight: 600; }
+.markdown-output a { color: var(--accent); text-decoration: none; }
+.markdown-output a:hover { text-decoration: underline; }
+
+/* Quick Tags */
+.quick-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; justify-content: center; }
+.quick-tag {
+    font-size: 13px;
+    color: var(--text-muted);
+    background: var(--bg-panel);
+    border: 1px solid var(--border-dim);
+    padding: 6px 14px;
+    border-radius: 20px;
+    cursor: pointer;
+    transition: all 0.2s;
 }
-.gr-samples-table tr:hover td, .examples-holder tr:hover td {
-    background: var(--accent) !important;
-    color: #1c1714 !important;
-    border-color: var(--accent) !important;
+.quick-tag:hover {
+    color: #fff;
+    border-color: var(--accent);
+    box-shadow: 0 0 10px rgba(99, 102, 241, 0.2);
 }
-.gr-samples-header, .gr-samples-header th { display: none !important; }
-label[data-testid="block-label"] { display: none !important; }
-.examples-holder > label { display: none !important; }
-
-/* ── SCROLLBAR ── */
-::-webkit-scrollbar { width: 5px; }
-::-webkit-scrollbar-track { background: var(--bg); }
-::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
-::-webkit-scrollbar-thumb:hover { background: var(--faint); }
+"""
+
+JS_INTERACTION = """
+<script>
+(function() {
+    // 1. Handle clicking the quick suggestion tags
+    document.addEventListener('click', (e) => {
+        const tag = e.target.closest('.quick-tag');
+        if (tag) {
+            const text = tag.getAttribute('data-text');
+            const textarea = document.querySelector('textarea');
+            if (textarea && text) {
+                textarea.value = text;
+                textarea.dispatchEvent(new Event('input', { bubbles: true }));
+                
+                // Find and click the send button
+                let btn = document.querySelector('#send-btn');
+                if (btn && btn.tagName !== 'BUTTON') btn = btn.querySelector('button') || btn;
+                if (btn) btn.click();
+            }
+        }
+    });
+
+    // 2. Override Gradio's internal key bindings
+    document.addEventListener('keydown', (e) => {
+        // Target our specific textarea
+        if (e.target.tagName.toLowerCase() === 'textarea') {
+            
+            if (e.key === 'Enter') {
+                
+                if (e.shiftKey) {
+                    // SHIFT + ENTER: We want a new line.
+                    // Stop Gradio from seeing this and triggering its default "Submit"
+                    e.stopPropagation();
+                    e.stopImmediatePropagation();
+                    // We DO NOT preventDefault, so the browser natively adds the new line.
+                } 
+                else if (!e.ctrlKey && !e.metaKey) {
+                    // PLAIN ENTER: We want to submit.
+                    // Stop the browser from making a new line
+                    e.preventDefault();
+                    // Stop Gradio from seeing this event at all
+                    e.stopPropagation();
+                    e.stopImmediatePropagation();
+                    
+                    // Click our send button
+                    let btn = document.querySelector('#send-btn');
+                    if (btn && btn.tagName !== 'BUTTON') btn = btn.querySelector('button') || btn;
+                    if (btn) btn.click();
+                }
+            }
+        }
+    }, true); // Use the capture phase to intercept before React/Gradio does
+})();
+</script>
 """
 
 
-with gr.Blocks(
-    title="Anime Oracle",
-    css=css,
-    theme=gr.themes.Base(
-        primary_hue="orange",
-        neutral_hue="slate",
-        font=gr.themes.GoogleFont("DM Sans"),
-    ).set(
-        body_background_fill="#1c1714",
-        body_text_color="#f5ede3",
-        block_background_fill="#2d2520",
-        block_border_color="#3d3028",
-        input_background_fill="#241e1a",
-        input_border_color="#3d3028",
-        button_primary_background_fill="#d4845a",
-        button_primary_text_color="#1c1714",
-    )
-) as demo:
-
-    gr.HTML("""
-    <div class="app-header">
-        <h1>Find your next <em>obsession.</em></h1>
-        <p>Describe your mood — we'll find the perfect anime.</p>
-        <div class="header-line"></div>
-    </div>
-    """)
-
-    # Step 1
-    gr.HTML('<div class="step-card"><div class="step-label"><span class="num">1</span> What are you in the mood for?</div>')
-    query_input = gr.Textbox(
-        label="", show_label=False, lines=3,
-        placeholder='"Something like Attack on Titan but more emotional" or "Cozy slice-of-life with great friendships"'
-    )
-    gr.HTML("</div>")
-
-    # Step 2
-    gr.HTML('<div class="step-card"><div class="step-label"><span class="num">2</span> Any preferences? <span style="font-weight:300;color:#6a5a4a;margin-left:4px;font-size:10px;">optional</span></div>')
-    with gr.Row():
-        genre_dropdown = gr.Dropdown(
-            choices=["None", "Action", "Comedy", "Drama",
-                     "Romance", "Sci-Fi", "Fantasy", "Thriller"],
-            value="None", label="Genre", scale=1
+def create_interface():
+    with gr.Blocks(title="Anime Recommender") as demo:
+
+        gr.HTML("""
+        <div class="app-header">
+            <h1 class="app-title">Find your next <span>anime</span>.</h1>
+            <p class="app-subtitle">Describe the exact vibe, mood, or story you're looking for.</p>
+            
+            <div class="quick-tags">
+                <div class="quick-tag" data-text="Cozy slice of life set in the countryside">Cozy Countryside</div>
+                <div class="quick-tag" data-text="Dark fantasy with an unreliable narrator">Dark Fantasy</div>
+                <div class="quick-tag" data-text="Fast-paced cyberpunk action with great animation">Cyberpunk Action</div>
+            </div>
+        </div>
+        """)
+
+        # 🔥 NEW UNIFIED INPUT BAR 🔥
+        with gr.Row(elem_id="chat-input-container"):
+            query_input = gr.Textbox(
+                label="",
+                show_label=False,
+                lines=2,
+                placeholder="Message the recommender... (e.g., A melancholic sci-fi)",
+                elem_id="query-input",
+                scale=10
+            )
+
+            # Using an upward arrow icon (↑) for the send button
+            submit_btn = gr.Button(
+                "➔",
+                elem_id="send-btn",
+                scale=1
+            )
+
+        with gr.Group(elem_classes="control-panel"):
+            with gr.Row():
+                genre_dropdown = gr.Dropdown(
+                    choices=["Any", "Action", "Sci-Fi", "Slice of Life",
+                             "Fantasy", "Psychological", "Horror", "Romance"],
+                    value="Any",
+                    label="Genre Filter",
+                )
+                min_score_slider = gr.Slider(
+                    minimum=0, maximum=10, value=0, step=0.5,
+                    label="Minimum Rating"
+                )
+                n_results_slider = gr.Slider(
+                    minimum=1, maximum=8, value=3, step=1,
+                    label="Number of Results"
+                )
+
+        output_header = gr.HTML(
+            value="<div class='results-dashboard'><div class='status-badge warning'>Waiting for input</div></div>"
         )
-        min_score_slider = gr.Slider(
-            minimum=0, maximum=10, value=0, step=0.5, label="Minimum rating  (0 = any)", scale=2)
-    gr.HTML("</div>")
-
-    # Step 3
-    gr.HTML('<div class="step-card"><div class="step-label"><span class="num">3</span> How many results?</div>')
-    n_results_slider = gr.Slider(
-        minimum=1, maximum=8, value=3, step=1, label="", show_label=False)
-    gr.HTML("</div>")
-
-    submit_btn = gr.Button(
-        "Find my anime →", variant="primary", elem_id="submit-btn")
-
-    # Loading buffer
-    gr.HTML("""
-    <div id="ao-loader">
-        <div class="ao-loader-phrase">Scanning the anime universe…</div>
-        <div class="ao-dots"><span></span><span></span><span></span></div>
-    </div>
-    """)
-
-    # Output — elem_id so CSS can target it reliably
-    output = gr.Markdown(
-        value="*Your recommendations will appear here ✦*",
-        elem_id="ao-output-wrap"
-    )
 
-    # Examples
-    gr.HTML('<div class="examples-label">Try an example</div>')
-    gr.Examples(
-        examples=[
-            ["Something like Death Note but with a lighter tone", 0, "None", 3],
-            ["Romantic comedy with lovable characters", 7.5, "Comedy", 4],
-            ["Dark psychological thriller with twists", 8.0, "Thriller", 2],
-            ["Epic action with incredible fights", 7.0, "Action", 5],
-            ["Wholesome feel-good slice of life", 6.0, "Drama", 3],
-        ],
-        inputs=[query_input, min_score_slider,
-                genre_dropdown, n_results_slider],
-        label=""
-    )
+        output_text = gr.Markdown(
+            value="",
+            elem_classes="markdown-output"
+        )
 
-    # Loader JS
-    gr.HTML("""
-    <script>
-    (function() {
-        const PHRASES = [
-            "Scanning the anime universe\u2026",
-            "Consulting the oracle\u2026",
-            "Traversing story arcs\u2026",
-            "Matching your vibe\u2026",
-            "Sifting through thousands of titles\u2026",
-            "Almost there\u2026"
-        ];
-        let phraseTimer = null, phraseIdx = 0;
-
-        function startLoader() {
-            const loader = document.getElementById('ao-loader');
-            const wrap   = document.getElementById('ao-output-wrap');
-            if (loader) loader.style.display = 'block';
-            if (wrap)   wrap.style.opacity = '0.15';
-            phraseIdx = 0;
-            const el = document.querySelector('.ao-loader-phrase');
-            if (el) el.textContent = PHRASES[0];
-            clearInterval(phraseTimer);
-            phraseTimer = setInterval(() => {
-                phraseIdx = (phraseIdx + 1) % PHRASES.length;
-                if (el) {
-                    el.style.opacity = '0';
-                    setTimeout(() => { el.textContent = PHRASES[phraseIdx]; el.style.opacity = '1'; }, 300);
-                }
-            }, 1800);
-        }
+        gr.HTML(JS_INTERACTION)
 
-        function stopLoader() {
-            clearInterval(phraseTimer);
-            const loader = document.getElementById('ao-loader');
-            const wrap   = document.getElementById('ao-output-wrap');
-            if (loader) loader.style.display = 'none';
-            if (wrap)   { wrap.style.transition = 'opacity 0.5s ease'; wrap.style.opacity = '1'; }
-        }
+        submit_btn.click(
+            fn=get_recommendations,
+            inputs=[query_input, min_score_slider,
+                    genre_dropdown, n_results_slider],
+            outputs=[output_header, output_text]
+        )
 
-        document.addEventListener('click', function(e) {
-            if (e.target && e.target.closest('#submit-btn')) {
-                startLoader();
-                setTimeout(stopLoader, 25000);
-            }
-        });
+        # Allow native submission as a fallback
+        query_input.submit(
+            fn=get_recommendations,
+            inputs=[query_input, min_score_slider,
+                    genre_dropdown, n_results_slider],
+            outputs=[output_header, output_text]
+        )
 
-        function watchOutput() {
-            const target = document.getElementById('ao-output-wrap');
-            if (!target) { setTimeout(watchOutput, 500); return; }
-            new MutationObserver(stopLoader).observe(target, { childList: true, subtree: true, characterData: true });
-        }
-        watchOutput();
-    })();
-    </script>
-    """)
+        return demo
 
-    submit_btn.click(fn=get_recommendations, inputs=[
-                     query_input, min_score_slider, genre_dropdown, n_results_slider], outputs=output)
-    query_input.submit(fn=get_recommendations, inputs=[
-                       query_input, min_score_slider, genre_dropdown, n_results_slider], outputs=output)
 
 if __name__ == "__main__":
-    print("Starting Anime Oracle...")
-    demo.launch(server_name="0.0.0.0", server_port=7860, share=True)
+    demo = create_interface()
+
+    theme = themes.Base(
+        font=[themes.GoogleFont("Inter"), "ui-sans-serif",
+              "system-ui", "sans-serif"],
+    ).set(
+        body_background_fill="transparent",
+        block_background_fill="transparent",
+        block_border_width="0px",
+        input_background_fill="transparent",
+    )
+
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False,
+        css=CSS,
+        theme=theme
+    )