Update README.md

README.md

@@ -7,30 +7,31 @@ 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 ecf merge method.
-
-### Models Merged
-
-The following models were included in the merge:
-* [Vortex5/Starry-Shadow-12B](https://huggingface.co/Vortex5/Starry-Shadow-12B)
-* [Vortex5/MegaMoon-Karcher-12B](https://huggingface.co/Vortex5/MegaMoon-Karcher-12B)
-* [Vortex5/Vermilion-Sage-12B](https://huggingface.co/Vortex5/Vermilion-Sage-12B)
+<section class="card-container">
 
-### Configuration
+  <div class="card-header">
+    <h1 class="card-title">Vermilion-Night-12B</h1>
+  </div>
 
-The following YAML configuration was used to produce this model:
+  <div class="card-image-box">
+    <img src="https://cdn-uploads.huggingface.co/production/uploads/6669a3a617b838fda45637b8/1QeIAvW7DebKtDQrt3aS7.png">
+  </div>
 
-```yaml
+  <div class="card-divider"></div>
 
+  <section class="card-section">
+    <h2 class="section-title">Overview</h2>
+    <p>
+      <strong class="text-accent">Vermilion-Night-12B</strong> was created by merging
+      <a href="https://huggingface.co/Vortex5/Vermilion-Sage-12B" class="text-link">Vermilion-Sage-12B</a>,
+      <a href="https://huggingface.co/Vortex5/MegaMoon-Karcher-12B" class="text-link">MegaMoon-Karcher-12B</a>, and
+      <a href="https://huggingface.co/Vortex5/Starry-Shadow-12B" class="text-link">Starry-Shadow-12B</a> using a custom method.
+    </p>
+    <details class="card-details">
+      <summary><span>Merge configuration</span></summary>
+      <pre>
 models:
   - model: Vortex5/Vermilion-Sage-12B
   - model: Vortex5/MegaMoon-Karcher-12B
@@ -46,5 +47,302 @@ parameters:
 dtype: bfloat16
 tokenizer:
   source: Vortex5/Starry-Shadow-12B
+      </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">Epics from the void</span>
+      </div>
+      <div class="tag-item">
+        <span class="tag-icon">🎭</span>
+        <span class="tag-text-main">Roleplay</span>
+        <span class="tag-text-sub">Brooding, vivid personas</span>
+      </div>
+      <div class="tag-item">
+        <span class="tag-icon">🌘</span>
+        <span class="tag-text-main">Creative Writing</span>
+        <span class="tag-text-sub">Scenes in dusk and neon</span>
+      </div>
+    </div>
+  </section>
+
+  <div class="card-footer-divider"></div>
+
+</section>
+
+<style>
+
+.card-container {
+  --ink: #f5edff;
+  --ink-soft: #c4b6ff;
+  --crimson: #b47cff;
+  --crimson-soft: #5b2f91;
+  --platinum: #faf5ff;
+  --border-soft: #2e2144;
+
+  max-width: 1120px;
+  margin: 56px auto;
+  padding: 40px 40px 44px;
+  border-radius: 24px;
+
+  background: #000;
+  border: 1px solid var(--border-soft);
+
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
+  color: var(--ink);
+
+  box-shadow:
+    0 0 0 1px rgba(180, 124, 255, 0.12),
+    0 24px 60px rgba(0, 0, 0, 0.85),
+    0 0 80px rgba(114, 73, 196, 0.55);
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+
+.card-header {
+  text-align: center;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(196, 182, 255, 0.18);
+}
+
+.card-title {
+  margin: 0;
+  font-family: "SF Pro Display", system-ui, sans-serif;
+  font-weight: 600;
+  font-size: clamp(1.9rem, 3vw, 2.4rem);
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--platinum);
+  text-shadow:
+    0 0 14px rgba(180, 124, 255, 0.6),
+    0 0 32px rgba(0, 0, 0, 0.9);
+}
+
+.card-image-box {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.card-image-box img {
+  display: block;
+  width: 100%;
+  max-width: 920px;
+  border-radius: 14px;
+
+  box-shadow:
+    inset 0 0 0 2px rgba(244, 235, 255, 0.09),
+    0 0 24px rgba(0, 0, 0, 0.9),
+    0 0 64px rgba(160, 102, 255, 0.65);
+}
+
+.card-divider,
+.card-footer-divider {
+  height: 1px;
+  margin-top: 8px;
+  width: 100%;
+  background: #000;
+}
+
+.card-section {
+  position: relative;
+  border-radius: 18px;
+  padding: 28px 26px 30px;
+  background: #000;
+  border: 1px solid rgba(144, 112, 230, 0.4);
+}
+
+.card-section::before {
+  content: "";
+  position: absolute;
+  inset: 16px 18px;
+  border-radius: 14px;
+  border: 1px solid rgba(244, 235, 255, 0.04);
+  pointer-events: none;
+}
+
+.section-title {
+  margin: 0 0 32px;
+  font-family: "Orbitron", sans-serif;
+  font-size: clamp(2rem, 3vw, 2.6rem);
+  font-weight: 700;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: #cfc0ff;
+
+  display: inline-block;
+  border-left: 3px solid #6b4abc;
+  border-right: 3px solid #6b4abc;
+  padding: 0 22px;
+}
+
+.section-intro {
+  margin-top: 4px;
+  margin-bottom: 18px;
+  font-size: 0.96rem;
+  color: rgba(223, 210, 255, 0.8);
+}
+
+.card-section p {
+  max-width: 880px;
+  margin: 12px 0 6px 0;
+  font-size: 1.02rem;
+  line-height: 1.75;
+  color: rgba(244, 236, 255, 0.9);
+  text-align: left;
+}
+
+.text-accent {
+  color: var(--crimson);
+  font-weight: 600;
+  text-shadow: 0 0 10px rgba(180, 124, 255, 0.85);
+}
+
+.text-link {
+  color: #d0b3ff;
+  border-bottom: 1px solid rgba(208, 179, 255, 0.45);
+}
+
+.text-link:hover {
+  color: #f5edff;
+  border-bottom-color: rgba(245, 237, 255, 0.9);
+}
+
+.card-details {
+  display: block;
+  margin-top: 20px;
+  border-radius: 12px;
+  border: 1px solid rgba(123, 96, 198, 0.7);
+  background: #000;
+}
+
+.card-details summary {
+  list-style: none;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  padding: 12px 16px;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 0.8rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+
+  color: rgba(233, 223, 255, 0.9);
+  background: #000;
+}
+
+.card-details summary::-webkit-details-marker {
+  display: none;
+}
+
+.card-details summary::after {
+  content: "";
+  width: 9px;
+  height: 9px;
+  border-right: 2px solid #b47cff;
+  border-bottom: 2px solid #b47cff;
+  transform: rotate(-45deg);
+  justify-self: end;
+  margin-left: 10px;
+
+  transition:
+    transform 0.2s ease,
+    border-color 0.2s ease,
+    opacity 0.2s ease;
+  opacity: 0.9;
+}
+
+.card-details[open] summary::after {
+  transform: rotate(45deg);
+  border-right-color: #e0c6ff;
+  border-bottom-color: #e0c6ff;
+  opacity: 1;
+}
+
+.card-details pre {
+  margin: 0;
+  padding: 16px 18px 18px;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 0.84rem;
+  line-height: 1.6;
+  color: rgba(234, 225, 255, 0.95);
+  text-align: left;
+  background: #000;
+  border-top: 1px solid rgba(140, 112, 210, 0.7);
+  overflow-x: auto;
+}
+
+.tag-row {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 8px;
+}
+
+.tag-item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto auto;
+  gap: 2px 8px;
+  align-items: center;
+  padding: 12px 12px;
+  border-radius: 12px;
+
+  background: #000;
+  border: 1px solid rgba(132, 104, 214, 0.7);
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.5),
+    0 10px 22px rgba(0, 0, 0, 0.8);
+}
+
+.tag-icon {
+  grid-row: 1 / span 2;
+  font-size: 1.1rem;
+  align-self: start;
+}
+
+.tag-text-main {
+  font-size: 0.9rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--ink-soft);
+}
+
+.tag-text-sub {
+  font-size: 0.86rem;
+  color: rgba(224, 213, 255, 0.82);
+}
+
+@media (max-width: 900px) {
+  .card-container {
+    padding: 32px 22px 36px;
+  }
+  .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>