feat: add a few default options in admin/Home (#39)
Meng Zhang
GitHub
parent
1c61ef3944
commit
350b719db9
|
|
@ -16,5 +16,37 @@ st.set_page_config(page_title="Tabby Admin - Home")
|
||||||
|
|
||||||
st.markdown("## Tabby")
|
st.markdown("## Tabby")
|
||||||
st.markdown(" ".join(map(make_badge_markdown, SERVICES)))
|
st.markdown(" ".join(map(make_badge_markdown, SERVICES)))
|
||||||
|
st.markdown("---")
|
||||||
|
|
||||||
monaco.st_monaco()
|
SNIPPETS = {
|
||||||
|
"Clear": "# Write some code ...",
|
||||||
|
"Fibonacci": "def fib(n):",
|
||||||
|
"Parse JSON": """def parse_json_lines(filename: str) -> List[Any]:
|
||||||
|
output = []
|
||||||
|
with open(filename, "r", encoding="utf-8") as f:
|
||||||
|
""",
|
||||||
|
"Data ORM": """import birdchirp
|
||||||
|
|
||||||
|
from birdchirp.model.chirp import chirp
|
||||||
|
from birdchirp.db.mysql import MysqlDb
|
||||||
|
|
||||||
|
class User:
|
||||||
|
def __init__(self, user_id):
|
||||||
|
self.user_id = user_id
|
||||||
|
self.db = MysqlDb()
|
||||||
|
|
||||||
|
def get_avatar""",
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
def code_editor():
|
||||||
|
code = ""
|
||||||
|
cols = st.columns(len(SNIPPETS))
|
||||||
|
for col, (k, v) in zip(cols, SNIPPETS.items()):
|
||||||
|
with col:
|
||||||
|
if st.button(k):
|
||||||
|
code = v
|
||||||
|
monaco.st_monaco(key="default", code=code)
|
||||||
|
|
||||||
|
|
||||||
|
code_editor()
|
||||||
|
|
|
||||||
|
|
@ -30,8 +30,8 @@ else:
|
||||||
# `declare_component` and call it done. The wrapper allows us to customize
|
# `declare_component` and call it done. The wrapper allows us to customize
|
||||||
# our component's API: we can pre-process its input args, post-process its
|
# our component's API: we can pre-process its input args, post-process its
|
||||||
# output value, and add a docstring for users.
|
# output value, and add a docstring for users.
|
||||||
def st_monaco(tabby_server_url="http://localhost:5000", key=None):
|
def st_monaco(key, tabby_server_url=None, code=None):
|
||||||
_editor_func(tabby_server_url=tabby_server_url, key=key)
|
_editor_func(tabby_server_url=tabby_server_url, code=code, key=key)
|
||||||
|
|
||||||
|
|
||||||
# Add some test code to play with the component while it's in development.
|
# Add some test code to play with the component while it's in development.
|
||||||
|
|
@ -40,5 +40,9 @@ def st_monaco(tabby_server_url="http://localhost:5000", key=None):
|
||||||
if not _RELEASE:
|
if not _RELEASE:
|
||||||
import streamlit as st
|
import streamlit as st
|
||||||
|
|
||||||
tabby_server_url = st.text_input("Tabby Server URL", value="http://localhost:5000")
|
code = st.text_input("code")
|
||||||
st_monaco(tabby_server_url)
|
set_code = st.button("Set code")
|
||||||
|
if set_code:
|
||||||
|
st_monaco(code=code, key="1")
|
||||||
|
else:
|
||||||
|
st_monaco(key="1")
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
{
|
{
|
||||||
"files": {
|
"files": {
|
||||||
"main.js": "./static/js/main.15818978.js",
|
"main.js": "./static/js/main.c14dfe27.js",
|
||||||
"index.html": "./index.html"
|
"index.html": "./index.html"
|
||||||
},
|
},
|
||||||
"entrypoints": [
|
"entrypoints": [
|
||||||
"static/js/main.15818978.js"
|
"static/js/main.c14dfe27.js"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
<!doctype html><html lang="en"><head><title>Streamlit Component</title><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Streamlit Component"/><link rel="stylesheet" href="bootstrap.min.css"/><script defer="defer" src="./static/js/main.15818978.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
<!doctype html><html lang="en"><head><title>Streamlit Component</title><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Streamlit Component"/><link rel="stylesheet" href="bootstrap.min.css"/><script defer="defer" src="./static/js/main.c14dfe27.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,20 +1,19 @@
|
||||||
import axios from "axios"
|
import axios from "axios"
|
||||||
import { useRenderData } from "streamlit-component-lib-react-hooks"
|
import { useRenderData } from "streamlit-component-lib-react-hooks"
|
||||||
|
|
||||||
import React, { useEffect } from "react"
|
import React, { useRef, useEffect} from "react"
|
||||||
import Editor, { useMonaco } from "@monaco-editor/react"
|
import Editor, { useMonaco } from "@monaco-editor/react"
|
||||||
|
|
||||||
const PythonParseJSON = `def parse_json_lines(filename: str) -> List[Any]:
|
|
||||||
output = []
|
|
||||||
with open(filename, "r", encoding="utf-8") as f:
|
|
||||||
`
|
|
||||||
|
|
||||||
let TabbyServerURL = "http://localhost:5000"
|
let TabbyServerURL = "http://localhost:5000"
|
||||||
|
|
||||||
export default function MonacoEditor() {
|
export default function MonacoEditor() {
|
||||||
const renderData = useRenderData()
|
const renderData = useRenderData()
|
||||||
|
|
||||||
|
if (renderData.args.tabby_server_url) {
|
||||||
TabbyServerURL = renderData.args.tabby_server_url
|
TabbyServerURL = renderData.args.tabby_server_url
|
||||||
|
} else {
|
||||||
|
TabbyServerURL = `${window.location.protocol}//${window.location.hostname}:5000`
|
||||||
|
}
|
||||||
|
|
||||||
const monaco = useMonaco()
|
const monaco = useMonaco()
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
@ -31,12 +30,19 @@ export default function MonacoEditor() {
|
||||||
)
|
)
|
||||||
}, [monaco])
|
}, [monaco])
|
||||||
|
|
||||||
|
const editorRef = useRef(null)
|
||||||
|
useEffect(() => {
|
||||||
|
if (renderData.args.code && editorRef.current) {
|
||||||
|
editorRef.current.getModel().setValue(renderData.args.code)
|
||||||
|
}
|
||||||
|
}, [renderData.args.code, editorRef])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ height: 400 }}>
|
<div style={{ height: 400 }}>
|
||||||
<Editor
|
<Editor
|
||||||
theme="vs-dark"
|
theme="vs-dark"
|
||||||
defaultLanguage="python"
|
defaultLanguage="python"
|
||||||
defaultValue={PythonParseJSON}
|
onMount={(editor) => (editorRef.current = editor)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue