From ec5b091cde991be8eb3786fc29cde96981a1cb81 Mon Sep 17 00:00:00 2001
From: shiva raj badu <shivabadu5@gmail.com>
Date: Sun, 3 Aug 2025 00:13:02 +0545
Subject: [PATCH] fix(Nextjs): ImageEditor and Tiptap components for improved
 functionality

---
 servers/fastapi/chroma/chroma.sqlite3         | Bin 4329472 -> 4329472 bytes
 .../components/ImageEditor.tsx                | 210 +++++++++++-------
 .../components/TiptapText.tsx                 |   2 +
 .../components/TiptapTextReplacer.tsx         |   2 +
 .../pdf-maker/PdfMakerPage.tsx                | 196 ++++++++--------
 .../presentation/components/SlideContent.tsx  |  19 +-
 6 files changed, 239 insertions(+), 190 deletions(-)

diff --git a/servers/fastapi/chroma/chroma.sqlite3 b/servers/fastapi/chroma/chroma.sqlite3
index 5f337926f6fb73ea274d91e3b2941259bc5ba34a..c35454c7e39142dab91db807cb46c2a859c5b2f7 100644
GIT binary patch
delta 306
zcmWm9HxdB>06<Y|<+ReutekVs%eaVwd+dyYlEP@VP`H3mxP~J*im!MFc-sAB)Nqaq
z$|bQ8l;`%*GRe}-aCPOXFW+}BnMGMN*blmT)KvjSh%mtn3#_og4hNiY!3_^2c;SN|
z0R$l<gfJqAB8E5;NFoIVX=IQ^4tW$%L<wb7P(=-OG|)r~ZFJB@4}A<U#0X<dFvSdW
PEU?7?zIyBGdiVJOjSX-I

delta 300
zcmWm9HxdD10Dw^|=atj4a?Uwh#zhoLhu9efC57%U6fR&CuHgud;#0f>JpFz)>bNM9
zdQEO6^|^br%^_JBZti^L<^LY!qtH%5lVF4iW>{c_4R$!-gbQwX;Drny{0Jb35W<Kc
ziWuTZKtU2Is7ND&EON-BfFepLqk<}GsH1@<T4<w#E_&!=fFVX0V}dDWm}7w@R`}o7
JZ=r4WpC2eQZ{+|0

diff --git a/servers/nextjs/app/(presentation-generator)/components/ImageEditor.tsx b/servers/nextjs/app/(presentation-generator)/components/ImageEditor.tsx
index da85c01a..820cf60c 100644
--- a/servers/nextjs/app/(presentation-generator)/components/ImageEditor.tsx
+++ b/servers/nextjs/app/(presentation-generator)/components/ImageEditor.tsx
@@ -9,10 +9,7 @@ import {
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
-import {
-  Wand2,
-  Upload,
-} from "lucide-react";
+import { Wand2, Upload } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { PresentationGenerationApi } from "../services/api/presentation-generation";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -38,11 +35,12 @@ const ImageEditor = ({
   onClose,
   onFocusPointClick,
   onImageChange,
-
 }: ImageEditorProps) => {
   // State management
   const [previewImages, setPreviewImages] = useState(initialImage);
-  const [previousGeneratedImages, setPreviousGeneratedImages] = useState<PreviousGeneratedImagesResponse[]>([]);
+  const [previousGeneratedImages, setPreviousGeneratedImages] = useState<
+    PreviousGeneratedImagesResponse[]
+  >([]);
   const [prompt, setPrompt] = useState<string>("");
   const [isGenerating, setIsGenerating] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -65,7 +63,7 @@ const ImageEditor = ({
     (properties &&
       properties[imageIdx] &&
       properties[imageIdx].initialObjectFit) ||
-    "cover"
+      "cover"
   );
 
   // Refs
@@ -75,7 +73,6 @@ const ImageEditor = ({
     setPreviewImages(initialImage);
   }, [initialImage]);
 
-
   useEffect(() => {
     if (isOpen && !previousGeneratedImages.length) {
       getPreviousGeneratedImage();
@@ -91,26 +88,25 @@ const ImageEditor = ({
     }, 300); // Match the Sheet animation duration
   };
 
-
   const getPreviousGeneratedImage = async () => {
     try {
-      const response = await PresentationGenerationApi.getPreviousGeneratedImages();
+      const response =
+        await PresentationGenerationApi.getPreviousGeneratedImages();
       setPreviousGeneratedImages(response);
     } catch (error: any) {
       toast.error("Failed to get previous generated images. Please try again.");
       console.error("error in getting previous generated images", error);
-      setError(error.message || "Failed to get previous generated images. Please try again.");
+      setError(
+        error.message ||
+          "Failed to get previous generated images. Please try again."
+      );
     }
-  }
-
-
+  };
 
   /**
    * Handles image selection and calls the parent callback
    */
   const handleImageChange = (newImage: string) => {
-
-
     if (onImageChange) {
       onImageChange(newImage, promptContent);
       setPreviewImages(newImage);
@@ -230,17 +226,17 @@ const ImageEditor = ({
       setUploadError(null);
 
       const formData = new FormData();
-      formData.append('file', file);
+      formData.append("file", file);
 
-      const response = await fetch('/api/upload-image', {
-        method: 'POST',
+      const response = await fetch("/api/upload-image", {
+        method: "POST",
         body: formData,
       });
 
       const result = await response.json();
 
       if (!response.ok) {
-        throw new Error(result.error || 'Upload failed');
+        throw new Error(result.error || "Upload failed");
       }
 
       setUploadedImageUrl(result.filePath);
@@ -254,8 +250,6 @@ const ImageEditor = ({
 
   return (
     <div className="image-editor-container">
-
-
       <Sheet open={isOpen} onOpenChange={() => handleClose()}>
         <SheetContent
           side="right"
@@ -276,7 +270,9 @@ const ImageEditor = ({
                 <TabsTrigger className="font-medium" value="upload">
                   Upload
                 </TabsTrigger>
-                <TabsTrigger className="font-medium" value="edit">Edit</TabsTrigger>
+                <TabsTrigger className="font-medium" value="edit">
+                  Edit
+                </TabsTrigger>
               </TabsList>
               {/* Generate Tab */}
               <TabsContent value="generate" className="mt-4 space-y-4">
@@ -287,7 +283,9 @@ const ImageEditor = ({
                   </div>
 
                   <div>
-                    <h3 className="text-base font-medium mb-2">Image Description</h3>
+                    <h3 className="text-base font-medium mb-2">
+                      Image Description
+                    </h3>
                     <Textarea
                       placeholder="Describe the image you want to generate..."
                       value={prompt}
@@ -308,14 +306,15 @@ const ImageEditor = ({
                   {error && <p className="text-red-500 text-sm">{error}</p>}
 
                   <div className="grid grid-cols-2 gap-4">
-                    {isGenerating || !previewImages
-                      ? Array.from({ length: 4 }).map((_, index) => (
+                    {isGenerating || !previewImages ? (
+                      Array.from({ length: 4 }).map((_, index) => (
                         <Skeleton
                           key={index}
                           className="aspect-[4/3] w-full rounded-lg"
                         />
                       ))
-                      : <div
+                    ) : (
+                      <div
                         onClick={() => handleImageChange(previewImages)}
                         className="aspect-[4/3] w-full overflow-hidden rounded-lg border cursor-pointer hover:border-blue-500 transition-colors"
                       >
@@ -327,15 +326,25 @@ const ImageEditor = ({
                           />
                         )}
                       </div>
-                    }
+                    )}
                   </div>
                   {previousGeneratedImages.length > 0 && (
                     <div className="mt-4">
-                      <h3 className="text-sm font-medium mb-2">Previous Generated Images</h3>
-                      <div className="grid grid-cols-2 gap-4">
+                      <h3 className="text-sm font-medium mb-2">
+                        Previous Generated Images
+                      </h3>
+                      <div className="grid grid-cols-2 gap-4 h-[400px] overflow-y-auto hide-scrollbar">
                         {previousGeneratedImages.map((image) => (
-                          <div onClick={() => handleImageChange(image.path)} key={image.id} className="aspect-[4/3] w-full overflow-hidden rounded-lg border cursor-pointer hover:border-blue-500 transition-colors" >
-                            <img src={image.path} alt={image.extras.prompt} className="w-full h-full object-cover" />
+                          <div
+                            onClick={() => handleImageChange(image.path)}
+                            key={image.id}
+                            className="aspect-[4/3] w-full overflow-hidden rounded-lg border cursor-pointer hover:border-blue-500 transition-colors"
+                          >
+                            <img
+                              src={image.path}
+                              alt={image.extras.prompt}
+                              className="w-full h-full object-cover"
+                            />
                           </div>
                         ))}
                       </div>
@@ -437,56 +446,66 @@ const ImageEditor = ({
               <TabsContent value="edit" className="mt-4 space-y-4">
                 <div className="space-y-4">
                   <h3 className="text-sm font-medium mb-2">Current Image</h3>
-                  <div onClick={(e) => {
-
-                    if (isFocusPointMode) {
-                      handleFocusPointClick(e);
-                    } else {
-
-                    }
-
-                  }}
-
-                    className="aspect-[4/3] group  rounded-lg overflow-hidden relative border border-gray-200">
-                    <p className="group-hover:opacity-100 opacity-0 transition-opacity absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-sm text-center font-medium bg-black/50 text-white px-2 py-1 rounded">Click to Change Focus Point</p>
-                    {previewImages && <img ref={imageRef} onClick={
-                      () => {
-
-                        setIsFocusPointMode(true);
-
+                  <div
+                    onClick={(e) => {
+                      if (isFocusPointMode) {
+                        handleFocusPointClick(e);
+                      } else {
                       }
-                    } src={previewImages} style={{ objectFit: objectFit, objectPosition: `${focusPoint.x}% ${focusPoint.y}%`, }} alt={`Preview`} className="w-full h-full " />}
-                    {isFocusPointMode && <div className="absolute inset-0 bg-black/20 flex items-center justify-center">
-                      <div className="text-white text-center p-2 bg-black/50 rounded">
-                        <p className="text-sm font-medium pointer-events-none">
-                          Click anywhere to set focus point
-                        </p>
-                        <button
-                          className="mt-2 px-3 py-1 bg-blue-500 text-white text-xs rounded hover:bg-blue-600"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            toggleFocusPointMode();
+                    }}
+                    className="aspect-[4/3] group  rounded-lg overflow-hidden relative border border-gray-200"
+                  >
+                    <p className="group-hover:opacity-100 opacity-0 transition-opacity absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-sm text-center font-medium bg-black/50 text-white px-2 py-1 rounded">
+                      Click to Change Focus Point
+                    </p>
+                    {previewImages && (
+                      <img
+                        ref={imageRef}
+                        onClick={() => {
+                          setIsFocusPointMode(true);
+                        }}
+                        src={previewImages}
+                        style={{
+                          objectFit: objectFit,
+                          objectPosition: `${focusPoint.x}% ${focusPoint.y}%`,
+                        }}
+                        alt={`Preview`}
+                        className="w-full h-full "
+                      />
+                    )}
+                    {isFocusPointMode && (
+                      <div className="absolute inset-0 bg-black/20 flex items-center justify-center">
+                        <div className="text-white text-center p-2 bg-black/50 rounded">
+                          <p className="text-sm font-medium pointer-events-none">
+                            Click anywhere to set focus point
+                          </p>
+                          <button
+                            className="mt-2 px-3 py-1 bg-blue-500 text-white text-xs rounded hover:bg-blue-600"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              toggleFocusPointMode();
+                            }}
+                          >
+                            Done
+                          </button>
+                        </div>
+
+                        <div
+                          className="absolute w-8 h-8 border-2 border-white rounded-full transform -translate-x-1/2 -translate-y-1/2 pointer-events-none"
+                          style={{
+                            left: `${focusPoint.x}%`,
+                            top: `${focusPoint.y}%`,
+                            boxShadow: "0 0 0 2px rgba(0,0,0,0.5)",
                           }}
                         >
-                          Done
-                        </button>
-                      </div>
-
-                      <div
-                        className="absolute w-8 h-8 border-2 border-white rounded-full transform -translate-x-1/2 -translate-y-1/2 pointer-events-none"
-                        style={{
-                          left: `${focusPoint.x}%`,
-                          top: `${focusPoint.y}%`,
-                          boxShadow: "0 0 0 2px rgba(0,0,0,0.5)",
-                        }}
-                      >
-                        <div className="absolute inset-0 flex items-center justify-center">
-                          <div className="w-2 h-2 bg-white rounded-full"></div>
+                          <div className="absolute inset-0 flex items-center justify-center">
+                            <div className="w-2 h-2 bg-white rounded-full"></div>
+                          </div>
+                          <div className="absolute w-16 h-0.5 bg-white/70 left-1/2 -translate-x-1/2"></div>
+                          <div className="absolute w-0.5 h-16 bg-white/70 top-1/2 -translate-y-1/2"></div>
                         </div>
-                        <div className="absolute w-16 h-0.5 bg-white/70 left-1/2 -translate-x-1/2"></div>
-                        <div className="absolute w-0.5 h-16 bg-white/70 top-1/2 -translate-y-1/2"></div>
                       </div>
-                    </div>}
+                    )}
                   </div>
                   {/* Edit Image  */}
                   {/* Object Fit */}
@@ -494,17 +513,40 @@ const ImageEditor = ({
                     <div>
                       <h3 className="text-sm font-medium mb-2">Object Fit</h3>
                       <div className="flex gap-4">
-                        <Button variant="outline" className={cn(objectFit === "cover" && "bg-blue-50 border-blue-500")} onClick={() => handleFitChange("cover")}>Cover</Button>
-                        <Button variant="outline" className={cn(objectFit === "contain" && "bg-blue-50 border-blue-500")} onClick={() => handleFitChange("contain")}>Contain</Button>
-                        <Button variant="outline" className={cn(objectFit === "fill" && "bg-blue-50 border-blue-500")} onClick={() => handleFitChange("fill")}>Fill</Button>
+                        <Button
+                          variant="outline"
+                          className={cn(
+                            objectFit === "cover" &&
+                              "bg-blue-50 border-blue-500"
+                          )}
+                          onClick={() => handleFitChange("cover")}
+                        >
+                          Cover
+                        </Button>
+                        <Button
+                          variant="outline"
+                          className={cn(
+                            objectFit === "contain" &&
+                              "bg-blue-50 border-blue-500"
+                          )}
+                          onClick={() => handleFitChange("contain")}
+                        >
+                          Contain
+                        </Button>
+                        <Button
+                          variant="outline"
+                          className={cn(
+                            objectFit === "fill" && "bg-blue-50 border-blue-500"
+                          )}
+                          onClick={() => handleFitChange("fill")}
+                        >
+                          Fill
+                        </Button>
                       </div>
                     </div>
-
                   }
                   {/* Focus Point */}
-                  {
-
-                  }
+                  {}
                 </div>
               </TabsContent>
             </Tabs>
diff --git a/servers/nextjs/app/(presentation-generator)/components/TiptapText.tsx b/servers/nextjs/app/(presentation-generator)/components/TiptapText.tsx
index b8004665..beedd2ec 100644
--- a/servers/nextjs/app/(presentation-generator)/components/TiptapText.tsx
+++ b/servers/nextjs/app/(presentation-generator)/components/TiptapText.tsx
@@ -18,11 +18,13 @@ interface TiptapTextProps {
   onContentChange?: (content: string) => void;
   className?: string;
   placeholder?: string;
+  element?: HTMLElement;
   tag?: "H1" | "H2" | "H3" | "H4" | "H5" | "H6" | "P" | "SPAN" | "DIV" | any;
 }
 
 const TiptapText: React.FC<TiptapTextProps> = ({
   content,
+  element,
   onContentChange,
   className = "",
   placeholder = "Enter text...",
diff --git a/servers/nextjs/app/(presentation-generator)/components/TiptapTextReplacer.tsx b/servers/nextjs/app/(presentation-generator)/components/TiptapTextReplacer.tsx
index 0c16a4a9..5c488601 100644
--- a/servers/nextjs/app/(presentation-generator)/components/TiptapTextReplacer.tsx
+++ b/servers/nextjs/app/(presentation-generator)/components/TiptapTextReplacer.tsx
@@ -76,12 +76,14 @@ const TiptapTextReplacer: React.FC<TiptapTextReplacerProps> = ({
         // Replace the element
         htmlElement.parentNode?.replaceChild(tiptapContainer, htmlElement);
         // Mark as processed
+        htmlElement.innerHTML = "";
         setProcessedElements((prev) => new Set(prev).add(htmlElement));
         // Render TiptapText
         const root = ReactDOM.createRoot(tiptapContainer);
         root.render(
           <TiptapText
             content={trimmedText}
+            element={htmlElement}
             tag={htmlElement.tagName}
             onContentChange={(content: string) => {
               if (dataPath && onContentChange) {
diff --git a/servers/nextjs/app/(presentation-generator)/pdf-maker/PdfMakerPage.tsx b/servers/nextjs/app/(presentation-generator)/pdf-maker/PdfMakerPage.tsx
index f996c597..efd9c450 100644
--- a/servers/nextjs/app/(presentation-generator)/pdf-maker/PdfMakerPage.tsx
+++ b/servers/nextjs/app/(presentation-generator)/pdf-maker/PdfMakerPage.tsx
@@ -4,115 +4,117 @@ import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "@/store/store";
 import { Skeleton } from "@/components/ui/skeleton";
 
-
 import { DashboardApi } from "@/app/dashboard/api/dashboard";
 
-
 import { toast } from "sonner";
 
-
-
 import { Button } from "@/components/ui/button";
 import { AlertCircle } from "lucide-react";
 import { useGroupLayouts } from "../hooks/useGroupLayouts";
 import { setPresentationData } from "@/store/slices/presentationGeneration";
 
-
-
 const PresentationPage = ({ presentation_id }: { presentation_id: string }) => {
-    const { renderSlideContent, loading } = useGroupLayouts();
-    const [contentLoading, setContentLoading] = useState(true);
-    const dispatch = useDispatch();
-    const { presentationData } = useSelector(
-        (state: RootState) => state.presentationGeneration
-    );
-    const [error, setError] = useState(false);
-    // Function to fetch the slides
-    useEffect(() => {
-        fetchUserSlides();
-    }, []);
+  const { renderSlideContent, loading } = useGroupLayouts();
+  const [contentLoading, setContentLoading] = useState(true);
+  const dispatch = useDispatch();
+  const { presentationData } = useSelector(
+    (state: RootState) => state.presentationGeneration
+  );
+  const [error, setError] = useState(false);
+  useEffect(() => {
+    if (presentationData?.slides[0].layout_group.includes("custom")) {
+      const existingScript = document.querySelector(
+        'script[src*="tailwindcss.com"]'
+      );
+      if (!existingScript) {
+        const script = document.createElement("script");
+        script.src = "https://cdn.tailwindcss.com";
+        script.async = true;
+        document.head.appendChild(script);
+      }
+    }
+  }, [presentationData]);
+  // Function to fetch the slides
+  useEffect(() => {
+    fetchUserSlides();
+  }, []);
 
-    // Function to fetch the user slides
-    const fetchUserSlides = async () => {
-        try {
-            const data = await DashboardApi.getPresentation(presentation_id);
-            dispatch(setPresentationData(data));
-            setContentLoading(false);
-        } catch (error) {
-            setError(true);
-            toast.error("Failed to load presentation");
-            console.error("Error fetching user slides:", error);
-            setContentLoading(false);
-        }
-    };
-    // Regular view
-    return (
-        <div className="flex overflow-hidden flex-col">
-            {error ? (
-                <div className="flex flex-col items-center justify-center h-screen bg-gray-100">
-                    <div
-                        className="bg-white border border-red-300 text-red-700 px-6 py-8 rounded-lg shadow-lg flex flex-col items-center"
-                        role="alert"
-                    >
-                        <AlertCircle className="w-16 h-16 mb-4 text-red-500" />
-                        <strong className="font-bold text-4xl mb-2">Oops!</strong>
-                        <p className="block text-2xl py-2">
-                            We encountered an issue loading your presentation.
-                        </p>
-                        <p className="text-lg py-2">
-                            Please check your internet connection or try again later.
-                        </p>
-                        <Button
-                            className="mt-4 bg-red-500 text-white hover:bg-red-600 focus:ring-4 focus:ring-red-300"
-                            onClick={() => window.location.reload()}
-                        >
-                            Retry
-                        </Button>
-                    </div>
-                </div>
-            ) : (
-
-
-                <div className="">
-                    <div
-                        id="presentation-slides-wrapper"
-                        className="mx-auto flex flex-col items-center  overflow-hidden  justify-center   "
-
-                    >
-                        {!presentationData ||
-                            loading ||
-                            contentLoading ||
-                            !presentationData?.slides ||
-                            presentationData?.slides.length === 0 ? (
-                            <div className="relative w-full h-[calc(100vh-120px)] mx-auto ">
-                                <div className=" ">
-                                    {Array.from({ length: 2 }).map((_, index) => (
-                                        <Skeleton
-                                            key={index}
-                                            className="aspect-video bg-gray-400 my-4 w-full mx-auto max-w-[1280px]"
-                                        />
-                                    ))}
-                                </div>
-
-                            </div>
-                        ) : (
-                            <>
-                                {presentationData &&
-                                    presentationData.slides &&
-                                    presentationData.slides.length > 0 &&
-                                    presentationData.slides.map((slide: any, index: number) => (
-                                        <div key={index} className="w-full">
-                                            {renderSlideContent(slide, false)}
-                                        </div>
-                                    ))}
-                            </>
-                        )}
-                    </div>
-                </div>
-
-            )}
+  // Function to fetch the user slides
+  const fetchUserSlides = async () => {
+    try {
+      const data = await DashboardApi.getPresentation(presentation_id);
+      dispatch(setPresentationData(data));
+      setContentLoading(false);
+    } catch (error) {
+      setError(true);
+      toast.error("Failed to load presentation");
+      console.error("Error fetching user slides:", error);
+      setContentLoading(false);
+    }
+  };
+  // Regular view
+  return (
+    <div className="flex overflow-hidden flex-col">
+      {error ? (
+        <div className="flex flex-col items-center justify-center h-screen bg-gray-100">
+          <div
+            className="bg-white border border-red-300 text-red-700 px-6 py-8 rounded-lg shadow-lg flex flex-col items-center"
+            role="alert"
+          >
+            <AlertCircle className="w-16 h-16 mb-4 text-red-500" />
+            <strong className="font-bold text-4xl mb-2">Oops!</strong>
+            <p className="block text-2xl py-2">
+              We encountered an issue loading your presentation.
+            </p>
+            <p className="text-lg py-2">
+              Please check your internet connection or try again later.
+            </p>
+            <Button
+              className="mt-4 bg-red-500 text-white hover:bg-red-600 focus:ring-4 focus:ring-red-300"
+              onClick={() => window.location.reload()}
+            >
+              Retry
+            </Button>
+          </div>
         </div>
-    );
+      ) : (
+        <div className="">
+          <div
+            id="presentation-slides-wrapper"
+            className="mx-auto flex flex-col items-center  overflow-hidden  justify-center   "
+          >
+            {!presentationData ||
+            loading ||
+            contentLoading ||
+            !presentationData?.slides ||
+            presentationData?.slides.length === 0 ? (
+              <div className="relative w-full h-[calc(100vh-120px)] mx-auto ">
+                <div className=" ">
+                  {Array.from({ length: 2 }).map((_, index) => (
+                    <Skeleton
+                      key={index}
+                      className="aspect-video bg-gray-400 my-4 w-full mx-auto max-w-[1280px]"
+                    />
+                  ))}
+                </div>
+              </div>
+            ) : (
+              <>
+                {presentationData &&
+                  presentationData.slides &&
+                  presentationData.slides.length > 0 &&
+                  presentationData.slides.map((slide: any, index: number) => (
+                    <div key={index} className="w-full">
+                      {renderSlideContent(slide, false)}
+                    </div>
+                  ))}
+              </>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
 };
 
 export default PresentationPage;
diff --git a/servers/nextjs/app/(presentation-generator)/presentation/components/SlideContent.tsx b/servers/nextjs/app/(presentation-generator)/presentation/components/SlideContent.tsx
index 32545d64..6fb374f8 100644
--- a/servers/nextjs/app/(presentation-generator)/presentation/components/SlideContent.tsx
+++ b/servers/nextjs/app/(presentation-generator)/presentation/components/SlideContent.tsx
@@ -107,15 +107,16 @@ const SlideContent = ({ slide, index, presentationId }: SlideContentProps) => {
     if (isStreaming || loading) {
       return;
     }
-
-    const existingScript = document.querySelector(
-      'script[src*="tailwindcss.com"]'
-    );
-    if (!existingScript) {
-      const script = document.createElement("script");
-      script.src = "https://cdn.tailwindcss.com";
-      script.async = true;
-      document.head.appendChild(script);
+    if (slide.layout_group.includes("custom")) {
+      const existingScript = document.querySelector(
+        'script[src*="tailwindcss.com"]'
+      );
+      if (!existingScript) {
+        const script = document.createElement("script");
+        script.src = "https://cdn.tailwindcss.com";
+        script.async = true;
+        document.head.appendChild(script);
+      }
     }
   }, [slide, isStreaming, loading]);