littlebird13
commited on
Commit
•
a26a4c4
1
Parent(s):
147e798
support_mobile (#1)
Browse files- feat: support mobile (3f3325163fe8be3d656f39ea61d71a0f07f79bb9)
- fix: deps (cf0a76b26d633183ec5a033dd779a7abe0358404)
- fix: locale (dd686d4de14080c3df50e74db083437bf07017b5)
app.css
CHANGED
@@ -6,10 +6,10 @@
|
|
6 |
}
|
7 |
|
8 |
.right_panel {
|
9 |
-
margin: 20px;
|
10 |
margin-top: 66px;
|
11 |
border: 1px solid #BFBFC4;
|
12 |
border-radius: 8px;
|
|
|
13 |
}
|
14 |
|
15 |
.render_header {
|
|
|
6 |
}
|
7 |
|
8 |
.right_panel {
|
|
|
9 |
margin-top: 66px;
|
10 |
border: 1px solid #BFBFC4;
|
11 |
border-radius: 8px;
|
12 |
+
overflow: hidden;;
|
13 |
}
|
14 |
|
15 |
.render_header {
|
app.py
CHANGED
@@ -12,7 +12,6 @@ from dashscope.api_entities.dashscope_response import Role
|
|
12 |
|
13 |
import modelscope_studio.components.base as ms
|
14 |
import modelscope_studio.components.legacy as legacy
|
15 |
-
import modelscope_studio.components.pro as pro
|
16 |
import modelscope_studio.components.antd as antd
|
17 |
from config import DEMO_LIST, SystemPrompt
|
18 |
|
@@ -76,29 +75,30 @@ def send_to_sandbox(code):
|
|
76 |
def demo_card_click(e: gr.EventData):
|
77 |
index = e._data['component']['index']
|
78 |
return DEMO_LIST[index]['description']
|
79 |
-
|
80 |
with gr.Blocks(css_paths="app.css") as demo:
|
81 |
history = gr.State([])
|
82 |
setting = gr.State({
|
83 |
"system": SystemPrompt,
|
84 |
})
|
85 |
|
86 |
-
with ms.Application():
|
87 |
-
with antd.ConfigProvider(
|
88 |
-
with antd.
|
89 |
-
with antd.
|
90 |
-
with antd.Flex(vertical=True, gap="
|
91 |
header = gr.HTML("""
|
92 |
<div class="left_header">
|
93 |
<img src="//img.alicdn.com/imgextra/i2/O1CN01KDhOma1DUo8oa7OIU_!!6000000000220-1-tps-240-240.gif" width="200px" />
|
94 |
<h1>Qwen2.5-Coder</h2>
|
95 |
</div>
|
96 |
""")
|
97 |
-
|
98 |
-
|
99 |
-
input = gr.TextArea(placeholder="
|
100 |
btn = antd.Button("send", type="primary", size="large")
|
101 |
clear_btn = antd.Button("clear history", type="default", size="large")
|
|
|
102 |
antd.Divider("examples")
|
103 |
with antd.Flex(gap="small", wrap=True):
|
104 |
with ms.Each(DEMO_LIST):
|
@@ -140,19 +140,20 @@ with gr.Blocks(css_paths="app.css") as demo:
|
|
140 |
history_drawer.close(lambda: gr.update(
|
141 |
open=False), inputs=[], outputs=[history_drawer])
|
142 |
|
143 |
-
with antd.
|
144 |
-
|
145 |
-
|
146 |
-
with antd.Tabs
|
147 |
-
|
148 |
-
|
149 |
-
|
150 |
-
|
151 |
-
|
152 |
-
|
153 |
-
|
154 |
-
|
155 |
-
|
|
|
156 |
|
157 |
def generation_code(query: Optional[str], _setting: Dict[str, str], _history: Optional[History]):
|
158 |
if query is None:
|
@@ -201,6 +202,6 @@ with gr.Blocks(css_paths="app.css") as demo:
|
|
201 |
outputs=[code_output, history, sandbox, state_tab, code_drawer])
|
202 |
|
203 |
clear_btn.click(clear_history, inputs=[], outputs=[history])
|
204 |
-
|
205 |
if __name__ == "__main__":
|
206 |
-
demo.queue(default_concurrency_limit=20).launch(
|
|
|
12 |
|
13 |
import modelscope_studio.components.base as ms
|
14 |
import modelscope_studio.components.legacy as legacy
|
|
|
15 |
import modelscope_studio.components.antd as antd
|
16 |
from config import DEMO_LIST, SystemPrompt
|
17 |
|
|
|
75 |
def demo_card_click(e: gr.EventData):
|
76 |
index = e._data['component']['index']
|
77 |
return DEMO_LIST[index]['description']
|
78 |
+
|
79 |
with gr.Blocks(css_paths="app.css") as demo:
|
80 |
history = gr.State([])
|
81 |
setting = gr.State({
|
82 |
"system": SystemPrompt,
|
83 |
})
|
84 |
|
85 |
+
with ms.Application() as app:
|
86 |
+
with antd.ConfigProvider():
|
87 |
+
with antd.Row(gutter=[32, 12]) as layout:
|
88 |
+
with antd.Col(span=24, md=8):
|
89 |
+
with antd.Flex(vertical=True, gap="middle", wrap=True):
|
90 |
header = gr.HTML("""
|
91 |
<div class="left_header">
|
92 |
<img src="//img.alicdn.com/imgextra/i2/O1CN01KDhOma1DUo8oa7OIU_!!6000000000220-1-tps-240-240.gif" width="200px" />
|
93 |
<h1>Qwen2.5-Coder</h2>
|
94 |
</div>
|
95 |
""")
|
96 |
+
input = antd.InputTextarea(
|
97 |
+
size="large", allow_clear=True, placeholder="Please enter what kind of application you want")
|
98 |
+
# input = gr.TextArea(placeholder="请输入您想要一个什么样的应用", show_label=False, container=False)
|
99 |
btn = antd.Button("send", type="primary", size="large")
|
100 |
clear_btn = antd.Button("clear history", type="default", size="large")
|
101 |
+
|
102 |
antd.Divider("examples")
|
103 |
with antd.Flex(gap="small", wrap=True):
|
104 |
with ms.Each(DEMO_LIST):
|
|
|
140 |
history_drawer.close(lambda: gr.update(
|
141 |
open=False), inputs=[], outputs=[history_drawer])
|
142 |
|
143 |
+
with antd.Col(span=24, md=16):
|
144 |
+
with ms.Div(elem_classes="right_panel"):
|
145 |
+
gr.HTML('<div class="render_header"><span class="header_btn"></span><span class="header_btn"></span><span class="header_btn"></span></div>')
|
146 |
+
with antd.Tabs(active_key="empty", render_tab_bar="() => null") as state_tab:
|
147 |
+
with antd.Tabs.Item(key="empty"):
|
148 |
+
empty = antd.Empty(description="empty input", elem_classes="right_content")
|
149 |
+
with antd.Tabs.Item(key="loading"):
|
150 |
+
loading = antd.Spin(True, tip="coding...", size="large", elem_classes="right_content")
|
151 |
+
with antd.Tabs.Item(key="render"):
|
152 |
+
sandbox = gr.HTML(elem_classes="html_content")
|
153 |
+
# sandbox = pro.FrontendCodeSandbox(elem_style={
|
154 |
+
# 'height': '920px',
|
155 |
+
# 'width': '100%'
|
156 |
+
# })
|
157 |
|
158 |
def generation_code(query: Optional[str], _setting: Dict[str, str], _history: Optional[History]):
|
159 |
if query is None:
|
|
|
202 |
outputs=[code_output, history, sandbox, state_tab, code_drawer])
|
203 |
|
204 |
clear_btn.click(clear_history, inputs=[], outputs=[history])
|
205 |
+
|
206 |
if __name__ == "__main__":
|
207 |
+
demo.queue(default_concurrency_limit=20).launch()
|
config.py
CHANGED
@@ -41,6 +41,13 @@ DEMO_LIST = [
|
|
41 |
"card": {
|
42 |
"index": 1,
|
43 |
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
44 |
"title": "TODO list",
|
45 |
"description": "I want a TODO list that allows me to add tasks, delete tasks, and I would like the overall color theme to be purple."
|
46 |
},
|
|
|
41 |
"card": {
|
42 |
"index": 1,
|
43 |
},
|
44 |
+
"title": "Spam with emojis!",
|
45 |
+
"description": "Write code in a single HTML file: Capture the click event, place a random number of emojis at the click position, and add gravity and collision effects to each emoji."
|
46 |
+
},
|
47 |
+
{
|
48 |
+
"card": {
|
49 |
+
"index": 2,
|
50 |
+
},
|
51 |
"title": "TODO list",
|
52 |
"description": "I want a TODO list that allows me to add tasks, delete tasks, and I would like the overall color theme to be purple."
|
53 |
},
|
requirements.txt
CHANGED
@@ -1,2 +1,2 @@
|
|
1 |
dashscope
|
2 |
-
|
|
|
1 |
dashscope
|
2 |
+
modelscope_studio~=1.0.0b
|