deepboard 0.2.0__py3-none-any.whl

deepboard/gui/pages/main_page/right_panel/images.py

@@ -0,0 +1,358 @@
+from fasthtml.common import *
+from starlette.responses import Response
+from typing import *
+from deepboard.gui.components import Modal, SplitSelector, StatLine, ArtefactGroup
+
+def _get_images_groups(socket, type: Literal["IMAGE", "PLOT"]):
+    if type == "IMAGE":
+        images = socket.read_images()
+    else:
+        images = socket.read_figures()
+
+    index = list({(img["step"], img["epoch"], img["run_rep"], img["split"]) for img in images})
+
+    splits = list({elem[3] for elem in index})
+
+    # Package images
+    images_groups = {}
+    for key in index:
+        cropped_key = key[:-1]  # Remove split
+        if cropped_key not in images_groups:
+            images_groups[cropped_key] = {split: [] for split in splits}
+
+    for img in images:
+        key = img["step"], img["epoch"], img["run_rep"]
+        split = img["split"]
+        images_groups[key][split].append(img["id"])
+
+    # Sort image groups by step, and run_rep
+    return dict(sorted(images_groups.items(), key=lambda x: (x[0][0], x[0][2])))
+
+
+def ImageComponent(image_id: int):
+    """
+    Create a single image component with a specific style.
+    :param image: PIL Image object.
+    :return: Div containing the image.
+    """
+    return Div(
+        A(
+            Img(src=f"/images/id={image_id}", alt="Image"),
+            hx_get=f"/images/open_modal?id={image_id}",
+            hx_target="#modal",
+            hx_swap="outerHTML",
+            style='cursor: pointer;',
+        ),
+        cls="image",
+    )
+
+def InteractiveImage(image_id: int):
+    return Div(
+        Script(
+            """
+    // For image zoom and pan in modal
+    var scale = 1;
+    var translateX = 0;
+    var translateY = 0;
+    var zoomableDiv = document.getElementById('zoomableDiv');
+    var container = document.querySelector('.interactive-image-container');
+
+    // Mouse/touch state
+    var isDragging = false;
+    var lastX = 0;
+    var lastY = 0;
+
+    // Apply transform with both scale and translate
+    function applyTransform() {
+        zoomableDiv.style.transform = `scale(${scale}) translate(${translateX}px, ${translateY}px)`;
+    }
+
+    // Mouse wheel and trackpad zoom
+    var lastWheelTime = 0;
+    var wheelAccumulator = 0;
+
+    container.addEventListener('wheel', (e) => {
+        e.preventDefault();
+
+        const currentTime = Date.now();
+        const timeDelta = currentTime - lastWheelTime;
+
+        // Detect if this is likely a Mac trackpad (rapid events with ctrlKey)
+        const isMacTrackpad = e.ctrlKey || (timeDelta < 50 && Math.abs(e.deltaY) > 10);
+
+        let zoomFactor;
+        if (isMacTrackpad) {
+            // For Mac trackpad: use smaller, more gradual changes
+            // Accumulate small changes for smoother zooming
+            wheelAccumulator += e.deltaY;
+
+            // Only apply zoom when accumulator reaches threshold
+            if (Math.abs(wheelAccumulator) > 20) {
+                zoomFactor = wheelAccumulator > 0 ? 0.95 : 1.05;
+                wheelAccumulator *= 0.7; // Reduce accumulator but don't reset completely
+            } else {
+                lastWheelTime = currentTime;
+                return; // Skip this event
+            }
+        } else {
+            // For regular mouse wheel: use normal zoom steps
+            zoomFactor = e.deltaY > 0 ? 0.9 : 1.1;
+            wheelAccumulator = 0; // Reset accumulator for mouse wheel
+        }
+
+        const newScale = Math.max(0.5, Math.min(3, scale * zoomFactor));
+
+        // Get cursor position relative to container
+        const rect = container.getBoundingClientRect();
+        const mouseX = e.clientX - rect.left - rect.width / 2;
+        const mouseY = e.clientY - rect.top - rect.height / 2;
+
+        // Adjust translation to zoom towards cursor position
+        const scaleRatio = newScale / scale;
+        translateX = mouseX * (1 - scaleRatio) + translateX * scaleRatio;
+        translateY = mouseY * (1 - scaleRatio) + translateY * scaleRatio;
+
+        scale = newScale;
+        lastWheelTime = currentTime;
+        applyTransform();
+    });
+
+    // Mouse drag for panning
+    container.addEventListener('mousedown', (e) => {
+        if (scale > 1) { // Only allow panning when zoomed
+            isDragging = true;
+            lastX = e.clientX;
+            lastY = e.clientY;
+            container.style.cursor = 'grabbing';
+            e.preventDefault();
+        }
+    });
+
+    document.addEventListener('mousemove', (e) => {
+        if (isDragging) {
+            const deltaX = e.clientX - lastX;
+            const deltaY = e.clientY - lastY;
+
+            translateX += deltaX / scale; // Adjust for current scale
+            translateY += deltaY / scale;
+
+            lastX = e.clientX;
+            lastY = e.clientY;
+
+            applyTransform();
+            e.preventDefault();
+        }
+    });
+
+    document.addEventListener('mouseup', () => {
+        if (isDragging) {
+            isDragging = false;
+            container.style.cursor = scale > 1 ? 'grab' : 'default';
+        }
+    });
+
+    // Touch zoom (pinch)
+    var initialDistance = 0;
+    var initialScale = 1;
+    var touchStartX = 0;
+    var touchStartY = 0;
+    var initialTranslateX = 0;
+    var initialTranslateY = 0;
+
+    container.addEventListener('touchstart', (e) => {
+        if (e.touches.length === 2) {
+            // Two finger pinch zoom
+            initialDistance = getDistance(e.touches[0], e.touches[1]);
+            initialScale = scale;
+            e.preventDefault();
+        } else if (e.touches.length === 1 && scale > 1) {
+            // Single finger pan when zoomed
+            isDragging = true;
+            touchStartX = e.touches[0].clientX;
+            touchStartY = e.touches[0].clientY;
+            initialTranslateX = translateX;
+            initialTranslateY = translateY;
+            e.preventDefault();
+        }
+    });
+
+    container.addEventListener('touchmove', (e) => {
+        if (e.touches.length === 2) {
+            // Handle pinch zoom
+            const currentDistance = getDistance(e.touches[0], e.touches[1]);
+            const ratio = currentDistance / initialDistance;
+            const dampedRatio = 1 + (ratio - 1) * 0.5; // 50% sensitivity
+            scale = Math.max(0.5, Math.min(3, initialScale * dampedRatio));
+            applyTransform();
+            e.preventDefault();
+        } else if (e.touches.length === 1 && isDragging) {
+            // Handle single finger pan
+            const deltaX = e.touches[0].clientX - touchStartX;
+            const deltaY = e.touches[0].clientY - touchStartY;
+
+            translateX = initialTranslateX + deltaX / scale;
+            translateY = initialTranslateY + deltaY / scale;
+
+            applyTransform();
+            e.preventDefault();
+        }
+    });
+
+    container.addEventListener('touchend', (e) => {
+        if (e.touches.length === 0) {
+            isDragging = false;
+        }
+    });
+
+    // Reset on double click/tap
+    container.addEventListener('dblclick', () => {
+        scale = 1;
+        translateX = 0;
+        translateY = 0;
+        applyTransform();
+        container.style.cursor = 'default';
+    });
+
+    // Update cursor based on zoom level
+    container.addEventListener('mouseenter', () => {
+        container.style.cursor = scale > 1 ? 'grab' : 'default';
+    });
+
+    function getDistance(touch1, touch2) {
+        const dx = touch1.clientX - touch2.clientX;
+        const dy = touch1.clientY - touch2.clientY;
+        return Math.sqrt(dx * dx + dy * dy);
+    }
+
+    // Prevent context menu on long press for mobile
+    container.addEventListener('contextmenu', (e) => {
+        e.preventDefault();
+    });
+            """
+        ),
+        Div(
+            Div(
+                Img(src=f"/images/id={image_id}", alt="Image"),
+                cls="interactive-image",
+                id="zoomableDiv",
+                style="transition: transform 0.1s ease-out;"
+            ),
+            cls="interactive-image-container",
+            style="overflow: hidden; position: relative; user-select: none; touch-action: none;"
+        )
+    )
+
+
+
+def ImageCard(runID: int, step: int, epoch: Optional[int], run_rep: int, img_type: Literal["IMAGE", "PLOT"],
+              selected: Optional[str] = None):
+    from __main__ import rTable
+
+    socket = rTable.load_run(runID)
+    data = _get_images_groups(socket, type=img_type)
+
+    if (step, epoch, run_rep) not in data:
+        avail_splits = []
+        images = []
+    else:
+        images_splits = data[(step, epoch, run_rep)]
+        avail_splits = list(images_splits.keys())
+        avail_splits.sort()
+        if selected is None:
+            selected = avail_splits[0]
+        images = images_splits[selected]
+
+    return Div(
+        Div(
+            SplitSelector(runID, avail_splits, selected=selected, step=step, epoch=epoch, run_rep=run_rep,
+                          type=img_type, path="/images/change_split"),
+            Div(
+                StatLine("Step", str(step)),
+                StatLine("Epoch", str(epoch) if epoch is not None else "N/A"),
+                StatLine("Run Repetition", str(run_rep)),
+                cls="artefact-stats-column"
+            ),
+            cls="artefact-card-header",
+        ),
+        ArtefactGroup(*[ImageComponent(image_id) for image_id in images]),
+        id=f"artefact-card-{step}-{epoch}-{run_rep}",
+        cls="artefact-card",
+    )
+
+def ImageTab(session, runID, type: Literal["IMAGE", "PLOT"], swap: bool = False):
+    from __main__ import rTable
+    socket = rTable.load_run(runID)
+
+    images_groups = _get_images_groups(socket, type=type)
+    return Div(
+        *[
+            ImageCard(runID, step, epoch, run_rep, img_type=type)
+            for step, epoch, run_rep in images_groups.keys()
+        ],
+        style="display; flex; flex-direction: column; align-items: center; justify-content: center;",
+        id="images-tab",
+        hx_swap_oob="true" if swap else None,
+    )
+
+
+def images_enable(runID, type: Literal["IMAGES", "PLOT"]):
+    """
+    Check if some scalars are logged and available for the runID. If not, we consider disable it.
+    :param runID: The runID to check.
+    :return: True if scalars are available, False otherwise.
+    """
+    from __main__ import rTable
+    socket = rTable.load_run(runID)
+    if type == "IMAGES":
+        return len(socket.read_images()) > 0
+    else:
+        return len(socket.read_figures()) > 0
+
+# routes
+def build_images_routes(rt):
+    rt("/images/change_split")(change_split)
+    rt("/images/id={image_id}")(load_image)
+    rt("/images/open_modal")(open_image_modal)
+
+
+def change_split(session, runID: int, step: int, epoch: Optional[int], run_rep: int, split_select: str, type: str):
+    """
+    Change the split for the images.
+    :param session: The session object.
+    :param step: The step of the images.
+    :param epoch: The epoch of the images.
+    :param run_rep: The run repetition of the images.
+    :param split: The split to change to.
+    :param type: The type of split to change.
+    :return: The updated image card HTML.
+    """
+    return ImageCard(
+        runID,
+        step,
+        epoch,
+        run_rep,
+        img_type=type,
+        selected=split_select,
+    )
+
+def load_image(image_id: int):
+    from __main__ import rTable
+    img = rTable.get_image_by_id(image_id)
+    if img is None:
+        return Response(f"Image not found with id: {image_id}:(", status_code=404)
+    img_buffer = io.BytesIO()
+    img.save(img_buffer, format='PNG')
+    img_buffer.seek(0)
+
+    return Response(
+        content=img_buffer.getvalue(),
+        media_type="image/png"
+    )
+
+def open_image_modal(session, id: int):
+    return Modal(
+        InteractiveImage(
+            id
+        ),
+        active=True,
+    )

deepboard/gui/pages/main_page/right_panel/run_info.py

@@ -0,0 +1,86 @@
+from typing import *
+from datetime import datetime, timedelta
+from fasthtml.common import *
+from markupsafe import Markup
+
+
+def CopyToClipboard(text: str, cls):
+    return Div(
+        Span(
+            I(cls=f'fas fa-copy copy-icon default-icon {cls}'),
+            I(cls=f'fas fa-check copy-icon check-icon {cls}'),
+            cls='copy-icon-container',
+        ),
+        Span(text, cls='copy-text' + ' ' + cls),
+        onclick='copyToClipboard(this)',
+        cls='copy-container'
+    )
+
+def Status(runID: int, status: Literal["running", "finished", "failed"], swap: bool = False):
+    swap_oob = dict(swap_oob="true") if swap else {}
+    return Select(
+            Option("Running", value="running", selected=status == "running", cls="run-status-option running"),
+            Option("Finished", value="finished", selected=status == "finished", cls="run-status-option finished"),
+            Option("Failed", value="failed", selected=status == "failed", cls="run-status-option failed"),
+            id=f"runstatus-select",
+            name="run_status",
+            hx_get=f"/runinfo/change_status?runID={runID}",
+            hx_target="#runstatus-select",
+            hx_trigger="change",
+            hx_swap="outerHTML",
+            hx_params="*",
+            **swap_oob,
+            cls="run-status-select" + " " + status,
+        )
+
+def DiffView(diff: Optional[str]):
+    diff_parts = diff.splitlines() if diff else [""]
+    dff = []
+    for part in diff_parts:
+        dff.append(P(Markup(part), cls="config-part"))
+    return Div(
+        H2("Diff"),
+            Div(
+                *dff,
+                cls="file-view",
+            )
+        )
+
+
+def InfoView(runID: int):
+    from __main__ import rTable
+    # Cli
+    row = rTable.fetch_experiment(runID)
+    # RunID, Exp name, cfg, cfg hash, cli, command, comment, start, status, commit, diff
+    start: datetime = datetime.fromisoformat(row[7])
+    status = row[8]
+    commit = row[9]
+    diff = row[10]
+    return (Table(
+            Tr(
+                Td(H3("Start", cls="info-label")),
+                Td(H3(start.strftime("%Y-%m-%d %H:%M:%S"), cls="info-value")),
+            ),
+            Tr(
+                Td(H3("Status", cls="info-label")),
+                Td(Status(runID, status), cls="align-right"),
+            ),
+            Tr(
+                Td(H3("Commit", cls="info-label")),
+                Td(CopyToClipboard(commit, cls="info-value"), cls="align-right"),
+            ),
+            cls="info-table",
+        ),
+        DiffView(diff))
+
+
+
+# Routes
+def build_info_routes(rt):
+    rt("/runinfo/change_status")(change_status)
+
+def change_status(session, runID: int, run_status: str):
+    from __main__ import rTable
+    socket = rTable.load_run(runID)
+    socket.set_status(run_status)
+    return Status(runID, run_status, swap=True)

deepboard/gui/pages/main_page/right_panel/scalars.py

@@ -0,0 +1,251 @@
+import plotly.graph_objects as go
+import pandas as pd
+from typing import *
+from datetime import datetime, timedelta
+from fasthtml.common import *
+from fh_plotly import plotly2fasthtml
+from deepboard.gui.components import Legend, Smoother, ChartType, LogSelector
+from deepboard.gui.utils import get_lines, make_fig
+
+def make_step_lines(socket, splits: set[str], metric: str, keys: set[tuple[str, str]]):
+    from __main__ import CONFIG
+    lines = []
+    for i, split in enumerate(splits):
+        tag = (split, metric)
+        if tag in keys:
+            reps = get_lines(socket, split, metric, key="step")
+
+            if len(reps) > 1:
+                for rep_idx, rep in enumerate(reps):
+                    lines.append((
+                        f'{split}_{rep_idx}',
+                        rep["index"],
+                        rep["value"],
+                        CONFIG.COLORS[i % len(CONFIG.COLORS)],
+                        rep["epoch"],
+                    ))
+            else:
+                lines.append((
+                    f'{split}',
+                    reps[0]["index"],
+                    reps[0]["value"],
+                    CONFIG.COLORS[i % len(CONFIG.COLORS)],
+                    reps[0]["epoch"],
+                ))
+    return lines
+
+def make_time_lines(socket, splits: set[str], metric: str, keys: set[tuple[str, str]]):
+    from __main__ import CONFIG
+    lines = []
+    for i, split in enumerate(splits):
+        tag = (split, metric)
+        if tag in keys:
+            reps = get_lines(socket, split, metric, key="duration")
+
+            if len(reps) > 1:
+                for rep_idx, rep in enumerate(reps):
+                    lines.append((
+                        f'{split}_{rep_idx}',
+                        rep["index"],
+                        rep["value"],
+                        CONFIG.COLORS[i % len(CONFIG.COLORS)],
+                        rep["epoch"],
+                    ))
+            else:
+                lines.append((
+                    f'{split}',
+                    reps[0]["index"],
+                    reps[0]["value"],
+                    CONFIG.COLORS[i % len(CONFIG.COLORS)],
+                    reps[0]["epoch"],
+                ))
+    return lines
+
+
+
+def Setup(session, labels: list[tuple]):
+    return Div(
+        H1("Setup", cls="chart-scalar-title"),
+        Div(
+            Div(
+                Smoother(session, path = "/scalars", selected_rows_key="datagrid", session_path="scalars"),
+                ChartType(session, path = "/scalars", selected_rows_key="datagrid", session_path="scalars"),
+                LogSelector(session, path = "/scalars", selected_rows_key="datagrid", session_path="scalars"),
+                style="width: 100%; margin-right: 1em; display: flex; flex-direction: column; align-items: flex-start",
+            ),
+            Legend(session, labels, path = "/scalars", selected_rows_key="datagrid"),
+            cls="chart-setup-container",
+        ),
+        cls="chart-setup",
+    )
+# Components
+def Chart(session, runID: int, metric: str, type: str = "step", running: bool = False, logscale: bool = False):
+    from __main__ import rTable
+    socket = rTable.load_run(runID)
+    keys = socket.formatted_scalars
+    # metrics = {label for split, label in keys}
+    splits = {split for split, label in keys}
+    hidden_lines = session["scalars"]["hidden_lines"] if "hidden_lines" in session["scalars"] else []
+    smoothness = session["scalars"]["smoother_value"] - 1 if "smoother_value" in session["scalars"] else 0
+    if type == "step":
+        lines = make_step_lines(socket, splits, metric, keys)
+    elif type == "time":
+        lines = make_time_lines(socket, splits, metric, keys)
+    else:
+        raise ValueError(f"Unknown plotting type: {type}")
+
+    # # Sort lines by label
+    lines.sort(key=lambda x: x[0])
+    # Hide lines if needed
+    lines = [line for line in lines if line[0] not in hidden_lines]
+    fig = make_fig(lines, type=type, smoothness=smoothness, log_scale=logscale)
+
+    if running:
+        update_params = dict(
+            hx_get=f"/scalars/chart?runID={runID}&metric={metric}&type={type}&running={running}&logscale={logscale}",
+            hx_target=f"#chart-container-{runID}-{metric}",
+            hx_trigger="every 10s",
+            hx_swap="outerHTML",
+        )
+    else:
+        update_params = {}
+    return Div(
+            plotly2fasthtml(fig, js_options=dict(responsive=True)),
+            cls="chart-container",
+            id=f"chart-container-{runID}-{metric}",
+            **update_params
+        )
+
+def LoadingChart(session, runID: int, metric: str, type: str, running: bool = False, logscale: bool = False):
+    return Div(
+        Div(
+            H1(metric, cls="chart-title"),
+            cls="chart-header",
+            id=f"chart-header-{runID}-{metric}"
+        ),
+        Div(
+            cls="chart-container",
+            id=f"chart-container-{runID}-{metric}",
+            hx_get=f"/scalars/chart?runID={runID}&metric={metric}&type={type}&running={running}&logscale={logscale}",
+            hx_target=f"#chart-container-{runID}-{metric}",
+            hx_trigger="load",
+        ),
+        cls="chart",
+        id=f"chart-{runID}-{metric}",
+    )
+
+def Charts(session, runID: int, swap: bool = False, status: Literal["running", "finished", "failed"] = "running"):
+    from __main__ import rTable
+    socket = rTable.load_run(runID)
+    keys = socket.formatted_scalars
+    metrics = {label for split, label in keys}
+    type = session["scalars"]["chart_type"] if "chart_type" in session["scalars"] else "step"
+    logscale = session["scalars"]["chart_scale"] == "log" if "chart_scale" in session["scalars"] else False
+    out = Div(
+            H1("Charts", cls="chart-scalar-title"),
+        Ul(
+            *[
+                Li(LoadingChart(session, runID, metric, type=type, running=status == "running", logscale=logscale), cls="chart-list-item")
+                for metric in metrics
+            ],
+            cls="chart-list",
+        ),
+        cls="chart-section",
+        id=f"charts-section",
+        hx_swap_oob="true" if swap else None,
+    )
+    return out
+
+def ScalarTab(session, runID, swap: bool = False):
+    from __main__ import CONFIG, rTable
+    if 'hidden_lines' not in session["scalars"]:
+        session["scalars"]['hidden_lines'] = []
+    socket = rTable.load_run(runID)
+    keys = socket.formatted_scalars
+    splits = {split for split, label in keys}
+    # Get repetitions
+    available_rep = socket.get_repetitions()
+    if len(available_rep) > 1:
+        line_names = [(f'{split}_{rep}', CONFIG.COLORS[i % len(CONFIG.COLORS)], f'{split}_{rep}' in session["scalars"]['hidden_lines']) for i, split in enumerate(splits) for rep in
+                      available_rep]
+    else:
+        line_names = [(f'{split}', CONFIG.COLORS[i % len(CONFIG.COLORS)], f'{split}' in session["scalars"]['hidden_lines']) for i, split in enumerate(splits)]
+    # Sort lines by label
+    line_names.sort(key=lambda x: x[0])
+    status = socket.status
+    return Div(
+        Setup(session, line_names),
+        Charts(session, runID, status=status),
+        style="display; flex; width: 40vw; flex-direction: column; align-items: center; justify-content: center;",
+        id="scalar-tab",
+        hx_swap_oob="true" if swap else None,
+    )
+
+def scalar_enable(runID):
+    """
+    Check if some scalars are logged and available for the runID. If not, we consider disable it.
+    :param runID: The runID to check.
+    :return: True if scalars are available, False otherwise.
+    """
+    from __main__ import rTable
+    socket = rTable.load_run(runID)
+    keys = socket.formatted_scalars
+    return len(keys) > 0
+
+def build_scalar_routes(rt):
+    rt("/scalars/change_chart")(change_chart_type)
+    rt("/scalars/hide_line")(hide_line)
+    rt("/scalars/show_line")(show_line)
+    rt("/scalars/change_smoother")(change_smoother)
+    rt("/scalars/change_scale")(change_chart_scale)
+    rt("/scalars/chart")(load_chart)
+
+
+# Interactive Routes
+def change_chart_type(session, runIDs: str, step: bool):
+    new_type = "time" if step else "step"
+    session["scalars"]["chart_type"] = new_type
+    runIds = runIDs.split(",")
+    runID = runIds[0]
+    return (
+        ChartType(session, path="/scalars", selected_rows_key="datagrid", session_path="scalars"), # We want to toggle it
+        Charts(session, int(runID), swap=True)
+            )
+
+def hide_line(session, runIDs: str, label: str):
+    if 'hidden_lines' not in session["scalars"]:
+        session["scalars"]['hidden_lines'] = []
+    runIds = runIDs.split(",")
+    runID = runIds[0]
+    session["scalars"]['hidden_lines'].append(label)
+    return ScalarTab(session, runID, swap=True)
+
+
+def show_line(session, runIDs: str, label: str):
+    if 'hidden_lines' not in session["scalars"]:
+        session["scalars"]['hidden_lines'] = []
+    runIds = runIDs.split(",")
+    runID = runIds[0]
+    if label in session["scalars"]['hidden_lines']:
+        session["scalars"]['hidden_lines'].remove(label)
+
+    return ScalarTab(session, runID, swap=True)
+
+def change_smoother(session, runIDs: str, smoother: int):
+    session["scalars"]["smoother_value"] = smoother
+    runIds = runIDs.split(",")
+    runID = runIds[0]
+    return ScalarTab(session, runID, swap=True)
+
+def change_chart_scale(session, runIDs: str, log: bool):
+    new_type = "default" if log else "log"
+    session["scalars"]["chart_scale"] = new_type
+    runIds = runIDs.split(",")
+    runID = runIds[0]
+    return (
+        LogSelector(session, path="/scalars", selected_rows_key="datagrid", session_path="scalars"), # We want to toggle it
+        Charts(session, int(runID), swap=True)
+            )
+
+def load_chart(session, runID: int, metric: str, type: str, running: bool, logscale: bool):
+    return Chart(session, runID, metric, type, running, logscale=logscale)