Upload folder using huggingface_hub

Dockerfile

@@ -7,7 +7,7 @@ COPY --link --chown=1000 . .
 
 RUN mkdir -p /tmp/cache/
 RUN chmod a+rwx -R /tmp/cache/
-ENV TRANSFORMERS_CACHE=/tmp/cache/ 
+ENV TRANSFORMERS_CACHE=/tmp/cache/
 
 RUN pip install --no-cache-dir -r requirements.txt
 

README.md

@@ -2,8 +2,8 @@
 ---
 tags: [gradio-custom-component,gradio-template-Column,Modal, Popup]
 title: gradio_modal V0.0.2
-colorFrom: gray
-colorTo: indigo
+colorFrom: red
+colorTo: yellow
 sdk: docker
 pinned: false
 license: apache-2.0

app.py

@@ -7,6 +7,7 @@ with gr.Blocks() as demo:
         text_2 = gr.Textbox(label="Input 2")
         text_1.submit(lambda x:x, text_1, text_2)
         show_btn = gr.Button("Show Modal")
+        show_btn2 = gr.Button("Show Modal 2")
         gr.Examples(
             [["Text 1", "Text 2"], ["Text 3", "Text 4"]],
             inputs=[text_1, text_2],
@@ -14,8 +15,13 @@ with gr.Blocks() as demo:
     with gr.Tab("Tab 2"):
         gr.Markdown("This is tab 2")
     with Modal(visible=False) as modal:
-        gr.Markdown("Hello world!")
+        for i in range(5):
+            gr.Markdown("Hello world!")
+    with Modal(visible=False) as modal2:
+        for i in range(100):
+            gr.Markdown("Hello world!")
     show_btn.click(lambda: Modal(visible=True), None, modal)
+    show_btn2.click(lambda: Modal(visible=True), None, modal2)
 
 if __name__ == "__main__":
     demo.launch()

src/backend/gradio_modal/modal.pyi

@@ -102,8 +102,8 @@ class Modal(BlockContext, metaclass=ComponentMeta):
             preprocess: If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
             postprocess: If False, will not run postprocessing of component data before returning 'fn' output to the browser.
             cancels: A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish.
-            every: Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
-            trigger_mode: If "once" (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to "multiple", unlimited submissions are allowed while pending, and "always_last" (default for `.change()` event) would allow a second submission after the pending event is complete.
+            every: Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds.
+            trigger_mode: If "once" (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to "multiple", unlimited submissions are allowed while pending, and "always_last" (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete.
             js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
             concurrency_limit: If set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to "default" to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default).
             concurrency_id: If set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit.

src/demo/app.py

@@ -7,6 +7,7 @@ with gr.Blocks() as demo:
         text_2 = gr.Textbox(label="Input 2")
         text_1.submit(lambda x:x, text_1, text_2)
         show_btn = gr.Button("Show Modal")
+        show_btn2 = gr.Button("Show Modal 2")
         gr.Examples(
             [["Text 1", "Text 2"], ["Text 3", "Text 4"]],
             inputs=[text_1, text_2],
@@ -14,8 +15,13 @@ with gr.Blocks() as demo:
     with gr.Tab("Tab 2"):
         gr.Markdown("This is tab 2")
     with Modal(visible=False) as modal:
-        gr.Markdown("Hello world!")
+        for i in range(5):
+            gr.Markdown("Hello world!")
+    with Modal(visible=False) as modal2:
+        for i in range(100):
+            gr.Markdown("Hello world!")
     show_btn.click(lambda: Modal(visible=True), None, modal)
+    show_btn2.click(lambda: Modal(visible=True), None, modal2)
 
 if __name__ == "__main__":
     demo.launch()

src/frontend/Index.svelte

@@ -11,6 +11,7 @@
 	}>;
 
 	let element: HTMLElement | null = null;
+	let inner_element: HTMLElement | null = null;
 	const close = () => {
 		visible = false;
 		gradio.dispatch("blur");
@@ -30,13 +31,13 @@
 	class:hide={!visible}
 	id={elem_id}
 	on:click={(evt) => {
-		if (allow_user_close && evt.target === element) {
+		if (allow_user_close && (evt.target === element || evt.target === inner_element)) {
 			close();
 		}
 	}}
 >
-	<div class="modal-container">
-		<Block height="100%">
+	<div class="modal-container" bind:this={inner_element}	>
+		<Block allow_overflow={false} elem_classes={["modal-block"]}>
 			{#if allow_user_close}
 				<div class="close" on:click={close}>
 					<svg
@@ -114,9 +115,11 @@
 		backdrop-filter: blur(4px);
 	}
 	.modal-container {
+		position: relative;
 		padding: 0 var(--size-8);
 		margin: var(--size-8) auto;
-		max-height: calc(100% - var(--size-8));
+		height: 100%;
+		max-height: calc(100% - var(--size-16));
 		overflow-y: hidden;
 	}
 	.close {
@@ -139,6 +142,10 @@
 		font-size: var(--button-small-text-size);
 		cursor: pointer;
 	}
+	.modal :global(.modal-block) {
+		max-height: 100%;
+		overflow-y: auto !important;
+	}
 
 	.hide {
 		display: none;