| 数据学习者官方网站(Datalearner)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可视化AI大模型对比 | DataLearnerAI</title>
    <meta name="description" content="通过交互式图表和详细表格，可视化对比AI大模型。实时获取模型数据，并排比较性能、参数和定价，支持自定义移除模型。">
    <meta name="keywords" content="AI模型对比, 可视化对比, 图表对比, 模型移除, API数据, Gemini, o3-pro, DeepSeek, Claude, DataLearnerAI">

<script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    
    
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
 
    <style type="text/tailwindcss">
        /* 自定义背景和动画 */
        body { position: relative; min-height: 100vh; background-color: #667eea; }
        body::before {
            content: ''; position: fixed; top: 0; left: 0;
            width: 100%; height: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
            background-size: 300% 300%;
            animation: final-gradient-shift 15s ease infinite;
            z-index: -1; will-change: background-position;
        }
        @keyframes final-gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        /* 自定义滚动条样式 */
        .custom-scrollbar::-webkit-scrollbar { height: 8px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 10px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }
    </style>
</head>

<body class="text-gray-100 font-sans">
    
    <div id="navbar-placeholder" class="h-16"></div>
    
    <main class="container mx-auto p-4 sm:p-6 md:p-8">
        <h1 class="text-3xl md:text-5xl font-bold text-center mb-8 text-white drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]">
            可视化 AI 大模型对比
        </h1>
        
        
        <div id="charts-container" class="grid grid-cols-1 gap-8 mb-8">
            <div id="benchmark-chart-wrapper" class="bg-black/20 backdrop-blur-lg border border-white/20 p-4 rounded-2xl shadow-lg min-h-[400px] hidden">
                <canvas id="benchmarkChart"></canvas>
            </div>
            <div id="price-chart-wrapper" class="bg-black/20 backdrop-blur-lg border border-white/20 p-4 rounded-2xl shadow-lg min-h-[400px] hidden">
                <canvas id="apiPriceChart"></canvas>
            </div>
        </div>

<div id="comparison-container">
            
            <div id="loading-indicator" class="flex flex-col items-center justify-center h-64 bg-black/20 backdrop-blur-md rounded-2xl">
                <i class="fas fa-spinner fa-spin fa-3x text-white"></i>
                <p class="mt-4 text-xl text-white">正在加载模型数据，请稍候...</p>
                <p class="mt-2 text-sm text-gray-300">首次加载可能需要几秒钟</p>
            </div>
        </div>
    </main>

<div id="footer-placeholder" class="h-16"></div>

// 注册数据标签插件
    Chart.register(ChartDataLabels);

const API_BASE_URL = 'https://cors-anywhere.herokuapp.com/https://www.datalearner.com/api/ai-resources/pretrained-models/';
    const container = document.getElementById('comparison-container');
    const loadingIndicator = document.getElementById('loading-indicator');
    const chartsContainer = document.getElementById('charts-container');
    const benchmarkChartWrapper = document.getElementById('benchmark-chart-wrapper');
    const priceChartWrapper = document.getElementById('price-chart-wrapper');

const initialModelCodes = [ 'o3-pro', 'gemini-2_5-pro-preview-06-05', 'claude-sonnet-4', 'deepseek-v3-0324', 'deepseek-r1-0528' ];
    
    let allModelsData = [];
    let benchmarkChartInstance = null;
    let apiPriceChartInstance = null;

const CHART_COLORS = [
        'rgba(75, 192, 192, 0.7)', 'rgba(255, 99, 132, 0.7)', 'rgba(54, 162, 235, 0.7)',
        'rgba(255, 206, 86, 0.7)', 'rgba(153, 102, 255, 0.7)', 'rgba(255, 159, 64, 0.7)'
    ];

const getNestedValue = (obj, path) => path.split('.').reduce((acc, part) => acc && acc[part], obj);

const renderCharts = (models) => {
        if (models.length <= 2 && models.length > 0) {
            chartsContainer.classList.add('lg:grid-cols-2');
        } else {
            chartsContainer.classList.remove('lg:grid-cols-2');
        }
        
        const modelsWithBenchmarks = models.filter(m => Object.keys(m.benchmarks).length > 0);
        const allBenchmarkNames = [...new Set(modelsWithBenchmarks.flatMap(m => Object.keys(m.benchmarks)))];

if (modelsWithBenchmarks.length > 0 && allBenchmarkNames.length > 0) {
            benchmarkChartWrapper.classList.remove('hidden');
            const benchmarkDatasets = modelsWithBenchmarks.map((model, index) => ({
                label: getNestedValue(model, 'pretrainedModel.model_abbr_name'),
                data: allBenchmarkNames.map(name => model.benchmarks[name] || null),
                backgroundColor: CHART_COLORS[index % CHART_COLORS.length],
                borderColor: CHART_COLORS[index % CHART_COLORS.length].replace('0.7', '1'),
                borderWidth: 1
            }));

if (benchmarkChartInstance) benchmarkChartInstance.destroy();
            benchmarkChartInstance = new Chart(document.getElementById('benchmarkChart'), {
                type: 'bar',
                data: { labels: allBenchmarkNames, datasets: benchmarkDatasets },
                options: {
                    responsive: true, maintainAspectRatio: false,
                    plugins: { 
                        title: { display: true, text: '性能评测对比', color: '#fff', font: { size: 18 }, padding: { top: 10, bottom: 20 } },
                        legend: { position: 'top', labels: { color: '#fff' } },
                        // 为性能图表配置数据显示
                        datalabels: {
                            color: '#fff',
                            anchor: 'end',
                            align: 'top',
                            offset: 4,
                            font: { weight: 'bold' },
                            formatter: (value) => value ? value.toFixed(1) : null // 格式化数字并隐藏0或null
                        }
                    },
                    scales: {
                        y: { beginAtZero: true, grid: { color: 'rgba(255,255,255,0.2)' }, ticks: { color: '#fff' } },
                        x: { grid: { display: false }, ticks: { color: '#fff', autoSkip: false, maxRotation: 45, minRotation: 45 } }
                    }
                }
            });
        } else {
            benchmarkChartWrapper.classList.add('hidden');
        }

const parsePrice = (priceStr) => priceStr ? parseFloat(priceStr.match(/[\d\.]+/)?.[0]) || null : null;
        const modelsWithPrice = models.filter(m => getNestedValue(m, 'apiDetails.text.input.price') || getNestedValue(m, 'apiDetails.text.output.price'));

if(modelsWithPrice.length > 0) {
            priceChartWrapper.classList.remove('hidden');
            const priceDatasets = [{
                label: '文本输入',
                data: modelsWithPrice.map(m => parsePrice(getNestedValue(m, 'apiDetails.text.input.price'))),
                backgroundColor: CHART_COLORS[0],
            }, {
                label: '文本输出',
                data: modelsWithPrice.map(m => parsePrice(getNestedValue(m, 'apiDetails.text.output.price'))),
                backgroundColor: CHART_COLORS[1],
            }];
            
            if (apiPriceChartInstance) apiPriceChartInstance.destroy();
            apiPriceChartInstance = new Chart(document.getElementById('apiPriceChart'), {
                type: 'bar',
                data: { 
                    labels: modelsWithPrice.map(m => m.pretrainedModel.model_abbr_name), 
                    datasets: priceDatasets
                },
                options: {
                    responsive: true, maintainAspectRatio: false,
                    plugins: { 
                        title: { display: true, text: 'API 定价对比 (美元/百万Tokens)', color: '#fff', font: { size: 18 }, padding: { top: 10, bottom: 20 } },
                        legend: { position: 'top', labels: { color: '#fff' } },
                        // 为价格图表配置数据显示
                        datalabels: {
                            color: '#fff',
                            anchor: 'end',
                            align: 'top',
                            font: { weight: 'bold' },
                            formatter: (value) => value ? `$${value}` : null // 格式化为价格并隐藏null
                        }
                    },
                    scales: {
                        y: { beginAtZero: true, grid: { color: 'rgba(255,255,255,0.2)' }, ticks: { color: '#fff', callback: value => `$${value}` } },
                        x: { grid: { display: false }, ticks: { color: '#fff' } }
                    }
                }
            });
        } else {
            priceChartWrapper.classList.add('hidden');
        }
    };

const renderComparisonTable = (models) => {
        if (models.length === 0) {
            container.innerHTML = `<div class="flex flex-col items-center justify-center h-64 bg-black/20 backdrop-blur-md rounded-2xl"><i class="fas fa-exclamation-circle fa-3x text-yellow-400"></i><p class="mt-4 text-xl text-white">没有可对比的模型</p></div>`;
            return;
        }
        
        const numModels = models.length;
        const gridColsClass = `grid-cols-[max-content_repeat(${numModels},minmax(120px,1fr))]`;

const headers = `
            <div class="sticky top-0 left-0 z-20 p-4 flex items-center bg-black/40 backdrop-blur-sm">
                <span class="font-bold text-lg">特性对比</span>
            </div>
            ${models.map(model => `
                <div class="sticky top-0 z-10 p-3 flex flex-col items-center justify-center space-y-2 text-center bg-black/40 backdrop-blur-sm">
                    <button class="remove-model-btn absolute top-2 right-2 text-gray-400 hover:text-white transition" data-model-code="${getNestedValue(model, 'pretrainedModel.model_code')}" title="移除该模型">
                        <i class="fas fa-times-circle"></i>
                    </button>
                    <img src="https://www.datalearner.com/${getNestedValue(model, 'pretrainedModel.aiOrganization.org_logo') || ''}" alt="${getNestedValue(model, 'pretrainedModel.model_affiliation_name')} Logo" class="w-10 h-10 rounded-lg object-contain bg-white/20 p-1">
                    <h3 class="font-bold text-base md:text-lg text-white">${getNestedValue(model, 'pretrainedModel.model_abbr_name')}</h3>
                    <p class="text-xs md:text-sm text-gray-300">${getNestedValue(model, 'pretrainedModel.model_affiliation_name')}</p>
                </div>
            `).join('')}`;

const allBenchmarkNames = [...new Set(models.flatMap(m => Object.keys(m.benchmarks)))];

container.innerHTML = `
            <div class="w-full overflow-x-auto rounded-2xl shadow-2xl border border-white/20 bg-black/20 backdrop-blur-lg custom-scrollbar">
                <div class="grid ${gridColsClass} gap-px min-w-[${200 * (numModels + 1)}px]">
                    ${headers}${rows}
                </div>
            </div>`;

container.querySelectorAll('.remove-model-btn').forEach(btn => btn.addEventListener('click', handleRemoveModel));
    };

const handleRemoveModel = (event) => {
        const modelCodeToRemove = event.currentTarget.dataset.modelCode;
        allModelsData = allModelsData.filter(m => getNestedValue(m, 'pretrainedModel.model_code') !== modelCodeToRemove);
        renderAll();
    };

const renderAll = () => {
        updatePageTitle(allModelsData);
        renderCharts(allModelsData);
        renderComparisonTable(allModelsData);
    };

const init = async () => {
        const promises = initialModelCodes.map(code => fetchModelData(code));
        const results = await Promise.all(promises);
        allModelsData = results.filter(data => data !== null);
        loadingIndicator.style.display = 'none';
        renderAll();
    };

init();
});
</script>
</body>
</html>

欢迎大家关注DataLearner官方微信，接受最新的AI技术推送

相关博客

最热博客