Merge 247e62fe55 into 9f732c4f5d

2024-07-17 23:09:27 +08:00 · 2024-07-17 23:09:27 +08:00 · 2a625707ca
commit 2a625707ca
parent 9f732c4f5d 247e62fe55
11 changed files with 9475 additions and 1275 deletions
--- a/backend/prompts/imported_code_prompts.py
+++ b/backend/prompts/imported_code_prompts.py
@ -130,6 +130,38 @@ 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_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.

@ -142,6 +174,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. 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,
    html_css=IMPORTED_CODE_HTML_CSS_SYSTEM_PROMPT,
@ -149,5 +205,7 @@ IMPORTED_CODE_SYSTEM_PROMPTS = SystemPrompts(
    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
 )
--- a/backend/prompts/screenshot_system_prompts.py
+++ b/backend/prompts/screenshot_system_prompts.py
@ -181,6 +181,50 @@ The return result must only include the code.
 """


+
+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.
@ -199,6 +243,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_css=HTML_CSS_SYSTEM_PROMPT,
    html_tailwind=HTML_TAILWIND_SYSTEM_PROMPT,
@ -206,5 +283,7 @@ SYSTEM_PROMPTS = SystemPrompts(
    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,
 )
--- a/backend/prompts/types.py
+++ b/backend/prompts/types.py
@ -8,7 +8,9 @@ class SystemPrompts(TypedDict):
    bootstrap: str
    ionic_tailwind: str
    vue_tailwind: str
+    vue_css: str
    svg: str
+    flutter:str


 Stack = Literal[
@ -18,5 +20,7 @@ Stack = Literal[
    "bootstrap",
    "ionic_tailwind",
    "vue_tailwind",
+    "vue_css",
    "svg",
+    "flutter",
 ]
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -1,7 +1,7 @@
-version: '3.9'
-
+ 
 services:
  backend:
+
    build: 
      context: ./backend
      dockerfile: Dockerfile
@ -17,7 +17,9 @@ 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:
@ -25,3 +27,17 @@ services:
      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配置文件
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@ -693,6 +693,7 @@ function App() {
                  code={previewCode}
                  setCode={setGeneratedCode}
                  settings={settings}
+                  showOpenInCodepenio={true}
                />
              </TabsContent>
            </Tabs>
@ -703,4 +704,4 @@ function App() {
  );
 }

-export default App;
+export default App;
--- a/frontend/src/components/CodeTab.tsx
+++ b/frontend/src/components/CodeTab.tsx
@ -10,9 +10,10 @@ interface Props {
  code: string;
  setCode: React.Dispatch<React.SetStateAction<string>>;
  settings: Settings;
+  showOpenInCodepenio: boolean;
 }

-function CodeTab({ code, setCode, settings }: Props) {
+function CodeTab({ code, setCode, settings,showOpenInCodepenio}: Props) {
  const copyCode = useCallback(() => {
    copy(code);
    toast.success("Copied to clipboard");
@ -63,6 +64,7 @@ function CodeTab({ code, setCode, settings }: Props) {
        >
          Copy Code <FaCopy className="ml-2" />
        </span>
+        { showOpenInCodepenio!=false && (
        <Button
          onClick={doOpenInCodepenio}
          className="bg-gray-100 text-black ml-2 py-2 px-4 border border-black rounded-md hover:bg-gray-400 focus:outline-none"
@ -74,6 +76,7 @@ function CodeTab({ code, setCode, settings }: Props) {
            className="h-4 ml-1"
          />
        </Button>
+        )}
      </div>
      <CodeMirror
        code={code}
--- a/frontend/src/lib/stacks.ts
+++ b/frontend/src/lib/stacks.ts
@ -6,8 +6,10 @@ export enum Stack {
  REACT_TAILWIND = "react_tailwind",
  BOOTSTRAP = "bootstrap",
  VUE_TAILWIND = "vue_tailwind",
+  VUE_CSS = "vue_css",
  IONIC_TAILWIND = "ionic_tailwind",
  SVG = "svg",
+  FLUTTER = "flutter",
 }

 export const STACK_DESCRIPTIONS: {
@ -18,6 +20,8 @@ export const STACK_DESCRIPTIONS: {
  react_tailwind: { components: ["React", "Tailwind"], inBeta: false },
  bootstrap: { components: ["Bootstrap"], inBeta: false },
  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 },
 };
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@ -23,6 +23,7 @@ export enum AppState {
  INITIAL = "INITIAL",
  CODING = "CODING",
  CODE_READY = "CODE_READY",
+  CODE_READY_NO_PREVIEW = "CODE_READY_NO_PREVIEW",
 }

 export enum ScreenRecorderState {
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
--- a/nginx.conf
+++ b/nginx.conf
@ -0,0 +1,25 @@
+events {}
+
+http {
+ 
+    upstream backend {
+        least_conn;
+        server localhost:5173; 
+        server localhost:5173; 
+    }
+
+    server {
+        listen 80;
+
+        location / {
+            proxy_pass http://backend;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+
+            
+        }
+
+    }
+}