题意：
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。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
