Spaces:

duqing2026
/

carousel-maker-pro

Sleeping

App Files Files Community

duqing2026 commited on Jan 29

Commit

76257a0

0 Parent(s):

Initial commit: Carousel Maker Pro

Browse files

Files changed (5) hide show

Dockerfile +18 -0
README.md +58 -0
app.py +15 -0
requirements.txt +3 -0
templates/index.html +448 -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 . .
+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,58 @@

+---
+title: Carousel Maker Pro
+emoji: 🎞️
+colorFrom: red
+colorTo: pink
+sdk: docker
+pinned: false
+license: mit
+short_description: 小红书/IG 轮播图制作神器
+---
+# 自媒体轮播图制作神器 (Carousel Maker Pro)
+这是一个专为小红书、Instagram 创作者设计的 **无缝轮播图制作工具**。你可以轻松制作跨页拼接的长图，添加跨页文字，并一键切片导出。
+## 核心功能
+*   **无缝拼接背景**：上传一张长图或背景图，自动填充到所有页面，实现完美的滑动视觉效果。
+*   **跨页文字排版**：支持在页面之间自由拖拽文字，文字可以横跨两张图片（小红书流行的“破格”设计）。
+*   **多尺寸支持**：
+    *   **3:4 (1080x1350)**：小红书/Instagram 标准尺寸。
+    *   **1:1 (1080x1080)**：朋友圈/INS 正方形。
+    *   **9:16 (1080x1920)**：Story/抖音图文。
+*   **一键切片导出**：前端自动高清渲染（基于 HTML2Canvas），一键生成分片后的 ZIP 包。
+*   **自动页码**：一键添加 "1/4", "2/4" 等样式统一的页码。
+*   **隐私安全**：纯前端渲染，图片不上传服务器，保护你的素材安全。
+## 为什么做这个？
+市面上的切图工具（Grid Splitter）大多只能切图，无法在切图前进行整体排版（加字、加遮罩）。而专业设计软件（PS/Figma）对普通创作者门槛较高。本项目填补了这一空白，让普通人也能做出“设计感”极强的连页轮播图。
+## 技术栈
+*   **Backend**: Flask (Python) - 提供静态资源服务。
+*   **Frontend**: Vue 3 (Composition API) + Tailwind CSS。
+*   **Core**:
+    *   `html2canvas`: 负责将 DOM 渲染为图片。
+    *   `JSZip`: 负责前端打包下载。
+*   **Deployment**: Docker (User 1000) for Hugging Face Spaces.
+## 本地运行
+1.  安装依赖:
+    ```bash
+    pip install -r requirements.txt
+    ```
+2.  运行应用:
+    ```bash
+    python app.py
+    ```
+3.  访问: `http://localhost:7860`
+## 部署到 Hugging Face Spaces
+本项目包含 Dockerfile，可直接部署。
+1.  新建 Space，SDK 选择 Docker。
+2.  上传代码。
+3.  等待构建完成即可使用。

app.py ADDED Viewed

	@@ -0,0 +1,15 @@

+import os
+from flask import Flask, render_template, send_from_directory
+app = Flask(__name__, static_folder='static', template_folder='templates')
+@app.route('/')
+def index():
+    return render_template('index.html')
+@app.route('/static/<path:path>')
+def serve_static(path):
+    return send_from_directory('static', path)
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860)

requirements.txt ADDED Viewed

	@@ -0,0 +1,3 @@

+Flask==3.0.0
+Pillow==10.1.0
+gunicorn==21.2.0

templates/index.html ADDED Viewed

	@@ -0,0 +1,448 @@

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>小红书轮播图制作神器 | Carousel Maker Pro</title>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        body { font-family: 'Noto Sans SC', sans-serif; }
+        .slide-grid {
+            background-image:
+                linear-gradient(to right, rgba(255,255,255,0.3) 1px, transparent 1px);
+            background-size: var(--slide-width) 100%;
+        }
+        .text-element {
+            cursor: move;
+            user-select: none;
+        }
+        .text-element:hover {
+            outline: 2px dashed #3b82f6;
+        }
+        .text-element.selected {
+            outline: 2px solid #2563eb;
+        }
+        [contenteditable]:empty:before {
+            content: attr(placeholder);
+            color: #aaa;
+        }
+        /* Hide scrollbar for workspace */
+        .workspace-scroll::-webkit-scrollbar {
+            height: 8px;
+        }
+        .workspace-scroll::-webkit-scrollbar-thumb {
+            background: #cbd5e1;
+            border-radius: 4px;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 h-screen flex flex-col overflow-hidden">
+    <div id="app" class="flex flex-col h-full">
+        <!-- Header -->
+        <header class="bg-white shadow-sm z-10 p-4 flex justify-between items-center">
+            <div class="flex items-center gap-3">
+                <div class="bg-red-500 text-white p-2 rounded-lg font-bold text-xl">
+                    CM
+                </div>
+                <h1 class="text-xl font-bold text-gray-800">Carousel Maker Pro <span class="text-xs bg-red-100 text-red-600 px-2 py-1 rounded ml-2">小红书神器</span></h1>
+            </div>
+            <div class="flex gap-4">
+                <button @click="exportImages" class="bg-red-500 hover:bg-red-600 text-white px-6 py-2 rounded-full font-medium flex items-center gap-2 transition-colors">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                    </svg>
+                    导出 ZIP
+                </button>
+            </div>
+        </header>
+        <div class="flex flex-1 overflow-hidden">
+            <!-- Sidebar Controls -->
+            <aside class="w-80 bg-white border-r p-6 flex flex-col gap-6 overflow-y-auto">
+                <!-- Layout Settings -->
+                <div class="space-y-3">
+                    <h3 class="font-bold text-gray-700 flex items-center gap-2">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
+                        布局设置
+                    </h3>
+                    <div class="grid grid-cols-2 gap-2">
+                        <div>
+                            <label class="text-xs text-gray-500 mb-1 block">页数</label>
+                            <input type="number" v-model="slideCount" min="2" max="10" class="w-full border rounded px-3 py-2 text-sm">
+                        </div>
+                        <div>
+                            <label class="text-xs text-gray-500 mb-1 block">比例</label>
+                            <select v-model="aspectRatio" class="w-full border rounded px-3 py-2 text-sm">
+                                <option value="3:4">3:4 (小红书)</option>
+                                <option value="1:1">1:1 (INS/朋友圈)</option>
+                                <option value="9:16">9:16 (Story)</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <!-- Background -->
+                <div class="space-y-3">
+                    <h3 class="font-bold text-gray-700 flex items-center gap-2">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
+                        背景图片
+                    </h3>
+                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:bg-gray-50 transition-colors cursor-pointer relative">
+                        <input type="file" @change="handleImageUpload" class="absolute inset-0 opacity-0 cursor-pointer" accept="image/*">
+                        <p class="text-sm text-gray-500" v-if="!bgImage">点击上传背景图</p>
+                        <div v-else class="relative h-20 w-full">
+                            <img :src="bgImage" class="h-full w-full object-cover rounded">
+                            <button @click.stop="bgImage = null" class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1 text-xs shadow">✕</button>
+                        </div>
+                    </div>
+                    <div class="flex gap-2 text-xs">
+                        <button @click="fitMode = 'cover'" :class="{'bg-blue-100 text-blue-600': fitMode==='cover'}" class="flex-1 border rounded py-1 hover:bg-gray-50">填满 Cover</button>
+                        <button @click="fitMode = 'contain'" :class="{'bg-blue-100 text-blue-600': fitMode==='contain'}" class="flex-1 border rounded py-1 hover:bg-gray-50">适应 Contain</button>
+                    </div>
+                </div>
+                <!-- Text Tools -->
+                <div class="space-y-3">
+                    <h3 class="font-bold text-gray-700 flex items-center gap-2">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
+                        文字组件
+                    </h3>
+                    <div class="grid grid-cols-2 gap-2">
+                        <button @click="addText('标题', 48, 700)" class="border rounded p-2 text-center hover:bg-gray-50 text-sm font-bold">
+                            + 大标题
+                        </button>
+                        <button @click="addText('正文内容', 24, 400)" class="border rounded p-2 text-center hover:bg-gray-50 text-sm">
+                            + 正文
+                        </button>
+                        <button @click="addNumbering" class="border rounded p-2 text-center hover:bg-gray-50 text-sm col-span-2">
+                            + 自动页码 (1/{{slideCount}})
+                        </button>
+                    </div>
+                </div>
+                <!-- Selection Settings -->
+                <div v-if="selectedElement" class="border-t pt-4 space-y-3 animate-fade-in">
+                    <h3 class="font-bold text-gray-700 text-sm">选中样式</h3>
+                    <div class="grid grid-cols-2 gap-2 text-sm">
+                        <div>
+                            <label class="block text-gray-500 text-xs mb-1">颜色</label>
+                            <input type="color" v-model="selectedElement.color" class="w-full h-8 border rounded">
+                        </div>
+                        <div>
+                            <label class="block text-gray-500 text-xs mb-1">大小</label>
+                            <input type="number" v-model="selectedElement.fontSize" class="w-full border rounded px-2 py-1">
+                        </div>
+                        <div class="col-span-2">
+                            <label class="block text-gray-500 text-xs mb-1">背景色</label>
+                            <div class="flex gap-2">
+                                <input type="checkbox" v-model="selectedElement.hasBg">
+                                <input type="color" v-model="selectedElement.bgColor" :disabled="!selectedElement.hasBg" class="flex-1 h-6 border rounded">
+                            </div>
+                        </div>
+                    </div>
+                    <button @click="deleteSelected" class="w-full bg-red-100 text-red-600 py-2 rounded text-sm hover:bg-red-200">删除选中元素</button>
+                </div>
+                <div class="mt-auto text-xs text-gray-400">
+                    <p>拖拽文字可移动位置</p>
+                    <p>点击文字进行编辑</p>
+                </div>
+            </aside>
+            <!-- Main Workspace -->
+            <main class="flex-1 bg-gray-200 overflow-auto workspace-scroll relative flex items-center justify-center p-10">
+                <!-- The Canvas Area -->
+                <div id="canvas-container"
+                     class="bg-white shadow-2xl relative transition-all duration-300"
+                     :style="containerStyle"
+                     @click.self="selectedId = null">
+                    <!-- Background Layer -->
+                    <div class="absolute inset-0 overflow-hidden pointer-events-none">
+                        <img v-if="bgImage" :src="bgImage"
+                             class="w-full h-full"
+                             :class="fitMode === 'cover' ? 'object-cover' : 'object-contain'">
+                        <div v-else class="w-full h-full bg-gradient-to-br from-indigo-50 to-pink-50 flex items-center justify-center text-gray-300 font-bold text-4xl">
+                            DROP IMAGE HERE
+                        </div>
+                    </div>
+                    <!-- Grid Lines Layer -->
+                    <div class="absolute inset-0 slide-grid pointer-events-none border border-gray-300 z-10"
+                         :style="{'--slide-width': singleSlideWidth + 'px'}">
+                         <!-- Slide Numbers -->
+                         <div class="absolute top-0 left-0 w-full h-full flex">
+                             <div v-for="n in slideCount" :key="n" class="flex-1 border-r border-dashed border-gray-400/30 flex justify-center pt-2 relative">
+                                 <span class="bg-black/20 text-white text-[10px] px-2 rounded-full backdrop-blur-sm h-fit">
+                                     P{{ n }}
+                                 </span>
+                             </div>
+                         </div>
+                    </div>
+                    <!-- Content Layer -->
+                    <div class="absolute inset-0 z-20 overflow-hidden">
+                        <div v-for="el in elements"
+                             :key="el.id"
+                             class="text-element absolute whitespace-nowrap p-2 rounded"
+                             :class="{ 'selected': selectedId === el.id }"
+                             :style="{
+                                 left: el.x + 'px',
+                                 top: el.y + 'px',
+                                 color: el.color,
+                                 fontSize: el.fontSize + 'px',
+                                 fontWeight: el.fontWeight,
+                                 backgroundColor: el.hasBg ? el.bgColor : 'transparent',
+                                 transform: 'translate(-50%, -50%)'
+                             }"
+                             @mousedown="startDrag($event, el)"
+                             @click.stop="selectElement(el)">
+                             <div contenteditable="true"
+                                  @input="updateText(el, $event)"
+                                  @blur="cleanupText(el)"
+                                  class="outline-none min-w-[20px]"
+                                  v-html="el.text">
+                             </div>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+        <!-- Processing Modal -->
+        <div v-if="isProcessing" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center backdrop-blur-sm">
+            <div class="bg-white rounded-xl p-8 flex flex-col items-center gap-4">
+                <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-red-600"></div>
+                <p class="text-gray-600 font-medium">正在生成高清切片...</p>
+            </div>
+        </div>
+    </div>
+    <script>
+        const { createApp, ref, computed, onMounted } = Vue;
+        createApp({
+            setup() {
+                const slideCount = ref(4);
+                const aspectRatio = ref('3:4');
+                const bgImage = ref(null);
+                const fitMode = ref('cover');
+                const elements = ref([]);
+                const selectedId = ref(null);
+                const isProcessing = ref(false);
+                // Constants for rendering resolution
+                // Base height 1350 (standard 4:5), width 1080
+                const BASE_HEIGHT = 600; // Display height (scaled down for viewing)
+                const ratioMap = {
+                    '3:4': 3/4,
+                    '1:1': 1,
+                    '9:16': 9/16
+                };
+                const singleSlideWidth = computed(() => {
+                    return BASE_HEIGHT * ratioMap[aspectRatio.value];
+                });
+                const totalWidth = computed(() => {
+                    return singleSlideWidth.value * slideCount.value;
+                });
+                const containerStyle = computed(() => {
+                    return {
+                        width: totalWidth.value + 'px',
+                        height: BASE_HEIGHT + 'px'
+                    };
+                });
+                const selectedElement = computed(() => {
+                    return elements.value.find(e => e.id === selectedId.value);
+                });
+                const handleImageUpload = (e) => {
+                    const file = e.target.files[0];
+                    if (!file) return;
+                    const reader = new FileReader();
+                    reader.onload = (e) => bgImage.value = e.target.result;
+                    reader.readAsDataURL(file);
+                };
+                const addText = (text, size, weight) => {
+                    const id = Date.now();
+                    elements.value.push({
+                        id,
+                        text,
+                        x: totalWidth.value / 2,
+                        y: BASE_HEIGHT / 2,
+                        fontSize: size,
+                        fontWeight: weight,
+                        color: '#000000',
+                        hasBg: false,
+                        bgColor: '#ffffff'
+                    });
+                    selectedId.value = id;
+                };
+                const addNumbering = () => {
+                    // Remove existing numbering
+                    elements.value = elements.value.filter(e => !e.isPageNumber);
+                    for(let i=0; i < slideCount.value; i++) {
+                        elements.value.push({
+                            id: Date.now() + i,
+                            text: `${i+1}/${slideCount.value}`,
+                            x: (i * singleSlideWidth.value) + (singleSlideWidth.value / 2),
+                            y: BASE_HEIGHT - 30,
+                            fontSize: 16,
+                            fontWeight: 400,
+                            color: '#ffffff',
+                            hasBg: true,
+                            bgColor: '#000000',
+                            isPageNumber: true
+                        });
+                    }
+                };
+                const selectElement = (el) => {
+                    selectedId.value = el.id;
+                };
+                const updateText = (el, event) => {
+                    el.text = event.target.innerHTML;
+                };
+                const deleteSelected = () => {
+                    if (selectedId.value) {
+                        elements.value = elements.value.filter(e => e.id !== selectedId.value);
+                        selectedId.value = null;
+                    }
+                };
+                // Dragging Logic
+                let dragOffset = { x: 0, y: 0 };
+                let isDragging = false;
+                let activeEl = null;
+                const startDrag = (e, el) => {
+                    if (e.target.isContentEditable) return; // Don't drag if editing text
+                    isDragging = true;
+                    activeEl = el;
+                    dragOffset.x = e.clientX - el.x; // Simplified, assuming transform translate(-50%, -50%) logic matches visual
+                    // Actually, with translate(-50%, -50%), el.x is center.
+                    // Mouse is at clientX.
+                    // Let's just track delta.
+                    dragOffset.x = e.clientX;
+                    dragOffset.y = e.clientY;
+                    document.addEventListener('mousemove', onDrag);
+                    document.addEventListener('mouseup', stopDrag);
+                };
+                const onDrag = (e) => {
+                    if (!isDragging || !activeEl) return;
+                    const dx = e.clientX - dragOffset.x;
+                    const dy = e.clientY - dragOffset.y;
+                    activeEl.x += dx;
+                    activeEl.y += dy;
+                    dragOffset.x = e.clientX;
+                    dragOffset.y = e.clientY;
+                };
+                const stopDrag = () => {
+                    isDragging = false;
+                    activeEl = null;
+                    document.removeEventListener('mousemove', onDrag);
+                    document.removeEventListener('mouseup', stopDrag);
+                };
+                // Export Logic
+                const exportImages = async () => {
+                    selectedId.value = null; // Deselect to remove borders
+                    isProcessing.value = true;
+                    await new Promise(r => setTimeout(r, 100)); // UI update
+                    try {
+                        const container = document.getElementById('canvas-container');
+                        // High quality capture
+                        // We scale up the canvas to match 1080px width per slide
+                        const scaleFactor = 1080 / singleSlideWidth.value;
+                        const canvas = await html2canvas(container, {
+                            scale: scaleFactor,
+                            useCORS: true,
+                            backgroundColor: null
+                        });
+                        const zip = new JSZip();
+                        const slideW = 1080; // Target width
+                        const slideH = slideW / ratioMap[aspectRatio.value];
+                        // Slice
+                        for (let i = 0; i < slideCount.value; i++) {
+                            const sliceCanvas = document.createElement('canvas');
+                            sliceCanvas.width = slideW;
+                            sliceCanvas.height = slideH;
+                            const ctx = sliceCanvas.getContext('2d');
+                            // Draw portion
+                            // Source X = i * slideW
+                            ctx.drawImage(canvas,
+                                i * slideW, 0, slideW, slideH,
+                                0, 0, slideW, slideH
+                            );
+                            const blob = await new Promise(resolve => sliceCanvas.toBlob(resolve, 'image/png'));
+                            zip.file(`slide_${i+1}.png`, blob);
+                        }
+                        const content = await zip.generateAsync({type:"blob"});
+                        saveAs(content, "carousel_slides.zip");
+                    } catch (e) {
+                        alert('导出失败: ' + e.message);
+                        console.error(e);
+                    } finally {
+                        isProcessing.value = false;
+                    }
+                };
+                return {
+                    slideCount,
+                    aspectRatio,
+                    bgImage,
+                    fitMode,
+                    elements,
+                    selectedElement,
+                    selectedId,
+                    isProcessing,
+                    singleSlideWidth,
+                    totalWidth,
+                    containerStyle,
+                    handleImageUpload,
+                    addText,
+                    addNumbering,
+                    selectElement,
+                    updateText,
+                    deleteSelected,
+                    startDrag,
+                    exportImages
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>