add generic table, finetune leaderboard

app/page.tsx

@@ -5,11 +5,12 @@ import * as duckdb from "@duckdb/duckdb-wasm"
 import { Loader2 } from "lucide-react"
 import { toast } from 'sonner'
 
-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 { 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, FETCH_TOP_BASE_MODELS_TABLE_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"
+import { GenericTable } from "@/components/simple-table"
 
 export default function IndexPage() {
   const [conn, setConn] = useState<duckdb.AsyncDuckDBConnection | null>(null)
@@ -20,6 +21,7 @@ export default function IndexPage() {
   const [baseModel, setBaseModel] = useState("meta-llama/Meta-Llama-3-8B")
   const [finetuneModelGrowthData, setFinetuneModelGrowthData] = useState<Array<{ date: Date; count: number }>>([])
   const [isLoading, setIsLoading] = useState(false)
+  const [topFinetunedModels, setTopFinetunedModels] = useState<Array<{ model: string; finetunes: number }> | undefined>(undefined)
 
   useEffect(() => {
     initDB()
@@ -72,11 +74,12 @@ export default function IndexPage() {
 
     setChartData(data)
 
-    const [modelLicenseResult, datasetLicenseResult, spaceSdkResult] =
+    const [modelLicenseResult, datasetLicenseResult, spaceSdkResult, topFinetunedModelsResult] =
       await Promise.all([
         connection.query(FETCH_MODEL_LICENSE_DATA_QUERY),
         connection.query(FETCH_DATASET_LICENSE_DATA_QUERY),
         connection.query(FETCH_SPACE_SDK_DATA_QUERY),
+        connection.query(FETCH_TOP_BASE_MODELS_TABLE_QUERY),
       ])
 
     setModelLicenseData(
@@ -102,6 +105,11 @@ export default function IndexPage() {
         fill: `hsl(${index * 30}, 70%, 50%)`,
       }))
     )
+
+    setTopFinetunedModels(topFinetunedModelsResult.toArray().map(row => ({
+      model: row.model,
+      finetunes: Number(row.finetunes)
+    })))
   }
 
   const handleBaseModelSubmit = async (e: React.FormEvent) => {
@@ -165,6 +173,15 @@ export default function IndexPage() {
         </div>
       </div>
 
+      <div className="flex flex-col gap-4 max-w-4xl mt-10 w-full mx-auto">
+        <h2 className="text-4xl font-bold my-10 text-center">Finetuned Model Leaderboard</h2>
+        <GenericTable
+          data={topFinetunedModels}
+          caption="Top 10 base models by number of finetunes"
+        />
+      </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>
@@ -198,6 +215,7 @@ export default function IndexPage() {
           />
         </div>
       )}
+
     </section>
   )
 }

components/simple-table.tsx

@@ -0,0 +1,84 @@
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { Skeleton } from "@/components/ui/skeleton"
+
+interface TableData {
+  [key: string]: string | number;
+}
+
+interface TableProps {
+  data: TableData[] | undefined;
+  caption?: string;
+}
+
+export function GenericTable({ data, caption }: TableProps) {
+  const headers = data && data.length > 0 ? ['#', ...Object.keys(data[0])] : [];
+  const isLoading = !data;
+  const isEmpty = data && data.length === 0;
+
+  const renderSkeleton = (count: number) => (
+    [...Array(count)].map((_, index) => (
+      <TableCell key={index}>
+        <Skeleton className="h-4 w-full" />
+      </TableCell>
+    ))
+  );
+
+  const renderHeaders = () => headers.map((header, index) => (
+    <TableHead
+      key={header}
+      className={`${index === 0 ? 'text-right' : 'text-left'} text-black font-bold`}
+    >
+      {header.toUpperCase()}
+    </TableHead>
+  ));
+
+  const renderRows = () => {
+    if (isLoading) {
+      return [...Array(10)].map((_, index) => <TableRow key={index}>{renderSkeleton(5)}</TableRow>);
+    }
+    if (isEmpty) {
+      return (
+        <TableRow>
+          <TableCell colSpan={headers.length || 1} className="text-center py-4">
+            No results found
+          </TableCell>
+        </TableRow>
+      );
+    }
+    return data.map((row, index) => (
+      <TableRow key={index}>
+        <TableCell className="text-right font-medium">{index + 1}</TableCell>
+        {Object.entries(row).map(([key, value]) => (
+          <TableCell
+            key={`${index}-${key}`}
+            className={key.toLowerCase().includes('amount') ? 'text-right' : ''}
+          >
+            {value}
+          </TableCell>
+        ))}
+      </TableRow>
+    ));
+  };
+
+  return (
+    <Table>
+      {caption && <TableCaption>{caption}</TableCaption>}
+      <TableHeader>
+        <TableRow>
+          {isLoading ? renderSkeleton(5) : isEmpty ? null : renderHeaders()}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {renderRows()}
+      </TableBody>
+    </Table>
+  );
+}

components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

components/ui/table.tsx

@@ -0,0 +1,117 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

lib/queries.ts

@@ -45,8 +45,11 @@ export const FETCH_SPACE_SDK_DATA_QUERY = `
 export const FETCH_FINETUNE_MODEL_GROWTH_QUERY = (baseModel: string) => `
   WITH RECURSIVE month_series AS (
     SELECT DATE_TRUNC('month', MIN(CAST(createdAt AS TIMESTAMP))) - INTERVAL 1 MONTH AS month
-    FROM models, UNNEST(tags) AS t(tag)
-    WHERE tag = 'base_model:${baseModel}'
+    FROM models
+    WHERE EXISTS (
+      SELECT 1 FROM UNNEST(tags) AS t(tag)
+      WHERE tag ILIKE 'base_model:%${baseModel}'
+    )
 
     UNION ALL
 
@@ -55,15 +58,34 @@ export const FETCH_FINETUNE_MODEL_GROWTH_QUERY = (baseModel: string) => `
     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 DISTINCT id, DATE_TRUNC('month', CAST(createdAt AS TIMESTAMP)) AS creation_month
+    FROM models
+    WHERE EXISTS (
+      SELECT 1 FROM UNNEST(tags) AS t(tag)
+      WHERE tag ILIKE '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
+    COALESCE(SUM(COUNT(DISTINCT fm.id)) 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
 `
+
+export const FETCH_TOP_BASE_MODELS_TABLE_QUERY = `
+  WITH base_models AS (
+    SELECT DISTINCT id,
+      REGEXP_REPLACE(SUBSTRING(tag, 12), '^(finetune:|adapter:)', '') AS model
+    FROM models, UNNEST(tags) AS t(tag)
+    WHERE tag ILIKE 'base_model:%'
+  )
+  SELECT
+    model,
+    COUNT(DISTINCT id) AS finetunes
+  FROM base_models
+  GROUP BY model
+  ORDER BY finetunes DESC
+  LIMIT 10
+`