![\"\"](\"https:\/\/www.incredigeek.com\/home\/wp-content\/uploads\/2023\/05\/image-3.png\")
<\/a><\/figure>\n\n\n\n<\/p>\n\n\n\n
Setting up Prerequisite<\/h2>\n\n\n\n
Installing whisper-ctranslate2<\/strong><\/p>\n\n\n\n Install NodeJS<\/strong><\/p>\n\n\n\n or <\/p>\n\n\n\n Install Node Dependencies<\/strong><\/p>\n\n\n\n First we need a web directory to use.<\/p>\n\n\n\n Next lets make an uploads folder<\/p>\n\n\n\n Now let’s create a main.js file. Node is going to be our webserver. Copy the following contents.<\/p>\n\n\n\n Now create an index.html file and paste the following in<\/p>\n\n\n\n Now we should be set to go.<\/p>\n\n\n\n Fire the web server up with<\/p>\n\n\n\n If we want to start it in the background, run<\/p>\n\n\n\n <\/p>\n\n\n\n If you hit Transcribe with no file selected, the server crashes.<\/p>\n\n\n\n We are calling whisper-ctranslate2 directly, if it is not in the path, then it won’t work.<\/p>\n\n\n\n Would be nice to have an option for getting rid of the timestamps.<\/p>\n","protected":false},"excerpt":{"rendered":" Created a little web interface to use Whisper, technically using whisper-ctranslate2 which is built on faster-whisper. This is not currently ready to be run on the public web. It doesn’t have any sort of TLS for encrypting communications from client … Continue reading pip install -U whisper-ctranslate2<\/pre>\n\n\n\n
sudo apt install nodejs<\/pre>\n\n\n\n
sudo dnf install nodejs<\/pre>\n\n\n\n
npm install formidable
npm install http
npm install fs<\/pre>\n\n\n\nSetting up Simple Whisper Web Interface<\/h2>\n\n\n\n
mkdir uploads<\/pre>\n\n\n\n
var http = require('http')\nvar formidable = require('formidable')\nvar fs = require('fs')\n\nconst execSync = require('child_process').execSync\n\nlet newpath = ''\nlet modelSize = 'medium.en'\nconst { exec } = require('node:child_process')\nconst validModels = [\n 'medium.en',\n 'tiny',\n 'tiny.en',\n 'base',\n 'base.en',\n 'small',\n 'small.en',\n 'medium',\n 'medium.en',\n 'large-v1',\n 'large-v2'\n]\nfs.readFile('.\/index.html', function (err, html) {\n if (err) throw err\n\n http\n .createServer(function (req, res) {\n if (req.url == '\/fileupload') {\n res.write(html)\n var form = new formidable.IncomingForm()\n form.parse(req, function (err, fields, files) {\n console.log('Fields ' + fields.modeltousema)\n console.log('File ' + files.filetoupload)\n var oldpath = files.filetoupload.filepath\n newpath = '.\/uploads\/' + files.filetoupload.originalFilename\n modelSize = validModels.includes(fields.modeltouse)\n ? fields.modeltouse\n : 'medium.en'\n console.log('modelSize::' + modelSize)\n fs.rename(oldpath, newpath, function (err) {\n if (err) {\n console.log('No file selected!') \/\/ throw err\n res.write(`<div class=\"results\">No file selected<\/div>`)\n } else {\n console.log(newpath)\n const output = execSync(\n `whisper-ctranslate2 ${newpath} --model ${modelSize}`,\n { encoding: 'utf-8' }\n )\n\n res.write(\n `<div class=\"results\"><h2>Results:<\/h2> <p>${output}<\/p><\/div>`\n )\n res.end()\n }\n })\n })\n } else {\n res.writeHead(200, { 'Content-Type': 'text\/html' })\n res.write(html)\n return res.end()\n }\n })\n .listen(8080)\n})<\/pre>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" \/>\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <title>Voice Transcribing Using Whisper<\/title>\n <link type=\"text\/css\" rel=\"stylesheet\" href=\"style.css\" \/>\n <\/head>\n <style>\n body {\n background-color: #b9dbe7;\n align-items: center;\n }\n\n .box {\n border-radius: 25px;\n padding: 25px;\n width: 80%;\n background-color: azure;\n margin: auto;\n border-bottom: 25px;\n margin-bottom: 25px;\n }\n\n .button {\n border-radius: 25px;\n margin: auto;\n width: 50%;\n height: 50px;\n display: flex;\n justify-content: center;\n border-style: solid;\n\n background-color: #e8d2ba;\n }\n\n h1 {\n text-align: center;\n padding: 0%;\n margin: 0%;\n }\n\n p {\n font-size: larger;\n }\n .headings {\n font-size: large;\n font-weight: bold;\n }\n input {\n font-size: medium;\n }\n select {\n font-size: medium;\n }\n .results {\n white-space: pre-wrap;\n border-radius: 25px;\n padding: 25px;\n width: 80%;\n align-self: center;\n background-color: azure;\n margin: auto;\n }\n .note {\n font-style: italic;\n font-size: small;\n font-weight: normal;\n }\n <\/style>\n <body>\n <script><\/script>\n <div class=\"box\">\n <h1>Simple Whisper Web Interface<\/h1>\n <br \/>\n <p>\n Welcome to the very Simple Whisper Web Interface!<br \/><br \/>\n This is a very basic, easy to use, web interface for OpenAI's Whisper\n tool. It has not been extensively tested, so you may encounter bugs or\n other problems.\n <br \/><br \/>\n Instructions for use. <br \/>1. Select audio file <br \/>2. Select the\n Model you want to use <br \/>\n 3. Click Transcribe! <br \/>4. Copy your transcription\n <\/p>\n <br \/>\n <br \/>\n <div class=\"headings\">\n <form action=\"fileupload\" method=\"post\" enctype=\"multipart\/form-data\">\n Audio File: <input type=\"file\" name=\"filetoupload\" \/><br \/>\n\n <br \/>\n Model:\n <select name=\"modeltouse\" id=\"modeltouse\">\n <option value=\"medium.en\">medium.en<\/option>\n <option value=\"tiny\">tiny<\/option>\n <option value=\"tiny.en\">tiny.en<\/option>\n <option value=\"base\">base<\/option>\n <option value=\"base.en\">base.en<\/option>\n <option value=\"small\">small<\/option>\n <option value=\"small.en\">small.en<\/option>\n <option value=\"medium\">medium<\/option>\n <option value=\"medium.en\">medium.en<\/option>\n <option value=\"large-v1\">large-v1<\/option>\n <option value=\"large-v2\">large-v2<\/option>\n <\/select>\n <p class=\"note\">\n Large-v2 and medium.en seem to produce the most accurate results.\n <\/p>\n <br \/>\n <br \/>\n <br \/>\n <input class=\"button\" type=\"submit\" value=\"Transcribe!\" \/>\n <\/form>\n <\/div>\n <\/div>\n <\/body>\n<\/html>\n<\/pre>\n\n\n\nnode .\/main.js<\/pre>\n\n\n\n
node .\/main.js &<\/pre>\n\n\n\n
Known Limitations or Bugs<\/h2>\n\n\n\n
We are currently using the medium.en model, if the model is not downloaded, then the first transcription may take awhile while it downloads. Would like to add a menu for selecting which model to use.<\/s> We fixed this by adding a drop down that let’s you select a model. <\/p>\n\n\n\n