sps014 / BlazorML5

ML5 Machine Learning For Blazor with JSInterop mechanism
https://blazor-ml5-sample.netlify.com/
MIT License
54 stars 16 forks source link

What need to reconstruct the live demo working page #14

Open GeorgeS2019 opened 2 years ago

GeorgeS2019 commented 2 years ago

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>
sps014 commented 2 years ago

Follow up work is done in this branch, currently added Neural Network sample https://github.com/sps014/BlazorML5/tree/ui-rewrite/SampleApp/Pages