TFJS通过Flask HTTP接口加载GraphModel报url.startsWith不存在错误

loadGraphModel 方法第一个入参要求是模型model.json对应的URL字符串，你当前的代码里提前用fetch请求了接口，把解析后的JSON对象传给了loadGraphModel，方法内部尝试对传入的参数调用字符串方法startsWith时就触发了类型错误。
另外还有一个隐藏问题：TensorFlow JS加载模型时，拿到model.json后还会自动请求里面配置的权重分片文件（一般是.bin格式），你现在的Flask服务只写了返回model.json的接口，后续权重文件的请求也会404。

1. 修改React端加载逻辑 #

删掉自行fetch解析的逻辑，直接把模型接口地址传给loadGraphModel即可：

async function loadModel() {
    try {
      // 后续修改为对应model.json的访问地址
      const model_url = "http://127.0.0.1:5000/model.json";
      // 直接传url，不需要自己fetch
      const model = await loadGraphModel(model_url);
      console.log('model loaded...')
      setModel(model);
      console.log("Model correctly loaded");
    } catch (err) {
      console.log(err);
      console.log("failed load model");
    }
}

2. 修改Flask服务，支持返回所有模型相关文件 #

新增通用接口返回models目录下的所有文件，适配TFJS的权重请求：

from flask import Flask, send_from_directory
from flask_cors import CORS
import os

app = Flask(__name__)
cors = CORS(app)

@app.route('/')
def hello_world():
    return 'Hello, World!'

# 通用路由返回models目录下的所有文件，包括model.json和权重bin文件
@app.route('/<path:filename>', methods=['GET'])
def get_model_files(filename):
    current_dir = os.getcwd()
    models_dir = os.path.join(current_dir, "models")
    return send_from_directory(models_dir, filename)


if __name__ == '__main__':
    app.run(debug=True, host="0.0.0.0", threaded=True)

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