From 6fdb87c32a32b8c1528e1fde84c04f08cb5a1594 Mon Sep 17 00:00:00 2001
From: Francisco Pessano <franpessano1@gmail.com>
Date: Sat, 12 Oct 2024 01:02:23 -0300
Subject: [PATCH] Updated prompt and added queue system

---
 src/app/_components/album-showcase.tsx  | 110 ++++++++++++++++--------
 src/app/_components/artist-showcase.tsx |  85 ++++++++++++++----
 src/app/_components/showcase.tsx        |  30 +++++--
 src/app/_components/spotify-data.tsx    |  10 +--
 src/app/utils/contants.ts               |   2 +
 src/server/utils/index.ts               |   5 +-
 6 files changed, 177 insertions(+), 65 deletions(-)
 create mode 100644 src/app/utils/contants.ts

diff --git a/src/app/_components/album-showcase.tsx b/src/app/_components/album-showcase.tsx
index 3e66b90..e406b14 100644
--- a/src/app/_components/album-showcase.tsx
+++ b/src/app/_components/album-showcase.tsx
@@ -6,7 +6,9 @@ import { TrackByAlbum } from "./spotify-data";
 import { api } from "@/trpc/react";
 import { quantum } from "ldrs";
 import { ring2 } from "ldrs";
+import { pulsar } from "ldrs";
 
+pulsar.register();
 ring2.register();
 quantum.register();
 
@@ -15,7 +17,15 @@ export default function AlbumShowcase({
   album,
   position,
   tracks,
-}: TrackByAlbum & { spookify: boolean }) {
+  place,
+  lastSpookyImageLoaded,
+  setLastSpookyImageLoaded,
+}: TrackByAlbum & {
+  spookify: boolean;
+  place: number;
+  lastSpookyImageLoaded: number;
+  setLastSpookyImageLoaded: any;
+}) {
   const imageSource = album.images[0]
     ? album.images[0].url
     : "https://via.placeholder.com/150";
@@ -77,7 +87,15 @@ export default function AlbumShowcase({
   )?.match(/https:\/\/res.cloudinary.com\/[^"]+/);
 
   const spookyImageSource = spookyImageMatch ? spookyImageMatch[0] : null;
-  console.log(spookyImageSource);
+
+  const onImageLoad = () => {
+    if (!spookyImageLoaded) {
+      setSpookyImageLoaded(true);
+      setLastSpookyImageLoaded((state: number) =>
+        state > place ? state : place,
+      );
+    }
+  };
 
   return (
     <div
@@ -97,40 +115,65 @@ export default function AlbumShowcase({
             src={imageSource}
             alt={album.name}
           />
-          {!!spookyImageSource && (
-            <img
-              className="h-36 w-36 cursor-pointer rounded"
-              style={{
-                display:
-                  showSpookyImage && spookyImageLoaded ? "block" : "none",
-              }}
-              src={spookyImageSource}
-              alt={album.name}
-              onLoad={() => {
-                if (!spookyImageLoaded) {
-                  setSpookyImageLoaded(true);
-                }
-              }}
-            />
-          )}
+          {spookyImageSource &&
+            (generateSpookyImage.data
+              ? lastSpookyImageLoaded >= place ||
+                lastSpookyImageLoaded + 1 === place
+              : true) && (
+              <img
+                className="h-36 w-36 cursor-pointer rounded"
+                style={{
+                  display:
+                    showSpookyImage && spookyImageLoaded ? "block" : "none",
+                }}
+                src={spookyImageSource}
+                alt={album.name}
+                onLoad={onImageLoad}
+                onError={() => {
+                  onImageLoad();
+                }}
+              />
+            )}
           {showSpookyImage && !spookyImageLoaded && (
             <div className="flex h-36 w-36 items-center justify-center rounded bg-slate-300 bg-opacity-10">
               <div>
-                {generateSpookyImage.data ? (
-                  <>
-                    <l-quantum
-                      size="100"
-                      speed="1.75"
-                      color="white"
-                    ></l-quantum>
-                    <p className="text-center">Generating...</p>
-                  </>
-                ) : (
-                  <>
-                    <l-ring-2 size="100" speed="1.75" color="white"></l-ring-2>
-                    <p className="text-center">Getting image...</p>
-                  </>
-                )}
+                {(() => {
+                  if (generateSpookyImage.data) {
+                    if (lastSpookyImageLoaded < place - 1) {
+                      return (
+                        <>
+                          <l-pulsar
+                            size="100"
+                            speed="1.75"
+                            color="white"
+                          ></l-pulsar>{" "}
+                          <p className="text-center">On queue...</p>
+                        </>
+                      );
+                    }
+                    return (
+                      <>
+                        <l-quantum
+                          size="100"
+                          speed="1.75"
+                          color="white"
+                        ></l-quantum>
+                        <p className="text-center">Generating...</p>
+                      </>
+                    );
+                  } else {
+                    return (
+                      <>
+                        <l-ring-2
+                          size="100"
+                          speed="1.75"
+                          color="white"
+                        ></l-ring-2>
+                        <p className="text-center">Getting image...</p>
+                      </>
+                    );
+                  }
+                })()}
               </div>
             </div>
           )}
@@ -144,7 +187,6 @@ export default function AlbumShowcase({
           {tracks.map((track) => (
             <li key={track.id}>{track.name}</li>
           ))}
-          {JSON.stringify(generateSpookyImage.data)}
         </ul>
       </section>
     </div>
diff --git a/src/app/_components/artist-showcase.tsx b/src/app/_components/artist-showcase.tsx
index 701cb92..bbda3f4 100644
--- a/src/app/_components/artist-showcase.tsx
+++ b/src/app/_components/artist-showcase.tsx
@@ -14,11 +14,17 @@ export default function ArtistShowcase({
   images,
   name,
   id,
+  place,
+  lastSpookyImageLoaded,
+  setLastSpookyImageLoaded,
 }: {
   spookify: boolean;
   images: { url: string }[];
   name: string;
   id: string;
+  place: number;
+  lastSpookyImageLoaded: number;
+  setLastSpookyImageLoaded: any;
 }) {
   const [showSpookyImage, setShowSpookyImage] = useState(spookify);
   const [spookyImageLoaded, setSpookyImageLoaded] = useState(false);
@@ -79,6 +85,15 @@ export default function ArtistShowcase({
   )?.match(/https:\/\/res.cloudinary.com\/[^"]+/);
   const spookyImageSource = spookyImageMatch ? spookyImageMatch[0] : null;
 
+  const onImageLoad = () => {
+    if (!spookyImageLoaded) {
+      setSpookyImageLoaded(true);
+      setLastSpookyImageLoaded((state: number) =>
+        state > place ? state : place,
+      );
+    }
+  };
+
   return (
     <Tilt tiltMaxAngleX={10} tiltMaxAngleY={10} transitionSpeed={200}>
       <div
@@ -93,25 +108,29 @@ export default function ArtistShowcase({
           src={imageSource}
           alt={name}
         />
-        {!!spookyImageSource && (
-          <img
-            style={{
-              display: showSpookyImage && spookyImageLoaded ? "block" : "none",
-            }}
-            className="h-56 w-56 object-fill"
-            onLoad={() => {
-              if (!spookyImageLoaded) {
-                setSpookyImageLoaded(true);
-              }
-            }}
-            src={spookyImageSource}
-            alt={name}
-          />
-        )}
+        {spookyImageSource &&
+          (generateSpookyImage.data
+            ? lastSpookyImageLoaded >= place ||
+              lastSpookyImageLoaded + 1 === place
+            : true) && (
+            <img
+              style={{
+                display:
+                  showSpookyImage && spookyImageLoaded ? "block" : "none",
+              }}
+              className="h-56 w-56 object-fill"
+              onLoad={onImageLoad}
+              onError={() => {
+                onImageLoad();
+              }}
+              src={spookyImageSource}
+              alt={name}
+            />
+          )}
         {showSpookyImage && !spookyImageLoaded && (
           <div className="flex h-56 w-56 items-center justify-center">
             <div>
-              {generateSpookyImage.data ? (
+              {/* {generateSpookyImage.data ? (
                 <>
                   <l-quantum size="165" speed="1.75" color="white"></l-quantum>
                   <p className="text-center">Generating...</p>
@@ -128,7 +147,39 @@ export default function ArtistShowcase({
                   ></l-ring-2>
                   <p className="text-center">Getting image...</p>
                 </>
-              )}
+              )} */}
+              {(() => {
+                if (generateSpookyImage.data) {
+                  if (lastSpookyImageLoaded < place - 1) {
+                    return (
+                      <>
+                        <l-pulsar
+                          size="165"
+                          speed="1.75"
+                          color="white"
+                        ></l-pulsar>
+                        <p className="text-center">On queue...</p>
+                      </>
+                    );
+                  }
+                  return (
+                    <>
+                      <l-quantum
+                        size="165"
+                        speed="1.75"
+                        color="white"
+                      ></l-quantum>
+                      <p className="text-center">Generating...</p>
+                    </>
+                  );
+                }
+                return (
+                  <>
+                    <l-ring-2 size="165" speed="1.75" color="white"></l-ring-2>
+                    <p className="text-center">Getting image...</p>
+                  </>
+                );
+              })()}
             </div>
           </div>
         )}
diff --git a/src/app/_components/showcase.tsx b/src/app/_components/showcase.tsx
index ac20584..8af26a1 100644
--- a/src/app/_components/showcase.tsx
+++ b/src/app/_components/showcase.tsx
@@ -12,7 +12,10 @@ export function Showcase({
   tracksByAlbum: Record<string, any>;
   artists: any[];
 }) {
-  const [spookify, setSpookify] = useState(false);
+  const [spookify, setSpookify] = useState(true);
+  const [lastSpookyImageLoaded, setLastSpookyImageLoaded] = useState(0);
+
+  const albumsQuantity = Object.values(tracksByAlbum).length;
   return (
     <>
       <div className="flex gap-2 self-start">
@@ -24,10 +27,16 @@ export function Showcase({
       <h3>Tracks by album</h3>
       {Object.values(tracksByAlbum)
         .sort((a, b) => b.position - a.position)
-        .map(
-          (album, index) =>
-            !index && <AlbumShowcase spookify={spookify} {...album} />,
-        )}
+        .map((album, index) => (
+          <AlbumShowcase
+            key={album.id}
+            place={index}
+            lastSpookyImageLoaded={lastSpookyImageLoaded}
+            setLastSpookyImageLoaded={setLastSpookyImageLoaded}
+            spookify={spookify}
+            {...album}
+          />
+        ))}
       <h3>Artists images</h3>
       <div
         style={{
@@ -36,9 +45,16 @@ export function Showcase({
           justifyContent: "space-evenly",
         }}
       >
-        {[artists[0]].map((artist) => {
+        {artists.map((artist, index) => {
           return (
-            <ArtistShowcase spookify={spookify} key={artist.id} {...artist} />
+            <ArtistShowcase
+              place={index + albumsQuantity}
+              lastSpookyImageLoaded={lastSpookyImageLoaded}
+              setLastSpookyImageLoaded={setLastSpookyImageLoaded}
+              spookify={spookify}
+              key={artist.id}
+              {...artist}
+            />
           );
         })}
       </div>
diff --git a/src/app/_components/spotify-data.tsx b/src/app/_components/spotify-data.tsx
index ddc66ae..fd340fa 100644
--- a/src/app/_components/spotify-data.tsx
+++ b/src/app/_components/spotify-data.tsx
@@ -1,8 +1,6 @@
 import SpotifyWebApi from "spotify-web-api-node";
 import Showcase from "./showcase";
-
-const TRACKS_LIMIT = 20;
-const ARTISTS_LIMIT = 21;
+import { FETCH_ARTISTS_LIMIT, FETCH_TRACKS_LIMIT } from "../utils/contants";
 
 export type TrackByAlbum = {
   album: {
@@ -35,13 +33,13 @@ export default async function SpotifyData({
   const albums = albumsData.body.items;
 
   const artistsData = await spotifyApi.getMyTopArtists({
-    limit: ARTISTS_LIMIT,
+    limit: FETCH_ARTISTS_LIMIT,
     time_range: "short_term",
   });
   const artists = artistsData.body.items;
 
   const tracksData = await spotifyApi.getMyTopTracks({
-    limit: TRACKS_LIMIT,
+    limit: FETCH_TRACKS_LIMIT,
     time_range: "short_term",
   });
   const tracks = tracksData.body.items.map((track, i) => ({
@@ -59,7 +57,7 @@ export default async function SpotifyData({
           album: track.album,
           position:
             tracksWithAlbum.reduce(
-              (acc, _track) => TRACKS_LIMIT / _track.position + acc,
+              (acc, _track) => FETCH_TRACKS_LIMIT / _track.position + acc,
               0,
             ) / tracksWithAlbum.length,
           tracks: [],
diff --git a/src/app/utils/contants.ts b/src/app/utils/contants.ts
new file mode 100644
index 0000000..960493d
--- /dev/null
+++ b/src/app/utils/contants.ts
@@ -0,0 +1,2 @@
+export const FETCH_TRACKS_LIMIT = 20;
+export const FETCH_ARTISTS_LIMIT = 21;
diff --git a/src/server/utils/index.ts b/src/server/utils/index.ts
index 9e65611..d5506e5 100644
--- a/src/server/utils/index.ts
+++ b/src/server/utils/index.ts
@@ -25,7 +25,10 @@ export const uploadImage = async (
 };
 
 export const makeImageSpooky = (publicId: string) => {
-  const options = { effect: "gen_background_replace" };
+  const options = {
+    effect:
+      "gen_background_replace:prompt_a bizarre and super creepy background acording with main object theme-max creativity",
+  };
 
   try {
     const result = cloudinary.v2.image(publicId, { ...options });