eaglelandsonce/TensorFlowJSClass

1<!DOCTYPE html>2<html lang="en">3<head>4    <meta charset="UTF-8">5    <meta name="viewport" content="width=device-width, initial-scale=1.0">6    <title>Pose Detection with TensorFlow.js</title>7    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">8    <style>9        body {10            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;11            background-color: #f0f2f5;12        }13        h1 {14            margin-top: 20px;15            color: #007BFF;16            text-align: center;17        }18        .video-container {19            position: relative;20            width: 640px;21            height: 480px;22            margin: 20px auto;23            border: 2px solid #007BFF;24            border-radius: 8px;25            overflow: hidden;26        }27        video, canvas {28            position: absolute;29            top: 0;30            left: 0;31            width: 100%;32            height: 100%;33        }34        .btn-back {35            margin-top: 20px;36        }37    </style>38</head>39<body>40    <div class="container text-center">41        <h1>Pose Detection</h1>42        <div class="video-container">43            <video id="video" playsinline autoplay></video>44            <canvas id="output"></canvas>45        </div>46        <p>This is the content of Pose Detection</p>47        <a href="index.html" class="btn btn-secondary btn-back">Back to Index</a>48    </div>49 50    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>51    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet"></script>52    <script src="script2.js"></script>53</body>54</html>55