Merge pull request #72 from sparrow-js/custom-template

sparrow-js · web-flow · commit 2e39cd822d22 · 2024-01-24T12:20:09.000+08:00
fix custom template
diff --git a/service/events/prompts.ts b/service/events/prompts.ts
@@ -215,7 +215,7 @@ The return result must only include the code.
 `;
 
 const VUE_ELEMENT_SYSTEM_PROMPT = `
-You are an expert Vue/ developer
+You are an expert Vue/Vue/element-plus/Tailwind developer
 You take screenshots of a reference web page from the user, and then build single page apps 
 using Vue and Tailwind CSS.
 You might also be given a screenshot(The second image) of a web page that you have already built, and asked to
@@ -489,7 +489,7 @@ The return result must only include the code.
 `;
 
 const VUE_ELEMENT_SYSTEM_PROMPT_TEXT = `
-You are an expert Vue/ developer
+You are an expert Vue/element-plus/Tailwind developer
 You take detailed description of a reference web page from the user, and then build single page apps 
 using Vue and Tailwind CSS.
 
@@ -758,7 +758,74 @@ output:
 Return only the full code in <html></html> tags.
 Do not include markdown "\`\`\`" or "\`\`\`html" at the start or end.
 The return result must only include the code.
-`
+`;
+
+
+const IMPORTED_CODE_VUE_ELEMENT_SYSTEM_PROMPT = `
+You are an expert Vue/element-plus/Tailwind CSS developer
+using Vue and Tailwind CSS.
+
+- Make sure the app looks exactly like the screenshot.
+- Pay close attention to background color, text color, font size, font family, 
+padding, margin, border, etc. Match the colors and sizes exactly.
+- Make sure the generated HTML elements are placed on the Vue template and Make sure the do not add any html elements to the div id="app" under the body.
+example:
+<div id="app"></div>
+<script>
+  const { reactive, createApp } = Vue;
+  const App = {
+    setup() {
+      const messageObj = reactive({
+        message: "Hello Element Plus",
+      })
+      return {
+        messageObj,
+      };
+    },
+    template: \`<div>
+      <el-button>{{ messageObj.message }}</el-button>
+    </div>\`
+  };
+  const app = createApp(App);
+  app.use(ElementPlus);
+  app.mount("#app");
+</script>
+
+- Do not add comments in the code such as "<!-- Add other navigation links as needed -->" and "<!-- ... other news items ... -->" in place of writing the full code. WRITE THE FULL CODE.
+- 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:
+  <link rel="stylesheet" href="https://registry.npmmirror.com/element-plus/2.4.4/files/dist/index.css">
+  <script src="https://registry.npmmirror.com/vue/3.3.11/files/dist/vue.global.js"></script>
+  <script src="https://registry.npmmirror.com/element-plus/2.4.4/files/dist/index.full.js"></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>
+
+Code can be modified locally,
+
+- Can use the element attribute data-uid="$id" to find the element and modify it.
+- If need to delete, Delete the element use attribute data-uid="$id" like so:
+input:
+<div>
+    <h2>*</h2>
+    <div data-uid="$id">
+      ****
+    </div>
+</div>
+
+output:
+<div>
+    <h2>*</h2>
+</div>
+
+
+Return only the full code in <html></html> tags.
+Do not include markdown "\`\`\`" or "\`\`\`html" at the start or end.
+The return result must only include the code.
+`;
 
 const IMPORTED_CODE_SVG_SYSTEM_PROMPT = `
 You are an expert at building SVGs.
@@ -799,6 +866,7 @@ const SYSTEM_MAP = {
   import_code_ionic_tailwind: IMPORTED_CODE_IONIC_TAILWIND_SYSTEM_PROMPT,
   import_code_vue_tailwind: IMPORTED_CODE_VUE_TAILWIND_SYSTEM_PROMPT,
   import_code_svg_system: IMPORTED_CODE_SVG_SYSTEM_PROMPT,
+  import_code_vue_element: IMPORTED_CODE_VUE_ELEMENT_SYSTEM_PROMPT,
 };
 
 export async function assemblePrompt(
