webassembly002 whisper.wasm wasm_eval 与js代码交互 js部分

这篇具有很好参考价值的文章主要介绍了webassembly002 whisper.wasm wasm_eval 与js代码交互 js部分。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

html的js

        <script type="text/javascript" src="helpers.js"></script>
        <script type='text/javascript'>
#
# libmain
#
set(TARGET libmain)
add_executable(${TARGET}    emscripten.cpp)# 添加可执行目标 libmain,并包含 emscripten.cpp 文件
include(DefaultTargetOptions) # 引入默认的目标选项,https://blog.csdn.net/ResumeProject/article/details/135571952
target_link_libraries(${TARGET} PRIVATE  whisper) # 链接whisper库到  libmain 目标

unset(EXTRA_FLAGS)# 清除 EXTRA_FLAGS 变量

# 如果启用了 WHISPER_WASM_SINGLE_FILE 选项,设置 EXTRA_FLAGS,并进行一些额外的操作
if (WHISPER_WASM_SINGLE_FILE)
    set(EXTRA_FLAGS "-s SINGLE_FILE=1")
    message(STATUS "Embedding WASM inside main.js")

    # 在构建后,将 libmain.js 复制到 whisper.wasm 目录下的 main.js
    add_custom_command(
        TARGET ${TARGET} POST_BUILD
        COMMAND ${CMAKE_COMMAND} -E copy
        ${CMAKE_BINARY_DIR}/bin/libmain.js
        ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/whisper.wasm/main.js
    )
endif()

# 设置目标属性,包括链接标志、编译标志等
set_target_properties(${TARGET} PROPERTIES LINK_FLAGS " \
    --bind \
    -s USE_PTHREADS=1 \
    -s PTHREAD_POOL_SIZE_STRICT=0 \
    -s INITIAL_MEMORY=2000MB \
    -s TOTAL_MEMORY=2000MB \
    -s FORCE_FILESYSTEM=1 \
    -s EXPORTED_RUNTIME_METHODS=\"['print', 'printErr', 'ccall', 'cwrap']\" \
    ${EXTRA_FLAGS} \
")

# whisper.wasm 目标
set(TARGET whisper.wasm)

# 配置 index-tmpl.html 和 helpers.js,将其拷贝到指定目录
configure_file(${CMAKE_CURRENT_SOURCE_DIR}/index-tmpl.html  ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/${TARGET}/index.html @ONLY)
configure_file(${CMAKE_CURRENT_SOURCE_DIR}/../helpers.js    ${CMAKE_RUNTIME_OUTPUT_DIRECTORY}/${TARGET}/helpers.js @ONLY)

convert audio buffer to WAV # TODO

            // TODO: convert audio buffer to WAV
            function setAudio(audio) {
                //if (audio) {
                //    // convert to 16-bit PCM
                //    var blob = new Blob([audio], { type: 'audio/wav' });
                //    var url = URL.createObjectURL(blob);
                //    document.getElementById('source').src = url;
                //    document.getElementById('audio').hidden = false;
                //    document.getElementById('audio').loop = false;
                //    document.getElementById('audio').load();
                //} else {
                //    document.getElementById('audio').hidden = true;
                //}
            }

changeInput函数

  • 这个函数的作用是根据传入的参数 input 的不同值,控制页面上特定元素的显示和隐藏状态,从而根据用户的选择切换不同的输入方式
            function changeInput(input) {
                if (input == 'file') {
                    document.getElementById('input_file').style.display = 'block';
                    document.getElementById('input_mic' ).style.display = 'none';
                    document.getElementById('progress'  ).style.display = 'none';
                } else {
                    document.getElementById('input_file').style.display = 'none';
                    document.getElementById('input_mic' ).style.display = 'block';
                    document.getElementById('progress'  ).style.display = 'block';
                }
            }

Module

            var Module = {
                print: printTextarea,//  将 JavaScript 的 print 属性设置为 printTextarea 函数。这意味着当 C/C++ 代码中调用 Module.print 时,实际上是调用了 printTextarea 函数
                printErr: printTextarea,
                setStatus: function(text) {
                    printTextarea('js: ' + text);
                },
                monitorRunDependencies: function(left) {
                }
            };

            // web audio context
            var context = null;

            // audio data
            var audio = null;

            // the whisper instance
            var instance = null;
            var model_whisper = '';

            // helper function
            function convertTypedArray(src, type) {
                var buffer = new ArrayBuffer(src.byteLength);
                var baseView = new src.constructor(buffer).set(src);
                return new type(buffer);
            }

load model 加载模型文件

            //
            // load model
            //

            let dbVersion = 1
            let dbName    = 'whisper.ggerganov.com';
            let indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB
  • loadF函数 使用FileReader()对象加载本地文件
    webassembly002 whisper.wasm wasm_eval 与js代码交互 js部分,硬件和移动端,javascript,whisper,wasm
            function storeFS(fname, buf) {
                // write to WASM file using FS_createDataFile
                // if the file exists, delete it
                try {
                    Module.FS_unlink(fname);
                } catch (e) {
                    // ignore
                }

                Module.FS_createDataFile("/", fname, buf, true, true);
                //model_whisper = fname;

                document.getElementById('model-whisper-status').innerHTML = 'loaded "' + model_whisper + '"!';
                printTextarea('storeFS: stored model: ' + fname + ' size: ' + buf.length);
                document.getElementById('model').innerHTML = 'Model fetched: ' + model_whisper;
            }
            
			// <input type="file" id="whisper-file" name="file" onchange="loadFile(event, 'whisper.bin')">
            function loadFile(event, fname) {
                var file = event.target.files[0] || null;
                if (file == null) {
                    return;
                }

                printTextarea("loadFile: loading model: " + file.name + ", size: " + file.size + " bytes");
                printTextarea('loadFile: please wait ...');

				var reader = new FileReader();// 创建一个新的 FileReader 对象
				// 设置 FileReader 对象的 onload 回调函数,在文件读取完成时触发
				reader.onload = function(event) {
				    // 从 FileReader 中获取读取到的文件内容,存储在 Uint8Array 中
				    var buf = new Uint8Array(reader.result);
				    // 调用 storeFS 函数,将文件名 fname 和读取到的二进制数据 buf 传递给该函数
				    storeFS(fname, buf);
				}
				reader.readAsArrayBuffer(file);// 调用 readAsArrayBuffer 方法,以 ArrayBuffer 格式异步读取指定的文件 file


				// 所有按钮不可见
                document.getElementById('fetch-whisper-tiny-en' ).style.display = 'none';                document.getElementById('fetch-whisper-base-en' ).style.display = 'none';                document.getElementById('fetch-whisper-small-en').style.display = 'none';                document.getElementById('fetch-whisper-tiny'    ).style.display = 'none';                document.getElementById('fetch-whisper-base'    ).style.display = 'none';                document.getElementById('fetch-whisper-small'   ).style.display = 'none';                document.getElementById('fetch-whisper-tiny-en-q5_1'  ).style.display = 'none';                document.getElementById('fetch-whisper-tiny-q5_1'     ).style.display = 'none';                document.getElementById('fetch-whisper-base-en-q5_1'  ).style.display = 'none';                document.getElementById('fetch-whisper-base-q5_1'     ).style.display = 'none';                document.getElementById('fetch-whisper-small-en-q5_1' ).style.display = 'none';                document.getElementById('fetch-whisper-small-q5_1'    ).style.display = 'none';                document.getElementById('fetch-whisper-medium-en-q5_0').style.display = 'none';                document.getElementById('fetch-whisper-medium-q5_0'   ).style.display = 'none';                document.getElementById('fetch-whisper-large-q5_0'    ).style.display = 'none';
                document.getElementById('whisper-file'          ).style.display = 'none';
                // 设置一个显示标签
                document.getElementById('model-whisper-status'  ).innerHTML = 'loaded model: ' + file.name;
            }
  • loadWhisper函数
    webassembly002 whisper.wasm wasm_eval 与js代码交互 js部分,硬件和移动端,javascript,whisper,wasm
  • 会调用loadRemote(定义在helper.js)函数
loadRemote: storage quota: 77309408870 bytes
loadRemote: storage usage: 77707010 bytes
loadRemote: "https://whisper.ggerganov.com/ggml-model-whisper-tiny.en.bin" is already in the IndexedDB
js: loading audio: 1424079488-1-16.aac, size: 7373610 bytes
  • 加载的模型会存储到IndexDB中
    webassembly002 whisper.wasm wasm_eval 与js代码交互 js部分,硬件和移动端,javascript,whisper,wasm
			//<button id="fetch-whisper-tiny-en"  onclick="loadWhisper('tiny.en')">tiny.en (75 MB)</button>
            function loadWhisper(model) {
                let urls = {
                    'tiny.en':  'https://whisper.ggerganov.com/ggml-model-whisper-tiny.en.bin',                    'tiny':     'https://whisper.ggerganov.com/ggml-model-whisper-tiny.bin',                    'base.en':  'https://whisper.ggerganov.com/ggml-model-whisper-base.en.bin',                    'base':     'https://whisper.ggerganov.com/ggml-model-whisper-base.bin',                    'small.en': 'https://whisper.ggerganov.com/ggml-model-whisper-small.en.bin',                    'small':    'https://whisper.ggerganov.com/ggml-model-whisper-small.bin',
                    'tiny-en-q5_1':  'https://whisper.ggerganov.com/ggml-model-whisper-tiny.en-q5_1.bin',                    'tiny-q5_1':     'https://whisper.ggerganov.com/ggml-model-whisper-tiny-q5_1.bin',                    'base-en-q5_1':  'https://whisper.ggerganov.com/ggml-model-whisper-base.en-q5_1.bin',                    'base-q5_1':     'https://whisper.ggerganov.com/ggml-model-whisper-base-q5_1.bin',                    'small-en-q5_1': 'https://whisper.ggerganov.com/ggml-model-whisper-small.en-q5_1.bin',                    'small-q5_1':    'https://whisper.ggerganov.com/ggml-model-whisper-small-q5_1.bin',                    'medium-en-q5_0':'https://whisper.ggerganov.com/ggml-model-whisper-medium.en-q5_0.bin',                    'medium-q5_0':   'https://whisper.ggerganov.com/ggml-model-whisper-medium-q5_0.bin',                    'large-q5_0':    'https://whisper.ggerganov.com/ggml-model-whisper-large-q5_0.bin',
                };

                let sizes = {
                    'tiny.en':  75,                    'tiny':     75,                    'base.en':  142,                    'base':     142,                    'small.en': 466,                    'small':    466,
                    'tiny-en-q5_1':   31,                    'tiny-q5_1':      31,                    'base-en-q5_1':   57,                    'base-q5_1':      57,                    'small-en-q5_1':  182,                    'small-q5_1':     182,                    'medium-en-q5_0': 515,                    'medium-q5_0':    515,                    'large-q5_0':     1030,
                };

                let url     = urls[model];
                let dst     = 'whisper.bin';
                let size_mb = sizes[model];

                model_whisper = model;
                // 前端显示设置
                document.getElementById('fetch-whisper-tiny-en' ).style.display = 'none';
                document.getElementById('fetch-whisper-base-en' ).style.display = 'none';
                document.getElementById('fetch-whisper-small-en').style.display = 'none';
                document.getElementById('fetch-whisper-tiny'    ).style.display = 'none';
                document.getElementById('fetch-whisper-base'    ).style.display = 'none';
                document.getElementById('fetch-whisper-small'   ).style.display = 'none';
                document.getElementById('fetch-whisper-tiny-en-q5_1'  ).style.display = 'none';
                document.getElementById('fetch-whisper-tiny-q5_1'     ).style.display = 'none';
                document.getElementById('fetch-whisper-base-en-q5_1'  ).style.display = 'none';
                document.getElementById('fetch-whisper-base-q5_1'     ).style.display = 'none';
                document.getElementById('fetch-whisper-small-en-q5_1' ).style.display = 'none';
                document.getElementById('fetch-whisper-small-q5_1'    ).style.display = 'none';
                document.getElementById('fetch-whisper-medium-en-q5_0').style.display = 'none';
                document.getElementById('fetch-whisper-medium-q5_0'   ).style.display = 'none';
                document.getElementById('fetch-whisper-large-q5_0'    ).style.display = 'none';
                document.getElementById('whisper-file'        ).style.display = 'none';
                document.getElementById('model-whisper-status').innerHTML = 'loading model: ' + model;

                cbProgress = function(p) {
                    let el = document.getElementById('fetch-whisper-progress');
                    el.innerHTML = Math.round(100*p) + '%';
                };

                cbCancel = function() {
                    var el;

                    el = document.getElementById('fetch-whisper-tiny-en' ); if (el) el.style.display = 'inline-block';
                    el = document.getElementById('fetch-whisper-base-en' ); if (el) el.style.display = 'inline-block';
                    el = document.getElementById('fetch-whisper-small-en'); if (el) el.style.display = 'inline-block';
                    el = document.getElementById('fetch-whisper-tiny'    ); if (el) el.style.display = 'inline-block';
                    el = document.getElementById('fetch-whisper-base'    ); if (el) el.style.display = 'inline-block';
                    el = document.getElementById('fetch-whisper-small'   ); if (el) el.style.display = 'inline-block';

                    el = document.getElementById('fetch-whisper-tiny-en-q5_1'  ); if (el) el.style.display = 'inline-block';
                    el = document.getElementById('fetch-whisper-tiny-q5_1'     ); if (el) el.style.display = 'inline-block';
                    el = document.getElementById('fetch-whisper-base-en-q5_1'  ); if (el) el.style.display = 'inline-block';
                    el = document.getElementById('fetch-whisper-base-q5_1'     ); if (el) el.style.display = 'inline-block';
                    el = document.getElementById('fetch-whisper-small-en-q5_1' ); if (el) el.style.display = 'inline-block';
                    el = document.getElementById('fetch-whisper-small-q5_1'    ); if (el) el.style.display = 'inline-block';
                    el = document.getElementById('fetch-whisper-medium-en-q5_0'); if (el) el.style.display = 'inline-block';
                    el = document.getElementById('fetch-whisper-medium-q5_0'   ); if (el) el.style.display = 'inline-block';
                    el = document.getElementById('fetch-whisper-large-q5_0'    ); if (el) el.style.display = 'inline-block';

                    el = document.getElementById('whisper-file'        ); if (el) el.style.display = 'inline-block';
                    el = document.getElementById('model-whisper-status'); if (el) el.innerHTML = '';
                };

                loadRemote(url, dst, size_mb, cbProgress, storeFS, cbCancel, printTextarea);
            }

audio file 加载音频文件

webassembly002 whisper.wasm wasm_eval 与js代码交互 js部分,硬件和移动端,javascript,whisper,wasm

  • AudioContext
            //
            // audio file
            //

            // 定义常量,表示最大的音频时长为 30 分钟,最大录音时长为 2 分钟,采样率为 16000 Hz
const kMaxAudio_s = 30 * 60;
const kMaxRecording_s = 2 * 60;
const kSampleRate = 16000;

// 兼容性处理:获取浏览器支持的 AudioContext 和 OfflineAudioContext
window.AudioContext = window.AudioContext || window.webkitAudioContext;
window.OfflineAudioContext = window.OfflineAudioContext || window.webkitOfflineAudioContext;

// <input type="file" id="file" name="file" onchange="loadAudio(event)">
// 当选择文件后触发的函数,用于加载音频文件
function loadAudio(event) {
    // 如果上下文对象不存在,创建一个 AudioContext 对象
    if (!context) {
        context = new AudioContext({
            sampleRate: kSampleRate,
            channelCount: 1,
            echoCancellation: false,
            autoGainControl:  true,
            noiseSuppression: true,
        });
    }

    // 获取选择的文件
    var file = event.target.files[0] || null;
    if (file == null) {
        return;
    }

    // 输出加载音频文件的信息
    printTextarea('js: loading audio: ' + file.name + ', size: ' + file.size + ' bytes');
    printTextarea('js: please wait ...');

    // 创建 FileReader 对象,用于读取文件内容
    var reader = new FileReader();
    reader.onload = function(event) {
        // 读取到的文件内容存储在 Uint8Array 中
        var buf = new Uint8Array(reader.result);

        // 解码音频数据
        context.decodeAudioData(buf.buffer, function(audioBuffer) {
            // 创建 OfflineAudioContext 对象,用于渲染音频
            var offlineContext = new OfflineAudioContext(audioBuffer.numberOfChannels, audioBuffer.length, audioBuffer.sampleRate);
            var source = offlineContext.createBufferSource();
            source.buffer = audioBuffer;
            source.connect(offlineContext.destination);
            source.start(0);

            // 开始渲染音频,处理渲染后的数据
            offlineContext.startRendering().then(function(renderedBuffer) {
                // 获取渲染后的音频数据
                audio = renderedBuffer.getChannelData(0);

                // 输出加载音频成功的信息
                printTextarea('js: audio loaded, size: ' + audio.length);

                // 如果音频长度超过 30 分钟,截取前 30 分钟
                if (audio.length > kMaxAudio_s * kSampleRate) {
                    audio = audio.slice(0, kMaxAudio_s * kSampleRate);
                    printTextarea('js: truncated audio to first ' + kMaxAudio_s + ' seconds');
                }

                // 设置音频数据
                setAudio(audio);
            });
        }, function(e) {
            // 解码错误时输出错误信息
            printTextarea('js: error decoding audio: ' + e);
            audio = null;
            setAudio(audio);
        });
    }
    // 以 ArrayBuffer 格式读取文件
    reader.readAsArrayBuffer(file);
}

microphone

            //
            // microphone
            //

            var mediaRecorder = null;
            var doRecording = false;
            var startTime = 0;

            function stopRecording() {
                doRecording = false;
            }

            // record up to kMaxRecording_s seconds of audio from the microphone
            // check if doRecording is false every 1000 ms and stop recording if so
            // update progress information
            function startRecording() {
                if (!context) {
                    context = new AudioContext({
                        sampleRate: kSampleRate,
                        channelCount: 1,
                        echoCancellation: false,
                        autoGainControl:  true,
                        noiseSuppression: true,
                    });
                }

                document.getElementById('start').disabled = true;
                document.getElementById('stop').disabled = false;

                document.getElementById('progress-bar').style.width = '0%';
                document.getElementById('progress-text').innerHTML = '0%';

                doRecording = true;
                startTime = Date.now();

                var chunks = [];
                var stream = null;

                navigator.mediaDevices.getUserMedia({audio: true, video: false})
                    .then(function(s) {
                        stream = s;
                        mediaRecorder = new MediaRecorder(stream);
                        mediaRecorder.ondataavailable = function(e) {
                            chunks.push(e.data);
                        };
                        mediaRecorder.onstop = function(e) {
                            var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
                            chunks = [];

                            document.getElementById('start').disabled = false;
                            document.getElementById('stop').disabled = true;

                            var reader = new FileReader();
                            reader.onload = function(event) {
                                var buf = new Uint8Array(reader.result);

                                context.decodeAudioData(buf.buffer, function(audioBuffer) {
                                    var offlineContext = new OfflineAudioContext(audioBuffer.numberOfChannels, audioBuffer.length, audioBuffer.sampleRate);
                                    var source = offlineContext.createBufferSource();
                                    source.buffer = audioBuffer;
                                    source.connect(offlineContext.destination);
                                    source.start(0);

                                    offlineContext.startRendering().then(function(renderedBuffer) {
                                        audio = renderedBuffer.getChannelData(0);
                                        printTextarea('js: audio recorded, size: ' + audio.length);

                                        // truncate to first 30 seconds
                                        if (audio.length > kMaxRecording_s*kSampleRate) {
                                            audio = audio.slice(0, kMaxRecording_s*kSampleRate);
                                            printTextarea('js: truncated audio to first ' + kMaxRecording_s + ' seconds');
                                        }
                                        setAudio(audio);
                                    });
                                }, function(e) {
                                    printTextarea('js: error decoding audio: ' + e);
                                    audio = null;
                                    setAudio(audio);
                                });
                            }

                            reader.readAsArrayBuffer(blob);
                        };
                        mediaRecorder.start();
                    })
                    .catch(function(err) {
                        printTextarea('js: error getting audio stream: ' + err);
                    });

                var interval = setInterval(function() {
                    if (!doRecording) {
                        clearInterval(interval);
                        mediaRecorder.stop();
                        stream.getTracks().forEach(function(track) {
                            track.stop();
                        });
                    }

                    document.getElementById('progress-bar').style.width = (100*(Date.now() - startTime)/1000/kMaxRecording_s) + '%';
                    document.getElementById('progress-text').innerHTML = (100*(Date.now() - startTime)/1000/kMaxRecording_s).toFixed(0) + '%';
                }, 1000);

                printTextarea('js: recording ...');

                setTimeout(function() {
                    if (doRecording) {
                        printTextarea('js: recording stopped after ' + kMaxRecording_s + ' seconds');
                        stopRecording();
                    }
                }, kMaxRecording_s*1000);
            }

transcribe

  • 主要调用Module.full_default(instance, audio, document.getElementById('language').value, nthreads, translate);函数。
  • setTimeout在当前执行堆栈清空后100 毫秒执行,以确保当前正在执行的函数及其相关的代码已经执行完毕,使得代码在后台运行而不会阻塞主线程的执行。
            //
            // transcribe
            //

            var nthreads = 8;

            function changeThreads(value) {
                nthreads = value;
                document.getElementById('threads-value').innerHTML = nthreads;
            }
            
            //<button οnclick="onProcess(false);">Transcribe</button>      <button οnclick="onProcess(true);">Translate</button>
            function onProcess(translate) {
                if (!instance) {
                    instance = Module.init('whisper.bin');

                    if (instance) {
                        printTextarea("js: whisper initialized, instance: " + instance);
                        document.getElementById('model').innerHTML = 'Model loaded: ' + model_whisper;
                    }
                }

                if (!instance) {
                    printTextarea("js: failed to initialize whisper");
                    return;
                }

                if (!audio) {
                    printTextarea("js: no audio data");
                    return;
                }

                if (instance) {
                    printTextarea('');
                    printTextarea('js: processing - this might take a while ...');
                    printTextarea('');

                    setTimeout(function() {
                        var ret = Module.full_default(instance, audio, document.getElementById('language').value, nthreads, translate);
                        console.log('js: full_default returned: ' + ret);
                        if (ret) {
                            printTextarea("js: whisper returned: " + ret);
                        }
                    }, 100);
                }
            }
        </script>
        <script type="text/javascript" src="main.js"></script>
    </body>
</html>

helpers.js

  • helpers.js并非是生成的,在项目的https://github.com/ggerganov/whisper.cpp/blob/master/examples/helpers.js
// Common Javascript functions used by the examples

function convertTypedArray(src, type) {
    var buffer = new ArrayBuffer(src.byteLength);
    var baseView = new src.constructor(buffer).set(src);
    return new type(buffer);
}

var printTextarea = (function() {
    var element = document.getElementById('output');
    if (element) element.value = ''; // clear browser cache
    return function(text) {
        if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
        console.log(text);
        if (element) {
            element.value += text + "\n";
            element.scrollTop = element.scrollHeight; // focus on bottom
        }
    };
})();

async function clearCache() {
    if (confirm('Are you sure you want to clear the cache?\nAll the models will be downloaded again.')) {
        indexedDB.deleteDatabase(dbName);
        location.reload();
    }
}

// fetch a remote file from remote URL using the Fetch API
async function fetchRemote(url, cbProgress, cbPrint) {
    cbPrint('fetchRemote: downloading with fetch()...');

    const response = await fetch(
        url,
        {
            method: 'GET',
            headers: {
                'Content-Type': 'application/octet-stream',
            },
        }
    );

    if (!response.ok) {
        cbPrint('fetchRemote: failed to fetch ' + url);
        return;
    }

    const contentLength = response.headers.get('content-length');
    const total = parseInt(contentLength, 10);
    const reader = response.body.getReader();

    var chunks = [];
    var receivedLength = 0;
    var progressLast = -1;

    while (true) {
        const { done, value } = await reader.read();

        if (done) {
            break;
        }

        chunks.push(value);
        receivedLength += value.length;

        if (contentLength) {
            cbProgress(receivedLength/total);

            var progressCur = Math.round((receivedLength / total) * 10);
            if (progressCur != progressLast) {
                cbPrint('fetchRemote: fetching ' + 10*progressCur + '% ...');
                progressLast = progressCur;
            }
        }
    }

    var position = 0;
    var chunksAll = new Uint8Array(receivedLength);

    for (var chunk of chunks) {
        chunksAll.set(chunk, position);
        position += chunk.length;
    }

    return chunksAll;
}

// load remote data
// - check if the data is already in the IndexedDB
// - if not, fetch it from the remote URL and store it in the IndexedDB
function loadRemote(url, dst, size_mb, cbProgress, cbReady, cbCancel, cbPrint) {
    if (!navigator.storage || !navigator.storage.estimate) {
        cbPrint('loadRemote: navigator.storage.estimate() is not supported');
    } else {
        // query the storage quota and print it
        navigator.storage.estimate().then(function (estimate) {
            cbPrint('loadRemote: storage quota: ' + estimate.quota + ' bytes');
            cbPrint('loadRemote: storage usage: ' + estimate.usage + ' bytes');
        });
    }

    // check if the data is already in the IndexedDB
    var rq = indexedDB.open(dbName, dbVersion);

    rq.onupgradeneeded = function (event) {
        var db = event.target.result;
        if (db.version == 1) {
            var os = db.createObjectStore('models', { autoIncrement: false });
            cbPrint('loadRemote: created IndexedDB ' + db.name + ' version ' + db.version);
        } else {
            // clear the database
            var os = event.currentTarget.transaction.objectStore('models');
            os.clear();
            cbPrint('loadRemote: cleared IndexedDB ' + db.name + ' version ' + db.version);
        }
    };

    rq.onsuccess = function (event) {
        var db = event.target.result;
        var tx = db.transaction(['models'], 'readonly');
        var os = tx.objectStore('models');
        var rq = os.get(url);

        rq.onsuccess = function (event) {
            if (rq.result) {
                cbPrint('loadRemote: "' + url + '" is already in the IndexedDB');
                cbReady(dst, rq.result);
            } else {
                // data is not in the IndexedDB
                cbPrint('loadRemote: "' + url + '" is not in the IndexedDB');

                // alert and ask the user to confirm
                if (!confirm(
                    'You are about to download ' + size_mb + ' MB of data.\n' +
                    'The model data will be cached in the browser for future use.\n\n' +
                    'Press OK to continue.')) {
                    cbCancel();
                    return;
                }

                fetchRemote(url, cbProgress, cbPrint).then(function (data) {
                    if (data) {
                        // store the data in the IndexedDB
                        var rq = indexedDB.open(dbName, dbVersion);
                        rq.onsuccess = function (event) {
                            var db = event.target.result;
                            var tx = db.transaction(['models'], 'readwrite');
                            var os = tx.objectStore('models');

                            var rq = null;
                            try {
                                var rq = os.put(data, url);
                            } catch (e) {
                                cbPrint('loadRemote: failed to store "' + url + '" in the IndexedDB: \n' + e);
                                cbCancel();
                                return;
                            }

                            rq.onsuccess = function (event) {
                                cbPrint('loadRemote: "' + url + '" stored in the IndexedDB');
                                cbReady(dst, data);
                            };

                            rq.onerror = function (event) {
                                cbPrint('loadRemote: failed to store "' + url + '" in the IndexedDB');
                                cbCancel();
                            };
                        };
                    }
                });
            }
        };

        rq.onerror = function (event) {
            cbPrint('loadRemote: failed to get data from the IndexedDB');
            cbCancel();
        };
    };

    rq.onerror = function (event) {
        cbPrint('loadRemote: failed to open IndexedDB');
        cbCancel();
    };

    rq.onblocked = function (event) {
        cbPrint('loadRemote: failed to open IndexedDB: blocked');
        cbCancel();
    };

    rq.onabort = function (event) {
        cbPrint('loadRemote: failed to open IndexedDB: abort');
        cbCancel();
    };
}

CG

webassembly002 whisper.wasm wasm_eval 与js代码交互 js部分,硬件和移动端,javascript,whisper,wasm

  • 在cmake中开启 ASSERTIONS
set(TARGET_NAME my_target)
add_executable(${TARGET_NAME} main.cpp)

# 添加 Emscripten 编译选项
set(EMSCRIPTEN_FLAGS "-sASSERTIONS=1")

# 设置目标属性
set_target_properties(${TARGET_NAME} PROPERTIES
    SUFFIX ".html"  # 输出文件的后缀为 .html
    COMPILE_FLAGS "${EMSCRIPTEN_FLAGS}"  # 添加 Emscripten 编译选项
)
  • 在谷歌浏览器中,尝试扩大内存限制:

  • "C:Program Files (x86)GoogleChromeApplicationchrome.exe" --max_old_space_size=4096

    chrome.exe --max_old_space_size=4096 #  这里的 `4096` 是以兆字节为单位的内存大小。
    
    chrome.exe --js-flags="--max-old-space-size=4096"
    
    chrome.exe --disable-gpu  # 在一些情况下,禁用 GPU 加速可能会释放一些系统内存
    
  • 探讨 Node 中的内存堆分配,并将本地硬件推向极限文章来源地址https://www.toymoban.com/news/detail-851700.html

到了这里,关于webassembly002 whisper.wasm wasm_eval 与js代码交互 js部分的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • webassembly003 whisper.cpp的项目结构CMakeLists.txt

    注:带星号的为非重要部分 POSIX:可移植操作系统接口(Portable Operating System Interface of UNIX,缩写为 POSIX ) Core ML 是一个 Apple 框架,允许开发人员轻松集成 机器学习 (ML) 模型到应用中。Core ML 可在 iOS、iPadOS、 watchOS、macOS 和 Apple tvOS。Core ML 引入了公共文件格式 (.mlmodel)

    2024年01月18日
    浏览(52)
  • webassembly003 whisper.cpp的python绑定实现+Cython+Setuptools

    官方未提供python的封装绑定,直接调用执行文件 https://github.com/stlukey/whispercpp.py提供了源码和Cpython结合的绑定 https://github.com/zhujun1980/whispercpp_py提供了ctype方式的绑定,需要先make libwhisper.so Pybind11 bindings for Whisper.cpp,有更好的类型安全性和性能 setuptools 是 Python 中用于构建和分

    2024年01月25日
    浏览(55)
  • 某侠网js逆向wasm解析

    本次目标地址如下,使用base64解密获得 aHR0cHM6Ly93d3cud2FpbWFveGlhLm5ldC9sb2dpbg== 打开网址,本次的目标是登录接口,如下图 本文主要讲解wasm的解析,所以对其他参数不做逆向处理,本次由wasm加密的参数只有sign一个,我们跟栈查看源代码 从这里发现,sign由sign函数通过传入其他5个

    2024年01月17日
    浏览(35)
  • Node.js 与 WebAssembly

    目录 1、简介 2、关键概念 3、生成WebAssembly模块 4、如何使用它 5、与操作系统交互 首先,让我们了解为什么WebAssembly是一个很棒的工具,并学会自己使用它。 WebAssembly是一种 类似汇编 的高性能语言,可以从各种语言编译,包括 C/C++ 、 Rust 和 AssemblyScript 。目前,Chrome、Firef

    2024年02月05日
    浏览(46)
  • JS逆向之猿人学爬虫第20题-wasm

    第20题被置顶到了第1页,题目难度 写的是中等 算法很简单,就一个标准的md5算法,主要是盐值不确定, 而盐值就在wasm里面,可以说难点就在于wasm分析 加密的就是sign,sign长度是32位,这个盲猜可能就是个md5 直接跟栈的request发包位置 进去之后可以清晰的看到sign生成位置

    2024年02月15日
    浏览(60)
  • ❤ js函数之eval()

    ❤ 1、认识 eval() 函数会将传入的字符串当做 JavaScript 代码进行执行 谨慎使用!或者永远不要使用 eval! ❤ 2、了解 谨慎使用!或者永远不要使用 eval! eval(string) // 参数 string 表示 JavaScript 表达式、语句或一系列语句的字符串。表达式可以包含变量与已存在对象的属性。 输出

    2024年02月02日
    浏览(33)
  • JS逆向分析某枝网的HMAC加密、wasm模块加密

    这是我2022年学做JS逆向成功的例子,URL:(脱敏处理)aHR0cHM6Ly93d3cuZ2R0di5jbi9hdWRpb0NoYW5uZWxEZXRhaWwvOTE= 逆向分析: 1、每次XHR的GET请求携带的headers包括: 2、该网站的JS文件采用webpack形式。找出关键的加密逻辑: 3、初步分析: (1)X-ITOUCHTV-Ca-Timestamp很明显是时间戳。 (2)X-ITO

    2024年02月08日
    浏览(45)
  • JS逆向实战16——猿人学第20题 新年挑战-wasm进阶

    本文章中所有内容仅供学习交流,抓包内容、敏感网址、数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除! https://match.yuanrenxue.cn/match/20 首先进去网站,我们查看下接口 发现有两个值是改变的

    2024年02月08日
    浏览(69)
  • webassembly009 transformers.js 网页端侧推理

            之前试用过两个网页端的神经网络框架,一个是 Tensorflow PlayGround,它相当与实现了一个网页端的简单的训练框架,有关节点的数据结构可看这篇。另一个是onnx的网页端(nodejs绿色免安装+try onnx on web(chrome)),需要自己转换onnx模型用于推理。这里的 transformers.js 相当

    2024年02月11日
    浏览(35)
  • (WebAssembly)JS/微信小程序,调用C/C++

    1、将.c文件编译成WebAssembly,具体步骤参考:编译 C/C++ 为 WebAssembly - WebAssembly | MDN,这个比较简单,文章中比较详细的步骤 2、编译后生成3个文件:一个.js,一个.wasm,一个.html,其中.js、.wasm不用做修改,.html文件中做了2处改动 新增button,用于触发事件 调用c函数代码,其中

    2024年02月10日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包