Spaces:

openbmb
/

MiniCPM-V-4.6-Demo

Running

App Files Files Community

userisuser commited on 3 days ago

Commit

620aa89

verified ·

1 Parent(s): a763408

Simplify demo landing page

Browse files

Files changed (2) hide show

README.md +2 -9
index.html +57 -155

README.md CHANGED Viewed

@@ -7,19 +7,12 @@ sdk: static
 pinned: false
 ---
-# MiniCPM-V 4.6 — Demo Hub
-A minimal landing page that points users to the live MiniCPM-V 4.6 demos.
-- **China**: <http://82.157.64.212:9443/> — Instruct + Thinking (A100 80G, dual model)
-- **Overseas**: <http://34.125.240.119:8000/> — Instruct + Thinking (GCP L4 23G, dual model)
 ## Deploy on Hugging Face Spaces
 1. Create a new Space, choose **Static HTML** as the SDK.
 2. Upload `index.html` and this `README.md`.
 3. The Space will serve `index.html` automatically.
-## Update the URLs
-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.

 pinned: false
 ---
+# MiniCPM-V 4.6 Demo
+A minimal landing page for launching the live MiniCPM-V 4.6 demo.
 ## Deploy on Hugging Face Spaces
 1. Create a new Space, choose **Static HTML** as the SDK.
 2. Upload `index.html` and this `README.md`.
 3. The Space will serve `index.html` automatically.

index.html CHANGED Viewed

@@ -1,44 +1,35 @@
 <!doctype html>
-<html lang="zh-CN">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
 <title>MiniCPM-V 4.6 · Demo</title>
 <meta name="color-scheme" content="dark light" />
-<meta name="description" content="MiniCPM-V 4.6 multimodal demo — choose a region to launch the live experience." />
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet" />
 <style>
   :root {
     --bg-0: #07080d;
-    --bg-1: #0c0e16;
     --fg: #e7e9f0;
     --fg-dim: #9ba2b6;
     --fg-faint: #6b7180;
-    --accent-cn: #ff6a3d;
-    --accent-cn-soft: rgba(255, 106, 61, 0.16);
-    --accent-ov: #4d7cfe;
-    --accent-ov-soft: rgba(77, 124, 254, 0.16);
-    --card-bg: rgba(255, 255, 255, 0.025);
-    --card-bd: rgba(255, 255, 255, 0.07);
-    --card-bd-hover: rgba(255, 255, 255, 0.18);
     --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
   }
   * { box-sizing: border-box; }
-  html, body {
-    margin: 0;
-    padding: 0;
-    min-height: 100%;
-  }
   body {
-    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
     color: var(--fg);
     background: radial-gradient(1200px 800px at 15% 0%, #1a1f37 0%, transparent 60%),
-                radial-gradient(900px 700px at 85% 100%, #2a1830 0%, transparent 60%),
                 var(--bg-0);
     min-height: 100vh;
     display: flex;
@@ -48,7 +39,6 @@
     -moz-osx-font-smoothing: grayscale;
   }
-  /* ambient grid + glow */
   body::before {
     content: "";
     position: fixed;
@@ -67,20 +57,16 @@
     z-index: 1;
     flex: 1;
     width: 100%;
-    max-width: 1080px;
     margin: 0 auto;
-    padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 48px);
     display: flex;
     flex-direction: column;
     justify-content: center;
-    gap: clamp(40px, 6vw, 64px);
   }
-  header.brand {
-    display: flex;
-    flex-direction: column;
-    gap: 18px;
-  }
   .badge {
     align-self: flex-start;
@@ -131,28 +117,19 @@
     margin: 0;
     font-size: clamp(15px, 1.6vw, 18px);
     color: var(--fg-dim);
-    max-width: 60ch;
-    line-height: 1.6;
-  }
-  .grid {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: clamp(16px, 2.5vw, 24px);
-  }
-  @media (max-width: 720px) {
-    .grid { grid-template-columns: 1fr; }
   }
   .card {
     position: relative;
     display: flex;
-    flex-direction: column;
     justify-content: space-between;
-    gap: 32px;
-    padding: clamp(24px, 3vw, 32px);
     border: 1px solid var(--card-bd);
-    border-radius: 20px;
     background: var(--card-bg);
     backdrop-filter: blur(14px);
     -webkit-backdrop-filter: blur(14px);
@@ -161,65 +138,41 @@
     overflow: hidden;
     box-shadow: var(--shadow);
     transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
-    min-height: 220px;
   }
   .card::before {
     content: "";
     position: absolute;
     inset: -2px;
     border-radius: inherit;
-    background: var(--card-glow, transparent);
     filter: blur(40px);
-    opacity: 0.55;
     z-index: -1;
     transition: opacity 0.25s ease;
   }
   .card:hover {
     transform: translateY(-4px);
     border-color: var(--card-bd-hover);
-    background: rgba(255, 255, 255, 0.04);
-  }
-  .card:hover::before { opacity: 0.85; }
-  .card:focus-visible {
-    outline: 2px solid var(--card-accent, #fff);
-    outline-offset: 4px;
   }
-  .card.cn { --card-accent: var(--accent-cn); --card-glow: var(--accent-cn-soft); }
-  .card.ov { --card-accent: var(--accent-ov); --card-glow: var(--accent-ov-soft); }
-  .card-head {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-  }
-  .region {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 5px 12px;
-    border: 1px solid var(--card-accent);
-    color: var(--card-accent);
-    border-radius: 999px;
-    font-size: 11px;
-    font-weight: 600;
-    letter-spacing: 0.12em;
-    text-transform: uppercase;
-    background: color-mix(in srgb, var(--card-accent) 12%, transparent);
-  }
-  .ping {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: var(--card-accent);
-    box-shadow: 0 0 10px var(--card-accent);
   }
   .arrow {
-    width: 38px;
-    height: 38px;
     border-radius: 50%;
-    background: rgba(255, 255, 255, 0.06);
     border: 1px solid var(--card-bd);
     display: inline-flex;
     align-items: center;
@@ -227,39 +180,12 @@
     transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
   }
   .card:hover .arrow {
-    transform: translate(4px, -4px) rotate(0deg);
-    background: var(--card-accent);
-    border-color: var(--card-accent);
-  }
-  .card:hover .arrow svg { stroke: #0a0a0a; }
-  .arrow svg {
-    stroke: var(--fg);
-    transition: stroke 0.25s ease;
-  }
-  .card-body { display: flex; flex-direction: column; gap: 8px; }
-  .card-title {
-    font-size: clamp(22px, 2.4vw, 28px);
-    font-weight: 600;
-    letter-spacing: -0.01em;
-    line-height: 1.2;
-  }
-  .card-sub {
-    font-size: 14px;
-    color: var(--fg-dim);
-    line-height: 1.55;
   }
-  .meta {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    font-family: "JetBrains Mono", ui-monospace, monospace;
-    font-size: 12px;
-    color: var(--fg-faint);
-    word-break: break-all;
-  }
-  .meta .url { color: var(--fg-dim); }
   footer {
     position: relative;
@@ -270,13 +196,10 @@
     font-size: 12px;
     letter-spacing: 0.04em;
   }
-  footer a {
-    color: var(--fg-dim);
-    text-decoration: none;
-    border-bottom: 1px dashed var(--fg-faint);
-  }
-  footer a:hover { color: var(--fg); border-bottom-color: var(--fg); }
   @media (prefers-reduced-motion: reduce) {
     .card, .card .arrow, .card::before { transition: none; }
   }
@@ -285,43 +208,22 @@
 <body>
   <main>
     <header class="brand">
-      <span class="badge"><span class="dot"></span>Live · Demo</span>
       <h1>MiniCPM-V<span class="v">4.6</span></h1>
-      <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>
     </header>
-    <section class="grid" aria-label="Demo entrances">
-      <a class="card cn" href="http://82.157.64.212:9443/" target="_blank" rel="noopener noreferrer">
-        <div class="card-head">
-          <span class="region"><span class="ping"></span>China · 中国</span>
-          <span class="arrow" aria-hidden="true">
-            <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>
-          </span>
-        </div>
-        <div class="card-body">
-          <div class="card-title">Mainland · Instruct + Thinking</div>
-        </div>
-        <div class="meta"><span>↗</span><span class="url">82.157.64.212:9443</span></div>
-      </a>
-      <a class="card ov" href="http://34.125.240.119:8000/" target="_blank" rel="noopener noreferrer">
-        <div class="card-head">
-          <span class="region"><span class="ping"></span>Overseas · 海外</span>
-          <span class="arrow" aria-hidden="true">
-            <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>
-          </span>
-        </div>
-        <div class="card-body">
-          <div class="card-title">Global · Instruct + Thinking</div>
-        </div>
-        <div class="meta"><span>↗</span><span class="url">34.125.240.119:8000</span></div>
-      </a>
-    </section>
   </main>
-  <footer>
-    <span>MiniCPM-V 4.6 · Built with</span>
-    <a href="https://huggingface.co/spaces" target="_blank" rel="noopener noreferrer">Hugging Face Spaces</a>
-  </footer>
 </body>
 </html>

 <!doctype html>
+<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
 <title>MiniCPM-V 4.6 · Demo</title>
 <meta name="color-scheme" content="dark light" />
+<meta name="description" content="Launch the MiniCPM-V 4.6 multimodal demo." />
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet" />
 <style>
   :root {
     --bg-0: #07080d;
     --fg: #e7e9f0;
     --fg-dim: #9ba2b6;
     --fg-faint: #6b7180;
+    --accent: #7c8cff;
+    --accent-soft: rgba(124, 140, 255, 0.18);
+    --card-bg: rgba(255, 255, 255, 0.03);
+    --card-bd: rgba(255, 255, 255, 0.08);
+    --card-bd-hover: rgba(255, 255, 255, 0.2);
     --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
   }
   * { box-sizing: border-box; }
+  html, body { margin: 0; padding: 0; min-height: 100%; }
   body {
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     color: var(--fg);
     background: radial-gradient(1200px 800px at 15% 0%, #1a1f37 0%, transparent 60%),
+                radial-gradient(900px 700px at 85% 100%, #251735 0%, transparent 60%),
                 var(--bg-0);
     min-height: 100vh;
     display: flex;
     -moz-osx-font-smoothing: grayscale;
   }
   body::before {
     content: "";
     position: fixed;
     z-index: 1;
     flex: 1;
     width: 100%;
+    max-width: 920px;
     margin: 0 auto;
+    padding: clamp(52px, 9vw, 108px) clamp(20px, 5vw, 48px);
     display: flex;
     flex-direction: column;
     justify-content: center;
+    gap: clamp(36px, 5vw, 56px);
   }
+  header.brand { display: flex; flex-direction: column; gap: 18px; }
   .badge {
     align-self: flex-start;
     margin: 0;
     font-size: clamp(15px, 1.6vw, 18px);
     color: var(--fg-dim);
+    max-width: 62ch;
+    line-height: 1.65;
   }
   .card {
     position: relative;
     display: flex;
+    align-items: center;
     justify-content: space-between;
+    gap: 28px;
+    padding: clamp(24px, 3.2vw, 34px);
     border: 1px solid var(--card-bd);
+    border-radius: 22px;
     background: var(--card-bg);
     backdrop-filter: blur(14px);
     -webkit-backdrop-filter: blur(14px);
     overflow: hidden;
     box-shadow: var(--shadow);
     transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
   }
   .card::before {
     content: "";
     position: absolute;
     inset: -2px;
     border-radius: inherit;
+    background: var(--accent-soft);
     filter: blur(40px);
+    opacity: 0.65;
     z-index: -1;
     transition: opacity 0.25s ease;
   }
   .card:hover {
     transform: translateY(-4px);
     border-color: var(--card-bd-hover);
+    background: rgba(255, 255, 255, 0.045);
   }
+  .card:hover::before { opacity: 0.9; }
+  .card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
+  .card-copy { display: flex; flex-direction: column; gap: 9px; }
+  .card-title {
+    font-size: clamp(24px, 3vw, 32px);
+    font-weight: 650;
+    letter-spacing: -0.015em;
+    line-height: 1.2;
   }
+  .card-sub { font-size: 15px; color: var(--fg-dim); line-height: 1.6; }
   .arrow {
+    flex: 0 0 auto;
+    width: 46px;
+    height: 46px;
     border-radius: 50%;
+    background: rgba(255, 255, 255, 0.07);
     border: 1px solid var(--card-bd);
     display: inline-flex;
     align-items: center;
     transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
   }
   .card:hover .arrow {
+    transform: translate(4px, -4px);
+    background: var(--accent);
+    border-color: var(--accent);
   }
+  .arrow svg { stroke: var(--fg); transition: stroke 0.25s ease; }
+  .card:hover .arrow svg { stroke: #080a12; }
   footer {
     position: relative;
     font-size: 12px;
     letter-spacing: 0.04em;
   }
+  @media (max-width: 640px) {
+    .card { align-items: flex-start; flex-direction: column; }
+  }
   @media (prefers-reduced-motion: reduce) {
     .card, .card .arrow, .card::before { transition: none; }
   }
 <body>
   <main>
     <header class="brand">
+      <span class="badge"><span class="dot"></span>Live Demo</span>
       <h1>MiniCPM-V<span class="v">4.6</span></h1>
+      <p class="lead">Explore MiniCPM-V 4.6 in a multimodal chat experience with image, video, Instruct, and Thinking capabilities.</p>
     </header>
+    <a class="card" href="http://34.125.240.119:8000/" target="_blank" rel="noopener noreferrer" aria-label="Launch MiniCPM-V 4.6 demo">
+      <div class="card-copy">
+        <div class="card-title">Launch MiniCPM-V 4.6 Demo</div>
+        <div class="card-sub">Open the live chat interface and try image or video understanding.</div>
+      </div>
+      <span class="arrow" aria-hidden="true">
+        <svg width="16" height="16" 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>
+      </span>
+    </a>
   </main>
+  <footer>MiniCPM-V 4.6</footer>
 </body>
 </html>