From 0413ee26d4bae8a7252907195c06fb4d1b9ae9af Mon Sep 17 00:00:00 2001 From: Suraj Jha Date: Fri, 1 Aug 2025 22:53:22 +0545 Subject: [PATCH] fix: reformatted for better conversion to react, add fonts to layout --- .../fastapi/api/v1/ppt/endpoints/prompts.py | 34 ++++++++----------- .../api/v1/ppt/endpoints/slide_to_html.py | 12 ++++--- .../models/sql/presentation_layout_code.py | 5 +-- 3 files changed, 25 insertions(+), 26 deletions(-) diff --git a/servers/fastapi/api/v1/ppt/endpoints/prompts.py b/servers/fastapi/api/v1/ppt/endpoints/prompts.py index 090e86c2..604531ff 100644 --- a/servers/fastapi/api/v1/ppt/endpoints/prompts.py +++ b/servers/fastapi/api/v1/ppt/endpoints/prompts.py @@ -33,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 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.

-Output: import React from 'react' -import * as z from "zod"; - +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.

+Output: const ImageSchema = z.object({ __image_url__: z.url().meta({ description: "URL to image", @@ -62,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({ @@ -109,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