Skip to content

Commit

Permalink
Merge pull request #12 from engaging-computing/removeSpacingAndComments
Browse files Browse the repository at this point in the history 
comment and html cleanup
  • Loading branch information
@rjmara
rjmara authored Aug 24, 2023
2 parents 9673fce + 6e3c4c2 commit 36646b1
Show file tree
Hide file tree
Showing 15 changed files with 571 additions and 863 deletions.
9 changes: 2 additions & 7 deletions SignInterpreter/src/about_page.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
<html>
<head>
<!-- font-family: playfulKoala;
font: 1em playfulKoala; -->
<title>Model Selection</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Expand All @@ -13,14 +11,9 @@

<div class="flex flex-row items-center border-solid border-4 content-center justify-center mt-2" role="container">
<div class="flex justify-center">


</div>


</div>


<div class="mt-10 text-2xl mx-[20%]">AI for American Sign Language (AI for ASL) was developed so that participants could learn about Artificial Intelligence through hands-on interaction. The project also lets users to learn about American Sign Language (ASL), a language that allows people to communicate through hand signals.
</div>

Expand Down Expand Up @@ -58,3 +51,5 @@
</ul>
</div>
</footer>
</body>
</html>
11 changes: 1 addition & 10 deletions SignInterpreter/src/blue_free_sign.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <link rel="stylesheet" href="play_through.css"> -->
<link rel="stylesheet" href="output.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Expand All @@ -26,13 +25,8 @@ <h1 class="ml-10 text-[10vw]">🤖</h1>
<div id="promptContainer" class="border-[10px] border-solid border-white text-[5vw] bg-amber-50 mt-[2vw] center text-center align-middle mr-[10vw] ml-24 w-full mb-[3vw] rounded-3xl justify-items-center">
<p id="letterPrompt" class="text-[4vw] ml-[2vw]">Can you sign a <strong>a</strong>?<br></p>
<p id="letterPromptCaption" class="text-[2vw] ml-[2vw]">Hint: Try moving your hand around the screen</p>



<!-- <img class=" h-1/2 w-1/2 bg-[url(./static/asl.jpg)]"> -->
</div>

<!-- <p class="text-[5vw] bg-amber-50 mt-[2vw] rounded-3xl">Speed Mode</p> -->
<div class="mr-10 w-1/4 center content-center">
<button onclick="location.href='index.html'" id="MainBtn" type="button" class="opacity-50 hover:bg-amber-300 bg-amber-200 h-[5vw] w-[10vw] mx-[20%] mt-[40%] center text-black text-xl border-solid border-amber-300 align-middle rounded-lg text-center inline-flex items-center justify-center" style=" opacity: 1;">
<p class="text-xl">Main Menu</p><br>
Expand Down Expand Up @@ -70,7 +64,4 @@ <h1 class="h-[20%] text-[3vw] border-b-2 border-black border-solid">Model output

</div>
<div id="modelSelectHighlight" class="absolute top-1/2 w-[20%] mt-[2vw] border-solid "></div>
</html>


<!-- -->
</html>
95 changes: 27 additions & 68 deletions SignInterpreter/src/blue_free_sign.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
// Due to the draw function driving the program cycles, it is necessary to use
// many global variables so

// Classifier Variable
let classifier;
// Model URL
let imageModelURL = "https://teachablemachine.withgoogle.com/models/pJVCDtMZQ/";
Expand Down Expand Up @@ -47,12 +43,11 @@ let redConfidence = {
};

let letters;
// let letters = blueLetters;
// this tracks where we are in the letters so the prompts cover them all
let promptIndex = 0;
let model;
let blueClassifier = ml5.imageClassifier('https://teachablemachine.withgoogle.com/models/0_xhWMn4A/'+ 'model.json');
let redClassifier = ml5.imageClassifier('https://teachablemachine.withgoogle.com/models/oalxd3LWt/'+ 'model.json');
let blueClassifier = ml5.imageClassifier('https://teachablemachine.withgoogle.com/models/0_xhWMn4A/' + 'model.json');
let redClassifier = ml5.imageClassifier('https://teachablemachine.withgoogle.com/models/oalxd3LWt/' + 'model.json');
const average = array => array.reduce((a, b) => a + b) / array.length;


Expand All @@ -67,15 +62,15 @@ function preload() {
function getModel() {
model = document.getElementById("modelSelect").value;
if (model == "blue") {
// blue
classifier = blueClassifier;
letters = blueLetters;
confidenceArray = blueConfidence;
// blue
classifier = blueClassifier;
letters = blueLetters;
confidenceArray = blueConfidence;
} else {
// red
classifier = redClassifier;
letters = redLetters;
confidenceArray = redConfidence;
// red
classifier = redClassifier;
letters = redLetters;
confidenceArray = redConfidence;
}

for (i in confidenceArray) {
Expand All @@ -84,7 +79,7 @@ function getModel() {

predictions = null;
// reset any predictions
}
}

function pause_play() {
textSize(120);
Expand All @@ -103,26 +98,24 @@ function pause_play() {
// used to control the movement from different tutorial phases
function tutorialNext() {
console.log(tutorial_counter);
switch(tutorial_counter) {
switch (tutorial_counter) {
case 1:
document.getElementById("tutorialPrompt1").style.visibility = "hidden";
document.getElementById("overlay").style.visibility = "hidden";
tutorial_counter += 1;
isPaused = false;
break;
case 2:

document.getElementById("letterPrompt").innerHTML = "Congratulations, you finished blue mode!";
document.getElementById("letterPromptCaption").innerHTML = null;
document.getElementById("MainBtn").disabled = false;
document.getElementById("MainBtn").style.opacity = "1";
document.getElementById("MainBtn").innerHTML = "Main Menu";
isPaused = true;
tutorial_counter += 1;
document.getElementById("letterPromptCaption").innerHTML = null;
document.getElementById("MainBtn").disabled = false;
document.getElementById("MainBtn").style.opacity = "1";
document.getElementById("MainBtn").innerHTML = "Main Menu";
isPaused = true;
tutorial_counter += 1;
break;
}


}

function setup() {
Expand All @@ -136,19 +129,16 @@ function setup() {
video = createCapture(VIDEO);

// draw a white rectangle where the video will be
rect(0, 0, windowWidth/2, windowHeight/2);
rect(0, 0, windowWidth / 2, windowHeight / 2);

// set video settings so image is flipped
video.size(windowWidth/2, windowHeight/2);
video.size(windowWidth / 2, windowHeight / 2);
video.hide();
flippedVideo = ml5.flipImage(video);

// Change the frame rate as necessary depending on computer preformance
frameRate(60);
rectMode(CORNERS);
// textFont(loadFont('fonts/playfulKoala.ttf'));
// uncomment this after testing

}

function draw() {
Expand Down Expand Up @@ -186,32 +176,8 @@ function gotResult(error, results) {
}
// The results are in an array ordered by confidence
predictions = results;
// label = results[0].label;
// if (label != "-" && !isPaused) {
// progress += (1 / framesPerChar) * 100;
// confidenceArray.push(label);
// if (confidenceArray.length >= framesPerChar) {
// word += highestOccurence(confidenceArray);
// confidenceArray = [];
// progress = 0;
// }
// }
}

// function highestOccurence(arr){
// return arr.sort((a, b) =>
// arr.filter(x => x === a).length
// - arr.filter(x => x === b).length
// ).pop();
// }

// function deleteChar() {
// top_character = top_character.slice(0, -1);
// progress = 0;
// }



function tutorial() {
console.log("Ran the tutorial.");
}
Expand All @@ -223,8 +189,6 @@ function statistics() {
}

// draw a box to hold the predictions
// noFill();
// rect(windowWidth, 0, windowWidth * 0.5, windowHeight * 0.5 )
textAlign(CENTER);
let top_character_size = 160;
textSize(top_character_size);
Expand All @@ -236,8 +200,8 @@ function statistics() {
stroke(0, 0, 0);
if (progress) {
noFill();
stroke(lerpColor(color(255,0,0), color(0,255,0), (progress / 100.0)));
arc(width * 0.75, height * 0.33, top_character_size* 1.5, top_character_size * 1.5, 0, 2 * PI * (progress / 100.0))
stroke(lerpColor(color(255, 0, 0), color(0, 255, 0), (progress / 100.0)));
arc(width * 0.75, height * 0.33, top_character_size * 1.5, top_character_size * 1.5, 0, 2 * PI * (progress / 100.0))
}
strokeWeight(1);
stroke(0, 0, 0);
Expand All @@ -256,7 +220,7 @@ function statistics() {

if (entry.label != '-') {
// Interpolate from red to green using confidence
fill(lerpColor(color(255,0,0), color(0,255,0), entry.confidence));
fill(lerpColor(color(255, 0, 0), color(0, 255, 0), entry.confidence));
// Draw the rectangle
rect(startingX,
startingY - (entry.confidence * maxBarHeight),
Expand All @@ -265,10 +229,10 @@ function statistics() {
5, 5, 5, 5
)
// Write the labels under their respective bars
fill(0,0,0);
fill(0, 0, 0);
textSize(30);
textAlign(CENTER);
text(entry.label,startingX + barWidth / 2, startingY + 30);
text(entry.label, startingX + barWidth / 2, startingY + 30);
}

// keep track of the past framesPerChar confidences
Expand Down Expand Up @@ -303,7 +267,7 @@ function statistics() {
// find char with highest avg ( excluding the background )
for (letter in confidenceArray) {
// && letter != '-'
if (average(confidenceArray[letter]) > highest_avg ) {
if (average(confidenceArray[letter]) > highest_avg) {
highest_avg = average(confidenceArray[letter]);
top_character = letter;
}
Expand All @@ -330,8 +294,6 @@ function switchModel() {
}
function confirmLetter() {
// confirm the letter
//console.log(`confirming letter ${top_character}`);
/////////////////////////////////////////////////////////////////////////////////////////
if (top_character === letters[promptIndex]) {
// show the correct icon

Expand All @@ -340,9 +302,6 @@ function confirmLetter() {
// entry needs to be there since it's classifiable and it used in the
// statistics function
if (promptIndex >= letters.length - 1) {

//

tutorialNext();
// no more prompts to give
if (tutorial_counter > 4) {
Expand Down
11 changes: 3 additions & 8 deletions SignInterpreter/src/credits_page.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
<html>
<head>
<!-- font-family: playfulKoala;
font: 1em playfulKoala; -->
<title>Model Selection</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Expand All @@ -13,13 +11,8 @@

<div class="flex flex-row items-center border-solid border-4 content-center justify-center mt-2" role="container">
<div class="flex justify-center">


</div>


</div>


<div class="mt-6 ... flex items-center justify-center text-3xl mx-[20%]">
Original creators – James Dimino and Andrew Farrell
Expand Down Expand Up @@ -67,4 +60,6 @@

</ul>
</div>
</footer>
</footer>
</body>
</html>
Loading

0 comments on commit 36646b1

Please sign in to comment.