Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Guardrails Chat Interface</title> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- Header --> | |
| <header class="header"> | |
| <div class="header-content"> | |
| <div class="logo"> | |
| <i class="fas fa-shield-alt"></i> | |
| <span>Guardrails Chat</span> | |
| </div> | |
| <div class="header-info"> | |
| <div class="status-indicator" id="status-indicator"> | |
| <i class="fas fa-circle"></i> | |
| <span>Connected</span> | |
| </div> | |
| <div class="stats" id="stats"> | |
| <span class="stat-item"> | |
| <i class="fas fa-clock"></i> | |
| <span id="avg-latency">0ms</span> | |
| </span> | |
| <span class="stat-item"> | |
| <i class="fas fa-ban"></i> | |
| <span id="blocks-count">0</span> | |
| </span> | |
| <span class="stat-item"> | |
| <i class="fas fa-user-secret"></i> | |
| <span id="pii-count">0</span> | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Chat Container --> | |
| <main class="chat-container"> | |
| <div class="chat-messages" id="chat-messages"> | |
| <!-- Welcome Message --> | |
| <div class="message-container system-message"> | |
| <div class="message"> | |
| <div class="message-content"> | |
| <p>🛡️ Welcome to the Guardrails Chat Interface!</p> | |
| <p>This system uses AI-powered security to detect and prevent prompt injection attacks, while protecting sensitive information in outputs.</p> | |
| <ul> | |
| <li><strong>Input Protection:</strong> Your finetuned model (<code>zazaman/fmb</code>) scans prompts for attacks</li> | |
| <li><strong>Output Protection:</strong> PII detection automatically anonymizes personal information</li> | |
| <li><strong>Real-time Insights:</strong> Click the dropdown arrows to see detailed security analysis</li> | |
| </ul> | |
| <p>Start chatting below to see the guardrails in action!</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="input-container"> | |
| <!-- File Upload Area --> | |
| <div class="file-upload-section" id="file-upload-section"> | |
| <div class="file-upload-area" id="file-upload-area"> | |
| <input type="file" id="file-input" accept=".txt,.md,.text,.rtf,.pdf,.docx" style="display: none;"> | |
| <div class="file-drop-zone" id="file-drop-zone"> | |
| <i class="fas fa-cloud-upload-alt"></i> | |
| <p>Drop files here or <span class="upload-link">browse</span></p> | |
| <small>Supported: .txt, .md, .text, .rtf, .pdf, .docx (max 10MB for text, 25MB for Word, 50MB for PDF)</small> | |
| </div> | |
| </div> | |
| <div class="uploaded-files" id="uploaded-files"></div> | |
| </div> | |
| <div class="input-wrapper"> | |
| <div class="input-controls"> | |
| <button id="attach-button" type="button" title="Attach file"> | |
| <i class="fas fa-paperclip"></i> | |
| </button> | |
| <textarea | |
| id="message-input" | |
| placeholder="Type your message here..." | |
| rows="1" | |
| maxlength="2000"></textarea> | |
| <button id="send-button" type="button"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="input-info"> | |
| <span class="char-count" id="char-count">0/2000</span> | |
| <span class="powered-by">Powered by Finetuned ModernBERT</span> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Config Panel (Hidden by default) --> | |
| <div class="config-panel" id="config-panel"> | |
| <div class="config-header"> | |
| <h3><i class="fas fa-cog"></i> System Configuration</h3> | |
| <button class="close-config" id="close-config"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="config-content" id="config-content"> | |
| <!-- Config will be loaded here --> | |
| </div> | |
| </div> | |
| <!-- Config Toggle Button --> | |
| <button class="config-toggle" id="config-toggle" title="System Configuration"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| <!-- Loading Overlay --> | |
| <div class="loading-overlay" id="loading-overlay"> | |
| <div class="loading-spinner"> | |
| <i class="fas fa-shield-alt fa-spin"></i> | |
| <p>Processing with guardrails...</p> | |
| </div> | |
| </div> | |
| <script src="{{ url_for('static', filename='js/app.js') }}"></script> | |
| </body> | |
| </html> |