2.0 KiB
2.0 KiB
<html lang="en-GB">
<head>
<style>
body {
background: #fafafa;
font-size: 1.5em;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
margin: 2% 10% 5% 10%;
}
h1 {
text-align: center;
}
</style>
<script type="module" src="https://cdn.jsdelivr.net/npm/whisper-transcript@latest/dist/index.js"></script>
</head>
<whisper-transcript>
This is an example of using the whisper-transcript web component to display a Whisper speech-to-text transcript that was generated using word timestamps in order to visualize the confidence scores in the context of the words and their sound:
$ whisper --model small audio.mp3 --word_timestamps TrueRunning this command generates an audio.json file which contains detailed timestamp information for each word, and also a probability score that indicates the confidence in Whisper's transcription. Note: I intentionally ran with the small model in order to get more varied probabilities in this example.
View the HTML source to see how to use the whisper-transcript web component in your own pages. But it's basically:
<script type="module" src="https://cdn.jsdelivr.net/npm/whisper-transcript@latest/dist/index.js"></script>
<whisper-transcript audio="audio.mp3" url="audio.json"></whisper-transcript>