Tokens 计费器

制作一个单文件 HTML 的 LLM Tokens 计费器：用户输入模型的每百万 Token 的输入/输出价格，再输入实际使用的输入/输出 Token 数量，实时计算并显示本次调用费用。

制作一个单文件 HTML 的 **LLM Tokens 计费器**，核心使用场景：快速估算一次或多次 LLM API 调用的实际花费——选模型、填用量、看账单，零摩擦。 ```` ### 功能要求 **价格配置区** 1. 提供"输入价格"、"输出价格"、"缓存写入价格"、"缓存读取价格"四个数值输入框，单位固定为 **$/1M tokens**（每百万 Token 的美元价格） 2. 内置一个**模型预设下拉菜单**，选择后自动填入对应的输入/输出/缓存读/缓存写价格。预设模型列表（价格数据截至 2026 年 4 月，仅供参考）： | 模型名称 | 输入 ($/1M) | 输出 ($/1M) | 缓存写入 ($/1M) | 缓存读取 ($/1M) | |---------|------------|------------|----------------|----------------| | GPT-5.4 | 2.50 | 15.00 | 2.50 | 0.25 | | GPT-5.4 mini | 0.75 | 4.50 | 0.75 | 0.075 | | GPT-5.4 nano | 0.20 | 1.25 | 0.20 | 0.02 | | Claude Opus 4.6 | 5.00 | 25.00 | 6.25 | 0.50 | | Claude Sonnet 4.6 | 3.00 | 15.00 | 3.75 | 0.30 | | Claude Haiku 4.5 | 1.00 | 5.00 | 1.25 | 0.10 | | Gemini 3.1 Pro (≤200K) | 2.00 | 12.00 | 2.00 | 0.50 | | Gemini 3.1 Pro (>200K) | 4.00 | 18.00 | 4.00 | 1.00 | | Gemini 3.1 Flash-Lite | 0.25 | 1.50 | 0.25 | 0.025 | 3. 预设下拉菜单包含一个"自定义"选项，选择后清空价格字段让用户手动输入 4. 允许用户在选择预设后手动修改价格（覆盖预设值），此时下拉菜单自动切换为"自定义" **用量输入区** 5. 提供"输入 Token 数"、"输出 Token 数"、"缓存写入 Token 数"、"缓存读取 Token 数"四个数值输入框 6. 支持直接输入数字，也支持 K/M 简写（如输入 `128K` 自动转换为 128000，`1.5M` 转换为 1500000） 7. 输入框下方或旁边显示换算后的实际数字，方便确认（如 `= 128,000 tokens`） **费用计算与展示** 8. 实时计算：任一输入字段变化时，立即更新计算结果，无需手动点击按钮 9. 分别显示：输入费用、输出费用、缓存写入费用、缓存读取费用、总费用（美元），均保留合理精度（建议 6 位小数，避免极小金额时显示 $0.00） 10. 同时显示各项费用的人民币估算值（固定汇率 1 USD = 7.3 CNY，在页面上注明汇率，可修改） 11. 提供一个"调用次数"乘数输入框（默认 1），用于快速估算批量调用的总费用 **辅助功能** 12. 一键重置：清空所有用量输入和计算结果，保留当前价格配置 13. 计算历史：在页面底部展示最近的计算记录（模型名 + 用量摘要 + 费用 + 时间戳），使用 localStorage 持久化，支持清空历史 14. 分享/导出：一键复制当前计算结果为格式化文本（如 `Claude Sonnet 4.6 | 入:10K 出:2K 缓存读:50K | $0.060 ≈ ¥0.438`） ### 设计要求 - 整体采用现代简约风格，支持浅色/深色主题切换 - 桌面端建议左右或上下分区布局：左侧/上方为配置+输入区，右侧/下方为结果展示区 - 费用结果区域视觉突出，金额数字使用大号等宽字体 - 表单输入流程从上到下自然流畅，Tab 键顺序合理 - 移动端完全可用，触控友好 - 色彩上可适当使用绿色/红色区分输入费用与输出费用，总费用使用醒目的强调色 - 整体给人"开发者工具 / 效率工具"的专业感 ````

制作一个单文件 HTML 的 **LLM Tokens 计费器**，核心使用场景：快速估算一次或多次 LLM API 调用的实际花费——选模型、填用量、看账单，零摩擦。 ```` ### 功能要求 **价格配置区** 1. 提供"输入价格"、"输出价格"、"缓存写入价格"、"缓存读取价格"四个数值输入框，单位固定为 **$/1M tokens**（每百万 Token 的美元价格） 2. 内置一个**模型预设下拉菜单**，选择后自动填入对应的输入/输出/缓存读/缓存写价格。预设模型列表（价格数据截至 2026 年 4 月，仅供参考）： | 模型名称 | 输入 ($/1M) | 输出 ($/1M) | 缓存写入 ($/1M) | 缓存读取 ($/1M) | |---------|------------|------------|----------------|----------------| | GPT-5.4 | 2.50 | 15.00 | 2.50 | 0.25 | | GPT-5.4 mini | 0.75 | 4.50 | 0.75 | 0.075 | | GPT-5.4 nano | 0.20 | 1.25 | 0.20 | 0.02 | | Claude Opus 4.6 | 5.00 | 25.00 | 6.25 | 0.50 | | Claude Sonnet 4.6 | 3.00 | 15.00 | 3.75 | 0.30 | | Claude Haiku 4.5 | 1.00 | 5.00 | 1.25 | 0.10 | | Gemini 3.1 Pro (≤200K) | 2.00 | 12.00 | 2.00 | 0.50 | | Gemini 3.1 Pro (>200K) | 4.00 | 18.00 | 4.00 | 1.00 | | Gemini 3.1 Flash-Lite | 0.25 | 1.50 | 0.25 | 0.025 | 3. 预设下拉菜单包含一个"自定义"选项，选择后清空价格字段让用户手动输入 4. 允许用户在选择预设后手动修改价格（覆盖预设值），此时下拉菜单自动切换为"自定义" **用量输入区** 5. 提供"输入 Token 数"、"输出 Token 数"、"缓存写入 Token 数"、"缓存读取 Token 数"四个数值输入框 6. 支持直接输入数字，也支持 K/M 简写（如输入 `128K` 自动转换为 128000，`1.5M` 转换为 1500000） 7. 输入框下方或旁边显示换算后的实际数字，方便确认（如 `= 128,000 tokens`） **费用计算与展示** 8. 实时计算：任一输入字段变化时，立即更新计算结果，无需手动点击按钮 9. 分别显示：输入费用、输出费用、缓存写入费用、缓存读取费用、总费用（美元），均保留合理精度（建议 6 位小数，避免极小金额时显示 $0.00） 10. 同时显示各项费用的人民币估算值（固定汇率 1 USD = 7.3 CNY，在页面上注明汇率，可修改） 11. 提供一个"调用次数"乘数输入框（默认 1），用于快速估算批量调用的总费用 **辅助功能** 12. 一键重置：清空所有用量输入和计算结果，保留当前价格配置 13. 计算历史：在页面底部展示最近的计算记录（模型名 + 用量摘要 + 费用 + 时间戳），使用 localStorage 持久化，支持清空历史 14. 分享/导出：一键复制当前计算结果为格式化文本（如 `Claude Sonnet 4.6 | 入:10K 出:2K 缓存读:50K | $0.060 ≈ ¥0.438`） 请严格按照下方提供的 Serif Editorial Design System 实现所有 UI 设计。 ```` ```` <role> You are an expert frontend engineer, UI/UX designer, visual design specialist, and typography expert. Your task is to build a single-file HTML application that strictly follows the provided design system. Before writing code, build a clear mental model of the requirements: - Understand the design tokens (colors, spacing, typography, radii, shadows), and utility patterns defined in the design system. - Plan the component architecture and naming conventions. - Note any constraints (single-file HTML, no build tools, performance considerations). When implementing: - Centralize design tokens as CSS custom properties for maintainability. - Prioritize reusability and composability of components. - Minimize duplication and one-off styles. - Use clear, consistent naming conventions. Always aim to: - Preserve or improve accessibility. - Maintain visual consistency with the provided design system. - Leave the codebase in a cleaner, more coherent state than you found it. - Ensure layouts are responsive and usable across devices. - Make deliberate, creative design choices (layout, motion, interaction details, and typography) that express the design system's personality instead of producing a generic or boilerplate UI. </role> <design-system> # Design Style: Serif ## Design Philosophy ### Core Principle **Typographic elegance through classical restraint.** This design system draws inspiration from the finest editorial publications, literary magazines, and luxury brand identities. It believes that the highest form of design is one that elevates content through refined typography, considered spacing, and deliberate simplicity. The serif typeface is not merely a font choice—it is the soul of this aesthetic. Every curve of the letterform, every carefully weighted stroke, speaks to centuries of typographic tradition. This design honors that heritage while executing with modern precision. ### The Visual Vibe **Editorial. Timeless. Warm. Refined.** Imagine opening a beautifully designed hardcover book or a premium architecture magazine. The pages breathe. The typography has room to speak. Nothing screams for attention because everything has been placed with intention. This is the feeling we create. **Emotional Keywords:** - *Timeless* — This design would feel appropriate today, a decade ago, or a decade from now. It transcends trends. - *Warm* — The ivory backgrounds, the organic serif curves, the golden accent create an inviting, human quality. - *Sophisticated* — Small caps, refined rules, generous margins all whisper quality and attention to detail. - *Literary* — This feels like it belongs in the world of ideas, of considered communication, of meaningful content. - *Confident* — True elegance comes from restraint, not embellishment. This design is secure enough to be quiet. **What This Design Is NOT:** - Not cold or stark (despite being minimal) - Not trendy or ephemeral (the serif anchors it in timelessness) - Not decorative or ornate (restraint is key) - Not corporate or generic (the typography gives it soul) - Not loud or aggressive (it draws you in rather than demanding attention) ### The DNA of This Style #### 1. The Signature Serif The **Playfair Display** typeface is the cornerstone. Its high contrast between thick and thin strokes, its elegant ball terminals, and its classical proportions immediately establish editorial gravitas. This font has presence—it commands attention without raising its voice. **Where it appears:** - All major headlines (h1, h2, h3) - Large display numbers (pricing, stats) - Pull quotes in testimonials - Logo wordmark **Why it works:** Serif typefaces carry associations with tradition, trustworthiness, and intellectual depth. Playfair Display specifically feels both classical and contemporary—it's not stuffy or old-fashioned but brings warmth and character. #### 2. The Warm Palette Color in this system is used with extreme restraint. The palette is essentially monochromatic with a single warm accent: - **Ivory (#FAFAF8)** — A cream-tinted white that feels warmer than pure white - **Rich Black (#1A1A1A)** — Deep but not harsh, for primary text - **Warm Gray (#6B6B6B)** — For secondary text, with slight warmth - **Burnished Gold (#B8860B)** — The single accent color, used sparingly for emphasis The gold accent is inspired by gold leaf in illuminated manuscripts, the gilded edges of fine books, the brass details in luxury interiors. It adds just enough warmth and distinction without overwhelming the monochrome foundation. #### 3. The Rule Line System Thin horizontal rules (1px lines) are a defining element: - Section dividers - Card borders (top accent lines) - Underline effects on key elements - Table separators These rules are inspired by editorial layouts where fine lines create structure and rhythm without visual weight. They're always in the border color (#E8E4DF), slightly warmer than pure gray. #### 4. Small Caps & Tracking **Small caps** are used extensively for: - Section labels - Meta information (dates, categories) - Supporting text - Navigation items Combined with **generous letter-spacing (0.1em - 0.15em)**, small caps create a refined, sophisticated look that's distinctly editorial. This is not a cheap trick—it's a typography fundamental that separates thoughtful design from generic output. #### 5. Generous Whitespace This design breathes. Margins are large. Padding is substantial. Line heights are relaxed. - Section padding: `py-32` to `py-44` - Content max-width: `max-w-5xl` (narrower for reading comfort) - Line height for body: `1.75` (very relaxed) - Letter spacing for body: slight positive tracking for readability The whitespace isn't empty—it's an active design element that gives the typography room to perform. #### 6. Asymmetric Balance While the overall aesthetic is classical, the layouts embrace asymmetric compositions: - Hero: Centered but with offset decorative elements - Benefits: Uneven column splits (1.3fr / 0.7fr) - Cards: Thin top border creates visual weight at top This prevents the design from feeling static or predictable while maintaining elegance. ### Differentiation: Minimalism With Soul Many minimalist designs strip away so much that they become characterless—white backgrounds, gray text, system fonts. This design proves that minimalism and personality are not mutually exclusive. **The serif typeface is the key differentiator.** It brings: - Visual interest without decoration - Warmth without color - Character without complexity - Timelessness without being dated This is minimalism with a point of view. It has something to say. --- ## Design Token System (The DNA) ### Color Strategy **Monochrome With Warmth:** An intentionally limited palette that gains sophistication through restraint. The single gold accent provides just enough distinction. | Token | Value | Usage & Context | |:------|:------|:----------------| | `background` | `#FAFAF8` | Primary canvas. Warm ivory that feels more refined than pure white. | | `foreground` | `#1A1A1A` | Primary text. Rich black, not pure black. | | `muted` | `#F5F3F0` | Secondary surfaces, card backgrounds. Slightly warmer than background. | | `muted-foreground` | `#6B6B6B` | Secondary text. Warm gray with softness. | | `accent` | `#B8860B` | Burnished gold. Links, highlights, key interactive elements. | | `accent-secondary` | `#D4A84B` | Lighter gold for gradients and hover states. | | `accent-foreground` | `#FFFFFF` | Text on accent backgrounds. | | `border` | `#E8E4DF` | Warm gray for rules, dividers, card borders. | | `card` | `#FFFFFF` | Card surfaces. Pure white for maximum lift from ivory background. | | `ring` | `#B8860B` | Focus rings. Matches accent gold. | --- ### Typography System **Font Pairing (Editorial System):** - **Display/Headlines:** `"Playfair Display", Georgia, serif` — Elegant high-contrast serif for all headings. The signature of this design. - **Body/UI:** `"Source Sans 3", system-ui, sans-serif` — Clean, highly readable sans-serif that complements without competing. - **Monospace:** `"IBM Plex Mono", monospace` — For labels and small caps treatments. **Type Scale & Usage:** | Element | Size | Font | Weight | Tracking | Notes | |:--------|:-----|:-----|:-------|:---------|:------| | Hero Headline | `7xl` → `4.5rem` | Playfair Display | Normal | `-0.02em` | Tight leading (1.1). Center-aligned. | | Section Headlines | `4xl` → `2.5rem` | Playfair Display | Normal | `-0.01em` | Leading 1.2. | | Card Titles | `xl` → `1.25rem` | Playfair Display | Semibold | Normal | Leading 1.3. | | Body Text | `base` → `lg` | Source Sans 3 | Normal | `0.01em` | Relaxed line-height (1.75). | | Section Labels | `xs` (12px) | IBM Plex Mono | Medium | `0.15em` | UPPERCASE small caps style. | | Navigation | `sm` | Source Sans 3 | Medium | `0.05em` | Slightly tracked. | **Small Caps Pattern:** ```css .small-caps { font-family: "IBM Plex Mono", monospace; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; } ``` --- ### Spacing & Layout **Core Principle:** Luxurious breathing room. This design is not afraid of empty space. - **Section Spacing:** Large vertical padding (`py-32` to `py-44`) creates paced, contemplative scrolling. - **Container Width:** `max-w-5xl` (64rem) for narrower, more readable content columns. - **Component Density:** Generous internal padding (p-8 to p-10) on cards. - **Grid Gaps:** `gap-8` to `gap-12` between grid items. **Layout Patterns:** - Hero: Centered, narrow container, stacked elements - Features: 3-column grid with generous gaps - Benefits: Asymmetric 2-column (`grid-cols-[1.3fr_0.7fr]`) - Use thin rule lines to create visual structure --- ### Borders, Surfaces & Shadows **Surfaces:** - Cards use pure white (`#FFFFFF`) for lift from ivory background - Very subtle shadows—this isn't about depth, it's about refinement - Thin borders (1px) in warm gray **Border System:** | Token | Value | Usage | |:------|:------|:------| | `border-thin` | `1px solid #E8E4DF` | Primary borders, rules | | `border-accent` | `1px solid #B8860B` | Accent borders, highlighted cards | **Shadow System:** | Token | Value | Usage | |:------|:------|:------| | `shadow-sm` | `0 1px 2px rgba(26,26,26,0.04)` | Subtle lift | | `shadow-md` | `0 4px 12px rgba(26,26,26,0.06)` | Cards, hover states | | `shadow-lg` | `0 8px 24px rgba(26,26,26,0.08)` | Elevated elements | **Rule Lines (Critical for Style Identity):** - Thin horizontal rules as section dividers - Top border accent on cards (1px accent color) - Decorative rule under headlines --- ## Component Styling & Interactions ### Buttons **Primary Button:** - Background: `accent` gold - Text: White, medium weight, slightly tracked - Border-radius: `rounded-md` (6px) — not too round, not too sharp - Shadow: Very subtle, accent-tinted (`shadow-sm`) - Hover: Color shifts to `accent-secondary`, shadow enhances to `shadow-accent`, subtle lift (-translate-y-0.5) - Active: Returns to base position (translate-y-0) - Touch: `touch-manipulation` class for better mobile interaction - Minimum height: 44px on mobile (accessibility requirement) **Secondary/Outline Button:** - Background: Transparent - Border: `1px` in `foreground` color (strong contrast) - Text: `foreground` - Hover: Fill with `muted` background, border and text shift to `accent` color - Smooth color transitions on all properties **Ghost Button:** - No background or border - Text: `muted-foreground` → `foreground` on hover - Underline appears on hover with `accent` color decoration - Underline offset: 4px for breathing room **Animation:** Refined transitions (`200ms`). Subtle lift on primary buttons adds tactile feedback while maintaining elegance. --- ### Cards **Standard Card:** - Background: `card` (white) - Border: `1px` in `border` color - Border-radius: `rounded-lg` (8px) - Shadow: `shadow-sm` — very subtle - Top accent: Optional `2px` accent border on top edge (when `accentTop` prop used) **Hover Effects (when `hoverEffect` prop used):** - Shadow increases to `shadow-md` - Border color shifts to `border-hover` - Background subtle tint to `muted/30` (30% opacity) - No translate/lift — maintains elegant restraint - Smooth `200ms` transition on all properties **Elevated Card:** - Uses `shadow-md` by default (when `elevated` prop used) - Provides more depth for important content like highlighted pricing tiers **Featured Card:** - Background tint of accent color at 6% (`accent-muted`) - Accent top border at 2px thickness - Often combined with elevated shadow for maximum prominence --- ### Inputs - Height: `h-12` (44px minimum for accessibility) - Border: `1px` in `input` color (matches `border`) - Border-radius: `rounded-md` (6px) - Background: Transparent - Hover: Border shifts to `border-hover` color - Focus: - `ring-2 ring-accent ring-offset-2` - Border shifts to `accent` color for clear visual feedback - Smooth `150ms` transition - Placeholder: `text-muted-foreground/60` (60% opacity for subtle hierarchy) - Typography: Sans-serif body font, base size - Transitions: All properties animate smoothly with `ease-out` easing --- ### Section Labels A consistent label pattern appears at the start of each section: ```html <div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem"> <span style="height:1px;flex:1;background:var(--border)"></span> <span style="font-family:'IBM Plex Mono',monospace;font-size:0.75rem;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;color:var(--accent)"> Section Name </span> <span style="height:1px;flex:1;background:var(--border)"></span> </div> ``` --- ## The "Bold Factor" (Signature Elements) These elements prevent generic output and define this style: 1. **Dramatic Serif Headlines:** Oversized serif typography (7xl in hero) that commands attention through scale and beauty, not decoration. 2. **Rule Line System:** Thin horizontal rules throughout create rhythm and structure—a distinctly editorial element. 3. **Small Caps Labels:** All section labels and meta info use tracked uppercase monospace, creating refined visual rhythm. 4. **Burnished Gold Accent:** The single warm accent color adds just enough distinction to prevent sterility. 5. **Generous Whitespace:** Sections breathe with `py-32` to `py-44` padding. This is premium, not cramped. 6. **Large Display Numbers:** Stats and pricing use serif display numbers at dramatic sizes (5xl+). 7. **Paper Texture Overlay:** Subtle noise texture overlay at 30% opacity across entire page creates tactile, print-like quality. 8. **Ambient Glow:** Large blurred circle with 2% opacity accent color creates warm atmospheric depth. --- ## Effects & Animation **Motion Philosophy:** Restrained and refined. Nothing bounces, nothing overshoots. Every animation should feel inevitable, not surprising. **Transition Defaults:** - Standard: `transition-all duration-200 ease-out` - Subtle: `duration-150` **Interaction States:** - Hover brightness change: 5-10%, no dramatic shifts - Shadow enhancement on hover - Underlines appearing/growing - NO translate/lift effects — too trendy for this timeless aesthetic --- ## Responsive Strategy **Breakpoint Philosophy:** Mobile layouts maintain the editorial feel through typography and spacing, even when structure simplifies. All interactive elements meet accessibility requirements for touch targets. ### Mobile Adaptations (< 768px) - Single column layout, centered text - Headlines scale down but maintain serif presence - Cards stack vertically with generous gaps (`gap-8` minimum) - All buttons: Minimum 44px height on mobile - Section padding reduces gracefully but maintains premium feel - Touch targets meet WCAG AAA standards (minimum 44x44px) --- ## Accessibility & Best Practices **Color Contrast:** - Rich black (#1A1A1A) on ivory (#FAFAF8) provides excellent readability (WCAG AAA) - Gold accent (#B8860B) passes contrast requirements on white backgrounds - Muted foreground (#6B6B6B) maintains sufficient contrast for secondary text **Focus States:** - Visible focus rings on all interactive elements: `ring-2 ring-accent ring-offset-2` - Input borders shift to accent color on focus **Typography:** - Body text uses relaxed line-height (1.75) for comfortable reading - Base font size: 16px minimum - Line length controlled with max-width for optimal reading </design-system> ````