IrhaAli/pika-running.js Secret

## pika-running.js
<!DOCTYPE html>
<html>
	<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />

	<title>Pikachu with TF.js</title>

	<script src="https://unpkg.com/@tensorflow/tfjs-core@3.7.0/dist/tf-core.js"></script>

	<script src="https://unpkg.com/@tensorflow/tfjs-backend-webgl@3.7.0/dist/tf-backend-webgl.js"></script>

	<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/hand-pose-detection@2.0.0/dist/hand-pose-detection.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.4.1646424915/hands.min.js"></script>
	<style>
		* {
      box-sizing: border-box;
      user-select: none;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-family: Arial, sans-serif;
      background-color: #ffffff;
      color: #333333;
    }

    body {
      margin: 0;
      padding: 0;
    }

    .container {
      margin: 20px auto;
      display: flex;
	  flex-direction: column;
    }

    .video,
    .debug {
      padding: 0 20px;
    }
	#pose-video {
      transform: scaleX(-1);
    }
	#video-container {
      width: 160px;
      height: 90px;
      position: relative;
    }
	#image {
		position: absolute;
	}
	</style>
	<body>
		<div class="container">
			<div class="video">
				<div id="video-container">
					<video id="pose-video" playsinline></video>
				</div>
			</div>
			<div>
				<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/8d6cfe44-5fe9-4aaf-9cde-700622aa927d/dccwm24-630b8838-739d-419f-9c32-68bf84d971ab.gif/v1/fill/w_750,h_600,q_85,strp/pikachu_running_by_lamunesadv_dccwm24-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NjAwIiwicGF0aCI6IlwvZlwvOGQ2Y2ZlNDQtNWZlOS00YWFmLTljZGUtNzAwNjIyYWE5MjdkXC9kY2N3bTI0LTYzMGI4ODM4LTczOWQtNDE5Zi05YzMyLTY4YmY4NGQ5NzFhYi5naWYiLCJ3aWR0aCI6Ijw9NzUwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.-iD2eeBk2I9nSvF2FPOfuNtT77vjWBtX_u3nZN0zGFc" alt="Pikachu running" width="250" />
			</div>
		</div>
		<script>
			const config = {
				video: {
					width: 160,
					height: 90,
					fps: 30
				}
			}

			async function createDetector() {
				return window.handPoseDetection.createDetector(window.handPoseDetection.SupportedModels.MediaPipeHands, {
					runtime: 'mediapipe',
					modelType: 'lite',
					maxHands: 1,
					solutionPath: 'https://cdn.jsdelivr.net/npm/@mediapipe/hands'
				})
			}

			async function main() {
				const video = document.querySelector('#pose-video')

        // For hand detection
				const detector = await createDetector();
				console.log('ML model loaded')

				const detectHand = async () => {
					const hands = await detector.estimateHands(video , {flipHorizontal: true})
					console.log(hands)

					for(const hand of hands) {
						const {score, handedness} = hand
						console.log(score, handedness)
					}
					setTimeout(() => {
						detectHand()
					}, 1000/config.video.fps)
				}
				detectHand();
			}

			async function initVideo(width, height, fps) {
				const constraints = {
					audio: false,
					video :{
						facingMode: 'user',
						width: width,
						height: height,
						frameRate: {max: fps}
					}
				}

				const video = document.querySelector("#pose-video")
				video.width = width
				video.height = height;

				const stream = await navigator.mediaDevices.getUserMedia(constraints)

				video.srcObject = stream;

				return new Promise(resolve => {
					video.onloadedmetadata = () => {resolve(video)}
				})
			}

			window.addEventListener('DOMContentLoaded', () => {
				console.log('DOM loaded')
				initVideo(config.video.width, config.video.height, config.video.fps).then(video => {
					video.play()
					video.addEventListener('loadeddata', event => {
						console.log('Camera is up and running')
						main()
					})
				})
			})
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />

	<title>Pikachu with TF.js</title>

	<script src="https://unpkg.com/@tensorflow/tfjs-core@3.7.0/dist/tf-core.js"></script>

	<script src="https://unpkg.com/@tensorflow/tfjs-backend-webgl@3.7.0/dist/tf-backend-webgl.js"></script>

	<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/hand-pose-detection@2.0.0/dist/hand-pose-detection.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.4.1646424915/hands.min.js"></script>
	<style>
	* {
	box-sizing: border-box;
	user-select: none;
	}

	html,
	body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	font-family: Arial, sans-serif;
	background-color: #ffffff;
	color: #333333;
	}

	body {
	margin: 0;
	padding: 0;
	}

	.container {
	margin: 20px auto;
	display: flex;
	flex-direction: column;
	}

	.video,
	.debug {
	padding: 0 20px;
	}
	#pose-video {
	transform: scaleX(-1);
	}
	#video-container {
	width: 160px;
	height: 90px;
	position: relative;
	}
	#image {
	position: absolute;
	}
	</style>
	<body>
	<div class="container">
	<div class="video">
	<div id="video-container">
	<video id="pose-video" playsinline></video>
	</div>
	</div>
	<div>
	<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/8d6cfe44-5fe9-4aaf-9cde-700622aa927d/dccwm24-630b8838-739d-419f-9c32-68bf84d971ab.gif/v1/fill/w_750,h_600,q_85,strp/pikachu_running_by_lamunesadv_dccwm24-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NjAwIiwicGF0aCI6IlwvZlwvOGQ2Y2ZlNDQtNWZlOS00YWFmLTljZGUtNzAwNjIyYWE5MjdkXC9kY2N3bTI0LTYzMGI4ODM4LTczOWQtNDE5Zi05YzMyLTY4YmY4NGQ5NzFhYi5naWYiLCJ3aWR0aCI6Ijw9NzUwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.-iD2eeBk2I9nSvF2FPOfuNtT77vjWBtX_u3nZN0zGFc" alt="Pikachu running" width="250" />
	</div>
	</div>
	<script>
	const config = {
	video: {
	width: 160,
	height: 90,
	fps: 30
	}
	}

	async function createDetector() {
	return window.handPoseDetection.createDetector(window.handPoseDetection.SupportedModels.MediaPipeHands, {
	runtime: 'mediapipe',
	modelType: 'lite',
	maxHands: 1,
	solutionPath: 'https://cdn.jsdelivr.net/npm/@mediapipe/hands'
	})
	}

	async function main() {
	const video = document.querySelector('#pose-video')

	// For hand detection
	const detector = await createDetector();
	console.log('ML model loaded')

	const detectHand = async () => {
	const hands = await detector.estimateHands(video , {flipHorizontal: true})
	console.log(hands)

	for(const hand of hands) {
	const {score, handedness} = hand
	console.log(score, handedness)
	}
	setTimeout(() => {
	detectHand()
	}, 1000/config.video.fps)
	}
	detectHand();
	}

	async function initVideo(width, height, fps) {
	const constraints = {
	audio: false,
	video :{
	facingMode: 'user',
	width: width,
	height: height,
	frameRate: {max: fps}
	}
	}

	const video = document.querySelector("#pose-video")
	video.width = width
	video.height = height;

	const stream = await navigator.mediaDevices.getUserMedia(constraints)

	video.srcObject = stream;

	return new Promise(resolve => {
	video.onloadedmetadata = () => {resolve(video)}
	})
	}

	window.addEventListener('DOMContentLoaded', () => {
	console.log('DOM loaded')
	initVideo(config.video.width, config.video.height, config.video.fps).then(video => {
	video.play()
	video.addEventListener('loadeddata', event => {
	console.log('Camera is up and running')
	main()
	})
	})
	})
	</script>
	</body>
	</html>