chore: initial transfer commit

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>
+  );
+}