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

disable various irrelevant settings on prod

Browse Source
This commit is contained in:
Abi Raja 2024-09-16 14:56:13 +02:00
parent a03e823ecb
commit 3a51e83ee9
1 changed files with 93 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

177
frontend/src/components/settings/SettingsDialog.tsx
View File

@ -46,46 +46,51 @@ function SettingsDialog({ settings, setSettings }: Props) {
<DialogTitle className="mb-4">Settings</DialogTitle> <DialogTitle className="mb-4">Settings</DialogTitle>
</DialogHeader> </DialogHeader>
<div className="flex items-center space-x-2"> {!IS_RUNNING_ON_CLOUD && (
<Label htmlFor="image-generation"> <div className="flex items-center space-x-2">
<div>DALL-E Placeholder Image Generation</div> <Label htmlFor="image-generation">
<div className="font-light mt-2 text-xs"> <div>DALL-E Placeholder Image Generation</div>
More fun with it but if you want to save money, turn it off. <div className="font-light mt-2 text-xs">
</div> More fun with it but if you want to save money, turn it off.
</Label>
<Switch
id="image-generation"
checked={settings.isImageGenerationEnabled}
onCheckedChange={() =>
setSettings((s) => ({
...s,
isImageGenerationEnabled: !s.isImageGenerationEnabled,
}))
}
/>
</div>
<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> </div>
</Label> </Label>
<Switch
<Input id="image-generation"
id="openai-api-key" checked={settings.isImageGenerationEnabled}
placeholder="OpenAI API key" onCheckedChange={() =>
value={settings.openAiApiKey || ""}
onChange={(e) =>
setSettings((s) => ({ setSettings((s) => ({
...s, ...s,
openAiApiKey: e.target.value, isImageGenerationEnabled: !s.isImageGenerationEnabled,
})) }))
} }
/> />
</div> </div>
)}
<div className="flex flex-col space-y-6">
{!IS_RUNNING_ON_CLOUD && (
<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,
}))
}
/>
</div>
)}
{!IS_RUNNING_ON_CLOUD && ( {!IS_RUNNING_ON_CLOUD && (
<div> <div>
@ -110,61 +115,65 @@ function SettingsDialog({ settings, setSettings }: Props) {
</div> </div>
)} )}
<div> {!IS_RUNNING_ON_CLOUD && (
<Label htmlFor="anthropic-api-key"> <div>
<div>Anthropic API key</div> <Label htmlFor="anthropic-api-key">
<div className="font-light mt-1 text-xs leading-relaxed"> <div>Anthropic API key</div>
Only stored in your browser. Never stored on servers. Overrides <div className="font-light mt-1 text-xs leading-relaxed">
your .env config. Only stored in your browser. Never stored on servers.
</div> Overrides your .env config.
</Label> </div>
</Label>
<Input <Input
id="anthropic-api-key" id="anthropic-api-key"
placeholder="Anthropic API key" placeholder="Anthropic API key"
value={settings.anthropicApiKey || ""} value={settings.anthropicApiKey || ""}
onChange={(e) => onChange={(e) =>
setSettings((s) => ({ setSettings((s) => ({
...s, ...s,
anthropicApiKey: e.target.value, anthropicApiKey: e.target.value,
})) }))
} }
/> />
</div> </div>
)}
<Accordion type="single" collapsible className="w-full"> {!IS_RUNNING_ON_CLOUD && (
<AccordionItem value="item-1"> <Accordion type="single" collapsible className="w-full">
<AccordionTrigger>Screenshot by URL Config</AccordionTrigger> <AccordionItem value="item-1">
<AccordionContent> <AccordionTrigger>Screenshot by URL Config</AccordionTrigger>
<Label htmlFor="screenshot-one-api-key"> <AccordionContent>
<div className="leading-normal font-normal text-xs"> <Label htmlFor="screenshot-one-api-key">
If you want to use URLs directly instead of taking the <div className="leading-normal font-normal text-xs">
screenshot yourself, add a ScreenshotOne API key.{" "} If you want to use URLs directly instead of taking the
<a screenshot yourself, add a ScreenshotOne API key.{" "}
href="https://screenshotone.com?via=screenshot-to-code" <a
className="underline" href="https://screenshotone.com?via=screenshot-to-code"
target="_blank" className="underline"
> target="_blank"
Get 100 screenshots/mo for free. >
</a> Get 100 screenshots/mo for free.
</div> </a>
</Label> </div>
</Label>
<Input <Input
id="screenshot-one-api-key" id="screenshot-one-api-key"
className="mt-2" className="mt-2"
placeholder="ScreenshotOne API key" placeholder="ScreenshotOne API key"
value={settings.screenshotOneApiKey || ""} value={settings.screenshotOneApiKey || ""}
onChange={(e) => onChange={(e) =>
setSettings((s) => ({ setSettings((s) => ({
...s, ...s,
screenshotOneApiKey: e.target.value, screenshotOneApiKey: e.target.value,
})) }))
} }
/> />
</AccordionContent> </AccordionContent>
</AccordionItem> </AccordionItem>
</Accordion> </Accordion>
)}
<Accordion type="single" collapsible className="w-full"> <Accordion type="single" collapsible className="w-full">
<AccordionItem value="item-1"> <AccordionItem value="item-1">