Genesis: 物理シミュレーションプラットフォームの革新とその影響

import React from 'react';
import { AreaChart, Area, BarChart, Bar, LineChart, Line, ComposedChart, PieChart, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Cell } from 'recharts';

const App = () => {
  const timelineData = [
    { year: 2022, progress: 20, event: '開発開始', details: '物理エンジンの基礎開発' },
    { year: 2023, progress: 60, event: '20以上の研究所との共同研究', details: 'カーネギーメロン大学、MIT、NVIDIA等との協力' },
    { year: 2024.0, progress: 100, event: 'オープンソースとして公開', details: '最大430,000倍の高速化を実現' }
  ];

  const performanceData = [
    { name: 'Isaac Gym', speed: 1, color: '#FF6B6B', details: '基準となる従来のシミュレーター' },
    { name: 'Mujoco MJX', speed: 4, color: '#4ECDC4', details: '4倍の高速化を実現' },
    { name: 'Genesis', speed: 80, color: '#45B7D1', details: '最大80倍の高速化を達成' }
  ];

  const featuresData = [
    { name: '物理エンジン性能', value: 95, fullMark: 100, details: 'MPM、SPH、FEM等の統合' },
    { name: 'Python統合', value: 90, fullMark: 100, details: '100%Python実装' },
    { name: 'シミュレーション速度', value: 100, fullMark: 100, details: '最大430,000倍' },
    { name: 'ユーザビリティ', value: 85, fullMark: 100, details: '直感的なAPI設計' },
    { name: '生成AI機能', value: 80, fullMark: 100, details: '4D世界生成' }
  ];

  const simulationSpeedData = [
    { name: '実時間', value: 1, description: '基準値（1倍速）' },
    { name: 'Genesis\n通常処理', value: 80, description: '従来比80倍の処理速度' },
    { name: 'Genesis\n最大加速', value: 430000, description: '最大430,000倍の高速化' }
  ];

  return (
    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 p-8">
      <div className="max-w-7xl mx-auto">
        <h1 className="text-4xl font-bold text-center mb-8 text-gray-800">Genesis プラットフォーム分析</h1>
        
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          <div className="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
            <h2 className="text-2xl font-bold mb-4 text-gray-800">プロジェクト概要</h2>
            <div className="space-y-4">
              <div className="bg-blue-50 p-4 rounded-lg">
                <h3 className="font-semibold mb-2">主要な特徴</h3>
                <ul className="list-disc pl-5 space-y-2">
                  <li>世界最速の物理エンジン（最大430,000倍の高速化）</li>
                  <li>100% Python実装による優れた拡張性</li>
                  <li>フォトリアリスティックレンダリング機能</li>
                  <li>4Dダイナミックワールド生成</li>
                  <li>20以上の研究機関との共同開発</li>
                </ul>
                <div className="text-sm text-gray-500 mt-2">
                  出典: <a href="https://genesis-embodied-ai.github.io/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">Genesis 公式サイト</a>
                </div>
              </div>
            </div>
          </div>

          <div className="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
            <h2 className="text-2xl font-bold mb-4 text-gray-800">開発の進捗</h2>
            <ResponsiveContainer width="100%" height={300}>
              <AreaChart data={timelineData}>
                <defs>
                  <linearGradient id="progressColor" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="5%" stopColor="#45B7D1" stopOpacity={0.8}/>
                    <stop offset="95%" stopColor="#45B7D1" stopOpacity={0.2}/>
                  </linearGradient>
                </defs>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="year" />
                <YAxis />
                <Tooltip content={({ active, payload, label }) => {
                  if (active && payload && payload.length) {
                    return (
                      <div className="bg-white p-2 border rounded shadow">
                        <p className="font-bold">{`${label}年`}</p>
                        <p>{`進捗: ${payload[0].value}%`}</p>
                        <p>{payload[0].payload.event}</p>
                        <p className="text-sm text-gray-600">{payload[0].payload.details}</p>
                      </div>
                    );
                  }
                  return null;
                }}/>
                <Area type="monotone" dataKey="progress" stroke="#45B7D1" fill="url(#progressColor)" />
              </AreaChart>
            </ResponsiveContainer>
          </div>

          <div className="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
            <h2 className="text-2xl font-bold mb-4 text-gray-800">シミュレーター性能比較</h2>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={performanceData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis label={{ value: '相対速度（倍）', angle: -90, position: 'insideLeft' }} />
                <Tooltip content={({ active, payload, label }) => {
                  if (active && payload && payload.length) {
                    return (
                      <div className="bg-white p-2 border rounded shadow">
                        <p className="font-bold">{label}</p>
                        <p>{`速度: ${payload[0].value}倍`}</p>
                        <p className="text-sm text-gray-600">{payload[0].payload.details}</p>
                      </div>
                    );
                  }
                  return null;
                }}/>
                <Bar dataKey="speed">
                  {performanceData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Bar>
              </BarChart>
            </ResponsiveContainer>
          </div>

          <div className="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
            <h2 className="text-2xl font-bold mb-4 text-gray-800">主要機能評価</h2>
            <ResponsiveContainer width="100%" height={300}>
              <RadarChart data={featuresData}>
                <PolarGrid />
                <PolarAngleAxis dataKey="name" />
                <PolarRadiusAxis angle={30} domain={[0, 100]} />
                <Tooltip content={({ active, payload, label }) => {
                  if (active && payload && payload.length) {
                    return (
                      <div className="bg-white p-2 border rounded shadow">
                        <p className="font-bold">{label}</p>
                        <p>{`評価: ${payload[0].value}点`}</p>
                        <p className="text-sm text-gray-600">{payload[0].payload.details}</p>
                      </div>
                    );
                  }
                  return null;
                }}/>
                <Radar name="Genesis" dataKey="value" stroke="#45B7D1" fill="#45B7D1" fillOpacity={0.6} />
              </RadarChart>
            </ResponsiveContainer>
          </div>

          <div className="bg-white rounded-xl shadow-lg p-6 col-span-2 hover:shadow-xl transition-shadow duration-300">
            <h2 className="text-2xl font-bold mb-4 text-gray-800">シミュレーション速度比較（対数スケール）</h2>
            <ResponsiveContainer width="100%" height={300}>
              <ComposedChart data={simulationSpeedData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis type="number" scale="log" domain={[1, 1000000]} tickFormatter={(value) => value.toLocaleString()} />
                <Tooltip content={({ active, payload, label }) => {
                  if (active && payload && payload.length) {
                    return (
                      <div className="bg-white p-2 border rounded shadow">
                        <p className="font-bold">{label}</p>
                        <p>{`速度: ${payload[0].value.toLocaleString()}倍`}</p>
                        <p className="text-sm text-gray-600">{payload[0].payload.description}</p>
                      </div>
                    );
                  }
                  return null;
                }}/>
                <Bar dataKey="value" fill="#45B7D1" />
                <Line type="monotone" dataKey="value" stroke="#FF6B6B" strokeWidth={2} />
              </ComposedChart>
            </ResponsiveContainer>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;