Hardcode growth metrics with time-based increments (#5470)

* Hardcode growth metrics with time-based increments

Replace API-fetched stats with hardcoded baseline values that grow over time:
- Requests: 3 billion base, +50 million/day
- Tokens: 31.5 trillion base, +1 trillion/month
- Users: 20.6 million base, +1 million/month

Baseline date is January 2, 2025. Update the constants periodically with real numbers.

* Fix SSR hydration and timezone issues in Stats component

- Initialize metrics state as null to avoid SSR/client mismatch
- Use UTC format for baseline date to ensure consistent timezone handling
- Use 30.44 days/month for more accurate month calculations
- Extract magic numbers (MS_PER_DAY, DAYS_PER_MONTH) as named constants
- Fall back to baseline values during SSR/initial render
- Update baseline date to January 6, 2025

* Update baseline metrics with real numbers

- Requests: 4.9 billion (was 3 billion)
- Tokens: 1.1 trillion/month (was 31.5 trillion)
- Users: 28.6 million (was 20.6 million)

* Update growth rates to match actual metrics

- Requests: 10M/day (was 50M/day)
- Tokens & Users: 5% MoM compound growth (was flat rate)

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: chitalian

bifrost/app/page.tsx

@@ -24,26 +24,7 @@ const LoadingSection = ({ height = "h-96" }: { height?: string }) => (
   ></div>
 );
 
-export default async function Home() {
-  const response = await fetch(
-    "https://api.helicone.ai/v1/public/dataisbeautiful/total-values",
-    {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      next: { revalidate: 3600 },
-    }
-  );
-
-  const totalValuesData = response.ok
-    ? ((await response.json()).data as {
-        total_requests?: number;
-        total_tokens?: number;
-        total_cost?: number;
-      })
-    : undefined;
-
+export default function Home() {
   return (
     <Layout>
       <main className="bg-white text-landing-description">
@@ -72,7 +53,7 @@ export default async function Home() {
             <BigDashboard />
           </LazyLoadComponent>
           <LazyLoadComponent fallback={<LoadingSection height="h-48" />}>
-            <Stats totalValuesData={totalValuesData} />
+            <Stats />
           </LazyLoadComponent>
           <LazyLoadComponent fallback={<LoadingSection />}>
             <OpenSource />

bifrost/components/home/Stats.tsx

@@ -1,35 +1,67 @@
 "use client";
 
 import { ISLAND_WIDTH } from "@/lib/utils";
-// import { humanReadableNumber } from "@/app/utils/formattingUtils";
 import { cn } from "@/lib/utils";
 import { useEffect, useRef, useState } from "react";
 
-function humanReadableNumber(num: number): string {
-  if (num >= 1_000_000_000_000) {
-    return `${Math.ceil(num / 1_000_000_000_00) / 10} trillion`;
-  } else if (num >= 1_000_000_000) {
-    return `${Math.ceil(num / 1_000_000_00) / 10} billion`;
-  } else if (num >= 1_000_000) {
-    return `${Math.ceil(num / 1_000_00) / 10}M+`;
-  } else if (num >= 1_000) {
-    return `${Math.ceil(num / 100) / 10}k+`;
+// Baseline date: January 6, 2025 (UTC)
+const BASELINE_DATE = new Date("2025-01-06T00:00:00Z");
+
+// Baseline values (update these periodically with real numbers)
+const BASELINE_REQUESTS = 4_855_213_721; // ~4.9 billion
+const BASELINE_TOKENS_TRILLION = 1.1; // ~1.1 trillion tokens per month
+const BASELINE_USERS = 28_645_282; // ~28.6 million
+
+// Growth rates
+const REQUESTS_PER_DAY = 10_000_000; // 10 million per day
+const MONTHLY_GROWTH_RATE = 0.05; // 5% MoM for tokens and users
+
+const MS_PER_DAY = 1000 * 60 * 60 * 24;
+const DAYS_PER_MONTH = 30.44; // Average days per month
+
+function getGrowthMetrics() {
+  const now = new Date();
+  const daysSinceBaseline = Math.floor(
+    (now.getTime() - BASELINE_DATE.getTime()) / MS_PER_DAY
+  );
+  const monthsSinceBaseline = daysSinceBaseline / DAYS_PER_MONTH;
+
+  return {
+    requests: BASELINE_REQUESTS + daysSinceBaseline * REQUESTS_PER_DAY,
+    tokensTrillion:
+      BASELINE_TOKENS_TRILLION * Math.pow(1 + MONTHLY_GROWTH_RATE, monthsSinceBaseline),
+    users: BASELINE_USERS * Math.pow(1 + MONTHLY_GROWTH_RATE, monthsSinceBaseline),
+  };
+}
+
+function formatRequests(num: number): string {
+  if (num >= 1_000_000_000) {
+    return `${(num / 1_000_000_000).toFixed(1)} billion`;
   }
   return num.toLocaleString();
 }
 
-const Stats = ({
-  totalValuesData,
-}: {
-  totalValuesData?: {
-    total_requests?: number;
-    total_tokens?: number;
-    total_cost?: number;
-  };
-}) => {
+function formatTokens(trillions: number): string {
+  return `${trillions.toFixed(1)} Trillion`;
+}
+
+function formatUsers(num: number): string {
+  if (num >= 1_000_000) {
+    return `${(num / 1_000_000).toFixed(1)} million`;
+  }
+  return num.toLocaleString();
+}
+
+const Stats = () => {
   const [isVisible, setIsVisible] = useState(false);
+  const [metrics, setMetrics] = useState<ReturnType<typeof getGrowthMetrics> | null>(null);
   const elementRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    // Only compute metrics on client to avoid SSR hydration mismatch
+    setMetrics(getGrowthMetrics());
+  }, []);
+
   useEffect(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
@@ -65,11 +97,11 @@ const Stats = ({
               isVisible ? "rotate-[-3deg]" : "rotate-[0  deg]"
             )}
           >
-            {humanReadableNumber(totalValuesData?.total_requests ?? 0)}
+            {formatRequests(metrics?.requests ?? BASELINE_REQUESTS)}
           </span>{" "}
           requests processed,{" "}
-          <span className="text-brand">1 Trillion</span> tokens a month, <span className="text-brand">18.3 million</span>{" "}
-          users tracked
+          <span className="text-brand">{formatTokens(metrics?.tokensTrillion ?? BASELINE_TOKENS_TRILLION)}</span> tokens a month,{" "}
+          <span className="text-brand">{formatUsers(metrics?.users ?? BASELINE_USERS)}</span> users tracked
         </h1>
       </div>
     </div>