connect react.js to Google Collab - javascript

I want to make a simple image classification app such that the training/classification is done in a Python script. I want to create a web app for it (preferably in React.js) where the user can select parameters or the activation function etc.
To link the front-end with backend, I was planning to use the flaskAPI. However, since the training data could be large, I wanted to use GoogleColab for the ML/Python part. Is it possible to run my front-end such that it's linked to Google Colab? I couldn't find any relevant examples.

Here's an example using Flask.
https://colab.research.google.com/drive/1F-b8Vv_jaThi55_z0VLYLw3DDVnPYZMp

Here is a simple, step-by-step demo of how to build a Python-Flask application, host it in Google Colab and then access it from the public internet ( using a public URL) using NGROK tunnels. The demo is available in GitHub Repository. The first five apps have no machine learning component but demonstrate basic input-output abilities. There are two machine learning apps, one with linear regression and one with decision tree that is used for Image Classification. While we do not use React.js we do address the issue of accessing a ML model through a web API. Do note that the ML models have to built separately and should be available for loading into the Colab VM either from Google Drive ( as in this case) or from/through some other mechanism.

Related

Nativescript Javascript and Watson Cloud SDK Integration

So I am attempting to use the Watson Assistant module of the Watson Developer Cloud SDK.
I wish to use this lib in a Nativescript APP, with the end goal being I utilize the abilities of the library to take have a chat screen in the app, and take user data and send it to the bot, and vice versa.
Link: https://github.com/watson-developer-cloud/node-sdk
I am trying to use the Node.js SDK, however upon installing I get the first error of Buffer not defined.
I have then gone through this guide, and installed Nodefiy
Link: https://www.nativescript.org/blog/how-to-use-any-npm-module-with-nativescript
I then placed require(nativescript-Nodefiy) within the app.js of the application, and within the assistant.js of the Watson NPM module.
This got rid of the Buffer error, however, continuing on, I then got "Stream module not found", then https module not found, and the list continues.
I then found this article on Kinvey Business logic:
Link: https://devcenter.kinvey.com/nativescript/reference/business-logic/reference.html#watson-module
The way they show it, shows that the Watson-develop-cloud SDK should just work with Nativescript.
I'm at a lose now what to do next, I would love to get it working, but knowledge resources are limited.
Any help and guidance would be awesome.
const HomeViewModel = require("./home-view-model");
require("nativescript-nodeify");
var AssistantV1 = require('watson-developer-cloud/assistant/v2');
function onNavigatingTo(args) {
const page = args.object;
page.bindingContext = new HomeViewModel();
}
exports.onNavigatingTo = onNavigatingTo;
This is the only code I have in the "home-page.js" file, having just installed the "watson-developer-cloud" sdk, and then putting the "require('watson-develop-cloud...')" throws an error saying "Buffer" not defined
I can see you mention Kinvey in your question, however I do not know to what extend you are familiar with the platform.
Progress® Kinvey™ is a serverless cloud backend platform for rapidly building enterprise mobile apps and experiences at consumer-scale. Developer productivity is dramatically accelerated using open source frontend frameworks integrated with a low-code backend that enable out of the box integrations with enterprise and legacy systems. You can easily deliver multi-channel externally facing apps faster without worrying about infrastructure, platform and DevOps.
Kinvey offers variety of SDKs using which you can build native, hybrid, web and IoT apps. Indeed one of the SDKs that Kinvey offers is for NativeScript. Please save this link, as it is the official DevCenter documentation for Kinvey's NativeScript SDK.
Continuing on your post, I see that you've read about the Kinvey Business Logic feature. It is a NodeJS code execution runtime that allows you to customize the behavior of requests to your backend by providing a means to implement server-side business logic. Kinvey Business Logic enables developers to focus on the unique functional business logic of a mobile application, while Kinvey handles the work of receiving, parsing, and routing requests, connecting to and querying data stores, and enabling mobile-specific functionality. Please refer to this link to get more information about the core-concepts of Kinvey Business Logic.
One of the greatest benefits of using Kinvey Business Logic is that you have access to a series of API modules that can be used to manipulate or action on a request. To your information, one of those modules is called IBM Watson. The IBM Watson module provides support for integrating with the IBM Watson APIs. This library exposes the "watson-developer-cloud" library.
Please feel free to go through the information that I've shared above, and familiarize yourself with Kinvey. Feel free to also join Kinvey's Customer Support portal.
I hope, I have informed you well.

Create a GET request to Coinbase with JavaScript

I have very basic knowledge in JS and C#, and now I'm trying to build my first web app with JS. I want to create a web app which creates a GET request to Coinbase website and takes the current price of Bitcoin, Ethereum and etc. and show it in my web app.
Can you provide me a website where i can start with?
Thank you.
Coinbase has a maintained API you can use to fetch the data you need. They support various solutions (REST, Websocket, etc.), depending on your requirements.
Resources for getting started with general web development is an entirely different beast. I would suggest Angular's Heroes Tutorial, and from there read up on AJAX or Websockets (for the latter, I suggest socket.io).
Expect 100-250 hours work.

Identity Server 4 + Identity Framework + React front-end

I'm looking for advice on how to properly put an environment like this together. There's a ton of info out there and a ton of material to cover in the Quickstarts, but I'm still feeling fairly lost after 3 days of trial-and-error. I'm familiar w/ Identity Framework in the .NET Framework, but have never worked with Identity Server prior to this.
We've got a microservices setup built on Node and MySql...a series of services in Docker containers which talk to their own db nodes in a MySql cluster. We have a single management UI built in React & Redux - it will run from an AWS bucket.
I've been tasked with authenticating this React front-end using Identity Server. We will NOT be doing auth on the APIs with it. I've suggested building the authentication UI in .NET Core using Identity Framework, since it gives us everything we need "out of the box".
Eventually, The two Identity apps will be our SSO for all applications written against these APIs, and even those that aren't. Furthermore, I'll need to incorporate AD at some point to allow internal company users to pass through w/o manually authenticating.
What (I think) we need is the following:
Identity Server 4 running in its own container
Core Identity MVC app running in own container
Use oidc-client on front-end to authenticate
What I've done so far, is follow these two tutorials:
http://docs.identityserver.io/en/release/quickstarts/6_aspnet_identity.html#new-project-for-asp-net-identity
http://docs.identityserver.io/en/dev/quickstarts/7_javascript_client.html
My result is a running Identity Server and Identity Core MVC app running together in the same project (two different ports.) After following the JS client tutorial, I have their example code running - it redirects me to the MVC login, which authenticates against Identity Server, then returns this result:
{
"sid": "8e60eb65960d967834cb3eb4fdcbbd49",
"sub": "dfc90bd1-cad4-45d0-84bd-174e8a6ca891",
"auth_time": 1516296631,
"idp": "local",
"amr": [
"pwd"
],
"preferred_username": "me#gmail.com",
"name": "me#gmail.com"
}
Clicking logout fails, but that's because the controller example in the first tutorial doesn't include a GET for a logout, like the example controller buried in the JavaScriptClient example.
It feels like I'm getting somewhere but at the same time, I now fully realize how little I know. Could use advice, or even just a pointer to the correct Quickstarts to achieve what I'm looking for.
Base Setup
Based on what i read ideally what you want to do is break it up into 3 components
Identity Management component
API Component
MVC/MVVM component
For the Identity Management component use this quickstart as example ASPNetIdentity + IS4 EF or this one without the EF component.
Your API should be only authorizing (not authenticating) with all the authentication and registration occurring on ID4 server.
Your frontend (MVVM or MVC client) should be registered with ID4 server with all the bells and whistles as per tutorials:
MVC
Javascript
This should enable you to have a API(s) that is/are secured, single IdentityManagement source (basically build onto it to be a true SSO/Federated Gateway), all while separating the front end of your application(s).
Hope this helps.
Additional Info:
Further to the answer there are libraries you can use (or build yourself) for OIDC client for react that you can put into your front-end to help you achieve some results quicker.
FYI I use angular + id4 with AspCoreIdentity + AspCore API.
All that i need to do is create the link between javascript client and ID4 (as per tutorial and ID4 and Web API. We used the industry library for oidc-connect in angular to put in the settings for the ID4 server and Web API.
The beauty of this is once you do the basic setup on ID4 there is not much required to build on it for more advanced features.
Just keep in mind that these are separate components and treat them exactly as that. Helped me with the confusion and lack of knowledge.
Windows and AD login (future state):
Keeping these components separate, will enable you to integrate AD into the ID4 Server much easier and quicker without having to make modifications to API or Frontend app. Example leveraging Windows login here.

Best way for local HTML file to communicate with (read/write) local .xlsm Excel file

I'm a teacher. My grade book is a .xlsm file, located in my Google Drive folder. I'm building a web app, also in my Drive folder, that shows the students names arranged according to the seating chart. I want to run the app on my Android phone, and click a student's name to add a participation mark to the grade book. The app should also display the students' existing participation scores (from the grade book). What is the best way to go about accomplishing something like this?
*I initially tried to do this using another .xlsm file but, when I realized that macros don't run on the Android version of Excel, I switched to an HTML-based app. Was that the right decision?
Here is a sample .xlsm file. In this case, the app would check cell A2 to make sure it's the correct student and then both read and write to cell B2.
If Excel isn’t doing it for you on Android then I’d strongly suggest looking in to Google Sheets. Creating an app for this yourself would be a fun project, if you enjoy that sort of thing, but Google Sheets sounds like it might do the job and you can be up and running in a few minutes.
Having got that out of the way I think it would be best to clear up how web apps work, it sounds like you have some confusion about how they work (or I am from your question!).
A web app is typically made up of two parts, a client and a server.
The client requests resources from the server and the server responds. For example, the client requests the resource associated with example.com, the server is listening for this request and fulfils it by returning a string of text with some meta saying its html. The client (lets say its a browser) understands this is html and begins to parse and render it. If it hits <link> or <script> (or some other stuff) it knows to go and request more resources from a server.
The client is totally detached from the server, it has limited access to the file system and must perform tasks by asking the server to do them. It can only ask, not enforce.
Often there is a 3rd piece which is storage of some sort, this could be a file system somewhere or a database. The client is also detached from this and the server (or another service) owns and manages the storage. In your case Google Drive can act as your storage.
A web client has no direct access to your Google Drive, although if its contents is public there is likely a scheme for you to get a resource (I don't know how Google Drive works but this is fairly likely). I'm not sure it will let you write to the Drive though, not without additional permissions (granted through authentication) being acquired. Many popular frameworks and libraries will allow you to interface with Google Drive and handle the auth handshake etc etc, they are often called a driver or connector.
Very basically, you'd likely need a couple of parts:
Storage -> Connector -> Service -> Client
You can get away with putting connector and service together, and you might be able to get away with connecting direct from the client, which would save you the trouble of creating, hosting and running a service.
The last piece of the puzzle is the conversion you must do from the .xls data into something JS on the client can work with (again, there are often multiple ways of doing things, you might decide to render your page on the server).
There are many tools out there that can convert from .xls to json, which JS can then parse and use (on client or server). I have used one a couple of times but I can't remember which one right now, a quick npm search throws up a number of hits.
Your best option is not to use Google Drive at all. If you are interested in doing something like you described, I would strongly recommend using either PHP and MySQL (a popular combination) or Google Cloud Platform's App Engine (they provide a lot of help, even allowing you to easily build an app that you can sign in to from your Android device with your Google account). If you're more in the mood for Do-It-Yourself, I would probably recommend Spring Boot (These tutorials look pretty good)
When it comes to integrating with Google Drive, it is technically possible to do, but so difficult that you would be much better off writing your own system from scratch and perhaps exporting to an Excel file. (See this page for a tutorial on exporting to Excel from Java)
You have several concerns with the final solution for your problem:
Security (You don't want students breaking into it, like I probably would have done)
Accessibility (You want to get at the information on your phone and your computer)
If I was in your position, I would probably write a Spring Boot application (which can house it's own database, website and API for a computer/phone to communicate with) and an Android application that talks to it.
Also, it would be helpful to know what programming languages and/or libraries/frameworks you have used in the past in order to make better recommendations for your situation. What have you used in the past?
If you need help or have questions, just message or comment.

Wrap javascript API?

We are looking for your input regarding architectural design of a Javascript API and a .Net (Rest) API.
Background
We are building an enterprise solution with several different channels (Site, App etc) that are consuming data through a service layer, or API. The API is on one hand a .Net WebAPI that are communicating with the business layer but we are also thinking of wrapping external Javascript services (Communication with Google Maps, Google Analytics, Social Login etc) in some sort of API, or maybe SDK. The idea is to have the possibility to quick change components in the Javascript Library (Replace Social Login Provider with someone else).
What is your ideas regarding the Javascript? Should that just be a SDK that wraps other libraries?
Thank you,
Robert
I think it will depend on how much control you want to give to your client side development groups. If the UI development group is faster (and on different release schedules) than the group that manages this SDK, then the SDK will just get in the way (unless they are in lock step with the UI group). It would be better to just give them access to the server side APIs then let me compose the page as they see fit.

Categories

Resources