Thomas Heisig
<!DOCTYPE html> <html lang="de" data-theme="dark"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>KI Dashboard</title> <!-- Styles & Scripts --> <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"> <script src="{{ url_for('static', filename='script.js') }}" type="module" defer></script> <!-- Favicon & Libraries --> <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}"> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </head> <body> <!-- Header mit Login, Titel & Theme-Toggle --> <header> <h1>KI Dashboard</h1> <form id="login-form" class="header-login" autocomplete="off"> <input type="text" id="username" name="username" placeholder="Benutzer" required> <input type="password" id="password" name="password" placeholder="Passwort" required> <button type="submit">Login</button> <span id="login-status" class="status"></span> </form> <button id="theme-toggle" aria-label="Farbschema umschalten">🌓</button> </header> <main id="main" role="main"> <!-- MULTIMEDIA & EXTERNE QUELLEN (gemeinsame Kachel) --> <section id="input-sources-panel" class="panel"> <h2>Medien & Quellen</h2> <!-- Drag & Drop / Datei --> <div id="drop-zone" class="drop-zone">Datei hierher ziehen oder klicken</div> <input type="file" id="file-upload" accept="image/*,video/*,audio/*,.pdf,.txt" hidden> <!-- Kamera & Mikrofon --> <div class="media-controls"> <button id="mic-btn" aria-pressed="false">🎤 Mikrofon</button> <button id="cam-btn" aria-pressed="false">🎥 Kamera</button> </div> <video id="video-preview" autoplay muted playsinline hidden></video> <canvas id="photo-canvas" hidden></canvas> <!-- Wissensdienste --> <div class="source-buttons"> <button id="wiki-fetch">📚 Wikipedia</button> <button id="dict-fetch">🗒️ Wörterbuch</button> <button id="wolfram-fetch">📈 WolframAlpha</button> <button id="web-search">🔎 Websuche</button> </div> </section> <!-- CHAT --> <section id="chat-panel" class="panel"> <h2>KI Chat</h2> <div id="chat-box" aria-live="polite" aria-atomic="true"></div> <textarea id="chat-input" placeholder="Ihre Eingabe … (Enter = Senden, Shift+Enter = Zeilenumbruch)" rows="3" data-send-on-enter></textarea> <div class="token-counter">Tokens: <span id="token-counter">0</span></div> <div class="chat-controls"> <button id="send-btn" aria-label="Nachricht senden">Senden ⏎</button> <button id="clear-chat" aria-label="Chatverlauf löschen">Löschen 🗑️</button> </div> </section> <!-- PARAMETER & TRANSLATOR SETTINGS --> <section id="parameter-panel" class="panel"> <h2>Einstellungen</h2> <h3>Generierungsparameter</h3> <div class="param-row"> <label for="temperature">Temperatur:</label> <input type="range" min="0" max="1" step="0.05" id="temperature" value="0.7"><span id="temperature-val">0.7</span> </div> <div class="param-row"> <label for="max-tokens">Max Tokens:</label> <input type="number" id="max-tokens" value="512" min="64" max="4096"> </div> <div class="param-row"> <label for="top-p">Top-p:</label> <input type="number" min="0" max="1" step="0.05" id="top-p" value="1"><span>%</span> </div> <div class="param-row"> <label for="frequency-penalty">Freq-Penalty:</label> <input type="number" min="0" max="2" step="0.1" id="frequency-penalty" value="0"> </div> <div class="param-row"> <label for="presence-penalty">Pres-Penalty:</label> <input type="number" min="0" max="2" step="0.1" id="presence-penalty" value="0"> </div> <h3>Übersetzer</h3> <div class="param-row"> <label for="lang-from">Von:</label> <select id="lang-from"> <option value="auto">Auto</option> <option value="de">Deutsch</option> <option value="en">Englisch</option> <option value="fr">Französisch</option> <option value="es">Spanisch</option> </select> <label for="lang-to">Nach:</label> <select id="lang-to"> <option value="de">Deutsch</option> <option value="en" selected>Englisch</option> <option value="fr">Französisch</option> <option value="es">Spanisch</option> </select> </div> <h3>Optionen</h3> <label><input type="checkbox" id="streaming"> Streaming-Antwort</label> <label><input type="checkbox" id="log-prompts" checked> Logging aktiv</label> <label><input type="checkbox" id="expert-mode"> Experten-Modus</label> <button id="action-btn">Aktion ausführen</button> </section> <!-- PROMPT TUNING --> <section id="prompt-tuning" class="panel"> <h2>Prompt-Tuning</h2> <textarea id="tuning-prompt" placeholder="System- oder Rollen-Prompt hier eingeben …" rows="4"></textarea> <button id="tuning-submit">Prompt anwenden</button> </section> <!-- VISUALISIERUNG --> <section id="visual-output" class="panel"> <h2>KI Visualisierung</h2> <canvas id="usage-chart" height="200"></canvas> <div id="spacy-visual" class="spacy-box" aria-live="polite"></div> </section> <!-- VERLAUF / LOGGING --> <section id="log-view" class="panel"> <h2>Verlauf</h2> <ul id="log-list"></ul> <button id="download-log">Log herunterladen</button> </section> </main> <footer> <small>© 2025 KI Dashboard</small> </footer> <!-- Chat-Nachrichten-Vorlage --> <template id="msg-template"> <div class="msg <%= role %>"> <span class="msg-role"><%= roleLabel %></span> <div class="msg-content"><%= content %></div> </div> </template> </body> </html> - Initial Deployment
e9ec631 verified