forward generations to saas backend on the hosted version

backend/routes/generate_code.py

@@ -12,6 +12,7 @@ from prompts import assemble_imported_code_prompt, assemble_prompt
 from access_token import validate_access_token
 from datetime import datetime
 import json
+from routes.logging_utils import send_to_saas_backend
 
 from utils import pprint_prompt  # type: ignore
 
@@ -234,6 +235,13 @@ async def stream_code(websocket: WebSocket):
     # Write the messages dict into a log so that we can debug later
     write_logs(prompt_messages, completion)
 
+    if IS_PROD:
+        # Catch any errors from sending to SaaS backend and continue
+        try:
+            await send_to_saas_backend(prompt_messages, completion, params["authToken"])
+        except Exception as e:
+            print("Error sending to SaaS backend", e)
+
     try:
         if should_generate_images:
             await websocket.send_json(

backend/routes/logging_utils.py

@@ -0,0 +1,33 @@
+import httpx
+from openai.types.chat import ChatCompletionMessageParam
+from typing import List
+import json
+
+from config import IS_PROD
+
+
+async def send_to_saas_backend(
+    prompt_messages: List[ChatCompletionMessageParam],
+    completion: str,
+    auth_token: str | None = None,
+):
+    if IS_PROD:
+        async with httpx.AsyncClient() as client:
+            url = "https://screenshot-to-code-saas.onrender.com/generations/store"
+            # url = "http://localhost:8001/generations/store"
+
+            data = json.dumps(
+                {
+                    "prompt": json.dumps(prompt_messages),
+                    "completion": completion,
+                }
+            )
+
+            headers = {
+                "Content-Type": "application/json",
+                "Authorization": f"Bearer {auth_token}",  # Add the auth token to the headers
+            }
+
+            response = await client.post(url, content=data, headers=headers)
+            response_data = response.json()
+            return response_data

frontend/src/App.tsx

@@ -12,7 +12,6 @@ import {
   FaMobile,
   FaUndo,
 } from "react-icons/fa";
-
 import { Switch } from "./components/ui/switch";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
@@ -41,6 +40,7 @@ import HistoryDisplay from "./components/history/HistoryDisplay";
 import { extractHistoryTree } from "./components/history/utils";
 import toast from "react-hot-toast";
 import ImportCodeSection from "./components/ImportCodeSection";
+import { useAuth } from "@clerk/clerk-react";
 
 const IS_OPENAI_DOWN = false;
 
@@ -57,6 +57,9 @@ function App({ navbarComponent }: Props) {
   const [updateInstruction, setUpdateInstruction] = useState("");
   const [isImportedFromCode, setIsImportedFromCode] = useState<boolean>(false);
 
+  // TODO: Move to AppContainer
+  const { getToken } = useAuth();
+
   // Settings
   const [settings, setSettings] = usePersistedState<Settings>(
     {
@@ -156,7 +159,7 @@ function App({ navbarComponent }: Props) {
     }
   };
 
-  function doGenerateCode(
+  async function doGenerateCode(
     params: CodeGenerationParams,
     parentVersion: number | null
   ) {
@@ -164,7 +167,12 @@ function App({ navbarComponent }: Props) {
     setAppState(AppState.CODING);
 
     // Merge settings with params
-    const updatedParams = { ...params, ...settings };
+    const authToken = await getToken();
+    const updatedParams = {
+      ...params,
+      ...settings,
+      authToken: authToken || undefined,
+    };
 
     generateCode(
       wsRef,
@@ -223,13 +231,13 @@ function App({ navbarComponent }: Props) {
   }
 
   // Initial version creation
-  function doCreate(referenceImages: string[]) {
+  async function doCreate(referenceImages: string[]) {
     // Reset any existing state
     reset();
 
     setReferenceImages(referenceImages);
     if (referenceImages.length > 0) {
-      doGenerateCode(
+      await doGenerateCode(
         {
           generationType: "create",
           image: referenceImages[0],
@@ -264,7 +272,7 @@ function App({ navbarComponent }: Props) {
 
     if (shouldIncludeResultImage) {
       const resultImage = await takeScreenshot();
-      doGenerateCode(
+      await doGenerateCode(
         {
           generationType: "update",
           image: referenceImages[0],
@@ -275,7 +283,7 @@ function App({ navbarComponent }: Props) {
         currentVersion
       );
     } else {
-      doGenerateCode(
+      await doGenerateCode(
         {
           generationType: "update",
           image: referenceImages[0],

frontend/src/types.ts

@@ -36,6 +36,7 @@ export interface CodeGenerationParams {
   resultImage?: string;
   history?: string[];
   isImportedFromCode?: boolean;
+  authToken?: string;
 }
 
 export type FullGenerationSettings = CodeGenerationParams & Settings;