Fix Json component serialization bug (#8934)

* Add code

* add code

* add changeset

* Add code

* trigger ci

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/sad-sides-grow.md

@@ -0,0 +1,5 @@
+---
+"gradio": patch
+---
+
+fix:Fix Json component serialization bug

gradio/components/base.py

@@ -19,7 +19,7 @@ import gradio_client.utils as client_utils
 from gradio import utils
 from gradio.blocks import Block, BlockContext
 from gradio.component_meta import ComponentMeta
-from gradio.data_classes import GradioDataModel, JsonData
+from gradio.data_classes import BaseModel, GradioDataModel
 from gradio.events import EventListener
 from gradio.layouts import Form
 from gradio.processing_utils import move_files_to_cache
@@ -209,6 +209,11 @@ class Component(ComponentBase, Block):
         ) = None
         load_fn, initial_value = self.get_load_fn_and_initial_value(value, inputs)
         initial_value = self.postprocess(initial_value)
+        # Serialize the json value so that it gets stored in the
+        # config as plain json, for images/audio etc. `move_files_to_cache`
+        # will call model_dump
+        if isinstance(initial_value, BaseModel):
+            initial_value = initial_value.model_dump()
         self.value = move_files_to_cache(
             initial_value,
             self,  # type: ignore
@@ -332,7 +337,7 @@ class Component(ComponentBase, Block):
             payload = self.data_model.from_json(payload)
             Path(flag_dir).mkdir(exist_ok=True)
             payload = payload.copy_to_dir(flag_dir).model_dump()
-        if isinstance(payload, JsonData):
+        if isinstance(payload, BaseModel):
             payload = payload.model_dump()
         if not isinstance(payload, str):
             payload = json.dumps(payload)

test/components/test_json.py

@@ -28,6 +28,8 @@ class TestJSON:
             "_selectable": False,
             "key": None,
         }
+        js_component = gr.Json(value={"a": 1, "b": 2})
+        assert js_component.get_config()["value"] == {"a": 1, "b": 2}
 
     def test_chatbot_selectable_in_config(self):
         with gr.Blocks() as demo: