webdisplay 0.1.0__tar.gz

webdisplay-0.1.0/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

webdisplay-0.1.0/PKG-INFO

@@ -0,0 +1,11 @@
+Metadata-Version: 2.4
+Name: webdisplay
+Version: 0.1.0
+Summary: Un toolkit pour vite coder un modèle pytorch d'IA utilisant MLflow
+Author-email: Jean-François Lecomte <zwergon@free.fr>
+License-Expression: Apache-2.0
+Requires-Python: >=3.10
+Description-Content-Type: text/markdown
+License-File: LICENSE
+Requires-Dist: websockets
+Dynamic: license-file

webdisplay-0.1.0/README.rst

@@ -0,0 +1,45 @@
+webdisplay
+==========
+
+Small remote display of images. The server is implemented in Python and the client is a web page. 
+The server can be used to display images from a Python program on a web page. 
+Its main use is for debugging and monitoring purposes, but it can also be used for other applications.
+The same philosophy as X11 but for the web.
+
+Installation
+------------
+
+.. code-block:: bash
+
+    pip install webdisplay
+
+Server Usage
+------------
+
+.. code-block:: bash
+
+    webdisplay-server --port 8765  # default port is 8765
+
+This will start a server on port 8765 and open a web browser connected to this server. You can change the port if needed.
+There is also a `--no-browser` option to prevent the browser from opening automatically. 
+This is useful if you want to send images from a remote machine to your local machine.
+
+
+The client produce a figure, use the webdisplay client to send it to the server then the server will display it on the web page. 
+You can send multiple figures and they will be displayed as a list of pictures in the web page.
+
+Client Usage
+------------
+
+.. code-block:: python
+
+    import webdisplay
+    import matplotlib.pyplot as plt
+
+    # should be called only once in the program, before any other webdisplay function is called
+    webdisplay.connect("ws://localhost:8765/send")  # most likely the default address, but you can change it if needed
+
+    fig, ax = plt.subplots()
+    ax.plot([1, 4, 2, 8, 5])
+    webdisplay.show_figure(fig)
+

webdisplay-0.1.0/pyproject.toml

@@ -0,0 +1,26 @@
+[build-system]
+build-backend = "setuptools.build_meta"
+requires = ["setuptools>=61.0"]
+
+[project]
+description = "Un toolkit pour vite coder un modèle pytorch d'IA utilisant MLflow"
+version = "0.1.0"
+name = "webdisplay"
+dependencies = ["websockets"]
+
+authors = [{ name = "Jean-François Lecomte", email = "zwergon@free.fr" }]
+
+license = "Apache-2.0"
+
+readme = "README.md"
+requires-python = ">=3.10"
+
+[tool.setuptools.packages.find]
+where = ["src"]
+
+[project.scripts]
+webdisplay_server = "webdisplay.server:run"
+
+
+[tool.setuptools.package-data]
+webdisplay = ["*.html"]

webdisplay-0.1.0/setup.cfg

@@ -0,0 +1,4 @@
+[egg_info]
+tag_build = 
+tag_date = 0
+

webdisplay-0.1.0/src/webdisplay/__init__.py

@@ -0,0 +1,15 @@
+from .client import (
+    connect,
+    close,
+    show_figure,
+    show_image,
+    show_png
+)
+
+__all__ = [
+    "connect",
+    "close",
+    "show_figure",
+    "show_image",
+    "show_png"
+]

webdisplay-0.1.0/src/webdisplay/client.py

@@ -0,0 +1,121 @@
+"""
+webdisplay.py — Module côté machine distante
+Copiez ce fichier à côté de vos scripts Python.
+
+Dépendances : pip install websockets pillow
+(matplotlib est optionnel, uniquement si vous utilisez show_figure)
+
+Usage rapide :
+    import webdisplay
+    webdisplay.connect("ws://localhost:8765/send")   # une seule fois
+
+    # Depuis matplotlib
+    webdisplay.show_figure(fig)
+
+    # Depuis PIL / Pillow
+    webdisplay.show_image(pil_img)
+
+    # Depuis des bytes PNG bruts
+    webdisplay.show_png(png_bytes)
+
+    # Fermer proprement en fin de script
+    webdisplay.close()
+"""
+
+import asyncio
+import io
+import threading
+import base64
+import json
+import websockets
+
+# ── état interne ──────────────────────────────────────────────────────────────
+_loop: asyncio.AbstractEventLoop | None = None
+_thread: threading.Thread | None = None
+_ws = None
+_uri: str = "ws://localhost:8765/send"
+
+
+# ── démarrage de la boucle asyncio dans un thread dédié ──────────────────────
+
+def connect(uri: str = "ws://localhost:8765/send"):
+    """Ouvre la connexion WebSocket vers le relay.  Appel optionnel :
+    si vous appelez show_* sans avoir appelé connect(), la connexion
+    s'établit automatiquement avec l'URI par défaut."""
+    global _uri
+    _uri = uri
+    _ensure_started()
+
+
+def close():
+    """Ferme proprement la connexion."""
+    global _ws, _loop
+    if _ws and _loop:
+        asyncio.run_coroutine_threadsafe(_ws.close(), _loop)
+
+
+# ── API publique ──────────────────────────────────────────────────────────────
+
+def show_figure(fig, title: str = "", dpi: int = 150, fmt: str = "png"):
+    """Envoie une figure matplotlib.
+    Exemple :
+        fig, ax = plt.subplots()
+        ax.plot([1,2,3])
+        webdisplay.show_figure(fig)
+    """
+    buf = io.BytesIO()
+    fig.savefig(buf, format=fmt, dpi=dpi, bbox_inches="tight")
+    buf.seek(0)
+    show_png(buf.read(), title=title)
+
+
+def show_image(pil_img, title: str = "", fmt: str = "PNG"):
+    """Envoie un objet PIL.Image.
+    Exemple :
+        from PIL import Image
+        img = Image.open("photo.jpg")
+        webdisplay.show_image(img)
+    """
+    buf = io.BytesIO()
+    pil_img.save(buf, format=fmt)
+    buf.seek(0)
+    show_png(buf.read(), title=title)
+
+
+def show_png(png_bytes: bytes, title: str = ""):
+    """Envoie des bytes PNG bruts."""
+    _ensure_started()
+    b64 = base64.b64encode(png_bytes).decode()
+    payload = json.dumps({"title": title, "data": b64})
+    future = asyncio.run_coroutine_threadsafe(_send(payload), _loop)
+    future.result(timeout=10)   # bloquant côté script, non bloquant côté relay
+
+
+# ── internals ─────────────────────────────────────────────────────────────────
+
+def _ensure_started():
+    global _loop, _thread
+    if _loop is None:
+        _loop = asyncio.new_event_loop()
+        _thread = threading.Thread(target=_loop.run_forever, daemon=True)
+        _thread.start()
+        # connexion initiale
+        future = asyncio.run_coroutine_threadsafe(_connect(), _loop)
+        future.result(timeout=10)
+
+
+async def _connect():
+    global _ws
+    _ws = await websockets.connect(_uri)
+
+
+async def _send(payload: str):
+    global _ws
+    if _ws is None:
+        await _connect()
+    try:
+        await _ws.send(payload)
+    except (websockets.exceptions.ConnectionClosed, Exception):
+        # Reconnexion automatique si la connexion a été perdue
+        await _connect()
+        await _ws.send(payload)

webdisplay-0.1.0/src/webdisplay/server.py

@@ -0,0 +1,122 @@
+import argparse
+import pathlib
+import time
+import asyncio
+import logging
+import threading
+import websockets
+import webbrowser
+
+from websockets.asyncio.server import ServerConnection
+
+
+logging.basicConfig(level=logging.INFO, format="%(asctime)s  %(message)s")
+log = logging.getLogger("relay")
+
+# Ensemble des clients navigateur connectés
+browsers: set[ServerConnection] = set()
+
+
+async def _handler(ws: ServerConnection):
+    path = ws.request.path if hasattr(
+        ws, "request") else getattr(ws, "path", "/")
+
+    if path == "/send":
+        # Connexion depuis Python distant
+        log.info("Producteur connecté depuis %s", ws.remote_address)
+        try:
+            async for message in ws:
+                if browsers:
+                    # Diffuse à tous les navigateurs connectés
+                    await asyncio.gather(
+                        *[b.send(message) for b in browsers],
+                        return_exceptions=True,
+                    )
+                    log.info(
+                        "Image diffusée à %d navigateur(s) (%d octets)",
+                        len(browsers),
+                        len(message) if isinstance(
+                            message, (bytes, str)) else 0,
+                    )
+                else:
+                    log.warning("Aucun navigateur connecté, image ignorée")
+        except websockets.exceptions.ConnectionClosed:
+            pass
+        log.info("Producteur déconnecté")
+
+    else:
+        # Connexion depuis le navigateur
+        browsers.add(ws)
+        log.info("Navigateur connecté (%d au total)", len(browsers))
+        try:
+            await ws.wait_closed()
+        finally:
+            browsers.discard(ws)
+            log.info("Navigateur déconnecté (%d restants)", len(browsers))
+
+
+async def _relay(port: int):
+    async with websockets.serve(_handler, "0.0.0.0", port):
+        log.info("Relay démarré sur ws://localhost:%d", port)
+        await asyncio.Future()
+
+
+HERE = pathlib.Path(__file__).parent.resolve()
+HTML_FILE = HERE / "static" / "index.html"
+
+
+def _open_browser(host: str, port: int, delay: float = 0.8):
+    """Ouvre index.html après un court délai (le temps que le relay démarre)."""
+    time.sleep(delay)
+
+    html_uri = HTML_FILE.as_uri()
+
+    # On injecte l'URL WebSocket correcte dans la query-string si besoin,
+    # mais index.html lit déjà ws://localhost:8765/view par défaut.
+    # Si le port est différent, on passe par un fichier HTML temporaire
+    # avec l'URL pré-remplie.
+    if host != 'localhost' or port != 8765:
+        import tempfile
+        import shutil
+        content = HTML_FILE.read_text(encoding="utf-8")
+        content = content.replace(
+            "ws://localhost:8765/view",
+            f"ws://{host}:{port}/view",
+        )
+        tmp = pathlib.Path(tempfile.mktemp(suffix=".html"))
+        tmp.write_text(content, encoding="utf-8")
+        html_uri = tmp.as_uri()
+
+    log.info("Ouverture du navigateur : %s", html_uri)
+    webbrowser.open(html_uri)
+
+
+def start(host: str = 'localhost', port: int = 8765, open_browser: bool = True):
+    """Lance le relay et bloque jusqu'à Ctrl+C."""
+    if open_browser:
+        t = threading.Thread(target=_open_browser,
+                             args=(host, port,), daemon=True)
+        t.start()
+
+    try:
+        asyncio.run(_relay(port))
+    except KeyboardInterrupt:
+        log.info("Arrêt.")
+
+
+def run():
+    parser = argparse.ArgumentParser(
+        description="Lance le relay WebDisplay et ouvre le navigateur.")
+    parser.add_argument("--host", type=str, default='localhost',
+                        help="Host WebSocket (défaut : localhost)")
+    parser.add_argument("--port", type=int, default=8765,
+                        help="Port WebSocket (défaut : 8765)")
+    parser.add_argument("--no-browser", action="store_true",
+                        help="Ne pas ouvrir le navigateur")
+    args = parser.parse_args()
+
+    start(host=args.host, port=args.port, open_browser=not args.no_browser)
+
+
+if __name__ == "__main__":
+    run()

webdisplay-0.1.0/src/webdisplay/static/index.html

@@ -0,0 +1,515 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>WebDisplay</title>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500&display=swap');
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    :root {
+      --bg: #0d0f11;
+      --surface: #141618;
+      --border: #232628;
+      --accent: #4af0a0;
+      --accent2: #1aff8c;
+      --dim: #3a4040;
+      --text: #c8d0cc;
+      --text-dim: #556060;
+      --mono: 'IBM Plex Mono', monospace;
+      --sans: 'IBM Plex Sans', sans-serif;
+      --radius: 6px;
+    }
+
+    html,
+    body {
+      height: 100%;
+      background: var(--bg);
+      color: var(--text);
+      font-family: var(--sans);
+      font-size: 14px;
+      line-height: 1.5;
+    }
+
+    /* ── Layout ─────────────────────────────────────── */
+    body {
+      display: grid;
+      grid-template-rows: 48px 1fr;
+      grid-template-columns: 260px 1fr;
+      height: 100vh;
+      overflow: hidden;
+    }
+
+    /* ── Top bar ─────────────────────────────────────── */
+    header {
+      grid-column: 1 / -1;
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 0 20px;
+      border-bottom: 1px solid var(--border);
+      background: var(--surface);
+    }
+
+    .logo {
+      font-family: var(--mono);
+      font-size: 13px;
+      color: var(--accent);
+      letter-spacing: .04em;
+    }
+
+    .logo span {
+      color: var(--text-dim);
+    }
+
+    #status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--dim);
+      transition: background .3s;
+      flex-shrink: 0;
+    }
+
+    #status-dot.connected {
+      background: var(--accent);
+      box-shadow: 0 0 6px var(--accent);
+    }
+
+    #status-dot.reconnecting {
+      background: #f0a04a;
+      box-shadow: 0 0 6px #f0a04a;
+      animation: blink .8s ease-in-out infinite;
+    }
+
+    #status-dot.error {
+      background: #f04a4a;
+    }
+
+    @keyframes blink {
+
+      0%,
+      100% {
+        opacity: 1
+      }
+
+      50% {
+        opacity: .3
+      }
+    }
+
+    #status-text {
+      font-family: var(--mono);
+      font-size: 11px;
+      color: var(--text-dim);
+    }
+
+    .spacer {
+      flex: 1;
+    }
+
+    #counter {
+      font-family: var(--mono);
+      font-size: 11px;
+      color: var(--text-dim);
+    }
+
+    #ws-url-input {
+      font-family: var(--mono);
+      font-size: 11px;
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      color: var(--text);
+      padding: 4px 10px;
+      width: 220px;
+      outline: none;
+      transition: border-color .2s;
+    }
+
+    #ws-url-input:focus {
+      border-color: var(--accent);
+    }
+
+    button {
+      font-family: var(--mono);
+      font-size: 11px;
+      background: none;
+      border: 1px solid var(--dim);
+      border-radius: var(--radius);
+      color: var(--text-dim);
+      padding: 4px 12px;
+      cursor: pointer;
+      transition: border-color .2s, color .2s;
+    }
+
+    button:hover {
+      border-color: var(--accent);
+      color: var(--accent);
+    }
+
+    /* ── Sidebar ─────────────────────────────────────── */
+    aside {
+      background: var(--surface);
+      border-right: 1px solid var(--border);
+      overflow-y: auto;
+      padding: 12px 8px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    aside h2 {
+      font-family: var(--mono);
+      font-size: 10px;
+      text-transform: uppercase;
+      letter-spacing: .1em;
+      color: var(--text-dim);
+      padding: 4px 8px 8px;
+    }
+
+    .thumb-item {
+      border-radius: var(--radius);
+      border: 1px solid transparent;
+      overflow: hidden;
+      cursor: pointer;
+      transition: border-color .15s, opacity .15s;
+      flex-shrink: 0;
+    }
+
+    .thumb-item:hover {
+      border-color: var(--dim);
+    }
+
+    .thumb-item.active {
+      border-color: var(--accent);
+    }
+
+    .thumb-item img {
+      width: 100%;
+      display: block;
+      border-radius: 4px;
+    }
+
+    .thumb-meta {
+      padding: 4px 8px 6px;
+      font-family: var(--mono);
+      font-size: 10px;
+      color: var(--text-dim);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 4px;
+      overflow: hidden;
+    }
+
+    .thumb-title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 1;
+      color: var(--text);
+    }
+
+    /* ── Main viewer ─────────────────────────────────── */
+    main {
+      overflow: hidden;
+      display: grid;
+      grid-template-rows: 1fr 36px;
+      background: var(--bg);
+    }
+
+    #viewer {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      padding: 24px;
+      position: relative;
+    }
+
+    #viewer img {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+      border-radius: 4px;
+      display: none;
+      transition: opacity .25s;
+    }
+
+    #viewer img.visible {
+      display: block;
+    }
+
+    #empty-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 12px;
+      color: var(--text-dim);
+      font-family: var(--mono);
+      font-size: 12px;
+      text-align: center;
+      line-height: 2;
+    }
+
+    #empty-state .big {
+      font-size: 32px;
+      letter-spacing: .05em;
+      color: var(--dim);
+    }
+
+    /* flash on new image */
+    @keyframes flash {
+      0% {
+        opacity: .7
+      }
+
+      100% {
+        opacity: 1
+      }
+    }
+
+    .flash {
+      animation: flash .3s ease-out;
+    }
+
+    /* ── Status bar ──────────────────────────────────── */
+    footer {
+      border-top: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      padding: 0 16px;
+      gap: 20px;
+      font-family: var(--mono);
+      font-size: 10px;
+      color: var(--text-dim);
+    }
+
+    #img-info {
+      flex: 1;
+    }
+
+    #img-time {}
+
+    /* ── Scrollbar ───────────────────────────────────── */
+    aside::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    aside::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    aside::-webkit-scrollbar-thumb {
+      background: var(--dim);
+      border-radius: 2px;
+    }
+  </style>
+</head>
+
+<body>
+
+  <header>
+    <div class="logo">web<span>/</span>display</div>
+    <div id="status-dot"></div>
+    <div id="status-text">déconnecté</div>
+    <div class="spacer"></div>
+    <div id="counter">0 image(s)</div>
+    <input id="ws-url-input" type="text" value="ws://localhost:8765/view" spellcheck="false">
+    <button id="connect-btn" onclick="toggleConnection()">Connecter</button>
+    <button id="clear-btn" onclick="clearHistory()">Effacer</button>
+  </header>
+
+  <aside>
+    <h2>Historique</h2>
+    <div id="thumb-list"></div>
+  </aside>
+
+  <main>
+    <div id="viewer">
+      <div id="empty-state">
+        <div class="big">⬡</div>
+        <div>En attente d'images…</div>
+        <div>Connectez-vous au relay, puis lancez<br>votre script Python.</div>
+      </div>
+      <img id="main-img" alt="image reçue">
+    </div>
+    <footer>
+      <span id="img-info">—</span>
+      <span id="img-time">—</span>
+    </footer>
+  </main>
+
+  <script>
+    let ws = null;
+    let images = [];   // {title, data, time, size}
+    let current = -1;
+
+    // ── WebSocket ──────────────────────────────────────────────────────────────
+
+    function toggleConnection() {
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        ws.close();
+      } else {
+        connect();
+      }
+    }
+
+    function connect() {
+      const url = document.getElementById('ws-url-input').value.trim();
+      setStatus('reconnecting', 'connexion…');
+      document.getElementById('connect-btn').textContent = 'Annuler';
+
+      try {
+        ws = new WebSocket(url);
+      } catch (e) {
+        setStatus('error', 'URL invalide');
+        return;
+      }
+
+      ws.addEventListener('open', () => {
+        setStatus('connected', 'connecté · ' + url.replace('ws://', ''));
+        document.getElementById('connect-btn').textContent = 'Déconnecter';
+      });
+
+      ws.addEventListener('message', onMessage);
+
+      ws.addEventListener('close', () => {
+        setStatus('', 'déconnecté');
+        document.getElementById('connect-btn').textContent = 'Connecter';
+      });
+
+      ws.addEventListener('error', () => {
+        setStatus('error', 'erreur de connexion');
+      });
+    }
+
+    function setStatus(cls, text) {
+      const dot = document.getElementById('status-dot');
+      const txt = document.getElementById('status-text');
+      dot.className = cls;
+      txt.textContent = text;
+    }
+
+    // ── Messages ───────────────────────────────────────────────────────────────
+
+    function onMessage(event) {
+      let payload;
+      try { payload = JSON.parse(event.data); } catch (e) { return; }
+
+      const { title = '', data } = payload;
+      if (!data) return;
+
+      const entry = {
+        title: title || ('image-' + (images.length + 1)),
+        data,
+        time: new Date().toLocaleTimeString('fr-FR'),
+        // taille approximative en ko
+        size: Math.round(data.length * 0.75 / 1024) + ' ko'
+      };
+      images.push(entry);
+
+      addThumb(entry, images.length - 1);
+      showImage(images.length - 1);
+      document.getElementById('counter').textContent = images.length + ' image(s)';
+    }
+
+    // ── Thumbnails ─────────────────────────────────────────────────────────────
+
+    function addThumb(entry, idx) {
+      const list = document.getElementById('thumb-list');
+
+      const item = document.createElement('div');
+      item.className = 'thumb-item';
+      item.dataset.idx = idx;
+      item.onclick = () => showImage(idx);
+
+      const img = document.createElement('img');
+      img.src = 'data:image/png;base64,' + entry.data;
+      img.alt = entry.title;
+
+      const meta = document.createElement('div');
+      meta.className = 'thumb-meta';
+      meta.innerHTML = `
+      <span class="thumb-title">${escHtml(entry.title)}</span>
+      <span>${entry.time}</span>
+    `;
+
+      item.appendChild(img);
+      item.appendChild(meta);
+      list.appendChild(item);
+      item.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
+
+    // ── Viewer ──────────────────────────────────────────────────────────────────
+
+    function showImage(idx) {
+      if (idx < 0 || idx >= images.length) return;
+      current = idx;
+
+      const entry = images[idx];
+      const mainImg = document.getElementById('main-img');
+      const empty = document.getElementById('empty-state');
+
+      mainImg.src = 'data:image/png;base64,' + entry.data;
+      mainImg.classList.add('visible');
+      mainImg.classList.remove('flash');
+      void mainImg.offsetWidth; // reflow
+      mainImg.classList.add('flash');
+      empty.style.display = 'none';
+
+      document.getElementById('img-info').textContent =
+        `${entry.title}  ·  ${entry.size}`;
+      document.getElementById('img-time').textContent = entry.time;
+
+      // Mise à jour de la sélection dans la sidebar
+      document.querySelectorAll('.thumb-item').forEach(el => {
+        el.classList.toggle('active', parseInt(el.dataset.idx) === idx);
+      });
+    }
+
+    // ── Keyboard shortcuts ─────────────────────────────────────────────────────
+
+    document.addEventListener('keydown', e => {
+      if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') showImage(current - 1);
+      if (e.key === 'ArrowRight' || e.key === 'ArrowDown') showImage(current + 1);
+    });
+
+    // ── Helpers ────────────────────────────────────────────────────────────────
+
+    function escHtml(str) {
+      return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    }
+
+    // ── Clear history ──────────────────────────────────────────────────────────
+
+    function clearHistory() {
+      images = [];
+      current = -1;
+      document.getElementById('thumb-list').innerHTML = '';
+      document.getElementById('counter').textContent = '0 image(s)';
+
+      const mainImg = document.getElementById('main-img');
+      mainImg.src = '';
+      mainImg.classList.remove('visible');
+      document.getElementById('empty-state').style.display = '';
+      document.getElementById('img-info').textContent = '—';
+      document.getElementById('img-time').textContent = '—';
+    }
+
+    // Auto-connect au chargement
+    connect();
+  </script>
+</body>
+
+</html>

webdisplay-0.1.0/src/webdisplay.egg-info/PKG-INFO

@@ -0,0 +1,11 @@
+Metadata-Version: 2.4
+Name: webdisplay
+Version: 0.1.0
+Summary: Un toolkit pour vite coder un modèle pytorch d'IA utilisant MLflow
+Author-email: Jean-François Lecomte <zwergon@free.fr>
+License-Expression: Apache-2.0
+Requires-Python: >=3.10
+Description-Content-Type: text/markdown
+License-File: LICENSE
+Requires-Dist: websockets
+Dynamic: license-file

webdisplay-0.1.0/src/webdisplay.egg-info/SOURCES.txt

@@ -0,0 +1,13 @@
+LICENSE
+README.rst
+pyproject.toml
+src/webdisplay/__init__.py
+src/webdisplay/client.py
+src/webdisplay/server.py
+src/webdisplay.egg-info/PKG-INFO
+src/webdisplay.egg-info/SOURCES.txt
+src/webdisplay.egg-info/dependency_links.txt
+src/webdisplay.egg-info/entry_points.txt
+src/webdisplay.egg-info/requires.txt
+src/webdisplay.egg-info/top_level.txt
+src/webdisplay/static/index.html

webdisplay-0.1.0/src/webdisplay.egg-info/dependency_links.txt

@@ -0,0 +1 @@
+

webdisplay-0.1.0/src/webdisplay.egg-info/entry_points.txt

@@ -0,0 +1,2 @@
+[console_scripts]
+webdisplay_server = webdisplay.server:run

webdisplay-0.1.0/src/webdisplay.egg-info/requires.txt

@@ -0,0 +1 @@
+websockets

webdisplay-0.1.0/src/webdisplay.egg-info/top_level.txt

@@ -0,0 +1 @@
+webdisplay