Pro Yearly is on sale from $80 to $50! »

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

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

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

  3. @potato4d

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

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

  6. ϙέϞϯͷϧʔϧ

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

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

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

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

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

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

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

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

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

  16. πʔϧͷ໰୊

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

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

  19. ࡞Δ

  20. ΍ͬͨ͜ͱ • ݕग़ͷݩσʔλιʔεΛ༻ҙ͢Δ • Node.js Ͱಈ͘ը૾ղੳػΛ࡞Δ • ݱ࣮తͳղੳ଎౓ΛٻΊͯ Web Worker

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

    ʹҠ২͢Δ • σβΠϯͱը૾Ξηοτ࡞Δ(Sketch) • ΞϓϦέʔγϣϯΛ࡞Δ
  22. σʔλιʔεूΊ(σʔλՃ޻)

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

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

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

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

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

  28. ղੳػ • OpenCV ͸ϒϥ΢βͰಈ͔ͳ͍ • ීஈ࢖͏ JS ϑϨʔϜϫʔΫ͕ Universal ͳͷͰɺݕग़ػ΋ͦ͏͍ͨ͠

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

    • ML ͳͲͰ͸ͳ͘·ͣ͸۪௚ʹ CPU ͷྗͰ౗͍ͨ͠ https://www.npmjs.com/package/jimp
  30. ϒϥ΢βͰಈ͔͢ • ϑΝΠϧγεςϜ͕࢖͑ͳ͍ • OpenCV ͱ͔΋ಈ͔ͳ͍ • ͳΜ͔৭ʑ੍໿͕͋Δ

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

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

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

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

    • Web Worker ͰͿΜճ͢ํ਑
  35. Ճ޻σʔλͷϋογϡ஋Λར༻͢Δ͜ͱʹ

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

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

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

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

    fs ඇґଘ + Jimp Ͱ΄΅ Universal ʹ׬੒ ※ ͜ͷॲཧࣗମ͸ Node.js Ͱ΍Δඞཁ͕ͳ͔ͬͨͷͰɺ࠷ऴతʹ͸ worker_thread ͱͷޓ׵ੑΛ੾ͬͨ
  40. None
  41. ղੳ଎౓ : 350ms/pokemon ݕग़ਫ਼౓(jpeg:orig) : ΄΅100% (σʔλͷϛεҎ֎ޡݕ஌ͳͦ͞͏) ݕग़ਫ਼౓(jpeg:normal) : 85~%

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

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

  44. ࠷ޙʹ • ࠓճݴٴ͠ͳ͔ͬͨ SSR/SPA ෦෼͸ผ్ϒϩάʹ·ͱΊ·͢ • Nuxt.js + Inject +

    Firebase + Tailwind Έ͍ͨͳߏ੒͕Կނڧ͍͔ • Store ׬શඇґଘ͔ͭ֎෦ґଘΛҰ੾௚઀ import ͠ͳ͍ϝϦοτ • ऴΘΓΏ͘ v2 ʹ͓͚Δ Vue.js ΞϓϦέʔγϣϯͷճ౴ͳͷͰͥͻ • Ұ೥ఔ౓΄΅͜ͷελΠϧͰ͔͠ίʔυॻ͍ͯͳ͍͚Ͳྑ͍ײ͡
  45. ԿʹͤΑ

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