Spaces:

duqing026
/

error-page-studio

Sleeping

App Files Files Community

duqing2026 commited on Jan 30

Commit

d2cc112

1 Parent(s): e501942

升级优化

Browse files

Files changed (3) hide show

app.py +52 -17
templates/export_theme.html +13 -10
templates/index.html +64 -9

app.py CHANGED Viewed

@@ -1,8 +1,27 @@
-from flask import Flask, render_template, request, send_file, make_response
 import io
 app = Flask(__name__)
 @app.route('/')
 def index():
     return render_template('index.html')
@@ -12,28 +31,44 @@ def preview():
     """
     Returns the HTML for the preview iframe.
     """
-    data = request.json
-    return render_template('export_theme.html', **data)
 @app.route('/download', methods=['POST'])
 def download():
     """
     Returns the HTML as a downloadable file.
     """
-    data = request.json
-    html_content = render_template('export_theme.html', **data)
-    # Create a file-like object
-    mem = io.BytesIO()
-    mem.write(html_content.encode('utf-8'))
-    mem.seek(0)
-    return send_file(
-        mem,
-        as_attachment=True,
-        download_name='404.html',
-        mimetype='text/html'
-    )
 if __name__ == '__main__':
     app.run(debug=True, port=7860, host='0.0.0.0')

+from flask import Flask, render_template, request, send_file
 import io
+import logging
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
 app = Flask(__name__)
+# Default configuration to prevent missing data errors
+DEFAULTS = {
+    'theme': 'modern',
+    'title': '404',
+    'message': 'Oops! The page you are looking for has vanished into the void.',
+    'buttonText': 'Back to Safety',
+    'buttonLink': '/',
+    'bgColor': '#ffffff',
+    'textColor': '#1f2937',
+    'accentColor': '#ef4444',
+    'illustration': 'ghost',
+    'showGame': False
+}
 @app.route('/')
 def index():
     return render_template('index.html')
     """
     Returns the HTML for the preview iframe.
     """
+    try:
+        # Get JSON data, defaulting to empty dict if None
+        data = request.get_json(silent=True) or {}
+        # Merge defaults with provided data (data overrides defaults)
+        context = {**DEFAULTS, **data}
+        return render_template('export_theme.html', **context)
+    except Exception as e:
+        logger.error(f"Preview error: {e}")
+        return f"Internal Server Error: {str(e)}", 500
 @app.route('/download', methods=['POST'])
 def download():
     """
     Returns the HTML as a downloadable file.
     """
+    try:
+        data = request.get_json(silent=True) or {}
+        context = {**DEFAULTS, **data}
+        html_content = render_template('export_theme.html', **context)
+        # Create a file-like object
+        mem = io.BytesIO()
+        mem.write(html_content.encode('utf-8'))
+        mem.seek(0)
+        return send_file(
+            mem,
+            as_attachment=True,
+            download_name='404.html',
+            mimetype='text/html'
+        )
+    except Exception as e:
+        logger.error(f"Download error: {e}")
+        return f"Internal Server Error: {str(e)}", 500
 if __name__ == '__main__':
+    # Use port 7860 for Hugging Face Spaces compatibility
     app.run(debug=True, port=7860, host='0.0.0.0')

templates/export_theme.html CHANGED Viewed

@@ -3,12 +3,12 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ title }}</title>
     <style>
         :root {
-            --bg-color: {{ bgColor }};
-            --text-color: {{ textColor }};
-            --accent-color: {{ accentColor }};
         }
         body {
@@ -150,13 +150,16 @@
                 <div class="ghost">💔</div>
             {% elif illustration == 'planet' %}
                 <div class="ghost">🪐</div>
             {% endif %}
         </div>
-        <h1>{{ title }}</h1>
-        <p>{{ message }}</p>
-        <a href="{{ buttonLink }}" class="btn">{{ buttonText }}</a>
         {% if showGame %}
         <div class="game-toggle" onclick="toggleGame()">Play Snake while you wait?</div>
@@ -243,17 +246,17 @@
                 }
                 // Draw
-                ctx.fillStyle = '{{ bgColor }}';
                 ctx.fillRect(0, 0, canvas.width, canvas.height);
                 // Snake
-                ctx.fillStyle = '{{ accentColor }}';
                 for (let i = 0; i < snake.length; i++) {
                     ctx.fillRect(snake[i].x * gridSize, snake[i].y * gridSize, gridSize - 2, gridSize - 2);
                 }
                 // Food
-                ctx.fillStyle = '{{ textColor }}';
                 ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize - 2, gridSize - 2);
             }

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ title | default('404') }}</title>
     <style>
         :root {
+            --bg-color: {{ bgColor | default('#ffffff') }};
+            --text-color: {{ textColor | default('#1f2937') }};
+            --accent-color: {{ accentColor | default('#ef4444') }};
         }
         body {
                 <div class="ghost">💔</div>
             {% elif illustration == 'planet' %}
                 <div class="ghost">🪐</div>
+            {% else %}
+                 <!-- Default fallback if illustration matches nothing -->
+                 <div class="ghost">👻</div>
             {% endif %}
         </div>
+        <h1>{{ title | default('404') }}</h1>
+        <p>{{ message | default('Page not found') }}</p>
+        <a href="{{ buttonLink | default('/') }}" class="btn">{{ buttonText | default('Go Home') }}</a>
         {% if showGame %}
         <div class="game-toggle" onclick="toggleGame()">Play Snake while you wait?</div>
                 }
                 // Draw
+                ctx.fillStyle = '{{ bgColor | default("#ffffff") }}';
                 ctx.fillRect(0, 0, canvas.width, canvas.height);
                 // Snake
+                ctx.fillStyle = '{{ accentColor | default("#ef4444") }}';
                 for (let i = 0; i < snake.length; i++) {
                     ctx.fillRect(snake[i].x * gridSize, snake[i].y * gridSize, gridSize - 2, gridSize - 2);
                 }
                 // Food
+                ctx.fillStyle = '{{ textColor | default("#1f2937") }}';
                 ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize - 2, gridSize - 2);
             }

templates/index.html CHANGED Viewed

@@ -25,18 +25,44 @@
             height: 200%;
             cursor: pointer;
         }
     </style>
 </head>
 <body class="bg-gray-50 text-gray-800 h-screen overflow-hidden">
     <div id="app" v-cloak class="flex h-full">
         <!-- Sidebar / Config -->
-        <div class="w-1/3 min-w-[350px] bg-white border-r border-gray-200 flex flex-col h-full z-10 shadow-lg">
             <div class="p-5 border-b border-gray-100 flex items-center justify-between">
-                <h1 class="text-xl font-bold text-gray-900"><i class="fas fa-exclamation-triangle text-red-500 mr-2"></i>Error Page Studio</h1>
                 <span class="text-xs bg-red-100 text-red-600 px-2 py-1 rounded-full">Beta</span>
             </div>
             <div class="flex-1 overflow-y-auto p-5 space-y-6">
                 <!-- Theme Selection -->
                 <div>
                     <label class="block text-sm font-medium text-gray-700 mb-3">Theme Style</label>
@@ -111,7 +137,7 @@
                             :key="ill.id"
                             @click="config.illustration = ill.id"
                             :class="{'ring-2 ring-red-500 bg-red-50': config.illustration === ill.id}"
-                            class="p-2 rounded-lg border border-gray-200 text-2xl flex items-center justify-center hover:bg-gray-50"
                         >
                             {{ ill.icon }}
                         </button>
@@ -136,8 +162,12 @@
                 <button
                     @click="download"
                     class="w-full flex items-center justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-all"
                 >
-                    <i class="fas fa-download mr-2"></i> Download HTML
                 </button>
             </div>
         </div>
@@ -145,8 +175,8 @@
         <!-- Preview Area -->
         <div class="flex-1 bg-gray-100 flex flex-col relative overflow-hidden">
             <div class="absolute top-4 right-4 z-10 flex space-x-2 bg-white rounded-lg shadow p-1">
-                <button @click="viewMode = 'desktop'" :class="{'text-red-500 bg-red-50': viewMode === 'desktop'}" class="p-2 rounded hover:bg-gray-50 transition-colors"><i class="fas fa-desktop"></i></button>
-                <button @click="viewMode = 'mobile'" :class="{'text-red-500 bg-red-50': viewMode === 'mobile'}" class="p-2 rounded hover:bg-gray-50 transition-colors"><i class="fas fa-mobile-alt"></i></button>
             </div>
             <div class="flex-1 flex items-center justify-center p-8 overflow-hidden">
@@ -163,13 +193,14 @@
                     <iframe id="preview-frame" class="w-full h-full border-none"></iframe>
                     <!-- Loading Overlay -->
-                    <div v-if="loading" class="absolute inset-0 bg-white/50 flex items-center justify-center backdrop-blur-sm">
                         <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-red-500"></div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <script>
         const { createApp, ref, watch, onMounted } = Vue;
@@ -178,6 +209,9 @@
             setup() {
                 const viewMode = ref('desktop');
                 const loading = ref(false);
                 const config = ref({
                     theme: 'modern',
                     title: '404',
@@ -202,19 +236,28 @@
                 const updatePreview = async () => {
                     loading.value = true;
                     try {
                         const response = await fetch('/preview', {
                             method: 'POST',
                             headers: { 'Content-Type': 'application/json' },
                             body: JSON.stringify(config.value)
                         });
                         const html = await response.text();
                         const frame = document.getElementById('preview-frame');
                         if (frame) {
                             frame.srcdoc = html;
                         }
                     } catch (error) {
                         console.error('Preview error:', error);
                     } finally {
                         loading.value = false;
                     }
@@ -226,12 +269,20 @@
                 };
                 const download = async () => {
                     try {
                         const response = await fetch('/download', {
                             method: 'POST',
                             headers: { 'Content-Type': 'application/json' },
                             body: JSON.stringify(config.value)
                         });
                         const blob = await response.blob();
                         const url = window.URL.createObjectURL(blob);
                         const a = document.createElement('a');
@@ -242,7 +293,10 @@
                         document.body.removeChild(a);
                     } catch (error) {
                         console.error('Download error:', error);
-                        alert('Download failed. Please try again.');
                     }
                 };
@@ -257,7 +311,8 @@
                     viewMode,
                     illustrations,
                     loading,
-                    download
                 };
             }
         }).mount('#app');

             height: 200%;
             cursor: pointer;
         }
+        /* Custom scrollbar for sidebar */
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #d1d5db;
+            border-radius: 3px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #9ca3af;
+        }
     </style>
 </head>
 <body class="bg-gray-50 text-gray-800 h-screen overflow-hidden">
+    {% raw %}
     <div id="app" v-cloak class="flex h-full">
         <!-- Sidebar / Config -->
+        <div class="w-1/3 min-w-[320px] max-w-[450px] bg-white border-r border-gray-200 flex flex-col h-full z-10 shadow-lg transition-all duration-300">
             <div class="p-5 border-b border-gray-100 flex items-center justify-between">
+                <h1 class="text-xl font-bold text-gray-900 flex items-center">
+                    <i class="fas fa-exclamation-triangle text-red-500 mr-2"></i>
+                    <span>Error Page Studio</span>
+                </h1>
                 <span class="text-xs bg-red-100 text-red-600 px-2 py-1 rounded-full">Beta</span>
             </div>
             <div class="flex-1 overflow-y-auto p-5 space-y-6">
+                <!-- Error Message Display -->
+                <div v-if="errorMessage" class="bg-red-50 text-red-700 p-3 rounded-md text-sm mb-4 border border-red-200 flex items-start">
+                    <i class="fas fa-times-circle mt-0.5 mr-2"></i>
+                    <div class="flex-1">{{ errorMessage }}</div>
+                    <button @click="errorMessage = ''" class="text-red-500 hover:text-red-700"><i class="fas fa-times"></i></button>
+                </div>
                 <!-- Theme Selection -->
                 <div>
                     <label class="block text-sm font-medium text-gray-700 mb-3">Theme Style</label>
                             :key="ill.id"
                             @click="config.illustration = ill.id"
                             :class="{'ring-2 ring-red-500 bg-red-50': config.illustration === ill.id}"
+                            class="p-2 rounded-lg border border-gray-200 text-2xl flex items-center justify-center hover:bg-gray-50 transition-colors"
                         >
                             {{ ill.icon }}
                         </button>
                 <button
                     @click="download"
                     class="w-full flex items-center justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-all"
+                    :disabled="loading"
+                    :class="{'opacity-75 cursor-not-allowed': loading}"
                 >
+                    <i class="fas fa-download mr-2"></i>
+                    <span v-if="loading">Processing...</span>
+                    <span v-else>Download HTML</span>
                 </button>
             </div>
         </div>
         <!-- Preview Area -->
         <div class="flex-1 bg-gray-100 flex flex-col relative overflow-hidden">
             <div class="absolute top-4 right-4 z-10 flex space-x-2 bg-white rounded-lg shadow p-1">
+                <button @click="viewMode = 'desktop'" :class="{'text-red-500 bg-red-50': viewMode === 'desktop'}" class="p-2 rounded hover:bg-gray-50 transition-colors" title="Desktop View"><i class="fas fa-desktop"></i></button>
+                <button @click="viewMode = 'mobile'" :class="{'text-red-500 bg-red-50': viewMode === 'mobile'}" class="p-2 rounded hover:bg-gray-50 transition-colors" title="Mobile View"><i class="fas fa-mobile-alt"></i></button>
             </div>
             <div class="flex-1 flex items-center justify-center p-8 overflow-hidden">
                     <iframe id="preview-frame" class="w-full h-full border-none"></iframe>
                     <!-- Loading Overlay -->
+                    <div v-if="loading" class="absolute inset-0 bg-white/50 flex items-center justify-center backdrop-blur-sm z-20">
                         <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-red-500"></div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
+    {% endraw %}
     <script>
         const { createApp, ref, watch, onMounted } = Vue;
             setup() {
                 const viewMode = ref('desktop');
                 const loading = ref(false);
+                const errorMessage = ref('');
+                // Initialize with safe defaults
                 const config = ref({
                     theme: 'modern',
                     title: '404',
                 const updatePreview = async () => {
                     loading.value = true;
+                    errorMessage.value = '';
                     try {
                         const response = await fetch('/preview', {
                             method: 'POST',
                             headers: { 'Content-Type': 'application/json' },
                             body: JSON.stringify(config.value)
                         });
                         const html = await response.text();
+                        if (!response.ok) {
+                            throw new Error(html || 'Server returned an error');
+                        }
                         const frame = document.getElementById('preview-frame');
                         if (frame) {
                             frame.srcdoc = html;
                         }
                     } catch (error) {
                         console.error('Preview error:', error);
+                        errorMessage.value = 'Preview failed: ' + error.message;
                     } finally {
                         loading.value = false;
                     }
                 };
                 const download = async () => {
+                    loading.value = true;
+                    errorMessage.value = '';
                     try {
                         const response = await fetch('/download', {
                             method: 'POST',
                             headers: { 'Content-Type': 'application/json' },
                             body: JSON.stringify(config.value)
                         });
+                        if (!response.ok) {
+                            const errText = await response.text();
+                            throw new Error(errText || 'Download failed');
+                        }
                         const blob = await response.blob();
                         const url = window.URL.createObjectURL(blob);
                         const a = document.createElement('a');
                         document.body.removeChild(a);
                     } catch (error) {
                         console.error('Download error:', error);
+                        errorMessage.value = 'Download failed: ' + error.message;
+                        alert('Download failed. Please check the console or try again.');
+                    } finally {
+                        loading.value = false;
                     }
                 };
                     viewMode,
                     illustrations,
                     loading,
+                    download,
+                    errorMessage
                 };
             }
         }).mount('#app');