wip

Author: samselikoff

app/page.tsx

@@ -11,14 +11,14 @@ import logo from "@/public/logo.png";
 import { ArrowUpRightIcon } from "@heroicons/react/24/solid";
 import * as RadioGroup from "@radix-ui/react-radio-group";
 import { useQuery } from "@tanstack/react-query";
-import { ExternalLink } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import Image from "next/image";
 import { useEffect, useState } from "react";
 import { z } from "zod";
 
 export default function Home() {
   const [prompt, setPrompt] = useState("");
+  const [submittedPrompt, setSubmittedPrompt] = useState("");
   const [userAPIKey, setUserAPIKey] = useState("");
   const [selectedLoraModel, setSelectedLoraModel] = useState<Lora["model"]>();
 
@@ -38,15 +38,15 @@ export default function Home() {
 
   const { data, isFetching } = useQuery({
     placeholderData: (previousData) => previousData,
-    queryKey: [prompt, selectedLoraModel, userAPIKey],
+    queryKey: [submittedPrompt, selectedLoraModel, userAPIKey],
     queryFn: async () => {
       let res = await fetch("/api/generateImages", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
         },
         body: JSON.stringify({
-          prompt,
+          prompt: submittedPrompt,
           lora: selectedLoraModel,
           userAPIKey,
         }),
@@ -61,16 +61,11 @@ export default function Home() {
 
       return imageResponseSchema.parse(data);
     },
-    enabled: !!(prompt.trim() && selectedLoraModel),
+    enabled: !!(submittedPrompt.trim() && selectedLoraModel),
     staleTime: Infinity,
     retry: false,
   });
 
-  async function action(formData: FormData) {
-    let { prompt } = Object.fromEntries(formData.entries());
-    setPrompt(typeof prompt === "string" ? prompt : "");
-  }
-
   const selectedLora = LORAS.find((l) => l.model === selectedLoraModel);
 
   return (
@@ -105,7 +100,7 @@ export default function Home() {
       </header>
 
       <main className="mx-auto mt-10 w-full max-w-5xl grow">
-        <form className="w-full" action={action}>
+        <form className="w-full" action={() => setSubmittedPrompt(prompt)}>
           <fieldset className="flex w-full flex-col gap-8 md:flex-row">
             <div className="max-w-sm rounded-lg bg-gray-100 p-5">
               <p className="font-mono font-medium">Choose your LoRA</p>
@@ -163,28 +158,30 @@ export default function Home() {
                   spellCheck={false}
                   placeholder="Describe your image..."
                   required
-                  defaultValue={prompt}
+                  value={prompt}
+                  onChange={(e) => setPrompt(e.target.value)}
                   className="block w-full resize-none rounded-lg border border-gray-300 bg-white px-4 py-3 text-base text-gray-600 placeholder-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-300"
                 />
 
-                <div className="mt-4">
-                  <p className="text-xs font-bold text-gray-400">Suggestions</p>
-                  <div className="mt-2 flex flex-wrap gap-2">
-                    {[
-                      "New York City",
-                      "Elon Musk",
-                      "Morocco",
-                      "Italian cuisine",
-                    ].map((suggestion) => (
-                      <button
-                        key={suggestion}
-                        className="shrink-0 rounded-full bg-gray-100 px-2.5 py-1.5 text-sm text-gray-600 hover:bg-gray-200"
-                      >
-                        {suggestion}
-                      </button>
-                    ))}
+                {selectedLora && (
+                  <div className="mt-4">
+                    <p className="text-xs font-bold text-gray-400">
+                      Suggestions
+                    </p>
+                    <div className="mt-2 flex flex-wrap gap-2">
+                      {selectedLora.suggestions.map((suggestion, i) => (
+                        <button
+                          type="button"
+                          key={i}
+                          onClick={() => setPrompt(suggestion.prompt)}
+                          className="shrink-0 rounded-full bg-gray-100 px-2.5 py-1.5 text-sm text-gray-600 hover:bg-gray-200"
+                        >
+                          {suggestion.label}
+                        </button>
+                      ))}
+                    </div>
                   </div>
-                </div>
+                )}
 
                 <div className="mt-10">
                   <button
@@ -198,7 +195,7 @@ export default function Home() {
                 </div>
 
                 <div className="mt-20">
-                  {prompt && selectedLora ? (
+                  {submittedPrompt && selectedLora ? (
                     <AnimatePresence mode="wait">
                       {isFetching ? (
                         <motion.div

data/loras.ts

@@ -24,6 +24,7 @@ export type Lora = {
   refinement: string | boolean;
   height?: number;
   width?: number;
+  suggestions: { prompt: string; label: string }[];
 };
 
 export const LORAS: Lora[] = [
@@ -42,6 +43,11 @@ export const LORAS: Lora[] = [
     steps: 33,
     height: 832,
     width: 1280,
+    suggestions: [
+      { label: "Flaming red torch", prompt: "A flaming red torch" },
+      { label: "Brown briefcase", prompt: "A brown briefcase" },
+      { label: "Snow globe", prompt: "A snow globe" },
+    ],
   },
   {
     id: 6,
@@ -56,6 +62,7 @@ export const LORAS: Lora[] = [
       "Refine the prompt so that it describes a professional and minimalist logo. If the prompt describes two items, then just return those two items.",
     scale: 0.8,
     steps: 28,
+    suggestions: [{ label: "Cat and flame", prompt: "cat and flame" }],
   },
   {
     id: 1,
@@ -72,6 +79,10 @@ export const LORAS: Lora[] = [
     steps: 33,
     height: 832,
     width: 1280,
+    suggestions: [
+      { label: "Albert Einstein", prompt: "Albert Einstein" },
+      { label: "New York City", prompt: "New York City" },
+    ],
   },
   {
     id: 7,
@@ -87,6 +98,7 @@ export const LORAS: Lora[] = [
       "Refine that prompt so it mimics MidJourney's style, blending intricate and artistic designs. Edit for photorealism and close-up shots.",
     scale: 1,
     steps: 28,
+    suggestions: [{ label: "A flaming red torch", prompt: "" }],
   },
 
   {
@@ -103,6 +115,11 @@ export const LORAS: Lora[] = [
       "Change the prompt does that it describes a piece of clothing. You need to include each of the following details: color, pattern, fit, style, material, and type.",
     scale: 1,
     steps: 28,
+    suggestions: [
+      { label: "A flaming red torch", prompt: "" },
+      { label: "A brown briefcase", prompt: "" },
+      { label: "A snow globe", prompt: "" },
+    ],
   },
   {
     id: 2,
@@ -117,6 +134,11 @@ export const LORAS: Lora[] = [
     refinement: false,
     scale: 1,
     steps: 28,
+    suggestions: [
+      { label: "A flaming red torch", prompt: "" },
+      { label: "A brown briefcase", prompt: "" },
+      { label: "A snow globe", prompt: "" },
+    ],
   },
   {
     id: 3,
@@ -133,6 +155,11 @@ export const LORAS: Lora[] = [
       "Refine the prompt so that it describes a smooth, scalable vector-style sketch that is ideal for digital designs.",
     scale: 1,
     steps: 28,
+    suggestions: [
+      { label: "A flaming red torch", prompt: "" },
+      { label: "A brown briefcase", prompt: "" },
+      { label: "A snow globe", prompt: "" },
+    ],
   },
   {
     id: 4,
@@ -146,6 +173,11 @@ export const LORAS: Lora[] = [
     refinement: false,
     scale: 1,
     steps: 28,
+    suggestions: [
+      { label: "A flaming red torch", prompt: "" },
+      { label: "A brown briefcase", prompt: "" },
+      { label: "A snow globe", prompt: "" },
+    ],
   },
   {
     id: 5,
@@ -161,6 +193,11 @@ export const LORAS: Lora[] = [
       "Refine the prompt so that it combines anime inspired designs with textured block print aesthetics. The refinement should only include a description that would exist in both anime and block print.",
     scale: 1,
     steps: 28,
+    suggestions: [
+      { label: "A flaming red torch", prompt: "" },
+      { label: "A brown briefcase", prompt: "" },
+      { label: "A snow globe", prompt: "" },
+    ],
   },
   {
     id: 10,
@@ -175,5 +212,10 @@ export const LORAS: Lora[] = [
     refinement: false,
     scale: 1,
     steps: 28,
+    suggestions: [
+      { label: "A flaming red torch", prompt: "" },
+      { label: "A brown briefcase", prompt: "" },
+      { label: "A snow globe", prompt: "" },
+    ],
   },
 ];

middleware.ts

@@ -1,8 +1,7 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { NextRequest, NextResponse } from "next/server";
 
 export async function middleware(req: NextRequest) {
-  let country = req.geo?.country;
+  const country = req.headers.get("X-Vercel-IP-Country");
   // Temporarily blocking traffic from Russia since I have too many requests from there.
   if (country === "RU") {
     return new NextResponse("Access Denied", { status: 403 });