Skip to content

Commit 669916e

Browse files
dreaming-pandadreaming-panda
authored
Update index.html
1 parent bfd54af commit 669916e

1 file changed

Lines changed: 2 additions & 200 deletions

File tree

‎index.html‎

Lines changed: 2 additions & 200 deletions
Original file line numberDiff line numberDiff line change
@@ -639,7 +639,7 @@ <h4 className="text-xs font-bold text-slate-300">Attention Backend</h4>
639639
return (
640640
<div className="my-10 p-6 bg-white border border-slate-200 rounded-xl shadow-sm">
641641
<h3 className="text-sm font-bold text-slate-500 uppercase tracking-wide mb-6">
642-
Vortex Sparse Attention vs. Full attention
642+
Vortex Sparse Attention vs. Full Attention
643643
</h3>
644644

645645
{/* 3 行 BarChart，每行显示 3 个柱子 */}
@@ -895,205 +895,7 @@ <h3 className="text-sm font-bold text-slate-500 uppercase tracking-wide mb-6">
895895
"Progress slows not because the ideas aren’t good, but because making them run in scale is exhausting."
896896
</p>
897897

898-
{/* Ideal Framework */}
899-
<SectionHeader title="2. What is an ideal framework?" />
900-
<p className="text-slate-700 mb-6">
901-
A helpful analogy comes from the evolution of Deep Learning. <strong>PyTorch</strong> succeeded because it separated concerns:
902-
</p>
903-
<DeepLearningArchitecture />
904-
905-
<p className="text-slate-700">
906-
In contrast, to play with a sparse attention algorithm, users need to be a full stack expert: from algorithm design to kernel implementation. Definitely, Sparse attention deserves the same kind of ecosystem as deep learning.
907-
</p>
908-
909-
{/* Challenges */}
910-
<SectionHeader title="3. Core Challenges" />
911-
912-
<p className="text-slate-700">
913-
Establishing a proper abstraction for sparse attention models has extra difficulty from torch. Torch focuses on one-time computation where everything is explicit, while we need to consider the tensors are coming from a serving system. To make this clear, we introduce the core challenges from a well-known example of sparse attention, e.g., block sparse attention.
914-
</p>
915-
{/* --- NEW PLACEMENT --- */}
916-
<BlockSparseAttentionExample />
917-
<p className="text-slate-700 mb-6">
918-
The code above, while algorithmically correct, faces the following three challenges when attempting to run efficiently and faithfully.
919-
</p>
920-
<CoreChallenges />
921-
922-
{/* Vortex Solution */}
923-
<SectionHeader title="4. Vortex" />
924-
<p className="text-slate-700 mb-6">
925-
Vortex is the bridge. It lets developers write sparse attention like standard PyTorch, yet gives serving systems the structure they need to execute efficiently.
926-
</p>
927-
928-
<p className="text-slate-700 mb-6">
929-
Below is the block sparse attention written in Vortex, where we introduce 3 nice features.
930-
</p>
931-
932-
<BlockSparseAttentionVortexExample />
933-
934-
<h3 className="font-bold text-lg text-slate-900 mt-8 mb-4">4.1 Simple Entry and Definition</h3>
935-
<div className="mb-6 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm leading-relaxed text-slate-700">
936-
<p>
937-
Users define a sparse attention algorithm by subclassing{" "}
938-
<span className="font-semibold text-slate-900">vFlow</span>. The subclass exposes three key entry points:
939-
</p>
940-
<ul className="mt-2 list-disc list-inside space-y-1">
941-
<li>
942-
<span className="font-mono text-xs bg-slate-200/70 px-1.5 py-0.5 rounded">
943-
create_cache
944-
</span>
945-
<span className="ml-1">
946-
defines the shape and name of the cache.
947-
</span>
948-
</li>
949-
<li>
950-
<span className="font-mono text-xs bg-slate-200/70 px-1.5 py-0.5 rounded">
951-
forward_cache
952-
</span>
953-
<span className="ml-1">
954-
specifies how the cache is computed and updated.
955-
</span>
956-
</li>
957-
<li>
958-
<span className="font-mono text-xs bg-slate-200/70 px-1.5 py-0.5 rounded">
959-
forward_indexer
960-
</span>
961-
<span className="ml-1">
962-
tells the runtime how to derive the required indices from the saved cache.
963-
</span>
964-
</li>
965-
</ul>
966-
</div>
967-
968-
{/* --- NEW PLACEMENT --- */}
969-
970-
<VortexConfigurationDiagram />
971-
972-
973-
<h3 className="font-bold text-lg text-slate-900 mt-8 mb-4">4.2 Simple Program</h3>
974-
<div className="mb-6 rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm leading-relaxed text-green-900">
975-
<p className="font-semibold mb-1 flex items-center gap-2">
976-
<span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-green-200 text-[10px] font-bold">
977-
✓
978-
</span>
979-
Layout–invariant view of tensors
980-
</p>
981-
<p className="text-green-900/90">
982-
No matter what the actual layout is
983-
(<span className="font-mono text-xs bg-white/70 px-1 py-0.5 rounded border border-green-100">
984-
Flat
985-
</span>
986-
,
987-
<span className="font-mono text-xs bg-white/70 px-1 py-0.5 rounded border border-green-100">
988-
Ragged
989-
</span>
990-
,
991-
<span className="font-mono text-xs bg-white/70 px-1 py-0.5 rounded border border-green-100">
992-
Paged
993-
</span>
994-
) in the serving system, users can always assume:
995-
</p>
996-
<ul className="mt-2 list-disc list-inside space-y-1 text-green-900/90">
997-
<li>
998-
<span className="font-mono text-xs bg-white/80 px-1 py-0.5 rounded border border-green-100">
999-
query
1000-
</span>{" "}
1001-
has shape{" "}
1002-
<span className="font-mono text-xs bg-white/80 px-1 py-0.5 rounded border border-green-100">
1003-
[1, G, D]
1004-
</span>
1005-
</li>
1006-
<li>
1007-
<span className="font-mono text-xs bg-white/80 px-1 py-0.5 rounded border border-green-100">
1008-
cache
1009-
</span>{" "}
1010-
has shape{" "}
1011-
<span className="font-mono text-xs bg-white/80 px-1 py-0.5 rounded border border-green-100">
1012-
[seq_length, r, c]
1013-
</span>
1014-
, where{" "}
1015-
<span className="font-mono text-xs bg-white/80 px-1 py-0.5 rounded border border-green-100">
1016-
(r, c)
1017-
</span>{" "}
1018-
is defined by{" "}
1019-
<span className="font-mono text-xs bg-white/80 px-1 py-0.5 rounded border border-green-100">
1020-
create_cache
1021-
</span>
1022-
.
1023-
</li>
1024-
</ul>
1025-
</div>
1026-
<div className="mb-6 text-sm leading-relaxed text-slate-800">
1027-
<p>
1028-
Vortex enables this by extending the definition of a tensor with an extra{" "}
1029-
<span className="font-mono text-xs bg-white px-1 py-0.5 rounded border border-slate-200">
1030-
storage_format
1031-
</span>{" "}
1032-
field. Based on this field, the system internally dispatches the appropriate
1033-
operators and kernels, without disturbing the exploration journey of
1034-
algorithm developers.
1035-
</p>
1036-
</div>
1037-
1038-
1039-
<TensorInterfaceVisual />
1040-
1041-
<h3 className="font-bold text-lg text-slate-900 mt-8 mb-4">
1042-
4.3 Engineering-Friendly
1043-
</h3>
1044-
1045-
<div className="text-slate-700 mb-6 space-y-3 leading-relaxed">
1046-
1047-
{/* Point 1 */}
1048-
<p>
1049-
<span className="font-semibold text-slate-900">1. Built to work with SOTA Infrastructure.</span>
1050-
It reuses the core infrastructure already adopted in modern LLM serving systems—those optimized for
1051-
<span className="font-mono text-xs bg-slate-100 px-1 py-0.5 rounded border border-slate-200 mx-1">flashinfer</span>
1052-
(with <span className="font-mono text-xs bg-slate-100 px-1 py-0.5 rounded border border-slate-200">flash-attention</span> support coming soon),
1053-
<span className="font-mono text-xs bg-slate-100 px-1 py-0.5 rounded border border-slate-200">cudagraph</span>,
1054-
<span className="font-mono text-xs bg-slate-100 px-1 py-0.5 rounded border border-slate-200">radix attention</span>, and <span className="font-mono text-xs bg-slate-100 px-1 py-0.5 rounded border border-slate-200 mx-1">continous batching</span>.
1055-
When any underlying module receives an upgrade, Vortex inherits the speedup immediately—zero engineering overhead.
1056-
</p>
1057-
1058-
{/* Point 2 */}
1059-
<p>
1060-
<span className="font-semibold text-slate-900">2. Clean separation between algorithm and engineering.</span>
1061-
Engineers do not need to understand the full algorithmic design to contribute. Thanks to the modular operator
1062-
abstraction, they can freely optimize any operator using their preferred toolchain—
1063-
<span className="font-mono text-xs bg-slate-100 px-1 py-0.5 rounded border border-slate-200">CUDA</span>,
1064-
<span className="font-mono text-xs bg-slate-100 px-1 py-0.5 rounded border border-slate-200">Triton</span>,
1065-
<span className="font-mono text-xs bg-slate-100 px-1 py-0.5 rounded border border-slate-200">Tile-lang</span>,
1066-
or even a <span className="font-mono text-xs bg-slate-100 px-1 py-0.5 rounded border border-slate-200">naive PyTorch</span> implementation—without touching the algorithm layer.
1067-
</p>
1068-
1069-
</div>
1070-
1071-
1072-
{/* Applications */}
1073-
<SectionHeader title="5. Applications" />
1074-
{/* Serving */}
1075-
<div>
1076-
<h4 className="font-semibold text-slate-900 mb-1">5.1 High-Throughput Serving</h4>
1077-
<p>
1078-
With Vortex, sparse-attention research moves from toy settings to real deployments. The system delivers substantial throughput gains without model-specific engineering.
1079-
</p>
1080-
</div>
1081-
1082-
{}
1083-
<div>
1084-
<h4 className="font-semibold text-slate-900 mb-1">5.2 Reinforcement Learning for Sparse Attention</h4>
1085-
<p>
1086-
Vortex enables large-scale experimentation in reinforcement learning, where sparse-attention policies can be trained efficiently in realistic environments.
1087-
</p>
1088-
</div>
1089-
1090-
1091-
<div className="mt-10 p-8 bg-blue-50 rounded-2xl border border-blue-100 text-center">
1092-
<h3 className="text-xl font-bold text-blue-900 mb-2">Ready to Scale?</h3>
1093-
<p className="text-blue-700 leading-relaxed">
1094-
By providing a unified framework that bridges algorithms and serving infrastructure, Vortex opens the door to research and applications that truly scale.
1095-
</p>
1096-
</div>
898+
1097899

1098900
</main>
1099901
</div>

0 commit comments

Comments
 (0)