Initial commit

.gitignore

@@ -0,0 +1,4 @@
+venv/
+__pycache__/
+*.pyc
+.DS_Store

Dockerfile

@@ -0,0 +1,22 @@
+FROM python:3.9-slim
+
+# Install system dependencies and fonts for Chinese support
+RUN apt-get update && apt-get install -y \
+    fonts-noto-cjk \
+    gcc \
+    && rm -rf /var/lib/apt/lists/*
+
+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
+
+CMD ["python", "app.py"]

README.md

@@ -0,0 +1,66 @@
+---
+title: Word Cloud Generator
+emoji: ☁️
+colorFrom: indigo
+colorTo: purple
+sdk: docker
+app_port: 7860
+---
+
+# 在线词云生成器 (Word Cloud Generator)
+
+这是一个基于 Flask 和 WordCloud 的在线词云生成工具，专为内容创作者和数据分析师设计。
+
+## ✨ 主要功能
+
+- **中文支持**：内置 Jieba 分词和中文字体，完美支持中文文本。
+- **高度定制**：可调整图片尺寸、背景颜色、最大词数。
+- **配色方案**：提供多种专业的配色方案（Viridis, Plasma, Pastel 等）。
+- **实时预览**：快速生成并预览结果。
+- **一键下载**：生成的高清 PNG 图片可直接下载。
+- **隐私安全**：所有处理在服务器内存中完成，不保存用户文本。
+
+## 🛠️ 技术栈
+
+- **Backend**: Python, Flask, WordCloud, Jieba, NumPy, Pillow, Matplotlib
+- **Frontend**: Vue 3, Tailwind CSS (CDN)
+- **Deployment**: Docker
+
+## 🚀 快速开始 (本地运行)
+
+1. 克隆仓库:
+   ```bash
+   git clone https://github.com/yourusername/word-cloud-generator.git
+   cd word-cloud-generator
+   ```
+
+2. 安装依赖:
+   ```bash
+   pip install -r requirements.txt
+   ```
+   *注意：本地运行时请确保系统中有中文字体，或修改 app.py 中的 FONT_PATH。*
+
+3. 运行应用:
+   ```bash
+   python app.py
+   ```
+
+4. 打开浏览器访问 `http://localhost:7860`
+
+## 🐳 Docker 部署
+
+```bash
+docker build -t word-cloud-generator .
+docker run -p 7860:7860 word-cloud-generator
+```
+
+## 📝 赚钱与增长思路
+
+此项目可以作为：
+1. **引流工具 (Lead Magnet)**：SEO 优化工具箱的一部分，吸引内容创作者。
+2. **数据服务演示**：展示数据可视化能力，吸引企业客户咨询定制报表。
+3. **内容辅助**：帮助公众号/博客作者快速制作封面图。
+
+## 📄 License
+
+MIT

app.py

@@ -0,0 +1,80 @@
+import os
+from flask import Flask, render_template, request, jsonify
+from wordcloud import WordCloud
+import jieba
+import io
+import base64
+
+app = Flask(__name__)
+
+# Font path logic
+# Priority: Docker/Linux path -> Mac path -> Default
+FONT_PATH = "arial.ttf" 
+possible_fonts = [
+    "/usr/share/fonts/opentype/noto/NotoSansCJK-Regular.ttc",
+    "/usr/share/fonts/noto-cjk/NotoSansCJK-Regular.ttc",
+    "/usr/share/fonts/truetype/noto/NotoSansCJK-Regular.ttc",
+    "/System/Library/Fonts/PingFang.ttc",
+    "/System/Library/Fonts/STHeiti Light.ttc",
+    "/System/Library/Fonts/Supplemental/Arial Unicode.ttf"
+]
+
+for p in possible_fonts:
+    if os.path.exists(p):
+        FONT_PATH = p
+        break
+
+print(f"Using font: {FONT_PATH}")
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/generate', methods=['POST'])
+def generate():
+    try:
+        data = request.json
+        text = data.get('text', '')
+        if not text:
+            return jsonify({'error': '请提供文本内容'}), 400
+
+        # Options
+        width = int(data.get('width', 800))
+        height = int(data.get('height', 600))
+        bg_color = data.get('bg_color', '#ffffff')
+        max_words = int(data.get('max_words', 200))
+        colormap = data.get('colormap', 'viridis')
+        
+        # Chinese segmentation
+        # Use jieba to cut the text
+        seg_list = jieba.cut(text)
+        # Filter out short words (length < 2) and whitespace
+        clean_text = " ".join([w for w in seg_list if len(w.strip()) > 1])
+
+        if not clean_text:
+             return jsonify({'error': '文本内容有效词汇太少'}), 400
+
+        wc = WordCloud(
+            font_path=FONT_PATH,
+            width=width,
+            height=height,
+            background_color=bg_color,
+            max_words=max_words,
+            colormap=colormap,
+            collocations=False, # Avoid repeating phrases
+            margin=2
+        ).generate(clean_text)
+
+        img = wc.to_image()
+        img_io = io.BytesIO()
+        img.save(img_io, 'PNG')
+        img_io.seek(0)
+        img_b64 = base64.b64encode(img_io.getvalue()).decode()
+        
+        return jsonify({'image': f'data:image/png;base64,{img_b64}'})
+    except Exception as e:
+        print(f"Error: {e}")
+        return jsonify({'error': str(e)}), 500
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860)

requirements.txt

@@ -0,0 +1,6 @@
+Flask
+wordcloud
+jieba
+Pillow
+numpy
+matplotlib

templates/index.html

@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>在线词云生成器 - Word Cloud Generator</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
+        body { font-family: 'Noto Sans SC', sans-serif; }
+        .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <div id="app" class="min-h-screen flex flex-col">
+        <!-- Header -->
+        <header class="gradient-bg text-white shadow-lg">
+            <div class="container mx-auto px-6 py-4 flex justify-between items-center">
+                <div class="flex items-center space-x-3">
+                    <i class="fas fa-cloud text-2xl"></i>
+                    <h1 class="text-2xl font-bold">在线词云生成器</h1>
+                </div>
+                <div class="text-sm opacity-80 hidden md:block">
+                    帮助内容创作者快速提炼关键词，制作精美可视化图片
+                </div>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="flex-grow container mx-auto px-4 py-8">
+            <div class="flex flex-col lg:flex-row gap-8">
+                <!-- Settings Panel -->
+                <div class="w-full lg:w-1/3 space-y-6">
+                    <div class="bg-white rounded-xl shadow-md p-6">
+                        <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
+                            <i class="fas fa-pen-fancy mr-2 text-indigo-500"></i> 输入文本
+                        </h2>
+                        <textarea 
+                            v-model="text" 
+                            class="w-full h-40 p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 resize-none transition text-sm"
+                            placeholder="请在此粘贴文章内容、报告文本或关键词列表..."
+                        ></textarea>
+                        <p class="text-xs text-gray-500 mt-2 text-right">{{ text.length }} 字符</p>
+                    </div>
+
+                    <div class="bg-white rounded-xl shadow-md p-6">
+                        <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
+                            <i class="fas fa-sliders-h mr-2 text-indigo-500"></i> 参数设置
+                        </h2>
+                        
+                        <div class="grid grid-cols-2 gap-4 mb-4">
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">宽度 (px)</label>
+                                <input type="number" v-model.number="width" class="w-full p-2 border rounded-md text-sm">
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">高度 (px)</label>
+                                <input type="number" v-model.number="height" class="w-full p-2 border rounded-md text-sm">
+                            </div>
+                        </div>
+
+                        <div class="mb-4">
+                            <label class="block text-sm font-medium text-gray-700 mb-1">最大词数: {{ maxWords }}</label>
+                            <input type="range" v-model.number="maxWords" min="50" max="500" step="10" class="w-full accent-indigo-500">
+                        </div>
+
+                        <div class="grid grid-cols-2 gap-4 mb-4">
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">背景颜色</label>
+                                <div class="flex items-center border rounded-md p-1">
+                                    <input type="color" v-model="bgColor" class="h-8 w-8 cursor-pointer border-none bg-transparent">
+                                    <span class="ml-2 text-xs text-gray-500">{{ bgColor }}</span>
+                                </div>
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">配色方案</label>
+                                <select v-model="colormap" class="w-full p-2 border rounded-md bg-white text-sm">
+                                    <option value="viridis">Viridis (默认)</option>
+                                    <option value="plasma">Plasma</option>
+                                    <option value="inferno">Inferno</option>
+                                    <option value="magma">Magma</option>
+                                    <option value="cividis">Cividis</option>
+                                    <option value="Pastel1">Pastel 1 (柔和)</option>
+                                    <option value="Pastel2">Pastel 2</option>
+                                    <option value="Set2">Set 2</option>
+                                    <option value="tab10">Tab 10</option>
+                                    <option value="Reds">Reds (红色系)</option>
+                                    <option value="Blues">Blues (蓝色系)</option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <button 
+                            @click="generateCloud" 
+                            :disabled="isLoading || !text"
+                            class="w-full py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-lg shadow transition transform hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed flex justify-center items-center"
+                        >
+                            <i v-if="isLoading" class="fas fa-spinner fa-spin mr-2"></i>
+                            <span v-if="isLoading">生成中...</span>
+                            <span v-else>生成词云</span>
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Preview Panel -->
+                <div class="w-full lg:w-2/3">
+                    <div class="bg-white rounded-xl shadow-md p-6 h-full flex flex-col">
+                        <div class="flex justify-between items-center mb-4">
+                            <h2 class="text-lg font-semibold text-gray-800 flex items-center">
+                                <i class="fas fa-image mr-2 text-indigo-500"></i> 预览结果
+                            </h2>
+                            <button 
+                                v-if="imageUrl" 
+                                @click="downloadImage" 
+                                class="px-4 py-2 bg-green-500 hover:bg-green-600 text-white text-sm rounded-md transition flex items-center shadow hover:shadow-md"
+                            >
+                                <i class="fas fa-download mr-2"></i> 下载图片
+                            </button>
+                        </div>
+
+                        <div class="flex-grow flex items-center justify-center bg-gray-100 rounded-lg border-2 border-dashed border-gray-300 overflow-hidden relative min-h-[400px]">
+                            <div v-if="!imageUrl && !isLoading" class="text-center text-gray-400">
+                                <i class="fas fa-cloud text-6xl mb-4 opacity-50"></i>
+                                <p>在左侧输入文本并点击生成</p>
+                            </div>
+                            <div v-if="isLoading" class="text-center text-indigo-500">
+                                <i class="fas fa-circle-notch fa-spin text-4xl mb-2"></i>
+                                <p>正在进行中文分词与绘图...</p>
+                            </div>
+                            <img 
+                                v-if="imageUrl" 
+                                :src="imageUrl" 
+                                alt="Word Cloud" 
+                                class="max-w-full max-h-full object-contain shadow-lg"
+                            >
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <!-- Footer -->
+        <footer class="bg-gray-800 text-gray-400 py-6 mt-8">
+            <div class="container mx-auto px-4 text-center">
+                <p>&copy; 2024 在线词云生成器 (Word Cloud Generator). All rights reserved.</p>
+                <p class="text-sm mt-2 opacity-75">Designed for Content Creators & Data Enthusiasts</p>
+            </div>
+        </footer>
+    </div>
+
+    <script>
+        const { createApp, ref } = Vue
+
+        createApp({
+            setup() {
+                const text = ref('词云（Word Cloud）是对文本中出现频率较高的“关键词”给予视觉化的展现，词云过滤掉大量的低频低质的文本信息，使得浏览者只要一眼扫过文本就可领略文本的主旨。这里可以输入任意的中文或英文文本，系统会自动进行分词和统计。通过调整参数，您可以定制词云的大小、颜色和风格。此工具非常适合用于制作PPT插图、文章封面、数据分析报告等。')
+                const width = ref(1000)
+                const height = ref(600)
+                const bgColor = ref('#ffffff')
+                const maxWords = ref(200)
+                const colormap = ref('viridis')
+                const imageUrl = ref('')
+                const isLoading = ref(false)
+
+                const generateCloud = async () => {
+                    if (!text.value) return
+                    
+                    isLoading.value = true
+                    imageUrl.value = '' // Clear previous
+
+                    try {
+                        const response = await fetch('/api/generate', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify({
+                                text: text.value,
+                                width: width.value,
+                                height: height.value,
+                                bg_color: bgColor.value,
+                                max_words: maxWords.value,
+                                colormap: colormap.value
+                            })
+                        })
+
+                        const data = await response.json()
+                        
+                        if (response.ok) {
+                            imageUrl.value = data.image
+                        } else {
+                            alert('生成失败: ' + (data.error || '未知错误'))
+                        }
+                    } catch (error) {
+                        alert('请求错误: ' + error.message)
+                    } finally {
+                        isLoading.value = false
+                    }
+                }
+
+                const downloadImage = () => {
+                    if (!imageUrl.value) return
+                    const link = document.createElement('a')
+                    link.href = imageUrl.value
+                    link.download = `wordcloud_${new Date().getTime()}.png`
+                    document.body.appendChild(link)
+                    link.click()
+                    document.body.removeChild(link)
+                }
+
+                return {
+                    text,
+                    width,
+                    height,
+                    bgColor,
+                    maxWords,
+                    colormap,
+                    imageUrl,
+                    isLoading,
+                    generateCloud,
+                    downloadImage
+                }
+            }
+        }).mount('#app')
+    </script>
+</body>
+</html>