Update README.md

README.md

@@ -11,85 +11,80 @@ thumbnail: >-
 ---
 
 <style>
-            body {
-                font-family: 'Arial', sans-serif;
-                background-color: #f4f4f4;
-                margin: 0;
-                padding: 20px;
-            }
-            .container {
-                display: grid;
-                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-                gap: 20px;
-                justify-items: center;
-            }
-            .model-card {
-                position: relative;
-                background-color: #fff;
-                border-radius: 10px;
-                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-                margin: 20px;
-                padding: 20px;
-                width: 300px;
-                overflow: hidden;
-                transition: transform .2s;
-            }
-            .model-card img {
-                max-width: 100%;
-                border-radius: 5px;
-            }
-            .model-title {
-                font-size: 18px;
-                font-weight: bold;
-                margin: 10px 0;
-                color: #333;
-            }
-            .model-description {
-                font-size: 14px;
-                color: #777;
-                height: 50px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-            .model-link {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-                text-decoration: none;
-                color: #333;
-                font-size: 12px;
-                margin-top: 10px;
-            }
-            .model-link img {
-                width: 16px;
-                height: 16px;
-                margin-left: 5px;
-            }
-            .download-section {
-                font-size: 14px;
-                font-weight: bold;
-                color: #333;
-            }
-            .from-section {
-                font-size: 12px;
-                color: #777;
-            }
-        </style>
+    body {
+        font-family: 'Arial', sans-serif;
+        background-color: #f4f4f4;
+        margin: 0;
+        padding: 20px;
+    }
+    .container {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+        gap: 20px;
+        justify-items: center;
+    }
+    .model-card {
+        position: relative;
+        background-color: #fff;
+        border-radius: 10px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        margin: 20px;
+        padding: 20px;
+        width: 300px;
+        overflow: hidden;
+        transition: transform .2s;
+    }
+    .model-card img {
+        max-width: 100%;
+        border-radius: 5px;
+    }
+    .model-title {
+        font-size: 18px;
+        font-weight: bold;
+        margin: 10px 0;
+        color: #333;
+    }
+    .model-description {
+        font-size: 14px;
+        color: #777;
+        height: 50px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .model-link {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-decoration: none;
+        color: #333;
+        font-size: 12px;
+        margin-top: 10px;
+    }
+    .model-link img {
+        width: 16px;
+        height: 16px;
+        margin-left: 5px;
+    }
+    .download-section {
+        font-size: 14px;
+        font-weight: bold;
+        color: #333;
+    }
+    .from-section {
+        font-size: 12px;
+        color: #777;
+    }
 
+    #toggleContent {
+        display: none;
+    }
 
-<script>
-    function toggleVisibility() {
-        var x = document.getElementById("toggleContent");
-        if (x.style.display === "none") {
-            x.style.display = "block";
-        } else {
-            x.style.display = "none";
-        }
+    #showMore:checked + #toggleContent {
+        display: block;
     }
-</script>  
-<style>
-    button {
+
+    .button-label {
         background-color: #d100f6; /* FFusionAI theme color */
         color: white;
         padding: 14px 20px;
@@ -99,16 +94,18 @@ thumbnail: >-
         transition-duration: 0.4s;
     }
 
-    button:hover {
+    .button-label:hover {
         background-color: #711bff;
     }
 </style>
-[![FFusionAI](https://huggingface.co/spaces/FFusion/README/resolve/main/FFusionAI-Huggingface.jpg)](https://huggingface.co/FFusion)
 
 
-<button onclick="toggleVisibility()">Expand FFusion</button>
+[![FFusionAI](https://huggingface.co/spaces/FFusion/README/resolve/main/FFusionAI-Huggingface.jpg)](https://huggingface.co/FFusion)
+
 
-<div id="toggleContent" style="display:none;">
+<input type="checkbox" id="showMore" style="display:none">
+<label for="showMore" class="button-label">Expand FFusion</label>
+<div id="toggleContent">
   
 [![400GB FFusion Lora XL 1](https://huggingface.co/FFusion/400GB-LoraXL/resolve/main/images/image0.jpg)](https://huggingface.co/FFusion/400GB-LoraXL/)
 # FFusion LoRA XL Extracted Models for Hugging Face & Civitai 🚀
@@ -122,7 +119,7 @@ thumbnail: >-
 </div>
 
 
-[![ffusionXL-1-sdxl-base1.png](https://cdn-uploads.huggingface.co/production/uploads/6380cf05f496d57325c12194/KwpZpMCx-T-JWNaRF8e6N.png)](https://huggingface.co/spaces/FFusion/FFusionXL-SDXL-DEMO)
+[![ffusionXL-1-sdxl-base1.png](https://cdn-uploads.huggingface.co/production/uploads/6380cf05f496d57325c12194/KwpZpMCx-T-JWNaRF8e6N.png)](https://huggingface.co/FFusion/FFusionXL-BASE/)
 <div style="display: flex; flex-wrap: wrap; gap: 2px;">
   <a href="https://huggingface.co/FFusion/FFusionXL-BASE/blob/main/FFusionXL-BASE-v1.safetensors" target="_blank" rel="noopener noreferrer">
     <img src="https://img.shields.io/badge/-Download%20Model-brightgreen?style=for-the-badge&logo=appveyor" alt="Download Model">