chore: initial transfer commit

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.next

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

package.json

@@ -0,0 +1,40 @@
+{
+  "name": "sucker",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.2",
+    "@radix-ui/react-collapsible": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@types/react": "^18.2.39",
+    "@types/react-dom": "^18.2.17",
+    "axios": "^1.6.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cors": "^2.8.5",
+    "crc-32": "^1.2.2",
+    "html2canvas": "^1.4.1",
+    "lucide-react": "^0.471.0",
+    "next": "^14.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.3.2"
+  },
+  "devDependencies": {
+    "@types/cors": "^2.8.17",
+    "@types/node": "^22.10.5",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.5"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+} 

public/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

src/app/api/proxy/image/route.ts

@@ -0,0 +1,25 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export async function GET(request: NextRequest) {
+  const url = request.nextUrl.searchParams.get('url');
+  
+  if (!url) {
+    return NextResponse.json({ error: 'URL parameter is required' }, { status: 400 });
+  }
+
+  try {
+    const response = await fetch(url);
+    const arrayBuffer = await response.arrayBuffer();
+
+    return new NextResponse(arrayBuffer, {
+      headers: {
+        'Content-Type': response.headers.get('Content-Type') || 'image/webp',
+        'Access-Control-Allow-Origin': '*',
+      },
+    });
+  } catch (error) {
+    console.error('Error proxying image:', error);
+    return NextResponse.json({ error: 'Failed to fetch image' }, { status: 500 });
+  }
+} 

src/app/api/proxy/route.ts

@@ -0,0 +1,190 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+interface StoredCard extends CardData {
+  timestamp: number;
+  id: string;
+}
+
+let extractedCards: StoredCard[] = [];
+const EXPIRY_TIME = 10 * 60 * 1000;
+
+function generateId(): string {
+  return Date.now().toString(36) + Math.random().toString(36).substring(2);
+}
+
+function cleanupExpiredCards() {
+  const now = Date.now();
+  extractedCards = extractedCards.filter(card => (now - card.timestamp) < EXPIRY_TIME);
+}
+
+interface Message {
+  content: string;
+}
+
+interface CardData {
+  name: string;
+  first_mes: string;
+  description: string;
+  personality: string;
+  mes_example: string;
+  scenario: string;
+}
+
+function extractPersonaName(content: string, personaIndex: number = 0): string {
+  const personaMatches = Array.from(content.matchAll(/'s Persona:/g));
+  if (personaMatches.length <= personaIndex) return "";
+  
+  const personaIdx = personaMatches[personaIndex].index!;
+  const lineStartIdx = content.lastIndexOf('\n', personaIdx);
+  const lineEndIdx = personaIdx;
+  
+  return content.slice(lineStartIdx === -1 ? 0 : lineStartIdx + 1, lineEndIdx).trim();
+}
+
+function safeReplace(text: string, old: string, newStr: string): string {
+  return old ? text.replace(new RegExp(old, 'g'), newStr) : text;
+}
+
+function extractCardData(messages: Message[]): CardData {
+  const content0 = messages[0].content;
+  const content1 = messages[1].content;
+
+  const userName = extractPersonaName(content0, 0);
+  const charName = extractPersonaName(content0, 1);
+
+  const personaMatches = Array.from(content0.matchAll(/'s Persona:/g));
+  let cardData: CardData = {
+    name: charName,
+    description: "",
+    scenario: "",
+    mes_example: "",
+    personality: "",
+    first_mes: content1
+  };
+
+  if (personaMatches.length >= 2) {
+    const secondPersonaIdx = personaMatches[1].index!;
+    const startDesc = secondPersonaIdx + "'s Persona:".length;
+    const remaining = content0.slice(startDesc);
+
+    const scenarioMarker = remaining.match(/Scenario of the roleplay:/);
+    const exampleMarker = remaining.match(/Example conversations between/);
+
+    let endIdx = remaining.length;
+    if (scenarioMarker) endIdx = Math.min(endIdx, scenarioMarker.index!);
+    if (exampleMarker) endIdx = Math.min(endIdx, exampleMarker.index!);
+
+    cardData.description = remaining.slice(0, endIdx).trim();
+
+    if (scenarioMarker) {
+      const scenarioStart = scenarioMarker.index! + scenarioMarker[0].length;
+      const scenarioRemaining = remaining.slice(scenarioStart);
+      const exampleInScenarioMarker = scenarioRemaining.match(/Example conversations between/);
+      const scenarioEnd = exampleInScenarioMarker ? exampleInScenarioMarker.index! : scenarioRemaining.length;
+      cardData.scenario = scenarioRemaining.slice(0, scenarioEnd).trim();
+    }
+
+    if (exampleMarker) {
+      const exampleStart = exampleMarker.index!;
+      const rawExampleStr = remaining.slice(exampleStart).trim();
+      const colonIdx = rawExampleStr.indexOf(':');
+      cardData.mes_example = colonIdx !== -1 ? 
+        rawExampleStr.slice(colonIdx + 1).trim() : 
+        rawExampleStr.trim();
+    }
+  }
+
+  for (const field in cardData) {
+    if (field !== 'name') {
+      const val = cardData[field as keyof CardData];
+      if (typeof val === 'string') {
+        let newVal = safeReplace(val, userName, '{{user}}');
+        newVal = safeReplace(newVal, charName, '{{char}}');
+        cardData[field as keyof CardData] = newVal;
+      }
+    }
+  }
+
+  return cardData;
+}
+
+export async function POST(request: NextRequest) {
+  if (request.method === 'OPTIONS') {
+    return new NextResponse(null, {
+      status: 204,
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods': 'POST, OPTIONS, GET',
+        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+      },
+    });
+  }
+
+  try {
+    const body = await request.json();
+    
+    if (!body.messages || body.messages.length < 2) {
+      return NextResponse.json(
+        { error: "Missing messages or insufficient message count" },
+        { 
+          status: 400,
+          headers: {
+            'Access-Control-Allow-Origin': '*',
+          },
+        }
+      );
+    }
+
+    const cardData = extractCardData(body.messages);
+    extractedCards.push({
+      ...cardData,
+      timestamp: Date.now(),
+      id: generateId()
+    });
+
+    cleanupExpiredCards();
+
+    return NextResponse.json({ status: "Card stored successfully" }, {
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+      },
+    });
+    
+  } catch (error) {
+    console.error('Error processing request:', error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { 
+        status: 500,
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+        },
+      }
+    );
+  }
+}
+
+export async function GET() {
+  cleanupExpiredCards();
+  
+  return NextResponse.json({ 
+    status: "online", 
+    cards: extractedCards.map(({ timestamp, ...card }) => card) // Keep ID but remove timestamp
+  }, {
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+  });
+}
+
+export async function OPTIONS() {
+  return new NextResponse(null, {
+    status: 204,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'POST, OPTIONS, GET',
+      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+    },
+  });
+} 

src/app/globals.css

@@ -0,0 +1,76 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

src/app/layout.tsx

@@ -0,0 +1,36 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Sucker?",
+  description: "Walk away if you don't know what this is for, bud.",
+  icons: {
+    icon: [
+      { url: '/favicon.ico' },
+      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
+      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
+    ],
+    apple: [
+      { url: '/apple-touch-icon.png' }
+    ],
+    other: [
+      { url: '/android-chrome-192x192.png', sizes: '192x192', type: 'image/png' },
+      { url: '/android-chrome-512x512.png', sizes: '512x512', type: 'image/png' },
+    ],
+  },
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" className="dark">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,413 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Separator } from "@/components/ui/separator";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Png } from "@/lib/png";
+import { ChevronUp, ChevronDown } from "lucide-react";
+import {
+  CollapsibleContent,
+  Collapsible,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+
+interface Card {
+  id: string;
+  name: string;
+  first_mes: string;
+  description: string;
+  personality: string;
+  mes_example: string;
+  scenario: string;
+  avatarUrl?: string;
+}
+
+export default function Home() {
+  const [isInstructionsOpen, setIsInstructionsOpen] = useState(false);
+  const [cards, setCards] = useState<Card[]>([]);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [selectedCardIndex, setSelectedCardIndex] = useState<number | null>(
+    null
+  );
+  const [characterUrl, setCharacterUrl] = useState("");
+  const [avatarPath, setAvatarPath] = useState("");
+  const [isMetadataOpen, setIsMetadataOpen] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const fetchCards = async () => {
+    try {
+      setIsRefreshing(true);
+      const response = await fetch("/api/proxy");
+      const data = await response.json();
+      if (data.cards) {
+        setCards((prevCards) => {
+          return data.cards.map((newCard: Card) => ({
+            ...newCard,
+            avatarUrl:
+              prevCards.find((c) => c.id === newCard.id)?.avatarUrl ||
+              newCard.avatarUrl,
+          }));
+        });
+      }
+    } catch (error) {
+      console.error("Error fetching cards:", error);
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchCards();
+  }, []);
+
+  const downloadJson = (card: Card) => {
+    const element = document.createElement("a");
+    const file = new Blob([JSON.stringify(card, null, 2)], {
+      type: "application/json",
+    });
+    element.href = URL.createObjectURL(file);
+    element.download = `${card.name.replace(/\s+/g, "_")}.json`;
+    document.body.appendChild(element);
+    element.click();
+    document.body.removeChild(element);
+  };
+
+  const downloadPng = async (card: Card, cardId: string) => {
+    if (!card.avatarUrl) return;
+
+    try {
+      // Use proxy directly instead of attempting CORS
+      const img = new Image();
+      img.src = `/api/proxy/image?url=${encodeURIComponent(card.avatarUrl)}`;
+
+      await new Promise((resolve, reject) => {
+        img.onload = resolve;
+        img.onerror = reject;
+      });
+
+      // Create a canvas to convert WebP to PNG
+      const canvas = document.createElement("canvas");
+      canvas.width = img.width;
+      canvas.height = img.height;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) throw new Error("Could not get canvas context");
+
+      // Draw the image and convert to PNG
+      ctx.drawImage(img, 0, 0);
+      const pngBlob = await new Promise<Blob>((resolve) => {
+        canvas.toBlob((blob) => {
+          if (blob) resolve(blob);
+          else throw new Error("Could not convert to PNG");
+        }, "image/png");
+      });
+
+      // Convert blob to array buffer for PNG embedding
+      const arrayBuffer = await pngBlob.arrayBuffer();
+
+      // Prepare card data for embedding
+      const cardData = JSON.stringify({
+        name: card.name,
+        first_mes: card.first_mes,
+        description: card.description,
+        personality: card.personality,
+        mes_example: card.mes_example,
+        scenario: card.scenario,
+      });
+
+      // Generate PNG with embedded card data
+      const newImageData = Png.Generate(arrayBuffer, cardData);
+      const newFileName = `${
+        card.name.replace(/\s+/g, "_") || "character"
+      }.png`;
+      const newFile = new File([newImageData], newFileName, {
+        type: "image/png",
+      });
+
+      // Download the file
+      const link = URL.createObjectURL(newFile);
+      const a = document.createElement("a");
+      a.download = newFileName;
+      a.href = link;
+      a.click();
+
+      // Cleanup
+      URL.revokeObjectURL(link);
+    } catch (error) {
+      console.error("Error generating PNG:", error);
+      alert("Couldn't export this character card, sorry.");
+    }
+  };
+
+  const handleOpenDialog = (index: number) => {
+    setSelectedCardIndex(index);
+    setDialogOpen(true);
+    setCharacterUrl("");
+    setAvatarPath("");
+    setIsMetadataOpen(false);
+  };
+
+  const handleOpenMetadata = () => {
+    const match = characterUrl.match(/characters\/([\w-]+)/);
+    if (match && match[1]) {
+      const characterId = match[1].split("_")[0];
+      window.open(
+        `https://janitorai.com/hampter/characters/${characterId}`,
+        "_blank"
+      );
+      setIsMetadataOpen(true);
+    }
+  };
+
+  const handleFetchAvatar = async () => {
+    if (selectedCardIndex === null) return;
+
+    try {
+      const avatarUrl = `https://ella.janitorai.com/bot-avatars/${avatarPath}`;
+      const updatedCards = [...cards];
+      updatedCards[selectedCardIndex] = {
+        ...updatedCards[selectedCardIndex],
+        avatarUrl,
+      };
+      setCards(updatedCards);
+      setDialogOpen(false);
+    } catch (error) {
+      console.error("Error fetching avatar:", error);
+    }
+  };
+
+  return (
+    <main className="min-h-screen bg-background text-foreground">
+      <div className="container mx-auto px-4 py-8">
+        <div className="flex justify-between items-center mb-4">
+          <h1 className="text-3xl font-bold">Sucker</h1>
+          <Button
+            onClick={fetchCards}
+            variant="outline"
+            disabled={isRefreshing}
+          >
+            {isRefreshing ? "Refreshing..." : "Refresh"}
+          </Button>
+        </div>
+
+        <Separator className="my-4" />
+
+        <Collapsible
+          open={isInstructionsOpen}
+          onOpenChange={setIsInstructionsOpen}
+          className="w-full mb-8"
+        >
+          <div className="flex items-center justify-between">
+            <h2 className="text-2xl font-semibold">How to Use</h2>
+            <CollapsibleTrigger asChild>
+              <Button variant="ghost" size="sm" className="w-9 p-0">
+                {isInstructionsOpen ? (
+                  <ChevronUp className="h-4 w-4" />
+                ) : (
+                  <ChevronDown className="h-4 w-4" />
+                )}
+                <span className="sr-only">Toggle instructions</span>
+              </Button>
+            </CollapsibleTrigger>
+          </div>
+          <CollapsibleContent className="mt-4">
+            <div className="prose dark:prose-invert max-w-none">
+              <p className="mb-2">
+                Follow every instruction here to the letter because it's all you
+                need to know and I have no intent of helping you further.
+              </p>
+              <ol className="list-decimal list-inside">
+                <li className="mb-2">
+                  Put <code>https://sucker.severian.dev/api/proxy</code> in your
+                  API settings, any value for model and key.
+                </li>
+                <li className="mb-2">
+                  Remove your custom prompt - otherwise, it'll get inserted into
+                  cards, on the example message section.
+                </li>
+                <li className="mb-2">
+                  Save settings and refresh the page. Not this page. <i>That</i>{" "}
+                  page.
+                </li>
+                <li className="mb-2">
+                  Start a new chat with a character or multiple. Send any
+                  message.
+                </li>
+                <li className="mb-2">
+                  Hit the Refresh button here, and the cards should appear here.
+                </li>
+                <li className="mb-2">
+                  Download the JSON files or go through a little more effort to
+                  get PNGs instead.
+                </li>
+              </ol>
+              <p className="mb-2">
+                Extractions will only last for 10 minutes, after which they're
+                discarded. Reloading the page will remove any attached avatars.
+                I'm not storing shit.
+              </p>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+
+        <div className="max-w-3xl mx-auto space-y-6">
+          {cards.length === 0 ? (
+            <Card>
+              <CardContent className="pt-6 text-center text-muted-foreground">
+                <p>No extractions yet.</p>
+              </CardContent>
+            </Card>
+          ) : (
+            cards.map((card, index) => (
+              <Card key={index}>
+                <CardContent className="pt-6">
+                  <Accordion type="single" collapsible className="w-full">
+                    <AccordionItem value={`card-${index}`}>
+                      <AccordionTrigger className="text-xl font-semibold">
+                        {card.name || "Unnamed Card"}
+                      </AccordionTrigger>
+                      <AccordionContent>
+                        <div id={`card-${index}`} className="space-y-4 mt-4">
+                          {card.description && (
+                            <Accordion type="single" collapsible>
+                              <AccordionItem value="description">
+                                <AccordionTrigger>Description</AccordionTrigger>
+                                <AccordionContent>
+                                  {card.description}
+                                </AccordionContent>
+                              </AccordionItem>
+                            </Accordion>
+                          )}
+                          {card.first_mes && (
+                            <Accordion type="single" collapsible>
+                              <AccordionItem value="first-message">
+                                <AccordionTrigger>
+                                  First Message
+                                </AccordionTrigger>
+                                <AccordionContent>
+                                  {card.first_mes}
+                                </AccordionContent>
+                              </AccordionItem>
+                            </Accordion>
+                          )}
+                          {card.scenario && (
+                            <Accordion type="single" collapsible>
+                              <AccordionItem value="scenario">
+                                <AccordionTrigger>Scenario</AccordionTrigger>
+                                <AccordionContent>
+                                  {card.scenario}
+                                </AccordionContent>
+                              </AccordionItem>
+                            </Accordion>
+                          )}
+                          {card.mes_example && (
+                            <Accordion type="single" collapsible>
+                              <AccordionItem value="example-messages">
+                                <AccordionTrigger>
+                                  Example Messages
+                                </AccordionTrigger>
+                                <AccordionContent>
+                                  {card.mes_example}
+                                </AccordionContent>
+                              </AccordionItem>
+                            </Accordion>
+                          )}
+                        </div>
+                      </AccordionContent>
+                    </AccordionItem>
+                  </Accordion>
+                  <div className="flex flex-row space-x-2 mt-6">
+                    <Button
+                      onClick={() => downloadJson(card)}
+                      variant="default"
+                    >
+                      Download JSON
+                    </Button>
+                    {!card.avatarUrl ? (
+                      <Button
+                        onClick={() => handleOpenDialog(index)}
+                        variant="outline"
+                      >
+                        Fetch Avatar (required for PNG)
+                      </Button>
+                    ) : (
+                      <Button
+                        onClick={() => downloadPng(card, `card-${index}`)}
+                        variant="default"
+                        disabled={!card.avatarUrl}
+                      >
+                        Download PNG
+                      </Button>
+                    )}
+                  </div>
+                </CardContent>
+              </Card>
+            ))
+          )}
+        </div>
+      </div>
+
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {isMetadataOpen ? "Enter Avatar Path" : "Enter Character URL"}
+            </DialogTitle>
+            <DialogDescription>
+              {isMetadataOpen
+                ? "Look for the avatar field in the opened tab and paste the value here."
+                : "Enter the Janitor character URL (https://janitorai.com/characters/...)."}
+            </DialogDescription>
+          </DialogHeader>
+
+          {isMetadataOpen ? (
+            <div className="space-y-4">
+              <Input
+                placeholder="id.webp"
+                value={avatarPath}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setAvatarPath(e.target.value)
+                }
+              />
+              <Button onClick={handleFetchAvatar} className="w-full">
+                Fetch Avatar
+              </Button>
+            </div>
+          ) : (
+            <div className="space-y-4">
+              <Input
+                placeholder="https://janitorai.com/characters/..."
+                value={characterUrl}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setCharacterUrl(e.target.value)
+                }
+              />
+              <p className="text-sm text-muted-foreground">
+                Upon clicking this button, a new tab will open with the
+                character's metadata. Look for the avatar field and copy the
+                value before returning to this page.
+              </p>
+              <Button onClick={handleOpenMetadata} className="w-full">
+                Open Metadata
+              </Button>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+    </main>
+  );
+}

src/components/ui/accordion.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

src/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 gap-2 whitespace-nowrap 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    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-background 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 }

src/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<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    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 }

src/components/ui/collapsible.tsx

@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

src/components/ui/dialog.tsx

@@ -0,0 +1,120 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

src/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ 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-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

src/components/ui/separator.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

src/lib/png.ts

@@ -0,0 +1,240 @@
+import * as CRC32 from "crc-32";
+
+// I don't know who Zoltan is, but thank you.
+
+interface PngChunk {
+  type: string;
+  data: Uint8Array;
+  crc: number;
+}
+
+interface TextChunk {
+  keyword: string;
+  text: string;
+}
+
+export class Png {
+  static uint8 = new Uint8Array(4);
+  static int32 = new Int32Array(this.uint8.buffer);
+  static uint32 = new Uint32Array(this.uint8.buffer);
+
+  static decodeText(data: Uint8Array): TextChunk {
+    let naming = true;
+    let keyword = "";
+    let text = "";
+
+    for (let index = 0; index < data.length; index++) {
+      const code = data[index];
+
+      if (naming) {
+        if (code) {
+          keyword += String.fromCharCode(code);
+        } else {
+          naming = false;
+        }
+      } else {
+        if (code) {
+          text += String.fromCharCode(code);
+        } else {
+          throw new Error("Invalid NULL character found in PNG tEXt chunk");
+        }
+      }
+    }
+
+    return {
+      keyword,
+      text,
+    };
+  }
+
+  static encodeText(keyword: string, text: string): Uint8Array {
+    keyword = String(keyword);
+    text = String(text);
+
+    if (!/^[\x00-\xFF]+$/.test(keyword) || !/^[\x00-\xFF]+$/.test(text))
+      throw new Error("Invalid character in PNG tEXt chunk");
+    if (keyword.length > 79)
+      throw new Error(
+        'Keyword "' + keyword + '" is longer than the 79 character limit'
+      );
+
+    const data = new Uint8Array(keyword.length + text.length + 1);
+    let idx = 0;
+    let code;
+
+    for (let i = 0; i < keyword.length; i++) {
+      if (!(code = keyword.charCodeAt(i)))
+        throw new Error("0x00 character is not permitted in tEXt keywords");
+      data[idx++] = code;
+    }
+
+    data[idx++] = 0;
+
+    for (let i = 0; i < text.length; i++) {
+      if (!(code = text.charCodeAt(i)))
+        throw new Error("0x00 character is not permitted in tEXt text");
+      data[idx++] = code;
+    }
+
+    return data;
+  }
+
+  static readChunk(data: Uint8Array, idx: number): PngChunk {
+    this.uint8[3] = data[idx++];
+    this.uint8[2] = data[idx++];
+    this.uint8[1] = data[idx++];
+    this.uint8[0] = data[idx++];
+    const length = this.uint32[0];
+
+    const chunkType =
+      String.fromCharCode(data[idx++]) +
+      String.fromCharCode(data[idx++]) +
+      String.fromCharCode(data[idx++]) +
+      String.fromCharCode(data[idx++]);
+
+    const chunkData = data.slice(idx, idx + length);
+    idx += length;
+
+    this.uint8[3] = data[idx++];
+    this.uint8[2] = data[idx++];
+    this.uint8[1] = data[idx++];
+    this.uint8[0] = data[idx++];
+    const crc = this.int32[0];
+
+    if (crc !== CRC32.buf(chunkData, CRC32.str(chunkType)))
+      throw new Error(
+        'CRC for "' +
+          chunkType +
+          '" header is invalid, file is likely corrupted'
+      );
+
+    return {
+      type: chunkType,
+      data: chunkData,
+      crc,
+    };
+  }
+
+  static readChunks(data: Uint8Array): PngChunk[] {
+    if (
+      data[0] !== 0x89 ||
+      data[1] !== 0x50 ||
+      data[2] !== 0x4e ||
+      data[3] !== 0x47 ||
+      data[4] !== 0x0d ||
+      data[5] !== 0x0a ||
+      data[6] !== 0x1a ||
+      data[7] !== 0x0a
+    )
+      throw new Error("Invalid PNG header");
+
+    const chunks: PngChunk[] = [];
+
+    let idx = 8;
+    while (idx < data.length) {
+      const chunk = Png.readChunk(data, idx);
+
+      if (!chunks.length && chunk.type !== "IHDR")
+        throw new Error("PNG missing IHDR header");
+
+      chunks.push(chunk);
+      idx += 4 + 4 + chunk.data.length + 4;
+    }
+
+    if (chunks.length === 0)
+      throw new Error("PNG ended prematurely, no chunks");
+    if (chunks[chunks.length - 1].type !== "IEND")
+      throw new Error("PNG ended prematurely, missing IEND header");
+
+    return chunks;
+  }
+
+  static encodeChunks(chunks: PngChunk[]): Uint8Array {
+    const output = new Uint8Array(
+      chunks.reduce(
+        (a: number, c: PngChunk) => a + 4 + 4 + c.data.length + 4,
+        8
+      )
+    );
+
+    output[0] = 0x89;
+    output[1] = 0x50;
+    output[2] = 0x4e;
+    output[3] = 0x47;
+    output[4] = 0x0d;
+    output[5] = 0x0a;
+    output[6] = 0x1a;
+    output[7] = 0x0a;
+
+    let idx = 8;
+
+    chunks.forEach((c: PngChunk) => {
+      this.uint32[0] = c.data.length;
+      output[idx++] = this.uint8[3];
+      output[idx++] = this.uint8[2];
+      output[idx++] = this.uint8[1];
+      output[idx++] = this.uint8[0];
+
+      output[idx++] = c.type.charCodeAt(0);
+      output[idx++] = c.type.charCodeAt(1);
+      output[idx++] = c.type.charCodeAt(2);
+      output[idx++] = c.type.charCodeAt(3);
+
+      for (let i = 0; i < c.data.length; ) {
+        output[idx++] = c.data[i++];
+      }
+
+      this.int32[0] = c.crc || CRC32.buf(c.data, CRC32.str(c.type));
+      output[idx++] = this.uint8[3];
+      output[idx++] = this.uint8[2];
+      output[idx++] = this.uint8[1];
+      output[idx++] = this.uint8[0];
+    });
+
+    return output;
+  }
+
+  static Parse(arrayBuffer: ArrayBuffer): string {
+    const chunks = Png.readChunks(new Uint8Array(arrayBuffer));
+
+    const text = chunks
+      .filter((c) => c.type === "tEXt")
+      .map((c) => Png.decodeText(c.data));
+    if (text.length < 1) throw new Error("No PNG text fields found in file");
+
+    const chara = text.find((t) => t.keyword === "chara");
+    if (chara === undefined)
+      throw new Error('No PNG text field named "chara" found in file');
+
+    try {
+      return new TextDecoder().decode(
+        Uint8Array.from(atob(chara.text), (c) => c.charCodeAt(0))
+      );
+    } catch (e) {
+      throw new Error('Unable to parse "chara" field as base64');
+    }
+  }
+
+  static Generate(arrayBuffer: ArrayBuffer, text: string): Uint8Array {
+    const chunks = Png.readChunks(new Uint8Array(arrayBuffer)).filter(
+      (c) => c.type !== "tEXt"
+    );
+
+    const textData = Png.encodeText(
+      "chara",
+      btoa(
+        new TextEncoder()
+          .encode(text)
+          .reduce((a, c) => a + String.fromCharCode(c), "")
+      )
+    );
+
+    chunks.splice(-1, 0, {
+      type: "tEXt",
+      data: textData,
+      crc: CRC32.buf(textData, CRC32.str("tEXt")),
+    });
+
+    return Png.encodeChunks(chunks);
+  }
+}

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

sucker.config.js

@@ -0,0 +1,12 @@
+/**
+ * Get compatible PM2 app config object with automatic support for .nvmrc,
+ * port allocation, and debug mode.
+ */
+module.exports = {
+  apps: (function () {
+    let nodeapp = require("/usr/local/hestia/plugins/nodeapp/nodeapp.js")(
+      __filename
+    );
+    return [nodeapp];
+  })(),
+};

sucker.js

@@ -0,0 +1,21 @@
+#!/usr/bin/env node
+const { execSync } = require("child_process");
+
+// 1. Grab the port from the '-p' argument
+const portIndex = process.argv.indexOf("-p");
+let port = "3000";
+if (portIndex !== -1 && portIndex + 1 < process.argv.length) {
+  port = process.argv[portIndex + 1];
+}
+
+// 2. Start Next.js using that port
+try {
+  // Either pass it directly to next, e.g.:
+  // execSync(`npx next start -p ${port}`, { stdio: "inherit" });
+  //
+  // Or set the PORT env var and run your npm script:
+  execSync(`PORT=${port} npm run start`, { stdio: "inherit" });
+} catch (err) {
+  console.error("Failed to start Next.js:", err);
+  process.exit(1);
+}

tailwind.config.js

@@ -0,0 +1,76 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+  	extend: {
+  		colors: {
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
+  			},
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			}
+  		},
+  		borderRadius: {
+  			lg: '`var(--radius)`',
+  			md: '`calc(var(--radius) - 2px)`',
+  			sm: 'calc(var(--radius) - 4px)'
+  		},
+  		keyframes: {
+  			'accordion-down': {
+  				from: {
+  					height: '0'
+  				},
+  				to: {
+  					height: 'var(--radix-accordion-content-height)'
+  				}
+  			},
+  			'accordion-up': {
+  				from: {
+  					height: 'var(--radix-accordion-content-height)'
+  				},
+  				to: {
+  					height: '0'
+  				}
+  			}
+  		},
+  		animation: {
+  			'accordion-down': 'accordion-down 0.2s ease-out',
+  			'accordion-up': 'accordion-up 0.2s ease-out'
+  		}
+  	}
+  },
+  plugins: [require("tailwindcss-animate")],
+};

tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "types": ["node"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}