diff --git a/info/pricing.mdx b/info/pricing.mdx index 7ee71cdd..3cc403ad 100644 --- a/info/pricing.mdx +++ b/info/pricing.mdx @@ -9,7 +9,8 @@ With Kernel, you only pay for what you use and nothing more. You don't pay for i | Browser type | Price ($/sec) | | --- | --- | | Headless | 0.0000166667 | -| Headful | 0.0001333336 | +| Headful (8GB) | 0.0001333336 | +| Headful (16GB) | 0.0002666672 | | Headful + GPU acceleration | 0.0008000016 | > Note: GPU acceleration is only available on headful, on-demand browsers. Standby mode is not supported for GPU-accelerated browsers. diff --git a/snippets/calculator.jsx b/snippets/calculator.jsx index 1ee4ab97..c56976b9 100644 --- a/snippets/calculator.jsx +++ b/snippets/calculator.jsx @@ -9,6 +9,7 @@ export const PricingCalculator = () => { const [plan, setPlan] = useState(defaults.plan); const [browserType, setBrowserType] = useState(defaults.browserType); + const [headful16, setHeadful16] = useState(false); const [avgSessionLength, setAvgSessionLength] = useState(defaults.avgSessionLength); const [numSessions, setNumSessions] = useState(defaults.numSessions); const [flash, setFlash] = useState(false); @@ -20,11 +21,12 @@ export const PricingCalculator = () => { var url = new URL(window.location); url.searchParams.set('plan', plan); url.searchParams.set('browserType', browserType); + url.searchParams.set('headful16', headful16); url.searchParams.set('duration', avgSessionLength); url.searchParams.set('sessions', numSessions); url.hash = 'pricing-calculator'; window.history.replaceState(null, '', url); - }, [plan, browserType, avgSessionLength, numSessions]); + }, [plan, browserType, headful16, avgSessionLength, numSessions]); const handleBrowserTypeChange = (type) => { hasInteracted.current = true; @@ -34,6 +36,12 @@ export const PricingCalculator = () => { } }; + const handleMemoryChange = (is16) => { + hasInteracted.current = true; + setHeadful16(is16); + setBrowserType('headful'); + }; + const handlePlanChange = (newPlan) => { hasInteracted.current = true; if (browserType === 'gpu' && newPlan !== 'startup') { @@ -43,7 +51,7 @@ export const PricingCalculator = () => { }; var price = planPrices[plan]; - var multiplier = browserMultipliers[browserType]; + var multiplier = browserType === 'headful' ? 8 * (headful16 ? 2 : 1) : browserMultipliers[browserType]; var usageCost = usagePrices * multiplier * numSessions * avgSessionLength; var includedUsageCredits = 5; @@ -77,11 +85,23 @@ export const PricingCalculator = () => { paddingRight: '1.5rem', }; const btnStyle = (active) => ({ - padding: '0.25rem 0.5rem', + padding: '0.375rem 0.75rem', borderRadius: '0.375rem', border: '1px solid var(--btn-border)', fontSize: '0.875rem', + whiteSpace: 'nowrap', background: active ? 'var(--btn-selected-bg)' : undefined, + cursor: 'pointer', + display: 'inline-flex', + alignItems: 'center', + gap: '0.15rem', + }); + const gbStyle = (active) => ({ + padding: '0 0.3rem', + background: 'transparent', + fontSize: '0.875rem', + cursor: 'pointer', + color: active ? 'inherit' : 'rgba(128,128,128,0.55)', }); return ( @@ -102,14 +122,19 @@ export const PricingCalculator = () => { { hasInteracted.current = true; setNumSessions(parseInt(e.target.value)); }} /> -
+
- +
${(usagePrices * multiplier).toFixed(8)}/second + {browserType === 'headful' && ({headful16 ? '16GB' : '8GB'})} {browserType === 'gpu' && (Startup tier required)}