ほぼ電力ゼロでAIが絵を描く？光学的生成モデルの仕組み

import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const App = () => {

  const energyData = [
    {
      name: '画像1枚生成の消費エネルギー (推定)',
      'デジタルAI': 1580,
      '光学的生成モデル': 0.033,
    },
  ];

  const performanceData = [
    { task: '画像生成', dataset: 'MNIST', metric: 'FID', value: '116.76' },
    { task: '画像生成', dataset: 'Fashion-MNIST', metric: 'FID', value: '144.54' },
    { task: '条件付き生成', dataset: 'MNIST', metric: 'FID', value: '117.15' },
    { task: '条件付き生成', dataset: 'Fashion-MNIST', metric: 'FID', value: '137.51' },
    { task: '画像修復', dataset: 'MNIST', metric: 'MSE', value: '0.023' },
    { task: '画像修復', dataset: 'Fashion-MNIST', metric: 'MSE', value: '0.018' },
  ];

  const Card = ({ title, children }) => (
    <div className="bg-white shadow-lg rounded-lg p-6 mb-6">
      <h2 className="text-2xl font-bold mb-4 text-gray-800 border-b-2 border-blue-500 pb-2">{title}</h2>
      <div className="text-gray-700">{children}</div>
    </div>
  );

  return (
    <div className="bg-gray-100 min-h-screen font-sans p-4 sm:p-8">
      <div className="max-w-7xl mx-auto">
        <header className="text-center mb-10">
          <h1 className="text-4xl md:text-5xl font-extrabold text-gray-900">光学的生成モデル：光で絵を描くAIのすべて</h1>
          <p className="text-lg text-gray-600 mt-2">ほぼ電力ゼロで、光の速さで画像を生成する革新的技術</p>
        </header>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
            <Card title="🚀 光学的生成モデルとは？">
                <ul className="list-disc list-inside space-y-2 text-base">
                    <li>電気の代わりに<span className="font-bold text-blue-600">「光」</span>を使って計算・画像生成を行う新しいAI技術。</li>
                    <li>コンピュータ内の電気信号（電子）ではなく、光の物理現象（回折）を利用して計算を実行する。</li>
                    <li>従来のAIが抱える<span className="font-bold text-red-500">膨大な電力消費</span>と<span className="font-bold text-red-500">計算時間</span>の問題を解決する可能性を秘めている。</li>
                    <li>将来的には、医療、科学研究、自動運転など様々な分野での応用が期待される。</li>
                </ul>
            </Card>
            <Card title="💡 何がすごいの？">
                 <ul className="list-disc list-inside space-y-2 text-base">
                    <li><span className="font-semibold">驚異的なスピード:</span> 計算は光が装置を通り抜けるだけで完了するため、その速度は文字通り<span className="font-bold text-green-600">「光速」</span>。光学処理は1ナノ秒（10億分の1秒）未満で完了する。</li>
                    <li><span className="font-semibold">圧倒的な省エネ性能:</span> 画像を生成する過程でほとんど電力を消費しない。従来のデジタルAIの<span className="font-bold text-green-600">数千分の一以下</span>のエネルギーで済む可能性も。</li>
                     <li><span className="font-semibold">多様性と創造性:</span> 生成画像が画一的になる「モード崩壊」が起こりにくく、より多様で創造的な画像を生成できる。</li>
                </ul>
            </Card>
        </div>

        <Card title="🔧 どうやって動くの？仕組みの比較">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <div className="border rounded-lg p-4">
                    <h3 className="text-xl font-bold text-center mb-2">Optical Generative Model</h3>
                    <img src="https://media.springernature.com/m685/springer-static/image/art%3A10.1038%2Fs41586-025-09446-5/MediaObjects/41586_2025_9446_Fig1_HTML.png" alt="Optical Generative Model Diagram" className="w-full h-auto rounded-md"/>
                    <p className="text-sm text-center mt-2 text-gray-500">出典: <a href="https://www.nature.com/articles/s41586-025-09446-5" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">Nature</a></p>
                    <ul className="mt-4 list-decimal list-inside space-y-1">
                        <li><span className="font-semibold">デジタルエンコーダ:</span> ランダムなノイズから「光の種」（位相パターン）を生成。</li>
                        <li><span className="font-semibold">空間光変調器(SLM):</span> 「光の種」を物理的な光のパターンとして表示。</li>
                        <li><span className="font-semibold">回折デコーダ:</span> SLMを通過した光が、特殊な層を通り抜けることで回折し、画像が生成される。</li>
                    </ul>
                </div>
                <div className="border rounded-lg p-4">
                    <h3 className="text-xl font-bold text-center mb-2">Optoelectronic GAN (OE-GAN)</h3>
                    <img src="https://media.springernature.com/m685/springer-static/image/art%3A10.1038%2Fs42005-025-02081-6/MediaObjects/42005_2025_2081_Fig1_HTML.png" alt="Optoelectronic GAN Diagram" className="w-full h-auto rounded-md"/>
                    <p className="text-sm text-center mt-2 text-gray-500">出典: <a href="https://www.nature.com/articles/s42005-025-02081-6" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">Communications Physics</a></p>
                    <ul className="mt-4 list-decimal list-inside space-y-1">
                        <li><span className="font-semibold">光学的生成器 (Generator):</span> 光の回折ネットワークを使って「偽物の画像」を生成。</li>
                        <li><span className="font-semibold">電子的識別器 (Discriminator):</span> 生成された画像が本物か偽物かを電子回路で判定。</li>
                        <li><span className="font-semibold">フィードバック:</span> 識別器の判定結果を元に、生成器がより本物らしい画像を生成できるように学習する。</li>
                    </ul>
                </div>
            </div>
        </Card>

        <Card title="📊 驚異のエネルギー効率">
            <p className="text-center mb-4 text-gray-600">手書き数字（MNIST）の画像を1枚生成する際の消費エネルギー比較（推定値）。光学的生成モデルのエネルギー効率の高さが際立ちます。</p>
            <div style={{ height: '400px' }}>
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={energyData} layout="vertical" margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis type="number" domain={[0, 1600]} label={{ value: '消費エネルギー (mJ)', position: 'insideBottom', offset: -5 }}/>
                  <YAxis type="category" dataKey="name" width={150} />
                  <Tooltip formatter={(value, name) => [`${value.toLocaleString()} mJ`, name]}/>
                  <Legend />
                  <Bar dataKey="デジタルAI" fill="#ef4444" background={{ fill: '#eee' }} />
                  <Bar dataKey="光学的生成モデル" fill="#22c55e" />
                </BarChart>
              </ResponsiveContainer>
            </div>
             <p className="text-sm text-center mt-4 text-gray-500">出典: <a href="https://wirelesswire.jp/2025/09/91184/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">WirelessWire News</a> のデータを基に作成</p>
        </Card>

        <Card title="🏆 OE-GANの性能評価">
            <p className="text-center mb-4 text-gray-600">OE-GANは、様々なタスクで従来のデジタルGANに匹敵する高い性能を示しています。 (FID、MSEは共に低いほど高性能)</p>
            <div className="overflow-x-auto">
                <table className="min-w-full bg-white border">
                    <thead className="bg-blue-500 text-white">
                        <tr>
                            <th className="py-3 px-4 text-left">タスク</th>
                            <th className="py-3 px-4 text-left">データセット</th>
                            <th className="py-3 px-4 text-left">評価指標</th>
                            <th className="py-3 px-4 text-left">結果</th>
                        </tr>
                    </thead>
                    <tbody className="text-gray-700">
                        {performanceData.map((row, index) => (
                            <tr key={index} className="border-b hover:bg-gray-100">
  <td className="py-3 px-4">{row.task}</td>
  <td className="py-3 px-4">{row.dataset}</td>
  <td className="py-3 px-4">{row.metric}</td>
  <td className="py-3 px-4 font-mono">{row.value}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
            <p className="text-sm text-center mt-4 text-gray-500">出典: <a href="https://www.nature.com/articles/s42005-025-02081-6" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">Communications Physics</a></p>
        </Card>
        
        <Card title="展望と課題">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h3 class="text-xl font-semibold text-green-700 mb-2">未来の応用分野</h3>
                    <ul class="list-disc list-inside space-y-2">
                        <li><span className="font-bold">医療:</span> MRIやX線画像の高解像度化を瞬時に行う。</li>
                        <li><span className="font-bold">科学研究:</span> 新素材や分子構造のデザインを高速化する。</li>
                        <li><span className="font-bold">自動運転:</span> センサー情報をリアルタイム処理し、安全性を向上。</li>
                        <li><span className="font-bold">AR/VR:</span> よりリアルな映像を低消費電力で生成する。</li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-xl font-semibold text-red-700 mb-2">これからの課題</h3>
                    <ul class="list-disc list-inside space-y-2">
                        <li><span className="font-bold">精密な光学系:</span> 光のわずかなズレが品質に影響するため、高精度な設計・調整が必要。</li>
                        <li><span className="font-bold">デバイスの性能:</span> 光のパターンを表示する空間光変調器(SLM)などの性能向上が不可欠。</li>
                        <li><span className="font-bold">複雑な画像:</span> 人間の顔や風景など、より複雑な画像の高品質な生成には更なる研究が必要。</li>
                     </ul>
                </div>
            </div>
        </Card>

        <footer className="text-center text-sm text-gray-500 mt-10">
          <p>本ページは提供されたコンテキスト情報を基に生成されました。</p>
          <p>主な情報源: 
            <a href="https://www.nature.com/articles/s41586-025-09446-5" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">Nature</a>, 
            <a href="https://www.nature.com/articles/s42005-025-02081-6" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">Communications Physics</a>, 
            <a href="https://wirelesswire.jp/2025/09/91184/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">WirelessWire News</a>
          </p>
        </footer>
      </div>
    </div>
  );
}

export default App;