bonito

app.py

@@ -20,6 +20,26 @@ from transformers import (
     AutoTokenizer, AutoModelForSequenceClassification, pipeline
 )
 import re
+from gradio.themes.utils import colors, sizes
+
+THEME = gr.themes.Soft(
+    primary_hue=colors.red,
+    secondary_hue=colors.orange,
+    neutral_hue=colors.gray,
+    radius_size=sizes.radius_xxl,   # todo redondito
+)
+THEME.set(
+    body_background_fill="#FFF7F2",          # fondo crema
+    block_background_fill="#FFFFFF",
+    block_border_color="#FFD6C2",
+    block_border_width="1px",
+    block_shadow="0 10px 30px rgba(255, 107, 53, 0.10)",
+    input_background_fill="#FFFDFC",
+    input_border_color="#FFC7B3",
+    button_primary_background_fill="*primary_500",
+    button_primary_background_fill_hover="*primary_600",
+    button_primary_text_color="#FFFFFF",
+)
 
 CYRILLIC_RE = re.compile(r"[А-Яа-яЁё]")
 
@@ -156,12 +176,54 @@ def run_pipeline(user_text: str) -> tuple[str, str, str]:
     return pretty, ru_text, info
 
 # -------------------- Gradio UI --------------------
-with gr.Blocks(theme=gr.themes.Soft(), css="""
-#title {text-align:center}
-.small note {opacity:.8}
+with gr.Blocks(theme=THEME, css="""
+/* fondo suave con degradado */
+.gradio-container {
+  background: radial-gradient(1200px 600px at 80% -10%, #FFE7DE 0%, rgba(255,231,222,0) 60%) ,
+              linear-gradient(180deg, #FFF7F2 0%, #FFFFFF 60%);
+}
+
+/* títulos */
+#title { text-align:center; }
+#title h1 {
+  font-weight: 800;
+  letter-spacing: .2px;
+  color: #E53935; /* rojo principal */
+}
+#subtitle {
+  text-align:center;
+  color: #FF7043; /* naranja suave */
+  margin-top: -8px;
+}
+
+/* componentes redonditos + sombras suaves */
+.gr-box, .gr-panel, .gr-group { border-radius: 20px !important; }
+button, .gr-button  { border-radius: 999px !important; }
+textarea, input, .gr-textbox { border-radius: 16px !important; }
+
+/* botones primarios con leve glow */
+button.primary, .gr-button-primary {
+  box-shadow: 0 8px 20px rgba(229,57,53,0.18);
+}
+button.primary:hover, .gr-button-primary:hover {
+  box-shadow: 0 10px 28px rgba(229,57,53,0.25);
+}
+
+/* cajitas informativas */
+.accordion { border-radius: 16px !important; overflow: hidden; }
+
+/* pill para el resultado */
+#result-pill {
+  border-radius: 999px;
+  padding: 12px 18px;
+  background: #FFE6DE;
+  color: #D84315;
+  font-weight: 700;
+  display: inline-block;
+}
 """) as demo:
-    gr.Markdown("<h1 id='title'>DiMa_new — Discourse Marker Demo 🇷🇺✨</h1>")
-    gr.Markdown("Type an English **or Russian** sentence. If English, we translate to Russian, scan for candidates, and only show those judged as DM.")
+    gr.Markdown("<h1 id='title'>DiMa_new — 🇷🇺✨ Discourse Marker Demo</h1>")
+    gr.Markdown("<div id='subtitle'>English <i>or</i> Russian → detect candidates → show only DMs</div>")
 
     with gr.Row():
         inp = gr.Textbox(label="English or Russian input", placeholder="e.g., In fact, we should probably leave now.", lines=3)