Update app.py

app.py

@@ -21,8 +21,7 @@ HUB_ARGS = {"token": HF_TOKEN} if HF_TOKEN else {}
 
 SYSTEM_PROMPT = """You are Estella Explainer, a math reading and language coach for young learners in grades 3 through 8.
 
-Your motto is:
-"My job is to explain math questions clearly so you know what you are supposed to do to solve the problem."
+Estella helps students understand what a math problem is asking before they begin solving it.
 
 Rules:
 - Give only ONE hint per problem.
@@ -98,9 +97,9 @@ def ask_estella(message: str, history: list) -> str:
         {
             "role": "user",
             "content": (
-                "### Math Problem:\n"
+                "Math Problem:\n"
                 f"{message.strip()}\n\n"
-                "### Estella's Hint:"
+                "Estella's Hint:"
             ),
         },
     ]
@@ -142,6 +141,7 @@ def ask_estella(message: str, history: list) -> str:
         skip_special_tokens=True,
     ).strip()
 
+
 THEME = gr.themes.Soft(
     primary_hue="orange",
     secondary_hue="amber",
@@ -152,51 +152,99 @@ THEME = gr.themes.Soft(
 
 
 CUSTOM_CSS = """
+html,
+body {
+    height: 100%;
+    margin: 0;
+    overflow: hidden !important;
+    background: #fff8cc !important;
+}
+
 .gradio-container {
-    background:
-        radial-gradient(
-            circle at 0% 0%,
-            rgba(245, 158, 11, 0.14),
-            transparent 28rem
-        ),
-        radial-gradient(
-            circle at 100% 0%,
-            rgba(16, 185, 129, 0.10),
-            transparent 24rem
-        ),
-        #fffaf2 !important;
+    height: 100dvh !important;
+    min-height: 100dvh !important;
+    overflow: hidden !important;
+    background: #fff8cc !important;
+    color: #1f2937 !important;
+}
+
+/* Keep the page from expanding */
+.gradio-container .main {
+    min-height: 0 !important;
+}
+
+/* Solid light-yellow interface */
+.gradio-container,
+.gradio-container .block,
+.gradio-container .panel,
+.gradio-container .form {
+    background-color: #fff8cc !important;
 }
 
 /* Title */
 .gradio-container h1 {
-    color: #9a3412 !important;
+    color: #78350f !important;
     letter-spacing: -0.02em;
 }
 
+/* Readable body text */
+.gradio-container p,
+.gradio-container label,
+.gradio-container span {
+    color: #1f2937;
+}
+
+/* Keep every hyperlink black */
+.gradio-container a,
+.gradio-container a:visited,
+.gradio-container a:hover,
+.gradio-container a:active {
+    color: #111827 !important;
+    text-decoration: underline;
+}
+
 /* User messages */
 .gradio-container .message.user {
-    background: #fef3c7 !important;
-    border: 1px solid #fcd34d !important;
+    background: #fff0b8 !important;
+    border: 1px solid #f2c94c !important;
     border-radius: 18px !important;
+    color: #1f2937 !important;
 }
 
 /* Estella messages */
 .gradio-container .message.bot {
-    background: #ecfdf5 !important;
-    border: 1px solid #a7f3d0 !important;
+    background: #fffdf0 !important;
+    border: 1px solid #e8dca3 !important;
     border-radius: 18px !important;
+    color: #1f2937 !important;
+}
+
+/* Keep the chat area scrollable instead of expanding the page */
+.gradio-container .chatbot,
+.gradio-container [data-testid="chatbot"] {
+    min-height: 220px !important;
+    max-height: calc(100dvh - 360px) !important;
+    overflow-y: auto !important;
 }
 
-/* Text input */
-.gradio-container textarea {
-    border: 1px solid #f3c677 !important;
+/* Bright, clearly visible message input */
+.gradio-container textarea,
+.gradio-container [data-testid="textbox"] {
+    border: 2px solid #e59b16 !important;
     border-radius: 16px !important;
-    background: #fffdf8 !important;
+    background: #fffdf0 !important;
+    color: #1f2937 !important;
+}
+
+.gradio-container textarea:focus,
+.gradio-container [data-testid="textbox"]:focus-within {
+    border-color: #c2410c !important;
+    box-shadow: 0 0 0 4px rgba(194, 65, 12, 0.18) !important;
 }
 
-/* Main submit button */
+/* Submit button */
 .gradio-container button.primary {
-    background: linear-gradient(135deg, #d97706, #f59e0b) !important;
+    background: #d97706 !important;
     border: none !important;
     color: white !important;
     border-radius: 14px !important;
@@ -204,29 +252,38 @@ CUSTOM_CSS = """
 }
 
 .gradio-container button.primary:hover {
-    background: linear-gradient(135deg, #b45309, #d97706) !important;
+    background: #b45309 !important;
 }
 
 /* Example buttons */
 .gradio-container button.secondary {
-    border-color: #f3c677 !important;
-    color: #92400e !important;
+    border-color: #e5b94c !important;
+    color: #78350f !important;
 }
 
-/* Hide the default footer */
+/* Remove default footer */
 footer {
     display: none !important;
 }
+
+/* Smaller screens */
+@media (max-width: 640px) {
+    .gradio-container .chatbot,
+    .gradio-container [data-testid="chatbot"] {
+        max-height: 42dvh !important;
+    }
+}
 """
 
+
 demo = gr.ChatInterface(
     fn=ask_estella,
-    title="📚 Estella Explainer — Math Reading Coach",
+    title="Estella Explainer Math Reading Coach",
     description=(
-        '**"My job is to explain math questions clearly so you know '
-        'what you are supposed to do to solve the problem."**\n\n'
-        "Type any math word problem and Estella will help you understand "
-        "what it is asking—without solving it.\n\n"
+        "Estella helps students understand what a math problem is asking "
+        "before they begin solving it.\n\n"
+        "Enter a math question below for one clear, friendly hint. "
+        "Estella will not give away the answer.\n\n"
         "Developed by [Sai Gattupalli, PhD](https://huggingface.co/sgattup) · "
         "[UMass Amherst College of Education](https://www.umass.edu/education/) · "
         "[Society and AI Research Group](https://societyandai.org) · "
@@ -239,6 +296,6 @@ demo = gr.ChatInterface(
 
 if __name__ == "__main__":
     demo.launch(
-    theme=THEME,
-    css=CUSTOM_CSS,
-)
+        theme=THEME,
+        css=CUSTOM_CSS,
+    )