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 ͱͷޓ׵ੑΛ੾ͬͨ
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. ϙέϞϯରઓΛ΍Ζ͏ʂ