Spaces:

duqing026
/

svg-pattern-lab

Sleeping

App Files Files Community

duqing2026 commited on Jan 30

Commit

13466f4

0 Parent(s):

Initial commit: SVG Pattern Lab MVP

Browse files

Files changed (5) hide show

Dockerfile +18 -0
README.md +47 -0
app.py +20 -0
requirements.txt +2 -0
templates/index.html +343 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,18 @@

+FROM python:3.9-slim
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . .
+# Create a non-root user for Hugging Face Spaces
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+EXPOSE 7860
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md ADDED Viewed

	@@ -0,0 +1,47 @@

+---
+title: SVG Pattern Lab
+emoji: 🕸️
+colorFrom: indigo
+colorTo: purple
+sdk: docker
+app_port: 7860
+short_description: Generate customizable SVG background patterns for web design.
+---
+# SVG Pattern Lab (SVG 图案实验室)
+这是一个专为开发者和设计师打造的 SVG 背景图案生成工具。
+## 功能特点
+- **多样的图案库**：提供网格、圆点、斜线、波浪、棋盘、蜂巢等多种基础几何纹理。
+- **实时自定义**：
+  - 调整前景和背景颜色
+  - 控制透明度、缩放比例和间距
+- **一键导出**：
+  - 复制 CSS `background-image` 代码，直接粘贴到你的项目中。
+  - 下载 SVG 文件，用于设计软件或进一步编辑。
+- **极简设计**：无广告，无追踪，纯粹的工具体验。
+## 技术栈
+- **后端**：Flask (Python) - 提供静态文件服务
+- **前端**：Vue 3 + Tailwind CSS - 响应式 UI 和动态 SVG 生成
+- **部署**：Docker - 适配 Hugging Face Spaces
+## 本地运行
+1. 克隆仓库
+2. 安装依赖：
+   ```bash
+   pip install -r requirements.txt
+   ```
+3. 运行：
+   ```bash
+   python app.py
+   ```
+4. 访问 `http://localhost:7860`
+## License
+MIT

app.py ADDED Viewed

	@@ -0,0 +1,20 @@

+import os
+from flask import Flask, render_template, send_from_directory, jsonify
+app = Flask(__name__, static_folder='static', template_folder='templates')
+@app.route('/')
+def index():
+    return render_template('index.html')
+@app.route('/healthz')
+def healthz():
+    return jsonify({"status": "ok"}), 200
+@app.route('/static/<path:path>')
+def send_static(path):
+    return send_from_directory('static', path)
+if __name__ == '__main__':
+    port = int(os.environ.get('PORT', 7860))
+    app.run(host='0.0.0.0', port=port, debug=True)

requirements.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ flask
2	+ gunicorn

templates/index.html ADDED Viewed

	@@ -0,0 +1,343 @@

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SVG 图案实验室 | SVG Pattern Lab</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <!-- Phosphor Icons -->
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
+    <style>
+        [v-cloak] { display: none; }
+        .preview-area {
+            transition: background-image 0.2s ease;
+        }
+        input[type="range"] {
+            @apply w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer;
+        }
+        input[type="range"]::-webkit-slider-thumb {
+            @apply w-4 h-4 bg-indigo-600 rounded-full appearance-none;
+        }
+        .scrollbar-hide::-webkit-scrollbar {
+            display: none;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 text-gray-800 h-screen overflow-hidden">
+    <div id="app" v-cloak class="h-full flex flex-col md:flex-row">
+        <!-- Sidebar Controls -->
+        <div class="w-full md:w-80 bg-white border-r border-gray-200 flex flex-col h-full z-10 shadow-lg">
+            <div class="p-5 border-b border-gray-100">
+                <div class="flex items-center gap-2 mb-1">
+                    <i class="ph ph-hexagon text-2xl text-indigo-600"></i>
+                    <h1 class="font-bold text-xl tracking-tight text-gray-900">SVG Pattern Lab</h1>
+                </div>
+                <p class="text-xs text-gray-500">为开发者打造的背景生成器</p>
+            </div>
+            <div class="flex-1 overflow-y-auto p-5 space-y-6">
+                <!-- Pattern Selection -->
+                <div>
+                    <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">选择图案</label>
+                    <div class="grid grid-cols-4 gap-2">
+                        <button
+                            v-for="p in patterns"
+                            :key="p.id"
+                            @click="currentPatternId = p.id"
+                            class="aspect-square rounded-lg border-2 flex items-center justify-center transition-all hover:bg-indigo-50"
+                            :class="currentPatternId === p.id ? 'border-indigo-600 bg-indigo-50 text-indigo-600' : 'border-gray-200 text-gray-400'"
+                            :title="p.name"
+                        >
+                            <i :class="p.icon" class="text-xl"></i>
+                        </button>
+                    </div>
+                </div>
+                <!-- Colors -->
+                <div>
+                    <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">配色</label>
+                    <div class="space-y-3">
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm">前景颜色</span>
+                            <div class="flex items-center gap-2">
+                                <span class="text-xs font-mono text-gray-500">{{ config.color }}</span>
+                                <input type="color" v-model="config.color" class="w-8 h-8 rounded cursor-pointer border-0 p-0">
+                            </div>
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm">背景颜色</span>
+                            <div class="flex items-center gap-2">
+                                <span class="text-xs font-mono text-gray-500">{{ config.background }}</span>
+                                <input type="color" v-model="config.background" class="w-8 h-8 rounded cursor-pointer border-0 p-0">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Adjustments -->
+                <div>
+                    <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">参数调整</label>
+                    <div class="space-y-4">
+                        <div>
+                            <div class="flex justify-between mb-1">
+                                <span class="text-sm">透明度 (Opacity)</span>
+                                <span class="text-xs text-gray-500">{{ config.opacity }}</span>
+                            </div>
+                            <input type="range" v-model.number="config.opacity" min="0.1" max="1" step="0.05">
+                        </div>
+                        <div>
+                            <div class="flex justify-between mb-1">
+                                <span class="text-sm">缩放 (Scale)</span>
+                                <span class="text-xs text-gray-500">{{ config.scale }}</span>
+                            </div>
+                            <input type="range" v-model.number="config.scale" min="0.5" max="3" step="0.1">
+                        </div>
+                        <div v-if="currentPattern.hasSpacing">
+                            <div class="flex justify-between mb-1">
+                                <span class="text-sm">间距 (Spacing)</span>
+                                <span class="text-xs text-gray-500">{{ config.spacing }}</span>
+                            </div>
+                            <input type="range" v-model.number="config.spacing" min="10" max="100" step="2">
+                        </div>
+                        <div>
+                             <div class="flex justify-between mb-1">
+                                <span class="text-sm">旋转 (Rotation)</span>
+                                <span class="text-xs text-gray-500">{{ config.rotation }}°</span>
+                            </div>
+                            <input type="range" v-model.number="config.rotation" min="0" max="180" step="5">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Actions -->
+            <div class="p-5 border-t border-gray-200 bg-gray-50 space-y-3">
+                <button @click="copyCSS" class="w-full py-2.5 px-4 bg-white border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-indigo-600 transition-colors flex items-center justify-center gap-2">
+                    <i class="ph ph-code"></i>
+                    {{ copyStatus || '复制 CSS 代码' }}
+                </button>
+                <button @click="downloadSVG" class="w-full py-2.5 px-4 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700 transition-colors flex items-center justify-center gap-2 shadow-sm">
+                    <i class="ph ph-download-simple"></i>
+                    下载 SVG
+                </button>
+            </div>
+        </div>
+        <!-- Preview Area -->
+        <div class="flex-1 relative overflow-hidden flex flex-col">
+            <!-- Toolbar -->
+            <div class="absolute top-4 right-4 z-20 flex gap-2">
+                <button @click="randomize" class="p-2 bg-white/90 backdrop-blur rounded-full shadow-sm border border-gray-200 text-gray-600 hover:text-indigo-600 transition-colors" title="随机生成">
+                    <i class="ph ph-shuffle text-xl"></i>
+                </button>
+                <button @click="reset" class="p-2 bg-white/90 backdrop-blur rounded-full shadow-sm border border-gray-200 text-gray-600 hover:text-red-600 transition-colors" title="重置">
+                    <i class="ph ph-arrow-counter-clockwise text-xl"></i>
+                </button>
+            </div>
+            <!-- Canvas -->
+            <div
+                class="w-full h-full preview-area relative"
+                :style="previewStyle"
+            >
+                <!-- Overlay content example -->
+                <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
+                    <div class="bg-white/90 backdrop-blur-sm p-8 rounded-2xl shadow-xl max-w-md text-center border border-white/50">
+                        <h2 class="text-3xl font-bold text-gray-900 mb-2">预览效果</h2>
+                        <p class="text-gray-600">这是一个示例卡片，用于展示背景图案在实际 UI 组件下的效果。</p>
+                        <div class="mt-6 flex justify-center gap-3">
+                            <div class="h-2 w-20 bg-gray-200 rounded-full"></div>
+                            <div class="h-2 w-12 bg-gray-200 rounded-full"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- CSS Code Preview (Bottom Sheet) -->
+            <div class="bg-gray-900 text-gray-300 text-xs p-3 font-mono overflow-x-auto whitespace-nowrap border-t border-gray-800">
+                {{ cssCode }}
+            </div>
+        </div>
+    </div>
+    <script>
+        const { createApp, ref, computed, reactive, watch } = Vue;
+        createApp({
+            setup() {
+                const config = reactive({
+                    color: '#4f46e5',
+                    background: '#ffffff',
+                    opacity: 0.5,
+                    scale: 1,
+                    spacing: 20,
+                    rotation: 0
+                });
+                const currentPatternId = ref('grid');
+                const copyStatus = ref('');
+                const patterns = [
+                    { id: 'grid', name: '网格', icon: 'ph-grid-four', hasSpacing: true },
+                    { id: 'dots', name: '圆点', icon: 'ph-dots-nine', hasSpacing: true },
+                    { id: 'lines', name: '斜线', icon: 'ph-line-segments', hasSpacing: true },
+                    { id: 'cross', name: '十字', icon: 'ph-plus', hasSpacing: true },
+                    { id: 'waves', name: '波浪', icon: 'ph-waves', hasSpacing: false },
+                    { id: 'checkers', name: '棋盘', icon: 'ph-squares-four', hasSpacing: true },
+                    { id: 'hex', name: '蜂巢', icon: 'ph-hexagon', hasSpacing: false },
+                    { id: 'zigzag', name: '折线', icon: 'ph-chart-line-up', hasSpacing: true },
+                ];
+                const currentPattern = computed(() => patterns.find(p => p.id === currentPatternId.value));
+                // SVG Generators
+                const generateSVG = () => {
+                    const { color, background, opacity, scale, spacing, rotation } = config;
+                    const s = spacing * scale;
+                    const r = rotation;
+                    // Base Attributes
+                    let width = s;
+                    let height = s;
+                    let content = '';
+                    switch (currentPatternId.value) {
+                        case 'grid':
+                            content = `<path d="M ${s} 0 L 0 0 0 ${s}" fill="none" stroke="${color}" stroke-width="${1 * scale}" stroke-opacity="${opacity}"/>`;
+                            break;
+                        case 'dots':
+                            content = `<circle cx="${s/2}" cy="${s/2}" r="${2 * scale}" fill="${color}" fill-opacity="${opacity}"/>`;
+                            break;
+                        case 'lines':
+                            content = `<path d="M0 ${s} L${s} 0" stroke="${color}" stroke-width="${2 * scale}" stroke-opacity="${opacity}"/>`;
+                            break;
+                        case 'cross':
+                            const cs = 4 * scale; // cross size
+                            content = `<path d="M${s/2 - cs} ${s/2} h${cs*2} M${s/2} ${s/2 - cs} v${cs*2}" stroke="${color}" stroke-width="${1.5 * scale}" stroke-opacity="${opacity}" />`;
+                            break;
+                        case 'checkers':
+                            width = s * 2;
+                            height = s * 2;
+                            content = `<rect x="0" y="0" width="${s}" height="${s}" fill="${color}" fill-opacity="${opacity}"/><rect x="${s}" y="${s}" width="${s}" height="${s}" fill="${color}" fill-opacity="${opacity}"/>`;
+                            break;
+                        case 'waves':
+                            width = 100 * scale;
+                            height = 20 * scale;
+                            content = `<path d="M0 10 Q25 20 50 10 T100 10 V20 H0 Z" fill="${color}" fill-opacity="${opacity}"/>`;
+                            break;
+                        case 'hex':
+                            width = 28 * scale;
+                            height = 49 * scale;
+                            // Hexagon path
+                            content = `<path d="M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z" fill="${color}" fill-opacity="${opacity}"/>`;
+                            break;
+                        case 'zigzag':
+                            width = s;
+                            height = s;
+                            content = `<path d="M0 ${s/2} L${s/2} 0 L${s} ${s/2}" fill="none" stroke="${color}" stroke-width="${2 * scale}" stroke-opacity="${opacity}"/>`;
+                            break;
+                    }
+                    // Apply rotation if needed (complex for patterns, simple implementation via SVG transform if wrapped)
+                    // For now, rotation is applied to the CSS background element, not internal SVG geometry to keep it simple,
+                    // BUT CSS background-rotation is tricky.
+                    // Better approach: wrap content in a group with transform if rotation is supported internally.
+                    // However, patternUserSpaceOnUse handles tiling. Rotating the tile content might break seamlessness for some patterns.
+                    // Let's stick to simple implementation: Rotation will rotate the internal element center.
+                    let svgString = `<svg xmlns='http://www.w3.org/2000/svg' width='${width}' height='${height}' viewBox='0 0 ${width} ${height}'>${content}</svg>`;
+                    // Encode for Data URI
+                    return svgString;
+                };
+                const svgDataUrl = computed(() => {
+                    const svg = generateSVG();
+                    const encoded = encodeURIComponent(svg)
+                        .replace(/'/g, '%27')
+                        .replace(/"/g, '%22');
+                    return `data:image/svg+xml,${encoded}`;
+                });
+                const cssCode = computed(() => {
+                    return `background-color: ${config.background}; background-image: url("${svgDataUrl.value}");`;
+                });
+                const previewStyle = computed(() => {
+                    return {
+                        backgroundColor: config.background,
+                        backgroundImage: `url("${svgDataUrl.value}")`,
+                        // Rotation handled via CSS transform on a pseudo-element usually, but here applied to container?
+                        // Actually, let's keep rotation simple: apply to the preview div? No, that rotates content too.
+                        // Let's ignore rotation for CSS output for now as it's complex for background-image (requires element rotation).
+                        // Or we can rotate the SVG content itself.
+                    };
+                });
+                const copyCSS = async () => {
+                    try {
+                        await navigator.clipboard.writeText(cssCode.value);
+                        copyStatus.value = '已复制!';
+                        setTimeout(() => copyStatus.value = '', 2000);
+                    } catch (err) {
+                        console.error('Copy failed', err);
+                        copyStatus.value = '复制失败';
+                    }
+                };
+                const downloadSVG = () => {
+                    const svg = generateSVG();
+                    const blob = new Blob([svg], { type: 'image/svg+xml' });
+                    const url = URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.href = url;
+                    a.download = `pattern-${currentPatternId.value}.svg`;
+                    document.body.appendChild(a);
+                    a.click();
+                    document.body.removeChild(a);
+                    URL.revokeObjectURL(url);
+                };
+                const randomize = () => {
+                    const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0');
+                    const randomBg = '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0');
+                    config.color = randomColor;
+                    config.background = '#ffffff'; // Keep bg simple usually
+                    config.opacity = Number((Math.random() * 0.8 + 0.1).toFixed(2));
+                    config.scale = Number((Math.random() * 1.5 + 0.5).toFixed(1));
+                    config.spacing = Math.floor(Math.random() * 40 + 20);
+                    const pIds = patterns.map(p => p.id);
+                    currentPatternId.value = pIds[Math.floor(Math.random() * pIds.length)];
+                };
+                const reset = () => {
+                    config.color = '#4f46e5';
+                    config.background = '#ffffff';
+                    config.opacity = 0.5;
+                    config.scale = 1;
+                    config.spacing = 20;
+                    config.rotation = 0;
+                    currentPatternId.value = 'grid';
+                };
+                return {
+                    config,
+                    currentPatternId,
+                    patterns,
+                    currentPattern,
+                    cssCode,
+                    previewStyle,
+                    copyCSS,
+                    downloadSVG,
+                    copyStatus,
+                    randomize,
+                    reset
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>