Using the tensorflow library with vite

Greetings and apologies for any inconvenience caused by my relatively trivial inquiries. I am currently navigating the introductory stages of delving into front-end development.

Presently, I have initiated a hello-world vite app, which came to life through these simple steps:

npm init @vitejs/app
cd hello-vite
npm install npm run dev

Successfully, I can observe the outputted localhost URL in my browser.

In addition, there exists a basic script within my repertoire that imports tensorflow and proceeds with tasks:

$ cat test.mjs 
import * as tf from '@tensorflow/tfjs-node'

const a = tf.tensor([[1, 2], [3, 4]]);
a.print();

$ node test.mjs 
2022-06-27 22:04:16.968270: I tensorflow/core/platform/cpu_feature_guard.cc:151] This TensorFlow binary is optimized with oneAPI Deep Neural Network Library (oneDNN) to use the following CPU instructions in performance-critical operations:  AVX2 AVX512F FMA
To enable them in other operations, rebuild TensorFlow with the appropriate compiler flags.
Tensor
    [[1, 2],
     [3, 4]]

The next objective I aim to achieve is integrating this behavior from test.mjs into my hello-vite app. Hence, I ventured into executing something along these lines:

$ cat main.ts 
import './style.css'
import * as tf from '@tensorflow/tfjs-node'

const a = tf.tensor([[1, 2], [3, 4]]);
a.print();

document.querySelector('#app').innerHTML = `
  <h1>Hello Vite!!!</h1>
  <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
`

Yet, upon running npm run dev, it appears discontent and unleashes complaints about AWS-related issues:

$ npm run dev

> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f070a0303004219061b0a2f5f415f415f">[email protected]</a> dev
> vite


  vite v2.9.12 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 112ms.

✘ [ERROR] Could not resolve "mock-aws-s3"

    node_modules/@mapbox/node-pre-gyp/lib/util/s3_setup.js:43:28:
      43 │     const AWSMock = require('mock-aws-s3');
         ╵                             ~~~~~~~~~~~~~

  You can mark the path "mock-aws-s3" as external to exclude it from the bundle, which will remove
  this error. You can also surround this "require" call with a try/catch block to handle this
  failure at run-time instead of bundle-time.

...

If I choose to omit the print() function call and the preceding line, the errors cease to arise.

Where could I be going astray? How should I interpret and address these complications?

Answer №1

Although I am not an expert, it seems that @tensorflow/tfjs-node is specifically designed for Node projects and may not be compatible with browsers.

Furthermore, tools like node-pre-gyp, which are C++ binding libraries for Node, are unlikely to function properly in a browser environment.

Attempting to install packages like mock-aws-s3 that encountered errors may not resolve the issue either.

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

Asynchronous function in TypeScript is restricting the return type to only one promise type

Using node version 14.7.0, npm version 6.14.7, and typescript version 3.7.3. I have a function that interacts with a postgres database and retrieves either the first row it finds or all results based on a parameter. It looks something like this: async fet ...

Utilizing Facebook's JavaScript SDK to transmit variables to PHP using ajax

Thank you in advance for your attention. I am trying to utilize the Facebook js SDK to retrieve the user's name and id, and then send them to PHP on the same page (index.php). After successfully obtaining the username and id and storing them in two Ja ...

The TypeScript namespace does not exist or cannot be located

Currently, I am working on coding in TypeScript. The specific code pertains to an Angular 2 application, but the main focus of my inquiry lies within TypeScript itself. Within my project, there are certain files that contain various models, such as the exa ...

Adding semi-colon in JavaScript with special comments by YUI Compressor

Our team recently implemented YUI Compressor (2.4.8) on our project and it's been performing well. However, we encountered an unexpected issue while minifying JavaScript files that contain special comments. It appears that YUI Compressor is automatic ...

The onClick event cannot be triggered within a div that is generated dynamically

I am having an issue with a jquery code that dynamically generates a div. The problem I'm facing is that the onclick function for the anchor tag is not calling the required function. Below is the code snippet: $("#new").append(' <ul cla ...

JQuery form serialize not triggering in Internet Explorer

I've encountered an issue with a form inside a jQuery dialog that is not submitting properly in Internet Explorer. The form functions correctly in Chrome and Firefox, sending data to my MVC controller without any issues. However, when using IE, it on ...

Can you guide me on how to access an Angular route using a URL that includes query parameters?

Within my current development project, I have implemented a user profile route that dynamically navigates based on the user's _id. This means that when a user accesses the page, their _id is stored in localStorage and then used to query MongoDB for th ...

What are the steps to retrieve a Json Object from an Array while extracting information from Rapid API?

Utilizing axios to fetch data from a GET API on RapidAP returns an array of JSON objects, as illustrated in the images below. How can I implement Typescript within React to specifically extract the data of these JSON objects from the array according to my ...

Codeigniter - Ajax request successful in remote server but fails in local server

I am encountering an issue with my web application that makes Ajax requests to a server using Codeigniter-php code. While the Ajax requests work fine on the local server, they do not function properly when the application is hosted on a remote server. The ...

Struggling to pass Chai tests with Node and Express.js when trying to handle POST requests

Working through a Chai testing exercise and struggling to pass the POST route tests. Encountering two specific errors: 1) Todo API: POST /v1/todos Issue with creating and returning new todo using valid data: Header 'location' should ...

Ways to dynamically generate a card using NuxtJS

I'm just starting out with NuxtJS and I'm curious about how to generate a v-card within a v-dialog box. Imagine this scenario: I have an "add" button that triggers a v-dialog, where I can input information into a form. After submitting the form, ...

JavaScript counter that keeps updating without pause

How can I create a live and continuous number counter on my website? After seeing the question above, I am interested in implementing a similar feature but with a slight twist. I am looking to have a counter that increments by 15.8 cents per second start ...

Enhance the efficiency of time tracking function

I have been using a nodejs module to track the execution time of different parts of my application. // polyfill for window.performance.now var performance = global.performance || {} var performanceNow = performance.now || performance.mozNow ...

The interface IJobDetails cannot be assigned to type null

In the code snippet below, I have created an interface called ClientState1. Now, I am attempting to define a constant named descriptionJobDetails with the type ClientState1, specifically for IJobDetails. However, I am encountering an error as illustrated ...

employing a flexible array of gulp operations in run-sequence

I have a situation where I need to create gulp tasks with dynamic names and ensure that they run in sequence, not parallel. I have stored the task names in an array, but when I try to use run-sequence, I encounter an error. I suspect the issue lies in how ...

At times, AngularJs template tags fail to evaluate

Can anyone explain why the templating tag [[ opt.option ]] is not always evaluating to a value in this code snippet? <span ng-repeat="opt in options"> <button ng-click="button = [[ opt.option ]]" ng-class="{ active : button == [[ opt.option ]] ...

"Combining multiple attributes to target elements while excluding specific classes

My dilemma lies in the following selector that identifies all necessary elements along with an extra element containing the "formValue" class which I aim to omit $("[data-OriginalValue][data-OriginalValue!=''][data-TaskItemID]") ...

Optimal approach for managing numerous modals containing map data in Next.js

Hey there, I'm facing an issue while trying to utilize map data in conjunction with modals. Although I have set the state for all modals, when I use an array object within the map data, the modals end up showing duplicated. To provide clarity, let me ...

A step-by-step guide on how to insert an image URL into the src attribute using the

The source of my image is -> src/assets/images/doctor1.jpg I would like to use this image here -> src/components/docNotes/docNotes.js In the docNotes.js file, I attempted -> <Avatar className={classes.avtar} alt="Remy Sharp" src ...

Implementing a Where Condition in JavaScript with the MongoDB whereObj

Working on a project involving JavaScript and MongoDB has led me to a specific collection named test_collection. Within this collection, there is a field/object called test_field_1 which contains test_sub_field_1 and test_sub_field_2. Currently, I am sett ...