From ac8198e5ba9c29b7ec15e7f612623e9aa8f343ef Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Fri, 17 May 2024 12:30:26 -0400
Subject: [PATCH 1/6] Add field for Anthropic API key in settings

---
 frontend/src/components/SettingsDialog.tsx | 20 ++++++++++++++++++++
 frontend/src/types.ts                      |  1 +
 2 files changed, 21 insertions(+)

diff --git a/frontend/src/components/SettingsDialog.tsx b/frontend/src/components/SettingsDialog.tsx
index 2e7814b..1a9c5a6 100644
--- a/frontend/src/components/SettingsDialog.tsx
+++ b/frontend/src/components/SettingsDialog.tsx
@@ -108,6 +108,26 @@ function SettingsDialog({ settings, setSettings }: Props) {
             </>
           )}
 
+          <Label htmlFor="anthropic-api-key">
+            <div>Anthropic API key</div>
+            <div className="font-light mt-2 leading-relaxed">
+              Only stored in your browser. Never stored on servers. Overrides
+              your .env config.
+            </div>
+          </Label>
+
+          <Input
+            id="anthropic-api-key"
+            placeholder="Anthropic API key"
+            value={settings.anthropicApiKey || ""}
+            onChange={(e) =>
+              setSettings((s) => ({
+                ...s,
+                anthropicApiKey: e.target.value,
+              }))
+            }
+          />
+
           <Accordion type="single" collapsible className="w-full">
             <AccordionItem value="item-1">
               <AccordionTrigger>Screenshot by URL Config</AccordionTrigger>
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index bbabeff..dbe10ad 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -16,6 +16,7 @@ export interface Settings {
   codeGenerationModel: CodeGenerationModel;
   // Only relevant for hosted version
   isTermOfServiceAccepted: boolean;
+  anthropicApiKey: string | null; // Added property for anthropic API key
 }
 
 export enum AppState {

From 1f9c5b2c80a52c285323350581d4cd605bda3097 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Fri, 17 May 2024 14:47:54 -0400
Subject: [PATCH 2/6] set initial value

---
 frontend/src/App.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index fd1576e..c05c44f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -59,6 +59,7 @@ function App() {
     {
       openAiApiKey: null,
       openAiBaseURL: null,
+      anthropicApiKey: null,
       screenshotOneApiKey: null,
       isImageGenerationEnabled: true,
       editorTheme: EditorTheme.COBALT,

From 9d1fbc9b231197cd3c97f264d4f130062973433e Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Thu, 30 May 2024 09:38:15 -0400
Subject: [PATCH 3/6] add zustand and create a dummy app store that isn't used
 yet

---
 frontend/package.json           |  3 ++-
 frontend/src/App.tsx            |  5 ++++-
 frontend/src/store/app-store.ts | 10 ++++++++++
 frontend/yarn.lock              | 12 ++++++++++++
 4 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/store/app-store.ts

diff --git a/frontend/package.json b/frontend/package.json
index 92bebfc..4652dc7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -46,7 +46,8 @@
     "tailwindcss-animate": "^1.0.7",
     "thememirror": "^2.0.1",
     "vite-plugin-checker": "^0.6.2",
-    "webm-duration-fix": "^1.0.4"
+    "webm-duration-fix": "^1.0.4",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@types/jest": "^29.5.12",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index ce68c53..1cb02e1 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -378,7 +378,10 @@ function App() {
         />
       )}
       <div className="lg:fixed lg:inset-y-0 lg:z-40 lg:flex lg:w-96 lg:flex-col">
-        <div className="flex grow flex-col gap-y-2 overflow-y-auto border-r border-gray-200 bg-white px-6 dark:bg-zinc-950 dark:text-white">
+        <div
+          className="flex grow flex-col gap-y-2 overflow-y-auto border-r 
+          border-gray-200 bg-white px-6 dark:bg-zinc-950 dark:text-white"
+        >
           <div className="flex items-center justify-between mt-10 mb-2">
             <h1 className="text-2xl ">Screenshot to Code</h1>
             <SettingsDialog settings={settings} setSettings={setSettings} />
diff --git a/frontend/src/store/app-store.ts b/frontend/src/store/app-store.ts
new file mode 100644
index 0000000..7298c72
--- /dev/null
+++ b/frontend/src/store/app-store.ts
@@ -0,0 +1,10 @@
+import { create } from "zustand";
+
+// Store for app-wide state
+interface AppStore {
+  inputMode: "image" | "video";
+}
+
+export const useStore = create<AppStore>(() => ({
+  inputMode: "image",
+}));
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 7285b73..e1254e8 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -5642,6 +5642,11 @@ use-sidecar@^1.1.2:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
+use-sync-external-store@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
@@ -5937,3 +5942,10 @@ zod@3.22.4:
   version "3.22.4"
   resolved "https://registry.yarnpkg.com/zod/-/zod-3.22.4.tgz#f31c3a9386f61b1f228af56faa9255e845cf3fff"
   integrity sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==
+
+zustand@^4.5.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.5.2.tgz#fddbe7cac1e71d45413b3682cdb47b48034c3848"
+  integrity sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==
+  dependencies:
+    use-sync-external-store "1.2.0"

From 8e579e425ee0bb12baf19186b71ee8a7b840d266 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Fri, 31 May 2024 13:51:43 -0400
Subject: [PATCH 4/6] clean up settings dialog look

---
 frontend/src/components/SettingsDialog.tsx | 84 +++++++++++-----------
 1 file changed, 44 insertions(+), 40 deletions(-)

diff --git a/frontend/src/components/SettingsDialog.tsx b/frontend/src/components/SettingsDialog.tsx
index 1a9c5a6..97d8f38 100644
--- a/frontend/src/components/SettingsDialog.tsx
+++ b/frontend/src/components/SettingsDialog.tsx
@@ -49,7 +49,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
         <div className="flex items-center space-x-2">
           <Label htmlFor="image-generation">
             <div>DALL-E Placeholder Image Generation</div>
-            <div className="font-light mt-2">
+            <div className="font-light mt-2 text-xs">
               More fun with it but if you want to save money, turn it off.
             </div>
           </Label>
@@ -64,29 +64,31 @@ function SettingsDialog({ settings, setSettings }: Props) {
             }
           />
         </div>
-        <div className="flex flex-col space-y-4">
-          <Label htmlFor="openai-api-key">
-            <div>OpenAI API key</div>
-            <div className="font-light mt-2 leading-relaxed">
-              Only stored in your browser. Never stored on servers. Overrides
-              your .env config.
-            </div>
-          </Label>
+        <div className="flex flex-col space-y-6">
+          <div>
+            <Label htmlFor="openai-api-key">
+              <div>OpenAI API key</div>
+              <div className="font-light mt-1 mb-2 text-xs leading-relaxed">
+                Only stored in your browser. Never stored on servers. Overrides
+                your .env config.
+              </div>
+            </Label>
 
-          <Input
-            id="openai-api-key"
-            placeholder="OpenAI API key"
-            value={settings.openAiApiKey || ""}
-            onChange={(e) =>
-              setSettings((s) => ({
-                ...s,
-                openAiApiKey: e.target.value,
-              }))
-            }
-          />
+            <Input
+              id="openai-api-key"
+              placeholder="OpenAI API key"
+              value={settings.openAiApiKey || ""}
+              onChange={(e) =>
+                setSettings((s) => ({
+                  ...s,
+                  openAiApiKey: e.target.value,
+                }))
+              }
+            />
+          </div>
 
           {!IS_RUNNING_ON_CLOUD && (
-            <>
+            <div>
               <Label htmlFor="openai-api-key">
                 <div>OpenAI Base URL (optional)</div>
                 <div className="font-light mt-2 leading-relaxed">
@@ -105,28 +107,30 @@ function SettingsDialog({ settings, setSettings }: Props) {
                   }))
                 }
               />
-            </>
+            </div>
           )}
 
-          <Label htmlFor="anthropic-api-key">
-            <div>Anthropic API key</div>
-            <div className="font-light mt-2 leading-relaxed">
-              Only stored in your browser. Never stored on servers. Overrides
-              your .env config.
-            </div>
-          </Label>
+          <div>
+            <Label htmlFor="anthropic-api-key">
+              <div>Anthropic API key</div>
+              <div className="font-light mt-1 text-xs leading-relaxed">
+                Only stored in your browser. Never stored on servers. Overrides
+                your .env config.
+              </div>
+            </Label>
 
-          <Input
-            id="anthropic-api-key"
-            placeholder="Anthropic API key"
-            value={settings.anthropicApiKey || ""}
-            onChange={(e) =>
-              setSettings((s) => ({
-                ...s,
-                anthropicApiKey: e.target.value,
-              }))
-            }
-          />
+            <Input
+              id="anthropic-api-key"
+              placeholder="Anthropic API key"
+              value={settings.anthropicApiKey || ""}
+              onChange={(e) =>
+                setSettings((s) => ({
+                  ...s,
+                  anthropicApiKey: e.target.value,
+                }))
+              }
+            />
+          </div>
 
           <Accordion type="single" collapsible className="w-full">
             <AccordionItem value="item-1">

From c64968b8f09e534224f69b31463bd197e9a8808e Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Fri, 31 May 2024 14:06:08 -0400
Subject: [PATCH 5/6] read anthropic api key from front-end

---
 backend/routes/generate_code.py | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/backend/routes/generate_code.py b/backend/routes/generate_code.py
index e7186fc..61ce9c9 100644
--- a/backend/routes/generate_code.py
+++ b/backend/routes/generate_code.py
@@ -120,6 +120,17 @@ async def stream_code(websocket: WebSocket):
         )
         return
 
+    # Get the Anthropic API key from the request. Fall back to environment variable if not provided.
+    # If neither is provided, we throw an error later only if Claude is used.
+    anthropic_api_key = None
+    if params["anthropicApiKey"]:
+        anthropic_api_key = params["anthropicApiKey"]
+        print("Using Anthropic API key from client-side settings dialog")
+    else:
+        anthropic_api_key = ANTHROPIC_API_KEY
+        if anthropic_api_key:
+            print("Using Anthropic API key from environment variable")
+
     # Get the OpenAI Base URL from the request. Fall back to environment variable if not provided.
     openai_base_url = None
     # Disable user-specified OpenAI Base URL in prod
@@ -219,31 +230,31 @@ async def stream_code(websocket: WebSocket):
     else:
         try:
             if validated_input_mode == "video":
-                if not ANTHROPIC_API_KEY:
+                if not anthropic_api_key:
                     await throw_error(
-                        "Video only works with Anthropic models. No Anthropic API key found. Please add the environment variable ANTHROPIC_API_KEY to backend/.env"
+                        "Video only works with Anthropic models. No Anthropic API key found. Please add the environment variable ANTHROPIC_API_KEY to backend/.env or in the settings dialog"
                     )
                     raise Exception("No Anthropic key")
 
                 completion = await stream_claude_response_native(
                     system_prompt=VIDEO_PROMPT,
                     messages=prompt_messages,  # type: ignore
-                    api_key=ANTHROPIC_API_KEY,
+                    api_key=anthropic_api_key,
                     callback=lambda x: process_chunk(x),
                     model=Llm.CLAUDE_3_OPUS,
                     include_thinking=True,
                 )
                 exact_llm_version = Llm.CLAUDE_3_OPUS
             elif code_generation_model == Llm.CLAUDE_3_SONNET:
-                if not ANTHROPIC_API_KEY:
+                if not anthropic_api_key:
                     await throw_error(
-                        "No Anthropic API key found. Please add the environment variable ANTHROPIC_API_KEY to backend/.env"
+                        "No Anthropic API key found. Please add the environment variable ANTHROPIC_API_KEY to backend/.env or in the settings dialog"
                     )
                     raise Exception("No Anthropic key")
 
                 completion = await stream_claude_response(
                     prompt_messages,  # type: ignore
-                    api_key=ANTHROPIC_API_KEY,
+                    api_key=anthropic_api_key,
                     callback=lambda x: process_chunk(x),
                 )
                 exact_llm_version = code_generation_model

From f6f8b2f7075cdb97915f491c351167e6572d2e8e Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Fri, 31 May 2024 14:24:01 -0400
Subject: [PATCH 6/6] fix bug

---
 backend/routes/generate_code.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/routes/generate_code.py b/backend/routes/generate_code.py
index 61ce9c9..3fb92f1 100644
--- a/backend/routes/generate_code.py
+++ b/backend/routes/generate_code.py
@@ -123,7 +123,7 @@ async def stream_code(websocket: WebSocket):
     # Get the Anthropic API key from the request. Fall back to environment variable if not provided.
     # If neither is provided, we throw an error later only if Claude is used.
     anthropic_api_key = None
-    if params["anthropicApiKey"]:
+    if "anthropicApiKey" in params and params["anthropicApiKey"]:
         anthropic_api_key = params["anthropicApiKey"]
         print("Using Anthropic API key from client-side settings dialog")
     else: