Hugging Face's logo

Spaces:
SupraLabs
/
Research-SupraLabs
Running

App Files Community
1
LH-Tech-AI commited on
Commit
45bcb13
·
verified ·
1 Parent(s): 3f8a8ce

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +200 -19
index.html CHANGED
@@ -1,19 +1,200 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>SupraLabs | Small Models, Big Impact</title>
7
+ <style>
8
+ :root {
9
+ --bg: #0f0f0f;
10
+ --surface: #1a1a1a;
11
+ --border: #333;
12
+ --text: #e0e0e0;
13
+ --accent: #536bfe; /* Supra Blue */
14
+ --muted: #888;
15
+ --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
16
+ }
17
+ * {
18
+ margin: 0;
19
+ padding: 0;
20
+ box-sizing: border-box;
21
+ }
22
+ body {
23
+ background-color: var(--bg);
24
+ color: var(--text);
25
+ font-family: 'Inter', -apple-system, sans-serif;
26
+ line-height: 1.6;
27
+ padding: 2rem;
28
+ }
29
+ code, pre, .mono {
30
+ font-family: var(--font-mono);
31
+ }
32
+ .container {
33
+ max-width: 900px;
34
+ margin: 0 auto;
35
+ }
36
+ /* --- Header --- */
37
+ header {
38
+ border-bottom: 2px solid var(--border);
39
+ padding-bottom: 2rem;
40
+ margin-bottom: 3rem;
41
+ display: flex;
42
+ justify-content: space-between;
43
+ align-items: flex-end;
44
+ }
45
+ .logo-area a {
46
+ text-decoration: none;
47
+ color: inherit;
48
+ }
49
+ .logo-area h1 {
50
+ font-size: 1.2rem;
51
+ text-transform: uppercase;
52
+ letter-spacing: 2px;
53
+ color: var(--accent);
54
+ line-height: 1;
55
+ display: flex;
56
+ align-items: center;
57
+ gap: 10px;
58
+ }
59
+ nav a {
60
+ color: var(--text);
61
+ text-decoration: none;
62
+ margin-left: 1.5rem;
63
+ font-size: 0.9rem;
64
+ border-bottom: 1px solid transparent;
65
+ }
66
+ nav a:hover {
67
+ border-bottom: 1px solid var(--accent);
68
+ }
69
+ /* --- Hero Section --- */
70
+ .hero {
71
+ margin-bottom: 4rem;
72
+ }
73
+ .hero h2 {
74
+ font-size: 3rem;
75
+ line-height: 1.1;
76
+ margin-bottom: 1.5rem;
77
+ font-weight: 800;
78
+ }
79
+ .hero p {
80
+ font-size: 1.2rem;
81
+ color: var(--muted);
82
+ max-width: 600px;
83
+ }
84
+ /* --- Feed / Posts --- */
85
+ .section-label {
86
+ display: block;
87
+ font-family: var(--font-mono);
88
+ color: var(--accent);
89
+ font-size: 0.8rem;
90
+ margin-bottom: 1rem;
91
+ text-transform: uppercase;
92
+ }
93
+ .post-card {
94
+ background: var(--surface);
95
+ border: 1px solid var(--border);
96
+ padding: 2rem;
97
+ margin-bottom: 1.5rem;
98
+ transition: transform 0.2s ease, border-color 0.2s ease;
99
+ text-decoration: none;
100
+ display: block;
101
+ color: inherit;
102
+ }
103
+ .post-card:hover {
104
+ border-color: var(--accent);
105
+ transform: translateY(-2px);
106
+ }
107
+ .post-date {
108
+ font-family: var(--font-mono);
109
+ font-size: 0.8rem;
110
+ color: var(--muted);
111
+ margin-bottom: 0.5rem;
112
+ }
113
+ .post-card h3 {
114
+ font-size: 1.5rem;
115
+ margin-bottom: 1rem;
116
+ }
117
+ .tags {
118
+ display: flex;
119
+ gap: 0.5rem;
120
+ }
121
+ .tag {
122
+ font-family: var(--font-mono);
123
+ font-size: 0.7rem;
124
+ padding: 2px 8px;
125
+ border: 1px solid var(--border);
126
+ border-radius: 4px;
127
+ }
128
+ /* --- Hardware Stats --- */
129
+ .stats-grid {
130
+ display: grid;
131
+ grid-template-columns: 1fr 1fr;
132
+ gap: 1rem;
133
+ margin-top: 4rem;
134
+ border-top: 1px solid var(--border);
135
+ padding-top: 2rem;
136
+ }
137
+ .stat-box {
138
+ padding: 1rem;
139
+ border-left: 2px solid var(--accent);
140
+ }
141
+ .stat-box small {
142
+ display: block;
143
+ color: var(--muted);
144
+ font-family: var(--font-mono);
145
+ }
146
+ footer {
147
+ margin-top: 6rem;
148
+ padding-bottom: 2rem;
149
+ font-size: 0.8rem;
150
+ color: var(--muted);
151
+ text-align: center;
152
+ }
153
+ @media (max-width: 600px) {
154
+ .hero h2 { font-size: 2rem; }
155
+ header { flex-direction: column; align-items: flex-start; gap: 1rem; }
156
+ nav a { margin-left: 0; margin-right: 1rem; }
157
+ .stats-grid { grid-template-columns: 1fr; }
158
+ }
159
+ .logo-area {
160
+ display: flex;
161
+ align-items: center;
162
+ gap: 10px;
163
+ font-weight: bold;
164
+ font-size: 1.2rem;
165
+ }
166
+ </style>
167
+ </head>
168
+ <body>
169
+
170
+ <div class="container">
171
+ <header>
172
+ <div class="logo-area" style="font-size: 1.5em;">
173
+ <a href="./index.html"><h1><img src="./image.png" style="height: 2em"> SupraLabs_</h1></a>
174
+ </div>
175
+ <nav>
176
+ <a href="https://huggingface.co/spaces/SupraLabs/Blog">Blog</a>
177
+ <a href="https://huggingface.co/SupraLabs" target="blank">HuggingFace</a>
178
+ </nav>
179
+ </header>
180
+
181
+ <section class="hero">
182
+ <h2>SupraLabs<br>Research</h2>
183
+ <p>We're democratizing AI by training high-performance models on consumer hardware. 100% Open Source. 0% Slop.</p>
184
+ </section>
185
+
186
+ <span class="section-label" id="news">// Research papers</span>
187
+
188
+ <a href="datamixes.html" class="post-card">
189
+ <div class="post-date">2026-05-30</div>
190
+ <h3>5M SLM Data-Mix Benchmarks</h3>
191
+ <p>Researching the best dataset(s) for SLMs</p>
192
+ </a>
193
+
194
+ <footer>
195
+ <p class="mono">&copy; 2026 SupraLabs // Built for the community.</p>
196
+ </footer>
197
+ </div>
198
+
199
+ </body>
200
+ </html>