[feat] update website
parent
3d5d6aa177
commit
5361ee9a8c
821
index.html
821
index.html
|
|
@ -3,128 +3,745 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>MiniMind Project</title>
|
<title>MiniMind-V - Train Vision-Language Models from Scratch</title>
|
||||||
<!-- 引入 Bootstrap CSS -->
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
<!-- 可选: 引入自定义样式 -->
|
|
||||||
<style>
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--mc-grass: #5fa824;
|
||||||
|
--mc-stone: #7f8c8d;
|
||||||
|
--mc-wood: #8b5a3c;
|
||||||
|
--mc-sand: #d4a574;
|
||||||
|
--mc-gold: #ffd700;
|
||||||
|
--mc-dark: #1e1e1e;
|
||||||
|
--mc-light: #f5f5f5;
|
||||||
|
--primary: #5e72e4;
|
||||||
|
--accent: #11cdef;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixel-font {
|
||||||
|
font-family: 'Press Start 2P', 'Courier New', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: linear-gradient(180deg, #87ceeb 0%, #e0f6ff 50%, #d4a574 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-main {
|
||||||
|
background: var(--mc-light);
|
||||||
|
border: 4px solid;
|
||||||
|
border-color: #fff #ccc #999 #fff;
|
||||||
|
box-shadow: inset 1px 1px 0 rgba(255,255,255,.5),
|
||||||
|
inset -1px -1px 0 rgba(0,0,0,.5),
|
||||||
|
3px 3px 0 rgba(0,0,0,.3);
|
||||||
|
padding: 40px;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
image-rendering: pixelated;
|
||||||
|
image-rendering: -moz-crisp-edges;
|
||||||
|
image-rendering: crisp-edges;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Logo */
|
||||||
.logo {
|
.logo {
|
||||||
|
max-width: 80%;
|
||||||
|
height: auto;
|
||||||
|
image-rendering: pixelated;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Badge Container - between logo and title */
|
||||||
|
.badge-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin: 12px 0 15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-container img {
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Title Section */
|
||||||
|
.title-section {
|
||||||
|
text-align: center;
|
||||||
|
background: var(--mc-grass);
|
||||||
|
color: white;
|
||||||
|
padding: 20px 20px;
|
||||||
|
border: 3px solid;
|
||||||
|
border-color: #fff #777 #777 #fff;
|
||||||
|
box-shadow: inset 1px 1px 0 rgba(255,255,255,.3),
|
||||||
|
inset -1px -1px 0 rgba(0,0,0,.3);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-section h1 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagline {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: #fff;
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stats Section */
|
||||||
|
.stats-section {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||||
|
gap: 12px;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-box {
|
||||||
|
background: var(--mc-sand);
|
||||||
|
border: 3px solid;
|
||||||
|
border-color: #fff #888 #888 #fff;
|
||||||
|
box-shadow: inset 1px 1px 0 rgba(255,255,255,.3),
|
||||||
|
inset -1px -1px 0 rgba(0,0,0,.3),
|
||||||
|
2px 2px 0 rgba(0,0,0,.2);
|
||||||
|
padding: 15px;
|
||||||
|
text-align: center;
|
||||||
|
background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-box h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
color: #333;
|
||||||
|
text-shadow: 1px 1px 0 rgba(255,255,255,.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-box p {
|
||||||
|
margin: 6px 0 0 0;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: #555;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Feature Cards */
|
||||||
|
.features-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||||
|
gap: 15px;
|
||||||
|
margin: 25px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card {
|
||||||
|
background: var(--mc-light);
|
||||||
|
border: 3px solid;
|
||||||
|
border-color: #fff #888 #888 #fff;
|
||||||
|
box-shadow: inset 1px 1px 0 rgba(255,255,255,.5),
|
||||||
|
inset -1px -1px 0 rgba(0,0,0,.2),
|
||||||
|
3px 3px 0 rgba(0,0,0,.2);
|
||||||
|
padding: 15px;
|
||||||
|
background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
|
||||||
|
transition: transform 0.1s, box-shadow 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card:hover {
|
||||||
|
transform: translate(-2px, -2px);
|
||||||
|
box-shadow: inset 1px 1px 0 rgba(255,255,255,.5),
|
||||||
|
inset -1px -1px 0 rgba(0,0,0,.2),
|
||||||
|
5px 5px 0 rgba(0,0,0,.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card h3 {
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
color: var(--mc-grass);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card p {
|
||||||
|
margin: 0;
|
||||||
|
color: #555;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section Headers */
|
||||||
|
.section-header {
|
||||||
|
background: var(--mc-stone);
|
||||||
|
color: white;
|
||||||
|
padding: 12px 15px;
|
||||||
|
border: 3px solid;
|
||||||
|
border-color: #fff #555 #555 #fff;
|
||||||
|
box-shadow: inset 1px 1px 0 rgba(255,255,255,.3),
|
||||||
|
inset -1px -1px 0 rgba(0,0,0,.3);
|
||||||
|
margin: 25px 0 15px 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
text-shadow: 1px 1px 0 rgba(0,0,0,.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Models Table */
|
||||||
|
.models-table {
|
||||||
|
margin: 18px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.models-table table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
border: 3px solid;
|
||||||
|
border-color: #fff #888 #888 #fff;
|
||||||
|
box-shadow: inset 1px 1px 0 rgba(255,255,255,.3),
|
||||||
|
inset -1px -1px 0 rgba(0,0,0,.3);
|
||||||
|
background: var(--mc-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.models-table thead {
|
||||||
|
background: var(--mc-wood);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.models-table thead th {
|
||||||
|
padding: 10px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
text-shadow: 1px 1px 0 rgba(0,0,0,.5);
|
||||||
|
border-right: 2px solid rgba(0,0,0,.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.models-table tbody tr {
|
||||||
|
border-bottom: 2px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.models-table tbody tr:nth-child(even) {
|
||||||
|
background: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.models-table td {
|
||||||
|
padding: 8px 10px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
border-right: 2px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.models-table td:last-child {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.models-table tbody tr:hover {
|
||||||
|
background: #fffacd !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Changelog */
|
||||||
|
.changelog-section {
|
||||||
|
margin: 18px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.changelog-item {
|
||||||
|
background: var(--mc-light);
|
||||||
|
border: 3px solid;
|
||||||
|
border-color: #fff #888 #888 #fff;
|
||||||
|
box-shadow: inset 1px 1px 0 rgba(255,255,255,.3),
|
||||||
|
inset -1px -1px 0 rgba(0,0,0,.2),
|
||||||
|
2px 2px 0 rgba(0,0,0,.15);
|
||||||
|
padding: 0;
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.changelog-header {
|
||||||
|
background: var(--mc-gold);
|
||||||
|
color: #333;
|
||||||
|
padding: 10px 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
user-select: none;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
transition: background 0.1s;
|
||||||
|
border-bottom: 2px solid #ddd;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.changelog-header:hover {
|
||||||
|
background: #ffed4e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.changelog-header.open {
|
||||||
|
background: #ffd700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-icon {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.changelog-content {
|
||||||
|
padding: 12px 15px;
|
||||||
|
display: none;
|
||||||
|
background: #fafafa;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.changelog-item.open .changelog-content {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.changelog-content ul {
|
||||||
|
list-style: none;
|
||||||
|
padding-left: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.changelog-content li {
|
||||||
|
padding: 4px 0;
|
||||||
|
padding-left: 20px;
|
||||||
|
position: relative;
|
||||||
|
color: #333;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.changelog-content li:before {
|
||||||
|
content: "▸";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
color: var(--mc-grass);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Links Section */
|
||||||
|
.links-section {
|
||||||
|
background: var(--mc-grass);
|
||||||
|
color: white;
|
||||||
|
padding: 25px;
|
||||||
|
border: 3px solid;
|
||||||
|
border-color: #fff #555 #555 #fff;
|
||||||
|
box-shadow: inset 1px 1px 0 rgba(255,255,255,.2),
|
||||||
|
inset -1px -1px 0 rgba(0,0,0,.3),
|
||||||
|
3px 3px 0 rgba(0,0,0,.3);
|
||||||
|
margin: 25px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links-section h2 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-size: 1rem;
|
||||||
|
text-shadow: 1px 1px 0 rgba(0,0,0,.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.links-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixel-button {
|
||||||
|
background: var(--mc-sand);
|
||||||
|
color: #333;
|
||||||
|
border: 3px solid;
|
||||||
|
border-color: #fff #888 #888 #fff;
|
||||||
|
box-shadow: inset 1px 1px 0 rgba(255,255,255,.3),
|
||||||
|
inset -1px -1px 0 rgba(0,0,0,.2),
|
||||||
|
2px 2px 0 rgba(0,0,0,.2);
|
||||||
|
padding: 8px 14px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
transition: all 0.1s;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixel-button:hover {
|
||||||
|
border-color: #888 #fff #fff #888;
|
||||||
|
box-shadow: inset -1px -1px 0 rgba(255,255,255,.3),
|
||||||
|
inset 1px 1px 0 rgba(0,0,0,.2),
|
||||||
|
1px 1px 0 rgba(0,0,0,.1);
|
||||||
|
transform: translate(2px, 2px);
|
||||||
|
color: #333;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixel-button:active {
|
||||||
|
box-shadow: inset 1px 1px 0 rgba(255,255,255,.3),
|
||||||
|
inset -1px -1px 0 rgba(0,0,0,.2);
|
||||||
|
transform: translate(3px, 3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Why Section */
|
||||||
|
.why-section {
|
||||||
|
background: var(--mc-light);
|
||||||
|
border: 3px solid;
|
||||||
|
border-color: #fff #888 #888 #fff;
|
||||||
|
box-shadow: inset 1px 1px 0 rgba(255,255,255,.3),
|
||||||
|
inset -1px -1px 0 rgba(0,0,0,.2);
|
||||||
|
padding: 20px;
|
||||||
|
margin: 22px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.why-section h2 {
|
||||||
|
color: var(--mc-wood);
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.why-section ul {
|
||||||
|
list-style: none;
|
||||||
|
padding-left: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.why-section li {
|
||||||
|
padding: 4px 0;
|
||||||
|
padding-left: 22px;
|
||||||
|
position: relative;
|
||||||
|
color: #333;
|
||||||
|
line-height: 1.4;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.why-section li:before {
|
||||||
|
content: "→";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
color: var(--mc-grass);
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote {
|
||||||
|
font-style: italic;
|
||||||
|
color: #666;
|
||||||
|
border-left: 4px solid var(--mc-grass);
|
||||||
|
padding-left: 12px;
|
||||||
|
margin: 15px 0;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Visuals */
|
||||||
|
.visuals-container {
|
||||||
|
display: flex;
|
||||||
|
overflow-x: auto;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 15px;
|
||||||
|
background: var(--mc-light);
|
||||||
|
border: 3px solid #ddd;
|
||||||
|
margin: 20px 0;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visuals-container img {
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
max-height: 450px;
|
||||||
|
border: 2px solid #999;
|
||||||
|
image-rendering: auto;
|
||||||
|
flex-shrink: 0;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visuals-container::-webkit-scrollbar {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visuals-container::-webkit-scrollbar-track {
|
||||||
|
background: #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visuals-container::-webkit-scrollbar-thumb {
|
||||||
|
background: #999;
|
||||||
|
border: 1px solid #777;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
.footer {
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 20px;
|
||||||
|
border-top: 3px solid #ccc;
|
||||||
|
margin-top: 25px;
|
||||||
|
color: #666;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer a {
|
||||||
|
color: var(--mc-grass);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.container-main {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-section h1 {
|
||||||
|
font-size: 2.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-section {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.features-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visuals-container {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visuals-container img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scroll-container {
|
|
||||||
display: flex;
|
|
||||||
overflow-x: auto; /* 启用水平滚动 */
|
|
||||||
width: 100%;
|
|
||||||
padding: 20px 10px 1px 10px; /* 内边距 */
|
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 阴影效果 */
|
|
||||||
border-radius: 20px 20px 5px 5px; /* 圆角 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-container img {
|
|
||||||
width: auto; /* 图片最大宽度为100%,以适应容器 */
|
|
||||||
height: 500px; /* 维持图片的宽高比 */
|
|
||||||
margin: 0 10px; /* 图片之间有间距 */
|
|
||||||
object-fit: contain; /* 确保图片不被拉伸且完全显示 */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* 自定义滚动条整体部分 */
|
|
||||||
.scroll-container::-webkit-scrollbar {
|
|
||||||
width: 10px; /* 滚动条宽度 */
|
|
||||||
height: 10px; /* 对于水平滚动条有效 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 自定义滚动条轨道 */
|
|
||||||
.scroll-container::-webkit-scrollbar-track {
|
|
||||||
background: rgba(0, 0, 0, 0.1); /* 轨道背景颜色 */
|
|
||||||
border-radius: 60px; /* 轨道圆角 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 自定义滚动条滑块 */
|
|
||||||
.scroll-container::-webkit-scrollbar-thumb {
|
|
||||||
background: rgba(0, 0, 0, 0.1); /* 滑块颜色 */
|
|
||||||
border-radius: 10px; /* 滑块圆角 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 当鼠标悬停在滑块上时的样式 */
|
|
||||||
.scroll-container::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: rgba(0, 0, 0, 0.3); /* 悬停时的颜色 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 对于Firefox浏览器(如果需要支持) */
|
|
||||||
@-moz-document url-prefix() {
|
|
||||||
.scroll-container {
|
|
||||||
scrollbar-width: thin; /* "auto"、"thin" 或 "none" */
|
|
||||||
scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1); /* thumb 和 track 颜色 */
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container" style="max-width: 1000px;margin-top: 10px;">
|
<div class="container-main">
|
||||||
<div align="center">
|
<!-- Logo -->
|
||||||
<img src="./images/logo.png" alt="Logo" class="logo mb-4"/>
|
<div align="center" style="padding: 30px 0;">
|
||||||
<!--<br>-->
|
<img src="./images/logo.png" alt="MiniMind-V Logo" class="logo"/>
|
||||||
<img src="https://visitor-badge.laobi.icu/badge?page_id=jingyaogong/minimind-v" alt="Visitor Badge"
|
|
||||||
class="me-2">
|
|
||||||
<img src="https://img.shields.io/github/stars/jingyaogong/minimind-v?style=social" alt="GitHub Stars"
|
|
||||||
class="me-2">
|
|
||||||
<img src="https://img.shields.io/github/license/jingyaogong/minimind-v" alt="License" class="me-2">
|
|
||||||
<img src="https://img.shields.io/github/last-commit/jingyaogong/minimind-v" alt="Last Commit" class="me-2">
|
|
||||||
<img src="https://img.shields.io/badge/PRs-welcome-blue" alt="Pull Requests Welcome" class="me-2">
|
|
||||||
<img src="https://img.shields.io/badge/🤗-MiniMindV%20%20Collection-blue" alt="MiniMind Collection" class="me-2">
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div align="center">
|
<!-- Badges -->
|
||||||
<br/>
|
<div class="badge-container">
|
||||||
<p style="font-size: 4vh;font-weight: bold;">"The Greatest Path is the Simplest"</p>
|
<img src="https://visitor-badge.laobi.icu/badge?page_id=jingyaogong/minimind-v" alt="Visitor Badge">
|
||||||
<a href="https://github.com/jingyaogong/minimind-v">🔗 MiniMind-V Github Repo 🔗</a>
|
<img src="https://img.shields.io/github/stars/jingyaogong/minimind-v?style=social" alt="GitHub Stars">
|
||||||
|
<img src="https://img.shields.io/github/license/jingyaogong/minimind-v" alt="License">
|
||||||
|
<img src="https://img.shields.io/github/last-commit/jingyaogong/minimind-v" alt="Last Commit">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr>
|
<!-- Title Section -->
|
||||||
|
<div class="title-section">
|
||||||
|
<p class="tagline pixel-font">
|
||||||
|
Train a 26M Vision-Language Model from zero.<br/>
|
||||||
|
1 hour. ¥1.3. One 3090.<br/>
|
||||||
|
See the World.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Key Stats -->
|
||||||
|
<div class="stats-section">
|
||||||
|
<div class="stat-box">
|
||||||
|
<h3>26M</h3>
|
||||||
|
<p>Parameters</p>
|
||||||
|
</div>
|
||||||
|
<div class="stat-box">
|
||||||
|
<h3>1h</h3>
|
||||||
|
<p>Training</p>
|
||||||
|
</div>
|
||||||
|
<div class="stat-box">
|
||||||
|
<h3>¥1.3</h3>
|
||||||
|
<p>Cost</p>
|
||||||
|
</div>
|
||||||
|
<div class="stat-box">
|
||||||
|
<h3>1/7000</h3>
|
||||||
|
<p>vs GPT-3</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- What You Get -->
|
||||||
|
<div class="section-header pixel-font">✨ What You Get</div>
|
||||||
|
<div class="features-grid">
|
||||||
|
<div class="feature-card">
|
||||||
|
<h3>📸 Vision Multimodal</h3>
|
||||||
|
<p>Full vision-language capabilities on personal GPUs.</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature-card">
|
||||||
|
<h3>📦 Complete VLM Stack</h3>
|
||||||
|
<p>Vision encoder → LLM → Projector → Pretrain → SFT</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature-card">
|
||||||
|
<h3>💰 Ultra-Affordable</h3>
|
||||||
|
<p>Single 3090 GPU, minimal compute resources needed.</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature-card">
|
||||||
|
<h3>📖 Pure PyTorch</h3>
|
||||||
|
<p>Transparent implementation. Learn from reading the code.</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature-card">
|
||||||
|
<h3>🚀 Production Ready</h3>
|
||||||
|
<p>OpenAI API compatible, ready for real-world deployment.</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature-card">
|
||||||
|
<h3>🔌 Extensible</h3>
|
||||||
|
<p>Multi-image support, fine-tuning, and more capabilities.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Models -->
|
||||||
|
<div class="section-header pixel-font">📦 Models</div>
|
||||||
|
<div class="models-table">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Model</th>
|
||||||
|
<th>Parameters</th>
|
||||||
|
<th>Inference Memory</th>
|
||||||
|
<th>Release</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><strong>MiniMind2-V</strong></td>
|
||||||
|
<td>104M</td>
|
||||||
|
<td>0.6 GB</td>
|
||||||
|
<td>2025.02.20</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>MiniMind2-Small-V</strong></td>
|
||||||
|
<td>26M</td>
|
||||||
|
<td>1.1 GB</td>
|
||||||
|
<td>2025.02.20</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- What's New / Changelog -->
|
||||||
|
<div class="section-header pixel-font">📰 What's New</div>
|
||||||
|
<div class="changelog-section">
|
||||||
|
<div class="changelog-item open">
|
||||||
|
<div class="changelog-header open" onclick="toggleChangelog(this)">
|
||||||
|
<span>🎉 2025-04-27 (Latest)</span>
|
||||||
|
<span class="toggle-icon">−</span>
|
||||||
|
</div>
|
||||||
|
<div class="changelog-content">
|
||||||
<ul>
|
<ul>
|
||||||
<li>This project aims to train a super-small multimodal vision-language model, <strong>MiniMind-V</strong>, with
|
<li>Compatibility updates</li>
|
||||||
just a cost of 3 RMB and 2 hours of work, starting from scratch!
|
<li>Adapted to new features in the minimind repository</li>
|
||||||
</li>
|
<li>Standardized parts of the code</li>
|
||||||
<li>The smallest version of <strong>MiniMind-V</strong> is only about ¼ the size of GPT-3, designed to
|
|
||||||
enable fast inference and even training on personal GPUs.
|
|
||||||
</li>
|
|
||||||
<li><strong>MiniMind-V</strong> is an extension of the visual capabilities of the <a
|
|
||||||
href="https://github.com/jingyaogong/minimind">MiniMind</a> pure language model.
|
|
||||||
</li>
|
|
||||||
<li>The project includes full code for the minimalist structure of large VLM models, dataset cleaning,
|
|
||||||
pretraining, and supervised fine-tuning (SFT).
|
|
||||||
</li>
|
|
||||||
<li>This is not only the smallest implementation of an open-source VLM model but also a concise tutorial for
|
|
||||||
beginners in vision-language models.
|
|
||||||
</li>
|
|
||||||
<li>The hope is that this project can provide a useful example to inspire others and share the joy of creation,
|
|
||||||
helping to drive progress in the wider AI community!
|
|
||||||
</li>
|
|
||||||
<li style="color: #aaa;">To avoid misunderstandings, the "2 hours" is based on testing (`1 epoch`) with an
|
|
||||||
NVIDIA 3090 hardware device (single GPU), and
|
|
||||||
the "3 RMB" refers to GPU server rental costs.
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div align="center">
|
|
||||||
|
|
||||||
<div class="scroll-container">
|
|
||||||
<img src="./images/minimind2-v.gif" alt="WebUI Demo" class="img-fluid mb-4">
|
|
||||||
<img src="./images/VLM-structure.png" alt="LLM Structure" class="img-fluid mb-4">
|
|
||||||
<img src="./images/VLM-structure-moe.png" alt="LLM Structure MOE" class="img-fluid mb-4">
|
|
||||||
</div>
|
</div>
|
||||||
<br/>
|
</div>
|
||||||
<a href="https://www.modelscope.cn/studios/gongjy/minimind-v">🔗 Online Experience 🔗</a> |
|
|
||||||
<a href="https://www.bilibili.com/video/BV1Sh1vYBEzY">🔗 Video Introduction 🔗</a>
|
<div class="changelog-item">
|
||||||
<br/>
|
<div class="changelog-header" onclick="toggleChangelog(this)">
|
||||||
<br/>
|
<span>🔥 2025-02-20 (MiniMind2-V)</span>
|
||||||
|
<span class="toggle-icon">+</span>
|
||||||
|
</div>
|
||||||
|
<div class="changelog-content">
|
||||||
|
<ul>
|
||||||
|
<li>MiniMind2-V updated alongside MiniMind2</li>
|
||||||
|
<li>Significant reduction of redundant code</li>
|
||||||
|
<li>Major simplification of model structure</li>
|
||||||
|
<li>Updated dataset format with new SFT datasets</li>
|
||||||
|
<li>Better performance than previous VLM!</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="changelog-item">
|
||||||
|
<div class="changelog-header" onclick="toggleChangelog(this)">
|
||||||
|
<span>🎬 2024-10-05 (First Release)</span>
|
||||||
|
<span class="toggle-icon">+</span>
|
||||||
|
</div>
|
||||||
|
<div class="changelog-content">
|
||||||
|
<ul>
|
||||||
|
<li>MiniMind-V released on schedule</li>
|
||||||
|
<li>First open-source vision-language model release</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Visuals -->
|
||||||
|
<div class="section-header pixel-font">🎮 Inside MiniMind-V</div>
|
||||||
|
<div align="center">
|
||||||
|
<div class="visuals-container">
|
||||||
|
<img src="./images/minimind2-v.gif" alt="MiniMind-V Demo">
|
||||||
|
<img src="./images/VLM-structure.png" alt="VLM Structure">
|
||||||
|
<img src="./images/VLM-structure-moe.png" alt="VLM Structure MOE">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Try It Links -->
|
||||||
|
<div class="links-section">
|
||||||
|
<h2 class="pixel-font">🎯 Try It Online</h2>
|
||||||
|
<div class="links-grid">
|
||||||
|
<a href="https://www.modelscope.cn/studios/gongjy/minimind-v" class="pixel-button">
|
||||||
|
💬 Online Demo
|
||||||
|
</a>
|
||||||
|
<a href="https://www.bilibili.com/video/BV1Sh1vYBEzY" class="pixel-button">
|
||||||
|
📹 Video Demo
|
||||||
|
</a>
|
||||||
|
<a href="https://github.com/jingyaogong/minimind-v" class="pixel-button">
|
||||||
|
🔗 GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="border-top: 3px solid rgba(255,255,255,.3); margin: 25px 0;"></div>
|
||||||
|
|
||||||
|
<h2 class="pixel-font">📦 Get the Code</h2>
|
||||||
|
<div class="links-grid">
|
||||||
|
<a href="https://github.com/jingyaogong/minimind-v" class="pixel-button">
|
||||||
|
GitHub Repo
|
||||||
|
</a>
|
||||||
|
<a href="https://huggingface.co/collections/jingyaogong/minimind-66caf8d999f5c7fa64f399e5" class="pixel-button">
|
||||||
|
🤗 HuggingFace
|
||||||
|
</a>
|
||||||
|
<a href="https://www.modelscope.cn/profile/gongjy" class="pixel-button">
|
||||||
|
ModelScope
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Why MiniMind-V -->
|
||||||
|
<div class="why-section">
|
||||||
|
<h2>💡 Why MiniMind-V?</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Train vision-language models from scratch on consumer GPUs</li>
|
||||||
|
<li>Pure PyTorch implementation with no hidden complexity</li>
|
||||||
|
<li>Learn multimodal AI by building and reading code</li>
|
||||||
|
<li>Works offline on your personal hardware</li>
|
||||||
|
<li>Complete pipeline from data to deployment</li>
|
||||||
|
<li>OpenAI API compatible for easy integration</li>
|
||||||
|
<li>Smaller than most open-source VLMs yet powerful</li>
|
||||||
|
<li>Perfect for education and research</li>
|
||||||
|
</ul>
|
||||||
|
<p class="quote">
|
||||||
|
💭 "Seeing the world through a smaller lens, yet just as sharp."
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<div class="footer">
|
||||||
|
<p>
|
||||||
|
"1 hour" based on testing (1 epoch) with NVIDIA 3090 (single GPU).<br/>
|
||||||
|
"¥1.3" refers to GPU server rental costs.<br/>
|
||||||
|
Apache-2.0 License ·
|
||||||
|
<a href="https://github.com/jingyaogong/minimind-v">GitHub</a>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 引入 Bootstrap JS 和 Popper.js(用于一些组件) -->
|
<script>
|
||||||
|
function toggleChangelog(element) {
|
||||||
|
const item = element.parentElement;
|
||||||
|
item.classList.toggle('open');
|
||||||
|
|
||||||
|
const icon = element.querySelector('.toggle-icon');
|
||||||
|
if (item.classList.contains('open')) {
|
||||||
|
icon.textContent = '−';
|
||||||
|
} else {
|
||||||
|
icon.textContent = '+';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue