Upload folder using huggingface_hub

app.py

@@ -1,156 +1,209 @@
-from flask import Flask, request, render_template
-from transformers import pipeline
-from sklearn.pipeline import Pipeline
-from sklearn.feature_extraction.text import TfidfVectorizer
-from sklearn.svm import LinearSVC
-from sklearn.ensemble import RandomForestClassifier
-from sklearn.linear_model import LogisticRegression
-from sklearn.tree import DecisionTreeClassifier
-import polars as pl
-import joblib
-from pathlib import Path
-import logging
-import os
-
-# Configure logging
-logging.basicConfig(
-    level=logging.INFO,
-    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
-)
-logger = logging.getLogger(__name__)
-
-app = Flask(__name__)
-
-CLASS_ID_TO_SENTIMENT = {
-    "0": "negative",
-    "1": "neutral",
-    "2": "positive"
-}
-
-# Use HF Spaces persistent storage if available, otherwise local cache
-CACHE_DIR = Path(os.getenv("HF_HOME", ".")) / ".model_cache"
-CACHE_DIR.mkdir(exist_ok=True)
-
-logger.info("Loading BERTweet from HuggingFace Hub...")
-bertweet_pipeline = pipeline("sentiment-analysis", model="kluvin/bertweet-tweet-sentiment")
-logger.info("BERTweet loaded successfully")
-
-# Define model configurations
-model_configs = {
-    "Decision Tree": Pipeline([
-        ("tfidf", TfidfVectorizer(max_features=2000, stop_words="english")),
-        ("clf", DecisionTreeClassifier(max_depth=10, random_state=42))
-    ]),
-    "Random Forest": Pipeline([
-        ("tfidf", TfidfVectorizer(max_features=500, stop_words="english")),
-        ("clf", RandomForestClassifier(n_estimators=100, random_state=42))
-    ]),
-    "Logistic Regression": Pipeline([
-        ("tfidf", TfidfVectorizer(max_features=2000, stop_words="english")),
-        ("clf", LogisticRegression(max_iter=1000, random_state=42))
-    ]),
-    "Linear SVM": Pipeline([
-        ("tfidf", TfidfVectorizer(max_features=2000, stop_words="english")),
-        ("clf", LinearSVC(random_state=42))
-    ])
-}
-
-sklearn_pipelines = {}
-cache_file = CACHE_DIR / "ml_models.joblib"
-
-if cache_file.exists():
-    logger.info("Loading cached ML models...")
-    try:
-        sklearn_pipelines = joblib.load(cache_file)
-        logger.info("✓ Cached models loaded successfully!")
-    except Exception as e:
-        logger.error(f"Failed to load cache: {e}")
-        logger.info("Will retrain models...")
-
-if not sklearn_pipelines:
-    logger.info("Loading training data and training ML models...")
-    splits = {'train': 'train.jsonl'}
-    df = pl.read_ndjson('hf://datasets/SetFit/tweet_sentiment_extraction/' + splits['train'])
-    X_train = df['text'].to_list()
-    y_train = df['label'].to_list()
-
-    logger.info("Training models...")
-    for model_name, sklearn_pipeline in model_configs.items():
-        logger.info(f"  Training {model_name}...")
-        sklearn_pipeline.fit(X_train, y_train)
-        sklearn_pipelines[model_name] = sklearn_pipeline
-
-    logger.info("Saving models to cache...")
-    joblib.dump(sklearn_pipelines, cache_file)
-    logger.info(f"✓ Models cached at {cache_file}")
-
-logger.info("All models loaded and ready!")
-
-def render_model_result(model_name: str, sentiment_name: str, probability: float | None) -> str:
-    probability_text = f"Probability: {probability:.2%}" if probability else "N/A"
-    return f'''
-        <div class="model-result {sentiment_name}">
-            <h3>{model_name}</h3>
-            <p class="sentiment">{sentiment_name.capitalize()}</p>
-            <p class="confidence">{probability_text}</p>
-        </div>
-    '''
-
-@app.route('/')
-def home():
-    return render_template('index.html')
-
-@app.route('/classify', methods=['POST'])
-def clasify():
-    try:
-        text_input = request.form['text']
-
-        if not text_input.strip():
-            return '''
-                <div class="result error">
-                    <h2>Error: Please enter some text</h2>
-                </div>
-            '''
-
-        logger.info(f"Classifying: {text_input[:50]}...")
-
-        results_html = ""
-
-        pipeline_output = bertweet_pipeline(text_input)[0]
-        predicted_class_id = pipeline_output['label']
-        probability = pipeline_output['score']
-        sentiment_name = CLASS_ID_TO_SENTIMENT[predicted_class_id]
-
-        results_html += render_model_result("BERTweet (Transformer)", sentiment_name, probability)
-
-        for model_name, sklearn_pipeline in sklearn_pipelines.items():
-            inputs = [text_input]
-            predicted_class = sklearn_pipeline.predict(inputs)[0]
-
-            classifier = sklearn_pipeline.named_steps['clf']
-            if hasattr(classifier, 'predict_proba'):
-                class_probabilities = sklearn_pipeline.predict_proba(inputs)[0]
-                probability = class_probabilities.max()
-            elif hasattr(classifier, 'decision_function'):
-                decision_scores = sklearn_pipeline.decision_function(inputs)[0]
-                probability = 1.0 / (1.0 + abs(decision_scores.min()))
-            else:
-                probability = None
-
-            sentiment_name = CLASS_ID_TO_SENTIMENT[str(predicted_class)]
-
-            results_html += render_model_result(model_name, sentiment_name, probability)
-
-        return f'<div class="results-grid">{results_html}</div>'
-    except Exception as e:
-        logger.error(f"Classification error: {e}", exc_info=True)
-        return f'''
-            <div class="result error">
-                <h2>Error: {e}</h2>
-            </div>
-        '''
-
-if __name__ == "__main__":
-    if app.debug:
-        logger.setLevel(logging.DEBUG)
-    app.run(debug=True)
+from flask import Flask, request, render_template
+from transformers import pipeline
+from sklearn.pipeline import Pipeline
+from sklearn.feature_extraction.text import TfidfVectorizer
+from sklearn.svm import LinearSVC
+from sklearn.ensemble import RandomForestClassifier
+from sklearn.linear_model import LogisticRegression
+from sklearn.tree import DecisionTreeClassifier
+import polars as pl
+import joblib
+from pathlib import Path
+import logging
+import os
+from time import perf_counter
+from typing import Optional, Tuple
+
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
+)
+logger = logging.getLogger(__name__)
+
+app = Flask(__name__)
+
+CLASS_ID_TO_SENTIMENT = {
+    "0": "negative",
+    "1": "neutral",
+    "2": "positive"
+}
+
+def categorize_probability(probability: Optional[float]) -> Tuple[str, str, str]:
+    """
+    Map a probability (0-1) to a qualitative label and associated CSS modifier.
+    Returns (label, css_class, display_value).
+    """
+    if probability is None:
+        return ("Unknown", "probability-unknown", "N/A")
+
+    percent = max(0.0, min(probability * 100.0, 100.0))
+
+    if percent >= 80:
+        return ("Definitely", "probability-definitely", f"{percent:.0f}%")
+    if percent >= 60:
+        return ("Probably", "probability-probably", f"{percent:.0f}%")
+    return ("Maybe", "probability-maybe", f"{percent:.0f}%")
+
+PRESET_TEXTS = [
+    "flower isn't beautiful",
+    "there is no more love. only pain.",
+    "one isn't a beauty, but two is a wondrous wonder",
+    "hvl is a fake university #uibforever"
+]
+
+# Use HF Spaces persistent storage if available, otherwise local cache
+CACHE_DIR = Path(os.getenv("HF_HOME", ".")) / ".model_cache"
+CACHE_DIR.mkdir(exist_ok=True)
+
+logger.info("Loading BERTweet from HuggingFace Hub...")
+bertweet_pipeline = pipeline("sentiment-analysis", model="kluvin/bertweet-tweet-sentiment")
+logger.info("BERTweet loaded successfully")
+
+# Define model configurations
+model_configs = {
+    "Decision Tree": Pipeline([
+        ("tfidf", TfidfVectorizer(max_features=2000, stop_words="english")),
+        ("clf", DecisionTreeClassifier(max_depth=10, random_state=42))
+    ]),
+    "Random Forest": Pipeline([
+        ("tfidf", TfidfVectorizer(max_features=500, stop_words="english")),
+        ("clf", RandomForestClassifier(n_estimators=100, random_state=42))
+    ]),
+    "Logistic Regression": Pipeline([
+        ("tfidf", TfidfVectorizer(max_features=2000, stop_words="english")),
+        ("clf", LogisticRegression(max_iter=1000, random_state=42))
+    ]),
+    "Linear SVM": Pipeline([
+        ("tfidf", TfidfVectorizer(max_features=2000, stop_words="english")),
+        ("clf", LinearSVC(random_state=42))
+    ])
+}
+
+sklearn_pipelines = {}
+cache_file = CACHE_DIR / "ml_models.joblib"
+
+if cache_file.exists():
+    logger.info("Loading cached ML models...")
+    try:
+        sklearn_pipelines = joblib.load(cache_file)
+        logger.info("✓ Cached models loaded successfully!")
+    except Exception as e:
+        logger.error(f"Failed to load cache: {e}")
+        logger.info("Will retrain models...")
+
+if not sklearn_pipelines:
+    logger.info("Loading training data and training ML models...")
+    splits = {'train': 'train.jsonl'}
+    df = pl.read_ndjson('hf://datasets/SetFit/tweet_sentiment_extraction/' + splits['train'])
+    X_train = df['text'].to_list()
+    y_train = df['label'].to_list()
+
+    logger.info("Training models...")
+    for model_name, sklearn_pipeline in model_configs.items():
+        logger.info(f"  Training {model_name}...")
+        sklearn_pipeline.fit(X_train, y_train)
+        sklearn_pipelines[model_name] = sklearn_pipeline
+
+    logger.info("Saving models to cache...")
+    joblib.dump(sklearn_pipelines, cache_file)
+    logger.info(f"✓ Models cached at {cache_file}")
+
+logger.info("All models loaded and ready!")
+
+def render_model_result(model_name: str, sentiment_name: str, probability: float | None) -> str:
+    probability_label, probability_css, probability_value = categorize_probability(probability)
+    return f'''
+        <div class="model-result {sentiment_name}">
+            <h3>{model_name}</h3>
+            <p class="sentiment">{sentiment_name.capitalize()}</p>
+            <p class="confidence">
+                <span class="probability-badge {probability_css}">
+                    <span class="probability-label">{probability_label}</span>
+                    <span class="probability-value">{probability_value}</span>
+                </span>
+            </p>
+        </div>
+    '''
+
+def build_results_markup(text_input: str) -> str:
+    inference_start = perf_counter()
+    results_html = ""
+
+    pipeline_output = bertweet_pipeline(text_input)[0]
+    predicted_class_id = pipeline_output['label']
+    probability = pipeline_output['score']
+    sentiment_name = CLASS_ID_TO_SENTIMENT[predicted_class_id]
+
+    results_html += render_model_result("BERTweet (Transformer)", sentiment_name, probability)
+
+    for model_name, sklearn_pipeline in sklearn_pipelines.items():
+        inputs = [text_input]
+        predicted_class = sklearn_pipeline.predict(inputs)[0]
+
+        classifier = sklearn_pipeline.named_steps['clf']
+        if hasattr(classifier, 'predict_proba'):
+            class_probabilities = sklearn_pipeline.predict_proba(inputs)[0]
+            probability = class_probabilities.max()
+        elif hasattr(classifier, 'decision_function'):
+            decision_scores = sklearn_pipeline.decision_function(inputs)[0]
+            probability = 1.0 / (1.0 + abs(decision_scores.min()))
+        else:
+            probability = None
+
+        sentiment_name = CLASS_ID_TO_SENTIMENT[str(predicted_class)]
+
+        results_html += render_model_result(model_name, sentiment_name, probability)
+
+    elapsed_ms = (perf_counter() - inference_start) * 1000
+
+    return (
+        f'<aside class="inference-meta">Inference time: {elapsed_ms:.0f} ms</aside>'
+        f'<div class="results-grid">{results_html}</div>'
+    )
+
+@app.route('/')
+def home():
+    default_text = PRESET_TEXTS[0]
+    initial_results_html = ""
+
+    try:
+        logger.info("Precomputing initial classification for default preset...")
+        initial_results_html = build_results_markup(default_text)
+    except Exception as e:
+        logger.error(f"Failed to precompute initial results: {e}", exc_info=True)
+
+    return render_template(
+        'index.html',
+        presets=PRESET_TEXTS,
+        default_preset=default_text,
+        initial_results=initial_results_html
+    )
+
+@app.route('/classify', methods=['POST'])
+def classify():
+    try:
+        text_input = request.form['text']
+
+        cleaned_text = text_input.strip()
+
+        if not cleaned_text:
+            return '''
+                <div class="result error">
+                    <h2>Error: Please enter some text</h2>
+                </div>
+            '''
+
+        logger.info(f"Classifying: {cleaned_text[:50]}...")
+        return build_results_markup(cleaned_text)
+    except Exception as e:
+        logger.error(f"Classification error: {e}", exc_info=True)
+        return f'''
+            <div class="result error">
+                <h2>Error: {e}</h2>
+            </div>
+        '''
+
+if __name__ == "__main__":
+    if app.debug:
+        logger.setLevel(logging.DEBUG)
+    app.run(debug=True)

static/index.css

@@ -1,134 +1,134 @@
-body {
-    font-family: 'Segoe UI', sans-serif;
-    background: linear-gradient(135deg, #74ebd5, #9face6);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    margin: 0;
-}
-
-.container {
-    background-color: white;
-    padding: 40px;
-    border-radius: 15px;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-    width: 90%;
-    max-width: 1200px;
-    text-align: center;
-}
-
-textarea {
-    width: 100%;
-    padding: 10px;
-    font-size: 1rem;
-    border-radius: 8px;
-    border: 1px solid #ccc;
-    resize: none;
-}
-
-button {
-    background-color: #007bff;
-    color: white;
-    border: none;
-    padding: 10px 20px;
-    margin-top: 10px;
-    border-radius: 8px;
-    font-size: 1rem;
-    cursor: pointer;
-}
-
-button:hover {
-    background-color: #0056b3;
-}
-
-.result {
-    margin-top: 20px;
-    padding: 10px;
-    border-radius: 8px;
-}
-
-.positive {
-    color: #00953e;
-}
-
-.negative {
-    color: #b00400;
-}
-
-.neutral {
-    color: #c99e00;
-}
-
-.bird {
-    width: 25px;
-}
-
-/* Results grid layout */
-.results-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 15px;
-    margin-top: 20px;
-}
-
-.model-result {
-    padding: 15px;
-    border-radius: 8px;
-    border: 2px solid;
-    text-align: center;
-}
-
-.model-result h3 {
-    margin: 0 0 10px 0;
-    font-size: 1rem;
-    color: #333;
-}
-
-.model-result .sentiment {
-    font-size: 1.3rem;
-    font-weight: bold;
-    margin: 5px 0;
-}
-
-.model-result .confidence {
-    font-size: 0.9rem;
-    color: #666;
-    margin: 5px 0;
-}
-
-/* Sentiment-specific background colors */
-.model-result.positive {
-    background-color: #d4edda;
-    border-color: #28a745;
-}
-
-.model-result.positive .sentiment {
-    color: #00953e;
-}
-
-.model-result.negative {
-    background-color: #f8d7da;
-    border-color: #dc3545;
-}
-
-.model-result.negative .sentiment {
-    color: #b00400;
-}
-
-.model-result.neutral {
-    background-color: #fff3cd;
-    border-color: #ffc107;
-}
-
-.model-result.neutral .sentiment {
-    color: #c99e00;
-}
-
-.result.error {
-    background-color: #f8d7da;
-    border: 2px solid #dc3545;
-    padding: 15px;
-    border-radius: 8px;
-    text-align: center;
-}
+body {
+    background: linear-gradient(135deg, #74ebd5, #9face6);
+}
+
+.results-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 1rem;
+    margin-top: 1.25rem;
+}
+
+.model-result {
+    padding: 1.25rem;
+    border-radius: 1rem;
+    border: 1px solid #e2e8f0;
+    text-align: center;
+    background-color: #f8fafc;
+    background-image: linear-gradient(135deg, rgba(248, 250, 252, 0.85), rgba(241, 245, 249, 0.9));
+    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
+}
+
+.model-result h3 {
+    margin: 0 0 0.75rem 0;
+    font-size: 1rem;
+    color: #1f2937;
+}
+
+.model-result .sentiment {
+    font-size: 1.2rem;
+    font-weight: 700;
+    margin: 0.5rem 0;
+}
+
+.model-result .confidence {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    margin: 0.5rem 0 0;
+    color: inherit;
+}
+
+.probability-label {
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    opacity: 0.8;
+}
+
+.probability-badge {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-width: 4rem;
+    padding: 0.45rem 0.8rem;
+    text-align: center;
+    border-radius: 999px;
+    font-size: 0.9rem;
+    font-weight: 700;
+    border: 1px solid transparent;
+    background-color: #e2e8f0;
+}
+
+.probability-value {
+    font-size: 1.1rem;
+    line-height: 1.1;
+}
+
+.model-result.positive {
+    background-image: linear-gradient(135deg, rgba(222, 247, 236, 0.95), rgba(187, 247, 208, 0.9));
+    border-color: #86efac;
+}
+
+.model-result.positive .sentiment {
+    color: #047857;
+}
+
+.model-result.negative {
+    background-image: linear-gradient(135deg, rgba(254, 228, 226, 0.95), rgba(254, 202, 202, 0.9));
+    border-color: #fca5a5;
+}
+
+.model-result.negative .sentiment {
+    color: #b91c1c;
+}
+
+.model-result.neutral {
+    background-image: linear-gradient(135deg, rgba(254, 249, 195, 0.95), rgba(254, 240, 138, 0.9));
+    border-color: #facc15;
+}
+
+.model-result.neutral .sentiment {
+    color: #a16207;
+}
+
+.probability-definitely {
+    background-color: #bbf7d0;
+    border-color: #34d399;
+    color: #065f46;
+}
+
+.probability-probably {
+    background-color: #fde68a;
+    border-color: #facc15;
+    color: #854d0e;
+}
+
+.probability-maybe {
+    background-color: #e0e7ff;
+    border-color: #93c5fd;
+    color: #1e3a8a;
+}
+
+.probability-unknown {
+    background-color: #e2e8f0;
+    border-color: #cbd5f5;
+    color: #475569;
+}
+
+.result.error {
+    background-color: #fee2e2;
+    border: 1px solid #f87171;
+    padding: 1rem;
+    border-radius: 0.75rem;
+    text-align: center;
+    color: #7f1d1d;
+}
+
+.inference-meta {
+    font-size: 0.85rem;
+    color: #64748b;
+    text-align: right;
+}

templates/index.html

@@ -1,22 +1,133 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Tweet Sentiment Classifier</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
-    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
-</head>
-<body>
-    <div class="container">
-        <h1><img class="bird" src="../{{ url_for('static', filename='images/bird.png') }}"> Tweet Sentiment Classifier</h1>
-        <p style="text-align: center; color: #666; margin-bottom: 20px;">
-        </p>
-        <form hx-post="/classify" hx-target="#result">
-            <textarea name="text" rows="4" placeholder="Type or paste a tweet..." required></textarea>
-            <br>
-            <button type="submit">Analyze Sentiment</button>
-        </form>
-
-        <div id="result"></div>
-    </div>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+    <meta charset="utf-8">
+    <title>Tweet Sentiment Classifier</title>
+    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
+    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
+</head>
+<body class="min-h-screen text-slate-700">
+    <main class="flex min-h-screen items-start justify-center px-4 py-8 sm:py-12 lg:items-center lg:max-h-screen">
+        <div class="w-full max-w-5xl">
+            <div class="rounded-3xl bg-white/95 shadow-xl ring-1 ring-slate-100 backdrop-blur lg:max-h-[90vh] lg:overflow-y-auto">
+                <div class="grid gap-8 p-6 md:p-8 lg:grid-cols-3 lg:p-10">
+                    <section class="space-y-6 lg:col-span-2">
+                        <header class="text-center lg:text-left">
+                            <h1 class="text-3xl font-semibold text-slate-800">
+                                <img class="mr-2 inline h-8 w-8 align-middle" src="../{{ url_for('static', filename='images/bird.png') }}" alt="bird icon">
+                                Tweet Sentiment Classifier
+                            </h1>
+                        </header>
+
+                        <form
+                            class="space-y-4"
+                            hx-post="/classify"
+                            hx-target="#result"
+                            hx-trigger="input changed delay:300ms from:textarea[name='text'], submit"
+                            hx-sync="this:replace"
+                        >
+                            <div>
+                                <textarea
+                                    id="text-input"
+                                    name="text"
+                                    rows="5"
+                                    placeholder="Type or paste a tweet..."
+                                    class="textarea textarea-bordered w-full resize-none rounded-2xl border border-slate-200 bg-slate-50/80 p-4 text-base text-slate-700 shadow-sm focus:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-200"
+                                    required>{{ default_preset }}</textarea>
+                            </div>
+                            <div class="flex flex-wrap items-center gap-3">
+                                <button type="submit" class="btn btn-primary rounded-full border-none bg-sky-500 px-6 text-white shadow hover:bg-sky-600">
+                                    Analyze Sentiment
+                                </button>
+                                <span class="text-sm text-slate-500">
+                                    Auto-analyze on
+                                </span>
+                            </div>
+                        </form>
+                    </section>
+
+                    <aside class="rounded-2xl border border-slate-200 bg-slate-50/80 p-6 shadow-sm lg:self-start">
+                        <h2 class="text-lg font-semibold text-slate-800">
+                            Preset tweets
+                        </h2>
+                        <p class="mt-2 text-sm text-slate-500">
+                            Tap to load a prompt instantly.
+                        </p>
+                        <ul class="mt-5 space-y-2">
+                            {% for preset in presets %}
+                            <li>
+                                <button
+                                    type="button"
+                                    class="btn btn-sm w-full justify-start rounded-xl border border-transparent bg-white/70 text-left font-normal text-slate-600 shadow-sm transition hover:border-sky-200 hover:bg-sky-50"
+                                    data-preset-index="{{ loop.index0 }}"
+                                >
+                                    {{ preset }}
+                                </button>
+                            </li>
+                            {% endfor %}
+                        </ul>
+                    </aside>
+
+                    <section class="lg:col-span-3">
+                        <div id="result" class="space-y-4">{{ initial_results|safe }}</div>
+                    </section>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        const presets = {{ presets | tojson }};
+        const textarea = document.querySelector('#text-input');
+        const presetButtons = document.querySelectorAll('[data-preset-index]');
+
+        function setPreset(text, activeButton, options = {}) {
+            if (!textarea) {
+                return;
+            }
+
+            const { trigger = true, focus = true } = options;
+
+            textarea.value = text;
+
+            if (focus) {
+                textarea.focus({ preventScroll: true });
+            }
+
+            presetButtons.forEach((button) => {
+                button.classList.remove('btn-active', 'border-sky-300', 'bg-sky-100', 'text-sky-800');
+                button.setAttribute('aria-pressed', 'false');
+            });
+
+            if (activeButton) {
+                activeButton.classList.add('btn-active', 'border-sky-300', 'bg-sky-100', 'text-sky-800');
+                activeButton.setAttribute('aria-pressed', 'true');
+            }
+
+            if (trigger) {
+                textarea.dispatchEvent(new Event('input', { bubbles: true }));
+                textarea.dispatchEvent(new Event('change', { bubbles: true }));
+            }
+        }
+
+        presetButtons.forEach((button) => {
+            button.addEventListener('click', () => {
+                const index = Number.parseInt(button.dataset.presetIndex, 10);
+                const presetText = presets[index] ?? '';
+                setPreset(presetText, button);
+            });
+        });
+
+        window.addEventListener('load', () => {
+            if (!textarea) {
+                return;
+            }
+            const firstButton = presetButtons[0] ?? null;
+            const initialText = presets.length ? presets[0] : (textarea.value || '');
+            setPreset(initialText, firstButton, { trigger: false, focus: false });
+        });
+    </script>
+</body>
+</html>