whisper.cpp Server Web. Interface

README.md

whisper.cpp Server

https://github.com/ggerganov/whisper.cpp/tree/master/examples/server

Setup

1. whisper.cpp setup
2. server build and run

$ make server
$ ./server -m ./models/ggml-large-v3.bin -l ja

3. voice record server

$ python3 -m http.server

whisper.cpp recode file format

// index.html
const wavBuffer = vad.utils.encodeWAV(arr, 1, 16000, 1, 16)

Stream #0:0: Audio: pcm_s16le ([1][0][0][0] / 0x0001), 16000 Hz, 1 channels, s16, 256 kb/s

index.html

<meta charset="UTF-8" />
<title>whisper.cpp server</title>
<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.13.1/dist/ort.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@ricky0123/vad/dist/index.browser.js"></script>
<script type="module">
try {
    const myvad = await vad.MicVAD.new({
        positiveSpeechThreshold: 0.5,
        negativeSpeechThreshold: 0.5 - 0.15,
        preSpeechPadFrames: 2,
        redemptionFrames: 8,
        frameSamples: 1536,
        minSpeechFrames: 3,
        onSpeechEnd: async (arr) => {
            const wavBuffer = vad.utils.encodeWAV(arr, 1, 16000, 1, 16)
            var file = new File([wavBuffer], `file${Date.now()}.wav`)
            let formData = new FormData()
            formData.append("file", file)
            formData.append("response_format", "json")
            try {
                const resp = await fetch("http://127.0.0.1:8080/inference", {
                    method: "POST",
                    body: formData,
                })
                const resp2 = await resp.json()
                console.log(resp2.text)
                const result_text = resp2.text;
                const text = document.body;
                text.setAttribute("data-text", result_text)
            } catch (err) {
                console.log(err)
            }
        },
    })
    myvad.start()
} catch (e) {
    console.error("Failed:", e)
}
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@900&display=swap');

body {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    align-content: flex-end;
    overflow: hidden;
    margin: 5vh 5vw;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 10vh;
    line-height: 1.1em;
    text-align: center;
    position: relative;
}

body::before {
    content: attr(data-text);
    position: absolute;
    color: #FF0;
    -webkit-text-stroke: 0.5vh #000;
    z-index: 30;
}

body::after {
    content: attr(data-text);
    position: absolute;
    color: #FFF;
    -webkit-text-stroke: 1.0vh #FFF;
    z-index: 20;
}
body {
    background-color: lime;
}
</style>