|
|
|
|
@@ -13,6 +13,10 @@
|
|
|
|
|
main { display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: 14px; padding: 14px; }
|
|
|
|
|
section { background: #18212b; border: 1px solid #2d3a47; border-radius: 12px; padding: 16px; }
|
|
|
|
|
.wide { grid-column: 1 / -1; }
|
|
|
|
|
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
|
|
|
|
|
.step { background:#111a23; border:1px solid #31404d; border-radius:10px; padding:14px; }
|
|
|
|
|
.step-number { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#23715b; font-weight:700; margin-bottom:8px; }
|
|
|
|
|
.step p { margin:5px 0; }
|
|
|
|
|
.ok { color: #66dfa9; }
|
|
|
|
|
.warn { color: #f3c969; }
|
|
|
|
|
.bad { color: #ff8f8f; }
|
|
|
|
|
@@ -34,34 +38,61 @@
|
|
|
|
|
<body>
|
|
|
|
|
<header>
|
|
|
|
|
<h1>SillyHome Next</h1>
|
|
|
|
|
<p>Du wählst nur die Aktoren. SillyHome findet Kontext, lernt Gewohnheiten und trifft Vorhersagen im Shadow-Modus.</p>
|
|
|
|
|
<p class="notice">Geschaltet wird erst nach deiner ausdrücklichen Freigabe pro Aktor.</p>
|
|
|
|
|
<p>Hier wählst du nur Geräte aus, deren Bedienung SillyHome lernen soll. Sensoren, Zusammenhänge und Modelle werden automatisch verwaltet.</p>
|
|
|
|
|
<p class="notice">Sicherer Start: Zuerst wird nur beobachtet und vorhergesagt. Ohne deine spätere Freigabe wird nichts geschaltet.</p>
|
|
|
|
|
</header>
|
|
|
|
|
<main>
|
|
|
|
|
<section class="wide">
|
|
|
|
|
<h2>So gehst du vor</h2>
|
|
|
|
|
<div class="steps">
|
|
|
|
|
<div class="step">
|
|
|
|
|
<span class="step-number">1</span>
|
|
|
|
|
<h3>Aktor auswählen</h3>
|
|
|
|
|
<p><strong>Wo?</strong> Unten im Feld „Gerät auswählen“.</p>
|
|
|
|
|
<p><strong>Was passiert?</strong> SillyHome ordnet Raum, Sensoren, Zustände und vorhandene Historie automatisch zu.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="step">
|
|
|
|
|
<span class="step-number">2</span>
|
|
|
|
|
<h3>Wie gewohnt bedienen</h3>
|
|
|
|
|
<p><strong>Wo?</strong> Weiterhin in Home Assistant, an Schaltern oder über deine bisherigen Bedienwege.</p>
|
|
|
|
|
<p><strong>Was passiert?</strong> SillyHome lernt deine Handlungen und zeigt Vorhersagen an, schaltet aber noch nicht selbst.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="step">
|
|
|
|
|
<span class="step-number">3</span>
|
|
|
|
|
<h3>Später freigeben</h3>
|
|
|
|
|
<p><strong>Wo?</strong> In den Details des ausgewählten Geräts, sobald genug Verhalten gelernt wurde.</p>
|
|
|
|
|
<p><strong>Was passiert?</strong> Erst dann darf SillyHome passende Vorhersagen automatisch ausführen. Die Freigabe kann jederzeit gestoppt werden.</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section>
|
|
|
|
|
<h2>Systemstatus</h2>
|
|
|
|
|
<p class="muted">Zeigt, ob Verbindung, Lernsystem und automatische Prüfungen funktionieren. Hier musst du normalerweise nichts einstellen.</p>
|
|
|
|
|
<div id="status">Prüfung läuft ...</div>
|
|
|
|
|
<div class="chips" id="status-chips"></div>
|
|
|
|
|
<button class="secondary" onclick="loadOverview()">Status aktualisieren</button>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section>
|
|
|
|
|
<h2>Aktor freigeben</h2>
|
|
|
|
|
<p class="muted">Nach der Auswahl analysiert SillyHome automatisch passende Sensoren, Zustände und Historie.</p>
|
|
|
|
|
<label for="actuator-select">Home-Assistant-Aktor</label>
|
|
|
|
|
<h2>1. Gerät zum Lernen auswählen</h2>
|
|
|
|
|
<p class="muted">Wähle eine Lampe, einen Rollladen oder einen anderen unterstützten Aktor. Du wählst keine Sensoren und erstellst keine Regeln.</p>
|
|
|
|
|
<label for="actuator-select">Gerät aus Home Assistant</label>
|
|
|
|
|
<select id="actuator-select"></select>
|
|
|
|
|
<button onclick="configureActuator()">Auswählen und Lernen starten</button>
|
|
|
|
|
<button onclick="configureActuator()">Gerät hinzufügen und Beobachtung starten</button>
|
|
|
|
|
<p id="actuator-config-result" class="muted">Noch kein Aktor ausgewählt.</p>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section class="wide">
|
|
|
|
|
<h2>Ausgewählte Aktoren</h2>
|
|
|
|
|
<h2>2. Beobachtete Geräte</h2>
|
|
|
|
|
<p class="muted">Öffne „Details“, um Lernfortschritt, aktuelle Vorhersage und den automatisch gefundenen Kontext zu sehen.</p>
|
|
|
|
|
<div id="configured-actuators">Noch nicht geladen.</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section class="wide">
|
|
|
|
|
<h2>Automatisch erkannter Lernkontext</h2>
|
|
|
|
|
<div id="actuator-detail" class="muted">Wähle einen Aktor aus der Liste.</div>
|
|
|
|
|
<h2>3. Lernfortschritt und Freigabe</h2>
|
|
|
|
|
<p class="muted">Die Freigabe erscheint erst, wenn genug eindeutig zugeordnete Handlungen gelernt wurden. Vorher bleibt das Gerät sicher im Beobachtungsmodus.</p>
|
|
|
|
|
<div id="actuator-detail" class="muted">Öffne bei einem beobachteten Gerät die Details.</div>
|
|
|
|
|
</section>
|
|
|
|
|
</main>
|
|
|
|
|
<script>
|
|
|
|
|
@@ -120,7 +151,7 @@ async function loadOverview() {
|
|
|
|
|
`<span class="chip">API: ${escapeHtml(health.status)}</span>`,
|
|
|
|
|
`<span class="chip">Lernsystem: ${escapeHtml(ml.status)}</span>`,
|
|
|
|
|
`<span class="chip">Aktoren: ${actuators.length}</span>`,
|
|
|
|
|
`<span class="chip">Aktive Modelle: ${reconciliation.trained_models}</span>`,
|
|
|
|
|
`<span class="chip">Lernbereite Geräte: ${reconciliation.trained_models}</span>`,
|
|
|
|
|
].join("");
|
|
|
|
|
} catch (error) {
|
|
|
|
|
status.innerHTML = `<p class="bad">${escapeHtml(error.message)}</p>`;
|
|
|
|
|
@@ -171,7 +202,7 @@ async function loadConfiguredActuators() {
|
|
|
|
|
const rows = await api("v1/actuators");
|
|
|
|
|
box.innerHTML = rows.length ? `
|
|
|
|
|
<table>
|
|
|
|
|
<tr><th>Aktor</th><th>Verhaltensmodell</th><th>Handlungen</th><th>Vorhersage</th><th></th></tr>
|
|
|
|
|
<tr><th>Gerät</th><th>Lernstatus</th><th>Gelernte Handlungen</th><th>Letzte Vorhersage</th><th>Aktionen</th></tr>
|
|
|
|
|
${rows.map(record => `
|
|
|
|
|
<tr>
|
|
|
|
|
<td>${escapeHtml(record.actuator_entity_id)}</td>
|
|
|
|
|
@@ -216,26 +247,27 @@ async function showActuator(actuatorId) {
|
|
|
|
|
<div>
|
|
|
|
|
<h3>${escapeHtml(record.actuator_entity_id)}</h3>
|
|
|
|
|
<p><strong>Status:</strong> <span class="${statusClass(record)}">${escapeHtml(lifecycleLabel(record))}</span></p>
|
|
|
|
|
<p><strong>Zuordnung:</strong> automatisch</p>
|
|
|
|
|
<p><strong>Sicherheit:</strong> ${Math.round(record.assignment.confidence * 100)} %</p>
|
|
|
|
|
<p><strong>Bewertung:</strong> ${escapeHtml(record.assignment.reason)}</p>
|
|
|
|
|
<p><strong>Kontextzuordnung:</strong> automatisch erledigt</p>
|
|
|
|
|
<p><strong>Zuordnungssicherheit:</strong> ${Math.round(record.assignment.confidence * 100)} %</p>
|
|
|
|
|
<p class="muted">Dieser Wert beschreibt, wie sicher Raum, Sensoren und Zustände zu diesem Gerät passen.</p>
|
|
|
|
|
<p><strong>Ergebnis:</strong> ${escapeHtml(record.assignment.reason)}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<h3>Verhaltensmodell</h3>
|
|
|
|
|
<p><strong>Modus:</strong> ${escapeHtml(behaviorLabel(record))}</p>
|
|
|
|
|
<h3>Lernfortschritt</h3>
|
|
|
|
|
<p><strong>Betriebsart:</strong> ${escapeHtml(behaviorLabel(record))}</p>
|
|
|
|
|
<p><strong>Gelernte Handlungen:</strong> ${record.behavior.sample_count}</p>
|
|
|
|
|
<p><strong>Davon eindeutig Benutzer:</strong> ${record.behavior.high_confidence_sample_count}</p>
|
|
|
|
|
<p><strong>Letztes Training:</strong> ${escapeHtml(record.behavior.last_trained_at || "noch nicht")}</p>
|
|
|
|
|
<p><strong>Status:</strong> ${escapeHtml(record.behavior.reason)}</p>
|
|
|
|
|
<p><strong>Was noch passiert:</strong> ${escapeHtml(record.behavior.reason)}</p>
|
|
|
|
|
${activationButton}
|
|
|
|
|
<button class="secondary" onclick="evaluateActuator('${escapeHtml(record.actuator_entity_id)}')">Vorhersage jetzt prüfen</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<h3>Aktuelle Vorhersage</h3>
|
|
|
|
|
<h3>Was SillyHome aktuell vorhersagt</h3>
|
|
|
|
|
${prediction
|
|
|
|
|
? `<p><strong>${escapeHtml(prediction.target_state)}</strong> mit ${Math.round(prediction.confidence * 100)} % Sicherheit. ${escapeHtml(prediction.reason)} ${prediction.executed ? "<span class='ok'>Ausgeführt.</span>" : "<span class='muted'>Nicht ausgeführt.</span>"}</p>`
|
|
|
|
|
: "<p class='muted'>Aktuell ist kein gelerntes Handlungsmuster fällig.</p>"}
|
|
|
|
|
<h3>Automatisch verwendeter Kontext</h3>
|
|
|
|
|
<h3>Welche Zusammenhänge automatisch verwendet werden</h3>
|
|
|
|
|
${evidence ? `<ul>${evidence}</ul>` : "<p class='warn'>Noch kein geeigneter Kontext erkannt. SillyHome prüft bei neuen HA-Daten erneut.</p>"}
|
|
|
|
|
`;
|
|
|
|
|
} catch (error) {
|
|
|
|
|
@@ -276,7 +308,7 @@ async function removeActuator(actuatorId) {
|
|
|
|
|
await api(`v1/actuators/${encodeURIComponent(actuatorId)}`, {method: "DELETE"});
|
|
|
|
|
if (currentActuatorId === actuatorId) {
|
|
|
|
|
currentActuatorId = null;
|
|
|
|
|
document.getElementById("actuator-detail").textContent = "Wähle einen Aktor aus der Liste.";
|
|
|
|
|
document.getElementById("actuator-detail").textContent = "Öffne bei einem beobachteten Gerät die Details.";
|
|
|
|
|
}
|
|
|
|
|
await loadOverview();
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
