Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update onboarding note

Browse Source
This commit is contained in:
Abi Raja 2023-11-26 21:59:44 -05:00 committed by dialmedu
parent 111aec5915
commit 5c75788b4f
1 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/components/OnboardingNote.tsx
View File

@ -1,19 +1,27 @@
export function OnboardingNote() { export function OnboardingNote() {
return ( return (
<div className="flex flex-col space-y-4 bg-slate-500 p-2 rounded text-stone-200"> <div className="flex flex-col space-y-4 bg-green-700 p-2 rounded text-stone-200 text-sm">
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> <span>
This key is only stored in your browser. Never stored on servers. This To use Screenshot to Code, you need an OpenAI API key with GPT4 vision
app is open source. You can{" "} access.{" "}
<a href="https://github.com/abi/screenshot-to-code" className="inline"> <a
check the code to confirm. 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> </a>
</span> </span>
</div> </div>