<template>
  <div class="flex w-full">
    <div class="m-auto media-size-properties">
      <div class="rounded-2xl border shadow">
        <div class="flex flex-col p-2">
          <!-- Buttons and image url section -->
          <section class="flex flex-col justify-center">
            <h1 class="text-2xl font-bold text-center mb-5">
              Tensorflow.js - object detection!
            </h1>
            <div class="flex flex-col justify-center">
              <input
                v-model="state.imageLinkInput"
                type="text"
                placeholder="Paste and image url here!"
                class="p-2 my-2 rounded-md border shadow"
              />
              <button
                @click="setImage"
                class="p-2 my-1 bg-gradient-to-t from-gray-800 to-gray-700 text-white px-3 rounded-md hover:from-gray-700"
              >
                Set image
              </button>
            </div>
            <button
              @click="changeImage"
              class="p-2 my-1 bg-gradient-to-t from-gray-800 to-gray-700 text-white px-3 rounded-md hover:from-gray-700"
            >
              Get random image!
            </button>
            <button
              @click="detectObject"
              :disabled="state.isDetecting ? true : false"
              class="p-2 my-1 bg-gradient-to-t from-red-900 to-red-800 text-white px-3 rounded-md hover:from-red-800"
            >
              <span v-if="!state.isDetecting">Detect object</span>
              <span v-else>I am detecting object...</span>
            </button>
            <div class="h-14 mt-5">
              <h1
                v-if="state.detectionResult"
                class="p-2 text-xl text-center bg-gray-700 text-white rounded-md fade-in"
              >
                You have detected: <b>{{ state.detectionResult }}</b>
              </h1>
            </div>
          </section>
          <!-- End Buttons and image url section -->

          <!-- Image to detect section -->
          <section class="flex justify-center">
            <img
              ref="state.imageToDetect"
              crossorigin="anonymous"
              class="rounded-md"
              style="width: 90%"
            />
          </section>
          <!-- End Image to detect section -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@tensorflow/tfjs-backend-cpu";
import "@tensorflow/tfjs-backend-webgl";

import * as cocoSsd from "@tensorflow-models/coco-ssd";
import { onMounted, reactive } from "vue";

export default {
  setup() {
    const state = reactive({
      isDetecting: false,
      imageToDetect: "",
      imageLinkInput: "",
      detectionResult: "",
    });

    onMounted(() => {
      state.imageToDetect.src =
        "https://images.unsplash.com/photo-1561157437-415893bd7149";
    });

    async function detectObject() {
      clearInputAndResult();

      state.isDetecting = true;
      const model = await cocoSsd.load();

      model
        .detect(state.imageToDetect)
        .then((predictions) => {
          console.log(predictions[0].class);
          state.detectionResult = predictions[0].class;
        })
        .catch((error) => {
          console.log(error);
          state.detectionResult = "Sorry! I can't detect the picture :(";
        });

      state.isDetecting = false;
    }

    function changeImage() {
      clearInputAndResult();

      state.imageToDetect.src =
        "https://images.unsplash.com/photo-1489824904134-891ab64532f1";
    }

    function setImage() {
      if (state.imageLinkInput) {
        state.imageToDetect.src = state.imageLinkInput;

        clearInputAndResult();
      }
    }

    function clearInputAndResult() {
      state.imageLinkInput = "";
      state.detectionResult = "";
    }

    return {
      cocoSsd,
      detectObject,
      changeImage,
      setImage,
      state,
    };
  },
};
</script>

<style>
.media-size-properties {
  width: 30%;
}

@media screen and (max-width: 992px) {
  .media-size-properties {
    width: 30%;
  }
}

@media screen and (max-width: 600px) {
  .media-size-properties {
    width: 90%;
  }
}

.fade-in {
  animation: fadeIn ease 0.5s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    width: 50%;
  }

  to {
    opacity: 1;
    width: 100%;
  }
}
</style>