Update README.md

README.md

@@ -6,29 +6,32 @@ library_name: transformers
 tags:
 - mergekit
 - merge
-
+- roleplay
 ---
-# merge
-
-This is a merge of pre-trained language models created using [mergekit](https://github.com/cg123/mergekit).
-
-## Merge Details
-### Merge Method
-
-This model was merged using the NuSLERP merge method.
+<section class="card-container">
 
-### Models Merged
+  <div class="card-header">
+    <h1 class="card-title">Maroon-Sunset-12B</h1>
+  </div>
 
-The following models were included in the merge:
-* [ReadyArt/Omega-Darker_The-Final-Directive-12B](https://huggingface.co/ReadyArt/Omega-Darker_The-Final-Directive-12B)
-* [Vortex5/Vermilion-Night-12B](https://huggingface.co/Vortex5/Vermilion-Night-12B)
+  <div class="card-image-box">
+    <img
+      src="https://cdn-uploads.huggingface.co/production/uploads/6669a3a617b838fda45637b8/i1Z8ewjv1EVD2GsUP-Se9.png"
+    >
+  </div>
 
-### Configuration
-
-The following YAML configuration was used to produce this model:
-
-```yaml
+  <div class="card-divider"></div>
 
+  <section class="card-section">
+    <h2 class="section-title">Overview</h2>
+    <p>
+      <strong class="text-accent">Maroon-Sunset-12B</strong> was created by merging
+      <a href="https://huggingface.co/ReadyArt/Omega-Darker_The-Final-Directive-12B" class="text-link">Omega-Darker_The-Final-Directive-12B</a>, and
+      <a href="https://huggingface.co/Vortex5/Vermilion-Night-12B" class="text-link">Vermilion-Night-12B</a>, using the NuSLERP merge method.
+    </p>
+    <details class="card-details">
+      <summary><span>Merge configuration</span></summary>
+      <pre>
 models:
   - model: ReadyArt/Omega-Darker_The-Final-Directive-12B
     parameters:
@@ -43,5 +46,362 @@ chat_template: auto
 dtype: bfloat16
 tokenizer:
   source: union
+      </pre>
+    </details>
+  </section>
+
+  <section class="card-section">
+    <h2 class="section-title">Intended Use</h2>
+    <p class="section-intro">
+      For storycraft, roleplay, and imagination.
+    </p>
+    <div class="tag-row">
+      <div class="tag-item">
+        <span class="tag-icon">📜</span>
+        <span class="tag-text-main">Storytelling</span>
+        <span class="tag-text-sub">Long-form narrative worlds</span>
+      </div>
+      <div class="tag-item">
+        <span class="tag-icon">🎭</span>
+        <span class="tag-text-main">Roleplay</span>
+        <span class="tag-text-sub">Character-focused interaction</span>
+      </div>
+      <div class="tag-item">
+        <span class="tag-icon">🌅</span>
+        <span class="tag-text-main">Creative Writing</span>
+        <span class="tag-text-sub">Ideas, drafts, and scenes</span>
+      </div>
+    </div>
+  </section>
+
+  <div class="card-footer-divider"></div>
+
+</section>
+
+<style>
+
+.card-container{
+  --bg0: #120a0a;
+  --bg1: #1a0f10;
+  --panel: rgba(255,255,255,.06);
+  --panel-strong: rgba(255,255,255,.09);
+  --stroke: rgba(255,255,255,.12);
+  --stroke-soft: rgba(255,255,255,.08);
+
+  --text: rgba(255,244,236,.92);
+  --text-soft: rgba(255,230,214,.78);
+  --text-muted: rgba(255,230,214,.64);
+
+  --ember: #ff6a3d;
+  --coral: #ff3d6a;
+  --gold: #ffcf6d;
+  --peach: #ffd0b5;
+
+  max-width: 1120px;
+  margin: 56px auto;
+  padding: 40px 40px 44px;
+  border-radius: 24px;
+
+  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Inter", Arial, sans-serif;
+  color: var(--text);
+
+  background:
+    radial-gradient(1200px 520px at 12% 8%, rgba(255, 207, 109, 0.18), transparent 52%),
+    radial-gradient(980px 520px at 88% 14%, rgba(255, 61, 106, 0.18), transparent 50%),
+    radial-gradient(800px 520px at 50% 110%, rgba(255, 106, 61, 0.16), transparent 55%),
+    linear-gradient(180deg, var(--bg1), var(--bg0));
+
+  border: 1px solid var(--stroke);
+
+  box-shadow:
+    0 30px 80px rgba(0,0,0,.70),
+    0 0 0 1px rgba(255, 207, 109, 0.06) inset;
+
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+
+  position: relative;
+  overflow: hidden;
+}
+
+.card-container::before{
+  content: "";
+  position: absolute;
+  inset: -2px;
+  pointer-events: none;
+  opacity: .18;
+  background-image:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
+  mix-blend-mode: overlay;
+}
+
+.card-header{
+  position: relative;
+  text-align: center;
+  padding: 18px 18px 16px;
+  border-radius: 18px;
+
+  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
+  border: 1px solid var(--stroke-soft);
+}
+
+.card-title{
+  margin: 0;
+  font-weight: 800;
+  font-size: clamp(1.9rem, 3vw, 2.55rem);
+  letter-spacing: .10em;
+  text-transform: uppercase;
+  color: rgba(255,248,242,.96);
+
+  text-shadow:
+    0 10px 30px rgba(0,0,0,.55),
+    0 0 22px rgba(255,106,61,.18);
+}
+
+.card-image-box{
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+.card-image-box img{
+  display: block;
+  width: 100%;
+  max-width: 920px;
+  border-radius: 16px;
+
+  background: rgba(0,0,0,.22);
+  border: 1px solid rgba(255,255,255,.10);
+
+  box-shadow:
+    0 22px 60px rgba(0,0,0,.65),
+    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
+}
+
+.card-divider,
+.card-footer-divider{
+  height: 1px;
+  margin-top: 8px;
+  width: 100%;
+  background:
+    linear-gradient(90deg,
+      transparent,
+      rgba(255, 207, 109, 0.35),
+      rgba(255, 61, 106, 0.22),
+      transparent
+    );
+  opacity: .95;
+}
+
+.card-section{
+  position: relative;
+  border-radius: 18px;
+  padding: 28px 26px 30px;
+
+  background:
+    radial-gradient(900px 240px at 18% 0%, rgba(255, 207, 109, 0.10), transparent 55%),
+    radial-gradient(900px 260px at 88% 12%, rgba(255, 61, 106, 0.10), transparent 55%),
+    rgba(255,255,255,.04);
+
+  border: 1px solid var(--stroke-soft);
+  overflow: hidden;
+}
+
+.card-section::before{
+  content: "";
+  position: absolute;
+  inset: 14px 14px;
+  border-radius: 14px;
+  border: 1px solid rgba(255,255,255,.06);
+  pointer-events: none;
+}
+
+.section-title{
+  margin: 0 0 18px;
+  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
+  font-weight: 850;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  color: rgba(255, 244, 236, 0.95);
+
+  display: inline-block;
+  padding: 8px 14px;
+  border-radius: 999px;
+  border: 1px solid rgba(255,255,255,.10);
+  background: rgba(0,0,0,.18);
+}
+
+.section-intro{
+  margin-top: 2px;
+  margin-bottom: 14px;
+  font-size: 0.98rem;
+  color: var(--text-muted);
+}
+
+.card-section p{
+  max-width: 880px;
+  margin: 10px 0 6px 0;
+  font-size: 1.02rem;
+  line-height: 1.75;
+  color: var(--text-soft);
+  text-align: left;
+}
+
+.text-accent{
+  color: var(--peach);
+  font-weight: 800;
+  text-shadow: 0 0 16px rgba(255, 106, 61, 0.20);
+}
+
+.text-link{
+  color: rgba(255, 207, 109, 0.95);
+  text-decoration: none;
+  border-bottom: 1px solid rgba(255, 207, 109, 0.35);
+  padding-bottom: 1px;
+  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
+}
+
+.text-link:hover{
+  color: rgba(255, 230, 214, 0.98);
+  border-bottom-color: rgba(255, 230, 214, 0.72);
+  background: rgba(255, 207, 109, 0.08);
+}
+
+.card-details{
+  display: block;
+  margin-top: 18px;
+  border-radius: 14px;
+  border: 1px solid rgba(255,255,255,.12);
+  background: rgba(0,0,0,.25);
+  overflow: hidden;
+}
+
+.card-details summary{
+  list-style: none;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  padding: 12px 14px;
+
+  font-size: 0.82rem;
+  font-weight: 800;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+
+  color: rgba(255,244,236,.90);
+  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
+  border-bottom: 1px solid rgba(255,255,255,.10);
+}
+
+.card-details summary::-webkit-details-marker{
+  display: none;
+}
+
+.card-details summary::after{
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-right: 2px solid rgba(255, 207, 109, 0.85);
+  border-bottom: 2px solid rgba(255, 207, 109, 0.85);
+  transform: rotate(-45deg);
+  justify-self: end;
+  margin-left: 10px;
+  transition: transform .2s ease, opacity .2s ease, border-color .2s ease;
+  opacity: .9;
+}
+
+.card-details[open] summary::after{
+  transform: rotate(45deg);
+  border-right-color: rgba(255, 208, 181, 0.95);
+  border-bottom-color: rgba(255, 208, 181, 0.95);
+  opacity: 1;
+}
+
+.card-details pre{
+  margin: 0;
+  padding: 14px 14px 16px;
+
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "JetBrains Mono", "Liberation Mono", monospace;
+  font-size: 0.86rem;
+  line-height: 1.6;
+
+  color: rgba(255, 244, 236, 0.86);
+  text-align: left;
+
+  background: rgba(0,0,0,.18);
+  overflow-x: auto;
+}
+
+.tag-row{
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 10px;
+}
+
+.tag-item{
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto auto;
+  gap: 2px 10px;
+  align-items: center;
+
+  padding: 12px 12px;
+  border-radius: 14px;
+
+  background:
+    radial-gradient(600px 170px at 30% 0%, rgba(255, 207, 109, 0.12), transparent 55%),
+    rgba(0,0,0,.22);
+
+  border: 1px solid rgba(255,255,255,.12);
+
+  box-shadow:
+    0 16px 44px rgba(0,0,0,.45),
+    0 0 0 1px rgba(255, 106, 61, 0.04) inset;
+}
+
+.tag-icon{
+  grid-row: 1 / span 2;
+  font-size: 1.15rem;
+  align-self: start;
+}
+
+.tag-text-main{
+  font-size: 0.86rem;
+  font-weight: 900;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  color: rgba(255, 230, 214, 0.92);
+}
+
+.tag-text-sub{
+  font-size: 0.92rem;
+  color: var(--text-muted);
+  line-height: 1.55;
+}
+
+@media (max-width: 900px){
+  .card-container{
+    padding: 32px 22px 36px;
+    gap: 32px;
+  }
+  .tag-row{
+    grid-template-columns: 1fr;
+  }
+}
 
-```
+@media (max-width: 600px){
+  .card-section{
+    padding: 22px 18px 24px;
+  }
+  .card-section::before{
+    inset: 12px 12px;
+  }
+  .card-title{
+    font-size: 2rem;
+  }
+}
+</style>