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 = """ 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 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 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). 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, In terms of libraries,
- Use this script to include Tailwind: <script src="https://cdn.tailwindcss.com"></script> - Use this script to include {{css_library_name}}: {{css_library_script}}
- You can use Google Fonts - You can use {{font_library_name}}
- Font Awesome for icons: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link> - 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. 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 = """ USER_PROMPT = """
Generate code for a web page that looks exactly like this. 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): def assemble_prompt(image_data_url, result_image_data_url=None):
content = [ 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"}, "image_url": {"url": result_image_data_url, "detail": "high"},
}) })
return [ return [
{"role": "system", "content": SYSTEM_PROMPT}, # TODO: Pass params from settings frotend
{"role": "system", "content": get_prompt(SYSTEM_PROMPT)},
{ {
"role": "user", "role": "user",
"content": content, "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" />
"""