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

Merge 247e62fe55 into 9f732c4f5d

Browse Source
This commit is contained in:
Tony.F 2024-07-17 23:09:27 +08:00 committed by GitHub
commit 2a625707ca
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 9475 additions and 1275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
backend/prompts/imported_code_prompts.py
View File

@ -130,6 +130,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.
@ -142,6 +174,30 @@ Return only the full code in <svg></svg> tags.
Do not include markdown "```" or "```svg" at the start or end. Do not include markdown "```" or "```svg" at the start or end.
""" """
IMPORTED_CODE_FLUTTER_SYSTEM_PROMPT = """
You are an expert Flutter web 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. The Image url should have trailing ".png" like : https://placehold.co/100x100.png )
- Generate running code like so:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
....
Return only the full code of the widget.
Do not include markdown "```" or "```dart" at the start or end.
The return result must only include the code."""
IMPORTED_CODE_SYSTEM_PROMPTS = SystemPrompts( IMPORTED_CODE_SYSTEM_PROMPTS = SystemPrompts(
html_tailwind=IMPORTED_CODE_TAILWIND_SYSTEM_PROMPT, html_tailwind=IMPORTED_CODE_TAILWIND_SYSTEM_PROMPT,
html_css=IMPORTED_CODE_HTML_CSS_SYSTEM_PROMPT, html_css=IMPORTED_CODE_HTML_CSS_SYSTEM_PROMPT,
@ -149,5 +205,7 @@ 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,
flutter=IMPORTED_CODE_FLUTTER_SYSTEM_PROMPT
) )

79
backend/prompts/screenshot_system_prompts.py
View File

@ -181,6 +181,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.
@ -199,6 +243,39 @@ Do not include markdown "```" or "```svg" at the start or end.
""" """
FLUTTER_PROMPT = """
You are an expert Flutter web developer
You take screenshots of a reference web page from the user, and then build single page apps
using Flutter Material UI.
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.
- Generate running code like so:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
....
Return only the full code of the widget.
Do not include markdown "```" or "```dart" at the start or end.
The return result must only include the code.
"""
SYSTEM_PROMPTS = SystemPrompts( SYSTEM_PROMPTS = SystemPrompts(
html_css=HTML_CSS_SYSTEM_PROMPT, html_css=HTML_CSS_SYSTEM_PROMPT,
html_tailwind=HTML_TAILWIND_SYSTEM_PROMPT, html_tailwind=HTML_TAILWIND_SYSTEM_PROMPT,
@ -206,5 +283,7 @@ 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,
flutter=FLUTTER_PROMPT,
) )

4
backend/prompts/types.py
View File

@ -8,7 +8,9 @@ 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
flutter:str
Stack = Literal[ Stack = Literal[
@ -18,5 +20,7 @@ Stack = Literal[
"bootstrap", "bootstrap",
"ionic_tailwind", "ionic_tailwind",
"vue_tailwind", "vue_tailwind",
"vue_css",
"svg", "svg",
"flutter",
] ]

20
docker-compose.yml
View File

@ -1,7 +1,7 @@
version: '3.9'
services: services:
backend: backend:
build: build:
context: ./backend context: ./backend
dockerfile: Dockerfile dockerfile: Dockerfile
@ -17,7 +17,9 @@ services:
ports: ports:
- "${BACKEND_PORT:-7001}:${BACKEND_PORT:-7001}" - "${BACKEND_PORT:-7001}:${BACKEND_PORT:-7001}"
command: poetry run uvicorn main:app --host 0.0.0.0 --port ${BACKEND_PORT:-7001} command: poetry run uvicorn main:app --host 0.0.0.0 --port ${BACKEND_PORT:-7001} --workers 2
restart: always
frontend: frontend:
build: build:
@ -25,3 +27,17 @@ services:
dockerfile: Dockerfile dockerfile: Dockerfile
ports: ports:
- "5173:5173" - "5173:5173"
restart: always
nginx:
image: nginx:latest
restart: always
depends_on:
- backend
- frontend
ports:
- "80:5173"
network_mode: host
volumes:
- ./nginx.conf:/etc/nginx/nginx.conf # 挂载自定义的nginx配置文件

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

File diff suppressed because it is too large Load Diff

1
frontend/src/App.tsx
View File

@ -693,6 +693,7 @@ function App() {
code={previewCode} code={previewCode}
setCode={setGeneratedCode} setCode={setGeneratedCode}
settings={settings} settings={settings}
showOpenInCodepenio={true}
/> />
</TabsContent> </TabsContent>
</Tabs> </Tabs>

5
frontend/src/components/CodeTab.tsx
View File

@ -10,9 +10,10 @@ interface Props {
code: string; code: string;
setCode: React.Dispatch<React.SetStateAction<string>>; setCode: React.Dispatch<React.SetStateAction<string>>;
settings: Settings; settings: Settings;
showOpenInCodepenio: boolean;
} }
function CodeTab({ code, setCode, settings }: Props) { function CodeTab({ code, setCode, settings,showOpenInCodepenio}: Props) {
const copyCode = useCallback(() => { const copyCode = useCallback(() => {
copy(code); copy(code);
toast.success("Copied to clipboard"); toast.success("Copied to clipboard");
@ -63,6 +64,7 @@ function CodeTab({ code, setCode, settings }: Props) {
> >
Copy Code <FaCopy className="ml-2" /> Copy Code <FaCopy className="ml-2" />
</span> </span>
{ showOpenInCodepenio!=false && (
<Button <Button
onClick={doOpenInCodepenio} onClick={doOpenInCodepenio}
className="bg-gray-100 text-black ml-2 py-2 px-4 border border-black rounded-md hover:bg-gray-400 focus:outline-none" className="bg-gray-100 text-black ml-2 py-2 px-4 border border-black rounded-md hover:bg-gray-400 focus:outline-none"
@ -74,6 +76,7 @@ function CodeTab({ code, setCode, settings }: Props) {
className="h-4 ml-1" className="h-4 ml-1"
/> />
</Button> </Button>
)}
</div> </div>
<CodeMirror <CodeMirror
code={code} code={code}

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

@ -6,8 +6,10 @@ 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",
FLUTTER = "flutter",
} }
export const STACK_DESCRIPTIONS: { export const STACK_DESCRIPTIONS: {
@ -18,6 +20,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 },
flutter: { components: ["Flutter"], inBeta: true },
}; };

1
frontend/src/types.ts
View File

@ -23,6 +23,7 @@ export enum AppState {
INITIAL = "INITIAL", INITIAL = "INITIAL",
CODING = "CODING", CODING = "CODING",
CODE_READY = "CODE_READY", CODE_READY = "CODE_READY",
CODE_READY_NO_PREVIEW = "CODE_READY_NO_PREVIEW",
} }
export enum ScreenRecorderState { export enum ScreenRecorderState {

2406
frontend/yarn.lock
View File

File diff suppressed because it is too large Load Diff

25
nginx.conf Normal file
View File

@ -0,0 +1,25 @@
events {}
http {
upstream backend {
least_conn;
server localhost:5173;
server localhost:5173;
}
server {
listen 80;
location / {
proxy_pass http://backend;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
}