initial commit

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

Dockerfile

@@ -0,0 +1,65 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# Uncomment the following lines if you want to use a secret at buildtime, 
+# for example to access your private npm packages
+# RUN --mount=type=secret,id=HF_EXAMPLE_SECRET,mode=0444,required=true \
+#     $(cat /run/secrets/HF_EXAMPLE_SECRET)
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+# RUN yarn build
+
+# If you use yarn, comment out this line and use the line above
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/.next/cache ./.next/cache
+# COPY --from=builder --chown=nextjs:nodejs /app/.next/cache/fetch-cache ./.next/cache/fetch-cache
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+CMD ["node", "server.js"]

README.md

@@ -4,8 +4,9 @@ emoji: 🏢
 colorFrom: green
 colorTo: gray
 sdk: docker
+app_port: 3000
 pinned: false
 license: mit
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+

app/api/detect/data.ts

@@ -0,0 +1,21 @@
+type Data = {
+  score: number;
+  label: string;
+  box: {
+    xmin: number;
+    ymin: number;
+    xmax: number;
+    ymax: number;
+  };
+}[];
+export function processData(data: Data) {
+  return data.map((i, index) => ({
+    score: i.score,
+    label: i.label,
+    x: i.box.xmin,
+    y: i.box.ymin,
+    width: i.box.xmax - i.box.xmin,
+    height: i.box.ymax - i.box.ymin,
+    key: index,
+  }));
+}

app/api/detect/route.ts

@@ -0,0 +1,58 @@
+import { NextResponse } from "next/server";
+import { extractPart, getImageDimensions, isImageValid } from "./utils";
+import { processData } from "./data";
+import constants from "@/constants";
+import type { DetectResponse } from "@/types";
+
+async function query(file: File, model: string) {
+  const response = await fetch(
+    `https://api-inference.huggingface.co/models/${model}`,
+    {
+      headers: {
+        Authorization: `Bearer ${process.env.HF_TOKEN}`,
+      },
+      method: "POST",
+      body: file,
+    }
+  );
+  const result = await response.json();
+  return result;
+}
+
+export async function POST(request: Request) {
+  const formData = await request.formData();
+  const image = formData.get("file");
+  const model = formData.get("model") as string;
+
+  if (image instanceof Blob) {
+    const buffer = await image.arrayBuffer();
+    const isValidImage = await isImageValid(buffer);
+    if (isValidImage) {
+      const { width, height } = await getImageDimensions(buffer);
+      const matches = [];
+      const labels: string[] = [];
+
+      const result = await query(image, model);
+      if (Array.isArray(result)) {
+        const processed = processData(result);
+        for (let i = 0; i < processed.length; i++) {
+          const item = processed[i];
+          const extract = await extractPart(buffer, item);
+          const labelIndex = labels.findIndex((i) => i === item.label);
+          let colorIndex;
+          if (labelIndex !== -1) {
+            colorIndex = labelIndex % constants.INDICATOR_COLORS.length;
+          } else {
+            colorIndex = labels.length % constants.INDICATOR_COLORS.length;
+            labels.push(item.label);
+          }
+          matches.push({ ...item, extract, colorIndex });
+        }
+
+        const res: DetectResponse = { width, height, matches, labels };
+        return NextResponse.json(res);
+      }
+    }
+  }
+  return NextResponse.json({ error: true });
+}

app/api/detect/utils.ts

@@ -0,0 +1,33 @@
+import sharp from "sharp";
+
+export async function isImageValid(arrayBuffer: ArrayBuffer): Promise<boolean> {
+  try {
+    const metadata = await sharp(Buffer.from(arrayBuffer)).metadata();
+    return metadata.format !== undefined;
+  } catch (error) {
+    return false;
+  }
+}
+
+export async function getImageDimensions(
+  arrayBuffer: ArrayBuffer
+): Promise<{ width: number; height: number }> {
+  const metadata = await sharp(Buffer.from(arrayBuffer)).metadata();
+  return { width: metadata.width || 0, height: metadata.height || 0 };
+}
+
+export async function extractPart(
+  arrayBuffer: ArrayBuffer,
+  {
+    x,
+    y,
+    width,
+    height,
+  }: { x: number; y: number; width: number; height: number }
+) {
+  const out = await sharp(arrayBuffer)
+    .extract({ left: x, top: y, width, height })
+    .toBuffer();
+  const img = out.toString("base64");
+  return img;
+}

app/globals.css

@@ -0,0 +1,83 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+ 
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+ 
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+ 
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+ 
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 10% 3.9%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+ 
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+ 
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+ 
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+ 
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+ 
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+ 
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+ 
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+.dark .score-fg{
+  background-color: #3d8a21  ;
+}
+.light .score-fg{
+  background-color: #8ddf9a;
+}

app/layout.tsx

@@ -0,0 +1,29 @@
+import "./globals.css";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import ThemeProvider from "@/components/layout/ThemeProvider";
+import Header from "@/components/layout/Header";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Object Detection",
+  description: "Object detection with different models",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <Header />
+          <main className="max-w-5xl mx-auto pt-20 px-4">{children}</main>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,35 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import Error from "@/components/layout/Error";
+import Loading from "@/components/layout/Loading";
+import SuccessWrapper from "@/components/layout/SuccessWrapper";
+import ImageInput from "@/components/ImageInput";
+import Results from "@/components/Results";
+import ModelSelector from "@/components/ModelSelector";
+export default function Home() {
+  return (
+    <main className="pb-20">
+      <Card>
+        <CardContent className="px-4 pt-4">
+          <Card className="w-full mb-4">
+            <ModelSelector />
+          </Card>
+          <ImageInput />
+        </CardContent>
+      </Card>
+      <Card className="mt-6">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <h3 className="tracking-tight font-bold text-xl">Results</h3>
+          </div>
+        </CardHeader>
+        <CardContent className="px-4">
+          <Loading />
+          <Error />
+          <SuccessWrapper>
+            <Results />
+          </SuccessWrapper>
+        </CardContent>
+      </Card>
+    </main>
+  );
+}

components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

components/ImageInput/Highlight/Highlight.tsx

@@ -0,0 +1,53 @@
+import useStore from "@/store";
+type CompProps = {
+  parentRef: React.MutableRefObject<HTMLDivElement | null>;
+};
+
+function getPos(ref: React.MutableRefObject<HTMLDivElement | null>) {
+  if (!ref.current) {
+    return [0, 0];
+  }
+  const rect = ref.current.getBoundingClientRect();
+  return [rect.x + rect.width + 24, rect.top + 24];
+}
+
+export default function Highlight({ parentRef }: CompProps) {
+  const item = useStore((state) => state.hovering);
+
+  if (item === null) {
+    return null;
+  }
+
+  const [left, top] = getPos(parentRef);
+  return (
+    <div
+      className="fixed z-50 w-52 bg-white shadow-md dark:bg-zinc-950"
+      style={{ top: `${top}px`, left: `${left}px` }}
+    >
+      <div className="border rounded-md overflow-hidden">
+        <div className="border-b py-1 px-2 text-center font-semibold capitalize">
+          {item.label}
+        </div>
+        <div className="p-2">
+          <div className="relative overflow-hidden aspect-square">
+            <img
+              src={`data:image/png;base64,${item.extract}`}
+              className="absolute left-0 top-0 w-full h-full object-contain"
+            />
+          </div>
+        </div>
+        <div className="px-2 border-t pt-2">
+          <div className="bg-zinc-200  dark:bg-zinc-800 h-1 rounded-md">
+            <div
+              className="h-1 score-fg rounded-md"
+              style={{ width: `${Math.round(item.score * 100)}%` }}
+            />
+          </div>
+        </div>
+        <div className="py-1 px-2 text-center">
+          Score : {item.score.toFixed(4)}
+        </div>
+      </div>
+    </div>
+  );
+}

components/ImageInput/Highlight/index.tsx

@@ -0,0 +1,3 @@
+import Highlight from './Highlight';
+
+export default Highlight;

components/ImageInput/ImageInput.tsx

@@ -0,0 +1,25 @@
+"use client";
+import useStore from "@/store";
+import Preview from "@/components/ImageInput/Preview";
+
+type CompProps = {};
+export default function ImageInput({}: CompProps) {
+  const handleImageChange = useStore((state) => state.handleImageChange);
+  return (
+    <>
+      <label
+        className="grow bg-zinc-100 dark:bg-zinc-900 rounded-md overflow-hidden grid place-items-center py-2"
+        htmlFor="picture"
+      >
+        <Preview />
+        <input
+          className="hidden"
+          id="picture"
+          type="file"
+          accept="image/*"
+          onChange={handleImageChange}
+        />
+      </label>
+    </>
+  );
+}

components/ImageInput/Preview/Markers/Markers.tsx

@@ -0,0 +1,60 @@
+import useStore from "@/store";
+import constants from "@/constants";
+import type { MatchItem } from "@/types";
+type CompProps = {};
+export default function Markers({}: CompProps) {
+  const { matches, width, height } = useStore(({ matches, width, height }) => ({
+    matches,
+    width,
+    height,
+  }));
+
+  return (
+    <>
+      <svg
+        className="absolute inset-x-0 top-0"
+        viewBox={`0 0 ${width} ${height}`}
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        {matches.map((i) => (
+          <Marker item={i} key={i.key} />
+        ))}
+      </svg>
+    </>
+  );
+}
+
+type MarkerProps = {
+  item: MatchItem;
+};
+function Marker({ item }: MarkerProps) {
+  const { setHovering, clearHovering } = useStore(
+    ({ setHovering, clearHovering }) => ({ setHovering, clearHovering })
+  );
+  const selectedLabel = useStore((state) => state.selectedLabel);
+  const isolate = useStore((state) => state.isolate);
+  if (selectedLabel !== "all" && selectedLabel !== item.label) {
+    return null;
+  }
+  if (isolate !== null && isolate !== item.key) {
+    return null;
+  }
+
+  return (
+    <rect
+      x={item.x}
+      y={item.y}
+      width={item.width}
+      height={item.height}
+      className={constants.INDICATOR_COLORS[item.colorIndex]}
+      fill="currentColor"
+      fillOpacity="0.1"
+      stroke="currentColor"
+      strokeWidth="3"
+      key={item.key}
+      onMouseEnter={() => setHovering(item.key)}
+      onMouseLeave={() => clearHovering(item.key)}
+    />
+  );
+}

components/ImageInput/Preview/Markers/index.tsx

@@ -0,0 +1,3 @@
+import Markers from './Markers';
+
+export default Markers;

components/ImageInput/Preview/Preview.tsx

@@ -0,0 +1,42 @@
+"use client";
+import useStore from "@/store";
+import SuccessWrapper from "@/components/layout/SuccessWrapper";
+import Markers from "@/components/ImageInput/Preview/Markers";
+import Highlight from "@/components/ImageInput/Highlight";
+import { useRef } from "react";
+type CompProps = {};
+export default function Preview({}: CompProps) {
+  const previewURL = useStore((state) => state.previewURL);
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  if (!previewURL) {
+    return <Placeholder />;
+  }
+  return (
+    <div className="relative inline-flex overflow-hidden max-w-lg" ref={ref}>
+      <img alt="" className="object-contain" src={previewURL} />
+      <SuccessWrapper>
+        <Highlight parentRef={ref} />
+        <Markers />
+      </SuccessWrapper>
+    </div>
+  );
+}
+
+function Placeholder() {
+  return (
+    <svg
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="w-60 h-60 text-zinc-200 dark:text-zinc-800"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
+      />
+    </svg>
+  );
+}

components/ImageInput/Preview/index.tsx

@@ -0,0 +1,3 @@
+import Preview from './Preview';
+
+export default Preview;

components/ImageInput/index.tsx

@@ -0,0 +1,3 @@
+import ImageInput from './ImageInput';
+
+export default ImageInput;

components/ModelSelector/ModelSelector.tsx

@@ -0,0 +1,59 @@
+"use client";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import useStore from "@/store";
+
+type CompProps = {};
+export default function ModelSelector({}: CompProps) {
+  return (
+    <div className="flex items-center  px-4 py-2 justify-between">
+      <div className="inline-flex items-center space-x-2">
+        <div className="font-bold"> Model : </div>
+        <SelectModel />
+      </div>
+    </div>
+  );
+}
+
+const options = [
+  "facebook/detr-resnet-50",
+  "hustvl/yolos-tiny",
+  "facebook/detr-resnet-101",
+  "hustvl/yolos-small",
+  "valentinafeve/yolos-fashionpedia",
+  "keremberke/yolov5m-license-plate",
+  "facebook/detr-resnet-101-dc5",
+  "nickmuchi/yolos-small-finetuned-license-plate-detection",
+  "microsoft/table-transformer-structure-recognition",
+  "TahaDouaji/detr-doc-table-detection",
+  "hustvl/yolos-base",
+  "biglam/detr-resnet-50_fine_tuned_nls_chapbooks",
+];
+function SelectModel() {
+  const { model, setModel } = useStore((state) => ({
+    model: state.model,
+    setModel: state.setModel,
+  }));
+  return (
+    <Select value={model} onValueChange={setModel}>
+      <SelectTrigger className="w-[500px]">
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent className="w-full">
+        <SelectGroup>
+          {options.map((i) => (
+            <SelectItem value={i} key={i}>
+              {i}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  );
+}

components/ModelSelector/index.tsx

@@ -0,0 +1,3 @@
+import ModelSelector from './ModelSelector';
+
+export default ModelSelector;

components/Results/Filters/Filters.tsx

@@ -0,0 +1,36 @@
+import useStore from "@/store";
+import { useCallback } from "react";
+import clsx from "clsx";
+
+export default function Filters() {
+  const labels = useStore((state) => state.labels);
+  const selectedLabel = useStore((state) => state.selectedLabel);
+  const setSelectedLabel = useStore((state) => state.setSelectedLabel);
+
+  const onClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      setSelectedLabel(e.currentTarget.id);
+    },
+    [setSelectedLabel]
+  );
+  return (
+    <div className="flex flex-wrap">
+      {["all", ...labels].map((i) => (
+        <div className="p-2" key={i}>
+          <button
+            className={clsx(
+              "capitalize px-6 py-1 rounded-full border",
+              selectedLabel === i
+                ? "bg-zinc-300 dark:bg-zinc-700"
+                : "bg-transperant"
+            )}
+            id={i}
+            onClick={onClick}
+          >
+            {i}
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}

components/Results/Filters/index.tsx

@@ -0,0 +1,3 @@
+import Filters from './Filters';
+
+export default Filters;

components/Results/Item/Item.tsx

@@ -0,0 +1,53 @@
+import type { MatchItem } from "@/types";
+import useStore from "@/store";
+import { useCallback } from "react";
+import clsx from "clsx";
+type CompProps = {
+  item: MatchItem;
+  selected: string;
+};
+export default function Item({ item, selected }: CompProps) {
+  const toggleIsolate = useStore((state) => state.toggleIsolate);
+  const isolate = useStore((state) => state.isolate);
+  const onClick = useCallback(() => {
+    toggleIsolate(item.key);
+  }, [toggleIsolate, item]);
+  if (selected !== "all" && selected !== item.label) {
+    return null;
+  }
+
+  return (
+    <button className="p-2 w-full sm:w-1/2 md:w-1/3 lg:w-1/4" onClick={onClick}>
+      <div
+        className={clsx(
+          "border rounded-md overflow-hidden",
+          isolate === item.key &&
+            "dark:border-green-800 dark:bg-green-800/10 border-green-300 bg-green-200/20"
+        )}
+      >
+        <div className="border-b py-1 px-2 text-center font-semibold capitalize">
+          {item.label}
+        </div>
+        <div className="p-2">
+          <div className="relative overflow-hidden aspect-square">
+            <img
+              src={`data:image/png;base64,${item.extract}`}
+              className="absolute left-0 top-0 w-full h-full object-contain"
+            />
+          </div>
+        </div>
+        <div className="px-2 border-t pt-2">
+          <div className="bg-zinc-200  dark:bg-zinc-800 h-1 rounded-md">
+            <div
+              className="h-1 score-fg rounded-md"
+              style={{ width: `${Math.round(item.score * 100)}%` }}
+            />
+          </div>
+        </div>
+        <div className="py-1 px-2 text-center">
+          Score : {item.score.toFixed(4)}
+        </div>
+      </div>
+    </button>
+  );
+}

components/Results/Item/index.tsx

@@ -0,0 +1,3 @@
+import Item from './Item';
+
+export default Item;

components/Results/Results.tsx

@@ -0,0 +1,19 @@
+"use client";
+import useStore from "@/store";
+import Filters from "@/components/Results/Filters";
+import Item from "@/components/Results/Item";
+type CompProps = {};
+export default function Results({}: CompProps) {
+  const matches = useStore((state) => state.matches);
+  const selectedLabel = useStore((state) => state.selectedLabel);
+  return (
+    <>
+      <Filters />
+      <div className="flex flex-wrap">
+        {matches.map((item) => (
+          <Item key={item.key} item={item} selected={selectedLabel} />
+        ))}
+      </div>
+    </>
+  );
+}

components/Results/index.tsx

@@ -0,0 +1,3 @@
+import Results from './Results';
+
+export default Results;

components/layout/Error/Error.tsx

@@ -0,0 +1,26 @@
+"use client";
+import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import useStore from "@/store";
+type CompProps = {};
+export default function Error({}: CompProps) {
+  const error = useStore((state) => state.error);
+  const retry = useStore((state) => state.retry);
+
+  if (!error) {
+    return null;
+  }
+  return (
+    <Alert variant="destructive">
+      <ExclamationTriangleIcon className="h-4 w-4" />
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>
+        Unknown Error Occurred: This could be due to the model still loading.
+        <button className="underline" onClick={retry}>
+          Please retry
+        </button>{" "}
+        after a few minutes.
+      </AlertDescription>
+    </Alert>
+  );
+}

components/layout/Error/index.tsx

@@ -0,0 +1,3 @@
+import Error from './Error';
+
+export default Error;

components/layout/Header/Header.tsx

@@ -0,0 +1,27 @@
+import ThemeToggle from "@/components/layout/ThemeToggle";
+
+export default function Header() {
+  return (
+    <div className="fixed top-0 left-0 right-0 supports-backdrop-blur:bg-background/60 border-b bg-background/95 backdrop-blur z-20">
+      <nav className="h-14 flex items-center justify-between max-w-5xl mx-auto px-4">
+        <div className="">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="w-6 h-6"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M12 12.75c1.148 0 2.278.08 3.383.237 1.037.146 1.866.966 1.866 2.013 0 3.728-2.35 6.75-5.25 6.75S6.75 18.728 6.75 15c0-1.046.83-1.867 1.866-2.013A24.204 24.204 0 0112 12.75zm0 0c2.883 0 5.647.508 8.207 1.44a23.91 23.91 0 01-1.152 6.06M12 12.75c-2.883 0-5.647.508-8.208 1.44.125 2.104.52 4.136 1.153 6.06M12 12.75a2.25 2.25 0 002.248-2.354M12 12.75a2.25 2.25 0 01-2.248-2.354M12 8.25c.995 0 1.971-.08 2.922-.236.403-.066.74-.358.795-.762a3.778 3.778 0 00-.399-2.25M12 8.25c-.995 0-1.97-.08-2.922-.236-.402-.066-.74-.358-.795-.762a3.734 3.734 0 01.4-2.253M12 8.25a2.25 2.25 0 00-2.248 2.146M12 8.25a2.25 2.25 0 012.248 2.146M8.683 5a6.032 6.032 0 01-1.155-1.002c.07-.63.27-1.222.574-1.747m.581 2.749A3.75 3.75 0 0115.318 5m0 0c.427-.283.815-.62 1.155-.999a4.471 4.471 0 00-.575-1.752M4.921 6a24.048 24.048 0 00-.392 3.314c1.668.546 3.416.914 5.223 1.082M19.08 6c.205 1.08.337 2.187.392 3.314a23.882 23.882 0 01-5.223 1.082"
+            />
+          </svg>
+        </div>
+        <ThemeToggle />
+      </nav>
+    </div>
+  );
+}

components/layout/Header/index.tsx

@@ -0,0 +1,3 @@
+import Header from './Header';
+
+export default Header;

components/layout/Loading/Loading.tsx

@@ -0,0 +1,22 @@
+"use client";
+import { range } from "@/utils";
+import { Skeleton } from "@/components/ui/skeleton";
+import useStore from "@/store";
+type CompProps = {};
+
+export default function Loading({}: CompProps) {
+  const loading = useStore((state) => state.loading);
+
+  if (!loading) {
+    return null;
+  }
+  return (
+    <div className="flex flex-wrap">
+      {range(8).map((i) => (
+        <div className="p-2 w-full sm:w-1/2 md:w-1/3 lg:w-1/4" key={i}>
+          <Skeleton className="aspect-square" />
+        </div>
+      ))}
+    </div>
+  );
+}

components/layout/Loading/index.tsx

@@ -0,0 +1,3 @@
+import Loading from './Loading';
+
+export default Loading;

components/layout/SuccessWrapper/SuccessWrapper.tsx

@@ -0,0 +1,13 @@
+"use client";
+import useStore from "@/store";
+type CompProps = {
+  children: React.ReactNode;
+};
+export default function SuccessWrapper({ children }: CompProps) {
+  const success = useStore((state) => state.success);
+
+  if (!success) {
+    return null;
+  }
+  return children;
+}

components/layout/SuccessWrapper/index.tsx

@@ -0,0 +1,3 @@
+import SuccessWrapper from './SuccessWrapper';
+
+export default SuccessWrapper;

components/layout/ThemeProvider/ThemeProvider.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
+
+export default function ThemeProvider({
+  children,
+  ...props
+}: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

components/layout/ThemeProvider/index.tsx

@@ -0,0 +1,3 @@
+import ThemeProvider from './ThemeProvider';
+
+export default ThemeProvider;

components/layout/ThemeToggle/ThemeToggle.tsx

@@ -0,0 +1,37 @@
+"use client";
+import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
+import { useTheme } from "next-themes";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+type CompProps = {};
+export default function ThemeToggle({}: CompProps) {
+  const { setTheme } = useTheme();
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

components/layout/ThemeToggle/index.tsx

@@ -0,0 +1,3 @@
+import ThemeToggle from './ThemeToggle';
+
+export default ThemeToggle;

components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

components/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

components/ui/card.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

components/ui/dropdown-menu.tsx

@@ -0,0 +1,205 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  DotFilledIcon,
+} from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <DotFilledIcon className="h-4 w-4 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

components/ui/label.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

components/ui/select.tsx

@@ -0,0 +1,120 @@
+"use client"
+
+import * as React from "react"
+import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
+import * as SelectPrimitive from "@radix-ui/react-select"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <CaretSortIcon className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+}

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-primary/10", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

components/ui/slider.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }

components/ui/switch.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }