From 593eb5ba63ed8cacde3bfe8b3b068a79f02accc0 Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Tue, 14 Nov 2023 15:41:04 -0500 Subject: [PATCH] fix toasts, error capture and get end to end working --- backend/llm.py | 3 --- backend/main.py | 4 ++-- backend/prompts.py | 20 ++++++++++++++++++-- frontend/src/generateCode.ts | 10 ++++------ frontend/src/main.tsx | 16 +++++++++------- 5 files changed, 33 insertions(+), 20 deletions(-) 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( - , -) + + +);