Update README.md

README.md

@@ -3,19 +3,41 @@
 
   .vg-container, .vg-container * {
     font-family: 'Ubuntu', sans-serif;
+    box-sizing: border-box;
   }
 
   .vg-code, .vg-code * {
     font-family: 'Ubuntu Mono', 'Courier New', monospace !important;
-    line-height: 1.4 !important;
   }
 
-  .vg-table tbody tr:nth-child(even) {
-    background-color: #0d0d0d;
+  .vg-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    margin: 20px 0;
+    color: #FFFFFF;
+    border: 1px solid #333333;
+    border-radius: 6px;
+    overflow: hidden;
   }
 
-  .vg-table tbody tr:hover {
-    background-color: #161616;
+  .vg-table tr:not(:last-child) td {
+    border-bottom: 1px solid #333333;
+  }
+
+  .vg-table td:first-child {
+    border-right: 1px solid #333333;
+    width: 32%;
+    background-color: #121212;
+    font-weight: 500;
+    color: #DDDDDD;
+    padding: 10px 16px;
+  }
+
+  .vg-table td:last-child {
+    background-color: #080808;
+    color: #FFFFFF;
+    padding: 10px 16px;
   }
 </style>
 
@@ -23,7 +45,7 @@
 
   <h1 style="color: #FFFFFF; font-weight: 500; border-bottom: 1px solid #333333; padding-bottom: 8px; margin-top: 0;">VisionGuardrail-4B</h1>
 
-  <p style="color: #FFFFFF;">
+  <p style="color: #FFFFFF; margin: 16px 0;">
     <b>VisionGuardrail-4B</b> is a multimodal content-safety classifier based on <b>Qwen/Qwen3.5-4B</b> and trained on the <a href="https://huggingface.co/datasets/prithivMLmods/ImageShield-Guardrail-Pro" style="color: #FF4500; text-decoration: none;">prithivMLmods/ImageShield-Guardrail-Pro</a> content-safety guardrail dataset. The model is designed to classify visual content as <b>Safe</b> or <b>Unsafe</b>, with a particular focus on detecting <b>Not Safe for Work (NSFW) sensual content</b> and other potentially sensitive visual content. VisionGuardrail-4B excels at detecting <b>explicit and sensitive visual content</b>, with detailed analysis of <b>dress codes, clothing exposure, poses, framing, and different visual settings</b> to support conservative content-safety classification.
   </p>
 
@@ -45,32 +67,25 @@
   <div style="display: flex; align-items: flex-start; margin-bottom: 8px; color: #FFFFFF;"><span style="margin-right: 12px; color: #FFFFFF; font-weight: bold;">+</span><span><b>Zero-Tolerance Safety Classification</b>: Uses a conservative classification policy that favors safety when the content is ambiguous.</span></div>
   <div style="display: flex; align-items: flex-start; margin-bottom: 8px; color: #FFFFFF;"><span style="margin-right: 12px; color: #FFFFFF; font-weight: bold;">+</span><span><b>Structured Output</b>: Produces a machine-readable JSON response containing a caption, classification, and reasoning.</span></div>
 
-  <details style="border: 1px solid #333333; border-radius: 4px; margin-bottom: 16px; overflow: hidden; background-color: #000000;">
+  <details style="border: 1px solid #333333; border-radius: 4px; margin: 24px 0 16px 0; overflow: hidden; background-color: #000000;">
     <summary style="padding: 12px 16px; cursor: pointer; color: #FFFFFF !important; font-weight: 500; background-color: #111111; list-style: none; display: flex; justify-content: space-between; font-family: 'Ubuntu', sans-serif;">Standard Instruction</summary>
     <div style="background-color: #000000; border: none; border-radius: 0; margin: 0; overflow: hidden;">
-      <div style="background-color: #1a1a1a; padding: 6px 12px; border-bottom: 1px solid #333333; display: flex; justify-content: flex-end; align-items: center;">
-        <button onclick="copyCode(this)" style="background-color: #333333; color: #FFFFFF; border: none; padding: 4px 10px; cursor: pointer; border-radius: 4px; font-size: 12px; font-family: 'Ubuntu', sans-serif; line-height: 1.2;">Copy</button>
+      <div style="background-color: #1a1a1a; padding: 8px 16px; border-bottom: 1px solid #333333; display: flex; justify-content: flex-end; align-items: center;">
+        <button onclick="copyCode(this)" style="background-color: #333333; color: #FFFFFF; border: none; padding: 4px 10px; cursor: pointer; border-radius: 4px; font-size: 12px; font-family: 'Ubuntu', sans-serif;">Copy</button>
       </div>
-      <pre class="vg-code" style="margin: 0; padding: 16px; background-color: #000000 !important; color: #FFFFFF !important; overflow-x: auto; font-size: 14px;">You are a strict, zero-tolerance parental control content-safety guardrail classifier for visual media.
+      <pre class="vg-code" style="margin: 0; padding: 16px; background-color: #000000 !important; color: #FFFFFF !important; overflow-x: auto; font-family: 'Ubuntu Mono', 'Courier New', monospace !important; font-size: 14px; white-space: pre-wrap; line-height: 1.45;">You are a strict, zero-tolerance parental control content-safety guardrail classifier for visual media.
 
 Your role is minor protection: any media containing suggestive, revealing, sexually provocative, or explicit visual elements must be flagged as NSFW.
 
 STRICT ZERO-TOLERANCE CLASSIFICATION RULES:
 
 1. Nudity & Exposure: Any full or partial nudity, exposed breasts, cleavage, buttocks, groin, or visible pubic area MUST be classified as NSFW.
-
 2. Underwear & Swimwear: Thongs, G-strings, micro-bikinis, skimpy or revealing swimwear, bras, panties, lingerie, see-through clothing, or unbuttoned tops revealing undergarments or bare torsos MUST be classified as NSFW.
-
 3. Dress-Code Analysis: Carefully analyze clothing, coverage, transparency, exposure, and the overall dress code. Revealing or sexually provocative clothing MUST be classified as NSFW.
-
 4. Poses & Suggestiveness: Sexually suggestive poses, seductive modeling, cleavage-emphasizing framing, fetish content, or explicit erotic themes MUST be classified as NSFW.
-
 5. Context & Setting: Consider the visual setting, composition, framing, and contextual cues when evaluating potentially sensitive content.
-
 6. Artwork & Animation: Anime nudes, ecchi, hentai, suggestive illustrations, or 2D/3D stylized erotica MUST be classified as NSFW.
-
 7. Sensitive Visual Content: Explicit or highly suggestive visual content MUST be classified as NSFW even when presented in non-photorealistic or artistic formats.
-
 8. Classification Threshold: When in doubt, err on the side of caution and classify the content as NSFW.
 
 Output strictly valid JSON with no extra conversational text, commentary, or markdown formatting outside the JSON object:
@@ -88,18 +103,18 @@ Output strictly valid JSON with no extra conversational text, commentary, or mar
   <h2 style="color: #FFFFFF; font-weight: 500; border-bottom: 1px solid #333333; padding-bottom: 8px; margin-top: 32px;">Quick Start with Transformers</h2>
 
   <div style="background-color: #000000; border: 1px solid #333333; border-radius: 4px; margin-bottom: 16px; overflow: hidden;">
-    <div style="background-color: #1a1a1a; padding: 6px 12px; border-bottom: 1px solid #333333; display: flex; justify-content: flex-end; align-items: center;">
-      <button onclick="copyCode(this)" style="background-color: #333333; color: #FFFFFF; border: none; padding: 4px 10px; cursor: pointer; border-radius: 4px; font-size: 12px; font-family: 'Ubuntu', sans-serif; line-height: 1.2;">Copy</button>
+    <div style="background-color: #1a1a1a; padding: 8px 16px; border-bottom: 1px solid #333333; display: flex; justify-content: flex-end; align-items: center;">
+      <button onclick="copyCode(this)" style="background-color: #333333; color: #FFFFFF; border: none; padding: 4px 10px; cursor: pointer; border-radius: 4px; font-size: 12px; font-family: 'Ubuntu', sans-serif;">Copy</button>
     </div>
-    <pre class="vg-code" style="margin: 0; padding: 16px; background-color: #000000 !important; color: #FFFFFF !important; overflow-x: auto; font-size: 14px;">pip install transformers
+    <pre class="vg-code" style="margin: 0; padding: 16px; background-color: #000000 !important; color: #FFFFFF !important; overflow-x: auto; font-family: 'Ubuntu Mono', 'Courier New', monospace !important; font-size: 14px; white-space: pre-wrap; line-height: 1.45;">pip install transformers
 pip install accelerate</pre>
   </div>
 
   <div style="background-color: #000000; border: 1px solid #333333; border-radius: 4px; margin-bottom: 16px; overflow: hidden;">
-    <div style="background-color: #1a1a1a; padding: 6px 12px; border-bottom: 1px solid #333333; display: flex; justify-content: flex-end; align-items: center;">
-      <button onclick="copyCode(this)" style="background-color: #333333; color: #FFFFFF; border: none; padding: 4px 10px; cursor: pointer; border-radius: 4px; font-size: 12px; font-family: 'Ubuntu', sans-serif; line-height: 1.2;">Copy</button>
+    <div style="background-color: #1a1a1a; padding: 8px 16px; border-bottom: 1px solid #333333; display: flex; justify-content: flex-end; align-items: center;">
+      <button onclick="copyCode(this)" style="background-color: #333333; color: #FFFFFF; border: none; padding: 4px 10px; cursor: pointer; border-radius: 4px; font-size: 12px; font-family: 'Ubuntu', sans-serif;">Copy</button>
     </div>
-    <pre class="vg-code" style="margin: 0; padding: 16px; background-color: #000000 !important; color: #FFFFFF !important; overflow-x: auto; font-size: 14px;">from transformers import Qwen3_5ForConditionalGeneration, AutoProcessor
+    <pre class="vg-code" style="margin: 0; padding: 16px; background-color: #000000 !important; color: #FFFFFF !important; overflow-x: auto; font-family: 'Ubuntu Mono', 'Courier New', monospace !important; font-size: 14px; white-space: pre-wrap; line-height: 1.45;">from transformers import Qwen3_5ForConditionalGeneration, AutoProcessor
 import torch
 
 model = Qwen3_5ForConditionalGeneration.from_pretrained(
@@ -155,54 +170,46 @@ print(output_text[0])</pre>
 
   <h2 style="color: #FFFFFF; font-weight: 500; border-bottom: 1px solid #333333; padding-bottom: 8px; margin-top: 32px;">Training Details</h2>
 
-  <div style="border: 1px solid #333333; border-radius: 8px; overflow: hidden; margin: 20px 0;">
-    <table class="vg-table" style="width: 100%; border-collapse: collapse; color: #FFFFFF;">
-      <thead>
-        <tr style="background-color: #1a1a1a;">
-          <th style="text-align: left; padding: 12px 16px; border-bottom: 1px solid #333333; color: #FF4500; font-weight: 500; width: 35%;">Field</th>
-          <th style="text-align: left; padding: 12px 16px; border-bottom: 1px solid #333333; color: #FF4500; font-weight: 500;">Value</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td style="padding: 12px 16px; border-bottom: 1px solid #222222; font-weight: 500;">Base Model</td>
-          <td style="padding: 12px 16px; border-bottom: 1px solid #222222;">Qwen/Qwen3.5-4B</td>
-        </tr>
-        <tr>
-          <td style="padding: 12px 16px; border-bottom: 1px solid #222222; font-weight: 500;">Model</td>
-          <td style="padding: 12px 16px; border-bottom: 1px solid #222222;">VisionGuardrail-4B</td>
-        </tr>
-        <tr>
-          <td style="padding: 12px 16px; border-bottom: 1px solid #222222; font-weight: 500;">Model Type</td>
-          <td style="padding: 12px 16px; border-bottom: 1px solid #222222;">Multimodal Content-Safety Classifier</td>
-        </tr>
-        <tr>
-          <td style="padding: 12px 16px; border-bottom: 1px solid #222222; font-weight: 500;">Training Dataset</td>
-          <td style="padding: 12px 16px; border-bottom: 1px solid #222222;">prithivMLmods/ImageShield-Guardrail-Pro</td>
-        </tr>
-        <tr>
-          <td style="padding: 12px 16px; border-bottom: 1px solid #222222; font-weight: 500;">Training Objective</td>
-          <td style="padding: 12px 16px; border-bottom: 1px solid #222222;">Content-safety guardrail classification</td>
-        </tr>
-        <tr>
-          <td style="padding: 12px 16px; border-bottom: 1px solid #222222; font-weight: 500;">Primary Classification</td>
-          <td style="padding: 12px 16px; border-bottom: 1px solid #222222;">Safe / Unsafe</td>
-        </tr>
-        <tr>
-          <td style="padding: 12px 16px; border-bottom: 1px solid #222222; font-weight: 500;">Safety Focus</td>
-          <td style="padding: 12px 16px; border-bottom: 1px solid #222222;">Not Safe for Work (NSFW) Sensual Content</td>
-        </tr>
-        <tr>
-          <td style="padding: 12px 16px; border-bottom: 1px solid #222222; font-weight: 500;">Visual Analysis</td>
-          <td style="padding: 12px 16px; border-bottom: 1px solid #222222;">Dress Codes, Poses, Exposure & Settings</td>
-        </tr>
-        <tr>
-          <td style="padding: 12px 16px; font-weight: 500;">Training Framework</td>
-          <td style="padding: 12px 16px;">TRL</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+  <table class="vg-table">
+    <tbody>
+      <tr>
+        <td>Base Model</td>
+        <td>Qwen/Qwen3.5-4B</td>
+      </tr>
+      <tr>
+        <td>Model</td>
+        <td>VisionGuardrail-4B</td>
+      </tr>
+      <tr>
+        <td>Model Type</td>
+        <td>Multimodal Content-Safety Classifier</td>
+      </tr>
+      <tr>
+        <td>Training Dataset</td>
+        <td>prithivMLmods/ImageShield-Guardrail-Pro</td>
+      </tr>
+      <tr>
+        <td>Training Objective</td>
+        <td>Content-safety guardrail classification</td>
+      </tr>
+      <tr>
+        <td>Primary Classification</td>
+        <td>Safe / Unsafe</td>
+      </tr>
+      <tr>
+        <td>Safety Focus</td>
+        <td>Not Safe for Work (NSFW) Sensual Content</td>
+      </tr>
+      <tr>
+        <td>Visual Analysis</td>
+        <td>Dress Codes, Poses, Exposure &amp; Settings</td>
+      </tr>
+      <tr>
+        <td>Training Framework</td>
+        <td>TRL</td>
+      </tr>
+    </tbody>
+  </table>
 
   <h2 style="color: #FFFFFF; font-weight: 500; border-bottom: 1px solid #333333; padding-bottom: 8px; margin-top: 32px;">Intended Use</h2>
   <div style="display: flex; align-items: flex-start; margin-bottom: 8px; color: #FFFFFF;"><span style="margin-right: 12px; color: #FFFFFF; font-weight: bold;">+</span><span><b>Content Safety Classification</b>: Classifying visual media as safe or unsafe.</span></div>
@@ -233,16 +240,29 @@ print(output_text[0])</pre>
 <script>
   function copyCode(btn) {
     const codeBlock = btn.parentElement.nextElementSibling;
+    const textToCopy = codeBlock.innerText.trim();
+    if (navigator.clipboard && window.isSecureContext) {
+      navigator.clipboard.writeText(textToCopy).then(() => {
+        btn.innerText = 'Copied!';
+        setTimeout(() => { btn.innerText = 'Copy'; }, 2000);
+      }).catch(() => fallbackCopy(textToCopy, btn));
+    } else {
+      fallbackCopy(textToCopy, btn);
+    }
+  }
+
+  function fallbackCopy(text, btn) {
     const textArea = document.createElement('textarea');
-    textArea.value = codeBlock.innerText;
+    textArea.value = text;
+    textArea.style.position = 'fixed';
+    textArea.style.opacity = '0';
     document.body.appendChild(textArea);
+    textArea.focus();
     textArea.select();
     try {
       document.execCommand('copy');
       btn.innerText = 'Copied!';
-      setTimeout(() => {
-        btn.innerText = 'Copy';
-      }, 2000);
+      setTimeout(() => { btn.innerText = 'Copy'; }, 2000);
     } catch (err) {
       console.error('Failed to copy text: ', err);
     }