237 lines
9.9 KiB
TypeScript
237 lines
9.9 KiB
TypeScript
/**
|
|
* ContentImageCell Component
|
|
* Displays image prompt, placeholder, or actual image based on status
|
|
*/
|
|
import React, { useState } from 'react';
|
|
import Badge from '../ui/badge/Badge';
|
|
|
|
export interface ContentImageData {
|
|
id?: number;
|
|
image_type?: string;
|
|
image_url?: string | null;
|
|
image_path?: string | null;
|
|
prompt?: string | null;
|
|
status: string;
|
|
position?: number;
|
|
created_at?: string;
|
|
updated_at?: string;
|
|
}
|
|
|
|
interface ContentImageCellProps {
|
|
image: ContentImageData | null;
|
|
maxPromptLength?: number;
|
|
}
|
|
|
|
export default function ContentImageCell({ image, maxPromptLength = 100 }: ContentImageCellProps) {
|
|
const [showFullPrompt, setShowFullPrompt] = useState(false);
|
|
|
|
// Check if image_path is a valid local file path (not a URL)
|
|
const isValidLocalPath = (imagePath: string): boolean => {
|
|
// Reject URLs (http:// or https://)
|
|
if (imagePath.startsWith('http://') || imagePath.startsWith('https://')) {
|
|
return false;
|
|
}
|
|
// Must contain 'ai-images' to be a valid local path
|
|
return imagePath.includes('ai-images');
|
|
};
|
|
|
|
// Convert local file path to web-accessible URL
|
|
const getLocalImageUrl = (imagePath: string): string => {
|
|
// If path contains 'ai-images', convert to web URL
|
|
if (imagePath.includes('ai-images')) {
|
|
const filename = imagePath.split('ai-images/')[1] || imagePath.split('ai-images\\')[1];
|
|
if (filename) {
|
|
return `/images/ai-images/${filename}`;
|
|
}
|
|
}
|
|
// If path is already a web path, return as-is
|
|
if (imagePath.startsWith('/images/')) {
|
|
return imagePath;
|
|
}
|
|
// Otherwise, try to extract filename and use ai-images path
|
|
const filename = imagePath.split('/').pop() || imagePath.split('\\').pop();
|
|
return `/images/ai-images/${filename}`;
|
|
};
|
|
|
|
if (!image) {
|
|
return (
|
|
<div className="text-gray-400 dark:text-gray-500 text-sm">-</div>
|
|
);
|
|
}
|
|
|
|
const prompt = image.prompt || '';
|
|
const shouldTruncate = prompt.length > maxPromptLength;
|
|
const displayPrompt = showFullPrompt || !shouldTruncate ? prompt : `${prompt.substring(0, maxPromptLength)}...`;
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
{/* Prompt Text */}
|
|
{prompt && (
|
|
<div className="text-sm">
|
|
<p className="text-gray-700 dark:text-gray-300">
|
|
{displayPrompt}
|
|
{shouldTruncate && (
|
|
<button
|
|
onClick={() => setShowFullPrompt(!showFullPrompt)}
|
|
className="ml-1 text-brand-500 hover:text-brand-600 text-xs"
|
|
>
|
|
{showFullPrompt ? 'Show less' : 'Show more'}
|
|
</button>
|
|
)}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Image Display */}
|
|
<div className="relative">
|
|
{image.status === 'pending' && (
|
|
<div className="w-full h-24 bg-gray-200 dark:bg-gray-700 rounded border-2 border-dashed border-gray-300 dark:border-gray-600 flex items-center justify-center">
|
|
<div className="text-center">
|
|
<svg
|
|
className="w-8 h-8 mx-auto text-gray-400 dark:text-gray-500 mb-1"
|
|
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-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
|
|
/>
|
|
</svg>
|
|
<p className="text-xs text-gray-500 dark:text-gray-400">Pending</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{image.status === 'generated' && (
|
|
<div className="space-y-1">
|
|
{/* Only use image_path if it's a valid local file path (not a URL) */}
|
|
{image.image_path && image.image_path.trim() && isValidLocalPath(image.image_path) ? (
|
|
<>
|
|
<img
|
|
src={getLocalImageUrl(image.image_path)}
|
|
alt={prompt || 'Generated image'}
|
|
className="w-full h-24 object-cover rounded border border-gray-300 dark:border-gray-600"
|
|
onError={(e) => {
|
|
// Show empty placeholder if local image fails to load
|
|
const target = e.target as HTMLImageElement;
|
|
target.style.display = 'none';
|
|
const parent = target.parentElement;
|
|
if (parent) {
|
|
parent.innerHTML = `
|
|
<div class="w-full h-24 bg-gray-200 dark:bg-gray-700 rounded border-2 border-dashed border-gray-300 dark:border-gray-600 flex items-center justify-center">
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">Image not available</p>
|
|
</div>
|
|
`;
|
|
}
|
|
}}
|
|
/>
|
|
{/* Always show "View Original" button if image_url is available */}
|
|
{image.image_url && (
|
|
<a
|
|
href={image.image_url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="block w-full text-center px-2 py-1 text-xs text-brand-500 hover:text-brand-600 dark:text-brand-400 dark:hover:text-brand-300 border border-brand-300 dark:border-brand-700 rounded hover:bg-brand-50 dark:hover:bg-brand-900/20 transition-colors"
|
|
>
|
|
View Original
|
|
</a>
|
|
)}
|
|
{/* Display database field values */}
|
|
<div className="mt-2 p-2 bg-gray-50 dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700 text-xs font-mono">
|
|
<div className="text-gray-600 dark:text-gray-400 mb-1">
|
|
<span className="text-gray-500 dark:text-gray-500">class Images(SiteSectorBaseModel):</span>
|
|
</div>
|
|
<div className="ml-4 text-gray-700 dark:text-gray-300">
|
|
<div className="mb-1">
|
|
<span className="text-purple-600 dark:text-purple-400">image_url</span>
|
|
<span className="text-gray-500 dark:text-gray-500"> = </span>
|
|
<span className="text-blue-600 dark:text-blue-400 break-all">
|
|
{image.image_url || <span className="text-gray-400 italic">null</span>}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-purple-600 dark:text-purple-400">image_path</span>
|
|
<span className="text-gray-500 dark:text-gray-500"> = </span>
|
|
<span className="text-green-600 dark:text-green-400 break-all">
|
|
{image.image_path || <span className="text-gray-400 italic">null</span>}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="w-full h-24 bg-gray-200 dark:bg-gray-700 rounded border-2 border-dashed border-gray-300 dark:border-gray-600 flex items-center justify-center">
|
|
<p className="text-xs text-gray-500 dark:text-gray-400">No image available</p>
|
|
</div>
|
|
{/* Display database field values even when no image available */}
|
|
<div className="mt-2 p-2 bg-gray-50 dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700 text-xs font-mono">
|
|
<div className="text-gray-600 dark:text-gray-400 mb-1">
|
|
<span className="text-gray-500 dark:text-gray-500">class Images(SiteSectorBaseModel):</span>
|
|
</div>
|
|
<div className="ml-4 text-gray-700 dark:text-gray-300">
|
|
<div className="mb-1">
|
|
<span className="text-purple-600 dark:text-purple-400">image_url</span>
|
|
<span className="text-gray-500 dark:text-gray-500"> = </span>
|
|
<span className="text-blue-600 dark:text-blue-400 break-all">
|
|
{image.image_url || <span className="text-gray-400 italic">null</span>}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-purple-600 dark:text-purple-400">image_path</span>
|
|
<span className="text-gray-500 dark:text-gray-500"> = </span>
|
|
<span className="text-green-600 dark:text-green-400 break-all">
|
|
{image.image_path || <span className="text-gray-400 italic">null</span>}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{image.status === 'failed' && (
|
|
<div className="w-full h-24 bg-red-100 dark:bg-red-900/20 rounded border border-red-300 dark:border-red-700 flex items-center justify-center">
|
|
<div className="text-center">
|
|
<svg
|
|
className="w-6 h-6 mx-auto text-red-500 mb-1"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
<p className="text-xs text-red-700 dark:text-red-400">Failed</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Status Badge */}
|
|
<div className="absolute top-1 right-1">
|
|
<Badge
|
|
color={
|
|
image.status === 'generated' ? 'success' :
|
|
image.status === 'failed' ? 'error' :
|
|
'warning'
|
|
}
|
|
size="xs"
|
|
variant="light"
|
|
>
|
|
{image.status}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|