Spaces:

kimhyunwoo
/

paper

Running

App Files Files Community

kimhyunwoo commited on 4 days ago

Commit

9033cd6

verified ·

1 Parent(s): dd2f2d6

Update index.html

Browse files

Files changed (1) hide show

index.html +343 -19

index.html CHANGED Viewed

@@ -1,19 +1,343 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Efficient VLA Research Dashboard 2025</title>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- React & ReactDOM -->
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+    <!-- Babel for JSX -->
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <style>
+        body { font-family: 'Inter', sans-serif; background-color: #f8fafc; }
+        .scrollbar-hide::-webkit-scrollbar { display: none; }
+        .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="text/babel">
+        const { useState } = React;
+        // --- Icons (SVG Components for standalone usage) ---
+        const Icons = {
+            Cpu: ({className}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><rect x="4" y="4" width="16" height="16" rx="2" ry="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/><line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/></svg>,
+            Zap: ({className}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>,
+            Brain: ({className}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z"/><path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z"/></svg>,
+            Bot: ({className}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" y1="16" x2="8" y2="16"/><line x1="16" y1="16" x2="16" y2="16"/></svg>,
+            Book: ({className}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>,
+            Radio: ({className}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"/></svg>,
+            Search: ({className}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>,
+            Filter: ({className}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>,
+            ExternalLink: ({className}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>,
+            Layers: ({className}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>,
+            Gauge: ({className}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/></svg>
+        };
+        const PaperDashboard = () => {
+            const [filter, setFilter] = useState('All');
+            const [searchTerm, setSearchTerm] = useState('');
+            // Expanded Paper Data
+            const papers = [
+                {
+                    id: 101,
+                    title: "OpenVLA: An Open-Source 7B VLA Model",
+                    year: "2024.06",
+                    category: "Foundation Model",
+                    icon: <Icons.Bot className="w-6 h-6 text-indigo-600" />,
+                    summary: "Llama 2와 DINOv2를 결합한 강력한 오픈소스 VLA. 7B 파라미터임에도 양자화 시 엣지 구동 가능성 입증.",
+                    keyPoints: ["7B Parameters", "HuGE Dataset Training", "4-bit Quantization Ready"],
+                    impact: "현재 VLA 연구의 기준점(Baseline). 파인튜닝 및 경량화 연구의 핵심 백본.",
+                    tags: ["Open Source", "7B", "Standard"],
+                    link: "https://arxiv.org/abs/2406.09246"
+                },
+                {
+                    id: 102,
+                    title: "RoboMamba: Efficient Robotic Manipulation with SSM",
+                    year: "2024.11",
+                    category: "Edge Model",
+                    icon: <Icons.Zap className="w-6 h-6 text-yellow-500" />,
+                    summary: "Transformer의 연산 비용 문제를 해결하기 위해 State Space Model(Mamba)을 도입한 로봇 제어 모델.",
+                    keyPoints: ["Linear Complexity (선형 복잡도)", "High Inference Speed", "Hybrid Architecture"],
+                    impact: "긴 시퀀스의 로봇 제어 데이터를 엣지에서 실시간 처리할 때 필수적인 아키텍처.",
+                    tags: ["Mamba", "SSM", "High Speed"],
+                    link: "#"
+                },
+                {
+                    id: 6,
+                    title: "NanoVLA: Routing Decoupled Vision-Language Understanding",
+                    year: "2025.10",
+                    category: "Edge Model",
+                    icon: <Icons.Cpu className="w-6 h-6 text-orange-500" />,
+                    summary: "Jetson, 소형 로봇 등 리소스가 극도로 제한된 환경을 위한 '초경량 VLA'.",
+                    keyPoints: ["Vision-Language Decoupling", "Dynamic Routing으로 연산 최적화", "Action Chunking 적용"],
+                    impact: "Jetson Orin Nano급 엣지 디바이스에서 VLA를 구동하기 위한 핵심 레퍼런스.",
+                    tags: ["Nano-sized", "Dynamic Routing", "Jetson"],
+                    link: "#"
+                },
+                {
+                    id: 7,
+                    title: "Evo-1: Lightweight VLA with Preserved Semantic Alignment",
+                    year: "2025.11",
+                    category: "Edge Model",
+                    icon: <Icons.Gauge className="w-6 h-6 text-cyan-500" />,
+                    summary: "0.77B 파라미터 수준의 경량 모델로, 학습/추론 비용을 획기적으로 절감.",
+                    keyPoints: ["0.77B 초경량 파라미터", "Cross-modulated Diffusion Transformer", "Real-time Inference"],
+                    impact: "Meta-World 등 벤치마크에서 입증된 성능. 실시간성이 중요한 로봇에 적합.",
+                    tags: ["0.77B", "Diffusion", "Real-time"],
+                    link: "#"
+                },
+                {
+                    id: 103,
+                    title: "MoE-VLA: Mixture-of-Experts for Scalable Robotics",
+                    year: "2025.02",
+                    category: "Edge Model",
+                    icon: <Icons.Layers className="w-6 h-6 text-pink-500" />,
+                    summary: "모든 파라미터를 사용하지 않고 상황에 맞는 전문가(Expert)만 활성화하여 추론 속도 극대화.",
+                    keyPoints: ["Sparse Activation", "Resource Efficiency", "Multi-task Generalization"],
+                    impact: "성능 저하 없이 추론 FLOPs를 줄여 엣지 디바이스 배터리 수명을 연��.",
+                    tags: ["MoE", "Sparsity", "Efficiency"],
+                    link: "#"
+                },
+                {
+                    id: 4,
+                    title: "AutoNeural: Co-Designing VLMs for NPU Inference",
+                    year: "2025.12",
+                    category: "NPU/Hardware",
+                    icon: <Icons.Brain className="w-6 h-6 text-purple-500" />,
+                    summary: "NPU 친화적으로 처음부터 설계된 VLM. ViT 대신 Depthwise-separable Conv 사용.",
+                    keyPoints: ["NPU 맞춤형 아키텍처 (No ViT)", "정수 양자화 (INT4/8/16) 지원", "메모리/연산 효율 극대화"],
+                    impact: "GPU가 아닌 NPU/SoC 기반 로봇 시스템을 설계할 때 필독해야 할 논문.",
+                    tags: ["NPU Native", "INT8", "Co-design"],
+                    link: "#"
+                },
+                {
+                    id: 1,
+                    title: "LiteVLA: Efficient Vision-Language-Action on CPU",
+                    year: "2025.01",
+                    category: "Edge Model",
+                    icon: <Icons.Cpu className="w-6 h-6 text-blue-500" />,
+                    summary: "Raspberry Pi 5와 같은 초소형 하드웨어에서 CPU 전용으로 구동 가능한 경량 VLA 제안.",
+                    keyPoints: ["Quantization + LoRA 경량화", "ROS 2 통합", "On-device 로봇 제어"],
+                    impact: "라즈베리 파이급 임베디드 로봇 개발 시 필수 참고 자료.",
+                    tags: ["CPU", "Quantization", "Robotics"],
+                    link: "#"
+                },
+                {
+                    id: 2,
+                    title: "SmolVLA: A VLA Model for Affordable Robotics",
+                    year: "2025.03",
+                    category: "Edge Model",
+                    icon: <Icons.Bot className="w-6 h-6 text-indigo-500" />,
+                    summary: "단일 GPU 또는 CPU 환경에서도 작동하도록 설계된 '작고 효율적인' VLA 모델.",
+                    keyPoints: ["저비용 로봇을 위한 최적화", "시뮬레이션 및 실제 환경 테스트", "리소스 제약 극복"],
+                    impact: "고가 장비 없이 VLA를 실험하거나 배포해야 하는 환경에 적합.",
+                    tags: ["Affordable", "Efficiency", "Small Scale"],
+                    link: "#"
+                },
+                {
+                    id: 3,
+                    title: "Efficient VLA Models for Embodied Manipulation: Survey",
+                    year: "2025",
+                    category: "Survey",
+                    icon: <Icons.Book className="w-6 h-6 text-emerald-500" />,
+                    summary: "효율성, 경량화, 엣지 배포 관점에서의 VLA 연구 종합 리뷰.",
+                    keyPoints: ["모델 경량화 및 양자화 기법 정리", "데이터 수집 및 로봇 플랫폼 적용 사례", "최신 연구 트렌드 분석"],
+                    impact: "현재 연구 갭(gap)과 실용적인 구현 방향을 잡는 데 유용한 나침반.",
+                    tags: ["Survey", "Optimization", "Trend"],
+                    link: "#"
+                },
+                {
+                    id: 5,
+                    title: "Evaluating Energy Efficiency of NPU-Accelerated ML",
+                    year: "2025.06",
+                    category: "NPU/Hardware",
+                    icon: <Icons.Radio className="w-6 h-6 text-amber-500" />,
+                    summary: "임베디드 마이크로컨트롤러에서 NPU 가속 시 전력 효율과 성능 평가.",
+                    keyPoints: ["실제 전력 소비 데이터", "응답 속도 벤치마크", "하드웨어 설계 가이드"],
+                    impact: "배터리 기반 로봇이나 저전력 시스템 설계 시 현실적인 데이터 제공.",
+                    tags: ["Energy", "Benchmark", "Embedded"],
+                    link: "#"
+                },
+                {
+                    id: 104,
+                    title: "TinyLlama-Robo: Distilling Giants for Edge Control",
+                    year: "2024.12",
+                    category: "Edge Model",
+                    icon: <Icons.Zap className="w-6 h-6 text-red-500" />,
+                    summary: "1.1B TinyLlama를 베이스로 하여 로봇 제어에 특화시킨 증류(Distillation) 모델.",
+                    keyPoints: ["Knowledge Distillation", "Fast Fine-tuning", "Mobile-class GPU Ready"],
+                    impact: "성능과 크기 사이의 최적의 타협점을 찾는 연구.",
+                    tags: ["Distillation", "1.1B", "Mobile"],
+                    link: "https://github.com/jzhang38/TinyLlama"
+                }
+            ];
+            const categories = ['All', 'Edge Model', 'Foundation Model', 'Survey', 'NPU/Hardware'];
+            const filteredPapers = papers.filter(paper => {
+                const matchesFilter = filter === 'All' || paper.category === filter;
+                const matchesSearch = paper.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                                    paper.summary.toLowerCase().includes(searchTerm.toLowerCase());
+                return matchesFilter && matchesSearch;
+            });
+            return (
+                <div className="min-h-screen bg-slate-50 p-6 font-sans text-slate-900">
+                    {/* Header Section */}
+                    <header className="max-w-7xl mx-auto mb-10">
+                        <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-2">
+                            <div>
+                                <h1 className="text-4xl font-extrabold text-slate-800 mb-2 tracking-tight">
+                                    Efficient VLA Research
+                                </h1>
+                                <p className="text-slate-600 text-lg">
+                                    Dec 2025: Edge/NPU Optimization & Lightweight Trends
+                                </p>
+                            </div>
+                            <div className="bg-slate-200 text-slate-600 px-3 py-1 rounded text-sm font-semibold self-start md:self-auto">
+                                Last Updated: Dec 2025
+                            </div>
+                        </div>
+                    </header>
+                    {/* Controls Section */}
+                    <div className="max-w-7xl mx-auto mb-8 flex flex-col md:flex-row justify-between items-center gap-4 bg-white p-4 rounded-xl shadow-sm border border-slate-200 sticky top-4 z-10 bg-opacity-95 backdrop-blur-sm">
+                        {/* Category Filters */}
+                        <div className="flex gap-2 overflow-x-auto pb-2 md:pb-0 w-full md:w-auto scrollbar-hide">
+                            {categories.map(cat => (
+                                <button
+                                    key={cat}
+                                    onClick={() => setFilter(cat)}
+                                    className={`px-4 py-2 rounded-full text-sm font-medium transition-all whitespace-nowrap border
+                                        ${filter === cat
+                                        ? 'bg-slate-800 text-white border-slate-800 shadow-md'
+                                        : 'bg-white text-slate-600 border-slate-200 hover:bg-slate-50 hover:border-slate-300'}`}
+                                >
+                                    {cat}
+                                </button>
+                            ))}
+                        </div>
+                        {/* Search Bar */}
+                        <div className="relative w-full md:w-80">
+                            <span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400">
+                                <Icons.Search className="w-4 h-4" />
+                            </span>
+                            <input
+                                type="text"
+                                placeholder="Search papers, keywords..."
+                                value={searchTerm}
+                                onChange={(e) => setSearchTerm(e.target.value)}
+                                className="w-full pl-10 pr-4 py-2 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:border-transparent transition-all"
+                            />
+                        </div>
+                    </div>
+                    {/* Grid Content */}
+                    <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-6">
+                        {filteredPapers.map((paper) => (
+                            <div key={paper.id} className="bg-white rounded-xl shadow-sm border border-slate-200 hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col group">
+                                {/* Card Header */}
+                                <div className="p-6 pb-4 relative">
+                                    <div className="flex justify-between items-start mb-4">
+                                        <div className="p-2.5 bg-slate-50 rounded-xl border border-slate-100 group-hover:bg-slate-100 transition-colors">
+                                            {paper.icon}
+                                        </div>
+                                        <div className="flex flex-col items-end gap-1.5">
+                                            <span className={`px-2.5 py-0.5 rounded-full text-[11px] font-bold uppercase tracking-wider
+                                                ${paper.category === 'Edge Model' ? 'bg-blue-50 text-blue-700 border border-blue-100' :
+                                                paper.category === 'Foundation Model' ? 'bg-indigo-50 text-indigo-700 border border-indigo-100' :
+                                                paper.category === 'Survey' ? 'bg-emerald-50 text-emerald-700 border border-emerald-100' :
+                                                'bg-purple-50 text-purple-700 border border-purple-100'}`}>
+                                                {paper.category}
+                                            </span>
+                                            <span className="text-xs text-slate-400 font-mono font-medium">{paper.year}</span>
+                                        </div>
+                                    </div>
+                                    <h3 className="text-lg font-bold text-slate-800 leading-tight mb-2 min-h-[3.5rem] group-hover:text-blue-600 transition-colors">
+                                        {paper.title}
+                                    </h3>
+                                </div>
+                                {/* Card Body */}
+                                <div className="px-6 pb-6 flex-grow flex flex-col">
+                                    <div className="mb-5">
+                                        <p className="text-slate-600 text-sm leading-relaxed mb-4">
+                                            {paper.summary}
+                                        </p>
+                                        <div className="space-y-2">
+                                            {paper.keyPoints.map((point, idx) => (
+                                                <div key={idx} className="flex items-start text-xs text-slate-600 bg-slate-50 p-2 rounded border border-slate-100">
+                                                    <span className="mr-2 text-slate-400 mt-0.5">•</span>
+                                                    {point}
+                                                </div>
+                                            ))}
+                                        </div>
+                                    </div>
+                                    <div className="mt-auto">
+                                        <div className="pt-4 border-t border-dashed border-slate-200 mb-4">
+                                            <h4 className="text-[11px] font-bold text-rose-500 mb-1.5 flex items-center gap-1 uppercase tracking-wider">
+                                                <Icons.Filter className="w-3 h-3" /> Impact & Usage
+                                            </h4>
+                                            <p className="text-xs text-slate-600 italic">
+                                                "{paper.impact}"
+                                            </p>
+                                        </div>
+                                        <a href={paper.link} target="_blank" rel="noreferrer"
+                                           className="flex items-center justify-center w-full py-2 bg-slate-900 text-white text-sm font-medium rounded-lg hover:bg-blue-600 transition-colors gap-2 group-hover:shadow-md">
+                                            <span>Read Paper</span>
+                                            <Icons.ExternalLink className="w-3 h-3" />
+                                        </a>
+                                    </div>
+                                </div>
+                                {/* Card Footer (Tags) */}
+                                <div className="px-6 py-3 bg-slate-50 border-t border-slate-200 rounded-b-xl flex flex-wrap gap-2">
+                                    {paper.tags.map(tag => (
+                                        <span key={tag} className="px-2 py-1 bg-white border border-slate-200 rounded text-[10px] text-slate-500 font-bold uppercase tracking-wide">
+                                            #{tag}
+                                        </span>
+                                    ))}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                    {filteredPapers.length === 0 && (
+                        <div className="text-center py-20">
+                            <div className="inline-block p-4 rounded-full bg-slate-100 mb-4">
+                                <Icons.Layers className="w-8 h-8 text-slate-400" />
+                            </div>
+                            <h3 className="text-lg font-medium text-slate-900">No papers found</h3>
+                            <p className="text-slate-500">Try adjusting your search or filters.</p>
+                        </div>
+                    )}
+                    {/* Footer Info */}
+                    <footer className="max-w-7xl mx-auto mt-16 text-center pb-10 border-t border-slate-200 pt-8">
+                        <p className="text-slate-500 text-sm font-medium">Efficient Vision-Language-Action Models Trend Analysis (2025)</p>
+                        <p className="mt-2 text-xs text-slate-400">Curated based on latest ArXiv & Conference papers (CVPR, ICRA, CoRL) as of Dec 2025</p>
+                    </footer>
+                </div>
+            );
+        };
+        const root = ReactDOM.createRoot(document.getElementById('root'));
+        root.render(<PaperDashboard />);
+    </script>
+</body>
+</html>