フロントエンド開発のためのブラウザ組み込みAI入門

by Masashi Hirano

Slide 1

Slide 1 text

ϑϩϯτΤϯυ։ൃͷͨΊͷ ϒϥ΢β૊ΈࠐΈAIೖ໳ @shisama_ 2025-10-20 ϑϩϯτΤϯυΧϯϑΝϨϯεؔ੢ × TSKaigiίϥϘΠϕϯτ

Slide 2

Slide 2 text

AIͷྲྀΕ͕͔ͭͯͷ ϑϩϯτΤϯυΑΓ଎͍ ʢݸਓͷײ֮ʣ

Slide 3

Slide 3 text

ϑϩϯτΤϯυΤϯδχΞͷ ओઓ৔Ͱ͋Δϒϥ΢βʹ ૊Έࠐ·ΕͨAIʹ͍ͭͯ࿩͠·͢

Slide 4

Slide 4 text

Masashi Hirano (@shisama_) • αΠϘ΢ζ • ϓϩδΣΫτϚωʔδϟʔͱϑϩϯτΤϯυΤϯδχΞ • ΞϝϦΧͷΦϯϥΠϯେֶ5೥໨ʢ4೥ͰଔۀͰ͖ͣ… • ʰϑϩϯτΤϯυ։ൃͷͨΊͷηΩϡϦςΟೖ໳ʱʢᠳӭ ࣾʣஶऀ

Slide 5

Slide 5 text

Agenda • ΫϥΠΞϯταΠυAI • ΫϥΠΞϯταΠυAI΁ͷWebͷऔΓ૊Έ • ϒϥ΢β૊ΈࠐΈAI

Slide 6

Slide 6 text

AIΛ࢖ͬͨػೳͷ։ൃ͍ͯ͠·͔͢ʁ

Slide 7

Slide 7 text

AIػೳΛWebΞϓϦέʔγϣϯʹ ։ൃ͢Δͱ͖ͷ3ͭͷઓུ • AIΛར༻ͨ͠ػೳΛ࣮૷͢Δʹ͸େ͖͘෼͚ͯ3ͭͷઓུ͕͋Δ • αʔόʔαΠυ AI • ΫϥΠΞϯταΠυ AI • ϋΠϒϦου AI

Slide 8

Slide 8 text

• AIΛར༻ͨ͠ػೳΛ࣮૷͢Δʹ͸େ͖͘෼͚ͯ3ͭͷઓུ͕͋Δ • αʔόʔαΠυ AI • ΫϥΠΞϯταΠυ AI • ϋΠϒϦου AI ←ݱࡏ͸͕ͬͪ͜ओྲྀ AIػೳΛWebΞϓϦέʔγϣϯʹ ։ൃ͢Δͱ͖ͷ3ͭͷઓུ

Slide 9

Slide 9 text

• AIΛར༻ͨ͠ػೳΛ࣮૷͢Δʹ͸େ͖͘෼͚ͯ3ͭͷઓུ͕͋Δ • αʔόʔαΠυ AI • ΫϥΠΞϯταΠυ AI • ϋΠϒϦου AI ←ࠓ೔ͷϝΠϯ AIػೳΛWebΞϓϦέʔγϣϯʹ ։ൃ͢Δͱ͖ͷ3ͭͷઓུ

Slide 10

Slide 10 text

αʔόʔαΠυAI ϢʔβʔೖྗσʔλΛૹ৴ LLMͷ݁Ռʹجͮ͘Ϩεϙϯε --.ΛαʔόʔͰಈ͔͢

Slide 11

Slide 11 text

αʔόʔαΠυAIͷ՝୊ • ϓϥΠόγʔͱηΩϡϦςΟ • ௨৴த΍֎෦αʔόʔ͔Βͷػີ৘ใͷ࿙ӮϦεΫ • ίετ • Ϋϥ΢υαʔϏε΍LLMͷAPI (OpenAI APIͳͲ)Λ࣮ߦ͢Δ͕͔͔ۚΔ • ύϑΥʔϚϯε • ௨৴ʹΑΔϨΠςϯγʔ͕ൃੜ͢Δ • Մ༻ੑ • ֎෦ͷAPIαʔόʔ͕ো֐Λى͜͢ͱಈ͔ͳ͍

Slide 12

Slide 12 text

ΫϥΠΞϯταΠυAI --.ΛϩʔΧϧͰಈ͔͢ ωοτϫʔΫΛհ͞ͳ͍

Slide 13

Slide 13 text

ΫϥΠΞϯταΠυͰಈ͔͢ϝϦοτ • ϓϥΠόγʔͱηΩϡϦςΟͷڧԽ • ίετ࡟ݮ • ύϑΥʔϚϯε޲্ • ΦϑϥΠϯར༻

Slide 14

Slide 14 text

ϓϥΠόγʔͱηΩϡϦςΟͷڧԽ • σʔλྲྀग़ϦεΫͷ๷ࢭ • σʔλΛαʔόʔ΁ૹ৴͠ͳ͍ͨΊػີ৘ใͷ࿙ӮϦεΫ͕ݮΔ • ୈࡾऀ΁ͷσʔλެ։ͷݒ೦ܰݮ • αʔόʔ΁ૹ৴ͨ͠৘ใ͕ଞͷϢʔβʔ΁ެ։͞ΕΔݒ೦Λܰݮ • ΤϯυπʔΤϯυ҉߸ԽΛ࢖͏ΞϓϦͰ΋AIػೳΛఏڙͰ͖Δʢิ଍ ͋Γʣ

Slide 15

Slide 15 text

ิ଍: ΤϯυπʔΤϯυ҉߸Խͷར༻࣌ͷ ΫϥΠΞϯτAIͷ׆༻ ड৴ऀͷΈ͕෮߸Ͱ͖Δσʔλʹରͯ͠LLMͷ࣮ߦ͕Մೳ ௨৴ܦ࿏಺Ͱͷ౪ௌɾվ͟ ΜΛ๷͙͜ͱ͕Ͱ͖Δ ड৴ऀ͚͕ͩ෮߸Ͱ͖ΔΑ͏ ʹ҉߸Խ ෮߸ͯ͠ϩʔΧϧͷ--.ʹ ಡΈࠐ·ͤΔ

Slide 16

Slide 16 text

ิ଍: ΤϯυπʔΤϯυ҉߸Խͷར༻࣌ͷ ΫϥΠΞϯτAIͷ׆༻ αʔόʔͰ෮߸͞Εͳ͍Α͏ͳ௨৴Λ࢖͏৔߹Ͱ΋AIػೳΛఏڙͰ͖Δ ड৴ऀ͚͕ͩ෮߸Ͱ͖ΔΑ͏ ʹ҉߸Խ தܧαʔόʔ͸҉߸Խ͞Εͨ σʔλΛ෮߸Ͱ͖ͳ͍ ෮߸ͯ͠ϩʔΧϧͷ--.ʹ ಡΈࠐ·ͤΔ

Slide 17

Slide 17 text

ίετ࡟ݮ • σόΠε΍ϒϥ΢βʹ૊Έࠐ·ΕͨLLMͷར༻͸جຊແྉ • Ϋϥ΢υαʔϏε΍LLMͷAPIͷίετ࡟ݮ • LLMΛಈ͔͢αʔόʔΛ༻ҙ͠ͳͯ͘Α͍

Slide 18

Slide 18 text

ύϑΥʔϚϯε޲্ • αʔόʔͱͷ௨৴ʹΑΔϨΠςϯγʔΛճආ • ϦΞϧλΠϜॲཧ͕ॏཁͱͳΔέʔεʹڧ͍ • Google MeetͰ͸എܠ΅͔͠΍ϊΠζ཈੍Ͱ༻͍ΒΕ͍ͯΔ ʢGoogle I/O 2025ʹͯൃදʣ

Slide 19

Slide 19 text

ΦϑϥΠϯར༻ • ϩʔΧϧͰॲཧ͢ΔͨΊΦϑϥΠϯͷ৔߹Ͱ΋LLM͕ಈ࡞͢Δ • ωοτϫʔΫ੍ݶ͕͋ΔΑ͏ͳ৔߹Ͱ΋LLM͕ಈ࡞͢Δ • ࣾ಺͔Βࣾ֎΁ͷΞΫηε੍ݶͳͲ • LLMͷΫϥ΢υαʔϏεͷϑΥʔϧόοΫͱͯ͠ར༻Մೳ • OpenAI API͔ΒΤϥʔ͕ฦ͖ͬͯͨΒΫϥΠΞϯταΠυAIͰର Ԡ͢ΔͳͲ

Slide 20

Slide 20 text

ΫϥΠΞϯταΠυAIͷσϝϦοτ • ਫ਼౓͕௿͘Ϣʔεέʔε͕ݶΒΕΔ • αʔόʔͱൺ΂ͯεϖοΫ͕௿͍ϢʔβʔͷσόΠεͰ΋ಈ͘Α ͏ʹϞσϧ͕খ͍͞ • ར༻؀ڥ͕ݶΒΕ͍ͯΔ • ϋʔυ΢ΣΞεϖοΫ͕଍Γͳ͍୺຤΍αϙʔτ͍ͯ͠ͳ͍OS΍ ϒϥ΢βͰ͸ಈ͔ͳ͍

Slide 21

Slide 21 text

ΫϥΠΞϯταΠυAIͷσϝϦοτ΁ͷରࡦ • ਫ਼౓͕௿͘Ϣʔεέʔε͕ݶΒΕΔ → ߴ͍ਫ਼౓͕ٻΊΒΕΔέʔεͰ͸αʔόʔαΠυAIΛར༻͢Δ • ར༻؀ڥ͕ݶΒΕ͍ͯΔ → ར༻Ͱ͖ͳ͍৔߹΍ΫϥΠΞϯταΠυͷ࣮ߦʹ͕͔͔࣌ؒΔ৔ ߹͸αʔόʔαΠυAIΛར༻͢Δ ΫϥΠΞϯταΠυAI + αʔόʔαΠυAI = ϋΠϒϦουAI

Slide 22

Slide 22 text

ΫϥΠΞϯταΠυAI΁ͷWebͷऔΓ૊Έ • Web Machine Learning Working Group • AIʹؔ͢ΔAPIͷWebඪ४ԽΛਐΊ͍ͯΔW3CͷWG • Web Neural Network (WebNN) Λఆٛ • GPUͳͲͷϋʔυ΢ΣΞΞΫηϥϨʔγϣϯΛ࢖༻͢ΔͨΊͷAPI • ϒϥ΢β૊ΈࠐΈAIΛར༻ͨ͠APIͷఆٛʢޙड़ʣ • Prompt APIɺTranslation APIɺSummarization APIͳͲ

Slide 23

Slide 23 text

https://github.com/webmachinelearning

Slide 24

Slide 24 text

ϒϥ΢β૊ΈࠐΈAI • Google Chromeʹ͸Gemini Nano͕૊Έࠐ·Ε͍ͯΔ • ϋʔυ΢ΣΞཁ͕݅͋Δ • Windows 10 or 11ɺmacOS 13Ҏ্ɺLinuxɺ22GBҎ্ͷετϨʔ δɺ಺༰GPU·ͨ͸ϏσΦΧʔυ͕ඞཁɺVRAM͸4GBҎ্ • Gemini Nano͸ϞόΠϧσόΠεͰ΋ಈ࡞͢Δ͙Β͍ܰྔ • ૊Έࠐ·ΕͨGeminiΛ࢖͏JavaScriptͷAPI͕༻ҙ͞Ε͍ͯΔ

Slide 25

Slide 25 text

ϒϥ΢β૊ΈࠐΈAI API "1* ػೳ 8FCར༻Մ൱ $ISPNF֦ுͰͷ ར༻Մ൱ *OUFOU 5SBOTMBUPS"1* ຋༁ $ISPNF $ISPNF *OUFOUUPTIJQ -BOHVBHF %FUFDUPS"1* ݴޠݕग़ $ISPNF $ISPNF *OUFOUUPTIJQ 4VNNBSJ[FS"1* ཁ໿ $ISPNF $ISPNF *OUFOUUPTIJQ 8SJUFS"1* จষ࡞੒ 0SJHJO5SJBM 0SJHJO5SJBM *OUFOUUP &YQFSJNFOU 3FXSJUFS"1* จষमਖ਼ 0SJHJO5SJBM 0SJHJO5SJBM *OUFOUUP &YQFSJNFOU 1SPNQU"1* --.ʹࣗવݴޠͰ ϦΫΤετ 0SJHJO5SJBM $ISPNF *OUFOUUP &YQFSJNFOU 1SPPGSFBEFS"1* จষߍਖ਼ 0SJHJO5SJBM 0SJHJO5SJBM *OUFOUUP 1SPUPUZQF

Slide 26

Slide 26 text

Translator API ݁Ռ͸TUSFBNͷͨΊ͢΂ͯͷ຋༁Λ ଴ͨͣʹ్தΛදࣔ͢Δ͜ͱ΋Մೳ

Slide 27

Slide 27 text

Language Detector API Մೳੑ͕͋Δݴޠͱ֬཰Λ֬ ཰ͷߴ͍ॱ൪Ͱ഑ྻͰฦ͢ɻ ͜ͷྫͰ͸ϑϥϯε͕࠷΋ߴ ͍֬཰ͱͳ͍ͬͯΔɻ

Slide 28

Slide 28 text

Language Detector API + Translator API ݴޠݕग़ͷ֬཰͕࠷΋ߴ͍݁ ՌΛऔΓग़͍ͯ͠Δ

Slide 29

Slide 29 text

Prompt API

Slide 30

Slide 30 text

Summarizer API

Slide 31

Slide 31 text

ϒϥ΢β૊ΈࠐΈAI API "1* ػೳ 8FCར༻Մ൱ ֦ுػೳར༻Մ൱ *OUFOU 5SBOTMBUPS"1* ຋༁ $ISPNF $ISPNF *OUFOUUPTIJQ -BOHVBHF %FUFDUPS"1* ݴޠݕग़ $ISPNF $ISPNF *OUFOUUPTIJQ 4VNNBSJ[FS"1* ཁ໿ $ISPNF $ISPNF *OUFOUUPTIJQ 8SJUFS"1* จষ࡞੒ 0SJHJO5SJBM 0SJHJO5SJBM *OUFOUUP &YQFSJNFOU 3FXSJUFS"1* จষमਖ਼ 0SJHJO5SJBM 0SJHJO5SJBM *OUFOUUP &YQFSJNFOU 1SPNQU"1* --.ʹࣗવݴޠϦ ΫΤετ 0SJHJO5SJBM $ISPNF *OUFOUUP &YQFSJNFOU 1SPPGSFBEFS"1* จষߍਖ਼ 0SJHJO5SJBM 0SJHJO5SJBM *OUFOUUP 1SPUPUZQF $ISPNF͚ͩʁ

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Issue͕ͦΕͧΕͷϦϙδτϦʹ͋Δ Mozilla / standard-positions Webkit / standard-positions

Slide 34

Slide 34 text

ϒϥ΢β૊ΈࠐΈAI API "1* 8FC.-8( .P[JMMBTUBOEBSET QPTJUJPOT 8FCLJUTUBOEBSET QPTJUJPOT 5SBOTMBUPS"1* ࠾༻ *TTVF͋Γ *TTVF͋Γ -BOHVBHF%FUFDUPS "1* ࠾༻ *TTVF͋Γ *TTVF͋Γ 4VNNBSJ[FS"1* ࠾༻ *TTVF͋Γ *TTVF͋Γ 8SJUFS"1* ࠾༻ *TTVF͋Γ *TTVF͋Γ 3FXSJUFS"1* ࠾༻ *TTVF͋Γ *TTVF͋Γ 1SPNQU"1* *TTVF͋Γ *TTVF͋Γ 1SPPGSFBEFS"1*

Slide 35

Slide 35 text

૊ΈࠐΈAI APIͷࣄྫ (Google I/O 2025ͷൃද) https://www.youtube.com/watch?v=CjpZCWYrSxM

Slide 36

Slide 36 text

ࠓ೔࿩ͤͳ͔ͬͨศརͳϒϥ΢βAIػೳ • Chrome DevToolsͰ΋AIΞγελϯεػೳ͕௥Ճ͞Ε͍ͯΔ • DevTools্͔ΒωοτϫʔΫ΍ΞΫηγϏϦςΟͳͲͷ໰୊ɺΤ ϥʔͷղੳ΍मਖ਼ͷࢧԉʹ࢖͑Δ • Chrome DevTools MCPΛ࢖ͬͯίʔσΟϯάΤʔδΣϯτʹWeb ϖʔδ্Ͱى͖͍ͯΔ໰୊ͷσόοάࢧԉ

Slide 37

Slide 37 text

ྫ$POTPMFλϒʹग़ͨΤϥʔΛ "*͕ղੳɾमਖ਼ఏҊͯ͘͠ΕΔ

Slide 38

Slide 38 text

ྫ/FUXPSLύωϧ্ͰϦιʔεͷ ಡΈࠐΈͷࣦഊݪҼΛ"*͕ղੳ

Slide 39

Slide 39 text

·ͱΊ • AIػೳͷ։ൃʹ͸ʮαʔόʔαΠυAIʯʮΫϥΠΞϯταΠυAIʯʮϋ ΠϒϦουAIʯͷύλʔϯ͕͋Δ • ΫϥΠΞϯταΠυAI͸ϓϥΠόγʔอޢ΍Ϣʔβʔମݧ޲্ɺίε τ࡟ݮͱ͍ͬͨϝϦοτ͕͋Δ • ΫϥΠΞϯταΠυAIΛ࢖͏APIͷWebඪ४Խ͕ਐΜͰ͍Δ • Ұ෦ͷϒϥ΢β૊ΈࠐΈAI API͕ChromeͰར༻Մೳʹͳ͍ͬͯΔ

Slide 40

Slide 40 text

Thanks!