deepboard 0.2.0__py3-none-any.whl

deepboard/gui/assets/datagrid.css

@@ -0,0 +1,120 @@
+@import url('theme.css');
+.data-grid {
+  width: 100%;
+  border-collapse: collapse;
+  border-radius: 8px;
+}
+
+.data-grid td {
+  padding: 1em;
+  text-align: left;
+}
+
+.data-grid tr:nth-child(even) {
+  background-color: var(--dg-even-row-bg);
+}
+
+.data-grid td {
+  border-bottom: 1px solid var(--dg-border-color);
+  white-space: nowrap;
+}
+
+/* Sticky header */
+.data-grid thead th {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background-color: var(--dg-header-bg);
+  color: var(--dg-header-color);
+  border-bottom: 1px solid var(--dg-border-color);
+  white-space: nowrap;
+}
+.data-grid thead th div {
+  background-color: inherit;
+  padding: 1em; /* or whatever spacing you want */
+}
+
+/* Sticky first column */
+.data-grid tbody td:first-child,
+.data-grid thead th:first-child {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  background-color: var(--dg-header-bg);
+}
+
+/* Make sure the header cell in the top-left corner stays above others */
+.data-grid thead th:first-child {
+  z-index: 3;
+}
+
+.scroll-container {
+  max-height: 60vh; /* adjust as needed */
+  max-width: 50vw;
+  overflow: auto;
+  position: relative;
+  box-shadow: var(--dg-shadow);
+  border-radius: var(--dg-border-radius);
+}
+
+.fullscreen{
+  max-width: 95vw;
+}
+.sortable {
+  background-color: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  padding: 1rem;
+  cursor: pointer;
+}
+
+.rename-input {
+  color: var(--dg-header-color);
+  font-family: system-ui, sans-serif;
+  padding: 0.5rem;
+  font-size: 1rem;
+  background-color: var(--dg-header-active);
+  border: none;              /* No border */
+  border-radius: 0.5rem;     /* Smooth rounded corners */
+  outline: none;             /* Removes the default focus outline */
+}
+
+.sortable:hover {
+  background-color: var(--dg-header-active);
+}
+
+.sort-icon {
+  visibility: hidden;
+  font-size: 1.2rem;
+  color: var(--dg-header-secondary-color);
+  padding-left: 0.5rem;
+}
+
+.sortable:hover .sort-icon {
+  visibility: visible;
+}
+
+.table-container {
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.table-row{
+    cursor: pointer;
+}
+
+.table-row-hidden{
+  color: var(--dg-disabled-color);
+}
+.data-grid tbody tr:hover{
+    background-color: var(--dg-row-hover);
+}
+
+.table-row-selected {
+  background-color: var(--dg-row-selected) !important;
+}

deepboard/gui/assets/fileview.css

@@ -0,0 +1,13 @@
+.config-part {
+    font-size: 1em;
+    font-family: monospace;
+    color: var(--fv-color);
+    margin: 0;
+    white-space: pre-wrap;
+}
+.file-view {
+    background-color: var(--fv-bg);
+    padding: 1em;
+    border-radius: 0.25em;
+    overflow: auto;
+}

deepboard/gui/assets/right_panel.css

@@ -0,0 +1,227 @@
+
+.right-panel {
+  position: relative;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.right-panel-closed{
+  width: 0;
+  visibility: hidden;
+}
+.right-panel-placeholder {
+  color: var(--secondary-text-color);
+  font-size: 1.1rem;
+}
+
+.close-button {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  background: none;
+  border: none;
+  color: var(--secondary-text-color);
+  font-size: 2rem;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.close-button:hover {
+  color: var(--text_color);
+}
+
+.open-right-panel{
+    display: flex;
+    height: 100%;
+    width: 100%;
+    max-width: 49vw;
+    justify-content: right;
+    padding-top: 2rem;
+}
+
+h1 {
+padding: 0;
+margin: 0;
+}
+
+/* styles.css */
+
+.tab-menu {
+  display: flex;
+  margin-bottom: 0;
+  margin-top: 1rem;
+  max-width: 98%;
+  overflow-x: auto;
+}
+
+.tab {
+  padding: 0.75rem 1.5rem;
+  cursor: pointer;
+  background-color: var(--sp-tab-bg); /* Slightly darker than unselected tab */
+  color: var(--sp-color);
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  transition: background-color 0.2s ease;
+}
+
+.tab:hover {
+  background-color: var(--sp-tab-bg-hover);
+}
+
+.tab.active {
+  background-color: var(--sp-bg-color);
+}
+
+.tab-content {
+  background-color: var(--sp-bg-color);
+  padding: 2rem;
+  border-top: none;
+  border-radius: 0 10px 10px 10px;
+  color: var(--sp-color);
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.right-panel-content{
+width: 90%;
+height: 80vh;
+}
+
+.info-table {
+border-collapse: collapse;
+  width: 100%;
+}
+
+.info-table tr {
+    border-top: 1px solid var(--sp-color);
+}
+
+.info-table td {
+    padding: 1em;
+}
+
+/* Remove the first border */
+.info-table tr:first-child {
+  border-top: none;
+}
+
+.info-table tr:hover {
+  background-color: var(--sp-bg-hover);
+}
+
+.info-label {
+  font-weight: bold;
+  color: var(--sp-accent-color);
+  padding: 0;
+  margin: 0;
+}
+
+.info-value {
+  color: var(--sp-color);
+  font-weight: normal;
+  text-align: right;
+  font-size: 1.1rem;
+  padding: 0;
+  margin: 0;
+}
+
+  /* HParams table*/
+.hparams-table {
+  width: 100%;
+  border-collapse: collapse;
+  background-color: var(--sp-table-bg);
+  color: var(--sp-table-color);
+  border-radius: 8px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  font-size: 0.95rem;
+  box-shadow: var(--sp-table-shadow);
+}
+
+.hparams-table th,
+.hparams-table td {
+  padding: 0.6em 1em;
+  text-align: left;
+  /*border-bottom: 1px solid #2e2e2e;*/
+}
+
+.hparams-table th {
+  background-color: var(--sp-table-header-bg);
+  color: var(--sp-table-header-color);
+  font-weight: 600;
+}
+
+.hparams-table tr:last-child td {
+  border-bottom: none;
+}
+
+.hparams-table tr:hover td {
+  background-color: var(--sp-table-hover-bg);
+  transition: background-color 0.2s ease-in-out;
+}
+
+/* Optional: make long values break nicely */
+.hparams-table td {
+  word-break: break-word;
+}
+
+/*Status menu in setup*/
+.run-status-select {
+  appearance: none;
+  background-color: var(--sp-bg-color);
+  color: var(--sp-color);
+  border: 1px solid var(--sp-color);
+  border-radius: 8px;
+  padding: 0.5em 24px;
+  padding-left: 12px;
+  font-size: 1rem;
+  outline: none;
+  transition: border 0.1s ease, box-shadow 0.1s ease;
+  cursor: pointer;
+
+  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath fill='%23ccc' d='M7 10L0 0h14z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  background-size: 10px;
+}
+
+
+/* Dynamic styles based on selected status */
+.run-status-select.running {
+  color: var(--success-color);
+  border-color: var(--success-color);
+  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath fill='%234caf50' d='M7 10L0 0h14z'/%3E%3C/svg%3E");
+}
+
+.run-status-select.finished {
+  color: var(--neutral-color);
+  border-color: var(--neutral-color);
+  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath fill='%239e9e9e' d='M7 10L0 0h14z'/%3E%3C/svg%3E");
+}
+
+.run-status-select.failed {
+  color: var(--failure-color);
+  border-color: var(--failure-color);
+  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath fill='%23f44336' d='M7 10L0 0h14z'/%3E%3C/svg%3E");
+}
+
+.run-status-select.running:hover {
+  box-shadow: 0 0 6px var(--success-shadow-color);
+  border-color: var(--success-color);
+  transition: border 0.2s ease, box-shadow 0.2s ease;
+}
+
+.run-status-select.finished:hover {
+  box-shadow: 0 0 6px var(--neutral-shadow-color);
+  border-color: var(--neutral-color);
+  transition: border 0.2s ease, box-shadow 0.2s ease;
+}
+
+.run-status-select.failed:hover {
+  box-shadow: 0 0 6px var(--failure-shadow-color);
+  border-color: var(--failure-color);
+  transition: border 0.2s ease, box-shadow 0.2s ease;
+}

deepboard/gui/assets/theme.css

@@ -0,0 +1,85 @@
+:root {
+    /*General*/
+    --background-color: #121212;
+    --text_color: #e0e0e0;
+    --secondary-text-color: #ccc;
+    --primary-color: #50A76F;
+    --primary-color-hover: #6FBF91;
+    --button-shadow-color: rgba(255, 255, 255, 0.15);
+
+    --success-color: #4caf50;
+    --success-shadow-color: #4caf50aa;
+    --failure-color: #f44336;
+    --failure-shadow-color: #f44336aa;
+    --neutral-color: #9e9e9e;
+    --neutral-shadow-color: #9e9e9eaa;
+
+    /*Right-click menu*/
+    --menu-bg: #222;
+    --menu-bg-hover: #333;
+    --menu-border: 1px solid #555;
+    --menu-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
+
+    /*Datagrid*/
+    --dg-even-row-bg: #1a1a1a;
+    --dg-border-color: #333;
+    --dg-header-color: var(--secondary-text-color);
+    --dg-header-secondary-color: #888;
+    --dg-header-bg: #2a2a2a;
+    --dg-shadow: 0 -1px 7px 0.5px rgba(255, 255, 255, 0.2);
+    --dg-border-radius: 8px;
+    --dg-header-active: #4d4d4d;
+    --dg-disabled-color: #555;
+    --dg-row-hover: #242424;
+    --dg-row-selected: #2a2a2a;
+
+    /*Side panel - right*/
+    --sp-color: var(--secondary-text-color);
+    --sp-accent-color: #fff;
+    --sp-bg-color: #2a2a2a;
+    --sp-bg-hover: #2F2F2F;
+    --sp-tab-bg: #1a1a1a;
+    --sp-tab-bg-hover: #4d4d4d;
+
+    --sp-table-bg: #1e1e1e;
+    --sp-table-color: var(--secondary-text-color);
+    --sp-table-hover-bg: #2c2c2c;
+    --sp-table-header-color: #eee;
+    --sp-table-header-bg: #2a2a2a;
+    --sp-table-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.05);
+
+
+
+    /*File viewer*/
+    --fv-color: #bbb;
+    --fv-bg: #1e1e1e;
+
+    /*Charts*/
+    --chart-legend-bg: #4d4d4d;
+    --chart-legend-bg-hover: #333;
+    --chart-legend-color: var(--secondary-text-color);
+
+    --chart-section-title: #fff;
+    --chart-section-title-line: 2px solid var(--secondary-text-color);
+    --chart-metric-color: #fff;
+    --chart-setup-title: #fff;
+    --chart-disabled-color: #555;
+    --chart-typebox-shadow: 0 0 6px rgba(30, 144, 255, 0.5);
+
+    /*Artefacts (i.e. images, plots, text, etx)*/
+    --artefacts-card-bg: #1a1a1a;
+    --artefacts-card-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.05);
+    --artefacts-card-radius: 8px;
+    --artefacts-header-line: 2px solid #333;
+    --artefacts-image_size: 10em;
+    --artefacts-text-color: var(--secondary-text-color);
+    --artefacts-text-font: monospace;
+
+    /*Compare page*/
+    --cmp-card-bg: #2a2a2a;
+    --cmp-card-shadow: 0 1px 7px 0.5px rgba(255, 255, 255, 0.2);
+    --cmp-card-color: var(--secondary-text-color);
+    --cmp-chart-title: var(--secondary-text-color);
+    --cmp-accordion-color: var(--secondary-text-color);
+    --cmp-accordion-color-hover: #4d4d4d;
+}

deepboard/gui/components/__init__.py

@@ -0,0 +1,8 @@
+from .chart_type import ChartType
+from .legend import Legend
+from .smoother import Smoother
+from .log_selector import LogSelector
+from .modal import Modal
+from .split_selector import SplitSelector
+from .stat_line import StatLine
+from .artefact_group import ArtefactGroup

deepboard/gui/components/artefact_group.py

@@ -0,0 +1,12 @@
+from fasthtml.common import *
+
+def ArtefactGroup(*artefacts):
+    """
+    Create a group of images in a flex container that adapts to the number of images.
+    :param images: List of PIL Image objects.
+    :return: Div containing the images.
+    """
+    return Div(
+        *artefacts,
+        cls="artefact-group-container",
+    )

deepboard/gui/components/chart_type.py

@@ -0,0 +1,22 @@
+from fasthtml.common import *
+
+def ChartType(session, path: str, selected_rows_key: str, session_path: str):
+    if selected_rows_key in session and "selected-rows" in session[selected_rows_key] and len(session[selected_rows_key]["selected-rows"]) > 0:
+        runIDs = session[selected_rows_key]["selected-rows"]
+        runIDs = ','.join([str(i) for i in runIDs])
+    else:
+        print("Warning: no selected lines")
+        runIDs = ""
+        print(session)
+
+    if "chart_type" not in session[session_path]:
+        session[session_path]["chart_type"] = "step"
+    type = session[session_path]["chart_type"]
+    return Div(
+        H2("Step/Duration", cls="setup-title"),
+        Input(type="checkbox", name="Step chart", id=f"chart-type-step-{runIDs}", value="step", cls="chart-type-checkbox",
+              checked=type == "step", hx_get=f"{path}/change_chart?runIDs={runIDs}&step={type == 'step'}",
+              hx_swap="outerHTML", hx_target="#chart-type-selector"),
+        style="display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%;",
+        id="chart-type-selector"
+    )

deepboard/gui/components/legend.py

@@ -0,0 +1,34 @@
+from fasthtml.common import *
+
+def LegendLine(session, runIDs: str, label: str, color: str, hidden: bool, path):
+    from __main__ import CONFIG
+    if hidden:
+        return Li(
+            Span(cls="legend-icon", style=f"background-color: {CONFIG.HIDDEN_COLOR};"),
+            A(label, cls="legend-label", style=f"color: {CONFIG.HIDDEN_COLOR};"),
+            hx_get=f"{path}/show_line?runIDs={runIDs}&label={label}",
+            cls="legend-line"
+        )
+    else:
+        return Li(
+            Span(cls="legend-icon", style=f"background-color: {color};"),
+            A(label, cls="legend-label"),
+            hx_get=f"{path}/hide_line?runIDs={runIDs}&label={label}",
+            cls="legend-line"
+        )
+def Legend(session, labels: list[tuple], path: str, selected_rows_key: str):
+    if selected_rows_key in session and "selected-rows" in session[selected_rows_key] and len(session[selected_rows_key]["selected-rows"]) > 0:
+        runIDs = session[selected_rows_key]["selected-rows"]
+        runIDs = ','.join([str(i) for i in runIDs])
+    else:
+        print("Warning: no selected lines")
+        runIDs = ""
+    return Div(
+        H2("Legend", cls="chart-legend-title"),
+        Ul(
+            *[LegendLine(session, runIDs, label, color, hidden, path=path) for label, color, hidden in labels],
+            cls="chart-legend",
+            id=f"chart-legend-{runIDs}"
+        ),
+        cls="chart-toolbox",
+    )

deepboard/gui/components/log_selector.py

@@ -0,0 +1,22 @@
+from fasthtml.common import *
+
+def LogSelector(session, path: str, selected_rows_key: str, session_path: str):
+    if selected_rows_key in session and "selected-rows" in session[selected_rows_key] and len(session[selected_rows_key]["selected-rows"]) > 0:
+        runIDs = session[selected_rows_key]["selected-rows"]
+        runIDs = ','.join([str(i) for i in runIDs])
+    else:
+        print("Warning: no selected lines")
+        runIDs = ""
+        print(session)
+
+    if "chart_scale" not in session[session_path]:
+        session[session_path]["chart_scale"] = "default"
+    type = session[session_path]["chart_scale"]
+    return Div(
+        H2("Log Scale", cls="setup-title"),
+        Input(type="checkbox", name="log scale", id=f"chart-scale-{runIDs}", value="scale", cls="chart-type-checkbox",
+              checked=type == "log", hx_get=f"{path}/change_scale?runIDs={runIDs}&log={type == 'log'}",
+              hx_swap="outerHTML", hx_target="#chart-scale-selector"),
+        style="display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%;",
+        id="chart-scale-selector"
+    )

deepboard/gui/components/modal.py

@@ -0,0 +1,20 @@
+from fasthtml.common import *
+
+
+def Modal(*content, active: bool = False):
+    return Div(
+        Button(
+            I(cls="fas fa-times"),
+            hx_get="/close_modal",
+            hx_target="#modal",
+            hx_swap="outerHTML",
+            cls="close-button",
+        ) if active else None,
+        Div(
+            *content,
+            cls="modal",
+            onclick="event.stopPropagation();",
+        ),
+        cls="modal-overlay" if active else "modal-overlay hidden",
+        id="modal"
+    )

deepboard/gui/components/smoother.py

@@ -0,0 +1,21 @@
+from fasthtml.common import *
+
+def Smoother(session, path: str, selected_rows_key: str, session_path: str):
+    if selected_rows_key in session and "selected-rows" in session[selected_rows_key] and len(session[selected_rows_key]["selected-rows"]) > 0:
+        runIDs = session[selected_rows_key]["selected-rows"]
+    else:
+        print("Warning: no selected lines")
+        runIDs = []
+    if "smoother_value" not in session[session_path]:
+        session[session_path]["smoother_value"] = 1
+    value = session[session_path]["smoother_value"]
+    return Div(
+        H2("Smoother", cls="setup-title"),
+        Div(
+            P(f"{value - 1}%"),
+            Input(type="range", min=1, max=101, value=value, id=f"chart-smoother", name="smoother",
+                  hx_get=f"{path}/change_smoother?runIDs={','.join(str(i) for i in runIDs)}", hx_trigger="change"),
+            cls="chart-smoother-container",
+        ),
+        cls="chart-toolbox",
+    )

deepboard/gui/components/split_selector.py

@@ -0,0 +1,21 @@
+from fasthtml.common import *
+from typing import Literal
+
+def SplitSelector(runID, available_splits: List[str], selected: str, step: int, epoch: int, run_rep: int,
+                  type: str, path: str, swap: bool = False):
+
+    swap_oob = dict(swap_oob="true") if swap else {}
+    return Select(
+        *[
+            Option(split.capitalize() if split else "", value=split, selected=selected == split, cls="artefact-split-option")
+            for split in available_splits
+        ],
+        name="split_select",
+        hx_get=f"{path}?runID={runID}&step={step}&epoch={epoch}&run_rep={run_rep}&type={type}",
+        hx_target=f"#artefact-card-{step}-{epoch}-{run_rep}",
+        hx_trigger="change",
+        hx_swap="outerHTML",
+        hx_params="*",
+        **swap_oob,
+        cls="artefact-split-select",
+    )

deepboard/gui/components/stat_line.py

@@ -0,0 +1,8 @@
+from fasthtml.common import *
+
+def StatLine(label: str, value: str):
+    return Span(
+        H3(f"{label}: ", style="font-size: 1em; margin: 0.1em; margin-right: 0.5em; font-weight: bold;"),
+        H3(value, style="font-size: 1em; margin: 0.1em; font-weight: normal;"),
+        cls="expand"
+    )

deepboard/gui/entry.py

@@ -0,0 +1,21 @@
+import runpy
+import os
+import sys
+
+
+def main():
+    try:
+        import fasthtml  # or whatever dependency is required
+    except ImportError:
+        raise ImportError(
+            "The GUI feature requires additional dependencies. Please install with:\n"
+            "  pip install deepboard[full]"
+        )
+    if os.path.dirname(__file__) not in sys.path:
+        sys.path.insert(0, os.path.dirname(__file__))
+    script_path = os.path.join(os.path.dirname(__file__), "main.py")
+    runpy.run_path(script_path, run_name="__main__")
+
+
+if __name__ == "__main__":
+    main()