SAM2.1

SAM2.1 checkpoints + training code + Demo

demo/frontend/src/common/components/snackbar/DemoMessagesSnackbarUtils.ts

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {EnqueueOption} from '@/common/components/snackbar/useMessagesSnackbar';
+
+export type MessageOptions = EnqueueOption & {
+  repeat?: boolean;
+};
+
+type MessageEvent = {
+  text: string;
+  shown: boolean;
+  action?: Element;
+  options?: MessageOptions;
+};
+
+export interface MessagesEventMap {
+  startSession: MessageEvent;
+  firstClick: MessageEvent;
+  pointClick: MessageEvent;
+  addObjectClick: MessageEvent;
+  trackAndPlayClick: MessageEvent;
+  trackAndPlayComplete: MessageEvent;
+  trackAndPlayThrottlingWarning: MessageEvent;
+  effectsMessage: MessageEvent;
+}
+
+export const defaultMessageMap: MessagesEventMap = {
+  startSession: {
+    text: 'Starting session',
+    shown: false,
+    options: {type: 'loading', showClose: false, repeat: true, duration: 2000},
+  },
+  firstClick: {
+    text: 'Tip: Click on any object in the video to get started.',
+    shown: false,
+    options: {expire: false, repeat: false},
+  },
+  pointClick: {
+    text: 'Tip: Not what you expected? Add a few more clicks until the full object you want is selected.',
+    shown: false,
+    options: {expire: false, repeat: false},
+  },
+  addObjectClick: {
+    text: 'Tip: Add a new object by clicking on it in the video.',
+    shown: false,
+    options: {expire: false, repeat: false},
+  },
+  trackAndPlayClick: {
+    text: 'Hang tight while your objects are tracked! You’ll be able to apply visual effects in the next step. Stop tracking at any point to adjust your selections if the tracking doesn’t look right.',
+    shown: false,
+    options: {expire: false, repeat: false},
+  },
+  trackAndPlayComplete: {
+    text: 'Tip: You can fix tracking issues by going back to the frames where tracking is not quite right and adding or removing clicks.',
+    shown: false,
+    options: {expire: false, repeat: false},
+  },
+  trackAndPlayThrottlingWarning: {
+    text: 'Looks like you have clicked the tracking button a bit too often! To keep things running smoothly, we have temporarily disabled the button.',
+    shown: false,
+    options: {repeat: true},
+  },
+  effectsMessage: {
+    text: 'Tip: If you aren’t sure where to get started, click “Surprise Me” to apply a surprise effect to your video.',
+    shown: false,
+    options: {expire: false, repeat: false},
+  },
+};

demo/frontend/src/common/components/snackbar/MessagesSnackbar.tsx

@@ -0,0 +1,118 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import useScreenSize from '@/common/screen/useScreenSize';
+import {color, gradients} from '@/theme/tokens.stylex';
+import {Close} from '@carbon/icons-react';
+import stylex from '@stylexjs/stylex';
+import {useAtomValue} from 'jotai';
+import {Loading, RadialProgress} from 'react-daisyui';
+import {messageAtom} from './snackbarAtoms';
+import useExpireMessage from './useExpireMessage';
+import useMessagesSnackbar from './useMessagesSnackbar';
+
+const styles = stylex.create({
+  container: {
+    position: 'absolute',
+    top: '8px',
+    right: '8px',
+  },
+  mobileContainer: {
+    position: 'absolute',
+    bottom: '8px',
+    left: '8px',
+    right: '8px',
+  },
+  messageContainer: {
+    padding: '20px 20px',
+    color: '#FFF',
+    borderRadius: '8px',
+    fontSize: '0.9rem',
+    maxWidth: 400,
+    border: '2px solid transparent',
+    background: gradients['yellowTeal'],
+  },
+  messageWarningContainer: {
+    background: '#FFDC32',
+    color: color['gray-900'],
+  },
+  messageContent: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+  },
+  progress: {
+    flexShrink: 0,
+    color: 'rgba(255, 255, 255, 0.1)',
+  },
+  closeColumn: {
+    display: 'flex',
+    alignSelf: 'stretch',
+    alignItems: 'start',
+  },
+});
+
+export default function MessagesSnackbar() {
+  const message = useAtomValue(messageAtom);
+  const {clearMessage} = useMessagesSnackbar();
+  const {isMobile} = useScreenSize();
+
+  useExpireMessage();
+
+  if (message == null) {
+    return null;
+  }
+
+  const closeIcon = (
+    <Close
+      size={24}
+      color={message.type === 'warning' ? color['gray-900'] : 'white'}
+      opacity={1}
+      className="z-20 hover:text-gray-300 color-white cursor-pointer !opacity-100 shrink-0"
+      onClick={clearMessage}
+    />
+  );
+
+  return (
+    <div
+      {...stylex.props(isMobile ? styles.mobileContainer : styles.container)}>
+      <div
+        {...stylex.props(
+          styles.messageContainer,
+          message.type === 'warning' && styles.messageWarningContainer,
+        )}>
+        <div {...stylex.props(styles.messageContent)}>
+          <div>{message.text}</div>
+          {message.type === 'loading' && <Loading size="xs" variant="dots" />}
+          {message.showClose && (
+            <div {...stylex.props(styles.closeColumn)}>
+              {message.expire ? (
+                <RadialProgress
+                  value={message.progress * 100}
+                  size="32px"
+                  thickness="2px"
+                  {...stylex.props(styles.progress)}>
+                  {closeIcon}
+                </RadialProgress>
+              ) : (
+                closeIcon
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

demo/frontend/src/common/components/snackbar/snackbarAtoms.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {atom} from 'jotai';
+
+export type MessageType = 'info' | 'loading' | 'warning';
+
+export type Message = {
+  type: MessageType;
+  text: string;
+  duration: number;
+  progress: number;
+  startTime: number;
+  expire: boolean;
+  showClose: boolean;
+  showReset: boolean;
+};
+
+export const messageAtom = atom<Message | null>(null);

demo/frontend/src/common/components/snackbar/useDemoMessagesSnackbar.ts

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {MessagesEventMap} from '@/common/components/snackbar/DemoMessagesSnackbarUtils';
+import useMessagesSnackbar from '@/common/components/snackbar/useMessagesSnackbar';
+import {messageMapAtom} from '@/demo/atoms';
+import {useAtom} from 'jotai';
+import {useCallback} from 'react';
+
+type State = {
+  enqueueMessage: (messageType: keyof MessagesEventMap) => void;
+  clearMessage: () => void;
+};
+
+export default function useDemoMessagesSnackbar(): State {
+  const [messageMap, setMessageMap] = useAtom(messageMapAtom);
+  const {enqueueMessage: enqueue, clearMessage} = useMessagesSnackbar();
+
+  const enqueueMessage = useCallback(
+    (messageType: keyof MessagesEventMap) => {
+      const {text, shown, options} = messageMap[messageType];
+      if (!options?.repeat && shown === true) {
+        return;
+      }
+      enqueue(text, options);
+      const newState = {...messageMap};
+      newState[messageType].shown = true;
+      setMessageMap(newState);
+    },
+    [enqueue, messageMap, setMessageMap],
+  );
+
+  return {enqueueMessage, clearMessage};
+}

demo/frontend/src/common/components/snackbar/useExpireMessage.ts

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {useAtom} from 'jotai';
+import {useEffect, useRef} from 'react';
+import {Message, messageAtom} from '@/common/components/snackbar/snackbarAtoms';
+
+export default function useExpireMessage() {
+  const [message, setMessage] = useAtom(messageAtom);
+  const messageRef = useRef<Message | null>(null);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    messageRef.current = message;
+  }, [message]);
+
+  useEffect(() => {
+    function resetInterval() {
+      if (intervalRef.current != null) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    }
+    if (intervalRef.current == null && message != null && message.expire) {
+      intervalRef.current = setInterval(() => {
+        const prevMessage = messageRef.current;
+        if (prevMessage == null) {
+          setMessage(null);
+          resetInterval();
+          return;
+        }
+        const messageDuration = Date.now() - prevMessage.startTime;
+        if (messageDuration > prevMessage.duration) {
+          setMessage(null);
+          resetInterval();
+          return;
+        }
+        setMessage({
+          ...prevMessage,
+          progress: messageDuration / prevMessage.duration,
+        });
+      }, 20);
+    }
+  }, [message, setMessage]);
+
+  useEffect(() => {
+    return () => {
+      if (intervalRef.current != null) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, []);
+}

demo/frontend/src/common/components/snackbar/useMessagesSnackbar.ts

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {useSetAtom} from 'jotai';
+import {useCallback} from 'react';
+import {
+  MessageType,
+  messageAtom,
+} from '@/common/components/snackbar/snackbarAtoms';
+
+export type EnqueueOption = {
+  duration?: number;
+  type?: MessageType;
+  expire?: boolean;
+  showClose?: boolean;
+  showReset?: boolean;
+};
+
+type State = {
+  clearMessage: () => void;
+  enqueueMessage: (message: string, options?: EnqueueOption) => void;
+};
+
+export default function useMessagesSnackbar(): State {
+  const setMessage = useSetAtom(messageAtom);
+
+  const enqueueMessage = useCallback(
+    (message: string, options?: EnqueueOption) => {
+      setMessage({
+        text: message,
+        type: options?.type ?? 'info',
+        duration: options?.duration ?? 5000,
+        progress: 0,
+        startTime: Date.now(),
+        expire: options?.expire ?? true,
+        showClose: options?.showClose ?? true,
+        showReset: options?.showReset ?? false,
+      });
+    },
+    [setMessage],
+  );
+
+  function clearMessage() {
+    setMessage(null);
+  }
+
+  return {enqueueMessage, clearMessage};
+}