diff --git a/app/globals.css b/app/globals.css index ee2a7bb..818578f 100644 --- a/app/globals.css +++ b/app/globals.css @@ -265,6 +265,146 @@ a { font-weight: 600; } +.graph-project { + --graph-paper: #f4f1e8; + --graph-panel: #fffdf6; + --graph-ink: #161512; + --graph-soft: #39362d; + --graph-muted: #6d675a; + --graph-line: rgba(22, 21, 18, 0.16); + --graph-accent: #0f6f77; + --graph-accent-strong: #0c4f58; + --graph-warm: #e28f45; + --graph-code: #171813; + --graph-code-text: #f2ead9; + background: + linear-gradient(90deg, rgba(22, 21, 18, 0.04) 1px, transparent 1px), + linear-gradient(180deg, rgba(22, 21, 18, 0.035) 1px, transparent 1px), + var(--graph-paper); + background-size: 4.5rem 4.5rem; + color: var(--graph-ink); +} + +:root[data-theme="dark"] .graph-project { + --graph-paper: #111315; + --graph-panel: #181c1d; + --graph-ink: #f5f0e6; + --graph-soft: #ddd5c5; + --graph-muted: #a9a091; + --graph-line: rgba(245, 240, 230, 0.15); + --graph-accent: #78c7cf; + --graph-accent-strong: #93dbe2; + --graph-warm: #e3a15f; + --graph-code: #0d0f10; + --graph-code-text: #f5f0e6; +} + +.graph-project .text-graph-ink { + color: var(--graph-ink); +} + +.graph-project .text-graph-soft { + color: var(--graph-soft); +} + +.graph-project .text-graph-muted { + color: var(--graph-muted); +} + +.graph-project .text-graph-accent { + color: var(--graph-accent); +} + +.graph-project .text-graph-code-text { + color: var(--graph-code-text); +} + +.graph-project .bg-graph-paper { + background-color: var(--graph-paper); +} + +.graph-project .bg-graph-panel { + background-color: var(--graph-panel); +} + +.graph-project .bg-graph-line { + background-color: var(--graph-line); +} + +.graph-project .bg-graph-code { + background-color: var(--graph-code); +} + +.graph-project .border-graph-line { + border-color: var(--graph-line); +} + +.graph-project .bg-graph-accent { + background-color: var(--graph-accent); +} + +.graph-project .hover\:text-graph-accent:hover { + color: var(--graph-accent); +} + +.graph-project .hover\:border-graph-accent:hover { + border-color: var(--graph-accent); +} + +.graph-hero { + background: + radial-gradient(42rem 24rem at 16% 18%, rgba(226, 143, 69, 0.18), transparent 70%), + radial-gradient(38rem 24rem at 82% 10%, rgba(15, 111, 119, 0.16), transparent 72%); +} + +.graph-hero-card { + overflow: hidden; + border: 1px solid var(--graph-line); + border-radius: 0.5rem; + background: var(--graph-panel); + box-shadow: 0 34px 80px rgba(22, 21, 18, 0.12); +} + +.graph-card-top { + display: flex; + justify-content: space-between; + gap: 1rem; + border-bottom: 1px solid var(--graph-line); + padding: 0.85rem 1rem; + color: var(--graph-muted); + font-family: var(--font-mono), monospace; + font-size: 0.68rem; + text-transform: uppercase; +} + +.graph-matrix { + display: grid; + grid-template-columns: repeat(6, minmax(0, 1fr)); + width: min(17rem, 58vw); + overflow: hidden; + border: 1px solid var(--graph-line); + background: #202f33; +} + +.graph-matrix span { + aspect-ratio: 1; + border-right: 1px solid rgba(244, 241, 232, 0.14); + border-bottom: 1px solid rgba(244, 241, 232, 0.14); + background: #275b63; +} + +.graph-matrix span.is-hot { + background: #f0d83a; +} + +.graph-kicker { + color: var(--graph-muted); + font-family: var(--font-mono), monospace; + font-size: 0.72rem; + letter-spacing: 0; + text-transform: uppercase; +} + @media (min-width: 1280px) { .side-note { float: right; diff --git a/app/page.tsx b/app/page.tsx index 6f6c575..787f89a 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -30,6 +30,9 @@ export default function Home() { Latest essay + + Projects + Writing diff --git a/app/projects/graph-attention-topology/page.tsx b/app/projects/graph-attention-topology/page.tsx new file mode 100644 index 0000000..d969476 --- /dev/null +++ b/app/projects/graph-attention-topology/page.tsx @@ -0,0 +1,307 @@ +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 ( + + {label} + + ); +} + +function Figure({ + src, + alt, + caption, + className = "", +}: { + src: typeof architectureImage; + alt: string; + caption: string; + className?: string; +}) { + return ( +
+
+ {alt} +
+
+ {caption} +
+
+ ); +} + +export default function GraphAttentionProjectPage() { + return ( +
+
+
+
+
+ + Projects + + + MECC 2024 + + Multi-Agent Systems +
+ +
+

+ Graph Attention Inference of Network Topology +

+

+ Inferring the hidden graph behind a multi-agent system by training attention to predict what each agent does next. +

+
+ +
+ Akshay Kolli + / + Reza Azadeh + / + Kshitij Jerath +
+ +
+ {paperLinks.map((link) => ( + + ))} +
+
+ +
+
+ attention matrix + unknown graph +
+
+
+ {Array.from({ length: 36 }).map((_, index) => ( + + ))} +
+
+ query + key + edge +
+
+
+ Graph attention model architecture +
+
+
+
+ +
+
+ {highlights.map((item) => ( +
+

{item.value}

+

{item.label}

+
+ ))} +
+
+ +
+
+ + +
+
+
+

Overview

+

+ Predict the next state, then read the graph from what the model attended to. +

+
+

+ 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. +

+

+ 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. +

+
+
+ +
+
+ +
+
+
+

Method

+

+ A topology estimate falls out of the attention layer. +

+

+ 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. +

+
+ +
    + {steps.map((step, index) => ( +
  1. + + {(index + 1).toString().padStart(2, "0")} + + {step} +
    2. + ))} +
+
+ +
+
+ +
+
+

Results

+

+ Strongest graph recovery appears with smaller systems, and more simulations help larger systems. +

+

+ 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. +

+
+ +
+ +
+
+

training behavior

+

+ Attention first learns the obvious self-dependencies, then gradually recovers inter-agent structure as training progresses. +

+
+
+
+
+ +
+

Citation

+

Paper

+

+ 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. +

+ 
+{`@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}
+}`}
+
+
+
+
+
+
+ ); +} diff --git a/app/projects/page.tsx b/app/projects/page.tsx new file mode 100644 index 0000000..8f0f4bc --- /dev/null +++ b/app/projects/page.tsx @@ -0,0 +1,109 @@ +import Image from "next/image"; +import Link from "next/link"; +import type { Metadata } from "next"; +import graphAttentionImage from "@/public/images/graph-attention-topology/model-architecture.png"; + +const projects = [ + { + href: "/projects/graph-attention-topology", + title: "Graph Attention Inference of Network Topology", + eyebrow: "MECC 2024 / Multi-Agent Systems", + description: + "Inferring hidden interaction graphs from multi-agent trajectories by training attention to predict each agent's next state.", + status: "Paper project", + year: "2024", + image: graphAttentionImage, + imageAlt: "Graph attention model architecture diagram", + tags: ["Graph attention", "Topology inference", "Kuramoto oscillators"], + }, +]; + +export const metadata: Metadata = { + title: "Projects", + description: "Research projects and paper pages by Akshay Kolli.", + openGraph: { + title: "Projects", + description: "Research projects and paper pages by Akshay Kolli.", + }, +}; + +export default function ProjectsPage() { + return ( +
+
+
+
+

Projects

+

+ Research pages and technical artifacts. +

+

+ A compact index of paper pages, experiments, and systems work. +

+
+

+ {projects.length} active {projects.length === 1 ? "project" : "projects"} +

+
+ +
+ {projects.map((project) => ( +
+
+
+
+ {project.eyebrow} + {project.year} + {project.status} +
+ +
+ +

+ {project.title} +

+ +

+ {project.description} +

+
+
+ +
+ + Open project + +
+ {project.tags.map((tag) => ( + {tag} + ))} +
+
+
+ + + {project.imageAlt} + +
+ ))} +
+
+
+ ); +} diff --git a/app/sitemap.ts b/app/sitemap.ts index baa1abf..c7cbf0b 100644 --- a/app/sitemap.ts +++ b/app/sitemap.ts @@ -12,6 +12,8 @@ export default function sitemap(): MetadataRoute.Sitemap { return [ { url: 'https://akkolli.net', lastModified: latestPostDate }, + { url: 'https://akkolli.net/projects', lastModified: new Date('2024-10-26') }, + { url: 'https://akkolli.net/projects/graph-attention-topology', lastModified: new Date('2024-10-26') }, { url: 'https://akkolli.net/blog', lastModified: latestPostDate }, { url: 'https://akkolli.net/resume' }, ...blogEntries, diff --git a/components/layout/Navbar.tsx b/components/layout/Navbar.tsx index da4efaa..cacda02 100644 --- a/components/layout/Navbar.tsx +++ b/components/layout/Navbar.tsx @@ -7,6 +7,7 @@ import { ThemeToggle } from './ThemeToggle'; const navItems = [ { href: '/', label: 'Home' }, + { href: '/projects', label: 'Projects' }, { href: '/blog', label: 'Writing' }, { href: '/resume', label: 'Resume' }, ]; diff --git a/public/images/graph-attention-topology/attention-training.png b/public/images/graph-attention-topology/attention-training.png new file mode 100644 index 0000000..bb4cc89 Binary files /dev/null and b/public/images/graph-attention-topology/attention-training.png differ diff --git a/public/images/graph-attention-topology/consensus-convergence.png b/public/images/graph-attention-topology/consensus-convergence.png new file mode 100644 index 0000000..7d70341 Binary files /dev/null and b/public/images/graph-attention-topology/consensus-convergence.png differ diff --git a/public/images/graph-attention-topology/f1-results.png b/public/images/graph-attention-topology/f1-results.png new file mode 100644 index 0000000..0b32875 Binary files /dev/null and b/public/images/graph-attention-topology/f1-results.png differ diff --git a/public/images/graph-attention-topology/model-architecture.png b/public/images/graph-attention-topology/model-architecture.png new file mode 100644 index 0000000..cec61aa Binary files /dev/null and b/public/images/graph-attention-topology/model-architecture.png differ diff --git a/public/images/graph-attention-topology/simulation-dynamics.png b/public/images/graph-attention-topology/simulation-dynamics.png new file mode 100644 index 0000000..e4beae4 Binary files /dev/null and b/public/images/graph-attention-topology/simulation-dynamics.png differ