comment out web generation access for now

frontend/apps/artcraft-website/src/app/app.tsx

@@ -4,8 +4,8 @@ import Media from "../pages/media";
 import PressKit from "../pages/press-kit";
 import Navbar from "../components/navbar";
 import { ToastContainer } from "../components/toast/toast";
-import CreateImage from "../pages/create-image";
-import CreateVideo from "../pages/create-video";
+// import CreateImage from "../pages/create-image";
+// import CreateVideo from "../pages/create-video";
 import Landing2 from "../pages/landing2";
 import LandingSD2 from "../pages/landing-sd2";
 import TutorialsPage from "../pages/tutorials";
@@ -30,8 +30,8 @@ export function App() {
 
       <Routes>
         <Route path="/" element={<Landing2 />} />
-        <Route path="/create-image" element={<CreateImage />} />
-        <Route path="/create-video" element={<CreateVideo />} />
+        {/* <Route path="/create-image" element={<CreateImage />} />
+        <Route path="/create-video" element={<CreateVideo />} /> */}
         <Route path="/seedance-2" element={<LandingSD2 />} />
         <Route path="/download" element={<Download />} />
         <Route path="/media" element={<Media />} />

frontend/apps/artcraft-website/src/pages/library/library.tsx

@@ -50,7 +50,9 @@ const ROUTE_TO_FILTER: Record<string, string> = {
   meshes: "meshes",
 };
 
-const getFilterMediaClass = (filter: string): FilterMediaClasses[] | undefined => {
+const getFilterMediaClass = (
+  filter: string,
+): FilterMediaClasses[] | undefined => {
   switch (filter) {
     case "image":
       return [FilterMediaClasses.IMAGE];
@@ -59,7 +61,11 @@ const getFilterMediaClass = (filter: string): FilterMediaClasses[] | undefined =
     case "meshes":
       return [FilterMediaClasses.DIMENSIONAL];
     default:
-      return [FilterMediaClasses.IMAGE, FilterMediaClasses.VIDEO, FilterMediaClasses.DIMENSIONAL];
+      return [
+        FilterMediaClasses.IMAGE,
+        FilterMediaClasses.VIDEO,
+        FilterMediaClasses.DIMENSIONAL,
+      ];
   }
 };
 
@@ -91,7 +97,9 @@ const getLabel = (item: any) => {
 export default function Library() {
   const { filter: filterParam } = useParams<{ filter?: string }>();
   const navigate = useNavigate();
-  const activeFilter = filterParam ? (ROUTE_TO_FILTER[filterParam] ?? "all") : "all";
+  const activeFilter = filterParam
+    ? (ROUTE_TO_FILTER[filterParam] ?? "all")
+    : "all";
 
   const [username, setUsername] = useState<string | null>(null);
   const [isLoggedIn, setIsLoggedIn] = useState<boolean | null>(null);
@@ -113,11 +121,7 @@ export default function Library() {
     const checkSession = async () => {
       const usersApi = new UsersApi();
       const response = await usersApi.GetSession();
-      if (
-        response.success &&
-        response.data?.loggedIn &&
-        response.data.user
-      ) {
+      if (response.success && response.data?.loggedIn && response.data.user) {
         setUsername(response.data.user.username);
         setIsLoggedIn(true);
       } else {
@@ -135,8 +139,8 @@ export default function Library() {
     const thumbnail = isDimensional
       ? null
       : getMediaThumbnail(item.media_links, item.media_class, {
-        size: THUMBNAIL_SIZES.MEDIUM,
-      });
+          size: THUMBNAIL_SIZES.MEDIUM,
+        });
 
     return {
       id: item.token,
@@ -169,7 +173,9 @@ export default function Library() {
 
         if (response.success && response.data) {
           const newItems = response.data
-            .filter((item: any) => item.media_type !== FilterMediaType.SCENE_JSON)
+            .filter(
+              (item: any) => item.media_type !== FilterMediaType.SCENE_JSON,
+            )
             .map(mapApiItem);
 
           if (reset) {
@@ -250,17 +256,17 @@ export default function Library() {
   const navigatePrev =
     currentIndex > 0
       ? () => {
-        const prev = flatItems[currentIndex - 1];
-        setLightboxItem(prev);
-      }
+          const prev = flatItems[currentIndex - 1];
+          setLightboxItem(prev);
+        }
       : undefined;
 
   const navigateNext =
     currentIndex >= 0 && currentIndex < flatItems.length - 1
       ? () => {
-        const next = flatItems[currentIndex + 1];
-        setLightboxItem(next);
-      }
+          const next = flatItems[currentIndex + 1];
+          setLightboxItem(next);
+        }
       : undefined;
 
   const handleItemDeleted = useCallback((id: string) => {
@@ -341,10 +347,11 @@ export default function Library() {
                 <button
                   key={filter.id}
                   onClick={() => navigate(filter.route)}
-                  className={`flex items-center gap-2 px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${activeFilter === filter.id
+                  className={`flex items-center gap-2 px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${
+                    activeFilter === filter.id
                       ? "bg-ui-controls text-white"
                       : "text-white/60 hover:text-white"
-                    }`}
+                  }`}
                 >
                   <FontAwesomeIcon icon={filter.icon} className="text-xs" />
                   {filter.label}
@@ -386,10 +393,8 @@ export default function Library() {
             </div>
           ) : allItems.length === 0 && !loading ? (
             <div className="flex flex-col items-center justify-center py-20">
-              <p className="text-white/40 text-sm mb-4">
-                No items yet. Start generating!
-              </p>
-              <div className="flex gap-3">
+              <p className="text-white/40 text-sm mb-4">No items yet.</p>
+              {/* <div className="flex gap-3">
                 <Link to="/create-image">
                   <Button variant="primary" className="text-sm px-4 py-2">
                     Create Image
@@ -403,7 +408,7 @@ export default function Library() {
                     Create Video
                   </Button>
                 </Link>
-              </div>
+              </div> */}
             </div>
           ) : (
             <div className="space-y-6">

frontend/libs/components/gallery-modal/src/lib/GalleryDraggableItem.tsx

@@ -137,7 +137,7 @@ export const GalleryDraggableItem: React.FC<GalleryDraggableItemProps> = ({
       tabIndex={-1}
       className={twMerge(
         "w-full group relative overflow-visible rounded-md border-[3px] transition-all focus:outline-none",
-        "aspect-square",
+        item.mediaClass === "video" ? "aspect-video" : "aspect-square",
         selected || bulkSelected
           ? "border-primary"
           : disableTooltipAndBadge
@@ -171,7 +171,7 @@ export const GalleryDraggableItem: React.FC<GalleryDraggableItemProps> = ({
             alt={item.label}
             className={twMerge(
               "h-full w-full bg-black/30",
-              imageFit === "contain" ? "object-contain" : "object-cover",
+              item.mediaClass === "video" || imageFit === "contain" ? "object-contain" : "object-cover",
             )}
             draggable={false}
             onError={onImageError}
@@ -187,7 +187,7 @@ export const GalleryDraggableItem: React.FC<GalleryDraggableItemProps> = ({
   );
 
   return (
-    <div className={twMerge("group relative w-full", "aspect-square")}>
+    <div className={twMerge("group relative w-full", item.mediaClass === "video" ? "aspect-video" : "aspect-square")}>
       {/* dropdown menu */}
       {mode !== "select" && (
         <div