各位前端的靓仔们，大家好！今天咱们来聊点刺激的：Vue.js 联手 TensorFlow.js，一起在浏览器里搞机器学习！是不是听起来就有点小激动？别怕，其实没那么难，我尽量用大白话给大家讲明白。
机器学习？前端也能玩？
以前一说机器学习，感觉就得后端服务器、Python、各种库，前端只能默默地展示结果。但 TensorFlow.js 的出现，改变了这一切！它让咱们也能在浏览器里直接跑模型，做图像识别、语音处理，甚至更多好玩的东西。
好处嘛，当然多多：
- 减少服务器压力： 很多计算都在客户端完成，减轻服务器负担。
- 保护用户隐私： 数据不用上传到服务器，隐私更有保障。
- 离线可用： 有些模型可以缓存到浏览器，离线也能用。
- 响应速度快： 客户端直接计算，响应速度更快。
准备工作：搭建 Vue.js 项目
俗话说得好，工欲善其事，必先利其器。咱们先搭个 Vue.js 项目，作为咱们的试验田。
如果你已经有 Vue 项目了，可以直接跳过这一步。
没有的话，打开你的终端，输入以下命令：
vue create my-tfjs-app然后根据提示选择你喜欢的配置。我一般会选择手动配置 (Manually select features)，然后选择 Babel, Router, Vuex, CSS Pre-processors (Sass/SCSS), Linter / Formatter 这些选项。
项目创建好后，进入项目目录：
cd my-tfjs-app接下来，安装 TensorFlow.js：
npm install @tensorflow/tfjs或者使用 yarn:
yarn add @tensorflow/tfjsOK，现在咱们的项目就准备好了！
图像识别：手把手教你识别猫猫狗狗
咱们先来个简单的：图像识别。用一个预训练好的模型，识别图片里的东西。
引入 TensorFlow.js
在你的 Vue 组件里，先引入 TensorFlow.js：
import * as tf from '@tensorflow/tfjs';
export default {
name: 'ImageClassifier',
data() {
return {
model: null,
imageUrl: null,
predictions: [],
};
},
mounted() {
this.loadModel();
},
methods: {
async loadModel() {
// 加载 MobileNet 模型
this.model = await tf.loadLayersModel('https://tfhub.dev/google/tfjs-model/imagenet/mobilenet_v2_100_224/classification/5/model.json');
console.log('Model loaded!');
},
async classifyImage() {
if (!this.model || !this.imageUrl) {
alert('请先加载模型并选择图片！');
return;
}
// 创建一个 Image 对象
const img = new Image();
img.src = this.imageUrl;
img.onload = async () => {
// 将图像转换为 TensorFlow Tensor
const tensor = tf.browser.fromPixels(img).resizeNearestNeighbor([224, 224]).toFloat().expandDims();
// 归一化
const offset = tf.scalar(127.5);
const normalized = tensor.sub(offset).div(offset);
// 进行预测
const predictions = await this.model.predict(normalized).data();
// 获取 Top 5 的预测结果
const top5 = Array.from(predictions)
.map((p, i) => ({
probability: p,
className: IMAGENET_CLASSES[i],
}))
.sort((a, b) => b.probability - a.probability)
.slice(0, 5);
this.predictions = top5;
};
},
onFileChange(e) {
const file = e.target.files[0];
this.imageUrl = URL.createObjectURL(file);
},
},
};
// ImageNet 类名
const IMAGENET_CLASSES = {
0: 'tench, Tinca tinca',
1: 'goldfish, Carassius auratus',
2: 'great white shark, white shark, man-eater, man-eating shark, Carcharodon carcharias',
3: 'tiger shark, Galeocerdo cuvieri',
4: 'hammerhead, hammerhead shark',
5: 'electric ray, crampfish, numbfish, torpedo',
6: 'stingray',
7: 'cock',
8: 'hen',
9: 'ostrich, Struthio camelus',
10: 'brambling, Fringilla montifringilla',
11: 'goldfinch, Carduelis carduelis',
12: 'house finch, linnet, Carpodacus mexicanus',
13: 'junco, snowbird',
14: 'indigo bunting, indigo finch, indigo bird, Passerina cyanea',
15: 'robin, American robin, Turdus migratorius',
16: 'bulbul',
17: 'jay',
18: 'magpie',
19: 'chickadee',
20: 'water ouzel, dipper',
21: 'kite',
22: 'bald eagle, American eagle, Haliaeetus leucocephalus',
23: 'vulture',
24: 'great grey owl, great gray owl, Strix nebulosa',
25: 'European fire salamander, Salamandra salamandra',
26: 'common newt, Triturus vulgaris',
27: 'eft',
28: 'spotted salamander, Ambystoma maculatum',
29: 'axolotl, mud puppy, Ambystoma mexicanum',
30: 'bullfrog, Rana catesbeiana',
31: 'tree frog, tree-frog',
32: 'tailed frog, bell toad, ribbed toad, Ascaphus trui',
33: 'loggerhead, loggerhead turtle, Caretta caretta',
34: 'leatherback turtle, leatherback, leathery turtle, Dermochelys coriacea',
35: 'mud turtle',
36: 'terrapin',
37: 'box turtle, box tortoise',
38: 'banded gecko',
39: 'common iguana, iguana, Iguana iguana',
40: 'American chameleon, anole, Anolis carolinensis',
41: 'whiptail, whiptail lizard',
42: 'agama',
43: 'frilled lizard, Chlamydosaurus kingi',
44: 'alligator lizard',
45: 'Gila monster, Heloderma suspectum',
46: 'green lizard, Lacerta viridis',
47: 'African chameleon, Chamaeleo chamaeleon',
48: 'Komodo dragon, Komodo lizard, dragon lizard, giant lizard, Varanus komodoensis',
49: 'African crocodile, Nile crocodile, Crocodylus niloticus',
50: 'American alligator, Alligator mississipiensis',
51: 'triceratops',
52: 'thunder snake, worm snake, Carphophis amoenus',
53: 'ringneck snake, ring-necked snake, Diadophis punctatus',
54: 'hognose snake, puff adder, sand viper',
55: 'green snake, grass snake',
56: 'king snake, kingsnake',
57: 'garter snake, grass snake',
58: 'water snake',
59: 'vine snake',
60: 'night snake, Hypsiglena torquata',
61: 'boa constrictor, Constrictor constrictor',
62: 'rock python, rock snake, Python sebae',
63: 'Indian cobra, Naja naja',
64: 'green mamba',
65: 'sea snake',
66: 'horned viper, cerastes',
67: 'diamondback, diamondback rattlesnake, Crotalus adamanteus',
68: 'sidewinder, horned rattlesnake, Crotalus cerastes',
69: 'trilobite',
70: 'harvestman, daddy longlegs, Phalangium opilio',
71: 'scorpion',
72: 'black and gold garden spider, Argiope aurantia',
73: 'barn spider, Araneus cavaticus',
74: 'garden spider, Aranea diademata',
75: 'black widow, Latrodectus mactans',
76: 'tarantula',
77: 'wolf spider, hunting spider',
78: 'tick',
79: 'mite',
80: 'grasshopper, hopper',
81: 'cricket',
82: 'walking stick, walkingstick, stick insect',
83: 'cockroach, roach',
84: 'mantis, mantid',
85: 'cicada, cicala',
86: 'leafhopper',
87: 'lacewing, lacewing fly',
88: "dragonfly, darning needle, devil's darning needle, sewing needle, snake feeder, snake doctor, mosquito hawk, skeeter hawk",
89: 'damselfly',
90: 'admiral',
91: 'ringlet, ringlet butterfly',
92: 'monarch, monarch butterfly, milkweed butterfly, Danaus plexippus',
93: 'cabbage butterfly',
94: 'sulphur butterfly, sulfur butterfly',
95: 'lycaenid, lycaenid butterfly',
96: 'starfish, sea star',
97: 'sea urchin',
98: 'sea cucumber, holothurian',
99: 'wood rabbit, cottontail, cottontail rabbit',
100: 'hare',
101: 'Angora, Angora rabbit',
102: 'hamster',
103: 'porcupine, hedgehog',
104: 'fox squirrel, eastern fox squirrel, Sciurus niger',
105: 'marmot',
106: 'beaver',
107: 'guinea pig, Cavia cobaya',
108: 'sorrel',
109: 'zebra',
110: 'hog, pig, grunter, squealer, Sus scrofa',
111: 'wild boar, boar, Sus scrofa',
112: 'warthog',
113: 'hippopotamus, hippo, Hippopotamus amphibius',
114: 'ox',
115: 'water buffalo, water ox, Asiatic buffalo, Bubalus bubalis',
116: 'bison',
117: 'ram, tup',
118: 'bighorn, bighorn sheep, Celeris canadensis',
119: 'ibex, Capra ibex',
120: 'hartebeest',
121: 'impala, Aepyceros melampus',
122: 'gazelle',
123: 'Arabian camel, dromedary, Camelus dromedarius',
124: 'llama',
125: 'weasel',
126: 'mink',
127: 'polecat, fitch, foulmart, Mustela putorius',
128: 'black-footed ferret, ferret, Mustela nigripes',
129: 'otter',
130: 'skunk, polecat, wood pussy',
131: 'badger',
132: 'armadillo',
133: 'three-toed sloth, ai, Bradypus tridactylus',
134: 'orangutan, orang, Pongo pygmaeus',
135: 'gorilla, Gorilla gorilla',
136: 'chimpanzee, chimp, Pan troglodytes',
137: 'gibbon, Hylobates lar',
138: 'siamang, Hylobates syndactylus, Symphalangus syndactylus',
139: 'guenon, guenon monkey',
140: 'patas, hussar monkey, Erythrocebus patas',
141: 'baboon',
142: 'macaque',
143: 'langur',
144: 'colobus, colobus monkey',
145: 'proboscis monkey, Nasalis larvatus',
146: 'marmoset',
147: 'capuchin, ringtail, Cebus capucinus',
148: 'howler monkey, howling monkey',
149: 'titi, titi monkey',
150: 'spider monkey, Ateles geoffroyi',
151: 'squirrel monkey, Saimiri sciureus',
152: 'madril',
153: 'star-nosed mole, Condylura cristata',
154: 'European mole, Talpa europaea',
155: 'common shrew, Sorex araneus',
156: 'opossum, Didelphis marsupialis',
157: 'echidna, spiny anteater, anteater',
158: 'platypus, duckbill, duckbilled platypus, duck-billed platypus, Ornithorhynchus anatinus',
159: 'wallaby, brush kangaroo',
160: 'koala, koala bear, kangaroo bear, native bear, Phascolarctos cinereus',
161: 'wombat',
162: 'jellyfish',
163: 'sea anemone, anemone',
164: 'coral reef',
165: 'sturgeon',
166: 'gar, garfish, garpike, billfish, Lepisosteus osseus',
167: 'lionfish',
168: 'puffer, pufferfish, blowfish, globefish',
169: 'abacus',
170: 'abaya',
171: "academic gown, academic robe, judge's robe",
172: 'accordion, piano accordion, squeeze box',
173: 'acoustic guitar',
174: 'aircraft carrier, carrier, flattop, attack aircraft carrier',
175: 'airliner',
176: 'airmail',
177: 'airship, dirigible',
178: 'altar',
179: 'ambulance',
180: 'amphibian, amphibious vehicle',
181: 'analog clock',
182: 'apiary, bee house',
183: 'apron',
184: 'ashcan, trash can, garbage can, wastebin, ash bin, ash-bin, ashbin, dustbin, trash barrel, trash bin',
185: 'assault rifle, assault gun',
186: 'backpack, back pack, knapsack, packsack, rucksack, haversack',
187: 'bakery, bakeshop, bakehouse',
188: 'balance beam, beam',
189: 'balloon',
190: 'ballpoint, ballpoint pen, ballpen, Biro',
191: 'Band Aid',
192: 'banjo',
193: 'banner, streamer',
194: 'barbell',
195: 'barber chair',
196: 'barometer',
197: 'barrel, cask',
198: 'barrow, garden cart, lawn cart, wheelbarrow',
199: 'baseball',
200: 'basketball',
201: 'bassinet',
202: 'bassoon',
203: 'bathing cap, swimming cap',
204: 'bath towel',
205: 'bathtub, bathing tub, bath, tub',
206: 'beach wagon, station wagon, wagon, estate car, beach waggon, station waggon, waggon',
207: 'beacon, lighthouse, beacon light, pharos',
208: 'beaker',
209: 'bearskin, busby, shako',
210: 'beer bottle',
211: 'beer glass',
212: 'bell cote, bell cot',
213: 'bib',
214: 'bicycle-built-for-two, tandem bicycle, tandem',
215: 'bikini, two-piece',
216: 'binder, ring-binder',
217: 'binoculars, field glasses, opera glasses',
218: 'birdhouse',
219: 'biscuit',
220: 'blackboard, chalkboard',
221: "blanket, cover",
222: 'blimp, dirigible',
223: 'blouse',
224: 'boathouse',
225: 'bobsled, bobsleigh, bob',
226: 'bolo tie, bolo, bola tie, bola',
227: 'bonnet, poke bonnet',
228: 'bookcase',
229: 'bookshop, bookstore, bookstall',
230: 'bottlecap',
231: 'bow',
232: 'bow tie, bow-tie, bowtie',
233: 'brass, memorial tablet, plaque',
234: 'brassiere, bra, bandeau',
235: 'breakwater, groin, groyne, mole, bulwark, seawall, jetty',
236: 'breechcloth, breechclout',
237: 'bric-a-brac',
238: 'brickyard',
239: 'bridge, span',
240: 'broccoli',
241: 'broom',
242: 'bucket, pail',
243: 'buckle',
244: 'bulletproof vest',
245: 'bullhorn, megaphone',
246: 'bullock cart, ox cart',
247: 'burrito',
248: 'bus stop, bus shelter',
249: 'butcher shop, meat market',
250: 'cabinet',
251: 'caldron, cauldron',
252: 'candle, taper, wax light',
253: 'cannon',
254: 'canoe',
255: 'can opener, tin opener',
256: 'cardigan',
257: 'car mirror',
258: 'carousel, carrousel, merry-go-round, roundabout, whirligig',
259: "carpenter's kit, tool kit",
260: 'carton',
261: 'car wheel',
262: 'cash machine, cash dispenser, automated teller machine, automatic teller machine, ATM',
263: 'cassette',
264: 'cassette player',
265: 'castle',
266: 'catamaran',
267: 'CD player',
268: 'cello, violoncello',
269: 'cellular telephone, cellular phone, cellphone, cell, mobile phone',
270: 'chain',
271: 'chain saw, chainsaw',
272: 'chest',
273: 'chiffonier, commode',
274: 'chime, gong, bell',
275: 'china cabinet, china closet',
276: 'Christmas stocking',
277: 'church, church building',
278: 'cinema, movie theater, movie theatre, movie house, picture palace',
279: 'cleaver, meat cleaver, chopper',
280: 'cliff, drop, drop-off',
281: 'cloak',
282: 'clog, geta, patten, sabot',
283: 'clothesline, wash line',
284: 'cocktail shaker',
285: 'coffee mug',
286: 'coffeepot',
287: 'coil, spiral, volute, whorl, helix',
288: 'combination lock',
289: 'computer keyboard, keypad',
290: 'confectionery, sweetshop',
291: 'console table, console',
292: 'container ship, containership, container vessel',
293: 'convertible',
294: 'corkscrew, bottle screw',
295: 'cornet, horn, trumpet, trump',
296: 'cowbell',
297: 'cradle',
298: 'crane',
299: 'crash helmet',
300: 'crate',
301: 'crib',
302: 'crock pot',
303: 'croquet ball',
304: 'crutch',
305: 'cuirass',
306: 'dam, dike, dyke',
307: 'desk',
308: 'desktop computer',
309: 'dial telephone, dial phone',
310: 'diaper, nappy, napkin',
311: 'digital clock',
312: 'digital watch',
313: 'dining table, board',
314: 'dishcloth, dish towel',
315: 'dishwasher, dish washer, dishwashing machine',
316: 'disk brake, disc brake',
317: 'dock, wharf, pier, quay, landing stage',
318: 'dog sled, dog sleigh, dog sledge',
319: 'dome',
320: 'doormat, welcome mat',
321: 'drilling platform, offshore platform',
322: 'drum',
323: 'drumstick',
324: 'dumbbell',
325: 'Dutch oven',
326: 'electric fan, blower',
327: 'electric guitar',
328: 'electric locomotive',
329: 'entertainment center',
330: 'envelope',
331: 'espresso maker',
332: 'face powder',
333: 'feather boa, boa',
334: 'file, file cabinet, filing cabinet',
335: 'fireboat',
336: 'fire engine, fire truck',
337: 'fire screen, fireguard',
338: 'flagpole, flagstaff',
339: 'flute, transverse flute',
340: 'folding chair',
341: 'football helmet',
342: 'forklift',
343: 'fountain',
344: 'fountain pen',
345: 'four-poster',
346: 'freight car',
347: 'French horn, horn',
348: 'frying pan, frypan, skillet',
349: 'fur coat',
350: 'garbage truck, dustcart',
351: 'gasmask, respirator, gas helmet',
352: 'gas pump, gasoline pump, petrol pump, island dispenser',
353: 'goblet',
354: 'go-kart',
355: 'golf ball',
356: 'golfcart, golf cart',
357: 'gondola',
358: 'gong, tam-tam',
359: 'gown',
360: 'grand piano, grand',
361: 'greenhouse, nursery, glasshouse',
362: 'grille, radiator grille',
363: 'grocery store, grocery, food market, market',
364: 'guillotine',
365: 'hair slide',
366: 'hair spray',
367: 'half track',
368: 'hammer',
369: 'hamper',
370: 'hand blower, blow dryer, hair dryer, hair drier',
371: 'hand-held computer, hand-held device',
372: 'handkerchief, hankie, hanky, kerchief',
373: 'hard disc, hard disk, fixed disk',
374: 'harmonica, mouth organ, harp, mouth harp',
375: 'harp',
376: 'harvester, reaper',
377: 'hatchet',
378: 'holster',
379: 'home theater, home theatre',
380: 'honeycomb',
381: 'hook, claw',
382: 'hoopskirt, crinoline',
383: 'horizontal bar, high bar',
384: 'horse cart, horse-drawn vehicle',
385: 'hourglass',
386: 'iPod',
387: 'iron, smoothing iron',
388: "jack-o'-lantern",
389: 'jean, blue jean, denim',
390: 'jeep, landrover',
391: 'jersey, T-shirt, tee shirt',
392: 'jigsaw puzzle',
393: 'jinrikisha, ricksha, rickshaw',
394: 'joystick',
395: 'kimono',
396: 'knee pad',
397: 'knot',
398: 'lab coat, laboratory coat',
399: 'ladle',
400: 'lampshade, lamp shade',
401: 'laptop, laptop computer',
402: 'lawn mower, mower',
403: 'lens cap, lens cover',
404: 'letter opener, paper knife, paperknife',
405: 'library',
406: 'lifeboat',
407: 'lighter, light, igniter, ignitor',
408: 'limousine, limo',
409: 'liner, ocean liner',
410: 'lipstick, lip rouge',
411: 'loafer',
412: 'lotion',
413: 'loudspeaker, speaker, speaker unit, loudspeaker system',
414: "loupe, jeweler's loupe",
415: 'lumbermill, sawmill',
416: 'magnetic compass',
417: 'mailbag, postbag',
418: 'mailbox, letter box',
419: 'maillot',
420: 'mansion',
421: 'maraca',
422: 'marimba, xylophone',
423: 'mask',
424: 'matchstick',
425: 'maypole',
426: 'maze, labyrinth',
427: 'measuring cup',
428: 'medicine chest, medicine cabinet',
429: 'megalith, megalithic structure',
430: 'microphone, mike',
431: 'microwave, microwave oven',
432: 'military uniform',
433: 'milk can',
434: 'miniskirt, mini',
435: 'minivan',
436: 'missile',
437: 'mitten',
438: 'mixing bowl',
439: 'mobile home, manufactured home',
440: 'model T',
441: 'modem',
442: 'monastery',
443: 'monitor',
444: 'moped',
445: 'mortar',
446: 'mortarboard',
447: 'mosque',
448: 'mosquito net',
449: 'motor scooter, scooter',
450: 'mountain bike, all-terrain bike, off-roader',
451: 'mountain climber',
452: 'moving van',
453: 'muzzle',
454: 'nail',
455: 'neck brace',
456: 'necklace',
457: 'nipple',
458: 'notebook, notepad',
459: 'obelisk',
460: 'oboe, hautboy, hautbo',
461: 'ocarina, sweet potato',
462: 'odometer, hodometer, mileometer, milometer',
463: 'oil filter',
464: 'organ, pipe organ',
465: 'oscilloscope, scope, cathode-ray oscilloscope, CRO',
466: 'overskirt',
467: 'oxcart',
468: 'oxygen mask',
469: 'packet',
470: 'paddle, boat paddle',
471: 'paddlewheel, paddle wheel',
472: 'padlock',
473: 'paintbrush',
474: 'pajama, pyjama, pj's, jammies',
475: 'palace',
476: 'panpipe, pandean pipe, syrinx',
477: 'paper towel',
478: 'parachute, chute',
479: 'parallel bars, bars',
480: 'park bench',
481: 'parking meter',
482: 'passenger car, coach, carriage',
483: 'patio, terrace',
484: 'pay-phone, pay-station',
485: 'pedestal, plinth, footstall',
486: 'pencil box, pencil case',
487: 'pencil sharpener',
488: 'perfume, essence',
489: 'Petri dish',
490: 'photocopier',
491: 'piano, pianoforte, fortepiano',
492: 'pickle',
493: 'pick, plectrum, plectron',
494: 'pickup truck, pickup',
495: 'pier',
496: 'piggy bank, penny bank',
497: 'pill bottle',
498: 'pillow',
499: 'ping-pong ball',
500: 'pinwheel',
501: 'pirate, pirate ship',
502: 'pitcher, ewer',
503: 'plane, airplane, aeroplane',
504: 'planetarium',
505: 'plastic bag',
506: 'plate rack',
507: 'plow, plough',
508: 'plunger, plumber's helper',
509: 'polaroid camera, Polaroid Land camera',
510: 'pole',
511: 'police van, police wagon, paddy wagon, patrol wagon, wagon, black Maria',
512: 'poncho',
513: 'pool table, billiard table, snooker table',
514: 'pop bottle, soda bottle',
515: 'pot, flowerpot',
516: 'potting soil',
517: 'power drill',
518: 'prayer rug, prayer mat',
519: 'printer',
520: 'prison, jail',
521: 'projectile, missile',
522: 'projector',
523: 'puck, hockey puck',
524: 'punching bag, punch bag, punching ball, punchball',
525: 'purse',
526: 'quill, quill pen',
527: 'quilt, comforter, comfort, puff',
528: 'racer, race car, racing car',
529: 'radiator',
530: 'radio, wireless',
531: 'radio telescope, radio reflector',
532: 'rain barrel',
533: 'ramen bowl',
534: 'range hood, extractor hood',
535: 'rapeseed',
536: 'reamer, rose reamer',
537: 'rearview mirror, looking glass',
538: 'refrigerator, icebox',
539: 'remote control, remote',
540: 'restaurant, eating house, eating place, eatery',
541: 'revolver, six-gun, six-shooter',
542: 'rifle',
543: 'rocking chair, rocker',
544: 'rotisserie',
545: 'rubber eraser, rubber, pencil eraser',
546: 'rugby ball',
547: 'rule, ruler',
548: 'running shoe',
549: 'safe',
550: 'safety helmet',
551: 'salad bowl',
552: 'saltshaker, salt shaker',
553: 'sandal',
554: 'sandwich',
555