Release notes *2.5.6* | WLJS Notebook

Release notes 2.5.6

· 3 min read

A massive perfomance improvements: we adopted a binary format WXF (instead of JSON) for updating the data on the frontend from Wolfram Kernel, fixed UI bugs on Linux, slide cells and improved an import feature for Mathematica's notebook

Download original notebook

const balloonContainer = document.getElementById("balloon-container");

function random(num) {
  return Math.floor(Math.random() * num);
}

function getRandomStyles() {
  var r = random(255);
  var g = random(255);
  var b = random(255);
  var mt = random(200);
  var ml = random(50);
  var dur = random(5) + 5;
  return `
  background-color: rgba(${r},${g},${b},0.7);
  color: rgba(${r},${g},${b},0.7); 
  box-shadow: inset -7px -3px 10px rgba(${r - 10},${g - 10},${b - 10},0.7);
  margin: ${mt}px 0 0 ${ml}px;
  animation: float ${dur}s ease-in infinite
  `;
}

function createBalloons(num) {
  for (var i = num; i > 0; i--) {
    var balloon = document.createElement("div");
    balloon.className = "balloon";
    balloon.style.cssText = getRandomStyles();
    balloonContainer.append(balloon);
  }
}

function removeBalloons() {
  balloonContainer.style.opacity = 0;
  setTimeout(() => {
    balloonContainer.remove()
  }, 500)
}

createBalloons(10);
setTimeout(removeBalloons, 15000);

return '';

WXF Format and Compute Shaders

Compared to JSON it results in $~10-100$ speed up depending on what kind of data you is transported. Raw video streaming is now possible check out this example

v = Video["ExampleData/Caminandes.mp4"];
encoded = Map[Function[frame, NumericArray[255.0 ImageData[frame], "UnsignedInteger8", "ClipAndRound"]], VideoExtractFrames[v, Range[60]]];

index = 1;
time = AbsoluteTime[];

EventHandler["film", Function[Null,
  frame = encoded[[index]];
  index++;
  If[index >= Length[encoded], index = 1];
  
  With[{t = AbsoluteTime[]},
    fps = Round[ (*FB[*)((fps + 1/(t - time))(*,*)/(*,*)(2.0))(*]FB*)];
    time = t;
  ];
]];

frame = encoded // First;
fps = 0.4;
Graphics[{
  Inset[Image[frame // Offload, "Byte"], {0,0}, ViewMatrix->None],
  Red, Directive[FontSize->18,Bold], Text[fps // Offload, {0.1,0.2}],
  AnimationFrameListener[fps // Offload, "Event"->"film"]

}, PlotRange->{{0,1}, {0,1}}, ImageSize->{600, 500}, Controls->False]

An average result on Mac Air M1 was around 50~FPS. Which is quite large for a video playback, but this is just a benchmark 😉

OpenCL as a main language for compute shaders

Since we have a decent speed for raw raster data, one can program and run GPU code from WL and display the data as a raster image. For now OpenCLLink is the only choice if target a notebook to be crossplatform.

If you have OpenCL - compatible hardware, you can try to run this beautiful shader designed by @ in his Shader Coding Art

Needs["OpenCLLink`"]
If[!OpenCLQ[], Alert["Sorry, OpenCLLink is not supported"] // FrontSubmit]

Then run this

image = OpenCLMemoryLoad[Table[{0, 0, 0, 0}, {i, 512}, {j, 512}], "UnsignedByte[4]"];
render = OpenCLFunctionLoad[File[FileNameJoin[{"attachments", "art.cl"}]], 
  "render", {{"UnsignedByte[4]", _, "Output"}, _Integer, _Integer, "Float"}, 256, "ShellOutputFunction"->Print];

Module[{buffer, t=0.0, ev = CreateUUID[]},
  EventHandler[ev, Function[Null,
    render[image, 512, 512, t, 512 512];
    buffer = NumericArray[image // OpenCLMemoryGet, "UnsignedInteger8"];
    t += 0.1;
  ]];

  EventFire[ev, True];

  Graphics[{
    Inset[Image[buffer // Offload, "Byte"], {0,0}, ViewMatrix->None],
    AnimationFrameListener[buffer // Offload, "Event"->ev]
  }, ImageSize->{512, 512}, PlotRange->{{0,1}, {0,1}}, ImagePadding->None]
]

Check out a new section in Examples (or Demos)!

Please read our Blog for more info.

Better support for Mathematica notebooks format

This feature was highly requested by different members from the beginning of our WLJS project.

See issue

AI assistant Library

We splitted and sorted out all knowldge needed for AI to work properly with cells. Now it is available on demand to AI, which saves up a lot of tokens. You can tune this settings

Even if all of them are enabled, it doesn not mean, they consume tokens on start. Each item can be fetched AI if needed by the context of a provided problem.

Render cells inside other cells

We introduce a new view-component

CellView["
graph LR
    A[Text Header 3200 byte]  --> B[Binary Header 400 byte]
    B --> C1[240 byte 1-st trace header] --> T1[samples of 1-st trace]
    B --> C2[240 byte 2-st trace header] --> T2[samples of 1-st trace]
    B --> CN[240 byte n-st trace header] --> T3[samples of 1-st trace] 
", "Display"->"mermaid"]

(*VB[*)(FrontEndRef["ea164bfe-1a61-45eb-8280-f508462829eb"])(*,*)(*"1:eJxTTMoPSmNkYGAoZgESHvk5KRCeEJBwK8rPK3HNS3GtSE0uLUlMykkNVgEKpyYampkkpaXqGiaaGeqamKYm6VoYWRjoppkaWJiYGVkYWaYmAQCH4BV1"*)(*]VB*)

It is aimed to embed diagrams and other cells to presentations (slide cells). But, may be you will come up with other applications as well...