Spaces:

duqing26
/

code-snapshot-studio

Sleeping

App Files Files Community

duqing2026 commited on 18 days ago

Commit

031a9c5

1 Parent(s): 8a93016

Initial commit: Code Snapshot Studio MVP

Browse files

Files changed (6) hide show

.gitignore +6 -0
Dockerfile +17 -0
README.md +59 -4
app.py +15 -0
requirements.txt +2 -0
templates/index.html +294 -0

.gitignore ADDED Viewed

	@@ -0,0 +1,6 @@

+__pycache__/
+*.pyc
+.DS_Store
+.venv
+env/
+venv/

Dockerfile ADDED Viewed

	@@ -0,0 +1,17 @@

+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
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md CHANGED Viewed

@@ -1,11 +1,66 @@
 ---
 title: Code Snapshot Studio
-emoji: 💻
 colorFrom: indigo
-colorTo: blue
 sdk: docker
 pinned: false
-short_description: 穷
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
 title: Code Snapshot Studio
+emoji: 📸
 colorFrom: indigo
+colorTo: purple
 sdk: docker
+app_port: 7860
 pinned: false
 ---
+# Code Snapshot Studio (代码截图工坊)
+Code Snapshot Studio 是一个专为开发者设计的代码截图生成工具，帮助你创建美观、高清晰度的代码图片，用于技术博客、社交媒体分享或演示文档。
+## ✨ 核心功能
+- **多语言支持**：支持 Python, JavaScript, Go, Rust, Java 等多种主流编程语言的语法高亮。
+- **主题切换**：内置 Tomorrow (Dark), Okaidia, Solarized Light, Twilight 等多种经典配色主题。
+- **高度定制**：
+  - 调整内边距 (Padding)
+  - 切换背景风格 (渐变色/纯色)
+  - 窗口控件开关 (Mac 风格红绿灯)
+  - 行号显示开关
+  - 自定义窗口标题
+- **高清导出**：基于 HTML2Canvas，一键导出 2x 分辨率的高清 PNG 图片。
+- **实时预览**：所见即所得的编辑体验。
+## 🚀 快速开始
+### 本地运行
+1. 克隆仓库：
+   ```bash
+   git clone https://github.com/yourusername/code-snapshot-studio.git
+   cd code-snapshot-studio
+   ```
+2. 安装依赖：
+   ```bash
+   pip install -r requirements.txt
+   ```
+3. 启动应用：
+   ```bash
+   python app.py
+   ```
+4. 打开浏览器访问：`http://localhost:7860`
+### Docker 部署
+```bash
+docker build -t code-snapshot-studio .
+docker run -p 7860:7860 code-snapshot-studio
+```
+## 🛠️ 技术栈
+- **Backend**: Flask (Python)
+- **Frontend**: Vue.js 3, Tailwind CSS
+- **Syntax Highlighting**: Prism.js
+- **Image Generation**: html2canvas
+## 📝 License
+MIT License

app.py ADDED Viewed

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

+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__':
+    app.run(host='0.0.0.0', port=7860)

requirements.txt ADDED Viewed

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


1	+ flask
2	+ gunicorn

templates/index.html ADDED Viewed

	@@ -0,0 +1,294 @@

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Code Snapshot Studio - 代码截图工坊</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
+    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
+    <!-- Default Theme -->
+    <link id="prism-theme" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
+    <!-- Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        body {
+            font-family: 'Inter', system-ui, -apple-system, sans-serif;
+            background-color: #f3f4f6;
+        }
+        .preview-container {
+            transition: all 0.3s ease;
+            overflow: hidden; /* Ensure content doesn't spill out */
+        }
+        /* Custom Scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #cbd5e1;
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #94a3b8;
+        }
+        .code-font {
+            font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+    </style>
+</head>
+<body class="h-screen flex flex-col overflow-hidden">
+    <div id="app" class="flex-1 flex flex-col h-full">
+        <!-- Header -->
+        <header class="bg-white border-b border-gray-200 px-6 py-3 flex items-center justify-between shadow-sm z-10">
+            <div class="flex items-center gap-3">
+                <div class="w-8 h-8 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-lg flex items-center justify-center text-white font-bold">
+                    <i class="fa-solid fa-camera"></i>
+                </div>
+                <h1 class="text-xl font-bold text-gray-800 tracking-tight">Code Snapshot Studio</h1>
+            </div>
+            <div class="flex items-center gap-4">
+                <button @click="exportImage" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg font-medium transition-colors flex items-center gap-2 shadow-sm">
+                    <i class="fa-solid fa-download"></i>
+                    <span>导出 PNG</span>
+                </button>
+            </div>
+        </header>
+        <!-- Main Content -->
+        <main class="flex-1 flex overflow-hidden">
+            <!-- Sidebar Controls -->
+            <aside class="w-80 bg-white border-r border-gray-200 overflow-y-auto p-6 flex flex-col gap-6 shadow-[4px_0_24px_rgba(0,0,0,0.02)] z-10">
+                <!-- Code Input -->
+                <div class="flex flex-col gap-2">
+                    <label class="text-sm font-semibold text-gray-700">代码内容</label>
+                    <textarea v-model="code" class="w-full h-48 p-3 border border-gray-300 rounded-lg text-sm font-mono focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none resize-none bg-gray-50" placeholder="在此粘贴你的代码..."></textarea>
+                </div>
+                <!-- Language & Theme -->
+                <div class="grid grid-cols-2 gap-4">
+                    <div class="flex flex-col gap-2">
+                        <label class="text-sm font-semibold text-gray-700">语言</label>
+                        <select v-model="language" @change="refreshHighlight" class="w-full p-2 border border-gray-300 rounded-lg text-sm bg-white focus:ring-2 focus:ring-indigo-500 outline-none">
+                            <option value="javascript">JavaScript</option>
+                            <option value="python">Python</option>
+                            <option value="html">HTML</option>
+                            <option value="css">CSS</option>
+                            <option value="java">Java</option>
+                            <option value="go">Go</option>
+                            <option value="rust">Rust</option>
+                            <option value="sql">SQL</option>
+                            <option value="bash">Bash</option>
+                            <option value="json">JSON</option>
+                            <option value="typescript">TypeScript</option>
+                        </select>
+                    </div>
+                    <div class="flex flex-col gap-2">
+                        <label class="text-sm font-semibold text-gray-700">主题</label>
+                        <select v-model="theme" @change="changeTheme" class="w-full p-2 border border-gray-300 rounded-lg text-sm bg-white focus:ring-2 focus:ring-indigo-500 outline-none">
+                            <option value="tomorrow">Dark (Tomorrow)</option>
+                            <option value="okaidia">Okaidia</option>
+                            <option value="solarizedlight">Solarized Light</option>
+                            <option value="twilight">Twilight</option>
+                            <option value="default">Default</option>
+                        </select>
+                    </div>
+                </div>
+                <!-- Background -->
+                <div class="flex flex-col gap-2">
+                    <label class="text-sm font-semibold text-gray-700">背景风格</label>
+                    <div class="grid grid-cols-5 gap-2">
+                        <button v-for="(bg, index) in backgrounds" :key="index"
+                            @click="currentBg = bg"
+                            :class="['w-8 h-8 rounded-full border-2 transition-all', currentBg.value === bg.value ? 'border-indigo-600 scale-110 shadow-md' : 'border-transparent hover:scale-105']"
+                            :style="{ background: bg.value }">
+                        </button>
+                    </div>
+                </div>
+                <!-- Settings -->
+                <div class="space-y-4 border-t border-gray-100 pt-4">
+                    <div class="flex items-center justify-between">
+                        <label class="text-sm font-medium text-gray-700">窗口控件</label>
+                        <input type="checkbox" v-model="showWindowControls" class="w-4 h-4 text-indigo-600 rounded focus:ring-indigo-500">
+                    </div>
+                    <div class="flex items-center justify-between">
+                        <label class="text-sm font-medium text-gray-700">行号</label>
+                        <input type="checkbox" v-model="showLineNumbers" class="w-4 h-4 text-indigo-600 rounded focus:ring-indigo-500">
+                    </div>
+                    <div class="flex items-center justify-between">
+                        <label class="text-sm font-medium text-gray-700">窗口阴影</label>
+                        <input type="checkbox" v-model="showShadow" class="w-4 h-4 text-indigo-600 rounded focus:ring-indigo-500">
+                    </div>
+                    <div class="flex flex-col gap-2">
+                        <div class="flex justify-between">
+                            <label class="text-sm font-medium text-gray-700">内边距 (Padding)</label>
+                            <span class="text-xs text-gray-500">{{ padding }}px</span>
+                        </div>
+                        <input type="range" v-model="padding" min="16" max="128" step="8" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-indigo-600">
+                    </div>
+                     <div class="flex flex-col gap-2">
+                        <label class="text-sm font-medium text-gray-700">窗口标题</label>
+                        <input type="text" v-model="windowTitle" class="w-full p-2 border border-gray-300 rounded-lg text-sm outline-none focus:ring-2 focus:ring-indigo-500" placeholder="例如: app.py">
+                    </div>
+                </div>
+            </aside>
+            <!-- Preview Area -->
+            <section class="flex-1 bg-gray-100 flex items-center justify-center p-8 overflow-auto relative">
+                <!-- Grid Background Pattern -->
+                <div class="absolute inset-0 opacity-[0.03]"
+                    style="background-image: radial-gradient(#000 1px, transparent 1px); background-size: 20px 20px;">
+                </div>
+                <!-- The Snapshot Card -->
+                <div ref="snapshotCard" class="preview-container relative flex items-center justify-center min-w-[400px]"
+                     :style="{ background: currentBg.value, padding: padding + 'px' }">
+                    <!-- Window -->
+                    <div class="bg-[#1e1e1e] rounded-xl overflow-hidden min-w-[400px] max-w-4xl w-auto"
+                         :class="{'shadow-2xl': showShadow, 'shadow-none': !showShadow}"
+                         :style="{ backgroundColor: themeBgColor }">
+                        <!-- Window Header -->
+                        <div v-if="showWindowControls || windowTitle" class="px-4 py-3 flex items-center relative bg-white/5 border-b border-white/5">
+                            <!-- Controls -->
+                            <div v-if="showWindowControls" class="flex gap-2 absolute left-4">
+                                <div class="w-3 h-3 rounded-full bg-[#ff5f56] border border-[#e0443e]"></div>
+                                <div class="w-3 h-3 rounded-full bg-[#ffbd2e] border border-[#dea123]"></div>
+                                <div class="w-3 h-3 rounded-full bg-[#27c93f] border border-[#1aab29]"></div>
+                            </div>
+                            <!-- Title -->
+                            <div class="w-full text-center text-xs font-medium text-gray-400 font-sans select-none">
+                                {{ windowTitle }}
+                            </div>
+                        </div>
+                        <!-- Code Content -->
+                        <div class="p-0 overflow-hidden">
+                            <pre class="!m-0 !p-6 !bg-transparent text-sm leading-relaxed outline-none code-font"
+                                 :class="{'line-numbers': showLineNumbers}"><code :class="'language-' + language" ref="codeBlock">{{ code }}</code></pre>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+    </div>
+    <script>
+        const { createApp, ref, onMounted, watch, nextTick } = Vue;
+        createApp({
+            setup() {
+                const code = ref(`def hello_world():
+    print("Hello, Trae!")
+    return True
+# Build something amazing
+if __name__ == "__main__":
+    hello_world()`);
+                const language = ref('python');
+                const theme = ref('tomorrow');
+                const padding = ref(64);
+                const showWindowControls = ref(true);
+                const showLineNumbers = ref(true);
+                const showShadow = ref(true);
+                const windowTitle = ref('main.py');
+                const snapshotCard = ref(null);
+                const codeBlock = ref(null);
+                // Background presets
+                const backgrounds = [
+                    { name: 'Gradient 1', value: 'linear-gradient(135deg, #FF9D6C 0%, #BB4E75 100%)' },
+                    { name: 'Gradient 2', value: 'linear-gradient(135deg, #85FFBD 0%, #FFFB7D 100%)' },
+                    { name: 'Gradient 3', value: 'linear-gradient(135deg, #8EC5FC 0%, #E0C3FC 100%)' },
+                    { name: 'Gradient 4', value: 'linear-gradient(135deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%)' },
+                    { name: 'Solid Dark', value: '#1e293b' },
+                ];
+                const currentBg = ref(backgrounds[3]);
+                const themeBgColor = ref('#2d2d2d'); // Default for Tomorrow
+                const changeTheme = () => {
+                    const link = document.getElementById('prism-theme');
+                    const baseUrl = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism';
+                    if (theme.value === 'default') {
+                        link.href = `${baseUrl}.min.css`;
+                        themeBgColor.value = '#f5f2f0';
+                    } else {
+                        link.href = `${baseUrl}-${theme.value}.min.css`;
+                        // Update bg color approximation
+                        if(theme.value === 'tomorrow') themeBgColor.value = '#2d2d2d';
+                        if(theme.value === 'okaidia') themeBgColor.value = '#272822';
+                        if(theme.value === 'solarizedlight') themeBgColor.value = '#fdf6e3';
+                        if(theme.value === 'twilight') themeBgColor.value = '#141414';
+                    }
+                };
+                const refreshHighlight = () => {
+                    nextTick(() => {
+                        if (window.Prism) {
+                            Prism.highlightAll();
+                        }
+                    });
+                };
+                watch([code, language, showLineNumbers], () => {
+                    refreshHighlight();
+                });
+                onMounted(() => {
+                    refreshHighlight();
+                });
+                const exportImage = async () => {
+                    if (!snapshotCard.value) return;
+                    try {
+                        const canvas = await html2canvas(snapshotCard.value, {
+                            scale: 2, // Retina support
+                            useCORS: true,
+                            backgroundColor: null,
+                            logging: false
+                        });
+                        const link = document.createElement('a');
+                        link.download = `code-snapshot-${Date.now()}.png`;
+                        link.href = canvas.toDataURL('image/png');
+                        link.click();
+                    } catch (err) {
+                        console.error('Export failed:', err);
+                        alert('导出失败，请重试');
+                    }
+                };
+                return {
+                    code,
+                    language,
+                    theme,
+                    padding,
+                    showWindowControls,
+                    showLineNumbers,
+                    showShadow,
+                    windowTitle,
+                    backgrounds,
+                    currentBg,
+                    snapshotCard,
+                    codeBlock,
+                    exportImage,
+                    changeTheme,
+                    refreshHighlight,
+                    themeBgColor
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>