maxim-denoising document and code are 404 #1287

ivysrono · 2024-03-14T13:42:43Z

ivysrono
Mar 14, 2024

@upscalerjs/maxim-denoising - npm links are 404.

I find https://upscalerjs.com/models/available/denoising/maxim-denoising/

However, the script tag error: Couldn't find the requested file /dist/umd/index.min.js in @upscalerjs/maxim-denoising.

Maybe it is https://cdn.jsdelivr.net/npm/@upscalerjs/maxim-denoising@latest/dist/umd/models/maxim-denoising/src/umd.min.js?

thekevinscott · 2024-03-15T10:46:52Z

thekevinscott
Mar 15, 2024
Maintainer

Thanks for the report, @ivysrono .

It appears that there are two bugs in the documentation:

As you say, the correct link is https://cdn.jsdelivr.net/npm/@upscalerjs/maxim-denoising@0.1.0/dist/umd/models/maxim-denoising/src/umd.min.js
The correct model name is window.MaximDenoising

A full example is here (and here is a link to a code sandbox):

<html>
<head>
  <title>@upscalerjs/maxim-denoising</title>
  <style>
    body {
      padding: 40px;
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    }
    button {
      margin-top: 20px;
      display: block;
      padding: 10px 40px;
    }
    #target {
      background: #EEE;
      border: 1px solid #DDD;
      display: inline-block;
      width: 256px;
      height: 256px;
    }
    #flower {
      border: 1px solid #DDD;
    }
    pre {
      padding: 10px;
      background: #EEE;
      border: 1px solid #DDD;
      border-radius: 5px;
    }
    table td {
      vertical-align: top;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><td>Original</td><td>Upscaled</td></tr>
    </thead>
    <tbody>
      <tr><td>
      <img src="./fixture.png" id="fixture" />
        </td>
      <td>
        <div id="target">

        </div>
      </td>
    </tr>
      </tbody>
    </table>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@upscalerjs/maxim-denoising@0.1.0/dist/umd/models/maxim-denoising/src/umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/upscaler@latest/dist/browser/umd/upscaler.min.js"></script>
    <script>
const upscaler = new window.Upscaler({
  model: window.MaximDenoising,
});
const fixture = document.getElementById("fixture");

upscaler
  .upscale(fixture, { patchSize: 64, padding: 2, progress: console.log })
  .then((upscaledImgSrc) => {
    const img = document.createElement("img");
    img.src = upscaledImgSrc;
    document.getElementById("target").appendChild(img);
  });

  </script>
  </body>
</html>

I will open a ticket to get this fixed across the MAXIM models. Thanks again for the report! Let me know if you're continuing to have issues.

0 replies

ivysrono · 2024-03-16T07:22:46Z

ivysrono
Mar 16, 2024
Author

first question:

<script src="https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
<script src="https://unpkg.com/@upscalerjs/maxim-denoising@latest/dist/umd/models/maxim-denoising/src/umd.min.js"></script>
<script src="https://unpkg.com/upscaler@latest/dist/browser/umd/upscaler.min.js"></script>

model.json and group1-shard*of22.bin still request cdn.jsdelivr.com.

2 replies

thekevinscott Mar 16, 2024
Maintainer

Yes - the model files are loaded automatically by the Upscaler and defaults to jsdelivr.com first.

Can I ask why you want to prioritize the unpkg CDN over jsdelivr?

If you want to serve them from unpkg you'll want to follow the instructions for hosting a custom model here (specifically you'll want to update the path argument).

ivysrono Mar 17, 2024
Author

Can I ask why you want to prioritize the unpkg CDN over jsdelivr?

JSDelivr CDN not accessible in China

ivysrono · 2024-03-16T07:49:02Z

ivysrono
Mar 16, 2024
Author

second question:

I create one user script:

// ==UserScript==
// @name        upscalerjs test
// @namespace   Violentmonkey Scripts

// @match       *://*/*

// @grant       none
// @version     1.0
// @author      -
// @require     https://unpkg.com/upscaler@latest/dist/browser/umd/upscaler.min.js
// @require     https://unpkg.com/@upscalerjs/maxim-denoising@latest/dist/umd/models/maxim-denoising/src/umd.min.js
// @require     https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js
// @run-at      document-idle
// ==/UserScript==

const upscaler = new Upscaler({
  model: window.MaximDenoising,
});

upscaler
  .upscale('https://upscalerjs.com/assets/images/fixture-51429144e4deb73beb431695c26a209c.png', {
    patchSize: 64,
    padding: 2,
    progress: console.debug,
  })
  .then((upscaledImgSrc) => {
    const img = document.createElement('img');
    img.src = upscaledImgSrc;
    document.head.appendChild(img);
  });

console error:

Uncaught (in promise) TypeError: n.registerOp is not a function
    setup moz-extension://*/ upscalerjs test.user.js#54:3
    re moz-extension://*/ upscalerjs test.user.js#54:2
    <anonymous> moz-extension://*/ upscalerjs test.user.js#54:2
    VMfdnqd912xto moz-extension://*/ upscalerjs test.user.js#54:38
    VMfdnqd912xto moz-extension://*/ upscalerjs test.user.js#54:53
    VMfdnqd912xto moz-extension://*/ upscalerjs test.user.js#54:53
    Ut moz-extension://*/sandbox/injected-web.js:1
    <anonymous> moz-extension://*/ upscalerjs test.user.js#54:1
    Pe moz-extension://*/sandbox/injected-web.js:1
    post moz-extension://*/sandbox/injected-web.js:1
    ScriptData moz-extension://*/sandbox/injected-web.js:1
    onHandle moz-extension://*/sandbox/injected-web.js:1
    Le moz-extension://*/sandbox/injected-web.js:1
line 2 > injectedScript:3:794

2 replies

thekevinscott Mar 16, 2024
Maintainer

I've never used Violentmonkey before but from what I can tell it's a browser plugin for executing user scripts?

From a quick troubleshooting, it appears that the Tensorflow.js object is coming back as a null to the Upscaler. I'm not sure why. My best guess is that there's something with the UMD format that's failing to play nicely with whatever environment the user script is operating in.

ivysrono Mar 17, 2024
Author

Edit:

const upscaler = new Upscaler({
  // model: window.MaximDenoising,
  // https://upscalerjs.com/documentation/guides/browser/usage/self-hosting-models/#code
  model: {
    scale: 2,
    path: 'https://unpkg.com/@upscalerjs/maxim-denoising@latest/models/model.json',
  },
});

console:

Uncaught (in promise) TypeError: e.loadLayersModel is not a function
    j moz-extension://*/ upscalerjs test.user.js#54:2
    model moz-extension://*/ upscalerjs test.user.js#54:2
    loadModel moz-extension://*/ upscalerjs test.user.js#54:2
    async* moz-extension://*/ upscalerjs test.user.js#54:2
    VMznuhofap3nf moz-extension://*/ upscalerjs test.user.js#54:37
    VMznuhofap3nf moz-extension://*/ upscalerjs test.user.js#54:68
    VMznuhofap3nf moz-extension://*/ upscalerjs test.user.js#54:68
    Ut moz-extension://*/sandbox/injected-web.js:1
    <anonymous> moz-extension://*/ upscalerjs test.user.js#54:1
    Pe moz-extension://*/sandbox/injected-web.js:1
    post moz-extension://*/sandbox/injected-web.js:1
    ScriptData moz-extension://*/sandbox/injected-web.js:1
    onHandle moz-extension://*/sandbox/injected-web.js:1
    Le moz-extension://*/sandbox/injected-web.js:1
2 line 2 > injectedScript:2:1878

Maybe local html test should be fixed first.

ivysrono · 2024-03-17T04:50:38Z

ivysrono
Mar 17, 2024
Author

1.html.zip

<html>
  <head>
    <title>@upscalerjs/maxim-denoising</title>
    <style>
      body {
        padding: 40px;
        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      }
      button {
        margin-top: 20px;
        display: block;
        padding: 10px 40px;
      }
      #target {
        background: #eee;
        border: 1px solid #ddd;
        display: inline-block;
        width: 256px;
        height: 256px;
      }
      #flower {
        border: 1px solid #ddd;
      }
      pre {
        padding: 10px;
        background: #eee;
        border: 1px solid #ddd;
        border-radius: 5px;
      }
      table td {
        vertical-align: top;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <td>Original</td>
          <td>Upscaled</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <img src="./img_code.jpg" id="fixture" />
          </td>
          <td>
            <div id="target"></div>
          </td>
        </tr>
      </tbody>
    </table>

    <script src="https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
    <script src="https://unpkg.com/@upscalerjs/maxim-denoising@latest/dist/umd/models/maxim-denoising/src/umd.min.js"></script>
    <script src="https://unpkg.com/upscaler@latest/dist/browser/umd/upscaler.min.js"></script>
    <script>
      const upscaler = new window.Upscaler({
        // model: window.MaximDenoising,
        model: {
          scale: 2,
          path: 'https://unpkg.com/@upscalerjs/maxim-denoising@latest/models/model.json',
        },
      });
      const fixture = document.getElementById('fixture');

      upscaler
        .upscale(fixture, {
          patchSize: 64,
          padding: 2,
          progress: console.debug,
        })
        .then((upscaledImgSrc) => {
          const img = document.createElement('img');
          img.src = upscaledImgSrc;
          document.getElementById('target').appendChild(img);
        });
    </script>
  </body>
</html>

Uncaught (in promise) Error: layer: Improper config format: {"node":[{"name":"StatefulPartitionedCall/jax2tf_apply_/Wrapper/backbone/stage_2_decoder_block_0/UNetEncoderBlock_0/channel_attention_block_11/channel_attention/jit_sigmoid_/Const_1","op":"Const","attr":{"value":{"tensor":{"dtype":"DTFLOAT","tensorShape":{}}},"dtype":{"type":"DTFLOAT"}},"inputs":[]},{"name":"StatefulPartitionedCall/jax2tf_apply_/Wrapper/backbone/stage_2_decoder_block_0/UNetEncoderBlock_0/channel_attention_block_11/jit_leaky_relu_/jit_fn_/Cast","op":"Const","attr":{"value":{"tensor":{"dtype":"DTFLOAT","tensorShape":{}}},"dtype":{"type":"DTFLOAT"}},"inputs":[]},{"name":"StatefulPartitionedCall/Const_7363","op":"Const","attr":{"value":{"tensor":{"dtype":"DTFLOAT","tensorShape":{}}},"dtype":{"type":"DTFLOAT"}},"inputs":[]},{"name":"StatefulPartitionedCall/jax2tf_apply_/Wrapper/backbone/stage_2_decoder_block_0/UNetEncoderBlock_0/channel_attention_block_11/LayerNorm/Const_1","op":"Const","attr":{"value":{"tensor":{"dtype":"DTINT32","tensorShape…
    y https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    r https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    w https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    n https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    Vse https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    rle https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    e https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    h https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    w https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    x https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    u https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    o https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    promise callback*u https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    o https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    c https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    c https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    xhe https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    bhe https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    e https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    h https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    w https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    x https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    u https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    o https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    c https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    c https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    yhe https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    loadLayersModel https://unpkg.com/@tensorflow/tfjs@latest/dist/tf.min.js:17
    j https://unpkg.com/upscaler@latest/dist/browser/umd/upscaler.min.js:2
    model https://unpkg.com/upscaler@latest/dist/browser/umd/upscaler.min.js:2
    loadModel https://unpkg.com/upscaler@latest/dist/browser/umd/upscaler.min.js:2
    async* https://unpkg.com/upscaler@latest/dist/browser/umd/upscaler.min.js:2
    <anonymous> http://127.0.0.1/*/1.html:59
tf.min.js:17:10059

0 replies

maxim-denoising document and code are 404 #1287

Uh oh!

Uh oh!

ivysrono Mar 14, 2024

Replies: 4 comments · 4 replies

Uh oh!

Uh oh!

thekevinscott Mar 15, 2024 Maintainer

Uh oh!

Uh oh!

ivysrono Mar 16, 2024 Author

Uh oh!

thekevinscott Mar 16, 2024 Maintainer

Uh oh!

ivysrono Mar 17, 2024 Author

Uh oh!

Uh oh!

ivysrono Mar 16, 2024 Author

Uh oh!

thekevinscott Mar 16, 2024 Maintainer

Uh oh!

ivysrono Mar 17, 2024 Author

Uh oh!

Uh oh!

ivysrono Mar 17, 2024 Author

ivysrono
Mar 14, 2024

Replies: 4 comments 4 replies

thekevinscott
Mar 15, 2024
Maintainer

ivysrono
Mar 16, 2024
Author

thekevinscott Mar 16, 2024
Maintainer

ivysrono Mar 17, 2024
Author

ivysrono
Mar 16, 2024
Author

thekevinscott Mar 16, 2024
Maintainer

ivysrono Mar 17, 2024
Author

ivysrono
Mar 17, 2024
Author