Update app.py

app.py

@@ -2,7 +2,7 @@ import os
 import gradio as gr
 from groq import Groq
 
-# ✅ Load API Key
+# ✅ Load Groq API Key
 GROQ_API_KEY = os.environ.get("GROQ_API_KEY")
 if not GROQ_API_KEY:
     raise ValueError("❌ Add your GROQ_API_KEY in Hugging Face Secrets!")
@@ -10,28 +10,23 @@ if not GROQ_API_KEY:
 MODEL_NAME = "llama3-8b-8192"
 
 SYSTEM_PROMPT = """
-You are Dr Cat, a caring and expert cat advisor.
-You can give advice based on user questions, images, or videos they upload about their cats.
-Be clear, kind and helpful.
+You are Dr Cat, a friendly cat expert.
+You answer questions and give advice based on user text, photos or videos.
+Be kind, clear and caring.
 """
 
-# 🐱 Chat function
-def chat(user_input, cat_image, cat_video, history=[]):
+# 🔁 Chat function
+def chat(user_input, image_file, video_file, history=[]):
     try:
         context = ""
-
-        if cat_image is not None:
-            context += "\n[User uploaded a cat photo]"
-        if cat_video is not None:
-            context += "\n[User uploaded a cat video]"
+        if image_file: context += "\n[User uploaded a cat photo]"
+        if video_file: context += "\n[User uploaded a cat video]"
 
         client = Groq(api_key=GROQ_API_KEY)
-
         messages = [{"role": "system", "content": SYSTEM_PROMPT}]
         for user_msg, bot_msg in history:
             messages.append({"role": "user", "content": user_msg})
             messages.append({"role": "assistant", "content": bot_msg})
-
         full_input = user_input + context
         messages.append({"role": "user", "content": full_input})
 
@@ -49,9 +44,9 @@ def chat(user_input, cat_image, cat_video, history=[]):
     except Exception as e:
         return f"❌ Error: {str(e)}", None, None, history
 
-# ✅ UI blocks
+# ✅ Gradio Blocks
 with gr.Blocks(
-    title="🐱 Dr Cat - Cat Care with Pics & Voice",
+    title="🐱 Dr Cat",
     theme=gr.themes.Base(primary_hue="pink", secondary_hue="rose")
 ) as demo:
     gr.Markdown(
@@ -59,23 +54,37 @@ with gr.Blocks(
         <div style="text-align:center">
             <img src="https://cdn-icons-png.flaticon.com/512/616/616408.png" width="80">
             <h1>🐱 Dr Cat</h1>
-            <p><b>Welcome!</b> Upload your cat’s photo or video, or speak/type your question.</p>
+            <p>Ask me anything about your cat. Upload a photo 📸, video 🎥 or speak 🎙️!</p>
         </div>
         """
     )
 
     chatbot = gr.Chatbot(label="🐈 Dr Cat", height=400)
-    msg = gr.Textbox(label="Your Question", placeholder="Type your cat question...", lines=2)
-    img_input = gr.Image(label="Upload Cat Photo", type="filepath")
-    vid_input = gr.Video(label="Upload Cat Video (optional)")
-    send_btn = gr.Button("Ask Dr Cat")
+    msg = gr.Textbox(label="Type your question...", placeholder="Type here...", lines=2)
+
+    with gr.Row():
+        # 👇 Hidden Uploads
+        image = gr.File(label="Cat Photo", visible=False, file_types=["image"])
+        video = gr.File(label="Cat Video", visible=False, file_types=["video"])
+        audio = gr.Audio(source="microphone", type="filepath", visible=False)
+
+        # 👇 Icon Buttons
+        photo_btn = gr.Button("📸", size="sm")
+        video_btn = gr.Button("🎥", size="sm")
+        mic_btn = gr.Button("🎙️", size="sm")
+        send_btn = gr.Button("Ask Dr Cat", size="sm")
 
     state = gr.State([])
 
+    # 👇 Logic: show upload when icon clicked
+    photo_btn.click(None, None, image, js="() => document.querySelector('input[type=file]').click()")
+    video_btn.click(None, None, video, js="() => document.querySelector('input[type=file]').click()")
+    mic_btn.click(None, None, audio, js="() => {}")  # Needs Whisper hook if using voice
+
     send_btn.click(
         fn=chat,
-        inputs=[msg, img_input, vid_input, state],
-        outputs=[msg, img_input, vid_input, chatbot],
+        inputs=[msg, image, video, state],
+        outputs=[msg, image, video, chatbot],
     )
 
 demo.launch()