More html, still pink :p

Preview:
![image.png](https://cdn-uploads.huggingface.co/production/uploads/660e67afe23148df7ca321a5/bezDKajcFu9tvzceBaXG0.png)

Files changed (1) hide show

README.md +204 -5

README.md CHANGED Viewed

@@ -2,12 +2,211 @@
 quantized_by: ArtusDev
 pipeline_tag: text-generation
 base_model: allura-org/Gemma-3-Glitter-4B
-license: other
 base_model_relation: quantized
 ---
-# ArtusDev/allura-org_Gemma-3-Glitter-4B-GGUF
-This model was converted to GGUF format from [`allura-org/Gemma-3-Glitter-4B`](https://huggingface.co/allura-org/Gemma-3-Glitter-4B) using llama.cpp with imatrix option.
-Refer to the [original model card](https://huggingface.co/allura-org/Gemma-3-Glitter-4B) for more details on the model.
-GGUF Quants (imatrix) by ArtusDev.

 quantized_by: ArtusDev
 pipeline_tag: text-generation
 base_model: allura-org/Gemma-3-Glitter-4B
+license: gemma
 base_model_relation: quantized
+language:
+- en
+tags:
+- imatrix
+- gemma3_text
 ---
+<!DOCTYPE html>
+<div class="container">
+<style>
+  /* --- Pink Confetti :3 Theme --- */
+  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Source+Code+Pro:wght@400;600&display=swap');
+  /* --- Define Theme Colors as Variables --- */
+  .container {
+    /* You can easily change the theme by editing these! */
+    --bg-gradient-start: #3a1c3a;
+    --bg-gradient-end: #1a0d1a;
+    --text-color-main: #f0e6f0;
+    --text-color-muted: #e6d9e6;
+    --text-color-subtle: #d9c7d9;
+    --border-color-soft: #ff80c0; /* Soft Pink */
+    --accent-color-hot: #ff69b4;   /* Hot Pink */
+    --accent-color-light: #ff99cc; /* Lighter Pink */
+    --accent-color-hover: #ffb3da; /* Even Lighter Pink (Hover) */
+    --shadow-color-glow: rgba(255, 105, 180, 0.2);
+    --shadow-color-text: rgba(255, 105, 180, 0.5);
+    --shadow-color-hover: rgba(255, 182, 193, 0.6);
+    --section-bg-subtle: rgba(255, 182, 193, 0.08);
+    --code-bg: #2b1d2b;
+    --code-text-color: #f0e6f0;
+    --token-tag-color: #ff99cc;
+    --token-role-color: #ffb3da;
+    --token-comment-color: #b3a3b3;
+    /* Base Styles */
+    font-family: 'Roboto', sans-serif;
+    background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));
+    color: var(--text-color-main);
+    padding: 25px;
+    border-radius: 12px;
+    border: 1px solid var(--border-color-soft);
+    box-shadow: 0 4px 15px var(--shadow-color-glow);
+    margin: 15px auto;
+    max-width: 900px;
+    overflow: hidden; /* Keep elements contained */
+    /* Basic Accessibility Check: Ensure sufficient contrast, especially for text! */
+  }
+  /* --- Typography & Elements --- */
+  .title {
+    /* font-family: 'Roboto', sans-serif; /* Inherited from .container */
+    font-size: 2.2em;
+    font-weight: 700;
+    color: var(--accent-color-hot);
+    text-align: center;
+    margin-bottom: 25px;
+    padding-bottom: 15px;
+    border-bottom: 2px solid var(--border-color-soft);
+    text-shadow: 0 0 8px var(--shadow-color-text);
+    word-wrap: break-word;
+  }
+  .section {
+    margin-bottom: 25px;
+    padding: 20px;
+    background-color: var(--section-bg-subtle);
+    border-radius: 8px;
+    border-left: 4px solid var(--accent-color-hot);
+  }
+  h2 {
+    /* font-family: 'Roboto', sans-serif; /* Inherited */
+    color: var(--accent-color-light);
+    margin-top: 0;
+    margin-bottom: 15px;
+    padding-bottom: 5px;
+    border-bottom: 1px solid rgba(255, 128, 192, 0.4); /* Kept rgba for faintness */
+    font-weight: 700;
+  }
+  p {
+    line-height: 1.7;
+    margin-bottom: 12px;
+    color: var(--text-color-muted);
+  }
+  a {
+    color: var(--accent-color-hot);
+    text-decoration: none;
+    font-weight: 600; /* Use 700 if you want it bolder like headings */
+    transition: color 0.3s ease, text-shadow 0.3s ease;
+  }
+  a:hover, a:focus { /* Added :focus for accessibility */
+    color: var(--accent-color-hover);
+    text-decoration: underline;
+    text-shadow: 0 0 5px var(--shadow-color-hover);
+    outline: none; /* Optional: manage focus outline appearance */
+  }
+  /* --- Code Block Styling :3 --- */
+  pre {
+    font-family: 'Source Code Pro', monospace;
+    background-color: var(--code-bg);
+    border: 1px solid var(--border-color-soft);
+    border-radius: 6px;
+    padding: 15px;
+    overflow-x: auto; /* Allow horizontal scroll for long lines */
+    margin-top: 10px;
+    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
+    white-space: pre; /* Preserve whitespace and line breaks */
+  }
+  code {
+    font-family: 'Source Code Pro', monospace; /* Ensure consistency */
+    color: var(--code-text-color);
+    background-color: transparent; /* Use pre's background */
+    font-size: 0.95em;
+    /* Removed padding/margin here, let <pre> handle spacing */
+    white-space: inherit; /* Inherit whitespace handling from <pre> */
+  }
+  /* Specific token styling within code - Applied in HTML now! */
+  .token-tag {
+    color: var(--token-tag-color);
+    font-weight: 600;
+  }
+  .token-role {
+    color: var(--token-role-color);
+    /* font-style: italic; /* Optional: Keep if you like italic roles */
+  }
+  .token-comment {
+    color: var(--token-comment-color);
+    font-style: italic;
+  }
+  /* --- Footer Credit --- */
+  .credit {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 0.9em;
+    color: var(--text-color-subtle);
+  }
+  .credit strong {
+    color: var(--accent-color-light);
+    font-weight: 700; /* Make sure strong is actually bold */
+  }
+  /* --- Optional: Better Separation ---
+     For larger projects, move this CSS to a separate style.css file
+     and link it in the <head> of your HTML document:
+     <link rel="stylesheet" href="style.css">
+  */
+</style>
+<!-- Model Card Content -->
+<h1 class="title">ArtusDev/allura-org_Gemma-3-Glitter-4B-GGUF</h1>
+<div class="section">
+  <h2>✨ Overview :3</h2>
+  <p>
+    This repository contains GGUF format model files converted from <a href="https://huggingface.co/allura-org/Gemma-3-Glitter-4B" target="_blank">allura-org/Gemma-3-Glitter-4B</a>.
+  </p>
+  <p>
+    The conversion was performed by <strong>ArtusDev</strong> using <code>llama.cpp</code>, specifically utilizing the <code>imatrix</code> quantization option for potentially improved performance.
+  </p>
+</div>
+<div class="section">
+  <h2>📄 Original Model Details ^_^</h2>
+  <p>
+    For more information about the model please refer to the <a href="https://huggingface.co/allura-org/Gemma-3-Glitter-4B" target="_blank">original model card</a>. It's pretty neat (empty)!
+  </p>
+</div>
+<div class="section">
+  <h2>💬 Instruct Format >.<</h2>
+  <p>
+    This model uses a custom <strong>Gemma 2/3 instruct format</strong>. It has been trained to recognize an optional <code>system</code> role.
+  </p>
+  <!-- Proper HTML for code block with syntax highlighting spans -->
+  <pre><code><span class="token-tag">&lt;start_of_turn&gt;</span><span class="token-role">system</span>
+<span class="token-comment">{optional system prompt here}</span><span class="token-tag">&lt;end_of_turn&gt;</span>
+<span class="token-tag">&lt;start_of_turn&gt;</span><span class="token-role">user</span>
+<span class="token-comment">{User messages. You can also place the system prompt here.}</span><span class="token-tag">&lt;end_of_turn&gt;</span>
+<span class="token-tag">&lt;start_of_turn&gt;</span><span class="token-role">model</span>
+<span class="token-comment">{Model's response}</span><span class="token-tag">&lt;end_of_turn&gt;</span></code></pre>
+  <!-- End of corrected code block -->
+  <p>
+    <strong>Note:</strong> Always ensure the format strictly adheres to the required tokens and structure for optimal model performance. Don't mess it up :3!
+  </p>
+</div>
+<div class="credit">
+  GGUF Quantizations (imatrix) by <strong>ArtusDev</strong> &gt;:3
+</div>
+</div>