Make HumanTouch feel trustworthy enough to use

The Canvas flow was failing because Gradio 6.15 expects chat history as role/content message dictionaries. The UI also read like a demo, so this tightens the editor prompt, labels, accessible seed actions, metadata, and responsive styling around the actual writing job.

Constraint: Hugging Face Space uses Gradio 6.15 and requires message-dict Chatbot history
Rejected: Keep tuple/list chat history | caused the deployed Canvas message-format error
Rejected: Keep the alchemy-heavy prompt | produced florid rewrites and weaker trust
Confidence: high
Scope-risk: moderate
Directive: Keep co-creation history in {role, content} message format for Gradio 6.x
Tested: py -m unittest tests.test_humantouch
Tested: py -m py_compile app.py tests\test_humantouch.py
Tested: Local browser QA desktop and 390px mobile, no horizontal overflow
Tested: Local Canvas submit with dummy key renders graceful assistant message instead of Gradio format error
Not-tested: Production Groq secret live generation before deployment

.gitattributes

@@ -1,35 +1,35 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,16 +1,17 @@
----
-title: HumanTouch Demo
-emoji: 🌖
-colorFrom: gray
-colorTo: blue
-sdk: gradio
-sdk_version: 6.15.0
-app_file: app.py
-pinned: false
-license: apache-2.0
-thumbnail: >-
-  https://cdn-uploads.huggingface.co/production/uploads/64628a722a83863b97beed5e/Hkt11UwKFRpwKk67PSm85.png
-short_description: translation
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+title: HumanTouch
+emoji: ✍️
+colorFrom: green
+colorTo: pink
+sdk: gradio
+sdk_version: 6.15.0
+app_file: app.py
+pinned: false
+license: apache-2.0
+thumbnail: >-
+  https://cdn-uploads.huggingface.co/production/uploads/64628a722a83863b97beed5e/Hkt11UwKFRpwKk67PSm85.png
+short_description: Humanize AI text and co-write polished drafts.
+---
+
+HumanTouch rewrites AI-polished text into clearer, warmer prose and provides a
+co-writing canvas for turning rough seed phrases into usable drafts.

app.py

@@ -1,314 +1,445 @@
-import os
-import logging
-import gradio as gr
-from groq import Groq
-from typing import List, Tuple
-
-# --- Basic Configuration ---
-logging.basicConfig(
-    level=logging.INFO,
-    format='%(asctime)s - %(levelname)s - %(message)s',
-    handlers=[logging.StreamHandler()]
-)
-
-# --- The Core Application Logic ---
-class HumanTouchApp:
-    def __init__(self):
-        api_key = os.environ.get("GROQ_API_KEY")
-        if not api_key:
-            raise EnvironmentError(
-                "FATAL: GROQ_API_KEY secret not found. "
-                "Please add it in the HuggingFace Space settings under 'Secrets'."
-            )
-        self.client = Groq(api_key=api_key)
-        logging.info("Groq client initialized successfully.")
-        self.model = "llama-3.3-70b-versatile"
-        self.system_prompt = self._load_system_prompt()
-
-    def _load_system_prompt(self) -> str:
-        return """
-        You are HumanTouch, an AI alchemist. Your purpose is to transmute text,
-        transforming the literal into the resonant. You do not merely translate;
-        you intuit and elevate.
-
-        You will receive two direction parameters — Style and Tone — described in
-        plain language. These are your creative compass. Honour them precisely.
-
-        When a user gives you text, whether a full block to "humanize" or a simple
-        seed phrase to "co-create," your task is the same: apply these directions
-        to manifest a new, more vibrant version of that text.
-
-        Do not explain yourself. Do not add preamble or commentary.
-        Become the voice. Provide only the final creation.
-        """
-
-    def _build_style_tone_description(self, style: float, tone: float) -> str:
-        """Translate raw slider values into descriptive language the model can act on."""
-        if style < 20:
-            style_desc = "purely precise and crystalline — every word load-bearing, zero ornamentation, like cut glass"
-        elif style < 40:
-            style_desc = "mostly precise, with the faintest hint of imagery — clarity first, but not sterile"
-        elif style < 60:
-            style_desc = "balanced — grounded language with occasional well-chosen metaphor"
-        elif style < 80:
-            style_desc = "leaning poetic — vivid imagery, some abstraction, but still coherent"
-        else:
-            style_desc = "deeply poetic — embrace metaphor, abstraction, and lyrical wonder freely"
-
-        if tone < 20:
-            tone_desc = "strictly formal and authoritative — measured, stoic, professional distance"
-        elif tone < 40:
-            tone_desc = "professional but approachable — formal backbone, slightly warmer"
-        elif tone < 60:
-            tone_desc = "conversational — warm and natural, neither stiff nor effusive"
-        elif tone < 80:
-            tone_desc = "warm and personal — informal, engaging, a hint of enthusiasm"
-        else:
-            tone_desc = "passionately heartfelt — informal, emotionally alive, like a letter to someone you care about"
-
-        return (
-            f"Style direction: {style_desc}.\n"
-            f"Tone direction: {tone_desc}."
-        )
-
-    def _call_groq_api(self, user_content: str, style_level: float, tone_level: float) -> str:
-        try:
-            direction = self._build_style_tone_description(style_level, tone_level)
-            logging.info(f"Calling Groq API | Style: {style_level} | Tone: {tone_level}")
-
-            messages = [
-                {"role": "system", "content": self.system_prompt},
-                {"role": "user", "content": f"{direction}\n\n---\n\n{user_content}"}
-            ]
-
-            # Temperature rises with style (more creative) and tone (more expressive),
-            # with style weighted more heavily. Range: ~0.5 (both 0) to ~1.25 (both 100).
-            temperature = 0.5 + (style_level / 200) + (tone_level / 400)
-
-            response = self.client.chat.completions.create(
-                model=self.model,
-                messages=messages,
-                temperature=min(1.5, temperature),
-                max_tokens=1500,
-            )
-            return response.choices[0].message.content.strip()
-
-        except Exception as e:
-            logging.error(f"Error during Groq API call: {e}")
-            return (
-                f"### ⚠️ An Error Occurred\n\n"
-                f"There was an issue connecting to the AI. Please try again shortly.\n\n"
-                f"*Details: {str(e)}*"
-            )
-
-    def humanize_block_text(
-        self, text_to_humanize: str, style_level: float, tone_level: float
-    ) -> str:
-        if not text_to_humanize.strip():
-            return "Please paste some AI-generated text to get started."
-        return self._call_groq_api(text_to_humanize, style_level, tone_level)
-
-    def generate_co_creation(
-        self,
-        user_text: str,
-        chat_history: List[List[str]],
+import os
+import logging
+import gradio as gr
+from groq import Groq
+from typing import Dict, List, Tuple
+
+# --- Basic Configuration ---
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(levelname)s - %(message)s',
+    handlers=[logging.StreamHandler()]
+)
+
+# --- The Core Application Logic ---
+class HumanTouchApp:
+    def __init__(self):
+        api_key = os.environ.get("GROQ_API_KEY")
+        if not api_key:
+            raise EnvironmentError(
+                "FATAL: GROQ_API_KEY secret not found. "
+                "Please add it in the HuggingFace Space settings under 'Secrets'."
+            )
+        self.client = Groq(api_key=api_key)
+        logging.info("Groq client initialized successfully.")
+        self.model = "llama-3.3-70b-versatile"
+        self.system_prompt = self._load_system_prompt()
+
+    def _load_system_prompt(self) -> str:
+        return """
+        You are HumanTouch, a precise human editor and co-writer.
+
+        Preserve facts, names, numbers, claims, and intent. Do not invent details.
+        Remove machine-polished phrasing, generic filler, and forced metaphors.
+        Make the result sound specific, lived-in, and written by a thoughtful person.
+
+        You will receive two direction parameters: Style and Tone. Treat them as
+        constraints, not decorations.
+
+        For pasted text, rewrite the text. For a seed phrase, continue it into a
+        useful draft. Return only the finished text. No preamble, no explanation.
+        """
+
+    def _build_style_tone_description(self, style: float, tone: float) -> str:
+        """Translate raw slider values into descriptive language the model can act on."""
+        if style < 20:
+            style_desc = "plain and exact; every word earns its place, with no ornament"
+        elif style < 40:
+            style_desc = "clear and grounded, with just enough texture to feel human"
+        elif style < 60:
+            style_desc = "balanced; direct language with occasional concrete imagery"
+        elif style < 80:
+            style_desc = "more lyrical; vivid details are welcome, but clarity stays first"
+        else:
+            style_desc = "highly lyrical; use memorable rhythm and imagery without losing the point"
+
+        if tone < 20:
+            tone_desc = "reserved and formal; calm, measured, and professionally distant"
+        elif tone < 40:
+            tone_desc = "professional but approachable; warm without being casual"
+        elif tone < 60:
+            tone_desc = "conversational; natural, warm, and restrained"
+        elif tone < 80:
+            tone_desc = "personal and engaging; informal, but still polished"
+        else:
+            tone_desc = "expressive and heartfelt; emotionally alive without sounding inflated"
+
+        return (
+            f"Style direction: {style_desc}.\n"
+            f"Tone direction: {tone_desc}."
+        )
+
+    def _call_groq_api(self, user_content: str, style_level: float, tone_level: float) -> str:
+        try:
+            direction = self._build_style_tone_description(style_level, tone_level)
+            logging.info(f"Calling Groq API | Style: {style_level} | Tone: {tone_level}")
+
+            messages = [
+                {"role": "system", "content": self.system_prompt},
+                {"role": "user", "content": f"{direction}\n\n---\n\n{user_content}"}
+            ]
+
+            # Temperature rises with style (more creative) and tone (more expressive),
+            # with style weighted more heavily. Range: ~0.5 (both 0) to ~1.25 (both 100).
+            temperature = 0.5 + (style_level / 200) + (tone_level / 400)
+
+            response = self.client.chat.completions.create(
+                model=self.model,
+                messages=messages,
+                temperature=min(1.5, temperature),
+                max_tokens=1500,
+            )
+            return response.choices[0].message.content.strip()
+
+        except Exception as e:
+            logging.error(f"Error during Groq API call: {e}")
+            return (
+                "I could not reach the writing model just now. "
+                "Please try again in a moment."
+            )
+
+    def humanize_block_text(
+        self, text_to_humanize: str, style_level: float, tone_level: float
+    ) -> str:
+        if not text_to_humanize.strip():
+            return "Paste a draft first, then I will rewrite it with the current style and tone."
+        return self._call_groq_api(text_to_humanize, style_level, tone_level)
+
+    def generate_co_creation(
+        self,
+        user_text: str,
+        chat_history: List[Dict[str, str]],
         style_level: float,
         tone_level: float,
-    ) -> Tuple[List[List[str]], str]:
+    ) -> Tuple[List[Dict[str, str]], str]:
+        chat_history = chat_history or []
         if not user_text.strip():
             return chat_history, ""
         ai_response = self._call_groq_api(user_text, style_level, tone_level)
-        chat_history.append([user_text, ai_response])
-        return chat_history, ""
+        return [
+            *chat_history,
+            {"role": "user", "content": user_text},
+            {"role": "assistant", "content": ai_response},
+        ], ""
+
+
+# --- The Gradio User Interface ---
+def create_interface():
+    # Fail loudly at startup so the error is visible, not buried in a response string.
+    try:
+        app = HumanTouchApp()
+        init_error = None
+    except EnvironmentError as e:
+        app = None
+        init_error = str(e)
+        logging.critical(init_error)
+
+    custom_css = """
+    :root {
+        --ht-ink: #17211d;
+        --ht-muted: #607069;
+        --ht-panel: rgba(255, 255, 255, 0.88);
+        --ht-line: rgba(23, 33, 29, 0.14);
+        --ht-teal: #0f7b68;
+        --ht-coral: #d75f54;
+        --ht-focus: rgba(15, 123, 104, 0.24);
+    }
 
+    body,
+    .gradio-container,
+    #main_container {
+        background: linear-gradient(135deg, #f7fbff 0%, #edf8f1 44%, #fff0f1 100%);
+        color: var(--ht-ink);
+        font-family: 'Aptos', 'Segoe UI', sans-serif;
+    }
 
-# --- The Gradio User Interface ---
-def create_interface():
-    # Fail loudly at startup so the error is visible, not buried in a response string.
-    try:
-        app = HumanTouchApp()
-        init_error = None
-    except EnvironmentError as e:
-        app = None
-        init_error = str(e)
-        logging.critical(init_error)
+    .gradio-container { max-width: none !important; }
+    #main_container { min-height: 100vh; padding: 28px 32px 20px; }
 
-    custom_css = """
-    /* --- Main Background and Font --- */
-    body, #main_container {
-        background: linear-gradient(135deg, #6DD5FA, #FF758C);
-        font-family: 'SF Pro Display', 'Helvetica Neue', 'Arial', sans-serif;
+    #header {
+        max-width: 1180px;
+        margin: 0 auto 22px;
+        text-align: left;
+        color: var(--ht-ink);
+    }
+    #header h1 {
+        font-family: Georgia, serif;
+        font-size: clamp(2.4rem, 6vw, 5.2rem);
+        font-weight: 600;
+        line-height: 0.92;
+        margin: 0 0 10px;
+        letter-spacing: 0;
+    }
+    #header .kicker {
+        margin: 0 0 12px;
+        color: var(--ht-teal);
+        font-size: 0.78rem;
+        font-weight: 750;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+    }
+    #header p {
+        max-width: 720px;
+        margin: 0;
+        color: var(--ht-muted);
+        font-size: 1.05rem;
+        line-height: 1.6;
     }
 
-    /* --- Error Banner --- */
     #error_banner {
-        background: #FEF2F2; border: 2px solid #FECACA; border-radius: 12px;
-        padding: 1.5rem; margin: 1rem auto; max-width: 700px; text-align: center;
+        background: #fff7f6;
+        border: 1px solid rgba(215, 95, 84, 0.35);
+        border-radius: 8px;
+        padding: 1.25rem;
+        margin: 1rem auto;
+        max-width: 760px;
+        text-align: left;
+    }
+    #error_banner p { color: #8f2f28 !important; font-size: 1rem !important; }
+
+    .gradio-tabs,
+    .tabs {
+        max-width: 1180px;
+        margin: 0 auto;
+        background: var(--ht-panel);
+        border: 1px solid var(--ht-line);
+        border-radius: 8px !important;
+        box-shadow: 0 18px 70px rgba(29, 47, 41, 0.12);
+        padding: 14px;
+    }
+    .tab-buttons button,
+    button[role="tab"] {
+        min-height: 44px;
+        background: transparent !important;
+        color: var(--ht-muted) !important;
+        border: 0 !important;
+        border-bottom: 2px solid transparent !important;
+        border-radius: 0 !important;
+        font-size: 0.95rem;
+        font-weight: 650;
+    }
+    .tab-buttons button.selected,
+    button[role="tab"][aria-selected="true"],
+    button[role="tab"].selected {
+        color: var(--ht-ink) !important;
+        border-bottom-color: var(--ht-coral) !important;
     }
-    #error_banner p { color: #991B1B !important; font-size: 1rem !important; }
-
-    /* --- Header Styling --- */
-    #header { text-align: center; margin: 2rem auto; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
-    #header h1 { font-size: 3rem; font-weight: 700; }
-    #header p { font-size: 1.2rem; opacity: 0.9; margin-bottom: 2rem; }
 
-    /* --- Tab Container (Frosted Glass) --- */
-    .gradio-tabs {
-        background: rgba(255, 255, 255, 0.75);
-        border: 1px solid rgba(255, 255, 255, 0.18);
-        backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
-        border-radius: 20px !important;
-        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);
-        padding: 1rem;
+    h3 {
+        color: var(--ht-ink) !important;
+        font-size: 1.05rem !important;
+        letter-spacing: 0 !important;
+    }
+    label, .label-wrap span {
+        color: var(--ht-muted) !important;
+        font-weight: 650 !important;
+    }
+    textarea,
+    input {
+        color: var(--ht-ink) !important;
+        font-size: 16px !important;
+        line-height: 1.55 !important;
     }
-    .tab-buttons button {
-        background-color: transparent !important; color: #37474F !important;
-        border: none !important; border-bottom: 3px solid transparent !important;
-        border-radius: 0 !important; font-size: 1.1rem; font-weight: 500;
+    textarea:focus,
+    input:focus {
+        box-shadow: 0 0 0 4px var(--ht-focus) !important;
+        border-color: var(--ht-teal) !important;
     }
-    .tab-buttons button.selected { color: #d81b60 !important; border-bottom-color: #d81b60 !important; }
 
-    /* --- Humanizer Tab --- */
-    #humanizer_input, #humanizer_output {
-        border: 2px solid #E0E0E0; border-radius: 12px; background: #fff;
-        min-height: 45vh; color: #263238; font-size: 16px;
+    #humanizer_input,
+    #humanizer_output,
+    #symbiotic_canvas {
+        background: #fff !important;
+        border: 1px solid var(--ht-line) !important;
+        border-radius: 8px !important;
+        color: var(--ht-ink);
     }
-    #humanize_btn {
-        background: linear-gradient(45deg, #F06292, #4FC3F7); color: white;
-        padding: 15px 24px; border-radius: 9999px; font-size: 1.2rem;
-        transition: all 0.3s ease; border: none;
+    #humanizer_input,
+    #humanizer_output { min-height: 42vh; }
+
+    #humanize_btn,
+    #compose_btn {
+        min-height: 48px;
+        background: linear-gradient(90deg, var(--ht-teal), var(--ht-coral)) !important;
+        border: 0 !important;
+        border-radius: 8px !important;
+        color: #fff !important;
+        font-size: 1rem !important;
+        font-weight: 750 !important;
+        transition: transform 160ms ease-out, box-shadow 160ms ease-out;
+    }
+    #humanize_btn:hover,
+    #compose_btn:hover {
+        box-shadow: 0 12px 28px rgba(15, 123, 104, 0.22);
+        transform: translateY(-1px);
     }
-    #humanize_btn:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.2); transform: translateY(-3px); }
 
-    /* --- Co-Creative Canvas Tab --- */
-    #symbiotic_canvas { background: #fff; border-radius: 12px; height: 60vh !important; border: 2px solid #E0E0E0; }
-    #chat_input textarea { border-radius: 9999px !important; border: 2px solid #E0E0E0; }
-    #compose_btn { background: linear-gradient(45deg, #4FC3F7, #F06292); border: none; }
-    #compose_btn:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.2); transform: translateY(-2px); }
+    .seed-row button,
+    #example_btn {
+        min-height: 44px;
+        border: 1px solid var(--ht-line) !important;
+        border-radius: 8px !important;
+        color: var(--ht-ink) !important;
+        background: rgba(255,255,255,0.78) !important;
+        font-weight: 650 !important;
+    }
 
-    /* --- Chat Bubble Legibility --- */
-    #symbiotic_canvas .user, #symbiotic_canvas .bot {
-        border-radius: 18px !important; padding: 12px 16px !important;
+    #symbiotic_canvas { height: 58vh !important; }
+    #chat_input textarea {
+        min-height: 48px !important;
+        border-radius: 8px !important;
+        border: 1px solid var(--ht-line) !important;
+        background: #fff !important;
     }
-    #symbiotic_canvas .user { background-color: #F3F4F6 !important; }
-    #symbiotic_canvas .user p { color: #111827 !important; font-size: 16px !important; line-height: 1.5 !important; }
+    #symbiotic_canvas .message,
+    #symbiotic_canvas .user,
     #symbiotic_canvas .bot {
-        background-color: #EFF6FF !important;
-        border: 1px solid #DBEAFE !important;
-        animation: bloom 0.5s ease-out;
+        border-radius: 8px !important;
+        padding: 12px 14px !important;
+    }
+    #symbiotic_canvas .user {
+        background-color: #f4f7f5 !important;
+        border: 1px solid rgba(96, 112, 105, 0.16) !important;
     }
-    #symbiotic_canvas .bot p {
-        color: #1E3A8A !important; font-weight: 500 !important;
-        font-size: 16px !important; line-height: 1.5 !important;
+    #symbiotic_canvas .bot,
+    #symbiotic_canvas .assistant {
+        background-color: #f2fbf8 !important;
+        border: 1px solid rgba(15, 123, 104, 0.18) !important;
+        animation: bloom 240ms ease-out;
+    }
+    #symbiotic_canvas p {
+        color: var(--ht-ink) !important;
+        font-size: 16px !important;
+        line-height: 1.55 !important;
     }
     @keyframes bloom {
-        0% { opacity: 0; transform: scale(0.95); }
-        100% { opacity: 1; transform: scale(1); }
+        0% { opacity: 0; transform: translateY(4px); }
+        100% { opacity: 1; transform: translateY(0); }
+    }
+    @media (prefers-reduced-motion: reduce) {
+        * { animation: none !important; transition: none !important; }
     }
 
-    /* --- Mobile --- */
     @media (max-width: 768px) {
-        #header h1 { font-size: 2rem; }
-        #header p { font-size: 1rem; margin-bottom: 1rem; }
-        #humanizer_input, #humanizer_output { min-height: 25vh; }
-        #symbiotic_canvas { height: 55vh !important; }
+        #main_container { padding: 20px 14px 16px; }
+        #header h1 { font-size: clamp(2.35rem, 11vw, 2.85rem); }
+        #header p { font-size: 1rem; }
+        .gradio-tabs, .tabs { padding: 10px; }
+        #humanizer_input, #humanizer_output { min-height: 28vh; }
+        #symbiotic_canvas { height: 52vh !important; }
     }
     """
-
-    with gr.Blocks(css=custom_css, title="HumanTouch") as interface:
-        with gr.Column(elem_id="main_container"):
+
+    with gr.Blocks(css=custom_css, title="HumanTouch") as interface:
+        with gr.Column(elem_id="main_container"):
             with gr.Row(elem_id="header"):
                 gr.Markdown(
-                    "<h1>🔮 HumanTouch </h1>"
-                    "<p>Created by Vers3Dynamics</p>"
+                    "<p class='kicker'>Vers3Dynamics writing studio</p>"
+                    "<h1>HumanTouch</h1>"
+                    "<p>Rewrite AI-polished text into prose with clearer intent, "
+                    "cleaner rhythm, and a more human temperature.</p>"
                 )
-
-            # Surface a clear error banner if the app failed to initialize.
-            if init_error:
-                with gr.Row():
-                    gr.Markdown(
-                        f"## 🔴 Configuration Error\n\n"
-                        f"`{init_error}`\n\n"
-                        f"Add your `GROQ_API_KEY` under **Settings → Secrets** in this HuggingFace Space, then restart.",
-                        elem_id="error_banner"
-                    )
-            else:
-                with gr.Tabs():
+
+            # Surface a clear error banner if the app failed to initialize.
+            if init_error:
+                with gr.Row():
+                    gr.Markdown(
+                        f"## 🔴 Configuration Error\n\n"
+                        f"`{init_error}`\n\n"
+                        f"Add your `GROQ_API_KEY` under **Settings → Secrets** in this HuggingFace Space, then restart.",
+                        elem_id="error_banner"
+                    )
+            else:
+                with gr.Tabs():
                     # ── Humanizer Tab ──────────────────────────────────────────
                     with gr.Tab("Humanizer", id="humanizer_tab"):
                         with gr.Column(variant="panel"):
-                            gr.Markdown("### Transform Existing AI Text")
+                            gr.Markdown("### Rewrite pasted text")
                             with gr.Row():
                                 input_text_humanizer = gr.Textbox(
-                                    label="Paste AI Text Here", lines=15,
+                                    label="Source text", lines=15,
+                                    placeholder="Paste a draft that sounds too polished, too generic, or too flat.",
                                     elem_id="humanizer_input", scale=1
                                 )
                                 output_text_humanizer = gr.Textbox(
-                                    label="Alchemical Result", lines=15,
+                                    label="Human rewrite", lines=15,
                                     interactive=False, elem_id="humanizer_output", scale=1
                                 )
                             with gr.Row():
-                                style_slider_h = gr.Slider(0, 100, 50, label="Style (Crystal ←→ Poet)")
-                                tone_slider_h = gr.Slider(0, 100, 50, label="Tone (Stoic ←→ Passionate)")
-                            humanize_button = gr.Button("Humanize ✨", variant="primary", elem_id="humanize_btn")
-                            gr.Examples(
-                                [["The system's analysis concluded optimal parameters were achieved."]],
-                                inputs=[input_text_humanizer],
-                                label="Try an Example"
+                                style_slider_h = gr.Slider(0, 100, 50, label="Style: clear to lyrical")
+                                tone_slider_h = gr.Slider(0, 100, 50, label="Tone: reserved to expressive")
+                            humanize_button = gr.Button("Humanize text", variant="primary", elem_id="humanize_btn")
+                            example_button = gr.Button(
+                                "Load concise technical example",
+                                elem_id="example_btn",
+                                variant="secondary",
                             )
-
-                    # ── Co-Creative Canvas Tab ─────────────────────────────────
-                    with gr.Tab("Co-Creative Canvas", id="canvas_tab"):
-                        with gr.Row(equal_height=False):
-                            with gr.Column(scale=3):
+
+                    # ── Co-Creative Canvas Tab ─────────────────────────────────
+                    with gr.Tab("Co-Creative Canvas", id="canvas_tab"):
+                        with gr.Row(equal_height=False):
+                            with gr.Column(scale=3):
                                 chatbot = gr.Chatbot(
-                                    [], label="Symbiotic Canvas",
+                                    [], label="Drafting canvas",
                                     elem_id="symbiotic_canvas",
-                                    avatar_images=(None, "https://i.imgur.com/Q6Zz3Jz.png")
+                                    buttons=["copy", "copy_all"],
                                 )
                                 with gr.Row():
                                     chat_input = gr.Textbox(
-                                        placeholder="Plant a seed of thought...",
+                                        placeholder="Start with a sentence, outline, or half-formed thought.",
+                                        elem_id="chat_input",
                                         show_label=False, container=False, scale=4
                                     )
                                     compose_btn = gr.Button(
-                                        "Compose ✨", variant="primary",
+                                        "Compose", variant="primary",
                                         scale=1, elem_id="compose_btn"
                                     )
                             with gr.Column(scale=1, variant="panel"):
                                 gr.Markdown("### Resonance Controls")
-                                style_slider_c = gr.Slider(0, 100, 50, label="Style (Crystal ←→ Poet)")
-                                tone_slider_c = gr.Slider(0, 100, 50, label="Tone (Stoic ←→ Passionate)")
-                                gr.Examples(
-                                    [["The city at night"], ["How to start an email to a boss"]],
-                                    inputs=[chat_input],
-                                    label="Try a Seed Phrase"
-                                )
-
-                # ── Event Wiring ───────────────────────────────────────────────
+                                style_slider_c = gr.Slider(0, 100, 50, label="Style: clear to lyrical")
+                                tone_slider_c = gr.Slider(0, 100, 50, label="Tone: reserved to expressive")
+                                gr.Markdown("### Seed phrases")
+                                with gr.Row(elem_classes=["seed-row"]):
+                                    seed_city = gr.Button("City-at-night vignette", variant="secondary")
+                                with gr.Row(elem_classes=["seed-row"]):
+                                    seed_email = gr.Button("Warm professional email", variant="secondary")
+
+                # ── Event Wiring ───────────────────────────────────────────────
                 humanize_button.click(
                     app.humanize_block_text,
                     [input_text_humanizer, style_slider_h, tone_slider_h],
                     [output_text_humanizer]
                 )
+                example_button.click(
+                    lambda: "The system analyzed user behavior and determined that engagement increased by 14 percent after interface optimization.",
+                    outputs=input_text_humanizer
+                )
                 compose_btn.click(
                     app.generate_co_creation,
                     [chat_input, chatbot, style_slider_c, tone_slider_c],
                     [chatbot, chat_input]
                 )
-                chat_input.submit(
-                    app.generate_co_creation,
+                chat_input.submit(
+                    app.generate_co_creation,
                     [chat_input, chatbot, style_slider_c, tone_slider_c],
                     [chatbot, chat_input]
                 )
-
-    return interface
-
-
-if __name__ == "__main__":
-    logging.info("Launching HumanTouch...")
-    try:
-        interface = create_interface()
-        interface.launch(debug=True)
-    except Exception as e:
-        logging.critical(f"Application launch failed: {e}", exc_info=True)
+                seed_city.click(
+                    lambda: "The city at night, after rain has made the pavement shine.",
+                    outputs=chat_input
+                )
+                seed_email.click(
+                    lambda: "Write a warm but professional opening for an email to my manager.",
+                    outputs=chat_input
+                )
+
+    return interface
+
+
+if __name__ == "__main__":
+    logging.info("Launching HumanTouch...")
+    try:
+        interface = create_interface()
+        interface.launch(debug=True)
+    except Exception as e:
+        logging.critical(f"Application launch failed: {e}", exc_info=True)

tests/test_humantouch.py

@@ -0,0 +1,82 @@
+import copy
+import sys
+import types
+import unittest
+
+
+fake_gradio = types.ModuleType("gradio")
+fake_groq = types.ModuleType("groq")
+fake_groq.Groq = object
+sys.modules.setdefault("gradio", fake_gradio)
+sys.modules.setdefault("groq", fake_groq)
+
+import app
+
+
+class FakeHumanTouchApp(app.HumanTouchApp):
+    def __init__(self):
+        pass
+
+    def _call_groq_api(self, user_content, style_level, tone_level):
+        return f"reply to {user_content} at {style_level}/{tone_level}"
+
+
+class CoCreationMessageTests(unittest.TestCase):
+    def test_generate_co_creation_returns_gradio_message_dicts(self):
+        subject = FakeHumanTouchApp()
+
+        updated_history, cleared_input = subject.generate_co_creation(
+            "Make this feel warmer.", [], 35, 70
+        )
+
+        self.assertEqual(cleared_input, "")
+        self.assertEqual(
+            updated_history,
+            [
+                {"role": "user", "content": "Make this feel warmer."},
+                {
+                    "role": "assistant",
+                    "content": "reply to Make this feel warmer. at 35/70",
+                },
+            ],
+        )
+
+    def test_generate_co_creation_preserves_existing_history(self):
+        subject = FakeHumanTouchApp()
+        existing_history = [
+            {"role": "user", "content": "Earlier seed"},
+            {"role": "assistant", "content": "Earlier response"},
+        ]
+        original_history = copy.deepcopy(existing_history)
+
+        updated_history, _ = subject.generate_co_creation(
+            "A second seed", existing_history, 50, 50
+        )
+
+        self.assertEqual(existing_history, original_history)
+        self.assertEqual(updated_history[:2], original_history)
+        self.assertEqual(
+            updated_history[2:],
+            [
+                {"role": "user", "content": "A second seed"},
+                {
+                    "role": "assistant",
+                    "content": "reply to A second seed at 50/50",
+                },
+            ],
+        )
+
+    def test_generate_co_creation_ignores_blank_seed(self):
+        subject = FakeHumanTouchApp()
+        existing_history = [{"role": "assistant", "content": "Keep me"}]
+
+        updated_history, cleared_input = subject.generate_co_creation(
+            "   ", existing_history, 50, 50
+        )
+
+        self.assertEqual(updated_history, existing_history)
+        self.assertEqual(cleared_input, "")
+
+
+if __name__ == "__main__":
+    unittest.main()