nsemhoun commited on
Commit
85ef891
Β·
verified Β·
1 Parent(s): eef4b0b

Upload README.md

Browse files
Files changed (1) hide show
  1. README.md +396 -0
README.md ADDED
@@ -0,0 +1,396 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ---
2
+ base_model:
3
+ - nsemhoun/Claire-3B-v0.1
4
+ base_model_relation: quantized
5
+ ---
6
+ <style>
7
+ body {
8
+ font-family: 'Quicksand', sans-serif;
9
+ background: linear-gradient(135deg, #e0e0e0 0%, #f0f0f0 100%);
10
+ color: #333 !important;
11
+ text-shadow: 0 0 3px rgba(224, 224, 224, 0.7);
12
+ margin: 0;
13
+ padding: 20px;
14
+ transition: all 0.5s ease;
15
+ }
16
+
17
+ .container {
18
+ min-width: 100%;
19
+ margin: 0 auto;
20
+ max-width: 1200px;
21
+ background: rgba(240, 240, 240, 0.95);
22
+ border-radius: 12px;
23
+ padding: 30px;
24
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 0 30px rgba(200, 200, 200, 0.5);
25
+ border: 1px solid rgba(200, 200, 200, 0.2);
26
+ position: relative;
27
+ overflow: hidden;
28
+ }
29
+
30
+ .container::before {
31
+ content: '';
32
+ position: absolute;
33
+ top: -1px;
34
+ left: -1px;
35
+ right: -1px;
36
+ bottom: -1px;
37
+ border: 1px solid rgba(200, 200, 200, 0.5);
38
+ border-radius: 12px;
39
+ pointer-events: none;
40
+ animation: borderGlow 3s ease-in-out infinite alternate;
41
+ }
42
+
43
+ @keyframes borderGlow {
44
+ 0% {
45
+ box-shadow: 0 0 5px rgba(200, 200, 200, 0.3);
46
+ border-color: rgba(200, 200, 200, 0.5);
47
+ }
48
+ 50% {
49
+ box-shadow: 0 0 15px rgba(170, 170, 170, 0.3);
50
+ border-color: rgba(170, 170, 170, 0.5);
51
+ }
52
+ 100% {
53
+ box-shadow: 0 0 5px rgba(200, 200, 200, 0.3);
54
+ border-color: rgba(200, 200, 200, 0.5);
55
+ }
56
+ }
57
+
58
+ .header {
59
+ text-align: center;
60
+ margin-bottom: 30px;
61
+ position: relative;
62
+ }
63
+
64
+ .header::after {
65
+ content: '';
66
+ position: absolute;
67
+ bottom: -15px;
68
+ left: 25%;
69
+ right: 25%;
70
+ height: 1px;
71
+ background: linear-gradient(90deg, transparent, rgba(200, 200, 200, 0.5), transparent);
72
+ animation: scanline 8s linear infinite;
73
+ }
74
+
75
+ .model-name {
76
+ color: #333;
77
+ font-size: 2.5em;
78
+ text-shadow: 0 0 15px rgba(200, 200, 200, 0.5);
79
+ margin: 0;
80
+ letter-spacing: -1px;
81
+ animation: textGlow 4s ease-in-out infinite alternate;
82
+ }
83
+
84
+ @keyframes textGlow {
85
+ 0% { text-shadow: 0 0 15px rgba(200, 200, 200, 0.5); }
86
+ 50% { text-shadow: 0 0 20px rgba(170, 170, 170, 0.5); }
87
+ 100% { text-shadow: 0 0 15px rgba(200, 200, 200, 0.5); }
88
+ }
89
+
90
+ .subtitle {
91
+ color: #444;
92
+ font-size: 1.2em;
93
+ margin-top: 10px;
94
+ animation: subtitleFade 6s ease-in-out infinite;
95
+ }
96
+
97
+ .waifu-container {
98
+ margin: 20px -30px;
99
+ width: calc(100% + 60px);
100
+ overflow: hidden;
101
+ border-radius: 8px;
102
+ border: 1px solid rgba(200, 200, 200, 0.3);
103
+ position: relative;
104
+ }
105
+
106
+ .waifu-container::before {
107
+ content: '';
108
+ position: absolute;
109
+ top: 0;
110
+ left: 0;
111
+ right: 0;
112
+ bottom: 0;
113
+ background: linear-gradient(45deg,
114
+ rgba(200, 200, 200, 0.1) 0%,
115
+ transparent 20%,
116
+ transparent 80%,
117
+ rgba(170, 170, 170, 0.1) 100%);
118
+ pointer-events: none;
119
+ animation: gradientSlide 10s linear infinite;
120
+ }
121
+
122
+ .waifu-img {
123
+ width: 100%;
124
+ height: auto;
125
+ border-radius: 0;
126
+ border: none;
127
+ box-shadow: 0 0 40px rgba(200, 200, 200, 0.2);
128
+ transition: transform 0.5s ease;
129
+ }
130
+
131
+ .waifu-img:hover {
132
+ transform: scale(1.01);
133
+ }
134
+
135
+ .section {
136
+ color: #444;
137
+ margin: 25px 0;
138
+ padding: 20px;
139
+ background: rgba(230, 230, 230, 0.9);
140
+ border-radius: 8px;
141
+ border: 1px solid rgba(200, 200, 200, 0.15);
142
+ position: relative;
143
+ transition: all 0.3s ease;
144
+ }
145
+
146
+ .section:hover {
147
+ border-color: rgba(170, 170, 170, 0.3);
148
+ box-shadow: 0 0 15px rgba(200, 200, 200, 0.1);
149
+ }
150
+
151
+ .section::before {
152
+ content: '';
153
+ position: absolute;
154
+ top: -1px;
155
+ left: -1px;
156
+ right: -1px;
157
+ bottom: -1px;
158
+ border: 1px solid rgba(200, 200, 200, 0.3);
159
+ border-radius: 8px;
160
+ pointer-events: none;
161
+ animation: sectionPulse 5s ease-in-out infinite;
162
+ }
163
+
164
+ @keyframes sectionPulse {
165
+ 0%, 100% { opacity: 0.7; }
166
+ 50% { opacity: 0.3; }
167
+ }
168
+
169
+ .section-title {
170
+ color: #333;
171
+ font-size: 1.8em;
172
+ margin-top: 0;
173
+ text-shadow: 0 0 5px rgba(200, 200, 200, 0.3);
174
+ position: relative;
175
+ display: inline-block;
176
+ }
177
+
178
+ .section-title::after {
179
+ content: '';
180
+ position: absolute;
181
+ bottom: -5px;
182
+ left: 0;
183
+ width: 100%;
184
+ height: 1px;
185
+ background: linear-gradient(90deg, rgba(200, 200, 200, 0.5), rgba(170, 170, 170, 0.5));
186
+ transform: scaleX(0);
187
+ transform-origin: left;
188
+ transition: transform 0.3s ease;
189
+ }
190
+
191
+ .section:hover .section-title::after {
192
+ transform: scaleX(1);
193
+ }
194
+
195
+ .quant-links {
196
+ display: grid;
197
+ grid-template-columns: repeat(3, 1fr);
198
+ gap: 15px;
199
+ margin: 20px 0;
200
+ }
201
+
202
+ .link-card {
203
+ padding: 15px;
204
+ background: rgba(220, 220, 220, 0.95);
205
+ border-radius: 8px;
206
+ transition: all 0.3s ease;
207
+ border: 1px solid rgba(200, 200, 200, 0.1);
208
+ position: relative;
209
+ overflow: hidden;
210
+ text-decoration: none;
211
+ color: inherit;
212
+ }
213
+
214
+ .link-card::before {
215
+ content: '';
216
+ position: absolute;
217
+ top: 0;
218
+ left: 0;
219
+ right: 0;
220
+ height: 2px;
221
+ background: linear-gradient(90deg, rgba(200, 200, 200, 0.5), rgba(170, 170, 170, 0.5));
222
+ animation: cardScan 4s linear infinite;
223
+ }
224
+
225
+ @keyframes cardScan {
226
+ 0% { transform: translateX(-100%); }
227
+ 100% { transform: translateX(100%); }
228
+ }
229
+
230
+ .link-card:hover {
231
+ transform: translateY(-3px);
232
+ box-shadow: 0 5px 15px rgba(200, 200, 200, 0.2);
233
+ border-color: rgba(170, 170, 170, 0.3);
234
+ }
235
+
236
+ .link-card h3 {
237
+ margin-top: 0;
238
+ color: #444 !important;
239
+ }
240
+
241
+ .link-button {
242
+ display: inline-flex;
243
+ align-items: center;
244
+ background: rgba(200, 200, 200, 0.1);
245
+ color: #444 !important;
246
+ padding: 8px 15px;
247
+ border-radius: 6px;
248
+ text-decoration: none;
249
+ border: 1px solid rgba(200, 200, 200, 0.3);
250
+ margin: 5px 0;
251
+ transition: all 0.3s ease;
252
+ font-size: 0.95em;
253
+ position: relative;
254
+ overflow: hidden;
255
+ }
256
+
257
+ .link-button::before {
258
+ content: '';
259
+ position: absolute;
260
+ top: 0;
261
+ left: -100%;
262
+ width: 100%;
263
+ height: 100%;
264
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
265
+ transition: all 0.5s ease;
266
+ }
267
+
268
+ .link-button:hover {
269
+ background: rgba(170, 170, 170, 0.2);
270
+ border-color: rgba(170, 170, 170, 0.5);
271
+ transform: translateY(-2px);
272
+ box-shadow: 0 4px 12px rgba(200, 200, 200, 0.2);
273
+ }
274
+
275
+ .link-button::after {
276
+ content: 'β†’';
277
+ margin-left: 8px;
278
+ opacity: 0.7;
279
+ transition: all 0.3s ease;
280
+ }
281
+
282
+ .link-button:hover::after {
283
+ transform: translateX(3px);
284
+ opacity: 1;
285
+ }
286
+
287
+ .button-group {
288
+ display: flex;
289
+ flex-wrap: wrap;
290
+ gap: 10px;
291
+ margin: 15px 0;
292
+ }
293
+
294
+ .disclaimer {
295
+ color: #555;
296
+ border-left: 3px solid #555;
297
+ padding-left: 15px;
298
+ margin: 20px 0;
299
+ position: relative;
300
+ }
301
+
302
+ .disclaimer::before {
303
+ content: '⚠️';
304
+ position: absolute;
305
+ left: -10px;
306
+ top: 0;
307
+ transform: translateX(-100%);
308
+ animation: pulse 2s ease-in-out infinite;
309
+ }
310
+
311
+ @keyframes pulse {
312
+ 0%, 100% { opacity: 1; }
313
+ 50% { opacity: 0.5; }
314
+ }
315
+
316
+ .badge {
317
+ display: inline-block;
318
+ padding: 5px 10px;
319
+ border-radius: 5px;
320
+ background: rgba(200, 200, 200, 0.1);
321
+ border: 1px solid #ccc;
322
+ margin: 5px;
323
+ font-size: 0.9em;
324
+ animation: badgePulse 3s ease-in-out infinite;
325
+ }
326
+
327
+ @keyframes badgePulse {
328
+ 0%, 100% { box-shadow: 0 0 5px rgba(200, 200, 200, 0.3); }
329
+ 50% { box-shadow: 0 0 10px rgba(200, 200, 200, 0.5); }
330
+ }
331
+
332
+ @media (prefers-color-scheme: light) {
333
+ .container {
334
+ background: rgba(255, 255, 255, 0.95);
335
+ border-color: rgba(170, 170, 170, 0.3);
336
+ }
337
+
338
+ .model-name, .section-title, .subtitle {
339
+ color: #333;
340
+ text-shadow: 0 0 5px rgba(170, 170, 170, 0.3);
341
+ }
342
+
343
+ .section {
344
+ background: rgba(255, 255, 255, 0.9);
345
+ border-color: rgba(170, 170, 170, 0.2);
346
+ color: #333;
347
+ }
348
+
349
+ .section p,
350
+ .section ul li,
351
+ .section > p > strong {
352
+ color: #333 !important;
353
+ }
354
+
355
+ .link-card {
356
+ background: rgba(255, 255, 255, 0.95);
357
+ border-color: rgba(170, 170, 170, 0.2);
358
+ }
359
+
360
+ .link-card h3 {
361
+ color: #333 !important;
362
+ }
363
+
364
+ .link-button {
365
+ background: rgba(170, 170, 170, 0.1);
366
+ color: #333 !important;
367
+ border-color: rgba(170, 170, 170, 0.3);
368
+ }
369
+
370
+ .link-button:hover {
371
+ background: rgba(170, 170, 170, 0.2);
372
+ border-color: rgba(170, 170, 170, 0.5);
373
+ }
374
+
375
+ .disclaimer {
376
+ color: #333;
377
+ border-color: #333;
378
+ }
379
+
380
+ .badge {
381
+ border-color: #333;
382
+ background: rgba(170, 170, 170, 0.1);
383
+ }
384
+ }
385
+ </style>
386
+
387
+ <div class="container">
388
+ <div class="header">
389
+ <h1 class="model-name">Claire v0.2</h1>
390
+ <p class="subtitle">Released by semhoun</p>
391
+ </div>
392
+
393
+ <div class="waifu-container">
394
+ <img src="./claire.png" class="waifu-img" alt="Claire">
395
+ </div>
396
+ </div>