modular-inheritance / index.html
Molbap's picture
Molbap HF Staff
Update index.html
043ca49 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transformers Modular Model Dependencies</title>
<style>
/* Google‑font – small fallback cost & optional */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
:root {
--base‑size: 60px; /* icon radius helper */
}
body {
font-family: 'Inter', Arial, sans-serif;
margin: 0;
overflow: hidden;
background-color: transparent; /* requested transparency */
}
svg {
width: 100vw;
height: 100vh;
}
.link {
stroke: #999;
stroke-opacity: 0.6;
}
.node-label {
fill: #333;
pointer-events: none;
text-anchor: middle;
font-weight: 600;
}
.link-label {
fill: #555;
font-size: 10px;
pointer-events: none;
text-anchor: middle;
}
.node.base path { fill: #ffbe0b; }
.node.derived circle { fill: #1f77b4; }
/* Legend styling */
#legend {
position: fixed;
top: 18px;
left: 18px;
font-size: 20px;
background: rgba(255,255,255,0.92);
padding: 18px 28px;
border-radius: 10px;
border: 1.5px solid #bbb;
font-family: 'Inter', Arial, sans-serif;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
z-index: 1000;
}
</style>
</head>
<body>
<div id="legend">🟡 base model (HF icon)<br>🔵 derived modular model<br>Edge label: #classes imported</div>
<svg id="dependency-graph"></svg>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
const graphData = {
"nodes": [
{
"id": "aria",
"is_base": false,
"size": 1.2142857142857142
},
{
"id": "auto",
"is_base": true,
"size": 1.0714285714285714
},
{
"id": "aya_vision",
"is_base": false,
"size": 1.0714285714285714
},
{
"id": "bamba",
"is_base": false,
"size": 1.2857142857142856
},
{
"id": "bitnet",
"is_base": false,
"size": 1.1428571428571428
},
{
"id": "blip",
"is_base": true,
"size": 1.0714285714285714
},
{
"id": "blip_2",
"is_base": true,
"size": 1.0714285714285714
},
{
"id": "chameleon",
"is_base": true,
"size": 1.1428571428571428
},
{
"id": "clip",
"is_base": true,
"size": 1.2142857142857142
},
{
"id": "cohere",
"is_base": false,
"size": 1.1428571428571428
},
{
"id": "cohere2",
"is_base": false,
"size": 1.1428571428571428
},
{
"id": "colpali",
"is_base": false,
"size": 1.0714285714285714
},
{
"id": "conditional_detr",
"is_base": false,
"size": 1.0714285714285714
},
{
"id": "csm",
"is_base": false,
"size": 1.0714285714285714
},
{
"id": "d_fine",
"is_base": false,
"size": 1.1428571428571428
},
{
"id": "data2vec",
"is_base": false,
"size": 1.0714285714285714
},
{
"id": "deepseek_v3",
"is_base": false,
"size": 1.0714285714285714
},
{
"id": "deformable_detr",
"is_base": false,
"size": 1.0714285714285714
},
{
"id": "depth_anything",
"is_base": true,
"size": 1.0714285714285714
},
{
"id": "detr",
"is_base": true,
"size": 1.3571428571428572
},
{
"id": "diffllama",
"is_base": false,
"size": 1.2142857142857142
},
{
"id": "dinov2",
"is_base": true,
"size": 1.0714285714285714
},
{
"id": "dinov2_with_registers",
"is_base": false,
"size": 1.0714285714285714
},
{
"id": "emu3",
"is_base": false,
"size": 1.2142857142857142
},
{
"id": "falcon_h1",
"is_base": false,
"size": 1.2142857142857142
},
{
"id": "gemma",
"is_base": false,
"size": 1.5
},
{
"id": "gemma2",
"is_base": false,
"size": 1.2142857142857142
},
{
"id": "gemma3",
"is_base": false,
"size": 1.1428571428571428
},
{
"id": "glm",
"is_base": false,
"size": 1.2857142857142856
},
{
"id": "glm4",
"is_base": false,
"size": 1.1428571428571428
},
{
"id": "got_ocr2",
"is_base": false,
"size": 1.1428571428571428
},
{
"id": "gpt_neox",
"is_base": false,
"size": 1.0714285714285714
},
{
"id": "granite",
"is_base": false,
"size": 1.1428571428571428
},
{
"id": "granitemoe",
"is_base": true,
"size": 1.0714285714285714
},
{
"id": "granitemoehybrid",
"is_base": false,
"size": 1.1428571428571428
},
{
"id": "granitemoeshared",
"is_base": false,
"size": 1.1428571428571428
},
{
"id": "grounding_dino",
"is_base": false,
"size": 1.0714285714285714
},
{
"id": "helium",
"is_base": false,
"size": 1.2142857142857142
},
{
"id": "hgnet_v2",
"is_base": false,
"size": 1.0714285714285714
},
{
"id": "hubert",
"is_base": false,
"size": 1.0714285714285714
},
{
"id": "idefics",
"is_base": true,
"size": 1.0714285714285714
},
{
"id": "idefics3",
"is_base": true,
"size": 1.0714285714285714
},
{
"id": "ijepa",
"is_base": false,
"size": 1.0714285714285714
},
{
"id": "instructblip",
"is_base": true,
"size": 1.0714285714285714
},
{
"id": "instructblipvideo",
"is_base": false,
"size": 1.1428571428571428
},
{
"id": "internvl",
"is_base": false,
"size": 1.2857142857142856
},
{
"id": "jamba",
"is_base": true,
"size": 1.1428571428571428
},
{
"id": "janus",
"is_base": false,
"size": 1.5
},
{
"id": "llama",
"is_base": true,
"size": 3.0
},
{
"id": "llava",
"is_base": true,
"size": 1.4285714285714286
},
{
"id": "llava_next",
"is_base": true,
"size": 1.2142857142857142
},
{
"id": "llava_next_video",
"is_base": false,
"size": 1.1428571428571428
},
{
"id": "llava_onevision",
"is_base": false,
"size": 1.1428571428571428
},
{
"id": "mamba2",
"is_base": true,
"size": 1.2142857142857142
},
{
"id": "mistral",
"is_base": false,
"size": 1.5714285714285714
},
{
"id": "mistral3",
"is_base": false,
"size": 1.1428571428571428
},
{
"id": "mixtral",
"is_base": false,
"size": 1.1428571428571428
},
{
"id": "mlcd",
"is_base": false,
"size": 1.2142857142857142
},
{
"id": "modernbert",
"is_base": false,
"size": 1.0714285714285714
},
{
"id": "moonshine",
"is_base": false,
"size": 1.2142857142857142
},
{
"id": "olmo",
"is_base": false,
"size": 1.1428571428571428
},
{
"id": "olmo2",
"is_base": false,
"size": 1.1428571428571428
},
{
"id": "paligemma",
"is_base": true,
"size": 1.1428571428571428
},
{
"id": "phi",
"is_base": false,
"size": 1.1428571428571428
},
{
"id": "phi3",
"is_base": false,
"size": 1.2857142857142856
},
{
"id": "phi4_multimodal",
"is_base": false,
"size": 1.2142857142857142
},
{
"id": "prompt_depth_anything",
"is_base": false,
"size": 1.0714285714285714
},
{
"id": "qwen2",
"is_base": false,
"size": 1.2142857142857142
},
{
"id": "qwen2_5_omni",
"is_base": false,
"size": 1.3571428571428572
},
{
"id": "qwen2_5_vl",
"is_base": false,
"size": 1.1428571428571428
},
{
"id": "qwen2_audio",
"is_base": true,
"size": 1.0714285714285714
},
{
"id": "qwen2_moe",
"is_base": true,
"size": 1.0714285714285714
},
{
"id": "qwen2_vl",
"is_base": true,
"size": 1.2142857142857142
},
{
"id": "qwen3",
"is_base": false,
"size": 1.2857142857142856
},
{
"id": "qwen3_moe",
"is_base": false,
"size": 1.2857142857142856
},
{
"id": "rt_detr",
"is_base": false,
"size": 1.2857142857142856
},
{
"id": "rt_detr_v2",
"is_base": false,
"size": 1.1428571428571428
},
{
"id": "sam",
"is_base": true,
"size": 1.1428571428571428
},
{
"id": "sam_hq",
"is_base": false,
"size": 1.0714285714285714
},
{
"id": "siglip",
"is_base": true,
"size": 1.2857142857142856
},
{
"id": "siglip2",
"is_base": false,
"size": 1.0714285714285714
},
{
"id": "smolvlm",
"is_base": false,
"size": 1.0714285714285714
},
{
"id": "starcoder2",
"is_base": false,
"size": 1.0714285714285714
},
{
"id": "timesfm",
"is_base": false,
"size": 1.1428571428571428
},
{
"id": "unispeech",
"is_base": false,
"size": 1.0714285714285714
},
{
"id": "unispeech_sat",
"is_base": false,
"size": 1.0714285714285714
},
{
"id": "vipllava",
"is_base": false,
"size": 1.0714285714285714
},
{
"id": "vit",
"is_base": true,
"size": 1.0714285714285714
},
{
"id": "wav2vec2",
"is_base": true,
"size": 1.5
},
{
"id": "wav2vec2_bert",
"is_base": false,
"size": 1.1428571428571428
},
{
"id": "wav2vec2_conformer",
"is_base": false,
"size": 1.1428571428571428
},
{
"id": "wavlm",
"is_base": false,
"size": 1.0714285714285714
},
{
"id": "whisper",
"is_base": true,
"size": 1.0714285714285714
},
{
"id": "yolos",
"is_base": false,
"size": 1.0714285714285714
},
{
"id": "zamba",
"is_base": true,
"size": 1.0714285714285714
},
{
"id": "zamba2",
"is_base": false,
"size": 1.2142857142857142
}
],
"links": [
{
"source": "siglip",
"target": "siglip2",
"label": "16 classes"
},
{
"source": "llava",
"target": "vipllava",
"label": "5 classes"
},
{
"source": "phi3",
"target": "phi4_multimodal",
"label": "7 classes"
},
{
"source": "siglip",
"target": "phi4_multimodal",
"label": "9 classes"
},
{
"source": "llama",
"target": "qwen3_moe",
"label": "4 classes"
},
{
"source": "mixtral",
"target": "qwen3_moe",
"label": "3 classes"
},
{
"source": "qwen2_moe",
"target": "qwen3_moe",
"label": "1 classes"
},
{
"source": "qwen3",
"target": "qwen3_moe",
"label": "1 classes"
},
{
"source": "detr",
"target": "grounding_dino",
"label": "1 classes"
},
{
"source": "llama",
"target": "deepseek_v3",
"label": "9 classes"
},
{
"source": "gemma",
"target": "helium",
"label": "3 classes"
},
{
"source": "granite",
"target": "helium",
"label": "1 classes"
},
{
"source": "llama",
"target": "helium",
"label": "5 classes"
},
{
"source": "llama",
"target": "olmo",
"label": "9 classes"
},
{
"source": "gemma",
"target": "bitnet",
"label": "1 classes"
},
{
"source": "llama",
"target": "bitnet",
"label": "7 classes"
},
{
"source": "wav2vec2",
"target": "data2vec",
"label": "11 classes"
},
{
"source": "depth_anything",
"target": "prompt_depth_anything",
"label": "7 classes"
},
{
"source": "llama",
"target": "qwen2",
"label": "10 classes"
},
{
"source": "mistral",
"target": "qwen2",
"label": "1 classes"
},
{
"source": "blip",
"target": "janus",
"label": "1 classes"
},
{
"source": "blip_2",
"target": "janus",
"label": "1 classes"
},
{
"source": "chameleon",
"target": "janus",
"label": "7 classes"
},
{
"source": "idefics",
"target": "janus",
"label": "2 classes"
},
{
"source": "llama",
"target": "janus",
"label": "1 classes"
},
{
"source": "siglip",
"target": "janus",
"label": "4 classes"
},
{
"source": "instructblip",
"target": "instructblipvideo",
"label": "9 classes"
},
{
"source": "auto",
"target": "instructblipvideo",
"label": "1 classes"
},
{
"source": "clip",
"target": "phi",
"label": "1 classes"
},
{
"source": "llama",
"target": "phi",
"label": "9 classes"
},
{
"source": "rt_detr",
"target": "rt_detr_v2",
"label": "6 classes"
},
{
"source": "llama",
"target": "mistral",
"label": "11 classes"
},
{
"source": "glm",
"target": "moonshine",
"label": "3 classes"
},
{
"source": "llama",
"target": "moonshine",
"label": "3 classes"
},
{
"source": "whisper",
"target": "moonshine",
"label": "2 classes"
},
{
"source": "llama",
"target": "zamba2",
"label": "2 classes"
},
{
"source": "mamba2",
"target": "zamba2",
"label": "3 classes"
},
{
"source": "zamba",
"target": "zamba2",
"label": "10 classes"
},
{
"source": "llama",
"target": "olmo2",
"label": "3 classes"
},
{
"source": "olmo",
"target": "olmo2",
"label": "7 classes"
},
{
"source": "gemma",
"target": "modernbert",
"label": "2 classes"
},
{
"source": "llama",
"target": "timesfm",
"label": "1 classes"
},
{
"source": "phi4_multimodal",
"target": "timesfm",
"label": "1 classes"
},
{
"source": "llama",
"target": "qwen2_5_omni",
"label": "1 classes"
},
{
"source": "qwen2",
"target": "qwen2_5_omni",
"label": "1 classes"
},
{
"source": "qwen2_5_vl",
"target": "qwen2_5_omni",
"label": "8 classes"
},
{
"source": "qwen2_audio",
"target": "qwen2_5_omni",
"label": "2 classes"
},
{
"source": "qwen2_vl",
"target": "qwen2_5_omni",
"label": "1 classes"
},
{
"source": "wav2vec2",
"target": "unispeech",
"label": "9 classes"
},
{
"source": "mistral",
"target": "phi3",
"label": "7 classes"
},
{
"source": "vit",
"target": "ijepa",
"label": "3 classes"
},
{
"source": "wav2vec2",
"target": "hubert",
"label": "7 classes"
},
{
"source": "glm",
"target": "glm4",
"label": "4 classes"
},
{
"source": "phi3",
"target": "glm4",
"label": "1 classes"
},
{
"source": "llama",
"target": "csm",
"label": "8 classes"
},
{
"source": "mistral",
"target": "mixtral",
"label": "9 classes"
},
{
"source": "llama",
"target": "gpt_neox",
"label": "4 classes"
},
{
"source": "wav2vec2",
"target": "wav2vec2_conformer",
"label": "13 classes"
},
{
"source": "clip",
"target": "internvl",
"label": "1 classes"
},
{
"source": "janus",
"target": "internvl",
"label": "1 classes"
},
{
"source": "llama",
"target": "internvl",
"label": "1 classes"
},
{
"source": "llava",
"target": "internvl",
"label": "4 classes"
},
{
"source": "mistral",
"target": "starcoder2",
"label": "10 classes"
},
{
"source": "gemma2",
"target": "gemma3",
"label": "10 classes"
},
{
"source": "paligemma",
"target": "gemma3",
"label": "4 classes"
},
{
"source": "cohere",
"target": "cohere2",
"label": "8 classes"
},
{
"source": "gemma2",
"target": "cohere2",
"label": "1 classes"
},
{
"source": "llama",
"target": "cohere",
"label": "7 classes"
},
{
"source": "sam",
"target": "sam_hq",
"label": "13 classes"
},
{
"source": "llava",
"target": "got_ocr2",
"label": "6 classes"
},
{
"source": "sam",
"target": "got_ocr2",
"label": "4 classes"
},
{
"source": "detr",
"target": "deformable_detr",
"label": "1 classes"
},
{
"source": "clip",
"target": "mlcd",
"label": "7 classes"
},
{
"source": "llama",
"target": "mlcd",
"label": "1 classes"
},
{
"source": "qwen2_vl",
"target": "mlcd",
"label": "2 classes"
},
{
"source": "llama",
"target": "granite",
"label": "5 classes"
},
{
"source": "jamba",
"target": "bamba",
"label": "1 classes"
},
{
"source": "llama",
"target": "bamba",
"label": "6 classes"
},
{
"source": "mamba2",
"target": "bamba",
"label": "4 classes"
},
{
"source": "llava_next",
"target": "llava_onevision",
"label": "1 classes"
},
{
"source": "llava_next_video",
"target": "llava_onevision",
"label": "9 classes"
},
{
"source": "gemma",
"target": "qwen3",
"label": "1 classes"
},
{
"source": "llama",
"target": "qwen3",
"label": "9 classes"
},
{
"source": "mistral",
"target": "qwen3",
"label": "1 classes"
},
{
"source": "llama",
"target": "aria",
"label": "7 classes"
},
{
"source": "llava",
"target": "aria",
"label": "4 classes"
},
{
"source": "llava_next",
"target": "aria",
"label": "1 classes"
},
{
"source": "wav2vec2",
"target": "unispeech_sat",
"label": "11 classes"
},
{
"source": "rt_detr",
"target": "hgnet_v2",
"label": "1 classes"
},
{
"source": "bamba",
"target": "granitemoehybrid",
"label": "4 classes"
},
{
"source": "granitemoeshared",
"target": "granitemoehybrid",
"label": "6 classes"
},
{
"source": "llava",
"target": "aya_vision",
"label": "5 classes"
},
{
"source": "gemma",
"target": "diffllama",
"label": "1 classes"
},
{
"source": "llama",
"target": "diffllama",
"label": "8 classes"
},
{
"source": "mistral",
"target": "diffllama",
"label": "1 classes"
},
{
"source": "wav2vec2",
"target": "wav2vec2_bert",
"label": "3 classes"
},
{
"source": "wav2vec2_conformer",
"target": "wav2vec2_bert",
"label": "6 classes"
},
{
"source": "wav2vec2",
"target": "wavlm",
"label": "9 classes"
},
{
"source": "llava",
"target": "mistral3",
"label": "6 classes"
},
{
"source": "mistral",
"target": "mistral3",
"label": "1 classes"
},
{
"source": "chameleon",
"target": "emu3",
"label": "2 classes"
},
{
"source": "llama",
"target": "emu3",
"label": "4 classes"
},
{
"source": "siglip",
"target": "emu3",
"label": "1 classes"
},
{
"source": "llama",
"target": "gemma",
"label": "5 classes"
},
{
"source": "detr",
"target": "rt_detr",
"label": "2 classes"
},
{
"source": "jamba",
"target": "falcon_h1",
"label": "1 classes"
},
{
"source": "llama",
"target": "falcon_h1",
"label": "7 classes"
},
{
"source": "mamba2",
"target": "falcon_h1",
"label": "4 classes"
},
{
"source": "detr",
"target": "yolos",
"label": "1 classes"
},
{
"source": "llama",
"target": "glm",
"label": "4 classes"
},
{
"source": "phi3",
"target": "glm",
"label": "1 classes"
},
{
"source": "gemma",
"target": "gemma2",
"label": "9 classes"
},
{
"source": "dinov2",
"target": "dinov2_with_registers",
"label": "6 classes"
},
{
"source": "detr",
"target": "conditional_detr",
"label": "1 classes"
},
{
"source": "granitemoe",
"target": "granitemoeshared",
"label": "4 classes"
},
{
"source": "qwen2_vl",
"target": "qwen2_5_vl",
"label": "15 classes"
},
{
"source": "idefics3",
"target": "smolvlm",
"label": "8 classes"
},
{
"source": "llava_next",
"target": "llava_next_video",
"label": "7 classes"
},
{
"source": "paligemma",
"target": "colpali",
"label": "3 classes"
},
{
"source": "rt_detr",
"target": "d_fine",
"label": "12 classes"
},
{
"source": "rt_detr_v2",
"target": "d_fine",
"label": "1 classes"
}
]
};
const hfLogoPath = "M21.2,6.7c-0.2-0.2-0.5-0.3-0.8-0.3H3.6C3.3,6.4,3,6.5,2.8,6.7s-0.3,0.5-0.3,0.8v10.8c0,0.3,0.1,0.5,0.3,0.8 c0.2,0.2,0.5,0.3,0.8,0.3h16.8c0.3,0,0.5-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8V7.5C21.5,7.2,21.4,6.9,21.2,6.7z M12,17.8L5.9,9.4h3.1 V8.3h6v1.1h3.1L12,17.8z"; // kept for potential future use
const width = window.innerWidth;
const height = window.innerHeight;
const svg = d3.select('#dependency-graph')
.call(
d3.zoom().on('zoom', (event) => {
g.attr('transform', event.transform);
})
);
const g = svg.append('g');
// Forces – tweaked for tighter graph
const simulation = d3.forceSimulation(graphData.nodes)
.force('link', d3.forceLink(graphData.links).id(d => d.id).distance(500))
.force('charge', d3.forceManyBody().strength(-500))
.force('center', d3.forceCenter(width / 2, height / 2))
.force('collide', d3.forceCollide(0.01 * parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--base‑size'))));
// Links
const link = g.append('g')
.selectAll('line')
.data(graphData.links)
.join('line')
.attr('class', 'link')
.attr('stroke-width', 1.5);
// Link‑labels (#classes)
const linkLabel = g.append('g')
.selectAll('text')
.data(graphData.links)
.join('text')
.attr('class', 'link-label')
.text(d => d.label);
// Nodes (base vs derived)
const node = g.append('g')
.selectAll('g')
.data(graphData.nodes)
.join('g')
.attr('class', d => d.is_base ? 'node base' : 'node derived')
.call(d3.drag()
.on('start', dragstarted)
.on('drag', dragged)
.on('end', dragended)
);
// Base‑model icon (HF logo)
node.filter(d => d.is_base)
.append('image')
.attr('xlink:href', 'hf-logo.svg')
.attr('x', -parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--base‑size')) / 2)
.attr('y', -parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--base‑size')) / 2)
.attr('width', parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--base‑size')))
.attr('height', parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--base‑size')));
// Base‑model label (below icon)
node.filter(d => d.is_base)
.append('text')
.attr('class', 'node-label')
.attr('y', d => 30 * d.size + 8) // keep under the icon
.style('font-size', d => `${26 * d.size}px`) // scale 26–78 px for size 1-3
.text(d => d.id);
// Derived‑model circle + label w/ background rect
const derived = node.filter(d => !d.is_base);
derived.append('circle')
.attr('r', d => 20 * d.size); // scaled
const labelGroup = derived.append('g').attr('class', 'label-group');
labelGroup.append('rect')
.attr('x', -45)
.attr('y', -18)
.attr('width', 90)
.attr('height', 36)
.attr('rx', 8)
.attr('fill', '#fffbe6')
.attr('stroke', '#ccc');
labelGroup.append('text')
.attr('class', 'node-label')
.attr('dy', '0.35em')
.style('font-size', '18px')
.text(d => d.id);
// Tick
simulation.on('tick', () => {
link.attr('x1', d => d.source.x)
.attr('y1', d => d.source.y)
.attr('x2', d => d.target.x)
.attr('y2', d => d.target.y);
linkLabel.attr('x', d => (d.source.x + d.target.x) / 2)
.attr('y', d => (d.source.y + d.target.y) / 2);
node.attr('transform', d => `translate(${d.x}, ${d.y})`);
});
// Drag helpers
function dragstarted(event, d) {
if (!event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x; d.fy = d.y;
}
function dragged(event, d) {
d.fx = event.x; d.fy = event.y;
}
function dragended(event, d) {
if (!event.active) simulation.alphaTarget(0);
d.fx = null; d.fy = null;
}
</script>
</body>
</html>