offline demo

[xptosoft]

First of all thanks, and congratulations to the team of GoogleCreativeLabs ! A few questions regarding a classroom demo:

1) I would like to demo teachable machine offline. I plan to use a few Raspberry PI's in a classroom without WIFI. I would like to use and tweak the existent online demo e.g. teachablemachine.withgoogle.com/train (html/js), is the content/source available ? If not is there a similar project/framework/demo public available ?

2) I plan to use a websocket PI Camera is working from the localhost but does not work from a local lan IP, is a security directive (google web code) ?

Thanks for reading.

[HalfdanJ]

Hi,

1. We do not support offline loading of the frontend as it is now.
2. For websockets, we have also experience that local lan ip's can be tricky. Google Chrome requires the websocket to be hosted with SSL (so wss://) if its not localhost. I'm aware of 2 ways around this
   • Make a ssh tunnel to the remote IP address forwarding the websocket port
   • Host the websocket with a self-signede certificate (bit tricky to setup)

I recommend using the first solution. This is what we did in the coral sorter project: https://coral.ai/projects/teachable-sorter/#42-connect-your-raspberry-pis-camera-output-to-teachable-machine

[ppedro74]

HalfdanJ,

I have a secure websocket camera with a self signed certificate through a local certificate store plus includes subject alternate names and it works on chrome. But I can't get it to work through TM demo and I believe the problem is in TM demo.

javascript console: index.bundle.js:3179 Mixed Content: The page at 'https://teachablemachine.withgoogle.com/train/image?network=true' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://rpi-buster1:443/'. This request has been blocked; this endpoint must be available over WSS. connect @ index.bundle.js:3179 handleEvent @ index.bundle.js:2 boundHandleEvent @ index.bundle.js:2 click @ index.bundle.js:3294 handleEvent @ index.bundle.js:2 boundHandleEvent @ index.bundle.js:2 index.bundle.js:3179 Uncaught DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS. at HTMLElement.connect (https://teachablemachine.withgoogle.com/index.bundle.js:3179:2059) at y.handleEvent (https://teachablemachine.withgoogle.com/index.bundle.js:2:823386) at HTMLElement.boundHandleEvent (https://teachablemachine.withgoogle.com/index.bundle.js:2:822749) at HTMLElement.click (https://teachablemachine.withgoogle.com/index.bundle.js:3294:36490) at y.handleEvent (https://teachablemachine.withgoogle.com/index.bundle.js:2:823386) at HTMLButtonElement.boundHandleEvent (https://teachablemachine.withgoogle.com/index.bundle.js:2:822749) connect @ index.bundle.js:3179 handleEvent @ index.bundle.js:2 boundHandleEvent @ index.bundle.js:2 click @ index.bundle.js:3294 handleEvent @ index.bundle.js:2 __boundHandleEvent @ index.bundle.js:2

Initially i had a secure server running on a different port e.g. 8000 then i changed to 443 but still no luck.

it seems "ws://" is hardcoded in the js code: this.__socket = new WebSocket("ws://" + this.address + ":" + this.port),

suggestion: would be nice to allow secure sockets on any port, maybe, the decision of ws vs wss should based on the hostname specified e.g. ws for localhost, 127/8 or ::1 and wss for all the other values.

[HalfdanJ]

Aaah I see. Ill take a look into this.

[HalfdanJ]

Good catch,

I'm going to do this instead

        let address = this.address;
        if (!address.match(/.+:\/\/.+/im)) {
            address = 'ws://' + address;
        }
        this.__socket = new WebSocket(address + ':' + this.port);

This should allow that if you specify a protocol it will use it, or default to ws:// if not.

[HalfdanJ]

The websocket fix has been pushed now.