MLBlock is updating with new features based on user feedback. It will become a standalone application written in Typescript with a NextJS frontend and backend bundled together as a Docker container. The update will focus on peer-to-peer connectivity, Google Colab integration, Home Assistant integration, and support for application updates. Developers can look forward to using MLBlock via the command line with a new MLBlock CLI.

2. ml.in.th
MLBlock

3. Update from feedbacks and
reveal new features

4. Update from feedbacks and
reveal new features

5. What is MLBlock?

7. <canvas />

8. void setup() {
}
void draw() {
}
=>

9. What’s new today?

10. MLBlock: Designing principles
•Fun
•Innovative
•Be everywhere

11. Fun & Innovative

12. Be everywhere?

13. Peer-to-peer connection
-Mobile
-Another application; VLC / CCTV
-Youtube
-User device
P2P Connectivity

16. Processing power limitation?

17. No storage in MLBlock?

18. What if, I am A Google Colab Lover?

19. Google Colab integration :)

20. Colab Demo

21. How it’s works?
from google.colab import output
def pyfunc(data):
# do something
output.register_callback('funA', pyfunc)
js = Javascript('''
invoke = google.colab.kernel.invokeFunction;
output.register_callback('funcA', funcA)
butA = document.createElement("button");
butA.innerHTML = “Save”;
# Register onclick event
butA.onclick = async function () {
await invoke("funcA", [await save()], {});
}
document.body.appendChild(butA);
''')

22. How it’s works?
from google.colab import output
def pyfunc(data):
# do something
output.register_callback('funA', pyfunc)
js = Javascript('''
invoke = google.colab.kernel.invokeFunction;
output.register_callback('funcA', funcA)
butA = document.createElement("button");
butA.innerHTML = “Save”;
# Register onclick event
butA.onclick = async function () {
await invoke("funcA", [await save()], {});
}
document.body.appendChild(butA);
''')

23. Still need a server side?

24. Need more integrations?

25. Home assistant Integration

26. Application updates support

27. Home assistant Integration

28. Developer information (Dockerfile)
ARG BUILD_FROM=ghcr.io/hassio-addons/debian-base/aarch64:5.2.0
FROM ${BUILD_FROM}
# Set shell
SHELL ["/bin/bash", "-o", "pipefail", "-c"]
ARG BUILD_ARCH
WORKDIR /app
RUN apt-get update
RUN apt-get install -y --no-install-recommends build-essential nginx
RUN curl -sL https://deb.nodesource.com/setup_12.x | bash -
RUN apt-get install -y --no-install-recommends nodejs git
COPY package.json ./
RUN npm install
RUN npm i -g serve
RUN npm cache clean --force
&& rm -fr
/tmp/*

29. With a local server

30. Need a headless processor?

31. MLBlock CLI

32. Developer information
"devDependencies": {
"@types/node": "^16.10.2",
"@types/yargs": "^17.0.3",
"tslib": "^2.3.1",
"typescript": "^4.4.3"
},
"bin": {
"mlblock": "./build/cli.js"
},
"dependencies": {
"axios": "^0.22.0",
"playwright": "^1.16.2",
"yargs": "^17.2.1"
},

33. Recap with an overview

34. New version of MLBlock
A standalone edition
• Written in Typescript (Javascript is still available)
• Porting an ecosystem to NextJS (ReactJS)
• Packing frontend & backend
• Run as a docker container

35. Quick tour of NextJS
• Pages
• APIs

36. Quick tour of NextJS
• Components
• Hooks and
State management

37. Quick tour of NextJS
• Components
• Hooks and
State management

38. MLBlock standalone

39. Sounds good?

40. This is enough?

41. No

42. What a SURPRISE!!

46. Developer information
[1] echo -n "Hello, this is Nat :)" | sha256sum
ab93b250c0819dfea59d0bb420b6066d652f14088d0295e9053c650068c09bd2
[2] echo -n "Hello, this is Nat :)[publickey]” | sha256sum
50dc82f2f73411b2f82c87945fb11d2c236065fdaf9f4ac9cae44f9bfd16d2f8
[3] DATA=“Hello, this is Nat :)[publickey]hash”
echo -n "$DATA" | openssl pkeyutl -sign -in - -inkey ~/.ssh/id_rsa | base64 >
encrypted.txt

48. Stay tuned!
https://forms.gle/qVs6Nwycn1jgucLF6