ok done

docs/components/timeline.js

@@ -10,7 +10,7 @@ export function timeline(events, {width, height} = {}) {
     marks: [
       Plot.ruleX(events, {x: "year", y: "y", markerEnd: "dot", strokeWidth: 2.5}),
       Plot.ruleY([0]),
-      Plot.text(events, {x: "year", y: "y", text: "name", lineAnchor: "bottom", dy: -10, lineWidth: 10, fontSize: 12})
+      // Plot.text(events, {x: "year", y: "y", text: "name", lineAnchor: "bottom", dy: -10, lineWidth: 10, fontSize: 12})
     ]
   });
 }

docs/components/tree.js

@@ -0,0 +1,15 @@
+import * as Plot from "npm:@observablehq/plot";
+
+export function tree(tags, {width, height} = {}) {
+	return Plot.plot({
+		axis: null,
+		width,
+		height,	
+		margin: 10,
+		marginLeft: 40,
+		marginRight: 120,
+		marks: [
+			Plot.tree(tags, {textStroke: "white"})
+		]
+	});
+}

docs/data/events.json

@@ -1,8 +0,0 @@
-[
-  {"name": "Sputnik 1", "year": 1957, "y": 10},
-  {"name": "Apollo 11", "year": 1969, "y": 20},
-  {"name": "Viking 1 and 2", "year": 1975, "y": 30},
-  {"name": "Space Shuttle Columbia", "year": 1981, "y": 40},
-  {"name": "Hubble Space Telescope", "year": 1990, "y": 50},
-  {"name": "ISS Construction", "year": 1998, "y": 60}
-]

docs/data/events.json.js

@@ -0,0 +1,19 @@
+async function json() {
+  // const response = await fetch(url);
+  // if (!response.ok) throw new Error(`fetch failed: ${response.status}`);
+  // return await response.json();
+  return [
+    {"name": "Sputnik 1", "year": 2020, "y": 1},
+    {"name": "Apollo 11", "year": 2021, "y": 2},
+    {"name": "Viking 1 and 2", "year": 2022, "y": 4},
+    {"name": "Space Shuttle Columbia", "year": 2023, "y": 8},
+    {"name": "Hubble Space Telescope", "year": 2024, "y": 16},
+    {"name": "ISS Construction", "year": 2025, "y": 32}
+  ];
+}
+
+
+
+const graph = await json();
+
+process.stdout.write(JSON.stringify(graph));

docs/data/tags.json.js

@@ -0,0 +1,27 @@
+async function json() {
+	const response = await fetch(`https://huggingface.co/api/models-tags-by-type`);
+	if (!response.ok) {
+		throw new Error(`fetch failed: ${response.status}`);
+	}
+	const tags = await response.json();
+	const x = Object.entries(tags).map(([k, v]) => {
+		return v.slice(0, 30).map(o => `${k}/${o.id}`);
+	}).flat();
+	return x;
+	// console.log(tags);
+	return [
+		"Chaos/Gaia/Mountains",
+		"Chaos/Gaia/Pontus",
+		"Chaos/Gaia/Uranus",
+		"Chaos/Eros",
+		"Chaos/Erebus",
+		"Chaos/Tartarus"
+	  ];
+  }
+  
+  
+  
+  const tags = await json();
+  
+  process.stdout.write(JSON.stringify(tags));
+  

docs/index.md

@@ -23,6 +23,20 @@ const events = FileAttachment("./data/events.json").json();
 timeline(events, {height: 300})
 ```
 
+## Model tags
+
+```js
+import {tree} from "./components/tree.js";
+const tags = FileAttachment("./data/tags.json").json();
+```
+
+The data in the timeline above is static but this data below is dynamically fetched from `https://huggingface.co/api/models-tags-by-type`:
+
+```js
+tree(tags, {height: 10000})
+```
+
+
 ## LLM generated description based on data above
 
 The evolution of open source models and datasets on the Hugging Face Hub reflects a significant shift in the landscape of machine learning and artificial intelligence. Initially, the Hugging Face Hub started as a repository for Natural Language Processing (NLP) models, primarily focusing on the Transformer architecture, which has been pivotal in advancing AI research and applications. The hub was known for hosting models such as BERT, GPT, and their variants, facilitating easy access for researchers and developers to state-of-the-art models.