Update README.md

README.md

@@ -16,6 +16,153 @@ join us: https://discord.gg/tPBsKDyRR5
 
 ![image/png](https://cdn-uploads.huggingface.co/production/uploads/630593e2fca1d8d92b81d2a1/rUeUdKYiUfi6LtTcpasgN.png)
 
+
+
+<style>
+    
+.image-viewer {
+  position: relative;
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  flex-flow: wrap;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-viewer input[type="radio"] {
+  display: none;
+}
+
+.image-viewer label {
+  padding: 18px;
+  background-color: #B398F5;
+  background-size: cover;
+  background-position: center;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  color: black;
+  margin: 9px;
+}
+
+.image-viewer label:hover {
+  background-color: #4C88F5;
+  padding: 21px;
+  margin: 6px;
+}
+
+.image-viewer input[type="radio"]:checked + label {
+  background-color: #6296F5;
+  padding: 27px;
+  margin: 0px;
+}
+
+.image-container {
+  position: relative;
+  width: 100%;
+  height: 50vh;
+}
+
+.image-container img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  object-fit: contain;
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}
+
+#image1:checked ~ .image-container img:nth-child(1),#image2:checked ~ .image-container img:nth-child(2),#image3:checked ~ .image-container img:nth-child(3),#image4:checked ~ .image-container img:nth-child(4),#image5:checked ~ .image-container img:nth-child(5),#image6:checked ~ .image-container img:nth-child(6),#image7:checked ~ .image-container img:nth-child(7),#image8:checked ~ .image-container img:nth-child(8),#image9:checked ~ .image-container img:nth-child(9) {
+  opacity: 1;
+}
+
+#image1l{background-image: url(sample-images\02062.jpg);}
+#image2l{background-image: url(sample-images\02081.jpg);}
+#image3l{background-image: url(sample-images\02082.jpg);}
+#image4l{background-image: url(sample-images\02083.jpg);}
+#image5l{background-image: url(sample-images\02084.jpg);}
+#image6l{background-image: url(sample-images\02085.jpg);}
+#image7l{background-image: url(sample-images\02086.jpg);}
+#image8l{background-image: url(sample-images\02088.jpg);}
+#image9l{background-image: url(sample-images\02089.jpg);}
+
+</style>
+<div>
+    
+<div class="image-viewer">
+    
+<input type="radio" id="image1" name="image-switcher" checked>
+<label for="image1" id="image1l"></label>
+
+
+<input type="radio" id="image2" name="image-switcher" checked>
+<label for="image2" id="image2l"></label>
+
+
+<input type="radio" id="image3" name="image-switcher" checked>
+<label for="image3" id="image3l"></label>
+
+
+<input type="radio" id="image4" name="image-switcher" checked>
+<label for="image4" id="image4l"></label>
+
+
+<input type="radio" id="image5" name="image-switcher" checked>
+<label for="image5" id="image5l"></label>
+
+
+<input type="radio" id="image6" name="image-switcher" checked>
+<label for="image6" id="image6l"></label>
+
+
+<input type="radio" id="image7" name="image-switcher" checked>
+<label for="image7" id="image7l"></label>
+
+
+<input type="radio" id="image8" name="image-switcher" checked>
+<label for="image8" id="image8l"></label>
+
+
+<input type="radio" id="image9" name="image-switcher" checked>
+<label for="image9" id="image9l"></label>
+
+
+    <div class="image-container">
+        
+<img src="sample-images\02062.jpg" alt="image1">
+
+
+<img src="sample-images\02081.jpg" alt="image2">
+
+
+<img src="sample-images\02082.jpg" alt="image3">
+
+
+<img src="sample-images\02083.jpg" alt="image4">
+
+
+<img src="sample-images\02084.jpg" alt="image5">
+
+
+<img src="sample-images\02085.jpg" alt="image6">
+
+
+<img src="sample-images\02086.jpg" alt="image7">
+
+
+<img src="sample-images\02088.jpg" alt="image8">
+
+
+<img src="sample-images\02089.jpg" alt="image9">
+
+    </div>
+</div>
+
+</div>
+
+
 ## Highlights
 - Resume from Kohaku-XL-Epsilon rev2
 - More stable, long/detailed prompt is not a requirement now.