加载模型时出错：语法错误：意外的标记'<', "<!DOCTYPE "... is not valid JSON

Question

我正在 React 上使用 ml5 和 p5 创建一个瑜伽人工智能训练器。

我创建了一个组件，它从本地 JSON 文件获取单个姿势作为道具。该组件还加载我在公共文件夹中添加的模型。该组件的目标是检测某个瑜伽姿势，并且该组件动态返回从网络摄像头检测到的姿势名称。

我测试了两个网络摄像头页面。我们将其称为第 1 页和第 2 页。 第 1 页是作品。网址是/练习。第 1 页指向网络摄像头 1。网络摄像头 1 可以工作。

第 2 页的网址是 /practice/poseId。第 2 页通向不同的网络摄像头组件，网络摄像头 2 与网络摄像头 1 具有完全相同的代码，只是它接受一个道具，并且该道具是与 id 匹配的特定姿势。

在第二页上，我收到此错误 加载模型时出错：SyntaxError：意外的标记 '<', "

它指向这个代码

        const modelInfo = {
          model: "model/model.json",
          metadata: "model/model_meta.json",
          weights: "model/model.weights.bin",
        };

        fetch(modelInfo.model)
          .then((response) => {
            if (!response.ok) {
              throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
          })
          .then((data) => {
            console.log("Model JSON:", data);
            brain.load(modelInfo, brainLoaded);
          })
          .catch((error) => {
            console.error("Error loading model:", error);
          });

我不明白为什么我的组件可以在 /practice url 上工作，但是当我添加poseId (/practice/:poseID) 时，它会显示该错误，即使它是相同的代码。

错误出现在以 /practice/:poseId 结尾的 url 上，例如/练习/1.

错误示例（您在底部看不到姿势标签）：

示例（如果页面 URL 为 /practice，则有效）

这是我的仓库：https://github.com/laura-nguyen/yoga-ai/tree/feature/page-pose-cam

谢谢！

Answer 1

在

localhost:5174/practice

上，

model/model.json

表示

localhost:5174/model/model.json

，但在

localhost:5174/practice/1

上，表示

localhost:5174/practice/model/model.json

。