delete me
This commit is contained in:
DanielS
@@ -27,6 +27,10 @@
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><line x1="12" y1="4" x2="12" y2="20"/><line x1="2" y1="12" x2="22" y2="12"/></svg>
|
||||
Kassensystem
|
||||
</button>
|
||||
<button class="nav-btn" id="tab-btn-learn" onclick="switchTab('learn')">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M8 11h8"/><path d="M12 7v8"/></svg>
|
||||
Artikel anlernen
|
||||
</button>
|
||||
<button class="nav-btn" id="tab-btn-articles" onclick="switchTab('articles')">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><circle cx="10" cy="9" r="1"/></svg>
|
||||
Artikel-Verwaltung
|
||||
@@ -71,6 +75,9 @@
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
|
||||
Webcam aktivieren
|
||||
</button>
|
||||
<select id="camera-select" class="btn btn-secondary" style="background: var(--color-bg-input); border-color: var(--border-glass); color: var(--text-primary); outline: none; padding: 10px 14px; max-width: 180px; display: none;">
|
||||
<option value="">Standard-Kamera</option>
|
||||
</select>
|
||||
<button id="trigger-scale-btn" class="btn btn-primary btn-glow">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="6" y="2" width="12" height="20" rx="2"/><path d="M12 18h.01"/></svg>
|
||||
Waage auslösen (Trigger)
|
||||
@@ -108,7 +115,7 @@
|
||||
<div class="card quick-select-card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">KI Schnellwahltasten</h2>
|
||||
<p class="card-subtitle">Vorschläge über Confidence-Schwellenwert > 10%</p>
|
||||
<p class="card-subtitle">Vorschläge über Confidence-Schwellenwert > 85%</p>
|
||||
</div>
|
||||
<div class="quick-buttons-container" id="quick-selection-buttons">
|
||||
<div class="empty-state">
|
||||
@@ -179,6 +186,123 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- LEARN ARTICLE TAB (ANLERN-MODUS) -->
|
||||
<section id="tab-learn" class="tab-content">
|
||||
<div class="checkout-grid">
|
||||
<!-- Left: Camera Preview & Calibration -->
|
||||
<div class="card camera-card">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<h2 class="card-title">Live-Kamerabild (Von oben)</h2>
|
||||
<p class="card-subtitle">Kalibriere die Null-Linie und richte das Produkt aus</p>
|
||||
</div>
|
||||
<span class="status-indicator" id="learn-calibration-indicator">Nicht kalibriert</span>
|
||||
</div>
|
||||
|
||||
<div class="camera-viewport-container">
|
||||
<canvas id="learn-camera-canvas" width="640" height="480"></canvas>
|
||||
<div class="scale-target-overlay">
|
||||
<div class="scale-target-box"></div>
|
||||
</div>
|
||||
<div class="stream-badge" id="learn-camera-type-badge">SIMULATION-MODUS</div>
|
||||
</div>
|
||||
|
||||
<div class="camera-controls" style="justify-content: space-between;">
|
||||
<div style="display: flex; gap: 12px; align-items: center;">
|
||||
<button id="learn-calibrate-btn" class="btn btn-secondary" onclick="calibrateBackground()">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>
|
||||
Hintergrund speichern
|
||||
</button>
|
||||
<button id="learn-reset-calibrate-btn" class="btn btn-danger" style="padding: 10px 14px;" onclick="resetBackgroundCalibration()" title="Hintergrundkalibrierung löschen">
|
||||
Reset
|
||||
</button>
|
||||
<select id="learn-camera-select" class="btn btn-secondary" style="background: var(--color-bg-input); border-color: var(--border-glass); color: var(--text-primary); outline: none; padding: 10px 14px; max-width: 180px; display: none;">
|
||||
<option value="">Standard-Kamera</option>
|
||||
</select>
|
||||
</div>
|
||||
<label class="toggle-control">
|
||||
<input type="checkbox" id="learn-bg-ok-indicator" disabled>
|
||||
<span class="toggle-slider"></span>
|
||||
<span class="toggle-label">Hintergrund OK</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Product Selection & Controls -->
|
||||
<div class="checkout-sidebar">
|
||||
<!-- Product Selection -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">Artikel-Details</h2>
|
||||
<p class="card-subtitle">Wähle den anzulernenden Artikel aus</p>
|
||||
</div>
|
||||
<div class="card-body" style="display: flex; flex-direction: column; gap: 16px;">
|
||||
<div class="control-group" style="margin-bottom: 0;">
|
||||
<label for="learn-search-input">Suche / PLU-Nummer</label>
|
||||
<input type="text" id="learn-search-input" class="input-field" placeholder="z.B. 4011 oder Banane..." oninput="filterLearnArticles()" style="width: 100%; background: var(--color-bg-input); border: 1px solid var(--border-glass); color: var(--text-primary); padding: 10px 14px; border-radius: var(--border-radius-md); font-size: 14px;">
|
||||
</div>
|
||||
<div class="learn-articles-list" id="learn-articles-list" style="max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border-glass); padding: 8px; border-radius: var(--border-radius-md); background: rgba(0,0,0,0.15);">
|
||||
<!-- Populated by JS -->
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border-glass);">
|
||||
<span style="font-size: 12px; color: var(--text-secondary);">Ausgewählter Artikel:</span>
|
||||
<strong id="learn-selected-article-display" style="font-size: 16px; color: var(--color-primary);">Kein Artikel ausgewählt</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recording Controls -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">Aufnahme-Steuerung</h2>
|
||||
<p class="card-subtitle">Serienaufnahme starten und Artikel drehen</p>
|
||||
</div>
|
||||
<div class="card-body" style="display: flex; flex-direction: column; gap: 16px;">
|
||||
<button id="learn-start-capture-btn" class="btn btn-accent btn-glow" style="width: 100%; height: 50px; font-size: 15px;" onclick="startSerialCapture()">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3" fill="currentColor"/></svg>
|
||||
START (SERIENAUFNAHME)
|
||||
</button>
|
||||
<div class="progress-info" style="display: flex; justify-content: space-between; font-size: 13px; color: var(--text-secondary);">
|
||||
<span>Fortschritt:</span>
|
||||
<span id="learn-progress-text">0 / 10 Bilder</span>
|
||||
</div>
|
||||
<div class="progress-bar-container" style="height: 10px;">
|
||||
<div class="progress-bar-fill" id="learn-progress-fill" style="width: 0%; background: var(--color-accent); box-shadow: 0 0 10px var(--color-accent-glow);"></div>
|
||||
</div>
|
||||
<p style="font-size: 12px; color: var(--text-muted); line-height: 1.4;">
|
||||
Das System nimmt im Sekundentakt automatisch 10 Bilder auf. Stupsen Sie das Produkt zwischen den Signaltönen leicht an, um verschiedene Ansichten zu erfassen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gallery Section -->
|
||||
<div class="card" style="margin-top: 24px;">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<h2 class="card-title">Bilder-Galerie (Aktuelle Session)</h2>
|
||||
<p class="card-subtitle">Hier werden die 10 aufgenommenen Bilder angezeigt. Lösche fehlerhafte Bilder per Klick auf das X.</p>
|
||||
</div>
|
||||
<div style="display: flex; gap: 12px; align-items: center;">
|
||||
<span class="capture-count-badge" id="learn-session-count-badge">Session Bilder: 0</span>
|
||||
<button id="reset-all-captures-btn" class="btn btn-danger" onclick="resetAllCapturedData()" style="display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 13px;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
|
||||
Alle Trainingsbilder löschen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="gallery-grid" id="learn-gallery-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 16px;">
|
||||
<div class="empty-state" id="learn-gallery-empty" style="grid-column: 1 / -1; padding: 40px 0;">
|
||||
<p>Noch keine Aufnahmen in dieser Session</p>
|
||||
<span>Wähle ein Produkt und starte die Serienaufnahme</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DEVELOPER DASHBOARD TAB -->
|
||||
<section id="tab-dashboard" class="tab-content">
|
||||
<div class="dashboard-grid">
|
||||
@@ -217,6 +341,49 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 0: Reset Captured Training Data -->
|
||||
<div class="card" style="border: 1px solid rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.04);">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<h2 class="card-title" style="color: var(--color-danger);">⚠ KI Gefahrenzone & Reset-Optionen</h2>
|
||||
<p class="card-subtitle">Trainingsdaten löschen oder das trainierte KI-Modell zurücksetzen</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body" style="display: flex; flex-direction: column; gap: 20px;">
|
||||
<!-- Option 1: Dataset reset -->
|
||||
<div style="display: flex; flex-direction: column; gap: 8px;">
|
||||
<h3 style="margin: 0; font-size: 14px; color: var(--text-primary);">1. Trainingsbilder & Kalibrierung</h3>
|
||||
<p style="font-size: 13px; color: var(--text-secondary); margin: 0; line-height: 1.5;">
|
||||
Löscht alle selbst erfassten Trainingsbilder und setzt den kalibrierten Hintergrund zurück.
|
||||
</p>
|
||||
<div class="action-row" style="margin-top: 4px;">
|
||||
<button id="dashboard-reset-btn" class="btn btn-danger" onclick="resetAllCapturedData()" style="display: flex; align-items: center; gap: 8px;">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
|
||||
Eigene Bilder & Kalibrierung zurücksetzen
|
||||
</button>
|
||||
<span class="action-desc" style="color: var(--color-danger); font-weight: 500;">Nicht umkehrbar!</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="border-top: 1px solid rgba(239, 68, 68, 0.2); width: 100%;"></div>
|
||||
|
||||
<!-- Option 2: Model reset -->
|
||||
<div style="display: flex; flex-direction: column; gap: 8px;">
|
||||
<h3 style="margin: 0; font-size: 14px; color: var(--text-primary);">2. KI-Modell zurücksetzen</h3>
|
||||
<p style="font-size: 13px; color: var(--text-secondary); margin: 0; line-height: 1.5;">
|
||||
Löscht das trainierte PyTorch- und ONNX-Modell. Das System fällt danach in den Simulations-Modus zurück, bis ein neues Modell trainiert wird.
|
||||
</p>
|
||||
<div class="action-row" style="margin-top: 4px;">
|
||||
<button id="dashboard-reset-model-btn" class="btn btn-danger" onclick="resetAIModel()" style="display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.3)); border: 1px solid rgba(239, 68, 68, 0.5);">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67"/></svg>
|
||||
Trainiertes KI-Modell zurücksetzen
|
||||
</button>
|
||||
<span class="action-desc" style="color: var(--color-danger); font-weight: 500;">Setzt Inferenz auf Simulation zurück.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3: Export & Hardware-Performance -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
@@ -272,14 +439,17 @@
|
||||
<div class="control-group">
|
||||
<label for="param-batch">Batch Size</label>
|
||||
<select id="param-batch">
|
||||
<option value="4">4</option>
|
||||
<option value="8" selected>8</option>
|
||||
<option value="16">16</option>
|
||||
<option value="4" selected>4 (CPU empfohlen)</option>
|
||||
<option value="8">8 (GPU)</option>
|
||||
<option value="16">16 (GPU)</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary" id="start-training-btn" onclick="startTraining()">
|
||||
Training starten
|
||||
</button>
|
||||
<button class="btn btn-danger" id="cancel-training-btn" onclick="cancelTraining()" style="display: none;">
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Training Status -->
|
||||
@@ -373,7 +543,7 @@
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="app-footer">
|
||||
<p>Lizenz-Fokus: 100% kommerziell nutzbar, BSD & MIT Open-Source Lizenzen. ONNX Runtime Inference.</p>
|
||||
<p>Made by Hephex Industries</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user