Add Support for webp format (#6035)

examples/reference/panes/Image.ipynb

@@ -47,7 +47,8 @@
  "outputs": [],
  "source": [
  "jpg_pane = pn.pane.Image('https://assets.holoviz.org/panel/samples/jpeg_sample.jpeg')\n",
- "png_pane = pn.pane.Image('https://assets.holoviz.org/panel/samples/png_sample.png')"
+ "png_pane = pn.pane.Image('https://assets.holoviz.org/panel/samples/png_sample.png')\n",
+ "webp_pane = pn.pane.Image('https://assets.holoviz.org/panel/samples/webp_sample.webp')"
  ]
  },
  {
@@ -58,7 +59,7 @@
  },
  "outputs": [],
  "source": [
- "pn.Column(jpg_pane, png_pane)"
+ "pn.Column(jpg_pane, png_pane, webp_pane)"
  ]
  },
  {

examples/reference/panes/WebP.ipynb

@@ -0,0 +1,102 @@
+{
+ "cells": [
+ {
+ "cell_type": "code",
+ "execution_count": null,
+ "metadata": {},
+ "outputs": [],
+ "source": [
+ "import panel as pn\n",
+ "\n",
+ "pn.extension()"
+ ]
+ },
+ {
+ "cell_type": "markdown",
+ "metadata": {},
+ "source": [
+ "The `WebP` pane embeds a `.web` image file in a panel if provided a local path, or will link to a remote image if provided a URL.\n",
+ "\n",
+ "#### Parameters:\n",
+ "\n",
+ "For details on other options for customizing the component see the [layout](../../how_to/layout/index.md) and [styling](../../how_to/styling/index.md) how-to guides.\n",
+ "\n",
+ "* **``alt_text``** (str, default=None): alt text to add to the image tag. The alt text is shown when a user cannot load or display the image. \n",
+ "* **``embed``** (boolean, default=False): If given a URL to an image this determines whether the image will be embedded as base64 or merely linked to.\n",
+ "* **``fixed_aspect``** (boolean, default=True): Whether the aspect ratio of the image should be forced to be equal.\n",
+ "* **``link_url``** (str, default=None): A link URL to make the image clickable and link to some other website.\n",
+ "* **``object``** (str or object): The PNG file to display. Can be a string pointing to a local or remote file, or an object with a ``_repr_png_`` method.\n",
+ "* **``style``** (dict): Dictionary specifying CSS styles\n",
+ "\n",
+ "___"
+ ]
+ },
+ {
+ "cell_type": "markdown",
+ "metadata": {},
+ "source": [
+ "The `WebP` pane can be pointed at any local or remote `.webp` file. If given a URL starting with `http` or `https`, the `embed` parameter determines whether the image will be embedded or linked to:"
+ ]
+ },
+ {
+ "cell_type": "code",
+ "execution_count": null,
+ "metadata": {},
+ "outputs": [],
+ "source": [
+ "webp_pane = pn.pane.WebP('https://assets.holoviz.org/panel/samples/webp_sample.webp')\n",
+ "\n",
+ "webp_pane"
+ ]
+ },
+ {
+ "cell_type": "markdown",
+ "metadata": {},
+ "source": [
+ "We can scale the size of the image by setting a specific fixed `width` or `height`:"
+ ]
+ },
+ {
+ "cell_type": "code",
+ "execution_count": null,
+ "metadata": {},
+ "outputs": [],
+ "source": [
+ "webp_pane.clone(width=400)"
+ ]
+ },
+ {
+ "cell_type": "markdown",
+ "metadata": {},
+ "source": [
+ "Alternatively we can scale the width and height using the `sizing_mode`:"
+ ]
+ },
+ {
+ "cell_type": "code",
+ "execution_count": null,
+ "metadata": {},
+ "outputs": [],
+ "source": [
+ "pn.pane.WebP(\n",
+ " 'https://assets.holoviz.org/panel/samples/webp_sample2.webp', sizing_mode='scale_width'\n",
+ ")"
+ ]
+ },
+ {
+ "cell_type": "markdown",
+ "metadata": {},
+ "source": [
+ "Note that by default the aspect ratio of the image is fixed, and so there may be a gap beside or below the image even in responsive sizing modes. To override this behavior set `fixed_aspect=False` or provide fixed `width` and `height` values."
+ ]
+ }
+ ],
+ "metadata": {
+ "language_info": {
+ "name": "python",
+ "pygments_lexer": "ipython3"
+ }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}

panel/pane/__init__.py

@@ -36,7 +36,7 @@
 from .equation import LaTeX # noqa
 from .holoviews import HoloViews, Interactive # noqa
 from .image import ( # noqa
- GIF, ICO, JPG, PDF, PNG, SVG, Image,
+ GIF, ICO, JPG, PDF, PNG, SVG, Image, WebP,
 )
 from .ipywidget import IPyLeaflet, IPyWidget, Reacton # noqa
 from .markup import ( # noqa

panel/pane/image.py

@@ -6,6 +6,7 @@
 
 import asyncio
 import base64
+import struct
 
 from io import BytesIO
 from pathlib import PurePath
@@ -496,3 +497,50 @@ def _transform_object(self, obj: Any) -> Dict[str, Any]:
  page = f'#page={self.start_page}' if getattr(self, 'start_page', None) else ''
  html = f'<embed src="{obj}{page}" width={w!r} height={h!r} type="application/pdf">'
  return dict(text=escape(html))
+
+class WebP(ImageBase):
+ """
+ The `WebP` pane embeds a .webp image file in a panel if
+ provided a local path, or will link to a remote image if provided
+ a URL.
+
+ Reference: https://developers.google.com/speed/webp/docs/riff_container
+
+ :Example:
+
+ >>> WebP(
+ ... 'https://assets.holoviz.org/panel/samples/webp_sample.webp',
+ ... alt_text='A nice tree',
+ ... link_url='https://en.wikipedia.org/wiki/WebP',
+ ... width=500,
+ ... caption='A nice tree'
+ ... )
+ """
+
+ filetype: ClassVar[str] = 'webp'
+
+ _extensions: ClassVar[Tuple[str, ...]] = ('webp',)
+
+ @classmethod
+ def _imgshape(cls, data):
+ with BytesIO(data) as b:
+ b.read(12) # Skip RIFF header
+ chunk_header = b.read(4).decode('utf-8')
+ if chunk_header[:3] != 'VP8':
+ raise ValueError("Invalid WebP file")
+ wptype = chunk_header[3]
+ b.read(4)
+ if wptype == 'X':
+ b.read(4)
+ w = int.from_bytes(b.read(3), 'little') + 1
+ h = int.from_bytes(b.read(3), 'little') + 1
+ elif wptype == 'L':
+ b.read(1)
+ bits = struct.unpack("<I", b.read(4))[0]
+ w = (bits & 0x3FFF) + 1
+ h = ((bits >> 14) & 0x3FFF) + 1
+ elif wptype == ' ':
+ b.read(6)
+ w = int.from_bytes(b.read(2), 'little') + 1
+ h = int.from_bytes(b.read(2), 'little') + 1
+ return int(w), int(h)

panel/tests/pane/test_image.py

@@ -9,15 +9,15 @@
 from requests.exceptions import MissingSchema
 
 from panel.pane import (
- GIF, ICO, JPG, PDF, PNG, SVG,
+ GIF, ICO, JPG, PDF, PNG, SVG, WebP,
 )
 from panel.pane.markup import escape
 
 JPG_FILE = 'https://assets.holoviz.org/panel/samples/jpg_sample.jpg'
 JPEG_FILE = 'https://assets.holoviz.org/panel/samples/jpeg_sample.jpeg'
 PNG_FILE = 'https://assets.holoviz.org/panel/samples/png_sample.png'
 SVG_FILE = 'https://assets.holoviz.org/panel/samples/svg_sample.svg'
-
+WEBP_FILE = 'https://assets.holoviz.org/panel/samples/webp_sample.webp'
 
 def test_jpeg_applies():
  assert JPG.applies(JPEG_FILE)
@@ -69,14 +69,17 @@ def test_svg_pane(document, comm):
  b'AAAAAAAAAAAAAAAAFBv/EABkRAAEFAAAAAAAAAAAAAAAAAAEAAjFxsf/aAAwDAQ' + \
  b'ACEQMRAD8AA0qs5HvTHQcJdsChioXSbOr/2Q==',
  ico = b'AAABAAEAAgEAAAEAIAA0AAAAFgAAACgAAAACAAAAAgAAAAEAIAAAAAAACAAAAHQ' + \
- b'SAAB0EgAAAAAAAAAAAAD//////////wAAAAA=')
+ b'SAAB0EgAAAAAAAAAAAAD//////////wAAAAA=',
+ webp= b'UklGRkIAAABXRUJQVlA4WAoAAAAQAAAAAQAAAAAAQUxQSAMAAAAAAAAAVlA4IBg' + \
+ b'AAAAwAQCdASoCAAEAAUAmJaQAA3AA/v02aAA='
+ )
 
 
-def test_imgshape():
- for t in [PNG, JPG, GIF, ICO]:
-  w,h = t._imgshape(b64decode(twopixel[t.name.lower()]))
-  assert w == 2
-  assert h == 1
+@pytest.mark.parametrize('t', [PNG, JPG, GIF, ICO, WebP], ids=lambda t: t.name.lower())
+def test_imgshape(t):
+ w, h = t._imgshape(b64decode(twopixel[t.name.lower()]))
+ assert w == 2
+ assert h == 1
 
 def test_load_from_byteio():
  """Testing a loading a image from a ByteIo"""