userisuser commited on
Commit
039e083
·
verified ·
1 Parent(s): f295c71

add static landing for MiniCPM-V 4.6 demos

Browse files
Files changed (2) hide show
  1. README.md +20 -5
  2. index.html +327 -17
README.md CHANGED
@@ -1,10 +1,25 @@
1
  ---
2
- title: MiniCPM-V-4 6-Demo
3
- emoji: 📊
4
- colorFrom: purple
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  ---
2
+ title: MiniCPM-V 4.6 Demo
3
+ emoji: 🪐
4
+ colorFrom: indigo
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
  ---
9
 
10
+ # MiniCPM-V 4.6 Demo Hub
11
+
12
+ A minimal landing page that points users to the live MiniCPM-V 4.6 demos.
13
+
14
+ - **China**: <http://82.157.64.212:9443/> — Instruct (A100 80G, single model)
15
+ - **Overseas**: <http://34.125.240.119:8000/> — Instruct + Thinking (GCP L4 23G, dual model)
16
+
17
+ ## Deploy on Hugging Face Spaces
18
+
19
+ 1. Create a new Space, choose **Static HTML** as the SDK.
20
+ 2. Upload `index.html` and this `README.md`.
21
+ 3. The Space will serve `index.html` automatically.
22
+
23
+ ## Update the URLs
24
+
25
+ Open `index.html` and edit the two `<a class="card …" href="…">` tags. Each card also has a `<span class="url">` block that mirrors the URL for display.
index.html CHANGED
@@ -1,19 +1,329 @@
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="zh-CN">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
6
+ <title>MiniCPM-V 4.6 · Demo</title>
7
+ <meta name="color-scheme" content="dark light" />
8
+ <meta name="description" content="MiniCPM-V 4.6 multimodal demo — choose a region to launch the live experience." />
9
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet" />
12
+ <style>
13
+ :root {
14
+ --bg-0: #07080d;
15
+ --bg-1: #0c0e16;
16
+ --fg: #e7e9f0;
17
+ --fg-dim: #9ba2b6;
18
+ --fg-faint: #6b7180;
19
+ --accent-cn: #ff6a3d;
20
+ --accent-cn-soft: rgba(255, 106, 61, 0.16);
21
+ --accent-ov: #4d7cfe;
22
+ --accent-ov-soft: rgba(77, 124, 254, 0.16);
23
+ --card-bg: rgba(255, 255, 255, 0.025);
24
+ --card-bd: rgba(255, 255, 255, 0.07);
25
+ --card-bd-hover: rgba(255, 255, 255, 0.18);
26
+ --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
27
+ }
28
+
29
+ * { box-sizing: border-box; }
30
+
31
+ html, body {
32
+ margin: 0;
33
+ padding: 0;
34
+ min-height: 100%;
35
+ }
36
+
37
+ body {
38
+ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
39
+ color: var(--fg);
40
+ background: radial-gradient(1200px 800px at 15% 0%, #1a1f37 0%, transparent 60%),
41
+ radial-gradient(900px 700px at 85% 100%, #2a1830 0%, transparent 60%),
42
+ var(--bg-0);
43
+ min-height: 100vh;
44
+ display: flex;
45
+ flex-direction: column;
46
+ overflow-x: hidden;
47
+ -webkit-font-smoothing: antialiased;
48
+ -moz-osx-font-smoothing: grayscale;
49
+ }
50
+
51
+ /* ambient grid + glow */
52
+ body::before {
53
+ content: "";
54
+ position: fixed;
55
+ inset: 0;
56
+ background:
57
+ linear-gradient(transparent 95%, rgba(255, 255, 255, 0.04) 95%) 0 0 / 100% 32px,
58
+ linear-gradient(90deg, transparent 95%, rgba(255, 255, 255, 0.04) 95%) 0 0 / 32px 100%;
59
+ mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
60
+ -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
61
+ pointer-events: none;
62
+ z-index: 0;
63
+ }
64
+
65
+ main {
66
+ position: relative;
67
+ z-index: 1;
68
+ flex: 1;
69
+ width: 100%;
70
+ max-width: 1080px;
71
+ margin: 0 auto;
72
+ padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 48px);
73
+ display: flex;
74
+ flex-direction: column;
75
+ justify-content: center;
76
+ gap: clamp(40px, 6vw, 64px);
77
+ }
78
+
79
+ header.brand {
80
+ display: flex;
81
+ flex-direction: column;
82
+ gap: 18px;
83
+ }
84
+
85
+ .badge {
86
+ align-self: flex-start;
87
+ display: inline-flex;
88
+ align-items: center;
89
+ gap: 8px;
90
+ padding: 6px 14px;
91
+ border: 1px solid var(--card-bd);
92
+ border-radius: 999px;
93
+ background: var(--card-bg);
94
+ font-size: 12px;
95
+ color: var(--fg-dim);
96
+ letter-spacing: 0.08em;
97
+ text-transform: uppercase;
98
+ backdrop-filter: blur(12px);
99
+ -webkit-backdrop-filter: blur(12px);
100
+ }
101
+ .badge .dot {
102
+ width: 6px;
103
+ height: 6px;
104
+ border-radius: 50%;
105
+ background: #4ade80;
106
+ box-shadow: 0 0 10px #4ade80;
107
+ }
108
+
109
+ h1 {
110
+ margin: 0;
111
+ font-size: clamp(44px, 7vw, 72px);
112
+ font-weight: 700;
113
+ letter-spacing: -0.02em;
114
+ line-height: 1.05;
115
+ background: linear-gradient(135deg, #ffffff 0%, #aab2c8 100%);
116
+ -webkit-background-clip: text;
117
+ background-clip: text;
118
+ -webkit-text-fill-color: transparent;
119
+ }
120
+ h1 .v {
121
+ font-family: "JetBrains Mono", ui-monospace, monospace;
122
+ font-size: 0.55em;
123
+ font-weight: 500;
124
+ color: var(--fg-faint);
125
+ -webkit-text-fill-color: var(--fg-faint);
126
+ margin-left: 0.4em;
127
+ letter-spacing: 0;
128
+ }
129
+
130
+ .lead {
131
+ margin: 0;
132
+ font-size: clamp(15px, 1.6vw, 18px);
133
+ color: var(--fg-dim);
134
+ max-width: 60ch;
135
+ line-height: 1.6;
136
+ }
137
+
138
+ .grid {
139
+ display: grid;
140
+ grid-template-columns: repeat(2, minmax(0, 1fr));
141
+ gap: clamp(16px, 2.5vw, 24px);
142
+ }
143
+ @media (max-width: 720px) {
144
+ .grid { grid-template-columns: 1fr; }
145
+ }
146
+
147
+ .card {
148
+ position: relative;
149
+ display: flex;
150
+ flex-direction: column;
151
+ justify-content: space-between;
152
+ gap: 32px;
153
+ padding: clamp(24px, 3vw, 32px);
154
+ border: 1px solid var(--card-bd);
155
+ border-radius: 20px;
156
+ background: var(--card-bg);
157
+ backdrop-filter: blur(14px);
158
+ -webkit-backdrop-filter: blur(14px);
159
+ color: inherit;
160
+ text-decoration: none;
161
+ overflow: hidden;
162
+ box-shadow: var(--shadow);
163
+ transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
164
+ min-height: 220px;
165
+ }
166
+ .card::before {
167
+ content: "";
168
+ position: absolute;
169
+ inset: -2px;
170
+ border-radius: inherit;
171
+ background: var(--card-glow, transparent);
172
+ filter: blur(40px);
173
+ opacity: 0.55;
174
+ z-index: -1;
175
+ transition: opacity 0.25s ease;
176
+ }
177
+ .card:hover {
178
+ transform: translateY(-4px);
179
+ border-color: var(--card-bd-hover);
180
+ background: rgba(255, 255, 255, 0.04);
181
+ }
182
+ .card:hover::before { opacity: 0.85; }
183
+ .card:focus-visible {
184
+ outline: 2px solid var(--card-accent, #fff);
185
+ outline-offset: 4px;
186
+ }
187
+
188
+ .card.cn { --card-accent: var(--accent-cn); --card-glow: var(--accent-cn-soft); }
189
+ .card.ov { --card-accent: var(--accent-ov); --card-glow: var(--accent-ov-soft); }
190
+
191
+ .card-head {
192
+ display: flex;
193
+ align-items: center;
194
+ justify-content: space-between;
195
+ gap: 12px;
196
+ }
197
+ .region {
198
+ display: inline-flex;
199
+ align-items: center;
200
+ gap: 8px;
201
+ padding: 5px 12px;
202
+ border: 1px solid var(--card-accent);
203
+ color: var(--card-accent);
204
+ border-radius: 999px;
205
+ font-size: 11px;
206
+ font-weight: 600;
207
+ letter-spacing: 0.12em;
208
+ text-transform: uppercase;
209
+ background: color-mix(in srgb, var(--card-accent) 12%, transparent);
210
+ }
211
+ .ping {
212
+ width: 6px;
213
+ height: 6px;
214
+ border-radius: 50%;
215
+ background: var(--card-accent);
216
+ box-shadow: 0 0 10px var(--card-accent);
217
+ }
218
+ .arrow {
219
+ width: 38px;
220
+ height: 38px;
221
+ border-radius: 50%;
222
+ background: rgba(255, 255, 255, 0.06);
223
+ border: 1px solid var(--card-bd);
224
+ display: inline-flex;
225
+ align-items: center;
226
+ justify-content: center;
227
+ transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
228
+ }
229
+ .card:hover .arrow {
230
+ transform: translate(4px, -4px) rotate(0deg);
231
+ background: var(--card-accent);
232
+ border-color: var(--card-accent);
233
+ }
234
+ .card:hover .arrow svg { stroke: #0a0a0a; }
235
+ .arrow svg {
236
+ stroke: var(--fg);
237
+ transition: stroke 0.25s ease;
238
+ }
239
+
240
+ .card-body { display: flex; flex-direction: column; gap: 8px; }
241
+ .card-title {
242
+ font-size: clamp(22px, 2.4vw, 28px);
243
+ font-weight: 600;
244
+ letter-spacing: -0.01em;
245
+ line-height: 1.2;
246
+ }
247
+ .card-sub {
248
+ font-size: 14px;
249
+ color: var(--fg-dim);
250
+ line-height: 1.55;
251
+ }
252
+
253
+ .meta {
254
+ display: flex;
255
+ align-items: center;
256
+ gap: 12px;
257
+ font-family: "JetBrains Mono", ui-monospace, monospace;
258
+ font-size: 12px;
259
+ color: var(--fg-faint);
260
+ word-break: break-all;
261
+ }
262
+ .meta .url { color: var(--fg-dim); }
263
+
264
+ footer {
265
+ position: relative;
266
+ z-index: 1;
267
+ padding: 24px clamp(20px, 5vw, 48px) 28px;
268
+ text-align: center;
269
+ color: var(--fg-faint);
270
+ font-size: 12px;
271
+ letter-spacing: 0.04em;
272
+ }
273
+ footer a {
274
+ color: var(--fg-dim);
275
+ text-decoration: none;
276
+ border-bottom: 1px dashed var(--fg-faint);
277
+ }
278
+ footer a:hover { color: var(--fg); border-bottom-color: var(--fg); }
279
+
280
+ @media (prefers-reduced-motion: reduce) {
281
+ .card, .card .arrow, .card::before { transition: none; }
282
+ }
283
+ </style>
284
+ </head>
285
+ <body>
286
+ <main>
287
+ <header class="brand">
288
+ <span class="badge"><span class="dot"></span>Live · Demo</span>
289
+ <h1>MiniCPM-V<span class="v">4.6</span></h1>
290
+ <p class="lead">A multimodal demo of MiniCPM-V 4.6 — chat with images and videos, with both Instruct and Thinking modes. Pick the region closest to you.</p>
291
+ </header>
292
+
293
+ <section class="grid" aria-label="Demo entrances">
294
+ <a class="card cn" href="http://82.157.64.212:9443/" target="_blank" rel="noopener noreferrer">
295
+ <div class="card-head">
296
+ <span class="region"><span class="ping"></span>China · 中国</span>
297
+ <span class="arrow" aria-hidden="true">
298
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11L11 3"/><path d="M5 3h6v6"/></svg>
299
+ </span>
300
+ </div>
301
+ <div class="card-body">
302
+ <div class="card-title">Mainland · Instruct</div>
303
+ <div class="card-sub">Hosted on a domestic A100. Best for users in mainland China.</div>
304
+ </div>
305
+ <div class="meta"><span>↗</span><span class="url">82.157.64.212:9443</span></div>
306
+ </a>
307
+
308
+ <a class="card ov" href="http://34.125.240.119:8000/" target="_blank" rel="noopener noreferrer">
309
+ <div class="card-head">
310
+ <span class="region"><span class="ping"></span>Overseas · 海外</span>
311
+ <span class="arrow" aria-hidden="true">
312
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11L11 3"/><path d="M5 3h6v6"/></svg>
313
+ </span>
314
+ </div>
315
+ <div class="card-body">
316
+ <div class="card-title">Global · Instruct + Thinking</div>
317
+ <div class="card-sub">Hosted on a US GCP L4 GPU. Switch Thinking Mode in the UI to compare reasoning behaviour.</div>
318
+ </div>
319
+ <div class="meta"><span>↗</span><span class="url">34.125.240.119:8000</span></div>
320
+ </a>
321
+ </section>
322
+ </main>
323
+
324
+ <footer>
325
+ <span>MiniCPM-V 4.6 · Built with</span>
326
+ <a href="https://huggingface.co/spaces" target="_blank" rel="noopener noreferrer">Hugging Face Spaces</a>
327
+ </footer>
328
+ </body>
329
  </html>