observedobserver / viz-gpt Goto Github PK

View Code? Open in Web Editor NEW

549.0 8.0 60.0 204 KB

Make contextual data visualization with Chat Interface from tabular datasets

Home Page: https://vizgpt.ai

License: Other

JavaScript 1.08% TypeScript 97.54% HTML 0.67% CSS 0.71%

chart chatgpt gpt vega-lite visualization chart-gpt visualization-gpt chartgpt chat2vis text2vis

viz-gpt's Introduction

VizGPT: Make contextual data visualization with Chat Interface

viz-gpt.mp4

Use GPT to generate visualization from datasets with natural language. You can edit the visualization in the context step by step to make it more precise without retyping the complex query. VizGPT turns your text queries and chat into data visualization or charts.

You can try it at Playground or vizGPT on Kanaries kanaries-vizgpt

Why VizGPT

There exist lots of great visualization products in the world, such as Tableau, pygwalker. The traditional drag-and-drop visualization tool is hard to use for people unfamiliar with configs and viz/data transformations. For example, making a tableau heatmap requires bin transformations to both axes and then dragging the measure to color. It is hard for people unfamiliar with data visualization to make a heatmap.

Some text2viz tools accept natural language to generate the visualization. However, they are not flexible enough to allow users to edit the visualization. For example, if the user wants to change the color of the heatmap, they have to retype the whole sentence.

With VizGPT, you can build visualizations step by step with a chat interface. You can edit/adjust visualizations in the context. It allows you to explore the data first without figuring out how to build complex visualization initially, especially when unfamiliar with the data.

Besides, VizGPT focus on text based visual exploration. It allows users to discover new insights from visualization and ask new questions based on the insights they just find.

Features & Roadmap

Natural language to data visualization vega-lite
Use chat context to edit your visualization. Allow users to change the chart if it is not what they expected
Explore the data step by step by chatting with visualizations.
Upload your own dataset (CSV) to make visulizations.
Save the visualizations and chat history.
Allow user to use visualization editor (like graphic-walker or vega-editor) to edit the visualization and show the edit to GPT to make better visualization as the user prefers.

vizGPT is now good at drawing data visualizations, not data transformations/preparation/computation. You can use other tools like Kanaries/RATH to prepare the data first and then use vizGPT to draw the visualization.

vizGPT + RAG

I also build a RAG version of vizGPT, which can be accessed at vizgpt.ai, it contains RAG special for vega/vega-lite and SQL.

Chat to Viz Example

Add custom CSV file

Click `upload CSV button to add your own data. You can view or edit your data's metas at data view. The metas are inferred automatically by default. You can edit it anytime you want to make the visualization more precise.

Local Development

step 1

Create a .env file at the root of the project with the following contents:

BASE_URL=<Azure OpenAI BaseURL>
DEPLOYMENT_NAME=<Deployment Name>
AZURE_OPENAI_KEY=<Your key>

step 2

Install dependencies:

yarn install

step 3

Then run vercel dev or npm run dev to start the server at port 3000.

viz-gpt's People

Contributors

Stargazers

Watchers

Forkers

bojue luislancos nangualin fengsanyunyan jojocys haorand tjxj loutussun haipihuang k6sdevduke herongxhr richardo2016-forks apollohuang1 jimmeryzou omygpt bozliu tjxj666 ahmed-ali louis-sanna-eki feijihaizaifei paopao9999 moseskamau338 nexxyb rossman22590 rrrrrs1 hrvojesimic anthonyxie aristo-ai neyio-cyber jerjel 17dev noidontfa chongzhang-vis lguzzon-scratchbook hellocrunch yezhwi chinnaiyanvignesh ttispeach codemaker2015 alanisagoodboy cntank01 chatchatbio ankan54 anatomy1954 tuff-madman joemar25 sark-07 jplopes-consultoria arunkumar-patange ximeicuc-git bodhihu supersonictan mokhlesurrahman peopleworks johntan38 stenggit scxliu luckyxu rapersonal

viz-gpt's Issues

Get early access to a formal cloud version

I am building a much powerful version of vizGPT, with more features to support real-world data analytics. If you are interested to get early access, you can now become a early adopter by sponsoring this project.

Which you will get:

50% recurring discount for Pro plans of cloud version of vizGPT as long as you are using the product.
Early access to the cloud version of vizGPT and all insider features.

Click here to become an early adopter

feature request: error hint when there is no chart be rendered

For some query that cannot be rendered as a chart, such like 'tell me a joke', it should hint the user.

data processing awareness / privacy policy

@ https://www.vizgpt.ai/
I believe data is sent to Azure/OpenAI for processing, but there is no awareness about this for the users

Integration in third party application

Hi, thanks for sharing this wonderful tool. i'm planning to integrate it in my own web application based on Python: is there something (like api) that i can do to integrate viz-gpt in my app?

Cannot find module /app/vercel when trying to dockerize this project

I want to run this great project in a docker container.
The following is my dockerfile

FROM node:20.2
COPY viz-gpt /app
WORKDIR /app
ENV PATH /root/.yarn/bin:$PATH
RUN curl -o- -L https://yarnpkg.com/install.sh | bash && \
    yarn install

# Start the service
CMD ["vercel", "dev"]

And I got the following error when I start this docker image.

2023-05-26 15:53:03 node:internal/modules/cjs/loader:1073
2023-05-26 15:53:03   throw err;
2023-05-26 15:53:03   ^
2023-05-26 15:53:03 
2023-05-26 15:53:03 Error: Cannot find module '/app/vercel'
2023-05-26 15:53:03     at Module._resolveFilename (node:internal/modules/cjs/loader:1070:15)
2023-05-26 15:53:03     at Module._load (node:internal/modules/cjs/loader:923:27)
2023-05-26 15:53:03     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)
2023-05-26 15:53:03     at node:internal/main/run_main_module:23:47 {
2023-05-26 15:53:03   code: 'MODULE_NOT_FOUND',
2023-05-26 15:53:03   requireStack: []
2023-05-26 15:53:03 }
2023-05-26 15:53:03 
2023-05-26 15:53:03 Node.js v20.2.0

My first try is using npm run dev instead of vercel dev. But I got Unexpected end of JSON input like this link

So I head back to vercel dev.

ChatGPT let me add yarn add vercel after yarn install. But it doesn't work.

feat: support other LLMs

Using VizGPT sends data to Microsoft/OpenAI & uses proprietary GPT model.
The possibility to use other LLMs instead would be nice. Free/open source and local & fine-tuned models could open up other usecases and be a huge improvement.

RAG for vega-lite visualization

For the online production version of vizgpt at vizgpt, there are some extra works of RAG for vega-lite and SQL.

These part of code is not open sourced yet due to some coupling of supabase architecture. If you are a researcher interested in this domain, welcome to contact me for more details.

feature request: allow the user to clear the chat instead of refresh the whole page.

When I want to change to another topic or change a dataset, it should clear the context.

Should we add support for configuring proxy access?

You can use HttpsProxyAgent to access the proxy in vizchat.ts. PROXY_URL can be configured in the .env file as shown below:

PROXY_URL=

import {HttpsProxyAgent} from "https-proxy-agent";
const proxy_url = process.env.PROXY_URL;
const agent= new HttpsProxyAgent(proxy_url)
...
const response = await fetch(url, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${process.env.OPENAI_KEY}`,
        },
        agent,
        body: JSON.stringify({
            model: "gpt-3.5-turbo",
            messages: messages,
            temperature: TEMPERATURE,
            n: 1,
        }),
    });