From fb4dc08b4e7414ac6f6194de4af63305c0c27505 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Sun, 26 Nov 2023 21:59:44 -0500
Subject: [PATCH] update onboarding note

---
 frontend/src/components/OnboardingNote.tsx | 34 +++++++++++++---------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/OnboardingNote.tsx b/frontend/src/components/OnboardingNote.tsx
index 8cc6f11..cfb9e5f 100644
--- a/frontend/src/components/OnboardingNote.tsx
+++ b/frontend/src/components/OnboardingNote.tsx
@@ -1,19 +1,27 @@
 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 />
+    <div className="flex flex-col space-y-4 bg-green-700 p-2 rounded text-stone-200 text-sm">
       <span>
-        This key is only stored in your browser. Never stored on servers. This
-        app is open source. You can{" "}
-        <a href="https://github.com/abi/screenshot-to-code" className="inline">
-          check the code to confirm.
+        To use Screenshot to Code, you need an OpenAI API key with GPT4 vision
+        access.{" "}
+        <a
+          href="https://github.com/abi/screenshot-to-code/blob/main/Troubleshooting.md"
+          className="inline underline hover:opacity-70"
+          target="_blank"
+        >
+          Follow these instructions to get yourself a key.
+        </a>{" "}
+        Then, paste it in the Settings dialog (gear icon above).
+      </span>
+      <span>
+        Your key is only stored in your browser. Never stored on our servers. If
+        you prefer, you can als run this app completely locally.{" "}
+        <a
+          href="https://github.com/abi/screenshot-to-code"
+          className="inline underline hover:opacity-70"
+          target="_blank"
+        >
+          See the Github project for instructions.
         </a>
       </span>
     </div>