TensorFlow.js入门（一）一维向量的学习-低调大师

TensorFlow.js入门（一）一维向量的学习

2018-07-13 490

TensorFlow的介绍

TensorFlow是谷歌基于DistBelief进行研发的第二代人工智能学习系统，其命名来源于本身的运行原理。Tensor（张量）意味着N维数组，Flow（流）意味着基于数据流图的计算，TensorFlow为张量从流图的一端流动到另一端计算过程。TensorFlow是将复杂的数据结构传输至人工智能神经网中进行分析和处理过程的系统。
TensorFlow是一个著名的开源的人工智能系统，被广泛应用于语音识别或图像识别等多项机器学习和深度学习领域。它目前支持的程序语言有： Java, Python, Go, Lua, R, JavaScript，其中2018年3 月 31 日，TensorFlow 宣布增加支持 JavaScript，并推出开源库 TensorFlow.js 。
我们将会介绍在前端开发中TensorFlow的相关内容，即TensorFlow.js的学习与应用。

Tensorflow中的一维向量及其运算

tensor 是 TensorFlow.js 的数据中心单元：由一组数值组成的一维或多维数组。在 TensorFlow.js中，一维向量的构造函数主要为：tf.tensor()和tf.tensor1d()，具体的API文档可以参考：https://js.tensorflow.org/api/0.12.0/ 。
可以用set()和get()函数分别获取和设置向量中的元素值。
一维向量的运算函数有很多，说明如下：

tf.add() 两个向量的对应元素的和
tf.sub() 两个向量的对应元素的差
tf.mul() 两个向量的对应元素的乘积
tf.div() 两个向量的对应元素的商
tf.maximum() 两个向量的对应元素的最大值
tf.minimum() 两个向量的对应元素的最小值
tf.pow() 两个向量的对应元素的幂

以上只是一部分，还有更多的函数如： tf.abs(), tf.sin(), tf.cos(), tf.tan(), tf.tan()等。

简单例子

在网页中引入TensorFlow.js需要添加“script”标签，如下：

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.12.0"> </script>

我们通过一个小小的例子，来说明在TensorFlow.js中一维向量的使用方法，其完整的HTML代码如下：

<html>
  <head>
    <!-- Load TensorFlow.js -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.12.0"> </script>
    <!-- Place your code in the script tag below.-->
    <script>
        function show(){
            var a = [1,2,3,4,5];
            var b = [2,3,4,5,6];
            const vector1 = tf.tensor(a);
            const vector2 = tf.tensor(b);
            const res = vector2.add(vector1);
            document.getElementById("first_element").innerHTML = "第一个元素为" + res.get(0)+ ".";
            document.getElementById("whole_array").innerHTML = "向量："+res;
        }   
    </script>

  </head>

  <body>
  <p id="first_element"></p>
  <p id="whole_array"></p>
  <button onclick="show()" id="show" value="show">show</button>
  </body>

</html>

显示的网页如下图：

实战

在刚才的例子中，我们仅仅只给出了一个简单的例子，那么，如果要实现稍微复杂一点的功能呢，比如下面的网页：

我们可以用TensorFlow.js来实现这些向量运算。该网页的完整的HTML代码如下：

<html>
  <head>
    <!-- Load TensorFlow.js -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.12.0"> </script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="tf_result.js"></script>
  </head>

<body>
    <center>
    <h2>TensorFlow向量（一维）学习</h2>
    <br><br>
    <div style="width:600px">

        <div>
            <label class="col-sm-2 control-label">向量运算</label>
            <div class="col-sm-10">
                <label class="radio-inline">
                <input type="radio" name="optionsRadiosinline" value="add" checked="checked"> 加
                </label>
                <label class="radio-inline">
                <input type="radio" name="optionsRadiosinline"  value="sub"> 减
                </label>
                <label class="radio-inline">
                <input type="radio" name="optionsRadiosinline" value="mul"> 乘
                </label>
                <label class="radio-inline">
                <input type="radio" name="optionsRadiosinline" value="div"> 除
                </label>
                <label class="radio-inline">
                <input type="radio" name="optionsRadiosinline" value="max"> max
                </label>
                <label class="radio-inline">
                <input type="radio" name="optionsRadiosinline" value="min"> min
                </label>
                <label class="radio-inline">
                <input type="radio" name="optionsRadiosinline" value="abs"> abs
                </label>
                <label class="radio-inline">
                <input type="radio" name="optionsRadiosinline" value="sin"> sin
                </label>
                <label class="radio-inline">
                <input type="radio" name="optionsRadiosinline" value="cos"> cos
                </label>
                <label class="radio-inline">
                <input type="radio" name="optionsRadiosinline" value="tan"> tan
                </label>
                <label class="radio-inline">
                <input type="radio" name="optionsRadiosinline" value="exp"> exp
                </label>
                <label class="radio-inline">
                <input type="radio" name="optionsRadiosinline" value="log"> log
                </label>
                <label class="radio-inline">
                <input type="radio" name="optionsRadiosinline" value="sqrt"> sqrt
                </label>
                <label class="radio-inline">
                <input type="radio" name="optionsRadiosinline" value="square"> square
                </label>
                <label class="radio-inline">
                <input type="radio" name="optionsRadiosinline" value="cubic"> cubic
                </label>
                <br><br>
            </div>
        </div>

        <div>
            <label for="vector1" class="col-sm-2 control-label">向量1</label>
            <div class="col-sm-10">
            <input type="text" class="form-control" id="vector1" placeholder="向量1">
            <br>
            </div>

        </div>

        <div>
            <label for="vector2" class="col-sm-2 control-label">向量2</label>
            <div class="col-sm-10">
            <input type="text" class="form-control" id="vector2" placeholder="向量2">
            <br>
            </div>
        </div>

        <div >
            <div class="col-sm-offset-2 col-sm-10">
            <button class="btn btn-default" id="result">显示结果</button>
            <button class="btn btn-default" id="clc">清空</button>
            </div>
        </div>

    </div>

    <table class="table" style="width:600px">
        <caption id="tf">运行结果</caption>
        <tbody>
            <tr class="success" id="table">
            </tr>
        </tbody>
    </table>

    </center>
</body>
</html>

在其中我们用到了tf_result.js，其完整的JavaScript代码如下：

$(document).ready(function(){

    var flag; 
    /*
    flag = 1表示一元运算
    flag = 2表示二元运算
    */

    // 清空两个输入框的输入
    $("#clc").click(function(){
        $("#vector1").val("");
        $("#vector2").val("");
    });

    // 是否允许"向量2"输入框有输入
    $("#vector1").click(function(){
        var op = $("input[name='optionsRadiosinline']:checked").val();
        var ops = ["add", "sub", "mul", "div", "max", "min"];
        if (ops.indexOf(op) == -1)
            flag = 1;
        else
            flag = 2;

        //文本框"向量2"禁用
        if(flag == 1){
            $("#vector2").val("");
            $("input[type='text']").each(function () {
　　          $("#vector2").attr("disabled", true);
            });

        }
        //文本框"向量2"启用
        if(flag == 2){
            $("input[type='text']").each(function () {
　　          $("#vector2").attr("disabled", false);
            });
        }
    });

    // 利用tensorflow.js的运算函数，输出计算结果
    $("#result").click(function(){

        if(flag == 1){
            var vector1 = $("#vector1").val().split(',').map(Number);
        }
        if(flag == 2){
            var vector1 = $("#vector1").val().toString().split(',').map(Number);
            var vector2 = $("#vector2").val().toString().split(',').map(Number);
            if(vector1.length != vector2.length)
                alert("输入的两个向量长度不一样");
        }

        // 利用tensorflow.js的运算函数
        if( flag == 1 || ((flag == 2) && (vector1.length == vector2.length))){
            var op = $("input[name='optionsRadiosinline']:checked").val();
            const pow2 = tf.tensor(2).toInt(); // 计算平方
            const pow3 = tf.tensor(3).toInt(); // 计算三次方

            switch (op) // JavaScript的switch结构
            {
                case "add":  // 加法
                    res = tf.tensor(vector1).add(tf.tensor(vector2));
                    break;
                case "sub":  // 减法
                    res = tf.tensor(vector1).sub(tf.tensor(vector2));
                    break;
                case "mul":  // 乘法
                    res = tf.tensor(vector1).mul(tf.tensor(vector2));
                    break;
                case "div":  // 除法
                    res = tf.tensor(vector1).div(tf.tensor(vector2));
                    break;
                case "max":  // 两个向量中的最大值，element-wise
                    res = tf.tensor(vector1).maximum(tf.tensor(vector2));
                    break;
                case "min":  // 两个向量中的最小值，element-wise
                    res = tf.tensor(vector1).minimum(tf.tensor(vector2));
                    break;
                case "abs":  // 绝对值
                    res = tf.tensor(vector1).abs();
                    break;
                case "sin":  // 正弦函数
                    res = tf.tensor(vector1).sin();
                    break;
                case "cos":  // 余弦函数
                    res = tf.tensor(vector1).cos();
                    break;
                case "tan":  // 正切函数
                    res = tf.tensor(vector1).tan();
                    break;
                case "exp":  // 指数函数，以e为底
                    res = tf.tensor(vector1).exp();
                    break;
                case "log":  // 对数函数，以e为底
                    res = tf.tensor(vector1).log();
                    break;
                case "sqrt":  // 平方根
                    res = tf.tensor(vector1).sqrt();
                    break;
                case "square":  // 平方
                    res = tf.tensor(vector1).pow(pow2);
                    break;
                case "cubic":  // 三次方
                    res = tf.tensor(vector1).pow(pow3);
                    break;
                default:
                    res = tf.tensor([]);
            }


            $("#table").html(""); // 清空原有表格中的数据
            // 输入计算结果
            for(var i=0; i< res.shape; i++){
                $("tr").append("<td>"+res.get(i)+"</td>;");
            }
        }

    });

});

运行刚才的网页，效果如下：

怎么样，是不是觉得TensorFlow.js也酷酷的呢？结合TensorFlow.js以及前端网页方面的知识，我们可以给出许多酷炫的TensorFlow的应用，以后我们会慢慢讲到。本次项目的Github地址为：https://github.com/percent4/tensorflow_js_learning 。

注意：本人现已开通两个微信公众号：因为Python（微信号为：python_math）以及轻松学会Python爬虫（微信号为：easy_web_scrape），欢迎大家关注哦~~

微信关注我们

原文链接：https://yq.aliyun.com/articles/615180

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

Hello,Java女神

对java的感情真是又爱又恨，纠缠了很多年，也没有什么结果。第一阶段：C++转行，开始学习Java 第二阶段：Java Web，jsp+servlet 第三阶段：Struct Spring 第四阶段：Spring boot 几乎每一阶段都要从Hello World开头，百度大量的配置，之后会用2、3个月就放弃了。今天又从头开始，没有明确的目的，计划几个专题： Spring boot /Spirng Cloud Java 高并发 Spark的开发入门配置 Intellij IDEA maven maven 可以非常快速创建好项目目录，下载依赖包，处理包版本依赖问题。创建可执行jar包。 maven 安装安装maven是最基础的步骤，这里不得不说Apache，加入Apache的开源项目后可以访问xxx.apache.org。可以从百度搜到maven的安装过程，我们还是希望按官网的安装步骤。 Maven官网选择 Install，只需要两步。下载解压配置PATH路径，添加bin路径 maven 配置这里也可以选择百度文章，选择首页的Configure，通过官方说明进行配置。 ...

2018-07-14

684

本文首发于我的个人博客：尾尾部落题目描述输入一个正整数数组，把数组里所有数字拼接起来排成一个数，打印能拼接出的所有数字中最小的一个。例如输入数组{3，32，321}，则打印出这三个数字能排成的最小数字为321323。解题思路先将数组转换成字符串数组，然后对字符串数组按照规则排序，最后将排好序的字符串数组拼接出来。关键就是制定排序规则：若ab > ba 则 a > b 若ab < ba 则 a < b 若ab = ba 则 a = b 解释说明： a = 21 b = 2 因为 212 < 221, 即 ab < ba ，所以 a < b 所以我们通过对ab和ba比较大小，来判断a在前或者b在前的。参考代码 import java.util.ArrayList; import java.util.Arrays; import java.util.Comparator; public class Solution { public String PrintMinNumber(int [] numbers) { int len = nu...

2018-07-14

523

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。