Merge branch 'main' into pr/19

frontend/src/App.tsx

@@ -18,6 +18,9 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
 import CodeMirror from "./components/CodeMirror";
 import SettingsDialog from "./components/SettingsDialog";
 import { Settings } from "./types";
+import { IS_RUNNING_ON_CLOUD } from "./config";
+import { PicoBadge } from "./components/PicoBadge";
+import { OnboardingNote } from "./components/OnboardingNote";
 
 function App() {
   const [appState, setAppState] = useState<"INITIAL" | "CODING" | "CODE_READY">(
@@ -102,6 +105,8 @@ function App() {
 
   return (
     <div className="mt-2">
+      {IS_RUNNING_ON_CLOUD && <PicoBadge />}
+
       <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 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">
           <div className="flex items-center justify-between mt-10">
@@ -114,6 +119,8 @@ function App() {
             </h2>
           )}
 
+          {IS_RUNNING_ON_CLOUD && !settings.openAiApiKey && <OnboardingNote />}
+
           {(appState === "CODING" || appState === "CODE_READY") && (
             <>
               {/* Show code preview only when coding */}

frontend/src/components/OnboardingNote.tsx

@@ -0,0 +1,20 @@
+export function OnboardingNote() {
+  return (
+    <div className="flex flex-col space-y-4 bg-slate-500 p-2 rounded text-stone-200">
+      Please add your OpenAI API key (must have GPT4 vision access) in the
+      settings dialog (gear icon above).
+      <br />
+      <br />
+      How do you get an OpenAI API key that has the GPT4 Vision model available?
+      Create an OpenAI account. And then, you need to buy at least $1 worth of
+      credit on the Billing dashboard.
+      <br />
+      <span>
+        This key is never stored. This app is open source. You can{" "}
+        <a href="https://github.com/abi/screenshot-to-code" className="inline">
+          check the code to confirm.
+        </a>
+      </span>
+    </div>
+  );
+}

frontend/src/components/PicoBadge.tsx

@@ -0,0 +1,12 @@
+export function PicoBadge() {
+  return (
+    <a href="https://picoapps.xyz?ref=screenshot-to-code" target="_blank">
+      <div
+        className="fixed z-50 bottom-5 right-5 rounded-md shadow bg-black
+         text-white px-4 text-xs py-3 cursor-pointer"
+      >
+        an open source project by Pico
+      </div>
+    </a>
+  );
+}

frontend/src/config.ts

@@ -0,0 +1,3 @@
+// Default to false if set to anything other than "true" or unset
+export const IS_RUNNING_ON_CLOUD =
+  import.meta.env.VITE_IS_DEPLOYED === "true" || false;