Spaces:

duqing026
/

saas-comparison-studio

Sleeping

App Files Files Community

duqing2026 commited on Jan 30

Commit

a83f3b4

1 Parent(s): a4ec11a

Initial commit

Browse files

Files changed (5) hide show

Dockerfile +10 -0
README.md +56 -5
app.py +16 -0
requirements.txt +2 -0
templates/index.html +386 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,10 @@

+FROM python:3.9-slim
+WORKDIR /app
+COPY requirements.txt requirements.txt
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . .
+CMD ["python", "app.py"]

README.md CHANGED Viewed

@@ -1,10 +1,61 @@
 ---
-title: Saas Comparison Studio
-emoji: 🐠
-colorFrom: blue
-colorTo: red
 sdk: docker
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: SaaS Comparison Studio
+emoji: ⚔️
+colorFrom: indigo
+colorTo: purple
 sdk: docker
 pinned: false
+short_description: SaaS 竞品对比图工坊
 ---
+# SaaS 竞品对比图工坊 (SaaS Comparison Studio)
+帮助 SaaS 创始人、独立开发者和市场营销人员快速生成高转化的竞品对比图（Battle Cards）。
+## ✨ 核心功能
+*   **可视化编辑器**：点击单元格即可切换状态（对勾 ✅、叉 ❌、减号 ➖、文字）。
+*   **灵活布局**：任意添加/删除竞品列和功能行。
+*   **强调高亮**：一键设置“我的产品”为高亮列，引导用户选择。
+*   **多主题支持**：内置简约白、深邃黑、暖色调等多种风格。
+*   **一键导出**：基于浏览器的高清图片导出 (PNG)，保护隐私（无数据上传）。
+*   **本地存储**：自动保存编辑进度到 LocalStorage，防止丢失。
+## 🛠️ 技术栈
+*   **Backend**: Flask (Python)
+*   **Frontend**: Vue 3 + Tailwind CSS (via CDN)
+*   **Export**: html2canvas
+*   **Icons**: Phosphor Icons
+## 🚀 快速开始
+### Docker 部署 (推荐)
+本项目已配置 Dockerfile，可直接部署到 Hugging Face Spaces。
+```bash
+docker build -t saas-comparison-studio .
+docker run -p 7860:7860 saas-comparison-studio
+```
+### 本地开发
+1. 安装依赖：
+```bash
+pip install -r requirements.txt
+```
+2. 运行应用：
+```bash
+python app.py
+```
+3. 访问 `http://localhost:7860`
+## 📝 为什么做这个工具？
+在 SaaS 营销中，"Us vs Them" 页面是转化率最高的页面之一。但使用 PS 或 Figma 制作对比图既耗时又难以维护（每次功能更新都要改图）。这个工具旨在让任何人都能在 1 分钟内生成专业的竞品对比图。
+---
+Built with ❤️ by Trae AI

app.py ADDED Viewed

	@@ -0,0 +1,16 @@

+from flask import Flask, render_template, send_from_directory
+import os
+app = Flask(__name__)
+@app.route('/')
+def index():
+    return render_template('index.html')
+@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)

requirements.txt ADDED Viewed

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


1	+ flask
2	+ gunicorn

templates/index.html ADDED Viewed

	@@ -0,0 +1,386 @@

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SaaS 竞品对比图工坊</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
+    <!-- Phosphor Icons -->
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
+    <style>
+        [contenteditable]:empty:before {
+            content: attr(placeholder);
+            color: #9ca3af;
+            cursor: text;
+        }
+        .cell-check { color: #10b981; }
+        .cell-cross { color: #ef4444; }
+        .cell-dash { color: #9ca3af; }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen font-sans">
+    <div id="app" class="p-4 md:p-8 max-w-7xl mx-auto">
+        <!-- Header -->
+        <header class="mb-8 flex justify-between items-center">
+            <div>
+                <h1 class="text-3xl font-bold text-gray-900 flex items-center gap-2">
+                    <i class="ph ph-sword text-indigo-600"></i>
+                    SaaS 竞品对比图工坊
+                </h1>
+                <p class="text-gray-500 mt-1">快速生成高转化的竞品对比图 (Battle Cards)</p>
+            </div>
+            <div class="flex gap-3">
+                <button @click="resetData" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
+                    重置
+                </button>
+                <button @click="exportImage" class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 transition-colors flex items-center gap-2">
+                    <i class="ph ph-download-simple"></i>
+                    导出图片
+                </button>
+            </div>
+        </header>
+        <!-- Main Editor -->
+        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
+            <!-- Sidebar Controls -->
+            <div class="lg:col-span-1 space-y-6">
+                <div class="bg-white p-5 rounded-xl shadow-sm border border-gray-200">
+                    <h3 class="font-semibold text-gray-900 mb-4">外观设置</h3>
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">主题风格</label>
+                            <div class="grid grid-cols-3 gap-2">
+                                <button
+                                    v-for="t in themes"
+                                    :key="t.value"
+                                    @click="currentTheme = t.value"
+                                    :class="{'ring-2 ring-indigo-500 ring-offset-1': currentTheme === t.value}"
+                                    class="h-8 rounded border border-gray-200 text-xs font-medium"
+                                    :style="{background: t.bg, color: t.text}"
+                                >
+                                    [[ t.label ]]
+                                </button>
+                            </div>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">强调色</label>
+                            <div class="flex flex-wrap gap-2">
+                                <button
+                                    v-for="color in colors"
+                                    :key="color"
+                                    @click="primaryColor = color"
+                                    class="w-6 h-6 rounded-full border border-gray-200"
+                                    :class="{'ring-2 ring-offset-1 ring-gray-400': primaryColor === color}"
+                                    :style="{backgroundColor: color}"
+                                ></button>
+                            </div>
+                        </div>
+                        <div class="flex items-center gap-2">
+                            <input type="checkbox" id="show-logo" v-model="showLogo" class="rounded text-indigo-600 focus:ring-indigo-500">
+                            <label for="show-logo" class="text-sm text-gray-700">显示 Logo 占位符</label>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-white p-5 rounded-xl shadow-sm border border-gray-200">
+                    <h3 class="font-semibold text-gray-900 mb-4">数据管理</h3>
+                    <div class="space-y-3">
+                        <button @click="addColumn" class="w-full py-2 px-3 border border-dashed border-gray-300 rounded-lg text-sm text-gray-600 hover:border-indigo-500 hover:text-indigo-600 transition-colors">
+                            + 添加竞品列
+                        </button>
+                        <button @click="addRow" class="w-full py-2 px-3 border border-dashed border-gray-300 rounded-lg text-sm text-gray-600 hover:border-indigo-500 hover:text-indigo-600 transition-colors">
+                            + 添加功能行
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!-- Canvas Area -->
+            <div class="lg:col-span-3 overflow-x-auto">
+                <div class="min-w-[600px] border rounded-xl overflow-hidden shadow-lg transition-all duration-300"
+                     id="capture-area"
+                     :class="themeClasses">
+                    <!-- Table Header -->
+                    <div class="grid" :style="{ gridTemplateColumns: gridTemplateCols }">
+                        <!-- Top Left Empty -->
+                        <div class="p-4 border-b border-r border-gray-200/20 flex items-center justify-center">
+                            <span class="text-xs font-bold opacity-50 uppercase tracking-wider">Features</span>
+                        </div>
+                        <!-- Product Columns Headers -->
+                        <div v-for="(col, index) in columns"
+                             :key="col.id"
+                             class="p-4 border-b border-gray-200/20 text-center relative group"
+                             :class="{'bg-opacity-10': col.isPrimary}"
+                             :style="{ backgroundColor: col.isPrimary ? primaryColor + '1A' : 'transparent' }"
+                        >
+                            <!-- Delete Button (Hover) -->
+                            <button v-if="columns.length > 1"
+                                    @click="removeColumn(index)"
+                                    class="absolute -top-2 -right-2 bg-red-500 text-white w-5 h-5 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-10 shadow-sm">
+                                &times;
+                            </button>
+                            <div v-if="showLogo" class="w-10 h-10 mx-auto mb-2 rounded-full bg-gray-200/50 flex items-center justify-center overflow-hidden">
+                                <i class="ph ph-image text-xl opacity-50"></i>
+                            </div>
+                            <h3 contenteditable="true"
+                                @blur="updateColName(index, $event)"
+                                class="font-bold text-lg outline-none border-b border-transparent focus:border-indigo-500 inline-block px-1"
+                                :class="{'text-indigo-600': col.isPrimary}"
+                                :style="{ color: col.isPrimary ? primaryColor : 'inherit' }"
+                            >[[ col.name ]]</h3>
+                            <div class="mt-1 flex justify-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                                <button @click="setPrimary(index)"
+                                        class="text-xs px-2 py-0.5 rounded-full border border-current"
+                                        :class="col.isPrimary ? 'opacity-100' : 'opacity-40 hover:opacity-100'">
+                                    [[ col.isPrimary ? 'My Product' : 'Competitor' ]]
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Table Rows -->
+                    <div v-for="(row, rIndex) in rows" :key="row.id"
+                         class="grid group hover:bg-black/5"
+                         :style="{ gridTemplateColumns: gridTemplateCols }">
+                        <!-- Feature Name -->
+                        <div class="p-3 border-b border-r border-gray-200/20 flex items-center relative pl-6">
+                            <button v-if="rows.length > 1"
+                                    @click="removeRow(rIndex)"
+                                    class="absolute left-1 top-1/2 -translate-y-1/2 text-red-400 opacity-0 group-hover:opacity-100 hover:text-red-600 p-1">
+                                <i class="ph ph-trash"></i>
+                            </button>
+                            <span contenteditable="true"
+                                  @blur="updateRowName(rIndex, $event)"
+                                  class="font-medium outline-none border-b border-transparent focus:border-indigo-500 w-full"
+                            >[[ row.name ]]</span>
+                        </div>
+                        <!-- Cells -->
+                        <div v-for="(col, cIndex) in columns"
+                             :key="col.id"
+                             @click="cycleCellType(rIndex, col.id)"
+                             class="p-3 border-b border-gray-200/20 flex items-center justify-center cursor-pointer hover:bg-black/5 transition-colors select-none relative"
+                             :class="{'bg-opacity-5': col.isPrimary}"
+                             :style="{ backgroundColor: col.isPrimary ? primaryColor + '0D' : 'transparent' }"
+                        >
+                            <div v-if="getCell(row.id, col.id).type === 'check'" class="text-2xl" :style="{ color: primaryColor }">
+                                <i class="ph ph-check-circle-fill"></i>
+                            </div>
+                            <div v-else-if="getCell(row.id, col.id).type === 'cross'" class="text-2xl text-gray-300">
+                                <i class="ph ph-x-circle"></i>
+                            </div>
+                            <div v-else-if="getCell(row.id, col.id).type === 'dash'" class="text-2xl text-gray-300">
+                                <i class="ph ph-minus"></i>
+                            </div>
+                            <div v-else-if="getCell(row.id, col.id).type === 'text'" @click.stop class="w-full text-center">
+                                <input type="text"
+                                       v-model="getCell(row.id, col.id).value"
+                                       class="bg-transparent text-center w-full outline-none text-sm"
+                                       placeholder="Text...">
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Footer / Branding -->
+                    <div class="p-4 flex justify-between items-center opacity-60 text-xs">
+                        <span>Generated by SaaS Comparison Studio</span>
+                        <span>[[ currentDate ]]</span>
+                    </div>
+                </div>
+                <p class="mt-4 text-center text-sm text-gray-500">
+                    💡 提示：点击单元格可切换状态 (对勾 -> 叉 -> 减号 -> 文字)
+                </p>
+            </div>
+        </div>
+    </div>
+    <script>
+        const { createApp, ref, computed, onMounted, watch } = Vue;
+        createApp({
+            compilerOptions: {
+                delimiters: ['[[', ']]']
+            },
+            setup() {
+                const currentTheme = ref('light');
+                const primaryColor = ref('#4F46E5'); // Indigo-600
+                const showLogo = ref(false);
+                const themes = [
+                    { value: 'light', label: '简约白', bg: '#ffffff', text: '#111827' },
+                    { value: 'dark', label: '深邃黑', bg: '#111827', text: '#ffffff' },
+                    { value: 'warm', label: '暖色调', bg: '#FFF7ED', text: '#431407' }
+                ];
+                const colors = ['#4F46E5', '#10B981', '#EF4444', '#F59E0B', '#EC4899', '#3B82F6'];
+                const columns = ref([
+                    { id: 'c1', name: 'Competitor A', isPrimary: false },
+                    { id: 'c2', name: 'My Product', isPrimary: true },
+                    { id: 'c3', name: 'Competitor B', isPrimary: false }
+                ]);
+                const rows = ref([
+                    { id: 'r1', name: 'Unlimited Projects' },
+                    { id: 'r2', name: '24/7 Support' },
+                    { id: 'r3', name: 'Custom Domain' },
+                    { id: 'r4', name: 'API Access' },
+                    { id: 'r5', name: 'White Labeling' }
+                ]);
+                // Map of rowId -> { colId -> { type: 'check'|'cross'|'dash'|'text', value: '' } }
+                const cells = ref({});
+                // Initialize cells
+                const initCells = () => {
+                    rows.value.forEach(row => {
+                        if (!cells.value[row.id]) cells.value[row.id] = {};
+                        columns.value.forEach(col => {
+                            if (!cells.value[row.id][col.id]) {
+                                // Default logic: Primary gets checks, others get mixed
+                                const isGood = col.isPrimary || Math.random() > 0.5;
+                                cells.value[row.id][col.id] = {
+                                    type: isGood ? 'check' : 'cross',
+                                    value: ''
+                                };
+                            }
+                        });
+                    });
+                };
+                const gridTemplateCols = computed(() => {
+                    return `200px repeat(${columns.value.length}, minmax(140px, 1fr))`;
+                });
+                const themeClasses = computed(() => {
+                    if (currentTheme.value === 'light') return 'bg-white text-gray-900 border-gray-200';
+                    if (currentTheme.value === 'dark') return 'bg-gray-900 text-white border-gray-700';
+                    if (currentTheme.value === 'warm') return 'bg-orange-50 text-orange-900 border-orange-200';
+                    return '';
+                });
+                const currentDate = computed(() => {
+                    return new Date().toLocaleDateString();
+                });
+                const getCell = (rowId, colId) => {
+                    if (!cells.value[rowId]) cells.value[rowId] = {};
+                    if (!cells.value[rowId][colId]) cells.value[rowId][colId] = { type: 'dash', value: '' };
+                    return cells.value[rowId][colId];
+                };
+                const cycleCellType = (rowId, colId) => {
+                    const cell = getCell(rowId, colId);
+                    const types = ['check', 'cross', 'dash', 'text'];
+                    const idx = types.indexOf(cell.type);
+                    cell.type = types[(idx + 1) % types.length];
+                };
+                const addColumn = () => {
+                    const newId = 'c' + Date.now();
+                    columns.value.push({ id: newId, name: 'New Product', isPrimary: false });
+                    rows.value.forEach(row => {
+                        cells.value[row.id][newId] = { type: 'cross', value: '' };
+                    });
+                };
+                const removeColumn = (index) => {
+                    columns.value.splice(index, 1);
+                };
+                const addRow = () => {
+                    const newId = 'r' + Date.now();
+                    rows.value.push({ id: newId, name: 'New Feature' });
+                    cells.value[newId] = {};
+                    columns.value.forEach(col => {
+                        cells.value[newId][col.id] = { type: 'check', value: '' };
+                    });
+                };
+                const removeRow = (index) => {
+                    const id = rows.value[index].id;
+                    rows.value.splice(index, 1);
+                    delete cells.value[id];
+                };
+                const updateColName = (index, event) => {
+                    columns.value[index].name = event.target.innerText;
+                };
+                const updateRowName = (index, event) => {
+                    rows.value[index].name = event.target.innerText;
+                };
+                const setPrimary = (index) => {
+                    columns.value.forEach((c, i) => c.isPrimary = (i === index));
+                };
+                const exportImage = async () => {
+                    const element = document.getElementById('capture-area');
+                    const canvas = await html2canvas(element, {
+                        scale: 2,
+                        backgroundColor: null
+                    });
+                    const link = document.createElement('a');
+                    link.download = `comparison-chart-${Date.now()}.png`;
+                    link.href = canvas.toDataURL();
+                    link.click();
+                };
+                const resetData = () => {
+                    if(confirm('确定要重置所有数据吗？')) {
+                        localStorage.removeItem('saas-comparison-data');
+                        location.reload();
+                    }
+                };
+                // Persistence
+                onMounted(() => {
+                    const saved = localStorage.getItem('saas-comparison-data');
+                    if (saved) {
+                        try {
+                            const data = JSON.parse(saved);
+                            columns.value = data.columns;
+                            rows.value = data.rows;
+                            cells.value = data.cells;
+                            currentTheme.value = data.theme;
+                            primaryColor.value = data.primaryColor;
+                        } catch(e) { console.error(e); initCells(); }
+                    } else {
+                        initCells();
+                    }
+                });
+                watch([columns, rows, cells, currentTheme, primaryColor], () => {
+                    localStorage.setItem('saas-comparison-data', JSON.stringify({
+                        columns: columns.value,
+                        rows: rows.value,
+                        cells: cells.value,
+                        theme: currentTheme.value,
+                        primaryColor: primaryColor.value
+                    }));
+                }, { deep: true });
+                return {
+                    columns, rows, cells, currentTheme, themes, primaryColor, colors, showLogo,
+                    getCell, cycleCellType, addColumn, removeColumn, addRow, removeRow,
+                    updateColName, updateRowName, setPrimary, exportImage, resetData,
+                    gridTemplateCols, themeClasses, currentDate
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>