272 lines
14 KiB
TypeScript
272 lines
14 KiB
TypeScript
import { Spinner } from '@/components/ui/spinner';
|
|
import AppLayout from '@/layouts/app-layout';
|
|
import { useAxios } from '@/plugins/AxiosContext';
|
|
import { type BreadcrumbItem } from '@/types';
|
|
import { Head } from '@inertiajs/react';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
const breadcrumbs: BreadcrumbItem[] = [
|
|
{
|
|
title: 'Admin',
|
|
href: route('admin.dashboard'),
|
|
},
|
|
{
|
|
title: 'Background Generation',
|
|
href: route('admin.background-generation'),
|
|
},
|
|
];
|
|
|
|
export default function BackgroundGeneration({ pendingMedia }) {
|
|
const [prompt, setPrompt] = useState(pendingMedia?.prompt || '');
|
|
const [isGenerating, setIsGenerating] = useState(false);
|
|
const [generatedImageUrl, setGeneratedImageUrl] = useState(null);
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
const [isDeleting, setIsDeleting] = useState(false);
|
|
const axios = useAxios();
|
|
|
|
// Auto-assemble prompt when pendingMedia is available
|
|
useEffect(() => {
|
|
if (pendingMedia && pendingMedia.location_name && pendingMedia.list_type && pendingMedia.area) {
|
|
const assembledPrompt =
|
|
`${pendingMedia.location_name}, ${pendingMedia.list_type} ${pendingMedia.area}, wide angle shot, low angle view, sharp focus, cinematic composition`.toLowerCase();
|
|
setPrompt(assembledPrompt);
|
|
}
|
|
}, [pendingMedia]);
|
|
|
|
// If no pending media, show completed state
|
|
if (!pendingMedia) {
|
|
return (
|
|
<AppLayout breadcrumbs={breadcrumbs}>
|
|
<Head title="Background Generation Complete" />
|
|
<div className="flex h-full flex-1 flex-col items-center justify-center gap-6 rounded-xl p-6">
|
|
<div className="max-w-md rounded-lg border bg-white p-8 text-center">
|
|
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-green-100">
|
|
<svg className="h-8 w-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<h2 className="mb-2 text-2xl font-semibold text-gray-900">All Done!</h2>
|
|
<p className="mb-6 text-gray-600">
|
|
There are no pending media records to process. All background generation tasks have been completed.
|
|
</p>
|
|
<button
|
|
onClick={() => window.location.reload()}
|
|
className="rounded-md bg-blue-600 px-4 py-2 font-medium text-white transition-colors hover:bg-blue-700"
|
|
>
|
|
Refresh
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
}
|
|
|
|
const handleGenerate = async () => {
|
|
if (!prompt.trim()) {
|
|
alert('Please enter a prompt');
|
|
return;
|
|
}
|
|
|
|
setIsGenerating(true);
|
|
setGeneratedImageUrl(null);
|
|
|
|
try {
|
|
const response = await axios.post(route('admin.background-generation.generate'), {
|
|
prompt: prompt,
|
|
media_id: pendingMedia.id,
|
|
});
|
|
|
|
if (response.data.success) {
|
|
setGeneratedImageUrl(response.data.image_url);
|
|
} else {
|
|
alert(response.data.error || 'Generation failed');
|
|
}
|
|
} catch (error) {
|
|
console.error('Generation error:', error);
|
|
alert('Failed to generate image');
|
|
} finally {
|
|
setIsGenerating(false);
|
|
}
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
if (!generatedImageUrl) {
|
|
alert('No generated image to save');
|
|
return;
|
|
}
|
|
|
|
setIsSaving(true);
|
|
|
|
try {
|
|
const response = await axios.post(route('admin.background-generation.save'), {
|
|
media_id: pendingMedia.id,
|
|
image_url: generatedImageUrl,
|
|
prompt: prompt,
|
|
});
|
|
|
|
if (response.data.success) {
|
|
// Reload the page to start the cycle again
|
|
window.location.reload();
|
|
} else {
|
|
alert(response.data.error || 'Failed to save');
|
|
}
|
|
} catch (error) {
|
|
console.error('Save error:', error);
|
|
alert('Failed to save image');
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleDelete = async () => {
|
|
if (!confirm('Are you sure you want to delete this pending media? This action cannot be undone.')) {
|
|
return;
|
|
}
|
|
|
|
setIsDeleting(true);
|
|
|
|
try {
|
|
const response = await axios.post(route('admin.background-generation.delete', pendingMedia.id));
|
|
|
|
if (response.data.success) {
|
|
// Reload the page to start the cycle again or show completed state
|
|
window.location.reload();
|
|
} else {
|
|
alert(response.data.error || 'Failed to delete');
|
|
}
|
|
} catch (error) {
|
|
console.error('Delete error:', error);
|
|
alert('Failed to delete media');
|
|
} finally {
|
|
setIsDeleting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<AppLayout breadcrumbs={breadcrumbs}>
|
|
<Head title="Background Generation" />
|
|
<div className="flex h-full flex-1 flex-col gap-4 rounded-xl p-2 sm:p-4 lg:flex-row">
|
|
{/* Left Column - Controls */}
|
|
<div className="flex w-full flex-col gap-4 lg:w-1/2">
|
|
{/* Pending Media Info */}
|
|
<div className="rounded-lg border bg-white p-3 sm:p-4">
|
|
<h2 className="mb-3 text-base font-semibold sm:text-lg">Pending Media Information</h2>
|
|
<div className="grid grid-cols-1 gap-x-4 gap-y-2 text-sm sm:grid-cols-2">
|
|
<div className="flex flex-wrap">
|
|
<span className="font-medium text-gray-700">ID:</span>
|
|
<span className="ml-2 break-all text-gray-900">{pendingMedia.id}</span>
|
|
</div>
|
|
<div className="flex flex-wrap">
|
|
<span className="font-medium text-gray-700">List Type:</span>
|
|
<span className="ml-2 text-gray-900">{pendingMedia.list_type}</span>
|
|
</div>
|
|
<div className="flex flex-wrap">
|
|
<span className="font-medium text-gray-700">Area:</span>
|
|
<span className="ml-2 text-gray-900">{pendingMedia.area}</span>
|
|
</div>
|
|
<div className="flex flex-wrap">
|
|
<span className="font-medium text-gray-700">Location:</span>
|
|
<span className="ml-2 break-words text-gray-900">{pendingMedia.location_name}</span>
|
|
</div>
|
|
<div className="flex flex-wrap items-center">
|
|
<span className="font-medium text-gray-700">Status:</span>
|
|
<span className="ml-2 inline-flex items-center rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-800">
|
|
{pendingMedia.status}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-wrap">
|
|
<span className="font-medium text-gray-700">Created:</span>
|
|
<span className="ml-2 text-gray-900">{new Date(pendingMedia.created_at).toLocaleDateString()}</span>
|
|
</div>
|
|
</div>
|
|
<div className="mt-4 border-t border-gray-200 pt-3">
|
|
<button
|
|
onClick={handleDelete}
|
|
disabled={isDeleting || isGenerating || isSaving}
|
|
className="flex min-h-[44px] w-full items-center justify-center gap-1 rounded-md bg-red-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-red-700 disabled:bg-gray-400 sm:w-auto"
|
|
>
|
|
{isDeleting && <Spinner className="h-4 w-4 text-white" />}
|
|
{isDeleting ? 'Deleting...' : 'Delete Media'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Generate Section */}
|
|
<div className="rounded-lg border bg-white p-3 sm:p-4">
|
|
<h2 className="mb-3 text-base font-semibold sm:text-lg">Generate Background Image</h2>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label htmlFor="prompt" className="mb-2 block text-sm font-medium text-gray-700">
|
|
Prompt
|
|
</label>
|
|
<textarea
|
|
id="prompt"
|
|
value={prompt}
|
|
onChange={(e) => setPrompt(e.target.value)}
|
|
className="min-h-[80px] w-full rounded-md border border-gray-300 px-3 py-3 text-sm shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
|
|
rows={4}
|
|
placeholder="Enter your prompt for image generation..."
|
|
disabled={isGenerating}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-3 sm:flex-row">
|
|
<button
|
|
onClick={handleGenerate}
|
|
disabled={isGenerating || !prompt.trim()}
|
|
className="flex min-h-[44px] w-full items-center justify-center gap-1 rounded-md bg-blue-600 px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:bg-gray-400"
|
|
>
|
|
{isGenerating && <Spinner className="h-4 w-4 text-white" />}
|
|
{isGenerating ? 'Generating...' : 'Generate'}
|
|
</button>
|
|
{generatedImageUrl && (
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={isSaving}
|
|
className="flex min-h-[44px] w-full items-center justify-center gap-1 rounded-md bg-green-600 px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:bg-gray-400"
|
|
>
|
|
{isSaving && <Spinner className="h-4 w-4 text-white" />}
|
|
{isSaving ? 'Saving...' : 'Save & Complete'}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column - Image Preview */}
|
|
<div className="order-first w-full lg:order-last lg:w-1/2">
|
|
<div className="rounded-lg border bg-white p-3 sm:p-4">
|
|
<h2 className="mb-3 text-base font-semibold sm:text-lg">Image Preview</h2>
|
|
{/* Square aspect ratio container */}
|
|
<div className="aspect-square w-full">
|
|
<div className="flex h-full w-full items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50">
|
|
{isGenerating ? (
|
|
<div className="p-4 text-center">
|
|
<Spinner className="h-8 w-8" />
|
|
<p className="text-sm text-gray-600">Generating image...</p>
|
|
</div>
|
|
) : generatedImageUrl ? (
|
|
<img src={generatedImageUrl} alt="Generated background" className="h-full w-full rounded-lg object-contain" />
|
|
) : (
|
|
<div className="p-4 text-center">
|
|
<svg className="mx-auto h-8 w-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2 2v12a2 2 0 002 2z"
|
|
/>
|
|
</svg>
|
|
<p className="mt-2 text-sm text-gray-500">No image generated yet</p>
|
|
<p className="text-xs text-gray-400">Click Generate to create an image</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
}
|