minimind-v/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MiniMind Project</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 可选: 引入自定义样式 -->
    <style>
        .logo {
            max-width: 100%;
            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>
</head>
<body>
<div class="container" style="max-width: 1000px;margin-top: 10px;">
    <div align="center">
        <img src="./images/logo.png" alt="Logo" class="logo mb-4"/>
        <!--<br>-->
        <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 align="center">
        <br/>
        <p style="font-size: 4vh;font-weight: bold;">"The Greatest Path is the Simplest"</p>
        <a href="https://github.com/jingyaogong/minimind-v">🔗 MiniMind-V Github Repo 🔗</a>
    </div>

    <hr>
    <ul>
        <li>This project aims to train a super-small multimodal vision-language model, <strong>MiniMind-V</strong>, with
            just a cost of 3 RMB and 2 hours of work, starting from scratch!
        </li>
        <li>The smallest version of <strong>MiniMind-V</strong> is only about &frac14; 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>

    <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>
        <br/>
        <a href="https://www.modelscope.cn/studios/gongjy/minimind-v">🔗 Online Experience 🔗</a> |
        <a href="https://www.bilibili.com/video/BV1Sh1vYBEzY">🔗 Video Introduction 🔗</a>
        <br/>
        <br/>
    </div>
</div>

<!-- 引入 Bootstrap JS 和 Popper.js（用于一些组件） -->
<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>
</body>
</html>