First commit

README.md

@@ -1,14 +1,41 @@
 ---
 title: Creative Help
-emoji: 📈
-colorFrom: green
-colorTo: green
+emoji: ✍️
+colorFrom: red
+colorTo: pink
 sdk: gradio
-sdk_version: 6.6.0
+sdk_version: 5.0.0
 app_file: app.py
 pinned: false
-license: cc-by-nc-sa-4.0
-short_description: A legacy app for LM-based writing assistance
+license: mit
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Creative Help
+
+A word processor interface for eliciting text completions from the **creative-help** language model. Write freely, then type `\help\` to trigger generation automatically.
+
+## How to use
+
+1. **Write** your story in the text area.
+2. **Trigger** a completion by typing `\help\` at the end of your text — generation starts automatically.
+3. The model’s completion is appended to your text.
+
+## Setup (Space owner)
+
+This Space calls your deployed **creative-help** Inference Endpoint. Configure these in **Settings → Variables and Secrets**:
+
+| Name | Type | Description |
+|------|------|-------------|
+| `HF_ENDPOINT_URL` | Variable | Your Inference Endpoint URL (e.g. `https://xxx.us-east-1.aws.endpoints.huggingface.cloud`) |
+| `HF_TOKEN` | Secret | Your Hugging Face token with access to the endpoint |
+
+Alternatively, you can use the serverless Inference API by setting:
+
+| Name | Type | Description |
+|------|------|-------------|
+| `HF_MODEL_ID` | Variable | Model ID (e.g. `username/creative-help`) |
+| `HF_TOKEN` | Secret | Your Hugging Face token |
+
+## Model
+
+This app uses the [creative-help](https://huggingface.co/YOUR_USERNAME/creative-help) model. Deploy it as an Inference Endpoint for best performance.

app.py

@@ -1,7 +1,285 @@
+"""
+Creative Help - A word processor interface for eliciting text completions from the creative-help model.
+
+Users write freely, then type \\help\\ to trigger generation automatically.
+Deploy to Hugging Face Spaces: https://huggingface.co/spaces
+"""
+from __future__ import annotations
+
+import logging
+import os
+import re
 import gradio as gr
+import requests
+
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+
+# --- Configuration ---
+MAX_NEW_TOKENS = 50
+TEMPERATURE = 1.0
+
+
+def get_api_config():
+    """Get API endpoint and token from environment (Space secrets/variables)."""
+    # For Inference Endpoints: full URL like https://xxx.us-east-1.aws.endpoints.huggingface.cloud
+    # For Inference API: model ID like username/creative-help
+    endpoint_url = os.getenv("HF_ENDPOINT_URL", "").strip()
+    model_id = os.getenv("HF_MODEL_ID", "").strip()
+    token = os.getenv("HF_TOKEN", "").strip()
+
+    if endpoint_url:
+        # Inference Endpoint - use URL directly
+        return endpoint_url, token, True
+    if model_id:
+        # Inference API (serverless)
+        return f"https://api-inference.huggingface.co/models/{model_id}", token, False
+    return None, token, False
+
+
+def call_creative_help(prompt: str, token: str, url: str) -> dict:
+    """Call the creative-help model API and return the result."""
+    headers = {"Authorization": f"Bearer {token}"} if token else {}
+    payload = {
+        "inputs": prompt,
+        "parameters": {
+            "max_new_tokens": MAX_NEW_TOKENS,
+            "temperature": TEMPERATURE,
+            "do_sample": True,
+        },
+    }
+    logger.info("API request: url=%s prompt=%r parameters=%s",
+                url, prompt, payload["parameters"])
+    response = requests.post(url, headers=headers, json=payload, timeout=60)
+    response.raise_for_status()
+    result = response.json()
+    logger.info("API response: %s", result)
+    return result
+
+
+def extract_prompt_and_trigger(text: str) -> tuple[str, bool]:
+    """
+    If text ends with \\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
+    return text, False
+
+
+def generate_completion(prompt: str) -> tuple[str | None, str]:
+    """
+    Call the API and append generated text to the prompt.
+    prompt is the text before \\help\\ (trigger already extracted).
+    Returns (updated_text, status_message). Returns (None, error_msg) on API/config errors.
+    """
+    url, token, _ = get_api_config()
+    if not url:
+        return None, "⚠️ Configure HF_ENDPOINT_URL or HF_MODEL_ID in Space Settings → Variables."
+    if not token:
+        return None, "⚠️ Configure HF_TOKEN in Space Settings → Secrets."
+
+    if not prompt.strip():
+        return None, "⚠️ Enter some text first to use as a prompt."
+
+    try:
+        result = call_creative_help(prompt, token, url)
+    except requests.exceptions.RequestException as e:
+        logger.exception("API request failed: %s", e)
+        return None, f"❌ API error: {e}"
+
+    # Parse response - handler returns [{"generated_text": "..."}]
+    if isinstance(result, list) and result and isinstance(result[0], dict):
+        generated = result[0].get("generated_text", "")
+    elif isinstance(result, dict):
+        if "error" in result:
+            return None, f"❌ {result['error']}"
+        generated = result.get("generated_text", "")
+    else:
+        return None, "❌ Unexpected API response format."
+
+    if not generated or not isinstance(generated, str):
+        return None, "❌ No generated text in response."
+
+    # Add single space only when prefix doesn't end with newline (avoids "  ")
+    if prompt and prompt[-1].isspace():
+        new_text = prompt + generated.lstrip()
+    else:
+        new_text = prompt + generated
+
+    return new_text, f"✨ Generated: {generated[:80]}{'...' if len(generated) > 80 else ''}"
+
+
+CURSOR_JS = """
+(function() {
+    function findTextarea() {
+        const app = document.querySelector('gradio-app');
+        if (app && app.shadowRoot) {
+            return app.shadowRoot.querySelector('#story-input textarea');
+        }
+        return document.querySelector('#story-input textarea');
+    }
+    function moveCursorToEnd() {
+        const ta = findTextarea();
+        if (ta && !ta.disabled) {
+            ta.focus();
+            const len = ta.value.length;
+            ta.setSelectionRange(len, len);
+        }
+    }
+    function observeTextarea() {
+        const ta = findTextarea();
+        if (!ta) return false;
+        const observer = new MutationObserver(function(mutations) {
+            mutations.forEach(function(m) {
+                if (m.attributeName === 'disabled' && !ta.disabled) {
+                    setTimeout(moveCursorToEnd, 0);
+                }
+            });
+        });
+        observer.observe(ta, { attributes: true, attributeFilter: ['disabled'] });
+        return true;
+    }
+    var attempts = 0;
+    var id = setInterval(function() {
+        if (observeTextarea() || ++attempts > 50) clearInterval(id);
+    }, 100);
+})();
+"""
+
+
+def get_model_repo_url() -> str:
+    return "https://huggingface.co/roemmele/creative-help"
+
+
+def get_paper_url() -> str:
+    """Get the research paper URL for the footer link."""
+    url = os.getenv("PAPER_URL", "").strip()
+    if url:
+        return url
+    return "https://roemmele.github.io/publications/creative-help-demo.pdf"
+
+
+APP_EXPLANATION = (
+    "Creative Help is a legacy app for AI-based writing assistance. It was developed in 2016 as one of the first demonstrations of the use of a language model for helping people write stories."
+)
+
+
+def create_ui():
+    """Build the Creative Help Gradio interface."""
+    with gr.Blocks(title="Creative Help", js=CURSOR_JS) as demo:
+        model_url = get_model_repo_url()
+        paper_url = get_paper_url()
+        header_icons = (
+            '<span class="header-icon header-icon-help">'
+            '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" '
+            'fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">'
+            '<circle cx="12" cy="12" r="10"/>'
+            '<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>'
+            '<span class="help-tooltip">' +
+            APP_EXPLANATION.replace("<", "&lt;").replace(
+                ">", "&gt;") + '</span></span>'
+        )
+        gr.HTML(
+            '<div class="header-row">'
+            '<h1 class="creative-help-title">Creative Help</h1>'
+            '<div class="header-icons">' + header_icons + '</div>'
+            '</div>'
+            '<p class="instructions">Type <code>\\help\\</code> when you want to generate a suggestion.</p>'
+        )
+
+        with gr.Row():
+            textbox = gr.Textbox(
+                placeholder="Write your story here... Type \\help\\ when you want a suggestion.",
+                lines=12,
+                max_lines=20,
+                buttons=["copy"],
+                elem_id="story-input",
+                show_label=False,
+            )
+
+        def on_text_input(text: str):
+            prompt, had_trigger = extract_prompt_and_trigger(text or "")
+            if not had_trigger:
+                yield gr.skip()
+                return
+
+            # Preserve text (dimmed) while waiting, then replace with result
+            yield gr.update(value=text, interactive=False)
+            new_text, _ = generate_completion(prompt)
+            yield gr.update(value=new_text if new_text is not None else text, interactive=True)
+
+        # Use trigger_mode="always_last" so rapid typing only processes the final value.
+        textbox.input(
+            fn=on_text_input,
+            inputs=[textbox],
+            outputs=[textbox],
+            trigger_mode="always_last",
+        )
+
+        # Footer with model repo and paper links
+        gr.HTML(
+            f'<div class="footer">'
+            f'<a href="{model_url}" target="_blank" rel="noopener" class="footer-link">'
+            f'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" '
+            f'fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>'
+            f'<polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>'
+            f' Model on Hugging Face</a>'
+            f'<a href="{paper_url}" target="_blank" rel="noopener" class="footer-link">'
+            f'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" '
+            f'fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>'
+            f'<polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>'
+            f' Research paper</a></div>'
+        )
+
+    return demo
 
-def greet(name):
-    return "Hello " + name + "!!"
 
-demo = gr.Interface(fn=greet, inputs="text", outputs="text")
-demo.launch()
+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;
+        }
+        """,
+    )

requirements.txt

@@ -0,0 +1,2 @@
+gradio>=5.0
+requests>=2.28