Initial commit

demo/frontend/src/theme/colors.ts

+/**
+ * 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.
+ */
+export const THEME_COLORS = [
+  '#3880F3',
+  '#F0AA19',
+  '#00D2BE',
+  '#28D232',
+  '#8773FF',
+  '#00C8F0',
+  '#FA8719',
+  '#E6193B',
+  '#FA7DC8',
+];

demo/frontend/src/theme/gradientStyle.ts

+/**
+ * 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.
+ */
+export const BLUE_PINK_FILL = 'from-[#595FEF] from-40% to-[#FB73A5]';
+export const BLUE_PINK_FILL_BR =
+  'bg-gradient-to-br from-[#595FEF] from-30% to-[#FB73A5]';

demo/frontend/src/theme/tokens.stylex.ts

+/**
+ * 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 * as stylex from '@stylexjs/stylex';
+
+export const spacing = stylex.defineVars({
+  '0': '0rem',
+  '0.5': '0.125rem',
+  '1': '0.25rem',
+  '1.5': '0.375rem',
+  '2': '0.5rem',
+  '2.5': '0.625rem',
+  '3': '0.75rem',
+  '3.5': '0.875rem',
+  '4': '1rem',
+  '5': '1.25rem',
+  '6': '1.5rem',
+  '7': '1.75rem',
+  '8': '2rem',
+  '9': '2.25rem',
+  '10': '2.5rem',
+  '11': '2.75rem',
+  '12': '3rem',
+});
+
+export const gap = stylex.defineVars({
+  4: '1rem' /* 16px */,
+});
+
+export const w = stylex.defineVars({
+  full: '100%',
+  12: '3rem' /* 48px */,
+  96: '24rem' /* 384px */,
+});
+
+export const m = stylex.defineVars({
+  3: '0.75rem' /* 12px */,
+});
+
+export const fontSize = stylex.defineVars({
+  xs: '0.75rem',
+  sm: '0.875rem',
+  base: '1rem',
+  lg: '1.125rem',
+  xl: '1.25rem',
+  '2xl': '1.5rem',
+});
+
+export const fontWeight = stylex.defineVars({
+  thin: 100,
+  extralight: 200,
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  extrabold: 800,
+});
+
+export const color = stylex.defineVars({
+  subtitle: 'rgb(107 114 128)',
+  'gray-900': 'rgb(17 24 39)',
+  'gray-800': 'rgb(26 28 31)',
+  'gray-700': 'rgb(55 62 65)',
+  'blue-600': 'rgb(37 99 235)',
+});
+
+export const screenSizes = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536,
+};
+
+export const borderRadius = stylex.defineVars({
+  sm: '0.125rem',
+  md: '0.375rem',
+  lg: '0.5rem',
+  xl: '0.75rem',
+});
+
+export const top = stylex.defineVars({
+  0: 0,
+  1: '0.25rem' /* 4px */,
+  2: '0.5rem' /* 8px */,
+});
+
+export const right = stylex.defineVars({
+  0: 0,
+  1: '0.25rem' /* 4px */,
+  2: '0.5rem' /* 8px */,
+});
+
+export const gradients = stylex.defineVars({
+  rainbow:
+    'linear-gradient(#000, #000) padding-box, linear-gradient(to right bottom, #FB73A5,#595FEF,#94EAE2,#FCCB6B) border-box',
+
+  rainbowReverse:
+    'linear-gradient(#000, #000) padding-box, linear-gradient(to left top, #FB73A5,#595FEF,#94EAE2,#FCCB6B) border-box',
+
+  yellowTeal:
+    'linear-gradient(#000, #000) padding-box, linear-gradient(to right bottom, #94EAE2,#FCCB6B) border-box',
+});

demo/frontend/src/types/mp4box/index.d.ts

+/**
+ * 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.
+ */
+declare module 'mp4box' {
+  export interface MP4MediaTrackEdit {
+    media_rate_fraction: number;
+    media_rate_integer: number;
+    media_time: number;
+    segment_duration: number;
+  }
+
+  export interface MP4MediaTrack {
+    id: number;
+    created: Date;
+    modified: Date;
+    movie_duration: number;
+    movie_timescale: number;
+    layer: number;
+    alternate_group: number;
+    volume: number;
+    track_width: number;
+    track_height: number;
+    timescale: number;
+    duration: number;
+    bitrate: number;
+    codec: string;
+    language: string;
+    nb_samples: number;
+    samples_duration: number;
+    edits: MP4MediaTrackEdit[];
+  }
+
+  export interface MP4VideoData {
+    width: number;
+    height: number;
+  }
+
+  export interface MP4VideoTrack extends MP4MediaTrack {
+    video: MP4VideoData;
+  }
+
+  export interface MP4AudioData {
+    sample_rate: number;
+    channel_count: number;
+    sample_size: number;
+  }
+
+  export interface MP4AudioTrack extends MP4MediaTrack {
+    audio: MP4AudioData;
+  }
+
+  export type MP4Track = MP4VideoTrack | MP4AudioTrack;
+
+  export interface MP4Info {
+    duration: number;
+    timescale: number;
+    fragment_duration: number;
+    isFragmented: boolean;
+    isProgressive: boolean;
+    hasIOD: boolean;
+    brands: string[];
+    created: Date;
+    modified: Date;
+    tracks: MP4Track[];
+    audioTracks: MP4AudioTrack[];
+    videoTracks: MP4VideoTrack[];
+    otherTracks: MP4VideoTrack[];
+  }
+
+  export interface MP4Sample {
+    alreadyRead: number;
+    chunk_index: number;
+    chunk_run_index: number;
+    cts: number;
+    data: Uint8Array;
+    degradation_priority: number;
+    depends_on: number;
+    description: unknown;
+    description_index: number;
+    dts: number;
+    duration: number;
+    has_redundancy: number;
+    is_depended_on: number;
+    is_leading: number;
+    is_sync: boolean;
+    number: number;
+    offset: number;
+    size: number;
+    timescale: number;
+    track_id: number;
+  }
+
+  export type MP4ArrayBuffer = ArrayBuffer & {fileStart: number};
+
+  export class DataStream {
+    static BIG_ENDIAN: boolean;
+    static LITTLE_ENDIAN: boolean;
+    buffer: ArrayBuffer;
+    constructor(
+      arrayBuffer?: ArrayBuffer,
+      byteOffset: number,
+      endianness: boolean,
+    ): void;
+  }
+
+  export interface Trak {
+    mdia?: {
+      minf?: {
+        stbl?: {
+          stsd?: {
+            entries: {
+              avcC?: {
+                write: (stream: DataStream) => void;
+              };
+              hvcC?: {
+                write: (stream: DataStream) => void;
+              };
+            }[];
+          };
+        };
+      };
+    };
+  }
+
+  export namespace BoxParser {
+    export class Box {
+      size?: number;
+      data?: Uint8Array;
+
+      constructor(type?: string, size?: number);
+
+      add(name: string): Box;
+      addBox(box: Box): Box;
+      addEntry(value: string, prop?: string): void;
+      write(stream: DataStream): void;
+      writeHeader(stream: DataStream, msg?: string): void;
+      computeSize(): void;
+    }
+
+    export class ContainerBox extends Box {}
+
+    export class avcCBox extends ContainerBox {}
+
+    export class hvcCBox extends ContainerBox {}
+
+    export class vpcCBox extends ContainerBox {}
+
+    export class av1CBox extends ContainerBox {}
+  }
+
+  export interface TrackOptions {
+    id?: number;
+    type?: string;
+    width?: number;
+    height?: number;
+    duration?: number;
+    layer?: number;
+    timescale?: number;
+    media_duration?: number;
+    language?: string;
+    hdlr?: string;
+
+    // video
+    avcDecoderConfigRecord?: BufferSource;
+
+    // audio
+    balance?: number;
+    channel_count?: number;
+    samplesize?: number;
+    samplerate?: number;
+
+    //captions
+    namespace?: string;
+    schema_location?: string;
+    auxiliary_mime_types?: string;
+
+    description?: BoxParser.Box;
+    description_boxes?: BoxParser.Box[];
+
+    default_sample_description_index_id?: number;
+    default_sample_duration?: number;
+    default_sample_size?: number;
+    default_sample_flags?: number;
+  }
+
+  export interface SampleOptions {
+    sample_description_index?: number;
+    duration?: number;
+    cts?: number;
+    dts?: number;
+    is_sync?: boolean;
+    is_leading?: number;
+    depends_on?: number;
+    is_depended_on?: number;
+    has_redundancy?: number;
+    degradation_priority?: number;
+  }
+
+  export interface Sample {
+    number: number;
+    track_id: number;
+    timescale: number;
+    description_index: number;
+    description: {
+      avcC?: BoxParser.avcCBox; // h.264
+      hvcC?: BoxParser.hvcCBox; // hevc
+      vpcC?: BoxParser.vpcCBox; // vp9
+      av1C?: BoxParser.av1CBox; // av1
+    };
+    data: ArrayBuffer;
+    size: number;
+    alreadyRead?: number;
+    duration: number;
+    cts: number;
+    dts: number;
+    is_sync: boolean;
+    is_leading?: number;
+    depends_on?: number;
+    is_depended_on?: number;
+    has_redundancy?: number;
+    degradation_priority?: number;
+    offset?: number;
+  }
+
+  export interface MP4File {
+    getBuffer(): MP4ArrayBuffer;
+    addTrack(options?: TrackOptions): number;
+    addSample(
+      track: number,
+      data: ArrayBuffer,
+      options?: SampleOptions,
+    ): Sample;
+    addSample(
+      trackID: number,
+      uint8: Uint8Array,
+      arg2: {duration: number; is_sync: boolean},
+    ): void;
+    onMoovStart?: () => void;
+    onReady?: (info: MP4Info) => void;
+    onError?: (e: string) => void;
+    onSamples?: (id: number, user: unknown, samples: MP4Sample[]) => unknown;
+    appendBuffer(data: MP4ArrayBuffer): number;
+    save(fileName: string): void;
+    start(): void;
+    stop(): void;
+    /**
+     * Indicates that the next samples to process (for extraction or
+     * segmentation) start at the given time (Number, in seconds) or at the
+     * time of the previous Random Access Point (if useRap is true, default
+     * is false). Returns the offset in the file of the next bytes to be
+     * provided via appendBuffer.
+     *
+     * @param time - Start at the given time (Number, in seconds)
+     * @param useRap - Random Access Point (if useRap is true, default is false)
+     * @returns Returns the offset in the file of the next bytes to be provided via appendBuffer.
+     */
+    seek: (time: number, useRap: boolean) => number;
+    flush(): void;
+    releaseUsedSamples(trackId: number, sampleNumber: number): void;
+    setExtractionOptions(
+      trackId: number,
+      user?: unknown,
+      options?: {nbSamples?: number; rapAlignment?: number},
+    ): void;
+    getTrackById(trackId: number): Trak;
+  }
+
+  export function createFile(): MP4File;
+
+  export {};
+}

demo/frontend/src/vite-env.d.ts

+/**
+ * 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.
+ */
+/// <reference types="vite/client" />

demo/frontend/tailwind.config.js

+/**
+ * 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 tailwindCSSTypography from '@tailwindcss/typography';
+import daisyui from 'daisyui';
+import * as daisyColorThemes from 'daisyui/src/theming/themes';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}',
+    'node_modules/daisyui/dist/**/*.js',
+    'node_modules/react-daisyui/dist/**/*.js',
+  ],
+
+  daisyui: {
+    styled: true,
+    themes: [
+      {
+        light: {
+          ...daisyColorThemes['[data-theme=light]'],
+          'base-100': '#FFFFFF',
+          'base-200': '#F1F4F7',
+          'base-300': '#DEE3E9',
+          primary: '#0064E0',
+          'primary-content': '#FFFFFF',
+          secondary: '#0F191E',
+          'secondary-content': '#FFFFFF',
+          accent: '#6441D2',
+          'accent-content': '#FFFFFF',
+          info: '#009B9B',
+          'info-content': '#FFFFFF',
+          success: '#0F9B14',
+          'success-content': '#FFFFFF',
+          warning: '#FA8719',
+          'warning-content': '#FFFFFF',
+          error: '#C80A28',
+          'error-content': '#FFFFFF',
+
+          '--rounded-box': '0.35rem', // border radius rounded-box utility class, used in card and other large boxes
+          '--rounded-btn': '0.35rem', // border radius rounded-btn utility class, used in buttons and similar element
+          '--rounded-badge': '1rem', // border radius rounded-badge utility class, used in badges and similar
+        },
+      },
+      'dark',
+    ],
+  },
+  theme: {
+    fontSize: {
+      xs: ['0.75rem', {lineHeight: '1.5'}],
+      sm: ['0.875rem', {lineHeight: '1.5'}],
+      base: ['1rem', {lineHeight: '1.5'}],
+      lg: ['1.125rem', {lineHeight: '1.2', fontWeight: 500}],
+      xl: ['1.25rem', {lineHeight: '1.2', fontWeight: 500}],
+      '2xl': [
+        '1.5rem',
+        {lineHeight: '1.2', fontWeight: 500, letterSpacing: '0.005rem'},
+      ],
+      '3xl': [
+        '2.25rem',
+        {lineHeight: '1.2', fontWeight: 500, letterSpacing: '0.01rem'},
+      ],
+      '4xl': [
+        '3rem',
+        {lineHeight: '1.2', fontWeight: 500, letterSpacing: '0.016rem'},
+      ],
+      '5xl': [
+        '4rem',
+        {lineHeight: '1.2', fontWeight: 400, letterSpacing: '0.016rem'},
+      ],
+      '6xl': [
+        '5rem',
+        {lineHeight: '1.2', fontWeight: 400, letterSpacing: '0.016rem'},
+      ],
+    },
+    extend: {
+      colors: {
+        graydark: {
+          50: '#f1f4f7',
+          100: '#DEE3E9',
+          200: '#CBD2D9',
+          300: '#A7B3BF',
+          400: '#8595A4',
+          500: '#667788',
+          600: '#465A69',
+          700: '#343845',
+          800: '#1A1C1F',
+          900: '#0F191E',
+        },
+      },
+      lineHeight: {
+        tight: 1.2,
+      },
+      backgroundImage: {
+        dot: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAABdJREFUGBljYGBg+A/FQAoTMGEKDUcRAATwAgFGIXEOAAAAAElFTkSuQmCC)',
+      },
+      keyframes: {
+        wiggle: {
+          '0%, 100%': {transform: 'rotate(-3deg)'},
+          '50%': {transform: 'rotate(3deg)'},
+        },
+      },
+      animation: {
+        wiggle: 'wiggle .25s ease-in-out',
+      },
+      typography: {
+        DEFAULT: {
+          css: {
+            maxWidth: '100%', // add required value here
+            a: {
+              textDecoration: 'none',
+            },
+          },
+        },
+      },
+    },
+  },
+  plugins: [tailwindCSSTypography, daisyui],
+};

demo/frontend/tsconfig.json

+/**
+ * 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.
+ */
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable", "webworker"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true, // esModuleInterop true required for Jest
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    "baseUrl": "./src",
+    "paths": {
+      "mp4box": ["types/mp4box"],
+      "@/*": ["*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{"path": "./tsconfig.node.json"}]
+}

demo/frontend/tsconfig.node.json

+/**
+ * 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.
+ */
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "target": "ES2017",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strictNullChecks": true
+  },
+  "include": ["vite.config.ts", "schemas"]
+}

demo/frontend/vite.config.ts

+/**
+ * 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 react from '@vitejs/plugin-react';
+import jotaiDebugLabel from 'jotai/babel/plugin-debug-label';
+import jotaiReactRefresh from 'jotai/babel/plugin-react-refresh';
+import path from 'path';
+import {defineConfig} from 'vite';
+import babel from 'vite-plugin-babel';
+import relay from 'vite-plugin-relay';
+import {stylexPlugin} from 'vite-plugin-stylex-dev';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  plugins: [
+    react({
+      babel: {
+        plugins: [jotaiDebugLabel, jotaiReactRefresh],
+      },
+    }),
+    stylexPlugin(),
+    relay,
+    babel(),
+  ],
+  worker: {
+    plugins: () => [relay],
+  },
+});

docker-compose.yaml

+services:
+  frontend:
+    image: sam2/frontend
+    build:
+      context: ./demo/frontend
+      dockerfile: frontend.Dockerfile
+    ports:
+      - 7262:80
+
+  backend:
+    image: sam2/backend
+    build:
+      context: .
+      dockerfile: backend.Dockerfile
+    ports:
+      - 7263:5000
+    volumes:
+      - ./demo/data/:/data/:rw
+    environment:
+      - SERVER_ENVIRONMENT=DEV
+      - GUNICORN_WORKERS=1
+      # Inference API needs to have at least 2 threads to handle an incoming
+      # parallel cancel propagation request
+      - GUNICORN_THREADS=2
+      - GUNICORN_PORT=5000
+      - API_URL=http://localhost:7263
+      - DEFAULT_VIDEO_PATH=gallery/05_default_juggle.mp4
+      # # ffmpeg/video encode settings
+      - FFMPEG_NUM_THREADS=1
+      - VIDEO_ENCODE_CODEC=libx264
+      - VIDEO_ENCODE_CRF=23
+      - VIDEO_ENCODE_FPS=24
+      - VIDEO_ENCODE_MAX_WIDTH=1280
+      - VIDEO_ENCODE_MAX_HEIGHT=720
+      - VIDEO_ENCODE_VERBOSE=False
+    deploy:
+      resources:
+        reservations:
+          devices:
+            - driver: nvidia
+              count: 1
+              capabilities: [gpu]