Dataviz/add slider to python api

README.md

@@ -56,13 +56,8 @@ output['sample']
 
 ![](assets/corgi_eiffel_tower.png)
 
-You can also check the image that the diffusion process generated in the end of each step.
-
-For example, to see the image from step 10:
-```python
-output['all_samples_during_generation'][10]
-```
-![](assets/corgi_eiffel_tower_step10.png)
+You can also check all the images that the diffusion process generated at the end of each step.
+![](assets/image_slider.gif)
 
 To check how a token in the input `prompt` influenced the generation, you can check the token attribution scores:
 ```python
@@ -132,7 +127,7 @@ The token attributions are now computed only for the area specified in the image
 Check other functionalities and more implementation examples in [here](https://github.com/JoaoLages/diffusers-interpret/blob/main/notebooks/).
 
 ## Future Development
-- [ ] Add interactive display of all the images that were generated in the diffusion process
+- [x] ~~Add interactive display of all the images that were generated in the diffusion process~~
 - [ ] Add interactive bounding-box and token attributions visualization
 - [ ] Add unit tests
 - [ ] Add example for `diffusers_interpret.LDMTextToImagePipelineExplainer`
@@ -141,3 +136,7 @@ Check other functionalities and more implementation examples in [here](https://g
 
 ## Contributing
 Feel free to open an [Issue](https://github.com/JoaoLages/diffusers-interpret/issues) or create a [Pull Request](https://github.com/JoaoLages/diffusers-interpret/pulls) and let's get started 🚀
+
+## Credits
+
+A special thanks to [@andrewizbatista](https://github.com/andrewizbatista) for creating a great [image slider](https://github.com/JoaoLages/diffusers-interpret/pull/1) to show all the generated images during diffusion! 💪 

setup.py

@@ -9,7 +9,7 @@
 
 setup(
     name='diffusers-interpret',
-    version='0.1.0',
+    version='0.2.0',
     description='diffusers-interpret: model explainability for 🤗 Diffusers',
     long_description=long_description,
     long_description_content_type='text/markdown',

src/diffusers_interpret/dataviz/image-slider/css/index.css

@@ -0,0 +1,226 @@
+:root {
+  --animation-time: 100ms;
+  --image-size: 296px;
+  --loading-margin: 340px;
+  --error-margin: 390px;
+  --border-radius: 4px;
+  --color-primary: #ff6347;
+  --color-primary-hover: #e46b55;
+  --color-primary-active: #9acd32;
+  --color-primary-disabled: #aa8983;
+  --color-loading: #aa8983;
+}
+
+html {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+#slider {
+  display: none;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  user-select: none;
+}
+
+#error {
+  display: none;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  user-select: none;
+  height: 200px;
+  padding-left: var(--error-margin);
+}
+
+#error span {
+  font-size: 1.2rem;
+  color: var(--color-primary);
+  font-weight: bold;
+  letter-spacing: 0.5px;
+}
+
+#loading {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  user-select: none;
+  height: 200px;
+  opacity: 0.5;
+  padding-left: var(--loading-margin);
+  -webkit-animation: pulsate 1s ease-out;
+  -moz-animation: pulsate 1s ease-out;
+  -ms-animation: pulsate 1s ease-out;
+  -o-animation: pulsate 1s ease-out;
+  animation: pulsate 1s ease-out;
+  -webkit-animation-iteration-count: infinite;
+  -moz-animation-iteration-count: infinite;
+  -ms-animation-iteration-count: infinite;
+  -o-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+#loading span {
+  font-size: 1rem;
+  margin-left: 0.5rem;
+  color: var(--color-loading);
+  letter-spacing: 1px;
+}
+
+.slider-item {
+  padding: 5px;
+  text-align: center;
+}
+
+.slider-image {
+  display: block;
+  width: var(--image-size);
+  height: var(--image-size);
+  margin-bottom: 10px;
+  background-color: #222;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  -webkit-transition: all var(--animation-time) linear;
+  -moz-transition: all var(--animation-time) linear;
+  -ms-transition: all var(--animation-time) linear;
+  -o-transition: all var(--animation-time) linear;
+  transition: all var(--animation-time) linear;
+}
+
+.slider-title {
+  display: block;
+  font-size: 1rem;
+  font-weight: bold;
+  user-select: none;
+}
+
+.slider-iteration {
+  display: block;
+  font-size: 0.8rem;
+  margin-top: 6px;
+}
+
+.slide-actions {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--color-primary);
+  border-radius: var(--border-radius);
+  color: #fff;
+}
+
+button {
+  color: #fff;
+  background-color: var(--color-primary);
+  border: 0;
+  font-size: 0.8rem;
+  padding-top: 14px;
+  padding-bottom: 14px;
+  cursor: pointer;
+  user-select: none;
+  -webkit-transition: all var(--animation-time) linear;
+  -moz-transition: all var(--animation-time) linear;
+  -ms-transition: all var(--animation-time) linear;
+  -o-transition: all var(--animation-time) linear;
+  transition: all var(--animation-time) linear;
+}
+
+button:disabled {
+  cursor: default;
+  background-color: var(--color-primary-disabled) !important;
+}
+
+button:hover {
+  background-color: var(--color-primary-hover);
+}
+
+button:active {
+  background-color: var(--color-primary-active);
+}
+
+.slider-iterations {
+  font-size: 0.8rem;
+  font-family: monospace;
+  user-select: none;
+  cursor: default;
+}
+
+#slider-action-prev {
+  border-top-left-radius: var(--border-radius);
+  border-bottom-left-radius: var(--border-radius);
+  padding-left: 12px;
+  padding-right: 18px;
+}
+
+#slider-action-next {
+  border-top-right-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
+  padding-left: 18px;
+  padding-right: 12px;
+}
+
+#loading-ripple {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+
+#loading-ripple div {
+  position: absolute;
+  border: 4px solid var(--color-loading);
+  opacity: 1;
+  border-radius: 50%;
+  animation: ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+
+#loading-ripple div:nth-child(2) {
+  animation-delay: -0.5s;
+}
+
+@keyframes ripple {
+  0% {
+    top: 36px;
+    left: 36px;
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+  4.9% {
+    top: 36px;
+    left: 36px;
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+  5% {
+    top: 36px;
+    left: 36px;
+    width: 0;
+    height: 0;
+    opacity: 1;
+  }
+  100% {
+    top: 0px;
+    left: 0px;
+    width: 72px;
+    height: 72px;
+    opacity: 0;
+  }
+}
+
+@keyframes pulsate {
+  0% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.5;
+  }
+}

src/diffusers_interpret/dataviz/image-slider/index.html

@@ -0,0 +1,43 @@
+<html>
+  <head>
+    <title>Image Slider</title>
+    <link href="css/index.css" rel="stylesheet" />
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <section id="loading">
+      <div id="loading-ripple">
+        <div></div>
+        <div></div>
+      </div>
+      <span id="loading-name" class="pulsate">Preparing Data...</span>
+    </section>
+    <section id="error">
+      <span>Unexpected Error</span>
+    </section>
+    <section id="slider">
+      <div class="slider-item">
+        <div id="slider-image-first" class="slider-image"></div>
+        <span class="slider-title">First Iteration</span>
+      </div>
+      <div class="slider-item">
+        <div id="slider-image-current" class="slider-image"></div>
+        <div class="slide-actions">
+          <button id="slider-action-prev">◄ Prev</button>
+          <span class="slider-iterations">
+            <span id="slider-iterations-current">0</span>
+            /
+            <span id="slider-iterations-final">0</span>
+          </span>
+          <button id="slider-action-next">Next ►</button>
+        </div>
+      </div>
+      <div class="slider-item">
+        <div id="slider-image-final" class="slider-image"></div>
+        <span class="slider-title">Final Iteration</span>
+      </div>
+    </section>
+    <!-- INSERT STARTING SCRIPT HERE -->
+    <script type="text/javascript" src="js/index.js"></script>
+  </body>
+</html>