Skip to content

Commit 6d9b760

Browse files
Col0ringCol0ring
authored
fix: disabled status of action buttons & improve load times of frontend (#83)
* feat: update * fix: code style
1 parent 0b03601 commit 6d9b760

16 files changed

Lines changed: 1189 additions & 707 deletions

File tree

‎.changeset/beige-bugs-bake.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@modelscope-studio/pro': patch
3+
'@modelscope-studio/frontend': patch
4+
'modelscope_studio': patch
5+
---
6+
7+
fix: disabled status of action buttons

‎.changeset/famous-horses-open.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@modelscope-studio/pro': patch
3+
'@modelscope-studio/frontend': patch
4+
'modelscope_studio': patch
5+
---
6+
7+
feat: improve load times

‎.changeset/slick-pandas-sit.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
'@modelscope-studio/legacy-compiled': patch
3+
'@modelscope-studio/lint-config': patch
4+
'@modelscope-studio/changelog': patch
5+
'@modelscope-studio/antd': patch
6+
'@modelscope-studio/pro': patch
7+
'@modelscope-studio/frontend': patch
8+
'modelscope_studio': patch
9+
---
10+
11+
chore: update deps

‎backend/modelscope_studio/components/antdx/bubble/list/__init__.py‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
from typing import Any
44

5+
from gradio.events import EventListener
6+
57
from .....utils.dev import ModelScopeLayoutComponent, resolve_frontend_dir
68
from .item import AntdXBubbleListItem
79
from .role import AntdXBubbleListRole
@@ -14,7 +16,12 @@ class AntdXBubbleList(ModelScopeLayoutComponent):
1416
Role = AntdXBubbleListRole
1517
Item = AntdXBubbleListItem
1618

17-
EVENTS = []
19+
EVENTS = [
20+
EventListener("scroll",
21+
callback=lambda block: block._internal.update(
22+
bind_scroll_event=True),
23+
doc="Callback when the bubble list is scrolled.")
24+
]
1825

1926
# supported slots
2027
SLOTS = [

‎config/changelog/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@
2020
},
2121
"dependencies": {
2222
"@changesets/get-github-info": "^0.6.0",
23-
"@manypkg/get-packages": "^3.0.0",
23+
"@manypkg/get-packages": "^3.1.0",
2424
"detect-indent": "^7.0.1"
2525
},
2626
"devDependencies": {
2727
"@changesets/types": "^6.1.0",
28-
"@types/node": "^24.0.10",
28+
"@types/node": "^24.1.0",
2929
"tsup": "^8.5.0"
3030
}
3131
}

‎config/lint-config/package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,18 @@
1717
},
1818
"dependencies": {
1919
"@eslint/compat": "^1.3.1",
20-
"@eslint/js": "^9.30.1",
21-
"@typescript-eslint/parser": "^8.35.1",
22-
"eslint-config-prettier": "^10.1.5",
20+
"@eslint/js": "^9.32.0",
21+
"@typescript-eslint/parser": "^8.38.0",
22+
"eslint-config-prettier": "^10.1.8",
2323
"eslint-import-resolver-typescript": "^4.4.4",
2424
"eslint-plugin-import": "^2.32.0",
2525
"eslint-plugin-jsx-a11y": "^6.10.2",
26-
"eslint-plugin-prettier": "5.5.1",
26+
"eslint-plugin-prettier": "5.5.3",
2727
"eslint-plugin-react": "^7.37.5",
2828
"eslint-plugin-react-hooks": "^5.2.0",
2929
"eslint-plugin-react-refresh": "^0.4.20",
3030
"eslint-plugin-simple-import-sort": "^12.1.0",
31-
"eslint-plugin-svelte": "^3.10.1",
31+
"eslint-plugin-svelte": "^3.11.0",
3232
"globals": "^16.3.0",
3333
"postcss": "^8.5.6",
3434
"postcss-less": "^6.0.0",
@@ -38,8 +38,8 @@
3838
"stylelint-declaration-block-no-ignored-properties": "^2.8.0",
3939
"stylelint-order": "^7.0.0",
4040
"stylelint-prettier": "^5.0.3",
41-
"svelte-eslint-parser": "^1.2.0",
42-
"typescript-eslint": "^8.35.1"
41+
"svelte-eslint-parser": "^1.3.0",
42+
"typescript-eslint": "^8.38.0"
4343
},
4444
"devDependencies": {
4545
"@types/eslint": "^9.6.1",

‎docs/layout_templates/coder_artifacts/demos/app.py‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -177,21 +177,27 @@ def clear_history(e: gr.EventData, state_value):
177177
min-height: 680px;
178178
}
179179
180+
#coder-artifacts #output-container .ms-gr-ant-tabs-content,.ms-gr-ant-tabs-tabpane {
181+
height: 100%;
182+
}
183+
180184
#coder-artifacts .output-html {
181185
display: flex;
182186
flex-direction: column;
183187
width: 100%;
188+
height: 100%;
184189
min-height: 680px;
190+
max-height: 1200px;
185191
}
186192
187-
#coder-artifacts .output-html > iframe {
188-
flex: 1;
193+
#coder-artifacts .output-html .html-container {
194+
height: 100%;
189195
}
190196
191-
#code-artifacts-code-drawer .output-code {
197+
#coder-artifacts-code-drawer .output-code {
192198
flex:1;
193199
}
194-
#code-artifacts-code-drawer .output-code .ms-gr-ant-spin-nested-loading {
200+
#coder-artifacts-code-drawer .output-code .ms-gr-ant-spin-nested-loading {
195201
min-height: 100%;
196202
}
197203
"""
@@ -277,10 +283,13 @@ def clear_history(e: gr.EventData, state_value):
277283

278284
# Right Column
279285
with antd.Col(span=24, md=16):
280-
with antd.Card(title="Output",
281-
elem_style=dict(height="100%"),
282-
styles=dict(body=dict(height="100%")),
283-
elem_id="output-container"):
286+
with antd.Card(
287+
title="Output",
288+
elem_style=dict(height="100%",
289+
display="flex",
290+
flexDirection="column"),
291+
styles=dict(body=dict(height=0, flex=1)),
292+
elem_id="output-container"):
284293
# Output Container Extra
285294
with ms.Slot("extra"):
286295
with ms.Div(elem_id="output-container-extra"):
@@ -298,6 +307,7 @@ def clear_history(e: gr.EventData, state_value):
298307
"🧑‍💻 View Code", type="primary")
299308
# Output Content
300309
with antd.Tabs(
310+
elem_style=dict(height="100%"),
301311
active_key="empty",
302312
render_tab_bar="() => null") as state_tab:
303313
with antd.Tabs.Item(key="empty"):
@@ -333,7 +343,7 @@ def clear_history(e: gr.EventData, state_value):
333343
placement="right",
334344
get_container=
335345
"() => document.querySelector('.gradio-container')",
336-
elem_id="code-artifacts-code-drawer",
346+
elem_id="coder-artifacts-code-drawer",
337347
styles=dict(
338348
body=dict(display="flex",
339349
flexDirection="column-reverse")),

‎frontend/antd/splitter/splitter.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@ export const Splitter = sveltify<GetProps<typeof ASplitter>>(
1818
if (!item) {
1919
return null;
2020
}
21+
2122
const { el, props: panelProps } = item;
23+
2224
return (
2325
<ASplitter.Panel {...panelProps} key={index}>
2426
{el && <ReactSlot slot={el} />}

‎frontend/fixtures.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ declare module '*?raw' {
1111
export default string;
1212
}
1313

14+
declare module '*css' {}
15+
1416
interface Window {
1517
__gradio_space__: any;
1618
}

‎frontend/globals/components/markdown/index.tsx‎

Lines changed: 44 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
1-
import React, { useEffect, useMemo, useRef, useState } from 'react';
1+
import React, {
2+
useCallback,
3+
useEffect,
4+
useMemo,
5+
useRef,
6+
useState,
7+
} from 'react';
28
import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
39
import { useMemoizedFn } from '@utils/hooks/useMemoizedFn';
410
import cls from 'classnames';
5-
import render_math_in_element from 'katex/contrib/auto-render';
611

712
import { sanitize } from './sanitize';
813
import {
@@ -13,7 +18,6 @@ import {
1318
renderMermaid,
1419
} from './utils';
1520

16-
import 'katex/dist/katex.min.css';
1721
import './markdown.less';
1822

1923
function escapeRegExp(string: string): string {
@@ -59,6 +63,8 @@ const defaultLatexDelimiters = [
5963
{ left: '\\[', right: '\\]', display: true },
6064
];
6165

66+
let katexLoaded = false;
67+
6268
export const Markdown: React.FC<MarkdownProps> = ({
6369
value: message,
6470
headerLinks: header_links,
@@ -89,6 +95,19 @@ export const Markdown: React.FC<MarkdownProps> = ({
8995
});
9096
}, [header_links, latex_delimiters, line_breaks]);
9197

98+
const hasMathSyntax = useCallback(
99+
(text: string) => {
100+
if (!latex_delimiters || latex_delimiters.length === 0) {
101+
return false;
102+
}
103+
return latex_delimiters.some(
104+
(delimiter) =>
105+
text.includes(delimiter.left) && text.includes(delimiter.right)
106+
);
107+
},
108+
[latex_delimiters]
109+
);
110+
92111
const process_message = useMemoizedFn((value: string) => {
93112
let parsedValue = value;
94113

@@ -128,12 +147,28 @@ export const Markdown: React.FC<MarkdownProps> = ({
128147
await renderMermaid(el, themeMode);
129148
}
130149

131-
if (el && latex_delimiters && latex_delimiters.length > 0 && value) {
132-
const containsDelimiter = latex_delimiters.some(
133-
(delimiter) =>
134-
value.includes(delimiter.left) && value.includes(delimiter.right)
135-
);
136-
if (containsDelimiter) {
150+
if (
151+
el &&
152+
latex_delimiters &&
153+
latex_delimiters.length > 0 &&
154+
value &&
155+
hasMathSyntax(value)
156+
) {
157+
if (!katexLoaded) {
158+
await Promise.all([
159+
import('katex/dist/katex.min.css'),
160+
import('katex/contrib/auto-render'),
161+
]).then(([, { default: render_math_in_element }]) => {
162+
katexLoaded = true;
163+
render_math_in_element(el, {
164+
delimiters: latex_delimiters,
165+
throwOnError: false,
166+
});
167+
});
168+
} else {
169+
const { default: render_math_in_element } = await import(
170+
'katex/contrib/auto-render'
171+
);
137172
render_math_in_element(el, {
138173
delimiters: latex_delimiters,
139174
throwOnError: false,

0 commit comments

Comments
 (0)