548 lines
30 KiB
Twig
548 lines
30 KiB
Twig
{% extends 'admin/base.html.twig' %}
|
|
|
|
{% block title %}RetrieX Eval Suite{% endblock %}
|
|
|
|
{% block body %}
|
|
|
|
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
|
|
<div>
|
|
<h1 class="h3 mb-1">
|
|
<i class="bi bi-clipboard2-check"></i> RetrieX Eval Suite
|
|
</h1>
|
|
<div class="small text-secondary">
|
|
Regressionen für Retrieval, Shopquery, Follow-up und Answer-Guard direkt im Admin prüfen.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex flex-wrap gap-2">
|
|
<a href="{{ path('admin_evals_case_new', {type: selected_type|default('retrieval')}) }}"
|
|
class="btn btn-sm btn-outline-warning">
|
|
<i class="bi bi-journal-plus"></i> Eval-Cases verwalten
|
|
</a>
|
|
<a href="{{ path('admin_model_config_list') }}"
|
|
class="btn btn-sm btn-outline-secondary">
|
|
Zurück zum KI-/LLM-Setup
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{% for label in ['success', 'danger', 'warning', 'info'] %}
|
|
{% for message in app.flashes(label) %}
|
|
<div class="alert alert-{{ label }} shadow-sm">
|
|
{{ message }}
|
|
</div>
|
|
{% endfor %}
|
|
{% endfor %}
|
|
|
|
|
|
|
|
<div id="adminEvalRunOverlay"
|
|
class="position-fixed top-0 start-0 w-100 h-100 d-none"
|
|
style="background: rgba(0, 0, 0, .72); z-index: 1080;">
|
|
<div class="h-100 d-flex align-items-center justify-content-center px-3">
|
|
<div class="card bg-black border-warning text-light shadow-lg" style="max-width: 520px; width: 100%;">
|
|
<div class="card-body text-center py-5">
|
|
<div class="spinner-border text-warning mb-3" role="status" aria-hidden="true"></div>
|
|
<h5 class="text-warning mb-2" id="adminEvalRunOverlayLabel">Eval läuft ...</h5>
|
|
<div class="small text-secondary">
|
|
Die Regressionstests werden ausgeführt. Bitte die Seite nicht neu laden.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4 mb-4">
|
|
{% for item in overview %}
|
|
{% set report = item.report %}
|
|
{% set status = item.status %}
|
|
{% set badgeClass = status == 'green'
|
|
? 'bg-success'
|
|
: (status == 'red' ? 'bg-danger' : 'bg-secondary')
|
|
%}
|
|
<div class="col-md-6 col-xl-3">
|
|
<div class="card bg-black border-secondary text-light h-100 shadow-sm">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-start gap-2 mb-2">
|
|
<h5 class="text-info mb-0">{{ item.label }}</h5>
|
|
<span class="badge {{ badgeClass }}">
|
|
{% if status == 'green' %}
|
|
grün
|
|
{% elseif status == 'red' %}
|
|
rot
|
|
{% elseif status == 'empty' %}
|
|
leer
|
|
{% else %}
|
|
nicht gelaufen
|
|
{% endif %}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="small text-secondary mb-3">
|
|
{{ item.case_count }} Cases
|
|
</div>
|
|
|
|
{% if report %}
|
|
<div class="small">
|
|
<div><strong>Total:</strong> {{ report.total|default(0) }}</div>
|
|
<div><strong>Passed:</strong> {{ report.passed|default(0) }}</div>
|
|
<div><strong>Failed:</strong> {{ report.failed|default(0) }}</div>
|
|
<div class="text-secondary mt-2">
|
|
{{ report.generated_at|default('') }}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="small text-secondary">
|
|
Für diesen Typ liegt noch kein Admin-Report vor.
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="d-flex flex-wrap gap-2 mt-3">
|
|
<form method="post"
|
|
action="{{ path('admin_evals_run') }}"
|
|
class="d-inline js-admin-eval-run-form"
|
|
data-eval-type-label="{{ item.label|e('html_attr') }}">
|
|
<input type="hidden" name="_token" value="{{ csrf_token('admin_eval_run') }}">
|
|
<input type="hidden" name="type" value="{{ item.type }}">
|
|
<button type="submit" class="btn btn-sm btn-outline-warning js-admin-eval-run-button">
|
|
<span class="js-admin-eval-button-label">Run</span>
|
|
<span class="spinner-border spinner-border-sm ms-2 d-none js-admin-eval-button-spinner"
|
|
role="status"
|
|
aria-hidden="true"></span>
|
|
</button>
|
|
</form>
|
|
|
|
<a class="btn btn-sm btn-outline-info"
|
|
href="{{ path('admin_evals_index', {type: item.type}) }}">
|
|
Details
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="row g-4 mb-4">
|
|
<div class="col-xl-5">
|
|
<div class="card bg-black border-secondary text-light h-100 shadow-sm">
|
|
<div class="card-body">
|
|
<h5 class="text-warning mb-3">
|
|
<i class="bi bi-play-circle"></i> Eval ausführen
|
|
</h5>
|
|
|
|
<form method="post"
|
|
action="{{ path('admin_evals_run') }}"
|
|
class="js-admin-eval-run-form"
|
|
data-eval-type-label="Ausgewählter Eval">
|
|
<input type="hidden" name="_token" value="{{ csrf_token('admin_eval_run') }}">
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Eval-Typ</label>
|
|
<select name="type" class="form-select bg-dark text-light border-secondary js-admin-eval-type-select">
|
|
{% for type, label in types %}
|
|
<option value="{{ type }}" {% if type == selected_type %}selected{% endif %}>
|
|
{{ label }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
<div class="form-text text-secondary">
|
|
Ohne Case-ID wird der komplette Typ ausgeführt.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Optional: Case</label>
|
|
<select name="case_id"
|
|
class="form-select bg-dark text-light border-secondary js-admin-eval-case-select">
|
|
<option value="">Alle Cases des ausgewählten Typs</option>
|
|
{% for type, cases in cases_by_type %}
|
|
{% for case in cases %}
|
|
<option value="{{ case.id }}"
|
|
data-eval-type="{{ type }}"
|
|
{% if type != selected_type %}hidden disabled{% endif %}>
|
|
{{ case.id }} — {{ case.prompt }}
|
|
</option>
|
|
{% endfor %}
|
|
{% endfor %}
|
|
</select>
|
|
<div class="form-text text-secondary">
|
|
Die Case-Liste wird passend zum Eval-Typ gefiltert. Leer lassen, um alle Cases des Typs auszuführen.
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-outline-warning js-admin-eval-run-button">
|
|
<span class="js-admin-eval-button-label">Eval starten</span>
|
|
<span class="spinner-border spinner-border-sm ms-2 d-none js-admin-eval-button-spinner"
|
|
role="status"
|
|
aria-hidden="true"></span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-7">
|
|
<div class="card bg-black border-secondary text-light h-100 shadow-sm">
|
|
<div class="card-body">
|
|
<h5 class="text-info mb-3">
|
|
<i class="bi bi-terminal"></i> CLI-Referenz
|
|
</h5>
|
|
|
|
<p class="small text-secondary mb-3">
|
|
Die Admin-Runs schreiben typspezifische Reports nach
|
|
<code>tests/evals/reports/<type>-last-run.json</code>
|
|
und zusätzlich den bekannten <code>last-run.json</code>.
|
|
</p>
|
|
|
|
<div class="small">
|
|
{% for type, label in types %}
|
|
<div class="mb-2">
|
|
<span class="text-info">{{ label }}</span><br>
|
|
<code>php bin/console mto:agent:eval:run {{ type }}</code>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{% if last_report %}
|
|
<hr class="border-secondary">
|
|
<div class="small text-secondary">
|
|
Letzter generischer Report:
|
|
<span class="text-light">{{ last_report.type|default('unknown') }}</span>,
|
|
{{ last_report.passed|default(0) }}/{{ last_report.total|default(0) }} bestanden,
|
|
{{ last_report.generated_at|default('') }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-black border-secondary text-light shadow-sm">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
|
|
<h5 class="text-warning mb-0">
|
|
<i class="bi bi-list-check"></i>
|
|
Report-Details: {{ types[selected_type]|default(selected_type) }}
|
|
</h5>
|
|
|
|
<div class="btn-group btn-group-sm" role="group" aria-label="Eval report types">
|
|
{% for type, label in types %}
|
|
<a class="btn {{ type == selected_type ? 'btn-info' : 'btn-outline-info' }}"
|
|
href="{{ path('admin_evals_index', {type: type}) }}">
|
|
{{ label }}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
{% if selected_report %}
|
|
{% set selectedFailed = selected_report.failed|default(0) %}
|
|
<div class="row g-3 mb-3 small">
|
|
<div class="col-md-3">
|
|
<div class="border border-secondary rounded p-3 h-100">
|
|
<div class="text-secondary">Total</div>
|
|
<div class="h5 mb-0">{{ selected_report.total|default(0) }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="border border-secondary rounded p-3 h-100">
|
|
<div class="text-secondary">Passed</div>
|
|
<div class="h5 text-success mb-0">{{ selected_report.passed|default(0) }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="border border-secondary rounded p-3 h-100">
|
|
<div class="text-secondary">Failed</div>
|
|
<div class="h5 {{ selectedFailed == 0 ? 'text-success' : 'text-danger' }} mb-0">
|
|
{{ selectedFailed }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="border border-secondary rounded p-3 h-100">
|
|
<div class="text-secondary">Generated</div>
|
|
<div class="small text-light">{{ selected_report.generated_at|default('') }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-dark table-striped table-hover align-middle mb-0">
|
|
<thead class="table-secondary text-dark">
|
|
<tr>
|
|
<th>Status</th>
|
|
<th>Case</th>
|
|
<th>Dauer</th>
|
|
<th>Failures / Details</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for result in selected_report.results|default([]) %}
|
|
<tr>
|
|
<td style="width: 110px;">
|
|
{% if result.passed|default(false) %}
|
|
<span class="badge bg-success">PASS</span>
|
|
{% else %}
|
|
<span class="badge bg-danger">FAIL</span>
|
|
{% endif %}
|
|
</td>
|
|
<td style="min-width: 260px;">
|
|
<code>{{ result.case_id|default('') }}</code>
|
|
<div class="small text-secondary mb-2">{{ result.type|default('') }}</div>
|
|
|
|
{% set casePrompt = result.prompt|default(result.details.prompt|default('')) %}
|
|
{% if casePrompt %}
|
|
<div class="small mb-2">
|
|
<span class="text-secondary">Prompt:</span><br>
|
|
<span class="text-light">{{ casePrompt }}</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="mt-2">
|
|
<a href="{{ path('admin_evals_case_new', {source_type: selected_type, source_case_id: result.case_id|default('')}) }}"
|
|
class="btn btn-sm btn-outline-warning">
|
|
<i class="bi bi-journal-plus"></i> Als neuen Case vorbereiten
|
|
</a>
|
|
</div>
|
|
|
|
{% set historyRows = result.details.history|default([]) %}
|
|
{% if historyRows is not empty %}
|
|
<details class="small">
|
|
<summary class="text-info" style="cursor:pointer;">
|
|
Kontext / History anzeigen
|
|
</summary>
|
|
<div class="mt-2 ps-2 border-start border-secondary">
|
|
{% for turn in historyRows %}
|
|
<div class="mb-2">
|
|
<div class="text-secondary">Vorheriger Prompt:</div>
|
|
<div class="text-light">{{ turn.prompt|default('') }}</div>
|
|
{% if turn.answer_preview|default('') %}
|
|
<div class="text-secondary mt-1">Antwort-Auszug:</div>
|
|
<div class="text-secondary">{{ turn.answer_preview }}</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</details>
|
|
{% endif %}
|
|
</td>
|
|
<td style="width: 120px;">
|
|
{{ result.duration_ms|default(0) }} ms
|
|
</td>
|
|
<td>
|
|
{% if result.failures|default([]) is not empty %}
|
|
<ul class="mb-2 small text-danger">
|
|
{% for failure in result.failures %}
|
|
<li>{{ failure }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% else %}
|
|
<div class="small text-success mb-2">Keine Fehler.</div>
|
|
{% endif %}
|
|
|
|
{% set documentRefs = result.details.document_refs|default([]) %}
|
|
{% if documentRefs is not empty %}
|
|
<div class="mb-2">
|
|
<div class="small text-secondary mb-1">Gefundene Dokumente</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-dark table-sm table-bordered border-secondary align-middle mb-2">
|
|
<thead>
|
|
<tr class="small text-secondary">
|
|
<th style="width: 90px;">Ranks</th>
|
|
<th>Titel / Datei</th>
|
|
<th style="width: 170px;">Doc-ID</th>
|
|
<th style="width: 220px;">Chunks</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for doc in documentRefs %}
|
|
<tr>
|
|
<td class="small">{{ doc.ranks|default([])|join(', ') }}</td>
|
|
<td>
|
|
<div class="fw-semibold">{{ doc.title|default('Ohne Titel') }}</div>
|
|
{% if doc.file_path|default('') %}
|
|
<div class="small text-secondary" style="word-break: break-all;">
|
|
{{ doc.file_path }}
|
|
</div>
|
|
{% endif %}
|
|
{% if doc.version_number|default('') %}
|
|
<div class="small text-secondary">Version: {{ doc.version_number }}</div>
|
|
{% endif %}
|
|
</td>
|
|
<td><code class="small">{{ doc.id|default('') }}</code></td>
|
|
<td class="small" style="word-break: break-all;">
|
|
{% for chunkId in doc.chunk_ids|default([]) %}
|
|
<code>{{ chunkId }}</code>{% if not loop.last %}<br>{% endif %}
|
|
{% endfor %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% set resultRows = result.details.result_rows|default([]) %}
|
|
{% if resultRows is not empty %}
|
|
<details class="mb-2">
|
|
<summary class="small text-info" style="cursor:pointer;">
|
|
Treffer / Chunks anzeigen
|
|
</summary>
|
|
<div class="table-responsive mt-2">
|
|
<table class="table table-dark table-sm table-bordered border-secondary align-middle mb-0">
|
|
<thead>
|
|
<tr class="small text-secondary">
|
|
<th style="width: 60px;">Rank</th>
|
|
<th>Titel / Datei</th>
|
|
<th style="width: 180px;">Chunk</th>
|
|
<th>Preview</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for row in resultRows %}
|
|
<tr>
|
|
<td>{{ row.rank|default('') }}</td>
|
|
<td>
|
|
<div class="fw-semibold">{{ row.document_title|default('Ohne Titel') }}</div>
|
|
{% if row.file_path|default('') %}
|
|
<div class="small text-secondary" style="word-break: break-all;">{{ row.file_path }}</div>
|
|
{% endif %}
|
|
<div class="small text-secondary">Doc-ID: <code>{{ row.document_id|default('') }}</code></div>
|
|
</td>
|
|
<td class="small" style="word-break: break-all;">
|
|
<code>{{ row.chunk_id|default('') }}</code>
|
|
{% if row.chunk_index is defined and row.chunk_index is not same as(null) %}
|
|
<div class="text-secondary">Index: {{ row.chunk_index }}</div>
|
|
{% endif %}
|
|
</td>
|
|
<td class="small text-secondary">{{ row.text_preview|default('') }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</details>
|
|
{% endif %}
|
|
|
|
<details>
|
|
<summary class="small text-info" style="cursor:pointer;">
|
|
JSON-Details anzeigen
|
|
</summary>
|
|
<pre class="bg-dark border border-secondary rounded p-2 mt-2 small text-light" style="white-space: pre-wrap; max-height: 260px; overflow: auto;">{{ result.details|default({})|json_encode(constant('JSON_PRETTY_PRINT')) }}</pre>
|
|
</details>
|
|
</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="4" class="text-center text-secondary py-4">
|
|
Dieser Report enthält keine Resultate.
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-secondary mb-0">
|
|
Für {{ types[selected_type]|default(selected_type) }} liegt noch kein typspezifischer Admin-Report vor.
|
|
Starte den Eval oben oder per CLI.
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const forms = Array.from(document.querySelectorAll('.js-admin-eval-run-form'));
|
|
const overlay = document.getElementById('adminEvalRunOverlay');
|
|
const overlayLabel = document.getElementById('adminEvalRunOverlayLabel');
|
|
|
|
function resolveEvalLabel(form) {
|
|
const select = form.querySelector('.js-admin-eval-type-select');
|
|
if (select && select.selectedOptions.length > 0) {
|
|
return select.selectedOptions[0].textContent.trim();
|
|
}
|
|
|
|
return (form.dataset.evalTypeLabel || 'Eval').trim();
|
|
}
|
|
|
|
function syncCaseSelect(form) {
|
|
const typeSelect = form.querySelector('.js-admin-eval-type-select');
|
|
const caseSelect = form.querySelector('.js-admin-eval-case-select');
|
|
|
|
if (!typeSelect || !caseSelect) {
|
|
return;
|
|
}
|
|
|
|
const selectedType = typeSelect.value;
|
|
|
|
Array.from(caseSelect.options).forEach(function (option) {
|
|
if (option.value === '') {
|
|
option.hidden = false;
|
|
option.disabled = false;
|
|
return;
|
|
}
|
|
|
|
const matchesType = option.dataset.evalType === selectedType;
|
|
option.hidden = !matchesType;
|
|
option.disabled = !matchesType;
|
|
|
|
if (!matchesType && option.selected) {
|
|
caseSelect.value = '';
|
|
}
|
|
});
|
|
}
|
|
|
|
function setAllRunButtonsDisabled() {
|
|
document.querySelectorAll('.js-admin-eval-run-button').forEach(function (button) {
|
|
button.disabled = true;
|
|
button.classList.add('disabled');
|
|
});
|
|
}
|
|
|
|
forms.forEach(function (form) {
|
|
syncCaseSelect(form);
|
|
|
|
const typeSelect = form.querySelector('.js-admin-eval-type-select');
|
|
if (typeSelect) {
|
|
typeSelect.addEventListener('change', function () {
|
|
syncCaseSelect(form);
|
|
});
|
|
}
|
|
|
|
form.addEventListener('submit', function (event) {
|
|
const button = event.submitter && event.submitter.classList.contains('js-admin-eval-run-button')
|
|
? event.submitter
|
|
: form.querySelector('.js-admin-eval-run-button');
|
|
const label = resolveEvalLabel(form);
|
|
|
|
if (overlay && overlayLabel) {
|
|
overlayLabel.textContent = label + ' läuft ...';
|
|
overlay.classList.remove('d-none');
|
|
}
|
|
|
|
if (button) {
|
|
const buttonLabel = button.querySelector('.js-admin-eval-button-label');
|
|
const spinner = button.querySelector('.js-admin-eval-button-spinner');
|
|
|
|
if (buttonLabel) {
|
|
buttonLabel.textContent = 'Läuft ...';
|
|
}
|
|
|
|
if (spinner) {
|
|
spinner.classList.remove('d-none');
|
|
}
|
|
}
|
|
|
|
setAllRunButtonsDisabled();
|
|
document.body.style.cursor = 'progress';
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
{% endblock %}
|