|
|
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
|
|
|
<head lang="en">
|
|
|
|
|
|
|
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-29YV7SY3QT"></script>
|
|
|
<script>
|
|
|
window.dataLayer = window.dataLayer || [];
|
|
|
function gtag(){dataLayer.push(arguments);}
|
|
|
gtag('js', new Date());
|
|
|
|
|
|
gtag('config', 'G-29YV7SY3QT');
|
|
|
</script>
|
|
|
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
|
|
|
<script type="text/javascript" id="MathJax-script" async
|
|
|
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
|
|
|
</script>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
|
|
|
|
<title>LAVIB</title>
|
|
|
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="https://alexandrosstergiou.github.io/favicon.ico/apple-touch-icon.png">
|
|
|
<link rel="icon" type="../../image/png" sizes="32x32" href="../favicon.ico/favicon-32x32.png">
|
|
|
<link rel="icon" type="../../image/png" sizes="16x16" href="../favicon.ico/favicon-16x16.png">
|
|
|
|
|
|
<meta name="description" content="">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
|
|
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.8.0/codemirror.min.css">
|
|
|
<link rel="stylesheet" href="../css/design.css">
|
|
|
<link rel="stylesheet" href="../academicons/css/academicons.min.css"/>
|
|
|
|
|
|
|
|
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.8.0/codemirror.min.js"></script>
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.3/clipboard.min.js"></script>
|
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
|
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
|
|
|
<link rel="stylesheet" href="https://alexandrosstergiou.github.io/datasets/LAVIB/academicons/css/academicons.min.css"/>
|
|
|
|
|
|
<style>
|
|
|
|
|
|
.button_c {
|
|
|
border: none;
|
|
|
color: black;
|
|
|
padding: .5em 1em;
|
|
|
text-align: center;
|
|
|
text-decoration: none;
|
|
|
display: inline-block;
|
|
|
margin: 0.1em 0.1em;
|
|
|
-webkit-transition-duration: 0.8s;
|
|
|
-moz-transition-duration: 0.8;
|
|
|
transition-duration: 0.8s;
|
|
|
border-radius: 0.4em;
|
|
|
cursor: pointer;
|
|
|
-webkit-touch-callout:none;
|
|
|
-webkit-user-select:none;
|
|
|
-moz-user-select:none;
|
|
|
-ms-user-select:none;
|
|
|
user-select:none;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.button_c:hover {
|
|
|
background-color: #00000015;
|
|
|
color: #1e4258;
|
|
|
box-shadow: 0 .4em .4em 0 rgba(0,0,0,0.24),0 .4em .4em 0 rgba(0,0,0,0.19);
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
.container-video {
|
|
|
position: relative;
|
|
|
width: 80%;
|
|
|
max-width: 1000px;
|
|
|
margin: 20px 0;
|
|
|
overflow: hidden;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
|
|
|
.video-wrapper {
|
|
|
position: relative;
|
|
|
width: 30%;
|
|
|
height: auto;
|
|
|
display: inline-block;
|
|
|
|
|
|
}
|
|
|
|
|
|
video {
|
|
|
width: 100%;
|
|
|
height: auto;
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.video-wrapper video:first-child {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
}
|
|
|
|
|
|
.video-wrapper video:last-child {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
clip-path: inset(0 50% 0 0);
|
|
|
}
|
|
|
|
|
|
.slider {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 90%;
|
|
|
width: 4px;
|
|
|
height: 100%;
|
|
|
background-color: #fff;
|
|
|
cursor: pointer;
|
|
|
z-index: 1;
|
|
|
-webkit-transform: translateX(-50%);
|
|
|
-ms-transform: translateX(-50%);
|
|
|
transform: translateX(-50%);
|
|
|
line-height: normal;
|
|
|
opacity: .7
|
|
|
}
|
|
|
|
|
|
.slider:hover {
|
|
|
opacity: 1
|
|
|
}
|
|
|
|
|
|
.slider:hover :before {
|
|
|
color: #fff;
|
|
|
border-color: #fff
|
|
|
}
|
|
|
|
|
|
.slider:before {
|
|
|
content: '';
|
|
|
-webkit-mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+LnN0MHtmaWxsOiNGRkZGRkY7ZW5hYmxlLWJhY2tncm91bmQ6bmV3ICAgIDt9PC9zdHlsZT48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTgwLjIsMTA4LjFsNjEuNy02Mi4yYzMuOC0zLjgsOC44LTUuOSwxNC4xLTUuOWM1LjMsMCwxMC40LDIuMSwxNC4xLDUuOWw2MS43LDYyLjJjMy45LDMuOSw5LjEsNS45LDE0LjIsNS45czEwLjItMS45LDE0LjEtNS44YzcuOC03LjgsNy45LTIwLjQsMC4xLTI4LjNsLTYxLjctNjIuMkMyODcuMiw2LjMsMjcyLjEsMCwyNTYsMHMtMzEuMiw2LjMtNDIuNSwxNy44TDE1MS44LDgwYy03LjgsNy44LTcuNywyMC41LDAuMSwyOC4zQzE1OS44LDExNiwxNzIuNCwxMTUuOSwxODAuMiwxMDguMXoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzMxLjgsNDAzLjlsLTYxLjcsNjIuMmMtMy44LDMuOC04LjgsNS45LTE0LjEsNS45Yy01LjMsMC0xMC40LTIuMS0xNC4xLTUuOWwtNjEuNy02Mi4yYy03LjgtNy44LTIwLjQtNy45LTI4LjMtMC4xYy03LjgsNy44LTcuOSwyMC40LTAuMSwyOC4zbDYxLjcsNjIuMmMxMS40LDExLjQsMjYuNSwxNy44LDQyLjUsMTcuOHMzMS4yLTYuMyw0Mi41LTE3LjhsNjEuNy02Mi4yYzcuOC03LjgsNy43LTIwLjUtMC4xLTI4LjNDMzUyLjIsMzk2LDMzOS42LDM5Ni4xLDMzMS44LDQwMy45eiIvPjwvc3ZnPg==) no-repeat 100% 100%;
|
|
|
mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+LnN0MHtmaWxsOiNGRkZGRkY7ZW5hYmxlLWJhY2tncm91bmQ6bmV3ICAgIDt9PC9zdHlsZT48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTgwLjIsMTA4LjFsNjEuNy02Mi4yYzMuOC0zLjgsOC44LTUuOSwxNC4xLTUuOWM1LjMsMCwxMC40LDIuMSwxNC4xLDUuOWw2MS43LDYyLjJjMy45LDMuOSw5LjEsNS45LDE0LjIsNS45czEwLjItMS45LDE0LjEtNS44YzcuOC03LjgsNy45LTIwLjQsMC4xLTI4LjNsLTYxLjctNjIuMkMyODcuMiw2LjMsMjcyLjEsMCwyNTYsMHMtMzEuMiw2LjMtNDIuNSwxNy44TDE1MS44LDgwYy03LjgsNy44LTcuNywyMC41LDAuMSwyOC4zQzE1OS44LDExNiwxNzIuNCwxMTUuOSwxODAuMiwxMDguMXoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzMxLjgsNDAzLjlsLTYxLjcsNjIuMmMtMy44LDMuOC04LjgsNS45LTE0LjEsNS45Yy01LjMsMC0xMC40LTIuMS0xNC4xLTUuOWwtNjEuNy02Mi4yYy03LjgtNy44LTIwLjQtNy45LTI4LjMtMC4xYy03LjgsNy44LTcuOSwyMC40LTAuMSwyOC4zbDYxLjcsNjIuMmMxMS40LDExLjQsMjYuNSwxNy44LDQyLjUsMTcuOHMzMS4yLTYuMyw0Mi41LTE3LjhsNjEuNy02Mi4yYzcuOC03LjgsNy43LTIwLjUtMC4xLTI4LjNDMzUyLjIsMzk2LDMzOS42LDM5Ni4xLDMzMS44LDQwMy45eiIvPjwvc3ZnPg==) no-repeat 100% 100%;
|
|
|
mask-size: cover;
|
|
|
-webkit-mask-size: cover;
|
|
|
width: 26px;
|
|
|
color:#fff;
|
|
|
height: 26px;
|
|
|
padding: 0;
|
|
|
background-color: currentColor;
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
-webkit-transform: translate(-50%, -50%) rotate(90deg);
|
|
|
-ms-transform: translate(-50%, -50%) rotate(90deg);
|
|
|
transform: translate(-50%, -50%) rotate(90deg);
|
|
|
z-index: 2;
|
|
|
font-size: 0
|
|
|
}
|
|
|
|
|
|
.slider:after {
|
|
|
top: 50%;
|
|
|
left: 0;
|
|
|
-webkit-transform: translateY(-50%);
|
|
|
-ms-transform: translateY(-50%);
|
|
|
transform: translateY(-50%);
|
|
|
width: 100%;
|
|
|
height: 3px
|
|
|
}
|
|
|
|
|
|
.b-dics__slider {
|
|
|
color: #fff;
|
|
|
position: absolute;
|
|
|
left: 90%;
|
|
|
top: 0;
|
|
|
cursor: pointer;
|
|
|
-webkit-transform: translateX(-50%);
|
|
|
-ms-transform: translateX(-50%);
|
|
|
transform: translateX(-50%);
|
|
|
height: 100%;
|
|
|
width: 3px;
|
|
|
padding: 0 30px;
|
|
|
z-index: 1;
|
|
|
-ms-touch-action: none;
|
|
|
touch-action: none;
|
|
|
line-height: normal;
|
|
|
opacity: .7
|
|
|
}
|
|
|
|
|
|
|
|
|
.b-dics__slider:before {
|
|
|
content: '';
|
|
|
-webkit-mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+LnN0MHtmaWxsOiNGRkZGRkY7ZW5hYmxlLWJhY2tncm91bmQ6bmV3ICAgIDt9PC9zdHlsZT48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTgwLjIsMTA4LjFsNjEuNy02Mi4yYzMuOC0zLjgsOC44LTUuOSwxNC4xLTUuOWM1LjMsMCwxMC40LDIuMSwxNC4xLDUuOWw2MS43LDYyLjJjMy45LDMuOSw5LjEsNS45LDE0LjIsNS45czEwLjItMS45LDE0LjEtNS44YzcuOC03LjgsNy45LTIwLjQsMC4xLTI4LjNsLTYxLjctNjIuMkMyODcuMiw2LjMsMjcyLjEsMCwyNTYsMHMtMzEuMiw2LjMtNDIuNSwxNy44TDE1MS44LDgwYy03LjgsNy44LTcuNywyMC41LDAuMSwyOC4zQzE1OS44LDExNiwxNzIuNCwxMTUuOSwxODAuMiwxMDguMXoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzMxLjgsNDAzLjlsLTYxLjcsNjIuMmMtMy44LDMuOC04LjgsNS45LTE0LjEsNS45Yy01LjMsMC0xMC40LTIuMS0xNC4xLTUuOWwtNjEuNy02Mi4yYy03LjgtNy44LTIwLjQtNy45LTI4LjMtMC4xYy03LjgsNy44LTcuOSwyMC40LTAuMSwyOC4zbDYxLjcsNjIuMmMxMS40LDExLjQsMjYuNSwxNy44LDQyLjUsMTcuOHMzMS4yLTYuMyw0Mi41LTE3LjhsNjEuNy02Mi4yYzcuOC03LjgsNy43LTIwLjUtMC4xLTI4LjNDMzUyLjIsMzk2LDMzOS42LDM5Ni4xLDMzMS44LDQwMy45eiIvPjwvc3ZnPg==) no-repeat 100% 100%;
|
|
|
mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+LnN0MHtmaWxsOiNGRkZGRkY7ZW5hYmxlLWJhY2tncm91bmQ6bmV3ICAgIDt9PC9zdHlsZT48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTgwLjIsMTA4LjFsNjEuNy02Mi4yYzMuOC0zLjgsOC44LTUuOSwxNC4xLTUuOWM1LjMsMCwxMC40LDIuMSwxNC4xLDUuOWw2MS43LDYyLjJjMy45LDMuOSw5LjEsNS45LDE0LjIsNS45czEwLjItMS45LDE0LjEtNS44YzcuOC03LjgsNy45LTIwLjQsMC4xLTI4LjNsLTYxLjctNjIuMkMyODcuMiw2LjMsMjcyLjEsMCwyNTYsMHMtMzEuMiw2LjMtNDIuNSwxNy44TDE1MS44LDgwYy03LjgsNy44LTcuNywyMC41LDAuMSwyOC4zQzE1OS44LDExNiwxNzIuNCwxMTUuOSwxODAuMiwxMDguMXoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzMxLjgsNDAzLjlsLTYxLjcsNjIuMmMtMy44LDMuOC04LjgsNS45LTE0LjEsNS45Yy01LjMsMC0xMC40LTIuMS0xNC4xLTUuOWwtNjEuNy02Mi4yYy03LjgtNy44LTIwLjQtNy45LTI4LjMtMC4xYy03LjgsNy44LTcuOSwyMC40LTAuMSwyOC4zbDYxLjcsNjIuMmMxMS40LDExLjQsMjYuNSwxNy44LDQyLjUsMTcuOHMzMS4yLTYuMyw0Mi41LTE3LjhsNjEuNy02Mi4yYzcuOC03LjgsNy43LTIwLjUtMC4xLTI4LjNDMzUyLjIsMzk2LDMzOS42LDM5Ni4xLDMzMS44LDQwMy45eiIvPjwvc3ZnPg==) no-repeat 100% 100%;
|
|
|
mask-size: cover;
|
|
|
-webkit-mask-size: cover;
|
|
|
width: 26px;
|
|
|
height: 26px;
|
|
|
padding: 0;
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
-webkit-transform: translate(-50%, -50%) rotate(90deg);
|
|
|
-ms-transform: translate(-50%, -50%) rotate(90deg);
|
|
|
transform: translate(-50%, -50%) rotate(90deg);
|
|
|
z-index: 2;
|
|
|
font-size: 0
|
|
|
}
|
|
|
|
|
|
.b-dics__slider:after {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
top: 0;
|
|
|
-webkit-transform: translateX(-50%);
|
|
|
-ms-transform: translateX(-50%);
|
|
|
transform: translateX(-50%);
|
|
|
height: 100%;
|
|
|
width: 3px;
|
|
|
background-color: currentColor;
|
|
|
z-index: 1
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#slider {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 50%;
|
|
|
width: 4px;
|
|
|
height: 100%;
|
|
|
background-color: #418fc0;
|
|
|
cursor: ew-resize;
|
|
|
z-index: 10;
|
|
|
}
|
|
|
.button {
|
|
|
background-color: black;
|
|
|
border: none;
|
|
|
color: white;
|
|
|
padding: 1em 2em;
|
|
|
text-align: center;
|
|
|
text-decoration: none;
|
|
|
display: inline-block;
|
|
|
font-size: 0.8em;
|
|
|
margin: 0.3em 0.3em;
|
|
|
-webkit-transition-duration: 0.8s;
|
|
|
-moz-transition-duration: 0.8;
|
|
|
transition-duration: 0.8s;
|
|
|
cursor: pointer;
|
|
|
border-radius: 0.7em;
|
|
|
-webkit-touch-callout:none;
|
|
|
-webkit-user-select:none;
|
|
|
-moz-user-select:none;
|
|
|
-ms-user-select:none;
|
|
|
user-select:none
|
|
|
|
|
|
}
|
|
|
|
|
|
.button:hover {
|
|
|
background-color: #1E4258;
|
|
|
color: white;
|
|
|
box-shadow: 0 2em 2em 0 rgba(0,0,0,0.24),0 1em 1em 0 rgba(0,0,0,0.19);
|
|
|
}
|
|
|
|
|
|
.circle{
|
|
|
border-radius:50%;
|
|
|
}
|
|
|
|
|
|
.xxlarge{
|
|
|
font-size:240%;
|
|
|
}
|
|
|
|
|
|
.xlarge{
|
|
|
font-size:150%;
|
|
|
}
|
|
|
|
|
|
.hover-grey:hover{
|
|
|
color:#1E4258;
|
|
|
}
|
|
|
|
|
|
.white{
|
|
|
color:#fff;
|
|
|
}
|
|
|
|
|
|
.light-grey{
|
|
|
color: #f1f1f1;
|
|
|
}
|
|
|
|
|
|
.boxed {
|
|
|
border-style: solid none solid none ;
|
|
|
border-width: 0.5%;
|
|
|
border-color: white;
|
|
|
}
|
|
|
|
|
|
.boxed_grey {
|
|
|
border-style: solid none none none;
|
|
|
border-width: 0.05em;
|
|
|
border-color: #5b6362
|
|
|
}
|
|
|
|
|
|
.middle{
|
|
|
text-align:center;
|
|
|
}
|
|
|
.lavib{
|
|
|
|
|
|
font-variant: small-caps;
|
|
|
font-family: 'Latin Modern Roman', serif;
|
|
|
|
|
|
}
|
|
|
.div1{
|
|
|
background-color:#E2E0E4;
|
|
|
border-radius: 15px;
|
|
|
}
|
|
|
|
|
|
.div2{
|
|
|
display: block;
|
|
|
padding: 9.5px;
|
|
|
margin: 0 0 10px;
|
|
|
font-size: 14px;
|
|
|
line-height: 1.42857143;
|
|
|
word-break: break-all;
|
|
|
word-wrap: break-word;
|
|
|
color: #333;
|
|
|
background-color: #f5f5f5;
|
|
|
border: 1px solid #ccc;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
|
|
|
.divtext1{
|
|
|
font-size: 40px;
|
|
|
}
|
|
|
|
|
|
.font1{
|
|
|
font-family: 'Tenor Sans', sans-serif;
|
|
|
}
|
|
|
|
|
|
.font2{
|
|
|
font-family: 'Roboto', sans-serif;
|
|
|
}
|
|
|
|
|
|
.btndes{
|
|
|
border-radius: 20px;
|
|
|
background-color: #363636;
|
|
|
color: white;
|
|
|
text-decoration: none !important;
|
|
|
}
|
|
|
|
|
|
.btndes:hover {
|
|
|
background-color:black;
|
|
|
color: white;
|
|
|
}
|
|
|
|
|
|
.navsize1{
|
|
|
font-size: 25px;
|
|
|
}
|
|
|
.navsize{
|
|
|
font-size: 18px;;
|
|
|
}
|
|
|
.absfont{
|
|
|
font-size: 17px;;
|
|
|
}
|
|
|
|
|
|
.navcolor{
|
|
|
background-color: #363636;
|
|
|
}
|
|
|
|
|
|
.navfontc{
|
|
|
color: white;
|
|
|
}
|
|
|
|
|
|
.margin-left{
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
|
|
|
.size2{
|
|
|
font-size: 23px;
|
|
|
}
|
|
|
|
|
|
.datalink{
|
|
|
background-color:#E2E0E4;
|
|
|
border-radius: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.margin{
|
|
|
margin-left: 10px;
|
|
|
font-size: 15px;
|
|
|
}
|
|
|
|
|
|
.card {
|
|
|
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
|
|
}
|
|
|
|
|
|
.card {
|
|
|
margin-top: 10px;
|
|
|
box-sizing: border-box;
|
|
|
border-radius: 2px;
|
|
|
background-clip: padding-box;
|
|
|
min-height:200px;
|
|
|
}
|
|
|
|
|
|
.card span.card-title {
|
|
|
color: #fff;
|
|
|
font-size: 24px;
|
|
|
font-weight: 300;
|
|
|
text-transform: uppercase;
|
|
|
}
|
|
|
|
|
|
.card .card-image {
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.card .card-image img {
|
|
|
border-radius: 2px 2px 0 0;
|
|
|
background-clip: padding-box;
|
|
|
position: relative;
|
|
|
z-index: -1;
|
|
|
}
|
|
|
|
|
|
.card .card-image span.card-title {
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
padding: 16px;
|
|
|
}
|
|
|
|
|
|
.card .card-content {
|
|
|
padding: 10px;
|
|
|
border-radius: 0 0 2px 2px;
|
|
|
background-clip: padding-box;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.card .card-content p {
|
|
|
margin: 0;
|
|
|
color: inherit;
|
|
|
}
|
|
|
|
|
|
.card .card-content span.card-title {
|
|
|
line-height: 48px;
|
|
|
}
|
|
|
|
|
|
.card .card-action {
|
|
|
border-top: 1px solid rgba(160, 160, 160, 0.2);
|
|
|
padding: 16px;
|
|
|
}
|
|
|
|
|
|
.card .card-action a {
|
|
|
color: #ffab40;
|
|
|
margin-right: 16px;
|
|
|
transition: color 0.3s ease;
|
|
|
text-transform: uppercase;
|
|
|
}
|
|
|
|
|
|
.card .card-action a:hover {
|
|
|
color: #ffd8a6;
|
|
|
text-decoration: none;
|
|
|
}
|
|
|
|
|
|
.navbar {
|
|
|
overflow: hidden;
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
z-index: 1;
|
|
|
}
|
|
|
|
|
|
.navbar a {
|
|
|
float: left;
|
|
|
display: block;
|
|
|
color: inherit;
|
|
|
opacity: 1;
|
|
|
margin:0em 0em;
|
|
|
text-align: center;
|
|
|
padding: .4em .4em;
|
|
|
text-decoration: none;
|
|
|
font-size: .9em;
|
|
|
}
|
|
|
|
|
|
.navbar a:hover {
|
|
|
background: #000;
|
|
|
}
|
|
|
|
|
|
#nav-icon {
|
|
|
color: white;
|
|
|
}
|
|
|
|
|
|
#dropdown-menu {
|
|
|
position: fixed;
|
|
|
color: #fff;
|
|
|
width: 10em;
|
|
|
}
|
|
|
|
|
|
#dropdown-menu > ul {
|
|
|
list-style-type: none;
|
|
|
margin: 0;
|
|
|
overflow: auto;
|
|
|
padding: 0;
|
|
|
display:block;
|
|
|
width: inherit;
|
|
|
text-align: start;
|
|
|
color: #fff;
|
|
|
-webkit-transition:all .5s;
|
|
|
-moz-transition:all .5s;
|
|
|
transition:all .5s;
|
|
|
padding: 1.5em;
|
|
|
margin: -2em -.5em;
|
|
|
}
|
|
|
|
|
|
#dropdown-menu >ul li a{
|
|
|
display:inline-block;
|
|
|
padding:0px;
|
|
|
background:black;
|
|
|
width: 9em;
|
|
|
padding:0.2em;
|
|
|
}
|
|
|
|
|
|
#dropdown-menu >ul li a:hover{
|
|
|
box-shadow: 0em 0.2em 0.2em 0em rgba(0, 0, 0, 0.55);
|
|
|
}
|
|
|
|
|
|
#dropdown-menu > ul li:first-child a{
|
|
|
border-radius: 0.8em 0.8em 0 0;
|
|
|
}
|
|
|
|
|
|
#dropdown-menu > ul li:last-child a{
|
|
|
border-radius: 0 0 0.8em 0.8em;
|
|
|
}
|
|
|
|
|
|
#social-platforms,
|
|
|
#page-anchors {
|
|
|
position:relative;
|
|
|
font-size:1.1rem;
|
|
|
text-align:center;
|
|
|
height:auto;
|
|
|
overflow:hidden;
|
|
|
}
|
|
|
|
|
|
|
|
|
#social-platforms a{
|
|
|
background: rgba(230, 230, 230, 0.1);
|
|
|
text-align:center;
|
|
|
position:relative;
|
|
|
display:inline-block;
|
|
|
width:1.7em;
|
|
|
height:1.7em;
|
|
|
font-size:1.4em;
|
|
|
color:#fff;
|
|
|
line-height:1.05em;
|
|
|
border:0;
|
|
|
cursor:pointer;
|
|
|
margin:0.3em 0.2em;
|
|
|
padding:0.15em;
|
|
|
box-shadow: 0em 0.35em 0.35em 0em rgba(0, 0, 0, 0.55);
|
|
|
border-radius:0.3em 0.3em 0.3em 0.3em;
|
|
|
-webkit-transition:all .5s;
|
|
|
-moz-transition:all .5s;
|
|
|
transition:all .5s;
|
|
|
}
|
|
|
|
|
|
|
|
|
#page-anchors button {
|
|
|
background: #000;
|
|
|
text-align:center;
|
|
|
position:relative;
|
|
|
display:inline-block;
|
|
|
width:1.7em;
|
|
|
height:1.7em;
|
|
|
font-size:1.7em;
|
|
|
color:#fff;
|
|
|
line-height:1.05em;
|
|
|
border:0;
|
|
|
cursor:pointer;
|
|
|
margin:0.6em 0.3em;
|
|
|
padding:0.17em;
|
|
|
box-shadow: 0em 0.3em 0.3em 0em rgba(0, 0, 0, 0.55);
|
|
|
border-radius:0.3em 0.3em 0.3em 0.3em;
|
|
|
-webkit-transition:all .5s;
|
|
|
-moz-transition:all .5s;
|
|
|
transition:all .5s;
|
|
|
}
|
|
|
|
|
|
#social-platforms a span {
|
|
|
display:none;
|
|
|
}
|
|
|
|
|
|
#social-platforms a:after,
|
|
|
#page-anchors button:after {
|
|
|
opacity:0;
|
|
|
font-size:.5em;
|
|
|
font-weight:30em;
|
|
|
color:#fff;
|
|
|
background:#000;
|
|
|
content:attr(data-title);
|
|
|
white-space:nowrap;
|
|
|
display:block;
|
|
|
position:absolute;
|
|
|
left:0;
|
|
|
bottom:60em;
|
|
|
z-index:-5;
|
|
|
cursor:help;
|
|
|
padding:3em 8em;
|
|
|
-webkit-transition:all .5s;
|
|
|
-moz-transition:all .5s;
|
|
|
transition:all .5s;
|
|
|
}
|
|
|
|
|
|
#social-platforms a:before,
|
|
|
#page-anchors button:before {
|
|
|
opacity:0;
|
|
|
display:block;
|
|
|
position:absolute;
|
|
|
bottom:5em;
|
|
|
left:50%;
|
|
|
margin-left:-5em;
|
|
|
z-index:9;
|
|
|
cursor:help;
|
|
|
content:'';
|
|
|
width:0;
|
|
|
height:0;
|
|
|
border-left:5em solid transparent;
|
|
|
border-right:5em solid transparent;
|
|
|
border-top:5em solid #000;
|
|
|
-webkit-transition:all .5s;
|
|
|
-moz-transition:all .5s;
|
|
|
transition:all .5s;
|
|
|
}
|
|
|
|
|
|
#social-platforms a:hover,
|
|
|
#page-anchors a:hover,
|
|
|
#page-anchors button:hover {
|
|
|
color:white;
|
|
|
background-color: #1E4258;
|
|
|
box-shadow: 0 0.1em 0.1em 0 rgba(0, 0, 0, 0.45);
|
|
|
}
|
|
|
|
|
|
#social-platforms a:hover:before, #social-platforms a:hover:after,
|
|
|
#page-anchors a:hover:before, #page-anchors a:hover:after,
|
|
|
#page-anchors button:hover:before, #page-anchors button:hover:after {
|
|
|
opacity:1;
|
|
|
z-index:50;
|
|
|
}
|
|
|
|
|
|
#project-platforms {
|
|
|
position:relative;
|
|
|
font-size:1.2rem;
|
|
|
text-align:center;
|
|
|
height:auto;
|
|
|
overflow:hidden;
|
|
|
}
|
|
|
|
|
|
#project-platforms a {
|
|
|
background: rgba(170, 170, 170, 0.1);
|
|
|
text-align:center;
|
|
|
position:relative;
|
|
|
display:inline-block;
|
|
|
width:1.4em;
|
|
|
height:1.4em;
|
|
|
font-size:1.75em;
|
|
|
color:#000;
|
|
|
line-height:1.05em;
|
|
|
border:0;
|
|
|
cursor:pointer;
|
|
|
margin:0.9em 0.2em;
|
|
|
padding:0.15em;
|
|
|
box-shadow: 0em 0.3em 0.3em 0em rgba(170, 170, 170, 0.65);
|
|
|
border-radius:0.2em 0.2em 0.2em 0.2em;
|
|
|
-webkit-transition:all .5s;
|
|
|
-moz-transition:all .5s;
|
|
|
transition:all .5s;
|
|
|
}
|
|
|
|
|
|
#project-platforms a span {
|
|
|
display:none;
|
|
|
}
|
|
|
|
|
|
#project-platforms a:after {
|
|
|
opacity:0;
|
|
|
font-size:.5em;
|
|
|
font-weight:30em;
|
|
|
color:#000;
|
|
|
background:#000;
|
|
|
content:attr(data-title);
|
|
|
white-space:nowrap;
|
|
|
display:block;
|
|
|
position:absolute;
|
|
|
left:0;
|
|
|
bottom:60em;
|
|
|
z-index:-5;
|
|
|
cursor:help;
|
|
|
padding:3em 8em;
|
|
|
-webkit-transition:all .5s;
|
|
|
-moz-transition:all .5s;
|
|
|
transition:all .5s;
|
|
|
}
|
|
|
|
|
|
#project-platforms a:before {
|
|
|
opacity:0;
|
|
|
display:block;
|
|
|
position:absolute;
|
|
|
bottom:5em;
|
|
|
left:50%;
|
|
|
margin-left:-5em;
|
|
|
z-index:9;
|
|
|
cursor:help;
|
|
|
content:'';
|
|
|
width:0;
|
|
|
height:0;
|
|
|
border-left:5em solid transparent;
|
|
|
border-right:5em solid transparent;
|
|
|
border-top:5em solid #000;
|
|
|
-webkit-transition:all .5s;
|
|
|
-moz-transition:all .5s;
|
|
|
transition:all .5s;
|
|
|
}
|
|
|
|
|
|
#project-platforms a:hover {
|
|
|
background-color: #1E4258;
|
|
|
color:#fff;
|
|
|
box-shadow: 0 0.1em 0.1em 0 rgba(70, 70, 70, 0.45);
|
|
|
}
|
|
|
|
|
|
|
|
|
</style>
|
|
|
<script>
|
|
|
var bars = null;
|
|
|
var dropdown = null;
|
|
|
var whiteContainers = null;
|
|
|
var scrolledContainerIndex = null;
|
|
|
|
|
|
function toggleMenuVisibility() {
|
|
|
changeClass("nav-icon")
|
|
|
document.getElementById('dropdown-menu').classList.toggle('hidden');
|
|
|
}
|
|
|
|
|
|
function adjustNavMenuColor(scroll) {
|
|
|
var topOfContainer = -1;
|
|
|
|
|
|
if (!scroll) {
|
|
|
setTimeout(function() {
|
|
|
adjustNavMenuColor(document.body);
|
|
|
}, 1000);
|
|
|
} else {
|
|
|
for (var i = 0; i < whiteContainers.length; i++) {
|
|
|
var container = whiteContainers[i];
|
|
|
|
|
|
if (container.previousElementSibling) {
|
|
|
topOfContainer += container.previousElementSibling.clientHeight;
|
|
|
}
|
|
|
|
|
|
var bottomOfContainer = topOfContainer + container.clientHeight;
|
|
|
|
|
|
if (scroll.scrollY >= topOfContainer && scroll.scrollY <= bottomOfContainer) {
|
|
|
bars.style.color = "#000";
|
|
|
dropdown.style.color = "#000";
|
|
|
scrolledContainerIndex = i;
|
|
|
break;
|
|
|
} else if (bars.style.color === "rgb(0, 0, 0)" && i > scrolledContainerIndex) {
|
|
|
bars.style.color = "#fff";
|
|
|
dropdown.style.color = "#fff";
|
|
|
break;
|
|
|
}
|
|
|
topOfContainer += container.clientHeight;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function setupForScroll() {
|
|
|
bars = document.getElementById('nav-icon');
|
|
|
dropdown = document.getElementById('dropdown-menu');
|
|
|
whiteContainers = document.querySelectorAll('div.content.container');
|
|
|
adjustNavMenuColor(document.body);
|
|
|
}
|
|
|
|
|
|
function changeClass(id){
|
|
|
var navicon = document.getElementById(id);
|
|
|
|
|
|
if (navicon.className == "clickable las la-bars la"){
|
|
|
navicon.className = "clickable las la-times la";
|
|
|
document.getElementById('navbutton').style.backgroundColor = '#1E4258';
|
|
|
}else if (navicon.className == "clickable las la-times la"){
|
|
|
navicon.className = "clickable las la-bars la";
|
|
|
document.getElementById('navbutton').style.backgroundColor = '#000';
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<script>
|
|
|
function displayForPublication(id) {
|
|
|
var elem = document.getElementById(id);
|
|
|
|
|
|
if (elem) {
|
|
|
elem.classList.toggle('hidden', elem.classList.contains('hidden') !== true);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function displaymenuitems(items) {
|
|
|
for (var item in items) {
|
|
|
var elem = document.getElementById(item);
|
|
|
if (elem) {
|
|
|
elem.classList.toggle('hidden', elem.classList.contains('hidden') !== true);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
window.onload = function(){
|
|
|
document.getElementById("nav-icon").addEventListener('click', changeClass);
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
<div id="nav" class="navbar">
|
|
|
<div id="page-anchors">
|
|
|
<button id="navbutton" onclick="toggleMenuVisibility()"><div class="navbutton"><i id="nav-icon" class="clickable las la-bars la"></i></button>
|
|
|
|
|
|
<div id="dropdown-menu" class="hidden">
|
|
|
<ul>
|
|
|
<li><a href="LAVIB.html#lavib">LAVIB</a></li>
|
|
|
<li><a href="LAVIB.html#statistics">Statistics</a></li>
|
|
|
<li><a href="LAVIB.html#dataset">Dataset</a></li>
|
|
|
<li><a href="LAVIB.html#explore">Explore</a></li>
|
|
|
<li><a href="LAVIB.html#results">Results</a></li>
|
|
|
<li><a href="LAVIB.html#cite">Citation</a></li>
|
|
|
<li><a href="LAVIB.html#contact">Contact</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="container div1" align="center" id="lavib">
|
|
|
<h1 class="divtext1 font1"><b><span class="lavib"><span class="lavib"><span class="lavib">LAVIB</span></span></span>: Large-scale Video Interpolation Benchmark </h1>
|
|
|
<h3 style="padding-top: 6px;" class="font2">NeurIPS 2024</h3>
|
|
|
<h3 style="padding-top: 6px;" class="font1"><a href="https://alexandrosstergiou.github.io/" target="_blank">Alexandros Stergiou</a></h3>
|
|
|
<h4 class="font2">University of Twente, NL</h4>
|
|
|
|
|
|
<div id="project-platforms">
|
|
|
|
|
|
<a href="https://arxiv.org/abs/2406.09754" target="_blank" data-title="ArXiv"><i class="ai ai-arxiv ai"></i><span>ArXiv</span></a>
|
|
|
|
|
|
<a href="https://github.com/alexandrosstergiou/LAVIB" target="_blank" data-title="GitHub"><i class="lab la-github"></i><span>GitHub</span></a>
|
|
|
|
|
|
<a href="https://huggingface.co/datasets/astergiou/LAVIB/tree/main" target="_blank" data-title="zip"><i class="fa-solid fa-file-zipper"></i><span>Data</span></a>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
</b>
|
|
|
</div>
|
|
|
<br><br>
|
|
|
<div class="container">
|
|
|
<h1>Abstract</h1> <br>
|
|
|
<p class="absfont">This paper introduces a <b>LA</b>rge-scale <b>V</b>ideo <b>I</b>nterpolation <b>B</b>enchmark (LAVIB) for the low-level video task of video frame interpolation (VFI). LAVIB comprises a large collection of high-resolution videos sourced from the web through an automated pipeline with minimal requirements for human verification. Metrics are computed for each video's motion magnitudes, luminance conditions, frame sharpness, and contrast. The collection of videos and the creation of quantitative challenges based on these metrics are under-explored by current low-level video task datasets. In total, LAVIB includes 283K clips from 17K ultra-HD videos, covering 77.6 hours. Benchmark train, val, and test sets maintain similar video metric distributions. Further splits are also created for out-of-distribution (OOD) challenges, with train and test splits including videos of dissimilar attributes.</p>
|
|
|
</div>
|
|
|
<br><br>
|
|
|
<div class="container">
|
|
|
<h1>Video overview</h1> <br>
|
|
|
<div class="col-md-10 col-md-offset-1">
|
|
|
<div style="position:relative;padding-top:56.25%;">
|
|
|
<iframe src="https://www.youtube.com/embed/MHsljTzolY0" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<br><br>
|
|
|
</div>
|
|
|
<br><br>
|
|
|
<div class="container">
|
|
|
<h1 id="statistics">LAVIB statistics</h1> <br> <br> <br>
|
|
|
<div class="text-center">
|
|
|
<img class="img-fluid" src="LAVIB/img/out.png" style="max-width: 100%;" alt="...">
|
|
|
</div> <br><br> <br>
|
|
|
<p class="absfont">Four statistics are used to obtain segments, create splits, and define challenges.</p>
|
|
|
|
|
|
<p class="absfont"><b>Frame-pair motion</b>. A significant challenge for VFI methods is learning to model cross-frame motion consistency in videos. The dataset comprises videos with diverse magnitudes; both high camera or object motion, and more static scenes. The Averaged Flow Magnitude (AFM) is used to quantify motion by spatio-temporally averaging optical flow.</p>
|
|
|
|
|
|
<p class="absfont"><b>Frame sharpness</b>
|
|
|
Fast motions, light conditions, and camera focus can affect per-frame object sharpness in videos. Sourced videos vary in the sensors, lens, codex, and camera profiles used, all of which amount to variations in the sharpness. This results in highlighting or suppressing either object edges or sensory noise. The Laplacian of Gaussians (LoG) is a standardized kernel-based approach for highlighting regions of rapid change in pixel intensities. Given a video \( \mathbf{V} \) of dimensions \( \mathbb{R}^{D=T \times H \times W} \), with \(T\) frames, \(H\) height, and \(W\) width, it convolves a kernel with size \(K\) over each frame. ALV is formulated by applying LoG and averaging:
|
|
|
|
|
|
$$
|
|
|
\text{ALV}(\mathbf{V},\sigma,K) = \frac{1}{D}\sum_{r \in \mathbb{R}^{D}} \sum_{i=1}^{K}\sum_{j=1}^{K} \underbrace{-1\frac{1}{\pi \sigma^4} (1-\frac{i^2+j^2}{2\sigma^2})e^{-\frac{i^2+j^2}{2\sigma^2}}}_{\text{LoG}(i,j)} \; \underset{r-[i,j]}{\mathbf{V}}
|
|
|
$$
|
|
|
|
|
|
As the size of the kernel also factors the estimate, an ensemble of kernel sizes \( \mathcal{N}=\{3, 5, 7\} \) is used to calculate the final value \( \frac{1}{|\mathcal{N}|}\underset{K\in \mathcal{N}}{\sum}\text{ALV}(\mathbf{V},\sigma,K)\) with \(\sigma=1.4\).
|
|
|
</p>
|
|
|
|
|
|
<p class="absfont"><b>Video contrast</b>
|
|
|
Another characteristic of videos is the contrast between objects and backgrounds in scenes. Computationally, contrast relates to the difference between neighboring raw pixel values. The metric is formulated as the Average Root Mean Square (ARMS) difference between each pixel from each frame of \( \mathbf{V}\) and the corresponding pixel in the channel-averaged \(\overline{\mathbf{V}}\).
|
|
|
|
|
|
$$
|
|
|
\text{ARMS}(\mathbf{V}) = \frac{1}{T} \sum_{t\in \mathbb{R}^{T}}\sqrt{\frac{1}{HW}\sum_{s \in \mathbb{R}^{HW}}(\underset{t,s}{\mathbf{V}}-\underset{t,s}{\overline{\mathbf{V}}})}
|
|
|
$$
|
|
|
</p>
|
|
|
|
|
|
<p class="absfont"><b>Luminance conditions</b>. The perception of light in videos can be affected by the sensor's sensitivity or the camera's processing. In human vision, the perception of luminance is done over three bands of color. To account for the uneven perception of each band, a common standard for quantitively defining luminosity is the relevant luminance. In videos, the Average Relative Luminance (ARL) can be computed as the weighted sum for each color channel from video frames averaged over time.
|
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
<br><br>
|
|
|
<div class="container" id="dataset">
|
|
|
<h1>Dataset</h1> <br>
|
|
|
<div class="text-center">
|
|
|
<img class="img-fluid" src="LAVIB/img/tab.png" style="max-width: 80%" alt="...">
|
|
|
</div> <br><br>
|
|
|
<p class="absfont"><b> Dataset statistics</b> include the number and total running times of videos. <b>Video statistics</b> relate to video information such as the resolution and frame rate. <b>Average video metrics</b> provide insights based on variance of motions, lighting conditions, and frame sharpness metrics. The difference in LAVIB video conditions and recording sensors is reflected by the high variance across metrics. <br> <br></p>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
<br><br>
|
|
|
<div class="container" id="explore">
|
|
|
<h1>Explore</h1> <br>
|
|
|
|
|
|
<p class="absfont">Examples of interpolated video segments from LAVIB OOD challenges with FLAVR. Use the slider to see the ground truth.
|
|
|
(Reload the page if videos become out of sync).<br> <br></p>
|
|
|
|
|
|
|
|
|
<p class="button_c absfont clickable" onclick="displayForPublication('afm_h2l')"><b>Low \( \rightarrow \) High Average Flow Magnitude (AFM)</b> <br></p>
|
|
|
<div class="text-center hidden div1" id="afm_h2l">
|
|
|
|
|
|
<div class="container-video">
|
|
|
|
|
|
<div class="video-wrapper">
|
|
|
<video id="afterVideo1" src="LAVIB/img/videos/high_afm/1/pred.mp4" autoplay muted loop></video>
|
|
|
<video id="beforeVideo1" src="LAVIB/img/videos/high_afm/1/gt.mp4" autoplay muted loop></video>
|
|
|
<div class="slider" id="slider1"></div>
|
|
|
</div>  
|
|
|
|
|
|
<div class="video-wrapper">
|
|
|
<video id="afterVideo2" src="LAVIB/img/videos/high_afm/2/pred.mp4" autoplay muted loop></video>
|
|
|
<video id="beforeVideo2" src="LAVIB/img/videos/high_afm/2/gt.mp4" autoplay muted loop></video>
|
|
|
<div class="slider" id="slider2"></div>
|
|
|
</div>  
|
|
|
|
|
|
<div class="video-wrapper">
|
|
|
<video id="afterVideo3" src="LAVIB/img/videos/high_afm/3/pred.mp4" autoplay muted loop></video>
|
|
|
<video id="beforeVideo3" src="LAVIB/img/videos/high_afm/3/gt.mp4" autoplay muted loop></video>
|
|
|
<div class="slider" id="slider3"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<br>
|
|
|
|
|
|
|
|
|
<p class="button_c absfont clickable" onclick="displayForPublication('alv_h2l')"><b>Low \( \rightarrow \) High Average Laplacian Variance (ALV)</b> <br></p>
|
|
|
<div class="text-center hidden div1" id="alv_h2l">
|
|
|
|
|
|
<div class="container-video">
|
|
|
|
|
|
<div class="video-wrapper">
|
|
|
<video id="afterVideo4" src="LAVIB/img/videos/high_alv/1/pred.mp4" autoplay muted loop></video>
|
|
|
<video id="beforeVideo4" src="LAVIB/img/videos/high_alv/1/gt.mp4" autoplay muted loop></video>
|
|
|
<div class="slider" id="slider4"></div>
|
|
|
</div>  
|
|
|
|
|
|
<div class="video-wrapper">
|
|
|
<video id="afterVideo5" src="LAVIB/img/videos/high_alv/2/pred.mp4" autoplay muted loop></video>
|
|
|
<video id="beforeVideo5" src="LAVIB/img/videos/high_alv/2/gt.mp4" autoplay muted loop></video>
|
|
|
<div class="slider" id="slider5"></div>
|
|
|
</div>  
|
|
|
|
|
|
<div class="video-wrapper">
|
|
|
<video id="afterVideo6" src="LAVIB/img/videos/high_alv/3/pred.mp4" autoplay muted loop></video>
|
|
|
<video id="beforeVideo6" src="LAVIB/img/videos/high_alv/3/gt.mp4" autoplay muted loop></video>
|
|
|
<div class="slider" id="slider6"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<br>
|
|
|
|
|
|
<p class="button_c absfont clickable" onclick="displayForPublication('arl_h2l')"><b>Low \( \rightarrow \) High Average Relative Luminance (ARL)</b> <br></p>
|
|
|
<div class="text-center hidden div1" id="arl_h2l">
|
|
|
|
|
|
<div class="container-video">
|
|
|
|
|
|
<div class="video-wrapper">
|
|
|
<video id="afterVideo7" src="LAVIB/img/videos/high_arl/1/pred.mp4" autoplay muted loop></video>
|
|
|
<video id="beforeVideo7" src="LAVIB/img/videos/high_arl/1/gt.mp4" autoplay muted loop></video>
|
|
|
<div class="slider" id="slider7"></div>
|
|
|
</div>  
|
|
|
|
|
|
<div class="video-wrapper">
|
|
|
<video id="afterVideo8" src="LAVIB/img/videos/high_arl/2/pred.mp4" autoplay muted loop></video>
|
|
|
<video id="beforeVideo8" src="LAVIB/img/videos/high_arl/2/gt.mp4" autoplay muted loop></video>
|
|
|
<div class="slider" id="slider8"></div>
|
|
|
</div>  
|
|
|
|
|
|
<div class="video-wrapper">
|
|
|
<video id="afterVideo9" src="LAVIB/img/videos/high_arl/3/pred.mp4" autoplay muted loop></video>
|
|
|
<video id="beforeVideo9" src="LAVIB/img/videos/high_arl/3/gt.mp4" autoplay muted loop></video>
|
|
|
<div class="slider" id="slider9"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<br>
|
|
|
|
|
|
|
|
|
<p class="button_c absfont clickable" onclick="displayForPublication('arms_h2l')"><b>Low \( \rightarrow \) High Average Root Mean Square (ARMS)</b> <br></p>
|
|
|
<div class="text-center hidden div1" id="arms_h2l">
|
|
|
|
|
|
<div class="container-video">
|
|
|
|
|
|
<div class="video-wrapper">
|
|
|
<video id="afterVideo10" src="LAVIB/img/videos/high_arms/1/pred.mp4" autoplay muted loop></video>
|
|
|
<video id="beforeVideo10" src="LAVIB/img/videos/high_arms/1/gt.mp4" autoplay muted loop></video>
|
|
|
<div class="slider" id="slider10"></div>
|
|
|
</div>  
|
|
|
|
|
|
<div class="video-wrapper">
|
|
|
<video id="afterVideo11" src="LAVIB/img/videos/high_arms/2/pred.mp4" autoplay muted loop></video>
|
|
|
<video id="beforeVideo11" src="LAVIB/img/videos/high_arms/2/gt.mp4" autoplay muted loop></video>
|
|
|
<div class="slider" id="slider11"></div>
|
|
|
</div>  
|
|
|
|
|
|
<div class="video-wrapper">
|
|
|
<video id="afterVideo12" src="LAVIB/img/videos/high_arms/3/pred.mp4" autoplay muted loop></video>
|
|
|
<video id="beforeVideo12" src="LAVIB/img/videos/high_arms/3/gt.mp4" autoplay muted loop></video>
|
|
|
<div class="slider" id="slider12"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<br>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p class="button_c absfont clickable" onclick="displayForPublication('afm_l2h')"><b>High \( \rightarrow \) Low Average Flow Magnitude (AFM)</b> <br></p>
|
|
|
<div class="text-center hidden div1" id="afm_l2h">
|
|
|
|
|
|
<div class="container-video">
|
|
|
|
|
|
<div class="video-wrapper">
|
|
|
<video id="afterVideo13" src="LAVIB/img/videos/low_afm/1/pred.mp4" autoplay muted loop></video>
|
|
|
<video id="beforeVideo13" src="LAVIB/img/videos/low_afm/1/gt.mp4" autoplay muted loop></video>
|
|
|
<div class="slider" id="slider13"></div>
|
|
|
</div>  
|
|
|
|
|
|
<div class="video-wrapper">
|
|
|
<video id="afterVideo14" src="LAVIB/img/videos/low_afm/2/pred.mp4" autoplay muted loop></video>
|
|
|
<video id="beforeVideo14" src="LAVIB/img/videos/low_afm/2/gt.mp4" autoplay muted loop></video>
|
|
|
<div class="slider" id="slider14"></div>
|
|
|
</div>  
|
|
|
|
|
|
<div class="video-wrapper">
|
|
|
<video id="afterVideo15" src="LAVIB/img/videos/low_afm/3/pred.mp4" autoplay muted loop></video>
|
|
|
<video id="beforeVideo15" src="LAVIB/img/videos/low_afm/3/gt.mp4" autoplay muted loop></video>
|
|
|
<div class="slider" id="slider15"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<br>
|
|
|
|
|
|
|
|
|
<p class="button_c absfont clickable" onclick="displayForPublication('alv_l2h')"><b>High \( \rightarrow \) Low Average Laplacian Variance (ALV)</b> <br></p>
|
|
|
<div class="text-center hidden div1" id="alv_l2h">
|
|
|
|
|
|
<div class="container-video">
|
|
|
|
|
|
<div class="video-wrapper">
|
|
|
<video id="afterVideo16" src="LAVIB/img/videos/low_alv/1/pred.mp4" autoplay muted loop></video>
|
|
|
<video id="beforeVideo16" src="LAVIB/img/videos/low_alv/1/gt.mp4" autoplay muted loop></video>
|
|
|
<div class="slider" id="slider16"></div>
|
|
|
</div>  
|
|
|
|
|
|
<div class="video-wrapper">
|
|
|
<video id="afterVideo17" src="LAVIB/img/videos/low_alv/2/pred.mp4" autoplay muted loop></video>
|
|
|
<video id="beforeVideo17" src="LAVIB/img/videos/low_alv/2/gt.mp4" autoplay muted loop></video>
|
|
|
<div class="slider" id="slider17"></div>
|
|
|
</div>  
|
|
|
|
|
|
<div class="video-wrapper">
|
|
|
<video id="afterVideo18" src="LAVIB/img/videos/low_alv/3/pred.mp4" autoplay muted loop></video>
|
|
|
<video id="beforeVideo18" src="LAVIB/img/videos/low_alv/3/gt.mp4" autoplay muted loop></video>
|
|
|
<div class="slider" id="slider18"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<br>
|
|
|
|
|
|
<p class="button_c absfont clickable" onclick="displayForPublication('arl_l2h')"><b>High \( \rightarrow \) Low Average Relative Luminance (ARL)</b> <br></p>
|
|
|
<div class="text-center hidden div1" id="arl_l2h">
|
|
|
|
|
|
<div class="container-video">
|
|
|
|
|
|
<div class="video-wrapper">
|
|
|
<video id="afterVideo19" src="LAVIB/img/videos/low_arl/1/pred.mp4" autoplay muted loop></video>
|
|
|
<video id="beforeVideo19" src="LAVIB/img/videos/low_arl/1/gt.mp4" autoplay muted loop></video>
|
|
|
<div class="slider" id="slider19"></div>
|
|
|
</div>  
|
|
|
|
|
|
<div class="video-wrapper">
|
|
|
<video id="afterVideo20" src="LAVIB/img/videos/low_arl/2/pred.mp4" autoplay muted loop></video>
|
|
|
<video id="beforeVideo20" src="LAVIB/img/videos/low_arl/2/gt.mp4" autoplay muted loop></video>
|
|
|
<div class="slider" id="slider20"></div>
|
|
|
</div>  
|
|
|
|
|
|
<div class="video-wrapper">
|
|
|
<video id="afterVideo21" src="LAVIB/img/videos/low_arl/3/pred.mp4" autoplay muted loop></video>
|
|
|
<video id="beforeVideo21" src="LAVIB/img/videos/low_arl/3/gt.mp4" autoplay muted loop></video>
|
|
|
<div class="slider" id="slider21"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<br>
|
|
|
|
|
|
|
|
|
<p class="button_c absfont clickable" onclick="displayForPublication('arms_l2h')"><b>High \( \rightarrow \) Low Average Root Mean Square (ARMS)</b> <br></p>
|
|
|
<div class="text-center hidden div1" id="arms_l2h">
|
|
|
|
|
|
<div class="container-video">
|
|
|
|
|
|
<div class="video-wrapper">
|
|
|
<video id="afterVideo22" src="LAVIB/img/videos/low_arms/1/pred.mp4" autoplay muted loop></video>
|
|
|
<video id="beforeVideo22" src="LAVIB/img/videos/low_arms/1/gt.mp4" autoplay muted loop></video>
|
|
|
<div class="slider" id="slider22"></div>
|
|
|
</div>  
|
|
|
|
|
|
<div class="video-wrapper">
|
|
|
<video id="afterVideo23" src="LAVIB/img/videos/low_arms/2/pred.mp4" autoplay muted loop></video>
|
|
|
<video id="beforeVideo23" src="LAVIB/img/videos/low_arms/2/gt.mp4" autoplay muted loop></video>
|
|
|
<div class="slider" id="slider23"></div>
|
|
|
</div>  
|
|
|
|
|
|
<div class="video-wrapper">
|
|
|
<video id="afterVideo24" src="LAVIB/img/videos/low_arms/3/pred.mp4" autoplay muted loop></video>
|
|
|
<video id="beforeVideo24" src="LAVIB/img/videos/low_arms/3/gt.mp4" autoplay muted loop></video>
|
|
|
<div class="slider" id="slider24"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
function createSlider(sliderId, beforeVideoId, afterVideoId) {
|
|
|
const slider = document.getElementById(sliderId);
|
|
|
const afterVideo = document.getElementById(afterVideoId);
|
|
|
const container = slider.closest('.video-wrapper');
|
|
|
var w = window.innerWidth;
|
|
|
|
|
|
slider.addEventListener('mousedown', (e) => {
|
|
|
e.preventDefault();
|
|
|
|
|
|
const onMouseMove = (e) => {
|
|
|
let xPos = e.clientX - container.offsetLeft - 0.2 * w;
|
|
|
if (xPos < 0) xPos = 0;
|
|
|
if (xPos > container.offsetWidth) xPos = container.offsetWidth;
|
|
|
|
|
|
const widthPercent = (xPos / container.offsetWidth) * 100;
|
|
|
afterVideo.style.clipPath = `inset(0 ${100 - widthPercent}% 0 0)`;
|
|
|
slider.style.left = `${widthPercent}%`;
|
|
|
};
|
|
|
|
|
|
document.addEventListener('mousemove', onMouseMove);
|
|
|
|
|
|
document.addEventListener('mouseup', () => {
|
|
|
document.removeEventListener('mousemove', onMouseMove);
|
|
|
}, { once: true });
|
|
|
});
|
|
|
}
|
|
|
|
|
|
|
|
|
createSlider('slider1', 'beforeVideo1', 'afterVideo1');
|
|
|
createSlider('slider2', 'beforeVideo2', 'afterVideo2');
|
|
|
createSlider('slider3', 'beforeVideo3', 'afterVideo3');
|
|
|
|
|
|
createSlider('slider4', 'beforeVideo4', 'afterVideo4');
|
|
|
createSlider('slider5', 'beforeVideo5', 'afterVideo5');
|
|
|
createSlider('slider6', 'beforeVideo6', 'afterVideo6');
|
|
|
|
|
|
createSlider('slider7', 'beforeVideo7', 'afterVideo7');
|
|
|
createSlider('slider8', 'beforeVideo8', 'afterVideo8');
|
|
|
createSlider('slider9', 'beforeVideo9', 'afterVideo9');
|
|
|
|
|
|
createSlider('slider10', 'beforeVideo10', 'afterVideo10');
|
|
|
createSlider('slider11', 'beforeVideo11', 'afterVideo11');
|
|
|
createSlider('slider12', 'beforeVideo12', 'afterVideo12');
|
|
|
|
|
|
createSlider('slider13', 'beforeVideo13', 'afterVideo13');
|
|
|
createSlider('slider14', 'beforeVideo14', 'afterVideo14');
|
|
|
createSlider('slider15', 'beforeVideo15', 'afterVideo15');
|
|
|
|
|
|
createSlider('slider16', 'beforeVideo16', 'afterVideo16');
|
|
|
createSlider('slider17', 'beforeVideo17', 'afterVideo17');
|
|
|
createSlider('slider18', 'beforeVideo18', 'afterVideo18');
|
|
|
|
|
|
createSlider('slider19', 'beforeVideo19', 'afterVideo19');
|
|
|
createSlider('slider20', 'beforeVideo20', 'afterVideo20');
|
|
|
createSlider('slider21', 'beforeVideo21', 'afterVideo21');
|
|
|
|
|
|
createSlider('slider22', 'beforeVideo22', 'afterVideo22');
|
|
|
createSlider('slider23', 'beforeVideo23', 'afterVideo23');
|
|
|
createSlider('slider24', 'beforeVideo24', 'afterVideo24');
|
|
|
|
|
|
|
|
|
</script>
|
|
|
</div>
|
|
|
</div> <br><br>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="container" id="results">
|
|
|
<h1>Results</h1> <br>
|
|
|
|
|
|
<div class="text-center">
|
|
|
<img class="img-fluid" src="LAVIB/img/tab2.png" style="max-width: 80%" alt="...">
|
|
|
</div> <br><br>
|
|
|
|
|
|
<p class="absfont">
|
|
|
<b>Baselines</b>. SSIM, PSNR, and LPIPS scores are reported on both LAVIB val and test sets across three training settings. FLAVR is used as the baseline model due to its fast processing times, strong results, and open-source codebase. Pre-training on LAVIB gives the best performance overall by increasing PSNR, and SSIM by +1.08 and +0.015 on average on both sets.
|
|
|
</p>
|
|
|
<br>
|
|
|
<p class="absfont">
|
|
|
<b>Generalization to related small-scale datasets</b>. LAVIB is unique in having the largest number of diverse videos of <b>both</b> high resolution and high frame rates. LAVIB's large variance across videos enables learning VFI over different conditions which can benefit performance in smaller task-specific benchmark datasets.
|
|
|
</p>
|
|
|
<br>
|
|
|
|
|
|
<p class="absfont">
|
|
|
<b>Multi-metric results</b>. Standard metrics for assessing the quality of interpolated video frames include PSNR, SSIM, and LPIPS. As the human judgment of the perceptual quality depends on high-order image structures and context an ensemble of metrics is used to provide a complete view of each method's performance on the LAVIB test set. Across statistics, both EMA-VFI and FLAVR perform comparably. A decrease in performance is observed with RIFE as its limited complexity can not adequately address VFI with large variations in settings across videos. Compared to FLAVR, PSNR and SSIM are decreased by -5.56 and -1.10 respectively, and LPIPs loss is increased from 0.029 to 0.146.
|
|
|
</p>
|
|
|
<br>
|
|
|
|
|
|
</div>
|
|
|
<br><br>
|
|
|
<div class="container" id="cite">
|
|
|
<h1>Citation</h1> <br> <br>
|
|
|
<pre class="div2">@inproceedings{stergiou2024lavib,
|
|
|
title={LAVIB: Large-scale Video Interpolation Benchmark},
|
|
|
author={Stergiou, Alexandros},
|
|
|
booktitle={Advances in Neural Information Processing Systems (NeurIPS)},
|
|
|
year={2024}
|
|
|
}</pre>
|
|
|
</div>
|
|
|
<br><br>
|
|
|
<div class="container" id="contact">
|
|
|
<h1>Contact</h1> <br>
|
|
|
<p class="absfont">For questions about <span class="lavib">LAVIB</span> send an email to a dot g dot stergiou at utwente dot nl. </p> <a href= "mailto: a.g.stergiou@utwente.nl"><i class="fa-solid fa-paper-plane"></i> a.g.stergiou@utwente.nl</a> <br>
|
|
|
</div>
|
|
|
<div class="row align-items-center" >
|
|
|
<center>
|
|
|
<div class="col thumb d-flex align-items-center">
|
|
|
<img class="img-fluid" src="LAVIB/img/UT_Logo_2400_Black_EN.png" style="max-width: 30%;" alt="">
|
|
|
</div>
|
|
|
</center>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
|
|
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
|
|
|
</body>
|
|
|
</html>
|
|
|
|
