-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex_example.html
More file actions
202 lines (195 loc) · 12.7 KB
/
index_example.html
File metadata and controls
202 lines (195 loc) · 12.7 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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<!--
Tech Stack:
- HTML5: Structure and markup
- Tailwind CSS: Utility-first CSS framework for rapid styling
- face-api.js: JavaScript library for face detection/recognition
- Google Gemini API: AI content generation (text, analysis, etc.)
- Imagen API: AI image generation
- Vanilla JavaScript: All dynamic features and event handling
-->
<html lang="no">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title and Metadata -->
<title>CORTEX Anomaly Detector | Cyberpunk Ansiktsgjenkjenning</title>
<meta name="description" content="Cyberpunk-inspired AI anomaly and facial recognition for security-critical environments.">
<meta name="keywords" content="face recognition, anomaly detection, AI, cyberpunk, biometrics, security, CEO Dashboard, Gemini, Imagen">
<meta name="author" content="GizzZmo | CoreTex Team">
<!-- Favicon for branding -->
<link rel="icon" href="favicon.ico">
<!-- Tailwind CSS for styling -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts for monospaced cyber look -->
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
<!-- face-api.js for real-time face detection/recognition -->
<script src="https://cdn.jsdelivr.net/npm/@vladmandic/face-api/dist/face-api.js"></script>
<!-- Custom CSS: Color palette, fonts, visual effects -->
<style>
:root {
--primary-color: #00ffcc;
--secondary-color: #ff00ff;
--background-color: #0a0c10;
--text-color: #e0e0e0;
--danger-color: #ff3333;
--font-family: 'Share Tech Mono', monospace;
}
html, body { height: 100%; overflow: hidden; }
body {
font-family: var(--font-family);
background-color: var(--background-color);
}
/* Visual effects for "cyberpunk" look */
.cyber-shadow { text-shadow: 0 0 5px var(--primary-color); }
.cyber-shadow-secondary { text-shadow: 0 0 5px var(--secondary-color); }
.cyber-border { border: 2px solid var(--primary-color); box-shadow: 0 0 15px var(--primary-color), inset 0 0 15px var(--primary-color); }
.cyber-border-secondary { border: 1px solid var(--secondary-color); box-shadow: 0 0 10px var(--secondary-color); }
.cyber-button {
background-color: transparent;
border: 2px solid var(--primary-color);
color: var(--primary-color);
transition: all 0.3s ease;
box-shadow: 0 0 5px var(--primary-color);
}
.cyber-button:hover:not(:disabled) { background-color: var(--primary-color); color: var(--background-color); box-shadow: 0 0 15px var(--primary-color); }
.cyber-button:disabled { border-color: #555; color: #555; cursor: not-allowed; box-shadow: none; }
/* Subtle scanline background effect */
body::after {
content: "";
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0) 0, rgba(255,255,255,0.05) 1px, rgba(0,0,0,0.1) 2px);
pointer-events: none;
z-index: 1000;
}
/* Log color coding */
#log li.anomaly { color: var(--danger-color); font-weight: bold; }
#log li.known { color: var(--primary-color); }
#log li.system { color: #aaa; }
/* Loading spinner styling */
.spinner {
width: 48px;
height: 48px;
border: 5px solid var(--primary-color);
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
@keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* Chat styling */
.chat-user { text-align: right; color: var(--primary-color); }
.chat-assistant { text-align: left; color: var(--text-color); background: rgba(0, 255, 204, 0.05); border-radius: 5px; padding: 4px 8px; }
</style>
</head>
<body class="text-[var(--text-color)] flex justify-center items-center min-h-screen p-4 overflow-hidden" aria-label="CORTEX anomaly detection main page">
<!-- Main layout container -->
<div class="container flex flex-wrap gap-8 w-full h-full max-h-[95vh] max-w-7xl cyber-border p-4 bg-[rgba(10,12,16,0.8)] backdrop-blur-sm">
<!-- Main content: video feed, controls, and reports -->
<div class="main-content flex-grow flex flex-col min-w-[300px] flex-[3]">
<!-- App title and branding -->
<h1 class="text-2xl text-center text-[var(--primary-color)] cyber-shadow mb-4 tracking-[3px]">
// CORTEX ANOMALY DETECTION //
</h1>
<!-- Video container for webcam input and overlay for face detection boxes -->
<div class="video-container relative w-full bg-black cyber-border-secondary aspect-video">
<video id="video" class="absolute top-0 left-0 w-full h-full object-cover" autoplay muted playsinline></video>
<canvas id="overlay" class="absolute top-0 left-0 w-full h-full"></canvas>
</div>
<!-- Control buttons for registration, export, import, analysis, and reports -->
<div id="controls-grid" class="controls grid grid-cols-2 md:grid-cols-3 gap-4 mt-4">
<button id="capture-btn" class="cyber-button py-2 uppercase text-sm" disabled>REGISTRER ANSIKT</button>
<button id="save-btn" class="cyber-button py-2 uppercase text-sm" disabled>EKSPORTER DB</button>
<label for="load-input" class="cyber-button text-center py-2 uppercase text-sm cursor-pointer" id="load-label">IMPORTER DB</label>
<input type="file" id="load-input" class="hidden" accept=".json">
<button id="behavior-btn" class="cyber-button py-2 uppercase text-sm" disabled>🕵️ ANALYSER ADFERD</button>
<button id="report-btn" class="cyber-button py-2 uppercase text-sm" disabled>✨ GENERER RAPPORT</button>
<button id="save-unknown-btn" class="cyber-button py-2 uppercase text-sm" disabled>⬇️ EKSPORTER UKJENTE</button>
</div>
<!-- Footer: version and tech stack info -->
<div class="mt-auto text-center text-xs text-gray-500 pt-4">
<p>CORTEX v5.9 | Tech Stack: HTML5, Tailwind CSS, face-api.js, Gemini API, Imagen</p>
</div>
</div>
<!-- Sidebar: API key, settings, lists, logs, and chat assistant -->
<div class="sidebar flex-grow flex flex-col gap-4 bg-[rgba(0,0,0,0.3)] border border-[var(--primary-color)] p-4 min-w-[250px] flex-[1] overflow-y-auto">
<!-- Google API Key input for enabling AI features -->
<div>
<h2 class="text-lg text-[var(--secondary-color)] cyber-shadow-secondary border-b border-[var(--secondary-color)] pb-2 mb-2">API NØKKEL</h2>
<div class="flex gap-2">
<input type="password" id="api-key-input" placeholder="Lim inn din Google API Nøkkel" class="bg-[#222] border border-[var(--primary-color)] text-[var(--primary-color)] p-1 w-full font-mono text-xs" aria-label="Google API Key">
<button id="save-api-key-btn" class="cyber-button px-2 text-sm">LAGRE</button>
</div>
</div>
<!-- Settings: tolerance slider for face matching -->
<div>
<h2 class="text-lg text-[var(--secondary-color)] cyber-shadow-secondary border-b border-[var(--secondary-color)] pb-2 mb-2">INNSTILLINGER</h2>
<label for="tolerance-slider" class="text-sm">Gjenkjenningstoleranse: <span id="tolerance-value">0.6</span></label>
<input type="range" id="tolerance-slider" min="0.3" max="0.7" value="0.6" step="0.05" class="w-full mt-1">
</div>
<!-- AI Protocols: Gabriel (integrity), Rafael (movement analysis) -->
<div>
<h2 class="text-lg text-[var(--secondary-color)] cyber-shadow-secondary border-b border-[var(--secondary-color)] pb-2 mb-2">AI-PROTOKOLLER</h2>
<div class="grid grid-cols-2 gap-2">
<button id="gabriel-btn" class="cyber-button py-2 uppercase text-sm">GABRIEL</button>
<button id="rafael-btn" class="cyber-button py-2 uppercase text-sm" disabled>RAFAEL</button>
</div>
</div>
<!-- Known faces list -->
<div>
<h2 class="text-lg text-[var(--secondary-color)] cyber-shadow-secondary border-b border-[var(--secondary-color)] pb-2 mb-2">KJENTE INDIVIDER</h2>
<ul id="known-faces-list" class="list-none h-20 overflow-y-auto bg-[rgba(0,0,0,0.5)] p-2 text-sm"></ul>
</div>
<!-- System log: shows all system/AI/user events -->
<div>
<h2 class="text-lg text-[var(--secondary-color)] cyber-shadow-secondary border-b border-[var(--secondary-color)] pb-2 mb-2">SYSTEMLOGG</h2>
<ul id="log" class="list-none h-20 overflow-y-auto bg-[rgba(0,0,0,0.5)] p-2 text-xs"></ul>
</div>
<!-- Chat assistant using Gemini API -->
<div class="flex flex-col flex-grow min-h-0">
<h2 class="text-lg text-[var(--secondary-color)] cyber-shadow-secondary border-b border-[var(--secondary-color)] pb-2 mb-2">CORTEX ASSISTENT</h2>
<div id="chat-history" class="flex-grow overflow-y-auto bg-[rgba(0,0,0,0.5)] p-2 text-xs space-y-2"></div>
<form id="chat-form" class="flex gap-2 mt-2">
<input type="text" id="chat-input" placeholder="Spør assistenten..." class="bg-[#222] border border-[var(--primary-color)] text-[var(--primary-color)] p-1 w-full font-mono text-xs" disabled>
<button id="chat-submit-btn" type="submit" class="cyber-button px-2 text-sm" disabled>SEND</button>
</form>
</div>
</div>
</div>
<!-- Loading and modal overlays, for feedback and additional features -->
<!-- Loading overlay shown during AI/model init -->
<div id="loading-message" class="fixed inset-0 flex justify-center items-center bg-[rgba(0,0,0,0.9)] z-50 flex-col gap-4 text-center">
<div class="text-3xl text-[var(--primary-color)] cyber-shadow">INITIALISERER AI-KJERNE...</div>
<div id="loading-status" class="max-w-xs">Venter på AI-bibliotek...</div>
</div>
<!-- Registration modal for adding new individuals -->
<div id="modal-backdrop" class="hidden fixed inset-0 flex justify-center items-center bg-[rgba(0,0,0,0.9)] z-40">
<div class="modal bg-[var(--background-color)] border-2 border-[var(--secondary-color)] p-8 shadow-[0_0_15px_var(--secondary-color)] text-center">
<h2 class="text-2xl text-[var(--secondary-color)] cyber-shadow-secondary mb-4">REGISTRER NYTT INDIVID</h2>
<p class="mb-4">Skriv inn navn på individet:</p>
<input type="text" id="name-input" placeholder="Navn..." class="bg-[#222] border border-[var(--primary-color)] text-[var(--primary-color)] p-2 w-full mb-4 font-mono">
<button id="submit-name-btn" class="cyber-button w-full py-2 uppercase">LAGRE</button>
</div>
</div>
<!-- Report modal for displaying risk reports -->
<div id="report-modal-backdrop" class="hidden fixed inset-0 flex justify-center items-center bg-[rgba(0,0,0,0.9)] z-40 p-4">
<div class="modal bg-[var(--background-color)] border-2 border-[var(--secondary-color)] p-8 shadow-[0_0_15px_var(--secondary-color)] text-center w-full max-w-2xl max-h-[80vh] flex flex-col">
<h2 class="text-2xl text-[var(--secondary-color)] cyber-shadow-secondary mb-4">ANALYSERAPPORT</h2>
<div id="report-content" class="text-left overflow-y-auto flex-grow bg-black/30 p-4 text-sm/relaxed"></div>
<button id="close-report-btn" class="cyber-button w-full py-2 uppercase mt-4">LUKK</button>
</div>
</div>
<!-- (Other modals for behavior analysis, image generation, protocol details, etc., omitted for brevity) -->
<!-- JavaScript: Handles all dynamic logic, AI integration, webcam, face detection, chat, etc. -->
<script>
// JavaScript code integrates all controls, AI features, and UI logic.
// Uses face-api.js for face detection/recognition (runs locally in browser).
// Uses Gemini API (via fetch) for AI chat, reporting, and JSON analysis.
// Uses Imagen API (via fetch) for generating photorealistic images from descriptions.
// See main code for details; all logic is modular, event-driven, and includes error handling.
</script>
</body>
</html>