Repository: gradio-app/gradio

Issue:
Block wrapper handling
~~Two~~Three main points here:

- [x] We are wrapping _almost_ every component with `Block` inside the component istelf. This is okay but there is a lot of repetition. It might be able to do this at the app level, when we render the components from the config. This would simplify the components a little but would require a little refactoring. One to investigate rather than implement blindly.
- [x] `Radio` and `CheckboxGroup` use a `fieldset` element as their wrapper rather than the `Block` component, because they are a collection of form elements that exist together. This results in some duplication of code/classes, however small, to get consistent styling. We could pass a prop to `Blocks` and use `svelte:element` to switch between a `div` and a `fieldset`.
- [ ] Related to the final point, the form components that use a fieldset should use a `legend` element for their 'title'/'label' for accessibility reasons.


Discussion:

Resolving patch:
diff --git a/demo/kitchen_sink/run.py b/demo/kitchen_sink/run.py
--- a/demo/kitchen_sink/run.py
+++ b/demo/kitchen_sink/run.py
@@ -1,3 +1,4 @@
+import os
 import json
 
 import numpy as np
@@ -40,9 +41,9 @@ def fn(
         },  # Label
         (audio1[0], np.flipud(audio1[1]))
         if audio1 is not None
-        else "files/cantina.wav",  # Audio
-        np.flipud(im1) if im1 is not None else "files/cheetah1.jpg",  # Image
-        video if video is not None else "files/world.mp4",  # Video
+        else os.path.join(os.path.dirname(__file__),"files/cantina.wav"),  # Audio
+        np.flipud(im1) if im1 is not None else os.path.join(os.path.dirname(__file__),"files/cheetah1.jpg"),  # Image
+        video if video is not None else os.path.join(os.path.dirname(__file__),"files/world.mp4"),  # Video
         [
             ("The", "art"),
             ("quick brown", "adj"),
@@ -72,11 +73,11 @@ def fn(
         "<button style='background-color: red'>Click Me: "
         + radio
         + "</button>",  # HTML
-        "files/titanic.csv",
+        os.path.join(os.path.dirname(__file__),"files/titanic.csv"),
         df1,  # Dataframe
         np.random.randint(0, 10, (4, 4)),  # Dataframe
         [
-            im for im in [im1, im2, im3, im4, "files/cheetah1.jpg"] if im is not None
+            im for im in [im1, im2, im3, im4, os.path.join(os.path.dirname(__file__),"files/cheetah1.jpg")] if im is not None
         ],  # Carousel
         df2,  # Timeseries
     )
@@ -136,16 +137,16 @@ def fn(
             ["foo", "baz"],
             "baz",
             "bar",
-            "files/cheetah1.jpg",
-            "files/cheetah1.jpg",
-            "files/cheetah1.jpg",
-            "files/cheetah1.jpg",
-            "files/world.mp4",
-            "files/cantina.wav",
-            "files/cantina.wav",
-            "files/titanic.csv",
+            os.path.join(os.path.dirname(__file__),"files/cheetah1.jpg"),
+            os.path.join(os.path.dirname(__file__),"files/cheetah1.jpg"),
+            os.path.join(os.path.dirname(__file__),"files/cheetah1.jpg"),
+            os.path.join(os.path.dirname(__file__),"files/cheetah1.jpg"),
+            os.path.join(os.path.dirname(__file__),"files/world.mp4"),
+            os.path.join(os.path.dirname(__file__),"files/cantina.wav"),
+            os.path.join(os.path.dirname(__file__),"files/cantina.wav"),
+            os.path.join(os.path.dirname(__file__),"files/titanic.csv"),
             [[1, 2, 3], [3, 4, 5]],
-            "files/time.csv",
+            os.path.join(os.path.dirname(__file__),"files/time.csv"),
         ]
     ]
     * 3,
diff --git a/demo/main_note/run.py b/demo/main_note/run.py
--- a/demo/main_note/run.py
+++ b/demo/main_note/run.py
@@ -1,6 +1,6 @@
 from math import log2, pow
+import os
 
-import matplotlib.pyplot as plt
 import numpy as np
 from scipy.fftpack import fft
 
@@ -46,8 +46,8 @@ def main_note(audio):
     gr.Audio(source="microphone"),
     gr.Label(num_top_classes=4),
     examples=[
-        ["audio/recording1.wav"],
-        ["audio/cantina.wav"],
+        [os.path.join(os.path.dirname(__file__),"audio/recording1.wav")],
+        [os.path.join(os.path.dirname(__file__),"audio/cantina.wav")],
     ],
     interpretation="default",
 )
diff --git a/demo/zip_two_files/run.py b/demo/zip_two_files/run.py
--- a/demo/zip_two_files/run.py
+++ b/demo/zip_two_files/run.py
@@ -1,3 +1,4 @@
+import os
 from zipfile import ZipFile
 
 import gradio as gr
@@ -15,7 +16,8 @@ def zip_two_files(file1, file2):
     ["file", "file"],
     "file",
     examples=[
-        ["files/titanic.csv", "files/titanic.csv"],
+        [os.path.join(os.path.dirname(__file__),"files/titanic.csv"), 
+         os.path.join(os.path.dirname(__file__),"files/titanic.csv")],
     ],
 )
 


Test patch:
diff --git a/ui/packages/app/src/components/Carousel/Carousel.test.svelte b/ui/packages/app/src/components/Carousel/Carousel.test.svelte
--- a/ui/packages/app/src/components/Carousel/Carousel.test.svelte
+++ b/ui/packages/app/src/components/Carousel/Carousel.test.svelte
@@ -4,7 +4,7 @@
 	import api_logo from "../../../public/static/img/api-logo.svg";
 </script>
 
-<Carousel on:change>
+<Carousel on:change loading_status="complete">
 	<CarouselItem>
 		<h1>Item 1</h1>
 	</CarouselItem>
diff --git a/ui/packages/app/src/components/utils/helpers.test.ts b/ui/packages/app/src/components/utils/helpers.test.ts
--- a/ui/packages/app/src/components/utils/helpers.test.ts
+++ b/ui/packages/app/src/components/utils/helpers.test.ts
@@ -74,7 +74,7 @@ describe("randInt", () => {
 
 	test("respects min and max when negative", () => {
 		const n = randInt(-100, -10);
-		assert.ok(n > -100 && n < -10);
+		assert.ok(n >= -100 && n <= -10);
 	});
 });
 
diff --git a/ui/packages/app/test/blocks-basic.spec.ts b/ui/packages/app/test/blocks-basic.spec.ts
--- a/ui/packages/app/test/blocks-basic.spec.ts
+++ b/ui/packages/app/test/blocks-basic.spec.ts
@@ -68,6 +68,6 @@ test("can run an api request and display the data", async ({ page }) => {
 		page.waitForResponse("**/api/predict/")
 	]);
 
-	const json = await page.locator(".output-json");
+	const json = await page.locator("data-testid=json");
 	await expect(json).toContainText(`Covid: 0.75, Lung Cancer: 0.25`);
 });