From 8c21f2210cfa6558836ed0c4f601de880a46202b Mon Sep 17 00:00:00 2001 From: dialmedu Date: Fri, 24 Nov 2023 21:25:29 -0500 Subject: [PATCH] add support Ionic and pass params to prompt --- backend/prompts.py | 45 +++++++++++++++++++++++++++++++------ backend/support_lenguage.py | 8 +++++++ 2 files changed, 46 insertions(+), 7 deletions(-) create mode 100644 backend/support_lenguage.py 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