/* global React, Icon, EUFlag, useNav */ const { useState: useStateG, useEffect: useEffectG, useRef: useRefG, useMemo: useMemoG } = React; // ============ POP geography ============ // Coordinates in lon/lat — EUMap projects them via d3-geo to align with the real map. // labelDx/labelDy/labelAnchor steer city labels away from each other in dense areas. // Orange Cloud Avenue footprint: 4 strategic bare-metal regions (Paris, Oslo, // Stockholm, Berlin) plus more Orange DCs — clustered in those countries, several // per country, matching the real Cloud Avenue map (not one POP per European city). const POPS = [ // France { id: "paris", city: "Paris", country: "FR", lon: 2.35, lat: 48.86, hub: true, deploy: true, req: "12.4k", lat_ms: 4, labelDx: -10, labelAnchor: "end", labelDy: 0 }, { id: "lille", city: "Lille", country: "FR", lon: 3.06, lat: 50.63, req: "1.8k", lat_ms: 8, labelDx: 8, labelDy: -4 }, { id: "lyon", city: "Lyon", country: "FR", lon: 4.85, lat: 45.76, req: "3.2k", lat_ms: 12, labelDx: -8, labelAnchor: "end", labelDy: 4 }, { id: "marseille", city: "Marseille", country: "FR", lon: 5.37, lat: 43.3, req: "2.1k", lat_ms: 14, labelDx: -8, labelAnchor: "end", labelDy: 4 }, // Germany { id: "berlin", city: "Berlin", country: "DE", lon: 13.4, lat: 52.52, deploy: true, req: "4.6k", lat_ms: 6, labelDx: 8, labelDy: -4 }, { id: "frankfurt", city: "Frankfurt", country: "DE", lon: 8.68, lat: 50.11, req: "3.5k", lat_ms: 9, labelDx: -8, labelAnchor: "end", labelDy: 4 }, { id: "munich", city: "Munich", country: "DE", lon: 11.58, lat: 48.14, req: "2.2k", lat_ms: 13, labelDx: 8, labelDy: 4 }, // Norway { id: "oslo", city: "Oslo", country: "NO", lon: 10.75, lat: 59.91, deploy: true, req: "2.4k", lat_ms: 5, labelDx: 8, labelDy: 0 }, { id: "stavanger", city: "Stavanger", country: "NO", lon: 5.73, lat: 58.97, req: "0.9k", lat_ms: 11, labelDx: -8, labelAnchor: "end", labelDy: 4 }, // Sweden { id: "stockholm", city: "Stockholm", country: "SE", lon: 18.07, lat: 59.33, deploy: true, req: "2.6k", lat_ms: 5, labelDx: 8, labelDy: 0 }, { id: "gothenburg",city: "Gothenburg",country: "SE", lon: 11.97, lat: 57.71, req: "1.1k", lat_ms: 10, labelDx: -8, labelAnchor: "end", labelDy: 4 }, ]; // User clusters — represent end-users near each POP. Coordinates are lon/lat; // projected via the same d3 projection so they stay aligned with the map. const USERS = [ // France { id: "u-paris2", lon: 1.6, lat: 48.2, near: "paris" }, { id: "u-rennes", lon: -1.7, lat: 48.1, near: "paris" }, { id: "u-lille", lon: 3.1, lat: 50.6, near: "lille" }, { id: "u-lyon", lon: 4.9, lat: 45.8, near: "lyon" }, { id: "u-geneva", lon: 6.1, lat: 46.2, near: "lyon" }, { id: "u-marseille", lon: 5.4, lat: 43.4, near: "marseille" }, { id: "u-nice", lon: 7.3, lat: 43.7, near: "marseille" }, // Germany { id: "u-frankfurt", lon: 8.7, lat: 50.1, near: "frankfurt" }, { id: "u-cologne", lon: 6.96, lat: 50.9, near: "frankfurt" }, { id: "u-munich", lon: 11.6, lat: 48.1, near: "munich" }, { id: "u-berlin", lon: 13.4, lat: 52.5, near: "berlin" }, { id: "u-hamburg", lon: 10.0, lat: 53.5, near: "berlin" }, // Norway { id: "u-oslo", lon: 10.8, lat: 59.9, near: "oslo" }, { id: "u-stavanger", lon: 5.7, lat: 59.0, near: "stavanger" }, { id: "u-bergen", lon: 5.3, lat: 60.4, near: "stavanger" }, // Sweden { id: "u-stockholm", lon: 18.1, lat: 59.3, near: "stockholm" }, { id: "u-gothenburg",lon: 12.0, lat: 57.7, near: "gothenburg"}, { id: "u-copenhagen",lon: 12.6, lat: 55.7, near: "gothenburg"}, // Routed in from neighbouring countries (nearest Orange POP) { id: "u-london", lon: -0.1, lat: 51.5, near: "lille" }, { id: "u-brussels", lon: 4.4, lat: 50.8, near: "lille" }, { id: "u-amsterdam", lon: 4.9, lat: 52.4, near: "frankfurt" }, ]; // ============ Screen 5: AI Grid ============ const GridScreen = () => { const { go } = useNav(); const [hovered, setHovered] = useStateG(null); const [selected, setSelected] = useStateG(null); return (
{/* Header */}
Act 3 · Hero

Orange AI Grid · Edge token routing

Your model runs bare-metal in the Cloud Avenue regions (Paris, Oslo, Stockholm, Berlin), served from {POPS.length} Orange POPs across France, Germany, Norway and Sweden. Every request is routed to the POP closest to the end user, never outside the EU. Click any POP to drill down.

NVIDIA
Inference engine
NVIDIA Dynamo
{/* Hero map */}
{/* Bottom row */}
{/* Differentiator banner */}
Orange vision
This edge AI Grid layer does not exist at Gcore, OVH or Scaleway. Orange is the only EU operator able to combine sovereign bare metal and edge routing on its own fibre network.
{/* CTA */}
{/* POP detail drill-down panel */} {selected && ( setSelected(null)} /> )}
); }; // ============ POP detail drill-down panel ============ const PopDetailPanel = ({ popId, onClose }) => { const pop = POPS.find(p => p.id === popId); if (!pop) return null; const isDeploy = pop.hub || pop.deploy; // runs the model bare metal const carbon = (window.CARBON_INTENSITY || {})[pop.country] || 250; // Per-POP details — deterministic by ID so reopening shows same numbers const seed = popId.split("").reduce((a, c) => a + c.charCodeAt(0), 0); const r = (n) => (Math.sin(seed * n) + 1) / 2; // 0..1 const data = { req: parseFloat(pop.req) * 1000, // req/min as a number p50: pop.lat_ms, p99: pop.lat_ms + Math.round(15 + r(2) * 25), cacheHit: 68 + Math.round(r(3) * 22), capacity: pop.deploy ? ((window.POP_BY_ID || {})[pop.id]?.gpuFree || 64) : Math.round(40 + r(4) * 60), used: 0, // computed below uptime: 99.95 + r(5) * 0.05, peeringIxps: pop.hub ? ["FranceIX", "AMS-IX", "DE-CIX"] : ["FranceIX", "DE-CIX"].slice(0, 1 + Math.round(r(6) * 1)), cacheRefreshed: isDeploy ? "—" : `${Math.round(r(7) * 28 + 2)} min ago`, // Sparkline series (24 points) spark: Array.from({ length: 24 }, (_, i) => 50 + 40 * Math.sin(i * 0.6 + seed) + 20 * Math.cos(i * 0.3 + seed * 2)), // Top countries served (varies by pop region) topCountries: topCountriesFor(pop), }; data.used = Math.round(data.capacity * (0.4 + r(8) * 0.45)); return ( <>
); }; const PopStat = ({ label, value, highlight }) => { const c = highlight === "good" ? "#1e8e1e" : highlight === "warn" ? "#b45309" : "#000"; return (
{label}
{value}
); }; const PopRow = ({ label, children }) => (
{label}
{children}
); const Sparkline = ({ series }) => { const w = 320, h = 60; const min = Math.min(...series), max = Math.max(...series); const range = max - min || 1; const toX = (i) => (i / (series.length - 1)) * w; const toY = (v) => h - ((v - min) / range) * (h - 8) - 4; const path = series.map((v, i) => `${i === 0 ? "M" : "L"}${toX(i).toFixed(1)},${toY(v).toFixed(1)}`).join(" "); const area = `${path} L${toX(series.length - 1).toFixed(1)},${h} L0,${h} Z`; return ( ); }; function topCountriesFor(pop) { // Region-appropriate top countries served (shares illustrative). const FR = [["France",46],["Belgium",15],["Switzerland",13],["Luxembourg",9],["Spain",7]]; const DE = [["Germany",54],["Austria",15],["Czechia",10],["Switzerland",8],["Netherlands",7]]; const NO = [["Norway",64],["Sweden",14],["Denmark",11],["Iceland",6],["Finland",5]]; const SE = [["Sweden",60],["Denmark",16],["Norway",12],["Finland",8],["Estonia",4]]; const byCountry = { FR, DE, NO, SE }; const set = byCountry[pop.country] || FR; return set.map(([name, share]) => ({ name, share })); } // ============ Hero map (uses real Europe geography via d3-geo) ============ const GridMap = ({ hovered, setHovered, selected, setSelected }) => { const [tokens, setTokens] = useStateG([]); const nextId = useRefG(0); // Spawn tokens continuously useEffectG(() => { let alive = true; const spawn = () => { if (!alive) return; const user = USERS[Math.floor(Math.random() * USERS.length)]; const target = POPS.find(p => p.id === user.near); if (target) { const direction = Math.random() < 0.5 ? "in" : "out"; const id = nextId.current++; const dur = 1100 + Math.random() * 700; setTokens(ts => [...ts, { id, userId: user.id, popId: target.id, direction, dur }]); setTimeout(() => setTokens(ts => ts.filter(t => t.id !== id)), dur + 200); } setTimeout(spawn, 180 + Math.random() * 220); }; spawn(); return () => { alive = false; }; }, []); // Fibre mesh edges between cities (Orange backbone) const MESH = [ ["paris", "lille"], ["paris", "lyon"], ["lyon", "marseille"], ["paris", "frankfurt"], ["berlin", "frankfurt"], ["frankfurt", "munich"], ["berlin", "munich"], ["oslo", "stockholm"], ["oslo", "stavanger"], ["stockholm", "gothenburg"], ["oslo", "gothenburg"], ["paris", "oslo"], ["berlin", "stockholm"], ["paris", "berlin"], ["lille", "frankfurt"], ]; return (
{({ projection, projectedPops }) => { // Resolve POPs by ID for the layers we inject const byId = Object.fromEntries(projectedPops.map(p => [p.id, p])); const projectUser = (u) => { const xy = projection([u.lon, u.lat]); return xy ? { x: xy[0], y: xy[1] } : null; }; const userPositions = Object.fromEntries(USERS.map(u => [u.id, { ...u, ...(projectUser(u) || { x: 0, y: 0 }) }])); const paris = byId.paris; return ( <> {/* Fibre mesh — dashed faint orange */} {MESH.map(([a, b], i) => { const A = byId[a], B = byId[b]; if (!A || !B) return null; return ( ); })} {/* Backbone: every POP → Paris (the inference origin) */} {projectedPops.filter(p => !p.hub).map(p => ( paris ? ( ) : null ))} {/* User markers (projected via lat/lon) */} {Object.values(userPositions).map((u, i) => ( ))} {/* Token streams */} {tokens.map(t => { const u = userPositions[t.userId]; const p = byId[t.popId]; if (!u || !p) return null; return ; })} ); }} {/* Tooltip */} {hovered && (() => { const proj = makeProjection(); const p = POPS.find(pp => pp.id === hovered); if (!p) return null; const xy = proj([p.lon, p.lat]); if (!xy) return null; const leftPct = (xy[0] / 1000) * 100; const topPct = (xy[1] / 600) * 100; return ; })()} {/* Legend */}
{/* Live counter */}
Tokens routed · last min
{/* POP count badge */}
EU coverage
{POPS.length} Active POPs
); }; // Mercator helper that mirrors EUMap's projection (used for tooltips) const makeProjection = () => { // Returns a function (lon, lat) -> [x, y] in 1000x600 coords. // Mirror the EUMap fit logic by sampling a few European bounds. if (!window.d3) return ([lon, lat]) => [ ((lon + 12) / 34) * 1000, ((62 - lat) / 26) * 600, ]; // d3 projection matching the grid EUMap (center [9,53], scaleFactor 0.72 → scale 720): const proj = d3.geoMercator() .center([9, 53]) .scale(720) .translate([500, 300]); return proj; }; const TokenStream = ({ from, to, direction, dur }) => { if (!from || !to) return null; const mx = (from.x + to.x) / 2; const my = (from.y + to.y) / 2; const dx = to.x - from.x, dy = to.y - from.y; const len = Math.sqrt(dx * dx + dy * dy) || 1; const cx = mx + (-dy / len) * 10; const cy = my + ( dx / len) * 10; const path = `M${from.x},${from.y} Q${cx},${cy} ${to.x},${to.y}`; return ( ); }; const PopTooltip = ({ pop, leftPct, topPct }) => (
{pop.city} POP
{pop.req} req/min · {pop.lat_ms}ms local latency
{pop.hub &&
↳ Bare metal inference
}
); const LegendRow = ({ color, label, filled, dot, line, small }) => (
{line ? ( ) : ( )} {label}
); const CountUp = () => { const [n, setN] = useStateG(847123); useEffectG(() => { const t = setInterval(() => setN(x => x + Math.floor(20 + Math.random() * 90)), 200); return () => clearInterval(t); }, []); return n.toLocaleString(); }; // ============ POP list ============ const PopList = ({ hovered, setHovered, onSelect }) => { const total = POPS.reduce((s, p) => s + parseFloat(p.req), 0); return (

Active POPs

{POPS.length}/{POPS.length} · 100% healthy
{POPS.map((p, i) => { const pct = (parseFloat(p.req) / total) * 100; return (
setHovered(p.id)} onMouseLeave={() => setHovered(null)} onClick={() => onSelect && onSelect(p.id)} style={{ padding: "10px 20px", display: "grid", gridTemplateColumns: "20px 1fr 70px 60px", gap: 12, alignItems: "center", borderBottom: i < POPS.length - 1 ? "1px solid var(--line)" : 0, background: hovered === p.id ? "var(--color-grey-100)" : "transparent", transition: "background var(--dur-fast)", cursor: "pointer", }}>
{p.city} {p.hub && HUB}
{p.country}
{p.req}
req/min
{p.lat_ms}ms
); })}
); }; // ============ How it works ============ const HowItWorks = () => { const steps = [ { n: "01", title: "Deployed across Cloud Avenue regions", sub: "NVIDIA Dynamo · Oslo · Stockholm · Berlin · Paris", desc: "Bare-metal inference on NVIDIA H100 GPUs, served with NVIDIA Dynamo (disaggregated prefill/decode). Choose low-carbon Nordic or French grids. Data stays in the EU.", icon: "server", }, { n: "02", title: "Lightweight cache at every edge POP", sub: "Orange edge network", desc: "Each Orange edge POP keeps a lightweight inference cache (frequent prompts, embeddings). First hop = the closest POP.", icon: "grid", }, { n: "03", title: "Token served via the closest POP", sub: "Never outside EU", desc: "The end user receives tokens from the closest edge POP, via the Orange fibre backbone.", icon: "bolt", }, ]; return (

How it works

{steps.map((s, i) => (
STEP
{s.n}
{s.title}
{s.sub}
{s.desc}
))}
); }; Object.assign(window, { GridScreen, POPS });