Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix toasts, error capture and get end to end working

Browse Source
This commit is contained in:
Abi Raja 2023-11-14 15:41:04 -05:00
parent 3f4cf2895e
commit 593eb5ba63
5 changed files with 33 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
backend/llm.py
View File

@ -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"))

4
backend/main.py
View File

@ -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,

20
backend/prompts.py
View File

@ -24,9 +24,25 @@ Return only the full code in <html></html> 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,
},
],
},
]

10
frontend/src/generateCode.ts
View File

@ -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);
});
}

16
frontend/src/main.tsx
View File

@ -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(
<React.StrictMode>
<App />
</React.StrictMode>,
)
<Toaster />
</React.StrictMode>
);