fix dump page display nothing

app.py

@@ -6,6 +6,7 @@ from werkzeug.security import check_password_hash
 from PIL import Image, UnidentifiedImageError
 from watchdog.observers import Observer
 from watchdog.events import FileSystemEventHandler
+from os.path import realpath, join
 
 app = Flask(__name__)
 
@@ -16,8 +17,8 @@ with open('db/keys.json', 'r') as f:
 app.config['SECRET_KEY'] = config['key']
 socketio = SocketIO(app)
 
-app.config['UPLOAD_FOLDER'] = 'images'  # Folder to store images
+app.config['UPLOAD_FOLDER'] = '/home/kenny/workspace/Image_Gen_Server/output/expo_postprocessed'  # Folder to store images
-app.config['DUMP_FOLDER'] = 'dump_images'
+app.config['DUMP_FOLDER'] = '/home/kenny/workspace/ComfyUI-halloween/output'  # Folder to store dump images
 app.config['CACHE_FOLDER'] = 'cache'  # Folder to store cached resized images
 app.config['ALLOWED_EXTENSIONS'] = {'png', 'jpg', 'jpeg', 'gif'}
 
@@ -45,13 +46,12 @@ def resize_image(image_path, cache_path, size=(800, 450)):
         img.save(cache_path, format="JPEG")
 
 def create_cache():
-    images = os.listdir(app.config['UPLOAD_FOLDER'])
     cached_images = []
 
     if not os.path.exists(app.config['CACHE_FOLDER']):
         os.makedirs(app.config['CACHE_FOLDER'])
 
-    for image in images:
+    for image in os.listdir(app.config['UPLOAD_FOLDER']):
         image_path = os.path.join(app.config['UPLOAD_FOLDER'], image)
         cache_path = os.path.join(app.config['CACHE_FOLDER'], image)
 
@@ -61,6 +61,16 @@ def create_cache():
         if is_image_valid(image_path):
             cached_images.append(image)
 
+    for image in os.listdir(app.config['DUMP_FOLDER']):
+        image_path = os.path.join(app.config['DUMP_FOLDER'], image)
+        cache_path = os.path.join(app.config['CACHE_FOLDER'], image)
+
+        if not os.path.exists(cache_path) and is_image_valid(image_path):
+            resize_image(image_path, cache_path)
+
+        if is_image_valid(image_path):
+            cached_images.append(image)
+    
     return cached_images
 
 @app.route('/')
@@ -157,6 +167,7 @@ def dump():
     if not session.get('logged_in'):
         return redirect(url_for('login'))
     
+    cached_images = create_cache()
     dump_folder = app.config['DUMP_FOLDER'] # Folder to store dump images
     images = sorted(
         os.listdir(dump_folder),
@@ -164,6 +175,7 @@ def dump():
         reverse=True
     )
     valid_images = [img for img in images if is_image_valid(os.path.join(dump_folder, img))]
+    print(valid_images)
     return render_template('dump.html', images=valid_images)
 
 def emit_gallery_update():

templates/dump.html

@@ -11,12 +11,22 @@
         <a href="{{ url_for('dump') }}" class="button">🎃🎃🎃</a>
     </div>
     <h1>Pumpkin Gallery🎃</h1>
-    <div class="gallery-container">
+    <div class="gallery-container" style="flex-direction: row; flex-wrap: wrap;">
         {% for image in images %}
-            <a href="#" data-original="{{ url_for('uploaded_file', filename=image) }}" target="_blank">
+	<a href="{{ url_for('cached_file', filename=image) }}" data-original="{{ url_for('cached_file', filename=image) }}" target="_blank" style="flex: 1 0 25%;">
-                <img class="responsive-img" src="{{ url_for('cached_file', filename=image) }}" alt="{{ image }}">
+		    <img class="responsive-img loaded" src="{{ url_for('cached_file', filename=image) }}" alt="{{ image }}" style="max-width:33vw;">
             </a>
         {% endfor %}
     </div>
+    <script>
+	const images = document.querySelectorAll('.gallery-container a');
+	images.forEach(image => {
+	    image.addEventListener('click', (event) => {
+		event.preventDefault();
+		const original = image.getAttribute('data-original');
+		window.open(original, '_blank');
+	    });
+	});
+    </script>
 </body>
 </html>