Update README.md

README.md

@@ -18,24 +18,71 @@ tags:
 
 ## Example Outputs
 
-<div style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;">
-    <a href="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example.png" target="_blank">
-        <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example.png" width="256" alt="Example Output 1" style="cursor: pointer;"/>
-    </a>
-    <a href="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example2.png" target="_blank">
-        <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example2.png" width="256" alt="Example Output 2" style="cursor: pointer;"/>
-    </a>
-    <a href="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example3.png" target="_blank">
-        <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example3.png" width="256" alt="Example Output 3" style="cursor: pointer;"/>
-    </a>
-    <a href="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example4.png" target="_blank">
-        <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example4.png" width="256" alt="Example Output 4" style="cursor: pointer;"/>
-    </a>
-    <a href="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example5.png" target="_blank">
-        <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example5.png" width="512" alt="Example Output 5" style="cursor: pointer;"/>
-    </a>
+<style>
+.gallery {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: center;
+}
+
+.gallery img {
+    width: 256px;
+    cursor: pointer;
+    transition: transform 0.2s;
+}
+
+.gallery img:hover {
+    transform: scale(1.05);
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.9);
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.modal img {
+    max-width: 90%;
+    max-height: 90vh;
+    margin: auto;
+    display: block;
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.modal.active {
+    display: block;
+}
+</style>
+
+<div class="gallery">
+    <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example.png" alt="Example Output 1" onclick="showImage(this.src)"/>
+    <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example2.png" alt="Example Output 2" onclick="showImage(this.src)"/>
+    <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example3.png" alt="Example Output 3" onclick="showImage(this.src)"/>
+    <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example4.png" alt="Example Output 4" onclick="showImage(this.src)"/>
+    <img src="https://huggingface.co/dataautogpt3/ProteusSigma/resolve/main/example5.png" alt="Example Output 5" onclick="showImage(this.src)"/>
 </div>
 
+<div class="modal" onclick="this.classList.remove('active')">
+    <img id="modal-img" src="" alt="Full size image"/>
+</div>
+
+<script>
+function showImage(src) {
+    document.getElementById('modal-img').src = src;
+    document.querySelector('.modal').classList.add('active');
+}
+</script>
+
 Example prompt: `A digital illustration of a lich with long grey hair and beard, as a university professor wearing a formal suit and standing in front of a class, writing on a whiteboard. He holds a marker, writing complex equations or magical symbols on the whiteboard.`
 
 Example prompt 2: `a Candid Photo of a real short grey alien peering around a corner while trying to hide from the viewer in a living room,real photography, fujifilm superia, full HD, taken on a Canon EOS R5 F1. 2 ISO100 35MM`