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

show user that Claude 3 sonnet is for paid plans

Browse Source
This commit is contained in:
Abi Raja 2024-03-19 13:24:07 -04:00
parent b6222ddbc9
commit 8209c7bd26
2 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/components/ModelSettingsSection.tsx
View File

@ -10,6 +10,8 @@ import {
CodeGenerationModel, CodeGenerationModel,
} from "../lib/models"; } from "../lib/models";
import { Badge } from "./ui/badge"; import { Badge } from "./ui/badge";
import { IS_RUNNING_ON_CLOUD } from "../config";
import { useStore } from "../store/store";
interface Props { interface Props {
codeGenerationModel: CodeGenerationModel; codeGenerationModel: CodeGenerationModel;
@ -22,6 +24,8 @@ function ModelSettingsSection({
setCodeGenerationModel, setCodeGenerationModel,
shouldDisableUpdates = false, shouldDisableUpdates = false,
}: Props) { }: Props) {
const subscriberTier = useStore((state) => state.subscriberTier);
return ( return (
<div className="flex flex-col gap-y-2 justify-between text-sm"> <div className="flex flex-col gap-y-2 justify-between text-sm">
<div className="grid grid-cols-3 items-center gap-4"> <div className="grid grid-cols-3 items-center gap-4">
@ -42,16 +46,26 @@ function ModelSettingsSection({
<SelectGroup> <SelectGroup>
{Object.values(CodeGenerationModel).map((model) => ( {Object.values(CodeGenerationModel).map((model) => (
<SelectItem key={model} value={model}> <SelectItem key={model} value={model}>
<div className="flex flex-col">
<div className="flex items-center"> <div className="flex items-center">
<span className="font-semibold"> <span className="font-semibold">
{CODE_GENERATION_MODEL_DESCRIPTIONS[model].name} {CODE_GENERATION_MODEL_DESCRIPTIONS[model].name}
</span> </span>
{CODE_GENERATION_MODEL_DESCRIPTIONS[model].inBeta && ( {!IS_RUNNING_ON_CLOUD &&
CODE_GENERATION_MODEL_DESCRIPTIONS[model].inBeta && (
<Badge className="ml-2" variant="secondary"> <Badge className="ml-2" variant="secondary">
Beta Beta
</Badge> </Badge>
)} )}
</div> </div>
{IS_RUNNING_ON_CLOUD &&
subscriberTier === "free" &&
CODE_GENERATION_MODEL_DESCRIPTIONS[model].isPaid && (
<Badge className="ml-2" variant="secondary">
Upgrade to Paid
</Badge>
)}
</div>
</SelectItem> </SelectItem>
))} ))}
</SelectGroup> </SelectGroup>

10
frontend/src/lib/models.ts
View File

@ -5,8 +5,12 @@ export enum CodeGenerationModel {
} }
export const CODE_GENERATION_MODEL_DESCRIPTIONS: { export const CODE_GENERATION_MODEL_DESCRIPTIONS: {
[key in CodeGenerationModel]: { name: string; inBeta: boolean }; [key in CodeGenerationModel]: {
name: string;
inBeta: boolean;
isPaid: boolean;
};
} = { } = {
gpt_4_vision: { name: "GPT-4 Vision", inBeta: false }, gpt_4_vision: { name: "GPT-4 Vision", inBeta: false, isPaid: false },
claude_3_sonnet: { name: "Claude 3 Sonnet", inBeta: true }, claude_3_sonnet: { name: "Claude 3 Sonnet", inBeta: true, isPaid: true },
}; };