let myColor = "#000000";

let clearButton;

let slider;

var w = window.innerWidth;

var h = window.innerHeight;

// let loading = true;

// let loadingAnimation;

let words = "canvasbot.resultString";

let conversation;

var canvasbot = new p5.SpeechRec(); // speech recognition object

canvasbot.continuous = true; // allow continuous recognition

canvasbot.interimResults = false; // allow partial recognition (faster, less accurate)

canvasbot.onResult = showResult; // callback function that triggers when speech is recognized

canvasbot.onError = showError; // callback function that triggers when an error occurs

canvasbot.onspeechend = stopListening;

var img;

let imageSave = false;

​

let unlabel = false;

let river = false;

let sand = false;

let sea = false;

let rock = false;

let mountain = false;

let road = false;

let tree = false;

let clouds = false;

let fog = false;

let content = false;

let buttoncommand = false;

// let sessioning = false;

let startSound;

let stopSound;

// let gif;

​

const model = new rw.HostedModel({

  url: "https://spade-coco-7cdc4e7a.hosted-models.runwayml.cloud/v1/",

  token: "Su6vYf6Yigps45Opd17f2w==",

});

​

function preload() {

  // gif = loadImage('Loading_animation.gif');

  startSound = loadSound("start.mp3");

  stopSound = loadSound("stop.mp3");

}

​

function voiceReady() {

  console.log(speech.voice);

}

​

function listen() {

  canvasbot.start(); // start listening

  startSound.play();

  console.log("I'm listening...");

}

​

function showResult() {

  console.log("Transcript: " + canvasbot.resultString); // log the transcript

  console.log("Confidence: " + canvasbot.resultConfidence); // log the confidence

  words = canvasbot.resultString;

  // distinguish();

}

​

function showError() {

  stopSound.play();

  console.log("An error occurred!");

}

​

function stopListening() {

  stopSound.play();

  canvasbot.stop();

}

​

function distinguish() {

  let speech1 = new p5.Speech();

  speech1.setPitch(0.8);

  speech1.setRate(1.2);

  textSize(16);

  // noLoop();

​

  let m1 = match(words, "unable");

  let m2 = match(words, "Unlabel");

  let m3 = match(words, "unlabeled");

  let m19 = match(words, "unlabel");

  let m20 = match(words, "a label");

  let m21 = match(words, "label");

  let m4 = match(words, "river");

  let m5 = match(words, "River");

  let m11 = match(words, "Thriller");

  let m12 = match(words, "thriller");

  let m6 = match(words, "sand");

  let m7 = match(words, "send");

  let m8 = match(words, "Sand");

  let m9 = match(words, "Sea");

  let m10 = match(words, "sea");

  let m13 = match(words, "see");

  let m14 = match(words, "See");

  let m15 = match(words, "Brock");

  let m16 = match(words, "brock");

  let m17 = match(words, "rock");

  let m18 = match(words, "Rock");

  let m22 = match(words, "Mountain");

  let m23 = match(words, "mountain");

  let m24 = match(words, "Hmong");

  let m25 = match(words, "mansion");

  let m26 = match(words, "Manson");

  let m27 = match(words, "Rolled");

  let m28 = match(words, "rolled");

  let m29 = match(words, "Road");

  let m30 = match(words, "road");

  let m31 = match(words, "roll");

  let m32 = match(words, "Roll");

  let m39 = match(words, "route");

  let m40 = match(words, "Route");

  let m33 = match(words, "Tree");

  let m34 = match(words, "tree");

  let m35 = match(words, "Trees");

  let m36 = match(words, "trees");

  let m37 = match(words, "Cheese");

  let m38 = match(words, "cheese");

  let m41 = match(words, "Cloud");

  let m42 = match(words, "cloud");

  let m43 = match(words, "Clouds");

  let m44 = match(words, "clouds");

  let m45 = match(words, "crowd");

  let m46 = match(words, "crowded");

  let m47 = match(words, "f");

  let m48 = match(words, "F");

  let m49 = match(words, "Fog");

  let m50 = match(words, "fog");

  let m51 = match(words, "Clear");

  let m52 = match(words, "clear");

  let m53 = match(words, "Erase");

  let m54 = match(words, "erase");

  let m55 = match(words, "Generate");

  let m56 = match(words, "generate");

  let m57 = match(words, "January");

  let m58 = match(words, "Submit");

  let m59 = match(words, "submit");

​

  if (m1 || m2 || m3 || m19 || m20 || m21) {

    unlabel = true;

    river = false;

    sand = false;

    sea = false;

    rock = false;

    mountain = false;

    road = false;

    tree = false;

    clouds = false;

    fog = false;

  }

​

  if (m4 || m5 || m11 || m12) {

    unlabel = false;

    river = true;

    sand = false;

    sea = false;

    rock = false;

    mountain = false;

    road = false;

    tree = false;

    clouds = false;

    fog = false;

  }

​

  if (m6 || m7 || m8) {

    unlabel = false;

    river = false;

    sand = true;

    sea = false;

    rock = false;

    mountain = false;

    road = false;

    tree = false;

    clouds = false;

    fog = false;

  }

​

  if (m9 || m10 || m13 || m14) {

    unlabel = false;

    river = false;

    sand = false;

    sea = true;

    rock = false;

    mountain = false;

    road = false;

    tree = false;

    clouds = false;

    fog = false;

  }

​

  if (m15 || m16 || m17 || m18) {

    unlabel = false;

    river = false;

    sand = false;

    sea = false;

    rock = true;

    mountain = false;

    road = false;

    tree = false;

    clouds = false;

    fog = false;

  }

​

  if (m22 || m23 || m24 || m25 || m26) {

    unlabel = false;

    river = false;

    sand = false;

    sea = false;

    rock = false;

    mountain = true;

    road = false;

    tree = false;

    clouds = false;

    fog = false;

  }

​

  if (m27 || m28 || m29 || m30 || m31 || m32 || m39 || m40) {

    unlabel = false;

    river = false;

    sand = false;

    sea = false;

    rock = false;

    mountain = false;

    road = true;

    tree = false;

    clouds = false;

    fog = false;

  }

​

  if (m33 || m34 || m35 || m36 || m37 || m38) {

    unlabel = false;

    river = false;

    sand = false;

    sea = false;

    rock = false;

    mountain = false;

    road = false;

    tree = true;

    clouds = false;

    fog = false;

  }

​

  if (m41 || m42 || m43 || m44 || m45 || m46) {

    unlabel = false;

    river = false;

    sand = false;

    sea = false;

    rock = false;

    mountain = false;

    road = false;

    tree = false;

    clouds = true;

    fog = false;

  }

​

  if (m47 || m48 || m49 || m50) {

    unlabel = false;

    river = false;

    sand = false;

    sea = false;

    rock = false;

    mountain = false;

    road = false;

    tree = false;

    clouds = false;

    fog = true;

  }

​

  // generate and reset sketch without loop

​

      if (m51 || m52 || m53 || m54) {

      clearCanvas();

      unlabel = false;

      river = false;

      sand = false;

      sea = false;

      rock = false;

      mountain = false;

      road = false;

      tree = false;

      clouds = false;

      fog = false;

    }

​

  //     if (m55 || m56 || m57 || m58 || m59) {

  //     submitSketch();

  //     unlabel = false;

  //     river = false;

  //     sand = false;

  //     sea = false;

  //     rock = false;

  //     mountain = false;

  //     road = false;

  //     tree = false;

  //     clouds = false;

  //     fog = false;

  //   }

​

  if (unlabel === true && buttoncommand === false) {

    // sand = false;

    myColor = "#000000";

  }

​

  if (river === true && buttoncommand === false) {

    // sand = false;

    myColor = "#003996";

  }

​

  if (sand === true && buttoncommand === false) {

    // sand = true;

    myColor = "#ffbad3";

  }

​

  if (sea === true && buttoncommand === false) {

    // sand = false;

    myColor = "#363ea7";

  }

​

  if (rock === true && buttoncommand === false) {

    // sand = false;

    myColor = "#a06062";

  }

​

  if (mountain === true && buttoncommand === false) {

    sand = false;

    myColor = "#3c3732";

  }

​

  if (road === true && buttoncommand === false) {

    sand = false;

    myColor = "#aeaac8";

  }

​

  if (tree === true && buttoncommand === false) {

    sand = false;

    myColor = "#8c682f";

  }

​

  if (clouds === true && buttoncommand === false) {

    sand = false;

    myColor = "#aaaaaa";

  }

​

  if (fog === true && buttoncommand === false) {

    sand = false;

    myColor = "#a52101";

  }

}

​

function setup() {

  let speech = new p5.Speech(voiceReady);

  canvasbot.onResult = showResult; // callback function that triggers when speech is recognized

​

  //create a speak button

  button = createButton("Click to Speak");

  button.style("font-size", "15px");

  button.style("background-color", "#BF25BB");

  button.position(w * 0.32, h * 0.545);

  button.style("color: white");

  button.style("font-size: 15px");

  button.style("font-weight: bold");

  button.style("font-family: Helvetica");

  button.style("letter-spacing: 0px");

  button.style("border-radius: 3px");

  button.size(120, 45);

  // button.mousePressed(listen);

  button.mousePressed(function () {

    buttoncommand = false;

    listen();

    // distinguish();

  });

​

  // distinguish();

​

  let cnv = createCanvas(w, h * 0.4);

  background("#5fdbff");

  cnv.position(0, h*0.131);

  g1=createGraphics(w, h * 0.4);

​

  button1 = createButton("Unlabel");

  // button1.position(30, 18);

  button1.position(w * 0.09, 18);

  button1.size(90, 30);

  button1.style("background-color", "#000000");

  button1.style("color", "#ffffff");

  // button1.style('border-radius', '20');

  button1.style("border-radius: 5px");

  button1.mousePressed(function () {

    buttoncommand = true;

    stopSound.play();

    stopListening();

    sand = false;

    changeColor("#000000");

  });

​

  button2 = createButton("River");

  // button2.position(150, 18);

  button2.position(w * 0.27, 18);

  button2.size(90, 30);

  button2.style("background-color", "#003996");

  button2.style("color", "#ffffff");

  button2.style("border-radius: 5px");

  button2.mousePressed(function () {

    buttoncommand = true;

    stopSound.play();

    stopListening();

    // myColor = "#003996";

    changeColor("#003996");

    // loop();

    // sand = false;

  });

​

  button3 = createButton("Sand");

  // button3.position(270, 18);

  button3.position(w * 0.45, 18);

  button3.size(90, 30);

  button3.style("background-color", "#ffbad3");

  button3.style("color", "#ffffff");

  button3.style("border-radius: 5px");

  button3.mousePressed(function () {

    buttoncommand = true;

    stopSound.play();

    stopListening();

    changeColor("#ffbad3");

  });

​

  button4 = createButton("Sea");

  button4.position(w * 0.63, 18);

  button4.size(90, 30);

  button4.style("background-color", "#363ea7");

  button4.style("color", "#ffffff");

  button4.style("border-radius: 5px");

  button4.mousePressed(function () {

    buttoncommand = true;

    stopSound.play();

    stopListening();

    changeColor("#363ea7");

  });

​

  button5 = createButton("Rock");

  button5.position(w * 0.81, 18);

  button5.size(90, 30);

  button5.style("background-color", "#a06062");

  button5.style("color", "#ffffff");

  button5.style("border-radius: 5px");

  button5.mousePressed(function () {

    buttoncommand = true;

    stopSound.play();

    stopListening();

    changeColor("#a06062");

  });

​

  button6 = createButton("Mountain");

  button6.position(w * 0.09, 60);

  button6.size(90, 30);

  button6.style("background-color", "#3c3732");

  button6.style("color", "#ffffff");

  button6.style("border-radius: 5px");

  button6.mousePressed(function () {

    buttoncommand = true;

    stopSound.play();

    stopListening();

    changeColor("#3c3732");

  });

​

  button7 = createButton("Road");

  button7.position(w * 0.27, 60);

  button7.size(90, 30);

  button7.style("background-color", "#aeaac8");

  button7.style("color", "#ffffff");

  button7.style("border-radius: 5px");

  button7.mousePressed(function () {

    buttoncommand = true;

    stopSound.play();

    stopListening();

    changeColor("#aeaac8");

  });

​

  button8 = createButton("Tree");

  button8.position(w * 0.45, 60);

  button8.size(90, 30);

  button8.style("background-color", "#8c682f");

  button8.style("color", "#ffffff");

  button8.style("border-radius: 5px");

  button8.mousePressed(function () {

    buttoncommand = true;

    stopSound.play();

    stopListening();

    changeColor("#8c682f");

  });

​

  button9 = createButton("Clouds");

  button9.position(w * 0.63, 60);

  button9.size(90, 30);

  button9.style("background-color", "#aaaaaa");

  button9.style("color", "#ffffff");

  button9.style("border-radius: 5px");

  button9.mousePressed(function () {

    buttoncommand = true;

    stopSound.play();

    stopListening();

    changeColor("#aaaaaa");

  });

​

  button10 = createButton("Fog");

  button10.position(w * 0.81, 60);

  button10.size(90, 30);

  button10.style("background-color", "#a52101");

  button10.style("color", "#ffffff");

  button10.style("border-radius: 5px");

  button10.mousePressed(function () {

    buttoncommand = true;

    stopSound.play();

    stopListening();

    changeColor("#a52101");

  });

​

  clearButton = createButton("X CLEAR");

  clearButton.position(w * 0.8, h * 0.549);

  clearButton.mousePressed(clearCanvas);

  clearButton.style("background-color", "#FF0000");

  clearButton.style("color: white");

  clearButton.style("font-size: 16px");

  clearButton.style("font-weight: bold");

  clearButton.style("font-family: Helvetica");

  clearButton.style("letter-spacing: 0px");

  clearButton.style("border-radius: 3px");

  clearButton.size(100, 40);

​

  submitButton = createButton("Generate");

  submitButton.position(w * 0.55, h * 0.545);

  submitButton.mousePressed(submitSketch);

  submitButton.style("background-color", "#0000FF");

  submitButton.style("color: white");

  submitButton.style("font-size: 18px");

  submitButton.style("font-weight: bold");

  submitButton.style("font-family: Helvetica");

  submitButton.style("letter-spacing: 0px");

  submitButton.style("border-radius: 3px");

  submitButton.size(120, 45);

​

  slider = createSlider(20, 130, 80);

  // slider.position(window.innerWidth * 0.05, 520);

  slider.position(w * 0.028, h * 0.581);

  slider.style("width", "160px");

​

  // sendInput();

}

​

function changeColor(color) {

  myColor = color;

  console.log(myColor);

}

​

function styling() {

  let cnv = createCanvas(w, h * 0.4);

  background("#5fdbff");

  cnv.position(0, 100);

  button1.position(w * 0.09, 18);

  button2.position(w * 0.27, 18);

  button3.position(w * 0.45, 18);

  button4.position(w * 0.63, 18);

  button5.position(w * 0.81, 18);

  button6.position(w * 0.09, 60);

  button7.position(w * 0.27, 60);

  button8.position(w * 0.45, 60);

  button9.position(w * 0.63, 60);

  button10.position(w * 0.81, 60);

​

  button.position(w * 0.32, h * 0.545);

​

  submitButton.position(w * 0.55, h * 0.545);

  clearButton.position(w * 0.8, h * 0.549);

  slider.position(w * 0.028, h * 0.581);

  slider.style("width", "160px");

}

​

window.onresize = function () {

  // assigns new values for width and height variables

  w = window.innerWidth;

  h = window.innerHeight;

  // background('#5fdbff');

  resizeCanvas(w, h);

  styling();

};

​

// function hello(){

​

//   let m1 = match(words, "sand");

//   let m2 = match(words, "send");

//   let m3 = match(words, "river");

​

// if (m1 || m2) {

//     sand = true;

//   }

// if (m3) {

//      changeColor("#003996");

//   }

// }

​

function draw() {

  background("#5fdbff");

  image(g1,0,0);

  // g1.ellipse(mouseX,mouseY,10,10);

  // background(95, 219, 255, 1);

​

  distinguish();

  // changeColor(myColor);

​

  //   button1.mousePressed(function () {

  //   sand = false;

  //   changeColor("#000000");

  // });

​

  // background(myColor);

  noFill();

  let penWidth = slider.value();

  // fill (color(255, 204, 0));

  // ellipse(mouseX, mouseY, 55, 55);

​

  //     background (255);

​

  //   fill(0);

  //   stroke (10);

​

  //     circle (mouseX,mouseY,20);

​

  // stroke(10);

  // fill(0);

  // ellipse(mouseX - width/2, mouseY - height/2, 200);

​

  if (mouseIsPressed && mouseY > 8 && mouseY < 335) {

    g1.stroke(myColor);

    g1.strokeWeight(penWidth);

    g1.line(mouseX, mouseY, pmouseX, pmouseY);

    // content = true;

    // background("#5fdbff");

    // noLoop();

    // if (mouseY > 105 && mouseY < 455)

    // const point = {

    //  x: mouseX,

    //  y: mouseY,

    //  color: myColor,

    //  weight: weight.value

    // };

    // currentPath.push(point);

  } else {

    // background("#5fdbff");

    fill(myColor);

    noStroke();

    ellipse(mouseX, mouseY, penWidth);

    // create another background that refresh on top?

  }

​

  // paths.forEach(path => {

  //    beginShape();

  //    path.forEach(point => {

  //        stroke(point.color);

  //        strokeWeight(point.weight);

  //        vertex(point.x, point.y);

  //    });

  //    endShape();

  // });

​

  // fill(255, 204, 0);

  // noStroke();

  // rect(0, 0, window.innerWidth, 105);

  // rect(0, window.innerHeight * 0.57, window.innerWidth, 105);

​

  //     fill ('#000')

  // textSize(20);

  // text ("Scale: " + slider.value(), 500,500);

​

  // fill("#000");

  // textSize(20);

  // text("Stroke Weight: ", innerWidth * 0.055, 510);

}

​

function clearCanvas() {

  g1.clear();

  background("#5fdbff");

  if (imageSave == true) {

    img.remove();

  }

}

​

function submitSketch() {

  sendInput();

  if (imageSave == true) {

    img.remove();

  }

}

​

function sendInput() {

  // video.loadPixels();

  const ImageData = canvas.toDataURL();

  const inputs = {

    semantic_map: ImageData,

  };

  model.query(inputs).then((outputs) => {

    const { output } = outputs;

    getOutput(output);

    // sendInput();

  });

}

​

function getOutput(base64Data) {

  // background('#ffa52f');

  // var img;

  img = createImg(base64Data, "generated image");

  // img.position(0, 0);

  // img.size (width, height);

  img.style("position", "relative");

  img.style("top", "31.2vh");

  img.style("width", "100%");

  img.style("height", "auto");

  // var raw = new Image();

  // raw.src = base64Data;

  // raw.onload = function() {

  //   img = createImage(raw.width, raw.height);

  //   img.drawingContext.drawImage(raw, 0, 0);

  //   image(img, 0, h*0.1, width, height);

  // }

  console.log("success");

  imageSave = true;

}

​

// mountain, clouds, river, sea

​

//color : white => light blue

​

//check output url

​

// function mousePressed() {

//  currentPath = [];

//  paths.push(currentPath);

// }

​