SvelteKit根路由加载onnxruntime模型时如何显示加载UI

为什么你的现有代码无效？ #

navigating store只在客户端内部导航（比如点击页面内链接跳转）时生效，首次加载页面时这个状态不会触发，所以layout里的加载提示根本不会显示。另外，+page.js里的load函数是页面渲染前执行的同步阻塞逻辑，导致整个页面必须等模型加载完才会渲染，自然看不到基础UI。

解决方案：把模型加载移到客户端组件异步执行 #

不要在load函数里加载模型，而是在页面组件的onMount钩子中异步加载，这样页面会先渲染基础UI，再后台加载模型。

步骤1：修改+page.js（可选，若无需SSR）

如果你的页面不需要服务器端渲染，先禁用SSR避免不必要的阻塞：

export const ssr = false;

export async function load() {
  // 这里返回页面需要的静态数据即可，不要加载模型
  return {};
}

步骤2：在+page.svelte中处理加载状态

<script>
  import { onMount } from 'svelte';
  
  let isLoading = true;
  let model;

  onMount(async () => {
    // 异步导入onnxruntime并加载模型
    const ort = await import('onnxruntime-web');
    model = await ort.InferenceSession.create('/path/to/your/model.onnx');
    
    // 模型加载完成后更新状态
    isLoading = false;
  });
</script>

{#if isLoading}
  <!-- 加载中的基础UI -->
  <div style="text-align: center; padding: 2rem;">
    <h1>Loading Model...</h1>
    <p>这可能需要10秒左右，请稍候</p>
  </div>
{:else}
  <!-- 模型加载完成后的页面内容 -->
  <div>
    <!-- 你的页面组件内容 -->
  </div>
{/if}

进阶：如果需要在load中获取模型路径 #

如果模型路径需要从后端接口获取，可以在load里请求路径，再在组件中加载模型：

+page.js：

export async function load({ fetch }) {
  // 从后端获取模型路径
  const res = await fetch('/api/get-model-path');
  const modelPath = await res.text();
  
  return { modelPath };
}

+page.svelte：

<script>
  import { onMount } from 'svelte';
  export let data;
  
  let isLoading = true;
  let model;

  onMount(async () => {
    const ort = await import('onnxruntime-web');
    model = await ort.InferenceSession.create(data.modelPath);
    isLoading = false;
  });
</script>

{#if isLoading}
  <h1>Loading Model...</h1>
{:else}
  <!-- 页面内容 -->
{/if}

内容的提问来源于stack exchange，提问作者Simon Warchol