Segment Anything
\r\n \r\n Research by Meta AI\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n }\r\n />\r\n instead of a
\r\n )}\r\n \r\n
\r\n )}\r\n {videoLeft && (\r\n \r\n
\r\n )}\r\n {noteLeft && {noteLeft}
}\r\n \r\n )}\r\n\r\n\r\n
\r\n )}\r\n {videoRight && (\r\n \r\n
\r\n )}\r\n {noteRight && {noteRight}
}\r\n \r\n )}\r\n \r\n \r\n );\r\n}\r\n" }, { "path": "src/components/ErrorPage.tsx", "content": "import React from \"react\";\r\nimport { useRouteError } from \"react-router-dom\";\r\n\r\nconst ErrorPage = () => {\r\n const error: any = useRouteError();\r\n console.error(error);\r\n\r\n return (\r\n\r\n
\r\n );\r\n};\r\n\r\nexport default ErrorPage;"
},
{
"path": "src/components/FAQ.tsx",
"content": "import React, { PropsWithChildren, useState } from \"react\";\r\n\r\nexport type FAQProps = {\r\n question?: string;\r\n className?: string;\r\n children: React.ReactNode;\r\n};\r\n\r\nexport default function FAQ({\r\n question,\r\n className = \"\",\r\n children,\r\n}: PropsWithChildrenOops!
\r\nSorry, an unexpected error has occurred.
\r\n\r\n {error.statusText || error.message}\r\n
\r\n\r\n \r\n {question}\r\n
\r\n \r\n \r\n {question}\r\n \r\n {children}\r\n
{label}
\r\n ) : (\r\n{label}
\r\n ))}\r\n\r\n{children}
\r\n\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default FeedbackModal;\r\n"
},
{
"path": "src/components/Footer.tsx",
"content": "import React from \"react\";\r\nimport { NavLink, useLocation } from \"react-router-dom\";\r\nimport FeedbackModal from \"./FeedbackModal\";\r\n\r\nconst Footer = () => {\r\n const location = useLocation();\r\n return (\r\n <>\r\n {location.pathname === \"/\" && (\r\n <>\r\n \r\n
\r\n \r\n
\r\n Feedback
\r\n \r\n \r\n Close\r\n \r\n \r\n\r\n Please email all feedback to
\r\n
\r\n \r\n ![\"Meta](\"/assets/Meta.svg\")
\r\n \r\n
\r\n \r\n \r\n \r\n {/* Terms\r\n \r\n Privacy\r\n */}\r\n © 2023 Meta\r\n \r\n Feedback\r\n \r\n \r\n Cookie Policy\r\n \r\n \r\n Terms\r\n \r\n
\r\n \r\n
\r\n )}\r\n\r\n {noteLeft || \"\"}
\r\n \r\n {chs.map((c: any, i: number) => (\r\n \r\n {c}\r\n
\r\n ))}\r\n \r\n ))}\r\n {isSingle && {children}
}\r\n \r\n\r\n {!fullWidth && (\r\n \r\n
\r\n )}\r\n \r\n \r\n );\r\n}\r\n"
},
{
"path": "src/components/Hero.tsx",
"content": "import React from \"react\";\r\n\r\nimport Video from \"./Video\";\r\n\r\nexport type HeroLayout = \"default\" | \"vertical\";\r\n\r\nexport type HeroProps = {\r\n layout?: HeroLayout;\r\n image?: string;\r\n video?: string;\r\n overlay?: boolean;\r\n bgColor?: string;\r\n fullHeight?: boolean;\r\n offsetNavHeight?: boolean;\r\n style?: React.CSSProperties;\r\n children: React.ReactNode;\r\n className?: string;\r\n};\r\n\r\nexport default function Hero({\r\n layout,\r\n image,\r\n video,\r\n overlay,\r\n fullHeight,\r\n offsetNavHeight,\r\n bgColor,\r\n style = {},\r\n children,\r\n className = \"\",\r\n}: HeroProps) {\r\n const bg = bgColor ? `bg-${bgColor}` : `bg-gray-600`;\r\n const split = (image || video) && !overlay;\r\n\r\n const h = offsetNavHeight && fullHeight ? \"h-[calc(100vh-64px)]\" : \"h-screen\";\r\n const height = fullHeight\r\n ? `${h} ${split || overlay ? \"\" : \"md:min-h-[1000px]\"}`\r\n : \"\";\r\n\r\n const contentFlow =\r\n layout === \"vertical\" ? \"flex-col\" : `flex-col-reverse lg:flex-row`;\r\n const contentMargin = `${fullHeight ? \"my-0\" : \"\"} ${\r\n split ? \"mt-0 mb-10 px-6 lg:px-0\" : \"px-0 my-20\"\r\n }`;\r\n\r\n const contentAlign = `${\r\n fullHeight\r\n ? `${split ? \"justify-start-only\" : \"justify-center\"}`\r\n : \"justify-center\"\r\n } lg:justify-start`;\r\n const summaryMargin =\r\n layout === \"vertical\" ? \"mt-20\" : split ? \"lg:my-[140px]\" : \"lg:my-20\";\r\n const imageW =\r\n layout === \"vertical\"\r\n ? \"md:w-[70vw] md:max-w-[850px] w-full px-0\"\r\n : \"w-[100vw] lg:w-full p-0 lg:p-4\";\r\n const imageH =\r\n layout === \"vertical\"\r\n ? \"md:h-[39vw] md:max-h-[478px] h-[40vh] mb-20\"\r\n : \"h-[100vw] max-h-[500px] lg:h-[500px]\";\r\n // const imageSize = layout === 'vertical' ? \"md:w-[70vw] md:max-w-[850px] w-full px-0 md:h-[39vw] md:max-h-[478px] mb-20\" : \"w-[100vw] lg:w-full h-[100vw] max-h-[500px] lg:h-[500px] p-0 lg:p-4\";\r\n const equalSize =\r\n layout === \"vertical\" ? \"\" : `${split ? \"lg:flex-1\" : \"lg:w-[50%]\"}`;\r\n\r\n const imageOverlay = overlay ? \"bg-cover bg-center bg-no-repeat\" : \"\";\r\n\r\n const containerStyle: React.CSSProperties = {\r\n backgroundImage: overlay && image && !video ? `url(${image})` : undefined,\r\n ...style,\r\n };\r\n\r\n return (\r\n {noteRight || \"\"}
\r\n \r\n
\r\n )}\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Output masks can be used as inputs to other AI systems. For example,\r\n object masks can be tracked in videos, enable imaging editing\r\n applications, be{\" \"}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Our latest updates
\r\n \r\n Sign up to receive our newsletter and be the first to know{\" \"}\r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default HomePage;\r\n"
},
{
"path": "src/components/ImagePicker.tsx",
"content": "import React, { useContext, useEffect, useLayoutEffect, useState } from \"react\";\r\nimport { Button, Checkbox } from \"react-daisyui\";\r\nimport { useDropzone } from \"react-dropzone\";\r\nimport PhotoAlbum from \"react-photo-album\";\r\nimport { NavLink } from \"react-router-dom\";\r\nimport photos from \"./helpers/photos\";\r\nimport AppContext from \"./hooks/createContext\";\r\nexport interface ImagePickerProps {\r\n handleSelectedImage: (\r\n data: File | URL,\r\n options?: { shouldDownload?: boolean; shouldNotFetchAllModel?: boolean }\r\n ) => void;\r\n showGallery: [showGallery: boolean, setShowGallery: (e: boolean) => void];\r\n}\r\n\r\nconst LegalModal = () => {\r\n return (\r\n AI Computer Vision Research
\r\n\r\n \r\n Segment Anything Model (SAM): a new AI model from Meta AI that can\r\n \"cut out\" any object, in any image, with a single click\r\n \r\n
\r\n\r\n SAM is a promptable segmentation system with zero-shot\r\n generalization to unfamiliar objects and images, without the need\r\n for additional training.\r\n
\r\n \r\n \r\nSAM uses a variety of input prompts
\r\n\r\n Prompts specifying what to segment in an image allow for a wide\r\n range of segmentation tasks without the need for additional\r\n training.\r\n
\r\n \r\n\r\n SAM's promptable design enables flexible integration with other\r\n systems\r\n
\r\nExtensible outputs
\r\n\r\n Output masks can be used as inputs to other AI systems. For example,\r\n object masks can be tracked in videos, enable imaging editing\r\n applications, be{\" \"}\r\n \r\n lifted to 3D\r\n \r\n , or used for creative tasks like collaging.\r\n
\r\n \r\n Zero-shot generalization
\r\n \r\nSelect a dog in the image
\r\n \r\nSAM’s data engine
\r\n\r\n SAM's advanced capabilities are the result of its training on\r\n millions of images and masks collected through the use of a\r\n model-in-the-loop \"data engine.\" Researchers used SAM and its data\r\n to interactively annotate images and update the model. This cycle\r\n was repeated many times over to improve both the model and the\r\n dataset.\r\n
\r\n \r\n \r\n11M images, 1B+ masks
\r\n\r\n After annotating enough masks with SAM’s help, we were able to\r\n leverage SAM’s sophisticated ambiguity-aware design to annotate new\r\n images fully automatically. To do this, we present SAM with a grid\r\n of points on an image and ask SAM to segment everything at each\r\n point. Our final dataset includes more than 1.1 billion segmentation\r\n masks collected on ~11 million licensed and privacy preserving\r\n images.\r\n
\r\n \r\n \r\nEfficient & flexible model design
\r\n\r\n SAM is designed to be efficient enough to power its data engine. We\r\n decoupled the model into 1) a one-time image encoder and 2) a\r\n lightweight mask decoder that can run in a web-browser in just a few\r\n milliseconds per prompt.\r\n
\r\n \r\n \r\nFrequently asked questions
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n - \r\n
- Foreground/background points \r\n
- Bounding box \r\n
- Mask \r\n
- \r\n Text prompts are explored in our paper but the capability is\r\n not released\r\n \r\n
- \r\n
- \r\n A ViT-H image encoder that runs once per image and outputs an\r\n image embedding\r\n \r\n
- \r\n A prompt encoder that embeds input prompts such as clicks or\r\n boxes\r\n \r\n
- \r\n A lightweight transformer based mask decoder that predicts\r\n object masks from the image embedding and prompt embeddings\r\n \r\n
- \r\n
- \r\n The image encoder is implemented in PyTorch and requires a GPU\r\n for efficient inference.\r\n \r\n
- \r\n The prompt encoder and mask decoder can run directly with\r\n PyTroch or converted to ONNX and run efficiently on CPU or GPU\r\n across a variety of platforms that support ONNX runtime.\r\n \r\n
- \r\n
- The image encoder has 632M parameters. \r\n
- The prompt encoder and mask decoder have 4M parameters. \r\n
- \r\n
- \r\n The image encoder takes ~0.15 seconds on an NVIDIA A100 GPU.\r\n \r\n
- \r\n The prompt encoder and mask decoder take ~50ms on CPU in the\r\n browser using multithreaded SIMD execution.\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n - \r\n
- \r\n The model was trained on our SA-1B dataset. See our{\" \"}\r\n
- \r\n
- The model was trained for 3-5 days on 256 A100 GPUs. \r\n
- \r\n
- \r\n No, the model predicts object masks only and does not generate\r\n labels.\r\n \r\n
- \r\n
- \r\n Currently the model only supports images or individual frames\r\n from videos.\r\n \r\n
- \r\n
- \r\n Code is available on{\" \"}\r\n
Acknowledgements
\r\n\r\n Research Authors\r\n
\r\n \r\n Alexander Kirillov1,2,4 Eric Mintun2, Nikhila\r\n Ravi\r\n 1,2, Hanzi Mao2, Chloe Rolland3,\r\n Laura Gustafson3, Tete Xiao3, Spencer\r\n Whitehead, Alex Berg, Wan-Yen Lo, Piotr Dollar4, Ross\r\n Girshick\r\n 4\r\n
\r\n\r\n 1 project lead, 2 joint first author,{\" \"}\r\n 3 equal contribution, 4 directional lead\r\n
\r\n\r\n \r\n Project Contributors (alphabetical):\r\n \r\n
\r\n \r\n Aaron Adcock, Vaibhav Aggarwal, Morteza Behrooz, Cheng-Yang Fu,\r\n Ashley Gabriel, Ahuva Goldstand, Allen Goodman, Sumanth Gurram,\r\n Jiabo Hu, Somya Jain, Devansh Kukreja, Robert Kuo, Joshua Lane,\r\n Yanghao Li, Lilian Luong, Jitendra Malik, Mallika Malhotra, William\r\n Ngan, Omkar Parkhi, Nikhil Raina, Dirk Rowe, Neil Seejoor, Vanessa\r\n Stark, Bala Varadarajan, Bram Wasti, Zachary Winstrom\r\n
\r\n\r\n Our latest updates
\r\n delivered to your inbox\r\n
\r\n \r\n Sign up to receive our newsletter and be the first to know{\" \"}\r\n
\r\n about Meta Al news, events, research breakthroughs,{\" \"}\r\n
\r\n and more.\r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nconst ImagePicker = ({\r\n handleSelectedImage,\r\n showGallery: [showGallery, setShowGallery],\r\n}: ImagePickerProps) => {\r\n const [error, setError] = useState\r\n
\r\n \r\n );\r\n };\r\n\r\n const image = ({ imageProps }: { imageProps: any }) => {\r\n const { src, key, style, onClick } = imageProps;\r\n return (\r\n \r\n Close \r\n \r\n \r\n
\r\n Before you begin
\r\n \r\n \r\n- \r\n
- \r\n This is a research demo and may not be used for\r\n any commercial purpose\r\n \r\n
- \r\n Any images uploaded will be used solely to demonstrate the Segment\r\n Anything Model. All images and any data derived from them will be\r\n deleted at the end of the session.\r\n \r\n
- \r\n Any images uploaded should not violate any intellectual property\r\n rights or Facebook's Community Standards.\r\n \r\n
\r\n handleAttemptContinue()}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n I have read and agree to the Segment Anything{\" \"}\r\n \r\n Terms and Conditions\r\n \r\n \r\n
\r\n \r\n {/*!enableDemo && \r\n handleSelectedImage(e.event.target.src)}\r\n renderPhoto={image}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default ImagePicker;\r\n"
},
{
"path": "src/components/LegalText.tsx",
"content": "import React from \"react\";\r\nfunction LegalText() {\r\n return (\r\n \r\n {/*
\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n}\r\nexport default LegalText;\r\n"
},
{
"path": "src/components/LoadingModal.tsx",
"content": "import React, { useContext } from \"react\";\r\nimport AppContext from \"./hooks/createContext\";\r\n\r\ninterface LoadingModalProps {\r\n handleResetState: () => void;\r\n}\r\n\r\nconst LoadingModal = ({ handleResetState }: LoadingModalProps) => {\r\n const {\r\n showLoadingModal: [showLoadingModal, setShowLoadingModal],\r\n image: [image, setImage],\r\n isErasing: [isErasing, setIsErasing],\r\n eraserText: [eraserText, setEraserText],\r\n } = useContext(AppContext)!;\r\n\r\n console.log(\"Loading modal\");\r\n \r\n return (\r\n <>\r\n {showLoadingModal && (\r\n Segment Anything Terms of Use
\r\nLast Updated: Mar, 2023
\r\n\r\n Segment Anything is a research project from FAIR which includes a\r\n dataset and model for image segmentation, as well as a research demo of\r\n the model capabilities. These Terms of Use ( \"Terms\" ) govern the use of\r\n the Segment Anything website available at www.segment-anything.com\r\n (together with any content or other materials hosted or made available\r\n thereon (including the Segment Anything Materials), and any successor\r\n site(s) thereto, the \" Website \"). These Terms constitute an agreement\r\n between you and us, so it is important that you review them carefully.\r\n By accessing the Website, or downloading materials made available on\r\n this Website, or generally when you access any page, document or file\r\n that links to these Terms, you accept and agree to be bound by both\r\n these Terms and our Data Policy available at{\" \"}\r\n \r\n https://www.facebook.com/privacy/policy/?entry_point=segment_anything_page\r\n \r\n . These Terms hereby incorporate by this reference any additional terms\r\n and conditions posted by us through the Website.\r\n
\r\n\r\n\r\n If you are an individual accessing or using the website on behalf of, or\r\n for the benefit of, any corporation, partnership or other entity with\r\n which you are associated (an \"organization\"), then you are agreeing to\r\n these terms on behalf of yourself and such organization, and you\r\n represent and warrant that you have the legal authority to bind such\r\n organization to these terms. References to \"you\" and \"your\" in these\r\n Terms will refer to both the individual using the Website and to any\r\n such organization.\r\n
\r\n\r\nContent
\r\n\r\n The Website is available for non-commercial use and for informational\r\n purposes only, provided however that, subject to your compliance with\r\n these Terms, to the extent permitted by applicable law, Segment Anything\r\n Materials made available to you through the Website may be used by you,\r\n including for commercial purposes, pursuant to the Creative Commons\r\n Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license, as\r\n described below. If you are an individual, you may not access or use the\r\n Website unless you are at least 18 years old or, if you reside in a\r\n jurisdiction in which the age of majority is higher than age 18, the age\r\n of majority in such jurisdiction.\r\n
\r\n\r\n WE MAKE NO REPRESENTATIONS OR WARRANTIES OF ANY KIND AS TO THE ACCURACY,\r\n CURRENCY, OR COMPLETENESS OF THE INFORMATION AND OTHER MATERIALS MADE\r\n AVAILABLE THROUGH THE WEBSITE, INCLUDING ANY SEGMENT ANYTHING MATERIALS.\r\n WE ARE NOT LIABLE FOR ANY DECISIONS YOU MAY MAKE IN RELIANCE ON SUCH\r\n INFORMATION OR OTHER MATERIALS.\r\n
\r\n\r\nYour Commitments
\r\n\r\nBy accessing the Website, you confirm that:
\r\n- \r\n
- \r\n if you are an individual (rather than an organization), you are at or\r\n above the age of majority in the jurisdiction in which you reside;\r\n \r\n
- \r\n you are not prohibited under applicable laws from receiving any of\r\n information or other materials, including the Segment Anything\r\n Materials, hosted on or made available through the Website; and\r\n \r\n
- \r\n if you are agreeing to be bound by these Terms on behalf of your\r\n employer or other organization, you represent and warrant to Meta that\r\n you have full legal authority to bind your employer or such\r\n organization to these Terms.\r\n \r\n
User Content
\r\n\r\n\r\n \" User Content \" means any information and content that you submit to,\r\n or use with, the Website (including any images you may upload). Examples\r\n include any photos or other media or content. For clarity, \"User\r\n Content\" does not include Segment Anything Materials or any other Meta\r\n information or content, even if such information or content is\r\n referenced in your User Content.\r\n
\r\n\r\n\r\n You are solely responsible for, and assume all risks associated with,\r\n your User Content. You should not submit any User Content that infringes\r\n on the copyright, trademark, patent, or other intellectual property\r\n rights of any third party, that is false, misleading, libelous,\r\n defamatory, obscene, abusive, hateful, or sexually-explicit, that\r\n violates a third party's right to privacy or publicity, or degrades\r\n others on the basis of gender, race, class, ethnicity, national origin,\r\n religion, sexual preference, disability, or other classification. You\r\n should not submit any User Content that contains information relating to\r\n an identified or identifiable individual, but if you do you represent\r\n that such individual has consented to your use of such information, that\r\n your collection and use of such information complies with all applicable\r\n laws and regulations, and you remain responsible for any disclosure of\r\n your User Content, including any such disclosure that personally\r\n identifies you or any third party. Further, in using the Website, you\r\n agree to comply with Facebook's Community Standards (the \"Community\r\n Standards\", available at{\" \"}\r\n \r\n https://transparency.fb.com/policies/community-standards\r\n {\" \"}\r\n (as may be updated from time to time), which is hereby incorporated by\r\n reference. Meta reserves the right to terminate your right to use and\r\n access the Segment Anything Website or Segment Anything Materials,\r\n including for violations of the Community Standards.\r\n
\r\n\r\n\r\n Unless otherwise expressly specified in these Terms, we are not\r\n obligated to backup any User Content. You are solely responsible for\r\n creating and maintaining your own backup copies of your User Content if\r\n you desire.\r\n
\r\n\r\n We reserve the right (but have no obligation) to review any User\r\n Content, and to investigate and/or take appropriate action against you\r\n in our sole discretion if you violate any other provision of these Terms\r\n (as determined by us).\r\n
\r\n\r\nSegment Anything Materials
\r\n\r\n Notwithstanding anything to the contrary in these Terms, subject to your\r\n compliance with these Terms, the Segment Anything Materials made\r\n available to you via the Website are licensed by us to you under the\r\n Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)\r\n license (the \" License \"); a copy of this License is available at [\r\n \r\n https://creativecommons.org/licenses/by-sa/4.0/legalcode\r\n \r\n , and a summary of the License is available at\r\n \r\n https://creativecommons.org/licenses/by-sa/4.0\r\n \r\n ]. Upon termination of these Terms or your access to the Website, the\r\n License will also terminate.\r\n
\r\n\r\nOwnership
\r\n\r\n Excluding any User Content that you may provide, you acknowledge that\r\n all intellectual property rights, including copyrights, patents,\r\n trademarks, and trade secrets, in the Website, including the Segment\r\n Anything Materials, are owned by us, our suppliers, partners and/or\r\n third party licensors. For the avoidance of doubt, Meta does not claim\r\n ownership of your User Content.\r\n
\r\n\r\n You retain ownership of your intellectual property rights (e.g.,\r\n copyrights or trademarks) in your User Content. Nothing in these Terms\r\n transfers ownership of your User Content to Meta.\r\n
\r\n\r\n Without limiting any of the above, we have the right (though not the\r\n obligation) to, in our sole discretion, reject, block or remove any User\r\n Content, or terminate, suspend or deny access to and use of the Website\r\n to any individual or organization for any reason, in our sole\r\n discretion.\r\n
\r\n\r\n Except as expressly set forth herein, neither these Terms nor your\r\n access to the Website transfers to you or any third party any rights,\r\n title or interest in or to any intellectual property rights in the\r\n Website. We reserve all rights not expressly granted to you in these\r\n Terms.\r\n
\r\nProhibited Conduct
\r\n\r\n You may not access or use, or attempt to access or use, the Website\r\n (including the Segment Anything Materials) to take any action that could\r\n harm us, other Website users or any other third party, interfere with\r\n the operation of the Website, or use the Website in a manner that\r\n violates any laws. For example, and without limitation, you may not:\r\n
\r\n\r\n- \r\n
- \r\n impersonate any person or organization or otherwise misrepresent your\r\n affiliation or the origin of any information or materials you submit\r\n \r\n
- \r\n engage in unauthorized spidering, \"scraping,\" or harvesting of content\r\n or information, or use any other unauthorized automated means to\r\n compile information from the Website;\r\n \r\n
- \r\n take any action that imposes an unreasonable or disproportionately\r\n large load on our network or infrastructure;\r\n \r\n
- \r\n use any device, software, or routine to interfere or attempt to\r\n interfere with the proper working of the Website or any activity\r\n conducted on the Website or attempt to probe, scan, test the\r\n vulnerability of, or breach the security of any system or network;\r\n \r\n
- \r\n attempt to decipher, decompile, disassemble, or reverse-engineer any\r\n of the software or code comprising or in any way making up a part of\r\n the Website;\r\n \r\n
- \r\n distribute any unauthorized materials or advertise or promote goods or\r\n services without our permission (including, without limitation, by\r\n sending spam);\r\n \r\n
- \r\n submit content that infringes on the copyright, trademark, patent, or\r\n other intellectual property rights of any third party, are false,\r\n misleading, libelous, defamatory, obscene, abusive, hateful, or\r\n sexually-explicit, violate a third party's right to privacy or\r\n publicity, or degrade others on the basis of gender, race, class,\r\n ethnicity, national origin, religion, sexual preference, disability,\r\n or other classification; and\r\n \r\n
- \r\n engage in any other conduct that restricts or inhibits any person from\r\n using or enjoying the Website, or that, in our sole judgment, exposes\r\n us or any of our users, affiliates, or any other third party to any\r\n liability, damages, or detriment of any type.\r\n \r\n
\r\n In addition, you may not use our Website (including the Segment Anything\r\n Materials), or do or share anything, that:\r\n
\r\n- \r\n
- \r\n violates these Terms, and other terms and policies that apply to your\r\n use of the Website;\r\n \r\n
- \r\n is unlawful in any country, misleading, discriminatory or fraudulent;\r\n or\r\n \r\n
- \r\n infringes or violates someone else's rights, including their\r\n intellectual property rights.\r\n \r\n
\r\n We may investigate and work with law enforcement authorities to\r\n prosecute users who violate applicable laws or regulations in connection\r\n with their use of the Website (including the Segment AnythingMaterials).\r\n Violations of system or network security may result in civil or criminal\r\n liability, or termination or suspension of your access to the Website\r\n and/or your account (if applicable).\r\n
\r\n\r\n To help support our community, we encourage you to report to us any\r\n content or conduct that you believe violates your rights (including\r\n intellectual property rights) or our Terms and policies.\r\n
\r\nCopyright
\r\n\r\n We respect intellectual property rights. If you believe in good faith\r\n that your work has been reproduced or is accessible on the Website in a\r\n way that constitutes copyright infringement, please provide our\r\n designated agent with the following information in writing:\r\n
\r\n- \r\n
- \r\n identification of the copyrighted work or a representative list of\r\n copyrighted works claimed to have been infringed;\r\n \r\n
- \r\n identification of the allegedly infringing material and information\r\n reasonably sufficient to permit us to locate the material;\r\n \r\n
- \r\n your name, address and a daytime telephone number, and an email\r\n address if available, so that we may contact you if necessary;\r\n \r\n
- \r\n a statement that the information in the notification is accurate, and\r\n under penalty of perjury, that the complaining party is authorized to\r\n act on behalf of the owner of an exclusive right that is allegedly\r\n infringed;\r\n \r\n
- \r\n a statement that you have a good faith belief that the use of the\r\n material in the manner complained of is not authorized by the\r\n copyright owner, its agent, or the law; and\r\n \r\n
- \r\n a physical or electronic signature of a person authorized to act on\r\n behalf of the owner of the exclusive right that is allegedly\r\n infringed.\r\n \r\n
Our designated agent may be reached by contacting:
\r\n\r\n Meta Platforms Designated Agent, Meta Platforms, Inc.\r\n
1601 Willow Road\r\n
\r\n Menlo Park, CA 94025\r\n
(650) 543-4800\r\n
\r\n ip@fb.com\r\n
\r\n Upon receipt of a valid notice of claimed infringement or any statement\r\n in conformance with 17 U.S.C. § 512(c)(3), we will expeditiously remove\r\n or disable access to the allegedly infringing content. We will terminate\r\n the privileges of users who repeatedly infringe copyright.\r\n
\r\nTermination and Suspension
\r\n\r\n\r\n These Terms are effective until terminated. We may terminate or suspend\r\n your use of the Website (including any Segment Anything Materials)\r\n and/or your account at any time and without prior notice, for any\r\n reason, including if we believe that you have violated or acted\r\n inconsistently with the letter or spirit of these Terms. Upon any such\r\n termination or suspension, your right to use the Website and the Segment\r\n Anything Materials will immediately cease, and we may, without liability\r\n to you or any third party, remove your access to the Website and all\r\n associated materials, without any obligation to provide any further\r\n
\r\nLimitation of liability
\r\n\r\n YOUR USE OF THE WEBSITE (INCLUDING THE SEGMENT ANYTHING MATERIALS AND\r\n USER CONTENT) IS AT YOUR OWN RISK. THE WEBSITE AND ITS RESPECTIVE\r\n CONTENT ARE PROVIDED \"AS IS\" WITHOUT WARRANTIES OF ANY KIND, EITHER\r\n EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION WARRANTIES OF\r\n MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, NON-INFRINGEMENT, OR\r\n OTHER VIOLATION OF RIGHTS. WE DO NOT WARRANT THE AVAILABILITY, ADEQUACY,\r\n CURRENCY, ACCURACY, LIKELY RESULTS, OR COMPLETENESS OF THE USER CONTENT,\r\n THE WEBSITE (INCLUDING THE SEGMENT ANYTHING MATERIALS) OR ANY\r\n THIRD-PARTY SITES LINKED TO OR FROM THE WEBSITE, OR THAT THE FUNCTIONS\r\n AND CONTENT PROVIDED WILL BE UNINTERRUPTED, VIRUS, OR ERROR-FREE.\r\n
\r\n\r\n WE EXPRESSLY DISCLAIM ANY LIABILITY FOR ANY ERRORS OR OMISSIONS IN THE\r\n CONTENT INCLUDED ON THE WEBSITE, INCLUDING THE SEGMENT ANYTHING\r\n MATERIALS AND USER CONTENT. WE DO NOT CONTROL OR DIRECT WHAT PEOPLE AND\r\n OTHERS DO, SAY OR UPLOAD TO THE WEBSITE, AND WE ARE NOT RESPONSIBLE FOR\r\n THEIR ACTIONS OR CONDUCT (WHETHER ONLINE OR OFFLINE) OR ANY CONTENT THEY\r\n SHARE (INCLUDING OFFENSIVE, INAPPROPRIATE, OBSCENE, UNLAWFUL, AND OTHER\r\n OBJECTIONABLE CONTENT). SOME JURISDICTIONS MAY NOT ALLOW THE EXCLUSION\r\n OF IMPLIED WARRANTIES, SO SOME OF THE ABOVE EXCLUSIONS MAY NOT APPLY TO\r\n YOU.\r\n
\r\n\r\n IN NO EVENT WILL WE, OR OUR PARENTS, SUBSIDIARIES, AFFILIATES,\r\n DIRECTORS, OFFICERS, EMPLOYEES, AGENTS, AND ASSIGNS BE LIABLE FOR ANY\r\n INDIRECT, SPECIAL, INCIDENTAL, CONSEQUENTIAL OR PUNITIVE DAMAGES, LOST\r\n PROFITS, OR OTHER DAMAGES WHATSOEVER ARISING IN CONNECTION WITH THESE\r\n TERMS, THE USER CONTENT OR THE WEBSITE (INCLUDING THE SEGMENT ANYTHING\r\n MATERIALS), ANY INTERRUPTION IN AVAILABILITY OF THE WEBSITE, DELAY IN\r\n OPERATION OR TRANSMISSION, COMPUTER VIRUS, LOSS OF DATA, OR USE, MISUSE,\r\n RELIANCE, REVIEW, MANIPULATION, OR OTHER UTILIZATION IN ANY MANNER\r\n WHATSOEVER OF THE WEBSITE, OR THE DATA COLLECTED THROUGH THE WEBSITE,\r\n EVEN IF ONE OR MORE OF THEM HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH\r\n DAMAGES OR LOSS. OUR AGGREGATE LIABILITY ARISING OUT OF OR RELATING TO\r\n THESE TERMS, THE SEGMENT ANYTHING MATERIALS, USER CONTENT OR THE WEBSITE\r\n WILL NOT EXCEED THE GREATER OF ONE HUNDRED U.S. DOLLARS (\\$100).\r\n
\r\nIndemnification
\r\n\r\n You agree to indemnify, defend, and hold us and our subsidiaries,\r\n affiliates and parent company, and our and their respective directors,\r\n officers, employees, agents and assigns, harmless from and against any\r\n and all losses, costs, expenses (including reasonable attorneys' fees\r\n and expenses), claims, causes of action, proceedings, investigations,\r\n damages, and liabilities arising from, related to or associated with\r\n your User Content, your access to or use of the Website (including the\r\n Segment Anything Materials and other content, including content\r\n submitted by other users) and any alleged violation by you of these\r\n Terms. We reserve the right to assume the exclusive defense of any claim\r\n for which we are entitled to indemnification under this section. In such\r\n event, you shall provide us with such cooperation as we reasonably\r\n request.\r\n
\r\nModification
\r\n\r\n\r\n We may change these Terms from time to time by notifying you of such\r\n changes by any reasonable means, including by posting revised Terms\r\n through the Website. Any such changes will not apply to any dispute\r\n between you and us arising prior to the date on which we posted the\r\n revised Terms incorporating such changes, or otherwise notified you of\r\n such changes. Your use of the Website (including any Segment Anything\r\n Materials) following any changes to these Terms will constitute your\r\n acceptance of such changes. The \"Last Updated\" legend above indicates\r\n when these Terms were last changed.\r\n
\r\n\r\n\r\n We reserve the right, at any time, to modify, suspend, or discontinue\r\n all or any elements of the Website (in whole or in part, including the\r\n Segment Anything Materials) with or without notice to you. You agree\r\n that we will not be liable to you or to any third party for any such\r\n modification, suspension, or discontinuation.\r\n
\r\nThird Party Materials
\r\n\r\n The Website may contain links to third party content or otherwise\r\n contain materials that are hosted by another party. We do not control,\r\n endorse, sponsor, recommend, or otherwise accept responsibility for such\r\n content, your use thereof or your access thereto.\r\n
\r\n\r\n YOUR ACCESS THESE MATERIALS AT YOUR OWN RISK. AND IS SUBJECT TO ANY\r\n ADDITIONAL TERMS, CONDITIONS AND POLICIES APPLICABLE TO SUCH THIRD-PARTY\r\n MATERIALS (SUCH AS TERMS OF SERVICE OR PRIVACY POLICIES OF THE PROVIDERS\r\n OF SUCH THIRD PARTY MATERIALS)\r\n
\r\n\r\nMiscellaneous
\r\n- \r\n
- \r\n You acknowledge and agree that we have no obligation to provide you\r\n with any support or maintenance in connection with your use of the\r\n Website.\r\n \r\n
- \r\n The use of the Website involves the transmission of data through your\r\n device or network service provider in the case of a mobile device.\r\n Your network service provider may charge you for this data\r\n transmission. You are responsible for any and all costs related to\r\n your use of your device or network service provider.\r\n \r\n
- \r\n We appreciate your feedback and other suggestions about the Website.\r\n If you submit to us any feedback or suggestions, we may use and fully\r\n exploit them in any manner that we deem appropriate, without any\r\n restriction or obligation to compensate or credit you. We will treat\r\n any feedback or other suggestions as non-confidential and\r\n non-proprietary. You should not submit to us any information or ideas\r\n that you consider to be confidential or proprietary.\r\n \r\n
- \r\n These Terms make up the entire agreement regarding your use of the\r\n Website. If any portion of these Terms is found to be unenforceable,\r\n the remaining portion will remain in full force and effect. If we fail\r\n to enforce any of these Terms, it will not be considered a waiver. Any\r\n amendment to or waiver of these Terms must be made in writing and\r\n signed by us.\r\n \r\n
- \r\n You agree that no joint venture, partnership, employment, or agency\r\n relationship exists between you and us as a result of these Terms or\r\n your access to and use of the Website.\r\n \r\n
- \r\n Our failure to enforce any provisions of these Terms or respond to a\r\n violation by any party does not waive our right to subsequently\r\n enforce any terms or conditions of the Terms or respond to any\r\n violations. Nothing contained in these Terms is in derogation of our\r\n right to comply with governmental, court, and law enforcement requests\r\n or requirements relating to your use of the Website or information\r\n provided to or gathered by us with respect to such use.\r\n \r\n
- \r\n These Terms are governed by and shall be construed in accordance with\r\n the laws of the State of California, U.S.A., without regard to its\r\n principles of conflicts of law, and regardless of your location. You\r\n agree to exclusive jurisdiction of the federal and state courts\r\n located in San Mateo County, California, U.S.A., and waive any\r\n jurisdictional, venue or inconvenient forum objections to such courts.\r\n \r\n
- \r\n You may not assign, transfer or sublicense any or all of your rights\r\n or obligations under these Terms without our express prior written\r\n consent. We may assign, transfer or sublicense any or all of our\r\n rights or obligations under these Terms without restriction.\r\n \r\n
- \r\n If you have any questions or comments about the Website or the Segment\r\n Anything Materials, please contact us at segment-anything@meta.com or\r\n by mail at:\r\n
\r\n Segment Anything c/o Meta Platforms, Inc. 1601 Willow Road Menlo Park,\r\n CA 94025\r\n \r\n
\r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default LoadingModal;\r\n"
},
{
"path": "src/components/MobileOptionNavBar.tsx",
"content": "import React, { useContext, useState } from \"react\";\r\nimport AppContext from \"./hooks/createContext\";\r\n\r\ninterface MobileOptionNavBarProps {\r\n handleResetInteraction: () => void;\r\n handleUndoInteraction: () => void;\r\n handleRedoInteraction: () => void;\r\n handleResetState: () => void;\r\n handleImage: (img?: HTMLImageElement) => void;\r\n userNegClickBool: [\r\n userNegClickBool: boolean,\r\n setUserNegClickBool: (e: boolean) => void\r\n ];\r\n}\r\n\r\nconst MobileOptionNavBar = ({\r\n handleResetInteraction,\r\n handleRedoInteraction,\r\n handleResetState,\r\n handleUndoInteraction,\r\n handleImage,\r\n userNegClickBool: [userNegClickBool, setUserNegClickBool],\r\n}: MobileOptionNavBarProps) => {\r\n const {\r\n svg: [svg, setSVG],\r\n clicksHistory: [clicksHistory, setClicksHistory],\r\n segmentTypes: [segmentTypes, setSegmentTypes],\r\n isErased: [isErased, setIsErased],\r\n isLoading: [, setIsLoading],\r\n } = useContext(AppContext)!;\r\n const [hasTouchedUpload, setHasTouchedUpload] = useState\r\n \r\n Cancel\r\n \r\n
\r\n \r\n 
\r\n ![](\"../assets/arrow-icn.svg\")
\r\n ![](\"../assets/icn-nn.svg\")
\r\n \r\n ![](\"../assets/stack.svg\")
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n {isErasing &&\r\n eraserText.isEmbedding &&\r\n \"Re-extracting embedding on the erased image\"}\r\n {isErasing &&\r\n eraserText.isErase &&\r\n \"Masks can be fed into other open source models\"}\r\n {!isErasing && \"Extracting an embedding for the image...\"}\r\n
\r\n \r\n\r\n setHasTouchedUpload(true)}\r\n >\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default MobileOptionNavBar;\r\n"
},
{
"path": "src/components/MobileSegmentDrawer.tsx",
"content": "import React, { useContext, useEffect, useState } from \"react\";\r\nimport { Button } from \"react-daisyui\";\r\nimport { useSwipeable } from \"react-swipeable\";\r\nimport AppContext from \"./hooks/createContext\";\r\nimport Sparkle from \"./Sparkle\";\r\n\r\ninterface MobileSegmentDrawerProps {\r\n handleResetInteraction: () => void;\r\n handleMagicErase: () => void;\r\n handleCreateSticker: () => void;\r\n userNegClickBool: [\r\n userNegClickBool: boolean,\r\n setUserNegClickBool: (e: boolean) => void\r\n ];\r\n}\r\n\r\nconst MobileSegmentDrawer = ({\r\n handleResetInteraction,\r\n handleMagicErase,\r\n handleCreateSticker,\r\n userNegClickBool: [userNegClickBool, setUserNegClickBool],\r\n}: MobileSegmentDrawerProps) => {\r\n const {\r\n segmentTypes: [segmentTypes, setSegmentTypes],\r\n svg: [svg, setSVG],\r\n stickers: [stickers, setStickers],\r\n activeSticker: [activeSticker, setActiveSticker],\r\n isModelLoaded: [isModelLoaded, setIsModelLoaded],\r\n click: [click, setClick],\r\n clicks: [clicks, setClicks],\r\n stickerTabBool: [stickerTabBool, setStickerTabBool],\r\n allsvg: [allsvg, setAllsvg],\r\n didShowAMGAnimation: [didShowAMGAnimation, setDidShowAMGAnimation],\r\n showLoadingModal: [showLoadingModal, setShowLoadingModal],\r\n } = useContext(AppContext)!;\r\n const [everythingBool, setEverythingBool] = useState\r\n {\r\n if (isErased) {\r\n setIsErased(false);\r\n setIsLoading(true);\r\n handleImage();\r\n }\r\n handleResetInteraction();\r\n setSegmentTypes(\"Click\");\r\n setUserNegClickBool(false);\r\n }}\r\n >\r\n Reset\r\n \r\n \r\n Undo\r\n \r\n \r\n Redo\r\n \r\n
\r\n \r\n setStickerTabBool(!stickerTabBool)}\r\n >
\r\n \r\n setUserNegClickBool(false)}\r\n >\r\n \r\n setUserNegClickBool(true)}\r\n >\r\n \r\n
\r\n - \r\n
- \r\n
\r\n \r\n {/* - \r\n
- \r\n
\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default MobileSegmentDrawer;\r\n"
},
{
"path": "src/components/Navbar.tsx",
"content": "import React from \"react\";\r\nimport { MdClose } from \"react-icons/md\";\r\nimport { NavLink, useLocation } from \"react-router-dom\";\r\n\r\ninterface NavBarProps {\r\n resetState: () => void;\r\n}\r\n\r\nconst NavBar = ({ resetState }: NavBarProps) => {\r\n const [isMenuOpen, setIsMenuOpen] = React.useState(false);\r\n const location = useLocation();\r\n const desktopClasses = \"mr-10 font-medium text-base\";\r\n const mobileClasses = \"mx-8 text-xl font-semibold\";\r\n return (\r\n \r\n {\r\n e.currentTarget.blur();\r\n handleCreateSticker();\r\n }}\r\n >\r\n \r\n
\r\n \r\n {everythingBool ? \"Cut out all objects\" : \"Create cut-out\"}\r\n
\r\n \r\n {stickers.map((el: HTMLCanvasElement, i) => (\r\n handleStickerClick(i)}\r\n />\r\n ))}\r\n
\r\n \r\n {\r\n setIsMenuOpen(true);\r\n }}\r\n className=\"absolute left-0 h-3 mx-6 md:hidden\"\r\n src=\"/assets/hamburger.svg\"\r\n alt=\"Mobile Menu\"\r\n />\r\n \r\n \r\n \r\n \r\n {\r\n setIsMenuOpen(false);\r\n }}\r\n >\r\n \r\n \r\n \r\n
\r\n Segment Anything
\r\n \r\n Research by Meta AI\r\n
\r\n \r\n *]:flex [&>*]:items-center h-full\">\r\n \r\n Home\r\n \r\n \r\n Demo\r\n \r\n \r\n Dataset\r\n \r\n \r\n Blog\r\n \r\n \r\n Paper\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default PointsModal;\r\n"
},
{
"path": "src/components/SegmentDrawer.tsx",
"content": "import React, { useContext, useState } from \"react\";\r\nimport { getCookieConsentValue } from \"react-cookie-consent\";\r\nimport { useDropzone } from \"react-dropzone\";\r\nimport * as ReactGA from \"react-ga4\";\r\nimport Animate from \"./hooks/Animation\";\r\nimport AppContext from \"./hooks/createContext\";\r\nimport SegmentOptions from \"./SegmentOptions\";\r\nimport Sparkle from \"./Sparkle\";\r\n\r\ninterface SegmentDrawerProps {\r\n handleResetState: () => void;\r\n handleResetInteraction: (flag?: boolean) => void;\r\n handleUndoInteraction: () => void;\r\n handleRedoInteraction: () => void;\r\n handleCreateSticker: () => void;\r\n handleMagicErase: () => void;\r\n handleImage: (img?: HTMLImageElement) => void;\r\n handleMultiMaskMode: () => void;\r\n userNegClickBool: [\r\n userNegClickBool: boolean,\r\n setUserNegClickBool: (e: boolean) => void\r\n ];\r\n showGallery: [showGallery: boolean, setShowGallery: (e: boolean) => void];\r\n hasClicked: boolean;\r\n handleSelectedImage: (\r\n data: File | URL,\r\n options?: { shouldDownload?: boolean; shouldNotFetchAllModel?: boolean }\r\n ) => void;\r\n}\r\n\r\nconst SegmentDrawer = ({\r\n handleResetState,\r\n handleResetInteraction,\r\n handleUndoInteraction,\r\n handleRedoInteraction,\r\n handleCreateSticker,\r\n handleMagicErase,\r\n handleImage,\r\n handleMultiMaskMode,\r\n userNegClickBool: [userNegClickBool, setUserNegClickBool],\r\n showGallery: [showGallery, setShowGallery],\r\n hasClicked,\r\n handleSelectedImage,\r\n}: SegmentDrawerProps) => {\r\n const {\r\n isModelLoaded: [isModelLoaded, setIsModelLoaded],\r\n segmentTypes: [segmentTypes, setSegmentTypes],\r\n isLoading: [isLoading, setIsLoading],\r\n isErased: [isErased, setIsErased],\r\n isMultiMaskMode: [isMultiMaskMode, setIsMultiMaskMode],\r\n stickers: [stickers, setStickers],\r\n activeSticker: [activeSticker, setActiveSticker],\r\n didShowAMGAnimation: [didShowAMGAnimation, setDidShowAMGAnimation],\r\n isAllAnimationDone: [isAllAnimationDone, setIsAllAnimationDone],\r\n isToolBarUpload: [isToolBarUpload, setIsToolBarUpload],\r\n } = useContext(AppContext)!;\r\n\r\n const [uploadClick, setUploadClick] = useState\r\n
\r\n \r\n How to use the selection tool\r\n \r\n {\r\n setCookie(\"sa-mask-info\", \"true\");\r\n setToggle(false);\r\n }}\r\n >\r\n Close\r\n \r\n \r\n
\r\n \r\n Add and subtract areas
\r\n\r\n Mask areas by adding points. Select Add Area, then select the\r\n object. Refine the mask by selecting Remove Area, then select\r\n the area.\r\n
\r\n\r\n {\r\n segmentTypes !== \"Click\" && handleResetInteraction();\r\n getCookieConsentValue(\"sa_demo\") === \"true\" &&\r\n ReactGA.default.send({\r\n category: \"event\",\r\n action: \"is_click\",\r\n });\r\n clearTimeout(clickTimeout);\r\n setSegmentTypes(\"Click\");\r\n setIsCutOut(false);\r\n setDidShowAMGAnimation(false);\r\n }}\r\n className={`transition-all overflow-hidden pb-2 ${\r\n segmentTypes !== \"Click\" &&\r\n (isClickCollapsed ? \"max-h-[40px]\" : \"max-h-[85px]\")\r\n } px-3 py-2 cursor-pointer rounded-xl ${\r\n segmentTypes === \"Click\"\r\n ? \"outline-blue-700 outline outline-[2.5px]\"\r\n : \"outline outline-gray-200 \"\r\n } ${isCutOut && \"hidden\"}`}\r\n onMouseEnter={() => {\r\n clearTimeout(clickTimeout);\r\n clickTimeout = setTimeout(() => {\r\n setIsClickCollapsed(false);\r\n setVisibleClickHover(true);\r\n setIsClickMounted(!isClickMounted);\r\n }, 700);\r\n }}\r\n onMouseLeave={() => {\r\n setIsClickCollapsed(true);\r\n setIsBoxCollapsed(true);\r\n setIsAllCollapsed(true);\r\n setIsCutOutCollapsed(true);\r\n // setVisibleClickHover(false);\r\n clearTimeout(clickTimeout);\r\n setIsClickMounted(false);\r\n setIsBoxMounted(false);\r\n setIsAllMounted(false);\r\n setIsCutOutMounted(false);\r\n }}\r\n >\r\n \r\n \r\n )}\r\n {segmentTypes === \"Click\" && (\r\n setUserNegClickBool(true)}\r\n className={`flex flex-col items-center ${\r\n !hasClicked ? \"disabled\" : \"\"\r\n }`}\r\n >\r\n \r\n -\r\n \r\n \r\n Remove Area\r\n \r\n
\r\n \r\n {segmentTypes === \"Click\" && (\r\n \r\n Tools\r\n
\r\n {uploadClick && (\r\n \r\n {\r\n setShowGallery(true);\r\n setIsCutOut(false);\r\n setIsToolBarUpload(true);\r\n }}\r\n >\r\n \r\n \r\n ![](\"assets/upload_arrow.svg\")
\r\n Upload\r\n \r\n \r\n {\r\n setIsToolBarUpload(false);\r\n setShowGallery(false);\r\n setIsCutOut(false);\r\n setDidShowAMGAnimation(false);\r\n handleResetState();\r\n }}\r\n >\r\n ![](\"assets/icn-image-gallery.svg\")
\r\n Gallery\r\n \r\n
\r\n )}\r\n \r\n Upload\r\n \r\n \r\n \r\n Gallery\r\n \r\n \r\n \r\n \r\n Hover & Click\r\n \r\n
\r\n {segmentTypes !== \"Click\" && visibleClickHover && (\r\n \r\n Click an object one or more times. Shift-click to remove\r\n regions.\r\n
\r\n\r\n Click an object one or more times. Shift-click to remove\r\n regions.\r\n
\r\n )}\r\n\r\n setUserNegClickBool(false)}\r\n className=\"flex flex-col items-center\"\r\n >\r\n \r\n +\r\n \r\n \r\n Add Mask\r\n \r\n
\r\n\r\n \r\n \r\n \r\n Box\r\n \r\n
\r\n {segmentTypes !== \"Box\" && visibleBoxHover && (\r\n \r\n Roughly draw a box around an object.\r\n
\r\n\r\n Roughly draw a box around an object.\r\n
\r\n )}\r\n\r\n setUserNegClickBool(false)}\r\n className=\"flex flex-col items-center\"\r\n >\r\n \r\n +\r\n \r\n \r\n Add Mask\r\n \r\n
\r\n\r\n \r\n \r\n Everything\r\n \r\n
\r\n {segmentTypes !== \"All\" && visibleAllHover && (\r\n See Cut-outs
\r\nSee Cut-outs
\r\n\r\n {stickers.map((el: HTMLCanvasElement, i) => (\r\n handleStickerClick(i)}\r\n />\r\n ))}\r\n
\r\n ![](\"assets/erase.svg\")
\r\n Erase Object\r\n */}\r\n Want to keep going?
\r\n \r\n \r\n \r\n )}\r\n \r\n ) : (\r\n <>\r\n {image || isToolBarUpload ? (\r\n\r\n {showLoadingModal ? (\r\n
\r\n \r\n ) : !isToolBarUpload ? (\r\n \r\n \r\n {\r\n // console.log(`${id} took ${actualDuration}ms`);\r\n }}\r\n >\r\n
\r\n \r\n
\r\n \r\n
\r\n ) : (\r\n <>\r\n )}\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default Stage;\r\n"
},
{
"path": "src/components/SvgMask.tsx",
"content": "import React, { useContext, useEffect, useState, useRef } from \"react\";\r\nimport AppContext from \"./hooks/createContext\";\r\n\r\ninterface SvgMaskProps {\r\n xScale: number;\r\n yScale: number;\r\n svgStr: string;\r\n id?: string | undefined;\r\n className?: string | undefined;\r\n}\r\n\r\nconst SvgMask = ({\r\n xScale,\r\n yScale,\r\n svgStr,\r\n id = \"\",\r\n className = \"\",\r\n}: SvgMaskProps) => {\r\n const {\r\n click: [click, setClick],\r\n image: [image],\r\n isLoading: [isLoading, setIsLoading],\r\n canvasWidth: [, setCanvasWidth],\r\n canvasHeight: [, setCanvasHeight],\r\n isErasing: [isErasing, setIsErasing],\r\n svg: [svg],\r\n isMultiMaskMode: [isMultiMaskMode, setIsMultiMaskMode],\r\n } = useContext(AppContext)!;\r\n const [key, setKey] = useState(Math.random());\r\n const [boundingBox, setBoundingBox] = useState\r\n {getText()}\r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default ToolTip;\r\n"
},
{
"path": "src/components/Video.tsx",
"content": "import React from \"react\";\r\n\r\nexport type VideoProps = {\r\n url?: string;\r\n youtubeId?: string;\r\n aspectRatio?: \"wide\" | \"square\" | \"normal\" | \"fill\";\r\n controls?: boolean;\r\n autoPlay?: boolean;\r\n loop?: boolean;\r\n muted?: boolean;\r\n poster?: string;\r\n alt?: string;\r\n style?: React.CSSProperties;\r\n className?: string;\r\n caption?: string;\r\n};\r\n\r\nexport default function Video({\r\n url,\r\n youtubeId,\r\n aspectRatio = \"wide\",\r\n controls = true,\r\n autoPlay = false,\r\n loop = true,\r\n muted = true,\r\n poster,\r\n alt = \"\",\r\n style,\r\n className,\r\n caption,\r\n}: VideoProps) {\r\n let aspect =\r\n aspectRatio === \"wide\"\r\n ? `aspect-w-16 aspect-h-9`\r\n : aspectRatio === \"square\"\r\n ? \"aspect-w-9 aspect-h-9\"\r\n : \"aspect-w-4 aspect-h-3\";\r\n\r\n let videoSize = \"\";\r\n\r\n if (aspectRatio === \"fill\") {\r\n aspect =\r\n \"absolute object-cover right-0 bottom-0 min-w-full min-h-full h-full\";\r\n videoSize = \"w-full h-full object-cover object-center\";\r\n }\r\n\r\n return youtubeId ? (\r\n \r\n
\r\n ) : (\r\n {caption}
\r\n )}\r\n \r\n );\r\n}\r\n"
},
{
"path": "src/components/helpers/CanvasHelper.tsx",
"content": "import { RefObject } from \"react\";\r\n\r\ninterface canvasScaleInitializerProps {\r\n width: number;\r\n height: number;\r\n containerRef: RefObject