Angelo/models pricing

fern/assets/scripts/stt-calculator.js

@@ -0,0 +1,40 @@
+const pricingData = {
+  free: { basePrice: 0, includedHours: 2.5, extraHourCost: null },
+  starter: { basePrice: 5, includedHours: 12.5, extraHourCost: 0.4 },
+  creator: { basePrice: 22, includedHours: 63, extraHourCost: 0.35 },
+  pro: { basePrice: 99, includedHours: 320, extraHourCost: 0.31 },
+  scale: { basePrice: 330, includedHours: 1220, extraHourCost: 0.27 },
+  business: { basePrice: 1320, includedHours: 6000, extraHourCost: 0.22 },
+};
+
+function formatPrice(value) {
+  return '$' + value.toFixed(2).replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');
+}
+
+function calculatePrice() {
+  const tier = document.getElementById('tier-select').value;
+  const hours = parseFloat(document.getElementById('hours-input').value) || 0;
+  const tierData = pricingData[tier];
+
+  const basePrice = tierData.basePrice;
+  const extraHours = Math.max(0, hours - tierData.includedHours);
+  const extraHoursCost = tierData.extraHourCost ? extraHours * tierData.extraHourCost : 0;
+  const totalCost = basePrice + extraHoursCost;
+
+  document.getElementById('base-price').textContent = formatPrice(basePrice);
+  document.getElementById('extra-hours-cost').textContent = formatPrice(extraHoursCost);
+  document.getElementById('total-cost').textContent = formatPrice(totalCost);
+
+  // Add animation class to prices
+  document.querySelectorAll('.price').forEach((el) => {
+    el.classList.add('price-updated');
+    setTimeout(() => el.classList.remove('price-updated'), 300);
+  });
+}
+
+// Initialize calculator
+document.getElementById('tier-select')?.addEventListener('change', calculatePrice);
+document.getElementById('hours-input')?.addEventListener('input', calculatePrice);
+
+// Calculate initial values
+calculatePrice();

fern/docs.yml

@@ -765,6 +765,8 @@ js:
     strategy: lazyOnload
   - url: https://elevenlabs.io/player/audioNativeHelper.js
     strategy: lazyOnload
+  - path: assets/scripts/stt-calculator.js
+    strategy: lazyOnload
 
 analytics:
   posthog:

fern/docs/pages/capabilities/speech-to-text.mdx

@@ -424,6 +424,169 @@ The output is classified in three category types:
 - `spacing` - The space between words, not applicable for languages that don't use spaces like Japanese, Mandarin, Thai, Lao, Burmese and Cantonese.
 - `audio_event` - Non-speech sounds like laughter or applause. Also includes verbatim noises like "um" or "ah".
 
+## Pricing
+
+| Tier     | Price   | Hours included | Cost per extra hour |
+| -------- | ------- | -------------- | ------------------- |
+| Free     | \$0     | 2.5            | Unavailable         |
+| Starter  | \$5     | 12.5           | \$0.40              |
+| Creator  | \$22    | 63             | \$0.35              |
+| Pro      | \$99    | 320            | \$0.31              |
+| Scale    | \$330   | 1220           | \$0.27              |
+| Business | \$1,320 | 6000           | \$0.22              |
+
+### Price Calculator
+
+<div className="pricing-calculator">
+  <div className="calculator-form">
+    <div className="input-group">
+      <label htmlFor="tier-select">Subscription Tier</label>
+      <select id="tier-select" className="form-select">
+        <option value="free">Free</option>
+        <option value="starter">Starter (\$5/month)</option>
+        <option value="creator">Creator (\$22/month)</option>
+        <option value="pro">Pro (\$99/month)</option>
+        <option value="scale">Scale (\$330/month)</option>
+        <option value="business">Business (\$1,320/month)</option>
+      </select>
+    </div>
+
+    <div className="input-group">
+      <label htmlFor="hours-input">Hours per month</label>
+      <input 
+        type="number" 
+        id="hours-input" 
+        min="0" 
+        step="0.5" 
+        defaultValue="10"
+        className="form-input"
+      />
+    </div>
+  </div>
+
+  <div className="calculator-summary">
+    <div className="summary-item">
+      <span>Monthly subscription</span>
+      <span id="base-price" className="price">$0.00</span>
+    </div>
+    <div className="summary-item">
+      <span>Additional hours cost</span>
+      <span id="extra-hours-cost" className="price">$0.00</span>
+    </div>
+    <div className="summary-item total">
+      <span>Total monthly cost</span>
+      <span id="total-cost" className="price">$0.00</span>
+    </div>
+  </div>
+</div>
+
+<style>
+  {`
+  .pricing-calculator {
+    background: var(--background-muted, #f6f6f7);
+    border: 1px solid var(--border-color, #e9e8ea);
+    border-radius: 12px;
+    padding: 24px;
+    margin: 32px 0;
+    font-family: system-ui, -apple-system, sans-serif;
+  }
+
+  .calculator-form {
+    display: grid;
+    gap: 20px;
+    margin-bottom: 24px;
+  }
+
+  .input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .input-group label {
+    font-weight: 500;
+    font-size: 0.9rem;
+    color: var(--text-color, #1a1a1a);
+  }
+
+  .form-select,
+  .form-input {
+    padding: 10px 14px;
+    border: 1px solid var(--border-color, #e9e8ea);
+    border-radius: 8px;
+    font-size: 1rem;
+    width: 100%;
+    background: var(--background-default, white);
+    color: var(--text-color, #1a1a1a);
+    transition: border-color 0.15s ease;
+  }
+
+  .form-select:hover,
+  .form-input:hover {
+    border-color: var(--border-hover, #d1d1d1);
+  }
+
+  .form-select:focus,
+  .form-input:focus {
+    outline: none;
+    border-color: var(--primary-color, #007AFF);
+    box-shadow: 0 0 0 2px var(--primary-color-alpha, rgba(0,122,255,0.1));
+  }
+
+  .calculator-summary {
+    background: var(--background-default, white);
+    border: 1px solid var(--border-color, #e9e8ea);
+    border-radius: 8px;
+    padding: 16px;
+  }
+
+  .summary-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 0;
+    font-size: 0.95rem;
+  }
+
+  .summary-item:not(:last-child) {
+    border-bottom: 1px solid var(--border-color, #e9e8ea);
+  }
+
+  .summary-item.total {
+    font-weight: 600;
+    font-size: 1.1rem;
+    margin-top: 8px;
+    padding-top: 16px;
+  }
+
+  .price {
+    font-family: monospace;
+    font-size: 1.1rem;
+  }
+
+  /* Dark mode support */
+  :root[class='dark'] .pricing-calculator {
+    --background-muted: rgba(255, 255, 255, 0.05);
+    --background-default: rgba(255, 255, 255, 0.1);
+    --border-color: rgba(255, 255, 255, 0.1);
+    --border-hover: rgba(255, 255, 255, 0.2);
+    --text-color: rgba(255, 255, 255, 0.9);
+    --primary-color: #3B82F6;
+    --primary-color-alpha: rgba(59,130,246,0.1);
+  }
+
+  @media (max-width: 640px) {
+    .pricing-calculator {
+      padding: 16px;
+    }
+
+    .calculator-form {
+      gap: 16px;
+    }
+  }
+`}
+</style>
+
 ## Supported variants
 
 Scribe v1 is available in two variants:

fern/docs/pages/capabilities/text-to-speech.mdx

@@ -37,7 +37,7 @@ Explore our [voice library](https://elevenlabs.io/community) to find the perfect
 
 For real-time applications, Flash v2.5 provides ultra-low 75ms latency, while Multilingual v2 delivers the highest quality audio with more nuanced expression.
 
-<Markdown src="/snippets/models.mdx" />
+<Markdown src="/snippets/tts-models.mdx" />
 
 <div className="text-center">
   <div>[Explore all](/docs/models)</div>

fern/docs/pages/models.mdx

@@ -120,6 +120,21 @@ With its lower price point and 75ms latency, Flash v2.5 is the cost-effective op
   </Accordion>
 </AccordionGroup>
 
+## Character limits
+
+The maximum number of characters supported in a single text-to-speech request varies by model.
+
+| Model ID                 | Character limit | Approximate audio duration |
+| ------------------------ | --------------- | -------------------------- |
+| `eleven_flash_v2_5`      | 40,000          | ~40 minutes                |
+| `eleven_flash_v2`        | 30,000          | ~30 minutes                |
+| `eleven_multilingual_v2` | 10,000          | ~10 minutes                |
+| `eleven_multilingual_v1` | 10,000          | ~10 minutes                |
+| `eleven_english_sts_v2`  | 10,000          | ~10 minutes                |
+| `eleven_english_sts_v1`  | 10,000          | ~10 minutes                |
+
+<Note>For longer content, consider splitting the input into multiple requests.</Note>
+
 ## Scribe v1
 
 Scribe v1 is our state-of-the-art speech recognition model designed for accurate transcription across 99 languages. It provides precise word-level timestamps and advanced features like speaker diarization and dynamic audio tagging.
@@ -140,21 +155,6 @@ Key features:
 
 Read more about Scribe v1 [here](/docs/capabilities/speech-to-text).
 
-## Character limits
-
-The maximum number of characters supported in a single text-to-speech request varies by model.
-
-| Model ID                 | Character limit | Approximate audio duration |
-| ------------------------ | --------------- | -------------------------- |
-| `eleven_flash_v2_5`      | 40,000          | ~40 minutes                |
-| `eleven_flash_v2`        | 30,000          | ~30 minutes                |
-| `eleven_multilingual_v2` | 10,000          | ~10 minutes                |
-| `eleven_multilingual_v1` | 10,000          | ~10 minutes                |
-| `eleven_english_sts_v2`  | 10,000          | ~10 minutes                |
-| `eleven_english_sts_v1`  | 10,000          | ~10 minutes                |
-
-<Note>For longer content, consider splitting the input into multiple requests.</Note>
-
 ## Concurrency and priority
 
 Your subscription plan determines how many requests can be processed simultaneously and the priority level of your requests in the queue.

fern/docs/pages/product-guides/playground/text-to-speech.mdx

@@ -66,7 +66,7 @@ Not all voices are equal, and a lot depends on the source audio used to create t
 
 ElevenLabs offers two families of models: standard (high-quality) models and Flash models, which are optimized for low latency. Each family includes both English-only and multilingual models, tailored for specific use cases with strengths in either speed, accuracy, or language diversity.
 
-<Markdown src="/snippets/models.mdx" />
+<Markdown src="/snippets/tts-models.mdx" />
 
 [Learn more about our models](/docs/models)
 

fern/snippets/stt-models.mdx

@@ -0,0 +1,11 @@
+<CardGroup cols={2} rows={2}>
+  <Card title="Scribe v1" href="/docs/models#scribe-v1">
+    State-of-the-art speech recognition model
+    <div className="mt-4 space-y-2">
+      <div className="text-sm">Accurate transcription in 99 languages</div>
+      <div className="text-sm">Precise word-level timestamps</div>
+      <div className="text-sm">Speaker diarization</div>
+      <div className="text-sm">Dynamic audio tagging</div>
+    </div>
+  </Card>
+</CardGroup>

fern/snippets/tts-models.mdx

@@ -0,0 +1,20 @@
+<CardGroup cols={2} rows={2}>
+  <Card title="Eleven Multilingual v2" href="/docs/models#multilingual-v2">
+    Our most lifelike, emotionally rich speech synthesis model
+    <div className="mt-4 space-y-2">
+      <div className="text-sm">Most natural-sounding output</div>
+      <div className="text-sm">29 languages supported</div>
+      <div className="text-sm">10,000 character limit</div>
+      <div className="text-sm">Rich emotional expression</div>
+    </div>
+  </Card>
+  <Card title="Eleven Flash v2.5" href="/docs/models#flash-v25">
+    Our fast, affordable speech synthesis model
+    <div className="mt-4 space-y-2">
+      <div className="text-sm">Ultra-low latency (~75ms&dagger;)</div>
+      <div className="text-sm">32 languages supported</div>
+      <div className="text-sm">40,000 character limit</div>
+      <div className="text-sm">Faster model, 50% lower price per character</div>
+    </div>
+  </Card>
+</CardGroup>