More ui more ui

2025-02-19 20:54:02 -07:00
parent cef7d9e594
commit b0d8fc220d
18 changed files with 722 additions and 13 deletions
--- a/ui/src/components/DatasetImageCard.tsx
+++ b/ui/src/components/DatasetImageCard.tsx
@@ -0,0 +1,95 @@
+import React, { useRef, useEffect, useState, ReactNode } from 'react';
+
+interface DatasetImageCardProps {
+  imageUrl: string;
+  alt: string;
+  children?: ReactNode;
+  className?: string;
+}
+
+const DatasetImageCard: React.FC<DatasetImageCardProps> = ({ imageUrl, alt, children, className = '' }) => {
+  const cardRef = useRef<HTMLDivElement>(null);
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+  const [loaded, setLoaded] = useState<boolean>(false);
+  const [isCaptionLoaded, setIsCaptionLoaded] = useState<boolean>(false);
+  const [caption, setCaption] = useState<string>('');
+  const isGettingCaption = useRef<boolean>(false);
+
+  const fetchCaption = async () => {
+    try {
+      if (isGettingCaption.current || isCaptionLoaded) return;
+      isGettingCaption.current = true;
+      const response = await fetch(`/api/caption/${encodeURIComponent(imageUrl)}`);
+      const data = await response.text();
+      setCaption(data);
+      setIsCaptionLoaded(true);
+    } catch (error) {
+      console.error('Error fetching caption:', error);
+    }
+  };
+
+  useEffect(() => {
+    isVisible && fetchCaption();
+  }, [isVisible]);
+
+  useEffect(() => {
+    // Create intersection observer to check visibility
+    const observer = new IntersectionObserver(
+      entries => {
+        if (entries[0].isIntersecting) {
+          setIsVisible(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.1 },
+    );
+
+    if (cardRef.current) {
+      observer.observe(cardRef.current);
+    }
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  const handleLoad = (): void => {
+    setLoaded(true);
+  };
+
+  return (
+    <div className={`flex flex-col ${className}`}>
+      {/* Square image container */}
+      <div
+        ref={cardRef}
+        className="relative w-full"
+        style={{ paddingBottom: '100%' }} // Make it square
+      >
+        <div className="absolute inset-0 overflow-hidden rounded-t-lg shadow-md">
+          {isVisible && (
+            <img
+              src={`/api/img/${encodeURIComponent(imageUrl)}`}
+              alt={alt}
+              onLoad={handleLoad}
+              className={`w-full h-full object-contain transition-opacity duration-300 ${
+                loaded ? 'opacity-100' : 'opacity-0'
+              }`}
+            />
+          )}
+          {children && <div className="absolute inset-0 flex items-center justify-center">{children}</div>}
+        </div>
+      </div>
+
+      {/* Text area below the image */}
+      <div className="w-full p-2 bg-gray-800 text-white text-sm rounded-b-lg h-[75px]">
+        {isVisible && isCaptionLoaded && (
+          <form>
+            <textarea className="w-full bg-transparent resize-none" defaultValue={caption} rows={3} />
+          </form>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default DatasetImageCard;
--- a/ui/src/components/GPUMonitor.tsx
+++ b/ui/src/components/GPUMonitor.tsx
@@ -1,6 +1,7 @@
 // components/GpuMonitor.tsx
 import React, { useState, useEffect } from 'react';
 import { GPUApiResponse } from '@/types';
+import Loading from '@/components/Loading';

 const GpuMonitor: React.FC = () => {
  const [gpuData, setGpuData] = useState<GPUApiResponse | null>(null);
@@ -68,11 +69,7 @@ const GpuMonitor: React.FC = () => {
  };

  if (loading) {
-    return (
-      <div className="flex justify-center items-center h-64">
-        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
-      </div>
-    );
+    return <Loading />;
  }

  if (error) {
--- a/ui/src/components/Loading.tsx
+++ b/ui/src/components/Loading.tsx
@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div className="flex justify-center items-center h-64">
+      <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
+    </div>
+  );
+}
--- a/ui/src/components/Modal.tsx
+++ b/ui/src/components/Modal.tsx
@@ -0,0 +1,110 @@
+import React, { Fragment, useEffect } from 'react';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+  showCloseButton?: boolean;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  closeOnOverlayClick?: boolean;
+}
+
+export const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  showCloseButton = true,
+  size = 'md',
+  closeOnOverlayClick = true,
+}) => {
+  // Close on ESC key press
+  useEffect(() => {
+    const handleEscKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscKey);
+      // Prevent body scrolling when modal is open
+      document.body.style.overflow = 'hidden';
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscKey);
+      document.body.style.overflow = 'auto';
+    };
+  }, [isOpen, onClose]);
+
+  // Handle overlay click
+  const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.target === e.currentTarget && closeOnOverlayClick) {
+      onClose();
+    }
+  };
+
+  if (!isOpen) return null;
+
+  // Size mapping
+  const sizeClasses = {
+    sm: 'max-w-md',
+    md: 'max-w-lg',
+    lg: 'max-w-2xl',
+    xl: 'max-w-4xl',
+  };
+
+  return (
+    <Fragment>
+      {/* Modal backdrop */}
+      <div
+        className="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto bg-gray-900 bg-opacity-75 backdrop-blur-sm transition-opacity"
+        onClick={handleOverlayClick}
+        aria-modal="true"
+        role="dialog"
+        aria-labelledby="modal-title"
+      >
+        {/* Modal panel */}
+        <div
+          className={`relative mx-auto w-full ${sizeClasses[size]} rounded-lg bg-gray-800 border border-gray-700 shadow-xl transition-all`}
+          onClick={e => e.stopPropagation()}
+        >
+          {/* Modal header */}
+          {(title || showCloseButton) && (
+            <div className="flex items-center justify-between rounded-t-lg border-b border-gray-700 bg-gray-850 px-6 py-4">
+              {title && (
+                <h3 id="modal-title" className="text-xl font-semibold text-gray-100">
+                  {title}
+                </h3>
+              )}
+
+              {showCloseButton && (
+                <button
+                  type="button"
+                  className="ml-auto inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  onClick={onClose}
+                  aria-label="Close modal"
+                >
+                  <svg
+                    className="h-5 w-5"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              )}
+            </div>
+          )}
+
+          {/* Modal content */}
+          <div className="px-6 py-4">{children}</div>
+        </div>
+      </div>
+    </Fragment>
+  );
+};
--- a/ui/src/components/Sidebar.tsx
+++ b/ui/src/components/Sidebar.tsx
@@ -1,10 +1,11 @@
 import Link from 'next/link';
-import { Home, Settings, BarChart2, BrainCircuit } from 'lucide-react';
+import { Home, Settings, BrainCircuit, Images } from 'lucide-react';

 const Sidebar = () => {
  const navigation = [
    { name: 'Dashboard', href: '/dashboard', icon: Home },
    { name: 'Train', href: '/train', icon: BrainCircuit },
+    { name: 'Datasets', href: '/datasets', icon: Images },
    { name: 'Settings', href: '/settings', icon: Settings },
  ];

@@ -12,8 +13,8 @@ const Sidebar = () => {
    <div className="flex flex-col w-64 bg-gray-900 text-gray-100">
      <div className="p-4">
        <h1 className="text-xl">
-            <img src="/ostris_logo.png" alt="Ostris AI Toolkit" className="w-auto h-8 mr-3 inline" />
-            Ostris - AI Toolkit
+          <img src="/ostris_logo.png" alt="Ostris AI Toolkit" className="w-auto h-8 mr-3 inline" />
+          Ostris - AI Toolkit
        </h1>
      </div>
      <nav className="flex-1">
@@ -31,6 +32,32 @@ const Sidebar = () => {
          ))}
        </ul>
      </nav>
+      <a href="https://patreon.com/ostris" target="_blank" rel="noreferrer" className="flex items-center space-x-2 p-4">
+      <div className='min-w-[26px] min-h-[26px]'>
+          <svg
+            viewBox="0 0 512 512"
+            xmlns="http://www.w3.org/2000/svg"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            strokeLinejoin="round"
+            strokeMiterlimit="2"
+          >
+            <g transform="matrix(.47407 0 0 .47407 .383 .422)">
+              <clipPath id="prefix__a">
+                <path d="M0 0h1080v1080H0z"></path>
+              </clipPath>
+              <g clipPath="url(#prefix__a)">
+                <path
+                  d="M1033.05 324.45c-.19-137.9-107.59-250.92-233.6-291.7-156.48-50.64-362.86-43.3-512.28 27.2-181.1 85.46-237.99 272.66-240.11 459.36-1.74 153.5 13.58 557.79 241.62 560.67 169.44 2.15 194.67-216.18 273.07-321.33 55.78-74.81 127.6-95.94 216.01-117.82 151.95-37.61 255.51-157.53 255.29-316.38z"
+                  fillRule="nonzero"
+                  fill="#ffffff"
+                ></path>
+              </g>
+            </g>
+          </svg>
+        </div>
+        <div className="text-gray-500 text-md mb-2 flex-1 pt-2 pl-2">Support me on Patreon</div>
+      </a>
    </div>
  );
 };