Adds accepts parameter to Code component to control filepath/string (#3450)

* test

* wording

* remove show label

* show label

* adding example

* add examples

* make change

* Code

gradio/components.py

@@ -8,7 +8,6 @@ import inspect
 import json
 import math
 import operator
-import os
 import random
 import tempfile
 import uuid
@@ -5368,7 +5367,7 @@ class Code(Changeable, IOComponent, SimpleSerializable):
     """
     Creates a Code editor for entering, editing or viewing code.
     Preprocessing: passes a {str} of code into the function.
-    Postprocessing: expects the function to return a {str} filepath or a {str} of code.
+    Postprocessing: expects the function to return a {str} of code or a single-elment {tuple}: (string filepath,)
     """
 
     languages = [
@@ -5383,6 +5382,7 @@ class Code(Changeable, IOComponent, SimpleSerializable):
         "dockerfile",
         "shell",
         "r",
+        None,
     ]
 
     def __init__(
@@ -5407,6 +5407,7 @@ class Code(Changeable, IOComponent, SimpleSerializable):
             visible: If False, component will be hidden.
             elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
         """
+        assert language in Code.languages, f"Language {language} not supported."
         self.language = language
         IOComponent.__init__(
             self,
@@ -5427,8 +5428,8 @@ class Code(Changeable, IOComponent, SimpleSerializable):
         }
 
     def postprocess(self, y):
-        if y is not None and os.path.isfile(y):
-            with open(y) as file_data:
+        if y is not None and isinstance(y, tuple):
+            with open(y[0]) as file_data:
                 return file_data.read()
         return y
 

test/test_components.py

@@ -2567,7 +2567,8 @@ class TestCode:
         test_file_dir = Path(Path(__file__).parent, "test_files")
         path = str(Path(test_file_dir, "test_label_json.json"))
         with open(path) as f:
-            assert code.postprocess(path) == f.read()
+            assert code.postprocess(path) == path
+            assert code.postprocess((path, )) == f.read()
 
         assert code.serialize("def fn(a):\n  return a") == "def fn(a):\n  return a"
         assert code.deserialize("def fn(a):\n  return a") == "def fn(a):\n  return a"

ui/packages/app/src/components/Dataset/ExampleComponents/Code.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { Value } from "../../Audio/types";
+
+	export let value: Value;
+	export let type: "gallery" | "table";
+	export let selected: boolean = false;
+</script>
+
+<pre
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected>{value}</pre>
+
+<style>
+	pre {
+		text-align: left;
+	}
+	.gallery {
+		padding: var(--size-1) var(--size-2);
+	}
+</style>

ui/packages/app/src/components/Dataset/directory.ts

@@ -15,6 +15,7 @@ import ExampleColorPicker from "./ExampleComponents/ColorPicker.svelte";
 import ExampleTimeSeries from "./ExampleComponents/TimeSeries.svelte";
 import ExampleMarkdown from "./ExampleComponents/Markdown.svelte";
 import ExampleHTML from "./ExampleComponents/HTML.svelte";
+import ExampleCode from "./ExampleComponents/Code.svelte";
 
 export const component_map = {
 	dropdown: ExampleDropdown,
@@ -33,5 +34,6 @@ export const component_map = {
 	colorpicker: ExampleColorPicker,
 	timeseries: ExampleTimeSeries,
 	markdown: ExampleMarkdown,
-	html: ExampleHTML
+	html: ExampleHTML,
+	code: ExampleCode
 };

ui/packages/code/Index.svelte

@@ -22,6 +22,7 @@
 	export let visible: boolean = true;
 	export let mode: "static" | "dynamic";
 	export let label: string = "Code";
+	export let show_label: boolean = true;
 	export let loading_status: LoadingStatus;
 
 	let dark_mode = target.classList.contains("dark");
@@ -33,7 +34,7 @@
 	<Block variant={"solid"} padding={false} {elem_id} {visible}>
 		<StatusTracker {...loading_status} />
 
-		<BlockLabel Icon={CodeIcon} {label} />
+		<BlockLabel Icon={CodeIcon} {show_label} {label} />
 
 		{#if !value}
 			<Empty size="large" unpadded_box={true}>
@@ -49,7 +50,7 @@
 	<Block variant={"solid"} padding={false} {elem_id} {visible}>
 		<StatusTracker {...loading_status} />
 
-		<BlockLabel Icon={CodeIcon} {label} />
+		<BlockLabel Icon={CodeIcon} {show_label} {label} />
 
 		<Code bind:value {language} {dark_mode} />
 	</Block>