Encountered an issue while loading a pretrained JSON model in a JavaScript script within a locally hosted

At the moment, I am using TensorFlow in Python to train a model and saving it as model.json along with the BIN file in a folder named models. My goal is to develop a web application that can load this pre-trained model for prediction. However, I have been facing an error message

Failed to load resource: net::ERR_NAME_NOT_RESOLVED
. Despite trying various solutions found through research, the error persists.

https://i.sstatic.net/amx6e.png

The model was trained in a .py file and saved into .json using the following line of code:

tfjs.converters.save_keras_model(model, 'models')

Just to provide context, my application utilizes node.js and ExpressJs, hence the use of EJS files instead of HTML files.

EJS File Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4430222e3704766a746a74">[email protected]</a>/dist/tf.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
    <link rel="stylesheet" type="text/css" href="/style/digit.css">
</head>
<body>
    <main>
        <p1>text here</p1>
    </main>   
    <script src="/js/digit-recognition.js"></script>
</body>
</html>

In the digit-recognition.js file

let model;

async function loadModel() {
    console.log("model loading..");
    model = undefined;
    model = await tf.loadLayersModel("models/model.json");
    console.log("model loaded..");
}
loadModel();

$("#predict-button").click(async function () {

    let predictions = await model.predict(tensor).data();
    let results = Array.from(predictions);
    console.log(results);
});

The error displayed on the console is:

Failed to load resource: net::ERR_NAME_NOT_RESOLVED

Last updated on 27th November 2020 at 11:31 AM

Despite attempting multiple online fixes, the issue still persists, and now I encounter the following error:

GET http://localhost:3000/models/model.json 404 (Not Found)

Answer №1

In my opinion, the problem lies in the pathing configuration. By relocating the models/ directory to the js/ directory, the digit-recognition.js script should be able to locate it without any issues.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporate a generic type into a React Functional Component

I have developed the following component: import { FC } from "react"; export interface Option<T> { value: T; label: string; } interface TestComponentProps { name: string; options: Option<string>[]; value: string; onChang ...

Interested in transferring an additional column value to the $scope.seriesSelected variable?

I've been delving into Timeline charts using the angularjs google chart API and have come across an interesting limitation. It seems that only 4 columns are allowed, with the extra column designated for tooltips. However, I have a specific requirement ...

Having trouble sending a POST request to a Node.js HTTP Webserver unless it's from the localhost

I am currently facing an issue while attempting to transfer text/data from a client browser to a Node.js webserver. Whenever I try to use any IP address other than localhost, I encounter a "POST ERR_CONNECTION_TIMED_OUT" error. Below is the code snippet f ...

Trigger an instantaneous update of the masonry grid

My website currently utilizes a script that generates a grid, and the grid elements are automatically adjusted each time the width of the viewport is modified. Although I do not have access to or control over the script since I did not write it myself, I s ...

Save picture in localStorage

Hello, I am currently working on a page where I need to retrieve an image from a JSON file and store it locally. Below is the code I have been using: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.10.1.min. ...

JavaScript failing to retrieve JSON information from PHP

I seem to be encountering an issue when trying to read JSON data that I create in PHP and send back to my JavaScript. The problem is puzzling me. Here's the PHP code: header("content-type: text/json"); curl_setopt($ch,CURLOPT_URL, $url); curl_setop ...

The sorting function in Vue.js, _.orderBy, seems to be having trouble sorting

UPDATE This is the json data retrieved through an API using axios. bannerData= [ { "id": 118, "title": "Geruchsbel\u00e4stigung", "location": "DOR", "pressInformation": [ { ...

Enhancing Bootstrap modals with dynamic content and integrating Ajax for dynamic data retrieval in Laravel

I am facing some challenges while coding in Laravel, specifically with passing data to a modal (using the Bootstrap framework) and sending data to an Ajax post request. I have an array of items with an 'id', a 'name', and 'content& ...

Is the JSON data missing from the POST request?

I'm having trouble inserting data into the database using a POST request. Here is how I'm making the request: 127.0.0.1:3000/api/users?fname=asd&lname=edc&<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d7870 ...

Having trouble retrieving the ID of the clicked element in AngularJS?

I have successfully implemented a function in angularjs to retrieve the id of the clicked element. Below is my code snippet html <a href="#faqinner/contactform" class="clearfix" ng-click="getCateId($event)" id="{{option.id}}"> <span class= ...

The fetch API does not retain PHP session variables when fetching data

After setting session variables in one php file, I am attempting to access those values in another php file. session_start(); $_SESSION['user'] = $row['user']; $_SESSION['role'] = $row['role']; However, when ...

Building a bespoke search input for the DataTables JQuery extension

As the title indicates, I am in the process of developing a custom search box for the DataTables JQuery plugin. The default options do not suit my needs, and configuring the DOM is also not ideal as I aim to integrate it within a table row for display purp ...

I am interested in incorporating the ability to select and scroll the window without needing to interact with the scroll bar by

Imagine a visitor wanting to highlight all the information on a webpage. They choose to start dragging their cursor towards the bottom of the window. How can we enable the webpage to smoothly scroll down as they do this? ...

AJV - setting additionalProperties to false with special cases allowed

I have implemented ajv to validate my mongodb schemas. { type: "object", properties: { target: { type: "string" }, budget: { type: "number" } }, required: ["target", "budget"], additionalProperties: ...

Utilizing Javascript in Spotfire for enhanced functionality

Currently, I have a dropdown menu with two options ("START" & "END"). Depending on the selected value from this dropdown, I want to display a specific DIV element. I attempted to use the code below, but unfortunately, it is not functioning as expected ...

What strategies can I implement to prevent the JavaScript CallStack from becoming overloaded?

The code snippet below outlines the functionality achieved through JavaScript (specifically for a node.js COMET application): A request is sent to the server and held until there is a response. Upon receiving a response, the data is processed, and anothe ...

Tips to swap selections in a Select2 dropdown box

Is there a way to dynamically clear a Select2 option list and reload it with new data? Despite setting the data as suggested, it seems to only append the new data without clearing the existing options. $("#optioner").select2(); $("#doit").click(functio ...

When using node.js with express, the req.on('end') event is triggered, but the req.on('data') event does not fire

When using body parser, you have the option of either: application/x-www-form-urlencoded body parser or json body parser Both options yield the same results. This is how the API is being called: $.ajax({ type:'post', url:'/ ...

Why is my MongoDB $match aggregation query not returning results within a specified date range?

I have been struggling with a MongoDB aggregation query that is not returning any results, just an empty array. It seems like the issue lies in how it's processing the date range. Oddly enough, when I use PriceHourly.find({ date: { $lt: end, $gt: sta ...