init: generative-art-lab

Dockerfile

@@ -0,0 +1,12 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 7860
+
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md

@@ -0,0 +1,59 @@
+# 生成艺术实验室（Generative Art Lab）
+
+一个用于探索「生成艺术（Generative Art）」的轻量级实验项目。特性：
+- 纯前端渲染（Canvas），隐私友好
+- 可复现种子（Seed），每次结果可重现
+- 多种算法：流场线条、三角碎片、近似圆填充、渐变条纹、星空点阵
+- 一键导出 PNG 高清图片
+- 基于 Flask 提供静态服务，适配 Hugging Face Spaces（端口 7860）
+
+## 本地运行
+
+```bash
+pip install -r requirements.txt
+python app.py
+# 打开 http://localhost:7860
+```
+
+或使用 Docker：
+
+```bash
+docker build -t generative-art-lab .
+docker run -it --rm -p 7860:7860 generative-art-lab
+```
+
+## Hugging Face Spaces 部署
+
+1. 新建 Space（类型：Docker，SDK：Static/Other）
+2. 推送本项目到仓库（例如：spaces/duqing2026/generative-art-lab）
+3. 确保包含以下文件：
+   - `Dockerfile`（使用 gunicorn 启动）
+   - `requirements.txt`（Flask 与 gunicorn）
+   - `app.py`、`templates/`、`static/`
+
+Docker 容器会在 7860 端口启动应用（Spaces 会自动映射）。
+
+## 使用说明
+
+- 左侧面板可调参数：算法、配色方案、画布尺寸、随机种子
+- 种子支持数字或任意字符串（字符串会被转换为稳定种子）
+- 点击「导出 PNG」保存当前画布为无损图片
+
+## 目录结构
+
+```
+generative-art-lab/
+├── app.py
+├── Dockerfile
+├── requirements.txt
+├── templates/
+│   └── index.html
+└── static/
+    └── js/
+        └── app.js
+```
+
+## 许可证
+
+MIT
+

app.py

@@ -0,0 +1,16 @@
+from flask import Flask, render_template
+
+app = Flask(__name__)
+
+@app.route("/")
+def index():
+    return render_template("index.html")
+
+@app.route("/healthz")
+def healthz():
+    return "ok"
+
+if __name__ == "__main__":
+    import os
+    port = int(os.environ.get("PORT", 7860))
+    app.run(host="0.0.0.0", port=port, debug=True)

requirements.txt

@@ -0,0 +1,2 @@
+Flask==3.0.0
+gunicorn==21.2.0

static/js/app.js

@@ -0,0 +1,284 @@
+;(() => {
+  const { createApp, reactive, computed, onMounted } = Vue
+
+  // 简易可复现随机数（Mulberry32）
+  function mulberry32(a) {
+    return function () {
+      let t = (a += 0x6D2B79F5)
+      t = Math.imul(t ^ (t >>> 15), t | 1)
+      t ^= t + Math.imul(t ^ (t >>> 7), t | 61)
+      return ((t ^ (t >>> 14)) >>> 0) / 4294967296
+    }
+  }
+  // 字符串 -> 种子
+  function strToSeed(str) {
+    let h = 2166136261 >>> 0
+    for (let i = 0; i < str.length; i++) {
+      h ^= str.charCodeAt(i)
+      h = Math.imul(h, 16777619)
+    }
+    return h >>> 0
+  }
+
+  // 颜色工具
+  function hsl(h, s, l) {
+    return `hsl(${h}, ${s}%, ${l}%)`
+  }
+
+  // 预设配色
+  const palettes = {
+    Default: ['#0f172a', '#475569', '#94a3b8', '#e2e8f0', '#f59e0b'],
+    Minimalist: ['#111827', '#6b7280', '#d1d5db', '#f3f4f6', '#10b981'],
+    Dark: ['#0b1020', '#1f2937', '#334155', '#94a3b8', '#f8fafc'],
+    Warm: ['#7f1d1d', '#b45309', '#f59e0b', '#fde68a', '#fef3c7'],
+    Ocean: ['#0e7490', '#155e75', '#134e4a', '#10b981', '#67e8f9'],
+  }
+
+  // 算法集合
+  const algos = [
+    {
+      value: 'flow',
+      label: '流场线条',
+      desc: '基于角度场的粒子流动，形成丝绸般纹理',
+      draw: drawFlowField,
+    },
+    {
+      value: 'tri',
+      label: '三角碎片',
+      desc: '随机三角网格叠加，构成抽象拼贴',
+      draw: drawTriangles,
+    },
+    {
+      value: 'circles',
+      label: '近似圆填充',
+      desc: '随机投点生成不重叠圆，层次丰富',
+      draw: drawCircles,
+    },
+    {
+      value: 'stripes',
+      label: '渐变条纹',
+      desc: '多层渐变条纹旋转叠加，颜色过渡顺滑',
+      draw: drawStripes,
+    },
+    {
+      value: 'stars',
+      label: '星空点阵',
+      desc: '夜空背景 + 高斯分布星点，轻微辉光',
+      draw: drawStars,
+    },
+  ]
+
+  // 绘制函数们
+  function drawFlowField(ctx, W, H, rng, palette) {
+    ctx.fillStyle = palette[0]
+    ctx.fillRect(0, 0, W, H)
+    const steps = 5000
+    ctx.globalAlpha = 0.08
+    ctx.lineWidth = 1
+    for (let i = 0; i < steps; i++) {
+      let x = rng() * W
+      let y = rng() * H
+      const len = 80 + rng() * 150
+      const hue = Math.floor(rng() * 360)
+      ctx.strokeStyle = hsl(hue, 60, 60)
+      ctx.beginPath()
+      ctx.moveTo(x, y)
+      for (let j = 0; j < len; j++) {
+        // 简易角度场：正弦/余弦混合
+        const ang =
+          Math.sin((x * 0.01) + (y * 0.013)) * 2.0 +
+          Math.cos((x * 0.02) - (y * 0.017)) * 1.8
+        x += Math.cos(ang)
+        y += Math.sin(ang)
+        ctx.lineTo(x, y)
+        if (x < 0 || y < 0 || x > W || y > H) break
+      }
+      ctx.stroke()
+    }
+    ctx.globalAlpha = 1
+  }
+
+  function drawTriangles(ctx, W, H, rng, palette) {
+    // 背景
+    ctx.fillStyle = '#0b1020'
+    ctx.fillRect(0, 0, W, H)
+    const count = 220
+    for (let i = 0; i < count; i++) {
+      const x1 = rng() * W, y1 = rng() * H
+      const x2 = x1 + (rng() - 0.5) * 200
+      const x3 = x1 + (rng() - 0.5) * 200
+      const y2 = y1 + (rng() - 0.5) * 200
+      const y3 = y1 + (rng() - 0.5) * 200
+      const col = palette[1 + Math.floor(rng() * (palette.length - 1))]
+      ctx.fillStyle = col
+      ctx.globalAlpha = 0.6 + rng() * 0.4
+      ctx.beginPath()
+      ctx.moveTo(x1, y1)
+      ctx.lineTo(x2, y2)
+      ctx.lineTo(x3, y3)
+      ctx.closePath()
+      ctx.fill()
+    }
+    ctx.globalAlpha = 1
+  }
+
+  function drawCircles(ctx, W, H, rng, palette) {
+    ctx.fillStyle = '#111827'
+    ctx.fillRect(0, 0, W, H)
+    const circles = []
+    const attempts = 8000
+    for (let i = 0; i < attempts; i++) {
+      const r = 2 + Math.pow(rng(), 2) * 28
+      const x = r + rng() * (W - 2 * r)
+      const y = r + rng() * (H - 2 * r)
+      let ok = true
+      for (const c of circles) {
+        const dx = x - c.x, dy = y - c.y
+        if (dx * dx + dy * dy < (r + c.r + 2) ** 2) { ok = false; break }
+      }
+      if (ok) circles.push({ x, y, r })
+      if (circles.length > 800) break
+    }
+    for (const c of circles) {
+      ctx.beginPath()
+      ctx.arc(c.x, c.y, c.r, 0, Math.PI * 2)
+      const col = palette[1 + Math.floor(rng() * (palette.length - 1))]
+      ctx.fillStyle = col
+      ctx.globalAlpha = 0.5 + rng() * 0.5
+      ctx.fill()
+    }
+    ctx.globalAlpha = 1
+  }
+
+  function drawStripes(ctx, W, H, rng, palette) {
+    // 渐变背景
+    const grad = ctx.createLinearGradient(0, 0, W, H)
+    grad.addColorStop(0, palette[2])
+    grad.addColorStop(1, palette[4] || '#ffffff')
+    ctx.fillStyle = grad
+    ctx.fillRect(0, 0, W, H)
+    // 多层条纹
+    const layers = 8
+    for (let i = 0; i < layers; i++) {
+      ctx.save()
+      const angle = (rng() * Math.PI / 2) - Math.PI / 4
+      ctx.translate(W / 2, H / 2)
+      ctx.rotate(angle)
+      const col = palette[1 + Math.floor(rng() * (palette.length - 1))]
+      const stripeH = 8 + rng() * 24
+      ctx.fillStyle = col
+      ctx.globalAlpha = 0.08 + rng() * 0.14
+      for (let y = -H; y < H; y += stripeH * 2) {
+        ctx.fillRect(-W, y, W * 2, stripeH)
+      }
+      ctx.restore()
+    }
+    ctx.globalAlpha = 1
+  }
+
+  function drawStars(ctx, W, H, rng, palette) {
+    // 夜空
+    ctx.fillStyle = '#050914'
+    ctx.fillRect(0, 0, W, H)
+    // 星云轻微雾
+    const neb = ctx.createRadialGradient(W * 0.7, H * 0.3, 10, W * 0.7, H * 0.3, Math.max(W, H) * 0.8)
+    neb.addColorStop(0, 'rgba(64, 99, 187, 0.2)')
+    neb.addColorStop(1, 'rgba(5, 9, 20, 0)')
+    ctx.fillStyle = neb
+    ctx.fillRect(0, 0, W, H)
+    // 星点
+    const count = 1200
+    for (let i = 0; i < count; i++) {
+      const x = rng() * W
+      const y = rng() * H
+      const r = Math.pow(rng(), 3) * 2.2 + 0.3
+      const hue = 200 + rng() * 60
+      ctx.fillStyle = hsl(hue, 60, 80)
+      ctx.beginPath()
+      ctx.arc(x, y, r, 0, Math.PI * 2)
+      ctx.fill()
+    }
+  }
+
+  createApp({
+    setup() {
+      const state = reactive({
+        algo: 'flow',
+        width: 1024,
+        height: 768,
+        seed: Math.floor(Math.random() * 1e9),
+        seedInput: '',
+        palette: 'Default',
+      })
+
+      const currentAlgoLabel = computed(() => {
+        const a = algos.find(x => x.value === state.algo)
+        return a ? a.label : ''
+      })
+
+      function getRng() {
+        return mulberry32(state.seed >>> 0)
+      }
+
+      function render() {
+        const canvas = document.getElementById('canvas')
+        const ctx = canvas.getContext('2d')
+        const rng = getRng()
+        const palette = palettes[state.palette] || palettes.Default
+        const algo = algos.find(a => a.value === state.algo) || algos[0]
+        algo.draw(ctx, state.width, state.height, rng, palette)
+      }
+
+      function resize() {
+        const canvas = document.getElementById('canvas')
+        canvas.width = state.width
+        canvas.height = state.height
+        render()
+      }
+
+      function randomSeed() {
+        state.seed = Math.floor(Math.random() * 1e9)
+        state.seedInput = String(state.seed)
+        render()
+      }
+
+      function applySeed() {
+        const s = state.seedInput?.trim()
+        if (!s) {
+          randomSeed()
+          return
+        }
+        const maybeNum = Number(s)
+        state.seed = Number.isFinite(maybeNum) ? Math.floor(maybeNum) : strToSeed(s)
+        render()
+      }
+
+      function exportPNG() {
+        const canvas = document.getElementById('canvas')
+        const link = document.createElement('a')
+        const algoName = currentAlgoLabel.value.replace(/\s+/g, '')
+        link.download = `GenArt_${algoName}_seed${state.seed}_${state.width}x${state.height}.png`
+        link.href = canvas.toDataURL('image/png')
+        link.click()
+      }
+
+      onMounted(() => {
+        state.seedInput = String(state.seed)
+        render()
+      })
+
+      return {
+        state,
+        palettes,
+        algos,
+        currentAlgoLabel,
+        render,
+        resize,
+        randomSeed,
+        applySeed,
+        exportPNG,
+      }
+    }
+  }).mount('#app')
+})()
+

templates/index.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>生成艺术实验室 · Generative Art Lab</title>
+  <script src="https://unpkg.com/vue@3.4.21/dist/vue.global.prod.js"></script>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>
+    html, body { height: 100%; }
+    canvas { image-rendering: crisp-edges; }
+  </style>
+</head>
+<body class="bg-slate-50 text-slate-900">
+  <div id="app" class="min-h-screen">
+    <header class="border-b bg-white sticky top-0 z-10">
+      <div class="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
+        <h1 class="text-xl sm:text-2xl font-bold">生成艺术实验室</h1>
+        <div class="text-sm text-slate-600">纯前端渲染 · 可复现种子 · 一键导出</div>
+      </div>
+    </header>
+
+    <main class="max-w-6xl mx-auto px-4 py-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <section class="lg:col-span-1 bg-white border rounded-xl p-4 space-y-4">
+        <h2 class="font-semibold text-lg">参数设置</h2>
+        <div class="grid grid-cols-2 gap-3">
+          <label class="col-span-2 text-sm text-slate-600">算法</label>
+          <select v-model="state.algo" @change="render" class="col-span-2 border rounded px-2 py-1">
+            <option v-for="a in algos" :key="a.value" :value="a.value">{{ a.label }}</option>
+          </select>
+
+          <label class="col-span-2 text-sm text-slate-600">配色方案</label>
+          <select v-model="state.palette" @change="render" class="col-span-2 border rounded px-2 py-1">
+            <option v-for="(p, key) in palettes" :key="key" :value="key">{{ key }}</option>
+          </select>
+
+          <label class="text-sm text-slate-600">宽度</label>
+          <input type="number" v-model.number="state.width" @change="resize" class="border rounded px-2 py-1" min="256" max="2048" step="16" />
+          <label class="text-sm text-slate-600">高度</label>
+          <input type="number" v-model.number="state.height" @change="resize" class="border rounded px-2 py-1" min="256" max="2048" step="16" />
+
+          <label class="col-span-2 text-sm text-slate-600">种子</label>
+          <div class="col-span-2 flex gap-2">
+            <input v-model="state.seedInput" @change="applySeed" class="flex-1 border rounded px-2 py-1" placeholder="输入或留空随机" />
+            <button @click="randomSeed" class="border rounded px-3 py-1 hover:bg-slate-50">随机</button>
+          </div>
+
+          <div class="col-span-2 flex items-center justify-between pt-2">
+            <button @click="render" class="bg-slate-900 text-white px-3 py-1.5 rounded hover:opacity-90">重新生成</button>
+            <button @click="exportPNG" class="border px-3 py-1.5 rounded hover:bg-slate-50">导出 PNG</button>
+          </div>
+        </div>
+
+        <div class="pt-4">
+          <h3 class="font-semibold text-base mb-2">当前信息</h3>
+          <p class="text-sm text-slate-600">算法：{{ currentAlgoLabel }}</p>
+          <p class="text-sm text-slate-600">种子：{{ state.seed }}</p>
+          <p class="text-sm text-slate-600">尺寸：{{ state.width }} × {{ state.height }}</p>
+        </div>
+      </section>
+
+      <section class="lg:col-span-2 bg-white border rounded-xl p-4">
+        <div class="flex items-center justify-between">
+          <h2 class="font-semibold text-lg">画布预览</h2>
+          <div class="text-xs text-slate-500">完全本地渲染，保障隐私</div>
+        </div>
+        <div class="mt-3 border rounded-lg overflow-hidden relative">
+          <canvas id="canvas" :width="state.width" :height="state.height" class="w-full h-auto block"></canvas>
+        </div>
+
+        <div class="mt-6">
+          <h3 class="font-semibold mb-2">算法说明</h3>
+          <ul class="list-disc pl-6 text-slate-700 space-y-1">
+            <li v-for="a in algos" :key="a.value">
+              <span class="font-medium">{{ a.label }}：</span>{{ a.desc }}
+            </li>
+          </ul>
+        </div>
+      </section>
+    </main>
+
+    <footer class="max-w-6xl mx-auto px-4 py-8 text-sm text-slate-500">
+      <div>Tips：每次更换种子或参数都会得到可复现的新图案；导出为无损 PNG。</div>
+    </footer>
+  </div>
+
+  <script src="/static/js/app.js"></script>
+</body>
+</html>
+