init GTM

app/api/bulk-create/data.json

@@ -438,5 +438,155 @@
     "Iron Man in a sleek, futuristic suit, standing on a rooftop overlooking a neon-lit cityscape at sunset. (Style: Cyberpunk, Mood: Heroic)",
     "Tony Stark, aka Iron Man, relaxing in his home workshop, surrounded by gadgets and tools, with a friendly AI assistant hovering nearby. (Style: Toon Monster, Mood: Casual)",
     "Iron Man in a dark, gritty, post-apocalyptic wasteland, battling against a horde of robotic enemies. (Style: Punky, Mood: Dramatic)"
+  ],
+  [
+    "A dramatic digital portrait of Saruman, with a dark and moody color palette, highlighting his piercing eyes and menacing demeanor.",
+    "An adorable 3D character of Saruman, with a playful expression and a vibrant color scheme, standing in front of a beautiful, lush forest.",
+    "A stylized anime portrait of Saruman, with exaggerated facial features and a bold, colorful background, showcasing his powerful magic abilities."
+  ],
+  [
+    "Create a 3D CGI portrait of Sauron, the dark lord of Mordor, with a dramatic, ominous atmosphere.",
+    "Illustrate Sauron as an adorable, chibi character, with a cute, playful expression, surrounded by colorful, whimsical background elements.",
+    "Envision Sauron as a cyberpunk robot, with glowing red eyes and metallic armor, standing in a dystopian, neon-lit cityscape."
+  ],
+  [
+    "A dark, moody portrait of Count Dracula, rendered in a gothic, mystical style, with intricate details and textures that evoke the feeling of an ancient, haunted castle.",
+    "An adorable, chibi-style Count Dracula, with a playful, mischievous expression and a colorful, whimsical background that clashes with his dark reputation.",
+    "A futuristic, cyberpunk interpretation of Count Dracula, with glowing red eyes, cybernetic enhancements, and a dystopian cityscape in the background, evoking a sense of technological horror and unease."
+  ],
+  [
+    "A dark and moody illustration of Sherlock Holmes sitting in his armchair, surrounded by smoke and shadows, with a magnifying glass in hand and a thoughtful expression on his face.",
+    "A stylized, comic book-inspired illustration of Sherlock Holmes, standing heroically with his trenchcoat flowing behind him, a deerstalker hat on his head, and a confident smile on his face.",
+    "A whimsical, almost fantastical illustration of Sherlock Holmes, depicted as a tiny, mouse-like creature in a giant, steam-powered laboratory, surrounded by gears, levers, and brass fixtures, with a magnifying glass in hand and a look of curiosity on his face."
+  ],
+  [
+    "Sherlock Holmes' trusty sidekick, Dr. Watson, sits in a dimly lit room, surrounded by stacks of books and papers, deep in thought as he helps Holmes solve a mystery. (Realistic, Dramatic)",
+    "Dr. Watson, reimagined as a cute, anime-style girl, blushes as she helps Sherlock Holmes solve a case, her heart racing with excitement. (Cute Kawaii, Anime Portrait)",
+    "In a steampunk world, Dr. Watson, a rugged, cybernetically-enhanced man, assists Sherlock Holmes in unraveling a complex conspiracy, their advanced gadgets and gizmos at the ready. (Cyberpunk, Digital Art)"
+  ],
+  [
+    "A cute, pastel-colored Frankenstein's monster, surrounded by flowers and trees, with a friendly expression. (Cute Kawaii, Pastel Colors, Friendly)",
+    "A dark and moody Frankenstein's monster, standing in a stormy night, with lightning striking in the background. (Dark, Moody, Stormy)",
+    "A futuristic Frankenstein's monster, with glowing blue eyes and cybernetic parts, standing in a neon-lit cityscape. (Cyberpunk, Glowing Blue Eyes, Neon Lights)"
+  ],
+  [
+    "A dark and moody portrait of the Wolfman, with a focus on his sharp teeth and glowing eyes, set against a eerie forest background. (Style: Digital Portrait, Mood: Dramatic, Colors: Dark blues and greys)",
+    "An adorable, stylized Wolfman character, with a playful expression and a colorful, whimsical background. (Style: Cute Creature, Mood: Playful, Colors: Bright pastels)",
+    "A cyberpunk reimagining of the Wolfman, with a sleek, futuristic suit and glowing cybernetic eyes, standing in a dystopian cityscape. (Style: Cyberpunk, Mood: Edgy, Colors: Neon pink and blue)"
+  ],
+  [
+    "A sleek black cat with a mischievous grin, sitting on a pile of colorful balls, in a playful, vibrant atmosphere.",
+    "A fluffy white cat with big, round eyes, surrounded by a soft, pastel-colored background, exuding a sense of innocence and cuteness.",
+    "A tough-looking grey cat with a scar above its eye, standing on a gritty, urban rooftop, surrounded by a dark, moody atmosphere."
+  ],
+  [
+    "A clumsy dog with a goofy smile, standing on its hind legs while wearing a superhero cape, in a bright and colorful comic book style.",
+    "A drooling dog with a sideways glance, sitting on a pile of its favorite toys, surrounded by a soft, pastel-colored background.",
+    "A snarling dog with sharp teeth, standing on a desolate, post-apocalyptic wasteland, with a dark and gritty cyberpunk atmosphere."
+  ],
+  [
+    "Superman in a dramatic pose, standing on a skyscraper, looking out over the city. (Style: Digital Art, Mood: Heroic, Colors: Blue, Red, Yellow, Gray)",
+    "Superman in a cute, cartoonish style, flying through the air with a big smile on his face. (Style: Comic Art, Mood: Playful, Colors: Bright, Pastel)",
+    "Superman in a dark, gritty style, standing in a dark alleyway, looking intense and brooding. (Style: Digital Art, Mood: Moody, Colors: Dark, Muted)"
+  ],
+  [
+    "A dark and gritty Batman portrait with a spotlight shining down on his face, highlighting his intense expression and dramatic shadows. Style: Digital Art, Dramatic, Low Poly.",
+    "A stylized Batman illustration with a bold, angular design and vibrant colors, showcasing his sleek suit and confident pose. Style: Comic Art, Pixar, Toon Monster.",
+    "A haunting Batman scene with a twisted, nightmarish atmosphere, featuring twisted, elongated shadows and a sense of impending danger. Style: Horror, Digital Art, Isometric.Please let me know if you want me to generate more prompts or if you have any specific theme or style in mind."
+  ],
+  [
+    "A 3D CGI rendering of Green Lantern in a dramatic pose, with a glowing green energy aura surrounding his body and a powerful expression on his face.",
+    "An adorable, cartoon-style Green Lantern, with a cute, rounded design and a playful expression on his face, surrounded by a bright and colorful background.",
+    "A dark and moody depiction of Green Lantern, with a gritty, realistic style and a menacing expression on his face, surrounded by a dark and ominous cityscape."
+  ],
+  [
+    "Anime Captain America portrait with a dynamic pose and vibrant colors, showcasing his iconic shield and costume.",
+    "3D Captain America standing on a ruined building, looking out towards the horizon with a sense of determination, in a dark and gritty style inspired by video games.",
+    "Cute Kawaii Captain America in a chibi style, holding a miniature shield and wearing a adorable costume, surrounded by colorful balloons and confetti in a joyful atmosphere."
+  ],
+  [
+    "CyberPunk Darth VaderGenerate a cybernetic version of Darth Vader with neon lights and glowing red eyes, standing in front of a futuristic cityscape.",
+    "Adorable Darth VaderCreate a cute and endearing version of Darth Vader, with a childlike appearance and a playful expression, holding a lightsaber and standing in front of a colorful background.",
+    "Dark Darth VaderIllustrate a dark and ominous version of Darth Vader, with a menacing expression and a dark aura surrounding him, standing in front of a stormy sky or a dark cave."
+  ],
+  [
+    "Luke Skywalker in a dramatic pose, surrounded by a glowing aura, with a starry night sky background. (Style: Digital Art, Mood: Dramatic, Color: Blue and gold, Details: Lightsaber, Jedi robes)",
+    "Luke Skywalker as a cute anime-style character, holding a lightsaber and wearing a mini Jedi robe, standing on a planetary surface with a bright and colorful sunset background. (Style: Anime Portrait, Mood: Adorable, Color: Pastel, Details: Big eyes, exaggerated facial expression)",
+    "Luke Skywalker as a gritty, realistic character, standing in a dark and grungy alleyway, with a broken lightsaber hilt at his feet and a stormtrooper helmet on the ground nearby. (Style: Digital Art, Mood: Dark, Color: Grungy, Details: Broken lightsaber, Stormtrooper helmet)"
+  ],
+  [
+    "A 3D rendering of Han Solo standing in front of the Millennium Falcon, with a swaggering pose and a confident smile. The lighting should be dramatic, with a strong contrast between light and dark.",
+    "An adorable, cartoon-style Han Solo, dressed in his signature outfit, holding a blaster and standing in front of a colorful, stylized version of the Death Star. The mood should be playful and light-hearted.",
+    "A stylized digital portrait of Han Solo, with a focus on his rugged, weathered appearance. The color palette should be muted and gritty, with a focus on earth tones. The pose should be relaxed, with Han leaning against a wall or sitting on a crate, looking tired but still confident."
+  ],
+  [
+    "A 3D rendered image of Hogwarts School of Witchcraft and Wizardry, with a warm and inviting lighting, showcasing the castle's grand architecture and snow-covered grounds.",
+    "An adorable illustration of a young Harry Potter, sitting on a stack of books, surrounded by owls, with a curious expression on his face, and a warm color palette.",
+    "A dark and moody illustration of a wand choosing a wizard, with a spotlight shining down on the wand, and a dark, mysterious background, showcasing the wand's power and destiny."
+  ],
+  [
+    "Create a 3D character model of Hermione Granger in a dynamic pose, with a vibrant and colorful background that reflects her personality.",
+    "Draw an adorable illustration of Hermione Granger in a cute outfit, surrounded by books and magic sparkles, with a soft and pastel color palette.",
+    "Imagine a dark and edgy version of Hermione Granger, with a gothic-inspired outfit and a fierce expression, standing in a dimly lit library with shelves of ancient tomes and mysterious artifacts."
+  ],
+  [
+    "Anime-style Ron Weasley portrait with a mischievous grin and a hint of movement in the background, as if he's just apparated into the scene.",
+    "3D CGI Ron Weasley character model with a detailed, realistic texture and a dynamic pose, as if he's about to cast a spell.",
+    "Cute, stylized Ron Weasley illustration with bold lines and vibrant colors, surrounded by floating objects and patterns that reflect his playful and mischievous personality."
+  ],
+  [
+    "A 3D rendered Gandalf, standing on a rocky cliff overlooking a vast landscape, with a staff in hand and a wise expression on his face.",
+    "An adorable Gandalf, sitting on a mushroom in a whimsical forest, surrounded by friendly woodland creatures, with a book in hand and a kind smile.",
+    "A cyberpunk Gandalf, standing in a dark alleyway, surrounded by neon lights and holographic advertisements, with a cybernetic staff and a determined expression."
+  ],
+  [
+    "Anime Frodo Baggins in a beautiful, serene landscape, surrounded by lush greenery and a warm, soft light.",
+    "Frodo Baggins as a cute, cartoonish character, standing on a rocky cliffside, with a playful expression and a vibrant, colorful background.",
+    "Frodo Baggins as a gritty, realistic digital portrait, with a strong, determined expression and a dark, dramatic atmosphere."
+  ],
+  [
+    "A 3D rendered Samwise Gamgee, standing on a green hill under a bright blue sky, with a friendly smile and a trusty sword by his side.",
+    "An adorable Samwise Gamgee, drawn in a cute Kawaii style, sitting on a mushroom in a whimsical forest, surrounded by colorful flowers and birds.",
+    "A dark and moody Samwise Gamgee, illustrated in a punky style, standing in a dystopian urban landscape, with a determined look on his face and a rebellious spirit in his eyes."
+  ],
+  [
+    "A 3D rendered image of Bilbo Baggins sitting in his cozy hobbit hole, surrounded by books and pipes, with a warm and inviting lighting.",
+    "A stylized Bilbo Baggins portrait with an anime-inspired style, featuring vibrant colors and bold lines, showcasing his bravery and determination.",
+    "A dark and moody illustration of Bilbo Baggins navigating through a mysterious and eerie forest, with glowing eyes and misty atmosphere, highlighting the sense of danger and uncertainty."
+  ],
+  [
+    "Epic Aragorn in a dramatic pose, surrounded by a glowing aura, with a mystical sword in hand and a regal crown on his head, standing on a rocky cliff overlooking a vast kingdom.",
+    "Adorable Aragorn as a chibi character, with a playful expression, holding a tiny sword and wearing a miniature crown, sitting on a cute little cushion surrounded by fluffy clouds and rainbows.",
+    "Dark Aragorn as a brooding, menacing figure, with a dark sword and a black crown, standing in a dimly lit throne room with stone walls and flickering torches, casting a sinister shadow on the ground."
+  ],
+  [
+    "A dark, moody portrait of Gollum, emphasizing his gaunt, emaciated features and obsessive gaze, surrounded by a faint glow of preciousness.",
+    "An adorable, stylized Gollum, with large, round eyes and a playful expression, perched atop a pile of treasure, surrounded by a bright, colorful aura.",
+    "A dramatic, 3D rendering of Gollum, posed atop a rocky outcropping, with a stormy, threatening sky in the background, and a sense of tension and unease in his posture and facial expression."
+  ],
+  [
+    "Anime-style Boromir with a determined expression, standing on a rocky cliff overlooking a vast landscape.",
+    "3D CGI Boromir with a rugged, battle-worn appearance, holding a sword and shield in a dark, dystopian environment.",
+    "Cute, chibi Boromir with a playful expression, sitting on a mushroom in a whimsical forest surrounded by friendly creatures."
+  ],
+  [
+    "A 3D rendered image of Legolas from The Lord of the Rings, standing on a rocky cliff overlooking a vast landscape.",
+    "An adorable, chibi-style Legolas, sitting on a mushroom in a whimsical forest, surrounded by animals and plants.",
+    "A dark and moody Legolas, standing in a dimly lit forest, his eyes glowing in the shadows, with a mysterious atmosphere."
+  ],
+  [
+    "A 3D rendered Gimli, standing proudly with his axe, in a dramatic pose, with a stormy background.",
+    "An adorable Gimli, with a cute expression, sitting on a pile of gold coins, surrounded by jewels and treasure, in a colorful, whimsical style.",
+    "A cyberpunk Gimli, with glowing red eyes, standing in a dark alleyway, surrounded by neon lights and futuristic technology, in a moody, dystopian atmosphere."
+  ],
+  [
+    "A dramatic portrait of Thorin Oakenshield, with a stern expression and a battle-worn armor, standing in front of a snowy mountain. Style: Digital Portrait, Color: Cold colors, Mood: Serious, Details: Snow, armor, sword.",
+    "An adorable 3D character of Thorin Oakenshield, with a cute and playful expression, standing in front of a colorful background with a rainbow. Style: 3D Character, Color: Bright colors, Mood: Happy, Details: Rainbow, clouds, flowers.",
+    "A cyberpunk version of Thorin Oakenshield, with glowing blue eyes and a futuristic armor, standing in front of a neon-lit cityscape. Style: Cyberpunk, Color: Neon colors, Mood: Mysterious, Details: Glowing eyes, neon lights, futuristic city."
+  ],
+  [
+    "A cyberpunk-inspired illustration of Bard the Bowman, with a sleek, futuristic bow and arrow, standing on a neon-lit rooftop overlooking a dystopian cityscape.",
+    "An adorable, chibi-style Bard the Bowman, holding a tiny bow and arrow, standing on a grassy hill with a cute, cartoonish castle in the background.",
+    "A dark, gritty illustration of Bard the Bowman, with a weathered, worn bow and arrow, standing in a dimly-lit alleyway surrounded by looming shadows and mysterious figures."
   ]
-]
+]

app/api/start/route.ts

@@ -3,12 +3,12 @@ import { PrismaClient } from '@prisma/client'
 
 const prisma = new PrismaClient()
 
-export async function POST(request: NextRequest,) {
-  // const { old_id } = await request.json()
+export async function POST(request: NextRequest) {
+  const { old_id } = await request?.json()
 
   const results: Array<Record<string, any>> = await prisma.$queryRawUnsafe(
-    // old_id ?
-    // `SELECT * FROM "Prompt" WHERE id != '${old_id}' ORDER BY RANDOM() LIMIT 1` :
+    old_id ?
+    `SELECT * FROM "Prompt" WHERE id != '${old_id}' ORDER BY RANDOM() LIMIT 1` :
     `SELECT * FROM "Prompt" ORDER BY RANDOM() DESC LIMIT 1;`,
   )
 
@@ -20,11 +20,25 @@ export async function POST(request: NextRequest,) {
   const prompts = await prisma.promptImage.findMany({
     where: {
       promptId: results[0].id
+    },
+    select: {
+      id: true,
+      file_name: true,
+      promptId: true,
     }
   })
 
   const correct_prompt = prompts[is_correct]
 
+  const prompt_image = await prisma.promptImage.findUnique({
+    where: {
+      id: correct_prompt.id
+    },
+    select: {
+      text: true
+    }
+  })
+
   if (!correct_prompt) {
     return Response.json({
       message: "Not enough prompts. Try again."
@@ -41,7 +55,7 @@ export async function POST(request: NextRequest,) {
     {
       data: {
         prompts,
-        question: correct_prompt?.text,
+        question: prompt_image?.text,
         quest_id: quest.id
       },
       ok: true,

app/layout.tsx

@@ -1,10 +1,11 @@
-import { cache } from "react";
+import { cache, Suspense } 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";
+import Analytics from "@/components/gtm";
 
 export const metadata: Metadata = {
   title: "Guess the Image: which one is the good one?",
@@ -52,6 +53,9 @@ export default function RootLayout({
           <Providers>{children}</Providers>
         </div>
         <div id="background__noisy" />
+        <Suspense>
+          <Analytics />
+        </Suspense>
       </body>
     </html>
   );

components/gtm/index.tsx

@@ -0,0 +1,48 @@
+"use client";
+import { useEffect } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+import Script from "next/script";
+
+import { pageview } from "@/utils/gtm";
+
+export default function Analytics() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const isDeveloper = process.env.NEXT_PUBLIC_APP_DOMAIN === "developpeur.bio";
+
+  useEffect(() => {
+    if (pathname) {
+      pageview(pathname);
+    }
+  }, [pathname, searchParams]);
+
+  if (process.env.NEXT_PUBLIC_ENV !== "production") {
+    return null;
+  }
+
+  return (
+    <>
+      <noscript>
+        <iframe
+          src="https://www.googletagmanager.com/ns.html?id=P6WGPCC4"
+          height="0"
+          width="0"
+          style={{ display: "none", visibility: "hidden" }}
+        />
+      </noscript>
+      <Script
+        id="gtm-script"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `
+    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer', 'GTM-P6WGPCC4');
+  `,
+        }}
+      />
+    </>
+  );
+}

components/quizz/hooks/useQuizz.ts

@@ -59,7 +59,7 @@ export const useQuizz = () => {
   };
 
   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 request = await fetch(`/api/start`, { method: 'POST', body: JSON.stringify({}) });
     const response = await request.clone().json().catch(() => ({}));
     return response.data;
   }, {

utils/gtm.ts

@@ -0,0 +1,22 @@
+// lib/gtm.ts
+type WindowWithDataLayer = Window & {
+  dataLayer: Record<string, any>[]
+}
+
+declare const window: WindowWithDataLayer
+
+export const GTM_ID = "GTM-P6WGPCC4"
+
+export const pageview = (url: string) => {
+  if (typeof window.dataLayer !== "undefined") {
+    window.dataLayer.push({
+      event: "pageview",
+      page: url,
+    })
+  } else {
+    console.log({
+      event: "pageview",
+      page: url,
+    })
+  }
+}