Spaces:
Running
Running
| import gradio as gr | |
| from src.helper import * | |
| # Custom CSS to replicate the Google-style card design from the image | |
| custom_head_html = """ | |
| <link rel="stylesheet" href="https://africa.dlnlp.ai/sahara/font-awesome/css/font-awesome.min.css"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| <link rel="stylesheet" type="text/css" href="./public/css/style.min.css"> | |
| <script defer src="https://africa.dlnlp.ai/sahara//public/js/script.js"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Rubik:wght@400;600&display=swap" rel="stylesheet"> | |
| """ | |
| new_header_html = """ | |
| <center> | |
| <br><br><br> | |
| <img src="https://africa.dlnlp.ai/sahara/img/sahara_web_main.jpg" alt="Sahara logo" width="60%"> | |
| </p> | |
| </center> | |
| <br style="height:1px;"> | |
| """ | |
| google_style_css = """ | |
| div.gradio-container-5-34-1{ | |
| background:#FFFBF5 !important; | |
| } | |
| div.svelte-1nguped { | |
| background: white !important; | |
| } | |
| /* Main Content Area */ | |
| .content-section { | |
| padding: 60px 0; | |
| } | |
| .content-card { | |
| background-color: #fff; | |
| border-radius: 12px; | |
| box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); | |
| padding: 40px; | |
| margin-bottom: 40px; | |
| } | |
| .btn-cite { | |
| color: #7d3561; | |
| font-size: 16px; | |
| margin: 0 3px; /* Add spacing between multiple icons */ | |
| } | |
| .content-card h4 { | |
| font-family: "Rubik", sans-serif; | |
| color: #7d3561; | |
| } | |
| .content-card h2 { | |
| font-family: "Rubik", sans-serif; | |
| font-size: 30px; | |
| font-weight: 600; | |
| line-height: 1.25; | |
| letter-spacing: -1px; | |
| color: #2f3b7d; | |
| text-transform:none; | |
| /* font-size: 30px; | |
| font-weight: bold; | |
| color: #D97706; /* Brand Orange */ | |
| margin-top: 0; | |
| margin-bottom: 20px; */ | |
| } | |
| .content-card p { | |
| /* font-size: 18px; */ | |
| /* line-height: 1.7; */ | |
| } | |
| div.svelte-wv8on1{ | |
| # border: 2px solid #074e4a !important; | |
| border-top: 0 !important; | |
| /* background-color: #fff2eb !important; */ | |
| padding: 10px !important; | |
| } | |
| .padding.svelte-phx28p { | |
| padding:0 !important; | |
| } | |
| .tab-wrapper.svelte-1tcem6n.svelte-1tcem6n { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| position: relative; | |
| height: 0 !important; | |
| padding-bottom: 0 !important; | |
| } | |
| .selected.svelte-1tcem6n.svelte-1tcem6n { | |
| background-color: #7d3561 !important; | |
| color: #fff !important; | |
| } | |
| .tabs.svelte-1tcem6n.svelte-1tcem6n { | |
| /* border: 1px solid #dca02a !important; */ | |
| border-top: 0 !important; | |
| /* background-color: #dca02a !important; */ | |
| } | |
| button.svelte-1tcem6n.svelte-1tcem6n { | |
| color: #7d3561 !important; | |
| /* border: 1px solid #dca02a !important; */ | |
| font-weight: bold; | |
| /* font-size: 16px; */ | |
| padding: 8px 5px; | |
| } | |
| .tab-container.svelte-1tcem6n.svelte-1tcem6n:after { | |
| content: ""; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background-color: #7d3561 !important; | |
| } | |
| .gradio-container-5-34-1 .prose table, | |
| .gradio-container-5-34-1 .prose tr, | |
| .gradio-container-5-34-1 .prose td, | |
| .gradio-container-5-34-1 .prose th { | |
| border: 0 !important; | |
| border-top: 2px solid #dca02a; | |
| border-bottom: 2px solid #dca02a; | |
| } | |
| .gradio-container-5-34-1 .prose table { | |
| border-top: 2px solid #dca02a !important; | |
| border-bottom: 2px solid #dca02a !important; | |
| margin-bottom:20px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| width: 100%; | |
| border-collapse: collapse; | |
| table-layout: fixed; | |
| } | |
| .gradio-container-5-34-1 .prose thead tr { | |
| border-bottom: 2px solid #dca02a !important; | |
| } | |
| .gradio-container-5-34-1 .prose th { | |
| color: #7d3561; | |
| font-weight: bold; | |
| /* font-size: 20px; */ | |
| padding: 8px 5px; | |
| vertical-align: middle; | |
| border: 0 !important; | |
| } | |
| .gradio-container-5-34-1 .prose td { | |
| /* font-size: 18px; */ | |
| padding: 8px 5px; | |
| border: 0 !important; | |
| vertical-align: middle; | |
| } | |
| .gradio-container-5-34-1 .prose th:first-child, | |
| .gradio-container-5-34-1 .prose td:first-child { | |
| min-width: 400px !important; | |
| max-width: 400px !important; | |
| width:400px !important; | |
| text-align: left !important; | |
| } | |
| .gradio-container-5-34-1 .prose th:not(:first-child), | |
| .gradio-container-5-34-1 .prose td:not(:first-child) { | |
| min-width: 90px; | |
| max-width: 140px; | |
| width: auto; | |
| text-align: center; | |
| } | |
| """ | |
| introduction_text = """ | |
| """ | |
| # with gr.Blocks(title="Sahara Leaderboard", css=custom_css) as demo: | |
| # with gr.Blocks(title="Sahara Leaderboard") as demo: | |
| with gr.Blocks(css=google_style_css) as demo: | |
| # Use elem_classes to apply our custom CSS to this group | |
| gr.HTML(new_header_html) | |
| # gr.Markdown(introduction_text) | |
| # with gr.Group(elem_classes="content-card"): | |
| # gr.Markdown(introduction_text) | |
| # gr.Markdown( | |
| # "HI # 🏆 Model Evaluation Leaderboard (Clustered, Private HF Dataset)\n" | |
| # "- Language dropdown uses names, not ISO codes; e.g. Swahili = (swa+swh results).\n" | |
| # "- Tabs by cluster; each cluster tab shows only its tasks, with fixed column width via CSS HTML tables." | |
| # ) | |
| with gr.Group(elem_classes="content-card"): | |
| gr.Markdown("<br>") | |
| with gr.Tabs(): | |
| # Main leaderboard | |
| with gr.Tab("Main Leaderboard"): | |
| gr.HTML("<br><br><center><h2>Main Leaderboard</h2></center><br>") | |
| gr.HTML(df_to_html(main_overall_tab)) | |
| # Task Clusters leaderboards | |
| with gr.Tab("Task-Clusters Leaderboards"): | |
| gr.HTML("<br><br><center><h2>Task-Clusters Leaderboards</h2></center><br>") | |
| CLUSTERS_NAME=[cname for cname, cdf in cluster_tabs.items()] | |
| clusters_dropdown = gr.Dropdown(choices=CLUSTERS_NAME, label="Select Task-CLuster", interactive=True) | |
| def get_claster_table(cluster_name): | |
| for cname, cdf in cluster_tabs.items(): | |
| if cname== cluster_name: | |
| return cdf | |
| cluster_table_component = gr.HTML(df_to_html(get_claster_table(CLUSTERS_NAME[0])) if CLUSTERS_NAME else "<b>No cluser found</b>") | |
| def update_cluster_table(cluster_name): | |
| df = get_claster_table(cluster_name) | |
| return df_to_html(df) | |
| clusters_dropdown.change(update_cluster_table, clusters_dropdown, cluster_table_component) | |
| # for cname, cdf in cluster_tabs.items(): | |
| # with gr.Tab(f"{cname}"): | |
| # gr.HTML(df_to_html(cdf)) | |
| # Languages Leaderboards | |
| with gr.Tab("Language-Specific Leaderboards"): | |
| gr.HTML("<br><br><center><h2>Language-Specific Leaderboards</h2></center><br>") | |
| lang_dropdown = gr.Dropdown(choices=LANG_NAME_LIST, label="Select Language", interactive=True) | |
| lang_table_component = gr.HTML(df_to_html(get_lang_table(LANG_NAME_LIST[0])) if LANG_NAME_LIST else "<b>No languages found</b>") | |
| def update_lang_table(lang_name): | |
| df = get_lang_table(lang_name) | |
| return df_to_html(df) | |
| lang_dropdown.change(update_lang_table, lang_dropdown, lang_table_component) | |
| if __name__ == "__main__": | |
| demo.launch()#share=True) |