Hugging Face's logo

Spaces:
zazaman
/
guardrails-final
Sleeping

App Files Community
guardrails-final
File size: 5,905 Bytes 
a2e1879
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
 
<!DOCTYPE html>
<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>