Hugging Face's logo

Spaces:
CubicLabs
/
README
Runtime error

App Files Community
Restrictated commited on
Commit
6b3270a
·
verified ·
1 Parent(s): df7b41d

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +481 -0
index.html ADDED
@@ -0,0 +1,481 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-theme="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Cubic — AGI, AI, and Cybersecurity Research</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root{
12
+ --bg:#0b140f;
13
+ --panel:#101d16;
14
+ --panel-2:#132218;
15
+ --line:#1c2e21;
16
+ --line-bright:#2a4433;
17
+ --solder:#c9a227;
18
+ --copper:#a06a2e;
19
+ --silk:#eee9d8;
20
+ --text:#cfd6c8;
21
+ --muted:#788675;
22
+ --mx:50%;
23
+ --my:30%;
24
+ }
25
+ [data-theme="light"]{
26
+ --bg:#eee9da;
27
+ --panel:#f8f4e8;
28
+ --panel-2:#efe8d5;
29
+ --line:#ddd2ac;
30
+ --line-bright:#c3b382;
31
+ --solder:#8a6415;
32
+ --copper:#7a4a1f;
33
+ --silk:#20241a;
34
+ --text:#33362a;
35
+ --muted:#6f664e;
36
+ }
37
+ *{box-sizing:border-box;}
38
+ html{scroll-behavior:smooth;}
39
+ body{
40
+ margin:0;
41
+ font-family:'IBM Plex Sans',ui-sans-serif,system-ui;
42
+ color:var(--text);
43
+ background:var(--bg);
44
+ transition:background 0.25s ease, color 0.25s ease;
45
+ }
46
+ ::selection{background:var(--solder);color:#12160c;}
47
+ a{color:inherit;}
48
+ .circuit-bg{
49
+ position:fixed;
50
+ inset:0;
51
+ width:100%;
52
+ height:100%;
53
+ z-index:0;
54
+ pointer-events:none;
55
+ }
56
+ .circuit-bg path{
57
+ fill:none;
58
+ stroke:var(--line);
59
+ stroke-width:1.4;
60
+ }
61
+ .circuit-bg circle{
62
+ fill:var(--line-bright);
63
+ }
64
+ .pulse-layer{position:fixed;inset:0;z-index:0;pointer-events:none;}
65
+ .pulse{
66
+ position:absolute;
67
+ top:0;left:0;
68
+ width:4px;height:4px;
69
+ margin:-2px;
70
+ border-radius:50%;
71
+ background:var(--solder);
72
+ box-shadow:0 0 7px 1px var(--solder);
73
+ animation:travel linear infinite;
74
+ will-change:offset-distance;
75
+ }
76
+ @keyframes travel{ from{offset-distance:0%;} to{offset-distance:100%;} }
77
+ .cursor-glow{
78
+ position:fixed;
79
+ inset:0;
80
+ z-index:0;
81
+ pointer-events:none;
82
+ background:radial-gradient(480px circle at var(--mx) var(--my), rgba(201,162,39,0.10), transparent 72%);
83
+ }
84
+ body.paused .pulse{animation-play-state:paused;}
85
+ @media (prefers-reduced-motion: reduce){
86
+ .pulse{animation:none;display:none;}
87
+ .cursor-glow{background:none;}
88
+ }
89
+ .wrap{position:relative;z-index:1;max-width:960px;margin:0 auto;padding:0 24px 90px;}
90
+ header{
91
+ display:flex;
92
+ align-items:center;
93
+ justify-content:space-between;
94
+ padding:20px 0;
95
+ border-bottom:1px solid var(--line-bright);
96
+ margin-bottom:56px;
97
+ }
98
+ .brand{display:flex;align-items:center;gap:9px;}
99
+ .chip{width:22px;height:22px;flex-shrink:0;}
100
+ .chip rect{fill:none;stroke:var(--solder);stroke-width:1.4;}
101
+ .chip circle{fill:var(--solder);}
102
+ .chip line{stroke:var(--solder);stroke-width:1.2;}
103
+ .brand-name{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:16px;letter-spacing:0.01em;color:var(--silk);}
104
+ nav{display:flex;align-items:center;gap:16px;}
105
+ nav a{text-decoration:none;color:var(--muted);font-size:13px;font-weight:500;border-bottom:1px solid transparent;}
106
+ nav a:hover{color:var(--silk);border-color:var(--solder);}
107
+ .theme-row{display:flex;align-items:center;gap:6px;margin-left:6px;}
108
+ .switch-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);}
109
+ #theme-toggle{
110
+ width:32px;height:17px;
111
+ border:1px solid var(--line-bright);
112
+ border-radius:3px;
113
+ background:var(--panel-2);
114
+ position:relative;
115
+ cursor:pointer;
116
+ padding:0;
117
+ }
118
+ #theme-toggle::after{
119
+ content:"";
120
+ position:absolute;
121
+ top:1px;left:1px;
122
+ width:13px;height:13px;
123
+ border-radius:2px;
124
+ background:var(--solder);
125
+ transition:transform 0.16s ease;
126
+ }
127
+ [data-theme="light"] #theme-toggle::after{transform:translateX(15px);}
128
+ .eyebrow{
129
+ font-family:'IBM Plex Mono',monospace;
130
+ font-size:11.5px;
131
+ color:var(--solder);
132
+ letter-spacing:0.09em;
133
+ text-transform:uppercase;
134
+ margin-bottom:16px;
135
+ }
136
+ h1{
137
+ font-family:'IBM Plex Mono',monospace;
138
+ font-size:34px;
139
+ line-height:1.25;
140
+ font-weight:600;
141
+ color:var(--silk);
142
+ margin:0 0 16px;
143
+ max-width:620px;
144
+ letter-spacing:-0.01em;
145
+ }
146
+ .tagline{color:var(--muted);font-size:15.5px;line-height:1.65;max-width:540px;margin:0 0 44px;}
147
+ .pin1{
148
+ display:inline-block;
149
+ width:5px;height:5px;
150
+ border-radius:50%;
151
+ background:var(--solder);
152
+ margin-right:7px;
153
+ box-shadow:0 0 4px var(--solder);
154
+ }
155
+ .metrics{
156
+ display:grid;
157
+ grid-template-columns:repeat(5,1fr);
158
+ border:1px solid var(--line-bright);
159
+ border-radius:5px;
160
+ overflow:hidden;
161
+ margin-bottom:68px;
162
+ }
163
+ .metric{
164
+ background:var(--panel);
165
+ padding:18px 12px;
166
+ text-align:center;
167
+ border-right:1px solid var(--line-bright);
168
+ }
169
+ .metric:last-child{border-right:none;}
170
+ .metric b{
171
+ display:block;
172
+ font-family:'IBM Plex Mono',monospace;
173
+ font-size:21px;
174
+ font-weight:600;
175
+ color:var(--silk);
176
+ margin-bottom:5px;
177
+ }
178
+ .metric span{font-size:11px;color:var(--muted);letter-spacing:0.01em;}
179
+ section{margin-bottom:64px;}
180
+ h2{
181
+ font-family:'IBM Plex Mono',monospace;
182
+ font-size:12px;
183
+ text-transform:uppercase;
184
+ letter-spacing:0.09em;
185
+ color:var(--muted);
186
+ margin:0 0 20px;
187
+ display:flex;
188
+ align-items:center;
189
+ gap:10px;
190
+ }
191
+ h2::after{content:"";flex:1;height:1px;background:var(--line-bright);}
192
+ .focus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
193
+ .card{
194
+ position:relative;
195
+ background:var(--panel);
196
+ border:1px solid var(--line-bright);
197
+ border-radius:5px;
198
+ padding:17px;
199
+ }
200
+ .card::before,.card::after,.card .cr-tl,.card .cr-br{
201
+ content:"";
202
+ position:absolute;
203
+ width:7px;height:7px;
204
+ opacity:0.55;
205
+ }
206
+ .card::before{
207
+ top:-1px;left:-1px;
208
+ border-top:1px solid var(--solder);
209
+ border-left:1px solid var(--solder);
210
+ }
211
+ .card::after{
212
+ bottom:-1px;right:-1px;
213
+ border-bottom:1px solid var(--solder);
214
+ border-right:1px solid var(--solder);
215
+ }
216
+ .focus-card b{font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--silk);display:block;margin-bottom:7px;}
217
+ .focus-card p{font-size:13px;color:var(--muted);margin:0;line-height:1.55;}
218
+ .search-row{margin-bottom:14px;}
219
+ .search-row input{
220
+ width:100%;
221
+ background:var(--panel);
222
+ border:1px solid var(--line-bright);
223
+ color:var(--text);
224
+ border-radius:4px;
225
+ padding:9px 13px;
226
+ font-size:13.5px;
227
+ font-family:'IBM Plex Sans',sans-serif;
228
+ outline:none;
229
+ }
230
+ .search-row input:focus{border-color:var(--solder);}
231
+ .project-card{
232
+ cursor:pointer;
233
+ transition:border-color 0.15s ease, transform 0.15s ease;
234
+ }
235
+ .project-card:hover{border-color:var(--solder);transform:translateY(-1px);}
236
+ .project-card h3{font-family:'IBM Plex Mono',monospace;font-size:16px;color:var(--silk);margin:0 0 14px;font-weight:600;}
237
+ .project-meta{
238
+ display:grid;
239
+ grid-template-columns:repeat(4,1fr);
240
+ gap:12px;
241
+ margin-bottom:14px;
242
+ padding-bottom:14px;
243
+ border-bottom:1px dashed var(--line-bright);
244
+ }
245
+ .project-meta div{font-size:12px;}
246
+ .project-meta b{display:block;color:var(--solder);font-family:'IBM Plex Mono',monospace;font-size:12.5px;margin-bottom:3px;}
247
+ .project-meta span{color:var(--muted);}
248
+ .project-card p.hint{font-size:12px;color:var(--muted);margin:0;font-family:'IBM Plex Mono',monospace;}
249
+ .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
250
+ .team-card{text-align:center;}
251
+ .avatar{
252
+ width:34px;height:34px;
253
+ margin:0 auto 10px;
254
+ border:1px solid var(--solder);
255
+ border-radius:50%;
256
+ position:relative;
257
+ }
258
+ .avatar::before{
259
+ content:"";
260
+ position:absolute;
261
+ inset:6px;
262
+ border-radius:50%;
263
+ background:var(--solder);
264
+ opacity:0.35;
265
+ }
266
+ .team-card b{display:block;font-family:'IBM Plex Mono',monospace;font-size:13.5px;color:var(--silk);margin-bottom:4px;}
267
+ .team-card span{font-size:11.5px;color:var(--muted);}
268
+ .features{
269
+ display:grid;
270
+ grid-template-columns:repeat(2,1fr);
271
+ gap:9px 22px;
272
+ font-size:13px;
273
+ margin:0;
274
+ padding:0;
275
+ }
276
+ .features li{list-style:none;padding-left:16px;position:relative;color:var(--muted);}
277
+ .features li::before{content:"—";position:absolute;left:0;color:var(--solder);}
278
+ footer{
279
+ display:flex;
280
+ align-items:center;
281
+ justify-content:space-between;
282
+ padding-top:22px;
283
+ border-top:1px solid var(--line-bright);
284
+ font-size:12px;
285
+ color:var(--muted);
286
+ font-family:'IBM Plex Mono',monospace;
287
+ }
288
+ footer .flinks a{text-decoration:none;color:var(--text);margin-left:14px;}
289
+ footer .flinks a:hover{color:var(--solder);}
290
+ @media (max-width:720px){
291
+ .metrics{grid-template-columns:repeat(2,1fr);}
292
+ .metric{border-bottom:1px solid var(--line-bright);}
293
+ .focus-grid,.team-grid{grid-template-columns:1fr;}
294
+ .project-meta{grid-template-columns:repeat(2,1fr);}
295
+ h1{font-size:27px;}
296
+ }
297
+ @media print{
298
+ .circuit-bg,.pulse-layer,.cursor-glow,#theme-toggle,.theme-row,.search-row{display:none;}
299
+ body{background:#fff;color:#000;}
300
+ }
301
+ </style>
302
+ </head>
303
+ <body>
304
+
305
+ <svg class="circuit-bg" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
306
+ <path d="M40,120 H320 V40 H660"/>
307
+ <path d="M40,340 H220 V520 H520 V680"/>
308
+ <path d="M960,50 V220 H1260 V50"/>
309
+ <path d="M1120,420 H1400 V300"/>
310
+ <path d="M60,760 H400 V860"/>
311
+ <path d="M720,800 H1040 V620 H1340"/>
312
+ <path d="M1380,700 V860 H1080"/>
313
+ <path d="M840,90 V260 H620 V90"/>
314
+ <circle cx="320" cy="120" r="3.2"/>
315
+ <circle cx="660" cy="40" r="3.2"/>
316
+ <circle cx="520" cy="520" r="3.2"/>
317
+ <circle cx="1260" cy="220" r="3.2"/>
318
+ <circle cx="1120" cy="420" r="3.2"/>
319
+ <circle cx="400" cy="760" r="3.2"/>
320
+ <circle cx="1040" cy="800" r="3.2"/>
321
+ <circle cx="840" cy="260" r="3.2"/>
322
+ </svg>
323
+
324
+ <div class="pulse-layer" aria-hidden="true">
325
+ <div class="pulse" style="offset-path:path('M40,120 H320 V40 H660');animation-duration:9s;animation-delay:-1s;"></div>
326
+ <div class="pulse" style="offset-path:path('M40,340 H220 V520 H520 V680');animation-duration:11s;animation-delay:-4s;"></div>
327
+ <div class="pulse" style="offset-path:path('M960,50 V220 H1260 V50');animation-duration:8s;animation-delay:-2.5s;"></div>
328
+ <div class="pulse" style="offset-path:path('M720,800 H1040 V620 H1340');animation-duration:12s;animation-delay:-6s;"></div>
329
+ <div class="pulse" style="offset-path:path('M840,90 V260 H620 V90');animation-duration:10s;animation-delay:-3s;"></div>
330
+ </div>
331
+
332
+ <div class="cursor-glow"></div>
333
+
334
+ <div class="wrap">
335
+ <header>
336
+ <div class="brand">
337
+ <svg class="chip" viewBox="0 0 24 24">
338
+ <rect x="6" y="6" width="12" height="12" rx="1.5"/>
339
+ <line x1="9" y1="2" x2="9" y2="6"/><line x1="15" y1="2" x2="15" y2="6"/>
340
+ <line x1="9" y1="18" x2="9" y2="22"/><line x1="15" y1="18" x2="15" y2="22"/>
341
+ <line x1="2" y1="9" x2="6" y2="9"/><line x1="2" y1="15" x2="6" y2="15"/>
342
+ <line x1="18" y1="9" x2="22" y2="9"/><line x1="18" y1="15" x2="22" y2="15"/>
343
+ <circle cx="12" cy="12" r="1.6"/>
344
+ </svg>
345
+ <span class="brand-name">CUBIC</span>
346
+ </div>
347
+ <nav>
348
+ <a href="https://github.com/Cubic-Labs" target="_blank">GitHub</a>
349
+ <a href="https://huggingface.co/Cubic" target="_blank">HuggingFace</a>
350
+ <div class="theme-row">
351
+ <span class="switch-label">0</span>
352
+ <button id="theme-toggle" aria-label="Toggle theme"></button>
353
+ <span class="switch-label">1</span>
354
+ </div>
355
+ </nav>
356
+ </header>
357
+
358
+ <div class="eyebrow">AGI · AI · Cybersecurity Research</div>
359
+ <h1>Accessible AI systems that run on consumer hardware.</h1>
360
+ <p class="tagline">CPU-first training, open-source research, and practical deployment — no data center required.</p>
361
+
362
+ <div class="metrics">
363
+ <div class="metric"><b><span class="pin1" title="pin 1"></span>27</b><span>Models</span></div>
364
+ <div class="metric"><b>1</b><span>Research paper</span></div>
365
+ <div class="metric"><b>3</b><span>Team members</span></div>
366
+ <div class="metric"><b>$0.004</b><span>Min training cost</span></div>
367
+ <div class="metric"><b>100%</b><span>Open source</span></div>
368
+ </div>
369
+
370
+ <section>
371
+ <h2>Research Focus</h2>
372
+ <div class="focus-grid">
373
+ <div class="card focus-card"><b>AGI Research</b><p>Advancing towards artificial general intelligence.</p></div>
374
+ <div class="card focus-card"><b>AI Development</b><p>CPU-first architectures and open-source models.</p></div>
375
+ <div class="card focus-card"><b>Cybersecurity</b><p>AI-powered security tools and threat detection.</p></div>
376
+ </div>
377
+ </section>
378
+
379
+ <section>
380
+ <h2>Projects</h2>
381
+ <div class="search-row">
382
+ <input id="search" type="text" placeholder="Search projects — press / to focus">
383
+ </div>
384
+ <div id="project-list">
385
+ <div class="card project-card" data-name="axl cpu-first code generation">
386
+ <h3>AXL — CPU-First Code Generation</h3>
387
+ <div class="project-meta">
388
+ <div><b>27</b><span>models, 566K–318M params</span></div>
389
+ <div><b>$0.004</b><span>training cost / model</span></div>
390
+ <div><b>Multi-scale</b><span>byte-level transformer</span></div>
391
+ <div><b>Apache 2.0</b><span>license</span></div>
392
+ </div>
393
+ <p class="hint">&gt; click for the full AXL detail page</p>
394
+ </div>
395
+ </div>
396
+ </section>
397
+
398
+ <section>
399
+ <h2>Team</h2>
400
+ <div class="team-grid">
401
+ <div class="card team-card"><div class="avatar"></div><b>Kennedy</b><span>CEO & Head of AI Research</span></div>
402
+ <div class="card team-card"><div class="avatar"></div><b>Jasser</b><span>CTO & Head of Cybersecurity</span></div>
403
+ <div class="card team-card"><div class="avatar"></div><b>Taem</b><span>Head of Marketing/Sales/Technical Assist</span></div>
404
+ </div>
405
+ </section>
406
+
407
+ <section>
408
+ <h2>Key Features</h2>
409
+ <ul class="features">
410
+ <li>Dark/Light theme toggle</li>
411
+ <li>Category filtering on projects</li>
412
+ <li>Search across projects</li>
413
+ <li>Interactive circuit-trace background</li>
414
+ <li>Keyboard shortcuts (/ to search, Esc to close)</li>
415
+ <li>Print-friendly CSS</li>
416
+ <li>Responsive design</li>
417
+ </ul>
418
+ </section>
419
+
420
+ <footer>
421
+ <span>CPU-first AI for everyone.</span>
422
+ <span class="flinks">
423
+ <a href="https://github.com/Cubic-Labs" target="_blank">GitHub</a>
424
+ <a href="https://huggingface.co/Cubic" target="_blank">HuggingFace</a>
425
+ </span>
426
+ </footer>
427
+ </div>
428
+
429
+ <script>
430
+ const root = document.documentElement;
431
+ const toggle = document.getElementById('theme-toggle');
432
+ toggle.addEventListener('click', () => {
433
+ const isLight = root.getAttribute('data-theme') === 'light';
434
+ root.setAttribute('data-theme', isLight ? 'dark' : 'light');
435
+ });
436
+
437
+ const search = document.getElementById('search');
438
+ const cards = document.querySelectorAll('.project-card');
439
+ search.addEventListener('input', () => {
440
+ const q = search.value.toLowerCase();
441
+ cards.forEach(c => { c.style.display = c.dataset.name.includes(q) ? '' : 'none'; });
442
+ });
443
+
444
+ document.addEventListener('keydown', e => {
445
+ if (e.key === '/' && document.activeElement !== search) {
446
+ e.preventDefault();
447
+ search.focus();
448
+ }
449
+ if (e.key === 'Escape') {
450
+ search.value = '';
451
+ search.dispatchEvent(new Event('input'));
452
+ search.blur();
453
+ }
454
+ });
455
+
456
+ cards.forEach(c => {
457
+ c.addEventListener('click', () => window.open('https://huggingface.co/Cubic', '_blank'));
458
+ });
459
+
460
+ const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
461
+ if (!reduceMotion) {
462
+ let mx = window.innerWidth / 2, my = window.innerHeight / 3, ticking = false;
463
+ window.addEventListener('mousemove', e => {
464
+ mx = e.clientX; my = e.clientY;
465
+ if (!ticking) {
466
+ ticking = true;
467
+ requestAnimationFrame(() => {
468
+ root.style.setProperty('--mx', mx + 'px');
469
+ root.style.setProperty('--my', my + 'px');
470
+ ticking = false;
471
+ });
472
+ }
473
+ }, { passive: true });
474
+ }
475
+
476
+ document.addEventListener('visibilitychange', () => {
477
+ document.body.classList.toggle('paused', document.hidden);
478
+ });
479
+ </script>
480
+ </body>
481
+ </html>