人工智能离前端并不远 一步步教你开发一个机器学习APP（附源码）

摘要：最重要的是，我的代码全部以实现，是时候让前端工程师们在人工智能机器学习领域大展身手了。千万不要被表象所困扰，更不要被人工智能机器学习的标签所迷惑。基于同样由计算机视觉科学家开发的成熟且高度可扩展的深度学习技术，每天能够分析数十亿张图像。

最近HBO电视网推出的美剧《硅谷Silicon Valley》席卷全球，里面有一个桥段介绍了超级有趣的iOS app－ Not Hotdog。你甚至可以在APP Store上下载到它。

受启发于此，我打算开发一个实现同样功能的“机器人”：用户只需要上传任何一张图片，马上就可以得到反馈，告诉你这张图片的内容是不是一个热狗。最重要的是，我的代码全部以JS实现，是时候让前端工程师们在人工智能／机器学习领域大展身手了。

这个APP以Twitter为宿主，基于Twitter Bot机器人：任何Twitter用户都可以发布一张图片，并且在上传描述文字中加入“@IsItAHotdog”，就能立即得到回复。就像大陆常用的微博加入"＃"描述符一样简单。

千万不要被表象所困扰，更不要被“人工智能／机器学习”的标签所迷惑。其实实现方式和原理非常简单。

首先，我forked @BryanEBraun’s 的开源作品Twitter bot，它基于NodeJS，Twitter Bot译为机器人：会定时发推，或随机回复。

官方介绍内容也非常简洁明了：

This is a simple twitter bot, designed to retweet the contents of a twitter list.

借助这个工具，接下来我的工作就是对提到"IsItAHotdog"的推文（即含有IsItAHotdog标签），作出回应。

在安装 tuiter NPM包之后，代码中引入依赖，并加入：

 var tu = require("tuiter")(config.keys);
 function listen() {    
    tu.filter({        
        track: "isitahotdog"    
    }, function(stream) {        
        console.log("listening to stream");
        stream.on("tweet", onTweet);
    })
}

当然，我们只对含有图片的推文进行处理：

  if(tweet.entities.hasOwnProperty("media") && tweet.entities.media.length > 0)

最后，我们把结果写进推文回复中：

tu.update({
    status: "@" + tweet.user.screen_name + message,        
    in_reply_to_status_id: tweet.id_str    
}, onReTweet);

以上只是介绍了劫持推文，发布回复的内容。那么回复的结果应该怎么获得呢？我们怎么知道图片是不是热狗呢？这就到了最重要的一步。

熟悉深度学习的朋友可能会了解，接下来我们可能需要收集图片，并用Keras搭建CNN常用神经网络。其中Keras是一个兼容Theano和Tensorflow的神经网络高级包, 高度模块化，用他来组建一个神经网络非常快速便捷。

这些内容可能中文资料并不多，仅有的一些如果大家感兴趣的话，我推荐：

对比学习用 Keras 搭建 CNN RNN 等常用神经网络

Basic Machine Learning and Deep Learning

但是这些深度学习的内容，可能很多前端工程师并不是太了解，那么我们就得重新修炼才能玩转这一切吗？

别急，现在就可以开始！这里我给大家安利一下AWS Rekognition，我们的APP也是基于AWS Rekognition来完成。

Amazon Rekognition 是一种让您能够轻松为应用程序添加图像分析功能的服务。利用 Rekognition，您可以检测对象、场景和面孔，可以搜索和比较面孔，还可以识别图像中的不当内容。借助 Rekognition 的 API，您可以快速为应用程序添加基于深度学习的复杂视觉搜索和图像分类功能。

换句话说，“不了解机器学习，简单的调用几个API都应该会吧。”

Amazon Rekognition基于同样由Amazon计算机视觉科学家开发的成熟且高度可扩展的深度学习技术，每天能够分析数十亿张 Prime Photos 图像。

说到这里可能有些绕，其实来看下代码，非常的简单：

 var params = {
     Image: { 
         Bytes: body
     },
     MaxLabels: 20,
     MinConfidence: 70
 };
  
 rekognition.detectLabels(params, function(err, data) {
    if (err) console.log(err, err.stack); // an error occurred
    else {
        console.log(data);           // successful response
        var isItAHotdog = false;
        for (var label_index in data.Labels) {
            var label = data.Labels[label_index];
            if(label["Name"] == "Hot Dog") {
               if(label["Confidence"] > 85) {
                    isItAHotdog = true;
                    tweetBasedOnCategorization(tweet, true);
                }
            }
        }
        if(isItAHotdog == false) {
            tweetBasedOnCategorization(tweet, false);
        }
    }
});

我把推文附带的图片下载到自己的服务器机器上，然后通过AWS Node SDK传递给Rekognition，并设置相应的参数，包括置信区间等。
最后，在回调中获得最终结果。

让我们来看一组测试结果吧：

这一切的开发过程都是非常的简单，如果你想看到源码，我fork了一份，并加入了中文注解。请点击这里查看源码。

本文翻译自Building Silicon Valley’s Hot Dog App in One Night，对于原文进行了部分扩展。

Happy Coding!

最后，可耻地做一波广告：

受到gitChat的邀请，我要开分享了。形式类似知乎Live，但是这个平台我感觉少了浮躁而更加专业。
主题内容为：面对前端六年历史代码，如何接入并应用ES6解放开发效率。

我邀请了资深前端专家，社区网红@颜海镜同我一起，详情介绍点击这里。

微信扫描下方二维码，即可参加：

PS: 作者Github仓库，欢迎通过代码各种形式交流。