add finetune growth chart

README.md

@@ -4,4 +4,3 @@
 - [Dataset](https://huggingface.co/datasets/cfahlgren1/hub-stats) updated on HuggingFace
 
 ![HF Stats](./stats.png)
-

app/page.tsx

@@ -2,77 +2,64 @@
 
 import { useEffect, useState } from "react"
 import * as duckdb from "@duckdb/duckdb-wasm"
+import { Loader2 } from "lucide-react"
 
-import {
-  CREATE_VIEWS_QUERY,
-  FETCH_CHART_DATA_QUERY,
-  FETCH_DATASET_LICENSE_DATA_QUERY,
-  FETCH_MODEL_LICENSE_DATA_QUERY,
-  FETCH_SPACE_SDK_DATA_QUERY,
-} from "@/lib/queries"
-import { AreaChartStacked, ChartDataPoint } from "@/components/area-chart"
+import { CREATE_VIEWS_QUERY, FETCH_CHART_DATA_QUERY, FETCH_DATASET_LICENSE_DATA_QUERY, FETCH_FINETUNE_MODEL_GROWTH_QUERY, FETCH_MODEL_LICENSE_DATA_QUERY, FETCH_SPACE_SDK_DATA_QUERY } from "@/lib/queries"
+import { AreaChartStacked, ChartDataPoint } from "@/components/area-chart-stacked"
 import { CustomPieChart } from "@/components/pie-chart"
+import { SimpleArea } from "@/components/simple-area"
+import { Button } from "@/components/ui/button"
 
 export default function IndexPage() {
   const [conn, setConn] = useState<duckdb.AsyncDuckDBConnection | null>(null)
   const [chartData, setChartData] = useState<ChartDataPoint[]>([])
-  const [modelLicenseData, setModelLicenseData] = useState<
-    Array<{ name: string; value: number; fill: string }>
-  >([])
-  const [datasetLicenseData, setDatasetLicenseData] = useState<
-    Array<{ name: string; value: number; fill: string }>
-  >([])
-  const [spaceSdkData, setSpaceSdkData] = useState<
-    Array<{ name: string; value: number; fill: string }>
-  >([])
+  const [modelLicenseData, setModelLicenseData] = useState<Array<{ name: string; value: number; fill: string }>>([])
+  const [datasetLicenseData, setDatasetLicenseData] = useState<Array<{ name: string; value: number; fill: string }>>([])
+  const [spaceSdkData, setSpaceSdkData] = useState<Array<{ name: string; value: number; fill: string }>>([])
+  const [baseModel, setBaseModel] = useState("meta-llama/Meta-Llama-3-8B")
+  const [finetuneModelGrowthData, setFinetuneModelGrowthData] = useState<Array<{ date: Date; count: number }>>([])
+  const [isLoading, setIsLoading] = useState(false)
 
   useEffect(() => {
-    const initDB = async () => {
-      const CDN_BASE = `https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@next`
-
-      const JSDELIVR_BUNDLES = {
-        mvp: {
-          mainModule: `${CDN_BASE}/dist/duckdb-mvp.wasm`,
-          mainWorker: `${CDN_BASE}/dist/duckdb-browser-mvp.worker.js`,
-        },
-        eh: {
-          mainModule: `${CDN_BASE}/dist/duckdb-eh.wasm`,
-          mainWorker: `${CDN_BASE}/dist/duckdb-browser-eh.worker.js`,
-        },
-      }
-
-      const bundle = await duckdb.selectBundle(JSDELIVR_BUNDLES)
-      const worker_url = URL.createObjectURL(
-        new Blob([`importScripts("${bundle.mainWorker}");`], {
-          type: "text/javascript",
-        })
-      )
-
-      const worker = new Worker(worker_url)
-      const logger = new duckdb.ConsoleLogger()
-      const db = new duckdb.AsyncDuckDB(logger, worker)
-      await db.instantiate(bundle.mainModule)
-
-      const connection = await db.connect()
-
-      await connection.query(CREATE_VIEWS_QUERY)
-
-      setConn(connection)
-      await fetchChartData(connection)
-    }
-
     initDB()
+    return () => { if (conn) conn.close() }
+  }, [])
 
-    // Clean up the connection when the component unmounts
-    return () => {
-      if (conn) {
-        conn.close()
-      }
+  const initDB = async () => {
+    const CDN_BASE = `https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@next`
+
+    const JSDELIVR_BUNDLES = {
+      mvp: {
+        mainModule: `${CDN_BASE}/dist/duckdb-mvp.wasm`,
+        mainWorker: `${CDN_BASE}/dist/duckdb-browser-mvp.worker.js`,
+      },
+      eh: {
+        mainModule: `${CDN_BASE}/dist/duckdb-eh.wasm`,
+        mainWorker: `${CDN_BASE}/dist/duckdb-browser-eh.worker.js`,
+      },
     }
-  }, [])
+
+    const bundle = await duckdb.selectBundle(JSDELIVR_BUNDLES)
+    const worker_url = URL.createObjectURL(
+      new Blob([`importScripts("${bundle.mainWorker}");`], {
+        type: "text/javascript",
+      })
+    )
+
+    const worker = new Worker(worker_url)
+    const logger = new duckdb.ConsoleLogger()
+    const db = new duckdb.AsyncDuckDB(logger, worker)
+    await db.instantiate(bundle.mainModule)
+
+    const connection = await db.connect()
+
+    await connection.query(CREATE_VIEWS_QUERY)
+
+    setConn(connection)
+    await fetchChartData(connection)
+  }
 
   const fetchChartData = async (connection: duckdb.AsyncDuckDBConnection) => {
-    // Use the imported query
     const result = await connection.query(FETCH_CHART_DATA_QUERY)
 
     const data: ChartDataPoint[] = result.toArray().map((row) => ({
@@ -116,47 +103,98 @@ export default function IndexPage() {
     )
   }
 
+  const handleBaseModelSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!conn) {
+      console.warn("Database connection not established")
+      return
+    }
+
+    setIsLoading(true)
+    try {
+      console.log("Fetching finetune model growth data for", baseModel)
+      const result = await conn.query(FETCH_FINETUNE_MODEL_GROWTH_QUERY(baseModel))
+      console.log("Received Result")
+      const data = result.toArray().map((row: { date: Date; count: bigint }) => ({
+        date: new Date(row.date),
+        count: parseInt(row.count.toString())
+      }))
+      console.log("Setting finetune model growth data", data)
+      setFinetuneModelGrowthData(data)
+    } catch (error) {
+      console.error("Error executing query:", error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
   return (
     <section className="container grid items-center gap-6 pb-8 pt-6 md:py-10">
-      <div className="flex flex-col gap-4">
-        <h1 className="text-3xl text-center font-extrabold leading-tight tracking-tighter md:text-4xl">
-          Hugging Face Hub Stats
-        </h1>
-      </div>
+      <h1 className="text-3xl text-center font-extrabold leading-tight tracking-tighter md:text-4xl">
+        Hugging Face Hub Stats
+      </h1>
+
       <div className="flex flex-col gap-4 max-w-6xl mt-10 w-full mx-auto">
-        {chartData.length > 0 ? (
-          <AreaChartStacked data={chartData} />
-        ) : (
-          <p>Loading...</p>
-        )}
+        <AreaChartStacked data={chartData} />
+      </div>
+
+      <div className="flex flex-wrap gap-8 max-w-6xl mt-10 w-full mx-auto">
+        <div className="flex-1 min-w-[300px]">
+          <CustomPieChart
+            title="Model Licenses"
+            data={modelLicenseData}
+            dataKey="value"
+          />
+        </div>
+        <div className="flex-1 min-w-[300px]">
+          <CustomPieChart
+            title="Dataset Licenses"
+            data={datasetLicenseData}
+            dataKey="value"
+          />
+        </div>
+        <div className="flex-1 min-w-[300px]">
+          <CustomPieChart
+            title="Space SDKs"
+            data={spaceSdkData}
+            dataKey="value"
+          />
+        </div>
       </div>
-      {modelLicenseData.length > 0 &&
-        datasetLicenseData.length > 0 &&
-        spaceSdkData.length > 0 && (
-          <div className="flex flex-wrap gap-8 max-w-6xl mt-10 w-full mx-auto">
-            <div className="flex-1 min-w-[300px]">
-              <CustomPieChart
-                title="Model Licenses"
-                data={modelLicenseData}
-                dataKey="value"
-              />
-            </div>
-            <div className="flex-1 min-w-[300px]">
-              <CustomPieChart
-                title="Dataset Licenses"
-                data={datasetLicenseData}
-                dataKey="value"
-              />
-            </div>
-            <div className="flex-1 min-w-[300px]">
-              <CustomPieChart
-                title="Space SDKs"
-                data={spaceSdkData}
-                dataKey="value"
-              />
-            </div>
-          </div>
-        )}
+
+      <div className="flex flex-col items-center gap-4 max-w-6xl mt-10 w-full mx-auto">
+        <h2 className="text-4xl font-bold text-center">Finetuned Model Growth</h2>
+        <p className="text-center mb-4">Find how many finetuned models have been created for your favorite model</p>
+        <form onSubmit={handleBaseModelSubmit} className="flex flex-col gap-2 w-full max-w-sm">
+          <input
+            type="text"
+            value={baseModel}
+            onChange={(e) => setBaseModel(e.target.value)}
+            placeholder="Base Model Name"
+            className="px-4 w-full py-2 border rounded"
+          />
+          <Button type="submit" disabled={isLoading} className="w-full">
+            {isLoading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Loading
+              </>
+            ) : (
+              "Submit"
+            )}
+          </Button>
+        </form>
+      </div>
+
+      {finetuneModelGrowthData.length > 0 && (
+        <div className="flex flex-col gap-4 max-w-4xl mt-10 w-full mx-auto">
+          <SimpleArea
+            title="Finetune Model Growth"
+            description={`Showing the growth of finetune models over time for ${baseModel || "your favorite model."}`}
+            data={finetuneModelGrowthData}
+          />
+        </div>
+      )}
     </section>
   )
 }

components/{area-chart.tsx → area-chart-stacked.tsx}

@@ -60,62 +60,68 @@ export function AreaChartStacked({ data }: AreaChartStackedProps) {
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <ChartContainer config={chartConfig}>
-          <AreaChart
-            accessibilityLayer
-            data={sortedData}
-            margin={{
-              left: 12,
-              right: 12,
-            }}
-          >
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="month"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-              tickFormatter={(value) => {
-                const date = new Date(value)
-                return date.toLocaleString("default", {
-                  month: "short",
-                  year: "numeric",
-                })
+        {data.length > 0 ? (
+          <ChartContainer config={chartConfig}>
+            <AreaChart
+              accessibilityLayer
+              data={sortedData}
+              margin={{
+                left: 12,
+                right: 12,
               }}
-            />
-            <ChartTooltip
-              cursor={true}
-              content={<ChartTooltipContent indicator="line" hideLabel />}
-            />
-            <Area
-              dataKey="spaces"
-              type="natural"
-              fill="hsl(var(--chart-3))"
-              fillOpacity={0.4}
-              stroke="hsl(var(--chart-3))"
-              stackId="a"
-            />
-            <Area
-              dataKey="datasets"
-              type="natural"
-              fill="hsl(var(--chart-2))"
-              fillOpacity={0.2}
-              stroke="hsl(var(--chart-2))"
-              stackId="a"
-            />
-            <Area
-              dataKey="models"
-              type="natural"
-              fill="hsl(var(--chart-1))"
-              fillOpacity={0.4}
-              stroke="hsl(var(--chart-1))"
-              stackId="a"
-            />
-            <ChartLegend
-              content={<ChartLegendContent className="text-white" />}
-            />
-          </AreaChart>
-        </ChartContainer>
+            >
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="month"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                tickFormatter={(value) => {
+                  const date = new Date(value)
+                  return date.toLocaleString("default", {
+                    month: "short",
+                    year: "numeric",
+                  })
+                }}
+              />
+              <ChartTooltip
+                cursor={true}
+                content={<ChartTooltipContent indicator="line" hideLabel />}
+              />
+              <Area
+                dataKey="spaces"
+                type="natural"
+                fill="hsl(var(--chart-3))"
+                fillOpacity={0.4}
+                stroke="hsl(var(--chart-3))"
+                stackId="a"
+              />
+              <Area
+                dataKey="datasets"
+                type="natural"
+                fill="hsl(var(--chart-2))"
+                fillOpacity={0.2}
+                stroke="hsl(var(--chart-2))"
+                stackId="a"
+              />
+              <Area
+                dataKey="models"
+                type="natural"
+                fill="hsl(var(--chart-1))"
+                fillOpacity={0.4}
+                stroke="hsl(var(--chart-1))"
+                stackId="a"
+              />
+              <ChartLegend
+                content={<ChartLegendContent className="text-white" />}
+              />
+            </AreaChart>
+          </ChartContainer>
+        ) : (
+          <div className="flex items-center justify-center h-[300px] text-[var(--card-text)]">
+            Loading...
+          </div>
+        )}
       </CardContent>
     </Card>
   )

components/pie-chart.tsx

@@ -69,31 +69,37 @@ export function CustomPieChart({
         )}
       </CardHeader>
       <CardContent className="flex-1 pb-0">
-        <ChartContainer
-          config={chartConfig}
-          className="mx-auto aspect-square max-h-[500px]"
-        >
-          <PieChart>
-            <ChartTooltip
-              cursor={false}
-              content={<ChartTooltipContent hideIndicator hideLabel />}
-            />
-            <Pie data={chartData} dataKey={dataKey} nameKey="name">
-              {chartData.map((entry, index) => (
-                <Cell
-                  key={`cell-${index}`}
-                  fill={chartColors[index % chartColors.length]}
-                />
-              ))}
-              <LabelList
-                dataKey="name"
-                className="fill-background"
-                stroke="none"
-                fontSize={12}
+        {data.length > 0 ? (
+          <ChartContainer
+            config={chartConfig}
+            className="mx-auto aspect-square max-h-[500px]"
+          >
+            <PieChart>
+              <ChartTooltip
+                cursor={false}
+                content={<ChartTooltipContent hideIndicator hideLabel />}
               />
-            </Pie>
-          </PieChart>
-        </ChartContainer>
+              <Pie data={chartData} dataKey={dataKey} nameKey="name">
+                {chartData.map((entry, index) => (
+                  <Cell
+                    key={`cell-${index}`}
+                    fill={chartColors[index % chartColors.length]}
+                  />
+                ))}
+                <LabelList
+                  dataKey="name"
+                  className="fill-background"
+                  stroke="none"
+                  fontSize={12}
+                />
+              </Pie>
+            </PieChart>
+          </ChartContainer>
+        ) : (
+          <div className="flex items-center justify-center h-[300px] text-[var(--card-text)]">
+            Loading...
+          </div>
+        )}
       </CardContent>
     </Card>
   )

components/simple-area.tsx

@@ -0,0 +1,97 @@
+"use client"
+
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart"
+
+interface SimpleAreaProps {
+  title: string
+  description: string
+  data: Array<{ date: Date; count: number }>
+}
+
+export function SimpleArea({ title, description, data }: SimpleAreaProps) {
+  const chartConfig = {
+    count: {
+      label: "Total",
+      color: "hsl(var(--chart-1))",
+    },
+  } satisfies ChartConfig
+
+  const formattedData = data.map(item => ({
+    label: item.date.toISOString().split('T')[0],
+    count: item.count
+  }))
+
+  const total = data.length > 0 ? data[data.length - 1].count : 0
+
+  return (
+    <Card className="bg-[var(--card-background)]">
+      <CardHeader className="flex flex-row items-center justify-between">
+        <div>
+          <CardTitle className="text-[var(--card-text)]">{title}</CardTitle>
+          <CardDescription className="text-[var(--card-text)]">
+            {description}
+          </CardDescription>
+        </div>
+        <div className="text-right">
+          <span className="text-xs text-white">Total</span>
+          <p className="text-2xl font-bold text-white">{total.toLocaleString()}</p>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {data.length > 0 ? (
+          <ChartContainer config={chartConfig}>
+            <AreaChart
+              accessibilityLayer
+              data={formattedData}
+              margin={{
+                left: 12,
+                right: 12,
+              }}
+            >
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="label"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                tickFormatter={(value) => {
+                  const date = new Date(value);
+                  return `${date.getMonth() + 1}/${date.getDate()}`;
+                }}
+              />
+              <ChartTooltip
+                cursor={false}
+                content={<ChartTooltipContent indicator="line" />}
+              />
+              <Area
+                dataKey="count"
+                type="natural"
+                fill="hsl(var(--chart-1))"
+                fillOpacity={0.4}
+                stroke="hsl(var(--chart-1))"
+              />
+            </AreaChart>
+          </ChartContainer>
+        ) : (
+          <div className="flex items-center justify-center h-[300px] text-[var(--card-text)]">
+            Loading...
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

lib/queries.ts

@@ -41,3 +41,29 @@ export const FETCH_SPACE_SDK_DATA_QUERY = `
   FROM spaces
   GROUP BY sdk;
 `
+
+export const FETCH_FINETUNE_MODEL_GROWTH_QUERY = (baseModel: string) => `
+  WITH RECURSIVE month_series AS (
+    SELECT DATE_TRUNC('month', MIN(CAST(createdAt AS TIMESTAMP))) AS month
+    FROM models, UNNEST(tags) AS t(tag)
+    WHERE tag = 'base_model:${baseModel}'
+
+    UNION ALL
+
+    SELECT month + INTERVAL 1 MONTH
+    FROM month_series
+    WHERE month < DATE_TRUNC('month', CURRENT_DATE)
+  ),
+  finetuned_models AS (
+    SELECT DATE_TRUNC('month', CAST(createdAt AS TIMESTAMP)) AS creation_month
+    FROM models, UNNEST(tags) AS t(tag)
+    WHERE tag = 'base_model:${baseModel}'
+  )
+  SELECT
+    strftime(ms.month, '%Y-%m') as date,
+    COALESCE(SUM(COUNT(fm.creation_month)) OVER (ORDER BY ms.month), 0) AS count
+  FROM month_series ms
+  LEFT JOIN finetuned_models fm ON ms.month = fm.creation_month
+  GROUP BY ms.month
+  ORDER BY ms.month
+`