308 lines
14 KiB
TypeScript
308 lines
14 KiB
TypeScript
|
import Image from "next/image";
|
||
|
|
import Link from "next/link";
|
||
|
|
import type { Metadata } from "next";
|
||
|
|
import architectureImage from "@/public/images/graph-attention-topology/model-architecture.png";
|
||
|
|
import simulationImage from "@/public/images/graph-attention-topology/simulation-dynamics.png";
|
||
|
|
import resultsImage from "@/public/images/graph-attention-topology/f1-results.png";
|
||
|
|
import attentionImage from "@/public/images/graph-attention-topology/attention-training.png";
|
||
|
|
|
||
|
|
const paperLinks = [
|
||
|
|
{ href: "https://arxiv.org/abs/2408.15449", label: "arXiv" },
|
||
|
|
{ href: "https://arxiv.org/pdf/2408.15449", label: "PDF" },
|
||
|
|
{ href: "https://doi.org/10.48550/arXiv.2408.15449", label: "DOI" },
|
||
|
|
];
|
||
|
|
|
||
|
|
const highlights = [
|
||
|
|
{
|
||
|
|
value: "No known graph",
|
||
|
|
label: "Learns topology without prior adjacency examples.",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: "Unknown dynamics",
|
||
|
|
label: "Uses observed states instead of hand-specified equations.",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: "Attention as edges",
|
||
|
|
label: "Interprets learned attention scores as the graph estimate.",
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
const steps = [
|
||
|
|
"Embed every agent into a shared latent space.",
|
||
|
|
"Project embeddings into key/query vectors and compute pairwise attention.",
|
||
|
|
"Translate observed agent states into values.",
|
||
|
|
"Predict the next state and read the attention matrix as topology.",
|
||
|
|
];
|
||
|
|
|
||
|
|
export const metadata: Metadata = {
|
||
|
|
title: "Graph Attention Topology Inference",
|
||
|
|
description:
|
||
|
|
"Project page for Graph Attention Inference of Network Topology in Multi-Agent Systems.",
|
||
|
|
openGraph: {
|
||
|
|
title: "Graph Attention Inference of Network Topology in Multi-Agent Systems",
|
||
|
|
description:
|
||
|
|
"A graph-attention approach for inferring hidden network topology from multi-agent trajectories.",
|
||
|
|
type: "article",
|
||
|
|
publishedTime: "2024-10-26",
|
||
|
|
images: [
|
||
|
|
{
|
||
|
|
url: "/images/graph-attention-topology/model-architecture.png",
|
||
|
|
width: architectureImage.width,
|
||
|
|
height: architectureImage.height,
|
||
|
|
alt: "Graph attention model architecture",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
function ExternalLink({ href, label }: { href: string; label: string }) {
|
||
|
|
return (
|
||
|
|
<a
|
||
|
|
href={href}
|
||
|
|
target="_blank"
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
className="rounded-full border border-graph-line bg-graph-panel px-4 py-2 text-sm font-medium text-graph-ink transition-colors hover:border-graph-accent hover:text-graph-accent"
|
||
|
|
>
|
||
|
|
{label}
|
||
|
|
</a>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function Figure({
|
||
|
|
src,
|
||
|
|
alt,
|
||
|
|
caption,
|
||
|
|
className = "",
|
||
|
|
}: {
|
||
|
|
src: typeof architectureImage;
|
||
|
|
alt: string;
|
||
|
|
caption: string;
|
||
|
|
className?: string;
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<figure className={`overflow-hidden border border-graph-line bg-graph-panel ${className}`}>
|
||
|
|
<div className="bg-white">
|
||
|
|
<Image
|
||
|
|
src={src}
|
||
|
|
alt={alt}
|
||
|
|
sizes="(max-width: 768px) 100vw, 58rem"
|
||
|
|
className="h-auto w-full"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<figcaption className="border-t border-graph-line px-4 py-3 font-mono text-[0.72rem] leading-5 text-graph-muted">
|
||
|
|
{caption}
|
||
|
|
</figcaption>
|
||
|
|
</figure>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function GraphAttentionProjectPage() {
|
||
|
|
return (
|
||
|
|
<div className="graph-project min-h-screen bg-graph-paper text-graph-ink">
|
||
|
|
<section className="graph-hero px-5 pb-14 pt-24 sm:px-6 sm:pb-20 sm:pt-28">
|
||
|
|
<div className="mx-auto grid max-w-[78rem] gap-10 lg:grid-cols-[minmax(0,1fr)_minmax(23rem,32rem)] lg:items-end">
|
||
|
|
<div className="space-y-7">
|
||
|
|
<div className="flex flex-wrap items-center gap-3 font-mono text-[0.72rem] uppercase text-graph-muted">
|
||
|
|
<Link href="/projects" className="transition-colors hover:text-graph-accent">
|
||
|
|
Projects
|
||
|
|
</Link>
|
||
|
|
<span className="h-px w-8 bg-graph-line" />
|
||
|
|
<span>MECC 2024</span>
|
||
|
|
<span className="h-px w-8 bg-graph-line" />
|
||
|
|
<span>Multi-Agent Systems</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-5">
|
||
|
|
<h1 className="max-w-[54rem] text-balance font-sans text-[clamp(3.1rem,8vw,7.6rem)] font-semibold leading-[0.86] tracking-normal text-graph-ink">
|
||
|
|
Graph Attention Inference of Network Topology
|
||
|
|
</h1>
|
||
|
|
<p className="max-w-[43rem] text-[1.12rem] leading-8 text-graph-soft sm:text-[1.25rem]">
|
||
|
|
Inferring the hidden graph behind a multi-agent system by training attention to predict what each agent does next.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-wrap gap-2 text-[0.95rem] text-graph-soft">
|
||
|
|
<span>Akshay Kolli</span>
|
||
|
|
<span>/</span>
|
||
|
|
<span>Reza Azadeh</span>
|
||
|
|
<span>/</span>
|
||
|
|
<span>Kshitij Jerath</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-wrap gap-3">
|
||
|
|
{paperLinks.map((link) => (
|
||
|
|
<ExternalLink key={link.href} {...link} />
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="graph-hero-card">
|
||
|
|
<div className="graph-card-top">
|
||
|
|
<span>attention matrix</span>
|
||
|
|
<span>unknown graph</span>
|
||
|
|
</div>
|
||
|
|
<div className="grid grid-cols-[1fr_auto] gap-4 p-4">
|
||
|
|
<div className="graph-matrix" aria-hidden>
|
||
|
|
{Array.from({ length: 36 }).map((_, index) => (
|
||
|
|
<span
|
||
|
|
key={index}
|
||
|
|
className={(index % 7 === 0 || [2, 11, 15, 22, 29, 34].includes(index)) ? "is-hot" : ""}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col justify-between py-1 font-mono text-[0.68rem] uppercase text-graph-muted">
|
||
|
|
<span>query</span>
|
||
|
|
<span>key</span>
|
||
|
|
<span>edge</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="border-t border-graph-line bg-white p-3">
|
||
|
|
<Image
|
||
|
|
src={architectureImage}
|
||
|
|
alt="Graph attention model architecture"
|
||
|
|
priority
|
||
|
|
sizes="(max-width: 1024px) 92vw, 32rem"
|
||
|
|
className="mx-auto h-auto max-h-[30rem] w-auto"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section className="border-y border-graph-line bg-graph-panel px-5 py-5 sm:px-6">
|
||
|
|
<div className="mx-auto grid max-w-[78rem] gap-4 md:grid-cols-3">
|
||
|
|
{highlights.map((item) => (
|
||
|
|
<div key={item.value} className="space-y-2 border-l border-graph-line pl-4">
|
||
|
|
<p className="text-[1.05rem] font-semibold text-graph-ink">{item.value}</p>
|
||
|
|
<p className="text-[0.92rem] leading-6 text-graph-muted">{item.label}</p>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div className="mx-auto max-w-[78rem] px-5 py-14 sm:px-6 sm:py-20">
|
||
|
|
<div className="grid gap-12 lg:grid-cols-[14rem_minmax(0,1fr)] lg:gap-16">
|
||
|
|
<aside className="hidden lg:block">
|
||
|
|
<nav className="sticky top-24 space-y-3 font-mono text-[0.72rem] uppercase text-graph-muted">
|
||
|
|
<a href="#overview" className="block transition-colors hover:text-graph-accent">Overview</a>
|
||
|
|
<a href="#method" className="block transition-colors hover:text-graph-accent">Method</a>
|
||
|
|
<a href="#results" className="block transition-colors hover:text-graph-accent">Results</a>
|
||
|
|
<a href="#citation" className="block transition-colors hover:text-graph-accent">Citation</a>
|
||
|
|
</nav>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<div className="space-y-20">
|
||
|
|
<section id="overview" className="grid gap-8 lg:grid-cols-[minmax(0,0.9fr)_minmax(18rem,0.7fr)]">
|
||
|
|
<div className="space-y-5">
|
||
|
|
<p className="graph-kicker">Overview</p>
|
||
|
|
<h2 className="max-w-[42rem] text-balance text-4xl font-semibold leading-tight text-graph-ink sm:text-5xl">
|
||
|
|
Predict the next state, then read the graph from what the model attended to.
|
||
|
|
</h2>
|
||
|
|
<div className="space-y-5 text-[1.02rem] leading-8 text-graph-soft">
|
||
|
|
<p>
|
||
|
|
The paper studies a practical problem in networked multi-agent systems: the agents move, synchronize, or converge, but the interaction graph behind that behavior is not given.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
The model is trained on state trajectories from consensus dynamics and Kuramoto oscillators. During prediction, attention scores between agent embeddings become an interpretable approximation of the adjacency matrix.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Figure
|
||
|
|
src={simulationImage}
|
||
|
|
alt="Consensus and Kuramoto simulation examples with adjacency matrices"
|
||
|
|
caption="Simulation examples: consensus dynamics and Kuramoto oscillators paired with their hidden adjacency matrices."
|
||
|
|
className="rounded-md"
|
||
|
|
/>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="method" className="space-y-8">
|
||
|
|
<div className="grid gap-8 lg:grid-cols-[minmax(0,0.8fr)_minmax(0,1fr)] lg:items-start">
|
||
|
|
<div className="space-y-5">
|
||
|
|
<p className="graph-kicker">Method</p>
|
||
|
|
<h2 className="text-balance text-4xl font-semibold leading-tight text-graph-ink sm:text-5xl">
|
||
|
|
A topology estimate falls out of the attention layer.
|
||
|
|
</h2>
|
||
|
|
<p className="text-[1.02rem] leading-8 text-graph-soft">
|
||
|
|
Instead of supervising the graph directly, the model learns to forecast the system. The attention matrix is then thresholded and compared with the true graph.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ol className="grid gap-3">
|
||
|
|
{steps.map((step, index) => (
|
||
|
|
<li key={step} className="flex gap-4 border-t border-graph-line py-4">
|
||
|
|
<span className="font-mono text-sm text-graph-accent">
|
||
|
|
{(index + 1).toString().padStart(2, "0")}
|
||
|
|
</span>
|
||
|
|
<span className="text-[1rem] leading-7 text-graph-soft">{step}</span>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Figure
|
||
|
|
src={architectureImage}
|
||
|
|
alt="Architecture diagram showing agent embeddings, key-query attention, values, predictions, and loss"
|
||
|
|
caption="Architecture: embeddings produce key/query vectors; observed states produce values; the attention matrix approximates adjacency."
|
||
|
|
className="rounded-md"
|
||
|
|
/>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="results" className="space-y-8">
|
||
|
|
<div className="max-w-[46rem] space-y-5">
|
||
|
|
<p className="graph-kicker">Results</p>
|
||
|
|
<h2 className="text-balance text-4xl font-semibold leading-tight text-graph-ink sm:text-5xl">
|
||
|
|
Strongest graph recovery appears with smaller systems, and more simulations help larger systems.
|
||
|
|
</h2>
|
||
|
|
<p className="text-[1.02rem] leading-8 text-graph-soft">
|
||
|
|
F1 link-prediction scores are above a random baseline for both tested dynamics. Consensus dynamics are easier than Kuramoto oscillators, while additional simulation data improves larger-agent inference.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Figure
|
||
|
|
src={resultsImage}
|
||
|
|
alt="F1 score results for consensus dynamics and Kuramoto oscillators"
|
||
|
|
caption="F1 results across system size and number of simulations for consensus dynamics and Kuramoto oscillators."
|
||
|
|
className="rounded-md"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div className="grid gap-6 md:grid-cols-[minmax(0,0.78fr)_minmax(0,1fr)] md:items-start">
|
||
|
|
<div className="rounded-md border border-graph-line bg-graph-panel p-5">
|
||
|
|
<p className="font-mono text-[0.72rem] uppercase text-graph-muted">training behavior</p>
|
||
|
|
<p className="mt-3 text-[1.02rem] leading-8 text-graph-soft">
|
||
|
|
Attention first learns the obvious self-dependencies, then gradually recovers inter-agent structure as training progresses.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<Figure
|
||
|
|
src={attentionImage}
|
||
|
|
alt="Attention matrices over training epochs and predicted graphs"
|
||
|
|
caption="Attention values through training stages, from true graph to predicted graph."
|
||
|
|
className="rounded-md"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="citation" className="space-y-5 border-t border-graph-line pt-10">
|
||
|
|
<p className="graph-kicker">Citation</p>
|
||
|
|
<h2 className="text-3xl font-semibold leading-tight text-graph-ink">Paper</h2>
|
||
|
|
<p className="max-w-[46rem] text-[1.02rem] leading-8 text-graph-soft">
|
||
|
|
Graph Attention Inference of Network Topology in Multi-Agent Systems. Akshay Kolli, Reza Azadeh, and Kshitij Jerath. Accepted at the Modeling and Estimation Control Conference, 2024.
|
||
|
|
</p>
|
||
|
|
<pre className="overflow-x-auto rounded-md border border-graph-line bg-graph-code p-5 text-sm leading-7 text-graph-code-text">
|
||
|
|
{`@misc{kolli2024graphattentioninference,
|
||
|
|
title={Graph Attention Inference of Network Topology in Multi-Agent Systems},
|
||
|
|
author={Kolli, Akshay and Azadeh, Reza and Jerath, Kshitij},
|
||
|
|
year={2024},
|
||
|
|
eprint={2408.15449},
|
||
|
|
archivePrefix={arXiv},
|
||
|
|
primaryClass={cs.MA}
|
||
|
|
}`}
|
||
|
|
</pre>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|