From 4ef26a6ae87bcf29a3ef5a9e543aed58f1a7dc65 Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Fri, 5 Apr 2024 14:38:05 -0400 Subject: [PATCH 1/3] Update README.md --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 3e5fc7f..a56c528 100644 --- a/README.md +++ b/README.md @@ -29,9 +29,9 @@ We also just added experimental support for taking a video/screen recording of a [Follow me on Twitter for updates](https://twitter.com/_abi_). -## 🚀 Try It Out! +## 🚀 Try It Out without no install -🆕 [Try it live on the hosted version](https://screenshottocode.com) (bring your own OpenAI key - **your key must have access to GPT-4 Vision. See [FAQ](#%EF%B8%8F-faqs) section below for details**). Or see [Getting Started](#-getting-started) below for local install instructions. +[Try it live on the hosted version (paid)](https://screenshottocode.com). ## 🛠 Getting Started @@ -105,6 +105,6 @@ https://github.com/abi/screenshot-to-code/assets/23818/3fec0f77-44e8-4fb3-a769-a ## 🌍 Hosted Version -🆕 [Try it here](https://screenshottocode.com) (bring your own OpenAI key - **your key must have access to GPT-4 Vision. See [FAQ](#%EF%B8%8F-faqs) section for details**). Or see [Getting Started](#-getting-started) for local install instructions. +🆕 [Try it here (paid)](https://screenshottocode.com). Or see [Getting Started](#-getting-started) for local install instructions to use with your own API keys. [!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/abiraja) From 29cea327cc4d16b09919cd9335f089b9a62d6883 Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Wed, 10 Apr 2024 13:20:42 -0400 Subject: [PATCH 2/3] improve error UX (particular when no OpenAI API key is found) --- backend/routes/generate_code.py | 12 +++++------- backend/ws/__init__.py | 0 backend/ws/constants.py | 2 ++ frontend/src/generateCode.ts | 2 +- 4 files changed, 8 insertions(+), 8 deletions(-) create mode 100644 backend/ws/__init__.py create mode 100644 backend/ws/constants.py diff --git a/backend/routes/generate_code.py b/backend/routes/generate_code.py index d9ea660..259983f 100644 --- a/backend/routes/generate_code.py +++ b/backend/routes/generate_code.py @@ -23,7 +23,8 @@ from prompts.claude_prompts import VIDEO_PROMPT from prompts.types import Stack # from utils import pprint_prompt -from video.utils import extract_tag_content, assemble_claude_prompt_video # type: ignore +from video.utils import extract_tag_content, assemble_claude_prompt_video +from ws.constants import APP_ERROR_WEB_SOCKET_CODE # type: ignore router = APIRouter() @@ -58,7 +59,7 @@ async def stream_code(websocket: WebSocket): message: str, ): await websocket.send_json({"type": "error", "value": message}) - await websocket.close() + await websocket.close(APP_ERROR_WEB_SOCKET_CODE) # TODO: Are the values always strings? params: Dict[str, str] = await websocket.receive_json() @@ -121,11 +122,8 @@ async def stream_code(websocket: WebSocket): if not openai_api_key and code_generation_model == "gpt_4_vision": print("OpenAI API key not found") - await websocket.send_json( - { - "type": "error", - "value": "No OpenAI API key found. Please add your API key in the settings dialog or add it to backend/.env file. If you add it to .env, make sure to restart the backend server.", - } + await throw_error( + "No OpenAI API key found. Please add your API key in the settings dialog or add it to backend/.env file. If you add it to .env, make sure to restart the backend server." ) return diff --git a/backend/ws/__init__.py b/backend/ws/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/backend/ws/constants.py b/backend/ws/constants.py new file mode 100644 index 0000000..e992ecb --- /dev/null +++ b/backend/ws/constants.py @@ -0,0 +1,2 @@ +# WebSocket protocol (RFC 6455) allows for the use of custom close codes in the range 4000-4999 +APP_ERROR_WEB_SOCKET_CODE = 4332 diff --git a/frontend/src/generateCode.ts b/frontend/src/generateCode.ts index 55523c4..fc408bc 100644 --- a/frontend/src/generateCode.ts +++ b/frontend/src/generateCode.ts @@ -48,7 +48,7 @@ export function generateCode( onCancel(); } else if (event.code !== 1000) { console.error("WebSocket error code", event); - toast.error(ERROR_MESSAGE); + onCancel(); } else { onComplete(); } From 483d1e2209ad61a1a077601ff9e94d5fc4ae2418 Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Wed, 10 Apr 2024 13:37:44 -0400 Subject: [PATCH 3/3] handle unknown server error by showing an error message to the user --- frontend/src/constants.ts | 2 ++ frontend/src/generateCode.ts | 11 +++++++++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/frontend/src/constants.ts b/frontend/src/constants.ts index a5da189..1cc9373 100644 --- a/frontend/src/constants.ts +++ b/frontend/src/constants.ts @@ -1 +1,3 @@ +// WebSocket protocol (RFC 6455) allows for the use of custom close codes in the range 4000-4999 +export const APP_ERROR_WEB_SOCKET_CODE = 4332; export const USER_CLOSE_WEB_SOCKET_CODE = 4333; diff --git a/frontend/src/generateCode.ts b/frontend/src/generateCode.ts index fc408bc..7fc34e7 100644 --- a/frontend/src/generateCode.ts +++ b/frontend/src/generateCode.ts @@ -1,6 +1,9 @@ import toast from "react-hot-toast"; import { WS_BACKEND_URL } from "./config"; -import { USER_CLOSE_WEB_SOCKET_CODE } from "./constants"; +import { + APP_ERROR_WEB_SOCKET_CODE, + USER_CLOSE_WEB_SOCKET_CODE, +} from "./constants"; import { FullGenerationSettings } from "./types"; const ERROR_MESSAGE = @@ -46,8 +49,12 @@ export function generateCode( if (event.code === USER_CLOSE_WEB_SOCKET_CODE) { toast.success(CANCEL_MESSAGE); onCancel(); + } else if (event.code === APP_ERROR_WEB_SOCKET_CODE) { + console.error("Known server error", event); + onCancel(); } else if (event.code !== 1000) { - console.error("WebSocket error code", event); + console.error("Unknown server or connection error", event); + toast.error(ERROR_MESSAGE); onCancel(); } else { onComplete();