diff --git a/Readme.md b/Readme.md
index 9365119..f344594 100644
--- a/Readme.md
+++ b/Readme.md
@@ -1,10 +1,10 @@
## GemCity ML: No /Low Code ML Tutorial
-### July 20, 2023
+### Dec 30, 2023
### Evelyn J. Boettcher
-
+
-Evelyn J. Boettcher will go through a Google Women Techmakers educational tutorial on how to make an image classifier application with No/Low Code.
+Evelyn J. Boettcher's tutorial based on a Google Women Techmakers educational tutorial on how to make an image classifier application with No/Low Code.
This tutorial is designed to encourage kids to go into Computer Science by gently introducing them to AI and Machine learning. No Coding or ML experience needed.
@@ -14,18 +14,18 @@ This is a step-by-step guide to build an ML image application
| Subject | Image |
|:---- |:----------------------------------|
-| Train a model |  |
-| Export Model |  |
-| Integrat Model |  |
+| Train a model |  |
+| Export Model |  |
+| Integrate Model |  |
### In this Repo
-* Lesson Plan
-* Slide Deck
-* Web Application
-* Student Low Code Web Application
+* [Lesson Plan](./docs/lessonplan.pdf)
+* [Slide Deck](./docs/slide_deck.html)
+* [Web Application](./docs/application_demo/index.html)
+* [Student Low Code Web Application](./docs/application_demo/)
diff --git a/docs/application_demo/my_model.js b/docs/application_demo/my_model.js
index b4e9ab2..585b883 100644
--- a/docs/application_demo/my_model.js
+++ b/docs/application_demo/my_model.js
@@ -49,7 +49,7 @@ async function predict() {
const prediction = await model.predict(webcam.canvas);
let myEmoji = "❓";
let max_i = maxPredictions + 1;
- let max_prob = 0.35;
+ let max_prob = 0.40;
for (let i = 0; i < maxPredictions; i++) {
const classPrediction =
prediction[i].className + ": " + prediction[i].probability.toFixed(2);
diff --git a/talk/evelyn.css b/docs/evelyn_2023.css
similarity index 100%
rename from talk/evelyn.css
rename to docs/evelyn_2023.css
diff --git a/docs/img/computer_on_fire.png b/docs/img/computer_on_fire.png
new file mode 100644
index 0000000..0e91586
Binary files /dev/null and b/docs/img/computer_on_fire.png differ
diff --git a/docs/lessonplan.pdf b/docs/lessonplan.pdf
new file mode 100644
index 0000000..72d2b2e
Binary files /dev/null and b/docs/lessonplan.pdf differ
diff --git a/docs/markdown/lesson_plan.html b/docs/markdown/lesson_plan.html
new file mode 100644
index 0000000..fafce33
--- /dev/null
+++ b/docs/markdown/lesson_plan.html
@@ -0,0 +1,485 @@
+
+
+
+
+
+
+
+
+
+No/Low code Workshop – lesson_plan
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Repeat until all of your cards can follow your rule.
+
+
+
+
+
+
Class_1: Biting
+
Class_2: Non Biting
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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.
Model: The set of rules and steps to make a prediction
What is your group’s model for classifying monkeys?
@@ -583,6 +594,10 @@
Classification: Share Out
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.
The application can not handle when there is no gestures. Can you fix that within the application or model
-
Insanity
+
Insanity
Update the css to make it look nice
-
-
Stretch Goals: Conditional Statements
+
+
Stretch Goals:
+
Conditional Statements
if this is true then, else do this.
if you are in 9th grade (the condition)
@@ -726,7 +771,8 @@
Stretch Goals: Conditional Statements
Raise your hand
-
else
+
else
+
Fold your hands on your desk
@@ -736,7 +782,11 @@
Stretch Goals: 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.
+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){
@@ -747,7 +797,8 @@
Single condition: syntax (if/else)
-
Multiple condition: Syntax (if/else if / else)
+
Multiple condition:
+
Syntax (if/else if / else)
if (condition){
@@ -758,16 +809,18 @@
Multiple condition: Syntax (if
\\ 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
+
When stuck, google. Stack overflow is your best friend
Include language: javescript
What you are trying to do: if statement
-
Example: javescript if statement
+
Example: javescript if statement
Student’s ML Gesture Demo
diff --git a/docs/student_application_starter/favicon.ico b/docs/student_application_starter/favicon.ico
new file mode 100644
index 0000000..d4f3015
Binary files /dev/null and b/docs/student_application_starter/favicon.ico differ
diff --git a/docs/student_application_starter/index.html b/docs/student_application_starter/index.html
new file mode 100644
index 0000000..d0153f5
--- /dev/null
+++ b/docs/student_application_starter/index.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+
+
+
+ My First ML App
+
+
+
+
+
+
+
+
+
+
+
+
+
Gesture Classification Demo
+
+
Women Techmaker Low Code ML application.
+
Created with Teachable Machine.
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/student_application_starter/my_model.js b/docs/student_application_starter/my_model.js
new file mode 100644
index 0000000..e428e15
--- /dev/null
+++ b/docs/student_application_starter/my_model.js
@@ -0,0 +1,66 @@
+// More API functions here:
+// https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image
+
+// the link to your model provided by Teachable Machine export panel
+const URL = "./static/tm-my-image-model/";
+
+let model, webcam, labelContainer, maxPredictions;
+
+// Load the image model and setup the webcam
+async function init() {
+
+ const modelURL = URL + "model.json";
+ const metadataURL = URL + "metadata.json";
+ //const devices = await navigator.mediaDevices.enumerateDevices()
+ // load the model and metadata
+ // Refer to tmImage.loadFromFiles() in the API to support files from a file picker
+ // or files from your local hard drive
+ // Note: the pose library adds "tmImage" object to your window (window.tmImage)
+ model = await tmImage.load(modelURL, metadataURL);
+ maxPredictions = model.getTotalClasses();
+
+ // Convenience function to setup a webcam
+ const flip = true; // whether to flip the webcam
+ webcam = new tmImage.Webcam(200, 200, flip); // width, height, flip
+ await webcam.setup({ facingMode: "environment" }); // request access to the webcam
+ await webcam.play();
+ window.requestAnimationFrame(loop);
+
+ // append elements to the DOM
+ document.getElementById("webcam-container").appendChild(webcam.canvas);
+ labelContainer = document.getElementById("label-container");
+ for (let i = 0; i < maxPredictions; i++) { // add class labels
+ labelContainer.appendChild(document.createElement("div"));
+ }
+ const emoji = document.createElement("div");
+ emoji.setAttribute("id", "emoji");
+ labelContainer.appendChild(emoji);
+}
+
+async function loop() {
+ webcam.update(); // update the webcam frame
+ await predict();
+ window.requestAnimationFrame(loop);
+}
+
+// run the webcam image through the image model
+async function predict() {
+ // predict can take in an image, video or canvas html element
+ const prediction = await model.predict(webcam.canvas);
+ let myEmoji = "❓";
+ let max_i = maxPredictions + 1;
+ let max_prob = 0.35;
+ for (let i = 0; i < maxPredictions; i++) {
+ const classPrediction =
+ prediction[i].className + ": " + prediction[i].probability.toFixed(2);
+ labelContainer.childNodes[i].innerHTML = classPrediction;
+ if (prediction[i].probability > max_prob){
+ max_i = i;
+ max_prob = prediction[i].probability;
+ }
+ }
+ // TODO Build a if/else function that changes the emoji
+ // Based on the prediction
+ labelContainer.childNodes[maxPredictions].innerHTML = myEmoji;
+}
+
diff --git a/docs/student_application_starter/static/WTM_Logo_Stacked_Horizontal_Color.png b/docs/student_application_starter/static/WTM_Logo_Stacked_Horizontal_Color.png
new file mode 100644
index 0000000..81f89a4
Binary files /dev/null and b/docs/student_application_starter/static/WTM_Logo_Stacked_Horizontal_Color.png differ
diff --git a/docs/student_application_starter/static/favicon.ico b/docs/student_application_starter/static/favicon.ico
new file mode 100644
index 0000000..d4f3015
Binary files /dev/null and b/docs/student_application_starter/static/favicon.ico differ
diff --git a/docs/student_application_starter/style.css b/docs/student_application_starter/style.css
new file mode 100644
index 0000000..783ec5d
--- /dev/null
+++ b/docs/student_application_starter/style.css
@@ -0,0 +1,94 @@
+html, body {
+ height: 100%;
+}
+
+html {
+ display: table;
+ margin: auto;
+
+ background-color: #5390f5;
+}
+
+body {
+ padding: 10px;
+ display: table-cell;
+ background-color: whitesmoke;
+ width: 750px;
+
+}
+
+ canvas {
+ display: block;
+ }
+
+ #webcam-container {
+ border: 5px solid #5390f5;
+ border-radius: 3px;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ box-shadow: 5px -5px rgba(0,0,0,0.6);
+ -moz-box-shadow: 5px -10px rgba(0,0,0,0.6);
+ -webkit-box-shadow: 5px -5px rgba(0,0,0,0.6);
+ -o-box-shadow: 5px -5px rgba(0,0,0,0.6);
+ width: 200px;
+ height: 200px;
+ }
+
+ #label-container {
+ width:200px;
+ height:200px;
+ margin-left:10px;
+ }
+
+#emoji {
+ font-size: 55px;
+ margin: auto;
+}
+
+ .removed {
+ display: none;
+ }
+
+ #status {
+ font-size:150%;
+ }
+
+ button {
+ padding: 15px 25px;
+ font-size: 24px;
+ text-align: center;
+ cursor: pointer;
+ outline: none;
+ color: black;
+ background-color: #1ce9b6;
+ border: none;
+ border-radius: 15px;
+ box-shadow: 5px 3px #4285f4;
+ margin-bottom: 8px;;
+ }
+
+ button:hover {background-color: #05c0a7}
+
+ button:active {
+ background-color: #05c0a7;
+ box-shadow: 3px 5px #666;
+ transform: translateY(4px);
+ }
+
+.flex-container {
+ display: flex;
+}
+
+.flex-child {
+ flex: 1;
+
+}
+
+.flex-child:first-child {
+ margin-right: 20px;
+ width:100px;
+ height: 200px;
+}
+.flex-child:second-child {
+ margin-right: 0px;
+}
\ No newline at end of file
diff --git a/talk/.quarto/xref/INDEX b/talk/.quarto/xref/INDEX
index f6b6002..3e960b9 100644
--- a/talk/.quarto/xref/INDEX
+++ b/talk/.quarto/xref/INDEX
@@ -5,5 +5,14 @@
"slide_deck.qmd": {
"slide_deck.html": "ba42f4cd",
"slide_deck.tex": "2fbbe9d1"
+ },
+ "lessonplan.qmd": {
+ "lessonplan.tex": "403541a6"
+ },
+ "markdown/lesson_plan.md": {
+ "lesson_plan.html": "7948b9f5"
+ },
+ "markdown/slide_deck.md": {
+ "slide_deck.html": "94f26967"
}
}
\ No newline at end of file
diff --git a/talk/_quarto.yml b/talk/_quarto.yml
index 3ed51bb..e2333b7 100644
--- a/talk/_quarto.yml
+++ b/talk/_quarto.yml
@@ -8,8 +8,8 @@ format:
code-fold: true
html-math-method: katex
revealjs:
- theme: [default, evelyn.scss]
- css: evelyn.css
+ theme: [default, evelyn_2023.scss]
+ css: evelyn_2023.css
logo: './img/logos/DidactexLogo.png'
footer: "Gem City Tech ML/AI "
scrollable: true
diff --git a/talk/evelyn_2023.css b/talk/evelyn_2023.css
new file mode 100644
index 0000000..5e30413
--- /dev/null
+++ b/talk/evelyn_2023.css
@@ -0,0 +1,126 @@
+
+
+/*********************************************
+ * GLOBAL STYLES
+ *********************************************/
+.slide-deck {
+width:100%;
+float: center;
+}
+caption{
+ font-size: 1.3rem;
+ font-weight: bold;
+}
+th {
+ font-size: 1.2rem;
+}
+
+td {
+ font-size: 18px;
+}
+table tr:nth-child(odd) td{
+ background-color: #ebf2ff;
+
+}
+table tr:nth-child(even) td{
+ background-color: #f7f9fc;
+}
+
+/******************************
+* Columns
+************************************/
+#left {
+ left:-5.33%;
+ text-align: left;
+ float: left;
+ width:50%;
+ z-index:-10;
+}
+
+#right {
+ left:31.25%;
+ top: 75px;
+ float: right;
+ text-align: left;
+ z-index:-5;
+ width:50%;
+
+ .twocolumn {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-gap: 10px;
+ text-align: right;
+ }
+}
+
+
+input[type="checkbox"] {
+ appearance: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ color: #000;
+ width: 1.1rem;
+ height: 1.1rem;
+ padding-right: 1rem;
+}
+
+/* Checkbox un-checked style */
+input[type="checkbox"]:before {
+ font: 1.5em FontAwesome;
+ content: '\00f096';
+ border: 2px solid #698751;
+ border-radius: 3px;
+ display: inline-block;
+ margin-right: 0.0em;
+ margin-top: 0.0em;
+ vertical-align: 0px;
+ font: 1.1rem;
+ width: 1.1rem;
+ height: 1.1rem;
+ background-color: #fcfdff;
+}
+
+/* Checked checkbox style (in this case the background is green #e7ffba, change this to change the color) */
+input[type="checkbox"]:checked:before {
+ /* NOTE: Replace the url with a path to an SVG of a checkmark to get a checkmark icon */
+ background-repeat: no-repeat;
+ background-position: center;
+ content: '\00f046';
+ /* The size of the checkmark icon, you may/may not need this */
+ background-size: 25px;
+ border-radius: 2px;
+ background-color: #698751;
+ color: black;
+ font: 1.5em FontAwesome;
+}
+
+
+/* Disabled checkbox styles */
+input[type="checkbox"]:disabled {
+ opacity: 1.1rem;
+}
+
+
+.footer-default {
+ box-sizing: content-box;
+ width: 50% !important;
+ padding-left: 25rem;
+ font-size: 0.7rem !important;
+ color: #f98d43 !important;
+ font-weight: bold !important;
+ text-align: center !important;
+ }
+
+.slide-logo.r-stretch {
+ max-width: 15vw !important;
+ max-height: 4vw !important;
+
+}
+.reveal div.sourceCode{
+ margin-bottom: 1em;
+ overflow: auto;
+}
+
+
+
+}
\ No newline at end of file
diff --git a/talk/evelyn.scss b/talk/evelyn_2023.scss
similarity index 90%
rename from talk/evelyn.scss
rename to talk/evelyn_2023.scss
index 4004119..312fae9 100644
--- a/talk/evelyn.scss
+++ b/talk/evelyn_2023.scss
@@ -46,21 +46,22 @@ $headings-font-weight: 500 !default;
.reveal h1 {
font-size: 2.6em;
- color: #015079;
+ color: #f98d43ff;
text-shadow: 0px 0px 1em rgba(0, 0, 0, 0.25);
}
.reveal h2 {
- text-shadow: 0px 0px 1em rgba(0, 0, 0, 0.25);
+ text-shadow: 0px 0px .4em rgba(0, 0, 0, 0.25);
font-size: 2em;
padding-top:1px;
font-weight: bold;
- color: #015079;}
+ color: rgb(93, 158, 24);
+}
.reveal h3 {
font-size: 1.5em;
font-weight: bold;
- color: #039ac6ff;
+ color: #f98d43ff;
text-shadow: 4px 4px 12px rgba(10, 0, 0, 0.15);
line-height: 1em;
padding-bottom:0px;
@@ -70,10 +71,11 @@ $headings-font-weight: 500 !default;
.reveal h4 {
font-size: 1.4em;
font-weight: bold;
- color: #f98d43ff;
+ color:rgb(3, 198, 152);
line-height:1em;
padding-bottom:0px;
- margin-bottom:0px;}
+ margin-bottom:0px;
+}
/*********************************************
@@ -84,7 +86,7 @@ $headings-font-weight: 500 !default;
line-height: 1.0;
text-align: left;
margin-left: 1em;
- font-size: 1.2em;
+ font-size: 1.0em;
}
@@ -101,13 +103,22 @@ $headings-font-weight: 500 !default;
.reveal em {
font-style: italic; }
+
.reveal ol, .reveal dl, .reveal ul {
display: inline-block;
text-align: left;
margin: 1px 0;
margin-left: 1.2em;
padding: 0.1em;
- font-size: 1.1em;}
+ font-size: 1.0em;
+
+}
+
+.reveal .slide ul li {
+ margin-top: 0.1em !important;
+ margin-bottom: 0.1em !important;
+ font-size: 1.05em;
+}
.reveal ol {
list-style-type: decimal; }
@@ -175,12 +186,8 @@ $headings-font-weight: 500 !default;
color: #DCDCDC; }
.reveal table {
- /*margin: auto;
- /*border-collapse: collapse;
- border-spacing: 1px;
- border-left:250px;
- border-right:50px;*/
- font-size: .9em;
+
+ font-size: 1.05em;
margin-left:1.5em;
margin-right:1.5em;
vertical-align:center;
@@ -238,7 +245,15 @@ $headings-font-weight: 500 !default;
.reveal section img {
margin: 0.2em 0.2em;
background: rgba(255,255,255, 0.2);
- border: 0.25em solid #698751;
+ border-width: 0.2em;
+ border-style: solid;
+ border-image:
+ linear-gradient(
+ to bottom,
+ rgb(93, 158, 24),
+ rgba(0, 0, 0, 0)
+ ) 1 100%;
+
box-shadow: 0 0.3em 0.75em rgba(0, 0, 0, 0.5); }
.reveal section figure img {
@@ -251,8 +266,8 @@ $headings-font-weight: 500 !default;
transition: all 0.15s linear; }
.reveal a:hover img {
- background: rgba(255, 255, 255, 0.2);
- border: 0.25em solid #698751;
+ background: rgba(255, 255, 255, 0.2);
+ border: 0.25em solid rgba(93, 158, 24, 0.935);
box-shadow: 0 0.2em 2em rgba(0, 0, 0, 0.65); }
/*********************************************
@@ -343,16 +358,17 @@ $headings-font-weight: 500 !default;
.reveal h1.title{
text-align: center !important;
-align: left !important;
-margin-left: -2rem !important;
-padding-top: 15rem;
+align: center !important;
+margin-left: 0rem !important;
+padding-top: 5rem;
box-sizing: content-box;
-width: 70% !important;
+width: 100% !important;
color: #039ac6ff;
text-shadow: 1px 1px 5px #015079;
}
.reveal p.author{
- text-align: left !important;
+ text-align: center !important;
+ align: center !important;
font-size: 1.35em;
color: #f98d43ff;
text-shadow: 1px 1px 5px #015079;
@@ -361,7 +377,8 @@ text-shadow: 1px 1px 5px #015079;
}
.reveal p.subtitle{
- text-align: left !important;
+ text-align: center !important;
+ align: center !important;
font-size: 2.2em;
color: #039ac6ff;
box-sizing: content-box;
@@ -372,6 +389,8 @@ text-shadow: 1px 1px 5px #015079;
.reveal p.date{
color: #5FB71C;
+ text-align: center !important;
+ align: center !important;
}
diff --git a/talk/img/Discord-Logo+Wordmark-Color.png b/talk/img/Discord-Logo+Wordmark-Color.png
deleted file mode 100644
index aa1b5e2..0000000
Binary files a/talk/img/Discord-Logo+Wordmark-Color.png and /dev/null differ
diff --git a/talk/img/GemCity_meetup_qr.png b/talk/img/GemCity_meetup_qr.png
deleted file mode 100644
index c178aba..0000000
Binary files a/talk/img/GemCity_meetup_qr.png and /dev/null differ
diff --git a/talk/img/computer_on_fire.png b/talk/img/computer_on_fire.png
new file mode 100644
index 0000000..0e91586
Binary files /dev/null and b/talk/img/computer_on_fire.png differ
diff --git a/talk/img/gemcity_discord_qr.png b/talk/img/gemcity_discord_qr.png
deleted file mode 100644
index 0df6612..0000000
Binary files a/talk/img/gemcity_discord_qr.png and /dev/null differ
diff --git a/talk/img/logos/DDLLogo.png b/talk/img/logos/DDLLogo.png
deleted file mode 100644
index 304353c..0000000
Binary files a/talk/img/logos/DDLLogo.png and /dev/null differ
diff --git a/talk/img/logos/DaytonDotNet.png b/talk/img/logos/DaytonDotNet.png
deleted file mode 100644
index d66bf95..0000000
Binary files a/talk/img/logos/DaytonDotNet.png and /dev/null differ
diff --git a/talk/img/logos/Dayton_Web_Developers.png b/talk/img/logos/Dayton_Web_Developers.png
deleted file mode 100644
index e53e2f6..0000000
Binary files a/talk/img/logos/Dayton_Web_Developers.png and /dev/null differ
diff --git a/talk/img/logos/Frameworks.png b/talk/img/logos/Frameworks.png
deleted file mode 100644
index e7c8321..0000000
Binary files a/talk/img/logos/Frameworks.png and /dev/null differ
diff --git a/talk/img/logos/GCTLogo.png b/talk/img/logos/GCTLogo.png
deleted file mode 100644
index f07c2d5..0000000
Binary files a/talk/img/logos/GCTLogo.png and /dev/null differ
diff --git a/talk/img/logos/GCTSquareWhiteForeground.png b/talk/img/logos/GCTSquareWhiteForeground.png
deleted file mode 100644
index 3491af0..0000000
Binary files a/talk/img/logos/GCTSquareWhiteForeground.png and /dev/null differ
diff --git a/talk/img/logos/GemCityGameDevelopers.png b/talk/img/logos/GemCityGameDevelopers.png
deleted file mode 100644
index 4cb6d62..0000000
Binary files a/talk/img/logos/GemCityGameDevelopers.png and /dev/null differ
diff --git a/talk/img/logos/GemCityMechatronicsLogo_Transparent.png b/talk/img/logos/GemCityMechatronicsLogo_Transparent.png
deleted file mode 100644
index 439fe30..0000000
Binary files a/talk/img/logos/GemCityMechatronicsLogo_Transparent.png and /dev/null differ
diff --git a/talk/img/logos/HumanIT-Logo.png b/talk/img/logos/HumanIT-Logo.png
deleted file mode 100644
index d5d2742..0000000
Binary files a/talk/img/logos/HumanIT-Logo.png and /dev/null differ
diff --git a/talk/img/logos/KableAcademy_Logo_HR.jpg b/talk/img/logos/KableAcademy_Logo_HR.jpg
deleted file mode 100644
index 29baef9..0000000
Binary files a/talk/img/logos/KableAcademy_Logo_HR.jpg and /dev/null differ
diff --git a/talk/img/logos/New_To_Tech_Mascot.png b/talk/img/logos/New_To_Tech_Mascot.png
deleted file mode 100644
index 35972cb..0000000
Binary files a/talk/img/logos/New_To_Tech_Mascot.png and /dev/null differ
diff --git a/talk/img/logos/The-Hub-Logo-PNC.jpg b/talk/img/logos/The-Hub-Logo-PNC.jpg
deleted file mode 100644
index fffda4a..0000000
Binary files a/talk/img/logos/The-Hub-Logo-PNC.jpg and /dev/null differ
diff --git a/talk/img/logos/The_Hub_Final_Logo.png b/talk/img/logos/The_Hub_Final_Logo.png
deleted file mode 100644
index d39d682..0000000
Binary files a/talk/img/logos/The_Hub_Final_Logo.png and /dev/null differ
diff --git a/talk/img/logos/discord-logo-blue.svg b/talk/img/logos/discord-logo-blue.svg
deleted file mode 100644
index 99d106f..0000000
--- a/talk/img/logos/discord-logo-blue.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/talk/img/logos/discord-mark-blue.svg b/talk/img/logos/discord-mark-blue.svg
deleted file mode 100644
index ca65400..0000000
--- a/talk/img/logos/discord-mark-blue.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/talk/img/logos/gem_city_dark.png b/talk/img/logos/gem_city_dark.png
deleted file mode 100644
index 4af2bd8..0000000
Binary files a/talk/img/logos/gem_city_dark.png and /dev/null differ
diff --git a/talk/img/logos/gen_city_tech-old.png b/talk/img/logos/gen_city_tech-old.png
deleted file mode 100644
index ecccc9d..0000000
Binary files a/talk/img/logos/gen_city_tech-old.png and /dev/null differ
diff --git a/talk/img/logos/human_machine.png b/talk/img/logos/human_machine.png
deleted file mode 100644
index a03340f..0000000
Binary files a/talk/img/logos/human_machine.png and /dev/null differ
diff --git a/talk/img/logos/meetup_logo.svg b/talk/img/logos/meetup_logo.svg
deleted file mode 100644
index 2d231d4..0000000
--- a/talk/img/logos/meetup_logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/talk/img/logos/pizzalogo.png b/talk/img/logos/pizzalogo.png
deleted file mode 100644
index 5ae4af7..0000000
Binary files a/talk/img/logos/pizzalogo.png and /dev/null differ
diff --git a/talk/img/logos/qr-code.png b/talk/img/logos/qr-code.png
deleted file mode 100644
index 512c43e..0000000
Binary files a/talk/img/logos/qr-code.png and /dev/null differ
diff --git a/talk/img/logos/tech_first_logo.jpg b/talk/img/logos/tech_first_logo.jpg
deleted file mode 100644
index 508f3a5..0000000
Binary files a/talk/img/logos/tech_first_logo.jpg and /dev/null differ
diff --git a/talk/img/qr-code.png b/talk/img/qr-code.png
deleted file mode 100644
index 512c43e..0000000
Binary files a/talk/img/qr-code.png and /dev/null differ
diff --git a/talk/lessonplan.qmd b/talk/lessonplan.qmd
index 5d88b61..77e6df4 100644
--- a/talk/lessonplan.qmd
+++ b/talk/lessonplan.qmd
@@ -1,6 +1,6 @@
---
title: "Lesson Plan"
-date: "December 3rd, 2023"
+date: "20231231"
author: "Evelyn J. Boettcher"
format:
pdf:
diff --git a/talk/markdown/lesson_plan.md b/talk/markdown/lesson_plan.md
index 6702726..18d0678 100644
--- a/talk/markdown/lesson_plan.md
+++ b/talk/markdown/lesson_plan.md
@@ -13,9 +13,9 @@ and **build** their own ML application.
This mainly targets to middle school to elementary. But there is no age limit on this workshop.
-### Slide Deck is located here.
+### Slide Deck.
-To Do
+[Slide Deck](https://ejboettcher.github.io/gemcityML-No-CodeAI/slide_deck.html#/title-slide)
### Duration
@@ -42,8 +42,8 @@ To Do
### Prep
| Item | Qty |
-|:------------------------------------------------|:---|
-| [Monkey Carts Printed](./data/monkey_class.pdf) | 1 set per group |
+|:----------|:--------|
+| [Monkey Carts Printed](https://ejboettcher.github.io/gemcityML-No-CodeAI/data/monkey_class.pdf) | 1 set per group |
| laptop with web camera | 1 per group |
| Internet | |
| Pen and Paper | 1 per student |
@@ -55,34 +55,34 @@ To Do
Outline:
* Classes and Models (No computers, Need monkey cards)
-* Finished Application Demo
-* Walk through Teachable machines
-* Student build their own application (two classes)
+* [Finished Application Demo](https://ejboettcher.github.io/gemcityML-No-CodeAI/application_demo/index.html)
+* Walk through [Teachable Machines](https://teachablemachine.withgoogle.com/)
+* Student build their own application (two class AI model)
* (stretch) Students build three class application
* (stretch) Students build a nicer application
### Opening (15 min)
**HOOK**
-Show finished application
+Show finished [Application Demo](https://ejboettcher.github.io/gemcityML-No-CodeAI/application_demo/index.html)
-Ask: How does that work?
+
+**Ask:** How does that work?
Walk through what a class is.
-Give students a set of the **green** monkey cards (from AI Unplugged). Have teams divide their chart paper
-into 2: Biting and Non Biting.
+Give students a set of the **green** monkey cards (from AI Unplugged). Have teams divide their chart paper into 2 classes: Biting and Non Biting.
-Training data (blue paper):
+*Training data* (blue paper):
- biting: 1, 2, 3, 4
- non- biting: 5-20
-Have them decide which characteristics are for biting monkeys.
+Have them decide which characteristics are for biting monkeys. This is done as a group.
-Then show them the test data and see
+Then show them the test data (green paper) and see
how well their model did.
-Test data (green paper)
+*Test data* (green paper)
- Biting: 22, 23, 24
- Non-biting: 21, 25 - 40
@@ -112,18 +112,18 @@ Train Model with Teachable Machines.
### Run Models (10min)
-* Create an exportable link.
- * Show students how to upload their model to a server, copy the url and paste it in the `my_app.js` (line
-34)
-* Show students how to add an image to the first “if” condition. (on line 70)
- * Use Wikipedia images search
+* Download model.
+ * Show students how to copy their model to a folder (static) in student_application_start,
+ * Update the URL in the `my_model.js` (line 5)
+* (stretch) Show students how to add an image to the first “if” condition. (on line 64) (hint: look at the `application_demo` folder)
+ * Use Wikipedia images search for emojis
* (stretch) Ask how the Javascript syntax is different than the Python Syntax
### Closing
* Have each group Demo their application
-* Student Refplation:
+* Student Reflection:
* How could you use ML application in your school, home, car?
* What would you have to consider when training a model?
* Celebrate: You created a working ML models!
diff --git a/talk/markdown/slide_deck.md b/talk/markdown/slide_deck.md
index 0018c78..5a30fd9 100644
--- a/talk/markdown/slide_deck.md
+++ b/talk/markdown/slide_deck.md
@@ -3,7 +3,7 @@
- Please grab a pencil/pen and paper. (Reflection afterwards)
- Please go to github for code
- - Download the repo
+ - Download [the repo](https://github.com/ejboettcher/gemcityML-No-CodeAI)
## ML with Teachable Machines
@@ -26,12 +26,12 @@ Let's get in the right mindset.
Evelyn J. Boettcher
:::{.columns}
-::::{.column width=39%}
+::::{.column width=49%}
::::
-::::{.column width=59%}
+::::{.column width=49%}
- Mom
- Loves to sew and cook
@@ -73,8 +73,9 @@ Let's check it out.
-- Final Site
-- Code
+- [Final Site](https://ejboettcher.github.io/gemcityML-No-CodeAI/application_demo/index.html)
+- [Demo Code](https://github.com/ejboettcher/gemcityML-No-CodeAI/tree/main/docs/application_demo)
+- [Student Code](https://github.com/ejboettcher/gemcityML-No-CodeAI/tree/main/docs/student_application_starter)
## Classifications and Models:
@@ -97,17 +98,28 @@ The model is trained using the training data, and then it is evaluated on test
## Classification
:::{.columns}
-::::{.column width=49%}
+::::{.column width=59%}
Your task is to group monkeys into two classes:
- **Class_1**: Biting Monkey
-- **Class_2**: Non-Biting Monkeys
+- **Class_2**: Non-Biting Monkeys
+
+
Materials: Each group gets one set of [blue monkey](./data/monkey_cards.pdf) 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.
+
::::
-::::{.column width=49%}
+::::{.column width=39%}
@@ -117,16 +129,8 @@ Image from [Huffington Post](https://www.huffpost.com/entry/baby-monkey-misses-m
:::
-
-### Classification: Challenge
-
-
:::{.columns}
-::::{.column width=49%}
-
-* Develop a rule to define: Biting and NonBiting
-* Separate your codes by that rule
-* Repeat until all of your cards can follow your rule.
+::::{.column width=25%}
::::
::::{.column width=49%}
@@ -134,11 +138,15 @@ Image from [Huffington Post](https://www.huffpost.com/entry/baby-monkey-misses-m
| **Class_1**: Biting | **Class_2**: Non Biting |
|:---- |:---- |
-| | |
-| | |
-| | |
+| card c | card d |
+| card a | card b |
+| ... | ... |
::::
+::::{.column width=24%}
+
+::::
+
:::
---
@@ -170,6 +178,8 @@ Image from [Huffington Post](https://www.huffpost.com/entry/baby-monkey-misses-m
---
+
+
### Classification: Share Out
**Model**: The set of rules and steps to make a prediction
@@ -179,6 +189,8 @@ What is your group's **model** for classifying monkeys?
- **Class_1**: Biting Monkey
- **Class_2**: Non-Biting Monkeys
+
+
### Classification: Man vs Machine
@@ -208,6 +220,11 @@ lets take a break.
There are three basic steps to building a model
+:::{.columns}
+
+::::{.column width=49%}
+
+
- Train the model
- Export the model
- Use the model
@@ -215,10 +232,18 @@ There are three basic steps to building a model
+
+
### Why a forth step
-Your model, app etc will not work the first time.
+Your model, app etc will not work the first time.
+::::
+::::{.column width=49%}
+
+
+::::
+:::
---
### Train the Model
@@ -260,11 +285,19 @@ Your model, app etc will not work the first time.
### Use the Model
- In a new tab, go to
- - **TODO** link to github
-- Open my-script.js
-- Paste your model's url in line
+ - [Student Code](https://github.com/ejboettcher/gemcityML-No-CodeAI/tree/main/docs/student_application_starter)
+ - 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
@@ -276,21 +309,24 @@ WOW, this is a hard step.
- Let's use Codepen.io
- Or run it on our computer
- ```python -m http.server```
- - must use localhost:8000 or https:// 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 |
+
+
+| 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
+## Stretch Goals:
+### Conditional Statements
`if` this is *true* then, `else` do this.
@@ -302,7 +338,8 @@ if **you are in 9th grade** (the condition)
- Raise your hand
-else
+**else**
+
- Fold your hands on your desk
@@ -315,7 +352,10 @@ All computer programs have the ability to do an if/else (conditional) statements
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.
+**Syntax** is the rules that control the structure of the symbols, punctuation, and words of a programming language.
+
+
+
### Single condition: syntax (if/else)
@@ -331,7 +371,8 @@ if (condition){
---
-### Multiple condition: Syntax (if/else if / else)
+### Multiple condition:
+#### Syntax (if/else if / else)
:::{.columns}
::::{.column width=49%}
@@ -350,19 +391,23 @@ if (condition){
::::
::::{.column width=49%}
+
+
With more than one condition (checking for true), use `else if`.
::::
:::
+
+
#### Google is your friend
-When stuck google. Stack overflow is your best 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
+Example: `javescript if statement`
## Student's ML Gesture Demo
+