最新版：材料開発を加速する物性予測・設計AIモデル3選と実践ガイド

import React, { useState } from 'react';

const models = [
  {
    id: 'cdvae',
    name: 'CDVAE',
    description: 'Crystal Diffusion Variational AutoEncoder（CDVAE）は、材料の周期的構造、すなわち結晶構造を生成することに特化したオートエンコーダーモデルです。既存の材料データベースから学習し、安定した新しい材料構造を生成したり、特定の物性を持つ材料を逆設計したりすることが可能です。',
    githubUrl: 'https://github.com/txie-93/cdvae',
    paperUrl: 'https://arxiv.org/abs/2110.06197',
    source: '[45]',
    installation: {
      source: '[45]',
      code: `conda env create -f env.yml\nconda activate cdvae\npip install -e .`,
    },
    usage: [
      {
        title: 'モデルのトレーニング',
        source: '[45]',
        description: '提供されているデータセット（例: ペロブスカイト構造の`perov`）を用いてモデルをトレーニングします。',
        code: 'python cdvae/run.py data=perov expname=perov',
      },
      {
        title: '材料の生成と物性最適化',
        source: '[59]',
        description: 'トレーニング済みのモデルを使って、新しい材料構造を生成します。`--tasks`引数に`opt`を指定することで、学習済みモデルの潜在空間上で物性を最小化（最適化）し、新しい材料構造を生成します。',
        code: 'python scripts/evaluate.py --model_path MODEL_PATH --tasks recon gen opt',
      },
    ],
  },
  {
    id: 'ibm_fm4m',
    name: 'IBM FM4M',
    description: 'IBMが開発したFM4M（Foundation Model for Materials）は、SMILES文字列、分子グラフ、3D原子位置など、多様な化学表現（モダリティ）を扱えるマルチモーダルな基盤モデルです。物性予測から分子生成まで、幅広いタスクに応用可能な点が特徴です。',
    githubUrl: 'https://github.com/IBM/materials?tab=readme-ov-file',
    huggingfaceUrl: 'https://huggingface.co/collections/ibm/materials-673465deacbdf38d9c0c6303',
    source: '[46]',
    installation: {
      source: '[46]',
      code: `conda create --name fm4m python=3.9.7\nconda activate fm4m\npip install -r requirements.txt`,
    },
    usage: [
      {
        title: 'FM4M-Kitを通じた利用（Python API）',
        source: '[46]',
        description: '`fm4m-kit`は、複数のモデルを統一的なインターフェースで操作できるツールキットです。特定のモデルを用いて分子の特徴表現を抽出したり、複数のモデルを組み合わせて物性予測を行ったりできます。',
        code: `from ibm_fm4m import fm4m\n\n# SELFIES-TEDモデルで分子の特徴表現を抽出する例\nfeature_selfies_train = fm4m.get_representation(model="selfies-ted", data=xtrain)\n\n# 複数のモデルを統合して物性予測タスクの性能を評価する例\nscore = fm4m.multi_modal(model_list=["SELFIES-TED","MHG-GED","SMI-TED"], x_train=xtrain, y_train=ytrain, x_test=xtest, y_test=ytest, downstream_model="DefaultClassifier")`,
      },
      {
        title: 'Hugging FaceのWeb UIを利用',
        source: '[46]',
        description: '最も手軽な方法は、Hugging Face Spacesで公開されているWeb UIを利用することです。このインターフェースを使えば、コーディングを行うことなく、データのアップロードからモデルの学習、結果の可視化までを直感的に実行できます。',
        code: null,
      },
    ],
  },
  {
    id: 'meta_omat24',
    name: 'Meta OMat24',
    description: 'MetaのFAIR Chemistryチームが公開したOMat24（Open Materials 2024）は、物性予測に特化したモデルのコレクションです。特に、原子間ポテンシャルを精密にモデル化するEquiformerV2やeSENといった先進的なアーキテクチャを採用しています。',
    huggingfaceUrl: 'https://huggingface.co/fairchem/OMAT24',
    datasetUrl: 'https://huggingface.co/datasets/fairchem/OMAT24',
    source: '[47]',
    installation: {
      source: '[48]',
      code: 'pip install fairchem-core',
    },
    usage: [
      {
        title: '原子構造の最適化',
        source: '[47]',
        description: '`fairchem`ライブラリと`ASE (Atomic Simulation Environment)`を組み合わせて利用します。ダウンロードしたモデルのチェックポイントファイルを使い、原子構造のエネルギーや力を計算し、構造を最適化します。',
        code: `from fairchem.core import OCPCalculator\nfrom ase.optimize import FIRE\nfrom ase.io import read\n\n# \"atoms.xyz\"から原子構造を読み込む\natoms = read("atoms.xyz")\n\n# ダウンロードしたOMat24のモデルチェックポイントを指定\ncalc = OCPCalculator(checkpoint_path="eqV2_31M_omat_mp_salex.pt")\n\n# ASEの原子オブジェクトに計算機をセット\natoms.calc = calc\n\n# FIREアルゴリズムを用いて構造最適化を実行\ndyn = FIRE(atoms)\ndyn.run(fmax=0.05)`,
      },
    ],
  },
  {
    id: 'other_models',
    name: 'その他のモデル',
    description: 'その他にも、特定のタスクに特化した多様なオープンソースモデル・ライブラリが開発されています。',
    models: [
        { name: 'MODNet', url: 'https://github.com/ppdebreuck/modnet', description: '限られたデータセットでも高い性能を発揮する物性予測フレームワーク。', source: '[50]' },
        { name: 'CrabNet', url: 'https://github.com/anthony-wang/CrabNet', description: '材料の組成情報のみを入力として物性を予測するアテンションベースのモデル。', source: '[43]' },
        { name: 'MAST-ML', url: 'https://github.com/uw-cmg/MAST-ML', description: '予測の不確実性や適用領域の分析機能が充実したツールキット。', source: '[44]' },
        { name: 'XenonPy', url: 'https://github.com/yoshida-lab/XenonPy', description: 'データベース接続からモデル構築までをサポートする統合ライブラリ。', source: '[51]' },
        { name: 'NIMS-OS', url: 'https://github.com/nimsos-dev/nimsos', description: 'AIとロボット実験を連携させ、材料探索を自動化するプラットフォーム。', source: '[49]' },
    ]
  }
];

const CodeBlock = ({ code }) => (
  <pre className="bg-gray-800 text-white p-4 rounded-md overflow-x-auto text-sm">
    <code>{code}</code>
  </pre>
);

const App = () => {
  const [activeTab, setActiveTab] = useState(models[0].id);
  const activeModel = models.find(m => m.id === activeTab);

  return (
    <div className="bg-gray-100 text-gray-800 font-sans p-4 md:p-8 min-h-screen">
      <div className="max-w-6xl mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
        <header className="p-6 bg-blue-600 text-white">
          <h1 className="text-3xl font-bold">オープンソースの物性予測・設計AIモデル</h1>
          <p className="mt-2 text-blue-100">主要な生成AIモデルの概要と使い方</p>
        </header>

        <div className="flex flex-wrap border-b border-gray-200">
          {models.map(model => (
            <button
              key={model.id}
              className={`py-3 px-5 text-sm font-medium transition-colors duration-200 ${activeTab === model.id ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-500 hover:text-blue-600'}`}
              onClick={() => setActiveTab(model.id)}
            >
              {model.name}
            </button>
          ))}
        </div>

        <div className="p-6">
          {activeModel && activeModel.id !== 'other_models' && (
            <div>
              <h2 className="text-2xl font-semibold text-gray-800 mb-2">{activeModel.name}</h2>
              <p className="text-gray-600 mb-4">{activeModel.description} 
                <a href={activeModel.paperUrl || activeModel.githubUrl} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700 ml-1">出典{activeModel.source}</a>
              </p>
              <div className="flex space-x-4 mb-6">
                 {activeModel.githubUrl && <a href={activeModel.githubUrl} target="_blank" rel="noopener noreferrer" className="text-sm bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded-lg transition-colors">GitHubリポジトリ</a>}
                 {activeModel.huggingfaceUrl && <a href={activeModel.huggingfaceUrl} target="_blank" rel="noopener noreferrer" className="text-sm bg-yellow-200 hover:bg-yellow-300 text-yellow-800 font-semibold py-2 px-4 rounded-lg transition-colors">Hugging Face</a>}
                 {activeModel.datasetUrl && <a href={activeModel.datasetUrl} target="_blank" rel="noopener noreferrer" className="text-sm bg-green-200 hover:bg-green-300 text-green-800 font-semibold py-2 px-4 rounded-lg transition-colors">データセット</a>}
              </div>

              <div className="space-y-6">
                <div>
                  <h3 className="text-lg font-semibold border-b pb-2 mb-3">インストール方法</h3>
                  <p className="text-sm text-gray-500 mb-2">conda等を用いた環境構築が推奨されています。 <a href={activeModel.githubUrl} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">出典{activeModel.installation.source}</a></p>
                  <CodeBlock code={activeModel.installation.code} />
                </div>
                
                <div>
                    <h3 className="text-lg font-semibold border-b pb-2 mb-3">主な使い方</h3>
                    {activeModel.usage.map((use, index) => (
                        <div key={index} className="mb-4">
                            <h4 className="font-semibold text-md mb-1">{use.title}</h4>
                            <p className="text-sm text-gray-500 mb-2">{use.description} <a href={activeModel.githubUrl} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">出典{use.source}</a></p>
                            {use.code && <CodeBlock code={use.code} />}
                        </div>
                    ))}
                </div>
              </div>
            </div>
          )}
          {activeModel && activeModel.id === 'other_models' && (
             <div>
              <h2 className="text-2xl font-semibold text-gray-800 mb-2">{activeModel.name}</h2>
              <p className="text-gray-600 mb-4">{activeModel.description}</p>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {activeModel.models.map((model, index) => (
                        <div key={index} className="border rounded-lg p-4 bg-gray-50">
                            <a href={model.url} target="_blank" rel="noopener noreferrer" className="text-lg font-bold text-blue-600 hover:underline">{model.name}</a>
                            <p className="text-sm text-gray-600 mt-1">{model.description} <span className="text-xs">出典{model.source}</span></p>
                        </div>
                    ))}
                </div>
             </div>
          )}
        </div>
      </div>
       <footer className="text-center mt-6 text-xs text-gray-500">
          <p>データ出典: コンテキスト内のGitHub, Hugging Face, 各種技術ブログ等の公開情報に基づき作成。</p>
      </footer>
    </div>
  );
};

export default App;