add advanced settings

components/main/collections/collection.tsx

@@ -2,6 +2,7 @@ import { useMemo } from "react";
 import { motion } from "framer-motion";
 
 import { Collection as CollectionType } from "@/type";
+import { useInputGeneration } from "@/components/main/hooks/useInputGeneration";
 
 interface Props {
   index: number;
@@ -14,6 +15,8 @@ export const Collection: React.FC<Props> = ({
   index,
   className,
 }) => {
+  const { setPrompt } = useInputGeneration();
+
   const arrayBufferToBase64 = (buffer: ArrayBuffer) => {
     let binary = "";
     const bytes = [].slice.call(new Uint8Array(buffer));
@@ -43,7 +46,10 @@ export const Collection: React.FC<Props> = ({
             <p className="text-lg font-medium text-white lowercase leading-snug">
               {collection.prompt}
             </p>
-            <p className="text-white text-sm text-right font-semibold mt-2">
+            <p
+              className="text-white text-sm text-right font-semibold mt-2"
+              onClick={() => setPrompt(collection.prompt)}
+            >
               Try it now
             </p>
           </div>

components/main/hooks/useInputGeneration.ts

@@ -2,8 +2,73 @@ import { useState } from "react"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import { Collection } from "@/type"
 
+const list_styles = [
+  {
+      "name": "(No style)",
+      "prompt": "{prompt}",
+      "negative_prompt": "",
+  },
+  {
+      "name": "Cinematic",
+      "prompt": "cinematic still {prompt} . emotional, harmonious, vignette, highly detailed, high budget, bokeh, cinemascope, moody, epic, gorgeous, film grain, grainy",
+      "negative_prompt": "anime, cartoon, graphic, text, painting, crayon, graphite, abstract, glitch, deformed, mutated, ugly, disfigured",
+  },
+  {
+      "name": "Photographic",
+      "prompt": "cinematic photo {prompt} . 35mm photograph, film, bokeh, professional, 4k, highly detailed",
+      "negative_prompt": "drawing, painting, crayon, sketch, graphite, impressionist, noisy, blurry, soft, deformed, ugly",
+  },
+  {
+      "name": "Anime",
+      "prompt": "anime artwork {prompt} . anime style, key visual, vibrant, studio anime,  highly detailed",
+      "negative_prompt": "photo, deformed, black and white, realism, disfigured, low contrast",
+  },
+  {
+      "name": "Manga",
+      "prompt": "manga style {prompt} . vibrant, high-energy, detailed, iconic, Japanese comic style",
+      "negative_prompt": "ugly, deformed, noisy, blurry, low contrast, realism, photorealistic, Western comic style",
+  },
+  {
+      "name": "Digital Art",
+      "prompt": "concept art {prompt} . digital artwork, illustrative, painterly, matte painting, highly detailed",
+      "negative_prompt": "photo, photorealistic, realism, ugly",
+  },
+  {
+      "name": "Pixel art",
+      "prompt": "pixel-art {prompt} . low-res, blocky, pixel art style, 8-bit graphics",
+      "negative_prompt": "sloppy, messy, blurry, noisy, highly detailed, ultra textured, photo, realistic",
+  },
+  {
+      "name": "Fantasy art",
+      "prompt": "ethereal fantasy concept art of  {prompt} . magnificent, celestial, ethereal, painterly, epic, majestic, magical, fantasy art, cover art, dreamy",
+      "negative_prompt": "photographic, realistic, realism, 35mm film, dslr, cropped, frame, text, deformed, glitch, noise, noisy, off-center, deformed, cross-eyed, closed eyes, bad anatomy, ugly, disfigured, sloppy, duplicate, mutated, black and white",
+  },
+  {
+      "name": "Neonpunk",
+      "prompt": "neonpunk style {prompt} . cyberpunk, vaporwave, neon, vibes, vibrant, stunningly beautiful, crisp, detailed, sleek, ultramodern, magenta highlights, dark purple shadows, high contrast, cinematic, ultra detailed, intricate, professional",
+      "negative_prompt": "painting, drawing, illustration, glitch, deformed, mutated, cross-eyed, ugly, disfigured",
+  },
+  {
+      "name": "3D Model",
+      "prompt": "professional 3d model {prompt} . octane render, highly detailed, volumetric, dramatic lighting",
+      "negative_prompt": "ugly, deformed, noisy, low poly, blurry, painting",
+  },
+]
+
 export const useInputGeneration = () => {
-  const [prompt, setPrompt] = useState<string>('')
+  const [style, setStyle] = useState<string>(list_styles[0].name)
+  const { data: prompt } = useQuery(["prompt"], () => {
+    return ''
+  }, {
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    initialData: ''
+  })
+  const setPrompt = (str:string) => {
+    client.setQueryData(["prompt"], () => str)
+  }
+
   const client = useQueryClient()
 
   const { mutate: submit, isLoading: loading } = useMutation(
@@ -21,10 +86,13 @@ export const useInputGeneration = () => {
         }, ...old as Collection[]]
       })
 
+      const findStyle = list_styles.find((item) => item.name === style)
+
       const response = await fetch("/api", {
         method: "POST",
         body: JSON.stringify({
-          inputs: prompt,
+          inputs: findStyle?.prompt.replace("{prompt}", prompt) ?? prompt,
+          negative_prompt: findStyle?.negative_prompt ?? "",
         }),
       })
       const data = await response.json()
@@ -63,7 +131,10 @@ export const useInputGeneration = () => {
     setPrompt,
     loading,
     submit,
-    hasMadeFirstGeneration
+    hasMadeFirstGeneration,
+    list_styles,
+    style,
+    setStyle
   }
 
 }

components/main/index.tsx

@@ -1,13 +1,14 @@
 "use client";
 
 import { useState } from "react";
-import { HiUserGroup, HiHeart } from "react-icons/hi2";
+import { HiUserGroup, HiHeart, HiAdjustmentsHorizontal } from "react-icons/hi2";
 
 import { InputGeneration } from "@/components/input-generation";
 import { Button } from "@/components/button";
 
 import { useInputGeneration } from "./hooks/useInputGeneration";
 import { Collections } from "./collections";
+import { Settings } from "./settings";
 
 const categories = [
   {
@@ -17,25 +18,36 @@ const categories = [
   },
   {
     key: "my-own",
-    label: "My own generations",
+    label: "My generations",
     icon: <HiHeart className="text-2xl" />,
   },
 ];
 
 export const Main = () => {
-  const { prompt, setPrompt, submit, loading } = useInputGeneration();
+  const { prompt, setPrompt, submit, loading, list_styles, style, setStyle } =
+    useInputGeneration();
   const [category, setCategory] = useState<string>("community");
+  const [advancedSettings, setAdvancedSettings] = useState<boolean>(false);
 
   return (
     <main className="px-6 z-[2] relative max-w-[1722px] mx-auto">
       <div className="py-2 pl-2 pr-4 bg-black bg-opacity-30 backdrop-blur-sm sticky top-6 z-10 rounded-full">
         <div className="flex flex-col lg:flex-row items-center justify-between w-full">
-          <InputGeneration
-            prompt={prompt}
-            onChange={setPrompt}
-            onSubmit={submit}
-            loading={loading}
-          />
+          <div className="flex items-center justify-start gap-3 w-full">
+            <InputGeneration
+              prompt={prompt}
+              onChange={setPrompt}
+              onSubmit={submit}
+              loading={loading}
+            />
+            <p
+              className="text-white/70 font-medium text-sm flex items-center justify-start gap-2 hover:text-white cursor-pointer"
+              onClick={() => setAdvancedSettings(!advancedSettings)}
+            >
+              <HiAdjustmentsHorizontal className="w-5 h-5" />
+              Advanced settings
+            </p>
+          </div>
           <div className="flex items-center justify-center lg:justify-end gap-5 w-full mt-6 lg:mt-0">
             {categories.map(({ key, label, icon }) => (
               <Button
@@ -49,6 +61,12 @@ export const Main = () => {
             ))}
           </div>
         </div>
+        <Settings
+          open={advancedSettings}
+          style={style}
+          setStyle={setStyle}
+          list_styles={list_styles}
+        />
       </div>
       <Collections />
     </main>

components/main/settings/index.tsx

@@ -0,0 +1,43 @@
+import classNames from "classnames";
+
+interface Props {
+  style: string;
+  open: boolean;
+  setStyle: (style: string) => void;
+  list_styles: { name: string; negative_prompt: string; prompt: string }[];
+}
+export const Settings: React.FC<Props> = ({
+  open,
+  style,
+  setStyle,
+  list_styles,
+}) => {
+  return (
+    <div
+      className={classNames(
+        "lg:justify-start overflow-hidden transition-all duration-1000 w-full",
+        {
+          "max-h-[300px]": open,
+          "max-h-0": !open,
+        }
+      )}
+    >
+      <div className="gap-2 flex items-center justify-start mt-6 flex-wrap w-full">
+        {list_styles.map((stl) => (
+          <div
+            key={stl.name}
+            className={classNames(
+              "rounded-full border-2 border-white text-xs lg:text-sm px-4 py-2 font-semibold text-white cursor-pointer",
+              {
+                "bg-white !text-gray-900": stl.name === style,
+              }
+            )}
+            onClick={() => setStyle(stl.name)}
+          >
+            {stl.name}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};