Merge branch 'main' into hosted

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)

backend/routes/generate_code.py

@@ -25,7 +25,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()
@@ -60,7 +61,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()
@@ -158,7 +159,7 @@ 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 throw_error(
-            "No OpenAI API key found. Please add your API key in the settings dialog or add it to backend/.env file."
+            "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."
         )
         raise Exception("No OpenAI API key found")
 

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

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;

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,9 +49,13 @@ 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();
     }