Hugging Face's logo

Spaces:
FrameByFrame
/
README
Running

App Files Community
README / assets /ecosystem-map.svg
vijaym's picture
vijaym
Replace overlapping text tables with vector ecosystem graphic
f2ed7cd verified
preview code
|
Raw History Blame Contribute Delete
10.1 kB
<svg xmlns="http://www.w3.org/2000/svg" width="1400" height="1080" viewBox="0 0 1400 1080" role="img" aria-labelledby="title desc">
<title id="title">One model layer, three FrameByFrame products</title>
<desc id="desc">FrameByFrame powers video and edge intelligence, Arena Live sports analytics, and Aigentux AI agent harness infrastructure.</desc>
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#080b09"/>
<stop offset="1" stop-color="#111811"/>
</linearGradient>
<linearGradient id="violet" x1="0" y1="0" x2="1" y2="0"><stop stop-color="#a855f7"/><stop offset="1" stop-color="#7c3aed"/></linearGradient>
<linearGradient id="green" x1="0" y1="0" x2="1" y2="0"><stop stop-color="#b5f500"/><stop offset="1" stop-color="#65a30d"/></linearGradient>
<linearGradient id="cyan" x1="0" y1="0" x2="1" y2="0"><stop stop-color="#38bdf8"/><stop offset="1" stop-color="#0ea5e9"/></linearGradient>
<pattern id="grid" width="35" height="35" patternUnits="userSpaceOnUse"><path d="M35 0H0V35" fill="none" stroke="#f0f2ef" stroke-opacity=".04"/></pattern>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
</defs>
<rect width="1400" height="1080" rx="28" fill="url(#bg)"/>
<rect width="1400" height="1080" rx="28" fill="url(#grid)"/>
<rect x="1" y="1" width="1398" height="1078" rx="27" fill="none" stroke="#f0f2ef" stroke-opacity=".16" stroke-width="2"/>
<g transform="translate(70 66)">
<rect width="48" height="40" rx="7" fill="url(#violet)"/>
<path d="M11 28 18 11h20l-4 8H23l-2 5h12l-4 8H18l-3 8H7z" fill="#fff"/>
<text x="70" y="19" fill="#b5f500" font-family="Arial, Helvetica, sans-serif" font-size="13" font-weight="700" letter-spacing="3">FRAMEBYFRAME / PRODUCT ECOSYSTEM</text>
<text x="70" y="62" fill="#f0f2ef" font-family="Arial, Helvetica, sans-serif" font-size="48" font-weight="700" letter-spacing="-2">ONE MODEL LAYER. THREE PRODUCTS.</text>
<text x="70" y="95" fill="#929b95" font-family="Arial, Helvetica, sans-serif" font-size="18">Open models that move from video and edge intelligence into sports and enterprise agents.</text>
</g>
<!-- Product lanes -->
<g transform="translate(55 210)">
<rect width="410" height="450" rx="16" fill="#0d120f" stroke="#a855f7" stroke-opacity=".55" stroke-width="2"/>
<rect width="410" height="7" rx="3" fill="url(#violet)"/>
<text x="30" y="48" fill="#a855f7" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="700" letter-spacing="3">01 / VIDEO + EDGE</text>
<g transform="translate(30 78)" fill="none" stroke="#a855f7" stroke-width="3">
<rect x="3" y="11" width="82" height="59" rx="8"/>
<circle cx="44" cy="41" r="17"/>
<path d="M85 25 112 12v58L85 57z"/>
<path d="M-9 4h22M-9 4v22M97 4h22v22M-9 77v22h22M119 77v22H97" opacity=".65"/>
</g>
<text x="30" y="205" fill="#f0f2ef" font-family="Arial, Helvetica, sans-serif" font-size="31" font-weight="700">FRAME BY FRAME</text>
<text x="30" y="238" fill="#c6b5ff" font-family="Arial, Helvetica, sans-serif" font-size="16" font-weight="700">COMPUTER VISION · VIDEO ANALYTICS</text>
<text x="30" y="263" fill="#c6b5ff" font-family="Arial, Helvetica, sans-serif" font-size="16" font-weight="700">EDGE AI · AI AGENTS</text>
<text x="30" y="315" fill="#929b95" font-family="Arial, Helvetica, sans-serif" font-size="17">Turn video into useful intelligence—</text>
<text x="30" y="342" fill="#929b95" font-family="Arial, Helvetica, sans-serif" font-size="17">from cloud-scale analytics to low-</text>
<text x="30" y="369" fill="#929b95" font-family="Arial, Helvetica, sans-serif" font-size="17">latency inference on edge hardware.</text>
<rect x="30" y="400" width="155" height="28" rx="14" fill="#a855f7" fill-opacity=".12" stroke="#a855f7" stroke-opacity=".4"/>
<text x="48" y="419" fill="#c6b5ff" font-family="Arial, Helvetica, sans-serif" font-size="13" font-weight="700">ARTELLIGENCE.AI ↗</text>
</g>
<g transform="translate(495 210)">
<rect width="410" height="450" rx="16" fill="#0d120f" stroke="#b5f500" stroke-opacity=".55" stroke-width="2"/>
<rect width="410" height="7" rx="3" fill="url(#green)"/>
<text x="30" y="48" fill="#b5f500" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="700" letter-spacing="3">02 / SPORTS ANALYTICS</text>
<g transform="translate(30 75)" fill="none" stroke="#b5f500" stroke-width="3">
<rect x="2" y="7" width="113" height="73" rx="4"/>
<path d="M59 7v73M2 43h113M29 7v73M88 7v73" opacity=".42"/>
<path d="M-16 99C21 88 37 63 52 46s34-8 52 13 27 16 45-16" filter="url(#glow)"/>
<circle cx="89" cy="42" r="8" fill="#b5f500" stroke="none"/>
</g>
<text x="30" y="205" fill="#f0f2ef" font-family="Arial, Helvetica, sans-serif" font-size="31" font-weight="700">ARENA LIVE</text>
<text x="30" y="238" fill="#d9f99d" font-family="Arial, Helvetica, sans-serif" font-size="16" font-weight="700">LIVE STREAMING · PLAYER INSIGHTS</text>
<text x="30" y="263" fill="#d9f99d" font-family="Arial, Helvetica, sans-serif" font-size="16" font-weight="700">SMART VENUES · EDGE AI</text>
<text x="30" y="315" fill="#929b95" font-family="Arial, Helvetica, sans-serif" font-size="17">Turn any court into a smart arena—</text>
<text x="30" y="342" fill="#929b95" font-family="Arial, Helvetica, sans-serif" font-size="17">with live matches, automated highlights,</text>
<text x="30" y="369" fill="#929b95" font-family="Arial, Helvetica, sans-serif" font-size="17">and performance intelligence.</text>
<rect x="30" y="400" width="145" height="28" rx="14" fill="#b5f500" fill-opacity=".12" stroke="#b5f500" stroke-opacity=".4"/>
<text x="50" y="419" fill="#d9f99d" font-family="Arial, Helvetica, sans-serif" font-size="13" font-weight="700">ARENALIVE.AI ↗</text>
</g>
<g transform="translate(935 210)">
<rect width="410" height="450" rx="16" fill="#0d120f" stroke="#38bdf8" stroke-opacity=".55" stroke-width="2"/>
<rect width="410" height="7" rx="3" fill="url(#cyan)"/>
<text x="30" y="48" fill="#38bdf8" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="700" letter-spacing="3">03 / AGENT HARNESS</text>
<g transform="translate(30 75)" fill="none" stroke="#38bdf8" stroke-width="3">
<circle cx="57" cy="43" r="25" fill="#38bdf8" fill-opacity=".14"/>
<circle cx="57" cy="43" r="7" fill="#38bdf8"/>
<circle cx="7" cy="8" r="9"/><circle cx="109" cy="8" r="9"/><circle cx="7" cy="80" r="9"/><circle cx="109" cy="80" r="9"/>
<path d="M14 14 42 34M100 14 72 34M14 74 42 52M100 74 72 52"/>
</g>
<text x="30" y="205" fill="#f0f2ef" font-family="Arial, Helvetica, sans-serif" font-size="31" font-weight="700">AigentUX</text>
<text x="30" y="238" fill="#bae6fd" font-family="Arial, Helvetica, sans-serif" font-size="16" font-weight="700">AI AGENTS · ORCHESTRATION</text>
<text x="30" y="263" fill="#bae6fd" font-family="Arial, Helvetica, sans-serif" font-size="16" font-weight="700">TOOLS + MEMORY · WHITE-LABEL</text>
<text x="30" y="315" fill="#929b95" font-family="Arial, Helvetica, sans-serif" font-size="17">Build, orchestrate, and deploy</text>
<text x="30" y="342" fill="#929b95" font-family="Arial, Helvetica, sans-serif" font-size="17">customizable enterprise assistants</text>
<text x="30" y="369" fill="#929b95" font-family="Arial, Helvetica, sans-serif" font-size="17">with a governed agent harness.</text>
<rect x="30" y="400" width="128" height="28" rx="14" fill="#38bdf8" fill-opacity=".12" stroke="#38bdf8" stroke-opacity=".4"/>
<text x="52" y="419" fill="#bae6fd" font-family="Arial, Helvetica, sans-serif" font-size="13" font-weight="700">AIGENTUX.COM ↗</text>
</g>
<!-- Shared layer -->
<g transform="translate(55 715)">
<text x="0" y="0" fill="#b5f500" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="700" letter-spacing="3">THE SHARED MODEL LAYER</text>
<text x="0" y="45" fill="#f0f2ef" font-family="Arial, Helvetica, sans-serif" font-size="34" font-weight="700">BUILT ONCE. USEFUL EVERYWHERE.</text>
<path d="M0 76H1290" stroke="#f0f2ef" stroke-opacity=".16"/>
<g transform="translate(0 112)">
<circle cx="12" cy="12" r="7" fill="#a855f7" filter="url(#glow)"/>
<text x="38" y="18" fill="#f0f2ef" font-family="Arial, Helvetica, sans-serif" font-size="21" font-weight="700">TRUST + GUARDRAILS</text>
<text x="38" y="46" fill="#929b95" font-family="Arial, Helvetica, sans-serif" font-size="16">Prompt-injection defense · Content safety · Multilingual moderation</text>
<path d="M730 12H1260" stroke="#a855f7" stroke-opacity=".65"/><circle cx="1260" cy="12" r="5" fill="#a855f7"/>
</g>
<g transform="translate(0 190)">
<circle cx="12" cy="12" r="7" fill="#b5f500" filter="url(#glow)"/>
<text x="38" y="18" fill="#f0f2ef" font-family="Arial, Helvetica, sans-serif" font-size="21" font-weight="700">PRIVACY + PII</text>
<text x="38" y="46" fill="#929b95" font-family="Arial, Helvetica, sans-serif" font-size="16">Korean PII detection · Production redaction · Local-first inference</text>
<path d="M730 12H1260" stroke="#b5f500" stroke-opacity=".65"/><circle cx="1260" cy="12" r="5" fill="#b5f500"/>
</g>
<g transform="translate(0 268)">
<circle cx="12" cy="12" r="7" fill="#38bdf8" filter="url(#glow)"/>
<text x="38" y="18" fill="#f0f2ef" font-family="Arial, Helvetica, sans-serif" font-size="21" font-weight="700">LANGUAGE + TOOL USE</text>
<text x="38" y="46" fill="#929b95" font-family="Arial, Helvetica, sans-serif" font-size="16">100+ language identification · Function-calling adapters · Agent memory</text>
<path d="M730 12H1260" stroke="#38bdf8" stroke-opacity=".65"/><circle cx="1260" cy="12" r="5" fill="#38bdf8"/>
</g>
</g>
</svg>