Update app.py

app.py

@@ -73,7 +73,6 @@ def create_store_with_samples(client_state, samples_dir: str, store_display_name
     Generator. Creates a NEW store and imports whatever classics exist in samples_dir.
     Yields: store_state(str), store_status(md), progress_html(html), create_button(update)
     """
-    # Guard. require key
     if client_state is None:
         msg = "❌ Set your API key first in the section above."
         yield "", msg, _progress_html(0, "Waiting for API key"), gr.update(interactive=True)
@@ -355,6 +354,7 @@ def render_samples_panel(samples_dir: str):
 # UI (palette + theme)
 # ──────────────────────────────────────────────────────────────────────────────
 custom_css = """
+/* ---------- Palette ---------- */
 :root {
   --primary: #6C5CE7; --secondary: #00D2FF; --accent: #FF8A65;
   --surface: #FFFFFF; --bg: #F6F7FB; --ink: #1B1E2B; --muted: #9AA0B7;
@@ -365,33 +365,103 @@ html[data-theme="dark"] {
   --surface: #151728; --bg: #0E0F16; --ink: #E9ECFF; --muted: #AAB0D6;
   --success: #23D497; --danger: #FF6B6B; --code: #0B0F1C;
 }
+
+/* ---------- Layout ---------- */
 body { background: var(--bg) !important; }
 .gradio-container { max-width: 1120px !important; margin: auto !important; }
-.hero { border-radius: 20px; padding: 22px 26px;
-  background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 28%, transparent),
-                                      color-mix(in oklab, var(--secondary) 24%, transparent));
+
+/* ---------- Hero ---------- */
+.hero {
+  border-radius: 18px;
+  padding: 22px 26px;
+  background: linear-gradient(135deg,
+    color-mix(in oklab, var(--primary) 28%, transparent),
+    color-mix(in oklab, var(--secondary) 24%, transparent));
   border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
-  box-shadow: 0 12px 36px rgba(0,0,0,.18); margin: 8px 0 14px 0; }
+  box-shadow: 0 12px 36px rgba(0,0,0,.14);
+  margin: 8px 0 16px 0;
+}
 .hero h1 { color: var(--surface); font-size: 30px; margin: 0 0 8px; }
-.hero p { color: color-mix(in oklab, var(--surface) 78%, transparent); margin: 0; }
-.gr-box, .gr-panel, .gr-accordion > div {
-  background: var(--surface) !important; border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent) !important;
-  border-radius: 14px !important; box-shadow: 0 6px 16px rgba(0,0,0,.06); }
+.hero p  { color: color-mix(in oklab, var(--surface) 78%, transparent); margin: 0; }
+
+/* ---------- Cards & panels ---------- */
+.gr-box, .gr-panel {
+  background: var(--surface) !important;
+  border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent) !important;
+  border-radius: 14px !important;
+  box-shadow: 0 6px 16px rgba(0,0,0,.06);
+}
+
+/* ---------- Inputs ---------- */
 input, textarea, select, .gr-textbox, .gr-number, .gr-dropdown, .gr-file, .gr-code {
-  background: color-mix(in oklab, var(--surface) 95%, transparent) !important; color: var(--ink) !important;
-  border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent) !important; border-radius: 10px !important; }
+  background: color-mix(in oklab, var(--surface) 96%, transparent) !important;
+  color: var(--ink) !important;
+  border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent) !important;
+  border-radius: 10px !important;
+}
+
+/* ---------- Buttons ---------- */
 button, .gr-button { border-radius: 10px !important; border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent) !important; }
-button.primary { background: linear-gradient(135deg, var(--primary), var(--secondary)) !important; color: white !important; }
-button.secondary { background: color-mix(in oklab, var(--surface) 85%, transparent) !important; color: var(--ink) !important; }
-.gr-chatbot { background: transparent !important; border: none !important; }
-.gr-chatbot .message { border-radius: 14px; padding: 12px 14px; font-size: 17px; line-height: 1.5; }
-.gr-chatbot .message.user { background: color-mix(in oklab, var(--secondary) 10%, transparent) !important;
-  border: 1px solid color-mix(in oklab, var(--secondary) 25%, transparent); }
-.gr-chatbot .message.bot { background: color-mix(in oklab, var(--primary) 10%, transparent) !important;
-  border: 1px solid color-mix(in oklab, var(--primary) 25%, transparent); }
+button.primary   { background: linear-gradient(135deg, var(--primary), var(--secondary)) !important; color: white !important; }
+button.secondary { background: color-mix(in oklab, var(--surface) 90%, transparent) !important; color: var(--ink) !important; }
+
+/* ---------- Accordion (Spaces uses <details>) ---------- */
+.gradio-container details {
+  margin: 10px 0;
+  background: transparent !important;
+  border: 0 !important;
+}
+.gradio-container details > summary {
+  list-style: none;
+  background: color-mix(in oklab, var(--surface) 98%, transparent);
+  border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
+  border-radius: 12px;
+  padding: 10px 14px;
+  font-weight: 600;
+  color: var(--ink);
+  cursor: pointer;
+}
+.gradio-container details > summary::-webkit-details-marker { display: none; }
+.gradio-container details[open] > summary {
+  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
+}
+.gradio-container details > div {
+  background: var(--surface);
+  border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
+  border-top: 0;
+  border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;
+  padding: 12px 14px;
+  box-shadow: 0 6px 16px rgba(0,0,0,.06);
+}
+
+/* ---------- Chatbot ---------- */
+.gr-chatbot {
+  background: color-mix(in oklab, var(--surface) 96%, transparent) !important;
+  border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent) !important;
+  border-radius: 14px !important;
+}
+.gr-chatbot .message {
+  border-radius: 14px; padding: 12px 14px; font-size: 17px; line-height: 1.5;
+}
+.gr-chatbot .message.user {
+  background: color-mix(in oklab, var(--secondary) 12%, transparent) !important;
+  border: 1px solid color-mix(in oklab, var(--secondary) 20%, transparent);
+}
+.gr-chatbot .message.bot {
+  background: color-mix(in oklab, var(--primary) 12%, transparent) !important;
+  border: 1px solid color-mix(in oklab, var(--primary) 20%, transparent);
+}
+
+/* ---------- Chips ---------- */
+.chip { padding:8px 12px; border-radius:999px; background: color-mix(in oklab, var(--primary) 12%, var(--surface));
+  color: var(--ink); border:1px solid color-mix(in oklab, var(--primary) 20%, transparent); user-select:none; }
+.chip:hover { filter:brightness(1.04); }
+
+/* ---------- Sample gallery ---------- */
 .section-hd { font-weight: 700; margin-bottom: 8px; color: var(--ink); }
-.gallery { display: grid; grid-template-columns: 1.3fr .9fr; gap: 14px; }
+.gallery { display:grid; grid-template-columns: 1.3fr .9fr; gap: 14px; }
 @media (max-width: 980px) { .gallery { grid-template-columns: 1fr; } }
+
 .file-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
 .file-card { background: color-mix(in oklab, var(--surface) 96%, transparent); border:1px solid color-mix(in oklab, var(--ink) 10%, transparent);
   border-radius: 12px; padding: 10px 12px; box-shadow:0 6px 16px rgba(0,0,0,.05); }
@@ -400,18 +470,28 @@ button.secondary { background: color-mix(in oklab, var(--surface) 85%, transpare
 .file-path { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; word-break: break-all; margin-top: 4px; }
 .pill { padding: 2px 8px; border-radius: 999px; background: color-mix(in oklab, var(--secondary) 14%, transparent); color: var(--ink);
   border:1px solid color-mix(in oklab, var(--secondary) 20%, transparent); }
+
 .tiles-wrap { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px; }
 .tile { background: color-mix(in oklab, var(--surface) 96%, transparent); border:1px solid color-mix(in oklab, var(--ink) 10%, transparent);
   border-radius:12px; padding:12px; box-shadow:0 6px 16px rgba(0,0,0,.06); display:flex; flex-direction:column; gap:6px; }
-.tile-hd { font-weight:700; color:var(--ink); } .tile-sub { color: var(--muted); font-size: 14px; }
+.tile-hd { font-weight:700; color:var(--ink); }
+.tile-sub { color: var(--muted); font-size: 14px; }
 .tile-path { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; word-break: break-all; }
 .badge-ok, .badge-miss { font-size: 11.5px; padding: 3px 8px; border-radius: 999px; color: white; width: fit-content; }
-.badge-ok { background: var(--success); } .badge-miss { background: var(--danger); }
+.badge-ok { background: var(--success); }
+.badge-miss { background: var(--danger); }
+
+/* ---------- Code blocks ---------- */
 .gr-code { background: var(--code) !important; color: #d9e1ff !important; border: 1px solid #1f2a44 !important; }
-/* Progress card */
-.progress-card { background: color-mix(in oklab, var(--surface) 96%, transparent);
-  border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent); border-radius: 12px; padding: 10px 12px;
-  box-shadow: 0 6px 16px rgba(0,0,0,.05); }
+
+/* ---------- Progress card ---------- */
+.progress-card {
+  background: color-mix(in oklab, var(--surface) 96%, transparent);
+  border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
+  border-radius: 12px;
+  padding: 10px 12px;
+  box-shadow: 0 6px 16px rgba(0,0,0,.05);
+}
 .progress-head { font-weight: 600; color: var(--ink); margin-bottom: 6px; }
 .pbar { height: 12px; width: 100%; background: #e8ebff; border-radius: 999px; overflow: hidden; }
 html[data-theme="dark"] .pbar { background: #2a2f57; }
@@ -423,7 +503,11 @@ html[data-theme="dark"] .pbar { background: #2a2f57; }
 # Pre-render samples gallery
 _initial_gallery_html = render_samples_panel(SAMPLES_DIR_DEFAULT)
 
-with gr.Blocks(title="Gemini File Search – Gradio Demo (Spaces)", css=custom_css) as demo:
+with gr.Blocks(
+    title="Gemini File Search – Gradio Demo (Spaces)",
+    css=custom_css,
+    theme=gr.themes.Soft(primary_hue="indigo", neutral_hue="slate"),
+) as demo:
     gr.HTML("""
     <div class="hero">
       <h1>Gemini File Search · RAG Demo</h1>
@@ -435,6 +519,7 @@ with gr.Blocks(title="Gemini File Search – Gradio Demo (Spaces)", css=custom_c
     store_state = gr.State(value="")
     chat_state = gr.State(value=[])
 
+    # API key
     with gr.Accordion("API key", open=True):
         gr.Markdown("_This Space **requires** your Gemini API key for each session. keys are **not** stored server-side._")
         with gr.Row():
@@ -442,6 +527,7 @@ with gr.Blocks(title="Gemini File Search – Gradio Demo (Spaces)", css=custom_c
             api_btn = gr.Button("Set key", elem_classes=["primary"])
         api_status = gr.Markdown()
 
+    # Build from samples
     with gr.Group():
         gr.Markdown("### Build a store from your `samples/` folder")
         with gr.Row():
@@ -453,6 +539,7 @@ with gr.Blocks(title="Gemini File Search – Gradio Demo (Spaces)", css=custom_c
         store_status = gr.Markdown()
         store_name_out = gr.Textbox(label="Active store name", interactive=False)
 
+    # Existing store
     with gr.Accordion("Use existing store (paste resource name)", open=False):
         gr.Markdown("_Paste a resource like `fileSearchStores/...` to switch the active store._")
         with gr.Row():
@@ -460,6 +547,7 @@ with gr.Blocks(title="Gemini File Search – Gradio Demo (Spaces)", css=custom_c
             use_existing_btn = gr.Button("Use store", elem_classes=["secondary"], scale=1)
         existing_status = gr.Markdown()
 
+    # Upload own files
     with gr.Accordion("Upload & index your own files", open=False):
         gr.Markdown("_Create or select a store. then upload any local file here._")
         with gr.Row():
@@ -477,11 +565,23 @@ with gr.Blocks(title="Gemini File Search – Gradio Demo (Spaces)", css=custom_c
         upload_status = gr.Markdown()
 
     gr.Markdown("---")
+    # Q&A
     gr.Markdown("### Ask grounded questions")
     with gr.Row():
         model = gr.Dropdown(label="Model", value=DEFAULT_MODEL, choices=["gemini-2.5-flash", "gemini-2.5-pro"], scale=1)
         metadata_filter = gr.Textbox(label="Optional metadata_filter (AIP-160)", placeholder='author="Jane Austen" AND year=1813', scale=2)
     chatbot = gr.Chatbot(label="Grounded Q&A", height=520, type="messages")
+
+    # Example chips
+    gr.Markdown("Try some examples:")
+    with gr.Row():
+        chip1 = gr.Button("Who is Mr. Darcy. what role does he play", elem_classes=["chip"])
+        chip2 = gr.Button("What is the opening line of Moby-Dick", elem_classes=["chip"])
+        chip3 = gr.Button("Summarize the tea party scene in Alice", elem_classes=["chip"])
+        chip4 = gr.Button("Give 3 clues Holmes uses in a story", elem_classes=["chip"])
+        chip5 = gr.Button("What is Pemberley. why is it important", elem_classes=["chip"])
+        chip6 = gr.Button("Who is Captain Ahab. what drives him", elem_classes=["chip"])
+
     with gr.Row():
         question_tb = gr.Textbox(placeholder="Type your question…", show_label=False, scale=5)
         ask_btn = gr.Button("Ask", elem_classes=["primary"], scale=1)
@@ -490,7 +590,16 @@ with gr.Blocks(title="Gemini File Search – Gradio Demo (Spaces)", css=custom_c
         grounding_md = gr.Code(label="grounding_metadata")
     note = gr.Markdown()
 
-    # Wire up
+    # Manage stores (optional tools)
+    with gr.Accordion("Manage stores", open=False):
+        list_btn = gr.Button("List my stores", elem_classes=["secondary"])
+        list_out = gr.Code()
+        with gr.Row():
+            del_name = gr.Textbox(label="Store name to delete")
+            del_btn = gr.Button("Delete store", elem_classes=["secondary"])
+        del_status = gr.Markdown()
+
+    # Wiring
     api_btn.click(ui_set_api_key, [api_tb], [client_state, api_status], show_progress=True)
 
     samples_dir_tb.change(render_samples_panel, [samples_dir_tb], [samples_preview], show_progress=False)
@@ -509,6 +618,13 @@ with gr.Blocks(title="Gemini File Search – Gradio Demo (Spaces)", css=custom_c
         show_progress=True,
     ).then(lambda s: s, [store_state], [store_name_out], show_progress=False)
 
+    create_empty_btn.click(
+        make_empty_store,
+        [client_state, upload_store_dn],
+        [store_state, upload_status],
+        show_progress=True,
+    ).then(lambda s: s, [store_state], [store_name_out], show_progress=False)
+
     upload_btn.click(
         upload_and_index,
         [client_state, store_state, file_uploader, disp_file_name, max_tokens, overlap_tokens],
@@ -530,6 +646,17 @@ with gr.Blocks(title="Gemini File Search – Gradio Demo (Spaces)", css=custom_c
     clear_btn.click(lambda: ([], "", ""), None, [chatbot, grounding_md, note], show_progress=False)\
              .then(lambda: [], None, [chat_state], show_progress=False)
 
+    # Chips → prefill the question textbox
+    chip1.click(lambda: "Who is Mr. Darcy. what role does he play in the story", None, [question_tb], show_progress=False)
+    chip2.click(lambda: "What is the opening line of Moby-Dick", None, [question_tb], show_progress=False)
+    chip3.click(lambda: "Summarize the tea party scene and why it is absurd", None, [question_tb], show_progress=False)
+    chip4.click(lambda: "Give 3 clues Holmes uses in any one Sherlock Holmes story", None, [question_tb], show_progress=False)
+    chip5.click(lambda: "What is Pemberley. why is it important in Pride and Prejudice", None, [question_tb], show_progress=False)
+    chip6.click(lambda: "Who is Captain Ahab. what drives his obsession", None, [question_tb], show_progress=False)
+
+    # Tools
+    list_btn.click(list_stores, [client_state], [list_out], show_progress=True)
+    del_btn.click(delete_store, [client_state, del_name], [del_status], show_progress=True)
+
 if __name__ == "__main__":
-    # On Spaces. the default launch is fine. queue enables progress bars
     demo.queue().launch()