Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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 の技術的な話はまたどこかで。

More Decks by Potato4d(Hanatani Takuma)

Other Decks in Technology

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