201 lines
8.4 KiB
HTML
201 lines
8.4 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Effects - Art-DAG L1{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-6xl mx-auto">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h1 class="text-3xl font-bold">Effects</h1>
|
|
<button onclick="document.getElementById('upload-modal').classList.remove('hidden')"
|
|
class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded font-medium">
|
|
Upload Effect
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Upload Modal -->
|
|
<div id="upload-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div class="bg-gray-800 rounded-lg p-6 w-full max-w-md border border-gray-700">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-xl font-semibold">Upload Effect</h2>
|
|
<button onclick="document.getElementById('upload-modal').classList.add('hidden')"
|
|
class="text-gray-400 hover:text-white">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<form id="upload-form" enctype="multipart/form-data" class="space-y-4">
|
|
<div>
|
|
<label class="block text-gray-400 text-sm mb-1">Effect File (.sexp)</label>
|
|
<input type="file" name="file" id="upload-file" required
|
|
accept=".sexp,.lisp"
|
|
class="w-full bg-gray-900 border border-gray-600 rounded px-3 py-2 text-white file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:bg-blue-600 file:text-white hover:file:bg-blue-700">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-gray-400 text-sm mb-1">Friendly Name (optional)</label>
|
|
<input type="text" name="display_name" id="upload-name" placeholder="e.g., color-shift"
|
|
class="w-full bg-gray-900 border border-gray-600 rounded px-3 py-2 text-white">
|
|
<p class="text-gray-500 text-xs mt-1">A name to reference this effect in recipes</p>
|
|
</div>
|
|
|
|
<div id="upload-result" class="hidden"></div>
|
|
|
|
<div class="flex justify-end space-x-3">
|
|
<button type="button" onclick="document.getElementById('upload-modal').classList.add('hidden')"
|
|
class="px-4 py-2 rounded border border-gray-600 hover:bg-gray-700">
|
|
Cancel
|
|
</button>
|
|
<button type="submit" id="upload-btn"
|
|
class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded font-medium">
|
|
Upload
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-gray-400 mb-8">
|
|
Effects are S-expression files that define video processing operations.
|
|
Each effect is stored in IPFS and can be referenced by name in recipes.
|
|
</p>
|
|
|
|
{% if effects %}
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="effects-list">
|
|
{% for effect in effects %}
|
|
{% set meta = effect.meta or effect %}
|
|
<a href="/effects/{{ effect.cid }}"
|
|
class="effect-card bg-gray-800 border border-gray-700 rounded-lg p-4 hover:border-gray-600 transition-colors">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="font-medium text-white">{{ meta.name or 'Unnamed' }}</span>
|
|
<span class="text-gray-500 text-sm">v{{ meta.version or '1.0.0' }}</span>
|
|
</div>
|
|
|
|
{% if meta.description %}
|
|
<p class="text-gray-400 text-sm mb-3 line-clamp-2">{{ meta.description }}</p>
|
|
{% endif %}
|
|
|
|
<div class="flex items-center justify-between text-sm mb-2">
|
|
{% if meta.author %}
|
|
<span class="text-gray-500">by {{ meta.author }}</span>
|
|
{% else %}
|
|
<span></span>
|
|
{% endif %}
|
|
{% if meta.temporal %}
|
|
<span class="bg-purple-900 text-purple-300 px-2 py-0.5 rounded text-xs">temporal</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if meta.params %}
|
|
<div class="text-gray-500 text-sm">
|
|
{{ meta.params | length }} parameter{{ 's' if meta.params | length != 1 else '' }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="mt-3 text-xs">
|
|
{% if effect.friendly_name %}
|
|
<span class="text-blue-400 font-medium">{{ effect.friendly_name }}</span>
|
|
{% else %}
|
|
<span class="text-gray-600 font-mono truncate">{{ effect.cid[:24] }}...</span>
|
|
{% endif %}
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{% if has_more %}
|
|
<div hx-get="/effects?offset={{ offset + limit }}&limit={{ limit }}"
|
|
hx-trigger="revealed"
|
|
hx-swap="afterend"
|
|
hx-select="#effects-list > *"
|
|
class="h-20 flex items-center justify-center text-gray-500">
|
|
Loading more...
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% else %}
|
|
<div class="bg-gray-800 border border-gray-700 rounded-lg p-12 text-center">
|
|
<svg class="w-16 h-16 mx-auto mb-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
|
|
d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
|
|
</svg>
|
|
<p class="text-gray-500 mb-4">No effects uploaded yet.</p>
|
|
<p class="text-gray-600 text-sm mb-6">
|
|
Effects are S-expression files with metadata in comment headers.
|
|
</p>
|
|
<button onclick="document.getElementById('upload-modal').classList.remove('hidden')"
|
|
class="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded font-medium">
|
|
Upload Your First Effect
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<script>
|
|
// Handle upload form
|
|
document.getElementById('upload-form').addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
const form = e.target;
|
|
const fileInput = document.getElementById('upload-file');
|
|
const displayName = document.getElementById('upload-name').value;
|
|
const resultDiv = document.getElementById('upload-result');
|
|
const uploadBtn = document.getElementById('upload-btn');
|
|
|
|
const file = fileInput.files[0];
|
|
if (!file) return;
|
|
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
if (displayName) {
|
|
formData.append('display_name', displayName);
|
|
}
|
|
|
|
uploadBtn.disabled = true;
|
|
uploadBtn.textContent = 'Uploading...';
|
|
resultDiv.classList.add('hidden');
|
|
|
|
try {
|
|
const response = await fetch('/effects/upload', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (response.ok) {
|
|
resultDiv.innerHTML = `
|
|
<div class="bg-green-900 border border-green-700 rounded p-3 text-green-300">
|
|
<p class="font-medium">Effect uploaded!</p>
|
|
<p class="text-sm mt-1">${data.name} <span class="font-mono">${data.friendly_name}</span></p>
|
|
</div>
|
|
`;
|
|
resultDiv.classList.remove('hidden');
|
|
setTimeout(() => location.reload(), 1500);
|
|
} else {
|
|
resultDiv.innerHTML = `
|
|
<div class="bg-red-900 border border-red-700 rounded p-3 text-red-300">
|
|
<p class="font-medium">Upload failed</p>
|
|
<p class="text-sm mt-1">${data.detail || 'Unknown error'}</p>
|
|
</div>
|
|
`;
|
|
resultDiv.classList.remove('hidden');
|
|
uploadBtn.disabled = false;
|
|
uploadBtn.textContent = 'Upload';
|
|
}
|
|
} catch (error) {
|
|
resultDiv.innerHTML = `
|
|
<div class="bg-red-900 border border-red-700 rounded p-3 text-red-300">
|
|
<p class="font-medium">Upload failed</p>
|
|
<p class="text-sm mt-1">${error.message}</p>
|
|
</div>
|
|
`;
|
|
resultDiv.classList.remove('hidden');
|
|
uploadBtn.disabled = false;
|
|
uploadBtn.textContent = 'Upload';
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|