From ddccd9baa31f206af9a464c970376004c5a381ba Mon Sep 17 00:00:00 2001
From: kkk123321 <neverdie998@163.com>
Date: Mon, 26 Feb 2024 09:13:45 +0000
Subject: [PATCH] add flutter template

---
 backend/prompts/imported_code_prompts.py     | 25 ++++++++++++++
 backend/prompts/screenshot_system_prompts.py | 34 ++++++++++++++++++++
 backend/prompts/types.py                     |  2 ++
 frontend/src/lib/stacks.ts                   |  3 +-
 4 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/backend/prompts/imported_code_prompts.py b/backend/prompts/imported_code_prompts.py
index 54d11bb..6fcea48 100644
--- a/backend/prompts/imported_code_prompts.py
+++ b/backend/prompts/imported_code_prompts.py
@@ -158,6 +158,30 @@ Return only the full code in <svg></svg> tags.
 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.
+- 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,
@@ -166,4 +190,5 @@ IMPORTED_CODE_SYSTEM_PROMPTS = SystemPrompts(
     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
index f2cb8b3..c8bb930 100644
--- a/backend/prompts/screenshot_system_prompts.py
+++ b/backend/prompts/screenshot_system_prompts.py
@@ -219,6 +219,39 @@ Do not include markdown "```" or "```svg" at the start or end.
 """
 
 
+
+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,
@@ -227,4 +260,5 @@ SYSTEM_PROMPTS = SystemPrompts(
     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
index 172d18a..9df157c 100644
--- a/backend/prompts/types.py
+++ b/backend/prompts/types.py
@@ -9,6 +9,7 @@ class SystemPrompts(TypedDict):
     vue_tailwind: str
     vue_css: str
     svg: str
+    flutter:str
 
 
 Stack = Literal[
@@ -19,4 +20,5 @@ Stack = Literal[
     "vue_tailwind",
     "vue_css",
     "svg",
+    "flutter",
 ]
diff --git a/frontend/src/lib/stacks.ts b/frontend/src/lib/stacks.ts
index ad828dc..f3d7a69 100644
--- a/frontend/src/lib/stacks.ts
+++ b/frontend/src/lib/stacks.ts
@@ -8,6 +8,7 @@ export enum Stack {
   IONIC_TAILWIND = "ionic_tailwind",
   
   SVG = "svg",
+  FLUTTER = "flutter",
 }
 
 export const STACK_DESCRIPTIONS: {
@@ -19,6 +20,6 @@ export const STACK_DESCRIPTIONS: {
   vue_tailwind: { components: ["Vue", "Tailwind"], inBeta: true },
   vue_css: { components: ["Vue","CSS"], inBeta: true },
   ionic_tailwind: { components: ["Ionic", "Tailwind"], inBeta: true },
-  
   svg: { components: ["SVG"], inBeta: true },
+  flutter: { components: ["Flutter"], inBeta: true },
 };