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

add support Ionic and pass params to prompt

Browse Source
This commit is contained in:
dialmedu 2023-11-24 21:25:29 -05:00
parent d177ad30c8
commit 8c21f2210c
2 changed files with 46 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
backend/prompts.py
View File

@ -1,7 +1,9 @@
from support_lenguage import IONIC_PROMPT_SUPPORT
SYSTEM_PROMPT = """
You are an expert Tailwind developer
You are an expert {{main_language_name}} developer
You take screenshots of a reference web page from the user, and then build single page apps
using Tailwind, HTML and JS.
using {{main_language_name}}, {{css_library_name}}, 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).
@ -15,17 +17,45 @@ padding, margin, border, etc. Match the colors and sizes exactly.
In terms of libraries,
- Use this script to include Tailwind: <script src="https://cdn.tailwindcss.com"></script>
- 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>
- Use this script to include {{css_library_name}}: {{css_library_script}}
- You can use {{font_library_name}}
- Font Awesome for icons: {{font_library_script}}
Return only the full code in <html></html> tags.
{{support_lenguage}}
Return only the full code in <html></html> tags
Do not include markdown "```" or "```html" at the start or end.
"""
SYSTEM_PROMPT_PARAMS = {
'main_language_name': 'Tailwind',
'css_library_name': 'Tailwind',
'css_library_script': '<script src="https://cdn.tailwindcss.com"></script>',
'font_library_name': 'Google Fonts',
'font_library_script': '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>',
}
USER_PROMPT = """
Generate code for a web page that looks exactly like this.
"""
def build_prompt(prompt, params):
for key, value in params.items():
placeholder = f"{{{{{key}}}}}"
prompt = prompt.replace(placeholder, value)
return prompt
def add_support_lenguages(prompt):
support_lenguage = "\n".join([IONIC_PROMPT_SUPPORT])
prompt = build_prompt(prompt, {'support_lenguage': support_lenguage })
return prompt
def get_prompt(prompt, params = {}):
params_template = {**SYSTEM_PROMPT_PARAMS, **params}
prompt_template = build_prompt(prompt, params_template)
prompt_template = add_support_lenguages(prompt_template)
return prompt_template
def assemble_prompt(image_data_url, result_image_data_url=None):
content = [
@ -44,7 +74,8 @@ def assemble_prompt(image_data_url, result_image_data_url=None):
"image_url": {"url": result_image_data_url, "detail": "high"},
})
return [
{"role": "system", "content": SYSTEM_PROMPT},
# TODO: Pass params from settings frotend
{"role": "system", "content": get_prompt(SYSTEM_PROMPT)},
{
"role": "user",
"content": content,

8
backend/support_lenguage.py Normal file
View File

@ -0,0 +1,8 @@
IONIC_PROMPT_SUPPORT = """
Keep in mind if in the following instruction you are also an expert in Ionic, include this libraries,
otherwise only those related to {{main_language_name}} and other languages not related to Ionic:
- <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
- <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
"""