Skip to content

Commit 7cc0273

Browse files
hmthanhhmthanh
committed
update diagram
1 parent 440359f commit 7cc0273

5 files changed

Lines changed: 631 additions & 0 deletions

File tree

‎app/(taxonomy)/transformer/deepseekdiagram.jsx‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import { useRef, useEffect } from "react"
2+
import * as d3 from "d3"
3+
4+
const TaxonomyDiagram = ({ data }) => {
5+
const svgRef = useRef()
6+
7+
useEffect(() => {
8+
if (!data || !svgRef.current) return
9+
10+
// Setup dimensions and margins
11+
const width = 1200
12+
const height = 800
13+
const margin = { top: 20, right: 200, bottom: 20, left: 50 }
14+
15+
// Clear previous SVG content
16+
const svg = d3.select(svgRef.current)
17+
svg.selectAll("*").remove()
18+
19+
// Create main SVG group
20+
const g = svg.attr("width", width).attr("height", height).append("g").attr("transform", `translate(${margin.left},${margin.top})`)
21+
22+
// Create hierarchy from data
23+
const root = d3.hierarchy(data)
24+
const treeWidth = width - margin.left - margin.right
25+
const treeHeight = height - margin.top - margin.bottom
26+
27+
// Create tree layout (right-to-left orientation)
28+
const tree = d3.tree().size([treeHeight, treeWidth]).nodeSize([60, 180])(root)
29+
30+
// Draw links (reverse direction)
31+
const links = g
32+
.selectAll(".link")
33+
.data(root.links())
34+
.enter()
35+
.append("path")
36+
.attr("class", "link")
37+
.attr(
38+
"d",
39+
d3
40+
.linkHorizontal()
41+
.x((d) => treeWidth - d.y)
42+
.y((d) => d.x)
43+
)
44+
.attr("fill", "none")
45+
.attr("stroke", "#555")
46+
.attr("stroke-opacity", 0.4)
47+
.attr("stroke-width", 1.5)
48+
49+
// Create node groups
50+
const nodes = g
51+
.selectAll(".node")
52+
.data(root.descendants())
53+
.enter()
54+
.append("g")
55+
.attr("class", (d) => `node ${d.children ? "node--internal" : "node--leaf"}`)
56+
.attr("transform", (d) => `translate(${treeWidth - d.y},${d.x})`)
57+
58+
// Add circles to nodes
59+
nodes
60+
.append("circle")
61+
.attr("r", 4)
62+
.attr("fill", (d) => (d.depth === 0 ? "#555" : d.depth === 1 ? "#888" : d.depth === 2 ? "#aaa" : "#ccc"))
63+
64+
// Add text labels
65+
nodes
66+
.append("text")
67+
.attr("dy", (d) => (d.children ? -12 : 12))
68+
.attr("dx", (d) => (d.children ? -6 : 6))
69+
.attr("text-anchor", (d) => (d.children ? "end" : "start"))
70+
.text((d) => d.data.name)
71+
.style("font-size", (d) => {
72+
if (d.depth === 0) return "16px"
73+
if (d.depth === 1) return "12px"
74+
return "10px"
75+
})
76+
.style("fill", "#333")
77+
78+
// Add detailed leaf content
79+
nodes
80+
.filter((d) => d.data.leaf)
81+
.append("foreignObject")
82+
.attr("width", (d) => d.data.width || 200)
83+
.attr("height", (d) => d.data.height || 100)
84+
.attr("x", 10)
85+
.attr("y", -10)
86+
.html(
87+
(d) => `
88+
<div style="
89+
font-size: 9px;
90+
line-height: 1.2;
91+
padding: 4px;
92+
background: #f8f8f8;
93+
border-radius: 4px;
94+
border: 1px solid #eee;
95+
">
96+
${d.data.content}
97+
</div>
98+
`
99+
)
100+
}, [data])
101+
102+
return <svg ref={svgRef} style={{ display: "block", margin: "0 auto" }} />
103+
}
104+
105+
export default TaxonomyDiagram

‎app/(taxonomy)/transformer/grokdiagram.jsx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { useEffect, useRef } from "react"
2+
import * as d3 from "d3"
3+
4+
const GrokTaxonomyTree = ({ taxonomyData }) => {
5+
const svgRef = useRef(null)
6+
7+
useEffect(() => {
8+
const width = 1600
9+
const height = 1200
10+
const margin = { top: 20, right: 300, bottom: 20, left: 100 }
11+
12+
// Create tree layout (horizontal)
13+
const tree = d3.tree().size([height - margin.top - margin.bottom, width - margin.left - margin.right])
14+
const root = d3.hierarchy(taxonomyData)
15+
tree(root)
16+
17+
// Clear previous SVG content
18+
d3.select(svgRef.current).selectAll("*").remove()
19+
20+
// Create SVG
21+
const svg = d3.select(svgRef.current).attr("width", width).attr("height", height).append("g").attr("transform", `translate(${margin.left},${margin.top})`)
22+
23+
// Draw links
24+
svg
25+
.selectAll(".link")
26+
.data(root.links())
27+
.enter()
28+
.append("path")
29+
.attr("class", "link")
30+
.attr(
31+
"d",
32+
d3
33+
.linkHorizontal()
34+
.x((d) => d.y)
35+
.y((d) => d.x)
36+
)
37+
.attr("fill", "none")
38+
.attr("stroke", "#555")
39+
.attr("stroke-width", "1.5px")
40+
41+
// Draw nodes
42+
const node = svg
43+
.selectAll(".node")
44+
.data(root.descendants())
45+
.enter()
46+
.append("g")
47+
.attr("class", "node")
48+
.attr("transform", (d) => `translate(${d.y},${d.x})`)
49+
50+
// Add circles to nodes
51+
node
52+
.append("circle")
53+
.attr("r", 5)
54+
.attr("fill", (d) => (d.data.isLeaf ? "#69b3a2" : "#999"))
55+
56+
// Add text labels with multi-line support
57+
node
58+
.append("text")
59+
.attr("dy", (d) => (d.data.isLeaf ? 4 : -10))
60+
.attr("x", (d) => (d.data.isLeaf ? 10 : -10))
61+
.style("text-anchor", (d) => (d.data.isLeaf ? "start" : "end"))
62+
.style("font-size", "12px")
63+
.each(function (d) {
64+
const lines = d.data.name.split("\\\\")
65+
const text = d3.select(this)
66+
lines.forEach((line, i) => {
67+
text
68+
.append("tspan")
69+
.attr("x", d.data.isLeaf ? 10 : -10)
70+
.attr("dy", i === 0 ? 0 : 14)
71+
.text(line)
72+
})
73+
})
74+
}, [])
75+
76+
return (
77+
<div style={{ overflow: "auto" }}>
78+
<h1>SurveyWithCode Taxonomy</h1>
79+
<svg ref={svgRef}></svg>
80+
</div>
81+
)
82+
}
83+
84+
export default GrokTaxonomyTree

‎app/(taxonomy)/transformer/page.jsx‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
"use client"
2+
3+
import React, { useEffect, useState } from "react"
4+
import SurveyTaxonomyTree from "./transformer"
5+
import TaxonomyDiagram from "./deepseekdiagram"
6+
import TaxonomyTree from "./qwendiagram"
7+
import GrokTaxonomyTree from "./grokdiagram"
8+
9+
// const taxonomyData = {
10+
// name: "X-formers",
11+
// children: [
12+
// {
13+
// name: "Module Level",
14+
// children: [
15+
// {
16+
// name: "Attention",
17+
// children: [
18+
// {
19+
// name: "Sparse",
20+
// children: [
21+
// {
22+
// leaf: true,
23+
// width: 300,
24+
// height: 60,
25+
// content: "Star-Transformer[1], Longformer[2], ETC[3], BigBird[4], Sparse Transformer[5]...",
26+
// },
27+
// // Add other leaf nodes similarly
28+
// ],
29+
// },
30+
// // Add other categories
31+
// ],
32+
// },
33+
// // Add other sub-categories
34+
// ],
35+
// },
36+
// // Add other top-level categories (Arch. Level, Pre-Train, App.)
37+
// ],
38+
// }
39+
const taxonomyData = {
40+
name: "X-formers",
41+
children: [
42+
{
43+
name: "Module Level",
44+
children: [
45+
{
46+
name: "Attention",
47+
children: [
48+
{
49+
name: "Sparse",
50+
children: [
51+
{ name: "Star-Transformer, Longformer, ETC, BigBird, Sparse Transformer, BP-Transformer, Image Transformer, Axial Transformer" },
52+
{ name: "Routing Transformer, Reformer, SAC, Sparse Sinkhorn Attention" },
53+
],
54+
},
55+
{ name: "Linearized", children: [{ name: "Linear Transformer, Performer, RFA, Delta Net" }] },
56+
{ name: "Prototype", children: [{ name: "Clustered Attention, Informer" }] },
57+
{ name: "Memory / Compress", children: [{ name: "MCA, Set Transformer, Linformer" }] },
58+
{ name: "Low-rank", children: [{ name: "Low-rank Attention, CSALR, Nyströmformer" }] },
59+
{
60+
name: "Prior Attention",
61+
children: [
62+
{ name: "Local Transformer, Gaussian Transformer" },
63+
{ name: "Predictive Attention Transformer, Realformer, Lazyformer" },
64+
{ name: "CAMTL" },
65+
{ name: "Average Attention, Hard-Coded Gaussian Attention, Synthesizer" },
66+
],
67+
},
68+
{
69+
name: "Multi-head",
70+
children: [
71+
{ name: "Disagreement regularization, Guiding attention, Talking-head Attention, Collaborative MHA" },
72+
{ name: "Adaptive Attention Span, Multi-Scale Transformer" },
73+
{ name: "Dynamic Routing" },
74+
],
75+
},
76+
],
77+
},
78+
{
79+
name: "Position Encoding",
80+
children: [
81+
{ name: "Absolute", children: [{ name: "BERT, PE on BERT, FLOATER" }] },
82+
{ name: "Relative", children: [{ name: "Shaw relative, Music Transformer, T5, Transformer-XL, DeBERTa" }] },
83+
{ name: "Other Rep.", children: [{ name: "TUPE, Roformer" }] },
84+
{ name: "Implicit Rep.", children: [{ name: "Complex Embedding, R-Transformer, CPE" }] },
85+
],
86+
},
87+
{
88+
name: "LayerNorm",
89+
children: [
90+
{ name: "Placement", children: [{ name: "post-LN, pre-LN" }] },
91+
{ name: "Substitutes", children: [{ name: "AdaNorm, scaled l2 normalization, PowerNorm" }] },
92+
{ name: "Norm-free", children: [{ name: "ReZero-Transformer" }] },
93+
],
94+
},
95+
{
96+
name: "FFN",
97+
children: [
98+
{ name: "Activ. Func.", children: [{ name: "Swish, GELU, GLU" }] },
99+
{ name: "Enlarge Capacity", children: [{ name: "Product-key Memory, Gshard, Switch Transformer, Expert Prototyping, Hash Layer" }] },
100+
{ name: "Dropping", children: [{ name: "All-Attention layer, other dropping approaches" }] },
101+
],
102+
},
103+
],
104+
},
105+
{
106+
name: "Arch. Level",
107+
children: [
108+
{ name: "Lightweight", children: [{ name: "Lite Transformer, Funnel Transformer, DeLighT" }] },
109+
{ name: "Connectivity", children: [{ name: "Realformer, Predictive Attention Transformer, Transparent Attention, Feedback Transformer" }] },
110+
{ name: "ACT", children: [{ name: "UT, CCTransformer, DeeBERT, PABEE, early exiting methods" }] },
111+
{
112+
name: "Divide & Conquer",
113+
children: [
114+
{ name: "Recurrence", children: [{ name: "Transformer-XL, Compressive Transformer, Memformer, ERNIE-Doc" }] },
115+
{ name: "Hierarchy", children: [{ name: "HiBERT, hierarchical approaches, Hi-Transformer, TENER, TNT" }] },
116+
],
117+
},
118+
{ name: "Alt. Arch.", children: [{ name: "ET, Macaron, Sandwich, MAN, DARTSformer" }] },
119+
],
120+
},
121+
{
122+
name: "Pre-Train",
123+
children: [
124+
{ name: "Encoder", children: [{ name: "BERT, RoBERTa, BigBird" }] },
125+
{ name: "Decoder", children: [{ name: "GPT, GPT-2, GPT-3" }] },
126+
{ name: "Enc.Dec.", children: [{ name: "BART, T5, Switch Transformer" }] },
127+
],
128+
},
129+
{
130+
name: "App.",
131+
children: [
132+
{ name: "NLP", children: [{ name: "BERT, ET, Transformer-XL, Compressive Transformer, TENER" }] },
133+
{ name: "CV", children: [{ name: "Image Transformer, DETR, ViT, Swin, ViViT" }] },
134+
{ name: "Audio", children: [{ name: "Speech Transformer, Streaming Transformer, Reformer-TTS, Music Transformer" }] },
135+
{ name: "Multimodal", children: [{ name: "VisualBERT, VLBERT, VideoBERT, M6, Chimera, DALL-E, CogView" }] },
136+
],
137+
},
138+
],
139+
}
140+
141+
export default function Page() {
142+
// const [data, setData] = useState([])
143+
144+
// useEffect(() => {
145+
// fetch("/data/flare-2.json")
146+
// .then((res) => res.json())
147+
// .then((data) => setData(data))
148+
// }, [])
149+
150+
return (
151+
<div>
152+
<h1 className="mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">Evaluation</h1>
153+
<SurveyTaxonomyTree width={1200} height={800} taxonomyData={taxonomyData} />
154+
{/* <TaxonomyDiagram data={taxonomyData} /> */}
155+
{/* <TaxonomyTree data={taxonomyData} /> */}
156+
{/* <GrokTaxonomyTree taxonomyData={taxonomyData} /> */}
157+
</div>
158+
)
159+
}

0 commit comments

Comments
 (0)