Update app.py

app.py

@@ -29,7 +29,7 @@ def ui_set_api_key(api_key: str):
         return None, "❌ API key required."
     try:
         client = genai.Client(api_key=api_key)
-        return client, "✅ API key set."
+        return client, "✅ API key set — good to go."
     except Exception as e:
         return None, f"❌ Failed to set API key: {e}"
 
@@ -38,7 +38,7 @@ def upload_and_index(client_state, file_obj, progress=gr.Progress(track_tqdm=Tru
         yield None, "❌ Set API key first.", _progress_html(0, "Waiting for API key")
         return
     if file_obj is None:
-        yield None, "⚠️ Please upload a file.", _progress_html(0, "Waiting")
+        yield None, "⚠️ Please upload a file to index.", _progress_html(0, "Waiting")
         return
 
     client = _require_client(client_state)
@@ -60,6 +60,7 @@ def upload_and_index(client_state, file_obj, progress=gr.Progress(track_tqdm=Tru
         file_name=uploaded.name,
         config=import_cfg,
     )
+
     tick = 0
     spinner = ["⠋","⠙","⠹","⠸","⠼","⠴","⠦","⠧","⠇","⠏"]
     while not op.done:
@@ -72,7 +73,7 @@ def upload_and_index(client_state, file_obj, progress=gr.Progress(track_tqdm=Tru
         yield store_name, f"Indexing **{fname}** …", _progress_html(overall, f"Indexing {fname}")
         op = client.operations.get(op)
 
-    yield store_name, f"✅ File indexed into store `{store_name}`", _progress_html(100, "Done")
+    yield store_name, f"✅ File indexed into store `{store_name}`", _progress_html(100, "Completed!")
 
 def ask(client_state, store_name: str, history, question: str, model_id: str):
     if client_state is None:
@@ -102,42 +103,58 @@ def ask(client_state, store_name: str, history, question: str, model_id: str):
 
     return history, history
 
+# Custom CSS for nicer look
 custom_css = """
-/* Optional: add your custom CSS here */
+body {background-color: #f5f7fa;}
+.gradio-container {max-width: 800px; margin: auto; padding-top: 20px;}
+.header {text-align: center; margin-bottom: 30px;}
+h1 {color: #4F46E5; margin-bottom: 5px;}
+h2 {color: #334155;}
+.progress-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px 10px; margin: 4px 0; }
+.pbar {height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; margin: 6px 0;}
+.pbar-fill {height: 100%; background: #4F46E5; transition: width .3s ease;}
+.gr-box, .gr-panel { border-radius: 10px !important; }
+.gr-button.primary { background-color: #4F46E5 !important; color: white !important; }
+.gr-button { border-radius: 6px !important; }
+.gr-file, .gr-textbox { border-radius: 6px !important; }
 """
 
-with gr.Blocks(title="Gemini File Search – Upload & Chat Demo") as demo:
+with gr.Blocks() as demo:
     gr.HTML(f"<style>{custom_css}</style>")
 
+    # Header
+    gr.Markdown("# 📄 Gemini File-Chat Demo", elem_classes="header")
+    gr.Markdown("Upload a document and ask questions — get grounded answers from the file.", elem_classes="header")
+    
     client_state = gr.State(value=None)
     store_state = gr.State(value="")
     chat_state = gr.State(value=[])
 
-    with gr.Accordion("API Key (required)", open=True):
-        api_tb = gr.Textbox(label="Gemini API key", placeholder="Paste your API key…", type="password")
-        api_btn = gr.Button("Set API Key")
+    with gr.Accordion("🔑 API Key (required)", open=True):
+        api_tb = gr.Textbox(label="Gemini API key", placeholder="Paste your API key here…", type="password")
+        api_btn = gr.Button("Set API Key", elem_classes=["primary"])
         api_status = gr.Markdown()
 
-    with gr.Row():
-        file_uploader = gr.File(label="Upload file to index")
-        upload_btn = gr.Button("Upload & Index", elem_classes=["primary"])
-    upload_status = gr.Markdown()
+    with gr.Box():
+        gr.Markdown("### 1) Upload & Index your file")
+        with gr.Row():
+            file_uploader = gr.File(label="Choose file to upload", file_types=['.txt', '.pdf', '.docx'])
+            upload_btn = gr.Button("Upload & Index", elem_classes=["primary"])
+        upload_status = gr.Markdown()
 
     gr.Markdown("---")
-    gr.Markdown("### Ask questions about the uploaded file")
-    question_tb = gr.Textbox(placeholder="Type your question…", show_label=False)
-    ask_btn = gr.Button("Ask")
+    gr.Markdown("### 2) Ask questions about your file")
+    question_tb = gr.Textbox(label="Your question", placeholder="Type a question…")
+    ask_btn = gr.Button("Ask", elem_classes=["primary"])
     chatbot = gr.Chatbot()
 
     api_btn.click(ui_set_api_key, [api_tb], [client_state, api_status])
-
     upload_btn.click(
         upload_and_index,
         [client_state, file_uploader],
         [store_state, upload_status, upload_btn],
         show_progress=True
     )
-
     ask_btn.click(
         ask,
         [client_state, store_state, chat_state, question_tb, gr.State(DEFAULT_MODEL)],
@@ -145,6 +162,4 @@ with gr.Blocks(title="Gemini File Search – Upload & Chat Demo") as demo:
     )
 
 if __name__ == "__main__":
-    demo.launch(
-        theme=gr.themes.Soft(primary_hue="indigo", neutral_hue="slate")
-    )
+    demo.launch(theme=gr.themes.Soft())