Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Transformers Modular Model Dependencies</title> | |
| <style> | |
| body { font-family: sans-serif; background-color: #f8f9fa; margin: 0; overflow: hidden; } | |
| svg { width: 100vw; height: 100vh; border: 1px solid #ccc; } | |
| .link { stroke: #999; stroke-opacity: 0.6; } | |
| .node-label { fill: #333; font-size: 12px; pointer-events: none; text-anchor: middle; dy: 2.5em; } | |
| .link-label { fill: #555; font-size: 10px; pointer-events: none; text-anchor: middle; } | |
| .node.base path { fill: #ffbe0b; } | |
| .node.derived circle { fill: #1f77b4; } | |
| </style> | |
| </head> | |
| <body> | |
| <svg id="dependency-graph"></svg> | |
| <script src="https://d3js.org/d3.v7.min.js"></script> | |
| <script> | |
| const graphData = { | |
| "nodes": [ | |
| { | |
| "id": "aria", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "auto", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "aya_vision", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "bamba", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "bitnet", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "blip", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "blip_2", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "chameleon", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "clip", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "cohere", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "cohere2", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "colpali", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "conditional_detr", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "csm", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "d_fine", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "data2vec", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "deepseek_v3", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "deformable_detr", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "depth_anything", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "detr", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "diffllama", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "dinov2", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "dinov2_with_registers", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "emu3", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "falcon_h1", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "gemma", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "gemma2", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "gemma3", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "glm", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "glm4", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "got_ocr2", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "gpt_neox", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "granite", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "granitemoe", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "granitemoehybrid", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "granitemoeshared", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "grounding_dino", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "helium", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "hgnet_v2", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "hubert", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "idefics", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "idefics3", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "ijepa", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "instructblip", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "instructblipvideo", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "internvl", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "jamba", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "janus", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "llama", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "llava", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "llava_next", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "llava_next_video", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "llava_onevision", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "mamba2", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "mistral", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "mistral3", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "mixtral", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "mlcd", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "modeling_attn_mask_utils", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "modernbert", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "moonshine", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "olmo", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "olmo2", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "paligemma", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "phi", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "phi3", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "phi4_multimodal", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "prompt_depth_anything", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "qwen2", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "qwen2_5_omni", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "qwen2_5_vl", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "qwen2_audio", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "qwen2_moe", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "qwen2_vl", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "qwen3", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "qwen3_moe", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "rt_detr", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "rt_detr_v2", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "sam", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "sam_hq", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "siglip", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "siglip2", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "smolvlm", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "starcoder2", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "timesfm", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "unispeech", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "unispeech_sat", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "vipllava", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "vit", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "wav2vec2", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "wav2vec2_bert", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "wav2vec2_conformer", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "wavlm", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "whisper", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "yolos", | |
| "is_base": false | |
| }, | |
| { | |
| "id": "zamba", | |
| "is_base": true | |
| }, | |
| { | |
| "id": "zamba2", | |
| "is_base": false | |
| } | |
| ], | |
| "links": [ | |
| { | |
| "source": "siglip", | |
| "target": "siglip2", | |
| "label": "16 classes" | |
| }, | |
| { | |
| "source": "llava", | |
| "target": "vipllava", | |
| "label": "5 classes" | |
| }, | |
| { | |
| "source": "modeling_attn_mask_utils", | |
| "target": "phi4_multimodal", | |
| "label": "1 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"; | |
| const width = window.innerWidth; | |
| const height = window.innerHeight; | |
| const svg = d3.select("svg#dependency-graph") | |
| .call(d3.zoom().on("zoom", (event) => { | |
| g.attr("transform", event.transform); | |
| })); | |
| const g = svg.append("g"); | |
| const simulation = d3.forceSimulation(graphData.nodes) | |
| .force("link", d3.forceLink(graphData.links).id(d => d.id).distance(250)) | |
| .force("charge", d3.forceManyBody().strength(-500)) | |
| .force("center", d3.forceCenter(width / 2, height / 2)); | |
| const link = g.append("g") | |
| .selectAll("line") | |
| .data(graphData.links) | |
| .join("line") | |
| .attr("class", "link") | |
| .attr("stroke-width", 1.5); | |
| const linkLabel = g.append("g") | |
| .selectAll("text") | |
| .data(graphData.links) | |
| .join("text") | |
| .attr("class", "link-label") | |
| .text(d => d.label); | |
| 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)); | |
| // Use custom path for base models, circle for derived | |
| node.filter(d => d.is_base).append("image") | |
| .attr("xlink:href", "hf-logo.svg") | |
| .attr("x", -20) | |
| .attr("y", -20) | |
| .attr("width", 40) | |
| .attr("height", 40); | |
| node.filter(d => !d.is_base).append("circle") | |
| .attr("r", 20); | |
| node.append("text") | |
| .attr("class", "node-label") | |
| .text(d => d.id); | |
| 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})`); | |
| }); | |
| 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> | |