diff --git a/backend/llm.py b/backend/llm.py
index a5e8c9a..686b008 100644
--- a/backend/llm.py
+++ b/backend/llm.py
@@ -4,9 +4,6 @@ from openai import AsyncOpenAI
MODEL_GPT_4_VISION = "gpt-4-vision-preview"
-# TODO: Remove after testing
-MODEL_GPT_4_VISION = "gpt-3.5-turbo-1106"
-
client = AsyncOpenAI(api_key=os.environ.get("OPENAI_API_KEY"))
diff --git a/backend/main.py b/backend/main.py
index e03cbc6..60c953f 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -32,12 +32,12 @@ def write_logs(prompt_messages, completion):
async def stream_code_test(websocket: WebSocket):
await websocket.accept()
- result = await websocket.receive_json()
+ params = await websocket.receive_json()
async def process_chunk(content):
await websocket.send_json({"type": "chunk", "value": content})
- prompt_messages = assemble_prompt("")
+ prompt_messages = assemble_prompt(params["image"])
completion = await stream_openai_response(
prompt_messages,
diff --git a/backend/prompts.py b/backend/prompts.py
index 13eaafd..7e48de0 100644
--- a/backend/prompts.py
+++ b/backend/prompts.py
@@ -24,9 +24,25 @@ 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(screenshot_url):
+
+def assemble_prompt(image_data_url):
return [
{"role": "system", "content": SYSTEM_PROMPT},
- {"role": "user", "content": "Build a hello world app"},
+ {
+ "role": "user",
+ "content": [
+ {
+ "type": "image_url",
+ "image_url": {"url": image_data_url, "detail": "high"},
+ },
+ {
+ "type": "text",
+ "text": USER_PROMPT,
+ },
+ ],
+ },
]
diff --git a/frontend/src/generateCode.ts b/frontend/src/generateCode.ts
index eb5bbf4..ddfe5e2 100644
--- a/frontend/src/generateCode.ts
+++ b/frontend/src/generateCode.ts
@@ -1,6 +1,8 @@
import toast from "react-hot-toast";
const WS_BACKEND_URL = import.meta.env.VITE_WS_BACKEND_URL;
+const ERROR_MESSAGE =
+ "Error generating code. Check the Developer Console for details. Feel free to open a Github ticket";
export function generateCode(
imageUrl: string,
@@ -31,9 +33,7 @@ export function generateCode(
console.log("Connection closed", event.code, event.reason);
if (event.code != 1000) {
console.error("WebSocket error code", event);
- toast.error(
- "We ran into an error. Try again or contact support at support@picoapps.xyz"
- );
+ toast.error(ERROR_MESSAGE);
} else {
onComplete();
}
@@ -41,8 +41,6 @@ export function generateCode(
ws.addEventListener("error", (error) => {
console.error("WebSocket error", error);
- toast.error(
- "We ran into an error. Try again or contact support at support@picoapps.xyz"
- );
+ toast.error(ERROR_MESSAGE);
});
}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 3d7150d..6daa7bf 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,10 +1,12 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+import { Toaster } from "react-hot-toast";
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
- ,
-)
+
+
+);