docs/index.html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wasm Runtime with DAPR</title>
    <link rel="icon" href="./favicon.ico">
    <link rel="stylesheet" href="./style.css">
    <script type='text/javascript' src='./page.js'></script>
</head>

<body>
    <div class="container">
        <div class="main">
            <h1 class="title">
                Welcome to <a href="https://github.com/WasmEdge/WasmEdge">WasmEdge!</a>
            </h1>

            <div class="operating" style="max-width:90%">
                <div class="row">
                    <p>The image transformation and classification services provided by this web page are both <a href="https://github.com/second-state/dapr-wasm">Dapr-enabled microservices</a>.</p>
                </div>
                <div class="row">
                    <input type="file" id="fileElem" class="visually-hidden" accept="image/*" onchange="fileSelected(this)" />
                    <label for="fileElem" class="noselect">Select a photo</label>

                    <label for="run-api" style="margin-left:10px">API:</label>
                    <select id="run-api" onchange="setButton()" style="margin-right:10px">
                        <option value="grayscale">Grayscale</option>
                        <option value="classify">Classify</option>
                    </select>
                    <button id="run" onclick="runWasm()" disabled>Submit</button>
                </div>
                <div id="infer-rows" style="margin-top: 30px">
                    <div class='infer' id='result' hidden="true"></div>
                    <img id="upload-pic" hidden="true" src="#" alt="uploaded" style="max-width:500px; max-height:500px;" />
                </div>
                <div class="row" hidden="true" id="grayscale-rows" style="margin-top: 30px; margin-left: 20%; margin-right: 20%;align-content: center;">
                    <div class='column'>
                        <img id="origin-pic" hidden="true" src="#" alt="uploaded" style="width:100%" />
                    </div>

                    <div class='column'>
                        <img id="processed-pic" hidden="true" src="#" style="width:100%" />
                    </div>
                </div>

                <div class="row" id="stat" hidden="true" style="margin-top: 30px; margin-right: 20%;align-content: center;">
                    <p>
                        <label></label> <span id="stat-text"></span>
                    </p>
                </div>

            </div>
        </div>

        <footer class="footer">
            <a>Powered by DAPR & WasmEdge</a>
        </footer>
    </div>
</body>

</html>