Spaces:

duqing26
/

stream-schedule-maker

Sleeping

App Files Files Community

Trae Assistant commited on Jan 28

Commit

c038eac

1 Parent(s): 33f7d9a

Initial commit of Stream Schedule Maker

Browse files

Files changed (5) hide show

Dockerfile +15 -0
README.md +60 -4
app.py +15 -0
requirements.txt +2 -0
templates/index.html +329 -0

Dockerfile ADDED Viewed

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

+FROM python:3.9-slim
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . .
+# Create a user to avoid running as root (good practice for HF Spaces)
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md CHANGED Viewed

@@ -1,10 +1,66 @@
 ---
 title: Stream Schedule Maker
-emoji: 📉
-colorFrom: yellow
-colorTo: yellow
 sdk: docker
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
 title: Stream Schedule Maker
+emoji: 📅
+colorFrom: indigo
+colorTo: purple
 sdk: docker
 pinned: false
+app_port: 7860
 ---
+# 直播日程表生成器 (Stream Schedule Maker)
+这是一个专为内容创作者（主播、UP主、博主）设计的**直播日程表/周计划生成工具**。
+👉 **在线体验**: [Hugging Face Space](https://huggingface.co/spaces/duqing26/stream-schedule-maker)
+## ✨ 核心功能
+*   **可视化编辑**: 左侧面板实时编辑，右侧即时预览。
+*   **多主题支持**:
+    *   ⚪ **现代极简 (Modern)**: 清爽干净，适合大多数场景。
+    *   ⚫ **黑金科技 (Dark)**: 酷炫深色模式，适合游戏/科技博主。
+    *   🌸 **元气粉嫩 (Cute)**: 可爱风格，适合生活/二次元博主。
+    *   🤖 **赛博朋克 (Cyber)**: 霓虹风格，个性十足。
+*   **高清导出**: 一键生成高清 PNG 图片，直接发布到 Bilibili 动态、朋友圈或 Twitter。
+*   **隐私安全**: 所有生成过程在浏览器端（Canvas）完成，数据不上传服务器。
+## 🛠️ 技术栈
+*   **Frontend**: Vue 3 + Tailwind CSS + HTML5 Canvas
+*   **Backend**: Flask (用于静态资源托管)
+*   **Deployment**: Docker
+## 🚀 快速开始
+### 本地运行
+1. 克隆项目:
+   ```bash
+   git clone https://github.com/duqing26/stream-schedule-maker.git
+   cd stream-schedule-maker
+   ```
+2. 安装依赖:
+   ```bash
+   pip install -r requirements.txt
+   ```
+3. 运行:
+   ```bash
+   python app.py
+   ```
+4. 访问 `http://localhost:7860`
+### Docker 运行
+```bash
+docker build -t stream-schedule-maker .
+docker run -p 7860:7860 stream-schedule-maker
+```
+## 📝 关于
+本项目由 [Trae AI](https://trae.ai) 辅助开发。
+旨在帮助创作者更高效地管理和预告自己的内容计划。

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,329 @@

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>直播日程表生成器 | Stream Schedule Maker</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@400;500;700&display=swap');
+        body {
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        .preview-container {
+            background-image: repeating-linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%, #f0f0f0), repeating-linear-gradient(45deg, #f0f0f0 25%, #ffffff 25%, #ffffff 75%, #f0f0f0 75%, #f0f0f0);
+            background-position: 0 0, 10px 10px;
+            background-size: 20px 20px;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 text-gray-800 h-screen overflow-hidden flex flex-col">
+    <div id="app" class="flex-1 flex flex-col h-full">
+        <!-- Header -->
+        <header class="bg-white border-b border-gray-200 px-6 py-4 flex justify-between items-center shadow-sm z-10">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 bg-indigo-600 rounded-lg flex items-center justify-center text-white text-xl">
+                    <i class="fa-solid fa-calendar-week"></i>
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold text-gray-900">直播日程表生成器</h1>
+                    <p class="text-xs text-gray-500">Stream Schedule Maker</p>
+                </div>
+            </div>
+            <div class="flex gap-3">
+                <a href="https://github.com/duqing26" target="_blank" class="text-gray-500 hover:text-gray-900 transition">
+                    <i class="fa-brands fa-github text-xl"></i>
+                </a>
+            </div>
+        </header>
+        <!-- Main Content -->
+        <main class="flex-1 flex overflow-hidden">
+            <!-- Sidebar: Editor -->
+            <div class="w-1/3 bg-white border-r border-gray-200 flex flex-col h-full shadow-lg z-0">
+                <div class="p-4 border-b border-gray-100">
+                    <h2 class="font-bold text-gray-700 mb-4 flex items-center gap-2">
+                        <i class="fa-solid fa-sliders"></i> 全局设置
+                    </h2>
+                    <div class="grid grid-cols-2 gap-4">
+                        <div>
+                            <label class="block text-xs font-medium text-gray-500 mb-1">主标题</label>
+                            <input v-model="config.title" type="text" class="w-full px-3 py-2 border rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 outline-none transition">
+                        </div>
+                        <div>
+                            <label class="block text-xs font-medium text-gray-500 mb-1">日期/副标题</label>
+                            <input v-model="config.subtitle" type="text" class="w-full px-3 py-2 border rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 outline-none transition">
+                        </div>
+                        <div>
+                            <label class="block text-xs font-medium text-gray-500 mb-1">主题风格</label>
+                            <select v-model="config.theme" class="w-full px-3 py-2 border rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 outline-none transition">
+                                <option value="modern">现代极简 (Modern)</option>
+                                <option value="dark">黑金科技 (Dark)</option>
+                                <option value="cute">元气粉嫩 (Cute)</option>
+                                <option value="cyber">赛博朋克 (Cyber)</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-xs font-medium text-gray-500 mb-1">作者/主播名</label>
+                            <input v-model="config.author" type="text" class="w-full px-3 py-2 border rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 outline-none transition">
+                        </div>
+                    </div>
+                </div>
+                <div class="flex-1 overflow-y-auto p-4 custom-scrollbar">
+                    <h2 class="font-bold text-gray-700 mb-4 flex items-center gap-2">
+                        <i class="fa-solid fa-list-check"></i> 日程安排
+                    </h2>
+                    <div class="space-y-4">
+                        <div v-for="(day, index) in days" :key="index" class="bg-gray-50 p-3 rounded-lg border border-gray-200 hover:border-indigo-300 transition group">
+                            <div class="flex justify-between items-center mb-2">
+                                <span class="font-bold text-sm text-gray-700 bg-white px-2 py-0.5 rounded shadow-sm">{{ day.name }}</span>
+                                <label class="flex items-center gap-2 text-xs text-gray-500 cursor-pointer">
+                                    <input type="checkbox" v-model="day.active" class="rounded text-indigo-600 focus:ring-indigo-500">
+                                    启用
+                                </label>
+                            </div>
+                            <div v-if="day.active" class="space-y-2 animate-fade-in">
+                                <div class="flex gap-2">
+                                    <input v-model="day.time" placeholder="时间 (e.g. 20:00)" class="w-1/3 px-2 py-1.5 border rounded text-sm focus:border-indigo-500 outline-none">
+                                    <input v-model="day.game" placeholder="内容/游戏 (e.g. 杂谈)" class="w-2/3 px-2 py-1.5 border rounded text-sm focus:border-indigo-500 outline-none">
+                                </div>
+                                <textarea v-model="day.desc" placeholder="详细描述/备注" rows="2" class="w-full px-2 py-1.5 border rounded text-sm focus:border-indigo-500 outline-none resize-none"></textarea>
+                            </div>
+                            <div v-else class="text-xs text-gray-400 italic text-center py-2">
+                                (该日无直播计划)
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Main: Preview -->
+            <div class="flex-1 bg-gray-100 flex flex-col relative">
+                <!-- Toolbar -->
+                <div class="absolute top-4 right-4 z-20 flex gap-2">
+                    <button @click="downloadImage" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg shadow-lg flex items-center gap-2 transition transform hover:scale-105">
+                        <i class="fa-solid fa-download"></i> 下载 PNG
+                    </button>
+                </div>
+                <!-- Canvas Container -->
+                <div class="flex-1 overflow-auto flex items-center justify-center p-8 preview-container" id="canvas-wrapper">
+                    <canvas ref="canvas" class="shadow-2xl rounded-sm max-h-full max-w-full"></canvas>
+                </div>
+            </div>
+        </main>
+    </div>
+    <script>
+        const { createApp, ref, reactive, onMounted, watch } = Vue;
+        createApp({
+            setup() {
+                const canvas = ref(null);
+                // Configuration
+                const config = reactive({
+                    title: 'WEEKLY SCHEDULE',
+                    subtitle: '2023.10.01 - 10.07',
+                    theme: 'modern', // modern, dark, cute, cyber
+                    author: '@你的名字',
+                });
+                // Days Data
+                const days = reactive([
+                    { name: 'MON', label: '周一', active: true, time: '20:00', game: '杂谈', desc: '聊聊最近发生的趣事' },
+                    { name: 'TUE', label: '周二', active: false, time: '', game: '休息', desc: '' },
+                    { name: 'WED', label: '周三', active: true, time: '21:00', game: '恐怖游戏', desc: '不要被吓到哦' },
+                    { name: 'THU', label: '周四', active: false, time: '', game: '休息', desc: '' },
+                    { name: 'FRI', label: '周五', active: true, time: '20:00', game: '歌回', desc: '点歌环节' },
+                    { name: 'SAT', label: '周六', active: true, time: '14:00', game: '耐久直播', desc: '不通关不下播！' },
+                    { name: 'SUN', label: '周日', active: true, time: '19:00', game: '总结', desc: '本周总结 & 下周预告' },
+                ]);
+                // Theme Definitions
+                const themes = {
+                    modern: {
+                        bg: '#ffffff',
+                        text: '#333333',
+                        accent: '#6366f1', // Indigo
+                        secondary: '#9ca3af',
+                        cardBg: '#f9fafb',
+                        cardBorder: '#e5e7eb',
+                        font: 'Noto Sans SC'
+                    },
+                    dark: {
+                        bg: '#111827',
+                        text: '#f3f4f6',
+                        accent: '#fbbf24', // Amber
+                        secondary: '#9ca3af',
+                        cardBg: '#1f2937',
+                        cardBorder: '#374151',
+                        font: 'Noto Sans SC'
+                    },
+                    cute: {
+                        bg: '#fff1f2',
+                        text: '#881337',
+                        accent: '#fb7185', // Rose
+                        secondary: '#fda4af',
+                        cardBg: '#ffffb1',
+                        cardBorder: '#fecdd3',
+                        font: 'Noto Sans SC'
+                    },
+                    cyber: {
+                        bg: '#09090b',
+                        text: '#00f2ff',
+                        accent: '#ff0055', // Neon Pink
+                        secondary: '#71717a',
+                        cardBg: '#18181b',
+                        cardBorder: '#27272a',
+                        font: 'Noto Sans SC'
+                    }
+                };
+                // Draw Function
+                const draw = () => {
+                    const ctx = canvas.value.getContext('2d');
+                    const width = 1200;
+                    const height = 1600; // Vertical aspect ratio fits mobile better
+                    // Set canvas resolution
+                    canvas.value.width = width;
+                    canvas.value.height = height;
+                    const theme = themes[config.theme];
+                    // 1. Background
+                    ctx.fillStyle = theme.bg;
+                    ctx.fillRect(0, 0, width, height);
+                    // Optional: Draw grid or pattern based on theme
+                    if (config.theme === 'cyber') {
+                         ctx.strokeStyle = '#27272a';
+                         ctx.lineWidth = 2;
+                         for(let i=0; i<width; i+=50) { ctx.beginPath(); ctx.moveTo(i,0); ctx.lineTo(i,height); ctx.stroke(); }
+                         for(let i=0; i<height; i+=50) { ctx.beginPath(); ctx.moveTo(0,i); ctx.lineTo(width,i); ctx.stroke(); }
+                    }
+                    // 2. Header
+                    ctx.textAlign = 'center';
+                    // Title
+                    ctx.fillStyle = theme.text;
+                    ctx.font = `bold 80px ${theme.font}`;
+                    ctx.fillText(config.title, width / 2, 120);
+                    // Subtitle
+                    ctx.fillStyle = theme.accent;
+                    ctx.font = `bold 40px ${theme.font}`;
+                    ctx.fillText(config.subtitle, width / 2, 190);
+                    // Author (Top Right or Bottom)
+                    // Let's put it top left for branding
+                    ctx.textAlign = 'left';
+                    ctx.font = `30px ${theme.font}`;
+                    ctx.fillStyle = theme.secondary;
+                    ctx.fillText(config.author, 50, 60);
+                    // 3. Days Grid
+                    const startY = 250;
+                    const gap = 30;
+                    const cardHeight = (height - startY - 100) / 7 - gap; // Distribute vertically
+                    const cardWidth = width - 100; // Full width with padding
+                    const cardX = 50;
+                    days.forEach((day, index) => {
+                        const y = startY + index * (cardHeight + gap);
+                        // Card Background
+                        ctx.fillStyle = theme.cardBg;
+                        // Rounded rect simulation
+                        ctx.fillRect(cardX, y, cardWidth, cardHeight);
+                        // Border
+                        ctx.strokeStyle = theme.cardBorder;
+                        ctx.lineWidth = 4;
+                        ctx.strokeRect(cardX, y, cardWidth, cardHeight);
+                        // Day Label Box (Left)
+                        const labelWidth = 180;
+                        ctx.fillStyle = theme.accent;
+                        ctx.fillRect(cardX, y, labelWidth, cardHeight);
+                        // Day Text
+                        ctx.fillStyle = (config.theme === 'dark' || config.theme === 'cyber') ? '#000' : '#fff';
+                        ctx.textAlign = 'center';
+                        ctx.textBaseline = 'middle';
+                        ctx.font = `bold 40px ${theme.font}`;
+                        ctx.fillText(day.name, cardX + labelWidth/2, y + cardHeight/2 - 15);
+                        ctx.font = `24px ${theme.font}`;
+                        ctx.fillText(day.label, cardX + labelWidth/2, y + cardHeight/2 + 25);
+                        // Content
+                        ctx.textAlign = 'left';
+                        if (day.active) {
+                            // Time
+                            ctx.fillStyle = theme.accent;
+                            ctx.font = `bold 36px ${theme.font}`;
+                            ctx.fillText(day.time, cardX + labelWidth + 40, y + 50);
+                            // Game/Content Title
+                            ctx.fillStyle = theme.text;
+                            ctx.font = `bold 40px ${theme.font}`;
+                            ctx.fillText(day.game, cardX + labelWidth + 180, y + 50);
+                            // Description
+                            ctx.fillStyle = theme.secondary;
+                            ctx.font = `30px ${theme.font}`;
+                            ctx.fillText(day.desc, cardX + labelWidth + 40, y + 100);
+                        } else {
+                            // Rest Day
+                            ctx.fillStyle = theme.secondary;
+                            ctx.font = `italic 40px ${theme.font}`;
+                            ctx.fillText("OFF / 休息", cardX + labelWidth + 40, y + cardHeight/2);
+                        }
+                    });
+                    // 4. Footer
+                    ctx.textAlign = 'center';
+                    ctx.fillStyle = theme.secondary;
+                    ctx.font = `24px ${theme.font}`;
+                    ctx.fillText("Generated by Stream Schedule Maker", width/2, height - 30);
+                };
+                // Watchers
+                watch([config, days], () => {
+                    // Use nextTick equivalent or small timeout to ensure font loaded (simplified)
+                    setTimeout(draw, 50);
+                }, { deep: true });
+                onMounted(() => {
+                    // Load fonts first then draw
+                    document.fonts.ready.then(() => {
+                        draw();
+                    });
+                });
+                const downloadImage = () => {
+                    const link = document.createElement('a');
+                    link.download = `schedule-${config.subtitle}.png`;
+                    link.href = canvas.value.toDataURL('image/png');
+                    link.click();
+                };
+                return {
+                    config,
+                    days,
+                    canvas,
+                    downloadImage
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>