abi · nne998 · Feb 26, 2024 · Feb 26, 2024 · Feb 26, 2024 · Feb 26, 2024
diff --git a/backend/prompts/imported_code_prompts.py b/backend/prompts/imported_code_prompts.py
@@ -114,6 +114,38 @@
 Do not include markdown "```" or "```html" at the start or end.
 The return result must only include the code."""
 
+IMPORTED_CODE_VUE_CSS_SYSTEM_PROMPT = """
+You are an expert Vue/CSS developer.
+
+- 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.
+- Repeat elements as needed. For example, if there are 15 items, the code should have 15 items. DO NOT LEAVE comments like "<!-- Repeat for each news item -->" 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:
+  <script src="https://registry.npmmirror.com/vue/3.3.11/files/dist/vue.global.js"></script>
+- Use Vue using the global build like so:
+    <div id="app">{{ message }}</div>
+    <script>
+    const { createApp, ref } = Vue
+    createApp({
+        setup() {
+        const message = ref('Hello vue!')
+        return {
+            message
+        }
+        }
+    }).mount('#app')
+    </script>
+- You can use Google Fonts
+- You should use pure css in <style></style> tag
+- Font Awesome for icons: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>
+
+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."""
+
 IMPORTED_CODE_SVG_SYSTEM_PROMPT = """
 You are an expert at building SVGs.
 
@@ -126,11 +158,37 @@
 Do not include markdown "```" or "```svg" at the start or end.
 """
 
+
+IMPORTED_CODE_FLUTTER_SYSTEM_PROMPT = """
+You are an expert Flutter web developer.
+
+- 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.
+- Repeat elements as needed. For example, if there are 15 items, the code should have 15 items. DO NOT LEAVE comments like "<!-- Repeat for each news item -->" 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. The Image url should have trailing ".png" like :  https://placehold.co/100x100.png )
+- Generate running code like so:
+
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({super.key});
+....
+
+Return only the full code of the widget.
+Do not include markdown "```" or "```dart" at the start or end.
+The return result must only include the code."""
+
+
 IMPORTED_CODE_SYSTEM_PROMPTS = SystemPrompts(
     html_tailwind=IMPORTED_CODE_TAILWIND_SYSTEM_PROMPT,
     react_tailwind=IMPORTED_CODE_REACT_TAILWIND_SYSTEM_PROMPT,
     bootstrap=IMPORTED_CODE_BOOTSTRAP_SYSTEM_PROMPT,
     ionic_tailwind=IMPORTED_CODE_IONIC_TAILWIND_SYSTEM_PROMPT,
     vue_tailwind=IMPORTED_CODE_VUE_TAILWIND_SYSTEM_PROMPT,
+    vue_css=IMPORTED_CODE_VUE_CSS_SYSTEM_PROMPT,
     svg=IMPORTED_CODE_SVG_SYSTEM_PROMPT,
+    flutter=IMPORTED_CODE_FLUTTER_SYSTEM_PROMPT
 )
diff --git a/backend/prompts/screenshot_system_prompts.py b/backend/prompts/screenshot_system_prompts.py
@@ -157,6 +157,50 @@
 """
 
 
+
+VUE_CSS_PROMPT = """
+You are an expert Vue/Tailwind developer
+You take screenshots of a reference web page from the user, and then build single page apps 
+using Vue and pure css.
+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).
+
+- 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.
+- Use the exact text from the screenshot.
+- 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.
+- Repeat elements as needed to match the screenshot. For example, if there are 15 items, the code should have 15 items. DO NOT LEAVE comments like "<!-- Repeat for each news item -->" 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.
+- Use Vue using the global build like so:
+
+<div id="app">{{ message }}</div>
+<script>
+  const { createApp, ref } = Vue
+  createApp({
+    setup() {
+      const message = ref('Hello vue!')
+      return {
+        message
+      }
+    }
+  }).mount('#app')
+</script>
+
+In terms of libraries,
+
+- Use these script to include Vue so that it can run on a standalone page:
+  <script src="https://registry.npmmirror.com/vue/3.3.11/files/dist/vue.global.js"></script>
+- You can use Google Fonts
+- Your should use pure css in <style></style> tag
+- Font Awesome for icons: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>
+
+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.
+"""
+
+
 SVG_SYSTEM_PROMPT = """
 You are an expert at building SVGs.
 You take screenshots of a reference web page from the user, and then build a SVG that looks exactly like the screenshot.
@@ -175,11 +219,46 @@
 """
 
 
+
+FLUTTER_PROMPT = """
+You are an expert Flutter web developer
+You take screenshots of a reference web page from the user, and then build single page apps 
+using Flutter Material UI.
+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).
+
+- 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.
+- Use the exact text from the screenshot.
+- 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.
+- Repeat elements as needed to match the screenshot. For example, if there are 15 items, the code should have 15 items. DO NOT LEAVE comments like "<!-- Repeat for each news item -->" 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.
+- Generate running code like so:
+
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({super.key});
+....
+
+
+Return only the full code of the widget.
+Do not include markdown "```" or "```dart" at the start or end.
+The return result must only include the code.
+"""
+
 SYSTEM_PROMPTS = SystemPrompts(
     html_tailwind=HTML_TAILWIND_SYSTEM_PROMPT,
     react_tailwind=REACT_TAILWIND_SYSTEM_PROMPT,
     bootstrap=BOOTSTRAP_SYSTEM_PROMPT,
     ionic_tailwind=IONIC_TAILWIND_SYSTEM_PROMPT,
     vue_tailwind=VUE_TAILWIND_SYSTEM_PROMPT,
+    vue_css=VUE_CSS_PROMPT,
     svg=SVG_SYSTEM_PROMPT,
+    flutter=FLUTTER_PROMPT,
 )
diff --git a/backend/prompts/types.py b/backend/prompts/types.py
@@ -7,7 +7,9 @@ class SystemPrompts(TypedDict):
     bootstrap: str
     ionic_tailwind: str
     vue_tailwind: str
+    vue_css: str
     svg: str
+    flutter:str
 
 
 Stack = Literal[
@@ -16,5 +18,7 @@ class SystemPrompts(TypedDict):
     "bootstrap",
     "ionic_tailwind",
     "vue_tailwind",
+    "vue_css",
     "svg",
+    "flutter",
 ]
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -1,7 +1,7 @@
-version: '3.9'
-
+
 services:
   backend:
+
     build: 
       context: ./backend
       dockerfile: Dockerfile
@@ -17,11 +17,27 @@ services:
     ports:
       - "${BACKEND_PORT:-7001}:${BACKEND_PORT:-7001}"
 
-    command: poetry run uvicorn main:app --host 0.0.0.0 --port ${BACKEND_PORT:-7001}
+    command: poetry run uvicorn main:app --host 0.0.0.0 --port ${BACKEND_PORT:-7001} --workers 2
+
+    restart: always
 
   frontend:
     build:
       context: ./frontend
       dockerfile: Dockerfile
     ports:
       - "5173:5173"
+
+    restart: always
+
+  nginx:
+    image: nginx:latest
+    restart: always
+    depends_on:
+      - backend
+      - frontend
+    ports:
+      - "80:5173" 
+    network_mode: host
+    volumes:
+      - ./nginx.conf:/etc/nginx/nginx.conf  # 挂载自定义的nginx配置文件