Bootstrap your Lobe web project

Bootstrap your Lobe web project

Lobe is an easy to use free tool to help you start working with machine learning.This project was created to help you bootstrap your Lobe project on the web. Built with React and Tensorflow.js.

Lobe is an easy to use free tool to help you start working with machine learning.

This project was created to help you bootstrap your Lobe project on the web. Built with React and Tensorflow.js.

Table of contents

In the next few sections we’ll take you through the basics of creating your new project and getting started. At a high level, we’ll go over:

  1. Installing your Development Environment
  2. Exporting your model from Lobe and integrating it into the code
  3. Deploying your app to the web
  4. Tips and Tricks for creating your own custom version of this app
  5. Contributing

Installing Your Development Environment

In this stage we’re going to get your setup so you can launch and play with your app. These instructions are written for macOS, but will be fairly similar on a Windows machine. To start, we’re going to download this repository. To do this, we need to install a few things.

Step 1 – Install Homebrew

First, open a terminal window.

Next, copy & paste the following into a terminal window and hit return.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
brew doctor

You will be offered to install the Command Line Developer Tools from Apple. Confirm by clicking Install. After the installation finished, continue installing Homebrew by hitting return again.

Step 2 – Installing Git

Feel free to skip second step if you already have git installed, or if you'd perfer to use the GitHub Desktop app. Otherwise, Copy & paste the following into the terminal window and hit return.

brew install git

Now that we git installed, you can clone this repo with the following command. You'll want to navigate to a folder in terminal where you'd like to store these files. If you need help, here's a gentle introduction to navigation in the terminal.

git clone https://github.com/lobe/web-bootstrap.git

Step 3 - Installing Node

Next, we’re going to get you setup to run Node applications. Node is a javascript runtime engine that will run our code on your computer. For managing Node versions, there’s a popular app called nvm (https://github.com/nvm-sh/nvm), and we’re going to use it to install the right version of Node. To install nvm, run this command in your terminal:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash

After nvm is installed run the following commands to install the right version of Node:

cd <path to this repository>
nvm install

You can also use n or any other tool you'd like to get Node version 12.18.1 installed.

Step 4 - Installing our node modules and running the app

First, still in this repo's directory, run:

npm install

And finally, let's start the app! By running the following you'll see the app pop up in your web browser:

npm start

Exporting your model

Next, we're going to drop in your new model. So first, let's open your project in Lobe and export it by pressing ⌘-E and selecting Tensorflow.

Once you have the tensorflow model, you're going to follow these instructions for converting the model to tensorflow.js. After that, drag in the converted model files into the /public/model folder to replace the exisiting sample model:

Starting your app up again by running yarn start will reflect these changes and show you your model live! Congratulations! 🎉

Deploying your app

Luckily for us, deploying on the web is much easier then on iOS or Android. You can deploy to a varitiy of cloud services, such as AWS, GCP, or Azure. One of the best choices is using GitHub pages: it's free and will give you a URL (yourproject.github.io) for you to use and share around the web. Because this is using tensorflow.js, all the inference is done client side, so using your app should remain fast for all users, regardness of how many there are! We recomend this guide that will take you through the steps.

Tips and Tricks

You're more the welcome to use this app as a starting place for your own project. Below is a high level overview of the project to get you started. Like any good bootstrap app, this project has been kept intentionally simple. There are only two main components, the Camera, and the Prediction.

Camera.js

The Camera is resonsible for displaying a live full screen view of the user's webcam. It can easily be modified to take input from any camera attached to your computer, so could hook this up to your sub telescope and use that!

Prediction.js

Our Prediction component is the box in the lower left hand corner. It's responsible for displaying the prediction results and their confidences.

Miscellaneous Pointers

  • There's a config file in /src that has various config options for the app.
  • The prediction happens at a set interval (500ms), while the camera is kept showing a live feed regardless of the prediction frequency.
  • The shared css in the App.css
  • All the code is commented, this should help you explore and configure to create your own version

Contributing

If you can think of anything you'd like to add, or bugs you find, please reach out! PRs will be openly accepted (if they keep project simple, bonus points for making it even simplier) and issues will be triaged.

We look forward to seeing the awesome projects you put out there into the world! Cheers!

– The Lobe Team

Download Details:

Author: lobe

Source Code: https://github.com/lobe/web-bootstrap

bootstrap react reactjs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React Bootstrap Select Dropdown Example

react select dropdown example,react select dropdown onchange,react bootstrap select dropdown example,react select custom dropdown,react bootstrap select box

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

React Bootstrap Table2 Example

React Bootstrap Table2 Example. The react-bootstrap-table2 need you to add bootstrap css in your application quickly. You can install it using NPM. I will show you how to install react-bootstrap-table2 and display the data with the various options on the frontend.

Build a website with React, React-Bootstrap, React-Router and Styled-Components

Create a website with React Bootstrap, Styled Components and React Router. React-Bootstrap is used to quickly style our page with their selection of prebuilt react components. Then we use styled-components to tweak some of the styles. Finally, we use react-router page navigation in our navbar. React-Bootstrap is a complete re-implementation of the Bootstrap components using React. It has no dependency on either bootstrap.js or jQuery. If you have React setup and React-Bootstrap installed, you have everything you need. React-Bootstrap provides a more reliable solution by incorporating Bootstrap functionality into React's virtual DOM.