├── README.md
├── app.css
├── app.js
├── index.html
├── objects-1.json
└── objects-2.json


/README.md:
--------------------------------------------------------------------------------
 1 | # object-detection-example
 2 | Object Detection with P5 & ML5 js
 3 | 
 4 | 
 5 | Öncelikle `objects-{}.js` dosyalarından herhangi birinde objelerini belirtin.
 6 | Bellirlediğiniz objelerin 2 tane özelliği olmalı. 
 7 | * name = isim 
 8 | * keypress = herhangi tuşa basınca eğitilecek olan örneğin ekleneceği.
 9 |  
10 | Daha sonra nesnelerinizin tanınması için gerekli örnekleri eklediğinizde (ve bundan emin olduğunuzda ) `s` tuşuna basarak oluşan
11 | modeli indirip proje dizinine alınız.
12 | En son olarak ise `modelReady` fonksiyonunda bu modeli yükleyiniz.
13 | 
14 | 
15 | İyi eğlenceler ✨
16 | 


--------------------------------------------------------------------------------
/app.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | body {
 8 |   display: inline-flex;
 9 |   flex-direction: column;
10 |   background: #111;
11 |   color: #fff;
12 |   font-family: 'Open Sans', sans-serif;
13 | }
14 | 
15 | .resultLabel {
16 |   font-size: 1.3em;
17 |   padding: 20px 30px;
18 |   border: .3px solid #fff;
19 |   text-align: center;
20 | }
21 | 
22 | .objectsInfo {
23 |   margin-top: 10px;
24 | }
25 | 
26 | .objectsInfo p {
27 |   padding: 10px;
28 |   text-align: center;
29 | }


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | let video;
 2 | let features;
 3 | let knn;
 4 | let resultHtml;
 5 | let ready = false;
 6 | objects = [];
 7 | let label = '-';
 8 | 
 9 | 
10 | const height = 700,
11 | width = 950;
12 | 
13 | async function setup() {
14 |   fetch('./objects-1.json').then(res => res.json()).then(res => {
15 |     objects = res.objects;
16 |     drawObjects();
17 |   })
18 |   createCanvas(width, height);
19 |   video = createCapture(VIDEO);
20 |   video.hide();
21 |   features = ml5.featureExtractor('MobileNet', modelReady);
22 |   knn = ml5.KNNClassifier();
23 |   resultHtml = createP('Modelleri eğitin !');
24 |   resultHtml.class('resultLabel')
25 | }
26 | 
27 | function goClassify() {
28 |   const logits = features.infer(video);
29 |   knn.classify(logits, function(error, result) {
30 |     if (error) {
31 |       console.error(error);
32 |     } else {
33 |       label = result.label;
34 |       resultHtml.html(result.label);
35 |       goClassify();
36 |     }
37 |   });
38 | }
39 | 
40 | function keyPressed() {
41 |   const logits = features.infer(video);
42 |   objects.forEach(object => {
43 |     if (key == object.keypress.toString()) {
44 |       knn.addExample(logits, object.name.toString());
45 |     }
46 |     else if (key == 's') {
47 |       knn.save();
48 |     }
49 |   })
50 | }
51 | 
52 | function modelReady() {
53 |   console.log('model ready!');
54 |   //  modelinizi iyice eğitinize emin olduktan sonra modelinizi yükleyin, ve model eğitimini durdurun.
55 |   // knn.load('model.json', function() {
56 |   //   console.log('knn loaded');
57 |   // });
58 | }
59 | 
60 | function drawObjects() {
61 |   const objectsDiv = createDiv();
62 |   objectsDiv.class('objectsInfo');
63 |   objects.forEach(object => {
64 |     const oEl = createP(`${object.name} objesini eğitmek için ${object.keypress} tuşuna basarak örnek ekleyiniz`);
65 |     objectsDiv.child(oEl);
66 |   })
67 |   const saveEl = createP();
68 |   saveEl.html(`Modeli kaydetmek için <b>S</b> tuşuna basınız`)
69 |   objectsDiv.child(saveEl);
70 | }
71 | 
72 | function draw() {
73 |   image(video, 0, 0 , width, height);
74 |   if (!ready && knn.getNumLabels() > 0) {
75 |     goClassify();
76 |     ready = true;
77 |   }
78 | }
79 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600i&display=swap&subset=latin-ext" rel="stylesheet">
 8 |   <link rel="stylesheet" href="app.css">
 9 | 
10 | 	<title>Object Detection</title>
11 | 
12 | 	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
13 | 	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
14 |   <script src="https://unpkg.com/ml5@0.2.1/dist/ml5.min.js"></script>
15 | 	<script src="app.js"></script>
16 | 
17 | </head>
18 | <body>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/objects-1.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "objects": [
 3 |     {
 4 |       "name": "👍",
 5 |       "keypress": 1
 6 |     },
 7 |     {
 8 |       "name": "👎",
 9 |       "keypress": 2
10 |     },
11 |     {
12 |       "name": "👌",
13 |       "keypress": 3
14 |     },
15 |     {
16 |       "name": "✋",
17 |       "keypress": 4
18 |     }
19 |   ]
20 | }


--------------------------------------------------------------------------------
/objects-2.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "objects": [
 3 |     {
 4 |       "name": "Çay",
 5 |       "keypress": 1
 6 |     },
 7 |     {
 8 |       "name": "Kulaklık",
 9 |       "keypress": 2
10 |     },
11 |     {
12 |       "name": "Telefon",
13 |       "keypress": 3
14 |     },
15 |     {
16 |       "name": "Saat",
17 |       "keypress": 4
18 |     }
19 |   ]
20 | }


--------------------------------------------------------------------------------