adaptive-memory-multi-model-router 2.15.3 → 2.15.5

package/apps/cost-calculator/calculator.css

@@ -0,0 +1,280 @@
+/* A3M Router Cost Calculator Styles */
+
+:root {
+  --a3m-primary: #6366f1;
+  --a3m-accent: #818cf8;
+  --a3m-bg: #0f0f1a;
+  --a3m-surface: #1a1a2e;
+  --a3m-border: #2d2d4a;
+  --a3m-text: #e2e8f0;
+  --a3m-muted: #94a3b8;
+  --a3m-green: #22c55e;
+  --a3m-red: #ef4444;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: var(--a3m-bg);
+  color: var(--a3m-text);
+  min-height: 100vh;
+  padding: 2rem 1rem;
+}
+
+.container {
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+h1 {
+  font-size: 1.75rem;
+  font-weight: 700;
+  text-align: center;
+  margin-bottom: 0.5rem;
+}
+
+.subtitle {
+  text-align: center;
+  color: var(--a3m-muted);
+  margin-bottom: 2rem;
+}
+
+.card {
+  background: var(--a3m-surface);
+  border: 1px solid var(--a3m-border);
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.card-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--a3m-muted);
+  margin-bottom: 1rem;
+}
+
+/* Input grid */
+.input-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+@media (max-width: 600px) {
+  .input-grid { grid-template-columns: 1fr; }
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.input-group label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--a3m-muted);
+}
+
+.input-group input,
+.input-group select {
+  padding: 0.625rem 0.875rem;
+  background: var(--a3m-bg);
+  border: 1px solid var(--a3m-border);
+  border-radius: 8px;
+  color: var(--a3m-text);
+  font-size: 1rem;
+  width: 100%;
+}
+
+.input-group input:focus,
+.input-group select:focus {
+  outline: none;
+  border-color: var(--a3m-primary);
+}
+
+/* Model mix rows */
+.model-mix {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-top: 1rem;
+}
+
+.model-row {
+  display: grid;
+  grid-template-columns: 1fr 100px auto;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.model-row select,
+.model-row input {
+  padding: 0.5rem;
+  background: var(--a3m-bg);
+  border: 1px solid var(--a3m-border);
+  border-radius: 6px;
+  color: var(--a3m-text);
+  font-size: 0.875rem;
+}
+
+.model-row span {
+  color: var(--a3m-muted);
+  font-size: 0.875rem;
+  white-space: nowrap;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1.25rem;
+  background: var(--a3m-primary);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.btn:hover { background: var(--a3m-accent); }
+.btn-secondary {
+  background: var(--a3m-border);
+  color: var(--a3m-text);
+}
+.btn-secondary:hover { background: #3d3d5a; }
+
+.btn-row {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 1.25rem;
+  flex-wrap: wrap;
+}
+
+/* Results */
+.results-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+@media (max-width: 600px) {
+  .results-grid { grid-template-columns: 1fr; }
+}
+
+.result-card {
+  background: var(--a3m-bg);
+  border: 1px solid var(--a3m-border);
+  border-radius: 10px;
+  padding: 1.25rem;
+  text-align: center;
+}
+
+.result-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--a3m-muted);
+  margin-bottom: 0.5rem;
+}
+
+.result-value {
+  font-size: 1.75rem;
+  font-weight: 700;
+}
+
+.result-value.savings { color: var(--a3m-green); }
+.result-value.baseline { color: var(--a3m-muted); text-decoration: line-through; }
+
+/* Breakdown table */
+.breakdown-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+  margin-top: 1rem;
+}
+
+.breakdown-table th {
+  text-align: left;
+  padding: 0.625rem 0.75rem;
+  color: var(--a3m-muted);
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  border-bottom: 1px solid var(--a3m-border);
+}
+
+.breakdown-table td {
+  padding: 0.625rem 0.75rem;
+  border-bottom: 1px solid var(--a3m-border);
+}
+
+.breakdown-table tr:last-child td { border-bottom: none; }
+.breakdown-table .num { text-align: right; font-variant-numeric: tabular-nums; }
+.breakdown-table .savings-cell { color: var(--a3m-green); }
+
+/* Share bar */
+.share-bar {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  margin-top: 1rem;
+}
+
+.share-bar input {
+  flex: 1;
+  padding: 0.5rem 0.75rem;
+  background: var(--a3m-bg);
+  border: 1px solid var(--a3m-border);
+  border-radius: 6px;
+  color: var(--a3m-text);
+  font-size: 0.8rem;
+  font-family: monospace;
+}
+
+/* Chart */
+.chart-container {
+  position: relative;
+  height: 250px;
+  margin: 1.5rem 0;
+}
+
+.chart-bar {
+  position: absolute;
+  bottom: 0;
+  width: 40%;
+  border-radius: 6px 6px 0 0;
+  transition: height 0.5s ease;
+}
+
+.chart-bar.baseline {
+  left: 15%;
+  background: var(--a3m-muted);
+  opacity: 0.5;
+}
+
+.chart-bar.a3m {
+  right: 15%;
+  background: var(--a3m-primary);
+}
+
+/* Hidden until calculated */
+.hidden { display: none; }
+
+/* Footer */
+.footer {
+  text-align: center;
+  color: var(--a3m-muted);
+  font-size: 0.75rem;
+  margin-top: 2rem;
+}
+
+.footer a { color: var(--a3m-accent); text-decoration: none; }

package/apps/cost-calculator/calculator.js

@@ -0,0 +1,150 @@
+/**
+ * A3M Router Cost Calculator
+ * Pure JS, no dependencies.
+ */
+
+// --- Pricing constants (per 1M tokens) ---
+const PRICING = {
+  'gpt-4o': { input: 5.0, output: 15.0 },
+  'gpt-4o-mini': { input: 0.15, output: 0.60 },
+  'claude-3.5-sonnet': { input: 3.0, output: 15.0 },
+  'claude-3-haiku': { input: 0.25, output: 1.25 },
+  'gemini-1.5-pro': { input: 3.5, output: 10.5 },
+  'gemini-1.5-flash': { input: 0.075, output: 0.30 },
+  'groq-llama-3.3-70b': { input: 0.59, output: 0.79 },
+  'groq-mixtral-8x7b': { input: 0.24, output: 0.24 },
+};
+
+const ROUTING_SAVINGS = {
+  // % of requests A3M routes to cheaper model
+  'gpt-4o': 0.35,        // 35% routed to 4o-mini
+  'claude-3.5-sonnet': 0.40, // 40% routed to Haiku
+  'gemini-1.5-pro': 0.45,    // 45% routed to Flash
+};
+
+const AVG_TOKENS = {
+  input: 500,    // avg input tokens
+  output: 800,   // avg output tokens
+};
+
+/**
+ * @param {{ requestsPerMonth: number, modelMix: Array<{model: string, percent: number}> }} cfg
+ * @returns {{ totalCost: number, breakdown: Array<{model, requests, cost}> }}
+ */
+function calculateBaselineCost({ requestsPerMonth, modelMix }) {
+  const breakdown = modelMix.map(({ model, percent }) => {
+    const reqCount = Math.round(requestsPerMonth * (percent / 100));
+    const pricing = PRICING[model] || { input: 3.0, output: 15.0 };
+    const cost = reqCount * (
+      (pricing.input * AVG_TOKENS.input / 1_000_000) +
+      (pricing.output * AVG_TOKENS.output / 1_000_000)
+    );
+    return { model, requests: reqCount, cost };
+  });
+
+  const totalCost = breakdown.reduce((sum, b) => sum + b.cost, 0);
+  return { totalCost, breakdown };
+}
+
+/**
+ * @param {{ requestsPerMonth: number, modelMix: Array<{model: string, percent: number}> }} cfg
+ * @returns {{ totalCost: number, breakdown: Array<{model, requests, cost, routedTo?, savings?}> }}
+ */
+function calculateA3mCost({ requestsPerMonth, modelMix }) {
+  const breakdown = modelMix.map(({ model, percent }) => {
+    const reqCount = Math.round(requestsPerMonth * (percent / 100));
+    const routingSavings = ROUTING_SAVINGS[model] || 0;
+    const routedRequests = Math.round(reqCount * routingSavings);
+
+    // Baseline: all requests on premium model
+    const pricing = PRICING[model] || { input: 3.0, output: 15.0 };
+    const baselineCost = reqCount * (
+      (pricing.input * AVG_TOKENS.input / 1_000_000) +
+      (pricing.output * AVG_TOKENS.output / 1_000_000)
+    );
+
+    // A3M: some routed to cheaper model
+    // Find a cheaper alternative (heuristic: -mini, -flash, -haiku, or groq)
+    const cheaper = findCheaperModel(model);
+    const cheaperPricing = cheaper ? PRICING[cheaper] : pricing;
+
+    const a3mCost = (reqCount - routedRequests) * (
+      (pricing.input * AVG_TOKENS.input / 1_000_000) +
+      (pricing.output * AVG_TOKENS.output / 1_000_000)
+    ) + routedRequests * (
+      (cheaperPricing.input * AVG_TOKENS.input / 1_000_000) +
+      (cheaperPricing.output * AVG_TOKENS.output / 1_000_000)
+    );
+
+    return {
+      model,
+      requests: reqCount,
+      cost: a3mCost,
+      routedTo: routedRequests > 0 ? cheaper : null,
+      savings: baselineCost - a3mCost,
+    };
+  });
+
+  const totalCost = breakdown.reduce((sum, b) => sum + b.cost, 0);
+  const totalSavings = breakdown.reduce((sum, b) => sum + (b.savings || 0), 0);
+  return { totalCost, breakdown, totalSavings };
+}
+
+function findCheaperModel(model) {
+  const cheaperMap = {
+    'gpt-4o': 'gpt-4o-mini',
+    'claude-3.5-sonnet': 'claude-3-haiku',
+    'gemini-1.5-pro': 'gemini-1.5-flash',
+    'groq-llama-3.3-70b': 'groq-mixtral-8x7b',
+  };
+  return cheaperMap[model] || null;
+}
+
+/**
+ * @param {number} baseline
+ * @param {number} a3m
+ * @returns {{ savingsPercent: number, savingsAmount: number }}
+ */
+function computeSavings(baseline, a3m) {
+  return {
+    savingsPercent: baseline > 0 ? ((baseline - a3m) / baseline) * 100 : 0,
+    savingsAmount: baseline - a3m,
+  };
+}
+
+/**
+ * Encodes calculator config into a URL-safe string
+ * @param {{ requestsPerMonth: number, modelMix: Array }} cfg
+ * @returns {string} base64url encoded config
+ */
+function encodeConfig({ requestsPerMonth, modelMix }) {
+  const json = JSON.stringify({ requestsPerMonth, modelMix });
+  // btoa but URL-safe
+  return btoa(json).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+}
+
+/**
+ * Decodes a URL-safe base64 string back to config
+ * @param {string} encoded
+ * @returns {{ requestsPerMonth: number, modelMix: Array }}
+ */
+function decodeConfig(encoded) {
+  const base64 = encoded.replace(/-/g, '+').replace(/_/g, '/');
+  const json = atob(base64);
+  return JSON.parse(json);
+}
+
+/**
+ * Generates a full shareable URL
+ * @param {{ requestsPerMonth: number, modelMix: Array }} cfg
+ * @returns {string}
+ */
+function generateShareableLink(cfg) {
+  const encoded = encodeConfig(cfg);
+  return `${window.location.origin}${window.location.pathname}?cfg=${encoded}`;
+}
+
+// --- Exports for testing ---
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { calculateBaselineCost, calculateA3mCost, computeSavings, encodeConfig, decodeConfig, PRICING };
+}