What need to reconstruct the live demo working page #14
Description
These need to be provided by the BlazorML5 blazor component is now missing
| <script src="_content/BlazorML5/WebCam.js"></script>
| <script src="_content/BlazorML5/ml5ImageClassifier.js"></script>
| <script src="_content/BlazorML5/ml5NeuralNetwork.js"></script>
| <script src="_content/BlazorML5/ml5SoundClassifier.js"></script>
| <script src="_content/BlazorML5/ml5ObjectDetector.js"></script>
| <script src="_content/BlazorML5/ml5PoseNet.js"></script><html>
<body>
<!--StartFragment-->
| <!DOCTYPE html>
-- | --
| <html>
|
| <head>
| <meta charset="utf-8" />
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
| <title>Blazor ML5 Demo</title>
| <base href="/" />
| <link href="css/app.css" rel="stylesheet" />
| <link href="DemoApplication.styles.css" rel="stylesheet" />
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
| <!-- Google Fonts Roboto -->
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
| <!-- MDB -->
| <script src="js/mdb.min.js"></script>
| <link rel="stylesheet" href="css/mdb.min.css" />
| <script src="_content/Blazor.Extensions.Canvas/blazor.extensions.canvas.js"></script>
|
| <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
| <script src="_content/BlazorML5/WebCam.js"></script>
| <script src="_content/BlazorML5/ml5ImageClassifier.js"></script>
| <script src="_content/BlazorML5/ml5NeuralNetwork.js"></script>
| <script src="_content/BlazorML5/ml5SoundClassifier.js"></script>
| <script src="_content/BlazorML5/ml5ObjectDetector.js"></script>
| <script src="_content/BlazorML5/ml5PoseNet.js"></script>
| </head>
|
| <body>
| <div id="app">
| <div class="showbox">
| <div class="loader">
| <svg class="circular" viewBox="25 25 50 50">
| <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
| </svg>
| </div>
| </div>
| </div>
|
| <div id="blazor-error-ui">
| An unhandled error has occurred.
| <a href="" class="reload">Reload</a>
| <a class="dismiss">🗙</a>
| </div>
| <style>
| .loader {
| position: relative;
| margin: 0 auto;
| width: 100px;
| }
|
| .loader:before {
| content: '';
| display: block;
| padding-top: 100%;
| }
|
| .circular {
| animation: rotate 2s linear infinite;
| height: 100%;
| transform-origin: center center;
| width: 100%;
| position: absolute;
| top: 0;
| bottom: 0;
| left: 0;
| right: 0;
| margin: auto;
| }
|
| .path {
| stroke-dasharray: 1, 200;
| stroke-dashoffset: 0;
| animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
| stroke-linecap: round;
| }
|
| @keyframes rotate {
| 100% {
| transform: rotate(360deg);
| }
| }
|
| @keyframes dash {
| 0% {
| stroke-dasharray: 1, 200;
| stroke-dashoffset: 0;
| }
|
| 50% {
| stroke-dasharray: 89, 200;
| stroke-dashoffset: -35px;
| }
|
| 100% {
| stroke-dasharray: 89, 200;
| stroke-dashoffset: -124px;
| }
| }
|
| @keyframes color {
| 100%, 0% {
| stroke: #d62d20;
| }
|
| 40% {
| stroke: #0057e7;
| }
|
| 66% {
| stroke: #008744;
| }
|
| 80%, 90% {
| stroke: #ffa700;
| }
| }
|
| .showbox {
| position: absolute;
| top: 0;
| bottom: 0;
| left: 0;
| right: 0;
| padding: 5%;
| }
| </style>
| <script src="_framework/blazor.webassembly.js"></script>
|
| </body>
|
| </html>
|
<!--EndFragment-->
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Blazor ML5 Demo</title>
<base href="[/](https://blazor-ml5-sample.netlify.app/)" />
<link href="[css/app.css](https://blazor-ml5-sample.netlify.app/css/app.css)" rel="stylesheet" />
<link href="[DemoApplication.styles.css](https://blazor-ml5-sample.netlify.app/DemoApplication.styles.css)" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
<!-- MDB -->
<script src="[js/mdb.min.js](https://blazor-ml5-sample.netlify.app/js/mdb.min.js)"></script>
<link rel="stylesheet" href="[css/mdb.min.css](https://blazor-ml5-sample.netlify.app/css/mdb.min.css)" />
<script src="[_content/Blazor.Extensions.Canvas/blazor.extensions.canvas.js](https://blazor-ml5-sample.netlify.app/_content/Blazor.Extensions.Canvas/blazor.extensions.canvas.js)"></script>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
<script src="[_content/BlazorML5/WebCam.js](https://blazor-ml5-sample.netlify.app/_content/BlazorML5/WebCam.js)"></script>
<script src="[_content/BlazorML5/ml5ImageClassifier.js](https://blazor-ml5-sample.netlify.app/_content/BlazorML5/ml5ImageClassifier.js)"></script>
<script src="[_content/BlazorML5/ml5NeuralNetwork.js](https://blazor-ml5-sample.netlify.app/_content/BlazorML5/ml5NeuralNetwork.js)"></script>
<script src="[_content/BlazorML5/ml5SoundClassifier.js](https://blazor-ml5-sample.netlify.app/_content/BlazorML5/ml5SoundClassifier.js)"></script>
<script src="[_content/BlazorML5/ml5ObjectDetector.js](https://blazor-ml5-sample.netlify.app/_content/BlazorML5/ml5ObjectDetector.js)"></script>
<script src="[_content/BlazorML5/ml5PoseNet.js](https://blazor-ml5-sample.netlify.app/_content/BlazorML5/ml5PoseNet.js)"></script>
</head>
<body>
<div id="app">
<div class="showbox">
<div class="loader">
<svg class="circular" viewBox="25 25 50 50">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
</svg>
</div>
</div>
</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<style>
.loader {
position: relative;
margin: 0 auto;
width: 100px;
}
.loader:before {
content: '';
display: block;
padding-top: 100%;
}
.circular {
animation: rotate 2s linear infinite;
height: 100%;
transform-origin: center center;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
stroke-linecap: round;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35px;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px;
}
}
@keyframes color {
100%, 0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%, 90% {
stroke: #ffa700;
}
}
.showbox {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 5%;
}
</style>
<script src="[_framework/blazor.webassembly.js](https://blazor-ml5-sample.netlify.app/_framework/blazor.webassembly.js)"></script>
</body>
</html>