js/ort-whisper/index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script src="./dist/bundle.min.js"></script>
    <style>
        /* Add rounded corners to blocks */
        .rounded-block {
            border-radius: 10px;
            border: 1px solid #ccc;
            padding: 20px;
            position: relative;
        }

        /* Move text inside the border */
        .rounded-block h4 {
            position: absolute;
            top: 00%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 5px 10px;
            background-color: white;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <title>onnxruntime-web whisper demo</title>
    <div class="container">
        <h2>onnxruntime-web whisper demo</h2>
        <br />
        <div class="d-grid gap-3">
            <div class="row">
                <div class="col-md-4 rounded-block">
                    <h4>Audio Input</h4>
                    <form>
                        <div class="form-group ">
                            <input type="file" id="file-upload" class="form-control-file">
                        </div>
                        <br />
                        <p>OR</p>
                        <button id="record" class="btn btn-primary" type="button">Record</button>
                    </form>
                </div>

                <div class="col-md-4 rounded-block">
                    <h4>Transcribe</h4>
                    <div id="record_play">
                        <audio id="record_play_audio" controls></audio>
                    </div>
                    <br />
                    <button id="transcribe" class="btn btn-primary" type="button">Transcribe</button>
                </div>

                <div class="col-md-4 rounded-block">
                    <h4>Stats</h4>
                    <div class="bg-light">
                        <div id="latency"></div>
                    </div>
                </div>
            </div>
            <div class="row gap-3">
                <div class="progress">
                    <div id="progress" class="progress-bar progress-bar-striped" role="progressbar" style="width: 0%"
                        aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
            <div class="row gap-3">
                <textarea id="outputText" class="form-control" rows="12" readonly></textarea>
            </div>
            <div class="row gap-3">
                <div id="status" style="font: 1em consolas;"></div>
            </div>
        </div>
    </div>
</body>

</html>