ADOS Wiki

LabelScan: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(21 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
<html><div id="ados-labelscan" class="ados-scan">
<html>
<div id="ados-labelscan">


<header class="ados-scan__header">
  <!-- Kopf -->
  <h2>📸 Abfüllung scannen</h2>
  <div class="card" style="margin-bottom:10px;">
  <p class="ados-scan__sub">Foto der Front-Label-Seite aufnehmen oder wählen. Die Erkennung läuft lokal im Browser.</p>
    <h2>📸 Abfüllung scannen</h2>
</header>
    <p class="sub">Foto des Frontlabels aufnehmen oder auswählen. Der Abgleich erfolgt lokal im Browser – keine Uploads.</p>
  </div>
 
  <div class="scan-grid">
 
    <!-- Linke Spalte -->
    <div class="col">
 
      <div class="card">
 
        <!-- Dropzone (nur für Drag & Drop) -->
        <label id="ados-scan-drop" class="ados-drop" aria-label="Bild hier ablegen">
          <div class="icon">🖼️</div>
          <div><b>Bild hierher ziehen</b> oder unten auswählen</div>
          <div class="help">Tipp: frontal, gute Beleuchtung, kein Blitz-Reflex.</div>
        </label>
 
        <!-- getrennte Buttons + Inputs -->
        <div class="ados-scan__pick" style="margin-top:10px; display:flex; gap:6px; justify-content:center;">
          <button id="ados-scan-btn-camera"  type="button" class="btn">📷 Foto aufnehmen</button>
          <button id="ados-scan-btn-gallery" type="button" class="btn">🖼️ Bild wählen</button>
        </div>


<form id="ados-scan-form" class="ados-scan__form" onsubmit="return false">
        <input id="ados-scan-file-camera" type="file" accept="image/*" capture="environment" hidden>
  <label for="ados-scan-file" class="ados-scan__drop" id="ados-scan-drop" aria-label="Datei wählen oder hier ablegen">
        <input id="ados-scan-file-gallery" type="file" accept="image/*" hidden>
    <div class="ados-scan__drop-icon">🖼️</div>
    <div class="ados-scan__drop-text">
      <b>Bild hierher ziehen</b> oder
      <button id="ados-scan-bigbtn" type="button" class="btn btn-secondary">Foto aufnehmen / wählen</button>
    </div>
    <input id="ados-scan-file" type="file" accept="image/*" capture="environment" hidden>
  </label>


  <div class="ados-scan__statusrow">
        <!-- Status + Progress -->
    <div id="ados-scan-status" class="ados-scan__status">Bereit.</div>
        <div class="statusbar" style="margin-top:8px;">
    <progress id="ados-scan-progress" max="1" value="0" class="ados-scan__progress" hidden></progress>
          <div id="ados-scan-status">Bereit.</div>
  </div>
          <progress id="ados-scan-progress" max="1" value="0" hidden></progress>
        </div>


  <div id="ados-scan-preview" class="ados-scan__preview" aria-live="polite" aria-atomic="true"></div>
        <!-- Aktionen -->
        <div class="action-row" style="margin-top:8px; display:flex; gap:8px; justify-content:center;">
          <button id="ados-scan-run" type="button" class="btn btn-primary">🔍 Erkennen &amp; suchen</button>
          <button id="ados-scan-reset" type="button" class="btn btn-ghost">Zurücksetzen</button>
        </div>


  <div class="ados-scan__actions">
       </div>
    <button id="ados-scan-run" type="submit" class="btn btn-primary">🔍 Erkennen &amp; suchen</button>
    <button type="reset" class="btn btn-ghost" onclick="
      const p=document.getElementById('ados-scan-preview'); if(p) p.innerHTML='';
       const f=document.getElementById('ados-scan-file'); if(f) f.value='';
      const s=document.getElementById('ados-scan-status'); if(s) s.textContent='Bereit.';
    ">Zurücksetzen</button>
  </div>
</form>


<section class="ados-scan__resultswrap">
      <!-- Vorschau -->
  <h3>Vorschläge</h3>
      <div id="ados-scan-preview" class="card preview" aria-live="polite" aria-atomic="true">
  <div id="ados-scan-results" class="ados-scan__results"></div>
        <div class="note">Noch keine Vorschau. Wähle ein Foto.</div>
</section>
      </div>


<details class="ados-scan__debug">
      <div class="note" style="margin-top:6px;">
  <summary>OCR-Text (Debug)</summary>
        🔒 Deine Fotos bleiben auf deinem Gerät. Es wird nichts auf den Server hochgeladen.
  <div id="ados-scan-ocr" style="white-space:pre-wrap; font-size:12px; color:#666;"></div>
      </div>
</details>


<footer class="ados-scan__note">🔒 Das Bild bleibt auf deinem Gerät. Es wird nicht hochgeladen.</footer>
    </div>


    <!-- Rechte Spalte -->
    <div class="col">
      <div class="card">
        <h3 style="margin:0 0 .4rem;">🔎 Ergebnisse</h3>
        <div id="ados-scan-results" class="results">
          <div class="empty">Hier erscheinen passende Abfüllungen mit Link ins Wiki.</div>
        </div>
      </div>
      <div class="card">
        <h3 style="margin:0 0 .4rem;">Tipps</h3>
        <ul style="margin:.25rem 0 .2rem 1.1rem;">
          <li>Frontlabel direkt fotografieren</li>
          <li>Gute Beleuchtung</li>
          <li>Label möglichst das ganze Bild füllen</li>
          <li>Bei Spiegelungen: leicht schräg, aber nah</li>
          <li>keine ähnlichen Flaschen im Hintergrund die im Fokus sind</li>
        </ul>
      </div>
    </div>
<button id="ados-install" class="mw-ui-button" style="display:none">📲 LabelScan installieren</button>
  </div>
</div>
</div>
</html>
Abgerufen von „https://ados-wiki.de/wiki/LabelScan“