diff --git a/servers/fastapi/api/v1/ppt/endpoints/prompts.py b/servers/fastapi/api/v1/ppt/endpoints/prompts.py index 500a3e44..8cdb64c6 100644 --- a/servers/fastapi/api/v1/ppt/endpoints/prompts.py +++ b/servers/fastapi/api/v1/ppt/endpoints/prompts.py @@ -59,6 +59,7 @@ Convert given static HTML and Tailwind slide to a TSX React component so that it - Use an attribute in the schema to select between chart types. - All data should be properly represented in schema. 18. For diagrams use mermaid with appropriate placeholder which can render any daigram. Schema should have a field for code. Render in the placeholder properly. +19. Don't add style attribute in the schema. Colors, font sizes, and all other style attributes should be added directly as tailwind classes. For example: Input:

Effects of Global Warming

global warming effects on earth

Global warming triggers a cascade of effects on our planet. These changes impact everything from our oceans to our ecosystems.

sea level rising icon

Rising Sea Levels

Rising sea levels threaten coastal communities and ecosystems due to melting glaciers and thermal expansion.

heatwave icon

Intense Heatwaves

Heatwaves are becoming more frequent and intense, posing significant risks to human health and agriculture.

precipitation changes icon

Changes in Precipitation

Altered precipitation patterns lead to increased droughts in some regions and severe flooding in others, affecting water resources.

diff --git a/servers/nextjs/app/(presentation-generator)/custom-template/components/SaveLayoutButton.tsx b/servers/nextjs/app/(presentation-generator)/custom-template/components/SaveLayoutButton.tsx index 6badcf5b..8ef67376 100644 --- a/servers/nextjs/app/(presentation-generator)/custom-template/components/SaveLayoutButton.tsx +++ b/servers/nextjs/app/(presentation-generator)/custom-template/components/SaveLayoutButton.tsx @@ -30,7 +30,7 @@ export const SaveLayoutButton: React.FC = ({ ) : ( <> - Save Template + Save as Template )} diff --git a/servers/nextjs/app/(presentation-generator)/custom-template/components/SaveLayoutModal.tsx b/servers/nextjs/app/(presentation-generator)/custom-template/components/SaveLayoutModal.tsx index 40fa3a89..ad87a1cd 100644 --- a/servers/nextjs/app/(presentation-generator)/custom-template/components/SaveLayoutModal.tsx +++ b/servers/nextjs/app/(presentation-generator)/custom-template/components/SaveLayoutModal.tsx @@ -12,11 +12,12 @@ import { DialogTitle, } from "@/components/ui/dialog"; import { Loader2, Save } from "lucide-react"; +import { useRouter } from "next/navigation"; interface SaveLayoutModalProps { isOpen: boolean; onClose: () => void; - onSave: (layoutName: string, description: string) => void; + onSave: (layoutName: string, description: string) => Promise; isSaving: boolean; } @@ -26,15 +27,20 @@ export const SaveLayoutModal: React.FC = ({ onSave, isSaving, }) => { + const router = useRouter(); const [layoutName, setLayoutName] = useState(""); const [description, setDescription] = useState(""); - const handleSave = () => { + const handleSave = async () => { if (!layoutName.trim()) { return; // Don't save if name is empty } - onSave(layoutName.trim(), description.trim()); - // Reset form + const id = await onSave(layoutName.trim(), description.trim()); + if (id) { + // Redirect to the new template preview page + router.push(`/template-preview/custom-${id}`); + } + // Reset form after navigation decision setLayoutName(""); setDescription(""); }; diff --git a/servers/nextjs/app/(presentation-generator)/custom-template/hooks/useLayoutSaving.ts b/servers/nextjs/app/(presentation-generator)/custom-template/hooks/useLayoutSaving.ts index 14d8bd06..f1667288 100644 --- a/servers/nextjs/app/(presentation-generator)/custom-template/hooks/useLayoutSaving.ts +++ b/servers/nextjs/app/(presentation-generator)/custom-template/hooks/useLayoutSaving.ts @@ -78,10 +78,10 @@ export const useLayoutSaving = ( } }; - const saveLayout = useCallback(async (layoutName: string, description: string) => { + const saveLayout = useCallback(async (layoutName: string, description: string): Promise => { if (!slides.length) { toast.error("No slides to save"); - return; + return null; } setIsSavingLayout(true); @@ -133,7 +133,7 @@ export const useLayoutSaving = ( if (reactComponents.length === 0) { toast.error("No slides were successfully converted"); - return; + return null; } console.log(reactComponents); @@ -165,7 +165,7 @@ export const useLayoutSaving = ( if (!data.success) { toast.error("Failed to save layout components"); - return; + return null; } toast.success("Layout saved successfully"); @@ -178,6 +178,7 @@ export const useLayoutSaving = ( toast.success(`Layout "${layoutName}" saved successfully`); refetch(); closeSaveModal(); + return presentationId; } catch (error) { console.error("Error saving layout:", error); toast.error("Failed to save layout", { @@ -186,6 +187,7 @@ export const useLayoutSaving = ( ? error.message : "An unexpected error occurred", }); + return null; } finally { setIsSavingLayout(false); } diff --git a/servers/nextjs/app/(presentation-generator)/custom-template/page.tsx b/servers/nextjs/app/(presentation-generator)/custom-template/page.tsx index de9a32f1..f4e5e068 100644 --- a/servers/nextjs/app/(presentation-generator)/custom-template/page.tsx +++ b/servers/nextjs/app/(presentation-generator)/custom-template/page.tsx @@ -16,9 +16,11 @@ import { SaveLayoutModal } from "./components/SaveLayoutModal"; import EachSlide from "./components/EachSlide/NewEachSlide"; import { APIKeyWarning } from "./components/APIKeyWarning"; import { useAPIKeyCheck } from "./hooks/useAPIKeyCheck"; +import { useRouter } from "next/navigation"; const CustomTemplatePage = () => { + const router = useRouter(); const { refetch } = useLayout(); // Custom hooks for different concerns @@ -40,6 +42,14 @@ const CustomTemplatePage = () => { setSlides ); + const handleSaveTemplate = async (layoutName: string, description: string): Promise => { + const id = await saveLayout(layoutName, description); + if (id) { + router.push(`/template-preview/custom-${id}`); + } + return id; + }; + const handleProcessSlideToHtml = (slide: any) => { processSlideToHtml(slide,0) } @@ -146,7 +156,7 @@ const CustomTemplatePage = () => {