recreate project

2026-08-01 11:53:13 +08:00
9 changed files with 208 additions and 48 deletions
@@ -0,0 +1,5 @@
+.git
+.worktrees
+dist
+node_modules
+*.log
@@ -0,0 +1,16 @@
+FROM oven/bun:1.3.11-alpine AS build
+
+WORKDIR /app
+
+COPY package.json index.html tsconfig.json ./
+COPY scripts ./scripts
+COPY src ./src
+
+RUN bun run build
+
+FROM nginxinc/nginx-unprivileged:1.29.4-alpine
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/dist /usr/share/nginx/html
+
+EXPOSE 8080
@@ -7,7 +7,16 @@
      name="description"
      content="将中文文本侵蚀成保留少量关键词的纯文本乱码艺术。"
    />
-    <meta name="theme-color" content="#e9e7dd" />
+    <meta
+      name="theme-color"
+      content="#e9e7dd"
+      media="(prefers-color-scheme: light)"
+    />
+    <meta
+      name="theme-color"
+      content="#121310"
+      media="(prefers-color-scheme: dark)"
+    />
    <title>文字马赛克</title>
  </head>
  <body>
@@ -0,0 +1,28 @@
+server {
+  listen 8080;
+  server_name _;
+  absolute_redirect off;
+  port_in_redirect off;
+
+  root /usr/share/nginx/html;
+  index index.html;
+
+  location = /healthz {
+    access_log off;
+    default_type text/plain;
+    return 200 "ok\n";
+  }
+
+  location = /index.html {
+    add_header Cache-Control "no-cache, must-revalidate";
+  }
+
+  location ~* \.(?:css|js)$ {
+    try_files $uri =404;
+    add_header Cache-Control "public, max-age=31536000, immutable";
+  }
+
+  location / {
+    try_files $uri $uri/ /index.html;
+  }
+}
@@ -0,0 +1,12 @@
+{
+  "name": "text-mosaic",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "text-mosaic",
+      "version": "0.1.0"
+    }
+  }
+}
@@ -74,10 +74,10 @@ app.innerHTML = `
          <label class="control" for="retention-control">
            <span class="control__heading">
              <span>显影</span>
-              <output id="retention-value">14%</output>
+              <output id="retention-value">15%</output>
            </span>
            <span class="control__hint">留下多少原文词语</span>
-            <input id="retention-control" type="range" min="5" max="40" value="14" />
+            <input id="retention-control" type="range" min="0" max="100" value="15" />
          </label>

          <label class="control" for="volume-control">
@@ -86,7 +86,14 @@ app.innerHTML = `
              <output id="volume-value">100%</output>
            </span>
            <span class="control__hint">结果相对原文的总长度</span>
-            <input id="volume-control" type="range" min="85" max="115" value="100" />
+            <input
+              id="volume-control"
+              type="range"
+              min="10"
+              max="1000"
+              step="10"
+              value="100"
+            />
          </label>

          <label class="control" for="disorder-control">
@@ -36,6 +36,14 @@ describe('selectKeywords', () => {

    expect(candidates.some((candidate) => candidate.selected)).toBe(true)
  })
+
+  it('显影 0% 不保留词语，100% 保留全部候选词', () => {
+    const hidden = selectKeywords(SOURCE, 0, 1)
+    const revealed = selectKeywords(SOURCE, 100, 1)
+
+    expect(hidden.some((candidate) => candidate.selected)).toBe(false)
+    expect(revealed.every((candidate) => candidate.selected)).toBe(true)
+  })
 })

 describe('generateMosaic', () => {
@@ -74,6 +82,34 @@ describe('generateMosaic', () => {
    expect(ratio).toBeLessThanOrEqual(1.03)
  })

+  it('支持将体量压缩到 10% 或膨胀到 1000%', () => {
+    const compressed = generateMosaic(SOURCE, [], {
+      volume: 10,
+      disorder: 0,
+      seed: 42,
+    })
+    const expanded = generateMosaic(SOURCE, [], {
+      volume: 1000,
+      disorder: 0,
+      seed: 42,
+    })
+
+    expect(compressed.outputLength).toBe(Math.round(compressed.inputLength * 0.1))
+    expect(expanded.outputLength).toBe(expanded.inputLength * 10)
+  })
+
+  it('不生成可能跳出正常行框的 Unicode 组合符', () => {
+    const outputs = Array.from({ length: 20 }, (_, seed) =>
+      generateMosaic(SOURCE, [], {
+        volume: 1000,
+        disorder: 100,
+        seed,
+      }).output,
+    ).join('')
+
+    expect(outputs).not.toMatch(/\p{Mark}/u)
+  })
+
  it('相同种子可复现，不同种子会重新侵蚀', () => {
    const candidates = selectKeywords(SOURCE, 14, 1)
    const first = generateMosaic(SOURCE, candidates, {
@@ -237,8 +237,6 @@ const ENCODING_FRAGMENTS = ['Ã', 'Â', 'æ', 'å', '¤', '锟', '斤', '拷'] a

 const COMPLEX_HAN = ['黻', '鬯', '夔', '爨', '龘', '靐', '罅', '黹'] as const

-const COMBINING_MARKS = ['\u0336', '\u0337', '\u0338', '\u035F'] as const
-
 const HAN_PATTERN = /\p{Script=Han}/u
 const WORD_PATTERN = /[\p{L}\p{N}]/u

@@ -345,12 +343,12 @@ export function selectKeywords(
    return candidates
  }

-  const desiredCount = Math.min(
+  const desiredCount =
+    retention <= 0
+      ? 0
+      : Math.min(
          candidates.length,
-    Math.max(
-      candidates.length >= 4 ? 2 : 1,
-      Math.round(candidates.length * (retention / 100)),
-    ),
+          Math.max(1, Math.ceil(candidates.length * (retention / 100))),
        )
  const ranked = [...candidates].sort(
    (left, right) => right.score - left.score || left.start - right.start,
@@ -395,15 +393,12 @@ function generateNoise(length: number, disorder: number, random: Random): string
  let output = ''
  let previous = ''
  const repeatChance = 0.02 + disorder * 0.0015
-  const combiningChance = 0.02 + disorder * 0.0011

  for (let index = 0; index < length; index += 1) {
    const shouldRepeat = previous !== '' && random() < repeatChance
    const glyph = shouldRepeat ? previous : chooseNoiseGlyph(random)
-    const combining =
-      random() < combiningChance ? choose(COMBINING_MARKS, random) : ''

-    output += `${glyph}${combining}`
+    output += glyph
    previous = glyph
  }

@@ -1,6 +1,7 @@
 :root {
  color: #171815;
  background: #e9e7dd;
+  color-scheme: light dark;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
@@ -11,6 +12,49 @@
  --acid: #d8ff52;
  --muted: #6b6b63;
  --line: rgba(23, 24, 21, 0.24);
+  --grid-row: rgba(23, 24, 21, 0.035);
+  --grid-column: rgba(23, 24, 21, 0.025);
+  --panel: rgba(244, 242, 234, 0.76);
+  --panel-soft: rgba(244, 242, 234, 0.7);
+  --shadow: var(--ink);
+  --focus-inset: rgba(23, 24, 21, 0.28);
+  --placeholder: #9b9a91;
+  --output: #171815;
+  --output-ink: #efeee6;
+  --output-muted: #9c9d93;
+  --output-empty: #77786f;
+  --output-line: rgba(255, 255, 255, 0.2);
+  --output-glow: rgba(216, 255, 82, 0.08);
+  --output-hover: #efeee6;
+  --output-hover-ink: #171815;
+  --acid-hover: #efffb4;
+  --on-acid: #171815;
+  --selected: var(--ink);
+  --selected-ink: var(--acid);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color: #efeee6;
+    background: #121310;
+    --ink: #efeee6;
+    --paper: #121310;
+    --acid: #cffa4c;
+    --muted: #a2a39a;
+    --line: rgba(239, 238, 230, 0.23);
+    --grid-row: rgba(239, 238, 230, 0.04);
+    --grid-column: rgba(239, 238, 230, 0.03);
+    --panel: rgba(29, 30, 26, 0.82);
+    --panel-soft: rgba(29, 30, 26, 0.76);
+    --shadow: #050604;
+    --focus-inset: rgba(239, 238, 230, 0.3);
+    --placeholder: #8e8f86;
+    --output: #090a08;
+    --output-glow: rgba(207, 250, 76, 0.11);
+    --acid-hover: #e7ffa0;
+    --selected: var(--acid);
+    --selected-ink: var(--on-acid);
+  }
 }

 * {
@@ -28,8 +72,8 @@ body {
  min-height: 100vh;
  margin: 0;
  background:
-    linear-gradient(rgba(23, 24, 21, 0.035) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(23, 24, 21, 0.025) 1px, transparent 1px),
+    linear-gradient(var(--grid-row) 1px, transparent 1px),
+    linear-gradient(90deg, var(--grid-column) 1px, transparent 1px),
    var(--paper);
  background-size: 100% 48px, 48px 100%, auto;
 }
@@ -45,12 +89,16 @@ button {
 }

 button:focus-visible,
-textarea:focus-visible,
 input:focus-visible {
  outline: 3px solid var(--acid);
  outline-offset: 3px;
 }

+textarea:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 1px var(--focus-inset);
+}
+
 .page-shell {
  width: min(1440px, 100%);
  margin: 0 auto;
@@ -58,24 +106,26 @@ input:focus-visible {
 }

 .hero {
-  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
+  grid-template-rows: auto 1fr;
+  row-gap: clamp(20px, 3vw, 38px);
  min-height: 220px;
  padding: 22px 0 30px;
  border-top: 1px solid var(--ink);
 }

 .hero__index {
-  position: absolute;
-  top: 22px;
-  left: 0;
+  grid-column: 1 / -1;
+  grid-row: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
 }

 .hero__content {
+  grid-column: 1;
+  grid-row: 2;
  align-self: end;
 }

@@ -98,6 +148,8 @@ input:focus-visible {
 }

 .hero__mark {
+  grid-column: 2;
+  grid-row: 2;
  align-self: end;
  padding-bottom: 2px;
  font-size: clamp(64px, 9vw, 124px);
@@ -109,7 +161,7 @@ input:focus-visible {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid var(--ink);
-  box-shadow: 9px 9px 0 var(--ink);
+  box-shadow: 9px 9px 0 var(--shadow);
 }

 .panel {
@@ -119,16 +171,16 @@ input:focus-visible {
 .panel--input {
  display: flex;
  flex-direction: column;
-  background: rgba(244, 242, 234, 0.76);
+  background: var(--panel);
 }

 .panel--output {
  display: flex;
  flex-direction: column;
  background:
-    radial-gradient(circle at 15% 18%, rgba(216, 255, 82, 0.08), transparent 25%),
-    var(--ink);
-  color: #efeee6;
+    radial-gradient(circle at 15% 18%, var(--output-glow), transparent 25%),
+    var(--output);
+  color: var(--output-ink);
  border-left: 1px solid var(--ink);
 }

@@ -148,7 +200,7 @@ input:focus-visible {
 }

 .panel__heading--dark {
-  border-color: rgba(255, 255, 255, 0.2);
+  border-color: var(--output-line);
 }

 .panel__heading h2,
@@ -167,7 +219,7 @@ input:focus-visible {
 }

 .panel--output .panel__number {
-  color: #9c9d93;
+  color: var(--output-muted);
 }

 .counter {
@@ -177,7 +229,7 @@ input:focus-visible {
 }

 .panel--output .counter {
-  color: #9c9d93;
+  color: var(--output-muted);
 }

 textarea {
@@ -196,7 +248,7 @@ textarea {
 }

 textarea::placeholder {
-  color: #9b9a91;
+  color: var(--placeholder);
 }

 .mosaic-output {
@@ -213,13 +265,13 @@ textarea::placeholder {
 }

 .mosaic-output--empty {
-  color: #77786f;
+  color: var(--output-empty);
 }

 .output-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
-  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  border-top: 1px solid var(--output-line);
 }

 .button {
@@ -236,22 +288,22 @@ textarea::placeholder {

 .button--light {
  background: var(--acid);
-  color: var(--ink);
+  color: var(--on-acid);
 }

 .button--light:hover {
-  background: #efffb4;
+  background: var(--acid-hover);
 }

 .button--outline {
-  color: #efeee6;
+  color: var(--output-ink);
  background: transparent;
-  border-left: 1px solid rgba(255, 255, 255, 0.2);
+  border-left: 1px solid var(--output-line);
 }

 .button--outline:hover {
-  color: var(--ink);
-  background: #efeee6;
+  color: var(--output-hover-ink);
+  background: var(--output-hover);
 }

 .control-deck {
@@ -387,7 +439,7 @@ input[type="range"]::-moz-range-thumb {
  min-height: 110px;
  margin-top: 24px;
  padding: 24px;
-  background: rgba(244, 242, 234, 0.7);
+  background: var(--panel-soft);
  border: 1px solid var(--ink);
 }

@@ -411,9 +463,9 @@ input[type="range"]::-moz-range-thumb {
 }

 .keyword-token--selected {
-  color: var(--acid);
-  background: var(--ink);
-  border-color: var(--ink);
+  color: var(--selected-ink);
+  background: var(--selected);
+  border-color: var(--selected);
 }

 .keyword-list__empty {
@@ -444,10 +496,10 @@ footer p {
  bottom: 24px;
  z-index: 10;
  padding: 13px 18px;
-  color: var(--ink);
+  color: var(--on-acid);
  background: var(--acid);
  border: 1px solid var(--ink);
-  box-shadow: 5px 5px 0 var(--ink);
+  box-shadow: 5px 5px 0 var(--shadow);
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
@@ -490,7 +542,7 @@ footer p {

  .workspace {
    grid-template-columns: 1fr;
-    box-shadow: 6px 6px 0 var(--ink);
+    box-shadow: 6px 6px 0 var(--shadow);
  }

  .panel {