# Create TensorFlow.js Project with Parcel

Creating a web application is often troublesome due to the complexity of the framework and ecosystem. There are a bunch of build systems to launch the project. We also need to be familiar with the difference between programming languages used by web applications (e.g. JavaScript, AltJS, TypeScript). It may be a common sense especially to those who are not familiar with the latest web technologies as it changes so quickly.

Parcel is a tool to bundle all assets needed for an application into one package. You can use it immediately without writing any configuration. I found it’s so beneficial to use Parcel for creating TensorFlow.js application quickly. It cares to compile TypeScript, dependency resolution and package bundle on behalf of me. In this article, I’m going to introduce the way how to create TensorFlow.js application in a few minutes by using Parcel.

First, you need to create the application directory in your machine. Then as you may usually do, you prepare the npm package in the directory.

$mkdir myapp$ cd myapp
$npm init -y It will create an initial package.json. Please make sure to add TensorFlow.js as a dependency as follows. The pre-trained models of TensorFlow.js may be also useful. "dependencies": { "@tensorflow/tfjs": "^1.0.3", "@tensorflow-models/mobilenet": "^1.0.0", "parcel": "^1.12.3" } You may need to ensure the dependencies are installed properly by running npm i. Then let’s write the source code of the application. The structure of application looks like as follows.$ tree .
.
├── package.json
└── src
├── cat.jpg
├── index.html
└── index.ts

1 directory, 3 files

The following shows the index.html and index.ts. One of the great thing of Parcel is that it can automatically detect the resource used in the application. In this case, cat.jpg and index.ts are compiled and bundled into the artifact directory, dist.

<script src="index.ts"></script>

<div style='display: flex'>
<img id="img" src="cat.jpg"/>
</div>
import * as mobilenet from '@tensorflow-models/mobilenet';

async function run(img: HTMLImageElement) {
const model = await mobilenet.load(2, 1.0);

// Classify the image.
const predictions = await model.classify(img);
console.log('Predictions');
console.log(predictions);
}

// Ensure to load the image.