init project + starting page

README.md

@@ -2,7 +2,7 @@
 title: Guess The Image
 emoji: 🔎
 colorFrom: green
-colorTo: pink
+colorTo: cyan
 sdk: docker
 pinned: false
 app_port: 3000

app/api/bulk-create/data.json

@@ -0,0 +1,50 @@
+[
+  "Design a space exploration concept with futuristic spacecraft, alien planets, and breathtaking cosmic landscapes.",
+  "2d animation, Show a medium shot of the wolf, with a mischievous glint in his eyes. His mouth is slightly open, revealing his sharp teeth. He is standing among the tall grass, scanning the area for potential prey.]unreal engine, hyper real --q 2 --v 5.2 --ar 16:9",
+  "Design an otherworldly alien creature with bioluminescent features, multiple appendages, and intricate patterns that evoke a sense of wonder and curiosity.",
+  "Design a futuristic cityscape with towering skyscrapers, flying cars, and advanced technology integrated into the urban environment.",
+  "Design a steampunk-inspired setting with intricate machinery, Victorian architecture, and airships soaring through the sky.",
+  "a mecha robot, pixel pfp, random collor, cyberpunk, synthwave, ornate, intricate, digital painting, concept art, smooth, sharp focus, illustration, black background, art by artgerm and greg rutkowski and alphonse mucha, 8 k",
+  "a cyberpunk ice cream truck, black velvet painting, artwork by Greg Rutkowski, John Berkey, Alexander Jansson, Kuvshinov, WLOP, Artgerm, trending on ArtStationHD. octane render, greg rutkowski, hyper realism, high detail, octane render, vervia, 8k",
+  "a beautiful painting of in the silent, starlit nights, beautiful flower, girl, by greg rutkowski, trending on artstation",
+  "a masterpiece ultrarealistic ultradetailed portrait of a incredibly beautiful 0 0 s blonde bimbo in pink clothes. baroque renaissance. medium shot, intricate, elegant, highly detailed. trending on artstation, digital art, by stanley artgerm lau, wlop, rossdraws, james jean, andrei riabovitchev, marc simonetti, yoshitaka amano. background by james jean and gustav klimt, light by julie bell, 4 k, porcelain skin.",
+  "Masculine face made of multicolored bubbles, motion blur, blur, bokeh, Affinity Photo, trending on Artstation, award-winning, art by Studio Ghibli, by Lisa Frank",
+  "rubik's cube transformer, tristan eaton, victo ngai, artgerm, rhads, ross draws",
+  "a fat ugly man, in the style of artgerm, gerald brom, atey ghailan and mike mignola, vibrant colors and hard shadows and strong rim light, plain background, comic cover art, trending on artstation",
+  "half joe biden half reptiloid, ultra realistic, concept art, intricate details, eerie, highly detailed, photorealistic, octane render, 8 k, unreal engine. art by artgerm and greg rutkowski and alphonse mucha",
+  "an illustration of a house with large barn with many cute flower pots and beautiful blue sky scenery. earth golem standing in yard, cinematic view, epic sky, detailed, concept art, low angle, high detail, warm lighting, volumetric, godrays, vivid, beautiful, trending on artstation, by jordan grimmer, huge scene, grass, art greg rutkowski",
+  "A beautiful digital painting of a sexy female anubis, holding a sword, the moon behind her, intricate, cinematic lighting, highly detailed, digital painting, Artstation, concept art, smooth, sharp focus, illustration, art by Tom Bagshaw, Artgerm and Greg Rutkowski",
+  "worm's eye view of overwatch headquarters carved inside a mountain surrounding a lush well kept garden, magical, natural light, fantasy, sharp focus, concept art, by greg rutkowski and craig mullins, cozy atmospheric",
+  "a portrait of a beautiful willa holland as a 1 9 5 0 s rockabilly greaser, art by lois van baarle and loish and ross tran and rossdraws and sam yang and samdoesarts and artgerm, digital art, highly detailed, intricate, sharp focus, trending on artstation hq, deviantart, unreal engine 5, 4 k uhd image",
+  "mariano rajoy with cyberpunk implants, deep focus, d & d, fantasy, intricate, elegant, highly detailed, digital painting, artstation, concept art, matte, sharp focus, illustration, hearthstone, art by artgerm and greg rutkowski and alphonse mucha",
+  "dwayne johnson holding a purple lightsaber wearing brown jedi robes, concept art, ultra realistic",
+  "panoramic view, a pilot girl, soldier clothing, battlefield in background, anime style, hair down, symmetrical facial features, realistic hands, from arknights, hyper realistic, 4 k, extreme detail, 1 0 1 st airborne, trending artstation, safebooru, realistic lighting, by alphonse mucha, greg rutkowski, sharp focus",
+  "danny devito riding a large harley davidson, hyperrealism, lens glare, trending on artstation, intricate, 8 k",
+  "a girl with short blue hair and blue eyes is sitting on a cloud, anime style, light effect, anime style hyper detailed, illustration, bloody, intricate, elegant, digital painting, artstation, smooth, sharp focus, art by artgerm and greg rutkowski and alphonse mucha.",
+  "totem aztek tribal deepdream intricate, elegant, sharp focus, illustration, highly detailed, digital painting, concept art, matte, art by WLOP and Artgerm and Greg Rutkowski and Alphonse Mucha, masterpiece",
+  "painting of dark muscular oiled indian woman back, ultra realistic, concept art, intricate details, eerie, highly detailed, photorealistic, octane render, 8 k, unreal engine. art by artgerm and greg rutkowski and alphonse mucha",
+  "ultra realistic illustration of taco cat, intricate, elegant, highly detailed, digital painting, artstation, concept art, smooth, sharp focus, illustration, art by artgerm and greg rutkowski and alphonse mucha",
+  "kyoto animation girl wearing cyberpunk intricate streetwear riding dirt bike, respirator, detailed portrait, cell shaded, 4 k, concept art, by wlop, ilya kuvshinov, artgerm, krenz cushart, greg rutkowski, pixiv. cinematic dramatic atmosphere, sharp focus, volumetric lighting, cinematic lighting, studio quality",
+  "office secretary anime, d & d, fantasy, portrait, highly detailed, headshot, digital painting, trending on artstation, concept art, sharp focus, illustration, art by artgerm and greg rutkowski and magali villeneuve",
+  "beautiful, young woman, cybernetic, cyberpunk, detailed gorgeous face, flowing hair, vaporwave aesthetic, synthwave , digital painting, artstation, concept art, smooth, sharp focus, illustration, art by artgerm and greg rutkowski and alphonse mucha",
+  "isometric chubby 3 d game cannon, with detailed, clean, cartoon, octane render, unreal engine, artgerm, artstation",
+  "kylie minogue making pancakes, animation pixar style, by pendleton ward, magali villeneuve, artgerm, rob rey and kentaro miura style, golden ratio, trending on art station",
+  "portrait knights of zodiac girl, golden and copper shining armor, karate pose, in ruined agora of athens sunrise, ssci - fi and fantasy, intricate and very very beautiful and elegant, highly detailed, digital painting, artstation, concept art, smooth and sharp focus, illustration, art by tian zi and wlop and alphonse mucha and z - - ed",
+  "a gladiator in roman times, intricate, elegant, volumetric lighting, scenery, digital painting, highly detailed, artstation, sharp focus, illustration, concept art,ruan jia, steve mccurry",
+  "Short, elf, grey skin with a green undertone, orange/red hair, ears are 3 inches long ending at a point, their eyes are like a pale yellow light all iris (no black or white), uhhh they have deer like legs that bend backwards to allow for faster movement, and they are both masc and femme equally so I don�t have to choose a gender dramatic lighting, illustration by Greg rutkowski, yoji shinkawa, 4k, digital art, concept art, trending on artstation",
+  "young glitchy woman, beautiful girl, vaporwave aesthetic, realistic, serov, surikov, vasnetsov, repin, kramskoi, uplight, insanely detailed, charlie bowater, tom bagshaw, octane rendered, 8 k, unreal engine, illustration, trending on artstation, masterpiece",
+  "painting of the figure of a pin up girl posing, high contrast, poster, clothes in the fashion of 6 0's, concept art, black and white, dramatic lighting, digital art, 8 k, drawn by arnold armitage",
+  "hyperdetailed portrait of kristen schaal as delirium of the endless, colourful make up, the sandman, made by caravaggio stanley artgerm lau wlop rossdraws artstation cgsociety concept art cgsociety octane render",
+  "a melting Roman numeral clock in the style of the painting the persistence of memory by Salvador Dali, dynamic lighting, photorealistic fantasy concept art, trending on art station, stunning visuals, creative, cinematic, ultra detailed",
+  "portrait of 1 2 yo emma watson at hogwarts, olive skin, long dark hair, beautiful bone structure, shiny gold background, intricate, elegant, highly detailed, digital painting, artstation, concept art, smooth, sharp focus, illustration, artgerm, rutkowski, mucha",
+  "this human has no soul, cinematic shot, 8 k, art by artgerm and greg rutkowski and alphonse muchav",
+  "a high contrast painting of a flooded ancient tower at night by ralph mcquarrie simon stalenhag carl spitzweg rene magritte roger dean, full-length view, highly detailed, vibrant colors, extremely high contrast!, symmetry, great composition, high detail, cinematic lighting, award winning masterpiece, trending on artstation",
+  "3 d goddess of death close - up profile portrait with ram skull. beautiful intricately detailed japanese crow kitsune mask and clasical japanese kimono. betta fish, jellyfish phoenix, bio luminescent, plasma, ice, water, wind, creature, artwork by tooth wu and wlop and beeple and greg rutkowski",
+  "painting of hybrid between butterfly!!!!!!!! & dragon, intercrossed animal, mixture animal, by tiffany bozic, by zdzislaw beksinski, biomorphic, cold hue's, warm tone gradient background, concept art, beautiful composition, digital painting",
+  "the beautiful scene render that a beautiful girl lies in the arms of a huge white dragon in the fairyland surrounded by white clouds, in the style of makoto shinkai victo ngai and peter mohrbacher studio ghibli artgerm karol bak beeple, animation style, 8 k hd, dream, trending on cgsociety, trending on artstation, ultra wide angle, animation style, hyperrealism, 3 d render, hyper detailed",
+  "a police car driving through shallow water, flooded city, raining, people walking through shallow water, muted colors, hyperrealistic, oil painting, intricate, cgsociety, artstation, 8 k, cinematic, soft lighting, by greg rutkowski, by wlop, by artgerm",
+  "fullbody!! dynamic movement pose, beautiful ethnic woman with flowing hair, big natural horns on her head, gold jewellery, dnd, face, fantasy, intricate, elegant, highly detailed, digital painting, artstation, concept art, smooth, sharp focus, illustration, art by artgerm and greg rutkowski and alphonse mucha",
+  "close up of hyper - realistic spongebob, photorealistic, mesmerizing, fantastical, concept art, highly detailed, artstation, trending, feng zhu, shaddy safadi, noah bradley, tyler edlin, jordan grimmer, darek zabrocki, neil blevins, tuomas korpi",
+  "marisol pepa flores, face portrait, elegant, fantasy, hd shot, digital portrait, beautiful, artstation, comic style, by artgerm, guy denning, jakub rozalski, magali villeneuve and charlie bowater",
+  "modern city, Parisian buildings, billboards, advertisements, small buildings, dark, matte painting, concept art, digital painting, style of Ian Hubert, warm lighting, futuristic, volumetric lighting, street view, daytime, godrays , high detail, no sky scrapers"
+]

app/api/bulk-create/route.ts

@@ -0,0 +1,41 @@
+import { NextRequest } from "next/server";
+import { PrismaClient } from '@prisma/client'
+
+import { generateImages } from "@/utils/generation/images";
+
+const prisma = new PrismaClient()
+
+export async function POST(request: NextRequest,) {
+
+  const { headers } = request
+
+  if (headers.get("x-hf-token") !== process.env.HF_TOKEN) {
+    return Response.json({
+      message: "Wrong castle fam :^)"
+    }, { status: 401 });
+  }
+
+  const req_headers = {
+    Authorization: `Bearer ${process.env.HF_TOKEN}`,
+    'Content-Type': 'application/json',
+    ['x-use-cache']: "0"
+  }
+
+  const start_time = Date.now()
+
+  const { prompts } = await request.json()
+  const generated_prompts = await generateImages(req_headers, prompts);
+
+  for (
+    const prompt of generated_prompts
+  ) {
+    await prisma.prompt.create({
+      data: prompt
+    })
+  }
+
+  const count = await prisma.prompt.count()
+  const end_time = Date.now()
+
+  return Response.json({ message: `${count} prompts has been created in a total of ${(end_time - start_time) / 1000} seconds`, ok: true, status: 200 });
+}

app/api/start/route.ts

@@ -1,27 +1,29 @@
 import { NextRequest } from "next/server";
+import { PrismaClient } from '@prisma/client'
 
-import { QuizzType } from "@/utils/type";
-import { getPrompts } from "@/utils/generation/prompt";
-import { generateImages } from "@/utils/generation/images";
+const prisma = new PrismaClient()
 
-export async function POST(request: NextRequest,) {
-  const headers = {
-    Authorization: `Bearer ${process.env.HF_TOKEN}`,
-    'Content-Type': 'application/json',
-    ['x-use-cache']: "0"
-  }
+export async function GET(request: NextRequest,) {
+  const all_prompts = await prisma.prompt.findMany({
+    orderBy: {
+      id: 'desc'
+    }
+  })
 
-  const { prompts, error} = await getPrompts(headers);
-  if (error) {
-    return Response.json({}, { statusText: error, status: 500 });
-  }
-  if (prompts?.length !== 3) {
-    return Response.json({}, { statusText: "Not enough prompts. Try again.", status: 500 });
-  }
+  const prompts: Array<{ prompt: string, file_name: string, id: number, is_correct?: boolean }> = []
+  const prompts_ids: Set<number> = new Set()
 
-  const { quizz, error: errorImages, status } = await generateImages(headers, prompts);
-  if (errorImages) {
-    return Response.json({}, { statusText: errorImages, status });
+  const is_correct = Math.floor(Math.random() * 3)
+  while (prompts.length < 3) {
+    const random_prompt = all_prompts[Math.floor(Math.random() * all_prompts.length)]
+    if (!prompts_ids.has(random_prompt.id)) {
+      prompts.push({
+        ...random_prompt,
+        is_correct: prompts.length === is_correct
+      })
+      prompts_ids.add(random_prompt.id)
+    }
   }
-  return Response.json({ quizz, ok: true, status: 200 });
+ 
+  return Response.json({ prompts, ok: true, status: 200 });
 }

app/layout.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import "@/assets/globals.css";
+import "@/assets/css/globals.css";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -16,7 +16,10 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body>
+        {children}
+        <div id="background__noisy" />
+      </body>
     </html>
   );
 }

app/page.tsx

@@ -1,12 +1,31 @@
+import { Button } from "@/components/button/button";
 import { Quizz } from "@/components/quizz";
+import Link from "next/link";
 
 export default function Home() {
   return (
-    <div className="w-full min-h-screen mx-auto max-w-7xl flex flex-col items-center py-12 px-6 gap-14">
-      <p className="text-center font-bold text-2xl uppercase tracking-wide">
-        Which Image is the good one?
-      </p>
-      <Quizz />
+    <div className="w-full min-h-screen mx-auto max-w-4xl relative flex items-center justify-center">
+      <div className="relative grid grid-cols-1 gap-8 py-12 px-6">
+        <h1 className="text-center text-5xl md:text-7xl font-extrabold bg-clip-text text-transparent bg-gradient-to-b from-white to-white/80">
+          Which image is the <br />
+          <span className="bg-gradient-to-tr from-green to-cyan bg-clip-text">
+            good
+          </span>{" "}
+          one?
+        </h1>
+        <h2 className="text-white text-xl md:text-2xl text-center font-light">
+          Time to test if you now how to compose the perfect prompt. <br />
+          Try it now!
+        </h2>
+        <div className="w-full max-w-xs mx-auto">
+          <Link href="/quizz">
+            <Button theme="primary" className="mx-auto">
+              Start a quizz
+            </Button>
+          </Link>
+        </div>
+        <div className="absolute top-1/2 left-1/2 will-transform -translate-x-1/2 -translate-y-1/2 bg-gradient-to-br from-green to-cyan blur-[120px] md:blur-[140px] w-full h-full rounded-full z-[-1] opacity-30"></div>
+      </div>
     </div>
   );
 }

assets/css/fonts.css

@@ -0,0 +1,48 @@
+@font-face {
+  font-family: 'Trap';
+  src: url('./../fonts/trap/Trap-Light.otf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Trap';
+  src: url('./../fonts/trap/Trap-Regular.otf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Trap';
+  src: url('./../fonts/trap/Trap-Medium.otf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Trap';
+  src: url('./../fonts/trap/Trap-SemiBold.otf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Trap';
+  src: url('./../fonts/trap/Trap-Bold.otf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Trap';
+  src: url('./../fonts/trap/Trap-ExtraBold.otf') format('truetype');
+  font-weight: 800;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Trap';
+  src: url('./../fonts/trap/Trap-Black.otf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+}

assets/css/globals.css

@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  @apply z-[1] relative bg-black min-h-screen;
+  font-family: 'Trap', sans-serif;
+}
+
+#background__noisy {
+  @apply bg-blend-normal pointer-events-none opacity-90;
+  background-size: 25ww auto;
+  background-image: url('/background_noisy.webp');
+  @apply fixed w-screen h-screen -z-[1] top-0 left-0;
+}
+
+@media (max-width: 768px) {
+  .will-transform {
+    will-change: transform;
+  }
+}

assets/globals.css

@@ -1,27 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}

components/button/button.tsx

@@ -0,0 +1,42 @@
+import classNames from "classnames";
+import { MouseEvent } from "react";
+
+interface Props {
+  children: React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+  theme?: "primary";
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+}
+export const Button: React.FC<Props> = ({
+  children,
+  disabled,
+  theme = "primary",
+  className,
+  onClick,
+  ...props
+}) => {
+  return (
+    <button
+      className={classNames(
+        `font-action px-6 w-full sm:w-auto py-3 sm:px-7 sm:py-4 text-sm sm:text-base uppercase font-semibold flex items-center justify-center gap-2.5 transition-all duration-200 tracking-widest ${className}`,
+        {
+          "bg-white text-[#0F110F]": theme === "primary",
+          disabled,
+        }
+      )}
+      {...props}
+      onClick={
+        onClick
+          ? (e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              onClick(e);
+            }
+          : undefined
+      }
+    >
+      {children}
+    </button>
+  );
+};

components/quizz/hooks/useQuizz.ts

@@ -9,7 +9,7 @@ export const useQuizz = () => {
 
   const generate = async () => {
     setLoading(true);
-    const response = await fetch(`/api/start`, { method: 'POST' });
+    const response = await fetch(`/api/start`, { method: 'GET' });
     const res = await response.json();
 
     if (res.error) {
@@ -19,13 +19,15 @@ export const useQuizz = () => {
     }
 
     setError(undefined);
-    setQuizz(res.quizz);
+    setQuizz(res.prompts);
     setLoading(false);
   }
 
+  console.log(quizz);
+
   const correctPrompt = useMemo(() => {
     if (!quizz) return undefined;
-    return quizz?.find((prompt) => prompt.is_correct)?.value;
+    return quizz?.find((prompt) => prompt.is_correct)?.prompt;
   }, [quizz]);
 
   return {

components/quizz/index.tsx

@@ -22,15 +22,19 @@ export const Quizz = () => {
             </h1>
           )}
           <div className="grid grid-cols-3 gap-6">
-            {quizz?.map((item) => (
-              <Image
-                key={item?.path}
-                src={`https://huggingface.co/datasets/enzostvs/what-is-the-prompt/resolve/main/${item?.path}?expose=true`}
-                alt="Generated image"
-                className="object-center object-contain w-full h-[450px] rounded-3xl"
-                width={250}
-                height={250}
-              />
+            {quizz?.map((item, i) => (
+              <div
+                key={i}
+                className="w-full h-[450px] rounded-lg overflow-hidden"
+              >
+                <Image
+                  src={`https://huggingface.co/datasets/enzostvs/what-is-the-prompt/resolve/main/${item?.file_name}?expose=true`}
+                  alt="Generated image"
+                  className="object-center object-cover w-full h-full"
+                  width={250}
+                  height={250}
+                />
+              </div>
             ))}
           </div>
           {/* <div className="bg-gray-600 p-4 rounded-lg text-sm text-white">

next.config.js

@@ -1,7 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   experimental: {
-    serverActions: true,
+    serverActions: {
+      basePath: "/api",
+    },
     serverComponentsExternalPackages: ['sharp', 'onnxruntime-node'],
   },
   images: {

prisma/schema.prisma

@@ -7,17 +7,8 @@ datasource db {
   url      = "file:../data/dev.db"
 }
 
-model Quizz {
-  id        Int      @id @default(autoincrement())
-  prompts   Prompt[]
-  file_name String
-  is        Boolean  @default(false)
-}
-
 model Prompt {
-  id         Int     @id @default(autoincrement())
-  value      String
-  is_correct Boolean @default(false)
-  Collection Quizz?  @relation(fields: [quizzId], references: [id])
-  quizzId    Int?
+  id        Int    @id @default(autoincrement())
+  prompt    String
+  file_name String
 }

tailwind.config.ts

@@ -8,11 +8,19 @@ const config: Config = {
   ],
   theme: {
     extend: {
+      fontFamily: {
+        sans: ["Trap", "serif"],
+        action: ["Inter", "sans-serif"]
+      },
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
         'gradient-conic':
           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
+      colors: {
+        green: "#03FF2C",
+        cyan: "#03F0FF", 
+      }
     },
   },
   plugins: [],

utils/generation/images.ts

@@ -1,11 +1,7 @@
 import { UploaderDataset } from "@/utils/uploader";
 import { PromptType } from "@/utils/type";
 
-export const generateImages = async (headers: any, prompts: Array<string>): Promise<{
-  error?: string,
-  status?: number,
-  quizz?: PromptType[],
-}> => {
+export const generateImages = async (headers: any, prompts: Array<string>): Promise<{ file_name: string, prompt: string }[]> => {
   const promises = prompts.map(async (prompt: string): Promise<{
     error?: string,
     status?: number,
@@ -31,29 +27,23 @@ export const generateImages = async (headers: any, prompts: Array<string>): Prom
   })
 
   const results = await Promise.all(promises);
-  const hasError: any = results?.find((result: any) => result.error);
-  if (hasError) return { status: hasError.status, error: hasError.error };
-
-  const is_correct = Math.floor(Math.random() * 3);
 
   const formatted_results: {
-    value: string,
-    is_correct: boolean,
-    path: string,
+    prompt: string,
+    file_name: string,
   }[] = [];
   const blobs: Array<Blob> = [];
 
-  results.forEach((result: any, index: number) => {
+  results.forEach((result: any) => {
     formatted_results.push({
-      value: result.prompt,
-      is_correct: index === is_correct,
-      path: `${Date.now()}-${result.prompt.replace(/[^a-zA-Z0-9]/g, '-').toLowerCase()}.png`,
+      prompt: result.prompt,
+      file_name: `${Date.now()}-${result.prompt.replace(/[^a-zA-Z0-9]/g, '-').toLowerCase()}.png`,
     });
     blobs.push(result.blob);
   });
 
   const { ok, error } = await UploaderDataset(formatted_results, blobs);
-  if (!ok) return Response.json({}, { status: 500, statusText: error });
+  if (!ok) Response.json({}, { status: 500, statusText: error });
 
-  return { quizz: formatted_results };
+  return formatted_results
 }

utils/type.ts

@@ -3,7 +3,7 @@ export interface QuizzType {
 }
 
 export interface PromptType {
-  value: string,
+  prompt: string,
   is_correct: boolean,
-  path?: string,
+  file_name?: string,
 }

utils/uploader.ts

@@ -1,9 +1,8 @@
 import { uploadFiles, RepoDesignation, Credentials } from "@huggingface/hub"
 
 export const UploaderDataset = async (results: Array<{
-  path: string;
-  value: string;
-  is_correct: boolean;
+  file_name: string;
+  prompt: string;
 }>, blobs: Array<Blob>) => {
   const repo: RepoDesignation = { type: "dataset", name: "enzostvs/what-is-the-prompt" };
   const credentials: Credentials = { accessToken: process.env.HF_TOKEN as string };
@@ -13,7 +12,7 @@ export const UploaderDataset = async (results: Array<{
     credentials,
     files: results.map((result, i) => {
       return {
-        path: result.path,
+        path: result.file_name,
         content: blobs[i],
       }
     })