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 full-size slide

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

    View full-size slide

  3. https://pokedri.com/pokemon63/

    View full-size slide

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

    View full-size slide

  5. ϙέϞϯͷϧʔϧ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. πʔϧͷ໰୊

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide