Update app.py

app.py

@@ -12,166 +12,106 @@ print("google-genai version loaded")
 # For Hugging Face Spaces, use Secrets
 GOOGLE_API_KEY = os.environ.get("GOOGLE_API_KEY", "")
 
-TITLE = """<h1 align="center" style="
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
-    -webkit-background-clip: text; 
-    -webkit-text-fill-color: transparent; 
-    background-clip: text;
-    font-size: 2.8em; 
-    font-weight: 800; 
-    margin: 20px 0 10px 0;
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);">
-    💬 Gemini AI Chatbot
-</h1>"""
+TITLE = """<h1 align="center" style="background: linear-gradient(90deg, #9D50BB 0%, #6E48AA 50%, #4A90E2 100%); 
+-webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 3em; font-weight: bold; margin-bottom: 10px;">
+Gemini Chatbot 🔥 with Kelwa</h1>"""
 
-SUBTITLE = """<h3 align="center" style="
-    color: #5a67d8; 
-    font-size: 1.3em; 
-    margin: 10px 0 5px 0;
-    font-weight: 600;">
-    🎨 Powered by Google Gemini AI
-</h3>"""
+SUBTITLE = """<h2 align="center" style="color: #B19CD9; font-size: 1.5em; margin-top: 0;">
+🎨 Create with Multimodal Gemini</h2>"""
 
 DESCRIPTION = """
-<p align="center" style="
-    color: #4a5568; 
-    font-size: 1.05em;
-    margin: 15px auto;
-    max-width: 600px;
-    line-height: 1.6;">
-    Chat with Google's advanced AI model. Get your free API key from 
-    <a href="https://aistudio.google.com/app/apikey" 
-       target="_blank" 
-       style="color: #667eea; font-weight: 600; text-decoration: none; border-bottom: 2px solid #667eea;">
-        Google AI Studio
-    </a>
+<p align="center" style="color: #6E48AA; font-size: 1.1em;">
+Enter your Google API Key to start chatting with Gemini AI! Get your API key from 
+<a href="https://aistudio.google.com/app/apikey" target="_blank" style="color: #9D50BB; font-weight: bold;">Google AI Studio</a>
 </p>
 """
 
 IMAGE_WIDTH = 512
 
-# Improved Custom CSS with better colors and contrast
+# Custom CSS for purple and baby blue theme
 CUSTOM_CSS = """
-/* Main container with soft gradient */
 .gradio-container {
     max-width: 1400px !important;
     margin: auto !important;
-    background: linear-gradient(to bottom, #f7fafc 0%, #edf2f7 100%) !important;
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
+    background: linear-gradient(to bottom, #f0e6ff 0%, #e6f3ff 100%) !important;
+}
+
+.contain {
+    max-width: 100% !important;
 }
 
-/* Better button styling */
 button {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    background: linear-gradient(90deg, #9D50BB 0%, #6E48AA 100%) !important;
     border: none !important;
     color: white !important;
     font-weight: 600 !important;
-    border-radius: 10px !important;
-    padding: 12px 24px !important;
+    border-radius: 8px !important;
+    padding: 10px 20px !important;
     transition: all 0.3s ease !important;
-    box-shadow: 0 4px 6px rgba(102, 126, 234, 0.2) !important;
 }
 
 button:hover {
-    background: linear-gradient(135deg, #5a67d8 0%, #6b46a1 100%) !important;
-    transform: translateY(-2px) !important;
-    box-shadow: 0 6px 12px rgba(102, 126, 234, 0.3) !important;
+    background: linear-gradient(90deg, #B19CD9 0%, #89CFF0 100%) !important;
+    transform: scale(1.05) !important;
 }
 
-button:active {
-    transform: translateY(0px) !important;
-}
-
-/* Input fields with better visibility */
-.input-text, textarea, input[type="text"], input[type="password"] {
-    border: 2px solid #cbd5e0 !important;
+.input-text, textarea, input {
+    border: 2px solid #B19CD9 !important;
     border-radius: 10px !important;
-    padding: 12px !important;
-    background: white !important;
-    color: #2d3748 !important;
-    font-size: 15px !important;
+    padding: 10px !important;
 }
 
 .input-text:focus, textarea:focus, input:focus {
-    border-color: #667eea !important;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
+    border-color: #6E48AA !important;
+    box-shadow: 0 0 10px rgba(157, 80, 187, 0.3) !important;
     outline: none !important;
-    background: #ffffff !important;
 }
 
-/* Labels with better readability */
 label {
-    color: #2d3748 !important;
+    color: #6E48AA !important;
     font-weight: 600 !important;
-    font-size: 14px !important;
     margin-bottom: 8px !important;
 }
 
-/* Chatbot container */
-.chatbot {
-    border: 2px solid #e2e8f0 !important;
-    border-radius: 15px !important;
-    background: white !important;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
+/* Chatbot message styling */
+.message-wrap {
+    padding: 10px !important;
 }
 
-/* User messages - vibrant purple */
-.message.user, .user {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+.user {
+    background: linear-gradient(135deg, #9D50BB 0%, #6E48AA 100%) !important;
     color: white !important;
-    border-radius: 18px 18px 4px 18px !important;
+    border-radius: 15px !important;
     padding: 12px 16px !important;
-    margin: 8px 0 !important;
-    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2) !important;
-    font-size: 15px !important;
-    line-height: 1.5 !important;
 }
 
-/* Bot messages - soft blue with better contrast */
-.message.bot, .bot {
-    background: linear-gradient(135deg, #ebf4ff 0%, #e0e7ff 100%) !important;
-    color: #1a202c !important;
-    border-radius: 18px 18px 18px 4px !important;
+.bot {
+    background: linear-gradient(135deg, #E6F3FF 0%, #D4E4F7 100%) !important;
+    color: #333 !important;
+    border-radius: 15px !important;
     padding: 12px 16px !important;
-    margin: 8px 0 !important;
-    border-left: 4px solid #667eea !important;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
-    font-size: 15px !important;
-    line-height: 1.6 !important;
+    border-left: 4px solid #89CFF0 !important;
 }
 
 /* Accordion styling */
 .accordion {
-    background: white !important;
-    border: 2px solid #e2e8f0 !important;
-    border-radius: 12px !important;
-    margin: 15px 0 !important;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
+    background: rgba(177, 156, 217, 0.1) !important;
+    border: 2px solid #B19CD9 !important;
+    border-radius: 10px !important;
+    margin: 10px 0 !important;
 }
 
-/* Image upload area */
+/* Image container */
 .image-container {
-    border: 3px dashed #cbd5e0 !important;
+    border: 3px solid #89CFF0 !important;
     border-radius: 15px !important;
-    padding: 15px !important;
+    padding: 10px !important;
     background: white !important;
-    transition: all 0.3s ease !important;
-}
-
-.image-container:hover {
-    border-color: #667eea !important;
-    background: #f7fafc !important;
 }
 
 /* Slider styling */
 input[type="range"] {
-    accent-color: #667eea !important;
-}
-
-/* Info text */
-.info {
-    color: #718096 !important;
-    font-size: 13px !important;
+    accent-color: #9D50BB !important;
 }
 
 /* Better spacing */
@@ -180,62 +120,13 @@ input[type="range"] {
 }
 
 .block {
-    padding: 20px !important;
-    border-radius: 12px !important;
-    background: white !important;
+    padding: 15px !important;
+    border-radius: 10px !important;
 }
 
-/* Remove footer */
 footer {
     display: none !important;
 }
-
-/* Placeholder text */
-::placeholder {
-    color: #a0aec0 !important;
-    opacity: 1 !important;
-}
-
-/* Scrollbar styling */
-::-webkit-scrollbar {
-    width: 10px;
-}
-
-::-webkit-scrollbar-track {
-    background: #f1f1f1;
-    border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: linear-gradient(135deg, #5a67d8 0%, #6b46a1 100%);
-}
-
-/* Example prompts styling */
-.examples {
-    background: white !important;
-    border-radius: 12px !important;
-    padding: 15px !important;
-    border: 2px solid #e2e8f0 !important;
-}
-
-/* Better contrast for dark text */
-.markdown-text {
-    color: #2d3748 !important;
-}
-
-/* Success/Error messages */
-.success {
-    color: #38a169 !important;
-}
-
-.error {
-    color: #e53e3e !important;
-}
 """
 
 # ===================== HELPERS =====================
@@ -274,6 +165,7 @@ def user(message: str, history: Optional[List[Dict]]) -> tuple:
         if not message or message.strip() == "":
             return "", history
         
+        # Messages format: list of dicts with 'role' and 'content'
         history.append({"role": "user", "content": message.strip()})
         return "", history
     except Exception as e:
@@ -292,36 +184,42 @@ def bot(
 ):
     """Generate bot response with comprehensive error handling."""
     try:
+        # Validate history
         if not history or len(history) == 0:
             yield history or []
             return
         
+        # Validate API key
         api_key = google_key.strip() if google_key else GOOGLE_API_KEY
         if not api_key:
             history.append({
                 "role": "assistant",
-                "content": "🔑 **API Key Required**\n\nPlease enter your Google API key to start chatting.\n\nGet your free API key from [Google AI Studio](https://aistudio.google.com/app/apikey)"
+                "content": "❌ **Error**: API key is missing. Please provide a valid Google API key in the textbox below.\n\nGet your free API key from [Google AI Studio](https://aistudio.google.com/app/apikey)"
             })
             yield history
             return
         
+        # Configure API with new package
         try:
             client = genai.Client(api_key=api_key)
         except Exception as e:
             history.append({
                 "role": "assistant",
-                "content": f"❌ **Invalid API Key**\n\n{str(e)}\n\nPlease check your API key and try again."
+                "content": f"❌ **Error**: Invalid API key.\n\n{str(e)}\n\nPlease check your API key and try again."
             })
             yield history
             return
         
+        # Get user message
         user_message = history[-1]["content"]
         
+        # Validate parameters
         temperature = max(0.0, min(2.0, float(temperature)))
         max_output_tokens = max(1, min(8192, int(max_output_tokens)))
         top_k = max(1, min(100, int(top_k))) if top_k > 0 else None
         top_p = max(0.0, min(1.0, float(top_p)))
         
+        # Build config
         config = types.GenerateContentConfig(
             temperature=temperature,
             max_output_tokens=max_output_tokens,
@@ -332,6 +230,7 @@ def bot(
         if preprocess_stop_sequences(stop_sequences):
             config.stop_sequences = preprocess_stop_sequences(stop_sequences)
         
+        # Prepare content
         if image_prompt is None:
             contents = [user_message]
         else:
@@ -339,12 +238,13 @@ def bot(
             if processed_image is None:
                 history.append({
                     "role": "assistant",
-                    "content": "⚠️ **Image Processing Failed**\n\nCould not process the image. Please try uploading another image."
+                    "content": "❌ **Error**: Could not process the image. Please try uploading another image."
                 })
                 yield history
                 return
             contents = [user_message, processed_image]
         
+        # Generate response
         try:
             response = client.models.generate_content_stream(
                 model='gemini-2.0-flash-exp',
@@ -360,20 +260,24 @@ def bot(
                     yield history
                     time.sleep(0.01)
             
+            # Handle empty response
             if not history[-1]["content"]:
-                history[-1]["content"] = "⚠️ **No Response**\n\nThe content may have been blocked by safety filters. Please try a different prompt."
+                history[-1]["content"] = "⚠️ No response generated. The content may have been blocked by safety filters. Please try a different prompt."
                 yield history
                 
         except Exception as e:
             error_message = str(e)
             if "API_KEY_INVALID" in error_message or "invalid" in error_message.lower():
-                error_msg = "❌ **Invalid API Key**\n\nPlease check your Google API key and try again."
+                error_msg = "❌ **Invalid API Key**. Please check your Google API key and try again."
             elif "quota" in error_message.lower():
-                error_msg = "⚠️ **Quota Exceeded**\n\nYou've reached the API usage limit. Please try again later."
+                error_msg = "❌ **Quota Exceeded**. You've reached the API usage limit. Please try again later or check your quota."
             else:
-                error_msg = f"❌ **Error**\n\n{error_message}"
+                error_msg = f"❌ **Error generating response**: {error_message}"
             
-            history.append({"role": "assistant", "content": error_msg})
+            history.append({
+                "role": "assistant",
+                "content": error_msg
+            })
             yield history
             return
             
@@ -382,7 +286,7 @@ def bot(
         if history:
             history.append({
                 "role": "assistant",
-                "content": f"❌ **Critical Error**\n\n{str(e)}"
+                "content": f"❌ **Critical error**: {str(e)}"
             })
         yield history or []
 
@@ -391,7 +295,7 @@ def clear_chat():
     return [], None
 
 # ===================== UI =====================
-with gr.Blocks(title="Gemini AI Chatbot") as demo:
+with gr.Blocks(title="Gemini Chatbot with Kelwa") as demo:
     
     # Header
     gr.HTML(TITLE)
@@ -400,45 +304,43 @@ with gr.Blocks(title="Gemini AI Chatbot") as demo:
     
     # Main chat interface
     with gr.Row(equal_height=False):
-        with gr.Column(scale=1, min_width=320):
+        with gr.Column(scale=1, min_width=300):
             image_prompt = gr.Image(
                 type="pil",
-                label="📸 Upload Image (Optional)",
-                height=300,
+                label="🖼️ Upload Image (Optional)",
+                height=350,
                 elem_classes="image-container"
             )
             
             api_key = gr.Textbox(
                 label="🔑 Google API Key",
                 type="password",
-                placeholder="Paste your API key here...",
-                info="Get it free from Google AI Studio"
+                placeholder="Enter your Google API key here...",
+                info="Your API key is not stored. Get one from Google AI Studio."
             )
             
-            with gr.Row():
-                clear_btn = gr.Button("🗑️ Clear Chat", variant="secondary", size="sm", scale=1)
+            clear_btn = gr.Button("🗑️ Clear Chat", variant="secondary", size="sm")
         
         with gr.Column(scale=2):
             chatbot = gr.Chatbot(
-                label="💬 Chat with Gemini",
-                height=500,
-                elem_classes="chatbot"
+                label="💬 Gemini Chat",
+                height=550
             )
     
     # Message input
     with gr.Row():
         msg = gr.Textbox(
-            placeholder="💭 Type your message and press Enter...",
-            label="Message",
+            placeholder="✨ Type your message here and press Enter...",
+            label="Your Message",
             show_label=False,
             scale=9,
             lines=2,
-            max_lines=6
+            max_lines=5
         )
-        submit_btn = gr.Button("📤 Send", scale=1, variant="primary")
+        submit_btn = gr.Button("Send 📤", scale=1, variant="primary")
     
     # Parameters accordion
-    with gr.Accordion("⚙️ Advanced Settings", open=False):
+    with gr.Accordion("⚙️ Generation Parameters", open=False):
         with gr.Row():
             temperature = gr.Slider(
                 minimum=0,
@@ -446,53 +348,53 @@ with gr.Blocks(title="Gemini AI Chatbot") as demo:
                 value=1.0,
                 step=0.1,
                 label="🌡️ Temperature",
-                info="Controls creativity (higher = more creative)"
+                info="Higher = more creative, Lower = more focused"
             )
             max_tokens = gr.Slider(
                 minimum=100,
                 maximum=8192,
                 value=2048,
                 step=100,
-                label="📝 Max Tokens",
-                info="Maximum response length"
-            )
-        
-        with gr.Row():
-            top_k = gr.Slider(
-                minimum=0,
-                maximum=100,
-                value=40,
-                step=1,
-                label="🔝 Top-K",
-                info="Token selection pool size"
-            )
-            top_p = gr.Slider(
-                minimum=0,
-                maximum=1,
-                value=0.95,
-                step=0.05,
-                label="📊 Top-P",
-                info="Nucleus sampling threshold"
+                label="📝 Max Output Tokens",
+                info="Maximum length of response"
             )
         
         stop_seq = gr.Textbox(
-            label="🛑 Stop Sequences",
-            placeholder="STOP, END (comma-separated)",
+            label="🛑 Stop Sequences (comma-separated)",
+            placeholder="STOP, END, ###",
             info="Optional sequences to stop generation",
             value=""
         )
+        
+        with gr.Accordion("🔬 Advanced Parameters", open=False):
+            with gr.Row():
+                top_k = gr.Slider(
+                    minimum=0,
+                    maximum=100,
+                    value=40,
+                    step=1,
+                    label="🔝 Top-K",
+                    info="Limits token selection pool (0 = disabled)"
+                )
+                top_p = gr.Slider(
+                    minimum=0,
+                    maximum=1,
+                    value=0.95,
+                    step=0.01,
+                    label="📊 Top-P (Nucleus)",
+                    info="Cumulative probability threshold"
+                )
     
     # Examples
     gr.Examples(
         examples=[
             ["Explain quantum computing in simple terms"],
-            ["Write a Python function to reverse a string"],
-            ["What are 5 tips for better sleep?"],
-            ["Tell me a creative short story about AI"],
+            ["Write a Python function to sort a list"],
+            ["What are the health benefits of meditation?"],
+            ["Create a short story about a robot learning to paint"],
         ],
         inputs=msg,
-        label="💡 Try these examples",
-        elem_classes="examples"
+        label="💡 Example Prompts"
     )
     
     # Event handlers
@@ -503,7 +405,16 @@ with gr.Blocks(title="Gemini AI Chatbot") as demo:
         queue=False
     ).then(
         bot,
-        inputs=[api_key, image_prompt, temperature, max_tokens, stop_seq, top_k, top_p, chatbot],
+        inputs=[
+            api_key,
+            image_prompt,
+            temperature,
+            max_tokens,
+            stop_seq,
+            top_k,
+            top_p,
+            chatbot
+        ],
         outputs=chatbot
     )
     
@@ -514,7 +425,16 @@ with gr.Blocks(title="Gemini AI Chatbot") as demo:
         queue=False
     ).then(
         bot,
-        inputs=[api_key, image_prompt, temperature, max_tokens, stop_seq, top_k, top_p, chatbot],
+        inputs=[
+            api_key,
+            image_prompt,
+            temperature,
+            max_tokens,
+            stop_seq,
+            top_k,
+            top_p,
+            chatbot
+        ],
         outputs=chatbot
     )
     
@@ -528,12 +448,10 @@ if __name__ == "__main__":
     demo.queue(max_size=20)
     demo.launch(
         theme=gr.themes.Soft(
-            primary_hue="indigo",
+            primary_hue="purple",
             secondary_hue="blue",
-            neutral_hue="slate",
             spacing_size="md",
-            radius_size="lg",
-            font=["Inter", "ui-sans-serif", "system-ui", "sans-serif"]
+            radius_size="lg"
         ),
         css=CUSTOM_CSS,
         ssr_mode=False