Update README.md

README.md

@@ -36,7 +36,7 @@ tags:
 }
 
 .image-viewer label {
-  padding: 10px 20px;
+  padding: 20px;
   background-color: #B398F5;
   background-size: cover;
   border: 1px solid #ccc;
@@ -48,13 +48,13 @@ tags:
 
 .image-viewer label:hover {
   background-color: #4C88F5;
-  padding: 15px 25px;
+  padding: 25px;
   margin: 5px;
 }
 
 .image-viewer input[type="radio"]:checked + label {
   background-color: #6296F5;
-  padding: 20px 30px;
+  padding: 30px;
   margin: 0px;
 }
 
@@ -76,6 +76,7 @@ tags:
 }
 
 
+
 #image1:checked ~ .image-container img:nth-child(1),
 #image2:checked ~ .image-container img:nth-child(2),
 #image3:checked ~ .image-container img:nth-child(3) {
@@ -83,22 +84,22 @@ tags:
 }
 
 #image1l{
-  background-image: url("output-samples/01549.png");
+  background-image: url("https://huggingface.co/KBlueLeaf/Kohaku-XL-Epsilon/resolve/main/output-samples/01549.png");
 }
 #image2l{
-  background-image: url("output-samples/01550.png");
+  background-image: url("https://huggingface.co/KBlueLeaf/Kohaku-XL-Epsilon/resolve/main/output-samples/01550.png");
 }
 #image3l{
-  background-image: url("output-samples/01551.png");
+  background-image: url("https://huggingface.co/KBlueLeaf/Kohaku-XL-Epsilon/resolve/main/output-samples/01551.png");
 }
 </style>
 <div class="image-viewer">
   <input type="radio" id="image1" name="image-switcher" checked>
-  <label for="image1" id="image1l">1</label>
+  <label for="image1" id="image1l"></label>
   <input type="radio" id="image2" name="image-switcher">
-  <label for="image2">2</label>
+  <label for="image2" id="image2l"></label>
   <input type="radio" id="image3" name="image-switcher">
-  <label for="image3">3</label>
+  <label for="image3" id="image3l"></label>
 
   <div class="image-container">
     <img src="output-samples/01549.png" alt="Image 1">