Replace token by hugging face button (#34)

* update `gryannote_pipeline` demo app

* do not display token textbox if a token was set

* bump to version 0.2.0

Author: clement-pages

gryannote/pipeline/README.md

@@ -1,6 +1,6 @@
 
 # `gryannote_pipeline`
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.1.3%20-%20orange">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.2.0%20-%20orange">
 
 A component allowing a user to select a pipeline from a drop-down list
 
@@ -10,7 +10,14 @@ A component allowing a user to select a pipeline from a drop-down list
 import gradio as gr
 from gryannote_pipeline import PipelineSelector
 
+
+def update_token(oauth_token: gr.OAuthToken | None = None):
+    token = oauth_token.token if oauth_token else None
+    return PipelineSelector(show_config=True, token=token)
+
+
 with gr.Blocks() as demo:
+    login_button = gr.LoginButton()
     pipeline_selector = PipelineSelector(show_config=True)
 
     pipeline_selector.select(
@@ -20,7 +27,6 @@ with gr.Blocks() as demo:
         preprocess=False,
         postprocess=False,
     )
-
     pipeline_selector.change(
         fn=pipeline_selector.on_change,
         inputs=pipeline_selector,
@@ -148,7 +154,20 @@ bool
 
 </td>
 <td align="left"><code>True</code></td>
-<td align="left">optional</td>
+<td align="left">bool, optional</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_token_textbox</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">bool, optional</td>
 </tr>
 
 <tr>

gryannote/pipeline/backend/gryannote_pipeline/pipelineselector.py

@@ -56,6 +56,7 @@ def __init__(
         info: str | None = None,
         every: float | None = None,
         show_label: bool = True,
+        show_token_textbox: bool = True,
         show_config: bool = False,
         enable_edition: bool = False,
         container: bool = True,
@@ -93,8 +94,11 @@ def __init__(
             If `value` is a callable, run the function 'every' number of seconds while the client
             connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it)
             via this component's .load_event attribute.
-        show_label: optional
+        show_label: bool, optional
             If True, will display label.
+        show_token_textbox: bool, optional
+            If True, will display texbox to type a HuggingFace token. Automatically set to False if
+            a `token` is provided.
         show_config: bool, optional
             If True, will display pipeline hyperparameters configuration interface as soon as a pipeline
             has been loaded. Has no effect if `enable_edition` is set to False. Default to False.
@@ -161,11 +165,15 @@ def __init__(
             )
 
         self.token = token
+        # if a token has been provided, do not display token text box in the component interface
+        if self.token:
+            show_token_textbox = False
+
+        self.show_token_textbox = show_token_textbox
 
         # component is visible only if a pipeline was not already set
         visible = getattr(self, "_pipeline", None) is None
 
-
         self.show_config = show_config
         self.enable_edition = enable_edition
 

gryannote/pipeline/demo/app.py

@@ -1,7 +1,14 @@
 import gradio as gr
 from gryannote_pipeline import PipelineSelector
 
+
+def update_token(oauth_token: gr.OAuthToken | None = None):
+    token = oauth_token.token if oauth_token else None
+    return PipelineSelector(show_config=True, token=token)
+
+
 with gr.Blocks() as demo:
+    login_button = gr.LoginButton()
     pipeline_selector = PipelineSelector(show_config=True)
 
     pipeline_selector.select(
@@ -11,7 +18,6 @@
         preprocess=False,
         postprocess=False,
     )
-
     pipeline_selector.change(
         fn=pipeline_selector.on_change,
         inputs=pipeline_selector,
@@ -20,5 +26,8 @@
         postprocess=False,
     )
 
+    demo.load(update_token, inputs=None, outputs=pipeline_selector)
+
+
 if __name__ == "__main__":
     demo.launch()

gryannote/pipeline/frontend/Index.svelte

@@ -22,6 +22,7 @@
 	export let value_is_output = false;
 	export let pipelines: [string, string | number][];
 	export let show_label: boolean;
+	export let show_token_textbox: boolean;
 	export let show_config: boolean = false;
 	export let enable_edition: boolean = false;
 	export let container = true;
@@ -232,21 +233,21 @@
 	/>
 
 	{#if visible}
-
-		<div class="form">
-		<label for="token" class="label"> Enter your Hugging Face token:</label>
-		<input
-			data-testid="textbox"
-			type="text"
-			class="text-area"
-			name="token"
-			id="token"
-			placeholder="hf_xxxxxxx..."
-			aria-label="Enter your Hugging Face token"
-			maxlength="50"
-			disabled={!interactive}
-			bind:value={value.token}
-		/>
+		{#if show_token_textbox}
+			<label for="token" class="label"> Enter your Hugging Face token:</label>
+			<input
+				data-testid="textbox"
+				type="text"
+				class="text-area"
+				name="token"
+				id="token"
+				placeholder="hf_xxxxxxx..."
+				aria-label="Enter your Hugging Face token"
+				maxlength="50"
+				disabled={!interactive}
+				bind:value={value.token}
+			/>
+		{/if}
 		<Dropdown
 			bind:value_is_output
 			choices={pipelines}
@@ -282,21 +283,20 @@
 			</div>
 		{/if}
 		<div class="params-control" id="params-control"></div>
-			{#if value.name !== ""}
-				<div class="validation">
-					<BaseButton
-						{elem_id}
-						{elem_classes}
-						{scale}
-						{min_width}
-						visible={show_config}
-						on:click={() => gradio.dispatch("change", value)}
-					>
-						Update parameters
-					</BaseButton>
-				</div>
-			{/if}
-		</div>
+		{#if value.name !== ""}
+			<div class="validation">
+				<BaseButton
+					{elem_id}
+					{elem_classes}
+					{scale}
+					{min_width}
+					visible={show_config}
+					on:click={() => gradio.dispatch("change", value)}
+				>
+					Update parameters
+				</BaseButton>
+			</div>
+		{/if}
 	{/if}
 </Block>
 

gryannote/pipeline/frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gryannote_pipeline",
-  "version": "0.6.2",
+  "version": "0.2.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "Clément Pagés [[email protected]]",

gryannote/pipeline/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gryannote_pipeline"
-version = "0.1.3"
+version = "0.2.0"
 description = "A component allowing a user to select a pipeline from a drop-down list"
 readme = "README.md"
 license = "MIT"
@@ -34,7 +34,7 @@ classifiers = [
 dev = ["build", "twine"]
 
 [tool.hatch.build]
-artifacts = ["/backend/gryannote_pipeline/templates", "*.pyi"]
+artifacts = ["/backend/gryannote_pipeline/templates", "*.pyi", "backend/gryannote_pipeline/templates"]
 
 [tool.hatch.build.targets.wheel]
 packages = ["/backend/gryannote_pipeline"]