diff --git a/public/sample-images/new-bg-model-product.png b/public/sample-images/new-bg-model-product.png new file mode 100644 index 00000000..921e7a7c Binary files /dev/null and b/public/sample-images/new-bg-model-product.png differ diff --git a/public/sample-images/style-transfer-reference.png b/public/sample-images/style-transfer-reference.png new file mode 100644 index 00000000..79b68c5c Binary files /dev/null and b/public/sample-images/style-transfer-reference.png differ diff --git a/public/template-thumbnails/background-swap.png b/public/template-thumbnails/background-swap.png new file mode 100644 index 00000000..9ec9196e Binary files /dev/null and b/public/template-thumbnails/background-swap.png differ diff --git a/public/template-thumbnails/color-variations.png b/public/template-thumbnails/color-variations.png new file mode 100644 index 00000000..b1089f4e Binary files /dev/null and b/public/template-thumbnails/color-variations.png differ diff --git a/public/template-thumbnails/model-product-hover.png b/public/template-thumbnails/model-product-hover.png new file mode 100644 index 00000000..921e7a7c Binary files /dev/null and b/public/template-thumbnails/model-product-hover.png differ diff --git a/public/template-thumbnails/model-product.png b/public/template-thumbnails/model-product.png new file mode 100644 index 00000000..363c24df Binary files /dev/null and b/public/template-thumbnails/model-product.png differ diff --git a/public/template-thumbnails/product-shot.png b/public/template-thumbnails/product-shot.png new file mode 100644 index 00000000..e4f5766f Binary files /dev/null and b/public/template-thumbnails/product-shot.png differ diff --git a/public/template-thumbnails/scene-composite.png b/public/template-thumbnails/scene-composite.png new file mode 100644 index 00000000..cc66ec1b Binary files /dev/null and b/public/template-thumbnails/scene-composite.png differ diff --git a/public/template-thumbnails/style-transfer-hover.png b/public/template-thumbnails/style-transfer-hover.png new file mode 100644 index 00000000..79b68c5c Binary files /dev/null and b/public/template-thumbnails/style-transfer-hover.png differ diff --git a/public/template-thumbnails/style-transfer.png b/public/template-thumbnails/style-transfer.png new file mode 100644 index 00000000..a1d24082 Binary files /dev/null and b/public/template-thumbnails/style-transfer.png differ diff --git a/src/components/quickstart/TemplateCard.tsx b/src/components/quickstart/TemplateCard.tsx index 0591adb0..1dcfe677 100644 --- a/src/components/quickstart/TemplateCard.tsx +++ b/src/components/quickstart/TemplateCard.tsx @@ -13,6 +13,7 @@ interface TemplateCardProps { }; nodeCount: number; previewImage?: string; + hoverImage?: string; isLoading?: boolean; onUseWorkflow: () => void; disabled?: boolean; @@ -36,6 +37,7 @@ export function TemplateCard({ template, nodeCount, previewImage, + hoverImage, isLoading = false, onUseWorkflow, disabled = false, @@ -64,12 +66,24 @@ export function TemplateCard({ `} > {previewImage ? ( - /* eslint-disable-next-line @next/next/no-img-element */ - {`${template.name} + <> + {/* Primary image */} + {/* eslint-disable-next-line @next/next/no-img-element */} + {`${template.name} + {/* Hover image (if provided) */} + {hoverImage && ( + /* eslint-disable-next-line @next/next/no-img-element */ + {`${template.name} + )} + ) : (
{ - const images: Record = {}; - PRESET_TEMPLATES.forEach((template) => { - const content = getTemplateContent(template.id, "full"); - if (content?.images) { - const imageUrls = Object.values(content.images).map((img) => img.url); - images[template.id] = imageUrls[0]; - } - }); - return images; - }, []); + // Template thumbnail images (static paths) + const templateThumbnails: Record = { + "product-shot": { primary: "/template-thumbnails/product-shot.png" }, + "model-product": { + primary: "/template-thumbnails/model-product.png", + hover: "/template-thumbnails/model-product-hover.png" + }, + "color-variations": { primary: "/template-thumbnails/color-variations.png" }, + "background-swap": { primary: "/template-thumbnails/background-swap.png" }, + "style-transfer": { + primary: "/template-thumbnails/style-transfer.png", + hover: "/template-thumbnails/style-transfer-hover.png" + }, + "scene-composite": { primary: "/template-thumbnails/scene-composite.png" }, + }; // Filter presets based on search, category, and tags const filteredPresets = useMemo(() => { @@ -405,7 +408,8 @@ export function TemplateExplorerView({ key={preset.id} template={preset} nodeCount={presetMetadata[preset.id]?.nodeCount ?? 0} - previewImage={previewImages[preset.id]} + previewImage={templateThumbnails[preset.id]?.primary} + hoverImage={templateThumbnails[preset.id]?.hover} isLoading={loadingWorkflowId === preset.id} onUseWorkflow={() => handlePresetSelect(preset.id)} disabled={isLoading && loadingWorkflowId !== preset.id} diff --git a/src/lib/quickstart/templates.ts b/src/lib/quickstart/templates.ts index d1d7cbd5..538afb6f 100644 --- a/src/lib/quickstart/templates.ts +++ b/src/lib/quickstart/templates.ts @@ -48,6 +48,9 @@ export const SAMPLE_IMAGES = { // Animals donkey: "/sample-images/donkey.jpg", owl: "/sample-images/owl.jpg", + // Reference images for templates + newBgModelProduct: "/sample-images/new-bg-model-product.png", + styleTransferReference: "/sample-images/style-transfer-reference.png", }; // Default node dimensions for consistent layouts @@ -153,7 +156,7 @@ const TEMPLATE_CONTENT: Record> = images: { "imageInput-1": { url: SAMPLE_IMAGES.model, filename: "model.jpg" }, "imageInput-2": { url: SAMPLE_IMAGES.rayban, filename: "rayban.jpg" }, - "imageInput-3": { url: SAMPLE_IMAGES.streetScene, filename: "street-scene.jpg" }, + "imageInput-3": { url: SAMPLE_IMAGES.newBgModelProduct, filename: "new-bg-model-product.png" }, }, }, }, @@ -216,7 +219,7 @@ const TEMPLATE_CONTENT: Record> = "prompt-1": "Apply the warm, rustic color palette and painterly texture from the house by the lake image to the owl portrait. Maintain the owl's detailed features and pose, but transform it into an artistic interpretation that feels like it belongs in the same visual world as the landscape. The result should have the warm earth tones, soft lighting, and dreamy quality of the reference.", }, images: { - "imageInput-1": { url: SAMPLE_IMAGES.houseLake, filename: "house-lake.jpg" }, + "imageInput-1": { url: SAMPLE_IMAGES.styleTransferReference, filename: "style-transfer-reference.png" }, "imageInput-2": { url: SAMPLE_IMAGES.owl, filename: "owl.jpg" }, }, },