{"id":13880922,"url":"https://github.com/joshuaellis/react-tensorflow","last_synced_at":"2025-04-30T18:04:12.546Z","repository":{"id":54228130,"uuid":"309710409","full_name":"joshuaellis/react-tensorflow","owner":"joshuaellis","description":"Tensorflow hooks for React.js","archived":false,"fork":false,"pushed_at":"2021-03-02T09:59:55.000Z","size":2943,"stargazers_count":161,"open_issues_count":2,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-30T18:03:15.988Z","etag":null,"topics":["hooks","react","reactjs","tensorflow","tensorflowjs","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joshuaellis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-03T14:24:10.000Z","updated_at":"2025-02-04T14:25:19.000Z","dependencies_parsed_at":"2022-08-13T09:40:36.095Z","dependency_job_id":null,"html_url":"https://github.com/joshuaellis/react-tensorflow","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshuaellis%2Freact-tensorflow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshuaellis%2Freact-tensorflow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshuaellis%2Freact-tensorflow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshuaellis%2Freact-tensorflow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joshuaellis","download_url":"https://codeload.github.com/joshuaellis/react-tensorflow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251758164,"owners_count":21638988,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hooks","react","reactjs","tensorflow","tensorflowjs","typescript"],"created_at":"2024-08-06T08:03:39.703Z","updated_at":"2025-04-30T18:04:12.504Z","avatar_url":"https://github.com/joshuaellis.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# React-Tensorflow\n\n![Typed with TypeScript][typescript]\n[![codecov](https://codecov.io/gh/joshuaellis/react-tensorflow/branch/master/graph/badge.svg)](https://codecov.io/gh/joshuaellis/react-tensorflow)\n[![CircleCI](https://circleci.com/gh/joshuaellis/react-tensorflow.svg?style=svg)](https://circleci.com/gh/joshuaellis/react-tensorflow)\n![npm](https://img.shields.io/npm/v/react-tensorflow)\n[![twitter-badge]][twitter]\n[![github-star-badge]][github-star]\n\n\u003e A library of React hooks and HOCs written in Typescript to use Tensorflow models in your application! 🤖🧠\n\n[Demo application with Code Examples](https://react-tensorflow-example.vercel.app/)\n\n## Installation\n\n```sh\nyarn add react-tensorflow\n```\n\n```sh\nnpm i react-tensorflow -S\n```\n\n### Peer dependencies\n\n- [react](https://www.npmjs.com/package/react) \u003e=16.8.0\n- [@tensorflow/tfjs](https://www.npmjs.com/package/@tensorflow/tfjs) \u003e=2.0.0\n\n## Basic usage\n\n```tsx\nimport { useModel } from 'react-tensorflow'\n\nconst MyModelComponent = () =\u003e {\n  const model = useModel({ modelUrl: `${PATH_TO_MODEL}` })\n\n  // ...do something with the model\n\n  return null\n}\n```\n\n## API\n\n### useModel\n\n```tsx\nuseModel({\n  model?: any,\n  modelUrl?: string,\n  layers?: boolean,\n  onLoadCallback?: (model: GraphModel | LayersModel | null) =\u003e void\n}): GraphModel | LayersModel | null\n```\n\nIf `model` or `modelUrl` is omitted useModel will look to find the ModelProvider as it's context\nfor returning the model. When loading a model with this hook, the `layers` boolean is passed if\nyour TF model should be loaded with the function `tf.loadLayersModel` otherwise it is assumed the\nmodel should be loaded with `tf.loadGraphModel`. If a model is loaded with `modelUrl` and an\n`onLoadCallback` function is provided, it will be called with the loaded model. This function is\nintended to be used as a warm up function that could look like this –\n\n```js\n(model) =\u003e {\n  const zeroTensor = tf.zeros([1, 300, 300, 3], 'int32');\n  const result = await model.executeAsync(zeroTensor) as tf.Tensor[];\n  await Promise.all(result.map(t =\u003e t.data()));\n  result.map(t =\u003e t.dispose());\n  zeroTensor.dispose();\n}\n```\n\n### ModelProvider\n\n```tsx\n\u003cModelProvider url={string} layers={boolean} onLoadCallback={(model) =\u003e void}\u003e\n  \u003cApp /\u003e\n\u003c/ModelProvider\u003e\n```\n\nWraps the children in a React Provider to be consumed by Context's in either the `useModel` hook\nor `withModel` HOC. The props passed to this provider are the same as the documented props for\n`useModel`.\n\n### withModel\n\n```tsx\nwithModel(Component: React.ComponentType): JSX.Element\n```\n\nWraps the provided component in a React Context, passing the model give to the provider as a prop.\n\n### useWebcam\n\n```tsx\nuseWebcam (options?: {\n    width?: number\n    height?: number\n    facingMode?: string\n  }): [React.MutableRefObject\u003cHTMLVideoElement\u003e, tf.Tensor | null]\n```\n\nProvides a ref to be used on a video element, the hook then returns a tensor with shape\n`[1, width, height, 3]` where the width and height are either dictated by the element's width\n\u0026 height or the provided argument documented above. The options argument while documented\nabove can infact take all the properties of the [MediaStreamConstraints](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints).\n\n\u003e :point_right: All the following hooks use useModel under the hood, therefore accepting any of the args\n\u003e passed to `useModel` :point_left:\n\n### usePrediction\n\n```tsx\nusePrediction (options?: {\n  predictConfig?: {},\n  useExecute?: boolean = false,\n  outputName?: string,\n  predictionFunction?: string,\n  modelUrl?: string,\n  layers?: boolean,\n}): [(data: tf.Tensor) =\u003e void, tf.Tensor | tf.Tensor[] | tf.NamedTensorMap | null]\n```\n\nProvides a function to set the data you want to use to create a prediction. The data must be\nin the form of a tensor. It then returns a new tensor as the prediction using either the model\nset with the `ModelProvider` component or by passing a modelUrl as an argument as it uses\n`useModel` under the hood. You can then perform different actions such as normalizing the data\nfor to classify the original input. By default `usePrediction` uses `.predict`, if you want to\nforce the use of `.executeAsync` set `useExecute: true` and if you want to use a custom predict\nfunction, pass it's name via the `predictionFunction` key. If you're using a LayersModel you\nmust set `outputName`.\n\n:no_entry_sign: Using a `@tensorflow/tfjs-models` model with this hook will cause typescript\nerrors if the model predicition method is called or will simply return null because the model\neither does not have an executeAsync or predict function or it does, and it has not returned a\nTensor. :no_entry_sign:\n\n\u003e :point_right: All the following hooks use usePrediction under the hood, therefore accepting any of the args\n\u003e passed to `usePrediction` :point_left:\n\n### useClassifier\n\n```tsx\nuseClassifer(options?: {\n  classes?: {},\n  returns?: number,\n  modelUrl?: string,\n  layers?: boolean,\n}): [(data: tf.Tensor) =\u003e void, Array\u003c{class: number, probability: number}\u003e | Array\u003c{class: string, probability: number}\u003e | null]\n```\n\nReturns a function to set the data which must be in the form of a tensor. After prediction has\nbeen made, returns an array of classifications (be default, the array will have length 5).\nIf the classes argument is provided, the class key in the returned array will be the class at\nthe index of the prediction.\n\n### useObjectDetect\n\n```tsx\nuseObjectDetect(options?:{\n  returns?: number,\n  minConfidence?: number,\n  classes?: {},\n  width?: number,\n  height?: number,\n  modelUrl?: string,\n  layers?: boolean,\n}): [(data: tf.Tensor) =\u003e void, Array\u003c{class: number, probability: number, boundingBox: number[]}\u003e | Array\u003c{class: string, probability: number, boundingBox: number[]}\u003e | null]\n```\n\nReturns an array with index 0 being a function to set the data. This data must be in the form\nof a tensor. After a prediction has been made, returns an array of objects detected. Both `height`\nand `width` of the media must be provided to recieve values inside bounding box which will be an\narray of four numbers – `[left, top, width, height]`. `minConfidence` must be a value between 0 - 1.\nThe hook then returns an array of detected objects (by default, the array will be length 5). If the\nclasses argument is provided, the class key in the returned array will be the class at the index of\nthe prediction as a `string`.\n\n## Contributing\n\nContributions are very welcome and wanted.\n\n**Before submitting** a new pull request, please make sure:\n\n1. Consider if the pull-request should be going to the master branch or the latest release branch.\n2. If merging to master, you have updated the package.json version.\n3. You report your changes into the CHANGELOG file.\n4. make sure you run the test and build script before submitting your merge request.\n5. make sure you've added the documentation of your changes.\n\n[typescript]: https://flat.badgen.net/badge/icon/Typed?icon=typescript\u0026label\u0026labelColor=blue\u0026color=555555\n[github-star-badge]: https://img.shields.io/github/stars/joshuaellis/react-tensorflow.svg?style=social\n[github-star]: https://github.com/joshuaellis/react-tensorflow/stargazers\n[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20react-tensorflow%20by%20@Josh%20Ellis%20https://github.com/joshuaellis/react-tensorflow%20%F0%9F%91%8D\n[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/kentcdodds/testing-workshop.svg?style=social\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshuaellis%2Freact-tensorflow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoshuaellis%2Freact-tensorflow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshuaellis%2Freact-tensorflow/lists"}