potato/templates/solo/setup.html

{% extends "solo/base_solo.html" %}

{% block title %}Setup · Solo Mode · Potato{% endblock %}

{% block extra_head %}
<style>
    /* Two-column shell at desktop widths: form on the left, workflow
       outline on the right. Falls back to stacked at narrow widths. */
    .setup-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: var(--space-xl, 2rem);
        align-items: start;
    }

    .setup-grid h1 {
        font-size: var(--text-xl, 1.25rem);
        margin: 0 0 var(--space-xs, 0.25rem) 0;
        color: var(--foreground, #09090b);
        letter-spacing: -0.01em;
    }

    .setup-lede {
        margin: 0 0 var(--space-lg, 1.5rem) 0;
        color: var(--muted-foreground, #71717a);
        font-size: var(--text-sm, 0.8125rem);
    }

    .workflow-outline {
        background: var(--muted, #f4f4f5);
        padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
        border-radius: var(--radius, 0.5rem);
        border: 1px solid var(--border, #e4e4e7);
    }

    .workflow-outline h2 {
        margin: 0 0 var(--space-sm, 0.5rem) 0;
        font-size: var(--text-xs, 0.75rem);
        color: var(--muted-foreground, #71717a);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .workflow-outline ol {
        margin: 0;
        padding: 0;
        list-style: none;
        counter-reset: workflow;
    }

    .workflow-outline li {
        counter-increment: workflow;
        padding: var(--space-sm, 0.5rem) 0;
        font-size: var(--text-sm, 0.8125rem);
        color: var(--foreground, #09090b);
        border-bottom: 1px solid var(--border, #e4e4e7);
        display: grid;
        grid-template-columns: 1.5em 1fr;
        gap: var(--space-sm, 0.5rem);
        align-items: baseline;
    }

    .workflow-outline li:last-child { border-bottom: none; }

    .workflow-outline li::before {
        content: counter(workflow);
        font-variant-numeric: tabular-nums;
        color: var(--muted-foreground, #71717a);
        font-size: var(--text-xs, 0.75rem);
        font-weight: 500;
    }

    .workflow-outline li strong {
        display: block;
        font-weight: 600;
        font-size: var(--text-sm, 0.8125rem);
        margin-bottom: 1px;
    }

    .workflow-outline li span {
        color: var(--muted-foreground, #71717a);
        font-size: var(--text-xs, 0.75rem);
        grid-column: 2;
    }

    @media (max-width: 900px) {
        .setup-grid { grid-template-columns: 1fr; }
        .workflow-outline { margin-top: var(--space-md, 1rem); }
    }
</style>
{% endblock %}

{% block content %}
<div class="setup-grid">
    <section aria-labelledby="setup-heading">
        <h1 id="setup-heading">Set up your annotation task</h1>
        <p class="setup-lede">
            Solo Mode pairs you with an LLM to label a dataset together.
            Start by describing what you want labeled and how.
        </p>

        <div role="alert" aria-live="polite">
            {% if error %}
            <div class="alert alert-error">{{ error }}</div>
            {% endif %}
        </div>

        {% if already_configured %}
            <p>
                <a href="{{ url_for('solo_mode.status') }}" class="btn btn-primary">
                    Return to dashboard
                </a>
                <a href="{{ url_for('solo_mode.prompt_editor') }}"
                   class="btn btn-secondary" style="margin-left: var(--space-sm, 0.5rem);">
                    Edit prompt
                </a>
            </p>
        {% else %}
            <form method="POST" action="{{ url_for('solo_mode.setup') }}">
                <div class="form-group">
                    <label for="task_description">Task description</label>
                    <p class="form-help" id="task_description_help">
                        What gets labeled and what makes one category different from another?
                        Plain English is fine.
                    </p>
                    <textarea
                        id="task_description"
                        name="task_description"
                        aria-describedby="task_description_help"
                        placeholder="e.g. Classify customer reviews as positive, negative, or neutral. Positive reviews express satisfaction; negative reviews express complaints; neutral reviews are factual without strong sentiment."
                        rows="8"
                        required
                    >{{ request.form.get('task_description', '') }}</textarea>
                </div>

                <div class="solo-nav">
                    <span></span>
                    <button type="submit" class="btn btn-primary">
                        Generate prompt
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                            <path d="M5 12h14M13 6l6 6-6 6"
                                  stroke="currentColor" stroke-width="2"
                                  stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </button>
                </div>
            </form>
        {% endif %}
    </section>

    <aside class="workflow-outline" aria-label="What happens next">
        <h2>What happens next</h2>
        <ol>
            <li><strong>Prompt</strong><span>The LLM drafts an annotation prompt from your description.</span></li>
            <li><strong>Edge cases</strong><span>You label LLM-generated boundary examples together.</span></li>
            <li><strong>Parallel annotation</strong><span>You and the LLM label in parallel; disagreements surface for review.</span></li>
            <li><strong>Auto label</strong><span>Once agreement is high, the LLM finishes the dataset.</span></li>
            <li><strong>Validation</strong><span>You spot-check a sample of LLM-only labels.</span></li>
        </ol>
    </aside>
</div>
{% endblock %}

{% block sidebar %}
{# Setup screen reclaims the right rail for the workflow outline. #}
{% endblock %}