205 lines
8.0 KiB
TypeScript
205 lines
8.0 KiB
TypeScript
import React from "react";
|
||
import HeroComposition from "./_components/HeroComposition";
|
||
import { DirectionsBlock } from "./_components/DirectionsBlock";
|
||
import { ProjectPageView } from "./_components/ProjectPageView";
|
||
import { publications, patents } from "../content/publications";
|
||
|
||
const PILLARS = [
|
||
{
|
||
no: "01",
|
||
en: "Extensibility & Protocol",
|
||
ko: "AI Agent 기능 확장 프로토콜",
|
||
theme: "vermillion" as const,
|
||
topics: [
|
||
"Model Context Protocol (MCP) 서버/클라이언트 아키텍처",
|
||
"SKILL 도구 캡슐화 및 재사용 패키징",
|
||
"CLI 에이전트 인터페이스 제어 및 웹 가동 제어",
|
||
],
|
||
desc: "에이전트가 외부 도구 및 시스템과 표준화된 방식으로 연동할 수 있도록 MCP와 SKILL 패키징 기술을 개발합니다.",
|
||
},
|
||
{
|
||
no: "02",
|
||
en: "Multi-Agent Systems",
|
||
ko: "멀티 에이전트 협업 및 오케스트레이션",
|
||
theme: "cobalt" as const,
|
||
topics: [
|
||
"HERDR 백그라운드 프로세스 컨테이너 격리 제어",
|
||
"crewAI 기반 역할 분담 및 태스크 위임 체계",
|
||
"LangGraph 순환 상태 그래프 기반 워크플로우 제어",
|
||
],
|
||
desc: "다중 에이전트 환경에서 독립적인 역할 분담과 선순환 오케스트레이션을 보장하는 자율 협업 플랫폼을 연구합니다.",
|
||
},
|
||
{
|
||
no: "03",
|
||
en: "Interoperability Standards",
|
||
ko: "에이전트 상호운용성 개방형 표준",
|
||
theme: "vermillion" as const,
|
||
topics: [
|
||
"Agent-to-Agent (A2A) 프로토콜 규격 정의 및 검증",
|
||
"Agent Communication Protocol (ACP) 메시지 교환 규격",
|
||
"Agent Card (/.well-known/agent-card.json) 메타데이터 검증",
|
||
],
|
||
desc: "서로 다른 프레임워크 기반의 에이전트 간의 상호운용성을 보장하는 국제 표준 개방형 통신 프로토콜을 구현합니다.",
|
||
},
|
||
{
|
||
no: "04",
|
||
en: "High-Performance Backbone",
|
||
ko: "AIoT & 고성능 통신 백본",
|
||
theme: "cobalt" as const,
|
||
topics: [
|
||
"gRPC / QUIC 양방향 스트리밍 에이전트 백본 통신",
|
||
"Protocol Buffers (Protobuf) 직렬화 통신 최적화",
|
||
"MQTT / CoAP 엣지 메시 통신망 통합",
|
||
],
|
||
desc: "초저지연 양방향 스트리밍 통신 인프라를 바탕으로 고성능 에이전트 백본 네트워크를 설계하고 실증합니다.",
|
||
},
|
||
];
|
||
|
||
export default function HomePage() {
|
||
const pubCount = publications.length + patents.length;
|
||
|
||
return (
|
||
<div className="container-content space-y-16 py-6">
|
||
{/* Hero Section */}
|
||
<section className="relative">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<span className="h-px w-8 bg-vermillion"></span>
|
||
<span className="font-mono text-xs tracking-widest uppercase text-vermillion font-bold">
|
||
Kyungpook National University · AI Agent Networking Lab (ANL)
|
||
</span>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
|
||
<div className="lg:col-span-7 space-y-6">
|
||
<h1 className="font-serif text-4xl sm:text-5xl lg:text-6xl font-normal text-ink leading-tight">
|
||
멀티 에이전트 <br />
|
||
<span className="italic font-serif text-vermillion">오케스트레이션</span>
|
||
</h1>
|
||
<p className="text-ink-mute text-base sm:text-lg leading-relaxed max-w-2xl">
|
||
AI 에이전트 네트워크 연구실(ANL)은 멀티 AI 에이전트 오케스트레이션을 위해 서로 소통하고 협력하는 에이전트 네트워킹 기술과 표준 프레임워크 기술을 연구합니다.
|
||
</p>
|
||
|
||
{/* Metrics Row (Derived from data array, AC-13) */}
|
||
<div className="pt-6 border-t border-line grid grid-cols-3 gap-4">
|
||
<div>
|
||
<div className="font-serif text-3xl text-vermillion font-normal">
|
||
{PILLARS.length}
|
||
</div>
|
||
<div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1">
|
||
Research Areas
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div className="font-serif text-3xl text-cobalt font-normal">
|
||
{pubCount}
|
||
</div>
|
||
<div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1">
|
||
Publications
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div className="font-serif text-3xl text-ink font-normal">
|
||
2026
|
||
</div>
|
||
<div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1">
|
||
Issue Static
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="lg:col-span-5 border border-line bg-paper p-4 rounded-lg">
|
||
<HeroComposition />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Research Project PageView Component */}
|
||
<ProjectPageView />
|
||
|
||
{/* Core Research Areas Grid */}
|
||
<section className="space-y-8 pt-8 border-t border-line">
|
||
<div className="flex justify-between items-end">
|
||
<div>
|
||
<div className="font-mono text-xs text-vermillion uppercase tracking-widest font-bold">
|
||
Research Areas
|
||
</div>
|
||
<h2 className="font-serif text-3xl font-normal text-ink mt-1">
|
||
핵심 연구 분야
|
||
</h2>
|
||
</div>
|
||
<div className="font-mono text-xs text-ink-mute">
|
||
Magazine Layout 01–04
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
|
||
{PILLARS.map((pillar) => {
|
||
const isVermillion = pillar.theme === "vermillion";
|
||
|
||
return (
|
||
<div
|
||
key={pillar.no}
|
||
className="bg-paper p-6 rounded-lg border border-line flex flex-col justify-between hover:border-ink transition-colors duration-200"
|
||
>
|
||
<div className="space-y-4">
|
||
<div className="flex justify-between items-center">
|
||
<span
|
||
className={`font-mono text-sm font-bold ${
|
||
isVermillion ? "text-vermillion" : "text-cobalt"
|
||
}`}
|
||
>
|
||
[{pillar.no}]
|
||
</span>
|
||
<span className="font-mono text-xs text-ink-mute uppercase">
|
||
{pillar.en}
|
||
</span>
|
||
</div>
|
||
|
||
<h3 className="font-serif text-xl font-normal text-ink">
|
||
{pillar.ko}
|
||
</h3>
|
||
|
||
<p className="text-xs text-ink-mute leading-relaxed">
|
||
{pillar.desc}
|
||
</p>
|
||
|
||
<ul className="space-y-2 pt-2">
|
||
{pillar.topics.map((topic, tIdx) => (
|
||
<li
|
||
key={tIdx}
|
||
className="text-xs text-ink flex items-start gap-2"
|
||
>
|
||
<span
|
||
className={`inline-block w-1.5 h-1.5 rounded-full mt-1 ${
|
||
isVermillion ? "bg-vermillion" : "bg-cobalt"
|
||
}`}
|
||
></span>
|
||
<span>{topic}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="mt-6 pt-4 border-t border-line/60 flex justify-between items-center text-xs font-mono text-ink-mute">
|
||
<span>ANL Core Spec</span>
|
||
<span
|
||
className={
|
||
isVermillion ? "text-vermillion" : "text-cobalt"
|
||
}
|
||
>
|
||
Pillar #{pillar.no}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</section>
|
||
|
||
{/* Directions Block */}
|
||
<DirectionsBlock />
|
||
</div>
|
||
);
|
||
}
|