2019年12月

为什么需要?

我们在上一篇Ubuntu深度学习的相关配置中最后讲到,将工作目录下的文件装载到了容器之下,这样我们在主机中编写一个文件,如tf.py。在容器中执行,需要输入以下命令。

docker exec tf python './tf.py' 

这样每改一下文件,想要看效果的话,就需要输入以上命令。而且,还不方便调试。然后,我就在想能不能做到像我平常写代码那样,在VScode中,点一下就运行,而且可以调试呢?于是便有了本文。

准备工作

  • 安装好VScode并且保证互联网连接正常。然后将工作目录装载到容器的/root/Project目录下,不然/tmp的文件实在是太乱七八糟了。
docker run --gpus all -itd --name tf --rm -v ~/Project:/root/Project  tensorflow/tensorflow:latest-gpu-py3

操作流程

首先安装两个插件dockerRemote Development

VScode的docker插件

上图中可以看到tensorflow的容器已经处于运行中了,然后再打开Remote Development

Remote Development

显示有一个容器待连接,然后选择它,打开容器中的Project文件夹

VScode in Container

然后安装Python插件和调试工具,修改tf.py文件

import tensorflow as tf
print("hello tensorflow")

点击右边的运行图标,成功输出。

run tensorflow

打开主机文件

docker主机文件同步

发现修改也已经同步,Over,现在可以愉快的写代码了。

使用 Docker 时需要首先下载一个官方镜像,例如 mysql、wordpress。然而由于网络原因,下载一个 Docker 官方镜像可能会需要很长的时间,甚至下载失败。为此,阿里云容器镜像服务提供了官方的镜像站点,从而加速官方镜像的下载。

登陆阿里云容器镜像服务

阿里云容器镜像服务
由上图可以看到,阿里给我们分配的专享加速域名。

配置docker源

针对Docker客户端版本大于 1.10.0 的用户

可以通过修改daemon配置文件/etc/docker/daemon.json来使用加速器

不过默认没有这个文件的,所以我们需要新建一个

新建daemon.json

sudo mkdir -p /etc/docker
sudo touch /etc/docker/daemon.json

设置源地址

{
    "registry-mirrors": ["<your accelerate address>"]
}            

重启生效

sudo systemctl daemon-reload
sudo systemctl restart docker            

Ubuntu使用阿里云加速docker pull
大功吿成!!

安装软件未满足依赖关系

安装软件curl时提示以下内容
下列软件包有未满足的依赖关系:
 curl : 依赖: libcurl4 (= 7.64.0-2ubuntu1.2) 但是 7.65.3-1ubuntu3 正要被安装
E: 无法修正错误,因为您要求某些软件包保持现状,就是它们破坏了软件包间的依赖关系。

这是由于版本不符的导致的,可能是以前卸载的时候未卸载干净。所以我们需要使用purge选项来重新卸载一次。

sudo apt-get purge libcurl4

然后重新安装,解决问题!!

Ubutnu安装软件未满足依赖关系

执行bash命令提示bash: /dev/fd/63: 没有那个文件或目录

bash: /dev/fd/63: 没有那个文件或目录

原因:<(…)运算符称为进程替换,是运行命令的一种方式,其输出进入匿名管道。这就是/dev/fd/63。其思想是允许外部命令(这里是bash)将另一个命令输出视为一个文件。通常形式是使用<将伪文件对象重定向到bash的输入流中。

解决方案,使用两个<code><</code>

解决方案,使用两个<

用户不在sudo列表

别问为什么出现这个问题,,,

解决方法

  1. 重启进恢复模式
  2. 选择root用户
  3. 添加用户至sudo组
adduser username sudo

系统没有设置图标

ubuntu没有设置.png

天哪,为啥我的电脑老是出现些奇怪的问题。

解决方法

  1. -sudo apt update-
  2. sudo apt install gnome-control-center

系统修复设置

tensorflow

安装NVIDIA驱动

  1. 查看显卡信息
ubuntu-drivers devices
  1. 自动安装显卡驱动
sudo ubuntu-drivers autoinstall
  1. 确认是否安装成功
nvidia-smi

安装docker

安装文档

使用阿里源安装

# step 1: 安装必要的一些系统工具
sudo apt-get update
sudo apt-get -y install apt-transport-https ca-certificates curl software-properties-common
# step 2: 安装GPG证书
curl -fsSL http://mirrors.aliyun.com/docker-ce/linux/ubuntu/gpg | sudo apt-key add -
# Step 3: 写入软件源信息
sudo add-apt-repository "deb [arch=amd64] http://mirrors.aliyun.com/docker-ce/linux/ubuntu $(lsb_release -cs) stable"
# Step 4: 更新并安装Docker-CE
sudo apt-get -y update
sudo apt-get -y install docker-ce

# 安装指定版本的Docker-CE:
# Step 1: 查找Docker-CE的版本:
# apt-cache madison docker-ce
#   docker-ce | 17.03.1~ce-0~ubuntu-xenial | http://mirrors.aliyun.com/docker-ce/linux/ubuntu xenial/stable amd64 Packages
#   docker-ce | 17.03.0~ce-0~ubuntu-xenial | http://mirrors.aliyun.com/docker-ce/linux/ubuntu xenial/stable amd64 Packages
# Step 2: 安装指定版本的Docker-CE: (VERSION例如上面的17.03.1~ce-0~ubuntu-xenial)
# sudo apt-get -y install docker-ce=[VERSION]
tips: 由于使用的是19.10版本,暂时没有对应的源,故手动将step 3切换至19.04
sudo add-apt-repository "deb [arch=amd64] http://mirrors.aliyun.com/docker-ce/linux/ubuntu disco stable"

安装NVIDIA Container Toolkit

Add the package repositories

distribution=$(. /etc/os-release;echo $ID$VERSION_ID)
curl -s -L https://nvidia.github.io/nvidia-docker/gpgkey | sudo apt-key add -
curl -s -L https://nvidia.github.io/nvidia-docker/$distribution/nvidia-docker.list | sudo tee /etc/apt/sources.list.d/nvidia-docker.list
sudo apt-get update && sudo apt-get install -y nvidia-container-toolkit
sudo systemctl restart docker

测试

sudo docker run --gpus all -it --rm tensorflow/tensorflow:latest-gpu-py3    python -c "import tensorflow as tf; print(tf.reduce_sum(tf.random.normal([1000, 1000])))"

装载工作目录至容器

docker run --gpus all -itd --name tf --rm -v $PWD:/tmp -w /tmp tensorflow/tensorflow:latest-gpu-py3

以上命令在后台创建了一个支持GPU的tensorflow:latest-gpu-py3容器,将其命名为tf(方便后面容器操作),并将工作目录切换至主机当前目录。

装载工作目录至tensorflow容器

参考资料

Ubuntu 18.04 安装NVIDIA驱动 实践
tensorflow官网

介绍

无监督学习允许我们在处理问题时几乎不知道结果应该是什么样子,我们可以从数据中获得结构,而不必知道变量的作用。我们可以根据数据中变量之间的关系对数据进行聚类,从而得到这种结构。在无监督学习中,没有基于预测结果的反馈。也就是说,机器可以在你提供的数据中主动的去分析,总共有几类?哪些数据属于什么类?

效果展示

列表顺序加载动画

本文会讲述如何使用scss/sass在微信小程序中实现列表顺序加载的动画。

所用的css特性

CSS animations

CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。

相较于传统的脚本实现动画技术,使用CSS动画有三个主要优点:

  1. 能够非常容易地创建简单动画,你甚至不需要了解JavaScript就能创建动画。
  2. 动画运行效果良好,甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用JavaScript实现的动画通常表现不佳(除非经过很好的设计)。
  3. 让浏览器控制动画序列,允许浏览器优化性能和效果,如降低位于隐藏选项卡中的动画更新频率。

css animations的属性和子属性见https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations#%E9%85%8D%E7%BD%AE%E5%8A%A8%E7%94%BB

可主要分为两大部分,动画的实现形式和动画的属性规则。

以下仅列出本文所用的属性。

animation-timing-function

animation-timing-function 规定动画的速度曲线。

速度曲线

animation-delay

顾名思义,设置动画的持续时间,单位秒

animation-fill-mode

animation-fill-mode 属性规定动画在播放之前或之后,其动画效果是否可见。

animation-fill-mode

使用keyframes定义动画序列

keyframes就是一个描述关键帧的属性,通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。

因为动画的时间设置是通过CSS样式定义的,关键帧使用percentage来指定动画发生的时间点。0%表示动画的第一时刻,100%表示动画的最终时刻。因为这两个时间点十分重要,所以还有特殊的别名:from和to。这两个都是可选的,若from/0%或to/100%未指定,则浏览器使用计算值开始或结束动画。

示例

@keyframes list {
        0% {
            transform: scale(0);
        }

        100% {
            transform: scale(1);
        }
    }

如上代码所示,定义了一个@keyframe名字叫list,在动画开始时使用缩放0%,结束时缩放100%。那么它在整个动画的过程中,便会根据浏览器的性能展示一个从0%-100%渐变的动画。是不是根据有点意思?当然,你也可包含设置任何额外可选的关键帧,描述动画开始和结束之间的状态,比如45%。

animation.gif

至此我们已经实现了组件显示时逐渐放大的效果

所用的scss特性

以下为简介,详细内容请转至官方文档

嵌套规则 (Nested Rules)

scss/Sass允许将一个 CSS 样式嵌套进另一个样式中,内层样式仅适用于外层样式的选择器范围内。

引用父选择器:&

你可以 & 字符来明确地表示插入指定父选择器。

变量: $(Variables: $ )

以美元符开头,可当变量使用。

@mixin混入指令 (Mixin Directives)

混入(mixin)允许您定义可以在整个样式表中重复使用的样式,而避免了使用无语意的类(class),比如 .float-left。混入(mixin)还可以包含所有的CSS规则,以及任何其他在Sass文档中被允许使用的东西。
他们甚至可以带arguments,引入变量,只需少量的混入(mixin)代码就能输出多样化的样式。

插值:#{}(Interpolation: #{})

你可以通过 #{} 插值语法在选择器和属性名中使用 SassScript 变量:

@for

顾名思义,循环,要留意一下tothrough的区别

引用混合样式:@include (Including a Mixin: @include)

实现方式

wxml文件

<view class="list__item">
<view>...</view>
</view>

编译前的scss/sass

    .list {
        &__item {
            animation: list 1s ease both;
        }
    }

    @keyframes list {
        0% {
            transform: scale(0);
        }

        100% {
            transform: scale(1);
        }
    }

    @mixin item($num) {
        $waitTime: ($num)*0.2;
        animation-delay: #{$waitTime}s;
    }

    @for $i from 1 through 7 {
        .list__item:nth-child(#{$i}) {
            @include item($i);
        }
    }

less版

// list动画
    .list__item {
        animation: list .8s ease both
    }

    @keyframes list {
        0% {
            transform: scale(0);
        }

        100% {
            transform: scale(1);
        }
    }

    .generate-columns(7);

    .generate-columns(@n, @i: 1) when (@i =< @n) {
        .list__item:nth-child(@{i}) {
            animation-delay: @i * 0.2;
        }

        .generate-columns(@n, (@i + 1));
    }

编译后的css

.list__item {
  -webkit-animation: list 1s ease both;
          animation: list 1s ease both;
}
@-webkit-keyframes list {
0% {
    -webkit-transform: scale(0);
            transform: scale(0);
}
100% {
    -webkit-transform: scale(1);
            transform: scale(1);
}
}
@keyframes list {
0% {
    -webkit-transform: scale(0);
            transform: scale(0);
}
100% {
    -webkit-transform: scale(1);
            transform: scale(1);
}
}
.list__item:nth-child(1) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.list__item:nth-child(2) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.list__item:nth-child(3) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.list__item:nth-child(4) {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.list__item:nth-child(5) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.list__item:nth-child(6) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
.list__item:nth-child(7) {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}

列表顺序加载动画效果展示

参考资料

使用CSS动画
CSS3 animation-timing-function 属性
sass中文文档