301 lines
10 KiB
HTML
301 lines
10 KiB
HTML
{% extends "base.html" %} {% block title %}My Gallery{% endblock %} {% block
|
|
content %}
|
|
<div
|
|
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 -->
|
|
{% if pending_videos %}
|
|
<div class="mb-12">
|
|
<h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
|
|
Pending Creations
|
|
</h2>
|
|
<div
|
|
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
|
|
>
|
|
{% for video in pending_videos %}
|
|
<div
|
|
class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300 relative"
|
|
data-pending-video-id="{{ video.id }}"
|
|
>
|
|
<a href="{{ url_for('video_detail', video_id=video.id) }}">
|
|
<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>
|
|
<div class="px-4 pb-4">
|
|
<button
|
|
class="cancel-pending-btn px-3 py-1 bg-red-600 hover:bg-red-700 text-white rounded text-xs"
|
|
data-video-id="{{ video.id }}"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<span class="cancel-pending-msg text-xs ml-2 hidden"></span>
|
|
</div>
|
|
</div>
|
|
{% 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"
|
|
>
|
|
<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>
|
|
{% 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>
|
|
|
|
<!-- Uploaded Images -->
|
|
<div>
|
|
<h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
|
|
My Uploads
|
|
</h2>
|
|
{% if uploads %}
|
|
<div
|
|
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
|
|
>
|
|
{% for image in uploads %}
|
|
<a
|
|
href="{{ url_for('upload_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="{{ url_for('serve_uploaded_image', image_id=image.id) }}"
|
|
alt="{{ image.filename }}"
|
|
class="w-full h-48 object-cover"
|
|
/>
|
|
<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>
|
|
|
|
<!-- Infinite Scroll Loading Indicator -->
|
|
<div id="loading-indicator" class="flex justify-center py-8 hidden">
|
|
<div class="spinner"></div>
|
|
</div>
|
|
{% endblock %} {% block scripts %}
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const galleryContainers = document.querySelectorAll(".grid[data-grid]");
|
|
const loadingIndicator = document.getElementById("loading-indicator");
|
|
const container = document.querySelector(".container[data-current-page]");
|
|
const currentPage = parseInt(container.dataset.currentPage);
|
|
const perPage = parseInt(container.dataset.perPage);
|
|
let isLoading = false;
|
|
let hasMore = true;
|
|
|
|
// Add data-grid attribute to all gallery grids
|
|
document
|
|
.querySelectorAll(".grid")
|
|
.forEach((grid) => grid.setAttribute("data-grid", ""));
|
|
|
|
// Infinite scroll handler
|
|
window.addEventListener("scroll", async function () {
|
|
if (!hasMore || isLoading) return;
|
|
|
|
const scrollPosition = window.innerHeight + window.scrollY;
|
|
const bottomThreshold = document.body.offsetHeight - 1000;
|
|
|
|
if (scrollPosition >= bottomThreshold) {
|
|
isLoading = true;
|
|
loadingIndicator.classList.remove("hidden");
|
|
// TODO: Implement actual fetching of next page of results and appending to the correct grid(s)
|
|
// For demo purposes, we'll just simulate a delay and then hide the loading indicator
|
|
// Simulate API call for next page
|
|
// 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);
|
|
}
|
|
});
|
|
// Cancel pending video buttons
|
|
document.querySelectorAll(".cancel-pending-btn").forEach((btn) => {
|
|
btn.addEventListener("click", async (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const videoId = btn.dataset.videoId;
|
|
const msgEl = btn.parentElement.querySelector(".cancel-pending-msg");
|
|
btn.disabled = true;
|
|
btn.textContent = "Cancelling…";
|
|
try {
|
|
const resp = await fetch(
|
|
"/generate/video/" + encodeURIComponent(videoId) + "/cancel",
|
|
{ method: "POST" },
|
|
);
|
|
if (resp.ok) {
|
|
btn.classList.add("hidden");
|
|
if (msgEl) {
|
|
msgEl.textContent = "Cancelled";
|
|
msgEl.classList.remove("hidden", "text-red-500");
|
|
msgEl.classList.add("text-gray-300");
|
|
}
|
|
const card = document.querySelector(
|
|
'[data-pending-video-id="' + videoId + '"]',
|
|
);
|
|
if (card) {
|
|
const statusSpan = card.querySelector(".text-yellow-400");
|
|
if (statusSpan) {
|
|
statusSpan.textContent = "cancelled";
|
|
statusSpan.classList.remove("text-yellow-400");
|
|
statusSpan.classList.add("text-gray-400");
|
|
}
|
|
}
|
|
} else {
|
|
const data = await resp.json().catch(() => ({}));
|
|
btn.disabled = false;
|
|
btn.textContent = "Cancel";
|
|
if (msgEl) {
|
|
msgEl.textContent = data.detail || "Failed";
|
|
msgEl.classList.remove("hidden");
|
|
msgEl.classList.add("text-red-500");
|
|
}
|
|
}
|
|
} catch (err) {
|
|
btn.disabled = false;
|
|
btn.textContent = "Cancel";
|
|
if (msgEl) {
|
|
msgEl.textContent = "Error";
|
|
msgEl.classList.remove("hidden");
|
|
msgEl.classList.add("text-red-500");
|
|
}
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
</div>
|