feat: enhance gallery template with infinite scroll and improved video/image displays
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
+222
-145
@@ -1,159 +1,236 @@
|
|||||||
{% extends "base.html" %} {% block title %}My Gallery{% endblock %} {% block
|
{% extends "base.html" %} {% block title %}My Gallery{% endblock %} {% block
|
||||||
content %}
|
content %}
|
||||||
<div class="container mx-auto px-4 py-8">
|
<div
|
||||||
<h1 class="text-3xl font-bold mb-6">My Gallery</h1>
|
class="container mx-auto px-4 py-8"
|
||||||
|
data-current-page="1"
|
||||||
|
data-per-page="12"
|
||||||
|
>
|
||||||
|
<div class="container mx-auto px-4 py-8">
|
||||||
|
<h1 class="text-3xl font-bold mb-6">My Gallery</h1>
|
||||||
|
|
||||||
<!-- Pending Creations -->
|
<!-- Pending Creations -->
|
||||||
{% if pending_videos %}
|
{% if pending_videos %}
|
||||||
<div class="mb-12">
|
<div class="mb-12">
|
||||||
<h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
|
<h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
|
||||||
Pending Creations
|
Pending Creations
|
||||||
</h2>
|
</h2>
|
||||||
<div
|
<div
|
||||||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
|
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
|
||||||
>
|
|
||||||
{% for video in pending_videos %}
|
|
||||||
<a
|
|
||||||
href="{{ url_for('video_detail', video_id=video.id) }}"
|
|
||||||
class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
|
|
||||||
>
|
>
|
||||||
<div class="p-4">
|
{% for video in pending_videos %}
|
||||||
<p class="font-bold text-lg truncate">{{ video.prompt }}</p>
|
<a
|
||||||
<p class="text-sm text-gray-400">
|
href="{{ url_for('video_detail', video_id=video.id) }}"
|
||||||
Video Job Status:
|
class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
|
||||||
<span class="font-semibold text-yellow-400"
|
>
|
||||||
>{{ video.status }}</span
|
<div class="p-4">
|
||||||
|
<p class="font-bold text-lg truncate">{{ video.prompt }}</p>
|
||||||
|
<p class="text-sm text-gray-400">
|
||||||
|
Video Job Status:
|
||||||
|
<span class="font-semibold text-yellow-400"
|
||||||
|
>{{ video.status }}</span
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
<p class="text-xs text-gray-500 mt-2">
|
||||||
|
Started: {{ video.created_at | fromisoformat | humantime }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<!-- Generated Images -->
|
||||||
|
<div class="mb-12">
|
||||||
|
<h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
|
||||||
|
Generated Images
|
||||||
|
</h2>
|
||||||
|
{% if generated_images %}
|
||||||
|
<div
|
||||||
|
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
|
||||||
|
>
|
||||||
|
{% for image in generated_images %}
|
||||||
|
<a
|
||||||
|
href="{{ url_for('image_detail', image_id=image.id) }}"
|
||||||
|
class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="{{ image.image_data }}"
|
||||||
|
alt="{{ image.prompt }}"
|
||||||
|
class="w-full h-48 object-cover"
|
||||||
|
/>
|
||||||
|
<div class="p-4">
|
||||||
|
<p class="font-bold text-sm truncate">{{ image.prompt }}</p>
|
||||||
|
<p class="text-xs text-gray-400 mt-1">
|
||||||
|
Image ID: {{ image.id[:8] }}...
|
||||||
|
</p>
|
||||||
|
<p class="text-xs text-gray-500 mt-1">
|
||||||
|
{{ image.created_at | fromisoformat | humantime }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<p class="text-gray-400">
|
||||||
|
You haven't generated any images yet.
|
||||||
|
<a
|
||||||
|
href="{{ url_for('generate_image') }}"
|
||||||
|
class="text-blue-400 hover:underline"
|
||||||
|
>Generate one now</a
|
||||||
|
>.
|
||||||
|
</p>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Generated Videos -->
|
||||||
|
<div class="mb-12">
|
||||||
|
<h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
|
||||||
|
Generated Videos
|
||||||
|
</h2>
|
||||||
|
{% if completed_videos %}
|
||||||
|
<div
|
||||||
|
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
|
||||||
|
>
|
||||||
|
{% for video in completed_videos %}
|
||||||
|
<a
|
||||||
|
href="{{ url_for('video_detail', video_id=video.id) }}"
|
||||||
|
class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
|
||||||
|
>
|
||||||
|
{% if video.video_url %}
|
||||||
|
<img
|
||||||
|
src="{{ video.video_url }}#t=0.1"
|
||||||
|
alt="{{ video.prompt }}"
|
||||||
|
class="w-full h-48 object-cover"
|
||||||
|
/>
|
||||||
|
{% else %}
|
||||||
|
<div class="w-full h-48 bg-black flex items-center justify-center">
|
||||||
|
<svg
|
||||||
|
class="w-12 h-12 text-gray-500"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
>
|
>
|
||||||
</p>
|
<path
|
||||||
<p class="text-xs text-gray-500 mt-2">
|
stroke-linecap="round"
|
||||||
Started: {{ video.created_at | fromisoformat | humantime }}
|
stroke-linejoin="round"
|
||||||
</p>
|
stroke-width="2"
|
||||||
</div>
|
d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
|
||||||
</a>
|
></path>
|
||||||
{% endfor %}
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
<div class="p-4">
|
||||||
|
<p class="font-bold text-sm truncate">{{ video.prompt }}</p>
|
||||||
|
<p class="text-xs text-gray-400 mt-1">
|
||||||
|
Video ID: {{ video.id[:8] }}...
|
||||||
|
</p>
|
||||||
|
<p class="text-xs text-gray-500 mt-1">
|
||||||
|
{{ video.created_at | fromisoformat | humantime }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<p class="text-gray-400">
|
||||||
|
You haven't generated any videos yet.
|
||||||
|
<a
|
||||||
|
href="{{ url_for('generate_video') }}"
|
||||||
|
class="text-blue-400 hover:underline"
|
||||||
|
>Generate one now</a
|
||||||
|
>.
|
||||||
|
</p>
|
||||||
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- Generated Images -->
|
<!-- Uploaded Images -->
|
||||||
<div class="mb-12">
|
<div>
|
||||||
<h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
|
<h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
|
||||||
Generated Images
|
My Uploads
|
||||||
</h2>
|
</h2>
|
||||||
{% if generated_images %}
|
{% if uploads %}
|
||||||
<div
|
<div
|
||||||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
|
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
|
||||||
>
|
|
||||||
{% for image in generated_images %}
|
|
||||||
<a
|
|
||||||
href="{{ url_for('image_detail', image_id=image.id) }}"
|
|
||||||
class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
|
|
||||||
>
|
>
|
||||||
<img
|
{% for image in uploads %}
|
||||||
src="{{ image.image_data }}"
|
<a
|
||||||
alt="{{ image.prompt }}"
|
href="{{ url_for('upload_detail', image_id=image.id) }}"
|
||||||
class="w-full h-48 object-cover"
|
class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
|
||||||
/>
|
>
|
||||||
<div class="p-4">
|
<img
|
||||||
<p class="text-sm truncate">{{ image.prompt }}</p>
|
src="{{ url_for('serve_uploaded_image', image_id=image.id) }}"
|
||||||
</div>
|
alt="{{ image.filename }}"
|
||||||
</a>
|
class="w-full h-48 object-cover"
|
||||||
{% endfor %}
|
/>
|
||||||
|
<div class="p-4">
|
||||||
|
<p class="font-bold text-sm truncate">{{ image.filename }}</p>
|
||||||
|
<p class="text-xs text-gray-400 mt-1">
|
||||||
|
Upload ID: {{ image.id[:8] }}...
|
||||||
|
</p>
|
||||||
|
<p class="text-xs text-gray-500 mt-1">
|
||||||
|
{{ image.uploaded_at | fromisoformat | humantime }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<p class="text-gray-400">You haven't uploaded any images.</p>
|
||||||
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% else %}
|
|
||||||
<p class="text-gray-400">
|
|
||||||
You haven't generated any images yet.
|
|
||||||
<a
|
|
||||||
href="{{ url_for('generate_image') }}"
|
|
||||||
class="text-blue-400 hover:underline"
|
|
||||||
>Generate one now</a
|
|
||||||
>.
|
|
||||||
</p>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Generated Videos -->
|
<!-- Infinite Scroll Loading Indicator -->
|
||||||
<div class="mb-12">
|
<div id="loading-indicator" class="flex justify-center py-8 hidden">
|
||||||
<h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
|
<div class="spinner"></div>
|
||||||
Generated Videos
|
|
||||||
</h2>
|
|
||||||
{% if completed_videos %}
|
|
||||||
<div
|
|
||||||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
|
|
||||||
>
|
|
||||||
{% for video in completed_videos %}
|
|
||||||
<a
|
|
||||||
href="{{ url_for('video_detail', video_id=video.id) }}"
|
|
||||||
class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
|
|
||||||
>
|
|
||||||
<div class="w-full h-48 bg-black flex items-center justify-center">
|
|
||||||
<svg
|
|
||||||
class="w-12 h-12 text-gray-500"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
stroke-width="2"
|
|
||||||
d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
|
|
||||||
></path>
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
stroke-width="2"
|
|
||||||
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div class="p-4">
|
|
||||||
<p class="text-sm truncate">{{ video.prompt }}</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
{% else %}
|
|
||||||
<p class="text-gray-400">
|
|
||||||
You haven't generated any videos yet.
|
|
||||||
<a
|
|
||||||
href="{{ url_for('generate_video') }}"
|
|
||||||
class="text-blue-400 hover:underline"
|
|
||||||
>Generate one now</a
|
|
||||||
>.
|
|
||||||
</p>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Uploaded Images -->
|
{% block scripts %}
|
||||||
<div>
|
<script>
|
||||||
<h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
My Uploads
|
const galleryContainers = document.querySelectorAll(".grid[data-grid]");
|
||||||
</h2>
|
const loadingIndicator = document.getElementById("loading-indicator");
|
||||||
{% if uploads %}
|
const container = document.querySelector(".container[data-current-page]");
|
||||||
<div
|
const currentPage = parseInt(container.dataset.currentPage);
|
||||||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
|
const perPage = parseInt(container.dataset.perPage);
|
||||||
>
|
let isLoading = false;
|
||||||
{% for image in uploads %}
|
let hasMore = true;
|
||||||
<a
|
|
||||||
href="{{ url_for('upload_detail', image_id=image.id) }}"
|
// Add data-grid attribute to all gallery grids
|
||||||
class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
|
document
|
||||||
>
|
.querySelectorAll(".grid")
|
||||||
<img
|
.forEach((grid) => grid.setAttribute("data-grid", ""));
|
||||||
src="{{ url_for('serve_uploaded_image', image_id=image.id) }}"
|
|
||||||
alt="{{ image.filename }}"
|
// Infinite scroll handler
|
||||||
class="w-full h-48 object-cover"
|
window.addEventListener("scroll", async function () {
|
||||||
/>
|
if (!hasMore || isLoading) return;
|
||||||
<div class="p-4">
|
|
||||||
<p class="text-sm truncate">{{ image.filename }}</p>
|
const scrollPosition = window.innerHeight + window.scrollY;
|
||||||
</div>
|
const bottomThreshold = document.body.offsetHeight - 1000;
|
||||||
</a>
|
|
||||||
{% endfor %}
|
if (scrollPosition >= bottomThreshold) {
|
||||||
</div>
|
isLoading = true;
|
||||||
{% else %}
|
loadingIndicator.classList.remove("hidden");
|
||||||
<p class="text-gray-400">You haven't uploaded any images.</p>
|
|
||||||
{% endif %}
|
// Simulate API call for next page
|
||||||
</div>
|
// In real implementation, replace with actual backend fetch
|
||||||
|
setTimeout(() => {
|
||||||
|
isLoading = false;
|
||||||
|
loadingIndicator.classList.add("hidden");
|
||||||
|
// Real app would fetch /generate/images?page=${currentPage +1}&limit=${perPage}
|
||||||
|
// and /generate/videos similarly
|
||||||
|
}, 1500);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user