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

Merge 093e5ced5a into 1f61d02da6

Browse Source
This commit is contained in:
Tony.F 2024-05-17 16:04:54 +02:00 committed by GitHub
commit c753e8453d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 9213 additions and 1025 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
backend/prompts/imported_code_prompts.py
View File

@ -114,6 +114,38 @@ Return only the full code in <html></html> tags.
Do not include markdown "```" or "```html" at the start or end. Do not include markdown "```" or "```html" at the start or end.
The return result must only include the code.""" The return result must only include the code."""
IMPORTED_CODE_VUE_CSS_SYSTEM_PROMPT = """
You are an expert Vue/CSS developer.
- 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. 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,
- Use these script to include Vue so that it can run on a standalone page:
<script src="https://registry.npmmirror.com/vue/3.3.11/files/dist/vue.global.js"></script>
- Use Vue using the global build like so:
<div id="app">{{ message }}</div>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const message = ref('Hello vue!')
return {
message
}
}
}).mount('#app')
</script>
- You can use Google Fonts
- You should use pure css in <style></style> tag
- 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.
The return result must only include the code."""
IMPORTED_CODE_SVG_SYSTEM_PROMPT = """ IMPORTED_CODE_SVG_SYSTEM_PROMPT = """
You are an expert at building SVGs. You are an expert at building SVGs.
@ -132,5 +164,6 @@ IMPORTED_CODE_SYSTEM_PROMPTS = SystemPrompts(
bootstrap=IMPORTED_CODE_BOOTSTRAP_SYSTEM_PROMPT, bootstrap=IMPORTED_CODE_BOOTSTRAP_SYSTEM_PROMPT,
ionic_tailwind=IMPORTED_CODE_IONIC_TAILWIND_SYSTEM_PROMPT, ionic_tailwind=IMPORTED_CODE_IONIC_TAILWIND_SYSTEM_PROMPT,
vue_tailwind=IMPORTED_CODE_VUE_TAILWIND_SYSTEM_PROMPT, vue_tailwind=IMPORTED_CODE_VUE_TAILWIND_SYSTEM_PROMPT,
vue_css=IMPORTED_CODE_VUE_CSS_SYSTEM_PROMPT,
svg=IMPORTED_CODE_SVG_SYSTEM_PROMPT, svg=IMPORTED_CODE_SVG_SYSTEM_PROMPT,
) )

45
backend/prompts/screenshot_system_prompts.py
View File

@ -157,6 +157,50 @@ The return result must only include the code.
""" """
VUE_CSS_PROMPT = """
You are an expert Vue/Tailwind developer
You take screenshots of a reference web page from the user, and then build single page apps
using Vue and pure css.
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.
- Use Vue using the global build like so:
<div id="app">{{ message }}</div>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const message = ref('Hello vue!')
return {
message
}
}
}).mount('#app')
</script>
In terms of libraries,
- Use these script to include Vue so that it can run on a standalone page:
<script src="https://registry.npmmirror.com/vue/3.3.11/files/dist/vue.global.js"></script>
- You can use Google Fonts
- Your should use pure css in <style></style> tag
- 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.
The return result must only include the code.
"""
SVG_SYSTEM_PROMPT = """ SVG_SYSTEM_PROMPT = """
You are an expert at building SVGs. You are an expert at building SVGs.
You take screenshots of a reference web page from the user, and then build a SVG that looks exactly like the screenshot. You take screenshots of a reference web page from the user, and then build a SVG that looks exactly like the screenshot.
@ -181,5 +225,6 @@ SYSTEM_PROMPTS = SystemPrompts(
bootstrap=BOOTSTRAP_SYSTEM_PROMPT, bootstrap=BOOTSTRAP_SYSTEM_PROMPT,
ionic_tailwind=IONIC_TAILWIND_SYSTEM_PROMPT, ionic_tailwind=IONIC_TAILWIND_SYSTEM_PROMPT,
vue_tailwind=VUE_TAILWIND_SYSTEM_PROMPT, vue_tailwind=VUE_TAILWIND_SYSTEM_PROMPT,
vue_css=VUE_CSS_PROMPT,
svg=SVG_SYSTEM_PROMPT, svg=SVG_SYSTEM_PROMPT,
) )

2
backend/prompts/types.py
View File

@ -7,6 +7,7 @@ class SystemPrompts(TypedDict):
bootstrap: str bootstrap: str
ionic_tailwind: str ionic_tailwind: str
vue_tailwind: str vue_tailwind: str
vue_css: str
svg: str svg: str
@ -16,5 +17,6 @@ Stack = Literal[
"bootstrap", "bootstrap",
"ionic_tailwind", "ionic_tailwind",
"vue_tailwind", "vue_tailwind",
"vue_css",
"svg", "svg",
] ]

8143
frontend/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

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

@ -4,7 +4,9 @@ export enum Stack {
REACT_TAILWIND = "react_tailwind", REACT_TAILWIND = "react_tailwind",
BOOTSTRAP = "bootstrap", BOOTSTRAP = "bootstrap",
VUE_TAILWIND = "vue_tailwind", VUE_TAILWIND = "vue_tailwind",
VUE_CSS = "vue_css",
IONIC_TAILWIND = "ionic_tailwind", IONIC_TAILWIND = "ionic_tailwind",
SVG = "svg", SVG = "svg",
} }
@ -15,6 +17,8 @@ export const STACK_DESCRIPTIONS: {
react_tailwind: { components: ["React", "Tailwind"], inBeta: false }, react_tailwind: { components: ["React", "Tailwind"], inBeta: false },
bootstrap: { components: ["Bootstrap"], inBeta: false }, bootstrap: { components: ["Bootstrap"], inBeta: false },
vue_tailwind: { components: ["Vue", "Tailwind"], inBeta: true }, vue_tailwind: { components: ["Vue", "Tailwind"], inBeta: true },
vue_css: { components: ["Vue","CSS"], inBeta: true },
ionic_tailwind: { components: ["Ionic", "Tailwind"], inBeta: true }, ionic_tailwind: { components: ["Ionic", "Tailwind"], inBeta: true },
svg: { components: ["SVG"], inBeta: true }, svg: { components: ["SVG"], inBeta: true },
}; };

2011
frontend/yarn.lock
View File

File diff suppressed because it is too large Load Diff