diff --git a/bindings/streamlit-gpt-vis/MANIFEST.in b/bindings/streamlit-gpt-vis/MANIFEST.in
index 1719d91..d083bf3 100644
--- a/bindings/streamlit-gpt-vis/MANIFEST.in
+++ b/bindings/streamlit-gpt-vis/MANIFEST.in
@@ -1 +1 @@
-recursive-include streamlit_gpt_vis/frontend/build *
+recursive-include streamlit_gpt_vis/frontend/dist *
diff --git a/bindings/streamlit-gpt-vis/README.md b/bindings/streamlit-gpt-vis/README.md
index 8be3fe6..327b06b 100644
--- a/bindings/streamlit-gpt-vis/README.md
+++ b/bindings/streamlit-gpt-vis/README.md
@@ -1,14 +1,16 @@
# streamlit-gpt-vis
-Components for GPTs, generative AI, and LLM projects. Not only UI Components.
+[![Latest Stable Version](https://img.shields.io/pypi/v/streamlit-gpt-vis.svg)](https://pypi.python.org/pypi/streamlit-gpt-vis) [![Pypi Download](https://img.shields.io/pypi/dm/streamlit-gpt-vis)](https://pypi.python.org/pypi/streamlit-gpt-vis)
-## Installation instructions
+Streamlit binding for [`@AntV/GPT-Vis`](https://github.com/antvis/GPT-Vis) Components for GPTs, generative AI, and LLM projects. Not only UI Components.
+
+## Installation
```sh
pip install streamlit-gpt-vis
```
-## Usage instructions
+## Usage
```python
import streamlit as st
@@ -27,3 +29,14 @@ Here’s a visualization of Haidilao's food delivery revenue from 2013 to 2022.
gpt_vis_renderer(content, config=None)
```
+
+## API
+
+### gpt_vis_renderer(content: str, config: dict = None)
+
+- content: Markdown content
+- config: GPT-Vis [ConfigProvider](https://github.com/antvis/GPT-Vis/blob/main/src/ConfigProvider/index.md) config
+
+## License
+
+[MIT](./LICENSE)
diff --git a/bindings/streamlit-gpt-vis/example/basic.py b/bindings/streamlit-gpt-vis/example/basic.py
index 8b8bc2f..b5d2642 100644
--- a/bindings/streamlit-gpt-vis/example/basic.py
+++ b/bindings/streamlit-gpt-vis/example/basic.py
@@ -16,7 +16,11 @@
```vis-chart
{ "type": "line","data": [{"time":2013,"value":59.3},{"time":2014,"value":64.4},{"time":2015,"value":68.9},{"time":2016,"value":74.4},{"time":2017,"value":82.7},{"time":2018,"value":91.9},{"time":2019,"value":99.1},{"time":2020,"value":101.6},{"time":2021,"value":114.4},{"time":2022,"value":121}] }
-```
+```
+
+```vis-chart
+{ "type":"network-graph","data":{"nodes":[{"name":"哈利·波特"},{"name":"赫敏·格兰杰"},{"name":"罗恩·韦斯莱"},{"name":"伏地魔"}],"edges":[{"source":"哈利·波特","target":"赫敏·格兰杰","name":"朋友"},{"source":"哈利·波特","target":"罗恩·韦斯莱","name":"朋友"},{"source":"哈利·波特","target":"伏地魔","name":"敌人"},{"source":"伏地魔","target":"哈利·波特","name":"试图杀死"}]} }
+```
''')
st.markdown("---")
@@ -40,6 +44,6 @@
# it is considered a new instance and will be re-mounted on the frontend
# and lose its current state. In this case, we want to vary the component's
# "content" argument without having it get recreated.
-content_input = st.text_input("Enter render content", value="# GPT-VIS \n\nComponents for GPTs, generative AI, and LLM projects. Not only UI Components.")
+content_input = st.text_input("Enter render content", value="#### GPT-VIS \n\n Components for GPTs, generative AI, and LLM projects. Not only UI Components.")
gpt_vis_renderer(content_input, config={'plot': { 'theme': { 'type': 'academy' }}})
diff --git a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/__init__.py b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/__init__.py
index 06ac0ac..37c3fcc 100644
--- a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/__init__.py
+++ b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/__init__.py
@@ -5,7 +5,7 @@
# the component, and True when we're ready to package and distribute it.
# (This is, of course, optional - there are innumerable ways to manage your
# release process.)
-_RELEASE = False
+_RELEASE = True
# Declare a Streamlit component. `declare_component` returns a function
# that is used to create instances of the component. We're naming this
@@ -27,14 +27,14 @@
# Pass `url` here to tell Streamlit that the component will be served
# by the local dev server that you run via `npm run start`.
# (This is useful while your component is in development.)
- url="http://localhost:3001",
+ url="http://localhost:5173",
)
else:
# When we're distributing a production version of the component, we'll
# replace the `url` param with `path`, and point it to the component's
# build directory:
parent_dir = os.path.dirname(os.path.abspath(__file__))
- build_dir = os.path.join(parent_dir, "frontend/build")
+ build_dir = os.path.join(parent_dir, "frontend/dist")
_component_func = components.declare_component("gpt_vis_renderer", path=build_dir)
diff --git a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/.gitignore b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/.prettierrc b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/.prettierrc
deleted file mode 100644
index 0735a42..0000000
--- a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/.prettierrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "endOfLine": "lf",
- "semi": false,
- "trailingComma": "es5"
-}
diff --git a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/README.md b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/README.md
new file mode 100644
index 0000000..1e5a46b
--- /dev/null
+++ b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/README.md
@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+ languageOptions: {
+ // other options...
+ parserOptions: {
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
+ tsconfigRootDir: import.meta.dirname,
+ },
+ },
+});
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react';
+
+export default tseslint.config({
+ // Set the react version
+ settings: { react: { version: '18.3' } },
+ plugins: {
+ // Add the react plugin
+ react,
+ },
+ rules: {
+ // other rules...
+ // Enable its recommended rules
+ ...react.configs.recommended.rules,
+ ...react.configs['jsx-runtime'].rules,
+ },
+});
+```
diff --git a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/eslint.config.js b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/eslint.config.js
new file mode 100644
index 0000000..33c02ac
--- /dev/null
+++ b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/eslint.config.js
@@ -0,0 +1,25 @@
+import js from '@eslint/js';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+ { ignores: ['dist'] },
+ {
+ extends: [js.configs.recommended, ...tseslint.configs.recommended],
+ files: ['**/*.{ts,tsx}'],
+ languageOptions: {
+ ecmaVersion: 2020,
+ globals: globals.browser,
+ },
+ plugins: {
+ 'react-hooks': reactHooks,
+ 'react-refresh': reactRefresh,
+ },
+ rules: {
+ ...reactHooks.configs.recommended.rules,
+ 'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+ },
+ },
+);
diff --git a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/index.html b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/index.html
new file mode 100644
index 0000000..f21f8ff
--- /dev/null
+++ b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/index.html
@@ -0,0 +1,16 @@
+
+
+
+ Streamlit Component
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/package.json b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/package.json
index f6301dc..cf1a300 100644
--- a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/package.json
+++ b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/package.json
@@ -1,42 +1,34 @@
{
"name": "streamlit-gpt-vis",
- "version": "0.1.0",
"private": true,
+ "version": "0.0.0",
"type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc -b && vite build",
+ "lint": "eslint .",
+ "preview": "vite preview"
+ },
"dependencies": {
"@antv/gpt-vis": "^0.1.0",
"antd": "^5.22.1",
- "react": "^16.13.1",
- "react-dom": "^16.13.1",
- "streamlit-component-lib": "^2.0.0"
- },
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
- "eject": "react-scripts eject"
- },
- "eslintConfig": {
- "extends": "react-app"
- },
- "browserslist": {
- "production": [
- ">0.2%",
- "not dead",
- "not op_mini all"
- ],
- "development": [
- "last 1 chrome version",
- "last 1 firefox version",
- "last 1 safari version"
- ]
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
+ "streamlit-component-lib": "^2.0.0",
+ "streamlit-component-lib-react-hooks": "^1.1.1"
},
- "homepage": ".",
"devDependencies": {
- "@types/node": "^12.0.0",
- "@types/react": "^18",
- "@types/react-dom": "^18",
- "react-scripts": "^5.0.1",
- "typescript": "^5.0.0"
+ "@eslint/js": "^9.13.0",
+ "@types/react": "^18.3.12",
+ "@types/react-dom": "^18.3.1",
+ "@vitejs/plugin-react": "^4.3.3",
+ "eslint": "^9.13.0",
+ "eslint-plugin-react-hooks": "^5.0.0",
+ "eslint-plugin-react-refresh": "^0.4.14",
+ "globals": "^15.11.0",
+ "typescript": "~5.6.2",
+ "typescript-eslint": "^8.11.0",
+ "vite": "^5.4.10",
+ "vite-plugin-externals": "^0.6.2"
}
}
diff --git a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/public/index.html b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/public/index.html
deleted file mode 100644
index 125902c..0000000
--- a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/public/index.html
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
- Streamlit Component
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/src/MyComponent.tsx b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/src/MyComponent.tsx
index a19cff2..91ade5c 100644
--- a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/src/MyComponent.tsx
+++ b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/src/MyComponent.tsx
@@ -1,97 +1,67 @@
import {
- Streamlit,
- StreamlitComponentBase,
- withStreamlitConnection,
-} from "streamlit-component-lib"
-import React, { ReactNode } from "react"
-import {
- ConfigProvider,
- GPTVis,
- VisText,
- withDefaultChartCode,
ChartType,
+ ConfigProvider,
DualAxes,
- Radar,
+ GPTVis,
Histogram,
+ Radar,
Treemap,
+ VisText,
+ withDefaultChartCode,
WordCloud,
-} from "@antv/gpt-vis"
+} from '@antv/gpt-vis';
+import { ConfigProvider as AntdConfigProvider, theme as AntdTheme } from 'antd';
+// import { Streamlit } from 'streamlit-component-lib';
+import { useRenderData } from 'streamlit-component-lib-react-hooks';
-interface State {
- numClicks: number
-}
+const components = {
+ 'vis-text': VisText,
+ code: withDefaultChartCode({
+ components: {
+ [ChartType.DualAxes]: DualAxes,
+ [ChartType.Radar]: Radar,
+ [ChartType.Histogram]: Histogram,
+ [ChartType.Treemap]: Treemap,
+ [ChartType.WordCloud]: WordCloud,
+ },
+ loadingTimeout: 5,
+ debug: false,
+ }),
+};
-/**
- * This is a React-based component template. The `render()` function is called
- * automatically when your component should be re-rendered.
- */
-class MyComponent extends StreamlitComponentBase {
- public state = { numClicks: 0 }
+function MyComponent() {
+ const renderData = useRenderData();
+ const { args, theme } = renderData;
+ const { config, content } = args;
- private components = {
- "vis-text": VisText,
- code: withDefaultChartCode({
- components: {
- [ChartType.DualAxes]: DualAxes,
- [ChartType.Radar]: Radar,
- [ChartType.Histogram]: Histogram,
- [ChartType.Treemap]: Treemap,
- [ChartType.WordCloud]: WordCloud,
- },
- loadingTimeout: 5,
- debug: false,
- }),
+ const style: React.CSSProperties = {};
+
+ if (theme) {
+ // Use the theme object to style our button border. Alternatively, the
+ // theme style is defined in CSS vars.
+ // style.font = theme.font;
}
- public render = (): ReactNode => {
- // Arguments that are passed to the plugin in Python are accessible
- // via `this.props.args`. Here, we access the "content" arg.
- const content = this.props.args["content"]
- const config = this.props.args["config"]
+ const plotTheme = { type: theme?.base === 'dark' ? 'dark' : 'light' };
+ const antdTheme = {
+ algorithm: theme?.base === 'dark' ? AntdTheme.darkAlgorithm : AntdTheme.defaultAlgorithm,
+ };
- // Streamlit sends us a theme object via props that we can use to ensure
- // that our component has visuals that match the active theme in a
- // streamlit app.
- const { theme } = this.props
- const style: React.CSSProperties = {}
+ const plotConfig = { theme: plotTheme };
- // Maintain compatibility with older versions of Streamlit that don't send
- // a theme object.
- if (theme) {
- // Use the theme object to style our button border. Alternatively, the
- // theme style is defined in CSS vars.
- style.color = theme.textColor
- style.font = theme.font
- style.backgroundColor = theme.backgroundColor
- }
+ // const onClicked = useCallback(() => {
+ // Streamlit.setComponentValue({});
+ // }, []);
- // Show a button and some text.
- // When the button is clicked, we'll increment our "numClicks" state
- // variable, and send its new value back to Streamlit, where it'll
- // be available to the Python program.
- return (
-
-
- {content}
+ return (
+
- )
- }
-
- /** Click handler for our "Click Me!" button. */
- private onClicked = (): void => {
- // Increment state.numClicks, and pass the new value back to
- // Streamlit via `Streamlit.setComponentValue`.
- this.setState(
- (prevState) => ({ numClicks: prevState.numClicks + 1 })
- // () => Streamlit.setComponentValue(this.state.numClicks)
- )
- }
+
+
+ );
}
-// "withStreamlitConnection" is a wrapper function. It bootstraps the
-// connection between your component and the Streamlit app, and handles
-// passing arguments from Python -> Component.
-//
-// You don't need to edit withStreamlitConnection (but you're welcome to!).
-export default withStreamlitConnection(MyComponent)
+export default MyComponent;
diff --git a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/src/Render.tsx b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/src/Render.tsx
deleted file mode 100644
index f219708..0000000
--- a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/src/Render.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from "react"
-import {
- Streamlit,
- withStreamlitConnection,
- ComponentProps,
- Theme,
-} from "streamlit-component-lib"
-import {
- ConfigProvider,
- GPTVis,
- VisText,
- withDefaultChartCode,
- ChartType,
- DualAxes,
- Radar,
- Histogram,
- Treemap,
- WordCloud,
-} from "@antv/gpt-vis"
-
-const components = {
- "vis-text": VisText,
- code: withDefaultChartCode({
- components: {
- [ChartType.DualAxes]: DualAxes,
- [ChartType.Radar]: Radar,
- [ChartType.Histogram]: Histogram,
- [ChartType.Treemap]: Treemap,
- [ChartType.WordCloud]: WordCloud,
- },
- loadingTimeout: 5,
- debug: false,
- }),
-}
-
-const GPTVisRender: React.FC = (props) => {
- const { theme, args } = props
- const { config, content } = args
-
- const style: React.CSSProperties = {}
-
- if (theme) {
- // Use the theme object to style our button border. Alternatively, the
- // theme style is defined in CSS vars.
- style.color = theme.textColor
- style.font = theme.font
- style.backgroundColor = theme.backgroundColor
- }
-
- return (
-
-
- {content}
-
-
- )
-}
-
-export const GPTVisRenderWrapper = withStreamlitConnection(GPTVisRender)
diff --git a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/src/index.css b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/src/index.css
new file mode 100644
index 0000000..e69de29
diff --git a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/src/index.tsx b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/src/index.tsx
deleted file mode 100644
index ca4f783..0000000
--- a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/src/index.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from "react"
-import ReactDOM from "react-dom"
-// import MyComponent from "./MyComponent"
-import { GPTVisRenderWrapper } from "./Render"
-
-ReactDOM.render(
-
-
- ,
- document.getElementById("root")
-)
diff --git a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/src/main.tsx b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/src/main.tsx
new file mode 100644
index 0000000..78d2c08
--- /dev/null
+++ b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/src/main.tsx
@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { StreamlitProvider } from 'streamlit-component-lib-react-hooks';
+import './index.css';
+import MyComponent from './MyComponent';
+
+createRoot(document.getElementById('root')!).render(
+
+
+
+
+ ,
+);
diff --git a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/src/react-app-env.d.ts b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/src/react-app-env.d.ts
deleted file mode 100644
index 6431bc5..0000000
--- a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/src/react-app-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-///
diff --git a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/src/vite-env.d.ts b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/tsconfig.app.json b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/tsconfig.app.json
new file mode 100644
index 0000000..f867de0
--- /dev/null
+++ b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/tsconfig.app.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "Bundler",
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["src"]
+}
diff --git a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/tsconfig.json b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/tsconfig.json
index af10394..d32ff68 100644
--- a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/tsconfig.json
+++ b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/tsconfig.json
@@ -1,19 +1,4 @@
{
- "compilerOptions": {
- "target": "es5",
- "lib": ["dom", "dom.iterable", "esnext"],
- "allowJs": true,
- "skipLibCheck": true,
- "esModuleInterop": true,
- "allowSyntheticDefaultImports": true,
- "strict": true,
- "forceConsistentCasingInFileNames": true,
- "module": "esnext",
- "moduleResolution": "node",
- "resolveJsonModule": true,
- "isolatedModules": true,
- "noEmit": true,
- "jsx": "react"
- },
- "include": ["src"]
+ "files": [],
+ "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
}
diff --git a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/tsconfig.node.json b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/tsconfig.node.json
new file mode 100644
index 0000000..abcd7f0
--- /dev/null
+++ b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "ES2022",
+ "lib": ["ES2023"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "Bundler",
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/vite.config.ts b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/vite.config.ts
new file mode 100644
index 0000000..8697776
--- /dev/null
+++ b/bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/vite.config.ts
@@ -0,0 +1,15 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import { viteExternalsPlugin } from 'vite-plugin-externals';
+
+// https://vite.dev/config/
+export default defineConfig({
+ base: './',
+ plugins: [
+ react(),
+ viteExternalsPlugin({
+ 'mapbox-gl': 'mapboxgl',
+ 'maplibre-gl': 'maplibregl',
+ }),
+ ],
+});