ESMChemBERTAGPALAnimation

const DataTable = () => {
  const data = [
    { id: 1, esm: 'ESM1', chemBerta: 'CB1', combined: 'E1+C1', affinity: '?' },
    { id: 2, esm: 'ESM2', chemBerta: 'CB2', combined: 'E2+C2', affinity: '?' },
    { id: 3, esm: 'ESM3', chemBerta: 'CB3', combined: 'E3+C3', affinity: '?' },
  ];

  return (
    <table style={{borderCollapse: 'collapse', width: '100%'}}>
      <thead>
        <tr>
          <th style={{border: '1px solid black', padding: '5px'}}>ID</th>
          <th style={{border: '1px solid black', padding: '5px'}}>ESM</th>
          <th style={{border: '1px solid black', padding: '5px'}}>ChemBERTA</th>
          <th style={{border: '1px solid black', padding: '5px'}}>Combined</th>
          <th style={{border: '1px solid black', padding: '5px'}}>Affinity</th>
        </tr>
      </thead>
      <tbody>
        {data.map(row => (
          <tr key={row.id}>
            <td style={{border: '1px solid black', padding: '5px'}}>{row.id}</td>
            <td style={{border: '1px solid black', padding: '5px'}}>{row.esm}</td>
            <td style={{border: '1px solid black', padding: '5px'}}>{row.chemBerta}</td>
            <td style={{border: '1px solid black', padding: '5px'}}>{row.combined}</td>
            <td style={{border: '1px solid black', padding: '5px'}}>{row.affinity}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

return <DataTable />;

const CombineEmbeddings = () => (
  <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '10px'}}>
    <div style={{padding: '10px', backgroundColor: 'lightblue'}}>ESM Embeddings</div>
    <div>+</div>
    <div style={{padding: '10px', backgroundColor: 'lightgreen'}}>ChemBERTA Embeddings</div>
    <div>=</div>
    <div style={{padding: '10px', backgroundColor: 'lightyellow'}}>Combined Embeddings</div>
  </div>
);

return <CombineEmbeddings />;