No Code Machine Learning Workshop

Building an AI web app with low code.

Evelyn J. Boettcher

2023-12-03

Welcome

• Please grab a pencil/pen and paper. (Reflection afterwards)
• Please go to github for code
  • Download the repo

github

ML with Teachable Machines

First

Let’s get in the right mindset.

• We are all learners and we are all teachers.
  • please, ask and give help as needed
• Everyone here is valued and respected
• Got Stuck:
  • Break it up and try again
• This is an intro (e.g. Taste / sample of a technical skills)
  • Want to build a more powerful app or dig deeper
    • Go to Tensorflow website

About Me

Evelyn J. Boettcher

Evelyn Boettcher

• Mom
• Loves to sew and cook
• I speak one language well and that is python!
• Trained Physicist (I have a Master’s degree)
• I like to make things
  • I have patents
  • Made IoT devices to automate house
• Member of GemCity.TECH and Google Women Techmaker Ambassador

Today’s Goal

• Train a model to classify hand gestures
  • Learn what a classifier is
• Use conditional statements to turn those classes into and emoji
• Build a Web application

Demo

Let’s check it out.

• Final Site: Web app
• Demo Code: Code that runs web app
• Student Code: Student Starter code

Copy Code

All code is located on ejboettcher’s github site.

https://github.com/ejboettcher/gemcityML-No-CodeAI

Student code is located in this folder:

• docs/student_application_starter

github

Classifications and Models:

We are going to build a model that classifies between two (or more) classes.

Classification

A category into which something is put.

Model

Tries to predict the correct label of a given input data.
The model is trained using the training data, and then it is evaluated on test data.

Classification

Your task is to group monkeys into two classes:

• Class_1: Biting Monkey
• Class_2: Non-Biting Monkeys

Materials: Each group gets one set of blue monkey carts

Classification: Challenge

• Develop a rule to define: Biting and NonBiting
• Separate your codes by that rule
• Repeat until all of your cards can follow your rule.

Image from Huffington Post.

Class_1: Biting	Class_2: Non Biting
card c	card d
card a	card b
…	…

Classification: Wrap up

• What Rule did you use to determine which class the Monkey belongs to?

• Does your model hold up?

Visual

• Class_1= Biting Monkey
• Class_2= Non-Biting Monkeys

Rule

Classification: Share Out

Model: The set of rules and steps to make a prediction

What is your group’s model for classifying monkeys?

• Class_1: Biting Monkey
• Class_2: Non-Biting Monkeys

---

Classification: Man vs Machine

In this monkey example, we (human) could infer the model (set of rules). Software Engineering is when a human makes a rule that the machine follows.

Most Machine learning classifiers, the “rules” of the model are unknown to us. We only get hte output of the machine assigned classes. Machine learning is when the machine creates the rules for the machine to follow.

Machine Learning

Video by OxfordSparks:

Break

Before we get to building our machine learning model, lets take a break.

• Stand up
• Stretch
• Walk Around
• Get some water

Building a ML Model

There are three basic steps to building a model

• Train the model
• Export the model
• Use the model
• Forth Step: Repeat

Why a forth step

Your model, app etc will not work the first time.

computer_fire

Train the Model

• Google “Teachable Machine”
  • Click Get Started
  • Click Image Project (standard model)
• Rename Class_1: Thumbs Up
• Add Image Samples by, clicking Webcam
• Put only your hand in the webcam
  • Make a thumbs up sign
  • Click record
  • repeat, with hand in new parts of screen
• Repeat with a new class: Thumbs Down
• Click Train Model
• Test the accuracy of your model: Record more images if needed

Teachable Machine

Export the Model

• In Teachable Machine, click Export Model
• Then click Upload my model
• click Copy
• Leave tab open (may need to retrain)

Use the Model

• In a new tab, go to
  • Student Code
  • Download student_application_starter
  • OR fork code
• Open my_model.js using any IDE. Github has an online IDE
  • Popular IDES
    • VS-Code
    • CodePen
    • Github
• Update the URL in the my_model.js (line 5)
• Run and test your app

---

Running and Testing

WOW, this is a hard step.

• We can edit and run it in Github (fork code).
• Codepen.io
  • Let’s use Codepen.io
• Or run it on our computer
  • python -m http.server
    • must use localhost:8000

Stretch Goals

Level	Goal
Mild	Add a third class to your model
Hot	Add another else if to the my_model.js
Spicy	The application can not handle when there is no gestures. Can you fix that within the application or model
Insanity	Update the css to make it look nice

Stretch Goals:

Conditional Statements

if this is true then, else do this.

if you are in 9th grade (the condition)

• Raise your hand

else

• Fold your hands on your desk

All computer programs have the ability to do an if/else (conditional) statements.

Javascript Syntax

We will be using a computer language called Javascript.

Syntax is the rules that control the structure of the symbols, punctuation, and words of a programming language.

---

Single condition: syntax (if/else)

What structure do you see.

if (condition){
    \\ Do this
} else {
    \\ Do this
}

Multiple condition:

Syntax (if/else if / else)

if (condition){
    \\ Do this action
}else if (condition){
    \\ Do this action 2
} else {
    \\ Do this action 3
}

With more than one condition (checking for true), use else if.

Google is your friend

When stuck, google. Stack overflow is your best friend

• Include language: javescript
• What you are trying to do: if statement

Example: javescript if statement

Student’s ML Gesture Demo

• Show your working app
• Show us the code
• Explain your process

Next Steps

• What you want to do next?
• How could you use a teachable machine in your home or school
  • Teacher’s 3rd eye app: bad hand gesture detector?
  • Crowd engagement
  • Porch pirate detector
• What steps and obstacle would you have to master.

Learn more

• Coding Train: for more Javascript Machine Learning projects
• AI4Allfree AI programs for US-based high school and college students

Acknowledgements

• AI Unplugged: Monkey cards
• Google Women Techmakers

Workshop is based on

• Nicki Anselmo WTM workshop for CS 2023