littlebird13 commited on
Commit
a26a4c4
1 Parent(s): 147e798

support_mobile (#1)

Browse files

- feat: support mobile (3f3325163fe8be3d656f39ea61d71a0f07f79bb9)
- fix: deps (cf0a76b26d633183ec5a033dd779a7abe0358404)
- fix: locale (dd686d4de14080c3df50e74db083437bf07017b5)

Files changed (4) hide show
  1. app.css +1 -1
  2. app.py +26 -25
  3. config.py +7 -0
  4. requirements.txt +1 -1
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(locale="zh_CN"):
88
- with antd.Splitter():
89
- with antd.SplitterPanel(default_size="30%", max="70%", min="10%", elem_style={"padding": "20px"}):
90
- with antd.Flex(vertical=True, gap="large", wrap=True):
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
- # input = antd.InputTextarea(
98
- # size="large", allow_clear=True, show_count=True, placeholder="请输入您想要一个什么样的应用")
99
- input = gr.TextArea(placeholder="Please enter what kind of application you want", show_label=False, container=False)
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.SplitterPanel(elem_classes="right_panel"):
144
- gr.HTML('<div class="render_header"><span class="header_btn"></span><span class="header_btn"></span><span class="header_btn"></span></div>')
145
- with antd.Tabs(active_key="empty", render_tab_bar="() => null") as state_tab:
146
- with antd.Tabs.Item(key="empty"):
147
- empty = antd.Empty(description="empty input", elem_classes="right_content")
148
- with antd.Tabs.Item(key="loading"):
149
- loading = antd.Spin(True, tip="coding...", size="large", elem_classes="right_content")
150
- with antd.Tabs.Item(key="render"):
151
- sandbox = gr.HTML(elem_classes="html_content")
152
- # sandbox = pro.FrontendCodeSandbox(elem_style={
153
- # 'height': '920px',
154
- # 'width': '100%'
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(ssr_mode=False)
 
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
- https://modelscope-demo-widget.oss-cn-zhangjiakou.aliyuncs.com/modelscope_studio-1.0.0b2-py3-none-any.whl
 
1
  dashscope
2
+ modelscope_studio~=1.0.0b