ostris/ai-toolkit
1
0
Fork 0
mirror of https://github.com/ostris/ai-toolkit.git synced 2026-04-30 03:01:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add path to image for datasets on the image card

Browse Source
This commit is contained in:
Jaret Burkett
2025-07-11 11:44:48 -06:00
parent 8537a8557f
commit 47002b067f
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
ui/src/components/DatasetImageCard.tsx
View File

@@ -160,7 +160,6 @@ const DatasetImageCard: React.FC<DatasetImageCardProps> = ({
)} )}
{children && <div className="absolute inset-0 flex items-center justify-center">{children}</div>} {children && <div className="absolute inset-0 flex items-center justify-center">{children}</div>}
<div className="absolute top-1 right-1 flex space-x-2"> <div className="absolute top-1 right-1 flex space-x-2">
<button <button
className="bg-gray-800 rounded-full p-2" className="bg-gray-800 rounded-full p-2"
onClick={() => { onClick={() => {
@@ -187,9 +186,12 @@ const DatasetImageCard: React.FC<DatasetImageCardProps> = ({
</button> </button>
</div> </div>
</div> </div>
{inViewport && isVisible && (
<div className="text-xs text-gray-100 bg-gray-950 mt-1 absolute bottom-0 left-0 p-1 opacity-25 hover:opacity-90 transition-opacity duration-300">
{imageUrl}
</div>
)}
</div> </div>
{/* Text area below the image */}
<div <div
className={classNames('w-full p-2 bg-gray-800 text-white text-sm rounded-b-lg h-[75px]', { className={classNames('w-full p-2 bg-gray-800 text-white text-sm rounded-b-lg h-[75px]', {
'border-blue-500 border-2': !isCaptionCurrent, 'border-blue-500 border-2': !isCaptionCurrent,
@@ -215,17 +217,15 @@ const DatasetImageCard: React.FC<DatasetImageCardProps> = ({
)} )}
{(!inViewport || !isVisible) && isCaptionLoaded && ( {(!inViewport || !isVisible) && isCaptionLoaded && (
<div className="w-full h-full flex items-center justify-center text-gray-400"> <div className="w-full h-full flex items-center justify-center text-gray-400">
{isVisible ? "Scroll into view to edit caption" : "Show content to edit caption"} {isVisible ? 'Scroll into view to edit caption' : 'Show content to edit caption'}
</div> </div>
)} )}
{!isCaptionLoaded && ( {!isCaptionLoaded && (
<div className="w-full h-full flex items-center justify-center text-gray-400"> <div className="w-full h-full flex items-center justify-center text-gray-400">Loading caption...</div>
Loading caption...
</div>
)} )}
</div> </div>
</div> </div>
); );
}; };
export default DatasetImageCard; export default DatasetImageCard;