Updated prompt and added queue system

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 && (
+          {spookyImageSource &&
-            <img
+            (generateSpookyImage.data
-              className="h-36 w-36 cursor-pointer rounded"
+              ? lastSpookyImageLoaded >= place ||
-              style={{
+                lastSpookyImageLoaded + 1 === place
-                display:
+              : true) && (
-                  showSpookyImage && spookyImageLoaded ? "block" : "none",
+              <img
-              }}
+                className="h-36 w-36 cursor-pointer rounded"
-              src={spookyImageSource}
+                style={{
-              alt={album.name}
+                  display:
-              onLoad={() => {
+                    showSpookyImage && spookyImageLoaded ? "block" : "none",
-                if (!spookyImageLoaded) {
+                }}
-                  setSpookyImageLoaded(true);
+                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 ? (
+                {(() => {
-                  <>
+                  if (generateSpookyImage.data) {
-                    <l-quantum
+                    if (lastSpookyImageLoaded < place - 1) {
-                      size="100"
+                      return (
-                      speed="1.75"
+                        <>
-                      color="white"
+                          <l-pulsar
-                    ></l-quantum>
+                            size="100"
-                    <p className="text-center">Generating...</p>
+                            speed="1.75"
-                  </>
+                            color="white"
-                ) : (
+                          ></l-pulsar>{" "}
-                  <>
+                          <p className="text-center">On queue...</p>
-                    <l-ring-2 size="100" speed="1.75" color="white"></l-ring-2>
+                        </>
-                    <p className="text-center">Getting image...</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>

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 && (
+        {spookyImageSource &&
-          <img
+          (generateSpookyImage.data
-            style={{
+            ? lastSpookyImageLoaded >= place ||
-              display: showSpookyImage && spookyImageLoaded ? "block" : "none",
+              lastSpookyImageLoaded + 1 === place
-            }}
+            : true) && (
-            className="h-56 w-56 object-fill"
+            <img
-            onLoad={() => {
+              style={{
-              if (!spookyImageLoaded) {
+                display:
-                setSpookyImageLoaded(true);
+                  showSpookyImage && spookyImageLoaded ? "block" : "none",
-              }
+              }}
-            }}
+              className="h-56 w-56 object-fill"
-            src={spookyImageSource}
+              onLoad={onImageLoad}
-            alt={name}
+              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>
         )}

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(
+        .map((album, index) => (
-          (album, index) =>
+          <AlbumShowcase
-            !index && <AlbumShowcase spookify={spookify} {...album} />,
+            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>

src/app/_components/spotify-data.tsx

@@ -1,8 +1,6 @@
 import SpotifyWebApi from "spotify-web-api-node";
 import Showcase from "./showcase";
-
+import { FETCH_ARTISTS_LIMIT, FETCH_TRACKS_LIMIT } from "../utils/contants";
-const TRACKS_LIMIT = 20;
-const ARTISTS_LIMIT = 21;
 
 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: [],

src/app/utils/contants.ts

@@ -0,0 +1,2 @@
+export const FETCH_TRACKS_LIMIT = 20;
+export const FETCH_ARTISTS_LIMIT = 21;

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 });