add FullStackBench Examples

README.md

@@ -1,5 +1,5 @@
 ---
-title: Qwen2.5 Coder Artifacts
+title: Qwen2.5 Coder Artifacts (+SambaNova+FullStackBench)
 emoji: 🐢
 colorFrom: gray
 colorTo: red

app.py

@@ -1,6 +1,7 @@
 import os
 import re
 import base64
+import json
 from typing import Dict, List, Optional, Tuple
 
 import gradio as gr
@@ -55,12 +56,166 @@ def demo_card_click(e: gr.EventData):
     index = e._data['component']['index']
     return DEMO_LIST[index]['description']
 
-with gr.Blocks(css_paths="app.css") as demo:
+
+def read_jsonl(fn):
+    with open(fn, encoding="utf-8") as f:
+        return [json.loads(l) for l in f.readlines()]    
+
+def get_item_by_index(item_list, index, val=None):
+    if val is not None and val in item_list:
+        return val
+    if len(item_list) > index:
+        return item_list[index]
+    return ""
+
+def get_item_list(locale="zh", programming_language="", category="", difficulty="", debugInfo=""):
+    samples = read_jsonl(f'./FullStackBench_data/fsb_{locale}_20241204.jsonl')
+    item_list_count = {}
+    item_samples = []
+    for sample in samples:
+        labels = sample['labels']
+        content = [sample['content']]
+        title = f"{labels['programming_language']}/{labels['category']}/{labels['difficulty']}"
+        sample_dict = [title, content, labels['programming_language']=='html']
+        if (locale != "" and labels['locale'] == locale): 
+            if programming_language == "":
+                item = labels['programming_language']
+                item_list_count[item] = item_list_count.get(item, 0) + 1
+                item_samples.append(sample_dict)
+            elif category == "" and labels['programming_language'] == programming_language:
+                item = labels['category']
+                item_list_count[item] = item_list_count.get(item, 0) + 1
+                item_samples.append(sample_dict)
+            elif difficulty == "" and labels['programming_language'] == programming_language and labels['category'] == category:
+                item = labels['difficulty']
+                item_list_count[item] = item_list_count.get(item, 0) + 1
+                item_samples.append(sample_dict)
+            elif labels['programming_language'] == programming_language and labels['category'] == category and labels['difficulty'] == difficulty:
+                item = labels['difficulty']
+                item_list_count[item] = item_list_count.get(item, 0) + 1
+                item_samples.append(sample_dict)
+    item_list = list(item_list_count.keys())
+    item_list_dropdown = []
+    all_count = 0
+    for item in item_list:
+        all_count += item_list_count[item]
+        item_list_dropdown.append((f"{item}[{item_list_count[item]}]",item))
+    item_list_dropdown.insert(0,(f"All[{all_count}]", ""))
+    return item_list, item_list_dropdown, item_samples
+
+item_list_locale = ["en", "zh"]
+item_list_dropdown_locale = [("en[1687]", "en"), ("zh[1687]", "zh")]
+item_list_programming_language, item_list_dropdown_programming_language, item_samples = get_item_list(locale=item_list_locale[0], programming_language="", category="", difficulty="")
+item_list_category, item_list_dropdown_category, item_samples = get_item_list(locale=item_list_locale[0], programming_language=get_item_by_index(item_list_programming_language, 0, "python"), category="", difficulty="")
+item_list_difficulty, item_list_dropdown_difficulty, item_samples = get_item_list(locale=item_list_locale[0], programming_language=get_item_by_index(item_list_programming_language, 0, "python"), category=get_item_by_index(item_list_category, 0, "Basic Programming"), difficulty="")
+item_list_select, item_list_select_dropdown, item_samples = get_item_list(locale=item_list_locale[0], programming_language=get_item_by_index(item_list_programming_language, 0, "python"), category=get_item_by_index(item_list_category, 0, "Basic Programming"), difficulty=get_item_by_index(item_list_difficulty, 0))
+
+def get_input_examples(): 
+    input_examples = []
+    for demo in DEMO_LIST:
+        input_examples.append([demo['title'], demo['description'], True])
+    return input_examples
+
+with gr.Blocks(css_paths="app.css", title="Qwen2.5 Coder Artifacts (+SambaNova+FullStackBench)") as demo:
     history_state = gr.State([])
     setting = gr.State({
         "system": SystemPrompt,
     })
 
+    with gr.Row():
+        use_system_prompt_example = gr.Checkbox(show_label=False, value=True, visible=False)
+        input_text_title= gr.TextArea(show_label=False, container=False, visible=False)
+        input_text_example = gr.TextArea(show_label=False, container=False, visible=False)  
+        with gr.Tab("Examples_HTML"):   
+            input_examples = get_input_examples()
+            gr.Examples(
+                    examples=input_examples,
+                    inputs=[input_text_title, input_text_example, use_system_prompt_example],
+                    outputs=None,
+                    label='',
+                    examples_per_page=10,
+                    cache_examples=False,
+                )       
+        with gr.Tab("Examples_from_FullStackBench"):
+            with gr.Row():
+                with gr.Column():
+                    locale = gr.Dropdown(
+                        choices=item_list_dropdown_locale,
+                        label="locale",
+                        value=get_item_by_index(item_list_locale, 0),
+                    ) 
+                with gr.Column():
+                    programming_language = gr.Dropdown(
+                        choices=item_list_dropdown_programming_language,
+                        label="programming_language",
+                        value=get_item_by_index(item_list_programming_language, 0, "python"),
+                    )  
+                with gr.Column():
+                    category = gr.Dropdown(
+                        choices=item_list_dropdown_category,
+                        label="category",
+                        value=get_item_by_index(item_list_category, 0,  "Basic Programming"),
+                    )
+                with gr.Column():
+                    difficulty = gr.Dropdown(
+                        choices=item_list_dropdown_difficulty,
+                        label="difficulty",
+                        value=get_item_by_index(item_list_difficulty, 0),
+                    )
+            with gr.Row():
+                test_examples = gr.Examples(
+                        examples=item_samples,
+                        inputs=[input_text_title, input_text_example, use_system_prompt_example],
+                        outputs=None,
+                        label='Examples:',
+                        examples_per_page=5,
+                        cache_examples=False,
+                    )
+            def locale_select(locale):
+                item_list_programming_language, item_list_dropdown_programming_language, item_samples = get_item_list(locale=locale, programming_language="", category="", difficulty="", debugInfo="locale_1_")
+                item_list_category, item_list_dropdown_category, item_samples = get_item_list(locale=locale, programming_language=get_item_by_index(item_list_programming_language, 0), category="", difficulty="", debugInfo="locale_2_")
+                item_list_difficulty, item_list_dropdown_difficulty, item_samples = get_item_list(locale=locale, programming_language=get_item_by_index(item_list_programming_language, 0), category=get_item_by_index(item_list_category, 0), difficulty="", debugInfo="locale_3_")
+                _, _, item_samples = get_item_list(locale=locale, programming_language=get_item_by_index(item_list_programming_language, 0), category=get_item_by_index(item_list_category, 0), difficulty=get_item_by_index(item_list_difficulty, 0), debugInfo="locale_4_")
+                return (gr.Dropdown(choices=item_list_dropdown_programming_language, value=item_list_dropdown_programming_language[0][1]),
+                        gr.Dropdown(choices=item_list_dropdown_category, value=item_list_dropdown_category[0][1]),
+                        gr.Dropdown(choices=item_list_dropdown_difficulty, value=item_list_dropdown_difficulty[0][1]),
+                        gr.Dataset(samples=item_samples))
+            locale.select(
+                fn=locale_select,
+                inputs=[locale],
+                outputs=[programming_language, category, difficulty, test_examples.dataset]
+            )
+            def programming_language_select(locale, programming_language):
+                item_list_category, item_list_dropdown_category, item_samples = get_item_list(locale=locale, programming_language=programming_language, category="", difficulty="", debugInfo="programming_language_1_")
+                item_list_difficulty, item_list_dropdown_difficulty, item_samples = get_item_list(locale=locale, programming_language=programming_language, category=get_item_by_index(item_list_category, 0), difficulty="", debugInfo="programming_language_2_")
+                _, _, item_samples = get_item_list(locale=locale, programming_language=programming_language, category=get_item_by_index(item_list_category, 0), difficulty=get_item_by_index(item_list_difficulty, 0), debugInfo="programming_language_3_")
+                return (gr.Dropdown(choices=item_list_dropdown_category, value=item_list_dropdown_category[0][1]),
+                        gr.Dropdown(choices=item_list_dropdown_difficulty, value=item_list_dropdown_difficulty[0][1]),
+                        gr.Dataset(samples=item_samples))
+            programming_language.select(
+                fn=programming_language_select,
+                inputs=[locale, programming_language],
+                outputs=[category, difficulty, test_examples.dataset]
+            )                
+            def category_select(locale, programming_language, category):
+                item_list_difficulty, item_list_dropdown_difficulty, item_samples = get_item_list(locale=locale, programming_language=programming_language, category=category, difficulty="", debugInfo="category_1_")
+                _, _, item_samples = get_item_list(locale=locale, programming_language=programming_language, category=category, difficulty=get_item_by_index(item_list_difficulty, 0), debugInfo="category_2_")
+                return (gr.Dropdown(choices=item_list_dropdown_difficulty, value=item_list_dropdown_difficulty[0][1]),
+                        gr.Dataset(samples=item_samples))
+            category.select(
+                fn=category_select,
+                inputs=[locale, programming_language, category],
+                outputs=[difficulty, test_examples.dataset]
+            )
+            def difficulty_select(locale, programming_language, category, difficulty):
+                _, _, item_samples = get_item_list(locale=locale, programming_language=programming_language, category=category, difficulty=difficulty, debugInfo="difficulty_1_")
+                return gr.Dataset(samples=item_samples)
+            difficulty.select(
+                fn=difficulty_select,
+                inputs=[locale, programming_language, category, difficulty],
+                outputs=[test_examples.dataset]
+            ) 
+
     with ms.Application() as app:
         with antd.ConfigProvider():
             with antd.Row(gutter=[32, 12]) as layout:
@@ -78,25 +233,17 @@ with gr.Blocks(css_paths="app.css") as demo:
                             </div>
                         """)
 
-                        input = antd.InputTextarea(
-                            size="large", allow_clear=True, placeholder="Please enter what kind of application you want")
-                        btn = antd.Button("send", type="primary", size="large")
-                        clear_btn = antd.Button("clear history", type="default", size="large")
-
-                        antd.Divider("examples")
-                        with antd.Flex(gap="small", wrap=True):
-                            with ms.Each(DEMO_LIST):
-                                with antd.Card(hoverable=True, as_item="card") as demoCard:
-                                    antd.CardMeta()
-                                demoCard.click(demo_card_click, outputs=[input])
-
-                        antd.Divider("setting")
+                        input = antd.InputTextarea(size="middle", allow_clear=True, placeholder="Please enter what kind of application you want")
+                        use_system_prompt = gr.Checkbox(value=True, label="use system prompt[for HTML]?")
+                        btn = antd.Button("send", type="primary", size="large")                        
 
                         with antd.Flex(gap="small", wrap=True):
                             settingPromptBtn = antd.Button(
                                 "⚙️ set system Prompt", type="default")
                             codeBtn = antd.Button("🧑‍💻 view code", type="default")
                             historyBtn = antd.Button("📜 history", type="default")
+                        
+                        clear_btn = antd.Button("clear history", type="default", size="large")
 
                     with antd.Modal(open=False, title="set system Prompt", width="800px") as system_prompt_modal:
                         systemPromptInput = antd.InputTextarea(
@@ -124,18 +271,30 @@ with gr.Blocks(css_paths="app.css") as demo:
                     history_drawer.close(lambda: gr.update(
                         open=False), inputs=[], outputs=[history_drawer])
 
+                # with antd.Col(span=24, md=16):
+                #     with ms.Div(elem_classes="right_panel"):
+                #         gr.HTML('<div class="render_header"><span class="header_btn"></span><span class="header_btn"></span><span class="header_btn"></span></div>')
+                #         with antd.Tabs(active_key="empty", render_tab_bar="() => null") as state_tab:
+                #             with antd.Tabs.Item(key="empty"):
+                #                 empty = antd.Empty(description="empty input", elem_classes="right_content")
+                #             with antd.Tabs.Item(key="loading"):
+                #                 loading = antd.Spin(True, tip="coding...", size="large", elem_classes="right_content")
+                #             with antd.Tabs.Item(key="render"):
+                #                 sandbox = gr.HTML(elem_classes="html_content")
                 with antd.Col(span=24, md=16):
                     with ms.Div(elem_classes="right_panel"):
                         gr.HTML('<div class="render_header"><span class="header_btn"></span><span class="header_btn"></span><span class="header_btn"></span></div>')
                         with antd.Tabs(active_key="empty", render_tab_bar="() => null") as state_tab:
-                            with antd.Tabs.Item(key="empty"):
+                            with antd.Tabs.Item(key="empty", label="Render_empty"):
                                 empty = antd.Empty(description="empty input", elem_classes="right_content")
-                            with antd.Tabs.Item(key="loading"):
+                            with antd.Tabs.Item(key="loading", label="Render_loading"):
                                 loading = antd.Spin(True, tip="coding...", size="large", elem_classes="right_content")
-                            with antd.Tabs.Item(key="render"):
+                            with antd.Tabs.Item(key="render_html", label="Render_HTML") as render_html:
                                 sandbox = gr.HTML(elem_classes="html_content")
+                            with antd.Tabs.Item(key="render_other", label="Render_Code") as render_other:
+                                sandbox_other = legacy.Markdown()
 
-        def generation_code(query: Optional[str], _setting: Dict[str, str], _history: Optional[History]):
+        def generation_code(query: Optional[str], use_system_prompt, _setting: Dict[str, str], _history: Optional[History]):
             if query is None:
                 query = ''
             if _history is None:
@@ -143,7 +302,10 @@ with gr.Blocks(css_paths="app.css") as demo:
 
             # Prepare the preprocess and postprocess functions
             def preprocess(message, history):
-                messages = [{'role': 'system', 'content': _setting['system']}]
+                if use_system_prompt:
+                    messages = [{'role': 'system', 'content': _setting['system']}]
+                else:
+                    messages = [{'role': 'system', 'content': ""}]
                 for user_msg, assistant_msg in history:
                     messages.append({'role': 'user', 'content': user_msg})
                     messages.append({'role': 'assistant', 'content': assistant_msg})
@@ -179,20 +341,65 @@ with gr.Blocks(css_paths="app.css") as demo:
 
             code = remove_code_block(assistant_response)
 
+            if "```html" in assistant_response:
+                sandbox_val = send_to_sandbox(code)
+                state_tab_val = gr.update(active_key="render_html")
+                render_html_val = gr.update(visible=True)
+                render_other_val = gr.update(visible=False)
+                sandbox_other_val = ""
+            else:
+                sandbox_val = ""
+                state_tab_val = gr.update(active_key="render_other")
+                render_html_val = gr.update(visible=False)
+                render_other_val = gr.update(visible=True)
+                sandbox_other_val = content
+
             yield {
                 code_output: assistant_response,
                 history_state: local_history,
-                sandbox: send_to_sandbox(code),
-                state_tab: gr.update(active_key="render"),
-                code_drawer: gr.update(open=False),
+                sandbox: sandbox_val,
+                state_tab:  state_tab_val,
+                code_drawer:  gr.update(open=False),
+                render_html: render_html_val,
+                render_other: render_other_val,
+                sandbox_other: sandbox_other_val,
             }
-
+            # yield {
+            #     code_output: assistant_response,
+            #     history_state: local_history,
+            #     sandbox: send_to_sandbox(code),
+            #     state_tab: gr.update(active_key="render"),
+            #     code_drawer: gr.update(open=False),
+            # }
+
+        def use_system_prompt_example_change(use_system_prompt):
+            return use_system_prompt            
+        use_system_prompt_example.change(
+                fn=use_system_prompt_example_change,
+                inputs=[use_system_prompt_example], 
+                outputs=[use_system_prompt], 
+            )
+        def input_text_example_change(input_text_example):
+            return input_text_example            
+        input_text_example.change(
+                fn=input_text_example_change,
+                inputs=[input_text_example], 
+                outputs=[input], 
+            )
+        
         btn.click(generation_code,
-                  inputs=[input, setting, history_state],
-                  outputs=[code_output, history_state, sandbox, state_tab, code_drawer])
+                  inputs=[input, use_system_prompt, setting, history_state],
+                  outputs=[code_output, history_state, sandbox, state_tab, code_drawer,
+                           render_html, render_other, sandbox_other])
 
         clear_btn.click(clear_history, inputs=[], outputs=[history_state])
 
+    with gr.Row():
+        DESCRIPTION = f'### This demo from [SambaNova-Qwen2.5-Coder-Artifacts](https://huggingface.co/spaces/sambanovasystems/SambaNova-Qwen2.5-Coder-Artifacts). <br>'
+        DESCRIPTION += f'More examples from [FullStackBench](https://github.com/bytedance/FullStackBench). <br>'
+        DESCRIPTION += f'Thanks for their excellent work.'
+        gr.Markdown(DESCRIPTION)
+
 if __name__ == "__main__":
-    demo.queue(default_concurrency_limit=20).launch(ssr_mode=False)
+    demo.queue(default_concurrency_limit=20).launch(ssr_mode=False, show_api=False)