Update README.md

README.md

@@ -8,30 +8,36 @@ library_name: transformers
 tags:
 - mergekit
 - merge
-
+- roleplay
+license: apache-2.0
 ---
-# merge
-
-This is a merge of pre-trained language models created using [mergekit](https://github.com/cg123/mergekit).
-
-## Merge Details
-### Merge Method
+<section class="card">
 
-This model was merged using the hpq merge method using [Vortex5/Abyssal-Seraph-12B](https://huggingface.co/Vortex5/Abyssal-Seraph-12B) as a base.
+  <div class="card-header">
+    <h1 class="card-title">Darklit-Maiden-12B</h1>
+  </div>
 
-### Models Merged
+  <div class="card-image">
+    <img src="https://cdn-uploads.huggingface.co/production/uploads/6669a3a617b838fda45637b8/wGhk4eL64ctO98iYnuRNr.png">
+  </div>
 
-The following models were included in the merge:
-* [Vortex5/Lunar-Twilight-12B](https://huggingface.co/Vortex5/Lunar-Twilight-12B)
-* [Vortex5/Maroon-Sunset-12B](https://huggingface.co/Vortex5/Maroon-Sunset-12B)
-* [Retreatcost/KansenSakura-Erosion-RP-12b](https://huggingface.co/Retreatcost/KansenSakura-Erosion-RP-12b)
+  <div class="divider"></div>
 
-### Configuration
+  <section class="box">
+    <h2 class="box-title">Overview</h2>
 
-The following YAML configuration was used to produce this model:
+  <p>
+  <strong class="highlight">Darklit-Maiden-12B</strong> was created by merging
+  <a href="https://huggingface.co/Vortex5/Abyssal-Seraph-12B" class="link">Abyssal-Seraph-12B</a>,
+  <a href="https://huggingface.co/Vortex5/Lunar-Twilight-12B" class="link">Lunar-Twilight-12B</a>,
+  <a href="https://huggingface.co/Retreatcost/KansenSakura-Erosion-RP-12b" class="link">KansenSakura-Erosion-RP-12b</a>, and
+  <a href="https://huggingface.co/Vortex5/Maroon-Sunset-12B" class="link">Maroon-Sunset-12B</a>, using a custom method.
+  </p>
 
-```yaml
 
+  <details class="collapse">
+      <summary>Merge configuration</summary>
+<pre>
 base_model: Vortex5/Abyssal-Seraph-12B
 models:
   - model: Vortex5/Lunar-Twilight-12B
@@ -50,5 +56,262 @@ dtype: float32
 out_dtype: bfloat16
 tokenizer:
   source: Vortex5/Abyssal-Seraph-12B
+</pre>
+    </details>
+  </section>
+
+  <section class="box">
+    <h2 class="box-title">Intended Use</h2>
+
+  <div class="grid">
+      <div class="tile">
+        <span class="tile-main">Roleplay</span>
+        <span class="tile-sub">Emotion-forward interaction</span>
+      </div>
+
+  <div class="tile">
+        <span class="tile-main">Storytelling</span>
+        <span class="tile-sub">Long-form narrative</span>
+      </div>
+
+  <div class="tile">
+        <span class="tile-main">Creative Writing</span>
+        <span class="tile-sub">Atmospheric fiction</span>
+      </div>
+    </div>
+
+  </section>
+
+  <div class="divider"></div>
+
+</section>
+
+<style>
+.card{
+  --bg:#0b0b0d;
+
+  --line:#2a2a2f;
+  --muted:#9a9a9a;
+  --accent:#3a0a10;
+
+  max-width:1100px;
+  margin:40px auto;
+  padding:32px;
+
+  font-family:Georgia,"Times New Roman",serif;
+  color:#e6e6e6;
+
+  background:var(--bg);
+
+  border:10px solid #050505;
+
+  outline:2px solid #3a0a10;
+  outline-offset:-6px;
+
+  border-radius:0;
+
+  display:flex;
+  flex-direction:column;
+  gap:28px;
+}
+
+.card-header{
+  text-align:center;
+  padding-bottom:14px;
+
+  border-bottom:1px solid #3a0a10;
+}
+
+.card-title{
+  margin:0;
+  font-size:clamp(1.5rem,3vw,2.2rem);
+  font-weight:700;
+  letter-spacing:.22em;
+  text-transform:uppercase;
+
+  color:#eaeaea;
+
+  text-shadow:
+    0 0 2px rgba(255,255,255,0.05),
+    0 0 6px rgba(110,15,26,0.25);
+}
+
+.card-image{
+  display:flex;
+  justify-content:center;
+}
+
+.card-image img{
+  width:100%;
+  max-width:820px;
+
+  border-radius:0;
+
+  border:1px solid #6e0f1a;
+
+  background:#111;
+}
+
+.divider{
+  height:1px;
+  background:linear-gradient(
+    90deg,
+    transparent,
+    var(--accent),
+    transparent
+  );
+  opacity:.7;
+}
+
+.box{
+  padding:22px;
+
+  background:#09090b;
+
+  border:1px solid #3a0a10;
+
+  border-radius:0;
+
+  box-shadow:
+    inset 0 1px 0 rgba(255,255,255,0.015),
+    inset 0 0 0 1px rgba(0,0,0,0.6);
+}
+
+.box-title{
+  margin:0 0 14px;
+  font-size:1rem;
+  font-weight:700;
+  letter-spacing:.18em;
+  text-transform:uppercase;
+
+  color:#dcdcdc;
+
+  border-bottom:1px solid var(--accent);
+  padding-bottom:6px;
+}
+
+.box p{
+  margin:10px 0;
+  line-height:1.7;
+  color:var(--muted);
+}
+
+.highlight{
+  color:#d6d6d6;
+  font-weight:600;
+}
+
+.accent{
+  color:#c24a5a;
+  font-weight:700;
+}
+
+.collapse{
+  margin-top:16px;
+
+  background:#09090b;
+
+  border:1px solid #3a0a10;
+  border-radius:0;
+
+  box-shadow:
+    inset 0 0 0 1px rgba(0,0,0,0.6);
+}
+
+.collapse summary{
+  padding:10px 14px;
+  cursor:pointer;
+
+  font-size:.75rem;
+  font-weight:700;
+  letter-spacing:.12em;
+  text-transform:uppercase;
+
+  color:#e6e6e6;
+
+  background:#0d0d0f;
+
+  border-bottom:1px solid #3a0a10;
+}
+
+.collapse pre{
+  margin:0;
+  padding:16px;
+
+  background:#060607;
+  color:#dcdcdc;
+
+  border-top:1px solid #3a0a10;
+
+  font-size:.82rem;
+  line-height:1.6;
+  overflow-x:auto;
+
+  font-family:Consolas,"Courier New",monospace;
+}
+
+.grid{
+  display:flex;
+  flex-wrap:wrap;
+  gap:16px;
+  margin-top:12px;
+}
+
+.tile{
+  flex:1 1 200px;
+  padding:16px;
+
+  background:#09090b;
+
+  border:1px solid #3a0a10;
+
+  border-radius:0;
+  text-align:center;
+
+  transition:transform .12s ease, border-color .12s ease;
+}
+
+.tile:hover{
+  transform:translateY(-3px);
+
+  border-color:#6e0f1a;
+}
+
+.tile-main{
+  display:block;
+  margin-bottom:6px;
+  font-size:.9rem;
+  font-weight:700;
+  letter-spacing:.08em;
+  text-transform:uppercase;
+  color:#ffffff;
+}
+
+.tile-sub{
+  display:block;
+  font-size:.88rem;
+  color:var(--muted);
+}
+
+.link{
+  color:#a33a45;
+  text-decoration:none;
+
+  transition:color .15s ease;
+}
+
+.link:hover{
+  color:#c24a5a;
+  text-decoration:underline;
+}
+
+@media (max-width:600px){
+  .card{
+    padding:22px 16px;
+  }
 
-```
+  .box{
+    padding:18px;
+  }
+}
+</style>