Update app.py

app.py

@@ -6,9 +6,7 @@ from google import genai
 client = genai.Client(api_key=os.environ.get("GEMINI_API_KEY"))
 
 def get_definitions(text):
-    """
-    Fetch dictionary-like definitions for multiple words using Gemini.
-    """
+    """Fetch dictionary-like definitions for multiple words using Gemini."""
     if not text.strip():
         return "⚠️ Please enter one or more words."
 
@@ -17,14 +15,16 @@ def get_definitions(text):
 
     for word in words:
         prompt = f"""
-        You are a creative and accurate dictionary assistant.
-        Provide a clear, concise definition, pronunciation, and example
+        You are a helpful, modern dictionary assistant.
+        Provide a clear, concise definition, pronunciation, part of speech, and an example
         for the word "{word}".
-        Format neatly using markdown with emojis and structure like:
-        **Word:** ...
-        **Pronunciation:** ...
-        **Definition:** ...
-        **Example:** ...
+        Format neatly using markdown like this:
+
+        🪶 **Word:** ...
+        🔊 **Pronunciation:** ...
+        📘 **Part of Speech:** ...
+        💡 **Definition:** ...
+        ✨ **Example:** ...
         """
         try:
             response = client.models.generate_content(
@@ -37,33 +37,76 @@ def get_definitions(text):
 
     return "\n\n---\n\n".join(results)
 
-# --- CSS for modern UI ---
+# --- Modern soft theme CSS ---
 custom_css = """
-body {background: linear-gradient(to bottom right, #1e3c72, #2a5298);}
-.gradio-container {font-family: 'Inter', sans-serif;}
-.gr-button {background-color: #4CAF50 !important; color: white !important;}
-.gr-text-input {border-radius: 10px !important;}
+body {
+    background: linear-gradient(135deg, #f0f4ff, #e8f0fe);
+    font-family: 'Inter', sans-serif;
+}
+
+.gradio-container {
+    max-width: 800px !important;
+    margin: auto;
+    padding-top: 40px;
+}
+
+h1 {
+    color: #2b2d42;
+    font-weight: 700;
+}
+
+.gr-text-input, .gr-button, .gr-markdown {
+    border-radius: 12px !important;
+}
+
+.gr-text-input {
+    background-color: #ffffff !important;
+    border: 1px solid #d3d9f0 !important;
+    box-shadow: 0px 2px 6px rgba(0,0,0,0.05);
+    margin-bottom: 20px !important;
+}
+
+.gr-button {
+    background-color: #4c6ef5 !important;
+    color: white !important;
+    font-weight: 600 !important;
+    transition: 0.3s;
+    box-shadow: 0px 2px 6px rgba(0,0,0,0.1);
+}
+
+.gr-button:hover {
+    background-color: #364fc7 !important;
+}
+
+.output-card {
+    background-color: #ffffff;
+    border: 1px solid #dee2f0;
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
+    margin-top: 30px;
+}
 footer {display:none !important;}
 """
 
 # --- Gradio UI ---
 with gr.Blocks(css=custom_css, title="Modern AI Dictionary") as demo:
-    gr.Markdown("<h1 style='text-align:center; color:white;'>📘 Modern AI Dictionary</h1>")
-    gr.Markdown("<p style='text-align:center; color:#e0e0e0;'>Enter multiple words separated by commas.</p>")
+    gr.Markdown("<h1 style='text-align:center;'>📘 Modern AI Dictionary</h1>")
+    gr.Markdown("<p style='text-align:center; color:#555;'>Type multiple words separated by commas to explore their meanings.</p>")
     
-    with gr.Row():
+    with gr.Column():
         word_input = gr.Textbox(
             placeholder="e.g. serendipity, eloquent, ephemeral",
             label="Enter word(s)",
             lines=2
         )
-    with gr.Row():
-        output = gr.Markdown()
-    with gr.Row():
+
         btn = gr.Button("🔍 Get Meanings")
+        
+        with gr.Column(elem_classes="output-card"):
+            output = gr.Markdown()
 
     btn.click(fn=get_definitions, inputs=word_input, outputs=output)
 
-# Launch app
 if __name__ == "__main__":
     demo.launch()