MiniCPM-V-Demo / index.html
li-a's picture
Add MiniCPM-V demo hub page and local Gradio demo
5fea28a verified
Raw
History Blame Contribute Delete
6.37 kB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>MiniCPM-V Demo Hub</title>
<style>
:root {
--bg: #0b1020;
--panel: #141b2f;
--text: #e8eefc;
--muted: #9aa8c7;
--accent: #6ea8ff;
--ok: #3ecf8e;
--warn: #f0b429;
--bad: #ff6b6b;
--line: rgba(255,255,255,0.08);
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
background:
radial-gradient(1200px 600px at 10% -10%, #1a2a55 0%, transparent 55%),
radial-gradient(900px 500px at 100% 0%, #2a1650 0%, transparent 50%),
var(--bg);
color: var(--text);
line-height: 1.55;
}
main { max-width: 980px; margin: 0 auto; padding: 40px 20px 80px; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 8px; letter-spacing: -0.02em; }
h2 { margin: 0 0 12px; font-size: 1.15rem; }
p { color: var(--muted); margin: 0 0 14px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px; border-radius: 999px;
background: rgba(110,168,255,0.12); border: 1px solid rgba(110,168,255,0.25);
color: var(--accent); font-size: 0.85rem; margin-bottom: 18px;
}
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 22px 0; }
.card {
background: var(--panel); border: 1px solid var(--line);
border-radius: 16px; padding: 18px;
}
.status { font-weight: 700; }
.ok { color: var(--ok); }
.warn { color: var(--warn); }
.bad { color: var(--bad); }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px 10px; font-size: 0.95rem; }
.kv span:nth-child(odd) { color: var(--muted); }
.examples { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.examples img { width: 100%; border-radius: 12px; border: 1px solid var(--line); background: #000; }
pre {
background: #0a0f1c; border: 1px solid var(--line); border-radius: 12px;
padding: 14px; overflow: auto; color: #d7e3ff; font-size: 0.86rem;
}
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.btn {
display: inline-block; padding: 10px 14px; border-radius: 10px;
background: var(--accent); color: #081018; font-weight: 700;
}
.btn.secondary { background: transparent; color: var(--text); border: 1px solid var(--line); }
footer { margin-top: 36px; color: var(--muted); font-size: 0.85rem; }
</style>
</head>
<body>
<main>
<div class="badge">openbmb/MiniCPM-V · 3B multimodal VQA</div>
<h1>MiniCPM-V Demo Hub</h1>
<p>
Efficient bilingual vision-language model (~3B). Suitable for local Apple Silicon / mid GPUs,
and for hosted Spaces when your Hugging Face plan allows Gradio.
Model card: <a href="https://huggingface.co/openbmb/MiniCPM-V" target="_blank" rel="noreferrer">openbmb/MiniCPM-V</a>
</p>
<section class="grid">
<article class="card">
<h2>本机部署结论</h2>
<p class="status ok">可以部署(推荐本地 MPS)</p>
<div class="kv">
<span>机器</span><span>MacBook Pro · Apple M2 · 24 GB</span>
<span>模型体量</span><span>~3B,BF16 约 6GB 权重</span>
<span>本机路径</span><span>MPS float16(设 PYTORCH_ENABLE_MPS_FALLBACK=1)</span>
<span>磁盘</span><span>可用约 37GB(偏紧,建议先清缓存)</span>
</div>
</article>
<article class="card">
<h2>Hugging Face Space</h2>
<p class="status warn">Gradio/Docker 免费机需要 PRO</p>
<p>
当前账号 <code>li-a</code> 为非 Pro。创建 Gradio Space 返回 402。
本页为免费 Static Space。要自建可交互 Gradio Demo,需
<a href="https://huggingface.co/pro" target="_blank" rel="noreferrer">升级 PRO</a>
,或使用官方已托管 Demo。
</p>
</article>
</section>
<section class="card">
<h2>官方 / 社区已上线 Demo(更新版本)</h2>
<p>原始 MiniCPM-V (v1/OmniLMM-3B) 较少维护;下列为同系列更新版可直接试用:</p>
<div class="actions">
<a class="btn" href="https://huggingface.co/spaces/openbmb/MiniCPM-V-4_5-Demo" target="_blank" rel="noreferrer">MiniCPM-V 4.5 Demo</a>
<a class="btn secondary" href="https://huggingface.co/spaces/openbmb/MiniCPM-V-4.6-Demo" target="_blank" rel="noreferrer">MiniCPM-V 4.6 Demo</a>
<a class="btn secondary" href="https://huggingface.co/openbmb/MiniCPM-V" target="_blank" rel="noreferrer">模型页</a>
</div>
</section>
<section class="card" style="margin-top:16px;">
<h2>模型卡片示例</h2>
<div class="examples">
<figure>
<img src="./assets/mushroom.gif" alt="MiniCPM-V mushroom example" />
<figcaption style="color:var(--muted);font-size:0.85rem;margin-top:6px;">Mushroom example</figcaption>
</figure>
<figure>
<img src="./assets/snake.gif" alt="MiniCPM-V snake example" />
<figcaption style="color:var(--muted);font-size:0.85rem;margin-top:6px;">Snake example</figcaption>
</figure>
</div>
</section>
<section class="card" style="margin-top:16px;">
<h2>本机一键 Gradio(Mac M2)</h2>
<p>Space 仓库里附带 <code>local_demo/</code>。在本机执行:</p>
<pre>cd local_demo
python3 -m venv .venv && source .venv/bin/activate
pip install -r requirements.txt
PYTORCH_ENABLE_MPS_FALLBACK=1 python app.py</pre>
<p>浏览器打开终端打印的本地地址即可上传图片提问。</p>
<div class="actions">
<a class="btn secondary" href="https://huggingface.co/spaces/li-a/MiniCPM-V-Demo/tree/main/local_demo" target="_blank" rel="noreferrer">查看 local_demo 文件</a>
</div>
</section>
<footer>
MiniCPM-V weights follow the MiniCPM Model License. Academic use is free; commercial use requires registration on the model page.
</footer>
</main>
</body>
</html>