diff --git a/demos/src/index.js b/demos/src/index.js
index 449bf1b..a10b16b 100644
--- a/demos/src/index.js
+++ b/demos/src/index.js
@@ -1,4 +1,4 @@
-/* global Vue, VueMdl */
+/* global Vue, VueMdl, WebGLRenderingContext */
 
 import './index.css'
 
@@ -18,8 +18,23 @@ Vue.use(VueMdl.default)
 
 const app = new Vue({
   el: '#app',
-  data: {
-    currentView: 'home'
+
+  data: function () {
+    return {
+      currentView: 'home',
+      hasWebgl: true
+    }
+  },
+
+  created: function () {
+    const canvas = document.createElement('canvas')
+    const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl')
+    // Report the result.
+    if (gl && gl instanceof WebGLRenderingContext) {
+      this.hasWebgl = true
+    } else {
+      this.hasWebgl = false
+    }
   }
 })
 
diff --git a/demos/src/mnist-cnn.js b/demos/src/mnist-cnn.js
index 486ba7c..f283e34 100644
--- a/demos/src/mnist-cnn.js
+++ b/demos/src/mnist-cnn.js
@@ -5,23 +5,20 @@ import debounce from 'lodash/debounce'
 import range from 'lodash/range'
 import * as utils from './utils'
 
-const MODEL_CONFIG = {
-  filepaths: {
-    model: '/demos/data/mnist_cnn/mnist_cnn.json',
-    weights: '/demos/data/mnist_cnn/mnist_cnn_weights.buf',
-    metadata: '/demos/data/mnist_cnn/mnist_cnn_metadata.json'
-  },
-  gpu: false
+const MODEL_FILEPATHS_DEV = {
+  model: '/demos/data/mnist_cnn/mnist_cnn.json',
+  weights: '/demos/data/mnist_cnn/mnist_cnn_weights.buf',
+  metadata: '/demos/data/mnist_cnn/mnist_cnn_metadata.json'
 }
 
-if (process.env.NODE_ENV === 'production') {
-  Object.assign(MODEL_CONFIG, {
-    filepaths: {
-      model: 'demos/data/mnist_cnn/mnist_cnn.json',
-      weights: 'https://transcranial.github.io/keras-js-demos-data/mnist_cnn/mnist_cnn_weights.buf',
-      metadata: 'demos/data/mnist_cnn/mnist_cnn_metadata.json'
-    }
-  })
+const MODEL_FILEPATHS_PROD = {
+  model: 'demos/data/mnist_cnn/mnist_cnn.json',
+  weights: 'https://transcranial.github.io/keras-js-demos-data/mnist_cnn/mnist_cnn_weights.buf',
+  metadata: 'demos/data/mnist_cnn/mnist_cnn_metadata.json'
+}
+
+const MODEL_CONFIG = {
+  filepaths: (process.env.NODE_ENV === 'production') ? MODEL_FILEPATHS_PROD : MODEL_FILEPATHS_DEV
 }
 
 const LAYER_DISPLAY_CONFIG = {
@@ -81,11 +78,13 @@ const LAYER_DISPLAY_CONFIG = {
  *
  */
 export const MnistCnn = Vue.extend({
+  props: ['hasWebgl'],
+
   template: require('raw!./mnist-cnn.template.html'),
 
   data: function () {
     return {
-      model: new KerasJS.Model(MODEL_CONFIG),
+      model: new KerasJS.Model(Object.assign({ gpu: this.hasWebgl }, MODEL_CONFIG)),
       modelLoading: true,
       input: new Float32Array(784),
       output: new Float32Array(10),
@@ -94,7 +93,7 @@ export const MnistCnn = Vue.extend({
       layerDisplayConfig: LAYER_DISPLAY_CONFIG,
       drawing: false,
       strokes: [],
-      useGpu: MODEL_CONFIG.gpu
+      useGpu: this.hasWebgl
     }
   },
 
diff --git a/demos/src/mnist-cnn.template.html b/demos/src/mnist-cnn.template.html
index 2d4b1e7..c44c38b 100644
--- a/demos/src/mnist-cnn.template.html
+++ b/demos/src/mnist-cnn.template.html
@@ -30,7 +30,11 @@
       </div>
     </div>
     <div class="column is-2 controls-column">
-      <mdl-switch :checked.sync="useGpu" @click="toggleGpu">Use GPU</mdl-switch>
+      <mdl-switch
+        :checked.sync="useGpu"
+        :disabled="modelLoading || !hasWebgl"
+        @click="toggleGpu"
+      >Use GPU</mdl-switch>
     </div>
     <div class="column output-column">
       <div class="output">
diff --git a/demos/src/mnist-vae.js b/demos/src/mnist-vae.js
index 85ed37a..d6999db 100644
--- a/demos/src/mnist-vae.js
+++ b/demos/src/mnist-vae.js
@@ -3,23 +3,20 @@ import './mnist-vae.css'
 
 import * as utils from './utils'
 
-const MODEL_CONFIG = {
-  filepaths: {
-    model: '/demos/data/mnist_vae/mnist_vae.json',
-    weights: '/demos/data/mnist_vae/mnist_vae_weights.buf',
-    metadata: '/demos/data/mnist_vae/mnist_vae_metadata.json'
-  },
-  gpu: false
+const MODEL_FILEPATHS_DEV = {
+  model: '/demos/data/mnist_vae/mnist_vae.json',
+  weights: '/demos/data/mnist_vae/mnist_vae_weights.buf',
+  metadata: '/demos/data/mnist_vae/mnist_vae_metadata.json'
 }
 
-if (process.env.NODE_ENV === 'production') {
-  Object.assign(MODEL_CONFIG, {
-    filepaths: {
-      model: 'demos/data/mnist_vae/mnist_vae.json',
-      weights: 'https://transcranial.github.io/keras-js-demos-data/mnist_vae/mnist_vae_weights.buf',
-      metadata: 'demos/data/mnist_vae/mnist_vae_metadata.json'
-    }
-  })
+const MODEL_FILEPATHS_PROD = {
+  model: 'demos/data/mnist_vae/mnist_vae.json',
+  weights: 'https://transcranial.github.io/keras-js-demos-data/mnist_vae/mnist_vae_weights.buf',
+  metadata: 'demos/data/mnist_vae/mnist_vae_metadata.json'
+}
+
+const MODEL_CONFIG = {
+  filepaths: (process.env.NODE_ENV === 'production') ? MODEL_FILEPATHS_PROD : MODEL_FILEPATHS_DEV
 }
 
 const LAYER_DISPLAY_CONFIG = {
@@ -59,11 +56,13 @@ const LAYER_DISPLAY_CONFIG = {
  *
  */
 export const MnistVae = Vue.extend({
+  props: ['hasWebgl'],
+
   template: require('raw!./mnist-vae.template.html'),
 
   data: function () {
     return {
-      model: new KerasJS.Model(MODEL_CONFIG),
+      model: new KerasJS.Model(Object.assign({ gpu: this.hasWebgl }, MODEL_CONFIG)),
       modelLoading: true,
       output: new Float32Array(27 * 27),
       crosshairsActivated: false,
@@ -71,7 +70,7 @@ export const MnistVae = Vue.extend({
       position: [60, 20],
       layerResultImages: [],
       layerDisplayConfig: LAYER_DISPLAY_CONFIG,
-      useGpu: MODEL_CONFIG.gpu
+      useGpu: this.hasWebgl
     }
   },
 
diff --git a/demos/src/mnist-vae.template.html b/demos/src/mnist-vae.template.html
index efcd7e7..0341f21 100644
--- a/demos/src/mnist-vae.template.html
+++ b/demos/src/mnist-vae.template.html
@@ -33,7 +33,11 @@
       </div>
     </div>
     <div class="column is-2 controls-column">
-      <mdl-switch :checked.sync="useGpu" @click="toggleGpu">Use GPU</mdl-switch>
+      <mdl-switch
+        :checked.sync="useGpu"
+        :disabled="modelLoading || !hasWebgl"
+        @click="toggleGpu"
+      >Use GPU</mdl-switch>
       <div class="coordinates">
         <div class="coordinates-x">x: {{ inputCoordinates[0] < 0 ? inputCoordinates[0].toFixed(2) : inputCoordinates[0].toFixed(3) }}</div>
         <div class="coordinates-y">y: {{ inputCoordinates[1] < 0 ? inputCoordinates[1].toFixed(2) : inputCoordinates[1].toFixed(3) }}</div>
diff --git a/demos/src/resnet50.js b/demos/src/resnet50.js
index 92d56d7..e11da06 100644
--- a/demos/src/resnet50.js
+++ b/demos/src/resnet50.js
@@ -5,25 +5,27 @@ import ndarray from 'ndarray'
 import ops from 'ndarray-ops'
 import * as utils from './utils'
 
-const MODEL_CONFIG = {
-  filepaths: {
-    model: '/demos/data/resnet50/resnet50.json',
-    weights: '/demos/data/resnet50/resnet50_weights.buf',
-    metadata: '/demos/data/resnet50/resnet50_metadata.json'
-  },
-  gpu: false
+const MODEL_FILEPATHS_DEV = {
+  model: '/demos/data/resnet50/resnet50.json',
+  weights: '/demos/data/resnet50/resnet50_weights.buf',
+  metadata: '/demos/data/resnet50/resnet50_metadata.json'
 }
 
-if (process.env.NODE_ENV === 'production') {
-  Object.assign(MODEL_CONFIG, {
-    filepaths: {
-      model: 'demos/data/resnet50/resnet50.json',
-      weights: 'https://transcranial.github.io/keras-js-demos-data/resnet50/resnet50_weights.buf',
-      metadata: 'demos/data/resnet50/resnet50_metadata.json'
-    }
-  })
+const MODEL_FILEPATHS_PROD = {
+  model: 'demos/data/resnet50/resnet50.json',
+  weights: 'https://transcranial.github.io/keras-js-demos-data/resnet50/resnet50_weights.buf',
+  metadata: 'demos/data/resnet50/resnet50_metadata.json'
 }
 
+const MODEL_CONFIG = {
+  filepaths: (process.env.NODE_ENV === 'production') ? MODEL_FILEPATHS_PROD : MODEL_FILEPATHS_DEV
+}
+
+const IMAGE_URL_LIST = [
+  { name: 'cat', value: 'http://i.imgur.com/CzXTtJV.jpg' },
+  { name: 'dog', value: 'URL2' }
+]
+
 const LAYER_DISPLAY_CONFIG = {
 }
 
@@ -33,24 +35,23 @@ const LAYER_DISPLAY_CONFIG = {
  *
  */
 export const ResNet50 = Vue.extend({
+  props: ['hasWebgl'],
+
   template: require('raw!./resnet50.template.html'),
 
   data: function () {
     return {
-      model: new KerasJS.Model(MODEL_CONFIG),
+      model: new KerasJS.Model(Object.assign({ gpu: this.hasWebgl }, MODEL_CONFIG)),
       modelLoading: true,
       imageURLInput: null,
       imageURLSelect: null,
-      imageURLSelectList: [
-        { name: 'cat', value: 'http://i.imgur.com/CzXTtJV.jpg' },
-        { name: 'dog', value: 'URL2' }
-      ],
+      imageURLSelectList: IMAGE_URL_LIST,
       imageLoading: false,
       imageLoadingError: false,
       output: new Float32Array(1000),
       layerResultImages: [],
       layerDisplayConfig: LAYER_DISPLAY_CONFIG,
-      useGpu: MODEL_CONFIG.gpu
+      useGpu: this.hasWebgl
     }
   },
 
diff --git a/demos/src/resnet50.template.html b/demos/src/resnet50.template.html
index 48ae353..7b112d2 100644
--- a/demos/src/resnet50.template.html
+++ b/demos/src/resnet50.template.html
@@ -37,7 +37,11 @@
       </div>
     </div>
     <div class="column is-2 controls-column">
-      <mdl-switch :checked.sync="useGpu" :disabled="modelLoading" @click="toggleGpu">Use GPU</mdl-switch>
+      <mdl-switch
+        :checked.sync="useGpu"
+        :disabled="modelLoading || !hasWebgl"
+        @click="toggleGpu"
+      >Use GPU</mdl-switch>
     </div>
     <div class="column output-column">
       <div class="output">
diff --git a/index.html b/index.html
index 699606b..a650379 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,7 @@
           <menu :current-view="currentView"></menu>
         </div>
         <div class="column is-9">
-          <component :is="currentView"></component>
+          <component :is="currentView" :has-webgl="hasWebgl"></component>
         </div>
       </div>
     </div>