feat: streamlit with gpt-vis

bindings/streamlit-gpt-vis/.gitignore

@@ -0,0 +1,69 @@
+########################################################################
+# Python - https://github.com/github/gitignore/blob/master/Python.gitignore
+########################################################################
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# Distribution / packaging
+build/
+dist/
+eggs/
+.eggs/
+*.egg-info/
+*.egg
+
+# Unit test / coverage reports
+.coverage
+.coverage\.*
+.pytest_cache/
+.mypy_cache/
+test-reports
+
+# Test fixtures
+cffi_bin
+
+# Pyenv Stuff
+.python-version
+
+########################################################################
+# OSX - https://github.com/github/gitignore/blob/master/Global/macOS.gitignore
+########################################################################
+.DS_Store
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+########################################################################
+# node - https://github.com/github/gitignore/blob/master/Node.gitignore
+########################################################################
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Dependency directories
+node_modules/
+
+# Coverage directory used by tools like istanbul
+coverage/
+
+# Lockfiles
+yarn.lock
+package-lock.json
+
+########################################################################
+# JetBrains
+########################################################################
+.idea
+
+########################################################################
+# VSCode
+########################################################################
+.vscode/
+venv/

bindings/streamlit-gpt-vis/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 AntV
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

bindings/streamlit-gpt-vis/MANIFEST.in

@@ -0,0 +1 @@
+recursive-include streamlit_gpt_vis/frontend/build *

bindings/streamlit-gpt-vis/README.md

@@ -0,0 +1,29 @@
+# streamlit-gpt-vis
+
+Components for GPTs, generative AI, and LLM projects. Not only UI Components.
+
+## Installation instructions
+
+```sh
+pip install streamlit-gpt-vis
+```
+
+## Usage instructions
+
+```python
+import streamlit as st
+
+from streamlit_gpt_vis import gpt_vis_renderer
+
+content = '''
+# GPT-VIS \n\nComponents for GPTs, generative AI, and LLM projects. Not only UI Components.
+
+Here’s a visualization of Haidilao's food delivery revenue from 2013 to 2022. You can see a steady increase over the years, with notable *growth* particularly in recent years.
+
+\`\`\`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}] }
+\`\`\`
+'''
+
+gpt_vis_renderer(content, config=None)
+```

bindings/streamlit-gpt-vis/example/basic.py

@@ -0,0 +1,45 @@
+import streamlit as st
+from streamlit_gpt_vis import gpt_vis_renderer
+
+# Add some test code to play with the component while it's in development.
+# During development, we can run this just as we would any other Streamlit
+# app: `$ streamlit run my_component/example.py`
+
+st.subheader("Component with constant args")
+
+# Create an instance of our component with a constant `content` arg, and
+# print its output value.
+gpt_vis_renderer('''
+# GPT-VIS \n\nComponents for GPTs, generative AI, and LLM projects. Not only UI Components.
+
+Here’s a visualization of Haidilao's food delivery revenue from 2013 to 2022. You can see a steady increase over the years, with notable *growth* particularly in recent years.
+
+```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}] }
+```   
+''')
+
+st.markdown("---")
+
+st.subheader("Component with vis text")
+
+gpt_vis_renderer('''
+<vis-text type="time_desc">本月</vis-text>共产生<vis-text type="metric_name">决策数量</vis-text><vis-text type="metric_value">2,783</vis-text>个，环比<vis-text type="trend_desc">增长</vis-text><vis-text type="ratio_value_pos">15.2%</vis-text>。<vis-text type="dim_name">高优先级决策</vis-text>占比<vis-text type="proportion">56.2%</vis-text>，呈现稳定<vis-text type="trend_desc" origin="[1, 2, 6, 18, 24, 48]">上升</vis-text>趋势，预计<vis-text type="time_desc">下月</vis-text>将突破<vis-text type="metric_value">3,000</vis-text>大关。
+''')
+
+
+st.markdown("---")
+
+st.subheader("Component with variable args")
+
+# Create a second instance of our component whose `content` arg will vary
+# based on a text_input widget.
+#
+# We use the special "key" argument to assign a fixed identity to this
+# component instance. By default, when a component's arguments change,
+# 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.")
+
+gpt_vis_renderer(content_input, config={'plot': { 'theme': { 'type': 'academy' }}})

bindings/streamlit-gpt-vis/setup.py

@@ -0,0 +1,28 @@
+from pathlib import Path
+
+import setuptools
+
+this_directory = Path(__file__).parent
+long_description = (this_directory / "README.md").read_text()
+
+setuptools.setup(
+    name="streamlit-gpt-vis",
+    version="0.0.1",
+    author="lvisei",
+    author_email="[email protected]",
+    description="Components for GPTs, generative AI, and LLM projects. Not only UI Components.",
+    long_description=long_description,
+    long_description_content_type="text/markdown",
+    url="https://github.com/antvis/GPT-Vis/bindings/streamlit-gpt-vis",
+    license="MIT",
+    packages=setuptools.find_packages(),
+    include_package_data=True,
+    classifiers=[],
+    python_requires=">=3.7",
+    install_requires=[
+        # By definition, a Custom Component depends on Streamlit.
+        # If your component has other Python dependencies, list
+        # them here.
+        "streamlit >= 0.63",
+    ]
+)

bindings/streamlit-gpt-vis/streamlit_gpt_vis/__init__.py

@@ -0,0 +1,78 @@
+import os
+import streamlit.components.v1 as components
+
+# Create a _RELEASE constant. We'll set this to False while we're developing
+# 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
+
+# Declare a Streamlit component. `declare_component` returns a function
+# that is used to create instances of the component. We're naming this
+# function "_component_func", with an underscore prefix, because we don't want
+# to expose it directly to users. Instead, we will create a custom wrapper
+# function, below, that will serve as our component's public API.
+
+# It's worth noting that this call to `declare_component` is the
+# *only thing* you need to do to create the binding between Streamlit and
+# your component frontend. Everything else we do in this file is simply a
+# best practice.
+
+if not _RELEASE:
+    _component_func = components.declare_component(
+        # We give the component a simple, descriptive name ("my_component"
+        # does not fit this bill, so please choose something better for your
+        # own component :)
+        "gpt_vis_renderer",
+        # 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",
+    )
+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")
+    _component_func = components.declare_component("gpt_vis_renderer", path=build_dir)
+
+
+# Create a wrapper function for the component. This is an optional
+# best practice - we could simply expose the component function returned by
+# `declare_component` and call it done. The wrapper allows us to customize
+# our component's API: we can pre-process its input args, post-process its
+# output value, and add a docstring for users.
+def gpt_vis_renderer(content, config=None, key=None):
+    """Create a new instance of "my_component".
+
+    Parameters
+    ----------
+    name: str
+        The name of the thing we're saying hello to. The component will display
+        the text "Hello, {name}!"
+    key: str or None
+        An optional key that uniquely identifies this component. If this is
+        None, and the component's arguments are changed, the component will
+        be re-mounted in the Streamlit frontend and lose its current state.
+
+    Returns
+    -------
+    int
+        The number of times the component's "Click Me" button has been clicked.
+        (This is the value passed to `Streamlit.setComponentValue` on the
+        frontend.)
+
+    """
+    # Call through to our private component function. Arguments we pass here
+    # will be sent to the frontend, where they'll be available in an "args"
+    # dictionary.
+    #
+    # "default" is a special argument that specifies the initial return
+    # value of the component before the user has interacted with it.
+    # component_value = _component_func(content=content, config=config, key=key, default=0)
+    _component_func(content=content, config=config, key=key)
+
+    # We could modify the value returned from the component if we wanted.
+    # There's no need to do this in our simple example - but it's an option.
+    # return component_value

bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "endOfLine": "lf",
+  "semi": false,
+  "trailingComma": "es5"
+}

bindings/streamlit-gpt-vis/streamlit_gpt_vis/frontend/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "streamlit-gpt-vis",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "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"
+    ]
+  },
+  "homepage": ".",
+  "devDependencies": {
+    "@types/node": "^12.0.0",
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
+    "react-scripts": "^5.0.1",
+    "typescript": "^4.2.0"
+  }
+}