new version

competitions/app.py

@@ -0,0 +1,72 @@
+import os
+
+from fastapi import FastAPI, Request
+from fastapi.responses import HTMLResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+
+from competitions.info import CompetitionInfo
+from competitions.leaderboard import Leaderboard
+
+
+HF_TOKEN = os.environ.get("HF_TOKEN", None)
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+COMPETITION_ID = os.getenv("COMPETITION_ID")
+COMP_INFO = CompetitionInfo(competition_id=COMPETITION_ID, autotrain_token=HF_TOKEN)
+
+app = FastAPI()
+static_path = os.path.join(BASE_DIR, "static")
+app.mount("/static", StaticFiles(directory=static_path), name="static")
+templates_path = os.path.join(BASE_DIR, "templates")
+templates = Jinja2Templates(directory=templates_path)
+
+
+@app.get("/", response_class=HTMLResponse)
+async def read_form(request: Request):
+    """
+    This function is used to render the HTML file
+    :param request:
+    :return:
+    """
+    if HF_TOKEN is None:
+        return templates.TemplateResponse("error.html", {"request": request})
+    context = {"request": request}
+    return templates.TemplateResponse("index.html", context)
+
+
+@app.get("/competition_info", response_class=JSONResponse)
+async def get_comp_info(request: Request):
+    info = COMP_INFO.competition_desc
+    # info = markdown.markdown(info)
+    resp = {"response": info}
+    return resp
+
+
+@app.get("/dataset_info", response_class=JSONResponse)
+async def get_dataset_info(request: Request):
+    info = COMP_INFO.dataset_desc
+    # info = markdown.markdown(info)
+    resp = {"response": info}
+    return resp
+
+
+@app.get("/leaderboard/{lb}", response_class=JSONResponse)
+async def get_leaderboard(request: Request, lb: str):
+    leaderboard = Leaderboard(
+        end_date=COMP_INFO.end_date,
+        eval_higher_is_better=COMP_INFO.eval_higher_is_better,
+        max_selected_submissions=COMP_INFO.selection_limit,
+        competition_id=COMPETITION_ID,
+        autotrain_token=HF_TOKEN,
+    )
+    df = leaderboard.fetch(private=lb == "private")
+    resp = {"response": df.to_markdown(index=False)}
+    return resp
+
+
+@app.get("/submissions", response_class=JSONResponse)
+async def get_submissions(request: Request, user_token: str):
+    info = COMP_INFO.submission_desc
+    # info = markdown.markdown(info)
+    resp = {"response": info}
+    return resp

competitions/cli/create.py

@@ -16,4 +16,4 @@ class CreateCompetitionAppCommand(BaseCompetitionsCommand):
     def run(self):
         from ..create import demo
 
-        demo.queue(concurrency_count=50).launch()
+        demo.queue().launch()

competitions/cli/run.py

@@ -24,4 +24,4 @@ class RunCompetitionsAppCommand(BaseCompetitionsCommand):
     def run(self):
         from ..competitions import demo
 
-        demo.queue(concurrency_count=50).launch()
+        demo.queue().launch()

competitions/competitions.py

@@ -129,14 +129,10 @@ with gr.Blocks(css=".tabitem {padding: 25px}") as demo:
             gr.Markdown(f"{competition_info.dataset_description}")
         with gr.TabItem("Public Leaderboard", id="public_leaderboard") as public_leaderboard:
             output_text_public = gr.Markdown()
-            output_df_public = gr.DataFrame(
-                row_count=(50, "dynamic"), overflow_row_behaviour="paginate", visible=False
-            )
+            output_df_public = gr.DataFrame(row_count=(50, "dynamic"), visible=False)
         with gr.TabItem("Private Leaderboard", id="private_leaderboard") as private_leaderboard:
             output_text_private = gr.Markdown()
-            output_df_private = gr.DataFrame(
-                row_count=(50, "dynamic"), overflow_row_behaviour="paginate", visible=False
-            )
+            output_df_private = gr.DataFrame(row_count=(50, "dynamic"), visible=False)
         with gr.TabItem("New Submission", id="new_submission"):
             if competition_info.submission_desc is None:
                 gr.Markdown(SUBMISSION_TEXT.format(competition_info.submission_limit))

competitions/templates/index.html

@@ -0,0 +1,270 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.css" rel="stylesheet" />
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            function showSubmissionModal() {
+                const modal = document.getElementById('submission-modal');
+                modal.classList.add('flex');
+                modal.classList.remove('hidden');
+            }
+
+            function hideSubmissionModal() {
+                const modal = document.getElementById('submission-modal');
+                modal.classList.remove('flex');
+                modal.classList.add('hidden');
+            }
+
+            function fetchAndDisplayCompetitionInfo() {
+                fetch('/competition_info')
+                    .then(response => {
+                        if (!response.ok) {
+                            throw new Error('Network response was not ok');
+                        }
+                        return response.json(); // Parse the JSON response
+                    })
+                    .then(data => {
+                        // Populate the 'content' div with the HTML from the response
+                        const contentDiv = document.getElementById('content');
+                        contentDiv.style.display = 'block';
+                        contentDiv.innerHTML = marked.parse(data.response);
+                    })
+                    .catch(error => {
+                        console.error('There has been a problem with your fetch operation:', error);
+                    });
+            }
+
+            function fetchAndDisplayDatasetInfo() {
+                fetch('/dataset_info')
+                    .then(response => {
+                        if (!response.ok) {
+                            throw new Error('Network response was not ok');
+                        }
+                        return response.json(); // Parse the JSON response
+                    })
+                    .then(data => {
+                        // Populate the 'content' div with the HTML from the response
+                        const contentDiv = document.getElementById('content');
+                        contentDiv.innerHTML = marked.parse(data.response);
+                    })
+                    .catch(error => {
+                        console.error('There has been a problem with your fetch operation:', error);
+                    });
+            }
+
+            function fetchAndDisplayPublicLeaderboard() {
+                fetch('/leaderboard/public')
+                    .then(response => {
+                        if (!response.ok) {
+                            throw new Error('Network response was not ok');
+                        }
+                        return response.json(); // Parse the JSON response
+                    })
+                    .then(data => {
+                        // Populate the 'content' div with the HTML from the response
+                        const contentDiv = document.getElementById('content');
+                        contentDiv.innerHTML = marked.parse(data.response);
+                    })
+                    .catch(error => {
+                        console.error('There has been a problem with your fetch operation:', error);
+                    });
+            }
+
+            function fetchAndDisplayPrivateLeaderboard() {
+                fetch('/leaderboard/private')
+                    .then(response => {
+                        if (!response.ok) {
+                            throw new Error('Network response was not ok');
+                        }
+                        return response.json(); // Parse the JSON response
+                    })
+                    .then(data => {
+                        // Populate the 'content' div with the HTML from the response
+                        const contentDiv = document.getElementById('content');
+                        contentDiv.innerHTML = marked.parse(data.response);
+                    })
+                    .catch(error => {
+                        console.error('There has been a problem with your fetch operation:', error);
+                    });
+            }
+
+            // Find the 'Home' link in the sidebar
+            const homeLink = document.getElementById('home');
+            const datasetLink = document.getElementById('dataset');
+            const publicLBLink = document.getElementById('public_lb');
+            const privateLBLink = document.getElementById('private_lb');
+            const submissions = document.getElementById('submissions');
+
+            // Add a click event listener to the 'Home' link
+            homeLink.addEventListener('click', function (event) {
+                event.preventDefault(); // Prevent the default link behavior
+                fetchAndDisplayCompetitionInfo(); // Fetch and display info on click
+            });
+
+            datasetLink.addEventListener('click', function (event) {
+                event.preventDefault(); // Prevent the default link behavior
+                fetchAndDisplayDatasetInfo(); // Fetch and display info on click
+            });
+
+            publicLBLink.addEventListener('click', function (event) {
+                event.preventDefault(); // Prevent the default link behavior
+                fetchAndDisplayPublicLeaderboard(); // Fetch and display info on click
+            });
+
+            privateLBLink.addEventListener('click', function (event) {
+                event.preventDefault(); // Prevent the default link behavior
+                fetchAndDisplayPrivateLeaderboard(); // Fetch and display info on click
+            });
+
+            submissions.addEventListener('click', function (event) {
+                event.preventDefault(); // Prevent the default link behavior
+                showSubmissionModal(); // Fetch and display info on click
+            });
+
+            // Fetch and display info when the page loads
+            fetchAndDisplayCompetitionInfo();
+
+            document.querySelector('#submission-modal .cancel').addEventListener('click', function () {
+                hideSubmissionModal();
+            });
+        });
+
+    </script>
+</head>
+
+<body class="flex h-screen bg-gray-100">
+    <!-- Sidebar -->
+    <aside id="sidebar-multi-level-sidebar"
+        class="fixed top-0 left-0 z-40 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0"
+        aria-label="Sidebar">
+        <div class="h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800">
+            <ul class="space-y-2 font-medium">
+                <li>
+                    <a href="#" id="home"
+                        class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                        <svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+                            viewBox="0 0 22 21" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+                            <path d="M1,10 L11,1 L21,10 L21,20 L1,20 Z" /> <!-- House structure -->
+                            <path d="M6,20 L6,14 L16,14 L16,20" /> <!-- Door -->
+                        </svg>
+
+                        <span class="ms-3">Home</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#" id="dataset"
+                        class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                        <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+                            aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+                            viewBox="0 0 18 18">
+                            <path
+                                d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z" />
+                        </svg>
+                        <span class="flex-1 ms-3 whitespace-nowrap">Dataset</span>
+                    </a>
+                </li>
+                <li>
+                    <button type="button"
+                        class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
+                        aria-controls="dropdown-example" data-collapse-toggle="dropdown-example">
+                        <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
+                            aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+                            viewBox="0 0 18 21">
+                            <path d="M2,4 L20,4 L20,16 L2,16 Z" />
+                            <path d="M6,17 L16,17 L16,18 L6,18 Z" />
+                        </svg>
+                        <span class="flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">Leaderboard</span>
+                        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                            viewBox="0 0 10 6">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="m1 1 4 4 4-4" />
+                        </svg>
+                    </button>
+                    <ul id="dropdown-example" class="hidden py-2 space-y-2">
+                        <li>
+                            <a href="#" id="public_lb"
+                                class="flex items-center w-full p-2 text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Public</a>
+                        </li>
+                        <li>
+                            <a href="#" id="private_lb"
+                                class="flex items-center w-full p-2 text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Private</a>
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    <a href="#"
+                        class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                        <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+                            aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+                            viewBox="0 0 20 18">
+                            <path
+                                d="M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z" />
+                        </svg>
+                        <span class="flex-1 ms-3 whitespace-nowrap">Team</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#" id="submissions"
+                        class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                        <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+                            aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+                            viewBox="0 0 20 20">
+                            <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.96 2.96 0 0 0 .13 5H5Z" />
+                            <path
+                                d="M6.737 11.061a2.961 2.961 0 0 1 .81-1.515l6.117-6.116A4.839 4.839 0 0 1 16 2.141V2a1.97 1.97 0 0 0-1.933-2H7v5a2 2 0 0 1-2 2H0v11a1.969 1.969 0 0 0 1.933 2h12.134A1.97 1.97 0 0 0 16 18v-3.093l-1.546 1.546c-.413.413-.94.695-1.513.81l-3.4.679a2.947 2.947 0 0 1-1.85-.227 2.96 2.96 0 0 1-1.635-3.257l.681-3.397Z" />
+                            <path
+                                d="M8.961 16a.93.93 0 0 0 .189-.019l3.4-.679a.961.961 0 0 0 .49-.263l6.118-6.117a2.884 2.884 0 0 0-4.079-4.078l-6.117 6.117a.96.96 0 0 0-.263.491l-.679 3.4A.961.961 0 0 0 8.961 16Zm7.477-9.8a.958.958 0 0 1 .68-.281.961.961 0 0 1 .682 1.644l-.315.315-1.36-1.36.313-.318Zm-5.911 5.911 4.236-4.236 1.359 1.359-4.236 4.237-1.7.339.341-1.699Z" />
+                        </svg>
+                        <span class="flex-1 ms-3 whitespace-nowrap">Submissions</span>
+                    </a>
+                </li>
+                <li>
+                    <label for="project_name" class="text-xs font-medium text-white">Hugging Face Token (read-only)
+                    </label>
+                    <input type="password" name="user_token" id="user_token"
+                        class="mt-1 block w-full border border-gray-300 px-3 py-1.5 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
+                </li>
+            </ul>
+        </div>
+    </aside>
+    <article class="prose p-4 sm:ml-64 max-w-5xl" id="content">
+    </article>
+    <div id="submission-modal" tabindex="-1"
+        class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
+        <div class="form-container max-w-5xl mx-auto mt-3 p-6 shadow-2xl bg-white">
+            <form action="#" method="post" class="gap-2" enctype="multipart/form-data">
+                <div class="form-group">
+                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">Upload
+                        file</label>
+                    <input
+                        class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 focus:outline-none "
+                        id="file_input" type="file">
+                </div>
+                <div class="form-group mt-2">
+                    <label for="params" class="text-sm font-medium text-gray-700">Submission description (optional)
+                    </label>
+                    <textarea id="params" name="params" rows="5" class="p-2.5 w-full text-sm text-gray-900"
+                        placeholder=""></textarea>
+                </div>
+                <div class="form-actions mt-6">
+                    <button data-modal-hide="submission-modal" type="button"
+                        class="confirm text-white bg-green-600 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center me-2">
+                        Submit
+                    </button>
+                    <button data-modal-hide="submission-modal" type="button"
+                        class="cancel text-white bg-red-600 hover:bg-red-100 focus:ring-4 focus:outline-none focus:ring-red-200 rounded-lg border border-red-200 text-sm font-medium px-5 py-2.5 hover:text-red-900 focus:z-10">Cancel</button>
+                </div>
+            </form>
+        </div>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.js"></script>
+</body>
+
+</html>

requirements.txt

@@ -1,6 +1,7 @@
-gradio==3.32.0
-joblib==1.2.0
-loguru>=0.6.0
-pandas>=2.0.1
-huggingface_hub>=0.10.1
-tabulate==0.9.0
+gradio==4.12.0
+joblib==1.3.2
+loguru==0.7.2
+pandas==2.1.4
+huggingface_hub==0.20.1
+tabulate==0.9.0
+markdown==3.5.1