Update READMEs for UMD files (#1195)

thekevinscott · Oct 9, 2023 · 5ca0810 · 5ca0810
1 parent 179d4e2
commit 5ca0810
Show file tree

Hide file tree

Showing 9 changed files with 110 additions and 15 deletions.
diff --git a/examples/basic-umd/index.html b/examples/basic-umd/index.html
@@ -64,8 +64,14 @@ <h1>Basic Example With a Script Tag</h1>
     </table>
     <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@upscalerjs/default-model@latest/dist/umd/index.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-slim@latest/dist/umd/index.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-slim@latest/dist/umd/2x.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-slim@latest/dist/umd/3x.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-slim@latest/dist/umd/4x.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/upscaler@latest/dist/browser/umd/upscaler.min.js"></script>
     <script>
+      console.log(ESRGANSlim.x2)
+      console.log(ESRGANSlim2x)
       const target = document.getElementById('target');
       const button = document.getElementById('button');
       const info = document.getElementById('info');

diff --git a/models/esrgan-legacy/DOC.mdx b/models/esrgan-legacy/DOC.mdx
@@ -86,10 +86,10 @@ const upscaler = new Upscaler({
 
 #### Using a script tag
 
-If importing Tensorflow.js using script tags, import the model and UpscalerJS with:
+If importing Tensorflow.js using script tags, import the specific model and UpscalerJS with:
 
 ```
-<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-legacy@latest/dist/umd/index.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-legacy@latest/dist/umd/gans.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/upscaler@latest/dist/browser/umd/upscaler.min.js"></script>
 
 <script type="text/javascript">
@@ -99,7 +99,15 @@ If importing Tensorflow.js using script tags, import the model and UpscalerJS wi
 </script>
 ```
 
-All models will be made available on the global window object. See [Available Models](#available-models) for information on their names.
+The model will be made available on the global window object. See [Available Models](#available-models) for information on referencing by name.
+
+You can also import all models in this package via the `index.min.js` import:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrga-legacy@latest/dist/umd/index.min.js"></script>
+```
+
+If so, all model configurations will be available on the global object ESRGANLegacy.
 
 ### Node
 
@@ -149,6 +157,16 @@ If referencing the models via script tags, refer to the models by their global n
 - `div2k/4x`: `ESRGANLegacyDiv2K4x`,
 - `psnr-small`: `ESRGANLegacyPSNRSmall`,
 
+Specific model files can be loaded by specifying the model:
+
+```
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-legacy@latest/dist/umd/gans.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-legacy@latest/dist/umd/div2k/2x.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-legacy@latest/dist/umd/div2k/3x.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-legacy@latest/dist/umd/div2k/4x.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-legacy@latest/dist/umd/psnr-small.min.js"></script>
+```
+
 ### GANS
 
 The `gans` model uses the [pretrained `gans` weights made available via the original Python repo](https://github.com/idealo/image-super-resolution#pre-trained-networks).

diff --git a/models/esrgan-medium/DOC.mdx b/models/esrgan-medium/DOC.mdx
@@ -79,10 +79,10 @@ const upscaler = new Upscaler({
 
 #### Using a script tag
 
-If importing Tensorflow.js using script tags, import the model and UpscalerJS with:
+If importing Tensorflow.js using script tags, import the specific model and UpscalerJS with:
 
 ```
-<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-medium@latest/dist/umd/index.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-medium@latest/dist/umd/2x.min.js"></script> <!-- loads the 2x model -->
 <script src="https://cdn.jsdelivr.net/npm/upscaler@latest/dist/browser/umd/upscaler.min.js"></script>
 
 <script type="text/javascript">
@@ -92,7 +92,15 @@ If importing Tensorflow.js using script tags, import the model and UpscalerJS wi
 </script>
 ```
 
-All models will be made available on the global window object. See [Available Models](#available-models) for information on their names.
+The model will be made available on the global window object. See [Available Models](#available-models) for information on referencing by name.
+
+You can also import all models in this package via the `index.min.js` import:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-medium@latest/dist/umd/index.min.js"></script>
+```
+
+If so, all model configurations will be available on the global object `ESRGANMedium`.
 
 ### Node
 
@@ -139,6 +147,15 @@ If referencing the models via script tags, refer to the models by their global n
 - `4x`: `ESRGANMedium4x`
 - `8x`: `ESRGANMedium8x`
 
+Specific model files can be loaded by specifying the scale:
+
+```
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-medium@latest/dist/umd/2x.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-medium@latest/dist/umd/3x.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-medium@latest/dist/umd/4x.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-medium@latest/dist/umd/8x.min.js"></script>
+```
+
 ## Performance + Speed Measurements
 
 import PerformanceChart from '@site/src/components/chart/performanceChart/performanceChart';

diff --git a/models/esrgan-medium/doc-snippets/umdName.md b/models/esrgan-medium/doc-snippets/umdName.md
@@ -0,0 +1 @@
+ESRGANMedium
diff --git a/models/esrgan-slim/DOC.mdx b/models/esrgan-slim/DOC.mdx
@@ -79,10 +79,10 @@ const upscaler = new Upscaler({
 
 #### Using a script tag
 
-If importing Tensorflow.js using script tags, import the model and UpscalerJS with:
+If importing Tensorflow.js using script tags, import the specific model and UpscalerJS with:
 
 ```
-<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-slim@latest/dist/umd/index.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-slim@latest/dist/umd/2x.min.js"></script> <!-- loads the 2x model -->
 <script src="https://cdn.jsdelivr.net/npm/upscaler@latest/dist/browser/umd/upscaler.min.js"></script>
 
 <script type="text/javascript">
@@ -92,7 +92,15 @@ If importing Tensorflow.js using script tags, import the model and UpscalerJS wi
 </script>
 ```
 
-All models will be made available on the global window object. See [Available Models](#available-models) for information on their names.
+The model will be made available on the global window object. See [Available Models](#available-models) for information on referencing by name.
+
+You can also import all models in this package via the `index.min.js` import:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-slim@latest/dist/umd/index.min.js"></script>
+```
+
+If so, all model configurations will be available on the global object `ESRGANSlim`.
 
 ### Node
 
@@ -139,6 +147,15 @@ If referencing the models via script tags, refer to the models by their global n
 - `4x`: `ESRGANSlim4x`
 - `8x`: `ESRGANSlim8x`
 
+Specific model files can be loaded by specifying the scale:
+
+```
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-slim@latest/dist/umd/2x.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-slim@latest/dist/umd/3x.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-slim@latest/dist/umd/4x.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-slim@latest/dist/umd/8x.min.js"></script>
+```
+
 ## Performance + Speed Measurements
 
 import PerformanceChart from '@site/src/components/chart/performanceChart/performanceChart';

diff --git a/models/esrgan-slim/doc-snippets/umdName.md b/models/esrgan-slim/doc-snippets/umdName.md
@@ -0,0 +1 @@
+ESRGANSlim
diff --git a/models/esrgan-thick/DOC.mdx b/models/esrgan-thick/DOC.mdx
@@ -81,10 +81,10 @@ const upscaler = new Upscaler({
 
 #### Using a script tag
 
-If importing Tensorflow.js using script tags, import the model and UpscalerJS with:
+If importing Tensorflow.js using script tags, import the specific model and UpscalerJS with:
 
 ```
-<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-thick@latest/dist/umd/index.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-thick@latest/dist/umd/2x.min.js"></script> <!-- loads the 2x model -->
 <script src="https://cdn.jsdelivr.net/npm/upscaler@latest/dist/browser/umd/upscaler.min.js"></script>
 
 <script type="text/javascript">
@@ -94,7 +94,15 @@ If importing Tensorflow.js using script tags, import the model and UpscalerJS wi
 </script>
 ```
 
-All models will be made available on the global window object. See [Available Models](#available-models) for information on their names.
+The model will be made available on the global window object. See [Available Models](#available-models) for information on referencing by name.
+
+You can also import all models in this package via the `index.min.js` import:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-thick@latest/dist/umd/index.min.js"></script>
+```
+
+If so, all model configurations will be available on the global object `ESRGANThick`.
 
 ### Node
 
@@ -141,6 +149,15 @@ If referencing the models via script tags, refer to the models by their global n
 - `4x`: `ESRGANThick4x`
 - `8x`: `ESRGANThick8x`
 
+Specific model files can be loaded by specifying the scale:
+
+```
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-thick@latest/dist/umd/2x.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-thick@latest/dist/umd/3x.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-thick@latest/dist/umd/4x.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-thick@latest/dist/umd/8x.min.js"></script>
+```
+
 ## Performance + Speed Measurements
 
 import PerformanceChart from '@site/src/components/chart/performanceChart/performanceChart';

diff --git a/models/esrgan-thick/doc-snippets/umdName.md b/models/esrgan-thick/doc-snippets/umdName.md
@@ -0,0 +1 @@
+ESRGANThick
diff --git a/packages/shared/src/esrgan/DOC.mdx b/packages/shared/src/esrgan/DOC.mdx
@@ -65,10 +65,10 @@ const upscaler = new Upscaler({
 
 #### Using a script tag
 
-If importing Tensorflow.js using script tags, import the model and UpscalerJS with:
+If importing Tensorflow.js using script tags, import the specific model and UpscalerJS with:
 
 ```
-<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/<% key %>@latest/dist/umd/index.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/<% key %>@latest/dist/umd/2x.min.js"></script> <!-- loads the 2x model -->
 <script src="https://cdn.jsdelivr.net/npm/upscaler@latest/dist/browser/umd/upscaler.min.js"></script>
 
 <script type="text/javascript">
@@ -78,7 +78,15 @@ If importing Tensorflow.js using script tags, import the model and UpscalerJS wi
 </script>
 ```
 
-All models will be made available on the global window object. See [Available Models](#available-models) for information on their names.
+The model will be made available on the global window object. See [Available Models](#available-models) for information on referencing by name.
+
+You can also import all models in this package via the `index.min.js` import:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/<% key %>@latest/dist/umd/index.min.js"></script>
+```
+
+If so, all model configurations will be available on the global object `<% snippets/umdName %>`.
 
 ### Node
 
@@ -122,6 +130,15 @@ If referencing the models via script tags, refer to the models by their global n
 
 <% snippets/umdNames %>
 
+Specific model files can be loaded by specifying the scale:
+
+```
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/<% key %>@latest/dist/umd/2x.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/<% key %>@latest/dist/umd/3x.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/<% key %>@latest/dist/umd/4x.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/<% key %>@latest/dist/umd/8x.min.js"></script>
+```
+
 ## Performance + Speed Measurements
 
 import PerformanceChart from '@site/src/components/chart/performanceChart/performanceChart';