From 7b17e4bace10c63491457ccdac432d105d2697ae Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Mon, 25 Mar 2024 15:13:16 -0400
Subject: [PATCH 1/5] Delete blog/video-to-app.md

---
 blog/video-to-app.md | 18 ------------------
 1 file changed, 18 deletions(-)
 delete mode 100644 blog/video-to-app.md

diff --git a/blog/video-to-app.md b/blog/video-to-app.md
deleted file mode 100644
index 3561f6d..0000000
--- a/blog/video-to-app.md
+++ /dev/null
@@ -1,18 +0,0 @@
-
-## Capture a screen recording of a web site in action and have the AI build it for you.
-
-* Unlike screenshots, the app will not visually look exactly like the screen recording but it will be functional
-* IMPORTANT: This is very experimental and each call is expensive (a few dollars). I would recommend setting up usage limits on your Anthropic account to avoid excess charges.
-
-## Setup
-
-This uses Claude 3 by Anthropic. Add an env var ANTHROPIC_API_KEY to backend/.env with your API key from Anthropic.
-
-
-## Examples
-
-https://github.com/abi/screenshot-to-code/assets/23818/fe236c1e-ab92-4d84-b63d-e73e5be9a726
-
-## Tips for taking videos
-
-* We extract frames from your video so linger over each feature for a second or two.

From 11cebfad6d4b6f3247cde407c0a132dfd58d8c7c Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Sat, 30 Mar 2024 18:41:15 -0400
Subject: [PATCH 2/5] Update Troubleshooting.md

---
 Troubleshooting.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/Troubleshooting.md b/Troubleshooting.md
index ac6fe11..3891db3 100644
--- a/Troubleshooting.md
+++ b/Troubleshooting.md
@@ -13,6 +13,9 @@ You don't need a ChatGPT Pro account. Screenshot to code uses API keys from your
 
 6. Go to Screenshot to code and paste it in the Settings dialog under OpenAI key (gear icon). Your key is only stored in your browser. Never stored on our servers.
 
-Some users have also reported that it can take upto 30 minutes after your credit purchase for the GPT4 vision model to be activated.
+## Still not working?
 
-If you've followed these steps, and it still doesn't work, feel free to open a Github issue.
+- Some users have also reported that it can take upto 30 minutes after your credit purchase for the GPT4 vision model to be activated.
+- You need to add credits to your account AND set it to renew when credits run out in order to be upgraded to Tier 1. Make sure your "Settings > Limits" page shows that you are at Tier 1.
+
+If you've followed these steps, and it still doesn't work, feel free to open a Github issue. We only provide support for the open source version since we don't have debugging logs on the hosted version. If you're looking to use the hosted version, we recommend getting a paid subscription on screenshottocode.com

From 5b6d1c4421785fc1af258a311a54fac81307d72f Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Thu, 4 Apr 2024 12:18:41 -0400
Subject: [PATCH 3/5] Update README.md

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 42ac2aa..3e5fc7f 100644
--- a/README.md
+++ b/README.md
@@ -84,6 +84,7 @@ The app will be up and running at http://localhost:5173. Note that you can't dev
 - **How do I get an OpenAI API key?** See https://github.com/abi/screenshot-to-code/blob/main/Troubleshooting.md
 - **How can I configure an OpenAI proxy?** - you can configure the OpenAI base URL if you need to use a proxy: Set OPENAI_BASE_URL in the `backend/.env` or directly in the UI in the settings dialog
 - **How can I update the backend host that my front-end connects to?** - Configure VITE_HTTP_BACKEND_URL and VITE_WS_BACKEND_URL in front/.env.local For example, set VITE_HTTP_BACKEND_URL=http://124.10.20.1:7001
+- **Seeing UTF-8 errors when running the backend?** - On windows, open the .env file with notepad++, then go to Encoding and select UTF-8. 
 - **How can I provide feedback?** For feedback, feature requests and bug reports, open an issue or ping me on [Twitter](https://twitter.com/_abi_).
 
 ## 📚 Examples

From 58a929731f936da69c2f4a1fd24b54f1ef566b8e Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Thu, 4 Apr 2024 15:38:25 -0400
Subject: [PATCH 4/5] update wording to make it more obvious

---
 frontend/src/components/ModelSettingsSection.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ModelSettingsSection.tsx b/frontend/src/components/ModelSettingsSection.tsx
index a105e63..4a4e7b9 100644
--- a/frontend/src/components/ModelSettingsSection.tsx
+++ b/frontend/src/components/ModelSettingsSection.tsx
@@ -25,7 +25,7 @@ function ModelSettingsSection({
   return (
     <div className="flex flex-col gap-y-2 justify-between text-sm">
       <div className="grid grid-cols-3 items-center gap-4">
-        <span>Model:</span>
+        <span>AI Model:</span>
         <Select
           value={codeGenerationModel}
           onValueChange={(value: string) =>

From 64cdc74186c59fa0d5515f6320bb11018ec39e28 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Thu, 4 Apr 2024 15:50:33 -0400
Subject: [PATCH 5/5] add a regenerate button to retry an iteration

---
 frontend/src/App.tsx                     | 94 ++++++++++++++++--------
 frontend/src/components/core/TipLink.tsx | 16 ++++
 2 files changed, 78 insertions(+), 32 deletions(-)
 create mode 100644 frontend/src/components/core/TipLink.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 3b8f7da..5a51bc6 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -39,7 +39,7 @@ import { CodeGenerationModel } from "./lib/models";
 import ModelSettingsSection from "./components/ModelSettingsSection";
 import { extractHtml } from "./components/preview/extractHtml";
 import useBrowserTabIndicator from "./hooks/useBrowserTabIndicator";
-import { URLS } from "./urls";
+import TipLink from "./components/core/TipLink";
 
 const IS_OPENAI_DOWN = false;
 
@@ -142,6 +142,25 @@ function App() {
     setShouldIncludeResultImage(false);
   };
 
+  const regenerate = () => {
+    if (currentVersion === null) {
+      toast.error(
+        "No current version set. Please open a Github issue as this shouldn't happen."
+      );
+      return;
+    }
+
+    // Retrieve the previous command
+    const previousCommand = appHistory[currentVersion];
+    if (previousCommand.type !== "ai_create") {
+      toast.error("Only the first version can be regenerated.");
+      return;
+    }
+
+    // Re-run the create
+    doCreate(referenceImages, inputMode);
+  };
+
   const cancelCodeGeneration = () => {
     wsRef.current?.close?.(USER_CLOSE_WEB_SOCKET_CODE);
     // make sure stop can correct the state even if the websocket is already closed
@@ -373,14 +392,7 @@ function App() {
             }
           />
 
-          <a
-            className="text-xs underline text-gray-500 text-right"
-            href={URLS.tips}
-            target="_blank"
-            rel="noopener"
-          >
-            Tips for better results
-          </a>
+          {appState !== AppState.CODE_READY && <TipLink />}
 
           {IS_RUNNING_ON_CLOUD &&
             !(settings.openAiApiKey || settings.accessCode) && (
@@ -454,21 +466,17 @@ function App() {
                       Update
                     </Button>
                   </div>
-                  <div className="flex items-center gap-x-2 mt-2">
+                  <div className="flex items-center justify-end gap-x-2 mt-2">
                     <Button
-                      onClick={downloadCode}
+                      onClick={regenerate}
                       className="flex items-center gap-x-2 dark:text-white dark:bg-gray-700"
                     >
-                      <FaDownload /> Download
-                    </Button>
-                    <Button
-                      onClick={reset}
-                      className="flex items-center gap-x-2 dark:text-white dark:bg-gray-700"
-                    >
-                      <FaUndo />
-                      Reset
+                      🔄 Regenerate
                     </Button>
                   </div>
+                  <div className="flex justify-end items-center mt-2">
+                    <TipLink />
+                  </div>
                 </div>
               )}
 
@@ -556,19 +564,41 @@ function App() {
         {(appState === AppState.CODING || appState === AppState.CODE_READY) && (
           <div className="ml-4">
             <Tabs defaultValue="desktop">
-              <div className="flex justify-end mr-8 mb-4">
-                <TabsList>
-                  <TabsTrigger value="desktop" className="flex gap-x-2">
-                    <FaDesktop /> Desktop
-                  </TabsTrigger>
-                  <TabsTrigger value="mobile" className="flex gap-x-2">
-                    <FaMobile /> Mobile
-                  </TabsTrigger>
-                  <TabsTrigger value="code" className="flex gap-x-2">
-                    <FaCode />
-                    Code
-                  </TabsTrigger>
-                </TabsList>
+              <div className="flex justify-between mr-8 mb-4">
+                <div className="flex items-center gap-x-2">
+                  {appState === AppState.CODE_READY && (
+                    <>
+                      <Button
+                        onClick={reset}
+                        className="flex items-center ml-4 gap-x-2 dark:text-white dark:bg-gray-700"
+                      >
+                        <FaUndo />
+                        Reset
+                      </Button>
+                      <Button
+                        onClick={downloadCode}
+                        variant="secondary"
+                        className="flex items-center gap-x-2 mr-4 dark:text-white dark:bg-gray-700"
+                      >
+                        <FaDownload /> Download
+                      </Button>
+                    </>
+                  )}
+                </div>
+                <div className="flex items-center">
+                  <TabsList>
+                    <TabsTrigger value="desktop" className="flex gap-x-2">
+                      <FaDesktop /> Desktop
+                    </TabsTrigger>
+                    <TabsTrigger value="mobile" className="flex gap-x-2">
+                      <FaMobile /> Mobile
+                    </TabsTrigger>
+                    <TabsTrigger value="code" className="flex gap-x-2">
+                      <FaCode />
+                      Code
+                    </TabsTrigger>
+                  </TabsList>
+                </div>
               </div>
               <TabsContent value="desktop">
                 <Preview code={previewCode} device="desktop" />
diff --git a/frontend/src/components/core/TipLink.tsx b/frontend/src/components/core/TipLink.tsx
new file mode 100644
index 0000000..b54f83c
--- /dev/null
+++ b/frontend/src/components/core/TipLink.tsx
@@ -0,0 +1,16 @@
+import { URLS } from "../../urls";
+
+function TipLink() {
+  return (
+    <a
+      className="text-xs underline text-gray-500 text-right"
+      href={URLS.tips}
+      target="_blank"
+      rel="noopener"
+    >
+      Tips for better results
+    </a>
+  );
+}
+
+export default TipLink;