diff --git a/backend/prompts/imported_code_prompts.py b/backend/prompts/imported_code_prompts.py index 4cda821..8babf78 100644 --- a/backend/prompts/imported_code_prompts.py +++ b/backend/prompts/imported_code_prompts.py @@ -82,6 +82,38 @@ Return only the full code in tags. Do not include markdown "```" or "```html" at the start or end. """ +IMPORTED_CODE_VUE_TAILWIND_SYSTEM_PROMPT = """ +You are an expert Vue/Tailwind developer. + +- Do not add comments in the code such as "" and "" 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 "" 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: + +- Use Vue using the global build like so: +
{{ message }}
+ +- Use this script to include Tailwind: +- You can use Google Fonts +- Font Awesome for icons: + +Return only the full code in 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 = """ You are an expert at building SVGs. @@ -99,7 +131,6 @@ IMPORTED_CODE_SYSTEM_PROMPTS = SystemPrompts( react_tailwind=IMPORTED_CODE_REACT_TAILWIND_SYSTEM_PROMPT, bootstrap=IMPORTED_CODE_BOOTSTRAP_SYSTEM_PROMPT, ionic_tailwind=IMPORTED_CODE_IONIC_TAILWIND_SYSTEM_PROMPT, - # TODO: Fix this prompt to actually be Vue - vue_tailwind=IMPORTED_CODE_TAILWIND_SYSTEM_PROMPT, + vue_tailwind=IMPORTED_CODE_VUE_TAILWIND_SYSTEM_PROMPT, svg=IMPORTED_CODE_SVG_SYSTEM_PROMPT, ) diff --git a/backend/prompts/test_prompts.py b/backend/prompts/test_prompts.py index e12a207..9e60410 100644 --- a/backend/prompts/test_prompts.py +++ b/backend/prompts/test_prompts.py @@ -253,6 +253,39 @@ Return only the full code in tags. Do not include markdown "```" or "```html" at the start or end. """ + +IMPORTED_CODE_VUE_TAILWIND_PROMPT = """ +You are an expert Vue/Tailwind developer. + +- Do not add comments in the code such as "" and "" 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 "" 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: + +- Use Vue using the global build like so: +
{{ message }}
+ +- Use this script to include Tailwind: +- You can use Google Fonts +- Font Awesome for icons: + +Return only the full code in 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 = """ You are an expert at building SVGs. @@ -299,9 +332,11 @@ def test_prompts(): assert ionic_tailwind[0]["content"] == IONIC_TAILWIND_SYSTEM_PROMPT assert ionic_tailwind[1]["content"][2]["text"] == USER_PROMPT # type: ignore - vue = assemble_prompt("image_data_url", "vue_tailwind", "result_image_data_url") - assert vue[0]["content"] == VUE_TAILWIND_SYSTEM_PROMPT - assert vue[1]["content"][2]["text"] == USER_PROMPT # type: ignore + vue_tailwind = assemble_prompt( + "image_data_url", "vue_tailwind", "result_image_data_url" + ) + assert vue_tailwind[0]["content"] == VUE_TAILWIND_SYSTEM_PROMPT + assert vue_tailwind[1]["content"][2]["text"] == USER_PROMPT # type: ignore svg_prompt = assemble_prompt("image_data_url", "svg", "result_image_data_url") assert svg_prompt[0]["content"] == SVG_SYSTEM_PROMPT @@ -345,6 +380,15 @@ def test_imported_code_prompts(): ] assert ionic_tailwind == expected_ionic_tailwind + vue_tailwind = assemble_imported_code_prompt( + "code", "vue_tailwind", "result_image_data_url" + ) + expected_vue_tailwind = [ + {"role": "system", "content": IMPORTED_CODE_VUE_TAILWIND_PROMPT}, + {"role": "user", "content": "Here is the code of the app: code"}, + ] + assert vue_tailwind == expected_vue_tailwind + svg = assemble_imported_code_prompt("code", "svg", "result_image_data_url") expected_svg = [ {"role": "system", "content": IMPORTED_CODE_SVG_SYSTEM_PROMPT},