Backup #2180

Dateiinhalt

<?php ob_start(); ?>

<nav class="breadcrumb">
    <a href="/content">Content Studio</a> &raquo; Neuer Auftrag
</nav>

<h1>Neuer Auftrag</h1>

<form class="form" style="max-width: 700px;"
      hx-post="/content"
      hx-headers='{"X-CSRF-TOKEN": "<?= $csrfToken ?>"}'
      hx-disabled-elt="button[type=submit]">

    <fieldset>
        <legend>Inhalt</legend>
        <div class="form-group">
            <label for="title">Titel *</label>
            <input type="text" id="title" name="title" class="form-input" required
                   placeholder="z.B. Blogpost über Teamcoaching">
        </div>
        <div class="form-group">
            <label for="briefing">Briefing *</label>
            <textarea id="briefing" name="briefing" class="form-textarea" rows="6" required
                      placeholder="Beschreibe, was der Content enthalten soll."></textarea>
        </div>
    </fieldset>

    <fieldset>
        <legend>KI-Einstellungen</legend>
        <div class="form-row">
            <div class="form-group form-group--half">
                <label for="model">Sprachmodell</label>
                <select id="model" name="model" class="form-select">
                    <?php foreach ($models ?? [] as $modelId => $modelName): ?>
                    <option value="<?= $modelId ?>" <?= $modelId === ($defaultModel ?? 'claude-sonnet-4-20250514') ? 'selected' : '' ?>><?= htmlspecialchars($modelName) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="form-group form-group--half">
                <label for="context_limit">Kontext-Quellen</label>
                <?php $ctxLimit = $defaultContextLimit ?? 5; ?>
                <select id="context_limit" name="context_limit" class="form-select">
                    <option value="3" <?= $ctxLimit === 3 ? 'selected' : '' ?>>3 Quellen</option>
                    <option value="5" <?= $ctxLimit === 5 ? 'selected' : '' ?>>5 Quellen</option>
                    <option value="10" <?= $ctxLimit === 10 ? 'selected' : '' ?>>10 Quellen</option>
                    <option value="15" <?= $ctxLimit === 15 ? 'selected' : '' ?>>15 Quellen</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label>Collections (Wissensquellen)</label>
            <?php
            $selected = $defaultCollections ?? ['documents'];
$variant = 'checkbox';
include __DIR__ . '/../partials/form/collections-select.php';
?>
        </div>
        <div class="form-row">
            <div class="form-group form-group--half">
                <label for="temperature">Temperatur: <span id="tempValue"><?= number_format($defaultTemperature ?? 0.5, 1) ?></span></label>
                <input type="range" id="temperature" name="temperature" class="form-slider"
                       min="0" max="1" step="0.1" value="<?= $defaultTemperature ?? 0.5 ?>">
                <div class="preset-buttons">
                    <button type="button" class="preset-btn<?= ($defaultTemperature ?? 0.5) == 0.3 ? ' preset-btn--active' : '' ?>" data-temp="0.3" data-tokens="2048">Präzise</button>
                    <button type="button" class="preset-btn<?= ($defaultTemperature ?? 0.5) == 0.5 ? ' preset-btn--active' : '' ?>" data-temp="0.5" data-tokens="4096">Ausgewogen</button>
                    <button type="button" class="preset-btn<?= ($defaultTemperature ?? 0.5) == 0.9 ? ' preset-btn--active' : '' ?>" data-temp="0.9" data-tokens="4096">Kreativ</button>
                </div>
            </div>
            <div class="form-group form-group--half">
                <label for="max_tokens">Max Tokens</label>
                <?php $maxTokens = $defaultMaxTokens ?? 4096; ?>
                <select id="max_tokens" name="max_tokens" class="form-select">
                    <option value="1024" <?= $maxTokens === 1024 ? 'selected' : '' ?>>1024</option>
                    <option value="2048" <?= $maxTokens === 2048 ? 'selected' : '' ?>>2048</option>
                    <option value="4096" <?= $maxTokens === 4096 ? 'selected' : '' ?>>4096</option>
                    <option value="8192" <?= $maxTokens === 8192 ? 'selected' : '' ?>>8192</option>
                </select>
            </div>
        </div>
        <div class="form-row">
            <div class="form-group form-group--half">
                <label for="system_prompt_id">System Prompt</label>
                <div class="inline-edit-group">
                    <select id="system_prompt_id" name="system_prompt_id" class="form-select">
                        <option value="">-- Standard --</option>
                        <?php foreach ($systemPrompts ?? [] as $prompt): ?>
                        <option value="<?= $prompt['id'] ?>" <?= ($defaultSystemPromptId ?? null) === (int) $prompt['id'] ? 'selected' : '' ?>><?= htmlspecialchars($prompt['name']) ?></option>
                        <?php endforeach; ?>
                    </select>
                    <button type="button" class="inline-edit-toggle" data-config-type="system_prompt" data-select-id="system_prompt_id" aria-label="Bearbeiten">&#9998;</button>
                </div>
                <div id="systemPromptEditor" class="inline-editor inline-editor--hidden">
                    <textarea id="systemPromptContent" class="inline-editor__textarea" rows="6" placeholder="Inhalt wird geladen..."></textarea>
                    <div class="inline-editor__footer">
                        <span class="inline-editor__version" id="systemPromptVersion"></span>
                        <button type="button" class="inline-editor__save" data-config-type="system_prompt">Speichern</button>
                    </div>
                </div>
            </div>
            <div class="form-group form-group--half form-group--checkbox">
                <label class="checkbox-toggle">
                    <input type="checkbox" id="quality_check" name="quality_check" value="1" <?= ($defaultQualityCheck ?? false) ? 'checked' : '' ?>>
                    <span class="checkbox-toggle__label">Qualitätsprüfung (LLM-Validierung)</span>
                </label>
            </div>
        </div>
    </fieldset>

    <fieldset>
        <legend>Content-Konfiguration</legend>
        <div class="form-row">
            <div class="form-group form-group--third">
                <label for="author_profile_id">Autorenprofil</label>
                <div class="inline-edit-group">
                    <select id="author_profile_id" name="author_profile_id" class="form-select">
                        <option value="">-- Kein Profil --</option>
                        <?php foreach ($profiles ?? [] as $profile): ?>
                        <option value="<?= $profile['id'] ?>" <?= ($defaultProfileId ?? null) === (int) $profile['id'] ? 'selected' : '' ?>><?= htmlspecialchars($profile['name']) ?></option>
                        <?php endforeach; ?>
                    </select>
                    <button type="button" class="inline-edit-toggle" data-config-type="author_profile" data-select-id="author_profile_id" aria-label="Bearbeiten">&#9998;</button>
                </div>
                <div id="authorProfileEditor" class="inline-editor inline-editor--hidden">
                    <textarea id="authorProfileContent" class="inline-editor__textarea" rows="6" placeholder="Inhalt wird geladen..."></textarea>
                    <div class="inline-editor__footer">
                        <span class="inline-editor__version" id="authorProfileVersion"></span>
                        <button type="button" class="inline-editor__save" data-config-type="author_profile">Speichern</button>
                    </div>
                </div>
            </div>
            <div class="form-group form-group--third">
                <label for="contract_id">Contract</label>
                <select id="contract_id" name="contract_id" class="form-select">
                    <option value="">-- Kein Contract --</option>
                    <?php foreach ($contracts ?? [] as $contract): ?>
                    <option value="<?= $contract['id'] ?>" <?= ($defaultContractId ?? null) === (int) $contract['id'] ? 'selected' : '' ?>><?= htmlspecialchars($contract['name']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="form-group form-group--third">
                <label for="structure_id">Struktur</label>
                <select id="structure_id" name="structure_id" class="form-select">
                    <option value="">-- Keine Struktur --</option>
                    <?php foreach ($structures ?? [] as $structure): ?>
                    <option value="<?= $structure['id'] ?>" <?= ($defaultStructureId ?? null) === (int) $structure['id'] ? 'selected' : '' ?>><?= htmlspecialchars($structure['name']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
        </div>
    </fieldset>

    <?php if (!empty($critics)): ?>
    <fieldset>
        <legend>Kritiker <span class="legend-hint">(für Qualitätsprüfung)</span></legend>
        <p class="fieldset-info">Wähle die Kritiker, die den generierten Content prüfen sollen. <a href="/config?type=critic" class="link-muted">Kritiker verwalten →</a></p>
        <div class="critic-grid">
            <?php foreach ($critics as $critic):
                $isSelected = in_array((int) $critic['id'], $defaultSelectedCritics ?? [], true);
            ?>
            <label class="critic-card <?= $isSelected ? 'critic-card--selected' : '' ?>">
                <input type="checkbox" name="critics[]" value="<?= $critic['id'] ?>" <?= $isSelected ? 'checked' : '' ?>>
                <span class="critic-card__name"><?= htmlspecialchars($critic['name']) ?></span>
                <?php if (!empty($critic['description'])): ?>
                <span class="critic-card__desc"><?= htmlspecialchars($critic['description']) ?></span>
                <?php endif; ?>
            </label>
            <?php endforeach; ?>
        </div>
    </fieldset>
    <?php endif; ?>

    <div class="form-actions">
        <button type="submit" name="action" value="save" class="btn">Nur speichern</button>
        <button type="submit" name="action" value="generate" class="btn btn--primary">Erstellen & Generieren</button>
        <a href="/content" class="btn btn--secondary">Abbrechen</a>
    </div>
</form>

<style>
.form-row { display: flex; gap: var(--space-md); }
.form-group--half { flex: 1; }
.form-group--third { flex: 1; }
.form-group--checkbox { display: flex; align-items: center; }
.checkbox-group { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.checkbox-label { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: var(--color-bg-muted); border-radius: 4px; cursor: pointer; }
.checkbox-label:hover { background: var(--color-bg-hover); }
fieldset { border: 1px solid var(--color-border); border-radius: 8px; padding: var(--space-md); margin-bottom: var(--space-md); }
legend { font-weight: 600; padding: 0 0.5rem; }

/* Temperature Slider */
.form-slider { width: 100%; height: 6px; border-radius: 3px; background: var(--color-bg-muted); appearance: none; cursor: pointer; margin: 0.5rem 0; }
.form-slider::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary); cursor: pointer; }
.form-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary); cursor: pointer; border: none; }

/* Preset Buttons */
.preset-buttons { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.preset-btn { flex: 1; padding: 0.4rem 0.6rem; font-size: 0.8rem; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-bg); cursor: pointer; transition: all 0.2s; }
.preset-btn:hover { background: var(--color-bg-muted); }
.preset-btn--active { background: var(--color-primary); color: white; border-color: var(--color-primary); }

/* Checkbox Toggle */
.checkbox-toggle { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.5rem 0; }
.checkbox-toggle input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.checkbox-toggle__label { font-size: 0.9rem; }

/* Legend & Fieldset Info */
.legend-hint { font-weight: 400; font-size: 0.85rem; color: var(--color-text-muted); }
.fieldset-info { margin: 0 0 1rem 0; font-size: 0.9rem; color: var(--color-text-muted); }
.link-muted { color: var(--color-primary); text-decoration: none; }
.link-muted:hover { text-decoration: underline; }

/* Critic Cards */
.critic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; }
.critic-card { display: flex; flex-direction: column; padding: 0.75rem 1rem; border: 2px solid var(--color-border); border-radius: 8px; cursor: pointer; transition: all 0.2s; background: var(--color-bg); }
.critic-card:hover { border-color: var(--color-primary-light); background: var(--color-bg-muted); }
.critic-card--selected { border-color: var(--color-primary); background: var(--color-primary-bg, rgba(59, 130, 246, 0.1)); }
.critic-card input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.critic-card__name { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.25rem; }
.critic-card__desc { font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.3; }

@media (max-width: 600px) {
    .form-row { flex-direction: column; gap: 0; }
    .critic-grid { grid-template-columns: 1fr; }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const tempSlider = document.getElementById('temperature');
    const tempValue = document.getElementById('tempValue');
    const maxTokens = document.getElementById('max_tokens');
    const presetBtns = document.querySelectorAll('.preset-btn');

    if (tempSlider && tempValue) {
        tempSlider.addEventListener('input', function() {
            tempValue.textContent = parseFloat(this.value).toFixed(1);
            updatePresetButtons(this.value);
        });
    }

    presetBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const temp = this.dataset.temp;
            const tokens = this.dataset.tokens;
            if (tempSlider) {
                tempSlider.value = temp;
                tempValue.textContent = parseFloat(temp).toFixed(1);
            }
            if (maxTokens && tokens) {
                maxTokens.value = tokens;
            }
            updatePresetButtons(temp);
        });
    });

    function updatePresetButtons(temp) {
        presetBtns.forEach(btn => {
            btn.classList.toggle('preset-btn--active', btn.dataset.temp === temp);
        });
    }

    // Critic card selection toggle
    document.querySelectorAll('.critic-card input[type="checkbox"]').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            this.closest('.critic-card').classList.toggle('critic-card--selected', this.checked);
        });
    });
});
</script>

<?php $content = ob_get_clean(); ?>
<?php require VIEW_PATH . '/layout.php'; ?>

Vollständig herunterladen

Aktionen

Andere Versionen dieser Datei

← Zurück zur Übersicht