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

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

@ -5,8 +5,12 @@ export enum CodeGenerationModel {
}
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 },
claude_3_sonnet: { name: "Claude 3 Sonnet", inBeta: true },
gpt_4_vision: { name: "GPT-4 Vision", inBeta: false, isPaid: false },
claude_3_sonnet: { name: "Claude 3 Sonnet", inBeta: true, isPaid: true },
};