17 | {children}
18 |
19 |
13 | {children}
14 |
15 | );
16 | };
17 |
18 | export default Card;
19 |
--------------------------------------------------------------------------------
/src/lib/swr.ts:
--------------------------------------------------------------------------------
1 | export const fetcher = (url: string) => fetch(url).then((res) => res.json());
2 |
3 | export const postFetcher = async (url: string, data: any) => {
4 | const response = await fetch(url, {
5 | method: "POST",
6 | headers: {
7 | "Content-Type": "application/json",
8 | },
9 | body: JSON.stringify(data),
10 | });
11 |
12 | if (!response.ok) {
13 | throw new Error("Failed to fetch data");
14 | }
15 |
16 | return response.json();
17 | };
18 |
--------------------------------------------------------------------------------
/src/components/select/MultiSelectOption.tsx:
--------------------------------------------------------------------------------
1 | import { components, OptionProps } from "react-select";
2 |
3 | const MultiSelectOption: React.FC
6 |
9 | {props.isSelected ? "✓ " : ""}
7 | {props.children}
8 |
15 | {props.headerText}
16 |
17 | {props.children}
18 |
12 |
16 |
20 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/src/lib/constants.ts:
--------------------------------------------------------------------------------
1 | import { PerformanceMetricKey, SortDirection } from "./types";
2 |
3 | export const MetricLabels: Record
13 |
15 |
21 |
22 |
23 |
17 |
24 | );
25 | };
26 |
27 | export default LeaderboardAcceleratorSelect;
28 |
--------------------------------------------------------------------------------
/src/components/select/ModelSelectOptionLabel.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Image from "next/image";
3 | import { Model } from "@/lib/types";
4 |
5 | const ModelSelectOptionLabel = ({
6 | model,
7 | isFocused,
8 | }: {
9 | model: Model;
10 | isFocused: boolean;
11 | }) => {
12 | return (
13 |
14 |
25 | );
26 | };
27 |
28 | export default ModelSelectOptionLabel;
29 |
--------------------------------------------------------------------------------
/src/components/ui/Hyperlink.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import React, { ReactNode } from "react";
3 |
4 | const Hyperlink = ({
5 | href,
6 | children,
7 | className = "",
8 | variant = "primary",
9 | }: {
10 | href: string;
11 | children: ReactNode;
12 | className?: string;
13 | variant?: "primary" | "button";
14 | }) => {
15 | const primaryClasses = "text-primary-500 hover:underline";
16 | const buttonClasses =
17 | "px-4 py-2 bg-primary-100 text-primary-500 hover:text-white hover:bg-primary-500 rounded";
18 |
19 | const classes =
20 | variant === "primary"
21 | ? `${primaryClasses} ${className}`
22 | : `${buttonClasses} ${className}`;
23 |
24 | return (
25 |
26 | {children}
27 |
28 | );
29 | };
30 |
31 | export default Hyperlink;
32 |
--------------------------------------------------------------------------------
/src/components/icons/ArrowIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const ArrowIcon = ({
4 | className = "",
5 | color = "#000",
6 | direction = "down",
7 | }: {
8 | className?: string;
9 | color?: string;
10 | direction?: "up" | "down";
11 | }) => {
12 | const rotate = direction === "up" ? "rotate(180deg)" : "none";
13 |
14 | return (
15 |
29 | );
30 | };
31 |
32 | export default ArrowIcon;
33 |
--------------------------------------------------------------------------------
/public/accel.svg:
--------------------------------------------------------------------------------
1 |
13 |
--------------------------------------------------------------------------------
/src/components/layout/Meta.tsx:
--------------------------------------------------------------------------------
1 | import Head from "next/head";
2 |
3 | type MetaProps = {
4 | title?: string;
5 | description?: string;
6 | ogImage?: string;
7 | noindex?: boolean;
8 | };
9 |
10 | export default function Meta({
11 | title = "LocalScore - Local AI Benchmark",
12 | description = "LocalScore is an open benchmark which helps you understand how well your computer can handle local AI tasks.",
13 | ogImage = "/og-image.png",
14 | noindex = false,
15 | }: MetaProps) {
16 | return (
17 |
18 |
15 |
23 | {model.name}
22 |{model.quant}
24 |
22 | onChange?.(v)}
26 | className="font-semibold"
27 | />
28 |
29 | );
30 | };
31 |
32 | export default MetricSelector;
33 |
--------------------------------------------------------------------------------
/src/pages/api/download/[model].ts:
--------------------------------------------------------------------------------
1 | import type { NextApiRequest, NextApiResponse } from "next";
2 |
3 | // Define model URLs (replace with your actual Hugging Face links)
4 | const MODEL_URLS: Record
16 |
31 | );
32 | };
33 |
34 | export default AcceleratorSelectOptionLabel;
35 |
--------------------------------------------------------------------------------
/src/components/leaderboard/LeaderboardSelectedModelHeader.tsx:
--------------------------------------------------------------------------------
1 | import { PerformanceScore } from "@/lib/types";
2 | import Link from "next/link";
3 | import React from "react";
4 | import Image from "next/image";
5 |
6 | const LeaderboardSelectedModelHeader = ({
7 | data,
8 | }: {
9 | data: PerformanceScore | undefined;
10 | }) => {
11 | if (!data) return null;
12 |
13 | return (
14 |
17 |
25 | {acc.name}
24 |
26 |
30 | {acc.memory_gb}GB
27 |•
28 |{acc.type}
29 |
15 |
28 | );
29 | };
30 |
31 | export default LeaderboardSelectedModelHeader;
32 |
--------------------------------------------------------------------------------
/public/model.svg:
--------------------------------------------------------------------------------
1 |
19 |
--------------------------------------------------------------------------------
/src/components/icons/EmailIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const EmailIcon = ({
4 | width = 24,
5 | height = 24,
6 | className = "",
7 | }: {
8 | width?: number;
9 | height?: number;
10 | className?: string;
11 | }) => {
12 | return (
13 | <>
14 |
17 |
21 |
22 | {data.model.name}{" "}
23 | {data.model.quant}
24 |
25 |
26 |
27 |
15 | Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
16 | License - https://fontawesome.com/license/free Copyright 2025 Fonticons,
17 | Inc.
18 |
19 |
20 |
29 |
30 | );
31 | };
32 |
33 | export default EmailIcon;
34 |
--------------------------------------------------------------------------------
/src/components/display/RuntimeInfo.tsx:
--------------------------------------------------------------------------------
1 | import { Runtime } from "@/lib/types";
2 | import React from "react";
3 |
4 | interface RuntimeInfoProps {
5 | runtime: Runtime;
6 | }
7 |
8 | const RuntimeInfo: React.FC
11 |
30 | );
31 | };
32 |
33 | export default RuntimeInfo;
34 |
--------------------------------------------------------------------------------
/src/pages/download/OperatingSystemSelector.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useDownloadStore } from "../../lib/hooks/useDownload";
3 |
4 | const OperatingSystemSelector = () => {
5 | const { operatingSystem, setOperatingSystem } = useDownloadStore();
6 |
7 | const baseStyles = "font-medium rounded-lg px-5 py-[10px]";
8 | const activeStyles = "border-2 border-primary-500";
9 |
10 | const isWindows = operatingSystem === "Windows";
11 |
12 | return (
13 |
12 |
15 |
16 | {runtime.version && (
17 | Name
13 | {runtime.name}
14 |
18 |
21 | )}
22 |
23 | {runtime.commit_hash && (
24 | Version
19 | {runtime.version}
20 |
25 |
28 | )}
29 | Commit Hash
26 | {runtime.commit_hash}
27 |
14 |
24 |
34 |
35 | );
36 | };
37 |
38 | export default OperatingSystemSelector;
39 |
--------------------------------------------------------------------------------
/src/components/leaderboard/Leaderboard.tsx:
--------------------------------------------------------------------------------
1 | import { AcceleratorType, PerformanceScore } from "@/lib/types";
2 | import { useState } from "react";
3 | import Card from "../ui/Card";
4 | import CardHeader from "../ui/CardHeader";
5 | import LeaderboardTable from "./LeaderboardTable";
6 | import LeaderboardAcceleratorSelect from "./LeaderboardAcceleratorSelect";
7 |
8 | interface LeaderboardProps {
9 | data: PerformanceScore[];
10 | }
11 |
12 | const Leaderboard = ({ data }: LeaderboardProps) => {
13 | const [filterType, setFilterType] = useState
21 |
26 |
27 |
23 |
25 |
32 |
35 | )}
36 | />
37 | );
38 | };
39 |
40 | export default AcceleratorSelect;
41 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "llamascore",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint",
10 | "db:generate": "drizzle-kit generate",
11 | "db:migrate": "drizzle-kit migrate",
12 | "db:studio": "drizzle-kit studio"
13 | },
14 | "dependencies": {
15 | "@as-integrations/next": "^3.2.0",
16 | "@libsql/client": "^0.15.1",
17 | "@types/chroma-js": "^2.4.5",
18 | "@types/react-responsive": "^9.0.0",
19 | "chroma-js": "^3.1.2",
20 | "dayjs": "^1.11.13",
21 | "dotenv": "^16.4.7",
22 | "drizzle-graphql": "^0.8.5",
23 | "drizzle-orm": "^0.36.4",
24 | "graphql": "^16.10.0",
25 | "graphql-yoga": "^5.13.2",
26 | "next": "14.2.35",
27 | "pg": "^8.14.1",
28 | "postgres": "^3.4.5",
29 | "react": "^18.3.1",
30 | "react-dom": "^18.3.1",
31 | "react-responsive": "^10.0.1",
32 | "react-select": "^5.10.1",
33 | "recharts": "^2.15.1",
34 | "swr": "^2.3.3",
35 | "uuid": "^11.1.0",
36 | "zod": "^3.24.2",
37 | "zustand": "^5.0.3"
38 | },
39 | "devDependencies": {
40 | "@types/node": "^20.17.27",
41 | "@types/pg": "^8.11.11",
42 | "@types/react": "^18.3.20",
43 | "@types/react-dom": "^18.3.5",
44 | "drizzle-kit": "^0.27.2",
45 | "eslint": "^8.57.1",
46 | "eslint-config-next": "14.2.16",
47 | "postcss": "^8.5.3",
48 | "tailwindcss": "^3.4.17",
49 | "tsx": "^4.19.3",
50 | "typescript": "^5.8.2"
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/components/display/PerformanceMetricDisplay.tsx:
--------------------------------------------------------------------------------
1 | import { PerformanceMetricKey } from "@/lib/types";
2 | import { formatMetricValue } from "@/lib/utils";
3 |
4 | interface MetricDisplayProps {
5 | label: string;
6 | metricKey: PerformanceMetricKey;
7 | value: number;
8 | size?: "small" | "large" | "xl";
9 | }
10 |
11 | const PerformanceMetricDisplay: React.FC{acc.name}
33 |{acc.memory_gb}GB
34 |
44 |
50 | );
51 | };
52 |
53 | export default PerformanceMetricDisplay;
54 |
--------------------------------------------------------------------------------
/src/components/icons/DiscordIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const DiscordIcon = ({
4 | width = 24,
5 | height = 24,
6 | className = "",
7 | }: {
8 | width?: number;
9 | height?: number;
10 | className?: string;
11 | }) => {
12 | return (
13 |
26 | );
27 | };
28 |
29 | export default DiscordIcon;
30 |
--------------------------------------------------------------------------------
/src/components/cards/compare/useInitialCompareSelection.ts:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | interface InitializeSelectionOptions
45 |
48 | {formatted}
46 |{suffix}
47 |{label}
49 |
21 | {/* Tooltip trigger - info icon */}
22 |
33 |
34 | {/* Tooltip content */}
35 | {isVisible && (
36 |
46 | );
47 | };
48 |
49 | export default Tooltip;
50 |
--------------------------------------------------------------------------------
/src/components/display/PerformanceResultsGrid.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PerformanceMetricDisplay from "./PerformanceMetricDisplay";
3 | import { Run } from "@/lib/types";
4 |
5 | const PerformanceResultsGrid = ({
6 | run,
7 | size = "small",
8 | className = "",
9 | }: {
10 | run: Run;
11 | size?: "small" | "large" | "xl";
12 | className?: string;
13 | }) => {
14 | // Common classes for all sizes
15 | const commonClasses = "grid items-center";
16 |
17 | // Size-specific classes
18 | const sizeClasses = {
19 | small:
20 | "grid-cols-2 sm:gap-2 gap-x-16 gap-y-2 col-span-6 self-center sm:self-auto",
21 | large: "md:grid-cols-2 grid-cols-2 gap-x-16 gap-y-4 col-span-6 self-center",
22 | xl: "grid-cols-2 gap-x-20 gap-y-6 col-span-12 self-stretch",
23 | };
24 |
25 | // Combine the common classes with the size-specific classes
26 | const gridClassName = `${commonClasses} ${sizeClasses[size]} ${className}`;
27 |
28 | return (
29 |
40 | {/* Arrow */}
41 |
42 | {text}
43 |
44 | )}
45 |
30 |
55 | );
56 | };
57 |
58 | export default PerformanceResultsGrid;
59 |
--------------------------------------------------------------------------------
/src/lib/config.ts:
--------------------------------------------------------------------------------
1 | export const LOCALSCORE_VERSION = "0.9.3";
2 | export const OFFICIAL_MODELS = [
3 | {
4 | name: "Llama 3.2 1B Instruct",
5 | shortName: "LLama 3.2",
6 | label: "1B",
7 | humanLabel: "Tiny",
8 | quant: "Q4_K - Medium",
9 | vram: "2GB",
10 | params: "1B",
11 | hfName: "bartowski/Llama-3.2-1B-Instruct-GGUF",
12 | hfDownload:
13 | "https://huggingface.co/bartowski/Llama-3.2-1B-Instruct-GGUF/resolve/main/Llama-3.2-1B-Instruct-Q4_K_M.gguf",
14 | hfFilename: "Llama-3.2-1B-Instruct-Q4_K_M.gguf",
15 | },
16 | {
17 | name: "Meta Llama 3.1 8B Instruct",
18 | shortName: "LLama 3.1",
19 | label: "8B",
20 | humanLabel: "Small",
21 | quant: "Q4_K - Medium",
22 | vram: "6GB",
23 | params: "8B",
24 | hfName: "bartowski/Meta-Llama-3.1-8B-Instruct-GGUF",
25 | hfDownload:
26 | "https://huggingface.co/bartowski/Meta-Llama-3.1-8B-Instruct-GGUF/resolve/main/Meta-Llama-3.1-8B-Instruct-Q4_K_M.gguf",
27 | hfFilename: "Meta-Llama-3.1-8B-Instruct-Q4_K_M.gguf",
28 | },
29 | {
30 | name: "Qwen2.5 14B Instruct",
31 | shortName: "Qwen 2.5",
32 | label: "14B",
33 | humanLabel: "Medium",
34 | quant: "Q4_K - Medium",
35 | vram: "10GB",
36 | params: "14B",
37 | hfName: "bartowski/Qwen2.5-14B-Instruct-GGUF",
38 | hfDownload:
39 | "https://huggingface.co/bartowski/Qwen2.5-14B-Instruct-GGUF/resolve/main/Qwen2.5-14B-Instruct-Q4_K_M.gguf",
40 | hfFilename: "Qwen2.5-14B-Instruct-Q4_K_M.gguf",
41 | },
42 | ];
43 |
44 | export const MODEL_MAP = OFFICIAL_MODELS.reduce(
45 | (map, model) => {
46 | map[model.label] = { name: model.name, quant: model.quant };
47 | return map;
48 | },
49 | {} as Record
18 |
29 |
19 |
27 | 20 | LocalScore is an open benchmark which helps you understand 21 | how well your computer can handle local AI tasks.{" "} 22 |
23 | {/* 24 | Learn more 25 | */} 26 |
9 |
44 | );
45 | };
46 |
47 | export default SystemInfo;
48 |
--------------------------------------------------------------------------------
/src/pages/download/ModelTab.tsx:
--------------------------------------------------------------------------------
1 | import Button from "@/components/ui/Button";
2 | import { TabContent } from "@/components/ui/Tab";
3 | import React from "react";
4 | import TabStepLabel from "./TabStepLabel";
5 | import CodeBlock from "@/components/ui/CodeBlock";
6 | import TabStep from "./TabStep";
7 | import OperatingSystemSelector from "./OperatingSystemSelector";
8 | import { useDownloadStore } from "@/lib/hooks/useDownload";
9 | import { LOCALSCORE_VERSION } from "@/lib/config";
10 |
11 | const ModelTab = () => {
12 | const { operatingSystem } = useDownloadStore();
13 |
14 | const isWindows = operatingSystem === "Windows";
15 |
16 | return (
17 |
10 |
13 | CPU
11 | {systemInfo.cpu_name}
12 |
14 |
17 | RAM
15 | {systemInfo.ram_gb}GB
16 |
18 |
21 | {extended && (
22 | <>
23 | OS
19 | {systemInfo.kernel_type}
20 |
24 |
27 | Kernel Release
25 | {systemInfo.kernel_release}
26 |
28 |
31 |
32 | Architecture
29 | {systemInfo.cpu_arch}
30 |
33 |
41 |
42 | )}
43 | Version
34 |
38 | {systemInfo.system_version}
39 |
40 |
52 |
53 | {titleContent}
54 |
61 |
62 | {chartComponent}
63 |
64 |
55 |
60 |
23 |
29 | {OFFICIAL_MODELS.map((model) => {
30 | const selectedModelData = data.find(
31 | (d) => d.model.name === model.name
32 | );
33 |
34 | return (
35 |
39 |
40 |
50 |
51 | );
52 | })}
53 |
54 |
55 | );
56 | };
57 |
58 | export default HomepageLeaderboard;
59 |
--------------------------------------------------------------------------------
/src/components/display/AcceleratorInfo.tsx:
--------------------------------------------------------------------------------
1 | import { Accelerator } from "@/lib/types";
2 | import Link from "next/link";
3 | import Image from "next/image";
4 |
5 | interface AcceleratorInfoProps extends Partial
41 |
44 |
45 |
19 |
70 | );
71 | };
72 |
73 | export default AcceleratorInfo;
74 |
--------------------------------------------------------------------------------
/src/pages/model/[id]/index.tsx:
--------------------------------------------------------------------------------
1 | import AcceleratorCompareCard from "@/components/cards/compare/AcceleratorCompareCard";
2 | import Leaderboard from "@/components/leaderboard/Leaderboard";
3 | import ModelInfo from "@/components/display/ModelInfo";
4 | import PageHeader from "@/components/layout/PageHeader";
5 | import Separator from "@/components/ui/Separator";
6 | import {
7 | getPerformanceScores,
8 | getTopAcceleratorsByModelVariants,
9 | } from "@/db/queries";
10 | import { PerformanceScore } from "@/lib/types";
11 | import { GetServerSideProps } from "next";
12 | import React from "react";
13 | import Meta from "@/components/layout/Meta";
14 |
15 | const Index = ({
16 | result,
17 | id,
18 | }: {
19 | result: PerformanceScore | null;
20 | id: string;
21 | }) => {
22 | if (!result) {
23 | return
27 |
48 |
49 |
28 | {isHeader ? (
29 |
47 | {name}
30 | ) : (
31 |
35 | {name}
36 |
37 | )}
38 |
39 |
44 | {type}
45 |
46 |
54 |
69 |
59 | {memory_gb}
60 |
61 |
66 | GB
67 |
68 | Model not found
;
24 | }
25 |
26 | return (
27 |
28 |
32 |
33 |
34 |
36 |
37 |
43 | );
44 | };
45 |
46 | export const getServerSideProps: GetServerSideProps = async (context) => {
47 | const startTime = Date.now();
48 |
49 | const { id: idRaw } = context.query;
50 | const id = idRaw as string;
51 |
52 | // TODO use zod in types.
53 | const modelVariantIds = [parseInt(id)];
54 |
55 | const acceleratorIds = await getTopAcceleratorsByModelVariants({
56 | modelVariantIds,
57 | });
58 |
59 | const results = await getPerformanceScores(acceleratorIds, modelVariantIds);
60 |
61 | const endTime = Date.now();
62 | console.log(`/model/${id} DB fetch took ${endTime - startTime}ms`);
63 |
64 | return {
65 | props: {
66 | result: results[0] || null,
67 | id,
68 | },
69 | };
70 | };
71 |
72 | export default Index;
73 |
--------------------------------------------------------------------------------
/src/components/cards/compare/CompareCardComponents.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from "react";
2 | import Card from "../../ui/Card";
3 | import Separator from "../../ui/Separator";
4 |
5 | // TODO it might be useful to have the card component actually have these nicely.
6 | // so it applies to more than just compare cards.
7 |
8 | interface CardHeaderProps {
9 | text: string;
10 | rightContent?: ReactNode;
11 | }
12 |
13 | interface CardSectionProps {
14 | children: ReactNode;
15 | className?: string;
16 | }
17 |
18 | interface CardContainerProps {
19 | headerText: string;
20 | headerRightContent?: ReactNode;
21 | children: ReactNode;
22 | showSeparator?: boolean;
23 | }
24 |
25 | interface SectionTitleProps {
26 | title: string;
27 | className?: string;
28 | }
29 |
30 | export const CompareCardHeader: React.FC
36 |
39 | );
40 | };
41 |
42 | export const CompareCardSection: React.FC{text}
37 | {rightContent}
38 | {children}
;
47 | };
48 |
49 | export const CompareSectionTitle: React.FC{title}
; 54 | }; 55 | 56 | export const CompareChartContainer = ({ 57 | children, 58 | }: { 59 | children: ReactNode; 60 | }) => { 61 | return{children}
;
62 | };
63 |
64 | export const CompareCardContainer: React.FC
19 |
39 |
20 | {/*
28 |
29 | #{result.performance_rank}
*/} 21 | 25 | {result.accelerator.name} 26 | 27 |
30 | {/*
38 |
45 |
55 | ))}
56 |
57 | );
58 | };
59 |
60 | export default LeaderboardAcceleratorRow;
61 |
--------------------------------------------------------------------------------
/src/components/leaderboard/LeaderboardTable.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import Separator from "../ui/Separator";
3 | import {
4 | AcceleratorType,
5 | PerformanceMetricKey,
6 | PerformanceScore,
7 | SortDirection,
8 | } from "@/lib/types";
9 | import LeaderboardAcceleratorRow from "./LeaderboardAcceleratorRow";
10 | import LeaderboardHeader from "./LeaderboardHeader";
11 |
12 | const LeaderboardTable = ({
13 | data,
14 | filterType,
15 | }: {
16 | data: PerformanceScore | undefined;
17 | filterType: AcceleratorType;
18 | }) => {
19 | const [sortKey, setSortKey] =
20 | useState
46 | {column.label}
47 |
48 |
49 | {formatMetricValue(column.key, result[column.key]).formatted}
50 |
51 |
52 | {formatMetricValue(column.key, result[column.key]).suffix}
53 |
54 |
46 |
68 | );
69 | };
70 |
71 | export default LeaderboardTable;
72 |
--------------------------------------------------------------------------------
/src/components/display/ModelInfo.tsx:
--------------------------------------------------------------------------------
1 | import { Model } from "@/lib/types";
2 | import { getModelParamsString } from "@/lib/utils";
3 | import Image from "next/image";
4 | import Link from "next/link";
5 |
6 | type ModelInfoProps = Model & {
7 | variant?: "standard" | "header";
8 | };
9 |
10 | const ModelInfo = ({
11 | name,
12 | quant,
13 | variantId,
14 | variant = "standard",
15 | params,
16 | }: ModelInfoProps) => {
17 | const isHeader = variant === "header";
18 |
19 | return (
20 |
48 |
54 |
55 |
58 | {sortedData.map((result, index) => (
59 |
67 |
63 |
65 | ))}
66 |
21 |
72 | );
73 | };
74 |
75 | export default ModelInfo;
76 |
--------------------------------------------------------------------------------
/src/components/charts/ModelMetricsChart.tsx:
--------------------------------------------------------------------------------
1 | import { PerformanceMetricKey, PerformanceScore } from "@/lib/types";
2 | import { getColor } from "@/lib/utils";
3 | import { useMemo } from "react";
4 | import MetricsBarChart from "./MetricsBarChart";
5 |
6 | function ModelMetricsChart({
7 | data,
8 | selectedModel,
9 | highlightedAccelerator,
10 | metricKey,
11 | sortDirection = "desc",
12 | xAxisLabel = "",
13 | }: {
14 | data: PerformanceScore[];
15 | selectedModel: { name: string; quant: string };
16 | highlightedAccelerator?: { name: string; memory: number };
17 | metricKey: PerformanceMetricKey;
18 | sortDirection?: "asc" | "desc";
19 | xAxisLabel?: string;
20 | }) {
21 | const chartData = useMemo(() => {
22 | const selectedModelData = data.find(
23 | (item) =>
24 | item.model.name === selectedModel.name &&
25 | item.model.quant === selectedModel.quant
26 | );
27 |
28 | if (!selectedModelData) return [];
29 |
30 | return [...selectedModelData.results]
31 | .sort((a, b) => {
32 | const aValue = a[metricKey] || 0;
33 | const bValue = b[metricKey] || 0;
34 | return sortDirection === "desc" ? bValue - aValue : aValue - bValue;
35 | })
36 | .slice(0, 10)
37 | .map((item, idx) => {
38 | const isHighlighted =
39 | highlightedAccelerator &&
40 | item.accelerator.name === highlightedAccelerator.name &&
41 | item.accelerator.memory_gb == highlightedAccelerator.memory;
42 |
43 | return {
44 | name: item.accelerator.name,
45 | memory: item.accelerator.memory_gb,
46 | value: item[metricKey] || 0,
47 | // color: isHighlighted ? "#582acbee" : getColor(idx, 10),
48 | color: getColor(idx, 10),
49 | isHighlighted: !!isHighlighted,
50 | };
51 | });
52 | }, [data, selectedModel, highlightedAccelerator, metricKey, sortDirection]);
53 |
54 | return (
55 |
29 | {variant === "standard" ? (
30 |
34 |
50 |
51 | {name}
35 |{quant}
36 | 37 | ) : ( 38 |
39 |
48 | )}
49 | {name}
40 |45 | {quant} 46 |
47 |
56 |
61 | {getModelParamsString(params)}
62 |
63 |
68 | params
69 |
70 |
71 | e.preventDefault()}
37 | >
38 |
51 | );
52 | };
53 |
54 | const LeaderboardHeader = ({
55 | onSort,
56 | currentSortKey,
57 | sortDirection,
58 | }: {
59 | onSort: (key: PerformanceMetricKey) => void;
60 | currentSortKey: PerformanceMetricKey;
61 | sortDirection: SortDirection;
62 | }) => {
63 | return (
64 | <>
65 |
39 | {text}
40 | {showArrow && (
41 |
42 |
50 |
18 |
30 | );
31 |
32 | const LatestRunBody = ({ run }: { run: Run }) => (
33 |
19 |
23 | Test #{run.id}
24 |
25 |
29 | 26 | {dayjs.utc(run.created_at).local().format("MM/DD/YYYY - h:mm A")} 27 |
28 |
34 |
58 | );
59 |
60 | const LatestRunCard: React.FC<{ run: Run }> = ({ run }) => (
61 |
35 |
46 |
12 |
18 |
19 |
27 |
28 |
38 | );
39 | };
40 |
41 | const NavigationLinks = () => {
42 | const router = useRouter();
43 | const currentPath = router.pathname;
44 |
45 | return (
46 |
47 |
48 | Home
49 |
50 |
51 | Latest Results
52 |
53 |
54 | Download
55 |
56 |
57 | About
58 |
59 |
60 | Blog
61 |
62 |
63 | );
64 | };
65 |
66 | const HeaderLink = ({
67 | href,
68 | children,
69 | currentPath,
70 | }: {
71 | href: string;
72 | children: React.ReactNode;
73 | currentPath: string;
74 | }) => {
75 | const isActive = currentPath === href;
76 |
77 | return (
78 |
86 | {children}
87 |
88 | );
89 | };
90 |
91 | export default Header;
92 |
--------------------------------------------------------------------------------
/src/components/ui/CodeBlock.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, ReactNode } from "react";
2 |
3 | interface CodeBlockProps {
4 | children: ReactNode;
5 | className?: string;
6 | }
7 |
8 | const CodeBlock: React.FC
33 |
71 | );
72 | };
73 |
74 | export default CodeBlock;
75 |
--------------------------------------------------------------------------------
/src/db/schema.sql:
--------------------------------------------------------------------------------
1 | -- Core tables
2 | CREATE TABLE accelerators (
3 | id UUID PRIMARY KEY,
4 | name VARCHAR(255) NOT NULL,
5 | type VARCHAR(16) NOT NULL, -- intended to be cpu, gpu, tpu, etc.
6 | memory_gb DECIMAL(10,2),
7 | manufacturer VARCHAR(255), -- apple, nvidia, intel, amd, etc.
8 | created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
9 | );
10 |
11 | CREATE TABLE models (
12 | id UUID PRIMARY KEY,
13 | name VARCHAR(255) NOT NULL,
14 | -- TODO what else can we get from llama.cpp easily
15 | created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
16 | );
17 |
18 | CREATE TABLE model_variants (
19 | id UUID PRIMARY KEY,
20 | model_id UUID REFERENCES models(id),
21 | -- variant_name VARCHAR(255), -- TODO remove?
22 | quantization VARCHAR(50),
23 | created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
24 | );
25 |
26 | CREATE TABLE runtimes (
27 | id UUID PRIMARY KEY,
28 | name VARCHAR(255) NOT NULL,
29 | version VARCHAR(255),
30 | commit_hash VARCHAR(255),
31 | release_date DATE,
32 | created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
33 | );
34 | -- TODO runtime types? Vision, Language, etc?
35 |
36 | -- System information for benchmark runs
37 | CREATE TABLE benchmark_systems (
38 | id UUID PRIMARY KEY,
39 | cpu_name VARCHAR(255),
40 | cpu_architecture VARCHAR(255),
41 | ram_gb INTEGER,
42 | kernel_type VARCHAR(255),
43 | kernel_release VARCHAR(255),
44 | system_version VARCHAR(255),
45 | system_architecture VARCHAR(255),
46 | created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
47 | );
48 |
49 | -- Main benchmark results table
50 | CREATE TABLE benchmark_runs (
51 | id UUID PRIMARY KEY,
52 | system_id UUID REFERENCES benchmark_systems(id),
53 | accelerator_id UUID REFERENCES accelerators(id),
54 | model_variant_id UUID REFERENCES model_variants(id),
55 | runtime_id UUID REFERENCES runtimes(id),
56 | run_date TIMESTAMP WITH TIME ZONE,
57 | -- driver_version VARCHAR(255),
58 | created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
59 | );
60 |
61 | -- Detailed test results
62 | CREATE TABLE test_results (
63 | id UUID PRIMARY KEY,
64 | benchmark_run_id UUID REFERENCES benchmark_runs(id),
65 | test_name VARCHAR(255), -- e.g., 'pp16', 'tg32', 'pp1024+tg256'
66 | prompt_length INTEGER,
67 | generation_length INTEGER,
68 | avg_time_ms DECIMAL(15,2),
69 | power_watts DECIMAL(10,2),
70 | tokens_processed INTEGER,
71 | tokens_per_second DECIMAL(10,2),
72 | tokens_per_second_per_watt DECIMAL(10,4),
73 | context_window_size INTEGER,
74 | vram_used_mb DECIMAL(10,2),
75 | time_to_first_token_ms DECIMAL(10,2),
76 | created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
77 | );
--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import chroma from "chroma-js";
2 | import { PerformanceMetricKey } from "./types";
3 | import { z } from "zod";
4 |
5 | export const capitalize = (str: string) => {
6 | // Check if the input is a string and not empty
7 | if (typeof str !== "string" || str.length === 0) {
8 | return str;
9 | }
10 |
11 | // Capitalize the first letter and concatenate with the rest of the string
12 | return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
13 | };
14 |
15 | const scale = chroma
16 | .cubehelix()
17 | .start(280)
18 | .rotations(-0.5)
19 | .gamma(0.8)
20 | .lightness([0.3, 0.8])
21 | .scale();
22 |
23 | export const getColor = (index: number, max: number = 10) => {
24 | return scale(index / max).hex();
25 | };
26 |
27 | export function formatMetricValue(
28 | key: PerformanceMetricKey,
29 | value: number
30 | ): { formatted: string; suffix: string | null; simple: string } {
31 | if (!value) return { formatted: "N/A", suffix: null, simple: "N/A" };
32 | switch (key) {
33 | case "avg_prompt_tps":
34 | return {
35 | formatted: value.toFixed(),
36 | suffix: "tokens/s",
37 | simple: value.toFixed(),
38 | };
39 |
40 | case "avg_gen_tps":
41 | return {
42 | formatted: value > 100 ? value.toFixed() : value.toFixed(1),
43 | suffix: "tokens/s",
44 | simple: value > 100 ? value.toFixed() : value.toFixed(1),
45 | };
46 |
47 | case "avg_ttft":
48 | return {
49 | formatted: value >= 1000 ? (value / 1000).toFixed(2) : value.toFixed(),
50 | suffix: value >= 1000 ? "sec" : "ms",
51 | simple: value.toFixed(),
52 | };
53 |
54 | case "performance_score":
55 | return {
56 | formatted: value.toFixed(),
57 | suffix: null,
58 | simple: value.toFixed(),
59 | };
60 |
61 | default:
62 | throw new Error(`Unsupported column key: ${key}`);
63 | }
64 | }
65 |
66 | export const getModelParamsString = (params: number): string => {
67 | if (params >= 1e12) {
68 | return (params / 1e12).toFixed(1) + "T";
69 | } else if (params >= 1e9) {
70 | return (params / 1e9).toFixed(1) + "B";
71 | } else {
72 | return (params / 1e6).toFixed() + "M";
73 | }
74 | };
75 |
76 | export const stringOrDateToString = z
77 | .union([z.string(), z.date(), z.null()])
78 | .transform((val) => {
79 | if (!val) return "";
80 | if (val instanceof Date) return val.toISOString();
81 | return String(val);
82 | });
83 |
84 | export const stringOrDateToDate = z
85 | .union([z.string(), z.date(), z.null()])
86 | .transform((val) => {
87 | if (!val) return new Date();
88 | if (val instanceof Date) return val;
89 | return new Date(val);
90 | });
91 |
92 | export const numberOrStringToNumber = z
93 | .union([z.string(), z.number(), z.null()])
94 | .transform((val) => (val ? Number(val) : 0));
95 |
--------------------------------------------------------------------------------
/src/pages/latest.tsx:
--------------------------------------------------------------------------------
1 | import PageHeader from "@/components/layout/PageHeader";
2 | import { getBenchmarkResults } from "@/db/queries";
3 | import { Run } from "@/lib/types";
4 | import { GetServerSideProps } from "next";
5 | import { useRouter } from "next/router";
6 | import React from "react";
7 | import LatestRunCard from "@/components/cards/LatestRunCard";
8 | import Button from "@/components/ui/Button";
9 | import Meta from "@/components/layout/Meta";
10 |
11 | const PaginationControls = () => {
12 | const router = useRouter();
13 | const { offset } = router.query;
14 | const currentOffset = Number(offset) || 0;
15 |
16 | const handleNext = () => {
17 | router.push({
18 | pathname: router.pathname,
19 | query: { ...router.query, offset: currentOffset + 10 },
20 | });
21 | };
22 |
23 | const handlePrevious = () => {
24 | router.push({
25 | pathname: router.pathname,
26 | query: { ...router.query, offset: currentOffset - 10 },
27 | });
28 | };
29 |
30 | return (
31 | {children}
34 |
70 |
32 | {currentOffset > 0 && (
33 |
39 | )}
40 |
46 |
47 | );
48 | };
49 |
50 | const Latest = ({ results }: { results: Run[] }) => {
51 | return (
52 | <>
53 |
57 |
58 |
59 | Latest LocalScore Results
60 |
68 |
69 | );
70 | };
71 |
72 | export const getServerSideProps: GetServerSideProps = async (context) => {
73 | context.res.setHeader("Cache-Control", "public, s-maxage=5");
74 |
75 | const startTime = Date.now();
76 | const { offset } = context.query;
77 | const offsetValue = offset ? parseInt(offset as string) : 0;
78 |
79 | const results = await getBenchmarkResults({
80 | sortDirection: "desc",
81 | limit: 10,
82 | offset: offsetValue,
83 | });
84 |
85 | const endTime = Date.now();
86 | console.log(`/latest DB fetch took ${endTime - startTime}ms`);
87 |
88 | return {
89 | props: {
90 | results,
91 | },
92 | };
93 | };
94 |
95 | export default Latest;
96 |
--------------------------------------------------------------------------------
/public/icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/components/cards/compare/AcceleratorCompareCard.tsx:
--------------------------------------------------------------------------------
1 | // AcceleratorCompareCard.tsx
2 | import ModelMetricsChart from "@/components/charts/ModelMetricsChart";
3 | import { NUM_DEFAULT_GRAPH_RESULTS } from "@/lib/config";
4 | import {
5 | Accelerator,
6 | PerformanceMetricKey,
7 | PerformanceScore,
8 | UniqueAccelerator,
9 | } from "@/lib/types";
10 | import React, { useState } from "react";
11 | import { useInitialCompareSelection } from "./useInitialCompareSelection";
12 | import { MetricSortDirection } from "@/lib/constants";
13 | import CompareCard from "./CompareCard";
14 | import AcceleratorSelect from "./AcceleratorSelect";
15 |
16 | const AcceleratorCompareCard = ({
17 | result,
18 | }: {
19 | result: PerformanceScore | null;
20 | }) => {
21 | const [selectedKey, setSelectedKey] =
22 | useState
61 | {results.map((run) => (
62 |
65 |
66 | Model not found
;
45 | }
46 |
47 | const selectedResults = {
48 | ...result,
49 | results: selectedAccelerators.length
50 | ? result.results.filter((r) =>
51 | selectedAccelerators.some(
52 | (acc) =>
53 | acc.name === r.accelerator.name &&
54 | acc.memory === r.accelerator.memory_gb
55 | )
56 | )
57 | : result.results.slice(0, NUM_DEFAULT_GRAPH_RESULTS),
58 | };
59 |
60 | const model = result.model;
61 |
62 | return (
63 | 27 | There are two ways to run LocalScore. The easiest way to get started is 28 | to download one of the Official Models. If you have .gguf models already 29 | you run LocalScore with them. 30 |
31 | 32 |
44 |
57 |
58 |
45 | Having issues with the CLI client? Check out the{" "}
46 |
51 | For further documentation on the LocalScore CLI, check out the{" "}
52 |
59 |
75 |
76 | );
77 | };
78 |
79 | export const getServerSideProps: GetServerSideProps = async (context) => {
80 | // Get user-agent from request headers
81 | const userAgent = context.req.headers["user-agent"] || "";
82 |
83 | // Detect OS from user agent
84 | let detectedOS = "MacOS/Linux";
85 |
86 | if (userAgent.indexOf("Win") !== -1) detectedOS = "Windows";
87 |
88 | return {
89 | props: {
90 | os: detectedOS,
91 | },
92 | };
93 | };
94 |
95 | export default Download;
96 |
--------------------------------------------------------------------------------
/src/components/ui/Tab.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, ReactNode, useEffect } from "react";
2 |
3 | interface TabProps {
4 | label: string;
5 | children: ReactNode;
6 | className?: string;
7 | }
8 |
9 | export const Tab: React.FC
60 | Need help? Check out this video
61 |
62 |
63 |
73 |
74 | {children}
;
21 | };
22 |
23 | type TabStyle = "tab" | "invisible";
24 |
25 | interface TabsProps {
26 | children: React.ReactElement
99 | {/* Tab Headers - hidden when style is "invisible" */}
100 | {style !== "invisible" && (
101 |
123 | );
124 | };
125 |
--------------------------------------------------------------------------------
/src/components/ui/GenericMultiSelect.tsx:
--------------------------------------------------------------------------------
1 | import { multiSelectStyles, selectTheme } from "@/lib/selectStyles";
2 | import Select, {
3 | GroupBase,
4 | MultiValue,
5 | MultiValueGenericProps,
6 | } from "react-select";
7 | import MultiSelectOption from "../select/MultiSelectOption";
8 | import MenuListWithHeader from "../select/CustomMenuList";
9 |
10 | interface GenericItem {
11 | id?: number;
12 | variantId?: number;
13 | name: string;
14 | [key: string]: any;
15 | }
16 |
17 | interface UniqueIdentifier {
18 | name: string;
19 | [key: string]: any;
20 | }
21 |
22 | interface GenericMultiSelectProps<
23 | T extends GenericItem,
24 | U extends UniqueIdentifier
25 | > {
26 | items: T[];
27 | onChange: (selectedItems: T[]) => void;
28 | defaultValue?: U[];
29 | placeholder?: string;
30 | headerText: string;
31 | itemKey: keyof T;
32 | matchFn: (item: T, uniqueItem: U) => boolean;
33 | renderOptionLabel: (item: T, isFocused: boolean) => React.ReactNode;
34 | renderMultiValueLabel: (item: T) => React.ReactNode;
35 | filterFn?: (item: T, inputValue: string) => boolean;
36 | className?: string;
37 | }
38 |
39 | interface SelectOption
102 | {React.Children.map(children, (child, index) => (
103 |
110 | ))}
111 |
112 | )}
113 |
114 | {/* Content */}
115 |
116 | {React.Children.map(children, (child, index) => (
117 |
122 |
118 | {child.props.children}
119 |
120 | ))}
121 | e.stopPropagation()}>
100 | , true>
101 | isMulti
102 | options={options}
103 | defaultValue={defaultOptions}
104 | onChange={handleChange}
105 | className={className}
106 | placeholder={placeholder || `Select ${headerText.toLowerCase()}...`}
107 | classNamePrefix="select"
108 | styles={multiSelectStyles}
109 | hideSelectedOptions={false}
110 | filterOption={(option, inputValue) => {
111 | return (filterFn || defaultFilterFn)(option.data.item, inputValue);
112 | }}
113 | theme={selectTheme}
114 | components={{
115 | Option: (props) => (
116 |
117 | {renderOptionLabel(props.data.item, props.isFocused)}
118 |
119 | ),
120 | MultiValueLabel: GenericMultiValueLabel,
121 | MenuList: (props) => (
122 |
127 | );
128 | }
129 |
130 | export default GenericMultiSelect;
131 |
--------------------------------------------------------------------------------
/src/components/informational/TestDescriptionsTable.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const testScenarios = [
4 | {
5 | name: "pp1024+tg16",
6 | promptProcessing: 1024,
7 | textGeneration: 16,
8 | description: "Classification, sentiment analysis, keyword extraction.", // Medium prompt, tiny output
9 | },
10 | {
11 | name: "pp4096+tg256",
12 | promptProcessing: 4096,
13 | textGeneration: 256,
14 | description: "Long document Q&A, RAG, short summary of extensive text.", // Very long prompt, short output
15 | },
16 | {
17 | name: "pp2048+tg256",
18 | promptProcessing: 2048,
19 | textGeneration: 256,
20 | description: "Article summarization, contextual paragraph generation.", // Long prompt, short output
21 | },
22 | {
23 | name: "pp2048+tg768",
24 | promptProcessing: 2048,
25 | textGeneration: 768,
26 | description:
27 | "Drafting detailed replies, multi-paragraph generation, content sections.", // Long prompt, medium output
28 | },
29 | {
30 | name: "pp1024+tg1024",
31 | promptProcessing: 1024,
32 | textGeneration: 1024,
33 | description:
34 | "Balanced Q&A, content drafting, code generation based on long sample.", // Medium prompt, medium output
35 | },
36 | {
37 | name: "pp1280+tg3072",
38 | promptProcessing: 1280,
39 | textGeneration: 3072,
40 | description:
41 | "Complex reasoning, chain-of-thought, long-form creative writing, code generation.", // Medium prompt, very long output
42 | },
43 | {
44 | name: "pp384+tg1152",
45 | promptProcessing: 384,
46 | textGeneration: 1152,
47 | description:
48 | "Prompt expansion, explanation generation, creative writing, code generation.", // Short prompt, long output
49 | },
50 | {
51 | name: "pp64+tg1024",
52 | promptProcessing: 64,
53 | textGeneration: 1024,
54 | description:
55 | "Short prompt creative generation (poetry/story), Q&A, code generation.", // Very short prompt, long output
56 | },
57 | {
58 | name: "pp16+tg1536",
59 | promptProcessing: 16,
60 | textGeneration: 1536,
61 | description: "Creative text writing/storytelling, Q&A, code generation.", // Tiny prompt, very long output
62 | },
63 | ];
64 |
65 | const TestDescriptionsTable = () => {
66 | return (
67 |
68 |
69 |
70 |
108 |
109 | );
110 | };
111 |
112 | export default TestDescriptionsTable;
113 |
--------------------------------------------------------------------------------
/src/components/cards/compare/ModelCompareCard.tsx:
--------------------------------------------------------------------------------
1 | import AcceleratorMetricsChart from "@/components/charts/AcceleratorMetricsChart";
2 | import { NUM_DEFAULT_GRAPH_RESULTS, OFFICIAL_MODELS } from "@/lib/config";
3 | import {
4 | Accelerator,
5 | Model,
6 | PerformanceMetricKey,
7 | PerformanceScore,
8 | UniqueModel,
9 | } from "@/lib/types";
10 | import React, { useState } from "react";
11 | import CompareCard from "./CompareCard";
12 | import GenericMultiSelect from "@/components/ui/GenericMultiSelect";
13 | import ModelSelectOptionLabel from "@/components/select/ModelSelectOptionLabel";
14 | import { useInitialCompareSelection } from "./useInitialCompareSelection";
15 | import { MetricSortDirection } from "@/lib/constants";
16 |
17 | interface ModelSelectProps {
18 | models: Model[];
19 | onChange: (selectedModels: Model[]) => void;
20 | defaultValue?: UniqueModel[];
21 | }
22 |
23 | const ModelSelect: React.FC| 72 | PROMPT TOKENS 73 | | 74 |75 | TEXT GENERATION 76 | | 77 |78 | SAMPLE USE CASES 79 | | 80 |
|---|---|---|
|
86 |
87 | {test.promptProcessing}
88 |
89 | tokens
90 |
91 |
92 | |
93 |
94 |
95 | {test.textGeneration}
96 |
97 | tokens
98 |
99 |
100 | |
101 |
102 | {test.description}
103 | |
104 |
44 |
47 | )}
48 | />
49 | );
50 | };
51 |
52 | const ModelCompareCard = ({
53 | results,
54 | accelerator,
55 | }: {
56 | results: PerformanceScore[] | null;
57 | accelerator: Accelerator;
58 | }) => {
59 | const [selectedKey, setSelectedKey] =
60 | useState{model.name}
45 |{model.quant}
46 |Accelerator not found
;
78 | }
79 | const models: Model[] = results.map((result) => result.model);
80 |
81 | const selectedResults = selectedModels.length
82 | ? results.filter((result) =>
83 | selectedModels.some(
84 | (model) =>
85 | model.name === result.model.name &&
86 | model.quant === result.model.quant
87 | )
88 | )
89 | : results.slice(0, NUM_DEFAULT_GRAPH_RESULTS);
90 |
91 | return (
92 |
16 | {OFFICIAL_MODELS.map((m, i) => (
17 |
31 | ))}
32 |
33 | );
34 | };
35 |
36 | const OfficialTab = () => {
37 | const { selectedModel, operatingSystem, setOperatingSystem } =
38 | useDownloadStore();
39 |
40 | const isWindows = operatingSystem === "Windows";
41 | const activeOSTab = isWindows ? 0 : 1;
42 |
43 | const selectedModelFilename = `localscore-${selectedModel.humanLabel.toLowerCase()}`;
44 |
45 | return (
46 |
59 | 1.
60 |
65 | Download LocalScore
66 |
67 |
68 |
71 | 2.
72 |
77 | Download {selectedModel.hfName}
78 |
79 |
80 |
96 | Open cmd.exe and run:
97 |
98 |
99 | 3.
100 |
101 | {`localscore-${LOCALSCORE_VERSION}.exe -m ${selectedModel.hfFilename}`}
102 |
103 |
104 |
8 |
9 |
10 | 
11 | LocalScore is a Mozilla Builders project.
12 |
13 |
86 |
104 | );
105 | }
106 |
107 | return null;
108 | };
109 |
110 | // Chart margins based on chart type
111 | const margins = {
112 | top: 20,
113 | right: isMobile ? 20 : chartType === "byModel" ? 50 : 40,
114 | left: isMobile
115 | ? chartType === "byAccelerator"
116 | ? -80
117 | : -20
118 | : chartType === "byAccelerator"
119 | ? -20
120 | : 0,
121 | bottom: 40,
122 | };
123 |
124 | return (
125 | {label}
87 | {payload.map((entry, index) => { 88 | // Handle different value types (number or string) 89 | const value = 90 | typeof entry.value === "number" 91 | ? entry.value.toFixed(1) 92 | : entry.value; 93 | 94 | return ( 95 |99 | {`${value} ${MetricUnits[metricKey]}`} 100 |
101 | ); 102 | })} 103 |
25 |
33 | );
34 |
35 | const MetricValue = ({
36 | result,
37 | metricKey,
38 | }: {
39 | result: PerformanceScore;
40 | metricKey: PerformanceMetricKey;
41 | }) => {
42 | const value = result.results[0]?.[metricKey];
43 | if (!value) return
26 | {result.model.name}
27 |
28 |
29 | {result.model.quant}
30 | {getModelParamsString(result.model.params)}
31 |
32 | N/A
;
44 |
45 | const formatted = formatMetricValue(metricKey, value);
46 | return (
47 |
48 | {formatted.formatted}
49 | {formatted.suffix}
50 |
51 | );
52 | };
53 |
54 | const MetricRow = ({
55 | label,
56 | results,
57 | metricKey,
58 | }: {
59 | label: string;
60 | results: PerformanceScore[];
61 | metricKey: PerformanceMetricKey;
62 | }) => (
63 |
64 |
71 | );
72 |
73 | const LocalScoreRow = ({ results }: { results: PerformanceScore[] }) => (
74 |
65 | {label}
66 |
67 | {results.map((result, i) => (
68 |
75 |
93 | );
94 |
95 | const AcceleratorPerformanceOverview = ({
96 | results,
97 | }: {
98 | results: PerformanceScore[];
99 | }) => {
100 | const sortedResults = [...results].sort((a, b) => {
101 | if (a.model.params < b.model.params) return -1;
102 | if (a.model.params > b.model.params) return 1;
103 | return 0;
104 | });
105 |
106 | return (
107 | LocalScore
76 | {results.map((result, i) => (
77 |
78 | {result.results[0]?.performance_score ? (
79 |
80 | {
81 | formatMetricValue(
82 | "performance_score",
83 | result.results[0]?.performance_score
84 | ).formatted
85 | }
86 |
87 | ) : (
88 | "N/A"
89 | )}
90 |
91 | ))}
92 |
111 |
116 |
117 | Model
112 | {sortedResults.map((result, i) => (
113 | Accelerator not found
;
155 | }
156 |
157 | return (
158 | <>
159 |
163 |
164 |
61 |
73 | );
74 | };
75 |
76 | const CustomOption = (props: OptionPropsSearch
65 | )} 66 | 67 |
18 |
21 | );
22 | };
23 |
24 | const AboutPage = () => {
25 | return (
26 | <>
27 |
31 | {text}
19 |34 | LocalScore is an open-source benchmarking tool designed to measure how 35 | fast Large Language Models (LLMs) run on your specific hardware. It is 36 | also a public database for the benchmark results. 37 |
38 |39 | {`Whether you're wondering if your computer can smoothly run an 8 billion 40 | parameter model or trying to decide which GPU to buy for your local AI 41 | setup, LocalScore provides the data you need to make informed decisions.`} 42 |
43 |44 | The benchmark results are meant to be directly comparable to each other. 45 | They also should give a fairly good indication of what real world 46 | performance you may see on your hardware. Unfortunately the benchmark 47 | suite cannot cover all possible scenarios (speculative decoding, etc), 48 | but it should give a rough idea of how well your hardware will perform. 49 |
50 |52 | LocalScore measures three key performance metrics for local LLM 53 | performance. 54 |
55 |-
56 |
- 57 | 58 | Prompt Processing Speed: 59 | 60 | 61 | How quickly your system processes input text (tokens per second) 62 | 63 | 64 | 65 |
- 66 | 67 | Generation Speed: 68 | 69 | 70 | How fast your system generates new text (tokens per second) 71 | 72 | 73 | 74 |
- 75 | 76 | Time to First Token: 77 | 78 | 79 | The latency before the first response appears (milliseconds) 80 | 81 | 82 |
84 | These metrics are combined into a single LocalScore which gives 85 | you a straightforward way to compare different hardware configurations. 86 |
87 |88 | A score of 1,000 is excellent, 250 is passable, and below 100 will 89 | likely be a poor user experience in some regard. 90 |
91 |
92 | Under the hood, LocalScore leverages{" "}
93 |
101 | LocalScore has a straightforward test suite which is meant to emulate 102 | many common LLM tasks. The details of the tests are found in the table 103 | below: 104 |
105 |-
108 |
-
109 |
Download LocalScore 110 |
111 | - Run the benchmark and view your results 112 |
- 113 | Optionally submit your results to our public database to help the 114 | community 115 | 116 |
118 | When you submit your results, they become part of our growing database 119 | of hardware performance profiles, helping others understand what they 120 | can expect from similar setups. 121 |
122 |123 | We collect the following non personally identifiable system information: 124 |
125 |-
126 |
- 127 | Operating System Info: 128 | Name, Version, Release 129 | 130 | 131 |
- 132 | CPU Info: 133 | Name, Architecture 134 | 135 |
- 136 | RAM Info: 137 | Capacity 138 | 139 |
- 140 | GPU Info: 141 | Name, Manufacturer, Total Memory 142 | 143 |
LocalScore currently supports:
{" "} 146 |-
147 |
- 148 | CPUs 149 | (x86 and ARM) 150 | 151 |
- NVIDIA GPUs 152 |
- AMD GPUs 153 |
- 154 | Apple Silicon 155 | (M1/M2/etc) 156 | 157 |
159 | The benchmark currently only supports single-GPU setups, which we 160 | believe represents the most practical approach for most users running 161 | LLMs locally. Similar to how gaming has shifted predominately to single 162 | GPU setups. In the future we may support multi-GPU setups. 163 |
164 |166 | {`Due to limitations with 167 | Windows, you can't run Llamafile's which are larger than 4GB directly. 168 | Instead, you'll need to use LocalScore as a standalone utility and pass 169 | in your models in GGUF format to the benchmarking application.`} 170 |
171 |
173 |
193 |
201 |
202 |
174 | LocalScore is a
175 |
203 | {`We welcome contributions, suggestions, and feedback from the community. 204 | Whether you're interested in improving the benchmarking methodology, 205 | adding support for new hardware/models, or enhancing the user experience, your 206 | involvement is appreciated.`} 207 |
208 |209 | Join us in creating a transparent, useful resource that helps everyone 210 | make the most of running LLMs on local hardware. 211 |
212 |
214 | You can find the code for the
215 |
40 | {title}
41 |
42 | );
43 | };
44 |
45 | // Component for page header with title and date
46 | interface PageHeaderProps {
47 | id: number;
48 | runDate: string;
49 | }
50 |
51 | const PageHeader: React.FC
54 |
62 | );
63 | };
64 |
65 | // Component for consistently displaying formatted metric values
66 | interface MetricValueProps {
67 | metricType: PerformanceMetricKey;
68 | value: number;
69 | }
70 |
71 | const MetricValue: React.FC
55 | TEST #{id} RESULTS
56 |
57 | 58 | {dayjs.utc(runDate).local().format("MM/DD/YYYY - h:mm A")} 59 |
60 |
76 |
81 | );
82 | };
83 |
84 | // Results table for detailed benchmark results
85 | interface ResultsTableProps {
86 | result: DetailedRun;
87 | }
88 |
89 | const ResultsTable: React.FC
77 | {formatted}
78 |
79 | {suffix}
80 |
92 |
122 | );
123 | };
124 |
125 | const TestConfiguration = ({ result }: { result: DetailedRun }) => {
126 | return (
127 |
93 |
108 |
119 | ))}
120 |
121 | TEST NAME
94 |
95 | PROMPT
96 |
97 |
98 | GENERATION
99 |
100 |
101 | TTFT
102 |
103 |
104 |
109 | {result.name}
110 |
111 |
128 |
143 | );
144 | };
145 |
146 | // Main page component
147 | const Page: React.FC<{
148 | result: DetailedRun | null;
149 | compareResult: PerformanceScore | null;
150 | }> = ({ result, compareResult }) => {
151 | const [selectedKey, setSelectedKey] =
152 | useState
129 |
137 |
138 |
139 |
142 | Result not found
;
156 | }
157 |
158 | return (
159 |
160 |
164 |
165 |
227 |
228 | );
229 | };
230 |
231 | export const getServerSideProps: GetServerSideProps = async (context) => {
232 | context.res.setHeader(
233 | "Cache-Control",
234 | "public, max-age=604800, stale-while-revalidate=604800"
235 | );
236 |
237 | const startTime = Date.now();
238 |
239 | const { id } = context.query;
240 | const runId = parseInt(id as string);
241 |
242 | const result = await getBenchmarkResult(runId);
243 |
244 | if (!result) {
245 | return {
246 | props: {
247 | result: null,
248 | compareResults: null,
249 | },
250 | };
251 | }
252 |
253 | const compareAccelIds = await getAcceleratorsPerformanceByModelVariant(
254 | result.model_variant_id
255 | );
256 |
257 | const compareResults = await getPerformanceScores(
258 | [...compareAccelIds, result.accelerator_id],
259 | [result.model_variant_id]
260 | );
261 |
262 | if (!compareResults || compareResults.length === 0) {
263 | return {
264 | props: {
265 | result: null,
266 | compareResults: null,
267 | },
268 | };
269 | }
270 |
271 | const compareResult = compareResults[0];
272 |
273 | const foundResult = compareResult.results.find(
274 | (r) => r.accelerator.id === result.accelerator_id
275 | );
276 | if (foundResult) {
277 | Object.assign(foundResult, {
278 | performance_score: result.performance_score,
279 | avg_prompt_tps: result.avg_prompt_tps,
280 | avg_gen_tps: result.avg_gen_tps,
281 | avg_ttft: result.avg_ttft_ms,
282 | accelerator: {
283 | ...foundResult.accelerator,
284 | name: `This System (${foundResult.accelerator.name})`,
285 | },
286 | });
287 | }
288 |
289 | const endTime = Date.now();
290 | console.log(`/result/${id} DB fetch took ${endTime - startTime}ms`);
291 |
292 | return {
293 | props: {
294 | result,
295 | compareResult,
296 | },
297 | };
298 | };
299 |
300 | export default Page;
301 |
--------------------------------------------------------------------------------
172 |
174 |
175 |
178 |
180 | Explore All Results
181 |
182 |
183 |
184 |
204 |
205 | 185 | {result.model.name} - {result.model.quant} 186 |
187 |
188 |
193 |
208 |
211 |
212 |
215 |
218 |
219 |