Delete pages

pages/002 Form Component/demo_button.py

@@ -1,149 +0,0 @@
-### Button
-import simplestart as ss
-
-ss.md('''
-## ss.button
-''')
-ss.md('''
-[Online Help](https://www.simplestart.cc/doc_form/ss-button.html)
-''')
-ss.space()
-ss.md('''
-#### 🔅 Example
-''')
-
-
-def testme():
-    #ss.openpage("002 Form Component/demo_button", lang="zh")
-    #ss.openpage("main", lang="zh")
-    ss.send_message("change_locale", {"locale":"zh"});
-    
-ss.button("testme", onclick = testme)
-
-#Custom Function
-def myclick():
-    mytext.text = "You clicked "
-    
-def reset():
-    mytext.text = "This is button"
-    but1.type = ""
-    ss.getcm().components[but1.id]["content"]["options"]["icon"] = ""
-    ss.getcm().components[but1.id]["content"]["options"]["endicon"] = ""
-    ss.getcm().components[but1.id]["content"]["options"]["icon_color"] = "mediumseagreen"
-    ss.getcm().components[but1.id]["content"]["options"]["style"] = "background-color:initial;color:initial"
-    ss.session["iconstr"] = ''
-    ss.session["style_str"] = ''
-    ss.session["style"] = ''
-
-    
-#Basic Usage
-cols = ss.columns([40,"flex:60"], design=True)
-with cols[0]:
-    mytext = ss.text("This is button")
-    but1 = ss.button("Click it", icon = "mdi-account-circle", onclick=myclick)
-
-def onradiochange(event):
-    value = event.value
-    if value == "default":
-        but1.type = ""
-        ss.session["buttonstyle"] = ""
-    elif value == "outlined":
-        but1.type = "outlined"
-        ss.session["buttonstyle"] = 'type = "outlined\",'
-    elif value == "flat":
-        but1.type = "tonal"
-        ss.session["buttonstyle"] = 'type = "flat\",'
-    elif value == "text":
-        but1.type = "text"
-        ss.session["buttonstyle"] = 'type = "text\",'
-    elif value == "plain":
-        but1.type = "plain"
-        ss.session["buttonstyle"] = 'type = "plain\",'
-
-def oncheckbox_change(state, value):
-    if value == True:
-        ss.getcm().components[but1.id]["content"]["options"]["icon"] = "aim"
-        ss.session["iconstr"] = ' icon="search",'
-    else:
-        ss.getcm().components[but1.id]["content"]["options"]["icon"] = ""
-        ss.session["iconstr"] = ''
-    but1.update()
-
-def onradiochange2(event):
-    index = event.index
-
-    if index == 0:
-        ss.getcm().components[but1.id]["content"]["options"]["icon"] = "mdi-account-circle"
-        ss.getcm().components[but1.id]["content"]["options"]["endIcon"] = ""
-        ss.session["iconstr"] = ' icon="mdi-account-circle",'
-    elif index == 1:
-        ss.getcm().components[but1.id]["content"]["options"]["icon"] = ""
-        ss.getcm().components[but1.id]["content"]["options"]["endIcon"] = "mdi-alert"
-        ss.session["iconstr"] = ' endIcon="mdi-alert",'
-    else:
-        ss.getcm().components[but1.id]["content"]["options"]["icon"] = ""
-        ss.getcm().components[but1.id]["content"]["options"]["endIcon"] = ""
-        ss.session["iconstr"] = ''
-    but1.update()
-
-    
-def changeColor(bkcolor):
-    ss.getcm().components[but1.id]["content"]["options"]["style"] = f"background-color:{bkcolor}; color:white"
-    ss.getcm().components[but1.id]["content"]["options"]["icon_color"] = "white"
-    ss.session["style_str"] = f'style="background-color:{bkcolor}, color:white"'
-    ss.session["style"] = 'style=style,'
-    but1.update()
-
-
-with cols[1]:
-    ss.text("Test")
-
-    ss.write("---")
-    ss.radio(["default", "outlined", "flat", "text", "plain"], "default", inline = True, onchange=onradiochange)
-
-    ss.write("---")
-    ss.radio([(1, "Icon(Prepend)"), (2, "Icon(Append)"), (3, "No Icon")], inline = True, onchange=onradiochange2)
-    
-    
-    ss.write("---")
-    ss.button("", type = "flat", size = "small", style="background-color:#409eff", onclick=lambda:changeColor('#409eff'))
-    ss.button("", type = "flat", size = "small", style="background-color:#67c23a", onclick=lambda:changeColor('#67c23a'))
-    ss.button("", type = "flat", size = "small", style="background-color:#e6a23c", onclick=lambda:changeColor('#e6a23c'))
-    ss.button("", type = "flat", size = "small", style="background-color:#f56c6c", onclick=lambda:changeColor('#f56c6c'))
-    ss.button("", type = "flat", size = "small", style="background-color:#909399", onclick=lambda:changeColor('#909399'))
-    
-    
-    ss.space()
-    ss.button("Reset", onclick=reset)
-
-
-ss.space("mt-8")
-
-ss.write("#### 🔎 Code")
-
-ss.md('''
-```python
-import simplestart as ss
-
-def clickme():
-    mytext.text = "You clicked"
-    
-mytext = ss.text("This is button")
-@style_str
-ss.button("Click it", @buttonstyle @iconstr @style onclick=clickme)
-```
-''')
-
-ss.md('''
-::: tip
-  Function Call
-  ss.button(label, type, color, size, icon, onclick)   
-:::
-''')
-
-def onPageLoad():
-    ss.session["buttonstyle"] = ""
-    ss.session["iconstr"] = ""
-    ss.session["style"] = ""
-    ss.session["style_str"] = ""
-    

pages/002 Form Component/demo_checkbox.py

@@ -1,77 +0,0 @@
-### Checkbox
-import simplestart as ss
-
-ss.write("### ss.checkbox")
-
-def onchange(event):
-    ss.session["checked_value"] = event.value
-
-
-ss.md('''
----
-#### 🔅 Example 1
-''')
-
-ss.md("onchange: @checked_value")
-
-ss.checkbox("checkme", onchange = onchange)
-ss.checkbox("initially checked", checked = True, onchange = onchange)
-
-
-ss.write('''
----
-#### 🔎 Code
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-def onchange(state, value):
-    state["checked_value"] = value
-
-#ui
-ss.md("onchange: @checked_value")
-
-ss.checkbox("checkme", onchange = onchange)
-ss.checkbox("initially checked", checked = True, onchange = onchange)
-
-
-''')
-
-ss.space()
-ss.md('''
----
-#### 🔅 Example 2
-Get the status of the checkbox
-''')
-
-mycheck = ss.checkbox("check me", onchange = onchange)
-
-def myclick():
-    ss.message(mycheck.value)
-
-ss.button("Get Status", onclick = myclick)
-
-ss.space()
-ss.write('''
----
-#### 🔎 Code
-''')
-
-
-ss.md('''
-```python
-import simplestart as ss
-
-mycheck = ss.checkbox("check me", onchange = onchange)
-
-def myclick():
-    ss.message(mycheck.value)
-
-ss.button("获取状态", onclick = myclick)
-
-''')
-
-def onPageLoad():
-    ss.session["checked_value"] = ""

pages/002 Form Component/demo_dialog.py

@@ -1,78 +0,0 @@
-### Dialog
-import simplestart as ss
-
-ss.md("## ss.dialog")
-
-ss.space()
-
-ss.md('''
----
-#### 🔅 Example
-''')
-
-def testme():
-    ss.message("testme")
-    
-def showit():
-    if ss.session["str_fullscreen"] != "":
-        dialog.show(fullscreen = True)
-    else:
-        dialog.show()
-    
-def myclose(event):
-    ss.message("dialog close with result " + event.value)
-    
-dialog = ss.dialog("Dialog Title",  onclose=myclose)
-with dialog:
-    ss.text("SimpleStart dialog demostration")
-    ss.md("---")
-    ss.button("testme", onclick=testme)
-    ss.md(":smile:")
-        
-cols = ss.columns([60,"flex:40; border-left:1px solid lightgray"], border=True, style="border:1px solid lightgray")
-with cols[0]:
-    mytext = ss.text("This is dialog")
-    ss.button("show dialog", onclick=showit)
-    
-def mycheck(event):
-    if event.value == True:
-        ss.session["str_fullscreen"] = "fullscreen = True"
-        #dialog.show(fullscreen = True)
-    else:
-        ss.session["str_fullscreen"] = ""
-
-with cols[1]:
-    ss.text("Dialog Options")
-    ss.checkbox("Fullscreen", onchange=mycheck)
-
-ss.space()
-ss.write('''
----
-#### 🔎 Code
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-def myclose(event):
-    ss.message("dialog close with result " + event.value)
-    
-dialog = ss.dialog(title="Dialog Title", onclose=myclose)
-with dialog:
-    ss.text("Opening from the bottom")
-    ss.md("---")
-    ss.button("testme", onclick=testme)
-    ss.md(":smile:")
-    
-def showit():
-    dialog.show(@str_fullscreen)
-    
-ss.button("show dialog", onclick=showit)
-```
-''')
-
-def onPageEnter():
-    ss.session["str_fullscreen"] = ""
-    
-    

pages/002 Form Component/demo_expander.py

@@ -1,29 +0,0 @@
-### Expander
-import streamsync as ss
-
-ss.md("## ss.expander")
-
-ss.md('''
-#### 🔅 Example
-''')
-
-with ss.expander("About SimpleStart", expanded=True):
-    ss.text("Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! \
-    Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!", style="padding:10px")
-
-ss.space()
-ss.write('''
----
-#### 🔎 Code
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-with ss.expander("About SimpleStart"):
-    ss.text("Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! \
-    Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!")
-
-```
-''')

pages/002 Form Component/demo_menu.py

@@ -1,100 +0,0 @@
-### Menu
-import streamsync as ss
-
-ss.md("## ss.menu")
-
-ss.md('''
-#### 🔅 Example
-''')
-
-data = [
-    {'index': '1', 'title': 'Processing Center', 'icon':'mdi-home'},
-    {'type': 'spacer'}, #add spacer
-    {
-        'index': '2',
-        'title': 'Workspace',
-        'icon' : 'mdi-plus',
-        'subItems': [
-            {'index': '2-1', 'title': 'item one'},
-            {'index': '2-2', 'title': 'item two'},
-            {'index': '2-3', 'title': 'item three'},
-            {
-                'index': '2-4',
-                'title': 'item four',
-                'subItems': [
-                    {'index': '2-4-1', 'title': 'item one'},
-                    {'index': '2-4-2', 'title': 'item two'},
-                    {'index': '2-4-3', 'title': 'item three'},
-                ],
-            },
-        ],
-    },
-    {'index': '3', 'title': 'Info', 'disabled': True, 'icon':'mdi-cancel'},
-    {'index': '4', 'title': 'Orders', 'icon':'mdi-wrench'},
-]
-
-def menu_select(event):
-    print("menu1")
-    ss.message(event.data["keyPath"])
-
-    
-ss.md("### Horiontal Menu")
-ss.menu(data, direction = "horizontal", onselect = menu_select)
-
-ss.space()
-ss.md("### Vertical Menu")
-
-ss.menu(data, direction = "vertical", dark = True, onselect = menu_select)
-
-
-ss.space()
-ss.write('''
----
-#### 🔎 Code
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-data = [
-    {'index': '1', 'title': 'Processing Center', 'icon':'mdi-home'},
-    {'type': 'spacer'}, #add spacer
-    {
-        'index': '2',
-        'title': 'Workspace',
-        'icon' : 'mdi-plus',
-        'subItems': [
-            {'index': '2-1', 'title': 'item one'},
-            {'index': '2-2', 'title': 'item two'},
-            {'index': '2-3', 'title': 'item three'},
-            {
-                'index': '2-4',
-                'title': 'item four',
-                'subItems': [
-                    {'index': '2-4-1', 'title': 'item one'},
-                    {'index': '2-4-2', 'title': 'item two'},
-                    {'index': '2-4-3', 'title': 'item three'},
-                ],
-            },
-        ],
-    },
-    {'index': '3', 'title': 'Info', 'disabled': True, 'icon':'mdi-cancel'},
-    {'index': '4', 'title': 'Orders', 'icon':'mdi-wrench'},
-]
-
-def menu_select(event):
-    print("menu1")
-    ss.message(event.data["keyPath"])
-
-    
-ss.md("### Horiontal Menu")
-ss.menu(data, direction = "horizontal", onselect = menu_select)
-
-ss.space()
-ss.md("### Vertical Menu")
-
-ss.menu(data, direction = "vertical", dark = True, onselect = menu_select)
-
-```
-''')

pages/002 Form Component/demo_radio.py

@@ -1,94 +0,0 @@
-### Radio
-import simplestart as ss
-
-ss.md("## ss.radio")
-
-ss.space()
-
-ss.md('''
-#### 🔅 Example
-''')
-
-def onchange(event):
-    ss.session["options_value"] = event.value
-    ss.session["options_index"] = event.index
-    
-ss.md("onchange: value:@options_value, index:@options_index")
-
-options = ["Option 1", "Option 2", "Option 3"]
-myradio = ss.radio(options, label = "### my radio1", index = 0, onchange = onchange)
-
-
-options = [("C++", '#### <span style="color:blue">C++</span>'), 
-           ("Javascript", '#### <span style="color:green">Javascript</span>'), 
-           ("Python", '#### <span style="color:red">Python</span>')
-          ]
-ss.radio(options, inline = True, label = "### my radio2", index = 0, iconColor = "blue", onchange = onchange)
-
-
-
-ss.write("---")
-ss.write("#### 🔎 Code")
-
-ss.md('''
-```python
-import simplestart as ss
-
-def onchange(event):
-    ss.session["options_value"] = event.value
-    ss.session["options_index"] = event.index
-    
-ss.md("onchange: value:\@options_value, index:\@options_index")
-
-options = ["Option 1", "Option 2", "Option 3"]
-myradio = ss.radio(options, label = "### my radio1", index = 0, onchange = onchange)
-
-
-options = [("C++", '#### <span style="color:blue">C++</span>'), 
-           ("Javascript", '#### <span style="color:green">Javascript</span>'), 
-           ("Python", '#### <span style="color:red">Python</span>')
-          ]
-ss.radio(options, inline = True, label = "### my radio2", index = 0, iconColor = "blue", onchange = onchange)
-
-def onPageLoad():
-    ss.session["options_value"] = ""
-
-''')
-
-
-ss.space()
-ss.md('''
----
-#### 🔅 Example - Get State Value
-''')
-
-def myclick1():
-    ss.message(myradio.value)
-
-ss.button("Get State Value", onclick=myclick1)
-
-def myclick2():
-    ss.message(myradio.index)
-
-ss.button("Get State Index", onclick=myclick2)
-
-ss.write("---")
-ss.write("#### 🔎 Code Snippet")
-
-ss.md('''
-```python
-#...
-def myclick1():
-    ss.message(myradio.value)
-
-ss.button("Get State Value", onclick=myclick1)
-
-def myclick2():
-    ss.message(myradio.index)
-
-ss.button("Get State Index", onclick=myclick2)
-''')
-
-
-def onPageLoad():
-    ss.session["options_value"] = ""

pages/002 Form Component/demo_selectbox.py

@@ -1,78 +0,0 @@
-### Selectbox
-import simplestart as ss
-
-ss.md("## ss.selectbox")
-
-ss.space()
-ss.md('''
-#### 🔅 Example 1
-Create a selectbox with a title and 3 options on the page.
-''')
-ss.space()
-
-options = ["option1","option2", "option3"]
-
-def selchange(event):
-    ss.message(f"You select {event.value}, index of {event.index}")
-
-select1 = ss.selectbox(options, index=0, title = "### Please select", onchange = selchange)
-
-
-
-ss.write("#### 🔎 Code")
-
-ss.md("""
-```python
-import simplestart as ss
-
-options = ["option1","option2", "option3"]
-
-def selchange(event):
-    ss.session["select_value"] = event.value
-    ss.session["select_index"] = select1.index
-
-ss.write("info value:  index:")
-select1 = ss.selectbox(options, value="option1", onchange = selchange)
-
-
-```
-""")
-
-ss.md('''
-#### 🔅 Example 2
-Get the current option of the selectbox. In addition to obtaining the user's selected option information through the event's index and value in the selectbox's onchange event, you can also get the user's selection information via the selectbox variable.
-''')
-ss.space()
-
-def onclick1():
-    ss.message(select1.value)
-    
-ss.button("Current Option Value", onclick=onclick1)
-
-def onclick2():
-    ss.message(select1.index)
-    
-ss.button("Current Option Index", onclick=onclick2)
-
-ss.space()
-
-ss.write("#### 🔎 Code Snippet")
-
-
-ss.md("""
-```python
-
-#...
-
-def onclick1():
-    ss.message(select1.value)
-    
-ss.button("Current Option Value", onclick = onclick1)
-
-def onclick2():
-    ss.message(select1.index)
-    
-ss.button("Current Option Index", onclick = onclick2)
-
-```
-""")

pages/002 Form Component/demo_slider.py

@@ -1,35 +0,0 @@
-### Slider
-import simplestart as ss
-
-ss.md("## ss.slider")
-
-ss.space()
-
-ss.md('''
-#### 🔅 Example 
-''')
-
-ss.md("### Please drag the slider to change the value")
-
-info = ss.text("number")
-
-def onchange(event):
-    info.text = event.value
-
-ss.slider("<b>my slider</b>", value=500, min=0, max=1000, onchange=onchange, style="width:50%")
-
-ss.space()
-
-ss.write("#### 🔎 Code")
-
-ss.md('''
-```python
-import simplestart as ss
-
-info = ss.text("number")
-
-def onchange(state, value):
-    info.text = value
-
-ss.slider(500, 0, 1000, onchange=onchange)
-''')

pages/002 Form Component/demo_textarea.py

@@ -1,45 +0,0 @@
-### Textarea
-import streamsync as ss
-
-ss.md("## ss.textarea")
-
-ss.space()
-ss.md("#### 🔅 Example")
-
-ss.md("---")
-
-# Basic usage
-# test = ss.text_input("hello, world", type="textarea")
-mytext = ss.textarea("hello, world")
-
-ss.write("---")
-ss.write("#### 🔎 Code")
-
-ss.md('''
-```python
-import simplestart as ss
-
-mytext = ss.textarea("hello, world")
-
-''')
-
-ss.space()
-ss.md("#### 🔅 Get the text value of the textarea")
-ss.md("---")
-
-def myclick():
-    ss.message(mytext.value)
-    
-ss.button("Get Text", onclick=myclick)
-
-ss.write("---")
-ss.write("#### 🔎 Code Snippet")
-
-ss.md('''
-```python
-#...
-def myclick():
-    ss.message(mytext.value)
-    
-ss.button("Get Text", onclick=myclick)
-''')

pages/002 Form Component/demo_textinput.py

@@ -1,65 +0,0 @@
-### Text_input
-import streamsync as ss
-
-
-ss.md("## ss.text_input")
-
-ss.space()
-ss.md("#### 🔅 Example")
-
-ss.md("---")
-ss.space()
-
-def onchange(state, value):
-    ss.message(f"onchange, {value}")
-
-def onclear(state, value):
-    ss.message("onclear event happend")
-
-def onblur(state, value):
-    print("onblur")
-    ss.message(f"onblur, {value}")
-    
-def testme():
-    ss.message(myinput.value)
-    
-#ui
-cols = ss.columns([50,50], border = True)
-with cols[0]:
-    myinput = ss.text_input("Hello SimpleStart", clearable=True)
-
-
-def myevent(event):
-    if event.tag == "sel1":
-        myinput.variant = event.value
-    elif event.tag == "sel2":
-        myinput.type = event.value
-    elif event.tag == "but1":
-        ss.message(myinput.value)
-    
-
-with cols[1]:
-    ss.selectbox(["filled","outlined","underlined", "solo", "solo-filled", "solo-inverted"], label='#### <span style = "color:green">Change the input style</span>', \
-                value="solo", onchange = myevent, eventTag="sel1")
-    
-    ss.selectbox(["text","time", "date", "week", "month", "password",  "color"], label='#### <span style = "color:green">Change the input type</span>', \
-                onchange = myevent, eventTag="sel2")
- 
-    ss.write('#### <span style="color:green">Get Input Value</span>')
-    ss.button("Get Text Value", onclick=myevent, eventTag="but1")
-
-
-
-ss.write("---")
-ss.write("#### 🔎 Code")
-
-ss.md('''
-```python
-import simplestart as ss
-
-myinput = ss.text_input("Hello SimpleStart", clearable=True)
-
-#Or
-#ss.text_input("hello", type="text", variant = "filled")
-
-''')

pages/002 Form Component/demo_upload.py

@@ -1,40 +0,0 @@
-### File Upload
-import streamsync as ss
-import pandas as pd
-
-ss.md("## ss.upload File Upload")
-
-
-ss.space()
-ss.md("#### 🔅 Example - Upload Image")
-ss.space()
-
-
-def onsucess(event):
-    filename = event.value
-    path = f'{ss.baseinfo["package_path"]}/uploads/{filename}'
-    myimage.image = path
-    
-ss.upload("Upload Image ...", accept="image/png, image/jpeg, image/bmp", icon="mdi-camera", onsucess = onsucess)
-
-myimage = ss.image()
-
-ss.space()
-ss.write("---")
-ss.write("#### 🔎 Code")
-
-ss.md('''
-```python
-import simplestart as ss
-
-def onsucess(event):
-    filename = event.value
-    path = f'{ss.baseinfo["package_path"]}/uploads/{filename}'
-
-    myimage.image = path
-    
-ss.upload(label = "Upload Image ...", accept="image/png, image/jpeg, image/bmp", icon="mdi-camera", onsucess = onsucess)
-
-myimage = ss.image()
-
-''')

pages/003 Content Display/demo_audio.py

@@ -1,39 +0,0 @@
-### Audio Playback
-import streamsync as ss
-
-ss.md("## ss.audio")
-
-
-ss.space()
-ss.md('''
-#### 🔅 Example
-''')
-
-ss.space()
-
-audiosrc = "media/test.wav"
-player = ss.audio(audiosrc)
-
-
-ss.space("mt-8")
-
-ss.write('''
----
-#### 🔎 Code
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-audiosrc = "media/davide_quatela--breathing_barcelona.mp3"
-player = ss.audio(audiosrc)
-```
-''')
-
-
-ss.md('''
-::: tip
-ss.audio supports audio formats including wav, mp3, etc.
-:::
-''')

pages/003 Content Display/demo_html.py

@@ -1,49 +0,0 @@
-### Html Hypertext
-import streamsync as ss
-
-
-ss.md("## ss.html")
-
-ss.space("")
-
-ss.md('''
-#### 🔅 Example
-''')
-
-
-ss.md("### html")
-
-ss.html(f"""
-    <p>This is a piece of rich text content, which contains <strong>bold</strong> and <em>italic</em> text.</p>
-    <style>
-    .testclass{{
-        color:red;
-        font-weight:bold;
-    }}
-    </style>
-    <div class="testclass">this is red</div>
-""")
-
-ss.space("mt-8")
-
-ss.write('''
----
-#### 🔎 Code
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-ss.html(f"""
-    <p>This is a piece of rich text content, which contains <strong>bold</strong> and <em>italic</em> text.</p>
-    <style>
-    .testclass{{
-        color:red;
-        font-weight:bold;
-    }}
-    </style>
-    <div class="testclass">this is red</div>
-""")
-```
-''')

pages/003 Content Display/demo_image.py

@@ -1,92 +0,0 @@
-### Image
-import simplestart as ss
-
-import cv2
-from PIL import Image
-import os
-
-ss.md("## ss.image")
-
-ss.md('''
-#### 🔅 Example
-''')
-
-ss.space()
-
-style = "width:200px;height:200px;margin:10px"
-img = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
-
-cols = ss.columns([60,"flex:40"], border=True)
-with cols[0]:
-    mytext = ss.text("This is image")
-    ss.space()
-    myimg = ss.image(img, style=style, fit="contain")
-    ss.text("Image fit mode: fill")
-    
-def onradiochange(event):
-    #ss.message(event.value)
-    ss.session["fit_str"] = event.value
-    ss.getcm().components[myimg.id]["content"]["options"]["fit"] = event.value
-    myimg.update()
-
-def onradiochange2(event):
-    value = event.value
-    index = event.index
-
-
-    source = ["Http", "PIL", "OpenCV", "Local"]
-    ss.session["source_str"] = source[index]
-
-    
-    if index == 0:
-        img = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
-        ss.session["image_path"] = "\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\""
-        myimg.image = img
-    if index == 1:
-        image = Image.open('./media/image/dalao.jpeg')
-        ss.session["image_path"] = "Image.open('./media/image/dalao.jpeg')"
-        myimg.image = image
-    if index == 2:
-        img = cv2.imread('./media/image/cat.jpeg',cv2.IMREAD_COLOR)
-        ss.session["image_path"] = "cv2.imread('./media/image/cat.jpeg',cv2.IMREAD_COLOR)"
-        myimg.image = img  
-    if index == 3:
-        file_path = './media/image/dog.jpeg'
-        ss.session["image_path"] = "'./media/image/dog.jpeg'"
-        myimg.image = file_path
-        
-    myimg.update()
-
-    
-with cols[1]:
-    ss.text("image fit mode")
-    ss.radio(["fill", "contain", "cover", "none", "scale-down"], index = 1, inline = True, onchange=onradiochange)
-    ss.space()
-    ss.text("image source")
-    ss.radio(["Http image","PIL image", "OpenCV image", "Local image"], index = 0, inline = True, onchange=onradiochange2)
-    
-ss.space()
-
-ss.write('''
-#### 🔎 Code
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-import cv2
-from PIL import Image
-
-style = "width:100px; height:100px; margin:10px"
-img = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
-ss.image(img, style=style, fit="fill")
-```
-''')
-
-
-
-def onPageLoad():
-    ss.session["info"] = "x"
-    ss.session["fit_str"] = "fill"
-    ss.session["source_str"] = "Http"
-    ss.session["image_path"] = "\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\""

pages/003 Content Display/demo_markdown.py

@@ -1,57 +0,0 @@
-### Markdown
-import simplestart as ss
-
-ss.md("## ss.markdown")
-
-ss.space()
-
-ss.md('''
-#### 🔅 Example 
-''')
-
-ss.space()
-
-ss.markdown("- 19^th^")
-ss.markdown("# Heading 1")
-ss.markdown("## Heading 2")
-ss.markdown("### Heading 3")
-
-#Horizontal Divider
-ss.markdown("---")
-
-ss.markdown('''
-- list item1
-- list item2
-- list item3
-''')
-
-ss.markdown(":smile:")
-
-
-
-ss.space("mt-8")
-
-ss.write('''
----
-#### 🔎 Code
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-ss.markdown("# Heading 1")
-ss.markdown("## Heading 2")
-ss.markdown("### Heading 3")
-
-#Horizontal Divider
-ss.markdown("---")
-
-ss.markdown(\'''
-- list item1
-- list item2
-- list item3
-\''')
-
-```
-''')

pages/003 Content Display/demo_message.py

@@ -1,37 +0,0 @@
-### Message
-import simplestart as ss
-
-ss.md("## ss.message Popup Message")
-
-ss.space()
-
-
-ss.md('''
-#### 🔅 Example 
-''')
-ss.space()
-
-
-def showmsg():
-    ss.message("Hello, world")
-
-showmsg()
-ss.button("message", onclick=showmsg)
-
-
-ss.space("mt-8")
-
-ss.write('''
----
-#### 🔎 Code
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-def showmsg():
-    ss.message("Hello, the world")
-
-```
-''')

pages/003 Content Display/demo_sqlite.py

@@ -1,39 +0,0 @@
-### Sqlite Database
-import simplestart as ss
-
-ss.md("## ss.sqlite Database")
-
-ss.space()
-ss.md('''
-Provides simple operations for the SQLite database.
-''')
-
-ss.space()
-ss.md('''
-#### 🔅 Example
-''')
-
-ss.md('''
-::: tip
-This example reads the Iris dataset from the SQLite database and displays it in a CSV table format.
-For SQLite management, simplestart offers a built-in tool for simple create, read, update, and delete operations.
-:::
-''')
-
-sql = ss.sqlite("./data/ss_data.db")
-df = sql.pd_query("select * from iris")
-
-mytable = ss.table(df, editable = True)###, handlers={"current-change":current_change, "selection-change":selection_change})
-
-ss.space()
-ss.write("#### Code")
-
-ss.md('''
-```python
-import simplestart as ss
-
-sql = ss.sqlite("./data/ss_data.db")
-data = sql.pd_query("select * from HousingData")
-ss.write(data)
-```
-''')

pages/003 Content Display/demo_table.py

@@ -1,249 +0,0 @@
-### Table
-import simplestart as ss
-import pandas as pd
-
-ss.md("## ss.table Table Data")
-
-ss.md("Display data in table format.")
-
-ss.space()
-
-ss.md('''
-#### 🔅 Example
-''') 
-
-def onchange_index(event):
-    value = event.value
-
-    if value == True:
-        ss.getcm().components[mytable.id]["content"]["index"] = True
-        ss.session["showIndex"] = ', index = True'
-    else:
-        ss.getcm().components[mytable.id]["content"]["index"] = False
-        ss.session["showIndex"] = ''
-    mytable.update()
-    
-def onchange_border(event):
-    value = event.value
-
-    if value == True:
-        ss.getcm().components[mytable.id]["content"]["border"] = True
-        ss.session["showBorder"] = ', border = True'
-    else:
-        ss.getcm().components[mytable.id]["content"]["border"] = False
-        ss.session["showBorder"] = ''
-    mytable.update()
-
-
-def onchange_sortable(event):
-    value = event.value
-
-    if value == True:
-        ss.getcm().components[mytable.id]["content"]["sortable"] = True
-        ss.session["sortable"] = ', sortable = True'
-    else:
-        ss.getcm().components[mytable.id]["content"]["sortable"] = False
-        ss.session["sortable"] = ''
-    mytable.update()
-    
-def onchange_searchable(event):
-    value = event.value
-
-    if value == True:
-        ss.getcm().components[mytable.id]["content"]["searchable"] = True
-        ss.session["searchable"] = ', searchable = True'
-    else:
-        ss.getcm().components[mytable.id]["content"]["searchable"] = False
-        ss.session["searchable"] = ''
-    mytable.update()
-
-
-def onchange_selectable(event):
-    value = event.value
-
-    if value == True:
-        ss.getcm().components[mytable.id]["content"]["selectable"] = True
-        ss.session["selectable"] = ', selectable = True'
-    else:
-        ss.getcm().components[mytable.id]["content"]["selectable"] = False
-        ss.session["selectable"] = ''  
-    mytable.update()
-    
-def onchange_editable(event):
-    value = event.value
-
-    if value == True:
-        ss.getcm().components[mytable.id]["content"]["editable"] = True
-        ss.session["editable"] = ', editable = True'
-    else:
-        ss.getcm().components[mytable.id]["content"]["editable"] = False
-        ss.session["editable"] = ''  
-    mytable.update()
-
-     
-def current_change(state, value):
-    ss.session["row_selected"] = value["index"]
-    
-def selection_change(state, value):
-    ss.session["selection_change"] = value["selected"]
-        
-        
-# Create a dataset with three columns
-data = {'name': ['👧🏻 Alice', '👦🏻 Bob', '👦🏻 Charlie'],
-        'age': [25, 30, 35],
-        'city': ['New York', 'San Francisco', 'Los Angeles'],
-        'health':[90,80,90]
-       }
-
-df = pd.DataFrame(data)
-
-def rowclicked(event):
-    #ss.message("row clicked")
-    #ss.write("event", event)
-    ss.session["itemname"] = event.value["name"]
-    
-
-cols = ss.columns([70,"flex:30; border-left:1px solid lightgray"], design=True, style="border:1px solid lightgray")
-with cols[0]:
-    mytable = ss.table(df, handlers={"click:row": rowclicked})
-    ss.md("#### Events")
-    ss.write("Row clicked: @itemname")
-
-
-with cols[1]:
-    ss.text("setting")    
-    ss.checkbox("Index", onchange = onchange_index) 
-    ss.space()
-    ss.checkbox("Border", onchange = onchange_border) 
-    ss.space()
-    ss.checkbox("Sort", onchange = onchange_sortable)
-    ss.space()
-    ss.checkbox("Select", onchange = onchange_selectable)
-    ss.space()
-    ss.checkbox("Search", onchange = onchange_searchable)
-    ss.space()
-    ss.checkbox("Edit", onchange = onchange_editable)
-    
-ss.space("mt-8")
-
-ss.write('''
----
-#### 🔎 Code
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-def current_change(state, value):
-    ss.session["row_selected"] = value["index"]
-    
-def selection_change(state, value):
-    ss.session["selection_change"] = value["selected"]
-
-data = {'name': ['Alice', 'Bob', 'Charlie'],
-        'age': [25, 30, 35],
-        'city': ['New York', 'San Francisco', 'Los Angeles']}
-df = pd.DataFrame(data)
-
-ss.table(df, handlers={\"current-change\":current_change, \"selection-change\":selection_change})
-ss.md(\"#### Events\")
-ss.write(\"Row selected: \")
-ss.write(\"Selection changed: \")
-    
-def onPageLoad():
-    ss.session["row_selected"] = ''
-    ss.session["selection_change"] = ''
-    
-```
-''')
-
-
-ss.md('''
----
-#### 🔅 Example - Custom column.
-''')
-
-
-data = {'name': ['👧🏻 Alice', '👦🏻 Bob', '👦🏻 Charlie'],
-        'age': [25, 30, 35],
-        'city': [':sunny: New York', ':cloud: San Francisco', ':sunny: Los Angeles'],
-        'health':[90,80,90]
-       }
-
-df = pd.DataFrame(data)
-
-cols = ss.columns([70,"flex:30; border-left:1px solid lightgray"], design=True, style="border:1px solid lightgray")
-
-
-vuecode = '''
-<template>
-<v-clip>123</v-clip>
-</template>
-'''
-
-vuecode = "../components/mycell.vue"
-
-#mytable_ex = ss.table(df, custom_columns = ["city"], custom_columns_template = vuestr)
-with cols[0]:
-    mytable_ex = ss.table(df, custom_columns = ["city"], vue_columns = ["health"], vue_code = vuecode)
-with cols[1]:
-    ss.write("Each column can be customized for display.")
-    
-ss.space("mt-8")
-
-ss.write('''
----
-#### 🔎 代码
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-data = {'name': ['👧🏻 Alice', '👦🏻 Bob', '👦🏻 Charlie'],
-        'age': [25, 30, 35],
-        'city': [':sunny: New York', ':cloud: San Francisco', ':sunny: Los Angeles'],
-        'health':[90,80,90]
-        }
-df = pd.DataFrame(data)
-
-vuestr = \'''
-<template>
-    <v-row>
-    <v-rating
-      v-model="rating" density="compact" color="orange" half-increments></v-rating>
-    <v-chip variant="text">{{item.value}}</v-chip>
-        </v-row>
-</template>
-
-<script>
-
-module.exports = {
-    props:["item"],
-    
-    data () {
-        return {
-            rating: 3
-        }
-    },
-    methods: {
-        //todo
-    },
-    mounted: function () {
-        this.rating = this.item.value/20
-    },
-}
-</script>
-\'''
-
-ss.table(df, custom_columns = ["city"], vue_columns = ["health"], vue_code = vuecode)
-```
-''')
-
-def onPageLoad():
-    ss.session["show_border"] = ''
-    ss.session["selectable"] = ''
-    ss.session["sortable"] = ''
-    ss.session["row_selected"] = ''
-    ss.session["selection_change"] = ''

pages/003 Content Display/demo_text.py

@@ -1,35 +0,0 @@
-### Text
-import streamsync as ss
-
-ss.md("## ss.text Text")
-ss.md("Supports the style parameter.")
-
-
-ss.space()
-ss.space()
-ss.md('''
-#### 🔅 Example
-''')
-
-ss.md("---")
-
-#Basic usage
-test = ss.text("hello, world")
-
-#Change color
-ss.text("This is a red string", style="color:red")
-
-ss.space()
-ss.write("#### 🔎 Code")
-
-ss.md('''
-```python
-import simplestart as ss
-
-#Basic usage
-test = ss.text("hello, world")
-
-#Change color
-ss.text("This is a red string", style="color:red")
-```
-''')

pages/003 Content Display/demo_video.py

@@ -1,36 +0,0 @@
-### Video Playback
-import streamsync as ss
-
-ss.md("## ss.video Video Playback")
-
-ss.md("Supports playing videos in formats like mp4.")
-
-ss.md('''
-#### 🔅 Example
-''')
-
-src = "https://media.w3.org/2010/05/sintel/trailer.mp4"
-
-player = ss.video(src, style="width:50%")
-
-ss.text("Source: https://media.w3.org/2010/05/sintel/trailer.mp4", style="color:gray")
-
-ss.space("mt-8")
-
-ss.write('''
----
-#### 🔎 Code
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-src = "https://media.w3.org/2010/05/sintel/trailer.mp4"
-
-player = ss.video(src, style="width:100%; max-width:640px")
-    
-#Change video source
-#player.src = "..."
-```
-''')

pages/003 Content Display/demo_write.py

@@ -1,78 +0,0 @@
-### Write
-
-import streamsync as ss
-import pandas as pd
-
-ss.md("## ss.write Output Data")
-
-ss.md("ss.write is similar to print; it can output text, lists, and other types, making testing and output easy.")
-
-ss.space()
-
-ss.md('''
-#### 🔅 Example
-''')
-
-
-ss.md("#### 1. Output Text")
-ss.write("This is a text")
-
-ss.md('''
-```python
-ss.write("This is a text")
-```
-''')
-
-ss.md("#### 2. Output Multiple Variables")
-a = "aaa"
-b = "bbb"
-ss.write(a, ",", b)
-
-ss.md('''
-```python
-a = "aaa"
-b = "bbb"
-ss.write(a, ",", b)
-```
-''')
-
-ss.md("#### 3. Output List")
-data = ["aaa", "bbb", "ccc"]
-ss.write(data)
-
-data = {"aaa":1, "bbb":2, "ccc":3}
-ss.write(data)
-
-ss.md('''
-```python
-data = ["aaa", "bbb", "ccc"]
-ss.write(data)
-
-data = {"aaa":1, "bbb":2, "ccc":3}
-ss.write(data)
-```
-''')
-
-
-ss.md("#### 4. Output Table")
-# 创建数据
-data = {'name': ['Alice', 'Bob', 'Charlie', 'David'],
-        'age': [25, 30, 35, 40],
-        'city': ['New York', 'Paris', 'London', 'Sydney']}
-
-# Convert data to DataFrame format
-df = pd.DataFrame(data)
-ss.write(df)
-
-ss.md('''
-```python
-# Create data
-data = {'name': ['Alice', 'Bob', 'Charlie', 'David'],
-        'age': [25, 30, 35, 40],
-        'city': ['New York', 'Paris', 'London', 'Sydney']}
-
-# Convert data to DataFrame format
-df = pd.DataFrame(data)
-ss.write(df)
-```
-''')

pages/004 Chart Data/demo_bokeh.py

@@ -1,128 +0,0 @@
-import simplestart as ss
-
-from bokeh.plotting import figure
-from bokeh.models import ColumnDataSource
-from bokeh.resources import CDN
-from bokeh.embed import file_html
-from sklearn.datasets import load_iris
-import pandas as pd
-
-# Load the Iris dataset
-iris = load_iris()
-df = pd.DataFrame(data=iris.data, columns=iris.feature_names)
-df['species'] = iris.target
-df['species'] = df['species'].map({0: 'setosa', 1: 'versicolor', 2: 'virginica'})
-
-
-# Create the data source and figure object
-source = ColumnDataSource(data=dict(
-    sepal_length=df['sepal length (cm)'],
-    sepal_width=df['sepal width (cm)'],
-    petal_length=df['petal length (cm)'],
-    petal_width=df['petal width (cm)'],
-    species=df['species']
-))
-
-# Create a Bokeh scatter plot
-p = figure(title="Iris Dataset Scatter Plot", x_axis_label='Sepal Length (cm)', y_axis_label='Sepal Width (cm)',
-           tools="pan,wheel_zoom,box_zoom,reset,hover,save", width=800)
-
-# Set different colors based on species
-colors = {'setosa': 'blue', 'versicolor': 'green', 'virginica': 'red'}
-
-for species, color in colors.items():
-    df_species = df[df['species'] == species]
-    source_species = ColumnDataSource(data=dict(
-        sepal_length=df_species['sepal length (cm)'],
-        sepal_width=df_species['sepal width (cm)']
-    ))
-    p.scatter('sepal_length', 'sepal_width', source=source_species, legend_label=species, color=color,
-              size=10, alpha=0.5)
-
-p.legend.title = 'Species'
-p.legend.location = 'top_left'
-
-# Embed the Bokeh figure into SimpleStart
-html = file_html(p, CDN, "Iris Dataset Scatter Plot")
-
-#ui
-ss.md('''
-## simplestart Chart Demo - Bokeh
-''')
-
-ss.space()
-ss.md('''
-#### 🔅 Example
-An interactive scatter plot of the Iris data using Bokeh
-''')
-
-ss.space()
-ss.htmlview(html, border = False)
-
-ss.space()
-ss.write("#### 🔎 Code")
-
-def viewcode():
-    ss.session["viewcode"] = 1
-
-ss.session["viewcode"] = 0
-ss.button("View Code", size="small", onclick = viewcode)
-
-def conditioner(event):
-    return (ss.session["viewcode"] == 1)
-
-code = '''
-```python
-import simplestart as ss
-
-from bokeh.plotting import figure
-from bokeh.models import ColumnDataSource
-from bokeh.resources import CDN
-from bokeh.embed import file_html
-from sklearn.datasets import load_iris
-import pandas as pd
-
-# Load the Iris dataset
-iris = load_iris()
-df = pd.DataFrame(data=iris.data, columns=iris.feature_names)
-df['species'] = iris.target
-df['species'] = df['species'].map({0: 'setosa', 1: 'versicolor', 2: 'virginica'})
-
-
-# Create the data source and figure object
-source = ColumnDataSource(data=dict(
-    sepal_length=df['sepal length (cm)'],
-    sepal_width=df['sepal width (cm)'],
-    petal_length=df['petal length (cm)'],
-    petal_width=df['petal width (cm)'],
-    species=df['species']
-))
-
-# Create a Bokeh scatter plot
-p = figure(title="Iris Dataset Scatter Plot", x_axis_label='Sepal Length (cm)', y_axis_label='Sepal Width (cm)',
-           tools="pan,wheel_zoom,box_zoom,reset,hover,save", width=800)
-
-# Set different colors based on species
-colors = {'setosa': 'blue', 'versicolor': 'green', 'virginica': 'red'}
-
-for species, color in colors.items():
-    df_species = df[df['species'] == species]
-    source_species = ColumnDataSource(data=dict(
-        sepal_length=df_species['sepal length (cm)'],
-        sepal_width=df_species['sepal width (cm)']
-    ))
-    p.scatter('sepal_length', 'sepal_width', source=source_species, legend_label=species, color=color,
-              size=10, alpha=0.5)
-
-p.legend.title = 'Species'
-p.legend.location = 'top_left'
-
-# Embed the Bokeh figure into SimpleStart
-html = file_html(p, CDN, "Iris Dataset Scatter Plot")
-
-#ui
-ss.htmlview(html, border = False)
-'''
-
-with ss.when(conditioner):
-    ss.md(code)

pages/004 Chart Data/demo_pyplot.py

@@ -1,130 +0,0 @@
-import streamsync as ss
-
-import seaborn as sns
-import matplotlib as mpl
-import matplotlib.pyplot as plt
-
-
-#下载不了，所以加一个参数data_home
-data_home = "./data/seaborn"
-
-ss.md('''
-## ss.pyplot Drawing
-''')
-
-
-ss.space()
-ss.md('''
-#### 🔅 Example
-''')
-
-ss.write("#### 1. Draw a Line Plot")
-
-sns.set_style("whitegrid")
-titanic = sns.load_dataset("titanic", data_home=data_home)
-sns.lineplot(x="age", y="fare", hue="sex", data=titanic)
-plt.show()
-
-fig = plt.gcf()
-ss.pyplot(fig, style="border:1px solid gray; width:600px")
-
-ss.write("#### 2. Draw a Scatter Plot")
-
-sns.set_style("whitegrid")
-tips = sns.load_dataset("tips", data_home=data_home)
-sns.scatterplot(x="total_bill", y="tip", data=tips)
-plt.show()
-
-fig = plt.gcf()
-ss.pyplot(fig, style="border:1px solid gray; width:600px")
-
-ss.write("#### 3. Draw a Bar Plot")
-
-sns.set_style("whitegrid")
-titanic = sns.load_dataset("titanic",data_home=data_home)
-sns.barplot(x="class", y="survived", data=titanic)
-plt.show()
-
-fig = plt.gcf()
-ss.pyplot(fig, style="border:1px solid gray; width:600px")
-
-
-ss.write("#### 4. Draw a Histogram")
-sns.set_style("whitegrid")
-titanic = sns.load_dataset("titanic",data_home=data_home)
-sns.histplot(x="age", data=titanic)
-plt.show()
-
-fig = plt.gcf()
-ss.pyplot(fig, style="border:1px solid gray; width:600px")
-
-
-ss.space()
-
-ss.write("#### 🔎 Code")
-ss.write("---")
-
-def viewcode():
-    ss.session["viewcode"] = 1
-
-ss.button("View Code", size="small", onclick = viewcode)
-
-
-def conditioner(event):
-    return ss.session["viewcode"] == 1
-
-with ss.when(conditioner):
-    ss.md('''
-```python
-import streamsync as ss
-
-import seaborn as sns
-import matplotlib as mpl
-import matplotlib.pyplot as plt
-
-
-data_home = "./data/seaborn"
-
-
-ss.write("#### 1. Draw a Line Plot")
-
-sns.set_style("whitegrid")
-titanic = sns.load_dataset("titanic", data_home=data_home)
-sns.lineplot(x="age", y="fare", hue="sex", data=titanic)
-plt.show()
-
-fig = plt.gcf()
-ss.pyplot(fig, style="border:1px solid gray; width:600px")
-
-ss.write("#### 2. Draw a Scatter Plot")
-
-sns.set_style("whitegrid")
-tips = sns.load_dataset("tips", data_home=data_home)
-sns.scatterplot(x="total_bill", y="tip", data=tips)
-plt.show()
-
-fig = plt.gcf()
-ss.pyplot(fig, style="border:1px solid gray; width:600px")
-
-ss.write("#### 3. Draw a Bar Plot")
-
-sns.set_style("whitegrid")
-titanic = sns.load_dataset("titanic",data_home=data_home)
-sns.barplot(x="class", y="survived", data=titanic)
-plt.show()
-
-fig = plt.gcf()
-ss.pyplot(fig, style="border:1px solid gray; width:600px")
-
-
-ss.write("#### 4. Draw a Histogram")
-sns.set_style("whitegrid")
-titanic = sns.load_dataset("titanic",data_home=data_home)
-sns.histplot(x="age", data=titanic)
-plt.show()
-
-fig = plt.gcf()
-ss.pyplot(fig, style="border:1px solid gray; width:600px")
-```
-    ''')
-    

pages/005 Layout Related/demo_columns.py

@@ -1,100 +0,0 @@
-### Columns Layout
-import streamsync as ss
-
-ss.md("## ss.columns Columns Layout")
-
-ss.space()
-ss.md("#### 🔅 Example")
-
-ss.space()
-
-ss.md("### Average Spacing")
-
-def onchange1(event):
-    #cols_ex1.design = True
-    cols_ex1_id = cols1[0].id 
-
-    if event.value == True:
-        ss.getcm().components[cols_ex1_id]["content"]["options"]["border"] = True
-        ss.session["cols1_design"] = ', border = True'
-    else:
-        ss.getcm().components[cols_ex1_id]["content"]["options"]["border"] = False
-        ss.session["cols1_design"] = ''
-    ss.update_cm(cols_ex1_id)
-      
-ss.checkbox("border", checked = True, onchange = onchange1)
-
-cols1 = ss.columns(2, border=True)
-
-with cols1[0]:
-    ss.text("First of two columns")
-
-with cols1[1]:
-    ss.text("Second of two columns")
-
-
-ss.space()
-ss.write("---")
-ss.write("#### 🔎 Code")
-ss.md('''
-```python
-import simplestart as ss
-
-cols1 = ss.columns(2, border = True)
-
-with cols1[0]:
-    ss.text("First of two columns")
-    
-with cols1[1]:
-    ss.text("Second of two columns")
-```
-''')
-    
-ss.space()
-
-ss.md("### Proportional Spacing")
-
-
-def onchange2(event):
-    #cols_ex1.design = True
-    cols_ex2_id = cols2[0].id 
-
-    if event.value == True:
-        ss.getcm().components[cols_ex2_id]["content"]["options"]["border"] = True
-        ss.session["cols2_design"] = ', border = True'
-    else:
-        ss.getcm().components[cols_ex2_id]["content"]["options"]["border"] = False
-        ss.session["cols2_design"] = ''
-    ss.update_cm(cols_ex2_id)
-        
-
-ss.checkbox("border", checked = True, onchange = onchange2)
-
-cols2 = ss.columns([4,6], border = True)
-
-with cols2[0]:
-    ss.text("First of two columns")
-with cols2[1]:
-    ss.text("Second of two columns")
-
-    
-ss.space()
-ss.write("---")
-ss.write("#### 🔎 Code")
-ss.md('''
-```python
-import simplestart as ss
-
-cols1 = ss.columns([4,6], border = True)
-
-with cols1[0]:
-    ss.text("First of two columns")
-    
-with cols1[1]:
-    ss.text("Second of two columns")
-```
-''')
-
-def onPageLoad():
-    ss.session["cols1_design"] = ''
-    ss.session["cols2_design"] = ''

pages/005 Layout Related/demo_row.py

@@ -1,102 +0,0 @@
-### Row Layout
-
-import streamsync as ss
-
-ss.md("## ss.row Row Layout")
-
-ss.space()
-ss.md("#### 🔅 Example")
-ss.write("Use ss.row to constrain two buttons to display on the same line, while using ss.spacer to adjust the layout of the buttons.")
-
-ss.space()
-
-def onchange1():
-    pass
-    
-
-#ui
-
-style = "background:#d3d3d354; padding:5px;"
-
-ss.space()
-ss.write("#### 1. Normal")
-ss.space()
-with ss.row(style=style):
-    ss.button("button1")
-    ss.button("button2")
-
-ss.space()
-ss.write("#### 2. Center")
-ss.space()
-with ss.row(style=style):
-    ss.spacer()
-    ss.button("button1")
-    ss.button("button2")
-    ss.spacer()
-    
-ss.space()
-ss.write("#### 3. Right align")
-ss.space()
-with ss.row(style=style):
-    ss.spacer()
-    ss.button("button1")
-    ss.button("button2")
-    
-ss.space()
-ss.write("#### 4. Right respectively")
-ss.space()
-with ss.row(style=style):
-    ss.spacer()
-    ss.button("button1")
-    ss.spacer()
-    ss.button("button2")
-    
-    
-ss.space("mt-16")
-ss.write("#### 🔎 Code")
-
-ss.md('''
-```python
-import simplestart as ss
-
-style = "background:#d3d3d354; padding:5px;"
-ss.space()
-ss.write("#### 1. Normal")
-ss.space()
-with ss.row(style=style):
-    ss.button("button1")
-    ss.button("button2")
-
-ss.space()
-ss.write("#### 2. Center")
-ss.space()
-with ss.row(style=style):
-    ss.spacer()
-    ss.button("button1")
-    ss.button("button2")
-    ss.spacer()
-    
-ss.space()
-ss.write("#### 3. Right align")
-ss.space()
-with ss.row(style=style):
-    ss.spacer()
-    ss.button("button1")
-    ss.button("button2")
-    
-ss.space()
-ss.write("#### 4. Right respectively")
-ss.space()
-with ss.row(style=style):
-    ss.spacer()
-    ss.button("button1")
-    ss.spacer()
-    ss.button("button2")
-
-''')
-
-ss.md('''
-::: tip
-  ss.space adds spacing, while ss.spacer is used to fill gaps to modify the layout.
-:::
-''')

pages/005 Layout Related/demo_section.py

@@ -1,81 +0,0 @@
-### Section
-import simplestart as ss
-
-ss.md("## ss.section Container")
-
-ss.md("The section parent container can hold other components and supports the style parameter.")
-
-
-ss.space()
-ss.md('''
-#### 🔅 Example
-''')
-
-#api
-def clear():
-    section.empty()
-    
-def write_something():
-    section.text("Hello, I am inside section 2")
-
-#ui
-with ss.section("Section1", shadow = 10, border = True, rounded=True, width = "50%", height=300):
-    ss.text("This is inside the section 1")
-    
-
-ss.space()    
-
-section = ss.section()
-section.text("This is inside the section 2")
-
-ss.space("mt-4 mb-4")   
-ss.text("outside the section")
-
-
-ss.md("---")
-
-ss.button("clear", onclick=clear)
-
-ss.button("add something", onclick=write_something)
-
-ss.space()
-
-ss.write("#### 🔎 Code")
-
-ss.md("""
-```python
-import simplestart as ss
-
-#api
-def clear():
-    section.empty()
-    
-def write_something():
-    section.text("Hello, I am inside section 2")
-
-#ui
-with ss.section(title = "Section1", shadow = 10, border = True, rounded=True, width = "50%", height=300):
-    ss.text("This is inside the section 1")
-    
-
-ss.space()    
-
-section = ss.section()
-section.text("This is inside the section 2")
-
-ss.space()   
-ss.text("outside the section")
-
-ss.md("---")
-
-ss.button("clear", onclick=clear)
-ss.button("add something", onclick=write_something)
-
-```
-""")
-
-ss.md('''
-::: tip
-  In addition to adding components using the with syntax, you can also directly add components within the container using section.text(), section.button(), etc.
-:::
-''')

pages/005 Layout Related/demo_sidebar.py

@@ -1,53 +0,0 @@
-### Sidebar
-import simplestart as ss
-
-ss.md("## ss.sidebar")
-
-ss.md("Display various components in the sidebar on the left side of the screen, such as data controls and some settings.")
-
-ss.md('''
-#### 🔅 Example
-''')
-
-
-sidebar = ss.sidebar()
-
-with sidebar:
-    ss.button("click")
-    ss.selectbox(["one", "two", "three"])
-        
-
-def testme(state, value):
-    with sidebar:
-        ss.text("text in sidebar")
-
-    
-ss.button("test", onclick = testme)
-
-
-ss.space()
-
-ss.write("#### 🔎 Code")
-
-ss.md('''
-```python
-import simplestart as ss
-
-sidebar = ss.sidebar()
-
-with sidebar:
-    ss.button("click")
-    ss.selectbox(["one", "two", "three"])
-        
-
-def testme(state, value):
-    with sidebar:
-        ss.text("text in sidebar")
-    #or
-    #sidebar.text("text in sidebar")
-
-    
-ss.button("test", onclick = testme)
-
-```
-''')

pages/005 Layout Related/demo_style.py

@@ -1,64 +0,0 @@
-### Style
-import simplestart as ss
-
-ss.md("## ss.style Style Settings")
-
-ss.space()
-ss.md("#### 🔅 Example")
-ss.write("nject CSS styles into the HTML document.")
-
-ss.html('''
-    <div class="test1">this is a sample1</div>
-    <div class="test2">this is a sample2</div>
-''')
-
-
-ss.style('''
-    .test1{
-        background-color:lightgray;
-        padding:5px;
-        width:150px;
-        margin-bottom:10px;
-        border:1px solid lightblue
-    }
-    .test2{
-        color:red;
-        border:1px solid lightgreen;
-        padding:5px;
-        width:150px;
-    }
-''')
-
-ss.space()
-
-ss.write("#### 🔎 Code")
-
-
-ss.space()
-
-
-ss.md('''
-```python
-import simplestart as ss
-
-ss.html(\'''
-    <div class="test1">this is a sample1</div>
-    <div class="test2">this is a sample2</div>
-\''')
-
-ss.style(\'''
-    .test1{
-        background-color:lightgray;
-        padding:5px;
-        width:150px;
-        margin-bottom:10px;
-        border:1px solid lightblue
-    }
-    .test2{
-        color:red;
-        border:1px solid lightgreen;
-        padding:5px;
-        width:150px;
-    }
-\''')
-''')

pages/005 Layout Related/demo_tabs.py

@@ -1,35 +0,0 @@
-### Tabs
-import simplestart as ss
-
-ss.md("## ss.tabs")
-
-ss.space("mt-16")
-ss.md("#### 🔅 Example")
-
-tabtitles = ["tab1", "tab2", "tab3"]
-tabs = ss.tabs(tabtitles)
-
-with tabs[0]:
-    ss.text("this is tab 1")
-with tabs[1]:
-    ss.text("this is tab 2")
-with tabs[2]:
-    ss.text("this is tab 3")
-    
-ss.space()
-ss.write("#### 🔎 Code")
-
-ss.md('''
-```python
-import simplestart as ss
-
-tabtitles = ["tab1", "tab2", "tab3"]
-tabs = ss.tabs(tabtitles)
-
-with tabs[0]:
-    ss.text("this is tab 1")
-with tabs[1]:
-    ss.text("this is tab 2")
-with tabs[2]:
-    ss.text("this is tab 3")
-''')

pages/006 Advanced Usage/demo_component.py

@@ -1,101 +0,0 @@
-### ss.component
-import simplestart as ss
-
-ss.md("### ss.component Custom Component")
-ss.md("You can customize components using HTML, JS, and CSS, implemented through an iframe.")
-
-ss.space()
-ss.md('''
-#### 🔅 Example
-''')
-ss.space()
-
-def testme(state, value):
-    mytext.text = "Data received from the frontend UI: " + value["value"]
-    
-# By default, the <iframe> width is 300 pixels and the height is 150 pixels.
-ss.text("Enter content in the text box and press Enter.")
-
-myplugin = ss.component(path = f"components/index.html", onData = testme) ###style="border:none")
-
-def postdata():
-    data = {"my_input_value":"text from python"}
-    myplugin.postMessage(data)
-
-mytext = ss.text("Data received from the frontend UI: ")
-
-ss.markdown("---")
-ss.space()
-ss.text("Click the button to send data to the frontend UI.")
-ss.button("post data", onclick=postdata)
-
-ss.space()
-
-ss.write("Python Side Code")
-
-ss.md('''
-```python
-import simplestart as ss
-
-def testme(state, value):
-    mytext.text = "Data received from the frontend UI: " + value["value"]
-    
-ss.text("Enter content in the text box and press Enter.")
-myplugin = ss.component(path = f"components/index.html", onData = testme)
-
-def postdata():
-    data = {"my_input_value":"text from python"}
-    myplugin.postMessage(data)
-
-mytext = ss.text("Data received from the frontend UI: ")
-
-ss.markdown("---")
-
-ss.space()
-ss.text("Click the button to send data to the frontend UI.")
-ss.button("post data", onclick=postdata)
-
-```
-''')
-
-ss.write("Plugin/HTML/JS Side Code")
-
-ss.md('''
-```html
-<html>
-    
-<head>
-    <script src="pybridge.js"></script>
-</head>
-    
-<body style="height:100px">
-    <input id="myinput" value="" autocomplete="off" placeholder="Enter content and press Enter" />
-</body>
-    
-<script>
-    var myInput = document.getElementById("myinput");
-
-    myInput.addEventListener("change", function() {
-        //// Send message to the Python side
-        sendDataToPython({
-            value: myInput.value,
-        });
-    })
-    
-    //Receive messages from the Python side
-    window.addEventListener("message", onDataFromPython);
-    
-    function onDataFromPython(event) {
-        var data = event.data.arg;
-        if (event.data.type !== "ss:render") return;
-            myInput.value = data.my_input_value;  // Access values sent from Python here!
-    }
-    
-    // If system height setting fails, you can manually set the height
-    //setFrameHeight(200);
-</script>
-
-</html>
-
-```
-''')

pages/006 Advanced Usage/demo_loadvue.py

@@ -1,131 +0,0 @@
-### ss.loadvue
-import simplestart as ss
-
-ss.md("## ss.loadvue Load Vue SFC")
-
-ss.space()
-ss.md("In SimpleStart, you can load custom Vue Single File Components using ss.loadvue, enabling property and data interaction.")
-
-ss.space()
-
-ss.space()
-ss.md('''
-#### 🔅 Example
-
-In this example, we define a simple frontend component that includes an "ontest" event. When the user clicks the "handle on server" button, 
-the Python side's ontest event handler will process it and receive data passed from the frontend component. Meanwhile, when the "Modify Data" 
-button on the Python side is clicked, the frontend component will respond by changing the displayed content.
-''')
-
-ss.space("mt-8")
-ss.md("---")
-ss.space("mt-8")
-
-tagid = 0
-tags = ["Python", "Java", "Javascript"]
-data = {"count":0, "language":"C++"}
-global myvue
-
-#trigger event on server from client side
-def ontest(event):
-    ss.message(event.value)
-
-#change data in client component on server side
-def changedata(event):
-    global tagid
-    myvue.data["language"] = tags[tagid]
-    myvue.update()
-    
-    tagid = (tagid+1) % 3
-    
-ss.text("Python Side")
-ss.button("Modify Data", onclick=changedata)
-
-ss.space()
-sec = ss.section()
-
-def onPageLoad():
-    global myvue
-    #load code from file
-    with sec:
-        ss.text("Component Side")
-        myvue = ss.loadvue(path = "components/mycomponent.vue", data = data, handlers = {"ontest":ontest})
-    
-    
-ss.space()
-ss.write("Python Side Code")
-
-ss.md('''
-```python
-import simplestart as ss
-
-tagid = 0
-global myvue
-
-tags = ["Python", "Java", "Javascript"]
-data = {"count":0, "language":"C++"}
-
-
-#trigger event on server from client side
-def ontest(state, value):
-    ss.message(value)
-
-#change data in client component on server side
-def changedata(state, value=None):
-    global tagid
-    myvue.data["language"] = tags[tagid]
-    tagid = (tagid+1) % 3
-    
-ss.text("Python Side")
-ss.button("Modify Data", onclick=changedata)
-
-
-def onPageLoad():
-    global myvue
-    #load code from file
-    myvue = ss.loadvue(path = "components/mycomponent.vue", data = data, handlers = {"ontest":ontest})
-```
-''')
-
-
-ss.space()
-ss.write("Vue JS Code")
-
-ss.md('''
-```js
-<template>
-  <div class="my-component">
-    <h1>{{title}}: {{ data.language }}</h1>
-    <v-btn @click="testme">handle on server</v-btn>
-  </div>
-</template>
-
-<script>
-module.exports = {
-    name: 'MyComponent',
-
-    data() {
-        return {
-            title:"computer",
-        }
-    },
-
-    methods: {
-        testme(){
-            this.streamsync.forwardData(this, eventname="ontest", "12345")
-        }
-    }
-}
-</script>
-
-<style>
-.my-component {
-    width:50%;
-    background-color: #f0f0f0;
-    padding: 20px;
-    margin:10px 0;
-}
-</style>
-
-```
-''')

pages/006 Advanced Usage/demo_onload.py

@@ -1,46 +0,0 @@
-### ss.onPageEnter
-import simplestart as ss
-from datetime import datetime
-
-ss.md("## onPageEnter Page Load Event")
-
-ss.md('''
----
-#### 🔅 Example
-''')
-
-ss.md("Every time you enter this page, the onPageEnter event function will be called, and a message will pop up above.")
-
-
-ss.space()
-
-mytext = ss.text("Current Time @currentime")
-
-def onPageEnter():
-    #ss.write("test")
-    ss.message("page enter event") 
-
-
-    # Get current time
-    now = datetime.now()
-    # Format time as a string
-    time_str = now.strftime('%Y-%m-%d %H:%M:%S')    
-    ss.session["currentime"] = time_str
-
-
-ss.space()
-
-ss.write('''
----
-#### 🔎 Code
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-def onPageEnter():
-    ss.message("page enter event")
-
-```
-''')

pages/006 Advanced Usage/demo_session.py

@@ -1,21 +0,0 @@
-### ss.session
-import simplestart as ss
-
-ss.md("## ss.session Session Variables")
-
-ss.space()
-
-
-#in this page
-ss.session["count"] = 100
-
-mytext = ss.text("The couns is @count")
-
-
-def change_count():
-    ss.session.count += 1
-
-ss.button("Add Count", onclick=change_count)
-
-def onPageEnter():
-    ss.session.count = 100

pages/006 Advanced Usage/demo_template.py

@@ -1,158 +0,0 @@
-### ss.template
-
-import simplestart as ss
-
-ss.md("## ss.template Load VUE Template")
-
-ss.space("mt-8")
-ss.md('''
-In SimpleStart, you can define simple Vue components using ss.template to achieve property and data interaction.
-
-#### Function
-ss.template(src, path, data, handlers)
-
-##### Function Description
-
-| Parameter | Description |
-| --- | --- | 
-| src | Component script in string format |
-| path | Path to the original code of the external component file |
-| data | Data used for interaction between frontend components and the Python backend |
-| handlers | Events defined in the frontend component, implemented on the Python side |
-      
-''')
-
-ss.space("mt-8")
-
-    
-template = '''
-  <v-card
-    class="mx-auto text-white"
-    color="#26c6da"
-    max-width="400"
-    prepend-icon="mdi-twitter"
-    title="Twitter"
-  >
-    <template v-slot:prepend>
-      <v-icon size="x-large"></v-icon>
-    </template>
-
-    <v-card-text class="text-h6 py-2">
-      "SimpleStart is a easy way to build webpage and visualize data."
-    </v-card-text>
-
-    <v-card-actions>
-      <v-list-item class="w-100">
-        <template v-slot:prepend>
-          <v-avatar
-            color="grey-darken-3"
-            image="https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairShortCurly&accessoriesType=Prescription02&hairColor=Black&facialHairType=Blank&clotheType=Hoodie&clotheColor=White&eyeType=Default&eyebrowType=DefaultNatural&mouthType=Default&skinColor=Light"
-          ></v-avatar>
-        </template>
-
-        <v-list-item-title>Evan You</v-list-item-title>
-
-        <v-list-item-subtitle>Data Science Engineer</v-list-item-subtitle>
-
-        <template v-slot:append>
-          <div class="justify-self-end">
-            <v-icon class="me-1" icon="mdi-heart" \@click="onserver('myclick')"></v-icon>
-            <span class="subheading me-2">{{data.vote}}</span>
-            <span class="me-1">·</span>
-            <v-icon class="me-1" icon="mdi-share-variant"></v-icon>
-            <span class="subheading">45</span>
-          </div>
-        </template>
-      </v-list-item>
-    </v-card-actions>
-  </v-card>
-'''
-
-def myclick(event):
-    mycard.vote  = mycard.vote + 1
-    
-data = {"vote":256}
-mycard = ss.template(template, data = data, handlers = {"myclick":myclick})
-
-def increment(event):
-    mycard.vote  = mycard.vote + 1
-    #mycard.style = "color:red"
-
-ss.space()
-ss.button("Thumb Up", onclick=increment)
-
-ss.space("mt-8")
-
-ss.write('''
----
-#### Python Side Code
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-template = \'''
-  <v-card
-    class="mx-auto text-white"
-    color="#26c6da"
-    max-width="400"
-    prepend-icon="mdi-twitter"
-    title="Twitter"
-  >
-    <template v-slot:prepend>
-      <v-icon size="x-large"></v-icon>
-    </template>
-
-    <v-card-text class="text-h6 py-2">
-      "SimpleStart is a easy way to build webpage and visualize data."
-    </v-card-text>
-
-    <v-card-actions>
-      <v-list-item class="w-100">
-        <template v-slot:prepend>
-          <v-avatar
-            color="grey-darken-3"
-            image="https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairShortCurly&accessoriesType=Prescription02&hairColor=Black&facialHairType=Blank&clotheType=Hoodie&clotheColor=White&eyeType=Default&eyebrowType=DefaultNatural&mouthType=Default&skinColor=Light"
-          ></v-avatar>
-        </template>
-
-        <v-list-item-title>Evan You</v-list-item-title>
-
-        <v-list-item-subtitle>Data Science Engineer</v-list-item-subtitle>
-
-        <template v-slot:append>
-          <div class="justify-self-end">
-            <v-icon class="me-1" icon="mdi-heart" \@click="onserver('myclick')"></v-icon>
-            <span class="subheading me-2">{{data.vote}}</span>
-            <span class="me-1">·</span>
-            <v-icon class="me-1" icon="mdi-share-variant"></v-icon>
-            <span class="subheading">45</span>
-          </div>
-        </template>
-      </v-list-item>
-    </v-card-actions>
-  </v-card>
-\'''
-
-def myclick(event):
-    mycard.vote  = mycard.vote + 1
-    
-data = {"vote":256}
-mycard = ss.template(template, data = data, handlers = {"myclick":myclick})
-
-def increment(event):
-    mycard.vote  = mycard.vote + 1
-    #mycard.style = "color:red"
-
-ss.space()
-ss.button("Thumb Up", onclick=increment)
-```
-''')
-
-
-ss.space("mt-8")
-
-def onPageEnter():
-    ss.session["counter"] = 0
-    

pages/006 Advanced Usage/demo_when.py

@@ -1,101 +0,0 @@
-### ss.when
-import simplestart as ss
-
-ss.md('''
-## ss.when onditional Statements
-''')
-
-ss.space()
-ss.md('''
-#### 🔅 Example
-''')
-
-#api
-def increment(event):
-    ss.session["counter"] += 1
-    
-def decrement(event):
-    ss.session["counter"] -= 1
-
-    
-#conditional func
-def conditioner(event):
-    #print("event", event)
-    if event["flag"] == 1:
-        if ss.session["counter"] >= 5:
-            return True
-        else:
-            return False
-    elif event["flag"] == 2:
-        return (ss.session["viewcode"] == 1)
-        
-
-# State initialisation
-ss.session["counter"] = 0
-ss.session["viewcode"] = 0
-
-#ui
-ss.text("The count is @counter.")
-
-ss.button("Increment", onclick=increment)
-ss.button("Decrement", onclick=decrement)
-
-ss.write("New content will appear below when the counter is greater than 5.")
-
-with ss.when(conditioner, flag = 1): # Conditional rendering
-    ss.text("Well done on reaching 5 👋🌷🍾")
-    
-ss.write("When the counter is less than 5, the new content will be hidden.")
-
-
-ss.space()
-
-ss.write("#### 🔎 Code")
-ss.write("---")
-
-def viewcode():
-    ss.session["viewcode"] = 1
-
-ss.button("View Code", size="small", onclick = viewcode)
-
-with ss.when(conditioner, flag = 2):
-    ss.md('''
-```python
-import simplestart as ss
-
-#api
-def increment(event):
-    ss.session["counter"] += 1
-    
-def decrement(event):
-    ss.session["counter"] -= 1
-
-    
-#conditional func
-def conditioner(event):
-    return (ss.session["counter"] >= 5)
-        
-# State initialisation
-ss.session["counter"] = 0
-ss.session["viewcode"] = 0
-
-#ui
-ss.text("The count is @counter.")
-
-ss.button("Increment", onclick=increment)
-ss.button("Decrement", onclick=decrement)
-
-ss.write("New content will appear below when the counter is greater than 5.")
-
-with ss.when(conditioner, flag = 1): # Conditional rendering
-    ss.text("Well done on reaching 5 👋🌷🍾")
-    
-ss.write("When the counter is less than 5, the new content will be hidden.")
-```
-    ''')
-
-ss.md('''
-::: tip
-  The code view above is also implemented using ss.when.
-:::
-''')

pages/Advanced_Usage/demo_chat.py

@@ -1,33 +0,0 @@
-'''
-title: ollama chat demo
-'''
-
-import simplestart as ss
-import ollama
-
-ss.md("## ss.chat")
-
-setting = {
-    "ollama_base_url": "http://localhost:11434",
-    "model": "qwen:0.5b",
-    "stream":False
-}
-
-def mychange(event):
-    setting.update({
-        "model":mysel.value, 
-        "stream":mycheck.value,
-    })
-    
-
-with ss.sidebar():
-    ss.md("#### Models and Parameters")
-    ss.space()
-    models = ss.ollama.get_models()
-    
-    mysel = ss.selectbox(models, index = 5, label = "Choose ollama models", onchange = mychange)
-
-    mycheck = ss.checkbox("Streaming Output", onchange = mychange)
-
-
-mychat = ss.ollama.chat(demo = False, setting = setting)

pages/Advanced_Usage/demo_component.py

@@ -1,104 +0,0 @@
-'''
-title: component
-'''
-
-import simplestart as ss
-
-ss.md("### ss.component Custom Component")
-ss.md("You can customize components using HTML, JS, and CSS, implemented through an iframe.")
-
-ss.space()
-ss.md('''
-#### 🔅 Example
-''')
-ss.space()
-
-def testme(state, value):
-    mytext.text = "Data received from the frontend UI: " + value["value"]
-    
-# By default, the <iframe> width is 300 pixels and the height is 150 pixels.
-ss.text("Enter content in the text box and press Enter.")
-
-myplugin = ss.component(path = f"components/index.html", onData = testme) ###style="border:none")
-
-def postdata():
-    data = {"my_input_value":"text from python"}
-    myplugin.postMessage(data)
-
-mytext = ss.text("Data received from the frontend UI: ")
-
-ss.markdown("---")
-ss.space()
-ss.text("Click the button to send data to the frontend UI.")
-ss.button("post data", onclick=postdata)
-
-ss.space()
-
-ss.write("Python Side Code")
-
-ss.md('''
-```python
-import simplestart as ss
-
-def testme(state, value):
-    mytext.text = "Data received from the frontend UI: " + value["value"]
-    
-ss.text("Enter content in the text box and press Enter.")
-myplugin = ss.component(path = f"components/index.html", onData = testme)
-
-def postdata():
-    data = {"my_input_value":"text from python"}
-    myplugin.postMessage(data)
-
-mytext = ss.text("Data received from the frontend UI: ")
-
-ss.markdown("---")
-
-ss.space()
-ss.text("Click the button to send data to the frontend UI.")
-ss.button("post data", onclick=postdata)
-
-```
-''')
-
-ss.write("Plugin/HTML/JS Side Code")
-
-ss.md('''
-```html
-<html>
-    
-<head>
-    <script src="pybridge.js"></script>
-</head>
-    
-<body style="height:100px">
-    <input id="myinput" value="" autocomplete="off" placeholder="Enter content and press Enter" />
-</body>
-    
-<script>
-    var myInput = document.getElementById("myinput");
-
-    myInput.addEventListener("change", function() {
-        //// Send message to the Python side
-        sendDataToPython({
-            value: myInput.value,
-        });
-    })
-    
-    //Receive messages from the Python side
-    window.addEventListener("message", onDataFromPython);
-    
-    function onDataFromPython(event) {
-        var data = event.data.arg;
-        if (event.data.type !== "ss:render") return;
-            myInput.value = data.my_input_value;  // Access values sent from Python here!
-    }
-    
-    // If system height setting fails, you can manually set the height
-    //setFrameHeight(200);
-</script>
-
-</html>
-
-```
-''')

pages/Advanced_Usage/demo_loadvue.py

@@ -1,134 +0,0 @@
-'''
-title: loadvue
-'''
-
-import simplestart as ss
-
-ss.md("## ss.loadvue Load Vue SFC")
-
-ss.space()
-ss.md("In SimpleStart, you can load custom Vue Single File Components using ss.loadvue, enabling property and data interaction.")
-
-ss.space()
-
-ss.space()
-ss.md('''
-#### 🔅 Example
-
-In this example, we define a simple frontend component that includes an "ontest" event. When the user clicks the "handle on server" button, 
-the Python side's ontest event handler will process it and receive data passed from the frontend component. Meanwhile, when the "Modify Data" 
-button on the Python side is clicked, the frontend component will respond by changing the displayed content.
-''')
-
-ss.space("mt-8")
-ss.md("---")
-ss.space("mt-8")
-
-tagid = 0
-tags = ["Python", "Java", "Javascript"]
-data = {"count":0, "language":"C++"}
-global myvue
-
-#trigger event on server from client side
-def ontest(event):
-    ss.message(event.value)
-
-#change data in client component on server side
-def changedata(event):
-    global tagid
-    myvue.data["language"] = tags[tagid]
-    myvue.update()
-    
-    tagid = (tagid+1) % 3
-    
-ss.text("Python Side")
-ss.button("Modify Data", onclick=changedata)
-
-ss.space()
-sec = ss.section()
-
-def onPageLoad():
-    global myvue
-    #load code from file
-    with sec:
-        ss.text("Component Side")
-        myvue = ss.loadvue(path = "components/mycomponent.vue", data = data, handlers = {"ontest":ontest})
-    
-    
-ss.space()
-ss.write("Python Side Code")
-
-ss.md('''
-```python
-import simplestart as ss
-
-tagid = 0
-global myvue
-
-tags = ["Python", "Java", "Javascript"]
-data = {"count":0, "language":"C++"}
-
-
-#trigger event on server from client side
-def ontest(state, value):
-    ss.message(value)
-
-#change data in client component on server side
-def changedata(state, value=None):
-    global tagid
-    myvue.data["language"] = tags[tagid]
-    tagid = (tagid+1) % 3
-    
-ss.text("Python Side")
-ss.button("Modify Data", onclick=changedata)
-
-
-def onPageLoad():
-    global myvue
-    #load code from file
-    myvue = ss.loadvue(path = "components/mycomponent.vue", data = data, handlers = {"ontest":ontest})
-```
-''')
-
-
-ss.space()
-ss.write("Vue JS Code")
-
-ss.md('''
-```js
-<template>
-  <div class="my-component">
-    <h1>{{title}}: {{ data.language }}</h1>
-    <v-btn @click="testme">handle on server</v-btn>
-  </div>
-</template>
-
-<script>
-module.exports = {
-    name: 'MyComponent',
-
-    data() {
-        return {
-            title:"computer",
-        }
-    },
-
-    methods: {
-        testme(){
-            this.streamsync.forwardData(this, eventname="ontest", "12345")
-        }
-    }
-}
-</script>
-
-<style>
-.my-component {
-    width:50%;
-    background-color: #f0f0f0;
-    padding: 20px;
-    margin:10px 0;
-}
-</style>
-
-```
-''')

pages/Advanced_Usage/demo_onload.py

@@ -1,49 +0,0 @@
-'''
-title: onPageEnter
-'''
-
-import simplestart as ss
-from datetime import datetime
-
-ss.md("## onPageEnter Page Load Event")
-
-ss.md('''
----
-#### 🔅 Example
-''')
-
-ss.md("Every time you enter this page, the onPageEnter event function will be called, and a message will pop up above.")
-
-
-ss.space()
-
-mytext = ss.text("Current Time @currentime")
-
-def onPageEnter():
-    #ss.write("test")
-    ss.message("page enter event") 
-
-
-    # Get current time
-    now = datetime.now()
-    # Format time as a string
-    time_str = now.strftime('%Y-%m-%d %H:%M:%S')    
-    ss.session["currentime"] = time_str
-
-
-ss.space()
-
-ss.write('''
----
-#### 🔎 Code
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-def onPageEnter():
-    ss.message("page enter event")
-
-```
-''')

pages/Advanced_Usage/demo_session.py

@@ -1,134 +0,0 @@
-'''
-title: session
-'''
-
-import simplestart as ss
-
-ss.md("## ss.session - reactive session variables")
-ss.md("By modifying the session variable, the view can be automatically re-rendered")
-
-ss.space()
-
-ss.md('''
----
-#### 🔅 Example 1 - Basic
-''')
-
-
-#in this page
-ss.session["count"] = 100
-
-mytext = ss.text("The couns is @count")
-
-
-def change_count():
-    ss.session.count += 1
-
-ss.button("Add Count", onclick=change_count)
-
-ss.write('''
----
-#### 🔎 Code
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-ss.session["count"] = 100
-
-mytext = ss.text("The couns is @count")
-
-
-def change_count():
-    ss.session.count += 1
-
-ss.button("Add Count", onclick=change_count)
-
-```
-''')
-
-ss.space()
-
-ss.md('''
----
-#### 🔅 Example 2 - Dict
-''')
-
-student = {
-    "name":"Sam",
-    "age":18,
-    "gender":"Male",
-    "favorite": "Sport, movie"
-}
-
-ss.session.data = student
-
-ss.markdown('''
-### Student Info
-**Name:** @data.name
-**Age:** @data.age
-**Gender:** @data.gender
-**Favorite:** @data.favorite
-''')
-
-def change_student(event):
-    student = {
-        "name":"Jane",
-        "age":17,
-        "gender":"Female",
-        "favorite": "Music, painting"
-    }
-    ss.session.data = student
-    
-def change_info(event):
-    ss.session.data["name"] = "Sally"
-    
-ss.button("Change Student", onclick = change_student)
-ss.button("Change Info", onclick = change_info)
-
-ss.write('''
----
-#### 🔎 Code
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-student = {
-    "name":"Sam",
-    "age":18,
-    "gender":"Male",
-    "favorite": "Sport, movie"
-}
-
-ss.session.data = student
-
-ss.markdown(\'''
-### Student Info
-**Name:** \@data.name
-**Age:** \@data.age
-**Gender:** \@data.gender
-**Favorite:** \@data.favorite
-\''')
-
-def change_student(event):
-    student = {
-        "name":"Jane",
-        "age":17,
-        "gender":"Female",
-        "image":"",
-        "favorite": "Music, painting"
-    }
-    ss.session.data = student
-    
-def change_info(event):
-    ss.session.data["name"] = "Sally"
-    
-ss.button("Change Student", onclick = change_student)
-ss.button("Change Info", onclick = change_info)
-
-```
-''')
-

pages/Advanced_Usage/demo_template.py

@@ -1,160 +0,0 @@
-'''
-title: template
-'''
-
-import simplestart as ss
-
-ss.md("## ss.template Load VUE Template")
-
-ss.space("mt-8")
-ss.md('''
-In SimpleStart, you can define simple Vue components using ss.template to achieve property and data interaction.
-
-#### Function
-ss.template(src, path, data, handlers)
-
-##### Function Description
-
-| Parameter | Description |
-| --- | --- | 
-| src | Component script in string format |
-| path | Path to the original code of the external component file |
-| data | Data used for interaction between frontend components and the Python backend |
-| handlers | Events defined in the frontend component, implemented on the Python side |
-      
-''')
-
-ss.space("mt-8")
-
-    
-template = '''
-  <v-card
-    class="mx-auto text-white"
-    color="#26c6da"
-    max-width="400"
-    prepend-icon="mdi-twitter"
-    title="Twitter"
-  >
-    <template v-slot:prepend>
-      <v-icon size="x-large"></v-icon>
-    </template>
-
-    <v-card-text class="text-h6 py-2">
-      "SimpleStart is a easy way to build webpage and visualize data."
-    </v-card-text>
-
-    <v-card-actions>
-      <v-list-item class="w-100">
-        <template v-slot:prepend>
-          <v-avatar
-            color="grey-darken-3"
-            image="https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairShortCurly&accessoriesType=Prescription02&hairColor=Black&facialHairType=Blank&clotheType=Hoodie&clotheColor=White&eyeType=Default&eyebrowType=DefaultNatural&mouthType=Default&skinColor=Light"
-          ></v-avatar>
-        </template>
-
-        <v-list-item-title>Evan You</v-list-item-title>
-
-        <v-list-item-subtitle>Data Science Engineer</v-list-item-subtitle>
-
-        <template v-slot:append>
-          <div class="justify-self-end">
-            <v-icon class="me-1" icon="mdi-heart" \@click="onserver('myclick')"></v-icon>
-            <span class="subheading me-2">{{data.vote}}</span>
-            <span class="me-1">·</span>
-            <v-icon class="me-1" icon="mdi-share-variant"></v-icon>
-            <span class="subheading">45</span>
-          </div>
-        </template>
-      </v-list-item>
-    </v-card-actions>
-  </v-card>
-'''
-
-def myclick(event):
-    mycard.vote  = mycard.vote + 1
-    
-data = {"vote":256}
-mycard = ss.template(template, data = data, handlers = {"myclick":myclick})
-
-def increment(event):
-    mycard.vote  = mycard.vote + 1
-    #mycard.style = "color:red"
-
-ss.space()
-ss.button("Thumb Up", onclick=increment)
-
-ss.space("mt-8")
-
-ss.write('''
----
-#### Python Side Code
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-template = \'''
-  <v-card
-    class="mx-auto text-white"
-    color="#26c6da"
-    max-width="400"
-    prepend-icon="mdi-twitter"
-    title="Twitter"
-  >
-    <template v-slot:prepend>
-      <v-icon size="x-large"></v-icon>
-    </template>
-
-    <v-card-text class="text-h6 py-2">
-      "SimpleStart is a easy way to build webpage and visualize data."
-    </v-card-text>
-
-    <v-card-actions>
-      <v-list-item class="w-100">
-        <template v-slot:prepend>
-          <v-avatar
-            color="grey-darken-3"
-            image="https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairShortCurly&accessoriesType=Prescription02&hairColor=Black&facialHairType=Blank&clotheType=Hoodie&clotheColor=White&eyeType=Default&eyebrowType=DefaultNatural&mouthType=Default&skinColor=Light"
-          ></v-avatar>
-        </template>
-
-        <v-list-item-title>Evan You</v-list-item-title>
-
-        <v-list-item-subtitle>Data Science Engineer</v-list-item-subtitle>
-
-        <template v-slot:append>
-          <div class="justify-self-end">
-            <v-icon class="me-1" icon="mdi-heart" \@click="onserver('myclick')"></v-icon>
-            <span class="subheading me-2">{{data.vote}}</span>
-            <span class="me-1">·</span>
-            <v-icon class="me-1" icon="mdi-share-variant"></v-icon>
-            <span class="subheading">45</span>
-          </div>
-        </template>
-      </v-list-item>
-    </v-card-actions>
-  </v-card>
-\'''
-
-def myclick(event):
-    mycard.vote  = mycard.vote + 1
-    
-data = {"vote":256}
-mycard = ss.template(template, data = data, handlers = {"myclick":myclick})
-
-def increment(event):
-    mycard.vote  = mycard.vote + 1
-    #mycard.style = "color:red"
-
-ss.space()
-ss.button("Thumb Up", onclick=increment)
-```
-''')
-
-
-ss.space("mt-8")
-
-def onPageEnter():
-    ss.session["counter"] = 0
-    

pages/Advanced_Usage/demo_when.py

@@ -1,104 +0,0 @@
-'''
-title: when
-'''
-
-import simplestart as ss
-
-ss.md('''
-## ss.when onditional Statements
-''')
-
-ss.space()
-ss.md('''
-#### 🔅 Example
-''')
-
-#api
-def increment(event):
-    ss.session["counter"] += 1
-    
-def decrement(event):
-    ss.session["counter"] -= 1
-
-    
-#conditional func
-def conditioner(event):
-    #print("event", event)
-    if event["flag"] == 1:
-        if ss.session["counter"] >= 5:
-            return True
-        else:
-            return False
-    elif event["flag"] == 2:
-        return (ss.session["viewcode"] == 1)
-        
-
-# State initialisation
-ss.session["counter"] = 0
-ss.session["viewcode"] = 0
-
-#ui
-ss.text("The count is @counter.")
-
-ss.button("Increment", onclick=increment)
-ss.button("Decrement", onclick=decrement)
-
-ss.write("New content will appear below when the counter is greater than 5.")
-
-with ss.when(conditioner, flag = 1): # Conditional rendering
-    ss.text("Well done on reaching 5 👋🌷🍾")
-    
-ss.write("When the counter is less than 5, the new content will be hidden.")
-
-
-ss.space()
-
-ss.write("#### 🔎 Code")
-ss.write("---")
-
-def viewcode():
-    ss.session["viewcode"] = 1
-
-ss.button("View Code", size="small", onclick = viewcode)
-
-with ss.when(conditioner, flag = 2):
-    ss.md('''
-```python
-import simplestart as ss
-
-#api
-def increment(event):
-    ss.session["counter"] += 1
-    
-def decrement(event):
-    ss.session["counter"] -= 1
-
-    
-#conditional func
-def conditioner(event):
-    return (ss.session["counter"] >= 5)
-        
-# State initialisation
-ss.session["counter"] = 0
-ss.session["viewcode"] = 0
-
-#ui
-ss.text("The count is @counter.")
-
-ss.button("Increment", onclick=increment)
-ss.button("Decrement", onclick=decrement)
-
-ss.write("New content will appear below when the counter is greater than 5.")
-
-with ss.when(conditioner, flag = 1): # Conditional rendering
-    ss.text("Well done on reaching 5 👋🌷🍾")
-    
-ss.write("When the counter is less than 5, the new content will be hidden.")
-```
-    ''')
-
-ss.md('''
-::: tip
-  The code view above is also implemented using ss.when.
-:::
-''')

pages/Advanced_Usage/folder.yaml

@@ -1,2 +0,0 @@
-alias: Advantage Usage
-order_name: "005"

pages/Chart_Data/demo_bokeh.py

@@ -1,132 +0,0 @@
-'''
-title: chart bokeh
-'''
-
-import simplestart as ss
-
-from bokeh.plotting import figure
-from bokeh.models import ColumnDataSource
-from bokeh.resources import CDN
-from bokeh.embed import file_html
-from sklearn.datasets import load_iris
-import pandas as pd
-
-# Load the Iris dataset
-iris = load_iris()
-df = pd.DataFrame(data=iris.data, columns=iris.feature_names)
-df['species'] = iris.target
-df['species'] = df['species'].map({0: 'setosa', 1: 'versicolor', 2: 'virginica'})
-
-
-# Create the data source and figure object
-source = ColumnDataSource(data=dict(
-    sepal_length=df['sepal length (cm)'],
-    sepal_width=df['sepal width (cm)'],
-    petal_length=df['petal length (cm)'],
-    petal_width=df['petal width (cm)'],
-    species=df['species']
-))
-
-# Create a Bokeh scatter plot
-p = figure(title="Iris Dataset Scatter Plot", x_axis_label='Sepal Length (cm)', y_axis_label='Sepal Width (cm)',
-           tools="pan,wheel_zoom,box_zoom,reset,hover,save", width=800)
-
-# Set different colors based on species
-colors = {'setosa': 'blue', 'versicolor': 'green', 'virginica': 'red'}
-
-for species, color in colors.items():
-    df_species = df[df['species'] == species]
-    source_species = ColumnDataSource(data=dict(
-        sepal_length=df_species['sepal length (cm)'],
-        sepal_width=df_species['sepal width (cm)']
-    ))
-    p.scatter('sepal_length', 'sepal_width', source=source_species, legend_label=species, color=color,
-              size=10, alpha=0.5)
-
-p.legend.title = 'Species'
-p.legend.location = 'top_left'
-
-# Embed the Bokeh figure into SimpleStart
-html = file_html(p, CDN, "Iris Dataset Scatter Plot")
-
-#ui
-ss.md('''
-## simplestart Chart Demo - Bokeh
-''')
-
-ss.space()
-ss.md('''
-#### 🔅 Example
-An interactive scatter plot of the Iris data using Bokeh
-''')
-
-ss.space()
-ss.htmlview(html, border = False)
-
-ss.space()
-ss.write("#### 🔎 Code")
-
-def viewcode():
-    ss.session["viewcode"] = 1
-
-ss.session["viewcode"] = 0
-ss.button("View Code", size="small", onclick = viewcode)
-
-def conditioner(event):
-    return (ss.session["viewcode"] == 1)
-
-code = '''
-```python
-import simplestart as ss
-
-from bokeh.plotting import figure
-from bokeh.models import ColumnDataSource
-from bokeh.resources import CDN
-from bokeh.embed import file_html
-from sklearn.datasets import load_iris
-import pandas as pd
-
-# Load the Iris dataset
-iris = load_iris()
-df = pd.DataFrame(data=iris.data, columns=iris.feature_names)
-df['species'] = iris.target
-df['species'] = df['species'].map({0: 'setosa', 1: 'versicolor', 2: 'virginica'})
-
-
-# Create the data source and figure object
-source = ColumnDataSource(data=dict(
-    sepal_length=df['sepal length (cm)'],
-    sepal_width=df['sepal width (cm)'],
-    petal_length=df['petal length (cm)'],
-    petal_width=df['petal width (cm)'],
-    species=df['species']
-))
-
-# Create a Bokeh scatter plot
-p = figure(title="Iris Dataset Scatter Plot", x_axis_label='Sepal Length (cm)', y_axis_label='Sepal Width (cm)',
-           tools="pan,wheel_zoom,box_zoom,reset,hover,save", width=800)
-
-# Set different colors based on species
-colors = {'setosa': 'blue', 'versicolor': 'green', 'virginica': 'red'}
-
-for species, color in colors.items():
-    df_species = df[df['species'] == species]
-    source_species = ColumnDataSource(data=dict(
-        sepal_length=df_species['sepal length (cm)'],
-        sepal_width=df_species['sepal width (cm)']
-    ))
-    p.scatter('sepal_length', 'sepal_width', source=source_species, legend_label=species, color=color,
-              size=10, alpha=0.5)
-
-p.legend.title = 'Species'
-p.legend.location = 'top_left'
-
-# Embed the Bokeh figure into SimpleStart
-html = file_html(p, CDN, "Iris Dataset Scatter Plot")
-
-#ui
-ss.htmlview(html, border = False)
-'''
-
-with ss.when(conditioner):
-    ss.md(code)

pages/Chart_Data/demo_pyplot.py

@@ -1,134 +0,0 @@
-'''
-title: chart pyplot
-'''
-
-import streamsync as ss
-
-import seaborn as sns
-import matplotlib as mpl
-import matplotlib.pyplot as plt
-
-
-#下载不了，所以加一个参数data_home
-data_home = "./data/seaborn"
-
-ss.md('''
-## ss.pyplot Drawing
-''')
-
-
-ss.space()
-ss.md('''
-#### 🔅 Example
-''')
-
-ss.write("#### 1. Draw a Line Plot")
-
-sns.set_style("whitegrid")
-titanic = sns.load_dataset("titanic", data_home=data_home)
-sns.lineplot(x="age", y="fare", hue="sex", data=titanic)
-plt.show()
-
-fig = plt.gcf()
-ss.pyplot(fig, style="border:1px solid gray; width:600px")
-
-ss.write("#### 2. Draw a Scatter Plot")
-
-sns.set_style("whitegrid")
-tips = sns.load_dataset("tips", data_home=data_home)
-sns.scatterplot(x="total_bill", y="tip", data=tips)
-plt.show()
-
-fig = plt.gcf()
-ss.pyplot(fig, style="border:1px solid gray; width:600px")
-
-ss.write("#### 3. Draw a Bar Plot")
-
-sns.set_style("whitegrid")
-titanic = sns.load_dataset("titanic",data_home=data_home)
-sns.barplot(x="class", y="survived", data=titanic)
-plt.show()
-
-fig = plt.gcf()
-ss.pyplot(fig, style="border:1px solid gray; width:600px")
-
-
-ss.write("#### 4. Draw a Histogram")
-sns.set_style("whitegrid")
-titanic = sns.load_dataset("titanic",data_home=data_home)
-sns.histplot(x="age", data=titanic)
-plt.show()
-
-fig = plt.gcf()
-ss.pyplot(fig, style="border:1px solid gray; width:600px")
-
-
-ss.space()
-
-ss.write("#### 🔎 Code")
-ss.write("---")
-
-def viewcode():
-    ss.session["viewcode"] = 1
-
-ss.button("View Code", size="small", onclick = viewcode)
-
-
-def conditioner(event):
-    return ss.session["viewcode"] == 1
-
-with ss.when(conditioner):
-    ss.md('''
-```python
-import streamsync as ss
-
-import seaborn as sns
-import matplotlib as mpl
-import matplotlib.pyplot as plt
-
-
-data_home = "./data/seaborn"
-
-
-ss.write("#### 1. Draw a Line Plot")
-
-sns.set_style("whitegrid")
-titanic = sns.load_dataset("titanic", data_home=data_home)
-sns.lineplot(x="age", y="fare", hue="sex", data=titanic)
-plt.show()
-
-fig = plt.gcf()
-ss.pyplot(fig, style="border:1px solid gray; width:600px")
-
-ss.write("#### 2. Draw a Scatter Plot")
-
-sns.set_style("whitegrid")
-tips = sns.load_dataset("tips", data_home=data_home)
-sns.scatterplot(x="total_bill", y="tip", data=tips)
-plt.show()
-
-fig = plt.gcf()
-ss.pyplot(fig, style="border:1px solid gray; width:600px")
-
-ss.write("#### 3. Draw a Bar Plot")
-
-sns.set_style("whitegrid")
-titanic = sns.load_dataset("titanic",data_home=data_home)
-sns.barplot(x="class", y="survived", data=titanic)
-plt.show()
-
-fig = plt.gcf()
-ss.pyplot(fig, style="border:1px solid gray; width:600px")
-
-
-ss.write("#### 4. Draw a Histogram")
-sns.set_style("whitegrid")
-titanic = sns.load_dataset("titanic",data_home=data_home)
-sns.histplot(x="age", data=titanic)
-plt.show()
-
-fig = plt.gcf()
-ss.pyplot(fig, style="border:1px solid gray; width:600px")
-```
-    ''')
-    

pages/Chart_Data/folder.yaml

@@ -1,2 +0,0 @@
-alias: Chart Data
-order_name: "003"

pages/Content_Display/demo_audio.py

@@ -1,76 +0,0 @@
-'''
-title: Audio Playback
-'''
-
-import streamsync as ss
-
-ss.md("## ss.audio")
-
-
-ss.space()
-ss.md('''
-#### 🔅 Example
-''')
-
-ss.space()
-
-audiosrc = "media/test.wav"
-player = ss.audio(audiosrc)
-
-
-ss.space("mt-8")
-
-ss.write('''
----
-#### 🔎 Code
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-audiosrc = "media/davide_quatela--breathing_barcelona.mp3"
-player = ss.audio(audiosrc)
-```
-''')
-
-def playaudio(event):
-    if event.tag == "play":
-        player.play()
-    elif event.tag == "pause":
-        player.pause()
-    elif event.tag == "change":
-        player.src = "media/davide_quatela--breathing_barcelona.mp3"
-    elif event.tag == "seek":
-        player.seek(3)
-    
-ss.button("play", onclick = playaudio, eventTag = "play")
-ss.button("pause", onclick = playaudio, eventTag = "pause")
-ss.button("change source", onclick = playaudio, eventTag = "change")
-ss.button("seek", onclick = playaudio, eventTag = "seek")
-
-ss.md('''
-```python
-def playaudio(event):
-    if event.tag == "play":
-        player.play()
-    elif event.tag == "pause":
-        player.pause()
-    elif event.tag == "change":
-        player.src = "media/davide_quatela--breathing_barcelona.mp3"
-    elif event.tag == "seek":
-        player.seek(3)
-    
-ss.button("play", onclick = playaudio, eventTag = "play")
-ss.button("pause", onclick = playaudio, eventTag = "pause")
-ss.button("change source", onclick = playaudio, eventTag = "change")
-ss.button("seek", onclick = playaudio, eventTag = "seek")
-```
-''')
-
-ss.md('''
-::: tip
-ss.audio supports audio formats including wav, mp3, etc.
-:::
-''')
-

pages/Content_Display/demo_html.py

@@ -1,52 +0,0 @@
-'''
-title: Html Hypertext
-'''
-
-import streamsync as ss
-
-
-ss.md("## ss.html")
-
-ss.space("")
-
-ss.md('''
-#### 🔅 Example
-''')
-
-
-ss.md("### html")
-
-ss.html(f"""
-    <p>This is a piece of rich text content, which contains <strong>bold</strong> and <em>italic</em> text.</p>
-    <style>
-    .testclass{{
-        color:red;
-        font-weight:bold;
-    }}
-    </style>
-    <div class="testclass">this is red</div>
-""")
-
-ss.space("mt-8")
-
-ss.write('''
----
-#### 🔎 Code
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-
-ss.html(f"""
-    <p>This is a piece of rich text content, which contains <strong>bold</strong> and <em>italic</em> text.</p>
-    <style>
-    .testclass{{
-        color:red;
-        font-weight:bold;
-    }}
-    </style>
-    <div class="testclass">this is red</div>
-""")
-```
-''')

pages/Content_Display/demo_image.py

@@ -1,103 +0,0 @@
-'''
-title: Image
-'''
-
-import simplestart as ss
-
-import cv2
-from PIL import Image
-import os
-
-ss.md("## ss.image")
-
-ss.md('''
-#### 🔅 Example
-''')
-
-ss.space()
-
-img = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
-
-cols = ss.columns([60,"flex:40"], border=True)
-with cols[0]:
-    mytext = ss.text("This is image")
-    ss.space()
-    myimg = ss.image(img, fit="contain", width=300, height=300)
-    ss.text("Image fit mode: @fit_str")
-    
-def onradiochange(event):
-    #ss.message(event.value)
-    
-    ss.session["fit_str"] = event.value
-    myimg.fit = event.value
-
-
-def onradiochange2(event):
-    value = event.value
-    index = event.index
-
-    source = ["Http", "PIL", "OpenCV", "Local"]
-    ss.session["source_str"] = source[index]
-
-    
-    if index == 0:
-        img = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
-        ss.session["image_path"] = "\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\""
-        myimg.image = img
-    if index == 1:
-        image = Image.open('./media/image/dalao.jpeg')
-        ss.session["image_path"] = "Image.open('./media/image/dalao.jpeg')"
-        myimg["image"] = image
-    if index == 2:
-        img = cv2.imread('./media/image/cat.jpeg',cv2.IMREAD_COLOR)
-        ss.session["image_path"] = "cv2.imread('./media/image/cat.jpeg',cv2.IMREAD_COLOR)"
-        myimg.image = img  
-    if index == 3:
-        file_path = './media/image/dog.jpeg'
-        ss.session["image_path"] = "\"./media/image/dog.jpeg\""
-        myimg.image = file_path
-
-def sel_change(event):
-    myimg.border = "border" in event.value
-    
-    if "title" in event.value:
-        myimg.title = "Title of image"
-    else:
-        myimg.title = ""
-        
-    if "elevation" in event.value:
-        myimg.elevation = 12
-    else:
-        myimg.elevation = 0
-    
-with cols[1]:
-    ss.text("Image fit mode")
-    ss.radio(["fill", "contain", "cover", "none", "scale-down"], index = 1, inline = True, onchange=onradiochange)
-    ss.space()
-    ss.text("Image source")
-    ss.radio(["Http image","PIL image", "OpenCV image", "Local image"], index = 0, inline = True, onchange=onradiochange2)
-    
-    ss.md("---")
-    ss.selectbox(["border", "title", "elevation"], label = "Others", multiple = True, onchange = sel_change)
-    
-ss.space()
-
-ss.write('''
-#### 🔎 Code
-''')
-
-ss.md('''
-```python
-import simplestart as ss
-import cv2
-from PIL import Image
-
-img = @image_path
-ss.image(img, fit="@fit_str")
-```
-''')
-
-def onPageLoad():
-    ss.session["fit_str"] = "contain"
-    ss.session["source_str"] = "Http"
-    ss.session["image_path"] = "\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\""