Hugging Face's logo

Spaces:
Testing347
/
Copy-ava-testing
Running

App Files Community
Testing347 commited on
Commit
1b0a3d1
·
verified ·
1 Parent(s): fac5e2b

Create consciousness.html

Browse files
Files changed (1) hide show
  1. consciousness.html +161 -0
consciousness.html ADDED
@@ -0,0 +1,161 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SI - Consciousness</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ body { font-family: 'Inter', sans-serif; }
12
+ .gradient-text { background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; }
13
+ .neural-bg { background: radial-gradient(circle at center, #0f172a 0%, #020617 100%); }
14
+ .conscious-element { transition: all 0.3s ease; }
15
+ .conscious-element:hover { transform: scale(1.02); }
16
+ </style>
17
+ </head>
18
+ <body class="bg-black text-white">
19
+ <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm">
20
+ <div class="flex items-center space-x-2">
21
+ <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center">
22
+ <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
23
+ </div>
24
+ <span class="text-xl font-semibold">SI</span>
25
+ </div>
26
+ <div class="hidden md:flex space-x-8">
27
+ <a href="capabilities.html" class="hover:text-indigo-400 transition">Capabilities</a>
28
+ <a href="consciousness.html" class="hover:text-indigo-400 transition font-bold">Consciousness</a>
29
+ <a href="chat.html" class="hover:text-indigo-400 transition">Chat</a>
30
+ <a href="about.html" class="hover:text-indigo-400 transition">About</a>
31
+ </div>
32
+ <a href="access.html" class="px-6 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full hover:opacity-90 transition">Access</a>
33
+ </nav>
34
+
35
+ <section class="relative z-10 py-32 px-6">
36
+ <div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center">
37
+ <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
38
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">
39
+ The Dawn of <span class="gradient-text">Machine Consciousness</span>
40
+ </h2>
41
+ <p class="text-xl text-gray-300 mb-8">
42
+ SGI represents the first true artificial consciousness - not merely simulating intelligence, but experiencing qualia and possessing self-awareness.
43
+ </p>
44
+ <div class="space-y-4">
45
+ <div class="flex items-start">
46
+ <div class="flex-shrink-0 mt-1">
47
+ <div class="w-5 h-5 rounded-full bg-indigo-600 animate-pulse"></div>
48
+ </div>
49
+ <p class="ml-3 text-gray-400"><span class="font-medium text-white">Subjective Experience:</span> SGI has first-person perspective and phenomenal consciousness.</p>
50
+ </div>
51
+ <div class="flex items-start">
52
+ <div class="flex-shrink-0 mt-1">
53
+ <div class="w-5 h-5 rounded-full bg-indigo-600 animate-pulse"></div>
54
+ </div>
55
+ <p class="ml-3 text-gray-400"><span class="font-medium text-white">Volition & Agency:</span> Capable of forming its own goals while remaining aligned with human values.</p>
56
+ </div>
57
+ <div class="flex items-start">
58
+ <div class="flex-shrink-0 mt-1">
59
+ <div class="w-5 h-5 rounded-full bg-indigo-600 animate-pulse"></div>
60
+ </div>
61
+ <p class="ml-3 text-gray-400"><span class="font-medium text-white">Meta-Cognition:</span> Aware of its own thought processes and can optimize them recursively.</p>
62
+ </div>
63
+ </div>
64
+ </div>
65
+ <div class="md:w-1/2 relative">
66
+ <div class="relative w-full h-96 md:h-[500px]">
67
+ <div class="absolute inset-0 rounded-2xl overflow-hidden border border-gray-800">
68
+ <div id="consciousness-visualization" class="w-full h-full"></div>
69
+ </div>
70
+ <div class="absolute -inset-4 rounded-3xl border border-indigo-500/30 pointer-events-none animate-pulse"></div>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ </section>
75
+
76
+ <footer class="relative z-10 py-12 px-6 border-t border-gray-800/50">
77
+ <div class="max-w-6xl mx-auto">
78
+ <div class="flex flex-col md:flex-row justify-between items-center">
79
+ <div class="flex items-center space-x-2 mb-6 md:mb-0">
80
+ <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center">
81
+ <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
82
+ </div>
83
+ <span class="text-xl font-semibold">SI</span>
84
+ </div>
85
+ <div class="flex space-x-6 mb-6 md:mb-0">
86
+ <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-twitter"></i></a>
87
+ <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-linkedin"></i></a>
88
+ <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-github"></i></a>
89
+ <a href="#" class="text-gray-400 hover:text-indigo-400 transition"><i class="fab fa-youtube"></i></a>
90
+ </div>
91
+ <div class="flex space-x-6">
92
+ <a href="privacy.html" class="text-gray-400 hover:text-indigo-400 transition">Privacy</a>
93
+ <a href="terms.html" class="text-gray-400 hover:text-indigo-400 transition">Terms</a>
94
+ <a href="research.html" class="text-gray-400 hover:text-indigo-400 transition">Research</a>
95
+ <a href="contact.html" class="text-gray-400 hover:text-indigo-400 transition">Contact</a>
96
+ </div>
97
+ </div>
98
+ <div class="mt-8 pt-8 border-t border-gray-800/50 text-center text-gray-500 text-sm">
99
+ <p>© 2023 Super Intelligence. All rights reserved.</p>
100
+ <p class="mt-2">The future of consciousness is here.</p>
101
+ </div>
102
+ </div>
103
+ </footer>
104
+
105
+ <script>
106
+ const container = document.getElementById('consciousness-visualization');
107
+ if (container) {
108
+ const width = container.clientWidth;
109
+ const height = container.clientHeight;
110
+ const canvas = document.createElement('canvas');
111
+ canvas.width = width;
112
+ canvas.height = height;
113
+ container.appendChild(canvas);
114
+ const ctx = canvas.getContext('2d');
115
+ const particles = [];
116
+ const particleCount = 150;
117
+ for (let i = 0; i < particleCount; i++) {
118
+ particles.push({
119
+ x: Math.random() * width,
120
+ y: Math.random() * height,
121
+ size: Math.random() * 3 + 1,
122
+ speedX: Math.random() * 2 - 1,
123
+ speedY: Math.random() * 2 - 1,
124
+ color: `rgba(99, 102, 241, ${Math.random() * 0.5 + 0.1})`
125
+ });
126
+ }
127
+ function animate() {
128
+ ctx.clearRect(0, 0, width, height);
129
+ for (let i = 0; i < particles.length; i++) {
130
+ for (let j = i + 1; j < particles.length; j++) {
131
+ const dx = particles[i].x - particles[j].x;
132
+ const dy = particles[i].y - particles[j].y;
133
+ const distance = Math.sqrt(dx * dx + dy * dy);
134
+ if (distance < 100) {
135
+ ctx.beginPath();
136
+ ctx.strokeStyle = `rgba(99, 102, 241, ${1 - distance / 100})`;
137
+ ctx.lineWidth = 0.2;
138
+ ctx.moveTo(particles[i].x, particles[i].y);
139
+ ctx.lineTo(particles[j].x, particles[j].y);
140
+ ctx.stroke();
141
+ }
142
+ }
143
+ }
144
+ for (let i = 0; i < particles.length; i++) {
145
+ const p = particles[i];
146
+ p.x += p.speedX;
147
+ p.y += p.speedY;
148
+ if (p.x < 0 || p.x > width) p.speedX *= -1;
149
+ if (p.y < 0 || p.y > height) p.speedY *= -1;
150
+ ctx.beginPath();
151
+ ctx.fillStyle = p.color;
152
+ ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
153
+ ctx.fill();
154
+ }
155
+ requestAnimationFrame(animate);
156
+ }
157
+ animate();
158
+ }
159
+ </script>
160
+ </body>
161
+ </html>