diff --git a/backend/prompts.py b/backend/prompts.py
index 1ba254d..0eba115 100644
--- a/backend/prompts.py
+++ b/backend/prompts.py
@@ -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:
-- You can use Google Fonts
-- Font Awesome for icons:
+- 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 tags.
+{{support_lenguage}}
+
+Return only the full code in 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': '',
+ 'font_library_name': 'Google Fonts',
+ 'font_library_script': '',
+}
+
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,
diff --git a/backend/support_lenguage.py b/backend/support_lenguage.py
new file mode 100644
index 0000000..fb15b60
--- /dev/null
+++ b/backend/support_lenguage.py
@@ -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:
+
+-
+-
+-
+"""
\ No newline at end of file