Spaces:
Running
Running
<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> | |