diff --git a/backend/main.py b/backend/main.py
index 65fc15e..108c4dc 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -69,13 +69,11 @@ async def stream_code(websocket: WebSocket):
print("Received params")
- # Read the output settings from the request. Fall back to default if not provided.
- output_settings = {"css": "tailwind", "js": "vanilla"}
- if params["outputSettings"] and params["outputSettings"]["css"]:
- output_settings["css"] = params["outputSettings"]["css"]
- if params["outputSettings"] and params["outputSettings"]["js"]:
- output_settings["js"] = params["outputSettings"]["js"]
- print("Using output settings:", output_settings)
+ # Read the code config settings from the request. Fall back to default if not provided.
+ generated_code_config = ""
+ if "generatedCodeConfig" in params and params["generatedCodeConfig"]:
+ generated_code_config = params["generatedCodeConfig"]
+ print(f"Generating {generated_code_config} code")
# Get the OpenAI API key from the request. Fall back to environment variable if not provided.
# If neither is provided, we throw an error.
@@ -139,12 +137,23 @@ async def stream_code(websocket: WebSocket):
async def process_chunk(content):
await websocket.send_json({"type": "chunk", "value": content})
- if params.get("resultImage") and params["resultImage"]:
- prompt_messages = assemble_prompt(
- params["image"], output_settings, params["resultImage"]
+ # Assemble the prompt
+ try:
+ if params.get("resultImage") and params["resultImage"]:
+ prompt_messages = assemble_prompt(
+ params["image"], generated_code_config, params["resultImage"]
+ )
+ else:
+ prompt_messages = assemble_prompt(params["image"], generated_code_config)
+ except:
+ await websocket.send_json(
+ {
+ "type": "error",
+ "value": "Error assembling prompt. Contact support at support@picoapps.xyz",
+ }
)
- else:
- prompt_messages = assemble_prompt(params["image"], output_settings)
+ await websocket.close()
+ return
# Image cache for updates so that we don't have to regenerate images
image_cache = {}
diff --git a/backend/prompts.py b/backend/prompts.py
index f01eb7e..c9e48cb 100644
--- a/backend/prompts.py
+++ b/backend/prompts.py
@@ -77,23 +77,60 @@ Return only the full code in tags.
Do not include markdown "```" or "```html" at the start or end.
"""
+IONIC_TAILWIND_SYSTEM_PROMPT = """
+You are an expert Ionic/Tailwind developer
+You take screenshots of a reference web page from the user, and then build single page apps
+using Ionic 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
+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 "" and "" 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 "" 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 Ionic so that it can run on a standalone page:
+
+
+
+- Use this script to include Tailwind:
+- You can use Google Fonts
+- ionicons for icons, add the following
+
+
+
+Return only the full code in tags.
+Do not include markdown "```" or "```html" at the start or end.
+"""
+
USER_PROMPT = """
Generate code for a web page that looks exactly like this.
"""
-def assemble_prompt(image_data_url, output_settings: dict, result_image_data_url=None):
+def assemble_prompt(
+ image_data_url, generated_code_config: str, result_image_data_url=None
+):
# Set the system prompt based on the output settings
- chosen_prompt_name = "tailwind"
system_content = TAILWIND_SYSTEM_PROMPT
- if output_settings["css"] == "bootstrap":
- chosen_prompt_name = "bootstrap"
- system_content = BOOTSTRAP_SYSTEM_PROMPT
- if output_settings["js"] == "react":
- chosen_prompt_name = "react-tailwind"
+ if generated_code_config == "html_tailwind":
+ system_content = TAILWIND_SYSTEM_PROMPT
+ elif generated_code_config == "react_tailwind":
system_content = REACT_TAILWIND_SYSTEM_PROMPT
-
- print("Using system prompt:", chosen_prompt_name)
+ elif generated_code_config == "bootstrap":
+ system_content = BOOTSTRAP_SYSTEM_PROMPT
+ elif generated_code_config == "ionic_tailwind":
+ system_content = IONIC_TAILWIND_SYSTEM_PROMPT
+ else:
+ raise Exception("Code config is not one of available options")
user_content = [
{
diff --git a/backend/test_prompts.py b/backend/test_prompts.py
index 2eaaaf4..5d8cd88 100644
--- a/backend/test_prompts.py
+++ b/backend/test_prompts.py
@@ -79,19 +79,58 @@ Return only the full code in tags.
Do not include markdown "```" or "```html" at the start or end.
"""
+IONIC_TAILWIND_SYSTEM_PROMPT = """
+You are an expert Ionic/Tailwind developer
+You take screenshots of a reference web page from the user, and then build single page apps
+using Ionic 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
+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 "" and "" 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 "" 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 Ionic so that it can run on a standalone page:
+
+
+
+- Use this script to include Tailwind:
+- You can use Google Fonts
+- ionicons for icons, add the following
+
+
+
+Return only the full code in tags.
+Do not include markdown "```" or "```html" at the start or end.
+"""
+
def test_prompts():
tailwind_prompt = assemble_prompt(
- "image_data_url", {"css": "tailwind", "js": "vanilla"}, "result_image_data_url"
+ "image_data_url", "html_tailwind", "result_image_data_url"
)
assert tailwind_prompt[0]["content"] == TAILWIND_SYSTEM_PROMPT
+ react_tailwind_prompt = assemble_prompt(
+ "image_data_url", "react_tailwind", "result_image_data_url"
+ )
+ assert react_tailwind_prompt[0]["content"] == REACT_TAILWIND_SYSTEM_PROMPT
+
bootstrap_prompt = assemble_prompt(
- "image_data_url", {"css": "bootstrap", "js": "vanilla"}, "result_image_data_url"
+ "image_data_url", "bootstrap", "result_image_data_url"
)
assert bootstrap_prompt[0]["content"] == BOOTSTRAP_SYSTEM_PROMPT
- react_tailwind_prompt = assemble_prompt(
- "image_data_url", {"css": "tailwind", "js": "react"}, "result_image_data_url"
+ ionic_tailwind = assemble_prompt(
+ "image_data_url", "ionic_tailwind", "result_image_data_url"
)
- assert react_tailwind_prompt[0]["content"] == REACT_TAILWIND_SYSTEM_PROMPT
+ assert ionic_tailwind[0]["content"] == IONIC_TAILWIND_SYSTEM_PROMPT
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index ed416da..1c7f131 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
import ImageUpload from "./components/ImageUpload";
import CodePreview from "./components/CodePreview";
import Preview from "./components/Preview";
@@ -18,14 +18,7 @@ import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
import SettingsDialog from "./components/SettingsDialog";
-import {
- Settings,
- EditorTheme,
- AppState,
- CSSOption,
- OutputSettings,
- JSFrameworkOption,
-} from "./types";
+import { Settings, EditorTheme, AppState, GeneratedCodeConfig } from "./types";
import { IS_RUNNING_ON_CLOUD } from "./config";
import { PicoBadge } from "./components/PicoBadge";
import { OnboardingNote } from "./components/OnboardingNote";
@@ -51,20 +44,31 @@ function App() {
screenshotOneApiKey: null,
isImageGenerationEnabled: true,
editorTheme: EditorTheme.COBALT,
+ generatedCodeConfig: GeneratedCodeConfig.HTML_TAILWIND,
+ // Only relevant for hosted version
isTermOfServiceAccepted: false,
accessCode: null,
},
"setting"
);
- const [outputSettings, setOutputSettings] = useState({
- css: CSSOption.TAILWIND,
- js: JSFrameworkOption.NO_FRAMEWORK,
- });
+
const [shouldIncludeResultImage, setShouldIncludeResultImage] =
useState(false);
const wsRef = useRef(null);
+ // When the user already has the settings in local storage, newly added keys
+ // do not get added to the settings so if it's falsy, we populate it with the default
+ // value
+ useEffect(() => {
+ if (!settings.generatedCodeConfig) {
+ setSettings((prev) => ({
+ ...prev,
+ generatedCodeConfig: GeneratedCodeConfig.HTML_TAILWIND,
+ }));
+ }
+ }, [settings.generatedCodeConfig, setSettings]);
+
const takeScreenshot = async (): Promise => {
const iframeElement = document.querySelector(
"#preview-desktop"
@@ -114,7 +118,7 @@ function App() {
setAppState(AppState.CODING);
// Merge settings with params
- const updatedParams = { ...params, ...settings, outputSettings };
+ const updatedParams = { ...params, ...settings };
generateCode(
wsRef,
@@ -188,8 +192,13 @@ function App() {
+ setSettings((prev) => ({
+ ...prev,
+ generatedCodeConfig: config,
+ }))
+ }
shouldDisableUpdates={
appState === AppState.CODING || appState === AppState.CODE_READY
}
diff --git a/frontend/src/components/OutputSettingsSection.tsx b/frontend/src/components/OutputSettingsSection.tsx
index cc927a5..69d1b0a 100644
--- a/frontend/src/components/OutputSettingsSection.tsx
+++ b/frontend/src/components/OutputSettingsSection.tsx
@@ -5,195 +5,86 @@ import {
SelectItem,
SelectTrigger,
} from "./ui/select";
-import { CSSOption, JSFrameworkOption, OutputSettings } from "../types";
-import toast from "react-hot-toast";
-import { Label } from "@radix-ui/react-label";
-import { Button } from "./ui/button";
-import { Popover, PopoverTrigger, PopoverContent } from "./ui/popover";
+import { GeneratedCodeConfig } from "../types";
-function displayCSSOption(option: CSSOption) {
- switch (option) {
- case CSSOption.TAILWIND:
- return "Tailwind";
- case CSSOption.BOOTSTRAP:
- return "Bootstrap";
+function generateDisplayComponent(config: GeneratedCodeConfig) {
+ switch (config) {
+ case GeneratedCodeConfig.HTML_TAILWIND:
+ return (
+
+ HTML +{" "}
+ Tailwind
+
+ );
+ case GeneratedCodeConfig.REACT_TAILWIND:
+ return (
+
+ React +{" "}
+ Tailwind
+
+ );
+ case GeneratedCodeConfig.BOOTSTRAP:
+ return (
+
+ Bootstrap
+
+ );
+ case GeneratedCodeConfig.IONIC_TAILWIND:
+ return (
+