Error loading model: SyntaxError: Unexpected token ‘＜‘, “＜!DOCTYPE “... is not valid JSON_unexpected token '<', "

作者：小桥流水78 | 2024-08-14 07:57:58

踩

unexpected token '<', "

题意：

Error loading model: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

加载模型时遇到了一个语法错误，具体是解析 JSON 时遇到了意外的字符 '<'。期望从一个 URL 或文件中获取 JSON 格式的数据，但实际上得到的是一个 HTML 页面，而这个 HTML 页面的开头是标准的 <!DOCTYPE html> 声明

问题背景：

I'm creating a yoga AI trainer using ml5 and p5 on React.

我正在使用 React 上的 ml5 和 p5 创建一个瑜伽 AI 训练师。

I created a component where it takes an individual pose as a prop from a local JSON file. The component also loads a model which I added in the public folder. The goal of this component is to detect a certain yoga pose and the component dynamically returns the pose name that is detected from the webcam.

我创建了一个组件，它从一个本地JSON文件中接收一个单独的姿势作为属性（prop）。该组件还加载了我放在公共文件夹中的一个模型。这个组件的目标是检测特定的瑜伽姿势，并且组件会动态地从网络摄像头返回检测到的姿势名称。

I tested two webcam pages. let's call it page 1 and page 2. Page 1 works. the URL is /practice. page 1 leads to webcam 1. webcam 1 works.

我测试了两个网络摄像头页面，我们称之为页面1和页面2。页面1可以正常工作，其URL是/practice。页面1连接到网络摄像头1，网络摄像头1可以正常工作。

page 2 the url is /practice/poseId. page 2 leads to a different webcam component, webcam 2 has the exact same code as webcam 1 except it takes in a prop and that prop is the specific pose that matches the id.

页面2的URL是/practice/poseId。页面2连接到另一个网络摄像头组件，网络摄像头2与网络摄像头1的代码完全相同，除了它接收一个属性（prop），这个属性是与ID相匹配的特定姿势。

On page two, I get this error 在第二页上，我遇到了这个错误

Error loading model: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

It is pointing to this code 它指向这段代码


  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);
          });

I don't understand why my component works on the /practice URL, but when I add poseId (/practice/:poseID), it shows that error even though it's the same code.

我不明白为什么我的组件在/practice URL上能正常工作，但是当我添加poseId（/practice/:poseID）时，即使代码相同，它也会显示那个错误。

The error is on the URL that ends in /practice/:poseId e.g. /practice/1.

错误出现在以/practice/:poseId结尾的URL上，例如/practice/1。

Error example (you don't see the pose label at the bottom):

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

Example (it works if the page URL is /practice) 示例（如果页面URL是/practice，则能正常工作）

This is my repo: 这是我的项目

https://github.com/laura-nguyen/yoga-ai/tree/feature/page-pose-cam

问题解决：

The problem is that you're using the same relative path from two pages in different directories. On localhost:5174/practice, model/model.json means localhost:5174/model/model.json, but on localhost:5174/practice/1, it means localhost:5174/practice/model/model.json.

问题是您正在从不同目录的两个页面中使用相同的相对路径。在 localhost:5174/practice 上，model/model.json 表示 localhost:5174/model/model.json，但在 localhost:5174/practice/1 上，它表示 localhost:5174/practice/model/model.json。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小桥流水78/article/detail/978828