{"id":14958875,"url":"https://github.com/cstefanache/tfjs-model-view","last_synced_at":"2025-10-24T16:30:27.918Z","repository":{"id":39559497,"uuid":"169092011","full_name":"cstefanache/tfjs-model-view","owner":"cstefanache","description":"Tensorflow.JS Net Viewer","archived":false,"fork":false,"pushed_at":"2022-12-10T04:16:57.000Z","size":10032,"stargazers_count":24,"open_issues_count":19,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-29T04:36:13.405Z","etag":null,"topics":["d3","deeplearning","neural-networks","tensorflow-experiments","tensorflowjs","visualization"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/cstefanache.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":"2019-02-04T14:37:34.000Z","updated_at":"2024-09-29T02:00:22.000Z","dependencies_parsed_at":"2023-01-25T20:31:32.704Z","dependency_job_id":null,"html_url":"https://github.com/cstefanache/tfjs-model-view","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cstefanache%2Ftfjs-model-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cstefanache%2Ftfjs-model-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cstefanache%2Ftfjs-model-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cstefanache%2Ftfjs-model-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cstefanache","download_url":"https://codeload.github.com/cstefanache/tfjs-model-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237890770,"owners_count":19382561,"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":["d3","deeplearning","neural-networks","tensorflow-experiments","tensorflowjs","visualization"],"created_at":"2024-09-24T13:18:26.177Z","updated_at":"2025-10-24T16:30:26.967Z","avatar_url":"https://github.com/cstefanache.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tfjs-model-view\n\n__tfjs-model-view__ is a library for _in browser_ visualization of neural network intended for use with TensorFlow.js.\n\nFeatures:\n\n* Automatically render of the neural net \n* Automatically update weights/biases/values\n\nThe library also aims to be flexible and make it easy for you to incorporate.\n\n## Demos\n\n- [Movielens recommendation using Tensorflow.js](https://beta.observablehq.com/@cstefanache/movielens-recommendation-using-tensorflow-js)\n- [Iris Prediction with Custom Node Renderer](https://beta.observablehq.com/@cstefanache/tensorflow-js-model-viewer-iris)\n- [MNIST Prediction](https://beta.observablehq.com/@cstefanache/mnist-tensorflow-js-network-view-tfjs-model-view)\n- [Multiple Input Rendering](https://beta.observablehq.com/@cstefanache/tensorflow-js-model-view-multiple-input-test)\n\n## Sample rendering output\n\n![Samples](https://raw.githubusercontent.com/cstefanache/cstefanache.github.io/master/media/img/net2.png \"Samples\")\n\n\n## Usage\n\nSimple:\n```\nnew ModelView(model)\n```\n\nCustomized:\n```\nnew ModelView(model, {\n    printStats: true,\n    radius: 25,\n    renderLinks: true,\n    xOffset: 100,\n    renderNode(ctx, node) {\n      const { x, y, value } = node;\n      ctx.font = '10px Arial';\n      ctx.fillStyle = '#000';\n      ctx.textAlign = 'center';\n      ctx.textBaseline = 'middle';\n      ctx.fillText(Math.round(value * 100) / 100, x, y);\n    },\n    onBeginRender: renderer =\u003e {\n      const { renderContext } = renderer;\n      renderContext.fillStyle = '#000';\n      renderContext.textAlign = 'end';\n      renderContext.font = '12px Arial';\n      renderContext.fillText('Sepal Length (cm)', 110, 110);\n      renderContext.fillText('Sepal Width (cm)', 110, 136);\n      renderContext.fillText('Petal Length (cm)', 110, 163);\n      renderContext.fillText('Petal Width (cm)', 110, 190);\n\n      renderContext.textAlign = 'start';\n      renderContext.fillText('Setosa', renderer.width - 60, 95);\n      renderContext.fillText('Versicolor', renderer.width - 60, 150);\n      renderContext.fillText('Virginica', renderer.width - 60, 205);\n    },\n    layer: {\n      'dense_Dense1_input': {\n        domain: [0, 8],\n        color: [165, 130, 180]\n      },\n      'dense_Dense1/dense_Dense1': {\n        color: [125, 125, 125]\n      },\n      'dense_Dense2/dense_Dense2': {\n        color: [125, 125, 125]\n      },\n      'dense_Dense3/dense_Dense3': {\n        nodePadding: 30\n      }\n    }\n  });\n```\n\nCustomizing:\n```\nnew ModelView(model, {\n  /** renders the list of layers **/\n  printStats: true,\n\n  /** Default domain for color intensity **/\n  domain: [0, 1],\n\n  /** Default node radius **/\n  radius: 6,\n\n  /** Default node padding **/\n  nodePadding: 2,\n\n  /** Default layer padding **/\n  layerPadding: 20,\n\n  /** Default group padding **/\n  groupPadding: 1,\n    \n  /** Horizontal padding **/\n  xPadding: 10,\n\n  /** Vertical padding **/\n  yPadding: 10,\n   \n  /** Render links between layers **/\n  renderLinks: false,\n  \n  /** Stroke node outer circle **/\n  nodeStroke: true,\n\n  /** custom render node function **/\n  renderNode: (ctx, node, nodeIdx) =\u003e {...},\n\n  /** If present will be executed before node rendering **/\n  onBeginRender: renderer =\u003e { ... },\n\n  /** If present will be executed after all node rendering is finished **/\n  onEndRender: renderer =\u003e { ... },\n\n  /** Personalized layer configuration **/\n  /** All defaults can be overridden for each layer individually **/\n  layer: {\n    'layerName': {\n      /** Any property mentioned above **/\n\n      /** Reshape layer to antoher [cols, rows, groups] layout **/\n      reshape: [4, 4, 8]\n    }\n  }\n});\n```\n\n## Installation\n\nYou can install this using npm with\n\n```\nnpm install tfjs-model-view\n```\n\nor using yarn with\n\n```\nyarn add tfjs-model-view\n```\n\n## Building from source\n\nTo build the library, you need to have node.js installed. We use `yarn`\ninstead of `npm` but you can use either.\n\nFirst install dependencies with\n\n```\nyarn\n```\n\nor\n\n```\nnpm install\n```\n\nYou can start the dev environment using\n\n```\nyarn dev\n```\n\nor\n\n```\nnpm run dev\n```\n\n\n## Sample Usage\n\n\n## Issues\n\nFound a bug or have a feature request? Please file an [issue](https://github.com/cstefanache/tfjs-model-view/issues/new)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcstefanache%2Ftfjs-model-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcstefanache%2Ftfjs-model-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcstefanache%2Ftfjs-model-view/lists"}