Spaces:

enzostvs
/

guess-the-image

Running

App Files Files Community

enzostvs HF Staff commited on Nov 16, 2023

Commit

091969f

1 Parent(s): e59a161

work in progress. end page and error management are missing

Browse files

Files changed (24) hide show

app/api/[questId]/score/route.ts +45 -0
app/api/start/route.ts +29 -12
app/layout.tsx +16 -4
app/page.tsx +21 -4
app/quizz/layout.tsx +27 -0
app/quizz/page.tsx +9 -0
assets/css/globals.css +2 -2
assets/images/sparkles-2.svg +4 -0
assets/images/sparkles.svg +4 -0
components/button/button.tsx +1 -1
components/quizz/card.tsx +82 -0
components/quizz/hooks/useQuizz.ts +53 -27
components/quizz/index.tsx +24 -42
components/quizz/layout-score.tsx +12 -0
components/react-query/hydrate.tsx +9 -0
components/react-query/providers.tsx +11 -0
data/dev.db +0 -0
next.config.js +1 -1
package-lock.json +0 -0
package.json +4 -0
prisma/schema.prisma +8 -2
tailwind.config.ts +1 -1
utils/index.ts +1 -0
utils/type.ts +1 -0

app/api/[questId]/score/route.ts ADDED Viewed

	@@ -0,0 +1,45 @@

+import { NextRequest } from "next/server";
+import { PrismaClient } from '@prisma/client'
+const prisma = new PrismaClient()
+export async function POST(request: NextRequest, { params }: { params: { questId: string } }) {
+  const { questId } = params;
+  const { promptId } = await request.json()
+  if (!promptId) {
+    return Response.json({
+      message: "promptId is required",
+    }, { statusText: "Missing body fields", status: 404 });
+  }
+  const quest = await prisma.quest.findUnique({
+    where: {
+      id: questId
+    }
+  })
+  if (!quest?.id) {
+    return Response.json({
+      message: "Quest doesn't exist",
+    }, { statusText: "Not Found", status: 404 });
+  }
+  // even if the answer is wrong, we delete the quest, not needed anymore
+  // await prisma.quest.delete({
+  //   where: {
+  //     id: questId
+  //   }
+  // })
+  if (quest.prompt_id_correct !== promptId) {
+    return Response.json({
+      ok: false,
+      message: "Wrong answer",
+    }, { statusText: "Wrong answer", status: 400 });
+  }
+  return Response.json({
+    ok: true,
+  })
+}

app/api/start/route.ts CHANGED Viewed

@@ -4,11 +4,6 @@ import { PrismaClient } from '@prisma/client'
 const prisma = new PrismaClient()
 export async function POST(request: NextRequest,) {
-  if (!prisma.prompt) {
-    return Response.json({}, { statusText: "No table found", status: 500 });
-  }
   const all_prompts = await prisma.prompt.findMany({
     orderBy: {
       id: 'desc'
@@ -19,20 +14,42 @@ export async function POST(request: NextRequest,) {
     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 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({ prompts, ok: true, status: 200 });
 }

 const prisma = new PrismaClient()
 export async function POST(request: NextRequest,) {
   const all_prompts = await prisma.prompt.findMany({
     orderBy: {
       id: 'desc'
     return Response.json({}, { statusText: "Not enough prompts. Try again.", status: 500 });
   }
+  const prompts: Array<{ prompt: string, file_name: string, id: string, is_correct?: boolean }> = []
+  const prompts_ids: Set<string> = new Set()
   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,)
       prompts_ids.add(random_prompt.id)
     }
   }
+  const prompt_correct = prompts[is_correct]
+  if (!prompt_correct) {
+    return Response.json({
+      message: "Not enough prompts. Try again."
+    }, { statusText: "Not enough prompts. Try again.", status: 500 });
+  }
+  const quest = await prisma.quest.create({
+    data: {
+      prompt_id_correct: prompt_correct.id
+    }
+  })
+  return Response.json(
+    {
+      data: {
+        prompts,
+        question: prompt_correct?.prompt,
+        quest_id: quest.id
+      },
+      ok: true,
+      status: 200
+    }
+  );
 }

app/layout.tsx CHANGED Viewed

@@ -1,23 +1,35 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import "@/assets/css/globals.css";
-const inter = Inter({ subsets: ["latin"] });
 export const metadata: Metadata = {
   title: "Create Next App",
   description: "Generated by create next app",
 };
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
       <body>
-        {children}
         <div id="background__noisy" />
       </body>
     </html>

+import { cache } from "react";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
+import { QueryClient } from "@tanstack/react-query";
+import Providers from "@/components/react-query/providers";
+import "@/assets/css/globals.css";
 export const metadata: Metadata = {
   title: "Create Next App",
   description: "Generated by create next app",
 };
+const inter = Inter({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-inter",
+});
+export const getQueryClient = () => cache(() => new QueryClient());
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
+    <html lang="en" className={`${inter.variable}`}>
       <body>
+        <div className="pb-16 h-screen overflow-auto">
+          <Providers>{children}</Providers>
+        </div>
         <div id="background__noisy" />
       </body>
     </html>

app/page.tsx CHANGED Viewed

@@ -1,17 +1,34 @@
-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-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 />
@@ -24,7 +41,7 @@ export default function Home() {
             </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>
   );

 import Link from "next/link";
+import Image from "next/image";
+import { Button } from "@/components/button/button";
+import SparklingEffect from "@/assets/images/sparkles.svg";
+import SparklingEffect2 from "@/assets/images/sparkles-2.svg";
 export default function Home() {
   return (
     <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 relative">
+          <Image
+            src={SparklingEffect}
+            width={30}
+            height={50}
+            alt="Sparkling effect"
+            className="absolute top-8 left-0 -translate-x-[calc(100%+1rem)]"
+          />
           Which image is the <br />
           <span className="bg-gradient-to-tr from-green to-cyan bg-clip-text">
             good
           </span>{" "}
           one?
+          <Image
+            src={SparklingEffect2}
+            width={30}
+            height={50}
+            alt="Sparkling effect"
+            className="absolute -top-6 right-0 translate-x-[calc(100%+1rem)]"
+          />
         </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 />
             </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 max-h-[250px] rounded-full z-[-1] opacity-40"></div>
       </div>
     </div>
   );

app/quizz/layout.tsx ADDED Viewed

	@@ -0,0 +1,27 @@

+import { LayoutScore } from "@/components/quizz/layout-score";
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="min-h-screen relative">
+      <div className="absolute top-0 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-[180px] w-full h-full max-w-5xl max-h-[250px] rounded-full z-[-1] opacity-50"></div>
+      <header>
+        <div className="flex items-center justify-center md:justify-between px-6 py-5 container mx-auto">
+          <p className="text-center text-xl font-extrabold bg-clip-text text-transparent bg-gradient-to-b from-white to-white/80 relative">
+            Which image is the{" "}
+            <span className="bg-gradient-to-tr from-green to-cyan bg-clip-text">
+              good
+            </span>{" "}
+            one?
+          </p>
+          <LayoutScore className="hidden md:block" />
+        </div>
+        <div className="bg-gradient-to-r from-transparent via-white/70 to-transparent w-full h-[1px] opacity-20" />
+      </header>
+      <main className="px-6 pt-6 lg:pt-20 max-w-7xl mx-auto">{children}</main>
+    </div>
+  );
+}

app/quizz/page.tsx ADDED Viewed

	@@ -0,0 +1,9 @@

+import { QuizzContent } from "@/components/quizz";
+export default function Quizz() {
+  return (
+    <div className="grid grid-cols-1 gap-12">
+      <QuizzContent />
+    </div>
+  );
+}

assets/css/globals.css CHANGED Viewed

@@ -2,8 +2,8 @@
 @tailwind components;
 @tailwind utilities;
-body {
-  @apply z-[1] relative bg-black min-h-screen;
   font-family: 'Trap', sans-serif;
 }

 @tailwind components;
 @tailwind utilities;
+html, body {
+  @apply z-[1] relative bg-black min-h-screen overflow-hidden;
   font-family: 'Trap', sans-serif;
 }

assets/images/sparkles-2.svg ADDED Viewed

assets/images/sparkles.svg ADDED Viewed

components/button/button.tsx CHANGED Viewed

@@ -21,7 +21,7 @@ export const Button: React.FC<Props> = ({
       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,
         }
       )}

       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] hover:-translate-y-1": theme === "primary",
           disabled,
         }
       )}

components/quizz/card.tsx ADDED Viewed

	@@ -0,0 +1,82 @@

+import React from "react";
+import Image from "next/image";
+import Confetti from "react-confetti";
+import { PromptType } from "@/utils/type";
+import { useQuizz } from "./hooks/useQuizz";
+import classNames from "classnames";
+interface Props {
+  prompt: PromptType;
+}
+export const Card: React.FC<Props> = ({ prompt }) => {
+  const { onScore, success } = useQuizz();
+  return (
+    <div
+      className={classNames(
+        "w-[340px] h-[340px] p-5 relative z-[1] cursor-pointer group",
+        {
+          "!cursor-not-allowed": success,
+        }
+      )}
+      onClick={success ? () => {} : async () => await onScore(prompt.id)}
+    >
+      <div
+        className={classNames(
+          "absolute bottom-0 w-full left-0 px-0 py-0 flex justify-between items-center translate-y-10 transition-all duration-200",
+          {
+            "opacity-0 pointer-events-none": success !== prompt.id,
+          }
+        )}
+      >
+        <p
+          className={classNames("text-[90px] transition-all duration-200", {
+            "-translate-x-1/2 translate-y-1/2": success !== prompt.id,
+          })}
+        >
+          🎉
+        </p>
+        <p
+          className={classNames(
+            "font-extrabold text-white text-7xl pr-6 pb-10 transition-all duration-200",
+            {
+              "translate-y-full": success !== prompt.id,
+            }
+          )}
+        >
+          +1
+        </p>
+      </div>
+      {success === prompt.id && (
+        <Confetti width={340} height={340} numberOfPieces={100} />
+      )}
+      <Image
+        src={`https://huggingface.co/datasets/enzostvs/what-is-the-prompt/resolve/main/${prompt.file_name}?expose=true`}
+        alt="Generated image"
+        width={340}
+        height={340}
+        className={classNames(
+          "object-center object-cover w-full h-full select-none hover:ring-4 ring-white transition-all duration-100",
+          {
+            "ring-4 !ring-[#E5AC00] hover:ring-[#E5AC00]":
+              success === prompt.id,
+            "!ring-transparent": success && success !== prompt.id,
+          }
+        )}
+      />
+      <div
+        className={classNames(
+          "w-full h-full blur-md lg:blur-md top-0 left-0 absolute z-[-1] opacity-20 transition-all duration-200",
+          {
+            "group-hover:opacity-40": !success,
+          }
+        )}
+        style={{
+          backgroundImage: `url(https://huggingface.co/datasets/enzostvs/what-is-the-prompt/resolve/main/${prompt.file_name}?expose=true)`,
+        }}
+      />
+    </div>
+  );
+};

components/quizz/hooks/useQuizz.ts CHANGED Viewed

@@ -1,40 +1,66 @@
-import { useMemo, useState } from "react";
 import { PromptType } from "@/utils/type";
 export const useQuizz = () => {
-  const [quizz, setQuizz] = useState<Array<PromptType> | undefined>(undefined);
-  const [loading, setLoading] = useState<boolean>(false);
-  const [error, setError] = useState<string | undefined>(undefined);
-  const generate = async () => {
-    setLoading(true);
-    const response = await fetch(`/api/start`, { method: 'GET' });
-    const res = await response.json();
-    if (res.error) {
-      setError(res.error);
-      setLoading(false);
-      return;
-    }
-    setError(undefined);
-    setQuizz(res.prompts);
-    setLoading(false);
-  }
-  console.log(quizz);
-  const correctPrompt = useMemo(() => {
-    if (!quizz) return undefined;
-    return quizz?.find((prompt) => prompt.is_correct)?.prompt;
-  }, [quizz]);
   return {
-    quizz,
     loading,
     error,
-    generate,
-    correctPrompt
   }
 }

+import { useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { PromptType } from "@/utils/type";
+import { sleep } from "@/utils";
 export const useQuizz = () => {
+  const client = useQueryClient();
+  const { data: success } = useQuery<string | null>(['success'], () => null, {
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    retry: false,
+  });
+  const setSuccess = (s: string | null) => client.setQueryData(['success'], s);
+  const { data: score } = useQuery<number>(['score'], () => 0, {
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    retry: false,
+  });
+  const onScore = async (id: string) => {
+    const request = await fetch(`/api/${data?.quest_id}/score`, {
+      method: 'POST',
+      body: JSON.stringify({ promptId: id })
+    });
+    const response = await request.clone().json().catch(() => ({}));
+    if (response?.ok) {
+      client.setQueryData(['score'], (score: number | undefined) => {
+        return (score ?? 0) + 1;
+      });
+      setSuccess(id);
+      await sleep(3000);
+      setSuccess(null);
+      await sleep(100);
+      client.invalidateQueries(['quizz']);
+      refetch()
+    }
+  };
+  const { data, isFetching: loading, error, refetch } = useQuery<{ prompts: PromptType[], quest_id: string, question: string }>(['quizz'], async () => {
+    const request = await fetch(`/api/start`, { method: 'POST' });
+    const response = await request.clone().json().catch(() => ({}));
+    return response.data;
+  }, {
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    retry: false,
+  });
   return {
+    prompts: data?.prompts ?? [],
     loading,
     error,
+    question: data?.question,
+    onScore,
+    score,
+    success
   }
 }

components/quizz/index.tsx CHANGED Viewed

@@ -3,51 +3,33 @@
 import Image from "next/image";
 import { useQuizz } from "./hooks/useQuizz";
-export const Quizz = () => {
-  const { loading, quizz, error, generate, correctPrompt } = useQuizz();
   return (
     <>
-      {loading && <p>Generating question and images...</p>}
-      {error && (
-        <div className="inline-block mx-auto rounded-lg bg-red-500/20 text-red-500 px-4 py-3 text-base">
-          Something went wrong: {error}
-        </div>
-      )}
-      {quizz && (
-        <>
-          {correctPrompt && (
-            <h1 className="text-5xl font-bold text-white text-center leading-tight relative">
-              “{correctPrompt?.replaceAll('"', "")}”
-            </h1>
-          )}
-          <div className="grid grid-cols-3 gap-6">
-            {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">
-            {JSON.stringify(quizz)}
-          </div> */}
-        </>
-      )}
-      <button
-        className="bg-blue-500 text-white text-sm rounded font-semibold px-4 py-2"
-        onClick={generate}
-      >
-        Start a quizz
-      </button>
     </>
   );
 };

 import Image from "next/image";
 import { useQuizz } from "./hooks/useQuizz";
+import { PromptType } from "@/utils/type";
+import { Card } from "./card";
+export const QuizzContent = () => {
+  const { loading, prompts, question } = useQuizz();
+  if (loading) return <p>Loading...</p>;
   return (
     <>
+      <p className="font-extrabold bg-clip-text text-transparent bg-gradient-to-b from-white to-white/80 text-2xl lg:text-[40px] text-center lg:!leading-snug relative">
+        <span className="font-action text-4xl lg:text-7xl !leading-3 text-white translate-y-2 lg:translate-y-4 inline-block pr-2">
+          “
+        </span>
+        {question}
+        <span className="font-action text-4xl lg:text-7xl text-white !leading-3 relative translate-y-5 lg:translate-y-12 pl-2 inline-block">
+          ”
+        </span>
+      </p>
+      <p className="text-white/70 font-normal text-lg lg:text-xl text-center">
+        Guess which image is related to the prompt below
+      </p>
+      <div className="flex flex-col lg:flex-row items-center justify-center gap-6 lg:gap-16">
+        {prompts?.map((prompt: PromptType, i: number) => (
+          <Card prompt={prompt} key={i} />
+        ))}
+      </div>
     </>
   );
 };

components/quizz/layout-score.tsx ADDED Viewed

	@@ -0,0 +1,12 @@

+"use client";
+import { useQuizz } from "./hooks/useQuizz";
+export const LayoutScore = ({ className }: { className?: string }) => {
+  const { score } = useQuizz();
+  return (
+    <p className={`text-white font-extrabold text-xl ${className}`}>
+      {score ?? 0} point{(score ?? 0) > 1 && "s"} 🎉
+    </p>
+  );
+};

components/react-query/hydrate.tsx ADDED Viewed

	@@ -0,0 +1,9 @@

+"use client";
+import React from "react";
+import { Hydrate as HydrationBoundary } from "@tanstack/react-query";
+function Hydrate(props: { children: React.ReactNode }) {
+  return <HydrationBoundary>{props.children}</HydrationBoundary>;
+}
+export default Hydrate;

components/react-query/providers.tsx ADDED Viewed

	@@ -0,0 +1,11 @@

+"use client";
+import * as React from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+export default function Providers({ children }: { children: React.ReactNode }) {
+  const [queryClient] = React.useState(() => new QueryClient());
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}

data/dev.db CHANGED Viewed

Binary files a/data/dev.db and b/data/dev.db differ

next.config.js CHANGED Viewed

@@ -17,7 +17,7 @@ const nextConfig = {
         hostname: "aeiljuispo.cloudimg.io",
       },
     ],
-  },
 }
 module.exports = nextConfig

         hostname: "aeiljuispo.cloudimg.io",
       },
     ],
+  }
 }
 module.exports = nextConfig

package-lock.json CHANGED Viewed

The diff for this file is too large to render. See raw diff

package.json CHANGED Viewed

@@ -11,10 +11,14 @@
   "dependencies": {
     "@huggingface/hub": "^0.12.1",
     "@prisma/client": "^5.6.0",
     "classnames": "^2.3.2",
     "next": "14.0.2",
     "prisma": "^5.6.0",
     "react": "^18",
     "react-dom": "^18",
     "react-use": "^17.4.0"
   },

   "dependencies": {
     "@huggingface/hub": "^0.12.1",
     "@prisma/client": "^5.6.0",
+    "@tanstack/react-query": "^4.32.6",
     "classnames": "^2.3.2",
+    "install": "^0.13.0",
     "next": "14.0.2",
+    "npm": "^10.2.4",
     "prisma": "^5.6.0",
     "react": "^18",
+    "react-confetti": "^6.1.0",
     "react-dom": "^18",
     "react-use": "^17.4.0"
   },

prisma/schema.prisma CHANGED Viewed

@@ -4,11 +4,17 @@ generator client {
 datasource db {
   provider = "sqlite"
-  url      = "file://data/dev.db"
 }
 model Prompt {
-  id        Int    @id @default(autoincrement())
   prompt    String
   file_name String
 }

 datasource db {
   provider = "sqlite"
+  url      = "file:../data/dev.db"
 }
 model Prompt {
+  id        String @id @default(uuid())
   prompt    String
   file_name String
 }
+model Quest {
+  id                String   @id @default(uuid())
+  prompt_id_correct String
+  created_at        DateTime @default(now())
+}

tailwind.config.ts CHANGED Viewed

@@ -10,7 +10,7 @@ const config: Config = {
     extend: {
       fontFamily: {
         sans: ["Trap", "serif"],
-        action: ["Inter", "sans-serif"]
       },
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',

     extend: {
       fontFamily: {
         sans: ["Trap", "serif"],
+        action: ['var(--font-inter)', "sans-serif"]
       },
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',

utils/index.ts ADDED Viewed

	@@ -0,0 +1 @@


1	+ export const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

utils/type.ts CHANGED Viewed

@@ -4,6 +4,7 @@ export interface QuizzType {
 export interface PromptType {
   prompt: string,
   is_correct: boolean,
   file_name?: string,
 }

 export interface PromptType {
   prompt: string,
+  id: string,
   is_correct: boolean,
   file_name?: string,
 }