feat: add chart in markdown

README-zh_CN.md

@@ -1,4 +1,4 @@
-<h1>Modelscope Studio</h1>
+<h1>ModelScope Studio</h1>
 
 <p align="center">
     <img src="https://modelscope.oss-cn-beijing.aliyuncs.com/modelscope.gif" height="60" style="vertical-align: middle;"/>
@@ -9,7 +9,7 @@
 <p>
 
 <p align="center">
-<a href="https://github.com/modelscope/modelscope-studio">Github</a> | 🤖 <a href="https://modelscope.cn/studios/modelscope/modelscope-studio/summary">Modelscope Studio</a> ｜ 🤗 <a href="https://huggingface.co/spaces/modelscope/modelscope-studio">HuggingFace Space</a>
+<a href="https://github.com/modelscope/modelscope-studio">GitHub</a> | 🤖 <a href="https://modelscope.cn/studios/modelscope/modelscope-studio/summary">ModelScope Studio</a> ｜ 🤗 <a href="https://huggingface.co/spaces/modelscope/modelscope-studio">Hugging Face Space</a>
 
 `modelscope_studio` 是一套基于 gradio 4.x 的扩展组件库，致力于服务于 ModelScope 创空间中对于 gradio 应用的各类扩展需求，目前主要聚集在对话场景增强、多模态场景以及一些其他垂直场景支持。
 

README.md

@@ -14,7 +14,7 @@ pinned: false
 license: apache-2.0
 ---
 
-<h1>Modelscope Studio</h1>
+<h1>ModelScope Studio</h1>
 
 <p align="center">
     <img src="https://modelscope.oss-cn-beijing.aliyuncs.com/modelscope.gif" height="60" style="vertical-align: middle;"/>
@@ -25,7 +25,7 @@ license: apache-2.0
 <p>
 
 <p align="center">
-<a href="https://github.com/modelscope/modelscope-studio">Github</a> | 🤖 <a href="https://modelscope.cn/studios/modelscope/modelscope-studio/summary">Modelscope Studio</a> ｜ 🤗 <a href="https://huggingface.co/spaces/modelscope/modelscope-studio">HuggingFace Space</a>
+<a href="https://github.com/modelscope/modelscope-studio">GitHub</a> | 🤖 <a href="https://modelscope.cn/studios/modelscope/modelscope-studio/summary">ModelScope Studio</a> ｜ 🤗 <a href="https://huggingface.co/spaces/modelscope/modelscope-studio">Hugging Face Space</a>
 
 `modelscope_studio` is a set of extension component libraries based on gradio 4.x, dedicated to serving the various extension needs of gradio applications within the ModelScope Studio. It mainly focuses on enhancing conversational scenarios, supporting multimodal contexts, and providing assistance for various other specialized scenarios.
 

components/Chatbot/README-zh_CN.md

@@ -53,6 +53,12 @@ Observation: <result>「任意 md 内容，将作为完成调用的展示的下
 
 <demo name="select-box"></demo>
 
+### 支持图表展示
+
+在返回的内容中加入 `chart` 标签，更多用法详见 <tab-link component-tab="Markdown">Markdown 内置自定义标签</tab-link>
+
+<demo name="chart"></demo>
+
 ### 多 bot 场景
 
 <demo name="multi_bots"></demo>
@@ -131,8 +137,7 @@ class CustomComponentDict(TypedDict):
 
 ### event listeners
 
-| 事件                           | 描述                                                                                                                  |
-| ------------------------------ | --------------------------------------------------------------------------------------------------------------------- |
-| `mgr.Chatbot.flushed(fn, ···)` | 当打字机效果结束时触发。EventData 为：<br/> - index：当前 message 的 index tuple。<br/> - value：当前 message value。 |
-
-| `mgr.Chatbot.custom(fn, ···)` | 自定义标签触发事件时触发，EventData 为：<br/> - index：当前 message 的 index tuple ([message index, user group(index 0) or bot group(index 1), user/bot group index])。<br/> - tag：当前触发的标签。<br/> - tag_index：当前触发标签的 index，此 index 在 message 的 index tuple 基础上重新计算。<br/> - value：自定义传入的值。 |
+| 事件                           | 描述                                                                                                                                                                                                                                                                                                                            |
+| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `mgr.Chatbot.flushed(fn, ···)` | 当打字机效果结束时触发。EventData 为：<br/> - index：当前 message 的 index tuple。<br/> - value：当前 message value。                                                                                                                                                                                                           |
+| `mgr.Chatbot.custom(fn, ···)`  | 自定义标签触发事件时触发，EventData 为：<br/> - index：当前 message 的 index tuple ([message index, user group(index 0) or bot group(index 1), user/bot group index])。<br/> - tag：当前触发的标签。<br/> - tag_index：当前触发标签的 index，此 index 在 message 的 index tuple 基础上重新计算。<br/> - value：自定义传入的值。 |

components/Chatbot/README.md

@@ -52,6 +52,12 @@ Include the `select-box` tag in the returned content for more usage details, see
 
 <demo name="select-box"></demo>
 
+### Support for Chart Display
+
+Include the `chart` tag in the returned content for more usage details, see <tab-link component-tab="Markdown">Markdown Built-in Custom Tags <tab-link component-tab="Markdown">.
+
+<demo name="chart"></demo>
+
 ### Multi-bot Scenarios
 
 <demo name="multi_bots"></demo>

components/Chatbot/demos/accordion.py

@@ -16,6 +16,7 @@ conversation = [
         None, {
             "text": f"""
 Use accordion tag:
+
 <accordion title="Using tool">
 
 ```json

components/Chatbot/demos/chart.py

@@ -0,0 +1,42 @@
+import json
+
+import gradio as gr
+
+import modelscope_studio as mgr
+
+# echarts options, see: https://echarts.apache.org/en/index.html
+option1 = {
+    "xAxis": {
+        "type": 'category',
+        "data": ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    },
+    "yAxis": {
+        "type": 'value',
+    },
+    "series": [
+        {
+            "data": [150, 230, 224, 218, 135, 147, 260],
+            "type": 'line',
+        },
+    ],
+}
+
+conversation = [
+    [
+        None, {
+            "text": f"""
+Chart:
+<chart options='{json.dumps(option1)}'></chart>
+"""
+        }
+    ],
+]
+
+with gr.Blocks() as demo:
+    mgr.Chatbot(
+        value=conversation,
+        height=600,
+    )
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/Markdown/README-zh_CN.md

@@ -27,6 +27,12 @@
 
 <demo name="select-box"></demo>
 
+### 支持图表展示
+
+在返回的内容中加入 `chart` 标签，更多用法详见 <tab-link tab="custom_tags/chart">chart</tab-link>
+
+<demo name="chart"></demo>
+
 ### 自定义标签（高阶用法，需要了解前端知识）
 
 <demo name="custom-tag"></demo>
@@ -81,6 +87,7 @@ class CustomComponentDict(TypedDict):
 
 - <tab-link tab="custom_tags/select-box">select-box</tab-link>
 - <tab-link tab="custom_tags/accordion">accordion</tab-link>
+- <tab-link tab="custom_tags/chart">chart</tab-link>
 
 ### event listeners
 

components/Markdown/README.md

@@ -25,11 +25,16 @@ Include the `accordion` tag in the returned content for more usage details, see
 Include the `select-box` tag in the returned content for more usage details, see <tab-link tab="custom_tags/select-box">select-box</tab-link>
 <demo name="select-box"></demo>
 
+### Support for Chart Display
+
+Include the `chart` tag in the returned content for more usage details, see <tab-link tab="custom_tags/chart">chart</tab-link>
+<demo name="chart"></demo>
+
 ### Custom Tags (Advanced Usage, Requires Frontend Knowledge)
 
 <demo name="custom-tag"></demo>
 
-#### Importing js
+#### Import JS
 
 <demo name="custom-tag2"></demo>
 The template can only perform simple variable replacements. If you want to introduce more custom behaviors, such as conditional judgments, loop rendering, etc., please use js to control the element for processing. Here is a simple example:
@@ -77,6 +82,7 @@ class CustomComponentDict(TypedDict):
 
 - <tab-link tab="custom_tags/select-box">select-box</tab-link>
 - <tab-link tab="custom_tags/accordion">accordion</tab-link>
+- <tab-link tab="custom_tags/chart">chart</tab-link>
 
 ### Event Listeners
 

components/Markdown/custom_tags/chart-zh_CN.md

@@ -0,0 +1,17 @@
+# chart
+
+在 markdown 文本中添加图表。
+
+## 如何使用
+
+### 基本使用
+
+<demo name="custom_tags/chart/basic"></demo>
+
+## API 及参数列表
+
+### props
+
+| 属性    | 类型   | 默认值 | 描述                                                                                      |
+| ------- | ------ | ------ | ----------------------------------------------------------------------------------------- |
+| options | object |        | `echarts`的 options 配置，详见：[echarts docs](https://echarts.apache.org/en/option.html) |

components/Markdown/custom_tags/chart.md

@@ -0,0 +1,17 @@
+# chart
+
+Add a chart to markdown text.
+
+## How to Use
+
+### Basic Usage
+
+<demo name="custom_tags/chart/basic"></demo>
+
+## API and Parameter List
+
+### props
+
+| Attribute | Type   | Default Value | Description                                                                       |
+| --------- | ------ | ------------- | --------------------------------------------------------------------------------- |
+| options   | object |               | `echarts` options, see: [echarts docs](https://echarts.apache.org/en/option.html) |

components/Markdown/demos/chart.py

@@ -0,0 +1,31 @@
+import json
+
+import gradio as gr
+
+import modelscope_studio as mgr
+
+# echarts options, see: https://echarts.apache.org/en/index.html
+option1 = {
+    "xAxis": {
+        "type": 'category',
+        "data": ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    },
+    "yAxis": {
+        "type": 'value',
+    },
+    "series": [
+        {
+            "data": [150, 230, 224, 218, 135, 147, 260],
+            "type": 'line',
+        },
+    ],
+}
+
+with gr.Blocks() as demo:
+    mgr.Markdown(f"""
+Chart:
+<chart options='{json.dumps(option1)}'></chart>
+""")
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/Markdown/demos/custom_tags/chart/basic.py

@@ -0,0 +1,84 @@
+import json
+
+import gradio as gr
+
+import modelscope_studio as mgr
+
+# echarts options, see: https://echarts.apache.org/en/index.html
+option1 = {
+    "xAxis": {
+        "type": 'category',
+        "data": ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    },
+    "yAxis": {
+        "type": 'value',
+    },
+    "series": [
+        {
+            "data": [150, 230, 224, 218, 135, 147, 260],
+            "type": 'line',
+        },
+    ],
+}
+
+option2 = {
+    "tooltip": {
+        "trigger": 'item'
+    },
+    "legend": {
+        "top": '5%',
+        "left": 'center'
+    },
+    "series": [{
+        "name":
+        'Access From',
+        "type":
+        'pie',
+        "radius": ['40%', '70%'],
+        "avoidLabelOverlap":
+        False,
+        "itemStyle": {
+            "borderRadius": 10,
+            "borderColor": '#fff',
+            "borderWidth": 2
+        },
+        "label": {
+            "show": False,
+            "position": 'center'
+        },
+        "emphasis": {
+            "label": {
+                "show": True,
+                "fontSize": 40,
+                "fontWeight": 'bold'
+            }
+        },
+        "labelLine": {
+            "show": False
+        },
+        "data": [{
+            "value": 1048,
+            "name": 'Search Engine'
+        }, {
+            "value": 735,
+            "name": 'Direct'
+        }, {
+            "value": 580,
+            "name": 'Email'
+        }, {
+            "value": 484,
+            "name": 'Union Ads'
+        }, {
+            "value": 300,
+            "name": 'Video Ads'
+        }]
+    }]
+}
+
+with gr.Blocks() as demo:
+    chatbot = mgr.Markdown(f"""<chart options='{json.dumps(option1)}'></chart>
+
+<chart options='{json.dumps(option2)}'></chart>
+""")
+if __name__ == "__main__":
+    demo.queue().launch()

modelscope_studio-0.1.1-py3-none-any.whl → modelscope_studio-0.1.4-py3-none-any.whl

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:be1efaf87fdc1b197182272a3d043cc5b832fbc8bf54c8fe89431aa5491b3a92
-size 6195613
+oid sha256:918f05ea07a5ceffe1b6e759f288c214345f4f61b12b4315d9d61544b7196a4a
+size 7456942

requirements.txt

@@ -1,2 +1,2 @@
 modelscope_studio
-modelscope_studio-0.1.1-py3-none-any.whl
+modelscope_studio-0.1.4-py3-none-any.whl

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "modelscope_studio"
-version = "0.1.1"
+version = "0.1.4"
 description = "A set of extension component, inluding components for conversational input and display in multimodal scenarios, as well as more components for vertical scenarios."
 readme = "README.md"
 license = "Apache-2.0"