在JavaScript中从本地文件系统加载TensorFlow.js模型

Question

我已将keras模型转换为tensorflow json格式并保存在本地电脑上。我正在尝试使用以下命令在JavaScript代码中加载该json模型。

我已将Keras模型转换为TensorFlow JSON格式并将其保存在我的计算机上。我正在尝试使用以下命令在JavaScript代码中加载该JSON模型。

model = await tf.loadModel('web_model')

但是模型没有被加载。 有没有一种方法可以从本地文件系统加载tensorflow json模型？

- user2693313

---

我猜你没有使用开发服务器？仅使用浏览器打开HTML文件将导致在用于获取文件的XHR请求中出现问题。也许可以尝试使用https://www.npmjs.com/package/http-server。 - Max

我刚开始探索TensorFlow JS，并使用我的浏览器测试一些东西。 - user2693313

Answer 1

我知道你想在浏览器中加载模型，但如果有人来这里尝试在Node中执行此操作，以下是方法：

const tf = require("@tensorflow/tfjs");
const tfn = require("@tensorflow/tfjs-node");
const handler = tfn.io.fileSystem("./path/to/your/model.json");
const model = await tf.loadLayersModel(handler);

- jafaircl

---

这太棒了。谢谢你。 - user11145590

const tf = require("@tensorflow/tfjs-node"); const handler = tf.io.fileSystem("./path/to/your/model.json"); const model = await tf.loadLayersModel(handler); 如果导入tfjs-node，则不需要导入tfjs。 - tadvas

Answer 2

LoadModel使用fetch实现，而fetch无法直接访问本地文件。它的用途是用于获取由服务器提供的文件。更多信息请参见此处。 要在浏览器中加载本地文件，有两种方法，一种是要求用户上传文件。

<input type="file"/>

或者通过服务器提供文件。

在这两种情况下，tf.js 提供了一种加载模型的方式。

1. 通过要求用户上传文件来加载模型

html

<input type="file" id="upload-json"/>
<input type="file" id="upload-weights"/>

JavaScript

const uploadJSONInput = document.getElementById('upload-json');
const uploadWeightsInput = document.getElementById('upload-weights');
const model = await tfl.loadModel(tf.io.browserFiles(
 [uploadJSONInput.files[0], uploadWeightsInput.files[0]]));

2. 使用服务器提供本地文件

为了实现此目的，可以使用以下 npm 模块http-server来服务包含权重和模型的目录。它可以通过以下命令进行安装:

 npm install http-server -g

在目录中，可以运行以下命令来启动服务器:

http-server -c1 --cors .

现在可以加载这个模型了：

 // load model in js script
 (async () => {
   ...
   const model = await tf.loadFrozenModel('http://localhost:8080/model.pb', 'http://localhost:8080/weights.json')
 })()

- edkeveked

---

非常感谢您的帮助。但是在尝试加载模型文件时，我遇到了以下错误： Uncaught (in promise) TypeError: Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'. - user2693313

也许，您需要在使用事件监听器加载文件后再读取该文件。 - edkeveked

使用HTTP服务器对我很有效。 - Maheen Saleh

Answer 3

如果您正在使用create-react-app与React，您可以将保存的模型文件放在您的public文件夹中。

例如，假设您想要使用blazeface模型。 您可以这样做：

1. Download the .tar.gz model from that web page.

2. Unpack the model into your app's public directory. So now you have the files from the .tar.gz file in a public subdir:

   %YOUR_APP%/public/blazeface_1_default_1/model.json
   %YOUR_APP%/public/blazeface_1_default_1/group1-shard1of1.bin
   

3. Load the model in your React app using

   tf.loadGraphModel(process.env.PUBLIC_URL + 'blazeface_1_default_1/model.json'
   

- AskyMcAnswerFace

---

你如何知道在下载模型时使用loadGraphModel还是loadLayersModel？ - benwl

Answer 4

const tf = require('@tensorflow/tfjs');
const tfnode = require('@tensorflow/tfjs-node');

async function loadModel(){
    const handler = tfnode.io.fileSystem('tfjs_model/model.json');
    const model = await tf.loadLayersModel(handler);
    console.log("Model loaded")
}


loadModel();

这对我在node中起作用。感谢 jafaircl。

最初的回答：

- Manash Mandal

Answer 5

你可以尝试：

const model = await tf.models.modelFromJSON(myModelJSON)

这里是在tensorflow.org文档中的链接

- user10302261

---

жВ®дЄНиГљдљњзФ®modelFromJSONеК†иљљеИЖзЙЗжЭГйЗНпЉИ.binжЦЗдїґпЉЙгАВ - Keegan

Answer 6

我找到了一个可行的解决方案。你可以用XAMPP上的本地主机URL替换掉原来的URL，例如（目录=模型）http://localhost/model/model.json，然后你需要禁用浏览器的CORS策略。对于我来说，我找到了一个Chrome扩展程序，并为我的特定标签页删除了CORS，这样就可以正常工作了。

以后再感谢我吧！

- EvilTwin

Answer 7

查看我们的文档以加载模型：https://js.tensorflow.org/api/latest/#Models-Loading

您可以使用tf.loadModel，它需要一个字符串作为URL，该URL是指向您的模型定义的HTTP地址。这意味着您需要启动一个HTTP服务器来提供这些文件（由于CORS，它不允许您对文件系统发出请求）。

此软件包可以为您完成此操作：npmjs.com/package/http-server

- Nikhil

Answer 8

如果你正在使用Django，你应该：

1. 在您的应用程序中创建一个名为static的目录，并将您的模型放在其中。

2. 将该static目录加载到您想要使用模型的模板中：

   var modelPath = "{% static 'sampleModel.json' %}">
   

不要忘记也加载 tensorflow.js 库：

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>

现在您可以加载您的模型：

<script>model = await tf.loadGraphModel(modelPath)</script>

- Sayyor Y

Answer 9

如果您正在尝试在服务器端加载它，请使用@tensorflow/tfjs-node而不是@tensorflow/tfjs，并更新到0.2.1或更高版本以解决此问题。

- Nima

Answer 10

你可以使用不安全的 Chrome 实例：

C:\Program Files (x86)\Google\Chrome\Application>chrome.exe --disable-web-security --disable-gpu --user-data-dir=C:/Temp

然后，您可以添加此脚本以重新定义 fetch 函数

async function fetch(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest
    xhr.onload = function() {
      resolve(new Response(xhr.responseText, {status: 200}))
    }
    xhr.onerror = function() {
      reject(new TypeError('Local request failed'))
    }
    xhr.open('GET', url)
    xhr.send(null)
  })
}

在此之后，请确保您使用正确的模型加载器（有关加载器问题的我的评论）

但是，您的权重将不正确 - 我理解存在一些编码问题。

- Mahalov Ivan