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

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

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