1- <div align =" center " >
2- <a href =" https://github.com/VisActor#gh-light-mode-only " target =" _blank " >
3- <img alt="VisActor Logo" width="200" src="https://github.com/VisActor/.github/blob/main/profile/logo_500_200_light.svg"/>
4- </a >
5- <a href =" https://github.com/VisActor#gh-dark-mode-only " target =" _blank " >
6- <img alt="VisActor Logo" width="200" src="https://github.com/VisActor/.github/blob/main/profile/logo_500_200_dark.svg"/>
7- </a >
8- </div >
1+ # @visactor/vmind
92
103<div align =" center " >
11- <h1 >VMind</h1 >
4+
5+ [ English] ( README.md ) | [ 简体中文] ( readme-zh.md ) | 日本語
6+
127</div >
138
149<div align =" center " >
1510
16- 自動だけでなく 、素晴らしい。インテリジェントなビジュアライゼーションのためのオープンソースソリューション 。
11+ 自動化だけでなく 、素晴らしい。オープンソースのインテリジェントな可視化ソリューション 。
1712
1813<p align =" center " >
1914 <a href =" https://www.visactor.io/vmind " >紹介</a > •
3328
3429</div >
3530
36- <div align =" center " >
37-
38- 英語 | [ 簡体字中国語] ( readme-zh.md )
39-
40- </div >
41-
4231## 紹介
4332
44- ` @visactor/vmind ` は、 [ VisActor] ( https://www.visactor.io/ ) が提供するLLMに基づいたインテリジェントなチャートコンポーネントであり、対話式のチャート生成および編集機能を含んでいます。自然言語のインタラクションインターフェースを提供し、たった一文で ` @visactor/VMind ` を使ってチャートナラティブ作品を簡単に作成し、継続的な対話を通じて編集することができ、データビジュアライゼーション作品を作成する効率を大幅に向上させます 。
33+ ` @visactor/vmind ` は [ VisActor] ( https://www.visactor.io/ ) によって提供される、LLM に基づくインテリジェントなチャートコンポーネントで、対話型のチャート生成と編集機能を含んでいます。自然言語インターフェースを提供し、1文で ` @visactor/vmind ` を使用してチャートナラティブ作品を簡単に作成し、連続した対話を通じて編集することで、データ可視化作品の作成効率を大幅に向上させます 。
4534
46- ` @visactor/vmind ` の主な特徴は以下の通りです：
35+ ` @visactor/vmind ` の主な特徴は以下の通りです：
4736
48- - ** 使いやすさ ** ：表示したいデータと表示したい情報を説明する一文を提供するだけで 、` @visactor/vmind ` が自動的にチャートを生成します。既存のチャートに基づいて、チャートに加えたい変更を一文で説明すると 、` @visactor/VMind ` が望む効果を実現するのに役立ちます 。
49- - ** 強力な拡張性** ：` @visactor/VMind ` のコンポーネントは簡単に拡張およびカスタマイズでき、必要に応じて新しい機能や特徴を追加できます。デフォルトではOpenAI GPTモデルを使用しており、任意のLLMサービスに簡単に置き換えることができます 。
50- - ** 簡単なナラティブ** ：` @visactor/vchart ` の強力なチャートナラティブ能力に基づいて 、` @visactor/VMind ` はさまざまなタイプのチャートの生成をサポートしており、折れ線グラフ、 棒グラフ、円グラフなどを含み、動的な棒グラフなどの動的なチャートも生成できます 。これにより、データを簡単にナラティブ化できます。さらに多くのチャートタイプが追加されています。また、対話式の編集機能を使用して、チャートスタイルやアニメーション効果を簡単に変更できるため、ナラティブを簡単に作成できます 。
51- - ** ワンクリックでエクスポート ** ：` @visactor/VMind ` にはチャートエクスポートモジュールが付属しており、作成したチャートナラティブをビデオやGIFとしてエクスポートして表示できます 。
37+ - ** 使いやすい ** ：表示したいデータと表示したい情報を説明する1文を提供するだけで 、` @visactor/vmind ` が自動的にチャートを生成します。既存のチャートに基づいて、チャートに加えたい変更を1文で説明すると 、` @visactor/vmind ` が望む効果を実現します 。
38+ - ** 強力な拡張性** ：` @visactor/vmind ` のコンポーネントは簡単に拡張およびカスタマイズでき、必要に応じて新しい機能や特徴を追加できます。デフォルトでは OpenAI GPT モデルを使用し、任意の LLM サービスに簡単に置き換えることができます 。
39+ - ** 簡単なナラティブ** ：` @visactor/vchart ` の強力なチャートナラティブ能力に基づき 、` @visactor/vmind ` は折れ線グラフ、 棒グラフ、円グラフなど、さまざまなタイプのチャートの生成をサポートし、動的な棒グラフやその他の動的なチャートも生成できます 。これにより、データを簡単にナレーションできます。さらに、対話型の編集機能を使用して、チャートのスタイルやアニメーション効果を簡単に変更し、ナラティブを作成できます 。
40+ - ** ワンクリックエクスポート ** ：` @visactor/vmind ` にはチャートエクスポートモジュールが付属しており、作成したチャートナラティブをビデオや GIF としてエクスポートして表示できます 。
5241
5342## 開発ガイド
5443
5544### ドキュメントページ
5645
57- VMindリポジトリに入り 、以下を実行します：
46+ VMind リポジトリに入り 、以下を実行します：
5847
5948``` bash
60- # 依存関係のインストール
49+ # 依存関係をインストール
6150$ rush update
62- # デモページの開始
51+ # デモページを開始
6352$ rush docs
6453```
6554
66- ### 開発ページの開始
55+ ### 開発ページを開始
6756
68- VMindリポジトリに入り 、以下を実行します：
57+ VMind リポジトリに入り 、以下を実行します：
6958
7059``` bash
71- # 依存関係のインストール
60+ # 依存関係をインストール
7261$ rush update
73- # VMind開発ページの開始
62+ # VMind 開発ページを開始
7463$ rush vmind
7564```
7665
77- これで、vmind開発ページを開始できます 。
78- 正常に使用するには、LLMサービスのURLとAPIキーを設定する必要があります 。packages/vmind/\_\_ tests\_\_ /browser/src/pages/DataInput.tsxでLLMを呼び出す際のヘッダーを変更できます 。
79- packages/vmindフォルダに新しい .env.localファイルを作成し、その中に以下を書き込むことができます ：
66+ これで vmind 開発ページを開始できます 。
67+ 正常に使用するには、LLM サービスの URL と API キーを設定する必要があります 。packages/vmind/\_\_ tests\_\_ /browser/src/pages/DataInput.tsx で LLM を呼び出すときのヘッダーを変更できます 。
68+ packages/vmind フォルダーに新しい .env.local ファイルを作成し、次の内容を書き込みます ：
8069
8170``` bash
82- VITE_SKYLARK_URL=" Your service url of skylark model"
8371VITE_GPT_URL=" Your service url of gpt model"
84- VITE_SKYLARK_KEY=" Your api-key of skylark model"
8572VITE_GPT_KEY=" Your api-key of gpt model"
73+ VITE_DEEPSEEK_URL=" https://api.deepseek.com/chat/completions"
74+ VITE_DEEPSEEK_KEY=" Your api-key of deepseek model"
75+ VITE_CUSTOM_URL=" Your service url of custom model"
76+ VITE_CUSTOM_KEY=" Your api-key of custom model"
77+ VITE_CUSTOM_MODEL=" Your Custom Model Name"
8678VITE_PROXY_CONFIG=" Your Vite proxy config for forwarding requests. Must be in JSON string format and is optional. Example: {" " : {" " : {" " : " " ," " : true}," " : {" " : " " ," " : true}}}"
8779```
8880
89- これらの設定は、開発環境を開始する際に自動的に読み込まれます。
90-
91- ### プロジェクト構造
92-
93- - \_\_ tests\_\_ : 開発用のプレイグラウンド
94- - src/common: 共通のデータ処理、チャート推奨方法、チャート生成パイプライン
95- - src/gpt: gptに関連するインテリジェントチャート生成コード
96- - src/skylark: skylarkに関連するインテリジェントチャート生成コード
97- - src/chart-to-video: ビデオ、GIFのエクスポートに関連するコード
81+ 開発環境を開始するときにこれらの設定が自動的に読み込まれます。
9882
9983## 使用方法
10084
@@ -130,39 +114,56 @@ yarn add @visactor/vmind
130114import VMind from ' @visactor/vmind'
131115```
132116
133- VMindは現在、OpenAI GPT-3.5 、GPT-4モデルおよびskylark-proシリーズモデルをサポートしています。ユーザーは、VMindオブジェクトを初期化する際に呼び出すモデルタイプを指定し、LLMサービスのURLを渡すことができます。 次に、モデルタイプとモデルurlを渡してVMindインスタンスを初期化します ：
117+ VMind は現在 、GPT、deepseek、doubao などの API キーを持つ任意のモデルをサポートしています。VMind オブジェクトを初期化するときに呼び出すモデルタイプを指定し、LLM サービスの URL を渡すことができます。 次に、VMind インスタンスを初期化し、モデルタイプとモデル URL を渡します ：
134118
135119``` typescript
136120import { Model } from ' @visactor/vmind'
137121
138122const = new VMind ({
139- url: LLM_SERVICE_URL , // LLMサービスのURL
140- model: Model .SKYLARK , // 現在、gpt-3.5、gpt-4、skylark proモデルをサポートしています。後続のチャート生成で指定されたモデルが呼び出されます
123+ url: LLM_SERVICE_URL , // LLM サービスの URL
124+ model: Model .GPT4o , // 使用するモデル
141125 headers: {
142126 ' api-key' LLM_API_KEY
143- } // headersはLLMリクエストのリクエストヘッダーとして直接使用されます。モデルのapiキーをヘッダーに入れることができます
127+ } // ヘッダーは LLM リクエストのリクエストヘッダーとして直接使用されます。モデルの API キーをヘッダーに入れることができます
144128});
145129```
146130
147- サポートされているモデルのリストはこちらです ：
131+ サポートされているモデルのリストは次のとおりです ：
148132
149133``` typescript
150- // VMindがサポートするモデル
151- // より多くのモデルが開発中です
134+ // VMind がサポートするモデル
152135export enum Model {
153136 GPT3_5 = ' gpt-3.5-turbo'
137+ GPT3_5_1106 = ' gpt-3.5-turbo-1106'
154138 GPT4 = ' gpt-4'
155- SKYLARK = ' skylark-pro'
156- SKYLARK2 = ' skylark2-pro-4k'
139+ GPT_4_0613 = ' gpt-4-0613'
140+ GPT_4o = ' gpt-4o-2024-08-06'
141+ DOUBAO_LITE = ' doubao-lite-32K'
142+ DOUBAO_PRO = ' doubao-pro-128k'
143+ CHART_ADVISOR = ' chart-advisor'
144+ DEEPSEEK_V3 = ' deepseek-chat'
145+ DEEPSEEK_R1 = ' deepseek-reasoner'
157146}
158147```
148+ また、他のモデルを使用することもできます：
149+ ``` typescript
150+ import { Model } from ' @visactor/vmind'
151+
152+ const = new VMind ({
153+ url: LLM_SERVICE_URL ,
154+ model: LLM_MODEL_NAME , // 選択したモデル
155+ headers: {
156+ ' api-key' LLM_API_KEY
157+ }
158+ });
159+ ```
159160
160- VMindはCSV形式とJSON形式のデータセットをサポートしています 。
161+ VMind は CSV および JSON 形式のデータセットをサポートしています 。
161162
162- 後続のプロセスでCSVデータを使用するには 、データ処理メソッドを呼び出してフィールド情報を抽出し、構造化されたデータセットに変換する必要があります。VMindは、フィールド情報を取得するためのルールベースのメソッド ` parseCSVData ` を提供しています ：
163+ CSV データを後続のプロセスで使用するには 、データ処理メソッドを呼び出してフィールド情報を抽出し、構造化されたデータセットに変換する必要があります。VMind はルールベースのメソッド ` parseCSVData ` を提供してフィールド情報を取得します ：
163164
164165``` typescript
165- // CSV文字列を渡して、fieldInfoとJSON構造のデータセットを取得します
166+ // CSV 文字列を渡して、フィールド情報と JSON 構造のデータセットを取得
166167const = vmind .parseCSVData (csv );
167168```
168169
@@ -238,28 +239,7 @@ const userPrompt =
238239const = await vmind .generateChart (userPrompt , fieldInfo , dataset );
239240```
240241
241- #### 大模型リクエスト方法のカスタマイズ
242-
243- VMindオブジェクトを初期化する際にパラメータを渡します：
244-
245- ``` typescript
246- import VMind from ' @visactor/vmind'
247- const = new VMind (openAIKey :string , params :{
248- url?: string ;// 大模型サービスのURL
249- /** gptリクエストヘッダー、優先度が高い */
250- headers ?: Record < string , string> ;// リクエストヘッダー
251- method?: string ;// リクエストメソッド POST GET
252- model ?: string ;// モデル名
253- max_tokens ?: number ;
254- temperature ?: number ;// 0に設定することを推奨
255- })
256- ```
257-
258- urlで大模型サービスのurlを指定します（デフォルトはhttps://api.openai.com/v1/chat/completions）
259- 後続の呼び出しで、VMindはparamsのパラメータを使用して大模型サービスのurlにリクエストします。
260-
261242#### データ集約
262- 📢 注意：データ集約機能はGPTシリーズモデルのみをサポートしています。より多くのモデルが近日中に提供される予定です。
263243
264244グラフライブラリを使用して棒グラフ、折れ線グラフなどを描画する際、データが集約されていない場合、視覚化効果に影響を与えます。同時に、フィールドのフィルタリングやソートが行われていないため、一部の視覚化意図を満たすことができません。例えば：最もコストがかかるトップ10の部門を表示してください、北のさまざまな製品の販売を表示してくださいなど。
265245
@@ -281,7 +261,13 @@ const userInput = 'show me the changes in sales rankings of various car brand';
281261const = await vmind .generateChart (userInput , fieldInfo , dataset , false ); // 第4パラメータとしてfalseを渡すことで、チャートを生成する前にデータ集約を無効にします。
282262```
283263
284- #### 対話式編集
264+ #### データインサイト
265+ [ チュートリアル] ( https://visactor.io/vmind/guide/Basic_Tutorial/Chart_Insight )
266+
267+ #### データ抽出：テキストからチャートへ
268+ [ チュートリアル] ( https://visactor.io/vmind/guide/Basic_Tutorial/Data_Extraction )
269+
270+ #### 対話型編集
285271
286272開発中、乞うご期待
287273
0 commit comments