Spaces:

Noah1115
/

anycoder-b3e5ec7d

Running

File size: 18,600 Bytes

b736635

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TP DP PP 可视化分析</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #3a86ff;
            --secondary-color: #8338ec;
            --success-color: #38b000;
            --warning-color: #ff9e00;
            --danger-color: #ff006e;
            --dark-color: #2b2d42;
            --light-color: #f8f9fa;
            --gray-color: #6c757d;
            --border-radius: 12px;
            --box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
            --transition: all 0.3s ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: var(--dark-color);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            margin-bottom: 30px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--primary-color);
        }

        .logo i {
            font-size: 2.2rem;
        }

        .anycoder-link {
            color: var(--secondary-color);
            text-decoration: none;
            font-size: 0.9rem;
            font-weight: 500;
            transition: var(--transition);
        }

        .anycoder-link:hover {
            color: var(--primary-color);
            text-decoration: underline;
        }

        h1 {
            text-align: center;
            margin-bottom: 10px;
            color: var(--dark-color);
            font-size: 2.5rem;
        }

        .subtitle {
            text-align: center;
            margin-bottom: 40px;
            color: var(--gray-color);
            font-size: 1.1rem;
        }

        .controls {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 40px;
            justify-content: center;
        }

        .control-group {
            background: white;
            padding: 20px;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            flex: 1;
            min-width: 250px;
            max-width: 350px;
        }

        .control-group h3 {
            margin-bottom: 15px;
            color: var(--primary-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .control-group h3 i {
            font-size: 1.2rem;
        }

        .slider-container {
            margin-bottom: 15px;
        }

        .slider-container label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .slider {
            width: 100%;
            height: 8px;
            -webkit-appearance: none;
            background: #e0e0e0;
            border-radius: 4px;
            outline: none;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--primary-color);
            cursor: pointer;
            transition: var(--transition);
        }

        .slider::-webkit-slider-thumb:hover {
            transform: scale(1.2);
        }

        .slider-value {
            text-align: right;
            font-weight: 600;
            color: var(--primary-color);
            margin-top: 5px;
        }

        .visualization {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }

        .chart-container {
            background: white;
            padding: 25px;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            display: flex;
            flex-direction: column;
        }

        .chart-container h3 {
            margin-bottom: 20px;
            color: var(--dark-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .chart {
            height: 300px;
            position: relative;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
        }

        .bar {
            width: 60px;
            border-radius: 8px 8px 0 0;
            transition: var(--transition);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
        }

        .bar-tp {
            background: var(--primary-color);
        }

        .bar-dp {
            background: var(--secondary-color);
        }

        .bar-pp {
            background: var(--success-color);
        }

        .bar-label {
            position: absolute;
            bottom: -30px;
            left: 0;
            right: 0;
            text-align: center;
            font-weight: 600;
            color: var(--dark-color);
        }

        .metrics {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }

        .metric-card {
            background: white;
            padding: 25px;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            text-align: center;
            transition: var(--transition);
        }

        .metric-card:hover {
            transform: translateY(-5px);
        }

        .metric-card i {
            font-size: 2.5rem;
            margin-bottom: 15px;
        }

        .metric-card.tp i {
            color: var(--primary-color);
        }

        .metric-card.dp i {
            color: var(--secondary-color);
        }

        .metric-card.pp i {
            color: var(--success-color);
        }

        .metric-card h3 {
            margin-bottom: 10px;
            font-size: 1.2rem;
        }

        .metric-value {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .metric-description {
            color: var(--gray-color);
            font-size: 0.9rem;
        }

        .comparison {
            background: white;
            padding: 25px;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            margin-bottom: 40px;
        }

        .comparison h3 {
            margin-bottom: 20px;
            color: var(--dark-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .comparison-chart {
            height: 200px;
            display: flex;
            align-items: flex-end;
            gap: 15px;
            justify-content: center;
        }

        .comparison-bar {
            flex: 1;
            border-radius: 8px 8px 0 0;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            max-width: 150px;
        }

        footer {
            text-align: center;
            padding: 20px;
            color: var(--gray-color);
            font-size: 0.9rem;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }

        @media (max-width: 768px) {
            .visualization {
                grid-template-columns: 1fr;
            }
            
            .metrics {
                grid-template-columns: 1fr;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            .controls {
                flex-direction: column;
            }
            
            .control-group {
                max-width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <i class="fas fa-chart-bar"></i>
                <span>TP DP PP 可视化</span>
            </div>
            <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a>
        </header>

        <h1>TP DP PP 性能可视化分析</h1>
        <p class="subtitle">通过交互式图表展示张量并行(TP)、数据并行(DP)和流水线并行(PP)的性能指标</p>

        <div class="controls">
            <div class="control-group">
                <h3><i class="fas fa-sliders-h"></i> 参数设置</h3>
                <div class="slider-container">
                    <label for="tp-slider">张量并行度 (TP)</label>
                    <input type="range" min="1" max="8" value="4" class="slider" id="tp-slider">
                    <div class="slider-value" id="tp-value">4</div>
                </div>
                <div class="slider-container">
                    <label for="dp-slider">数据并行度 (DP)</label>
                    <input type="range" min="1" max="16" value="8" class="slider" id="dp-slider">
                    <div class="slider-value" id="dp-value">8</div>
                </div>
                <div class="slider-container">
                    <label for="pp-slider">流水线并行度 (PP)</label>
                    <input type="range" min="1" max="8" value="2" class="slider" id="pp-slider">
                    <div class="slider-value" id="pp-value">2</div>
                </div>
            </div>

            <div class="control-group">
                <h3><i class="fas fa-cog"></i> 模型配置</h3>
                <div class="slider-container">
                    <label for="model-size">模型规模 (亿参数)</label>
                    <input type="range" min="10" max="1000" value="175" class="slider" id="model-size">
                    <div class="slider-value" id="model-size-value">175亿</div>
                </div>
                <div class="slider-container">
                    <label for="batch-size">批次大小</label>
                    <input type="range" min="1" max="128" value="32" class="slider" id="batch-size">
                    <div class="slider-value" id="batch-size-value">32</div>
                </div>
            </div>
        </div>

        <div class="metrics">
            <div class="metric-card tp">
                <i class="fas fa-cube"></i>
                <h3>张量并行 (TP)</h3>
                <div class="metric-value" id="tp-metric">4</div>
                <p class="metric-description">将单个张量操作拆分到多个设备上并行计算</p>
            </div>
            <div class="metric-card dp">
                <i class="fas fa-database"></i>
                <h3>数据并行 (DP)</h3>
                <div class="metric-value" id="dp-metric">8</div>
                <p class="metric-description">将数据拆分到多个设备上，每个设备有完整的模型副本</p>
            </div>
            <div class="metric-card pp">
                <i class="fas fa-stream"></i>
                <h3>流水线并行 (PP)</h3>
                <div class="metric-value" id="pp-metric">2</div>
                <p class="metric-description">将模型的不同层分配到不同的设备上，形成处理流水线</p>
            </div>
        </div>

        <div class="visualization">
            <div class="chart-container">
                <h3><i class="fas fa-chart-line"></i> 并行效率对比</h3>
                <div class="chart" id="efficiency-chart">
                    <div class="bar bar-tp" style="height: 85%;" data-value="85">85%</div>
                    <div class="bar bar-dp" style="height: 92%;" data-value="92">92%</div>
                    <div class="bar bar-pp" style="height: 78%;" data-value="78">78%</div>
                </div>
            </div>

            <div class="chart-container">
                <h3><i class="fas fa-tachometer-alt"></i> 内存使用情况</h3>
                <div class="chart" id="memory-chart">
                    <div class="bar bar-tp" style="height: 65%;" data-value="65">65%</div>
                    <div class="bar bar-dp" style="height: 85%;" data-value="85">85%</div>
                    <div class="bar bar-pp" style="height: 45%;" data-value="45">45%</div>
                </div>
            </div>
        </div>

        <div class="comparison">
            <h3><i class="fas fa-balance-scale"></i> 综合性能对比</h3>
            <div class="comparison-chart">
                <div class="comparison-bar bar-tp" style="height: 75%;">TP</div>
                <div class="comparison-bar bar-dp" style="height: 88%;">DP</div>
                <div class="comparison-bar bar-pp" style="height: 62%;">PP</div>
            </div>
        </div>

        <footer>
            <p>TP DP PP 可视化分析工具 | 使用交互式图表展示并行计算性能指标</p>
        </footer>
    </div>

    <script>
        // 获取DOM元素
        const tpSlider = document.getElementById('tp-slider');
        const dpSlider = document.getElementById('dp-slider');
        const ppSlider = document.getElementById('pp-slider');
        const modelSizeSlider = document.getElementById('model-size');
        const batchSizeSlider = document.getElementById('batch-size');

        const tpValue = document.getElementById('tp-value');
        const dpValue = document.getElementById('dp-value');
        const ppValue = document.getElementById('pp-value');
        const modelSizeValue = document.getElementById('model-size-value');
        const batchSizeValue = document.getElementById('batch-size-value');

        const tpMetric = document.getElementById('tp-metric');
        const dpMetric = document.getElementById('dp-metric');
        const ppMetric = document.getElementById('pp-metric');

        const efficiencyBars = document.querySelectorAll('#efficiency-chart .bar');
        const memoryBars = document.querySelectorAll('#memory-chart .bar');
        const comparisonBars = document.querySelectorAll('.comparison-bar');

        // 更新滑块值显示
        function updateSliderValues() {
            tpValue.textContent = tpSlider.value;
            dpValue.textContent = dpSlider.value;
            ppValue.textContent = ppSlider.value;
            
            const modelSize = parseInt(modelSizeSlider.value);
            modelSizeValue.textContent = modelSize + '亿';
            
            batchSizeValue.textContent = batchSizeSlider.value;
            
            // 更新指标卡
            tpMetric.textContent = tpSlider.value;
            dpMetric.textContent = dpSlider.value;
            ppMetric.textContent = ppSlider.value;
            
            // 更新图表
            updateCharts();
        }

        // 更新图表数据
        function updateCharts() {
            const tp = parseInt(tpSlider.value);
            const dp = parseInt(dpSlider.value);
            const pp = parseInt(ppSlider.value);
            const modelSize = parseInt(modelSizeSlider.value);
            const batchSize = parseInt(batchSizeSlider.value);
            
            // 计算效率百分比（模拟算法）
            const tpEfficiency = Math.max(50, 100 - (tp - 1) * 5);
            const dpEfficiency = Math.max(60, 100 - (dp - 1) * 1);
            const ppEfficiency = Math.max(40, 100 - (pp - 1) * 10);
            
            // 计算内存使用（模拟算法）
            const tpMemory = Math.min(95, 30 + tp * 10);
            const dpMemory = Math.min(95, 50 + dp * 5);
            const ppMemory = Math.min(95, 20 + pp * 15);
            
            // 计算综合性能（模拟算法）
            const tpPerformance = Math.max(30, 90 - (tp - 1) * 5);
            const dpPerformance = Math.max(40, 95 - (dp - 1) * 1);
            const ppPerformance = Math.max(20, 70 - (pp - 1) * 8);
            
            // 更新效率图表
            efficiencyBars[0].style.height = tpEfficiency + '%';
            efficiencyBars[0].textContent = tpEfficiency + '%';
            efficiencyBars[0].setAttribute('data-value', tpEfficiency);
            
            efficiencyBars[1].style.height = dpEfficiency + '%';
            efficiencyBars[1].textContent = dpEfficiency + '%';
            efficiencyBars[1].setAttribute('data-value', dpEfficiency);
            
            efficiencyBars[2].style.height = ppEfficiency + '%';
            efficiencyBars[2].textContent = ppEfficiency + '%';
            efficiencyBars[2].setAttribute('data-value', ppEfficiency);
            
            // 更新内存图表
            memoryBars[0].style.height = tpMemory + '%';
            memoryBars[0].textContent = tpMemory + '%';
            memoryBars[0].setAttribute('data-value', tpMemory);
            
            memoryBars[1].style.height = dpMemory + '%';
            memoryBars[1].textContent = dpMemory + '%';
            memoryBars[1].setAttribute('data-value', dpMemory);
            
            memoryBars[2].style.height = ppMemory + '%';
            memoryBars[2].textContent = ppMemory + '%';
            memoryBars[2].setAttribute('data-value', ppMemory);
            
            // 更新综合性能图表
            comparisonBars[0].style.height = tpPerformance + '%';
            comparisonBars[1].style.height = dpPerformance + '%';
            comparisonBars[2].style.height = ppPerformance + '%';
        }

        // 添加事件监听器
        tpSlider.addEventListener('input', updateSliderValues);
        dpSlider.addEventListener('input', updateSliderValues);
        ppSlider.addEventListener('input', updateSliderValues);
        modelSizeSlider.addEventListener('input', updateSliderValues);
        batchSizeSlider.addEventListener('input', updateSliderValues);

        // 初始化
        updateSliderValues();
    </script>
</body>
</html>