From 9882f293afefe795f3a13efee1a0a833ea608dc4 Mon Sep 17 00:00:00 2001 From: Wang Ning Date: Wed, 19 Feb 2025 13:30:41 +0800 Subject: [PATCH] update UI of deepseek-r1 sample (#2) * update UI of deepseek-r1 sample * UI tunning for deepseek r1 sample --- samples/deepseek-r1-webgpu/src/App.jsx | 252 +++++++++-------------- samples/deepseek-r1-webgpu/src/worker.js | 3 +- 2 files changed, 97 insertions(+), 158 deletions(-) diff --git a/samples/deepseek-r1-webgpu/src/App.jsx b/samples/deepseek-r1-webgpu/src/App.jsx index c4c3eaf..29bd3c7 100644 --- a/samples/deepseek-r1-webgpu/src/App.jsx +++ b/samples/deepseek-r1-webgpu/src/App.jsx @@ -6,7 +6,6 @@ import StopIcon from "./components/icons/StopIcon"; import Progress from "./components/Progress"; import { - initModelsPanelHandler, getElementId4Resource, removeHiddenClass, formatBytes @@ -84,56 +83,6 @@ function App() { setInput(""); } - function constructLoadModelsPanel(modelName, targetElement) { - const resourcesPanelHTML = ALL_NEEDED_MODEL_RESOURCES[modelName].resources - .map((resource) => { - const elementId = getElementId4Resource(resource); - - const text = - resource.indexOf("/") > 0 ? resource.split("/")[1] : resource; - - const url = - "https://modelscope.cn/models/onnx-community/DeepSeek-R1-Distill-Qwen-1.5B-ONNX/files"; - - return `
- ${text} - - - -
`; - }) - .join(""); - - const tag = `模型文件`; - - targetElement.innerHTML = tag + resourcesPanelHTML; - } - function changeClass4StatusBar(status, targetElement) { const unloadClass = "bg-neutral-400"; const cachedClass = "bg-sky-500"; @@ -293,31 +242,28 @@ function App() { function bindEventListener() { const PROGRESS_BAR = document.getElementById(`progressBar`); + const resource = "onnx/model_q4f16.onnx"; + const inputElement = document.getElementById(`uploadModel`); + if (inputElement) { + inputElement.addEventListener("change", async function (event) { + const files = event.target.files; + if (!files.length) { + return; + } - ALL_NEEDED_MODEL_RESOURCES[MODEL_NAME].resources.map((resource) => { - const elementId = getElementId4Resource(resource); - - const inputElement = document.getElementById(`uploadInput4${elementId}`); - if (inputElement) { - inputElement.addEventListener("change", async function (event) { - const files = event.target.files; - if (!files.length) { - return; - } - - const cache = await caches.open(DEFAULT_CACHE_STORAGE_NAME); + const cache = await caches.open(DEFAULT_CACHE_STORAGE_NAME); - for (const file of files) { - const reader = new FileReader(); + for (const file of files) { + const reader = new FileReader(); - reader.onprogress = function (progressEvent) { - if (progressEvent.lengthComputable) { - const loaded = progressEvent.loaded; - const total = progressEvent.total; - // show the progress bar - removeHiddenClass(PROGRESS_BAR); + reader.onprogress = function (progressEvent) { + if (progressEvent.lengthComputable) { + const loaded = progressEvent.loaded; + const total = progressEvent.total; + // show the progress bar + removeHiddenClass(PROGRESS_BAR); - PROGRESS_BAR.innerHTML = ` + PROGRESS_BAR.innerHTML = `
0% @@ -328,81 +274,70 @@ function App() { >
`; - const statusText = document.getElementById(`StatusText`); - // show the progress of downloading - const progressEle = document.getElementById(`ProgressBar`); - // show the progress value - const progressValEle = document.getElementById(`ProgressVal`); + const statusText = document.getElementById(`StatusText`); + // show the progress of downloading + const progressEle = document.getElementById(`ProgressBar`); + // show the progress value + const progressValEle = document.getElementById(`ProgressVal`); - let progress = (loaded / total) * 100; - statusText.textContent = `模型文件上传中 ...`; + let progress = (loaded / total) * 100; + statusText.textContent = `模型文件上传中 ...`; - if (!progressEle.style.height) { - progressEle.style.height = "30px"; - } - progressEle.style.width = `${progress}%`; - progressValEle.textContent = `${formatBytes( - loaded - )}/${formatBytes(total)}`; + if (!progressEle.style.height) { + progressEle.style.height = "30px"; } - }; - - reader.onload = async function (fileEvent) { - const arrayBuffer = fileEvent.target.result; - const blob = new Blob([arrayBuffer]); - const fileExt = - file.name.split(".").length > 0 ? file.name.split(".")[1] : ""; - const contentType = - fileExt === "json" - ? "text/plain; charset=utf-8" - : "binary/octet-stream"; - const response = new Response(blob, { - headers: { - "Content-Length": blob.size.toString(), - "Accept-Ranges": "bytes", - "Content-Type": contentType - } - }); - // construct the url for this cached resource. - const cacheKey = LOCAL_REQUEST_PREFIX + resource; - const cacheResponse = await cache.match(cacheKey); - if (!cacheResponse) { - cache - .put(cacheKey, response) - .then(() => { - console.log(`cache ${resource} successfully.`); - scanCacheStorage(); - }) - .catch((error) => { - console.error(`cache ${resource} failed:`, error); - }); + progressEle.style.width = `${progress}%`; + progressValEle.textContent = `${formatBytes( + loaded + )}/${formatBytes(total)}`; + } + }; + + reader.onload = async function (fileEvent) { + const arrayBuffer = fileEvent.target.result; + const blob = new Blob([arrayBuffer]); + const fileExt = + file.name.split(".").length > 0 ? file.name.split(".")[1] : ""; + const contentType = + fileExt === "json" + ? "text/plain; charset=utf-8" + : "binary/octet-stream"; + const response = new Response(blob, { + headers: { + "Content-Length": blob.size.toString(), + "Accept-Ranges": "bytes", + "Content-Type": contentType } + }); + // construct the url for this cached resource. + const cacheKey = LOCAL_REQUEST_PREFIX + resource; + const cacheResponse = await cache.match(cacheKey); + if (!cacheResponse) { + cache + .put(cacheKey, response) + .then(() => { + console.log(`cache ${resource} successfully.`); + scanCacheStorage(); + }) + .catch((error) => { + console.error(`cache ${resource} failed:`, error); + }); + } - if (!PROGRESS_BAR.classList.contains("hidden")) { - PROGRESS_BAR.classList.add("hidden"); - } - }; + if (!PROGRESS_BAR.classList.contains("hidden")) { + PROGRESS_BAR.classList.add("hidden"); + } + }; - reader.readAsArrayBuffer(file); - } - }); - } - }); + reader.readAsArrayBuffer(file); + } + }); + } } useEffect(() => { - const LOAD_MODELS_LOCALLY_BUTTON = document.getElementById( - "loadModelLocallyBtn" - ); - const LOAD_MODELS_POPOVER = document.getElementById("modelPopover"); - const MODEL_PANEL_WRAPPER = document.getElementById("modelPanelWrapper"); - setupNavigBar("../.."); - constructLoadModelsPanel(MODEL_NAME, MODEL_PANEL_WRAPPER); - - initModelsPanelHandler(LOAD_MODELS_LOCALLY_BUTTON, LOAD_MODELS_POPOVER); - // bind event listener for loading models bindEventListener(); @@ -597,7 +532,7 @@ function App() {
- - model_q4f16.onnx + + + {" "} + model_q4f16.onnx + {" "} {status === null && dialogMessages.length === 0 && ( -
+


@@ -673,27 +617,23 @@ function App() { 开源项目改编而成。

-
+
-
-
-
{error && ( @@ -833,7 +773,7 @@ function App() { )}
-

+

免责声明：生成的内容可能是假的或是不准确的。

diff --git a/samples/deepseek-r1-webgpu/src/worker.js b/samples/deepseek-r1-webgpu/src/worker.js index 08e1542..3338508 100644 --- a/samples/deepseek-r1-webgpu/src/worker.js +++ b/samples/deepseek-r1-webgpu/src/worker.js @@ -142,9 +142,8 @@ async function load() { baseUrl = "/web-ai-showcase"; } - env.backends.onnx.wasm.wasmPaths = `${baseUrl}/models/frameworks/ort-web/ort-web@transformers_js_3_3_1/`; env.allowLocalModels = true; - env.allowRemoteModels = false; + env.allowRemoteModels = true; env.localModelPath = `${baseUrl}/models/`; // Load the pipeline and save it for future use.