Repository: cylynx/verifyml (language: python)

Issue:
Image data should contain the data URL scheme
Current image data URL:
```
iVBORw0KGgoAAAANSUhEUgAAAT8AAAEGCAYAAAAT05LOAAAAOXRFWHRTb2Z0d2FyZQBNYXRwbG90\nbGliIHZlcnNpb24zLjMuNCwgaHR0cHM6Ly9tYXRwbG90bGliLm9yZy8QVMy6AAAACXBIWXMAAAsT\nAAALEwEAm...
```

Ideal image data URL:
```
data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAT8AAAEGCAYAAAAT05LOAAAAOXRFWHRTb2Z0d2FyZQBNYXRwbG90\nbGliIHZlcnNpb24zLjMuNCwgaHR0cHM6Ly9tYXRwbG90bGliLm9yZy8QVMy6AAAACXBIWXMAAAsT\nAAALEwEAm...
```

More info on the data URL scheme: https://datatracker.ietf.org/doc/html/rfc2397



Discussion / hints:

Fix patch:
diff --git a/examples/model_card_output/template/html/compare.html.jinja b/examples/model_card_output/template/html/compare.html.jinja
index 776d69b..001a496 100644
--- a/examples/model_card_output/template/html/compare.html.jinja
+++ b/examples/model_card_output/template/html/compare.html.jinja
@@ -24,7 +24,11 @@
   {% for graph in graphics %}
   <div class="img-container">
     <div class="img-item">
-      <img src='data:image/jpeg;base64,{{ graph.image }}' alt='{{ graph.name }}' />
+    {% if 'data' in graph.image %}
+      <img src='{{ graph.image }}' alt='{{ graph.name }}' />
+    {% else %}
+       <img src='data:image/png;base64,{{ graph.image }}' alt='{{ graph.name }}' />
+    {% endif %}
     </div>
   </div>
   {% endfor %}
diff --git a/examples/model_card_output/template/html/default_template.html.jinja b/examples/model_card_output/template/html/default_template.html.jinja
index 30a74fc..5059fc9 100644
--- a/examples/model_card_output/template/html/default_template.html.jinja
+++ b/examples/model_card_output/template/html/default_template.html.jinja
@@ -64,7 +64,11 @@
   {% if graphics.description %}<p>{{ graphics.description }}</p>{% endif %}
   {% for graph in graphics %}
     <div class="img-item">
-      <img src='data:image/jpeg;base64,{{ graph.image }}' alt='{{ graph.name }}' />
+    {% if 'data' in graph.image %}
+      <img src='{{ graph.image }}' alt='{{ graph.name }}' />
+    {% else %}
+       <img src='data:image/png;base64,{{ graph.image }}' alt='{{ graph.name }}' />
+    {% endif %}
     </div>
   {% endfor %}
   </div>
diff --git a/examples/model_card_output/template/md/default_template.md.jinja b/examples/model_card_output/template/md/default_template.md.jinja
index a90313b..a4f34db 100644
--- a/examples/model_card_output/template/md/default_template.md.jinja
+++ b/examples/model_card_output/template/md/default_template.md.jinja
@@ -48,7 +48,11 @@
 {% macro render_graphics(graphics) %}
   {% if graphics.description %}{{ graphics.description }}{% endif %}
   {% for graph in graphics %}
+  {% if 'data' in graph.image %}
+<img src='{{ graph.image }}'/>
+    {% else %}
 <img src="data:image/jpeg;base64,{{ graph.image }}">
+    {% endif %}
   {% endfor %}
 {% endmacro %}
 {% macro render_license(license) %}
diff --git a/verifyml/model_card_toolkit/proto/model_card.proto b/verifyml/model_card_toolkit/proto/model_card.proto
index 9988c1e..751c0e0 100644
--- a/verifyml/model_card_toolkit/proto/model_card.proto
+++ b/verifyml/model_card_toolkit/proto/model_card.proto
@@ -105,7 +105,7 @@ message Graphic {
   // The name of the graphic.
   optional string name = 1;
 
-  // The image, encoded as a base64 string.
+  // The image, encoded as a data URI or if base64 string, the image is assumed to be png.
   optional string image = 2;
 }
 
diff --git a/verifyml/model_card_toolkit/template/html/compare.html.jinja b/verifyml/model_card_toolkit/template/html/compare.html.jinja
index 776d69b..001a496 100644
--- a/verifyml/model_card_toolkit/template/html/compare.html.jinja
+++ b/verifyml/model_card_toolkit/template/html/compare.html.jinja
@@ -24,7 +24,11 @@
   {% for graph in graphics %}
   <div class="img-container">
     <div class="img-item">
-      <img src='data:image/jpeg;base64,{{ graph.image }}' alt='{{ graph.name }}' />
+    {% if 'data' in graph.image %}
+      <img src='{{ graph.image }}' alt='{{ graph.name }}' />
+    {% else %}
+       <img src='data:image/png;base64,{{ graph.image }}' alt='{{ graph.name }}' />
+    {% endif %}
     </div>
   </div>
   {% endfor %}
diff --git a/verifyml/model_card_toolkit/template/html/default_template.html.jinja b/verifyml/model_card_toolkit/template/html/default_template.html.jinja
index 30a74fc..5059fc9 100644
--- a/verifyml/model_card_toolkit/template/html/default_template.html.jinja
+++ b/verifyml/model_card_toolkit/template/html/default_template.html.jinja
@@ -64,7 +64,11 @@
   {% if graphics.description %}<p>{{ graphics.description }}</p>{% endif %}
   {% for graph in graphics %}
     <div class="img-item">
-      <img src='data:image/jpeg;base64,{{ graph.image }}' alt='{{ graph.name }}' />
+    {% if 'data' in graph.image %}
+      <img src='{{ graph.image }}' alt='{{ graph.name }}' />
+    {% else %}
+       <img src='data:image/png;base64,{{ graph.image }}' alt='{{ graph.name }}' />
+    {% endif %}
     </div>
   {% endfor %}
   </div>
diff --git a/verifyml/model_card_toolkit/template/md/default_template.md.jinja b/verifyml/model_card_toolkit/template/md/default_template.md.jinja
index a90313b..a4f34db 100644
--- a/verifyml/model_card_toolkit/template/md/default_template.md.jinja
+++ b/verifyml/model_card_toolkit/template/md/default_template.md.jinja
@@ -48,7 +48,11 @@
 {% macro render_graphics(graphics) %}
   {% if graphics.description %}{{ graphics.description }}{% endif %}
   {% for graph in graphics %}
+  {% if 'data' in graph.image %}
+<img src='{{ graph.image }}'/>
+    {% else %}
 <img src="data:image/jpeg;base64,{{ graph.image }}">
+    {% endif %}
   {% endfor %}
 {% endmacro %}
 {% macro render_license(license) %}


Test patch:
diff --git a/verifyml/model_tests/utils.py b/verifyml/model_tests/utils.py
index be3ec7b..bacc39f 100644
--- a/verifyml/model_tests/utils.py
+++ b/verifyml/model_tests/utils.py
@@ -18,7 +18,9 @@
 
 
 def plot_to_str():
-    # Utility function that will export a plot to a base-64 encoded string.
+    # Utility function that will export a plot to a base-64 png encoded data URI scheme.
     img = BytesIO()
     plt.savefig(img, format="png", bbox_inches="tight")
-    return base64.encodebytes(img.getvalue()).decode("utf-8")
+    return (
+        f'data:image/jpeg;base64,{base64.encodebytes(img.getvalue()).decode("utf-8")}'
+    )