Commit e443f0c3 authored by Markus Scheidgen's avatar Markus Scheidgen
Browse files

Merge branch 'ai_toolkit' into 'v1.0.8'

Add AI CoursePage to analyze section

See merge request !627
parents d944073b 8209725f
Pipeline #128678 passed with stages
in 27 minutes and 24 seconds
/*
* Copyright The NOMAD Authors.
*
* This file is part of NOMAD. See https://nomad-lab.eu for further info.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react'
import {
Button,
Grid,
Typography,
Divider,
IconButton,
makeStyles,
AccordionActions
} from '@material-ui/core'
import { Link } from 'react-router-dom'
import { StringParam, useQueryParam } from 'use-query-params'
import TutorialsIcon from '../../images/AIT_ico_bp_tutorial.svg'
import ArrowIcon from '../../images/AIT_ico_bd_link_go_to.svg'
import FigureAI from '../../images/AIT_illu_AIT.svg'
import tutorials from '../../courseAI.json'
import { aitoolkitEnabled } from '../../config'
import MuiAccordion from '@material-ui/core/Accordion'
import MuiAccordionSummary from '@material-ui/core/AccordionSummary'
import MuiAccordionDetails from '@material-ui/core/AccordionDetails'
import { styled } from '@material-ui/core/styles'
import ArrowForwardIosSharpIcon from '@material-ui/icons/ArrowForwardIosSharp'
import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
import Markdown from '../Markdown'
import AccessIcon from '../../images/AIT_ico_bd_link_external_big.svg'
import WatchIcon from '../../images/AIT_ico_bd_youtube.svg'
import PdfIcon from '../../images/AIT_ico_bd_link_pdf.svg'
import DoiIcon from '../../images/AIT_ico_bd_link_doi.svg'
export const useStyles = makeStyles(theme => ({
root: {
margin: theme.spacing(3),
width: '100%',
marginLeft: 'auto',
marginRight: 'auto',
maxWidth: '1052px',
marginBottom: '150px'
},
sectionIcon: {
marginTop: theme.spacing(3)
},
sectionTitle: {
marginBottom: theme.spacing(1),
marginLeft: theme.spacing(2),
marginTop: '105px'
},
title: {
color: '#2A3C67',
fontSize: '35px',
marginLeft: '-10px',
fontWeight: theme.typography.fontWeightMedium,
marginTop: '-70px'
},
deck: {
color: '#2A3C67',
fontSize: '22px',
marginTop: '20px',
lineHeight: '30px',
marginLeft: '-10px',
width: '518px'
},
icon: {
height: '371px',
marginTop: '-20px',
marginLeft: '100px'
},
filter: {
fontWeight: theme.typography.fontWeightMedium,
color: '#2A3C67',
fontSize: '20px',
marginTop: '60px',
marginLeft: '0px'
},
autocomplete: {
height: 'auto',
color: '#2A3C67',
border: '3px solid #00DFE0',
borderRadius: '10px 10px 10px 10px',
marginTop: '10px',
marginLeft: '0px',
width: '240px'
},
tutorialsList: {
marginTop: '50px'
},
textLevel: {
textAlign: 'left',
color: '#2A3C67',
fontSize: '22px',
height: '22px',
marginTop: '-16px'
},
titleSecondary: {
fontWeight: 'bold',
color: '#00DFE0',
fontSize: '35px',
marginLeft: '-10px'
},
bottomButton: {
color: '#F3F2F5',
backgroundColor: '#F3F2F5',
borderRadius: '30px',
width: '242px',
height: '70px',
textAlign: 'center',
align: 'center',
marginTop: '40px',
textTransform: 'none',
fontSize: '12pt',
lineHeight: '20px'
},
bottomButtonText: {
color: '#2A3C67',
fontWeight: theme.typography.fontWeightMedium
},
bottomIcon: {
marginTop: '80px',
marginLeft: '120px'
},
tutorialTitleGrid: {
marginRight: '40px'
},
tutorialTitleText: {
fontWeight: theme.typography.fontWeightMedium,
fontSize: '28px',
color: '#2A3C67',
lineHeight: '30px'
},
fieldText: {
color: '#2A3C67'
},
linkAuthors: {
color: '#2A3C67',
cursor: 'pointer',
lineHeight: '20px',
fontSize: '16px'
},
tutorialDescriptionGrid: {
marginLeft: '50px'
},
tutorialDescriptionText: {
color: '#2A3C67',
fontSize: '18px'
},
keywordsGrid: {
marginLeft: '80px'
},
linkKeywords: {
border: '1.5px solid #00DFE0',
lineHeight: '35px',
color: '#2A3C67',
cursor: 'pointer',
fontStyle: 'normal',
fontSize: '16px'
},
tutorialActions: {
marginLeft: '50px'
},
tutorialResources: {
marginTop: '-17px',
marginLeft: '-6px'
}
}))
const Accordion = styled((props) => (
<MuiAccordion {...props} />
))(({ theme }) => ({
backgroundColor: theme.palette.background.default,
borderBottom: '13px solid #7FEFEF'
}))
const AccordionSummary = styled((props) => (
<MuiAccordionSummary
expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
{...props}
/>
))(({ theme }) => ({
flexDirection: 'row-reverse',
'& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
transform: 'rotate(90deg)'
},
'& .MuiAccordionSummary-content': {
marginLeft: theme.spacing(1),
marginTop: '20px',
marginBottom: '20px'
}
}))
const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
padding: theme.spacing(2)
}))
export default function TutorialsPage() {
const styles = useStyles()
const tutorials_list = tutorials.tutorials
tutorials_list.forEach(tutorial => {
tutorial.key = tutorial.title.replace(/\W/gm, '_').toLowerCase()
})
function AccordionsList() {
const [expanded, setExpanded] = useQueryParam('expanded', StringParam)
return (
tutorials_list.map(tutorial => (
<div key={tutorial.title} >
<Accordion
key={tutorial.key}
expanded={expanded === tutorial.key}
onChange={() => setExpanded(expanded === tutorial.key ? null : tutorial.key)}
elevation={0}
>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Grid container spacing={1} >
<Grid item xs={7} className={styles.tutorialTitleGrid} >
<Typography className={styles.tutorialTitleText}>
{tutorial.title}
</Typography>
</Grid>
<Grid item xs={4}>
<Typography className={styles.fieldText}>
{<b>Lecturer: </b> }
{tutorial.lecturer
}
</Typography>
</Grid>
</Grid>
</AccordionSummary>
<AccordionDetails >
<Grid container spacing={4}>
<Grid item xs={6} className={styles.tutorialDescriptionGrid}>
<Markdown className={styles.tutorialDescriptionText}>
{tutorial.description}
</Markdown>
</Grid>
<Grid item xs={4} className={styles.keywordsGrid}>
{tutorial.notebook_name_1 && <><Typography className={styles.fieldText}>
<b>Notebook authors:</b>
</Typography><Typography>
{tutorial.authors_notebook_1
.map(name => {
const label = name.split(',').reverse().join(' ')
return label
}).reduce((prev, curr) => [prev, ' | ', curr])}
</Typography>
<Button
href={tutorial.link_notebook_1}
target="tutorial"
startIcon={<img alt='Access icon' src={AccessIcon}></img>}
>
<Typography className={styles.fieldText} >
<b>Access notebook</b>
</Typography>
</Button>
</>}
{tutorial.notebook_name_2 && <><Typography className={styles.fieldText}>
<b>Notebook authors:</b>
</Typography><Typography>
{tutorial.authors_notebook_2
.map(name => {
const label = name.split(',').reverse().join(' ')
return label
}).reduce((prev, curr) => [prev, ' | ', curr])}
</Typography>
<Button
href={tutorial.link_notebook_2}
target="tutorial"
startIcon={<img alt='Access icon' src={AccessIcon}></img>}
>
<Typography className={styles.fieldText} >
<b>Access notebook</b>
</Typography>
</Button>
</>}
</Grid>
</Grid>
</AccordionDetails>
<AccordionActions>
<Grid container spacing={4}>
<Grid item xs={7} className={styles.tutorialActions}>
<Grid container spacing={0}>
<Grid item xs={5}>
<Button
href={tutorial.link_video_1}
target="tutorial"
startIcon={<img alt='Watch icon' src={WatchIcon}></img>}
>
<Typography className={styles.fieldText} >
<b>Watch video 1</b>
</Typography>
</Button>
</Grid>
<Grid item xs={5} >
<div>
{ tutorial.link_video_2 && <Button
width='10px'
color='#2A3C67'
href={tutorial.link_video_2}
target="tutorial"
startIcon={<img alt='Watch icon' src={WatchIcon}></img>}
>
<Typography className={styles.fieldText} >
<b>Watch video 2</b>
</Typography>
</Button>}
</div>
</Grid>
</Grid>
</Grid>
{tutorial.link_paper &&
<Grid item xs={4} className={styles.tutorialResources}>
<Grid item xs={12}>
<Typography className={styles.fieldText}>
<b>Additional Resources</b>:
</Typography>
</Grid>
<Grid container spacing={0}>
<Grid item xs={2} >
<div>
{tutorial.link_paper && <Button
color='#2A3C67'
href={tutorial.link_paper}
target="tutorial"
startIcon={<img alt='DOI icon' src={DoiIcon}></img>}>
</Button>}
</div>
</Grid>
<Grid item xs={2}>
<div>
{tutorial.link_paper && <Button
color='#2A3C67'
href={tutorial.link_paper}
target="tutorial"
startIcon={<img alt='PDF icon' src={PdfIcon}/>}>
</Button>}
</div>
</Grid>
</Grid>
</Grid>
}
</Grid>
</AccordionActions>
<Divider />
</Accordion>
</div>
)))
}
return <Grid container spacing={1} className={styles.root}>
<Grid container spacing={0} className={styles.Heading}>
<Grid item xs={6} className={styles.sectionTitle}>
<Grid container spacing={0}>
<Grid item xs={4} style={{marginTop: '-100px', marginLeft: '-20px'}}>
<IconButton
{...(aitoolkitEnabled ? ({to: 'aitoolkit', component: Link}) : ({href: 'https://nomad-lab.eu/AIToolkit', component: 'a'}))}
>
<img alt='AI toolkit logo' src={FigureAI} style={{width: '120px'}}/>
</IconButton>
</Grid>
<Grid item xs={8}>
<Typography className={styles.title}>
AI lectures
</Typography>
</Grid>
</Grid>
<Typography className={styles.deck}>
We present a virtual course in artificial intelligence, by proposing a path through some of the tutorial notebooks from the AI-toolkit. Each topic is presented via a video lecture and accompanied by one or more notebooks that allow for putting your hand on the explained methods. </Typography>
</Grid>
<Grid item xs={4} className={styles.sectionIcon}>
<img alt='Tutorials icon' src={TutorialsIcon} className={styles.icon}/>
</Grid>
</Grid>
<Grid container spacing={1} className={styles.tutorialsList}>
<Grid item xs={12}>
<Divider
style={{
backgroundColor: '#7FEFEF',
height: '13px',
borderRadius: '4px',
marginBottom: '-8px'
}}
/>
</Grid>
<Grid item xs={12}>
<AccordionsList/>
</Grid>
</Grid>
<Grid item xs={6} className={styles.sectionTitle}>
<Typography className={styles.titleSecondary}>
Next intermediate level
</Typography>
<Typography className={styles.deck}>
If you are still curious about applications of artificial intelligence to materials science, you can find
more lectures and more notebooks in our tutorials section.
</Typography>
<Grid container spacing={1}>
<Grid item xs={4}>
<IconButton
component={Link}
{...(aitoolkitEnabled ? ({to: 'aitoolkit', component: Link}) : ({href: 'https://nomad-lab.eu/AIToolkit', component: 'a'}))}
style={{marginRight: '0px', marginTop: '20px'}}
>
<img alt='AI toolkit logo' src={FigureAI} style={{width: '120px'}}/>
</IconButton>
</Grid>
<Grid item xs={8}>
<Button
width='10px'
color='#2A3C67'
component={Link}
to="tutorials"
className={styles.bottomButton}
endIcon={<img alt='Arrow icon' src={ArrowIcon}/>}
>
<Typography className={styles.bottomButtonText}>
More AI tutorials
</Typography>
</Button>
</Grid>
</Grid>
</Grid>
<Grid item xs={4} className={styles.sectionIcon}>
<IconButton
component={Link}
to="tutorials"
className={styles.bottomIcon}
>
<img alt='Tutorials icon' src={TutorialsIcon} style={{width: '300px'}}/>
</IconButton>
</Grid>
</Grid>
}
...@@ -26,6 +26,7 @@ import About from '../About' ...@@ -26,6 +26,7 @@ import About from '../About'
import AIToolkitPage from '../aitoolkit/AIToolkitPage' import AIToolkitPage from '../aitoolkit/AIToolkitPage'
import TutorialsPage from '../aitoolkit/TutorialsPage' import TutorialsPage from '../aitoolkit/TutorialsPage'
import ReproducePage from '../aitoolkit/ReproducePage' import ReproducePage from '../aitoolkit/ReproducePage'
import CoursePage from '../aitoolkit/CoursePage'
import { MetainfoPage, help as metainfoHelp } from '../archive/MetainfoBrowser' import { MetainfoPage, help as metainfoHelp } from '../archive/MetainfoBrowser'
import EntryPage, { help as entryHelp } from '../entry/EntryPage' import EntryPage, { help as entryHelp } from '../entry/EntryPage'
import UploadPage from '../uploads/UploadPage' import UploadPage from '../uploads/UploadPage'
...@@ -296,6 +297,11 @@ export const routes = [ ...@@ -296,6 +297,11 @@ export const routes = [
path: 'reproduce', path: 'reproduce',
title: 'Artificial Intelligence Toolkit', title: 'Artificial Intelligence Toolkit',
component: ReproducePage component: ReproducePage
},
{
path: 'course',
title: 'Artificial Intelligence Toolkit',
component: CoursePage
} }
] ]
}, },
......
{
"tutorials": [
{
"lecturer": "Luca Ghiringhelli",
"title": "Introduction to artificial intelligence and machine-learning methods",
"description": "This introductory lecture covers a general overview of artificial intelligence methods, including machine-learning and data-mining methods. There is no hands-on notebook specifically associated to this lectures, but the concepts introduced therein can be useful to link together the various techniques presented in the next lectures.",
"link_video_1": "https://www.youtube.com/watch?v=z_Q0yXGHPDE",
"link_video_2": "https://www.youtube.com/watch?v=7m0vfdK716I",
"notebook_1": "true",
"authors_notebook_1": [
"Ahmetcik, Emre",
"Ziletti, Angelo",
"Ouyang, Runhai",
"Sbail\u00f2, Luigi",
"Scheffler, Matthias",
"Ghiringhelli, Luca M."]
},
{
"lecturer": "Santiago Rigamonti",
"title": "Regularized regression and kernel methods",
"description": "In this tutorial, we will explore the application of kernel ridge regression to the prediction of materials properties.",
"link_video_1": "https://www.youtube.com/watch?v=QHfcpuYfDtI",
"link_video_2": "https://www.youtube.com/watch?v=A6c_QJmMAqE",
"notebook_name_1": "krr4mat.ipynb",
"link_notebook_1": "https://analytics-toolkit.nomad-coe.eu/public/user-redirect/notebooks/tutorials/krr4mat.ipynb",
"authors_notebook_1": [
"Langer, Marcel"
]
},
{
"lecturer": "Daniel Speckhard",
"title": "Decision trees and random forests",
"description": "In this tutorial, we will introduce decision trees. We go through a toy model introducing the SKLearn API. We then discuss step by step the different theoretical aspects of trees. We then move to training a regression tree and classification tree on different datasets related to materials science. We end the tutorial by covering random forests and bagging classfiers.",
"link_video_1": "https://www.youtube.com/watch?v=lUdCB6cqpvo",
"link_video_2": "https://www.youtube.com/watch?v=rwxE35URuF8",
"authors_notebook_1": [
"Speckhard, Daniel",
"Leitherer, Andreas",
"Ghiringhelli, Luca M."
],
"notebook_name_1": "decision_tree.ipynb",
"link_notebook_1": "https://analytics-toolkit.nomad-coe.eu/public/user-redirect/notebooks/tutorials/decision_tree.ipynb"
},
{
"lecturer": "Angelo Ziletti",
"title": "Artificial neural networks and deep learning",
"link_video_1": "https://www.youtube.com/watch?v=-_-2ESB4Ag0",
"link_video_2": "https://www.youtube.com/watch?v=qRqIU3kYF80",
"description": "In these tutorials, we introduce the basic of deep learning, via tranditional multilayer perceptrons and modern convolutional neural networks.",
"notebook_name_1": "nn_regression.ipynb",
"link_notebook_1": "https://nomad-lab.eu/prod/analytics/public/user-redirect/notebooks/tutorials/nn_regression.ipynb",
"authors_notebook_1": [
"Leitherer, Andreas",
"Sbail\u00f2, Luigi",
"Ghiringhelli, Luca M."
],
"notebook_name_2": "convolutional_nn.ipynb",
"link_notebook_2": "https://analytics-toolkit.nomad-coe.eu/public/user-redirect/notebooks/tutorials/convolutional_nn.ipynb",
"authors_notebook_2": [
"Ziletti, Angelo",
"Leitherer, Andreas",
"Ghiringhelli, Luca M."
]
},
{
"lecturer": "Luigi Sbail\u00f2",
"title": "Unsupervised learning",
"link_video_1": "https://www.youtube.com/watch?v=Ozu-QCBB2bg",
"link_video_2": "https://www.youtube.com/watch?v=hnB5B7Iu6Ds",
"description": "In this tutorial, we introduce to the most popular clustering algorithms. We focus on partitioning, hierarchical and density-based clustering algorithms. The methods are tested on synthetic datasets of increasing complexity.",
"notebook_name_1": "clustering_tutorial.ipynb",
"link_notebook_1": "https://analytics-toolkit.nomad-coe.eu/public/user-redirect/notebooks/tutorials/clustering_tutorial.ipynb",
"authors_notebook_1": [
"Sbail\u00f2, Luigi",
"Ghiringhelli, Luca M."
],
"notebook_name_2": "exploratory_analysis.ipynb",
"link_notebook_2": "https://analytics-toolkit.nomad-coe.eu/public/user-redirect/notebooks/tutorials/exploratory_analysis.ipynb",
"authors_notebook_2": [
"Sbail\u00f2, Luigi",
"Ghiringhelli, Luca M."
]
},
{
"lecturer": "Luca Ghiringhelli",
"title": "Compressed sensing meets symbolic regression: SISSO",
"description": "In this tutorial, we will show how to find descriptive parameters to predict materials properties using symbolic regrression combined with compressed sensing tools. The relative stability of the zincblende (ZB) versus rocksalt (RS) structure of binary materials is predicted and compared against a model trained with kernel ridge regression.",
"link_video_1": "https://www.youtube.com/watch?v=YJZm4xot4bM",
"link_video_2": "https://www.youtube.com/watch?v=KjPCMdWikBg",
"notebook_name_1": "compressed_sensing.ipynb",
"authors_notebook_1": [
"Ahmetcik, Emre",
"Ziletti, Angelo",
"Ouyang, Runhai",
"Sbail\u00f2, Luigi",
"Scheffler, Matthias",
"Ghiringhelli, Luca M."
],
"link_notebook_1": "https://analytics-toolkit.nomad-coe.eu/public/user-redirect/notebooks/tutorials/compressed_sensing.ipynb"
},
{
"lecturer": "Matthias Scheffler",
"title": "Subgroup discovery, rare-phenomena challenge, and domain of applicability",
"link_video_1": "https://www.youtube.com/watch?v=cizNEJypwao",
"link_video_2": "https://www.youtube.com/watch?v=uKEzs6koTcs",
"description": "In these tutorials, we introduce the subgroup discovery (SGD) method, which identifies rules (Boolean statements involving selected features among the given candidates) describing exceptional subsets of data. SGD is an exploratory analysis tools and allows for identifying local structure in the data, while most ML tools focus on global models. A notable application of SGD is to locate the domain of applicability of ML models, i.e., identifying the property of data that are expected to yield significantly lower errors than the overall dataset. A notebook on this specific application is also linked.",
"authors_notebook_1":[
"Foppa, Lucas",
"Ghiringhelli, Luca M."
],