<script> import { onMounted, ref, computed } from 'vue'; import * as tmImage from '@teachablemachine/image'; import { fetch as fetchPolyfill } from 'whatwg-fetch'; export default { setup() { // variable and DOM const videoRef = ref(null); const imageRef = ref(null); const showCamera = ref(true); const usermediaLoaded = ref(false); const firstTimePredicted = ref(false); const playIcon = ref('play'); const toggleCameraIcon = ref('nosign'); const player = ref('Nothing'); const computer = ref('Nothing'); const result = ref(null); const vs = ref(null); const w = 224; // width for video, image const h = 224; // height for video, image const predictionInterval = 1000 * 1; // set it lower if the pc and model could run faster const gamePlayInterval = 1000 * 1.5; // will play with computer every this interval let model; let predictionTimer = null; let gamePlayTimer = null; let totalClasses; // classes from model - nothing, rock, paper, scissors let labels; onMounted(async () => { if (isAndroid()) { // overwrite fetch so that it can load model from file system window.fetch = fetchPolyfill; } // load model const URL = 'static/model/rock-paper-scissors/'; const modelURL = URL + 'model.json'; const metadataURL = URL + 'metadata.json'; model = await tmImage.load(modelURL, metadataURL); // run the first prediction since it takes few seconds. the subsequent predictions are almost realtime. totalClasses = model.getTotalClasses(); labels = model.getClassLabels(); classify(imageRef.value); // start usermedia stream on web and if browser support it if (!isMobile() && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { startUserMedia(); } }); const play = () => { if (isMobile()) { predictWithCanvasCamera() } else { predictWithUsermedia(); } } const toggleCamera = () => { showCamera.value = !showCamera.value; if (!showCamera.value) { toggleCameraIcon.value = 'camera'; } else { toggleCameraIcon.value = 'nosign'; } } ... } } </script>