feat: streamlit with gpt-vis (#7)

* feat: streamlit with gpt-vis

* chore: set UploadCommand

* chore: test fn component

* chore: front end project

* refactor: rename

* chore: space

* chore: remarks

* docs: streamlit

README.md

@@ -89,6 +89,25 @@ export default () => {
 };
 ```
 
+## 🐍 Streamlit
+
+```python
+import streamlit as st
+from streamlit_gpt_vis import set_gpt_vis
+
+content = '''
+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}]}
+\`\`\`
+'''
+
+set_gpt_vis(content)
+```
+
+Learn more 👉 [streamlit-gpt-vis](https://github.com/antvis/GPT-Vis/bindings/streamlit-gpt-vis)
+
 ## 💻 Development
 
 ```bash

README.zh-CN.md

@@ -89,6 +89,25 @@ export default () => {
 };
 ```
 
+## 🐍 Streamlit
+
+```python
+import streamlit as st
+from streamlit_gpt_vis import set_gpt_vis
+
+content = '''
+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}]}
+\`\`\`
+'''
+
+set_gpt_vis(content)
+```
+
+更多了解 👉 [streamlit-gpt-vis](https://github.com/antvis/GPT-Vis/bindings/streamlit-gpt-vis)
+
 ## 💻 本地开发
 
 ```bash

bindings/streamlit-gpt-vis/.flake8

@@ -0,0 +1,6 @@
+[flake8]
+exclude =
+    .git
+    .github
+    dist
+    docs

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/dist *

bindings/streamlit-gpt-vis/README.md

@@ -0,0 +1,41 @@
+# streamlit-gpt-vis
+
+[![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)
+
+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
+
+```python
+import streamlit as st
+from streamlit_gpt_vis import set_gpt_vis
+
+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}]}
+\`\`\`
+'''
+
+set_gpt_vis(content)
+```
+
+## API
+
+### `set_gpt_vis(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)

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

@@ -0,0 +1,49 @@
+import streamlit as st
+from streamlit_gpt_vis import set_gpt_vis
+
+# 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.
+set_gpt_vis('''
+# 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}] }
+```
+
+```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("---")
+
+st.subheader("Component with vis text")
+
+set_gpt_vis('''
+<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\n Components for GPTs, generative AI, and LLM projects. Not only UI Components.")
+
+set_gpt_vis(content_input, config={'plot': { 'theme': { 'type': 'academy' }}})

bindings/streamlit-gpt-vis/setup.py

@@ -0,0 +1,71 @@
+from pathlib import Path
+
+from shutil import rmtree
+import os
+import sys
+import setuptools
+
+# Load the package's _version.py module as a dictionary.
+here = os.path.abspath(os.path.dirname(__file__))
+
+__title__ = "streamlit-gpt-vis"
+__version__ = "0.0.2"
+
+this_directory = Path(__file__).parent
+long_description = (this_directory / "README.md").read_text()
+
+class UploadCommand(setuptools.Command):
+    description = "Build and publish the package."
+    user_options = []
+
+    @staticmethod
+    def status(s):
+        print("✨✨ {0}".format(s))
+
+    def initialize_options(self):
+        pass
+
+    def finalize_options(self):
+        pass
+
+    def run(self):
+        try:
+            self.status("Removing previous builds…")
+            rmtree(os.path.join(here, "dist"))
+            rmtree(os.path.join(here, "build"))
+            rmtree(os.path.join(here, "{0}.egg-info".format(__title__)))
+        except OSError:
+            pass
+
+        self.status("Building Source and Wheel distribution…")
+        os.system("{0} setup.py bdist_wheel sdist".format(sys.executable))
+
+        self.status("Uploading the package to PyPI via Twine…")
+        os.system("python -m twine upload dist/*")
+
+        sys.exit()
+
+setuptools.setup(
+    name=__title__,
+    version=__version__,
+    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",
+    ],
+    __keywords__ = ["AntV", "GPTs", "Vis",
+                "visualization", "map", "geospatial", "plot", "Graph", "LLM"],
+    cmdclass={"upload": UploadCommand},
+)

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

@@ -0,0 +1,72 @@
+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 = True
+
+# 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 ("set_gpt_vis"
+        # does not fit this bill, so please choose something better for your
+        # own component :)
+        "set_gpt_vis",
+        # 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: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/dist")
+    _component_func = components.declare_component("set_gpt_vis", 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 set_gpt_vis(content, config=None, key=None):
+    """Create a new instance of "set_gpt_vis".
+
+    Parameters
+    ----------
+    content: str
+        The Markdown content
+    config: dict
+        GPT-Vis [ConfigProvider](https://github.com/antvis/GPT-Vis/blob/main/src/ConfigProvider/index.md) config
+    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.
+
+    """
+    # 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