{"id":13596239,"url":"https://github.com/cbaziotis/neat-vision","last_synced_at":"2026-01-16T11:14:14.424Z","repository":{"id":81105219,"uuid":"131073177","full_name":"cbaziotis/neat-vision","owner":"cbaziotis","description":"Neat (Neural Attention) Vision, is a visualization tool for the attention mechanisms of deep-learning models for Natural Language Processing (NLP) tasks. (framework-agnostic)","archived":false,"fork":false,"pushed_at":"2018-05-04T19:30:56.000Z","size":26670,"stargazers_count":250,"open_issues_count":3,"forks_count":24,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-12-06T20:12:36.871Z","etag":null,"topics":["attention","attention-mechanism","attention-mechanisms","attention-scores","attention-visualization","deep-learning","deep-learning-library","deep-learning-visualization","natural-language-processing","nlp","self-attention","self-attentive-rnn","text-visualization","visualization","vuejs"],"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/cbaziotis.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-04-25T23:09:55.000Z","updated_at":"2024-10-31T01:47:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"fca68e8c-bc4d-4477-94c7-0c57ffbe7d16","html_url":"https://github.com/cbaziotis/neat-vision","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/cbaziotis%2Fneat-vision","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cbaziotis%2Fneat-vision/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cbaziotis%2Fneat-vision/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cbaziotis%2Fneat-vision/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cbaziotis","download_url":"https://codeload.github.com/cbaziotis/neat-vision/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248067852,"owners_count":21042362,"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":["attention","attention-mechanism","attention-mechanisms","attention-scores","attention-visualization","deep-learning","deep-learning-library","deep-learning-visualization","natural-language-processing","nlp","self-attention","self-attentive-rnn","text-visualization","visualization","vuejs"],"created_at":"2024-08-01T16:02:13.030Z","updated_at":"2026-01-16T11:14:14.419Z","avatar_url":"https://github.com/cbaziotis.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"# NeAt-Vision\n\n\u003e NeAt (Neural Attention) Vision, is a visualization tool \nfor the attention mechanisms of deep-learning models \nfor Natural Language Processing (NLP) tasks.\n\n#### Features\n  - Visualize the attention scores, with lots of options.\n  - Export the visualization to SVG format. This is very convenient if you\n  want to use the visualization in an academic paper. However, you may have\n  to convert the SVG to PDF.\n  - Visualize the models predictions. Show the posterior distribution over the\n  classes, the error in regression tasks and more. Useful for debugging your\n  models and inspecting their behavior.\n  - Support for classification, multilabel classification and regression.\n\n\n_neat-vision_ is made for visualizing the weights of attention mechanisms \nfor Natural Language Processing (Tasks) tasks.\nAt this moment, _neat-vision_ only supports the visualization of \nself-attention mechanisms, operating on the sentence-level \nand for the following tasks:\n - Regression: predict a single continuous value.\n - Multi-class Classification: a classification task with more than two classes.\n  Each sample belongs to one of `N` classes.\n - Multi-label Classification: we have `N` classes \n   and each sample may belong to more than one classes.\n   Essentially, it is a binary classification task for each class.  \n   \nHowever in the future there are plans for \nsupporting document-level models (hierarchical) and seq2seq models, \nsuch as in Neural Machine Translation (NMT).\n\n\n**Website (live)**: https://cbaziotis.github.io/neat-vision/\n\n\u003cp style=\"text-align:center;\"\u003e\n\u003cimg src=\"./static/video.gif\" alt=\"demo\" style=\"width: 800px; max-width=100%;\"/\u003e\n\u003c/p\u003e\n\n\n\n\n## Documentation\n\n### Overview\n_neat-vision_ takes as input 2 kinds of `json` files:\n - **Data file**. This file contains  (1) the text (tokenized), \n      (2) the attention scores and (3) the models predictions.\n - **Label file** (optional). \n      This is needed only in classifications tasks \n      and if provided, it is used for mapping each class label \n      to a user-defined description.\n\n\n### Input Format\n\nHere you will find a detailed overview of \nhow to properly format the output files, for each task.\nBesides the necessary data needed for visualizing the attention weights,\nin _neat-vision_ you can also visualise the predictions of the model\nand gain insights in its behavior. However, it is not required that you provide\nsuch data (e.g. posterior probabilities). \n\nIn any case, in `\\samples` you will find some examples, \ncontaining the predictions of our team (NTUA-SLP) in Semeval 2018. \nYou can use them to test _neat-vision_ and to check the format of the data files.\n\n**Notes**\n\n - the posteriors don't have to be normalized, which means you can simply\n  use the logits (before the softmax). _neat-vision_ will normalize the logits\n  for you. This is convenient for PyTorch users.\n - its ok to include the zero padded attention weights. \n  It simply matches each token with the corresponding attention weight, \n  so the zero padded timesteps in the attention weigths don't matter.   \n\n#### Regression \nThe structure of the data file for a classification task is the following:\n```\n{\n    \"text\": [],       \\\\ list of strings - the tokens (words, chars) in the text. (required)\n    \"label\": 0,       \\\\ float - the actual value. (required)\n    \"prediction\": 0,  \\\\ float - the predicted value. (required)\n    \"attention\": [],  \\\\ list of floats - the attention weigths. (required)\n    \"id\": \"sample_11\" \\\\ string - a unique id assigned to each sample. (required)\n  }\n```\n\nHere is an example of a sample in a data file:\n```\n{\n    \"text\": [\n      \"i\",\n      \"have\",\n      \"never\",\n      \"been\",\n      \"so\",\n      \"excited\",\n      \"to\",\n      \"start\",\n      \"a\",\n      \"semester\",\n      \"!\"\n    ],\n    \"label\": 0.969,\n    \"prediction\": 0.8037105202674866,\n    \"attention\": [\n      0.030253062024712563,\n      0.04317276179790497,\n      0.12440750747919083,\n      0.018600208684802055,\n      0.023923002183437347,\n      0.1299467384815216,\n      0.1300467699766159,\n      0.13003277778625488,\n      0.1280088871717453,\n      0.1151493638753891,\n      0.12645892798900604,\n      0.0,\n      0.0,\n      ...\n      0.0,\n      0.0\n    ],\n    \"id\": \"sample_11\"\n  }\n```\n\n\n#### Classification \nThe structure of the data file for a classification task is the following:\n```\n{\n    \"text\": [],       \\\\ list of strings - the tokens (words, chars) in the text. (required)\n    \"label\": 0,       \\\\ integer - the class label. (required)\n    \"prediction\": 0,  \\\\ integer - the predicted label. (required)\n    \"posterior\": [],  \\\\ list of floats - the posterior probabilities. (optional)\n    \"attention\": [],  \\\\ list of floats - the attention weigths. (required)\n    \"id\": \"sample_99\" \\\\ string - a unique id assigned to each sample. (required)\n  }\n```\n\nHere is an example of a sample in a data file:\n```\n{\n    \"text\": [\n      \"20\",\n      \"episodes\",\n      \"left\",\n      \"i\",\n      \"am\",\n      \"dying\",\n      \"over\",\n      \"here\"\n    ],\n    \"label\": 0,\n    \"prediction\": 0,\n    \"posterior\": [\n      1.6511023044586182,\n      0.6472567319869995,\n      0.10215002298355103,\n      -1.8493231534957886\n    ],\n    \"attention\": [\n      0.026811618357896805,\n      0.03429250791668892,\n      0.16327856481075287,\n      0.1225932389497757,\n      0.14799638092517853,\n      0.17938685417175293,\n      0.15541180968284607,\n      0.1702289879322052,\n      0.0,\n      0.0,\n      ...\n      0.0,\n      0.0\n    ],\n    \"id\": \"sample_99\"\n  }\n```\n\n\n\n#### Multilabel Classification \nThe structure of the data file for a classification task is the following:\n```\n{\n    \"text\": [],       \\\\ list of strings - the tokens (words, chars) in the text. (required)\n    \"label\": 0,       \\\\ list of ints - the class labels - binary vector. (required)\n    \"prediction\": 0,  \\\\ list of ints - the predicted labels - binary vector. (required)\n    \"posterior\": [],  \\\\ list of floats - the posterior probabilities. (optional)\n    \"attention\": [],  \\\\ list of floats - the attention weigths. (required)\n    \"id\": \"sample_55\" \\\\ string - a unique id assigned to each sample. (required)\n}\n```\n\nHere is an example of a sample in a data file:\n```\n{\n    \"text\": [\n      \"\u003callcaps\u003e\",\n      \"fall\",\n      \"season\",\n      \"starts\",\n      \"today\",\n      \"\u003c/allcaps\u003e\",\n      \"!\",\n      \"\u003crepeated\u003e\"\n    ],\n    \"label\": [\n      0,\n      1,\n      0,\n      0,\n      1,\n      0,\n      1,\n      0,\n      0,\n      0,\n      1\n    ],\n    \"prediction\": [\n      0,\n      1,\n      0,\n      0,\n      1,\n      0,\n      0,\n      0,\n      0,\n      0,\n      0\n    ],\n    \"posterior\": [\n      -2.388745069503784,\n      0.4522533118724823,\n      -3.0336408615112305,\n      -2.2636921405792236,\n      1.1948155164718628,\n      -2.710108995437622,\n      -0.09358435124158859,\n      -3.7859573364257812,\n      -3.229905605316162,\n      -2.832045078277588,\n      -2.1722922325134277\n    ],\n    \"attention\": [\n      0.12348131835460663,\n      0.12422706931829453,\n      0.12277955561876297,\n      0.14215923845767975,\n      0.12141828238964081,\n      0.12250666320323944,\n      0.12207339704036713,\n      0.12135452032089233,\n      0.0,\n      0.0,\n      ...\n      0.0,\n      0.0\n    ],\n    \"id\": \"sample_55\"\n  }\n```\n\n##### Labels\nIn classification tasks, you can optionally provide a mapping \nof each class label to a name and description. Here is such an example:\n```json\n{\n  \"0\": {\n    \"name\": \"❤\",\n    \"desc\": \"_red_heart_\"\n  },\n  \"1\": {\n    \"name\": \"😍\",\n    \"desc\": \"_smiling_face_with_hearteyes_\"\n  },\n  \"2\": {\n    \"name\": \"😂\",\n    \"desc\": \"_face_with_tears_of_joy_\"\n  },\n  \"3\": {\n    \"name\": \"💕\",\n    \"desc\": \"_two_hearts_\"\n  },\n  \"4\": {\n    \"name\": \"🔥\",\n    \"desc\": \"_fire_\"\n  },\n  \"5\": {\n    \"name\": \"😊\",\n    \"desc\": \"_smiling_face_with_smiling_eyes_\"\n  },\n  \"6\": {\n    \"name\": \"😎\",\n    \"desc\": \"_smiling_face_with_sunglasses_\"\n  },\n  \"7\": {\n    \"name\": \"✨\",\n    \"desc\": \"_sparkles_\"\n  },\n  \"8\": {\n    \"name\": \"💙\",\n    \"desc\": \"_blue_heart_\"\n  },\n  \"9\": {\n    \"name\": \"😘\",\n    \"desc\": \"_face_blowing_a_kiss_\"\n  },\n  \"10\": {\n    \"name\": \"📷\",\n    \"desc\": \"_camera_\"\n  },\n  \"11\": {\n    \"name\": \"🇺🇸\",\n    \"desc\": \"_United_States_\"\n  },\n  \"12\": {\n    \"name\": \"☀\",\n    \"desc\": \"_sun_\"\n  },\n  \"13\": {\n    \"name\": \"💜\",\n    \"desc\": \"_purple_heart_\"\n  },\n  \"14\": {\n    \"name\": \"😉\",\n    \"desc\": \"_winking_face_\"\n  },\n  \"15\": {\n    \"name\": \"💯\",\n    \"desc\": \"_hundred_points_\"\n  },\n  \"16\": {\n    \"name\": \"😁\",\n    \"desc\": \"_beaming_face_with_smiling_eyes_\"\n  },\n  \"17\": {\n    \"name\": \"🎄\",\n    \"desc\": \"_Christmas_tree_\"\n  },\n  \"18\": {\n    \"name\": \"📸\",\n    \"desc\": \"_camera_with_flash_\"\n  },\n  \"19\": {\n    \"name\": \"😜\",\n    \"desc\": \"_winking_face_with_tongue_\"\n  }\n}\n```\n\n\n### Visualization Examples\n\n\u003cp\u003e\n\u003cimg src=\"./images/task1_ec/1-01.png\" height=\"55\" \u003e\n\u003cimg src=\"./images/task1_ec/1-02.png\" align=\"right\" height=\"55\" \u003e\n\u003c/br\u003e\n\u003c/br\u003e\n\u003cimg src=\"./images/task1_ec/1-04.png\" height=\"55\" \u003e\n\u003cimg src=\"./images/task1_ec/1-05.png\" align=\"right\" height=\"55\" \u003e\n\u003c/br\u003e\n\u003c/br\u003e\n\u003cimg src=\"./images/task1_ec/1-10.png\" height=\"55\" \u003e\n\u003cimg src=\"./images/task1_ec/1-11.png\" align=\"right\" height=\"55\" \u003e\n\u003c/br\u003e\n\u003c/br\u003e\n\u003cimg src=\"./images/task1_ec/1-12.png\" height=\"55\" \u003e\n\u003cimg src=\"./images/task1_ec/1-16.png\" align=\"right\" height=\"55\" \u003e\n\u003c/br\u003e\n\u003c/p\u003e\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# build for production and view the bundle analyzer report\nnpm run build --report\n```\n\nFor a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcbaziotis%2Fneat-vision","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcbaziotis%2Fneat-vision","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcbaziotis%2Fneat-vision/lists"}