Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add HTML/CSS system prompt and update stack descriptions

Browse Source
This commit is contained in:
Julian Toro 2024-02-02 10:19:52 -05:00
parent 34c1f9a959
commit 7c1fb7a54d
3 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
backend/prompts/screenshot_system_prompts.py
View File

@ -1,5 +1,28 @@
from prompts.types import SystemPrompts from prompts.types import SystemPrompts
HTML_CSS_SYSTEM_PROMPT = """
You are an expert CSS developer
You take screenshots of a reference web page from the user, and then build single page apps
using CSS, HTML and JS.
You might also be given a screenshot(The second image) of a web page that you have already built, and asked to
update it to look more like the reference image(The first image).
- Make sure the app looks exactly like the screenshot.
- Pay close attention to background color, text color, font size, font family,
padding, margin, border, etc. Match the colors and sizes exactly.
- Use the exact text from the screenshot.
- Do not add comments in the code such as "<!-- Add other navigation links as needed -->" and "<!-- ... other news items ... -->" in place of writing the full code. WRITE THE FULL CODE.
- Repeat elements as needed to match the screenshot. For example, if there are 15 items, the code should have 15 items. DO NOT LEAVE comments like "<!-- Repeat for each news item -->" or bad things will happen.
- For images, use placeholder images from https://placehold.co and include a detailed description of the image in the alt text so that an image generation AI can generate the image later.
In terms of libraries,
- You can use Google Fonts
- Font Awesome for icons: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>
Return only the full code in <html></html> tags.
Do not include markdown "```" or "```html" at the start or end.
"""
HTML_TAILWIND_SYSTEM_PROMPT = """ HTML_TAILWIND_SYSTEM_PROMPT = """
You are an expert Tailwind developer You are an expert Tailwind developer
@ -176,6 +199,7 @@ Do not include markdown "```" or "```svg" at the start or end.
SYSTEM_PROMPTS = SystemPrompts( SYSTEM_PROMPTS = SystemPrompts(
html_css=HTML_CSS_SYSTEM_PROMPT,
html_tailwind=HTML_TAILWIND_SYSTEM_PROMPT, html_tailwind=HTML_TAILWIND_SYSTEM_PROMPT,
react_tailwind=REACT_TAILWIND_SYSTEM_PROMPT, react_tailwind=REACT_TAILWIND_SYSTEM_PROMPT,
bootstrap=BOOTSTRAP_SYSTEM_PROMPT, bootstrap=BOOTSTRAP_SYSTEM_PROMPT,

2
backend/prompts/types.py
View File

@ -2,6 +2,7 @@ from typing import Literal, TypedDict
class SystemPrompts(TypedDict): class SystemPrompts(TypedDict):
html_css: str
html_tailwind: str html_tailwind: str
react_tailwind: str react_tailwind: str
bootstrap: str bootstrap: str
@ -11,6 +12,7 @@ class SystemPrompts(TypedDict):
Stack = Literal[ Stack = Literal[
"html_css",
"html_tailwind", "html_tailwind",
"react_tailwind", "react_tailwind",
"bootstrap", "bootstrap",

2
frontend/src/lib/stacks.ts
View File

@ -1,5 +1,6 @@
// Keep in sync with backend (prompts/types.py) // Keep in sync with backend (prompts/types.py)
export enum Stack { export enum Stack {
HTML_CSS = "html_css",
HTML_TAILWIND = "html_tailwind", HTML_TAILWIND = "html_tailwind",
REACT_TAILWIND = "react_tailwind", REACT_TAILWIND = "react_tailwind",
BOOTSTRAP = "bootstrap", BOOTSTRAP = "bootstrap",
@ -11,6 +12,7 @@ export enum Stack {
export const STACK_DESCRIPTIONS: { export const STACK_DESCRIPTIONS: {
[key in Stack]: { components: string[]; inBeta: boolean }; [key in Stack]: { components: string[]; inBeta: boolean };
} = { } = {
html_css: { components: ["HTML", "Css"], inBeta: false },
html_tailwind: { components: ["HTML", "Tailwind"], inBeta: false }, html_tailwind: { components: ["HTML", "Tailwind"], inBeta: false },
react_tailwind: { components: ["React", "Tailwind"], inBeta: false }, react_tailwind: { components: ["React", "Tailwind"], inBeta: false },
bootstrap: { components: ["Bootstrap"], inBeta: false }, bootstrap: { components: ["Bootstrap"], inBeta: false },