index.js

import React, { Component } from 'react';
import './index.scss'

class InAction extends Component {
  state = {
    projects: [
      {
        image: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/project_1.png',
        title: ' 基于KNN的电影推荐系统',
        detail: '基于Surprise库使用movielens数据集构建电影推荐系统。在此之前，你还将学习K近邻算法、协同过滤与推荐系统的本质。'
      },
      {
        image: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/project_2.png',
        title: ' 使用线性回归预测股票走势',
        detail: '基于Sklearn中的线性回归实现Google股票走势预测。在此之前，你还将学习线性回归算法的相关细节与对应的代码实战。'
      },
      {
        image: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/project_3.png',
        title: ' 基于LR的广告点击率预估',
        detail: 'LR曾是各大互联网公司在CTR预估上使用的主流模型。它有着可解释性强、易于并行化、便于在线学习等不可替代的优势。'
      },
      {
        image: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/project_4.png',
        title: '基于朴素贝叶斯的垃圾邮件过滤',
        detail: '文本分类是NLP领域较为常见的任务，本项目使用朴素贝叶斯对垃圾邮件和正常邮件进行分类，涉及分词和正则表达式的内容。'
      },
      {
        image: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/project_5.png',
        title: ' 基于决策树的用户流失分析预测',
        detail: '用户流失分析对于提升用户活跃度有重要的意义，本项目基于Sklearn的决策树算法实现流失用户预测，并对决策树进行可视化。'
      },
      {
        image: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/project_6.png',
        title: ' 利用随机森林评估特征重要性',
        detail: '分析特征重要性对于机器学习建模有重要的意义，本项目基于Sklearn中的随机森林算法评估UCI葡萄酒数据的特征重要性。'
      },
      {
        image: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/project_7.png',
        title: ' 基于K-means实现图像分割',
        detail: '基于Sklearn中的Kmeans算法实现图像分割，将一幅图像分解成互不相交区域的集合，本质上是一种像素聚类的过程。'
      },
      {
        image: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/mlCourse/m/project_8.png',
        title: '基于SVM的人脸识别',
        detail: '人脸识别是计算机视觉领域的一项重要技术，本项目基于Skeran中的SVM算法在Olivetti人脸数据集上进行简单的人脸分类。'
      },
    ],
    showAll: false,
    initialShowCount: 8
  }

  render() {
    const {showAll, initialShowCount} = this.state

    return (
      <div id={'in-action'}>
        <h2>项 / 目 / 实 / 战</h2>
        <ul>
          {
            this.state.projects.map((item, i) => {
              if (i >= initialShowCount && !showAll) {
                return null
              }
              return <li key={i}>
                <div className={'project-image'}>
                  <img src={item.image} alt=""/>
                </div>
                <div className={'des'}>
                  <div className="title">
                    <span>{i + 1}</span>
                    <span>{item.title}</span>
                  </div>
                  <p className={'detail'}>{item.detail}</p>
                </div>
              </li>
            })
          }
          {/*<li>
            {
              !showAll
                ? <button onClick={() => {
                  this.setState({
                    showAll: true
                  })
                }}>
                  展开更多
                  <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/zhankai.png" alt=""/>
                </button>
                : <button onClick={() => {
                  this.setState({
                    showAll: false
                  })
                }}>
                  收起
                  <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/h5_python_class/shouqi.png" alt=""/>
                </button>
            }
          </li>*/}
        </ul>
      </div>
    );
  }
}

export default InAction;