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

The interaction between Vue components causing changes in each other's data

Currently, I am working on a project using vue/nuxt. In order to dynamically load data from a JSON file during compilation, I am utilizing nuxt and webpack (Dynamically get image paths in folder with Nuxt). The structure of my JSON file is as follows: { ...

Is there a way to determine if any word within a given text is present in an array?

Imagine you have the following full text: var nation = "Piazza delle Medaglie d'Oro 40121 Bologna Italy" And a given array like: ["Afghanistan", "Italy", "Albania", "United Arab Emirates"] How can we verify if the exact word Italy within that ent ...

Customizing React configurations for production environments

Our organization utilizes the standard Development, Test, and Production environments. The create-react-app based application we have is integrated as a content item within our CMS, requiring the execution of the npm run build command to deploy it to any e ...

Using PHP to perform live calculations with arrays in real time

Currently, I am working on developing a new system for a client that allows them to create bookings and invoices to send to their clients. One specific requirement my client has is the need for a table column to be added below the container columns in whi ...

Obtain details regarding a worker's collision

This code snippet is being used to manage cluster crashes within a node application cluster.on('exit', function (worker, code, signal) { console.log("error in cluster",worker); console.log("cluster code",code); console.l ...

Encountering difficulties while attempting to convert JSON to XML resulting in an error being

I can't seem to figure out how to successfully convert the JSON result into XML format. I've tried the code below but it's not working as expected. Any help would be greatly appreciated. Here is the code snippet: <script src="../Jquery ...

The Concept of Long Polling and How it Impacts Server Function

After spending a significant amount of time working with PHP, I recently discovered the concept of long polling as an alternative to sending periodic ajax requests. I've realized that sending periodic ajax can be resource-intensive, especially when c ...

Enhancing State Management with CombineReducers in TypeScript

export const rootReducer = combineReducers({ login: loginReducer, }); Everything is working fine with the current setup, but I encountered an issue when attempting to combine another reducer: export const rootReducer = combineReducers({ login: lo ...

Is there a way to detect duplicate usernames in a form without actually submitting the form, and then automatically focus on the username field if a duplicate is

I need help with a user registration form that I am creating. I want the form to automatically search for an existing username as soon as the user starts typing in the username field. If the username already exists, I want the field to receive focus. In my ...

Exploring the integration of PostgreSQL into JavaScript

As a beginner in JavaScript, I am looking to create a web page that can store data in a database. Can anyone provide guidance on what resources or materials I should study to learn more about this process? ...

Awesome method of redirecting outdated URLs to the most recent established URL

My website heavily relies on JavaScript and communicates with a .NET C# RPC service. We encountered an issue where clients' browsers cached the JavaScript, so we decided to add a version number to the URL in order to force them to use the latest JavaS ...

Prevent selection of future dates in JavaScript by using the user's chosen StartDate

Here is the code I currently have: var today = new Date().toISOString().split('T')[0]; document.getElementsByName("StartDate")[0].setAttribute('min', today); $('#StartDate').change(function myfunction() { var endDate = ...

"Learn how to efficiently incorporate data into data-binding in VUE JS with just a

In my data binding, there is a string that reads as follows: bc-men,bc-men-fashion,bc-men-underwear I want to create an input field where I can enter "bc-some-category", click "Add", and have it appended to the end of the list with a comma in front. Her ...

The jQuery UI Tab is failing to scroll within its container

Scenario : I am facing an issue with a scrollable container in IE8. The containing div is supposed to be scrollable and it holds my jquery UI tab div. Issue: While scrolling the container in IE8, other content within it also scrolls, but the jQuery UI t ...

Alter the component and then refresh it

I am encountering an issue with a component that has an event handler for a "like" icon. The goal is to allow users to click the like icon, update the database to indicate their liking of the item, and then re-render the component to visually reflect this ...

Embed a javascript tag to print a PDF document

I have been struggling with printing a PDF file using JavaScript. I attempted to use the embed trick suggested in this Silent print a embedded PDF but unfortunately, the print function remained undefined. Then, I tried another approach using an Iframe and ...

Dynamic resizing navigation with JQUERY

I have successfully created a navigation menu that dynamically resizes each list item to fit the entire width of the menu using JavaScript. $(function() { changeWidth(500); function changeWidth(menuWidth){ var menuItems = $('#menu l ...

Storing Tags with jQuery Tag-it: A guide to saving user inputted tags in an object

Recently stumbled upon a fantastic plugin called tagit, and now I'm looking for a way to extract tag values from it and convert them into an object. Any assistance on this matter would be greatly welcomed! ...

Logging in to TeamCity and NPM using OAuth tokens

I'm currently working on setting up the integration of TeamCity Server (Windows) with my personal NPM repository. After generating an OAuth token, I'm struggling to find documentation or examples demonstrating how to properly utilize the token fo ...

Instructions for including a script and stylesheet exclusively on a single page of a website

I need to incorporate these two lines onto a single page of my website: <script src="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script> As well as <link href="//cdnjs.cloudflare.com/ajax/libs/OwlCa ...