{"id":25701003,"url":"https://github.com/HC200ok/vue2-text-annotation","last_synced_at":"2025-02-25T04:16:08.648Z","repository":{"id":51224961,"uuid":"350261405","full_name":"HC200ok/vue2-text-annotation","owner":"HC200ok","description":"A vue2 component for text annotation and manual data masking","archived":false,"fork":false,"pushed_at":"2022-06-10T14:24:56.000Z","size":26627,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-25T04:16:00.354Z","etag":null,"topics":["data-masking","manual-data-masking","text-annotation","vue","vue2-component","vue2js"],"latest_commit_sha":null,"homepage":"","language":"Vue","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/HC200ok.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":"2021-03-22T08:18:22.000Z","updated_at":"2024-12-24T15:45:11.000Z","dependencies_parsed_at":"2022-08-27T19:01:50.163Z","dependency_job_id":null,"html_url":"https://github.com/HC200ok/vue2-text-annotation","commit_stats":null,"previous_names":["hc200ok/vue-manual-data-masking"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HC200ok%2Fvue2-text-annotation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HC200ok%2Fvue2-text-annotation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HC200ok%2Fvue2-text-annotation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HC200ok%2Fvue2-text-annotation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HC200ok","download_url":"https://codeload.github.com/HC200ok/vue2-text-annotation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240599194,"owners_count":19826959,"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":["data-masking","manual-data-masking","text-annotation","vue","vue2-component","vue2js"],"created_at":"2025-02-25T04:16:07.681Z","updated_at":"2025-02-25T04:16:08.625Z","avatar_url":"https://github.com/HC200ok.png","language":"Vue","funding_links":[],"categories":["Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"logo.png\"  width=\"55%\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\nvue2-text-annotation\n\u003c/p\u003e\n\n# Introduction\nvue2-text-annotation is an easy-to-use component for text annotation and data masking. It achieves the features of locating, extracting and tagging entities in text. \n\n# Installation\n```bash\nnpm install --save vue2-text-annotation\n```\n\n# Features\n1. [Text annotation](#text-annotation)\n2. [Data masking](#data-masking)\n\n# Text annotation\n\n### Operation\n1. Select or double click the content which you want to annotate, then an input dialog will pop up.\n2. Enter content of annotation.\n3. Click \"ok\" button or just press the enter key to annotate.\n4. If you want to remove an annoation, hover on an annotation entity and click the delete button to remove.\n\n### Demo\n\n\u003cimg src=\"./images/operation.gif\"   /\u003e\n\n[Online preview](https://yt6cc.csb.app/)\n\n[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue2-text-annotation-yt6cc?file=/src/App.vue)\n\n### Labeled data\n\n```js\n[\n  {\n    content: \"Vue.js\",\n    annotation: \"framework\",\n    start: 0,\n    end: 6,\n  },\n  {\n    content: \"Evan You\",\n    annotation: \"name\",\n    start: 521,\n    end: 529,\n  },\n  {\n    content: \"JavaScript\",\n    annotation: \"language\",\n    start: 24,\n    end: 34,\n  }\n]\n```\nThe labeled data generated by `vue2-text-annotation` can be used to build a data set of Natural Language Processing (NLP) model.\n\n### Usage\n```js\n\u003ctemplate\u003e\n  \u003cTextAnnotation\n    v-model=\"textAnnotations\"\n    :text=\"text\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport TextAnnotation from \"vue2-text-annotation\";\n\nexport default {\n  components: {\n    TextAnnotation,\n  },\n  data() {\n    return {\n      text: \"Vue.js is a progressive JavaScript framework, which is used to build UIs (User Interfaces) and SPAs (Single-page Applications). This framework is famous for its fast-paced learning curve. It is such an easy to learn and approachable library that with the knowledge of HTML, CSS, and JavaScript, we can start building web applications in Vue.js. The fast learning curve is kind of a signature of this framework. It is a versatile framework for our need as a library or a full-fledged framework for building huge web apps.\\nEvan You have created this framework. The idea of Evan You behind this framework is to build the best framework by combining the best features from already existing Angular and react Frameworks. Before building Vue.js, Evan You was working at Google. Inc and worked on Angular based projects. So, he came up with the idea of building his own framework. He picked the best parts of Angular, like template syntax, easy to use, and picked the best parts of React as well, like two-way data binding, the concept of props, component-based approach, and combined them to make a new framework Vue.js better than both of them.\",\n      textAnnotations: [{\n        content: \"Vue.js\",\n        annotation: \"framework\",\n        start:0,\n        end:6,\n      }]\n    }\n  }\n};\n```\n\n# Data masking\nData masking is used to label and hide sensitive data, create new text that hides (masks) sensitive information. \n\n### Demo\nBefore data masking: \u003cbr/\u003e\n\u003cimg src=\"./images/before-masking.png\"  wight=\"150\" /\u003e \u003cbr/\u003e \u003cbr/\u003e\nData masking: \u003cbr/\u003e\n\u003cimg src=\"./images/data-masking.gif\"  wight=\"150\" /\u003e \u003cbr/\u003e\u003cbr/\u003e\nAfter data masking: \u003cbr/\u003e\n\u003cimg src=\"./images/after-masking.png\"  wight=\"150\" /\u003e\n\n[Online preview](https://x9gvs3.csb.app/)\n\n[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/data-masking-x9gvs3?file=/src/App.vue)\n\n### Usage\n```js\n\u003ctemplate\u003e\n  \u003cTextAnnotation\n    v-model=\"textAnnotations\"\n    data-masking=\"true\"\n    :text=\"text\"\n    @afterDataMasking=\"updateTextAfterDataMasking\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport TextAnnotation from \"vue2-text-annotation\";\n\nexport default {\n  components: {\n    TextAnnotation,\n  },\n  data() {\n    return {\n      textAnnotations: [],\n      text:\n        \"James lives at 4 Chome-2-8 Shibakoen, his phone number is 080080080, His full name is Lebron James\",\n      textAfterDataMasking: \"\",\n    };\n  },\n  methods: {\n    updateTextAfterDataMasking(value) {\n      this.textAfterDataMasking = value;\n    },\n  },\n};\n\u003c/script\u003e\n```\n\n\n## Pops\n\n| Property | Description | Type | Required | Default |\n| -------- | ----------- | ---- | -------- | ------- |\n| v-model | Bind to text annotations\u003cbr\u003ee.g. \u003cbr\u003e[{ content: \"080080080\", annotation: \"phone number\", start: 0, end: 5 }] | {\u003cbr\u003e  content: string, \u003cbr\u003e  annotation: string, \u003cbr\u003e  start: number,\u003cbr\u003e  end: number\u003cbr\u003e}[] | true | [] |\n| annotation-text-color | Font color of annotation entity | string | false |\"#35495e\" |\n| annotation-bg-color | Background color of annotation entity | string | false | \"#41b883\"|\n| data-masking | Set to `true` to start using data masking feature | boolean | false | false |\n| data-masking-charactor | Charactor in data masking entity| string | false | '●' |\n| maxHeight | Max height of container | number \\| null | false | null | |\n| replace-charactor | Charactor be used to replace the sensitive data | string | false | '*\" |\n| text | Text (Notice: please use `\\n` in where you want to wrap a new line) | string | true | '' |\n\n\n\n## Events\n`afterDataMasking` event will be emitted when new sensitive data been masked. value of text after masking can be used inside of the callback function.\n\n## Build Setup\n\n```bash\n# install dependencies\nnpm install\n# serve with hot reload at localhost:8888\nnpm run serve\n# build for production with minification\nnpm run build\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHC200ok%2Fvue2-text-annotation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FHC200ok%2Fvue2-text-annotation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHC200ok%2Fvue2-text-annotation/lists"}