{"id":19978140,"url":"https://github.com/visactor/vmind","last_synced_at":"2025-05-04T04:31:35.372Z","repository":{"id":219227552,"uuid":"748476385","full_name":"VisActor/VMind","owner":"VisActor","description":"Not only automatic, but also intelligent. An Intelligent  data Visualization System, based on LLM.","archived":false,"fork":false,"pushed_at":"2025-04-21T08:35:29.000Z","size":5339,"stargazers_count":327,"open_issues_count":24,"forks_count":65,"subscribers_count":18,"default_branch":"develop","last_synced_at":"2025-04-21T09:33:42.042Z","etag":null,"topics":["chart","data-visualization","grid","infographics","intelligent-systems","llm","table","text2image","text2video"],"latest_commit_sha":null,"homepage":"https://www.visactor.io/vmind","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/VisActor.png","metadata":{"files":{"readme":"README-ja.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-01-26T03:36:43.000Z","updated_at":"2025-04-21T06:21:26.000Z","dependencies_parsed_at":"2025-04-21T09:38:18.512Z","dependency_job_id":null,"html_url":"https://github.com/VisActor/VMind","commit_stats":null,"previous_names":["visactor/vmind"],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VisActor%2FVMind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VisActor%2FVMind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VisActor%2FVMind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VisActor%2FVMind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VisActor","download_url":"https://codeload.github.com/VisActor/VMind/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252288912,"owners_count":21724323,"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":["chart","data-visualization","grid","infographics","intelligent-systems","llm","table","text2image","text2video"],"created_at":"2024-11-13T03:31:00.842Z","updated_at":"2025-05-04T04:31:30.362Z","avatar_url":"https://github.com/VisActor.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n   \u003ca href=\"https://github.com/VisActor#gh-light-mode-only\" target=\"_blank\"\u003e\n    \u003cimg alt=\"VisActor Logo\" width=\"200\" src=\"https://github.com/VisActor/.github/blob/main/profile/logo_500_200_light.svg\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/VisActor#gh-dark-mode-only\" target=\"_blank\"\u003e\n    \u003cimg alt=\"VisActor Logo\" width=\"200\" src=\"https://github.com/VisActor/.github/blob/main/profile/logo_500_200_dark.svg\"/\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003eVMind\u003c/h1\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\nNot just automatic, but also fantastic.Open-source solution for intelligent visualization.\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.visactor.io/vmind\"\u003eIntroduction\u003c/a\u003e •\n  \u003ca href=\"https://www.visactor.io/vmind/example\"\u003eDemo\u003c/a\u003e •\n  \u003ca href=\"https://www.visactor.io/vmind/guide/Intro_to_VMind\"\u003eTutorial\u003c/a\u003e •\n  \u003ca href=\"https://www.visactor.io/vmind/api/VMind_Instance\"\u003eAPI\u003c/a\u003e•\n  \u003ca href=\"https://www.visactor.io/vmind/openapi\"\u003eOpenApi\u003c/a\u003e\n\u003c/p\u003e\n\n![](https://github.com/visactor/vmind/actions/workflows/bug-server.yml/badge.svg)\n![](https://github.com/visactor/vmind/actions/workflows/unit-test.yml/badge.svg)\n[![npm Version](https://img.shields.io/npm/v/@visactor/vmind.svg)](https://www.npmjs.com/package/@visactor/vmind)\n[![npm Download](https://img.shields.io/npm/dm/@visactor/vmind.svg)](https://www.npmjs.com/package/@visactor/vmind)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/VisActor/VMind/blob/main/CONTRIBUTING.md#your-first-pull-request)\n\n![](https://img.shields.io/badge/language-TypeScript-red.svg) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vmind/blob/main/LICENSE)\n\n\u003c/div\u003e\n\n\n\n\u003cdiv align=\"center\"\u003e\n\nEnglish | [简体中文](readme-zh.md) | [日本語](README-ja.md)\n\n\u003c/div\u003e\n\n## Introduction\n\n`@visactor/vmind` is an intelligent chart component based on LLM provided by [VisActor](https://www.visactor.io/), including dialog-based chart generation and editing capabilities. It provides a natural language interaction interface, allowing you to easily create chart narrative works with `@visactor/VMind` with just one sentence, and edit them through continuous dialogue, greatly improving your efficiency in creating data visualization works.\n\nThe main features of `@visactor/vmind` include:\n\n- **Easy to use**: Just provide the data you want to display and a sentence describing the information you want to display, and `@visactor/vmind` will automatically generate the chart for you. Based on the existing chart, describe the modifications you want to make to the chart in one sentence, and `@visactor/VMind` will help you achieve the desired effect.\n- **Strong scalability**: The components of `@visactor/VMind` can be easily extended and customized, and new functions and features can be added as needed. By default, the OpenAI GPT model is used, and you can easily replace it with any LLM service.\n- **Easy narrative**: Based on the powerful chart narrative ability of `@visactor/vchart`, `@visactor/VMind` supports the generation of various types of charts, including line charts, bar charts, pie charts, etc., and can also generate dynamic bar charts and other dynamic charts, making it easy for you to narrate data. More chart types are being added. You can also use the dialog-based editing function to easily modify chart styles and animation effects, making it easy for you to create narratives.\n- **One-click export**: `@visactor/VMind` comes with a chart export module, and you can export the created chart narrative as a video or GIF for display.\n\n## Development Guide\n\n### Docs Page\n\nEnter the VMind repository and execute:\n\n```bash\n# Install dependencies\n$ rush update\n# Start the demo page\n$ rush docs\n```\n\n\n### Start the Development Page\n\nEnter the VMind repository and execute:\n\n```bash\n# Install dependencies\n$ rush update\n# Start the VMind development page\n$ rush vmind\n```\n\nYou can start the vmind development page.\nYou need to set your LLM service URL and API key to use it normally. You can modify the headers when calling the LLM in packages/vmind/\\_\\_tests\\_\\_/browser/src/pages/DataInput.tsx.\nYou can create a new .env.local file in the packages/vmind folder and write in it:\n\n```bash\nVITE_SKYLARK_URL=\"Your service url of skylark model\"\nVITE_GPT_URL=\"Your service url of gpt model\"\nVITE_SKYLARK_KEY=\"Your api-key of skylark model\"\nVITE_GPT_KEY=\"Your api-key of gpt model\"\nVITE_PROXY_CONFIG=\"Your Vite proxy config for forwarding requests. Must be in JSON string format and is optional. Example: {\"proxy\": {\"/v1\": {\"target\": \"https://api.openai.com/\",\"changeOrigin\": true},\"/openapi\": {\"target\": \"https://api.openai.com/\",\"changeOrigin\": true}}}\"\n```\n\nThese configurations will be automatically loaded when starting the development environment.\n\n### Project Structure\n\n- \\_\\_tests\\_\\_: Playground for development\n- src/common: Common data processing, chart recommendation methods, chart generation pipelines\n- src/gpt: Code related to gpt intelligent chart generation\n- src/skylark: Code related to skylark intelligent chart generation\n- src/chart-to-video: Code related to exporting videos, GIFs\n\n## Instructions for use\n\n### 📦 Installation\n\n```bash\n# npm\n$ npm install @visactor/vmind\n\n# yarn\n$ yarn add @visactor/vmind\n```\n\n### 📊 Usage Example\n\n#### Intelligent Chart Generation\n\nFirst, we need to install VMind in the project:\n\n```bash\n# Install with npm\n\nnpm install @visactor/vmind\n\n# Install with yarn\n\nyarn add @visactor/vmind\n```\n\nNext, import VMind at the top of the JavaScript file\n\n```typescript\nimport VMind from '@visactor/vmind';\n```\n\nVMind currently supports OpenAI GPT-3.5, GPT-4 models and skylark-pro series models. Users can specify the model type to be called when initializing the VMind object, and pass in the URL of the LLM service. Next, we initialize a VMind instance and pass in the model type and model url:\n\n```typescript\nimport { Model } from '@visactor/vmind';\n\nconst vmind = new VMind({\n  url: LLM_SERVICE_URL, //URL of the LLM service\n  model: Model.SKYLARK, //Currently supports gpt-3.5, gpt-4, skylark pro models. The specified model will be called in subsequent chart generation\n  headers: {\n    'api-key': LLM_API_KEY\n  } //headers will be used directly as the request header in the LLM request. You can put the model api key in the header\n});\n```\n\nHere is a list of supported models:\n\n```typescript\n//models that VMind support\n//more models are under development\nexport enum Model {\n  GPT3_5 = 'gpt-3.5-turbo',\n  GPT4 = 'gpt-4',\n  SKYLARK = 'skylark-pro',\n  SKYLARK2 = 'skylark2-pro-4k'\n}\n```\n\nVMind supports datasets in both CSV and JSON formats.\n\nTo use CSV data in subsequent processes, you need to call the data processing method to extract field information and convert it into a structured dataset. VMind provides a rule-based method `parseCSVData` to obtain field information:\n\n```typescript\n// Pass in the CSV string to obtain the fieldInfo and the JSON-structured dataset\nconst { fieldInfo, dataset } = vmind.parseCSVData(csv);\n```\n\nWe can also call the `getFieldInfo` method to obtain the fieldInfo by passing in a JSON-formatted dataset:\n\n```typescript\n// Pass in a JSON-formatted dataset to obtain the fieldInfo\nconst dataset=[\n{\n\"Product name\": \"Coke\",\n\"region\": \"south\",\n\"Sales\": 2350\n},\n{\n\"Product name\": \"Coke\",\n\"region\": \"east\",\n\"Sales\": 1027\n},\n{\n\"Product name\": \"Coke\",\n\"region\": \"west\",\n\"Sales\": 1027\n},\n{\n\"Product name\": \"Coke\",\n\"region\": \"north\",\n\"Sales\": 1027\n}\n]\nconst fieldInfo = vmind.getFieldInfo(dataset);\n```\n\nWe want to show \"the changes in sales rankings of various car brands\". Call the generateChart method and pass the data and display content description directly to VMind:\n\n```typescript\nconst userPrompt = 'show me the changes in sales rankings of various car brand';\n//Call the chart generation interface to get spec and chart animation duration\nconst { spec, time } = await vmind.generateChart(userPrompt, fieldInfo, dataset);\n```\n\nIn this way, we get the VChart spec of the corresponding dynamic chart. We can render the chart based on this spec:\n\n```typescript\nimport VChart from '@visactor/vchart';\n\n\u003cbody\u003e\n\u003c!-- Prepare a DOM with size (width and height) for vchart, of course you can also specify it in the spec configuration --\u003e\n\u003cdiv id=\"chart\" style=\"width: 600px;height:400px;\"\u003e\u003c/div\u003e\n\u003c/body\u003e\n\n// Create a vchart instance\nconst vchart = new VChart(spec, { dom: 'chart' });\n// Draw\nvchart.renderAsync();\n```\n\nThanks to the capabilities of the large language model, users can describe more requirements in natural language and \"customize\" dishes.\nUsers can specify different theme styles (currently only gpt chart generation supports this feature). For example, users can specify to generate a tech-style chart:\n\n```typescript\n//userPrompt can be in both Chinese and English\n//Specify to generate a tech-style chart\nconst userPrompt = 'show me the changes in sales rankings of various car brand,tech style';\nconst { spec, time } = await vmind.generateChart(userPrompt, fieldInfo, dataset);\n```\n\nYou can also specify the chart type, field mapping, etc. supported by VMind. For example:\n\n```typescript\n//Specify to generate a line chart, with car manufacturers as the x-axis\nconst userPrompt =\n  'show me the changes in sales rankings of various car brands,tech style.Using a line chart, Manufacturer makes the x-axis';\nconst { spec, time } = await vmind.generateChart(userPrompt, fieldInfo, dataset);\n```\n\n#### Customizing LLM Request Method\n\nPass parameters when initializing the VMind object:\n\n```typescript\nimport VMind from '@visactor/vmind';\nconst vmind = new VMind(openAIKey:string, params:{\nurl?: string;//URL of the LLM service\n/** gpt request header, which has higher priority */\nheaders?: Record\u003cstring, string\u003e ;//request headers\nmethod?: string;//request method POST GET\nmodel?: string;//model name\nmax_tokens?: number;\ntemperature?: number;//recommended to set to 0\n})\n```\n\nSpecify your LLM service url in url (default is https://api.openai.com/v1/chat/completions)\nIn subsequent calls, VMind will use the parameters in params to request the LLM service url.\n\n\n\n#### Data Aggregation\n📢 Note: The data aggregation function only supports GPT series models, more models will come soon.\n\nWhen using the chart library to draw bar charts, line charts, etc., if the data is not aggregated, it will affect the visualization effect. At the same time, because no filtering and sorting of fields has been done, some visualization intentions cannot be met, for example: show me the top 10 departments with the most cost, show me the sales of various products in the north, etc.\n\nVMind supports intelligent data aggregation since version 1.2.2. This function uses the data input by the user as a data table, uses a LLM to generate SQL queries according to the user's command, queries data from the data table, and uses GROUP BY and SQL aggregation methods to group, aggregate, sort, and filter data. Supported SQL statements include: SELECT, GROUP BY, WHERE, HAVING, ORDER BY, LIMIT. Supported aggregation methods are: MAX(), MIN(), SUM(), COUNT(), AVG(). Complex SQL operations such as subqueries, JOIN, and conditional statements are not supported.\n\n\nUse the `dataQuery` function of the VMind object to aggregate data. This method has three parameters:\n- userInput: user input. You can use the same input as generateChart\n- fieldInfo: Dataset field information. The same as generateChart, it can be obtained by parseCSVData, or built by the user.\n- dataset: Dataset. The same as generateChart, it can be obtained by parseCSVData, or built by the user.\n\n\n```typescript\nconst { fieldInfo, dataset } = await vmind?.dataQuery(userInput, fieldInfo, dataset);\n```\n\n\nThe fieldInfo and dataset returned by this method are the field information and dataset after data aggregation, which can be used for chart generation.\nBy default, the `generateChart` function will perform a data aggregation using the same user input before generating the chart. You can disable data aggregation by passing in the fourth parameter:\n```typescript\nconst userInput = 'show me the changes in sales rankings of various car brand';\nconst { spec, time } = await vmind.generateChart(userInput, fieldInfo, dataset, false); //pass false as the forth parameter to disable data aggregation before generating a chart.\n```\n\n\n#### Dialog-based editing\n\nUnder development, stay tuned\n\n### Effect display\n\n#### Dynamic bar chart\n\n![Alt text](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VChart-Video-2.gif)\n\n#### Bar chart\n\n![Alt text](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VChart-Video-1.gif)\n\n#### Pie chart\n\n![Alt text](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VChart-Video-3.gif)\n\n# Contribution\n\nIf you would like to contribute, please read the [Code of Conduct ](./CODE_OF_CONDUCT.md) and [ Guide](./CONTRIBUTING.md) first。\n\nSmall streams converge to make great rivers and seas!\n\n\u003ca href=\"https://github.com/visactor/vmind/graphs/contributors\"\u003e\u003cimg src=\"https://contrib.rocks/image?repo=visactor/vmind\" /\u003e\u003c/a\u003e\n\n# License\n\n[MIT License](./LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisactor%2Fvmind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvisactor%2Fvmind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisactor%2Fvmind/lists"}