Hugging Face's logo

Spaces:
Molbap
/
modular-inheritance
Running

App Files Community
Molbap HF Staff commited on
Commit
043ca49
·
verified ·
1 Parent(s): d150b7e

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +356 -194
index.html CHANGED
@@ -2,411 +2,552 @@
2
  <!DOCTYPE html>
3
  <html lang="en">
4
  <head>
5
- <meta charset="UTF-8">
6
- <title>Transformers Modular Model Dependencies</title>
7
- <style>
8
- body { font-family: sans-serif; background-color: #f8f9fa; margin: 0; overflow: hidden; }
9
- svg { width: 100vw; height: 100vh; border: 1px solid #ccc; }
10
- .link { stroke: #999; stroke-opacity: 0.6; }
11
- .node-label { fill: #333; font-size: 12px; pointer-events: none; text-anchor: middle; dy: 2.5em; }
12
- .link-label { fill: #555; font-size: 10px; pointer-events: none; text-anchor: middle; }
13
- .node.base path { fill: #ffbe0b; }
14
- .node.derived circle { fill: #1f77b4; }
15
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  </head>
17
  <body>
18
- <svg id="dependency-graph"></svg>
19
- <script src="https://d3js.org/d3.v7.min.js"></script>
20
- <script>
21
- const graphData = {
 
22
  "nodes": [
23
  {
24
  "id": "aria",
25
- "is_base": false
 
26
  },
27
  {
28
  "id": "auto",
29
- "is_base": true
 
30
  },
31
  {
32
  "id": "aya_vision",
33
- "is_base": false
 
34
  },
35
  {
36
  "id": "bamba",
37
- "is_base": false
 
38
  },
39
  {
40
  "id": "bitnet",
41
- "is_base": false
 
42
  },
43
  {
44
  "id": "blip",
45
- "is_base": true
 
46
  },
47
  {
48
  "id": "blip_2",
49
- "is_base": true
 
50
  },
51
  {
52
  "id": "chameleon",
53
- "is_base": true
 
54
  },
55
  {
56
  "id": "clip",
57
- "is_base": true
 
58
  },
59
  {
60
  "id": "cohere",
61
- "is_base": false
 
62
  },
63
  {
64
  "id": "cohere2",
65
- "is_base": false
 
66
  },
67
  {
68
  "id": "colpali",
69
- "is_base": false
 
70
  },
71
  {
72
  "id": "conditional_detr",
73
- "is_base": false
 
74
  },
75
  {
76
  "id": "csm",
77
- "is_base": false
 
78
  },
79
  {
80
  "id": "d_fine",
81
- "is_base": false
 
82
  },
83
  {
84
  "id": "data2vec",
85
- "is_base": false
 
86
  },
87
  {
88
  "id": "deepseek_v3",
89
- "is_base": false
 
90
  },
91
  {
92
  "id": "deformable_detr",
93
- "is_base": false
 
94
  },
95
  {
96
  "id": "depth_anything",
97
- "is_base": true
 
98
  },
99
  {
100
  "id": "detr",
101
- "is_base": true
 
102
  },
103
  {
104
  "id": "diffllama",
105
- "is_base": false
 
106
  },
107
  {
108
  "id": "dinov2",
109
- "is_base": true
 
110
  },
111
  {
112
  "id": "dinov2_with_registers",
113
- "is_base": false
 
114
  },
115
  {
116
  "id": "emu3",
117
- "is_base": false
 
118
  },
119
  {
120
  "id": "falcon_h1",
121
- "is_base": false
 
122
  },
123
  {
124
  "id": "gemma",
125
- "is_base": false
 
126
  },
127
  {
128
  "id": "gemma2",
129
- "is_base": false
 
130
  },
131
  {
132
  "id": "gemma3",
133
- "is_base": false
 
134
  },
135
  {
136
  "id": "glm",
137
- "is_base": false
 
138
  },
139
  {
140
  "id": "glm4",
141
- "is_base": false
 
142
  },
143
  {
144
  "id": "got_ocr2",
145
- "is_base": false
 
146
  },
147
  {
148
  "id": "gpt_neox",
149
- "is_base": false
 
150
  },
151
  {
152
  "id": "granite",
153
- "is_base": false
 
154
  },
155
  {
156
  "id": "granitemoe",
157
- "is_base": true
 
158
  },
159
  {
160
  "id": "granitemoehybrid",
161
- "is_base": false
 
162
  },
163
  {
164
  "id": "granitemoeshared",
165
- "is_base": false
 
166
  },
167
  {
168
  "id": "grounding_dino",
169
- "is_base": false
 
170
  },
171
  {
172
  "id": "helium",
173
- "is_base": false
 
174
  },
175
  {
176
  "id": "hgnet_v2",
177
- "is_base": false
 
178
  },
179
  {
180
  "id": "hubert",
181
- "is_base": false
 
182
  },
183
  {
184
  "id": "idefics",
185
- "is_base": true
 
186
  },
187
  {
188
  "id": "idefics3",
189
- "is_base": true
 
190
  },
191
  {
192
  "id": "ijepa",
193
- "is_base": false
 
194
  },
195
  {
196
  "id": "instructblip",
197
- "is_base": true
 
198
  },
199
  {
200
  "id": "instructblipvideo",
201
- "is_base": false
 
202
  },
203
  {
204
  "id": "internvl",
205
- "is_base": false
 
206
  },
207
  {
208
  "id": "jamba",
209
- "is_base": true
 
210
  },
211
  {
212
  "id": "janus",
213
- "is_base": false
 
214
  },
215
  {
216
  "id": "llama",
217
- "is_base": true
 
218
  },
219
  {
220
  "id": "llava",
221
- "is_base": true
 
222
  },
223
  {
224
  "id": "llava_next",
225
- "is_base": true
 
226
  },
227
  {
228
  "id": "llava_next_video",
229
- "is_base": false
 
230
  },
231
  {
232
  "id": "llava_onevision",
233
- "is_base": false
 
234
  },
235
  {
236
  "id": "mamba2",
237
- "is_base": true
 
238
  },
239
  {
240
  "id": "mistral",
241
- "is_base": false
 
242
  },
243
  {
244
  "id": "mistral3",
245
- "is_base": false
 
246
  },
247
  {
248
  "id": "mixtral",
249
- "is_base": false
 
250
  },
251
  {
252
  "id": "mlcd",
253
- "is_base": false
254
- },
255
- {
256
- "id": "modeling_attn_mask_utils",
257
- "is_base": true
258
  },
259
  {
260
  "id": "modernbert",
261
- "is_base": false
 
262
  },
263
  {
264
  "id": "moonshine",
265
- "is_base": false
 
266
  },
267
  {
268
  "id": "olmo",
269
- "is_base": false
 
270
  },
271
  {
272
  "id": "olmo2",
273
- "is_base": false
 
274
  },
275
  {
276
  "id": "paligemma",
277
- "is_base": true
 
278
  },
279
  {
280
  "id": "phi",
281
- "is_base": false
 
282
  },
283
  {
284
  "id": "phi3",
285
- "is_base": false
 
286
  },
287
  {
288
  "id": "phi4_multimodal",
289
- "is_base": false
 
290
  },
291
  {
292
  "id": "prompt_depth_anything",
293
- "is_base": false
 
294
  },
295
  {
296
  "id": "qwen2",
297
- "is_base": false
 
298
  },
299
  {
300
  "id": "qwen2_5_omni",
301
- "is_base": false
 
302
  },
303
  {
304
  "id": "qwen2_5_vl",
305
- "is_base": false
 
306
  },
307
  {
308
  "id": "qwen2_audio",
309
- "is_base": true
 
310
  },
311
  {
312
  "id": "qwen2_moe",
313
- "is_base": true
 
314
  },
315
  {
316
  "id": "qwen2_vl",
317
- "is_base": true
 
318
  },
319
  {
320
  "id": "qwen3",
321
- "is_base": false
 
322
  },
323
  {
324
  "id": "qwen3_moe",
325
- "is_base": false
 
326
  },
327
  {
328
  "id": "rt_detr",
329
- "is_base": false
 
330
  },
331
  {
332
  "id": "rt_detr_v2",
333
- "is_base": false
 
334
  },
335
  {
336
  "id": "sam",
337
- "is_base": true
 
338
  },
339
  {
340
  "id": "sam_hq",
341
- "is_base": false
 
342
  },
343
  {
344
  "id": "siglip",
345
- "is_base": true
 
346
  },
347
  {
348
  "id": "siglip2",
349
- "is_base": false
 
350
  },
351
  {
352
  "id": "smolvlm",
353
- "is_base": false
 
354
  },
355
  {
356
  "id": "starcoder2",
357
- "is_base": false
 
358
  },
359
  {
360
  "id": "timesfm",
361
- "is_base": false
 
362
  },
363
  {
364
  "id": "unispeech",
365
- "is_base": false
 
366
  },
367
  {
368
  "id": "unispeech_sat",
369
- "is_base": false
 
370
  },
371
  {
372
  "id": "vipllava",
373
- "is_base": false
 
374
  },
375
  {
376
  "id": "vit",
377
- "is_base": true
 
378
  },
379
  {
380
  "id": "wav2vec2",
381
- "is_base": true
 
382
  },
383
  {
384
  "id": "wav2vec2_bert",
385
- "is_base": false
 
386
  },
387
  {
388
  "id": "wav2vec2_conformer",
389
- "is_base": false
 
390
  },
391
  {
392
  "id": "wavlm",
393
- "is_base": false
 
394
  },
395
  {
396
  "id": "whisper",
397
- "is_base": true
 
398
  },
399
  {
400
  "id": "yolos",
401
- "is_base": false
 
402
  },
403
  {
404
  "id": "zamba",
405
- "is_base": true
 
406
  },
407
  {
408
  "id": "zamba2",
409
- "is_base": false
 
410
  }
411
  ],
412
  "links": [
@@ -420,11 +561,6 @@
420
  "target": "vipllava",
421
  "label": "5 classes"
422
  },
423
- {
424
- "source": "modeling_attn_mask_utils",
425
- "target": "phi4_multimodal",
426
- "label": "1 classes"
427
- },
428
  {
429
  "source": "phi3",
430
  "target": "phi4_multimodal",
@@ -1022,92 +1158,118 @@
1022
  }
1023
  ]
1024
  };
1025
- 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";
1026
 
1027
- const width = window.innerWidth;
1028
- const height = window.innerHeight;
1029
 
1030
- const svg = d3.select("svg#dependency-graph")
1031
- .call(d3.zoom().on("zoom", (event) => {
1032
- g.attr("transform", event.transform);
1033
- }));
 
 
1034
 
1035
- const g = svg.append("g");
1036
 
1037
- const simulation = d3.forceSimulation(graphData.nodes)
1038
- .force("link", d3.forceLink(graphData.links).id(d => d.id).distance(250))
1039
- .force("charge", d3.forceManyBody().strength(-500))
1040
- .force("center", d3.forceCenter(width / 2, height / 2));
 
 
1041
 
1042
- const link = g.append("g")
1043
- .selectAll("line")
1044
- .data(graphData.links)
1045
- .join("line")
1046
- .attr("class", "link")
1047
- .attr("stroke-width", 1.5);
 
1048
 
1049
- const linkLabel = g.append("g")
1050
- .selectAll("text")
1051
- .data(graphData.links)
1052
- .join("text")
1053
- .attr("class", "link-label")
1054
- .text(d => d.label);
 
1055
 
1056
- const node = g.append("g")
1057
- .selectAll("g")
1058
- .data(graphData.nodes)
1059
- .join("g")
1060
- .attr("class", d => d.is_base ? "node base" : "node derived")
1061
- .call(d3.drag()
1062
- .on("start", dragstarted)
1063
- .on("drag", dragged)
1064
- .on("end", dragended));
1065
-
1066
- // Use custom path for base models, circle for derived
1067
- node.filter(d => d.is_base).append("image")
1068
- .attr("xlink:href", "hf-logo.svg")
1069
- .attr("x", -20)
1070
- .attr("y", -20)
1071
- .attr("width", 40)
1072
- .attr("height", 40);
1073
-
1074
- node.filter(d => !d.is_base).append("circle")
1075
- .attr("r", 20);
1076
 
1077
- node.append("text")
1078
- .attr("class", "node-label")
1079
- .text(d => d.id);
 
 
 
 
 
1080
 
1081
- simulation.on("tick", () => {
1082
- link
1083
- .attr("x1", d => d.source.x)
1084
- .attr("y1", d => d.source.y)
1085
- .attr("x2", d => d.target.x)
1086
- .attr("y2", d => d.target.y);
1087
-
1088
- linkLabel
1089
- .attr("x", d => (d.source.x + d.target.x) / 2)
1090
- .attr("y", d => (d.source.y + d.target.y) / 2);
1091
 
1092
- node.attr("transform", d => `translate(${d.x}, ${d.y})`);
1093
- });
1094
 
1095
- function dragstarted(event, d) {
1096
- if (!event.active) simulation.alphaTarget(0.3).restart();
1097
- d.fx = d.x;
1098
- d.fy = d.y;
1099
- }
1100
 
1101
- function dragged(event, d) {
1102
- d.fx = event.x;
1103
- d.fy = event.y;
1104
- }
 
 
 
 
 
 
 
 
 
 
1105
 
1106
- function dragended(event, d) {
1107
- if (!event.active) simulation.alphaTarget(0);
1108
- d.fx = null;
1109
- d.fy = null;
1110
- }
1111
- </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1112
  </body>
1113
  </html>
 
2
  <!DOCTYPE html>
3
  <html lang="en">
4
  <head>
5
+ <meta charset="UTF-8">
6
+ <title>Transformers Modular Model Dependencies</title>
7
+ <style>
8
+ /* Google‑font – small fallback cost & optional */
9
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
10
+
11
+ :root {
12
+ --base‑size: 60px; /* icon radius helper */
13
+ }
14
+
15
+ body {
16
+ font-family: 'Inter', Arial, sans-serif;
17
+ margin: 0;
18
+ overflow: hidden;
19
+ background-color: transparent; /* requested transparency */
20
+ }
21
+
22
+ svg {
23
+ width: 100vw;
24
+ height: 100vh;
25
+ }
26
+
27
+ .link {
28
+ stroke: #999;
29
+ stroke-opacity: 0.6;
30
+ }
31
+
32
+ .node-label {
33
+ fill: #333;
34
+ pointer-events: none;
35
+ text-anchor: middle;
36
+ font-weight: 600;
37
+ }
38
+
39
+ .link-label {
40
+ fill: #555;
41
+ font-size: 10px;
42
+ pointer-events: none;
43
+ text-anchor: middle;
44
+ }
45
+
46
+ .node.base path { fill: #ffbe0b; }
47
+ .node.derived circle { fill: #1f77b4; }
48
+
49
+ /* Legend styling */
50
+ #legend {
51
+ position: fixed;
52
+ top: 18px;
53
+ left: 18px;
54
+ font-size: 20px;
55
+ background: rgba(255,255,255,0.92);
56
+ padding: 18px 28px;
57
+ border-radius: 10px;
58
+ border: 1.5px solid #bbb;
59
+ font-family: 'Inter', Arial, sans-serif;
60
+ box-shadow: 0 2px 8px rgba(0,0,0,0.08);
61
+ z-index: 1000;
62
+ }
63
+ </style>
64
  </head>
65
  <body>
66
+ <div id="legend">🟡 base model (HF icon)<br>🔵 derived modular model<br>Edge label: #classes imported</div>
67
+ <svg id="dependency-graph"></svg>
68
+ <script src="https://d3js.org/d3.v7.min.js"></script>
69
+ <script>
70
+ const graphData = {
71
  "nodes": [
72
  {
73
  "id": "aria",
74
+ "is_base": false,
75
+ "size": 1.2142857142857142
76
  },
77
  {
78
  "id": "auto",
79
+ "is_base": true,
80
+ "size": 1.0714285714285714
81
  },
82
  {
83
  "id": "aya_vision",
84
+ "is_base": false,
85
+ "size": 1.0714285714285714
86
  },
87
  {
88
  "id": "bamba",
89
+ "is_base": false,
90
+ "size": 1.2857142857142856
91
  },
92
  {
93
  "id": "bitnet",
94
+ "is_base": false,
95
+ "size": 1.1428571428571428
96
  },
97
  {
98
  "id": "blip",
99
+ "is_base": true,
100
+ "size": 1.0714285714285714
101
  },
102
  {
103
  "id": "blip_2",
104
+ "is_base": true,
105
+ "size": 1.0714285714285714
106
  },
107
  {
108
  "id": "chameleon",
109
+ "is_base": true,
110
+ "size": 1.1428571428571428
111
  },
112
  {
113
  "id": "clip",
114
+ "is_base": true,
115
+ "size": 1.2142857142857142
116
  },
117
  {
118
  "id": "cohere",
119
+ "is_base": false,
120
+ "size": 1.1428571428571428
121
  },
122
  {
123
  "id": "cohere2",
124
+ "is_base": false,
125
+ "size": 1.1428571428571428
126
  },
127
  {
128
  "id": "colpali",
129
+ "is_base": false,
130
+ "size": 1.0714285714285714
131
  },
132
  {
133
  "id": "conditional_detr",
134
+ "is_base": false,
135
+ "size": 1.0714285714285714
136
  },
137
  {
138
  "id": "csm",
139
+ "is_base": false,
140
+ "size": 1.0714285714285714
141
  },
142
  {
143
  "id": "d_fine",
144
+ "is_base": false,
145
+ "size": 1.1428571428571428
146
  },
147
  {
148
  "id": "data2vec",
149
+ "is_base": false,
150
+ "size": 1.0714285714285714
151
  },
152
  {
153
  "id": "deepseek_v3",
154
+ "is_base": false,
155
+ "size": 1.0714285714285714
156
  },
157
  {
158
  "id": "deformable_detr",
159
+ "is_base": false,
160
+ "size": 1.0714285714285714
161
  },
162
  {
163
  "id": "depth_anything",
164
+ "is_base": true,
165
+ "size": 1.0714285714285714
166
  },
167
  {
168
  "id": "detr",
169
+ "is_base": true,
170
+ "size": 1.3571428571428572
171
  },
172
  {
173
  "id": "diffllama",
174
+ "is_base": false,
175
+ "size": 1.2142857142857142
176
  },
177
  {
178
  "id": "dinov2",
179
+ "is_base": true,
180
+ "size": 1.0714285714285714
181
  },
182
  {
183
  "id": "dinov2_with_registers",
184
+ "is_base": false,
185
+ "size": 1.0714285714285714
186
  },
187
  {
188
  "id": "emu3",
189
+ "is_base": false,
190
+ "size": 1.2142857142857142
191
  },
192
  {
193
  "id": "falcon_h1",
194
+ "is_base": false,
195
+ "size": 1.2142857142857142
196
  },
197
  {
198
  "id": "gemma",
199
+ "is_base": false,
200
+ "size": 1.5
201
  },
202
  {
203
  "id": "gemma2",
204
+ "is_base": false,
205
+ "size": 1.2142857142857142
206
  },
207
  {
208
  "id": "gemma3",
209
+ "is_base": false,
210
+ "size": 1.1428571428571428
211
  },
212
  {
213
  "id": "glm",
214
+ "is_base": false,
215
+ "size": 1.2857142857142856
216
  },
217
  {
218
  "id": "glm4",
219
+ "is_base": false,
220
+ "size": 1.1428571428571428
221
  },
222
  {
223
  "id": "got_ocr2",
224
+ "is_base": false,
225
+ "size": 1.1428571428571428
226
  },
227
  {
228
  "id": "gpt_neox",
229
+ "is_base": false,
230
+ "size": 1.0714285714285714
231
  },
232
  {
233
  "id": "granite",
234
+ "is_base": false,
235
+ "size": 1.1428571428571428
236
  },
237
  {
238
  "id": "granitemoe",
239
+ "is_base": true,
240
+ "size": 1.0714285714285714
241
  },
242
  {
243
  "id": "granitemoehybrid",
244
+ "is_base": false,
245
+ "size": 1.1428571428571428
246
  },
247
  {
248
  "id": "granitemoeshared",
249
+ "is_base": false,
250
+ "size": 1.1428571428571428
251
  },
252
  {
253
  "id": "grounding_dino",
254
+ "is_base": false,
255
+ "size": 1.0714285714285714
256
  },
257
  {
258
  "id": "helium",
259
+ "is_base": false,
260
+ "size": 1.2142857142857142
261
  },
262
  {
263
  "id": "hgnet_v2",
264
+ "is_base": false,
265
+ "size": 1.0714285714285714
266
  },
267
  {
268
  "id": "hubert",
269
+ "is_base": false,
270
+ "size": 1.0714285714285714
271
  },
272
  {
273
  "id": "idefics",
274
+ "is_base": true,
275
+ "size": 1.0714285714285714
276
  },
277
  {
278
  "id": "idefics3",
279
+ "is_base": true,
280
+ "size": 1.0714285714285714
281
  },
282
  {
283
  "id": "ijepa",
284
+ "is_base": false,
285
+ "size": 1.0714285714285714
286
  },
287
  {
288
  "id": "instructblip",
289
+ "is_base": true,
290
+ "size": 1.0714285714285714
291
  },
292
  {
293
  "id": "instructblipvideo",
294
+ "is_base": false,
295
+ "size": 1.1428571428571428
296
  },
297
  {
298
  "id": "internvl",
299
+ "is_base": false,
300
+ "size": 1.2857142857142856
301
  },
302
  {
303
  "id": "jamba",
304
+ "is_base": true,
305
+ "size": 1.1428571428571428
306
  },
307
  {
308
  "id": "janus",
309
+ "is_base": false,
310
+ "size": 1.5
311
  },
312
  {
313
  "id": "llama",
314
+ "is_base": true,
315
+ "size": 3.0
316
  },
317
  {
318
  "id": "llava",
319
+ "is_base": true,
320
+ "size": 1.4285714285714286
321
  },
322
  {
323
  "id": "llava_next",
324
+ "is_base": true,
325
+ "size": 1.2142857142857142
326
  },
327
  {
328
  "id": "llava_next_video",
329
+ "is_base": false,
330
+ "size": 1.1428571428571428
331
  },
332
  {
333
  "id": "llava_onevision",
334
+ "is_base": false,
335
+ "size": 1.1428571428571428
336
  },
337
  {
338
  "id": "mamba2",
339
+ "is_base": true,
340
+ "size": 1.2142857142857142
341
  },
342
  {
343
  "id": "mistral",
344
+ "is_base": false,
345
+ "size": 1.5714285714285714
346
  },
347
  {
348
  "id": "mistral3",
349
+ "is_base": false,
350
+ "size": 1.1428571428571428
351
  },
352
  {
353
  "id": "mixtral",
354
+ "is_base": false,
355
+ "size": 1.1428571428571428
356
  },
357
  {
358
  "id": "mlcd",
359
+ "is_base": false,
360
+ "size": 1.2142857142857142
 
 
 
361
  },
362
  {
363
  "id": "modernbert",
364
+ "is_base": false,
365
+ "size": 1.0714285714285714
366
  },
367
  {
368
  "id": "moonshine",
369
+ "is_base": false,
370
+ "size": 1.2142857142857142
371
  },
372
  {
373
  "id": "olmo",
374
+ "is_base": false,
375
+ "size": 1.1428571428571428
376
  },
377
  {
378
  "id": "olmo2",
379
+ "is_base": false,
380
+ "size": 1.1428571428571428
381
  },
382
  {
383
  "id": "paligemma",
384
+ "is_base": true,
385
+ "size": 1.1428571428571428
386
  },
387
  {
388
  "id": "phi",
389
+ "is_base": false,
390
+ "size": 1.1428571428571428
391
  },
392
  {
393
  "id": "phi3",
394
+ "is_base": false,
395
+ "size": 1.2857142857142856
396
  },
397
  {
398
  "id": "phi4_multimodal",
399
+ "is_base": false,
400
+ "size": 1.2142857142857142
401
  },
402
  {
403
  "id": "prompt_depth_anything",
404
+ "is_base": false,
405
+ "size": 1.0714285714285714
406
  },
407
  {
408
  "id": "qwen2",
409
+ "is_base": false,
410
+ "size": 1.2142857142857142
411
  },
412
  {
413
  "id": "qwen2_5_omni",
414
+ "is_base": false,
415
+ "size": 1.3571428571428572
416
  },
417
  {
418
  "id": "qwen2_5_vl",
419
+ "is_base": false,
420
+ "size": 1.1428571428571428
421
  },
422
  {
423
  "id": "qwen2_audio",
424
+ "is_base": true,
425
+ "size": 1.0714285714285714
426
  },
427
  {
428
  "id": "qwen2_moe",
429
+ "is_base": true,
430
+ "size": 1.0714285714285714
431
  },
432
  {
433
  "id": "qwen2_vl",
434
+ "is_base": true,
435
+ "size": 1.2142857142857142
436
  },
437
  {
438
  "id": "qwen3",
439
+ "is_base": false,
440
+ "size": 1.2857142857142856
441
  },
442
  {
443
  "id": "qwen3_moe",
444
+ "is_base": false,
445
+ "size": 1.2857142857142856
446
  },
447
  {
448
  "id": "rt_detr",
449
+ "is_base": false,
450
+ "size": 1.2857142857142856
451
  },
452
  {
453
  "id": "rt_detr_v2",
454
+ "is_base": false,
455
+ "size": 1.1428571428571428
456
  },
457
  {
458
  "id": "sam",
459
+ "is_base": true,
460
+ "size": 1.1428571428571428
461
  },
462
  {
463
  "id": "sam_hq",
464
+ "is_base": false,
465
+ "size": 1.0714285714285714
466
  },
467
  {
468
  "id": "siglip",
469
+ "is_base": true,
470
+ "size": 1.2857142857142856
471
  },
472
  {
473
  "id": "siglip2",
474
+ "is_base": false,
475
+ "size": 1.0714285714285714
476
  },
477
  {
478
  "id": "smolvlm",
479
+ "is_base": false,
480
+ "size": 1.0714285714285714
481
  },
482
  {
483
  "id": "starcoder2",
484
+ "is_base": false,
485
+ "size": 1.0714285714285714
486
  },
487
  {
488
  "id": "timesfm",
489
+ "is_base": false,
490
+ "size": 1.1428571428571428
491
  },
492
  {
493
  "id": "unispeech",
494
+ "is_base": false,
495
+ "size": 1.0714285714285714
496
  },
497
  {
498
  "id": "unispeech_sat",
499
+ "is_base": false,
500
+ "size": 1.0714285714285714
501
  },
502
  {
503
  "id": "vipllava",
504
+ "is_base": false,
505
+ "size": 1.0714285714285714
506
  },
507
  {
508
  "id": "vit",
509
+ "is_base": true,
510
+ "size": 1.0714285714285714
511
  },
512
  {
513
  "id": "wav2vec2",
514
+ "is_base": true,
515
+ "size": 1.5
516
  },
517
  {
518
  "id": "wav2vec2_bert",
519
+ "is_base": false,
520
+ "size": 1.1428571428571428
521
  },
522
  {
523
  "id": "wav2vec2_conformer",
524
+ "is_base": false,
525
+ "size": 1.1428571428571428
526
  },
527
  {
528
  "id": "wavlm",
529
+ "is_base": false,
530
+ "size": 1.0714285714285714
531
  },
532
  {
533
  "id": "whisper",
534
+ "is_base": true,
535
+ "size": 1.0714285714285714
536
  },
537
  {
538
  "id": "yolos",
539
+ "is_base": false,
540
+ "size": 1.0714285714285714
541
  },
542
  {
543
  "id": "zamba",
544
+ "is_base": true,
545
+ "size": 1.0714285714285714
546
  },
547
  {
548
  "id": "zamba2",
549
+ "is_base": false,
550
+ "size": 1.2142857142857142
551
  }
552
  ],
553
  "links": [
 
561
  "target": "vipllava",
562
  "label": "5 classes"
563
  },
 
 
 
 
 
564
  {
565
  "source": "phi3",
566
  "target": "phi4_multimodal",
 
1158
  }
1159
  ]
1160
  };
1161
+ 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
1162
 
1163
+ const width = window.innerWidth;
1164
+ const height = window.innerHeight;
1165
 
1166
+ const svg = d3.select('#dependency-graph')
1167
+ .call(
1168
+ d3.zoom().on('zoom', (event) => {
1169
+ g.attr('transform', event.transform);
1170
+ })
1171
+ );
1172
 
1173
+ const g = svg.append('g');
1174
 
1175
+ // Forces – tweaked for tighter graph
1176
+ const simulation = d3.forceSimulation(graphData.nodes)
1177
+ .force('link', d3.forceLink(graphData.links).id(d => d.id).distance(500))
1178
+ .force('charge', d3.forceManyBody().strength(-500))
1179
+ .force('center', d3.forceCenter(width / 2, height / 2))
1180
+ .force('collide', d3.forceCollide(0.01 * parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--base‑size'))));
1181
 
1182
+ // Links
1183
+ const link = g.append('g')
1184
+ .selectAll('line')
1185
+ .data(graphData.links)
1186
+ .join('line')
1187
+ .attr('class', 'link')
1188
+ .attr('stroke-width', 1.5);
1189
 
1190
+ // Link‑labels (#classes)
1191
+ const linkLabel = g.append('g')
1192
+ .selectAll('text')
1193
+ .data(graphData.links)
1194
+ .join('text')
1195
+ .attr('class', 'link-label')
1196
+ .text(d => d.label);
1197
 
1198
+ // Nodes (base vs derived)
1199
+ const node = g.append('g')
1200
+ .selectAll('g')
1201
+ .data(graphData.nodes)
1202
+ .join('g')
1203
+ .attr('class', d => d.is_base ? 'node base' : 'node derived')
1204
+ .call(d3.drag()
1205
+ .on('start', dragstarted)
1206
+ .on('drag', dragged)
1207
+ .on('end', dragended)
1208
+ );
 
 
 
 
 
 
 
 
 
1209
 
1210
+ // Base‑model icon (HF logo)
1211
+ node.filter(d => d.is_base)
1212
+ .append('image')
1213
+ .attr('xlink:href', 'hf-logo.svg')
1214
+ .attr('x', -parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--base‑size')) / 2)
1215
+ .attr('y', -parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--base‑size')) / 2)
1216
+ .attr('width', parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--base‑size')))
1217
+ .attr('height', parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--base‑size')));
1218
 
1219
+ // Base‑model label (below icon)
1220
+ node.filter(d => d.is_base)
1221
+ .append('text')
1222
+ .attr('class', 'node-label')
1223
+ .attr('y', d => 30 * d.size + 8) // keep under the icon
1224
+ .style('font-size', d => `${26 * d.size}px`) // scale 26–78 px for size 1-3
1225
+ .text(d => d.id);
 
 
 
1226
 
1227
+ // Derived‑model circle + label w/ background rect
1228
+ const derived = node.filter(d => !d.is_base);
1229
 
1230
+ derived.append('circle')
1231
+ .attr('r', d => 20 * d.size); // scaled
 
 
 
1232
 
1233
+ const labelGroup = derived.append('g').attr('class', 'label-group');
1234
+ labelGroup.append('rect')
1235
+ .attr('x', -45)
1236
+ .attr('y', -18)
1237
+ .attr('width', 90)
1238
+ .attr('height', 36)
1239
+ .attr('rx', 8)
1240
+ .attr('fill', '#fffbe6')
1241
+ .attr('stroke', '#ccc');
1242
+ labelGroup.append('text')
1243
+ .attr('class', 'node-label')
1244
+ .attr('dy', '0.35em')
1245
+ .style('font-size', '18px')
1246
+ .text(d => d.id);
1247
 
1248
+ // Tick
1249
+ simulation.on('tick', () => {
1250
+ link.attr('x1', d => d.source.x)
1251
+ .attr('y1', d => d.source.y)
1252
+ .attr('x2', d => d.target.x)
1253
+ .attr('y2', d => d.target.y);
1254
+
1255
+ linkLabel.attr('x', d => (d.source.x + d.target.x) / 2)
1256
+ .attr('y', d => (d.source.y + d.target.y) / 2);
1257
+
1258
+ node.attr('transform', d => `translate(${d.x}, ${d.y})`);
1259
+ });
1260
+
1261
+ // Drag helpers
1262
+ function dragstarted(event, d) {
1263
+ if (!event.active) simulation.alphaTarget(0.3).restart();
1264
+ d.fx = d.x; d.fy = d.y;
1265
+ }
1266
+ function dragged(event, d) {
1267
+ d.fx = event.x; d.fy = event.y;
1268
+ }
1269
+ function dragended(event, d) {
1270
+ if (!event.active) simulation.alphaTarget(0);
1271
+ d.fx = null; d.fy = null;
1272
+ }
1273
+ </script>
1274
  </body>
1275
  </html>