How HBO’s Silicon Valley built “Not Hotdog” with mobile TensorFlow, Keras & React Native

How HBO’s Silicon Valley built “Not Hotdog” with mobile TensorFlow, Keras & React Native

  • While this is a subject of some debate these days, our experiments placing BN after activation on small networks failed to converge as well.To optimize the network we used Cyclical Learning Rates and (fellow student) Brad Kenstler’s excellent Keras implementation.
  • This was hard to defend against as a) there just aren’t that many photographs of hotdogs in soft focus (we get hungry just thinking about it) and b) it could be damaging to spend too much of our network’s capacity training for soft focus, when realistically most images taken with a mobile phone will not have that feature.
  • Of the remaining 147k images, most were of food, with just 3k photos of non-food items, to help the network generalize a bit more and not get tricked into seeing a hotdog if presented with an image of a human in a red outfit.Our data augmentation rules were as follows:We applied rotations within Âą135 degrees — significantly more than average, because we coded the application to disregard phone orientation.Height and width shifts of 20%Shear range of 30%Zoom range of 10%Channel shifts of 20%Random horizontal flips to help the network generalizeThese numbers were derived intuitively, based on experiments and our understanding of the real-life usage of our app, as opposed to careful experimentation.The final key to our data pipeline was using Patrick Rodriguez’s multiprocess image data generator for Keras.
  • Phase 2 ran for 64 more epochs (4 CLR cycles with a step size of 8 epochs), with a learning rate between 0.0004 and 0.0045, on a triangular 2 policy.Phase 3 ran for 64 more epochs (4 CLR cycles with a step size of 8 epochs), with a learning rate between 0.000015 and 0.0002, on a triangular 2 policy.While learning rates were identified by running the linear experiment recommended by the CLR paper, they seem to intuitively make sense, in that the max for each phase is within a factor of 2 of the previous minimum, which is aligned with the industry standard recommendation of halving your learning rate if your accuracy plateaus during training.We were able to perform some runs on a Paperspace P5000 instance in the interest of time.
  • In those cases, we were able to double the batch size, and found that optimal learning rates for each phase were roughly double as well.Running Neural Networks on Mobile PhonesEven having designed a relatively compact neural architecture, and having trained it to handle situations it may find in a mobile context, we had a lot of work left

How Silicon Valley build the real AI app that identifies hotdogs — and not hotdogs using mobile TensorFlow, Keras & React Native.
Continue reading “How HBO’s Silicon Valley built “Not Hotdog” with mobile TensorFlow, Keras & React Native”

Techniques for decomposing React components – DailyJS – Medium

Techniques for decomposing #ReactJS components:  by @Dvtng #JavaScript

  • Here are three techniques to get you started, from the simplest to most advanced.Split the render() methodThis is the most obvious technique to apply: when a component renders too many elements, splitting those elements into logical sub-components is an easy way to simplify.A common and quick way to split the render() method is to create additional “sub-render” methods on the same class:While this can have its place, it is not a true decomposition of the component itself.
  • As a bonus, when React’s new Fiber architecture arrives, the smaller units will allow it to perform incremental rendering more effectively.Templatize components by passing React elements as propsIf a component is becoming too complex due to multiple variations or configurations, consider turning the component into a simple “template” component with one or more open “slots”.
  • Utilise the ability of React to pass elements, not just data, as props, to create a flexible template component.Another component can then have the sole responsibility of figuring out what to fill the metadata and actions slots with.Keep in mind that in JSX, anything that’s between the opening and closing tags of a component is passed as the special children prop.
  • In the comments example, this would likely be the text of the comment itself.Extract common aspects into higher-order componentsComponents can often become polluted by cross-cutting concerns that aren’t directly related to its main purpose.Suppose you wanted to send analytics data whenever a link in a Document component is clicked.
  • The obvious solution might be to add code to Document’s componentDidMount and componentWillUnmount lifecycle methods, like so:There are a few problems with this:The component now has an extra concern that obscures its main purpose: displaying a document.If the component has additional logic in those lifecycle methods, the analytics code also becomes obscured.The analytics code is not reusable.Refactoring the component is made harder, as you’d have to work around the analytics code.Decomposition of aspects such as this one can be done using higher-order components (HOCs).

React components have a lot of power and flexibility. With so many tools at your disposal, it is incredibly easy for components to grow over time, become bloated and do too much. As with any other…
Continue reading “Techniques for decomposing React components – DailyJS – Medium”

Firekit concepts to sync Firebase and redux – Tarik Huber – Medium

Firekit concepts to sync Firebase and redux  #react #firebase #javascript #redux #reactjs

  • That is one of the main concepts firekit uses to manage the sync of the firebase realtime database and the redux store.
  • Firekit allows you to make your firebase reference with all the native firebase query and filtering functions and just send the resulting reference to firekit and it will listen to all changes and sync them to the redux store.Saving only simple jsonIf using instances of classes in your library you get into the situation to save to the redux store complicated objects and functions.
  • By saving only simple json in your redux store persistence can be done however you want and with every tool and concept you wish.Persistent listenersThe main reason I choose to create firekit is that all other libraries link the whole listening cycle to a single component.
  • You can leave the listening cycle in a component, page, application or any other level you want.This approach is the same no matter if you are listening to lists or simple paths in the firebase realtime database.ConclusionFirebase is made to make our developer lives easier.
  • The main goals are to give the user maximal flexibility for using firebase and just providing easy and simple tools to sync data to the redux store.I you are interested on how the library works or want to try a real world project visit the github repo with the source code or the demo page.If you like how this library works you could put a star on the github repo đ

Firekit is a library that helps you sync your Firebase realtime database with the redux store of your react application. It uses some new approaches witch we will try to present in this article. If…
Continue reading “Firekit concepts to sync Firebase and redux – Tarik Huber – Medium”

Why Use React JS for Fast Interactive User Interfaces? — SitePoint

  • The Virtual DOM is at the core of what makes React fast at rendering user interface elements and their changes.
  • Each time there are changes to the underlying data in a React app, React creates a new Virtual DOM representation of the user interface.
  • This is where efficient diff algorithms, batching DOM read/write operations, and limiting DOM changes to the bare minimum necessary, make using React JS and its Virtual DOM a great choice for building performant apps.
  • Our First 50,000 Stars — Vjeux

    Although some would argue that all projects need React JS, I think it’s uncontroversial to say that React would be a great fit for web apps where you need to keep a complex, interactive UI in sync with frequent changes in the underlying data model.

  • Resources
    If you’re curious about how React JS and its Virtual DOM work, here’s where you can learn more:

    Conclusion
    React JS and other similar JavaScript libraries ease the development of snappy, event-driven user interfaces that are fast at responding to state changes.

Maria Antonietta Perna discusses what makes React JS a great fit for building fast UIs and introduces the concept of the Virtual DOM and how React uses it.
Continue reading “Why Use React JS for Fast Interactive User Interfaces? — SitePoint”

How to Build a ToDo App Using React, Redux, and Webpack

Build a to-do app using #ReactJS, #Redux, and #Webpack:

  • Let’s get started.TL;DRDownload the GitHub repo.Check out the demo.Getting Started:First, let’s make a new directory to build our project in and lets also make a package.json file.mkdir touch package.jsonNow, in your package.json, copy and paste the code below and then run npm install or yarn (if you’re a super cool yarn “name”: “cosmicToDo”, “version”: “1.0.0”, “description”: “A simple todo app thet uses the Cosmic JS API”, “main”: “index.js”, “scripts”: { “start”: “npm run build; node server/index.
  • /client/styles/mainSheet”, “test”: “echo \”Error: no test specified\” exit 1″ }, “author”: “”, “license”: “ISC”, “dependencies”: { “axios”: “^0.16.1”, “body-parser”: “^1.17.1”, “css-loader”: “^0.28.0”, “express”: “^4.15.2”, “node-sass”: “^4.5.2”, “react”: “^15.5.4”, “^15.5.2”, “^15.5.2”, “react-dom”: “^15.5.4”, “react-redux”: “^5.0.4”, “react-router”: “^3.0.0”, “reactstrap”: “^4.5.0”, “redux”: “^3.6.0”, “redux-logger”: “^3.0.1”, “redux-thunk”: “^2.2.0”, “sass-loader”: “^6.0.3”, “style-loader”: “^0.16.1”, “babel”: “^6.5.2”, “babel-core”: “^6.18.0”, “babel-loader”: “^6.2.7”, “babel-preset-es2015”: “^6.18.0”, “babel-preset-react”: “^6.16.0”, “volleyball”: “^1.4.1”, “webpack”: “^2.2.1”, “webpack-livereload-plugin”: “^0.10.0” }, “devDependencies”: { “chai”: “^3.5.0”, “cross-env”: “^3.1.4”, “mocha”: “^3.1.2”, “nodemon”: “^1.11.0”, “supertest”: “^2.0.1”, “supertest-as-promised”: “^4.0.1” }}What we’re installing and why:We’re going to use the axios library to handle our requests to our Cosmic JS bucket.We’re installing react and react-dom to build our react components.We are going to use redux, react-redux, redux-logger, and redux-thunk to help us implement what is called the Flux architecture.The only thing worth mentioning in the dev dependencies is webpack and volleyball.
  • /reducer’;import thunkMiddleware from ‘redux-thunk’;import {createLogger} from ‘redux-logger’;const store = createStore( reducer, applyMiddleware( createLogger(), thunkMiddleware ));export default store;What’s going on here:We are setting up our redux “store” so that we can pass data down through “props” into whatever components we want (I am going to assume you have some working knowledge of how the flux architecture functions, if you do not understand this it is OK, just check the flux architecture link above).
  • /components/Home’;import {Provider} from ‘react-redux’;import store from Provider store={store} Home / /Provider, going on here:We are telling ReactDOM to target our “root” div from our index.html file and pop in our Home/ react component (which we will build out in our next step).
  • /Task’;class Home extends Component { constructor(props){ super(props); } componentDidMount(){ getAllTasks(); } render() { return ( div div className=”container” div className=”row” div className=”col-xs-12″ h1Cosmic To-Do App!!

In this tutorial I’m going to show you how to create a simple “ToDo” app using React, Redux, a little bit of Node, and Cosmic JS. For the sake of understanding how to consume Restful API’s, this…
Continue reading “How to Build a ToDo App Using React, Redux, and Webpack”

Optimizing React Rendering (Part 1) – Flexport Engineering

Optimizing React Rendering (Part 1)  #Reactjs #Javascript #Webdev

  • PureComponent does a shallow object comparison on the props, and since you are passing in the same object reference, shouldComponentUpdate will return false and the updated data will not be rendered.This means that if any part of your app mutates data that needs to be rendered, PureComponent puts you at risk of displaying stale data.
  • This is by far the biggest blocker because it results in incorrect UI behavior, and it is outside the control of your component.Fix: Never mutate values used as React props or state.
  • Even if some ancestor component triggers a re-render, PureParent will not re-render because neither its state or props has changed.This gotcha also leads to incorrect UI behavior, but the issue is scoped to the component itself, making it easy to fix.Fix: Extract data dependency into state or props, and update state or props when the data changes.Object copyingQ: What happens when Parent is re-rendered with an unchanged props.dataList?A: PureChild is re-rendered wastefully because filter returns a new object, which tricks PureChild into thinking that the prop has changed.This problem is triggered by calling any function that creates a new object or using an inline object literal in render.Fix: Cache your derived data calculations.
  • A: PureChild is re-rendered wastefully because arrow functions and Function.prototype.bind return new function instances, which tricks PureChild into thinking that the onClick handler has changed.Fix: Don’t use arrow functions and bind in render.
  • When those props change, PureChild will re-render wastefully.Fix: Unless you’re writing some sort of higher-order-component, don’t be lazy and be explicit about the props that you are passing.ConclusionTurns out our app is littered with every single one of these gotchas, and is especially dependent on mutation side-effects.

We migrated our web app to React almost 3 years ago, and since React performs extremely well out of the box, optimizing performance was not something we had to worry about. However, as our…
Continue reading “Optimizing React Rendering (Part 1) – Flexport Engineering”

Why Use React JS for Fast Interactive User Interfaces? — SitePoint

Why Use #React #JS for Fast Interactive User Interfaces?  #reactjs #webdev #javascript #jsx

  • The Virtual DOM is at the core of what makes React fast at rendering user interface elements and their changes.
  • Each time there are changes to the underlying data in a React app, React creates a new Virtual DOM representation of the user interface.
  • This is where efficient diff algorithms, batching DOM read/write operations, and limiting DOM changes to the bare minimum necessary, make using React JS and its Virtual DOM a great choice for building performant apps.
  • Our First 50,000 Stars — Vjeux

    Although some would argue that all projects need React JS, I think it’s uncontroversial to say that React would be a great fit for web apps where you need to keep a complex, interactive UI in sync with frequent changes in the underlying data model.

  • Resources
    If you’re curious about how React JS and its Virtual DOM work, here’s where you can learn more:

    Conclusion
    React JS and other similar JavaScript libraries ease the development of snappy, event-driven user interfaces that are fast at responding to state changes.

Maria Antonietta Perna discusses what makes React JS a great fit for building fast UIs and introduces the concept of the Virtual DOM and how React uses it.
Continue reading “Why Use React JS for Fast Interactive User Interfaces? — SitePoint”