From 3839b4957922b8becdfc93d9e15c0353001844dd Mon Sep 17 00:00:00 2001
From: HuiLi <1324982600@qq.com>
Date: Thu, 12 Dec 2024 12:07:42 +0800
Subject: [PATCH] feat: modification of display method

---
 components.d.ts                    |   1 +
 src/components/AbstractSection.vue |  17 +-
 src/components/DatasetDownload.vue | 138 +++++
 src/components/ImageStack.vue      |  15 +-
 src/components/TitleSection.vue    | 184 +++++--
 src/components/VideoCarousel.vue   | 277 ++++------
 src/components/WrappedSection.vue  |   2 +
 src/index.json                     | 803 +++++++----------------------
 8 files changed, 559 insertions(+), 878 deletions(-)
 create mode 100644 src/components/DatasetDownload.vue

diff --git a/components.d.ts b/components.d.ts
index 9692f52..5580777 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -12,6 +12,7 @@ declare module 'vue' {
     AModal: typeof import('ant-design-vue/es')['Modal']
     ASegmented: typeof import('ant-design-vue/es')['Segmented']
     BibTeX: typeof import('./src/components/BibTeX.vue')['default']
+    DatasetDownload: typeof import('./src/components/DatasetDownload.vue')['default']
     FrameworkSection: typeof import('./src/components/FrameworkSection.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
diff --git a/src/components/AbstractSection.vue b/src/components/AbstractSection.vue
index 254fa8f..63798b1 100644
--- a/src/components/AbstractSection.vue
+++ b/src/components/AbstractSection.vue
@@ -1,7 +1,7 @@
 <template>
     <section class="abstract">
         <div>
-            <h3>{{ title }}</h3>
+            <h2>{{ title }}</h2>
             <div v-if="figure" class="figure">
                 <img :src="figure">
             </div>
@@ -29,8 +29,15 @@ const video = (props.video || "").startsWith("assets") ? new URL(`../${props.vid
 
 <style lang="scss" scoped>
 .abstract {
+    h2 {
+        // font-family: 'Caveat', cursive;
+        // font-size: 2.5rem;
+        margin-top: 0px;
+        margin-bottom: 70px;
+    }
     div {
-        max-width: 960px;
+        max-width: 1400px;
+        margin-top: 50px;
         @apply w-full mt-2;
     }
 
@@ -41,9 +48,15 @@ const video = (props.video || "").startsWith("assets") ? new URL(`../${props.vid
             @apply mr-2;
         }
     }
+    .figure {
+        margin-top: 10px;
+        max-width: 1400px;
+        margin: 1rem 0;
+    }
 }
 
 .figure {
+    max-width: 1200px;
     margin: 1rem 0;
 }
 
diff --git a/src/components/DatasetDownload.vue b/src/components/DatasetDownload.vue
new file mode 100644
index 0000000..f242c23
--- /dev/null
+++ b/src/components/DatasetDownload.vue
@@ -0,0 +1,138 @@
+<template>
+    <section class="dataset-download">
+      <div>
+        <h2 class="title">{{ title }}</h2>
+
+
+        <div class="download-section">
+          <div v-for="(item, index) in datasets" :key="index" class="download-item">
+            <button class="download-button" @click="handleDownload">
+              {{ item.name }}
+            </button>
+
+            <span class="download-details">{{ item.details }}</span>
+          </div>
+        </div>
+
+        <div v-if="updates" class="update-section">
+          <h3>🔥 Warning ({{ updates.date }})</h3>
+          <p>
+            {{ updates.notes }}
+            <a :href="updates.links.license">Our license</a>.
+          </p>
+          <p>
+            {{ updates.description }}
+            <a :href="updates.links.details">Fill out the form</a>.
+          </p>
+        </div>
+        
+      </div>
+    </section>
+  </template>
+  
+  <script setup lang="ts">
+  interface Dataset {
+    name: string;
+    details: string;
+  }
+  
+  interface Updates {
+    date: string;
+    description: string;
+    links: {
+      details: string;
+      license: string;
+    };
+    notes: string;
+  }
+  
+  interface Props {
+    title?: string;
+    datasets?: Dataset[];
+    updates?: Updates;
+  }
+  
+  const { props } = defineProps<{ props: Props }>();
+  const title = props.title || "Dataset Download";
+  const datasets = props.datasets || [];
+  const updates = props.updates || null;
+
+  const handleDownload = () => {
+    window.location.href = 'https://forms.gle/moqec5Qod7mz9pfD6';
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .dataset-download {
+    text-align: center; /* Ensures entire section is centered */
+  
+    .title {
+      margin-bottom: 80px;
+    //   font-family: 'Caveat', cursive;
+    //   font-size: 2.5rem;
+      margin: 5;
+    }
+
+    .update-section {
+      margin-top: 30px;
+      text-align: left;
+      padding: 20px;
+      background-color: #f9f9f9;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+      max-width: 1400px;
+  
+      h3 {
+        color: #e63946;
+      }
+  
+      a {
+        color: #007BFF;
+        text-decoration: none;
+        font-size: 16px;
+  
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  
+    .download-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      max-width: 1400px;
+    }
+  
+    .download-item {
+      margin-bottom: 15px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      max-width: 1200px;
+  
+      .download-button {
+        font-size: 24px;
+        padding: 10px 20px;
+        margin-right: 10px;
+        background-color: #333;
+        color: #fff;
+        border: none;
+        cursor: pointer;
+  
+        &:hover {
+          background-color: #555;
+        }
+      }
+  
+      .download-details {
+        font-size: 24px;
+        color: #333;
+      }
+
+    }
+  
+    
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/ImageStack.vue b/src/components/ImageStack.vue
index f62c1d6..1987c2f 100644
--- a/src/components/ImageStack.vue
+++ b/src/components/ImageStack.vue
@@ -1,6 +1,6 @@
 <template>
     <section class="image-stack">
-      <h3>{{ title }}</h3>
+      <h2>{{ title }}</h2>
       <div>
         <img
           v-for="(image, index) in images"
@@ -28,15 +28,24 @@ const images = props.imageList || []
 </script>
 
 <style lang="scss" scoped>
+@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');
+
+
+h2 {
+    // font-family: 'Caveat', cursive;
+    margin-top: 0px; /* 减小与视频网格的间距 */
+    margin-bottom: 0px; /* 减小与视频网格的间距 */
+}
+
 .image-stack {
     div {
-        max-width: 960px;
+        max-width: 1400px;
         @apply w-full mt-2;
     }
 }
 
 img {
-    margin: 1rem 0;
+    margin: 2rem 0;
 }
 
 </style>
\ No newline at end of file
diff --git a/src/components/TitleSection.vue b/src/components/TitleSection.vue
index d30a338..4971361 100644
--- a/src/components/TitleSection.vue
+++ b/src/components/TitleSection.vue
@@ -1,102 +1,174 @@
 <template>
     <section class="title">
-        <h1>{{ title }}</h1>
-        <h3>{{ subtitle }}</h3>
 
-        <div v-for="(authorsItem, i) in authors" :key="i" class="authors">
-            <div class="authors" :class="{ thin: i === authorsItem.length - 2 }">
-                <span v-for="author, i in authorsItem" :key="i">
+        <div class="background-layer"></div>
+        <div class="header">
+            <h1>{{ title }}</h1>
+            <h3>{{ subtitle }}</h3>
+        </div>
+
+        <div class="authors-wrapper">
+            <div v-for="(authorsItem, i) in authors" :key="i" class="authors">
+                <span v-for="(author, j) in authorsItem" :key="j">
                     <sup v-if="author.prefix">{{ author.prefix }}</sup>
-                    <a class="author-name" v-if="author.homepage" :href="author.homepage" target="_blank">{{ author.name
-                        }}</a>
-                    <span class="author-name" v-else>{{ author.name }}</span>
+                    <a v-if="author.homepage" :href="author.homepage" target="_blank" class="author-name">{{ author.name }}</a>
+                    <span v-else class="author-name">{{ author.name }}</span>
                     <sup v-if="author.suffix">{{ author.suffix }}</sup>
-                    <span v-if="i < authorsItem.length - 1">&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                    <span v-if="j < authorsItem.length - 1">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                 </span>
             </div>
         </div>
 
-        <div class="res_link">
+        <div class="resources">
             <a v-if="resources.pdf" class="button" :href="resources.pdf" target="_blank">
                 <i class="iconfont icon-lm-pdf"></i>
-                <span>Paper</span>
-            </a>
-            <a v-if="resources.arxiv" class="button" :href="resources.arxiv" target="_blank">
-                <i class="iconfont icon-lm-Arxiv"></i>
-                <span>arXiv</span>
+                <span>Arxiv</span>
             </a>
-
             <a v-if="resources.github" class="button" :href="resources.github" target="_blank">
                 <i class="iconfont icon-lm-github"></i>
-                <span>Code</span>
+                <span>Github</span>
             </a>
-
-            <a v-if="resources.huggingface" class="button" :href="resources.huggingface" target="_blank">
-                <i class="iconfont icon-lm-huggingface"></i>
-                <span>HuggingFace</span>
+            <a v-if="resources.samples" class="button" :href="resources.samples" target="_blank">
+                <i class="iconfont icon-lm-samples"></i>
+                <span>View more samples</span>
             </a>
         </div>
 
-        <video v-if="mainVideo" v-lazy :src="mainVideo" muted loop controls></video>
+        <!-- <video v-if="mainVideo" class="main-video" :src="mainVideo" muted loop controls></video> -->
     </section>
 </template>
 
+
 <script lang="ts" setup>
 import { onMounted } from 'vue';
 
 interface Props {
-    title?: string,
-    subtitle?: string,
-    authors?: any[],
-    resources?: any,
-    mainVideo?: string,
+    title?: string;
+    subtitle?: string;
+    authors?: any[];
+    resources?: any;
+    mainVideo?: string;
+    backgroundVideo?: string;
 }
-const { props } = defineProps<{ props: Props }>()
+const { props } = defineProps<{ props: Props }>();
 
-const title = props.title
-const subtitle = props.subtitle
-const authors = props.authors
-const resources = props.resources
-const mainVideo = (props.mainVideo || "").startsWith("assets") ? new URL(`../${props.mainVideo}`, import.meta.url).href : props.mainVideo
+const title = props.title;
+const subtitle = props.subtitle;
+const authors = props.authors;
+const resources = props.resources;
+const mainVideo = (props.mainVideo || '').startsWith('assets')
+    ? new URL(`../${props.mainVideo}`, import.meta.url).href
+    : props.mainVideo;
+// const backgroundVideo = props.backgroundVideo
 
 onMounted(() => {
     if (title) {
-        document.title = title
+        document.title = title;
     }
     if (subtitle) {
-        document.title += `: ${subtitle}`
+        document.title += `: ${subtitle}`;
     }
-})
+});
 </script>
 
 <style lang="scss" scoped>
+
 .title {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    min-height: 100vh;
+    justify-content: center;
+    background-color: transparent;
+    z-index: 1;
+    margin-bottom: 1px;
+    
+    padding: 20px;
+
+    .background-layer {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-image: url('http://cdn.aondata.work//OpenHumanVid/assets/videos/bottom.png'); // 替换为你的图片路径
+        background-size: cover;
+        background-position: center;
+        z-index: -1; // 确保背景层在内容下面
+    }
+    /* 添加白色模糊层 */
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(255, 255, 255, 0.8); /* 白色半透明 */
+        filter: blur(1px); /* 模糊效果 */
+        z-index: 0 ; /* 确保在内容与背景图片之间 */
+        pointer-events: none; /* 防止影响交互 */
+    }
 
-    .authors {
-        @apply text-center text-base;
+    .header {
+        margin-bottom: 20px;
 
-        // .thin {
-        //     .author-name {
-        //         @apply font-light
-        //     }
-        // }
-    }
+        h1 {
+            font-size: 7rem;
+            margin: 2;
+        }
 
-    .res_link {
-        @apply text-center mt-1;
-    }
+        h3 {
+            font-size: 2.5rem;
+            margin: 2;
+        }
+        z-index: 1;
 
-    video {
-        max-width: 960px;
-        @apply mt-20 block w-full;
     }
-}
 
-.button {
-    @apply mr-3 mt-2;
+    .authors-wrapper {
+        margin: 15px 0;
+
+        .authors {
+            font-size: 1.8rem;
 
-    i {
-        @apply mr-1;
+            .author-name {
+                font-weight: 500;
+            }
+        }
+        z-index: 1;
+
+    }
+
+    .resources {
+        display: flex;
+        justify-content: center;
+        gap: 10px;
+        margin: 20px 0;
+        z-index: 1;
+
+        .button {
+            display: flex;
+            align-items: center;
+            background-color: #f0f0f0;
+            border: 1px solid #ccc;
+            padding: 10px 15px;
+            text-decoration: none;
+            color: #333;
+            border-radius: 5px;
+            transition: background-color 0.3s;
+
+            &:hover {
+                background-color: #e0e0e0;
+            }
+
+            i {
+                margin-right: 8px;
+            }
+        }
     }
+
 }
-</style>
+</style> 
+  
\ No newline at end of file
diff --git a/src/components/VideoCarousel.vue b/src/components/VideoCarousel.vue
index 40b7e89..6ae8d70 100644
--- a/src/components/VideoCarousel.vue
+++ b/src/components/VideoCarousel.vue
@@ -1,211 +1,112 @@
 <template>
     <section>
-        <h3>{{ title }}</h3>
-        <div class="panel">
-            <div ref="carouselElement" :id="id" class="relative" data-twe-carousel-init data-twe-carousel-slide
-                data-twe-ride="carousel" data-twe-interval="9999999">
-
-                <!--Carousel items-->
-                <div class="relative w-full overflow-hidden after:clear-both after:block after:content-['']">
-                    <div v-for="(videos, i) in videoLists" :key="i" :ref="(el: any) => carouselItems[i] = el"
-                        :class="{ hidden: i > 0 }"
-                        class="video-group relative float-left -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
-                        data-twe-carousel-item style="backface-visibility: hidden">
-                        <div v-for="(video, vi) in videos" :key="vi"
-                            :style="{ width: `${100 / videos.length - 1}%`, 'margin-right': `1%`, 'position': 'relative' }"
-                            @mouseenter.capture.stop="hideCaption" @mouseleave.capture.stop="showCaption">
-                            <div v-if="captions[(i * count) + vi]" class="caption">
-                                <span>
-                                    {{ captions[(i * count) + vi] }}
-                                </span>
-                            </div>
-                            <video :ref="(el: any) => videos[(i * count) + vi] = el"
-                                :muted="Boolean(captions[(i * count) + vi])" :style="{ 'cursor': 'pointer' }"
-                                :loop="Boolean(captions[(i * count) + vi])"
-                                :autoplay="Boolean(captions[(i * count) + vi])"
-                                :controls="!Boolean(captions[(i * count) + vi])" :src="video" preload="metadata"
-                                @click="(evt) => showFeature((i * count) + vi, evt)"></video>
-                        </div>
-                    </div>
-                </div>
-
-                <!--Carousel indicators-->
-                <div v-if="videoLists.length > 1"
-                    class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] -mb-8 flex list-none justify-center p-0"
-                    data-twe-carousel-indicators>
-                    <button v-for="(_item, i) in videoLists" :key="i" :ref="(el: any) => carouselIndicators[i] = el"
-                        type="button" :data-twe-target="`#${id}`" :data-twe-slide-to="i" class="indicator"
-                        aria-current="true" :aria-label="`Slide ${i + 1}`"></button>
-                </div>
-
-                <!--Carousel controls - prev item-->
-                <button v-if="videoLists.length > 1" class="indicator-btn indicator-left-btn" type="button"
-                    :data-twe-target="`#${id}`" data-twe-slide="prev">
-                    <span class="inline-block h-8 w-8">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                            stroke="currentColor" class="h-6 w-6">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
-                        </svg>
-                    </span>
-                    <span
-                        class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Previous</span>
-                </button>
-                <!--Carousel controls - next item-->
-                <button v-if="videoLists.length > 1" class="indicator-btn indicator-right-btn" type="button"
-                    :data-twe-target="`#${id}`" data-twe-slide="next">
-                    <span class="inline-block h-8 w-8">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                            stroke="currentColor" class="h-6 w-6">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
-                        </svg>
-                    </span>
-                    <span
-                        class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Next</span>
-                </button>
-            </div>
+      <h2 class="video-title">{{ title }}</h2>
+      <div class="video-grid">
+        <div v-for="(video, index) in items" :key="index" class="video-item">
+          <div class="caption" v-if="captions[index]">
+            <span>{{ captions[index] }}</span>
+          </div>
+          <video
+            :src="video"
+            autoplay
+            muted
+            loop
+            preload="metadata"
+            class="video-player"
+          ></video>
         </div>
+      </div>
     </section>
-
-</template>
-
-<script setup lang="ts">
-interface Props {
-    id?: string
-    title?: string
-    items?: string[]
-    captions?: string[]
-    annotations?: { [key: string]: { clip_id: string, method: string, feature: any } }[]
-    count?: number
+  </template>
+  
+
+<style scoped>
+@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');
+
+h2 {
+  margin-top: 10px;
+  text-align: center; /* 居中标题 */
+  margin-bottom: 45px; /* 减小与视频网格的间距 */
+  /* font-weight: 700; 增加字体权重以使标题更突出 */
+  /* font-family: ; */
+  color: #333; /* 标题颜色可选 */
 }
-const { props } = defineProps<{ props: Props }>()
-const title = props.title || ''
-const items = (props.items || []).map(sub => sub.startsWith("assets") ? new URL(`../${sub}`, import.meta.url).href : sub)
-const annotations = props.annotations || []
-const captions = annotations.map(v => v["Captions"]?.feature["long_caption"])
-const count = (props.count || 1)
-const id = props.id || title.replaceAll(" ", "")
 
-const videoLists: string[][] = []
-for (let i = 0; i < items.length; i++) {
-    if (i % count === 0) {
-        videoLists.push(items.slice(i, count + i))
-    }
+.video-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr); /* 一行四个视频，均分宽度 */
+  gap: 0; /* 去掉间距 */
+  width: 100vw; /* 确保整个容器占满屏幕宽度 */
+  margin-bottom: 0px;
 }
 
-import { ref, onMounted } from 'vue';
-import { initTWE, Carousel } from 'tw-elements';
-import { attachVideo, inVisible, playVideo } from '@/utils/video';
-import { store } from '@/store'
-
-const carouselElement = ref<HTMLElement>();
-const videos = ref<HTMLVideoElement[]>([]);
-const carouselItems = ref<HTMLElement[]>([]);
-const carouselIndicators = ref<HTMLElement[]>([]);
-
-function hideCaption(evt: MouseEvent) {
-    const containerEle = evt.target as HTMLElement
-    const element: HTMLElement = containerEle.querySelector(".caption")!
-    if (element) {
-        element.style.display = "none"
-    }
+.video-item {
+  position: relative;
+  overflow: hidden;
+  width: 100%; /* 确保每个格子占满分配宽度 */
+  
 }
 
-function showCaption(evt: MouseEvent) {
-    const containerEle = evt.target as HTMLElement
-    const element: HTMLElement = containerEle.querySelector(".caption")!
-    if (element) {
-        element.style.display = "flex"
-    }
+.video-player {
+  width: 100%; /* 视频宽度占满容器 */
+  height: auto; /* 高度根据宽度自动调整 */
+  display: block;
+  pointer-events: none;
+  
 }
 
-function showFeature(index: number, evt: MouseEvent) {
-    if (annotations.length > index) {
-        const annotation = annotations[index]
-        store.annotations = annotation
-        store.modalOpen = true
-    }
-    store.video = (evt.target as HTMLVideoElement).src
+.caption {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  font-size: 24px;
+  font-weight: 700;
+  font-family: 'Caveat', cursive;
+  text-align: center;
+  pointer-events: none;
 }
+</style>
 
-onMounted(async () => {
-    carouselItems.value[0]?.setAttribute("data-twe-carousel-active", "")
-    carouselIndicators.value[0]?.setAttribute("data-twe-carousel-active", "")
-    do {
-        await new Promise(resolve => setTimeout(resolve, 100))
-    } while (store.tweInitializing["Carousel"])
-    store.setInitializing("Carousel", true)
-    console.log("initializing..", store.tweInitializing["Carousel"])
-    initTWE({ Carousel }, { allowReinits: true, checkOtherImports: true });
-    store.setInitializing("Carousel", false)
-    console.log("initialized", store.tweInitializing["Carousel"])
 
-    carouselElement.value?.addEventListener('slide.twe.carousel', (v: any) => {
-        const relatedTarget = v.relatedTarget
-        const videoElements = relatedTarget.querySelectorAll('video')
-        for (const video of videoElements) {
-            attachVideo(video)
-        }
-    })
-});
 
-</script>
-
-<style scoped lang="scss">
-section {
-    @apply w-full py-10 md:px-16 px-6;
-    @apply flex flex-col justify-center items-center;
+<script setup lang="ts">
+interface Props {
+  id?: string;
+  title?: string;
+  items?: string[];
+  captions?: string[];
+  annotations?: { [key: string]: { clip_id: string; method: string; feature: any } }[];
 }
 
-.panel {
-    max-width: 960px;
-    @apply w-full mt-2;
+const { props } = defineProps<{ props: Props }>();
 
-    &>* {
-        @apply w-full mb-8;
-    }
+const title = props.title || '';
+const items = (props.items || []).map((sub) =>
+  sub.startsWith('assets') ? new URL(`../${sub}`, import.meta.url).href : sub
+);
+const annotations = props.annotations || [];
+const captions = annotations.map((v) => v['Captions']?.feature['short_caption']);
 
-    :last-child {
-        @apply mb-0;
-    }
+function hideCaption(evt: MouseEvent) {
+  const containerEle = evt.target as HTMLElement;
+  const element: HTMLElement = containerEle.querySelector('.caption')!;
+  if (element) {
+    element.style.display = 'none';
+  }
 }
 
-.video-group {
-    .caption {
-        @apply w-full h-full px-1 text-white;
-        opacity: 0.5;
-        white-space: pre-line;
-        word-break: break-word;
-        text-overflow: ellipsis;
-        position: absolute;
-        background-color: rgba(0, 0, 0, 0.7);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: 0 5%;
-        z-index: 99;
-    }
-
-    video {
-        // width: 49%;
-        // @apply rounded-lg;
-    }
-
-    @media (max-width: 768px) {
-        video {
-            width: 100% !important;
-        }
-
-        div {
-            width: 0;
-        }
-    }
-
-    div {
-        width: 1%;
-    }
-
-    * {
-        @apply inline-block;
-    }
+function showCaption(evt: MouseEvent) {
+  const containerEle = evt.target as HTMLElement;
+  const element: HTMLElement = containerEle.querySelector('.caption')!;
+  if (element) {
+    element.style.display = 'flex';
+  }
 }
-</style>
+</script>
diff --git a/src/components/WrappedSection.vue b/src/components/WrappedSection.vue
index 912b7d0..4c4a534 100644
--- a/src/components/WrappedSection.vue
+++ b/src/components/WrappedSection.vue
@@ -8,6 +8,7 @@
     <VideoCarousel v-if="template === 'video-carousel'" :props="props" />
     <BibTeX v-if="template === 'bibtex'" :props="props" />
     <ImageStack v-if="template === 'image-stack'" :props="props" />
+    <DatasetDownload v-if="template === 'dataset-download'" :props="props" />
 </template>
 
 <script setup lang="ts">
@@ -20,6 +21,7 @@ import SingleVideo from "@/components/SingleVideo.vue"
 import VideoCarousel from "@/components/VideoCarousel.vue"
 import BibTeX from "@/components/BibTeX.vue"
 import ImageStack from "@/components/ImageStack.vue"
+import DatasetDownload from "@/components/DatasetDownload.vue"
 interface Props {
     template?: string,
     props?: any,
diff --git a/src/index.json b/src/index.json
index 2431fb0..d6b6f29 100644
--- a/src/index.json
+++ b/src/index.json
@@ -83,674 +83,219 @@
         ]
       ],
       "resources": {
-        "pdf": "https://arxiv.org/pdf/2410.00115",
+        "pdf": "https://arxiv.org/abs/2412.00115",
         "arxiv": "https://arxiv.org/abs/2412.00115",
         "github": "https://github.com/fudan-generative-vision/OpenHumanVid"
-      }
+      },
+      "mainVideo": "https://cdn.aondata.work/OpenHumanVid/assets/videos/main_bottom.mp4"
     }
   },
   {
     "template": "video-carousel",
     "props": {
-      "id": "showcase",
-      "title": "Demo of OpenHumanVid",
-      "items": [
-        "https://cdn.aondata.work/OpenHumanVid/assets/videos/f40492a05b8df569687c735e33c295efce06517630489d06f7f95f68527c4674_010804_010895.mp4",
-        "https://cdn.aondata.work/OpenHumanVid/assets/videos/4d092de5f215e4bc41b7c773a77787289e0053f2f7645c5801fd2d907ebac137_016564_016789.mp4",
-        "https://cdn.aondata.work/OpenHumanVid/assets/videos/360e7333d4a8302bacfddd6b308606d17342fa23233a72c545fac4fba812ad59_030894_031095.mp4",
-        "https://cdn.aondata.work/OpenHumanVid/assets/videos/0160098af8984e3b58fd61d3c6c260ccf86e7ae221e8e3b13fc06bdafe597aeb_050277_050376.mp4"
-      ],
-      "annotations": [
-        {
-          "Captions": {
-            "method": "caption",
-            "feature": {
-              "long_caption": "A man in a dark suit and blue plaid shirt stands in a room with classical architecture, including tall windows and a grand staircase, and speaks earnestly to the camera. The room is well-lit by natural light, and elegant wall sconces. The man's serious expression and the room's historical significance are consistent throughout the video.",
-              "short_caption": "A man in a dark suit descends a modern staircase, engaged in a phone conversation, showing concern, in a contemporary indoor environment with signs and a security camera.",
-              "appearance_caption": "A man in a dark suit and black shirt.",
-              "humanmotion_caption": "descending.",
-              "facemotion_caption": "Focused concern",
-              "environment_caption": "Contemporary indoor environment, possibly a corporate or public building, with signs indicating directions and a security camera."
-            }
-          },
-          "Luminance": {
-            "method": "luminance",
-            "feature": {
-              "luminance_max": 44.80217717303692,
-              "luminance_min": 44.075818219795465,
-              "luminance_mean": 44.36980560578091
-            }
-          },
-          "Blur": {
-            "method": "blur",
-            "feature": {
-              "blur_mean": 0.2796466799001651,
-              "blur_max": 0.295311695002576,
-              "blur_min": 0.24202580959337716
-            }
-          },
-          "Aesthetics": {
-            "method": "aes_score",
-            "feature": {
-              "score": 5.305022716522217
-            }
-          },
-          "Technical Quality": {
-            "method": "video_quality",
-            "feature": {
-              "overall_score": 0.7145693752470338,
-              "aesthetic_score": 0.9918410815715151,
-              "technical_score": 0.1735642116291858
-            }
-          },
-          "Motion": {
-            "method": "motion_score",
-            "feature": {
-              "local_score": 41.78071594238281,
-              "global_score": 3.2120871543884277
-            }
-          },
-          "Human": {
-            "method": "human",
-            "feature": {
-              "face_infos": [
-                {
-                  "bbox": [
-                    0.5781167159772328, 0.21002040439181857, 0.7136582301670973, 0.5326948801676432
-                  ],
-                  "pose": [-9.113373756408691, -18.841583251953125, -3.3799729347229004]
+        "id": "showcase",
+        "title": "Demo videos of OpenHumanVid",
+        "items": [
+            "https://cdn.aondata.work/OpenHumanVid/assets/videos/f40492a05b8df569687c735e33c295efce06517630489d06f7f95f68527c4674_010804_010895.mp4",
+            "https://cdn.aondata.work/OpenHumanVid/assets/videos/4d092de5f215e4bc41b7c773a77787289e0053f2f7645c5801fd2d907ebac137_016564_016789.mp4",
+            "https://cdn.aondata.work/OpenHumanVid/assets/videos/360e7333d4a8302bacfddd6b308606d17342fa23233a72c545fac4fba812ad59_030894_031095.mp4",
+            "https://cdn.aondata.work/OpenHumanVid/assets/videos/0160098af8984e3b58fd61d3c6c260ccf86e7ae221e8e3b13fc06bdafe597aeb_050277_050376.mp4",
+            "https://cdn.aondata.work/OpenHumanVid/assets/videos/97a3e862c8912d17a4ada93fe6d6bd43c68e09d989edb7c172f3140b96d72959_049022_049088.mp4",
+            "https://cdn.aondata.work/OpenHumanVid/assets/videos/5ea041748ebaf37a0d07ff5473104aa4354ebbc9330c9a9058f6717cd2b9d036_043844_044026.mp4",
+            "https://cdn.aondata.work/OpenHumanVid/assets/videos/3bdaf3fe992a95c35b21640a8ae9bef20bfe3d23589764c7f2d1b64dc327f8b7_029732_029869.mp4",
+            "https://cdn.aondata.work/OpenHumanVid/assets/videos/9e206f57d7a2df1f730b82d0bbbf91347bd5248e77dca6ce94e96c11f6715a6c_006547_006706.mp4",
+            "https://cdn.aondata.work/OpenHumanVid/assets/videos/2182c16811a02163ccab717a8c5992d8e327c7e1ef8308747f0da5d048717271_017898_017965.mp4",
+            "https://cdn.aondata.work/OpenHumanVid/assets/videos/2d771402206c9bb48cb513c9e6adfb8e4feaa279c7e3264084c10a8f79bbd9e3_007877_008045.mp4",
+            "https://cdn.aondata.work/OpenHumanVid/assets/videos/1f03d2da3e817e3c38321b600ce6c40748ab5fc035265f6ce2b720fa3d30dbc6_032061_032297.mp4",
+            "https://cdn.aondata.work/OpenHumanVid/assets/videos/1ee13584e5e829e40b136e78df593c718c5fedd189338dcbdba5dd98f4acbf82_033220_033326.mp4",
+            "https://cdn.aondata.work/OpenHumanVid/assets/videos/1d1c471604f04be43037d5f04c99d8a1522e4332a46bd2b49fbab04dd45a631f_023360_023422.mp4",
+            "https://cdn.aondata.work/OpenHumanVid/assets/videos/1c8be0319cc95b179520cb4b35a028e5f903099d8a03a1c627335c764e3563e4_022101_022168.mp4",
+            "https://cdn.aondata.work/OpenHumanVid/assets/videos/0fa30d72fb9dcae30a60d7609e5cb1233d52ba2d58d620d48a8e7def08d5c010_011713_011787.mp4",
+            "https://cdn.aondata.work/OpenHumanVid/assets/videos/0dbeebd286e00d8d24bddd563705b7d4bd6e7e144c9a195d9e544ec72fcd6abe_024089_024182.mp4"
+        ],
+        "annotations": [
+            {
+                "Captions": {
+                    "method": "caption",
+                    "feature": {
+                        "long_caption": "A man in a dark suit and blue plaid shirt stands in a room with classical architecture, including tall windows and a grand staircase, and speaks earnestly to the camera. The room is well-lit by natural light, and elegant wall sconces. The man's serious expression and the room's historical significance are consistent throughout the video.",
+                        "short_caption": "A man in a dark suit descends a modern staircase, engaged in a phone conversation, showing concern, in a contemporary indoor environment with signs and a security camera."
+                    }
                 }
-              ],
-              "face_ratio": 0.32267447577582464,
-              "max_human_num": 1,
-              "average_human_num": 1.0,
-              "first_frame_human_num": 1,
-              "average_human_num_change": 0.0
-            }
-          },
-          "Lip Sync": {
-            "method": "syncnet",
-            "feature": {
-              "offset": -3.0,
-              "conf": 8.667348861694336,
-              "dist": 6.714460372924805
-            }
-          }
-        },
-        {
-          "Captions": {
-            "method": "caption",
-            "feature": {
-              "long_caption": "A woman with glasses and a playful expression is seated at a cafeteria table, wearing a white hoodie with red hearts and a black t-shirt with space motifs, surrounded by snacks and a vending machine. She then stands in front of the vending machine, her expression shifting from mild surprise to mild frustration, indicating a casual interaction with the machine. The setting suggests a workplace or school cafeteria.",
-              "short_caption": "A woman in a white hoodie with red hearts and a space-themed t-shirt interacts with a vending machine in a cafeteria, her expression shifting from surprise to frustration.",
-              "appearance_caption": "A woman with glasses and a playful expression, wearing a white hoodie with red hearts and a black t-shirt with space motifs.",
-              "humanmotion_caption": "She stands in front of the vending machine, her expression shifting from mild surprise to mild frustration.",
-              "facemotion_caption": "playful, mild surprise, mild frustration",
-              "environment_caption": "A cafeteria with a vending machine and tables."
-            }
-          },
-          "Luminance": {
-            "method": "luminance",
-            "feature": {
-              "luminance_max": 63.31634377263374,
-              "luminance_min": 50.00055105401235,
-              "luminance_mean": 53.09558892590255
-            }
-          },
-          "Blur": {
-            "method": "blur",
-            "feature": {
-              "blur_mean": 0.2582490573647941,
-              "blur_max": 0.2744274919660693,
-              "blur_min": 0.2316813177185246
-            }
-          },
-          "Aesthetics": {
-            "method": "aes_score",
-            "feature": {
-              "score": 4.983050346374512
-            }
-          },
-          "Technical Quality": {
-            "method": "video_quality",
-            "feature": {
-              "overall_score": 0.6542895498423325,
-              "aesthetic_score": 0.9887587395132719,
-              "technical_score": 0.1403587827452548
-            }
-          },
-          "Motion": {
-            "method": "motion_score",
-            "feature": {
-              "local_score": 35.41042709350586,
-              "global_score": 2.0712239742279053
-            }
-          },
-          "Human": {
-            "method": "human",
-            "feature": {
-              "face_infos": [
-                {
-                  "bbox": [
-                    0.36856036716037327, 0.17341622246636285, 0.491852710865162, 0.41829100714789497
-                  ],
-                  "pose": [2.3419764041900635, -21.7281436920166, 10.016470909118652]
+            },
+            {
+                "Captions": {
+                    "method": "caption",
+                    "feature": {
+                        "long_caption": "A woman with glasses and a playful expression is seated at a cafeteria table, wearing a white hoodie with red hearts and a black t-shirt with space motifs, surrounded by snacks and a vending machine. She then stands in front of the vending machine, her expression shifting from mild surprise to mild frustration, indicating a casual interaction with the machine. The setting suggests a workplace or school cafeteria.",
+                        "short_caption": "A woman in a white hoodie with red hearts and a space-themed t-shirt interacts with a vending machine in a cafeteria, her expression shifting from surprise to frustration." 
+                    }
                 }
-              ],
-              "face_ratio": 0.24487478468153212,
-              "max_human_num": 1,
-              "average_human_num": 1.0,
-              "first_frame_human_num": 1,
-              "average_human_num_change": 0.0
-            }
-          },
-          "Lip Sync": {
-            "method": "syncnet",
-            "feature": {
-              "offset": -1.0,
-              "conf": 7.297475337982178,
-              "dist": 7.176436901092529
-            }
-          }
-        },
-        {
-          "Captions": {
-            "method": "caption",
-            "feature": {
-              "long_caption": "A man in a dark suit and black shirt is seen descending a modern staircase, engaged in a phone conversation, showing focused concern. The scene is set in a contemporary indoor environment, possibly a corporate or public building, with signs indicating directions. The man's posture and expressions suggest a professional setting that requires formality, and the presence of a security camera adds a sense of surveillance. The video is identified as a scene from a television drama.",
-              "short_caption": "A man in a dark suit and blue plaid shirt stands in a room with classical architecture, speaking earnestly to the camera with a serious expression.",
-              "appearance_caption": "A man in a dark suit and blue plaid shirt.",
-              "humanmotion_caption": "speaks earnestly",
-              "facemotion_caption": "Earnest, serious",
-              "environment_caption": "A room with classical architecture, tall windows, a grand staircase, natural light, and elegant wall sconces."
-            }
-          },
-          "Luminance": {
-            "method": "luminance",
-            "feature": {
-              "luminance_max": 114.01546287890619,
-              "luminance_min": 94.20237751909724,
-              "luminance_mean": 104.10700067281539
-            }
-          },
-          "Blur": {
-            "method": "blur",
-            "feature": {
-              "blur_mean": 0.4040423192695577,
-              "blur_max": 0.47463199214916585,
-              "blur_min": 0.3013300861745972
-            }
-          },
-          "Aesthetics": {
-            "method": "aes_score",
-            "feature": {
-              "score": 5.638896942138672
-            }
-          },
-          "Technical Quality": {
-            "method": "video_quality",
-            "feature": {
-              "overall_score": 0.5532148258526322,
-              "aesthetic_score": 0.9793050304537433,
-              "technical_score": 0.10796191375160949
-            }
-          },
-          "Motion": {
-            "method": "motion_score",
-            "feature": {
-              "local_score": 27.24751853942871,
-              "global_score": 1.1056225299835205
-            }
-          },
-          "Human": {
-            "method": "human",
-            "feature": {
-              "face_infos": [
-                {
-                  "bbox": [
-                    0.44597764015197755, 0.16279669867621527, 0.4815670967102051,
-                    0.24358976152208117
-                  ],
-                  "pose": [-14.76474666595459, 7.624451160430908, 11.087444305419922]
+            },
+            {
+                "Captions": {
+                    "method": "caption",
+                    "feature": {
+                        "long_caption": "A man in a dark suit and black shirt is seen descending a modern staircase, engaged in a phone conversation, showing focused concern. The scene is set in a contemporary indoor environment, possibly a corporate or public building, with signs indicating directions. The man's posture and expressions suggest a professional setting that requires formality, and the presence of a security camera adds a sense of surveillance. The video is identified as a scene from a television drama.",
+                        "short_caption": "A man in a dark suit and blue plaid shirt stands in a room with classical architecture, speaking earnestly to the camera with a serious expression."
+                    }
                 }
-              ],
-              "face_ratio": 0.0807930628458659,
-              "max_human_num": 1,
-              "average_human_num": 1.0,
-              "first_frame_human_num": 1,
-              "average_human_num_change": 0.0
-            }
-          },
-          "Lip Sync": {
-            "method": "syncnet",
-            "feature": {
-              "offset": 2.0,
-              "conf": 1.5849928855895996,
-              "dist": 6.576815128326416
-            }
-          }
-        },
-        {
-          "Captions": {
-            "method": "caption",
-            "feature": {
-              "long_caption": "A middle-aged man with glasses is seen engaged in a phone conversation, standing outside a residential building. Initially, he is in a gray polo shirt, with a window and air conditioner in the background. Two seconds later, his attire changes to a dark gray polo shirt, and his expression shifts to concern or surprise, with a potted plant and air conditioner still visible behind him.",
-              "short_caption": "A middle-aged man with glasses stands outside a residential building, wearing a gray polo shirt, then suddenly changes to a dark gray polo shirt, with a concerned expression.",
-              "appearance_caption": "A middle-aged man with glasses, wearing a gray polo shirt, then a dark gray polo shirt.",
-              "humanmotion_caption": "is seen, standing, changes, shifts",
-              "facemotion_caption": "concern or surprise",
-              "environment_caption": "Residential building, window, air conditioner, potted plant"
-            }
-          },
-          "Luminance": {
-            "method": "luminance",
-            "feature": {
-              "luminance_max": 99.7417545071614,
-              "luminance_min": 96.92748873806424,
-              "luminance_mean": 99.09837591735385
-            }
-          },
-          "Blur": {
-            "method": "blur",
-            "feature": {
-              "blur_mean": 0.1432342186972951,
-              "blur_max": 0.1787749287749288,
-              "blur_min": 0.10249231819733698
-            }
-          },
-          "Aesthetics": {
-            "method": "aes_score",
-            "feature": {
-              "score": 5.6754841804504395
-            }
-          },
-          "Technical Quality": {
-            "method": "video_quality",
-            "feature": {
-              "overall_score": 0.7343733228660522,
-              "aesthetic_score": 0.9941633391453666,
-              "technical_score": 0.16613536816958177
-            }
-          },
-          "Motion": {
-            "method": "motion_score",
-            "feature": {
-              "local_score": 10.54634952545166,
-              "global_score": 1.350376009941101
-            }
-          },
-          "Human": {
-            "method": "human",
-            "feature": {
-              "face_infos": [
-                {
-                  "bbox": [
-                    0.6057637214660645, 0.248422728644477, 0.7475871086120606, 0.5665499369303385
-                  ],
-                  "pose": [-18.972448348999023, -11.247897148132324, 2.378697395324707]
+            },
+            {
+                "Captions": {
+                    "method": "caption",
+                    "feature": {
+                        "long_caption": "A middle-aged man with glasses is seen engaged in a phone conversation, standing outside a residential building. Initially, he is in a gray polo shirt, with a window and air conditioner in the background. Two seconds later, his attire changes to a dark gray polo shirt, and his expression shifts to concern or surprise, with a potted plant and air conditioner still visible behind him.",
+                        "short_caption": "A middle-aged man with glasses stands outside a residential building, wearing a gray polo shirt, then suddenly changes to a dark gray polo shirt, with a concerned expression."
+                    }
                 }
-              ],
-              "face_ratio": 0.3181272082858615,
-              "max_human_num": 1,
-              "average_human_num": 1.0,
-              "first_frame_human_num": 1,
-              "average_human_num_change": 0.0
-            }
-          },
-          "Lip Sync": {
-            "method": "syncnet",
-            "feature": {
-              "offset": -2.0,
-              "conf": 2.301626205444336,
-              "dist": 11.54295539855957
-            }
-          }
-        }
-      ],
-      "count": 2
-    }
-  },
-  {
-    "template": "video-carousel",
-    "props": {
-      "id": "showcase_2",
-      "title": "",
-      "items": [
-        "https://cdn.aondata.work/OpenHumanVid/assets/videos/97a3e862c8912d17a4ada93fe6d6bd43c68e09d989edb7c172f3140b96d72959_049022_049088.mp4",
-        "https://cdn.aondata.work/OpenHumanVid/assets/videos/5ea041748ebaf37a0d07ff5473104aa4354ebbc9330c9a9058f6717cd2b9d036_043844_044026.mp4",
-        "https://cdn.aondata.work/OpenHumanVid/assets/videos/3bdaf3fe992a95c35b21640a8ae9bef20bfe3d23589764c7f2d1b64dc327f8b7_029732_029869.mp4",
-        "https://cdn.aondata.work/OpenHumanVid/assets/videos/9e206f57d7a2df1f730b82d0bbbf91347bd5248e77dca6ce94e96c11f6715a6c_006547_006706.mp4"
-      ],
-      "annotations": [
-        {
-          "Captions": {
-            "method": "caption",
-            "feature": {
-              "long_caption": "A woman with long brown hair, wearing a white lab coat over a green vest and black skirt, stands in a modern office, holding a glass door handle. The office has a bookshelf with books and a blue pyramid-shaped object. She then walks through the office, passing a bookshelf with books and a blue vase, and a glass door marked 'NO EXIT'.",
-              "short_caption": "A woman in a white lab coat and green vest stands in a modern office, holding a glass door handle, then walks past a bookshelf and a 'NO EXIT' glass door.",
-              "appearance_caption": "A woman with long brown hair, wearing a white lab coat over a green vest and black skirt.",
-              "humanmotion_caption": "She stands, holding a glass door handle. She walks through the office, passing a bookshelf and a glass door.",
-              "facemotion_caption": null,
-              "environment_caption": "A modern office with  - a bookshelf with books  - a blue pyramid-shaped object  - a bookshelf with books \n- a blue vase - a glass door - a glass door marked 'NO EXIT'"
-            }
-          },
-          "Luminance": {
-            "method": "luminance",
-            "feature": {
-              "luminance_max": 82.27107518012156,
-              "luminance_min": 72.46973442708332,
-              "luminance_mean": 78.75742966330296
-            }
-          },
-          "Blur": {
-            "method": "blur",
-            "feature": {
-              "blur_mean": 0.33411502228276835,
-              "blur_max": 0.5099797906401144,
-              "blur_min": 0.17152747993382758
-            }
-          },
-          "Aesthetics": {
-            "method": "aes_score",
-            "feature": {
-              "score": 4.990878582000732
-            }
-          },
-          "Technical Quality": {
-            "method": "video_quality",
-            "feature": {
-              "overall_score": 0.5704152362195155,
-              "aesthetic_score": 0.9796746792130917,
-              "technical_score": 0.11826147467262539
-            }
-          },
-          "Motion": {
-            "method": "motion_score",
-            "feature": {
-              "local_score": 29.328584671020508,
-              "global_score": 5.377431392669678
-            }
-          },
-          "Human": {
-            "method": "human",
-            "feature": {
-              "face_infos": [
-                {
-                  "bbox": [
-                    0.5273186206817627, 0.20097421010335287, 0.5875191211700439, 0.34473116132948134
-                  ],
-                  "pose": [-7.73296594619751, -6.060508728027344, 1.727678656578064]
+            },
+            {
+                "Captions": {
+                    "method": "caption",
+                    "feature": {
+                        "long_caption": "A woman with long brown hair, wearing a white lab coat over a green vest and black skirt, stands in a modern office, holding a glass door handle. The office has a bookshelf with books and a blue pyramid-shaped object. She then walks through the office, passing a bookshelf with books and a blue vase, and a glass door marked 'NO EXIT'.",
+                        "short_caption": "A woman in a white lab coat and green vest stands in a modern office, holding a glass door handle, then walks past a bookshelf and a 'NO EXIT' glass door."
+                    }
                 }
-              ],
-              "face_ratio": 0.14375695122612847,
-              "max_human_num": 1,
-              "average_human_num": 1.0,
-              "first_frame_human_num": 1,
-              "average_human_num_change": 0.0
-            }
-          },
-          "Lip Sync": {
-            "method": "syncnet",
-            "feature": {
-              "offset": -14.0,
-              "conf": 0.9809341430664062,
-              "dist": 8.305692672729492
-            }
-          }
-        },
-        {
-          "Captions": {
-            "method": "caption",
-            "feature": {
-              "long_caption": "The video shows a woman in her thirties with short, dark hair, wearing a blue blouse, engaged in a conversation or listening intently as she holds a glass in a relaxed yet attentive manner in a neutral-colored indoor setting, possibly a home. The soft, natural lighting and subtle movements suggest a quiet, daytime atmosphere.",
-              "short_caption": "A woman in her thirties with short, dark hair, wearing a blue blouse, holds a glass in a relaxed, attentive manner in a neutral-colored indoor setting, possibly a home, under soft, natural lighting.",
-              "appearance_caption": "A woman in her thirties with short, dark hair, wearing a blue blouse.",
-              "humanmotion_caption": "Holds",
-              "facemotion_caption": "Relaxed, attentive",
-              "environment_caption": "Neutral-colored indoor setting, possibly a home, with soft, natural lighting."
-            }
-          },
-          "Luminance": {
-            "method": "luminance",
-            "feature": {
-              "luminance_max": 79.61820315733836,
-              "luminance_min": 51.08700091044206,
-              "luminance_mean": 64.64430035196341
-            }
-          },
-          "Blur": {
-            "method": "blur",
-            "feature": {
-              "blur_mean": 0.21980229516307084,
-              "blur_max": 0.26714219972388403,
-              "blur_min": 0.16206700738216923
-            }
-          },
-          "Aesthetics": {
-            "method": "aes_score",
-            "feature": {
-              "score": 5.447680473327637
-            }
-          },
-          "Technical Quality": {
-            "method": "video_quality",
-            "feature": {
-              "overall_score": 0.6705267651436968,
-              "aesthetic_score": 0.9931084337887776,
-              "technical_score": 0.11831916126483329
-            }
-          },
-          "Motion": {
-            "method": "motion_score",
-            "feature": {
-              "local_score": 44.169921875,
-              "global_score": 19.18124008178711
-            }
-          },
-          "Human": {
-            "method": "human",
-            "feature": {
-              "face_infos": [
-                {
-                  "bbox": [
-                    0.6056308867311376, 0.15664837772684886, 0.7112511923146803, 0.4045689805109698
-                  ],
-                  "pose": [-11.033823013305664, -15.968358993530273, 3.2269742488861084]
+            },
+            {
+                "Captions": {
+                    "method": "caption",
+                    "feature": {
+                        "long_caption": "The video shows a woman in her thirties with short, dark hair, wearing a blue blouse, engaged in a conversation or listening intently as she holds a glass in a relaxed yet attentive manner in a neutral-colored indoor setting, possibly a home. The soft, natural lighting and subtle movements suggest a quiet, daytime atmosphere.",
+                        "short_caption": "A woman in her thirties with short, dark hair, wearing a blue blouse, holds a glass in a relaxed, attentive manner in a neutral-colored indoor setting, possibly a home, under soft, natural lighting."
+                    }
                 }
-              ],
-              "face_ratio": 0.24792060278412092,
-              "max_human_num": 1,
-              "average_human_num": 1.0,
-              "first_frame_human_num": 1,
-              "average_human_num_change": 0.0
-            }
-          },
-          "Lip Sync": {
-            "method": "syncnet",
-            "feature": {
-              "offset": -1.0,
-              "conf": 2.692563533782959,
-              "dist": 5.6294379234313965
-            }
-          }
-        },
-        {
-          "Captions": {
-            "method": "caption",
-            "feature": {
-              "long_caption": "A woman with a beaming smile and large round glasses is seen walking down a professional hallway, dressed in a pastel-colored blouse and high-waisted pants, later adding a tie and high-necked scarf to her outfit, as she confidently navigates the corridors.",
-              "short_caption": "A woman with a beaming smile and large round glasses walks down a professional hallway.",
-              "appearance_caption": "A woman with a beaming smile and large round glasses, dressed in a pastel-colored blouse and high-waisted pants, later adding a tie and high-necked scarf to her outfit.",
-              "humanmotion_caption": "Walking, adding, navigates.",
-              "facemotion_caption": "Beaming smile, confidently.",
-              "environment_caption": "A professional hallway, corridors."
-            }
-          },
-          "Luminance": {
-            "method": "luminance",
-            "feature": {
-              "luminance_max": 100.44091059136282,
-              "luminance_min": 94.02553527582461,
-              "luminance_mean": 97.46732214505825
-            }
-          },
-          "Blur": {
-            "method": "blur",
-            "feature": {
-              "blur_mean": 0.18966647708326917,
-              "blur_max": 0.24150710315009263,
-              "blur_min": 0.15457118960303673
-            }
-          },
-          "Aesthetics": {
-            "method": "aes_score",
-            "feature": {
-              "score": 5.419094562530518
-            }
-          },
-          "Technical Quality": {
-            "method": "video_quality",
-            "feature": {
-              "overall_score": 0.6779396156058177,
-              "aesthetic_score": 0.9904255147659955,
-              "technical_score": 0.1491149300461109
-            }
-          },
-          "Motion": {
-            "method": "motion_score",
-            "feature": {
-              "local_score": 65.053466796875,
-              "global_score": 3.0861849784851074
-            }
-          },
-          "Human": {
-            "method": "human",
-            "feature": {
-              "face_infos": [
-                {
-                  "bbox": [
-                    0.22532782554626465, 0.152951537238227, 0.38141019344329835, 0.5069247775607639
-                  ],
-                  "pose": [0.30051207542419434, 14.57342529296875, -16.953102111816406]
+            },
+            {
+                "Captions": {
+                    "method": "caption",
+                    "feature": {
+                        "long_caption": "A woman with a beaming smile and large round glasses is seen walking down a professional hallway, dressed in a pastel-colored blouse and high-waisted pants, later adding a tie and high-necked scarf to her outfit, as she confidently navigates the corridors.",
+                        "short_caption": "A woman with a beaming smile and large round glasses walks down a professional hallway."
+                    }
                 }
-              ],
-              "face_ratio": 0.35397324032253696,
-              "max_human_num": 1,
-              "average_human_num": 1.0,
-              "first_frame_human_num": 1,
-              "average_human_num_change": 0.0
-            }
+            },
+            {
+                "Captions": {
+                    "method": "caption",
+                    "feature": {
+                        "long_caption": "The video shows a single individual, a man with long, dark hair and a beard, dressed in a regal red garment with gold accents, standing by a serene lake surrounded by lush greenery, holding a golden staff as he appears contemplative and poised.",
+                        "short_caption": "A man with long, dark hair and a beard stands by a serene lake, dressed in a regal red garment with gold accents, holding a golden staff."
+                    }
+                }
+            },
+            {
+                "Captions": {
+                    "method": "caption",
+                    "feature": {
+                        "long_caption": "The video shows a single individual, a man with long, dark hair and a beard, dressed in a regal red garment with gold accents, standing by a serene lake surrounded by lush greenery, holding a golden staff as he appears contemplative and poised.",
+                        "short_caption": "Two men, one in a dark jacket and the other in a dark leather jacket, sit in a vehicle, the driver focused on the road, the passenger looking at him intently."
+                    }
+                }
+            },
+            {
+              "Captions": {
+                  "method": "caption",
+                  "feature": {
+                      "long_caption": "The video shows a single individual, a man with long, dark hair and a beard, dressed in a regal red garment with gold accents, standing by a serene lake surrounded by lush greenery, holding a golden staff as he appears contemplative and poised.",
+                      "short_caption": "A relaxed male in a dark poncho and hat, and a female in vibrant traditional attire, engage in a casual conversation in a serene outdoor setting surrounded by rustic structures."
+                  }
+              }
           },
-          "Lip Sync": {
-            "method": "syncnet",
-            "feature": {
-              "offset": 0.0,
-              "conf": 4.139852523803711,
-              "dist": 9.093404769897461
+          {
+            "Captions": {
+                "method": "caption",
+                "feature": {
+                    "long_caption": "The video shows a single individual, a man with long, dark hair and a beard, dressed in a regal red garment with gold accents, standing by a serene lake surrounded by lush greenery, holding a golden staff as he appears contemplative and poised.",
+                    "short_caption": "Two young girls, one in a white lace dress and the other in light green, sit contemplatively and playfully on a wooden bunk bed in a dimly lit, vintage-style room."
+                }
             }
-          }
         },
         {
           "Captions": {
+              "method": "caption",
+              "feature": {
+                  "long_caption": "The video shows a single individual, a man with long, dark hair and a beard, dressed in a regal red garment with gold accents, standing by a serene lake surrounded by lush greenery, holding a golden staff as he appears contemplative and poised.",
+                  "short_caption": "Two men, one in a dark suit and the other in casual attire, interact with a third man in a dark suit in varying settings with serious expressions."
+              }
+          }
+      },
+      {
+        "Captions": {
             "method": "caption",
             "feature": {
-              "long_caption": "The video shows a single individual, a man with long, dark hair and a beard, dressed in a regal red garment with gold accents, standing by a serene lake surrounded by lush greenery, holding a golden staff as he appears contemplative and poised.",
-              "short_caption": "A man with long, dark hair and a beard stands by a serene lake, dressed in a regal red garment with gold accents, holding a golden staff.",
-              "appearance_caption": "A man with long, dark hair and a beard, dressed in a regal red garment with gold accents.",
-              "humanmotion_caption": "Standing, holding.",
-              "facemotion_caption": "Contemplative.",
-              "environment_caption": "A serene lake surrounded by lush greenery."
-            }
-          },
-          "Luminance": {
-            "method": "luminance",
-            "feature": {
-              "luminance_max": 85.71982203667534,
-              "luminance_min": 73.01265349370661,
-              "luminance_mean": 78.56432639665799
-            }
-          },
-          "Blur": {
-            "method": "blur",
-            "feature": {
-              "blur_mean": 0.35758069999845454,
-              "blur_max": 0.5296291950246421,
-              "blur_min": 0.14420100023815194
-            }
-          },
-          "Aesthetics": {
-            "method": "aes_score",
-            "feature": {
-              "score": 5.947199821472168
-            }
-          },
-          "Technical Quality": {
-            "method": "video_quality",
-            "feature": {
-              "overall_score": 0.8055594443748364,
-              "aesthetic_score": 0.998301966999396,
-              "technical_score": 0.14914422728010493
-            }
-          },
-          "Motion": {
-            "method": "motion_score",
-            "feature": {
-              "local_score": 59.30437088012695,
-              "global_score": 4.398129463195801
-            }
-          },
-          "Human": {
-            "method": "human",
-            "feature": {
-              "face_infos": [
-                {
-                  "bbox": [
-                    0.35720417499542234, 0.3437721888224284, 0.4812570571899414, 0.7121794806586371
-                  ],
-                  "pose": [15.58315372467041, -77.33991241455078, -17.1079044342041]
-                }
-              ],
-              "face_ratio": 0.36840729183620874,
-              "max_human_num": 1,
-              "average_human_num": 1.0,
-              "first_frame_human_num": 1,
-              "average_human_num_change": 0.0
-            }
-          },
-          "Lip Sync": {
-            "method": "syncnet",
-            "feature": {
-              "offset": -1.0,
-              "conf": 2.2823095321655273,
-              "dist": 5.687164783477783
+                "long_caption": "The video shows a single individual, a man with long, dark hair and a beard, dressed in a regal red garment with gold accents, standing by a serene lake surrounded by lush greenery, holding a golden staff as he appears contemplative and poised.",
+                "short_caption": "A middle-aged individual in a traditional gray garment stands near a window, extending their hand in a contemplative pose, in a calm and serene domestic setting."
             }
+        }
+    },
+    {
+      "Captions": {
+          "method": "caption",
+          "feature": {
+              "long_caption": "The video shows a single individual, a man with long, dark hair and a beard, dressed in a regal red garment with gold accents, standing by a serene lake surrounded by lush greenery, holding a golden staff as he appears contemplative and poised.",
+              "short_caption": "A woman in her thirties or forties, wearing a floral green dress, and a man in his twenties, in a blue button-up shirt, engage in a casual conversation in a dimly lit kitchen."
           }
+      }
+  },
+  {
+    "Captions": {
+        "method": "caption",
+        "feature": {
+            "long_caption": "The video shows a single individual, a man with long, dark hair and a beard, dressed in a regal red garment with gold accents, standing by a serene lake surrounded by lush greenery, holding a golden staff as he appears contemplative and poised.",
+            "short_caption": "Three officers stand in a dimly lit police station briefing area, their serious expressions reflecting the situation, with a central officer flanked by two colleagues amidst a map and door."
         }
-      ],
-      "count": 2
+    }
+  },
+  {
+  "Captions": {
+      "method": "caption",
+      "feature": {
+          "long_caption": "The video shows a single individual, a man with long, dark hair and a beard, dressed in a regal red garment with gold accents, standing by a serene lake surrounded by lush greenery, holding a golden staff as he appears contemplative and poised.",
+          "short_caption": "A young individual, likely in their late teens or early twenties, sits in a well-lit space, surrounded by sports memorabilia, intently playing with a basketball."
+      }
+    }
+  }        
+    ],
+    "count": 16
     }
   },
   {
     "template": "image-stack",
     "props": {
-      "title": "Statistics",
-      "imageList": ["src/figs/word_count_.png", "src/figs/dist1.png", "src/figs/dist2.png"]
+      "title": "Statistics of OpenHumanVid",
+      "imageList": ["src/figs/dist1.png", "src/figs/dist2.png", "src/figs/word_count_.png"]
     }
   },
   {
     "template": "abstract",
     "props": {
-      "title": "Data Pipeline",
+      "title": "Collection Pipeline of OpenHumanVid",
       "figure": "//cdn.aondata.work/OpenHumanVid/assets/images/datapipeline.jpg",
-      "content": "First, we preprocess the raw videos with decoding, cropping, and segmentation, followed by quality filtering based on luminance, blur, aesthetics, motion, and technical metrics. Then, we extract human skeleton data and speech audio from the video clips. Subsequently, we generate structured captions for the clips using MiniCPM, CogVLM, and Llama, with BLIP2 voting for accuracy. Finally, we apply advanced human quality filtering to align captions with visual details such as appearance, expressions, and poses, ensuring fine-grained alignment between textual information and visual characteristics."
+      "content": "We preprocess raw videos through decoding, cropping, and segmentation, followed by quality filtering based on luminance, blur, aesthetics, motion, and technical metrics. Human skeleton data and speech audio are extracted, and structured captions are generated using MiniCPM, CogVLM, and Llama, refined by BLIP2 voting. Advanced quality filtering ensures captions align with visual details like appearance, expressions, and poses for fine-grained accuracy."
     }
   },
   {
-    "template": "abstract",
+    "template": "dataset-download",
     "props": {
-      "title": "How to Download(Comming Soon)",
-      "figure": "",
-      "content": ""
+      "title": "Download OpenHumanVid",
+      "datasets": [
+      {
+        "name": "Dataset [full]",
+        "details": "13.2M samples / 16.7 khrs duration / ~6.05 TB"
+      }
+    ],
+    "updates": {
+      "date": "Dec 2024",
+      "description": "To prevent the misuse of OpenHumanVid dataset, we require your information to be submitted for review and approval prior to granting access for download.",
+      "links": {
+        "details": "https://forms.gle/moqec5Qod7mz9pfD6",
+        "license": "https://raw.githubusercontent.com/fudan-generative-vision/OpenHumanVid/refs/heads/main/LICENSE"
+      },
+      "notes": "The video samples are collected from the publicly available dataset. Users must follow the related license to use these video samples."
+      }
     }
   },
   {