<script setup lang='ts'>
import frame from "~/assets/caiji/framerx.webp";

const router = useRouter();

function onClickLeft() {
  router.back();
}

const leftTime = ref(15);
const timer = ref();

onMounted(() => {
  timer.value = setInterval(() => {
    leftTime.value--;
    if (leftTime.value === 0) {
      clearInterval(timer.value);
    }
  }, 1000);
});
</script>

<template>
  <van-nav-bar
    title="人像采集"
    left-arrow
    @click-left="onClickLeft"
  ></van-nav-bar>
  <div
    class="flex-auto w-full flex flex-col items-center justify-between py-72px px-6 box-border"
  >
    <div class="w-full flex flex-col items-center mb-12">
      <img class="w-108px mt-6px" :src="frame" alt="" />
      <div class="text-xl my-16px">定制你的专属人像</div>
      <!-- <div class="text-base mt-22px">保持环境安静</div> -->
      <!-- <div class="text-base">按照指令做出动作</div> -->
      <div class="content">
        <div class="text-xl font-semibold">录制前准备</div>
        <div class="text-lg font-semibold">场地</div>
        <p style="margin-top: 0">
          选择无噪声的拍摄场地，尤其注意避开拍摄当天周围有施I计划的环境。
        </p>
        <p>确保灯光设备光线均匀、亮度充足，无阴影、不过曝。</p>
        <p>
          如需后期抠图，请使用绿幕作为背景录制， 并确保绿幕平整、无褶皱。模特背后距离绿 幕>2.5米为佳。注意如需拍摄全身，地面也需要铺设绿幕。
        </p>
        <p>
          如使用实景录制，确保背景静止，没有真人或拟真人像，以免影响最终生成效果。
        </p>
        <div class="text-lg font-semibold">设备</div>
        <p style="margin-top: 0">
          选择一款可拍摄分辨率1080P及以上、帧率30FPS及以上视频的手机或摄像机。
        </p>
        <p>
          手机或摄像机使用专业二脚架或手机支架固定，关闭自动对焦功能，确保拍摄画面稳定、不失焦、无抖动。
        </p>
        <p>
          如使用摄像机，配套安装PAD提词或专业提词器设备:如使用手机，下载提词器软件。 确保录制过程中模特目光可直视镜头。
        </p>
        <div class="text-lg font-semibold">模特</div>
        <p style="margin-top: 0">
          模特服装保持整洁，挑选无反光材质的面料，服装颜色不要与绿幕相近、以免增加抠图难度。
        </p>
        <p>
          模特发型规整、切勿遮挡面部五官和脖颈。必要时使用发胶等固定碎发，避免影响绿幕抠图效果。
        </p>
        <p>
          模特妆容干净、无油光。如需佩戴眼镜尽量选择隐形或小框镜，拍摄时避免镜面反光。
        </p>
        <p>
          模特在拍摄前需熟读口播文稿(约1500字)，避免拍摄时频繁卡壳。模特可使用智能媒体服务提供的口播文稿示例，更推荐使用自己熟悉的文稿以保证表现自然。需确保现场拍摄的文稿内容不重复、可支持正常语速连续口播3分钟以上。
        </p>
        <div class="text-xl font-semibold">录制前准备</div>
        <div class="text-lg font-semibold">试拍测试</div>
        <p style="margin-top: 0">正式开机前，可进行试拍测试。确保:</p>
        <p>
          画面:模特在画面中比例合适，目光平视、不俯仰、不偏斜，五官清晰，如需做手部动作勿出画面。
        </p>
        <p>
          提词:提词器播放速度与模特语速统一，保持提词器和镜头在同一位置，避免眼睛乱瞟。
        </p>
        <p>声音:底噪低、声音清晰、音画同步。</p>
        <p>表现力:模特拍摄状态正式、自然，表情动作不僵硬。</p>
        <div class="text-lg font-semibold">正式拍摄</div>
        <p style="margin: 0">动作规范</p>
        <img class="w-full" src="../../../assets/caiji/read.png" alt="" />
        <p>
          确保现场安静，无关人员清场后即可正式开拍。拍摄过程预计3~10分钟，注意需一镜到底，中间不允许暂停或后期剪辑。
        </p>
        <p>拍摄顺序如下:</p>
        <p>
          15秒静默:开机后模特先静默约15秒，手放置于身前，保持直视镜头，可眨眼，不要张嘴或做其他面部手部动作。
        </p>
        <p>
          3-10分钟口播: 开始滚动提词器，模特直视镜头录制口播视频，要求吐字清晰。口播过程中模特的面部表情、头部及手部的自然动作可根据最终合成视频需要进行设计。注意过程中头部运动幅度和频率(左右转动、上下点头)不宜过大，避免有明确指代性意义的动作(比如摇头否定、摇手打招呼、摊手无奈等)。如有抬手动作注意避免遮挡面部颈部，避免舔嘴、吐舌、噘嘴及其他面部夸张表情。口播过程中停顿处嘴唇保持闭合，如较难做出百搭的动作，可将双手自然放置于身前或桌面上即可。
        </p>
        <div class="text-lg font-semibold">录制后处理</div>
        <p style="margin-top: 0">
          如果拍摄过程中视频首尾部模特存在位置移动，需确保人工剪辑掉不可用部分后提交(注意中间不允许剪辑》。
        </p>
        <p>
          如果希望数字人最终可叠加任意背景图输出
          视频结果，在采用绿幕作为背景录制完成后，需自行抠除底色，抠图要求如下:
        </p>
        <div class="pl-6">
          <p style="color: #f2f2f2">
            不建议完全依赖自动抠图，包括各种工具、 SDK、API、
            网页工具等。如果使用自动抠图工具， 务必在使用之后进行人工检查和修正。自动抠图可能存在的问题包括但不限于抠多抠少、边缘毛刺、视频清晰度降低等。
          </p>
          <p style="color: #f2f2f2">
            抠图的边缘应该清晰、平滑、前背景完全分离。
          </p>
          <p style="color: #f2f2f2">
            抠图的透明通道(又叫alpha通道) ，不含半透明。即前景全部为白色(255)
            背景全部为黑色(0) 。人物边缘，例如头发处，也尽量减少中间的半透明值。
          </p>
          <p style="color: #f2f2f2">
            抠图的结果，帧之间保持画面连续， 即在播放时，边缘不出现某一帧多一块、前后帧少一块的闪烁现象(通常出现在全自动抠图中)
          </p>
          <p style="color: #f2f2f2">
            按需调整色调。如果您拍摄的绿幕视频，模特面部、身体绿色反光严重，抠图后需自行进行色调修正处理。
          </p>
          <p style="color: #f2f2f2">
            抠图完成后，为确保效果无误，请在上传前
            通过视频编辑软件叠加纯色(浅色、 红色、
            深色，建议都进行尝试)背景图片确认抠图结果精准、符合要求。
          </p>
        </div>
        <p>如噪声过大请自行导入视频编辑软件降噪后再上传。</p>
        <p>
          处理中不可使用瘦脸、大眼等影响脸型、五
          官的特效。导出时请关注码率等参数，保证导出视频的清晰度。
        </p>
        <div class="text-lg font-semibold">提交材料清单</div>
        <p style="margin-top: 0">最终您需要提交的文件为一个完整视频文件及形象预览照。</p>
        <div class="text-lg font-semibold">视频文件</div>
        <p style="margin-top: 0">
          训练视频的尺寸比例为横屏16.9或竖屏 9:16,分辨率要求1080P，帧率为30 PS,
          视频时长3~12分钟， 大小不超过40 GB。
        </p>
        <p>
          如后期需合成任意背景，需自行抠图后导出带透明通道的视频文件(
          支持WebM或MOV 两种格式) ; 如直接使用拍摄时的实景背景，则导出不带透明通道的MP4格式视频文件。
        </p>
        <div class="text-lg font-semibold">头像文件</div>
        <p style="margin-top: 0">
          上传头像文件的目的是便于您未来预览并对应形象，要求头像文件比例为1:1。
        </p>
        <p>
          如果采用绿幕录制需对头像文件进行抠底处理，导出带透明通道的PNG格式的文件。
        </p>
        <p>如果采用实景录制，提交的头像文件和绿幕录制类似，但无需抠底。</p>
        <div class="text-lg font-semibold">视频文件自检Checklist</div>
        <p style="color: #a1533f; margin-top: 0">重要:请在提交前逐项检查，确保提交的视频符合要求。</p>
        <div class="text-lg font-semibold">视频文件画面</div>
        <p style="margin-top: 0">模特在视频中人头朝上方。</p>
        <p>模特始终表情姿态保持自然放松，不紧绷或僵硬。</p>
        <p>未出现除模特外的第一人脸(包括真人或其他物体上显示的人像)。</p>
        <p>模特身体及头部末进行大幅移动或大幅转动。</p>
        <p>模特头部、手部动作始终不出画面，手部动作始终不遮挡面部颈部。</p>
        <p>模特面部光照均匀、五官及人脸轮廓清晰、 朱被刘海或头发遮挡。</p>
        <p>模特眼神始终保持看向镜头，眨眼频率正常，无乱瞟或斜视情况。</p>
        <p>前15秒模特静默时嘴唇闭合，面部表情自然。</p>
        <p>
          模特说话时不磕巴，口齿清晰、 唇形自然、 牙齿清晰，停顿时嘴唇闭合。
        </p>
        <p>无剪辑拼接画面，无明显跳帧情况。</p>
        <p>无明显瘦脸、大眼等影响五官的特效。</p>
        <p>如自行抠图，无多抠或误抠情况。叠加纯色背景，抠图边缘无颜色渐变。</p>
        <div class="text-lg font-semibold">视频文件声音</div>
        <p style="margin-top: 0">声音清晰无明显回声/混响、低噪音、音画同步。</p>
        <p>模特无咳嗽、清嗓等干扰性声音，未出现第二人声。</p>
        <p>模特发音标准、未使用方言。</p>
      </div>
    </div>

    <van-button v-if="leftTime" type="danger" size="large" block disabled
      >{{ leftTime }}s 我已知悉</van-button
    >
    <van-button
      v-else
      type="success"
      size="large"
      block
      icon="success"
      @click="router.replace({ name: 'caiji-rx-name' })"
      >我已知悉</van-button
    >
  </div>
</template>

<style lang="scss" scoped>
.title {
  font-size: 18px;
  color: #ffffff;
}
.text {
  font-size: 16px;
  color: gray;
}
.content {
  // letter-spacing: 2px;
  p {
    font-size: 16px;
    color: #a3a3a7;
    line-height: 26px;
    margin: 28px 0;
  }
}
</style>