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" 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")) 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): async def stream_code_test(websocket: WebSocket):
await websocket.accept() await websocket.accept()
result = await websocket.receive_json() params = await websocket.receive_json()
async def process_chunk(content): async def process_chunk(content):
await websocket.send_json({"type": "chunk", "value": content}) await websocket.send_json({"type": "chunk", "value": content})
prompt_messages = assemble_prompt("") prompt_messages = assemble_prompt(params["image"])
completion = await stream_openai_response( completion = await stream_openai_response(
prompt_messages, 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. 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 [ return [
{"role": "system", "content": SYSTEM_PROMPT}, {"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"; import toast from "react-hot-toast";
const WS_BACKEND_URL = import.meta.env.VITE_WS_BACKEND_URL; 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( export function generateCode(
imageUrl: string, imageUrl: string,
@ -31,9 +33,7 @@ export function generateCode(
console.log("Connection closed", event.code, event.reason); console.log("Connection closed", event.code, event.reason);
if (event.code != 1000) { if (event.code != 1000) {
console.error("WebSocket error code", event); console.error("WebSocket error code", event);
toast.error( toast.error(ERROR_MESSAGE);
"We ran into an error. Try again or contact support at support@picoapps.xyz"
);
} else { } else {
onComplete(); onComplete();
} }
@ -41,8 +41,6 @@ export function generateCode(
ws.addEventListener("error", (error) => { ws.addEventListener("error", (error) => {
console.error("WebSocket error", error); console.error("WebSocket error", error);
toast.error( toast.error(ERROR_MESSAGE);
"We ran into an error. Try again or contact support at support@picoapps.xyz"
);
}); });
} }

16
frontend/src/main.tsx
View File

@ -1,10 +1,12 @@
import React from 'react' import React from "react";
import ReactDOM from 'react-dom/client' import ReactDOM from "react-dom/client";
import App from './App.tsx' import App from "./App.tsx";
import './index.css' import "./index.css";
import { Toaster } from "react-hot-toast";
ReactDOM.createRoot(document.getElementById('root')!).render( ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode> <React.StrictMode>
<App /> <App />
</React.StrictMode>, <Toaster />
) </React.StrictMode>
);