feat: add progress indicator while compiling is running (#2)

- feat: add progress indicator while compiling is running (123e2d3d8d39202b366455f848e32424604d6394)


Co-authored-by: Alvaro Moran <tengomucho@users.noreply.huggingface.co>

app.py

@@ -147,13 +147,13 @@ def neuron_export(model_id: str, model_type: str, pipeline_name: str, task_or_pi
                   pr_destinations: List[str], custom_repo_id: str, custom_cache_repo: str, oauth_token: gr.OAuthToken):
     
     log_buffer = ""
-    def log(msg):
+    def log(msg, in_progress: bool = False):
         nonlocal log_buffer
         # Handle cases where the message from the backend is not a string
         if not isinstance(msg, str):
             msg = str(msg)
         log_buffer += msg + "\n"
-        return log_buffer
+        return log_buffer, gr.update(visible=in_progress)
 
     if oauth_token.token is None:
         yield log("You must be logged in to use this space")
@@ -169,14 +169,14 @@ def neuron_export(model_id: str, model_type: str, pipeline_name: str, task_or_pi
         if custom_cache_repo:
             os.environ['CUSTOM_CACHE_REPO'] = custom_cache_repo.strip()
         
-        yield log(f"🔑 Logging in ...")
+        yield log("🔑 Logging in ...", in_progress=True)
         try:
             api.model_info(model_id, token=oauth_token.token)
         except Exception as e:
             yield log(f"❌ Could not access model `{model_id}`: {e}")
             return
 
-        yield log(f"✅ Model `{model_id}` is accessible. Starting Neuron export...")
+        yield log(f"✅ Model `{model_id}` is accessible. Starting Neuron export...", in_progress=True)
         
         # UPDATED: Build pr_options with new structure
         pr_options = {
@@ -193,7 +193,7 @@ def neuron_export(model_id: str, model_type: str, pipeline_name: str, task_or_pi
             pipeline_name=pipeline_name if model_type == "diffusers (soon)" else None
         ):
             if isinstance(message, str):
-                yield log(message)
+                yield log(message, in_progress=True)
             else:  # It's the final result dictionary
                 final_message = "🎉 Process finished.\n"
                 if message.get("neuron_repo"):
@@ -284,9 +284,31 @@ button.gradio-button.lg.primary {
 #login-button:hover::after {
     left: 100%;
 }
+.loader {
+    width: 20px;
+    height: 20px;
+    border: 5px solid #d7d7d7;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+}
+@keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
 
 """
 
+LOADING_MESSAGE = """
+<div id="in_progress"><span class="loader">&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;Model export in progress...</div>
+"""
+
 with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Soft()) as demo:
     gr.Markdown("**You must be logged in to use this space**")
     gr.LoginButton(elem_id="login-button", elem_classes="center-button", min_width=250)
@@ -343,6 +365,8 @@ with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Soft()) as demo:
                 )
             
             btn = gr.Button("Export to Neuron", size="lg", variant="primary")
+
+            loading_message = gr.HTML(LOADING_MESSAGE, visible=False, elem_id="loaging_message")
             
             log_box = gr.Textbox(label="Logs", lines=20, interactive=False, show_copy_button=True)
             
@@ -376,7 +400,7 @@ with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Soft()) as demo:
                     custom_repo_id_textbox,
                     custom_cache_repo_textbox
                 ],
-                outputs=log_box,
+                outputs=[log_box, loading_message],
             )
 
         with gr.Tab("Get Started"):