从Firebase加载TensorFlow.js自定义模型时JSON解析失败求助

我尝试从Firebase加载一个自定义模型（包含1个.json文件和3个bin文件），相关信息如下：

模型保存代码（Jupyter Notebook Python） #

tfjs.converters.save_keras_model(model2, "model2")

保存后的模型结构 #

模型目录包含：

• model.json
• group1-shard1of3.bin
• group1-shard2of3.bin
• group1-shard3of3.bin

ReactJS加载代码 #

const link = {
    model:
             "https://firebasestorage.googleapis.com/v0/b/xxxxxxx.appspot.com/o/model2%2Fmodel.json?alt=media&token=f4b6be76-b760-496e-8983-7beda892f5a5",
    
};

const model = await loadLayersModel(link.model);

报错信息 #

Uncaught (in promise) Error: Failed to parse model JSON of response from https://firebasestorage.googleapis.com/v0/b/xxxxxxxx.appspot.com/o/model2%2Fmodel.json?alt=media&token=f4b6be76-b760-496e-8983-7beda892f5a5. Please make sure the server is serving valid JSON for this request.
    at HTTPRequest.load (http.ts:168:1)
    at async loadLayersModelFromIOHandler (models.ts:293:1)
    at async predictionModel (App.js:74:1)

Firebase存储规则 #

规则设置为：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

之前尝试加载tflite模型，但每次预测结果都相同，现在希望解决JSON模型的加载问题。

1. 验证model.json的有效性 #

直接在浏览器中打开model.json的URL：

• 如果返回HTML页面（比如权限错误提示），说明存储规则限制了访问
• 如果返回JSON内容，检查是否存在语法错误（如多余逗号、引号不匹配）

2. 临时调整Firebase存储权限（测试用） #

当前规则要求用户登录才能访问，若未在React应用中实现Firebase认证，可临时修改规则为公开读取（测试完成后改回原规则）：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read: if true;
      allow write: if request.auth != null;
    }
  }
}

修改后等待规则生效（通常几分钟），再尝试加载模型。

3. 检查bin文件路径一致性 #

tfjs导出的model.json中包含bin文件的相对路径：

• 确认Firebase存储中，model.json和三个bin文件都在model2目录下
• 打开model.json，查看weightsManifest字段的paths是否与实际存储的bin文件名完全匹配

4. 规范使用loadLayersModel参数 #

推荐使用IOHandler对象加载模型，避免路径解析问题：

import * as tf from '@tensorflow/tfjs';

const modelUrl = "https://firebasestorage.googleapis.com/v0/b/xxxxxxx.appspot.com/o/model2%2Fmodel.json?alt=media&token=f4b6be76-b760-496e-8983-7beda892f5a5";
const model = await tf.loadLayersModel(tf.io.browserHTTPRequest(modelUrl, {
  credentials: 'include' // 若需要携带认证信息则启用
}));

5. 排查CORS问题 #

若浏览器控制台有CORS相关报错，需配置Firebase存储的CORS规则：

1. 创建cors.json文件，内容如下：

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

2. 使用Firebase CLI执行命令（替换为你的存储桶名称）：

gsutil cors set cors.json gs://xxxxxxx.appspot.com

关于tflite预测结果一致的补充 #

该问题通常是输入数据预处理错误（如未归一化、输入维度不匹配）或模型加载不完整导致，解决当前JSON模型问题后，可检查输入数据是否符合tflite模型的要求。

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