I tried to load up into a local webpage #tensorflow/tfjs-tflite in the following configuration:
import "#tensorflow/tfjs-backend-cpu";
import * as tf from "#tensorflow/tfjs-core";
import * as tflite from "#tensorflow/tfjs-tflite";
as described in https://github.com/tensorflow/tfjs/tree/master/tfjs-tflite#via-npm
yet I'm getting this error when loading:
EDIT
After further testing, I'm able to load the modules via the CDN:
<!-- Import #tensorflow/tfjs-core -->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs-core"></script>
<!-- Adds the CPU backend -->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs-backend-cpu"></script>
<!--
Import #tensorflow/tfjs-tflite
Note that we need to explicitly load dist/tf-tflite.min.js so that it can
locate WASM module files from their default location (dist/).
-->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs-tflite/dist/tf-tflite.min.js"></script>
Related
Running a vuejs application as component of a website, using vue-material theming css create conflict with existing css.
By default, vue-material add a class on html <html class="md-theme-default"> to apply its style but I am trying to change that by only applying on a specific DOM element which should be my vue app.
Coming from material-ui, what I am looking for is the equivalent of <ThemeProvider> component.
Also, I only import a few components doing the following:
import { MdTabs, MdRadio } from "vue-material/dist/components";
import "vue-material/dist/vue-material.min.css";
import "./theme.scss";
Vue.use(MdRadio);
Vue.use(MdTabs);
Theme.scss redefine colors to match my theme.
#import "./variables";
#import "~vue-material/dist/theme/engine"; // Import the theme engine
#include md-register-theme("default", (
primary: $purple,
accent: $purple
));
#import "~vue-material/dist/theme/all"; // Apply the theme
I am using single .vue files with the following template synthax:
<template>
<div>
<md-radio v-model="radio" :value="objA">20€ / an</md-radio>
<md-radio v-model="radio" :value="objB">2€ / mois</md-radio>
</div>
</template>
I want to write vue demo for education teaching purpose, in order to focus only the vue part, I don't want to introduce npm, bundler like webpack or browserify and so on.
So I write code using babel-standalone. I also want to use vue-class-component. But now I could not use the esm build of vue and vue-class-component, in short I want to support write code like this in my main.js
import Vue from '../vender/vue.esm.browser';
import Component from '../vender/vue-class-component.esm';
#Component
class App extends Vue {
//......
}
If I wrote the code like above, I got Uncaught ReferenceError: require is not defined eror.
Now I can make it work using the following style, but using the Component of vue-class-component is ugly.
<!-- the html contain these scripts -->
<script src="https://unpkg.com/vue#2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-class-component#7.1.0/dist/vue-class-component.js"></script>
<script src="vender/babel.min.js"></script>
<!-- fix regenerator not defined -->
<script src="vender/regenerator-runtime.js"></script>
<script src="js/main.js"
data-plugins="transform-runtime,transform-class-properties,transform-decorators-legacy,transform-regenerator"
data-presets="es2015,stage-1" type="text/babel">
</script>
// js/main.js
const Component = VueClassComponent.default;
#Component
class App extends Vue {
//......
}
more details can found on https://github.com/liudonghua123/todos/tree/master/todos-vue-class-component
You need to add to data-plugins: "transform-es2015-modules-umd"
I am trying to load the code-mirror in a component.
import 'codemirror-cdn';
import {codemirror} from 'https://cdn.jsdelivr.net/npm/vue-codemirror#4.0.6/dist/vue-codemirror.min.js';
loading it via above statements but getting error
vue-router.js:1927 SyntaxError: The requested module 'https://cdn.jsdelivr.net/npm/vue-codemirror#4.0.6/dist/vue-codemirror.min.js' does not provide an export named 'codemirror'
If using the CDN, this should be included in the template tag:
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue-codemirror#4.0.6/dist/vue-codemirror.min.js"></script>
I'm trying to use ports with elm-app. Previously I used elm-live and a vanilla setup, and was able to insert ports like this:
index.html
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script>
window.addEventListener("load", function(event) {
var app = Elm.Main.fullscreen(localStorage.session || null);
app.ports.storeSession.subscribe(function(session) {
localStorage.session = session;
});
...
This worked, and elm-live seemed to embed elm.js in the <head> of index.html.
When I try to use this setup for ports with create-elm-app, however, the compiled javascript is embedded at the bottom of the <body>, so adding the <script> as I did results in this:
(index):68 Uncaught ReferenceError: Elm is not defined
at (index):68
What is the best way to embed the JS ports?
The halfzebra/create-elm-app project sets things up a little differently. You'll have to modify the src/index.js file like the example shows in the documentation on Javascript Interop
import './main.css';
import { Main } from './Main.elm';
import registerServiceWorker from './registerServiceWorker';
var app = Main.embed(document.getElementById('root'));
registerServiceWorker();
// ports related code
app.ports.windowTitle.subscribe(function(newTitle){
window.document.title = newTitle;
});
I'm trying to bundle only required Font Awesome 5 icons via webpack, but the icons are not replaced in the DOM.
I've added all required packages from the documentation:
yarn add -D #fortawesome/fontawesome
yarn add -D #fortawesome/fontawesome-pro-solid
yarn add -D #fortawesome/fontawesome-pro-regular
yarn add -D #fortawesome/fontawesome-free-brands
The following custom JS is included:
"use strict";
import fontawesome from '#fortawesome/fontawesome';
import faCheck from '#fortawesome/fontawesome-pro-regular/faCheck';
fontawesome.icon(faCheck);
function iconsDoneRendering () {
console.log('Icons have rendered'); // No output in console
}
fontawesome.dom.i2svg({
callback: iconsDoneRendering,
})
The HTML template:
<head>
<link rel="stylesheet" href="/css/app.css?v2.1.4"> <!-- contains fa-svg-with-js.css -->
</head>
<body>
<ul class="fa-ul">
<li><span class="fa-li"><i class="far fa-phone"></i></span>List item 1</li>
<li><span class="fa-li"><i class="far fa-check"></i></span>List item 2</li>
</ul>
<script src="/js/app.js?v2.1.4"></script>
</body>
The svg path is inside the bundled JS file, but I can't figure out which method needs to be called.
The following JS code solves the problem (since v5.0.2):
"use strict";
import fontawesome from '#fortawesome/fontawesome';
import faCheck from '#fortawesome/fontawesome-pro-regular/faCheck';
import faPhone from '#fortawesome/fontawesome-pro-regular/faPhone';
fontawesome.library.add(faCheck,faPhone);
I realize this is already answered, but I'd like to give some visibility to the full solution since the information above does not include how to execute the SVG icon replacement.
If you're loading Font Awesome 5 via NPM & WebPack for use in front-end HTML like I am, you will need to do something like this in your JS that's included in your bundle:
"use strict";
// Import FontAwesome: https://fontawesome.com/how-to-use/use-with-node-js
import fontawesome from '#fortawesome/fontawesome';
// This enables using FontAwesome in CSS pseudo elements
// see: https://fontawesome.com/how-to-use/svg-with-js#pseudo-elements
fontawesome.config.searchPseudoElements = true;
// Icons should be imported individually to keep bundle size down
import faCheck from '#fortawesome/fontawesome-pro-regular/faCheck';
import faPhone from '#fortawesome/fontawesome-pro-solid/faPhone';
fontawesome.library.add(faCheck, faPhone);
// If really necessary, entire styles can be loaded instead of specifying individual icons
//import solid from '#fortawesome/fontawesome-pro-solid';
//fontawesome.library.add(solid);
// Execute SVG replacement
fontawesome.dom.i2svg();
That last line is key, you have to execute SVG icon replacement manually.
We just released version 5.0.2 and updated the #fortawesome NPM packages to fix a few bugs related to this. Make sure you upgrade before you try anything else.
The missing step of the above example is to add the icon to the library:
fontawesome.library.add(faCheck)
Try to use
fontawesome.library.add(faCheck);
instead of
fontawesome.icon(faCheck);
If it does not work, please update your question with your DOM template, to see how it's defined in there.