Plotting prototypes

lightly-ai · Nov 6, 2023 · feb637b · feb637b
1 parent fce0a84
commit feb637b
Show file tree

Hide file tree

Showing 6 changed files with 275 additions and 1 deletion.
diff --git a/matplotlib_prototype.py b/matplotlib_prototype.py
@@ -0,0 +1,62 @@
+# pip install matplotlib
+
+from pathlib import Path
+
+from jinja2 import Environment, FileSystemLoader
+from matplotlib import pyplot as plt
+
+output_folder = Path("/Users/michal/tmp/lightly_insights_output")
+output_folder.mkdir(parents=True, exist_ok=True)
+
+# Ten random points in the unit square.
+scatter_data = [
+    [0.5, 0.3],
+    [0.1, 0.8],
+    [0.9, 0.9],
+    [0.3, 0.1],
+    [0.7, 0.2],
+    [0.8, 0.5],
+    [0.2, 0.7],
+    [0.6, 0.4],
+    [0.4, 0.6],
+    [0.0, 0.0],
+]
+
+# Create a scatter plot.
+fig = plt.figure()
+ax = fig.add_subplot(111)
+ax.scatter(
+    [x for x, y in scatter_data],
+    [y for x, y in scatter_data],
+    marker="o",
+    color="blue",
+    alpha=0.5,
+)
+
+# Save the plot.
+plt.savefig(output_folder / "scatter.png")
+
+
+# Define data
+report_data = {
+    "report_title": "Dataset Report",
+    "report_summary": "This is an auto-generated report.",
+    "images": [
+        {
+            "title": "Scatter",
+            "path": "scatter.png",
+            "description": "Image description.",
+        },
+    ],
+}
+
+# Setup Jinja2 environment
+env = Environment(loader=FileSystemLoader(searchpath="./templates"))
+template = env.get_template("report.html")
+
+# Render the template with data
+html_output = template.render(report_data)
+
+# Write the HTML to file
+html_output_path = output_folder / "report.html"
+html_output_path.write_text(html_output)
diff --git a/plotly_prototype.py b/plotly_prototype.py
@@ -0,0 +1,57 @@
+# pip install plotly
+
+from pathlib import Path
+
+import plotly.graph_objects as go
+from jinja2 import Environment, FileSystemLoader
+from plotly.offline import plot
+
+output_folder = Path("/Users/michal/tmp/lightly_insights_output")
+output_folder.mkdir(parents=True, exist_ok=True)
+
+# Ten random points in the unit square.
+scatter_data = [
+    [0.5, 0.3],
+    [0.1, 0.8],
+    [0.9, 0.9],
+    [0.3, 0.1],
+    [0.7, 0.2],
+    [0.8, 0.5],
+    [0.2, 0.7],
+    [0.6, 0.4],
+    [0.4, 0.6],
+    [0.0, 0.0],
+]
+
+# Create a scatter plot.
+fig = go.Figure(
+    data=go.Scatter(
+        x=[x for x, _ in scatter_data],
+        y=[y for _, y in scatter_data],
+        mode="markers",
+        marker=dict(color="blue", opacity=0.5),
+    )
+)
+
+# Convert the figure to an HTML div string.
+div = plot(fig, output_type="div", include_plotlyjs="cdn")
+
+# Define data
+report_data = {
+    "report_title": "Dataset Report",
+    "report_summary": "This is an auto-generated report.",
+    "images": [
+        {"title": "Scatter", "plot_div": div, "description": "Image description."},
+    ],
+}
+
+# Setup Jinja2 environment
+env = Environment(loader=FileSystemLoader(searchpath="./templates"))
+template = env.get_template("report_plotly.html")
+
+# Render the template with data
+html_output = template.render(report_data)
+
+# Write the HTML to file
+html_output_path = output_folder / "report_plotly.html"
+html_output_path.write_text(html_output)
diff --git a/poetry.lock b/poetry.lock
diff --git a/pyproject.toml b/pyproject.toml
@@ -15,6 +15,7 @@ python = ">=3.7"
 tqdm = "*"
 pillow = "*"
 labelformat = "^0.1.1"
+jinja2 = "^3.1.2"
 
 [tool.poetry.group.dev.dependencies]
 mypy = "*"

diff --git a/templates/report.html b/templates/report.html
@@ -0,0 +1,33 @@
+<!-- report_template.html -->
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Responsive meta tag -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <title>Report</title>
+  </head>
+  <body>
+    <div class="container">
+      <h1>{{ report_title }}</h1>
+      <p>{{ report_summary }}</p>
+      {% for image in images %}
+      <div class="row">
+        <div class="col-sm-12 col-md-6">
+          <h2>{{ image.title }}</h2>
+          <img src="{{ image.path }}" class="img-fluid" alt="{{ image.title }}">
+        </div>
+        <div class="col-sm-12 col-md-6">
+          <p>{{ image.description }}</p>
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+    <!-- Optional JavaScript; choose one of the two! -->
+    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
+    <!-- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> -->
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
+  </body>
+</html>
diff --git a/templates/report_plotly.html b/templates/report_plotly.html
@@ -0,0 +1,33 @@
+<!-- report_template.html -->
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Responsive meta tag -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <title>Report</title>
+  </head>
+  <body>
+    <div class="container">
+      <h1>{{ report_title }}</h1>
+      <p>{{ report_summary }}</p>
+      {% for image in images %}
+      <div class="row">
+        <div class="col-sm-12 col-md-6">
+          <h2>{{ image.title }}</h2>
+          {{ image.plot_div | safe }}
+        </div>
+        <div class="col-sm-12 col-md-6">
+          <p>{{ image.description }}</p>
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+    <!-- Optional JavaScript; choose one of the two! -->
+    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
+    <!-- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> -->
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
+  </body>
+</html>