[New Feature] Support SAM 2.1 (#59)

* support sam 2.1

* refine config path and ckpt path

* update README

demo/frontend/src/routes/DemoPage.tsx

@@ -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 Toolbar from '@/common/components/toolbar/Toolbar';
+import DemoVideoEditor from '@/common/components/video/editor/DemoVideoEditor';
+import useInputVideo from '@/common/components/video/useInputVideo';
+import StatsView from '@/debug/stats/StatsView';
+import {VideoData} from '@/demo/atoms';
+import DemoPageLayout from '@/layouts/DemoPageLayout';
+import {DemoPageQuery} from '@/routes/__generated__/DemoPageQuery.graphql';
+import {useEffect, useMemo} from 'react';
+import {graphql, useLazyLoadQuery} from 'react-relay';
+import {Location, useLocation} from 'react-router-dom';
+
+type LocationState = {
+  video?: VideoData;
+};
+
+export default function DemoPage() {
+  const {state} = useLocation() as Location<LocationState>;
+  const data = useLazyLoadQuery<DemoPageQuery>(
+    graphql`
+      query DemoPageQuery {
+        defaultVideo {
+          path
+          posterPath
+          url
+          posterUrl
+          height
+          width
+        }
+      }
+    `,
+    {},
+  );
+  const {setInputVideo} = useInputVideo();
+
+  const video = useMemo(() => {
+    return state?.video ?? data.defaultVideo;
+  }, [state, data]);
+
+  useEffect(() => {
+    setInputVideo(video);
+  }, [video, setInputVideo]);
+
+  return (
+    <DemoPageLayout>
+      <StatsView />
+      <Toolbar />
+      <DemoVideoEditor video={video} />
+    </DemoPageLayout>
+  );
+}

demo/frontend/src/routes/DemoPageWrapper.tsx

@@ -0,0 +1,87 @@
+/**
+ * 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 LoadingStateScreen from '@/common/loading/LoadingStateScreen';
+import DemoPage from '@/routes/DemoPage';
+import stylex from '@stylexjs/stylex';
+import {isFirefox} from 'react-device-detect';
+
+const styles = stylex.create({
+  link: {
+    textDecorationLine: 'underline',
+    color: '#A7B3BF',
+  },
+});
+
+const REQUIRED_WINDOW_APIS = ['VideoEncoder', 'VideoDecoder', 'VideoFrame'];
+
+function isBrowserSupported() {
+  for (const api of REQUIRED_WINDOW_APIS) {
+    if (!(api in window)) {
+      return false;
+    }
+  }
+
+  // Test if transferControlToOffscreen is supported. For example, this will
+  // fail on iOS version < 16.4
+  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/transferControlToOffscreen
+  const canvas = document.createElement('canvas');
+  if (typeof canvas.transferControlToOffscreen !== 'function') {
+    return false;
+  }
+
+  return true;
+}
+
+export default function DemoPageWrapper() {
+  const isBrowserUnsupported = !isBrowserSupported();
+
+  if (isBrowserUnsupported && isFirefox) {
+    const nightlyUrl = 'https://wiki.mozilla.org/Nightly';
+    return (
+      <LoadingStateScreen
+        title="Sorry Firefox!"
+        description={
+          <div>
+            This version of Firefox doesn’t support the video features we’ll
+            need to run this demo. You can either update Firefox to the latest
+            nightly build{' '}
+            <a
+              {...stylex.props(styles.link)}
+              href={nightlyUrl}
+              target="_blank"
+              rel="noreferrer">
+              here
+            </a>
+            , or try again using Chrome or Safari.
+          </div>
+        }
+        linkProps={{to: '..', label: 'Back to homepage'}}
+      />
+    );
+  }
+
+  if (isBrowserUnsupported) {
+    return (
+      <LoadingStateScreen
+        title="Uh oh, this browser isn’t supported."
+        description="This browser doesn’t support the video features we’ll need to run this demo. Try again using Chrome, Safari, or Firefox Nightly."
+        linkProps={{to: '..', label: 'Back to homepage'}}
+      />
+    );
+  }
+
+  return <DemoPage />;
+}

demo/frontend/src/routes/PageNotFoundPage.tsx

@@ -0,0 +1,29 @@
+/**
+ * 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 LoadingStateScreen from '@/common/loading/LoadingStateScreen';
+
+export default function PageNotFoundPage() {
+  return (
+    <LoadingStateScreen
+      title="Page not found"
+      description="It looks like you might be in the wrong place."
+      linkProps={{
+        to: '..',
+        label: 'Click here to access the SAM 2 Demo',
+      }}
+    />
+  );
+}

demo/frontend/src/routes/__generated__/DemoPageQuery.graphql.ts

@@ -0,0 +1,114 @@
+/**
+ * @generated SignedSource<<f457eacd20a61cba601921caee2a18f5>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest, Query } from 'relay-runtime';
+export type DemoPageQuery$variables = Record<PropertyKey, never>;
+export type DemoPageQuery$data = {
+  readonly defaultVideo: {
+    readonly height: number;
+    readonly path: string;
+    readonly posterPath: string | null | undefined;
+    readonly posterUrl: string;
+    readonly url: string;
+    readonly width: number;
+  };
+};
+export type DemoPageQuery = {
+  response: DemoPageQuery$data;
+  variables: DemoPageQuery$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "alias": null,
+    "args": null,
+    "concreteType": "Video",
+    "kind": "LinkedField",
+    "name": "defaultVideo",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "path",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "posterPath",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "url",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "posterUrl",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "height",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "width",
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": [],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "DemoPageQuery",
+    "selections": (v0/*: any*/),
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [],
+    "kind": "Operation",
+    "name": "DemoPageQuery",
+    "selections": (v0/*: any*/)
+  },
+  "params": {
+    "cacheID": "71cbafce4d2d047acdc54d86504f2d2e",
+    "id": null,
+    "metadata": {},
+    "name": "DemoPageQuery",
+    "operationKind": "query",
+    "text": "query DemoPageQuery {\n  defaultVideo {\n    path\n    posterPath\n    url\n    posterUrl\n    height\n    width\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "63c9465d78b30d42d6fc11e50a9af142";
+
+export default node;