Play with computer vision using teachable machine

Nowadays, with the existing tools, creating an AI application is not so complicated. In this post, I will quickly show how easy you can make a computer vision project within 10 minutes.

Steps

1. Create a computer vision project in Teachable machine
2. Prepare some images of different classes, e.g. cup, people, hand.
3. Upload photos and train the model
4. Download the model and integrate to your website (web app)
5. Public your website

Demo web app

For the demonstration, please visit https://d3nyena5czf5f1.cloudfront.net/index.html

The implementation is simple with AWS S3 and CloudFront.

Quick video tutorial

Hosting your site with AWS s3

You can use Amazon S3 to host a static website. On a static website, individual webpages include static content. They might also contain client-side scripts.

By contrast, a dynamic website relies on server-side processing, including server-side scripts such as PHP, JSP, or ASP.NET. Amazon S3 does not support server-side scripting, but AWS has other resources for hosting dynamic websites.

To enable static website hosting

1. Sign in to the AWS Management Console and open the Amazon S3 console at https://console.aws.amazon.com/s3/.
2. In the Buckets list, choose the name of the bucket that you want to enable static website hosting for.
3. Choose Properties.
4. Under Static website hosting, choose Edit.
5. Choose Use this bucket to host a website.
6. Under Static website hosting, choose Enable.
7. In Index document, enter the file name of the index document, typically index.html.The index document name is case sensitive and must exactly match the file name of the HTML index document that you plan to upload to your S3 bucket. When you configure a bucket for website hosting, you must specify an index document. Amazon S3 returns this index document when requests are made to the root domain or any of the subfolders. For more information, see Configuring an index document.
8. To provide your own custom error document for 4XX class errors, in Error document, enter the custom error document file name.The error document name is case sensitive and must exactly match the file name of the HTML error document that you plan to upload to your S3 bucket. If you don’t specify a custom error document and an error occurs, Amazon S3 returns a default HTML error document. For more information, see Configuring a custom error document.
9. (Optional) If you want to specify advanced redirection rules, in Redirection rules, enter XML to describe the rules.For example, you can conditionally route requests according to specific object key names or prefixes in the request. For more information, see Configure redirection rules to use advanced conditional redirects.
10. Choose Save changes.Amazon S3 enables static website hosting for your bucket. At the bottom of the page, under Static website hosting, you see the website endpoint for your bucket.
11. Under Static website hosting, note the Endpoint.The Endpoint is the Amazon S3 website endpoint for your bucket. After you finish configuring your bucket as a static website, you can use this endpoint to test your website.

Source code

You can get the computer vision project source code from GitHub.