英文:
Load tensorflow.js model from files with parcel
问题
我想在使用Parcel构建的Web应用中提供TensorFlow.js模型，类似于https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image。
我有一个run.js文件和一个run.html文件，以及一个名为model1的文件夹，其中包含model.json、metadata.json和weights.bin文件。我正在使用Parcel将所有这些内容打包在一起。
问题是，当我导入model.json、metadata.json和weights.bin文件时，它们被解析了，我无法使用它们。
我希望它们以“文件”格式存在。
我可以通过在html的元素中加载文件来实现这一点，但我希望将模型交给用户。
run.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>Teachable Machine Image Model Local</div>
<button type="button" id="loadmodel">Load Model 1</button>
<button type="button" id="run">Start</button>
<input type="file" id="lm1">Model</input>
<input type="file" id="lmd1">Metadata</input>
<input type="file" id="lw1">Weights</input>
<script src="./run.js"></script>
</body>
</html>
run.js：
import localmodel1 from "./model1/model.json";
import localmeta1 from "./model1/metadata.json";
import localweights1 from "./model1/weights.bin";
const textFile = fs.readFileSync(__dirname + "/model1/weights.bin", "utf8");
console.log(textFile);
localModel = localmodel1;
localMetadata = localmeta1;
localWeights = localweights1;
uploadModel = document.getElementById('lm1').files[0];
uploadMetadata = document.getElementById('lmd1').files[0];
uploadWeights = document.getElementById('lw1').files[0];
model = await tmImage.loadFromFiles(uploadModel, uploadWeights, uploadMetadata);
请注意，我没有翻译代码部分，只提供了代码的翻译。如果您需要进一步的帮助或有其他问题，请随时提问。
英文:
I want to serve tensorflow.js models in a web app built with parcel, similar to https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image.
I have a run.js file and a run.html as well as a folder (model1) with model.json, metadata.json and weights.bin. I am bundling all this with parcel.
The Problem is, when I import the model.json, metadata.json and weights.bin files, they are parsed, which I can't use.
I would want them in a "file" format.
I can achieve this by loading the files in the html's <input type="file"> element, but I would like to hand the models to the user.
run.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>Teachable Machine Image Model Local</div>
<button type="button" id="loadmodel">Load Model 1</button>
<button type="button" id="run">Start</button>
<input type="file" id="lm1">Model</input>
<input type="file" id="lmd1">Metadata</input>
<input type="file" id="lw1">Weights</input>
<script src="./run.js"></script>
</body>
</html>
run.js:
import localmodel1 from "./model1/model.json";
import localmeta1 from "./model1/metadata.json";
import localweights1 from "./model1/weights.bin";
const textFile = fs.readFileSync(__dirname + "/model1/weights.bin", "utf8");
console.log(textFile);
localModel = localmodel1;
localMetadata = localmeta1;
localWeights = localweights1;
/*
fs.readFile('./model1/weights.bin', function (err, bin) {
localweights1 = bin;
if (err) throw err;
});
*/
uploadModel = document.getElementById('lm1').files[0];
uploadMetadata = document.getElementById('lmd1').files[0];
uploadWeights = document.getElementById('lw1').files[0];
model = await tmImage.loadFromFiles(uploadModel, uploadWeights, uploadMetadata);
答案1
得分: 1
loadFromFiles 期望参数为文件类型。因此，除了在用户选择文件时获取这些文件之外，您不能直接通过parcel加载文件。
相反，tf.loadLayersModel 从文件加载模型。
模型文件需要放在parcel提供的文件夹中。它们不必像模块一样导入。
const customModel = await tf.loadLayersModel(jsonUrl); // 不需要指定权重文件
另一方面，元数据可以作为Typescript文件导入。
import metadataJSON from "./model1/metadata.json";
const model = new CustomMobileNet(customModel, metadataJSON); // 需要导入CustomMobileNet
英文:
loadFromFiles expect arguments of type file. So there is not much you can do to load files by parcel directly apart from getting those files when the user select them.
Instead tf.loadLayersModel loads model from file.
The model files, needs to be put in the folder served by parcel. They don't have to be imported as if they were module.
const customModel = await tf.loadLayersModel(jsonUrl); // there is no need to specify weight file
The metadata on the other hand can be imported as a typescript file
import metadataJSON from "./model1/metadata.json";
const model = new CustomMobileNet(customModel, metadataJSON); // CustomMobileNet needs to be imported
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论