-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpolicy-manager.html
More file actions
178 lines (171 loc) · 8.41 KB
/
policy-manager.html
File metadata and controls
178 lines (171 loc) · 8.41 KB
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Policy Manager - Content Moderation Assistant</title>
<link rel="stylesheet" href="policy-manager.css">
</head>
<body>
<div class="container">
<header class="header">
<h1>Policy Manager</h1>
<p class="subtitle">Configure AI-powered content analysis policies</p>
<div class="header-actions">
<button id="backToOptions" class="btn btn-secondary">← Back to Settings</button>
<button id="testAnalysis" class="btn btn-primary">Test Analysis</button>
</div>
</header>
<main class="main-content">
<!-- API Configuration -->
<section class="api-section">
<h2>Gemini API Configuration</h2>
<div class="api-config">
<div class="config-item">
<label for="apiKey">Gemini API Key:</label>
<div class="input-group">
<input type="password" id="apiKey" placeholder="Enter your Gemini API key">
<button id="toggleApiKey" class="btn btn-small">Show</button>
</div>
<p class="help-text">
Get your API key from <a href="https://makersuite.google.com/app/apikey" target="_blank">Google AI Studio</a>
</p>
</div>
<div class="config-item">
<button id="saveApiKey" class="btn btn-primary">Save API Key</button>
<button id="testApiKey" class="btn btn-secondary">Test Connection</button>
<button id="debugApi" class="btn btn-small">Debug</button>
</div>
<div id="apiStatus" class="status-indicator">
<span class="status-dot"></span>
<span class="status-text">Not configured</span>
</div>
</div>
</section>
<!-- General Policies -->
<section class="policies-section">
<h2>General Trust & Safety Policies</h2>
<p class="section-description">
These are standard content moderation policies based on industry best practices.
</p>
<div id="generalPolicies" class="policies-grid">
<!-- General policies will be populated by JavaScript -->
</div>
</section>
<!-- Custom Policies -->
<section class="policies-section">
<h2>Custom Policies</h2>
<p class="section-description">
Create your own policies for specific content types or organizational needs.
</p>
<div class="policies-header">
<button id="addCustomPolicy" class="btn btn-primary">Add Custom Policy</button>
<button id="importPolicies" class="btn btn-secondary">Import Policies</button>
<button id="exportPolicies" class="btn btn-secondary">Export Policies</button>
</div>
<div id="customPolicies" class="policies-grid">
<!-- Custom policies will be populated by JavaScript -->
</div>
</section>
<!-- Analysis Settings -->
<section class="analysis-section">
<h2>Analysis Settings</h2>
<div class="settings-grid">
<div class="setting-item">
<label for="analysisMode">Analysis Mode:</label>
<select id="analysisMode">
<option value="automatic">Automatic (AI + Rules)</option>
<option value="ai_only">AI Only (Gemini)</option>
<option value="rules_only">Rules Only (Keyword-based)</option>
</select>
</div>
<div class="setting-item">
<label for="confidenceThreshold">Confidence Threshold:</label>
<input type="range" id="confidenceThreshold" min="50" max="95" value="75">
<span id="confidenceValue">75%</span>
</div>
<div class="setting-item">
<label for="maxContentLength">Max Content Length:</label>
<input type="number" id="maxContentLength" min="1000" max="10000" value="4000">
<span>characters</span>
</div>
<div class="setting-item">
<label>
<input type="checkbox" id="enableContextAnalysis" checked>
Enable URL Context Analysis
</label>
</div>
<div class="setting-item">
<label>
<input type="checkbox" id="enableScreenshotAnalysis" checked>
Include Screenshots in Analysis
</label>
</div>
</div>
</section>
<!-- Test Analysis -->
<section class="test-section">
<h2>Test Analysis</h2>
<div class="test-content">
<div class="test-input">
<label for="testUrl">Test URL:</label>
<input type="url" id="testUrl" placeholder="https://example.com">
<button id="analyzeUrl" class="btn btn-primary">Analyze URL</button>
</div>
<div class="test-input">
<label for="testContent">Or Test Content:</label>
<textarea id="testContent" rows="5" placeholder="Enter content to analyze..."></textarea>
<button id="analyzeContent" class="btn btn-primary">Analyze Content</button>
</div>
</div>
<div id="testResults" class="test-results">
<!-- Test results will be populated by JavaScript -->
</div>
</section>
</main>
</div>
<!-- Policy Editor Modal -->
<div id="policyModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3 id="modalTitle">Add Custom Policy</h3>
<button class="modal-close">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="policyName">Policy Name:</label>
<input type="text" id="policyName" placeholder="e.g., Company Brand Guidelines">
</div>
<div class="form-group">
<label for="policyDescription">Description:</label>
<textarea id="policyDescription" rows="3" placeholder="Describe what this policy covers..."></textarea>
</div>
<div class="form-group">
<label for="policySeverity">Severity Level:</label>
<select id="policySeverity">
<option value="low">Low</option>
<option value="medium" selected>Medium</option>
<option value="high">High</option>
</select>
</div>
<div class="form-group">
<label for="policyExamples">Examples (one per line):</label>
<textarea id="policyExamples" rows="4" placeholder="Example 1 Example 2 Example 3"></textarea>
</div>
<div class="form-group">
<label>
<input type="checkbox" id="policyEnabled" checked>
Enable this policy
</label>
</div>
</div>
<div class="modal-footer">
<button id="savePolicy" class="btn btn-primary">Save Policy</button>
<button id="cancelPolicy" class="btn btn-secondary">Cancel</button>
</div>
</div>
</div>
<script src="gemini-analyzer.js"></script>
<script src="policy-manager.js"></script>
</body>
</html>