Spaces:

jbilcke-hf
/

ai-toolkit

Paused

jbilcke-hf HF Staff Claude commited on 14 days ago

Commit

c152ec8

1 Parent(s): 7ce0d22

Add duplicate space modal for Hugging Face deployment

- Created DuplicateSpaceModal component with HF branding
- Added ASK_USER_TO_DUPLICATE environment variable check
- Implemented non-closeable modal with blurred background
- Downloaded and added HF logo to assets with Git LFS
- Updated modal messaging for GPU selection requirements

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Files changed (6) hide show

.claude/settings.local.json +13 -0
.gitattributes +1 -0
ui/public/assets/hf-logo.svg +3 -0
ui/src/app/layout.tsx +24 -13
ui/src/components/DuplicateSpaceChecker.tsx +17 -0
ui/src/components/DuplicateSpaceModal.tsx +86 -0

.claude/settings.local.json ADDED Viewed

	@@ -0,0 +1,13 @@

+{
+  "permissions": {
+    "allow": [
+      "Bash(npm run build:*)",
+      "Bash(mkdir:*)",
+      "Bash(curl:*)",
+      "Bash(git lfs track:*)",
+      "Bash(git add:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

.gitattributes CHANGED Viewed

@@ -36,3 +36,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 assets/lora_ease_ui.png filter=lfs diff=lfs merge=lfs -text
 assets/VAE_test1.jpg filter=lfs diff=lfs merge=lfs -text
 toolkit/timestep_weighing/flex_timestep_weights_plot.png filter=lfs diff=lfs merge=lfs -text

 assets/lora_ease_ui.png filter=lfs diff=lfs merge=lfs -text
 assets/VAE_test1.jpg filter=lfs diff=lfs merge=lfs -text
 toolkit/timestep_weighing/flex_timestep_weights_plot.png filter=lfs diff=lfs merge=lfs -text
+ui/public/assets/*.svg filter=lfs diff=lfs merge=lfs -text

ui/public/assets/hf-logo.svg ADDED Viewed

Git LFS Details

SHA256: 942cad1ccda905ac5a659dfd2d78b344fccfb84a8a3ac3721e08f488205638a0
Pointer size: 130 Bytes
Size of remote file: 35.3 kB

ui/src/app/layout.tsx CHANGED Viewed

@@ -8,6 +8,8 @@ import SampleImageModal from '@/components/SampleImageModal';
 import { Suspense } from 'react';
 import AuthWrapper from '@/components/AuthWrapper';
 import DocModal from '@/components/DocModal';
 export const dynamic = 'force-dynamic';
@@ -22,25 +24,34 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   // Check if the AI_TOOLKIT_AUTH environment variable is set
   const authRequired = process.env.AI_TOOLKIT_AUTH ? true : false;
   return (
     <html lang="en" className="dark">
       <head>
         <meta name="apple-mobile-web-app-title" content="AI-Toolkit" />
       </head>
       <body className={inter.className}>
-        <ThemeProvider>
-          <AuthWrapper authRequired={authRequired}>
-            <div className="flex h-screen bg-gray-950">
-              <Sidebar />
-              <main className="flex-1 overflow-auto bg-gray-950 text-gray-100 relative">
-                <Suspense>{children}</Suspense>
-              </main>
-            </div>
-          </AuthWrapper>
-        </ThemeProvider>
-        <ConfirmModal />
-        <DocModal />
-        <SampleImageModal />
       </body>
     </html>
   );

 import { Suspense } from 'react';
 import AuthWrapper from '@/components/AuthWrapper';
 import DocModal from '@/components/DocModal';
+import DuplicateSpaceModal from '@/components/DuplicateSpaceModal';
+import DuplicateSpaceChecker from '@/components/DuplicateSpaceChecker';
 export const dynamic = 'force-dynamic';
   // Check if the AI_TOOLKIT_AUTH environment variable is set
   const authRequired = process.env.AI_TOOLKIT_AUTH ? true : false;
+  // Check if ASK_USER_TO_DUPLICATE is set to a truthy value
+  const askUserToDuplicate = process.env.ASK_USER_TO_DUPLICATE;
+  const shouldShowDuplicateModal = !!(askUserToDuplicate &&
+    ['true', '1', 'yes', 'on'].includes(askUserToDuplicate.toLowerCase().trim()));
   return (
     <html lang="en" className="dark">
       <head>
         <meta name="apple-mobile-web-app-title" content="AI-Toolkit" />
       </head>
       <body className={inter.className}>
+        <div className={shouldShowDuplicateModal ? 'blur-sm pointer-events-none' : ''}>
+          <ThemeProvider>
+            <AuthWrapper authRequired={authRequired}>
+              <div className="flex h-screen bg-gray-950">
+                <Sidebar />
+                <main className="flex-1 overflow-auto bg-gray-950 text-gray-100 relative">
+                  <Suspense>{children}</Suspense>
+                </main>
+              </div>
+            </AuthWrapper>
+          </ThemeProvider>
+          <ConfirmModal />
+          <DocModal />
+          <SampleImageModal />
+        </div>
+        <DuplicateSpaceModal />
+        <DuplicateSpaceChecker shouldShowModal={shouldShowDuplicateModal} />
       </body>
     </html>
   );

ui/src/components/DuplicateSpaceChecker.tsx ADDED Viewed

	@@ -0,0 +1,17 @@

+'use client';
+import { useEffect } from 'react';
+import { openDuplicateModal } from './DuplicateSpaceModal';
+interface DuplicateSpaceCheckerProps {
+  shouldShowModal: boolean;
+}
+export default function DuplicateSpaceChecker({ shouldShowModal }: DuplicateSpaceCheckerProps) {
+  useEffect(() => {
+    if (shouldShowModal) {
+      openDuplicateModal();
+    }
+  }, [shouldShowModal]);
+  return null;
+}

ui/src/components/DuplicateSpaceModal.tsx ADDED Viewed

	@@ -0,0 +1,86 @@

+'use client';
+import { createGlobalState } from 'react-global-hooks';
+import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react';
+import React from 'react';
+import Image from 'next/image';
+interface DuplicateModalState {
+  isOpen: boolean;
+}
+export const duplicateModalState = createGlobalState<DuplicateModalState>({ isOpen: false });
+export const openDuplicateModal = () => {
+  duplicateModalState.set({ isOpen: true });
+};
+export const closeDuplicateModal = () => {
+  duplicateModalState.set({ isOpen: false });
+};
+export default function DuplicateSpaceModal() {
+  const [state] = duplicateModalState.use();
+  const isOpen = state.isOpen;
+  const handleDuplicate = () => {
+    window.open('https://huggingface.co/spaces/jbilcke-hf/ai-toolkit?duplicate=true', '_blank');
+  };
+  return (
+    <Dialog open={isOpen} onClose={() => {}} className="relative z-50" static>
+      <DialogBackdrop
+        transition
+        className="fixed inset-0 bg-black/50 backdrop-saturate-150 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
+      />
+      <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
+        <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+          <DialogPanel
+            transition
+            className="relative transform overflow-hidden rounded-2xl bg-gradient-to-b from-gray-800 to-gray-900 text-left shadow-2xl transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-full sm:max-w-md data-closed:sm:translate-y-0 data-closed:sm:scale-95 border border-gray-700"
+          >
+            <div className="absolute inset-0 bg-gradient-to-br from-blue-600/10 via-transparent to-orange-600/10 pointer-events-none" />
+            <div className="relative px-6 pt-8 pb-6">
+              <div className="flex flex-col items-center text-center">
+                <div className="mb-4 p-3 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-2xl shadow-lg">
+                  <Image src="/assets/hf-logo.svg" alt="Hugging Face" width={40} height={40} />
+                </div>
+                <h3 className="text-2xl font-bold text-white mb-3 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
+                  Clone to Continue
+                </h3>
+                <div className="space-y-3 text-gray-300">
+                  <p className="text-base leading-relaxed">
+                    This Hugging Face Space needs to be duplicated to your account before you can use it.
+                  </p>
+                  <p className="text-sm text-gray-400">
+                    Click below to create your own copy of this Space.
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div className="relative bg-gradient-to-b from-gray-800/50 to-gray-900 px-6 py-5">
+              <button
+                type="button"
+                onClick={handleDuplicate}
+                className="w-full inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-orange-500 to-yellow-500 px-6 py-3 text-base font-semibold text-white shadow-lg hover:from-orange-600 hover:to-yellow-600 transform hover:scale-[1.02] transition-all duration-200"
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7v8a2 2 0 002 2h6m0-6v6m0-6l-3-3m3 3l3-3" />
+                </svg>
+                Duplicate this Space
+              </button>
+              <p className="mt-3 text-xs text-center text-gray-400">
+                You'll need to select a GPU suitable for your AI model training needs
+              </p>
+            </div>
+          </DialogPanel>
+        </div>
+      </div>
+    </Dialog>
+  );
+}