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

フロントエンドだけで機械学習

Aipa
November 22, 2022

 フロントエンドだけで機械学習

フロントエンドカンファレンス沖縄で発表したスライドです

Aipa

November 22, 2022
Tweet

More Decks by Aipa

Other Decks in Technology

Transcript

  1. ϑϩϯτΤϯυ


    ΧϯϑΝϨϯεԭೄ2022
    ϑϩϯτΤϯυ͚ͩͰػցֶश
    @aipacommander 2022/11/19

    View Slide

  2. ࣗݾ঺հ
    • @aipacommanderʢΞΠύʔୂ௕ʣ


    • ԭೄݝͰ࠺ͱࢠڙ2ਓͱݘ2ඖͱೣ1ඖͰੜ׆


    • CBCloudגࣜձࣾͰۈ຿͢ΔϑϩϯτΤϯυΤϯδχΞʢݞॻʣ


    • ೖࣾͯ͠ಡΈॻ͖ͨ͠ݴޠ͸DartʢFlutterʣɺScalaɺRubyɺGASɺPython…


    • ϑϩϯτΤϯυΤϯδχΞɾɾɾɾʁ


    • ໿3ϲ݄લ͸ɺͪΎΒσʔλʹ͍·ͨ͠

    View Slide

  3. ͓΍ɾɾɾʁ

    View Slide

  4. લ৬ vs ݱ৬


    ʢ͜ͷεϥΠυ͸ൃදޙʹരൃͯ͠ফ͑·͢ʣ

    View Slide

  5. ຊ೔࿩͢͜ͱ

    View Slide

  6. https://www.tensor
    fl
    ow.org/js

    View Slide

  7. TensorFlow.jsͱ͸
    • ϒϥ΢βʢJavaScriptʣͰσΟʔϓϥʔχϯάͰ͖Δ͍͢͝΍ͭ


    • Tensor
    fl
    owʢPythonʣΛ஌ͬͯͨΒॻ͚ͦ͏ͳงғؾͷ͍͢͝΍ͭ


    • Ұੲલ͸deeplearn.jsͱݺ͹Εͯͨॏ͍΍ͭʢ๻ͷओ؍ʣͩͬͨ


    • 2022೥ݱࡏ͸౰࣌ͱൺ΂ͨΒര଎ʹͳ͍ͬͯΔ͍͢͝΍ͭ

    View Slide

  8. Ͱ͖Δ͜ͱʢGoogleͷϒϩάΑΓʣ
    • ͜Ε·Ͱग़͖ͯͨϞσϧ͸͍͍ͩͩΠέΔʢงғؾʣ


    • BodyPixʢGoogle meetʹ͋Δഎܠ΅͔͠ʣ


    • BERTΛ࢖ͬͨChrome Pluginʢϖʔδ಺ݕࡧػೳʹ࣭໰Λॻ͘ͱɺ
    ֘౰ʢճ౴ͱ༧ଌ͞Εͨʣจষ͕ϋΠϥΠτ͞ΕΔʣ

    View Slide

  9. ͠Ύ͍͝ʢ͍͢͝ʣ

    View Slide

  10. ʢվΊͯʣ


    ຊ೔࿩͢͜ͱ

    View Slide

  11. ຊ೔࿩͢͜ͱ
    •؆୯ͳνϡʔτϦΞϧ


    • ม਎σϞ → ແཧͰͨ࣍͠ճ


    • ήʔϜͱউෛ͢ΔσϞ → ࡢ೔׬੒ͤ͞Δ༧ఆ͕ͩͬͨಥવ໺ੜͷҿΈձ͕(ry



    ※Nuxt3ͷઆ໌͸͠ͳ͍Ͱ͕͢ɺσϞ͸Nuxt3্Ͱಈ͍͍ͯ·͢

    View Slide

  12. ؆୯ͳνϡʔτϦΞϧ

    View Slide

  13. ༻ҙ͢Δ΋ͷ
    https://avinton.com/blog/2018/03/single-shot-multibox-detector-explained1/

    View Slide

  14. TensorFlow Hub
    https://t
    fh
    ub.dev/tensor
    fl
    ow/ssd_mobilenet_v2/2

    View Slide

  15. εςοϓ
    1. TensorFlow.jsͷΠϯετʔϧ


    2. WebΧϝϥ͔ΒಈըͷऔಘˠCanvas΁දࣔ


    3. ϞσϧͷηοτΞοϓ


    4. Ϟσϧʹೖྗ͢Δ


    5. Ϟσϧͷग़ྗΛՃ޻͢Δ


    6. ݁Ռදࣔ

    View Slide

  16. ᶃScriptλάɾnpmɾyarnͰΠϯετʔϧ
    https://www.tensor
    fl
    ow.org/js/tutorials/setup?hl=ja

    View Slide

  17. ᶄಈըʢը૾ʣΛೖྗ͢Δ४උ̍

    View Slide

  18. ᶄಈըʢը૾ʣΛೖྗ͢Δ४උ̎

    View Slide

  19. ᶅϞσϧͷηοτΞοϓ

    View Slide

  20. ᶆϞσϧʹΧϝϥ͔Βͷσʔλʢը૾ʣΛ


    ೖྗ͢Δ̍

    View Slide

  21. ᶆϞσϧʹΧϝϥ͔Βͷσʔλʢը૾ʣΛ


    ೖྗ͢Δ̎

    View Slide

  22. ᶆϞσϧʹΧϝϥ͔Βͷσʔλʢը૾ʣΛ


    ೖྗ͢Δ̏

    View Slide

  23. ᶆϞσϧʹΧϝϥ͔Βͷσʔλʢը૾ʣΛ


    ೖྗ͢Δ̐
    1൪໨͸ϥϕϧ(ཁૉ൪߸)ͱ


    ༧ଌ֬཰ʢ1ʹ͍ۙ΄Ͳࣗ৴͕͋Δʣ
    ̎൪໨͸bounding boxͷҐஔ


    [y, x, yͷେ͖͞, xͷେ͖͞]

    View Slide

  24. ิ଍
    https://avinton.com/blog/2018/03/single-shot-multibox-detector-explained1/
    ̎൪໨͸bounding boxͷҐஔ


    [y, x, ॎͷαΠζ, ԣͷαΠζ]
    :
    [0, 0] 9
    [y, x] ԣͷαΠζ
    ॎͷαΠζ
    [


    ॎͷαΠζ - y,


    ԣͷαΠζ - x


    ]

    View Slide

  25. ᶇϞσϧͷग़ྗΛՃ޻͢Δˠᶈ݁Ռදࣔ

    View Slide

  26. σϞ

    View Slide

  27. ͳͥͳͷ͔
    ʘiϑΟʔϧυ!!ʗ
    • ݕग़݁Ռશ෦දࣔ͢Δͱ͜͏ͳΔ


    • ϑΟϧλͷςΫχοΫʢSSDͷجຊͷ࿩ʣ


    • ༧ଌ֬཰ʢ৴པ౓ʣͰߴ͍ॱʹιʔτͯ͠ϑΟϧλ


    • Intersection over UnionʢIoUʣͰϑΟϧλ


    • 2ͭͷbounding box͔ΒείΞΛܭࢉ͢Δ


    • bounding box͕׬શʹॏͳ͍ͬͯͨΒ1ʹͳΔ


    • ͋ΘͤͯɺNonmaximum suppressionʢNMSʣͰ

    ॏͳ͍ͬͯͯ׌ͭɺIoU͕খ͍͞bounding boxΛ࡟আ

    View Slide

  28. ͳΜͱ࣮૷͞Ε͍ͯΔ

    View Slide

  29. ࠶ͼσϞ

    View Slide

  30. ·ͱΊ

    View Slide

  31. ·ͱΊ
    • ϒϥ΢βʢJavaScriptʣͰσΟʔϓϥʔχϯά͸Ͱ͖Δ


    • ࠓ೔͸঺հͰ͖ͳ͔ͬͨͰ͕͢ɺ͍ΖΜͳ͜ͱ͕Ͱ͖Δ


    • ϒϥ΢βͰֶश΋Ͱ͖ΔɺసҠֶश΋͍͚Δ


    • όοΫΤϯυʹWASM͕༻ҙ͞Ε͍ͯΔͨΊɺΑΓϙʔλϒϧʹ
    ʢNode.js͕ಈ͘αʔόͰ΋ಈ࡞͢Δʣ

    View Slide

  32. ͓·͚σϞʢ͕࣌ؒ͋Ε͹ʣ

    View Slide

  33. ENDʢདྷ೥͸ո्ͷ೥ʂʂʣ

    View Slide