Web Worker を使ってブラウザ上でポケモンの画像を解析したい！ / Pokemon recognition from screenshots in browser using web worker

Universal な Worker を用意しだしたのは良いけれど、なんやかんやで最後 worker_threads が要らなくなって Web Worker オンリーに完全移行したまでがオチです。

社内発表タイトルは「ブラウザ上でポケモンの画像を解析したい！」です。

2020/05/11 に LINE 社内でやった GW の自由研究の成果発表 LT 大会の資料です。
社内の話は一部削除し、外部向けに数枚追記しています。

5分の中ではプロダクトの説明が精一杯だったので、SSR/SPA の技術的な話はまたどこかで。

Transcript

1. ϒϥ΢β্Ͱ
   ϙέϞϯͷը૾Λղੳ͍ͨ͠ʂ
   @potato4d / LINE GW ࣗ༝ݚڀൃද LT / 2020.05.11
   

   View Slide

2. ஫ҙ
   ࣾ಺ LT ༻ͳͷͰɺNuxt.js ͷ࿩ͯ͠·ͤΜ
   ※ Universal Application ͷΞʔΩςΫνϟͷ࿩͸ผ్ϒϩάॻ͖·͢
   

   View Slide

3. @potato4d
   

   View Slide

4. https://pokedri.com/pokemon63/
   

   View Slide

5. https://github.com/potato4d/pokemon63
   

   View Slide

6. ϙέϞϯͷϧʔϧ
   

   View Slide

7. ϙέϞϯͷϧʔϧ
   1. 6ඖͷϙέϞϯΛ༻ҙ͢Δ
   

   View Slide

8. ϙέϞϯͷϧʔϧ
   2. ͓ޓ͍ͷ6ඖΛݟ͍ͤ͋ɺ3ඖબͿ
   

   View Slide

9. ϙέϞϯͷϧʔϧ
   3. 3ඖಉ࢜Ͱઓͬͯશһ౗ͨ͠Βউͪʂ
   

   View Slide

10. ϙέϞϯͷϧʔϧ
    2. ͓ޓ͍ͷ6ඖΛݟ͍ͤ͋ɺ3ඖબͿ
    

    View Slide

11. ϙέϞϯͷϧʔϧ
    2. ͓ޓ͍ͷ6ඖΛݟ͍ͤ͋ɺ3ඖબͿ
    ૬खͷબग़Λ༧૝͢Δྗ͕ॏཁ
    

    View Slide

12. 1. ࣗ෼ͷબग़ϩάΛࡌͤΒΕͯ
    2. ଞਓͷબग़͕ݟΒΕͯ
    3. ਖ਼͍͠બग़ΛΩϟϦϒϨʔγϣϯͰ͖Δ
    

    View Slide

13. 1. ࣗ෼ͷબग़ϩάΛࡌͤΒΕͯ
    2. ଞਓͷબग़͕ݟΒΕͯ
    3. ਖ਼͍͠બग़ΛΩϟϦϒϨʔγϣϯͰ͖Δ
    

    View Slide

14. 1. ࣗ෼ͷબग़ϩάΛࡌͤΒΕͯ
    2. ଞਓͷબग़͕ݟΒΕͯ
    3. ਖ਼͍͠બग़ΛΩϟϦϒϨʔγϣϯͰ͖Δ
    

    View Slide

15. 1. ࣗ෼ͷબग़ϩάΛࡌͤΒΕͯ
    2. ଞਓͷબग़͕ݟΒΕͯ
    3. ਖ਼͍͠બग़ΛΩϟϦϒϨʔγϣϯͰ͖Δ
    ԿΒ͔ͷπʔϧ͕΄͍͠ʂʂʂ
    

    View Slide

16. πʔϧͷ໰୊
    

    View Slide

17. ……12 ඖ෼σʔλೖΕΔͷͩΔ͘ͳ͍ʁ
    

    View Slide

18. → εΫγϣ্͛ͨΒউखʹղੳͯ͠΄͍͠
    

    View Slide

19. ࡞Δ
    

    View Slide

20. ΍ͬͨ͜ͱ
    • ݕग़ͷݩσʔλιʔεΛ༻ҙ͢Δ
    • Node.js Ͱಈ͘ը૾ղੳػΛ࡞Δ
    • ݱ࣮తͳղੳ଎౓ΛٻΊͯ Web Worker ʹҠ২͢Δ
    • σβΠϯͱը૾Ξηοτ࡞Δ(Sketch)
    • ΞϓϦέʔγϣϯΛ࡞Δ
    

    View Slide

21. ΍ͬͨ͜ͱ
    • ݕग़ͷݩσʔλιʔεΛ༻ҙ͢Δ
    • Node.js Ͱಈ͘ը૾ղੳػΛ࡞Δ
    • ݱ࣮తͳղੳ଎౓ΛٻΊͯ Web Worker ʹҠ২͢Δ
    • σβΠϯͱը૾Ξηοτ࡞Δ(Sketch)
    • ΞϓϦέʔγϣϯΛ࡞Δ
    

    View Slide

22. σʔλιʔεूΊ(σʔλՃ޻)
    

    View Slide

23. σʔλιʔεूΊ(σʔλՃ޻)
    

    View Slide

24. σʔλιʔεूΊ(σʔλՃ޻)
    

    View Slide

25. σʔλιʔεूΊ(Τοδέʔεऩू)
    

    View Slide

26. σʔλՃ޻લ
    • ਫ਼౓͕ग़ͳ͍
    • ಈ࡞΋Ұඖ10ඵ͔͔Δ
    

    View Slide

27. σʔλՃ޻લ
    • ਫ਼౓͕ग़ͳ͍
    • ಈ࡞΋Ұඖ10ඵ͔͔Δ
    • jpegϊΠζͷٵऩɾεΫγϣʹ͍ۙഎܠͷ௥Ճ
    • 9ׂܕͷϙέϞϯ͕ਖ਼͘͠൑ఆՄೳʹ
    ਫ਼౓͕ग़ͳ͍ͱ͖͸σʔλՃ޻ΛؤுΔͱྑ͍
    

    View Slide

28. ղੳػ
    • OpenCV ͸ϒϥ΢βͰಈ͔ͳ͍
    • ීஈ࢖͏ JS ϑϨʔϜϫʔΫ͕ Universal ͳͷͰɺݕग़ػ΋ͦ͏͍ͨ͠
    • ML ͳͲͰ͸ͳ͘·ͣ͸۪௚ʹ CPU ͷྗͰ౗͍ͨ͠
    

    View Slide

29. ղੳػ
    • OpenCV ͸ϒϥ΢βͰಈ͔ͳ͍
    • ීஈ࢖͏ JS ϑϨʔϜϫʔΫ͕ Universal ͳͷͰɺݕग़ػ΋ͦ͏͍ͨ͠
    • ML ͳͲͰ͸ͳ͘·ͣ͸۪௚ʹ CPU ͷྗͰ౗͍ͨ͠
    https://www.npmjs.com/package/jimp
    

    View Slide

30. ϒϥ΢βͰಈ͔͢
    • ϑΝΠϧγεςϜ͕࢖͑ͳ͍
    • OpenCV ͱ͔΋ಈ͔ͳ͍
    • ͳΜ͔৭ʑ੍໿͕͋Δ
    

    View Slide

31. ࣗ෼ଆͷϙέϞϯ: 6 ඖɹ
    ૬खଆͷϙέϞϯ: 6 ඖ
    ࠓ࢖͑ΔϙέϞϯ: 528 ඖ
    

    View Slide

32. ࣗ෼ଆͷϙέϞϯ: 6 ඖɹ
    ૬खଆͷϙέϞϯ: 6 ඖ
    ࠓ࢖͑ΔϙέϞϯ: 528 ඖ × 12 = 6336
    

    View Slide

33. ϒϥ΢βͰಈ͔͢
    • ϑΝΠϧγεςϜ͕࢖͑ͳ͍
    • OpenCV ͱ͔΋ಈ͔ͳ͍
    • ͳΜ͔৭ʑ੍໿͕͋Δ
    • ͱʹ͔͘ൺֱ͢Δॲཧ͕ॏ͍ʂʂʂ
    

    View Slide

34. ϒϥ΢βͰಈ͔͢
    • ϑΝΠϧγεςϜ͕࢖͑ͳ͍
    • OpenCV ͱ͔΋ಈ͔ͳ͍
    • ͳΜ͔৭ʑ੍໿͕͋Δ
    • ͱʹ͔͘ൺֱ͢Δॲཧ͕ॏ͍ʂʂʂ
    • Web Worker ͰͿΜճ͢ํ਑
    

    View Slide

35. Ճ޻σʔλͷϋογϡ஋Λར༻͢Δ͜ͱʹ
    

    View Slide

36. Ճ޻σʔλͷϋογϡ஋Λར༻͢Δ͜ͱʹ
    FSඇґଘɾߴ଎Խ
    Ұ௨Γ Jimp ͷίʔυಡΜͩΒܕఆٛʹͳ͍͚ͲͰ͖ͦ͏ͳͷͰ΍ͬͨ
    

    View Slide

37. Ξοϓϩʔυը૾ͷ Uint8Array ԽˠWorkerసૹ
    

    View Slide

38. ෮ݩ࣮ͯ͠ߦ (8 workers / 66 pokemon per worker)
    

    View Slide

39. ෮ݩ࣮ͯ͠ߦ (8 workers / 66 pokemon per worker)
    worker + fs ඇґଘ + Jimp Ͱ΄΅ Universal ʹ׬੒
    ※ ͜ͷॲཧࣗମ͸ Node.js Ͱ΍Δඞཁ͕ͳ͔ͬͨͷͰɺ࠷ऴతʹ͸ worker_thread ͱͷޓ׵ੑΛ੾ͬͨ
    

    View Slide

40. View Slide

41. ղੳ଎౓ : 350ms/pokemon
    ݕग़ਫ਼౓(jpeg:orig)
    : ΄΅100% (σʔλͷϛεҎ֎ޡݕ஌ͳͦ͞͏)
    ݕग़ਫ਼౓(jpeg:normal)
    : 85~%
    

    View Slide

42. ϦϦʔεޙ΄΅ຖ೔σϓϩΠத
    

    View Slide

43. ѹॖ཰ʹউͭʹ͸΍͸Γಛ௃ྔʁ
    

    View Slide

44. ࠷ޙʹ
    • ࠓճݴٴ͠ͳ͔ͬͨ SSR/SPA ෦෼͸ผ్ϒϩάʹ·ͱΊ·͢
    • Nuxt.js + Inject + Firebase + Tailwind Έ͍ͨͳߏ੒͕Կނڧ͍͔
    • Store ׬શඇґଘ͔ͭ֎෦ґଘΛҰ੾௚઀ import ͠ͳ͍ϝϦοτ
    • ऴΘΓΏ͘ v2 ʹ͓͚Δ Vue.js ΞϓϦέʔγϣϯͷճ౴ͳͷͰͥͻ
    • Ұ೥ఔ౓΄΅͜ͷελΠϧͰ͔͠ίʔυॻ͍ͯͳ͍͚Ͳྑ͍ײ͡
    

    View Slide

45. ԿʹͤΑ
    

    View Slide

46. ϙέϞϯରઓΛ΍Ζ͏ʂ
    

    View Slide