Spaces:

kimhyunwoo
/

paper

Running

File size: 24,810 Bytes

9033cd6

<!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>