BOTAN

UI Design · Mobile design · researcH

2021

Client

SMC | Design For the Future

My Role

Product Designer
UI Designer
UX Researcher

Team

Will Gamez
Zephyr Swart

Time frame

8 Weeks

Tools

Figma
Google Workspace
Teachable Machine
p5.js

Project Overview

For this final project, I wanted to create something that got me to move out of my house. I decided to take photos of flowers in my neighborhood and train a Teachable Machine to recognize and Identify different flowers from the sample of my neighborhood flowers. You may be wondering why "Botan." Well, in Greek, "Botan" means "plant or herb," and "Botan" is the root for a botanist who is an expert in or student of the scientific study of plants.

THE PLAN

I went for a walk and took photos of the different types of flowers in my neighborhood. I organized the images into like types of flowers. Then, imported them into the Teachable Machines and trained my model to identify the information.

DATA COLLECTION

I took to my neighborhood on a lovely walk to gather images of my local flowers. I took over 400 photos (many were of the same bush because of the lack of sample size I had accessible.) Which leads me too...

The little hiccup in the plan...(☉__☉”)

Unfortunately, I haven't been on a walk in that part of my neighborhood in a while and a lot of the houses have redone their lawns and or moved flower beds from sidewalk access. In my neighborhood, there weren't many variations of flowers. Almost all lawns are drought resistant (with rocks, succulents, or "wild" drought-resistant flowers), or leaf-based bushes and shrubs. The flowers like colorful roses and other like flowers were not available to access by sidewalk view. This narrowed down my sample size greatly so I ran into a couple of issues when training the model.

These images sum up the type of lawns I encountered. Screenshots from Google Maps of the actual houses I passed.

Other Flowers I found
‍

I found other flowers but I wish there were more of them to extract a larger sample size of images.

Training the AI

After gathering the data it was time to upload the images into the machine.
‍
Another road bump!!!
‍
I originally wanted to upload the images to the Teachable Machine on my smartphone and be able to test the AI. But my phone was not powerful enough to load the webpage and train the Machine. Instead, I waited until I got home to upload the images to my PC.

Link to Teachable Machine Model

Uploading the images on my PC was a lot better than on my phone. Here you can see the model working with an image I had it identify.

P5.JS

In p5.js I uploaded the Teachable Machine Model URL to sync up with my file to allow identification of flowers. This is where things went wrong.

A big problem I had was syncing up the Teachable Machine to p5.js code. It worked with an old model but when coming to this project I'm not sure it was able to scan my images and give me a response. Long story short I forgot to add "model" in the "model.json" addition at the end of the Machine Learning shareable link.

View p5.js File

P5.JS & Teachable Machine Scanning

When scanning an image for each of the 4 variables in Teachable Machines the Ai was a lot better/ more responsive at picking up and displaying the proper identifying names. The only flower that was consistently recognized by the AI was "Bougainvillea" and regularly thought that everything even just me was "White Rose". I wasn't so stoked about this result from the teachable tech. I did decide to upload duplicates of the same photos. This boosted the likelihood of showing the proper label.

Mocking up a higher sample size:

I did decide to upload duplicates of the same photos. This boosted the likelihood of showing the proper label. I was finally able to get the Ai to pick up the Purple Morning Flower through p5.js!

Reflection

Problem

I believe the AI's inability to recognize images is a result of poor data collection. I didn't find as many flowers as I would have liked to.

Solution

To solve this, I would go to a different location somewhere else. Where I can take more images to train the Ai Better.

Also, I would like to switch the camera frame view to 750px x 1334px so the camera could fit an iPhone screen.

My Contributions

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Reflection

I learned a lot from this project. I would not consider myself a fluent coder. I tend to second guess myself when it comes to code. But for this project when I asked for help because of a broken or funky code. I was missing one word everything else I understood. Now that I know a little more about training and using Ai models. Some concepts that I have had are not a lot more feasible.