CloudOrc / SolidUI

one sentence generates any graph
https://cloudorc.github.io/SolidUI-Website/
Apache License 2.0
573 stars 86 forks source link

[Feature][SolidUI] Dev0.2.0 concept video #120

Closed dlimeng closed 1 year ago

dlimeng commented 1 year ago

Search before asking

Problem Description

1. https://quickchart.io/sandbox#%7B%0A%20%20type%3A%20%22bar%22%2C%0A%20%20data%3A%20%7B%0A%20%20%20%20labels%3A%20%5B%22January%22%2C%20%22February%22%2C%20%22March%22%2C%20%22April%22%5D%2C%0A%20%20%20%20datasets%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20label%3A%20%22Dataset%201%22%2C%0A%20%20%20%20%20%20%20%20data%3A%20%5B56%2C%2033%2C%2078%2C%2054%5D%2C%0A%20%20%20%20%20%20%20%20errorBars%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20January%3A%20%7B%20plus%3A%2010%2C%20minus%3A%205%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20February%3A%20%7B%20plus%3A%2015%2C%20minus%3A%203%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20March%3A%20%7B%20plus%3A%2015%2C%20minus%3A%2014%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20April%3A%20%7B%20plus%3A%2025%2C%20minus%3A%204%20%7D%2C%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20label%3A%20%22Dataset%202%22%2C%0A%20%20%20%20%20%20%20%20data%3A%20%5B100%2C%2077%2C%2033%2C%2045%5D%2C%0A%20%20%20%20%20%20%20%20errorBars%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20January%3A%20%7B%20plus%3A%205%2C%20minus%3A%2034%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20February%3A%20%7B%20plus%3A%205%2C%20minus%3A%2024%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20March%3A%20%7B%20plus%3A%2010%2C%20minus%3A%204%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20April%3A%20%7B%20plus%3A%2015%2C%20minus%3A%2020%20%7D%2C%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%7D%2C%0A%20%20options%3A%20%7B%0A%20%20%20%20title%3A%20%7B%0A%20%20%20%20%20%20display%3A%20true%2C%0A%20%20%20%20%20%20text%3A%20%22Error%20Bars%22%2C%0A%20%20%20%20%7D%2C%0A%20%20%20%20plugins%3A%20%7B%0A%20%20%20%20%20%20%2F%2F%20See%20error%20bars%20plugin%3A%20https%3A%2F%2Fgithub.com%2Fdatavisyn%2Fchartjs-plugin-error-bars%0A%20%20%20%20%20%20chartJsPluginErrorBars%3A%20%7B%0A%20%20%20%20%20%20%20%20color%3A%20%22%23aaa%22%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%7D%2C%0A%20%20%7D%2C%0A%7D%0A

2.https://quickchart.io/sandbox#%7B%0A%20%20%22type%22%3A%20%22line%22%2C%0A%20%20%22data%22%3A%20%7B%0A%20%20%20%20%22labels%22%3A%20%5B%0A%20%20%20%20%20%20%22January%22%2C%0A%20%20%20%20%20%20%22February%22%2C%0A%20%20%20%20%20%20%22March%22%2C%0A%20%20%20%20%20%20%22April%22%2C%0A%20%20%20%20%20%20%22May%22%2C%0A%20%20%20%20%20%20%22June%22%2C%0A%20%20%20%20%20%20%22July%22%0A%20%20%20%20%5D%2C%0A%20%20%20%20%22datasets%22%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22label%22%3A%20%22My%20First%20dataset%22%2C%0A%20%20%20%20%20%20%20%20%22borderColor%22%3A%20%22rgb(255%2C%2099%2C%20132)%22%2C%0A%20%20%20%20%20%20%20%20%22backgroundColor%22%3A%20%22rgb(255%2C%2099%2C%20132)%22%2C%0A%20%20%20%20%20%20%20%20%22fill%22%3A%20false%2C%0A%20%20%20%20%20%20%20%20%22data%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20-58%2C%0A%20%20%20%20%20%20%20%20%20%20-87%2C%0A%20%20%20%20%20%20%20%20%20%2070%2C%0A%20%20%20%20%20%20%20%20%20%2098%2C%0A%20%20%20%20%20%20%20%20%20%20-38%2C%0A%20%20%20%20%20%20%20%20%20%2088%2C%0A%20%20%20%20%20%20%20%20%20%2070%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%22yAxisID%22%3A%20%22y%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22label%22%3A%20%22My%20Second%20dataset%22%2C%0A%20%20%20%20%20%20%20%20%22borderColor%22%3A%20%22rgb(54%2C%20162%2C%20235)%22%2C%0A%20%20%20%20%20%20%20%20%22backgroundColor%22%3A%20%22rgb(54%2C%20162%2C%20235)%22%2C%0A%20%20%20%20%20%20%20%20%22fill%22%3A%20false%2C%0A%20%20%20%20%20%20%20%20%22data%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20-79%2C%0A%20%20%20%20%20%20%20%20%20%2043%2C%0A%20%20%20%20%20%20%20%20%20%20-57%2C%0A%20%20%20%20%20%20%20%20%20%2075%2C%0A%20%20%20%20%20%20%20%20%20%2020%2C%0A%20%20%20%20%20%20%20%20%20%20-3%2C%0A%20%20%20%20%20%20%20%20%20%20-95%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%22yAxisID%22%3A%20%22y1%22%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%0A%20%20%7D%2C%0A%20%20%22options%22%3A%20%7B%0A%20%20%20%20%22stacked%22%3A%20false%2C%0A%20%20%20%20%22title%22%3A%20%7B%0A%20%20%20%20%20%20%22display%22%3A%20true%2C%0A%20%20%20%20%20%20%22text%22%3A%20%22Chart.js%20Line%20Chart%20-%20Multi%20Axis%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22scales%22%3A%20%7B%0A%20%20%20%20%20%20%22yAxes%22%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22id%22%3A%20%22y%22%2C%0A%20%20%20%20%20%20%20%20%22type%22%3A%20%22linear%22%2C%0A%20%20%20%20%20%20%20%20%22display%22%3A%20true%2C%0A%20%20%20%20%20%20%20%20%22position%22%3A%20%22left%22%0A%20%20%20%20%20%20%7D%2C%20%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22id%22%3A%20%22y1%22%2C%0A%20%20%20%20%20%20%20%20%22type%22%3A%20%22linear%22%2C%0A%20%20%20%20%20%20%20%20%22display%22%3A%20true%2C%0A%20%20%20%20%20%20%20%20%22position%22%3A%20%22right%22%2C%0A%20%20%20%20%20%20%20%20%22gridLines%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%22drawOnChartArea%22%3A%20false%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D

3. https://quickchart.io/sandbox#%7B%0A%20%20type%3A%20%27polarArea%27%2C%0A%20%20data%3A%20%7B%0A%20%20%20%20datasets%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20data%3A%20%5B3%2C%2056%2C%2061%2C%2078%2C%2083%5D%2C%0A%20%20%20%20%20%20%20%20backgroundColor%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%27rgba(255%2C%2099%2C%20132%2C%200.5)%27%2C%0A%20%20%20%20%20%20%20%20%20%20%27rgba(255%2C%20159%2C%2064%2C%200.5)%27%2C%0A%20%20%20%20%20%20%20%20%20%20%27rgba(255%2C%20205%2C%2086%2C%200.5)%27%2C%0A%20%20%20%20%20%20%20%20%20%20%27rgba(75%2C%20192%2C%20192%2C%200.5)%27%2C%0A%20%20%20%20%20%20%20%20%20%20%27rgba(54%2C%20162%2C%20235%2C%200.5)%27%2C%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20label%3A%20%27My%20dataset%27%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%20%20labels%3A%20%5B%27Red%27%2C%20%27Orange%27%2C%20%27Yellow%27%2C%20%27Green%27%2C%20%27Blue%27%5D%2C%0A%20%20%7D%2C%0A%20%20options%3A%20%7B%0A%20%20%20%20legend%3A%20%7B%0A%20%20%20%20%20%20position%3A%20%27right%27%2C%0A%20%20%20%20%7D%2C%0A%20%20%20%20title%3A%20%7B%0A%20%20%20%20%20%20display%3A%20true%2C%0A%20%20%20%20%20%20text%3A%20%27Chart.js%20Polar%20Area%20Chart%27%2C%0A%20%20%20%20%7D%2C%0A%20%20%7D%2C%0A%7D%0A

4.https://matplotlib.org/stable/gallery/mplot3d/hist3d.html#sphx-glr-gallery-mplot3d-hist3d-py

5.https://matplotlib.org/stable/gallery/mplot3d/wire3d.html#sphx-glr-gallery-mplot3d-wire3d-py

6.https://matplotlib.org/stable/gallery/mplot3d/surface3d_radial.html#sphx-glr-gallery-mplot3d-surface3d-radial-py

7.https://dash.gallery/dash-3d-image-partitioning/

8.https://www.wjceo.com/blog/threejs/2018-03-19/126.html

9.https://www.wjceo.com/blog/threejs/2018-03-25/140.html

10.https://maulik-kamdar.com/code/meteorViz/

视频流程

开场:SolidUI 文字 + logo 中文概述:一句话生成任何图形 英文概述:generate any shape with a single sentence

1.提示词 + 展示图形

2.提示词 + 展示图形

3.提示词 + 展示图形

4.提示词 + 展示图形

5.提示词 + 展示图形

6.提示词 + 展示图形

7.提示词 + 展示图形

8.提示词 + 展示图形

9.提示词 + 展示图形

10.提示词 + 展示图形

结尾:

官网地址:https://website.solidui.top/

两版:一版提示词是中文,概述中文。 另一版本提示词英文,概述英文

参考:https://www.youtube.com/watch?v=eYKp39kgQyw 参考视频效果


1. https://quickchart.io/sandbox#%7B%0A%20%20type%3A%20%22bar%22%2C%0A%20%20data%3A%20%7B%0A%20%20%20%20labels%3A%20%5B%22January%22%2C%20%22February%22%2C%20%22March%22%2C%20%22April%22%5D%2C%0A%20%20%20%20datasets%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20label%3A%20%22Dataset%201%22%2C%0A%20%20%20%20%20%20%20%20data%3A%20%5B56%2C%2033%2C%2078%2C%2054%5D%2C%0A%20%20%20%20%20%20%20%20errorBars%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20January%3A%20%7B%20plus%3A%2010%2C%20minus%3A%205%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20February%3A%20%7B%20plus%3A%2015%2C%20minus%3A%203%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20March%3A%20%7B%20plus%3A%2015%2C%20minus%3A%2014%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20April%3A%20%7B%20plus%3A%2025%2C%20minus%3A%204%20%7D%2C%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20label%3A%20%22Dataset%202%22%2C%0A%20%20%20%20%20%20%20%20data%3A%20%5B100%2C%2077%2C%2033%2C%2045%5D%2C%0A%20%20%20%20%20%20%20%20errorBars%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20January%3A%20%7B%20plus%3A%205%2C%20minus%3A%2034%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20February%3A%20%7B%20plus%3A%205%2C%20minus%3A%2024%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20March%3A%20%7B%20plus%3A%2010%2C%20minus%3A%204%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20April%3A%20%7B%20plus%3A%2015%2C%20minus%3A%2020%20%7D%2C%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%7D%2C%0A%20%20options%3A%20%7B%0A%20%20%20%20title%3A%20%7B%0A%20%20%20%20%20%20display%3A%20true%2C%0A%20%20%20%20%20%20text%3A%20%22Error%20Bars%22%2C%0A%20%20%20%20%7D%2C%0A%20%20%20%20plugins%3A%20%7B%0A%20%20%20%20%20%20%2F%2F%20See%20error%20bars%20plugin%3A%20https%3A%2F%2Fgithub.com%2Fdatavisyn%2Fchartjs-plugin-error-bars%0A%20%20%20%20%20%20chartJsPluginErrorBars%3A%20%7B%0A%20%20%20%20%20%20%20%20color%3A%20%22%23aaa%22%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%7D%2C%0A%20%20%7D%2C%0A%7D%0A

2.https://quickchart.io/sandbox#%7B%0A%20%20%22type%22%3A%20%22line%22%2C%0A%20%20%22data%22%3A%20%7B%0A%20%20%20%20%22labels%22%3A%20%5B%0A%20%20%20%20%20%20%22January%22%2C%0A%20%20%20%20%20%20%22February%22%2C%0A%20%20%20%20%20%20%22March%22%2C%0A%20%20%20%20%20%20%22April%22%2C%0A%20%20%20%20%20%20%22May%22%2C%0A%20%20%20%20%20%20%22June%22%2C%0A%20%20%20%20%20%20%22July%22%0A%20%20%20%20%5D%2C%0A%20%20%20%20%22datasets%22%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22label%22%3A%20%22My%20First%20dataset%22%2C%0A%20%20%20%20%20%20%20%20%22borderColor%22%3A%20%22rgb(255%2C%2099%2C%20132)%22%2C%0A%20%20%20%20%20%20%20%20%22backgroundColor%22%3A%20%22rgb(255%2C%2099%2C%20132)%22%2C%0A%20%20%20%20%20%20%20%20%22fill%22%3A%20false%2C%0A%20%20%20%20%20%20%20%20%22data%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20-58%2C%0A%20%20%20%20%20%20%20%20%20%20-87%2C%0A%20%20%20%20%20%20%20%20%20%2070%2C%0A%20%20%20%20%20%20%20%20%20%2098%2C%0A%20%20%20%20%20%20%20%20%20%20-38%2C%0A%20%20%20%20%20%20%20%20%20%2088%2C%0A%20%20%20%20%20%20%20%20%20%2070%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%22yAxisID%22%3A%20%22y%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22label%22%3A%20%22My%20Second%20dataset%22%2C%0A%20%20%20%20%20%20%20%20%22borderColor%22%3A%20%22rgb(54%2C%20162%2C%20235)%22%2C%0A%20%20%20%20%20%20%20%20%22backgroundColor%22%3A%20%22rgb(54%2C%20162%2C%20235)%22%2C%0A%20%20%20%20%20%20%20%20%22fill%22%3A%20false%2C%0A%20%20%20%20%20%20%20%20%22data%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20-79%2C%0A%20%20%20%20%20%20%20%20%20%2043%2C%0A%20%20%20%20%20%20%20%20%20%20-57%2C%0A%20%20%20%20%20%20%20%20%20%2075%2C%0A%20%20%20%20%20%20%20%20%20%2020%2C%0A%20%20%20%20%20%20%20%20%20%20-3%2C%0A%20%20%20%20%20%20%20%20%20%20-95%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%22yAxisID%22%3A%20%22y1%22%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%0A%20%20%7D%2C%0A%20%20%22options%22%3A%20%7B%0A%20%20%20%20%22stacked%22%3A%20false%2C%0A%20%20%20%20%22title%22%3A%20%7B%0A%20%20%20%20%20%20%22display%22%3A%20true%2C%0A%20%20%20%20%20%20%22text%22%3A%20%22Chart.js%20Line%20Chart%20-%20Multi%20Axis%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22scales%22%3A%20%7B%0A%20%20%20%20%20%20%22yAxes%22%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22id%22%3A%20%22y%22%2C%0A%20%20%20%20%20%20%20%20%22type%22%3A%20%22linear%22%2C%0A%20%20%20%20%20%20%20%20%22display%22%3A%20true%2C%0A%20%20%20%20%20%20%20%20%22position%22%3A%20%22left%22%0A%20%20%20%20%20%20%7D%2C%20%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22id%22%3A%20%22y1%22%2C%0A%20%20%20%20%20%20%20%20%22type%22%3A%20%22linear%22%2C%0A%20%20%20%20%20%20%20%20%22display%22%3A%20true%2C%0A%20%20%20%20%20%20%20%20%22position%22%3A%20%22right%22%2C%0A%20%20%20%20%20%20%20%20%22gridLines%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%22drawOnChartArea%22%3A%20false%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D

3. https://quickchart.io/sandbox#%7B%0A%20%20type%3A%20%27polarArea%27%2C%0A%20%20data%3A%20%7B%0A%20%20%20%20datasets%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20data%3A%20%5B3%2C%2056%2C%2061%2C%2078%2C%2083%5D%2C%0A%20%20%20%20%20%20%20%20backgroundColor%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%27rgba(255%2C%2099%2C%20132%2C%200.5)%27%2C%0A%20%20%20%20%20%20%20%20%20%20%27rgba(255%2C%20159%2C%2064%2C%200.5)%27%2C%0A%20%20%20%20%20%20%20%20%20%20%27rgba(255%2C%20205%2C%2086%2C%200.5)%27%2C%0A%20%20%20%20%20%20%20%20%20%20%27rgba(75%2C%20192%2C%20192%2C%200.5)%27%2C%0A%20%20%20%20%20%20%20%20%20%20%27rgba(54%2C%20162%2C%20235%2C%200.5)%27%2C%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20label%3A%20%27My%20dataset%27%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%20%20labels%3A%20%5B%27Red%27%2C%20%27Orange%27%2C%20%27Yellow%27%2C%20%27Green%27%2C%20%27Blue%27%5D%2C%0A%20%20%7D%2C%0A%20%20options%3A%20%7B%0A%20%20%20%20legend%3A%20%7B%0A%20%20%20%20%20%20position%3A%20%27right%27%2C%0A%20%20%20%20%7D%2C%0A%20%20%20%20title%3A%20%7B%0A%20%20%20%20%20%20display%3A%20true%2C%0A%20%20%20%20%20%20text%3A%20%27Chart.js%20Polar%20Area%20Chart%27%2C%0A%20%20%20%20%7D%2C%0A%20%20%7D%2C%0A%7D%0A

4.https://matplotlib.org/stable/gallery/mplot3d/hist3d.html#sphx-glr-gallery-mplot3d-hist3d-py

5.https://matplotlib.org/stable/gallery/mplot3d/wire3d.html#sphx-glr-gallery-mplot3d-wire3d-py

6.https://matplotlib.org/stable/gallery/mplot3d/surface3d_radial.html#sphx-glr-gallery-mplot3d-surface3d-radial-py

7.https://dash.gallery/dash-3d-image-partitioning/

8.https://www.wjceo.com/blog/threejs/2018-03-19/126.html

9.https://www.wjceo.com/blog/threejs/2018-03-25/140.html

10.https://maulik-kamdar.com/code/meteorViz/

video flow

Opening: SolidUI text + logo Chinese overview: generate any shape with a single sentence English overview: generate any shape with a single sentence

  1. Prompt words + display graphics

  2. Prompt words + display graphics

  3. Prompt words + display graphics

  4. Prompt words + display graphics

  5. Prompt words + display graphics

  6. Prompt words + display graphics

  7. Prompt words + display graphics

  8. Prompt words + display graphics

  9. Prompt words + display graphics

  10. Prompt words + display graphics

end:

Official website address: https://website.solidui.top/

Two editions: one edition is in Chinese with prompt words and Chinese overview. Another version prompt words in English, overview in English

Reference: https://www.youtube.com/watch?v=eYKp39kgQyw Reference video effect

Description

No response

Use case

No response

Solutions

No response

Anything else

No response

Are you willing to submit a PR?

github-actions[bot] commented 1 year ago

:blush: Welcome to the SolidUI community!! We are glad that you are contributing by opening this issue.

Please make sure to include all the relevant context. We will be here shortly.

If you are interested in contributing to our project, please let us know! You can check out our contributing guide on :point_right: How to Contribute.

If you have any questions or suggestions, please feel free to post them here or contact us via email at mengyoupanshan@gmail.com.

We appreciate your interest in SolidUI and look forward to working with you!

dlimeng commented 1 year ago

LGTM