import React, { useEffect, useState } from 'react';
import Slider from 'react-slick';
import './index.scss';


const arithmeticArr = [
  {
    name: "MMDetection算法演示",
    describe: "MMDetection 是 OpenMMLab 中的通用目标检测算法平台，目前已经支持了 70+ 算法和 500+ 个预训练模型，支持目标检测、实例分割和全景分割。是 OpenMMLab 算法库中的MMDetection3D 和 MMRotate 的核心依赖，为 MMOCR、MMPose 和 MMTracking 提供了检测组件",
    source: 'https://www.gitlink.org.cn/api/attachments/388003',
    type: 'img',
  },
  {
    name: "MMPose算法演示",
    describe: "MMPose 是 OpenMMLab 中的姿态估计算法库，目前已经支持了近 30 个算法和 300+ 预训练模型，涵盖了人体、人脸、人手、动物等多类目标的姿态估计。秉承 OpenMMLab 系列的结构化框架设计，MMPose 很适合作为算法复现和创新的平台",
    // source: 'https://www.gitlink.org.cn/preview/d2d62f65d08a22bcc257c5a24cf750fa_1654781749389.mp4',
    source: 'https://www.gitlink.org.cn/api/attachments/388257.mp4',
    type: 'mp4',
    img: 'https://www.gitlink.org.cn/api/attachments/388256'
  },
  {
    name: "MMOCR算法演示",
    describe: "MMOCR 作为 OpenMMLab 家族的一员，支持众多 OCR 相关的模型，涵盖了文本检测、文本识别以及关键信息提取等多个主要方向。通过在 MMOCR 中复现相关算法，你将可以了解到 OCR 领域的前沿知识，熟练掌握 MM 系列框架的整体流程，并积累深度学习相关的学术及工程经验",
    source: 'https://www.gitlink.org.cn/api/attachments/388005',
    type: 'img',
  },
  {
    name: "MMGeneration算法演示",
    describe: "MMGeneration 是一个图像和视频生成算法库，支持多种生成模型如图像生成，条件生成，图像转换的训练和测试，同时也提供了丰富的应用",
    source: 'https://www.gitlink.org.cn/api/attachments/387955',
    type: 'img',
  },
  {
    name: "MMRotate算法演示",
    describe: "MMRotate 是 OpenMMLab 中基于 PyTorch 的旋转框目标检测工具箱。目前支持了旋转框检测领域主流的数据集和 SOTA 算法",
    source: 'https://www.gitlink.org.cn/api/attachments/387957',
    type: 'img',
  },
  {
    name: "MMDetection3D算法演示",
    describe: "MMDetection3D 是 OpenMMLab 中的通用 3D 感知算法平台，目前已经支持了室内外多个主流数据集的单模态/多模态 3D 检测和点云分割算法。同时 MMDetection3D 可以无缝使用 MMDetection 中的所有组件，为多模态感知提供了丰富的基础模块",
    source: 'https://www.gitlink.org.cn/api/attachments/387953',
    type: 'img',
  },
  {
    name: "MMEditing算法演示",
    describe: "MMEditing是面向底层视觉工具箱，集成了超分辨率、视频插帧、补图、抠图等方向大量SOTA模型，且持续吸纳新的底层视觉模型",
    source: 'https://www.gitlink.org.cn/api/attachments/388004',
    type: 'img',
  },
  {
    name: "MMFlow算法演示",
    describe: "MMFlow是一款基于 PyTorch 和 MMCV 的光流估计开源工具箱，提供了多个 SOTA 光流估计算法，并支持光流领域主流学术数据集，以及光流可视化和评估方法",
    source: 'https://www.gitlink.org.cn/api/attachments/388258',
    type: 'img',
  },
  {
    name: "MMClassification",
    describe: "MMClassification 是一款基于 PyTorch 的开源图像分类工具箱，丰富的模型库支持40+预训练模型、主流数据集支持及丰富的训练技巧与策略",
    source: 'https://www.gitlink.org.cn/api/attachments/387952',
    type: 'img',
  },
];

let setting = {
  infinite: true,
  dots: true,
  speed: 750,
  slidesToShow: 1,
  slidesToScroll: 1,
  pauseOnDotsHover: true,
  autoplaySpeed: 10000,
  // pauseOnFocus: true,
  centerMode: true,
  centerPadding: "0px",
  autoplay: true,
  arrows: false,
}
function SliderLeft() {

  return (
    <Slider {...setting}>
      {arithmeticArr.map(item => {
        return <div className="slider_content" key={item.name}>
          <div className={`slider_img ${item.name.split('算法演示')[0]}`} >
            {item.type == 'img' && <img src={item.source} />}
            {item.type == 'mp4' && <video className="introduce-video" src={item.source} poster={item.img} autoPlay loop muted>您的浏览器不支持 video 标签。</video>}

            {
              item.name === 'MMClassification' && <div className="point">
                <div className="point_item">40+预训练模型</div>
                <div className="point_item">主流数据集支持</div>
                <div className="point_item">丰富的训练技巧与策略</div>
              </div>
            }

            {
              item.name === 'MMDetection3D算法演示' && <div className="point">
                <div className="point_item">7 个数据集</div>
                <div className="point_item">17 种不同算法</div>
                <div className="point_item">80+ 个预训练模型</div>
              </div>
            }
          </div>
          <div className="slider_tit ellipsis-1">
            {item.name}
          </div>
          <div className="slider_content">
            {item.describe}
          </div>
        </div>
      })}
    </Slider>
  )
}
export default SliderLeft;

