https://docs.swmansion.com/react-native-executorch/assets/js/d9be49b9.0624249c.js

1"use strict";(globalThis.webpackChunkdocs=globalThis.webpackChunkdocs||[]).push([[3315],{2360(e,t,n){n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>c,default:()=>h,frontMatter:()=>o,metadata:()=>s,toc:()=>a});const s=JSON.parse('{"id":"computer-vision/useClassification","title":"useClassification","description":"Image classification is the process of assigning a label to an image that best describes its contents. For example, when given an image of a puppy, the image classifier should assign the puppy class to that image.","source":"@site/versioned_docs/version-0.3.x/computer-vision/useClassification.md","sourceDirName":"computer-vision","slug":"/computer-vision/useClassification","permalink":"/react-native-executorch/docs/0.3.x/computer-vision/useClassification","draft":false,"unlisted":false,"editUrl":"https://github.com/software-mansion/react-native-executorch/edit/main/docs/versioned_docs/version-0.3.x/computer-vision/useClassification.md","tags":[],"version":"0.3.x","sidebarPosition":1,"frontMatter":{"title":"useClassification","sidebar_position":1},"sidebar":"tutorialSidebar","previous":{"title":"Computer Vision","permalink":"/react-native-executorch/docs/0.3.x/category/computer-vision"},"next":{"title":"useStyleTransfer","permalink":"/react-native-executorch/docs/0.3.x/computer-vision/useStyleTransfer"}}');var i=n(74848),r=n(28453);const o={title:"useClassification",sidebar_position:1},c=void 0,l={},a=[{value:"Reference",id:"reference",level:2},{value:"Arguments",id:"arguments",level:3},{value:"Returns",id:"returns",level:3},{value:"Running the model",id:"running-the-model",level:2},{value:"Example",id:"example",level:2},{value:"Supported models",id:"supported-models",level:2},{value:"Benchmarks",id:"benchmarks",level:2},{value:"Model size",id:"model-size",level:3},{value:"Memory usage",id:"memory-usage",level:3},{value:"Inference time",id:"inference-time",level:3}];function d(e){const t={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.p,{children:"Image classification is the process of assigning a label to an image that best describes its contents. For example, when given an image of a puppy, the image classifier should assign the puppy class to that image."}),"\n",(0,i.jsx)(t.admonition,{type:"info",children:(0,i.jsx)(t.p,{children:"Usually, the class with the highest probability is the one that is assigned to an image. However, if there are multiple classes with comparatively high probabilities, this may indicate that the model is not confident in its prediction."})}),"\n",(0,i.jsx)(t.admonition,{type:"caution",children:(0,i.jsxs)(t.p,{children:["It is recommended to use models provided by us, which are available at our ",(0,i.jsx)(t.a,{href:"https://huggingface.co/software-mansion/react-native-executorch-efficientnet-v2-s",children:"Hugging Face repository"}),". You can also use ",(0,i.jsx)(t.a,{href:"https://github.com/software-mansion/react-native-executorch/blob/v0.3.4/src/constants/modelUrls.ts",children:"constants"})," shipped with our library"]})}),"\n",(0,i.jsx)(t.h2,{id:"reference",children:"Reference"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-typescript",children:"import { useClassification, EFFICIENTNET_V2_S } from 'react-native-executorch';\n\nconst model = useClassification({\n  modelSource: EFFICIENTNET_V2_S,\n});\n\nconst imageUri = 'file::///Users/.../cute_puppy.png';\n\ntry {\n  const classesWithProbabilities = await model.forward(imageUri);\n} catch (error) {\n  console.error(error);\n}\n"})}),"\n",(0,i.jsx)(t.h3,{id:"arguments",children:"Arguments"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.code,{children:"modelSource"})}),"\nA string that specifies the location of the model binary. For more information, take a look at ",(0,i.jsx)(t.a,{href:"/react-native-executorch/docs/0.3.x/fundamentals/loading-models",children:"loading models"})," page."]}),"\n",(0,i.jsx)(t.h3,{id:"returns",children:"Returns"}),"\n",(0,i.jsxs)(t.table,{children:[(0,i.jsx)(t.thead,{children:(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.th,{children:"Field"}),(0,i.jsx)(t.th,{children:"Type"}),(0,i.jsx)(t.th,{children:"Description"})]})}),(0,i.jsxs)(t.tbody,{children:[(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"forward"})}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"(input: string) => Promise<{ [category: string]: number }>

1"})}),(0,i.jsxs)(t.td,{children:["Executes the model's forward pass, where ",(0,i.jsx)(t.code,{children:"input"})," can be a fetchable resource or a Base64-encoded string."]})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"error"})}),(0,i.jsx)(t.td,{children:(0,i.jsx)("code",{children:"string | null"})}),(0,i.jsx)(t.td,{children:"Contains the error message if the model failed to load."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"isGenerating"})}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"boolean"})}),(0,i.jsx)(t.td,{children:"Indicates whether the model is currently processing an inference."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"isReady"})}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"boolean"})}),(0,i.jsx)(t.td,{children:"Indicates whether the model has successfully loaded and is ready for inference."})]}),(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"downloadProgress"})}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.code,{children:"number"})}),(0,i.jsx)(t.td,{children:"Represents the download progress as a value between 0 and 1."})]})]})]}),"\n",(0,i.jsx)(t.h2,{id:"running-the-model",children:"Running the model"}),"\n",(0,i.jsxs)(t.p,{children:["To run the model, you can use the ",(0,i.jsx)(t.code,{children:"forward"})," method. It accepts one argument, which is the image. The image can be a remote URL, a local file URI, or a base64-encoded image. The function returns a promise, which can resolve either to an error or an object containing categories with their probabilities."]}),"\n",(0,i.jsx)(t.admonition,{type:"info",children:(0,i.jsx)(t.p,{children:"Images from external sources are stored in your application's temporary directory."})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-typescript",children:"import { useClassification, EFFICIENTNET_V2_S } from 'react-native-executorch';\n\nfunction App() {\n  const model = useClassification({\n    modulePath: EFFICIENTNET_V2_S,\n  });\n\n  ...\n  const imageUri = 'file:///Users/.../cute_puppy.png';\n\n  try {\n    const classesWithProbabilities = await model.forward(imageUri);\n\n    // Extract three classes with the highest probabilities\n    const topThreeClasses = Object.entries(classesWithProbabilities)\n      .sort(([, a], [, b]) => b - a)\n      .slice(0, 3)\n      .map(([label, score]) => ({ label, score }));\n  } catch (error) {\n    console.error(error);\n  }\n  ...\n}\n"})}),"\n",(0,i.jsx)(t.h2,{id:"supported-models",children:"Supported models"}),"\n",(0,i.jsxs)(t.table,{children:[(0,i.jsx)(t.thead,{children:(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.th,{children:"Model"}),(0,i.jsx)(t.th,{children:"Number of classes"}),(0,i.jsx)(t.th,{children:"Class list"})]})}),(0,i.jsx)(t.tbody,{children:(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:(0,i.jsx)(t.a,{href:"https://pytorch.org/vision/stable/models/generated/torchvision.models.efficientnet_v2_s.html",children:"efficientnet_v2_s"})}),(0,i.jsx)(t.td,{children:"1000"}),(0,i.jsx)(t.td,{children:(0,i.jsx)(t.a,{href:"https://github.com/software-mansion/react-native-executorch/blob/v0.3.4/android/src/main/java/com/swmansion/rnexecutorch/models/classification/Constants.kt",children:"ImageNet1k_v1"})})]})})]}),"\n",(0,i.jsx)(t.h2,{id:"benchmarks",children:"Benchmarks"}),"\n",(0,i.jsx)(t.h3,{id:"model-size",children:"Model size"}),"\n",(0,i.jsxs)(t.table,{children:[(0,i.jsx)(t.thead,{children:(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.th,{children:"Model"}),(0,i.jsx)(t.th,{style:{textAlign:"center"},children:"XNNPACK [MB]"}),(0,i.jsx)(t.th,{style:{textAlign:"center"},children:"Core ML [MB]"})]})}),(0,i.jsx)(t.tbody,{children:(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"EFFICIENTNET_V2_S"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"85.6"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"43.9"})]})})]}),"\n",(0,i.jsx)(t.h3,{id:"memory-usage",children:"Memory usage"}),"\n",(0,i.jsxs)(t.table,{children:[(0,i.jsx)(t.thead,{children:(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.th,{children:"Model"}),(0,i.jsx)(t.th,{style:{textAlign:"center"},children:"Android (XNNPACK) [MB]"}),(0,i.jsx)(t.th,{style:{textAlign:"center"},children:"iOS (Core ML) [MB]"})]})}),(0,i.jsx)(t.tbody,{children:(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"EFFICIENTNET_V2_S"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"130"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"85"})]})})]}),"\n",(0,i.jsx)(t.h3,{id:"inference-time",children:"Inference time"}),"\n",(0,i.jsx)(t.admonition,{title:"warning",type:"warning",children:(0,i.jsx)(t.p,{children:"Times presented in the tables are measured as consecutive runs of the model. Initial run times may be up to 2x longer due to model loading and initialization."})}),"\n",(0,i.jsxs)(t.table,{children:[(0,i.jsx)(t.thead,{children:(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.th,{children:"Model"}),(0,i.jsx)(t.th,{style:{textAlign:"center"},children:"iPhone 16 Pro (Core ML) [ms]"}),(0,i.jsx)(t.th,{style:{textAlign:"center"},children:"iPhone 13 Pro (Core ML) [ms]"}),(0,i.jsx)(t.th,{style:{textAlign:"center"},children:"iPhone SE 3 (Core ML) [ms]"}),(0,i.jsx)(t.th,{style:{textAlign:"center"},children:"Samsung Galaxy S24 (XNNPACK) [ms]"}),(0,i.jsx)(t.th,{style:{textAlign:"center"},children:"OnePlus 12 (XNNPACK) [ms]"})]})}),(0,i.jsx)(t.tbody,{children:(0,i.jsxs)(t.tr,{children:[(0,i.jsx)(t.td,{children:"EFFICIENTNET_V2_S"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"100"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"120"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"130"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"180"}),(0,i.jsx)(t.td,{style:{textAlign:"center"},children:"170"})]})})]})]})}function h(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},28453(e,t,n){n.d(t,{R:()=>o,x:()=>c});var s=n(96540);const i={},r=s.createContext(i);function o(e){const t=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]);