+
{children}
{/* Render ImageEditor when an image is being edited */}
@@ -385,5 +468,4 @@ const EditableLayoutWrapper: React.FC = ({
);
};
-export default EditableLayoutWrapper;
-
+export default EditableLayoutWrapper;
\ No newline at end of file
diff --git a/servers/nextjs/app/(presentation-generator)/components/IconsEditor.tsx b/servers/nextjs/app/(presentation-generator)/components/IconsEditor.tsx
index 09cbae06..ffe94f48 100644
--- a/servers/nextjs/app/(presentation-generator)/components/IconsEditor.tsx
+++ b/servers/nextjs/app/(presentation-generator)/components/IconsEditor.tsx
@@ -70,6 +70,7 @@ const IconsEditor = ({
if (onIconChange) {
onIconChange(newIcon, searchQuery || icon_prompt?.[0] || '');
}
+ handleClose();
};
// Handle close with animation
@@ -80,6 +81,7 @@ const IconsEditor = ({
onClose?.();
}, 300); // Match the Sheet animation duration
};
+
return (
@@ -145,7 +147,7 @@ const IconsEditor = ({
className="w-12 h-12 cursor-pointer group relative rounded-lg overflow-hidden hover:bg-gray-100 p-2 transition-colors"
>
})
diff --git a/servers/nextjs/app/(presentation-generator)/context/LayoutContext.tsx b/servers/nextjs/app/(presentation-generator)/context/LayoutContext.tsx
index 6de138e1..accbe69f 100644
--- a/servers/nextjs/app/(presentation-generator)/context/LayoutContext.tsx
+++ b/servers/nextjs/app/(presentation-generator)/context/LayoutContext.tsx
@@ -105,7 +105,8 @@ const compileCustomLayout = (layoutCode: string, React: any, z: any) => {
`
const z = _z;
// Expose commonly used Recharts components to compiled layouts
- const { ResponsiveContainer, LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, PieChart, Pie, Cell, AreaChart, Area, RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis } = Recharts || {};
+ const { ResponsiveContainer, LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, PieChart, Pie, Cell, AreaChart, Area, RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis, ComposedChart, ScatterChart, Scatter, FunnelChart, Funnel, TreemapChart, Treemap, SankeyChart, Sankey, RadialBarChart, RadialBar, ReferenceLine, ReferenceDot, ReferenceArea, Brush, ErrorBar, LabelList, Label } = Recharts || {};
+
${compiled}
/* everything declared in the string is in scope here */
@@ -127,7 +128,7 @@ export const LayoutProvider: React.FC<{
children: ReactNode;
}> = ({ children }) => {
const [layoutData, setLayoutData] = useState(null);
- const [loading, setLoading] = useState(false);
+ const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [isPreloading, setIsPreloading] = useState(false);
const [customTemplateFonts, setCustomTemplateFonts] = useState>(new Map());
@@ -273,7 +274,7 @@ export const LayoutProvider: React.FC<{
setError(null);
dispatch(setLayoutLoading(true));
- const layoutResponse = await fetch("/api/layouts");
+ const layoutResponse = await fetch("/api/templates");
if (!layoutResponse.ok) {
throw new Error(
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 37767dd1..a1529edb 100644
--- a/servers/nextjs/app/(presentation-generator)/custom-template/hooks/useLayoutSaving.ts
+++ b/servers/nextjs/app/(presentation-generator)/custom-template/hooks/useLayoutSaving.ts
@@ -135,7 +135,6 @@ export const useLayoutSaving = (
toast.error("No slides were successfully converted");
return null;
}
- console.log(reactComponents);
// First create/update the template metadata
await fetch("/api/v1/ppt/template-management/templates", {
diff --git a/servers/nextjs/app/(presentation-generator)/dashboard/loading.tsx b/servers/nextjs/app/(presentation-generator)/dashboard/loading.tsx
index 1ba9be0f..d3350f27 100644
--- a/servers/nextjs/app/(presentation-generator)/dashboard/loading.tsx
+++ b/servers/nextjs/app/(presentation-generator)/dashboard/loading.tsx
@@ -1,16 +1,29 @@
import { Skeleton } from '@/components/ui/skeleton'
import React from 'react'
+import Header from './components/Header'
+import Wrapper from '@/components/Wrapper'
const loading = () => {
return (
-
- = ({
- selectedLayoutGroup,
- onSelectLayoutGroup
+ selectedLayoutGroup,
+ onSelectLayoutGroup,
}) => {
- const {
- getLayoutsByGroup,
- getGroupSetting,
- getAllGroups,
- getFullDataByGroup,
- loading
- } = useLayout();
+ const {
+ getLayoutsByGroup,
+ getGroupSetting,
+ getAllGroups,
+ getFullDataByGroup,
+ loading,
+ } = useLayout();
- const [summaryMap, setSummaryMap] = React.useState>({});
+ const [summaryMap, setSummaryMap] = React.useState<
+ Record<
+ string,
+ { lastUpdatedAt?: number; name?: string; description?: string }
+ >
+ >({});
- useEffect(() => {
- // Fetch custom templates summary to get last_updated_at and template meta for sorting and display
- fetch("/api/v1/ppt/template-management/summary")
- .then(res => res.json())
- .then(data => {
- const map: Record = {};
- if (data && Array.isArray(data.presentations)) {
- for (const p of data.presentations) {
- const slug = `custom-${p.presentation_id}`;
- map[slug] = {
- lastUpdatedAt: p.last_updated_at ? new Date(p.last_updated_at).getTime() : 0,
- name: p.template?.name,
- description: p.template?.description,
- };
- }
- }
- setSummaryMap(map);
- })
- .catch(() => setSummaryMap({}));
- }, []);
-
- const layoutGroups: LayoutGroup[] = React.useMemo(() => {
- const groups = getAllGroups();
- if (groups.length === 0) return [];
-
- const Groups: LayoutGroup[] = groups
- .filter(groupName => {
- // Filter out groups that contain any errored layouts (from custom templates compile/parse errors)
- const fullData = getFullDataByGroup(groupName);
- const hasErroredLayouts = fullData.some(fd => (fd as any)?.component?.displayName === "CustomTemplateErrorSlide");
- return !hasErroredLayouts;
- })
- .map(groupName => {
- const settings = getGroupSetting(groupName);
- const customMeta = summaryMap[groupName];
- const isCustom = groupName.toLowerCase().startsWith("custom-");
- return {
- id: groupName,
- name: isCustom && customMeta?.name ? customMeta.name : groupName,
- description: (isCustom && customMeta?.description) ? customMeta.description : (settings?.description || `${groupName} presentation templates`),
- ordered: settings?.ordered || false,
- default: settings?.default || false,
+ useEffect(() => {
+ // Fetch custom templates summary to get last_updated_at and template meta for sorting and display
+ fetch("/api/v1/ppt/template-management/summary")
+ .then((res) => res.json())
+ .then((data) => {
+ const map: Record<
+ string,
+ { lastUpdatedAt?: number; name?: string; description?: string }
+ > = {};
+ if (data && Array.isArray(data.presentations)) {
+ for (const p of data.presentations) {
+ const slug = `custom-${p.presentation_id}`;
+ map[slug] = {
+ lastUpdatedAt: p.last_updated_at
+ ? new Date(p.last_updated_at).getTime()
+ : 0,
+ name: p.template?.name,
+ description: p.template?.description,
};
- });
-
- // Sort groups to put default first, then by name
- return Groups.sort((a, b) => {
- if (a.default && !b.default) return -1;
- if (!a.default && b.default) return 1;
- return a.name.localeCompare(b.name);
- });
- }, [getAllGroups, getLayoutsByGroup, getGroupSetting, getFullDataByGroup, summaryMap]);
-
- const inBuiltGroups = React.useMemo(
- () => layoutGroups.filter(g => !g.id.toLowerCase().startsWith("custom-")),
- [layoutGroups]
- );
- const customGroups = React.useMemo(() => {
- const unsorted = layoutGroups.filter(g => g.id.toLowerCase().startsWith("custom-"));
- // Sort by last_updated_at desc using summaryMap keyed by slug id
- return unsorted.sort((a, b) => (summaryMap[b.id]?.lastUpdatedAt || 0) - (summaryMap[a.id]?.lastUpdatedAt || 0));
- }, [layoutGroups, summaryMap]);
-
- // Auto-select first group when groups are loaded
- useEffect(() => {
- if (layoutGroups.length > 0 && !selectedLayoutGroup) {
- const defaultGroup = layoutGroups.find(g => g.default) || layoutGroups[0];
- const slides = getLayoutsByGroup(defaultGroup.id);
-
- onSelectLayoutGroup({
- ...defaultGroup,
- slides: slides,
- });
+ }
}
- }, [layoutGroups, selectedLayoutGroup, onSelectLayoutGroup]);
- useEffect(() => {
+ setSummaryMap(map);
+ })
+ .catch(() => setSummaryMap({}));
+ }, []);
+
+ const layoutGroups: LayoutGroup[] = React.useMemo(() => {
+ const groups = getAllGroups();
+
+
+ if (groups.length === 0) return [];
+
+ const Groups: LayoutGroup[] = groups
+ .filter((groupName) => {
+ // Filter out groups that contain any errored layouts (from custom templates compile/parse errors)
+ const fullData = getFullDataByGroup(groupName);
+ const hasErroredLayouts = fullData.some(
+ (fd) =>
+ (fd as any)?.component?.displayName === "CustomTemplateErrorSlide"
+ );
+ return !hasErroredLayouts;
+ })
+ .map((groupName) => {
+ const settings = getGroupSetting(groupName);
+ const customMeta = summaryMap[groupName];
+ const isCustom = groupName.toLowerCase().startsWith("custom-");
+ return {
+ id: groupName,
+ name: isCustom && customMeta?.name ? customMeta.name : groupName,
+ description:
+ isCustom && customMeta?.description
+ ? customMeta.description
+ : settings?.description || `${groupName} presentation templates`,
+ ordered: settings?.ordered || false,
+ default: settings?.default || false,
+ };
+ });
+
+ // Sort groups to put default first, then by name
+ return Groups.sort((a, b) => {
+ if (a.default && !b.default) return -1;
+ if (!a.default && b.default) return 1;
+ return a.name.localeCompare(b.name);
+ });
+ }, [
+ getAllGroups,
+ getLayoutsByGroup,
+ getGroupSetting,
+ getFullDataByGroup,
+ summaryMap,
+ ]);
+
+ const inBuiltGroups = React.useMemo(
+ () => layoutGroups.filter((g) => !g.id.toLowerCase().startsWith("custom-")),
+ [layoutGroups]
+ );
+ const customGroups = React.useMemo(() => {
+ const unsorted = layoutGroups.filter((g) =>
+ g.id.toLowerCase().startsWith("custom-")
+ );
+ // Sort by last_updated_at desc using summaryMap keyed by slug id
+ return unsorted.sort(
+ (a, b) =>
+ (summaryMap[b.id]?.lastUpdatedAt || 0) -
+ (summaryMap[a.id]?.lastUpdatedAt || 0)
+ );
+ }, [layoutGroups, summaryMap]);
+
+ // Auto-select first group when groups are loaded
+ useEffect(() => {
+ if (layoutGroups.length > 0 && !selectedLayoutGroup) {
+ const defaultGroup =
+ layoutGroups.find((g) => g.default) || layoutGroups[0];
+ const slides = getLayoutsByGroup(defaultGroup.id);
+
+ onSelectLayoutGroup({
+ ...defaultGroup,
+ slides: slides,
+ });
+ }
+ }, [layoutGroups, selectedLayoutGroup, onSelectLayoutGroup]);
+ useEffect(() => {
if (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 (loading) {
- return (
- (null);
const lastSavedDataRef = useRef('');
const [isSaving, setIsSaving] = useState(false);
+
// Debounced save function
const debouncedSave = useCallback(async (data: any) => {
@@ -64,27 +66,24 @@ export const useAutoSave = ({
// Effect to trigger auto-save when presentation data changes
useEffect(() => {
- if (!enabled || !presentationData || isStreaming || isLoading || isLayoutLoading) return;
-
- // Trigger debounced save
- debouncedSave(presentationData);
-
+ if (!enabled || !presentationData || isStreaming || isLoading || isLayoutLoading ) return;
+
dispatch(addToHistory({
slides: presentationData.slides,
actionType: "AUTO_SAVE"
}));
-
+ // Trigger debounced save
+ debouncedSave(presentationData);
+
// Cleanup timeout on unmount
return () => {
if (saveTimeoutRef.current) {
clearTimeout(saveTimeoutRef.current);
}
};
- }, [presentationData, enabled, debouncedSave]);
+ }, [presentationData, enabled, debouncedSave,isLoading, isStreaming, isLayoutLoading]);
return {
isSaving,
};
-};
-
-
+};
\ No newline at end of file
diff --git a/servers/nextjs/app/(presentation-generator)/presentation/hooks/usePresentationData.ts b/servers/nextjs/app/(presentation-generator)/presentation/hooks/usePresentationData.ts
index cb2a6e15..336dbd70 100644
--- a/servers/nextjs/app/(presentation-generator)/presentation/hooks/usePresentationData.ts
+++ b/servers/nextjs/app/(presentation-generator)/presentation/hooks/usePresentationData.ts
@@ -3,7 +3,7 @@ import { useDispatch } from "react-redux";
import { toast } from "sonner";
import { setPresentationData } from "@/store/slices/presentationGeneration";
import { DashboardApi } from '../../services/api/dashboard';
-import { addToHistory, clearHistory } from "@/store/slices/undoRedoSlice";
+import { clearHistory } from "@/store/slices/undoRedoSlice";
export const usePresentationData = (
@@ -19,10 +19,6 @@ export const usePresentationData = (
if (data) {
dispatch(setPresentationData(data));
dispatch(clearHistory());
- dispatch(addToHistory({
- slides: data.slides,
- actionType: "initial_load"
- }));
setLoading(false);
}
} catch (error) {
diff --git a/servers/nextjs/app/(presentation-generator)/template-preview/components/LoadingStates.tsx b/servers/nextjs/app/(presentation-generator)/template-preview/components/LoadingStates.tsx
index 21b849b3..4c70367a 100644
--- a/servers/nextjs/app/(presentation-generator)/template-preview/components/LoadingStates.tsx
+++ b/servers/nextjs/app/(presentation-generator)/template-preview/components/LoadingStates.tsx
@@ -86,10 +86,10 @@ const LoadingStates: React.FC = ({ type, message }) => {
diff --git a/servers/nextjs/app/(presentation-generator)/template-preview/hooks/useGroupLayoutLoader.ts b/servers/nextjs/app/(presentation-generator)/template-preview/hooks/useGroupLayoutLoader.ts
deleted file mode 100644
index 9c1836b8..00000000
--- a/servers/nextjs/app/(presentation-generator)/template-preview/hooks/useGroupLayoutLoader.ts
+++ /dev/null
@@ -1,362 +0,0 @@
-"use client";
-import React, { useState, useEffect, useRef } from "react";
-import * as Babel from "@babel/standalone";
-import * as z from "zod";
-
-import {
- LayoutInfo,
- LayoutGroup,
- GroupedLayoutsResponse,
- GroupSetting,
-} from "../types";
-import { toast } from "sonner";
-
-interface UseGroupLayoutLoaderReturn {
- layoutGroup: LayoutGroup | null;
- loading: boolean;
- error: string | null;
- retry: () => void;
-}
-
-// Global cache to store layout groups and avoid re-fetching
-const layoutGroupCache = new Map();
-const loadingGroupsCache = new Set();
-
-// Extract Babel compilation logic into a utility function
-const compileCustomLayout = (layoutCode: string, React: any, z: any) => {
- const cleanCode = layoutCode
- .replace(/import\s+React\s+from\s+'react';?/g, "")
- .replace(/import\s*{\s*z\s*}\s*from\s+'zod';?/g, "");
-
- const compiled = Babel.transform(cleanCode, {
- presets: [
- ["react", { runtime: "classic" }],
- ["typescript", { isTSX: true, allExtensions: true }],
- ],
- sourceType: "script",
- }).code;
-
- const factory = new Function(
- "React",
- "z",
- `
- ${compiled}
-
- /* everything declared in the string is in scope here */
- return {
- __esModule: true,
- default: dynamicSlideLayout,
- layoutName,
- layoutId,
- layoutDescription,
- Schema
- };
- `
- );
-
- return factory(React, z);
-};
-
-export const useGroupLayoutLoader = (
- groupSlug: string
-): UseGroupLayoutLoaderReturn => {
- const [layoutGroup, setLayoutGroup] = useState(null);
- const [loading, setLoading] = useState(true);
- const [error, setError] = useState(null);
- const hasMountedRef = useRef(false);
-
- const loadCustomLayouts = async () => {
- try {
- // Check if this is a custom group (starts with 'custom-')
- if (!groupSlug.startsWith("custom-")) {
- return null;
- }
-
- const presentationId = groupSlug.replace("custom-", "");
-
- const customLayoutResponse = await fetch(
- `/api/v1/ppt/template-management/get-templates/${presentationId}`
- );
-
- if (!customLayoutResponse.ok) {
- throw new Error(
- `Failed to fetch custom layouts: ${customLayoutResponse.statusText}`
- );
- }
-
- const customLayoutsData = await customLayoutResponse.json();
- const allLayouts = customLayoutsData.layouts;
- const templateMeta = customLayoutsData.template;
-
- const groupLayouts: LayoutInfo[] = [];
- const settings: GroupSetting = {
- description: templateMeta?.description || `Custom presentation layouts`,
- ordered: false,
- default: false,
- };
-
- for (const layoutData of allLayouts) {
- try {
- // Compile custom layout code
- const module = compileCustomLayout(layoutData.layout_code, React, z);
-
- if (!module.default) {
- toast.error(`Custom Layout has no default export`, {
- description:
- "Please ensure the layout file exports a default component",
- });
- console.warn(`❌ Custom Layout has no default export`);
- continue;
- }
-
- if (!module.Schema) {
- toast.error(`Custom Layout has no Schema export`, {
- description: "Please ensure the layout file exports a Schema",
- });
- console.warn(`❌ Custom Layout has no Schema export`);
- continue;
- }
-
- // Use empty object to let schema apply its default values
- const sampleData = module.Schema.parse({});
-
- const originalLayoutId =
- module.layoutId ||
- layoutData.layout_name.toLowerCase().replace(/layout$/, "");
- const layoutName =
- module.layoutName ||
- layoutData.layout_name.replace(/([A-Z])/g, " $1").trim();
-
- const layoutInfo: LayoutInfo = {
- name: layoutName,
- component: module.default,
- schema: module.Schema,
- sampleData,
- fileName: layoutData.layout_name,
- groupName: groupSlug,
- layoutId: originalLayoutId,
- };
-
- groupLayouts.push(layoutInfo);
- } catch (compilationError) {
- console.error(
- `Failed to compile custom layout ${layoutData.layout_name}:`,
- compilationError
- );
- toast.error(`Failed to compile ${layoutData.layout_name}`, {
- description: "There was an error compiling the custom layout code",
- });
- }
- }
-
- if (groupLayouts.length === 0) {
- throw new Error(
- `No valid custom layouts found in "${groupSlug}" group.`
- );
- }
-
- return {
- groupName: groupSlug,
- layouts: groupLayouts,
- settings,
- };
- } catch (error) {
- console.error("Error loading custom layouts:", error);
- throw error;
- }
- };
-
- const loadGroupLayouts = async () => {
- // Check cache first
- if (layoutGroupCache.has(groupSlug)) {
- setLayoutGroup(layoutGroupCache.get(groupSlug)!);
- setLoading(false);
- setError(null);
- return;
- }
-
- // Prevent multiple simultaneous requests for the same group
- if (loadingGroupsCache.has(groupSlug)) {
- return;
- }
-
- try {
- setLoading(true);
- setError(null);
- loadingGroupsCache.add(groupSlug);
-
- // Check if this is a custom group
- if (groupSlug.startsWith("custom-")) {
- const customGroup = await loadCustomLayouts();
- if (customGroup) {
- // Cache the result
- layoutGroupCache.set(groupSlug, customGroup);
- setLayoutGroup(customGroup);
- setError(null);
- return;
- }
- }
-
- // Load standard layouts
- const response = await fetch("/api/layouts");
- if (!response.ok) {
- toast.error("Error loading layouts", {
- description: response.statusText,
- });
- return;
- }
- const groupedLayoutsData: GroupedLayoutsResponse[] =
- await response.json();
-
- // Find the specific group by slug
- const targetGroupData = groupedLayoutsData.find(
- (group) => group.groupName.toLowerCase() === groupSlug.toLowerCase()
- );
-
- if (!targetGroupData) {
- setError(`Group "${groupSlug}" not found`);
- return;
- }
-
- const groupLayouts: LayoutInfo[] = [];
-
- // Use settings from settings.json or provide defaults
- const groupSettings: GroupSetting = targetGroupData.settings
- ? targetGroupData.settings
- : {
- description: `${targetGroupData.groupName} presentation layouts`,
- ordered: false,
- default: false,
- };
-
- for (const fileName of targetGroupData.files) {
- try {
- const layoutName = fileName.replace(".tsx", "").replace(".ts", "");
- const module = await import(
- `@/presentation-templates/${targetGroupData.groupName}/${layoutName}`
- );
-
- if (!module.default) {
- toast.error(`${layoutName} has no default export`, {
- description:
- "Please ensure the layout file exports a default component",
- });
-
- console.warn(`${layoutName} has no default export`);
- return;
- }
-
- if (!module.Schema) {
- toast.error(`${layoutName} is missing required Schema export`, {
- description: "Please ensure the layout file exports a Schema",
- });
- console.error(`${layoutName} is missing required Schema export`);
- return;
- }
-
- // Use empty object to let schema apply its default values
- const sampleData = module.Schema.parse({});
- const layoutId =
- module.layoutId || layoutName.toLowerCase().replace(/layout$/, "");
-
- const layoutInfo: LayoutInfo = {
- name: layoutName,
- component: module.default,
- schema: module.Schema,
- sampleData,
- fileName,
- groupName: targetGroupData.groupName,
- layoutId,
- };
-
- groupLayouts.push(layoutInfo);
- } catch (importError) {
- console.error(
- `Failed to import ${fileName} from ${targetGroupData.groupName}:`,
- importError
- );
-
- // Try alternative import path
- try {
- const layoutName = fileName.replace(".tsx", "").replace(".ts", "");
- const module = await import(
- `@/presentation-templates/${targetGroupData.groupName}/${layoutName}`
- );
-
- if (module.default && module.Schema) {
- const sampleData = module.Schema.parse({});
- // if layoutId is not provided, use the layoutName
- const layoutId =
- module.layoutId ||
- layoutName.toLowerCase().replace(/layout$/, "");
- const layoutInfo: LayoutInfo = {
- name: layoutName,
- component: module.default,
- schema: module.Schema,
- sampleData,
- fileName,
- groupName: targetGroupData.groupName,
- layoutId,
- };
- groupLayouts.push(layoutInfo);
- } else {
- console.error(
- `${layoutName} is missing required exports (default component or Schema)`
- );
- }
- } catch (altError) {
- console.error(
- `Alternative import also failed for ${fileName} from ${targetGroupData.groupName}:`,
- altError
- );
- }
- }
- }
-
- if (groupLayouts.length === 0) {
- toast.error("No valid layouts found", {
- description: `No valid layouts found in "${groupSlug}" group.`,
- });
- setError(`No valid layouts found in "${groupSlug}" group.`);
- } else {
- const group: LayoutGroup = {
- groupName: targetGroupData.groupName,
- layouts: groupLayouts,
- settings: groupSettings,
- };
-
- // Cache the result
- layoutGroupCache.set(groupSlug, group);
- setLayoutGroup(group);
- setError(null);
- }
- } catch (error) {
- console.error("Error loading group layouts:", error);
- setError(
- error instanceof Error ? error.message : "Failed to load group layouts"
- );
- } finally {
- setLoading(false);
- loadingGroupsCache.delete(groupSlug);
- }
- };
-
- const retry = () => {
- hasMountedRef.current = false;
- loadGroupLayouts();
- };
-
- useEffect(() => {
- if (groupSlug && !hasMountedRef.current) {
- hasMountedRef.current = true;
- loadGroupLayouts();
- }
- }, [groupSlug]);
-
- return {
- layoutGroup,
- loading,
- error,
- retry,
- };
-};
diff --git a/servers/nextjs/app/api/export-as-pdf/route.ts b/servers/nextjs/app/api/export-as-pdf/route.ts
index 836f633d..99111a4b 100644
--- a/servers/nextjs/app/api/export-as-pdf/route.ts
+++ b/servers/nextjs/app/api/export-as-pdf/route.ts
@@ -1,31 +1,45 @@
-import path from 'path';
-import fs from 'fs';
-import puppeteer from 'puppeteer';
-
-import { sanitizeFilename } from '@/app/(presentation-generator)/utils/others';
-import { NextResponse, NextRequest } from 'next/server';
+import path from "path";
+import fs from "fs";
+import puppeteer from "puppeteer";
+import { sanitizeFilename } from "@/app/(presentation-generator)/utils/others";
+import { NextResponse, NextRequest } from "next/server";
export async function POST(req: NextRequest) {
const { id, title } = await req.json();
if (!id) {
- return NextResponse.json({ error: "Missing Presentation ID" }, { status: 400 });
+ return NextResponse.json(
+ { error: "Missing Presentation ID" },
+ { status: 400 }
+ );
}
const browser = await puppeteer.launch({
+ executablePath: process.env.PUPPETEER_EXECUTABLE_PATH,
headless: true,
args: [
- '--no-sandbox',
- '--disable-web-security',
- ]
+ "--no-sandbox",
+ "--disable-setuid-sandbox",
+ "--disable-dev-shm-usage",
+ "--disable-gpu",
+ "--disable-web-security",
+ "--disable-background-timer-throttling",
+ "--disable-backgrounding-occluded-windows",
+ "--disable-renderer-backgrounding",
+ "--disable-features=TranslateUI",
+ "--disable-ipc-flooding-protection",
+ ],
});
const page = await browser.newPage();
await page.setViewport({ width: 1280, height: 720 });
page.setDefaultNavigationTimeout(300000);
page.setDefaultTimeout(300000);
- await page.goto(`http://localhost/pdf-maker?id=${id}`, { waitUntil: 'networkidle0', timeout: 300000 });
+ await page.goto(`http://localhost/pdf-maker?id=${id}`, {
+ waitUntil: "networkidle0",
+ timeout: 300000,
+ });
- await page.waitForFunction('() => document.readyState === "complete"')
+ await page.waitForFunction('() => document.readyState === "complete"');
try {
await page.waitForFunction(
@@ -52,13 +66,11 @@ export async function POST(req: NextRequest) {
{ timeout: 300000 }
);
- await new Promise(resolve => setTimeout(resolve, 1000));
-
+ await new Promise((resolve) => setTimeout(resolve, 1000));
} catch (error) {
console.log("Warning: Some content may not have loaded completely:", error);
}
-
const pdfBuffer = await page.pdf({
width: "1280px",
height: "720px",
@@ -68,13 +80,17 @@ export async function POST(req: NextRequest) {
browser.close();
- const sanitizedTitle = sanitizeFilename(title ?? 'presentation');
- const destinationPath = path.join(process.env.APP_DATA_DIRECTORY!, 'exports', `${sanitizedTitle}.pdf`);
+ const sanitizedTitle = sanitizeFilename(title ?? "presentation");
+ const destinationPath = path.join(
+ process.env.APP_DATA_DIRECTORY!,
+ "exports",
+ `${sanitizedTitle}.pdf`
+ );
await fs.promises.mkdir(path.dirname(destinationPath), { recursive: true });
await fs.promises.writeFile(destinationPath, pdfBuffer);
return NextResponse.json({
success: true,
- path: destinationPath
+ path: destinationPath,
});
}
diff --git a/servers/nextjs/app/api/layout/route.ts b/servers/nextjs/app/api/layout/route.ts
deleted file mode 100644
index 863fab44..00000000
--- a/servers/nextjs/app/api/layout/route.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { NextResponse } from "next/server";
-import puppeteer from "puppeteer";
-
-export async function GET(request: Request) {
- const { searchParams } = new URL(request.url);
- const groupName = searchParams.get("group");
- console.log("API called with group:", groupName);
-
- if (!groupName) {
- console.warn("No group name provided in query params");
- return NextResponse.json({ error: "Missing group name" }, { status: 400 });
- }
-
- const schemaPageUrl = `http://localhost/schema?group=${encodeURIComponent(groupName)}`;
- console.log("Fetching client page:", schemaPageUrl);
-
- let browser;
- try {
- browser = await puppeteer.launch({
- headless: true,
- args: ["--no-sandbox", "--disable-web-security"],
- });
- const page = await browser.newPage();
- await page.setViewport({ width: 1280, height: 720 });
- page.setDefaultNavigationTimeout(300000);
- page.setDefaultTimeout(300000);
- await page.goto(schemaPageUrl, {
- waitUntil: "networkidle0",
- timeout: 300000,
- });
-
- await page.waitForSelector("[data-layouts]", { timeout: 300000 });
-
- // Extract both data-layouts and data-group-settings attributes
- const { dataLayouts, dataGroupSettings } = await page.$eval(
- "[data-layouts]",
- (el) => ({
- dataLayouts: el.getAttribute("data-layouts"),
- dataGroupSettings: el.getAttribute("data-group-settings"),
- }),
- );
-
- let slides, groupSettings;
- try {
- slides = JSON.parse(dataLayouts || "[]");
- } catch (e) {
- console.error("Failed to parse data-layouts JSON:", e);
- slides = [];
- }
- try {
- groupSettings = JSON.parse(dataGroupSettings || "null");
- } catch (e) {
- console.error("Failed to parse data-group-settings JSON:", e);
- groupSettings = null;
- }
-
- // Compose the response to match PresentationLayoutModel
- const response = {
- name: groupName,
- ordered: groupSettings?.ordered ?? false,
- slides: slides.map((slide: any) => ({
- id: slide.id,
- name: slide.name,
- description: slide.description,
- json_schema: slide.json_schema,
- })),
- };
-
- return NextResponse.json(response);
- } catch (err) {
- console.error("Error fetching or parsing client page:", err);
- return NextResponse.json(
- { error: "Failed to fetch or parse client page" },
- { status: 500 },
- );
- } finally {
- if (browser) await browser.close();
- }
-}
diff --git a/servers/nextjs/app/api/layouts/route.ts b/servers/nextjs/app/api/layouts/route.ts
deleted file mode 100644
index 2a08b4d6..00000000
--- a/servers/nextjs/app/api/layouts/route.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { NextResponse } from 'next/server'
-import { promises as fs } from 'fs'
-import path from 'path'
-import { GroupSetting } from '@/app/(presentation-generator)/template-preview/types'
-
-export async function GET() {
- try {
- // Get the path to the presentation-templates directory
- const layoutsDirectory = path.join(process.cwd(), 'presentation-templates')
-
- // Read all directories in the presentation-templates directory
- const items = await fs.readdir(layoutsDirectory, { withFileTypes: true })
-
- // Filter for directories (layout groups) and exclude files
- const groupDirectories = items
- .filter(item => item.isDirectory())
- .map(dir => dir.name)
-
- const allLayouts: { groupName: string; files: string[]; settings: GroupSetting | null }[] = []
-
- // Scan each group directory for layout files and settings
- for (const groupName of groupDirectories) {
- try {
- const groupPath = path.join(layoutsDirectory, groupName)
- const groupFiles = await fs.readdir(groupPath)
-
- // Filter for .tsx files and exclude any non-layout files
- const layoutFiles = groupFiles.filter(file =>
- file.endsWith('.tsx') &&
- !file.startsWith('.') &&
- !file.includes('.test.') &&
- !file.includes('.spec.') &&
- file !== 'settings.json'
- )
-
- // Read settings.json if it exists
- let settings: GroupSetting | null = null
- const settingsPath = path.join(groupPath, 'settings.json')
- try {
- const settingsContent = await fs.readFile(settingsPath, 'utf-8')
- settings = JSON.parse(settingsContent) as GroupSetting
- } catch (settingsError) {
-
- console.warn(`No settings.json found for group ${groupName} or invalid JSON`)
- // Provide default settings if settings.json is missing or invalid
- settings = {
- description: `${groupName} presentation layouts`,
- ordered: false,
- default: false
- }
-
- }
-
- if (layoutFiles.length > 0) {
- allLayouts.push({
- groupName: groupName,
- files: layoutFiles,
- settings: settings
- })
- }
- } catch (error) {
- console.error(`Error reading group directory ${groupName}:`, error)
- // Continue with other groups even if one fails
- }
- }
-
-
- return NextResponse.json(allLayouts)
- } catch (error) {
- console.error('Error reading presentation-templates directory:', error)
- return NextResponse.json(
- { error: 'Failed to read presentation-templates directory' },
- { status: 500 }
- )
- }
-}
\ No newline at end of file
diff --git a/servers/nextjs/app/api/presentation_to_pptx_model/route.ts b/servers/nextjs/app/api/presentation_to_pptx_model/route.ts
index 0cebd027..b1ff1843 100644
--- a/servers/nextjs/app/api/presentation_to_pptx_model/route.ts
+++ b/servers/nextjs/app/api/presentation_to_pptx_model/route.ts
@@ -1,27 +1,34 @@
import { ApiError } from "@/models/errors";
import { NextRequest, NextResponse } from "next/server";
import puppeteer, { Browser, ElementHandle, Page } from "puppeteer";
-import { ElementAttributes, SlideAttributesResult } from "@/types/element_attibutes";
+import {
+ ElementAttributes,
+ SlideAttributesResult,
+} from "@/types/element_attibutes";
import { convertElementAttributesToPptxSlides } from "@/utils/pptx_models_utils";
import { PptxPresentationModel } from "@/types/pptx_models";
import fs from "fs";
import path from "path";
-import { v4 as uuidv4 } from 'uuid';
+import { v4 as uuidv4 } from "uuid";
import sharp from "sharp";
interface GetAllChildElementsAttributesArgs {
element: ElementHandle;
- rootRect?: { left: number; top: number; width: number; height: number } | null;
+ rootRect?: {
+ left: number;
+ top: number;
+ width: number;
+ height: number;
+ } | null;
depth?: number;
- inheritedFont?: ElementAttributes['font'];
- inheritedBackground?: ElementAttributes['background'];
+ inheritedFont?: ElementAttributes["font"];
+ inheritedBackground?: ElementAttributes["background"];
inheritedBorderRadius?: number[];
inheritedZIndex?: number;
inheritedOpacity?: number;
screenshotsDir: string;
}
-
export async function GET(request: NextRequest) {
let browser: Browser | null = null;
let page: Page | null = null;
@@ -33,8 +40,13 @@ export async function GET(request: NextRequest) {
const { slides, speakerNotes } = await getSlidesAndSpeakerNotes(page);
const slides_attributes = await getSlidesAttributes(slides, screenshotsDir);
- await postProcessSlidesAttributes(slides_attributes, screenshotsDir, speakerNotes);
- const slides_pptx_models = convertElementAttributesToPptxSlides(slides_attributes);
+ await postProcessSlidesAttributes(
+ slides_attributes,
+ screenshotsDir,
+ speakerNotes
+ );
+ const slides_pptx_models =
+ convertElementAttributesToPptxSlides(slides_attributes);
const presentation_pptx_model: PptxPresentationModel = {
slides: slides_pptx_models,
};
@@ -48,7 +60,10 @@ export async function GET(request: NextRequest) {
if (error instanceof ApiError) {
return NextResponse.json(error, { status: 400 });
}
- return NextResponse.json({ detail: `Internal server error: ${error.message}` }, { status: 500 });
+ return NextResponse.json(
+ { detail: `Internal server error: ${error.message}` },
+ { status: 500 }
+ );
}
}
@@ -62,13 +77,19 @@ async function getPresentationId(request: NextRequest) {
async function getBrowserAndPage(id: string): Promise<[Browser, Page]> {
const browser = await puppeteer.launch({
+ executablePath: process.env.PUPPETEER_EXECUTABLE_PATH,
headless: true,
args: [
- '--no-sandbox',
- '--disable-setuid-sandbox',
- '--disable-dev-shm-usage',
- '--disable-gpu',
- '--disable-web-security',
+ "--no-sandbox",
+ "--disable-setuid-sandbox",
+ "--disable-dev-shm-usage",
+ "--disable-gpu",
+ "--disable-web-security",
+ "--disable-background-timer-throttling",
+ "--disable-backgrounding-occluded-windows",
+ "--disable-renderer-backgrounding",
+ "--disable-features=TranslateUI",
+ "--disable-ipc-flooding-protection",
],
});
@@ -92,24 +113,30 @@ async function closeBrowserAndPage(browser: Browser | null, page: Page | null) {
function getScreenshotsDir() {
const tempDir = process.env.TEMP_DIRECTORY;
if (!tempDir) {
- console.warn('TEMP_DIRECTORY environment variable not set, skipping screenshot');
- throw new ApiError('TEMP_DIRECTORY environment variable not set');
+ console.warn(
+ "TEMP_DIRECTORY environment variable not set, skipping screenshot"
+ );
+ throw new ApiError("TEMP_DIRECTORY environment variable not set");
}
- const screenshotsDir = path.join(tempDir, 'screenshots');
+ const screenshotsDir = path.join(tempDir, "screenshots");
if (!fs.existsSync(screenshotsDir)) {
fs.mkdirSync(screenshotsDir, { recursive: true });
}
return screenshotsDir;
}
-async function postProcessSlidesAttributes(slidesAttributes: SlideAttributesResult[], screenshotsDir: string, speakerNotes: string[]) {
+async function postProcessSlidesAttributes(
+ slidesAttributes: SlideAttributesResult[],
+ screenshotsDir: string,
+ speakerNotes: string[]
+) {
for (const [index, slideAttributes] of slidesAttributes.entries()) {
for (const element of slideAttributes.elements) {
if (element.should_screenshot) {
const screenshotPath = await screenshotElement(element, screenshotsDir);
element.imageSrc = screenshotPath;
element.should_screenshot = false;
- element.objectFit = 'cover';
+ element.objectFit = "cover";
element.element = undefined;
}
}
@@ -117,46 +144,62 @@ async function postProcessSlidesAttributes(slidesAttributes: SlideAttributesResu
}
}
-async function screenshotElement(element: ElementAttributes, screenshotsDir: string) {
- const screenshotPath = path.join(screenshotsDir, `${uuidv4()}.png`) as `${string}.png`;
+async function screenshotElement(
+ element: ElementAttributes,
+ screenshotsDir: string
+) {
+ const screenshotPath = path.join(
+ screenshotsDir,
+ `${uuidv4()}.png`
+ ) as `${string}.png`;
// For SVG elements, use convertSvgToPng
- if (element.tagName === 'svg') {
+ if (element.tagName === "svg") {
const pngBuffer = await convertSvgToPng(element);
fs.writeFileSync(screenshotPath, pngBuffer);
return screenshotPath;
}
// Hide all elements except the target element and its ancestors
- await element.element?.evaluate((el) => {
- const originalOpacities = new Map();
+ await element.element?.evaluate(
+ (el) => {
+ const originalOpacities = new Map();
- const hideAllExcept = (targetElement: Element) => {
- const allElements = document.querySelectorAll('*');
+ const hideAllExcept = (targetElement: Element) => {
+ const allElements = document.querySelectorAll("*");
- allElements.forEach((elem) => {
- const computedStyle = window.getComputedStyle(elem);
- originalOpacities.set(elem, computedStyle.opacity);
+ allElements.forEach((elem) => {
+ const computedStyle = window.getComputedStyle(elem);
+ originalOpacities.set(elem, computedStyle.opacity);
- if (targetElement === elem || targetElement.contains(elem) || elem.contains(targetElement)) {
- (elem as HTMLElement).style.opacity = computedStyle.opacity || "1";
- return;
- }
+ if (
+ targetElement === elem ||
+ targetElement.contains(elem) ||
+ elem.contains(targetElement)
+ ) {
+ (elem as HTMLElement).style.opacity = computedStyle.opacity || "1";
+ return;
+ }
- (elem as HTMLElement).style.opacity = '0';
- });
- };
+ (elem as HTMLElement).style.opacity = "0";
+ });
+ };
- hideAllExcept(el);
+ hideAllExcept(el);
- (el as any).__restoreStyles = () => {
- originalOpacities.forEach((opacity, elem) => {
- (elem as HTMLElement).style.opacity = opacity;
- });
- };
- }, element.opacity, element.font?.color);
+ (el as any).__restoreStyles = () => {
+ originalOpacities.forEach((opacity, elem) => {
+ (elem as HTMLElement).style.opacity = opacity;
+ });
+ };
+ },
+ element.opacity,
+ element.font?.color
+ );
- const screenshot = await element.element?.screenshot({ path: screenshotPath });
+ const screenshot = await element.element?.screenshot({
+ path: screenshotPath,
+ });
if (!screenshot) {
throw new ApiError("Failed to screenshot element");
}
@@ -171,32 +214,38 @@ async function screenshotElement(element: ElementAttributes, screenshotsDir: str
}
const convertSvgToPng = async (element_attibutes: ElementAttributes) => {
- const svgHtml = await element_attibutes.element?.evaluate((el) => {
+ const svgHtml =
+ (await element_attibutes.element?.evaluate((el) => {
+ // Apply font color
+ const fontColor = window.getComputedStyle(el).color;
+ (el as HTMLElement).style.color = fontColor;
- // Apply font color
- const fontColor = window.getComputedStyle(el).color;
- (el as HTMLElement).style.color = fontColor;
-
- return el.outerHTML;
- }) || '';
+ return el.outerHTML;
+ })) || "";
const svgBuffer = Buffer.from(svgHtml);
const pngBuffer = await sharp(svgBuffer)
- .resize(Math.round(element_attibutes.position!.width!), Math.round(element_attibutes.position!.height!))
- .toFormat('png')
+ .resize(
+ Math.round(element_attibutes.position!.width!),
+ Math.round(element_attibutes.position!.height!)
+ )
+ .toFormat("png")
.toBuffer();
return pngBuffer;
-}
+};
-
-async function getSlidesAttributes(slides: ElementHandle[], screenshotsDir: string): Promise {
+async function getSlidesAttributes(
+ slides: ElementHandle[],
+ screenshotsDir: string
+): Promise {
const slideAttributes = await Promise.all(
- slides.map((slide) => getAllChildElementsAttributes({ element: slide, screenshotsDir }))
+ slides.map((slide) =>
+ getAllChildElementsAttributes({ element: slide, screenshotsDir })
+ )
);
return slideAttributes;
}
-
async function getSlidesAndSpeakerNotes(page: Page) {
const slides_wrapper = await getSlidesWrapper(page);
const speakerNotes = await getSpeakerNotes(slides_wrapper);
@@ -214,11 +263,23 @@ async function getSlidesWrapper(page: Page): Promise> {
async function getSpeakerNotes(slides_wrapper: ElementHandle) {
return await slides_wrapper.evaluate((el) => {
- return Array.from(el.querySelectorAll('[data-speaker-note]')).map((el) => el.getAttribute('data-speaker-note') || "");
+ return Array.from(el.querySelectorAll("[data-speaker-note]")).map(
+ (el) => el.getAttribute("data-speaker-note") || ""
+ );
});
}
-async function getAllChildElementsAttributes({ element, rootRect = null, depth = 0, inheritedFont, inheritedBackground, inheritedBorderRadius, inheritedZIndex, inheritedOpacity, screenshotsDir }: GetAllChildElementsAttributesArgs): Promise {
+async function getAllChildElementsAttributes({
+ element,
+ rootRect = null,
+ depth = 0,
+ inheritedFont,
+ inheritedBackground,
+ inheritedBorderRadius,
+ inheritedZIndex,
+ inheritedOpacity,
+ screenshotsDir,
+}: GetAllChildElementsAttributesArgs): Promise {
if (!rootRect) {
const rootAttributes = await getElementAttributes(element);
inheritedFont = rootAttributes.font;
@@ -233,19 +294,25 @@ async function getAllChildElementsAttributes({ element, rootRect = null, depth =
};
}
-
- const directChildElementHandles = await element.$$(':scope > *');
+ const directChildElementHandles = await element.$$(":scope > *");
const allResults: { attributes: ElementAttributes; depth: number }[] = [];
for (const childElementHandle of directChildElementHandles) {
const attributes = await getElementAttributes(childElementHandle);
- if (['style', 'script', 'link', 'meta', 'path'].includes(attributes.tagName)) {
+ if (
+ ["style", "script", "link", "meta", "path"].includes(attributes.tagName)
+ ) {
continue;
}
- if (inheritedFont && !attributes.font && attributes.innerText && attributes.innerText.trim().length > 0) {
+ if (
+ inheritedFont &&
+ !attributes.font &&
+ attributes.innerText &&
+ attributes.innerText.trim().length > 0
+ ) {
attributes.font = inheritedFont;
}
if (inheritedBackground && !attributes.background && attributes.shadow) {
@@ -257,11 +324,18 @@ async function getAllChildElementsAttributes({ element, rootRect = null, depth =
if (inheritedZIndex !== undefined && attributes.zIndex === 0) {
attributes.zIndex = inheritedZIndex;
}
- if (inheritedOpacity !== undefined && (attributes.opacity === undefined || attributes.opacity === 1)) {
+ if (
+ inheritedOpacity !== undefined &&
+ (attributes.opacity === undefined || attributes.opacity === 1)
+ ) {
attributes.opacity = inheritedOpacity;
}
- if (attributes.position && attributes.position.left !== undefined && attributes.position.top !== undefined) {
+ if (
+ attributes.position &&
+ attributes.position.left !== undefined &&
+ attributes.position.top !== undefined
+ ) {
attributes.position = {
left: attributes.position.left - rootRect!.left,
top: attributes.position.top - rootRect!.top,
@@ -271,18 +345,28 @@ async function getAllChildElementsAttributes({ element, rootRect = null, depth =
}
// Ignore elements with no size (width or height)
- if (attributes.position === undefined || attributes.position.width === undefined || attributes.position.height === undefined || attributes.position.width === 0 || attributes.position.height === 0) {
+ if (
+ attributes.position === undefined ||
+ attributes.position.width === undefined ||
+ attributes.position.height === undefined ||
+ attributes.position.width === 0 ||
+ attributes.position.height === 0
+ ) {
continue;
}
// If element is paragraph and contains only inline formatting tags, don't go deeper
- if (attributes.tagName === 'p') {
+ if (attributes.tagName === "p") {
const innerElementTagNames = await childElementHandle.evaluate((el) => {
- return Array.from(el.querySelectorAll('*')).map((e) => e.tagName.toLowerCase());
+ return Array.from(el.querySelectorAll("*")).map((e) =>
+ e.tagName.toLowerCase()
+ );
});
- const allowedInlineTags = new Set(['strong', 'u', 'em', 'code', 's']);
- const hasOnlyAllowedInlineTags = innerElementTagNames.every((tag) => allowedInlineTags.has(tag));
+ const allowedInlineTags = new Set(["strong", "u", "em", "code", "s"]);
+ const hasOnlyAllowedInlineTags = innerElementTagNames.every((tag) =>
+ allowedInlineTags.has(tag)
+ );
if (innerElementTagNames.length > 0 && hasOnlyAllowedInlineTags) {
attributes.innerText = await childElementHandle.evaluate((el) => {
@@ -293,7 +377,11 @@ async function getAllChildElementsAttributes({ element, rootRect = null, depth =
}
}
- if (attributes.tagName === 'svg' || attributes.tagName === 'canvas' || attributes.tagName === 'table') {
+ if (
+ attributes.tagName === "svg" ||
+ attributes.tagName === "canvas" ||
+ attributes.tagName === "table"
+ ) {
attributes.should_screenshot = true;
attributes.element = childElementHandle;
}
@@ -301,7 +389,7 @@ async function getAllChildElementsAttributes({ element, rootRect = null, depth =
allResults.push({ attributes, depth });
// If the element is a canvas, or table, we don't need to go deeper
- if (attributes.should_screenshot && attributes.tagName !== 'svg') {
+ if (attributes.should_screenshot && attributes.tagName !== "svg") {
continue;
}
@@ -316,17 +404,24 @@ async function getAllChildElementsAttributes({ element, rootRect = null, depth =
inheritedOpacity: attributes.opacity || inheritedOpacity,
screenshotsDir,
});
- allResults.push(...childResults.elements.map(attr => ({ attributes: attr, depth: depth + 1 })));
+ allResults.push(
+ ...childResults.elements.map((attr) => ({
+ attributes: attr,
+ depth: depth + 1,
+ }))
+ );
}
let backgroundColor = inheritedBackground?.color;
if (depth === 0) {
const elementsWithRootPosition = allResults.filter(({ attributes }) => {
- return attributes.position &&
+ return (
+ attributes.position &&
attributes.position.left === 0 &&
attributes.position.top === 0 &&
attributes.position.width === rootRect!.width &&
- attributes.position.height === rootRect!.height;
+ attributes.position.height === rootRect!.height
+ );
});
for (const { attributes } of elementsWithRootPosition) {
@@ -337,27 +432,34 @@ async function getAllChildElementsAttributes({ element, rootRect = null, depth =
}
}
- const filteredResults = depth === 0 ? allResults.filter(({ attributes }) => {
- const hasBackground = attributes.background && attributes.background.color;
- const hasBorder = attributes.border && attributes.border.color;
- const hasShadow = attributes.shadow && attributes.shadow.color;
- const hasText = attributes.innerText && attributes.innerText.trim().length > 0;
- const hasImage = attributes.imageSrc;
- const isSvg = attributes.tagName === 'svg';
- const isCanvas = attributes.tagName === 'canvas';
- const isTable = attributes.tagName === 'table';
+ const filteredResults =
+ depth === 0
+ ? allResults.filter(({ attributes }) => {
+ const hasBackground =
+ attributes.background && attributes.background.color;
+ const hasBorder = attributes.border && attributes.border.color;
+ const hasShadow = attributes.shadow && attributes.shadow.color;
+ const hasText =
+ attributes.innerText && attributes.innerText.trim().length > 0;
+ const hasImage = attributes.imageSrc;
+ const isSvg = attributes.tagName === "svg";
+ const isCanvas = attributes.tagName === "canvas";
+ const isTable = attributes.tagName === "table";
- const occupiesRoot = attributes.position &&
- attributes.position.left === 0 &&
- attributes.position.top === 0 &&
- attributes.position.width === rootRect!.width &&
- attributes.position.height === rootRect!.height;
+ const occupiesRoot =
+ attributes.position &&
+ attributes.position.left === 0 &&
+ attributes.position.top === 0 &&
+ attributes.position.width === rootRect!.width &&
+ attributes.position.height === rootRect!.height;
- const hasVisualProperties = hasBackground || hasBorder || hasShadow || hasText;
- const hasSpecialContent = hasImage || isSvg || isCanvas || isTable;
+ const hasVisualProperties =
+ hasBackground || hasBorder || hasShadow || hasText;
+ const hasSpecialContent = hasImage || isSvg || isCanvas || isTable;
- return (hasVisualProperties && !occupiesRoot) || hasSpecialContent;
- }) : allResults;
+ return (hasVisualProperties && !occupiesRoot) || hasSpecialContent;
+ })
+ : allResults;
if (depth === 0) {
const sortedElements = filteredResults
@@ -372,10 +474,15 @@ async function getAllChildElementsAttributes({ element, rootRect = null, depth =
return zIndexB - zIndexA;
})
.map(({ attributes }) => {
- if (attributes.shadow && attributes.shadow.color && (!attributes.background || !attributes.background.color) && backgroundColor) {
+ if (
+ attributes.shadow &&
+ attributes.shadow.color &&
+ (!attributes.background || !attributes.background.color) &&
+ backgroundColor
+ ) {
attributes.background = {
color: backgroundColor,
- opacity: undefined
+ opacity: undefined,
};
}
return attributes;
@@ -383,44 +490,57 @@ async function getAllChildElementsAttributes({ element, rootRect = null, depth =
return {
elements: sortedElements,
- backgroundColor
+ backgroundColor,
};
} else {
return {
elements: filteredResults.map(({ attributes }) => attributes),
- backgroundColor
+ backgroundColor,
};
}
}
-
-async function getElementAttributes(element: ElementHandle): Promise {
-
+async function getElementAttributes(
+ element: ElementHandle
+): Promise {
const attributes = await element.evaluate((el: Element) => {
-
- function colorToHex(color: string): { hex: string | undefined; opacity: number | undefined } {
- if (!color || color === 'transparent' || color === 'rgba(0, 0, 0, 0)') {
+ function colorToHex(color: string): {
+ hex: string | undefined;
+ opacity: number | undefined;
+ } {
+ if (!color || color === "transparent" || color === "rgba(0, 0, 0, 0)") {
return { hex: undefined, opacity: undefined };
}
- if (color.startsWith('rgba(') || color.startsWith('hsla(')) {
+ if (color.startsWith("rgba(") || color.startsWith("hsla(")) {
const match = color.match(/rgba?\(([^)]+)\)|hsla?\(([^)]+)\)/);
if (match) {
const values = match[1] || match[2];
- const parts = values.split(',').map(part => part.trim());
+ const parts = values.split(",").map((part) => part.trim());
if (parts.length >= 4) {
const opacity = parseFloat(parts[3]);
- const rgbColor = color.replace(/rgba?\(|hsla?\(|\)/g, '').split(',').slice(0, 3).join(',');
- const rgbString = color.startsWith('rgba') ? `rgb(${rgbColor})` : `hsl(${rgbColor})`;
+ const rgbColor = color
+ .replace(/rgba?\(|hsla?\(|\)/g, "")
+ .split(",")
+ .slice(0, 3)
+ .join(",");
+ const rgbString = color.startsWith("rgba")
+ ? `rgb(${rgbColor})`
+ : `hsl(${rgbColor})`;
- const canvas = document.createElement('canvas');
- const ctx = canvas.getContext('2d');
+ const canvas = document.createElement("canvas");
+ const ctx = canvas.getContext("2d");
if (ctx) {
ctx.fillStyle = rgbString;
const hexColor = ctx.fillStyle;
- const hex = hexColor.startsWith('#') ? hexColor.substring(1) : hexColor;
- const result = { hex, opacity: isNaN(opacity) ? undefined : opacity };
+ const hex = hexColor.startsWith("#")
+ ? hexColor.substring(1)
+ : hexColor;
+ const result = {
+ hex,
+ opacity: isNaN(opacity) ? undefined : opacity,
+ };
return result;
}
@@ -428,29 +548,31 @@ async function getElementAttributes(element: ElementHandle): Promise): Promise): Promise): Promise): Promise): Promise): Promise): Promise): Promise 0) {
- const shadowColor = colorParts.join(' ');
+ const shadowColor = colorParts.join(" ");
const colorResult = colorToHex(shadowColor);
- hasVisibleColor = !!(colorResult.hex && colorResult.hex !== '000000' && colorResult.opacity !== 0);
+ hasVisibleColor = !!(
+ colorResult.hex &&
+ colorResult.hex !== "000000" &&
+ colorResult.opacity !== 0
+ );
}
- const hasNonZeroValues = numericParts.some(value => value !== 0);
+ const hasNonZeroValues = numericParts.some((value) => value !== 0);
let shadowScore = 0;
if (hasNonZeroValues) {
- shadowScore += numericParts.filter(value => value !== 0).length;
+ shadowScore += numericParts.filter((value) => value !== 0).length;
}
if (hasVisibleColor) {
shadowScore += 2;
}
- if ((hasNonZeroValues || hasVisibleColor) && shadowScore > bestShadowScore) {
+ if (
+ (hasNonZeroValues || hasVisibleColor) &&
+ shadowScore > bestShadowScore
+ ) {
selectedShadow = shadowStr;
bestShadowScore = shadowScore;
}
@@ -652,20 +780,19 @@ async function getElementAttributes(element: ElementHandle): Promise): Promise): Promise 0) {
- const shadowColor = colorParts.join(' ');
+ const shadowColor = colorParts.join(" ");
const shadowColorResult = colorToHex(shadowColor);
if (shadowColorResult.hex) {
@@ -741,8 +868,8 @@ async function getElementAttributes(element: ElementHandle): Promise): Promise): Promise singleLineHeight * 2;
const hasOverflow = htmlEl.scrollHeight > htmlEl.clientHeight;
- const isMultiline = hasExplicitLineBreaks || hasTextWrapping || hasOverflow;
+ const isMultiline =
+ hasExplicitLineBreaks || hasTextWrapping || hasOverflow;
- if (isMultiline && lineHeight && lineHeight !== 'normal') {
+ if (isMultiline && lineHeight && lineHeight !== "normal") {
const parsedLineHeight = parseFloat(lineHeight);
if (!isNaN(parsedLineHeight)) {
return parsedLineHeight;
@@ -801,7 +940,10 @@ async function getElementAttributes(element: ElementHandle): Promise): Promise parseFloat(part));
+ if (borderRadius && borderRadius !== "0px") {
+ const radiusParts = borderRadius
+ .split(" ")
+ .map((part) => parseFloat(part));
if (radiusParts.length === 1) {
- borderRadiusValue = [radiusParts[0], radiusParts[0], radiusParts[0], radiusParts[0]];
+ borderRadiusValue = [
+ radiusParts[0],
+ radiusParts[0],
+ radiusParts[0],
+ radiusParts[0],
+ ];
} else if (radiusParts.length === 2) {
- borderRadiusValue = [radiusParts[0], radiusParts[1], radiusParts[0], radiusParts[1]];
+ borderRadiusValue = [
+ radiusParts[0],
+ radiusParts[1],
+ radiusParts[0],
+ radiusParts[1],
+ ];
} else if (radiusParts.length === 3) {
- borderRadiusValue = [radiusParts[0], radiusParts[1], radiusParts[2], radiusParts[1]];
+ borderRadiusValue = [
+ radiusParts[0],
+ radiusParts[1],
+ radiusParts[2],
+ radiusParts[1],
+ ];
} else if (radiusParts.length === 4) {
borderRadiusValue = radiusParts;
}
@@ -848,7 +1013,8 @@ async function getElementAttributes(element: ElementHandle): Promise {
// For top-left and bottom-right corners, use maxRadiusX
// For top-right and bottom-left corners, use maxRadiusY
- const maxRadius = (index === 0 || index === 2) ? maxRadiusX : maxRadiusY;
+ const maxRadius =
+ index === 0 || index === 2 ? maxRadiusX : maxRadiusY;
return Math.max(0, Math.min(radius, maxRadius));
});
}
@@ -858,16 +1024,19 @@ async function getElementAttributes(element: ElementHandle): Promise radius === 50) ? 'circle' : 'rectangle';
+ if (el.tagName.toLowerCase() === "img") {
+ return borderRadiusValue &&
+ borderRadiusValue.length === 4 &&
+ borderRadiusValue.every((radius: number) => radius === 50)
+ ? "circle"
+ : "rectangle";
}
return undefined;
}
function parseFilters(computedStyles: CSSStyleDeclaration) {
const filter = computedStyles.filter;
- if (!filter || filter === 'none') {
+ if (!filter || filter === "none") {
return undefined;
}
@@ -886,7 +1055,7 @@ async function getElementAttributes(element: ElementHandle): Promise {
+ filterFunctions.forEach((func) => {
const match = func.match(/([a-zA-Z]+)\(([^)]*)\)/);
if (match) {
const filterType = match[1];
@@ -894,31 +1063,31 @@ async function getElementAttributes(element: ElementHandle): Promise): Promise): Promise): Promise ({
dataLayouts: el.getAttribute("data-layouts"),
- dataGroupSettings: el.getAttribute("data-group-settings"),
+ dataGroupSettings: el.getAttribute("data-settings"),
})
);
@@ -55,8 +76,11 @@ export async function GET(request: Request) {
return NextResponse.json(response);
} catch (err) {
- return NextResponse.json({ error: "Failed to fetch or parse client page" }, { status: 500 });
+ return NextResponse.json(
+ { error: "Failed to fetch or parse client page" },
+ { status: 500 }
+ );
} finally {
if (browser) await browser.close();
}
-}
\ No newline at end of file
+}
diff --git a/servers/nextjs/app/apple-icon.png b/servers/nextjs/app/apple-icon.png
new file mode 100644
index 00000000..625d5c0f
Binary files /dev/null and b/servers/nextjs/app/apple-icon.png differ
diff --git a/servers/nextjs/app/favicon.ico b/servers/nextjs/app/favicon.ico
index d9db33a2..d5e4adde 100644
Binary files a/servers/nextjs/app/favicon.ico and b/servers/nextjs/app/favicon.ico differ
diff --git a/servers/nextjs/app/hooks/useRemoteSvgIcon.tsx b/servers/nextjs/app/hooks/useRemoteSvgIcon.tsx
index 88aa48bd..3b6c09cb 100644
--- a/servers/nextjs/app/hooks/useRemoteSvgIcon.tsx
+++ b/servers/nextjs/app/hooks/useRemoteSvgIcon.tsx
@@ -144,6 +144,7 @@ export function useRemoteSvgIcon(url?: string, options: RemoteSvgOptions = {}) {
return;
}
try {
+
const res = await fetch(url);
if (!res.ok) {
throw new Error(`HTTP ${res.status}`);
@@ -199,6 +200,4 @@ export const RemoteSvgIcon: React.FC<{
style={{ display: "inline-block", color: color }}
/>
);
-};
-
-
+};
\ No newline at end of file
diff --git a/servers/nextjs/app/icon1.svg b/servers/nextjs/app/icon1.svg
new file mode 100644
index 00000000..a689fb37
--- /dev/null
+++ b/servers/nextjs/app/icon1.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/servers/nextjs/app/icon2.png b/servers/nextjs/app/icon2.png
new file mode 100644
index 00000000..4c7fe724
Binary files /dev/null and b/servers/nextjs/app/icon2.png differ
diff --git a/servers/nextjs/presentation-templates/ExampleSlideLayout.tsx b/servers/nextjs/presentation-templates/ExampleSlideLayout.tsx
index 1874a596..76e4df32 100644
--- a/servers/nextjs/presentation-templates/ExampleSlideLayout.tsx
+++ b/servers/nextjs/presentation-templates/ExampleSlideLayout.tsx
@@ -40,7 +40,7 @@ export const Schema = z.object({
}),
trendIcon: IconSchema.default({
- __icon_url__: "/static/icons/placeholder.png",
+ __icon_url__: "/static/icons/placeholder.svg",
__icon_query__: "upward trend arrow icon",
}).meta({
description: "Trend indicator icon",
diff --git a/servers/nextjs/presentation-templates/general/BasicInfoSlideLayout.tsx b/servers/nextjs/presentation-templates/general/BasicInfoSlideLayout.tsx
index e97ba984..43b633c9 100644
--- a/servers/nextjs/presentation-templates/general/BasicInfoSlideLayout.tsx
+++ b/servers/nextjs/presentation-templates/general/BasicInfoSlideLayout.tsx
@@ -35,7 +35,10 @@ const BasicInfoSlideLayout: React.FC = ({ data: slide
return (
<>
{/* Import Google Fonts */}
-
+
- {Array.from({ length: 10 }).map((_, index) => (
-
+
+
+
+
)
}
-export default loading
+export default loading
\ No newline at end of file
diff --git a/servers/nextjs/app/(presentation-generator)/outline/components/LayoutSelection.tsx b/servers/nextjs/app/(presentation-generator)/outline/components/LayoutSelection.tsx
index 5e0c4639..ed2452fc 100644
--- a/servers/nextjs/app/(presentation-generator)/outline/components/LayoutSelection.tsx
+++ b/servers/nextjs/app/(presentation-generator)/outline/components/LayoutSelection.tsx
@@ -5,200 +5,240 @@ import GroupLayouts from "./GroupLayouts";
import { LayoutGroup } from "../types/index";
interface LayoutSelectionProps {
- selectedLayoutGroup: LayoutGroup | null;
- onSelectLayoutGroup: (group: LayoutGroup) => void;
+ selectedLayoutGroup: LayoutGroup | null;
+ onSelectLayoutGroup: (group: LayoutGroup) => void;
}
const LayoutSelection: React.FC
+
+
+ + Slide Presentation +
+
+ {
+ Array.from({ length: 8 }).map((_, index) => (
+
+
-
- );
- }
-
- if (layoutGroups.length === 0) {
- return (
-
- {[1, 2, 3, 4].map((i) => (
-
-
-
-
-
- ))}
-
- {[1, 2, 3].map((j) => (
-
- ))}
-
-
-
- );
- }
-
- const handleLayoutGroupSelection = (group: LayoutGroup) => {
- const slides = getLayoutsByGroup(group.id);
- onSelectLayoutGroup({
- ...group,
- slides: slides,
- });
- }
-
- return (
-
-
- - No Templates Available -
-- No presentation templates could be loaded. Please try refreshing the page. -
-
- {/* In Built Templates */}
-
+ 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 (loading) {
+ return (
+
-
-
- {/* Custom AI Templates */}
- In Built Templates
-
- {inBuiltGroups.map((group) => (
-
-
-
-
-
- {customGroups.length === 0 ? (
- Custom AI Templates
-
- No custom templates. Create one from "Create Template" menu.
-
- ) : (
-
- {customGroups.map((group) => (
-
- )}
-
+
+ );
+ }
+
+ if (layoutGroups.length === 0) {
+ return (
+
+ {[1, 2, 3, 4].map((i) => (
+
+
+
+
+
+ ))}
+
+ {[1, 2, 3].map((j) => (
+
+ ))}
+
+
+
+ );
+ }
+
+ const handleLayoutGroupSelection = (group: LayoutGroup) => {
+ const slides = getLayoutsByGroup(group.id);
+ onSelectLayoutGroup({
+ ...group,
+ slides: slides,
+ });
+ };
+
+ return (
+
+
+ + No Templates Available +
++ No presentation templates could be loaded. Please try refreshing the + page. +
+
+ {/* In Built Templates */}
+
+ );
};
-export default LayoutSelection;
\ No newline at end of file
+export default LayoutSelection;
diff --git a/servers/nextjs/app/(presentation-generator)/pdf-maker/PdfMakerPage.tsx b/servers/nextjs/app/(presentation-generator)/pdf-maker/PdfMakerPage.tsx
index 1c95bc44..7a35378a 100644
--- a/servers/nextjs/app/(presentation-generator)/pdf-maker/PdfMakerPage.tsx
+++ b/servers/nextjs/app/(presentation-generator)/pdf-maker/PdfMakerPage.tsx
@@ -16,6 +16,8 @@ import { useFontLoader } from "../hooks/useFontLoader";
+
+
const PresentationPage = ({ presentation_id }: { presentation_id: string }) => {
const { renderSlideContent, loading } = useGroupLayouts();
const pathname = usePathname();
diff --git a/servers/nextjs/app/(presentation-generator)/presentation/hooks/PresentationUndoRedo.ts b/servers/nextjs/app/(presentation-generator)/presentation/hooks/PresentationUndoRedo.ts
index 7128c057..f2156262 100644
--- a/servers/nextjs/app/(presentation-generator)/presentation/hooks/PresentationUndoRedo.ts
+++ b/servers/nextjs/app/(presentation-generator)/presentation/hooks/PresentationUndoRedo.ts
@@ -16,7 +16,6 @@ export const usePresentationUndoRedo = () => {
const canUndo = undoRedoState.past.length > 0;
const canRedo = undoRedoState.future.length > 0;
- console.log(canUndo, canRedo);
const onUndo = useCallback(() => {
if (!canUndo) return;
diff --git a/servers/nextjs/app/(presentation-generator)/presentation/hooks/useAutoSave.tsx b/servers/nextjs/app/(presentation-generator)/presentation/hooks/useAutoSave.tsx
index 3dd7a56a..01704043 100644
--- a/servers/nextjs/app/(presentation-generator)/presentation/hooks/useAutoSave.tsx
+++ b/servers/nextjs/app/(presentation-generator)/presentation/hooks/useAutoSave.tsx
@@ -1,5 +1,5 @@
'use client'
-import { useEffect, useRef, useCallback, useState } from 'react';
+import { useEffect, useRef, useCallback, useState, useMemo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '@/store/store';
import { PresentationGenerationApi } from '../../services/api/presentation-generation';
@@ -14,6 +14,7 @@ export const useAutoSave = ({
debounceMs = 1000,
enabled = true,
}: UseAutoSaveOptions = {}) => {
+
const dispatch = useDispatch();
const { presentationData, isStreaming, isLoading, isLayoutLoading } = useSelector(
(state: RootState) => state.presentationGeneration
@@ -22,6 +23,7 @@ export const useAutoSave = ({
const saveTimeoutRef = useRef
+
+
+ {/* Custom AI Templates */}
+ + In Built Templates +
+
+ {inBuiltGroups.map((group) => (
+
+
+
+
+
+ {customGroups.length === 0 ? (
+ + Custom AI Templates +
+
+ No custom templates. Create one from "Create Template" menu.
+
+ ) : (
+
+ {customGroups.map((group) => (
+
+ )}
+ - No Layouts Found + No Template Found
- No valid layout files were discovered. Make sure your layout + No valid Template files were discovered. Make sure your layout components export both a default component and a Schema.
= ({
return (
<>
{/* Import Google Fonts */}
-
+
= ({
return (
<>
-
+
=
return (
<>
-
+
= ({ data: slideData })
const presenterInitials = getInitials(slideData?.presenterName || 'John Doe');
return (
<>
-
+
= ({ data: slideData
return (
<>
{/* Import Google Fonts */}
-
+
=
return (
<>
-
+
= ({
return (
<>
-
+
= ({ data: slideData })
return (
<>
{/* Import Google Fonts */}
-
+
= ({ data: slide
return (
<>
{/* Import Google Fonts */}
-
+
= ({
return (
<>
-
+
= ({ data: slideData }) =>
return (
<>
-
+
) => {
+
// Skip if undo/redo is in progress
if (state.isUndoRedoInProgress) {
return;
@@ -48,15 +49,14 @@ const undoRedoSlice = createSlice({
timestamp: Date.now(),
actionType: action.payload.actionType
};
-
return;
}
-
+
// Skip if slides are identical
if (JSON.stringify(state.present.slides) === JSON.stringify(newSlides)) {
return;
}
-
+
// Add current state to past
state.past.push(state.present);
@@ -127,6 +127,7 @@ const undoRedoSlice = createSlice({
clearHistory: (state) => {
state.past = [];
state.future = [];
+ state.present = null;
// Keep present
}
}