working to split long spanning segments into sub-parts for preview

jbilcke-hf · Sep 2, 2024 · 1a43aeb · 1a43aeb
1 parent a7f4beb
commit 1a43aeb
Show file tree

Hide file tree

Showing 23 changed files with 300 additions and 209 deletions.
diff --git a/packages/app/src/components/settings/constants.ts b/packages/app/src/components/settings/constants.ts
@@ -2,8 +2,16 @@ import { ClapWorkflowProvider } from '@aitube/clap'
 
 import { ComfyIcuAccelerator } from '@aitube/clapper-services'
 
-export const ClapWorkflowProviderShortNames = {
+export const ClapWorkflowProviderShortNames: Record<
+  ClapWorkflowProvider,
+  string
+> = {
   [ClapWorkflowProvider.BUILTIN]: 'Clapper',
+  [ClapWorkflowProvider.CIVITAI]: 'Civitai',
+  [ClapWorkflowProvider.HOTSHOT]: 'Hotshot',
+  [ClapWorkflowProvider.LETZAI]: 'Letz.ai',
+  [ClapWorkflowProvider.PIAPI]: 'PiApi',
+  [ClapWorkflowProvider.BIGMODEL]: 'BigModel',
   [ClapWorkflowProvider.ANTHROPIC]: 'Anthropic',
   [ClapWorkflowProvider.COHERE]: 'Cohere',
   [ClapWorkflowProvider.COMFYUI]: 'ComfyUI',

diff --git a/packages/app/src/components/settings/index.tsx b/packages/app/src/components/settings/index.tsx
@@ -67,7 +67,7 @@ export function SettingsDialog() {
                 <Button
                   key={key}
                   variant="ghost"
-                  className="flex w-full flex-col items-end text-right text-base xl:text-lg font-thin capitalize text-neutral-300 border-0 bg-transparent"
+                  className="flex w-full flex-col items-end border-0 bg-transparent text-right text-base font-thin capitalize text-neutral-300 xl:text-lg"
                   onClick={() => setShowSettings(key as SettingsCategory)}
                 >
                   {panelLabels[key]}

diff --git a/packages/app/src/components/toolbars/top-menu/lists/AssistantWorkflows.tsx b/packages/app/src/components/toolbars/top-menu/lists/AssistantWorkflows.tsx
@@ -47,13 +47,14 @@ export function AssistantWorkflows() {
           ai&nbsp;assistant
         </Tag>
         <div className={cn(`flex flex-row items-center space-x-2`)}>
-          {workflow?.provider && (
-            <ClapWorkflowProviderLogo
-              provider={workflow?.provider}
-              height={18}
-              className={cn(`rounded-full`)}
-            />
-          )}
+          {workflow?.provider &&
+            workflow?.provider !== ClapWorkflowProvider.NONE && (
+              <ClapWorkflowProviderLogo
+                provider={workflow?.provider}
+                height={18}
+                className={cn(`rounded-full`)}
+              />
+            )}
           <div>{workflow?.label || 'None'}</div>
         </div>
       </MenubarSubTrigger>

diff --git a/packages/app/src/components/toolbars/top-menu/lists/ImageDepthWorkflows.tsx b/packages/app/src/components/toolbars/top-menu/lists/ImageDepthWorkflows.tsx
@@ -47,13 +47,14 @@ export function ImageDepthWorkflows() {
           depth&nbsp;mapper
         </Tag>
         <div className={cn(`flex flex-row items-center space-x-2`)}>
-          {workflow?.provider && (
-            <ClapWorkflowProviderLogo
-              provider={workflow?.provider}
-              height={18}
-              className={cn(`rounded-full`)}
-            />
-          )}
+          {workflow?.provider &&
+            workflow?.provider !== ClapWorkflowProvider.NONE && (
+              <ClapWorkflowProviderLogo
+                provider={workflow?.provider}
+                height={18}
+                className={cn(`rounded-full`)}
+              />
+            )}
           <div>{workflow?.label || 'None'}</div>
         </div>
       </MenubarSubTrigger>

diff --git a/packages/app/src/components/toolbars/top-menu/lists/ImageFaceswapWorkflows.tsx b/packages/app/src/components/toolbars/top-menu/lists/ImageFaceswapWorkflows.tsx
@@ -49,13 +49,14 @@ export function ImageFaceswapWorkflows() {
           face&nbsp;swap
         </Tag>
         <div className={cn(`flex flex-row items-center space-x-2`)}>
-          {workflow?.provider && (
-            <ClapWorkflowProviderLogo
-              provider={workflow?.provider}
-              height={18}
-              className={cn(`rounded-full`)}
-            />
-          )}
+          {workflow?.provider &&
+            workflow?.provider !== ClapWorkflowProvider.NONE && (
+              <ClapWorkflowProviderLogo
+                provider={workflow?.provider}
+                height={18}
+                className={cn(`rounded-full`)}
+              />
+            )}
           <div>{workflow?.label || 'None'}</div>
         </div>
       </MenubarSubTrigger>

diff --git a/packages/app/src/components/toolbars/top-menu/lists/ImageGenerationWorkflows.tsx b/packages/app/src/components/toolbars/top-menu/lists/ImageGenerationWorkflows.tsx
@@ -59,13 +59,14 @@ export function ImageGenerationWorkflows() {
           generate&nbsp;image
         </Tag>
         <div className={cn(`flex flex-row items-center space-x-2`)}>
-          {workflow?.provider && (
-            <ClapWorkflowProviderLogo
-              provider={workflow?.provider}
-              height={18}
-              className={cn(`rounded-full`)}
-            />
-          )}
+          {workflow?.provider &&
+            workflow?.provider !== ClapWorkflowProvider.NONE && (
+              <ClapWorkflowProviderLogo
+                provider={workflow?.provider}
+                height={18}
+                className={cn(`rounded-full`)}
+              />
+            )}
           <div>{workflow?.label || 'None'}</div>
         </div>
       </MenubarSubTrigger>

diff --git a/packages/app/src/components/toolbars/top-menu/lists/ImageSegmentationWorkflows.tsx b/packages/app/src/components/toolbars/top-menu/lists/ImageSegmentationWorkflows.tsx
@@ -51,13 +51,14 @@ export function ImageSegmentationWorkflows() {
           segmentation
         </Tag>
         <div className={cn(`flex flex-row items-center space-x-2`)}>
-          {workflow?.provider && (
-            <ClapWorkflowProviderLogo
-              provider={workflow?.provider}
-              height={18}
-              className={cn(`rounded-full`)}
-            />
-          )}
+          {workflow?.provider &&
+            workflow?.provider !== ClapWorkflowProvider.NONE && (
+              <ClapWorkflowProviderLogo
+                provider={workflow?.provider}
+                height={18}
+                className={cn(`rounded-full`)}
+              />
+            )}
           <div>{workflow?.label || 'None'}</div>
         </div>
       </MenubarSubTrigger>

diff --git a/packages/app/src/components/toolbars/top-menu/lists/ImageUpscalingWorkflows.tsx b/packages/app/src/components/toolbars/top-menu/lists/ImageUpscalingWorkflows.tsx
@@ -49,13 +49,14 @@ export function ImageUpscalingWorkflows() {
           upscale&nbsp;image
         </Tag>
         <div className={cn(`flex flex-row items-center space-x-2`)}>
-          {workflow?.provider && (
-            <ClapWorkflowProviderLogo
-              provider={workflow?.provider}
-              height={18}
-              className={cn(`rounded-full`)}
-            />
-          )}
+          {workflow?.provider &&
+            workflow?.provider !== ClapWorkflowProvider.NONE && (
+              <ClapWorkflowProviderLogo
+                provider={workflow?.provider}
+                height={18}
+                className={cn(`rounded-full`)}
+              />
+            )}
           <div>{workflow?.label || 'None'}</div>
         </div>
       </MenubarSubTrigger>

diff --git a/packages/app/src/components/toolbars/top-menu/lists/MusicGenerationWorkflows.tsx b/packages/app/src/components/toolbars/top-menu/lists/MusicGenerationWorkflows.tsx
@@ -49,13 +49,14 @@ export function MusicGenerationWorkflows() {
           generate&nbsp;music
         </Tag>
         <div className={cn(`flex flex-row items-center space-x-2`)}>
-          {workflow?.provider && (
-            <ClapWorkflowProviderLogo
-              provider={workflow?.provider}
-              height={18}
-              className={cn(`rounded-full`)}
-            />
-          )}
+          {workflow?.provider &&
+            workflow?.provider !== ClapWorkflowProvider.NONE && (
+              <ClapWorkflowProviderLogo
+                provider={workflow?.provider}
+                height={18}
+                className={cn(`rounded-full`)}
+              />
+            )}
           <div>{workflow?.label || 'None'}</div>
         </div>
       </MenubarSubTrigger>

diff --git a/packages/app/src/components/toolbars/top-menu/lists/SoundGenerationWorkflows.tsx b/packages/app/src/components/toolbars/top-menu/lists/SoundGenerationWorkflows.tsx
@@ -49,13 +49,14 @@ export function SoundGenerationWorkflows() {
           generate&nbsp;sound
         </Tag>
         <div className={cn(`flex flex-row items-center space-x-2`)}>
-          {workflow?.provider && (
-            <ClapWorkflowProviderLogo
-              provider={workflow?.provider}
-              height={18}
-              className={cn(`rounded-full`)}
-            />
-          )}
+          {workflow?.provider &&
+            workflow?.provider !== ClapWorkflowProvider.NONE && (
+              <ClapWorkflowProviderLogo
+                provider={workflow?.provider}
+                height={18}
+                className={cn(`rounded-full`)}
+              />
+            )}
           <div>{workflow?.label || 'None'}</div>
         </div>
       </MenubarSubTrigger>

diff --git a/packages/app/src/components/toolbars/top-menu/lists/VideoDepthWorkflows.tsx b/packages/app/src/components/toolbars/top-menu/lists/VideoDepthWorkflows.tsx
@@ -47,13 +47,14 @@ export function VideoDepthWorkflows() {
           depth&nbsp;mapper
         </Tag>
         <div className={cn(`flex flex-row items-center space-x-2`)}>
-          {workflow?.provider && (
-            <ClapWorkflowProviderLogo
-              provider={workflow?.provider}
-              height={18}
-              className={cn(`rounded-full`)}
-            />
-          )}
+          {workflow?.provider &&
+            workflow?.provider !== ClapWorkflowProvider.NONE && (
+              <ClapWorkflowProviderLogo
+                provider={workflow?.provider}
+                height={18}
+                className={cn(`rounded-full`)}
+              />
+            )}
           <div>{workflow?.label || 'None'}</div>
         </div>
       </MenubarSubTrigger>

diff --git a/packages/app/src/components/toolbars/top-menu/lists/VideoGenerationWorkflows.tsx b/packages/app/src/components/toolbars/top-menu/lists/VideoGenerationWorkflows.tsx
@@ -49,13 +49,14 @@ export function VideoGenerationWorkflows() {
           generate&nbsp;video
         </Tag>
         <div className={cn(`flex flex-row items-center space-x-2`)}>
-          {workflow?.provider && (
-            <ClapWorkflowProviderLogo
-              provider={workflow?.provider}
-              height={18}
-              className={cn(`rounded-full`)}
-            />
-          )}
+          {workflow?.provider &&
+            workflow?.provider !== ClapWorkflowProvider.NONE && (
+              <ClapWorkflowProviderLogo
+                provider={workflow?.provider}
+                height={18}
+                className={cn(`rounded-full`)}
+              />
+            )}
           <div>{workflow?.label || 'None'}</div>
         </div>
       </MenubarSubTrigger>

diff --git a/packages/app/src/components/toolbars/top-menu/lists/VideoLipsyncWorkflows.tsx b/packages/app/src/components/toolbars/top-menu/lists/VideoLipsyncWorkflows.tsx
@@ -47,13 +47,14 @@ export function VideoLipsyncWorkflows() {
           video&nbsp;lipsync
         </Tag>
         <div className={cn(`flex flex-row items-center space-x-2`)}>
-          {workflow?.provider && (
-            <ClapWorkflowProviderLogo
-              provider={workflow?.provider}
-              height={18}
-              className={cn(`rounded-full`)}
-            />
-          )}
+          {workflow?.provider &&
+            workflow?.provider !== ClapWorkflowProvider.NONE && (
+              <ClapWorkflowProviderLogo
+                provider={workflow?.provider}
+                height={18}
+                className={cn(`rounded-full`)}
+              />
+            )}
           <div>{workflow?.label || 'None'}</div>
         </div>
       </MenubarSubTrigger>

diff --git a/packages/app/src/components/toolbars/top-menu/lists/VideoSegmentationWorkflows.tsx b/packages/app/src/components/toolbars/top-menu/lists/VideoSegmentationWorkflows.tsx
@@ -51,13 +51,14 @@ export function VideoSegmentationWorkflows() {
           segmentation
         </Tag>
         <div className={cn(`flex flex-row items-center space-x-2`)}>
-          {workflow?.provider && (
-            <ClapWorkflowProviderLogo
-              provider={workflow?.provider}
-              height={18}
-              className={cn(`rounded-full`)}
-            />
-          )}
+          {workflow?.provider &&
+            workflow?.provider !== ClapWorkflowProvider.NONE && (
+              <ClapWorkflowProviderLogo
+                provider={workflow?.provider}
+                height={18}
+                className={cn(`rounded-full`)}
+              />
+            )}
           <div>{workflow?.label || 'None'}</div>
         </div>
       </MenubarSubTrigger>

diff --git a/packages/app/src/components/toolbars/top-menu/lists/VideoUpscalingWorkflows.tsx b/packages/app/src/components/toolbars/top-menu/lists/VideoUpscalingWorkflows.tsx
@@ -49,13 +49,14 @@ export function VideoUpscalingWorkflows() {
           upscale&nbsp;video
         </Tag>
         <div className={cn(`flex flex-row items-center space-x-2`)}>
-          {workflow?.provider && (
-            <ClapWorkflowProviderLogo
-              provider={workflow?.provider}
-              height={18}
-              className={cn(`rounded-full`)}
-            />
-          )}
+          {workflow?.provider &&
+            workflow?.provider !== ClapWorkflowProvider.NONE && (
+              <ClapWorkflowProviderLogo
+                provider={workflow?.provider}
+                height={18}
+                className={cn(`rounded-full`)}
+              />
+            )}
           <div>{workflow?.label || 'None'}</div>
         </div>
       </MenubarSubTrigger>

diff --git a/packages/app/src/components/toolbars/top-menu/lists/VoiceGenerationWorkflows.tsx b/packages/app/src/components/toolbars/top-menu/lists/VoiceGenerationWorkflows.tsx
@@ -49,13 +49,14 @@ export function VoiceGenerationWorkflows() {
           generate&nbsp;voice
         </Tag>
         <div className={cn(`flex flex-row items-center space-x-2`)}>
-          {workflow?.provider && (
-            <ClapWorkflowProviderLogo
-              provider={workflow?.provider}
-              height={18}
-              className={cn(`rounded-full`)}
-            />
-          )}
+          {workflow?.provider &&
+            workflow?.provider !== ClapWorkflowProvider.NONE && (
+              <ClapWorkflowProviderLogo
+                provider={workflow?.provider}
+                height={18}
+                className={cn(`rounded-full`)}
+              />
+            )}
           <div>{workflow?.label || 'None'}</div>
         </div>
       </MenubarSubTrigger>

diff --git a/packages/app/src/lib/core/constants.ts b/packages/app/src/lib/core/constants.ts
@@ -3,7 +3,7 @@
 export const HARD_LIMIT_NB_MAX_ASSETS_TO_GENERATE_IN_PARALLEL = 32
 
 export const APP_NAME = 'Clapper.app'
-export const APP_REVISION = '20240902+1413'
+export const APP_REVISION = '20240902+1758'
 
 export const APP_DOMAIN = 'Clapper.app'
 export const APP_LINK = 'https://clapper.app'

diff --git a/packages/app/src/lib/hooks/useQueryStringParams.ts b/packages/app/src/lib/hooks/useQueryStringParams.ts
@@ -23,16 +23,15 @@ export function useQueryStringParams(
     imageStrategy: RenderingStrategy.ON_DEMAND,
   }
 ) {
-
   /**
-   * 
+   *
    * TODO:
-   * 
+   *
    * Use nuqs maybe?
-   * 
+   *
    * https://nuqs.47ng.com
-   * 
-   * 
+   *
+   *
    */
   const searchParams = useSearchParams()