97 lines
4.0 KiB
HTML
97 lines
4.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>MediaPipe: YouTube8M Model Inference Demo</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<base href="/">
|
|
<script src="main.js"></script>
|
|
<link rel="stylesheet"
|
|
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
|
|
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
|
|
crossorigin="anonymous">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container-fluid">
|
|
<h2>
|
|
MediaPipe: YouTube8M Model Inference Demo
|
|
</h2>
|
|
<form id="form">
|
|
<div class="row">
|
|
<div class="card m-2" style="width: 640px;">
|
|
<div>
|
|
<div style="position:relative;">
|
|
<iframe id="ytplayer" style="display:none;" type="text/html" width="640" height="320"
|
|
src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0"
|
|
enablejsapi="1"></iframe>
|
|
<div id="cover" class="bg-warning"
|
|
style="width:640px; height:320px;">
|
|
</div>
|
|
<div id="spinner" class="bg-warning"
|
|
style="display: none; width:640px; height:320px;">
|
|
<div class="spinner-border" role="status"
|
|
style="position:relative; left:300px; top:130px;">
|
|
<span class="sr-only">Loading...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body shadow">
|
|
<div class="row mb-2">
|
|
<ul class="nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link"
|
|
href="https://research.google.com/youtube8m/explore.html"
|
|
target="_">Explore Videos</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="file">YouTube video ID</label>
|
|
<input type="text" class="form-control" name="file" id="file"
|
|
placeholder="Enter a YouTube link or a YouTube ID">
|
|
<small class="form-text text-muted">
|
|
e.g., Both "https://youtube.com/watch?v=huGVGe3Afng" or "huGVGe3Afng" will work.
|
|
</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label id="segments_label" for="segments">Segment Size</label>
|
|
<input type="range" min="1" max="300" step="1" value="5"
|
|
class="form-control-range" name="segments" id="segments">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
<div id="error_msg" style="visibility:hidden;" class="alert alert-danger mt-2"
|
|
role="alert"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card m-2 shadow">
|
|
<div class="card-body">
|
|
<div class="form-group">
|
|
<label id="threshold_label" for="threshold">Score Threshold</label>
|
|
<input type="range" min="0" max="0.99" step="0.01" value="0.2"
|
|
class="form-control-range" name="threshold" id="threshold">
|
|
</div>
|
|
<h5>
|
|
Labels
|
|
</h5>
|
|
<textarea id="feedback" style="height:320px; width:500px;"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
<script async src="https://www.youtube.com/iframe_api"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
|
|
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
|
|
crossorigin="anonymous"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
|
|
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
|
|
crossorigin="anonymous"></script>
|
|
</html>
|
|
|
|
|