first commit

docs/components/timeline.js

@@ -0,0 +1,16 @@
+import * as Plot from "npm:@observablehq/plot";
+
+export function timeline(events, {width, height} = {}) {
+  return Plot.plot({
+    width,
+    height,
+    marginTop: 30,
+    x: {nice: true, label: null, tickFormat: ""},
+    y: {axis: null},
+    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})
+    ]
+  });
+}

docs/data/events.json

@@ -0,0 +1,8 @@
+[
+  {"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/index.md

@@ -1,111 +1,38 @@
 ---
-theme: alt
 toc: false
 ---
 
-<style>
+# Evolution of the Hugging Face Hub
 
-.hero {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  font-family: var(--sans-serif);
-  margin: 4rem 0 8rem;
-  text-wrap: balance;
-  text-align: center;
-}
+### Powered by Observable Framework
 
-.hero h1 {
-  margin: 2rem 0;
-  max-width: none;
-  font-size: 14vw;
-  font-weight: 900;
-  line-height: 1;
-  background: linear-gradient(30deg, var(--theme-foreground-focus), currentColor);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
+Let's visualize how the Hub is evolving those last few years.
 
-.hero h2 {
-  margin: 0;
-  max-width: 34em;
-  font-size: 20px;
-  font-style: initial;
-  font-weight: 500;
-  line-height: 1.5;
-  color: var(--theme-foreground-muted);
-}
 
-@media (min-width: 640px) {
-  .hero h1 {
-    font-size: 90px;
-  }
-}
+## Models and datasets
 
-</style>
+```js
+import {timeline} from "./components/timeline.js";
+```
 
-<div class="hero">
-  <h1>Hello, Observable Framework</h1>
-  <h2>Welcome to your new project! Edit&nbsp;<code style="font-size: 90%;">docs/index.md</code> to change this page.</h2>
-  <a href="https://observablehq.com/framework/getting-started" target="_blank">Get started<span style="display: inline-block; margin-left: 0.25rem;">↗︎</span></a>
-</div>
+```js
+const events = FileAttachment("./data/events.json").json();
+```
 
-<div class="grid grid-cols-2" style="grid-auto-rows: 504px;">
-  <div class="card">${
-    resize((width) => Plot.plot({
-      title: "Your awesomeness over time 🚀",
-      subtitle: "Up and to the right!",
-      width,
-      y: {grid: true, label: "Awesomeness"},
-      marks: [
-        Plot.ruleY([0]),
-        Plot.lineY(aapl, {x: "Date", y: "Close", tip: true})
-      ]
-    }))
-  }</div>
-  <div class="card">${
-    resize((width) => Plot.plot({
-      title: "How big are penguins, anyway? 🐧",
-      width,
-      grid: true,
-      x: {label: "Body mass (g)"},
-      y: {label: "Flipper length (mm)"},
-      color: {legend: true},
-      marks: [
-        Plot.linearRegressionY(penguins, {x: "body_mass_g", y: "flipper_length_mm", stroke: "species"}),
-        Plot.dot(penguins, {x: "body_mass_g", y: "flipper_length_mm", stroke: "species", tip: true})
-      ]
-    }))
-  }</div>
-</div>
+```js
+timeline(events, {height: 300})
+```
 
----
+## 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.
+
+Over time, the Hugging Face Hub expanded its scope beyond NLP to include a wide variety of models across different domains of AI, such as computer vision, audio processing, and multi-modal AI. This expansion was driven by the community's growing demand for a centralized platform where researchers and developers could share, discover, and implement AI models across different fields.
+
+The introduction of datasets on the Hugging Face Hub marked another significant milestone. It provided a unified platform for sharing and accessing datasets, which are crucial for training and benchmarking AI models. This feature addressed a common challenge in the AI community—the difficulty of finding high-quality, relevant datasets—by allowing users to easily search for and download datasets for their specific needs.
 
-## Next steps
+The Hugging Face Hub has also embraced an open-source ethos, encouraging collaboration and transparency in AI development. Users can contribute their own models and datasets, participate in discussions, and improve existing resources through direct interaction and feedback. This collaborative environment has fostered innovation and accelerated the pace of AI research and development.
 
-Here are some ideas of things you could try…
+Moreover, the platform has integrated tools and APIs to facilitate the deployment of models, making it easier for developers to integrate AI into applications. The Hugging Face Hub's emphasis on interoperability, with support for various machine learning frameworks like TensorFlow, PyTorch, and JAX, ensures that the models and datasets are accessible to a broad audience.
 
-<div class="grid grid-cols-4">
-  <div class="card">
-    Chart your own data using <a href="https://observablehq.com/framework/lib/plot"><code>Plot</code></a> and <a href="https://observablehq.com/framework/javascript/files"><code>FileAttachment</code></a>. Make it responsive using <a href="https://observablehq.com/framework/javascript/display#responsive-display"><code>resize</code></a>.
-  </div>
-  <div class="card">
-    Create a <a href="https://observablehq.com/framework/routing">new page</a> by adding a Markdown file (<code>whatever.md</code>) to the <code>docs</code> folder.
-  </div>
-  <div class="card">
-    Add a drop-down menu using <a href="https://observablehq.com/framework/javascript/inputs"><code>Inputs.select</code></a> and use it to filter the data shown in a chart.
-  </div>
-  <div class="card">
-    Write a <a href="https://observablehq.com/framework/loaders">data loader</a> that queries a local database or API, generating a data snapshot on build.
-  </div>
-  <div class="card">
-    Import a <a href="https://observablehq.com/framework/javascript/imports">recommended library</a> from npm, such as <a href="https://observablehq.com/framework/lib/leaflet">Leaflet</a>, <a href="https://observablehq.com/framework/lib/dot">GraphViz</a>, <a href="https://observablehq.com/framework/lib/tex">TeX</a>, or <a href="https://observablehq.com/framework/lib/duckdb">DuckDB</a>.
-  </div>
-  <div class="card">
-    Ask for help, or share your work or ideas, on the <a href="https://talk.observablehq.com/">Observable forum</a>.
-  </div>
-  <div class="card">
-    Visit <a href="https://github.com/observablehq/framework">Framework on GitHub</a> and give us a star. Or file an issue if you’ve found a bug!
-  </div>
-</div>
+In conclusion, the evolution of the Hugging Face Hub reflects the growing importance of open-source models and datasets in the AI community. It has become a key resource for researchers, developers, and companies, promoting accessibility, collaboration, and innovation in AI.

observablehq.config.ts

@@ -1,7 +1,7 @@
 // See https://observablehq.com/framework/config for documentation.
 export default {
   // The project’s title; used in the sidebar and webpage titles.
-  title: "Observable Huggingface2",
+  title: "Observable HuggingFace",
 
   // The pages and sections in the sidebar. If you don’t specify this option,
   // all pages will be listed in alphabetical order. Listing pages explicitly

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "observable-huggingface2",
+  "name": "observable-huggingface",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {