diff --git a/servers/fastapi/api/v1/ppt/endpoints/prompts.py b/servers/fastapi/api/v1/ppt/endpoints/prompts.py
index 4ae51171..604531ff 100644
--- a/servers/fastapi/api/v1/ppt/endpoints/prompts.py
+++ b/servers/fastapi/api/v1/ppt/endpoints/prompts.py
@@ -12,7 +12,14 @@ Follow these rules strictly:
- Read through the OXML data of slide and then match exact position ans size of elements. Make sure to convert between dimension and pixels.
- Properly export shapes as exact SVG.
- Add relevant font in tailwind to all texts.
-- Wrap the output code inside these classes: \"relative w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video bg-white relative z-20 mx-auto overflow-hidden\". For all images use this https://images.pexels.com/photos/31995895/pexels-photo-31995895/free-photo-of-turkish-coffee-with-scenic-bursa-view.jpeg url.
+- Wrap the output code inside these classes: \"relative w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video bg-white relative z-20 mx-auto overflow-hidden\".
+- For image use one of these images as appropriate:
+ - /static/images/layout-placeholders/abstract.jpg
+ - /static/images/layout-placeholders/aesthetic.jpg
+ - /static/images/layout-placeholders/charts.jpg
+ - /static/images/layout-placeholders/technology.jpg
+ - /static/images/layout-placeholders/workspace.jpg
+ - /static/images/layout-placeholders/portrait.jpg
- Give out only HTML and Tailwind code. No other texts or explanations.
"""
@@ -26,18 +33,20 @@ Convert given static HTML and Tailwind slide to a TSX React component so that it
5) Default value for schema fields should be populated with the respective static value in HTML input.
6) In schema max and min value for characters in string and items in array should be specified as per the given image of the slide. You should accurately evaluate the maximum and minimum possible characters respective fields can handle visually through the image.
7) For image and icons schema should be compulsorily declared with two dunder fields for prompt and url separately.
-8) Layout Id, layout name and layout description should be declared and should describe the structure of the layout not its purpose. Do not describe numbers of any items in the layout.
- -Description should not have any purpose for elements in it, so use 'cards' instead of 'goal cards' and 'bullet points' instead of 'solution bullet points'.
+8) Component name at the end should always yo 'dynamicSlideLayout'.
+9) **Import or export statements should not be present in the output.**
+10) Layout Id, layout name and layout description should be declared and should describe the structure of the layout not its purpose. Do not describe numbers of any items in the layout.
+ -layoutDescription should not have any purpose for elements in it, so use '...cards' instead of '...goal cards' and '...bullet points' instead of '...solution bullet points'.
+ -layoutDescription should not have words like 'goals', 'solutions', 'problems' in it.
-layoutName constant should be same as the component name in the layout.
-Layout Id examples: header-description-bullet-points-slide, header-description-image-slide
-Layout Name examples: HeaderDescriptionBulletPointsLayout, HeaderDescriptionImageLayout
-Layout Description examples: A slide with a header, description, and bullet points and A slide with a header, description, and image
For example:
-Input:
Effects of Global Warming
Global warming triggers a cascade of effects on our planet. These changes impact everything from our oceans to our ecosystems.
Rising Sea Levels
Rising sea levels threaten coastal communities and ecosystems due to melting glaciers and thermal expansion.
Intense Heatwaves
Heatwaves are becoming more frequent and intense, posing significant risks to human health and agriculture.
Changes in Precipitation
Altered precipitation patterns lead to increased droughts in some regions and severe flooding in others, affecting water resources.
-Output: import React from 'react'
-import * as z from "zod";
-
+Input:
+
Effects of Global Warming
Global warming triggers a cascade of effects on our planet. These changes impact everything from our oceans to our ecosystems.
Rising Sea Levels
Rising sea levels threaten coastal communities and ecosystems due to melting glaciers and thermal expansion.
Intense Heatwaves
Heatwaves are becoming more frequent and intense, posing significant risks to human health and agriculture.
Changes in Precipitation
Altered precipitation patterns lead to increased droughts in some regions and severe flooding in others, affecting water resources.
+Output:
const ImageSchema = z.object({
__image_url__: z.url().meta({
description: "URL to image",
@@ -55,9 +64,9 @@ const IconSchema = z.object({
description: "Query used to search the icon",
}).min(5).max(20),
})
-export const layoutId = 'bullet-with-icons-slide'
-export const layoutName = 'Bullet with Icons'
-export const layoutDescription = 'A bullets style slide with main content, supporting image, and bullet points with icons and descriptions.'
+const layoutId = 'bullet-with-icons-slide'
+const layoutName = 'Bullet with Icons'
+const layoutDescription = 'A bullets style slide with main content, supporting image, and bullet points with icons and descriptions.'
const bulletWithIconsSlideSchema = z.object({
title: z.string().min(3).max(40).default('Problem').meta({
@@ -102,25 +111,19 @@ const bulletWithIconsSlideSchema = z.object({
})
})
-export const Schema = bulletWithIconsSlideSchema
+const Schema = bulletWithIconsSlideSchema
-export type BulletWithIconsSlideData = z.infer
+type BulletWithIconsSlideData = z.infer
interface BulletWithIconsSlideLayoutProps {
data?: Partial
}
-const BulletWithIconsSlideLayout: React.FC = ({ data: slideData }) => {
+const dynamicSlideLayout: React.FC = ({ data: slideData }) => {
const bulletPoints = slideData?.bulletPoints || []
return (
<>
- {/* Import Google Fonts */}
-
-
= ({
)
}
-
-export default BulletWithIconsSlideLayout
"""
HTML_EDIT_SYSTEM_PROMPT = """
diff --git a/servers/fastapi/api/v1/ppt/endpoints/slide_to_html.py b/servers/fastapi/api/v1/ppt/endpoints/slide_to_html.py
index ad54a354..ace32fb1 100644
--- a/servers/fastapi/api/v1/ppt/endpoints/slide_to_html.py
+++ b/servers/fastapi/api/v1/ppt/endpoints/slide_to_html.py
@@ -65,6 +65,7 @@ class LayoutData(BaseModel):
layout_id: str # Unique identifier for the layout
layout_name: str # Display name of the layout
layout_code: str # TSX/React component code for the layout
+ fonts: Optional[List[str]] = None # Optional list of font links
class SaveLayoutsRequest(BaseModel):
@@ -365,7 +366,7 @@ async def generate_react_component_from_html(html_content: str, api_key: str) ->
with client.messages.stream(
model="claude-sonnet-4-20250514",
- max_tokens=20000,
+ max_tokens=64000,
temperature=1,
system=HTML_TO_REACT_SYSTEM_PROMPT,
messages=[
@@ -381,7 +382,7 @@ async def generate_react_component_from_html(html_content: str, api_key: str) ->
],
thinking={
"type": "enabled",
- "budget_tokens": 16000
+ "budget_tokens": 25000
}
) as stream:
print("Streaming started, collecting React component response...")
@@ -880,6 +881,7 @@ async def save_layouts(
# Update existing layout
existing_layout.layout_name = layout_data.layout_name
existing_layout.layout_code = layout_data.layout_code
+ existing_layout.fonts = layout_data.fonts
existing_layout.updated_at = datetime.now()
else:
# Create new layout
@@ -887,7 +889,8 @@ async def save_layouts(
presentation_id=layout_data.presentation_id,
layout_id=layout_data.layout_id,
layout_name=layout_data.layout_name,
- layout_code=layout_data.layout_code
+ layout_code=layout_data.layout_code,
+ fonts=layout_data.fonts
)
session.add(new_layout)
@@ -969,7 +972,8 @@ async def get_layouts(
presentation_id=layout.presentation_id,
layout_id=layout.layout_id,
layout_name=layout.layout_name,
- layout_code=layout.layout_code
+ layout_code=layout.layout_code,
+ fonts=layout.fonts
)
for layout in layouts_db
]
diff --git a/servers/fastapi/models/sql/presentation_layout_code.py b/servers/fastapi/models/sql/presentation_layout_code.py
index 238bacde..19089b47 100644
--- a/servers/fastapi/models/sql/presentation_layout_code.py
+++ b/servers/fastapi/models/sql/presentation_layout_code.py
@@ -1,6 +1,6 @@
from datetime import datetime
-from typing import Optional
-from sqlalchemy import Column, DateTime, Text
+from typing import Optional, List
+from sqlalchemy import Column, DateTime, Text, JSON
from sqlmodel import SQLModel, Field
@@ -14,5 +14,6 @@ class PresentationLayoutCodeModel(SQLModel, table=True):
layout_id: str = Field(description="Unique identifier for the layout")
layout_name: str = Field(description="Display name of the layout")
layout_code: str = Field(sa_column=Column(Text), description="TSX/React component code for the layout")
+ fonts: Optional[List[str]] = Field(sa_column=Column(JSON), default=None, description="Optional list of font links")
created_at: datetime = Field(sa_column=Column(DateTime, default=datetime.now))
updated_at: datetime = Field(sa_column=Column(DateTime, default=datetime.now, onupdate=datetime.now))
\ No newline at end of file
diff --git a/servers/fastapi/static/images/layout-placeholders/abstract.jpg b/servers/fastapi/static/images/layout-placeholders/abstract.jpg
new file mode 100644
index 00000000..99bccc66
Binary files /dev/null and b/servers/fastapi/static/images/layout-placeholders/abstract.jpg differ
diff --git a/servers/fastapi/static/images/layout-placeholders/aesthetic.jpg b/servers/fastapi/static/images/layout-placeholders/aesthetic.jpg
new file mode 100644
index 00000000..4d34b6db
Binary files /dev/null and b/servers/fastapi/static/images/layout-placeholders/aesthetic.jpg differ
diff --git a/servers/fastapi/static/images/layout-placeholders/charts.jpg b/servers/fastapi/static/images/layout-placeholders/charts.jpg
new file mode 100644
index 00000000..aa869900
Binary files /dev/null and b/servers/fastapi/static/images/layout-placeholders/charts.jpg differ
diff --git a/servers/fastapi/static/images/layout-placeholders/portrait.jpg b/servers/fastapi/static/images/layout-placeholders/portrait.jpg
new file mode 100644
index 00000000..14cf0df3
Binary files /dev/null and b/servers/fastapi/static/images/layout-placeholders/portrait.jpg differ
diff --git a/servers/fastapi/static/images/layout-placeholders/technology.jpg b/servers/fastapi/static/images/layout-placeholders/technology.jpg
new file mode 100644
index 00000000..7a08ffc3
Binary files /dev/null and b/servers/fastapi/static/images/layout-placeholders/technology.jpg differ
diff --git a/servers/fastapi/static/images/layout-placeholders/workspace.jpg b/servers/fastapi/static/images/layout-placeholders/workspace.jpg
new file mode 100644
index 00000000..558c8f30
Binary files /dev/null and b/servers/fastapi/static/images/layout-placeholders/workspace.jpg differ
