1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<title>Image Classifier With Teachable Machines</title>
<!--
<link rel="stylesheet" href="https://unpkg.com/latex.css/style.min.css" />
-->
<link rel="stylesheet" href="/assets/c-hyde.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">
<link rel="stylesheet" href="/assets/main.css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="og:site_name" content="Navan Chauhan" />
<link rel="canonical" href="https://web.navan.dev/posts/2019-12-04-Google-Teachable-Machines.html" />
<meta name="twitter:url" content="https://web.navan.dev/posts/2019-12-04-Google-Teachable-Machines.html" />
<meta name="og:url" content="https://web.navan.dev/posts/2019-12-04-Google-Teachable-Machines.html" />
<meta name="twitter:title" content="Image Classifier With Teachable Machines" />
<meta name="og:title" content="Image Classifier With Teachable Machines" />
<meta name="description" content="Tutorial on creating a custom image classifier quickly with Google Teachable Machines" />
<meta name="twitter:description" content="Tutorial on creating a custom image classifier quickly with Google Teachable Machines" />
<meta name="og:description" content="Tutorial on creating a custom image classifier quickly with Google Teachable Machines" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/images/favicon.png" type="image/png" />
<link rel="alternate" href="/feed.rss" type="application/rss+xml" title="Subscribe to Navan Chauhan" />
<meta name="twitter:image" content="https://web.navan.dev/images/opengraph/posts/2019-12-04-Google-Teachable-Machines.png" />
<meta name="og:image" content="https://web.navan.dev/images/opengraph/posts/2019-12-04-Google-Teachable-Machines.png" />
<meta name="google-site-verification" content="LVeSZxz-QskhbEjHxOi7-BM5dDxTg53x2TwrjFxfL0k" />
<script data-goatcounter="https://navanchauhan.goatcounter.com/count"
async src="//gc.zgo.at/count.js"></script>
<script defer data-domain="web.navan.dev" src="https://plausible.io/js/plausible.js"></script>
<link rel="manifest" href="/manifest.json" />
</head>
<body class="theme-base-0d">
<div class="sidebar">
<div class="container sidebar-sticky">
<div class="sidebar-about">
<h1><a href="/">Navan</a></h1>
<p class="lead" id="random-lead">Alea iacta est.</p>
</div>
<ul class="sidebar-nav">
<li><a class="sidebar-nav-item" href="/about/">about/links</a></li>
<li><a class="sidebar-nav-item" href="/posts/">posts</a></li>
<li><a class="sidebar-nav-item" href="/3D-Designs/">3D designs</a></li>
<li><a class="sidebar-nav-item" href="/feed.rss">RSS Feed</a></li>
<li><a class="sidebar-nav-item" href="/colophon/">colophon</a></li>
</ul>
<div class="copyright"><p>© 2019-2024. Navan Chauhan <br> <a href="/feed.rss">RSS</a></p></div>
</div>
</div>
<script>
let phrases = [
"Something Funny", "Veni, vidi, vici", "Alea iacta est", "In vino veritas", "Acta, non verba", "Castigat ridendo mores",
"Cui bono?", "Memento vivere", "अहम् ब्रह्मास्मि", "अनुगच्छतु प्रवाहं", "चरन्मार्गान्विजानाति", "coq de cheval", "我愛啤酒"
];
let new_phrase = phrases[Math.floor(Math.random()*phrases.length)];
let lead = document.getElementById("random-lead");
lead.innerText = new_phrase;
</script>
<div class="content container">
<div class="post">
<h1 id="image-classifier-with-teachable-machines">Image Classifier With Teachable Machines</h1>
<p>Made for Google Code-In</p>
<p><strong>Task Description</strong></p>
<p>Using Glitch and the Teachable Machines, build a Book Detector with Tensorflow.js. When a book is recognized, the code would randomly suggest a book/tell a famous quote from a book. Here is an example Project to get you started: https://glitch.com/~voltaic-acorn</p>
<h3 id="details">Details</h3>
<p>1) Collecting Data</p>
<p>Teachable Machine allows you to create your dataset just by using your webcam! I created a database consisting of three classes ( Three Books ) and approximately grabbed 100 pictures for each book/class</p>
<p><img src="/assets/gciTales/01-teachableMachines/01-collect.png" alt="" /></p>
<p>2) Training</p>
<p>Training on teachable machines is as simple as clicking the train button. I did not even have to modify any configurations. </p>
<p><img src="/assets/gciTales/01-teachableMachines/02-train.png" alt="" /></p>
<p>3) Finding Labels</p>
<p>Because I originally entered the entire name of the book and it's author's name as the label, the class name got truncated (Note to self, use shorter class names :p ). I then modified the code to print the modified label names in an alert box. </p>
<p><img src="/assets/gciTales/01-teachableMachines/03-label.png" alt="" /></p>
<p><img src="/assets/gciTales/01-teachableMachines/04-alert.png" alt="" /></p>
<p>4) Adding a suggestions function</p>
<p>I first added a text field on the main page and then modified the JavaScript file to suggest a similar book whenever the model predicted with an accuracy >= 98% </p>
<p><img src="/assets/gciTales/01-teachableMachines/05-html.png" alt="" /></p>
<p><img src="/assets/gciTales/01-teachableMachines/06-js.png" alt="" /></p>
<p>5) Running!</p>
<p>Here it is running!</p>
<p><img src="/assets/gciTales/01-teachableMachines/07-eg.png" alt="" /></p>
<p><img src="/assets/gciTales/01-teachableMachines/08-eg.png" alt="" /></p>
<p>Remix this project:-</p>
<p>https://luminous-opinion.glitch.me</p>
</div>
<blockquote>If you have scrolled this far, consider subscribing to my mailing list <a href="https://listmonk.navan.dev/subscription/form">here.</a> You can subscribe to either a specific type of post you are interested in, or subscribe to everything with the "Everything" list.</blockquote>
<script data-isso="https://comments.navan.dev/"
src="https://comments.navan.dev/js/embed.min.js"></script>
<section id="isso-thread">
<noscript>Javascript needs to be activated to view comments.</noscript>
</section>
</div>
<script src="assets/manup.min.js"></script>
<script src="/pwabuilder-sw-register.js"></script>
</body>
</html>
|
