Update: Added default gradient background, fixed UI layout, and improved demo data

.gitattributes

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

app.py

@@ -5,7 +5,10 @@ app = Flask(__name__, static_folder='static', template_folder='templates')
 
 @app.route('/')
 def index():
-    return render_template('index.html')
+    try:
+        return render_template('index.html')
+    except Exception as e:
+        return jsonify({"error": str(e), "message": "Template rendering failed. Please check server logs."}), 500
 
 @app.route('/health')
 def health():
@@ -15,6 +18,14 @@ def health():
 def serve_static(path):
     return send_from_directory('static', path)
 
+@app.errorhandler(500)
+def internal_error(error):
+    return jsonify({"error": "Internal Server Error", "details": str(error)}), 500
+
+@app.errorhandler(404)
+def not_found(error):
+    return jsonify({"error": "Not Found", "path": str(error)}), 404
+
 if __name__ == '__main__':
     # Use 7860 for Hugging Face Spaces
     port = int(os.environ.get('PORT', 7860))

setup_assets.py

@@ -0,0 +1,39 @@
+from PIL import Image, ImageDraw
+
+def create_gradient_image(width, height, start_color, end_color):
+    base = Image.new('RGB', (width, height), start_color)
+    top = Image.new('RGB', (width, height), end_color)
+    mask = Image.new('L', (width, height))
+    mask_data = []
+    for y in range(height):
+        for x in range(width):
+            mask_data.append(int(255 * (y / height)))
+    mask.putdata(mask_data)
+    base.paste(top, (0, 0), mask)
+    return base
+
+def main():
+    # Create a nice gradient background (Purple to Blue/Pink)
+    # Dimensions: Enough for 4 slides of 3:4 (1080x1350)
+    # 4 * 1080 = 4320 width
+    # But user might want it stretched, so let's make a generic 16:9 or similar high res
+    # Let's make a 4000x3000 image to be safe
+    
+    # Soft mesh gradient style (simulated with linear gradient for simplicity)
+    # Start: #e0c3fc (Light Purple)
+    # End: #8ec5fc (Light Blue)
+    
+    img = create_gradient_image(2000, 1500, (224, 195, 252), (142, 197, 252))
+    
+    # Add some "noise" or pattern to make it look professional? 
+    # Let's keep it simple gradient for now, clean and modern.
+    
+    import os
+    if not os.path.exists('static'):
+        os.makedirs('static')
+        
+    img.save('static/default_bg.png')
+    print("Created static/default_bg.png")
+
+if __name__ == "__main__":
+    main()

templates/index.html

@@ -172,7 +172,7 @@
                             </button>
                             <button @click="addNumbering" class="col-span-2 flex items-center justify-center gap-2 p-2 bg-indigo-50 border border-indigo-100 rounded-lg hover:bg-indigo-100 text-indigo-700 transition">
                                 <span class="text-xs font-bold">#</span>
-                                <span class="text-xs font-medium">自动页码 (1/{{slideCount}})</span>
+                                <span class="text-xs font-medium">自动页码 (1/[[slideCount]])</span>
                             </button>
                         </div>
                     </section>
@@ -210,7 +210,7 @@
                                     <label class="text-[10px] text-gray-400 mb-1 block">文字颜色</label>
                                     <div class="flex items-center gap-2 border rounded p-1 bg-white">
                                         <input type="color" v-model="selectedElement.color" class="w-6 h-6 border-none rounded cursor-pointer">
-                                        <span class="text-xs text-gray-500">{{selectedElement.color}}</span>
+                                        <span class="text-xs text-gray-500">[[selectedElement.color]]</span>
                                     </div>
                                 </div>
                                 <div>
@@ -283,7 +283,7 @@
                          <!-- Page Labels -->
                          <div class="absolute -top-6 left-0 w-full flex text-xs text-gray-500 font-mono">
                              <div v-for="n in slideCount" :key="n" class="flex-1 text-center relative">
-                                 <span class="bg-gray-200 px-2 py-0.5 rounded-full">Page {{ n }}</span>
+                                 <span class="bg-gray-200 px-2 py-0.5 rounded-full">Page [[ n ]]</span>
                                  <!-- Vertical Dashed Line Marker -->
                                  <div class="absolute top-6 bottom-[-600px] right-0 border-r border-dashed border-gray-400 opacity-30 h-[1000px] pointer-events-none" v-if="n < slideCount"></div>
                              </div>
@@ -325,7 +325,7 @@
                     <div class="flex gap-4 mx-auto w-fit">
                         <div v-for="(img, idx) in previewImages" :key="idx" class="relative group shadow-lg">
                             <img :src="img" class="h-[500px] object-contain bg-white">
-                            <span class="absolute bottom-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded">{{idx+1}}</span>
+                            <span class="absolute bottom-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded">[[idx+1]]</span>
                         </div>
                     </div>
                 </div>
@@ -340,7 +340,7 @@
         <div v-if="isProcessing" class="fixed inset-0 z-[60] flex flex-col items-center justify-center bg-white/80 backdrop-blur-md">
             <div class="loader mb-4 border-t-red-600 w-12 h-12 border-4"></div>
             <p class="text-gray-800 font-bold text-lg animate-pulse">正在高清渲染切片...</p>
-            <p class="text-gray-500 text-sm mt-2">Generating {{ slideCount }} slides at {{ aspectRatio }}</p>
+            <p class="text-gray-500 text-sm mt-2">Generating [[ slideCount ]] slides at [[ aspectRatio ]]</p>
         </div>
     </div>
 
@@ -348,6 +348,7 @@
         const { createApp, ref, computed, onMounted } = Vue;
 
         createApp({
+            delimiters: ['[[', ']]'],
             setup() {
                 // State
                 const slideCount = ref(4);
@@ -390,7 +391,7 @@
                         y: BASE_HEIGHT * 0.4,
                         fontSize: 64,
                         fontWeight: 900,
-                        color: '#1f2937',
+                        color: '#ffffff',
                         fontFamily: "'Noto Sans SC', sans-serif",
                         textAlign: 'center',
                         hasBg: false,
@@ -407,12 +408,12 @@
                         y: BASE_HEIGHT * 0.55,
                         fontSize: 24,
                         fontWeight: 400,
-                        color: '#ef4444',
+                        color: '#ffffff',
                         fontFamily: "'ZCOOL KuaiLe', cursive",
                         textAlign: 'center',
                         hasBg: true,
-                        bgColor: '#fee2e2',
-                        hasShadow: false,
+                        bgColor: 'rgba(255,255,255,0.2)',
+                        hasShadow: true,
                         isBold: false
                     });