index.js 4.38 KB
Newer Older
zhanghaozhe committed
1 2 3 4 5 6 7
import React, { Component } from 'react';
import './index.scss'

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

  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}>
zhanghaozhe committed
65 66 67
                <div className={'project-image'}>
                  <img src={item.image} alt=""/>
                </div>
zhanghaozhe committed
68 69 70 71 72 73 74 75 76 77
                <div className={'des'}>
                  <div className="title">
                    <span>{i + 1}</span>
                    <span>{item.title}</span>
                  </div>
                  <p className={'detail'}>{item.detail}</p>
                </div>
              </li>
            })
          }
zhanghaozhe committed
78
          {/*<li>
zhanghaozhe committed
79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97
            {
              !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>
            }
zhanghaozhe committed
98
          </li>*/}
zhanghaozhe committed
99 100 101 102 103 104 105
        </ul>
      </div>
    );
  }
}

export default InAction;