Updated app.py

app.py

@@ -50,17 +50,17 @@ def call_creative_help(prompt: str, token: str, url: str) -> dict:
 
 def extract_prompt_and_trigger(text: str) -> tuple[str, bool]:
     """
-    If text ends with \\help\\, return (text_without_trigger, True).
+    If text ends with \\help\\ or /help/, return (text_without_trigger, True).
     Otherwise return (text, False).
     """
     if not text or not text.strip():
         return text, False
-    # Match \\help\\ at end (with optional trailing whitespace after it)
-    # Use greedy (.*) to preserve whitespace (e.g. paragraph breaks) before \help\
-    match = re.search(r"(.*)\\help\\\s*$", text, re.DOTALL)
-    if match:
-        # Don't rstrip; preserve trailing whitespace
-        return match.group(1), True
+    # Match \help\ or /help/ at end (with optional trailing whitespace)
+    # Use greedy (.*) to preserve whitespace (e.g. paragraph breaks) before trigger
+    for pattern in (r"(.*)\\help\\\s*$", r"(.*)/help/\s*$"):
+        match = re.search(pattern, text, re.DOTALL)
+        if match:
+            return match.group(1), True
     return text, False
 
 
@@ -162,9 +162,52 @@ APP_EXPLANATION = (
 )
 
 
+CUSTOM_CSS = """
+.header-row { display: flex !important; align-items: center !important; gap: 0.75rem !important; margin-bottom: 0.25rem !important; }
+.header-icons { display: flex !important; gap: 0.5rem !important; }
+.header-icon { color: #718096 !important; cursor: pointer !important; transition: color 0.2s !important; }
+.header-icon:hover { color: #c53030 !important; }
+.header-icon svg { display: block !important; }
+.header-icon-help { position: relative !important; }
+.header-icon-help .help-tooltip {
+    visibility: hidden; opacity: 0; position: absolute; left: 50%; transform: translateX(-50%);
+    top: 100%; margin-top: 8px; padding: 10px 14px; background: #2d3748; color: #fff;
+    font-size: 0.85rem; line-height: 1.4; border-radius: 8px; width: 280px; text-align: left;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 100; transition: opacity 0.2s, visibility 0.2s;
+}
+.header-icon-help:hover .help-tooltip { visibility: visible; opacity: 1; }
+.creative-help-title { font-size: 2rem !important; font-weight: 700 !important; color: #c53030 !important; margin: 0 !important; }
+.footer { margin-top: 1rem !important; padding-top: 0.75rem !important; border-top: 1px solid #e2e8f0 !important; }
+.footer { display: flex !important; flex-wrap: wrap !important; gap: 1rem !important; }
+.footer-link { color: #718096 !important; font-size: 0.875rem !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 0.35rem !important; }
+.footer-link:hover { color: #c53030 !important; }
+.instructions { color: #4a5568; font-size: 0.95rem; margin-bottom: 1rem; }
+/* Dim textbox while processing - remove border/outline from textarea and container */
+#story-input textarea:disabled {
+    opacity: 0.25 !important;
+    background-color: #e2e8f0 !important;
+    filter: blur(0.5px);
+    border: none !important;
+    box-shadow: none !important;
+    outline: none !important;
+}
+#story-input:has(textarea:disabled),
+#story-input:has(textarea:disabled) * {
+    border: none !important;
+    box-shadow: none !important;
+    outline: none !important;
+}
+"""
+
+
 def create_ui():
     """Build the Creative Help Gradio interface."""
-    with gr.Blocks(title="Creative Help", js=CURSOR_JS) as demo:
+    with gr.Blocks(
+        title="Creative Help",
+        js=CURSOR_JS,
+        theme=gr.themes.Soft(primary_hue="red", secondary_hue="slate"),
+        css=CUSTOM_CSS,
+    ) as demo:
         model_url = get_model_repo_url()
         paper_url = get_paper_url()
         header_icons = (
@@ -197,7 +240,11 @@ def create_ui():
         def on_text_input(text: str):
             prompt, had_trigger = extract_prompt_and_trigger(text or "")
             if not had_trigger:
-                yield gr.skip()
+                # Use gr.skip() if available (Gradio 5+), else no-op update for Gradio 4
+                if hasattr(gr, "skip"):
+                    yield gr.skip()
+                else:
+                    yield gr.update(value=text)
                 return
 
             # Preserve text (dimmed) while waiting, then replace with result
@@ -233,42 +280,4 @@ def create_ui():
 
 if __name__ == "__main__":
     demo = create_ui()
-    demo.launch(
-        theme=gr.themes.Soft(primary_hue="red", secondary_hue="slate"),
-        css="""
-        .header-row { display: flex !important; align-items: center !important; gap: 0.75rem !important; margin-bottom: 0.25rem !important; }
-        .header-icons { display: flex !important; gap: 0.5rem !important; }
-        .header-icon { color: #718096 !important; cursor: pointer !important; transition: color 0.2s !important; }
-        .header-icon:hover { color: #c53030 !important; }
-        .header-icon svg { display: block !important; }
-        .header-icon-help { position: relative !important; }
-        .header-icon-help .help-tooltip {
-            visibility: hidden; opacity: 0; position: absolute; left: 50%; transform: translateX(-50%);
-            top: 100%; margin-top: 8px; padding: 10px 14px; background: #2d3748; color: #fff;
-            font-size: 0.85rem; line-height: 1.4; border-radius: 8px; width: 280px; text-align: left;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 100; transition: opacity 0.2s, visibility 0.2s;
-        }
-        .header-icon-help:hover .help-tooltip { visibility: visible; opacity: 1; }
-        .creative-help-title { font-size: 2rem !important; font-weight: 700 !important; color: #c53030 !important; margin: 0 !important; }
-        .footer { margin-top: 1rem !important; padding-top: 0.75rem !important; border-top: 1px solid #e2e8f0 !important; }
-        .footer { display: flex !important; flex-wrap: wrap !important; gap: 1rem !important; }
-        .footer-link { color: #718096 !important; font-size: 0.875rem !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 0.35rem !important; }
-        .footer-link:hover { color: #c53030 !important; }
-        .instructions { color: #4a5568; font-size: 0.95rem; margin-bottom: 1rem; }
-        /* Dim textbox while processing - remove border/outline from textarea and container */
-        #story-input textarea:disabled {
-            opacity: 0.25 !important;
-            background-color: #e2e8f0 !important;
-            filter: blur(0.5px);
-            border: none !important;
-            box-shadow: none !important;
-            outline: none !important;
-        }
-        #story-input:has(textarea:disabled),
-        #story-input:has(textarea:disabled) * {
-            border: none !important;
-            box-shadow: none !important;
-            outline: none !important;
-        }
-        """,
-    )
+    demo.launch()