Merge pull request #20 from mims-harvard/websitev2

Websitev2

app.py

@@ -238,11 +238,20 @@ class TDC2Homepage(Resource):
 
     def get(self):
         return make_response(render_template("/MyApp.html"), 200, {'Content-Type': 'text/html'})
+
+class LegacyHome(Resource):
+    def get(self):
+        publications.sort(key=lambda x: (-x["year"], -x["month"]))
+        args = {
+            "publications": publications
+        }
+        return make_response(render_template("/index.html", **args), 200, {'Content-Type': 'text/html'})
 
 
 api.add_resource(FctOverview, "/fct_overview")
 api.add_resource(FeedbackForm, "/feedback")
 api.add_resource(TDC2Homepage, "/pytdc")
+api.add_resource(LegacyHome, "/home")
 
 
 if __name__ == '__main__':

backend/metadata/publications.py

@@ -7,7 +7,7 @@
         2024,
         12,
         {
-            "Paper": "https://openreview.net/pdf?id=kL8dlYp6IM",
+            "Paper": "https://zitniklab.hms.harvard.edu/publications/papers/TDC-neurips21-main.pdf",
             "Poster": "https://drive.google.com/file/d/1plypydZCaegbgxyCl-xehFxSgwX6e8So/view?usp=sharing"
         }
     ),
@@ -26,7 +26,7 @@
         2024,
         6,
         {
-            "Paper": "https://www.biorxiv.org/content/10.1101/2024.06.12.598655v2",
+            "Paper": "https://zitniklab.hms.harvard.edu/publications/papers/TDC-neurips21-main.pdf",
             "Conference": "https://portal.ml4dd.com/moml-2024",
             "Poster and Tweet": "https://x.com/ProjectTDC/status/1803581129376629234"
         }

frontend/tdc/src/App.jsx

@@ -24,7 +24,7 @@ const App = () => {
           <meta charset="utf-8" />
           <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
           <title>
-            TDC2: A multimodal ML platform for biomedical foundation models.
+            PyTDC: A multimodal ML platform for biomedical foundation models.
           </title>
           <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />

frontend/tdc/src/containers/Home/index.tsx

@@ -9,14 +9,14 @@ import SectionDemo from './SectionDemo';
 const HomeContainer: React.FC = () => {
   useEffect(() => {
     // Update the document title client-side
-    handelTitle('TDC2: Multimodal ML Platform for Foundation Models in Therapeutics');
+    handelTitle('PyTDC: A multimodal machine learning training, evaluation, and inference platform for biomedical foundation models');
   }, []);
 
   useEffect(() => {
     // Update body background style client-side
     if (typeof document !== 'undefined') {
       const body = document.getElementsByTagName('body')[0];
-      if (document.title === 'TDC2: Multimodal ML Platform for Foundation Models in Therapeutics') {
+      if (document.title === 'PyTDC: A multimodal machine learning training, evaluation, and inference platform for biomedical foundation models') {
         body.style.backgroundImage =
           'linear-gradient(180deg,#240044 0,#0f0240 25%,#400959 40%,#0f0240 65%,#0f0240)';
       } else {

frontend/tdc/src/data/data-containers/data-HomeDemo1.tsx

@@ -1,10 +1,4 @@
 import {
-    HomeDemo1Services1,
-    HomeDemo1Services2,
-    HomeDemo1Services3,
-    HomeDemo1Services4,
-    HomeDemo1Services5,
-    HomeDemo1Services6,
 
     HomeDemo1TokenIcon1,
 
@@ -39,7 +33,7 @@ export const VerticalSocial = [
     {nameIco:'fa-brands fa-slack', link:'https://join.slack.com/t/pytdc/shared_invite/zt-x0ujg5v6-zwtQZt83fhRdgrYjXRFz5g'},
     {nameIco:'fa-brands fa-youtube', link:'https://www.youtube.com/watch?v=ZuCOhEZtaOw&pp=ygUfeml0bmlrIHRoZXJhcGV1dGljIGRhdGEgY29tbW9ucw%3D%3D'},
     {nameIco:'fa-solid fa-face-smile', link:'https://huggingface.co/tdc'},
-    {nameIco:'fa-solid fa-file-pdf', link:'https://www.biorxiv.org/content/10.1101/2024.06.12.598655v2'} 
+    {nameIco:'fa-solid fa-file-pdf', link:'https://zitniklab.hms.harvard.edu/publications/papers/TDC-neurips21-main.pdf'} 
 ]
 
 export const SingleCoolFact = [
@@ -57,37 +51,31 @@ export const SingleCoolFact = [
 
 export const service_single_content = [
     {
-        img:HomeDemo1Services6,
         title:'TDC.scDTI',
         content: 'Single-cell drug-target nomination (identification). The goal is to train a model for predicting the probability that a protein is a candidate therapeutic target in a specific cell type.',
         link:'https://tdcommons.ai/multi_pred_tasks/scdti'
     },
     {
-        img:HomeDemo1Services3,
         title:'TDC.PerturbOutcome',
         content:'We define a task for predicting responses in gene expression of single cells to chemical and genetic perturbations, aiming to measure model generalization across cell lines and perturbation types.',
         link:'https://tdcommons.ai/multi_pred_tasks/counterfactual'
     },
     {
-        img:HomeDemo1Services4,
         title:'TDC.ProteinPeptide',
-        content:"Capturing the dynamic nature of protein-peptide interactions requires advanced sampling techniques and computational resources, making the prediction of binding affinities more complex (Antes et al., 2014). TDC-2 provides benchmarks integrating newly discovered peptides to test ML models on their ability to generalize to cutting-edge peptidomimetics.",
+        content:"Capturing the dynamic nature of protein-peptide interactions requires advanced sampling techniques and computational resources, making the prediction of binding affinities more complex (Antes et al., 2014). We provide benchmarks integrating newly discovered peptides to test ML models on their ability to generalize to cutting-edge peptidomimetics.",
         link:'https://tdcommons.ai/multi_pred_tasks/proteinpeptide'
     },
     {
-        img:HomeDemo1Services2,
         title:'TDC.TCREpitope',
         content:" T-cells are an integral part of the adaptive immune system, whose survival, proliferation, activation and function are all governed by the interaction of their T-cell receptor (TCR) with immunogenic peptides (epitopes). This new task aims to predict the binding affinity given a pair of TCR sequence and epitope sequence. The models are, at very least, expected to generalize to unseen TCRs. But the main challenge of this dataset is to generalize to samples where both epitope and TCR are unseen.",
         link: 'https://tdcommons.ai/multi_pred_tasks/tcrepitope'
     },
     {
-        img:HomeDemo1Services1,
         title: "TDC.TrialOutcome",
         content: "Clinical trial outcome prediction is a machine learning task that aims to forecast the outcome of clinical trials, such as the approval rate of a drug or treatment. It utilizes various clinical trial features, including the drug's molecular structure, disease code representing the medical condition, and eligibility criteria that specify participant selection criteria. Machine learning models for clinical trial outcome prediction are expected to demonstrate robust generalization to novel drug molecular structures and rare diseases. The ability to generalize well to diverse and evolving conditions is crucial for the models to be adaptable and effectively contribute to the field of clinical trials.",
         link: 'https://tdcommons.ai/multi_pred_tasks/trialoutcome'
     },
     {
-        img:HomeDemo1Services5,
         title:'TDC.SBDD',
         content:'Structure-based Drug Design is to generate diverse, novel molecules that have high binding affinity to protein pockets (3D structures) and desirable chemical properties. These properties are measured by oracle functions. A machine learning task first learns the molecular characteristics given specific protein pockets from a large set of protein-ligand pair data. Then, from the learned conditional distribution, we can sample novel candidates.',
         link:'https://tdcommons.ai/multi_pred_tasks/sbdd'
@@ -234,7 +222,7 @@ export const FQAInfo = [
 export const DocElementTitle = [
     {
         title:'NeurIPS\'24 AIDrugX Spotlight Paper',
-        link:'https://openreview.net/pdf?id=kL8dlYp6IM'
+        link:'https://zitniklab.hms.harvard.edu/publications/papers/TDC-neurips21-main.pdf'
     },
     {
         title:'NeurIPS\'24 AIDrugX Poster',
@@ -248,6 +236,14 @@ export const DocElementTitle = [
         title:'MoML\'24 Conference @ Mila Poster',
         link:'https://drive.google.com/file/d/1LYdITeFY5iX07zyXPGVEjMpYjuHMrneS/view?usp=sharing'
     },
+    {
+        title:'Nature Chemical Biology 2022',
+        link:'https://www.nature.com/articles/s41589-022-01131-2'
+    },
+    {
+        title:'NeurIPS 2021',
+        link:'https://openreview.net/pdf?id=8nvgnORnoWr'
+    }
 ]
 
 export const TokenText = [

frontend/tdc/src/index.tsx

@@ -16,7 +16,7 @@ const Home: React.FC = () => {
     <>
       {/* Head component for metadata */}
       <Head>
-        <meta property="og:title" content="The Commons TDC-2" />
+        <meta property="og:title" content="PyTDC: The Commons" />
         <meta property="og:type" content="website" />
         <meta property="og:url" content="https://tdcommons.ai" />
         {/* Uncomment and provide a valid image URL if needed */}

frontend/tdc/src/layouts/Header/index.tsx

@@ -5,8 +5,6 @@ import {Logo} from '../../data/data-layout/data-Header';
 
 import {Addshrink , addActiveClass , OpenMenu , moveSmooth} from "../../utils/index"
 
-import Preloader from '../../components/Preloader/index'
-
 const Header = () => {
 
   useEffect(() => {
@@ -23,7 +21,6 @@ const Header = () => {
 
   return (
     <>
-      <Preloader />
       <header className="header-area wow fadeInDown" data-wow-delay="0.2s">
         <div className="classy-nav-container breakpoint-off">
           <div className="container">
@@ -47,12 +44,11 @@ const Header = () => {
                   <ul id="nav">
                     <li><a onClick={moveSmooth} href="#home" className="login-btn" style={{borderColor:'#FFEFC2', textAlign:'center', alignItems:'center'}}>Home</a></li>
                     <li><a onClick={moveSmooth} href="#about" className="login-btn" style={{borderColor:'#FFEFC2', textAlign:'center', alignItems:'center'}}>About</a></li>
-                    <li><a onClick={moveSmooth} href="#services" className="login-btn" style={{borderColor:'#FFEFC2', textAlign:'center', alignItems:'center'}}>Services</a></li>
-                    <li><a onClick={moveSmooth} href="#roadmap" className="login-btn" style={{borderColor:'#FFEFC2', textAlign:'center', alignItems:'center'}}>Roadmap</a></li>
+                    <li><a onClick={moveSmooth} href="#services" className="login-btn" style={{borderColor:'#FFEFC2', textAlign:'center', alignItems:'center'}}>Features</a></li>
                     <li><a onClick={moveSmooth} href="#team" className="login-btn" style={{borderColor:'#FFEFC2', textAlign:'center', alignItems:'center'}}>Team</a></li>
-                    <li><a onClick={moveSmooth} href="#contact" className="login-btn" style={{borderColor:'#FFEFC2', textAlign:'center', alignItems:'center'}}>Contact</a></li>
+                    {/* <li><a onClick={moveSmooth} href="#contact" className="login-btn" style={{borderColor:'#FFEFC2', textAlign:'center', alignItems:'center'}}>Contact</a></li> */}
                   </ul>
-                  <a href="https://tdcommons.ai" className="btn login-btn ml-50" style={{borderColor:'#FFDF00'}}>Homepage</a>
+                  <a href="https://tdcommons.ai/home" className="btn login-btn ml-50" style={{borderColor:'#FFDF00'}}>Homepage</a>
                 </div>
               </div>
             </nav>

frontend/tdc/src/pages/MyApp.tsx

@@ -16,7 +16,7 @@ const Home: React.FC = () => {
     <>
       {/* Head component for metadata */}
       <Head>
-        <meta property="og:title" content="The Commons TDC-2" />
+        <meta property="og:title" content="The Commons PyTDC" />
         <meta property="og:type" content="website" />
         <meta property="og:url" content="https://tdcommons.ai" />
         {/* Uncomment and provide a valid image URL if needed */}

frontend/tdc/src/template/HomeDemo1/SecAboutUs/SecWhoWeContant/index.tsx

@@ -14,7 +14,10 @@ const SecWhoWeContant = () => {
               <Span /> 
             </div>
             <h4 data-aos="fade-up">TDC API-first Architecture</h4>
-            <p data-aos="fade-up">An unprecedented collection of continually updated heterogeneous data sources is unified under the introduced API-first-dataset architecture. This includes a multimodal single-cell RNA data atlas spanning 85M+ cells.</p>
+            <p data-aos="fade-up">A collection of multimodal continually updated heterogeneous data sources is unified under the 
+              introduced &quot;API-first-dataset&quot; architecture. Inspired by API-first design, this microservice architecture is 
+              implemented using the model-view-controller design pattern to enable multimodal data views 
+              under a domain-specific-language.</p>
             <a className="btn dream-btn mt-30" href="https://colab.research.google.com/drive/1xTgBwKUfP2b8j6Fqh28M2GUp2ScfENMX?usp=sharing" style={{borderColor: '#FFDF00'}}>CELLxGENE notebook</a>
         </div>
     </div>

frontend/tdc/src/template/HomeDemo1/SecAboutUsClient/SecWhoWeContant/index.tsx

@@ -15,8 +15,14 @@ const SecWhoWeContant = () => {
             <Span /> 
             <Span /> 
             </div>
-            <h4 data-aos="fade-up">TDC Model Server</h4>
-            <p data-aos="fade-up">TDC-2 has released open source inference serving software that streamlines AI inferencing for single-cell foundation models across modalities. The TDC-2 Model Server enables access to an array of context-aware biological foundation models. A model store retrieval API provides unified access to models and weights stored in the HuggingFace Model Hub, CZ CELLxGENE fine-tuned models, and TDC storage. The model server also provides access to tokenizer functions and inference endpoints supporting PyTorch and HuggingFace Transformers.</p>
+            <h4 data-aos="fade-up">PyTDC Model Server</h4>
+            <p data-aos="fade-up">The PyTDC model server streamlines retrieval, inferencing, and training setup for an array 
+              of context-aware biological foundation models and models spanning multiple modalities. A model store retrieval 
+              API provides unified access to model weights stored in the Hugging Face Model Hub (https://huggingface.co/tdc), 
+              Chan-Zuckerberg CELLxGENE Census fine-tuned models, and TDC storage. The model server also provides access to 
+              model classes, tokenizer functions, and inference endpoints supporting PyTorch 
+              and Hugging Face Transformers. Extracted embeddings, from either model server inference or pre-computed embedding 
+              storage, are ready for downstream use by task-specific benchmarking modules.</p>
             <a data-aos="fade-up" className="btn dream-btn mt-30" href="https://huggingface.co/tdc" style={{borderColor: '#FFDF00'}}>HF Model Hub</a>
         </div>
     </div>

frontend/tdc/src/template/HomeDemo1/SecDemoVideo/SecVideoArea/index.tsx

@@ -1,19 +1,14 @@
-import Image from 'next/image';
 import React from 'react';
 
-type SecVideoAreaProps = {
-  img: string;
-};
 
-const SecVideoArea: React.FC<SecVideoAreaProps> = ({ img }) => {
+const SecVideoArea: React.FC = () => {
   return (
     <div
       className="col-lg-8 offset-lg-2 col-md-10 offset-md-1 col-sm-12"
       data-aos="fade-up"
     >
       <div className="welcome-video-area">
         <div className="welcome-thumb">
-        <Image src={img} alt="Welcome Thumbnail" layout="fill" />
         </div>
         <div className="video-icon">
           <a

frontend/tdc/src/template/HomeDemo1/SecDemoVideo/index.tsx

@@ -2,11 +2,8 @@ import React from 'react';
 import SectionHeading from '../../../components/SectionHeading';
 import SecVideoArea from './SecVideoArea';
 
-type SecDemoVideoProps = {
-  img: string;
-};
 
-const SecDemoVideo: React.FC<SecDemoVideoProps> = ({ img }) => {
+const SecDemoVideo: React.FC = () => {
   return (
     <section className="demo-video section-before section-padding-100">
       <div className="container">
@@ -25,7 +22,7 @@ const SecDemoVideo: React.FC<SecDemoVideoProps> = ({ img }) => {
         <iframe width="560" height="315" src="https://www.youtube.com/embed/ZuCOhEZtaOw?si=Kh5DiaUNdkvznYSh" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen></iframe>
         </div>
         <p></p>
-        <SecVideoArea img={img} />
+        <SecVideoArea />
       </div>
     </section>
   );

frontend/tdc/src/template/HomeDemo1/SecOurServices/Content/index.tsx

@@ -1,20 +1,19 @@
-import Image from 'next/image';
 import React from 'react';
 
 type ContentProps = {
-  img: string;
   title: string;
   content: string;
+  link: string;
 };
 
-const Content: React.FC<ContentProps> = ({ img, title, content }) => {
+const Content: React.FC<ContentProps> = ({ title, content, link }) => {
+  const handleClick = () => {
+    window.open(link);
+  };
   return (
     <div className="col-12 col-sm-6 col-lg-4" data-aos="fade-up">
       <div className="service_single_content text-left mb-100">
-        <div className="service_icon">
-        <Image src={img} alt={title} layout="fill" />
-        </div>
-        <h6>{title}</h6>
+        <h6 onClick={handleClick}>{title}</h6>
         <p>{content}</p>
       </div>
     </div>

frontend/tdc/src/template/HomeDemo1/SecOurServices/index.tsx

@@ -3,9 +3,9 @@ import SectionHeading from '../../../components/SectionHeading';
 import Content from './Content';
 
 type ServiceData = {
-  img: string;
   title: string;
   content: string;
+  link: string
 };
 
 type SecOurServicesProps = {
@@ -33,7 +33,7 @@ contexts."
         <div className="row">
           {data &&
             data.map((item, key) => (
-              <Content key={key} img={item.img} title={item.title} content={item.content} />
+              <Content key={key} title={item.title} content={item.content} link={item.link}/>
             ))}
         </div>
       </div>

frontend/tdc/src/template/HomeDemo1/SecTeam/index.tsx

@@ -19,7 +19,7 @@ const SecTeam: React.FC<SecTeamProps> = () => {
         <div className="row">
           <div className="col-12">
             <SectionHeading
-              title="TDC-2 Team"
+              title="PyTDC Team"
               text="To be disclosed"
               color1="white"
               color2="white"

frontend/tdc/src/template/HomeDemo1/SecWelcomeArea/SecWelcomeContent/index.tsx

@@ -1,32 +1,23 @@
-import Image from 'next/image';
 import React from 'react';
 import { DocElementTitle } from '../../../../data/data-containers/data-HomeDemo1';
 import IcoDocs from './SecFAQ_Timeline/IcoDocs';
 
-type SecWelcomeContentProps = {
-  img: string;
-};
 
-const SecWelcomeContent: React.FC<SecWelcomeContentProps> = ({ img }) => {
+const SecWelcomeContent: React.FC = () => {
   return (
     <div className="welcome-content">
-      <div className="promo-section">
-        <div className="integration-link">
-          <span className="integration-icon">
-            <Image src={img} width="24" height="24" alt="X" />
-          </span>
-          <span className="integration-text">Introducing TDC-2</span>
-        </div>
-      </div>
-      <h1 style={{ color: '#3A9C94', fontFamily: 'sans-serif'}}>The Commons (TDC-2)</h1>
+      <h1 style={{ color: '#3A9C94', fontFamily: 'sans-serif'}}>PyTDC: Therapeutics Commons</h1>
       <h1 style={{ color: '#FFB300', fontFamily: 'sans-serif' }}>A multimodal ML platform for biomedical foundation models</h1>
       <h3 style={{ color: '#FFDF00', fontFamily: 'sans-serif' }}>COMING SOON</h3>
       <p></p>
       <h3 style={{ color: '#FFEFC2', fontFamily: 'sans-serif' }}>
-        Learn more about our alpha release below! (TODO: change this)
+        Learn more about our alpha release of TDC-2 below! 
       </h3>
       <p>
-        TDC-2 is fantastic. Absolutely the best. (TODO: change this)
+      We present PyTDC, a first-of-its-kind machine-learning platform for biomedical foundation models across multiple modalities.
+      PyTDC is open-source software providing infrastructure to streamline biomedical AI training, benchmarking, and inferencing. It 
+      integrates multimodal biological data, single-cell analysis biomarkers, and a broad range of machine learning tasks in 
+      therapeutics. 
       </p>
       <div className='row'>
         <div className="col-md-2"></div>