我認(rèn)為這個(gè)社會(huì)發(fā)展地很快，但對(duì)于小孩以及青少年的保護(hù)也越來(lái)越弱了。因此，我覺(jué)得社會(huì)有必要也有義務(wù)去設(shè)立一些規(guī)則使小朋友盡可能少受到不良信息的傷害。我覺(jué)得小事先從我做起，我先來(lái)開(kāi)發(fā)一款屏蔽黃圖的瀏覽器擴(kuò)展產(chǎn)品。

當(dāng)大家看到這個(gè)標(biāo)題時(shí)可能會(huì)問(wèn)：什么是負(fù)體驗(yàn)的產(chǎn)品？

其實(shí)很簡(jiǎn)單：就是用了這款產(chǎn)品，在某些場(chǎng)景下你可能得到不良的體驗(yàn)。大家心里可能會(huì)有100個(gè)問(wèn)號(hào)，那你開(kāi)發(fā)這款產(chǎn)品出來(lái)干嘛？

答案也很簡(jiǎn)單，我覺(jué)得開(kāi)發(fā)這款產(chǎn)品是一件非常有必要的事情。

今年我大部分的時(shí)間都花在研究人工智能和寫書上，在快要到10月份的時(shí)候，我大學(xué)畢業(yè)時(shí)立下的“一年開(kāi)發(fā)一個(gè)產(chǎn)品”目標(biāo)還沒(méi)開(kāi)始實(shí)現(xiàn)，我覺(jué)得不能再這樣拖下去了，于是開(kāi)始構(gòu)思今年要做什么。

我認(rèn)為獨(dú)立完成一個(gè)項(xiàng)目是一個(gè)很好的學(xué)習(xí)機(jī)會(huì)，而且我不愿意錯(cuò)過(guò)人工智能這個(gè)浪潮，所以我決定今年的產(chǎn)品是跟人工智能有關(guān)的。在10月的時(shí)候我開(kāi)始去學(xué)習(xí)深度學(xué)習(xí)相關(guān)內(nèi)容，在這里要推薦一本非常不錯(cuò)的書籍，名叫《Python深度學(xué)習(xí)》，它是Keras之父的最新之作，深入淺出地介紹了深度學(xué)習(xí)的相關(guān)知識(shí)和工程。

從10月份到現(xiàn)在，雖然我的知識(shí)還是只有半桶水，但我深深覺(jué)得，深度學(xué)習(xí)比前端開(kāi)發(fā)和手機(jī)開(kāi)發(fā)有趣多了，如果5年前已有相關(guān)知識(shí)的話，我現(xiàn)在應(yīng)該不是一名交互設(shè)計(jì)師了……

Python深度學(xué)習(xí)

我究竟要做什么產(chǎn)品？

這個(gè)問(wèn)題困擾了我好幾天。

我希望這款產(chǎn)品開(kāi)發(fā)成本不是很高而且是有意義的；目前Google已經(jīng)開(kāi)源了Tensorflow.JS，它可以讓開(kāi)發(fā)者在瀏覽器上進(jìn)行深度學(xué)習(xí)的運(yùn)算和開(kāi)發(fā)，基于這三個(gè)原因我把目標(biāo)鎖定在開(kāi)發(fā)一款瀏覽器擴(kuò)展上（因?yàn)槲艺J(rèn)為從零開(kāi)發(fā)一款手機(jī)AI應(yīng)用不太實(shí)際，而且沒(méi)有人會(huì)因?yàn)锳I兩個(gè)字而去使用你的產(chǎn)品）。

目前Tensorflow.JS已經(jīng)逐漸完善，并且提供了人臉識(shí)別、肢體識(shí)別等API，但精度不是很高，而且每個(gè)用戶的電腦前置攝像頭拍攝效果很差，所以我想象不出這些API對(duì)我來(lái)說(shuō)有什么用；在某天和別人聊到鑒黃技術(shù)的時(shí)候，我靈機(jī)一動(dòng)并確定了這個(gè)產(chǎn)品要做什么：我要做一款A(yù)I鑒黃瀏覽器擴(kuò)展，它能屏蔽掉網(wǎng)頁(yè)上的黃圖。

現(xiàn)在大家應(yīng)該知道這為什么是一款負(fù)體驗(yàn)的產(chǎn)品了，因?yàn)樗芸赡軙?huì)讓某些用戶在瀏覽網(wǎng)頁(yè)過(guò)程中產(chǎn)生負(fù)面體驗(yàn)：黃圖被屏蔽了。

為什么我要做這款產(chǎn)品？

回想過(guò)去，我們以前獲取信息是很不方便的，沒(méi)有相關(guān)途徑可能都不知道怎么去找張黃圖（我認(rèn)為這對(duì)于一個(gè)處于青春期的青少年來(lái)說(shuō)是件非常正常而且能夠理解的事情），我猜這對(duì)大部分青年的成長(zhǎng)也是有好處的。但是現(xiàn)在的社會(huì)太開(kāi)放了，而且很容易就能找到想找的內(nèi)容。

先不說(shuō)各種網(wǎng)絡(luò)暴力充斥著這個(gè)社會(huì)，更重要的是有些不法分子會(huì)利用黃色、暴力內(nèi)容以及青少年的沖動(dòng)和好奇心理去毒害青少年的思想。

例如：通過(guò)一個(gè)含有黃圖的小廣告引導(dǎo)用戶去瀏覽黃色、暴力、賭博等非法網(wǎng)站，一些無(wú)知的青少年可能因?yàn)橐粫r(shí)沖動(dòng)而沾染上不良的嗜好，比如黃賭毒等。而父母親也很難發(fā)現(xiàn)自家小孩發(fā)生的變化（畢竟現(xiàn)在的小朋友每個(gè)人都有一臺(tái)手機(jī)，偷偷看個(gè)黃色網(wǎng)站父母是很難發(fā)現(xiàn)的），最后的結(jié)局就是覆水難收。

我認(rèn)為：這個(gè)社會(huì)是發(fā)展得很快，但對(duì)于小孩以及青少年的保護(hù)也越來(lái)越弱了。

因此，我覺(jué)得社會(huì)有必要而且有義務(wù)去設(shè)立一些規(guī)則使小朋友盡可能少受到不良信息的傷害，所以我覺(jué)得小事先從我做起，我先來(lái)開(kāi)發(fā)一款屏蔽黃圖的瀏覽器擴(kuò)展產(chǎn)品。（深度學(xué)習(xí)+鑒黃+客戶端開(kāi)發(fā)可以說(shuō)是天作之合，既然我們不能從源頭鏟除相關(guān)的產(chǎn)業(yè)，那我們就從離小朋友最近的屏幕進(jìn)行屏蔽。當(dāng)AI鑒黃引擎識(shí)別到網(wǎng)頁(yè)內(nèi)容有黃色圖片時(shí)，瀏覽器可以第一時(shí)間將此屏蔽。）

整個(gè)項(xiàng)目開(kāi)發(fā)時(shí)間大概花了兩周左右，期間最花時(shí)間的是如何提高整個(gè)擴(kuò)展的性能。由于圖片識(shí)別需要一定的時(shí)間，為了盡可能降低整個(gè)圖像識(shí)別時(shí)間，提升用戶瀏覽網(wǎng)頁(yè)的體驗(yàn)，我在整個(gè)項(xiàng)目中考慮了以下方案：

1. 為了解決圖片因?yàn)榭缬蚨鵁o(wú)法識(shí)別這個(gè)問(wèn)題，我在前期使用了Canvas重繪img元素這個(gè)方案，但重繪每張圖會(huì)多帶來(lái)500ms，后面優(yōu)化時(shí)改用了XHR方式將圖片轉(zhuǎn)換為Base64格式進(jìn)行識(shí)別，前期準(zhǔn)備時(shí)間降至10ms。
2. 由于各種正常途徑都無(wú)法將識(shí)別模型放在本地，用戶在清除完緩存的情況下打開(kāi)瀏覽器都需要從服務(wù)器重新獲取模型數(shù)據(jù)（Inception V3模型約為90M，MobileNet模型約為9M，最后采用了后者），這樣不僅增加了服務(wù)器成本，同時(shí)用戶的體驗(yàn)會(huì)大大降低。在經(jīng)歷了多次嘗試后，我通過(guò)一些小聰明成功地將本地模型路徑轉(zhuǎn)換為URL，用戶安裝擴(kuò)展后可以立即使用，這里使下載模型的時(shí)間成本降至為0。
3. 由于網(wǎng)頁(yè)是單線程的，這意味著網(wǎng)頁(yè)加載和圖片識(shí)別不能同時(shí)進(jìn)行。在這里我嘗試了Web Worker的方案，它能夠在瀏覽器內(nèi)多線程運(yùn)行其他程序。很可惜的是，Tensorflow.JS涉及到DOM操作，導(dǎo)致在Web Worker內(nèi)Tensorflow無(wú)法使用，整個(gè)網(wǎng)頁(yè)瀏覽體驗(yàn)無(wú)法繼續(xù)提升。
4. 每張圖片的識(shí)別需要90ms左右，一個(gè)包含了上百?gòu)垐D的大型網(wǎng)站可能要識(shí)別很久時(shí)間，為了解決這個(gè)問(wèn)題，我會(huì)在未來(lái)的迭代中考慮將圖片打包成Batch進(jìn)行識(shí)別（由于現(xiàn)在還沒(méi)學(xué)會(huì)……），聽(tīng)說(shuō)這個(gè)方案能使32張圖片的識(shí)別時(shí)間降至幾百毫秒。

在深度學(xué)習(xí)方面我采用遷移學(xué)習(xí)的方式對(duì)MobileNet上層結(jié)構(gòu)進(jìn)行重寫，當(dāng)我把項(xiàng)目快做完的時(shí)候才發(fā)現(xiàn)鑒黃沒(méi)有想象中那么簡(jiǎn)單，原來(lái)這是一個(gè)困擾計(jì)算機(jī)科學(xué)家十幾年的難題Orz！

在這里我總結(jié)一下項(xiàng)目里遇到的坑：

1. 我在12.17號(hào)前上Tumblr爬了數(shù)萬(wàn)張照片，并辛辛苦苦將數(shù)千張圖分門別類。但要進(jìn)行分類？是根據(jù)實(shí)體還是動(dòng)作進(jìn)行分類？項(xiàng)目前期我采用了后者方案，當(dāng)時(shí)我天真的認(rèn)為動(dòng)作是抽象的，搞定體位動(dòng)作識(shí)別就應(yīng)該沒(méi)問(wèn)題了，最后識(shí)別出來(lái)的效果非常差，有些時(shí)候模型會(huì)把一只可愛(ài)小狗識(shí)別成黃圖，為了提高整體的準(zhǔn)確率我后續(xù)很苦逼地把圖片按照實(shí)體重新進(jìn)行分類，效果有所提升。
2. 由于第一次生成的模型識(shí)別效果太差，我反思了一下有可能是照片太花哨的緣故導(dǎo)致機(jī)器不能識(shí)別重點(diǎn)，所以我又辛辛苦苦地將所有照片的重點(diǎn)內(nèi)容給裁剪出來(lái)，最后識(shí)別效果大幅度提升。
3. 在項(xiàng)目的最后期間，我找到了雅虎提供的NSFW開(kāi)源模型（NSFW, Not Safe For Work），它的準(zhǔn)確度比我的模型高很多，可惜的是在模型轉(zhuǎn)換為JavaScript版本時(shí)由于API缺失導(dǎo)致模型轉(zhuǎn)換失敗。
4. 項(xiàng)目前期我曾考慮過(guò)先把網(wǎng)頁(yè)的全部圖片識(shí)別完再呈現(xiàn)給用戶，但由于性能問(wèn)題會(huì)嚴(yán)重影響到整個(gè)的網(wǎng)頁(yè)瀏覽體驗(yàn)，所以我最終還是放棄了該想法，策略改為優(yōu)先顯示圖片，識(shí)別到黃圖時(shí)將之模糊。

在整個(gè)項(xiàng)目做完后，我認(rèn)為這個(gè)項(xiàng)目的最終結(jié)果是很不完美的。除了我個(gè)人能力有限以外，我認(rèn)為更多是現(xiàn)有條件不足而導(dǎo)致的，例如Tensorflow不能在Web Worker內(nèi)運(yùn)行，導(dǎo)致不能脫離主線程，在多線程內(nèi)進(jìn)行識(shí)別圖片。

還有就是整個(gè)模型的識(shí)別效果真的差強(qiáng)人意，我反思了一下為什么效果這么差，我認(rèn)為有以下幾個(gè)原因：

1. 人類更多是通過(guò)經(jīng)驗(yàn)和語(yǔ)義進(jìn)行思考的（人類可以通過(guò)衣著打扮、裸露程度、姿勢(shì)動(dòng)作、場(chǎng)景氛圍、表情等方式判斷這張圖是否包含色情內(nèi)容），而機(jī)器只能根據(jù)經(jīng)驗(yàn)進(jìn)行識(shí)別（經(jīng)驗(yàn)就是指你喂給機(jī)器的圖片）。
2. 關(guān)于色情和情色，這是非常不一樣的。我認(rèn)為人類在這里的判斷多是主觀判斷，這對(duì)于機(jī)器來(lái)說(shuō)就更難了。
3. 圖片分類可以認(rèn)為是整個(gè)黃圖鑒別框架的設(shè)計(jì)，稍微把握不慎可能產(chǎn)生巨大的影響。

舉例：

• 全裸不一定是黃圖，如果機(jī)器把全裸的嬰兒照片或者世界藝術(shù)作品當(dāng)做色情圖片就會(huì)很尷尬了，因此在設(shè)計(jì)分類時(shí)需要找到一些正常的分類來(lái)做訓(xùn)練對(duì)抗。
• 如果每個(gè)分類都是單獨(dú)的器官，會(huì)不會(huì)對(duì)整張圖片的識(shí)別帶來(lái)影響？這影響是很明顯的，因?yàn)樯楦嗍欠諊?，一個(gè)器官無(wú)法撐起整個(gè)色情氛圍，但采用器官分類這個(gè)方案能很大程度上提高某些圖片的識(shí)別準(zhǔn)確度，但對(duì)于范圍更廣的色情圖片來(lái)說(shuō)作用不是很大。
• 如果每個(gè)分類都是不同的動(dòng)作，會(huì)不會(huì)對(duì)整張圖片的識(shí)別帶來(lái)影響？這個(gè)影響會(huì)更大。因?yàn)閯?dòng)作是抽象的，而畫面里的人物特點(diǎn)都不一樣，導(dǎo)致機(jī)器看不懂圖里的固定特征究竟是什么，最終得出來(lái)的模型效果會(huì)非常差。
• 雅虎的NSFW模型會(huì)把圖片分成Safe和Not Safe兩個(gè)維度，如果按照雅虎的NSFW模式來(lái)設(shè)計(jì)分類的話，在沒(méi)有海量圖片的情況下最終的效果是一定最差的。
• 數(shù)據(jù)量小的情況下應(yīng)該會(huì)降低分類的作用。

雖然產(chǎn)品的最終效果不怎么樣，但我覺(jué)得這個(gè)項(xiàng)目還是很有意義的，起碼我能學(xué)到很多新的知識(shí)，如果這個(gè)項(xiàng)目能延續(xù)下去幫助到別人就好了。

我真的希望這項(xiàng)功能可以遷移到手機(jī)端，成為兒童安全模式的必備功能，因?yàn)楝F(xiàn)在的小孩更多是使用手機(jī)去獲取資訊，鑒黃技術(shù)在手機(jī)端能起到更多的作用。同時(shí)，越來(lái)越多的手機(jī)擁有AI芯片，如果能在手機(jī)底層使用圖像識(shí)別技術(shù)將大大提高整個(gè)識(shí)別速度，體驗(yàn)會(huì)更佳。

明年我會(huì)持續(xù)迭代優(yōu)化整個(gè)項(xiàng)目，除了增加數(shù)據(jù)優(yōu)化模型外，我還會(huì)嘗試加入文字內(nèi)容識(shí)別和黃圖鏈接索引，也會(huì)考慮增加暴力、毒品、賭博等內(nèi)容識(shí)別，希望能更全面地保障兒童的上網(wǎng)體驗(yàn)。如果有朋友愿意加入這個(gè)開(kāi)源項(xiàng)目，請(qǐng)隨時(shí)聯(lián)系我。

2018年就要過(guò)去了，為了打破事業(yè)上的瓶頸我付出了不少的努力，同時(shí)收獲也蠻多的，希望明年自己會(huì)變得更好。最后衷心地祝福每位讀者圣誕節(jié)快樂(lè)，明年又是開(kāi)心順利的一年:-)

#專欄作家#

無(wú)線翡翠臺(tái)，微信公眾號(hào)：薛志榮，人人都是產(chǎn)品經(jīng)理專欄作家。全棧開(kāi)發(fā)者，專注于交互設(shè)計(jì)和人工智能設(shè)計(jì)。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于CC0協(xié)議。