diff --git a/.changeset/beige-houses-shine.md b/.changeset/beige-houses-shine.md
new file mode 100644
index 0000000000000..8444e14f5e531
--- /dev/null
+++ b/.changeset/beige-houses-shine.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:No token passed by default in `gr.load()`
diff --git a/.changeset/blue-zoos-marry.md b/.changeset/blue-zoos-marry.md
new file mode 100644
index 0000000000000..6cb830aae59ed
--- /dev/null
+++ b/.changeset/blue-zoos-marry.md
@@ -0,0 +1,15 @@
+---
+"@gradio/atoms": minor
+"@gradio/button": minor
+"@gradio/checkboxgroup": minor
+"@gradio/datetime": minor
+"@gradio/dropdown": minor
+"@gradio/form": minor
+"@gradio/multimodaltextbox": minor
+"@gradio/number": minor
+"@gradio/radio": minor
+"@gradio/textbox": minor
+"gradio": minor
+---
+
+feat:Adding new themes to Gradio 5.0
diff --git a/.changeset/breezy-olives-wonder.md b/.changeset/breezy-olives-wonder.md
new file mode 100644
index 0000000000000..3473bae75c72d
--- /dev/null
+++ b/.changeset/breezy-olives-wonder.md
@@ -0,0 +1,6 @@
+---
+"@gradio/chatbot": minor
+"gradio": minor
+---
+
+feat:Small tweak to how thoughts are shown in `gr.Chatbot`
diff --git a/.changeset/bright-apes-fly.md b/.changeset/bright-apes-fly.md
new file mode 100644
index 0000000000000..9c2489268e0c1
--- /dev/null
+++ b/.changeset/bright-apes-fly.md
@@ -0,0 +1,7 @@
+---
+"@gradio/audio": minor
+"gradio": minor
+"website": minor
+---
+
+feat:Start/stop recoding from the backend. Add guide on conversational chatbots
diff --git a/.changeset/bright-garlics-melt.md b/.changeset/bright-garlics-melt.md
new file mode 100644
index 0000000000000..ec3c8247b3f72
--- /dev/null
+++ b/.changeset/bright-garlics-melt.md
@@ -0,0 +1,9 @@
+---
+"@gradio/core": minor
+"@self/app": minor
+"@self/spa": minor
+"@self/tootils": minor
+"gradio": minor
+---
+
+feat:SSR e2e + fixes
diff --git a/.changeset/brown-queens-begin.md b/.changeset/brown-queens-begin.md
new file mode 100644
index 0000000000000..bd67e57266840
--- /dev/null
+++ b/.changeset/brown-queens-begin.md
@@ -0,0 +1,9 @@
+---
+"@gradio/lite": minor
+"@gradio/tabitem": minor
+"@gradio/tabs": minor
+"gradio": minor
+"website": minor
+---
+
+feat:Playground requirements tab
diff --git a/.changeset/busy-jokes-sit.md b/.changeset/busy-jokes-sit.md
new file mode 100644
index 0000000000000..299e0a7e2a333
--- /dev/null
+++ b/.changeset/busy-jokes-sit.md
@@ -0,0 +1,8 @@
+---
+"@gradio/icons": minor
+"@gradio/multimodaltextbox": minor
+"@gradio/textbox": minor
+"gradio": minor
+---
+
+feat:Built-in submit and stop buttons in `gr.ChatInterface(multimodal=False)`, adding `submit_btn` and `stop_btn` props to `gr.Textbox()` and `gr.MultimodalText()`
diff --git a/.changeset/busy-lizards-heal.md b/.changeset/busy-lizards-heal.md
new file mode 100644
index 0000000000000..e95bd65e24277
--- /dev/null
+++ b/.changeset/busy-lizards-heal.md
@@ -0,0 +1,6 @@
+---
+"gradio": minor
+"gradio_client": minor
+---
+
+feat:Fix most flaky Python tests in `5.0-dev` branch
diff --git a/.changeset/busy-tools-chew.md b/.changeset/busy-tools-chew.md
new file mode 100644
index 0000000000000..d79fcff9695b1
--- /dev/null
+++ b/.changeset/busy-tools-chew.md
@@ -0,0 +1,9 @@
+---
+"@gradio/chatbot": minor
+"@gradio/icons": minor
+"@gradio/imageeditor": minor
+"@gradio/statustracker": minor
+"gradio": minor
+---
+
+feat:Move buttons from chat_interface into Chatbot
diff --git a/.changeset/calm-jobs-hope.md b/.changeset/calm-jobs-hope.md
new file mode 100644
index 0000000000000..d30df1d87d00d
--- /dev/null
+++ b/.changeset/calm-jobs-hope.md
@@ -0,0 +1,7 @@
+---
+"@gradio/tabitem": minor
+"@gradio/tabs": minor
+"gradio": minor
+---
+
+feat:Redesign `gr.Tabs()`
diff --git a/.changeset/calm-monkeys-argue.md b/.changeset/calm-monkeys-argue.md
new file mode 100644
index 0000000000000..a1c24afe681b7
--- /dev/null
+++ b/.changeset/calm-monkeys-argue.md
@@ -0,0 +1,18 @@
+---
+"@gradio/annotatedimage": minor
+"@gradio/atoms": minor
+"@gradio/audio": minor
+"@gradio/file": minor
+"@gradio/gallery": minor
+"@gradio/image": minor
+"@gradio/imageeditor": minor
+"@gradio/json": minor
+"@gradio/model3d": minor
+"@gradio/simpleimage": minor
+"@gradio/upload": minor
+"@gradio/video": minor
+"@gradio/wasm": minor
+"gradio": minor
+---
+
+feat:Improve Icon Button consistency 
diff --git a/.changeset/calm-planets-send.md b/.changeset/calm-planets-send.md
new file mode 100644
index 0000000000000..b8de4df88a17e
--- /dev/null
+++ b/.changeset/calm-planets-send.md
@@ -0,0 +1,7 @@
+---
+"@gradio/core": minor
+"@self/spa": minor
+"gradio": minor
+---
+
+feat:Fix reload mode and streaming in 5.0 dev
diff --git a/.changeset/chatty-houses-do.md b/.changeset/chatty-houses-do.md
new file mode 100644
index 0000000000000..73b4a7af4ff92
--- /dev/null
+++ b/.changeset/chatty-houses-do.md
@@ -0,0 +1,6 @@
+---
+"@gradio/markdown": minor
+"gradio": minor
+---
+
+feat:Use `container` param in `gr.Markdown`
diff --git a/.changeset/chilly-dragons-smoke.md b/.changeset/chilly-dragons-smoke.md
new file mode 100644
index 0000000000000..7df9c33aedbdf
--- /dev/null
+++ b/.changeset/chilly-dragons-smoke.md
@@ -0,0 +1,7 @@
+---
+"@gradio/column": minor
+"@gradio/row": minor
+"gradio": minor
+---
+
+feat:Equal height columns
diff --git a/.changeset/chilly-jars-sip.md b/.changeset/chilly-jars-sip.md
new file mode 100644
index 0000000000000..570168c8e7b3c
--- /dev/null
+++ b/.changeset/chilly-jars-sip.md
@@ -0,0 +1,6 @@
+---
+"@gradio/colorpicker": minor
+"gradio": minor
+---
+
+feat:Update gr.ColorPicker UI
diff --git a/.changeset/chilly-places-sniff.md b/.changeset/chilly-places-sniff.md
new file mode 100644
index 0000000000000..5d02eeb9557db
--- /dev/null
+++ b/.changeset/chilly-places-sniff.md
@@ -0,0 +1,6 @@
+---
+"@gradio/slider": minor
+"gradio": minor
+---
+
+feat:Redesign `gr.Slider()`
diff --git a/.changeset/chilly-socks-poke.md b/.changeset/chilly-socks-poke.md
new file mode 100644
index 0000000000000..85f9336838641
--- /dev/null
+++ b/.changeset/chilly-socks-poke.md
@@ -0,0 +1,7 @@
+---
+"@gradio/code": minor
+"@gradio/icons": minor
+"gradio": minor
+---
+
+feat:Improve `gr.Code`
diff --git a/.changeset/chubby-hairs-beam.md b/.changeset/chubby-hairs-beam.md
new file mode 100644
index 0000000000000..78e3986753b57
--- /dev/null
+++ b/.changeset/chubby-hairs-beam.md
@@ -0,0 +1,6 @@
+---
+"gradio": minor
+"gradio_client": minor
+---
+
+feat:Drop python 3.8 and 3.9
diff --git a/.changeset/clean-pigs-arrive.md b/.changeset/clean-pigs-arrive.md
new file mode 100644
index 0000000000000..e67535c90ddad
--- /dev/null
+++ b/.changeset/clean-pigs-arrive.md
@@ -0,0 +1,6 @@
+---
+"@gradio/atoms": minor
+"gradio": minor
+---
+
+feat:Centre components within `Block` when height and width are set
diff --git a/.changeset/cold-lies-mate.md b/.changeset/cold-lies-mate.md
new file mode 100644
index 0000000000000..04757a87d7a48
--- /dev/null
+++ b/.changeset/cold-lies-mate.md
@@ -0,0 +1,7 @@
+---
+"@gradio/button": minor
+"@gradio/group": minor
+"gradio": minor
+---
+
+feat:Redesign `gr.Button()`
diff --git a/.changeset/cruel-heads-hunt.md b/.changeset/cruel-heads-hunt.md
new file mode 100644
index 0000000000000..9f8a50692a018
--- /dev/null
+++ b/.changeset/cruel-heads-hunt.md
@@ -0,0 +1,6 @@
+---
+"@gradio/button": patch
+"gradio": patch
+---
+
+fix:Center icon in button when no text is present
diff --git a/.changeset/cuddly-queens-melt.md b/.changeset/cuddly-queens-melt.md
new file mode 100644
index 0000000000000..69070def8ec18
--- /dev/null
+++ b/.changeset/cuddly-queens-melt.md
@@ -0,0 +1,8 @@
+---
+"@gradio/chatbot": minor
+"@gradio/client": minor
+"@gradio/core": minor
+"gradio": minor
+---
+
+feat:Disable liking user message in chatbot by default but make it configurable
diff --git a/.changeset/cute-rules-write.md b/.changeset/cute-rules-write.md
new file mode 100644
index 0000000000000..98ae2917b9b6d
--- /dev/null
+++ b/.changeset/cute-rules-write.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Remove two dependencies: `importlib_resources` and `urllib3` (if not in Wasm)
diff --git a/.changeset/cyan-spies-check.md b/.changeset/cyan-spies-check.md
new file mode 100644
index 0000000000000..0259a9f252cdc
--- /dev/null
+++ b/.changeset/cyan-spies-check.md
@@ -0,0 +1,5 @@
+---
+"gradio": patch
+---
+
+feat:Improve url downloads for file objects
diff --git a/.changeset/dark-cougars-fold.md b/.changeset/dark-cougars-fold.md
new file mode 100644
index 0000000000000..3c3288fce0325
--- /dev/null
+++ b/.changeset/dark-cougars-fold.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Prevent invalid values from being submitted to dropdown, etc.
diff --git a/.changeset/dark-moose-shine.md b/.changeset/dark-moose-shine.md
new file mode 100644
index 0000000000000..8f2b3da9bb89e
--- /dev/null
+++ b/.changeset/dark-moose-shine.md
@@ -0,0 +1,8 @@
+---
+"@gradio/chatbot": minor
+"@gradio/multimodaltextbox": minor
+"@gradio/textbox": minor
+"gradio": minor
+---
+
+feat:Chatbot Examples
diff --git a/.changeset/deep-bananas-switch.md b/.changeset/deep-bananas-switch.md
new file mode 100644
index 0000000000000..29005cbc79702
--- /dev/null
+++ b/.changeset/deep-bananas-switch.md
@@ -0,0 +1,6 @@
+---
+"gradio": minor
+"website": minor
+---
+
+feat:Deprecate type='tuples for chatbot and focus chatbot docs on 'messages' type
diff --git a/.changeset/deep-memes-cheat.md b/.changeset/deep-memes-cheat.md
new file mode 100644
index 0000000000000..429d9b4dd69ad
--- /dev/null
+++ b/.changeset/deep-memes-cheat.md
@@ -0,0 +1,7 @@
+---
+"@gradio/client": patch
+"@gradio/core": patch
+"gradio": patch
+---
+
+fix:Trigger state change event on iterators
diff --git a/.changeset/deep-ways-wink.md b/.changeset/deep-ways-wink.md
new file mode 100644
index 0000000000000..abb1b36134981
--- /dev/null
+++ b/.changeset/deep-ways-wink.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Postprocess hardening
diff --git a/.changeset/dirty-lions-follow.md b/.changeset/dirty-lions-follow.md
new file mode 100644
index 0000000000000..e1d472603a3d1
--- /dev/null
+++ b/.changeset/dirty-lions-follow.md
@@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:Expanding AI Playground Prompt for Qwen
diff --git a/.changeset/dirty-pugs-hunt.md b/.changeset/dirty-pugs-hunt.md
new file mode 100644
index 0000000000000..19924d0c8516b
--- /dev/null
+++ b/.changeset/dirty-pugs-hunt.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Adds TLS to FRP tunnel
diff --git a/.changeset/dry-frogs-argue.md b/.changeset/dry-frogs-argue.md
new file mode 100644
index 0000000000000..bde50194330b0
--- /dev/null
+++ b/.changeset/dry-frogs-argue.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Minor changes to flagging for 5.0
diff --git a/.changeset/dull-plants-trade.md b/.changeset/dull-plants-trade.md
new file mode 100644
index 0000000000000..9a6649bb3adfb
--- /dev/null
+++ b/.changeset/dull-plants-trade.md
@@ -0,0 +1,11 @@
+---
+"@gradio/audio": minor
+"@gradio/core": minor
+"@gradio/file": minor
+"@gradio/image": minor
+"@gradio/model3d": minor
+"@gradio/video": minor
+"gradio": minor
+---
+
+feat:Adds ability to block event trigger when file is uploading
diff --git a/.changeset/easy-files-serve.md b/.changeset/easy-files-serve.md
new file mode 100644
index 0000000000000..f8a389d5c3606
--- /dev/null
+++ b/.changeset/easy-files-serve.md
@@ -0,0 +1,10 @@
+---
+"@gradio/audio": minor
+"@gradio/client": minor
+"@gradio/core": minor
+"@gradio/icons": minor
+"@gradio/image": minor
+"gradio": minor
+---
+
+feat:Open audio/image input stream only when queue is ready
diff --git a/.changeset/easy-snakes-arrive.md b/.changeset/easy-snakes-arrive.md
new file mode 100644
index 0000000000000..bd8b95b967ae5
--- /dev/null
+++ b/.changeset/easy-snakes-arrive.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Equal height in row false by default
diff --git a/.changeset/every-breads-float.md b/.changeset/every-breads-float.md
new file mode 100644
index 0000000000000..c22bfe55199fa
--- /dev/null
+++ b/.changeset/every-breads-float.md
@@ -0,0 +1,9 @@
+---
+"@gradio/atoms": minor
+"@gradio/chatbot": minor
+"@gradio/icons": minor
+"@gradio/statustracker": minor
+"gradio": minor
+---
+
+feat:Move icons into `IconButtonWrapper`
diff --git a/.changeset/every-candies-sell.md b/.changeset/every-candies-sell.md
new file mode 100644
index 0000000000000..efba39dbbbe92
--- /dev/null
+++ b/.changeset/every-candies-sell.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Improve is_in_or_equal and fuzzer
diff --git a/.changeset/every-geese-shave.md b/.changeset/every-geese-shave.md
new file mode 100644
index 0000000000000..e36e996fad2ea
--- /dev/null
+++ b/.changeset/every-geese-shave.md
@@ -0,0 +1,8 @@
+---
+"@gradio/core": minor
+"@gradio/image": minor
+"@gradio/utils": minor
+"gradio": minor
+---
+
+feat:Streaming Guides 
diff --git a/.changeset/evil-clocks-visit.md b/.changeset/evil-clocks-visit.md
new file mode 100644
index 0000000000000..c31c3eb685db4
--- /dev/null
+++ b/.changeset/evil-clocks-visit.md
@@ -0,0 +1,6 @@
+---
+"gradio": minor
+"gradio_client": minor
+---
+
+feat:Only move files to the cache that have a meta key
diff --git a/.changeset/fancy-pianos-dig.md b/.changeset/fancy-pianos-dig.md
new file mode 100644
index 0000000000000..291793f193082
--- /dev/null
+++ b/.changeset/fancy-pianos-dig.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Enhance Lite E2E tests and fix a networking problem on Lite
diff --git a/.changeset/fast-trams-grin.md b/.changeset/fast-trams-grin.md
new file mode 100644
index 0000000000000..826947104b0da
--- /dev/null
+++ b/.changeset/fast-trams-grin.md
@@ -0,0 +1,9 @@
+---
+"@gradio/client": minor
+"@gradio/core": minor
+"@gradio/image": minor
+"gradio": minor
+"gradio_client": minor
+---
+
+feat:Send Streaming data over Websocket if possible. Also support base64 output format for images. 
diff --git a/.changeset/few-clowns-notice.md b/.changeset/few-clowns-notice.md
new file mode 100644
index 0000000000000..f00461a09705a
--- /dev/null
+++ b/.changeset/few-clowns-notice.md
@@ -0,0 +1,6 @@
+---
+"@gradio/button": minor
+"gradio": minor
+---
+
+feat:Adds a "huggingface" button variant, and makes it the default for `gr.LoginButton` and `gr.DuplicateButton`
diff --git a/.changeset/five-teeth-relax.md b/.changeset/five-teeth-relax.md
new file mode 100644
index 0000000000000..d428e3960d5cf
--- /dev/null
+++ b/.changeset/five-teeth-relax.md
@@ -0,0 +1,5 @@
+---
+"@gradio/preview": patch
+---
+
+fix:Fix package.json `exports` of @gradio/preview
diff --git a/.changeset/flat-chairs-fly.md b/.changeset/flat-chairs-fly.md
new file mode 100644
index 0000000000000..a0c0fa155d402
--- /dev/null
+++ b/.changeset/flat-chairs-fly.md
@@ -0,0 +1,20 @@
+---
+"@gradio/atoms": minor
+"@gradio/checkbox": minor
+"@gradio/checkboxgroup": minor
+"@gradio/colorpicker": minor
+"@gradio/core": minor
+"@gradio/datetime": minor
+"@gradio/dropdown": minor
+"@gradio/multimodaltextbox": minor
+"@gradio/nativeplot": minor
+"@gradio/number": minor
+"@gradio/radio": minor
+"@gradio/simpledropdown": minor
+"@gradio/simpletextbox": minor
+"@gradio/slider": minor
+"@gradio/textbox": minor
+"gradio": minor
+---
+
+feat:Allow `info=` to render markdown
diff --git a/.changeset/floppy-keys-heal.md b/.changeset/floppy-keys-heal.md
new file mode 100644
index 0000000000000..e8db79d627491
--- /dev/null
+++ b/.changeset/floppy-keys-heal.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Fix typo in `tunneling.py`
diff --git a/.changeset/floppy-nails-grab.md b/.changeset/floppy-nails-grab.md
new file mode 100644
index 0000000000000..b59772a49e004
--- /dev/null
+++ b/.changeset/floppy-nails-grab.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Object Detection From Webcam Stream Guide
diff --git a/.changeset/floppy-pandas-appear.md b/.changeset/floppy-pandas-appear.md
new file mode 100644
index 0000000000000..7b9880429471c
--- /dev/null
+++ b/.changeset/floppy-pandas-appear.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Disable sagemaker_check() for now
diff --git a/.changeset/funny-games-train.md b/.changeset/funny-games-train.md
new file mode 100644
index 0000000000000..cb7b2fdb799ca
--- /dev/null
+++ b/.changeset/funny-games-train.md
@@ -0,0 +1,7 @@
+---
+"@gradio/atoms": minor
+"@gradio/chatbot": minor
+"gradio": minor
+---
+
+feat:Fix chatinterface embedding height issues
diff --git a/.changeset/gold-bats-return.md b/.changeset/gold-bats-return.md
new file mode 100644
index 0000000000000..15e95f119465a
--- /dev/null
+++ b/.changeset/gold-bats-return.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Raise ChecksumMismatchError
diff --git a/.changeset/gold-kiwis-share.md b/.changeset/gold-kiwis-share.md
new file mode 100644
index 0000000000000..d81cfe1c24745
--- /dev/null
+++ b/.changeset/gold-kiwis-share.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Chat Interface Multimodal Fix & Fallback to `gr.Examples()`
diff --git a/.changeset/great-ghosts-find.md b/.changeset/great-ghosts-find.md
new file mode 100644
index 0000000000000..3913f00314fa1
--- /dev/null
+++ b/.changeset/great-ghosts-find.md
@@ -0,0 +1,9 @@
+---
+"@gradio/preview": minor
+"@self/app": minor
+"@self/build": minor
+"@self/spa": minor
+"gradio": minor
+---
+
+feat:Fix custom component CLI on main/5.0
diff --git a/.changeset/green-pigs-wonder.md b/.changeset/green-pigs-wonder.md
new file mode 100644
index 0000000000000..96d9dcf7dd062
--- /dev/null
+++ b/.changeset/green-pigs-wonder.md
@@ -0,0 +1,6 @@
+---
+"@gradio/audio": minor
+"gradio": minor
+---
+
+feat:Fix Cached Examples for Streamed Media
diff --git a/.changeset/green-wasps-invent.md b/.changeset/green-wasps-invent.md
new file mode 100644
index 0000000000000..9618604b12313
--- /dev/null
+++ b/.changeset/green-wasps-invent.md
@@ -0,0 +1,6 @@
+---
+"@self/spa": minor
+"gradio": minor
+---
+
+feat:add local fonts and update themes
diff --git a/.changeset/heavy-goats-grab.md b/.changeset/heavy-goats-grab.md
new file mode 100644
index 0000000000000..3a8bc2d745ad4
--- /dev/null
+++ b/.changeset/heavy-goats-grab.md
@@ -0,0 +1,10 @@
+---
+"@gradio/button": minor
+"@gradio/column": minor
+"@gradio/dataframe": minor
+"@gradio/row": minor
+"@gradio/tabs": minor
+"gradio": minor
+---
+
+feat:UI theme fixes
diff --git a/.changeset/heavy-memes-create.md b/.changeset/heavy-memes-create.md
new file mode 100644
index 0000000000000..32d86729376c5
--- /dev/null
+++ b/.changeset/heavy-memes-create.md
@@ -0,0 +1,6 @@
+---
+"@gradio/dataframe": minor
+"gradio": minor
+---
+
+feat:Tweak gr.Dataframe menu UX
diff --git a/.changeset/honest-plums-peel.md b/.changeset/honest-plums-peel.md
new file mode 100644
index 0000000000000..95a79e08017dd
--- /dev/null
+++ b/.changeset/honest-plums-peel.md
@@ -0,0 +1,6 @@
+---
+"@gradio/chatbot": minor
+"gradio": minor
+---
+
+feat:Chatbot bug fixes
diff --git a/.changeset/huge-corners-tease.md b/.changeset/huge-corners-tease.md
new file mode 100644
index 0000000000000..0a7a4fdacf0de
--- /dev/null
+++ b/.changeset/huge-corners-tease.md
@@ -0,0 +1,8 @@
+---
+"@gradio/core": minor
+"@gradio/lite": minor
+"@self/spa": minor
+"gradio": minor
+---
+
+feat:Remove lite/theme.css from the Git-managed file tree
diff --git a/.changeset/hungry-dragons-drum.md b/.changeset/hungry-dragons-drum.md
new file mode 100644
index 0000000000000..f7c5224f7afdc
--- /dev/null
+++ b/.changeset/hungry-dragons-drum.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Small tweaks to improve the DX for the "tuples"/"messages" argument in `gr.Chatbot`
diff --git a/.changeset/hungry-tips-sin.md b/.changeset/hungry-tips-sin.md
new file mode 100644
index 0000000000000..8136472702670
--- /dev/null
+++ b/.changeset/hungry-tips-sin.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Adds `strict_cors` parameter to `launch()`
diff --git a/.changeset/khaki-ducks-stare.md b/.changeset/khaki-ducks-stare.md
new file mode 100644
index 0000000000000..ae516e5c30f4d
--- /dev/null
+++ b/.changeset/khaki-ducks-stare.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Dont move files to cache automatically in chatbot postprocess
diff --git a/.changeset/khaki-ways-agree.md b/.changeset/khaki-ways-agree.md
new file mode 100644
index 0000000000000..9302d7063a44a
--- /dev/null
+++ b/.changeset/khaki-ways-agree.md
@@ -0,0 +1,6 @@
+---
+"@gradio/slider": minor
+"gradio": minor
+---
+
+feat:Fix `slider-color` var
diff --git a/.changeset/large-buttons-look.md b/.changeset/large-buttons-look.md
new file mode 100644
index 0000000000000..44a86e8734e15
--- /dev/null
+++ b/.changeset/large-buttons-look.md
@@ -0,0 +1,7 @@
+---
+"@gradio/core": minor
+"@gradio/dataframe": minor
+"gradio": minor
+---
+
+feat:Update gr.Dataframe UI with action popover
diff --git a/.changeset/large-impalas-take.md b/.changeset/large-impalas-take.md
new file mode 100644
index 0000000000000..efa8e826f6ee9
--- /dev/null
+++ b/.changeset/large-impalas-take.md
@@ -0,0 +1,6 @@
+---
+"@gradio/chatbot": patch
+"gradio": patch
+---
+
+fix:Ensure undo/try shows for final bot message in gr.Chatbot
diff --git a/.changeset/lazy-clubs-help.md b/.changeset/lazy-clubs-help.md
new file mode 100644
index 0000000000000..987753ba7e0d4
--- /dev/null
+++ b/.changeset/lazy-clubs-help.md
@@ -0,0 +1,9 @@
+---
+"@gradio/chatbot": minor
+"@gradio/icons": minor
+"@gradio/image": minor
+"@gradio/video": minor
+"gradio": minor
+---
+
+feat:Chatbot autoscroll
diff --git a/.changeset/legal-masks-pay.md b/.changeset/legal-masks-pay.md
new file mode 100644
index 0000000000000..c36f6c12ac39a
--- /dev/null
+++ b/.changeset/legal-masks-pay.md
@@ -0,0 +1,8 @@
+---
+"@gradio/html": minor
+"@gradio/markdown": minor
+"@gradio/utils": minor
+"gradio": minor
+---
+
+feat:Prevent HTML and Markdown height changing when status is hidden
diff --git a/.changeset/light-bats-arrive.md b/.changeset/light-bats-arrive.md
new file mode 100644
index 0000000000000..859277feba180
--- /dev/null
+++ b/.changeset/light-bats-arrive.md
@@ -0,0 +1,7 @@
+---
+"@gradio/core": minor
+"@gradio/gallery": minor
+"gradio": minor
+---
+
+feat:Video gallery
diff --git a/.changeset/long-donkeys-hang.md b/.changeset/long-donkeys-hang.md
new file mode 100644
index 0000000000000..cd3db25b6c7f3
--- /dev/null
+++ b/.changeset/long-donkeys-hang.md
@@ -0,0 +1,6 @@
+---
+"@gradio/markdown": minor
+"gradio": minor
+---
+
+feat:Fix overflowing markdown in Chatbot
diff --git a/.changeset/lovely-ties-live.md b/.changeset/lovely-ties-live.md
new file mode 100644
index 0000000000000..0969acd9888dd
--- /dev/null
+++ b/.changeset/lovely-ties-live.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Add support for 3rd party providers to `gr.load`, and provide a better UX for conversational models
diff --git a/.changeset/lucky-hotels-sort.md b/.changeset/lucky-hotels-sort.md
new file mode 100644
index 0000000000000..dda4642942351
--- /dev/null
+++ b/.changeset/lucky-hotels-sort.md
@@ -0,0 +1,7 @@
+---
+"@gradio/column": minor
+"gradio": minor
+"website": minor
+---
+
+feat:Remove grey background behind all components
diff --git a/.changeset/many-moons-like.md b/.changeset/many-moons-like.md
new file mode 100644
index 0000000000000..575cdcc08f44b
--- /dev/null
+++ b/.changeset/many-moons-like.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Fix custom component CLI unit tests
diff --git a/.changeset/mighty-goats-dance.md b/.changeset/mighty-goats-dance.md
new file mode 100644
index 0000000000000..5837c7bb9349a
--- /dev/null
+++ b/.changeset/mighty-goats-dance.md
@@ -0,0 +1,6 @@
+---
+"@gradio/code": minor
+"gradio": minor
+---
+
+feat:Add Jinja2 language to Code component
diff --git a/.changeset/modern-baboons-swim.md b/.changeset/modern-baboons-swim.md
new file mode 100644
index 0000000000000..96ed211a18bf1
--- /dev/null
+++ b/.changeset/modern-baboons-swim.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Improve button consistency across light/dark mode
diff --git a/.changeset/nasty-moments-mix.md b/.changeset/nasty-moments-mix.md
new file mode 100644
index 0000000000000..b14952e57106d
--- /dev/null
+++ b/.changeset/nasty-moments-mix.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Make `gr.Image` preprocessing more efficient
diff --git a/.changeset/nasty-zebras-cheat.md b/.changeset/nasty-zebras-cheat.md
new file mode 100644
index 0000000000000..f55da95dbdea2
--- /dev/null
+++ b/.changeset/nasty-zebras-cheat.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Set default `format` in `gr.Audio` to be `None` to avoid unnecessary preprocessing
diff --git a/.changeset/neat-bushes-sit.md b/.changeset/neat-bushes-sit.md
new file mode 100644
index 0000000000000..a216864891d1c
--- /dev/null
+++ b/.changeset/neat-bushes-sit.md
@@ -0,0 +1,7 @@
+---
+"@gradio/chatbot": minor
+"@gradio/markdown": minor
+"gradio": minor
+---
+
+feat:Fix markdown code copy/check button in gr.Chatbot
diff --git a/.changeset/nice-badgers-admire.md b/.changeset/nice-badgers-admire.md
new file mode 100644
index 0000000000000..a5cd4965e9244
--- /dev/null
+++ b/.changeset/nice-badgers-admire.md
@@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:Fixes website build in 5.0-dev
diff --git a/.changeset/nice-donuts-invite.md b/.changeset/nice-donuts-invite.md
new file mode 100644
index 0000000000000..244789855d2cb
--- /dev/null
+++ b/.changeset/nice-donuts-invite.md
@@ -0,0 +1,6 @@
+---
+"@gradio/imageeditor": minor
+"gradio": minor
+---
+
+feat:Fix cut off in gr.ImageEditor
diff --git a/.changeset/nice-rats-flash.md b/.changeset/nice-rats-flash.md
new file mode 100644
index 0000000000000..b1dd0c2bdd25d
--- /dev/null
+++ b/.changeset/nice-rats-flash.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Small fixes to `gr.Dataframe` and chatbot docs
diff --git a/.changeset/nine-hotels-juggle.md b/.changeset/nine-hotels-juggle.md
new file mode 100644
index 0000000000000..d0ca3d059de35
--- /dev/null
+++ b/.changeset/nine-hotels-juggle.md
@@ -0,0 +1,6 @@
+---
+"@gradio/chatbot": minor
+"gradio": minor
+---
+
+feat:9227 chatinterface retry bug
diff --git a/.changeset/old-items-sink.md b/.changeset/old-items-sink.md
new file mode 100644
index 0000000000000..5b1d82ba61494
--- /dev/null
+++ b/.changeset/old-items-sink.md
@@ -0,0 +1,5 @@
+---
+"@self/app": minor
+---
+
+feat:fix css
diff --git a/.changeset/open-chefs-say.md b/.changeset/open-chefs-say.md
new file mode 100644
index 0000000000000..85cb7ccb0c9b9
--- /dev/null
+++ b/.changeset/open-chefs-say.md
@@ -0,0 +1,6 @@
+---
+"@gradio/imageeditor": minor
+"gradio": minor
+---
+
+feat:Fix `gr.ImageEditor` toolbar cutoff
diff --git a/.changeset/petite-months-fold.md b/.changeset/petite-months-fold.md
new file mode 100644
index 0000000000000..b676e155e4bbb
--- /dev/null
+++ b/.changeset/petite-months-fold.md
@@ -0,0 +1,8 @@
+---
+"@gradio/core": minor
+"@self/app": minor
+"@self/spa": minor
+"gradio": minor
+---
+
+feat:Fix reload mode
diff --git a/.changeset/pink-shirts-fry.md b/.changeset/pink-shirts-fry.md
new file mode 100644
index 0000000000000..9a2fa2217b0d0
--- /dev/null
+++ b/.changeset/pink-shirts-fry.md
@@ -0,0 +1,10 @@
+---
+"@gradio/lite": minor
+"@gradio/theme": minor
+"@self/component-test": minor
+"@self/storybook": minor
+"gradio": minor
+"website": minor
+---
+
+feat:🔡 Update default core Gradio font 
diff --git a/.changeset/plenty-dragons-fold.md b/.changeset/plenty-dragons-fold.md
new file mode 100644
index 0000000000000..aa7d7d464bd35
--- /dev/null
+++ b/.changeset/plenty-dragons-fold.md
@@ -0,0 +1,6 @@
+---
+"@gradio/wasm": minor
+"gradio": minor
+---
+
+feat:Pre/post-processing download requests
diff --git a/.changeset/polite-bugs-vanish.md b/.changeset/polite-bugs-vanish.md
new file mode 100644
index 0000000000000..6fac00fa43ec4
--- /dev/null
+++ b/.changeset/polite-bugs-vanish.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Lighten secondary button grey fill
diff --git a/.changeset/pre.json b/.changeset/pre.json
new file mode 100644
index 0000000000000..aee7bfd8a7128
--- /dev/null
+++ b/.changeset/pre.json
@@ -0,0 +1,229 @@
+{
+  "mode": "pre",
+  "tag": "beta",
+  "initialVersions": {
+    "@gradio/client": "1.3.0",
+    "gradio_client": "1.1.0",
+    "gradio": "4.38.1",
+    "@gradio/cdn-test": "0.0.1",
+    "@gradio/spaces-test": "0.0.1",
+    "website": "0.34.0",
+    "@gradio/accordion": "0.3.18",
+    "@gradio/annotatedimage": "0.6.13",
+    "@gradio/app": "1.38.1",
+    "@gradio/atoms": "0.7.6",
+    "@gradio/audio": "0.12.2",
+    "@gradio/box": "0.1.20",
+    "@gradio/button": "0.2.46",
+    "@gradio/chatbot": "0.12.1",
+    "@gradio/checkbox": "0.3.8",
+    "@gradio/checkboxgroup": "0.5.8",
+    "@gradio/code": "0.7.0",
+    "@gradio/colorpicker": "0.3.8",
+    "@gradio/column": "0.1.2",
+    "@gradio/dataframe": "0.8.13",
+    "@gradio/dataset": "0.2.0",
+    "@gradio/datetime": "0.0.2",
+    "@gradio/downloadbutton": "0.1.23",
+    "@gradio/dropdown": "0.7.8",
+    "@gradio/fallback": "0.3.8",
+    "@gradio/file": "0.8.5",
+    "@gradio/fileexplorer": "0.4.14",
+    "@gradio/form": "0.1.20",
+    "@gradio/gallery": "0.11.2",
+    "@gradio/group": "0.1.1",
+    "@gradio/highlightedtext": "0.7.2",
+    "@gradio/html": "0.3.1",
+    "@gradio/icons": "0.6.0",
+    "@gradio/image": "0.12.2",
+    "@gradio/imageeditor": "0.7.13",
+    "@gradio/json": "0.2.8",
+    "@gradio/label": "0.3.8",
+    "@gradio/lite": "4.38.1",
+    "@gradio/markdown": "0.8.1",
+    "@gradio/model3d": "0.11.0",
+    "@gradio/multimodaltextbox": "0.5.2",
+    "@gradio/number": "0.4.8",
+    "@gradio/paramviewer": "0.4.17",
+    "@gradio/plot": "0.6.0",
+    "@gradio/preview": "0.10.1",
+    "gradio_test": "0.5.0",
+    "@gradio/radio": "0.5.8",
+    "@gradio/row": "0.1.3",
+    "@gradio/simpledropdown": "0.2.8",
+    "@gradio/simpleimage": "0.6.2",
+    "@gradio/simpletextbox": "0.2.8",
+    "@gradio/slider": "0.4.8",
+    "@gradio/state": "0.1.0",
+    "@gradio/statustracker": "0.7.1",
+    "@gradio/storybook": "0.6.0",
+    "@gradio/tabitem": "0.2.12",
+    "@gradio/tabs": "0.2.11",
+    "@gradio/textbox": "0.6.7",
+    "@gradio/theme": "0.2.3",
+    "@gradio/timer": "0.3.0",
+    "@gradio/tooltip": "0.1.0",
+    "@gradio/tootils": "0.6.0",
+    "@gradio/upload": "0.11.5",
+    "@gradio/uploadbutton": "0.6.14",
+    "@gradio/utils": "0.5.1",
+    "@gradio/video": "0.9.2",
+    "@gradio/wasm": "0.11.0",
+    "@self/cdn-test": "0.0.1",
+    "@self/spaces-test": "0.0.1",
+    "@self/app": "1.40.0",
+    "@self/build": "0.0.2",
+    "@self/component-test": "0.1.0",
+    "@gradio/core": "0.0.2",
+    "@gradio/nativeplot": "0.3.1",
+    "@self/spa": "0.0.2",
+    "@self/storybook": "0.6.1",
+    "@self/tootils": "0.6.4"
+  },
+  "changesets": [
+    "beige-houses-shine",
+    "blue-zoos-marry",
+    "breezy-olives-wonder",
+    "bright-apes-fly",
+    "bright-garlics-melt",
+    "brown-queens-begin",
+    "busy-jokes-sit",
+    "busy-lizards-heal",
+    "busy-tools-chew",
+    "calm-jobs-hope",
+    "calm-monkeys-argue",
+    "calm-planets-send",
+    "chatty-houses-do",
+    "chilly-dragons-smoke",
+    "chilly-jars-sip",
+    "chilly-places-sniff",
+    "chilly-socks-poke",
+    "chubby-hairs-beam",
+    "clean-pigs-arrive",
+    "cold-lies-mate",
+    "cruel-heads-hunt",
+    "cuddly-queens-melt",
+    "cute-rules-write",
+    "cyan-spies-check",
+    "dark-cougars-fold",
+    "dark-moose-shine",
+    "deep-bananas-switch",
+    "deep-memes-cheat",
+    "deep-ways-wink",
+    "dirty-lions-follow",
+    "dirty-pugs-hunt",
+    "dry-frogs-argue",
+    "dull-plants-trade",
+    "easy-files-serve",
+    "easy-snakes-arrive",
+    "every-breads-float",
+    "every-candies-sell",
+    "every-geese-shave",
+    "evil-clocks-visit",
+    "fancy-pianos-dig",
+    "fast-trams-grin",
+    "few-clowns-notice",
+    "five-teeth-relax",
+    "flat-chairs-fly",
+    "floppy-keys-heal",
+    "floppy-nails-grab",
+    "floppy-pandas-appear",
+    "funny-games-train",
+    "gold-bats-return",
+    "gold-kiwis-share",
+    "great-ghosts-find",
+    "green-pigs-wonder",
+    "green-wasps-invent",
+    "heavy-goats-grab",
+    "heavy-memes-create",
+    "honest-plums-peel",
+    "huge-corners-tease",
+    "hungry-dragons-drum",
+    "hungry-tips-sin",
+    "khaki-ducks-stare",
+    "khaki-ways-agree",
+    "large-buttons-look",
+    "large-impalas-take",
+    "lazy-clubs-help",
+    "legal-masks-pay",
+    "light-bats-arrive",
+    "long-donkeys-hang",
+    "lovely-ties-live",
+    "lucky-hotels-sort",
+    "many-moons-like",
+    "mighty-goats-dance",
+    "modern-baboons-swim",
+    "nasty-moments-mix",
+    "nasty-zebras-cheat",
+    "neat-bushes-sit",
+    "nice-badgers-admire",
+    "nice-donuts-invite",
+    "nice-rats-flash",
+    "nine-hotels-juggle",
+    "old-items-sink",
+    "open-chefs-say",
+    "petite-months-fold",
+    "pink-shirts-fry",
+    "plenty-dragons-fold",
+    "polite-bugs-vanish",
+    "pretty-hairs-rest",
+    "proud-memes-fold",
+    "public-baboons-dig",
+    "public-carpets-behave",
+    "puny-bats-smell",
+    "quiet-gifts-cheer",
+    "red-brooms-bow",
+    "rich-crews-suffer",
+    "rotten-bears-bathe",
+    "rotten-dingos-cross",
+    "sad-chicken-sleep",
+    "sad-steaks-shout",
+    "salty-vans-behave",
+    "seven-deer-occur",
+    "sharp-bikes-sleep",
+    "shy-foxes-flow",
+    "silent-moose-push",
+    "silly-chefs-marry",
+    "six-bobcats-cry",
+    "six-melons-serve",
+    "slow-nails-fetch",
+    "smooth-fans-hide",
+    "smooth-places-walk",
+    "social-lizards-tickle",
+    "solid-chicken-love",
+    "some-clocks-think",
+    "sour-ties-repair",
+    "strong-stars-count",
+    "stupid-eggs-sing",
+    "stupid-memes-turn",
+    "stupid-tires-stare",
+    "sweet-papers-fail",
+    "tall-moose-yawn",
+    "tame-zoos-care",
+    "tasty-tigers-mate",
+    "thick-geese-divide",
+    "thick-wasps-love",
+    "thin-boxes-matter",
+    "thirty-cloths-taste",
+    "thirty-insects-unite",
+    "three-toys-knock",
+    "tidy-bobcats-marry",
+    "tired-moons-tell",
+    "tough-rooms-flash",
+    "true-pigs-build",
+    "two-geckos-accept",
+    "warm-lemons-mate",
+    "weak-dryers-show",
+    "weak-glasses-enter",
+    "wet-memes-smash",
+    "wicked-snails-drum",
+    "wicked-swans-wink",
+    "wide-dodos-peel",
+    "witty-rice-fix",
+    "witty-worlds-grin",
+    "young-candles-stare",
+    "young-ears-vanish",
+    "young-memes-shake",
+    "yummy-weeks-learn"
+  ]
+}
diff --git a/.changeset/pretty-hairs-rest.md b/.changeset/pretty-hairs-rest.md
new file mode 100644
index 0000000000000..45d7e62c28f57
--- /dev/null
+++ b/.changeset/pretty-hairs-rest.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Fixes race condition in `update_root_in_config`
diff --git a/.changeset/proud-memes-fold.md b/.changeset/proud-memes-fold.md
new file mode 100644
index 0000000000000..cd6724501219d
--- /dev/null
+++ b/.changeset/proud-memes-fold.md
@@ -0,0 +1,6 @@
+---
+"@gradio/wasm": minor
+"gradio": minor
+---
+
+feat:Proposal: remove `gr.make_waveform` and remove `matplotlib` as a dependency
diff --git a/.changeset/public-baboons-dig.md b/.changeset/public-baboons-dig.md
new file mode 100644
index 0000000000000..7d0a652a33366
--- /dev/null
+++ b/.changeset/public-baboons-dig.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Tweaks to SSR mode
diff --git a/.changeset/public-carpets-behave.md b/.changeset/public-carpets-behave.md
new file mode 100644
index 0000000000000..40d3610e6b50a
--- /dev/null
+++ b/.changeset/public-carpets-behave.md
@@ -0,0 +1,6 @@
+---
+"gradio": minor
+"gradio_client": minor
+---
+
+feat:Api info fix
diff --git a/.changeset/puny-bats-smell.md b/.changeset/puny-bats-smell.md
new file mode 100644
index 0000000000000..9674004f0873b
--- /dev/null
+++ b/.changeset/puny-bats-smell.md
@@ -0,0 +1,5 @@
+---
+"gradio": patch
+---
+
+feat:Raise WasmUnsupportedError for ffmpeg usage on Lite
diff --git a/.changeset/quiet-gifts-cheer.md b/.changeset/quiet-gifts-cheer.md
new file mode 100644
index 0000000000000..92fa394d58d98
--- /dev/null
+++ b/.changeset/quiet-gifts-cheer.md
@@ -0,0 +1,7 @@
+---
+"@gradio/chatbot": minor
+"@gradio/multimodaltextbox": minor
+"gradio": minor
+---
+
+feat:Some more chatbot fixes
diff --git a/.changeset/red-brooms-bow.md b/.changeset/red-brooms-bow.md
new file mode 100644
index 0000000000000..89a7ffa1fdeff
--- /dev/null
+++ b/.changeset/red-brooms-bow.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Use or `pathlib.Path` objects to indicate filepaths for `css`, `js`, and `head` parameters
diff --git a/.changeset/rich-crews-suffer.md b/.changeset/rich-crews-suffer.md
new file mode 100644
index 0000000000000..89ae6fb2a6292
--- /dev/null
+++ b/.changeset/rich-crews-suffer.md
@@ -0,0 +1,7 @@
+---
+"@gradio/dataframe": minor
+"gradio": minor
+"website": minor
+---
+
+feat:Fix. Triggered dataframe change event for header change
diff --git a/.changeset/rotten-bears-bathe.md b/.changeset/rotten-bears-bathe.md
new file mode 100644
index 0000000000000..248148d7a457f
--- /dev/null
+++ b/.changeset/rotten-bears-bathe.md
@@ -0,0 +1,5 @@
+---
+"gradio": major
+---
+
+feat:Deprecate for 5.0
diff --git a/.changeset/rotten-dingos-cross.md b/.changeset/rotten-dingos-cross.md
new file mode 100644
index 0000000000000..111c0d26f4f7a
--- /dev/null
+++ b/.changeset/rotten-dingos-cross.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Reduce analytics that are collected
diff --git a/.changeset/sad-chicken-sleep.md b/.changeset/sad-chicken-sleep.md
new file mode 100644
index 0000000000000..afdf4049fd32d
--- /dev/null
+++ b/.changeset/sad-chicken-sleep.md
@@ -0,0 +1,6 @@
+---
+"@gradio/image": patch
+"gradio": patch
+---
+
+feat:Fix stop recording button colors
diff --git a/.changeset/sad-steaks-shout.md b/.changeset/sad-steaks-shout.md
new file mode 100644
index 0000000000000..e183cc18831e7
--- /dev/null
+++ b/.changeset/sad-steaks-shout.md
@@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:Fixes annoying height bug in playground
diff --git a/.changeset/salty-vans-behave.md b/.changeset/salty-vans-behave.md
new file mode 100644
index 0000000000000..2c12d93f800b0
--- /dev/null
+++ b/.changeset/salty-vans-behave.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Deprecate passing a tuple for gr.Code value
diff --git a/.changeset/seven-deer-occur.md b/.changeset/seven-deer-occur.md
new file mode 100644
index 0000000000000..377f5d8098d59
--- /dev/null
+++ b/.changeset/seven-deer-occur.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Raise error instead of warning if checksums for binary do not match
diff --git a/.changeset/sharp-bikes-sleep.md b/.changeset/sharp-bikes-sleep.md
new file mode 100644
index 0000000000000..b8cae17cd3820
--- /dev/null
+++ b/.changeset/sharp-bikes-sleep.md
@@ -0,0 +1,6 @@
+---
+"@gradio/lite": patch
+"gradio": patch
+---
+
+feat:Stop using `multiprocessing` in `flagging.CSVLogger` on Lite v5
diff --git a/.changeset/shy-foxes-flow.md b/.changeset/shy-foxes-flow.md
new file mode 100644
index 0000000000000..bc2103fa1e787
--- /dev/null
+++ b/.changeset/shy-foxes-flow.md
@@ -0,0 +1,9 @@
+---
+"@gradio/audio": minor
+"@gradio/checkbox": minor
+"@gradio/checkboxgroup": minor
+"@gradio/radio": minor
+"gradio": minor
+---
+
+feat:Decrease component radii and remove input shadows
diff --git a/.changeset/silent-moose-push.md b/.changeset/silent-moose-push.md
new file mode 100644
index 0000000000000..0556b7ea4f982
--- /dev/null
+++ b/.changeset/silent-moose-push.md
@@ -0,0 +1,6 @@
+---
+"@gradio/chatbot": minor
+"gradio": minor
+---
+
+feat:Fixes: Chatbot examples for custom chatbot + rename `suggestions` -> `examples`
diff --git a/.changeset/silly-chefs-marry.md b/.changeset/silly-chefs-marry.md
new file mode 100644
index 0000000000000..dcfe465686011
--- /dev/null
+++ b/.changeset/silly-chefs-marry.md
@@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:Refactoring playground
diff --git a/.changeset/six-bobcats-cry.md b/.changeset/six-bobcats-cry.md
new file mode 100644
index 0000000000000..908d89302a80a
--- /dev/null
+++ b/.changeset/six-bobcats-cry.md
@@ -0,0 +1,12 @@
+---
+"@gradio/audio": minor
+"@gradio/client": minor
+"@gradio/core": minor
+"@gradio/image": minor
+"@gradio/statustracker": minor
+"@gradio/video": minor
+"gradio": minor
+"gradio_client": minor
+---
+
+feat:Streaming inputs for 5.0
diff --git a/.changeset/six-melons-serve.md b/.changeset/six-melons-serve.md
new file mode 100644
index 0000000000000..8ec78a87ca838
--- /dev/null
+++ b/.changeset/six-melons-serve.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Deep equal check with hash
diff --git a/.changeset/slow-nails-fetch.md b/.changeset/slow-nails-fetch.md
new file mode 100644
index 0000000000000..a30b29a6092af
--- /dev/null
+++ b/.changeset/slow-nails-fetch.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Change caching to occur not at the creation of a `gr.Examples()` but when the Blocks is actually launched
diff --git a/.changeset/smooth-fans-hide.md b/.changeset/smooth-fans-hide.md
new file mode 100644
index 0000000000000..6af0a9c12d53f
--- /dev/null
+++ b/.changeset/smooth-fans-hide.md
@@ -0,0 +1,7 @@
+---
+"@gradio/multimodaltextbox": minor
+"@gradio/textbox": minor
+"gradio": minor
+---
+
+feat:Disable the submit button and enter-key submit when the text is empty
diff --git a/.changeset/smooth-places-walk.md b/.changeset/smooth-places-walk.md
new file mode 100644
index 0000000000000..f6066cfa90a7e
--- /dev/null
+++ b/.changeset/smooth-places-walk.md
@@ -0,0 +1,6 @@
+---
+"@gradio/dropdown": minor
+"gradio": minor
+---
+
+feat:Fix single select dropdown
diff --git a/.changeset/social-lizards-tickle.md b/.changeset/social-lizards-tickle.md
new file mode 100644
index 0000000000000..db581ce7a6d4f
--- /dev/null
+++ b/.changeset/social-lizards-tickle.md
@@ -0,0 +1,6 @@
+---
+"@gradio/model3d": patch
+"gradio": patch
+---
+
+feat:Update babylon.js to `v7` for `gr.Model3D`
diff --git a/.changeset/solid-chicken-love.md b/.changeset/solid-chicken-love.md
new file mode 100644
index 0000000000000..7e04a9156de55
--- /dev/null
+++ b/.changeset/solid-chicken-love.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:DNS resolver on ip check
diff --git a/.changeset/some-clocks-think.md b/.changeset/some-clocks-think.md
new file mode 100644
index 0000000000000..6d5a917d2ee32
--- /dev/null
+++ b/.changeset/some-clocks-think.md
@@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:Fix gradio.js aws path 
diff --git a/.changeset/sour-ties-repair.md b/.changeset/sour-ties-repair.md
new file mode 100644
index 0000000000000..79dd6c8459ff7
--- /dev/null
+++ b/.changeset/sour-ties-repair.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Small changes to caching
diff --git a/.changeset/strong-stars-count.md b/.changeset/strong-stars-count.md
new file mode 100644
index 0000000000000..77d8a82fea547
--- /dev/null
+++ b/.changeset/strong-stars-count.md
@@ -0,0 +1,12 @@
+---
+"@gradio/atoms": minor
+"@gradio/chatbot": minor
+"@gradio/dataframe": minor
+"@gradio/fileexplorer": minor
+"@gradio/json": minor
+"@gradio/markdown": minor
+"@gradio/row": minor
+"gradio": minor
+---
+
+feat:Standardize `height` across components and add `max_height` and `min_height` parameters where appropriate
diff --git a/.changeset/stupid-eggs-sing.md b/.changeset/stupid-eggs-sing.md
new file mode 100644
index 0000000000000..c28be48fd8d6a
--- /dev/null
+++ b/.changeset/stupid-eggs-sing.md
@@ -0,0 +1,9 @@
+---
+"@gradio/audio": minor
+"@gradio/client": minor
+"@gradio/core": minor
+"@self/app": minor
+"gradio": minor
+---
+
+feat:fix SSR apps on spaces
diff --git a/.changeset/stupid-memes-turn.md b/.changeset/stupid-memes-turn.md
new file mode 100644
index 0000000000000..454d81d7a5ddb
--- /dev/null
+++ b/.changeset/stupid-memes-turn.md
@@ -0,0 +1,6 @@
+---
+"@gradio/nativeplot": minor
+"gradio": minor
+---
+
+feat:Hide x axis labels
diff --git a/.changeset/stupid-tires-stare.md b/.changeset/stupid-tires-stare.md
new file mode 100644
index 0000000000000..e57d563bd8425
--- /dev/null
+++ b/.changeset/stupid-tires-stare.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Fix SSR mode flag with `mount_gradio_app` and revert changes to pytests 
diff --git a/.changeset/sweet-papers-fail.md b/.changeset/sweet-papers-fail.md
new file mode 100644
index 0000000000000..e0c2115edeab8
--- /dev/null
+++ b/.changeset/sweet-papers-fail.md
@@ -0,0 +1,9 @@
+---
+"@gradio/core": minor
+"@gradio/nativeplot": minor
+"@gradio/plot": minor
+"@self/spa": minor
+"gradio": minor
+---
+
+feat:Fix plots
diff --git a/.changeset/tall-moose-yawn.md b/.changeset/tall-moose-yawn.md
new file mode 100644
index 0000000000000..9a55181cc2cc4
--- /dev/null
+++ b/.changeset/tall-moose-yawn.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Further tweak to is_in_or_equal
diff --git a/.changeset/tame-zoos-care.md b/.changeset/tame-zoos-care.md
new file mode 100644
index 0000000000000..99a61cd484fe6
--- /dev/null
+++ b/.changeset/tame-zoos-care.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Update object detection guide
diff --git a/.changeset/tasty-tigers-mate.md b/.changeset/tasty-tigers-mate.md
new file mode 100644
index 0000000000000..516e37721358e
--- /dev/null
+++ b/.changeset/tasty-tigers-mate.md
@@ -0,0 +1,6 @@
+---
+"@gradio/chatbot": minor
+"gradio": minor
+---
+
+feat:Fix `gr.Chatbot` panels layout
diff --git a/.changeset/thick-geese-divide.md b/.changeset/thick-geese-divide.md
new file mode 100644
index 0000000000000..f0c7ea1f2c1da
--- /dev/null
+++ b/.changeset/thick-geese-divide.md
@@ -0,0 +1,9 @@
+---
+"@gradio/audio": minor
+"@gradio/box": minor
+"@self/build": minor
+"gradio": minor
+"website": minor
+---
+
+feat:5.0 merge take 2
diff --git a/.changeset/thick-wasps-love.md b/.changeset/thick-wasps-love.md
new file mode 100644
index 0000000000000..c080d4ba6f7ce
--- /dev/null
+++ b/.changeset/thick-wasps-love.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Allow skipping an arbitrary number of output components, and also raise a warning if the number of output components does not match the number of values returned from a function
diff --git a/.changeset/thin-boxes-matter.md b/.changeset/thin-boxes-matter.md
new file mode 100644
index 0000000000000..fbd518932a621
--- /dev/null
+++ b/.changeset/thin-boxes-matter.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Fix node process to run with correct server name
diff --git a/.changeset/thirty-cloths-taste.md b/.changeset/thirty-cloths-taste.md
new file mode 100644
index 0000000000000..0a6ac20c1be7b
--- /dev/null
+++ b/.changeset/thirty-cloths-taste.md
@@ -0,0 +1,6 @@
+---
+"gradio": patch
+"gradio_client": patch
+---
+
+fix:Check for `file_types` parameter in the backend
diff --git a/.changeset/thirty-insects-unite.md b/.changeset/thirty-insects-unite.md
new file mode 100644
index 0000000000000..a8d038a91c6d2
--- /dev/null
+++ b/.changeset/thirty-insects-unite.md
@@ -0,0 +1,6 @@
+---
+"@self/app": minor
+"gradio": minor
+---
+
+feat:Fix favicon in ssr mode
diff --git a/.changeset/three-toys-knock.md b/.changeset/three-toys-knock.md
new file mode 100644
index 0000000000000..55fd74439bf2b
--- /dev/null
+++ b/.changeset/three-toys-knock.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Lite: HTTPX client improvement
diff --git a/.changeset/tidy-bobcats-marry.md b/.changeset/tidy-bobcats-marry.md
new file mode 100644
index 0000000000000..c85e9466b00bb
--- /dev/null
+++ b/.changeset/tidy-bobcats-marry.md
@@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:Improve UI on the Playground
diff --git a/.changeset/tired-moons-tell.md b/.changeset/tired-moons-tell.md
new file mode 100644
index 0000000000000..ff26a10af7700
--- /dev/null
+++ b/.changeset/tired-moons-tell.md
@@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:File access security guide
diff --git a/.changeset/tough-rooms-flash.md b/.changeset/tough-rooms-flash.md
new file mode 100644
index 0000000000000..adcc29dd50ffc
--- /dev/null
+++ b/.changeset/tough-rooms-flash.md
@@ -0,0 +1,6 @@
+---
+"@gradio/multimodaltextbox": patch
+"gradio": patch
+---
+
+fix:Fix File Types for MultimodalTextbox
diff --git a/.changeset/true-pigs-build.md b/.changeset/true-pigs-build.md
new file mode 100644
index 0000000000000..48b0a65c6a4e9
--- /dev/null
+++ b/.changeset/true-pigs-build.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Change dark mode color theme from `gray` to `zinc`
diff --git a/.changeset/two-geckos-accept.md b/.changeset/two-geckos-accept.md
new file mode 100644
index 0000000000000..ad41b3f479729
--- /dev/null
+++ b/.changeset/two-geckos-accept.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Minor fixes to docs and a demo
diff --git a/.changeset/warm-lemons-mate.md b/.changeset/warm-lemons-mate.md
new file mode 100644
index 0000000000000..a54ac7e12e1d4
--- /dev/null
+++ b/.changeset/warm-lemons-mate.md
@@ -0,0 +1,8 @@
+---
+"@gradio/icons": minor
+"@gradio/multimodaltextbox": minor
+"@gradio/textbox": minor
+"gradio": minor
+---
+
+feat:Match style of textbox stop button to submit button
diff --git a/.changeset/weak-dryers-show.md b/.changeset/weak-dryers-show.md
new file mode 100644
index 0000000000000..b973bd23536e8
--- /dev/null
+++ b/.changeset/weak-dryers-show.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Add `css_paths` and `head_paths` parameters
diff --git a/.changeset/weak-glasses-enter.md b/.changeset/weak-glasses-enter.md
new file mode 100644
index 0000000000000..0e76c994d10d8
--- /dev/null
+++ b/.changeset/weak-glasses-enter.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:replace ip addresses with machine-specific hashes
diff --git a/.changeset/wet-memes-smash.md b/.changeset/wet-memes-smash.md
new file mode 100644
index 0000000000000..be30e13fe3e4a
--- /dev/null
+++ b/.changeset/wet-memes-smash.md
@@ -0,0 +1,6 @@
+---
+"@gradio/textbox": patch
+"gradio": patch
+---
+
+fix:Set the color of placeholder in a disabled textbox to gray instead of black, and disable typing while a response is generating in `gr.ChatInterface`, allow `gr.MultimodalTextbox` to accept string values
diff --git a/.changeset/wicked-snails-drum.md b/.changeset/wicked-snails-drum.md
new file mode 100644
index 0000000000000..5837379d271c9
--- /dev/null
+++ b/.changeset/wicked-snails-drum.md
@@ -0,0 +1,7 @@
+---
+"@gradio/dropdown": minor
+"@gradio/radio": minor
+"gradio": minor
+---
+
+feat:Fix change triggers for dropdown and radio
diff --git a/.changeset/wicked-swans-wink.md b/.changeset/wicked-swans-wink.md
new file mode 100644
index 0000000000000..3152ab867c2ec
--- /dev/null
+++ b/.changeset/wicked-swans-wink.md
@@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:Add info about Powershell client
diff --git a/.changeset/wide-dodos-peel.md b/.changeset/wide-dodos-peel.md
new file mode 100644
index 0000000000000..acbdb30e58362
--- /dev/null
+++ b/.changeset/wide-dodos-peel.md
@@ -0,0 +1,30 @@
+---
+"@gradio/audio": minor
+"@gradio/chatbot": minor
+"@gradio/client": minor
+"@gradio/core": minor
+"@gradio/dataframe": minor
+"@gradio/file": minor
+"@gradio/gallery": minor
+"@gradio/image": minor
+"@gradio/imageeditor": minor
+"@gradio/lite": minor
+"@gradio/markdown": minor
+"@gradio/model3d": minor
+"@gradio/multimodaltextbox": minor
+"@gradio/nativeplot": minor
+"@gradio/simpleimage": minor
+"@gradio/statustracker": minor
+"@gradio/tabs": minor
+"@gradio/upload": minor
+"@gradio/uploadbutton": minor
+"@gradio/utils": minor
+"@gradio/video": minor
+"@self/app": minor
+"@self/build": minor
+"@self/spa": minor
+"gradio": minor
+"gradio_client": minor
+---
+
+feat:Ssr part 2
diff --git a/.changeset/witty-rice-fix.md b/.changeset/witty-rice-fix.md
new file mode 100644
index 0000000000000..884a1ac5bfc33
--- /dev/null
+++ b/.changeset/witty-rice-fix.md
@@ -0,0 +1,8 @@
+---
+"@gradio/client": minor
+"@gradio/core": minor
+"gradio": minor
+"gradio_client": minor
+---
+
+feat:prefix api routes
diff --git a/.changeset/witty-worlds-grin.md b/.changeset/witty-worlds-grin.md
new file mode 100644
index 0000000000000..c539d062540d1
--- /dev/null
+++ b/.changeset/witty-worlds-grin.md
@@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:Adds LLM to the Playground
diff --git a/.changeset/young-candles-stare.md b/.changeset/young-candles-stare.md
new file mode 100644
index 0000000000000..1d290441f42ed
--- /dev/null
+++ b/.changeset/young-candles-stare.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Do not attach `content_disposition_type = "attachment"` headers for files explicitly allowed by developer
diff --git a/.changeset/young-ears-vanish.md b/.changeset/young-ears-vanish.md
new file mode 100644
index 0000000000000..1988d752423ee
--- /dev/null
+++ b/.changeset/young-ears-vanish.md
@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Refactor lazy caching
diff --git a/.changeset/young-memes-shake.md b/.changeset/young-memes-shake.md
new file mode 100644
index 0000000000000..0efd5807db1c5
--- /dev/null
+++ b/.changeset/young-memes-shake.md
@@ -0,0 +1,5 @@
+---
+"@self/app": minor
+---
+
+feat:Ensure media queries work for SSR mode
diff --git a/.changeset/yummy-weeks-learn.md b/.changeset/yummy-weeks-learn.md
new file mode 100644
index 0000000000000..edf5dcc1ba26e
--- /dev/null
+++ b/.changeset/yummy-weeks-learn.md
@@ -0,0 +1,7 @@
+---
+"@gradio/code": minor
+"@self/component-test": minor
+"gradio": minor
+---
+
+feat:Added max lines and overflow scrollbar for `gr.Code`
diff --git a/.config/.prettierignore b/.config/.prettierignore
index f45be57177d56..b5411e40f32bb 100644
--- a/.config/.prettierignore
+++ b/.config/.prettierignore
@@ -21,7 +21,7 @@
 ../js/lite/src/theme.css
 ../js/storybook/theme.css
 **/gradio_cached_examples/**
-**/storybook-static/**  
+**/storybook-static/**
 **/.vscode/**
 sweep.yaml
 **/.vercel/**
@@ -32,4 +32,4 @@ sweep.yaml
 **/venv/**
 ../js/app/src/api_docs/CodeSnippet.svelte
 ../js/app/src/api_docs/RecordingSnippet.svelte
-.changeset/pre.json
\ No newline at end of file
+../.changeset/pre.json
diff --git a/.config/copy_frontend.py b/.config/copy_frontend.py
index 3b0e0793b2ac1..a62ac6711de8d 100644
--- a/.config/copy_frontend.py
+++ b/.config/copy_frontend.py
@@ -15,6 +15,9 @@ def copy_js_code(root: str | pathlib.Path):
         "playwright-report",
         "workbench",
         "tooltils",
+        "component-test",
+        "core",
+        "spa",
     ]
     for entry in (pathlib.Path(root) / "js").iterdir():
         if (
@@ -46,7 +49,7 @@ def ignore(s, names):
     shutil.copytree(
         str(pathlib.Path(root) / "client" / "js"),
         str(pathlib.Path("gradio") / "_frontend_code" / "client"),
-        ignore=lambda d, names: ["node_modules"],
+        ignore=lambda d, names: ["node_modules", "test"],
         dirs_exist_ok=True,
     )
 
diff --git a/.config/eslint.config.js b/.config/eslint.config.js
index b1fda3c0a5fd3..294bb9293e438 100644
--- a/.config/eslint.config.js
+++ b/.config/eslint.config.js
@@ -73,6 +73,7 @@ export default [
 			"js/spa/test/**/*",
 			"**/*vite.config.ts",
 			"**/_website/**/*",
+			"**/app/**/*",
 			"**/_spaces-test/**/*",
 			"**/preview/test/**/*",
 			"**/component-test/**/*",
diff --git a/.config/playwright.config.js b/.config/playwright.config.js
index 3d17b35e0cfa3..6b5f971c16b67 100644
--- a/.config/playwright.config.js
+++ b/.config/playwright.config.js
@@ -14,8 +14,8 @@ const base = defineConfig({
 			]
 		}
 	},
-	expect: { timeout: 15000 },
-	timeout: 30000,
+	expect: { timeout: 10000 },
+	timeout: 10000,
 	testMatch: /.*\.spec\.ts/,
 	testDir: "..",
 	workers: process.env.CI ? 1 : undefined,
@@ -51,7 +51,8 @@ const lite = defineConfig(base, {
 		"**/file_component_events.spec.ts",
 		"**/kitchen_sink.spec.ts",
 		"**/gallery_component_events.spec.ts",
-		"**/image_remote_url.spec.ts" // To detect the bugs on Lite fixed in https://github.com/gradio-app/gradio/pull/8011 and https://github.com/gradio-app/gradio/pull/8026
+		"**/image_remote_url.spec.ts", // To detect the bugs on Lite fixed in https://github.com/gradio-app/gradio/pull/8011 and https://github.com/gradio-app/gradio/pull/8026
+		"**/outbreak_forecast.spec.ts" // To test matplotlib on Lite
 	],
 	workers: 1,
 	retries: 3,
diff --git a/.dockerignore b/.dockerignore
index 916fc50c4d5d5..17e4ab1213839 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -21,6 +21,7 @@ gradio/templates/frontend/cdn
 *.db
 *.sqlite3
 gradio/launches.json
+gradio/hash_seed.txt
 
 # Tests
 .coverage
diff --git a/.github/actions/install-all-deps/action.yml b/.github/actions/install-all-deps/action.yml
index 9b60e434207c4..0381d9908eb07 100644
--- a/.github/actions/install-all-deps/action.yml
+++ b/.github/actions/install-all-deps/action.yml
@@ -13,7 +13,7 @@ inputs:
     default: "false"
   python_version:
     description: "Python version"
-    default: "3.8"
+    default: "3.10"
   os:
     description: "OS"
     default: "ubuntu-latest"
diff --git a/.github/workflows/delete-stale-spaces.yml b/.github/workflows/delete-stale-spaces.yml
index e1e02a227ddc0..0179405029434 100644
--- a/.github/workflows/delete-stale-spaces.yml
+++ b/.github/workflows/delete-stale-spaces.yml
@@ -25,7 +25,7 @@ jobs:
       - name: Install Python
         uses: actions/setup-python@v5
         with:
-          python-version: "3.9"
+          python-version: "3.10"
       - name: Install pip
         run: python -m pip install pip wheel requests
       - name: Install Hub Client Library
diff --git a/.github/workflows/previews-build.yml b/.github/workflows/previews-build.yml
index ee7a156c61b14..bbedf95bb2b21 100644
--- a/.github/workflows/previews-build.yml
+++ b/.github/workflows/previews-build.yml
@@ -45,7 +45,7 @@ jobs:
       - name: install dependencies
         uses: "gradio-app/gradio/.github/actions/install-all-deps@main"
         with:
-          python_version: "3.9"
+          python_version: "3.10"
           build_lite: "true"
       - name: Package Lite NPM package
         working-directory: js/lite
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index bcb10713201f5..56aea79ae2189 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -5,6 +5,7 @@ on:
   push:
     branches:
       - main
+      - 5.0-dev
 
 env:
   CI: true
@@ -23,6 +24,7 @@ jobs:
       - name: install dependencies
         uses: "gradio-app/gradio/.github/actions/install-all-deps@main"
         with:
+          python_version: "3.10"
           skip_build: "false"
       - name: Build packages
         run: |
diff --git a/.github/workflows/storybook-build.yml b/.github/workflows/storybook-build.yml
index a8538cfdfe018..00a2415d119de 100644
--- a/.github/workflows/storybook-build.yml
+++ b/.github/workflows/storybook-build.yml
@@ -52,6 +52,7 @@ jobs:
       - name: install dependencies
         uses: "gradio-app/gradio/.github/actions/install-all-deps@main"
         with:
+          python_version: "3.10"
           skip_build: "true"
       - name: build client
         run: pnpm --filter @gradio/client build
diff --git a/.github/workflows/test-functional-lite.yml b/.github/workflows/test-functional-lite.yml
index f10499b7baeb4..c58ce3c432f77 100644
--- a/.github/workflows/test-functional-lite.yml
+++ b/.github/workflows/test-functional-lite.yml
@@ -48,6 +48,8 @@ jobs:
         with:
           build_lite: true
           skip_build: true
+          python_version: "3.10"
+          test: true
       - run: pnpm exec playwright install chromium firefox
       - name: Run Lite E2E tests
         run: |
diff --git a/.github/workflows/test-functional.yml b/.github/workflows/test-functional.yml
index 8fed9b2533312..b74aea46a23dc 100644
--- a/.github/workflows/test-functional.yml
+++ b/.github/workflows/test-functional.yml
@@ -34,24 +34,32 @@ jobs:
           filter: "functional"
           token: ${{ secrets.GITHUB_TOKEN }}
   test:
+    name: "functional-test-SSR=${{ matrix.SSR }}"
     permissions:
       contents: read
-    name: "functional-test"
     runs-on: ubuntu-latest
     needs: changes
+    strategy:
+      matrix:
+        ssr: [true, false]
     if: needs.changes.outputs.should_run == 'true'
     steps:
       - uses: actions/checkout@v4
       - name: install dependencies
         id: install_deps
         uses: "gradio-app/gradio/.github/actions/install-all-deps@main"
-      - name: install outbreak_forecast dependencies
+        with:
+          python_version: "3.10"
+          test: true
+      - name: install dependencies for specific tests
         run: |
           . venv/bin/activate
           python -m pip install -r demo/outbreak_forecast/requirements.txt
-          python -m pip install -r demo/gradio_pdf_demo/requirements.txt
+          python -m pip install -r demo/stream_video_out/requirements.txt
       - run: pnpm exec playwright install chromium firefox
       - name: run browser tests
+        env:
+          GRADIO_SSR_MODE: ${{ matrix.ssr }}
         run: |
           . venv/bin/activate
           CI=1 pnpm test:browser
diff --git a/.github/workflows/test-python.yml b/.github/workflows/test-python.yml
index 07c06e823474a..bb493865fc97d 100644
--- a/.github/workflows/test-python.yml
+++ b/.github/workflows/test-python.yml
@@ -59,7 +59,7 @@ jobs:
         id: install_deps
         uses: "gradio-app/gradio/.github/actions/install-all-deps@main"
         with:
-          python_version: "3.8"
+          python_version: "3.10"
           os: ${{ matrix.os }}
           test: true
       - name: Lint
diff --git a/.github/workflows/website-docs-build.yml b/.github/workflows/website-docs-build.yml
index edf4ee9a34279..69a43d30e2f9b 100644
--- a/.github/workflows/website-docs-build.yml
+++ b/.github/workflows/website-docs-build.yml
@@ -51,8 +51,9 @@ jobs:
       - name: install dependencies
         uses: "gradio-app/gradio/.github/actions/install-all-deps@main"
         with:
-          skip_build: true
           python_version: "3.10"
+          skip_build: true
+          test: true
 
         # generated when installing deps
       - name: upload website json artifacts
diff --git a/.gitignore b/.gitignore
index b69ad66caf7d2..8886c5414862e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,10 +31,10 @@ js/gradio-preview/test/*
 *.db
 *.sqlite3
 gradio/launches.json
-flagged/
-gradio_cached_examples/
-tmp.zip
 gradio/hash_seed.txt
+.gradio/
+
+tmp.zip
 
 # Tests
 .coverage
@@ -56,6 +56,9 @@ demo/annotatedimage_component/*.png
 demo/fake_diffusion_with_gif/*.gif
 demo/cancel_events/cancel_events_output_log.txt
 demo/unload_event_test/output_log.txt
+demo/stream_video_out/output_*.ts
+demo/stream_video_out/output_*.mp4
+demo/stream_audio_out/*.mp3
 
 # Etc
 .idea/*
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1973f9fdc6daa..9cee66c08936a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,210 @@
 # gradio
 
+## 5.0.0-beta.10
+
+### Fixes
+
+- [#9600](https://github.com/gradio-app/gradio/pull/9600) [`9f71086`](https://github.com/gradio-app/gradio/commit/9f71086036339bfdd14f3aab29729041a01fc2d4) - Ensure undo/try shows for final bot message in gr.Chatbot.  Thanks @hannahblair!
+
+## 5.0.0-beta.9
+
+### Features
+
+- [#9437](https://github.com/gradio-app/gradio/pull/9437) [`c3d93be`](https://github.com/gradio-app/gradio/commit/c3d93bef94b9401747a363f7bad88a1d347d535b) - Adding new themes to Gradio 5.0.  Thanks @allisonwhilden!
+- [#9593](https://github.com/gradio-app/gradio/pull/9593) [`cc61fe7`](https://github.com/gradio-app/gradio/commit/cc61fe7047ac61779a61cce52c666400b9517daa) - Some more chatbot fixes.  Thanks @dawoodkhan82!
+- [#9583](https://github.com/gradio-app/gradio/pull/9583) [`b92a762`](https://github.com/gradio-app/gradio/commit/b92a7623e1ebd801587041e1ccca058a61058da9) - Disable the submit button and enter-key submit when the text is empty.  Thanks @whitphx!
+- [#9590](https://github.com/gradio-app/gradio/pull/9590) [`e853c41`](https://github.com/gradio-app/gradio/commit/e853c413583d91186aef3aceb0849d0ec0494834) - SSR e2e + fixes.  Thanks @pngwn!
+- [#9591](https://github.com/gradio-app/gradio/pull/9591) [`139152f`](https://github.com/gradio-app/gradio/commit/139152fe18bfdc5644a59d7bdfec9891b644f0bf) - Equal height in row false by default.  Thanks @aliabid94!
+- [#9589](https://github.com/gradio-app/gradio/pull/9589) [`477f45c`](https://github.com/gradio-app/gradio/commit/477f45cb43be957684eb392e3d62c09490c22391) - Only move files to the cache that have a meta key.  Thanks @freddyaboulton!
+- [#9584](https://github.com/gradio-app/gradio/pull/9584) [`6f8fa54`](https://github.com/gradio-app/gradio/commit/6f8fa5405528ad684084e4c7facfe36624fe7784) - Chat Interface Multimodal Fix & Fallback to `gr.Examples()`.  Thanks @dawoodkhan82!
+- [#9482](https://github.com/gradio-app/gradio/pull/9482) [`bd6c5f2`](https://github.com/gradio-app/gradio/commit/bd6c5f237b0631d86273c7684c3bf2b1011992a3) - Fix custom component CLI on main/5.0.  Thanks @freddyaboulton!
+- [#9601](https://github.com/gradio-app/gradio/pull/9601) [`c078892`](https://github.com/gradio-app/gradio/commit/c07889223cb64661b17560b707b977248809470a) - Tweak gr.Dataframe menu UX.  Thanks @hannahblair!
+- [#9575](https://github.com/gradio-app/gradio/pull/9575) [`4ec2feb`](https://github.com/gradio-app/gradio/commit/4ec2feb04e452d2c77482c09543c59948567be67) - Update gr.Dataframe UI with action popover.  Thanks @hannahblair!
+- [#9582](https://github.com/gradio-app/gradio/pull/9582) [`43a7f42`](https://github.com/gradio-app/gradio/commit/43a7f420d8ac34c7f7fa71d6e630a4c8618d3780) - Chatbot autoscroll.  Thanks @whitphx!
+- [#9598](https://github.com/gradio-app/gradio/pull/9598) [`ffc33fa`](https://github.com/gradio-app/gradio/commit/ffc33facaec1bcc92add5892afb86b7b5ba037d4) - Fix markdown code copy/check button in gr.Chatbot.  Thanks @hannahblair!
+- [#9576](https://github.com/gradio-app/gradio/pull/9576) [`430a26a`](https://github.com/gradio-app/gradio/commit/430a26a4fbcbabb5e9ddb6173bf658a00960e88e) - Fix reload mode.  Thanks @freddyaboulton!
+- [#9580](https://github.com/gradio-app/gradio/pull/9580) [`a9ac396`](https://github.com/gradio-app/gradio/commit/a9ac396f19218eafc441b7614289b4828cde853d) - Deep equal check with hash.  Thanks @aliabid94!
+- [#9499](https://github.com/gradio-app/gradio/pull/9499) [`17e6c84`](https://github.com/gradio-app/gradio/commit/17e6c84d6b11651cd03c1d47caec85de62030ea0) - Fix `gr.Chatbot` panels layout.  Thanks @hannahblair!
+- [#9592](https://github.com/gradio-app/gradio/pull/9592) [`24fe222`](https://github.com/gradio-app/gradio/commit/24fe222fd17583d04dd31aebf60b649224e8382f) - Fix favicon in ssr mode.  Thanks @freddyaboulton!
+
+## 5.0.0-beta.8
+
+### Features
+
+- [#9550](https://github.com/gradio-app/gradio/pull/9550) [`b0fedd7`](https://github.com/gradio-app/gradio/commit/b0fedd7ef718c0df797ec277db7e773543a70a4d) - Fix most flaky Python tests in `5.0-dev` branch.  Thanks @abidlabs!
+- [#9577](https://github.com/gradio-app/gradio/pull/9577) [`9f532e0`](https://github.com/gradio-app/gradio/commit/9f532e03a6b91b9a5592152c19b9b2611774cae7) - Equal height columns.  Thanks @aliabid94!
+- [#9570](https://github.com/gradio-app/gradio/pull/9570) [`e0ee3d5`](https://github.com/gradio-app/gradio/commit/e0ee3d5bb1020744cefa1abf66009fbf07da8cbe) - Update gr.ColorPicker UI.  Thanks @hannahblair!
+- [#9483](https://github.com/gradio-app/gradio/pull/9483) [`8dc7c12`](https://github.com/gradio-app/gradio/commit/8dc7c12389311b60efcde1b9d3e3668a34d2dc00) - Send Streaming data over Websocket if possible. Also support base64 output format for images.  Thanks @freddyaboulton!
+- [#9521](https://github.com/gradio-app/gradio/pull/9521) [`06ef22e`](https://github.com/gradio-app/gradio/commit/06ef22e83cdd27e7afb381396d153d9db3dea16e) - Allow `info=` to render markdown.  Thanks @dawoodkhan82!
+- [#9571](https://github.com/gradio-app/gradio/pull/9571) [`148345d`](https://github.com/gradio-app/gradio/commit/148345d107763754710505281ad70368ebc6f3ec) - Fix chatinterface embedding height issues.  Thanks @aliabid94!
+- [#9525](https://github.com/gradio-app/gradio/pull/9525) [`7c367b6`](https://github.com/gradio-app/gradio/commit/7c367b6cf0472d478671b7c7476e892b4c61c812) - Fix cut off in gr.ImageEditor.  Thanks @hannahblair!
+- [#9522](https://github.com/gradio-app/gradio/pull/9522) [`3b71ed2`](https://github.com/gradio-app/gradio/commit/3b71ed21b7e2ecb67eb68fb946d25565169cb4df) - Api info fix.  Thanks @freddyaboulton!
+- [#9508](https://github.com/gradio-app/gradio/pull/9508) [`b260389`](https://github.com/gradio-app/gradio/commit/b26038932a64f024bd149a56b1539e9e75802f29) - Change caching to occur not at the creation of a `gr.Examples()` but when the Blocks is actually launched.  Thanks @aliabid94!
+- [#9524](https://github.com/gradio-app/gradio/pull/9524) [`cf39640`](https://github.com/gradio-app/gradio/commit/cf396404ec8052c7fbf5f045955028bc54a274a5) - Add `css_paths` and `head_paths` parameters.  Thanks @abidlabs!
+
+## 5.0.0-beta.7
+
+### Features
+
+- [#9546](https://github.com/gradio-app/gradio/pull/9546) [`b82aa6f`](https://github.com/gradio-app/gradio/commit/b82aa6f115f6ad9a9690bdecb0fe63c162dc75c0) - Disable sagemaker_check() for now.  Thanks @vmatt!
+- [#9545](https://github.com/gradio-app/gradio/pull/9545) [`098a009`](https://github.com/gradio-app/gradio/commit/098a009c05243967bd9e5acc28864eb40a135f6a) - Add Jinja2 language to Code component.  Thanks @CISC!
+- [#9526](https://github.com/gradio-app/gradio/pull/9526) [`f60bb68`](https://github.com/gradio-app/gradio/commit/f60bb68f52cd0863d9087b3fbc56635e297adef1) - Fix single select dropdown.  Thanks @whitphx!
+- [#9497](https://github.com/gradio-app/gradio/pull/9497) [`d826faa`](https://github.com/gradio-app/gradio/commit/d826faa8c2584cf0772d4e66b4073e33b83f3a00) - Hide x axis labels.  Thanks @aliabid94!
+
+## 5.0.0-beta.6
+
+### Features
+
+- [#9460](https://github.com/gradio-app/gradio/pull/9460) [`7352a89`](https://github.com/gradio-app/gradio/commit/7352a89722da91461c32fd33588531f3edce9c48) - Playground requirements tab.  Thanks @whitphx!
+- [#9496](https://github.com/gradio-app/gradio/pull/9496) [`1647ebd`](https://github.com/gradio-app/gradio/commit/1647ebddc3e2ed6fc143a62629409e32afcc5801) - UI theme fixes.  Thanks @aliabid94!
+- [#9450](https://github.com/gradio-app/gradio/pull/9450) [`991883e`](https://github.com/gradio-app/gradio/commit/991883e217dc0a3512b3ae3245378812f373b8db) - Improve `gr.Code`.  Thanks @hannahblair!
+- [#9504](https://github.com/gradio-app/gradio/pull/9504) [`d054262`](https://github.com/gradio-app/gradio/commit/d054262f611d5f1eb1a1c936db7152347a891f8e) - Centre components within `Block` when height and width are set.  Thanks @hannahblair!
+- [#9481](https://github.com/gradio-app/gradio/pull/9481) [`2510a6e`](https://github.com/gradio-app/gradio/commit/2510a6e978a49432d7820e9518f164a70cf8acc8) - Fix `slider-color` var.  Thanks @hannahblair!
+- [#9495](https://github.com/gradio-app/gradio/pull/9495) [`488ef76`](https://github.com/gradio-app/gradio/commit/488ef768ccc5008401f7e0aa4c357b93311190ff) - Fix custom component CLI unit tests.  Thanks @freddyaboulton!
+- [#9488](https://github.com/gradio-app/gradio/pull/9488) [`4e6a47f`](https://github.com/gradio-app/gradio/commit/4e6a47f5a29cb885d5bc01a79ca4cc45d298f0b1) - Fixes: Chatbot examples for custom chatbot + rename `suggestions` -> `examples`.  Thanks @dawoodkhan82!
+- [#9506](https://github.com/gradio-app/gradio/pull/9506) [`861f5e9`](https://github.com/gradio-app/gradio/commit/861f5e97ffde5f59e42cfa213364f19e84d799fd) - Fix node process to run with correct server name.  Thanks @abidlabs!
+- [#9493](https://github.com/gradio-app/gradio/pull/9493) [`c307a0c`](https://github.com/gradio-app/gradio/commit/c307a0c9b81b66bde21f0af4a9f7d5726ea7a30d) - Minor fixes to docs and a demo.  Thanks @abidlabs!
+- [#9519](https://github.com/gradio-app/gradio/pull/9519) [`0ab6ac5`](https://github.com/gradio-app/gradio/commit/0ab6ac5dc01b69e4f2462d00c4910f3354441227) - Fix change triggers for dropdown and radio.  Thanks @dawoodkhan82!
+
+### Fixes
+
+- [#9431](https://github.com/gradio-app/gradio/pull/9431) [`7065e11`](https://github.com/gradio-app/gradio/commit/7065e11e465fcdfe14688bd6ca2aeed0a25fcc36) - Check for `file_types` parameter in the backend.  Thanks @dawoodkhan82!
+
+## 5.0.0-beta.5
+
+### Features
+
+- [#9470](https://github.com/gradio-app/gradio/pull/9470) [`b406139`](https://github.com/gradio-app/gradio/commit/b40613928c0e0d224ff2b4db5d0b45727c178560) - Add support for 3rd party providers to `gr.load`, and provide a better UX for conversational models.  Thanks @abidlabs!
+- [#9383](https://github.com/gradio-app/gradio/pull/9383) [`30d13ac`](https://github.com/gradio-app/gradio/commit/30d13ac8a932d53abfd236d3e4e845570480e701) - Pre/post-processing download requests.  Thanks @aliabid94!
+- [#9464](https://github.com/gradio-app/gradio/pull/9464) [`3ac5d9c`](https://github.com/gradio-app/gradio/commit/3ac5d9c972576d82bc365a6532e6e12f55441a30) - Fix plots.  Thanks @pngwn!
+
+## 5.0.0-beta.4
+
+### Features
+
+- [#9419](https://github.com/gradio-app/gradio/pull/9419) [`018c140`](https://github.com/gradio-app/gradio/commit/018c140ef86cacc8211df05b57b26924dab7fa08) - Start/stop recoding from the backend. Add guide on conversational chatbots.  Thanks @freddyaboulton!
+- [#9453](https://github.com/gradio-app/gradio/pull/9453) [`56dbf77`](https://github.com/gradio-app/gradio/commit/56dbf77671012015efd3c745bc33e5074ab7158f) - Chatbot bug fixes.  Thanks @dawoodkhan82!
+- [#9448](https://github.com/gradio-app/gradio/pull/9448) [`e7a415b`](https://github.com/gradio-app/gradio/commit/e7a415b1ef923d31754b302b3cd8b5e71a9ea446) - Use or `pathlib.Path` objects to indicate filepaths for `css`, `js`, and `head` parameters.  Thanks @abidlabs!
+- [#9469](https://github.com/gradio-app/gradio/pull/9469) [`f7c3396`](https://github.com/gradio-app/gradio/commit/f7c3396f55a5b8364d3880a29d766bd092d7f840) - Fix. Triggered dataframe change event for header change.  Thanks @Joodith!
+- [#9447](https://github.com/gradio-app/gradio/pull/9447) [`afbd8e7`](https://github.com/gradio-app/gradio/commit/afbd8e7a2faadeea5a431f67a753dea14dd5829f) - Reduce analytics that are collected.  Thanks @abidlabs!
+- [#9438](https://github.com/gradio-app/gradio/pull/9438) [`8f469e1`](https://github.com/gradio-app/gradio/commit/8f469e1d1d9d1636e4dedfb1c09e76a5e2ba8d4e) - Small changes to caching.  Thanks @abidlabs!
+- [#9446](https://github.com/gradio-app/gradio/pull/9446) [`0c8fafb`](https://github.com/gradio-app/gradio/commit/0c8fafb31df7ef3ef5812d6efb47ca342a3bad3c) - Fix SSR mode flag with `mount_gradio_app` and revert changes to pytests.  Thanks @abidlabs!
+- [#9456](https://github.com/gradio-app/gradio/pull/9456) [`4d75f02`](https://github.com/gradio-app/gradio/commit/4d75f029aacf0561f50c7afebbe8d54da2cb0af4) - Update object detection guide.  Thanks @freddyaboulton!
+- [#9406](https://github.com/gradio-app/gradio/pull/9406) [`74f3b9d`](https://github.com/gradio-app/gradio/commit/74f3b9ded1ce0ff6f2f0dbcb113edd64b7bb8f60) - Allow skipping an arbitrary number of output components, and also raise a warning if the number of output components does not match the number of values returned from a function.  Thanks @abidlabs!
+- [#9413](https://github.com/gradio-app/gradio/pull/9413) [`a16787a`](https://github.com/gradio-app/gradio/commit/a16787abdc8d507d75b986dbe882d21be4540908) - Lite: HTTPX client improvement.  Thanks @whitphx!
+
+## 5.0.0-beta.3
+
+### Features
+
+- [#9376](https://github.com/gradio-app/gradio/pull/9376) [`d92c26f`](https://github.com/gradio-app/gradio/commit/d92c26fe63f6b88e16c356cb84c55b61f795db73) - Small fixes to `gr.Dataframe` and chatbot docs.  Thanks @abidlabs!
+- [#9412](https://github.com/gradio-app/gradio/pull/9412) [`c2c2fd9`](https://github.com/gradio-app/gradio/commit/c2c2fd989348f826566773c07c0e0bda200199ff) - fix SSR apps on spaces.  Thanks @pngwn!
+
+### Fixes
+
+- [#9405](https://github.com/gradio-app/gradio/pull/9405) [`bf27ff4`](https://github.com/gradio-app/gradio/commit/bf27ff4ac8ada33ea03dd26d5c1c1115aa1f318a) - Center icon in button when no text is present.  Thanks @abidlabs!
+
+## 5.0.0-beta.2
+
+### Features
+
+- [#9359](https://github.com/gradio-app/gradio/pull/9359) [`50c3a7f`](https://github.com/gradio-app/gradio/commit/50c3a7f1541f632853a96f3d979ebeef6ad82869) - Small tweak to how thoughts are shown in `gr.Chatbot`.  Thanks @abidlabs!
+- [#9323](https://github.com/gradio-app/gradio/pull/9323) [`06babda`](https://github.com/gradio-app/gradio/commit/06babda0395fd3fbd323c1c3cb33704ecfd6deb0) - Disable liking user message in chatbot by default but make it configurable.  Thanks @freddyaboulton!
+- [#8966](https://github.com/gradio-app/gradio/pull/8966) [`8e52b6a`](https://github.com/gradio-app/gradio/commit/8e52b6a3e75957462bc7fdbf6ff9c280084d5f08) - Chatbot Examples.  Thanks @dawoodkhan82!
+- [#9261](https://github.com/gradio-app/gradio/pull/9261) [`73647a0`](https://github.com/gradio-app/gradio/commit/73647a07b0439efabe3dd218ff6c366ffa3b84a0) - Move icons into `IconButtonWrapper`.  Thanks @hannahblair!
+- [#9316](https://github.com/gradio-app/gradio/pull/9316) [`4338f29`](https://github.com/gradio-app/gradio/commit/4338f29bce2430d765f20070d1823ecc19d940cb) - 9227 chatinterface retry bug.  Thanks @freddyaboulton!
+- [#9313](https://github.com/gradio-app/gradio/pull/9313) [`1fef9d9`](https://github.com/gradio-app/gradio/commit/1fef9d9a26f0ebce4de18c486702661f6539b1c6) - Standardize `height` across components and add `max_height` and `min_height` parameters where appropriate.  Thanks @abidlabs!
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+- [#9250](https://github.com/gradio-app/gradio/pull/9250) [`350b0a5`](https://github.com/gradio-app/gradio/commit/350b0a5cafb9176f914f62e7c90de51d4352cc77) - Improve Icon Button consistency.  Thanks @hannahblair!
+- [#9269](https://github.com/gradio-app/gradio/pull/9269) [`e05f568`](https://github.com/gradio-app/gradio/commit/e05f568f47e9fa33ef91dbbe5cc477d32762bc36) - Fix reload mode and streaming in 5.0 dev.  Thanks @freddyaboulton!
+- [#9356](https://github.com/gradio-app/gradio/pull/9356) [`1daf259`](https://github.com/gradio-app/gradio/commit/1daf259b52d0b1ce16d916ff25a15d322b51ecf5) - Use `container` param in `gr.Markdown`.  Thanks @hannahblair!
+- [#9321](https://github.com/gradio-app/gradio/pull/9321) [`81a356d`](https://github.com/gradio-app/gradio/commit/81a356d802f95b6a9a7aeb3759e05e47febbd0d3) - Remove two dependencies: `importlib_resources` and `urllib3` (if not in Wasm).  Thanks @abidlabs!
+- [#9253](https://github.com/gradio-app/gradio/pull/9253) [`99648ec`](https://github.com/gradio-app/gradio/commit/99648ec7c4443e74799941e47b0015ac9ca581e1) - Adds ability to block event trigger when file is uploading.  Thanks @dawoodkhan82!
+- [#9341](https://github.com/gradio-app/gradio/pull/9341) [`02369b3`](https://github.com/gradio-app/gradio/commit/02369b3159df72b2f4a36ce5684574eb65065731) - Improve is_in_or_equal and fuzzer.  Thanks @freddyaboulton!
+- [#9333](https://github.com/gradio-app/gradio/pull/9333) [`5b86e2f`](https://github.com/gradio-app/gradio/commit/5b86e2f2a2bedcde79e425fd470473bc1fd6ae2e) - Enhance Lite E2E tests and fix a networking problem on Lite.  Thanks @whitphx!
+- [#9338](https://github.com/gradio-app/gradio/pull/9338) [`19f6b31`](https://github.com/gradio-app/gradio/commit/19f6b31a73c6114093cbb5a7e69131175efa8a79) - Fix typo in `tunneling.py`.  Thanks @abidlabs!
+- [#9336](https://github.com/gradio-app/gradio/pull/9336) [`736046f`](https://github.com/gradio-app/gradio/commit/736046f17db073b56023b5e077b0ae5ae4adeb02) - Object Detection From Webcam Stream Guide.  Thanks @freddyaboulton!
+- [#9300](https://github.com/gradio-app/gradio/pull/9300) [`6309a48`](https://github.com/gradio-app/gradio/commit/6309a48e3a89a13137ec9d61c1c722eb59b8e3dc) - Raise ChecksumMismatchError.  Thanks @abidlabs!
+- [#9373](https://github.com/gradio-app/gradio/pull/9373) [`6443062`](https://github.com/gradio-app/gradio/commit/64430620449ab5b19ea32b02ab82a2d1804dcb2e) - Fix Cached Examples for Streamed Media.  Thanks @freddyaboulton!
+- [#9367](https://github.com/gradio-app/gradio/pull/9367) [`1c94328`](https://github.com/gradio-app/gradio/commit/1c94328cfe6ce0676c3850f5e9da5bcabf9ee570) - add local fonts and update themes.  Thanks @hannahblair!
+- [#9335](https://github.com/gradio-app/gradio/pull/9335) [`b543465`](https://github.com/gradio-app/gradio/commit/b543465d06d7d1b399c4d0755da05e022611a97f) - Remove lite/theme.css from the Git-managed file tree.  Thanks @whitphx!
+- [#9358](https://github.com/gradio-app/gradio/pull/9358) [`16c0485`](https://github.com/gradio-app/gradio/commit/16c0485a32be324a5f1c7252f5ce09fff79f7d67) - Small tweaks to improve the DX for the "tuples"/"messages" argument in `gr.Chatbot`.  Thanks @abidlabs!
+- [#9303](https://github.com/gradio-app/gradio/pull/9303) [`34f46b0`](https://github.com/gradio-app/gradio/commit/34f46b0512fe30b4db9c9901cb23987d3cecc48d) - Dont move files to cache automatically in chatbot postprocess.  Thanks @freddyaboulton!
+- [#9363](https://github.com/gradio-app/gradio/pull/9363) [`3ad28c7`](https://github.com/gradio-app/gradio/commit/3ad28c7e310e8589e0c53b7efee8031e129bece8) - Prevent HTML and Markdown height changing when status is hidden.  Thanks @hannahblair!
+- [#9260](https://github.com/gradio-app/gradio/pull/9260) [`d47dd1f`](https://github.com/gradio-app/gradio/commit/d47dd1f8417a878ef731d2eeabf60f3069289dee) - Fix overflowing markdown in Chatbot.  Thanks @hannahblair!
+- [#9320](https://github.com/gradio-app/gradio/pull/9320) [`98cbcae`](https://github.com/gradio-app/gradio/commit/98cbcaef827de7267462ccba180c7b2ffb1e825d) - chore: fix docs style.  Thanks @imba-tjd!
+- [#9314](https://github.com/gradio-app/gradio/pull/9314) [`299879d`](https://github.com/gradio-app/gradio/commit/299879d02adf3bacb012c76a467aaf5df5b31493) - Make `gr.Image` preprocessing more efficient.  Thanks @abidlabs!
+- [#9371](https://github.com/gradio-app/gradio/pull/9371) [`7bf3e99`](https://github.com/gradio-app/gradio/commit/7bf3e9989392b7edcdc18c1d840fb8130b15040e) - Fix `gr.ImageEditor` toolbar cutoff.  Thanks @hannahblair!
+- [#9306](https://github.com/gradio-app/gradio/pull/9306) [`f3f0fef`](https://github.com/gradio-app/gradio/commit/f3f0fef199c7779aac9aaef794dd4af1861ce50f) - Fixes race condition in `update_root_in_config`.  Thanks @abidlabs!
+- [#9312](https://github.com/gradio-app/gradio/pull/9312) [`7c0780b`](https://github.com/gradio-app/gradio/commit/7c0780b5677f8a1c05b9d2eee136e982917829b8) - Proposal: remove `gr.make_waveform` and remove `matplotlib` as a dependency.  Thanks @abidlabs!
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Tweaks to SSR mode.  Thanks @pngwn!
+- [#9270](https://github.com/gradio-app/gradio/pull/9270) [`b0b8500`](https://github.com/gradio-app/gradio/commit/b0b850081d8d10c1287b5d179b8db37482e21c8d) - Fix stop recording button colors.  Thanks @freddyaboulton!
+- [#9268](https://github.com/gradio-app/gradio/pull/9268) [`c469d40`](https://github.com/gradio-app/gradio/commit/c469d40b0d9d807abb9fa92c67069c08833ce6bc) - Raise error instead of warning if checksums for binary do not match.  Thanks @abidlabs!
+- [#9377](https://github.com/gradio-app/gradio/pull/9377) [`618e9fe`](https://github.com/gradio-app/gradio/commit/618e9fe941744cef4a4a06eb7840763c64b15e32) - Update babylon.js to `v7` for `gr.Model3D`.  Thanks @abidlabs!
+- [#9282](https://github.com/gradio-app/gradio/pull/9282) [`54ea485`](https://github.com/gradio-app/gradio/commit/54ea485ba92165be96137ae35e2d3f2fc62a2873) - Further tweak to is_in_or_equal.  Thanks @freddyaboulton!
+- [#9326](https://github.com/gradio-app/gradio/pull/9326) [`7afb9a1`](https://github.com/gradio-app/gradio/commit/7afb9a14fa64310eb8b70f43a3bad373e46e36c1) - 5.0 merge take 2.  Thanks @pngwn!
+- [#9280](https://github.com/gradio-app/gradio/pull/9280) [`7122420`](https://github.com/gradio-app/gradio/commit/712242047fde3a594dfde7f48a44c7ea16239dc8) - Match style of textbox stop button to submit button.  Thanks @freddyaboulton!
+- [#9348](https://github.com/gradio-app/gradio/pull/9348) [`61f794b`](https://github.com/gradio-app/gradio/commit/61f794bba78ef59e55beca0ba743548f33f3a3c3) - Do not attach `content_disposition_type = "attachment"` headers for files explicitly allowed by developer.  Thanks @abidlabs!
+- [#9361](https://github.com/gradio-app/gradio/pull/9361) [`5eb860f`](https://github.com/gradio-app/gradio/commit/5eb860f739a187217ded1fc569676e0edd16bab0) - Refactor lazy caching.  Thanks @abidlabs!
+- [#9311](https://github.com/gradio-app/gradio/pull/9311) [`c4afdcd`](https://github.com/gradio-app/gradio/commit/c4afdcdb1f1f80c5f95ab45d527236e9364ace82) - Added max lines and overflow scrollbar for `gr.Code`.  Thanks @micpst!
+
+### Fixes
+
+- [#9299](https://github.com/gradio-app/gradio/pull/9299) [`aa35b07`](https://github.com/gradio-app/gradio/commit/aa35b0788e613fdd45446d267513e6f94fa208ea) - Trigger state change event on iterators.  Thanks @freddyaboulton!
+- [#9393](https://github.com/gradio-app/gradio/pull/9393) [`53ed0f0`](https://github.com/gradio-app/gradio/commit/53ed0f030551ad876a1fea28a9db9015ba6ec33e) - Fix File Types for MultimodalTextbox.  Thanks @dawoodkhan82!
+- [#9328](https://github.com/gradio-app/gradio/pull/9328) [`6a7f631`](https://github.com/gradio-app/gradio/commit/6a7f63180b4105622298dd742d6a0d25216ea629) - Set the color of placeholder in a disabled textbox to gray instead of black, and disable typing while a response is generating in `gr.ChatInterface`, allow `gr.MultimodalTextbox` to accept string values.  Thanks @abidlabs!
+
+## 5.0.0-beta.1
+
+### Features
+
+- [#9235](https://github.com/gradio-app/gradio/pull/9235) [`f8b411f`](https://github.com/gradio-app/gradio/commit/f8b411fe282ff0316ed4abebc0a043b044bf4dd9) - Built-in submit and stop buttons in `gr.ChatInterface(multimodal=False)`, adding `submit_btn` and `stop_btn` props to `gr.Textbox()` and `gr.MultimodalText()`.  Thanks @whitphx!
+- [#9201](https://github.com/gradio-app/gradio/pull/9201) [`5492e74`](https://github.com/gradio-app/gradio/commit/5492e742b1f1fa618208cce523f50ad22a6e86f1) - Move buttons from chat_interface into Chatbot.  Thanks @freddyaboulton!
+- [#9199](https://github.com/gradio-app/gradio/pull/9199) [`3175c7a`](https://github.com/gradio-app/gradio/commit/3175c7aebc6ad2466d31d6949580f5a3cb4cd698) - Redesign `gr.Tabs()`.  Thanks @hannahblair!
+- [#9167](https://github.com/gradio-app/gradio/pull/9167) [`e9e737e`](https://github.com/gradio-app/gradio/commit/e9e737eeeb61d0bbf43277c75b6ffed8b34aa445) - Redesign `gr.Button()`.  Thanks @hannahblair!
+- [#9218](https://github.com/gradio-app/gradio/pull/9218) [`4a832f4`](https://github.com/gradio-app/gradio/commit/4a832f4b0a8f35a10bc2301a56b711519e85034b) - Adds TLS to FRP tunnel.  Thanks @abidlabs!
+- [#9166](https://github.com/gradio-app/gradio/pull/9166) [`8a75559`](https://github.com/gradio-app/gradio/commit/8a755596317c59bfb10803edc0f8642e62d7cecd) - Minor changes to flagging for 5.0.  Thanks @abidlabs!
+- [#9254](https://github.com/gradio-app/gradio/pull/9254) [`03f3735`](https://github.com/gradio-app/gradio/commit/03f3735fba1fd4f1978b5431af9e67de3b6e7945) - Adds a "huggingface" button variant, and makes it the default for `gr.LoginButton` and `gr.DuplicateButton`.  Thanks @abidlabs!
+- [#9187](https://github.com/gradio-app/gradio/pull/9187) [`5bf00b7`](https://github.com/gradio-app/gradio/commit/5bf00b7524ebf399b48719120a49d15bb21bd65c) - make all component SSR compatible.  Thanks @pngwn!
+- [#9236](https://github.com/gradio-app/gradio/pull/9236) [`dd8e2e3`](https://github.com/gradio-app/gradio/commit/dd8e2e32c6c1ec42e13c55af870d0da291117dd3) - Improve button consistency across light/dark mode.  Thanks @hannahblair!
+- [#9225](https://github.com/gradio-app/gradio/pull/9225) [`5f2e047`](https://github.com/gradio-app/gradio/commit/5f2e047c2ce114cebc95d5dba16c4df10fa73eb1) - Add a 'None' option to the gradio.Image component to disable image_m….  Thanks @GeeMoose!
+- [#9204](https://github.com/gradio-app/gradio/pull/9204) [`3c73f00`](https://github.com/gradio-app/gradio/commit/3c73f00e3016b16917ebfe0bad390f2dff683457) - 🔡 Update default core Gradio font.  Thanks @hannahblair!
+- [#9245](https://github.com/gradio-app/gradio/pull/9245) [`c8cfe93`](https://github.com/gradio-app/gradio/commit/c8cfe93c0971d904c29da60410952fd20c9439c0) - Lighten secondary button grey fill.  Thanks @hannahblair!
+- [#9246](https://github.com/gradio-app/gradio/pull/9246) [`38cf712`](https://github.com/gradio-app/gradio/commit/38cf71234bf57fe9da6eea2d32b1d6e7ef35c700) - Stop using `multiprocessing` in `flagging.CSVLogger` on Lite v5.  Thanks @whitphx!
+- [#9216](https://github.com/gradio-app/gradio/pull/9216) [`e137b30`](https://github.com/gradio-app/gradio/commit/e137b30b1a53ca32d3cd809d31e97d5d54a4e479) - Decrease component radii and remove input shadows.  Thanks @hannahblair!
+- [#9200](https://github.com/gradio-app/gradio/pull/9200) [`2e179d3`](https://github.com/gradio-app/gradio/commit/2e179d35be6ed60a5a6bfc7303178d63e41781ad) - prefix api routes.  Thanks @pngwn!
+
+## 5.0.0-beta.0
+
+### Features
+
+- [#9069](https://github.com/gradio-app/gradio/pull/9069) [`f9f84bf`](https://github.com/gradio-app/gradio/commit/f9f84bfe7064634164501d1023591b415ad2a03b) - No token passed by default in `gr.load()`.  Thanks @abidlabs!
+- [#9160](https://github.com/gradio-app/gradio/pull/9160) [`8f5a895`](https://github.com/gradio-app/gradio/commit/8f5a8950c949996f7c439b11a7aa40edda3e8562) - Fix native plot lite demos.  Thanks @aliabd!
+- [#9197](https://github.com/gradio-app/gradio/pull/9197) [`6773c4d`](https://github.com/gradio-app/gradio/commit/6773c4da22f957a11b2a07f032ce13c7b4c94f8c) - Redesign `gr.Slider()`.  Thanks @hannahblair!
+- [#9140](https://github.com/gradio-app/gradio/pull/9140) [`c054ec8`](https://github.com/gradio-app/gradio/commit/c054ec85e49ab102b15afd305583ee394151d16c) - Drop python 3.8 and 3.9.  Thanks @abidlabs!
+- [#8978](https://github.com/gradio-app/gradio/pull/8978) [`fe9d1cb`](https://github.com/gradio-app/gradio/commit/fe9d1cb0870a5b07d51e8cb05401af47efbacd13) - Improve url downloads for file objects.  Thanks @aliabid94!
+- [#8810](https://github.com/gradio-app/gradio/pull/8810) [`4cf8af9`](https://github.com/gradio-app/gradio/commit/4cf8af9407a44ee914e0be567da38b29f00eff8e) - Prevent invalid values from being submitted to dropdown, etc.  Thanks @abidlabs!
+- [#9194](https://github.com/gradio-app/gradio/pull/9194) [`20c0836`](https://github.com/gradio-app/gradio/commit/20c0836ed0e0698dbc81d2a4bda04363fd857334) - Deprecate type='tuples for chatbot and focus chatbot docs on 'messages' type.  Thanks @freddyaboulton!
+- [#9122](https://github.com/gradio-app/gradio/pull/9122) [`2672ea2`](https://github.com/gradio-app/gradio/commit/2672ea297ef28414ecf2eeab7984b1e4b4ee40b8) - Postprocess hardening.  Thanks @freddyaboulton!
+- [#9149](https://github.com/gradio-app/gradio/pull/9149) [`3d7a9b8`](https://github.com/gradio-app/gradio/commit/3d7a9b81f6fef06187eca832471dc1692eb493a0) - Open audio/image input stream only when queue is ready.  Thanks @freddyaboulton!
+- [#9173](https://github.com/gradio-app/gradio/pull/9173) [`66349fe`](https://github.com/gradio-app/gradio/commit/66349fe26827e3a3c15b738a1177e95fec7f5554) - Streaming Guides.  Thanks @freddyaboulton!
+- [#9185](https://github.com/gradio-app/gradio/pull/9185) [`2daf3d1`](https://github.com/gradio-app/gradio/commit/2daf3d10f5986675f6ceb75ebb50c9d991c282bf) - Adding `maxlength` attribute handling of `textarea` and `input` HTML element for the `gr.TextBox()` component via a `max_length` parameter.  Thanks @WH-Yoshi!
+- [#8959](https://github.com/gradio-app/gradio/pull/8959) [`a0aac66`](https://github.com/gradio-app/gradio/commit/a0aac6694076529ff925ccd34b3503d35e86cb49) - Adds `strict_cors` parameter to `launch()`.  Thanks @abidlabs!
+- [#9052](https://github.com/gradio-app/gradio/pull/9052) [`f3652eb`](https://github.com/gradio-app/gradio/commit/f3652ebe08211e12739df73c15fd97e5ff81276a) - Video gallery.  Thanks @dawoodkhan82!
+- [#9213](https://github.com/gradio-app/gradio/pull/9213) [`ab4580b`](https://github.com/gradio-app/gradio/commit/ab4580bd5f755a07c9a9bd2a775220a9a2085f8c) - Remove grey background behind all components.  Thanks @hannahblair!
+- [#9073](https://github.com/gradio-app/gradio/pull/9073) [`0d8a358`](https://github.com/gradio-app/gradio/commit/0d8a358cc86331aa0c83380326b30d04597f9ef9) - Set default `format` in `gr.Audio` to be `None` to avoid unnecessary preprocessing.  Thanks @abidlabs!
+- [#9130](https://github.com/gradio-app/gradio/pull/9130) [`864cd0f`](https://github.com/gradio-app/gradio/commit/864cd0fd6aa85691b53bd0bf3a50af05b778813c) - Raise WasmUnsupportedError for ffmpeg usage on Lite.  Thanks @whitphx!
+- [#8797](https://github.com/gradio-app/gradio/pull/8797) [`6e6818c`](https://github.com/gradio-app/gradio/commit/6e6818c3af836051fffdd070a9e33889b246186e) - Deprecate for 5.0.  Thanks @abidlabs!
+- [#9132](https://github.com/gradio-app/gradio/pull/9132) [`5cedf16`](https://github.com/gradio-app/gradio/commit/5cedf162f2120e30dd58bf3a8eab27115030b4f5) - Deprecate passing a tuple for gr.Code value.  Thanks @freddyaboulton!
+- [#8941](https://github.com/gradio-app/gradio/pull/8941) [`97a7bf6`](https://github.com/gradio-app/gradio/commit/97a7bf66a79179d1b91a3199d68e5c11216ca500) - Streaming inputs for 5.0.  Thanks @freddyaboulton!
+- [#9150](https://github.com/gradio-app/gradio/pull/9150) [`80c966a`](https://github.com/gradio-app/gradio/commit/80c966af6e3d947abe96058de9b683ecf05d9803) - DNS resolver on ip check.  Thanks @aliabid94!
+- [#9175](https://github.com/gradio-app/gradio/pull/9175) [`e6d456a`](https://github.com/gradio-app/gradio/commit/e6d456a9c3b7e80e0c9a16cd365288deff706635) - Change dark mode color theme from `gray` to `zinc`.  Thanks @hannahblair!
+- [#8884](https://github.com/gradio-app/gradio/pull/8884) [`3408dba`](https://github.com/gradio-app/gradio/commit/3408dba7560a17371be679d0f01564a5606dc90b) - replace ip addresses with machine-specific hashes.  Thanks @abidlabs!
+
+### Fixes
+
+- [#9189](https://github.com/gradio-app/gradio/pull/9189) [`ab142ee`](https://github.com/gradio-app/gradio/commit/ab142ee13d19070b75b5eb03efcda7193b8993c2) - Fix serialization error in curl api.  Thanks @freddyaboulton!
+
 ## 4.44.1
 
 ### Features
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 56c70b5797e47..b0b66fd1acc42 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -7,7 +7,7 @@ More than 200 awesome developers have contributed to the `gradio` library, and w
 
 Prerequisites:
 
-- [Python 3.8+](https://www.python.org/downloads/)
+- [Python 3.10+](https://www.python.org/downloads/)
 - [Node.js v16.14+](https://nodejs.dev/en/download/package-manager/) (only needed if you are making changes to the frontend)
 - [pnpm 8.1+](https://pnpm.io/8.x/installation) (only needed if you are making changes to the frontend)
  
diff --git a/README.md b/README.md
index f9892c36971c1..d542d571376ed 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@
 [![gradio-ui](https://github.com/gradio-app/gradio/actions/workflows/tests-js.yml/badge.svg)](https://github.com/gradio-app/gradio/actions/workflows/tests-js.yml)
  [![PyPI](https://img.shields.io/pypi/v/gradio)](https://pypi.org/project/gradio/)
 [![PyPI downloads](https://img.shields.io/pypi/dm/gradio)](https://pypi.org/project/gradio/)
-![Python version](https://img.shields.io/badge/python-3.8+-important)
+![Python version](https://img.shields.io/badge/python-3.10+-important)
 [![Twitter follow](https://img.shields.io/twitter/follow/gradio?style=social&label=follow)](https://twitter.com/gradio)
 
 [Website](https://gradio.app)
@@ -26,19 +26,19 @@
 
 Gradio is an open-source Python package that allows you to quickly **build** a demo or web application for your machine learning model, API, or any arbitrary Python function. You can then **share** a link to your demo or web application in just a few seconds using Gradio's built-in sharing features. *No JavaScript, CSS, or web hosting experience needed!*
 
-<img src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-guides/lcm-screenshot-3.gif" style="padding-bottom: 10px">
+<img src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-guides/gif-version.gif" style="padding-bottom: 10px">
 
-It just takes a few lines of Python to create a beautiful demo like the one above, so let's get started 💫
+It just takes a few lines of Python to create your own demo, so let's get started 💫
 
 ### Installation
 
-**Prerequisite**: Gradio requires [Python 3.8 or higher](https://www.python.org/downloads/)
+**Prerequisite**: Gradio 5 requires [Python 3.10 or higher](https://www.python.org/downloads/)
 
 
 We recommend installing Gradio using `pip`, which is included by default in Python. Run this in your terminal or command prompt:
 
 ```
-pip install gradio
+pip install --upgrade gradio
 ```
 
 
diff --git a/client/js/CHANGELOG.md b/client/js/CHANGELOG.md
index b103a45965f7a..0ddf129a85b50 100644
--- a/client/js/CHANGELOG.md
+++ b/client/js/CHANGELOG.md
@@ -1,5 +1,41 @@
 # @gradio/client
 
+## 1.6.0-beta.4
+
+### Features
+
+- [#9483](https://github.com/gradio-app/gradio/pull/9483) [`8dc7c12`](https://github.com/gradio-app/gradio/commit/8dc7c12389311b60efcde1b9d3e3668a34d2dc00) - Send Streaming data over Websocket if possible. Also support base64 output format for images.  Thanks @freddyaboulton!
+
+## 1.6.0-beta.3
+
+### Features
+
+- [#9412](https://github.com/gradio-app/gradio/pull/9412) [`c2c2fd9`](https://github.com/gradio-app/gradio/commit/c2c2fd989348f826566773c07c0e0bda200199ff) - fix SSR apps on spaces.  Thanks @pngwn!
+
+## 1.6.0-beta.2
+
+### Features
+
+- [#9323](https://github.com/gradio-app/gradio/pull/9323) [`06babda`](https://github.com/gradio-app/gradio/commit/06babda0395fd3fbd323c1c3cb33704ecfd6deb0) - Disable liking user message in chatbot by default but make it configurable.  Thanks @freddyaboulton!
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+
+### Fixes
+
+- [#9299](https://github.com/gradio-app/gradio/pull/9299) [`aa35b07`](https://github.com/gradio-app/gradio/commit/aa35b0788e613fdd45446d267513e6f94fa208ea) - Trigger state change event on iterators.  Thanks @freddyaboulton!
+
+## 1.6.0-beta.1
+
+### Features
+
+- [#9200](https://github.com/gradio-app/gradio/pull/9200) [`2e179d3`](https://github.com/gradio-app/gradio/commit/2e179d35be6ed60a5a6bfc7303178d63e41781ad) - prefix api routes.  Thanks @pngwn!
+
+## 1.6.0-beta.0
+
+### Features
+
+- [#9149](https://github.com/gradio-app/gradio/pull/9149) [`3d7a9b8`](https://github.com/gradio-app/gradio/commit/3d7a9b81f6fef06187eca832471dc1692eb493a0) - Open audio/image input stream only when queue is ready.  Thanks @freddyaboulton!
+- [#8941](https://github.com/gradio-app/gradio/pull/8941) [`97a7bf6`](https://github.com/gradio-app/gradio/commit/97a7bf66a79179d1b91a3199d68e5c11216ca500) - Streaming inputs for 5.0.  Thanks @freddyaboulton!
+
 ## 1.5.2
 
 ### Fixes
diff --git a/client/js/package.json b/client/js/package.json
index 299964d47c02b..7d6c3302cf914 100644
--- a/client/js/package.json
+++ b/client/js/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/client",
-	"version": "1.5.2",
+	"version": "1.6.0-beta.4",
 	"description": "Gradio API client",
 	"type": "module",
 	"main": "dist/index.js",
diff --git a/client/js/src/client.ts b/client/js/src/client.ts
index 21c09f7edf520..47058adb75522 100644
--- a/client/js/src/client.ts
+++ b/client/js/src/client.ts
@@ -32,13 +32,19 @@ import {
 } from "./helpers/init_helpers";
 import { check_and_wake_space, check_space_status } from "./helpers/spaces";
 import { open_stream, readable_stream, close_stream } from "./utils/stream";
-import { API_INFO_ERROR_MSG, CONFIG_ERROR_MSG } from "./constants";
+import {
+	API_INFO_ERROR_MSG,
+	CONFIG_ERROR_MSG,
+	HEARTBEAT_URL,
+	COMPONENT_SERVER_URL
+} from "./constants";
 
 export class Client {
 	app_reference: string;
 	options: ClientOptions;
 
 	config: Config | undefined;
+	api_prefix = "";
 	api_info: ApiInfo<JsApiData> | undefined;
 	api_map: Record<string, number> = {};
 	session_hash: string = Math.random().toString(36).substring(2);
@@ -56,6 +62,8 @@ export class Client {
 	heartbeat_event: EventSource | null = null;
 	abort_controller: AbortController | null = null;
 	stream_instance: EventSource | null = null;
+	current_payload: any;
+	ws_map: Record<string, WebSocket | "failed"> = {};
 
 	fetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response> {
 		const headers = new Headers(init?.headers || {});
@@ -130,7 +138,7 @@ export class Client {
 		}
 
 		this.options = options;
-
+		this.current_payload = {};
 		this.view_api = view_api.bind(this);
 		this.upload_files = upload_files.bind(this);
 		this.handle_blob = handle_blob.bind(this);
@@ -155,18 +163,14 @@ export class Client {
 			global.WebSocket = ws.WebSocket as unknown as typeof WebSocket;
 		}
 
-		try {
-			if (this.options.auth) {
-				await this.resolve_cookies();
-			}
-
-			await this._resolve_config().then(({ config }) =>
-				this._resolve_hearbeat(config)
-			);
-		} catch (e: any) {
-			throw Error(e);
+		if (this.options.auth) {
+			await this.resolve_cookies();
 		}
 
+		await this._resolve_config().then(({ config }) =>
+			this._resolve_hearbeat(config)
+		);
+
 		this.api_info = await this.view_api();
 		this.api_map = map_names_to_ids(this.config?.dependencies || []);
 	}
@@ -174,6 +178,8 @@ export class Client {
 	async _resolve_hearbeat(_config: Config): Promise<void> {
 		if (_config) {
 			this.config = _config;
+			this.api_prefix = _config.api_prefix || "";
+
 			if (this.config && this.config.connect_heartbeat) {
 				if (this.config.space_id && this.options.hf_token) {
 					this.jwt = await get_jwt(
@@ -192,7 +198,7 @@ export class Client {
 		if (this.config && this.config.connect_heartbeat) {
 			// connect to the heartbeat endpoint via GET request
 			const heartbeat_url = new URL(
-				`${this.config.root}/heartbeat/${this.session_hash}`
+				`${this.config.root}${this.api_prefix}/${HEARTBEAT_URL}/${this.session_hash}`
 			);
 
 			// if the jwt is available, add it to the query params
@@ -222,6 +228,10 @@ export class Client {
 		close_stream(this.stream_status, this.abort_controller);
 	}
 
+	set_current_payload(payload: any): void {
+		this.current_payload = payload;
+	}
+
 	static async duplicate(
 		app_reference: string,
 		options: DuplicateOptions = {
@@ -277,6 +287,7 @@ export class Client {
 		_config: Config
 	): Promise<Config | client_return> {
 		this.config = _config;
+		this.api_prefix = _config.api_prefix || "";
 
 		if (typeof window !== "undefined" && typeof document !== "undefined") {
 			if (window.location.protocol === "https:") {
@@ -306,6 +317,8 @@ export class Client {
 		if (status.status === "running") {
 			try {
 				this.config = await this._resolve_config();
+				this.api_prefix = this?.config?.api_prefix || "";
+
 				if (!this.config) {
 					throw new Error(CONFIG_ERROR_MSG);
 				}
@@ -385,12 +398,15 @@ export class Client {
 		}
 
 		try {
-			const response = await this.fetch(`${root_url}/component_server/`, {
-				method: "POST",
-				body: body,
-				headers,
-				credentials: "include"
-			});
+			const response = await this.fetch(
+				`${root_url}${this.api_prefix}/${COMPONENT_SERVER_URL}/`,
+				{
+					method: "POST",
+					body: body,
+					headers,
+					credentials: "include"
+				}
+			);
 
 			if (!response.ok) {
 				throw new Error(
@@ -418,6 +434,60 @@ export class Client {
 			component_server: this.component_server
 		};
 	}
+
+	private async connect_ws(url: string): Promise<void> {
+		return new Promise((resolve, reject) => {
+			let ws;
+			try {
+				ws = new WebSocket(url);
+			} catch (e) {
+				this.ws_map[url] = "failed";
+				return;
+			}
+
+			ws.onopen = () => {
+				resolve();
+			};
+
+			ws.onerror = (error) => {
+				console.error("WebSocket error:", error);
+				this.close_ws(url);
+				this.ws_map[url] = "failed";
+				resolve();
+			};
+
+			ws.onclose = () => {
+				delete this.ws_map[url];
+				this.ws_map[url] = "failed";
+			};
+
+			ws.onmessage = (event) => {};
+			this.ws_map[url] = ws;
+		});
+	}
+
+	async send_ws_message(url: string, data: any): Promise<void> {
+		// connect if not connected
+		if (!(url in this.ws_map)) {
+			await this.connect_ws(url);
+		}
+		const ws = this.ws_map[url];
+		if (ws instanceof WebSocket) {
+			ws.send(JSON.stringify(data));
+		} else {
+			this.post_data(url, data);
+		}
+	}
+
+	async close_ws(url: string): Promise<void> {
+		if (url in this.ws_map) {
+			const ws = this.ws_map[url];
+			if (ws instanceof WebSocket) {
+				ws.close();
+				delete this.ws_map[url];
+			}
+		}
+	}
 }
 
 /**
diff --git a/client/js/src/constants.ts b/client/js/src/constants.ts
index 488ae760b110a..1dbce9880c314 100644
--- a/client/js/src/constants.ts
+++ b/client/js/src/constants.ts
@@ -1,20 +1,24 @@
 // endpoints
-export const HOST_URL = "host";
-export const API_URL = "api/predict/";
-export const SSE_URL_V0 = "queue/join";
-export const SSE_DATA_URL_V0 = "queue/data";
-export const SSE_URL = "queue/data";
-export const SSE_DATA_URL = "queue/join";
-export const UPLOAD_URL = "upload";
-export const LOGIN_URL = "login";
-export const CONFIG_URL = "config";
-export const API_INFO_URL = "info";
-export const RUNTIME_URL = "runtime";
-export const SLEEPTIME_URL = "sleeptime";
-export const RAW_API_INFO_URL = "info?serialize=False";
+export const HOST_URL = `host`;
+export const API_URL = `predict/`;
+export const SSE_URL_V0 = `queue/join`;
+export const SSE_DATA_URL_V0 = `queue/data`;
+export const SSE_URL = `queue/data`;
+export const SSE_DATA_URL = `queue/join`;
+export const UPLOAD_URL = `upload`;
+export const LOGIN_URL = `login`;
+export const CONFIG_URL = `config`;
+export const API_INFO_URL = `info`;
+export const RUNTIME_URL = `runtime`;
+export const SLEEPTIME_URL = `sleeptime`;
+export const HEARTBEAT_URL = `heartbeat`;
+export const COMPONENT_SERVER_URL = `component_server`;
+export const RESET_URL = `reset`;
+export const CANCEL_URL = `cancel`;
+
+export const RAW_API_INFO_URL = `info?serialize=False`;
 export const SPACE_FETCHER_URL =
 	"https://gradio-space-api-fetcher-v2.hf.space/api";
-export const RESET_URL = "reset";
 export const SPACE_URL = "https://hf.space/{}";
 
 // messages
diff --git a/client/js/src/helpers/api_info.ts b/client/js/src/helpers/api_info.ts
index fda8896872804..b3e5a655a2dc5 100644
--- a/client/js/src/helpers/api_info.ts
+++ b/client/js/src/helpers/api_info.ts
@@ -243,9 +243,11 @@ export function handle_message(
 		| "log"
 		| "none"
 		| "heartbeat"
+		| "streaming"
 		| "unexpected_error";
 	data?: any;
 	status?: Status;
+	original_msg?: string;
 } {
 	const queue = true;
 	switch (data.msg) {
@@ -313,10 +315,27 @@ export function handle_message(
 					stage: data.success ? "generating" : "error",
 					code: data.code,
 					progress_data: data.progress_data,
-					eta: data.average_duration
+					eta: data.average_duration,
+					changed_state_ids: data.success
+						? data.output.changed_state_ids
+						: undefined
 				},
 				data: data.success ? data.output : null
 			};
+		case "process_streaming":
+			return {
+				type: "streaming",
+				status: {
+					queue,
+					message: data.output.error,
+					stage: "streaming",
+					time_limit: data.time_limit,
+					code: data.code,
+					progress_data: data.progress_data,
+					eta: data.eta
+				},
+				data: data.output
+			};
 		case "process_completed":
 			if ("error" in data.output) {
 				return {
@@ -358,7 +377,8 @@ export function handle_message(
 					position: 0,
 					success: data.success,
 					eta: data.eta
-				}
+				},
+				original_msg: "process_starts"
 			};
 	}
 
diff --git a/client/js/src/helpers/init_helpers.ts b/client/js/src/helpers/init_helpers.ts
index f4945a5acaf3b..82b6fc1719d95 100644
--- a/client/js/src/helpers/init_helpers.ts
+++ b/client/js/src/helpers/init_helpers.ts
@@ -87,6 +87,7 @@ export async function resolve_config(
 		return { ...config, path } as Config;
 	} else if (endpoint) {
 		const config_url = join_urls(endpoint, CONFIG_URL);
+
 		const response = await this.fetch(config_url, {
 			headers,
 			credentials: "include"
@@ -204,10 +205,11 @@ export function determine_protocol(endpoint: string): {
 	}
 
 	// default to secure if no protocol is provided
+
 	return {
 		ws_protocol: "wss",
 		http_protocol: "https:",
-		host: endpoint
+		host: new URL(endpoint).host
 	};
 }
 
diff --git a/client/js/src/index.ts b/client/js/src/index.ts
index 7717d94f887c3..6ba30fc37a3e6 100644
--- a/client/js/src/index.ts
+++ b/client/js/src/index.ts
@@ -14,7 +14,8 @@ export type {
 	UploadResponse,
 	RenderMessage,
 	LogMessage,
-	Payload
+	Payload,
+	Config
 } from "./types";
 
 // todo: remove in @gradio/client v1.0
diff --git a/client/js/src/test/api_info.test.ts b/client/js/src/test/api_info.test.ts
index 40e9d1f57fd5f..a717069723168 100644
--- a/client/js/src/test/api_info.test.ts
+++ b/client/js/src/test/api_info.test.ts
@@ -238,6 +238,7 @@ describe("handle_message", () => {
 		const result = handle_message(data, last_status);
 		expect(result).toEqual({
 			type: "update",
+			original_msg: "process_starts",
 			status: {
 				queue: true,
 				stage: "pending",
diff --git a/client/js/src/test/init_helpers.test.ts b/client/js/src/test/init_helpers.test.ts
index 2462dd4ea2691..055ad077363a5 100644
--- a/client/js/src/test/init_helpers.test.ts
+++ b/client/js/src/test/init_helpers.test.ts
@@ -84,16 +84,6 @@ describe("determine_protocol", () => {
 			host: "lite.local"
 		});
 	});
-
-	it('should return the default protocols and host when the endpoint does not start with "http" or "file"', () => {
-		const endpoint = "huggingface.co";
-		const result = determine_protocol(endpoint);
-		expect(result).toEqual({
-			ws_protocol: "wss",
-			http_protocol: "https:",
-			host: "huggingface.co"
-		});
-	});
 });
 
 describe("parse_and_set_cookies", () => {
diff --git a/client/js/src/types.ts b/client/js/src/types.ts
index b929e96cb16dc..ac4f2b54721db 100644
--- a/client/js/src/types.ts
+++ b/client/js/src/types.ts
@@ -102,6 +102,7 @@ export type client_return = {
 export interface SubmitIterable<T> extends AsyncIterable<T> {
 	[Symbol.asyncIterator](): AsyncIterator<T>;
 	cancel: () => Promise<void>;
+	event_id: () => string;
 }
 
 export type PredictReturn = {
@@ -182,6 +183,9 @@ export interface Config {
 	max_file_size?: number;
 	theme_hash?: number;
 	username: string | null;
+	api_prefix?: string;
+	fill_height?: boolean;
+	fill_width?: boolean;
 }
 
 // todo: DRY up types
@@ -251,6 +255,11 @@ export interface Dependency {
 	show_api: boolean;
 	zerogpu?: boolean;
 	rendered_in: number | null;
+	connection: "stream" | "sse";
+	time_limit: number;
+	stream_every: number;
+	like_user_message: boolean;
+	event_specific_args: string[];
 }
 
 export interface DependencyTypes {
@@ -335,7 +344,7 @@ export interface Status {
 	queue: boolean;
 	code?: string;
 	success?: boolean;
-	stage: "pending" | "error" | "complete" | "generating";
+	stage: "pending" | "error" | "complete" | "generating" | "streaming";
 	duration?: number;
 	visible?: boolean;
 	broken?: boolean;
@@ -352,12 +361,14 @@ export interface Status {
 	}[];
 	time?: Date;
 	changed_state_ids?: number[];
+	time_limit?: number;
 }
 
 export interface StatusMessage extends Status {
 	type: "status";
 	endpoint: string;
 	fn_index: number;
+	original_msg?: string;
 }
 
 export interface PayloadMessage extends Payload {
diff --git a/client/js/src/upload.ts b/client/js/src/upload.ts
index 0dfe714f7da6a..175093a2c40f8 100644
--- a/client/js/src/upload.ts
+++ b/client/js/src/upload.ts
@@ -1,4 +1,3 @@
-import type { UploadResponse } from "./types";
 import type { Client } from "./client";
 
 export async function upload(
@@ -34,7 +33,7 @@ export async function upload(
 							const file = new FileData({
 								...file_data[i],
 								path: f,
-								url: root_url + "/file=" + f
+								url: `${root_url}${this.api_prefix}/file=${f}`
 							});
 							return file;
 						});
@@ -73,6 +72,7 @@ export class FileData {
 	is_stream?: boolean;
 	mime_type?: string;
 	alt_text?: string;
+	b64?: string;
 	readonly meta = { _type: "gradio.FileData" };
 
 	constructor({
@@ -83,7 +83,8 @@ export class FileData {
 		blob,
 		is_stream,
 		mime_type,
-		alt_text
+		alt_text,
+		b64
 	}: {
 		path: string;
 		url?: string;
@@ -93,6 +94,7 @@ export class FileData {
 		is_stream?: boolean;
 		mime_type?: string;
 		alt_text?: string;
+		b64?: string;
 	}) {
 		this.path = path;
 		this.url = url;
@@ -102,5 +104,6 @@ export class FileData {
 		this.is_stream = is_stream;
 		this.mime_type = mime_type;
 		this.alt_text = alt_text;
+		this.b64 = b64;
 	}
 }
diff --git a/client/js/src/utils/stream.ts b/client/js/src/utils/stream.ts
index 7ae061cc3aea1..edfe5e555e8af 100644
--- a/client/js/src/utils/stream.ts
+++ b/client/js/src/utils/stream.ts
@@ -1,4 +1,4 @@
-import { BROKEN_CONNECTION_MSG } from "../constants";
+import { BROKEN_CONNECTION_MSG, SSE_URL } from "../constants";
 import type { Client } from "../client";
 import { stream } from "fetch-event-stream";
 
@@ -25,7 +25,7 @@ export async function open_stream(this: Client): Promise<void> {
 		session_hash: this.session_hash
 	}).toString();
 
-	let url = new URL(`${config.root}/queue/data?${params}`);
+	let url = new URL(`${config.root}${this.api_prefix}/${SSE_URL}?${params}`);
 
 	if (jwt) {
 		url.searchParams.set("__sign", jwt);
diff --git a/client/js/src/utils/submit.ts b/client/js/src/utils/submit.ts
index ee3277dcfb03b..f5863b478e45f 100644
--- a/client/js/src/utils/submit.ts
+++ b/client/js/src/utils/submit.ts
@@ -19,7 +19,14 @@ import {
 	process_endpoint
 } from "../helpers/api_info";
 import semiver from "semiver";
-import { BROKEN_CONNECTION_MSG, QUEUE_FULL_MSG } from "../constants";
+import {
+	BROKEN_CONNECTION_MSG,
+	QUEUE_FULL_MSG,
+	SSE_URL,
+	SSE_DATA_URL,
+	RESET_URL,
+	CANCEL_URL
+} from "../constants";
 import { apply_diff_stream, close_stream } from "./stream";
 import { Client } from "../client";
 
@@ -46,7 +53,8 @@ export function submit(
 			event_callbacks,
 			unclosed_events,
 			post_data,
-			options
+			options,
+			api_prefix
 		} = this;
 
 		const that = this;
@@ -66,6 +74,8 @@ export function submit(
 		let websocket: WebSocket;
 		let stream: EventSource | null;
 		let protocol = config.protocol ?? "ws";
+		let event_id_final = "";
+		let event_id_cb: () => string = () => event_id_final;
 
 		const _endpoint = typeof endpoint === "number" ? "/predict" : endpoint;
 		let payload: Payload;
@@ -131,14 +141,14 @@ export function submit(
 				}
 
 				if ("event_id" in cancel_request) {
-					await fetch(`${config.root}/cancel`, {
+					await fetch(`${config.root}${api_prefix}/${CANCEL_URL}`, {
 						headers: { "Content-Type": "application/json" },
 						method: "POST",
 						body: JSON.stringify(cancel_request)
 					});
 				}
 
-				await fetch(`${config.root}/reset`, {
+				await fetch(`${config.root}${api_prefix}/${RESET_URL}`, {
 					headers: { "Content-Type": "application/json" },
 					method: "POST",
 					body: JSON.stringify(reset_request)
@@ -205,7 +215,7 @@ export function submit(
 					});
 
 					post_data(
-						`${config.root}/run${
+						`${config.root}${api_prefix}/run${
 							_endpoint.startsWith("/") ? _endpoint : `/${_endpoint}`
 						}${url_params ? "?" + url_params : ""}`,
 						{
@@ -411,7 +421,7 @@ export function submit(
 						session_hash: session_hash
 					}).toString();
 					let url = new URL(
-						`${config.root}/queue/join?${
+						`${config.root}${api_prefix}/${SSE_URL}?${
 							url_params ? url_params + "&" : ""
 						}${params}`
 					);
@@ -449,12 +459,14 @@ export function submit(
 								close();
 							}
 						} else if (type === "data") {
-							event_id = _data.event_id as string;
-							let [_, status] = await post_data(`${config.root}/queue/data`, {
-								...payload,
-								session_hash,
-								event_id
-							});
+							let [_, status] = await post_data(
+								`${config.root}${api_prefix}/queue/data`,
+								{
+									...payload,
+									session_hash,
+									event_id
+								}
+							);
 							if (status !== 200) {
 								fire_event({
 									type: "status",
@@ -480,7 +492,7 @@ export function submit(
 								visible: data.visible,
 								fn_index
 							});
-						} else if (type === "generating") {
+						} else if (type === "generating" || type === "streaming") {
 							fire_event({
 								type: "status",
 								time: new Date(),
@@ -563,7 +575,7 @@ export function submit(
 							: Promise.resolve(null);
 					const post_data_promise = zerogpu_auth_promise.then((headers) => {
 						return post_data(
-							`${config.root}/queue/join?${url_params}`,
+							`${config.root}${api_prefix}/${SSE_DATA_URL}?${url_params}`,
 							{
 								...payload,
 								session_hash
@@ -594,9 +606,10 @@ export function submit(
 							});
 						} else {
 							event_id = response.event_id as string;
+							event_id_final = event_id;
 							let callback = async function (_data: object): Promise<void> {
 								try {
-									const { type, status, data } = handle_message(
+									const { type, status, data, original_msg } = handle_message(
 										_data,
 										last_status[fn_index]
 									);
@@ -612,6 +625,7 @@ export function submit(
 											endpoint: _endpoint,
 											fn_index,
 											time: new Date(),
+											original_msg: original_msg,
 											...status
 										});
 									} else if (type === "complete") {
@@ -639,7 +653,7 @@ export function submit(
 											fn_index
 										});
 										return;
-									} else if (type === "generating") {
+									} else if (type === "generating" || type === "streaming") {
 										fire_event({
 											type: "status",
 											time: new Date(),
@@ -651,6 +665,7 @@ export function submit(
 										});
 										if (
 											data &&
+											dependency.connection !== "stream" &&
 											["sse_v2", "sse_v2.1", "sse_v3"].includes(protocol)
 										) {
 											apply_diff_stream(pending_diff_streams, event_id!, data);
@@ -790,7 +805,8 @@ export function submit(
 				close();
 				return next();
 			},
-			cancel
+			cancel,
+			event_id: event_id_cb
 		};
 
 		return iterator;
diff --git a/client/js/src/utils/upload_files.ts b/client/js/src/utils/upload_files.ts
index db2f55729d933..6babe212bd494 100644
--- a/client/js/src/utils/upload_files.ts
+++ b/client/js/src/utils/upload_files.ts
@@ -27,8 +27,8 @@ export async function upload_files(
 		});
 		try {
 			const upload_url = upload_id
-				? `${root_url}/${UPLOAD_URL}?upload_id=${upload_id}`
-				: `${root_url}/${UPLOAD_URL}`;
+				? `${root_url}${this.api_prefix}/${UPLOAD_URL}?upload_id=${upload_id}`
+				: `${root_url}${this.api_prefix}/${UPLOAD_URL}`;
 
 			response = await this.fetch(upload_url, {
 				method: "POST",
diff --git a/client/js/src/utils/view_api.ts b/client/js/src/utils/view_api.ts
index 1bfcdfdc201b4..52268bd745e3b 100644
--- a/client/js/src/utils/view_api.ts
+++ b/client/js/src/utils/view_api.ts
@@ -41,7 +41,7 @@ export async function view_api(this: Client): Promise<any> {
 					credentials: "include"
 				});
 			} else {
-				const url = join_urls(config.root, API_INFO_URL);
+				const url = join_urls(config.root, this.api_prefix, API_INFO_URL);
 				response = await this.fetch(url, {
 					headers,
 					credentials: "include"
diff --git a/client/python/CHANGELOG.md b/client/python/CHANGELOG.md
index 7aa7b80266792..d4c36b3e12e00 100644
--- a/client/python/CHANGELOG.md
+++ b/client/python/CHANGELOG.md
@@ -1,5 +1,44 @@
 # gradio_client
 
+## 1.4.0-beta.5
+
+### Features
+
+- [#9589](https://github.com/gradio-app/gradio/pull/9589) [`477f45c`](https://github.com/gradio-app/gradio/commit/477f45cb43be957684eb392e3d62c09490c22391) - Only move files to the cache that have a meta key.  Thanks @freddyaboulton!
+
+## 1.4.0-beta.4
+
+### Features
+
+- [#9550](https://github.com/gradio-app/gradio/pull/9550) [`b0fedd7`](https://github.com/gradio-app/gradio/commit/b0fedd7ef718c0df797ec277db7e773543a70a4d) - Fix most flaky Python tests in `5.0-dev` branch.  Thanks @abidlabs!
+- [#9483](https://github.com/gradio-app/gradio/pull/9483) [`8dc7c12`](https://github.com/gradio-app/gradio/commit/8dc7c12389311b60efcde1b9d3e3668a34d2dc00) - Send Streaming data over Websocket if possible. Also support base64 output format for images.  Thanks @freddyaboulton!
+- [#9522](https://github.com/gradio-app/gradio/pull/9522) [`3b71ed2`](https://github.com/gradio-app/gradio/commit/3b71ed21b7e2ecb67eb68fb946d25565169cb4df) - Api info fix.  Thanks @freddyaboulton!
+
+## 1.4.0-beta.3
+
+### Fixes
+
+- [#9431](https://github.com/gradio-app/gradio/pull/9431) [`7065e11`](https://github.com/gradio-app/gradio/commit/7065e11e465fcdfe14688bd6ca2aeed0a25fcc36) - Check for `file_types` parameter in the backend.  Thanks @dawoodkhan82!
+
+## 1.4.0-beta.2
+
+### Features
+
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+
+## 1.4.0-beta.1
+
+### Features
+
+- [#9200](https://github.com/gradio-app/gradio/pull/9200) [`2e179d3`](https://github.com/gradio-app/gradio/commit/2e179d35be6ed60a5a6bfc7303178d63e41781ad) - prefix api routes.  Thanks @pngwn!
+
+## 1.4.0-beta.0
+
+### Features
+
+- [#9140](https://github.com/gradio-app/gradio/pull/9140) [`c054ec8`](https://github.com/gradio-app/gradio/commit/c054ec85e49ab102b15afd305583ee394151d16c) - Drop python 3.8 and 3.9.  Thanks @abidlabs!
+- [#8941](https://github.com/gradio-app/gradio/pull/8941) [`97a7bf6`](https://github.com/gradio-app/gradio/commit/97a7bf66a79179d1b91a3199d68e5c11216ca500) - Streaming inputs for 5.0.  Thanks @freddyaboulton!
+
 ## 1.3.0
 
 ### Features
diff --git a/client/python/README.md b/client/python/README.md
index 0482b30d16211..07049e8c23da1 100644
--- a/client/python/README.md
+++ b/client/python/README.md
@@ -25,7 +25,7 @@ The Gradio client works with any Gradio Space, whether it be an image generator,
 
 If you already have a recent version of `gradio`, then the `gradio_client` is included as a dependency.
 
-Otherwise, the lightweight `gradio_client` package can be installed from pip (or pip3) and works with Python versions 3.8 or higher:
+Otherwise, the lightweight `gradio_client` package can be installed from pip (or pip3) and works with Python versions 3.10 or higher:
 
 ```bash
 $ pip install gradio_client
diff --git a/client/python/gradio_client/CHANGELOG.md b/client/python/gradio_client/CHANGELOG.md
index 7aa7b80266792..d4c36b3e12e00 100644
--- a/client/python/gradio_client/CHANGELOG.md
+++ b/client/python/gradio_client/CHANGELOG.md
@@ -1,5 +1,44 @@
 # gradio_client
 
+## 1.4.0-beta.5
+
+### Features
+
+- [#9589](https://github.com/gradio-app/gradio/pull/9589) [`477f45c`](https://github.com/gradio-app/gradio/commit/477f45cb43be957684eb392e3d62c09490c22391) - Only move files to the cache that have a meta key.  Thanks @freddyaboulton!
+
+## 1.4.0-beta.4
+
+### Features
+
+- [#9550](https://github.com/gradio-app/gradio/pull/9550) [`b0fedd7`](https://github.com/gradio-app/gradio/commit/b0fedd7ef718c0df797ec277db7e773543a70a4d) - Fix most flaky Python tests in `5.0-dev` branch.  Thanks @abidlabs!
+- [#9483](https://github.com/gradio-app/gradio/pull/9483) [`8dc7c12`](https://github.com/gradio-app/gradio/commit/8dc7c12389311b60efcde1b9d3e3668a34d2dc00) - Send Streaming data over Websocket if possible. Also support base64 output format for images.  Thanks @freddyaboulton!
+- [#9522](https://github.com/gradio-app/gradio/pull/9522) [`3b71ed2`](https://github.com/gradio-app/gradio/commit/3b71ed21b7e2ecb67eb68fb946d25565169cb4df) - Api info fix.  Thanks @freddyaboulton!
+
+## 1.4.0-beta.3
+
+### Fixes
+
+- [#9431](https://github.com/gradio-app/gradio/pull/9431) [`7065e11`](https://github.com/gradio-app/gradio/commit/7065e11e465fcdfe14688bd6ca2aeed0a25fcc36) - Check for `file_types` parameter in the backend.  Thanks @dawoodkhan82!
+
+## 1.4.0-beta.2
+
+### Features
+
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+
+## 1.4.0-beta.1
+
+### Features
+
+- [#9200](https://github.com/gradio-app/gradio/pull/9200) [`2e179d3`](https://github.com/gradio-app/gradio/commit/2e179d35be6ed60a5a6bfc7303178d63e41781ad) - prefix api routes.  Thanks @pngwn!
+
+## 1.4.0-beta.0
+
+### Features
+
+- [#9140](https://github.com/gradio-app/gradio/pull/9140) [`c054ec8`](https://github.com/gradio-app/gradio/commit/c054ec85e49ab102b15afd305583ee394151d16c) - Drop python 3.8 and 3.9.  Thanks @abidlabs!
+- [#8941](https://github.com/gradio-app/gradio/pull/8941) [`97a7bf6`](https://github.com/gradio-app/gradio/commit/97a7bf66a79179d1b91a3199d68e5c11216ca500) - Streaming inputs for 5.0.  Thanks @freddyaboulton!
+
 ## 1.3.0
 
 ### Features
diff --git a/client/python/gradio_client/cli/deploy_discord.py b/client/python/gradio_client/cli/deploy_discord.py
index 9a828a32a0655..e653007428a6b 100644
--- a/client/python/gradio_client/cli/deploy_discord.py
+++ b/client/python/gradio_client/cli/deploy_discord.py
@@ -1,7 +1,6 @@
-from typing import List, Optional
+from typing import Annotated, Optional
 
 from typer import Option
-from typing_extensions import Annotated
 
 from gradio_client import Client
 
@@ -17,7 +16,7 @@ def main(
         str, Option(help="Discord bot token. Get one on the discord website.")
     ] = None,
     api_names: Annotated[
-        List[str], Option(help="Api names to turn into discord bots")
+        list[str], Option(help="Api names to turn into discord bots")
     ] = None,
     to_id: Annotated[
         Optional[str], Option(help="Name of the space used to host the discord bot")
diff --git a/client/python/gradio_client/client.py b/client/python/gradio_client/client.py
index c6dc3eff3f3f4..157d4184cb2c1 100644
--- a/client/python/gradio_client/client.py
+++ b/client/python/gradio_client/client.py
@@ -16,13 +16,14 @@
 import urllib.parse
 import uuid
 import warnings
+from collections.abc import Callable
 from concurrent.futures import Future
 from dataclasses import dataclass
 from datetime import datetime
 from functools import partial
 from pathlib import Path
 from threading import Lock
-from typing import Any, Callable, Literal
+from typing import Any, Literal
 
 import httpx
 import huggingface_hub
@@ -75,7 +76,7 @@ class Client:
     def __init__(
         self,
         src: str,
-        hf_token: str | None = None,
+        hf_token: str | Literal[False] | None = False,
         max_workers: int = 40,
         verbose: bool = True,
         auth: tuple[str, str] | None = None,
@@ -88,14 +89,14 @@ def __init__(
     ):
         """
         Parameters:
-            src: Either the name of the Hugging Face Space to load, (e.g. "abidlabs/whisper-large-v2") or the full URL (including "http" or "https") of the hosted Gradio app to load (e.g. "http://mydomain.com/app" or "https://bec81a83-5b5c-471e.gradio.live/").
-            hf_token: The Hugging Face token to use to access private Spaces. Automatically fetched if you are logged in via the Hugging Face Hub CLI. Obtain from: https://huggingface.co/settings/token
-            max_workers: The maximum number of thread workers that can be used to make requests to the remote Gradio app simultaneously.
-            verbose: Whether the client should print statements to the console.
-            headers: Additional headers to send to the remote Gradio app on every request. By default only the HF authorization and user-agent headers are sent. This parameter will override the default headers if they have the same keys.
-            download_files: Directory where the client should download output files  on the local machine from the remote API. By default, uses the value of the GRADIO_TEMP_DIR environment variable which, if not set by the user, is a temporary directory on your machine. If False, the client does not download files and returns a FileData dataclass object with the filepath on the remote machine instead.
-            ssl_verify: If False, skips certificate validation which allows the client to connect to Gradio apps that are using self-signed certificates.
-            httpx_kwargs: Additional keyword arguments to pass to `httpx.Client`, `httpx.stream`, `httpx.get` and `httpx.post`. This can be used to set timeouts, proxies, http auth, etc.
+            src: either the name of the Hugging Face Space to load, (e.g. "abidlabs/whisper-large-v2") or the full URL (including "http" or "https") of the hosted Gradio app to load (e.g. "http://mydomain.com/app" or "https://bec81a83-5b5c-471e.gradio.live/").
+            hf_token: optional Hugging Face token to use to access private Spaces. By default, no token is sent to the server. Set `hf_token=None` to use the locally saved token if there is one (warning: only provide a token if you are loading a trusted private Space as the token can be read by the Space you are loading). Find your tokens here: https://huggingface.co/settings/tokens.
+            max_workers: maximum number of thread workers that can be used to make requests to the remote Gradio app simultaneously.
+            verbose: whether the client should print statements to the console.
+            headers: additional headers to send to the remote Gradio app on every request. By default only the HF authorization and user-agent headers are sent. This parameter will override the default headers if they have the same keys.
+            download_files: directory where the client should download output files  on the local machine from the remote API. By default, uses the value of the GRADIO_TEMP_DIR environment variable which, if not set by the user, is a temporary directory on your machine. If False, the client does not download files and returns a FileData dataclass object with the filepath on the remote machine instead.
+            ssl_verify: if False, skips certificate validation which allows the client to connect to Gradio apps that are using self-signed certificates.
+            httpx_kwargs: additional keyword arguments to pass to `httpx.Client`, `httpx.stream`, `httpx.get` and `httpx.post`. This can be used to set timeouts, proxies, http auth, etc.
         """
         self.verbose = verbose
         self.hf_token = hf_token
@@ -153,20 +154,27 @@ def __init__(
         self.protocol: Literal["ws", "sse", "sse_v1", "sse_v2", "sse_v2.1"] = (
             self.config.get("protocol", "ws")
         )
-        self.api_url = urllib.parse.urljoin(self.src, utils.API_URL)
+        api_prefix: str = self.config.get("api_prefix", "")
+        self.api_prefix = api_prefix.lstrip("/") + "/"
+        self.src_prefixed = urllib.parse.urljoin(self.src, api_prefix).rstrip("/") + "/"
+
+        self.api_url = urllib.parse.urljoin(self.src_prefixed, utils.API_URL)
         self.sse_url = urllib.parse.urljoin(
-            self.src, utils.SSE_URL_V0 if self.protocol == "sse" else utils.SSE_URL
+            self.src_prefixed,
+            utils.SSE_URL_V0 if self.protocol == "sse" else utils.SSE_URL,
+        )
+        self.heartbeat_url = urllib.parse.urljoin(
+            self.src_prefixed, utils.HEARTBEAT_URL
         )
-        self.heartbeat_url = urllib.parse.urljoin(self.src, utils.HEARTBEAT_URL)
         self.sse_data_url = urllib.parse.urljoin(
-            self.src,
+            self.src_prefixed,
             utils.SSE_DATA_URL_V0 if self.protocol == "sse" else utils.SSE_DATA_URL,
         )
         self.ws_url = urllib.parse.urljoin(
-            self.src.replace("http", "ws", 1), utils.WS_URL
+            self.src_prefixed.replace("http", "ws", 1), utils.WS_URL
         )
-        self.upload_url = urllib.parse.urljoin(self.src, utils.UPLOAD_URL)
-        self.reset_url = urllib.parse.urljoin(self.src, utils.RESET_URL)
+        self.upload_url = urllib.parse.urljoin(self.src_prefixed, utils.UPLOAD_URL)
+        self.reset_url = urllib.parse.urljoin(self.src_prefixed, utils.RESET_URL)
         self.app_version = version.parse(self.config.get("version", "2.0"))
         self._info = self._get_api_info()
         self.session_hash = str(uuid.uuid4())
@@ -322,7 +330,7 @@ def duplicate(
         cls,
         from_id: str,
         to_id: str | None = None,
-        hf_token: str | None = None,
+        hf_token: str | Literal[False] | None = False,
         private: bool = True,
         hardware: Literal[
             "cpu-basic",
@@ -355,7 +363,7 @@ def duplicate(
         Parameters:
             from_id: The name of the Hugging Face Space to duplicate in the format "{username}/{space_id}", e.g. "gradio/whisper".
             to_id: The name of the new Hugging Face Space to create, e.g. "abidlabs/whisper-duplicate". If not provided, the new Space will be named "{your_HF_username}/{space_id}".
-            hf_token: The Hugging Face token to use to access private Spaces. Automatically fetched if you are logged in via the Hugging Face Hub CLI. Obtain from: https://huggingface.co/settings/token
+            hf_token: optional Hugging Face token to use to duplicating private Spaces. By default, no token is sent to the server. Set `hf_token=None` to use the locally saved token if there is one. Find your tokens here: https://huggingface.co/settings/tokens.
             private: Whether the new Space should be private (True) or public (False). Defaults to True.
             hardware: The hardware tier to use for the new Space. Defaults to the same hardware tier as the original Space. Options include "cpu-basic", "cpu-upgrade", "t4-small", "t4-medium", "a10g-small", "a10g-large", "a100-large", subject to availability.
             secrets: A dictionary of (secret key, secret value) to pass to the new Space. Defaults to None. Secrets are only used when the Space is duplicated for the first time, and are not updated if the duplicated Space already exists.
@@ -551,7 +559,7 @@ def fn(future):
         return job
 
     def _get_api_info(self):
-        api_info_url = urllib.parse.urljoin(self.src, utils.RAW_API_INFO_URL)
+        api_info_url = urllib.parse.urljoin(self.src_prefixed, utils.RAW_API_INFO_URL)
         if self.app_version > version.Version("3.36.1"):
             r = httpx.get(
                 api_info_url,
@@ -863,7 +871,7 @@ def _get_config(self) -> dict:
             )
         else:  # to support older versions of Gradio
             r = httpx.get(
-                self.src,
+                self.src_prefixed,
                 headers=self.headers,
                 cookies=self.cookies,
                 verify=self.ssl_verify,
@@ -890,7 +898,7 @@ def deploy_discord(
         discord_bot_token: str | None = None,
         api_names: list[str | tuple[str, str]] | None = None,
         to_id: str | None = None,
-        hf_token: str | None = None,
+        hf_token: str | Literal[False] | None = False,
         private: bool = False,
     ):
         """
@@ -1069,8 +1077,7 @@ def __init__(
             self._get_component_type(id_) for id_ in dependency["outputs"]
         ]
         self.parameters_info = self._get_parameters_info()
-
-        self.root_url = client.src + "/" if not client.src.endswith("/") else client.src
+        self.root_url = self.client.src_prefixed
 
         # Disallow hitting endpoints that the Gradio app has disabled
         self.is_valid = self.api_name is not False
@@ -1138,7 +1145,7 @@ def make_cancel(
         if helper is None:
             return
         if self.client.app_version > version.Version("4.29.0"):
-            url = urllib.parse.urljoin(self.client.src, utils.CANCEL_URL)
+            url = urllib.parse.urljoin(self.client.src_prefixed, utils.CANCEL_URL)
 
             # The event_id won't be set on the helper until later
             # so need to create the data in a function that's run at cancel time
@@ -1303,7 +1310,11 @@ def download_files(self, *data) -> tuple:
 
     def remove_skipped_components(self, *data) -> tuple:
         """"""
-        data = [d for d, oct in zip(data, self.output_component_types) if not oct.skip]
+        data = [
+            d
+            for d, oct in zip(data, self.output_component_types, strict=False)
+            if not oct.skip
+        ]
         return tuple(data)
 
     def reduce_singleton_output(self, *data) -> Any:
@@ -1355,9 +1366,8 @@ def _upload_file(self, f: dict, data_index: int) -> dict[str, str]:
         # use the suffix of the original name to determine format to save it to in cache.
         return {
             "path": file_path,
-            "orig_name": utils.strip_invalid_filename_characters(orig_name.name)
-            if orig_name.suffix
-            else None,
+            "orig_name": utils.strip_invalid_filename_characters(orig_name.name),
+            "meta": {"_type": "gradio.FileData"} if orig_name.suffix else None,
         }
 
     def _download_file(self, x: dict) -> str:
diff --git a/client/python/gradio_client/compatibility.py b/client/python/gradio_client/compatibility.py
index ca5f323b74a6d..8348cf0c191a8 100644
--- a/client/python/gradio_client/compatibility.py
+++ b/client/python/gradio_client/compatibility.py
@@ -172,7 +172,7 @@ def _upload(
                             "orig_name": Path(f).name,
                             "data": None,
                         }
-                        for f, o in zip(fs, output)
+                        for f, o in zip(fs, output, strict=False)
                     ]
                 else:
                     o = next(o for ix, o in enumerate(result) if indices[ix] == i)
@@ -207,7 +207,7 @@ def insert_state(self, *data) -> tuple:
     def remove_skipped_components(self, *data) -> tuple:
         data = [
             d
-            for d, oct in zip(data, self.output_component_types)
+            for d, oct in zip(data, self.output_component_types, strict=False)
             if oct not in utils.SKIP_COMPONENTS
         ]
         return tuple(data)
@@ -235,13 +235,15 @@ def serialize(self, *data) -> tuple:
 
         files = [
             f
-            for f, t in zip(data, self.input_component_types)
+            for f, t in zip(data, self.input_component_types, strict=False)
             if t in ["file", "uploadbutton"]
         ]
         uploaded_files = self._upload(files)
         data = list(data)
         self._add_uploaded_files_to_data(uploaded_files, data)
-        o = tuple([s.serialize(d) for s, d in zip(self.serializers, data)])
+        o = tuple(
+            [s.serialize(d) for s, d in zip(self.serializers, data, strict=False)]
+        )
         return o
 
     def deserialize(self, *data) -> tuple:
@@ -257,7 +259,7 @@ def deserialize(self, *data) -> tuple:
                     hf_token=self.client.hf_token,
                     root_url=self.root_url,
                 )
-                for s, d in zip(self.deserializers, data)
+                for s, d in zip(self.deserializers, data, strict=False)
             ]
         )
         return outputs
diff --git a/client/python/gradio_client/documentation.py b/client/python/gradio_client/documentation.py
index 741ad78abb88f..a3ab65493002e 100644
--- a/client/python/gradio_client/documentation.py
+++ b/client/python/gradio_client/documentation.py
@@ -6,8 +6,8 @@
 import inspect
 import warnings
 from collections import defaultdict
+from collections.abc import Callable
 from functools import lru_cache
-from typing import Callable
 
 classes_to_document = defaultdict(list)
 classes_inherit_documentation = {}
diff --git a/client/python/gradio_client/package.json b/client/python/gradio_client/package.json
index 3fc305b8bb50d..929a15e03804a 100644
--- a/client/python/gradio_client/package.json
+++ b/client/python/gradio_client/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gradio_client",
-	"version": "1.3.0",
+	"version": "1.4.0-beta.5",
 	"description": "",
 	"python": "true",
 	"main_changeset": true,
diff --git a/client/python/gradio_client/utils.py b/client/python/gradio_client/utils.py
index 8b3a4bb8c013f..e49648afe7d8d 100644
--- a/client/python/gradio_client/utils.py
+++ b/client/python/gradio_client/utils.py
@@ -13,12 +13,13 @@
 import tempfile
 import time
 import warnings
+from collections.abc import Callable, Coroutine
 from dataclasses import dataclass, field
 from datetime import datetime
 from enum import Enum
 from pathlib import Path
 from threading import Lock
-from typing import TYPE_CHECKING, Any, Callable, Coroutine, Literal, Optional, TypedDict
+from typing import TYPE_CHECKING, Any, Literal, Optional, TypedDict
 
 import fsspec.asyn
 import httpx
@@ -122,6 +123,7 @@ class ServerMessage(str, Enum):
     server_stopped = "Server stopped unexpectedly."
     unexpected_error = "unexpected_error"
     close_stream = "close_stream"
+    process_streaming = "process_streaming"
 
 
 class Status(Enum):
@@ -685,6 +687,23 @@ def get_extension(encoding: str) -> str | None:
     return extension
 
 
+def is_valid_file(file_path: str, file_types: list[str]) -> bool:
+    mime_type = get_mimetype(file_path)
+    if mime_type is None:
+        return False
+    for file_type in file_types:
+        if file_type == "file":
+            return True
+        if file_type.startswith("."):
+            file_type = file_type.lstrip(".").lower()
+            mime_type_split = mime_type.lower().split("/")
+            if file_type == mime_type_split[1]:
+                return True
+        elif mime_type.startswith(f"{file_type}/"):
+            return True
+    return False
+
+
 def encode_file_to_base64(f: str | Path):
     with open(f, "rb") as file:
         encoded_string = base64.b64encode(file.read())
@@ -881,6 +900,7 @@ def get_type(schema: dict):
 
 
 FILE_DATA_FORMATS = [
+    "Dict(path: str | None (Path to a local file), url: str | None (Publicly available url or base64 encoded image), size: int | None (Size of image in bytes), orig_name: str | None (Original filename), mime_type: str | None (mime type of image), is_stream: bool (Can always be set to False), meta: Dict())",
     "Dict(path: str, url: str | None, size: int | None, orig_name: str | None, mime_type: str | None)",
     "Dict(path: str, url: str | None, size: int | None, orig_name: str | None, mime_type: str | None, is_stream: bool)",
     "Dict(path: str, url: str | None, size: int | None, orig_name: str | None, mime_type: str | None, is_stream: bool, meta: Dict())",
diff --git a/client/python/pyproject.toml b/client/python/pyproject.toml
index 54778eb45e78c..c7dcf0846f28d 100644
--- a/client/python/pyproject.toml
+++ b/client/python/pyproject.toml
@@ -7,7 +7,7 @@ name = "gradio_client"
 dynamic = ["version", "dependencies", "readme"]
 description = "Python library for easily interacting with trained machine learning models"
 license = "Apache-2.0"
-requires-python = ">=3.8"
+requires-python = ">=3.10"
 authors = [
   { name = "Abubakar Abid", email = "gradio-team@huggingface.co" },
   { name = "Ali Abid", email = "gradio-team@huggingface.co" },
diff --git a/client/python/test/conftest.py b/client/python/test/conftest.py
index a46ea99c54857..b6a867b5e146f 100644
--- a/client/python/test/conftest.py
+++ b/client/python/test/conftest.py
@@ -255,12 +255,10 @@ def show(n):
             num = gr.Number(value=10)
             with gr.Row():
                 count_btn = gr.Button("Count")
-                count_forever = gr.Button("Count forever")
         with gr.Column():
             out = gr.Textbox()
 
         count_btn.click(count, num, out, api_name="count")
-        count_forever.click(show, num, out, api_name="count_forever", every=3)
     return demo
 
 
diff --git a/client/python/test/test_client.py b/client/python/test/test_client.py
index c827041e3aecc..c64216b3689a6 100644
--- a/client/python/test/test_client.py
+++ b/client/python/test/test_client.py
@@ -1,7 +1,6 @@
 from __future__ import annotations
 
 import json
-import os
 import pathlib
 import tempfile
 import time
@@ -16,15 +15,11 @@
 import httpx
 import huggingface_hub
 import pytest
-import uvicorn
-from fastapi import FastAPI
-from gradio.http_server import Server
-from huggingface_hub import HfFolder
 from huggingface_hub.utils import RepositoryNotFoundError
 
 from gradio_client import Client, handle_file
 from gradio_client.client import DEFAULT_TEMP_DIR
-from gradio_client.exceptions import AppError, AuthenticationError
+from gradio_client.exceptions import AuthenticationError
 from gradio_client.utils import (
     Communicator,
     ProgressUnit,
@@ -33,7 +28,7 @@
     StatusUpdate,
 )
 
-HF_TOKEN = os.getenv("HF_TOKEN") or HfFolder.get_token()
+HF_TOKEN = huggingface_hub.get_token()
 
 
 @contextmanager
@@ -133,7 +128,7 @@ def test_private_space(self):
         space_id = "gradio-tests/not-actually-private-space"
         api = huggingface_hub.HfApi()
         assert api.space_info(space_id).private
-        client = Client(space_id)
+        client = Client(space_id, hf_token=HF_TOKEN)
         output = client.predict("abc", api_name="/predict")
         assert output == "abc"
 
@@ -144,6 +139,7 @@ def test_private_space_v4(self):
         assert api.space_info(space_id).private
         client = Client(
             space_id,
+            hf_token=HF_TOKEN,
         )
         output = client.predict("abc", api_name="/predict")
         assert output == "abc"
@@ -155,6 +151,7 @@ def test_private_space_v4_sse_v1(self):
         assert api.space_info(space_id).private
         client = Client(
             space_id,
+            hf_token=HF_TOKEN,
         )
         output = client.predict("abc", api_name="/predict")
         assert output == "abc"
@@ -562,36 +559,36 @@ def test_does_not_upload_dir(self, stateful_chatbot):
             ret = client.predict(message, initial_history, api_name="/submit")
             assert ret == ("", [["", None], ["Hello", "I love you"]])
 
-    def test_can_call_mounted_app_via_api(self):
-        def greet(name):
-            return "Hello " + name + "!"
-
-        gradio_app = gr.Interface(
-            fn=greet,
-            inputs=gr.Textbox(lines=2, placeholder="Name Here..."),
-            outputs="text",
-        )
-
-        app = FastAPI()
-        app = gr.mount_gradio_app(app, gradio_app, path="/test/gradio")
-        config = uvicorn.Config(
-            app=app,
-            port=8000,
-            log_level="info",
-        )
-        server = Server(config=config)
-        # Using the gradio Server class to not have
-        # to implement code again to run uvicorn in a separate thread
-        # However, that means we need to set this flag to prevent
-        # run_in_thread_from_blocking
-        server.started = True
-        try:
-            server.run_in_thread()
-            time.sleep(1)
-            client = Client("http://127.0.0.1:8000/test/gradio/")
-            assert client.predict("freddy") == "Hello freddy!"
-        finally:
-            server.thread.join(timeout=1)
+    # def test_can_call_mounted_app_via_api(self):
+    #     def greet(name):
+    #         return "Hello " + name + "!"
+
+    #     gradio_app = gr.Interface(
+    #         fn=greet,
+    #         inputs=gr.Textbox(lines=2, placeholder="Name Here..."),
+    #         outputs="text",
+    #     )
+
+    #     app = FastAPI()
+    #     app = gr.mount_gradio_app(app, gradio_app, path="/test/gradio")
+    #     config = uvicorn.Config(
+    #         app=app,
+    #         port=8000,
+    #         log_level="info",
+    #     )
+    #     server = Server(config=config)
+    #     # Using the gradio Server class to not have
+    #     # to implement code again to run uvicorn in a separate thread
+    #     # However, that means we need to set this flag to prevent
+    #     # run_in_thread_from_blocking
+    #     server.started = True
+    #     try:
+    #         server.run_in_thread()
+    #         time.sleep(1)
+    #         client = Client("http://127.0.0.1:8000/test/gradio/")
+    #         assert client.predict("freddy") == "Hello freddy!"
+    #     finally:
+    #         server.thread.join(timeout=1)
 
     @pytest.mark.flaky
     def test_predict_with_space_with_api_name_false(self):
@@ -1020,6 +1017,7 @@ def test_state_does_not_appear(self, state_demo):
     def test_private_space(self):
         client = Client(
             "gradio-tests/not-actually-private-space",
+            hf_token=HF_TOKEN,
         )
         assert len(client.endpoints) == 3
         assert len([e for e in client.endpoints.values() if e.is_valid]) == 2
@@ -1132,29 +1130,18 @@ def test_file_io(self, file_io_demo):
             outputs = info["named_endpoints"]["/predict"]["returns"]
 
             assert inputs[0]["type"]["type"] == "array"
-            assert inputs[0]["python_type"] == {
-                "type": "List[filepath]",
-                "description": "",
-            }
+            assert inputs[0]["python_type"]["type"] == "List[filepath]"
+
             assert isinstance(inputs[0]["example_input"], list)
             assert isinstance(inputs[0]["example_input"][0], dict)
 
-            assert inputs[1]["python_type"] == {
-                "type": "filepath",
-                "description": "",
-            }
+            assert inputs[1]["python_type"]["type"] == "filepath"
             assert isinstance(inputs[1]["example_input"], dict)
 
-            assert outputs[0]["python_type"] == {
-                "type": "List[filepath]",
-                "description": "",
-            }
+            assert outputs[0]["python_type"]["type"] == "List[filepath]"
             assert outputs[0]["type"]["type"] == "array"
 
-            assert outputs[1]["python_type"] == {
-                "type": "filepath",
-                "description": "",
-            }
+            assert outputs[1]["python_type"]["type"] == "filepath"
 
     def test_layout_components_in_output(self, hello_world_with_group):
         with connect(hello_world_with_group) as client:
@@ -1255,6 +1242,7 @@ class TestEndpoints:
     def test_upload(self):
         client = Client(
             src="gradio-tests/not-actually-private-file-upload",
+            hf_token=HF_TOKEN,
         )
         response = MagicMock(status_code=200)
         response.json.return_value = [
@@ -1398,21 +1386,6 @@ def test_add_secrets(self, mock_time, mock_init, mock_duplicate, mock_add_secret
             )
 
 
-def test_upstream_exceptions(count_generator_demo_exception):
-    with connect(count_generator_demo_exception, show_error=True) as client:
-        with pytest.raises(
-            AppError, match="The upstream Gradio app has raised an exception: Oh no!"
-        ):
-            client.predict(7, api_name="/count")
-
-    with connect(count_generator_demo_exception) as client:
-        with pytest.raises(
-            AppError,
-            match="The upstream Gradio app has raised an exception but has not enabled verbose error reporting.",
-        ):
-            client.predict(7, api_name="/count")
-
-
 def test_httpx_kwargs(increment_demo):
     with connect(
         increment_demo, client_kwargs={"httpx_kwargs": {"timeout": 5}}
diff --git a/client/python/test/test_utils.py b/client/python/test/test_utils.py
index c8f3fd6967cc4..68272611cfc1a 100644
--- a/client/python/test/test_utils.py
+++ b/client/python/test/test_utils.py
@@ -71,6 +71,21 @@ def test_decode_base64_to_file():
     assert isinstance(temp_file, tempfile._TemporaryFileWrapper)
 
 
+@pytest.mark.parametrize(
+    "path_or_url, file_types, expected_result",
+    [
+        ("/home/user/documents/example.pdf", [".json", "text", ".mp3", ".pdf"], True),
+        ("C:\\Users\\user\\documents\\example.png", [".png"], True),
+        ("C:\\Users\\user\\documents\\example.png", ["image"], True),
+        ("C:\\Users\\user\\documents\\example.png", ["file"], True),
+        ("/home/user/documents/example.pdf", [".json", "text", ".mp3"], False),
+        ("https://example.com/avatar/xxxx.mp4", ["audio", ".png", ".jpg"], False),
+    ],
+)
+def test_is_valid_file_type(path_or_url, file_types, expected_result):
+    assert utils.is_valid_file(path_or_url, file_types) is expected_result
+
+
 @pytest.mark.parametrize(
     "orig_filename, new_filename",
     [
diff --git a/demo/all_demos/run.py b/demo/all_demos/run.py
index 11ba2b45209e6..4544255288b67 100644
--- a/demo/all_demos/run.py
+++ b/demo/all_demos/run.py
@@ -19,11 +19,20 @@
 
 names = sorted(os.listdir("./demos"))
 
+
 @app.get("/")
 def index(request: Request):
     names = [[p[0], p[2]] for p in all_demos]
-    return templates.TemplateResponse("index.html", {"request": request, "names": names,
-                                                     "initial_demo": names[0][0], "is_space": get_space()})
+    return templates.TemplateResponse(
+        "index.html",
+        {
+            "request": request,
+            "names": names,
+            "initial_demo": names[0][0],
+            "is_space": get_space(),
+        },
+    )
+
 
 all_demos = []
 demo_module = None
diff --git a/demo/annotatedimage_component/requirements.txt b/demo/annotatedimage_component/requirements.txt
new file mode 100644
index 0000000000000..6dd520b61558d
--- /dev/null
+++ b/demo/annotatedimage_component/requirements.txt
@@ -0,0 +1,3 @@
+numpy
+requests
+Pillow
diff --git a/demo/annotatedimage_component/run.ipynb b/demo/annotatedimage_component/run.ipynb
index 3095d3d05ab09..9f03b026ac61e 100644
--- a/demo/annotatedimage_component/run.ipynb
+++ b/demo/annotatedimage_component/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: annotatedimage_component"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import pathlib\n", "from PIL import Image\n", "import numpy as np\n", "import urllib.request\n", "\n", "source_dir = pathlib.Path(__file__).parent\n", "\n", "urllib.request.urlretrieve(\n", "  'https://gradio-builds.s3.amazonaws.com/demo-files/base.png',\n", "   str(source_dir / \"base.png\")\n", ")\n", "urllib.request.urlretrieve(\n", "    \"https://gradio-builds.s3.amazonaws.com/demo-files/buildings.png\",\n", "    str(source_dir / \"buildings.png\")\n", ")\n", "\n", "base_image = Image.open(str(source_dir / \"base.png\"))\n", "building_image = Image.open(str(source_dir / \"buildings.png\"))\n", "\n", "# Create segmentation mask\n", "building_image = np.asarray(building_image)[:, :, -1] > 0\n", "\n", "with gr.Blocks() as demo:\n", "    gr.AnnotatedImage(\n", "        value=(base_image, [(building_image, \"buildings\")]),\n", "        height=500,\n", "    )\n", "\n", "demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: annotatedimage_component"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy requests Pillow "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import numpy as np \n", "import requests \n", "from io import BytesIO\n", "from PIL import Image\n", "\n", "base_image = \"https://gradio-docs-json.s3.us-west-2.amazonaws.com/base.png\"\n", "building_image = requests.get(\"https://gradio-docs-json.s3.us-west-2.amazonaws.com/buildings.png\")\n", "building_image = np.asarray(Image.open(BytesIO(building_image.content)))[:, :, -1] > 0\n", "\n", "with gr.Blocks() as demo:\n", "    gr.AnnotatedImage(\n", "        value=(base_image, [(building_image, \"buildings\")]),\n", "        height=500,\n", "    )\n", "\n", "demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/annotatedimage_component/run.py b/demo/annotatedimage_component/run.py
index 517d1f4c62642..ad3a8784be397 100644
--- a/demo/annotatedimage_component/run.py
+++ b/demo/annotatedimage_component/run.py
@@ -1,25 +1,12 @@
 import gradio as gr
-import pathlib
+import numpy as np 
+import requests 
+from io import BytesIO
 from PIL import Image
-import numpy as np
-import urllib.request
 
-source_dir = pathlib.Path(__file__).parent
-
-urllib.request.urlretrieve(
-  'https://gradio-builds.s3.amazonaws.com/demo-files/base.png',
-   str(source_dir / "base.png")
-)
-urllib.request.urlretrieve(
-    "https://gradio-builds.s3.amazonaws.com/demo-files/buildings.png",
-    str(source_dir / "buildings.png")
-)
-
-base_image = Image.open(str(source_dir / "base.png"))
-building_image = Image.open(str(source_dir / "buildings.png"))
-
-# Create segmentation mask
-building_image = np.asarray(building_image)[:, :, -1] > 0
+base_image = "https://gradio-docs-json.s3.us-west-2.amazonaws.com/base.png"
+building_image = requests.get("https://gradio-docs-json.s3.us-west-2.amazonaws.com/buildings.png")
+building_image = np.asarray(Image.open(BytesIO(building_image.content)))[:, :, -1] > 0
 
 with gr.Blocks() as demo:
     gr.AnnotatedImage(
@@ -27,4 +14,4 @@
         height=500,
     )
 
-demo.launch()
+demo.launch()
\ No newline at end of file
diff --git a/demo/bar_plot_demo/requirements.txt b/demo/bar_plot_demo/requirements.txt
new file mode 100644
index 0000000000000..fb6c7ed7ec60d
--- /dev/null
+++ b/demo/bar_plot_demo/requirements.txt
@@ -0,0 +1 @@
+pandas
diff --git a/demo/bar_plot_demo/run.ipynb b/demo/bar_plot_demo/run.ipynb
index 0131a915ea050..9449c062a2ec5 100644
--- a/demo/bar_plot_demo/run.ipynb
+++ b/demo/bar_plot_demo/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: bar_plot_demo"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import pandas as pd\n", "from random import randint, random\n", "import gradio as gr\n", "\n", "\n", "temp_sensor_data = pd.DataFrame(\n", "    {\n", "        \"time\": pd.date_range(\"2021-01-01\", end=\"2021-01-05\", periods=200),\n", "        \"temperature\": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],\n", "        \"humidity\": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],\n", "        \"location\": [\"indoor\", \"outdoor\"] * 100,\n", "    }\n", ")\n", "\n", "food_rating_data = pd.DataFrame(\n", "    {\n", "        \"cuisine\": [[\"Italian\", \"Mexican\", \"Chinese\"][i % 3] for i in range(100)],\n", "        \"rating\": [random() * 4 + 0.5 * (i % 3) for i in range(100)],\n", "        \"price\": [randint(10, 50) + 4 * (i % 3) for i in range(100)],\n", "        \"wait\": [random() for i in range(100)],\n", "    }\n", ")\n", "\n", "with gr.Blocks() as bar_plots:\n", "    with gr.Row():\n", "        start = gr.DateTime(\"2021-01-01 00:00:00\", label=\"Start\")\n", "        end = gr.DateTime(\"2021-01-05 00:00:00\", label=\"End\")\n", "        apply_btn = gr.Button(\"Apply\", scale=0)\n", "    with gr.Row():\n", "        group_by = gr.Radio([\"None\", \"30m\", \"1h\", \"4h\", \"1d\"], value=\"None\", label=\"Group by\")\n", "        aggregate = gr.Radio([\"sum\", \"mean\", \"median\", \"min\", \"max\"], value=\"sum\", label=\"Aggregation\")\n", "\n", "    temp_by_time = gr.BarPlot(\n", "        temp_sensor_data,\n", "        x=\"time\",\n", "        y=\"temperature\",\n", "    )\n", "    temp_by_time_location = gr.BarPlot(\n", "        temp_sensor_data,\n", "        x=\"time\",\n", "        y=\"temperature\",\n", "        color=\"location\",\n", "    )\n", "\n", "    time_graphs = [temp_by_time, temp_by_time_location]\n", "    group_by.change(\n", "        lambda group: [gr.BarPlot(x_bin=None if group == \"None\" else group)] * len(time_graphs),\n", "        group_by,\n", "        time_graphs\n", "    )\n", "    aggregate.change(\n", "        lambda aggregate: [gr.BarPlot(y_aggregate=aggregate)] * len(time_graphs),\n", "        aggregate,\n", "        time_graphs\n", "    )\n", "\n", "    def rescale(select: gr.SelectData):\n", "        return select.index\n", "    rescale_evt = gr.on([plot.select for plot in time_graphs], rescale, None, [start, end])\n", "\n", "    for trigger in [apply_btn.click, rescale_evt.then]:\n", "        trigger(\n", "            lambda start, end: [gr.BarPlot(x_lim=[start, end])] * len(time_graphs), [start, end], time_graphs\n", "        )\n", "\n", "    with gr.Row():\n", "        price_by_cuisine = gr.BarPlot(\n", "            food_rating_data,\n", "            x=\"cuisine\",\n", "            y=\"price\",\n", "        )\n", "        with gr.Column(scale=0):\n", "            gr.Button(\"Sort $ > $$$\").click(lambda: gr.BarPlot(sort=\"y\"), None, price_by_cuisine)\n", "            gr.Button(\"Sort $$$ > $\").click(lambda: gr.BarPlot(sort=\"-y\"), None, price_by_cuisine)\n", "            gr.Button(\"Sort A > Z\").click(lambda: gr.BarPlot(sort=[\"Chinese\", \"Italian\", \"Mexican\"]), None, price_by_cuisine)\n", "\n", "    with gr.Row():\n", "        price_by_rating = gr.BarPlot(\n", "            food_rating_data,\n", "            x=\"rating\",\n", "            y=\"price\",\n", "            x_bin=1,\n", "        )\n", "        price_by_rating_color = gr.BarPlot(\n", "            food_rating_data,\n", "            x=\"rating\",\n", "            y=\"price\",\n", "            color=\"cuisine\",\n", "            x_bin=1,\n", "            color_map={\"Italian\": \"red\", \"Mexican\": \"green\", \"Chinese\": \"blue\"},\n", "        )\n", "\n", "if __name__ == \"__main__\":\n", "    bar_plots.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: bar_plot_demo"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio pandas "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import pandas as pd\n", "from random import randint, random\n", "import gradio as gr\n", "\n", "\n", "temp_sensor_data = pd.DataFrame(\n", "    {\n", "        \"time\": pd.date_range(\"2021-01-01\", end=\"2021-01-05\", periods=200),\n", "        \"temperature\": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],\n", "        \"humidity\": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],\n", "        \"location\": [\"indoor\", \"outdoor\"] * 100,\n", "    }\n", ")\n", "\n", "food_rating_data = pd.DataFrame(\n", "    {\n", "        \"cuisine\": [[\"Italian\", \"Mexican\", \"Chinese\"][i % 3] for i in range(100)],\n", "        \"rating\": [random() * 4 + 0.5 * (i % 3) for i in range(100)],\n", "        \"price\": [randint(10, 50) + 4 * (i % 3) for i in range(100)],\n", "        \"wait\": [random() for i in range(100)],\n", "    }\n", ")\n", "\n", "with gr.Blocks() as bar_plots:\n", "    with gr.Row():\n", "        start = gr.DateTime(\"2021-01-01 00:00:00\", label=\"Start\")\n", "        end = gr.DateTime(\"2021-01-05 00:00:00\", label=\"End\")\n", "        apply_btn = gr.Button(\"Apply\", scale=0)\n", "    with gr.Row():\n", "        group_by = gr.Radio([\"None\", \"30m\", \"1h\", \"4h\", \"1d\"], value=\"None\", label=\"Group by\")\n", "        aggregate = gr.Radio([\"sum\", \"mean\", \"median\", \"min\", \"max\"], value=\"sum\", label=\"Aggregation\")\n", "\n", "    temp_by_time = gr.BarPlot(\n", "        temp_sensor_data,\n", "        x=\"time\",\n", "        y=\"temperature\",\n", "    )\n", "    temp_by_time_location = gr.BarPlot(\n", "        temp_sensor_data,\n", "        x=\"time\",\n", "        y=\"temperature\",\n", "        color=\"location\",\n", "    )\n", "\n", "    time_graphs = [temp_by_time, temp_by_time_location]\n", "    group_by.change(\n", "        lambda group: [gr.BarPlot(x_bin=None if group == \"None\" else group)] * len(time_graphs),\n", "        group_by,\n", "        time_graphs\n", "    )\n", "    aggregate.change(\n", "        lambda aggregate: [gr.BarPlot(y_aggregate=aggregate)] * len(time_graphs),\n", "        aggregate,\n", "        time_graphs\n", "    )\n", "\n", "    def rescale(select: gr.SelectData):\n", "        return select.index\n", "    rescale_evt = gr.on([plot.select for plot in time_graphs], rescale, None, [start, end])\n", "\n", "    for trigger in [apply_btn.click, rescale_evt.then]:\n", "        trigger(\n", "            lambda start, end: [gr.BarPlot(x_lim=[start, end])] * len(time_graphs), [start, end], time_graphs\n", "        )\n", "\n", "    with gr.Row():\n", "        price_by_cuisine = gr.BarPlot(\n", "            food_rating_data,\n", "            x=\"cuisine\",\n", "            y=\"price\",\n", "        )\n", "        with gr.Column(scale=0):\n", "            gr.Button(\"Sort $ > $$$\").click(lambda: gr.BarPlot(sort=\"y\"), None, price_by_cuisine)\n", "            gr.Button(\"Sort $$$ > $\").click(lambda: gr.BarPlot(sort=\"-y\"), None, price_by_cuisine)\n", "            gr.Button(\"Sort A > Z\").click(lambda: gr.BarPlot(sort=[\"Chinese\", \"Italian\", \"Mexican\"]), None, price_by_cuisine)\n", "\n", "    with gr.Row():\n", "        price_by_rating = gr.BarPlot(\n", "            food_rating_data,\n", "            x=\"rating\",\n", "            y=\"price\",\n", "            x_bin=1,\n", "        )\n", "        price_by_rating_color = gr.BarPlot(\n", "            food_rating_data,\n", "            x=\"rating\",\n", "            y=\"price\",\n", "            color=\"cuisine\",\n", "            x_bin=1,\n", "            color_map={\"Italian\": \"red\", \"Mexican\": \"green\", \"Chinese\": \"blue\"},\n", "        )\n", "\n", "if __name__ == \"__main__\":\n", "    bar_plots.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/barplot_component/requirements.txt b/demo/barplot_component/requirements.txt
new file mode 100644
index 0000000000000..fb6c7ed7ec60d
--- /dev/null
+++ b/demo/barplot_component/requirements.txt
@@ -0,0 +1 @@
+pandas
diff --git a/demo/barplot_component/run.ipynb b/demo/barplot_component/run.ipynb
index 309aef4a438eb..01a8109e0544d 100644
--- a/demo/barplot_component/run.ipynb
+++ b/demo/barplot_component/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: barplot_component"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import pandas as pd\n", "\n", "simple = pd.DataFrame(\n", "    {\n", "        \"item\": [\"A\", \"B\", \"C\", \"D\", \"E\", \"F\", \"G\", \"H\", \"I\"],\n", "        \"inventory\": [28, 55, 43, 91, 81, 53, 19, 87, 52],\n", "    }\n", ")\n", "\n", "with gr.Blocks() as demo:\n", "    gr.BarPlot(\n", "        value=simple,\n", "        x=\"item\",\n", "        y=\"inventory\",\n", "        title=\"Simple Bar Plot\",\n", "        container=False,\n", "    )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: barplot_component"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio pandas "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import pandas as pd\n", "\n", "simple = pd.DataFrame(\n", "    {\n", "        \"item\": [\"A\", \"B\", \"C\", \"D\", \"E\", \"F\", \"G\", \"H\", \"I\"],\n", "        \"inventory\": [28, 55, 43, 91, 81, 53, 19, 87, 52],\n", "    }\n", ")\n", "\n", "with gr.Blocks() as demo:\n", "    gr.BarPlot(\n", "        value=simple,\n", "        x=\"item\",\n", "        y=\"inventory\",\n", "        title=\"Simple Bar Plot\",\n", "        container=False,\n", "    )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/blocks_essay/run.ipynb b/demo/blocks_essay/run.ipynb
index 2d42d896083c1..8878ec76a8de8 100644
--- a/demo/blocks_essay/run.ipynb
+++ b/demo/blocks_essay/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: blocks_essay"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "countries_cities_dict = {\n", "    \"USA\": [\"New York\", \"Los Angeles\", \"Chicago\"],\n", "    \"Canada\": [\"Toronto\", \"Montreal\", \"Vancouver\"],\n", "    \"Pakistan\": [\"Karachi\", \"Lahore\", \"Islamabad\"],\n", "}\n", "\n", "def change_textbox(choice):\n", "    if choice == \"short\":\n", "        return gr.Textbox(lines=2, visible=True), gr.Button(interactive=True)\n", "    elif choice == \"long\":\n", "        return gr.Textbox(lines=8, visible=True, value=\"Lorem ipsum dolor sit amet\"), gr.Button(interactive=True)\n", "    else:\n", "        return gr.Textbox(visible=False), gr.Button(interactive=False)\n", "\n", "with gr.Blocks() as demo:\n", "    radio = gr.Radio(\n", "        [\"short\", \"long\", \"none\"], label=\"What kind of essay would you like to write?\"\n", "    )\n", "    text = gr.Textbox(lines=2, interactive=True, show_copy_button=True)\n", "\n", "    with gr.Row():\n", "        num = gr.Number(minimum=0, maximum=100, label=\"input\")\n", "        out = gr.Number(label=\"output\")\n", "    minimum_slider = gr.Slider(0, 100, 0, label=\"min\")\n", "    maximum_slider = gr.Slider(0, 100, 100, label=\"max\")\n", "    submit_btn = gr.Button(\"Submit\", variant=\"primary\")\n", "\n", "    with gr.Row():\n", "        country = gr.Dropdown(list(countries_cities_dict.keys()), label=\"Country\")\n", "        cities = gr.Dropdown([], label=\"Cities\")\n", "\n", "    @country.change(inputs=country, outputs=cities)\n", "    def update_cities(country):\n", "        cities = list(countries_cities_dict[country])\n", "        return gr.Dropdown(choices=cities, value=cities[0], interactive=True)\n", "\n", "    def reset_bounds(minimum, maximum):\n", "        return gr.Number(minimum=minimum, maximum=maximum)\n", "\n", "    radio.change(fn=change_textbox, inputs=radio, outputs=[text, submit_btn])\n", "    gr.on(\n", "        [minimum_slider.change, maximum_slider.change],\n", "        reset_bounds,\n", "        [minimum_slider, maximum_slider],\n", "        outputs=num,\n", "    )\n", "    num.submit(lambda x: x, num, out)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: blocks_essay"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "countries_cities_dict = {\n", "    \"USA\": [\"New York\", \"Los Angeles\", \"Chicago\"],\n", "    \"Canada\": [\"Toronto\", \"Montreal\", \"Vancouver\"],\n", "    \"Pakistan\": [\"Karachi\", \"Lahore\", \"Islamabad\"],\n", "}\n", "\n", "def change_textbox(choice):\n", "    if choice == \"short\":\n", "        return gr.Textbox(lines=2, visible=True), gr.Button(interactive=True)\n", "    elif choice == \"long\":\n", "        return gr.Textbox(lines=8, visible=True, value=\"Lorem ipsum dolor sit amet\"), gr.Button(interactive=True)\n", "    else:\n", "        return gr.Textbox(visible=False), gr.Button(interactive=False)\n", "\n", "with gr.Blocks() as demo:\n", "    radio = gr.Radio(\n", "        [\"short\", \"long\", \"none\"], label=\"What kind of essay would you like to write?\"\n", "    )\n", "    text = gr.Textbox(lines=2, interactive=True, show_copy_button=True)\n", "\n", "    with gr.Row():\n", "        num = gr.Number(minimum=0, maximum=100, label=\"input\")\n", "        out = gr.Number(label=\"output\")\n", "    minimum_slider = gr.Slider(0, 100, 0, label=\"min\")\n", "    maximum_slider = gr.Slider(0, 100, 100, label=\"max\")\n", "    submit_btn = gr.Button(\"Submit\", variant=\"primary\")\n", "\n", "    with gr.Row():\n", "        country = gr.Dropdown(list(countries_cities_dict.keys()), label=\"Country\")\n", "        cities = gr.Dropdown([], label=\"Cities\")\n", "    @country.change(inputs=country, outputs=cities)\n", "    def update_cities(country):\n", "        cities = list(countries_cities_dict[country])\n", "        return gr.Dropdown(choices=cities, value=cities[0], interactive=True)\n", "\n", "    def reset_bounds(minimum, maximum):\n", "        return gr.Number(minimum=minimum, maximum=maximum)\n", "\n", "    radio.change(fn=change_textbox, inputs=radio, outputs=[text, submit_btn])\n", "    gr.on(\n", "        [minimum_slider.change, maximum_slider.change],\n", "        reset_bounds,\n", "        [minimum_slider, maximum_slider],\n", "        outputs=num,\n", "    )\n", "    num.submit(lambda x: x, num, out)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/blocks_essay/run.py b/demo/blocks_essay/run.py
index b30933094cbbd..f06f10a88f7fd 100644
--- a/demo/blocks_essay/run.py
+++ b/demo/blocks_essay/run.py
@@ -30,7 +30,6 @@ def change_textbox(choice):
     with gr.Row():
         country = gr.Dropdown(list(countries_cities_dict.keys()), label="Country")
         cities = gr.Dropdown([], label="Cities")
-
     @country.change(inputs=country, outputs=cities)
     def update_cities(country):
         cities = list(countries_cities_dict[country])
diff --git a/demo/blocks_flipper/requirements.txt b/demo/blocks_flipper/requirements.txt
new file mode 100644
index 0000000000000..24ce15ab7ead3
--- /dev/null
+++ b/demo/blocks_flipper/requirements.txt
@@ -0,0 +1 @@
+numpy
diff --git a/demo/blocks_flipper/run.ipynb b/demo/blocks_flipper/run.ipynb
index b8ca13a3ce607..124837422e228 100644
--- a/demo/blocks_flipper/run.ipynb
+++ b/demo/blocks_flipper/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: blocks_flipper"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import numpy as np\n", "import gradio as gr\n", "\n", "def flip_text(x):\n", "    return x[::-1]\n", "\n", "def flip_image(x):\n", "    return np.fliplr(x)\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(\"Flip text or image files using this demo.\")\n", "    with gr.Tab(\"Flip Text\"):\n", "        text_input = gr.Textbox()\n", "        text_output = gr.Textbox()\n", "        text_button = gr.Button(\"Flip\")\n", "    with gr.Tab(\"Flip Image\"):\n", "        with gr.Row():\n", "            image_input = gr.Image()\n", "            image_output = gr.Image()\n", "        image_button = gr.Button(\"Flip\")\n", "\n", "    with gr.Accordion(\"Open for More!\", open=False):\n", "        gr.Markdown(\"Look at me...\")\n", "        temp_slider = gr.Slider(\n", "            0, 1,\n", "            value=0.1,\n", "            step=0.1,\n", "            interactive=True,\n", "            label=\"Slide me\",\n", "        )\n", "\n", "    text_button.click(flip_text, inputs=text_input, outputs=text_output)\n", "    image_button.click(flip_image, inputs=image_input, outputs=image_output)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: blocks_flipper"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import numpy as np\n", "import gradio as gr\n", "\n", "def flip_text(x):\n", "    return x[::-1]\n", "\n", "def flip_image(x):\n", "    return np.fliplr(x)\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(\"Flip text or image files using this demo.\")\n", "    with gr.Tab(\"Flip Text\"):\n", "        text_input = gr.Textbox()\n", "        text_output = gr.Textbox()\n", "        text_button = gr.Button(\"Flip\")\n", "    with gr.Tab(\"Flip Image\"):\n", "        with gr.Row():\n", "            image_input = gr.Image()\n", "            image_output = gr.Image()\n", "        image_button = gr.Button(\"Flip\")\n", "\n", "    with gr.Accordion(\"Open for More!\", open=False):\n", "        gr.Markdown(\"Look at me...\")\n", "        temp_slider = gr.Slider(\n", "            0, 1,\n", "            value=0.1,\n", "            step=0.1,\n", "            interactive=True,\n", "            label=\"Slide me\",\n", "        )\n", "\n", "    text_button.click(flip_text, inputs=text_input, outputs=text_output)\n", "    image_button.click(flip_image, inputs=image_input, outputs=image_output)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/blocks_kinematics/requirements.txt b/demo/blocks_kinematics/requirements.txt
new file mode 100644
index 0000000000000..5da331cf67f41
--- /dev/null
+++ b/demo/blocks_kinematics/requirements.txt
@@ -0,0 +1,2 @@
+numpy
+pandas
diff --git a/demo/blocks_kinematics/run.ipynb b/demo/blocks_kinematics/run.ipynb
index fd1818ea3357d..75bc851477c64 100644
--- a/demo/blocks_kinematics/run.ipynb
+++ b/demo/blocks_kinematics/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: blocks_kinematics"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import pandas as pd\n", "import numpy as np\n", "\n", "import gradio as gr\n", "\n", "def plot(v, a):\n", "    g = 9.81\n", "    theta = a / 180 * 3.14\n", "    tmax = ((2 * v) * np.sin(theta)) / g\n", "    timemat = tmax * np.linspace(0, 1, 40)\n", "\n", "    x = (v * timemat) * np.cos(theta)\n", "    y = ((v * timemat) * np.sin(theta)) - ((0.5 * g) * (timemat**2))\n", "    df = pd.DataFrame({\"x\": x, \"y\": y})\n", "    return df\n", "\n", "demo = gr.Blocks()\n", "\n", "with demo:\n", "    gr.Markdown(\n", "        r\"Let's do some kinematics! Choose the speed and angle to see the trajectory. Remember that the range $R = v_0^2 \\cdot \\frac{\\sin(2\\theta)}{g}$\"\n", "    )\n", "\n", "    with gr.Row():\n", "        speed = gr.Slider(1, 30, 25, label=\"Speed\")\n", "        angle = gr.Slider(0, 90, 45, label=\"Angle\")\n", "    output = gr.LinePlot(\n", "        x=\"x\",\n", "        y=\"y\",\n", "        overlay_point=True,\n", "        tooltip=[\"x\", \"y\"],\n", "        x_lim=[0, 100],\n", "        y_lim=[0, 60],\n", "        width=350,\n", "        height=300,\n", "    )\n", "    btn = gr.Button(value=\"Run\")\n", "    btn.click(plot, [speed, angle], output)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: blocks_kinematics"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy pandas "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import pandas as pd\n", "import numpy as np\n", "\n", "import gradio as gr\n", "\n", "def plot(v, a):\n", "    g = 9.81\n", "    theta = a / 180 * 3.14\n", "    tmax = ((2 * v) * np.sin(theta)) / g\n", "    timemat = tmax * np.linspace(0, 1, 40)\n", "\n", "    x = (v * timemat) * np.cos(theta)\n", "    y = ((v * timemat) * np.sin(theta)) - ((0.5 * g) * (timemat**2))\n", "    df = pd.DataFrame({\"x\": x, \"y\": y})\n", "    return df\n", "\n", "demo = gr.Blocks()\n", "\n", "with demo:\n", "    gr.Markdown(\n", "        r\"Let's do some kinematics! Choose the speed and angle to see the trajectory. Remember that the range $R = v_0^2 \\cdot \\frac{\\sin(2\\theta)}{g}$\"\n", "    )\n", "\n", "    with gr.Row():\n", "        speed = gr.Slider(1, 30, 25, label=\"Speed\")\n", "        angle = gr.Slider(0, 90, 45, label=\"Angle\")\n", "    output = gr.LinePlot(\n", "        x=\"x\",\n", "        y=\"y\",\n", "        overlay_point=True,\n", "        tooltip=[\"x\", \"y\"],\n", "        x_lim=[0, 100],\n", "        y_lim=[0, 60],\n", "        width=350,\n", "        height=300,\n", "    )\n", "    btn = gr.Button(value=\"Run\")\n", "    btn.click(plot, [speed, angle], output)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/blocks_multiple_event_triggers/requirements.txt b/demo/blocks_multiple_event_triggers/requirements.txt
index 5cb63bcc8c366..bbe82b5897e5e 100644
--- a/demo/blocks_multiple_event_triggers/requirements.txt
+++ b/demo/blocks_multiple_event_triggers/requirements.txt
@@ -1,2 +1,3 @@
 plotly
-pypistats
\ No newline at end of file
+pypistats
+python-dateutil
diff --git a/demo/blocks_multiple_event_triggers/run.ipynb b/demo/blocks_multiple_event_triggers/run.ipynb
index daded4de20238..ec9efcc3599a9 100644
--- a/demo/blocks_multiple_event_triggers/run.ipynb
+++ b/demo/blocks_multiple_event_triggers/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: blocks_multiple_event_triggers"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio plotly pypistats"]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import pypistats\n", "from datetime import date\n", "from dateutil.relativedelta import relativedelta\n", "import pandas as pd\n", "\n", "def get_plot(lib, time):\n", "    data = pypistats.overall(lib, total=True, format=\"pandas\")\n", "    data = data.groupby(\"category\").get_group(\"with_mirrors\").sort_values(\"date\")\n", "    start_date = date.today() - relativedelta(months=int(time.split(\" \")[0]))\n", "    data = data[(data['date'] > str(start_date))]\n", "    data.date = pd.to_datetime(pd.to_datetime(data.date))\n", "    return gr.LinePlot(value=data, x=\"date\", y=\"downloads\",\n", "                              tooltip=['date', 'downloads'],\n", "                              title=f\"Pypi downloads of {lib} over last {time}\",\n", "                              overlay_point=True,\n", "                              height=400,\n", "                              width=900)\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(\n", "        \"\"\"\n", "        ## Pypi Download Stats \ud83d\udcc8\n", "        See live download stats for all of Hugging Face's open-source libraries \ud83e\udd17\n", "        \"\"\")\n", "    with gr.Row():\n", "        lib = gr.Dropdown([\"transformers\", \"datasets\", \"huggingface-hub\", \"gradio\", \"accelerate\"],\n", "                          value=\"gradio\", label=\"Library\")\n", "        time = gr.Dropdown([\"3 months\", \"6 months\", \"9 months\", \"12 months\"],\n", "                           value=\"3 months\", label=\"Downloads over the last...\")\n", "\n", "    plt = gr.LinePlot()\n", "    # You can add multiple event triggers in 2 lines like this\n", "    for event in [lib.change, time.change, demo.load]:\n", "        event(get_plot, [lib, time], [plt])\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: blocks_multiple_event_triggers"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio plotly pypistats python-dateutil "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import pypistats\n", "from datetime import date\n", "from dateutil.relativedelta import relativedelta\n", "import pandas as pd\n", "\n", "def get_plot(lib, time):\n", "    data = pypistats.overall(lib, total=True, format=\"pandas\")\n", "    data = data.groupby(\"category\").get_group(\"with_mirrors\").sort_values(\"date\")\n", "    start_date = date.today() - relativedelta(months=int(time.split(\" \")[0]))\n", "    data = data[(data['date'] > str(start_date))]\n", "    data.date = pd.to_datetime(pd.to_datetime(data.date))\n", "    return gr.LinePlot(value=data, x=\"date\", y=\"downloads\",\n", "                              tooltip=['date', 'downloads'],\n", "                              title=f\"Pypi downloads of {lib} over last {time}\",\n", "                              overlay_point=True,\n", "                              height=400,\n", "                              width=900)\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(\n", "        \"\"\"\n", "        ## Pypi Download Stats \ud83d\udcc8\n", "        See live download stats for all of Hugging Face's open-source libraries \ud83e\udd17\n", "        \"\"\")\n", "    with gr.Row():\n", "        lib = gr.Dropdown([\"transformers\", \"datasets\", \"huggingface-hub\", \"gradio\", \"accelerate\"],\n", "                          value=\"gradio\", label=\"Library\")\n", "        time = gr.Dropdown([\"3 months\", \"6 months\", \"9 months\", \"12 months\"],\n", "                           value=\"3 months\", label=\"Downloads over the last...\")\n", "\n", "    plt = gr.LinePlot()\n", "    # You can add multiple event triggers in 2 lines like this\n", "    for event in [lib.change, time.change, demo.load]:\n", "        event(get_plot, [lib, time], [plt])\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/button_component/run.ipynb b/demo/button_component/run.ipynb
index 438e15668df96..81f0218f5bc0b 100644
--- a/demo/button_component/run.ipynb
+++ b/demo/button_component/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: button_component"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "   gr.Button()\n", "\n", "demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: button_component"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "icon = \"https://cdn.icon-icons.com/icons2/2620/PNG/512/among_us_player_red_icon_156942.png\"\n", "with gr.Blocks() as demo:\n", "   with gr.Row():\n", "      gr.Button(variant=\"primary\")\n", "      gr.Button(variant=\"secondary\")\n", "      gr.Button(variant=\"stop\")\n", "   with gr.Row():\n", "      gr.Button(variant=\"primary\", size=\"sm\")\n", "      gr.Button(variant=\"secondary\", size=\"sm\")\n", "      gr.Button(variant=\"stop\", size=\"sm\")\n", "   with gr.Row():\n", "      gr.Button(variant=\"primary\", icon=icon)\n", "      gr.Button(variant=\"secondary\", icon=icon)\n", "      gr.Button(variant=\"stop\", icon=icon)\n", "\n", "   with gr.Row():\n", "      gr.Button(variant=\"primary\", size=\"sm\", icon=icon)\n", "      gr.Button(variant=\"secondary\", size=\"sm\", icon=icon)\n", "      gr.Button(variant=\"stop\", size=\"sm\", icon=icon)\n", "\n", "   with gr.Row():\n", "      gr.Button(variant=\"primary\", icon=icon, interactive=False)\n", "      gr.Button(variant=\"secondary\", icon=icon, interactive=False)\n", "      gr.Button(variant=\"stop\", icon=icon, interactive=False)\n", "\n", "   with gr.Row():\n", "      gr.Button(variant=\"primary\", size=\"sm\", icon=icon, interactive=False)\n", "      gr.Button(variant=\"secondary\", size=\"sm\", icon=icon, interactive=False)\n", "      gr.Button(variant=\"stop\", size=\"sm\", icon=icon, interactive=False)\n", "\n", "   with gr.Row():\n", "      gr.Button(variant=\"primary\", interactive=False)\n", "      gr.Button(variant=\"secondary\", interactive=False)\n", "      gr.Button(variant=\"stop\", interactive=False)\n", "\n", "   with gr.Row():\n", "      gr.Button(variant=\"primary\", size=\"sm\",  interactive=False)\n", "      gr.Button(variant=\"secondary\", size=\"sm\", interactive=False)\n", "      gr.Button(variant=\"stop\", size=\"sm\", interactive=False)\n", "\n", "   with gr.Group():\n", "      gr.Button(variant=\"primary\")\n", "      gr.Button(variant=\"primary\")\n", "      gr.Button(variant=\"secondary\")\n", "      gr.Button(variant=\"secondary\")\n", "      gr.Button(variant=\"stop\")\n", "      gr.Button(variant=\"stop\")\n", "\n", "\n", "demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/button_component/run.py b/demo/button_component/run.py
index 9119c5c351d0c..88b0d2215517f 100644
--- a/demo/button_component/run.py
+++ b/demo/button_component/run.py
@@ -1,6 +1,52 @@
 import gradio as gr
 
+icon = "https://cdn.icon-icons.com/icons2/2620/PNG/512/among_us_player_red_icon_156942.png"
 with gr.Blocks() as demo:
-   gr.Button()
+   with gr.Row():
+      gr.Button(variant="primary")
+      gr.Button(variant="secondary")
+      gr.Button(variant="stop")
+   with gr.Row():
+      gr.Button(variant="primary", size="sm")
+      gr.Button(variant="secondary", size="sm")
+      gr.Button(variant="stop", size="sm")
+   with gr.Row():
+      gr.Button(variant="primary", icon=icon)
+      gr.Button(variant="secondary", icon=icon)
+      gr.Button(variant="stop", icon=icon)
+
+   with gr.Row():
+      gr.Button(variant="primary", size="sm", icon=icon)
+      gr.Button(variant="secondary", size="sm", icon=icon)
+      gr.Button(variant="stop", size="sm", icon=icon)
+
+   with gr.Row():
+      gr.Button(variant="primary", icon=icon, interactive=False)
+      gr.Button(variant="secondary", icon=icon, interactive=False)
+      gr.Button(variant="stop", icon=icon, interactive=False)
+
+   with gr.Row():
+      gr.Button(variant="primary", size="sm", icon=icon, interactive=False)
+      gr.Button(variant="secondary", size="sm", icon=icon, interactive=False)
+      gr.Button(variant="stop", size="sm", icon=icon, interactive=False)
+
+   with gr.Row():
+      gr.Button(variant="primary", interactive=False)
+      gr.Button(variant="secondary", interactive=False)
+      gr.Button(variant="stop", interactive=False)
+
+   with gr.Row():
+      gr.Button(variant="primary", size="sm",  interactive=False)
+      gr.Button(variant="secondary", size="sm", interactive=False)
+      gr.Button(variant="stop", size="sm", interactive=False)
+
+   with gr.Group():
+      gr.Button(variant="primary")
+      gr.Button(variant="primary")
+      gr.Button(variant="secondary")
+      gr.Button(variant="secondary")
+      gr.Button(variant="stop")
+      gr.Button(variant="stop")
+
 
 demo.launch()
diff --git a/demo/chatbot_core_components/requirements.txt b/demo/chatbot_core_components/requirements.txt
new file mode 100644
index 0000000000000..2f15c45be7df6
--- /dev/null
+++ b/demo/chatbot_core_components/requirements.txt
@@ -0,0 +1,4 @@
+plotly
+numpy
+pandas
+matplotlib
diff --git a/demo/chatbot_core_components/run.ipynb b/demo/chatbot_core_components/run.ipynb
index fdb3c13228677..89be6e1d5b74b 100644
--- a/demo/chatbot_core_components/run.ipynb
+++ b/demo/chatbot_core_components/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatbot_core_components"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('files')\n", "!wget -q -O files/audio.wav https://github.com/gradio-app/gradio/raw/main/demo/chatbot_core_components/files/audio.wav\n", "!wget -q -O files/avatar.png https://github.com/gradio-app/gradio/raw/main/demo/chatbot_core_components/files/avatar.png\n", "!wget -q -O files/sample.txt https://github.com/gradio-app/gradio/raw/main/demo/chatbot_core_components/files/sample.txt\n", "!wget -q -O files/world.mp4 https://github.com/gradio-app/gradio/raw/main/demo/chatbot_core_components/files/world.mp4"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import os\n", "import plotly.express as px\n", "import random\n", "\n", "# Chatbot demo with multimodal input (text, markdown, LaTeX, code blocks, image, audio, & video). Plus shows support for streaming text.\n", "\n", "txt = \"\"\"\n", "Absolutely! The mycorrhizal network, often referred to as the \"Wood Wide Web,\" is a symbiotic association between fungi and the roots of most plant species. Here\u2019s a deeper dive into how it works and its implications:\n", "\n", "### How It Works\n", "\n", "1. **Symbiosis**: Mycorrhizal fungi attach to plant roots, extending far into the soil. The plant provides the fungi with carbohydrates produced via photosynthesis. In return, the fungi help the plant absorb water and essential nutrients like phosphorus and nitrogen from the soil.\n", "\n", "2. **Network Formation**: The fungal hyphae (thread-like structures) connect individual plants, creating an extensive underground network. This network can link many plants together, sometimes spanning entire forests.\n", "\n", "3. **Communication**: Trees and plants use this network to communicate and share resources. For example, a tree under attack by pests can send chemical signals through the mycorrhizal network to warn neighboring trees. These trees can then produce defensive chemicals to prepare for the impending threat.\n", "\n", "### Benefits and Functions\n", "\n", "1. **Resource Sharing**: The network allows for the redistribution of resources among plants. For instance, a large, established tree might share excess nutrients and water with smaller, younger trees, promoting overall forest health.\n", "\n", "2. **Defense Mechanism**: The ability to share information about pests and diseases enhances the resilience of plant communities. This early warning system helps plants activate their defenses before they are directly affected.\n", "\n", "3. **Support for Seedlings**: Young seedlings, which have limited root systems, benefit immensely from the mycorrhizal network. They receive nutrients and water from larger plants, increasing their chances of survival and growth.\n", "\n", "### Ecological Impact\n", "\n", "1. **Biodiversity**: The mycorrhizal network supports biodiversity by fostering a cooperative environment. Plants of different species can coexist and thrive because of the shared resources and information.\n", "\n", "2. **Forest Health**: The network enhances the overall health of forests. By enabling efficient nutrient cycling and supporting plant defenses, it contributes to the stability and longevity of forest ecosystems.\n", "\n", "3. **Climate Change Mitigation**: Healthy forests act as significant carbon sinks, absorbing carbon dioxide from the atmosphere. The mycorrhizal network plays a critical role in maintaining forest health and, consequently, in mitigating climate change.\n", "\n", "### Research and Discoveries\n", "\n", "1. **Suzanne Simard's Work**: Ecologist Suzanne Simard\u2019s research has been pivotal in uncovering the complexities of the mycorrhizal network. She demonstrated that trees of different species can share resources and that \"mother trees\" (large, older trees) play a crucial role in nurturing younger plants.\n", "\n", "2. **Implications for Conservation**: Understanding the mycorrhizal network has significant implications for conservation efforts. It highlights the importance of preserving not just individual trees but entire ecosystems, including the fungal networks that sustain them.\n", "\n", "### Practical Applications\n", "\n", "1. **Agriculture**: Farmers and horticulturists are exploring the use of mycorrhizal fungi to improve crop yields and soil health. By incorporating these fungi into agricultural practices, they can reduce the need for chemical fertilizers and enhance plant resilience.\n", "\n", "2. **Reforestation**: In reforestation projects, introducing mycorrhizal fungi can accelerate the recovery of degraded lands. The fungi help establish healthy plant communities, ensuring the success of newly planted trees.\n", "\n", "The \"Wood Wide Web\" exemplifies the intricate and often hidden connections that sustain life on Earth. It\u2019s a reminder of the profound interdependence within natural systems and the importance of preserving these delicate relationships.\n", "\"\"\"\n", "\n", "def random_plot():\n", "    df = px.data.iris()\n", "    fig = px.scatter(\n", "        df,\n", "        x=\"sepal_width\",\n", "        y=\"sepal_length\",\n", "        color=\"species\",\n", "        size=\"petal_length\",\n", "        hover_data=[\"petal_width\"],\n", "    )\n", "    return fig\n", "\n", "color_map = {\n", "    \"harmful\": \"crimson\",\n", "    \"neutral\": \"gray\",\n", "    \"beneficial\": \"green\",\n", "}\n", "\n", "def html_src(harm_level):\n", "    return f\"\"\"\n", "<div style=\"display: flex; gap: 5px;\">\n", "  <div style=\"background-color: {color_map[harm_level]}; padding: 2px; border-radius: 5px;\">\n", "  {harm_level}\n", "  </div>\n", "</div>\n", "\"\"\"\n", "\n", "def print_like_dislike(x: gr.LikeData):\n", "    print(x.index, x.value, x.liked)\n", "\n", "def random_bokeh_plot():\n", "    from bokeh.models import ColumnDataSource, Whisker\n", "    from bokeh.plotting import figure\n", "    from bokeh.sampledata.autompg2 import autompg2 as df\n", "    from bokeh.transform import factor_cmap, jitter\n", "\n", "    classes = sorted(df[\"class\"].unique())\n", "\n", "    p = figure(\n", "        height=400,\n", "        x_range=classes,\n", "        background_fill_color=\"#efefef\",\n", "        title=\"Car class vs HWY mpg with quintile ranges\",\n", "    )\n", "    p.xgrid.grid_line_color = None\n", "\n", "    g = df.groupby(\"class\")\n", "    upper = g.hwy.quantile(0.80)\n", "    lower = g.hwy.quantile(0.20)\n", "    source = ColumnDataSource(data=dict(base=classes, upper=upper, lower=lower))\n", "\n", "    error = Whisker(\n", "        base=\"base\",\n", "        upper=\"upper\",\n", "        lower=\"lower\",\n", "        source=source,\n", "        level=\"annotation\",\n", "        line_width=2,\n", "    )\n", "    error.upper_head.size = 20\n", "    error.lower_head.size = 20\n", "    p.add_layout(error)\n", "\n", "    p.circle(\n", "        jitter(\"class\", 0.3, range=p.x_range),\n", "        \"hwy\",\n", "        source=df,\n", "        alpha=0.5,\n", "        size=13,\n", "        line_color=\"white\",\n", "        color=factor_cmap(\"class\", \"Light6\", classes),\n", "    )\n", "    return p\n", "\n", "def random_matplotlib_plot():\n", "    import numpy as np\n", "    import pandas as pd\n", "    import matplotlib.pyplot as plt\n", "\n", "    countries = [\"USA\", \"Canada\", \"Mexico\", \"UK\"]\n", "    months = [\"January\", \"February\", \"March\", \"April\", \"May\"]\n", "    m = months.index(\"January\")\n", "    r = 3.2\n", "    start_day = 30 * m\n", "    final_day = 30 * (m + 1)\n", "    x = np.arange(start_day, final_day + 1)\n", "    pop_count = {\"USA\": 350, \"Canada\": 40, \"Mexico\": 300, \"UK\": 120}\n", "    df = pd.DataFrame({\"day\": x})\n", "    for country in countries:\n", "        df[country] = x ** (r) * (pop_count[country] + 1)\n", "\n", "    fig = plt.figure()\n", "    plt.plot(df[\"day\"], df[countries].to_numpy())\n", "    plt.title(\"Outbreak in \" + \"January\")\n", "    plt.ylabel(\"Cases\")\n", "    plt.xlabel(\"Days since Day 0\")\n", "    plt.legend(countries)\n", "    return fig\n", "\n", "def add_message(history, message):\n", "    for x in message[\"files\"]:\n", "        history.append(((x,), None))\n", "    if message[\"text\"] is not None:\n", "        history.append((message[\"text\"], None))\n", "    return history, gr.MultimodalTextbox(value=None, interactive=False)\n", "\n", "def bot(history, response_type):\n", "    if response_type == \"plot\":\n", "        history[-1][1] = gr.Plot(random_plot())\n", "    elif response_type == \"bokeh_plot\":\n", "        history[-1][1] = gr.Plot(random_bokeh_plot())\n", "    elif response_type == \"matplotlib_plot\":\n", "        history[-1][1] = gr.Plot(random_matplotlib_plot())\n", "    elif response_type == \"gallery\":\n", "        history[-1][1] = gr.Gallery(\n", "            [os.path.join(\"files\", \"avatar.png\"), os.path.join(\"files\", \"avatar.png\")]\n", "        )\n", "    elif response_type == \"image\":\n", "        history[-1][1] = gr.Image(os.path.join(\"files\", \"avatar.png\"))\n", "    elif response_type == \"video\":\n", "        history[-1][1] = gr.Video(os.path.join(\"files\", \"world.mp4\"))\n", "    elif response_type == \"audio\":\n", "        history[-1][1] = gr.Audio(os.path.join(\"files\", \"audio.wav\"))\n", "    elif response_type == \"audio_file\":\n", "        history[-1][1] = (os.path.join(\"files\", \"audio.wav\"), \"description\")\n", "    elif response_type == \"image_file\":\n", "        history[-1][1] = (os.path.join(\"files\", \"avatar.png\"), \"description\")\n", "    elif response_type == \"video_file\":\n", "        history[-1][1] = (os.path.join(\"files\", \"world.mp4\"), \"description\")\n", "    elif response_type == \"txt_file\":\n", "        history[-1][1] = (os.path.join(\"files\", \"sample.txt\"), \"description\")\n", "    elif response_type == \"html\":\n", "        history[-1][1] = gr.HTML(\n", "            html_src(random.choice([\"harmful\", \"neutral\", \"beneficial\"]))\n", "        )\n", "    else:\n", "        history[-1][1] = txt\n", "    return history\n", "\n", "fig = random_plot()\n", "\n", "with gr.Blocks(fill_height=True) as demo:\n", "    chatbot = gr.Chatbot(\n", "        elem_id=\"chatbot\",\n", "        bubble_full_width=False,\n", "        scale=1,\n", "        show_copy_button=True,\n", "        avatar_images=(\n", "            None,  # os.path.join(\"files\", \"avatar.png\"),\n", "            os.path.join(\"files\", \"avatar.png\"),\n", "        ),\n", "        # layout=\"panel\",\n", "    )\n", "    response_type = gr.Radio(\n", "        [\n", "            \"audio_file\",\n", "            \"image_file\",\n", "            \"video_file\",\n", "            \"txt_file\",\n", "            \"plot\",\n", "            \"matplotlib_plot\",\n", "            \"bokeh_plot\",\n", "            \"image\",\n", "            \"text\",\n", "            \"gallery\",\n", "            \"video\",\n", "            \"audio\",\n", "            \"html\",\n", "        ],\n", "        value=\"text\",\n", "        label=\"Response Type\",\n", "    )\n", "\n", "    chat_input = gr.MultimodalTextbox(\n", "        interactive=True,\n", "        placeholder=\"Enter message or upload file...\",\n", "        show_label=False,\n", "    )\n", "\n", "    chat_msg = chat_input.submit(\n", "        add_message, [chatbot, chat_input], [chatbot, chat_input]\n", "    )\n", "    bot_msg = chat_msg.then(\n", "        bot, [chatbot, response_type], chatbot, api_name=\"bot_response\"\n", "    )\n", "    bot_msg.then(lambda: gr.MultimodalTextbox(interactive=True), None, [chat_input])\n", "\n", "    chatbot.like(print_like_dislike, None, None)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatbot_core_components"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio plotly numpy pandas matplotlib "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('files')\n", "!wget -q -O files/audio.wav https://github.com/gradio-app/gradio/raw/main/demo/chatbot_core_components/files/audio.wav\n", "!wget -q -O files/avatar.png https://github.com/gradio-app/gradio/raw/main/demo/chatbot_core_components/files/avatar.png\n", "!wget -q -O files/sample.txt https://github.com/gradio-app/gradio/raw/main/demo/chatbot_core_components/files/sample.txt\n", "!wget -q -O files/world.mp4 https://github.com/gradio-app/gradio/raw/main/demo/chatbot_core_components/files/world.mp4"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import os\n", "import plotly.express as px\n", "import random\n", "\n", "# Chatbot demo with multimodal input (text, markdown, LaTeX, code blocks, image, audio, & video). Plus shows support for streaming text.\n", "\n", "txt = \"\"\"\n", "Absolutely! The mycorrhizal network, often referred to as the \"Wood Wide Web,\" is a symbiotic association between fungi and the roots of most plant species. Here\u2019s a deeper dive into how it works and its implications:\n", "\n", "### How It Works\n", "\n", "1. **Symbiosis**: Mycorrhizal fungi attach to plant roots, extending far into the soil. The plant provides the fungi with carbohydrates produced via photosynthesis. In return, the fungi help the plant absorb water and essential nutrients like phosphorus and nitrogen from the soil.\n", "\n", "2. **Network Formation**: The fungal hyphae (thread-like structures) connect individual plants, creating an extensive underground network. This network can link many plants together, sometimes spanning entire forests.\n", "\n", "3. **Communication**: Trees and plants use this network to communicate and share resources. For example, a tree under attack by pests can send chemical signals through the mycorrhizal network to warn neighboring trees. These trees can then produce defensive chemicals to prepare for the impending threat.\n", "\n", "### Benefits and Functions\n", "\n", "1. **Resource Sharing**: The network allows for the redistribution of resources among plants. For instance, a large, established tree might share excess nutrients and water with smaller, younger trees, promoting overall forest health.\n", "\n", "2. **Defense Mechanism**: The ability to share information about pests and diseases enhances the resilience of plant communities. This early warning system helps plants activate their defenses before they are directly affected.\n", "\n", "3. **Support for Seedlings**: Young seedlings, which have limited root systems, benefit immensely from the mycorrhizal network. They receive nutrients and water from larger plants, increasing their chances of survival and growth.\n", "\n", "### Ecological Impact\n", "\n", "1. **Biodiversity**: The mycorrhizal network supports biodiversity by fostering a cooperative environment. Plants of different species can coexist and thrive because of the shared resources and information.\n", "\n", "2. **Forest Health**: The network enhances the overall health of forests. By enabling efficient nutrient cycling and supporting plant defenses, it contributes to the stability and longevity of forest ecosystems.\n", "\n", "3. **Climate Change Mitigation**: Healthy forests act as significant carbon sinks, absorbing carbon dioxide from the atmosphere. The mycorrhizal network plays a critical role in maintaining forest health and, consequently, in mitigating climate change.\n", "\n", "### Research and Discoveries\n", "\n", "1. **Suzanne Simard's Work**: Ecologist Suzanne Simard\u2019s research has been pivotal in uncovering the complexities of the mycorrhizal network. She demonstrated that trees of different species can share resources and that \"mother trees\" (large, older trees) play a crucial role in nurturing younger plants.\n", "\n", "2. **Implications for Conservation**: Understanding the mycorrhizal network has significant implications for conservation efforts. It highlights the importance of preserving not just individual trees but entire ecosystems, including the fungal networks that sustain them.\n", "\n", "### Practical Applications\n", "\n", "1. **Agriculture**: Farmers and horticulturists are exploring the use of mycorrhizal fungi to improve crop yields and soil health. By incorporating these fungi into agricultural practices, they can reduce the need for chemical fertilizers and enhance plant resilience.\n", "\n", "2. **Reforestation**: In reforestation projects, introducing mycorrhizal fungi can accelerate the recovery of degraded lands. The fungi help establish healthy plant communities, ensuring the success of newly planted trees.\n", "\n", "The \"Wood Wide Web\" exemplifies the intricate and often hidden connections that sustain life on Earth. It\u2019s a reminder of the profound interdependence within natural systems and the importance of preserving these delicate relationships.\n", "\"\"\"\n", "\n", "def random_plot():\n", "    df = px.data.iris()\n", "    fig = px.scatter(\n", "        df,\n", "        x=\"sepal_width\",\n", "        y=\"sepal_length\",\n", "        color=\"species\",\n", "        size=\"petal_length\",\n", "        hover_data=[\"petal_width\"],\n", "    )\n", "    return fig\n", "\n", "color_map = {\n", "    \"harmful\": \"crimson\",\n", "    \"neutral\": \"gray\",\n", "    \"beneficial\": \"green\",\n", "}\n", "\n", "def html_src(harm_level):\n", "    return f\"\"\"\n", "<div style=\"display: flex; gap: 5px;\">\n", "  <div style=\"background-color: {color_map[harm_level]}; padding: 2px; border-radius: 5px;\">\n", "  {harm_level}\n", "  </div>\n", "</div>\n", "\"\"\"\n", "\n", "def print_like_dislike(x: gr.LikeData):\n", "    print(x.index, x.value, x.liked)\n", "\n", "def random_bokeh_plot():\n", "    from bokeh.models import ColumnDataSource, Whisker\n", "    from bokeh.plotting import figure\n", "    from bokeh.sampledata.autompg2 import autompg2 as df\n", "    from bokeh.transform import factor_cmap, jitter\n", "\n", "    classes = sorted(df[\"class\"].unique())\n", "\n", "    p = figure(\n", "        height=400,\n", "        x_range=classes,\n", "        background_fill_color=\"#efefef\",\n", "        title=\"Car class vs HWY mpg with quintile ranges\",\n", "    )\n", "    p.xgrid.grid_line_color = None\n", "\n", "    g = df.groupby(\"class\")\n", "    upper = g.hwy.quantile(0.80)\n", "    lower = g.hwy.quantile(0.20)\n", "    source = ColumnDataSource(data=dict(base=classes, upper=upper, lower=lower))\n", "\n", "    error = Whisker(\n", "        base=\"base\",\n", "        upper=\"upper\",\n", "        lower=\"lower\",\n", "        source=source,\n", "        level=\"annotation\",\n", "        line_width=2,\n", "    )\n", "    error.upper_head.size = 20\n", "    error.lower_head.size = 20\n", "    p.add_layout(error)\n", "\n", "    p.circle(\n", "        jitter(\"class\", 0.3, range=p.x_range),\n", "        \"hwy\",\n", "        source=df,\n", "        alpha=0.5,\n", "        size=13,\n", "        line_color=\"white\",\n", "        color=factor_cmap(\"class\", \"Light6\", classes),\n", "    )\n", "    return p\n", "\n", "def random_matplotlib_plot():\n", "    import numpy as np\n", "    import pandas as pd\n", "    import matplotlib.pyplot as plt\n", "\n", "    countries = [\"USA\", \"Canada\", \"Mexico\", \"UK\"]\n", "    months = [\"January\", \"February\", \"March\", \"April\", \"May\"]\n", "    m = months.index(\"January\")\n", "    r = 3.2\n", "    start_day = 30 * m\n", "    final_day = 30 * (m + 1)\n", "    x = np.arange(start_day, final_day + 1)\n", "    pop_count = {\"USA\": 350, \"Canada\": 40, \"Mexico\": 300, \"UK\": 120}\n", "    df = pd.DataFrame({\"day\": x})\n", "    for country in countries:\n", "        df[country] = x ** (r) * (pop_count[country] + 1)\n", "\n", "    fig = plt.figure()\n", "    plt.plot(df[\"day\"], df[countries].to_numpy())\n", "    plt.title(\"Outbreak in \" + \"January\")\n", "    plt.ylabel(\"Cases\")\n", "    plt.xlabel(\"Days since Day 0\")\n", "    plt.legend(countries)\n", "    return fig\n", "\n", "def add_message(history, message):\n", "    for x in message[\"files\"]:\n", "        history.append({\"role\": \"user\", \"content\": {\"path\": x}})\n", "    if message[\"text\"] is not None:\n", "        history.append({\"role\": \"user\", \"content\": message[\"text\"]})\n", "    return history, gr.MultimodalTextbox(value=None, interactive=False)\n", "\n", "def bot(history, response_type):\n", "    msg = {\"role\": \"assistant\", \"content\": \"\"}\n", "    if response_type == \"plot\":\n", "        content = gr.Plot(random_plot())\n", "    elif response_type == \"bokeh_plot\":\n", "        content = gr.Plot(random_bokeh_plot())\n", "    elif response_type == \"matplotlib_plot\":\n", "        content =  gr.Plot(random_matplotlib_plot())\n", "    elif response_type == \"gallery\":\n", "        content = gr.Gallery(\n", "            [os.path.join(\"files\", \"avatar.png\"), os.path.join(\"files\", \"avatar.png\")]\n", "        )\n", "    elif response_type == \"image\":\n", "       content = gr.Image(os.path.join(\"files\", \"avatar.png\"))\n", "    elif response_type == \"video\":\n", "       content = gr.Video(os.path.join(\"files\", \"world.mp4\"))\n", "    elif response_type == \"audio\":\n", "        content = gr.Audio(os.path.join(\"files\", \"audio.wav\"))\n", "    elif response_type == \"audio_file\":\n", "        content = {\"path\": os.path.join(\"files\", \"audio.wav\"), \"alt_text\": \"description\"}\n", "    elif response_type == \"image_file\":\n", "        content = {\"path\": os.path.join(\"files\", \"avatar.png\"), \"alt_text\": \"description\"}\n", "    elif response_type == \"video_file\":\n", "        content = {\"path\": os.path.join(\"files\", \"world.mp4\"), \"alt_text\": \"description\"}\n", "    elif response_type == \"txt_file\":\n", "        content = {\"path\": os.path.join(\"files\", \"sample.txt\"), \"alt_text\": \"description\"}\n", "    elif response_type == \"html\":\n", "        content = gr.HTML(\n", "            html_src(random.choice([\"harmful\", \"neutral\", \"beneficial\"]))\n", "        )\n", "    else:\n", "        content = txt\n", "    msg[\"content\"] = content # type: ignore\n", "    history.append(msg)\n", "    return history\n", "\n", "fig = random_plot()\n", "\n", "with gr.Blocks(fill_height=True) as demo:\n", "    chatbot = gr.Chatbot(\n", "        elem_id=\"chatbot\",\n", "        type=\"messages\",\n", "        bubble_full_width=False,\n", "        scale=1,\n", "        show_copy_button=True,\n", "        avatar_images=(\n", "            None,  # os.path.join(\"files\", \"avatar.png\"),\n", "            os.path.join(\"files\", \"avatar.png\"),\n", "        ),\n", "    )\n", "    response_type = gr.Radio(\n", "        [\n", "            \"audio_file\",\n", "            \"image_file\",\n", "            \"video_file\",\n", "            \"txt_file\",\n", "            \"plot\",\n", "            \"matplotlib_plot\",\n", "            \"bokeh_plot\",\n", "            \"image\",\n", "            \"text\",\n", "            \"gallery\",\n", "            \"video\",\n", "            \"audio\",\n", "            \"html\",\n", "        ],\n", "        value=\"text\",\n", "        label=\"Response Type\",\n", "    )\n", "\n", "    chat_input = gr.MultimodalTextbox(\n", "        interactive=True,\n", "        placeholder=\"Enter message or upload file...\",\n", "        show_label=False,\n", "    )\n", "\n", "    chat_msg = chat_input.submit(\n", "        add_message, [chatbot, chat_input], [chatbot, chat_input]\n", "    )\n", "    bot_msg = chat_msg.then(\n", "        bot, [chatbot, response_type], chatbot, api_name=\"bot_response\"\n", "    )\n", "    bot_msg.then(lambda: gr.MultimodalTextbox(interactive=True), None, [chat_input])\n", "\n", "    chatbot.like(print_like_dislike, None, None)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/chatbot_core_components/run.py b/demo/chatbot_core_components/run.py
index ec72f404382a0..46cee130abd54 100644
--- a/demo/chatbot_core_components/run.py
+++ b/demo/chatbot_core_components/run.py
@@ -148,42 +148,45 @@ def random_matplotlib_plot():
 
 def add_message(history, message):
     for x in message["files"]:
-        history.append(((x,), None))
+        history.append({"role": "user", "content": {"path": x}})
     if message["text"] is not None:
-        history.append((message["text"], None))
+        history.append({"role": "user", "content": message["text"]})
     return history, gr.MultimodalTextbox(value=None, interactive=False)
 
 def bot(history, response_type):
+    msg = {"role": "assistant", "content": ""}
     if response_type == "plot":
-        history[-1][1] = gr.Plot(random_plot())
+        content = gr.Plot(random_plot())
     elif response_type == "bokeh_plot":
-        history[-1][1] = gr.Plot(random_bokeh_plot())
+        content = gr.Plot(random_bokeh_plot())
     elif response_type == "matplotlib_plot":
-        history[-1][1] = gr.Plot(random_matplotlib_plot())
+        content =  gr.Plot(random_matplotlib_plot())
     elif response_type == "gallery":
-        history[-1][1] = gr.Gallery(
+        content = gr.Gallery(
             [os.path.join("files", "avatar.png"), os.path.join("files", "avatar.png")]
         )
     elif response_type == "image":
-        history[-1][1] = gr.Image(os.path.join("files", "avatar.png"))
+       content = gr.Image(os.path.join("files", "avatar.png"))
     elif response_type == "video":
-        history[-1][1] = gr.Video(os.path.join("files", "world.mp4"))
+       content = gr.Video(os.path.join("files", "world.mp4"))
     elif response_type == "audio":
-        history[-1][1] = gr.Audio(os.path.join("files", "audio.wav"))
+        content = gr.Audio(os.path.join("files", "audio.wav"))
     elif response_type == "audio_file":
-        history[-1][1] = (os.path.join("files", "audio.wav"), "description")
+        content = {"path": os.path.join("files", "audio.wav"), "alt_text": "description"}
     elif response_type == "image_file":
-        history[-1][1] = (os.path.join("files", "avatar.png"), "description")
+        content = {"path": os.path.join("files", "avatar.png"), "alt_text": "description"}
     elif response_type == "video_file":
-        history[-1][1] = (os.path.join("files", "world.mp4"), "description")
+        content = {"path": os.path.join("files", "world.mp4"), "alt_text": "description"}
     elif response_type == "txt_file":
-        history[-1][1] = (os.path.join("files", "sample.txt"), "description")
+        content = {"path": os.path.join("files", "sample.txt"), "alt_text": "description"}
     elif response_type == "html":
-        history[-1][1] = gr.HTML(
+        content = gr.HTML(
             html_src(random.choice(["harmful", "neutral", "beneficial"]))
         )
     else:
-        history[-1][1] = txt
+        content = txt
+    msg["content"] = content # type: ignore
+    history.append(msg)
     return history
 
 fig = random_plot()
@@ -191,6 +194,7 @@ def bot(history, response_type):
 with gr.Blocks(fill_height=True) as demo:
     chatbot = gr.Chatbot(
         elem_id="chatbot",
+        type="messages",
         bubble_full_width=False,
         scale=1,
         show_copy_button=True,
@@ -198,7 +202,6 @@ def bot(history, response_type):
             None,  # os.path.join("files", "avatar.png"),
             os.path.join("files", "avatar.png"),
         ),
-        # layout="panel",
     )
     response_type = gr.Radio(
         [
diff --git a/demo/chatbot_multimodal/files/avatar.png b/demo/chatbot_examples/files/avatar.png
similarity index 100%
rename from demo/chatbot_multimodal/files/avatar.png
rename to demo/chatbot_examples/files/avatar.png
diff --git a/demo/chatbot_examples/files/cantina.wav b/demo/chatbot_examples/files/cantina.wav
new file mode 100644
index 0000000000000..41f0204384682
Binary files /dev/null and b/demo/chatbot_examples/files/cantina.wav differ
diff --git a/demo/chatbot_examples/run.ipynb b/demo/chatbot_examples/run.ipynb
new file mode 100644
index 0000000000000..e1396d382da40
--- /dev/null
+++ b/demo/chatbot_examples/run.ipynb
@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatbot_examples"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('files')\n", "!wget -q -O files/avatar.png https://github.com/gradio-app/gradio/raw/main/demo/chatbot_examples/files/avatar.png\n", "!wget -q -O files/cantina.wav https://github.com/gradio-app/gradio/raw/main/demo/chatbot_examples/files/cantina.wav"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import os\n", "# Multimodal Chatbot demo that shows support for examples (example messages shown within the chatbot).\n", "\n", "def print_like_dislike(x: gr.LikeData):\n", "    print(x.index, x.value, x.liked)\n", "\n", "def add_message(history, message):\n", "    for x in message[\"files\"]:\n", "        history.append(((x,), None))\n", "    if message[\"text\"] is not None:\n", "        history.append((message[\"text\"], None))\n", "    return history, gr.MultimodalTextbox(value=None, interactive=False)\n", "\n", "def append_example_message(x: gr.SelectData, history):\n", "    if x.value[\"text\"] is not None:\n", "        history.append((x.value[\"text\"], None))\n", "    if \"files\" in x.value:\n", "        if isinstance(x.value[\"files\"], list):\n", "            for file in x.value[\"files\"]:\n", "                history.append((file, None))\n", "        else:\n", "            history.append((x.value[\"files\"], None))\n", "    return history\n", "\n", "def respond(history):\n", "    history[-1][1] = \"Cool!\"\n", "    return history\n", "\n", "with gr.Blocks(fill_height=True) as demo:\n", "    chatbot = gr.Chatbot(\n", "        elem_id=\"chatbot\",\n", "        bubble_full_width=False,\n", "        scale=1,\n", "        placeholder='<h1 style=\"font-weight: bold; color: #FFFFFF; text-align: center; font-size: 48px; font-family: Arial, sans-serif;\">Welcome to Gradio!</h1>',\n", "        examples=[{\"icon\": os.path.join(os.path.abspath(''), \"files/avatar.png\"), \"display_text\": \"Display Text Here!\", \"text\": \"Try this example with this audio.\", \"files\": [os.path.join(os.path.abspath(''), \"files/cantina.wav\")]},\n", "                     {\"text\": \"Try this example with this image.\", \"files\": [os.path.join(os.path.abspath(''), \"files/avatar.png\")]},\n", "                     {\"text\": \"This is just text, no files!\"},\n", "                     {\"text\": \"Try this example with this image.\", \"files\": [os.path.join(os.path.abspath(''), \"files/avatar.png\"), os.path.join(os.path.abspath(''), \"files/avatar.png\")]},\n", "                     {\"text\": \"Try this example with this Audio.\", \"files\": [os.path.join(os.path.abspath(''), \"files/cantina.wav\")]}]\n", "    )\n", "\n", "    chat_input = gr.MultimodalTextbox(interactive=True,\n", "                                      file_count=\"multiple\",\n", "                                      placeholder=\"Enter message or upload file...\", show_label=False)\n", "\n", "    chat_msg = chat_input.submit(add_message, [chatbot, chat_input], [chatbot, chat_input])\n", "    bot_msg = chat_msg.then(respond, chatbot, chatbot, api_name=\"bot_response\")\n", "    bot_msg.then(lambda: gr.MultimodalTextbox(interactive=True), None, [chat_input])\n", "\n", "    chatbot.like(print_like_dislike, None, None)\n", "    chatbot.example_select(append_example_message, [chatbot], [chatbot]).then(respond, chatbot, chatbot, api_name=\"respond\")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/chatbot_examples/run.py b/demo/chatbot_examples/run.py
new file mode 100644
index 0000000000000..a2c2c3f36e90c
--- /dev/null
+++ b/demo/chatbot_examples/run.py
@@ -0,0 +1,55 @@
+import gradio as gr
+import os
+# Multimodal Chatbot demo that shows support for examples (example messages shown within the chatbot).
+
+def print_like_dislike(x: gr.LikeData):
+    print(x.index, x.value, x.liked)
+
+def add_message(history, message):
+    for x in message["files"]:
+        history.append(((x,), None))
+    if message["text"] is not None:
+        history.append((message["text"], None))
+    return history, gr.MultimodalTextbox(value=None, interactive=False)
+
+def append_example_message(x: gr.SelectData, history):
+    if x.value["text"] is not None:
+        history.append((x.value["text"], None))
+    if "files" in x.value:
+        if isinstance(x.value["files"], list):
+            for file in x.value["files"]:
+                history.append((file, None))
+        else:
+            history.append((x.value["files"], None))
+    return history
+
+def respond(history):
+    history[-1][1] = "Cool!"
+    return history
+
+with gr.Blocks(fill_height=True) as demo:
+    chatbot = gr.Chatbot(
+        elem_id="chatbot",
+        bubble_full_width=False,
+        scale=1,
+        placeholder='<h1 style="font-weight: bold; color: #FFFFFF; text-align: center; font-size: 48px; font-family: Arial, sans-serif;">Welcome to Gradio!</h1>',
+        examples=[{"icon": os.path.join(os.path.dirname(__file__), "files/avatar.png"), "display_text": "Display Text Here!", "text": "Try this example with this audio.", "files": [os.path.join(os.path.dirname(__file__), "files/cantina.wav")]},
+                     {"text": "Try this example with this image.", "files": [os.path.join(os.path.dirname(__file__), "files/avatar.png")]},
+                     {"text": "This is just text, no files!"},
+                     {"text": "Try this example with this image.", "files": [os.path.join(os.path.dirname(__file__), "files/avatar.png"), os.path.join(os.path.dirname(__file__), "files/avatar.png")]},
+                     {"text": "Try this example with this Audio.", "files": [os.path.join(os.path.dirname(__file__), "files/cantina.wav")]}]
+    )
+
+    chat_input = gr.MultimodalTextbox(interactive=True,
+                                      file_count="multiple",
+                                      placeholder="Enter message or upload file...", show_label=False)
+
+    chat_msg = chat_input.submit(add_message, [chatbot, chat_input], [chatbot, chat_input])
+    bot_msg = chat_msg.then(respond, chatbot, chatbot, api_name="bot_response")
+    bot_msg.then(lambda: gr.MultimodalTextbox(interactive=True), None, [chat_input])
+
+    chatbot.like(print_like_dislike, None, None)
+    chatbot.example_select(append_example_message, [chatbot], [chatbot]).then(respond, chatbot, chatbot, api_name="respond")
+
+if __name__ == "__main__":
+    demo.launch()
diff --git a/demo/chatbot_multimodal/requirements.txt b/demo/chatbot_multimodal/requirements.txt
deleted file mode 100644
index d42d0ad03bdf8..0000000000000
--- a/demo/chatbot_multimodal/requirements.txt
+++ /dev/null
@@ -1 +0,0 @@
-plotly
\ No newline at end of file
diff --git a/demo/chatbot_multimodal/run.ipynb b/demo/chatbot_multimodal/run.ipynb
index 53caf6d4463b5..0299e0799d9e9 100644
--- a/demo/chatbot_multimodal/run.ipynb
+++ b/demo/chatbot_multimodal/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatbot_multimodal"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio plotly"]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('files')\n", "!wget -q -O files/avatar.png https://github.com/gradio-app/gradio/raw/main/demo/chatbot_multimodal/files/avatar.png\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/chatbot_multimodal/messages_testcase.py"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import plotly.express as px\n", "\n", "# Chatbot demo with multimodal input (text, markdown, LaTeX, code blocks, image, audio, & video). Plus shows support for streaming text.\n", "\n", "def random_plot():\n", "    df = px.data.iris()\n", "    fig = px.scatter(df, x=\"sepal_width\", y=\"sepal_length\", color=\"species\",\n", "                    size='petal_length', hover_data=['petal_width'])\n", "    return fig\n", "\n", "def print_like_dislike(x: gr.LikeData):\n", "    print(x.index, x.value, x.liked)\n", "\n", "def add_message(history, message):\n", "    for x in message[\"files\"]:\n", "        history.append(((x,), None))\n", "    if message[\"text\"] is not None:\n", "        history.append((message[\"text\"], None))\n", "    return history, gr.MultimodalTextbox(value=None, interactive=False)\n", "\n", "def bot(history):\n", "    history[-1][1] = \"Cool!\"\n", "    return history\n", "\n", "fig = random_plot()\n", "\n", "with gr.Blocks(fill_height=True) as demo:\n", "    chatbot = gr.Chatbot(\n", "        elem_id=\"chatbot\",\n", "        bubble_full_width=False,\n", "        scale=1,\n", "    )\n", "\n", "    chat_input = gr.MultimodalTextbox(interactive=True,\n", "                                      file_count=\"multiple\",\n", "                                      placeholder=\"Enter message or upload file...\", show_label=False)\n", "\n", "    chat_msg = chat_input.submit(add_message, [chatbot, chat_input], [chatbot, chat_input])\n", "    bot_msg = chat_msg.then(bot, chatbot, chatbot, api_name=\"bot_response\")\n", "    bot_msg.then(lambda: gr.MultimodalTextbox(interactive=True), None, [chat_input])\n", "\n", "    chatbot.like(print_like_dislike, None, None)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatbot_multimodal"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/chatbot_multimodal/tuples_testcase.py"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import time\n", "\n", "# Chatbot demo with multimodal input (text, markdown, LaTeX, code blocks, image, audio, & video). Plus shows support for streaming text.\n", "\n", "\n", "def print_like_dislike(x: gr.LikeData):\n", "    print(x.index, x.value, x.liked)\n", "\n", "\n", "def add_message(history, message):\n", "    for x in message[\"files\"]:\n", "        history.append({\"role\": \"user\", \"content\": {\"path\": x}})\n", "    if message[\"text\"] is not None:\n", "        history.append({\"role\": \"user\", \"content\": message[\"text\"]})\n", "    return history, gr.MultimodalTextbox(value=None, interactive=False)\n", "\n", "\n", "def bot(history: list):\n", "    response = \"**That's cool!**\"\n", "    history.append({\"role\": \"assistant\", \"content\": \"\"})\n", "    for character in response:\n", "        history[-1][\"content\"] += character\n", "        time.sleep(0.05)\n", "        yield history\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    chatbot = gr.Chatbot(elem_id=\"chatbot\", bubble_full_width=False, type=\"messages\")\n", "\n", "    chat_input = gr.MultimodalTextbox(\n", "        interactive=True,\n", "        file_count=\"multiple\",\n", "        placeholder=\"Enter message or upload file...\",\n", "        show_label=False,\n", "    )\n", "\n", "    chat_msg = chat_input.submit(\n", "        add_message, [chatbot, chat_input], [chatbot, chat_input]\n", "    )\n", "    bot_msg = chat_msg.then(bot, chatbot, chatbot, api_name=\"bot_response\")\n", "    bot_msg.then(lambda: gr.MultimodalTextbox(interactive=True), None, [chat_input])\n", "\n", "    chatbot.like(print_like_dislike, None, None, like_user_message=True)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/chatbot_multimodal/run.py b/demo/chatbot_multimodal/run.py
index c4919c5e9223b..ac0cb18805246 100644
--- a/demo/chatbot_multimodal/run.py
+++ b/demo/chatbot_multimodal/run.py
@@ -1,46 +1,47 @@
 import gradio as gr
-import plotly.express as px
+import time
 
 # Chatbot demo with multimodal input (text, markdown, LaTeX, code blocks, image, audio, & video). Plus shows support for streaming text.
 
-def random_plot():
-    df = px.data.iris()
-    fig = px.scatter(df, x="sepal_width", y="sepal_length", color="species",
-                    size='petal_length', hover_data=['petal_width'])
-    return fig
 
 def print_like_dislike(x: gr.LikeData):
     print(x.index, x.value, x.liked)
 
+
 def add_message(history, message):
     for x in message["files"]:
-        history.append(((x,), None))
+        history.append({"role": "user", "content": {"path": x}})
     if message["text"] is not None:
-        history.append((message["text"], None))
+        history.append({"role": "user", "content": message["text"]})
     return history, gr.MultimodalTextbox(value=None, interactive=False)
 
-def bot(history):
-    history[-1][1] = "Cool!"
-    return history
 
-fig = random_plot()
+def bot(history: list):
+    response = "**That's cool!**"
+    history.append({"role": "assistant", "content": ""})
+    for character in response:
+        history[-1]["content"] += character
+        time.sleep(0.05)
+        yield history
 
-with gr.Blocks(fill_height=True) as demo:
-    chatbot = gr.Chatbot(
-        elem_id="chatbot",
-        bubble_full_width=False,
-        scale=1,
-    )
 
-    chat_input = gr.MultimodalTextbox(interactive=True,
-                                      file_count="multiple",
-                                      placeholder="Enter message or upload file...", show_label=False)
+with gr.Blocks() as demo:
+    chatbot = gr.Chatbot(elem_id="chatbot", bubble_full_width=False, type="messages")
 
-    chat_msg = chat_input.submit(add_message, [chatbot, chat_input], [chatbot, chat_input])
+    chat_input = gr.MultimodalTextbox(
+        interactive=True,
+        file_count="multiple",
+        placeholder="Enter message or upload file...",
+        show_label=False,
+    )
+
+    chat_msg = chat_input.submit(
+        add_message, [chatbot, chat_input], [chatbot, chat_input]
+    )
     bot_msg = chat_msg.then(bot, chatbot, chatbot, api_name="bot_response")
     bot_msg.then(lambda: gr.MultimodalTextbox(interactive=True), None, [chat_input])
 
-    chatbot.like(print_like_dislike, None, None)
+    chatbot.like(print_like_dislike, None, None, like_user_message=True)
 
 if __name__ == "__main__":
     demo.launch()
diff --git a/demo/chatbot_multimodal/messages_testcase.py b/demo/chatbot_multimodal/tuples_testcase.py
similarity index 69%
rename from demo/chatbot_multimodal/messages_testcase.py
rename to demo/chatbot_multimodal/tuples_testcase.py
index bd003af9a6788..c4919c5e9223b 100644
--- a/demo/chatbot_multimodal/messages_testcase.py
+++ b/demo/chatbot_multimodal/tuples_testcase.py
@@ -1,32 +1,35 @@
 import gradio as gr
-import time
+import plotly.express as px
 
 # Chatbot demo with multimodal input (text, markdown, LaTeX, code blocks, image, audio, & video). Plus shows support for streaming text.
 
+def random_plot():
+    df = px.data.iris()
+    fig = px.scatter(df, x="sepal_width", y="sepal_length", color="species",
+                    size='petal_length', hover_data=['petal_width'])
+    return fig
+
 def print_like_dislike(x: gr.LikeData):
     print(x.index, x.value, x.liked)
 
 def add_message(history, message):
     for x in message["files"]:
-        history.append({"role": "user", "content": {"path": x}})
+        history.append(((x,), None))
     if message["text"] is not None:
-        history.append({"role": "user", "content": message["text"]})
+        history.append((message["text"], None))
     return history, gr.MultimodalTextbox(value=None, interactive=False)
 
-def bot(history: list):
-    response = "**That's cool!**"
-    history.append({"role": "assistant", "content": ""})
-    for character in response:
-        history[-1]['content'] += character
-        time.sleep(0.05)
-        yield history
+def bot(history):
+    history[-1][1] = "Cool!"
+    return history
+
+fig = random_plot()
 
-with gr.Blocks() as demo:
+with gr.Blocks(fill_height=True) as demo:
     chatbot = gr.Chatbot(
-        [],
         elem_id="chatbot",
         bubble_full_width=False,
-        type="messages"
+        scale=1,
     )
 
     chat_input = gr.MultimodalTextbox(interactive=True,
diff --git a/demo/chatbot_retry_undo_like/requirements.txt b/demo/chatbot_retry_undo_like/requirements.txt
new file mode 100644
index 0000000000000..6b964ccca3c1b
--- /dev/null
+++ b/demo/chatbot_retry_undo_like/requirements.txt
@@ -0,0 +1 @@
+huggingface_hub
diff --git a/demo/chatbot_retry_undo_like/run.ipynb b/demo/chatbot_retry_undo_like/run.ipynb
new file mode 100644
index 0000000000000..6606a81db7b40
--- /dev/null
+++ b/demo/chatbot_retry_undo_like/run.ipynb
@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatbot_retry_undo_like"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio huggingface_hub "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["from huggingface_hub import InferenceClient\n", "import gradio as gr\n", "\n", "client = InferenceClient()\n", "\n", "def respond(\n", "    prompt: str,\n", "    history,\n", "):\n", "    if not history:\n", "        history = [{\"role\": \"system\", \"content\": \"You are a friendly chatbot\"}]\n", "    history.append({\"role\": \"user\", \"content\": prompt})\n", "\n", "    yield history\n", "\n", "    response = {\"role\": \"assistant\", \"content\": \"\"}\n", "    for message in client.chat_completion( # type: ignore\n", "        history,\n", "        temperature=0.95,\n", "        top_p=0.9,\n", "        max_tokens=512,\n", "        stream=True,\n", "        model=\"HuggingFaceH4/zephyr-7b-beta\"\n", "    ):\n", "        response[\"content\"] += message.choices[0].delta.content or \"\"\n", "        yield history + [response]\n", "\n", "\n", "def handle_undo(history, undo_data: gr.UndoData):\n", "    return history[:undo_data.index], history[undo_data.index]['content']\n", "\n", "def handle_retry(history, retry_data: gr.RetryData):\n", "    new_history = history[:retry_data.index]\n", "    previous_prompt = history[retry_data.index]['content']\n", "    yield from respond(previous_prompt, new_history)\n", "\n", "\n", "def handle_like(data: gr.LikeData):\n", "    if data.liked:\n", "        print(\"You upvoted this response: \", data.value)\n", "    else:\n", "        print(\"You downvoted this response: \", data.value)\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(\"# Chat with Hugging Face Zephyr 7b \ud83e\udd17\")\n", "    chatbot = gr.Chatbot(\n", "        label=\"Agent\",\n", "        type=\"messages\",\n", "        avatar_images=(\n", "            None,\n", "            \"https://em-content.zobj.net/source/twitter/376/hugging-face_1f917.png\",\n", "        ),\n", "    )\n", "    prompt = gr.Textbox(max_lines=1, label=\"Chat Message\")\n", "    prompt.submit(respond, [prompt, chatbot], [chatbot])\n", "    prompt.submit(lambda: \"\", None, [prompt])\n", "    chatbot.undo(handle_undo, chatbot, [chatbot, prompt])\n", "    chatbot.retry(handle_retry, chatbot, [chatbot])\n", "    chatbot.like(handle_like, None, None)\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/chatbot_retry_undo_like/run.py b/demo/chatbot_retry_undo_like/run.py
new file mode 100644
index 0000000000000..5defaec383e7c
--- /dev/null
+++ b/demo/chatbot_retry_undo_like/run.py
@@ -0,0 +1,64 @@
+from huggingface_hub import InferenceClient
+import gradio as gr
+
+client = InferenceClient()
+
+def respond(
+    prompt: str,
+    history,
+):
+    if not history:
+        history = [{"role": "system", "content": "You are a friendly chatbot"}]
+    history.append({"role": "user", "content": prompt})
+
+    yield history
+
+    response = {"role": "assistant", "content": ""}
+    for message in client.chat_completion( # type: ignore
+        history,
+        temperature=0.95,
+        top_p=0.9,
+        max_tokens=512,
+        stream=True,
+        model="HuggingFaceH4/zephyr-7b-beta"
+    ):
+        response["content"] += message.choices[0].delta.content or ""
+        yield history + [response]
+
+
+def handle_undo(history, undo_data: gr.UndoData):
+    return history[:undo_data.index], history[undo_data.index]['content']
+
+def handle_retry(history, retry_data: gr.RetryData):
+    new_history = history[:retry_data.index]
+    previous_prompt = history[retry_data.index]['content']
+    yield from respond(previous_prompt, new_history)
+
+
+def handle_like(data: gr.LikeData):
+    if data.liked:
+        print("You upvoted this response: ", data.value)
+    else:
+        print("You downvoted this response: ", data.value)
+
+
+with gr.Blocks() as demo:
+    gr.Markdown("# Chat with Hugging Face Zephyr 7b 🤗")
+    chatbot = gr.Chatbot(
+        label="Agent",
+        type="messages",
+        avatar_images=(
+            None,
+            "https://em-content.zobj.net/source/twitter/376/hugging-face_1f917.png",
+        ),
+    )
+    prompt = gr.Textbox(max_lines=1, label="Chat Message")
+    prompt.submit(respond, [prompt, chatbot], [chatbot])
+    prompt.submit(lambda: "", None, [prompt])
+    chatbot.undo(handle_undo, chatbot, [chatbot, prompt])
+    chatbot.retry(handle_retry, chatbot, [chatbot])
+    chatbot.like(handle_like, None, None)
+
+
+if __name__ == "__main__":
+    demo.launch()
diff --git a/demo/chatbot_simple/run.ipynb b/demo/chatbot_simple/run.ipynb
index 9085788db1004..04839e78c6347 100644
--- a/demo/chatbot_simple/run.ipynb
+++ b/demo/chatbot_simple/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatbot_simple"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import random\n", "import time\n", "\n", "with gr.Blocks() as demo:\n", "    chatbot = gr.Chatbot()\n", "    msg = gr.Textbox()\n", "    clear = gr.ClearButton([msg, chatbot])\n", "\n", "    def respond(message, chat_history):\n", "        bot_message = random.choice([\"How are you?\", \"I love you\", \"I'm very hungry\"])\n", "        chat_history.append((message, bot_message))\n", "        time.sleep(2)\n", "        return \"\", chat_history\n", "\n", "    msg.submit(respond, [msg, chatbot], [msg, chatbot])\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatbot_simple"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import random\n", "import time\n", "\n", "with gr.Blocks() as demo:\n", "    chatbot = gr.Chatbot(type=\"messages\")\n", "    msg = gr.Textbox()\n", "    clear = gr.ClearButton([msg, chatbot])\n", "\n", "    def respond(message, chat_history):\n", "        bot_message = random.choice([\"How are you?\", \"Today is a great day\", \"I'm very hungry\"])\n", "        chat_history.append({\"role\": \"user\", \"content\": message})\n", "        chat_history.append({\"role\": \"assistant\", \"content\": bot_message})\n", "        time.sleep(2)\n", "        return \"\", chat_history\n", "\n", "    msg.submit(respond, [msg, chatbot], [msg, chatbot])\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/chatbot_simple/run.py b/demo/chatbot_simple/run.py
index 9344665c7332e..7fcdd00f467e8 100644
--- a/demo/chatbot_simple/run.py
+++ b/demo/chatbot_simple/run.py
@@ -3,13 +3,14 @@
 import time
 
 with gr.Blocks() as demo:
-    chatbot = gr.Chatbot()
+    chatbot = gr.Chatbot(type="messages")
     msg = gr.Textbox()
     clear = gr.ClearButton([msg, chatbot])
 
     def respond(message, chat_history):
-        bot_message = random.choice(["How are you?", "I love you", "I'm very hungry"])
-        chat_history.append((message, bot_message))
+        bot_message = random.choice(["How are you?", "Today is a great day", "I'm very hungry"])
+        chat_history.append({"role": "user", "content": message})
+        chat_history.append({"role": "assistant", "content": bot_message})
         time.sleep(2)
         return "", chat_history
 
diff --git a/demo/chatbot_streaming/run.ipynb b/demo/chatbot_streaming/run.ipynb
index 0ac39e6b04d7a..3f45e9bb42260 100644
--- a/demo/chatbot_streaming/run.ipynb
+++ b/demo/chatbot_streaming/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatbot_streaming"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/chatbot_streaming/testcase_messages.py"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import random\n", "import time\n", "\n", "with gr.Blocks() as demo:\n", "    chatbot = gr.Chatbot()\n", "    msg = gr.Textbox()\n", "    clear = gr.Button(\"Clear\")\n", "\n", "    def user(user_message, history):\n", "        return \"\", history + [[user_message, None]]\n", "\n", "    def bot(history):\n", "        bot_message = random.choice([\"How are you?\", \"I love you\", \"I'm very hungry\"])\n", "        history[-1][1] = \"\"\n", "        for character in bot_message:\n", "            history[-1][1] += character\n", "            time.sleep(0.05)\n", "            yield history\n", "\n", "    msg.submit(user, [msg, chatbot], [msg, chatbot], queue=False).then(\n", "        bot, chatbot, chatbot\n", "    )\n", "    clear.click(lambda: None, None, chatbot, queue=False)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatbot_streaming"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import random\n", "import time\n", "\n", "with gr.Blocks() as demo:\n", "    chatbot = gr.Chatbot(type=\"messages\")\n", "    msg = gr.Textbox()\n", "    clear = gr.Button(\"Clear\")\n", "\n", "    def user(user_message, history: list):\n", "        return \"\", history + [{\"role\": \"user\", \"content\": user_message}]\n", "\n", "    def bot(history: list):\n", "        bot_message = random.choice([\"How are you?\", \"I love you\", \"I'm very hungry\"])\n", "        history.append({\"role\": \"assistant\", \"content\": \"\"})\n", "        for character in bot_message:\n", "            history[-1]['content'] += character\n", "            time.sleep(0.05)\n", "            yield history\n", "\n", "    msg.submit(user, [msg, chatbot], [msg, chatbot], queue=False).then(\n", "        bot, chatbot, chatbot\n", "    )\n", "    clear.click(lambda: None, None, chatbot, queue=False)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/chatbot_streaming/run.py b/demo/chatbot_streaming/run.py
index 37a10c60c26a4..a38cd6cd27cfd 100644
--- a/demo/chatbot_streaming/run.py
+++ b/demo/chatbot_streaming/run.py
@@ -3,18 +3,18 @@
 import time
 
 with gr.Blocks() as demo:
-    chatbot = gr.Chatbot()
+    chatbot = gr.Chatbot(type="messages")
     msg = gr.Textbox()
     clear = gr.Button("Clear")
 
-    def user(user_message, history):
-        return "", history + [[user_message, None]]
+    def user(user_message, history: list):
+        return "", history + [{"role": "user", "content": user_message}]
 
-    def bot(history):
+    def bot(history: list):
         bot_message = random.choice(["How are you?", "I love you", "I'm very hungry"])
-        history[-1][1] = ""
+        history.append({"role": "assistant", "content": ""})
         for character in bot_message:
-            history[-1][1] += character
+            history[-1]['content'] += character
             time.sleep(0.05)
             yield history
 
diff --git a/demo/chatbot_streaming/testcase_messages.py b/demo/chatbot_streaming/testcase_messages.py
deleted file mode 100644
index a38cd6cd27cfd..0000000000000
--- a/demo/chatbot_streaming/testcase_messages.py
+++ /dev/null
@@ -1,27 +0,0 @@
-import gradio as gr
-import random
-import time
-
-with gr.Blocks() as demo:
-    chatbot = gr.Chatbot(type="messages")
-    msg = gr.Textbox()
-    clear = gr.Button("Clear")
-
-    def user(user_message, history: list):
-        return "", history + [{"role": "user", "content": user_message}]
-
-    def bot(history: list):
-        bot_message = random.choice(["How are you?", "I love you", "I'm very hungry"])
-        history.append({"role": "assistant", "content": ""})
-        for character in bot_message:
-            history[-1]['content'] += character
-            time.sleep(0.05)
-            yield history
-
-    msg.submit(user, [msg, chatbot], [msg, chatbot], queue=False).then(
-        bot, chatbot, chatbot
-    )
-    clear.click(lambda: None, None, chatbot, queue=False)
-
-if __name__ == "__main__":
-    demo.launch()
diff --git a/demo/chatinterface_multimodal/files/avatar.png b/demo/chatinterface_multimodal/files/avatar.png
new file mode 100644
index 0000000000000..8f1df7156f0a6
Binary files /dev/null and b/demo/chatinterface_multimodal/files/avatar.png differ
diff --git a/demo/chatinterface_multimodal/files/cantina.wav b/demo/chatinterface_multimodal/files/cantina.wav
new file mode 100644
index 0000000000000..41f0204384682
Binary files /dev/null and b/demo/chatinterface_multimodal/files/cantina.wav differ
diff --git a/demo/chatinterface_multimodal/run.ipynb b/demo/chatinterface_multimodal/run.ipynb
index 469651b5ea9c5..5b8f0148ca98b 100644
--- a/demo/chatinterface_multimodal/run.ipynb
+++ b/demo/chatinterface_multimodal/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatinterface_multimodal"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "def echo(message, history):\n", "    return message[\"text\"]\n", "\n", "demo = gr.ChatInterface(\n", "    fn=echo,\n", "    examples=[{\"text\": \"hello\"}, {\"text\": \"hola\"}, {\"text\": \"merhaba\"}],\n", "    title=\"Echo Bot\",\n", "    multimodal=True,\n", ")\n", "demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatinterface_multimodal"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('files')\n", "!wget -q -O files/avatar.png https://github.com/gradio-app/gradio/raw/main/demo/chatinterface_multimodal/files/avatar.png\n", "!wget -q -O files/cantina.wav https://github.com/gradio-app/gradio/raw/main/demo/chatinterface_multimodal/files/cantina.wav"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "def echo(message, history):\n", "    return message[\"text\"]\n", "\n", "demo = gr.ChatInterface(\n", "    fn=echo,\n", "    type=\"messages\",\n", "    examples=[{\"text\": \"hello\"}, {\"text\": \"hola\"}, {\"text\": \"merhaba\"}],\n", "    title=\"Echo Bot\",\n", "    multimodal=True,\n", ")\n", "demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/chatinterface_multimodal/run.py b/demo/chatinterface_multimodal/run.py
index cc4285fd8adf7..65d5925faa6e0 100644
--- a/demo/chatinterface_multimodal/run.py
+++ b/demo/chatinterface_multimodal/run.py
@@ -5,6 +5,7 @@ def echo(message, history):
 
 demo = gr.ChatInterface(
     fn=echo,
+    type="messages",
     examples=[{"text": "hello"}, {"text": "hola"}, {"text": "merhaba"}],
     title="Echo Bot",
     multimodal=True,
diff --git a/demo/chatinterface_random_response/run.ipynb b/demo/chatinterface_random_response/run.ipynb
index dd95ecee051e2..ef4bb5efc029b 100644
--- a/demo/chatinterface_random_response/run.ipynb
+++ b/demo/chatinterface_random_response/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatinterface_random_response"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import random\n", "import gradio as gr\n", "\n", "def random_response(message, history):\n", "    return random.choice([\"Yes\", \"No\"])\n", "\n", "demo = gr.ChatInterface(random_response)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatinterface_random_response"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import random\n", "import gradio as gr\n", "\n", "def random_response(message, history):\n", "    return random.choice([\"Yes\", \"No\"])\n", "\n", "demo = gr.ChatInterface(random_response, type=\"messages\")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/chatinterface_random_response/run.py b/demo/chatinterface_random_response/run.py
index 5b060926e1ca2..5640d04b327bb 100644
--- a/demo/chatinterface_random_response/run.py
+++ b/demo/chatinterface_random_response/run.py
@@ -4,7 +4,7 @@
 def random_response(message, history):
     return random.choice(["Yes", "No"])
 
-demo = gr.ChatInterface(random_response)
+demo = gr.ChatInterface(random_response, type="messages")
 
 if __name__ == "__main__":
     demo.launch()
diff --git a/demo/chatinterface_streaming_echo/messages_testcase.py b/demo/chatinterface_streaming_echo/messages_testcase.py
deleted file mode 100644
index 6e87b7dcc0759..0000000000000
--- a/demo/chatinterface_streaming_echo/messages_testcase.py
+++ /dev/null
@@ -1,12 +0,0 @@
-import time
-import gradio as gr
-
-def slow_echo(message, history):
-    for i in range(len(message)):
-        time.sleep(0.05)
-        yield "You typed: " + message[: i + 1]
-
-demo = gr.ChatInterface(slow_echo, type="messages")
-
-if __name__ == "__main__":
-    demo.launch()
diff --git a/demo/chatinterface_streaming_echo/run.ipynb b/demo/chatinterface_streaming_echo/run.ipynb
index 43d310e0cdb69..d077e6dcccf98 100644
--- a/demo/chatinterface_streaming_echo/run.ipynb
+++ b/demo/chatinterface_streaming_echo/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatinterface_streaming_echo"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/chatinterface_streaming_echo/messages_testcase.py"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import time\n", "import gradio as gr\n", "\n", "def slow_echo(message, history):\n", "    for i in range(len(message)):\n", "        time.sleep(0.05)\n", "        yield \"You typed: \" + message[: i + 1]\n", "\n", "demo = gr.ChatInterface(slow_echo)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatinterface_streaming_echo"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import time\n", "import gradio as gr\n", "\n", "def slow_echo(message, history):\n", "    for i in range(len(message)):\n", "        time.sleep(0.05)\n", "        yield \"You typed: \" + message[: i + 1]\n", "\n", "demo = gr.ChatInterface(slow_echo, type=\"messages\")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/chatinterface_streaming_echo/run.py b/demo/chatinterface_streaming_echo/run.py
index 7b5d9bcb11778..6e87b7dcc0759 100644
--- a/demo/chatinterface_streaming_echo/run.py
+++ b/demo/chatinterface_streaming_echo/run.py
@@ -6,7 +6,7 @@ def slow_echo(message, history):
         time.sleep(0.05)
         yield "You typed: " + message[: i + 1]
 
-demo = gr.ChatInterface(slow_echo)
+demo = gr.ChatInterface(slow_echo, type="messages")
 
 if __name__ == "__main__":
     demo.launch()
diff --git a/demo/chatinterface_system_prompt/run.ipynb b/demo/chatinterface_system_prompt/run.ipynb
index d6b62ddf986b6..514d69cfa1c9b 100644
--- a/demo/chatinterface_system_prompt/run.ipynb
+++ b/demo/chatinterface_system_prompt/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatinterface_system_prompt"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import time\n", "\n", "def echo(message, history, system_prompt, tokens):\n", "    response = f\"System prompt: {system_prompt}\\n Message: {message}.\"\n", "    for i in range(min(len(response), int(tokens))):\n", "        time.sleep(0.05)\n", "        yield response[: i + 1]\n", "\n", "demo = gr.ChatInterface(\n", "    echo,\n", "    additional_inputs=[\n", "        gr.Textbox(\"You are helpful AI.\", label=\"System Prompt\"),\n", "        gr.Slider(10, 100),\n", "    ],\n", ")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatinterface_system_prompt"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import time\n", "\n", "def echo(message, history, system_prompt, tokens):\n", "    response = f\"System prompt: {system_prompt}\\n Message: {message}.\"\n", "    for i in range(min(len(response), int(tokens))):\n", "        time.sleep(0.05)\n", "        yield response[: i + 1]\n", "\n", "demo = gr.ChatInterface(\n", "    echo,\n", "    type=\"messages\",\n", "    additional_inputs=[\n", "        gr.Textbox(\"You are helpful AI.\", label=\"System Prompt\"),\n", "        gr.Slider(10, 100),\n", "    ],\n", ")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/chatinterface_system_prompt/run.py b/demo/chatinterface_system_prompt/run.py
index ce824d71c6961..f74320ac6e180 100644
--- a/demo/chatinterface_system_prompt/run.py
+++ b/demo/chatinterface_system_prompt/run.py
@@ -9,6 +9,7 @@ def echo(message, history, system_prompt, tokens):
 
 demo = gr.ChatInterface(
     echo,
+    type="messages",
     additional_inputs=[
         gr.Textbox("You are helpful AI.", label="System Prompt"),
         gr.Slider(10, 100),
diff --git a/demo/chicago-bikeshare-dashboard/requirements.txt b/demo/chicago-bikeshare-dashboard/requirements.txt
index aa9de6427ec58..5facfef0cc151 100644
--- a/demo/chicago-bikeshare-dashboard/requirements.txt
+++ b/demo/chicago-bikeshare-dashboard/requirements.txt
@@ -1,3 +1,4 @@
 psycopg2
 matplotlib
 SQLAlchemy
+pandas
diff --git a/demo/chicago-bikeshare-dashboard/run.ipynb b/demo/chicago-bikeshare-dashboard/run.ipynb
index fab526fa16def..4b4b7e3bfc55f 100644
--- a/demo/chicago-bikeshare-dashboard/run.ipynb
+++ b/demo/chicago-bikeshare-dashboard/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chicago-bikeshare-dashboard"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio psycopg2 matplotlib SQLAlchemy "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import os\n", "import gradio as gr\n", "import pandas as pd\n", "\n", "DB_USER = os.getenv(\"DB_USER\")\n", "DB_PASSWORD = os.getenv(\"DB_PASSWORD\")\n", "DB_HOST = os.getenv(\"DB_HOST\")\n", "PORT = 8080\n", "DB_NAME = \"bikeshare\"\n", "\n", "connection_string = (\n", "    f\"postgresql://{DB_USER}:{DB_PASSWORD}@{DB_HOST}?port={PORT}&dbname={DB_NAME}\"\n", ")\n", "\n", "def get_count_ride_type():\n", "    df = pd.read_sql(\n", "        \"\"\"\n", "        SELECT COUNT(ride_id) as n, rideable_type\n", "        FROM rides\n", "        GROUP BY rideable_type\n", "        ORDER BY n DESC\n", "    \"\"\",\n", "        con=connection_string,\n", "    )\n", "    return df\n", "\n", "def get_most_popular_stations():\n", "\n", "    df = pd.read_sql(\n", "        \"\"\"\n", "    SELECT COUNT(ride_id) as n, MAX(start_station_name) as station\n", "    FROM RIDES\n", "    WHERE start_station_name is NOT NULL\n", "    GROUP BY start_station_id\n", "    ORDER BY n DESC\n", "    LIMIT 5\n", "    \"\"\",\n", "        con=connection_string,\n", "    )\n", "    return df\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(\n", "        \"\"\"\n", "    # Chicago Bike Share Dashboard\n", "    \n", "    This demo pulls Chicago bike share data for March 2022 from a postgresql database hosted on AWS.\n", "    This demo uses psycopg2 but any postgresql client library (SQLAlchemy)\n", "    is compatible with gradio.\n", "    \n", "    Connection credentials are handled by environment variables\n", "    defined as secrets in the Space.\n", "\n", "    If data were added to the database, the plots in this demo would update\n", "    whenever the webpage is reloaded.\n", "    \n", "    This demo serves as a starting point for your database-connected apps!\n", "    \"\"\"\n", "    )\n", "    with gr.Row():\n", "        bike_type = gr.BarPlot(\n", "            x=\"rideable_type\",\n", "            y='n',\n", "            title=\"Number of rides per bicycle type\",\n", "            y_title=\"Number of Rides\",\n", "            x_title=\"Bicycle Type\",\n", "            vertical=False,\n", "            tooltip=['rideable_type', \"n\"],\n", "            height=300,\n", "            width=300,\n", "        )\n", "        station = gr.BarPlot(\n", "            x='station',\n", "            y='n',\n", "            title=\"Most Popular Stations\",\n", "            y_title=\"Number of Rides\",\n", "            x_title=\"Station Name\",\n", "            vertical=False,\n", "            tooltip=['station', 'n'],\n", "            height=300,\n", "            width=300\n", "        )\n", "\n", "    demo.load(get_count_ride_type, inputs=None, outputs=bike_type)\n", "    demo.load(get_most_popular_stations, inputs=None, outputs=station)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chicago-bikeshare-dashboard"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio psycopg2 matplotlib SQLAlchemy pandas "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import os\n", "import gradio as gr\n", "import pandas as pd\n", "\n", "DB_USER = os.getenv(\"DB_USER\")\n", "DB_PASSWORD = os.getenv(\"DB_PASSWORD\")\n", "DB_HOST = os.getenv(\"DB_HOST\")\n", "PORT = 8080\n", "DB_NAME = \"bikeshare\"\n", "\n", "connection_string = (\n", "    f\"postgresql://{DB_USER}:{DB_PASSWORD}@{DB_HOST}?port={PORT}&dbname={DB_NAME}\"\n", ")\n", "\n", "def get_count_ride_type():\n", "    df = pd.read_sql(\n", "        \"\"\"\n", "        SELECT COUNT(ride_id) as n, rideable_type\n", "        FROM rides\n", "        GROUP BY rideable_type\n", "        ORDER BY n DESC\n", "    \"\"\",\n", "        con=connection_string,\n", "    )\n", "    return df\n", "\n", "def get_most_popular_stations():\n", "\n", "    df = pd.read_sql(\n", "        \"\"\"\n", "    SELECT COUNT(ride_id) as n, MAX(start_station_name) as station\n", "    FROM RIDES\n", "    WHERE start_station_name is NOT NULL\n", "    GROUP BY start_station_id\n", "    ORDER BY n DESC\n", "    LIMIT 5\n", "    \"\"\",\n", "        con=connection_string,\n", "    )\n", "    return df\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(\n", "        \"\"\"\n", "    # Chicago Bike Share Dashboard\n", "    \n", "    This demo pulls Chicago bike share data for March 2022 from a postgresql database hosted on AWS.\n", "    This demo uses psycopg2 but any postgresql client library (SQLAlchemy)\n", "    is compatible with gradio.\n", "    \n", "    Connection credentials are handled by environment variables\n", "    defined as secrets in the Space.\n", "\n", "    If data were added to the database, the plots in this demo would update\n", "    whenever the webpage is reloaded.\n", "    \n", "    This demo serves as a starting point for your database-connected apps!\n", "    \"\"\"\n", "    )\n", "    with gr.Row():\n", "        bike_type = gr.BarPlot(\n", "            x=\"rideable_type\",\n", "            y='n',\n", "            title=\"Number of rides per bicycle type\",\n", "            y_title=\"Number of Rides\",\n", "            x_title=\"Bicycle Type\",\n", "            vertical=False,\n", "            tooltip=['rideable_type', \"n\"],\n", "            height=300,\n", "            width=300,\n", "        )\n", "        station = gr.BarPlot(\n", "            x='station',\n", "            y='n',\n", "            title=\"Most Popular Stations\",\n", "            y_title=\"Number of Rides\",\n", "            x_title=\"Station Name\",\n", "            vertical=False,\n", "            tooltip=['station', 'n'],\n", "            height=300,\n", "            width=300\n", "        )\n", "\n", "    demo.load(get_count_ride_type, inputs=None, outputs=bike_type)\n", "    demo.load(get_most_popular_stations, inputs=None, outputs=station)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/clear_components/requirements.txt b/demo/clear_components/requirements.txt
new file mode 100644
index 0000000000000..402187013ab1e
--- /dev/null
+++ b/demo/clear_components/requirements.txt
@@ -0,0 +1,3 @@
+numpy
+pandas
+matplotlib
diff --git a/demo/clear_components/run.ipynb b/demo/clear_components/run.ipynb
index 1a5e2761288f5..a447c537a1b40 100644
--- a/demo/clear_components/run.ipynb
+++ b/demo/clear_components/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: clear_components"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/clear_components/__init__.py"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from datetime import datetime\n", "import os\n", "import random\n", "import string\n", "import pandas as pd\n", "\n", "import numpy as np\n", "import matplotlib.pyplot as plt\n", "\n", "def random_plot():\n", "    start_year = 2020\n", "    x = np.arange(start_year, start_year + 5)\n", "    year_count = x.shape[0]\n", "    plt_format = \"-\"\n", "    fig = plt.figure()\n", "    ax = fig.add_subplot(111)\n", "    series = np.arange(0, year_count, dtype=float)\n", "    series = series**2\n", "    series += np.random.rand(year_count)\n", "    ax.plot(x, series, plt_format)\n", "    return fig\n", "\n", "images = [\n", "    \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80\",\n", "    \"https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=386&q=80\",\n", "    \"https://images.unsplash.com/photo-1542909168-82c3e7fdca5c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW4lMjBmYWNlfGVufDB8fDB8fA%3D%3D&w=1000&q=80\",\n", "]\n", "file_dir = os.path.join(os.path.abspath(''), \"..\", \"kitchen_sink\", \"files\")\n", "model3d_dir = os.path.join(os.path.abspath(''), \"..\", \"model3D\", \"files\")\n", "highlighted_text_output_1 = [\n", "    {\n", "        \"entity\": \"I-LOC\",\n", "        \"score\": 0.9988978,\n", "        \"index\": 2,\n", "        \"word\": \"Chicago\",\n", "        \"start\": 5,\n", "        \"end\": 12,\n", "    },\n", "    {\n", "        \"entity\": \"I-MISC\",\n", "        \"score\": 0.9958592,\n", "        \"index\": 5,\n", "        \"word\": \"Pakistani\",\n", "        \"start\": 22,\n", "        \"end\": 31,\n", "    },\n", "]\n", "highlighted_text_output_2 = [\n", "    {\n", "        \"entity\": \"I-LOC\",\n", "        \"score\": 0.9988978,\n", "        \"index\": 2,\n", "        \"word\": \"Chicago\",\n", "        \"start\": 5,\n", "        \"end\": 12,\n", "    },\n", "    {\n", "        \"entity\": \"I-LOC\",\n", "        \"score\": 0.9958592,\n", "        \"index\": 5,\n", "        \"word\": \"Pakistan\",\n", "        \"start\": 22,\n", "        \"end\": 30,\n", "    },\n", "]\n", "\n", "highlighted_text = \"Does Chicago have any Pakistani restaurants\"\n", "\n", "def random_model3d():\n", "    model_3d = random.choice(\n", "        [os.path.join(model3d_dir, model) for model in os.listdir(model3d_dir) if model != \"source.txt\"]\n", "    )\n", "    return model_3d\n", "\n", "components = [\n", "    gr.Textbox(value=lambda: datetime.now(), label=\"Current Time\"),\n", "    gr.Number(value=lambda: random.random(), label=\"Random Percentage\"),\n", "    gr.Slider(minimum=0, maximum=100, randomize=True, label=\"Slider with randomize\"),\n", "    gr.Slider(\n", "        minimum=0,\n", "        maximum=1,\n", "        value=lambda: random.random(),\n", "        label=\"Slider with value func\",\n", "    ),\n", "    gr.Checkbox(value=lambda: random.random() > 0.5, label=\"Random Checkbox\"),\n", "    gr.CheckboxGroup(\n", "        choices=[\"a\", \"b\", \"c\", \"d\"],\n", "        value=lambda: random.choice([\"a\", \"b\", \"c\", \"d\"]),\n", "        label=\"Random CheckboxGroup\",\n", "    ),\n", "    gr.Radio(\n", "        choices=list(string.ascii_lowercase),\n", "        value=lambda: random.choice(string.ascii_lowercase),\n", "    ),\n", "    gr.Dropdown(\n", "        choices=[\"a\", \"b\", \"c\", \"d\", \"e\"],\n", "        value=lambda: random.choice([\"a\", \"b\", \"c\"]),\n", "    ),\n", "    gr.Image(\n", "        value=lambda: random.choice(images)\n", "    ),\n", "    gr.Video(value=lambda: os.path.join(file_dir, \"world.mp4\")),\n", "    gr.Audio(value=lambda: os.path.join(file_dir, \"cantina.wav\")),\n", "    gr.File(\n", "        value=lambda: random.choice(\n", "            [os.path.join(file_dir, img) for img in os.listdir(file_dir)]\n", "        )\n", "    ),\n", "    gr.Dataframe(\n", "        value=lambda: pd.DataFrame({\"random_number_rows\": range(5)}, columns=[\"one\", \"two\", \"three\"])  # type: ignore\n", "    ),\n", "    gr.ColorPicker(value=lambda: random.choice([\"#000000\", \"#ff0000\", \"#0000FF\"])),\n", "    gr.Label(value=lambda: random.choice([\"Pedestrian\", \"Car\", \"Cyclist\"])),\n", "    gr.HighlightedText(\n", "        value=lambda: random.choice(\n", "            [\n", "                {\"text\": highlighted_text, \"entities\": highlighted_text_output_1},\n", "                {\"text\": highlighted_text, \"entities\": highlighted_text_output_2},\n", "            ]\n", "        ),\n", "    ),\n", "    gr.JSON(value=lambda: random.choice([{\"a\": 1}, {\"b\": 2}])),\n", "    gr.HTML(\n", "        value=lambda: random.choice(\n", "            [\n", "                '<p style=\"color:red;\">I am red</p>',\n", "                '<p style=\"color:blue;\">I am blue</p>',\n", "            ]\n", "        )\n", "    ),\n", "    gr.Gallery(\n", "        value=lambda: images\n", "    ),\n", "    gr.Model3D(value=random_model3d),\n", "    gr.Plot(value=random_plot),\n", "    gr.Markdown(value=lambda: f\"### {random.choice(['Hello', 'Hi', 'Goodbye!'])}\"),\n", "]\n", "\n", "def evaluate_values(*args):\n", "    are_false = []\n", "    for a in args:\n", "        if isinstance(a, (pd.DataFrame, np.ndarray)):\n", "            are_false.append(not a.any().any())  # type: ignore\n", "        elif isinstance(a, str) and a.startswith(\"#\"):\n", "            are_false.append(a == \"#000000\")\n", "        else:\n", "            are_false.append(not a)\n", "    return all(are_false)\n", "\n", "with gr.Blocks() as demo:\n", "    for i, component in enumerate(components):\n", "        component.label = f\"component_{str(i).zfill(2)}\"\n", "        component.render()\n", "    clear = gr.ClearButton(value=\"Clear\", components=components)\n", "    result = gr.Textbox(label=\"Are all cleared?\")\n", "    hide = gr.Button(value=\"Hide\")\n", "    reveal = gr.Button(value=\"Reveal\")\n", "    clear_button_and_components = components + [clear]\n", "    hide.click(\n", "        lambda: [c.__class__(visible=False) for c in clear_button_and_components],\n", "        inputs=[],\n", "        outputs=clear_button_and_components\n", "    )\n", "    reveal.click(\n", "        lambda: [c.__class__(visible=True) for c in clear_button_and_components],\n", "        inputs=[],\n", "        outputs=clear_button_and_components\n", "    )\n", "    get_value = gr.Button(value=\"Get Values\")\n", "    get_value.click(evaluate_values, components, result)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: clear_components"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy pandas matplotlib "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/clear_components/__init__.py"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from datetime import datetime\n", "import os\n", "import random\n", "import string\n", "import pandas as pd\n", "\n", "import numpy as np\n", "import matplotlib.pyplot as plt\n", "\n", "def random_plot():\n", "    start_year = 2020\n", "    x = np.arange(start_year, start_year + 5)\n", "    year_count = x.shape[0]\n", "    plt_format = \"-\"\n", "    fig = plt.figure()\n", "    ax = fig.add_subplot(111)\n", "    series = np.arange(0, year_count, dtype=float)\n", "    series = series**2\n", "    series += np.random.rand(year_count)\n", "    ax.plot(x, series, plt_format)\n", "    return fig\n", "\n", "images = [\n", "    \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80\",\n", "    \"https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=386&q=80\",\n", "    \"https://images.unsplash.com/photo-1542909168-82c3e7fdca5c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW4lMjBmYWNlfGVufDB8fDB8fA%3D%3D&w=1000&q=80\",\n", "]\n", "file_dir = os.path.join(os.path.abspath(''), \"..\", \"kitchen_sink\", \"files\")\n", "model3d_dir = os.path.join(os.path.abspath(''), \"..\", \"model3D\", \"files\")\n", "highlighted_text_output_1 = [\n", "    {\n", "        \"entity\": \"I-LOC\",\n", "        \"score\": 0.9988978,\n", "        \"index\": 2,\n", "        \"word\": \"Chicago\",\n", "        \"start\": 5,\n", "        \"end\": 12,\n", "    },\n", "    {\n", "        \"entity\": \"I-MISC\",\n", "        \"score\": 0.9958592,\n", "        \"index\": 5,\n", "        \"word\": \"Pakistani\",\n", "        \"start\": 22,\n", "        \"end\": 31,\n", "    },\n", "]\n", "highlighted_text_output_2 = [\n", "    {\n", "        \"entity\": \"I-LOC\",\n", "        \"score\": 0.9988978,\n", "        \"index\": 2,\n", "        \"word\": \"Chicago\",\n", "        \"start\": 5,\n", "        \"end\": 12,\n", "    },\n", "    {\n", "        \"entity\": \"I-LOC\",\n", "        \"score\": 0.9958592,\n", "        \"index\": 5,\n", "        \"word\": \"Pakistan\",\n", "        \"start\": 22,\n", "        \"end\": 30,\n", "    },\n", "]\n", "\n", "highlighted_text = \"Does Chicago have any Pakistani restaurants\"\n", "\n", "def random_model3d():\n", "    model_3d = random.choice(\n", "        [os.path.join(model3d_dir, model) for model in os.listdir(model3d_dir) if model != \"source.txt\"]\n", "    )\n", "    return model_3d\n", "\n", "components = [\n", "    gr.Textbox(value=lambda: datetime.now(), label=\"Current Time\"),\n", "    gr.Number(value=lambda: random.random(), label=\"Random Percentage\"),\n", "    gr.Slider(minimum=0, maximum=100, randomize=True, label=\"Slider with randomize\"),\n", "    gr.Slider(\n", "        minimum=0,\n", "        maximum=1,\n", "        value=lambda: random.random(),\n", "        label=\"Slider with value func\",\n", "    ),\n", "    gr.Checkbox(value=lambda: random.random() > 0.5, label=\"Random Checkbox\"),\n", "    gr.CheckboxGroup(\n", "        choices=[\"a\", \"b\", \"c\", \"d\"],\n", "        value=lambda: random.choice([\"a\", \"b\", \"c\", \"d\"]),\n", "        label=\"Random CheckboxGroup\",\n", "    ),\n", "    gr.Radio(\n", "        choices=list(string.ascii_lowercase),\n", "        value=lambda: random.choice(string.ascii_lowercase),\n", "    ),\n", "    gr.Dropdown(\n", "        choices=[\"a\", \"b\", \"c\", \"d\", \"e\"],\n", "        value=lambda: random.choice([\"a\", \"b\", \"c\"]),\n", "    ),\n", "    gr.Image(\n", "        value=lambda: random.choice(images)\n", "    ),\n", "    gr.Video(value=lambda: os.path.join(file_dir, \"world.mp4\")),\n", "    gr.Audio(value=lambda: os.path.join(file_dir, \"cantina.wav\")),\n", "    gr.File(\n", "        value=lambda: random.choice(\n", "            [os.path.join(file_dir, img) for img in os.listdir(file_dir)]\n", "        )\n", "    ),\n", "    gr.Dataframe(\n", "        value=lambda: pd.DataFrame({\"random_number_rows\": range(5)}, columns=[\"one\", \"two\", \"three\"])  # type: ignore\n", "    ),\n", "    gr.ColorPicker(value=lambda: random.choice([\"#000000\", \"#ff0000\", \"#0000FF\"])),\n", "    gr.Label(value=lambda: random.choice([\"Pedestrian\", \"Car\", \"Cyclist\"])),\n", "    gr.HighlightedText(\n", "        value=lambda: random.choice(\n", "            [\n", "                {\"text\": highlighted_text, \"entities\": highlighted_text_output_1},\n", "                {\"text\": highlighted_text, \"entities\": highlighted_text_output_2},\n", "            ]\n", "        ),\n", "    ),\n", "    gr.JSON(value=lambda: random.choice([{\"a\": 1}, {\"b\": 2}])),\n", "    gr.HTML(\n", "        value=lambda: random.choice(\n", "            [\n", "                '<p style=\"color:red;\">I am red</p>',\n", "                '<p style=\"color:blue;\">I am blue</p>',\n", "            ]\n", "        )\n", "    ),\n", "    gr.Gallery(\n", "        value=lambda: images\n", "    ),\n", "    gr.Model3D(value=random_model3d),\n", "    gr.Plot(value=random_plot),\n", "    gr.Markdown(value=lambda: f\"### {random.choice(['Hello', 'Hi', 'Goodbye!'])}\"),\n", "]\n", "\n", "def evaluate_values(*args):\n", "    are_false = []\n", "    for a in args:\n", "        if isinstance(a, (pd.DataFrame, np.ndarray)):\n", "            are_false.append(not a.any().any())  # type: ignore\n", "        elif isinstance(a, str) and a.startswith(\"#\"):\n", "            are_false.append(a == \"#000000\")\n", "        else:\n", "            are_false.append(not a)\n", "    return all(are_false)\n", "\n", "with gr.Blocks() as demo:\n", "    for i, component in enumerate(components):\n", "        component.label = f\"component_{str(i).zfill(2)}\"\n", "        component.render()\n", "    clear = gr.ClearButton(value=\"Clear\", components=components)\n", "    result = gr.Textbox(label=\"Are all cleared?\")\n", "    hide = gr.Button(value=\"Hide\")\n", "    reveal = gr.Button(value=\"Reveal\")\n", "    clear_button_and_components = components + [clear]\n", "    hide.click(\n", "        lambda: [c.__class__(visible=False) for c in clear_button_and_components],\n", "        inputs=[],\n", "        outputs=clear_button_and_components\n", "    )\n", "    reveal.click(\n", "        lambda: [c.__class__(visible=True) for c in clear_button_and_components],\n", "        inputs=[],\n", "        outputs=clear_button_and_components\n", "    )\n", "    get_value = gr.Button(value=\"Get Values\")\n", "    get_value.click(evaluate_values, components, result)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/code/run.ipynb b/demo/code/run.ipynb
index d3339171907cf..e7daf42b04a66 100644
--- a/demo/code/run.ipynb
+++ b/demo/code/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: code"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/code/file.css"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import os\n", "from time import sleep\n", "\n", "css_file = os.path.join(os.path.abspath(''), \"file.css\")\n", "\n", "def set_lang(language):\n", "    print(language)\n", "    return gr.Code(language=language)\n", "\n", "def set_lang_from_path():\n", "    sleep(1)\n", "    return gr.Code((css_file,), language=\"css\")\n", "\n", "def code(language, code):\n", "    return gr.Code(code, language=language)\n", "\n", "io = gr.Interface(lambda x: x, \"code\", \"code\")\n", "\n", "with gr.Blocks() as demo:\n", "    lang = gr.Dropdown(value=\"python\", choices=gr.Code.languages)\n", "    with gr.Row():\n", "        code_in = gr.Code(\n", "            language=\"python\",\n", "            label=\"Input\",\n", "            value='def all_odd_elements(sequence):\\n    \"\"\"Returns every odd element of the sequence.\"\"\"',\n", "        )\n", "        code_out = gr.Code(label=\"Output\")\n", "    btn = gr.Button(\"Run\")\n", "    btn_two = gr.Button(\"Load File\")\n", "\n", "    lang.change(set_lang, inputs=lang, outputs=code_in)\n", "    btn.click(code, inputs=[lang, code_in], outputs=code_out)\n", "    btn_two.click(set_lang_from_path, inputs=None, outputs=code_out)\n", "    io.render()\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: code"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/code/file.css"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import os\n", "from time import sleep\n", "\n", "css_file = os.path.join(os.path.abspath(''), \"file.css\")\n", "\n", "def set_lang(language):\n", "    print(language)\n", "    return gr.Code(language=language)\n", "\n", "def set_lang_from_path():\n", "    sleep(1)\n", "    return gr.Code(open(css_file).read(), language=\"css\")\n", "\n", "def code(language, code):\n", "    return gr.Code(code, language=language)\n", "\n", "io = gr.Interface(lambda x: x, \"code\", \"code\")\n", "\n", "with gr.Blocks() as demo:\n", "    lang = gr.Dropdown(value=\"python\", choices=gr.Code.languages)\n", "    with gr.Row():\n", "        code_in = gr.Code(\n", "            language=\"python\",\n", "            label=\"Input\",\n", "            value='def all_odd_elements(sequence):\\n    \"\"\"Returns every odd element of the sequence.\"\"\"',\n", "        )\n", "        code_out = gr.Code(label=\"Output\")\n", "    btn = gr.Button(\"Run\")\n", "    btn_two = gr.Button(\"Load File\")\n", "\n", "    lang.change(set_lang, inputs=lang, outputs=code_in)\n", "    btn.click(code, inputs=[lang, code_in], outputs=code_out)\n", "    btn_two.click(set_lang_from_path, inputs=None, outputs=code_out)\n", "    io.render()\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/code/run.py b/demo/code/run.py
index 2e0156bb9ec01..03cbad845295d 100644
--- a/demo/code/run.py
+++ b/demo/code/run.py
@@ -10,7 +10,7 @@ def set_lang(language):
 
 def set_lang_from_path():
     sleep(1)
-    return gr.Code((css_file,), language="css")
+    return gr.Code(open(css_file).read(), language="css")
 
 def code(language, code):
     return gr.Code(code, language=language)
diff --git a/demo/dashboard/requirements.txt b/demo/dashboard/requirements.txt
index d42d0ad03bdf8..b68957b9f62af 100644
--- a/demo/dashboard/requirements.txt
+++ b/demo/dashboard/requirements.txt
@@ -1 +1,2 @@
-plotly
\ No newline at end of file
+plotly
+pandas
diff --git a/demo/dashboard/run.ipynb b/demo/dashboard/run.ipynb
index 0b92a9368b858..eb1cddd198878 100644
--- a/demo/dashboard/run.ipynb
+++ b/demo/dashboard/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: dashboard\n", "### This demo shows how you can build an interactive dashboard with gradio. Click on a python library on the left hand side and then on the right hand side click on the metric you'd like to see plot over time. Data is pulled from HuggingFace Hub datasets.\n", "        "]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio plotly"]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/dashboard/helpers.py"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import pandas as pd\n", "import plotly.express as px\n", "from helpers import retrieve_pip_installs, retrieve_stars, retrieve_issues\n", "\n", "LIBRARIES = [\"accelerate\", \"datasets\", \"diffusers\", \"evaluate\", \"gradio\", \"hub_docs\",\n", "             \"huggingface_hub\", \"optimum\", \"pytorch_image_models\", \"tokenizers\", \"transformers\"]\n", "\n", "def create_pip_plot(libraries, pip_choices):\n", "    if \"Pip\" not in pip_choices:\n", "        return gr.Plot(visible=False)\n", "    output = retrieve_pip_installs(libraries, \"Cumulated\" in pip_choices)\n", "    df = pd.DataFrame(output).melt(id_vars=\"day\")\n", "    plot = px.line(df, x=\"day\", y=\"value\", color=\"variable\",\n", "                   title=\"Pip installs\")\n", "    plot.update_layout(legend=dict(x=0.5, y=0.99),  title_x=0.5, legend_title_text=\"\")\n", "    return gr.Plot(value=plot, visible=True)\n", "\n", "def create_star_plot(libraries, star_choices):\n", "    if \"Stars\" not in star_choices:\n", "        return gr.Plot(visible=False)\n", "    output = retrieve_stars(libraries, \"Week over Week\" in star_choices)\n", "    df = pd.DataFrame(output).melt(id_vars=\"day\")\n", "    plot = px.line(df, x=\"day\", y=\"value\", color=\"variable\",\n", "                   title=\"Number of stargazers\")\n", "    plot.update_layout(legend=dict(x=0.5, y=0.99),  title_x=0.5, legend_title_text=\"\")\n", "    return gr.Plot(value=plot, visible=True)\n", "\n", "def create_issue_plot(libraries, issue_choices):\n", "    if \"Issue\" not in issue_choices:\n", "        return gr.Plot(visible=False)\n", "    output = retrieve_issues(libraries,\n", "                             exclude_org_members=\"Exclude org members\" in issue_choices,\n", "                             week_over_week=\"Week over Week\" in issue_choices)\n", "    df = pd.DataFrame(output).melt(id_vars=\"day\")\n", "    plot = px.line(df, x=\"day\", y=\"value\", color=\"variable\",\n", "                   title=\"Cumulated number of issues, PRs, and comments\",\n", "                   )\n", "    plot.update_layout(legend=dict(x=0.5, y=0.99),  title_x=0.5, legend_title_text=\"\")\n", "    return gr.Plot(value=plot, visible=True)\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        with gr.Column():\n", "            gr.Markdown(\"## Select libraries to display\")\n", "            libraries = gr.CheckboxGroup(choices=LIBRARIES, show_label=False)\n", "        with gr.Column():\n", "            gr.Markdown(\"## Select graphs to display\")\n", "            pip = gr.CheckboxGroup(choices=[\"Pip\", \"Cumulated\"], show_label=False)\n", "            stars = gr.CheckboxGroup(choices=[\"Stars\", \"Week over Week\"], show_label=False)\n", "            issues = gr.CheckboxGroup(choices=[\"Issue\", \"Exclude org members\", \"week over week\"], show_label=False)\n", "    with gr.Row():\n", "        fetch = gr.Button(value=\"Fetch\")\n", "    with gr.Row():\n", "        with gr.Column():\n", "            pip_plot = gr.Plot(visible=False)\n", "            star_plot = gr.Plot(visible=False)\n", "            issue_plot = gr.Plot(visible=False)\n", "\n", "    fetch.click(create_pip_plot, inputs=[libraries, pip], outputs=pip_plot)\n", "    fetch.click(create_star_plot, inputs=[libraries, stars], outputs=star_plot)\n", "    fetch.click(create_issue_plot, inputs=[libraries, issues], outputs=issue_plot)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: dashboard\n", "### This demo shows how you can build an interactive dashboard with gradio. Click on a python library on the left hand side and then on the right hand side click on the metric you'd like to see plot over time. Data is pulled from HuggingFace Hub datasets.\n", "        "]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio plotly pandas "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/dashboard/helpers.py"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import pandas as pd\n", "import plotly.express as px\n", "from helpers import retrieve_pip_installs, retrieve_stars, retrieve_issues\n", "\n", "LIBRARIES = [\"accelerate\", \"datasets\", \"diffusers\", \"evaluate\", \"gradio\", \"hub_docs\",\n", "             \"huggingface_hub\", \"optimum\", \"pytorch_image_models\", \"tokenizers\", \"transformers\"]\n", "\n", "def create_pip_plot(libraries, pip_choices):\n", "    if \"Pip\" not in pip_choices:\n", "        return gr.Plot(visible=False)\n", "    output = retrieve_pip_installs(libraries, \"Cumulated\" in pip_choices)\n", "    df = pd.DataFrame(output).melt(id_vars=\"day\")\n", "    plot = px.line(df, x=\"day\", y=\"value\", color=\"variable\",\n", "                   title=\"Pip installs\")\n", "    plot.update_layout(legend=dict(x=0.5, y=0.99),  title_x=0.5, legend_title_text=\"\")\n", "    return gr.Plot(value=plot, visible=True)\n", "\n", "def create_star_plot(libraries, star_choices):\n", "    if \"Stars\" not in star_choices:\n", "        return gr.Plot(visible=False)\n", "    output = retrieve_stars(libraries, \"Week over Week\" in star_choices)\n", "    df = pd.DataFrame(output).melt(id_vars=\"day\")\n", "    plot = px.line(df, x=\"day\", y=\"value\", color=\"variable\",\n", "                   title=\"Number of stargazers\")\n", "    plot.update_layout(legend=dict(x=0.5, y=0.99),  title_x=0.5, legend_title_text=\"\")\n", "    return gr.Plot(value=plot, visible=True)\n", "\n", "def create_issue_plot(libraries, issue_choices):\n", "    if \"Issue\" not in issue_choices:\n", "        return gr.Plot(visible=False)\n", "    output = retrieve_issues(libraries,\n", "                             exclude_org_members=\"Exclude org members\" in issue_choices,\n", "                             week_over_week=\"Week over Week\" in issue_choices)\n", "    df = pd.DataFrame(output).melt(id_vars=\"day\")\n", "    plot = px.line(df, x=\"day\", y=\"value\", color=\"variable\",\n", "                   title=\"Cumulated number of issues, PRs, and comments\",\n", "                   )\n", "    plot.update_layout(legend=dict(x=0.5, y=0.99),  title_x=0.5, legend_title_text=\"\")\n", "    return gr.Plot(value=plot, visible=True)\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        with gr.Column():\n", "            gr.Markdown(\"## Select libraries to display\")\n", "            libraries = gr.CheckboxGroup(choices=LIBRARIES, show_label=False)\n", "        with gr.Column():\n", "            gr.Markdown(\"## Select graphs to display\")\n", "            pip = gr.CheckboxGroup(choices=[\"Pip\", \"Cumulated\"], show_label=False)\n", "            stars = gr.CheckboxGroup(choices=[\"Stars\", \"Week over Week\"], show_label=False)\n", "            issues = gr.CheckboxGroup(choices=[\"Issue\", \"Exclude org members\", \"week over week\"], show_label=False)\n", "    with gr.Row():\n", "        fetch = gr.Button(value=\"Fetch\")\n", "    with gr.Row():\n", "        with gr.Column():\n", "            pip_plot = gr.Plot(visible=False)\n", "            star_plot = gr.Plot(visible=False)\n", "            issue_plot = gr.Plot(visible=False)\n", "\n", "    fetch.click(create_pip_plot, inputs=[libraries, pip], outputs=pip_plot)\n", "    fetch.click(create_star_plot, inputs=[libraries, stars], outputs=star_plot)\n", "    fetch.click(create_issue_plot, inputs=[libraries, issues], outputs=issue_plot)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/dataframe_colorful/requirements.txt b/demo/dataframe_colorful/requirements.txt
new file mode 100644
index 0000000000000..fb6c7ed7ec60d
--- /dev/null
+++ b/demo/dataframe_colorful/requirements.txt
@@ -0,0 +1 @@
+pandas
diff --git a/demo/dataframe_colorful/run.ipynb b/demo/dataframe_colorful/run.ipynb
index e9181aab72819..e4ff9dc885bce 100644
--- a/demo/dataframe_colorful/run.ipynb
+++ b/demo/dataframe_colorful/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: dataframe_colorful"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import pandas as pd\n", "import gradio as gr\n", "\n", "df = pd.DataFrame(\n", "    {\n", "        \"A\": [14, 4, 5, 4, 1],\n", "        \"B\": [5, 2, 54, 3, 2],\n", "        \"C\": [20, 20, 7, 3, 8],\n", "        \"D\": [14, 3, 6, 2, 6],\n", "        \"E\": [23, 45, 64, 32, 23],\n", "    }\n", ")\n", "\n", "t = df.style.highlight_max(color=\"lightgreen\", axis=0)\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Dataframe(t)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: dataframe_colorful"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio pandas "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import pandas as pd\n", "import gradio as gr\n", "\n", "df = pd.DataFrame(\n", "    {\n", "        \"A\": [14, 4, 5, 4, 1],\n", "        \"B\": [5, 2, 54, 3, 2],\n", "        \"C\": [20, 20, 7, 3, 8],\n", "        \"D\": [14, 3, 6, 2, 6],\n", "        \"E\": [23, 45, 64, 32, 23],\n", "    }\n", ")\n", "\n", "t = df.style.highlight_max(color=\"lightgreen\", axis=0)\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Dataframe(t)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/dataframe_datatype/requirements.txt b/demo/dataframe_datatype/requirements.txt
new file mode 100644
index 0000000000000..5da331cf67f41
--- /dev/null
+++ b/demo/dataframe_datatype/requirements.txt
@@ -0,0 +1,2 @@
+numpy
+pandas
diff --git a/demo/dataframe_datatype/run.ipynb b/demo/dataframe_datatype/run.ipynb
index 926524b56beda..2d3f95f067a3b 100644
--- a/demo/dataframe_datatype/run.ipynb
+++ b/demo/dataframe_datatype/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: dataframe_datatype"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import pandas as pd\n", "import numpy as np\n", "\n", "def make_dataframe(n_periods):\n", "    rng = np.random.default_rng()\n", "    return pd.DataFrame({\"date_1\": pd.date_range(\"2021-01-01\", periods=n_periods),\n", "                         \"date_2\": pd.date_range(\"2022-02-15\", periods=n_periods).strftime('%B %d, %Y, %r'),\n", "                         \"number\": rng.random(n_periods).astype(np.float64),\n", "                         \"number_2\": rng.integers(0, 100, n_periods).astype(np.int32),\n", "                         \"bool\": [True] * n_periods,\n", "                         \"markdown\": [\"# Hello\"] * n_periods})\n", "\n", "demo = gr.Interface(make_dataframe,\n", "             gr.Number(precision=0),\n", "             gr.Dataframe(datatype=[\"date\", \"date\", \"number\", \"number\", \"bool\", \"markdown\"]))\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: dataframe_datatype"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy pandas "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import pandas as pd\n", "import numpy as np\n", "\n", "def make_dataframe(n_periods):\n", "    rng = np.random.default_rng()\n", "    return pd.DataFrame({\"date_1\": pd.date_range(\"2021-01-01\", periods=n_periods),\n", "                         \"date_2\": pd.date_range(\"2022-02-15\", periods=n_periods).strftime('%B %d, %Y, %r'),\n", "                         \"number\": rng.random(n_periods).astype(np.float64),\n", "                         \"number_2\": rng.integers(0, 100, n_periods).astype(np.int32),\n", "                         \"bool\": [True] * n_periods,\n", "                         \"markdown\": [\"# Hello\"] * n_periods})\n", "\n", "demo = gr.Interface(make_dataframe,\n", "             gr.Number(precision=0),\n", "             gr.Dataframe(datatype=[\"date\", \"date\", \"number\", \"number\", \"bool\", \"markdown\"]))\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/dataset/requirements.txt b/demo/dataset/requirements.txt
new file mode 100644
index 0000000000000..24ce15ab7ead3
--- /dev/null
+++ b/demo/dataset/requirements.txt
@@ -0,0 +1 @@
+numpy
diff --git a/demo/dataset/run.ipynb b/demo/dataset/run.ipynb
index 44090bff10fbf..862997f8fa319 100644
--- a/demo/dataset/run.ipynb
+++ b/demo/dataset/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: dataset"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('files')\n", "!wget -q -O files/Bunny.obj https://github.com/gradio-app/gradio/raw/main/demo/dataset/files/Bunny.obj\n", "!wget -q -O files/cantina.wav https://github.com/gradio-app/gradio/raw/main/demo/dataset/files/cantina.wav\n", "!wget -q -O files/cheetah1.jpg https://github.com/gradio-app/gradio/raw/main/demo/dataset/files/cheetah1.jpg\n", "!wget -q -O files/time.csv https://github.com/gradio-app/gradio/raw/main/demo/dataset/files/time.csv\n", "!wget -q -O files/titanic.csv https://github.com/gradio-app/gradio/raw/main/demo/dataset/files/titanic.csv\n", "!wget -q -O files/world.mp4 https://github.com/gradio-app/gradio/raw/main/demo/dataset/files/world.mp4"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import os\n", "import numpy as np\n", "\n", "txt = \"the quick brown fox\"\n", "num = 10\n", "\n", "img = os.path.join(os.path.abspath(''), \"files/cheetah1.jpg\")\n", "vid = os.path.join(os.path.abspath(''), \"files/world.mp4\")\n", "audio = os.path.join(os.path.abspath(''), \"files/cantina.wav\")\n", "csv = os.path.join(os.path.abspath(''), \"files/time.csv\")\n", "model = os.path.join(os.path.abspath(''), \"files/Bunny.obj\")\n", "\n", "dataframe = [[1, 2, 3, 4], [4, 5, 6, 7], [8, 9, 1, 2], [3, 4, 5, 6]]\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(\"# Dataset previews\")\n", "    a = gr.Audio(visible=False)\n", "    gr.Dataset(\n", "        components=[a],\n", "        label=\"Audio\",\n", "        samples=[\n", "            [audio],\n", "            [audio],\n", "            [audio],\n", "            [audio],\n", "            [audio],\n", "            [audio],\n", "        ],\n", "    )\n", "    c = gr.Checkbox(visible=False)\n", "    gr.Dataset(\n", "        label=\"Checkbox\",\n", "        components=[c],\n", "        samples=[[True], [True], [False], [True], [False], [False]],\n", "    )\n", "\n", "    c_2 = gr.CheckboxGroup(visible=False, choices=['a', 'b', 'c'])\n", "    gr.Dataset(\n", "        label=\"CheckboxGroup\",\n", "        components=[c_2],\n", "        samples=[\n", "            [[\"a\"]],\n", "            [[\"a\", \"b\"]],\n", "            [[\"a\", \"b\", \"c\"]],\n", "            [[\"b\"]],\n", "            [[\"c\"]],\n", "            [[\"a\", \"c\"]],\n", "        ],\n", "    )\n", "    c_3 = gr.ColorPicker(visible=False)\n", "    gr.Dataset(\n", "        label=\"ColorPicker\",\n", "        components=[c_3],\n", "        samples=[\n", "            [\"#FFFFFF\"],\n", "            [\"#000000\"],\n", "            [\"#FFFFFF\"],\n", "            [\"#000000\"],\n", "            [\"#FFFFFF\"],\n", "            [\"#000000\"],\n", "        ],\n", "    )\n", "    d = gr.DataFrame(visible=False)\n", "    gr.Dataset(\n", "        components=[d],\n", "        label=\"Dataframe\",\n", "        samples=[\n", "            [np.zeros((3, 3)).tolist()],\n", "            [np.ones((2, 2)).tolist()],\n", "            [np.random.randint(0, 10, (3, 10)).tolist()],\n", "            [np.random.randint(0, 10, (10, 3)).tolist()],\n", "            [np.random.randint(0, 10, (10, 10)).tolist()],\n", "        ],\n", "    )\n", "    d_2 = gr.Dropdown(visible=False, choices=[\"one\", \"two\", \"three\"])\n", "    gr.Dataset(\n", "        components=[d_2],\n", "        label=\"Dropdown\",\n", "        samples=[[\"one\"], [\"two\"], [\"three\"], [\"one\"], [\"two\"], [\"three\"]],\n", "    )\n", "    f = gr.File(visible=False)\n", "    gr.Dataset(\n", "        components=[f],\n", "        label=\"File\",\n", "        samples=[\n", "            [csv],\n", "            [csv],\n", "            [csv],\n", "            [csv],\n", "            [csv],\n", "            [csv],\n", "        ],\n", "    )\n", "    h = gr.HTML(visible=False)\n", "    gr.Dataset(\n", "        components=[h],\n", "        label=\"HTML\",\n", "        samples=[\n", "            [\"<h1>hi</h2>\"],\n", "            [\"<h1>hi</h2>\"],\n", "            [\"<h1>hi</h2>\"],\n", "            [\"<h1>hi</h2>\"],\n", "            [\"<h1>hi</h2>\"],\n", "            [\"<h1>hi</h2>\"],\n", "        ],\n", "    )\n", "    i = gr.Image(visible=False)\n", "    gr.Dataset(\n", "        components=[i],\n", "        label=\"Image\",\n", "        samples=[[img], [img], [img], [img], [img], [img]],\n", "    )\n", "    m = gr.Markdown(visible=False)\n", "    gr.Dataset(\n", "        components=[m],\n", "        label=\"Markdown\",\n", "        samples=[\n", "            [\"# hi\"],\n", "            [\"# hi\"],\n", "            [\"# hi\"],\n", "            [\"# hi\"],\n", "            [\"# hi\"],\n", "            [\"# hi\"],\n", "        ],\n", "    )\n", "    m_2 = gr.Model3D(visible=False)\n", "    gr.Dataset(\n", "        components=[m_2],\n", "        label=\"Model3D\",\n", "        samples=[[model], [model], [model], [model], [model], [model]],\n", "    )\n", "    n = gr.Number(visible=False)\n", "    gr.Dataset(\n", "        label=\"Number\",\n", "        components=[n],\n", "        samples=[[1], [1], [1], [1], [1], [1]],\n", "    )\n", "    r = gr.Radio(visible=False, choices=[\"one\", \"two\", \"three\"])\n", "    gr.Dataset(\n", "        components=[r],\n", "        label=\"Radio\",\n", "        samples=[[\"one\"], [\"two\"], [\"three\"], [\"one\"], [\"two\"], [\"three\"]],\n", "    )\n", "    s = gr.Slider(visible=False)\n", "    gr.Dataset(\n", "        label=\"Slider\",\n", "        components=[s],\n", "        samples=[[1], [1], [1], [1], [1], [1]],\n", "    )\n", "    t = gr.Textbox(visible=False)\n", "    gr.Dataset(\n", "        label=\"Textbox\",\n", "        components=[t],\n", "        samples=[\n", "            [\"Some value\"],\n", "            [\"Some value\"],\n", "            [\"Some value\"],\n", "            [\"Some value\"],\n", "            [\"Some value\"],\n", "            [\"Some value\"],\n", "        ],\n", "    )\n", "    v = gr.Video(visible=False)\n", "    gr.Dataset(\n", "        components=[v],\n", "        label=\"Video\",\n", "        samples=[[vid], [vid], [vid], [vid], [vid], [vid]],\n", "    )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: dataset"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('files')\n", "!wget -q -O files/Bunny.obj https://github.com/gradio-app/gradio/raw/main/demo/dataset/files/Bunny.obj\n", "!wget -q -O files/cantina.wav https://github.com/gradio-app/gradio/raw/main/demo/dataset/files/cantina.wav\n", "!wget -q -O files/cheetah1.jpg https://github.com/gradio-app/gradio/raw/main/demo/dataset/files/cheetah1.jpg\n", "!wget -q -O files/time.csv https://github.com/gradio-app/gradio/raw/main/demo/dataset/files/time.csv\n", "!wget -q -O files/titanic.csv https://github.com/gradio-app/gradio/raw/main/demo/dataset/files/titanic.csv\n", "!wget -q -O files/world.mp4 https://github.com/gradio-app/gradio/raw/main/demo/dataset/files/world.mp4"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import os\n", "import numpy as np\n", "\n", "txt = \"the quick brown fox\"\n", "num = 10\n", "\n", "img = os.path.join(os.path.abspath(''), \"files/cheetah1.jpg\")\n", "vid = os.path.join(os.path.abspath(''), \"files/world.mp4\")\n", "audio = os.path.join(os.path.abspath(''), \"files/cantina.wav\")\n", "csv = os.path.join(os.path.abspath(''), \"files/time.csv\")\n", "model = os.path.join(os.path.abspath(''), \"files/Bunny.obj\")\n", "\n", "dataframe = [[1, 2, 3, 4], [4, 5, 6, 7], [8, 9, 1, 2], [3, 4, 5, 6]]\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(\"# Dataset previews\")\n", "    a = gr.Audio(visible=False)\n", "    gr.Dataset(\n", "        components=[a],\n", "        label=\"Audio\",\n", "        samples=[\n", "            [audio],\n", "            [audio],\n", "            [audio],\n", "            [audio],\n", "            [audio],\n", "            [audio],\n", "        ],\n", "    )\n", "    c = gr.Checkbox(visible=False)\n", "    gr.Dataset(\n", "        label=\"Checkbox\",\n", "        components=[c],\n", "        samples=[[True], [True], [False], [True], [False], [False]],\n", "    )\n", "\n", "    c_2 = gr.CheckboxGroup(visible=False, choices=['a', 'b', 'c'])\n", "    gr.Dataset(\n", "        label=\"CheckboxGroup\",\n", "        components=[c_2],\n", "        samples=[\n", "            [[\"a\"]],\n", "            [[\"a\", \"b\"]],\n", "            [[\"a\", \"b\", \"c\"]],\n", "            [[\"b\"]],\n", "            [[\"c\"]],\n", "            [[\"a\", \"c\"]],\n", "        ],\n", "    )\n", "    c_3 = gr.ColorPicker(visible=False)\n", "    gr.Dataset(\n", "        label=\"ColorPicker\",\n", "        components=[c_3],\n", "        samples=[\n", "            [\"#FFFFFF\"],\n", "            [\"#000000\"],\n", "            [\"#FFFFFF\"],\n", "            [\"#000000\"],\n", "            [\"#FFFFFF\"],\n", "            [\"#000000\"],\n", "        ],\n", "    )\n", "    d = gr.DataFrame(visible=False)\n", "    gr.Dataset(\n", "        components=[d],\n", "        label=\"Dataframe\",\n", "        samples=[\n", "            [np.zeros((3, 3)).tolist()],\n", "            [np.ones((2, 2)).tolist()],\n", "            [np.random.randint(0, 10, (3, 10)).tolist()],\n", "            [np.random.randint(0, 10, (10, 3)).tolist()],\n", "            [np.random.randint(0, 10, (10, 10)).tolist()],\n", "        ],\n", "    )\n", "    d_2 = gr.Dropdown(visible=False, choices=[\"one\", \"two\", \"three\"])\n", "    gr.Dataset(\n", "        components=[d_2],\n", "        label=\"Dropdown\",\n", "        samples=[[\"one\"], [\"two\"], [\"three\"], [\"one\"], [\"two\"], [\"three\"]],\n", "    )\n", "    f = gr.File(visible=False)\n", "    gr.Dataset(\n", "        components=[f],\n", "        label=\"File\",\n", "        samples=[\n", "            [csv],\n", "            [csv],\n", "            [csv],\n", "            [csv],\n", "            [csv],\n", "            [csv],\n", "        ],\n", "    )\n", "    h = gr.HTML(visible=False)\n", "    gr.Dataset(\n", "        components=[h],\n", "        label=\"HTML\",\n", "        samples=[\n", "            [\"<h1>hi</h2>\"],\n", "            [\"<h1>hi</h2>\"],\n", "            [\"<h1>hi</h2>\"],\n", "            [\"<h1>hi</h2>\"],\n", "            [\"<h1>hi</h2>\"],\n", "            [\"<h1>hi</h2>\"],\n", "        ],\n", "    )\n", "    i = gr.Image(visible=False)\n", "    gr.Dataset(\n", "        components=[i],\n", "        label=\"Image\",\n", "        samples=[[img], [img], [img], [img], [img], [img]],\n", "    )\n", "    m = gr.Markdown(visible=False)\n", "    gr.Dataset(\n", "        components=[m],\n", "        label=\"Markdown\",\n", "        samples=[\n", "            [\"# hi\"],\n", "            [\"# hi\"],\n", "            [\"# hi\"],\n", "            [\"# hi\"],\n", "            [\"# hi\"],\n", "            [\"# hi\"],\n", "        ],\n", "    )\n", "    m_2 = gr.Model3D(visible=False)\n", "    gr.Dataset(\n", "        components=[m_2],\n", "        label=\"Model3D\",\n", "        samples=[[model], [model], [model], [model], [model], [model]],\n", "    )\n", "    n = gr.Number(visible=False)\n", "    gr.Dataset(\n", "        label=\"Number\",\n", "        components=[n],\n", "        samples=[[1], [1], [1], [1], [1], [1]],\n", "    )\n", "    r = gr.Radio(visible=False, choices=[\"one\", \"two\", \"three\"])\n", "    gr.Dataset(\n", "        components=[r],\n", "        label=\"Radio\",\n", "        samples=[[\"one\"], [\"two\"], [\"three\"], [\"one\"], [\"two\"], [\"three\"]],\n", "    )\n", "    s = gr.Slider(visible=False)\n", "    gr.Dataset(\n", "        label=\"Slider\",\n", "        components=[s],\n", "        samples=[[1], [1], [1], [1], [1], [1]],\n", "    )\n", "    t = gr.Textbox(visible=False)\n", "    gr.Dataset(\n", "        label=\"Textbox\",\n", "        components=[t],\n", "        samples=[\n", "            [\"Some value\"],\n", "            [\"Some value\"],\n", "            [\"Some value\"],\n", "            [\"Some value\"],\n", "            [\"Some value\"],\n", "            [\"Some value\"],\n", "        ],\n", "    )\n", "    v = gr.Video(visible=False)\n", "    gr.Dataset(\n", "        components=[v],\n", "        label=\"Video\",\n", "        samples=[[vid], [vid], [vid], [vid], [vid], [vid]],\n", "    )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/depth_estimation/run.ipynb b/demo/depth_estimation/run.ipynb
index d3023183dcf1d..8b17597f3d703 100644
--- a/demo/depth_estimation/run.ipynb
+++ b/demo/depth_estimation/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: depth_estimation\n", "### A demo for predicting the depth of an image and generating a 3D model of it.\n", "        "]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio torch git+https://github.com/nielsrogge/transformers.git@add_dpt_redesign#egg=transformers numpy Pillow jinja2 open3d"]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('examples')\n", "!wget -q -O examples/1-jonathan-borba-CgWTqYxHEkg-unsplash.jpg https://github.com/gradio-app/gradio/raw/main/demo/depth_estimation/examples/1-jonathan-borba-CgWTqYxHEkg-unsplash.jpg\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/depth_estimation/packages.txt"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from transformers import DPTFeatureExtractor, DPTForDepthEstimation\n", "import torch\n", "import numpy as np\n", "from PIL import Image\n", "import open3d as o3d\n", "from pathlib import Path\n", "\n", "feature_extractor = DPTFeatureExtractor.from_pretrained(\"Intel/dpt-large\")\n", "model = DPTForDepthEstimation.from_pretrained(\"Intel/dpt-large\")\n", "\n", "def process_image(image_path):\n", "    image_path = Path(image_path)\n", "    image_raw = Image.open(image_path)\n", "    image = image_raw.resize(\n", "        (800, int(800 * image_raw.size[1] / image_raw.size[0])),\n", "        Image.Resampling.LANCZOS)\n", "\n", "    # prepare image for the model\n", "    encoding = feature_extractor(image, return_tensors=\"pt\")  # type: ignore\n", "\n", "    # forward pass\n", "    with torch.no_grad():\n", "        outputs = model(**encoding)  # type: ignore\n", "        predicted_depth = outputs.predicted_depth\n", "\n", "    # interpolate to original size\n", "    prediction = torch.nn.functional.interpolate(\n", "        predicted_depth.unsqueeze(1),\n", "        size=image.size[::-1],\n", "        mode=\"bicubic\",\n", "        align_corners=False,\n", "    ).squeeze()\n", "    output = prediction.cpu().numpy()\n", "    depth_image = (output * 255 / np.max(output)).astype('uint8')\n", "    try:\n", "        gltf_path = create_3d_obj(np.array(image), depth_image, image_path)\n", "        img = Image.fromarray(depth_image)\n", "        return [img, gltf_path, gltf_path]\n", "    except Exception:\n", "        gltf_path = create_3d_obj(\n", "            np.array(image), depth_image, image_path, depth=8)\n", "        img = Image.fromarray(depth_image)\n", "        return [img, gltf_path, gltf_path]\n", "    except:\n", "        print(\"Error reconstructing 3D model\")\n", "        raise Exception(\"Error reconstructing 3D model\")\n", "\n", "def create_3d_obj(rgb_image, depth_image, image_path, depth=10):\n", "    depth_o3d = o3d.geometry.Image(depth_image)\n", "    image_o3d = o3d.geometry.Image(rgb_image)\n", "    rgbd_image = o3d.geometry.RGBDImage.create_from_color_and_depth(\n", "        image_o3d, depth_o3d, convert_rgb_to_intensity=False)\n", "    w = int(depth_image.shape[1])\n", "    h = int(depth_image.shape[0])\n", "\n", "    camera_intrinsic = o3d.camera.PinholeCameraIntrinsic()\n", "    camera_intrinsic.set_intrinsics(w, h, 500, 500, w/2, h/2)\n", "\n", "    pcd = o3d.geometry.PointCloud.create_from_rgbd_image(\n", "        rgbd_image, camera_intrinsic)\n", "\n", "    print('normals')\n", "    pcd.normals = o3d.utility.Vector3dVector(\n", "        np.zeros((1, 3)))  # invalidate existing normals\n", "    pcd.estimate_normals(\n", "        search_param=o3d.geometry.KDTreeSearchParamHybrid(radius=0.01, max_nn=30))\n", "    pcd.orient_normals_towards_camera_location(\n", "        camera_location=np.array([0., 0., 1000.]))\n", "    pcd.transform([[1, 0, 0, 0],\n", "                   [0, -1, 0, 0],\n", "                   [0, 0, -1, 0],\n", "                   [0, 0, 0, 1]])\n", "    pcd.transform([[-1, 0, 0, 0],\n", "                   [0, 1, 0, 0],\n", "                   [0, 0, 1, 0],\n", "                   [0, 0, 0, 1]])\n", "\n", "    print('run Poisson surface reconstruction')\n", "    with o3d.utility.VerbosityContextManager(o3d.utility.VerbosityLevel.Debug):\n", "        mesh_raw, densities = o3d.geometry.TriangleMesh.create_from_point_cloud_poisson(\n", "            pcd, depth=depth, width=0, scale=1.1, linear_fit=True)\n", "\n", "    voxel_size = max(mesh_raw.get_max_bound() - mesh_raw.get_min_bound()) / 256\n", "    print(f'voxel_size = {voxel_size:e}')\n", "    mesh = mesh_raw.simplify_vertex_clustering(\n", "        voxel_size=voxel_size,\n", "        contraction=o3d.geometry.SimplificationContraction.Average)\n", "\n", "    # vertices_to_remove = densities < np.quantile(densities, 0.001)\n", "    # mesh.remove_vertices_by_mask(vertices_to_remove)\n", "    bbox = pcd.get_axis_aligned_bounding_box()\n", "    mesh_crop = mesh.crop(bbox)\n", "    gltf_path = f'./{image_path.stem}.gltf'\n", "    o3d.io.write_triangle_mesh(\n", "        gltf_path, mesh_crop, write_triangle_uvs=True)\n", "    return gltf_path\n", "\n", "title = \"Demo: zero-shot depth estimation with DPT + 3D Point Cloud\"\n", "description = \"This demo is a variation from the original <a href='https://huggingface.co/spaces/nielsr/dpt-depth-estimation' target='_blank'>DPT Demo</a>. It uses the DPT model to predict the depth of an image and then uses 3D Point Cloud to create a 3D object.\"\n", "examples = [[\"examples/1-jonathan-borba-CgWTqYxHEkg-unsplash.jpg\"]]\n", "\n", "iface = gr.Interface(fn=process_image,\n", "                     inputs=[gr.Image(\n", "                         type=\"filepath\", label=\"Input Image\")],\n", "                     outputs=[gr.Image(label=\"predicted depth\", type=\"pil\"),\n", "                              gr.Model3D(label=\"3d mesh reconstruction\", clear_color=(\n", "                                                 1.0, 1.0, 1.0, 1.0)),\n", "                              gr.File(label=\"3d gLTF\")],\n", "                     title=title,\n", "                     description=description,\n", "                     examples=examples,\n", "                     allow_flagging=\"never\",\n", "                     cache_examples=False)\n", "\n", "iface.launch(debug=True)\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: depth_estimation\n", "### A demo for predicting the depth of an image and generating a 3D model of it.\n", "        "]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio torch git+https://github.com/nielsrogge/transformers.git@add_dpt_redesign#egg=transformers numpy Pillow jinja2 open3d"]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('examples')\n", "!wget -q -O examples/1-jonathan-borba-CgWTqYxHEkg-unsplash.jpg https://github.com/gradio-app/gradio/raw/main/demo/depth_estimation/examples/1-jonathan-borba-CgWTqYxHEkg-unsplash.jpg\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/depth_estimation/packages.txt"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from transformers import DPTFeatureExtractor, DPTForDepthEstimation\n", "import torch\n", "import numpy as np\n", "from PIL import Image\n", "import open3d as o3d\n", "from pathlib import Path\n", "\n", "feature_extractor = DPTFeatureExtractor.from_pretrained(\"Intel/dpt-large\")\n", "model = DPTForDepthEstimation.from_pretrained(\"Intel/dpt-large\")\n", "\n", "def process_image(image_path):\n", "    image_path = Path(image_path)\n", "    image_raw = Image.open(image_path)\n", "    image = image_raw.resize(\n", "        (800, int(800 * image_raw.size[1] / image_raw.size[0])),\n", "        Image.Resampling.LANCZOS)\n", "\n", "    # prepare image for the model\n", "    encoding = feature_extractor(image, return_tensors=\"pt\")  # type: ignore\n", "\n", "    # forward pass\n", "    with torch.no_grad():\n", "        outputs = model(**encoding)  # type: ignore\n", "        predicted_depth = outputs.predicted_depth\n", "\n", "    # interpolate to original size\n", "    prediction = torch.nn.functional.interpolate(\n", "        predicted_depth.unsqueeze(1),\n", "        size=image.size[::-1],\n", "        mode=\"bicubic\",\n", "        align_corners=False,\n", "    ).squeeze()\n", "    output = prediction.cpu().numpy()\n", "    depth_image = (output * 255 / np.max(output)).astype('uint8')\n", "    try:\n", "        gltf_path = create_3d_obj(np.array(image), depth_image, image_path)\n", "        img = Image.fromarray(depth_image)\n", "        return [img, gltf_path, gltf_path]\n", "    except Exception:\n", "        gltf_path = create_3d_obj(\n", "            np.array(image), depth_image, image_path, depth=8)\n", "        img = Image.fromarray(depth_image)\n", "        return [img, gltf_path, gltf_path]\n", "    except:\n", "        print(\"Error reconstructing 3D model\")\n", "        raise Exception(\"Error reconstructing 3D model\")\n", "\n", "def create_3d_obj(rgb_image, depth_image, image_path, depth=10):\n", "    depth_o3d = o3d.geometry.Image(depth_image)\n", "    image_o3d = o3d.geometry.Image(rgb_image)\n", "    rgbd_image = o3d.geometry.RGBDImage.create_from_color_and_depth(\n", "        image_o3d, depth_o3d, convert_rgb_to_intensity=False)\n", "    w = int(depth_image.shape[1])\n", "    h = int(depth_image.shape[0])\n", "\n", "    camera_intrinsic = o3d.camera.PinholeCameraIntrinsic()\n", "    camera_intrinsic.set_intrinsics(w, h, 500, 500, w/2, h/2)\n", "\n", "    pcd = o3d.geometry.PointCloud.create_from_rgbd_image(\n", "        rgbd_image, camera_intrinsic)\n", "\n", "    print('normals')\n", "    pcd.normals = o3d.utility.Vector3dVector(\n", "        np.zeros((1, 3)))  # invalidate existing normals\n", "    pcd.estimate_normals(\n", "        search_param=o3d.geometry.KDTreeSearchParamHybrid(radius=0.01, max_nn=30))\n", "    pcd.orient_normals_towards_camera_location(\n", "        camera_location=np.array([0., 0., 1000.]))\n", "    pcd.transform([[1, 0, 0, 0],\n", "                   [0, -1, 0, 0],\n", "                   [0, 0, -1, 0],\n", "                   [0, 0, 0, 1]])\n", "    pcd.transform([[-1, 0, 0, 0],\n", "                   [0, 1, 0, 0],\n", "                   [0, 0, 1, 0],\n", "                   [0, 0, 0, 1]])\n", "\n", "    print('run Poisson surface reconstruction')\n", "    with o3d.utility.VerbosityContextManager(o3d.utility.VerbosityLevel.Debug):\n", "        mesh_raw, densities = o3d.geometry.TriangleMesh.create_from_point_cloud_poisson(\n", "            pcd, depth=depth, width=0, scale=1.1, linear_fit=True)\n", "\n", "    voxel_size = max(mesh_raw.get_max_bound() - mesh_raw.get_min_bound()) / 256\n", "    print(f'voxel_size = {voxel_size:e}')\n", "    mesh = mesh_raw.simplify_vertex_clustering(\n", "        voxel_size=voxel_size,\n", "        contraction=o3d.geometry.SimplificationContraction.Average)\n", "\n", "    # vertices_to_remove = densities < np.quantile(densities, 0.001)\n", "    # mesh.remove_vertices_by_mask(vertices_to_remove)\n", "    bbox = pcd.get_axis_aligned_bounding_box()\n", "    mesh_crop = mesh.crop(bbox)\n", "    gltf_path = f'./{image_path.stem}.gltf'\n", "    o3d.io.write_triangle_mesh(\n", "        gltf_path, mesh_crop, write_triangle_uvs=True)\n", "    return gltf_path\n", "\n", "title = \"Demo: zero-shot depth estimation with DPT + 3D Point Cloud\"\n", "description = \"This demo is a variation from the original <a href='https://huggingface.co/spaces/nielsr/dpt-depth-estimation' target='_blank'>DPT Demo</a>. It uses the DPT model to predict the depth of an image and then uses 3D Point Cloud to create a 3D object.\"\n", "examples = [[\"examples/1-jonathan-borba-CgWTqYxHEkg-unsplash.jpg\"]]\n", "\n", "iface = gr.Interface(fn=process_image,\n", "                     inputs=[gr.Image(\n", "                         type=\"filepath\", label=\"Input Image\")],\n", "                     outputs=[gr.Image(label=\"predicted depth\", type=\"pil\"),\n", "                              gr.Model3D(label=\"3d mesh reconstruction\", clear_color=(\n", "                                                 1.0, 1.0, 1.0, 1.0)),\n", "                              gr.File(label=\"3d gLTF\")],\n", "                     title=title,\n", "                     description=description,\n", "                     examples=examples,\n", "                     flagging_mode=\"never\",\n", "                     cache_examples=False)\n", "\n", "iface.launch(debug=True)\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/depth_estimation/run.py b/demo/depth_estimation/run.py
index e5fcf1ea3716b..50f84544dc521 100644
--- a/demo/depth_estimation/run.py
+++ b/demo/depth_estimation/run.py
@@ -110,7 +110,7 @@ def create_3d_obj(rgb_image, depth_image, image_path, depth=10):
                      title=title,
                      description=description,
                      examples=examples,
-                     allow_flagging="never",
+                     flagging_mode="never",
                      cache_examples=False)
 
 iface.launch(debug=True)
diff --git a/demo/fake_diffusion_with_gif/requirements.txt b/demo/fake_diffusion_with_gif/requirements.txt
new file mode 100644
index 0000000000000..6dd520b61558d
--- /dev/null
+++ b/demo/fake_diffusion_with_gif/requirements.txt
@@ -0,0 +1,3 @@
+numpy
+requests
+Pillow
diff --git a/demo/fake_diffusion_with_gif/run.ipynb b/demo/fake_diffusion_with_gif/run.ipynb
index 91a2905550b70..5f0600aff358d 100644
--- a/demo/fake_diffusion_with_gif/run.ipynb
+++ b/demo/fake_diffusion_with_gif/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: fake_diffusion_with_gif"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import numpy as np\n", "import time\n", "import os\n", "from PIL import Image\n", "import requests\n", "from io import BytesIO\n", "\n", "def create_gif(images):\n", "    pil_images = []\n", "    for image in images:\n", "        if isinstance(image, str):\n", "            response = requests.get(image)\n", "            image = Image.open(BytesIO(response.content))\n", "        else:\n", "            image = Image.fromarray((image * 255).astype(np.uint8))\n", "        pil_images.append(image)\n", "    fp_out = os.path.join(os.path.abspath(''), \"image.gif\")\n", "    img = pil_images.pop(0)\n", "    img.save(fp=fp_out, format='GIF', append_images=pil_images,\n", "            save_all=True, duration=400, loop=0)\n", "    return fp_out\n", "\n", "def fake_diffusion(steps):\n", "    rng = np.random.default_rng()\n", "    images = []\n", "    for _ in range(steps):\n", "        time.sleep(1)\n", "        image = rng.random((600, 600, 3))\n", "        images.append(image)\n", "        yield image, gr.Image(visible=False)\n", "\n", "    time.sleep(1)\n", "    image = \"https://gradio-builds.s3.amazonaws.com/diffusion_image/cute_dog.jpg\"\n", "    images.append(image)\n", "    gif_path = create_gif(images)\n", "\n", "    yield image, gr.Image(value=gif_path, visible=True)\n", "\n", "demo = gr.Interface(fake_diffusion,\n", "                    inputs=gr.Slider(1, 10, 3, step=1),\n", "                    outputs=[\"image\", gr.Image(label=\"All Images\", visible=False)])\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: fake_diffusion_with_gif"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy requests Pillow "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import numpy as np\n", "import time\n", "import os\n", "from PIL import Image\n", "import requests\n", "from io import BytesIO\n", "\n", "def create_gif(images):\n", "    pil_images = []\n", "    for image in images:\n", "        if isinstance(image, str):\n", "            response = requests.get(image)\n", "            image = Image.open(BytesIO(response.content))\n", "        else:\n", "            image = Image.fromarray((image * 255).astype(np.uint8))\n", "        pil_images.append(image)\n", "    fp_out = os.path.join(os.path.abspath(''), \"image.gif\")\n", "    img = pil_images.pop(0)\n", "    img.save(fp=fp_out, format='GIF', append_images=pil_images,\n", "            save_all=True, duration=400, loop=0)\n", "    return fp_out\n", "\n", "def fake_diffusion(steps):\n", "    rng = np.random.default_rng()\n", "    images = []\n", "    for _ in range(steps):\n", "        time.sleep(1)\n", "        image = rng.random((600, 600, 3))\n", "        images.append(image)\n", "        yield image, gr.Image(visible=False)\n", "\n", "    time.sleep(1)\n", "    image = \"https://gradio-builds.s3.amazonaws.com/diffusion_image/cute_dog.jpg\"\n", "    images.append(image)\n", "    gif_path = create_gif(images)\n", "\n", "    yield image, gr.Image(value=gif_path, visible=True)\n", "\n", "demo = gr.Interface(fake_diffusion,\n", "                    inputs=gr.Slider(1, 10, 3, step=1),\n", "                    outputs=[\"image\", gr.Image(label=\"All Images\", visible=False)])\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/file_component_events/run.ipynb b/demo/file_component_events/run.ipynb
index 136e1b1a9d6d3..dc29663db5e2c 100644
--- a/demo/file_component_events/run.ipynb
+++ b/demo/file_component_events/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: file_component_events"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "def delete_file(n: int, file: gr.DeletedFileData):\n", "    return [file.file.path, n + 1]\n", "\n", "with gr.Blocks() as demo:\n", "\n", "    with gr.Row():\n", "        with gr.Column():\n", "            file_component = gr.File(label=\"Upload Single File\", file_count=\"single\")\n", "        with gr.Column():\n", "            output_file_1 = gr.File(\n", "                label=\"Upload Single File Output\", file_count=\"single\"\n", "            )\n", "            num_load_btn_1 = gr.Number(label=\"# Load Upload Single File\", value=0)\n", "            file_component.upload(\n", "                lambda s, n: (s, n + 1),\n", "                [file_component, num_load_btn_1],\n", "                [output_file_1, num_load_btn_1],\n", "            )\n", "    with gr.Row():\n", "        with gr.Column():\n", "            file_component_multiple = gr.File(\n", "                label=\"Upload Multiple Files\", file_count=\"multiple\"\n", "            )\n", "        with gr.Column():\n", "            output_file_2 = gr.File(\n", "                label=\"Upload Multiple Files Output\", file_count=\"multiple\"\n", "            )\n", "            num_load_btn_2 = gr.Number(label=\"# Load Upload Multiple Files\", value=0)\n", "            file_component_multiple.upload(\n", "                lambda s, n: (s, n + 1),\n", "                [file_component_multiple, num_load_btn_2],\n", "                [output_file_2, num_load_btn_2],\n", "            )\n", "    with gr.Row():\n", "        with gr.Column():\n", "            file_component_specific = gr.File(\n", "                label=\"Upload Multiple Files Image/Video\",\n", "                file_count=\"multiple\",\n", "                file_types=[\"image\", \"video\"],\n", "            )\n", "        with gr.Column():\n", "            output_file_3 = gr.File(\n", "                label=\"Upload Multiple Files Output Image/Video\", file_count=\"multiple\"\n", "            )\n", "            num_load_btn_3 = gr.Number(\n", "                label=\"# Load Upload Multiple Files Image/Video\", value=0\n", "            )\n", "            file_component_specific.upload(\n", "                lambda s, n: (s, n + 1),\n", "                [file_component_specific, num_load_btn_3],\n", "                [output_file_3, num_load_btn_3],\n", "            )\n", "    with gr.Row():\n", "        with gr.Column():\n", "            file_component_pdf = gr.File(label=\"Upload PDF File\", file_types=[\"pdf\"])\n", "        with gr.Column():\n", "            output_file_4 = gr.File(label=\"Upload PDF File Output\")\n", "            num_load_btn_4 = gr.Number(label=\"# Load Upload PDF File\", value=0)\n", "            file_component_pdf.upload(\n", "                lambda s, n: (s, n + 1),\n", "                [file_component_pdf, num_load_btn_4],\n", "                [output_file_4, num_load_btn_4],\n", "            )\n", "    with gr.Row():\n", "        with gr.Column():\n", "            file_component_invalid = gr.File(\n", "                label=\"Upload File with Invalid file_types\",\n", "                file_types=[\"invalid file_type\"],\n", "            )\n", "        with gr.Column():\n", "            output_file_5 = gr.File(label=\"Upload File with Invalid file_types Output\")\n", "            num_load_btn_5 = gr.Number(\n", "                label=\"# Load Upload File with Invalid file_types\", value=0\n", "            )\n", "            file_component_invalid.upload(\n", "                lambda s, n: (s, n + 1),\n", "                [file_component_invalid, num_load_btn_5],\n", "                [output_file_5, num_load_btn_5],\n", "            )\n", "    with gr.Row():\n", "        with gr.Column():\n", "            del_file_input = gr.File(label=\"Delete File\", file_count=\"multiple\")\n", "        with gr.Column():\n", "            del_file_data = gr.Textbox(label=\"Delete file data\")\n", "            num_load_btn_6 = gr.Number(label=\"# Deleted File\", value=0)\n", "            del_file_input.delete(\n", "                delete_file,\n", "                [num_load_btn_6],\n", "                [del_file_data, num_load_btn_6],\n", "            )\n", "    # f = gr.File(label=\"Upload many File\", file_count=\"multiple\")\n", "    # # f.delete(delete_file)\n", "    # f.delete(delete_file, inputs=None, outputs=None)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: file_component_events"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "def delete_file(n: int, file: gr.DeletedFileData):\n", "    return [file.file.path, n + 1]\n", "\n", "with gr.Blocks() as demo:\n", "\n", "    with gr.Row():\n", "        with gr.Column():\n", "            file_component = gr.File(label=\"Upload Single File\", file_count=\"single\")\n", "        with gr.Column():\n", "            output_file_1 = gr.File(\n", "                label=\"Upload Single File Output\", file_count=\"single\"\n", "            )\n", "            num_load_btn_1 = gr.Number(label=\"# Load Upload Single File\", value=0)\n", "            file_component.upload(\n", "                lambda s, n: (s, n + 1),\n", "                [file_component, num_load_btn_1],\n", "                [output_file_1, num_load_btn_1],\n", "            )\n", "    with gr.Row():\n", "        with gr.Column():\n", "            file_component_multiple = gr.File(\n", "                label=\"Upload Multiple Files\", file_count=\"multiple\"\n", "            )\n", "        with gr.Column():\n", "            output_file_2 = gr.File(\n", "                label=\"Upload Multiple Files Output\", file_count=\"multiple\"\n", "            )\n", "            num_load_btn_2 = gr.Number(label=\"# Load Upload Multiple Files\", value=0)\n", "            file_component_multiple.upload(\n", "                lambda s, n: (s, n + 1),\n", "                [file_component_multiple, num_load_btn_2],\n", "                [output_file_2, num_load_btn_2],\n", "            )\n", "    with gr.Row():\n", "        with gr.Column():\n", "            file_component_specific = gr.File(\n", "                label=\"Upload Multiple Files Image/Video\",\n", "                file_count=\"multiple\",\n", "                file_types=[\"image\", \"video\"],\n", "            )\n", "        with gr.Column():\n", "            output_file_3 = gr.File(\n", "                label=\"Upload Multiple Files Output Image/Video\", file_count=\"multiple\"\n", "            )\n", "            num_load_btn_3 = gr.Number(\n", "                label=\"# Load Upload Multiple Files Image/Video\", value=0\n", "            )\n", "            file_component_specific.upload(\n", "                lambda s, n: (s, n + 1),\n", "                [file_component_specific, num_load_btn_3],\n", "                [output_file_3, num_load_btn_3],\n", "            )\n", "    with gr.Row():\n", "        with gr.Column():\n", "            file_component_pdf = gr.File(label=\"Upload PDF File\", file_types=[\".pdf\"])\n", "        with gr.Column():\n", "            output_file_4 = gr.File(label=\"Upload PDF File Output\")\n", "            num_load_btn_4 = gr.Number(label=\"# Load Upload PDF File\", value=0)\n", "            file_component_pdf.upload(\n", "                lambda s, n: (s, n + 1),\n", "                [file_component_pdf, num_load_btn_4],\n", "                [output_file_4, num_load_btn_4],\n", "            )\n", "    with gr.Row():\n", "        with gr.Column():\n", "            file_component_invalid = gr.File(\n", "                label=\"Upload File with Invalid file_types\",\n", "                file_types=[\"invalid file_type\"],\n", "            )\n", "        with gr.Column():\n", "            output_file_5 = gr.File(label=\"Upload File with Invalid file_types Output\")\n", "            num_load_btn_5 = gr.Number(\n", "                label=\"# Load Upload File with Invalid file_types\", value=0\n", "            )\n", "            file_component_invalid.upload(\n", "                lambda s, n: (s, n + 1),\n", "                [file_component_invalid, num_load_btn_5],\n", "                [output_file_5, num_load_btn_5],\n", "            )\n", "    with gr.Row():\n", "        with gr.Column():\n", "            del_file_input = gr.File(label=\"Delete File\", file_count=\"multiple\")\n", "        with gr.Column():\n", "            del_file_data = gr.Textbox(label=\"Delete file data\")\n", "            num_load_btn_6 = gr.Number(label=\"# Deleted File\", value=0)\n", "            del_file_input.delete(\n", "                delete_file,\n", "                [num_load_btn_6],\n", "                [del_file_data, num_load_btn_6],\n", "            )\n", "    # f = gr.File(label=\"Upload many File\", file_count=\"multiple\")\n", "    # # f.delete(delete_file)\n", "    # f.delete(delete_file, inputs=None, outputs=None)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/file_component_events/run.py b/demo/file_component_events/run.py
index 3f157dc2495a3..e1d593f7d2443 100644
--- a/demo/file_component_events/run.py
+++ b/demo/file_component_events/run.py
@@ -54,7 +54,7 @@ def delete_file(n: int, file: gr.DeletedFileData):
             )
     with gr.Row():
         with gr.Column():
-            file_component_pdf = gr.File(label="Upload PDF File", file_types=["pdf"])
+            file_component_pdf = gr.File(label="Upload PDF File", file_types=[".pdf"])
         with gr.Column():
             output_file_4 = gr.File(label="Upload PDF File Output")
             num_load_btn_4 = gr.Number(label="# Load Upload PDF File", value=0)
diff --git a/demo/file_explorer_component_events/run.ipynb b/demo/file_explorer_component_events/run.ipynb
index 5a6c915bbbf3c..bc81feb0bd465 100644
--- a/demo/file_explorer_component_events/run.ipynb
+++ b/demo/file_explorer_component_events/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: file_explorer_component_events"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('dir1')\n", "!wget -q -O dir1/bar.txt https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir1/bar.txt\n", "!wget -q -O dir1/foo.txt https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir1/foo.txt\n", "os.mkdir('dir2')\n", "!wget -q -O dir2/baz.png https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir2/baz.png\n", "!wget -q -O dir2/foo.png https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir2/foo.png\n", "os.mkdir('dir3')\n", "!wget -q -O dir3/dir3_bar.log https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir3/dir3_bar.log\n", "!wget -q -O dir3/dir3_foo.txt https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir3/dir3_foo.txt\n", "!wget -q -O dir3/dir4 https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir3/dir4"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from pathlib import Path\n", "\n", "base_root = Path(__file__).parent.resolve()\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        dd = gr.Dropdown(label=\"Select File Explorer Root\",\n", "                        value=str(base_root / \"dir1\"),\n", "                        choices=[str(base_root / \"dir1\"), str(base_root / \"dir2\"),\n", "                                 str(base_root / \"dir3\")])\n", "        with gr.Group():\n", "            txt_only_glob = gr.Checkbox(label=\"Show only text files\", value=False)\n", "            ignore_txt_in_glob = gr.Checkbox(label=\"Ignore text files in glob\", value=False)\n", "\n", "    fe = gr.FileExplorer(root_dir=str(base_root / \"dir1\"),\n", "                         glob=\"**/*\", interactive=True)\n", "    textbox = gr.Textbox(label=\"Selected Directory\")\n", "    run = gr.Button(\"Run\")\n", "    total_changes = gr.Number(0, elem_id=\"total-changes\")\n", "\n", "    txt_only_glob.select(lambda s: gr.FileExplorer(glob=\"*.txt\" if s else \"*\") ,\n", "                         inputs=[txt_only_glob], outputs=[fe])\n", "    ignore_txt_in_glob.select(lambda s: gr.FileExplorer(ignore_glob=\"*.txt\" if s else None),\n", "                            inputs=[ignore_txt_in_glob], outputs=[fe])\n", "\n", "    dd.select(lambda s: gr.FileExplorer(root=s), inputs=[dd], outputs=[fe])\n", "    run.click(lambda s: \",\".join(s) if isinstance(s, list) else s, inputs=[fe], outputs=[textbox])\n", "    fe.change(lambda num: num + 1, inputs=total_changes, outputs=total_changes)\n", "\n", "    with gr.Row():\n", "        a = gr.Textbox(elem_id=\"input-box\")\n", "        a.change(lambda x: x, inputs=[a])\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: file_explorer_component_events"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('dir1')\n", "!wget -q -O dir1/bar.txt https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir1/bar.txt\n", "!wget -q -O dir1/foo.txt https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir1/foo.txt\n", "os.mkdir('dir2')\n", "!wget -q -O dir2/baz.png https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir2/baz.png\n", "!wget -q -O dir2/foo.png https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir2/foo.png\n", "os.mkdir('dir3')\n", "!wget -q -O dir3/dir3_bar.log https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir3/dir3_bar.log\n", "!wget -q -O dir3/dir3_foo.txt https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir3/dir3_foo.txt\n", "!wget -q -O dir3/dir4 https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir3/dir4"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from pathlib import Path\n", "\n", "base_root = Path(__file__).parent.resolve()\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        dd = gr.Dropdown(label=\"Select File Explorer Root\",\n", "                        value=str(base_root / \"dir1\"),\n", "                        choices=[str(base_root / \"dir1\"), str(base_root / \"dir2\"),\n", "                                 str(base_root / \"dir3\")])\n", "        with gr.Group():\n", "            txt_only_glob = gr.Checkbox(label=\"Show only text files\", value=False)\n", "            ignore_txt_in_glob = gr.Checkbox(label=\"Ignore text files in glob\", value=False)\n", "\n", "    fe = gr.FileExplorer(root_dir=str(base_root / \"dir1\"),\n", "                         glob=\"**/*\", interactive=True)\n", "    textbox = gr.Textbox(label=\"Selected Directory\")\n", "    run = gr.Button(\"Run\")\n", "    total_changes = gr.Number(0, elem_id=\"total-changes\")\n", "\n", "    txt_only_glob.select(lambda s: gr.FileExplorer(glob=\"*.txt\" if s else \"*\") ,\n", "                         inputs=[txt_only_glob], outputs=[fe])\n", "    ignore_txt_in_glob.select(lambda s: gr.FileExplorer(ignore_glob=\"*.txt\" if s else None),\n", "                            inputs=[ignore_txt_in_glob], outputs=[fe])\n", "\n", "    dd.select(lambda s: gr.FileExplorer(root_dir=s), inputs=[dd], outputs=[fe])\n", "    run.click(lambda s: \",\".join(s) if isinstance(s, list) else s, inputs=[fe], outputs=[textbox])\n", "    fe.change(lambda num: num + 1, inputs=total_changes, outputs=total_changes)\n", "\n", "    with gr.Row():\n", "        a = gr.Textbox(elem_id=\"input-box\")\n", "        a.change(lambda x: x, inputs=[a])\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/file_explorer_component_events/run.py b/demo/file_explorer_component_events/run.py
index d81b33a9e5de6..f8e5349a05598 100644
--- a/demo/file_explorer_component_events/run.py
+++ b/demo/file_explorer_component_events/run.py
@@ -24,7 +24,7 @@
     ignore_txt_in_glob.select(lambda s: gr.FileExplorer(ignore_glob="*.txt" if s else None),
                             inputs=[ignore_txt_in_glob], outputs=[fe])
 
-    dd.select(lambda s: gr.FileExplorer(root=s), inputs=[dd], outputs=[fe])
+    dd.select(lambda s: gr.FileExplorer(root_dir=s), inputs=[dd], outputs=[fe])
     run.click(lambda s: ",".join(s) if isinstance(s, list) else s, inputs=[fe], outputs=[textbox])
     fe.change(lambda num: num + 1, inputs=total_changes, outputs=total_changes)
 
diff --git a/demo/gallery_component/files/cheetah.jpg b/demo/gallery_component/files/cheetah.jpg
new file mode 100644
index 0000000000000..d1fde62d026ae
Binary files /dev/null and b/demo/gallery_component/files/cheetah.jpg differ
diff --git a/demo/gallery_component/files/world.mp4 b/demo/gallery_component/files/world.mp4
new file mode 100644
index 0000000000000..b11552f9cb693
Binary files /dev/null and b/demo/gallery_component/files/world.mp4 differ
diff --git a/demo/gallery_component/run.ipynb b/demo/gallery_component/run.ipynb
index 7b9f7d9ca1284..420c19627aa9d 100644
--- a/demo/gallery_component/run.ipynb
+++ b/demo/gallery_component/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: gallery_component"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    cheetahs = [\n", "        \"https://upload.wikimedia.org/wikipedia/commons/0/09/TheCheethcat.jpg\",\n", "        \"https://nationalzoo.si.edu/sites/default/files/animals/cheetah-003.jpg\",\n", "        \"https://img.etimg.com/thumb/msid-50159822,width-650,imgsize-129520,,resizemode-4,quality-100/.jpg\",\n", "        \"https://nationalzoo.si.edu/sites/default/files/animals/cheetah-002.jpg\",\n", "        \"https://images.theconversation.com/files/375893/original/file-20201218-13-a8h8uq.jpg?ixlib=rb-1.1.0&rect=16%2C407%2C5515%2C2924&q=45&auto=format&w=496&fit=clip\",\n", "    ]\n", "    gr.Gallery(value=cheetahs, columns=4)\n", "\n", "demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: gallery_component"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('files')\n", "!wget -q -O files/cheetah.jpg https://github.com/gradio-app/gradio/raw/main/demo/gallery_component/files/cheetah.jpg\n", "!wget -q -O files/world.mp4 https://github.com/gradio-app/gradio/raw/main/demo/gallery_component/files/world.mp4"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    gallery_items = [\n", "        (\"https://upload.wikimedia.org/wikipedia/commons/0/09/TheCheethcat.jpg\", \"cheetah1\"),\n", "        (\"https://nationalzoo.si.edu/sites/default/files/animals/cheetah-003.jpg\", \"cheetah2\"),\n", "        (\"https://videos.pexels.com/video-files/3209828/3209828-uhd_2560_1440_25fps.mp4\", \"world\"),\n", "        (\"files/cheetah.jpg\", \"cheetah3\"),\n", "        (\"files/world.mp4\", \"world2\")\n", "    ]\n", "    gr.Gallery(value=gallery_items, columns=4)\n", "\n", "demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/gallery_component/run.py b/demo/gallery_component/run.py
index cd27c44d1896e..6187da2f3e486 100644
--- a/demo/gallery_component/run.py
+++ b/demo/gallery_component/run.py
@@ -1,13 +1,13 @@
 import gradio as gr
 
 with gr.Blocks() as demo:
-    cheetahs = [
-        "https://upload.wikimedia.org/wikipedia/commons/0/09/TheCheethcat.jpg",
-        "https://nationalzoo.si.edu/sites/default/files/animals/cheetah-003.jpg",
-        "https://img.etimg.com/thumb/msid-50159822,width-650,imgsize-129520,,resizemode-4,quality-100/.jpg",
-        "https://nationalzoo.si.edu/sites/default/files/animals/cheetah-002.jpg",
-        "https://images.theconversation.com/files/375893/original/file-20201218-13-a8h8uq.jpg?ixlib=rb-1.1.0&rect=16%2C407%2C5515%2C2924&q=45&auto=format&w=496&fit=clip",
+    gallery_items = [
+        ("https://upload.wikimedia.org/wikipedia/commons/0/09/TheCheethcat.jpg", "cheetah1"),
+        ("https://nationalzoo.si.edu/sites/default/files/animals/cheetah-003.jpg", "cheetah2"),
+        ("https://videos.pexels.com/video-files/3209828/3209828-uhd_2560_1440_25fps.mp4", "world"),
+        ("files/cheetah.jpg", "cheetah3"),
+        ("files/world.mp4", "world2")
     ]
-    gr.Gallery(value=cheetahs, columns=4)
+    gr.Gallery(value=gallery_items, columns=4)
 
 demo.launch()
diff --git a/demo/gallery_component_events/run.ipynb b/demo/gallery_component_events/run.ipynb
index 0b5bdf13c1aac..24e59d4c0794e 100644
--- a/demo/gallery_component_events/run.ipynb
+++ b/demo/gallery_component_events/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: gallery_component_events"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    cheetahs = [\n", "        \"https://gradio-builds.s3.amazonaws.com/assets/cheetah-003.jpg\",\n", "        \"https://gradio-builds.s3.amazonaws.com/assets/lite-logo.png\",\n", "        \"https://gradio-builds.s3.amazonaws.com/assets/TheCheethcat.jpg\",\n", "    ]\n", "    with gr.Row():\n", "        with gr.Column():\n", "            gal = gr.Gallery(columns=4, interactive=True, label=\"Input Gallery\")\n", "            btn = gr.Button()\n", "        with gr.Column():\n", "            output_gal = gr.Gallery(columns=4, interactive=True, label=\"Output Gallery\")\n", "    with gr.Row():\n", "        textbox = gr.Json(label=\"uploaded files\")\n", "        num_upload = gr.Number(value=0, label=\"Num Upload\")\n", "        num_change = gr.Number(value=0, label=\"Num Change\")\n", "        select_output = gr.Textbox(label=\"Select Data\")\n", "        gal.upload(lambda v,n: (v, v, n+1), [gal, num_upload], [textbox, output_gal, num_upload])\n", "        gal.change(lambda v,n: (v, v, n+1), [gal, num_change], [textbox, output_gal, num_change])\n", "\n", "    btn.click(lambda: cheetahs, None, [output_gal])\n", "\n", "    def select(select_data: gr.SelectData):\n", "        return select_data.value['image']['url']\n", "\n", "    output_gal.select(select, None, select_output)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: gallery_component_events"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    files = [\n", "        \"https://gradio-builds.s3.amazonaws.com/assets/cheetah-003.jpg\",\n", "        \"https://gradio-static-files.s3.amazonaws.com/world.mp4\",\n", "        \"https://gradio-builds.s3.amazonaws.com/assets/TheCheethcat.jpg\",\n", "    ]\n", "    with gr.Row():\n", "        with gr.Column():\n", "            gal = gr.Gallery(columns=4, interactive=True, label=\"Input Gallery\")\n", "            btn = gr.Button()\n", "        with gr.Column():\n", "            output_gal = gr.Gallery(columns=4, interactive=True, label=\"Output Gallery\")\n", "    with gr.Row():\n", "        textbox = gr.Json(label=\"uploaded files\")\n", "        num_upload = gr.Number(value=0, label=\"Num Upload\")\n", "        num_change = gr.Number(value=0, label=\"Num Change\")\n", "        select_output = gr.Textbox(label=\"Select Data\")\n", "        gal.upload(lambda v,n: (v, v, n+1), [gal, num_upload], [textbox, output_gal, num_upload])\n", "        gal.change(lambda v,n: (v, v, n+1), [gal, num_change], [textbox, output_gal, num_change])\n", "\n", "    btn.click(lambda: files, None, [output_gal])\n", "\n", "    def select(select_data: gr.SelectData):\n", "        return select_data.value['image']['url'] if 'image' in select_data.value else select_data.value['video']['url']\n", "\n", "    output_gal.select(select, None, select_output)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/gallery_component_events/run.py b/demo/gallery_component_events/run.py
index efbcf0ab03b5e..fa9f9cbf33e9f 100644
--- a/demo/gallery_component_events/run.py
+++ b/demo/gallery_component_events/run.py
@@ -1,9 +1,9 @@
 import gradio as gr
 
 with gr.Blocks() as demo:
-    cheetahs = [
+    files = [
         "https://gradio-builds.s3.amazonaws.com/assets/cheetah-003.jpg",
-        "https://gradio-builds.s3.amazonaws.com/assets/lite-logo.png",
+        "https://gradio-static-files.s3.amazonaws.com/world.mp4",
         "https://gradio-builds.s3.amazonaws.com/assets/TheCheethcat.jpg",
     ]
     with gr.Row():
@@ -20,10 +20,10 @@
         gal.upload(lambda v,n: (v, v, n+1), [gal, num_upload], [textbox, output_gal, num_upload])
         gal.change(lambda v,n: (v, v, n+1), [gal, num_change], [textbox, output_gal, num_change])
 
-    btn.click(lambda: cheetahs, None, [output_gal])
+    btn.click(lambda: files, None, [output_gal])
 
     def select(select_data: gr.SelectData):
-        return select_data.value['image']['url']
+        return select_data.value['image']['url'] if 'image' in select_data.value else select_data.value['video']['url']
 
     output_gal.select(select, None, select_output)
 
diff --git a/demo/gallery_selections/requirements.txt b/demo/gallery_selections/requirements.txt
new file mode 100644
index 0000000000000..24ce15ab7ead3
--- /dev/null
+++ b/demo/gallery_selections/requirements.txt
@@ -0,0 +1 @@
+numpy
diff --git a/demo/gallery_selections/run.ipynb b/demo/gallery_selections/run.ipynb
index a07e4e5fa362f..345818c2f26c8 100644
--- a/demo/gallery_selections/run.ipynb
+++ b/demo/gallery_selections/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: gallery_selections"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import numpy as np\n", "\n", "with gr.Blocks() as demo:\n", "    imgs = gr.State()\n", "    gallery = gr.Gallery(allow_preview=False)\n", "\n", "    def deselect_images():\n", "        return gr.Gallery(selected_index=None)\n", "\n", "    def generate_images():\n", "        images = []\n", "        for _ in range(9):\n", "            image = np.ones((100, 100, 3), dtype=np.uint8) * np.random.randint(\n", "                0, 255, 3\n", "            )  # image is a solid single color\n", "            images.append(image)\n", "        return images, images\n", "\n", "    demo.load(generate_images, None, [gallery, imgs])\n", "\n", "    with gr.Row():\n", "        selected = gr.Number(show_label=False)\n", "        darken_btn = gr.Button(\"Darken selected\")\n", "    deselect_button = gr.Button(\"Deselect\")\n", "\n", "    deselect_button.click(deselect_images, None, gallery)\n", "\n", "    def get_select_index(evt: gr.SelectData):\n", "        return evt.index\n", "\n", "    gallery.select(get_select_index, None, selected)\n", "\n", "    def darken_img(imgs, index):\n", "        index = int(index)\n", "        imgs[index] = np.round(imgs[index] * 0.8).astype(np.uint8)\n", "        return imgs, imgs\n", "\n", "    darken_btn.click(darken_img, [imgs, selected], [imgs, gallery])\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: gallery_selections"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import numpy as np\n", "\n", "with gr.Blocks() as demo:\n", "    imgs = gr.State()\n", "    gallery = gr.Gallery(allow_preview=False)\n", "\n", "    def deselect_images():\n", "        return gr.Gallery(selected_index=None)\n", "\n", "    def generate_images():\n", "        images = []\n", "        for _ in range(9):\n", "            image = np.ones((100, 100, 3), dtype=np.uint8) * np.random.randint(\n", "                0, 255, 3\n", "            )  # image is a solid single color\n", "            images.append(image)\n", "        return images, images\n", "\n", "    demo.load(generate_images, None, [gallery, imgs])\n", "\n", "    with gr.Row():\n", "        selected = gr.Number(show_label=False)\n", "        darken_btn = gr.Button(\"Darken selected\")\n", "    deselect_button = gr.Button(\"Deselect\")\n", "\n", "    deselect_button.click(deselect_images, None, gallery)\n", "\n", "    def get_select_index(evt: gr.SelectData):\n", "        return evt.index\n", "\n", "    gallery.select(get_select_index, None, selected)\n", "\n", "    def darken_img(imgs, index):\n", "        index = int(index)\n", "        imgs[index] = np.round(imgs[index] * 0.8).astype(np.uint8)\n", "        return imgs, imgs\n", "\n", "    darken_btn.click(darken_img, [imgs, selected], [imgs, gallery])\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/hello_blocks/run.ipynb b/demo/hello_blocks/run.ipynb
index 9d509b14150e0..04ab5cb198579 100644
--- a/demo/hello_blocks/run.ipynb
+++ b/demo/hello_blocks/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: hello_blocks"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "def greet(name):\n", "    return \"Hello \" + name + \"!\"\n", "\n", "with gr.Blocks() as demo:\n", "    name = gr.Textbox(label=\"Name\")\n", "    output = gr.Textbox(label=\"Output Box\")\n", "    greet_btn = gr.Button(\"Greet\")\n", "    greet_btn.click(fn=greet, inputs=name, outputs=output, api_name=\"greet\")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: hello_blocks"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "\n", "def greet(name):\n", "    return \"Hello \" + name + \"!\"\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    name = gr.Textbox(label=\"Name\")\n", "    output = gr.Textbox(label=\"Output Box\")\n", "    greet_btn = gr.Button(\"Greet\")\n", "    greet_btn.click(fn=greet, inputs=name, outputs=output, api_name=\"greet\")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/hello_blocks/run.py b/demo/hello_blocks/run.py
index bfb65715686ac..f11bca19f42a7 100644
--- a/demo/hello_blocks/run.py
+++ b/demo/hello_blocks/run.py
@@ -1,8 +1,10 @@
 import gradio as gr
 
+
 def greet(name):
     return "Hello " + name + "!"
 
+
 with gr.Blocks() as demo:
     name = gr.Textbox(label="Name")
     output = gr.Textbox(label="Output Box")
diff --git a/demo/hello_world/run.ipynb b/demo/hello_world/run.ipynb
index ddfe0d41accb4..c6614e5d3a57b 100644
--- a/demo/hello_world/run.ipynb
+++ b/demo/hello_world/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: hello_world\n", "### The simplest possible Gradio demo. It wraps a 'Hello {name}!' function in an Interface that accepts and returns text.\n", "        "]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "def greet(name):\n", "    return \"Hello \" + name + \"!\"\n", "\n", "demo = gr.Interface(fn=greet, inputs=\"textbox\", outputs=\"textbox\")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: hello_world\n", "### The simplest possible Gradio demo. It wraps a 'Hello {name}!' function in an Interface that accepts and returns text.\n", "        "]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "\n", "def greet(name):\n", "    return \"Hello \" + name + \"!\"\n", "\n", "\n", "demo = gr.Interface(fn=greet, inputs=\"textbox\", outputs=\"textbox\")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/hello_world/run.py b/demo/hello_world/run.py
index 15e7cb988b942..8179c16a51dee 100644
--- a/demo/hello_world/run.py
+++ b/demo/hello_world/run.py
@@ -1,8 +1,10 @@
 import gradio as gr
 
+
 def greet(name):
     return "Hello " + name + "!"
 
+
 demo = gr.Interface(fn=greet, inputs="textbox", outputs="textbox")
 
 if __name__ == "__main__":
diff --git a/demo/hello_world_4/screenshot.gif b/demo/hello_world_4/screenshot.gif
index 32c4fd62f4dfb..eb7e3352b4868 100644
Binary files a/demo/hello_world_4/screenshot.gif and b/demo/hello_world_4/screenshot.gif differ
diff --git a/demo/image_classification/requirements.txt b/demo/image_classification/requirements.txt
index 37f700a78ecad..5ec204513fa11 100644
--- a/demo/image_classification/requirements.txt
+++ b/demo/image_classification/requirements.txt
@@ -1,2 +1,3 @@
 torch
-torchvision
\ No newline at end of file
+torchvision
+requests
diff --git a/demo/image_classification/run.ipynb b/demo/image_classification/run.ipynb
index c3711bde42867..d2e91908bb3d0 100644
--- a/demo/image_classification/run.ipynb
+++ b/demo/image_classification/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: image_classification\n", "### Simple image classification in Pytorch with Gradio's Image input and Label output.\n", "        "]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio torch torchvision"]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/image_classification/cheetah.jpg"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import torch\n", "import requests\n", "from torchvision import transforms\n", "\n", "model = torch.hub.load('pytorch/vision:v0.6.0', 'resnet18', pretrained=True).eval()\n", "response = requests.get(\"https://git.io/JJkYN\")\n", "labels = response.text.split(\"\\n\")\n", "\n", "def predict(inp):\n", "  inp = transforms.ToTensor()(inp).unsqueeze(0)\n", "  with torch.no_grad():\n", "    prediction = torch.nn.functional.softmax(model(inp)[0], dim=0)\n", "    confidences = {labels[i]: float(prediction[i]) for i in range(1000)}\n", "  return confidences\n", "\n", "demo = gr.Interface(fn=predict,\n", "             inputs=gr.Image(type=\"pil\"),\n", "             outputs=gr.Label(num_top_classes=3),\n", "             examples=[[\"cheetah.jpg\"]],\n", "             )\n", "\n", "demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: image_classification\n", "### Simple image classification in Pytorch with Gradio's Image input and Label output.\n", "        "]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio torch torchvision requests "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/image_classification/cheetah.jpg"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import torch\n", "import requests\n", "from torchvision import transforms\n", "\n", "model = torch.hub.load('pytorch/vision:v0.6.0', 'resnet18', pretrained=True).eval()\n", "response = requests.get(\"https://git.io/JJkYN\")\n", "labels = response.text.split(\"\\n\")\n", "\n", "def predict(inp):\n", "  inp = transforms.ToTensor()(inp).unsqueeze(0)\n", "  with torch.no_grad():\n", "    prediction = torch.nn.functional.softmax(model(inp)[0], dim=0)\n", "    confidences = {labels[i]: float(prediction[i]) for i in range(1000)}\n", "  return confidences\n", "\n", "demo = gr.Interface(fn=predict,\n", "             inputs=gr.Image(type=\"pil\"),\n", "             outputs=gr.Label(num_top_classes=3),\n", "             examples=[[\"cheetah.jpg\"]],\n", "             )\n", "\n", "demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/image_classifier/requirements.txt b/demo/image_classifier/requirements.txt
index c2bbfa1f2b3c7..7947059c17d1e 100644
--- a/demo/image_classifier/requirements.txt
+++ b/demo/image_classifier/requirements.txt
@@ -1,2 +1,3 @@
 numpy
-tensorflow
\ No newline at end of file
+tensorflow
+requests
diff --git a/demo/image_classifier/run.ipynb b/demo/image_classifier/run.ipynb
index b20982b9d799c..10e0f1b812c4f 100644
--- a/demo/image_classifier/run.ipynb
+++ b/demo/image_classifier/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: image_classifier"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy tensorflow"]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('files')\n", "!wget -q -O files/imagenet_labels.json https://github.com/gradio-app/gradio/raw/main/demo/image_classifier/files/imagenet_labels.json\n", "os.mkdir('images')\n", "!wget -q -O images/cheetah1.jpg https://github.com/gradio-app/gradio/raw/main/demo/image_classifier/images/cheetah1.jpg\n", "!wget -q -O images/lion.jpg https://github.com/gradio-app/gradio/raw/main/demo/image_classifier/images/lion.jpg"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import os\n", "import requests\n", "import tensorflow as tf\n", "\n", "import gradio as gr\n", "\n", "inception_net = tf.keras.applications.MobileNetV2()  # load the model\n", "\n", "# Download human-readable labels for ImageNet.\n", "response = requests.get(\"https://git.io/JJkYN\")\n", "labels = response.text.split(\"\\n\")\n", "\n", "def classify_image(inp):\n", "    inp = inp.reshape((-1, 224, 224, 3))\n", "    inp = tf.keras.applications.mobilenet_v2.preprocess_input(inp)\n", "    prediction = inception_net.predict(inp).flatten()\n", "    return {labels[i]: float(prediction[i]) for i in range(1000)}\n", "\n", "image = gr.Image()\n", "label = gr.Label(num_top_classes=3)\n", "\n", "demo = gr.Interface(\n", "    fn=classify_image,\n", "    inputs=image,\n", "    outputs=label,\n", "    examples=[\n", "        os.path.join(os.path.abspath(''), \"images/cheetah1.jpg\"),\n", "        os.path.join(os.path.abspath(''), \"images/lion.jpg\")\n", "        ]\n", "    )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n", "\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: image_classifier"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy tensorflow requests "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('files')\n", "!wget -q -O files/imagenet_labels.json https://github.com/gradio-app/gradio/raw/main/demo/image_classifier/files/imagenet_labels.json\n", "os.mkdir('images')\n", "!wget -q -O images/cheetah1.jpg https://github.com/gradio-app/gradio/raw/main/demo/image_classifier/images/cheetah1.jpg\n", "!wget -q -O images/lion.jpg https://github.com/gradio-app/gradio/raw/main/demo/image_classifier/images/lion.jpg"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import os\n", "import requests\n", "import tensorflow as tf\n", "\n", "import gradio as gr\n", "\n", "inception_net = tf.keras.applications.MobileNetV2()  # load the model\n", "\n", "# Download human-readable labels for ImageNet.\n", "response = requests.get(\"https://git.io/JJkYN\")\n", "labels = response.text.split(\"\\n\")\n", "\n", "def classify_image(inp):\n", "    inp = inp.reshape((-1, 224, 224, 3))\n", "    inp = tf.keras.applications.mobilenet_v2.preprocess_input(inp)\n", "    prediction = inception_net.predict(inp).flatten()\n", "    return {labels[i]: float(prediction[i]) for i in range(1000)}\n", "\n", "image = gr.Image()\n", "label = gr.Label(num_top_classes=3)\n", "\n", "demo = gr.Interface(\n", "    fn=classify_image,\n", "    inputs=image,\n", "    outputs=label,\n", "    examples=[\n", "        os.path.join(os.path.abspath(''), \"images/cheetah1.jpg\"),\n", "        os.path.join(os.path.abspath(''), \"images/lion.jpg\")\n", "        ]\n", "    )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n", "\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/image_classifier_2/requirements.txt b/demo/image_classifier_2/requirements.txt
index 2ab187b1e3517..0396385ef5137 100644
--- a/demo/image_classifier_2/requirements.txt
+++ b/demo/image_classifier_2/requirements.txt
@@ -1,3 +1,4 @@
 pillow
 torch
-torchvision
\ No newline at end of file
+torchvision
+requests
diff --git a/demo/image_classifier_2/run.ipynb b/demo/image_classifier_2/run.ipynb
index 980e09519df10..b87f6a86592f3 100644
--- a/demo/image_classifier_2/run.ipynb
+++ b/demo/image_classifier_2/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: image_classifier_2"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio pillow torch torchvision"]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('files')\n", "!wget -q -O files/imagenet_labels.json https://github.com/gradio-app/gradio/raw/main/demo/image_classifier_2/files/imagenet_labels.json"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import requests\n", "import torch\n", "from PIL import Image\n", "from torchvision import transforms\n", "\n", "import gradio as gr\n", "\n", "model = torch.hub.load(\"pytorch/vision:v0.6.0\", \"resnet18\", pretrained=True).eval()\n", "\n", "# Download human-readable labels for ImageNet.\n", "response = requests.get(\"https://git.io/JJkYN\")\n", "labels = response.text.split(\"\\n\")\n", "\n", "def predict(inp):\n", "    inp = Image.fromarray(inp.astype(\"uint8\"), \"RGB\")\n", "    inp = transforms.ToTensor()(inp).unsqueeze(0)\n", "    with torch.no_grad():\n", "        prediction = torch.nn.functional.softmax(model(inp)[0], dim=0)\n", "    return {labels[i]: float(prediction[i]) for i in range(1000)}\n", "\n", "inputs = gr.Image()\n", "outputs = gr.Label(num_top_classes=3)\n", "\n", "demo = gr.Interface(fn=predict, inputs=inputs, outputs=outputs)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: image_classifier_2"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio pillow torch torchvision requests "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('files')\n", "!wget -q -O files/imagenet_labels.json https://github.com/gradio-app/gradio/raw/main/demo/image_classifier_2/files/imagenet_labels.json"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import requests\n", "import torch\n", "from PIL import Image\n", "from torchvision import transforms\n", "\n", "import gradio as gr\n", "\n", "model = torch.hub.load(\"pytorch/vision:v0.6.0\", \"resnet18\", pretrained=True).eval()\n", "\n", "# Download human-readable labels for ImageNet.\n", "response = requests.get(\"https://git.io/JJkYN\")\n", "labels = response.text.split(\"\\n\")\n", "\n", "def predict(inp):\n", "    inp = Image.fromarray(inp.astype(\"uint8\"), \"RGB\")\n", "    inp = transforms.ToTensor()(inp).unsqueeze(0)\n", "    with torch.no_grad():\n", "        prediction = torch.nn.functional.softmax(model(inp)[0], dim=0)\n", "    return {labels[i]: float(prediction[i]) for i in range(1000)}\n", "\n", "inputs = gr.Image()\n", "outputs = gr.Label(num_top_classes=3)\n", "\n", "demo = gr.Interface(fn=predict, inputs=inputs, outputs=outputs)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/image_segmentation/requirements.txt b/demo/image_segmentation/requirements.txt
new file mode 100644
index 0000000000000..24ce15ab7ead3
--- /dev/null
+++ b/demo/image_segmentation/requirements.txt
@@ -0,0 +1 @@
+numpy
diff --git a/demo/image_segmentation/run.ipynb b/demo/image_segmentation/run.ipynb
index ac39c2862e509..a4406e9d0af3c 100644
--- a/demo/image_segmentation/run.ipynb
+++ b/demo/image_segmentation/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: image_segmentation\n", "### Simple image segmentation using gradio's AnnotatedImage component.\n", "        "]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import numpy as np\n", "import random\n", "\n", "with gr.Blocks() as demo:\n", "    section_labels = [\n", "        \"apple\",\n", "        \"banana\",\n", "        \"carrot\",\n", "        \"donut\",\n", "        \"eggplant\",\n", "        \"fish\",\n", "        \"grapes\",\n", "        \"hamburger\",\n", "        \"ice cream\",\n", "        \"juice\",\n", "    ]\n", "\n", "    with gr.Row():\n", "        num_boxes = gr.Slider(0, 5, 2, step=1, label=\"Number of boxes\")\n", "        num_segments = gr.Slider(0, 5, 1, step=1, label=\"Number of segments\")\n", "\n", "    with gr.Row():\n", "        img_input = gr.Image()\n", "        img_output = gr.AnnotatedImage(\n", "            color_map={\"banana\": \"#a89a00\", \"carrot\": \"#ffae00\"}\n", "        )\n", "\n", "    section_btn = gr.Button(\"Identify Sections\")\n", "    selected_section = gr.Textbox(label=\"Selected Section\")\n", "\n", "    def section(img, num_boxes, num_segments):\n", "        sections = []\n", "        for a in range(num_boxes):\n", "            x = random.randint(0, img.shape[1])\n", "            y = random.randint(0, img.shape[0])\n", "            w = random.randint(0, img.shape[1] - x)\n", "            h = random.randint(0, img.shape[0] - y)\n", "            sections.append(((x, y, x + w, y + h), section_labels[a]))\n", "        for b in range(num_segments):\n", "            x = random.randint(0, img.shape[1])\n", "            y = random.randint(0, img.shape[0])\n", "            r = random.randint(0, min(x, y, img.shape[1] - x, img.shape[0] - y))\n", "            mask = np.zeros(img.shape[:2])\n", "            for i in range(img.shape[0]):\n", "                for j in range(img.shape[1]):\n", "                    dist_square = (i - y) ** 2 + (j - x) ** 2\n", "                    if dist_square < r**2:\n", "                        mask[i, j] = round((r**2 - dist_square) / r**2 * 4) / 4\n", "            sections.append((mask, section_labels[b + num_boxes]))\n", "        return (img, sections)\n", "\n", "    section_btn.click(section, [img_input, num_boxes, num_segments], img_output)\n", "\n", "    def select_section(evt: gr.SelectData):\n", "        return section_labels[evt.index]\n", "\n", "    img_output.select(select_section, None, selected_section)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: image_segmentation\n", "### Simple image segmentation using gradio's AnnotatedImage component.\n", "        "]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import numpy as np\n", "import random\n", "\n", "with gr.Blocks() as demo:\n", "    section_labels = [\n", "        \"apple\",\n", "        \"banana\",\n", "        \"carrot\",\n", "        \"donut\",\n", "        \"eggplant\",\n", "        \"fish\",\n", "        \"grapes\",\n", "        \"hamburger\",\n", "        \"ice cream\",\n", "        \"juice\",\n", "    ]\n", "\n", "    with gr.Row():\n", "        num_boxes = gr.Slider(0, 5, 2, step=1, label=\"Number of boxes\")\n", "        num_segments = gr.Slider(0, 5, 1, step=1, label=\"Number of segments\")\n", "\n", "    with gr.Row():\n", "        img_input = gr.Image()\n", "        img_output = gr.AnnotatedImage(\n", "            color_map={\"banana\": \"#a89a00\", \"carrot\": \"#ffae00\"}\n", "        )\n", "\n", "    section_btn = gr.Button(\"Identify Sections\")\n", "    selected_section = gr.Textbox(label=\"Selected Section\")\n", "\n", "    def section(img, num_boxes, num_segments):\n", "        sections = []\n", "        for a in range(num_boxes):\n", "            x = random.randint(0, img.shape[1])\n", "            y = random.randint(0, img.shape[0])\n", "            w = random.randint(0, img.shape[1] - x)\n", "            h = random.randint(0, img.shape[0] - y)\n", "            sections.append(((x, y, x + w, y + h), section_labels[a]))\n", "        for b in range(num_segments):\n", "            x = random.randint(0, img.shape[1])\n", "            y = random.randint(0, img.shape[0])\n", "            r = random.randint(0, min(x, y, img.shape[1] - x, img.shape[0] - y))\n", "            mask = np.zeros(img.shape[:2])\n", "            for i in range(img.shape[0]):\n", "                for j in range(img.shape[1]):\n", "                    dist_square = (i - y) ** 2 + (j - x) ** 2\n", "                    if dist_square < r**2:\n", "                        mask[i, j] = round((r**2 - dist_square) / r**2 * 4) / 4\n", "            sections.append((mask, section_labels[b + num_boxes]))\n", "        return (img, sections)\n", "\n", "    section_btn.click(section, [img_input, num_boxes, num_segments], img_output)\n", "\n", "    def select_section(evt: gr.SelectData):\n", "        return section_labels[evt.index]\n", "\n", "    img_output.select(select_section, None, selected_section)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/image_selections/requirements.txt b/demo/image_selections/requirements.txt
new file mode 100644
index 0000000000000..24ce15ab7ead3
--- /dev/null
+++ b/demo/image_selections/requirements.txt
@@ -0,0 +1 @@
+numpy
diff --git a/demo/image_selections/run.ipynb b/demo/image_selections/run.ipynb
index 5a5ee6a911946..236eea722abcd 100644
--- a/demo/image_selections/run.ipynb
+++ b/demo/image_selections/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: image_selections"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import numpy as np\n", "\n", "with gr.Blocks() as demo:\n", "    tolerance = gr.Slider(label=\"Tolerance\", info=\"How different colors can be in a segment.\", minimum=0, maximum=256*3, value=50)\n", "    with gr.Row():\n", "        input_img = gr.Image(label=\"Input\")\n", "        output_img = gr.Image(label=\"Selected Segment\")\n", "\n", "    def get_select_coords(img, tolerance, evt: gr.SelectData):\n", "        visited_pixels = set()\n", "        pixels_in_queue = set()\n", "        pixels_in_segment = set()\n", "        start_pixel = img[evt.index[1], evt.index[0]]\n", "        pixels_in_queue.add((evt.index[1], evt.index[0]))\n", "        while len(pixels_in_queue) > 0:\n", "            pixel = pixels_in_queue.pop()\n", "            visited_pixels.add(pixel)\n", "            neighbors = []\n", "            if pixel[0] > 0:\n", "                neighbors.append((pixel[0] - 1, pixel[1]))\n", "            if pixel[0] < img.shape[0] - 1:\n", "                neighbors.append((pixel[0] + 1, pixel[1]))\n", "            if pixel[1] > 0:\n", "                neighbors.append((pixel[0], pixel[1] - 1))\n", "            if pixel[1] < img.shape[1] - 1:\n", "                neighbors.append((pixel[0], pixel[1] + 1))\n", "            for neighbor in neighbors:\n", "                if neighbor in visited_pixels:\n", "                    continue\n", "                neighbor_pixel = img[neighbor[0], neighbor[1]]\n", "                if np.abs(neighbor_pixel - start_pixel).sum() < tolerance:\n", "                    pixels_in_queue.add(neighbor)\n", "                    pixels_in_segment.add(neighbor)\n", "\n", "        out = img.copy() * 0.2\n", "        out = out.astype(np.uint8)\n", "        for pixel in pixels_in_segment:\n", "            out[pixel[0], pixel[1]] = img[pixel[0], pixel[1]]\n", "        return out\n", "\n", "    input_img.select(get_select_coords, [input_img, tolerance], output_img)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: image_selections"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import numpy as np\n", "\n", "with gr.Blocks() as demo:\n", "    tolerance = gr.Slider(label=\"Tolerance\", info=\"How different colors can be in a segment.\", minimum=0, maximum=256*3, value=50)\n", "    with gr.Row():\n", "        input_img = gr.Image(label=\"Input\")\n", "        output_img = gr.Image(label=\"Selected Segment\")\n", "\n", "    def get_select_coords(img, tolerance, evt: gr.SelectData):\n", "        visited_pixels = set()\n", "        pixels_in_queue = set()\n", "        pixels_in_segment = set()\n", "        start_pixel = img[evt.index[1], evt.index[0]]\n", "        pixels_in_queue.add((evt.index[1], evt.index[0]))\n", "        while len(pixels_in_queue) > 0:\n", "            pixel = pixels_in_queue.pop()\n", "            visited_pixels.add(pixel)\n", "            neighbors = []\n", "            if pixel[0] > 0:\n", "                neighbors.append((pixel[0] - 1, pixel[1]))\n", "            if pixel[0] < img.shape[0] - 1:\n", "                neighbors.append((pixel[0] + 1, pixel[1]))\n", "            if pixel[1] > 0:\n", "                neighbors.append((pixel[0], pixel[1] - 1))\n", "            if pixel[1] < img.shape[1] - 1:\n", "                neighbors.append((pixel[0], pixel[1] + 1))\n", "            for neighbor in neighbors:\n", "                if neighbor in visited_pixels:\n", "                    continue\n", "                neighbor_pixel = img[neighbor[0], neighbor[1]]\n", "                if np.abs(neighbor_pixel - start_pixel).sum() < tolerance:\n", "                    pixels_in_queue.add(neighbor)\n", "                    pixels_in_segment.add(neighbor)\n", "\n", "        out = img.copy() * 0.2\n", "        out = out.astype(np.uint8)\n", "        for pixel in pixels_in_segment:\n", "            out[pixel[0], pixel[1]] = img[pixel[0], pixel[1]]\n", "        return out\n", "\n", "    input_img.select(get_select_coords, [input_img, tolerance], output_img)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/json_component/requirements.txt b/demo/json_component/requirements.txt
new file mode 100644
index 0000000000000..24ce15ab7ead3
--- /dev/null
+++ b/demo/json_component/requirements.txt
@@ -0,0 +1 @@
+numpy
diff --git a/demo/json_component/run.ipynb b/demo/json_component/run.ipynb
index bd2644a43d7f2..7f38e294f4690 100644
--- a/demo/json_component/run.ipynb
+++ b/demo/json_component/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: json_component"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import numpy as np\n", "\n", "with gr.Blocks() as demo:\n", "    inp = gr.JSON(\n", "        label=\"InputJSON\",\n", "        value={\n", "            \"Key 1\": \"Value 1\",\n", "            \"Key 2\": {\"Key 3\": \"Value 2\", \"Key 4\": \"Value 3\"},\n", "            \"Key 5\": [\"Item 1\", \"Item 2\", \"Item 3\"],\n", "            \"Key 6\": 123,\n", "            \"Key 7\": 123.456,\n", "            \"Key 8\": True,\n", "            \"Key 9\": False,\n", "            \"Key 10\": None,\n", "            \"Key 11\": np.array([1, 2, 3]),\n", "        }\n", "    )\n", "    out = gr.JSON(label=\"OutputJSON\")\n", "    btn = gr.Button(\"Submit\")\n", "    btn.click(lambda x: x, inp, out)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: json_component"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import numpy as np\n", "\n", "with gr.Blocks() as demo:\n", "    inp = gr.JSON(\n", "        label=\"InputJSON\",\n", "        value={\n", "            \"Key 1\": \"Value 1\",\n", "            \"Key 2\": {\"Key 3\": \"Value 2\", \"Key 4\": \"Value 3\"},\n", "            \"Key 5\": [\"Item 1\", \"Item 2\", \"Item 3\"],\n", "            \"Key 6\": 123,\n", "            \"Key 7\": 123.456,\n", "            \"Key 8\": True,\n", "            \"Key 9\": False,\n", "            \"Key 10\": None,\n", "            \"Key 11\": np.array([1, 2, 3]),\n", "        }\n", "    )\n", "    out = gr.JSON(label=\"OutputJSON\")\n", "    btn = gr.Button(\"Submit\")\n", "    btn.click(lambda x: x, inp, out)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/kitchen_sink/requirements.txt b/demo/kitchen_sink/requirements.txt
new file mode 100644
index 0000000000000..24ce15ab7ead3
--- /dev/null
+++ b/demo/kitchen_sink/requirements.txt
@@ -0,0 +1 @@
+numpy
diff --git a/demo/kitchen_sink/run.ipynb b/demo/kitchen_sink/run.ipynb
index cb1313650adc6..68f1e9bf727b6 100644
--- a/demo/kitchen_sink/run.ipynb
+++ b/demo/kitchen_sink/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: kitchen_sink"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('files')\n", "!wget -q -O files/cantina.wav https://github.com/gradio-app/gradio/raw/main/demo/kitchen_sink/files/cantina.wav\n", "!wget -q -O files/cheetah1.jpg https://github.com/gradio-app/gradio/raw/main/demo/kitchen_sink/files/cheetah1.jpg\n", "!wget -q -O files/lion.jpg https://github.com/gradio-app/gradio/raw/main/demo/kitchen_sink/files/lion.jpg\n", "!wget -q -O files/logo.png https://github.com/gradio-app/gradio/raw/main/demo/kitchen_sink/files/logo.png\n", "!wget -q -O files/time.csv https://github.com/gradio-app/gradio/raw/main/demo/kitchen_sink/files/time.csv\n", "!wget -q -O files/titanic.csv https://github.com/gradio-app/gradio/raw/main/demo/kitchen_sink/files/titanic.csv\n", "!wget -q -O files/tower.jpg https://github.com/gradio-app/gradio/raw/main/demo/kitchen_sink/files/tower.jpg\n", "!wget -q -O files/world.mp4 https://github.com/gradio-app/gradio/raw/main/demo/kitchen_sink/files/world.mp4"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import os\n", "import json\n", "\n", "import numpy as np\n", "\n", "import gradio as gr\n", "\n", "CHOICES = [\"foo\", \"bar\", \"baz\"]\n", "JSONOBJ = \"\"\"{\"items\":{\"item\":[{\"id\": \"0001\",\"type\": null,\"is_good\": false,\"ppu\": 0.55,\"batters\":{\"batter\":[{ \"id\": \"1001\", \"type\": \"Regular\" },{ \"id\": \"1002\", \"type\": \"Chocolate\" },{ \"id\": \"1003\", \"type\": \"Blueberry\" },{ \"id\": \"1004\", \"type\": \"Devil's Food\" }]},\"topping\":[{ \"id\": \"5001\", \"type\": \"None\" },{ \"id\": \"5002\", \"type\": \"Glazed\" },{ \"id\": \"5005\", \"type\": \"Sugar\" },{ \"id\": \"5007\", \"type\": \"Powdered Sugar\" },{ \"id\": \"5006\", \"type\": \"Chocolate with Sprinkles\" },{ \"id\": \"5003\", \"type\": \"Chocolate\" },{ \"id\": \"5004\", \"type\": \"Maple\" }]}]}}\"\"\"\n", "\n", "def fn(\n", "    text1,\n", "    text2,\n", "    num,\n", "    slider1,\n", "    slider2,\n", "    single_checkbox,\n", "    checkboxes,\n", "    radio,\n", "    dropdown,\n", "    multi_dropdown,\n", "    im1,\n", "    # im2,\n", "    # im3,\n", "    im4,\n", "    video,\n", "    audio1,\n", "    audio2,\n", "    file,\n", "    df1,\n", "):\n", "    return (\n", "        (text1 if single_checkbox else text2)\n", "        + \", selected:\"\n", "        + \", \".join(checkboxes),  # Text\n", "        {\n", "            \"positive\": num / (num + slider1 + slider2),\n", "            \"negative\": slider1 / (num + slider1 + slider2),\n", "            \"neutral\": slider2 / (num + slider1 + slider2),\n", "        },  # Label\n", "        (audio1[0], np.flipud(audio1[1]))\n", "        if audio1 is not None\n", "        else os.path.join(os.path.abspath(''), \"files/cantina.wav\"),  # Audio\n", "        np.flipud(im1)\n", "        if im1 is not None\n", "        else os.path.join(os.path.abspath(''), \"files/cheetah1.jpg\"),  # Image\n", "        video\n", "        if video is not None\n", "        else os.path.join(os.path.abspath(''), \"files/world.mp4\"),  # Video\n", "        [\n", "            (\"The\", \"art\"),\n", "            (\"quick brown\", \"adj\"),\n", "            (\"fox\", \"nn\"),\n", "            (\"jumped\", \"vrb\"),\n", "            (\"testing testing testing\", None),\n", "            (\"over\", \"prp\"),\n", "            (\"the\", \"art\"),\n", "            (\"testing\", None),\n", "            (\"lazy\", \"adj\"),\n", "            (\"dogs\", \"nn\"),\n", "            (\".\", \"punc\"),\n", "        ]\n", "        + [(f\"test {x}\", f\"test {x}\") for x in range(10)],  # HighlightedText\n", "        # [(\"The testing testing testing\", None), (\"quick brown\", 0.2), (\"fox\", 1), (\"jumped\", -1), (\"testing testing testing\", 0), (\"over\", 0), (\"the\", 0), (\"testing\", 0), (\"lazy\", 1), (\"dogs\", 0), (\".\", 1)] + [(f\"test {x}\",  x/10) for x in range(-10, 10)],  # HighlightedText\n", "        [\n", "            (\"The testing testing testing\", None),\n", "            (\"over\", 0.6),\n", "            (\"the\", 0.2),\n", "            (\"testing\", None),\n", "            (\"lazy\", -0.1),\n", "            (\"dogs\", 0.4),\n", "            (\".\", 0),\n", "        ]\n", "        + [(\"test\", x / 10) for x in range(-10, 10)],  # HighlightedText\n", "        json.loads(JSONOBJ),  # JSON\n", "        \"<button style='background-color: red'>Click Me: \"\n", "        + radio\n", "        + \"</button>\",  # HTML\n", "        os.path.join(os.path.abspath(''), \"files/titanic.csv\"),\n", "        df1,  # Dataframe\n", "        np.random.randint(0, 10, (4, 4)),  # Dataframe\n", "    )\n", "\n", "demo = gr.Interface(\n", "    fn,\n", "    inputs=[\n", "        gr.Textbox(value=\"Lorem ipsum\", label=\"Textbox\"),\n", "        gr.Textbox(lines=3, placeholder=\"Type here..\", label=\"Textbox 2\"),\n", "        gr.Number(label=\"Number\", value=42),\n", "        gr.Slider(10, 20, value=15, label=\"Slider: 10 - 20\"),\n", "        gr.Slider(maximum=20, step=0.04, label=\"Slider: step @ 0.04\"),\n", "        gr.Checkbox(label=\"Checkbox\"),\n", "        gr.CheckboxGroup(label=\"CheckboxGroup\", choices=CHOICES, value=CHOICES[0:2]),\n", "        gr.Radio(label=\"Radio\", choices=CHOICES, value=CHOICES[2]),\n", "        gr.Dropdown(label=\"Dropdown\", choices=CHOICES),\n", "        gr.Dropdown(\n", "            label=\"Multiselect Dropdown (Max choice: 2)\",\n", "            choices=CHOICES,\n", "            multiselect=True,\n", "            max_choices=2,\n", "        ),\n", "        gr.Image(label=\"Image\"),\n", "        # gr.Image(label=\"Image w/ Cropper\", tool=\"select\"),\n", "        # gr.Image(label=\"Sketchpad\", source=\"canvas\"),\n", "        gr.Image(label=\"Webcam\", sources=[\"webcam\"]),\n", "        gr.Video(label=\"Video\"),\n", "        gr.Audio(label=\"Audio\"),\n", "        gr.Audio(label=\"Microphone\", sources=[\"microphone\"]),\n", "        gr.File(label=\"File\"),\n", "        gr.Dataframe(label=\"Dataframe\", headers=[\"Name\", \"Age\", \"Gender\"]),\n", "    ],\n", "    outputs=[\n", "        gr.Textbox(label=\"Textbox\"),\n", "        gr.Label(label=\"Label\"),\n", "        gr.Audio(label=\"Audio\"),\n", "        gr.Image(label=\"Image\"),\n", "        gr.Video(label=\"Video\"),\n", "        gr.HighlightedText(\n", "            label=\"HighlightedText\", color_map={\"punc\": \"pink\", \"test 0\": \"blue\"}\n", "        ),\n", "        gr.HighlightedText(label=\"HighlightedText\", show_legend=True),\n", "        gr.JSON(label=\"JSON\"),\n", "        gr.HTML(label=\"HTML\"),\n", "        gr.File(label=\"File\"),\n", "        gr.Dataframe(label=\"Dataframe\"),\n", "        gr.Dataframe(label=\"Numpy\"),\n", "    ],\n", "    examples=[\n", "        [\n", "            \"the quick brown fox\",\n", "            \"jumps over the lazy dog\",\n", "            10,\n", "            12,\n", "            4,\n", "            True,\n", "            [\"foo\", \"baz\"],\n", "            \"baz\",\n", "            \"bar\",\n", "            [\"foo\", \"bar\"],\n", "            os.path.join(os.path.abspath(''), \"files/cheetah1.jpg\"),\n", "            # os.path.join(os.path.abspath(''), \"files/cheetah1.jpg\"),\n", "            # os.path.join(os.path.abspath(''), \"files/cheetah1.jpg\"),\n", "            os.path.join(os.path.abspath(''), \"files/cheetah1.jpg\"),\n", "            os.path.join(os.path.abspath(''), \"files/world.mp4\"),\n", "            os.path.join(os.path.abspath(''), \"files/cantina.wav\"),\n", "            os.path.join(os.path.abspath(''), \"files/cantina.wav\"),\n", "            os.path.join(os.path.abspath(''), \"files/titanic.csv\"),\n", "            [[1, 2, 3, 4], [4, 5, 6, 7], [8, 9, 1, 2], [3, 4, 5, 6]],\n", "        ]\n", "    ]\n", "    * 3,\n", "    title=\"Kitchen Sink\",\n", "    description=\"Try out all the components!\",\n", "    article=\"Learn more about [Gradio](http://gradio.app)\",\n", "    cache_examples=True,\n", ")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: kitchen_sink"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('files')\n", "!wget -q -O files/cantina.wav https://github.com/gradio-app/gradio/raw/main/demo/kitchen_sink/files/cantina.wav\n", "!wget -q -O files/cheetah1.jpg https://github.com/gradio-app/gradio/raw/main/demo/kitchen_sink/files/cheetah1.jpg\n", "!wget -q -O files/lion.jpg https://github.com/gradio-app/gradio/raw/main/demo/kitchen_sink/files/lion.jpg\n", "!wget -q -O files/logo.png https://github.com/gradio-app/gradio/raw/main/demo/kitchen_sink/files/logo.png\n", "!wget -q -O files/time.csv https://github.com/gradio-app/gradio/raw/main/demo/kitchen_sink/files/time.csv\n", "!wget -q -O files/titanic.csv https://github.com/gradio-app/gradio/raw/main/demo/kitchen_sink/files/titanic.csv\n", "!wget -q -O files/tower.jpg https://github.com/gradio-app/gradio/raw/main/demo/kitchen_sink/files/tower.jpg\n", "!wget -q -O files/world.mp4 https://github.com/gradio-app/gradio/raw/main/demo/kitchen_sink/files/world.mp4"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import os\n", "import json\n", "\n", "import numpy as np\n", "\n", "import gradio as gr\n", "\n", "CHOICES = [\"foo\", \"bar\", \"baz\"]\n", "JSONOBJ = \"\"\"{\"items\":{\"item\":[{\"id\": \"0001\",\"type\": null,\"is_good\": false,\"ppu\": 0.55,\"batters\":{\"batter\":[{ \"id\": \"1001\", \"type\": \"Regular\" },{ \"id\": \"1002\", \"type\": \"Chocolate\" },{ \"id\": \"1003\", \"type\": \"Blueberry\" },{ \"id\": \"1004\", \"type\": \"Devil's Food\" }]},\"topping\":[{ \"id\": \"5001\", \"type\": \"None\" },{ \"id\": \"5002\", \"type\": \"Glazed\" },{ \"id\": \"5005\", \"type\": \"Sugar\" },{ \"id\": \"5007\", \"type\": \"Powdered Sugar\" },{ \"id\": \"5006\", \"type\": \"Chocolate with Sprinkles\" },{ \"id\": \"5003\", \"type\": \"Chocolate\" },{ \"id\": \"5004\", \"type\": \"Maple\" }]}]}}\"\"\"\n", "\n", "def fn(\n", "    text1,\n", "    text2,\n", "    num,\n", "    slider1,\n", "    slider2,\n", "    single_checkbox,\n", "    checkboxes,\n", "    radio,\n", "    dropdown,\n", "    multi_dropdown,\n", "    im1,\n", "    # im2,\n", "    # im3,\n", "    im4,\n", "    video,\n", "    audio1,\n", "    audio2,\n", "    file,\n", "    df1,\n", "):\n", "    return (\n", "        (text1 if single_checkbox else text2)\n", "        + \", selected:\"\n", "        + \", \".join(checkboxes),  # Text\n", "        {\n", "            \"positive\": num / (num + slider1 + slider2),\n", "            \"negative\": slider1 / (num + slider1 + slider2),\n", "            \"neutral\": slider2 / (num + slider1 + slider2),\n", "        },  # Label\n", "        (audio1[0], np.flipud(audio1[1]))\n", "        if audio1 is not None\n", "        else os.path.join(os.path.abspath(''), \"files/cantina.wav\"),  # Audio\n", "        np.flipud(im1)\n", "        if im1 is not None\n", "        else os.path.join(os.path.abspath(''), \"files/cheetah1.jpg\"),  # Image\n", "        video\n", "        if video is not None\n", "        else os.path.join(os.path.abspath(''), \"files/world.mp4\"),  # Video\n", "        [\n", "            (\"The\", \"art\"),\n", "            (\"quick brown\", \"adj\"),\n", "            (\"fox\", \"nn\"),\n", "            (\"jumped\", \"vrb\"),\n", "            (\"testing testing testing\", None),\n", "            (\"over\", \"prp\"),\n", "            (\"the\", \"art\"),\n", "            (\"testing\", None),\n", "            (\"lazy\", \"adj\"),\n", "            (\"dogs\", \"nn\"),\n", "            (\".\", \"punc\"),\n", "        ]\n", "        + [(f\"test {x}\", f\"test {x}\") for x in range(10)],  # HighlightedText\n", "        # [(\"The testing testing testing\", None), (\"quick brown\", 0.2), (\"fox\", 1), (\"jumped\", -1), (\"testing testing testing\", 0), (\"over\", 0), (\"the\", 0), (\"testing\", 0), (\"lazy\", 1), (\"dogs\", 0), (\".\", 1)] + [(f\"test {x}\",  x/10) for x in range(-10, 10)],  # HighlightedText\n", "        [\n", "            (\"The testing testing testing\", None),\n", "            (\"over\", 0.6),\n", "            (\"the\", 0.2),\n", "            (\"testing\", None),\n", "            (\"lazy\", -0.1),\n", "            (\"dogs\", 0.4),\n", "            (\".\", 0),\n", "        ]\n", "        + [(\"test\", x / 10) for x in range(-10, 10)],  # HighlightedText\n", "        json.loads(JSONOBJ),  # JSON\n", "        \"<button style='background-color: red'>Click Me: \"\n", "        + radio\n", "        + \"</button>\",  # HTML\n", "        os.path.join(os.path.abspath(''), \"files/titanic.csv\"),\n", "        df1,  # Dataframe\n", "        np.random.randint(0, 10, (4, 4)),  # Dataframe\n", "    )\n", "\n", "demo = gr.Interface(\n", "    fn,\n", "    inputs=[\n", "        gr.Textbox(value=\"Lorem ipsum\", label=\"Textbox\"),\n", "        gr.Textbox(lines=3, placeholder=\"Type here..\", label=\"Textbox 2\"),\n", "        gr.Number(label=\"Number\", value=42),\n", "        gr.Slider(10, 20, value=15, label=\"Slider: 10 - 20\"),\n", "        gr.Slider(maximum=20, step=0.04, label=\"Slider: step @ 0.04\"),\n", "        gr.Checkbox(label=\"Checkbox\"),\n", "        gr.CheckboxGroup(label=\"CheckboxGroup\", choices=CHOICES, value=CHOICES[0:2]),\n", "        gr.Radio(label=\"Radio\", choices=CHOICES, value=CHOICES[2]),\n", "        gr.Dropdown(label=\"Dropdown\", choices=CHOICES),\n", "        gr.Dropdown(\n", "            label=\"Multiselect Dropdown (Max choice: 2)\",\n", "            choices=CHOICES,\n", "            multiselect=True,\n", "            max_choices=2,\n", "        ),\n", "        gr.Image(label=\"Image\"),\n", "        # gr.Image(label=\"Image w/ Cropper\", tool=\"select\"),\n", "        # gr.Image(label=\"Sketchpad\", source=\"canvas\"),\n", "        gr.Image(label=\"Webcam\", sources=[\"webcam\"]),\n", "        gr.Video(label=\"Video\"),\n", "        gr.Audio(label=\"Audio\"),\n", "        gr.Audio(label=\"Microphone\", sources=[\"microphone\"]),\n", "        gr.File(label=\"File\"),\n", "        gr.Dataframe(label=\"Dataframe\", headers=[\"Name\", \"Age\", \"Gender\"]),\n", "    ],\n", "    outputs=[\n", "        gr.Textbox(label=\"Textbox\"),\n", "        gr.Label(label=\"Label\"),\n", "        gr.Audio(label=\"Audio\"),\n", "        gr.Image(label=\"Image\", elem_id=\"output-img\"),\n", "        gr.Video(label=\"Video\"),\n", "        gr.HighlightedText(\n", "            label=\"HighlightedText\", color_map={\"punc\": \"pink\", \"test 0\": \"blue\"}\n", "        ),\n", "        gr.HighlightedText(label=\"HighlightedText\", show_legend=True),\n", "        gr.JSON(label=\"JSON\"),\n", "        gr.HTML(label=\"HTML\"),\n", "        gr.File(label=\"File\"),\n", "        gr.Dataframe(label=\"Dataframe\"),\n", "        gr.Dataframe(label=\"Numpy\"),\n", "    ],\n", "    examples=[\n", "        [\n", "            \"the quick brown fox\",\n", "            \"jumps over the lazy dog\",\n", "            10,\n", "            12,\n", "            4,\n", "            True,\n", "            [\"foo\", \"baz\"],\n", "            \"baz\",\n", "            \"bar\",\n", "            [\"foo\", \"bar\"],\n", "            os.path.join(os.path.abspath(''), \"files/cheetah1.jpg\"),\n", "            # os.path.join(os.path.abspath(''), \"files/cheetah1.jpg\"),\n", "            # os.path.join(os.path.abspath(''), \"files/cheetah1.jpg\"),\n", "            os.path.join(os.path.abspath(''), \"files/cheetah1.jpg\"),\n", "            os.path.join(os.path.abspath(''), \"files/world.mp4\"),\n", "            os.path.join(os.path.abspath(''), \"files/cantina.wav\"),\n", "            os.path.join(os.path.abspath(''), \"files/cantina.wav\"),\n", "            os.path.join(os.path.abspath(''), \"files/titanic.csv\"),\n", "            [[1, 2, 3, 4], [4, 5, 6, 7], [8, 9, 1, 2], [3, 4, 5, 6]],\n", "        ]\n", "    ]\n", "    * 3,\n", "    title=\"Kitchen Sink\",\n", "    description=\"Try out all the components!\",\n", "    article=\"Learn more about [Gradio](http://gradio.app)\",\n", "    cache_examples=True,\n", ")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/kitchen_sink/run.py b/demo/kitchen_sink/run.py
index 9e959528d6230..2ea4833c1436b 100755
--- a/demo/kitchen_sink/run.py
+++ b/demo/kitchen_sink/run.py
@@ -113,7 +113,7 @@ def fn(
         gr.Textbox(label="Textbox"),
         gr.Label(label="Label"),
         gr.Audio(label="Audio"),
-        gr.Image(label="Image"),
+        gr.Image(label="Image", elem_id="output-img"),
         gr.Video(label="Video"),
         gr.HighlightedText(
             label="HighlightedText", color_map={"punc": "pink", "test 0": "blue"}
diff --git a/demo/kitchen_sink_random/requirements.txt b/demo/kitchen_sink_random/requirements.txt
new file mode 100644
index 0000000000000..babdd14a51a41
--- /dev/null
+++ b/demo/kitchen_sink_random/requirements.txt
@@ -0,0 +1,2 @@
+matplotlib
+pandas
diff --git a/demo/leaderboard/DESCRIPTION.md b/demo/leaderboard/DESCRIPTION.md
deleted file mode 100644
index 39267b584fec0..0000000000000
--- a/demo/leaderboard/DESCRIPTION.md
+++ /dev/null
@@ -1 +0,0 @@
-A simple dashboard ranking spaces by number of likes.
\ No newline at end of file
diff --git a/demo/leaderboard/run.ipynb b/demo/leaderboard/run.ipynb
deleted file mode 100644
index b917e7f91ef4a..0000000000000
--- a/demo/leaderboard/run.ipynb
+++ /dev/null
@@ -1 +0,0 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: leaderboard\n", "### A simple dashboard ranking spaces by number of likes.\n", "        "]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import requests\n", "import pandas as pd\n", "from huggingface_hub.hf_api import SpaceInfo\n", "path = \"https://huggingface.co/api/spaces\"\n", "\n", "def get_blocks_party_spaces():\n", "    r = requests.get(path)\n", "    d = r.json()\n", "    spaces = [SpaceInfo(**x) for x in d]\n", "    blocks_spaces = {}\n", "    for i in range(0,len(spaces)):\n", "        if spaces[i].id.split('/')[0] == 'Gradio-Blocks' and hasattr(spaces[i], 'likes') and spaces[i].id != 'Gradio-Blocks/Leaderboard' and spaces[i].id != 'Gradio-Blocks/README':\n", "            blocks_spaces[spaces[i].id]=spaces[i].likes\n", "    df = pd.DataFrame(\n", "    [{\"Spaces_Name\": Spaces, \"likes\": likes} for Spaces,likes in blocks_spaces.items()])\n", "    df = df.sort_values(by=['likes'],ascending=False)\n", "    return df\n", "\n", "block = gr.Blocks()\n", "\n", "with block:\n", "    gr.Markdown(\"\"\"Leaderboard for the most popular Blocks Event Spaces. To learn more and join, see <a href=\"https://huggingface.co/Gradio-Blocks\" target=\"_blank\" style=\"text-decoration: underline\">Blocks Party Event</a>\"\"\")\n", "    with gr.Tabs():\n", "        with gr.TabItem(\"Blocks Party Leaderboard\"):\n", "            with gr.Row():\n", "                data = gr.Dataframe(type=\"pandas\")\n", "            with gr.Row():\n", "                data_run = gr.Button(\"Refresh\")\n", "                data_run.click(get_blocks_party_spaces, inputs=None, outputs=data)\n", "    # running the function on page load in addition to when the button is clicked\n", "    block.load(get_blocks_party_spaces, inputs=None, outputs=data)\n", "\n", "block.launch()\n", "\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/leaderboard/run.py b/demo/leaderboard/run.py
deleted file mode 100644
index d561afb3245e7..0000000000000
--- a/demo/leaderboard/run.py
+++ /dev/null
@@ -1,35 +0,0 @@
-import gradio as gr
-import requests
-import pandas as pd
-from huggingface_hub.hf_api import SpaceInfo
-path = "https://huggingface.co/api/spaces"
-
-def get_blocks_party_spaces():
-    r = requests.get(path)
-    d = r.json()
-    spaces = [SpaceInfo(**x) for x in d]
-    blocks_spaces = {}
-    for i in range(0,len(spaces)):
-        if spaces[i].id.split('/')[0] == 'Gradio-Blocks' and hasattr(spaces[i], 'likes') and spaces[i].id != 'Gradio-Blocks/Leaderboard' and spaces[i].id != 'Gradio-Blocks/README':
-            blocks_spaces[spaces[i].id]=spaces[i].likes
-    df = pd.DataFrame(
-    [{"Spaces_Name": Spaces, "likes": likes} for Spaces,likes in blocks_spaces.items()])
-    df = df.sort_values(by=['likes'],ascending=False)
-    return df
-
-block = gr.Blocks()
-
-with block:
-    gr.Markdown("""Leaderboard for the most popular Blocks Event Spaces. To learn more and join, see <a href="https://huggingface.co/Gradio-Blocks" target="_blank" style="text-decoration: underline">Blocks Party Event</a>""")
-    with gr.Tabs():
-        with gr.TabItem("Blocks Party Leaderboard"):
-            with gr.Row():
-                data = gr.Dataframe(type="pandas")
-            with gr.Row():
-                data_run = gr.Button("Refresh")
-                data_run.click(get_blocks_party_spaces, inputs=None, outputs=data)
-    # running the function on page load in addition to when the button is clicked
-    block.load(get_blocks_party_spaces, inputs=None, outputs=data)
-
-block.launch()
-
diff --git a/demo/line_plot_demo/requirements.txt b/demo/line_plot_demo/requirements.txt
new file mode 100644
index 0000000000000..fb6c7ed7ec60d
--- /dev/null
+++ b/demo/line_plot_demo/requirements.txt
@@ -0,0 +1 @@
+pandas
diff --git a/demo/line_plot_demo/run.ipynb b/demo/line_plot_demo/run.ipynb
index e368d4b3f65be..0c2ab3dc5c9b4 100644
--- a/demo/line_plot_demo/run.ipynb
+++ b/demo/line_plot_demo/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: line_plot_demo"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import pandas as pd\n", "from random import randint, random\n", "import gradio as gr\n", "\n", "\n", "temp_sensor_data = pd.DataFrame(\n", "    {\n", "        \"time\": pd.date_range(\"2021-01-01\", end=\"2021-01-05\", periods=200),\n", "        \"temperature\": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],\n", "        \"humidity\": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],\n", "        \"location\": [\"indoor\", \"outdoor\"] * 100,\n", "    }\n", ")\n", "\n", "food_rating_data = pd.DataFrame(\n", "    {\n", "        \"cuisine\": [[\"Italian\", \"Mexican\", \"Chinese\"][i % 3] for i in range(100)],\n", "        \"rating\": [random() * 4 + 0.5 * (i % 3) for i in range(100)],\n", "        \"price\": [randint(10, 50) + 4 * (i % 3) for i in range(100)],\n", "        \"wait\": [random() for i in range(100)],\n", "    }\n", ")\n", "\n", "with gr.Blocks() as line_plots:\n", "    with gr.Row():\n", "        start = gr.DateTime(\"2021-01-01 00:00:00\", label=\"Start\")\n", "        end = gr.DateTime(\"2021-01-05 00:00:00\", label=\"End\")\n", "        apply_btn = gr.Button(\"Apply\", scale=0)\n", "    with gr.Row():\n", "        group_by = gr.Radio([\"None\", \"30m\", \"1h\", \"4h\", \"1d\"], value=\"None\", label=\"Group by\")\n", "        aggregate = gr.Radio([\"sum\", \"mean\", \"median\", \"min\", \"max\"], value=\"sum\", label=\"Aggregation\")\n", "\n", "    temp_by_time = gr.LinePlot(\n", "        temp_sensor_data,\n", "        x=\"time\",\n", "        y=\"temperature\",\n", "    )\n", "    temp_by_time_location = gr.LinePlot(\n", "        temp_sensor_data,\n", "        x=\"time\",\n", "        y=\"temperature\",\n", "        color=\"location\",\n", "    )\n", "\n", "    time_graphs = [temp_by_time, temp_by_time_location]\n", "    group_by.change(\n", "        lambda group: [gr.LinePlot(x_bin=None if group == \"None\" else group)] * len(time_graphs),\n", "        group_by,\n", "        time_graphs\n", "    )\n", "    aggregate.change(\n", "        lambda aggregate: [gr.LinePlot(y_aggregate=aggregate)] * len(time_graphs),\n", "        aggregate,\n", "        time_graphs\n", "    )\n", "\n", "    def rescale(select: gr.SelectData):\n", "        return select.index\n", "    rescale_evt = gr.on([plot.select for plot in time_graphs], rescale, None, [start, end])\n", "\n", "    for trigger in [apply_btn.click, rescale_evt.then]:\n", "        trigger(\n", "            lambda start, end: [gr.LinePlot(x_lim=[start, end])] * len(time_graphs), [start, end], time_graphs\n", "        )\n", "\n", "    price_by_cuisine = gr.LinePlot(\n", "        food_rating_data,\n", "        x=\"cuisine\",\n", "        y=\"price\",\n", "    )\n", "    with gr.Row():\n", "        price_by_rating = gr.LinePlot(\n", "            food_rating_data,\n", "            x=\"rating\",\n", "            y=\"price\",\n", "        )\n", "        price_by_rating_color = gr.LinePlot(\n", "            food_rating_data,\n", "            x=\"rating\",\n", "            y=\"price\",\n", "            color=\"cuisine\",\n", "            color_map={\"Italian\": \"red\", \"Mexican\": \"green\", \"Chinese\": \"blue\"},\n", "        )\n", "\n", "if __name__ == \"__main__\":\n", "    line_plots.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: line_plot_demo"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio pandas "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import pandas as pd\n", "from random import randint, random\n", "import gradio as gr\n", "\n", "\n", "temp_sensor_data = pd.DataFrame(\n", "    {\n", "        \"time\": pd.date_range(\"2021-01-01\", end=\"2021-01-05\", periods=200),\n", "        \"temperature\": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],\n", "        \"humidity\": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],\n", "        \"location\": [\"indoor\", \"outdoor\"] * 100,\n", "    }\n", ")\n", "\n", "food_rating_data = pd.DataFrame(\n", "    {\n", "        \"cuisine\": [[\"Italian\", \"Mexican\", \"Chinese\"][i % 3] for i in range(100)],\n", "        \"rating\": [random() * 4 + 0.5 * (i % 3) for i in range(100)],\n", "        \"price\": [randint(10, 50) + 4 * (i % 3) for i in range(100)],\n", "        \"wait\": [random() for i in range(100)],\n", "    }\n", ")\n", "\n", "with gr.Blocks() as line_plots:\n", "    with gr.Row():\n", "        start = gr.DateTime(\"2021-01-01 00:00:00\", label=\"Start\")\n", "        end = gr.DateTime(\"2021-01-05 00:00:00\", label=\"End\")\n", "        apply_btn = gr.Button(\"Apply\", scale=0)\n", "    with gr.Row():\n", "        group_by = gr.Radio([\"None\", \"30m\", \"1h\", \"4h\", \"1d\"], value=\"None\", label=\"Group by\")\n", "        aggregate = gr.Radio([\"sum\", \"mean\", \"median\", \"min\", \"max\"], value=\"sum\", label=\"Aggregation\")\n", "\n", "    temp_by_time = gr.LinePlot(\n", "        temp_sensor_data,\n", "        x=\"time\",\n", "        y=\"temperature\",\n", "    )\n", "    temp_by_time_location = gr.LinePlot(\n", "        temp_sensor_data,\n", "        x=\"time\",\n", "        y=\"temperature\",\n", "        color=\"location\",\n", "    )\n", "\n", "    time_graphs = [temp_by_time, temp_by_time_location]\n", "    group_by.change(\n", "        lambda group: [gr.LinePlot(x_bin=None if group == \"None\" else group)] * len(time_graphs),\n", "        group_by,\n", "        time_graphs\n", "    )\n", "    aggregate.change(\n", "        lambda aggregate: [gr.LinePlot(y_aggregate=aggregate)] * len(time_graphs),\n", "        aggregate,\n", "        time_graphs\n", "    )\n", "\n", "    def rescale(select: gr.SelectData):\n", "        return select.index\n", "    rescale_evt = gr.on([plot.select for plot in time_graphs], rescale, None, [start, end])\n", "\n", "    for trigger in [apply_btn.click, rescale_evt.then]:\n", "        trigger(\n", "            lambda start, end: [gr.LinePlot(x_lim=[start, end])] * len(time_graphs), [start, end], time_graphs\n", "        )\n", "\n", "    price_by_cuisine = gr.LinePlot(\n", "        food_rating_data,\n", "        x=\"cuisine\",\n", "        y=\"price\",\n", "    )\n", "    with gr.Row():\n", "        price_by_rating = gr.LinePlot(\n", "            food_rating_data,\n", "            x=\"rating\",\n", "            y=\"price\",\n", "        )\n", "        price_by_rating_color = gr.LinePlot(\n", "            food_rating_data,\n", "            x=\"rating\",\n", "            y=\"price\",\n", "            color=\"cuisine\",\n", "            color_map={\"Italian\": \"red\", \"Mexican\": \"green\", \"Chinese\": \"blue\"},\n", "        )\n", "\n", "if __name__ == \"__main__\":\n", "    line_plots.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/live_dashboard/requirements.txt b/demo/live_dashboard/requirements.txt
index d42d0ad03bdf8..38c55157207e1 100644
--- a/demo/live_dashboard/requirements.txt
+++ b/demo/live_dashboard/requirements.txt
@@ -1 +1,3 @@
-plotly
\ No newline at end of file
+numpy
+pandas
+plotly
diff --git a/demo/live_dashboard/run.ipynb b/demo/live_dashboard/run.ipynb
index 395112059d154..faa2d952c7eea 100644
--- a/demo/live_dashboard/run.ipynb
+++ b/demo/live_dashboard/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: live_dashboard\n", "### This demo shows how you can build a live interactive dashboard with gradio.\n", "The current time is refreshed every second and the plot every half second by using the 'every' keyword in the event handler.\n", "Changing the value of the slider will control the period of the sine curve (the distance between peaks). \n", "        "]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio plotly"]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import math\n", "\n", "import pandas as pd\n", "\n", "import gradio as gr\n", "import datetime\n", "import numpy as np\n", "\n", "def get_time():\n", "    return datetime.datetime.now()\n", "\n", "plot_end = 2 * math.pi\n", "\n", "def get_plot(period=1):\n", "    global plot_end\n", "    x = np.arange(plot_end - 2 * math.pi, plot_end, 0.02)\n", "    y = np.sin(2 * math.pi * period * x)\n", "    update = gr.LinePlot(\n", "        value=pd.DataFrame({\"x\": x, \"y\": y}),\n", "        x=\"x\",\n", "        y=\"y\",\n", "        title=\"Plot (updates every second)\",\n", "        width=600,\n", "        height=350,\n", "    )\n", "    plot_end += 2 * math.pi\n", "    if plot_end > 1000:\n", "        plot_end = 2 * math.pi\n", "    return update\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        with gr.Column():\n", "            c_time2 = gr.Textbox(label=\"Current Time refreshed every second\")\n", "            gr.Textbox(\n", "                \"Change the value of the slider to automatically update the plot\",\n", "                label=\"\",\n", "            )\n", "            period = gr.Slider(\n", "                label=\"Period of plot\", value=1, minimum=0, maximum=10, step=1\n", "            )\n", "            plot = gr.LinePlot(show_label=False)\n", "        with gr.Column():\n", "            name = gr.Textbox(label=\"Enter your name\")\n", "            greeting = gr.Textbox(label=\"Greeting\")\n", "            button = gr.Button(value=\"Greet\")\n", "            button.click(lambda s: f\"Hello {s}\", name, greeting)\n", "\n", "    demo.load(lambda: datetime.datetime.now(), None, c_time2, every=1)\n", "    dep = demo.load(get_plot, None, plot, every=1)\n", "    period.change(get_plot, period, plot, every=1, cancels=[dep])\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: live_dashboard\n", "### This demo shows how you can build a live interactive dashboard with gradio.\n", "The current time is refreshed every second and the plot every half second by using the 'every' keyword in the event handler.\n", "Changing the value of the slider will control the period of the sine curve (the distance between peaks). \n", "        "]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy pandas plotly "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import math\n", "\n", "import pandas as pd\n", "\n", "import gradio as gr\n", "import datetime\n", "import numpy as np\n", "\n", "def get_time():\n", "    return datetime.datetime.now()\n", "\n", "plot_end = 2 * math.pi\n", "\n", "def get_plot(period=1):\n", "    global plot_end\n", "    x = np.arange(plot_end - 2 * math.pi, plot_end, 0.02)\n", "    y = np.sin(2 * math.pi * period * x)\n", "    update = gr.LinePlot(\n", "        value=pd.DataFrame({\"x\": x, \"y\": y}),\n", "        x=\"x\",\n", "        y=\"y\",\n", "        title=\"Plot (updates every second)\",\n", "        width=600,\n", "        height=350,\n", "    )\n", "    plot_end += 2 * math.pi\n", "    if plot_end > 1000:\n", "        plot_end = 2 * math.pi\n", "    return update\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        with gr.Column():\n", "            c_time2 = gr.Textbox(label=\"Current Time refreshed every second\")\n", "            gr.Textbox(\n", "                \"Change the value of the slider to automatically update the plot\",\n", "                label=\"\",\n", "            )\n", "            period = gr.Slider(\n", "                label=\"Period of plot\", value=1, minimum=0, maximum=10, step=1\n", "            )\n", "            plot = gr.LinePlot(show_label=False)\n", "        with gr.Column():\n", "            name = gr.Textbox(label=\"Enter your name\")\n", "            greeting = gr.Textbox(label=\"Greeting\")\n", "            button = gr.Button(value=\"Greet\")\n", "            button.click(lambda s: f\"Hello {s}\", name, greeting)\n", "\n", "    demo.load(lambda: datetime.datetime.now(), None, c_time2, every=1)\n", "    dep = demo.load(get_plot, None, plot, every=1)\n", "    period.change(get_plot, period, plot, every=1, cancels=[dep])\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/login_with_huggingface/requirements.txt b/demo/login_with_huggingface/requirements.txt
new file mode 100644
index 0000000000000..6b964ccca3c1b
--- /dev/null
+++ b/demo/login_with_huggingface/requirements.txt
@@ -0,0 +1 @@
+huggingface_hub
diff --git a/demo/login_with_huggingface/run.ipynb b/demo/login_with_huggingface/run.ipynb
index dbb9058f2a9d5..3b08a319a43da 100644
--- a/demo/login_with_huggingface/run.ipynb
+++ b/demo/login_with_huggingface/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: login_with_huggingface"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["from __future__ import annotations\n", "\n", "import gradio as gr\n", "from huggingface_hub import whoami\n", "\n", "def hello(profile: gr.OAuthProfile | None) -> str:\n", "    if profile is None:\n", "        return \"I don't know you.\"\n", "    return f\"Hello {profile.name}\"\n", "\n", "def list_organizations(oauth_token: gr.OAuthToken | None) -> str:\n", "    if oauth_token is None:\n", "        return \"Please deploy this on Spaces and log in to list organizations.\"\n", "    org_names = [org[\"name\"] for org in whoami(oauth_token.token)[\"orgs\"]]\n", "    return f\"You belong to {', '.join(org_names)}.\"\n", "\n", "with gr.Blocks() as demo:\n", "    gr.LoginButton()\n", "    m1 = gr.Markdown()\n", "    m2 = gr.Markdown()\n", "    demo.load(hello, inputs=None, outputs=m1)\n", "    demo.load(list_organizations, inputs=None, outputs=m2)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: login_with_huggingface"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio huggingface_hub "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["from __future__ import annotations\n", "\n", "import gradio as gr\n", "from huggingface_hub import whoami\n", "\n", "def hello(profile: gr.OAuthProfile | None) -> str:\n", "    if profile is None:\n", "        return \"I don't know you.\"\n", "    return f\"Hello {profile.name}\"\n", "\n", "def list_organizations(oauth_token: gr.OAuthToken | None) -> str:\n", "    if oauth_token is None:\n", "        return \"Please deploy this on Spaces and log in to list organizations.\"\n", "    org_names = [org[\"name\"] for org in whoami(oauth_token.token)[\"orgs\"]]\n", "    return f\"You belong to {', '.join(org_names)}.\"\n", "\n", "with gr.Blocks() as demo:\n", "    gr.LoginButton()\n", "    m1 = gr.Markdown()\n", "    m2 = gr.Markdown()\n", "    demo.load(hello, inputs=None, outputs=m1)\n", "    demo.load(list_organizations, inputs=None, outputs=m2)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/logoutbutton_component/requirements.txt b/demo/logoutbutton_component/requirements.txt
deleted file mode 100644
index f7359a07d4b7d..0000000000000
--- a/demo/logoutbutton_component/requirements.txt
+++ /dev/null
@@ -1 +0,0 @@
-gradio[oauth]
\ No newline at end of file
diff --git a/demo/logoutbutton_component/run.ipynb b/demo/logoutbutton_component/run.ipynb
deleted file mode 100644
index 6f852cf11042f..0000000000000
--- a/demo/logoutbutton_component/run.ipynb
+++ /dev/null
@@ -1 +0,0 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: logoutbutton_component"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio gradio[oauth]"]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    gr.LogoutButton()\n", "\n", "demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/logoutbutton_component/run.py b/demo/logoutbutton_component/run.py
deleted file mode 100644
index 6a647554975f9..0000000000000
--- a/demo/logoutbutton_component/run.py
+++ /dev/null
@@ -1,6 +0,0 @@
-import gradio as gr
-
-with gr.Blocks() as demo:
-    gr.LogoutButton()
-
-demo.launch()
diff --git a/demo/magic_8_ball/requirements.txt b/demo/magic_8_ball/requirements.txt
new file mode 100644
index 0000000000000..e5ff487e42f85
--- /dev/null
+++ b/demo/magic_8_ball/requirements.txt
@@ -0,0 +1,7 @@
+git+https://github.com/huggingface/parler-tts.git
+accelerate
+spaces
+torch
+pydub
+transformers
+huggingface_hub
diff --git a/demo/magic_8_ball/run.ipynb b/demo/magic_8_ball/run.ipynb
new file mode 100644
index 0000000000000..c7e9c261a01d6
--- /dev/null
+++ b/demo/magic_8_ball/run.ipynb
@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: magic_8_ball"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio git+https://github.com/huggingface/parler-tts.git accelerate spaces torch pydub transformers huggingface_hub "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/magic_8_ball/streamer.py"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import io\n", "from threading import Thread\n", "import random\n", "import os\n", "\n", "import numpy as np\n", "import spaces\n", "import gradio as gr\n", "import torch\n", "\n", "from parler_tts import ParlerTTSForConditionalGeneration\n", "from pydub import AudioSegment\n", "from transformers import AutoTokenizer, AutoFeatureExtractor, set_seed\n", "from huggingface_hub import InferenceClient\n", "from streamer import ParlerTTSStreamer\n", "import time\n", "\n", "\n", "device = (\n", "    \"cuda:0\"\n", "    if torch.cuda.is_available()\n", "    else \"mps\"\n", "    if torch.backends.mps.is_available()\n", "    else \"cpu\"\n", ")\n", "torch_dtype = torch.float16 if device != \"cpu\" else torch.float32\n", "\n", "repo_id = \"parler-tts/parler_tts_mini_v0.1\"\n", "\n", "jenny_repo_id = \"ylacombe/parler-tts-mini-jenny-30H\"\n", "\n", "model = ParlerTTSForConditionalGeneration.from_pretrained(\n", "    jenny_repo_id, torch_dtype=torch_dtype, low_cpu_mem_usage=True\n", ").to(device)\n", "\n", "client = InferenceClient(token=os.getenv(\"HF_TOKEN\"))\n", "\n", "tokenizer = AutoTokenizer.from_pretrained(repo_id)\n", "feature_extractor = AutoFeatureExtractor.from_pretrained(repo_id)\n", "\n", "SAMPLE_RATE = feature_extractor.sampling_rate\n", "SEED = 42\n", "\n", "\n", "def numpy_to_mp3(audio_array, sampling_rate):\n", "    # Normalize audio_array if it's floating-point\n", "    if np.issubdtype(audio_array.dtype, np.floating):\n", "        max_val = np.max(np.abs(audio_array))\n", "        audio_array = (audio_array / max_val) * 32767  # Normalize to 16-bit range\n", "        audio_array = audio_array.astype(np.int16)\n", "\n", "    # Create an audio segment from the numpy array\n", "    audio_segment = AudioSegment(\n", "        audio_array.tobytes(),\n", "        frame_rate=sampling_rate,\n", "        sample_width=audio_array.dtype.itemsize,\n", "        channels=1,\n", "    )\n", "\n", "    # Export the audio segment to MP3 bytes - use a high bitrate to maximise quality\n", "    mp3_io = io.BytesIO()\n", "    audio_segment.export(mp3_io, format=\"mp3\", bitrate=\"320k\")\n", "\n", "    # Get the MP3 bytes\n", "    mp3_bytes = mp3_io.getvalue()\n", "    mp3_io.close()\n", "\n", "    return mp3_bytes\n", "\n", "\n", "sampling_rate = model.audio_encoder.config.sampling_rate\n", "frame_rate = model.audio_encoder.config.frame_rate\n", "\n", "\n", "def generate_response(audio):\n", "    gr.Info(\"Transcribing Audio\", duration=5)\n", "    question = client.automatic_speech_recognition(audio).text  # type: ignore\n", "    messages = [\n", "        {\n", "            \"role\": \"system\",\n", "            \"content\": (\n", "                \"You are a magic 8 ball.\"\n", "                \"Someone will present to you a situation or question and your job \"\n", "                \"is to answer with a cryptic addage or proverb such as \"\n", "                \"'curiosity killed the cat' or 'The early bird gets the worm'.\"\n", "                \"Keep your answers short and do not include the phrase 'Magic 8 Ball' in your response. If the question does not make sense or is off-topic, say 'Foolish questions get foolish answers.'\"\n", "                \"For example, 'Magic 8 Ball, should I get a dog?', 'A dog is ready for you but are you ready for the dog?'\"\n", "            ),\n", "        },\n", "        {\n", "            \"role\": \"user\",\n", "            \"content\": f\"Magic 8 Ball please answer this question -  {question}\",\n", "        },\n", "    ]\n", "\n", "    response = client.chat_completion( # type: ignore\n", "        messages,\n", "        max_tokens=64,\n", "        seed=random.randint(1, 5000),\n", "        model=\"mistralai/Mistral-7B-Instruct-v0.3\",\n", "    )\n", "    response = response.choices[0].message.content.replace(\"Magic 8 Ball\", \"\")  # type: ignore\n", "    return response, None, None\n", "\n", "\n", "@spaces.GPU\n", "def read_response(answer):\n", "    play_steps_in_s = 2.0\n", "    play_steps = int(frame_rate * play_steps_in_s)\n", "\n", "    description = \"Jenny speaks at an average pace with a calm delivery in a very confined sounding environment with clear audio quality.\"\n", "    description_tokens = tokenizer(description, return_tensors=\"pt\").to(device)\n", "\n", "    streamer = ParlerTTSStreamer(model, device=device, play_steps=play_steps)\n", "    prompt = tokenizer(answer, return_tensors=\"pt\").to(device)\n", "\n", "    generation_kwargs = dict( # noqa: C408\n", "        input_ids=description_tokens.input_ids,\n", "        prompt_input_ids=prompt.input_ids,\n", "        streamer=streamer,\n", "        do_sample=True,\n", "        temperature=1.0,\n", "        min_new_tokens=10,\n", "    )\n", "\n", "    set_seed(SEED)\n", "    thread = Thread(target=model.generate, kwargs=generation_kwargs)\n", "    thread.start()\n", "    start = time.time()\n", "    for new_audio in streamer:\n", "        print(\n", "            f\"Sample of length: {round(new_audio.shape[0] / sampling_rate, 2)} seconds after {time.time() - start} seconds\"\n", "        )\n", "        yield answer, numpy_to_mp3(new_audio, sampling_rate=sampling_rate)\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    gr.HTML(\n", "        \"\"\"\n", "        <h1 style='text-align: center;'> Magic 8 Ball \ud83c\udfb1 </h1>\n", "        <h3 style='text-align: center;'> Ask a question and receive wisdom </h3>\n", "        <p style='text-align: center;'> Powered by <a href=\"https://github.com/huggingface/parler-tts\"> Parler-TTS</a>\n", "        \"\"\"\n", "    )\n", "    with gr.Group():\n", "        with gr.Row():\n", "            audio_out = gr.Audio(\n", "                label=\"Spoken Answer\", streaming=True, autoplay=True, loop=False\n", "            )\n", "            answer = gr.Textbox(label=\"Answer\")\n", "            state = gr.State()\n", "        with gr.Row():\n", "            gr.Markdown(\n", "                \"Example questions: 'Should I get a dog?', 'What is the meaning of life?'\"\n", "            )\n", "            audio_in = gr.Audio(\n", "                label=\"Speak you question\", sources=\"microphone\", type=\"filepath\"\n", "            )\n", "    with gr.Row():\n", "        gr.HTML(\n", "            \"\"\"<h3 style='text-align: center;'> Examples: 'What is the meaning of life?', 'Should I get a dog?' </h3>\"\"\"\n", "        )\n", "    audio_in.stop_recording(\n", "        generate_response, audio_in, [state, answer, audio_out]\n", "    ).then(fn=read_response, inputs=state, outputs=[answer, audio_out])\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/magic_8_ball/run.py b/demo/magic_8_ball/run.py
new file mode 100644
index 0000000000000..a9763c3229b7c
--- /dev/null
+++ b/demo/magic_8_ball/run.py
@@ -0,0 +1,169 @@
+import io
+from threading import Thread
+import random
+import os
+
+import numpy as np
+import spaces
+import gradio as gr
+import torch
+
+from parler_tts import ParlerTTSForConditionalGeneration
+from pydub import AudioSegment
+from transformers import AutoTokenizer, AutoFeatureExtractor, set_seed
+from huggingface_hub import InferenceClient
+from streamer import ParlerTTSStreamer
+import time
+
+
+device = (
+    "cuda:0"
+    if torch.cuda.is_available()
+    else "mps"
+    if torch.backends.mps.is_available()
+    else "cpu"
+)
+torch_dtype = torch.float16 if device != "cpu" else torch.float32
+
+repo_id = "parler-tts/parler_tts_mini_v0.1"
+
+jenny_repo_id = "ylacombe/parler-tts-mini-jenny-30H"
+
+model = ParlerTTSForConditionalGeneration.from_pretrained(
+    jenny_repo_id, torch_dtype=torch_dtype, low_cpu_mem_usage=True
+).to(device)
+
+client = InferenceClient(token=os.getenv("HF_TOKEN"))
+
+tokenizer = AutoTokenizer.from_pretrained(repo_id)
+feature_extractor = AutoFeatureExtractor.from_pretrained(repo_id)
+
+SAMPLE_RATE = feature_extractor.sampling_rate
+SEED = 42
+
+
+def numpy_to_mp3(audio_array, sampling_rate):
+    # Normalize audio_array if it's floating-point
+    if np.issubdtype(audio_array.dtype, np.floating):
+        max_val = np.max(np.abs(audio_array))
+        audio_array = (audio_array / max_val) * 32767  # Normalize to 16-bit range
+        audio_array = audio_array.astype(np.int16)
+
+    # Create an audio segment from the numpy array
+    audio_segment = AudioSegment(
+        audio_array.tobytes(),
+        frame_rate=sampling_rate,
+        sample_width=audio_array.dtype.itemsize,
+        channels=1,
+    )
+
+    # Export the audio segment to MP3 bytes - use a high bitrate to maximise quality
+    mp3_io = io.BytesIO()
+    audio_segment.export(mp3_io, format="mp3", bitrate="320k")
+
+    # Get the MP3 bytes
+    mp3_bytes = mp3_io.getvalue()
+    mp3_io.close()
+
+    return mp3_bytes
+
+
+sampling_rate = model.audio_encoder.config.sampling_rate
+frame_rate = model.audio_encoder.config.frame_rate
+
+
+def generate_response(audio):
+    gr.Info("Transcribing Audio", duration=5)
+    question = client.automatic_speech_recognition(audio).text  # type: ignore
+    messages = [
+        {
+            "role": "system",
+            "content": (
+                "You are a magic 8 ball."
+                "Someone will present to you a situation or question and your job "
+                "is to answer with a cryptic addage or proverb such as "
+                "'curiosity killed the cat' or 'The early bird gets the worm'."
+                "Keep your answers short and do not include the phrase 'Magic 8 Ball' in your response. If the question does not make sense or is off-topic, say 'Foolish questions get foolish answers.'"
+                "For example, 'Magic 8 Ball, should I get a dog?', 'A dog is ready for you but are you ready for the dog?'"
+            ),
+        },
+        {
+            "role": "user",
+            "content": f"Magic 8 Ball please answer this question -  {question}",
+        },
+    ]
+
+    response = client.chat_completion( # type: ignore
+        messages,
+        max_tokens=64,
+        seed=random.randint(1, 5000),
+        model="mistralai/Mistral-7B-Instruct-v0.3",
+    )
+    response = response.choices[0].message.content.replace("Magic 8 Ball", "")  # type: ignore
+    return response, None, None
+
+
+@spaces.GPU
+def read_response(answer):
+    play_steps_in_s = 2.0
+    play_steps = int(frame_rate * play_steps_in_s)
+
+    description = "Jenny speaks at an average pace with a calm delivery in a very confined sounding environment with clear audio quality."
+    description_tokens = tokenizer(description, return_tensors="pt").to(device)
+
+    streamer = ParlerTTSStreamer(model, device=device, play_steps=play_steps)
+    prompt = tokenizer(answer, return_tensors="pt").to(device)
+
+    generation_kwargs = dict( # noqa: C408
+        input_ids=description_tokens.input_ids,
+        prompt_input_ids=prompt.input_ids,
+        streamer=streamer,
+        do_sample=True,
+        temperature=1.0,
+        min_new_tokens=10,
+    )
+
+    set_seed(SEED)
+    thread = Thread(target=model.generate, kwargs=generation_kwargs)
+    thread.start()
+    start = time.time()
+    for new_audio in streamer:
+        print(
+            f"Sample of length: {round(new_audio.shape[0] / sampling_rate, 2)} seconds after {time.time() - start} seconds"
+        )
+        yield answer, numpy_to_mp3(new_audio, sampling_rate=sampling_rate)
+
+
+with gr.Blocks() as demo:
+    gr.HTML(
+        """
+        <h1 style='text-align: center;'> Magic 8 Ball 🎱 </h1>
+        <h3 style='text-align: center;'> Ask a question and receive wisdom </h3>
+        <p style='text-align: center;'> Powered by <a href="https://github.com/huggingface/parler-tts"> Parler-TTS</a>
+        """
+    )
+    with gr.Group():
+        with gr.Row():
+            audio_out = gr.Audio(
+                label="Spoken Answer", streaming=True, autoplay=True, loop=False
+            )
+            answer = gr.Textbox(label="Answer")
+            state = gr.State()
+        with gr.Row():
+            gr.Markdown(
+                "Example questions: 'Should I get a dog?', 'What is the meaning of life?'"
+            )
+            audio_in = gr.Audio(
+                label="Speak you question", sources="microphone", type="filepath"
+            )
+    with gr.Row():
+        gr.HTML(
+            """<h3 style='text-align: center;'> Examples: 'What is the meaning of life?', 'Should I get a dog?' </h3>"""
+        )
+    audio_in.stop_recording(
+        generate_response, audio_in, [state, answer, audio_out]
+    ).then(fn=read_response, inputs=state, outputs=[answer, audio_out])
+
+
+if __name__ == "__main__":
+    demo.launch()
diff --git a/demo/magic_8_ball/streamer.py b/demo/magic_8_ball/streamer.py
new file mode 100644
index 0000000000000..289b05c06ed64
--- /dev/null
+++ b/demo/magic_8_ball/streamer.py
@@ -0,0 +1,146 @@
+from queue import Queue
+from transformers.generation.streamers import BaseStreamer
+from typing import Optional
+from parler_tts import ParlerTTSForConditionalGeneration
+import numpy as np
+import math
+import torch
+
+
+class ParlerTTSStreamer(BaseStreamer):
+    def __init__(
+        self,
+        model: ParlerTTSForConditionalGeneration,
+        device: Optional[str] = None,
+        play_steps: Optional[int] = 10,
+        stride: Optional[int] = None,
+        timeout: Optional[float] = None,
+    ):
+        """
+        Streamer that stores playback-ready audio in a queue, to be used by a downstream application as an iterator. This is
+        useful for applications that benefit from accessing the generated audio in a non-blocking way (e.g. in an interactive
+        Gradio demo).
+        Parameters:
+            model (`ParlerTTSForConditionalGeneration`):
+                The Parler-TTS model used to generate the audio waveform.
+            device (`str`, *optional*):
+                The torch device on which to run the computation. If `None`, will default to the device of the model.
+            play_steps (`int`, *optional*, defaults to 10):
+                The number of generation steps with which to return the generated audio array. Using fewer steps will
+                mean the first chunk is ready faster, but will require more codec decoding steps overall. This value
+                should be tuned to your device and latency requirements.
+            stride (`int`, *optional*):
+                The window (stride) between adjacent audio samples. Using a stride between adjacent audio samples reduces
+                the hard boundary between them, giving smoother playback. If `None`, will default to a value equivalent to
+                play_steps // 6 in the audio space.
+            timeout (`int`, *optional*):
+                The timeout for the audio queue. If `None`, the queue will block indefinitely. Useful to handle exceptions
+                in `.generate()`, when it is called in a separate thread.
+        """
+        self.decoder = model.decoder
+        self.audio_encoder = model.audio_encoder
+        self.generation_config = model.generation_config
+        self.device = device if device is not None else model.device
+
+        # variables used in the streaming process
+        self.play_steps = play_steps
+        if stride is not None:
+            self.stride = stride
+        else:
+            hop_length = math.floor(
+                self.audio_encoder.config.sampling_rate
+                / self.audio_encoder.config.frame_rate
+            )
+            self.stride = hop_length * (play_steps - self.decoder.num_codebooks) // 6
+        self.token_cache = None
+        self.to_yield = 0
+
+        # varibles used in the thread process
+        self.audio_queue = Queue()
+        self.stop_signal = None
+        self.timeout = timeout
+
+    def apply_delay_pattern_mask(self, input_ids):
+        # build the delay pattern mask for offsetting each codebook prediction by 1 (this behaviour is specific to Parler)
+        _, delay_pattern_mask = self.decoder.build_delay_pattern_mask(
+            input_ids[:, :1],
+            bos_token_id=self.generation_config.bos_token_id,
+            pad_token_id=self.generation_config.decoder_start_token_id,
+            max_length=input_ids.shape[-1],
+        )
+        # apply the pattern mask to the input ids
+        input_ids = self.decoder.apply_delay_pattern_mask(input_ids, delay_pattern_mask)
+
+        # revert the pattern delay mask by filtering the pad token id
+        mask = (delay_pattern_mask != self.generation_config.bos_token_id) & (
+            delay_pattern_mask != self.generation_config.pad_token_id
+        )
+        input_ids = input_ids[mask].reshape(1, self.decoder.num_codebooks, -1)
+        # append the frame dimension back to the audio codes
+        input_ids = input_ids[None, ...]
+
+        # send the input_ids to the correct device
+        input_ids = input_ids.to(self.audio_encoder.device)
+
+        decode_sequentially = (
+            self.generation_config.bos_token_id in input_ids
+            or self.generation_config.pad_token_id in input_ids
+            or self.generation_config.eos_token_id in input_ids
+        )
+        if not decode_sequentially:
+            output_values = self.audio_encoder.decode(
+                input_ids,
+                audio_scales=[None],
+            )
+        else:
+            sample = input_ids[:, 0]
+            sample_mask = (sample >= self.audio_encoder.config.codebook_size).sum(
+                dim=(0, 1)
+            ) == 0
+            sample = sample[:, :, sample_mask]
+            output_values = self.audio_encoder.decode(sample[None, ...], [None])
+
+        audio_values = output_values.audio_values[0, 0]
+        return audio_values.cpu().float().numpy()
+
+    def put(self, value):
+        batch_size = value.shape[0] // self.decoder.num_codebooks
+        if batch_size > 1:
+            raise ValueError("ParlerTTSStreamer only supports batch size 1")
+
+        if self.token_cache is None:
+            self.token_cache = value
+        else:
+            self.token_cache = torch.concatenate(
+                [self.token_cache, value[:, None]], dim=-1
+            )
+
+        if self.token_cache.shape[-1] % self.play_steps == 0:  # type: ignore
+            audio_values = self.apply_delay_pattern_mask(self.token_cache)
+            self.on_finalized_audio(audio_values[self.to_yield : -self.stride])
+            self.to_yield += len(audio_values) - self.to_yield - self.stride
+
+    def end(self):
+        """Flushes any remaining cache and appends the stop symbol."""
+        if self.token_cache is not None:
+            audio_values = self.apply_delay_pattern_mask(self.token_cache)
+        else:
+            audio_values = np.zeros(self.to_yield)
+
+        self.on_finalized_audio(audio_values[self.to_yield :], stream_end=True)
+
+    def on_finalized_audio(self, audio: np.ndarray, stream_end: bool = False):
+        """Put the new audio in the queue. If the stream is ending, also put a stop signal in the queue."""
+        self.audio_queue.put(audio, timeout=self.timeout)
+        if stream_end:
+            self.audio_queue.put(self.stop_signal, timeout=self.timeout)
+
+    def __iter__(self):
+        return self
+
+    def __next__(self):
+        value = self.audio_queue.get(timeout=self.timeout)
+        if not isinstance(value, np.ndarray) and value == self.stop_signal:
+            raise StopIteration()
+        else:
+            return value
diff --git a/demo/map_airbnb/requirements.txt b/demo/map_airbnb/requirements.txt
index d42d0ad03bdf8..582e17fcf7a29 100644
--- a/demo/map_airbnb/requirements.txt
+++ b/demo/map_airbnb/requirements.txt
@@ -1 +1,2 @@
-plotly
\ No newline at end of file
+plotly
+datasets
diff --git a/demo/map_airbnb/run.ipynb b/demo/map_airbnb/run.ipynb
index a500326a662e6..fe82b3a818310 100644
--- a/demo/map_airbnb/run.ipynb
+++ b/demo/map_airbnb/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: map_airbnb\n", "### Display an interactive map of AirBnB locations with Plotly. Data is hosted on HuggingFace Datasets. \n", "        "]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio plotly"]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# type: ignore\n", "import gradio as gr\n", "import plotly.graph_objects as go\n", "from datasets import load_dataset\n", "\n", "dataset = load_dataset(\"gradio/NYC-Airbnb-Open-Data\", split=\"train\")\n", "df = dataset.to_pandas()\n", "\n", "def filter_map(min_price, max_price, boroughs):\n", "\n", "    filtered_df = df[(df['neighbourhood_group'].isin(boroughs)) &\n", "          (df['price'] > min_price) & (df['price'] < max_price)]\n", "    names = filtered_df[\"name\"].tolist()\n", "    prices = filtered_df[\"price\"].tolist()\n", "    text_list = [(names[i], prices[i]) for i in range(0, len(names))]\n", "    fig = go.Figure(go.Scattermapbox(\n", "            customdata=text_list,\n", "            lat=filtered_df['latitude'].tolist(),\n", "            lon=filtered_df['longitude'].tolist(),\n", "            mode='markers',\n", "            marker=go.scattermapbox.Marker(\n", "                size=6\n", "            ),\n", "            hoverinfo=\"text\",\n", "            hovertemplate='<b>Name</b>: %{customdata[0]}<br><b>Price</b>: $%{customdata[1]}'\n", "        ))\n", "\n", "    fig.update_layout(\n", "        mapbox_style=\"open-street-map\",\n", "        hovermode='closest',\n", "        mapbox=dict(\n", "            bearing=0,\n", "            center=go.layout.mapbox.Center(\n", "                lat=40.67,\n", "                lon=-73.90\n", "            ),\n", "            pitch=0,\n", "            zoom=9\n", "        ),\n", "    )\n", "\n", "    return fig\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Column():\n", "        with gr.Row():\n", "            min_price = gr.Number(value=250, label=\"Minimum Price\")\n", "            max_price = gr.Number(value=1000, label=\"Maximum Price\")\n", "        boroughs = gr.CheckboxGroup(choices=[\"Queens\", \"Brooklyn\", \"Manhattan\", \"Bronx\", \"Staten Island\"], value=[\"Queens\", \"Brooklyn\"], label=\"Select Boroughs:\")\n", "        btn = gr.Button(value=\"Update Filter\")\n", "        map = gr.Plot()\n", "    demo.load(filter_map, [min_price, max_price, boroughs], map)\n", "    btn.click(filter_map, [min_price, max_price, boroughs], map)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: map_airbnb\n", "### Display an interactive map of AirBnB locations with Plotly. Data is hosted on HuggingFace Datasets. \n", "        "]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio plotly datasets "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# type: ignore\n", "import gradio as gr\n", "import plotly.graph_objects as go\n", "from datasets import load_dataset\n", "\n", "dataset = load_dataset(\"gradio/NYC-Airbnb-Open-Data\", split=\"train\")\n", "df = dataset.to_pandas()\n", "\n", "def filter_map(min_price, max_price, boroughs):\n", "\n", "    filtered_df = df[(df['neighbourhood_group'].isin(boroughs)) &\n", "          (df['price'] > min_price) & (df['price'] < max_price)]\n", "    names = filtered_df[\"name\"].tolist()\n", "    prices = filtered_df[\"price\"].tolist()\n", "    text_list = [(names[i], prices[i]) for i in range(0, len(names))]\n", "    fig = go.Figure(go.Scattermapbox(\n", "            customdata=text_list,\n", "            lat=filtered_df['latitude'].tolist(),\n", "            lon=filtered_df['longitude'].tolist(),\n", "            mode='markers',\n", "            marker=go.scattermapbox.Marker(\n", "                size=6\n", "            ),\n", "            hoverinfo=\"text\",\n", "            hovertemplate='<b>Name</b>: %{customdata[0]}<br><b>Price</b>: $%{customdata[1]}'\n", "        ))\n", "\n", "    fig.update_layout(\n", "        mapbox_style=\"open-street-map\",\n", "        hovermode='closest',\n", "        mapbox=dict(\n", "            bearing=0,\n", "            center=go.layout.mapbox.Center(\n", "                lat=40.67,\n", "                lon=-73.90\n", "            ),\n", "            pitch=0,\n", "            zoom=9\n", "        ),\n", "    )\n", "\n", "    return fig\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Column():\n", "        with gr.Row():\n", "            min_price = gr.Number(value=250, label=\"Minimum Price\")\n", "            max_price = gr.Number(value=1000, label=\"Maximum Price\")\n", "        boroughs = gr.CheckboxGroup(choices=[\"Queens\", \"Brooklyn\", \"Manhattan\", \"Bronx\", \"Staten Island\"], value=[\"Queens\", \"Brooklyn\"], label=\"Select Boroughs:\")\n", "        btn = gr.Button(value=\"Update Filter\")\n", "        map = gr.Plot()\n", "    demo.load(filter_map, [min_price, max_price, boroughs], map)\n", "    btn.click(filter_map, [min_price, max_price, boroughs], map)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/markdown_component/run.ipynb b/demo/markdown_component/run.ipynb
index 7867cad8885ab..82748cea4737a 100644
--- a/demo/markdown_component/run.ipynb
+++ b/demo/markdown_component/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: markdown_component"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(value=\"This _example_ was **written** in [Markdown](https://en.wikipedia.org/wiki/Markdown)\\n\")\n", "\n", "demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: markdown_component"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(\n", "        value=\"This _example_ was **written** in [Markdown](https://en.wikipedia.org/wiki/Markdown)\\n <a onclick='stoof' href='https://en.wikipedia.org/wiki/Markdown'>Markdown</a>\"\n", "    )\n", "\n", "demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/markdown_component/run.py b/demo/markdown_component/run.py
index f02bda05bb2b7..71422fbb4a5bb 100644
--- a/demo/markdown_component/run.py
+++ b/demo/markdown_component/run.py
@@ -1,6 +1,8 @@
 import gradio as gr
 
 with gr.Blocks() as demo:
-    gr.Markdown(value="This _example_ was **written** in [Markdown](https://en.wikipedia.org/wiki/Markdown)\n")
+    gr.Markdown(
+        value="This _example_ was **written** in [Markdown](https://en.wikipedia.org/wiki/Markdown)\n <a onclick='stoof' href='https://en.wikipedia.org/wiki/Markdown'>Markdown</a>"
+    )
 
 demo.launch()
diff --git a/demo/mini_leaderboard/requirements.txt b/demo/mini_leaderboard/requirements.txt
new file mode 100644
index 0000000000000..fb6c7ed7ec60d
--- /dev/null
+++ b/demo/mini_leaderboard/requirements.txt
@@ -0,0 +1 @@
+pandas
diff --git a/demo/mini_leaderboard/run.ipynb b/demo/mini_leaderboard/run.ipynb
index 509ce3966ac94..db8e589ee0769 100644
--- a/demo/mini_leaderboard/run.ipynb
+++ b/demo/mini_leaderboard/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: mini_leaderboard"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('assets')\n", "!wget -q -O assets/__init__.py https://github.com/gradio-app/gradio/raw/main/demo/mini_leaderboard/assets/__init__.py\n", "!wget -q -O assets/custom_css.css https://github.com/gradio-app/gradio/raw/main/demo/mini_leaderboard/assets/custom_css.css\n", "!wget -q -O assets/leaderboard_data.json https://github.com/gradio-app/gradio/raw/main/demo/mini_leaderboard/assets/leaderboard_data.json"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import pandas as pd\n", "from pathlib import Path\n", "\n", "abs_path = Path(__file__).parent.absolute()\n", "\n", "df = pd.read_json(str(abs_path / \"assets/leaderboard_data.json\"))\n", "invisible_df = df.copy()\n", "\n", "COLS = [\n", "    \"T\",\n", "    \"Model\",\n", "    \"Average \u2b06\ufe0f\",\n", "    \"ARC\",\n", "    \"HellaSwag\",\n", "    \"MMLU\",\n", "    \"TruthfulQA\",\n", "    \"Winogrande\",\n", "    \"GSM8K\",\n", "    \"Type\",\n", "    \"Architecture\",\n", "    \"Precision\",\n", "    \"Merged\",\n", "    \"Hub License\",\n", "    \"#Params (B)\",\n", "    \"Hub \u2764\ufe0f\",\n", "    \"Model sha\",\n", "    \"model_name_for_query\",\n", "]\n", "ON_LOAD_COLS = [\n", "    \"T\",\n", "    \"Model\",\n", "    \"Average \u2b06\ufe0f\",\n", "    \"ARC\",\n", "    \"HellaSwag\",\n", "    \"MMLU\",\n", "    \"TruthfulQA\",\n", "    \"Winogrande\",\n", "    \"GSM8K\",\n", "    \"model_name_for_query\",\n", "]\n", "TYPES = [\n", "    \"str\",\n", "    \"markdown\",\n", "    \"number\",\n", "    \"number\",\n", "    \"number\",\n", "    \"number\",\n", "    \"number\",\n", "    \"number\",\n", "    \"number\",\n", "    \"str\",\n", "    \"str\",\n", "    \"str\",\n", "    \"str\",\n", "    \"bool\",\n", "    \"str\",\n", "    \"number\",\n", "    \"number\",\n", "    \"bool\",\n", "    \"str\",\n", "    \"bool\",\n", "    \"bool\",\n", "    \"str\",\n", "]\n", "NUMERIC_INTERVALS = {\n", "    \"?\": pd.Interval(-1, 0, closed=\"right\"),\n", "    \"~1.5\": pd.Interval(0, 2, closed=\"right\"),\n", "    \"~3\": pd.Interval(2, 4, closed=\"right\"),\n", "    \"~7\": pd.Interval(4, 9, closed=\"right\"),\n", "    \"~13\": pd.Interval(9, 20, closed=\"right\"),\n", "    \"~35\": pd.Interval(20, 45, closed=\"right\"),\n", "    \"~60\": pd.Interval(45, 70, closed=\"right\"),\n", "    \"70+\": pd.Interval(70, 10000, closed=\"right\"),\n", "}\n", "MODEL_TYPE = [str(s) for s in df[\"T\"].unique()]\n", "Precision = [str(s) for s in df[\"Precision\"].unique()]\n", "\n", "# Searching and filtering\n", "def update_table(\n", "    hidden_df: pd.DataFrame,\n", "    columns: list,\n", "    type_query: list,\n", "    precision_query: str,\n", "    size_query: list,\n", "    query: str,\n", "):\n", "    filtered_df = filter_models(hidden_df, type_query, size_query, precision_query)  # type: ignore\n", "    filtered_df = filter_queries(query, filtered_df)\n", "    df = select_columns(filtered_df, columns)\n", "    return df\n", "\n", "def search_table(df: pd.DataFrame, query: str) -> pd.DataFrame:\n", "    return df[(df[\"model_name_for_query\"].str.contains(query, case=False))]  # type: ignore\n", "\n", "def select_columns(df: pd.DataFrame, columns: list) -> pd.DataFrame:\n", "    # We use COLS to maintain sorting\n", "    filtered_df = df[[c for c in COLS if c in df.columns and c in columns]]\n", "    return filtered_df  # type: ignore\n", "\n", "def filter_queries(query: str, filtered_df: pd.DataFrame) -> pd.DataFrame:\n", "    final_df = []\n", "    if query != \"\":\n", "        queries = [q.strip() for q in query.split(\";\")]\n", "        for _q in queries:\n", "            _q = _q.strip()\n", "            if _q != \"\":\n", "                temp_filtered_df = search_table(filtered_df, _q)\n", "                if len(temp_filtered_df) > 0:\n", "                    final_df.append(temp_filtered_df)\n", "        if len(final_df) > 0:\n", "            filtered_df = pd.concat(final_df)\n", "            filtered_df = filtered_df.drop_duplicates(  # type: ignore\n", "                subset=[\"Model\", \"Precision\", \"Model sha\"]\n", "            )\n", "\n", "    return filtered_df\n", "\n", "def filter_models(\n", "    df: pd.DataFrame,\n", "    type_query: list,\n", "    size_query: list,\n", "    precision_query: list,\n", ") -> pd.DataFrame:\n", "    # Show all models\n", "    filtered_df = df\n", "\n", "    type_emoji = [t[0] for t in type_query]\n", "    filtered_df = filtered_df.loc[df[\"T\"].isin(type_emoji)]\n", "    filtered_df = filtered_df.loc[df[\"Precision\"].isin(precision_query + [\"None\"])]\n", "\n", "    numeric_interval = pd.IntervalIndex(\n", "        sorted([NUMERIC_INTERVALS[s] for s in size_query])  # type: ignore\n", "    )\n", "    params_column = pd.to_numeric(df[\"#Params (B)\"], errors=\"coerce\")\n", "    mask = params_column.apply(lambda x: any(numeric_interval.contains(x)))  # type: ignore\n", "    filtered_df = filtered_df.loc[mask]\n", "\n", "    return filtered_df\n", "\n", "demo = gr.Blocks(css=str(abs_path / \"assets/leaderboard_data.json\"))\n", "with demo:\n", "    gr.Markdown(\"\"\"Test Space of the LLM Leaderboard\"\"\", elem_classes=\"markdown-text\")\n", "\n", "    with gr.Tabs(elem_classes=\"tab-buttons\") as tabs:\n", "        with gr.TabItem(\"\ud83c\udfc5 LLM Benchmark\", elem_id=\"llm-benchmark-tab-table\", id=0):\n", "            with gr.Row():\n", "                with gr.Column():\n", "                    with gr.Row():\n", "                        search_bar = gr.Textbox(\n", "                            placeholder=\" \ud83d\udd0d Search for your model (separate multiple queries with `;`) and press ENTER...\",\n", "                            show_label=False,\n", "                            elem_id=\"search-bar\",\n", "                        )\n", "                    with gr.Row():\n", "                        shown_columns = gr.CheckboxGroup(\n", "                            choices=COLS,\n", "                            value=ON_LOAD_COLS,\n", "                            label=\"Select columns to show\",\n", "                            elem_id=\"column-select\",\n", "                            interactive=True,\n", "                        )\n", "                with gr.Column(min_width=320):\n", "                    filter_columns_type = gr.CheckboxGroup(\n", "                        label=\"Model types\",\n", "                        choices=MODEL_TYPE,\n", "                        value=MODEL_TYPE,\n", "                        interactive=True,\n", "                        elem_id=\"filter-columns-type\",\n", "                    )\n", "                    filter_columns_precision = gr.CheckboxGroup(\n", "                        label=\"Precision\",\n", "                        choices=Precision,\n", "                        value=Precision,\n", "                        interactive=True,\n", "                        elem_id=\"filter-columns-precision\",\n", "                    )\n", "                    filter_columns_size = gr.CheckboxGroup(\n", "                        label=\"Model sizes (in billions of parameters)\",\n", "                        choices=list(NUMERIC_INTERVALS.keys()),\n", "                        value=list(NUMERIC_INTERVALS.keys()),\n", "                        interactive=True,\n", "                        elem_id=\"filter-columns-size\",\n", "                    )\n", "\n", "            leaderboard_table = gr.components.Dataframe(\n", "                value=df[ON_LOAD_COLS],  # type: ignore\n", "                headers=ON_LOAD_COLS,\n", "                datatype=TYPES,\n", "                elem_id=\"leaderboard-table\",\n", "                interactive=False,\n", "                visible=True,\n", "                column_widths=[\"2%\", \"33%\"],\n", "            )\n", "\n", "            # Dummy leaderboard for handling the case when the user uses backspace key\n", "            hidden_leaderboard_table_for_search = gr.components.Dataframe(\n", "                value=invisible_df[COLS],  # type: ignore\n", "                headers=COLS,\n", "                datatype=TYPES,\n", "                visible=False,\n", "            )\n", "            search_bar.submit(\n", "                update_table,\n", "                [\n", "                    hidden_leaderboard_table_for_search,\n", "                    shown_columns,\n", "                    filter_columns_type,\n", "                    filter_columns_precision,\n", "                    filter_columns_size,\n", "                    search_bar,\n", "                ],\n", "                leaderboard_table,\n", "            )\n", "            for selector in [\n", "                shown_columns,\n", "                filter_columns_type,\n", "                filter_columns_precision,\n", "                filter_columns_size,\n", "            ]:\n", "                selector.change(\n", "                    update_table,\n", "                    [\n", "                        hidden_leaderboard_table_for_search,\n", "                        shown_columns,\n", "                        filter_columns_type,\n", "                        filter_columns_precision,\n", "                        filter_columns_size,\n", "                        search_bar,\n", "                    ],\n", "                    leaderboard_table,\n", "                    queue=True,\n", "                )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.queue(default_concurrency_limit=40).launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: mini_leaderboard"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio pandas "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('assets')\n", "!wget -q -O assets/__init__.py https://github.com/gradio-app/gradio/raw/main/demo/mini_leaderboard/assets/__init__.py\n", "!wget -q -O assets/custom_css.css https://github.com/gradio-app/gradio/raw/main/demo/mini_leaderboard/assets/custom_css.css\n", "!wget -q -O assets/leaderboard_data.json https://github.com/gradio-app/gradio/raw/main/demo/mini_leaderboard/assets/leaderboard_data.json"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import pandas as pd\n", "from pathlib import Path\n", "\n", "abs_path = Path(__file__).parent.absolute()\n", "\n", "df = pd.read_json(str(abs_path / \"assets/leaderboard_data.json\"))\n", "invisible_df = df.copy()\n", "\n", "COLS = [\n", "    \"T\",\n", "    \"Model\",\n", "    \"Average \u2b06\ufe0f\",\n", "    \"ARC\",\n", "    \"HellaSwag\",\n", "    \"MMLU\",\n", "    \"TruthfulQA\",\n", "    \"Winogrande\",\n", "    \"GSM8K\",\n", "    \"Type\",\n", "    \"Architecture\",\n", "    \"Precision\",\n", "    \"Merged\",\n", "    \"Hub License\",\n", "    \"#Params (B)\",\n", "    \"Hub \u2764\ufe0f\",\n", "    \"Model sha\",\n", "    \"model_name_for_query\",\n", "]\n", "ON_LOAD_COLS = [\n", "    \"T\",\n", "    \"Model\",\n", "    \"Average \u2b06\ufe0f\",\n", "    \"ARC\",\n", "    \"HellaSwag\",\n", "    \"MMLU\",\n", "    \"TruthfulQA\",\n", "    \"Winogrande\",\n", "    \"GSM8K\",\n", "    \"model_name_for_query\",\n", "]\n", "TYPES = [\n", "    \"str\",\n", "    \"markdown\",\n", "    \"number\",\n", "    \"number\",\n", "    \"number\",\n", "    \"number\",\n", "    \"number\",\n", "    \"number\",\n", "    \"number\",\n", "    \"str\",\n", "    \"str\",\n", "    \"str\",\n", "    \"str\",\n", "    \"bool\",\n", "    \"str\",\n", "    \"number\",\n", "    \"number\",\n", "    \"bool\",\n", "    \"str\",\n", "    \"bool\",\n", "    \"bool\",\n", "    \"str\",\n", "]\n", "NUMERIC_INTERVALS = {\n", "    \"?\": pd.Interval(-1, 0, closed=\"right\"),\n", "    \"~1.5\": pd.Interval(0, 2, closed=\"right\"),\n", "    \"~3\": pd.Interval(2, 4, closed=\"right\"),\n", "    \"~7\": pd.Interval(4, 9, closed=\"right\"),\n", "    \"~13\": pd.Interval(9, 20, closed=\"right\"),\n", "    \"~35\": pd.Interval(20, 45, closed=\"right\"),\n", "    \"~60\": pd.Interval(45, 70, closed=\"right\"),\n", "    \"70+\": pd.Interval(70, 10000, closed=\"right\"),\n", "}\n", "MODEL_TYPE = [str(s) for s in df[\"T\"].unique()]\n", "Precision = [str(s) for s in df[\"Precision\"].unique()]\n", "\n", "# Searching and filtering\n", "def update_table(\n", "    hidden_df: pd.DataFrame,\n", "    columns: list,\n", "    type_query: list,\n", "    precision_query: str,\n", "    size_query: list,\n", "    query: str,\n", "):\n", "    filtered_df = filter_models(hidden_df, type_query, size_query, precision_query)  # type: ignore\n", "    filtered_df = filter_queries(query, filtered_df)\n", "    df = select_columns(filtered_df, columns)\n", "    return df\n", "\n", "def search_table(df: pd.DataFrame, query: str) -> pd.DataFrame:\n", "    return df[(df[\"model_name_for_query\"].str.contains(query, case=False))]  # type: ignore\n", "\n", "def select_columns(df: pd.DataFrame, columns: list) -> pd.DataFrame:\n", "    # We use COLS to maintain sorting\n", "    filtered_df = df[[c for c in COLS if c in df.columns and c in columns]]\n", "    return filtered_df  # type: ignore\n", "\n", "def filter_queries(query: str, filtered_df: pd.DataFrame) -> pd.DataFrame:\n", "    final_df = []\n", "    if query != \"\":\n", "        queries = [q.strip() for q in query.split(\";\")]\n", "        for _q in queries:\n", "            _q = _q.strip()\n", "            if _q != \"\":\n", "                temp_filtered_df = search_table(filtered_df, _q)\n", "                if len(temp_filtered_df) > 0:\n", "                    final_df.append(temp_filtered_df)\n", "        if len(final_df) > 0:\n", "            filtered_df = pd.concat(final_df)\n", "            filtered_df = filtered_df.drop_duplicates(  # type: ignore\n", "                subset=[\"Model\", \"Precision\", \"Model sha\"]\n", "            )\n", "\n", "    return filtered_df\n", "\n", "def filter_models(\n", "    df: pd.DataFrame,\n", "    type_query: list,\n", "    size_query: list,\n", "    precision_query: list,\n", ") -> pd.DataFrame:\n", "    # Show all models\n", "    filtered_df = df\n", "\n", "    type_emoji = [t[0] for t in type_query]\n", "    filtered_df = filtered_df.loc[df[\"T\"].isin(type_emoji)]\n", "    filtered_df = filtered_df.loc[df[\"Precision\"].isin(precision_query + [\"None\"])]\n", "\n", "    numeric_interval = pd.IntervalIndex(\n", "        sorted([NUMERIC_INTERVALS[s] for s in size_query])  # type: ignore\n", "    )\n", "    params_column = pd.to_numeric(df[\"#Params (B)\"], errors=\"coerce\")\n", "    mask = params_column.apply(lambda x: any(numeric_interval.contains(x)))  # type: ignore\n", "    filtered_df = filtered_df.loc[mask]\n", "\n", "    return filtered_df\n", "\n", "demo = gr.Blocks(css=str(abs_path / \"assets/leaderboard_data.json\"))\n", "with demo:\n", "    gr.Markdown(\"\"\"Test Space of the LLM Leaderboard\"\"\", elem_classes=\"markdown-text\")\n", "\n", "    with gr.Tabs(elem_classes=\"tab-buttons\") as tabs:\n", "        with gr.TabItem(\"\ud83c\udfc5 LLM Benchmark\", elem_id=\"llm-benchmark-tab-table\", id=0):\n", "            with gr.Row():\n", "                with gr.Column():\n", "                    with gr.Row():\n", "                        search_bar = gr.Textbox(\n", "                            placeholder=\" \ud83d\udd0d Search for your model (separate multiple queries with `;`) and press ENTER...\",\n", "                            show_label=False,\n", "                            elem_id=\"search-bar\",\n", "                        )\n", "                    with gr.Row():\n", "                        shown_columns = gr.CheckboxGroup(\n", "                            choices=COLS,\n", "                            value=ON_LOAD_COLS,\n", "                            label=\"Select columns to show\",\n", "                            elem_id=\"column-select\",\n", "                            interactive=True,\n", "                        )\n", "                with gr.Column(min_width=320):\n", "                    filter_columns_type = gr.CheckboxGroup(\n", "                        label=\"Model types\",\n", "                        choices=MODEL_TYPE,\n", "                        value=MODEL_TYPE,\n", "                        interactive=True,\n", "                        elem_id=\"filter-columns-type\",\n", "                    )\n", "                    filter_columns_precision = gr.CheckboxGroup(\n", "                        label=\"Precision\",\n", "                        choices=Precision,\n", "                        value=Precision,\n", "                        interactive=True,\n", "                        elem_id=\"filter-columns-precision\",\n", "                    )\n", "                    filter_columns_size = gr.CheckboxGroup(\n", "                        label=\"Model sizes (in billions of parameters)\",\n", "                        choices=list(NUMERIC_INTERVALS.keys()),\n", "                        value=list(NUMERIC_INTERVALS.keys()),\n", "                        interactive=True,\n", "                        elem_id=\"filter-columns-size\",\n", "                    )\n", "\n", "            leaderboard_table = gr.components.Dataframe(\n", "                value=df[ON_LOAD_COLS],  # type: ignore\n", "                headers=ON_LOAD_COLS,\n", "                datatype=TYPES,\n", "                elem_id=\"leaderboard-table\",\n", "                interactive=False,\n", "                visible=True,\n", "                column_widths=[\"2%\", \"33%\"],\n", "            )\n", "\n", "            # Dummy leaderboard for handling the case when the user uses backspace key\n", "            hidden_leaderboard_table_for_search = gr.components.Dataframe(\n", "                value=invisible_df[COLS],  # type: ignore\n", "                headers=COLS,\n", "                datatype=TYPES,\n", "                visible=False,\n", "            )\n", "            search_bar.submit(\n", "                update_table,\n", "                [\n", "                    hidden_leaderboard_table_for_search,\n", "                    shown_columns,\n", "                    filter_columns_type,\n", "                    filter_columns_precision,\n", "                    filter_columns_size,\n", "                    search_bar,\n", "                ],\n", "                leaderboard_table,\n", "            )\n", "            for selector in [\n", "                shown_columns,\n", "                filter_columns_type,\n", "                filter_columns_precision,\n", "                filter_columns_size,\n", "            ]:\n", "                selector.change(\n", "                    update_table,\n", "                    [\n", "                        hidden_leaderboard_table_for_search,\n", "                        shown_columns,\n", "                        filter_columns_type,\n", "                        filter_columns_precision,\n", "                        filter_columns_size,\n", "                        search_bar,\n", "                    ],\n", "                    leaderboard_table,\n", "                    queue=True,\n", "                )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.queue(default_concurrency_limit=40).launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/native_plots/requirements.txt b/demo/native_plots/requirements.txt
index d1c8a7ae0396d..fe1f1ac6ca525 100644
--- a/demo/native_plots/requirements.txt
+++ b/demo/native_plots/requirements.txt
@@ -1 +1,2 @@
-vega_datasets
\ No newline at end of file
+vega_datasets
+pandas
diff --git a/demo/native_plots/run.ipynb b/demo/native_plots/run.ipynb
index 19d02266ed36a..5c47d25801eb3 100644
--- a/demo/native_plots/run.ipynb
+++ b/demo/native_plots/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: native_plots"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio vega_datasets"]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/native_plots/bar_plot_demo.py\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/native_plots/data.py\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/native_plots/line_plot_demo.py\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/native_plots/scatter_plot_demo.py"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "from scatter_plot_demo import scatter_plots\n", "from line_plot_demo import line_plots\n", "from bar_plot_demo import bar_plots\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Tabs():\n", "        with gr.TabItem(\"Line Plot\"):\n", "            line_plots.render()\n", "        with gr.TabItem(\"Scatter Plot\"):\n", "            scatter_plots.render()\n", "        with gr.TabItem(\"Bar Plot\"):\n", "            bar_plots.render()\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: native_plots"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio vega_datasets pandas "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/native_plots/bar_plot_demo.py\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/native_plots/data.py\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/native_plots/line_plot_demo.py\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/native_plots/scatter_plot_demo.py"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "from scatter_plot_demo import scatter_plots\n", "from line_plot_demo import line_plots\n", "from bar_plot_demo import bar_plots\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Tabs():\n", "        with gr.TabItem(\"Line Plot\"):\n", "            line_plots.render()\n", "        with gr.TabItem(\"Scatter Plot\"):\n", "            scatter_plots.render()\n", "        with gr.TabItem(\"Bar Plot\"):\n", "            bar_plots.render()\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/outbreak_forecast/requirements.txt b/demo/outbreak_forecast/requirements.txt
index 5615a533fc386..f513b41b84d2c 100644
--- a/demo/outbreak_forecast/requirements.txt
+++ b/demo/outbreak_forecast/requirements.txt
@@ -2,4 +2,4 @@ numpy
 matplotlib
 bokeh
 plotly
-altair
\ No newline at end of file
+altair
diff --git a/demo/outbreak_forecast/run.ipynb b/demo/outbreak_forecast/run.ipynb
index 1ec9538ecdb55..48151f13b9897 100644
--- a/demo/outbreak_forecast/run.ipynb
+++ b/demo/outbreak_forecast/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: outbreak_forecast\n", "### Generate a plot based on 5 inputs.\n", "        "]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy matplotlib bokeh plotly altair"]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import altair\n", "\n", "import gradio as gr\n", "from math import sqrt\n", "import matplotlib.pyplot as plt\n", "import numpy as np\n", "import plotly.express as px\n", "import pandas as pd\n", "\n", "def outbreak(plot_type, r, month, countries, social_distancing):\n", "    months = [\"January\", \"February\", \"March\", \"April\", \"May\"]\n", "    m = months.index(month)\n", "    start_day = 30 * m\n", "    final_day = 30 * (m + 1)\n", "    x = np.arange(start_day, final_day + 1)\n", "    pop_count = {\"USA\": 350, \"Canada\": 40, \"Mexico\": 300, \"UK\": 120}\n", "    if social_distancing:\n", "        r = sqrt(r)\n", "    df = pd.DataFrame({\"day\": x})\n", "    for country in countries:\n", "        df[country] = x ** (r) * (pop_count[country] + 1)\n", "\n", "    if plot_type == \"Matplotlib\":\n", "        fig = plt.figure()\n", "        plt.plot(df[\"day\"], df[countries].to_numpy())\n", "        plt.title(\"Outbreak in \" + month)\n", "        plt.ylabel(\"Cases\")\n", "        plt.xlabel(\"Days since Day 0\")\n", "        plt.legend(countries)\n", "        return fig\n", "    elif plot_type == \"Plotly\":\n", "        fig = px.line(df, x=\"day\", y=countries)\n", "        fig.update_layout(\n", "            title=\"Outbreak in \" + month,\n", "            xaxis_title=\"Cases\",\n", "            yaxis_title=\"Days Since Day 0\",\n", "        )\n", "        return fig\n", "    elif plot_type == \"Altair\":\n", "        df = df.melt(id_vars=\"day\").rename(columns={\"variable\": \"country\"})\n", "        fig = altair.Chart(df).mark_line().encode(x=\"day\", y=\"value\", color=\"country\")\n", "        return fig\n", "    else:\n", "        raise ValueError(\"A plot type must be selected\")\n", "\n", "inputs = [\n", "    gr.Dropdown([\"Matplotlib\", \"Plotly\", \"Altair\"], label=\"Plot Type\"),\n", "    gr.Slider(1, 4, 3.2, label=\"R\"),\n", "    gr.Dropdown([\"January\", \"February\", \"March\", \"April\", \"May\"], label=\"Month\"),\n", "    gr.CheckboxGroup(\n", "        [\"USA\", \"Canada\", \"Mexico\", \"UK\"], label=\"Countries\", value=[\"USA\", \"Canada\"]\n", "    ),\n", "    gr.Checkbox(label=\"Social Distancing?\"),\n", "]\n", "outputs = gr.Plot()\n", "\n", "demo = gr.Interface(\n", "    fn=outbreak,\n", "    inputs=inputs,\n", "    outputs=outputs,\n", "    examples=[\n", "        [\"Matplotlib\", 2, \"March\", [\"Mexico\", \"UK\"], True],\n", "        [\"Altair\", 2, \"March\", [\"Mexico\", \"Canada\"], True],\n", "        [\"Plotly\", 3.6, \"February\", [\"Canada\", \"Mexico\", \"UK\"], False],\n", "    ],\n", "    cache_examples=True,\n", ")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: outbreak_forecast\n", "### Generate a plot based on 5 inputs.\n", "        "]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy matplotlib bokeh plotly altair "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from math import sqrt\n", "import numpy as np\n", "import pandas as pd\n", "\n", "def outbreak(plot_type, r, month, countries, social_distancing):\n", "    months = [\"January\", \"February\", \"March\", \"April\", \"May\"]\n", "    m = months.index(month)\n", "    start_day = 30 * m\n", "    final_day = 30 * (m + 1)\n", "    x = np.arange(start_day, final_day + 1)\n", "    pop_count = {\"USA\": 350, \"Canada\": 40, \"Mexico\": 300, \"UK\": 120}\n", "    if social_distancing:\n", "        r = sqrt(r)\n", "    df = pd.DataFrame({\"day\": x})\n", "    for country in countries:\n", "        df[country] = x ** (r) * (pop_count[country] + 1)\n", "\n", "    if plot_type == \"Matplotlib\":\n", "        import matplotlib.pyplot as plt\n", "\n", "        fig = plt.figure()\n", "        plt.plot(df[\"day\"], df[countries].to_numpy())\n", "        plt.title(\"Outbreak in \" + month)\n", "        plt.ylabel(\"Cases\")\n", "        plt.xlabel(\"Days since Day 0\")\n", "        plt.legend(countries)\n", "        return fig\n", "    elif plot_type == \"Plotly\":\n", "        import plotly.express as px\n", "\n", "        fig = px.line(df, x=\"day\", y=countries)\n", "        fig.update_layout(\n", "            title=\"Outbreak in \" + month,\n", "            xaxis_title=\"Cases\",\n", "            yaxis_title=\"Days Since Day 0\",\n", "        )\n", "        return fig\n", "    elif plot_type == \"Altair\":\n", "        import altair\n", "\n", "        df = df.melt(id_vars=\"day\").rename(columns={\"variable\": \"country\"})\n", "        fig = altair.Chart(df).mark_line().encode(x=\"day\", y=\"value\", color=\"country\")\n", "        return fig\n", "    elif plot_type == \"Bokeh\":\n", "        from bokeh.plotting import figure\n", "        from bokeh.models import ColumnDataSource\n", "\n", "        source = ColumnDataSource(df)\n", "        fig = figure(title=\"Outbreak in \" + month, x_axis_label=\"Days since Day 0\", y_axis_label=\"Cases\")\n", "        for country in countries:\n", "            fig.line(\"day\", country, source=source, legend_label=country)\n", "        return fig\n", "    else:\n", "        raise ValueError(\"A plot type must be selected\")\n", "\n", "inputs = [\n", "    gr.Dropdown([\"Matplotlib\", \"Plotly\", \"Altair\", \"Bokeh\"], label=\"Plot Type\", value=\"Matplotlib\"),\n", "    gr.Slider(1, 4, 3.2, label=\"R\"),\n", "    gr.Dropdown([\"January\", \"February\", \"March\", \"April\", \"May\"], label=\"Month\", value=\"March\"),\n", "    gr.CheckboxGroup(\n", "        [\"USA\", \"Canada\", \"Mexico\", \"UK\"], label=\"Countries\", value=[\"USA\", \"Canada\"]\n", "    ),\n", "    gr.Checkbox(label=\"Social Distancing?\"),\n", "]\n", "outputs = gr.Plot()\n", "\n", "demo = gr.Interface(\n", "    fn=outbreak,\n", "    inputs=inputs,\n", "    outputs=outputs,\n", "    examples=[\n", "        [\"Matplotlib\", 2, \"March\", [\"Mexico\", \"UK\"], True],\n", "        [\"Altair\", 2, \"March\", [\"Mexico\", \"Canada\"], True],\n", "        [\"Plotly\", 3.6, \"February\", [\"Canada\", \"Mexico\", \"UK\"], False],\n", "        [\"Bokeh\", 3.2, \"April\", [\"Canada\", \"UK\"], False],\n", "    ],\n", "    cache_examples=True,\n", ")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/outbreak_forecast/run.py b/demo/outbreak_forecast/run.py
index 1802e5766a6ef..797479db7999f 100644
--- a/demo/outbreak_forecast/run.py
+++ b/demo/outbreak_forecast/run.py
@@ -1,10 +1,6 @@
-import altair
-
 import gradio as gr
 from math import sqrt
-import matplotlib.pyplot as plt
 import numpy as np
-import plotly.express as px
 import pandas as pd
 
 def outbreak(plot_type, r, month, countries, social_distancing):
@@ -21,6 +17,8 @@ def outbreak(plot_type, r, month, countries, social_distancing):
         df[country] = x ** (r) * (pop_count[country] + 1)
 
     if plot_type == "Matplotlib":
+        import matplotlib.pyplot as plt
+
         fig = plt.figure()
         plt.plot(df["day"], df[countries].to_numpy())
         plt.title("Outbreak in " + month)
@@ -29,6 +27,8 @@ def outbreak(plot_type, r, month, countries, social_distancing):
         plt.legend(countries)
         return fig
     elif plot_type == "Plotly":
+        import plotly.express as px
+
         fig = px.line(df, x="day", y=countries)
         fig.update_layout(
             title="Outbreak in " + month,
@@ -37,16 +37,27 @@ def outbreak(plot_type, r, month, countries, social_distancing):
         )
         return fig
     elif plot_type == "Altair":
+        import altair
+
         df = df.melt(id_vars="day").rename(columns={"variable": "country"})
         fig = altair.Chart(df).mark_line().encode(x="day", y="value", color="country")
         return fig
+    elif plot_type == "Bokeh":
+        from bokeh.plotting import figure
+        from bokeh.models import ColumnDataSource
+
+        source = ColumnDataSource(df)
+        fig = figure(title="Outbreak in " + month, x_axis_label="Days since Day 0", y_axis_label="Cases")
+        for country in countries:
+            fig.line("day", country, source=source, legend_label=country)
+        return fig
     else:
         raise ValueError("A plot type must be selected")
 
 inputs = [
-    gr.Dropdown(["Matplotlib", "Plotly", "Altair"], label="Plot Type"),
+    gr.Dropdown(["Matplotlib", "Plotly", "Altair", "Bokeh"], label="Plot Type", value="Matplotlib"),
     gr.Slider(1, 4, 3.2, label="R"),
-    gr.Dropdown(["January", "February", "March", "April", "May"], label="Month"),
+    gr.Dropdown(["January", "February", "March", "April", "May"], label="Month", value="March"),
     gr.CheckboxGroup(
         ["USA", "Canada", "Mexico", "UK"], label="Countries", value=["USA", "Canada"]
     ),
@@ -62,6 +73,7 @@ def outbreak(plot_type, r, month, countries, social_distancing):
         ["Matplotlib", 2, "March", ["Mexico", "UK"], True],
         ["Altair", 2, "March", ["Mexico", "Canada"], True],
         ["Plotly", 3.6, "February", ["Canada", "Mexico", "UK"], False],
+        ["Bokeh", 3.2, "April", ["Canada", "UK"], False],
     ],
     cache_examples=True,
 )
diff --git a/demo/plot_guide_line/requirements.txt b/demo/plot_guide_line/requirements.txt
new file mode 100644
index 0000000000000..5da331cf67f41
--- /dev/null
+++ b/demo/plot_guide_line/requirements.txt
@@ -0,0 +1,2 @@
+numpy
+pandas
diff --git a/demo/plot_guide_line/run.ipynb b/demo/plot_guide_line/run.ipynb
index a760543134e43..2e6209707a91b 100644
--- a/demo/plot_guide_line/run.ipynb
+++ b/demo/plot_guide_line/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: plot_guide_line"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import pandas as pd\n", "import numpy as np\n", "import random\n", "\n", "df = pd.DataFrame({\n", "    'height': np.random.randint(50, 70, 25),\n", "    'weight': np.random.randint(120, 320, 25),\n", "    'age': np.random.randint(18, 65, 25),\n", "    'ethnicity': [random.choice([\"white\", \"black\", \"asian\"]) for _ in range(25)]\n", "})\n", "\n", "with gr.Blocks() as demo:\n", "    gr.LinePlot(df, x=\"weight\", y=\"height\")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: plot_guide_line"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy pandas "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import pandas as pd\n", "import numpy as np\n", "import random\n", "\n", "df = pd.DataFrame({\n", "    'height': np.random.randint(50, 70, 25),\n", "    'weight': np.random.randint(120, 320, 25),\n", "    'age': np.random.randint(18, 65, 25),\n", "    'ethnicity': [random.choice([\"white\", \"black\", \"asian\"]) for _ in range(25)]\n", "})\n", "\n", "with gr.Blocks() as demo:\n", "    gr.LinePlot(df, x=\"weight\", y=\"height\")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/plot_guide_temporal/requirements.txt b/demo/plot_guide_temporal/requirements.txt
new file mode 100644
index 0000000000000..5da331cf67f41
--- /dev/null
+++ b/demo/plot_guide_temporal/requirements.txt
@@ -0,0 +1,2 @@
+numpy
+pandas
diff --git a/demo/plot_guide_temporal/run.ipynb b/demo/plot_guide_temporal/run.ipynb
index fac5b4d1f0be3..8778388fdf9e5 100644
--- a/demo/plot_guide_temporal/run.ipynb
+++ b/demo/plot_guide_temporal/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: plot_guide_temporal"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import pandas as pd\n", "import numpy as np\n", "import random\n", "\n", "from datetime import datetime, timedelta\n", "now = datetime.now()\n", "\n", "df = pd.DataFrame({\n", "    'time': [now - timedelta(minutes=5*i) for i in range(25)],\n", "    'price': np.random.randint(100, 1000, 25),\n", "    'origin': [random.choice([\"DFW\", \"DAL\", \"HOU\"]) for _ in range(25)],\n", "    'destination': [random.choice([\"JFK\", \"LGA\", \"EWR\"]) for _ in range(25)],\n", "})\n", "\n", "with gr.Blocks() as demo:\n", "    gr.LinePlot(df, x=\"time\", y=\"price\")\n", "    gr.ScatterPlot(df, x=\"time\", y=\"price\", color=\"origin\")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: plot_guide_temporal"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy pandas "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import pandas as pd\n", "import numpy as np\n", "import random\n", "\n", "from datetime import datetime, timedelta\n", "now = datetime.now()\n", "\n", "df = pd.DataFrame({\n", "    'time': [now - timedelta(minutes=5*i) for i in range(25)],\n", "    'price': np.random.randint(100, 1000, 25),\n", "    'origin': [random.choice([\"DFW\", \"DAL\", \"HOU\"]) for _ in range(25)],\n", "    'destination': [random.choice([\"JFK\", \"LGA\", \"EWR\"]) for _ in range(25)],\n", "})\n", "\n", "with gr.Blocks() as demo:\n", "    gr.LinePlot(df, x=\"time\", y=\"price\")\n", "    gr.ScatterPlot(df, x=\"time\", y=\"price\", color=\"origin\")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/random_demos.py b/demo/random_demos.py
index 58b93a90a6c22..c3cccde454378 100644
--- a/demo/random_demos.py
+++ b/demo/random_demos.py
@@ -26,7 +26,7 @@
 # Some demos are just too large or need to be run in a special way, so we'll just skip them
 demos_list.remove('streaming_wav2vec')
 demos_list.remove('blocks_neural_instrument_coding')
-demos_list.remove('flagged')
+demos_list.remove('.gradio/flagged')
 
 for d, demo_name in enumerate(random.sample(demos_list, args.num_demos)):
     print(f"Launching demo {d+1}/{args.num_demos}: {demo_name}")
diff --git a/demo/reverse_audio/requirements.txt b/demo/reverse_audio/requirements.txt
new file mode 100644
index 0000000000000..24ce15ab7ead3
--- /dev/null
+++ b/demo/reverse_audio/requirements.txt
@@ -0,0 +1 @@
+numpy
diff --git a/demo/reverse_audio/run.ipynb b/demo/reverse_audio/run.ipynb
index 464bab62c96ca..61b1da80519a6 100644
--- a/demo/reverse_audio/run.ipynb
+++ b/demo/reverse_audio/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: reverse_audio"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('audio')\n", "!wget -q -O audio/cantina.wav https://github.com/gradio-app/gradio/raw/main/demo/reverse_audio/audio/cantina.wav\n", "!wget -q -O audio/recording1.wav https://github.com/gradio-app/gradio/raw/main/demo/reverse_audio/audio/recording1.wav"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["\n", "import numpy as np\n", "\n", "import gradio as gr\n", "\n", "def reverse_audio(audio):\n", "    sr, data = audio\n", "    return (sr, np.flipud(data))\n", "\n", "input_audio = gr.Audio(\n", "    sources=[\"microphone\"],\n", "    waveform_options=gr.WaveformOptions(\n", "        waveform_color=\"#01C6FF\",\n", "        waveform_progress_color=\"#0066B4\",\n", "        skip_length=2,\n", "        show_controls=False,\n", "    ),\n", ")\n", "demo = gr.Interface(\n", "    fn=reverse_audio,\n", "    inputs=input_audio,\n", "    outputs=\"audio\"\n", ")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: reverse_audio"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('audio')\n", "!wget -q -O audio/cantina.wav https://github.com/gradio-app/gradio/raw/main/demo/reverse_audio/audio/cantina.wav\n", "!wget -q -O audio/recording1.wav https://github.com/gradio-app/gradio/raw/main/demo/reverse_audio/audio/recording1.wav"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["\n", "import numpy as np\n", "\n", "import gradio as gr\n", "\n", "def reverse_audio(audio):\n", "    sr, data = audio\n", "    return (sr, np.flipud(data))\n", "\n", "input_audio = gr.Audio(\n", "    sources=[\"microphone\"],\n", "    waveform_options=gr.WaveformOptions(\n", "        waveform_color=\"#01C6FF\",\n", "        waveform_progress_color=\"#0066B4\",\n", "        skip_length=2,\n", "        show_controls=False,\n", "    ),\n", ")\n", "demo = gr.Interface(\n", "    fn=reverse_audio,\n", "    inputs=input_audio,\n", "    outputs=\"audio\"\n", ")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/rt-detr-object-detection/draw_boxes.py b/demo/rt-detr-object-detection/draw_boxes.py
new file mode 100644
index 0000000000000..9a0442e6b5ead
--- /dev/null
+++ b/demo/rt-detr-object-detection/draw_boxes.py
@@ -0,0 +1,45 @@
+from PIL import ImageDraw, ImageFont  # type: ignore
+import colorsys
+
+
+def get_color(label):
+    # Simple hash function to generate consistent colors for each label
+    hash_value = hash(label)
+    hue = (hash_value % 100) / 100.0
+    saturation = 0.7
+    value = 0.9
+    rgb = colorsys.hsv_to_rgb(hue, saturation, value)
+    return tuple(int(x * 255) for x in rgb)
+
+
+def draw_bounding_boxes(image, results: dict, model, threshold=0.3):
+    draw = ImageDraw.Draw(image)
+    font = ImageFont.load_default()
+
+    for score, label_id, box in zip(
+        results["scores"], results["labels"], results["boxes"]
+    ):
+        if score > threshold:
+            label = model.config.id2label[label_id.item()]
+            box = [round(i, 2) for i in box.tolist()]
+            color = get_color(label)
+
+            # Draw bounding box
+            draw.rectangle(box, outline=color, width=3) # type: ignore
+
+            # Prepare text
+            text = f"{label}: {score:.2f}"
+            text_bbox = draw.textbbox((0, 0), text, font=font)
+            text_width = text_bbox[2] - text_bbox[0]
+            text_height = text_bbox[3] - text_bbox[1]
+
+            # Draw text background
+            draw.rectangle(
+                [box[0], box[1] - text_height - 4, box[0] + text_width, box[1]], # type: ignore
+                fill=color, # type: ignore
+            )
+
+            # Draw text
+            draw.text((box[0], box[1] - text_height - 4), text, fill="white", font=font)
+
+    return image
diff --git a/demo/rt-detr-object-detection/requirements.txt b/demo/rt-detr-object-detection/requirements.txt
new file mode 100644
index 0000000000000..b1c8b943d9230
--- /dev/null
+++ b/demo/rt-detr-object-detection/requirements.txt
@@ -0,0 +1,5 @@
+safetensors==0.4.3
+opencv-python
+torch
+transformers>=4.43.0
+Pillow
diff --git a/demo/rt-detr-object-detection/run.ipynb b/demo/rt-detr-object-detection/run.ipynb
new file mode 100644
index 0000000000000..9b629830e7b52
--- /dev/null
+++ b/demo/rt-detr-object-detection/run.ipynb
@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: rt-detr-object-detection"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio safetensors==0.4.3 opencv-python torch transformers>=4.43.0 Pillow "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/rt-detr-object-detection/draw_boxes.py"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import spaces\n", "import gradio as gr\n", "import cv2\n", "from PIL import Image\n", "import torch\n", "import time\n", "import numpy as np\n", "import uuid\n", "\n", "from transformers import RTDetrForObjectDetection, RTDetrImageProcessor  # type: ignore\n", "\n", "from draw_boxes import draw_bounding_boxes\n", "\n", "image_processor = RTDetrImageProcessor.from_pretrained(\"PekingU/rtdetr_r50vd\")\n", "model = RTDetrForObjectDetection.from_pretrained(\"PekingU/rtdetr_r50vd\").to(\"cuda\")\n", "\n", "\n", "SUBSAMPLE = 2\n", "\n", "\n", "@spaces.GPU\n", "def stream_object_detection(video, conf_threshold):\n", "    cap = cv2.VideoCapture(video)\n", "\n", "    video_codec = cv2.VideoWriter_fourcc(*\"mp4v\")  # type: ignore\n", "    fps = int(cap.get(cv2.CAP_PROP_FPS))\n", "\n", "    desired_fps = fps // SUBSAMPLE\n", "    width = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH)) // 2\n", "    height = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT)) // 2\n", "\n", "    iterating, frame = cap.read()\n", "\n", "    n_frames = 0\n", "\n", "    name = f\"output_{uuid.uuid4()}.mp4\"\n", "    segment_file = cv2.VideoWriter(name, video_codec, desired_fps, (width, height))  # type: ignore\n", "    batch = []\n", "\n", "    while iterating:\n", "        frame = cv2.resize(frame, (0, 0), fx=0.5, fy=0.5)\n", "        frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)\n", "        if n_frames % SUBSAMPLE == 0:\n", "            batch.append(frame)\n", "        if len(batch) == 2 * desired_fps:\n", "            inputs = image_processor(images=batch, return_tensors=\"pt\").to(\"cuda\")\n", "\n", "            print(f\"starting batch of size {len(batch)}\")\n", "            start = time.time()\n", "            with torch.no_grad():\n", "                outputs = model(**inputs)\n", "            end = time.time()\n", "            print(\"time taken for inference\", end - start)\n", "\n", "            start = time.time()\n", "            boxes = image_processor.post_process_object_detection(\n", "                outputs,\n", "                target_sizes=torch.tensor([(height, width)] * len(batch)),\n", "                threshold=conf_threshold,\n", "            )\n", "\n", "            for _, (array, box) in enumerate(zip(batch, boxes)):\n", "                pil_image = draw_bounding_boxes(\n", "                    Image.fromarray(array), box, model, conf_threshold\n", "                )\n", "                frame = np.array(pil_image)\n", "                # Convert RGB to BGR\n", "                frame = frame[:, :, ::-1].copy()\n", "                segment_file.write(frame)\n", "\n", "            batch = []\n", "            segment_file.release()\n", "            yield name\n", "            end = time.time()\n", "            print(\"time taken for processing boxes\", end - start)\n", "            name = f\"output_{uuid.uuid4()}.mp4\"\n", "            segment_file = cv2.VideoWriter(\n", "                name, video_codec, desired_fps, (width, height)\n", "            )  # type: ignore\n", "\n", "        iterating, frame = cap.read()\n", "        n_frames += 1\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    gr.HTML(\n", "        \"\"\"\n", "    <h1 style='text-align: center'>\n", "    Video Object Detection with <a href='https://huggingface.co/PekingU/rtdetr_r101vd_coco_o365' target='_blank'>RT-DETR</a>\n", "    </h1>\n", "    \"\"\"\n", "    )\n", "    with gr.Row():\n", "        with gr.Column():\n", "            video = gr.Video(label=\"Video Source\")\n", "            conf_threshold = gr.Slider(\n", "                label=\"Confidence Threshold\",\n", "                minimum=0.0,\n", "                maximum=1.0,\n", "                step=0.05,\n", "                value=0.30,\n", "            )\n", "        with gr.Column():\n", "            output_video = gr.Video(\n", "                label=\"Processed Video\", streaming=True, autoplay=True\n", "            )\n", "\n", "    video.upload(\n", "        fn=stream_object_detection,\n", "        inputs=[video, conf_threshold],\n", "        outputs=[output_video],\n", "    )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/rt-detr-object-detection/run.py b/demo/rt-detr-object-detection/run.py
new file mode 100644
index 0000000000000..ec089664009ed
--- /dev/null
+++ b/demo/rt-detr-object-detection/run.py
@@ -0,0 +1,115 @@
+import spaces
+import gradio as gr
+import cv2
+from PIL import Image
+import torch
+import time
+import numpy as np
+import uuid
+
+from transformers import RTDetrForObjectDetection, RTDetrImageProcessor  # type: ignore
+
+from draw_boxes import draw_bounding_boxes
+
+image_processor = RTDetrImageProcessor.from_pretrained("PekingU/rtdetr_r50vd")
+model = RTDetrForObjectDetection.from_pretrained("PekingU/rtdetr_r50vd").to("cuda")
+
+
+SUBSAMPLE = 2
+
+
+@spaces.GPU
+def stream_object_detection(video, conf_threshold):
+    cap = cv2.VideoCapture(video)
+
+    video_codec = cv2.VideoWriter_fourcc(*"mp4v")  # type: ignore
+    fps = int(cap.get(cv2.CAP_PROP_FPS))
+
+    desired_fps = fps // SUBSAMPLE
+    width = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH)) // 2
+    height = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT)) // 2
+
+    iterating, frame = cap.read()
+
+    n_frames = 0
+
+    name = f"output_{uuid.uuid4()}.mp4"
+    segment_file = cv2.VideoWriter(name, video_codec, desired_fps, (width, height))  # type: ignore
+    batch = []
+
+    while iterating:
+        frame = cv2.resize(frame, (0, 0), fx=0.5, fy=0.5)
+        frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
+        if n_frames % SUBSAMPLE == 0:
+            batch.append(frame)
+        if len(batch) == 2 * desired_fps:
+            inputs = image_processor(images=batch, return_tensors="pt").to("cuda")
+
+            print(f"starting batch of size {len(batch)}")
+            start = time.time()
+            with torch.no_grad():
+                outputs = model(**inputs)
+            end = time.time()
+            print("time taken for inference", end - start)
+
+            start = time.time()
+            boxes = image_processor.post_process_object_detection(
+                outputs,
+                target_sizes=torch.tensor([(height, width)] * len(batch)),
+                threshold=conf_threshold,
+            )
+
+            for _, (array, box) in enumerate(zip(batch, boxes)):
+                pil_image = draw_bounding_boxes(
+                    Image.fromarray(array), box, model, conf_threshold
+                )
+                frame = np.array(pil_image)
+                # Convert RGB to BGR
+                frame = frame[:, :, ::-1].copy()
+                segment_file.write(frame)
+
+            batch = []
+            segment_file.release()
+            yield name
+            end = time.time()
+            print("time taken for processing boxes", end - start)
+            name = f"output_{uuid.uuid4()}.mp4"
+            segment_file = cv2.VideoWriter(
+                name, video_codec, desired_fps, (width, height)
+            )  # type: ignore
+
+        iterating, frame = cap.read()
+        n_frames += 1
+
+
+with gr.Blocks() as demo:
+    gr.HTML(
+        """
+    <h1 style='text-align: center'>
+    Video Object Detection with <a href='https://huggingface.co/PekingU/rtdetr_r101vd_coco_o365' target='_blank'>RT-DETR</a>
+    </h1>
+    """
+    )
+    with gr.Row():
+        with gr.Column():
+            video = gr.Video(label="Video Source")
+            conf_threshold = gr.Slider(
+                label="Confidence Threshold",
+                minimum=0.0,
+                maximum=1.0,
+                step=0.05,
+                value=0.30,
+            )
+        with gr.Column():
+            output_video = gr.Video(
+                label="Processed Video", streaming=True, autoplay=True
+            )
+
+    video.upload(
+        fn=stream_object_detection,
+        inputs=[video, conf_threshold],
+        outputs=[output_video],
+    )
+
+if __name__ == "__main__":
+    demo.launch()
diff --git a/demo/same-person-or-different/run.ipynb b/demo/same-person-or-different/run.ipynb
index a514212e239af..39002fc6ead6c 100644
--- a/demo/same-person-or-different/run.ipynb
+++ b/demo/same-person-or-different/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: same-person-or-different\n", "### This demo identifies if two speakers are the same person using Gradio's Audio and HTML components.\n", "        "]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio git+https://github.com/huggingface/transformers torchaudio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/same-person-or-different/packages.txt\n", "os.mkdir('samples')\n", "!wget -q -O samples/cate_blanch.mp3 https://github.com/gradio-app/gradio/raw/main/demo/same-person-or-different/samples/cate_blanch.mp3\n", "!wget -q -O samples/cate_blanch_2.mp3 https://github.com/gradio-app/gradio/raw/main/demo/same-person-or-different/samples/cate_blanch_2.mp3\n", "!wget -q -O samples/heath_ledger.mp3 https://github.com/gradio-app/gradio/raw/main/demo/same-person-or-different/samples/heath_ledger.mp3"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import torch\n", "from torchaudio.sox_effects import apply_effects_file\n", "from transformers import AutoFeatureExtractor, AutoModelForAudioXVector\n", "device = torch.device(\"cuda\" if torch.cuda.is_available() else \"cpu\")\n", "\n", "OUTPUT_OK = (\n", "    \"\"\"\n", "    <div class=\"container\">\n", "        <div class=\"row\"><h1 style=\"text-align: center\">The speakers are</h1></div>\n", "        <div class=\"row\"><h1 class=\"display-1 text-success\" style=\"text-align: center\">{:.1f}%</h1></div>\n", "        <div class=\"row\"><h1 style=\"text-align: center\">similar</h1></div>\n", "        <div class=\"row\"><h1 class=\"text-success\" style=\"text-align: center\">Welcome, human!</h1></div>\n", "        <div class=\"row\"><small style=\"text-align: center\">(You must get at least 85% to be considered the same person)</small><div class=\"row\">\n", "    </div>\n", "\"\"\"\n", ")\n", "OUTPUT_FAIL = (\n", "    \"\"\"\n", "    <div class=\"container\">\n", "        <div class=\"row\"><h1 style=\"text-align: center\">The speakers are</h1></div>\n", "        <div class=\"row\"><h1 class=\"display-1 text-danger\" style=\"text-align: center\">{:.1f}%</h1></div>\n", "        <div class=\"row\"><h1 style=\"text-align: center\">similar</h1></div>\n", "        <div class=\"row\"><h1 class=\"text-danger\" style=\"text-align: center\">You shall not pass!</h1></div>\n", "        <div class=\"row\"><small style=\"text-align: center\">(You must get at least 85% to be considered the same person)</small><div class=\"row\">\n", "    </div>\n", "\"\"\"\n", ")\n", "\n", "EFFECTS = [\n", "    [\"remix\", \"-\"],\n", "    [\"channels\", \"1\"],\n", "    [\"rate\", \"16000\"],\n", "    [\"gain\", \"-1.0\"],\n", "    [\"silence\", \"1\", \"0.1\", \"0.1%\", \"-1\", \"0.1\", \"0.1%\"],\n", "    [\"trim\", \"0\", \"10\"],\n", "]\n", "\n", "THRESHOLD = 0.85\n", "\n", "model_name = \"microsoft/unispeech-sat-base-plus-sv\"\n", "feature_extractor = AutoFeatureExtractor.from_pretrained(model_name)\n", "model = AutoModelForAudioXVector.from_pretrained(model_name).to(device)\n", "cosine_sim = torch.nn.CosineSimilarity(dim=-1)\n", "\n", "def similarity_fn(path1, path2):\n", "    if not (path1 and path2):\n", "        return '<b style=\"color:red\">ERROR: Please record audio for *both* speakers!</b>'\n", "\n", "    wav1, _ = apply_effects_file(path1, EFFECTS)\n", "    wav2, _ = apply_effects_file(path2, EFFECTS)\n", "    print(wav1.shape, wav2.shape)\n", "\n", "    input1 = feature_extractor(wav1.squeeze(0), return_tensors=\"pt\", sampling_rate=16000).input_values.to(device)\n", "    input2 = feature_extractor(wav2.squeeze(0), return_tensors=\"pt\", sampling_rate=16000).input_values.to(device)\n", "\n", "    with torch.no_grad():\n", "        emb1 = model(input1).embeddings\n", "        emb2 = model(input2).embeddings\n", "    emb1 = torch.nn.functional.normalize(emb1, dim=-1).cpu()\n", "    emb2 = torch.nn.functional.normalize(emb2, dim=-1).cpu()\n", "    similarity = cosine_sim(emb1, emb2).numpy()[0]\n", "\n", "    if similarity >= THRESHOLD:\n", "        output = OUTPUT_OK.format(similarity * 100)\n", "    else:\n", "        output = OUTPUT_FAIL.format(similarity * 100)\n", "\n", "    return output\n", "\n", "inputs = [\n", "    gr.Audio(sources=[\"microphone\"], type=\"filepath\", label=\"Speaker #1\"),\n", "    gr.Audio(sources=[\"microphone\"], type=\"filepath\", label=\"Speaker #2\"),\n", "]\n", "output = gr.HTML(label=\"\")\n", "\n", "description = (\n", "    \"This demo from Microsoft will compare two speech samples and determine if they are from the same speaker. \"\n", "    \"Try it with your own voice!\"\n", ")\n", "article = (\n", "    \"<p style='text-align: center'>\"\n", "    \"<a href='https://huggingface.co/microsoft/unispeech-sat-large-sv' target='_blank'>\ud83c\udf99\ufe0f Learn more about UniSpeech-SAT</a> | \"\n", "    \"<a href='https://arxiv.org/abs/2110.05752' target='_blank'>\ud83d\udcda UniSpeech-SAT paper</a> | \"\n", "    \"<a href='https://www.danielpovey.com/files/2018_icassp_xvectors.pdf' target='_blank'>\ud83d\udcda X-Vector paper</a>\"\n", "    \"</p>\"\n", ")\n", "examples = [\n", "    [\"samples/cate_blanch.mp3\", \"samples/cate_blanch_2.mp3\"],\n", "    [\"samples/cate_blanch.mp3\", \"samples/heath_ledger.mp3\"],\n", "]\n", "\n", "interface = gr.Interface(\n", "    fn=similarity_fn,\n", "    inputs=inputs,\n", "    outputs=output,\n", "    layout=\"horizontal\",\n", "    allow_flagging=\"never\",\n", "    live=False,\n", "    examples=examples,\n", "    cache_examples=False\n", ")\n", "interface.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: same-person-or-different\n", "### This demo identifies if two speakers are the same person using Gradio's Audio and HTML components.\n", "        "]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio git+https://github.com/huggingface/transformers torchaudio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/same-person-or-different/packages.txt\n", "os.mkdir('samples')\n", "!wget -q -O samples/cate_blanch.mp3 https://github.com/gradio-app/gradio/raw/main/demo/same-person-or-different/samples/cate_blanch.mp3\n", "!wget -q -O samples/cate_blanch_2.mp3 https://github.com/gradio-app/gradio/raw/main/demo/same-person-or-different/samples/cate_blanch_2.mp3\n", "!wget -q -O samples/heath_ledger.mp3 https://github.com/gradio-app/gradio/raw/main/demo/same-person-or-different/samples/heath_ledger.mp3"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import torch\n", "from torchaudio.sox_effects import apply_effects_file\n", "from transformers import AutoFeatureExtractor, AutoModelForAudioXVector\n", "device = torch.device(\"cuda\" if torch.cuda.is_available() else \"cpu\")\n", "\n", "OUTPUT_OK = (\n", "    \"\"\"\n", "    <div class=\"container\">\n", "        <div class=\"row\"><h1 style=\"text-align: center\">The speakers are</h1></div>\n", "        <div class=\"row\"><h1 class=\"display-1 text-success\" style=\"text-align: center\">{:.1f}%</h1></div>\n", "        <div class=\"row\"><h1 style=\"text-align: center\">similar</h1></div>\n", "        <div class=\"row\"><h1 class=\"text-success\" style=\"text-align: center\">Welcome, human!</h1></div>\n", "        <div class=\"row\"><small style=\"text-align: center\">(You must get at least 85% to be considered the same person)</small><div class=\"row\">\n", "    </div>\n", "\"\"\"\n", ")\n", "OUTPUT_FAIL = (\n", "    \"\"\"\n", "    <div class=\"container\">\n", "        <div class=\"row\"><h1 style=\"text-align: center\">The speakers are</h1></div>\n", "        <div class=\"row\"><h1 class=\"display-1 text-danger\" style=\"text-align: center\">{:.1f}%</h1></div>\n", "        <div class=\"row\"><h1 style=\"text-align: center\">similar</h1></div>\n", "        <div class=\"row\"><h1 class=\"text-danger\" style=\"text-align: center\">You shall not pass!</h1></div>\n", "        <div class=\"row\"><small style=\"text-align: center\">(You must get at least 85% to be considered the same person)</small><div class=\"row\">\n", "    </div>\n", "\"\"\"\n", ")\n", "\n", "EFFECTS = [\n", "    [\"remix\", \"-\"],\n", "    [\"channels\", \"1\"],\n", "    [\"rate\", \"16000\"],\n", "    [\"gain\", \"-1.0\"],\n", "    [\"silence\", \"1\", \"0.1\", \"0.1%\", \"-1\", \"0.1\", \"0.1%\"],\n", "    [\"trim\", \"0\", \"10\"],\n", "]\n", "\n", "THRESHOLD = 0.85\n", "\n", "model_name = \"microsoft/unispeech-sat-base-plus-sv\"\n", "feature_extractor = AutoFeatureExtractor.from_pretrained(model_name)\n", "model = AutoModelForAudioXVector.from_pretrained(model_name).to(device)\n", "cosine_sim = torch.nn.CosineSimilarity(dim=-1)\n", "\n", "def similarity_fn(path1, path2):\n", "    if not (path1 and path2):\n", "        return '<b style=\"color:red\">ERROR: Please record audio for *both* speakers!</b>'\n", "\n", "    wav1, _ = apply_effects_file(path1, EFFECTS)\n", "    wav2, _ = apply_effects_file(path2, EFFECTS)\n", "    print(wav1.shape, wav2.shape)\n", "\n", "    input1 = feature_extractor(wav1.squeeze(0), return_tensors=\"pt\", sampling_rate=16000).input_values.to(device)\n", "    input2 = feature_extractor(wav2.squeeze(0), return_tensors=\"pt\", sampling_rate=16000).input_values.to(device)\n", "\n", "    with torch.no_grad():\n", "        emb1 = model(input1).embeddings\n", "        emb2 = model(input2).embeddings\n", "    emb1 = torch.nn.functional.normalize(emb1, dim=-1).cpu()\n", "    emb2 = torch.nn.functional.normalize(emb2, dim=-1).cpu()\n", "    similarity = cosine_sim(emb1, emb2).numpy()[0]\n", "\n", "    if similarity >= THRESHOLD:\n", "        output = OUTPUT_OK.format(similarity * 100)\n", "    else:\n", "        output = OUTPUT_FAIL.format(similarity * 100)\n", "\n", "    return output\n", "\n", "inputs = [\n", "    gr.Audio(sources=[\"microphone\"], type=\"filepath\", label=\"Speaker #1\"),\n", "    gr.Audio(sources=[\"microphone\"], type=\"filepath\", label=\"Speaker #2\"),\n", "]\n", "output = gr.HTML(label=\"\")\n", "\n", "description = (\n", "    \"This demo from Microsoft will compare two speech samples and determine if they are from the same speaker. \"\n", "    \"Try it with your own voice!\"\n", ")\n", "article = (\n", "    \"<p style='text-align: center'>\"\n", "    \"<a href='https://huggingface.co/microsoft/unispeech-sat-large-sv' target='_blank'>\ud83c\udf99\ufe0f Learn more about UniSpeech-SAT</a> | \"\n", "    \"<a href='https://arxiv.org/abs/2110.05752' target='_blank'>\ud83d\udcda UniSpeech-SAT paper</a> | \"\n", "    \"<a href='https://www.danielpovey.com/files/2018_icassp_xvectors.pdf' target='_blank'>\ud83d\udcda X-Vector paper</a>\"\n", "    \"</p>\"\n", ")\n", "examples = [\n", "    [\"samples/cate_blanch.mp3\", \"samples/cate_blanch_2.mp3\"],\n", "    [\"samples/cate_blanch.mp3\", \"samples/heath_ledger.mp3\"],\n", "]\n", "\n", "interface = gr.Interface(\n", "    fn=similarity_fn,\n", "    inputs=inputs,\n", "    outputs=output,\n", "    layout=\"horizontal\",\n", "    flagging_mode=\"never\",\n", "    live=False,\n", "    examples=examples,\n", "    cache_examples=False\n", ")\n", "interface.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/same-person-or-different/run.py b/demo/same-person-or-different/run.py
index d9db14fe163ae..f2840db8bfb8d 100644
--- a/demo/same-person-or-different/run.py
+++ b/demo/same-person-or-different/run.py
@@ -95,7 +95,7 @@ def similarity_fn(path1, path2):
     inputs=inputs,
     outputs=output,
     layout="horizontal",
-    allow_flagging="never",
+    flagging_mode="never",
     live=False,
     examples=examples,
     cache_examples=False
diff --git a/demo/scatter_plot_demo/requirements.txt b/demo/scatter_plot_demo/requirements.txt
new file mode 100644
index 0000000000000..fb6c7ed7ec60d
--- /dev/null
+++ b/demo/scatter_plot_demo/requirements.txt
@@ -0,0 +1 @@
+pandas
diff --git a/demo/scatter_plot_demo/run.ipynb b/demo/scatter_plot_demo/run.ipynb
index ae93530961d76..43f70c28f84d1 100644
--- a/demo/scatter_plot_demo/run.ipynb
+++ b/demo/scatter_plot_demo/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: scatter_plot_demo"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import pandas as pd\n", "from random import randint, random\n", "import gradio as gr\n", "\n", "\n", "temp_sensor_data = pd.DataFrame(\n", "    {\n", "        \"time\": pd.date_range(\"2021-01-01\", end=\"2021-01-05\", periods=200),\n", "        \"temperature\": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],\n", "        \"humidity\": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],\n", "        \"location\": [\"indoor\", \"outdoor\"] * 100,\n", "    }\n", ")\n", "\n", "food_rating_data = pd.DataFrame(\n", "    {\n", "        \"cuisine\": [[\"Italian\", \"Mexican\", \"Chinese\"][i % 3] for i in range(100)],\n", "        \"rating\": [random() * 4 + 0.5 * (i % 3) for i in range(100)],\n", "        \"price\": [randint(10, 50) + 4 * (i % 3) for i in range(100)],\n", "        \"wait\": [random() for i in range(100)],\n", "    }\n", ")\n", "\n", "with gr.Blocks() as scatter_plots:\n", "    with gr.Row():\n", "        start = gr.DateTime(\"2021-01-01 00:00:00\", label=\"Start\")\n", "        end = gr.DateTime(\"2021-01-05 00:00:00\", label=\"End\")\n", "        apply_btn = gr.Button(\"Apply\", scale=0)\n", "    with gr.Row():\n", "        group_by = gr.Radio([\"None\", \"30m\", \"1h\", \"4h\", \"1d\"], value=\"None\", label=\"Group by\")\n", "        aggregate = gr.Radio([\"sum\", \"mean\", \"median\", \"min\", \"max\"], value=\"sum\", label=\"Aggregation\")\n", "\n", "    temp_by_time = gr.ScatterPlot(\n", "        temp_sensor_data,\n", "        x=\"time\",\n", "        y=\"temperature\",\n", "    )\n", "    temp_by_time_location = gr.ScatterPlot(\n", "        temp_sensor_data,\n", "        x=\"time\",\n", "        y=\"temperature\",\n", "        color=\"location\",\n", "    )\n", "\n", "    time_graphs = [temp_by_time, temp_by_time_location]\n", "    group_by.change(\n", "        lambda group: [gr.ScatterPlot(x_bin=None if group == \"None\" else group)] * len(time_graphs),\n", "        group_by,\n", "        time_graphs\n", "    )\n", "    aggregate.change(\n", "        lambda aggregate: [gr.ScatterPlot(y_aggregate=aggregate)] * len(time_graphs),\n", "        aggregate,\n", "        time_graphs\n", "    )\n", "\n", "    price_by_cuisine = gr.ScatterPlot(\n", "        food_rating_data,\n", "        x=\"cuisine\",\n", "        y=\"price\",\n", "    )\n", "    with gr.Row():\n", "        price_by_rating = gr.ScatterPlot(\n", "            food_rating_data,\n", "            x=\"rating\",\n", "            y=\"price\",\n", "            color=\"wait\",\n", "            show_actions_button=True,\n", "        )\n", "        price_by_rating_color = gr.ScatterPlot(\n", "            food_rating_data,\n", "            x=\"rating\",\n", "            y=\"price\",\n", "            color=\"cuisine\",\n", "        )\n", "\n", "if __name__ == \"__main__\":\n", "    scatter_plots.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: scatter_plot_demo"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio pandas "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import pandas as pd\n", "from random import randint, random\n", "import gradio as gr\n", "\n", "\n", "temp_sensor_data = pd.DataFrame(\n", "    {\n", "        \"time\": pd.date_range(\"2021-01-01\", end=\"2021-01-05\", periods=200),\n", "        \"temperature\": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],\n", "        \"humidity\": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],\n", "        \"location\": [\"indoor\", \"outdoor\"] * 100,\n", "    }\n", ")\n", "\n", "food_rating_data = pd.DataFrame(\n", "    {\n", "        \"cuisine\": [[\"Italian\", \"Mexican\", \"Chinese\"][i % 3] for i in range(100)],\n", "        \"rating\": [random() * 4 + 0.5 * (i % 3) for i in range(100)],\n", "        \"price\": [randint(10, 50) + 4 * (i % 3) for i in range(100)],\n", "        \"wait\": [random() for i in range(100)],\n", "    }\n", ")\n", "\n", "with gr.Blocks() as scatter_plots:\n", "    with gr.Row():\n", "        start = gr.DateTime(\"2021-01-01 00:00:00\", label=\"Start\")\n", "        end = gr.DateTime(\"2021-01-05 00:00:00\", label=\"End\")\n", "        apply_btn = gr.Button(\"Apply\", scale=0)\n", "    with gr.Row():\n", "        group_by = gr.Radio([\"None\", \"30m\", \"1h\", \"4h\", \"1d\"], value=\"None\", label=\"Group by\")\n", "        aggregate = gr.Radio([\"sum\", \"mean\", \"median\", \"min\", \"max\"], value=\"sum\", label=\"Aggregation\")\n", "\n", "    temp_by_time = gr.ScatterPlot(\n", "        temp_sensor_data,\n", "        x=\"time\",\n", "        y=\"temperature\",\n", "    )\n", "    temp_by_time_location = gr.ScatterPlot(\n", "        temp_sensor_data,\n", "        x=\"time\",\n", "        y=\"temperature\",\n", "        color=\"location\",\n", "    )\n", "\n", "    time_graphs = [temp_by_time, temp_by_time_location]\n", "    group_by.change(\n", "        lambda group: [gr.ScatterPlot(x_bin=None if group == \"None\" else group)] * len(time_graphs),\n", "        group_by,\n", "        time_graphs\n", "    )\n", "    aggregate.change(\n", "        lambda aggregate: [gr.ScatterPlot(y_aggregate=aggregate)] * len(time_graphs),\n", "        aggregate,\n", "        time_graphs\n", "    )\n", "\n", "    price_by_cuisine = gr.ScatterPlot(\n", "        food_rating_data,\n", "        x=\"cuisine\",\n", "        y=\"price\",\n", "    )\n", "    with gr.Row():\n", "        price_by_rating = gr.ScatterPlot(\n", "            food_rating_data,\n", "            x=\"rating\",\n", "            y=\"price\",\n", "            color=\"wait\",\n", "            show_actions_button=True,\n", "        )\n", "        price_by_rating_color = gr.ScatterPlot(\n", "            food_rating_data,\n", "            x=\"rating\",\n", "            y=\"price\",\n", "            color=\"cuisine\",\n", "        )\n", "\n", "if __name__ == \"__main__\":\n", "    scatter_plots.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/sepia_filter/requirements.txt b/demo/sepia_filter/requirements.txt
new file mode 100644
index 0000000000000..24ce15ab7ead3
--- /dev/null
+++ b/demo/sepia_filter/requirements.txt
@@ -0,0 +1 @@
+numpy
diff --git a/demo/sepia_filter/run.ipynb b/demo/sepia_filter/run.ipynb
index 606ca44c21125..a8745ad77c107 100644
--- a/demo/sepia_filter/run.ipynb
+++ b/demo/sepia_filter/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: sepia_filter"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import numpy as np\n", "import gradio as gr\n", "\n", "def sepia(input_img):\n", "    sepia_filter = np.array([\n", "        [0.393, 0.769, 0.189],\n", "        [0.349, 0.686, 0.168],\n", "        [0.272, 0.534, 0.131]\n", "    ])\n", "    sepia_img = input_img.dot(sepia_filter.T)\n", "    sepia_img /= sepia_img.max()\n", "    return sepia_img\n", "\n", "demo = gr.Interface(sepia, gr.Image(), \"image\")\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: sepia_filter"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import numpy as np\n", "import gradio as gr\n", "\n", "def sepia(input_img):\n", "    sepia_filter = np.array([\n", "        [0.393, 0.769, 0.189],\n", "        [0.349, 0.686, 0.168],\n", "        [0.272, 0.534, 0.131]\n", "    ])\n", "    sepia_img = input_img.dot(sepia_filter.T)\n", "    sepia_img /= sepia_img.max()\n", "    return sepia_img\n", "\n", "demo = gr.Interface(sepia, gr.Image(), \"image\")\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/simple_state/run.ipynb b/demo/simple_state/run.ipynb
index 7d3e7943b78c5..39e90551f5e25 100644
--- a/demo/simple_state/run.ipynb
+++ b/demo/simple_state/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: simple_state"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    cart = gr.State([])\n", "    items_to_add = gr.CheckboxGroup([\"Cereal\", \"Milk\", \"Orange Juice\", \"Water\"])\n", "\n", "    def add_items(new_items, previous_cart):\n", "        cart = previous_cart + new_items\n", "        return cart\n", "\n", "    gr.Button(\"Add Items\").click(add_items, [items_to_add, cart], cart)\n", "\n", "    cart_size = gr.Number(label=\"Cart Size\")\n", "    gr.Button(\"Get Cart Size\").click(lambda cart: len(cart), cart, cart_size)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: simple_state"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    cart = gr.State([])\n", "    items_to_add = gr.CheckboxGroup([\"Cereal\", \"Milk\", \"Orange Juice\", \"Water\"])\n", "\n", "    def add_items(new_items, previous_cart):\n", "        cart = previous_cart + new_items\n", "        return cart\n", "\n", "    gr.Button(\"Add Items\").click(add_items, [items_to_add, cart], cart)\n", "\n", "    cart_size = gr.Number(label=\"Cart Size\")\n", "    cart.change(lambda cart: len(cart), cart, cart_size)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/simple_state/run.py b/demo/simple_state/run.py
index 4ab629a44a620..40836a8a65dfd 100644
--- a/demo/simple_state/run.py
+++ b/demo/simple_state/run.py
@@ -11,7 +11,7 @@ def add_items(new_items, previous_cart):
     gr.Button("Add Items").click(add_items, [items_to_add, cart], cart)
 
     cart_size = gr.Number(label="Cart Size")
-    gr.Button("Get Cart Size").click(lambda cart: len(cart), cart, cart_size)
+    cart.change(lambda cart: len(cart), cart, cart_size)
 
 if __name__ == "__main__":
     demo.launch()
\ No newline at end of file
diff --git a/demo/sine_curve/requirements.txt b/demo/sine_curve/requirements.txt
index d42d0ad03bdf8..5c84b3c19f3fe 100644
--- a/demo/sine_curve/requirements.txt
+++ b/demo/sine_curve/requirements.txt
@@ -1 +1,2 @@
-plotly
\ No newline at end of file
+numpy
+plotly
diff --git a/demo/sine_curve/run.ipynb b/demo/sine_curve/run.ipynb
index e9b8053904028..9b15230b75126 100644
--- a/demo/sine_curve/run.ipynb
+++ b/demo/sine_curve/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: sine_curve"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio plotly"]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import math\n", "import gradio as gr\n", "import plotly.express as px\n", "import numpy as np\n", "\n", "plot_end = 2 * math.pi\n", "\n", "def get_plot(period=1):\n", "    global plot_end\n", "    x = np.arange(plot_end - 2 * math.pi, plot_end, 0.02)\n", "    y = np.sin(2*math.pi*period * x)\n", "    fig = px.line(x=x, y=y)\n", "    plot_end += 2 * math.pi\n", "    if plot_end > 1000:\n", "        plot_end = 2 * math.pi\n", "    return fig\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        with gr.Column():\n", "            gr.Markdown(\"Change the value of the slider to automatically update the plot\")\n", "            period = gr.Slider(label=\"Period of plot\", value=1, minimum=0, maximum=10, step=1)\n", "            plot = gr.Plot(label=\"Plot (updates every half second)\")\n", "\n", "    dep = demo.load(get_plot, None, plot, every=1)\n", "    period.change(get_plot, period, plot, every=1, cancels=[dep])\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: sine_curve"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy plotly "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import math\n", "import gradio as gr\n", "import plotly.express as px\n", "import numpy as np\n", "\n", "plot_end = 2 * math.pi\n", "\n", "def get_plot(period=1):\n", "    global plot_end\n", "    x = np.arange(plot_end - 2 * math.pi, plot_end, 0.02)\n", "    y = np.sin(2*math.pi*period * x)\n", "    fig = px.line(x=x, y=y)\n", "    plot_end += 2 * math.pi\n", "    if plot_end > 1000:\n", "        plot_end = 2 * math.pi\n", "    return fig\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        with gr.Column():\n", "            gr.Markdown(\"Change the value of the slider to automatically update the plot\")\n", "            period = gr.Slider(label=\"Period of plot\", value=1, minimum=0, maximum=10, step=1)\n", "            plot = gr.Plot(label=\"Plot (updates every half second)\")\n", "\n", "    dep = demo.load(get_plot, None, plot, every=1)\n", "    period.change(get_plot, period, plot, every=1, cancels=[dep])\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/skip/run.ipynb b/demo/skip/run.ipynb
new file mode 100644
index 0000000000000..23a083f79da5a
--- /dev/null
+++ b/demo/skip/run.ipynb
@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: skip"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import random\n", "import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        clear_button = gr.Button(\"Clear\")\n", "        skip_button = gr.Button(\"Skip\")\n", "        random_button = gr.Button(\"Random\")\n", "    numbers = [gr.Number(), gr.Number()]\n", "\n", "    clear_button.click(lambda : (None, None), outputs=numbers)\n", "    skip_button.click(lambda : [gr.skip(), gr.skip()], outputs=numbers)\n", "    random_button.click(lambda : (random.randint(0, 100), random.randint(0, 100)), outputs=numbers)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/skip/run.py b/demo/skip/run.py
new file mode 100644
index 0000000000000..b43974b23e710
--- /dev/null
+++ b/demo/skip/run.py
@@ -0,0 +1,16 @@
+import random
+import gradio as gr
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        clear_button = gr.Button("Clear")
+        skip_button = gr.Button("Skip")
+        random_button = gr.Button("Random")
+    numbers = [gr.Number(), gr.Number()]
+
+    clear_button.click(lambda : (None, None), outputs=numbers)
+    skip_button.click(lambda : [gr.skip(), gr.skip()], outputs=numbers)
+    random_button.click(lambda : (random.randint(0, 100), random.randint(0, 100)), outputs=numbers)
+
+if __name__ == "__main__":
+    demo.launch()
\ No newline at end of file
diff --git a/demo/stable-diffusion/requirements.txt b/demo/stable-diffusion/requirements.txt
index bb40240976b3d..432766cd6b34a 100644
--- a/demo/stable-diffusion/requirements.txt
+++ b/demo/stable-diffusion/requirements.txt
@@ -2,4 +2,5 @@ diffusers
 transformers
 nvidia-ml-py3
 ftfy
-torch
\ No newline at end of file
+torch
+Pillow
diff --git a/demo/stable-diffusion/run.ipynb b/demo/stable-diffusion/run.ipynb
index 9b5296d6c8fd6..e27c0726af3e4 100644
--- a/demo/stable-diffusion/run.ipynb
+++ b/demo/stable-diffusion/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: stable-diffusion\n", "### Note: This is a simplified version of the code needed to create the Stable Diffusion demo. See full code here: https://hf.co/spaces/stabilityai/stable-diffusion/tree/main\n", "        "]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio diffusers transformers nvidia-ml-py3 ftfy torch"]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import torch\n", "from diffusers import StableDiffusionPipeline  # type: ignore\n", "from PIL import Image\n", "import os\n", "\n", "auth_token = os.getenv(\"auth_token\")\n", "model_id = \"CompVis/stable-diffusion-v1-4\"\n", "device = \"cpu\"\n", "pipe = StableDiffusionPipeline.from_pretrained(\n", "    model_id, use_auth_token=auth_token, revision=\"fp16\", torch_dtype=torch.float16\n", ")\n", "pipe = pipe.to(device)\n", "\n", "def infer(prompt, samples, steps, scale, seed):\n", "    generator = torch.Generator(device=device).manual_seed(seed)\n", "    images_list = pipe(  # type: ignore\n", "        [prompt] * samples,\n", "        num_inference_steps=steps,\n", "        guidance_scale=scale,\n", "        generator=generator,\n", "    )\n", "    images = []\n", "    safe_image = Image.open(r\"unsafe.png\")\n", "    for i, image in enumerate(images_list[\"sample\"]):  # type: ignore\n", "        if images_list[\"nsfw_content_detected\"][i]:  # type: ignore\n", "            images.append(safe_image)\n", "        else:\n", "            images.append(image)\n", "    return images\n", "\n", "block = gr.Blocks()\n", "\n", "with block:\n", "    with gr.Group():\n", "        with gr.Row():\n", "            text = gr.Textbox(\n", "                label=\"Enter your prompt\",\n", "                max_lines=1,\n", "                placeholder=\"Enter your prompt\",\n", "                container=False,\n", "            )\n", "            btn = gr.Button(\"Generate image\")\n", "        gallery = gr.Gallery(\n", "            label=\"Generated images\",\n", "            show_label=False,\n", "            elem_id=\"gallery\",\n", "            columns=[2],\n", "        )\n", "\n", "        advanced_button = gr.Button(\"Advanced options\", elem_id=\"advanced-btn\")\n", "\n", "        with gr.Row(elem_id=\"advanced-options\"):\n", "            samples = gr.Slider(label=\"Images\", minimum=1, maximum=4, value=4, step=1)\n", "            steps = gr.Slider(label=\"Steps\", minimum=1, maximum=50, value=45, step=1)\n", "            scale = gr.Slider(\n", "                label=\"Guidance Scale\", minimum=0, maximum=50, value=7.5, step=0.1\n", "            )\n", "            seed = gr.Slider(\n", "                label=\"Seed\",\n", "                minimum=0,\n", "                maximum=2147483647,\n", "                step=1,\n", "                randomize=True,\n", "            )\n", "        gr.on([text.submit, btn.click], infer, inputs=[text, samples, steps, scale, seed], outputs=gallery)\n", "        advanced_button.click(\n", "            None,\n", "            [],\n", "            text,\n", "        )\n", "\n", "block.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: stable-diffusion\n", "### Note: This is a simplified version of the code needed to create the Stable Diffusion demo. See full code here: https://hf.co/spaces/stabilityai/stable-diffusion/tree/main\n", "        "]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio diffusers transformers nvidia-ml-py3 ftfy torch Pillow "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import torch\n", "from diffusers import StableDiffusionPipeline  # type: ignore\n", "from PIL import Image\n", "import os\n", "\n", "auth_token = os.getenv(\"auth_token\")\n", "model_id = \"CompVis/stable-diffusion-v1-4\"\n", "device = \"cpu\"\n", "pipe = StableDiffusionPipeline.from_pretrained(\n", "    model_id, use_auth_token=auth_token, revision=\"fp16\", torch_dtype=torch.float16\n", ")\n", "pipe = pipe.to(device)\n", "\n", "def infer(prompt, samples, steps, scale, seed):\n", "    generator = torch.Generator(device=device).manual_seed(seed)\n", "    images_list = pipe(  # type: ignore\n", "        [prompt] * samples,\n", "        num_inference_steps=steps,\n", "        guidance_scale=scale,\n", "        generator=generator,\n", "    )\n", "    images = []\n", "    safe_image = Image.open(r\"unsafe.png\")\n", "    for i, image in enumerate(images_list[\"sample\"]):  # type: ignore\n", "        if images_list[\"nsfw_content_detected\"][i]:  # type: ignore\n", "            images.append(safe_image)\n", "        else:\n", "            images.append(image)\n", "    return images\n", "\n", "block = gr.Blocks()\n", "\n", "with block:\n", "    with gr.Group():\n", "        with gr.Row():\n", "            text = gr.Textbox(\n", "                label=\"Enter your prompt\",\n", "                max_lines=1,\n", "                placeholder=\"Enter your prompt\",\n", "                container=False,\n", "            )\n", "            btn = gr.Button(\"Generate image\")\n", "        gallery = gr.Gallery(\n", "            label=\"Generated images\",\n", "            show_label=False,\n", "            elem_id=\"gallery\",\n", "            columns=[2],\n", "        )\n", "\n", "        advanced_button = gr.Button(\"Advanced options\", elem_id=\"advanced-btn\")\n", "\n", "        with gr.Row(elem_id=\"advanced-options\"):\n", "            samples = gr.Slider(label=\"Images\", minimum=1, maximum=4, value=4, step=1)\n", "            steps = gr.Slider(label=\"Steps\", minimum=1, maximum=50, value=45, step=1)\n", "            scale = gr.Slider(\n", "                label=\"Guidance Scale\", minimum=0, maximum=50, value=7.5, step=0.1\n", "            )\n", "            seed = gr.Slider(\n", "                label=\"Seed\",\n", "                minimum=0,\n", "                maximum=2147483647,\n", "                step=1,\n", "                randomize=True,\n", "            )\n", "        gr.on([text.submit, btn.click], infer, inputs=[text, samples, steps, scale, seed], outputs=gallery)\n", "        advanced_button.click(\n", "            None,\n", "            [],\n", "            text,\n", "        )\n", "\n", "block.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/state_change/run.ipynb b/demo/state_change/run.ipynb
index 8b4d611579adb..b7d5eeff63502 100644
--- a/demo/state_change/run.ipynb
+++ b/demo/state_change/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: state_change"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "\n", "    with gr.Row():\n", "        state_a = gr.State(0)\n", "        btn_a = gr.Button(\"Increment A\")\n", "        value_a = gr.Number(label=\"Number A\")\n", "        btn_a.click(lambda x: x + 1, state_a, state_a)\n", "        state_a.change(lambda x: x, state_a, value_a)\n", "    with gr.Row():\n", "        state_b = gr.State(0)\n", "        btn_b = gr.Button(\"Increment B\")\n", "        value_b = gr.Number(label=\"Number B\")\n", "        btn_b.click(lambda x: x + 1, state_b, state_b)\n", "\n", "        @gr.on(inputs=state_b, outputs=value_b)\n", "        def identity(x):\n", "            return x\n", "\n", "    @gr.render(inputs=[state_a, state_b])\n", "    def render(a, b):\n", "        for x in range(a):\n", "            with gr.Row():\n", "                for y in range(b):\n", "                    gr.Button(f\"Button {x}, {y}\")\n", "\n", "    list_state = gr.State([])\n", "    dict_state = gr.State(dict())\n", "    nested_list_state = gr.State([])\n", "    set_state = gr.State(set())\n", "\n", "    def transform_list(x):\n", "        return {n: n for n in x}, [x[:] for _ in range(len(x))], set(x)\n", "\n", "    list_state.change(\n", "        transform_list,\n", "        inputs=list_state,\n", "        outputs=[dict_state, nested_list_state, set_state],\n", "    )\n", "\n", "    all_textbox = gr.Textbox(label=\"Output\")\n", "    click_count = gr.Number(label=\"Clicks\")\n", "    change_count = gr.Number(label=\"Changes\")\n", "    gr.on(\n", "        inputs=[change_count, dict_state, nested_list_state, set_state],\n", "        triggers=[dict_state.change, nested_list_state.change, set_state.change],\n", "        fn=lambda x, *args: (x + 1, \"\\n\".join(str(arg) for arg in args)),\n", "        outputs=[change_count, all_textbox],\n", "    )\n", "\n", "    count_to_3_btn = gr.Button(\"Count to 3\")\n", "    count_to_3_btn.click(lambda: [1, 2, 3], outputs=list_state)\n", "    zero_all_btn = gr.Button(\"Zero All\")\n", "    zero_all_btn.click(lambda x: [0] * len(x), inputs=list_state, outputs=list_state)\n", "\n", "    gr.on(\n", "        [count_to_3_btn.click, zero_all_btn.click],\n", "        lambda x: x + 1,\n", "        click_count,\n", "        click_count,\n", "    )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: state_change"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "\n", "    with gr.Row():\n", "        state_a = gr.State(0)\n", "        btn_a = gr.Button(\"Increment A\")\n", "        value_a = gr.Number(label=\"Number A\")\n", "        btn_a.click(lambda x: x + 1, state_a, state_a)\n", "        state_a.change(lambda x: x, state_a, value_a)\n", "    with gr.Row():\n", "        state_b = gr.State(0)\n", "        btn_b = gr.Button(\"Increment B\")\n", "        value_b = gr.Number(label=\"Number B\")\n", "        btn_b.click(lambda x: x + 1, state_b, state_b)\n", "\n", "        @gr.on(inputs=state_b, outputs=value_b)\n", "        def identity(x):\n", "            return x\n", "\n", "    @gr.render(inputs=[state_a, state_b])\n", "    def render(a, b):\n", "        for x in range(a):\n", "            with gr.Row():\n", "                for y in range(b):\n", "                    gr.Button(f\"Button {x}, {y}\")\n", "\n", "    list_state = gr.State([])\n", "    dict_state = gr.State(dict())\n", "    nested_list_state = gr.State([])\n", "    set_state = gr.State(set())\n", "\n", "    def transform_list(x):\n", "        return {n: n for n in x}, [x[:] for _ in range(len(x))], set(x)\n", "\n", "    list_state.change(\n", "        transform_list,\n", "        inputs=list_state,\n", "        outputs=[dict_state, nested_list_state, set_state],\n", "    )\n", "\n", "    all_textbox = gr.Textbox(label=\"Output\")\n", "    click_count = gr.Number(label=\"Clicks\")\n", "    change_count = gr.Number(label=\"Changes\")\n", "    gr.on(\n", "        inputs=[change_count, dict_state, nested_list_state, set_state],\n", "        triggers=[dict_state.change, nested_list_state.change, set_state.change],\n", "        fn=lambda x, *args: (x + 1, \"\\n\".join(str(arg) for arg in args)),\n", "        outputs=[change_count, all_textbox],\n", "    )\n", "\n", "    count_to_3_btn = gr.Button(\"Count to 3\")\n", "    count_to_3_btn.click(lambda: [1, 2, 3], outputs=list_state)\n", "    zero_all_btn = gr.Button(\"Zero All\")\n", "    zero_all_btn.click(lambda x: [0] * len(x), inputs=list_state, outputs=list_state)\n", "\n", "    gr.on(\n", "        [count_to_3_btn.click, zero_all_btn.click],\n", "        lambda x: x + 1,\n", "        click_count,\n", "        click_count,\n", "    )\n", "\n", "    async def increment(x):\n", "        yield x + 1\n", "\n", "    n_text = gr.State(0)\n", "    add_btn = gr.Button(\"Iterator State Change\")\n", "    add_btn.click(increment, n_text, n_text)\n", "\n", "    @gr.render(inputs=n_text)\n", "    def render_count(count):\n", "        for i in range(int(count)):\n", "            gr.Markdown(value = f\"Success Box {i} added\", key=i)\n", "    \n", "    class CustomState():\n", "        def __init__(self, val):\n", "            self.val = val\n", "\n", "        def __hash__(self) -> int:\n", "            return self.val\n", "\n", "    custom_state = gr.State(CustomState(5))\n", "    with gr.Row():\n", "        btn_10 = gr.Button(\"Set State to 10\")\n", "        custom_changes = gr.Number(0, label=\"Custom State Changes\")\n", "        custom_clicks = gr.Number(0, label=\"Custom State Clicks\")\n", "\n", "    custom_state.change(increment, custom_changes, custom_changes)\n", "    def set_to_10(cs: CustomState):\n", "        cs.val = 10\n", "        return cs\n", "\n", "    btn_10.click(set_to_10, custom_state, custom_state).then(\n", "        increment, custom_clicks, custom_clicks\n", "    )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/state_change/run.py b/demo/state_change/run.py
index 2846a38ce51c6..344e773a87b2d 100644
--- a/demo/state_change/run.py
+++ b/demo/state_change/run.py
@@ -61,5 +61,39 @@ def transform_list(x):
         click_count,
     )
 
+    async def increment(x):
+        yield x + 1
+
+    n_text = gr.State(0)
+    add_btn = gr.Button("Iterator State Change")
+    add_btn.click(increment, n_text, n_text)
+
+    @gr.render(inputs=n_text)
+    def render_count(count):
+        for i in range(int(count)):
+            gr.Markdown(value = f"Success Box {i} added", key=i)
+    
+    class CustomState():
+        def __init__(self, val):
+            self.val = val
+
+        def __hash__(self) -> int:
+            return self.val
+
+    custom_state = gr.State(CustomState(5))
+    with gr.Row():
+        btn_10 = gr.Button("Set State to 10")
+        custom_changes = gr.Number(0, label="Custom State Changes")
+        custom_clicks = gr.Number(0, label="Custom State Clicks")
+
+    custom_state.change(increment, custom_changes, custom_changes)
+    def set_to_10(cs: CustomState):
+        cs.val = 10
+        return cs
+
+    btn_10.click(set_to_10, custom_state, custom_state).then(
+        increment, custom_clicks, custom_clicks
+    )
+
 if __name__ == "__main__":
     demo.launch()
diff --git a/demo/state_cleanup/requirements.txt b/demo/state_cleanup/requirements.txt
new file mode 100644
index 0000000000000..0d59398ea6928
--- /dev/null
+++ b/demo/state_cleanup/requirements.txt
@@ -0,0 +1,2 @@
+numpy
+Pillow
diff --git a/demo/state_cleanup/run.ipynb b/demo/state_cleanup/run.ipynb
index 147e03b74e882..749543afe72b8 100644
--- a/demo/state_cleanup/run.ipynb
+++ b/demo/state_cleanup/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: state_cleanup"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["from __future__ import annotations\n", "import gradio as gr\n", "import numpy as np\n", "from PIL import Image\n", "from pathlib import Path\n", "import secrets\n", "import shutil\n", "\n", "current_dir = Path(__file__).parent\n", "\n", "def generate_random_img(history: list[Image.Image], request: gr.Request):\n", "    \"\"\"Generate a random red, green, blue, orange, yellor or purple image.\"\"\"\n", "    colors = [(255, 0, 0), (0, 255, 0), (0, 0, 255), (255, 165, 0), (255, 255, 0), (128, 0, 128)]\n", "    color = colors[np.random.randint(0, len(colors))]\n", "    img = Image.new('RGB', (100, 100), color)\n", "\n", "    user_dir: Path = current_dir / str(request.session_hash)\n", "    user_dir.mkdir(exist_ok=True)\n", "    path = user_dir / f\"{secrets.token_urlsafe(8)}.webp\"\n", "\n", "    img.save(path)\n", "    history.append(img)\n", "\n", "    return img, history, history\n", "\n", "def delete_directory(req: gr.Request):\n", "    if not req.username:\n", "        return\n", "    user_dir: Path = current_dir / req.username\n", "    shutil.rmtree(str(user_dir))\n", "\n", "with gr.Blocks(delete_cache=(60, 3600)) as demo:\n", "    gr.Markdown(\"\"\"# State Cleanup Demo\n", "                \ud83d\uddbc\ufe0f Images are saved in a user-specific directory and deleted when the users closes the page via demo.unload.\n", "                \"\"\")\n", "    with gr.Row():\n", "        with gr.Column(scale=1):\n", "            with gr.Row():\n", "                img = gr.Image(label=\"Generated Image\", height=300, width=300)\n", "            with gr.Row():\n", "                gen = gr.Button(value=\"Generate\")\n", "            with gr.Row():\n", "                history = gr.Gallery(label=\"Previous Generations\", height=500, columns=10)\n", "                state = gr.State(value=[], delete_callback=lambda v: print(\"STATE DELETED\"))\n", "\n", "    demo.load(generate_random_img, [state], [img, state, history])\n", "    gen.click(generate_random_img, [state], [img, state, history])\n", "    demo.unload(delete_directory)\n", "\n", "demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: state_cleanup"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy Pillow "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["from __future__ import annotations\n", "import gradio as gr\n", "import numpy as np\n", "from PIL import Image\n", "from pathlib import Path\n", "import secrets\n", "import shutil\n", "\n", "current_dir = Path(__file__).parent\n", "\n", "def generate_random_img(history: list[Image.Image], request: gr.Request):\n", "    \"\"\"Generate a random red, green, blue, orange, yellor or purple image.\"\"\"\n", "    colors = [(255, 0, 0), (0, 255, 0), (0, 0, 255), (255, 165, 0), (255, 255, 0), (128, 0, 128)]\n", "    color = colors[np.random.randint(0, len(colors))]\n", "    img = Image.new('RGB', (100, 100), color)\n", "\n", "    user_dir: Path = current_dir / str(request.session_hash)\n", "    user_dir.mkdir(exist_ok=True)\n", "    path = user_dir / f\"{secrets.token_urlsafe(8)}.webp\"\n", "\n", "    img.save(path)\n", "    history.append(img)\n", "\n", "    return img, history, history\n", "\n", "def delete_directory(req: gr.Request):\n", "    if not req.username:\n", "        return\n", "    user_dir: Path = current_dir / req.username\n", "    shutil.rmtree(str(user_dir))\n", "\n", "with gr.Blocks(delete_cache=(60, 3600)) as demo:\n", "    gr.Markdown(\"\"\"# State Cleanup Demo\n", "                \ud83d\uddbc\ufe0f Images are saved in a user-specific directory and deleted when the users closes the page via demo.unload.\n", "                \"\"\")\n", "    with gr.Row():\n", "        with gr.Column(scale=1):\n", "            with gr.Row():\n", "                img = gr.Image(label=\"Generated Image\", height=300, width=300)\n", "            with gr.Row():\n", "                gen = gr.Button(value=\"Generate\")\n", "            with gr.Row():\n", "                history = gr.Gallery(label=\"Previous Generations\", height=500, columns=10)\n", "                state = gr.State(value=[], delete_callback=lambda v: print(\"STATE DELETED\"))\n", "\n", "    demo.load(generate_random_img, [state], [img, state, history])\n", "    gen.click(generate_random_img, [state], [img, state, history])\n", "    demo.unload(delete_directory)\n", "\n", "demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/stream_audio/requirements.txt b/demo/stream_audio/requirements.txt
new file mode 100644
index 0000000000000..24ce15ab7ead3
--- /dev/null
+++ b/demo/stream_audio/requirements.txt
@@ -0,0 +1 @@
+numpy
diff --git a/demo/stream_audio/run.ipynb b/demo/stream_audio/run.ipynb
index 177973a133c6b..14e678816da1e 100644
--- a/demo/stream_audio/run.ipynb
+++ b/demo/stream_audio/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: stream_audio"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import numpy as np\n", "import time\n", "\n", "def add_to_stream(audio, instream):\n", "    time.sleep(1)\n", "    if audio is None:\n", "        return gr.Audio(), instream\n", "    if instream is None:\n", "        ret = audio\n", "    else:\n", "        ret = (audio[0], np.concatenate((instream[1], audio[1])))\n", "    return ret, ret\n", "\n", "with gr.Blocks() as demo:\n", "    inp = gr.Audio(sources=[\"microphone\"])\n", "    out = gr.Audio()\n", "    stream = gr.State()\n", "    clear = gr.Button(\"Clear\")\n", "\n", "    inp.stream(add_to_stream, [inp, stream], [out, stream])\n", "    clear.click(lambda: [None, None, None], None, [inp, out, stream])\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: stream_audio"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import numpy as np\n", "import time\n", "\n", "def add_to_stream(audio, instream):\n", "    time.sleep(1)\n", "    if audio is None:\n", "        return gr.Audio(), instream\n", "    if instream is None:\n", "        ret = audio\n", "    else:\n", "        ret = (audio[0], np.concatenate((instream[1], audio[1])))\n", "    return ret, ret\n", "\n", "with gr.Blocks() as demo:\n", "    inp = gr.Audio(sources=[\"microphone\"])\n", "    out = gr.Audio()\n", "    stream = gr.State()\n", "    clear = gr.Button(\"Clear\")\n", "\n", "    inp.stream(add_to_stream, [inp, stream], [out, stream])\n", "    clear.click(lambda: [None, None, None], None, [inp, out, stream])\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/stream_audio_out/run.ipynb b/demo/stream_audio_out/run.ipynb
index 94765656a34f7..b486a488cb7b9 100644
--- a/demo/stream_audio_out/run.ipynb
+++ b/demo/stream_audio_out/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: stream_audio_out"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('audio')\n", "!wget -q -O audio/cantina.wav https://github.com/gradio-app/gradio/raw/main/demo/stream_audio_out/audio/cantina.wav"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from pydub import AudioSegment\n", "from time import sleep\n", "\n", "with gr.Blocks() as demo:\n", "    input_audio = gr.Audio(label=\"Input Audio\", type=\"filepath\", format=\"mp3\")\n", "    with gr.Row():\n", "        with gr.Column():\n", "            stream_as_file_btn = gr.Button(\"Stream as File\")\n", "            format = gr.Radio([\"wav\", \"mp3\"], value=\"wav\", label=\"Format\")\n", "            stream_as_file_output = gr.Audio(streaming=True)\n", "\n", "            def stream_file(audio_file, format):\n", "                audio = AudioSegment.from_file(audio_file)\n", "                i = 0\n", "                chunk_size = 1000\n", "                while chunk_size * i < len(audio):\n", "                    chunk = audio[chunk_size * i : chunk_size * (i + 1)]\n", "                    i += 1\n", "                    if chunk:\n", "                        file = f\"/tmp/{i}.{format}\"\n", "                        chunk.export(file, format=format)\n", "                        yield file\n", "                        sleep(0.5)\n", "\n", "            stream_as_file_btn.click(\n", "                stream_file, [input_audio, format], stream_as_file_output\n", "            )\n", "\n", "            gr.Examples(\n", "                [[\"audio/cantina.wav\", \"wav\"], [\"audio/cantina.wav\", \"mp3\"]],\n", "                [input_audio, format],\n", "                fn=stream_file,\n", "                outputs=stream_as_file_output,\n", "            )\n", "\n", "        with gr.Column():\n", "            stream_as_bytes_btn = gr.Button(\"Stream as Bytes\")\n", "            stream_as_bytes_output = gr.Audio(streaming=True)\n", "\n", "            def stream_bytes(audio_file):\n", "                chunk_size = 20_000\n", "                with open(audio_file, \"rb\") as f:\n", "                    while True:\n", "                        chunk = f.read(chunk_size)\n", "                        if chunk:\n", "                            yield chunk\n", "                            sleep(1)\n", "                        else:\n", "                            break\n", "            stream_as_bytes_btn.click(stream_bytes, input_audio, stream_as_bytes_output)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: stream_audio_out"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('audio')\n", "!wget -q -O audio/cantina.wav https://github.com/gradio-app/gradio/raw/main/demo/stream_audio_out/audio/cantina.wav"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from pydub import AudioSegment\n", "from time import sleep\n", "import os\n", "import tempfile\n", "from pathlib import Path\n", "\n", "with gr.Blocks() as demo:\n", "    input_audio = gr.Audio(label=\"Input Audio\", type=\"filepath\", format=\"mp3\")\n", "    with gr.Row():\n", "        with gr.Column():\n", "            stream_as_file_btn = gr.Button(\"Stream as File\")\n", "            format = gr.Radio([\"wav\", \"mp3\"], value=\"wav\", label=\"Format\")\n", "            stream_as_file_output = gr.Audio(streaming=True, elem_id=\"stream_as_file_output\", autoplay=True, visible=False)\n", "\n", "            def stream_file(audio_file, format):\n", "                audio = AudioSegment.from_file(audio_file)\n", "                i = 0\n", "                chunk_size = 1000\n", "                while chunk_size * i < len(audio):\n", "                    chunk = audio[chunk_size * i : chunk_size * (i + 1)]\n", "                    i += 1\n", "                    if chunk:\n", "                        file = Path(tempfile.gettempdir()) / \"stream_audio_demo\" / f\"{i}.{format}\"\n", "                        file.parent.mkdir(parents=True, exist_ok=True)\n", "                        chunk.export(str(file), format=format)\n", "                        yield file\n", "                        sleep(0.5)\n", "\n", "            stream_as_file_btn.click(\n", "                stream_file, [input_audio, format], stream_as_file_output\n", "            )\n", "\n", "            gr.Examples(\n", "                [[os.path.join(os.path.abspath(''), \"audio/cantina.wav\"), \"wav\"],\n", "                 [os.path.join(os.path.abspath(''), \"audio/cantina.wav\"), \"mp3\"]],\n", "                [input_audio, format],\n", "                fn=stream_file,\n", "                outputs=stream_as_file_output,\n", "                cache_examples=False,\n", "            )\n", "\n", "        with gr.Column():\n", "            stream_as_bytes_btn = gr.Button(\"Stream as Bytes\")\n", "            stream_as_bytes_output = gr.Audio(streaming=True, elem_id=\"stream_as_bytes_output\", autoplay=True)\n", "\n", "            def stream_bytes(audio_file):\n", "                chunk_size = 20_000\n", "                with open(audio_file, \"rb\") as f:\n", "                    while True:\n", "                        chunk = f.read(chunk_size)\n", "                        if chunk:\n", "                            yield chunk\n", "                            sleep(1)\n", "                        else:\n", "                            break\n", "            stream_as_bytes_btn.click(stream_bytes, input_audio, stream_as_bytes_output)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/stream_audio_out/run.py b/demo/stream_audio_out/run.py
index 9b348c532fcb6..a21dab49372fe 100644
--- a/demo/stream_audio_out/run.py
+++ b/demo/stream_audio_out/run.py
@@ -1,6 +1,9 @@
 import gradio as gr
 from pydub import AudioSegment
 from time import sleep
+import os
+import tempfile
+from pathlib import Path
 
 with gr.Blocks() as demo:
     input_audio = gr.Audio(label="Input Audio", type="filepath", format="mp3")
@@ -8,7 +11,7 @@
         with gr.Column():
             stream_as_file_btn = gr.Button("Stream as File")
             format = gr.Radio(["wav", "mp3"], value="wav", label="Format")
-            stream_as_file_output = gr.Audio(streaming=True)
+            stream_as_file_output = gr.Audio(streaming=True, elem_id="stream_as_file_output", autoplay=True, visible=False)
 
             def stream_file(audio_file, format):
                 audio = AudioSegment.from_file(audio_file)
@@ -18,8 +21,9 @@ def stream_file(audio_file, format):
                     chunk = audio[chunk_size * i : chunk_size * (i + 1)]
                     i += 1
                     if chunk:
-                        file = f"/tmp/{i}.{format}"
-                        chunk.export(file, format=format)
+                        file = Path(tempfile.gettempdir()) / "stream_audio_demo" / f"{i}.{format}"
+                        file.parent.mkdir(parents=True, exist_ok=True)
+                        chunk.export(str(file), format=format)
                         yield file
                         sleep(0.5)
 
@@ -28,15 +32,17 @@ def stream_file(audio_file, format):
             )
 
             gr.Examples(
-                [["audio/cantina.wav", "wav"], ["audio/cantina.wav", "mp3"]],
+                [[os.path.join(os.path.dirname(__file__), "audio/cantina.wav"), "wav"],
+                 [os.path.join(os.path.dirname(__file__), "audio/cantina.wav"), "mp3"]],
                 [input_audio, format],
                 fn=stream_file,
                 outputs=stream_as_file_output,
+                cache_examples=False,
             )
 
         with gr.Column():
             stream_as_bytes_btn = gr.Button("Stream as Bytes")
-            stream_as_bytes_output = gr.Audio(streaming=True)
+            stream_as_bytes_output = gr.Audio(streaming=True, elem_id="stream_as_bytes_output", autoplay=True)
 
             def stream_bytes(audio_file):
                 chunk_size = 20_000
diff --git a/demo/stream_frames/requirements.txt b/demo/stream_frames/requirements.txt
new file mode 100644
index 0000000000000..24ce15ab7ead3
--- /dev/null
+++ b/demo/stream_frames/requirements.txt
@@ -0,0 +1 @@
+numpy
diff --git a/demo/stream_frames/run.ipynb b/demo/stream_frames/run.ipynb
index 1fab7111bf62b..15b2efc534de4 100644
--- a/demo/stream_frames/run.ipynb
+++ b/demo/stream_frames/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: stream_frames"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import numpy as np\n", "\n", "def flip(im):\n", "    return np.flipud(im)\n", "\n", "demo = gr.Interface(\n", "    flip,\n", "    gr.Image(sources=[\"webcam\"], streaming=True),\n", "    \"image\",\n", "    live=True\n", ")\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: stream_frames"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import numpy as np\n", "\n", "def flip(im):\n", "    return np.flipud(im)\n", "\n", "demo = gr.Interface(\n", "    flip,\n", "    gr.Image(sources=[\"webcam\"], streaming=True),\n", "    \"image\",\n", "    live=True\n", ")\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/stream_video_out/run.ipynb b/demo/stream_video_out/run.ipynb
new file mode 100644
index 0000000000000..10c88f79cef29
--- /dev/null
+++ b/demo/stream_video_out/run.ipynb
@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: stream_video_out"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio opencv-python"]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('video')\n", "!wget -q -O video/compliment_bot_screen_recording_3x.mp4 https://github.com/gradio-app/gradio/raw/main/demo/stream_video_out/video/compliment_bot_screen_recording_3x.mp4"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import cv2\n", "import os\n", "from pathlib import Path\n", "import atexit\n", "\n", "current_dir = Path(__file__).resolve().parent\n", "\n", "\n", "def delete_files():\n", "    for p in Path(current_dir).glob(\"*.ts\"):\n", "        p.unlink()\n", "    for p in Path(current_dir).glob(\"*.mp4\"):\n", "        p.unlink()\n", "\n", "\n", "atexit.register(delete_files)\n", "\n", "\n", "def process_video(input_video, stream_as_mp4):\n", "    cap = cv2.VideoCapture(input_video)\n", "\n", "    video_codec = cv2.VideoWriter_fourcc(*\"mp4v\") if stream_as_mp4 else cv2.VideoWriter_fourcc(*\"x264\")  # type: ignore\n", "    fps = int(cap.get(cv2.CAP_PROP_FPS))\n", "    width = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))\n", "    height = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))\n", "\n", "    iterating, frame = cap.read()\n", "\n", "    n_frames = 0\n", "    n_chunks = 0\n", "    name = str(current_dir / f\"output_{n_chunks}{'.mp4' if stream_as_mp4 else '.ts'}\")\n", "    segment_file = cv2.VideoWriter(name, video_codec, fps, (width, height))  # type: ignore\n", "\n", "    while iterating:\n", "\n", "        # flip frame vertically\n", "        frame = cv2.flip(frame, 0)\n", "        display_frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)\n", "        segment_file.write(display_frame)\n", "        n_frames += 1\n", "        if n_frames == 3 * fps:\n", "            n_chunks += 1\n", "            segment_file.release()\n", "            n_frames = 0\n", "            yield name\n", "            name = str(\n", "                current_dir / f\"output_{n_chunks}{'.mp4' if stream_as_mp4 else '.ts'}\"\n", "            )\n", "            segment_file = cv2.VideoWriter(name, video_codec, fps, (width, height))  # type: ignore\n", "\n", "        iterating, frame = cap.read()\n", "\n", "    segment_file.release()\n", "    yield name\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(\"# Video Streaming Out \ud83d\udcf9\")\n", "    with gr.Row():\n", "        with gr.Column():\n", "            input_video = gr.Video(label=\"input\")\n", "            checkbox = gr.Checkbox(label=\"Stream as MP4 file?\", value=False)\n", "        with gr.Column():\n", "            processed_frames = gr.Video(\n", "                label=\"stream\",\n", "                streaming=True,\n", "                autoplay=True,\n", "                elem_id=\"stream_video_output\",\n", "            )\n", "    with gr.Row():\n", "        process_video_btn = gr.Button(\"process video\")\n", "\n", "    process_video_btn.click(process_video, [input_video, checkbox], [processed_frames])\n", "\n", "    gr.Examples(\n", "        [\n", "            [\n", "                os.path.join(\n", "                    os.path.abspath(''),\n", "                    \"video/compliment_bot_screen_recording_3x.mp4\",\n", "                ),\n", "                False,\n", "            ],\n", "            [\n", "                os.path.join(\n", "                    os.path.abspath(''),\n", "                    \"video/compliment_bot_screen_recording_3x.mp4\",\n", "                ),\n", "                True,\n", "            ],\n", "        ],\n", "        [input_video, checkbox],\n", "        fn=process_video,\n", "        outputs=processed_frames,\n", "        cache_examples=False,\n", "    )\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/stream_video_out/run.py b/demo/stream_video_out/run.py
new file mode 100644
index 0000000000000..0b573749ddc8b
--- /dev/null
+++ b/demo/stream_video_out/run.py
@@ -0,0 +1,101 @@
+import gradio as gr
+import cv2
+import os
+from pathlib import Path
+import atexit
+
+current_dir = Path(__file__).resolve().parent
+
+
+def delete_files():
+    for p in Path(current_dir).glob("*.ts"):
+        p.unlink()
+    for p in Path(current_dir).glob("*.mp4"):
+        p.unlink()
+
+
+atexit.register(delete_files)
+
+
+def process_video(input_video, stream_as_mp4):
+    cap = cv2.VideoCapture(input_video)
+
+    video_codec = cv2.VideoWriter_fourcc(*"mp4v") if stream_as_mp4 else cv2.VideoWriter_fourcc(*"x264")  # type: ignore
+    fps = int(cap.get(cv2.CAP_PROP_FPS))
+    width = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
+    height = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
+
+    iterating, frame = cap.read()
+
+    n_frames = 0
+    n_chunks = 0
+    name = str(current_dir / f"output_{n_chunks}{'.mp4' if stream_as_mp4 else '.ts'}")
+    segment_file = cv2.VideoWriter(name, video_codec, fps, (width, height))  # type: ignore
+
+    while iterating:
+
+        # flip frame vertically
+        frame = cv2.flip(frame, 0)
+        display_frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
+        segment_file.write(display_frame)
+        n_frames += 1
+        if n_frames == 3 * fps:
+            n_chunks += 1
+            segment_file.release()
+            n_frames = 0
+            yield name
+            name = str(
+                current_dir / f"output_{n_chunks}{'.mp4' if stream_as_mp4 else '.ts'}"
+            )
+            segment_file = cv2.VideoWriter(name, video_codec, fps, (width, height))  # type: ignore
+
+        iterating, frame = cap.read()
+
+    segment_file.release()
+    yield name
+
+
+with gr.Blocks() as demo:
+    gr.Markdown("# Video Streaming Out 📹")
+    with gr.Row():
+        with gr.Column():
+            input_video = gr.Video(label="input")
+            checkbox = gr.Checkbox(label="Stream as MP4 file?", value=False)
+        with gr.Column():
+            processed_frames = gr.Video(
+                label="stream",
+                streaming=True,
+                autoplay=True,
+                elem_id="stream_video_output",
+            )
+    with gr.Row():
+        process_video_btn = gr.Button("process video")
+
+    process_video_btn.click(process_video, [input_video, checkbox], [processed_frames])
+
+    gr.Examples(
+        [
+            [
+                os.path.join(
+                    os.path.dirname(__file__),
+                    "video/compliment_bot_screen_recording_3x.mp4",
+                ),
+                False,
+            ],
+            [
+                os.path.join(
+                    os.path.dirname(__file__),
+                    "video/compliment_bot_screen_recording_3x.mp4",
+                ),
+                True,
+            ],
+        ],
+        [input_video, checkbox],
+        fn=process_video,
+        outputs=processed_frames,
+        cache_examples=False,
+    )
+
+
+if __name__ == "__main__":
+    demo.launch()
diff --git a/demo/stream_video_out/video/compliment_bot_screen_recording_3x.mp4 b/demo/stream_video_out/video/compliment_bot_screen_recording_3x.mp4
new file mode 100644
index 0000000000000..7a7395bf43b40
Binary files /dev/null and b/demo/stream_video_out/video/compliment_bot_screen_recording_3x.mp4 differ
diff --git a/demo/streaming_filter/requirements.txt b/demo/streaming_filter/requirements.txt
new file mode 100644
index 0000000000000..b96544bd0b2a3
--- /dev/null
+++ b/demo/streaming_filter/requirements.txt
@@ -0,0 +1,2 @@
+opencv-python
+numpy
diff --git a/demo/streaming_filter/run.ipynb b/demo/streaming_filter/run.ipynb
new file mode 100644
index 0000000000000..161dde8a85988
--- /dev/null
+++ b/demo/streaming_filter/run.ipynb
@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: streaming_filter"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio opencv-python numpy "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import numpy as np\n", "import cv2\n", "\n", "def transform_cv2(frame, transform):\n", "    if transform == \"cartoon\":\n", "        # prepare color\n", "        img_color = cv2.pyrDown(cv2.pyrDown(frame))\n", "        for _ in range(6):\n", "            img_color = cv2.bilateralFilter(img_color, 9, 9, 7)\n", "        img_color = cv2.pyrUp(cv2.pyrUp(img_color))\n", "\n", "        # prepare edges\n", "        img_edges = cv2.cvtColor(frame, cv2.COLOR_RGB2GRAY)\n", "        img_edges = cv2.adaptiveThreshold(\n", "            cv2.medianBlur(img_edges, 7),\n", "            255,\n", "            cv2.ADAPTIVE_THRESH_MEAN_C,\n", "            cv2.THRESH_BINARY,\n", "            9,\n", "            2,\n", "        )\n", "        img_edges = cv2.cvtColor(img_edges, cv2.COLOR_GRAY2RGB)\n", "        # combine color and edges\n", "        img = cv2.bitwise_and(img_color, img_edges)\n", "        return img\n", "    elif transform == \"edges\":\n", "        # perform edge detection\n", "        img = cv2.cvtColor(cv2.Canny(frame, 100, 200), cv2.COLOR_GRAY2BGR)\n", "        return img\n", "    else:\n", "        return np.flipud(frame)\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        with gr.Column():\n", "            transform = gr.Dropdown(choices=[\"cartoon\", \"edges\", \"flip\"],\n", "                                    value=\"flip\", label=\"Transformation\")\n", "            input_img = gr.Image(sources=[\"webcam\"], type=\"numpy\")\n", "        with gr.Column():\n", "            output_img = gr.Image(streaming=True)\n", "        dep = input_img.stream(transform_cv2, [input_img, transform], [output_img],\n", "                                time_limit=30, stream_every=0.1, concurrency_limit=30)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/streaming_filter/run.py b/demo/streaming_filter/run.py
new file mode 100644
index 0000000000000..dca23e5602ac3
--- /dev/null
+++ b/demo/streaming_filter/run.py
@@ -0,0 +1,46 @@
+import gradio as gr
+import numpy as np
+import cv2
+
+def transform_cv2(frame, transform):
+    if transform == "cartoon":
+        # prepare color
+        img_color = cv2.pyrDown(cv2.pyrDown(frame))
+        for _ in range(6):
+            img_color = cv2.bilateralFilter(img_color, 9, 9, 7)
+        img_color = cv2.pyrUp(cv2.pyrUp(img_color))
+
+        # prepare edges
+        img_edges = cv2.cvtColor(frame, cv2.COLOR_RGB2GRAY)
+        img_edges = cv2.adaptiveThreshold(
+            cv2.medianBlur(img_edges, 7),
+            255,
+            cv2.ADAPTIVE_THRESH_MEAN_C,
+            cv2.THRESH_BINARY,
+            9,
+            2,
+        )
+        img_edges = cv2.cvtColor(img_edges, cv2.COLOR_GRAY2RGB)
+        # combine color and edges
+        img = cv2.bitwise_and(img_color, img_edges)
+        return img
+    elif transform == "edges":
+        # perform edge detection
+        img = cv2.cvtColor(cv2.Canny(frame, 100, 200), cv2.COLOR_GRAY2BGR)
+        return img
+    else:
+        return np.flipud(frame)
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        with gr.Column():
+            transform = gr.Dropdown(choices=["cartoon", "edges", "flip"],
+                                    value="flip", label="Transformation")
+            input_img = gr.Image(sources=["webcam"], type="numpy")
+        with gr.Column():
+            output_img = gr.Image(streaming=True)
+        dep = input_img.stream(transform_cv2, [input_img, transform], [output_img],
+                                time_limit=30, stream_every=0.1, concurrency_limit=30)
+
+if __name__ == "__main__":
+    demo.launch()
diff --git a/demo/streaming_filter_unified/requirements.txt b/demo/streaming_filter_unified/requirements.txt
new file mode 100644
index 0000000000000..b96544bd0b2a3
--- /dev/null
+++ b/demo/streaming_filter_unified/requirements.txt
@@ -0,0 +1,2 @@
+opencv-python
+numpy
diff --git a/demo/streaming_filter_unified/run.ipynb b/demo/streaming_filter_unified/run.ipynb
new file mode 100644
index 0000000000000..bbb5dfcc4983a
--- /dev/null
+++ b/demo/streaming_filter_unified/run.ipynb
@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: streaming_filter_unified"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio opencv-python numpy "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import numpy as np\n", "import cv2\n", "\n", "def transform_cv2(frame, transform):\n", "    if transform == \"cartoon\":\n", "        # prepare color\n", "        img_color = cv2.pyrDown(cv2.pyrDown(frame))\n", "        for _ in range(6):\n", "            img_color = cv2.bilateralFilter(img_color, 9, 9, 7)\n", "        img_color = cv2.pyrUp(cv2.pyrUp(img_color))\n", "\n", "        # prepare edges\n", "        img_edges = cv2.cvtColor(frame, cv2.COLOR_RGB2GRAY)\n", "        img_edges = cv2.adaptiveThreshold(\n", "            cv2.medianBlur(img_edges, 7),\n", "            255,\n", "            cv2.ADAPTIVE_THRESH_MEAN_C,\n", "            cv2.THRESH_BINARY,\n", "            9,\n", "            2,\n", "        )\n", "        img_edges = cv2.cvtColor(img_edges, cv2.COLOR_GRAY2RGB)\n", "        # combine color and edges\n", "        img = cv2.bitwise_and(img_color, img_edges)\n", "        return img\n", "    elif transform == \"edges\":\n", "        # perform edge detection\n", "        img = cv2.cvtColor(cv2.Canny(frame, 100, 200), cv2.COLOR_GRAY2BGR)\n", "        return img\n", "    else:\n", "        return np.flipud(frame)\n", "\n", "\n", "css=\"\"\".my-group {max-width: 500px !important; max-height: 500px !important;}\n", "            .my-column {display: flex !important; justify-content: center !important; align-items: center !important};\"\"\"\n", "\n", "with gr.Blocks(css=css) as demo:\n", "    with gr.Column(elem_classes=[\"my-column\"]):\n", "        with gr.Group(elem_classes=[\"my-group\"]):\n", "            transform = gr.Dropdown(choices=[\"cartoon\", \"edges\", \"flip\"],\n", "                                    value=\"flip\", label=\"Transformation\")\n", "            input_img = gr.Image(sources=[\"webcam\"], type=\"numpy\", streaming=True)\n", "    input_img.stream(transform_cv2, [input_img, transform], [input_img], time_limit=30, stream_every=0.1)\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/streaming_filter_unified/run.py b/demo/streaming_filter_unified/run.py
new file mode 100644
index 0000000000000..fd8ce7956484d
--- /dev/null
+++ b/demo/streaming_filter_unified/run.py
@@ -0,0 +1,48 @@
+import gradio as gr
+import numpy as np
+import cv2
+
+def transform_cv2(frame, transform):
+    if transform == "cartoon":
+        # prepare color
+        img_color = cv2.pyrDown(cv2.pyrDown(frame))
+        for _ in range(6):
+            img_color = cv2.bilateralFilter(img_color, 9, 9, 7)
+        img_color = cv2.pyrUp(cv2.pyrUp(img_color))
+
+        # prepare edges
+        img_edges = cv2.cvtColor(frame, cv2.COLOR_RGB2GRAY)
+        img_edges = cv2.adaptiveThreshold(
+            cv2.medianBlur(img_edges, 7),
+            255,
+            cv2.ADAPTIVE_THRESH_MEAN_C,
+            cv2.THRESH_BINARY,
+            9,
+            2,
+        )
+        img_edges = cv2.cvtColor(img_edges, cv2.COLOR_GRAY2RGB)
+        # combine color and edges
+        img = cv2.bitwise_and(img_color, img_edges)
+        return img
+    elif transform == "edges":
+        # perform edge detection
+        img = cv2.cvtColor(cv2.Canny(frame, 100, 200), cv2.COLOR_GRAY2BGR)
+        return img
+    else:
+        return np.flipud(frame)
+
+
+css=""".my-group {max-width: 500px !important; max-height: 500px !important;}
+            .my-column {display: flex !important; justify-content: center !important; align-items: center !important};"""
+
+with gr.Blocks(css=css) as demo:
+    with gr.Column(elem_classes=["my-column"]):
+        with gr.Group(elem_classes=["my-group"]):
+            transform = gr.Dropdown(choices=["cartoon", "edges", "flip"],
+                                    value="flip", label="Transformation")
+            input_img = gr.Image(sources=["webcam"], type="numpy", streaming=True)
+    input_img.stream(transform_cv2, [input_img, transform], [input_img], time_limit=30, stream_every=0.1)
+
+
+if __name__ == "__main__":
+    demo.launch()
diff --git a/demo/streaming_simple/run.ipynb b/demo/streaming_simple/run.ipynb
new file mode 100644
index 0000000000000..148301ad2c1bc
--- /dev/null
+++ b/demo/streaming_simple/run.ipynb
@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: streaming_simple"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        with gr.Column():\n", "            input_img = gr.Image(label=\"Input\", sources=\"webcam\")\n", "        with gr.Column():\n", "            output_img = gr.Image(label=\"Output\")\n", "        input_img.stream(lambda s: s, input_img, output_img, time_limit=15, stream_every=0.1, concurrency_limit=30)\n", "\n", "if __name__ == \"__main__\":\n", "\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/streaming_simple/run.py b/demo/streaming_simple/run.py
new file mode 100644
index 0000000000000..a08f066c61ef1
--- /dev/null
+++ b/demo/streaming_simple/run.py
@@ -0,0 +1,13 @@
+import gradio as gr
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        with gr.Column():
+            input_img = gr.Image(label="Input", sources="webcam")
+        with gr.Column():
+            output_img = gr.Image(label="Output")
+        input_img.stream(lambda s: s, input_img, output_img, time_limit=15, stream_every=0.1, concurrency_limit=30)
+
+if __name__ == "__main__":
+
+    demo.launch()
diff --git a/demo/sub_block_render/requirements.txt b/demo/sub_block_render/requirements.txt
new file mode 100644
index 0000000000000..7e2fba5e6c5dd
--- /dev/null
+++ b/demo/sub_block_render/requirements.txt
@@ -0,0 +1 @@
+Pillow
diff --git a/demo/sub_block_render/run.ipynb b/demo/sub_block_render/run.ipynb
index 882843c57a9d2..fdc218fb8b907 100644
--- a/demo/sub_block_render/run.ipynb
+++ b/demo/sub_block_render/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: sub_block_render"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/sub_block_render/cheetah.jpg\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/sub_block_render/frog.jpg"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import os\n", "from pathlib import Path\n", "\n", "from PIL import Image\n", "\n", "root = Path(os.path.abspath(''))\n", "\n", "def infer(\n", "    text,\n", "    guidance_scale,\n", "):\n", "\n", "    img = (\n", "        Image.open(root / \"cheetah.jpg\")\n", "        if text == \"Cheetah\"\n", "        else Image.open(root / \"frog.jpg\")\n", "    )\n", "    img = img.resize((224, 224))\n", "\n", "    return ([img, img, img, img], \"image\")\n", "\n", "block = gr.Blocks()\n", "\n", "examples = [\n", "    [\"A serious capybara at work, wearing a suit\", 7],\n", "    [\"A Squirtle fine dining with a view to the London Eye\", 7],\n", "    [\"A tamale food cart in front of a Japanese Castle\", 7],\n", "    [\"a graffiti of a robot serving meals to people\", 7],\n", "    [\"a beautiful cabin in Attersee, Austria, 3d animation style\", 7],\n", "]\n", "\n", "with block as demo:\n", "    with gr.Row(elem_id=\"prompt-container\", equal_height=True):\n", "        text = gr.Textbox(\n", "            label=\"Enter your prompt\",\n", "            show_label=False,\n", "            max_lines=1,\n", "            placeholder=\"Enter your prompt\",\n", "            elem_id=\"prompt-text-input\",\n", "        )\n", "\n", "    gallery = gr.Gallery(\n", "        label=\"Generated images\", show_label=False, elem_id=\"gallery\", rows=2, columns=2\n", "    )\n", "    out_txt = gr.Textbox(\n", "        label=\"Prompt\",\n", "        placeholder=\"Enter a prompt to generate an image\",\n", "        lines=3,\n", "        elem_id=\"prompt-text-input\",\n", "    )\n", "\n", "    guidance_scale = gr.Slider(\n", "        label=\"Guidance Scale\", minimum=0, maximum=50, value=7.5, step=0.1\n", "    )\n", "\n", "    ex = gr.Examples(\n", "        examples=examples,\n", "        fn=infer,\n", "        inputs=[text, guidance_scale],\n", "        outputs=[gallery, out_txt],\n", "        cache_examples=True,\n", "    )\n", "\n", "    text.submit(\n", "        infer,\n", "        inputs=[text, guidance_scale],\n", "        outputs=[gallery, out_txt],\n", "        concurrency_id=\"infer\",\n", "        concurrency_limit=8,\n", "    )\n", "\n", "with gr.Blocks() as demo:\n", "    block.render()\n", "\n", "if __name__ == \"__main__\":\n", "    demo.queue(max_size=10, api_open=False).launch(show_api=False)\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: sub_block_render"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio Pillow "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/sub_block_render/cheetah.jpg\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/sub_block_render/frog.jpg"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import os\n", "from pathlib import Path\n", "\n", "from PIL import Image\n", "\n", "root = Path(os.path.abspath(''))\n", "\n", "def infer(\n", "    text,\n", "    guidance_scale,\n", "):\n", "\n", "    img = (\n", "        Image.open(root / \"cheetah.jpg\")\n", "        if text == \"Cheetah\"\n", "        else Image.open(root / \"frog.jpg\")\n", "    )\n", "    img = img.resize((224, 224))\n", "\n", "    return ([img, img, img, img], \"image\")\n", "\n", "block = gr.Blocks()\n", "\n", "examples = [\n", "    [\"A serious capybara at work, wearing a suit\", 7],\n", "    [\"A Squirtle fine dining with a view to the London Eye\", 7],\n", "    [\"A tamale food cart in front of a Japanese Castle\", 7],\n", "    [\"a graffiti of a robot serving meals to people\", 7],\n", "    [\"a beautiful cabin in Attersee, Austria, 3d animation style\", 7],\n", "]\n", "\n", "with block as demo:\n", "    with gr.Row(elem_id=\"prompt-container\", equal_height=True):\n", "        text = gr.Textbox(\n", "            label=\"Enter your prompt\",\n", "            show_label=False,\n", "            max_lines=1,\n", "            placeholder=\"Enter your prompt\",\n", "            elem_id=\"prompt-text-input\",\n", "        )\n", "\n", "    gallery = gr.Gallery(\n", "        label=\"Generated images\", show_label=False, elem_id=\"gallery\", rows=2, columns=2\n", "    )\n", "    out_txt = gr.Textbox(\n", "        label=\"Prompt\",\n", "        placeholder=\"Enter a prompt to generate an image\",\n", "        lines=3,\n", "        elem_id=\"prompt-text-input\",\n", "    )\n", "\n", "    guidance_scale = gr.Slider(\n", "        label=\"Guidance Scale\", minimum=0, maximum=50, value=7.5, step=0.1\n", "    )\n", "\n", "    ex = gr.Examples(\n", "        examples=examples,\n", "        fn=infer,\n", "        inputs=[text, guidance_scale],\n", "        outputs=[gallery, out_txt],\n", "        cache_examples=True,\n", "    )\n", "\n", "    text.submit(\n", "        infer,\n", "        inputs=[text, guidance_scale],\n", "        outputs=[gallery, out_txt],\n", "        concurrency_id=\"infer\",\n", "        concurrency_limit=8,\n", "    )\n", "\n", "with gr.Blocks() as demo:\n", "    block.render()\n", "\n", "if __name__ == \"__main__\":\n", "    demo.queue(max_size=10, api_open=False).launch(show_api=False)\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/theme_new_step_3/run.ipynb b/demo/theme_new_step_3/run.ipynb
index c4bc7f3b11e45..de3cfa8b8e760 100644
--- a/demo/theme_new_step_3/run.ipynb
+++ b/demo/theme_new_step_3/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: theme_new_step_3"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["from __future__ import annotations\n", "from typing import Iterable\n", "import gradio as gr\n", "from gradio.themes.base import Base\n", "from gradio.themes.utils import colors, fonts, sizes\n", "import time\n", "\n", "class Seafoam(Base):\n", "    def __init__(\n", "        self,\n", "        *,\n", "        primary_hue: colors.Color | str = colors.emerald,\n", "        secondary_hue: colors.Color | str = colors.blue,\n", "        neutral_hue: colors.Color | str = colors.blue,\n", "        spacing_size: sizes.Size | str = sizes.spacing_md,\n", "        radius_size: sizes.Size | str = sizes.radius_md,\n", "        text_size: sizes.Size | str = sizes.text_lg,\n", "        font: fonts.Font\n", "        | str\n", "        | Iterable[fonts.Font | str] = (\n", "            fonts.GoogleFont(\"Quicksand\"),\n", "            \"ui-sans-serif\",\n", "            \"sans-serif\",\n", "        ),\n", "        font_mono: fonts.Font\n", "        | str\n", "        | Iterable[fonts.Font | str] = (\n", "            fonts.GoogleFont(\"IBM Plex Mono\"),\n", "            \"ui-monospace\",\n", "            \"monospace\",\n", "        ),\n", "    ):\n", "        super().__init__(\n", "            primary_hue=primary_hue,\n", "            secondary_hue=secondary_hue,\n", "            neutral_hue=neutral_hue,\n", "            spacing_size=spacing_size,\n", "            radius_size=radius_size,\n", "            text_size=text_size,\n", "            font=font,\n", "            font_mono=font_mono,\n", "        )\n", "        super().set(\n", "            body_background_fill=\"repeating-linear-gradient(45deg, *primary_200, *primary_200 10px, *primary_50 10px, *primary_50 20px)\",\n", "            body_background_fill_dark=\"repeating-linear-gradient(45deg, *primary_800, *primary_800 10px, *primary_900 10px, *primary_900 20px)\",\n", "            button_primary_background_fill=\"linear-gradient(90deg, *primary_300, *secondary_400)\",\n", "            button_primary_background_fill_hover=\"linear-gradient(90deg, *primary_200, *secondary_300)\",\n", "            button_primary_text_color=\"white\",\n", "            button_primary_background_fill_dark=\"linear-gradient(90deg, *primary_600, *secondary_800)\",\n", "            slider_color=\"*secondary_300\",\n", "            slider_color_dark=\"*secondary_600\",\n", "            block_title_text_weight=\"600\",\n", "            block_border_width=\"3px\",\n", "            block_shadow=\"*shadow_drop_lg\",\n", "            button_shadow=\"*shadow_drop_lg\",\n", "            button_large_padding=\"32px\",\n", "        )\n", "\n", "seafoam = Seafoam()\n", "\n", "with gr.Blocks(theme=seafoam) as demo:\n", "    textbox = gr.Textbox(label=\"Name\")\n", "    slider = gr.Slider(label=\"Count\", minimum=0, maximum=100, step=1)\n", "    with gr.Row():\n", "        button = gr.Button(\"Submit\", variant=\"primary\")\n", "        clear = gr.Button(\"Clear\")\n", "    output = gr.Textbox(label=\"Output\")\n", "\n", "    def repeat(name, count):\n", "        time.sleep(3)\n", "        return name * count\n", "\n", "    button.click(repeat, [textbox, slider], output)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: theme_new_step_3"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["from __future__ import annotations\n", "from typing import Iterable\n", "import gradio as gr\n", "from gradio.themes.base import Base\n", "from gradio.themes.utils import colors, fonts, sizes\n", "import time\n", "\n", "class Seafoam(Base):\n", "    def __init__(\n", "        self,\n", "        *,\n", "        primary_hue: colors.Color | str = colors.emerald,\n", "        secondary_hue: colors.Color | str = colors.blue,\n", "        neutral_hue: colors.Color | str = colors.blue,\n", "        spacing_size: sizes.Size | str = sizes.spacing_md,\n", "        radius_size: sizes.Size | str = sizes.radius_md,\n", "        text_size: sizes.Size | str = sizes.text_lg,\n", "        font: fonts.Font\n", "        | str\n", "        | Iterable[fonts.Font | str] = (\n", "            fonts.GoogleFont(\"Quicksand\"),\n", "            \"ui-sans-serif\",\n", "            \"sans-serif\",\n", "        ),\n", "        font_mono: fonts.Font\n", "        | str\n", "        | Iterable[fonts.Font | str] = (\n", "            fonts.GoogleFont(\"IBM Plex Mono\"),\n", "            \"ui-monospace\",\n", "            \"monospace\",\n", "        ),\n", "    ):\n", "        super().__init__(\n", "            primary_hue=primary_hue,\n", "            secondary_hue=secondary_hue,\n", "            neutral_hue=neutral_hue,\n", "            spacing_size=spacing_size,\n", "            radius_size=radius_size,\n", "            text_size=text_size,\n", "            font=font,\n", "            font_mono=font_mono,\n", "        )\n", "        super().set(\n", "            body_background_fill=\"repeating-linear-gradient(45deg, *primary_200, *primary_200 10px, *primary_50 10px, *primary_50 20px)\",\n", "            body_background_fill_dark=\"repeating-linear-gradient(45deg, *primary_800, *primary_800 10px, *primary_900 10px, *primary_900 20px)\",\n", "            button_primary_background_fill=\"linear-gradient(90deg, *primary_300, *secondary_400)\",\n", "            button_primary_background_fill_hover=\"linear-gradient(90deg, *primary_200, *secondary_300)\",\n", "            button_primary_text_color=\"white\",\n", "            button_primary_background_fill_dark=\"linear-gradient(90deg, *primary_600, *secondary_800)\",\n", "            slider_color=\"*secondary_300\",\n", "            slider_color_dark=\"*secondary_600\",\n", "            block_title_text_weight=\"600\",\n", "            block_border_width=\"3px\",\n", "            block_shadow=\"*shadow_drop_lg\",\n", "            button_primary_shadow=\"*shadow_drop_lg\",\n", "            button_large_padding=\"32px\",\n", "        )\n", "\n", "seafoam = Seafoam()\n", "\n", "with gr.Blocks(theme=seafoam) as demo:\n", "    textbox = gr.Textbox(label=\"Name\")\n", "    slider = gr.Slider(label=\"Count\", minimum=0, maximum=100, step=1)\n", "    with gr.Row():\n", "        button = gr.Button(\"Submit\", variant=\"primary\")\n", "        clear = gr.Button(\"Clear\")\n", "    output = gr.Textbox(label=\"Output\")\n", "\n", "    def repeat(name, count):\n", "        time.sleep(3)\n", "        return name * count\n", "\n", "    button.click(repeat, [textbox, slider], output)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/theme_new_step_3/run.py b/demo/theme_new_step_3/run.py
index f76013feeb5f5..34a2917a7394e 100644
--- a/demo/theme_new_step_3/run.py
+++ b/demo/theme_new_step_3/run.py
@@ -52,7 +52,7 @@ def __init__(
             block_title_text_weight="600",
             block_border_width="3px",
             block_shadow="*shadow_drop_lg",
-            button_shadow="*shadow_drop_lg",
+            button_primary_shadow="*shadow_drop_lg",
             button_large_padding="32px",
         )
 
diff --git a/demo/unispeech-speaker-verification/run.ipynb b/demo/unispeech-speaker-verification/run.ipynb
index bcd1ce85cedc1..927b1ed0b2de5 100644
--- a/demo/unispeech-speaker-verification/run.ipynb
+++ b/demo/unispeech-speaker-verification/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: unispeech-speaker-verification"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio git+https://github.com/huggingface/transformers torchaudio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('samples')\n", "!wget -q -O samples/cate_blanch.mp3 https://github.com/gradio-app/gradio/raw/main/demo/unispeech-speaker-verification/samples/cate_blanch.mp3\n", "!wget -q -O samples/cate_blanch_2.mp3 https://github.com/gradio-app/gradio/raw/main/demo/unispeech-speaker-verification/samples/cate_blanch_2.mp3\n", "!wget -q -O samples/cate_blanch_3.mp3 https://github.com/gradio-app/gradio/raw/main/demo/unispeech-speaker-verification/samples/cate_blanch_3.mp3\n", "!wget -q -O samples/heath_ledger.mp3 https://github.com/gradio-app/gradio/raw/main/demo/unispeech-speaker-verification/samples/heath_ledger.mp3\n", "!wget -q -O samples/heath_ledger_2.mp3 https://github.com/gradio-app/gradio/raw/main/demo/unispeech-speaker-verification/samples/heath_ledger_2.mp3\n", "!wget -q -O samples/kirsten_dunst.wav https://github.com/gradio-app/gradio/raw/main/demo/unispeech-speaker-verification/samples/kirsten_dunst.wav"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import torch\n", "from torchaudio.sox_effects import apply_effects_file\n", "from transformers import AutoFeatureExtractor, AutoModelForAudioXVector\n", "\n", "device = torch.device(\"cuda\" if torch.cuda.is_available() else \"cpu\")\n", "\n", "STYLE = \"\"\"\n", "<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css\" integrity=\"sha256-YvdLHPgkqJ8DVUxjjnGVlMMJtNimJ6dYkowFFvp4kKs=\" crossorigin=\"anonymous\">\n", "\"\"\"\n", "OUTPUT_OK = (\n", "    STYLE\n", "    + \"\"\"\n", "    <div class=\"container\">\n", "        <div class=\"row\"><h1 style=\"text-align: center\">The speakers are</h1></div>\n", "        <div class=\"row\"><h1 class=\"display-1 text-success\" style=\"text-align: center\">{:.1f}%</h1></div>\n", "        <div class=\"row\"><h1 style=\"text-align: center\">similar</h1></div>\n", "        <div class=\"row\"><h1 class=\"text-success\" style=\"text-align: center\">Welcome, human!</h1></div>\n", "        <div class=\"row\"><small style=\"text-align: center\">(You must get at least 85% to be considered the same person)</small><div class=\"row\">\n", "    </div>\n", "\"\"\"\n", ")\n", "OUTPUT_FAIL = (\n", "    STYLE\n", "    + \"\"\"\n", "    <div class=\"container\">\n", "        <div class=\"row\"><h1 style=\"text-align: center\">The speakers are</h1></div>\n", "        <div class=\"row\"><h1 class=\"display-1 text-danger\" style=\"text-align: center\">{:.1f}%</h1></div>\n", "        <div class=\"row\"><h1 style=\"text-align: center\">similar</h1></div>\n", "        <div class=\"row\"><h1 class=\"text-danger\" style=\"text-align: center\">You shall not pass!</h1></div>\n", "        <div class=\"row\"><small style=\"text-align: center\">(You must get at least 85% to be considered the same person)</small><div class=\"row\">\n", "    </div>\n", "\"\"\"\n", ")\n", "\n", "EFFECTS = [\n", "    [\"remix\", \"-\"],\n", "    [\"channels\", \"1\"],\n", "    [\"rate\", \"16000\"],\n", "    [\"gain\", \"-1.0\"],\n", "    [\"silence\", \"1\", \"0.1\", \"0.1%\", \"-1\", \"0.1\", \"0.1%\"],\n", "    [\"trim\", \"0\", \"10\"],\n", "]\n", "\n", "THRESHOLD = 0.85\n", "\n", "model_name = \"microsoft/unispeech-sat-base-plus-sv\"\n", "feature_extractor = AutoFeatureExtractor.from_pretrained(model_name)\n", "model = AutoModelForAudioXVector.from_pretrained(model_name).to(device)\n", "cosine_sim = torch.nn.CosineSimilarity(dim=-1)\n", "\n", "def similarity_fn(path1, path2):\n", "    if not (path1 and path2):\n", "        return '<b style=\"color:red\">ERROR: Please record audio for *both* speakers!</b>'\n", "    wav1, _ = apply_effects_file(path1, EFFECTS)\n", "    wav2, _ = apply_effects_file(path2, EFFECTS)\n", "    print(wav1.shape, wav2.shape)\n", "\n", "    input1 = feature_extractor(wav1.squeeze(0), return_tensors=\"pt\", sampling_rate=16000).input_values.to(device)\n", "    input2 = feature_extractor(wav2.squeeze(0), return_tensors=\"pt\", sampling_rate=16000).input_values.to(device)\n", "\n", "    with torch.no_grad():\n", "        emb1 = model(input1).embeddings\n", "        emb2 = model(input2).embeddings\n", "    emb1 = torch.nn.functional.normalize(emb1, dim=-1).cpu()\n", "    emb2 = torch.nn.functional.normalize(emb2, dim=-1).cpu()\n", "    similarity = cosine_sim(emb1, emb2).numpy()[0]\n", "\n", "    if similarity >= THRESHOLD:\n", "        output = OUTPUT_OK.format(similarity * 100)\n", "    else:\n", "        output = OUTPUT_FAIL.format(similarity * 100)\n", "\n", "    return output\n", "\n", "inputs = [\n", "    gr.Audio(sources=[\"microphone\"], type=\"filepath\", label=\"Speaker #1\"),\n", "    gr.Audio(sources=[\"microphone\"], type=\"filepath\", label=\"Speaker #2\"),\n", "]\n", "output = gr.HTML(label=\"\")\n", "\n", "description = (\n", "    \"This demo will compare two speech samples and determine if they are from the same speaker. \"\n", "    \"Try it with your own voice!\"\n", ")\n", "article = (\n", "    \"<p style='text-align: center'>\"\n", "    \"<a href='https://huggingface.co/microsoft/unispeech-sat-large-sv' target='_blank'>\ud83c\udf99\ufe0f Learn more about UniSpeech-SAT</a> | \"\n", "    \"<a href='https://arxiv.org/abs/2110.05752' target='_blank'>\ud83d\udcda UniSpeech-SAT paper</a> | \"\n", "    \"<a href='https://www.danielpovey.com/files/2018_icassp_xvectors.pdf' target='_blank'>\ud83d\udcda X-Vector paper</a>\"\n", "    \"</p>\"\n", ")\n", "examples = [\n", "    [\"samples/cate_blanch.mp3\", \"samples/cate_blanch_2.mp3\"],\n", "    [\"samples/cate_blanch.mp3\", \"samples/cate_blanch_3.mp3\"],\n", "    [\"samples/cate_blanch_2.mp3\", \"samples/cate_blanch_3.mp3\"],\n", "    [\"samples/heath_ledger.mp3\", \"samples/heath_ledger_2.mp3\"],\n", "    [\"samples/cate_blanch.mp3\", \"samples/kirsten_dunst.wav\"],\n", "]\n", "\n", "demo = gr.Interface(\n", "    fn=similarity_fn,\n", "    inputs=inputs,\n", "    outputs=output,\n", "    title=\"Voice Authentication with UniSpeech-SAT + X-Vectors\",\n", "    description=description,\n", "    article=article,\n", "    allow_flagging=\"never\",\n", "    live=False,\n", "    examples=examples,\n", ")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n", "\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: unispeech-speaker-verification"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio git+https://github.com/huggingface/transformers torchaudio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('samples')\n", "!wget -q -O samples/cate_blanch.mp3 https://github.com/gradio-app/gradio/raw/main/demo/unispeech-speaker-verification/samples/cate_blanch.mp3\n", "!wget -q -O samples/cate_blanch_2.mp3 https://github.com/gradio-app/gradio/raw/main/demo/unispeech-speaker-verification/samples/cate_blanch_2.mp3\n", "!wget -q -O samples/cate_blanch_3.mp3 https://github.com/gradio-app/gradio/raw/main/demo/unispeech-speaker-verification/samples/cate_blanch_3.mp3\n", "!wget -q -O samples/heath_ledger.mp3 https://github.com/gradio-app/gradio/raw/main/demo/unispeech-speaker-verification/samples/heath_ledger.mp3\n", "!wget -q -O samples/heath_ledger_2.mp3 https://github.com/gradio-app/gradio/raw/main/demo/unispeech-speaker-verification/samples/heath_ledger_2.mp3\n", "!wget -q -O samples/kirsten_dunst.wav https://github.com/gradio-app/gradio/raw/main/demo/unispeech-speaker-verification/samples/kirsten_dunst.wav"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import torch\n", "from torchaudio.sox_effects import apply_effects_file\n", "from transformers import AutoFeatureExtractor, AutoModelForAudioXVector\n", "\n", "device = torch.device(\"cuda\" if torch.cuda.is_available() else \"cpu\")\n", "\n", "STYLE = \"\"\"\n", "<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css\" integrity=\"sha256-YvdLHPgkqJ8DVUxjjnGVlMMJtNimJ6dYkowFFvp4kKs=\" crossorigin=\"anonymous\">\n", "\"\"\"\n", "OUTPUT_OK = (\n", "    STYLE\n", "    + \"\"\"\n", "    <div class=\"container\">\n", "        <div class=\"row\"><h1 style=\"text-align: center\">The speakers are</h1></div>\n", "        <div class=\"row\"><h1 class=\"display-1 text-success\" style=\"text-align: center\">{:.1f}%</h1></div>\n", "        <div class=\"row\"><h1 style=\"text-align: center\">similar</h1></div>\n", "        <div class=\"row\"><h1 class=\"text-success\" style=\"text-align: center\">Welcome, human!</h1></div>\n", "        <div class=\"row\"><small style=\"text-align: center\">(You must get at least 85% to be considered the same person)</small><div class=\"row\">\n", "    </div>\n", "\"\"\"\n", ")\n", "OUTPUT_FAIL = (\n", "    STYLE\n", "    + \"\"\"\n", "    <div class=\"container\">\n", "        <div class=\"row\"><h1 style=\"text-align: center\">The speakers are</h1></div>\n", "        <div class=\"row\"><h1 class=\"display-1 text-danger\" style=\"text-align: center\">{:.1f}%</h1></div>\n", "        <div class=\"row\"><h1 style=\"text-align: center\">similar</h1></div>\n", "        <div class=\"row\"><h1 class=\"text-danger\" style=\"text-align: center\">You shall not pass!</h1></div>\n", "        <div class=\"row\"><small style=\"text-align: center\">(You must get at least 85% to be considered the same person)</small><div class=\"row\">\n", "    </div>\n", "\"\"\"\n", ")\n", "\n", "EFFECTS = [\n", "    [\"remix\", \"-\"],\n", "    [\"channels\", \"1\"],\n", "    [\"rate\", \"16000\"],\n", "    [\"gain\", \"-1.0\"],\n", "    [\"silence\", \"1\", \"0.1\", \"0.1%\", \"-1\", \"0.1\", \"0.1%\"],\n", "    [\"trim\", \"0\", \"10\"],\n", "]\n", "\n", "THRESHOLD = 0.85\n", "\n", "model_name = \"microsoft/unispeech-sat-base-plus-sv\"\n", "feature_extractor = AutoFeatureExtractor.from_pretrained(model_name)\n", "model = AutoModelForAudioXVector.from_pretrained(model_name).to(device)\n", "cosine_sim = torch.nn.CosineSimilarity(dim=-1)\n", "\n", "def similarity_fn(path1, path2):\n", "    if not (path1 and path2):\n", "        return '<b style=\"color:red\">ERROR: Please record audio for *both* speakers!</b>'\n", "    wav1, _ = apply_effects_file(path1, EFFECTS)\n", "    wav2, _ = apply_effects_file(path2, EFFECTS)\n", "    print(wav1.shape, wav2.shape)\n", "\n", "    input1 = feature_extractor(wav1.squeeze(0), return_tensors=\"pt\", sampling_rate=16000).input_values.to(device)\n", "    input2 = feature_extractor(wav2.squeeze(0), return_tensors=\"pt\", sampling_rate=16000).input_values.to(device)\n", "\n", "    with torch.no_grad():\n", "        emb1 = model(input1).embeddings\n", "        emb2 = model(input2).embeddings\n", "    emb1 = torch.nn.functional.normalize(emb1, dim=-1).cpu()\n", "    emb2 = torch.nn.functional.normalize(emb2, dim=-1).cpu()\n", "    similarity = cosine_sim(emb1, emb2).numpy()[0]\n", "\n", "    if similarity >= THRESHOLD:\n", "        output = OUTPUT_OK.format(similarity * 100)\n", "    else:\n", "        output = OUTPUT_FAIL.format(similarity * 100)\n", "\n", "    return output\n", "\n", "inputs = [\n", "    gr.Audio(sources=[\"microphone\"], type=\"filepath\", label=\"Speaker #1\"),\n", "    gr.Audio(sources=[\"microphone\"], type=\"filepath\", label=\"Speaker #2\"),\n", "]\n", "output = gr.HTML(label=\"\")\n", "\n", "description = (\n", "    \"This demo will compare two speech samples and determine if they are from the same speaker. \"\n", "    \"Try it with your own voice!\"\n", ")\n", "article = (\n", "    \"<p style='text-align: center'>\"\n", "    \"<a href='https://huggingface.co/microsoft/unispeech-sat-large-sv' target='_blank'>\ud83c\udf99\ufe0f Learn more about UniSpeech-SAT</a> | \"\n", "    \"<a href='https://arxiv.org/abs/2110.05752' target='_blank'>\ud83d\udcda UniSpeech-SAT paper</a> | \"\n", "    \"<a href='https://www.danielpovey.com/files/2018_icassp_xvectors.pdf' target='_blank'>\ud83d\udcda X-Vector paper</a>\"\n", "    \"</p>\"\n", ")\n", "examples = [\n", "    [\"samples/cate_blanch.mp3\", \"samples/cate_blanch_2.mp3\"],\n", "    [\"samples/cate_blanch.mp3\", \"samples/cate_blanch_3.mp3\"],\n", "    [\"samples/cate_blanch_2.mp3\", \"samples/cate_blanch_3.mp3\"],\n", "    [\"samples/heath_ledger.mp3\", \"samples/heath_ledger_2.mp3\"],\n", "    [\"samples/cate_blanch.mp3\", \"samples/kirsten_dunst.wav\"],\n", "]\n", "\n", "demo = gr.Interface(\n", "    fn=similarity_fn,\n", "    inputs=inputs,\n", "    outputs=output,\n", "    title=\"Voice Authentication with UniSpeech-SAT + X-Vectors\",\n", "    description=description,\n", "    article=article,\n", "    flagging_mode=\"never\",\n", "    live=False,\n", "    examples=examples,\n", ")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n", "\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/unispeech-speaker-verification/run.py b/demo/unispeech-speaker-verification/run.py
index 9adafcba4e868..408f518bc0e63 100644
--- a/demo/unispeech-speaker-verification/run.py
+++ b/demo/unispeech-speaker-verification/run.py
@@ -105,7 +105,7 @@ def similarity_fn(path1, path2):
     title="Voice Authentication with UniSpeech-SAT + X-Vectors",
     description=description,
     article=article,
-    allow_flagging="never",
+    flagging_mode="never",
     live=False,
     examples=examples,
 )
diff --git a/demo/waveform/run.ipynb b/demo/waveform/run.ipynb
deleted file mode 100644
index 7462af3f2cc8b..0000000000000
--- a/demo/waveform/run.ipynb
+++ /dev/null
@@ -1 +0,0 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: waveform"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import random\n", "\n", "COLORS = [\n", "    [\"#ff0000\", \"#00ff00\"],\n", "    [\"#00ff00\", \"#0000ff\"],\n", "    [\"#0000ff\", \"#ff0000\"],\n", "]\n", "\n", "def audio_waveform(audio, image):\n", "    return (\n", "        audio,\n", "        gr.make_waveform(audio),\n", "        gr.make_waveform(audio, animate=True),\n", "        gr.make_waveform(audio, bg_image=image, bars_color=str(random.choice(COLORS))),\n", "    )\n", "\n", "gr.Interface(\n", "    audio_waveform,\n", "    inputs=[gr.Audio(), gr.Image(type=\"filepath\")],\n", "    outputs=[\n", "        gr.Audio(),\n", "        gr.Video(),\n", "        gr.Video(),\n", "        gr.Video(),\n", "    ],\n", ").launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/waveform/run.py b/demo/waveform/run.py
deleted file mode 100644
index 2292f8ad2dae2..0000000000000
--- a/demo/waveform/run.py
+++ /dev/null
@@ -1,27 +0,0 @@
-import gradio as gr
-import random
-
-COLORS = [
-    ["#ff0000", "#00ff00"],
-    ["#00ff00", "#0000ff"],
-    ["#0000ff", "#ff0000"],
-]
-
-def audio_waveform(audio, image):
-    return (
-        audio,
-        gr.make_waveform(audio),
-        gr.make_waveform(audio, animate=True),
-        gr.make_waveform(audio, bg_image=image, bars_color=str(random.choice(COLORS))),
-    )
-
-gr.Interface(
-    audio_waveform,
-    inputs=[gr.Audio(), gr.Image(type="filepath")],
-    outputs=[
-        gr.Audio(),
-        gr.Video(),
-        gr.Video(),
-        gr.Video(),
-    ],
-).launch()
diff --git a/demo/yolov10_webcam_stream/inference.py b/demo/yolov10_webcam_stream/inference.py
new file mode 100644
index 0000000000000..2827cfece44da
--- /dev/null
+++ b/demo/yolov10_webcam_stream/inference.py
@@ -0,0 +1,148 @@
+import time
+import cv2
+import numpy as np
+import onnxruntime  # type: ignore
+
+from utils import draw_detections  # type: ignore
+
+
+class YOLOv10:
+    def __init__(self, path):
+        # Initialize model
+        self.initialize_model(path)
+
+    def __call__(self, image):
+        return self.detect_objects(image)
+
+    def initialize_model(self, path):
+        self.session = onnxruntime.InferenceSession(
+            path, providers=onnxruntime.get_available_providers()
+        )
+        # Get model info
+        self.get_input_details()
+        self.get_output_details()
+
+    def detect_objects(self, image, conf_threshold=0.3):
+        input_tensor = self.prepare_input(image)
+
+        # Perform inference on the image
+        new_image = self.inference(image, input_tensor, conf_threshold)
+
+        return new_image
+
+    def prepare_input(self, image):
+        self.img_height, self.img_width = image.shape[:2]
+
+        input_img = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
+
+        # Resize input image
+        input_img = cv2.resize(input_img, (self.input_width, self.input_height))
+
+        # Scale input pixel values to 0 to 1
+        input_img = input_img / 255.0
+        input_img = input_img.transpose(2, 0, 1)
+        input_tensor = input_img[np.newaxis, :, :, :].astype(np.float32)
+
+        return input_tensor
+
+    def inference(self, image, input_tensor, conf_threshold=0.3):
+        start = time.perf_counter()
+        outputs = self.session.run(
+            self.output_names, {self.input_names[0]: input_tensor}
+        )
+
+        print(f"Inference time: {(time.perf_counter() - start)*1000:.2f} ms")
+        (
+            boxes,
+            scores,
+            class_ids,
+        ) = self.process_output(outputs, conf_threshold)
+        return self.draw_detections(image, boxes, scores, class_ids)
+
+    def process_output(self, output, conf_threshold=0.3):
+        predictions = np.squeeze(output[0])
+
+        # Filter out object confidence scores below threshold
+        scores = predictions[:, 4]
+        predictions = predictions[scores > conf_threshold, :]
+        scores = scores[scores > conf_threshold]
+
+        if len(scores) == 0:
+            return [], [], []
+
+        # Get the class with the highest confidence
+        class_ids = predictions[:, 5].astype(int)
+
+        # Get bounding boxes for each object
+        boxes = self.extract_boxes(predictions)
+
+        return boxes, scores, class_ids
+
+    def extract_boxes(self, predictions):
+        # Extract boxes from predictions
+        boxes = predictions[:, :4]
+
+        # Scale boxes to original image dimensions
+        boxes = self.rescale_boxes(boxes)
+
+        # Convert boxes to xyxy format
+        # boxes = xywh2xyxy(boxes)
+
+        return boxes
+
+    def rescale_boxes(self, boxes):
+        # Rescale boxes to original image dimensions
+        input_shape = np.array(
+            [self.input_width, self.input_height, self.input_width, self.input_height]
+        )
+        boxes = np.divide(boxes, input_shape, dtype=np.float32)
+        boxes *= np.array(
+            [self.img_width, self.img_height, self.img_width, self.img_height]
+        )
+        return boxes
+
+    def draw_detections(
+        self, image, boxes, scores, class_ids, draw_scores=True, mask_alpha=0.4
+    ):
+        return draw_detections(image, boxes, scores, class_ids, mask_alpha)
+
+    def get_input_details(self):
+        model_inputs = self.session.get_inputs()
+        self.input_names = [model_inputs[i].name for i in range(len(model_inputs))]
+
+        self.input_shape = model_inputs[0].shape
+        self.input_height = self.input_shape[2]
+        self.input_width = self.input_shape[3]
+
+    def get_output_details(self):
+        model_outputs = self.session.get_outputs()
+        self.output_names = [model_outputs[i].name for i in range(len(model_outputs))]
+
+
+if __name__ == "__main__":
+    import requests
+    import tempfile
+    from huggingface_hub import hf_hub_download
+
+    model_file = hf_hub_download(
+        repo_id="onnx-community/yolov10s", filename="onnx/model.onnx"
+    )
+
+    yolov8_detector = YOLOv10(model_file)
+
+    with tempfile.NamedTemporaryFile(suffix=".jpg", delete=False) as f:
+        f.write(
+            requests.get(
+                "https://live.staticflickr.com/13/19041780_d6fd803de0_3k.jpg"
+            ).content
+        )
+        f.seek(0)
+        img = cv2.imread(f.name)
+
+    # # Detect Objects
+    combined_image = yolov8_detector.detect_objects(img)
+
+    # Draw detections
+    cv2.namedWindow("Output", cv2.WINDOW_NORMAL)
+    cv2.imshow("Output", combined_image)
+    cv2.waitKey(0)
diff --git a/demo/yolov10_webcam_stream/requirements.txt b/demo/yolov10_webcam_stream/requirements.txt
new file mode 100644
index 0000000000000..9766bb4676a1a
--- /dev/null
+++ b/demo/yolov10_webcam_stream/requirements.txt
@@ -0,0 +1,6 @@
+safetensors==0.4.3
+opencv-python
+twilio
+gradio>=5.0,<6.0
+gradio-webrtc==0.0.1
+onnxruntime-gpu
\ No newline at end of file
diff --git a/demo/yolov10_webcam_stream/run.ipynb b/demo/yolov10_webcam_stream/run.ipynb
new file mode 100644
index 0000000000000..43759190962ee
--- /dev/null
+++ b/demo/yolov10_webcam_stream/run.ipynb
@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: yolov10_webcam_stream"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio safetensors==0.4.3 opencv-python twilio gradio>=5.0,<6.0 gradio-webrtc==0.0.1 onnxruntime-gpu"]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/yolov10_webcam_stream/inference.py\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/yolov10_webcam_stream/utils.py"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import cv2\n", "from huggingface_hub import hf_hub_download\n", "from gradio_webrtc import WebRTC  # type: ignore\n", "from twilio.rest import Client  # type: ignore\n", "import os\n", "from inference import YOLOv10  # type: ignore\n", "\n", "model_file = hf_hub_download(\n", "    repo_id=\"onnx-community/yolov10n\", filename=\"onnx/model.onnx\"\n", ")\n", "\n", "model = YOLOv10(model_file)\n", "\n", "account_sid = os.environ.get(\"TWILIO_ACCOUNT_SID\")\n", "auth_token = os.environ.get(\"TWILIO_AUTH_TOKEN\")\n", "\n", "if account_sid and auth_token:\n", "    client = Client(account_sid, auth_token)\n", "\n", "    token = client.tokens.create()\n", "\n", "    rtc_configuration = {\n", "        \"iceServers\": token.ice_servers,\n", "        \"iceTransportPolicy\": \"relay\",\n", "    }\n", "else:\n", "    rtc_configuration = None\n", "\n", "\n", "def detection(image, conf_threshold=0.3):\n", "    image = cv2.resize(image, (model.input_width, model.input_height))\n", "    new_image = model.detect_objects(image, conf_threshold)\n", "    return cv2.resize(new_image, (500, 500))\n", "\n", "\n", "css = \"\"\".my-group {max-width: 600px !important; max-height: 600 !important;}\n", "                      .my-column {display: flex !important; justify-content: center !important; align-items: center !important};\"\"\"\n", "\n", "\n", "with gr.Blocks(css=css) as demo:\n", "    gr.HTML(\n", "        \"\"\"\n", "    <h1 style='text-align: center'>\n", "    YOLOv10 Webcam Stream (Powered by WebRTC \u26a1\ufe0f)\n", "    </h1>\n", "    \"\"\"\n", "    )\n", "    gr.HTML(\n", "        \"\"\"\n", "        <h3 style='text-align: center'>\n", "        <a href='https://arxiv.org/abs/2405.14458' target='_blank'>arXiv</a> | <a href='https://github.com/THU-MIG/yolov10' target='_blank'>github</a>\n", "        </h3>\n", "        \"\"\"\n", "    )\n", "    with gr.Column(elem_classes=[\"my-column\"]):\n", "        with gr.Group(elem_classes=[\"my-group\"]):\n", "            image = WebRTC(label=\"Stream\", rtc_configuration=rtc_configuration)\n", "            conf_threshold = gr.Slider(\n", "                label=\"Confidence Threshold\",\n", "                minimum=0.0,\n", "                maximum=1.0,\n", "                step=0.05,\n", "                value=0.30,\n", "            )\n", "\n", "        image.stream(\n", "            fn=detection, inputs=[image, conf_threshold], outputs=[image], time_limit=10\n", "        )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/yolov10_webcam_stream/run.py b/demo/yolov10_webcam_stream/run.py
new file mode 100644
index 0000000000000..8080322605e91
--- /dev/null
+++ b/demo/yolov10_webcam_stream/run.py
@@ -0,0 +1,72 @@
+import gradio as gr
+import cv2
+from huggingface_hub import hf_hub_download
+from gradio_webrtc import WebRTC  # type: ignore
+from twilio.rest import Client  # type: ignore
+import os
+from inference import YOLOv10  # type: ignore
+
+model_file = hf_hub_download(
+    repo_id="onnx-community/yolov10n", filename="onnx/model.onnx"
+)
+
+model = YOLOv10(model_file)
+
+account_sid = os.environ.get("TWILIO_ACCOUNT_SID")
+auth_token = os.environ.get("TWILIO_AUTH_TOKEN")
+
+if account_sid and auth_token:
+    client = Client(account_sid, auth_token)
+
+    token = client.tokens.create()
+
+    rtc_configuration = {
+        "iceServers": token.ice_servers,
+        "iceTransportPolicy": "relay",
+    }
+else:
+    rtc_configuration = None
+
+
+def detection(image, conf_threshold=0.3):
+    image = cv2.resize(image, (model.input_width, model.input_height))
+    new_image = model.detect_objects(image, conf_threshold)
+    return cv2.resize(new_image, (500, 500))
+
+
+css = """.my-group {max-width: 600px !important; max-height: 600 !important;}
+                      .my-column {display: flex !important; justify-content: center !important; align-items: center !important};"""
+
+
+with gr.Blocks(css=css) as demo:
+    gr.HTML(
+        """
+    <h1 style='text-align: center'>
+    YOLOv10 Webcam Stream (Powered by WebRTC ⚡️)
+    </h1>
+    """
+    )
+    gr.HTML(
+        """
+        <h3 style='text-align: center'>
+        <a href='https://arxiv.org/abs/2405.14458' target='_blank'>arXiv</a> | <a href='https://github.com/THU-MIG/yolov10' target='_blank'>github</a>
+        </h3>
+        """
+    )
+    with gr.Column(elem_classes=["my-column"]):
+        with gr.Group(elem_classes=["my-group"]):
+            image = WebRTC(label="Stream", rtc_configuration=rtc_configuration)
+            conf_threshold = gr.Slider(
+                label="Confidence Threshold",
+                minimum=0.0,
+                maximum=1.0,
+                step=0.05,
+                value=0.30,
+            )
+
+        image.stream(
+            fn=detection, inputs=[image, conf_threshold], outputs=[image], time_limit=10
+        )
+
+if __name__ == "__main__":
+    demo.launch()
diff --git a/demo/yolov10_webcam_stream/utils.py b/demo/yolov10_webcam_stream/utils.py
new file mode 100644
index 0000000000000..281656746abce
--- /dev/null
+++ b/demo/yolov10_webcam_stream/utils.py
@@ -0,0 +1,237 @@
+import numpy as np
+import cv2
+
+class_names = [
+    "person",
+    "bicycle",
+    "car",
+    "motorcycle",
+    "airplane",
+    "bus",
+    "train",
+    "truck",
+    "boat",
+    "traffic light",
+    "fire hydrant",
+    "stop sign",
+    "parking meter",
+    "bench",
+    "bird",
+    "cat",
+    "dog",
+    "horse",
+    "sheep",
+    "cow",
+    "elephant",
+    "bear",
+    "zebra",
+    "giraffe",
+    "backpack",
+    "umbrella",
+    "handbag",
+    "tie",
+    "suitcase",
+    "frisbee",
+    "skis",
+    "snowboard",
+    "sports ball",
+    "kite",
+    "baseball bat",
+    "baseball glove",
+    "skateboard",
+    "surfboard",
+    "tennis racket",
+    "bottle",
+    "wine glass",
+    "cup",
+    "fork",
+    "knife",
+    "spoon",
+    "bowl",
+    "banana",
+    "apple",
+    "sandwich",
+    "orange",
+    "broccoli",
+    "carrot",
+    "hot dog",
+    "pizza",
+    "donut",
+    "cake",
+    "chair",
+    "couch",
+    "potted plant",
+    "bed",
+    "dining table",
+    "toilet",
+    "tv",
+    "laptop",
+    "mouse",
+    "remote",
+    "keyboard",
+    "cell phone",
+    "microwave",
+    "oven",
+    "toaster",
+    "sink",
+    "refrigerator",
+    "book",
+    "clock",
+    "vase",
+    "scissors",
+    "teddy bear",
+    "hair drier",
+    "toothbrush",
+]
+
+# Create a list of colors for each class where each color is a tuple of 3 integer values
+rng = np.random.default_rng(3)
+colors = rng.uniform(0, 255, size=(len(class_names), 3))
+
+
+def nms(boxes, scores, iou_threshold):
+    # Sort by score
+    sorted_indices = np.argsort(scores)[::-1]
+
+    keep_boxes = []
+    while sorted_indices.size > 0:
+        # Pick the last box
+        box_id = sorted_indices[0]
+        keep_boxes.append(box_id)
+
+        # Compute IoU of the picked box with the rest
+        ious = compute_iou(boxes[box_id, :], boxes[sorted_indices[1:], :])
+
+        # Remove boxes with IoU over the threshold
+        keep_indices = np.where(ious < iou_threshold)[0]
+
+        # print(keep_indices.shape, sorted_indices.shape)
+        sorted_indices = sorted_indices[keep_indices + 1]
+
+    return keep_boxes
+
+
+def multiclass_nms(boxes, scores, class_ids, iou_threshold):
+    unique_class_ids = np.unique(class_ids)
+
+    keep_boxes = []
+    for class_id in unique_class_ids:
+        class_indices = np.where(class_ids == class_id)[0]
+        class_boxes = boxes[class_indices, :]
+        class_scores = scores[class_indices]
+
+        class_keep_boxes = nms(class_boxes, class_scores, iou_threshold)
+        keep_boxes.extend(class_indices[class_keep_boxes])
+
+    return keep_boxes
+
+
+def compute_iou(box, boxes):
+    # Compute xmin, ymin, xmax, ymax for both boxes
+    xmin = np.maximum(box[0], boxes[:, 0])
+    ymin = np.maximum(box[1], boxes[:, 1])
+    xmax = np.minimum(box[2], boxes[:, 2])
+    ymax = np.minimum(box[3], boxes[:, 3])
+
+    # Compute intersection area
+    intersection_area = np.maximum(0, xmax - xmin) * np.maximum(0, ymax - ymin)
+
+    # Compute union area
+    box_area = (box[2] - box[0]) * (box[3] - box[1])
+    boxes_area = (boxes[:, 2] - boxes[:, 0]) * (boxes[:, 3] - boxes[:, 1])
+    union_area = box_area + boxes_area - intersection_area
+
+    # Compute IoU
+    iou = intersection_area / union_area
+
+    return iou
+
+
+def xywh2xyxy(x):
+    # Convert bounding box (x, y, w, h) to bounding box (x1, y1, x2, y2)
+    y = np.copy(x)
+    y[..., 0] = x[..., 0] - x[..., 2] / 2
+    y[..., 1] = x[..., 1] - x[..., 3] / 2
+    y[..., 2] = x[..., 0] + x[..., 2] / 2
+    y[..., 3] = x[..., 1] + x[..., 3] / 2
+    return y
+
+
+def draw_detections(image, boxes, scores, class_ids, mask_alpha=0.3):
+    det_img = image.copy()
+
+    img_height, img_width = image.shape[:2]
+    font_size = min([img_height, img_width]) * 0.0006
+    text_thickness = int(min([img_height, img_width]) * 0.001)
+
+    # det_img = draw_masks(det_img, boxes, class_ids, mask_alpha)
+
+    # Draw bounding boxes and labels of detections
+    for class_id, box, score in zip(class_ids, boxes, scores):
+        color = colors[class_id]
+
+        draw_box(det_img, box, color)  # type: ignore
+
+        label = class_names[class_id]
+        caption = f"{label} {int(score * 100)}%"
+        draw_text(det_img, caption, box, color, font_size, text_thickness)  # type: ignore
+
+    return det_img
+
+
+def draw_box(
+    image: np.ndarray,
+    box: np.ndarray,
+    color: tuple[int, int, int] = (0, 0, 255),
+    thickness: int = 2,
+) -> np.ndarray:
+    x1, y1, x2, y2 = box.astype(int)
+    return cv2.rectangle(image, (x1, y1), (x2, y2), color, thickness)
+
+
+def draw_text(
+    image: np.ndarray,
+    text: str,
+    box: np.ndarray,
+    color: tuple[int, int, int] = (0, 0, 255),
+    font_size: float = 0.001,
+    text_thickness: int = 2,
+) -> np.ndarray:
+    x1, y1, x2, y2 = box.astype(int)
+    (tw, th), _ = cv2.getTextSize(
+        text=text,
+        fontFace=cv2.FONT_HERSHEY_SIMPLEX,
+        fontScale=font_size,
+        thickness=text_thickness,
+    )
+    th = int(th * 1.2)
+
+    cv2.rectangle(image, (x1, y1), (x1 + tw, y1 - th), color, -1)
+
+    return cv2.putText(
+        image,
+        text,
+        (x1, y1),
+        cv2.FONT_HERSHEY_SIMPLEX,
+        font_size,
+        (255, 255, 255),
+        text_thickness,
+        cv2.LINE_AA,
+    )
+
+
+def draw_masks(
+    image: np.ndarray, boxes: np.ndarray, classes: np.ndarray, mask_alpha: float = 0.3
+) -> np.ndarray:
+    mask_img = image.copy()
+
+    # Draw bounding boxes and labels of detections
+    for box, class_id in zip(boxes, classes):
+        color = colors[class_id]
+
+        x1, y1, x2, y2 = box.astype(int)
+
+        # Draw fill rectangle in mask image
+        cv2.rectangle(mask_img, (x1, y1), (x2, y2), color, -1)  # type: ignore
+
+    return cv2.addWeighted(mask_img, mask_alpha, image, 1 - mask_alpha, 0)
diff --git a/gradio/CHANGELOG.md b/gradio/CHANGELOG.md
index 1973f9fdc6daa..9cee66c08936a 100644
--- a/gradio/CHANGELOG.md
+++ b/gradio/CHANGELOG.md
@@ -1,5 +1,210 @@
 # gradio
 
+## 5.0.0-beta.10
+
+### Fixes
+
+- [#9600](https://github.com/gradio-app/gradio/pull/9600) [`9f71086`](https://github.com/gradio-app/gradio/commit/9f71086036339bfdd14f3aab29729041a01fc2d4) - Ensure undo/try shows for final bot message in gr.Chatbot.  Thanks @hannahblair!
+
+## 5.0.0-beta.9
+
+### Features
+
+- [#9437](https://github.com/gradio-app/gradio/pull/9437) [`c3d93be`](https://github.com/gradio-app/gradio/commit/c3d93bef94b9401747a363f7bad88a1d347d535b) - Adding new themes to Gradio 5.0.  Thanks @allisonwhilden!
+- [#9593](https://github.com/gradio-app/gradio/pull/9593) [`cc61fe7`](https://github.com/gradio-app/gradio/commit/cc61fe7047ac61779a61cce52c666400b9517daa) - Some more chatbot fixes.  Thanks @dawoodkhan82!
+- [#9583](https://github.com/gradio-app/gradio/pull/9583) [`b92a762`](https://github.com/gradio-app/gradio/commit/b92a7623e1ebd801587041e1ccca058a61058da9) - Disable the submit button and enter-key submit when the text is empty.  Thanks @whitphx!
+- [#9590](https://github.com/gradio-app/gradio/pull/9590) [`e853c41`](https://github.com/gradio-app/gradio/commit/e853c413583d91186aef3aceb0849d0ec0494834) - SSR e2e + fixes.  Thanks @pngwn!
+- [#9591](https://github.com/gradio-app/gradio/pull/9591) [`139152f`](https://github.com/gradio-app/gradio/commit/139152fe18bfdc5644a59d7bdfec9891b644f0bf) - Equal height in row false by default.  Thanks @aliabid94!
+- [#9589](https://github.com/gradio-app/gradio/pull/9589) [`477f45c`](https://github.com/gradio-app/gradio/commit/477f45cb43be957684eb392e3d62c09490c22391) - Only move files to the cache that have a meta key.  Thanks @freddyaboulton!
+- [#9584](https://github.com/gradio-app/gradio/pull/9584) [`6f8fa54`](https://github.com/gradio-app/gradio/commit/6f8fa5405528ad684084e4c7facfe36624fe7784) - Chat Interface Multimodal Fix & Fallback to `gr.Examples()`.  Thanks @dawoodkhan82!
+- [#9482](https://github.com/gradio-app/gradio/pull/9482) [`bd6c5f2`](https://github.com/gradio-app/gradio/commit/bd6c5f237b0631d86273c7684c3bf2b1011992a3) - Fix custom component CLI on main/5.0.  Thanks @freddyaboulton!
+- [#9601](https://github.com/gradio-app/gradio/pull/9601) [`c078892`](https://github.com/gradio-app/gradio/commit/c07889223cb64661b17560b707b977248809470a) - Tweak gr.Dataframe menu UX.  Thanks @hannahblair!
+- [#9575](https://github.com/gradio-app/gradio/pull/9575) [`4ec2feb`](https://github.com/gradio-app/gradio/commit/4ec2feb04e452d2c77482c09543c59948567be67) - Update gr.Dataframe UI with action popover.  Thanks @hannahblair!
+- [#9582](https://github.com/gradio-app/gradio/pull/9582) [`43a7f42`](https://github.com/gradio-app/gradio/commit/43a7f420d8ac34c7f7fa71d6e630a4c8618d3780) - Chatbot autoscroll.  Thanks @whitphx!
+- [#9598](https://github.com/gradio-app/gradio/pull/9598) [`ffc33fa`](https://github.com/gradio-app/gradio/commit/ffc33facaec1bcc92add5892afb86b7b5ba037d4) - Fix markdown code copy/check button in gr.Chatbot.  Thanks @hannahblair!
+- [#9576](https://github.com/gradio-app/gradio/pull/9576) [`430a26a`](https://github.com/gradio-app/gradio/commit/430a26a4fbcbabb5e9ddb6173bf658a00960e88e) - Fix reload mode.  Thanks @freddyaboulton!
+- [#9580](https://github.com/gradio-app/gradio/pull/9580) [`a9ac396`](https://github.com/gradio-app/gradio/commit/a9ac396f19218eafc441b7614289b4828cde853d) - Deep equal check with hash.  Thanks @aliabid94!
+- [#9499](https://github.com/gradio-app/gradio/pull/9499) [`17e6c84`](https://github.com/gradio-app/gradio/commit/17e6c84d6b11651cd03c1d47caec85de62030ea0) - Fix `gr.Chatbot` panels layout.  Thanks @hannahblair!
+- [#9592](https://github.com/gradio-app/gradio/pull/9592) [`24fe222`](https://github.com/gradio-app/gradio/commit/24fe222fd17583d04dd31aebf60b649224e8382f) - Fix favicon in ssr mode.  Thanks @freddyaboulton!
+
+## 5.0.0-beta.8
+
+### Features
+
+- [#9550](https://github.com/gradio-app/gradio/pull/9550) [`b0fedd7`](https://github.com/gradio-app/gradio/commit/b0fedd7ef718c0df797ec277db7e773543a70a4d) - Fix most flaky Python tests in `5.0-dev` branch.  Thanks @abidlabs!
+- [#9577](https://github.com/gradio-app/gradio/pull/9577) [`9f532e0`](https://github.com/gradio-app/gradio/commit/9f532e03a6b91b9a5592152c19b9b2611774cae7) - Equal height columns.  Thanks @aliabid94!
+- [#9570](https://github.com/gradio-app/gradio/pull/9570) [`e0ee3d5`](https://github.com/gradio-app/gradio/commit/e0ee3d5bb1020744cefa1abf66009fbf07da8cbe) - Update gr.ColorPicker UI.  Thanks @hannahblair!
+- [#9483](https://github.com/gradio-app/gradio/pull/9483) [`8dc7c12`](https://github.com/gradio-app/gradio/commit/8dc7c12389311b60efcde1b9d3e3668a34d2dc00) - Send Streaming data over Websocket if possible. Also support base64 output format for images.  Thanks @freddyaboulton!
+- [#9521](https://github.com/gradio-app/gradio/pull/9521) [`06ef22e`](https://github.com/gradio-app/gradio/commit/06ef22e83cdd27e7afb381396d153d9db3dea16e) - Allow `info=` to render markdown.  Thanks @dawoodkhan82!
+- [#9571](https://github.com/gradio-app/gradio/pull/9571) [`148345d`](https://github.com/gradio-app/gradio/commit/148345d107763754710505281ad70368ebc6f3ec) - Fix chatinterface embedding height issues.  Thanks @aliabid94!
+- [#9525](https://github.com/gradio-app/gradio/pull/9525) [`7c367b6`](https://github.com/gradio-app/gradio/commit/7c367b6cf0472d478671b7c7476e892b4c61c812) - Fix cut off in gr.ImageEditor.  Thanks @hannahblair!
+- [#9522](https://github.com/gradio-app/gradio/pull/9522) [`3b71ed2`](https://github.com/gradio-app/gradio/commit/3b71ed21b7e2ecb67eb68fb946d25565169cb4df) - Api info fix.  Thanks @freddyaboulton!
+- [#9508](https://github.com/gradio-app/gradio/pull/9508) [`b260389`](https://github.com/gradio-app/gradio/commit/b26038932a64f024bd149a56b1539e9e75802f29) - Change caching to occur not at the creation of a `gr.Examples()` but when the Blocks is actually launched.  Thanks @aliabid94!
+- [#9524](https://github.com/gradio-app/gradio/pull/9524) [`cf39640`](https://github.com/gradio-app/gradio/commit/cf396404ec8052c7fbf5f045955028bc54a274a5) - Add `css_paths` and `head_paths` parameters.  Thanks @abidlabs!
+
+## 5.0.0-beta.7
+
+### Features
+
+- [#9546](https://github.com/gradio-app/gradio/pull/9546) [`b82aa6f`](https://github.com/gradio-app/gradio/commit/b82aa6f115f6ad9a9690bdecb0fe63c162dc75c0) - Disable sagemaker_check() for now.  Thanks @vmatt!
+- [#9545](https://github.com/gradio-app/gradio/pull/9545) [`098a009`](https://github.com/gradio-app/gradio/commit/098a009c05243967bd9e5acc28864eb40a135f6a) - Add Jinja2 language to Code component.  Thanks @CISC!
+- [#9526](https://github.com/gradio-app/gradio/pull/9526) [`f60bb68`](https://github.com/gradio-app/gradio/commit/f60bb68f52cd0863d9087b3fbc56635e297adef1) - Fix single select dropdown.  Thanks @whitphx!
+- [#9497](https://github.com/gradio-app/gradio/pull/9497) [`d826faa`](https://github.com/gradio-app/gradio/commit/d826faa8c2584cf0772d4e66b4073e33b83f3a00) - Hide x axis labels.  Thanks @aliabid94!
+
+## 5.0.0-beta.6
+
+### Features
+
+- [#9460](https://github.com/gradio-app/gradio/pull/9460) [`7352a89`](https://github.com/gradio-app/gradio/commit/7352a89722da91461c32fd33588531f3edce9c48) - Playground requirements tab.  Thanks @whitphx!
+- [#9496](https://github.com/gradio-app/gradio/pull/9496) [`1647ebd`](https://github.com/gradio-app/gradio/commit/1647ebddc3e2ed6fc143a62629409e32afcc5801) - UI theme fixes.  Thanks @aliabid94!
+- [#9450](https://github.com/gradio-app/gradio/pull/9450) [`991883e`](https://github.com/gradio-app/gradio/commit/991883e217dc0a3512b3ae3245378812f373b8db) - Improve `gr.Code`.  Thanks @hannahblair!
+- [#9504](https://github.com/gradio-app/gradio/pull/9504) [`d054262`](https://github.com/gradio-app/gradio/commit/d054262f611d5f1eb1a1c936db7152347a891f8e) - Centre components within `Block` when height and width are set.  Thanks @hannahblair!
+- [#9481](https://github.com/gradio-app/gradio/pull/9481) [`2510a6e`](https://github.com/gradio-app/gradio/commit/2510a6e978a49432d7820e9518f164a70cf8acc8) - Fix `slider-color` var.  Thanks @hannahblair!
+- [#9495](https://github.com/gradio-app/gradio/pull/9495) [`488ef76`](https://github.com/gradio-app/gradio/commit/488ef768ccc5008401f7e0aa4c357b93311190ff) - Fix custom component CLI unit tests.  Thanks @freddyaboulton!
+- [#9488](https://github.com/gradio-app/gradio/pull/9488) [`4e6a47f`](https://github.com/gradio-app/gradio/commit/4e6a47f5a29cb885d5bc01a79ca4cc45d298f0b1) - Fixes: Chatbot examples for custom chatbot + rename `suggestions` -> `examples`.  Thanks @dawoodkhan82!
+- [#9506](https://github.com/gradio-app/gradio/pull/9506) [`861f5e9`](https://github.com/gradio-app/gradio/commit/861f5e97ffde5f59e42cfa213364f19e84d799fd) - Fix node process to run with correct server name.  Thanks @abidlabs!
+- [#9493](https://github.com/gradio-app/gradio/pull/9493) [`c307a0c`](https://github.com/gradio-app/gradio/commit/c307a0c9b81b66bde21f0af4a9f7d5726ea7a30d) - Minor fixes to docs and a demo.  Thanks @abidlabs!
+- [#9519](https://github.com/gradio-app/gradio/pull/9519) [`0ab6ac5`](https://github.com/gradio-app/gradio/commit/0ab6ac5dc01b69e4f2462d00c4910f3354441227) - Fix change triggers for dropdown and radio.  Thanks @dawoodkhan82!
+
+### Fixes
+
+- [#9431](https://github.com/gradio-app/gradio/pull/9431) [`7065e11`](https://github.com/gradio-app/gradio/commit/7065e11e465fcdfe14688bd6ca2aeed0a25fcc36) - Check for `file_types` parameter in the backend.  Thanks @dawoodkhan82!
+
+## 5.0.0-beta.5
+
+### Features
+
+- [#9470](https://github.com/gradio-app/gradio/pull/9470) [`b406139`](https://github.com/gradio-app/gradio/commit/b40613928c0e0d224ff2b4db5d0b45727c178560) - Add support for 3rd party providers to `gr.load`, and provide a better UX for conversational models.  Thanks @abidlabs!
+- [#9383](https://github.com/gradio-app/gradio/pull/9383) [`30d13ac`](https://github.com/gradio-app/gradio/commit/30d13ac8a932d53abfd236d3e4e845570480e701) - Pre/post-processing download requests.  Thanks @aliabid94!
+- [#9464](https://github.com/gradio-app/gradio/pull/9464) [`3ac5d9c`](https://github.com/gradio-app/gradio/commit/3ac5d9c972576d82bc365a6532e6e12f55441a30) - Fix plots.  Thanks @pngwn!
+
+## 5.0.0-beta.4
+
+### Features
+
+- [#9419](https://github.com/gradio-app/gradio/pull/9419) [`018c140`](https://github.com/gradio-app/gradio/commit/018c140ef86cacc8211df05b57b26924dab7fa08) - Start/stop recoding from the backend. Add guide on conversational chatbots.  Thanks @freddyaboulton!
+- [#9453](https://github.com/gradio-app/gradio/pull/9453) [`56dbf77`](https://github.com/gradio-app/gradio/commit/56dbf77671012015efd3c745bc33e5074ab7158f) - Chatbot bug fixes.  Thanks @dawoodkhan82!
+- [#9448](https://github.com/gradio-app/gradio/pull/9448) [`e7a415b`](https://github.com/gradio-app/gradio/commit/e7a415b1ef923d31754b302b3cd8b5e71a9ea446) - Use or `pathlib.Path` objects to indicate filepaths for `css`, `js`, and `head` parameters.  Thanks @abidlabs!
+- [#9469](https://github.com/gradio-app/gradio/pull/9469) [`f7c3396`](https://github.com/gradio-app/gradio/commit/f7c3396f55a5b8364d3880a29d766bd092d7f840) - Fix. Triggered dataframe change event for header change.  Thanks @Joodith!
+- [#9447](https://github.com/gradio-app/gradio/pull/9447) [`afbd8e7`](https://github.com/gradio-app/gradio/commit/afbd8e7a2faadeea5a431f67a753dea14dd5829f) - Reduce analytics that are collected.  Thanks @abidlabs!
+- [#9438](https://github.com/gradio-app/gradio/pull/9438) [`8f469e1`](https://github.com/gradio-app/gradio/commit/8f469e1d1d9d1636e4dedfb1c09e76a5e2ba8d4e) - Small changes to caching.  Thanks @abidlabs!
+- [#9446](https://github.com/gradio-app/gradio/pull/9446) [`0c8fafb`](https://github.com/gradio-app/gradio/commit/0c8fafb31df7ef3ef5812d6efb47ca342a3bad3c) - Fix SSR mode flag with `mount_gradio_app` and revert changes to pytests.  Thanks @abidlabs!
+- [#9456](https://github.com/gradio-app/gradio/pull/9456) [`4d75f02`](https://github.com/gradio-app/gradio/commit/4d75f029aacf0561f50c7afebbe8d54da2cb0af4) - Update object detection guide.  Thanks @freddyaboulton!
+- [#9406](https://github.com/gradio-app/gradio/pull/9406) [`74f3b9d`](https://github.com/gradio-app/gradio/commit/74f3b9ded1ce0ff6f2f0dbcb113edd64b7bb8f60) - Allow skipping an arbitrary number of output components, and also raise a warning if the number of output components does not match the number of values returned from a function.  Thanks @abidlabs!
+- [#9413](https://github.com/gradio-app/gradio/pull/9413) [`a16787a`](https://github.com/gradio-app/gradio/commit/a16787abdc8d507d75b986dbe882d21be4540908) - Lite: HTTPX client improvement.  Thanks @whitphx!
+
+## 5.0.0-beta.3
+
+### Features
+
+- [#9376](https://github.com/gradio-app/gradio/pull/9376) [`d92c26f`](https://github.com/gradio-app/gradio/commit/d92c26fe63f6b88e16c356cb84c55b61f795db73) - Small fixes to `gr.Dataframe` and chatbot docs.  Thanks @abidlabs!
+- [#9412](https://github.com/gradio-app/gradio/pull/9412) [`c2c2fd9`](https://github.com/gradio-app/gradio/commit/c2c2fd989348f826566773c07c0e0bda200199ff) - fix SSR apps on spaces.  Thanks @pngwn!
+
+### Fixes
+
+- [#9405](https://github.com/gradio-app/gradio/pull/9405) [`bf27ff4`](https://github.com/gradio-app/gradio/commit/bf27ff4ac8ada33ea03dd26d5c1c1115aa1f318a) - Center icon in button when no text is present.  Thanks @abidlabs!
+
+## 5.0.0-beta.2
+
+### Features
+
+- [#9359](https://github.com/gradio-app/gradio/pull/9359) [`50c3a7f`](https://github.com/gradio-app/gradio/commit/50c3a7f1541f632853a96f3d979ebeef6ad82869) - Small tweak to how thoughts are shown in `gr.Chatbot`.  Thanks @abidlabs!
+- [#9323](https://github.com/gradio-app/gradio/pull/9323) [`06babda`](https://github.com/gradio-app/gradio/commit/06babda0395fd3fbd323c1c3cb33704ecfd6deb0) - Disable liking user message in chatbot by default but make it configurable.  Thanks @freddyaboulton!
+- [#8966](https://github.com/gradio-app/gradio/pull/8966) [`8e52b6a`](https://github.com/gradio-app/gradio/commit/8e52b6a3e75957462bc7fdbf6ff9c280084d5f08) - Chatbot Examples.  Thanks @dawoodkhan82!
+- [#9261](https://github.com/gradio-app/gradio/pull/9261) [`73647a0`](https://github.com/gradio-app/gradio/commit/73647a07b0439efabe3dd218ff6c366ffa3b84a0) - Move icons into `IconButtonWrapper`.  Thanks @hannahblair!
+- [#9316](https://github.com/gradio-app/gradio/pull/9316) [`4338f29`](https://github.com/gradio-app/gradio/commit/4338f29bce2430d765f20070d1823ecc19d940cb) - 9227 chatinterface retry bug.  Thanks @freddyaboulton!
+- [#9313](https://github.com/gradio-app/gradio/pull/9313) [`1fef9d9`](https://github.com/gradio-app/gradio/commit/1fef9d9a26f0ebce4de18c486702661f6539b1c6) - Standardize `height` across components and add `max_height` and `min_height` parameters where appropriate.  Thanks @abidlabs!
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+- [#9250](https://github.com/gradio-app/gradio/pull/9250) [`350b0a5`](https://github.com/gradio-app/gradio/commit/350b0a5cafb9176f914f62e7c90de51d4352cc77) - Improve Icon Button consistency.  Thanks @hannahblair!
+- [#9269](https://github.com/gradio-app/gradio/pull/9269) [`e05f568`](https://github.com/gradio-app/gradio/commit/e05f568f47e9fa33ef91dbbe5cc477d32762bc36) - Fix reload mode and streaming in 5.0 dev.  Thanks @freddyaboulton!
+- [#9356](https://github.com/gradio-app/gradio/pull/9356) [`1daf259`](https://github.com/gradio-app/gradio/commit/1daf259b52d0b1ce16d916ff25a15d322b51ecf5) - Use `container` param in `gr.Markdown`.  Thanks @hannahblair!
+- [#9321](https://github.com/gradio-app/gradio/pull/9321) [`81a356d`](https://github.com/gradio-app/gradio/commit/81a356d802f95b6a9a7aeb3759e05e47febbd0d3) - Remove two dependencies: `importlib_resources` and `urllib3` (if not in Wasm).  Thanks @abidlabs!
+- [#9253](https://github.com/gradio-app/gradio/pull/9253) [`99648ec`](https://github.com/gradio-app/gradio/commit/99648ec7c4443e74799941e47b0015ac9ca581e1) - Adds ability to block event trigger when file is uploading.  Thanks @dawoodkhan82!
+- [#9341](https://github.com/gradio-app/gradio/pull/9341) [`02369b3`](https://github.com/gradio-app/gradio/commit/02369b3159df72b2f4a36ce5684574eb65065731) - Improve is_in_or_equal and fuzzer.  Thanks @freddyaboulton!
+- [#9333](https://github.com/gradio-app/gradio/pull/9333) [`5b86e2f`](https://github.com/gradio-app/gradio/commit/5b86e2f2a2bedcde79e425fd470473bc1fd6ae2e) - Enhance Lite E2E tests and fix a networking problem on Lite.  Thanks @whitphx!
+- [#9338](https://github.com/gradio-app/gradio/pull/9338) [`19f6b31`](https://github.com/gradio-app/gradio/commit/19f6b31a73c6114093cbb5a7e69131175efa8a79) - Fix typo in `tunneling.py`.  Thanks @abidlabs!
+- [#9336](https://github.com/gradio-app/gradio/pull/9336) [`736046f`](https://github.com/gradio-app/gradio/commit/736046f17db073b56023b5e077b0ae5ae4adeb02) - Object Detection From Webcam Stream Guide.  Thanks @freddyaboulton!
+- [#9300](https://github.com/gradio-app/gradio/pull/9300) [`6309a48`](https://github.com/gradio-app/gradio/commit/6309a48e3a89a13137ec9d61c1c722eb59b8e3dc) - Raise ChecksumMismatchError.  Thanks @abidlabs!
+- [#9373](https://github.com/gradio-app/gradio/pull/9373) [`6443062`](https://github.com/gradio-app/gradio/commit/64430620449ab5b19ea32b02ab82a2d1804dcb2e) - Fix Cached Examples for Streamed Media.  Thanks @freddyaboulton!
+- [#9367](https://github.com/gradio-app/gradio/pull/9367) [`1c94328`](https://github.com/gradio-app/gradio/commit/1c94328cfe6ce0676c3850f5e9da5bcabf9ee570) - add local fonts and update themes.  Thanks @hannahblair!
+- [#9335](https://github.com/gradio-app/gradio/pull/9335) [`b543465`](https://github.com/gradio-app/gradio/commit/b543465d06d7d1b399c4d0755da05e022611a97f) - Remove lite/theme.css from the Git-managed file tree.  Thanks @whitphx!
+- [#9358](https://github.com/gradio-app/gradio/pull/9358) [`16c0485`](https://github.com/gradio-app/gradio/commit/16c0485a32be324a5f1c7252f5ce09fff79f7d67) - Small tweaks to improve the DX for the "tuples"/"messages" argument in `gr.Chatbot`.  Thanks @abidlabs!
+- [#9303](https://github.com/gradio-app/gradio/pull/9303) [`34f46b0`](https://github.com/gradio-app/gradio/commit/34f46b0512fe30b4db9c9901cb23987d3cecc48d) - Dont move files to cache automatically in chatbot postprocess.  Thanks @freddyaboulton!
+- [#9363](https://github.com/gradio-app/gradio/pull/9363) [`3ad28c7`](https://github.com/gradio-app/gradio/commit/3ad28c7e310e8589e0c53b7efee8031e129bece8) - Prevent HTML and Markdown height changing when status is hidden.  Thanks @hannahblair!
+- [#9260](https://github.com/gradio-app/gradio/pull/9260) [`d47dd1f`](https://github.com/gradio-app/gradio/commit/d47dd1f8417a878ef731d2eeabf60f3069289dee) - Fix overflowing markdown in Chatbot.  Thanks @hannahblair!
+- [#9320](https://github.com/gradio-app/gradio/pull/9320) [`98cbcae`](https://github.com/gradio-app/gradio/commit/98cbcaef827de7267462ccba180c7b2ffb1e825d) - chore: fix docs style.  Thanks @imba-tjd!
+- [#9314](https://github.com/gradio-app/gradio/pull/9314) [`299879d`](https://github.com/gradio-app/gradio/commit/299879d02adf3bacb012c76a467aaf5df5b31493) - Make `gr.Image` preprocessing more efficient.  Thanks @abidlabs!
+- [#9371](https://github.com/gradio-app/gradio/pull/9371) [`7bf3e99`](https://github.com/gradio-app/gradio/commit/7bf3e9989392b7edcdc18c1d840fb8130b15040e) - Fix `gr.ImageEditor` toolbar cutoff.  Thanks @hannahblair!
+- [#9306](https://github.com/gradio-app/gradio/pull/9306) [`f3f0fef`](https://github.com/gradio-app/gradio/commit/f3f0fef199c7779aac9aaef794dd4af1861ce50f) - Fixes race condition in `update_root_in_config`.  Thanks @abidlabs!
+- [#9312](https://github.com/gradio-app/gradio/pull/9312) [`7c0780b`](https://github.com/gradio-app/gradio/commit/7c0780b5677f8a1c05b9d2eee136e982917829b8) - Proposal: remove `gr.make_waveform` and remove `matplotlib` as a dependency.  Thanks @abidlabs!
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Tweaks to SSR mode.  Thanks @pngwn!
+- [#9270](https://github.com/gradio-app/gradio/pull/9270) [`b0b8500`](https://github.com/gradio-app/gradio/commit/b0b850081d8d10c1287b5d179b8db37482e21c8d) - Fix stop recording button colors.  Thanks @freddyaboulton!
+- [#9268](https://github.com/gradio-app/gradio/pull/9268) [`c469d40`](https://github.com/gradio-app/gradio/commit/c469d40b0d9d807abb9fa92c67069c08833ce6bc) - Raise error instead of warning if checksums for binary do not match.  Thanks @abidlabs!
+- [#9377](https://github.com/gradio-app/gradio/pull/9377) [`618e9fe`](https://github.com/gradio-app/gradio/commit/618e9fe941744cef4a4a06eb7840763c64b15e32) - Update babylon.js to `v7` for `gr.Model3D`.  Thanks @abidlabs!
+- [#9282](https://github.com/gradio-app/gradio/pull/9282) [`54ea485`](https://github.com/gradio-app/gradio/commit/54ea485ba92165be96137ae35e2d3f2fc62a2873) - Further tweak to is_in_or_equal.  Thanks @freddyaboulton!
+- [#9326](https://github.com/gradio-app/gradio/pull/9326) [`7afb9a1`](https://github.com/gradio-app/gradio/commit/7afb9a14fa64310eb8b70f43a3bad373e46e36c1) - 5.0 merge take 2.  Thanks @pngwn!
+- [#9280](https://github.com/gradio-app/gradio/pull/9280) [`7122420`](https://github.com/gradio-app/gradio/commit/712242047fde3a594dfde7f48a44c7ea16239dc8) - Match style of textbox stop button to submit button.  Thanks @freddyaboulton!
+- [#9348](https://github.com/gradio-app/gradio/pull/9348) [`61f794b`](https://github.com/gradio-app/gradio/commit/61f794bba78ef59e55beca0ba743548f33f3a3c3) - Do not attach `content_disposition_type = "attachment"` headers for files explicitly allowed by developer.  Thanks @abidlabs!
+- [#9361](https://github.com/gradio-app/gradio/pull/9361) [`5eb860f`](https://github.com/gradio-app/gradio/commit/5eb860f739a187217ded1fc569676e0edd16bab0) - Refactor lazy caching.  Thanks @abidlabs!
+- [#9311](https://github.com/gradio-app/gradio/pull/9311) [`c4afdcd`](https://github.com/gradio-app/gradio/commit/c4afdcdb1f1f80c5f95ab45d527236e9364ace82) - Added max lines and overflow scrollbar for `gr.Code`.  Thanks @micpst!
+
+### Fixes
+
+- [#9299](https://github.com/gradio-app/gradio/pull/9299) [`aa35b07`](https://github.com/gradio-app/gradio/commit/aa35b0788e613fdd45446d267513e6f94fa208ea) - Trigger state change event on iterators.  Thanks @freddyaboulton!
+- [#9393](https://github.com/gradio-app/gradio/pull/9393) [`53ed0f0`](https://github.com/gradio-app/gradio/commit/53ed0f030551ad876a1fea28a9db9015ba6ec33e) - Fix File Types for MultimodalTextbox.  Thanks @dawoodkhan82!
+- [#9328](https://github.com/gradio-app/gradio/pull/9328) [`6a7f631`](https://github.com/gradio-app/gradio/commit/6a7f63180b4105622298dd742d6a0d25216ea629) - Set the color of placeholder in a disabled textbox to gray instead of black, and disable typing while a response is generating in `gr.ChatInterface`, allow `gr.MultimodalTextbox` to accept string values.  Thanks @abidlabs!
+
+## 5.0.0-beta.1
+
+### Features
+
+- [#9235](https://github.com/gradio-app/gradio/pull/9235) [`f8b411f`](https://github.com/gradio-app/gradio/commit/f8b411fe282ff0316ed4abebc0a043b044bf4dd9) - Built-in submit and stop buttons in `gr.ChatInterface(multimodal=False)`, adding `submit_btn` and `stop_btn` props to `gr.Textbox()` and `gr.MultimodalText()`.  Thanks @whitphx!
+- [#9201](https://github.com/gradio-app/gradio/pull/9201) [`5492e74`](https://github.com/gradio-app/gradio/commit/5492e742b1f1fa618208cce523f50ad22a6e86f1) - Move buttons from chat_interface into Chatbot.  Thanks @freddyaboulton!
+- [#9199](https://github.com/gradio-app/gradio/pull/9199) [`3175c7a`](https://github.com/gradio-app/gradio/commit/3175c7aebc6ad2466d31d6949580f5a3cb4cd698) - Redesign `gr.Tabs()`.  Thanks @hannahblair!
+- [#9167](https://github.com/gradio-app/gradio/pull/9167) [`e9e737e`](https://github.com/gradio-app/gradio/commit/e9e737eeeb61d0bbf43277c75b6ffed8b34aa445) - Redesign `gr.Button()`.  Thanks @hannahblair!
+- [#9218](https://github.com/gradio-app/gradio/pull/9218) [`4a832f4`](https://github.com/gradio-app/gradio/commit/4a832f4b0a8f35a10bc2301a56b711519e85034b) - Adds TLS to FRP tunnel.  Thanks @abidlabs!
+- [#9166](https://github.com/gradio-app/gradio/pull/9166) [`8a75559`](https://github.com/gradio-app/gradio/commit/8a755596317c59bfb10803edc0f8642e62d7cecd) - Minor changes to flagging for 5.0.  Thanks @abidlabs!
+- [#9254](https://github.com/gradio-app/gradio/pull/9254) [`03f3735`](https://github.com/gradio-app/gradio/commit/03f3735fba1fd4f1978b5431af9e67de3b6e7945) - Adds a "huggingface" button variant, and makes it the default for `gr.LoginButton` and `gr.DuplicateButton`.  Thanks @abidlabs!
+- [#9187](https://github.com/gradio-app/gradio/pull/9187) [`5bf00b7`](https://github.com/gradio-app/gradio/commit/5bf00b7524ebf399b48719120a49d15bb21bd65c) - make all component SSR compatible.  Thanks @pngwn!
+- [#9236](https://github.com/gradio-app/gradio/pull/9236) [`dd8e2e3`](https://github.com/gradio-app/gradio/commit/dd8e2e32c6c1ec42e13c55af870d0da291117dd3) - Improve button consistency across light/dark mode.  Thanks @hannahblair!
+- [#9225](https://github.com/gradio-app/gradio/pull/9225) [`5f2e047`](https://github.com/gradio-app/gradio/commit/5f2e047c2ce114cebc95d5dba16c4df10fa73eb1) - Add a 'None' option to the gradio.Image component to disable image_m….  Thanks @GeeMoose!
+- [#9204](https://github.com/gradio-app/gradio/pull/9204) [`3c73f00`](https://github.com/gradio-app/gradio/commit/3c73f00e3016b16917ebfe0bad390f2dff683457) - 🔡 Update default core Gradio font.  Thanks @hannahblair!
+- [#9245](https://github.com/gradio-app/gradio/pull/9245) [`c8cfe93`](https://github.com/gradio-app/gradio/commit/c8cfe93c0971d904c29da60410952fd20c9439c0) - Lighten secondary button grey fill.  Thanks @hannahblair!
+- [#9246](https://github.com/gradio-app/gradio/pull/9246) [`38cf712`](https://github.com/gradio-app/gradio/commit/38cf71234bf57fe9da6eea2d32b1d6e7ef35c700) - Stop using `multiprocessing` in `flagging.CSVLogger` on Lite v5.  Thanks @whitphx!
+- [#9216](https://github.com/gradio-app/gradio/pull/9216) [`e137b30`](https://github.com/gradio-app/gradio/commit/e137b30b1a53ca32d3cd809d31e97d5d54a4e479) - Decrease component radii and remove input shadows.  Thanks @hannahblair!
+- [#9200](https://github.com/gradio-app/gradio/pull/9200) [`2e179d3`](https://github.com/gradio-app/gradio/commit/2e179d35be6ed60a5a6bfc7303178d63e41781ad) - prefix api routes.  Thanks @pngwn!
+
+## 5.0.0-beta.0
+
+### Features
+
+- [#9069](https://github.com/gradio-app/gradio/pull/9069) [`f9f84bf`](https://github.com/gradio-app/gradio/commit/f9f84bfe7064634164501d1023591b415ad2a03b) - No token passed by default in `gr.load()`.  Thanks @abidlabs!
+- [#9160](https://github.com/gradio-app/gradio/pull/9160) [`8f5a895`](https://github.com/gradio-app/gradio/commit/8f5a8950c949996f7c439b11a7aa40edda3e8562) - Fix native plot lite demos.  Thanks @aliabd!
+- [#9197](https://github.com/gradio-app/gradio/pull/9197) [`6773c4d`](https://github.com/gradio-app/gradio/commit/6773c4da22f957a11b2a07f032ce13c7b4c94f8c) - Redesign `gr.Slider()`.  Thanks @hannahblair!
+- [#9140](https://github.com/gradio-app/gradio/pull/9140) [`c054ec8`](https://github.com/gradio-app/gradio/commit/c054ec85e49ab102b15afd305583ee394151d16c) - Drop python 3.8 and 3.9.  Thanks @abidlabs!
+- [#8978](https://github.com/gradio-app/gradio/pull/8978) [`fe9d1cb`](https://github.com/gradio-app/gradio/commit/fe9d1cb0870a5b07d51e8cb05401af47efbacd13) - Improve url downloads for file objects.  Thanks @aliabid94!
+- [#8810](https://github.com/gradio-app/gradio/pull/8810) [`4cf8af9`](https://github.com/gradio-app/gradio/commit/4cf8af9407a44ee914e0be567da38b29f00eff8e) - Prevent invalid values from being submitted to dropdown, etc.  Thanks @abidlabs!
+- [#9194](https://github.com/gradio-app/gradio/pull/9194) [`20c0836`](https://github.com/gradio-app/gradio/commit/20c0836ed0e0698dbc81d2a4bda04363fd857334) - Deprecate type='tuples for chatbot and focus chatbot docs on 'messages' type.  Thanks @freddyaboulton!
+- [#9122](https://github.com/gradio-app/gradio/pull/9122) [`2672ea2`](https://github.com/gradio-app/gradio/commit/2672ea297ef28414ecf2eeab7984b1e4b4ee40b8) - Postprocess hardening.  Thanks @freddyaboulton!
+- [#9149](https://github.com/gradio-app/gradio/pull/9149) [`3d7a9b8`](https://github.com/gradio-app/gradio/commit/3d7a9b81f6fef06187eca832471dc1692eb493a0) - Open audio/image input stream only when queue is ready.  Thanks @freddyaboulton!
+- [#9173](https://github.com/gradio-app/gradio/pull/9173) [`66349fe`](https://github.com/gradio-app/gradio/commit/66349fe26827e3a3c15b738a1177e95fec7f5554) - Streaming Guides.  Thanks @freddyaboulton!
+- [#9185](https://github.com/gradio-app/gradio/pull/9185) [`2daf3d1`](https://github.com/gradio-app/gradio/commit/2daf3d10f5986675f6ceb75ebb50c9d991c282bf) - Adding `maxlength` attribute handling of `textarea` and `input` HTML element for the `gr.TextBox()` component via a `max_length` parameter.  Thanks @WH-Yoshi!
+- [#8959](https://github.com/gradio-app/gradio/pull/8959) [`a0aac66`](https://github.com/gradio-app/gradio/commit/a0aac6694076529ff925ccd34b3503d35e86cb49) - Adds `strict_cors` parameter to `launch()`.  Thanks @abidlabs!
+- [#9052](https://github.com/gradio-app/gradio/pull/9052) [`f3652eb`](https://github.com/gradio-app/gradio/commit/f3652ebe08211e12739df73c15fd97e5ff81276a) - Video gallery.  Thanks @dawoodkhan82!
+- [#9213](https://github.com/gradio-app/gradio/pull/9213) [`ab4580b`](https://github.com/gradio-app/gradio/commit/ab4580bd5f755a07c9a9bd2a775220a9a2085f8c) - Remove grey background behind all components.  Thanks @hannahblair!
+- [#9073](https://github.com/gradio-app/gradio/pull/9073) [`0d8a358`](https://github.com/gradio-app/gradio/commit/0d8a358cc86331aa0c83380326b30d04597f9ef9) - Set default `format` in `gr.Audio` to be `None` to avoid unnecessary preprocessing.  Thanks @abidlabs!
+- [#9130](https://github.com/gradio-app/gradio/pull/9130) [`864cd0f`](https://github.com/gradio-app/gradio/commit/864cd0fd6aa85691b53bd0bf3a50af05b778813c) - Raise WasmUnsupportedError for ffmpeg usage on Lite.  Thanks @whitphx!
+- [#8797](https://github.com/gradio-app/gradio/pull/8797) [`6e6818c`](https://github.com/gradio-app/gradio/commit/6e6818c3af836051fffdd070a9e33889b246186e) - Deprecate for 5.0.  Thanks @abidlabs!
+- [#9132](https://github.com/gradio-app/gradio/pull/9132) [`5cedf16`](https://github.com/gradio-app/gradio/commit/5cedf162f2120e30dd58bf3a8eab27115030b4f5) - Deprecate passing a tuple for gr.Code value.  Thanks @freddyaboulton!
+- [#8941](https://github.com/gradio-app/gradio/pull/8941) [`97a7bf6`](https://github.com/gradio-app/gradio/commit/97a7bf66a79179d1b91a3199d68e5c11216ca500) - Streaming inputs for 5.0.  Thanks @freddyaboulton!
+- [#9150](https://github.com/gradio-app/gradio/pull/9150) [`80c966a`](https://github.com/gradio-app/gradio/commit/80c966af6e3d947abe96058de9b683ecf05d9803) - DNS resolver on ip check.  Thanks @aliabid94!
+- [#9175](https://github.com/gradio-app/gradio/pull/9175) [`e6d456a`](https://github.com/gradio-app/gradio/commit/e6d456a9c3b7e80e0c9a16cd365288deff706635) - Change dark mode color theme from `gray` to `zinc`.  Thanks @hannahblair!
+- [#8884](https://github.com/gradio-app/gradio/pull/8884) [`3408dba`](https://github.com/gradio-app/gradio/commit/3408dba7560a17371be679d0f01564a5606dc90b) - replace ip addresses with machine-specific hashes.  Thanks @abidlabs!
+
+### Fixes
+
+- [#9189](https://github.com/gradio-app/gradio/pull/9189) [`ab142ee`](https://github.com/gradio-app/gradio/commit/ab142ee13d19070b75b5eb03efcda7193b8993c2) - Fix serialization error in curl api.  Thanks @freddyaboulton!
+
 ## 4.44.1
 
 ### Features
diff --git a/gradio/__init__.py b/gradio/__init__.py
index 008c63bd4cfb5..5538d75cd36b3 100644
--- a/gradio/__init__.py
+++ b/gradio/__init__.py
@@ -42,7 +42,6 @@
     Label,
     LinePlot,
     LoginButton,
-    LogoutButton,
     Markdown,
     MessageDict,
     Model3D,
@@ -69,7 +68,9 @@
     EventData,
     KeyUpData,
     LikeData,
+    RetryData,
     SelectData,
+    UndoData,
     on,
 )
 from gradio.exceptions import Error
@@ -77,14 +78,12 @@
 from gradio.flagging import (
     CSVLogger,
     FlaggingCallback,
-    HuggingFaceDatasetSaver,
     SimpleCSVLogger,
 )
 from gradio.helpers import (
     Info,
     Progress,
     Warning,
-    make_waveform,
     skip,
     update,
 )
diff --git a/gradio/_simple_templates/simpledropdown.py b/gradio/_simple_templates/simpledropdown.py
index c1d8ad14239e8..f653fda7e6e4b 100644
--- a/gradio/_simple_templates/simpledropdown.py
+++ b/gradio/_simple_templates/simpledropdown.py
@@ -1,7 +1,8 @@
 from __future__ import annotations
 
 import warnings
-from typing import TYPE_CHECKING, Any, Callable, Sequence
+from collections.abc import Callable, Sequence
+from typing import TYPE_CHECKING, Any
 
 from gradio.components.base import Component, FormComponent
 from gradio.events import Events
@@ -40,8 +41,8 @@ def __init__(
         Parameters:
             choices: A list of string options to choose from. An option can also be a tuple of the form (name, value), where name is the displayed name of the dropdown choice and value is the value to be passed to the function, or returned by the function.
             value: default value selected in dropdown. If None, no value is selected by default. If callable, the function will be called whenever the app loads to set the initial value of the component.
-            label: component name in interface.
-            info: additional component description.
+            label: the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to.
+            info: additional component description, appears below the label in smaller font. Supports markdown / HTML syntax.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
diff --git a/gradio/_simple_templates/simpleimage.py b/gradio/_simple_templates/simpleimage.py
index 712b843f609d0..337294e6505b3 100644
--- a/gradio/_simple_templates/simpleimage.py
+++ b/gradio/_simple_templates/simpleimage.py
@@ -2,8 +2,9 @@
 
 from __future__ import annotations
 
+from collections.abc import Sequence
 from pathlib import Path
-from typing import TYPE_CHECKING, Any, Sequence
+from typing import TYPE_CHECKING, Any
 
 from gradio_client import handle_file
 from gradio_client.documentation import document
@@ -52,7 +53,7 @@ def __init__(
         """
         Parameters:
             value: A path or URL for the default value that SimpleImage component is going to take. If callable, the function will be called whenever the app loads to set the initial value of the component.
-            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            label: the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
             show_label: if True, will display label.
diff --git a/gradio/_simple_templates/simpletextbox.py b/gradio/_simple_templates/simpletextbox.py
index 12aa16acb5522..4536eb05b4e31 100644
--- a/gradio/_simple_templates/simpletextbox.py
+++ b/gradio/_simple_templates/simpletextbox.py
@@ -1,6 +1,7 @@
 from __future__ import annotations
 
-from typing import TYPE_CHECKING, Any, Callable, Sequence
+from collections.abc import Callable, Sequence
+from typing import TYPE_CHECKING, Any
 
 from gradio.components.base import Component, FormComponent
 from gradio.events import Events
@@ -43,7 +44,7 @@ def __init__(
         Parameters:
             value: default text to provide in textbox. If callable, the function will be called whenever the app loads to set the initial value of the component.
             placeholder: placeholder hint to provide behind textbox.
-            label: component name in interface.
+            label: the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
             show_label: if True, will display label.
diff --git a/gradio/analytics.py b/gradio/analytics.py
index 79fb9c2d54ed1..0284085d5cf60 100644
--- a/gradio/analytics.py
+++ b/gradio/analytics.py
@@ -16,7 +16,6 @@
 
 import gradio
 from gradio import wasm_utils
-from gradio.context import Context
 from gradio.utils import core_gradio_components, get_package_version
 
 # For testability, we import the pyfetch function into this module scope and define a fallback coroutine object to be patched in tests.
@@ -67,7 +66,6 @@ def _do_analytics_request(topic: str, data: dict[str, Any]) -> None:
 
 
 def _do_normal_analytics_request(topic: str, data: dict[str, Any]) -> None:
-    data["ip_address"] = get_local_ip_address()
     try:
         _send_telemetry_in_thread(
             topic=topic,
@@ -80,8 +78,6 @@ def _do_normal_analytics_request(topic: str, data: dict[str, Any]) -> None:
 
 
 async def _do_wasm_analytics_request(url: str, data: dict[str, Any]) -> None:
-    data["ip_address"] = await get_local_ip_address_wasm()
-
     # We use urllib.parse.urlencode to encode the data as a form.
     # Ref: https://docs.python.org/3/library/urllib.request.html#urllib-examples
     body = urllib.parse.urlencode(data).encode("ascii")
@@ -116,53 +112,6 @@ def version_check():
         pass
 
 
-def get_local_ip_address() -> str:
-    """
-    Gets the public IP address or returns the string "No internet connection" if unable
-    to obtain it or the string "Analytics disabled" if a user has disabled analytics.
-    Does not make a new request if the IP address has already been obtained in the
-    same Python session.
-    """
-    if not analytics_enabled():
-        return "Analytics disabled"
-
-    if Context.ip_address is None:
-        try:
-            ip_address = httpx.get(
-                "https://checkip.amazonaws.com/", timeout=3
-            ).text.strip()
-        except (httpx.ConnectError, httpx.ReadTimeout):
-            ip_address = "No internet connection"
-        Context.ip_address = ip_address
-    else:
-        ip_address = Context.ip_address
-    return ip_address
-
-
-async def get_local_ip_address_wasm() -> str:
-    """The Wasm-compatible version of get_local_ip_address()."""
-    if not analytics_enabled():
-        return "Analytics disabled"
-
-    if Context.ip_address is None:
-        try:
-            response = await asyncio.wait_for(
-                pyodide_pyfetch(
-                    # The API used by the normal version (`get_local_ip_address()`), `https://checkip.amazonaws.com/``, blocks CORS requests, so here we use a different API.
-                    "https://api.ipify.org"
-                ),
-                timeout=5,
-            )
-            response_text: str = await response.string()  # type: ignore
-            ip_address = response_text.strip()
-        except (asyncio.TimeoutError, OSError):
-            ip_address = "No internet connection"
-        Context.ip_address = ip_address
-    else:
-        ip_address = Context.ip_address
-    return ip_address
-
-
 def initiated_analytics(data: dict[str, Any]) -> None:
     if not analytics_enabled():
         return
@@ -232,8 +181,6 @@ def get_inputs_outputs(
         "is_sagemaker": blocks.is_sagemaker,
         "using_auth": blocks.auth is not None,
         "dev_mode": blocks.dev_mode,
-        "show_api": blocks.show_api,
-        "show_error": blocks.show_error,
         "inputs": get_inputs_outputs(
             blocks.mode, blocks.input_components, inputs_telemetry
         ),
diff --git a/gradio/blocks.py b/gradio/blocks.py
index eaf4b38de5771..3b7c830ecb5b9 100644
--- a/gradio/blocks.py
+++ b/gradio/blocks.py
@@ -15,16 +15,13 @@
 import warnings
 import webbrowser
 from collections import defaultdict
+from collections.abc import AsyncIterator, Callable, Coroutine, Sequence, Set
 from pathlib import Path
 from types import ModuleType
 from typing import (
     TYPE_CHECKING,
-    AbstractSet,
     Any,
-    AsyncIterator,
-    Callable,
     Literal,
-    Sequence,
     cast,
 )
 from urllib.parse import urlparse, urlunparse
@@ -69,11 +66,14 @@
     EventListenerMethod,
 )
 from gradio.exceptions import (
+    ChecksumMismatchError,
     DuplicateBlockError,
     InvalidApiNameError,
     InvalidComponentError,
 )
 from gradio.helpers import create_tracker, skip, special_args
+from gradio.node_server import start_node_server
+from gradio.route_utils import API_PREFIX, MediaStream
 from gradio.state_holder import SessionState, StateHolder
 from gradio.themes import Default as DefaultTheme
 from gradio.themes import ThemeClass as Theme
@@ -89,6 +89,7 @@
     check_function_inputs_match,
     component_or_layout_class,
     get_cancelled_fn_indices,
+    get_node_path,
     get_package_version,
     get_upload_folder,
 )
@@ -100,8 +101,6 @@
 
 
 if TYPE_CHECKING:  # Only import for type checking (is False at runtime).
-    from fastapi.applications import FastAPI
-
     from gradio.components.base import Component
     from gradio.renderable import Renderable
 
@@ -113,6 +112,9 @@
         themes.Monochrome(),
         themes.Soft(),
         themes.Glass(),
+        themes.Origin(),
+        themes.Citrus(),
+        themes.Ocean(),
     ]
 }
 
@@ -148,6 +150,7 @@ def __init__(
         # Keep tracks of files that should not be deleted when the delete_cache parmameter is set
         # These files are the default value of the component and files that are used in examples
         self.keep_in_cache = set()
+        self.has_launched = False
 
         if render:
             self.render()
@@ -261,8 +264,9 @@ def get_config(self):
         config = {**config, "proxy_url": self.proxy_url, "name": self.get_block_class()}
         if self.rendered_in is not None:
             config["rendered_in"] = self.rendered_in._id
-        if (_selectable := getattr(self, "_selectable", None)) is not None:
-            config["_selectable"] = _selectable
+        for event_attribute in ["_selectable", "_undoable", "_retryable", "likeable"]:
+            if (attributable := getattr(self, event_attribute, None)) is not None:
+                config[event_attribute] = attributable
         return config
 
     @classmethod
@@ -296,7 +300,7 @@ async def async_move_resource_to_block_cache(
             url_or_file_path = str(url_or_file_path)
 
         if client_utils.is_http_url_like(url_or_file_path):
-            temp_file_path = await processing_utils.async_save_url_to_cache(
+            temp_file_path = await processing_utils.async_ssrf_protected_download(
                 url_or_file_path, cache_dir=self.GRADIO_CACHE
             )
 
@@ -382,7 +386,7 @@ def serve_static_file(
         if client_utils.is_http_url_like(url_or_file_path):
             return FileData(path=url_or_file_path, url=url_or_file_path).model_dump()
         else:
-            data = {"path": url_or_file_path}
+            data = {"path": url_or_file_path, "meta": {"_type": "gradio.FileData"}}
             try:
                 return client_utils.synchronize_async(
                     processing_utils.async_move_files_to_cache, data, self
@@ -514,6 +518,11 @@ def __init__(
         renderable: Renderable | None = None,
         rendered_in: Renderable | None = None,
         is_cancel_function: bool = False,
+        connection: Literal["stream", "sse"] = "sse",
+        time_limit: float | None = None,
+        stream_every: float = 0.5,
+        like_user_message: bool = False,
+        event_specific_args: list[str] | None = None,
     ):
         self.fn = fn
         self._id = _id
@@ -552,6 +561,11 @@ def __init__(
         # We need to keep track of which events are cancel events
         # so that the client can call the /cancel route directly
         self.is_cancel_function = is_cancel_function
+        self.time_limit = time_limit
+        self.stream_every = stream_every
+        self.connection = connection
+        self.like_user_message = like_user_message
+        self.event_specific_args = event_specific_args
 
         self.spaces_auto_wrap()
 
@@ -600,6 +614,11 @@ def get_config(self):
             "show_api": self.show_api,
             "zerogpu": self.zero_gpu,
             "rendered_in": self.rendered_in._id if self.rendered_in else None,
+            "connection": self.connection,
+            "time_limit": self.time_limit,
+            "stream_every": self.stream_every,
+            "like_user_message": self.like_user_message,
+            "event_specific_args": self.event_specific_args,
         }
 
 
@@ -671,14 +690,14 @@ def set_event_trigger(
             Component
             | BlockContext
             | Sequence[Component | BlockContext]
-            | AbstractSet[Component | BlockContext]
+            | Set[Component | BlockContext]
             | None
         ),
         outputs: (
             Component
             | BlockContext
             | Sequence[Component | BlockContext]
-            | AbstractSet[Component | BlockContext]
+            | Set[Component | BlockContext]
             | None
         ),
         preprocess: bool = True,
@@ -701,6 +720,11 @@ def set_event_trigger(
         show_api: bool = True,
         renderable: Renderable | None = None,
         is_cancel_function: bool = False,
+        connection: Literal["stream", "sse"] = "sse",
+        time_limit: float | None = None,
+        stream_every: float = 0.5,
+        like_user_message: bool = False,
+        event_specific_args: list[str] | None = None,
     ) -> tuple[BlockFunction, int]:
         """
         Adds an event to the component's dependencies.
@@ -728,6 +752,9 @@ def set_event_trigger(
             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.
             show_api: whether to show this event in the "view API" page of the Gradio app, or in the ".view_api()" method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False.
             is_cancel_function: whether this event cancels another running event.
+            connection: The connection format, either "sse" or "stream".
+            time_limit: The time limit for the function to run. Parameter only used for the `.stream()` event.
+            stream_every: The latency (in seconds) at which stream chunks are sent to the backend. Defaults to 0.5 seconds. Parameter only used for the `.stream()` event.
         Returns: dependency information, dependency index
         """
         # Support for singular parameter
@@ -738,7 +765,7 @@ def set_event_trigger(
             )
             for target in targets
         ]
-        if isinstance(inputs, AbstractSet):
+        if isinstance(inputs, Set):
             inputs_as_dict = True
             inputs = sorted(inputs, key=lambda x: x._id)
         else:
@@ -748,7 +775,7 @@ def set_event_trigger(
             elif not isinstance(inputs, Sequence):
                 inputs = [inputs]
 
-        if isinstance(outputs, AbstractSet):
+        if isinstance(outputs, Set):
             outputs = sorted(outputs, key=lambda x: x._id)
         elif outputs is None:
             outputs = []
@@ -760,6 +787,8 @@ def set_event_trigger(
 
         if _targets[0][1] in ["change", "key_up"] and trigger_mode is None:
             trigger_mode = "always_last"
+        elif _targets[0][1] in ["stream"] and trigger_mode is None:
+            trigger_mode = "multiple"
         elif trigger_mode is None:
             trigger_mode = "once"
         elif trigger_mode not in ["once", "multiple", "always_last"]:
@@ -839,6 +868,11 @@ def set_event_trigger(
             renderable=renderable,
             rendered_in=rendered_in,
             is_cancel_function=is_cancel_function,
+            connection=connection,
+            time_limit=time_limit,
+            stream_every=stream_every,
+            like_user_message=like_user_message,
+            event_specific_args=event_specific_args,
         )
 
         self.fns[self.fn_id] = block_fn
@@ -885,9 +919,14 @@ def get_layout(block: Block):
                 block_config["renderable"] = renderable._id
             if not block.skip_api:
                 block_config["api_info"] = block.api_info()  # type: ignore
-                # .example_inputs() has been renamed .example_payload() but
-                # we use the old name for backwards compatibility with custom components
-                # created on Gradio 4.20.0 or earlier
+                if hasattr(block, "api_info_as_input"):
+                    block_config["api_info_as_input"] = block.api_info_as_input()  # type: ignore
+                else:
+                    block_config["api_info_as_input"] = block.api_info()  # type: ignore
+                if hasattr(block, "api_info_as_output"):
+                    block_config["api_info_as_output"] = block.api_info_as_output()  # type: ignore
+                else:
+                    block_config["api_info_as_output"] = block.api_info()  # type: ignore
                 block_config["example_inputs"] = block.example_inputs()  # type: ignore
             config["components"].append(block_config)
 
@@ -949,8 +988,10 @@ def __init__(
         mode: str = "blocks",
         title: str = "Gradio",
         css: str | None = None,
+        css_paths: str | Path | Sequence[str | Path] | None = None,
         js: str | None = None,
         head: str | None = None,
+        head_paths: str | Path | Sequence[str | Path] | None = None,
         fill_height: bool = False,
         fill_width: bool = False,
         delete_cache: tuple[int, int] | None = None,
@@ -962,9 +1003,11 @@ def __init__(
             analytics_enabled: Whether to allow basic telemetry. If None, will use GRADIO_ANALYTICS_ENABLED environment variable or default to True.
             mode: A human-friendly name for the kind of Blocks or Interface being created. Used internally for analytics.
             title: The tab title to display when this is opened in a browser window.
-            css: Custom css as a string or path to a css file. This css will be included in the demo webpage.
-            js: Custom js as a string or path to a js file. The custom js should be in the form of a single js function. This function will automatically be executed when the page loads. For more flexibility, use the head parameter to insert js inside <script> tags.
-            head: Custom html to insert into the head of the demo webpage. This can be used to add custom meta tags, multiple scripts, stylesheets, etc. to the page.
+            css: Custom css as a code string. This css will be included in the demo webpage.
+            css_paths: Custom css as a pathlib.Path to a css file or a list of such paths. This css files will be read, concatenated, and included in the demo webpage. If the `css` parameter is also set, the css from `css` will be included first.
+            js: Custom js as a code string. The custom js should be in the form of a single js function. This function will automatically be executed when the page loads. For more flexibility, use the head parameter to insert js inside <script> tags.
+            head: Custom html code to insert into the head of the demo webpage. This can be used to add custom meta tags, multiple scripts, stylesheets, etc. to the page.
+            head_paths: Custom html code as a pathlib.Path to a html file or a list of such paths. This html files will be read, concatenated, and included in the head of the demo webpage. If the `head` parameter is also set, the html from `head` will be included first.
             fill_height: Whether to vertically expand top-level child components to the height of the window. If True, expansion occurs when the scale value of the child components >= 1.
             fill_width: Whether to horizontally expand to fill container fully. If False, centers and constrains app to a maximum width. Only applies if this is the outermost `Blocks` in your Gradio app.
             delete_cache: A tuple corresponding [frequency, age] both expressed in number of seconds. Every `frequency` seconds, the temporary files created by this Blocks instance will be deleted if more than `age` seconds have passed since the file was created. For example, setting this to (86400, 86400) will delete temporary files every day. The cache will be deleted entirely when the server restarts. If None, no cache deletion will occur.
@@ -998,22 +1041,24 @@ def __init__(
         self.pending_streams = defaultdict(dict)
         self.pending_diff_streams = defaultdict(dict)
         self.show_error = True
-        self.head = head
         self.fill_height = fill_height
         self.fill_width = fill_width
         self.delete_cache = delete_cache
-        if css is not None and os.path.exists(css):
-            with open(css, encoding="utf-8") as css_file:
-                self.css = css_file.read()
-        else:
-            self.css = css
-        if js is not None and os.path.exists(js):
-            with open(js, encoding="utf-8") as js_file:
-                self.js = js_file.read()
-        else:
-            self.js = js
+        self.extra_startup_events: list[Callable[..., Coroutine[Any, Any, Any]]] = []
+        self.css = css or ""
+        css_paths = utils.none_or_singleton_to_list(css_paths)
+        for css_path in css_paths or []:
+            with open(css_path, encoding="utf-8") as css_file:
+                self.css += "\n" + css_file.read()
+        self.js = js or ""
+        self.head = head or ""
+        head_paths = utils.none_or_singleton_to_list(head_paths)
+        for head_path in head_paths or []:
+            with open(head_path, encoding="utf-8") as head_file:
+                self.head += "\n" + head_file.read()
         self.renderables: list[Renderable] = []
         self.state_holder: StateHolder
+        self.custom_mount_path: str | None = None
 
         # For analytics_enabled and allow_flagging: (1) first check for
         # parameter, (2) check for env variable, (3) default to True/"manual"
@@ -1185,7 +1230,7 @@ def iterate_over_children(children_list):
             original_mapping[0] = root_block = Context.root_block or blocks
 
             if "layout" in config:
-                iterate_over_children(config["layout"]["children"])  #
+                iterate_over_children(config["layout"]["children"])
 
             first_dependency = None
 
@@ -1194,7 +1239,7 @@ def iterate_over_children(children_list):
                 raise ValueError(
                     "This config is missing the 'dependencies' field and cannot be loaded."
                 )
-            for dependency, fn in zip(config["dependencies"], fns):
+            for dependency, fn in zip(config["dependencies"], fns, strict=False):
                 # We used to add a "fake_event" to the config to cache examples
                 # without removing it. This was causing bugs in calling gr.load
                 # We fixed the issue by removing "fake_event" from the config in examples.py
@@ -1303,8 +1348,7 @@ def __repr__(self):
     def expects_oauth(self):
         """Return whether the app expects user to authenticate via OAuth."""
         return any(
-            isinstance(block, (components.LoginButton, components.LogoutButton))
-            for block in self.blocks.values()
+            isinstance(block, components.LoginButton) for block in self.blocks.values()
         )
 
     def unload(self, fn: Callable[..., Any]) -> None:
@@ -1501,7 +1545,9 @@ async def call_function(
 
         if iterator is None:  # If not a generator function that has already run
             if block_fn.inputs_as_dict:
-                processed_input = [dict(zip(block_fn.inputs, processed_input))]
+                processed_input = [
+                    dict(zip(block_fn.inputs, processed_input, strict=False))
+                ]
 
             processed_input, progress_index, _ = special_args(
                 block_fn.fn, processed_input, request, event_data
@@ -1670,7 +1716,7 @@ def validate_outputs(self, block_fn: BlockFunction, predictions: Any | list[Any]
         if not isinstance(predictions, (list, tuple)):
             predictions = [predictions]
 
-        if len(predictions) < len(dep_outputs):
+        if len(predictions) != len(dep_outputs):
             name = (
                 f" ({block_fn.name})"
                 if block_fn.name and block_fn.name != "<lambda>"
@@ -1680,7 +1726,7 @@ def validate_outputs(self, block_fn: BlockFunction, predictions: Any | list[Any]
             wanted_args = []
             received_args = []
             for block in dep_outputs:
-                wanted_args.append(str(block))
+                wanted_args.append(str(block.get_block_class()))
             for pred in predictions:
                 v = f'"{pred}"' if isinstance(pred, str) else str(pred)
                 received_args.append(v)
@@ -1688,13 +1734,22 @@ def validate_outputs(self, block_fn: BlockFunction, predictions: Any | list[Any]
             wanted = ", ".join(wanted_args)
             received = ", ".join(received_args)
 
-            raise ValueError(
-                f"""An event handler{name} didn't receive enough output values (needed: {len(dep_outputs)}, received: {len(predictions)}).
-Wanted outputs:
-    [{wanted}]
-Received outputs:
-    [{received}]"""
-            )
+            if len(predictions) < len(dep_outputs):
+                raise ValueError(
+                    f"""A  function{name} didn't return enough output values (needed: {len(dep_outputs)}, returned: {len(predictions)}).
+    Output components:
+        [{wanted}]
+    Output values returned:
+        [{received}]"""
+                )
+            else:
+                warnings.warn(
+                    f"""A function{name} returned too many output values (needed: {len(dep_outputs)}, returned: {len(predictions)}). Ignoring extra values.
+    Output components:
+        [{wanted}]
+    Output values returned:
+        [{received}]"""
+                )
 
     async def postprocess_data(
         self,
@@ -1703,7 +1758,14 @@ async def postprocess_data(
         state: SessionState | None,
     ) -> list[Any]:
         state = state or SessionState(self)
-
+        if (
+            isinstance(predictions, dict)
+            and predictions == skip()
+            and len(block_fn.outputs) > 1
+        ):
+            # For developer convenience, if a function returns a single skip() with multiple outputs,
+            # we will skip updating all outputs.
+            predictions = [skip()] * len(block_fn.outputs)
         if isinstance(predictions, dict) and len(predictions) > 0:
             predictions = convert_component_dict_to_list(
                 [block._id for block in block_fn.outputs], predictions
@@ -1752,7 +1814,6 @@ async def postprocess_data(
                     kwargs["render"] = False
 
                     state[block._id] = block.__class__(**kwargs)
-
                     prediction_value = postprocess_update_dict(
                         block=state[block._id],
                         update_dict=prediction_value,
@@ -1783,23 +1844,39 @@ async def handle_streaming_outputs(
         session_hash: str | None,
         run: int | None,
         root_path: str | None = None,
+        final: bool = False,
     ) -> list:
         if session_hash is None or run is None:
             return data
         if run not in self.pending_streams[session_hash]:
             self.pending_streams[session_hash][run] = {}
-        stream_run = self.pending_streams[session_hash][run]
+        stream_run: dict[int, MediaStream] = self.pending_streams[session_hash][run]
 
         for i, block in enumerate(block_fn.outputs):
             output_id = block._id
-            if isinstance(block, components.StreamingOutput) and block.streaming:
+            if (
+                isinstance(block, components.StreamingOutput)
+                and block.streaming
+                and not utils.is_prop_update(data[i])
+            ):
+                if final:
+                    stream_run[output_id].end_stream()
                 first_chunk = output_id not in stream_run
-                binary_data, output_data = block.stream_output(
-                    data[i], f"{session_hash}/{run}/{output_id}", first_chunk
+                binary_data, output_data = await block.stream_output(
+                    data[i],
+                    f"{session_hash}/{run}/{output_id}/playlist.m3u8",
+                    first_chunk,
                 )
                 if first_chunk:
-                    stream_run[output_id] = []
-                self.pending_streams[session_hash][run][output_id].append(binary_data)
+                    desired_output_format = None
+                    if orig_name := output_data.get("orig_name"):
+                        desired_output_format = Path(orig_name).suffix[1:]
+                    stream_run[output_id] = MediaStream(
+                        desired_output_format=desired_output_format
+                    )
+                    stream_run[output_id]
+
+                await stream_run[output_id].add_segment(binary_data)
                 output_data = await processing_utils.async_move_files_to_cache(
                     output_data,
                     block,
@@ -1883,6 +1960,7 @@ async def process_api(
         batch = block_fn.batch
         state_ids_to_track, hashed_values = self.get_state_ids_to_track(block_fn, state)
         changed_state_ids = []
+        LocalContext.blocks.set(self)
 
         if batch:
             max_batch_size = block_fn.max_batch_size
@@ -1902,11 +1980,11 @@ async def process_api(
                 )
             inputs = [
                 await self.preprocess_data(block_fn, list(i), state, explicit_call)
-                for i in zip(*inputs)
+                for i in zip(*inputs, strict=False)
             ]
             result = await self.call_function(
                 block_fn,
-                list(zip(*inputs)),
+                list(zip(*inputs, strict=False)),
                 None,
                 request,
                 event_id,
@@ -1917,11 +1995,11 @@ async def process_api(
             preds = result["prediction"]
             data = [
                 await self.postprocess_data(block_fn, list(o), state)
-                for o in zip(*preds)
+                for o in zip(*preds, strict=False)
             ]
             if root_path is not None:
                 data = processing_utils.add_root_url(data, root_path, None)  # type: ignore
-            data = list(zip(*data))
+            data = list(zip(*data, strict=False))
             is_generating, iterator = None, None
         else:
             old_iterator = iterator
@@ -1946,7 +2024,9 @@ async def process_api(
             if state:
                 changed_state_ids = [
                     state_id
-                    for hash_value, state_id in zip(hashed_values, state_ids_to_track)
+                    for hash_value, state_id in zip(
+                        hashed_values, state_ids_to_track, strict=False
+                    )
                     if hash_value != utils.deep_hash(state[state_id])
                 ]
 
@@ -1961,6 +2041,7 @@ async def process_api(
                     session_hash=session_hash,
                     run=run,
                     root_path=root_path,
+                    final=not is_generating,
                 )
                 data = self.handle_streaming_diffs(
                     block_fn,
@@ -2023,6 +2104,7 @@ def get_config(self):
     def get_config_file(self) -> BlocksConfigDict:
         config: BlocksConfigDict = {
             "version": routes.VERSION,
+            "api_prefix": API_PREFIX,
             "mode": self.mode,
             "app_id": self.app_id,
             "dev_mode": self.dev_mode,
@@ -2106,7 +2188,6 @@ def queue(
         status_update_rate: float | Literal["auto"] = "auto",
         api_open: bool | None = None,
         max_size: int | None = None,
-        concurrency_count: int | None = None,
         *,
         default_concurrency_limit: int | None | Literal["not_set"] = "not_set",
     ):
@@ -2116,7 +2197,6 @@ def queue(
             status_update_rate: If "auto", Queue will send status estimations to all clients whenever a job is finished. Otherwise Queue will send status at regular intervals set by this parameter as the number of seconds.
             api_open: If True, the REST routes of the backend will be open, allowing requests made directly to those endpoints to skip the queue.
             max_size: The maximum number of events the queue will store at any given moment. If the queue is full, new events will not be added and a user will receive a message saying that the queue is full. If None, the queue size will be unlimited.
-            concurrency_count: Deprecated. Set the concurrency_limit directly on event listeners e.g. btn.click(fn, ..., concurrency_limit=10) or gr.Interface(concurrency_limit=10). If necessary, the total number of workers can be configured via `max_threads` in launch().
             default_concurrency_limit: The default value of `concurrency_limit` to use for event listeners that don't specify a value. Can be set by environment variable GRADIO_DEFAULT_CONCURRENCY_LIMIT. Defaults to 1 if not set otherwise.
         Example: (Blocks)
             with gr.Blocks() as demo:
@@ -2129,10 +2209,6 @@ def queue(
             demo.queue(max_size=20)
             demo.launch()
         """
-        if concurrency_count:
-            raise DeprecationWarning(
-                "concurrency_count has been deprecated. Set the concurrency_limit directly on event listeners e.g. btn.click(fn, ..., concurrency_limit=10) or gr.Interface(concurrency_limit=10). If necessary, the total number of workers can be configured via `max_threads` in launch()."
-            )
         if api_open is not None:
             self.api_open = api_open
         if utils.is_zero_gpu_space():
@@ -2197,9 +2273,13 @@ def launch(
         share_server_protocol: Literal["http", "https"] | None = None,
         auth_dependency: Callable[[fastapi.Request], str | None] | None = None,
         max_file_size: str | int | None = None,
-        _frontend: bool = True,
         enable_monitoring: bool | None = None,
-    ) -> tuple[FastAPI, str, str]:
+        strict_cors: bool = True,
+        node_server_name: str | None = None,
+        node_port: int | None = None,
+        ssr_mode: bool | None = None,
+        _frontend: bool = True,
+    ) -> tuple[routes.App, str, str]:
         """
         Launches a simple web server that serves the demo. Can also be used to create a
         public link used by anyone to access the demo from their browser by setting share=True.
@@ -2224,7 +2304,7 @@ def launch(
             ssl_verify: If False, skips certificate validation which allows self-signed certificates to be used.
             quiet: If True, suppresses most print statements.
             show_api: If True, shows the api docs in the footer of the app. Default True.
-            allowed_paths: List of complete filepaths or parent directories that gradio is allowed to serve. Must be absolute paths. Warning: if you provide directories, any files in these directories or their subdirectories are accessible to all users of your app. Can be set by comma separated environment variable GRADIO_ALLOWED_PATHS.
+            allowed_paths: List of complete filepaths or parent directories that gradio is allowed to serve. Must be absolute paths. Warning: if you provide directories, any files in these directories or their subdirectories are accessible to all users of your app. Can be set by comma separated environment variable GRADIO_ALLOWED_PATHS. These files are generally assumed to be secure and will be displayed in the browser when possible.
             blocked_paths: List of complete filepaths or parent directories that gradio is not allowed to serve (i.e. users of your app are not allowed to access). Must be absolute paths. Warning: takes precedence over `allowed_paths` and all other directories exposed by Gradio by default. Can be set by comma separated environment variable GRADIO_BLOCKED_PATHS.
             root_path: The root path (or "mount point") of the application, if it's not served from the root ("/") of the domain. Often used when the application is behind a reverse proxy that forwards requests to the application. For example, if the application is served at "https://example.com/myapp", the `root_path` should be set to "/myapp". A full URL beginning with http:// or https:// can be provided, which will be used as the root path in its entirety. Can be set by environment variable GRADIO_ROOT_PATH. Defaults to "".
             app_kwargs: Additional keyword arguments to pass to the underlying FastAPI app as a dictionary of parameter keys and argument values. For example, `{"docs_url": "/docs"}`
@@ -2234,6 +2314,8 @@ def launch(
             auth_dependency: A function that takes a FastAPI request and returns a string user ID or None. If the function returns None for a specific request, that user is not authorized to access the app (they will see a 401 Unauthorized response). To be used with external authentication systems like OAuth. Cannot be used with `auth`.
             max_file_size: The maximum file size in bytes that can be uploaded. Can be a string of the form "<value><unit>", where value is any positive integer and unit is one of "b", "kb", "mb", "gb", "tb". If None, no limit is set.
             enable_monitoring: Enables traffic monitoring of the app through the /monitoring endpoint. By default is None, which enables this endpoint. If explicitly True, will also print the monitoring URL to the console. If False, will disable monitoring altogether.
+            strict_cors: If True, prevents external domains from making requests to a Gradio server running on localhost. If False, allows requests to localhost that originate from localhost but also, crucially, from "null". This parameter should normally be True to prevent CSRF attacks but may need to be False when embedding a *locally-running Gradio app* using web components.
+            ssr_mode: If True, the Gradio app will be rendered using server-side rendering mode, which is typically more performant and provides better SEO, but this requires Node 18+ to be installed on the system. If False, the app will be rendered using client-side rendering mode. If None, will use GRADIO_SSR_MODE environment variable or default to False.
         Returns:
             app: FastAPI app object that is running the demo
             local_url: Locally accessible link to the demo
@@ -2297,7 +2379,6 @@ def reverse(text):
             self.root_path = os.environ.get("GRADIO_ROOT_PATH", "")
         else:
             self.root_path = root_path
-
         self.show_api = show_api
 
         if allowed_paths:
@@ -2338,9 +2419,37 @@ def reverse(text):
         self.config = self.get_config_file()
         self.max_threads = max_threads
         self._queue.max_thread_count = max_threads
+
+        self.ssr_mode = (
+            False
+            if wasm_utils.IS_WASM
+            else (
+                ssr_mode
+                if ssr_mode is not None
+                else os.getenv("GRADIO_SSR_MODE", "False").lower() == "true"
+            )
+        )
+        self.node_path = os.environ.get(
+            "GRADIO_NODE_PATH", "" if wasm_utils.IS_WASM else get_node_path()
+        )
+        if self.ssr_mode:
+            self.node_server_name, self.node_process, self.node_port = (
+                start_node_server(
+                    server_name=node_server_name,
+                    server_port=node_port,
+                    node_path=self.node_path,
+                )
+            )
+        else:
+            self.node_server_name = self.node_port = self.node_process = None
+
         # self.server_app is included for backwards compatibility
         self.server_app = self.app = App.create_app(
-            self, auth_dependency=auth_dependency, app_kwargs=app_kwargs
+            self,
+            auth_dependency=auth_dependency,
+            app_kwargs=app_kwargs,
+            strict_cors=strict_cors,
+            ssr_mode=self.ssr_mode,
         )
 
         if self.is_running:
@@ -2378,6 +2487,7 @@ def reverse(text):
                 )
             self.server_name = server_name
             self.local_url = local_url
+            self.local_api_url = f"{self.local_url.rstrip('/')}{API_PREFIX}/"
             self.server_port = server_port
             self.server = server
             self.is_running = True
@@ -2387,6 +2497,7 @@ def reverse(text):
             self.share_server_protocol = share_server_protocol or (
                 "http" if share_server_address is not None else "https"
             )
+            self.has_launched = True
 
             self.protocol = (
                 "https"
@@ -2394,11 +2505,12 @@ def reverse(text):
                 else "http"
             )
             if not wasm_utils.IS_WASM and not self.is_colab and not quiet:
-                print(
-                    strings.en["RUNNING_LOCALLY_SEPARATED"].format(
-                        self.protocol, self.server_name, self.server_port
-                    )
+                s = (
+                    strings.en["RUNNING_LOCALLY_SSR"]
+                    if self.ssr_mode
+                    else strings.en["RUNNING_LOCALLY"]
                 )
+                print(s.format(self.protocol, self.server_name, self.server_port))
 
             self._queue.set_server_app(self.server_app)
 
@@ -2406,7 +2518,9 @@ def reverse(text):
                 # Cannot run async functions in background other than app's scope.
                 # Workaround by triggering the app endpoint
                 httpx.get(
-                    f"{self.local_url}startup-events", verify=ssl_verify, timeout=None
+                    f"{self.local_api_url}startup-events",
+                    verify=ssl_verify,
+                    timeout=None,
                 )
             else:
                 # NOTE: One benefit of the code above dispatching `startup_events()` via a self HTTP request is
@@ -2415,10 +2529,11 @@ def reverse(text):
                 # will be cancelled just by stopping the server.
                 # In contrast, in the Wasm env, we can't do that because `threading` is not supported and all async tasks will run in the same event loop, `pyodide.webloop.WebLoop` in the main thread.
                 # So we need to manually cancel them. See `self.close()`..
-                self.startup_events()
+                self.run_startup_events()
 
-        utils.launch_counter()
-        self.is_sagemaker = utils.sagemaker_check()
+        self.is_sagemaker = (
+            False  # TODO: fix Gradio's behavior in sagemaker and other hosted notebooks
+        )
         if share is None:
             if self.is_colab:
                 if not quiet:
@@ -2502,12 +2617,18 @@ def reverse(text):
                 print(strings.en["SHARE_LINK_DISPLAY"].format(self.share_url))
                 if not (quiet):
                     print(strings.en["SHARE_LINK_MESSAGE"])
-            except (RuntimeError, httpx.ConnectError):
+            except Exception as e:
                 if self.analytics_enabled:
                     analytics.error_analytics("Not able to set up tunnel")
                 self.share_url = None
                 self.share = False
-                if Path(BINARY_PATH).exists():
+                if isinstance(e, ChecksumMismatchError):
+                    print(
+                        strings.en["COULD_NOT_GET_SHARE_LINK_CHECKSUM"].format(
+                            BINARY_PATH
+                        )
+                    )
+                elif Path(BINARY_PATH).exists():
                     print(strings.en["COULD_NOT_GET_SHARE_LINK"])
                 else:
                     print(
@@ -2738,7 +2859,7 @@ def attach_load_events(self):
                     )[0]
                     component.load_event = dep.get_config()
 
-    def startup_events(self):
+    def run_startup_events(self):
         """Events that should be run when the app containing this block starts up."""
         self._queue.start()
         # So that processing can resume in case the queue was stopped
@@ -2746,6 +2867,10 @@ def startup_events(self):
         self.is_running = True
         self.create_limiter()
 
+    async def run_extra_startup_events(self):
+        for startup_event in self.extra_startup_events:
+            await startup_event()
+
     def get_api_info(self, all_endpoints: bool = False) -> dict[str, Any] | None:
         """
         Gets the information needed to generate the API docs from a Blocks.
@@ -2780,7 +2905,7 @@ def get_api_info(self, all_endpoints: bool = False) -> dict[str, Any] | None:
                 comp = self.get_component(component["id"])
                 if not isinstance(comp, components.Component):
                     raise TypeError(f"{comp!r} is not a Component")
-                info = component["api_info"]
+                info = component.get("api_info_as_input", component.get("api_info"))
                 example = comp.example_inputs()
                 python_type = client_utils.json_schema_to_python_type(info)
 
@@ -2825,7 +2950,7 @@ def get_api_info(self, all_endpoints: bool = False) -> dict[str, Any] | None:
                         "type": info,
                         "python_type": {
                             "type": python_type,
-                            "description": info.get("description", ""),
+                            "description": info.get("additional_description", ""),
                         },
                         "component": type.capitalize(),
                         "example_input": example,
@@ -2847,7 +2972,7 @@ def get_api_info(self, all_endpoints: bool = False) -> dict[str, Any] | None:
                 comp = self.get_component(component["id"])
                 if not isinstance(comp, components.Component):
                     raise TypeError(f"{comp!r} is not a Component")
-                info = component["api_info"]
+                info = component.get("api_info_as_output", component["api_info"])
                 example = comp.example_inputs()
                 python_type = client_utils.json_schema_to_python_type(info)
                 dependency_info["returns"].append(
diff --git a/gradio/chat_interface.py b/gradio/chat_interface.py
index 296851c1afc68..53328a42646cc 100644
--- a/gradio/chat_interface.py
+++ b/gradio/chat_interface.py
@@ -8,7 +8,9 @@
 import functools
 import inspect
 import warnings
-from typing import AsyncGenerator, Callable, Literal, Union, cast
+from collections.abc import AsyncGenerator, Callable, Sequence
+from pathlib import Path
+from typing import Literal, Union, cast
 
 import anyio
 from gradio_client.documentation import document
@@ -24,11 +26,18 @@
     Textbox,
     get_component_instance,
 )
-from gradio.components.chatbot import FileDataDict, Message, MessageDict, TupleFormat
-from gradio.components.multimodal_textbox import MultimodalData
-from gradio.events import Dependency, on
+from gradio.components.chatbot import (
+    ExampleMessage,
+    FileDataDict,
+    Message,
+    MessageDict,
+    TupleFormat,
+)
+from gradio.components.multimodal_textbox import MultimodalPostprocess, MultimodalValue
+from gradio.context import get_blocks_context
+from gradio.events import Dependency, SelectData
 from gradio.helpers import create_examples as Examples  # noqa: N812
-from gradio.helpers import special_args
+from gradio.helpers import special_args, update
 from gradio.layouts import Accordion, Group, Row
 from gradio.routes import Request
 from gradio.themes import ThemeClass as Theme
@@ -49,7 +58,7 @@ class ChatInterface(Blocks):
         def echo(message, history):
             return message
 
-        demo = gr.ChatInterface(fn=echo, examples=["hello", "hola", "merhaba"], title="Echo Bot")
+        demo = gr.ChatInterface(fn=echo, type="messages", examples=[{"text": "hello", "text": "hola", "text": "merhaba"}], title="Echo Bot")
         demo.launch()
     Demos: chatinterface_multimodal, chatinterface_random_response, chatinterface_streaming_echo
     Guides: creating-a-chatbot-fast, sharing-your-app
@@ -64,69 +73,74 @@ def __init__(
         chatbot: Chatbot | None = None,
         textbox: Textbox | MultimodalTextbox | None = None,
         additional_inputs: str | Component | list[str | Component] | None = None,
-        additional_inputs_accordion_name: str | None = None,
         additional_inputs_accordion: str | Accordion | None = None,
-        examples: list[str] | list[dict[str, str | list]] | list[list] | None = None,
-        cache_examples: bool | Literal["lazy"] | None = None,
-        examples_per_page: int = 10,
+        examples: list[str] | list[MultimodalValue] | list[list] | None = None,
+        example_labels: list[str] | None = None,
+        example_icons: list[str] | None = None,
+        cache_examples: bool | None = None,
+        cache_mode: Literal["eager", "lazy"] | None = None,
         title: str | None = None,
         description: str | None = None,
         theme: Theme | str | None = None,
         css: str | None = None,
+        css_paths: str | Path | Sequence[str | Path] | None = None,
         js: str | None = None,
         head: str | None = None,
+        head_paths: str | Path | Sequence[str | Path] | None = None,
         analytics_enabled: bool | None = None,
-        submit_btn: str | None | Button = "Submit",
-        stop_btn: str | None | Button = "Stop",
-        retry_btn: str | None | Button = "🔄  Retry",
-        undo_btn: str | None | Button = "↩️ Undo",
-        clear_btn: str | None | Button = "🗑️  Clear",
         autofocus: bool = True,
+        autoscroll: bool = True,
         concurrency_limit: int | None | Literal["default"] = "default",
         fill_height: bool = True,
         delete_cache: tuple[int, int] | None = None,
         show_progress: Literal["full", "minimal", "hidden"] = "minimal",
         fill_width: bool = False,
+        submit_btn: str | bool | None = True,
+        stop_btn: str | bool | None = True,
     ):
         """
         Parameters:
             fn: the function to wrap the chat interface around. Should accept two parameters: a string input message and list of two-element lists of the form [[user_message, bot_message], ...] representing the chat history, and return a string response. See the Chatbot documentation for more information on the chat history format.
             multimodal: if True, the chat interface will use a gr.MultimodalTextbox component for the input, which allows for the uploading of multimedia files. If False, the chat interface will use a gr.Textbox component for the input.
+            type: The format of the messages passed into the chat history parameter of `fn`. If "messages", passes the value as a list of dictionaries with openai-style "role" and "content" keys. The "content" key's value should be one of the following - (1) strings in valid Markdown (2) a dictionary with a "path" key and value corresponding to the file to display or (3) an instance of a Gradio component. At the moment Image, Plot, Video, Gallery, Audio, and HTML are supported. The "role" key should be one of 'user' or 'assistant'. Any other roles will not be displayed in the output. If this parameter is 'tuples', expects a `list[list[str | None | tuple]]`, i.e. a list of lists. The inner list should have 2 elements: the user message and the response message, but this format is deprecated.
             chatbot: an instance of the gr.Chatbot component to use for the chat interface, if you would like to customize the chatbot properties. If not provided, a default gr.Chatbot component will be created.
             textbox: an instance of the gr.Textbox or gr.MultimodalTextbox component to use for the chat interface, if you would like to customize the textbox properties. If not provided, a default gr.Textbox or gr.MultimodalTextbox component will be created.
             additional_inputs: an instance or list of instances of gradio components (or their string shortcuts) to use as additional inputs to the chatbot. If components are not already rendered in a surrounding Blocks, then the components will be displayed under the chatbot, in an accordion.
-            additional_inputs_accordion_name: Deprecated. Will be removed in a future version of Gradio. Use the `additional_inputs_accordion` parameter instead.
             additional_inputs_accordion: if a string is provided, this is the label of the `gr.Accordion` to use to contain additional inputs. A `gr.Accordion` object can be provided as well to configure other properties of the container holding the additional inputs. Defaults to a `gr.Accordion(label="Additional Inputs", open=False)`. This parameter is only used if `additional_inputs` is provided.
-            examples: sample inputs for the function; if provided, appear below the chatbot and can be clicked to populate the chatbot input. Should be a list of strings if `multimodal` is False, and a list of dictionaries (with keys `text` and `files`) if `multimodal` is True.
+            examples: sample inputs for the function; if provided, appear within the chatbot and can be clicked to populate the chatbot input. Should be a list of strings if `multimodal` is False, and a list of dictionaries (with keys `text` and `files`) if `multimodal` is True. Should also include values for the additional inputs if they are provided.
+            example_labels: labels for the examples, to be displayed instead of the examples themselves. If provided, should be a list of strings with the same length as the examples list.
+            example_icons: icons for the examples, to be displayed above the examples. If provided, should be a list of string URLs or local paths with the same length as the examples list.
             cache_examples: if True, caches examples in the server for fast runtime in examples. The default option in HuggingFace Spaces is True. The default option elsewhere is False.
-            examples_per_page: if examples are provided, how many to display per page.
+            cache_mode: If "lazy", then examples are cached (for all users of the app) after their first use (by any user of the app). If "eager", all examples are cached at app launch. If None, will use the GRADIO_CACHE_MODE environment variable if defined, or default to "eager".
             title: a title for the interface; if provided, appears above chatbot in large font. Also used as the tab title when opened in a browser window.
             description: a description for the interface; if provided, appears above the chatbot and beneath the title in regular font. Accepts Markdown and HTML content.
             theme: a Theme object or a string representing a theme. If a string, will look for a built-in theme with that name (e.g. "soft" or "default"), or will attempt to load a theme from the Hugging Face Hub (e.g. "gradio/monochrome"). If None, will use the Default theme.
-            css: custom css as a string or path to a css file. This css will be included in the demo webpage.
-            js: custom js as a string or path to a js file. The custom js should be in the form of a single js function. This function will automatically be executed when the page loads. For more flexibility, use the head parameter to insert js inside <script> tags.
-            head: custom html to insert into the head of the demo webpage. This can be used to add custom meta tags, multiple scripts, stylesheets, etc. to the page.
+            css: Custom css as a code string. This css will be included in the demo webpage.
+            css_paths: Custom css as a pathlib.Path to a css file or a list of such paths. This css files will be read, concatenated, and included in the demo webpage. If the `css` parameter is also set, the css from `css` will be included first.
+            js: Custom js as a code string. The custom js should be in the form of a single js function. This function will automatically be executed when the page loads. For more flexibility, use the head parameter to insert js inside <script> tags.
+            head: Custom html code to insert into the head of the demo webpage. This can be used to add custom meta tags, multiple scripts, stylesheets, etc. to the page.
+            head_paths: Custom html code as a pathlib.Path to a html file or a list of such paths. This html files will be read, concatenated, and included in the head of the demo webpage. If the `head` parameter is also set, the html from `head` will be included first.
             analytics_enabled: whether to allow basic telemetry. If None, will use GRADIO_ANALYTICS_ENABLED environment variable if defined, or default to True.
-            submit_btn: text to display on the submit button. If None, no button will be displayed. If a Button object, that button will be used.
-            stop_btn: text to display on the stop button, which replaces the submit_btn when the submit_btn or retry_btn is clicked and response is streaming. Clicking on the stop_btn will halt the chatbot response. If set to None, stop button functionality does not appear in the chatbot. If a Button object, that button will be used as the stop button.
-            retry_btn: text to display on the retry button. If None, no button will be displayed. If a Button object, that button will be used.
-            undo_btn: text to display on the delete last button. If None, no button will be displayed. If a Button object, that button will be used.
-            clear_btn: text to display on the clear button. If None, no button will be displayed. If a Button object, that button will be used.
             autofocus: if True, autofocuses to the textbox when the page loads.
+            autoscroll: If True, will automatically scroll to the bottom of the textbox when the value changes, unless the user scrolls up. If False, will not scroll to the bottom of the textbox when the value changes.
             concurrency_limit: if set, this is the maximum number of chatbot submissions that can be running simultaneously. Can be set to None to mean no limit (any number of chatbot submissions can be running simultaneously). Set to "default" to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `.queue()`, which is 1 by default).
             fill_height: if True, the chat interface will expand to the height of window.
             delete_cache: a tuple corresponding [frequency, age] both expressed in number of seconds. Every `frequency` seconds, the temporary files created by this Blocks instance will be deleted if more than `age` seconds have passed since the file was created. For example, setting this to (86400, 86400) will delete temporary files every day. The cache will be deleted entirely when the server restarts. If None, no cache deletion will occur.
             show_progress: how to show the progress animation while event is running: "full" shows a spinner which covers the output component area as well as a runtime display in the upper right corner, "minimal" only shows the runtime display, "hidden" shows no progress animation at all
             fill_width: Whether to horizontally expand to fill container fully. If False, centers and constrains app to a maximum width.
+            submit_btn: If True, will show a submit button with a submit icon within the textbox. If a string, will use that string as the submit button text in place of the icon. If False, will not show a submit button.
+            stop_btn: If True, will show a button with a stop icon during generator executions, to stop generating. If a string, will use that string as the submit button text in place of the stop icon. If False, will not show a stop button.
         """
         super().__init__(
             analytics_enabled=analytics_enabled,
             mode="chat_interface",
-            css=css,
             title=title or "Gradio",
             theme=theme,
+            css=css,
+            css_paths=css_paths,
             js=js,
             head=head,
+            head_paths=head_paths,
             fill_height=fill_height,
             fill_width=fill_width,
             delete_cache=delete_cache,
@@ -141,10 +155,10 @@ def __init__(
         self.is_generator = inspect.isgeneratorfunction(
             self.fn
         ) or inspect.isasyncgenfunction(self.fn)
-        self.buttons: list[Button | None] = []
 
         self.examples = examples
         self.cache_examples = cache_examples
+        self.cache_mode = cache_mode
 
         if additional_inputs:
             if not isinstance(additional_inputs, list):
@@ -155,13 +169,6 @@ def __init__(
             ]
         else:
             self.additional_inputs = []
-        if additional_inputs_accordion_name is not None:
-            print(
-                "The `additional_inputs_accordion_name` parameter is deprecated and will be removed in a future version of Gradio. Use the `additional_inputs_accordion` parameter instead."
-            )
-            self.additional_inputs_accordion_params = {
-                "label": additional_inputs_accordion_name
-            }
         if additional_inputs_accordion is None:
             self.additional_inputs_accordion_params = {
                 "label": "Additional Inputs",
@@ -190,6 +197,24 @@ def __init__(
             if description:
                 Markdown(description)
 
+            examples_messages: list[ExampleMessage] = []
+            if examples:
+                for index, example in enumerate(examples):
+                    if isinstance(example, list):
+                        example = example[0]
+                    example_message: ExampleMessage = {}
+                    if isinstance(example, str):
+                        example_message["text"] = example
+                    elif isinstance(example, dict):
+                        example_message["text"] = example.get("text", "")
+                        example_message["files"] = example.get("files", [])
+                    if example_labels:
+                        example_message["display_text"] = example_labels[index]
+                    if example_icons:
+                        example_message["icon"] = example_icons[index]
+                    examples_messages.append(example_message)
+
+            self.provided_chatbot = chatbot is not None
             if chatbot:
                 if self.type != chatbot.type:
                     warnings.warn(
@@ -197,37 +222,23 @@ def __init__(
                         "Recieved type of chatbot: {chatbot.type}, type of chat interface: {self.type}"
                     )
                     chatbot.type = self.type
-                self.chatbot = get_component_instance(chatbot, render=True)
+                self.chatbot = cast(
+                    Chatbot, get_component_instance(chatbot, render=True)
+                )
+                self.chatbot.examples = examples_messages
             else:
                 self.chatbot = Chatbot(
                     label="Chatbot",
                     scale=1,
                     height=200 if fill_height else None,
                     type=self.type,
+                    autoscroll=autoscroll,
+                    examples=examples_messages if not self.additional_inputs else None,
                 )
 
-            with Row():
-                for btn in [retry_btn, undo_btn, clear_btn]:
-                    if btn is not None:
-                        if isinstance(btn, Button):
-                            btn.render()
-                        elif isinstance(btn, str):
-                            btn = Button(
-                                btn, variant="secondary", size="sm", min_width=60
-                            )
-                        else:
-                            raise ValueError(
-                                f"All the _btn parameters must be a gr.Button, string, or None, not {builtins.type(btn)}"
-                            )
-                    self.buttons.append(btn)  # type: ignore
-
             with Group():
                 with Row():
                     if textbox:
-                        if self.multimodal:
-                            submit_btn = None
-                        else:
-                            textbox.container = False
                         textbox.show_label = False
                         textbox_ = get_component_instance(textbox, render=True)
                         if not isinstance(textbox_, (Textbox, MultimodalTextbox)):
@@ -235,81 +246,53 @@ def __init__(
                                 f"Expected a gr.Textbox or gr.MultimodalTextbox component, but got {builtins.type(textbox_)}"
                             )
                         self.textbox = textbox_
-                    elif self.multimodal:
-                        submit_btn = None
-                        self.textbox = MultimodalTextbox(
-                            show_label=False,
-                            label="Message",
-                            placeholder="Type a message...",
-                            scale=7,
-                            autofocus=autofocus,
-                        )
                     else:
-                        self.textbox = Textbox(
-                            container=False,
+                        textbox_component = (
+                            MultimodalTextbox if self.multimodal else Textbox
+                        )
+                        self.textbox = textbox_component(
                             show_label=False,
                             label="Message",
                             placeholder="Type a message...",
                             scale=7,
                             autofocus=autofocus,
+                            submit_btn=submit_btn,
+                            stop_btn=stop_btn,
                         )
-                    if submit_btn is not None and not multimodal:
-                        if isinstance(submit_btn, Button):
-                            submit_btn.render()
-                        elif isinstance(submit_btn, str):
-                            submit_btn = Button(
-                                submit_btn,
-                                variant="primary",
-                                scale=1,
-                                min_width=150,
-                            )
-                        else:
-                            raise ValueError(
-                                f"The submit_btn parameter must be a gr.Button, string, or None, not {builtins.type(submit_btn)}"
-                            )
-                    if stop_btn is not None:
-                        if isinstance(stop_btn, Button):
-                            stop_btn.visible = False
-                            stop_btn.render()
-                        elif isinstance(stop_btn, str):
-                            stop_btn = Button(
-                                stop_btn,
-                                variant="stop",
-                                visible=False,
-                                scale=1,
-                                min_width=150,
-                            )
-                        else:
-                            raise ValueError(
-                                f"The stop_btn parameter must be a gr.Button, string, or None, not {builtins.type(stop_btn)}"
-                            )
-                    self.buttons.extend([submit_btn, stop_btn])  # type: ignore
+
+                    # Hide the stop button at the beginning, and show it with the given value during the generator execution.
+                    self.original_stop_btn = self.textbox.stop_btn
+                    self.textbox.stop_btn = False
 
                 self.fake_api_btn = Button("Fake API", visible=False)
                 self.fake_response_textbox = Textbox(label="Response", visible=False)
-                (
-                    self.retry_btn,
-                    self.undo_btn,
-                    self.clear_btn,
-                    self.submit_btn,
-                    self.stop_btn,
-                ) = self.buttons
 
             if examples:
                 if self.is_generator:
                     examples_fn = self._examples_stream_fn
                 else:
                     examples_fn = self._examples_fn
-
-                self.examples_handler = Examples(
-                    examples=examples,
-                    inputs=[self.textbox] + self.additional_inputs,
-                    outputs=self.chatbot,
-                    fn=examples_fn,
-                    cache_examples=self.cache_examples,
-                    _defer_caching=True,
-                    examples_per_page=examples_per_page,
-                )
+                if self.examples and self.additional_inputs:
+                    self.examples_handler = Examples(
+                        examples=examples,
+                        inputs=[self.textbox] + self.additional_inputs,
+                        outputs=self.chatbot,
+                        fn=examples_fn,
+                        cache_examples=self.cache_examples,
+                        cache_mode=self.cache_mode,
+                    )
+                else:
+                    self.examples_handler = Examples(
+                        examples=examples,
+                        inputs=[self.textbox] + self.additional_inputs,
+                        outputs=self.chatbot,
+                        fn=examples_fn,
+                        cache_examples=self.cache_examples,
+                        cache_mode=self.cache_mode,
+                        visible=False,
+                        preprocess=False,
+                        postprocess=True,
+                    )
 
             any_unrendered_inputs = any(
                 not inp.is_rendered for inp in self.additional_inputs
@@ -320,35 +303,26 @@ def __init__(
                         if not input_component.is_rendered:
                             input_component.render()
 
-            # The example caching must happen after the input components have rendered
-            if examples:
-                self.examples_handler._start_caching()
-
             self.saved_input = State()
             self.chatbot_state = (
                 State(self.chatbot.value) if self.chatbot.value else State([])
             )
+            self.previous_input = State(value=[])
             self.show_progress = show_progress
             self._setup_events()
             self._setup_api()
 
     def _setup_events(self) -> None:
         submit_fn = self._stream_fn if self.is_generator else self._submit_fn
-        submit_triggers = (
-            [self.textbox.submit, self.submit_btn.click]
-            if self.submit_btn
-            else [self.textbox.submit]
-        )
+        submit_triggers = [self.textbox.submit]
 
         submit_event = (
-            on(
-                submit_triggers,
+            self.textbox.submit(
                 self._clear_and_save_textbox,
-                [self.textbox],
-                [self.textbox, self.saved_input],
+                [self.textbox, self.previous_input],
+                [self.textbox, self.saved_input, self.previous_input],
                 show_api=False,
                 queue=False,
-                preprocess=False,
             )
             .then(
                 self._display_input,
@@ -369,28 +343,35 @@ def _setup_events(self) -> None:
                     Literal["full", "minimal", "hidden"], self.show_progress
                 ),
             )
+            .then(
+                lambda: update(value=None, interactive=True),
+                None,
+                self.textbox,
+                show_api=False,
+            )
         )
-        self._setup_stop_events(submit_triggers, submit_event)
 
-        if self.retry_btn:
-            retry_event = (
-                self.retry_btn.click(
-                    self._delete_prev_fn,
-                    [self.saved_input, self.chatbot],
-                    [self.chatbot, self.saved_input],
+        if (
+            isinstance(self.chatbot, Chatbot)
+            and self.examples
+            and not self.additional_inputs
+        ):
+            if self.cache_examples:
+                self.chatbot.example_select(
+                    self.example_clicked,
+                    [self.chatbot],
+                    [self.chatbot],
                     show_api=False,
-                    queue=False,
                 )
-                .then(
-                    self._display_input,
-                    [self.saved_input, self.chatbot],
+            else:
+                self.chatbot.example_select(
+                    self.example_clicked,
+                    [self.chatbot],
                     [self.chatbot],
                     show_api=False,
-                    queue=False,
-                )
-                .then(
+                ).then(
                     submit_fn,
-                    [self.saved_input, self.chatbot] + self.additional_inputs,
+                    [self.saved_input, self.chatbot],
                     [self.chatbot],
                     show_api=False,
                     concurrency_limit=cast(
@@ -400,81 +381,87 @@ def _setup_events(self) -> None:
                         Literal["full", "minimal", "hidden"], self.show_progress
                     ),
                 )
-            )
-            self._setup_stop_events([self.retry_btn.click], retry_event)
-
-        async def format_textbox(data: str | MultimodalData) -> str | dict:
-            if isinstance(data, MultimodalData):
-                return {"text": data.text, "files": [x.path for x in data.files]}
-            else:
-                return data
+        self._setup_stop_events(submit_triggers, submit_event)
 
-        if self.undo_btn:
-            self.undo_btn.click(
+        retry_event = (
+            self.chatbot.retry(
                 self._delete_prev_fn,
                 [self.saved_input, self.chatbot],
                 [self.chatbot, self.saved_input],
                 show_api=False,
                 queue=False,
-            ).then(
-                format_textbox,
-                [self.saved_input],
-                [self.textbox],
+            )
+            .then(
+                lambda: update(interactive=False, placeholder=""),
+                outputs=[self.textbox],
                 show_api=False,
-                queue=False,
             )
-
-        if self.clear_btn:
-            self.clear_btn.click(
-                async_lambda(lambda: ([], [], None)),
-                None,
-                [self.chatbot, self.saved_input],
+            .then(
+                self._display_input,
+                [self.saved_input, self.chatbot],
+                [self.chatbot],
+                show_api=False,
                 queue=False,
+            )
+            .then(
+                submit_fn,
+                [self.saved_input, self.chatbot] + self.additional_inputs,
+                [self.chatbot],
                 show_api=False,
+                concurrency_limit=cast(
+                    Union[int, Literal["default"], None], self.concurrency_limit
+                ),
+                show_progress=cast(
+                    Literal["full", "minimal", "hidden"], self.show_progress
+                ),
             )
+            .then(
+                lambda: update(interactive=True),
+                outputs=[self.textbox],
+                show_api=False,
+            )
+        )
+        self._setup_stop_events([self.chatbot.retry], retry_event)
+
+        self.chatbot.undo(
+            self._undo_msg,
+            [self.previous_input, self.chatbot],
+            [self.chatbot, self.textbox, self.saved_input, self.previous_input],
+            show_api=False,
+            queue=False,
+        )
 
     def _setup_stop_events(
         self, event_triggers: list[Callable], event_to_cancel: Dependency
     ) -> None:
-        if self.stop_btn and self.is_generator:
-            if self.submit_btn:
-                for event_trigger in event_triggers:
-                    event_trigger(
-                        async_lambda(
-                            lambda: (
-                                Button(visible=False),
-                                Button(visible=True),
-                            )
-                        ),
-                        None,
-                        [self.submit_btn, self.stop_btn],
-                        show_api=False,
-                        queue=False,
-                    )
-                event_to_cancel.then(
-                    async_lambda(lambda: (Button(visible=True), Button(visible=False))),
+        textbox_component = MultimodalTextbox if self.multimodal else Textbox
+        if self.is_generator:
+            original_submit_btn = self.textbox.submit_btn
+            for event_trigger in event_triggers:
+                event_trigger(
+                    async_lambda(
+                        lambda: textbox_component(
+                            submit_btn=False,
+                            stop_btn=self.original_stop_btn,
+                        )
+                    ),
                     None,
-                    [self.submit_btn, self.stop_btn],
+                    [self.textbox],
                     show_api=False,
                     queue=False,
                 )
-            else:
-                for event_trigger in event_triggers:
-                    event_trigger(
-                        async_lambda(lambda: Button(visible=True)),
-                        None,
-                        [self.stop_btn],
-                        show_api=False,
-                        queue=False,
+            event_to_cancel.then(
+                async_lambda(
+                    lambda: textbox_component(
+                        submit_btn=original_submit_btn, stop_btn=False
                     )
-                event_to_cancel.then(
-                    async_lambda(lambda: Button(visible=False)),
-                    None,
-                    [self.stop_btn],
-                    show_api=False,
-                    queue=False,
-                )
-            self.stop_btn.click(
+                ),
+                None,
+                [self.textbox],
+                show_api=False,
+                queue=False,
+            )
+            self.textbox.stop(
                 None,
                 None,
                 None,
@@ -525,44 +512,68 @@ async def api_fn(message, history, *args, **kwargs):
         )
 
     def _clear_and_save_textbox(
-        self, message: str | dict
-    ) -> tuple[str | dict, str | MultimodalData]:
+        self,
+        message: str | MultimodalPostprocess,
+        previous_input: list[str | MultimodalPostprocess],
+    ) -> tuple[
+        Textbox | MultimodalTextbox,
+        str | MultimodalPostprocess,
+        list[str | MultimodalPostprocess],
+    ]:
         if self.multimodal:
-            return {"text": "", "files": []}, MultimodalData(**cast(dict, message))
+            previous_input += [message]
+            return (
+                MultimodalTextbox("", interactive=False, placeholder=""),
+                message,
+                previous_input,
+            )
         else:
-            return "", cast(str, message)
+            previous_input += [message]
+            return (
+                Textbox("", interactive=False, placeholder=""),
+                message,
+                previous_input,
+            )
 
     def _append_multimodal_history(
         self,
-        message: MultimodalData,
+        message: MultimodalPostprocess,
         response: MessageDict | str | None,
         history: list[MessageDict] | TupleFormat,
     ):
         if self.type == "tuples":
-            for x in message.files:
-                history.append([(x.path,), None])  # type: ignore
-            if message.text is None or not isinstance(message.text, str):
+            for x in message.get("files", []):
+                if isinstance(x, dict):
+                    history.append([(x.get("path"),), None])  # type: ignore
+                else:
+                    history.append([(x,), None])  # type: ignore
+            if message["text"] is None or not isinstance(message["text"], str):
                 return
-            elif message.text == "" and message.files != []:
+            elif message["text"] == "" and message.get("files", []) != []:
                 history.append([None, response])  # type: ignore
             else:
-                history.append([message.text, cast(str, response)])  # type: ignore
+                history.append([message["text"], cast(str, response)])  # type: ignore
         else:
-            for x in message.files:
-                history.append(
-                    {"role": "user", "content": cast(FileDataDict, x.model_dump())}  # type: ignore
-                )
-            if message.text is None or not isinstance(message.text, str):
+            for x in message.get("files", []):
+                if isinstance(x, dict):
+                    history.append(
+                        {"role": "user", "content": cast(FileDataDict, x)}  # type: ignore
+                    )
+                else:
+                    history.append({"role": "user", "content": (x,)})  # type: ignore
+            if message["text"] is None or not isinstance(message["text"], str):
                 return
             else:
-                history.append({"role": "user", "content": message.text})  # type: ignore
+                history.append({"role": "user", "content": message["text"]})  # type: ignore
             if response:
                 history.append(cast(MessageDict, response))  # type: ignore
 
     async def _display_input(
-        self, message: str | MultimodalData, history: TupleFormat | list[MessageDict]
+        self,
+        message: str | MultimodalPostprocess,
+        history: TupleFormat | list[MessageDict],
     ) -> tuple[TupleFormat, TupleFormat] | tuple[list[MessageDict], list[MessageDict]]:
-        if self.multimodal and isinstance(message, MultimodalData):
+        if self.multimodal and isinstance(message, dict):
             self._append_multimodal_history(message, None, history)
         elif isinstance(message, str) and self.type == "tuples":
             history.append([message, None])  # type: ignore
@@ -581,21 +592,24 @@ def response_as_dict(self, response: MessageDict | Message | str) -> MessageDict
 
     def _process_msg_and_trim_history(
         self,
-        message: str | MultimodalData,
+        message: str | MultimodalPostprocess,
         history_with_input: TupleFormat | list[MessageDict],
-    ) -> tuple[str | dict, TupleFormat | list[MessageDict]]:
-        if isinstance(message, MultimodalData):
-            remove_input = len(message.files) + int(message.text is not None)
+    ) -> tuple[str | MultimodalPostprocess, TupleFormat | list[MessageDict]]:
+        if isinstance(message, dict):
+            remove_input = len(message.get("files", [])) + int(
+                message["text"] is not None
+            )
             history = history_with_input[:-remove_input]
-            message_serialized = message.model_dump()
         else:
             history = history_with_input[:-1]
-            message_serialized = message
-        return message_serialized, history
+        return message, history
 
     def _append_history(self, history, message, first_response=True):
         if self.type == "tuples":
-            history[-1][1] = message  # type: ignore
+            if history:
+                history[-1][1] = message  # type: ignore
+            else:
+                history.append([message, None])
         else:
             message = self.response_as_dict(message)
             if first_response:
@@ -605,7 +619,7 @@ def _append_history(self, history, message, first_response=True):
 
     async def _submit_fn(
         self,
-        message: str | MultimodalData,
+        message: str | MultimodalPostprocess,
         history_with_input: TupleFormat | list[MessageDict],
         request: Request,
         *args,
@@ -623,14 +637,13 @@ async def _submit_fn(
             response = await anyio.to_thread.run_sync(
                 self.fn, *inputs, limiter=self.limiter
             )
-
         self._append_history(history_with_input, response)
 
         return history_with_input  # type: ignore
 
     async def _stream_fn(
         self,
-        message: str | MultimodalData,
+        message: str | MultimodalPostprocess,
         history_with_input: TupleFormat | list[MessageDict],
         request: Request,
         *args,
@@ -659,21 +672,58 @@ async def _stream_fn(
             self._append_history(history_with_input, response, first_response=False)
             yield history_with_input
 
+    def example_clicked(self, x: SelectData, history):
+        if self.cache_examples:
+            return self.examples_handler.load_from_cache(x.index)[0].root
+        if self.multimodal:
+            message = MultimodalPostprocess(**cast(dict, x.value))
+            self._append_multimodal_history(message, None, history)
+        else:
+            message = x.value["text"]
+            self._append_history(history, message)
+        self.saved_input.value = message
+        return history
+
+    def _process_example(
+        self, message: ExampleMessage | str, response: MessageDict | str | None
+    ):
+        result = []
+        if self.multimodal:
+            message = cast(ExampleMessage, message)
+            if self.type == "tuples":
+                if "text" in message:
+                    result.append([message["text"], None])
+                for file in message.get("files", []):
+                    result.append([file, None])
+                result[-1][1] = response
+            else:
+                if "text" in message:
+                    result.append({"role": "user", "content": message["text"]})
+                for file in message.get("files", []):
+                    result.append({"role": "assistant", "content": file})
+                result.append({"role": "assistant", "content": response})
+        else:
+            message = cast(str, message)
+            if self.type == "tuples":
+                result = [[message, response]]
+            else:
+                result = [
+                    {"role": "user", "content": message},
+                    {"role": "assistant", "content": response},
+                ]
+        return result
+
     async def _examples_fn(
-        self, message: str, *args
+        self, message: ExampleMessage | str, *args
     ) -> TupleFormat | list[MessageDict]:
         inputs, _, _ = special_args(self.fn, inputs=[message, [], *args], request=None)
-
         if self.is_async:
             response = await self.fn(*inputs)
         else:
             response = await anyio.to_thread.run_sync(
                 self.fn, *inputs, limiter=self.limiter
             )
-        if self.type == "tuples":
-            return [[message, response]]
-        else:
-            return [{"role": "user", "content": message}, response]
+        return self._process_example(message, response)
 
     async def _examples_stream_fn(
         self,
@@ -690,29 +740,39 @@ async def _examples_stream_fn(
             )
             generator = SyncToAsyncIterator(generator, self.limiter)
         async for response in generator:
-            if self.type == "tuples":
-                yield [[message, response]]
-            else:
-                new_response = self.response_as_dict(response)
-                yield [{"role": "user", "content": message}, new_response]
+            yield self._process_example(message, response)
 
     async def _delete_prev_fn(
         self,
-        message: str | MultimodalData | None,
+        message: str | MultimodalPostprocess | None,
         history: list[MessageDict] | TupleFormat,
-    ) -> tuple[
-        list[MessageDict] | TupleFormat,
-        str | MultimodalData,
-        list[MessageDict] | TupleFormat,
-    ]:
+    ) -> tuple[list[MessageDict] | TupleFormat, str | MultimodalPostprocess]:
         extra = 1 if self.type == "messages" else 0
-        if self.multimodal and isinstance(message, MultimodalData):
+        if self.multimodal and isinstance(message, dict):
             remove_input = (
-                len(message.files) + 1
-                if message.text is not None
-                else len(message.files)
+                len(message.get("files", [])) + 1
+                if message["text"] is not None
+                else len(message.get("files", []))
             ) + extra
             history = history[:-remove_input]
         else:
             history = history[: -(1 + extra)]
         return history, message or ""  # type: ignore
+
+    async def _undo_msg(
+        self,
+        previous_input: list[str | MultimodalPostprocess],
+        history: list[MessageDict] | TupleFormat,
+    ):
+        msg = previous_input.pop()
+
+        history, msg = await self._delete_prev_fn(msg, history)
+        previous_msg = previous_input[-1] if len(previous_input) else msg
+        return history, msg, previous_msg, previous_input
+
+    def render(self) -> ChatInterface:
+        # If this is being rendered inside another Blocks, and the height is not explicitly set, set it to 400 instead of 200.
+        if get_blocks_context() and not self.provided_chatbot:
+            self.chatbot.height = 400
+            super().render()
+        return self
diff --git a/gradio/cli/commands/components/_docs_utils.py b/gradio/cli/commands/components/_docs_utils.py
index 855e15eb07fd0..9b61b76889149 100644
--- a/gradio/cli/commands/components/_docs_utils.py
+++ b/gradio/cli/commands/components/_docs_utils.py
@@ -145,31 +145,14 @@ def get_type_arguments(type_hint) -> tuple:
 
 def get_container_name(arg):
     """Gets a human readable name for a type."""
-
-    # This is a bit of a hack to get the generic type for python 3.8
-    typing_genericalias = getattr(typing, "_GenericAlias", None)
-    types_genericalias = getattr(types, "GenericAlias", None)
-    types_uniontype = getattr(types, "UnionType", None)
-    if types_genericalias is None:
-        raise ValueError(
-            """Unable to find GenericAlias type. This is likely because you are using an older version of python. Please upgrade to python 3.10 or higher."""
-        )
-
-    generic_type_tuple = (
-        (types_genericalias,)
-        if typing_genericalias is None
-        else (types_genericalias, typing_genericalias)
-    )
-
     if inspect.isclass(arg):
         return arg.__name__
-    if isinstance(arg, (generic_type_tuple)):
+    if isinstance(arg, types.GenericAlias):
         return arg.__origin__.__name__
-    elif types_uniontype and isinstance(arg, types_uniontype):
+    elif isinstance(arg, types.UnionType):
         return "Union"
     elif getattr(arg, "__origin__", None) is typing.Literal:
         return "Literal"
-
     else:
         return str(arg)
 
diff --git a/gradio/cli/commands/components/build.py b/gradio/cli/commands/components/build.py
index 3c0bfed5e1977..0cefe668245c6 100644
--- a/gradio/cli/commands/components/build.py
+++ b/gradio/cli/commands/components/build.py
@@ -4,12 +4,11 @@
 import shutil
 import subprocess
 from pathlib import Path
-from typing import Optional
+from typing import Annotated, Optional
 
 import semantic_version
 import typer
 from tomlkit import dump, parse
-from typing_extensions import Annotated
 
 import gradio
 from gradio.analytics import custom_component_analytics
diff --git a/gradio/cli/commands/components/create.py b/gradio/cli/commands/components/create.py
index 59453e91739b5..410c1ddde89a1 100644
--- a/gradio/cli/commands/components/create.py
+++ b/gradio/cli/commands/components/create.py
@@ -2,14 +2,13 @@
 
 import shutil
 from pathlib import Path
-from typing import Optional
+from typing import Annotated, Optional
 
 import typer
 from rich import print
 from rich.panel import Panel
 from rich.prompt import Confirm, Prompt
 from tomlkit import dump, parse
-from typing_extensions import Annotated
 
 from gradio.analytics import custom_component_analytics
 
@@ -156,14 +155,14 @@ def _create(
                 pyproject_toml["project"]["license"] = license_  # type: ignore
 
                 requires_python = Prompt.ask(
-                    "\n:snake: Please enter the [bold][magenta]allowed python[/][/] versions for your component. Leave blank for '>=3.8'"
+                    "\n:snake: Please enter the [bold][magenta]allowed python[/][/] versions for your component. Leave blank for '>=3.10'"
                 )
-                requires_python = requires_python or ">=3.8"
+                requires_python = requires_python or ">=3.10"
                 print(
                     f":snake: Using requires-python of [bold][magenta]{requires_python}[/][/]"
                 )
                 pyproject_toml["project"]["requires-python"] = (  # type: ignore
-                    requires_python or ">=3.8"
+                    requires_python or ">=3.10"
                 )
 
                 print(
diff --git a/gradio/cli/commands/components/dev.py b/gradio/cli/commands/components/dev.py
index 0563618500f2f..025c5ea320fdf 100644
--- a/gradio/cli/commands/components/dev.py
+++ b/gradio/cli/commands/components/dev.py
@@ -3,11 +3,10 @@
 import shutil
 import subprocess
 from pathlib import Path
-from typing import Optional
+from typing import Annotated, Optional
 
 import typer
 from rich import print
-from typing_extensions import Annotated
 
 import gradio
 from gradio.analytics import custom_component_analytics
diff --git a/gradio/cli/commands/components/docs.py b/gradio/cli/commands/components/docs.py
index 62e0c068c1dac..145d9073abc37 100644
--- a/gradio/cli/commands/components/docs.py
+++ b/gradio/cli/commands/components/docs.py
@@ -3,12 +3,11 @@
 import importlib
 import re
 from pathlib import Path
-from typing import Any, Optional
+from typing import Annotated, Any, Optional
 
 import requests
 import tomlkit as toml
 from typer import Argument, Option
-from typing_extensions import Annotated
 
 from gradio.analytics import custom_component_analytics
 from gradio.cli.commands.display import LivePanelDisplay
@@ -201,5 +200,5 @@ def run_command(
 
     if type_mode == "simple":
         live.update(
-            "\n:orange_circle: [red]The docs were generated in simple mode. Updating python to a version greater than 3.9 will result in richer documentation.[/]"
+            "\n:orange_circle: [red]The docs were generated in simple mode. Updating python to a more recent version will result in richer documentation.[/]"
         )
diff --git a/gradio/cli/commands/components/files/pyproject_.toml b/gradio/cli/commands/components/files/pyproject_.toml
index dffbe294c6e9c..2baca0dcb328b 100644
--- a/gradio/cli/commands/components/files/pyproject_.toml
+++ b/gradio/cli/commands/components/files/pyproject_.toml
@@ -19,7 +19,7 @@ keywords = [
   "<<template>>"
 ]
 # Add dependencies here
-dependencies = ["gradio>=4.0,<5.0"]
+dependencies = ["gradio>=4.0,<6.0"]
 classifiers = [
   'Development Status :: 3 - Alpha',
   'Operating System :: OS Independent',
diff --git a/gradio/cli/commands/components/install_component.py b/gradio/cli/commands/components/install_component.py
index 08092e76d7607..6dd0a9057366d 100644
--- a/gradio/cli/commands/components/install_component.py
+++ b/gradio/cli/commands/components/install_component.py
@@ -3,11 +3,10 @@
 import shutil
 import subprocess
 from pathlib import Path
-from typing import Optional
+from typing import Annotated, Optional
 
 from rich.markup import escape
 from typer import Argument, Option
-from typing_extensions import Annotated
 
 from gradio.cli.commands.display import LivePanelDisplay
 from gradio.utils import set_directory
diff --git a/gradio/cli/commands/components/publish.py b/gradio/cli/commands/components/publish.py
index ff2bdc8d717f8..2affbe4172491 100644
--- a/gradio/cli/commands/components/publish.py
+++ b/gradio/cli/commands/components/publish.py
@@ -4,7 +4,7 @@
 import shutil
 import tempfile
 from pathlib import Path
-from typing import List, Optional
+from typing import Annotated, Optional
 
 import semantic_version
 from huggingface_hub import HfApi
@@ -14,7 +14,6 @@
 from rich.prompt import Confirm, Prompt
 from tomlkit import parse
 from typer import Argument, Option
-from typing_extensions import Annotated
 
 from gradio.analytics import custom_component_analytics
 
@@ -37,7 +36,7 @@ def _get_version_from_file(dist_file: Path) -> Optional[str]:
         return match.group(1)
 
 
-def _get_max_version(distribution_files: List[Path]) -> Optional[str]:
+def _get_max_version(distribution_files: list[Path]) -> Optional[str]:
     versions = []
     for p in distribution_files:
         version = _get_version_from_file(p)
diff --git a/gradio/cli/commands/components/show.py b/gradio/cli/commands/components/show.py
index b9d8688ac908f..5ab8bcfd7421e 100644
--- a/gradio/cli/commands/components/show.py
+++ b/gradio/cli/commands/components/show.py
@@ -26,6 +26,7 @@
     "FormComponent",
     "Fallback",
     "State",
+    "LogoutButton",
 }
 
 _BEGINNER_FRIENDLY = {"Slider", "Radio", "Checkbox", "Number", "CheckboxGroup", "File"}
@@ -34,10 +35,12 @@
 def _get_table_items(module):
     items = []
     for name in module.__all__:
+        if name in _IGNORE:
+            continue
         gr_cls = getattr(module, name)
         if not (
             inspect.isclass(gr_cls) and issubclass(gr_cls, (Component, BlockContext))
-        ) or (name in _IGNORE):
+        ):
             continue
         tags = []
         if "Simple" in name or name in _BEGINNER_FRIENDLY:
diff --git a/gradio/cli/commands/deploy_space.py b/gradio/cli/commands/deploy_space.py
index ad082d581761e..e3f19a26bd569 100644
--- a/gradio/cli/commands/deploy_space.py
+++ b/gradio/cli/commands/deploy_space.py
@@ -2,12 +2,11 @@
 
 import os
 import re
-from typing import Optional
+from typing import Annotated, Optional
 
 import huggingface_hub
 from rich import print
 from typer import Option
-from typing_extensions import Annotated
 
 import gradio as gr
 
diff --git a/gradio/cli/commands/reload.py b/gradio/cli/commands/reload.py
index 2468c74d43eac..5df999598005f 100644
--- a/gradio/cli/commands/reload.py
+++ b/gradio/cli/commands/reload.py
@@ -16,7 +16,7 @@
 import sys
 import threading
 from pathlib import Path
-from typing import List, Optional
+from typing import Optional
 
 import typer
 from rich import print
@@ -106,7 +106,7 @@ def _setup_config(
 def main(
     demo_path: Path,
     demo_name: str = "demo",
-    watch_dirs: Optional[List[str]] = None,
+    watch_dirs: Optional[list[str]] = None,
     encoding: str = "utf-8",
 ):
     # default execution pattern to start the server and watch changes
diff --git a/gradio/component_meta.py b/gradio/component_meta.py
index 0593fb197aba5..14f3cc64252df 100644
--- a/gradio/component_meta.py
+++ b/gradio/component_meta.py
@@ -20,7 +20,7 @@
         from gradio.components import Timer
 
     {% for event in events %}
-    def {{ event }}(self,
+    def {{ event.event_name }}(self,
         fn: Callable[..., Any] | None = None,
         inputs: Block | Sequence[Block] | set[Block] | None = None,
         outputs: Block | Sequence[Block] | None = None,
@@ -38,7 +38,11 @@ def {{ event }}(self,
         js: str | None = None,
         concurrency_limit: int | None | Literal["default"] = "default",
         concurrency_id: str | None = None,
-        show_api: bool = True) -> Dependency:
+        show_api: bool = True,
+    {% for arg in event.event_specific_args %}
+        {{ arg.name }}: {{ arg.type }},
+    {% endfor %}
+        ) -> Dependency:
         """
         Parameters:
             fn: the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
@@ -59,6 +63,9 @@ def {{ event }}(self,
             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.
             show_api: whether to show this event in the "view API" page of the Gradio app, or in the ".view_api()" method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False.
+        {% for arg in event.event_specific_args %}
+            {{ arg.name }}: {{ arg.doc }},
+        {% endfor %}
         """
         ...
     {% endfor %}
@@ -67,8 +74,13 @@ def {{ event }}(self,
 
 def create_pyi(class_code: str, events: list[EventListener | str]):
     template = Template(INTERFACE_TEMPLATE)
-    events = [e if isinstance(e, str) else e.event_name for e in events]
-    return template.render(events=events, contents=class_code)
+    event_template = [
+        e
+        if isinstance(e, EventListener)
+        else EventListener(event_name=e, event_specific_args=[])
+        for e in events
+    ]
+    return template.render(events=event_template, contents=class_code)
 
 
 def extract_class_source_code(
diff --git a/gradio/components/__init__.py b/gradio/components/__init__.py
index 7a84b3df95b16..4c2b2c7ba81ed 100644
--- a/gradio/components/__init__.py
+++ b/gradio/components/__init__.py
@@ -33,7 +33,6 @@
 from gradio.components.json_component import JSON
 from gradio.components.label import Label
 from gradio.components.login_button import LoginButton
-from gradio.components.logout_button import LogoutButton
 from gradio.components.markdown import Markdown
 from gradio.components.model3d import Model3D
 from gradio.components.multimodal_textbox import MultimodalTextbox
@@ -90,7 +89,6 @@
     "Label",
     "LinePlot",
     "LoginButton",
-    "LogoutButton",
     "Markdown",
     "MessageDict",
     "Textbox",
diff --git a/gradio/components/annotated_image.py b/gradio/components/annotated_image.py
index 0cd79082f0988..997e4e8b27594 100644
--- a/gradio/components/annotated_image.py
+++ b/gradio/components/annotated_image.py
@@ -2,7 +2,8 @@
 
 from __future__ import annotations
 
-from typing import TYPE_CHECKING, Any, List, Sequence
+from collections.abc import Sequence
+from typing import TYPE_CHECKING, Any
 
 import gradio_client.utils as client_utils
 import numpy as np
@@ -28,7 +29,7 @@ class Annotation(GradioModel):
 
 class AnnotatedImageData(GradioModel):
     image: FileData
-    annotations: List[Annotation]
+    annotations: list[Annotation]
 
 
 @document()
@@ -78,10 +79,10 @@ def __init__(
             value: Tuple of base image and list of (annotation, label) pairs.
             format: Format used to save images before it is returned to the front end, such as 'jpeg' or 'png'. This parameter only takes effect when the base image is returned from the prediction function as a numpy array or a PIL Image. The format should be supported by the PIL library.
             show_legend: If True, will show a legend of the annotations.
-            height: The height of the image, specified in pixels if a number is passed, or in CSS units if a string is passed.
-            width: The width of the image, specified in pixels if a number is passed, or in CSS units if a string is passed.
+            height: The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image file or numpy array, but will affect the displayed image.
+            width: The width of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image file or numpy array, but will affect the displayed image.
             color_map: A dictionary mapping labels to colors. The colors must be specified as hex codes.
-            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            label: the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
             show_label: if True, will display label.
diff --git a/gradio/components/audio.py b/gradio/components/audio.py
index e963847ec1e02..71bb76fa10aef 100644
--- a/gradio/components/audio.py
+++ b/gradio/components/audio.py
@@ -3,18 +3,22 @@
 from __future__ import annotations
 
 import dataclasses
+import io
+from collections.abc import Callable, Sequence
 from pathlib import Path
-from typing import TYPE_CHECKING, Any, Callable, Literal, Sequence
+from typing import TYPE_CHECKING, Any, Literal
 
+import anyio
 import httpx
 import numpy as np
 from gradio_client import handle_file
 from gradio_client import utils as client_utils
 from gradio_client.documentation import document
+from pydub import AudioSegment
 
-from gradio import processing_utils, utils
+from gradio import processing_utils, utils, wasm_utils
 from gradio.components.base import Component, StreamingInput, StreamingOutput
-from gradio.data_classes import FileData
+from gradio.data_classes import FileData, FileDataDict, MediaStreamChunk
 from gradio.events import Events
 from gradio.exceptions import Error
 
@@ -97,7 +101,7 @@ def __init__(
         elem_classes: list[str] | str | None = None,
         render: bool = True,
         key: int | str | None = None,
-        format: Literal["wav", "mp3"] = "wav",
+        format: Literal["wav", "mp3"] | None = None,
         autoplay: bool = False,
         show_download_button: bool | None = None,
         show_share_button: bool | None = None,
@@ -106,13 +110,14 @@ def __init__(
         max_length: int | None = None,
         waveform_options: WaveformOptions | dict | None = None,
         loop: bool = False,
+        recording: bool = False,
     ):
         """
         Parameters:
             value: A path, URL, or [sample_rate, numpy array] tuple (sample rate in Hz, audio data as a float or int numpy array) for the default value that Audio component is going to take. If callable, the function will be called whenever the app loads to set the initial value of the component.
             sources: A list of sources permitted for audio. "upload" creates a box where user can drop an audio file, "microphone" creates a microphone input. The first element in the list will be used as the default source. If None, defaults to ["upload", "microphone"], or ["microphone"] if `streaming` is True.
             type: The format the audio file is converted to before being passed into the prediction function. "numpy" converts the audio to a tuple consisting of: (int sample rate, numpy.array for the data), "filepath" passes a str path to a temporary file containing the audio.
-            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            label: the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
             show_label: if True, will display label.
@@ -124,9 +129,9 @@ def __init__(
             streaming: If set to True when used in a `live` interface as an input, will automatically stream webcam feed. When used set as an output, takes audio chunks yield from the backend and combines them into one streaming audio output.
             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.
             elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
-            render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+            render: if False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
             key: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
-            format: The file format to save audio files. Either 'wav' or 'mp3'. wav files are lossless but will tend to be larger files. mp3 files tend to be smaller. Default is wav. Applies both when this component is used as an input (when `type` is "format") and when this component is used as an output.
+            format: the file extension with which to save audio files. Either 'wav' or 'mp3'. wav files are lossless but will tend to be larger files. mp3 files tend to be smaller. This parameter applies both when this component is used as an input (and `type` is "filepath") to determine which file format to convert user-provided audio to, and when this component is used as an output to determine the format of audio returned to the user. If None, no file format conversion is done and the audio is kept as is. In the case where output audio is returned from the prediction function as numpy array and no `format` is provided, it will be returned as a "wav" file.
             autoplay: Whether to automatically play the audio when the component is used as an output. Note: browsers will not autoplay audio files if the user has not interacted with the page yet.
             show_download_button: If True, will show a download button in the corner of the component for saving audio. If False, icon does not appear. By default, it will be True for output components and False for input components.
             show_share_button: If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.
@@ -135,6 +140,7 @@ def __init__(
             max_length: The maximum length of audio (in seconds) that the user can pass into the prediction function. If None, there is no maximum length.
             waveform_options: A dictionary of options for the waveform display. Options include: waveform_color (str), waveform_progress_color (str), show_controls (bool), skip_length (int), trim_region_color (str). Default is None, which uses the default values for these options. [See `gr.WaveformOptions` docs](#waveform-options).
             loop: If True, the audio will loop when it reaches the end and continue playing from the beginning.
+            recording: If True, the audio component will be set to record audio from the microphone if the source is set to "microphone". Defaults to False.
         """
         valid_sources: list[Literal["upload", "microphone"]] = ["upload", "microphone"]
         if sources is None:
@@ -155,7 +161,7 @@ def __init__(
         valid_types = ["numpy", "filepath"]
         if type not in valid_types:
             raise ValueError(
-                f"Invalid value for parameter `type`: {type}. Please choose from one of: {valid_types}"
+                f"Invalid value for parameter `type`: {type}. Please choose from one of: {' '.join(valid_types)}"
             )
         self.type = type
         self.streaming = streaming
@@ -163,7 +169,12 @@ def __init__(
             raise ValueError(
                 "Audio streaming only available if sources includes 'microphone'."
             )
-        self.format = format
+        valid_formats = ["wav", "mp3"]
+        if format is not None and format.lower() not in valid_formats:
+            raise ValueError(
+                f"Invalid value for parameter `format`: {format}. Please choose from one of: {' '.join(valid_formats)}"
+            )
+        self.format = format and format.lower()
         self.autoplay = autoplay
         self.loop = loop
         self.show_download_button = show_download_button
@@ -181,6 +192,7 @@ def __init__(
             self.waveform_options = waveform_options
         self.min_length = min_length
         self.max_length = max_length
+        self.recording = recording
         super().__init__(
             label=label,
             every=every,
@@ -221,29 +233,31 @@ def preprocess(
         if not payload.path:
             raise ValueError("payload path missing")
 
-        # Need a unique name for the file to avoid re-using the same audio file if
-        # a user submits the same audio file twice
-        temp_file_path = Path(payload.path)
-        output_file_name = str(
-            temp_file_path.with_name(f"{temp_file_path.stem}{temp_file_path.suffix}")
-        )
-
-        sample_rate, data = processing_utils.audio_from_file(temp_file_path)
+        needs_conversion = False
+        original_suffix = Path(payload.path).suffix.lower()
+        if self.format is not None and original_suffix != f".{self.format}":
+            needs_conversion = True
 
-        duration = len(data) / sample_rate
-        if self.min_length is not None and duration < self.min_length:
-            raise Error(
-                f"Audio is too short, and must be at least {self.min_length} seconds"
-            )
-        if self.max_length is not None and duration > self.max_length:
-            raise Error(
-                f"Audio is too long, and must be at most {self.max_length} seconds"
-            )
+        if self.min_length is not None or self.max_length is not None:
+            sample_rate, data = processing_utils.audio_from_file(payload.path)
+            duration = len(data) / sample_rate
+            if self.min_length is not None and duration < self.min_length:
+                raise Error(
+                    f"Audio is too short, and must be at least {self.min_length} seconds"
+                )
+            if self.max_length is not None and duration > self.max_length:
+                raise Error(
+                    f"Audio is too long, and must be at most {self.max_length} seconds"
+                )
 
         if self.type == "numpy":
-            return sample_rate, data
+            return processing_utils.audio_from_file(payload.path)
         elif self.type == "filepath":
-            output_file = str(Path(output_file_name).with_suffix(f".{self.format}"))
+            if not needs_conversion:
+                return payload.path
+            sample_rate, data = processing_utils.audio_from_file(payload.path)
+            output_file = str(Path(payload.path).with_suffix(f".{self.format}"))
+            assert self.format is not None  # noqa: S101
             processing_utils.audio_to_file(
                 sample_rate, data, output_file, format=self.format
             )
@@ -267,6 +281,7 @@ def postprocess(
         orig_name = None
         if value is None:
             return None
+
         if isinstance(value, bytes):
             if self.streaming:
                 return value
@@ -277,48 +292,94 @@ def postprocess(
         elif isinstance(value, tuple):
             sample_rate, data = value
             file_path = processing_utils.save_audio_to_cache(
-                data, sample_rate, format=self.format, cache_dir=self.GRADIO_CACHE
+                data,
+                sample_rate,
+                format=self.format or "wav",
+                cache_dir=self.GRADIO_CACHE,
             )
             orig_name = Path(file_path).name
-        else:
-            if not isinstance(value, (str, Path)):
-                raise ValueError(f"Cannot process {value} as Audio")
-            file_path = str(value)
+        elif isinstance(value, (str, Path)):
+            original_suffix = Path(value).suffix.lower()
+            if self.format is not None and original_suffix != f".{self.format}":
+                sample_rate, data = processing_utils.audio_from_file(str(value))
+                file_path = processing_utils.save_audio_to_cache(
+                    data, sample_rate, format=self.format, cache_dir=self.GRADIO_CACHE
+                )
+            else:
+                file_path = str(value)
             orig_name = Path(file_path).name if Path(file_path).exists() else None
+        else:
+            raise ValueError(f"Cannot process {value} as Audio")
         return FileData(path=file_path, orig_name=orig_name)
 
-    def stream_output(
-        self, value, output_id: str, first_chunk: bool
-    ) -> tuple[bytes | None, Any]:
-        output_file = {
+    @staticmethod
+    def _convert_to_adts(data: bytes):
+        if wasm_utils.IS_WASM:
+            raise wasm_utils.WasmUnsupportedError(
+                "Audio streaming is not supported in the Wasm mode."
+            )
+        segment = AudioSegment.from_file(io.BytesIO(data))
+
+        buffer = io.BytesIO()
+        segment.export(buffer, format="adts")  # ADTS is a container format for AAC
+        aac_data = buffer.getvalue()
+        return aac_data, len(segment) / 1000.0
+
+    @staticmethod
+    async def covert_to_adts(data: bytes) -> tuple[bytes, float]:
+        return await anyio.to_thread.run_sync(Audio._convert_to_adts, data)
+
+    async def stream_output(
+        self,
+        value,
+        output_id: str,
+        first_chunk: bool,  # noqa: ARG002
+    ) -> tuple[MediaStreamChunk | None, FileDataDict]:
+        output_file: FileDataDict = {
             "path": output_id,
             "is_stream": True,
+            "orig_name": "audio-stream.mp3",
         }
         if value is None:
             return None, output_file
         if isinstance(value, bytes):
-            return value, output_file
+            value, duration = await self.covert_to_adts(value)
+            return {
+                "data": value,
+                "duration": duration,
+                "extension": ".aac",
+            }, output_file
         if client_utils.is_http_url_like(value["path"]):
             response = httpx.get(value["path"])
             binary_data = response.content
         else:
             output_file["orig_name"] = value["orig_name"]
             file_path = value["path"]
-            is_wav = file_path.endswith(".wav")
             with open(file_path, "rb") as f:
                 binary_data = f.read()
-            if is_wav:
-                # strip length information from first chunk header, remove headers entirely from subsequent chunks
-                if first_chunk:
-                    binary_data = (
-                        binary_data[:4] + b"\xff\xff\xff\xff" + binary_data[8:]
-                    )
-                    binary_data = (
-                        binary_data[:40] + b"\xff\xff\xff\xff" + binary_data[44:]
-                    )
-                else:
-                    binary_data = binary_data[44:]
-        return binary_data, output_file
+        value, duration = await self.covert_to_adts(binary_data)
+        return {"data": value, "duration": duration, "extension": ".aac"}, output_file
+
+    async def combine_stream(
+        self,
+        stream: list[bytes],
+        desired_output_format: str | None = None,
+        only_file=False,  # noqa: ARG002
+    ) -> FileData:
+        output_file = FileData(
+            path=processing_utils.save_bytes_to_cache(
+                b"".join(stream), "audio.mp3", cache_dir=self.GRADIO_CACHE
+            ),
+            is_stream=False,
+            orig_name="audio-stream.mp3",
+        )
+        if desired_output_format and desired_output_format != "mp3":
+            new_path = Path(output_file.path).with_suffix(f".{desired_output_format}")
+            AudioSegment.from_file(output_file.path).export(
+                new_path, format=desired_output_format
+            )
+            output_file.path = str(new_path)
+        return output_file
 
     def process_example(
         self, value: tuple[int, np.ndarray] | str | Path | bytes | None
diff --git a/gradio/components/bar_plot.py b/gradio/components/bar_plot.py
index c38422c389b99..f2adef960db9a 100644
--- a/gradio/components/bar_plot.py
+++ b/gradio/components/bar_plot.py
@@ -3,7 +3,8 @@
 from __future__ import annotations
 
 import warnings
-from typing import TYPE_CHECKING, Any, Callable, Literal, Sequence
+from collections.abc import Callable, Sequence
+from typing import TYPE_CHECKING, Any, Literal
 
 from gradio_client.documentation import document
 
diff --git a/gradio/components/base.py b/gradio/components/base.py
index 96d3957c6efae..53e634754e1b4 100644
--- a/gradio/components/base.py
+++ b/gradio/components/base.py
@@ -10,16 +10,24 @@
 import sys
 import warnings
 from abc import ABC, abstractmethod
+from collections.abc import Callable, Sequence
 from enum import Enum
 from pathlib import Path
-from typing import TYPE_CHECKING, Any, Callable, Sequence, Type
+from typing import TYPE_CHECKING, Any
 
 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 BaseModel, DeveloperPath, GradioDataModel
+from gradio.data_classes import (
+    BaseModel,
+    DeveloperPath,
+    FileData,
+    FileDataDict,
+    GradioDataModel,
+    MediaStreamChunk,
+)
 from gradio.events import EventListener
 from gradio.layouts import Form
 from gradio.processing_utils import move_files_to_cache
@@ -166,7 +174,7 @@ def __init__(
         # This gets overridden when `select` is called
         self._selectable = False
         if not hasattr(self, "data_model"):
-            self.data_model: Type[GradioDataModel] | None = None
+            self.data_model: type[GradioDataModel] | None = None
 
         Block.__init__(
             self,
@@ -323,12 +331,19 @@ def api_info(self) -> dict[str, Any]:
         """
         if self.data_model is not None:
             schema = self.data_model.model_json_schema()
-            schema.pop("description", None)
+            desc = schema.pop("description", None)
+            schema["additional_description"] = desc
             return schema
         raise NotImplementedError(
             f"The api_info method has not been implemented for {self.get_block_name()}"
         )
 
+    def api_info_as_input(self) -> dict[str, Any]:
+        return self.api_info()
+
+    def api_info_as_output(self) -> dict[str, Any]:
+        return self.api_info()
+
     def flag(self, payload: Any, flag_dir: str | Path = "") -> str:
         """
         Write the component's value to a format that can be stored in a csv or jsonl format for flagging.
@@ -371,9 +386,24 @@ def __init__(self, *args, **kwargs) -> None:
         self.streaming: bool
 
     @abc.abstractmethod
-    def stream_output(
+    async def stream_output(
         self, value, output_id: str, first_chunk: bool
-    ) -> tuple[bytes | None, Any]:
+    ) -> tuple[MediaStreamChunk | None, FileDataDict | dict]:
+        pass
+
+    @abc.abstractmethod
+    async def combine_stream(
+        self,
+        stream: list[bytes],
+        desired_output_format: str | None = None,
+        only_file=False,
+    ) -> GradioDataModel | FileData:
+        """Combine all of the stream chunks into a single file.
+
+        This is needed for downloading the stream and for caching examples.
+        If `only_file` is True, only the FileData corresponding to the file should be returned (needed for downloading the stream).
+        The desired_output_format optionally converts the combined file. Should only be used for cached examples.
+        """
         pass
 
 
diff --git a/gradio/components/button.py b/gradio/components/button.py
index 1b4262001846b..5791d9ae44590 100644
--- a/gradio/components/button.py
+++ b/gradio/components/button.py
@@ -2,7 +2,8 @@
 
 from __future__ import annotations
 
-from typing import TYPE_CHECKING, Any, Callable, Literal, Sequence
+from collections.abc import Callable, Sequence
+from typing import TYPE_CHECKING, Any, Literal
 
 from gradio_client.documentation import document
 
@@ -27,7 +28,7 @@ def __init__(
         *,
         every: Timer | float | None = None,
         inputs: Component | Sequence[Component] | set[Component] | None = None,
-        variant: Literal["primary", "secondary", "stop"] = "secondary",
+        variant: Literal["primary", "secondary", "stop", "huggingface"] = "secondary",
         size: Literal["sm", "lg"] | None = None,
         icon: str | None = None,
         link: str | None = None,
@@ -45,7 +46,7 @@ def __init__(
             value: Default text for the button to display. If callable, the function will be called whenever the app loads to set the initial value of the component.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
-            variant: 'primary' for main call-to-action, 'secondary' for a more subdued style, 'stop' for a stop button.
+            variant: 'primary' for main call-to-action, 'secondary' for a more subdued style, 'stop' for a stop button, 'huggingface' for no background color (appears white in light mode, black in dark mode).
             size: Size of the button. Can be "sm" or "lg".
             icon: URL or path to the icon file to display within the button. If None, no icon will be displayed.
             link: URL to open when the button is clicked. If None, no link will be used.
diff --git a/gradio/components/chatbot.py b/gradio/components/chatbot.py
index 74caf6ae3dd84..f3201222104c9 100644
--- a/gradio/components/chatbot.py
+++ b/gradio/components/chatbot.py
@@ -3,19 +3,15 @@
 from __future__ import annotations
 
 import inspect
+import warnings
+from collections.abc import Callable, Sequence
 from dataclasses import dataclass, field
 from pathlib import Path
 from typing import (
     TYPE_CHECKING,
     Any,
-    Callable,
-    Dict,
-    List,
     Literal,
     Optional,
-    Sequence,
-    Tuple,
-    Type,
     TypedDict,
     Union,
     cast,
@@ -35,7 +31,6 @@
 from gradio.data_classes import FileData, GradioModel, GradioRootModel
 from gradio.events import Events
 from gradio.exceptions import Error
-from gradio.processing_utils import move_resource_to_block_cache
 
 
 class MetadataDict(TypedDict):
@@ -66,13 +61,13 @@ class FileMessage(GradioModel):
 class ComponentMessage(GradioModel):
     component: str
     value: Any
-    constructor_args: Dict[str, Any]
-    props: Dict[str, Any]
+    constructor_args: dict[str, Any]
+    props: dict[str, Any]
 
 
 class ChatbotDataTuples(GradioRootModel):
-    root: List[
-        Tuple[
+    root: list[
+        tuple[
             Union[str, FileMessage, ComponentMessage, None],
             Union[str, FileMessage, ComponentMessage, None],
         ]
@@ -89,6 +84,19 @@ class Message(GradioModel):
     content: Union[str, FileMessage, ComponentMessage]
 
 
+class ExampleMessage(TypedDict):
+    icon: NotRequired[
+        str | FileDataDict
+    ]  # filepath or url to an image to be shown in example box
+    display_text: NotRequired[
+        str
+    ]  # text to be shown in example box. If not provided, main_text will be shown
+    text: NotRequired[str]  # text to be added to chatbot when example is clicked
+    files: NotRequired[
+        Sequence[str | FileDataDict]
+    ]  # list of file paths or URLs to be added to chatbot when example is clicked
+
+
 @dataclass
 class ChatMessage:
     role: Literal["user", "assistant", "system"]
@@ -97,10 +105,10 @@ class ChatMessage:
 
 
 class ChatbotDataMessages(GradioRootModel):
-    root: List[Message]
+    root: list[Message]
 
 
-TupleFormat = List[List[Union[str, Tuple[str], Tuple[str, str], None]]]
+TupleFormat = list[list[Union[str, tuple[str], tuple[str, str], None]]]
 
 if TYPE_CHECKING:
     from gradio.components import Timer
@@ -128,25 +136,24 @@ class Chatbot(Component):
     Also supports audio/video/image files, which are displayed in the Chatbot, and other kinds of files which are displayed as links. This
     component is usually used as an output component.
 
-    Demos: chatbot_simple, chatbot_core_components_simple
-    Guides: creating-a-chatbot
+    Demos: chatbot_simple, chatbot_streaming, chatbot_with_tools, chatbot_core_components
+    Guides: creating-a-chatbot-fast, creating-a-custom-chatbot-with-blocks, agents-and-tool-usage
     """
 
-    EVENTS = [Events.change, Events.select, Events.like]
+    EVENTS = [
+        Events.change,
+        Events.select,
+        Events.like,
+        Events.retry,
+        Events.undo,
+        Events.example_select,
+    ]
 
     def __init__(
         self,
-        value: (
-            Sequence[
-                Sequence[
-                    str | GradioComponent | tuple[str] | tuple[str | Path, str] | None
-                ]
-            ]
-            | Callable
-            | None
-        ) = None,
+        value: (list[MessageDict | Message] | TupleFormat | Callable | None) = None,
         *,
-        type: Literal["messages", "tuples"] = "tuples",
+        type: Literal["messages", "tuples"] | None = None,
         label: str | None = None,
         every: Timer | float | None = None,
         inputs: Component | Sequence[Component] | set[Component] | None = None,
@@ -157,9 +164,12 @@ def __init__(
         visible: bool = True,
         elem_id: str | None = None,
         elem_classes: list[str] | str | None = None,
+        autoscroll: bool = True,
         render: bool = True,
         key: int | str | None = None,
-        height: int | str | None = None,
+        height: int | str | None = 400,
+        max_height: int | str | None = None,
+        min_height: int | str | None = None,
         latex_delimiters: list[dict[str, str | bool]] | None = None,
         rtl: bool = False,
         show_share_button: bool | None = None,
@@ -169,16 +179,16 @@ def __init__(
         render_markdown: bool = True,
         bubble_full_width: bool = True,
         line_breaks: bool = True,
-        likeable: bool = False,
         layout: Literal["panel", "bubble"] | None = None,
         placeholder: str | None = None,
+        examples: list[ExampleMessage] | None = None,
         show_copy_all_button=False,
     ):
         """
         Parameters:
-            value: Default value to show in chatbot. If callable, the function will be called whenever the app loads to set the initial value of the component.
-            type: The format of the messages. If 'tuples', expects a `list[list[str | None | tuple]]`, i.e. a list of lists. The inner list should have 2 elements: the user message and the response message. The individual messages can be (1) strings in valid Markdown, (2) tuples if sending files: (a filepath or URL to a file, [optional string alt text]) -- if the file is image/video/audio, it is displayed in the Chatbot, or (3) None, in which case the message is not displayed. If 'messages', passes the value as a list of dictionaries with 'role' and 'content' keys. The `content' key's value supports everything the 'tuples' format supports. The 'role' key should be one of 'user' or 'assistant'. Any other roles will not be displayed in the output.
-            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            value: Default list of messages to show in chatbot, where each message is of the format {"role": "user", "content": "Help me."}. Role can be one of "user", "assistant", or "system". Content should be either text, or media passed as a Gradio component, e.g. {"content": gr.Image("lion.jpg")}. If callable, the function will be called whenever the app loads to set the initial value of the component.
+            type: The format of the messages passed into the chat history parameter of `fn`. If "messages", passes the value as a list of dictionaries with openai-style "role" and "content" keys. The "content" key's value should be one of the following - (1) strings in valid Markdown (2) a dictionary with a "path" key and value corresponding to the file to display or (3) an instance of a Gradio component. At the moment Image, Plot, Video, Gallery, Audio, and HTML are supported. The "role" key should be one of 'user' or 'assistant'. Any other roles will not be displayed in the output. If this parameter is 'tuples', expects a `list[list[str | None | tuple]]`, i.e. a list of lists. The inner list should have 2 elements: the user message and the response message, but this format is deprecated.
+            label: the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
             show_label: if True, will display label.
@@ -188,9 +198,12 @@ def __init__(
             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.
             elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
+            autoscroll: If True, will automatically scroll to the bottom of the textbox when the value changes, unless the user scrolls up. If False, will not scroll to the bottom of the textbox when the value changes.
             render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
             key: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
-            height: The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed.
+            height: The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If messages exceed the height, the component will scroll.
+            max_height: The maximum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If messages exceed the height, the component will scroll. If messages are shorter than the height, the component will shrink to fit the content. Will not have any effect if `height` is set and is smaller than `max_height`.
+            min_height: The minimum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If messages exceed the height, the component will expand to fit the content. Will not have any effect if `height` is set and is larger than `min_height`.
             latex_delimiters: A list of dicts of the form {"left": open delimiter (str), "right": close delimiter (str), "display": whether to display in newline (bool)} that will be used to render LaTeX expressions. If not provided, `latex_delimiters` is set to `[{ "left": "$$", "right": "$$", "display": True }]`, so only expressions enclosed in $$ delimiters will be rendered as LaTeX, and in a new line. Pass in an empty list to disable LaTeX rendering. For more information, see the [KaTeX documentation](https://katex.org/docs/autorender.html).
             rtl: If True, sets the direction of the rendered text to right-to-left. Default is False, which renders text left-to-right.
             show_share_button: If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.
@@ -200,20 +213,35 @@ def __init__(
             render_markdown: If False, will disable Markdown rendering for chatbot messages.
             bubble_full_width: If False, the chat bubble will fit to the content of the message. If True (default), the chat bubble will be the full width of the component.
             line_breaks: If True (default), will enable Github-flavored Markdown line breaks in chatbot messages. If False, single new lines will be ignored. Only applies if `render_markdown` is True.
-            likeable: Whether the chat messages display a like or dislike button. Set automatically by the .like method but has to be present in the signature for it to show up in the config.
             layout: If "panel", will display the chatbot in a llm style layout. If "bubble", will display the chatbot with message bubbles, with the user and bot messages on alterating sides. Will default to "bubble".
             placeholder: a placeholder message to display in the chatbot when it is empty. Centered vertically and horizontally in the Chatbot. Supports Markdown and HTML. If None, no placeholder is displayed.
+            examples: A list of example messages to display in the chatbot before any user/assistant messages are shown. Each example should be a dictionary with an optional "text" key representing the message that should be populated in the Chatbot when clicked, an optional "files" key, whose value should be a list of files to populate in the Chatbot, an optional "icon" key, whose value should be a filepath or URL to an image to display in the example box, and an optional "display_text" key, whose value should be the text to display in the example box. If "display_text" is not provided, the value of "text" will be displayed.
             show_copy_all_button: If True, will show a copy all button that copies all chatbot messages to the clipboard.
         """
-        self.likeable = likeable
+        if type is None:
+            warnings.warn(
+                "You have not specified a value for the `type` parameter. Defaulting to the 'tuples' format for chatbot messages, but this is deprecated and will be removed in a future version of Gradio. Please set type='messages' instead, which uses openai-style 'role' and 'content' keys.",
+                UserWarning,
+            )
+            type = "tuples"
+        elif type == "tuples":
+            warnings.warn(
+                "The 'tuples' format for chatbot messages is deprecated and will be removed in a future version of Gradio. Please set type='messages' instead, which uses openai-style 'role' and 'content' keys.",
+                UserWarning,
+            )
         if type not in ["messages", "tuples"]:
-            raise ValueError("type must be 'messages' or 'tuples', received: {type}")
+            raise ValueError(
+                f"The `type` parameter must be 'messages' or 'tuples', received: {type}"
+            )
         self.type: Literal["tuples", "messages"] = type
-        if type == "messages":
+        if self.type == "messages":
             self.data_model = ChatbotDataMessages
         else:
             self.data_model = ChatbotDataTuples
+        self.autoscroll = autoscroll
         self.height = height
+        self.max_height = max_height
+        self.min_height = min_height
         self.rtl = rtl
         if latex_delimiters is None:
             latex_delimiters = [{"left": "$$", "right": "$$", "display": True}]
@@ -255,6 +283,29 @@ def __init__(
             ]
         self.placeholder = placeholder
 
+        self.examples = examples
+        if self.examples is not None:
+            for i, example in enumerate(self.examples):
+                if "icon" in example and isinstance(example["icon"], str):
+                    example["icon"] = self.serve_static_file(example["icon"])
+                file_info = example.get("files")
+                if file_info is not None and not isinstance(file_info, list):
+                    raise Error(
+                        "Data incompatible with files format. The 'files' passed should be a list of file paths or URLs."
+                    )
+                if file_info is not None:
+                    for i, file in enumerate(file_info):
+                        if isinstance(file, str):
+                            orig_name = Path(file).name
+                            file_data = self.serve_static_file(file)
+                            if file_data is not None:
+                                file_data["orig_name"] = orig_name
+                                file_data["mime_type"] = client_utils.get_mimetype(
+                                    orig_name
+                                )
+                                file_data = FileDataDict(**file_data)
+                                file_info[i] = file_data
+
     @staticmethod
     def _check_format(messages: list[Any], type: Literal["messages", "tuples"]):
         if type == "messages":
@@ -262,7 +313,7 @@ def _check_format(messages: list[Any], type: Literal["messages", "tuples"]):
                 isinstance(message, dict)
                 and "role" in message
                 and "content" in message
-                or isinstance(message, ChatMessage)
+                or isinstance(message, ChatMessage | Message)
                 for message in messages
             )
             if not all_valid:
@@ -397,8 +448,10 @@ def _postprocess_content(
         elif isinstance(chat_message, FileData):
             return FileMessage(file=chat_message)
         elif isinstance(chat_message, GradioComponent):
+            chat_message.unrender()
             component = import_component_and_data(type(chat_message).__name__)
             if component:
+                chat_message.constructor_args["render"] = False
                 component = chat_message.__class__(**chat_message.constructor_args)
                 chat_message.constructor_args.pop("value", None)
                 config = component.get_config()
@@ -433,7 +486,7 @@ def _postprocess_messages_tuples(self, value: TupleFormat) -> ChatbotDataTuples:
 
     def _postprocess_message_messages(
         self, message: MessageDict | ChatMessage
-    ) -> list[Message]:
+    ) -> Message:
         if isinstance(message, dict):
             message["content"] = self._postprocess_content(message["content"])
             msg = Message(**message)  # type: ignore
@@ -444,35 +497,14 @@ def _postprocess_message_messages(
                 content=message.content,  # type: ignore
                 metadata=message.metadata,  # type: ignore
             )
+        elif isinstance(message, Message):
+            return message
         else:
             raise Error(
                 f"Invalid message for Chatbot component: {message}", visible=False
             )
 
-        # extract file path from message
-        new_messages = []
-        if isinstance(msg.content, str):
-            for word in msg.content.split(" "):
-                filepath = Path(word)
-                try:
-                    is_file = filepath.is_file() and filepath.exists()
-                except OSError:
-                    is_file = False
-                if is_file:
-                    filepath = cast(
-                        str, move_resource_to_block_cache(filepath, block=self)
-                    )
-                    mime_type = client_utils.get_mimetype(filepath)
-                    new_messages.append(
-                        Message(
-                            role=msg.role,
-                            metadata=msg.metadata,
-                            content=FileMessage(
-                                file=FileData(path=filepath, mime_type=mime_type)
-                            ),
-                        ),
-                    )
-        return [msg, *new_messages]
+        return msg
 
     def postprocess(
         self,
@@ -485,7 +517,7 @@ def postprocess(
             an object of type ChatbotData
         """
         data_model = cast(
-            Union[Type[ChatbotDataTuples], Type[ChatbotDataMessages]], self.data_model
+            Union[type[ChatbotDataTuples], type[ChatbotDataMessages]], self.data_model
         )
         if value is None:
             return data_model(root=[])
@@ -494,9 +526,8 @@ def postprocess(
             return self._postprocess_messages_tuples(cast(TupleFormat, value))
         self._check_format(value, "messages")
         processed_messages = [
-            msg
+            self._postprocess_message_messages(cast(MessageDict, message))
             for message in value
-            for msg in self._postprocess_message_messages(cast(MessageDict, message))
         ]
         return ChatbotDataMessages(root=processed_messages)
 
diff --git a/gradio/components/checkbox.py b/gradio/components/checkbox.py
index e4dc833ed36e9..9cbbbf61527c9 100644
--- a/gradio/components/checkbox.py
+++ b/gradio/components/checkbox.py
@@ -2,7 +2,8 @@
 
 from __future__ import annotations
 
-from typing import TYPE_CHECKING, Any, Callable, Sequence
+from collections.abc import Callable, Sequence
+from typing import TYPE_CHECKING, Any
 
 from gradio_client.documentation import document
 
@@ -46,8 +47,8 @@ def __init__(
         """
         Parameters:
             value: if True, checked by default. If callable, the function will be called whenever the app loads to set the initial value of the component.
-            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
-            info: additional component description.
+            label: the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to.
+            info: additional component description, appears below the label in smaller font. Supports markdown / HTML syntax.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
             show_label: if True, will display label.
diff --git a/gradio/components/checkboxgroup.py b/gradio/components/checkboxgroup.py
index 48927df5348bd..c86348becae2e 100644
--- a/gradio/components/checkboxgroup.py
+++ b/gradio/components/checkboxgroup.py
@@ -2,12 +2,14 @@
 
 from __future__ import annotations
 
-from typing import TYPE_CHECKING, Any, Callable, Literal, Sequence
+from collections.abc import Callable, Sequence
+from typing import TYPE_CHECKING, Any, Literal
 
 from gradio_client.documentation import document
 
 from gradio.components.base import Component, FormComponent
 from gradio.events import Events
+from gradio.exceptions import Error
 
 if TYPE_CHECKING:
     from gradio.components import Timer
@@ -49,8 +51,8 @@ def __init__(
             choices: A list of string or numeric options to select from. An option can also be a tuple of the form (name, value), where name is the displayed name of the checkbox button and value is the value to be passed to the function, or returned by the function.
             value: Default selected list of options. If a single choice is selected, it can be passed in as a string or numeric type. If callable, the function will be called whenever the app loads to set the initial value of the component.
             type: Type of value to be returned by component. "value" returns the list of strings of the choices selected, "index" returns the list of indices of the choices selected.
-            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
-            info: Additional component description.
+            label: the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to.
+            info: additional component description, appears below the label in smaller font. Supports markdown / HTML syntax.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
             show_label: If True, will display label.
@@ -117,10 +119,15 @@ def preprocess(
         Returns:
             Passes the list of checked checkboxes as a `list[str | int | float]` or their indices as a `list[int]` into the function, depending on `type`.
         """
+        choice_values = [value for _, value in self.choices]
+        for value in payload:
+            if value not in choice_values:
+                raise Error(
+                    f"Value: {value} is not in the list of choices: {choice_values}"
+                )
         if self.type == "value":
             return payload
         elif self.type == "index":
-            choice_values = [value for _, value in self.choices]
             return [
                 choice_values.index(choice) if choice in choice_values else None
                 for choice in payload
diff --git a/gradio/components/clear_button.py b/gradio/components/clear_button.py
index f1617a74b9044..f8ba9c404872d 100644
--- a/gradio/components/clear_button.py
+++ b/gradio/components/clear_button.py
@@ -4,7 +4,8 @@
 
 import copy
 import json
-from typing import TYPE_CHECKING, Any, Literal, Sequence
+from collections.abc import Sequence
+from typing import TYPE_CHECKING, Any, Literal
 
 from gradio_client.documentation import document
 
diff --git a/gradio/components/code.py b/gradio/components/code.py
index 5b095dc609364..4b3a1469d8554 100644
--- a/gradio/components/code.py
+++ b/gradio/components/code.py
@@ -2,8 +2,8 @@
 
 from __future__ import annotations
 
-from pathlib import Path
-from typing import TYPE_CHECKING, Any, Callable, Literal, Sequence
+from collections.abc import Callable, Sequence
+from typing import TYPE_CHECKING, Any, Literal
 
 from gradio_client.documentation import document
 
@@ -29,6 +29,7 @@ class Code(Component):
         "html",
         "css",
         "javascript",
+        "jinja2",
         "typescript",
         "yaml",
         "dockerfile",
@@ -59,7 +60,7 @@ class Code(Component):
 
     def __init__(
         self,
-        value: str | Callable | tuple[str] | None = None,
+        value: str | Callable | None = None,
         language: Literal[
             "python",
             "c",
@@ -69,6 +70,7 @@ def __init__(
             "html",
             "css",
             "javascript",
+            "jinja2",
             "typescript",
             "yaml",
             "dockerfile",
@@ -93,6 +95,7 @@ def __init__(
         every: Timer | float | None = None,
         inputs: Component | Sequence[Component] | set[Component] | None = None,
         lines: int = 5,
+        max_lines: int | None = None,
         label: str | None = None,
         interactive: bool | None = None,
         show_label: bool | None = None,
@@ -104,6 +107,7 @@ def __init__(
         elem_classes: list[str] | str | None = None,
         render: bool = True,
         key: int | str | None = None,
+        wrap_lines: bool = False,
     ):
         """
         Parameters:
@@ -111,7 +115,7 @@ def __init__(
             language: The language to display the code as. Supported languages listed in `gr.Code.languages`.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
-            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            label: the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
             interactive: Whether user should be able to enter code or only view it.
             show_label: if True, will display label.
             container: If True, will place the component in a container - providing some extra padding around the border.
@@ -123,12 +127,16 @@ def __init__(
             render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
             key: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
             lines: Minimum number of visible lines to show in the code editor.
+            max_lines: Maximum number of visible lines to show in the code editor. Defaults to None and will fill the height of the container.
+            wrap_lines: If True, will wrap lines to the width of the container when overflow occurs. Defaults to False.
         """
         if language not in Code.languages:
             raise ValueError(f"Language {language} not supported.")
 
         self.language = language
         self.lines = lines
+        self.max_lines = max(lines, max_lines) if max_lines is not None else None
+        self.wrap_lines = wrap_lines
         super().__init__(
             label=label,
             every=every,
@@ -155,20 +163,21 @@ def preprocess(self, payload: str | None) -> str | None:
         """
         return payload
 
-    def postprocess(self, value: tuple[str] | str | None) -> None | str:
+    def postprocess(self, value: str | None) -> None | str:
         """
         Parameters:
-            value: Expects a `str` of code or a single-element `tuple`: (filepath,) with the `str` path to a file containing the code.
+            value: Expects a `str` of code.
         Returns:
-            Returns the code as a `str`.
+            Returns the code as a `str` stripped of leading and trailing whitespace.
         """
         if value is None:
             return None
-        elif isinstance(value, tuple):
-            with open(value[0], encoding="utf-8") as file_data:
-                return file_data.read()
-        else:
-            return value.strip()
+        if isinstance(value, tuple):
+            raise ValueError(
+                "Code component does not support returning files as tuples anymore. "
+                "Please read the file contents and return as str instead."
+            )
+        return value.strip()
 
     def api_info(self) -> dict[str, Any]:
         return {"type": "string"}
@@ -179,7 +188,5 @@ def example_payload(self) -> Any:
     def example_value(self) -> Any:
         return "print('Hello World')"
 
-    def process_example(self, value: str | tuple[str] | None) -> str | None:
-        if isinstance(value, tuple):
-            return Path(value[0]).name
+    def process_example(self, value: str | None) -> str | None:
         return super().process_example(value)
diff --git a/gradio/components/color_picker.py b/gradio/components/color_picker.py
index 163732ad31795..c92504b689cca 100644
--- a/gradio/components/color_picker.py
+++ b/gradio/components/color_picker.py
@@ -2,7 +2,8 @@
 
 from __future__ import annotations
 
-from typing import TYPE_CHECKING, Any, Callable, Sequence
+from collections.abc import Callable, Sequence
+from typing import TYPE_CHECKING, Any
 
 from gradio_client.documentation import document
 
@@ -44,8 +45,8 @@ def __init__(
         """
         Parameters:
             value: default text to provide in color picker. If callable, the function will be called whenever the app loads to set the initial value of the component.
-            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
-            info: additional component description.
+            label: the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to.
+            info: additional component description, appears below the label in smaller font. Supports markdown / HTML syntax.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
             show_label: if True, will display label.
diff --git a/gradio/components/dataframe.py b/gradio/components/dataframe.py
index 4dd6f1a04b16f..bca45d4a79669 100644
--- a/gradio/components/dataframe.py
+++ b/gradio/components/dataframe.py
@@ -3,16 +3,12 @@
 from __future__ import annotations
 
 import warnings
+from collections.abc import Callable, Sequence
 from typing import (
     TYPE_CHECKING,
     Any,
-    Callable,
-    Dict,
-    List,
     Literal,
     Optional,
-    Sequence,
-    Tuple,
     Union,
 )
 
@@ -46,9 +42,9 @@ def _import_polars():
 
 
 class DataframeData(GradioModel):
-    headers: List[str]
-    data: Union[List[List[Any]], List[Tuple[Any, ...]]]
-    metadata: Optional[Dict[str, Optional[List[Any]]]] = None
+    headers: list[str]
+    data: Union[list[list[Any]], list[tuple[Any, ...]]]
+    metadata: Optional[dict[str, Optional[list[Any]]]] = None
 
 
 @document()
@@ -85,7 +81,7 @@ def __init__(
         show_label: bool | None = None,
         every: Timer | float | None = None,
         inputs: Component | Sequence[Component] | set[Component] | None = None,
-        height: int = 500,
+        max_height: int | str = 500,
         scale: int | None = None,
         min_width: int = 160,
         interactive: bool | None = None,
@@ -106,13 +102,13 @@ def __init__(
             col_count: Limit number of columns for input and decide whether user can create new columns. The first element of the tuple is an `int`, the number of columns; the second should be 'fixed' or 'dynamic', the new column behaviour. If an `int` is passed the columns default to 'dynamic'
             datatype: Datatype of values in sheet. Can be provided per column as a list of strings, or for the entire sheet as a single string. Valid datatypes are "str", "number", "bool", "date", and "markdown".
             type: Type of value to be returned by component. "pandas" for pandas dataframe, "numpy" for numpy array, "polars" for polars dataframe, or "array" for a Python list of lists.
-            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            label: the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
             latex_delimiters: A list of dicts of the form {"left": open delimiter (str), "right": close delimiter (str), "display": whether to display in newline (bool)} that will be used to render LaTeX expressions. If not provided, `latex_delimiters` is set to `[{ "left": "$$", "right": "$$", "display": True }]`, so only expressions enclosed in $$ delimiters will be rendered as LaTeX, and in a new line. Pass in an empty list to disable LaTeX rendering. For more information, see the [KaTeX documentation](https://katex.org/docs/autorender.html). Only applies to columns whose datatype is "markdown".
-            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            label: the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
             show_label: if True, will display label.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
-            height: The maximum height of the dataframe, specified in pixels if a number is passed, or in CSS units if a string is passed. If more rows are created than can fit in the height, a scrollbar will appear.
+            max_height: The maximum height of the dataframe, specified in pixels if a number is passed, or in CSS units if a string is passed. If more rows are created than can fit in the height, a scrollbar will appear.
             scale: relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.
             min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
             interactive: if True, will allow users to edit the dataframe; if False, can only be used to display data. If not provided, this is inferred based on whether the component is used as an input or output.
@@ -170,7 +166,7 @@ def __init__(
         if latex_delimiters is None:
             latex_delimiters = [{"left": "$$", "right": "$$", "display": True}]
         self.latex_delimiters = latex_delimiters
-        self.height = height
+        self.max_height = max_height
         self.line_breaks = line_breaks
         self.column_widths = [
             w if isinstance(w, str) else f"{w}px" for w in (column_widths or [])
@@ -196,7 +192,7 @@ def preprocess(
     ) -> pd.DataFrame | np.ndarray | pl.DataFrame | list[list]:
         """
         Parameters:
-            payload: the uploaded spreadsheet data as an object with `headers` and `data` attributes
+            payload: the uploaded spreadsheet data as an object with `headers` and `data` attributes. Note that sorting the columns in the browser will not affect the values passed to this function.
         Returns:
             Passes the uploaded spreadsheet data as a `pandas.DataFrame`, `numpy.array`, `polars.DataFrame`, or native 2D Python `list[list]` depending on `type`
         """
diff --git a/gradio/components/dataset.py b/gradio/components/dataset.py
index 468087aef2057..731a63eada5e1 100644
--- a/gradio/components/dataset.py
+++ b/gradio/components/dataset.py
@@ -3,7 +3,8 @@
 from __future__ import annotations
 
 import warnings
-from typing import Any, Literal, Sequence
+from collections.abc import Sequence
+from typing import Any, Literal
 
 from gradio_client.documentation import document
 
@@ -47,7 +48,7 @@ def __init__(
     ):
         """
         Parameters:
-            label: The label for this component, appears above the component.
+            label: the label for this component, appears above the component.
             components: Which component types to show in this dataset widget, can be passed in as a list of string names or Components instances. The following components are supported in a Dataset: Audio, Checkbox, CheckboxGroup, ColorPicker, Dataframe, Dropdown, File, HTML, Image, Markdown, Model3D, Number, Radio, Slider, Textbox, TimeSeries, Video
             samples: a nested list of samples. Each sublist within the outer list represents a data sample, and each element within the sublist represents an value for each component
             headers: Column headers in the Dataset widget, should be the same len as components. If not provided, inferred from component labels
@@ -99,7 +100,7 @@ def __init__(
         self.samples: list[list] = []
         for example in self.raw_samples:
             self.samples.append([])
-            for component, ex in zip(self._components, example):
+            for component, ex in zip(self._components, example, strict=False):
                 # If proxy_url is set, that means it is being loaded from an external Gradio app
                 # which means that the example has already been processed.
                 if self.proxy_url is None:
diff --git a/gradio/components/datetime.py b/gradio/components/datetime.py
index 5b77738be40b6..8fe26e13ea949 100644
--- a/gradio/components/datetime.py
+++ b/gradio/components/datetime.py
@@ -46,12 +46,12 @@ def __init__(
         """
         Parameters:
             value: default value for datetime.
-            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            label: the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to.
+            info: additional component description, appears below the label in smaller font. Supports markdown / HTML syntax.
             show_label: if True, will display label.
             include_time: If True, the component will include time selection. If False, only date selection will be available.
             type: The type of the value. Can be "timestamp", "datetime", or "string". If "timestamp", the value will be a number representing the start and end date in seconds since epoch. If "datetime", the value will be a datetime object. If "string", the value will be the date entered by the user.
             timezone: The timezone to use for timestamps, such as "US/Pacific" or "Europe/Paris". If None, the timezone will be the local timezone.
-            info: additional component description.
             every: 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.
             scale: relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.
             min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
diff --git a/gradio/components/download_button.py b/gradio/components/download_button.py
index 15c5aec9ed7ff..6c34718c09745 100644
--- a/gradio/components/download_button.py
+++ b/gradio/components/download_button.py
@@ -3,8 +3,9 @@
 from __future__ import annotations
 
 import tempfile
+from collections.abc import Callable, Sequence
 from pathlib import Path
-from typing import TYPE_CHECKING, Callable, Literal, Sequence
+from typing import TYPE_CHECKING, Literal
 
 from gradio_client import handle_file
 from gradio_client.documentation import document
diff --git a/gradio/components/dropdown.py b/gradio/components/dropdown.py
index 89e90eb7ae4fd..7f7001b0211bf 100644
--- a/gradio/components/dropdown.py
+++ b/gradio/components/dropdown.py
@@ -3,12 +3,14 @@
 from __future__ import annotations
 
 import warnings
-from typing import TYPE_CHECKING, Any, Callable, Literal, Sequence
+from collections.abc import Callable, Sequence
+from typing import TYPE_CHECKING, Any, Literal
 
 from gradio_client.documentation import document
 
 from gradio.components.base import Component, FormComponent
 from gradio.events import Events
+from gradio.exceptions import Error
 
 if TYPE_CHECKING:
     from gradio.components import Timer
@@ -66,8 +68,8 @@ def __init__(
             allow_custom_value: If True, allows user to enter a custom value that is not in the list of choices.
             max_choices: maximum number of choices that can be selected. If None, no limit is enforced.
             filterable: If True, user will be able to type into the dropdown and filter the choices by typing. Can only be set to False if `allow_custom_value` is False.
-            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
-            info: additional component description.
+            label: the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to.
+            info: additional component description, appears below the label in smaller font. Supports markdown / HTML syntax.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
             show_label: if True, will display label.
@@ -160,15 +162,26 @@ def preprocess(
         Returns:
             Passes the value of the selected dropdown choice as a `str | int | float` or its index as an `int` into the function, depending on `type`. Or, if `multiselect` is True, passes the values of the selected dropdown choices as a list of correspoding values/indices instead.
         """
+        if payload is None:
+            return None
+
+        choice_values = [value for _, value in self.choices]
+        if not self.allow_custom_value:
+            if isinstance(payload, list):
+                for value in payload:
+                    if value not in choice_values:
+                        raise Error(
+                            f"Value: {value} is not in the list of choices: {choice_values}"
+                        )
+            elif payload not in choice_values:
+                raise Error(
+                    f"Value: {payload} is not in the list of choices: {choice_values}"
+                )
+
         if self.type == "value":
             return payload
         elif self.type == "index":
-            choice_values = [value for _, value in self.choices]
-            if payload is None:
-                return None
-            elif self.multiselect:
-                if not isinstance(payload, list):
-                    raise TypeError("Multiselect dropdown payload must be a list")
+            if isinstance(payload, list):
                 return [
                     choice_values.index(choice) if choice in choice_values else None
                     for choice in payload
diff --git a/gradio/components/duplicate_button.py b/gradio/components/duplicate_button.py
index 90f01bc4c29ef..35ee8b0342fd3 100644
--- a/gradio/components/duplicate_button.py
+++ b/gradio/components/duplicate_button.py
@@ -2,7 +2,8 @@
 
 from __future__ import annotations
 
-from typing import TYPE_CHECKING, Literal, Sequence
+from collections.abc import Sequence
+from typing import TYPE_CHECKING, Literal
 
 from gradio_client.documentation import document
 
@@ -28,7 +29,7 @@ def __init__(
         *,
         every: Timer | float | None = None,
         inputs: Component | Sequence[Component] | set[Component] | None = None,
-        variant: Literal["primary", "secondary", "stop"] = "secondary",
+        variant: Literal["primary", "secondary", "stop", "huggingface"] = "huggingface",
         size: Literal["sm", "lg"] | None = "sm",
         icon: str | None = None,
         link: str | None = None,
@@ -47,7 +48,7 @@ def __init__(
             value: Default text for the button to display. If callable, the function will be called whenever the app loads to set the initial value of the component.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
-            variant: 'primary' for main call-to-action, 'secondary' for a more subdued style, 'stop' for a stop button.
+            variant: 'primary' for main call-to-action, 'secondary' for a more subdued style, 'stop' for a stop button, 'huggingface' for no background color (appears white in light mode, black in dark mode).
             size: Size of the button. Can be "sm" or "lg".
             icon: URL or path to the icon file to display within the button. If None, no icon will be displayed.
             link: URL to open when the button is clicked. If None, no link will be used.
diff --git a/gradio/components/file.py b/gradio/components/file.py
index 4bc4503cd7273..e0cc1c199870d 100644
--- a/gradio/components/file.py
+++ b/gradio/components/file.py
@@ -4,8 +4,9 @@
 
 import tempfile
 import warnings
+from collections.abc import Callable, Sequence
 from pathlib import Path
-from typing import TYPE_CHECKING, Any, Callable, Literal, Sequence
+from typing import TYPE_CHECKING, Any, Literal
 
 import gradio_client.utils as client_utils
 from gradio_client import handle_file
@@ -15,6 +16,7 @@
 from gradio.components.base import Component
 from gradio.data_classes import FileData, ListFiles
 from gradio.events import Events
+from gradio.exceptions import Error
 from gradio.utils import NamedString
 
 if TYPE_CHECKING:
@@ -26,7 +28,7 @@ class File(Component):
     """
     Creates a file component that allows uploading one or more generic files (when used as an input) or displaying generic files or URLs for download (as output).
 
-    Demo: zip_files, zip_to_json
+        Demo: zip_files, zip_to_json
     """
 
     EVENTS = [Events.change, Events.select, Events.clear, Events.upload, Events.delete]
@@ -59,14 +61,14 @@ def __init__(
             file_count: if single, allows user to upload one file. If "multiple", user uploads multiple files. If "directory", user uploads all files in selected directory. Return type will be list for each file in case of "multiple" or "directory".
             file_types: List of file extensions or types of files to be uploaded (e.g. ['image', '.json', '.mp4']). "file" allows any file to be uploaded, "image" allows only image files to be uploaded, "audio" allows only audio files to be uploaded, "video" allows only video files to be uploaded, "text" allows only text files to be uploaded.
             type: Type of value to be returned by component. "file" returns a temporary file object with the same base name as the uploaded file, whose full path can be retrieved by file_obj.name, "binary" returns an bytes object.
-            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            label: the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
             show_label: if True, will display label.
             container: If True, will place the component in a container - providing some extra padding around the border.
             scale: relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.
             min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
-            height: The maximum height of the file component, specified in pixels if a number is passed, or in CSS units if a string is passed. If more files are uploaded than can fit in the height, a scrollbar will appear.
+            height: The default height of the file component when no files have been uploaded, or the maximum height of the file component when files are present. Specified in pixels if a number is passed, or in CSS units if a string is passed. If more files are uploaded than can fit in the height, a scrollbar will appear.
             interactive: if True, will allow users to upload a file; if False, can only be used to display files. If not provided, this is inferred based on whether the component is used as an input or output.
             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.
@@ -124,6 +126,12 @@ def __init__(
     def _process_single_file(self, f: FileData) -> NamedString | bytes:
         file_name = f.path
         if self.type == "filepath":
+            if self.file_types and not client_utils.is_valid_file(
+                file_name, self.file_types
+            ):
+                raise Error(
+                    f"Invalid file type. Please upload a file that is one of these formats: {self.file_types}"
+                )
             file = tempfile.NamedTemporaryFile(delete=False, dir=self.GRADIO_CACHE)
             file.name = file_name
             return NamedString(file_name)
diff --git a/gradio/components/file_explorer.py b/gradio/components/file_explorer.py
index 0c285f41997a2..d6fa126db3383 100644
--- a/gradio/components/file_explorer.py
+++ b/gradio/components/file_explorer.py
@@ -4,9 +4,9 @@
 
 import fnmatch
 import os
-import warnings
+from collections.abc import Callable, Sequence
 from pathlib import Path
-from typing import TYPE_CHECKING, Any, Callable, List, Literal, Sequence
+from typing import TYPE_CHECKING, Any, Literal
 
 from gradio_client.documentation import document
 
@@ -21,7 +21,7 @@
 class FileExplorerData(GradioRootModel):
     # The outer list is the list of files selected, and the inner list
     # is the path to the file as a list, split by the os.sep.
-    root: List[List[str]]
+    root: list[list[str]]
 
 
 @document()
@@ -51,14 +51,15 @@ def __init__(
         container: bool = True,
         scale: int | None = None,
         min_width: int = 160,
-        height: int | float | str | None = None,
+        height: int | str | None = None,
+        max_height: int | str | None = 500,
+        min_height: int | str | None = None,
         interactive: bool | None = None,
         visible: bool = True,
         elem_id: str | None = None,
         elem_classes: list[str] | str | None = None,
         render: bool = True,
         key: int | str | None = None,
-        root: None = None,
     ):
         """
         Parameters:
@@ -67,7 +68,7 @@ def __init__(
             file_count: Whether to allow single or multiple files to be selected. If "single", the component will return a single absolute file path as a string. If "multiple", the component will return a list of absolute file paths as a list of strings.
             root_dir: Path to root directory to select files from. If not provided, defaults to current working directory.
             ignore_glob: The glob-style, case-sensitive pattern that will be used to exclude files from the list. For example, "*.py" will exclude all .py files from the list. See the Python glob documentation at https://docs.python.org/3/library/glob.html for more information.
-            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            label: the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
             show_label: if True, will display label.
@@ -82,12 +83,6 @@ def __init__(
             render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
             key: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
         """
-        if root is not None:
-            warnings.warn(
-                "The `root` parameter has been deprecated. Please use `root_dir` instead."
-            )
-            root_dir = root
-            self._constructor_args[0]["root_dir"] = root
         self.root_dir = DeveloperPath(os.path.abspath(root_dir))
         self.glob = glob
         self.ignore_glob = ignore_glob
@@ -98,6 +93,8 @@ def __init__(
             )
         self.file_count = file_count
         self.height = height
+        self.max_height = max_height
+        self.min_height = min_height
 
         super().__init__(
             label=label,
diff --git a/gradio/components/gallery.py b/gradio/components/gallery.py
index 7a514ab9887fe..e7a8759452b42 100644
--- a/gradio/components/gallery.py
+++ b/gradio/components/gallery.py
@@ -2,17 +2,14 @@
 
 from __future__ import annotations
 
+from collections.abc import Callable, Sequence
 from concurrent.futures import ThreadPoolExecutor
 from pathlib import Path
 from typing import (
     TYPE_CHECKING,
     Any,
-    Callable,
-    List,
     Literal,
     Optional,
-    Sequence,
-    Tuple,
     Union,
 )
 from urllib.parse import urlparse
@@ -20,6 +17,7 @@
 import numpy as np
 import PIL.Image
 from gradio_client import handle_file
+from gradio_client import utils as client_utils
 from gradio_client.documentation import document
 from gradio_client.utils import is_http_url_like
 
@@ -27,12 +25,13 @@
 from gradio.components.base import Component
 from gradio.data_classes import FileData, GradioModel, GradioRootModel
 from gradio.events import Events
+from gradio.exceptions import Error
 
 if TYPE_CHECKING:
     from gradio.components import Timer
 
-GalleryImageType = Union[np.ndarray, PIL.Image.Image, Path, str]
-CaptionedGalleryImageType = Tuple[GalleryImageType, str]
+GalleryMediaType = Union[np.ndarray, PIL.Image.Image, Path, str]
+CaptionedGalleryMediaType = tuple[GalleryMediaType, str]
 
 
 class GalleryImage(GradioModel):
@@ -40,15 +39,20 @@ class GalleryImage(GradioModel):
     caption: Optional[str] = None
 
 
+class GalleryVideo(GradioModel):
+    video: FileData
+    caption: Optional[str] = None
+
+
 class GalleryData(GradioRootModel):
-    root: List[GalleryImage]
+    root: list[Union[GalleryImage, GalleryVideo]]
 
 
 @document()
 class Gallery(Component):
     """
-    Creates a gallery component that allows displaying a grid of images, and optionally captions. If used as an input, the user can upload images to the gallery.
-    If used as an output, the user can click on individual images to view them at a higher resolution.
+    Creates a gallery component that allows displaying a grid of images or videos, and optionally captions. If used as an input, the user can upload images or videos to the gallery.
+    If used as an output, the user can click on individual images or videos to view them at a higher resolution.
 
     Demos: fake_gan
     """
@@ -66,6 +70,7 @@ def __init__(
         ) = None,
         *,
         format: str = "webp",
+        file_types: list[str] | None = None,
         label: str | None = None,
         every: Timer | float | None = None,
         inputs: Component | Sequence[Component] | set[Component] | None = None,
@@ -78,7 +83,7 @@ def __init__(
         elem_classes: list[str] | str | None = None,
         render: bool = True,
         key: int | str | None = None,
-        columns: int | list[int] | Tuple[int, ...] | None = 2,
+        columns: int | list[int] | tuple[int, ...] | None = 2,
         rows: int | list[int] | None = None,
         height: int | float | str | None = None,
         allow_preview: bool = True,
@@ -95,9 +100,10 @@ def __init__(
     ):
         """
         Parameters:
-            value: List of images to display in the gallery by default. If callable, the function will be called whenever the app loads to set the initial value of the component.
+            value: List of images or videos to display in the gallery by default. If callable, the function will be called whenever the app loads to set the initial value of the component.
             format: Format to save images before they are returned to the frontend, such as 'jpeg' or 'png'. This parameter only applies to images that are returned from the prediction function as numpy arrays or PIL Images. The format should be supported by the PIL library.
-            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            file_types: List of file extensions or types of files to be uploaded (e.g. ['image', '.mp4']), when this is used as an input component. "image" allows only image files to be uploaded, "video" allows only video files to be uploaded, ".mp4" allows only mp4 files to be uploaded, etc. If None, any image and video files types are allowed.
+            label: the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
             show_label: if True, will display label.
@@ -137,6 +143,7 @@ def __init__(
         self.selected_index = selected_index
         self.type = type
         self.show_fullscreen_button = show_fullscreen_button
+        self.file_types = file_types
 
         self.show_share_button = (
             (utils.get_space() is not None)
@@ -163,34 +170,49 @@ def __init__(
     def preprocess(
         self, payload: GalleryData | None
     ) -> (
-        List[tuple[str, str | None]]
-        | List[tuple[PIL.Image.Image, str | None]]
-        | List[tuple[np.ndarray, str | None]]
+        list[tuple[str, str | None]]
+        | list[tuple[PIL.Image.Image, str | None]]
+        | list[tuple[np.ndarray, str | None]]
         | None
     ):
         """
         Parameters:
-            payload: a list of images, or list of (image, caption) tuples
+            payload: a list of images or videos, or list of (media, caption) tuples
         Returns:
-            Passes the list of images as a list of (image, caption) tuples, or a list of (image, None) tuples if no captions are provided (which is usually the case). The image can be a `str` file path, a `numpy` array, or a `PIL.Image` object depending on `type`.
+            Passes the list of images or videos as a list of (media, caption) tuples, or a list of (media, None) tuples if no captions are provided (which is usually the case). Images can be a `str` file path, a `numpy` array, or a `PIL.Image` object depending on `type`.  Videos are always `str` file path.
         """
         if payload is None or not payload.root:
             return None
         data = []
         for gallery_element in payload.root:
-            image = self.convert_to_type(gallery_element.image.path, self.type)  # type: ignore
-            data.append((image, gallery_element.caption))
+            if isinstance(gallery_element, GalleryVideo):
+                file_path = gallery_element.video.path
+            else:
+                file_path = gallery_element.image.path
+            if self.file_types and not client_utils.is_valid_file(
+                file_path, self.file_types
+            ):
+                raise Error(
+                    f"Invalid file type. Please upload a file that is one of these formats: {self.file_types}"
+                )
+            else:
+                media = (
+                    gallery_element.video.path
+                    if (type(gallery_element) is GalleryVideo)
+                    else self.convert_to_type(gallery_element.image.path, self.type)  # type: ignore
+                )
+                data.append((media, gallery_element.caption))
         return data
 
     def postprocess(
         self,
-        value: list[GalleryImageType | CaptionedGalleryImageType] | None,
+        value: list[GalleryMediaType | CaptionedGalleryMediaType] | None,
     ) -> GalleryData:
         """
         Parameters:
-            value: Expects the function to return a `list` of images, or `list` of (image, `str` caption) tuples. Each image can be a `str` file path, a `numpy` array, or a `PIL.Image` object.
+            value: Expects the function to return a `list` of images or videos, or `list` of (media, `str` caption) tuples. Each image can be a `str` file path, a `numpy` array, or a `PIL.Image` object. Each video can be a `str` file path.
         Returns:
-            a list of images, or list of (image, caption) tuples
+            a list of images or videos, or list of (media, caption) tuples
         """
         if value is None:
             return GalleryData(root=[])
@@ -200,6 +222,7 @@ def _save(img):
             url = None
             caption = None
             orig_name = None
+            mime_type = None
             if isinstance(img, (tuple, list)):
                 img, caption = img
             if isinstance(img, np.ndarray):
@@ -214,6 +237,7 @@ def _save(img):
                 file_path = str(utils.abspath(file))
             elif isinstance(img, str):
                 file_path = img
+                mime_type = client_utils.get_mimetype(file_path)
                 if is_http_url_like(img):
                     url = img
                     orig_name = Path(urlparse(img).path).name
@@ -223,12 +247,29 @@ def _save(img):
             elif isinstance(img, Path):
                 file_path = str(img)
                 orig_name = img.name
+                mime_type = client_utils.get_mimetype(file_path)
             else:
                 raise ValueError(f"Cannot process type as image: {type(img)}")
-            return GalleryImage(
-                image=FileData(path=file_path, url=url, orig_name=orig_name),
-                caption=caption,
-            )
+            if mime_type is not None and "video" in mime_type:
+                return GalleryVideo(
+                    video=FileData(
+                        path=file_path,
+                        url=url,
+                        orig_name=orig_name,
+                        mime_type=mime_type,
+                    ),
+                    caption=caption,
+                )
+            else:
+                return GalleryImage(
+                    image=FileData(
+                        path=file_path,
+                        url=url,
+                        orig_name=orig_name,
+                        mime_type=mime_type,
+                    ),
+                    caption=caption,
+                )
 
         if wasm_utils.IS_WASM:
             for img in value:
diff --git a/gradio/components/highlighted_text.py b/gradio/components/highlighted_text.py
index 58a2486eec858..8fa7a86b73ccc 100644
--- a/gradio/components/highlighted_text.py
+++ b/gradio/components/highlighted_text.py
@@ -2,7 +2,8 @@
 
 from __future__ import annotations
 
-from typing import TYPE_CHECKING, Any, Callable, List, Sequence, Union
+from collections.abc import Callable, Sequence
+from typing import TYPE_CHECKING, Any, Union
 
 from gradio_client.documentation import document
 
@@ -20,7 +21,7 @@ class HighlightedToken(GradioModel):
 
 
 class HighlightedTextData(GradioRootModel):
-    root: List[HighlightedToken]
+    root: list[HighlightedToken]
 
 
 @document()
@@ -67,7 +68,7 @@ def __init__(
             show_inline_category: If False, will not display span category label. Only applies if show_legend=False and interactive=False.
             combine_adjacent: If True, will merge the labels of adjacent tokens belonging to the same category.
             adjacent_separator: Specifies the separator to be used between tokens if combine_adjacent is True.
-            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            label: the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
             show_label: if True, will display label.
diff --git a/gradio/components/html.py b/gradio/components/html.py
index e3fd3c17cb6a1..94cc3f6e0f637 100644
--- a/gradio/components/html.py
+++ b/gradio/components/html.py
@@ -2,7 +2,8 @@
 
 from __future__ import annotations
 
-from typing import TYPE_CHECKING, Any, Callable, Sequence
+from collections.abc import Callable, Sequence
+from typing import TYPE_CHECKING, Any
 
 from gradio_client.documentation import document
 
@@ -37,11 +38,13 @@ def __init__(
         elem_classes: list[str] | str | None = None,
         render: bool = True,
         key: int | str | None = None,
+        min_height: int | None = None,
+        max_height: int | None = None,
     ):
         """
         Parameters:
             value: Default value. If callable, the function will be called whenever the app loads to set the initial value of the component.
-            label: The label for this component. Is used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            label: the label for this component. Is used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
             show_label: If True, the label will be displayed. If False, the label will be hidden.
@@ -50,7 +53,11 @@ def __init__(
             elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
             render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
             key: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
+            min_height: The minimum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If HTML content exceeds the height, the component will expand to fit the content.
+            max_height: The maximum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If content exceeds the height, the component will scroll.
         """
+        self.min_height = min_height
+        self.max_height = max_height
         super().__init__(
             label=label,
             every=every,
diff --git a/gradio/components/image.py b/gradio/components/image.py
index 455818c7e545c..a5fa53cd1eca4 100644
--- a/gradio/components/image.py
+++ b/gradio/components/image.py
@@ -3,19 +3,22 @@
 from __future__ import annotations
 
 import warnings
+from collections.abc import Callable, Sequence
 from pathlib import Path
-from typing import TYPE_CHECKING, Any, Callable, Literal, Sequence, cast
+from typing import TYPE_CHECKING, Any, Literal, Optional, cast
 
 import numpy as np
 import PIL.Image
 from gradio_client import handle_file
 from gradio_client.documentation import document
 from PIL import ImageOps
+from pydantic import ConfigDict, Field
 
 from gradio import image_utils, utils
 from gradio.components.base import Component, StreamingInput
-from gradio.data_classes import FileData
+from gradio.data_classes import GradioModel
 from gradio.events import Events
+from gradio.exceptions import Error
 
 if TYPE_CHECKING:
     from gradio.components import Timer
@@ -23,6 +26,28 @@
 PIL.Image.init()  # fixes https://github.com/gradio-app/gradio/issues/2843
 
 
+class ImageData(GradioModel):
+    path: Optional[str] = Field(default=None, description="Path to a local file")
+    url: Optional[str] = Field(
+        default=None, description="Publicly available url or base64 encoded image"
+    )
+    size: Optional[int] = Field(default=None, description="Size of image in bytes")
+    orig_name: Optional[str] = Field(default=None, description="Original filename")
+    mime_type: Optional[str] = Field(default=None, description="mime type of image")
+    is_stream: bool = Field(default=False, description="Can always be set to False")
+    meta: dict = {"_type": "gradio.FileData"}
+
+    model_config = ConfigDict(
+        json_schema_extra={
+            "description": "For input, either path or url must be provided. For output, path is always provided."
+        }
+    )
+
+
+class Base64ImageData(GradioModel):
+    url: str = Field(description="base64 encoded image")
+
+
 @document()
 class Image(StreamingInput, Component):
     """
@@ -41,7 +66,7 @@ class Image(StreamingInput, Component):
         Events.input,
     ]
 
-    data_model = FileData
+    data_model = ImageData
 
     def __init__(
         self,
@@ -81,13 +106,13 @@ def __init__(
         """
         Parameters:
             value: A PIL Image, numpy array, path or URL for the default value that Image component is going to take. If callable, the function will be called whenever the app loads to set the initial value of the component.
-            format: File format (e.g. "png" or "gif") to save image if it does not already have a valid format (e.g. if the image is being returned to the frontend as a numpy array or PIL Image).  The format should be supported by the PIL library. This parameter has no effect on SVG files.
-            height: The height of the displayed image, specified in pixels if a number is passed, or in CSS units if a string is passed.
-            width: The width of the displayed image, specified in pixels if a number is passed, or in CSS units if a string is passed.
-            image_mode: "RGB" if color, or "L" if black and white. See https://pillow.readthedocs.io/en/stable/handbook/concepts.html for other supported image modes and their meaning. This parameter has no effect on SVG or GIF files. If set to None, the image_mode will be inferred from the image file.
+            format: File format (e.g. "png" or "gif"). Used to save image if it does not already have a valid format (e.g. if the image is being returned to the frontend as a numpy array or PIL Image). The format should be supported by the PIL library. Applies both when this component is used as an input or output. This parameter has no effect on SVG files.
+            height: The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image file or numpy array, but will affect the displayed image.
+            width: The width of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image file or numpy array, but will affect the displayed image.
+            image_mode: The pixel format and color depth that the image should be loaded and preprocessed as. "RGB" will load the image as a color image, or "L" as black-and-white. See https://pillow.readthedocs.io/en/stable/handbook/concepts.html for other supported image modes and their meaning. This parameter has no effect on SVG or GIF files. If set to None, the image_mode will be inferred from the image file type (e.g. "RGBA" for a .png image, "RGB" in most other cases).
             sources: List of sources for the image. "upload" creates a box where user can drop an image file, "webcam" allows user to take snapshot from their webcam, "clipboard" allows users to paste an image from the clipboard. If None, defaults to ["upload", "webcam", "clipboard"] if streaming is False, otherwise defaults to ["webcam"].
             type: The format the image is converted before being passed into the prediction function. "numpy" converts the image to a numpy array with shape (height, width, 3) and values from 0 to 255, "pil" converts the image to a PIL image object, "filepath" passes a str path to a temporary file containing the image. If the image is SVG, the `type` is ignored and the filepath of the SVG is returned. To support animated GIFs in input, the `type` should be set to "filepath" or "pil".
-            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            label: the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
             show_label: if True, will display label.
@@ -97,7 +122,7 @@ def __init__(
             min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
             interactive: if True, will allow users to upload and edit an image; if False, can only be used to display images. If not provided, this is inferred based on whether the component is used as an input or output.
             visible: If False, component will be hidden.
-            streaming: If True when used in a `live` interface, will automatically stream webcam feed. Only valid is source is 'webcam'.
+            streaming: If True when used in a `live` interface, will automatically stream webcam feed. Only valid is source is 'webcam'. If the component is an output component, will automatically convert images to base64.
             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.
             elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
             render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
@@ -163,7 +188,7 @@ def __init__(
         )
 
     def preprocess(
-        self, payload: FileData | None
+        self, payload: ImageData | None
     ) -> np.ndarray | PIL.Image.Image | str | None:
         """
         Parameters:
@@ -173,6 +198,17 @@ def preprocess(
         """
         if payload is None:
             return payload
+        if payload.url and payload.url.startswith("data:"):
+            if self.type == "pil":
+                return image_utils.decode_base64_to_image(payload.url)
+            elif self.type == "numpy":
+                return image_utils.decode_base64_to_image_array(payload.url)
+            elif self.type == "filepath":
+                return image_utils.decode_base64_to_file(
+                    payload.url, self.GRADIO_CACHE, self.format
+                )
+        if payload.path is None:
+            raise ValueError("Image path is None.")
         file_path = Path(payload.path)
         if payload.orig_name:
             p = Path(payload.orig_name)
@@ -185,9 +221,14 @@ def preprocess(
             suffix = "webp"
 
         if suffix.lower() == "svg":
-            return str(file_path)
+            if self.type == "filepath":
+                return str(file_path)
+            raise Error("SVG files are not supported as input images.")
 
         im = PIL.Image.open(file_path)
+        if self.type == "filepath" and (self.image_mode in [None, im.mode]):
+            return str(file_path)
+
         exif = im.getexif()
         # 274 is the code for image rotation and 1 means "correct orientation"
         if exif.get(274, 1) != 1 and hasattr(ImageOps, "exif_transpose"):
@@ -212,7 +253,7 @@ def preprocess(
 
     def postprocess(
         self, value: np.ndarray | PIL.Image.Image | str | Path | None
-    ) -> FileData | None:
+    ) -> ImageData | Base64ImageData | None:
         """
         Parameters:
             value: Expects a `numpy.array`, `PIL.Image`, or `str` or `pathlib.Path` filepath to an image which is displayed.
@@ -222,10 +263,29 @@ def postprocess(
         if value is None:
             return None
         if isinstance(value, str) and value.lower().endswith(".svg"):
-            return FileData(path=value, orig_name=Path(value).name)
+            return ImageData(path=value, orig_name=Path(value).name)
+        if self.streaming:
+            if isinstance(value, np.ndarray):
+                return Base64ImageData(
+                    url=image_utils.encode_image_array_to_base64(value)
+                )
+            elif isinstance(value, PIL.Image.Image):
+                return Base64ImageData(url=image_utils.encode_image_to_base64(value))
+            elif isinstance(value, (Path, str)):
+                return Base64ImageData(
+                    url=image_utils.encode_image_file_to_base64(value)
+                )
+
         saved = image_utils.save_image(value, self.GRADIO_CACHE, self.format)
         orig_name = Path(saved).name if Path(saved).exists() else None
-        return FileData(path=saved, orig_name=orig_name)
+        return ImageData(path=saved, orig_name=orig_name)
+
+    def api_info_as_output(self) -> dict[str, Any]:
+        if self.streaming == "base64":
+            schema = Base64ImageData.model_json_schema()
+            schema.pop("description", None)
+            return schema
+        return self.api_info()
 
     def check_streamable(self):
         if self.streaming and self.sources != ["webcam"]:
diff --git a/gradio/components/image_editor.py b/gradio/components/image_editor.py
index 67487dc250813..5b286b5840666 100644
--- a/gradio/components/image_editor.py
+++ b/gradio/components/image_editor.py
@@ -4,17 +4,14 @@
 
 import dataclasses
 import warnings
+from collections.abc import Iterable, Sequence
 from io import BytesIO
 from pathlib import Path
 from typing import (
     TYPE_CHECKING,
     Any,
-    Iterable,
-    List,
     Literal,
     Optional,
-    Sequence,
-    Tuple,
     Union,
     cast,
 )
@@ -50,14 +47,14 @@ class EditorExampleValue(TypedDict):
 
 class EditorData(GradioModel):
     background: Optional[FileData] = None
-    layers: List[FileData] = []
+    layers: list[FileData] = []
     composite: Optional[FileData] = None
     id: Optional[str] = None
 
 
 class EditorDataBlobs(GradioModel):
     background: Optional[bytes]
-    layers: List[Union[bytes, None]]
+    layers: list[Union[bytes, None]]
     composite: Optional[bytes]
 
 
@@ -70,7 +67,7 @@ class BlobData(TypedDict):
 
 class AcceptBlobs(GradioModel):
     data: BlobData
-    files: List[Tuple[str, bytes]]
+    files: list[tuple[str, bytes]]
 
 
 @document()
@@ -187,12 +184,12 @@ def __init__(
         """
         Parameters:
             value: Optional initial image(s) to populate the image editor. Should be a dictionary with keys: `background`, `layers`, and `composite`. The values corresponding to `background` and `composite` should be images or None, while `layers` should be a list of images. Images can be of type PIL.Image, np.array, or str filepath/URL. Or, the value can be a callable, in which case the function will be called whenever the app loads to set the initial value of the component.
-            height: The height of the component container, specified in pixels if a number is passed, or in CSS units if a string is passed.
-            width: The width of the component container, specified in pixels if a number is passed, or in CSS units if a string is passed.
+            height: The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image files or numpy arrays, but will affect the displayed images.
+            width: The width of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed image files or numpy arrays, but will affect the displayed images.
             image_mode: "RGB" if color, or "L" if black and white. See https://pillow.readthedocs.io/en/stable/handbook/concepts.html for other supported image modes and their meaning.
             sources: List of sources that can be used to set the background image. "upload" creates a box where user can drop an image file, "webcam" allows user to take snapshot from their webcam, "clipboard" allows users to paste an image from the clipboard.
             type: The format the images are converted to before being passed into the prediction function. "numpy" converts the images to numpy arrays with shape (height, width, 3) and values from 0 to 255, "pil" converts the images to PIL image objects, "filepath" passes images as str filepaths to temporary copies of the images.
-            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            label: the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
             show_label: if True, will display label.
diff --git a/gradio/components/json_component.py b/gradio/components/json_component.py
index 5f57f89d718d4..285cbfeba806f 100644
--- a/gradio/components/json_component.py
+++ b/gradio/components/json_component.py
@@ -3,11 +3,10 @@
 from __future__ import annotations
 
 import json
+from collections.abc import Callable, Sequence
 from typing import (
     TYPE_CHECKING,
     Any,
-    Callable,
-    Sequence,
 )
 
 import orjson
@@ -50,11 +49,13 @@ def __init__(
         open: bool = False,
         show_indices: bool = False,
         height: int | str | None = None,
+        max_height: int | str | None = 500,
+        min_height: int | str | None = None,
     ):
         """
         Parameters:
             value: Default value as a valid JSON `str` -- or a `list` or `dict` that can be serialized to a JSON string. If callable, the function will be called whenever the app loads to set the initial value of the component.
-            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            label: the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
             show_label: if True, will display label.
@@ -89,6 +90,8 @@ def __init__(
         self.show_indices = show_indices
         self.open = open
         self.height = height
+        self.max_height = max_height
+        self.min_height = min_height
 
     def preprocess(self, payload: dict | list | None) -> dict | list | None:
         """
diff --git a/gradio/components/label.py b/gradio/components/label.py
index fd623111d8be8..35e80d389f067 100644
--- a/gradio/components/label.py
+++ b/gradio/components/label.py
@@ -4,8 +4,9 @@
 
 import json
 import operator
+from collections.abc import Callable, Sequence
 from pathlib import Path
-from typing import TYPE_CHECKING, Any, Callable, List, Optional, Sequence, Union
+from typing import TYPE_CHECKING, Any, Optional, Union
 
 from gradio_client.documentation import document
 
@@ -24,7 +25,7 @@ class LabelConfidence(GradioModel):
 
 class LabelData(GradioModel):
     label: Optional[Union[str, int, float]] = None
-    confidences: Optional[List[LabelConfidence]] = None
+    confidences: Optional[list[LabelConfidence]] = None
 
 
 @document()
@@ -63,7 +64,7 @@ def __init__(
         Parameters:
             value: Default value to show in the component. If a str or number is provided, simply displays the string or number. If a {Dict[str, float]} of classes and confidences is provided, displays the top class on top and the `num_top_classes` below, along with their confidence bars. If callable, the function will be called whenever the app loads to set the initial value of the component.
             num_top_classes: number of most confident classes to show.
-            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            label: the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
             show_label: if True, will display label.
diff --git a/gradio/components/line_plot.py b/gradio/components/line_plot.py
index ebddcc278ca61..c80b88598970c 100644
--- a/gradio/components/line_plot.py
+++ b/gradio/components/line_plot.py
@@ -3,7 +3,8 @@
 from __future__ import annotations
 
 import warnings
-from typing import TYPE_CHECKING, Any, Callable, Literal, Sequence
+from collections.abc import Callable, Sequence
+from typing import TYPE_CHECKING, Any, Literal
 
 from gradio_client.documentation import document
 
diff --git a/gradio/components/login_button.py b/gradio/components/login_button.py
index e84b2661e0c8d..ca34d2ec34a57 100644
--- a/gradio/components/login_button.py
+++ b/gradio/components/login_button.py
@@ -5,7 +5,8 @@
 import json
 import time
 import warnings
-from typing import TYPE_CHECKING, Literal, Sequence
+from collections.abc import Sequence
+from typing import TYPE_CHECKING, Literal
 
 from gradio_client.documentation import document
 
@@ -32,7 +33,7 @@ def __init__(
         *,
         every: Timer | float | None = None,
         inputs: Component | Sequence[Component] | set[Component] | None = None,
-        variant: Literal["primary", "secondary", "stop"] = "secondary",
+        variant: Literal["primary", "secondary", "stop", "huggingface"] = "huggingface",
         size: Literal["sm", "lg"] | None = None,
         icon: str
         | None = "https://huggingface.co/front/assets/huggingface_logo-noborder.svg",
@@ -43,18 +44,13 @@ def __init__(
         elem_classes: list[str] | str | None = None,
         render: bool = True,
         key: int | str | None = None,
-        scale: int | None = 0,
+        scale: int | None = None,
         min_width: int | None = None,
-        signed_in_value: str = "Signed in as {}",
     ):
         """
         Parameters:
             logout_value: The text to display when the user is signed in. The string should contain a placeholder for the username with a call-to-action to logout, e.g. "Logout ({})".
         """
-        if signed_in_value != "Signed in as {}":
-            warnings.warn(
-                "The `signed_in_value` parameter is deprecated. Please use `logout_value` instead."
-            )
         self.logout_value = logout_value
         super().__init__(
             value,
diff --git a/gradio/components/logout_button.py b/gradio/components/logout_button.py
index 9cee4098eaa44..2a1e44412ee6d 100644
--- a/gradio/components/logout_button.py
+++ b/gradio/components/logout_button.py
@@ -3,7 +3,8 @@
 from __future__ import annotations
 
 import warnings
-from typing import TYPE_CHECKING, Literal, Sequence
+from collections.abc import Sequence
+from typing import TYPE_CHECKING, Literal
 
 from gradio_client.documentation import document
 
@@ -35,7 +36,7 @@ def __init__(
         icon: str
         | None = "https://huggingface.co/front/assets/huggingface_logo-noborder.svg",
         # Link to logout page (which will delete the session cookie and redirect to landing page).
-        link: str | None = "/logout",
+        link: str | None = "/gradio_api/logout",
         visible: bool = True,
         interactive: bool = True,
         elem_id: str | None = None,
diff --git a/gradio/components/markdown.py b/gradio/components/markdown.py
index 265d65d68bd17..1599ab003b6d9 100644
--- a/gradio/components/markdown.py
+++ b/gradio/components/markdown.py
@@ -3,7 +3,8 @@
 from __future__ import annotations
 
 import inspect
-from typing import TYPE_CHECKING, Any, Callable, Sequence
+from collections.abc import Callable, Sequence
+from typing import TYPE_CHECKING, Any
 
 from gradio_client.documentation import document
 
@@ -45,12 +46,15 @@ def __init__(
         line_breaks: bool = False,
         header_links: bool = False,
         height: int | str | None = None,
+        max_height: int | str | None = None,
+        min_height: int | str | None = None,
         show_copy_button: bool = False,
+        container: bool = False,
     ):
         """
         Parameters:
             value: Value to show in Markdown component. If callable, the function will be called whenever the app loads to set the initial value of the component.
-            label: The label for this component. Is used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            label: the label for this component. Is used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
             show_label: This parameter has no effect.
@@ -64,8 +68,11 @@ def __init__(
             sanitize_html: If False, will disable HTML sanitization when converted from markdown. This is not recommended, as it can lead to security vulnerabilities.
             line_breaks: If True, will enable Github-flavored Markdown line breaks in chatbot messages. If False (default), single new lines will be ignored.
             header_links: If True, will automatically create anchors for headings, displaying a link icon on hover.
-            height: An optional maximum height of this component, specified in pixels if a number is passed, or in CSS units (e.g., '200px') if a stirng is passed in. If context exceeds this height, a scrollbar is added.
+            height: The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If markdown content exceeds the height, the component will scroll.
+            max_height: The maximum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If markdown content exceeds the height, the component will scroll. If markdown content is shorter than the height, the component will shrink to fit the content. Will not have any effect if `height` is set and is smaller than `max_height`.
+            min_height: The minimum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If markdown content exceeds the height, the component will expand to fit the content. Will not have any effect if `height` is set and is larger than `min_height`.
             show_copy_button: If True, includes a copy button to copy the text in the Markdown component. Default is False.
+            container: If True, the Markdown component will be displayed in a container. Default is False.
         """
         self.rtl = rtl
         if latex_delimiters is None:
@@ -75,6 +82,8 @@ def __init__(
         self.line_breaks = line_breaks
         self.header_links = header_links
         self.height = height
+        self.max_height = max_height
+        self.min_height = min_height
         self.show_copy_button = show_copy_button
 
         super().__init__(
@@ -88,6 +97,7 @@ def __init__(
             render=render,
             key=key,
             value=value,
+            container=container,
         )
 
     def preprocess(self, payload: str | None) -> str | None:
diff --git a/gradio/components/model3d.py b/gradio/components/model3d.py
index f421b8a9ec615..8bb6010ad0666 100644
--- a/gradio/components/model3d.py
+++ b/gradio/components/model3d.py
@@ -2,8 +2,9 @@
 
 from __future__ import annotations
 
+from collections.abc import Callable, Sequence
 from pathlib import Path
-from typing import TYPE_CHECKING, Callable, Literal, Sequence
+from typing import TYPE_CHECKING, Literal
 
 from gradio_client import handle_file
 from gradio_client.documentation import document
@@ -68,7 +69,7 @@ def __init__(
             pan_speed: the speed of panning the scene when the cursor is dragged or when the screen is dragged on a mobile device. Should be a positive float, increase this value to make panning faster, decrease to make it slower. Affects the panSensibility property of the camera.
             height: The height of the model3D component, specified in pixels if a number is passed, or in CSS units if a string is passed.
             interactive: if True, will allow users to upload a file; if False, can only be used to display files. If not provided, this is inferred based on whether the component is used as an input or output.
-            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            label: the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
             show_label: if True, will display label.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
diff --git a/gradio/components/multimodal_textbox.py b/gradio/components/multimodal_textbox.py
index d91051a4c4809..037eee6346f83 100644
--- a/gradio/components/multimodal_textbox.py
+++ b/gradio/components/multimodal_textbox.py
@@ -2,8 +2,9 @@
 
 from __future__ import annotations
 
+from collections.abc import Callable, Sequence
 from pathlib import Path
-from typing import TYPE_CHECKING, Any, Callable, List, Literal, Sequence, TypedDict
+from typing import TYPE_CHECKING, Any, Literal, TypedDict, cast
 
 import gradio_client.utils as client_utils
 from gradio_client.documentation import document
@@ -13,6 +14,7 @@
 from gradio.components.base import Component, FormComponent
 from gradio.data_classes import FileData, GradioModel
 from gradio.events import Events
+from gradio.exceptions import Error
 
 if TYPE_CHECKING:
     from gradio.components import Timer
@@ -20,12 +22,12 @@
 
 class MultimodalData(GradioModel):
     text: str
-    files: List[FileData] = Field(default_factory=list)
+    files: list[FileData] = Field(default_factory=list)
 
 
 class MultimodalPostprocess(TypedDict):
     text: str
-    files: List[FileData]
+    files: NotRequired[list[FileData]]
 
 
 class MultimodalValue(TypedDict):
@@ -51,11 +53,12 @@ class MultimodalTextbox(FormComponent):
         Events.submit,
         Events.focus,
         Events.blur,
+        Events.stop,
     ]
 
     def __init__(
         self,
-        value: dict[str, str | list] | Callable | None = None,
+        value: str | dict[str, str | list] | Callable | None = None,
         *,
         file_types: list[str] | None = None,
         file_count: Literal["single", "multiple", "directory"] = "single",
@@ -81,17 +84,18 @@ def __init__(
         text_align: Literal["left", "right"] | None = None,
         rtl: bool = False,
         submit_btn: str | bool | None = True,
+        stop_btn: str | bool | None = False,
     ):
         """
         Parameters:
-            value: Default value to show in MultimodalTextbox. A dictionary of the form {"text": "sample text", "files": [{path: "files/file.jpg", orig_name: "file.jpg", url: "http://image_url.jpg", size: 100}]}. If callable, the function will be called whenever the app loads to set the initial value of the component.
+            value: Default value to show in MultimodalTextbox. A string value, or a dictionary of the form {"text": "sample text", "files": [{path: "files/file.jpg", orig_name: "file.jpg", url: "http://image_url.jpg", size: 100}]}. If callable, the function will be called whenever the app loads to set the initial value of the component.
             file_count: if single, allows user to upload one file. If "multiple", user uploads multiple files. If "directory", user uploads all files in selected directory. Return type will be list for each file in case of "multiple" or "directory".
             file_types: List of file extensions or types of files to be uploaded (e.g. ['image', '.json', '.mp4']). "file" allows any file to be uploaded, "image" allows only image files to be uploaded, "audio" allows only audio files to be uploaded, "video" allows only video files to be uploaded, "text" allows only text files to be uploaded.
             lines: minimum number of line rows to provide in textarea.
             max_lines: maximum number of line rows to provide in textarea.
             placeholder: placeholder hint to provide behind textarea.
-            label: The label for this component. Appears above the component and is also used as the header if there is a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
-            info: additional component description.
+            label: the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to.
+            info: additional component description, appears below the label in smaller font. Supports markdown / HTML syntax.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
             show_label: if True, will display label.
@@ -109,6 +113,7 @@ def __init__(
             rtl: If True and `type` is "text", sets the direction of the text to right-to-left (cursor appears on the left of the text). Default is False, which renders cursor on the right.
             autoscroll: If True, will automatically scroll to the bottom of the textbox when the value changes, unless the user scrolls up. If False, will not scroll to the bottom of the textbox when the value changes.
             submit_btn: If False, will not show a submit button. If a string, will use that string as the submit button text.
+            stop_btn: If True, will show a stop button (useful for streaming demos). If a string, will use that string as the stop button text.
         """
         self.file_types = file_types
         self.file_count = file_count
@@ -122,6 +127,7 @@ def __init__(
         self.max_lines = max(lines, max_lines)
         self.placeholder = placeholder
         self.submit_btn = submit_btn
+        self.stop_btn = stop_btn
         self.autofocus = autofocus
         self.autoscroll = autoscroll
 
@@ -154,12 +160,18 @@ def preprocess(self, payload: MultimodalData | None) -> MultimodalValue | None:
         """
         if payload is None:
             return None
+        if self.file_types is not None:
+            for f in payload.files:
+                if not client_utils.is_valid_file(f.path, self.file_types):
+                    raise Error(
+                        f"Invalid file type: {f.mime_type}. Please upload a file that is one of these formats: {self.file_types}"
+                    )
         return {
             "text": payload.text,
             "files": [f.path for f in payload.files],
         }
 
-    def postprocess(self, value: MultimodalValue | None) -> MultimodalData:
+    def postprocess(self, value: MultimodalValue | str | None) -> MultimodalData:
         """
         Parameters:
             value: Expects a {dict} with "text" and "files", both optional. The files array is a list of file paths or URLs.
@@ -168,15 +180,17 @@ def postprocess(self, value: MultimodalValue | None) -> MultimodalData:
         """
         if value is None:
             return MultimodalData(text="", files=[])
-        if not isinstance(value, dict):
+        if not isinstance(value, (dict, str)):
             raise ValueError(
-                f"MultimodalTextbox expects a dictionary with optional keys 'text' and 'files'. Received {value.__class__.__name__}"
+                f"MultimodalTextbox expects a string or a dictionary with optional keys 'text' and 'files'. Received {value.__class__.__name__}"
             )
+        if isinstance(value, str):
+            return MultimodalData(text=value, files=[])
         text = value.get("text", "")
         if "files" in value and isinstance(value["files"], list):
             files = [
-                file
-                if isinstance(file, FileData)
+                cast(FileData, file)
+                if isinstance(file, FileData | dict)
                 else FileData(
                     path=file,
                     orig_name=Path(file).name,
diff --git a/gradio/components/native_plot.py b/gradio/components/native_plot.py
index 82b8d89791c49..f3da0fffddc60 100644
--- a/gradio/components/native_plot.py
+++ b/gradio/components/native_plot.py
@@ -2,15 +2,11 @@
 
 import json
 import warnings
+from collections.abc import Callable, Sequence, Set
 from typing import (
     TYPE_CHECKING,
-    AbstractSet,
     Any,
-    Callable,
-    Dict,
-    List,
     Literal,
-    Sequence,
 )
 
 import pandas as pd
@@ -25,9 +21,9 @@
 
 
 class PlotData(GradioModel):
-    columns: List[str]
-    data: List[List[Any]]
-    datatypes: Dict[str, Literal["quantitative", "nominal", "temporal"]]
+    columns: list[str]
+    data: list[list[Any]]
+    datatypes: dict[str, Literal["quantitative", "nominal", "temporal"]]
     mark: str
 
 
@@ -59,6 +55,7 @@ def __init__(
         y_lim: list[float] | None = None,
         x_label_angle: float = 0,
         y_label_angle: float = 0,
+        x_axis_labels_visible: bool = True,
         caption: str | None = None,
         sort: Literal["x", "y", "-x", "-y"] | list[str] | None = None,
         height: int | None = None,
@@ -68,7 +65,7 @@ def __init__(
         scale: int | None = None,
         min_width: int = 160,
         every: Timer | float | None = None,
-        inputs: Component | Sequence[Component] | AbstractSet[Component] | None = None,
+        inputs: Component | Sequence[Component] | Set[Component] | None = None,
         visible: bool = True,
         elem_id: str | None = None,
         elem_classes: list[str] | str | None = None,
@@ -94,6 +91,7 @@ def __init__(
             y_lim: A tuple of list containing the limits for the y-axis, specified as [y_min, y_max].
             x_label_angle: The angle of the x-axis labels in degrees offset clockwise.
             y_label_angle: The angle of the y-axis labels in degrees offset clockwise.
+            x_axis_labels_visible: Whether the x-axis labels should be visible. Can be hidden when many x-axis labels are present.
             caption: The (optional) caption to display below the plot.
             sort: The sorting order of the x values, if x column is type string/category. Can be "x", "y", "-x", "-y", or list of strings that represent the order of the categories.
             height: The height of the plot in pixels.
@@ -124,6 +122,7 @@ def __init__(
         self.y_lim = y_lim
         self.x_label_angle = x_label_angle
         self.y_label_angle = y_label_angle
+        self.x_axis_labels_visible = x_axis_labels_visible
         self.caption = caption
         self.sort = sort
         self.height = height
diff --git a/gradio/components/number.py b/gradio/components/number.py
index 05b2e21f2dfff..437af6a31d667 100644
--- a/gradio/components/number.py
+++ b/gradio/components/number.py
@@ -2,7 +2,8 @@
 
 from __future__ import annotations
 
-from typing import TYPE_CHECKING, Any, Callable, Sequence
+from collections.abc import Callable, Sequence
+from typing import TYPE_CHECKING, Any
 
 from gradio_client.documentation import document
 
@@ -50,8 +51,8 @@ def __init__(
         """
         Parameters:
             value: default value. If callable, the function will be called whenever the app loads to set the initial value of the component.
-            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
-            info: additional component description.
+            label: the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to.
+            info: additional component description, appears below the label in smaller font. Supports markdown / HTML syntax.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
             show_label: if True, will display label.
diff --git a/gradio/components/paramviewer.py b/gradio/components/paramviewer.py
index 1d20d81c2c16c..4b244694feec8 100644
--- a/gradio/components/paramviewer.py
+++ b/gradio/components/paramviewer.py
@@ -1,6 +1,7 @@
 from __future__ import annotations
 
-from typing import TYPE_CHECKING, Literal, Mapping, Sequence, TypedDict
+from collections.abc import Mapping, Sequence
+from typing import TYPE_CHECKING, Literal, TypedDict
 
 from gradio_client.documentation import document
 
diff --git a/gradio/components/plot.py b/gradio/components/plot.py
index 166ccac3807a5..2925b409d2518 100644
--- a/gradio/components/plot.py
+++ b/gradio/components/plot.py
@@ -3,8 +3,9 @@
 from __future__ import annotations
 
 import json
+from collections.abc import Sequence
 from types import ModuleType
-from typing import TYPE_CHECKING, Any, Literal, Sequence
+from typing import TYPE_CHECKING, Any, Literal
 
 from gradio_client.documentation import document
 
@@ -64,7 +65,7 @@ def __init__(
         Parameters:
             value: Optionally, supply a default plot object to display, must be a matplotlib, plotly, altair, or bokeh figure, or a callable. If callable, the function will be called whenever the app loads to set the initial value of the component.
             format: File format in which to send matplotlib plots to the front end, such as 'jpg' or 'png'.
-            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            label: the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
             show_label: if True, will display label.
@@ -128,18 +129,16 @@ def postprocess(self, value: Any) -> PlotData | None:
         Returns:
             PlotData: A dataclass containing the plot data as a JSON string, as well as the type of chart and the plotting library.
         """
-        import matplotlib.figure
-
         if value is None:
             return None
         if isinstance(value, PlotData):
             return value
-        if isinstance(value, (ModuleType, matplotlib.figure.Figure)):  # type: ignore
+        if isinstance(value, ModuleType) or "matplotlib" in value.__module__:
             dtype = "matplotlib"
             out_y = processing_utils.encode_plot_to_base64(value, self.format)
         elif "bokeh" in value.__module__:
             dtype = "bokeh"
-            from bokeh.embed import json_item  # type: ignore
+            from bokeh.embed import json_item
 
             out_y = json.dumps(json_item(value))
         else:
diff --git a/gradio/components/radio.py b/gradio/components/radio.py
index e10f2fd3e15de..2b7d490fb7a56 100644
--- a/gradio/components/radio.py
+++ b/gradio/components/radio.py
@@ -2,12 +2,14 @@
 
 from __future__ import annotations
 
-from typing import TYPE_CHECKING, Any, Callable, Literal, Sequence
+from collections.abc import Callable, Sequence
+from typing import TYPE_CHECKING, Any, Literal
 
 from gradio_client.documentation import document
 
 from gradio.components.base import Component, FormComponent
 from gradio.events import Events
+from gradio.exceptions import Error
 
 if TYPE_CHECKING:
     from gradio.components import Timer
@@ -50,8 +52,8 @@ def __init__(
             choices: A list of string or numeric options to select from. An option can also be a tuple of the form (name, value), where name is the displayed name of the radio button and value is the value to be passed to the function, or returned by the function.
             value: The option selected by default. If None, no option is selected by default. If callable, the function will be called whenever the app loads to set the initial value of the component.
             type: Type of value to be returned by component. "value" returns the string of the choice selected, "index" returns the index of the choice selected.
-            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
-            info: Additional component description.
+            label: the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to.
+            info: additional component description, appears below the label in smaller font. Supports markdown / HTML syntax.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
             show_label: if True, will display label.
@@ -109,16 +111,19 @@ def preprocess(self, payload: str | int | float | None) -> str | int | float | N
         Returns:
             Passes the value of the selected radio button as a `str | int | float`, or its index as an `int` into the function, depending on `type`.
         """
+        if payload is None:
+            return None
+
+        choice_values = [value for _, value in self.choices]
+        if payload not in choice_values:
+            raise Error(
+                f"Value: {payload} is not in the list of choices: {choice_values}"
+            )
+
         if self.type == "value":
             return payload
         elif self.type == "index":
-            if payload is None:
-                return None
-            else:
-                choice_values = [value for _, value in self.choices]
-                return (
-                    choice_values.index(payload) if payload in choice_values else None
-                )
+            return choice_values.index(payload)
         else:
             raise ValueError(
                 f"Unknown type: {self.type}. Please choose from: 'value', 'index'."
diff --git a/gradio/components/scatter_plot.py b/gradio/components/scatter_plot.py
index 5351971a26631..0557554864a81 100644
--- a/gradio/components/scatter_plot.py
+++ b/gradio/components/scatter_plot.py
@@ -3,7 +3,8 @@
 from __future__ import annotations
 
 import warnings
-from typing import TYPE_CHECKING, Any, Callable, Literal, Sequence
+from collections.abc import Callable, Sequence
+from typing import TYPE_CHECKING, Any, Literal
 
 from gradio_client.documentation import document
 
diff --git a/gradio/components/slider.py b/gradio/components/slider.py
index 384d3f3239164..748fd041ac69a 100644
--- a/gradio/components/slider.py
+++ b/gradio/components/slider.py
@@ -4,7 +4,8 @@
 
 import math
 import random
-from typing import TYPE_CHECKING, Any, Callable, Sequence
+from collections.abc import Callable, Sequence
+from typing import TYPE_CHECKING, Any
 
 from gradio_client.documentation import document
 
@@ -55,8 +56,8 @@ def __init__(
             maximum: maximum value for slider.
             value: default value. If callable, the function will be called whenever the app loads to set the initial value of the component. Ignored if randomized=True.
             step: increment between slider values.
-            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
-            info: additional component description.
+            label: the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to.
+            info: additional component description, appears below the label in smaller font. Supports markdown / HTML syntax.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
             show_label: if True, will display label.
diff --git a/gradio/components/state.py b/gradio/components/state.py
index 305ce37ec781e..61a8fcddb9ffa 100644
--- a/gradio/components/state.py
+++ b/gradio/components/state.py
@@ -3,8 +3,9 @@
 from __future__ import annotations
 
 import math
+from collections.abc import Callable
 from copy import deepcopy
-from typing import Any, Callable
+from typing import Any
 
 from gradio_client.documentation import document
 
@@ -17,8 +18,7 @@ class State(Component):
     EVENTS = [Events.change]
     """
     Special hidden component that stores session state across runs of the demo by the
-    same user. The value of the State variable is cleared when the user refreshes the page.
-    The state state is stored on the server for 60 minutes after the user closes the tab.
+    same user. Can attach .change listeners that trigger when the state changes.
     Demos: interface_state, blocks_simple_squares, state_cleanup
     Guides: real-time-speech-recognition
     """
diff --git a/gradio/components/textbox.py b/gradio/components/textbox.py
index 628970412b94a..6bfede9d554b8 100644
--- a/gradio/components/textbox.py
+++ b/gradio/components/textbox.py
@@ -2,7 +2,8 @@
 
 from __future__ import annotations
 
-from typing import TYPE_CHECKING, Any, Callable, Literal, Sequence
+from collections.abc import Callable, Sequence
+from typing import TYPE_CHECKING, Any, Literal
 
 from gradio_client.documentation import document
 
@@ -29,6 +30,7 @@ class Textbox(FormComponent):
         Events.submit,
         Events.focus,
         Events.blur,
+        Events.stop,
     ]
 
     def __init__(
@@ -59,6 +61,8 @@ def __init__(
         rtl: bool = False,
         show_copy_button: bool = False,
         max_length: int | None = None,
+        submit_btn: str | bool | None = False,
+        stop_btn: str | bool | None = False,
     ):
         """
         Parameters:
@@ -66,8 +70,8 @@ def __init__(
             lines: minimum number of line rows to provide in textarea.
             max_lines: maximum number of line rows to provide in textarea.
             placeholder: placeholder hint to provide behind textarea.
-            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
-            info: additional component description.
+            label: the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to.
+            info: additional component description, appears below the label in smaller font. Supports markdown / HTML syntax.
             every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
             inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
             show_label: if True, will display label. If False, the copy button is hidden as well as well as the label.
@@ -87,6 +91,7 @@ def __init__(
             show_copy_button: If True, includes a copy button to copy the text in the textbox. Only applies if show_label is True.
             autoscroll: If True, will automatically scroll to the bottom of the textbox when the value changes, unless the user scrolls up. If False, will not scroll to the bottom of the textbox when the value changes.
             max_length: maximum number of characters (including newlines) allowed in the textbox. If None, there is no maximum length.
+            submit_btn: If False, will not show a submit button. If True, will show a submit button with an icon. If a string, will use that string as the submit button text. When the submit button is shown, the border of the textbox will be removed, which is useful for creating a chat interface.
         """
         if type not in ["text", "password", "email"]:
             raise ValueError('`type` must be one of "text", "password", or "email".')
@@ -98,8 +103,11 @@ def __init__(
             self.max_lines = 1
         self.placeholder = placeholder
         self.show_copy_button = show_copy_button
+        self.submit_btn = submit_btn
+        self.stop_btn = stop_btn
         self.autofocus = autofocus
         self.autoscroll = autoscroll
+
         super().__init__(
             label=label,
             info=info,
diff --git a/gradio/components/upload_button.py b/gradio/components/upload_button.py
index a75cf757e70b6..5a1fad11c2289 100644
--- a/gradio/components/upload_button.py
+++ b/gradio/components/upload_button.py
@@ -4,8 +4,9 @@
 
 import tempfile
 import warnings
+from collections.abc import Callable, Sequence
 from pathlib import Path
-from typing import TYPE_CHECKING, Any, Callable, Literal, Sequence
+from typing import TYPE_CHECKING, Any, Literal
 
 import gradio_client.utils as client_utils
 from gradio_client import handle_file
@@ -15,6 +16,7 @@
 from gradio.components.base import Component
 from gradio.data_classes import FileData, ListFiles
 from gradio.events import Events
+from gradio.exceptions import Error
 from gradio.utils import NamedString
 
 if TYPE_CHECKING:
@@ -145,6 +147,12 @@ def example_value(self) -> Any:
     def _process_single_file(self, f: FileData) -> bytes | NamedString:
         file_name = f.path
         if self.type == "filepath":
+            if self.file_types and not client_utils.is_valid_file(
+                file_name, self.file_types
+            ):
+                raise Error(
+                    f"Invalid file type. Please upload a file that is one of these formats: {self.file_types}"
+                )
             file = tempfile.NamedTemporaryFile(delete=False, dir=self.GRADIO_CACHE)
             file.name = file_name
             return NamedString(file_name)
@@ -169,7 +177,6 @@ def preprocess(
         """
         if payload is None:
             return None
-
         if self.file_count == "single":
             if isinstance(payload, ListFiles):
                 return self._process_single_file(payload[0])
diff --git a/gradio/components/video.py b/gradio/components/video.py
index 7e03a7440c1d5..0a2c90c4fdcdc 100644
--- a/gradio/components/video.py
+++ b/gradio/components/video.py
@@ -2,10 +2,14 @@
 
 from __future__ import annotations
 
+import asyncio
+import json
+import subprocess
 import tempfile
 import warnings
+from collections.abc import Callable, Sequence
 from pathlib import Path
-from typing import TYPE_CHECKING, Any, Callable, Literal, Optional, Sequence
+from typing import TYPE_CHECKING, Any, Literal, Optional
 
 from gradio_client import handle_file
 from gradio_client import utils as client_utils
@@ -13,13 +17,14 @@
 
 import gradio as gr
 from gradio import processing_utils, utils, wasm_utils
-from gradio.components.base import Component
-from gradio.data_classes import FileData, GradioModel
+from gradio.components.base import Component, StreamingOutput
+from gradio.data_classes import FileData, GradioModel, MediaStreamChunk
 from gradio.events import Events
 
 if TYPE_CHECKING:
     from gradio.components import Timer
 
+
 if not wasm_utils.IS_WASM:
     # TODO: Support ffmpeg on Wasm
     from ffmpy import FFmpeg
@@ -31,7 +36,7 @@ class VideoData(GradioModel):
 
 
 @document()
-class Video(Component):
+class Video(StreamingOutput, Component):
     """
     Creates a video component that can be used to upload/record videos (as an input) or display videos (as an output).
     For the video to be playable in the browser it must have a compatible container and codec combination. Allowed
@@ -91,44 +96,46 @@ def __init__(
         min_length: int | None = None,
         max_length: int | None = None,
         loop: bool = False,
+        streaming: bool = False,
         watermark: str | Path | None = None,
     ):
         """
         Parameters:
-            value: A path or URL for the default value that Video component is going to take. Can also be a tuple consisting of (video filepath, subtitle filepath). If a subtitle file is provided, it should be of type .srt or .vtt. Or can be callable, in which case the function will be called whenever the app loads to set the initial value of the component.
-            format: Format of video format to be returned by component, such as 'avi' or 'mp4'. Use 'mp4' to ensure browser playability. If set to None, video will keep uploaded format.
-            sources: A list of sources permitted for video. "upload" creates a box where user can drop a video file, "webcam" allows user to record a video from their webcam. If None, defaults to ["upload, "webcam"].
-            height: The height of the displayed video, specified in pixels if a number is passed, or in CSS units if a string is passed.
-            width: The width of the displayed video, specified in pixels if a number is passed, or in CSS units if a string is passed.
-            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
-            every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
-            inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
+            value: path or URL for the default value that Video component is going to take. Can also be a tuple consisting of (video filepath, subtitle filepath). If a subtitle file is provided, it should be of type .srt or .vtt. Or can be callable, in which case the function will be called whenever the app loads to set the initial value of the component.
+            format: the file extension with which to save video, such as 'avi' or 'mp4'. This parameter applies both when this component is used as an input to determine which file format to convert user-provided video to, and when this component is used as an output to determine the format of video returned to the user. If None, no file format conversion is done and the video is kept as is. Use 'mp4' to ensure browser playability.
+            sources: list of sources permitted for video. "upload" creates a box where user can drop a video file, "webcam" allows user to record a video from their webcam. If None, defaults to both ["upload, "webcam"].
+            height: The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed video file, but will affect the displayed video.
+            width: The width of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. This has no effect on the preprocessed video file, but will affect the displayed video.
+            label: the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            every: continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
+            inputs: components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
             show_label: if True, will display label.
-            container: If True, will place the component in a container - providing some extra padding around the border.
+            container: if True, will place the component in a container - providing some extra padding around the border.
             scale: relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.
             min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
             interactive: if True, will allow users to upload a video; if False, can only be used to display videos. If not provided, this is inferred based on whether the component is used as an input or output.
-            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.
-            elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
-            render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+            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.
+            elem_classes: an optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
+            render: if False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
             key: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
-            mirror_webcam: If True webcam will be mirrored. Default is True.
-            include_audio: Whether the component should record/retain the audio track for a video. By default, audio is excluded for webcam videos and included for uploaded videos.
-            autoplay: Whether to automatically play the video when the component is used as an output. Note: browsers will not autoplay video files if the user has not interacted with the page yet.
-            show_share_button: If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.
-            show_download_button: If True, will show a download icon in the corner of the component that allows user to download the output. If False, icon does not appear. By default, it will be True for output components and False for input components.
-            min_length: The minimum length of video (in seconds) that the user can pass into the prediction function. If None, there is no minimum length.
-            max_length: The maximum length of video (in seconds) that the user can pass into the prediction function. If None, there is no maximum length.
-            loop: If True, the video will loop when it reaches the end and continue playing from the beginning.
-            watermark: An image file to be included as a watermark on the video. The image is not scaled and is displayed on the bottom right of the video. Valid formats for the image are: jpeg, png.
+            mirror_webcam: if True webcam will be mirrored. Default is True.
+            include_audio: whether the component should record/retain the audio track for a video. By default, audio is excluded for webcam videos and included for uploaded videos.
+            autoplay: whether to automatically play the video when the component is used as an output. Note: browsers will not autoplay video files if the user has not interacted with the page yet.
+            show_share_button: if True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.
+            show_download_button: if True, will show a download icon in the corner of the component that allows user to download the output. If False, icon does not appear. By default, it will be True for output components and False for input components.
+            min_length: the minimum length of video (in seconds) that the user can pass into the prediction function. If None, there is no minimum length.
+            max_length: the maximum length of video (in seconds) that the user can pass into the prediction function. If None, there is no maximum length.
+            loop: if True, the video will loop when it reaches the end and continue playing from the beginning.
+            streaming: when used set as an output, takes video chunks yielded from the backend and combines them into one streaming video output. Each chunk should be a video file with a .ts extension using an h.264 encoding. Mp4 files are also accepted but they will be converted to h.264 encoding.
+            watermark: an image file to be included as a watermark on the video. The image is not scaled and is displayed on the bottom right of the video. Valid formats for the image are: jpeg, png.
         """
         valid_sources: list[Literal["upload", "webcam"]] = ["upload", "webcam"]
         if sources is None:
             self.sources = valid_sources
         elif isinstance(sources, str) and sources in valid_sources:
             self.sources = [sources]
-        elif isinstance(sources, list):
+        elif isinstance(sources, list) and all(s in valid_sources for s in sources):
             self.sources = sources
         else:
             raise ValueError(
@@ -156,6 +163,7 @@ def __init__(
         self.show_download_button = show_download_button
         self.min_length = min_length
         self.max_length = max_length
+        self.streaming = streaming
         self.watermark = watermark
         super().__init__(
             label=label,
@@ -263,6 +271,8 @@ def postprocess(
         Returns:
             VideoData object containing the video and subtitle files.
         """
+        if self.streaming:
+            return value  # type: ignore
         if value is None or value == [None, None] or value == (None, None):
             return None
         if isinstance(value, (str, Path)):
@@ -370,9 +380,10 @@ def _format_subtitle(self, subtitle: str | Path | None) -> FileData | None:
 
         def srt_to_vtt(srt_file_path, vtt_file_path):
             """Convert an SRT subtitle file to a VTT subtitle file"""
-            with open(srt_file_path, encoding="utf-8") as srt_file, open(
-                vtt_file_path, "w", encoding="utf-8"
-            ) as vtt_file:
+            with (
+                open(srt_file_path, encoding="utf-8") as srt_file,
+                open(vtt_file_path, "w", encoding="utf-8") as vtt_file,
+            ):
                 vtt_file.write("WEBVTT\n\n")
                 for subtitle_block in srt_file.read().strip().split("\n\n"):
                     subtitle_lines = subtitle_block.split("\n")
@@ -411,3 +422,163 @@ def example_payload(self) -> Any:
 
     def example_value(self) -> Any:
         return "https://github.com/gradio-app/gradio/raw/main/demo/video_component/files/world.mp4"
+
+    @staticmethod
+    def get_video_duration_ffprobe(filename: str):
+        if wasm_utils.IS_WASM:
+            raise wasm_utils.WasmUnsupportedError(
+                "ffprobe is not supported in the Wasm mode."
+            )
+
+        result = subprocess.run(
+            [
+                "ffprobe",
+                "-v",
+                "quiet",
+                "-print_format",
+                "json",
+                "-show_format",
+                "-show_streams",
+                filename,
+            ],
+            capture_output=True,
+            check=True,
+        )
+
+        data = json.loads(result.stdout)
+
+        duration = None
+        if "format" in data and "duration" in data["format"]:
+            duration = float(data["format"]["duration"])
+        else:
+            for stream in data.get("streams", []):
+                if "duration" in stream:
+                    duration = float(stream["duration"])
+                    break
+
+        return duration
+
+    @staticmethod
+    async def async_convert_mp4_to_ts(mp4_file, ts_file):
+        if wasm_utils.IS_WASM:
+            raise wasm_utils.WasmUnsupportedError(
+                "Streaming is not supported in the Wasm mode."
+            )
+
+        ff = FFmpeg(  # type: ignore
+            inputs={mp4_file: None},
+            outputs={
+                ts_file: "-c:v libx264 -c:a aac -f mpegts -bsf:v h264_mp4toannexb -bsf:a aac_adtstoasc"
+            },
+            global_options=["-y"],
+        )
+
+        command = ff.cmd.split(" ")
+        process = await asyncio.create_subprocess_exec(
+            *command, stdout=asyncio.subprocess.PIPE, stderr=asyncio.subprocess.PIPE
+        )
+
+        _, stderr = await process.communicate()
+
+        if process.returncode != 0:
+            error_message = stderr.decode().strip()
+            raise RuntimeError(f"FFmpeg command failed: {error_message}")
+
+        return ts_file
+
+    async def combine_stream(
+        self,
+        stream: list[bytes],
+        desired_output_format: str | None = None,  # noqa: ARG002
+        only_file=False,
+    ) -> VideoData | FileData:
+        """Combine video chunks into a single video file.
+
+        Do not take desired_output_format into consideration as
+        mp4 is a safe format for playing in browser.
+        """
+        if wasm_utils.IS_WASM:
+            raise wasm_utils.WasmUnsupportedError(
+                "Streaming is not supported in the Wasm mode."
+            )
+
+        # Use an mp4 extension here so that the cached example
+        # is playable in the browser
+        output_file = tempfile.NamedTemporaryFile(
+            delete=False, suffix=".mp4", dir=self.GRADIO_CACHE
+        )
+
+        ts_files = [
+            processing_utils.save_bytes_to_cache(
+                s, "video_chunk.ts", cache_dir=self.GRADIO_CACHE
+            )
+            for s in stream
+        ]
+
+        command = [
+            "ffmpeg",
+            "-i",
+            f'concat:{"|".join(ts_files)}',
+            "-y",
+            "-safe",
+            "0",
+            "-c",
+            "copy",
+            output_file.name,
+        ]
+        process = await asyncio.create_subprocess_exec(
+            *command, stdout=asyncio.subprocess.PIPE, stderr=asyncio.subprocess.PIPE
+        )
+
+        _, stderr = await process.communicate()
+
+        if process.returncode != 0:
+            error_message = stderr.decode().strip()
+            raise RuntimeError(f"FFmpeg command failed: {error_message}")
+        video = FileData(
+            path=output_file.name,
+            is_stream=False,
+            orig_name="video-stream.mp4",
+        )
+        if only_file:
+            return video
+
+        output = VideoData(video=video)
+        return output
+
+    async def stream_output(
+        self,
+        value: str | None,
+        output_id: str,
+        first_chunk: bool,  # noqa: ARG002
+    ) -> tuple[MediaStreamChunk | None, dict]:
+        output_file = {
+            "video": {
+                "path": output_id,
+                "is_stream": True,
+                # Need to set orig_name so that downloaded file has correct
+                # extension
+                "orig_name": "video-stream.mp4",
+            }
+        }
+        if value is None:
+            return None, output_file
+
+        ts_file = value
+        if not value.endswith(".ts"):
+            if not value.endswith(".mp4"):
+                raise RuntimeError(
+                    "Video must be in .mp4 or .ts format to be streamed as chunks",
+                )
+            ts_file = value.replace(".mp4", ".ts")
+            await self.async_convert_mp4_to_ts(value, ts_file)
+
+        duration = self.get_video_duration_ffprobe(ts_file)
+        if not duration:
+            raise RuntimeError("Cannot determine video chunk duration")
+        chunk: MediaStreamChunk = {
+            "data": Path(ts_file).read_bytes(),
+            "duration": duration,
+            "extension": ".ts",
+        }
+        return chunk, output_file
diff --git a/gradio/context.py b/gradio/context.py
index b754fd056aad1..42974c3f7e90d 100644
--- a/gradio/context.py
+++ b/gradio/context.py
@@ -16,7 +16,6 @@ class Context:
     root_block: Blocks | None = None  # The current root block that holds all blocks.
     block: BlockContext | None = None  # The current block that children are added to.
     id: int = 0  # Running id to uniquely refer to any block that gets defined
-    ip_address: str | None = None  # The IP address of the user.
     hf_token: str | None = None  # The token provided when loading private HF repos
 
 
diff --git a/gradio/data_classes.py b/gradio/data_classes.py
index 700816def7fc7..268509e857a66 100644
--- a/gradio/data_classes.py
+++ b/gradio/data_classes.py
@@ -7,15 +7,14 @@
 import secrets
 import shutil
 from abc import ABC, abstractmethod
+from collections.abc import Iterator
 from enum import Enum, auto
 from typing import (
+    Annotated,
     Any,
-    Iterator,
-    List,
     Literal,
     NewType,
     Optional,
-    Tuple,
     TypedDict,
     Union,
 )
@@ -32,7 +31,7 @@
 )
 from pydantic.json_schema import JsonSchemaValue
 from pydantic_core import core_schema
-from typing_extensions import Annotated, NotRequired
+from typing_extensions import NotRequired
 
 try:
     from pydantic import JsonValue
@@ -50,7 +49,7 @@ class CancelBody(BaseModel):
 
 
 class SimplePredictBody(BaseModel):
-    data: List[Any]
+    data: list[Any]
     session_hash: Optional[str] = None
 
 
@@ -81,7 +80,7 @@ def __get_pydantic_json_schema__(
 class PredictBody(BaseModel):
     session_hash: Optional[str] = None
     event_id: Optional[str] = None
-    data: List[Any]
+    data: list[Any]
     event_data: Optional[Any] = None
     fn_index: Optional[int] = None
     trigger_id: Optional[int] = None
@@ -130,7 +129,7 @@ class ComponentServerJSONBody(BaseModel):
 
 class DataWithFiles(BaseModel):
     data: Any
-    files: List[Tuple[str, bytes]]
+    files: list[tuple[str, bytes]]
 
 
 class ComponentServerBlobBody(BaseModel):
@@ -197,12 +196,12 @@ def from_json(cls, x) -> GradioRootModel:
 
 class FileDataDict(TypedDict):
     path: str  # server filepath
-    url: Optional[str]  # normalised server url
-    size: Optional[int]  # size in bytes
-    orig_name: Optional[str]  # original filename
-    mime_type: Optional[str]
+    url: NotRequired[Optional[str]]  # normalised server url
+    size: NotRequired[Optional[int]]  # size in bytes
+    orig_name: NotRequired[Optional[str]]  # original filename
+    mime_type: NotRequired[Optional[str]]
     is_stream: bool
-    meta: dict
+    meta: NotRequired[dict]
 
 
 @document()
@@ -302,7 +301,7 @@ def is_file_data(cls, obj: Any) -> bool:
 
 
 class ListFiles(GradioRootModel):
-    root: List[FileData]
+    root: list[FileData]
 
     def __getitem__(self, index):
         return self.root[index]
@@ -368,3 +367,11 @@ class BlocksConfigDict(TypedDict):
     dependencies: NotRequired[list[dict[str, Any]]]
     root: NotRequired[str | None]
     username: NotRequired[str | None]
+    api_prefix: str
+
+
+class MediaStreamChunk(TypedDict):
+    data: bytes
+    duration: float
+    extension: str
+    id: NotRequired[str]
diff --git a/gradio/events.py b/gradio/events.py
index 638ab48f349c1..8db49e0733554 100644
--- a/gradio/events.py
+++ b/gradio/events.py
@@ -4,16 +4,12 @@
 from __future__ import annotations
 
 import dataclasses
+from collections.abc import Callable, Sequence, Set
 from functools import partial, wraps
 from typing import (
     TYPE_CHECKING,
-    AbstractSet,
     Any,
-    Callable,
-    Dict,
-    List,
     Literal,
-    Sequence,
     Union,
     cast,
 )
@@ -310,6 +306,71 @@ def __init__(self, target: Block | None, data: Any):
         """
 
 
+@document()
+class RetryData(EventData):
+    """
+    The gr.RetryData class is a subclass of gr.Event data that specifically carries information about the `.retry()` event. When gr.RetryData
+    is added as a type hint to an argument of an event listener method, a gr.RetryData object will automatically be passed as the value of that argument.
+    The attributes of this object contains information about the event that triggered the listener.
+    Example:
+        import gradio as gr
+
+        def retry(retry_data: gr.RetryData, history: list[gr.MessageDict]):
+            history_up_to_retry = history[:retry_data.index]
+            new_response = ""
+            for token in api.chat_completion(history):
+                new_response += token
+                yield history + [new_response]
+
+        with gr.Blocks() as demo:
+            chatbot = gr.Chatbot()
+            chatbot.retry(retry, chatbot, chatbot)
+        demo.launch()
+    """
+
+    def __init__(self, target: Block | None, data: Any):
+        super().__init__(target, data)
+        self.index: int | tuple[int, int] = data["index"]
+        """
+        The index of the user message that should be retried.
+        """
+        self.value: Any = data["value"]
+        """
+        The value of the user message that should be retried.
+        """
+
+
+@document()
+class UndoData(EventData):
+    """
+    The gr.UndoData class is a subclass of gr.Event data that specifically carries information about the `.undo()` event. When gr.UndoData
+    is added as a type hint to an argument of an event listener method, a gr.UndoData object will automatically be passed as the value of that argument.
+    The attributes of this object contains information about the event that triggered the listener.
+    Example:
+        import gradio as gr
+
+        def undo(retry_data: gr.UndoData, history: list[gr.MessageDict]):
+            history_up_to_retry = history[:retry_data.index]
+            return history_up_to_retry
+
+        with gr.Blocks() as demo:
+            chatbot = gr.Chatbot()
+            chatbot.undo(undo, chatbot, chatbot)
+        demo.launch()
+    """
+
+    def __init__(self, target: Block | None, data: Any):
+        super().__init__(target, data)
+        self.index: int | tuple[int, int] = data["index"]
+        """
+        The index of the user message that should be undone.
+        """
+        self.value: Any = data["value"]
+        """
+        The value of the user message that should be undone.
+        """
+
+
 @dataclasses.dataclass
 class EventListenerMethod:
     block: Block | None
@@ -330,7 +391,7 @@ class EventListenerMethod:
             int,
             bool,
             bool,
-            Union[Dict[str, Any], List[Dict[str, Any]], None],
+            Union[dict[str, Any], list[dict[str, Any]], None],
             Union[float, None],
             Union[Literal["once", "multiple", "always_last"], None],
             Union[str, None],
@@ -356,6 +417,8 @@ def __init__(
         trigger_after: int | None = None,
         trigger_only_on_success: bool = False,
         doc: str = "",
+        connection: Literal["sse", "stream"] = "sse",
+        event_specific_args: list[dict[str, str]] | None = None,
     ):
         super().__init__()
         self.has_trigger = has_trigger
@@ -366,6 +429,8 @@ def __init__(
         self.trigger_only_on_success = trigger_only_on_success
         self.callback = callback
         self.doc = doc
+        self.connection = connection
+        self.event_specific_args = event_specific_args or []
         self.listener = self._setup(
             event_name,
             has_trigger,
@@ -373,6 +438,8 @@ def __init__(
             callback,
             trigger_after,
             trigger_only_on_success,
+            self.event_specific_args,
+            self.connection,
         )
         if doc and self.listener.__doc__:
             self.listener.__doc__ = doc + self.listener.__doc__
@@ -392,6 +459,8 @@ def copy(self):
             self.trigger_after,
             self.trigger_only_on_success,
             self.doc,
+            self.connection,  # type: ignore
+            self.event_specific_args,
         )
 
     @staticmethod
@@ -402,6 +471,8 @@ def _setup(
         _callback: Callable | None,
         _trigger_after: int | None,
         _trigger_only_on_success: bool,
+        _event_specific_args: list[dict[str, str]],
+        _connection: Literal["sse", "stream"] = "sse",
     ):
         def event_trigger(
             block: Block | None,
@@ -409,12 +480,12 @@ def event_trigger(
             inputs: Component
             | BlockContext
             | Sequence[Component | BlockContext]
-            | AbstractSet[Component | BlockContext]
+            | Set[Component | BlockContext]
             | None = None,
             outputs: Component
             | BlockContext
             | Sequence[Component | BlockContext]
-            | AbstractSet[Component | BlockContext]
+            | Set[Component | BlockContext]
             | None = None,
             api_name: str | None | Literal[False] = None,
             scroll_to_output: bool = False,
@@ -425,12 +496,14 @@ def event_trigger(
             preprocess: bool = True,
             postprocess: bool = True,
             cancels: dict[str, Any] | list[dict[str, Any]] | None = None,
-            every: float | None = None,
             trigger_mode: Literal["once", "multiple", "always_last"] | None = None,
             js: str | None = None,
             concurrency_limit: int | None | Literal["default"] = "default",
             concurrency_id: str | None = None,
             show_api: bool = True,
+            time_limit: int | None = None,
+            stream_every: float = 0.5,
+            like_user_message: bool = False,
         ) -> Dependency:
             """
             Parameters:
@@ -446,7 +519,6 @@ def event_trigger(
                 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: Will be deprecated in favor of gr.Timer. 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).
@@ -503,32 +575,15 @@ def inner(*args, **kwargs):
                 block if _has_trigger else None, _event_name
             )
 
-            # Handle every as a float (to be deprecated in favor of gr.Timer)
-            timer = None
-            if every is not None:
-                from gradio.components import Timer
-
-                timer = Timer(every, active=False)
-                root_block.set_event_trigger(
-                    [event_target],
-                    lambda: Timer(active=True),
-                    None,
-                    timer,
-                    show_api=False,
-                )
-                target = EventListenerMethod(timer, "tick")
-            else:
-                target = event_target
-
             dep, dep_index = root_block.set_event_trigger(
-                [target],
+                [event_target],
                 fn,
                 inputs,
                 outputs,
                 preprocess=preprocess,
                 postprocess=postprocess,
                 scroll_to_output=scroll_to_output,
-                show_progress=show_progress if every is None else "hidden",
+                show_progress=show_progress,
                 api_name=api_name,
                 js=js,
                 concurrency_limit=concurrency_limit,
@@ -540,6 +595,17 @@ def inner(*args, **kwargs):
                 trigger_only_on_success=_trigger_only_on_success,
                 trigger_mode=trigger_mode,
                 show_api=show_api,
+                connection=_connection,
+                time_limit=time_limit,
+                stream_every=stream_every,
+                like_user_message=like_user_message,
+                event_specific_args=[
+                    d["name"]
+                    for d in _event_specific_args
+                    if d.get("component_prop", "true") != "false"
+                ]
+                if _event_specific_args
+                else None,
             )
             set_cancel_events(
                 [event_target],
@@ -547,7 +613,7 @@ def inner(*args, **kwargs):
             )
             if _callback:
                 _callback(block)
-            return Dependency(block, dep.get_config(), dep_index, fn, timer)
+            return Dependency(block, dep.get_config(), dep_index, fn)
 
         event_trigger.event_name = _event_name  # type: ignore
         event_trigger.has_trigger = _has_trigger  # type: ignore
@@ -562,12 +628,12 @@ def on(
     inputs: Component
     | BlockContext
     | Sequence[Component | BlockContext]
-    | AbstractSet[Component | BlockContext]
+    | Set[Component | BlockContext]
     | None = None,
     outputs: Component
     | BlockContext
     | Sequence[Component | BlockContext]
-    | AbstractSet[Component | BlockContext]
+    | Set[Component | BlockContext]
     | None = None,
     *,
     api_name: str | None | Literal[False] = None,
@@ -580,7 +646,6 @@ def on(
     postprocess: bool = True,
     cancels: dict[str, Any] | list[dict[str, Any]] | None = None,
     trigger_mode: Literal["once", "multiple", "always_last"] | None = None,
-    every: float | None = None,
     js: str | None = None,
     concurrency_limit: int | None | Literal["default"] = "default",
     concurrency_id: str | None = None,
@@ -592,7 +657,7 @@ def on(
     for all events in the triggers list.
 
     Parameters:
-        triggers: List of triggers to listen to, e.g. [btn.click, number.change]. If None, will listen to changes to any inputs.
+        triggers: List of triggers to listen to, e.g. [btn.click, number.change]. If None, will run on app load and changes to any inputs.
         fn: the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
         inputs: List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
         outputs: List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list.
@@ -606,7 +671,6 @@ def on(
         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.
         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.
-        every: Will be deprecated in favor of gr.Timer. Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds.
         js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs', 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.
@@ -657,7 +721,6 @@ def wrapper(func):
                 concurrency_id=concurrency_id,
                 show_api=show_api,
                 trigger_mode=trigger_mode,
-                every=every,
             )
 
             @wraps(func)
@@ -676,7 +739,7 @@ def inner(*args, **kwargs):
             [EventListenerMethod(input, "change") for input in inputs]
             if inputs is not None
             else []
-        )  # type: ignore
+        ) + [EventListenerMethod(root_block, "load")]  # type: ignore
     else:
         methods = [
             EventListenerMethod(t.__self__ if t.has_trigger else None, t.event_name)  # type: ignore
@@ -687,19 +750,6 @@ def inner(*args, **kwargs):
             if trigger.callback:  # type: ignore
                 trigger.callback(trigger.__self__)  # type: ignore
 
-    if every is not None:
-        from gradio.components import Timer
-
-        timer = Timer(every, active=False)
-        root_block.set_event_trigger(
-            methods,
-            lambda: Timer(active=True),
-            None,
-            timer,
-            show_api=False,
-        )
-        methods = [EventListenerMethod(timer, "tick")]
-
     dep, dep_index = root_block.set_event_trigger(
         methods,
         fn,
@@ -740,6 +790,10 @@ class Events:
         "submit",
         doc="This listener is triggered when the user presses the Enter key while the {{ component }} is focused.",
     )
+    stop = EventListener(
+        "stop",
+        doc="This listener is triggered when the user clicks on the stop button or icon.",
+    )
     edit = EventListener(
         "edit",
         doc="This listener is triggered when the user edits the {{ component }} (e.g. image) using the built-in editor.",
@@ -798,17 +852,44 @@ class Events:
     )
     stream = EventListener(
         "stream",
-        show_progress="hidden",
         config_data=lambda: {"streamable": False},
         callback=lambda block: setattr(block, "streaming", True),
         doc="This listener is triggered when the user streams the {{ component }}.",
+        connection="stream",
+        show_progress="minimal",
+        event_specific_args=[
+            {
+                "name": "stream_every",
+                "type": "float = 0.5",
+                "doc": "The latency (in seconds) at which stream chunks are sent to the backend. Defaults to 0.5 seconds. Parameter only used for the `.stream()` event.",
+            },
+            {
+                "name": "time_limit",
+                "type": "float | None = None",
+                "doc": "The time limit for the function to run. Parameter only used for the `.stream()` event.",
+                "component_prop": "false",
+            },
+        ],
     )
     like = EventListener(
         "like",
         config_data=lambda: {"likeable": False},
         callback=lambda block: setattr(block, "likeable", True),
+        event_specific_args=[
+            {
+                "name": "like_user_message",
+                "type": "bool = False",
+                "doc": "Whether to display the like buttons for user messages in the chatbot.",
+            }
+        ],
         doc="This listener is triggered when the user likes/dislikes from within the {{ component }}. This event has EventData of type gradio.LikeData that carries information, accessible through LikeData.index and LikeData.value. See EventData documentation on how to use this event data.",
     )
+    example_select = EventListener(
+        "example_select",
+        config_data=lambda: {"example_selectable": False},
+        callback=lambda block: setattr(block, "example_selectable", True),
+        doc="This listener is triggered when the user clicks on an example from within the {{ component }}. This event has SelectData of type gradio.SelectData that carries information, accessible through SelectData.index and SelectData.value. See SelectData documentation on how to use this event data.",
+    )
     load = EventListener(
         "load",
         doc="This listener is triggered when the {{ component }} initially loads in the browser.",
@@ -830,3 +911,15 @@ class Events:
         doc="This listener is triggered at regular intervals defined by the {{ component }}.",
         show_progress="hidden",
     )
+    undo = EventListener(
+        "undo",
+        doc="This listener is triggered when the user clicks the undo button in the chatbot message.",
+        callback=lambda block: setattr(block, "_undoable", True),
+        config_data=lambda: {"_undoable": False},
+    )
+    retry = EventListener(
+        "retry",
+        doc="This listener is triggered when the user clicks the retry button in the chatbot message.",
+        callback=lambda block: setattr(block, "_retryable", True),
+        config_data=lambda: {"_retryable": False},
+    )
diff --git a/gradio/exceptions.py b/gradio/exceptions.py
index 1ab9dc4c0955a..c750bce3eb2dd 100644
--- a/gradio/exceptions.py
+++ b/gradio/exceptions.py
@@ -102,3 +102,7 @@ class ComponentDefinitionError(NotImplementedError):
 
 class InvalidPathError(ValueError):
     pass
+
+
+class ChecksumMismatchError(Exception):
+    pass
diff --git a/gradio/external.py b/gradio/external.py
index b7923e9742d08..9777ebd7f58b6 100644
--- a/gradio/external.py
+++ b/gradio/external.py
@@ -8,8 +8,9 @@
 import re
 import tempfile
 import warnings
+from collections.abc import Callable
 from pathlib import Path
-from typing import TYPE_CHECKING, Callable, Literal
+from typing import TYPE_CHECKING, Literal
 
 import httpx
 import huggingface_hub
@@ -23,7 +24,6 @@
 from gradio.context import Context
 from gradio.exceptions import (
     GradioVersionIncompatibleError,
-    ModelNotFoundError,
     TooManyRequestsError,
 )
 from gradio.processing_utils import save_base64_to_cache, to_binary
@@ -36,40 +36,32 @@
 @document()
 def load(
     name: str,
-    src: str | None = None,
-    hf_token: str | Literal[False] | None = None,
-    alias: str | None = None,
+    src: Callable[[str, str | None], Blocks]
+    | Literal["models", "spaces"]
+    | None = None,
+    token: str | None = None,
+    hf_token: str | None = None,
     **kwargs,
 ) -> Blocks:
     """
-    Constructs a demo from a Hugging Face repo. Can accept model repos (if src is "models") or Space repos (if src is "spaces"). The input
-    and output components are automatically loaded from the repo. Note that if a Space is loaded, certain high-level attributes of the Blocks (e.g.
-    custom `css`, `js`, and `head` attributes) will not be loaded.
+    Constructs a Gradio app automatically from a Hugging Face model/Space repo name or a 3rd-party API provider. Note that if a Space repo is loaded, certain high-level attributes of the Blocks (e.g. custom `css`, `js`, and `head` attributes) will not be loaded.
     Parameters:
-        name: the name of the model (e.g. "gpt2" or "facebook/bart-base") or space (e.g. "flax-community/spanish-gpt2"), can include the `src` as prefix (e.g. "models/facebook/bart-base")
-        src: the source of the model: `models` or `spaces` (or leave empty if source is provided as a prefix in `name`)
-        hf_token: optional access token for loading private Hugging Face Hub models or spaces. Will default to the locally saved token if not provided. Pass `token=False` if you don't want to send your token to the server. Find your token here: https://huggingface.co/settings/tokens.  Warning: only provide a token if you are loading a trusted private Space as it can be read by the Space you are loading.
-        alias: optional string used as the name of the loaded model instead of the default name (only applies if loading a Space running Gradio 2.x)
+        name: the name of the model (e.g. "google/vit-base-patch16-224") or Space (e.g. "flax-community/spanish-gpt2"). This is the first parameter passed into the `src` function. Can also be formatted as {src}/{repo name} (e.g. "models/google/vit-base-patch16-224") if `src` is not provided.
+        src: function that accepts a string model `name` and a string or None `token` and returns a Gradio app. Alternatively, this parameter takes one of two strings for convenience: "models" (for loading a Hugging Face model through the Inference API) or "spaces" (for loading a Hugging Face Space). If None, uses the prefix of the `name` parameter to determine `src`.
+        token: optional token that is passed as the second parameter to the `src` function. For Hugging Face repos, uses the local HF token when loading models but not Spaces (when loading Spaces, only provide a token if you are loading a trusted private Space as the token can be read by the Space you are loading). Find HF tokens here: https://huggingface.co/settings/tokens.
+        kwargs: additional keyword parameters to pass into the `src` function. If `src` is "models" or "Spaces", these parameters are passed into the `gr.Interface` or `gr.ChatInterface` constructor.
     Returns:
-        a Gradio Blocks object for the given model
+        a Gradio Blocks app for the given model
     Example:
         import gradio as gr
         demo = gr.load("gradio/question-answering", src="spaces")
         demo.launch()
     """
-    return load_blocks_from_repo(
-        name=name, src=src, hf_token=hf_token, alias=alias, **kwargs
-    )
-
-
-def load_blocks_from_repo(
-    name: str,
-    src: str | None = None,
-    hf_token: str | Literal[False] | None = None,
-    alias: str | None = None,
-    **kwargs,
-) -> Blocks:
-    """Creates and returns a Blocks instance from a Hugging Face model or Space repo."""
+    if hf_token is not None and token is None:
+        token = hf_token
+        warnings.warn(
+            "The `hf_token` parameter is deprecated. Please use the equivalent `token` parameter instead."
+        )
     if src is None:
         # Separate the repo type (e.g. "model") from repo name (e.g. "google/vit-base-patch16-224")
         tokens = name.split("/")
@@ -77,18 +69,34 @@ def load_blocks_from_repo(
             raise ValueError(
                 "Either `src` parameter must be provided, or `name` must be formatted as {src}/{repo name}"
             )
-        src = tokens[0]
+        src = tokens[0]  # type: ignore
         name = "/".join(tokens[1:])
+    if src in ["huggingface", "models", "spaces"]:
+        return load_blocks_from_huggingface(
+            name=name, src=src, hf_token=token, **kwargs
+        )
+    elif isinstance(src, Callable):
+        return src(name, token, **kwargs)
+    else:
+        raise ValueError(
+            "The `src` parameter must be one of 'huggingface', 'models', 'spaces', or a function that accepts a model name (and optionally, a token), and returns a Gradio app."
+        )
 
+
+def load_blocks_from_huggingface(
+    name: str,
+    src: str,
+    hf_token: str | Literal[False] | None = None,
+    alias: str | None = None,
+    **kwargs,
+) -> Blocks:
+    """Creates and returns a Blocks instance from a Hugging Face model or Space repo."""
     factory_methods: dict[str, Callable] = {
         # for each repo type, we have a method that returns the Interface given the model name & optionally an hf_token
         "huggingface": from_model,
         "models": from_model,
         "spaces": from_spaces,
     }
-    if src.lower() not in factory_methods:
-        raise ValueError(f"parameter: src must be one of {factory_methods.keys()}")
-
     if hf_token is not None and hf_token is not False:
         if Context.hf_token is not None and Context.hf_token != hf_token:
             warnings.warn(
@@ -96,33 +104,23 @@ def load_blocks_from_repo(
             )
         Context.hf_token = hf_token
 
+    if src == "spaces" and hf_token is None:
+        hf_token = False  # Since Spaces can read the token, we don't want to pass it in unless the user explicitly provides it
     blocks: gradio.Blocks = factory_methods[src](name, hf_token, alias, **kwargs)
     return blocks
 
 
 def from_model(
     model_name: str, hf_token: str | Literal[False] | None, alias: str | None, **kwargs
-):
-    model_url = f"https://huggingface.co/{model_name}"
-    api_url = f"https://api-inference.huggingface.co/models/{model_name}"
-    print(f"Fetching model from: {model_url}")
-
-    headers = (
-        {} if hf_token in [False, None] else {"Authorization": f"Bearer {hf_token}"}
-    )
-    response = httpx.request("GET", api_url, headers=headers)
-    if response.status_code != 200:
-        raise ModelNotFoundError(
-            f"Could not find model: {model_name}. If it is a private or gated model, please provide your Hugging Face access token (https://huggingface.co/settings/tokens) as the argument for the `hf_token` parameter."
-        )
-    p = response.json().get("pipeline_tag")
-
-    headers["X-Wait-For-Model"] = "true"
+) -> Blocks:
+    headers = {"X-Wait-For-Model": "true"}
     client = huggingface_hub.InferenceClient(
         model=model_name, headers=headers, token=hf_token
     )
+    p, tags = external_utils.get_model_info(model_name, hf_token)
 
     # For tasks that are not yet supported by the InferenceClient
+    api_url = f"https://api-inference.huggingface.co/models/{model_name}"
     GRADIO_CACHE = os.environ.get("GRADIO_TEMP_DIR") or str(  # noqa: N806
         Path(tempfile.gettempdir()) / "gradio"
     )
@@ -163,20 +161,6 @@ def custom_post_binary(data):
             "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
         ]
         fn = client.automatic_speech_recognition
-    # example model: microsoft/DialoGPT-medium
-    elif p == "conversational":
-        inputs = [
-            components.Textbox(render=False),
-            components.State(render=False),
-        ]
-        outputs = [
-            components.Chatbot(render=False),
-            components.State(render=False),
-        ]
-        examples = [["Hello World"]]
-        preprocess = external_utils.chatbot_preprocess
-        postprocess = external_utils.chatbot_postprocess
-        fn = client.conversational
     # example model: julien-c/distilbert-feature-extraction
     elif p == "feature-extraction":
         inputs = components.Textbox(label="Input")
@@ -238,6 +222,18 @@ def custom_post_binary(data):
         fn = client.text_classification
     # Example: gpt2
     elif p == "text-generation":
+        # Example: meta-llama/Meta-Llama-3-8B-Instruct
+        if tags and "conversational" in tags:
+            from gradio import ChatInterface
+
+            fn = external_utils.conversational_wrapper(client)
+            examples = [
+                "What is the capital of Pakistan?",
+                "Tell me a joke about calculus.",
+                "Explain gravity to a 5-year-old.",
+                "What were the main causes of World War I?",
+            ]
+            return ChatInterface(fn, type="messages", examples=examples)
         inputs = components.Textbox(label="Text")
         outputs = inputs
         examples = ["Once upon a time"]
@@ -252,6 +248,7 @@ def custom_post_binary(data):
     elif p == "translation":
         inputs = components.Textbox(label="Input")
         outputs = components.Textbox(label="Translation")
+        postprocess = lambda x: x.translation_text  # noqa: E731
         examples = ["Hello, how are you?"]
         fn = client.translation
     # Example: facebook/bart-large-mnli
@@ -397,7 +394,7 @@ def query_huggingface_inference_endpoints(*data):
 
 
 def from_spaces(
-    space_name: str, hf_token: str | None, alias: str | None, **kwargs
+    space_name: str, hf_token: str | None | Literal[False], alias: str | None, **kwargs
 ) -> Blocks:
     space_url = f"https://huggingface.co/spaces/{space_name}"
 
@@ -444,7 +441,7 @@ def from_spaces(
         return from_spaces_blocks(space=space_name, hf_token=hf_token)
 
 
-def from_spaces_blocks(space: str, hf_token: str | None) -> Blocks:
+def from_spaces_blocks(space: str, hf_token: str | None | Literal[False]) -> Blocks:
     client = Client(
         space,
         hf_token=hf_token,
@@ -479,7 +476,7 @@ def from_spaces_interface(
     model_name: str,
     config: dict,
     alias: str | None,
-    hf_token: str | None,
+    hf_token: str | None | Literal[False],
     iframe_url: str,
     **kwargs,
 ) -> Interface:
diff --git a/gradio/external_utils.py b/gradio/external_utils.py
index ab982c0f923d0..9441571ee30eb 100644
--- a/gradio/external_utils.py
+++ b/gradio/external_utils.py
@@ -9,10 +9,21 @@
 
 import httpx
 import yaml
-from huggingface_hub import InferenceClient
+from huggingface_hub import HfApi, ImageClassificationOutputElement, InferenceClient
 
 from gradio import components
 
+
+def get_model_info(model_name, hf_token=None):
+    hf_api = HfApi(token=hf_token)
+    print(f"Fetching model from: https://huggingface.co/{model_name}")
+
+    model_info = hf_api.model_info(model_name)
+    pipeline = model_info.pipeline_tag
+    tags = model_info.tags
+    return pipeline, tags
+
+
 ##################
 # Helper functions for processing tabular data
 ##################
@@ -78,8 +89,8 @@ def rows_to_cols(incoming_data: dict) -> dict[str, dict[str, dict[str, list[str]
 ##################
 
 
-def postprocess_label(scores: list[dict[str, str | float]]) -> dict:
-    return {c["label"]: c["score"] for c in scores}
+def postprocess_label(scores: list[ImageClassificationOutputElement]) -> dict:
+    return {c.label: c.score for c in scores}
 
 
 def postprocess_mask_tokens(scores: list[dict[str, str | float]]) -> dict:
@@ -117,6 +128,17 @@ def text_generation_inner(input: str):
     return text_generation_inner
 
 
+def conversational_wrapper(client: InferenceClient):
+    def chat_fn(message, history):
+        if not history:
+            history = []
+        history.append({"role": "user", "content": message})
+        result = client.chat_completion(history)
+        return result.choices[0].message.content
+
+    return chat_fn
+
+
 def encode_to_base64(r: httpx.Response) -> str:
     # Handles the different ways HF API returns the prediction
     base64_repr = base64.b64encode(r.content).decode("utf-8")
@@ -204,6 +226,7 @@ def chatbot_postprocess(response):
         zip(
             response["conversation"]["past_user_inputs"],
             response["conversation"]["generated_responses"],
+            strict=False,
         )
     )
     return chatbot_history, response
diff --git a/gradio/flagging.py b/gradio/flagging.py
index 6bf5c4db09ccd..fe9d41ae2d9a1 100644
--- a/gradio/flagging.py
+++ b/gradio/flagging.py
@@ -1,23 +1,22 @@
 from __future__ import annotations
 
+import contextlib
 import csv
 import datetime
-import json
 import os
+import re
 import time
-import uuid
 from abc import ABC, abstractmethod
-from collections import OrderedDict
+from collections.abc import Sequence
+from multiprocessing import Lock
 from pathlib import Path
-from typing import TYPE_CHECKING, Any, Sequence
+from typing import TYPE_CHECKING, Any
 
-import filelock
-import huggingface_hub
 from gradio_client import utils as client_utils
 from gradio_client.documentation import document
 
 import gradio as gr
-from gradio import utils
+from gradio import utils, wasm_utils
 
 if TYPE_CHECKING:
     from gradio.components import Component
@@ -43,7 +42,7 @@ def setup(self, components: Sequence[Component], flagging_dir: str):
     def flag(
         self,
         flag_data: list[Any],
-        flag_option: str = "",
+        flag_option: str | None = None,
         username: str | None = None,
     ) -> int:
         """
@@ -85,14 +84,14 @@ def setup(self, components: Sequence[Component], flagging_dir: str | Path):
     def flag(
         self,
         flag_data: list[Any],
-        flag_option: str = "",  # noqa: ARG002
+        flag_option: str | None = None,  # noqa: ARG002
         username: str | None = None,  # noqa: ARG002
     ) -> int:
         flagging_dir = self.flagging_dir
         log_filepath = Path(flagging_dir) / "log.csv"
 
         csv_data = []
-        for component, sample in zip(self.components, flag_data):
+        for component, sample in zip(self.components, flag_data, strict=False):
             save_dir = Path(
                 flagging_dir
             ) / client_utils.strip_invalid_filename_characters(component.label or "")
@@ -114,16 +113,16 @@ def flag(
 
 
 @document()
-class CSVLogger(FlaggingCallback):
+class ClassicCSVLogger(FlaggingCallback):
     """
-    The default implementation of the FlaggingCallback abstract class. Each flagged
+    The classic implementation of the FlaggingCallback abstract class in gradio<5.0. Each flagged
     sample (both the input and output data) is logged to a CSV file with headers on the machine running the gradio app.
     Example:
         import gradio as gr
         def image_classifier(inp):
             return {'cat': 0.3, 'dog': 0.7}
         demo = gr.Interface(fn=image_classifier, inputs="image", outputs="label",
-                            flagging_callback=CSVLogger())
+                            flagging_callback=ClassicCSVLogger())
     Guides: using-flagging
     """
 
@@ -142,7 +141,7 @@ def setup(
     def flag(
         self,
         flag_data: list[Any],
-        flag_option: str = "",
+        flag_option: str | None = None,
         username: str | None = None,
     ) -> int:
         flagging_dir = self.flagging_dir
@@ -158,7 +157,9 @@ def flag(
         ]
 
         csv_data = []
-        for idx, (component, sample) in enumerate(zip(self.components, flag_data)):
+        for idx, (component, sample) in enumerate(
+            zip(self.components, flag_data, strict=False)
+        ):
             save_dir = Path(
                 flagging_dir
             ) / client_utils.strip_invalid_filename_characters(
@@ -191,274 +192,156 @@ def flag(
 
 
 @document()
-class HuggingFaceDatasetSaver(FlaggingCallback):
+class CSVLogger(FlaggingCallback):
     """
-    A callback that saves each flagged sample (both the input and output data) to a HuggingFace dataset.
+    The default implementation of the FlaggingCallback abstract class in gradio>=5.0. Each flagged
+    sample (both the input and output data) is logged to a CSV file with headers on the machine running
+    the gradio app. Unlike ClassicCSVLogger, this implementation is concurrent-safe and it creates a new
+    dataset file every time the headers of the CSV (derived from the labels of the components) change. It also
+    only creates columns for "username" and "flag" if the flag_option and username are provided, respectively.
 
     Example:
         import gradio as gr
-        hf_writer = gr.HuggingFaceDatasetSaver(HF_API_TOKEN, "image-classification-mistakes")
         def image_classifier(inp):
             return {'cat': 0.3, 'dog': 0.7}
         demo = gr.Interface(fn=image_classifier, inputs="image", outputs="label",
-                            allow_flagging="manual", flagging_callback=hf_writer)
+                            flagging_callback=CSVLogger())
     Guides: using-flagging
     """
 
     def __init__(
         self,
-        hf_token: str,
-        dataset_name: str,
-        private: bool = False,
-        info_filename: str = "dataset_info.json",
-        separate_dirs: bool = False,
+        simplify_file_data: bool = True,
+        verbose: bool = True,
+        dataset_file_name: str | None = None,
     ):
         """
         Parameters:
-            hf_token: The HuggingFace token to use to create (and write the flagged sample to) the HuggingFace dataset (defaults to the registered one).
-            dataset_name: The repo_id of the dataset to save the data to, e.g. "image-classifier-1" or "username/image-classifier-1".
-            private: Whether the dataset should be private (defaults to False).
-            info_filename: The name of the file to save the dataset info (defaults to "dataset_infos.json").
-            separate_dirs: If True, each flagged item will be saved in a separate directory. This makes the flagging more robust to concurrent editing, but may be less convenient to use.
+            simplify_file_data: If True, the file data will be simplified before being written to the CSV file. If CSVLogger is being used to cache examples, this is set to False to preserve the original FileData class
+            verbose: If True, prints messages to the console about the dataset file creation
+            dataset_file_name: The name of the dataset file to be created (should end in ".csv"). If None, the dataset file will be named "dataset1.csv" or the next available number.
         """
-        self.hf_token = hf_token
-        self.dataset_id = dataset_name  # TODO: rename parameter (but ensure backward compatibility somehow)
-        self.dataset_private = private
-        self.info_filename = info_filename
-        self.separate_dirs = separate_dirs
-
-    def setup(self, components: Sequence[Component], flagging_dir: str):
-        """
-        Params:
-        flagging_dir (str): local directory where the dataset is cloned,
-        updated, and pushed from.
-        """
-        # Setup dataset on the Hub
-        self.dataset_id = huggingface_hub.create_repo(
-            repo_id=self.dataset_id,
-            token=self.hf_token,
-            private=self.dataset_private,
-            repo_type="dataset",
-            exist_ok=True,
-        ).repo_id
-        path_glob = "**/*.jsonl" if self.separate_dirs else "data.csv"
-        huggingface_hub.metadata_update(
-            repo_id=self.dataset_id,
-            repo_type="dataset",
-            metadata={
-                "configs": [
-                    {
-                        "config_name": "default",
-                        "data_files": [{"split": "train", "path": path_glob}],
-                    }
-                ]
-            },
-            overwrite=True,
-            token=self.hf_token,
-        )
+        self.simplify_file_data = simplify_file_data
+        self.verbose = verbose
+        self.dataset_file_name = dataset_file_name
+        self.lock = (
+            Lock() if not wasm_utils.IS_WASM else contextlib.nullcontext()
+        )  # The multiprocessing module doesn't work on Lite.
 
-        # Setup flagging dir
+    def setup(
+        self,
+        components: Sequence[Component],
+        flagging_dir: str | Path,
+    ):
         self.components = components
-        self.dataset_dir = (
-            Path(flagging_dir).absolute() / self.dataset_id.split("/")[-1]
-        )
-        self.dataset_dir.mkdir(parents=True, exist_ok=True)
-        self.infos_file = self.dataset_dir / self.info_filename
-
-        # Download remote files to local
-        remote_files = [self.info_filename]
-        if not self.separate_dirs:
-            # No separate dirs => means all data is in the same CSV file => download it to get its current content
-            remote_files.append("data.csv")
+        self.flagging_dir = Path(flagging_dir)
+        self.first_time = True
 
-        for filename in remote_files:
-            try:
-                huggingface_hub.hf_hub_download(
-                    repo_id=self.dataset_id,
-                    repo_type="dataset",
-                    filename=filename,
-                    local_dir=self.dataset_dir,
-                    token=self.hf_token,
-                )
-            except huggingface_hub.utils.EntryNotFoundError:
-                pass
+    def _create_dataset_file(self, additional_headers: list[str] | None = None):
+        os.makedirs(self.flagging_dir, exist_ok=True)
 
-    def flag(
-        self,
-        flag_data: list[Any],
-        flag_option: str = "",
-        username: str | None = None,
-    ) -> int:
-        if self.separate_dirs:
-            # JSONL files to support dataset preview on the Hub
-            unique_id = str(uuid.uuid4())
-            components_dir = self.dataset_dir / unique_id
-            data_file = components_dir / "metadata.jsonl"
-            path_in_repo = unique_id  # upload in sub folder (safer for concurrency)
-        else:
-            # Unique CSV file
-            components_dir = self.dataset_dir
-            data_file = components_dir / "data.csv"
-            path_in_repo = None  # upload at root level
-
-        return self._flag_in_dir(
-            data_file=data_file,
-            components_dir=components_dir,
-            path_in_repo=path_in_repo,
-            flag_data=flag_data,
-            flag_option=flag_option,
-            username=username or "",
-        )
-
-    def _flag_in_dir(
-        self,
-        data_file: Path,
-        components_dir: Path,
-        path_in_repo: str | None,
-        flag_data: list[Any],
-        flag_option: str = "",
-        username: str = "",
-    ) -> int:
-        # Deserialize components (write images/audio to files)
-        features, row = self._deserialize_components(
-            components_dir, flag_data, flag_option, username
+        if additional_headers is None:
+            additional_headers = []
+        headers = (
+            [
+                getattr(component, "label", None) or f"component {idx}"
+                for idx, component in enumerate(self.components)
+            ]
+            + additional_headers
+            + [
+                "timestamp",
+            ]
         )
+        headers = utils.sanitize_list_for_csv(headers)
+        dataset_files = list(Path(self.flagging_dir).glob("dataset*.csv"))
 
-        # Write generic info to dataset_infos.json + upload
-        with filelock.FileLock(str(self.infos_file) + ".lock"):
-            if not self.infos_file.exists():
-                self.infos_file.write_text(
-                    json.dumps({"flagged": {"features": features}})
+        if self.dataset_file_name:
+            self.dataset_filepath = self.flagging_dir / self.dataset_file_name
+        elif dataset_files:
+            try:
+                latest_file = max(
+                    dataset_files, key=lambda f: int(re.findall(r"\d+", f.stem)[0])
                 )
+                latest_num = int(re.findall(r"\d+", latest_file.stem)[0])
 
-                huggingface_hub.upload_file(
-                    repo_id=self.dataset_id,
-                    repo_type="dataset",
-                    token=self.hf_token,
-                    path_in_repo=self.infos_file.name,
-                    path_or_fileobj=self.infos_file,
-                )
+                with open(latest_file, newline="", encoding="utf-8") as csvfile:
+                    reader = csv.reader(csvfile)
+                    existing_headers = next(reader, None)
 
-        headers = list(features.keys())
-
-        if not self.separate_dirs:
-            with filelock.FileLock(components_dir / ".lock"):
-                sample_nb = self._save_as_csv(data_file, headers=headers, row=row)
-                sample_name = str(sample_nb)
-                huggingface_hub.upload_folder(
-                    repo_id=self.dataset_id,
-                    repo_type="dataset",
-                    commit_message=f"Flagged sample #{sample_name}",
-                    path_in_repo=path_in_repo,
-                    ignore_patterns="*.lock",
-                    folder_path=components_dir,
-                    token=self.hf_token,
-                )
+                if existing_headers != headers:
+                    new_num = latest_num + 1
+                    self.dataset_filepath = self.flagging_dir / f"dataset{new_num}.csv"
+                else:
+                    self.dataset_filepath = latest_file
+            except Exception:
+                self.dataset_filepath = self.flagging_dir / "dataset1.csv"
         else:
-            sample_name = self._save_as_jsonl(data_file, headers=headers, row=row)
-            sample_nb = len(
-                [path for path in self.dataset_dir.iterdir() if path.is_dir()]
-            )
-            huggingface_hub.upload_folder(
-                repo_id=self.dataset_id,
-                repo_type="dataset",
-                commit_message=f"Flagged sample #{sample_name}",
-                path_in_repo=path_in_repo,
-                ignore_patterns="*.lock",
-                folder_path=components_dir,
-                token=self.hf_token,
-            )
-
-        return sample_nb
-
-    @staticmethod
-    def _save_as_csv(data_file: Path, headers: list[str], row: list[Any]) -> int:
-        """Save data as CSV and return the sample name (row number)."""
-        is_new = not data_file.exists()
+            self.dataset_filepath = self.flagging_dir / "dataset1.csv"
 
-        with data_file.open("a", newline="", encoding="utf-8") as csvfile:
-            writer = csv.writer(csvfile)
-
-            # Write CSV headers if new file
-            if is_new:
+        if not Path(self.dataset_filepath).exists():
+            with open(
+                self.dataset_filepath, "w", newline="", encoding="utf-8"
+            ) as csvfile:
+                writer = csv.writer(csvfile)
                 writer.writerow(utils.sanitize_list_for_csv(headers))
+            if self.verbose:
+                print("Created dataset file at:", self.dataset_filepath)
+        elif self.verbose:
+            print("Using existing dataset file at:", self.dataset_filepath)
 
-            # Write CSV row for flagged sample
-            writer.writerow(utils.sanitize_list_for_csv(row))
-
-        with data_file.open(encoding="utf-8") as csvfile:
-            return sum(1 for _ in csv.reader(csvfile)) - 1
-
-    @staticmethod
-    def _save_as_jsonl(data_file: Path, headers: list[str], row: list[Any]) -> str:
-        """Save data as JSONL and return the sample name (uuid)."""
-        Path.mkdir(data_file.parent, parents=True, exist_ok=True)
-        with open(data_file, "w", encoding="utf-8") as f:
-            json.dump(dict(zip(headers, row)), f)
-        return data_file.parent.name
-
-    def _deserialize_components(
+    def flag(
         self,
-        data_dir: Path,
         flag_data: list[Any],
-        flag_option: str = "",
-        username: str = "",
-    ) -> tuple[dict[Any, Any], list[Any]]:
-        """Deserialize components and return the corresponding row for the flagged sample.
+        flag_option: str | None = None,
+        username: str | None = None,
+    ) -> int:
+        if self.first_time:
+            additional_headers = []
+            if flag_option is not None:
+                additional_headers.append("flag")
+            if username is not None:
+                additional_headers.append("username")
+            self._create_dataset_file(additional_headers=additional_headers)
+            self.first_time = False
 
-        Images/audio are saved to disk as individual files.
-        """
-        # Components that can have a preview on dataset repos
-        file_preview_types = {gr.Audio: "Audio", gr.Image: "Image"}
-
-        # Generate the row corresponding to the flagged sample
-        features = OrderedDict()
-        row = []
-        for component, sample in zip(self.components, flag_data):
-            # Get deserialized object (will save sample to disk if applicable -file, audio, image,...-)
-            label = component.label or ""
-            save_dir = data_dir / client_utils.strip_invalid_filename_characters(label)
-            save_dir.mkdir(exist_ok=True, parents=True)
-            deserialized = utils.simplify_file_data_in_str(
-                component.flag(sample, save_dir)
+        csv_data = []
+        for idx, (component, sample) in enumerate(
+            zip(self.components, flag_data, strict=False)
+        ):
+            save_dir = (
+                self.flagging_dir
+                / client_utils.strip_invalid_filename_characters(
+                    getattr(component, "label", None) or f"component {idx}"
+                )
             )
+            if utils.is_prop_update(sample):
+                csv_data.append(str(sample))
+            else:
+                data = (
+                    component.flag(sample, flag_dir=save_dir)
+                    if sample is not None
+                    else ""
+                )
+                if self.simplify_file_data:
+                    data = utils.simplify_file_data_in_str(data)
+                csv_data.append(data)
 
-            # Add deserialized object to row
-            features[label] = {"dtype": "string", "_type": "Value"}
-            try:
-                deserialized_path = Path(deserialized)
-                if not deserialized_path.exists():
-                    raise FileNotFoundError(f"File {deserialized} not found")
-                row.append(str(deserialized_path.relative_to(self.dataset_dir)))
-            except (FileNotFoundError, TypeError, ValueError, OSError):
-                deserialized = "" if deserialized is None else str(deserialized)
-                row.append(deserialized)
-
-            # If component is eligible for a preview, add the URL of the file
-            # Be mindful that images and audio can be None
-            if isinstance(component, tuple(file_preview_types)):  # type: ignore
-                for _component, _type in file_preview_types.items():
-                    if isinstance(component, _component):
-                        features[label + " file"] = {"_type": _type}
-                        break
-                if deserialized:
-                    path_in_repo = str(  # returned filepath is absolute, we want it relative to compute URL
-                        Path(deserialized).relative_to(self.dataset_dir)
-                    ).replace("\\", "/")
-                    row.append(
-                        huggingface_hub.hf_hub_url(
-                            repo_id=self.dataset_id,
-                            filename=path_in_repo,
-                            repo_type="dataset",
-                        )
-                    )
-                else:
-                    row.append("")
-        features["flag"] = {"dtype": "string", "_type": "Value"}
-        features["username"] = {"dtype": "string", "_type": "Value"}
-        row.append(flag_option)
-        row.append(username)
-        return features, row
+        if flag_option is not None:
+            csv_data.append(flag_option)
+        if username is not None:
+            csv_data.append(username)
+        csv_data.append(str(datetime.datetime.now()))
+
+        with self.lock:
+            with open(
+                self.dataset_filepath, "a", newline="", encoding="utf-8"
+            ) as csvfile:
+                writer = csv.writer(csvfile)
+                writer.writerow(utils.sanitize_list_for_csv(csv_data))
+            with open(self.dataset_filepath, encoding="utf-8") as csvfile:
+                line_count = len(list(csv.reader(csvfile))) - 1
+
+        return line_count
 
 
 class FlagMethod:
@@ -471,7 +354,7 @@ def __init__(
         self,
         flagging_callback: FlaggingCallback,
         label: str,
-        value: str,
+        value: str | None,
         visual_feedback: bool = True,
     ):
         self.flagging_callback = flagging_callback
diff --git a/gradio/helpers.py b/gradio/helpers.py
index 22149e763e280..9658d5996a4cf 100644
--- a/gradio/helpers.py
+++ b/gradio/helpers.py
@@ -9,22 +9,17 @@
 import csv
 import inspect
 import os
-import shutil
-import subprocess
-import tempfile
 import warnings
+from collections.abc import Callable, Iterable, Sequence
 from functools import partial
 from pathlib import Path
-from typing import TYPE_CHECKING, Any, Callable, Iterable, Literal, Optional, Sequence
+from typing import TYPE_CHECKING, Any, Literal, Optional
 
-import numpy as np
-import PIL
-import PIL.Image
 from gradio_client import utils as client_utils
 from gradio_client.documentation import document
 
 from gradio import components, oauth, processing_utils, routes, utils, wasm_utils
-from gradio.context import Context, LocalContext, get_blocks_context
+from gradio.context import Context, LocalContext
 from gradio.data_classes import GradioModel, GradioRootModel
 from gradio.events import Dependency, EventData
 from gradio.exceptions import Error
@@ -42,7 +37,8 @@ def create_examples(
     inputs: Component | Sequence[Component],
     outputs: Component | Sequence[Component] | None = None,
     fn: Callable | None = None,
-    cache_examples: bool | Literal["lazy"] | None = None,
+    cache_examples: bool | None = None,
+    cache_mode: Literal["eager", "lazy"] | None = None,
     examples_per_page: int = 10,
     _api_mode: bool = False,
     label: str | None = None,
@@ -55,7 +51,6 @@ def create_examples(
     *,
     example_labels: list[str] | None = None,
     visible: bool = True,
-    _defer_caching: bool = False,
 ):
     """Top-level synchronous function that creates Examples. Provided for backwards compatibility, i.e. so that gr.Examples(...) can be used to create the Examples component."""
     examples_obj = Examples(
@@ -64,6 +59,7 @@ def create_examples(
         outputs=outputs,
         fn=fn,
         cache_examples=cache_examples,
+        cache_mode=cache_mode,
         examples_per_page=examples_per_page,
         _api_mode=_api_mode,
         label=label,
@@ -73,7 +69,6 @@ def create_examples(
         postprocess=postprocess,
         api_name=api_name,
         batch=batch,
-        _defer_caching=_defer_caching,
         example_labels=example_labels,
         visible=visible,
         _initiated_directly=False,
@@ -100,7 +95,8 @@ def __init__(
         inputs: Component | Sequence[Component],
         outputs: Component | Sequence[Component] | None = None,
         fn: Callable | None = None,
-        cache_examples: bool | Literal["lazy"] | None = None,
+        cache_examples: bool | None = None,
+        cache_mode: Literal["eager", "lazy"] | None = None,
         examples_per_page: int = 10,
         _api_mode: bool = False,
         label: str | None = "Examples",
@@ -113,7 +109,6 @@ def __init__(
         *,
         example_labels: list[str] | None = None,
         visible: bool = True,
-        _defer_caching: bool = False,
         _initiated_directly: bool = True,
     ):
         """
@@ -122,7 +117,8 @@ def __init__(
             inputs: the component or list of components corresponding to the examples
             outputs: optionally, provide the component or list of components corresponding to the output of the examples. Required if `cache_examples` is not False.
             fn: optionally, provide the function to run to generate the outputs corresponding to the examples. Required if `cache_examples` is not False. Also required if `run_on_click` is True.
-            cache_examples: If True, caches examples in the server for fast runtime in examples. If "lazy", then examples are cached after their first use. Can also be set by the GRADIO_CACHE_EXAMPLES environment variable, which takes a case-insensitive value, one of: {"true", "lazy", or "false"} (for the first two to take effect, `fn` and `outputs` should also be provided). In HuggingFace Spaces, this is True (as long as `fn` and `outputs` are also provided). The default option otherwise is False.
+            cache_examples: If True, caches examples in the server for fast runtime in examples. If "lazy", then examples are cached (for all users of the app) after their first use (by any user of the app). If None, will use the GRADIO_CACHE_EXAMPLES environment variable, which should be either "true" or "false". In HuggingFace Spaces, this parameter is True (as long as `fn` and `outputs` are also provided). The default option otherwise is False.
+            cache_mode: if "lazy", examples are cached after their first use. If "eager", all examples are cached at app launch. If None, will use the GRADIO_CACHE_MODE environment variable if defined, or default to "eager".
             examples_per_page: how many examples to show per page.
             label: the label to use for the examples component (by default, "Examples")
             elem_id: an optional string that is assigned as the id of this component in the HTML DOM.
@@ -139,38 +135,43 @@ def __init__(
                 "Please use gr.Examples(...) instead of gr.examples.Examples(...) to create the Examples.",
             )
 
+        self.cache_examples = False
         if cache_examples is None:
-            if cache_examples_env := os.getenv("GRADIO_CACHE_EXAMPLES"):
-                if cache_examples_env.lower() == "true":
-                    if fn is not None and outputs is not None:
-                        self.cache_examples = True
-                    else:
-                        self.cache_examples = False
-                elif cache_examples_env.lower() == "lazy":
-                    if fn is not None and outputs is not None:
-                        self.cache_examples = "lazy"
-                    else:
-                        self.cache_examples = False
-                elif cache_examples_env.lower() == "false":
-                    self.cache_examples = False
-                else:
-                    raise ValueError(
-                        "The `GRADIO_CACHE_EXAMPLES` env variable must be one of: 'true', 'false', 'lazy' (case-insensitive)."
-                    )
-            elif utils.get_space() and fn is not None and outputs is not None:
+            if (
+                os.getenv("GRADIO_CACHE_EXAMPLES", "").lower() == "true"
+                and fn is not None
+                and outputs is not None
+            ):
                 self.cache_examples = True
-            else:
-                self.cache_examples = cache_examples or False
-        else:
-            if cache_examples not in [True, False, "lazy"]:
-                raise ValueError(
-                    "The `cache_examples` parameter must be one of: True, False, 'lazy'."
-                )
+        elif cache_examples == "lazy":
+            warnings.warn(
+                "In future versions of Gradio, the `cache_examples` parameter will no longer accept a value of 'lazy'. To enable lazy caching in "
+                "Gradio, you should set `cache_examples=True`, and `cache_mode='lazy'` instead."
+            )
+            self.cache_examples = "lazy"
+        elif cache_examples in [True, False]:
             self.cache_examples = cache_examples
-
+        else:
+            raise ValueError(
+                f"The `cache_examples` parameter should be either True or False, not {cache_examples}"
+            )
         if self.cache_examples and (fn is None or outputs is None):
             raise ValueError("If caching examples, `fn` and `outputs` must be provided")
-        self._defer_caching = _defer_caching
+
+        if (cache_mode_env := os.getenv("GRADIO_CACHE_MODE")) and cache_mode is None:
+            if cache_mode_env.lower() == "eager":
+                cache_mode = "eager"
+            elif cache_mode_env.lower() == "lazy":
+                cache_mode = "lazy"
+            else:
+                cache_mode = "eager"
+                warnings.warn(
+                    "The `GRADIO_CACHE_MODE` environment variable must be either 'eager' or 'lazy'. "
+                    "Defaulting to 'eager'."
+                )
+
+        if self.cache_examples and cache_mode == "lazy":
+            self.cache_examples = "lazy"
 
         if not isinstance(inputs, Sequence):
             inputs = [inputs]
@@ -227,10 +228,14 @@ def __init__(
                         pass  # If there are more example components than inputs, ignore. This can sometimes be intentional (e.g. loading from a log file where outputs and timestamps are also logged)
 
         inputs_with_examples = [
-            inp for (inp, keep) in zip(inputs, input_has_examples) if keep
+            inp for (inp, keep) in zip(inputs, input_has_examples, strict=False) if keep
         ]
         non_none_examples = [
-            [ex for (ex, keep) in zip(example, input_has_examples) if keep]
+            [
+                ex
+                for (ex, keep) in zip(example, input_has_examples, strict=False)
+                if keep
+            ]
             for example in examples
         ]
         if example_labels is not None and len(example_labels) != len(examples):
@@ -267,7 +272,9 @@ def __init__(
                 sample_labels=example_labels,
             )
 
-        self.cache_logger = CSVLogger(simplify_file_data=False)
+        self.cache_logger = CSVLogger(
+            simplify_file_data=False, verbose=False, dataset_file_name="log.csv"
+        )
         self.cached_folder = utils.get_cache_folder() / str(self.dataset._id)
         self.cached_file = Path(self.cached_folder) / "log.csv"
         self.cached_indices_file = Path(self.cached_folder) / "indices.csv"
@@ -286,7 +293,7 @@ def _get_processed_example(self, example):
             return self.non_none_processed_examples[example]
         with utils.set_directory(self.working_directory):
             sub = []
-            for component, sample in zip(self.inputs, example):
+            for component, sample in zip(self.inputs, example, strict=False):
                 prediction_value = component.postprocess(sample)
                 if isinstance(prediction_value, (GradioRootModel, GradioModel)):
                     prediction_value = prediction_value.model_dump()
@@ -296,48 +303,79 @@ def _get_processed_example(self, example):
                     postprocess=True,
                 )
                 sub.append(prediction_value)
-        return [ex for (ex, keep) in zip(sub, self.input_has_examples) if keep]
+        return [
+            ex for (ex, keep) in zip(sub, self.input_has_examples, strict=False) if keep
+        ]
 
     def create(self) -> None:
-        """Caches the examples if self.cache_examples is True and creates the Dataset
-        component to hold the examples"""
-
-        async def load_example(example_tuple):
-            _, example_value = example_tuple
-            processed_example = self._get_processed_example(example_value)
-            if len(self.inputs_with_examples) == 1:
-                return update(
-                    value=processed_example[0],
-                    **self.dataset.component_props[0],  # type: ignore
+        """Creates the Dataset component to hold the examples"""
+
+        self.root_block = Context.root_block
+        if self.root_block:
+            self.root_block.extra_startup_events.append(self._start_caching)
+
+            if self.cache_examples == True:  # noqa: E712
+
+                def load_example_with_output(example_tuple):
+                    example_id, example_value = example_tuple
+                    processed_example = self._get_processed_example(
+                        example_value
+                    ) + self.load_from_cache(example_id)
+                    return utils.resolve_singleton(processed_example)
+
+                self.cache_event = self.load_input_event = self.dataset.click(
+                    load_example_with_output,
+                    inputs=[self.dataset],
+                    outputs=self.inputs_with_examples + self.outputs,  # type: ignore
+                    show_progress="hidden",
+                    postprocess=False,
+                    queue=False,
+                    api_name=self.api_name,
+                    show_api=False,
                 )
-            return [
-                update(value=processed_example[i], **self.dataset.component_props[i])  # type: ignore
-                for i in range(len(self.inputs_with_examples))
-            ]
+            else:
 
-        root_block = get_blocks_context()
-        if root_block:
-            self.load_input_event = self.dataset.click(
-                load_example,
-                inputs=[self.dataset],
-                outputs=self.inputs_with_examples,  # type: ignore
-                show_progress="hidden",
-                postprocess=False,
-                queue=False,
-                api_name=self.api_name,
-                show_api=False,
-            )
-            if self.run_on_click and not self.cache_examples:
-                if self.fn is None:
-                    raise ValueError("Cannot run_on_click if no function is provided")
-                self.load_input_event.then(
-                    self.fn,
-                    inputs=self.inputs,  # type: ignore
-                    outputs=self.outputs,  # type: ignore
+                def load_example(example_tuple):
+                    _, example_value = example_tuple
+                    processed_example = self._get_processed_example(example_value)
+                    if len(self.inputs_with_examples) == 1:
+                        return update(
+                            value=processed_example[0],
+                            **self.dataset.component_props[0],  # type: ignore
+                        )
+                    return [
+                        update(
+                            value=processed_example[i],
+                            **self.dataset.component_props[i],  # type: ignore
+                        )
+                        for i in range(len(self.inputs_with_examples))
+                    ]
+
+                self.load_input_event = self.dataset.click(
+                    load_example,
+                    inputs=[self.dataset],
+                    outputs=self.inputs_with_examples,  # type: ignore
+                    show_progress="hidden",
+                    postprocess=False,
+                    queue=False,
+                    api_name=self.api_name,
                     show_api=False,
                 )
-        if not self._defer_caching:
-            self._start_caching()
+
+                if self.cache_examples == "lazy":
+                    self.lazy_cache()
+
+                if self.run_on_click and self.cache_examples == False:  # noqa: E712
+                    if self.fn is None:
+                        raise ValueError(
+                            "Cannot run_on_click if no function is provided"
+                        )
+                    self.load_input_event.then(
+                        self.fn,
+                        inputs=self.inputs,  # type: ignore
+                        outputs=self.outputs,  # type: ignore
+                        show_api=False,
+                    )
 
     async def _postprocess_output(self, output) -> list:
         """
@@ -363,7 +401,7 @@ def _get_cached_index_if_cached(self, example_index) -> int | None:
                 return cached_index
         return None
 
-    def _start_caching(self):
+    async def _start_caching(self):
         if self.cache_examples:
             for example in self.examples:
                 if len([ex for ex in example if ex is not None]) != len(self.inputs):
@@ -375,8 +413,6 @@ def _start_caching(self):
                         "or you provide default values for those particular parameters in your function."
                     )
                     break
-        if self.cache_examples == "lazy":
-            client_utils.synchronize_async(self.lazy_cache)
         if self.cache_examples is True:
             if wasm_utils.IS_WASM:
                 # In the Wasm mode, the `threading` module is not supported,
@@ -388,9 +424,9 @@ def _start_caching(self):
                     "Setting `cache_examples=True` is not supported in the Wasm mode. You can set `cache_examples='lazy'` to cache examples after first use."
                 )
             else:
-                client_utils.synchronize_async(self.cache)
+                await self.cache()
 
-    async def lazy_cache(self) -> None:
+    def lazy_cache(self) -> None:
         print(
             f"Will cache examples in '{utils.abspath(self.cached_folder)}' directory at first use. ",
             end="",
@@ -459,9 +495,8 @@ async def cache(self) -> None:
         """
         Caches examples so that their predictions can be shown immediately.
         """
-        blocks_config = get_blocks_context()
-        if blocks_config is None or Context.root_block is None:
-            raise ValueError("Cannot cache examples if not in a Blocks context")
+        if self.root_block is None:
+            raise Error("Cannot cache examples if not in a Blocks context.")
         if Path(self.cached_file).exists():
             print(
                 f"Using cache from '{utils.abspath(self.cached_folder)}' directory. If method or examples have changed since last caching, delete this folder to clear cache.\n"
@@ -496,7 +531,7 @@ async def get_final_item(*args):
             # create a fake dependency to process the examples and get the predictions
             from gradio.events import EventListenerMethod
 
-            _, fn_index = blocks_config.set_event_trigger(
+            _, fn_index = self.root_block.default_config.set_event_trigger(
                 [EventListenerMethod(Context.root_block, "load")],
                 fn=fn,
                 inputs=self.inputs_with_examples,  # type: ignore
@@ -514,44 +549,21 @@ async def get_final_item(*args):
                 if self.batch:
                     processed_input = [[value] for value in processed_input]
                 with utils.MatplotlibBackendMananger():
-                    prediction = await Context.root_block.process_api(
-                        block_fn=blocks_config.fns[fn_index],
+                    prediction = await self.root_block.process_api(
+                        block_fn=self.root_block.default_config.fns[fn_index],
                         inputs=processed_input,
                         request=None,
                     )
                 output = prediction["data"]
                 if len(generated_values):
-                    output = merge_generated_values_into_output(
+                    output = await merge_generated_values_into_output(
                         self.outputs, generated_values, output
                     )
                 if self.batch:
                     output = [value[0] for value in output]
                 self.cache_logger.flag(output)
             # Remove the "fake_event" to prevent bugs in loading interfaces from spaces
-            blocks_config.fns.pop(fn_index)
-
-        # Remove the original load_input_event and replace it with one that
-        # also populates the input. We do it this way to to allow the cache()
-        # method to be called independently of the create() method
-        blocks_config.fns.pop(self.load_input_event["id"])
-
-        def load_example(example_tuple):
-            example_id, example_value = example_tuple
-            processed_example = self._get_processed_example(
-                example_value
-            ) + self.load_from_cache(example_id)
-            return utils.resolve_singleton(processed_example)
-
-        self.cache_event = self.load_input_event = self.dataset.click(
-            load_example,
-            inputs=[self.dataset],
-            outputs=self.inputs_with_examples + self.outputs,  # type: ignore
-            show_progress="hidden",
-            postprocess=False,
-            queue=False,
-            api_name=self.api_name,
-            show_api=False,
-        )
+            self.root_block.default_config.fns.pop(fn_index)
 
     def load_from_cache(self, example_id: int) -> list[Any]:
         """Loads a particular cached example for the interface.
@@ -564,7 +576,7 @@ def load_from_cache(self, example_id: int) -> list[Any]:
         output = []
         if self.outputs is None:
             raise ValueError("self.outputs is missing")
-        for component, value in zip(self.outputs, example):
+        for component, value in zip(self.outputs, example, strict=False):
             value_to_use = value
             try:
                 value_as_dict = ast.literal_eval(value)
@@ -583,7 +595,7 @@ def load_from_cache(self, example_id: int) -> list[Any]:
         return output
 
 
-def merge_generated_values_into_output(
+async def merge_generated_values_into_output(
     components: Sequence[Component], generated_values: list, output: list
 ):
     from gradio.components.base import StreamingOutput
@@ -591,27 +603,24 @@ def merge_generated_values_into_output(
     for output_index, output_component in enumerate(components):
         if isinstance(output_component, StreamingOutput) and output_component.streaming:
             binary_chunks = []
+            desired_output_format = None
             for i, chunk in enumerate(generated_values):
                 if len(components) > 1:
                     chunk = chunk[output_index]
                 processed_chunk = output_component.postprocess(chunk)
                 if isinstance(processed_chunk, (GradioModel, GradioRootModel)):
                     processed_chunk = processed_chunk.model_dump()
-                binary_chunks.append(
-                    output_component.stream_output(processed_chunk, "", i == 0)[0]
+                stream_chunk = await output_component.stream_output(
+                    processed_chunk, "", i == 0
                 )
-            binary_data = b"".join(binary_chunks)
-            tempdir = os.environ.get("GRADIO_TEMP_DIR") or str(
-                Path(tempfile.gettempdir()) / "gradio"
+                if i == 0 and (orig_name := stream_chunk[1].get("orig_name")):
+                    desired_output_format = Path(orig_name).suffix[1:]
+                if stream_chunk[0]:
+                    binary_chunks.append(stream_chunk[0]["data"])
+            combined_output = await output_component.combine_stream(
+                binary_chunks, desired_output_format=desired_output_format
             )
-            os.makedirs(tempdir, exist_ok=True)
-            temp_file = tempfile.NamedTemporaryFile(dir=tempdir, delete=False)
-            with open(temp_file.name, "wb") as f:
-                f.write(binary_data)
-
-            output[output_index] = {
-                "path": temp_file.name,
-            }
+            output[output_index] = combined_output.model_dump()
 
     return output
 
@@ -906,12 +915,8 @@ def special_args(
             if inputs is not None:
                 inputs.insert(i, request)
         elif type_hint in (
-            # Note: "OAuthProfile | None" is equals to Optional[OAuthProfile] in Python
-            #       => it is automatically handled as well by the above condition
-            #       (adding explicit "OAuthProfile | None" would break in Python3.9)
-            #       (same for "OAuthToken")
-            Optional[oauth.OAuthProfile],
-            Optional[oauth.OAuthToken],
+            oauth.OAuthProfile | None,
+            oauth.OAuthToken | None,
             oauth.OAuthProfile,
             oauth.OAuthToken,
         ):
@@ -1014,247 +1019,15 @@ def update(
     return kwargs
 
 
-def skip() -> dict:
-    return {"__type__": "update"}
-
-
 @document()
-def make_waveform(
-    audio: str | tuple[int, np.ndarray],
-    *,
-    bg_color: str = "#f3f4f6",
-    bg_image: str | None = None,
-    fg_alpha: float = 0.75,
-    bars_color: str | tuple[str, str] = ("#fbbf24", "#ea580c"),
-    bar_count: int = 50,
-    bar_width: float = 0.6,
-    animate: bool = False,
-) -> str:
+def skip() -> dict:
     """
-    Generates a waveform video from an audio file. Useful for creating an easy to share audio visualization. The output should be passed into a `gr.Video` component.
-    Parameters:
-        audio: Audio file path or tuple of (sample_rate, audio_data)
-        bg_color: Background color of waveform (ignored if bg_image is provided)
-        bg_image: Background image of waveform
-        fg_alpha: Opacity of foreground waveform
-        bars_color: Color of waveform bars. Can be a single color or a tuple of (start_color, end_color) of gradient
-        bar_count: Number of bars in waveform
-        bar_width: Width of bars in waveform. 1 represents full width, 0.5 represents half width, etc.
-        animate: If true, the audio waveform overlay will be animated, if false, it will be static.
-    Returns:
-        A filepath to the output video in mp4 format.
+    A special function that can be returned from a Gradio function to skip updating the output component. This may be useful when
+    you want to update the output component conditionally, and in some cases, you want to skip updating the output component.
+    If you have multiple output components, you can return `gr.skip()` as part of a tuple to skip updating a specific output component,
+    or you can return a single `gr.skip()` to skip updating all output components.
     """
-    import matplotlib.pyplot as plt
-    from matplotlib.animation import FuncAnimation
-
-    if isinstance(audio, str):
-        audio_file = audio
-        audio = processing_utils.audio_from_file(audio)
-    else:
-        tmp_wav = tempfile.NamedTemporaryFile(suffix=".wav", delete=False)
-        processing_utils.audio_to_file(audio[0], audio[1], tmp_wav.name, format="wav")
-        audio_file = tmp_wav.name
-
-    if not os.path.isfile(audio_file):
-        raise ValueError("Audio file not found.")
-
-    ffmpeg = shutil.which("ffmpeg")
-    if not ffmpeg:
-        raise RuntimeError("ffmpeg not found.")
-
-    duration = round(len(audio[1]) / audio[0], 4)
-
-    # Helper methods to create waveform
-    def hex_to_rgb(hex_str):
-        return [int(hex_str[i : i + 2], 16) for i in range(1, 6, 2)]
-
-    def get_color_gradient(c1, c2, n):
-        if n < 1:
-            raise ValueError("Must have at least one stop in gradient")
-        c1_rgb = np.array(hex_to_rgb(c1)) / 255
-        c2_rgb = np.array(hex_to_rgb(c2)) / 255
-        mix_pcts = [x / (n - 1) for x in range(n)]
-        rgb_colors = [((1 - mix) * c1_rgb + (mix * c2_rgb)) for mix in mix_pcts]
-        return [
-            "#" + "".join(f"{int(round(val * 255)):02x}" for val in item)
-            for item in rgb_colors
-        ]
-
-    # Reshape audio to have a fixed number of bars
-    samples = audio[1]
-    if len(samples.shape) > 1:
-        samples = np.mean(samples, 1)
-    bins_to_pad = bar_count - (len(samples) % bar_count)
-    samples = np.pad(samples, [(0, bins_to_pad)])
-    samples = np.reshape(samples, (bar_count, -1))
-    samples = np.abs(samples)
-    samples = np.max(samples, 1)
-
-    with utils.MatplotlibBackendMananger():
-        plt.clf()
-        # Plot waveform
-        color = (
-            bars_color
-            if isinstance(bars_color, str)
-            else get_color_gradient(bars_color[0], bars_color[1], bar_count)
-        )
-
-        if animate:
-            fig = plt.figure(figsize=(5, 1), dpi=200, frameon=False)
-            fig.subplots_adjust(left=0, bottom=0, right=1, top=1)
-        plt.axis("off")
-        plt.margins(x=0)
-
-        bar_alpha = fg_alpha if animate else 1.0
-        barcollection = plt.bar(
-            np.arange(0, bar_count),
-            samples * 2,
-            bottom=(-1 * samples),
-            width=bar_width,
-            color=color,
-            alpha=bar_alpha,
-        )
-
-        tmp_img = tempfile.NamedTemporaryFile(suffix=".png", delete=False)
-
-        savefig_kwargs: dict[str, Any] = {"bbox_inches": "tight"}
-        if bg_image is not None:
-            savefig_kwargs["transparent"] = True
-            if animate:
-                savefig_kwargs["facecolor"] = "none"
-        else:
-            savefig_kwargs["facecolor"] = bg_color
-        plt.savefig(tmp_img.name, **savefig_kwargs)
-
-        if not animate:
-            waveform_img = PIL.Image.open(tmp_img.name)
-            waveform_img = waveform_img.resize((1000, 400))
-
-            # Composite waveform with background image
-            if bg_image is not None:
-                waveform_array = np.array(waveform_img)
-                waveform_array[:, :, 3] = waveform_array[:, :, 3] * fg_alpha
-                waveform_img = PIL.Image.fromarray(waveform_array)
-
-                bg_img = PIL.Image.open(bg_image)
-                waveform_width, waveform_height = waveform_img.size
-                bg_width, bg_height = bg_img.size
-                if waveform_width != bg_width:
-                    bg_img = bg_img.resize(
-                        (
-                            waveform_width,
-                            2 * int(bg_height * waveform_width / bg_width / 2),
-                        )
-                    )
-                    bg_width, bg_height = bg_img.size
-                composite_height = max(bg_height, waveform_height)
-                composite = PIL.Image.new(
-                    "RGBA", (waveform_width, composite_height), "#FFFFFF"
-                )
-                composite.paste(bg_img, (0, composite_height - bg_height))
-                composite.paste(
-                    waveform_img, (0, composite_height - waveform_height), waveform_img
-                )
-                composite.save(tmp_img.name)
-                img_width, img_height = composite.size
-            else:
-                img_width, img_height = waveform_img.size
-                waveform_img.save(tmp_img.name)
-        else:
-
-            def _animate(_):
-                for idx, b in enumerate(barcollection):
-                    rand_height = np.random.uniform(0.8, 1.2)
-                    b.set_height(samples[idx] * rand_height * 2)
-                    b.set_y((-rand_height * samples)[idx])
-
-            frames = int(duration * 10)
-            anim = FuncAnimation(
-                fig,  # type: ignore
-                _animate,  # type: ignore
-                repeat=False,
-                blit=False,
-                frames=frames,
-                interval=100,
-            )
-            anim.save(
-                tmp_img.name,
-                writer="pillow",
-                fps=10,
-                codec="png",
-                savefig_kwargs=savefig_kwargs,
-            )
-
-    # Convert waveform to video with ffmpeg
-    output_mp4 = tempfile.NamedTemporaryFile(suffix=".mp4", delete=False)
-
-    if animate and bg_image is not None:
-        ffmpeg_cmd = [
-            ffmpeg,
-            "-loop",
-            "1",
-            "-i",
-            bg_image,
-            "-i",
-            tmp_img.name,
-            "-i",
-            audio_file,
-            "-filter_complex",
-            "[0:v]scale=w=trunc(iw/2)*2:h=trunc(ih/2)*2[bg];[1:v]format=rgba,colorchannelmixer=aa=1.0[ov];[bg][ov]overlay=(main_w-overlay_w*0.9)/2:main_h-overlay_h*0.9/2[output]",
-            "-t",
-            str(duration),
-            "-map",
-            "[output]",
-            "-map",
-            "2:a",
-            "-c:v",
-            "libx264",
-            "-c:a",
-            "aac",
-            "-shortest",
-            "-y",
-            output_mp4.name,
-        ]
-    elif animate and bg_image is None:
-        ffmpeg_cmd = [
-            ffmpeg,
-            "-i",
-            tmp_img.name,
-            "-i",
-            audio_file,
-            "-filter_complex",
-            "[0:v][1:a]concat=n=1:v=1:a=1[v];[v]scale=1000:400,format=yuv420p[v_scaled]",
-            "-map",
-            "[v_scaled]",
-            "-map",
-            "1:a",
-            "-c:v",
-            "libx264",
-            "-c:a",
-            "aac",
-            "-shortest",
-            "-y",
-            output_mp4.name,
-        ]
-    else:
-        ffmpeg_cmd = [
-            ffmpeg,
-            "-loop",
-            "1",
-            "-i",
-            tmp_img.name,
-            "-i",
-            audio_file,
-            "-vf",
-            f"color=c=#FFFFFF77:s={img_width}x{img_height}[bar];[0][bar]overlay=-w+(w/{duration})*t:H-h:shortest=1",  # type: ignore
-            "-t",
-            str(duration),
-            "-y",
-            output_mp4.name,
-        ]
-
-    subprocess.check_call(ffmpeg_cmd)
-    return output_mp4.name
+    return {"__type__": "update"}
 
 
 def log_message(
diff --git a/gradio/image_utils.py b/gradio/image_utils.py
index 698141d96b2ea..a0a40efcfee5f 100644
--- a/gradio/image_utils.py
+++ b/gradio/image_utils.py
@@ -1,10 +1,14 @@
 from __future__ import annotations
 
+import base64
+from io import BytesIO
 from pathlib import Path
-from typing import Literal
+from typing import Literal, cast
 
 import numpy as np
 import PIL.Image
+from gradio_client.utils import get_mimetype
+from PIL import ImageOps
 
 from gradio import processing_utils
 
@@ -97,3 +101,54 @@ def crop_scale(img: PIL.Image.Image, final_width: int, final_height: int):
     img_resized = img_cropped.resize((final_width, final_height))
 
     return img_resized
+
+
+def decode_base64_to_image(encoding: str) -> PIL.Image.Image:
+    image_encoded = processing_utils.extract_base64_data(encoding)
+    img = PIL.Image.open(BytesIO(base64.b64decode(image_encoded)))
+    try:
+        if hasattr(ImageOps, "exif_transpose"):
+            img = ImageOps.exif_transpose(img)
+    except Exception:
+        print(
+            "Failed to transpose image %s based on EXIF data.",
+            img,
+        )
+    return cast(PIL.Image.Image, img)
+
+
+def decode_base64_to_image_array(encoding: str) -> np.ndarray:
+    img = decode_base64_to_image(encoding)
+    return np.asarray(img)
+
+
+def decode_base64_to_file(encoding: str, cache_dir: str, format: str = "webp") -> str:
+    img = decode_base64_to_image(encoding)
+    return save_image(img, cache_dir, format)
+
+
+def encode_image_array_to_base64(image_array: np.ndarray) -> str:
+    with BytesIO() as output_bytes:
+        pil_image = PIL.Image.fromarray(
+            processing_utils._convert(image_array, np.uint8, force_copy=False)
+        )
+        pil_image.save(output_bytes, "JPEG")
+        bytes_data = output_bytes.getvalue()
+    base64_str = str(base64.b64encode(bytes_data), "utf-8")
+    return "data:image/jpeg;base64," + base64_str
+
+
+def encode_image_to_base64(image: PIL.Image.Image) -> str:
+    with BytesIO() as output_bytes:
+        image.save(output_bytes, "JPEG")
+        bytes_data = output_bytes.getvalue()
+    base64_str = str(base64.b64encode(bytes_data), "utf-8")
+    return "data:image/jpeg;base64," + base64_str
+
+
+def encode_image_file_to_base64(image_file: str | Path) -> str:
+    mime_type = get_mimetype(str(image_file))
+    with open(image_file, "rb") as f:
+        bytes_data = f.read()
+    base64_str = str(base64.b64encode(bytes_data), "utf-8")
+    return f"data:{mime_type};base64," + base64_str
diff --git a/gradio/interface.py b/gradio/interface.py
index e25a034498614..f3bd7a8ef8c60 100644
--- a/gradio/interface.py
+++ b/gradio/interface.py
@@ -9,7 +9,9 @@
 import os
 import warnings
 import weakref
-from typing import TYPE_CHECKING, Any, Callable, Literal, Sequence
+from collections.abc import Callable, Sequence
+from pathlib import Path
+from typing import TYPE_CHECKING, Any, Literal
 
 from gradio_client.documentation import document
 
@@ -99,21 +101,22 @@ def __init__(
         inputs: str | Component | Sequence[str | Component] | None,
         outputs: str | Component | Sequence[str | Component] | None,
         examples: list[Any] | list[list[Any]] | str | None = None,
-        cache_examples: bool | Literal["lazy"] | None = None,
+        *,
+        cache_examples: bool | None = None,
+        cache_mode: Literal["eager", "lazy"] | None = None,
         examples_per_page: int = 10,
+        example_labels: list[str] | None = None,
         live: bool = False,
         title: str | None = None,
         description: str | None = None,
         article: str | None = None,
-        thumbnail: str | None = None,
         theme: Theme | str | None = None,
-        css: str | None = None,
-        allow_flagging: Literal["never"]
+        flagging_mode: Literal["never"]
         | Literal["auto"]
         | Literal["manual"]
         | None = None,
         flagging_options: list[str] | list[tuple[str, str]] | None = None,
-        flagging_dir: str = "flagged",
+        flagging_dir: str = ".gradio/flagged",
         flagging_callback: FlaggingCallback | None = None,
         analytics_enabled: bool | None = None,
         batch: bool = False,
@@ -122,18 +125,23 @@ def __init__(
         _api_mode: bool = False,
         allow_duplication: bool = False,
         concurrency_limit: int | None | Literal["default"] = "default",
+        css: str | None = None,
+        css_paths: str | Path | Sequence[str | Path] | None = None,
         js: str | None = None,
         head: str | None = None,
+        head_paths: str | Path | Sequence[str | Path] | None = None,
         additional_inputs: str | Component | Sequence[str | Component] | None = None,
         additional_inputs_accordion: str | Accordion | None = None,
-        *,
         submit_btn: str | Button = "Submit",
         stop_btn: str | Button = "Stop",
         clear_btn: str | Button | None = "Clear",
         delete_cache: tuple[int, int] | None = None,
         show_progress: Literal["full", "minimal", "hidden"] = "full",
-        example_labels: list[str] | None = None,
         fill_width: bool = False,
+        allow_flagging: Literal["never"]
+        | Literal["auto"]
+        | Literal["manual"]
+        | None = None,
         **kwargs,
     ):
         """
@@ -142,18 +150,17 @@ def __init__(
             inputs: a single Gradio component, or list of Gradio components. Components can either be passed as instantiated objects, or referred to by their string shortcuts. The number of input components should match the number of parameters in fn. If set to None, then only the output components will be displayed.
             outputs: a single Gradio component, or list of Gradio components. Components can either be passed as instantiated objects, or referred to by their string shortcuts. The number of output components should match the number of values returned by fn. If set to None, then only the input components will be displayed.
             examples: sample inputs for the function; if provided, appear below the UI components and can be clicked to populate the interface. Should be nested list, in which the outer list consists of samples and each inner list consists of an input corresponding to each input component. A string path to a directory of examples can also be provided, but it should be within the directory with the python file running the gradio app. If there are multiple input components and a directory is provided, a log.csv file must be present in the directory to link corresponding inputs.
-            cache_examples: if True, caches examples in the server for fast runtime in examples. If "lazy", then examples are cached after their first use. If `fn` is a generator function, then the last yielded value will be used as the output. Can also be set by the GRADIO_CACHE_EXAMPLES environment variable, which takes a case-insensitive value, one of: {"true", "false", "lazy"}. The default option in HuggingFace Spaces is True. The default option elsewhere is False.
+            cache_examples: If True, caches examples in the server for fast runtime in examples. If "lazy", then examples are cached (for all users of the app) after their first use (by any user of the app). If None, will use the GRADIO_CACHE_EXAMPLES environment variable, which should be either "true" or "false". In HuggingFace Spaces, this parameter is True (as long as `fn` and `outputs` are also provided). The default option otherwise is False.
+            cache_mode: if "lazy", examples are cached after their first use. If "eager", all examples are cached at app launch. If None, will use the GRADIO_CACHE_MODE environment variable if defined, or default to "eager".
             examples_per_page: if examples are provided, how many to display per page.
             live: whether the interface should automatically rerun if any of the inputs change.
             title: a title for the interface; if provided, appears above the input and output components in large font. Also used as the tab title when opened in a browser window.
             description: a description for the interface; if provided, appears above the input and output components and beneath the title in regular font. Accepts Markdown and HTML content.
             article: an expanded article explaining the interface; if provided, appears below the input and output components in regular font. Accepts Markdown and HTML content. If it is an HTTP(S) link to a downloadable remote file, the content of this file is displayed.
-            thumbnail: this parameter has been deprecated and has no effect.
             theme: a Theme object or a string representing a theme. If a string, will look for a built-in theme with that name (e.g. "soft" or "default"), or will attempt to load a theme from the Hugging Face Hub (e.g. "gradio/monochrome"). If None, will use the Default theme.
-            css: custom css as a string or path to a css file. This css will be included in the demo webpage.
-            allow_flagging: one of "never", "auto", or "manual". If "never" or "auto", users will not see a button to flag an input and output. If "manual", users will see a button to flag. If "auto", every input the user submits will be automatically flagged, along with the generated output. If "manual", both the input and outputs are flagged when the user clicks flag button. This parameter can be set with environmental variable GRADIO_ALLOW_FLAGGING; otherwise defaults to "manual".
-            flagging_options: if provided, allows user to select from the list of options when flagging. Only applies if allow_flagging is "manual". Can either be a list of tuples of the form (label, value), where label is the string that will be displayed on the button and value is the string that will be stored in the flagging CSV; or it can be a list of strings ["X", "Y"], in which case the values will be the list of strings and the labels will ["Flag as X", "Flag as Y"], etc.
-            flagging_dir: what to name the directory where flagged data is stored.
+            flagging_mode: one of "never", "auto", or "manual". If "never" or "auto", users will not see a button to flag an input and output. If "manual", users will see a button to flag. If "auto", every input the user submits will be automatically flagged, along with the generated output. If "manual", both the input and outputs are flagged when the user clicks flag button. This parameter can be set with environmental variable GRADIO_FLAGGING_MODE; otherwise defaults to "manual".
+            flagging_options: if provided, allows user to select from the list of options when flagging. Only applies if flagging_mode is "manual". Can either be a list of tuples of the form (label, value), where label is the string that will be displayed on the button and value is the string that will be stored in the flagging CSV; or it can be a list of strings ["X", "Y"], in which case the values will be the list of strings and the labels will ["Flag as X", "Flag as Y"], etc.
+            flagging_dir: path to the the directory where flagged data is stored. If the directory does not exist, it will be created.
             flagging_callback: either None or an instance of a subclass of FlaggingCallback which will be called when a sample is flagged. If set to None, an instance of gradio.flagging.CSVLogger will be created and logs will be saved to a local CSV file in flagging_dir. Default to None.
             analytics_enabled: whether to allow basic telemetry. If None, will use GRADIO_ANALYTICS_ENABLED environment variable if defined, or default to True.
             batch: if True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
@@ -161,8 +168,11 @@ def __init__(
             api_name: defines how the endpoint appears in the API docs. Can be a string, None, or False. If set to a string, the endpoint will be exposed in the API docs with the given name. If None, the name of the prediction function will be used as the API endpoint. If False, the endpoint will not be exposed in the API docs and downstream apps (including those that `gr.load` this app) will not be able to use this event.
             allow_duplication: if True, then will show a 'Duplicate Spaces' button on Hugging Face Spaces.
             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 `.queue()`, which itself is 1 by default).
-            js: custom js as a string or path to a js file. The custom js should be in the form of a single js function. This function will automatically be executed when the page loads. For more flexibility, use the head parameter to insert js inside <script> tags.
-            head: custom html to insert into the head of the demo webpage. This can be used to add custom meta tags, scripts, stylesheets, etc. to the page.
+            css: Custom css as a code string. This css will be included in the demo webpage.
+            css_paths: Custom css as a pathlib.Path to a css file or a list of such paths. This css files will be read, concatenated, and included in the demo webpage. If the `css` parameter is also set, the css from `css` will be included first.
+            js: Custom js as a code string. The custom js should be in the form of a single js function. This function will automatically be executed when the page loads. For more flexibility, use the head parameter to insert js inside <script> tags.
+            head: Custom html code to insert into the head of the demo webpage. This can be used to add custom meta tags, multiple scripts, stylesheets, etc. to the page.
+            head_paths: Custom html code as a pathlib.Path to a html file or a list of such paths. This html files will be read, concatenated, and included in the head of the demo webpage. If the `head` parameter is also set, the html from `head` will be included first.
             additional_inputs: a single Gradio component, or list of Gradio components. Components can either be passed as instantiated objects, or referred to by their string shortcuts. These components will be rendered in an accordion below the main input components. By default, no additional input components will be displayed.
             additional_inputs_accordion: if a string is provided, this is the label of the `gr.Accordion` to use to contain additional inputs. A `gr.Accordion` object can be provided as well to configure other properties of the container holding the additional inputs. Defaults to a `gr.Accordion(label="Additional Inputs", open=False)`. This parameter is only used if `additional_inputs` is provided.
             submit_btn: the button to use for submitting inputs. Defaults to a `gr.Button("Submit", variant="primary")`. This parameter does not apply if the Interface is output-only, in which case the submit button always displays "Generate". Can be set to a string (which becomes the button label) or a `gr.Button` object (which allows for more customization).
@@ -176,11 +186,13 @@ def __init__(
         super().__init__(
             analytics_enabled=analytics_enabled,
             mode="interface",
-            css=css,
             title=title or "Gradio",
             theme=theme,
+            css=css,
+            css_paths=css_paths,
             js=js,
             head=head,
+            head_paths=head_paths,
             delete_cache=delete_cache,
             fill_width=fill_width,
             **kwargs,
@@ -219,6 +231,7 @@ def __init__(
             outputs = [outputs]
 
         self.cache_examples = cache_examples
+        self.cache_mode: Literal["eager", "lazy"] | None = cache_mode
 
         state_input_indexes = [
             idx for idx, i in enumerate(inputs) if i == "state" or isinstance(i, State)
@@ -291,7 +304,10 @@ def __init__(
 
         if len(self.input_components) == len(self.output_components):
             same_components = [
-                i is o for i, o in zip(self.input_components, self.output_components)
+                i is o
+                for i, o in zip(
+                    self.input_components, self.output_components, strict=False
+                )
             ]
             if all(same_components):
                 self.interface_type = InterfaceTypes.UNIFIED
@@ -323,8 +339,6 @@ def __init__(
             article = utils.download_if_url(article)
         self.article = article
 
-        self.thumbnail = thumbnail
-
         self.examples = examples
         self.examples_per_page = examples_per_page
         self.example_labels = example_labels
@@ -373,38 +387,26 @@ def __init__(
 
         self.simple_server = None
 
-        # For allow_flagging: (1) first check for parameter,
-        # (2) check for env variable, (3) default to True/"manual"
-        if allow_flagging is None:
-            allow_flagging = os.getenv("GRADIO_ALLOW_FLAGGING", "manual")  # type: ignore
-        if allow_flagging is True:
+        # For flagging_mode: (1) first check for `flagging_mode` parameter (or its alias `allow_flagging`),
+        # (2) check for env variable, (3) default to "manual"
+        if allow_flagging is not None:
             warnings.warn(
-                "The `allow_flagging` parameter in `Interface` now"
-                "takes a string value ('auto', 'manual', or 'never')"
-                ", not a boolean. Setting parameter to: 'manual'."
+                "The `allow_flagging` parameter in `Interface` is deprecated."
+                "Use `flagging_mode` instead."
             )
-            self.allow_flagging = "manual"
-        elif allow_flagging == "manual":
-            self.allow_flagging = "manual"
-        elif allow_flagging is False:
-            warnings.warn(
-                "The `allow_flagging` parameter in `Interface` now"
-                "takes a string value ('auto', 'manual', or 'never')"
-                ", not a boolean. Setting parameter to: 'never'."
-            )
-            self.allow_flagging = "never"
-        elif allow_flagging == "never":
-            self.allow_flagging = "never"
-        elif allow_flagging == "auto":
-            self.allow_flagging = "auto"
+            flagging_mode = allow_flagging
+        if flagging_mode is None:
+            self.flagging_mode = os.getenv("GRADIO_FLAGGING_MODE", "manual")
+        elif flagging_mode in ["manual", "never", "auto"]:
+            self.flagging_mode = flagging_mode
         else:
             raise ValueError(
-                "Invalid value for `allow_flagging` parameter."
+                "Invalid value for `flagging_mode` parameter."
                 "Must be: 'auto', 'manual', or 'never'."
             )
 
         if flagging_options is None:
-            self.flagging_options = [("Flag", "")]
+            self.flagging_options = [("Flag", None)]
         elif not (isinstance(flagging_options, list)):
             raise ValueError(
                 "flagging_options must be a list of strings or list of (string, string) tuples."
@@ -449,7 +451,9 @@ def __init__(
                     param_names.remove(param_name)
         except (TypeError, ValueError):
             param_names = utils.default_input_labels()
-        for component, param_name in zip(self.input_components, param_names):
+        for component, param_name in zip(
+            self.input_components, param_names, strict=False
+        ):
             if not isinstance(component, Component):
                 raise TypeError(
                     f"Input component must be a Component, not {type(component)}"
@@ -467,7 +471,7 @@ def __init__(
                 else:
                     component.label = f"output {i}"
 
-        if self.allow_flagging != "never":
+        if self.flagging_mode != "never":
             if self.interface_type == InterfaceTypes.UNIFIED:
                 self.flagging_callback.setup(self.input_components, self.flagging_dir)  # type: ignore
             elif self.interface_type == InterfaceTypes.INPUT_ONLY:
@@ -491,7 +495,7 @@ def __init__(
             )  # type: ignore
             input_component_column = None
 
-            with Row(equal_height=False):
+            with Row():
                 if self.interface_type in [
                     InterfaceTypes.STANDARD,
                     InterfaceTypes.INPUT_ONLY,
@@ -556,7 +560,7 @@ def render_input_column(
     ]:
         _submit_btn, _clear_btn, _stop_btn, flag_btns = None, None, None, None
 
-        with Column(variant="panel"):
+        with Column():
             input_component_column = Column()
             with input_component_column:
                 for component in self.main_input_components:
@@ -590,9 +594,9 @@ def render_input_column(
                         or inspect.isasyncgenfunction(self.fn)
                     ) and not self.live:
                         _stop_btn = Button(**self.stop_btn_parms)
-                    if self.allow_flagging == "manual":
+                    if self.flagging_mode == "manual":
                         flag_btns = self.render_flag_btns()
-                    elif self.allow_flagging == "auto":
+                    elif self.flagging_mode == "auto":
                         flag_btns = [_submit_btn]
         return (
             _submit_btn,
@@ -620,7 +624,7 @@ def render_output_column(
             None,
         )
 
-        with Column(variant="panel"):
+        with Column():
             for component in self.output_components:
                 if not (isinstance(component, State)):
                     component.render()
@@ -638,9 +642,9 @@ def render_output_column(
                         # as a proxy of whether the queue will be enabled.
                         # Using a generator function without the queue will raise an error.
                         _stop_btn = Button(**self.stop_btn_parms)
-                if self.allow_flagging == "manual":
+                if self.flagging_mode == "manual":
                     flag_btns = self.render_flag_btns()
-                elif self.allow_flagging == "auto":
+                elif self.flagging_mode == "auto":
                     if _submit_btn is None:
                         raise RenderError("Submit button not rendered")
                     flag_btns = [_submit_btn]
@@ -819,9 +823,9 @@ def attach_flagging_events(
         ):
             return
 
-        if self.allow_flagging == "auto":
+        if self.flagging_mode == "auto":
             flag_method = FlagMethod(
-                self.flagging_callback, "", "", visual_feedback=False
+                self.flagging_callback, "", None, visual_feedback=False
             )
             _submit_event.success(
                 flag_method,
@@ -838,8 +842,10 @@ def attach_flagging_events(
         else:
             flag_components = self.input_components + self.output_components
 
-        for flag_btn, (label, value) in zip(flag_btns, self.flagging_options):
-            if not isinstance(value, str):
+        for flag_btn, (label, value) in zip(
+            flag_btns, self.flagging_options, strict=False
+        ):
+            if value is not None and not isinstance(value, str):
                 raise TypeError(
                     f"Flagging option value must be a string, not {value!r}"
                 )
@@ -879,10 +885,11 @@ def render_examples(self):
             ]
             self.examples_handler = Examples(
                 examples=self.examples,
-                inputs=non_state_inputs,  # type: ignore
-                outputs=non_state_outputs,  # type: ignore
+                inputs=non_state_inputs,
+                outputs=non_state_outputs,
                 fn=self.fn,
-                cache_examples=self.cache_examples,  # type: ignore
+                cache_examples=self.cache_examples,
+                cache_mode=self.cache_mode,
                 examples_per_page=self.examples_per_page,
                 _api_mode=self.api_mode,
                 batch=self.batch,
@@ -955,7 +962,7 @@ def __init__(
                     f"<h1 style='text-align: center; margin-bottom: 1rem'>{title}</h1>"
                 )
             with Tabs():
-                for interface, tab_name in zip(interface_list, tab_names):
+                for interface, tab_name in zip(interface_list, tab_names, strict=False):
                     with Tab(label=tab_name):
                         interface.render()
 
diff --git a/gradio/layouts/form.py b/gradio/layouts/form.py
index e16283686ff23..fc260c007acbb 100644
--- a/gradio/layouts/form.py
+++ b/gradio/layouts/form.py
@@ -4,6 +4,7 @@
 
 from gradio.blocks import BlockContext, Blocks
 from gradio.component_meta import ComponentMeta
+from gradio.layouts.column import Column
 from gradio.layouts.row import Row
 
 if TYPE_CHECKING:
@@ -38,6 +39,13 @@ def add_child(self, child: Block):
             scale = getattr(child, "scale", None)
             self.scale += 1 if scale is None else scale
             self.min_width += getattr(child, "min_width", 0) or 0
+        elif (
+            isinstance(self.parent, Column)
+            and isinstance(self.parent.parent, Row)
+            and self.parent.parent.equal_height
+        ):
+            scale = getattr(child, "scale", None)
+            self.scale += 1 if scale is None else scale
         elif isinstance(self.parent, Blocks) and self.parent.fill_height:
             scale = getattr(child, "scale", None)
             self.scale += 0 if scale is None else scale
diff --git a/gradio/layouts/row.py b/gradio/layouts/row.py
index 027c151b5344d..0bcc0e47e3f85 100644
--- a/gradio/layouts/row.py
+++ b/gradio/layouts/row.py
@@ -31,7 +31,10 @@ def __init__(
         elem_id: str | None = None,
         elem_classes: list[str] | str | None = None,
         render: bool = True,
-        equal_height: bool = True,
+        height: int | str | None = None,
+        max_height: int | str | None = None,
+        min_height: int | str | None = None,
+        equal_height: bool = False,
         show_progress: bool = False,
     ):
         """
@@ -41,6 +44,9 @@ def __init__(
             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.
             elem_classes: An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.
             render: If False, this layout will not be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+            height: The height of the row, specified in pixels if a number is passed, or in CSS units if a string is passed. If content exceeds the height, the row will scroll vertically. If not set, the row will expand to fit the content.
+            max_height: The maximum height of the row, specified in pixels if a number is passed, or in CSS units if a string is passed. If content exceeds the height, the row will scroll vertically. If content is shorter than the height, the row will shrink to fit the content. Will not have any effect if `height` is set and is smaller than `max_height`.
+            min_height: The minimum height of the row, specified in pixels if a number is passed, or in CSS units if a string is passed. If content exceeds the height, the row will expand to fit the content. Will not have any effect if `height` is set and is larger than `min_height`.
             equal_height: If True, makes every child element have equal height
             show_progress: If True, shows progress animation when being updated.
         """
@@ -49,6 +55,10 @@ def __init__(
         if variant == "compact":
             self.allow_expected_parents = False
         self.show_progress = show_progress
+        self.height = height
+        self.max_height = max_height
+        self.min_height = min_height
+
         BlockContext.__init__(
             self,
             visible=visible,
diff --git a/gradio/networking.py b/gradio/networking.py
index aecbd43b2de79..400c7def6bfff 100644
--- a/gradio/networking.py
+++ b/gradio/networking.py
@@ -5,17 +5,17 @@
 
 from __future__ import annotations
 
-import ipaddress
 import os
 import time
 import warnings
+from pathlib import Path
 
 import httpx
 
 from gradio.routes import App  # HACK: to avoid circular import # noqa: F401
-from gradio.tunneling import Tunnel
+from gradio.tunneling import CERTIFICATE_PATH, Tunnel
 
-GRADIO_API_SERVER = "https://api.gradio.app/v2/tunnel-request"
+GRADIO_API_SERVER = "https://api.gradio.app/v3/tunnel-request"
 GRADIO_SHARE_SERVER_ADDRESS = os.getenv("GRADIO_SHARE_SERVER_ADDRESS")
 
 
@@ -32,25 +32,20 @@ def setup_tunnel(
             response = httpx.get(GRADIO_API_SERVER, timeout=30)
             payload = response.json()[0]
             remote_host, remote_port = payload["host"], int(payload["port"])
+            certificate = payload["root_ca"]
+            Path(CERTIFICATE_PATH).parent.mkdir(parents=True, exist_ok=True)
+            with open(CERTIFICATE_PATH, "w") as f:
+                f.write(certificate)
         except Exception as e:
             raise RuntimeError(
                 "Could not get share link from Gradio API Server."
             ) from e
-        try:
-            ipaddress.ip_address(remote_host)
-        except ValueError as e:
-            raise ValueError(
-                f"Invalid IP address received from Gradio API Server: {remote_host}"
-            ) from e
     else:
         remote_host, remote_port = share_server_address.split(":")
         remote_port = int(remote_port)
-    try:
-        tunnel = Tunnel(remote_host, remote_port, local_host, local_port, share_token)
-        address = tunnel.start_tunnel()
-        return address
-    except Exception as e:
-        raise RuntimeError(str(e)) from e
+    tunnel = Tunnel(remote_host, remote_port, local_host, local_port, share_token)
+    address = tunnel.start_tunnel()
+    return address
 
 
 def url_ok(url: str) -> bool:
diff --git a/gradio/node_server.py b/gradio/node_server.py
new file mode 100644
index 0000000000000..816d2b9e7ab3e
--- /dev/null
+++ b/gradio/node_server.py
@@ -0,0 +1,179 @@
+from __future__ import annotations
+
+import os
+import signal
+import socket
+import subprocess
+import sys
+import time
+import warnings
+from concurrent.futures import TimeoutError
+from contextlib import closing
+from pathlib import Path
+from typing import TYPE_CHECKING
+
+if TYPE_CHECKING:  # Only import for type checking (to avoid circular imports).
+    pass
+
+# By default, the local server will try to open on localhost, port 7860.
+# If that is not available, then it will try 7861, 7862, ... 7959.
+INITIAL_PORT_VALUE = int(os.getenv("GRADIO_SERVER_PORT", "7860"))
+TRY_NUM_PORTS = int(os.getenv("GRADIO_NUM_PORTS", "100"))
+LOCALHOST_NAME = os.getenv("GRADIO_SERVER_NAME", "127.0.0.1")
+
+
+def start_node_server(
+    server_name: str | None = None,
+    server_port: int | None = None,
+    node_path: str | None = None,
+) -> tuple[str | None, subprocess.Popen[bytes] | None, int | None]:
+    """Launches a local server running the provided Interface
+    Parameters:
+        server_name: to make app accessible on local network, set this to "0.0.0.0". Can be set by environment variable GRADIO_SERVER_NAME.
+        server_port: will start gradio app on this port (if available). Can be set by environment variable GRADIO_SERVER_PORT.
+        node_path: the path to the node executable. Can be set by environment variable GRADIO_NODE_PATH.
+        ssr_mode: If False, will not start the node server and will serve the SPA from the Python server
+
+    Returns:
+        server_name: the name of the server (default is "localhost")
+        node_process: the node process that is running the SSR app
+        node_port: the port the node server is running on
+    """
+
+    server_name = server_name or LOCALHOST_NAME
+
+    # Strip IPv6 brackets from the address if they exist.
+    # This is needed as http://[::1]:port/ is a valid browser address,
+    # but not a valid IPv6 address, so asyncio will throw an exception.
+    if server_name.startswith("[") and server_name.endswith("]"):
+        host = server_name[1:-1]
+    else:
+        host = server_name
+
+    server_ports = (
+        [server_port]
+        if server_port is not None
+        else range(INITIAL_PORT_VALUE + 1, INITIAL_PORT_VALUE + 1 + TRY_NUM_PORTS)
+    )
+
+    node_process, node_port = start_node_process(
+        node_path=node_path or os.getenv("GRADIO_NODE_PATH"),
+        server_name=host,
+        server_ports=server_ports,
+    )
+
+    return server_name, node_process, node_port
+
+
+GRADIO_LOCAL_DEV_MODE = os.getenv("GRADIO_LOCAL_DEV_MODE") is not None
+SSR_APP_PATH = Path(__file__).parent.joinpath("templates", "node", "build")
+
+
+def start_node_process(
+    node_path: str | None,
+    server_name: str,
+    server_ports: list[int] | range,
+) -> tuple[subprocess.Popen[bytes] | None, int | None]:
+    if GRADIO_LOCAL_DEV_MODE:
+        return None, 9876
+    if not node_path:
+        return None, None
+
+    node_process = None
+
+    for port in server_ports:
+        try:
+            # The fastest way to check if a port is available is to try to bind to it with socket.
+            # If the port is not available, socket will throw an OSError.
+            s = socket.socket()
+            s.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
+            # Really, we should be checking if (server_name, server_port) is available, but
+            # socket.bind() doesn't seem to throw an OSError with ipv6 addresses, based on my testing.
+            # Instead, we just check if the port is available on localhost.
+            s.bind((server_name, port))
+            s.close()
+
+            # Set environment variables for the Node server
+            env = os.environ
+            env["PORT"] = str(port)
+            env["HOST"] = server_name
+            if GRADIO_LOCAL_DEV_MODE:
+                env["GRADIO_LOCAL_DEV_MODE"] = "1"
+
+            register_file = Path(__file__).parent.joinpath("templates", "register.mjs")
+
+            node_process = subprocess.Popen(
+                [node_path, "--import", str(register_file), SSR_APP_PATH],
+                stdout=subprocess.DEVNULL,
+                env=env,
+            )
+
+            is_working = verify_server_startup(server_name, port, timeout=5)
+            if is_working:
+                signal.signal(
+                    signal.SIGTERM, lambda _, __: handle_sigterm(node_process)
+                )
+                signal.signal(signal.SIGINT, lambda _, __: handle_sigterm(node_process))
+
+                return node_process, port
+
+            else:
+                # If verification failed, terminate the process and try the next port
+                node_process.terminate()
+                node_process.wait(timeout=2)
+                node_process = None
+
+        except OSError:
+            continue
+        except Exception as e:
+            warnings.warn(
+                f"Unexpected error while starting Node server: {e}. Trying next port..."
+            )
+            if node_process:
+                node_process.terminate()
+                node_process = None
+            continue
+
+    # If all attempts fail
+    print(
+        f"Cannot start Node server on any port in the range {server_ports[0]}-{server_ports[-1]}."
+    )
+    print(
+        "Please install Node 18 or higher and set the environment variable GRADIO_NODE_PATH to the path of your Node executable."
+    )
+    print(
+        "You can explicitly specify a port by setting the environment variable GRADIO_NODE_PORT."
+    )
+
+    return None, None
+
+
+def attempt_connection(host: str, port: int) -> bool:
+    """Attempts a single connection to the server."""
+    try:
+        with closing(socket.create_connection((host, port), timeout=1)):
+            return True
+    except (TimeoutError, ConnectionRefusedError):
+        return False
+    except Exception:
+        return False
+
+
+def verify_server_startup(host: str, port: int, timeout: float = 5.0) -> bool:
+    """Verifies if a server is up and running by attempting to connect."""
+    start_time = time.time()
+    while time.time() - start_time < timeout:
+        try:
+            with socket.create_connection((host, port), timeout=1):
+                return True
+        except (TimeoutError, OSError):
+            time.sleep(0.1)
+    return False
+
+
+def handle_sigterm(node_process: subprocess.Popen[bytes] | None):
+    if node_process is not None:
+        print("\nStopping Node.js server...")
+        node_process.terminate()
+        node_process.wait()
+        sys.exit(0)
diff --git a/gradio/oauth.py b/gradio/oauth.py
index a866c57c2a9ec..f9a54fe592ad5 100644
--- a/gradio/oauth.py
+++ b/gradio/oauth.py
@@ -12,7 +12,7 @@
 from fastapi.responses import RedirectResponse
 from huggingface_hub import HfFolder, whoami
 
-from .utils import get_space
+from gradio.utils import get_space
 
 OAUTH_CLIENT_ID = os.environ.get("OAUTH_CLIENT_ID")
 OAUTH_CLIENT_SECRET = os.environ.get("OAUTH_CLIENT_SECRET")
@@ -23,6 +23,8 @@
 
 
 def attach_oauth(app: fastapi.FastAPI):
+    from gradio.route_utils import API_PREFIX
+
     try:
         from starlette.middleware.sessions import SessionMiddleware
     except ImportError as e:
@@ -34,10 +36,13 @@ def attach_oauth(app: fastapi.FastAPI):
     # Add `/login/huggingface`, `/login/callback` and `/logout` routes to enable OAuth in the Gradio app.
     # If the app is running in a Space, OAuth is enabled normally. Otherwise, we mock the "real" routes to make the
     # user log in with a fake user profile - without any calls to hf.co.
+    router = fastapi.APIRouter(prefix=API_PREFIX)
+    app.include_router(router)
+
     if get_space() is not None:
-        _add_oauth_routes(app)
+        _add_oauth_routes(router)
     else:
-        _add_mocked_oauth_routes(app)
+        _add_mocked_oauth_routes(router)
 
     # Session Middleware requires a secret key to sign the cookies. Let's use a hash
     # of the OAuth secret key to make it unique to the Space + updated in case OAuth
@@ -53,7 +58,7 @@ def attach_oauth(app: fastapi.FastAPI):
     )
 
 
-def _add_oauth_routes(app: fastapi.FastAPI) -> None:
+def _add_oauth_routes(app: fastapi.APIRouter) -> None:
     """Add OAuth routes to the FastAPI app (login, callback handler and logout)."""
     try:
         from authlib.integrations.base_client.errors import MismatchingStateError
@@ -69,6 +74,7 @@ def _add_oauth_routes(app: fastapi.FastAPI) -> None:
         "OAuth is required but {} environment variable is not set. Make sure you've enabled OAuth in your Space by"
         " setting `hf_oauth: true` in the Space metadata."
     )
+
     if OAUTH_CLIENT_ID is None:
         raise ValueError(msg.format("OAUTH_CLIENT_ID"))
     if OAUTH_CLIENT_SECRET is None:
@@ -151,7 +157,7 @@ async def oauth_logout(request: fastapi.Request) -> RedirectResponse:
         return _redirect_to_target(request)
 
 
-def _add_mocked_oauth_routes(app: fastapi.FastAPI) -> None:
+def _add_mocked_oauth_routes(app: fastapi.APIRouter) -> None:
     """Add fake oauth routes if Gradio is run locally and OAuth is enabled.
 
     Clicking on a gr.LoginButton will have the same behavior as in a Space (i.e. gets redirected in a new tab) but
@@ -183,8 +189,12 @@ async def oauth_redirect_callback(request: fastapi.Request) -> RedirectResponse:
     @app.get("/logout")
     async def oauth_logout(request: fastapi.Request) -> RedirectResponse:
         """Endpoint that logs out the user (e.g. delete cookie session)."""
+        from gradio.route_utils import API_PREFIX
+
         request.session.pop("oauth_info", None)
-        logout_url = str(request.url).replace("/logout", "/")  # preserve query params
+        logout_url = str(request.url).replace(
+            f"{API_PREFIX}/logout", "/"
+        )  # preserve query params
         return RedirectResponse(url=logout_url)
 
 
diff --git a/gradio/package.json b/gradio/package.json
index 0b2793b7c7a51..474eb9904ac9c 100644
--- a/gradio/package.json
+++ b/gradio/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gradio",
-	"version": "4.44.1",
+	"version": "5.0.0-beta.10",
 	"description": "",
 	"python": "true"
 }
diff --git a/gradio/pipelines_utils.py b/gradio/pipelines_utils.py
index b1908dc2918c4..a6ffa6e689410 100644
--- a/gradio/pipelines_utils.py
+++ b/gradio/pipelines_utils.py
@@ -3,7 +3,7 @@
 These are used by load_from_pipeline method in pipelines.py.
 """
 
-from typing import Any, Dict, Optional
+from typing import Any, Optional
 
 import numpy as np
 from PIL import Image
@@ -11,7 +11,7 @@
 from gradio import components
 
 
-def handle_transformers_pipeline(pipeline: Any) -> Optional[Dict[str, Any]]:
+def handle_transformers_pipeline(pipeline: Any) -> Optional[dict[str, Any]]:
     try:
         import transformers
     except ImportError as ie:
@@ -196,7 +196,7 @@ def is_transformers_pipeline_type(pipeline, class_name: str):
     raise ValueError(f"Unsupported transformers pipeline type: {type(pipeline)}")
 
 
-def handle_diffusers_pipeline(pipeline: Any) -> Optional[Dict[str, Any]]:
+def handle_diffusers_pipeline(pipeline: Any) -> Optional[dict[str, Any]]:
     try:
         import diffusers
     except ImportError as ie:
@@ -488,7 +488,7 @@ def is_diffusers_pipeline_type(pipeline, class_name: str):
     raise ValueError(f"Unsupported diffusers pipeline type: {type(pipeline)}")
 
 
-def handle_transformers_js_pipeline(pipeline: Any) -> Dict[str, Any]:
+def handle_transformers_js_pipeline(pipeline: Any) -> dict[str, Any]:
     try:
         from transformers_js_py import as_url, read_audio  # type: ignore
     except ImportError as ie:
@@ -605,7 +605,9 @@ def handle_transformers_js_pipeline(pipeline: Any) -> Dict[str, Any]:
                 text,
                 [c.strip() for c in classnames.split(",")],
             ),
-            "postprocess": lambda result: dict(zip(result["labels"], result["scores"])),
+            "postprocess": lambda result: dict(
+                zip(result["labels"], result["scores"], strict=False)
+            ),
         }
     if pipeline.task == "feature-extraction":
         return {
diff --git a/gradio/processing_utils.py b/gradio/processing_utils.py
index 81a075a2d152f..783b935917900 100644
--- a/gradio/processing_utils.py
+++ b/gradio/processing_utils.py
@@ -1,17 +1,24 @@
 from __future__ import annotations
 
+import asyncio
 import base64
 import hashlib
+import ipaddress
 import json
 import logging
 import os
 import shutil
+import socket
+import ssl
 import subprocess
 import tempfile
 import warnings
+from collections.abc import Awaitable, Callable, Coroutine
+from functools import lru_cache, wraps
 from io import BytesIO
 from pathlib import Path
-from typing import TYPE_CHECKING, Any
+from typing import TYPE_CHECKING, Any, TypeVar
+from urllib.parse import urlparse
 
 import aiofiles
 import httpx
@@ -20,9 +27,11 @@
 from PIL import Image, ImageOps, ImageSequence, PngImagePlugin
 
 from gradio import utils, wasm_utils
+from gradio.context import LocalContext
 from gradio.data_classes import FileData, GradioModel, GradioRootModel, JsonData
-from gradio.exceptions import Error
-from gradio.utils import abspath, get_upload_folder, is_in_or_equal
+from gradio.exceptions import Error, InvalidPathError
+from gradio.route_utils import API_PREFIX
+from gradio.utils import abspath, get_hash_seed, get_upload_folder, is_in_or_equal
 
 with warnings.catch_warnings():
     warnings.simplefilter("ignore")  # Ignore pydub warning if ffmpeg is not installed
@@ -34,11 +43,11 @@
 
     # NOTE: In the Wasm env, we use urllib3 to make HTTP requests. See https://github.com/gradio-app/gradio/issues/6837.
     class Urllib3ResponseSyncByteStream(httpx.SyncByteStream):
-        def __init__(self, response) -> None:
+        def __init__(self, response: urllib3.HTTPResponse) -> None:
             self.response = response
 
         def __iter__(self):
-            yield from self.response.stream()
+            yield from self.response.stream(decode_content=True)
 
     class Urllib3Transport(httpx.BaseTransport):
         def __init__(self):
@@ -58,16 +67,22 @@ def handle_request(self, request: httpx.Request) -> httpx.Response:
                 preload_content=False,  # Stream the content
             )
 
+            # HTTPX's gzip decoder sometimes fails to decode the content in the Wasm env as https://github.com/gradio-app/gradio/pull/9333#issuecomment-2348048882,
+            # so we avoid it by removing the content-encoding header passed to httpx.Response,
+            # and handle the decoding in `Urllib3ResponseSyncByteStream.__iter__()` with `urllib3`'s implementation.
+            response_headers = response.headers.copy()
+            response_headers.discard("content-encoding")
+
             return httpx.Response(
                 status_code=response.status,
-                headers=response.headers,
+                headers=response_headers,
                 stream=Urllib3ResponseSyncByteStream(response),
             )
 
     sync_transport = Urllib3Transport()
 
     class PyodideHttpResponseAsyncByteStream(httpx.AsyncByteStream):
-        def __init__(self, response) -> None:
+        def __init__(self, response: pyodide.http.FetchResponse) -> None:
             self.response = response
 
         async def __aiter__(self):
@@ -97,7 +112,6 @@ async def handle_async_request(
     async_transport = None
 
 sync_client = httpx.Client(transport=sync_transport)
-async_client = httpx.AsyncClient(transport=async_transport)
 
 log = logging.getLogger(__name__)
 
@@ -177,8 +191,12 @@ def encode_pil_to_bytes(pil_image, format="png"):
         return output_bytes.getvalue()
 
 
+hash_seed = get_hash_seed().encode("utf-8")
+
+
 def hash_file(file_path: str | Path, chunk_num_blocks: int = 128) -> str:
     sha = hashlib.sha256()
+    sha.update(hash_seed)
     with open(file_path, "rb") as f:
         for chunk in iter(lambda: f.read(chunk_num_blocks * sha.block_size), b""):
             sha.update(chunk)
@@ -187,18 +205,21 @@ def hash_file(file_path: str | Path, chunk_num_blocks: int = 128) -> str:
 
 def hash_url(url: str) -> str:
     sha = hashlib.sha256()
+    sha.update(hash_seed)
     sha.update(url.encode("utf-8"))
     return sha.hexdigest()
 
 
 def hash_bytes(bytes: bytes):
     sha = hashlib.sha256()
+    sha.update(hash_seed)
     sha.update(bytes)
     return sha.hexdigest()
 
 
 def hash_base64(base64_encoding: str, chunk_num_blocks: int = 128) -> str:
     sha = hashlib.sha256()
+    sha.update(hash_seed)
     for i in range(0, len(base64_encoding), chunk_num_blocks * sha.block_size):
         data = base64_encoding[i : i + chunk_num_blocks * sha.block_size]
         sha.update(data.encode("utf-8"))
@@ -260,43 +281,194 @@ def save_file_to_cache(file_path: str | Path, cache_dir: str) -> str:
     return full_temp_file_path
 
 
-def save_url_to_cache(url: str, cache_dir: str) -> str:
-    """Downloads a file and makes a temporary file path for a copy if does not already
-    exist. Otherwise returns the path to the existing temp file."""
-    temp_dir = hash_url(url)
-    temp_dir = Path(cache_dir) / temp_dir
+# Always return these URLs as is, without checking to see if they resolve
+# to an internal IP address. This is because Hugging Face uses DNS splitting,
+# which means that requests from HF Spaces to HF Datasets or HF Models
+# may resolve to internal IP addresses even if they are publicly accessible.
+PUBLIC_HOSTNAME_WHITELIST = ["hf.co", "huggingface.co"]
+
+
+def is_public_ip(ip: str) -> bool:
+    try:
+        ip_obj = ipaddress.ip_address(ip)
+        return not (
+            ip_obj.is_private
+            or ip_obj.is_loopback
+            or ip_obj.is_link_local
+            or ip_obj.is_multicast
+            or ip_obj.is_reserved
+        )
+    except ValueError:
+        return False
+
+
+T = TypeVar("T")
+
+
+def lru_cache_async(maxsize: int = 128):
+    def decorator(
+        async_func: Callable[..., Coroutine[Any, Any, T]],
+    ) -> Callable[..., Awaitable[T]]:
+        @lru_cache(maxsize=maxsize)
+        @wraps(async_func)
+        def wrapper(*args: Any, **kwargs: Any) -> Awaitable[T]:
+            return asyncio.create_task(async_func(*args, **kwargs))
+
+        return wrapper
+
+    return decorator
+
+
+@lru_cache_async(maxsize=256)
+async def async_resolve_hostname_google(hostname: str) -> list[str]:
+    async with httpx.AsyncClient() as client:
+        try:
+            response_v4 = await client.get(
+                f"https://dns.google/resolve?name={hostname}&type=A"
+            )
+            response_v6 = await client.get(
+                f"https://dns.google/resolve?name={hostname}&type=AAAA"
+            )
+
+            ips = []
+            for response in [response_v4.json(), response_v6.json()]:
+                ips.extend([answer["data"] for answer in response.get("Answer", [])])
+            return ips
+        except Exception:
+            return []
+
+
+class AsyncSecureTransport(httpx.AsyncHTTPTransport):
+    def __init__(self, verified_ip: str):
+        self.verified_ip = verified_ip
+        super().__init__()
+
+    async def connect(
+        self,
+        hostname: str,
+        port: int,
+        _timeout: float | None = None,
+        ssl_context: ssl.SSLContext | None = None,
+        **_kwargs: Any,
+    ):
+        loop = asyncio.get_event_loop()
+        sock = await loop.getaddrinfo(self.verified_ip, port)
+        sock = socket.socket(sock[0][0], sock[0][1])
+        await loop.sock_connect(sock, (self.verified_ip, port))
+        if ssl_context:
+            sock = ssl_context.wrap_socket(sock, server_hostname=hostname)
+        return sock
+
+
+async def async_validate_url(url: str) -> str:
+    hostname = urlparse(url).hostname
+    if not hostname:
+        raise ValueError(f"URL {url} does not have a valid hostname")
+    try:
+        loop = asyncio.get_event_loop()
+        addrinfo = await loop.getaddrinfo(hostname, None)
+    except socket.gaierror as e:
+        raise ValueError(f"Unable to resolve hostname {hostname}: {e}") from e
+
+    for family, _, _, _, sockaddr in addrinfo:
+        ip_address = sockaddr[0]
+        if family in (socket.AF_INET, socket.AF_INET6) and is_public_ip(ip_address):
+            return ip_address
+
+    if not wasm_utils.IS_WASM:
+        for ip_address in await async_resolve_hostname_google(hostname):
+            if is_public_ip(ip_address):
+                return ip_address
+
+    raise ValueError(f"Hostname {hostname} failed validation")
+
+
+async def async_get_with_secure_transport(
+    url: str, trust_hostname: bool = False
+) -> httpx.Response:
+    if wasm_utils.IS_WASM:
+        transport = PyodideHttpTransport()
+    elif trust_hostname:
+        transport = None
+    else:
+        verified_ip = await async_validate_url(url)
+        transport = AsyncSecureTransport(verified_ip)
+    async with httpx.AsyncClient(transport=transport) as client:
+        return await client.get(url, follow_redirects=False)
+
+
+async def async_ssrf_protected_download(url: str, cache_dir: str) -> str:
+    temp_dir = Path(cache_dir) / hash_url(url)
     temp_dir.mkdir(exist_ok=True, parents=True)
-    name = client_utils.strip_invalid_filename_characters(Path(url).name)
-    full_temp_file_path = str(abspath(temp_dir / name))
+    filename = client_utils.strip_invalid_filename_characters(Path(url).name)
+    full_temp_file_path = str(abspath(temp_dir / filename))
 
-    if not Path(full_temp_file_path).exists():
-        with sync_client.stream("GET", url, follow_redirects=True) as r, open(
-            full_temp_file_path, "wb"
-        ) as f:
-            for chunk in r.iter_raw():
-                f.write(chunk)
+    if Path(full_temp_file_path).exists():
+        return full_temp_file_path
+
+    parsed_url = urlparse(url)
+    hostname = parsed_url.hostname
+
+    response = await async_get_with_secure_transport(
+        url, trust_hostname=hostname in PUBLIC_HOSTNAME_WHITELIST
+    )
+
+    while response.is_redirect:
+        redirect_url = response.headers["Location"]
+        redirect_parsed = urlparse(redirect_url)
+
+        if not redirect_parsed.hostname:
+            redirect_url = f"{parsed_url.scheme}://{hostname}{redirect_url}"
+
+        response = await async_get_with_secure_transport(redirect_url)
+
+    if response.status_code != 200:
+        raise Exception(f"Failed to download file. Status code: {response.status_code}")
+
+    async with aiofiles.open(full_temp_file_path, "wb") as f:
+        async for chunk in response.aiter_bytes():
+            await f.write(chunk)
 
     return full_temp_file_path
 
 
-async def async_save_url_to_cache(url: str, cache_dir: str) -> str:
-    """Downloads a file and makes a temporary file path for a copy if does not already
-    exist. Otherwise returns the path to the existing temp file. Uses async httpx."""
-    temp_dir = hash_url(url)
-    temp_dir = Path(cache_dir) / temp_dir
+def unsafe_download(url: str, cache_dir: str) -> str:
+    temp_dir = Path(cache_dir) / hash_url(url)
     temp_dir.mkdir(exist_ok=True, parents=True)
-    name = client_utils.strip_invalid_filename_characters(Path(url).name)
-    full_temp_file_path = str(abspath(temp_dir / name))
-
-    if not Path(full_temp_file_path).exists():
-        async with async_client.stream("GET", url, follow_redirects=True) as response:
-            async with aiofiles.open(full_temp_file_path, "wb") as f:
-                async for chunk in response.aiter_raw():
-                    await f.write(chunk)
+    filename = client_utils.strip_invalid_filename_characters(Path(url).name)
+    full_temp_file_path = str(abspath(temp_dir / filename))
+
+    with (
+        sync_client.stream("GET", url, follow_redirects=True) as r,
+        open(full_temp_file_path, "wb") as f,
+    ):
+        for chunk in r.iter_raw():
+            f.write(chunk)
+
+    # print path and file size
+    print(
+        f"Downloaded {full_temp_file_path} ({os.path.getsize(full_temp_file_path)} bytes)"
+    )
+    log.info(
+        f"Downloaded {full_temp_file_path} ({os.path.getsize(full_temp_file_path)} bytes)"
+    )
 
     return full_temp_file_path
 
 
+def ssrf_protected_download(url: str, cache_dir: str) -> str:
+    if wasm_utils.IS_WASM:
+        return unsafe_download(url, cache_dir)
+    else:
+        return client_utils.synchronize_async(
+            async_ssrf_protected_download, url, cache_dir
+        )
+
+
+# Custom components created with versions of gradio < 5.0 may be using the processing_utils.save_url_to_cache method, so we alias to ssrf_protected_download to preserve backwards-compatibility
+save_url_to_cache = ssrf_protected_download
+
+
 def save_base64_to_cache(
     base64_encoding: str, cache_dir: str, file_name: str | None = None
 ) -> str:
@@ -380,14 +552,8 @@ def _move_to_cache(d: dict):
             pass
         elif not block.proxy_url:
             # If the file is on a remote server, do not move it to cache.
-            if check_in_upload_folder and not client_utils.is_http_url_like(
-                payload.path
-            ):
-                path = os.path.abspath(payload.path)
-                if not is_in_or_equal(path, get_upload_folder()):
-                    raise ValueError(
-                        f"File {path} is not in the upload folder and cannot be accessed."
-                    )
+            if not client_utils.is_http_url_like(payload.path):
+                _check_allowed(payload.path, check_in_upload_folder)
             if not payload.is_stream:
                 temp_file_path = block.move_resource_to_block_cache(payload.path)
                 if temp_file_path is None:
@@ -396,14 +562,16 @@ def _move_to_cache(d: dict):
                 if keep_in_cache:
                     block.keep_in_cache.add(payload.path)
 
-        url_prefix = "/stream/" if payload.is_stream else "/file="
+        url_prefix = (
+            f"{API_PREFIX}/stream/" if payload.is_stream else f"{API_PREFIX}/file="
+        )
         if block.proxy_url:
             proxy_url = block.proxy_url.rstrip("/")
-            url = f"/proxy={proxy_url}{url_prefix}{payload.path}"
+            url = f"{API_PREFIX}/proxy={proxy_url}{url_prefix}{payload.path}"
         elif client_utils.is_http_url_like(payload.path) or payload.path.startswith(
             f"{url_prefix}"
         ):
-            url = payload.path
+            url = f"{payload.path}"
         else:
             url = f"{url_prefix}{payload.path}"
         payload.url = url
@@ -413,7 +581,55 @@ def _move_to_cache(d: dict):
     if isinstance(data, (GradioRootModel, GradioModel)):
         data = data.model_dump()
 
-    return client_utils.traverse(data, _move_to_cache, client_utils.is_file_obj)
+    return client_utils.traverse(
+        data, _move_to_cache, client_utils.is_file_obj_with_meta
+    )
+
+
+def _check_allowed(path: str | Path, check_in_upload_folder: bool):
+    blocks = LocalContext.blocks.get()
+    if blocks is None or not blocks.has_launched:
+        return
+
+    abs_path = utils.abspath(path)
+
+    created_paths = [utils.get_upload_folder()]
+    # if check_in_upload_folder=True, we are running this during pre-process
+    # in which case only files in the upload_folder (cache_dir) are accepted
+    if check_in_upload_folder:
+        allowed_paths = []
+    else:
+        allowed_paths = blocks.allowed_paths + [os.getcwd(), tempfile.gettempdir()]
+    allowed, reason = utils.is_allowed_file(
+        abs_path,
+        blocked_paths=blocks.blocked_paths,
+        allowed_paths=allowed_paths,
+        created_paths=created_paths,
+    )
+    if not allowed:
+        msg = f"Cannot move {abs_path} to the gradio cache dir because "
+        if reason == "in_blocklist":
+            msg += f"it is located in one of the blocked_paths ({', '.join(blocks.blocked_paths)})."
+        elif check_in_upload_folder:
+            msg += "it was not uploaded by a user."
+        else:
+            msg += "it was not created by the application or it is not "
+            msg += "located in either the current working directory or your system's temp directory. "
+            msg += "To fix this error, please ensure your function returns files located in either "
+            msg += f"the current working directory ({os.getcwd()}), your system's temp directory ({tempfile.gettempdir()}) "
+            msg += f"or add {str(abs_path.parent)} to the allowed_paths parameter of launch()."
+        raise InvalidPathError(msg)
+    if (
+        utils.is_in_or_equal(abs_path, os.getcwd())
+        and abs_path.name.startswith(".")
+        and not any(
+            is_in_or_equal(path, allowed_path) for allowed_path in blocks.allowed_paths
+        )
+    ):
+        raise InvalidPathError(
+            "Dotfiles located in the temporary directory cannot be moved to the cache for security reasons. "
+            "If you'd like to specifically allow this file to be served, you can add it to the allowed_paths parameter of launch()."
+        )
 
 
 async def async_move_files_to_cache(
@@ -448,14 +664,8 @@ async def _move_to_cache(d: dict):
             pass
         elif not block.proxy_url:
             # If the file is on a remote server, do not move it to cache.
-            if check_in_upload_folder and not client_utils.is_http_url_like(
-                payload.path
-            ):
-                path = os.path.abspath(payload.path)
-                if not is_in_or_equal(path, get_upload_folder()):
-                    raise ValueError(
-                        f"File {path} is not in the upload folder and cannot be accessed."
-                    )
+            if not client_utils.is_http_url_like(payload.path):
+                _check_allowed(payload.path, check_in_upload_folder)
             if not payload.is_stream:
                 temp_file_path = await block.async_move_resource_to_block_cache(
                     payload.path
@@ -466,10 +676,12 @@ async def _move_to_cache(d: dict):
                 if keep_in_cache:
                     block.keep_in_cache.add(payload.path)
 
-        url_prefix = "/stream/" if payload.is_stream else "/file="
+        url_prefix = (
+            f"{API_PREFIX}/stream/" if payload.is_stream else f"{API_PREFIX}/file="
+        )
         if block.proxy_url:
             proxy_url = block.proxy_url.rstrip("/")
-            url = f"/proxy={proxy_url}{url_prefix}{payload.path}"
+            url = f"{API_PREFIX}/proxy={proxy_url}{url_prefix}{payload.path}"
         elif client_utils.is_http_url_like(payload.path) or payload.path.startswith(
             f"{url_prefix}"
         ):
@@ -483,7 +695,7 @@ async def _move_to_cache(d: dict):
     if isinstance(data, (GradioRootModel, GradioModel)):
         data = data.model_dump()
     return await client_utils.async_traverse(
-        data, _move_to_cache, client_utils.is_file_obj
+        data, _move_to_cache, client_utils.is_file_obj_with_meta
     )
 
 
@@ -531,7 +743,9 @@ def resize_and_crop(img, size, crop_type="center"):
 ##################
 
 
-def audio_from_file(filename, crop_min=0, crop_max=100):
+def audio_from_file(
+    filename: str, crop_min: float = 0, crop_max: float = 100
+) -> tuple[int, np.ndarray]:
     try:
         audio = AudioSegment.from_file(filename)
     except FileNotFoundError as e:
@@ -544,6 +758,12 @@ def audio_from_file(filename, crop_min=0, crop_max=100):
             else ""
         )
         raise RuntimeError(msg) from e
+    except OSError as e:
+        if wasm_utils.IS_WASM:
+            raise wasm_utils.WasmUnsupportedError(
+                "Audio format conversion is not supported in the Wasm mode."
+            ) from e
+        raise e
     if crop_min != 0 or crop_max != 100:
         audio_start = len(audio) * crop_min / 100
         audio_end = len(audio) * crop_max / 100
@@ -557,6 +777,10 @@ def audio_from_file(filename, crop_min=0, crop_max=100):
 def audio_to_file(sample_rate, data, filename, format="wav"):
     if format == "wav":
         data = convert_to_16_bit_wav(data)
+    elif wasm_utils.IS_WASM:
+        raise wasm_utils.WasmUnsupportedError(
+            "Audio formats other than .wav are not supported in the Wasm mode."
+        )
     audio = AudioSegment(
         data.tobytes(),
         frame_rate=sample_rate,
@@ -782,7 +1006,7 @@ def _scale(a, n, m, copy=True):
     #   `float32` and `float64` arrays through)
 
     if hasattr(np, "obj2sctype"):
-        is_subdtype = np.issubdtype(dtype_in, np.obj2sctype(dtype))
+        is_subdtype = np.issubdtype(dtype_in, np.obj2sctype(dtype))  # type: ignore
     else:
         is_subdtype = np.issubdtype(dtype_in, dtypeobj_out.type)
 
diff --git a/gradio/queueing.py b/gradio/queueing.py
index 3f541f16d1177..1a71fd8e8bf25 100644
--- a/gradio/queueing.py
+++ b/gradio/queueing.py
@@ -9,16 +9,16 @@
 import uuid
 from collections import defaultdict
 from queue import Queue as ThreadQueue
-from typing import TYPE_CHECKING
+from typing import TYPE_CHECKING, Literal, cast
 
 import fastapi
-from typing_extensions import Literal
 
 from gradio import route_utils, routes
 from gradio.data_classes import (
     PredictBodyInternal,
 )
 from gradio.helpers import TrackedIterable
+from gradio.route_utils import API_PREFIX
 from gradio.server_messages import (
     EstimationMessage,
     EventMessage,
@@ -28,6 +28,7 @@
     ProcessStartsMessage,
     ProgressMessage,
     ProgressUnit,
+    ServerMessage,
 )
 from gradio.utils import (
     LRUCache,
@@ -59,6 +60,21 @@ def __init__(
         self.progress: ProgressMessage | None = None
         self.progress_pending: bool = False
         self.alive = True
+        self.n_calls = 0
+        self.run_time: float = 0
+        self.signal = asyncio.Event()
+
+    @property
+    def streaming(self):
+        return self.fn.connection == "stream"
+
+    @property
+    def is_finished(self):
+        if not self.streaming:
+            raise ValueError("Cannot access if_finished during a non-streaming event")
+        if self.fn.time_limit is None:
+            return False
+        return self.run_time >= self.fn.time_limit
 
 
 class EventQueue:
@@ -98,6 +114,7 @@ def __init__(
             LRUCache(2000)
         )
         self.pending_event_ids_session: dict[str, set[str]] = {}
+        self.event_ids_to_events: dict[str, Event] = {}
         self.pending_message_lock = safe_get_lock()
         self.event_queue_per_concurrency_id: dict[str, EventQueue] = {}
         self.stopped = False
@@ -225,6 +242,7 @@ async def push(
             if body.session_hash not in self.pending_event_ids_session:
                 self.pending_event_ids_session[body.session_hash] = set()
         self.pending_event_ids_session[body.session_hash].add(event._id)
+        self.event_ids_to_events[event._id] = event
         try:
             event_queue = self.event_queue_per_concurrency_id[event.concurrency_id]
         except KeyError as e:
@@ -241,7 +259,6 @@ async def push(
         }
 
         self.broadcast_estimations(event.concurrency_id, len(event_queue.queue) - 1)
-
         return True, event._id
 
     def _cancel_asyncio_tasks(self):
@@ -436,7 +453,10 @@ def broadcast_estimations(
                 if fn not in self.process_time_per_fn:
                     time_till_available_worker = None
                     break
-                process_time = self.process_time_per_fn[fn].avg_time
+                if fn.connection == "stream":
+                    process_time = fn.time_limit or 0
+                else:
+                    process_time = self.process_time_per_fn[fn].avg_time
                 expected_end_times += [
                     start_time + process_time for start_time in start_times
                 ]
@@ -452,6 +472,13 @@ def broadcast_estimations(
                 if event.fn in self.process_time_per_fn
                 else None
             )
+
+            # eta is the time remaining from now until the result will be returned
+            # process_time_for_fn = time to run fn once worker assigned to it
+            # wait_so_far = time till event gets to the head of the queue
+            # time_till_available_worker = time for a worker to be assigned to it once its at the head
+            # For streaming events, we modify this calculation slightly to be the time until the first
+            # chunk is processed.
             rank_eta = (
                 process_time_for_fn + wait_so_far + time_till_available_worker
                 if process_time_for_fn is not None
@@ -470,7 +497,12 @@ def broadcast_estimations(
             if event_queue.concurrency_limit is None:
                 wait_so_far = 0
             elif wait_so_far is not None and process_time_for_fn is not None:
-                wait_so_far += process_time_for_fn / event_queue.concurrency_limit
+                delta = process_time_for_fn / event_queue.concurrency_limit
+                if event.streaming:
+                    delta = (
+                        time_till_available_worker or 0
+                    ) / event_queue.concurrency_limit
+                wait_so_far += delta
             else:
                 wait_so_far = None
 
@@ -479,6 +511,53 @@ def get_status(self) -> EstimationMessage:
             queue_size=len(self),
         )
 
+    @staticmethod
+    async def wait_for_event(event: Event) -> str:
+        await event.signal.wait()
+        return "signal"
+
+    @staticmethod
+    async def timeout(timeout: float) -> str:
+        await asyncio.sleep(timeout)
+        return "timeout"
+
+    @staticmethod
+    async def wait_for_event_or_timeout(
+        event: Event, timeout: float
+    ) -> Literal["signal", "timeout"]:
+        t1 = asyncio.create_task(Queue.wait_for_event(event))
+        t2 = asyncio.create_task(Queue.timeout(timeout))
+        done, _ = await asyncio.wait(
+            [t1, t2],
+            return_when=asyncio.FIRST_COMPLETED,
+        )
+        done = [d.result() for d in done]
+        event.signal.clear()
+        return cast(Literal["signal", "timeout"], done[0])
+
+    @staticmethod
+    async def wait_for_batch(
+        events: list[Event], timeouts: list[float]
+    ) -> tuple[list[Event], list[Event]]:
+        tasks = []
+        for event, timeout in zip(events, timeouts, strict=False):
+            tasks.append(
+                asyncio.create_task(Queue.wait_for_event_or_timeout(event, timeout))
+            )
+        done, _ = await asyncio.wait(
+            tasks,
+            return_when=asyncio.ALL_COMPLETED,
+        )
+        done = [d.result() for d in done]
+        awake_events = []
+        closed_events = []
+        for result, event in zip(done, events, strict=False):
+            if result == "signal":
+                awake_events.append(event)
+            else:
+                closed_events.append(event)
+        return awake_events, closed_events
+
     async def process_events(
         self, events: list[Event], batch: bool, begin_time: float
     ) -> None:
@@ -513,7 +592,10 @@ async def process_events(
 
             if batch:
                 body.data = list(
-                    zip(*[event.data.data for event in events if event.data])
+                    zip(
+                        *[event.data.data for event in events if event.data],
+                        strict=False,
+                    )
                 )
                 body.request = events[0].request
                 body.batched = True
@@ -530,9 +612,13 @@ async def process_events(
             )
             assert body.request is not None  # noqa: S101
             root_path = route_utils.get_root_url(
-                request=body.request, route_path="/queue/join", root_path=app.root_path
+                request=body.request,
+                route_path=f"{API_PREFIX}/queue/join",
+                root_path=app.root_path,
             )
+            first_iteration = 0
             try:
+                start = time.monotonic()
                 response = await route_utils.call_process_api(
                     app=app,
                     body=body,
@@ -540,7 +626,14 @@ async def process_events(
                     fn=fn,
                     root_path=root_path,
                 )
+                end = time.monotonic()
+                first_iteration = end - start
                 err = None
+                for event in awake_events:
+                    event.run_time += end - start
+                    if event.streaming:
+                        response["is_generating"] = not event.is_finished
+
             except Exception as e:
                 traceback.print_exc()
                 response = None
@@ -558,20 +651,55 @@ async def process_events(
                 old_response = response
                 old_err = err
                 while response and response.get("is_generating", False):
+                    start = time.monotonic()
                     old_response = response
                     old_err = err
                     for event in awake_events:
                         self.send_message(
                             event,
                             ProcessGeneratingMessage(
+                                msg=ServerMessage.process_generating
+                                if not event.streaming
+                                else ServerMessage.process_streaming,
                                 output=old_response,
                                 success=old_response is not None,
+                                time_limit=cast(int, fn.time_limit) - first_iteration
+                                if event.streaming
+                                else None,
                             ),
                         )
                     awake_events = [event for event in awake_events if event.alive]
                     if not awake_events:
                         return
                     try:
+                        start = time.monotonic()
+                        if awake_events[0].streaming:
+                            awake_events, closed_events = await Queue.wait_for_batch(
+                                awake_events,
+                                [cast(float, fn.time_limit) - first_iteration]
+                                * len(awake_events),
+                            )
+                            for closed_event in closed_events:
+                                self.send_message(
+                                    closed_event,
+                                    ProcessCompletedMessage(
+                                        output=response, success=True
+                                    ),
+                                )
+                        if not awake_events:
+                            break
+                        body = cast(PredictBodyInternal, awake_events[0].data)
+                        if batch:
+                            body.data = list(
+                                zip(
+                                    *[
+                                        event.data.data
+                                        for event in events
+                                        if event.data
+                                    ],
+                                    strict=False,
+                                )
+                            )
                         response = await route_utils.call_process_api(
                             app=app,
                             body=body,
@@ -579,6 +707,11 @@ async def process_events(
                             fn=fn,
                             root_path=root_path,
                         )
+                        end = time.monotonic()
+                        for event in awake_events:
+                            event.run_time += end - start
+                            if event.streaming:
+                                response["is_generating"] = not event.is_finished
                     except Exception as e:
                         traceback.print_exc()
                         response = None
@@ -600,7 +733,9 @@ async def process_events(
                 output = copy.deepcopy(response)
                 for e, event in enumerate(awake_events):
                     if batch and "data" in output:
-                        output["data"] = list(zip(*response.get("data")))[e]
+                        output["data"] = list(zip(*response.get("data"), strict=False))[
+                            e
+                        ]
                     success = response is not None
                     self.send_message(
                         event,
@@ -611,7 +746,11 @@ async def process_events(
                     )
             end_time = time.time()
             if response is not None:
-                duration = end_time - begin_time
+                duration = (
+                    end_time - begin_time
+                    if not events[0].streaming
+                    else first_iteration
+                )
                 self.process_time_per_fn[events[0].fn].add(duration)
                 for event in events:
                     self.event_analytics[event._id]["process_time"] = duration
diff --git a/gradio/renderable.py b/gradio/renderable.py
index dfa75851ecdfd..5e3b0044999d5 100644
--- a/gradio/renderable.py
+++ b/gradio/renderable.py
@@ -1,6 +1,7 @@
 from __future__ import annotations
 
-from typing import TYPE_CHECKING, Callable, List, Literal, Sequence, Union, cast
+from collections.abc import Callable, Sequence
+from typing import TYPE_CHECKING, Literal, Union, cast
 
 from gradio_client.documentation import document
 
@@ -119,7 +120,7 @@ def show_split(text):
                             btn = gr.Button("Clear")
                             btn.click(lambda: gr.Textbox(value=""), None, text)
     """
-    new_triggers = cast(Union[List[EventListener], EventListener, None], triggers)
+    new_triggers = cast(Union[list[EventListener], EventListener, None], triggers)
 
     if Context.root_block is None:
         raise ValueError("Reactive render must be inside a Blocks context.")
diff --git a/gradio/route_utils.py b/gradio/route_utils.py
index 8b89a51752bb6..a5048cd83aac1 100644
--- a/gradio/route_utils.py
+++ b/gradio/route_utils.py
@@ -9,10 +9,11 @@
 import pickle
 import re
 import shutil
-import sys
 import threading
+import uuid
 from collections import deque
-from contextlib import AsyncExitStack, asynccontextmanager
+from collections.abc import AsyncGenerator, Callable
+from contextlib import AbstractAsyncContextManager, AsyncExitStack, asynccontextmanager
 from dataclasses import dataclass as python_dataclass
 from datetime import datetime
 from pathlib import Path
@@ -20,13 +21,8 @@
 from typing import (
     TYPE_CHECKING,
     Any,
-    AsyncContextManager,
-    AsyncGenerator,
     BinaryIO,
-    Callable,
-    List,
     Optional,
-    Tuple,
     Union,
 )
 from urllib.parse import urlparse
@@ -46,19 +42,21 @@
 from gradio import processing_utils, utils
 from gradio.data_classes import (
     BlocksConfigDict,
+    MediaStreamChunk,
     PredictBody,
     PredictBodyInternal,
 )
 from gradio.exceptions import Error
-from gradio.helpers import EventData
 from gradio.state_holder import SessionState
 
 if TYPE_CHECKING:
     from gradio.blocks import BlockFunction, Blocks
+    from gradio.helpers import EventData
     from gradio.routes import App
 
 
 config_lock = threading.Lock()
+API_PREFIX = "/gradio_api"
 
 
 class Obj:
@@ -160,6 +158,7 @@ def __init__(
             username: The username of the logged in user (if auth is enabled)
             session_hash: The session hash of the current session. It is unique for each page load.
         """
+
         self.request = request
         self.username = username
         self.session_hash: str | None = session_hash
@@ -290,6 +289,8 @@ def prepare_event_data(
     blocks: Blocks,
     body: PredictBodyInternal,
 ) -> EventData:
+    from gradio.helpers import EventData
+
     target = body.trigger_id
     event_data = EventData(
         blocks.blocks.get(target) if target else None,
@@ -341,16 +342,15 @@ async def call_process_api(
         iterator = app.iterators.get(event_id) if event_id is not None else None
         if iterator is not None:  # close off any streams that are still open
             run_id = id(iterator)
-            pending_streams: dict[int, list] = (
+            pending_streams: dict[int, MediaStream] = (
                 app.get_blocks().pending_streams[session_hash].get(run_id, {})
             )
             for stream in pending_streams.values():
-                stream.append(None)
+                stream.end_stream()
         raise
 
     if batch_in_single_out:
         output["data"] = output["data"][0]
-
     return output
 
 
@@ -420,6 +420,7 @@ def __init__(
     ) -> None:
         super().__init__(file, size=size, filename=filename, headers=headers)
         self.sha = hashlib.sha256()
+        self.sha.update(processing_utils.hash_seed)
 
 
 @python_dataclass(frozen=True)
@@ -521,7 +522,7 @@ def __init__(
         self.stream = stream
         self.max_files = max_files
         self.max_fields = max_fields
-        self.items: List[Tuple[str, Union[str, UploadFile]]] = []
+        self.items: list[tuple[str, Union[str, UploadFile]]] = []
         self.upload_id = upload_id
         self.upload_progress = upload_progress
         self._current_files = 0
@@ -531,9 +532,9 @@ def __init__(
         self._current_partial_header_value: bytes = b""
         self._current_part = MultipartPart()
         self._charset = ""
-        self._file_parts_to_write: List[Tuple[MultipartPart, bytes]] = []
-        self._file_parts_to_finish: List[MultipartPart] = []
-        self._files_to_close_on_error: List[_TemporaryFileWrapper] = []
+        self._file_parts_to_write: list[tuple[MultipartPart, bytes]] = []
+        self._file_parts_to_finish: list[MultipartPart] = []
+        self._files_to_close_on_error: list[_TemporaryFileWrapper] = []
 
     def on_part_begin(self) -> None:
         self._current_part = MultipartPart()
@@ -682,7 +683,7 @@ async def parse(self) -> FormData:
 
 
 def move_uploaded_files_to_cache(files: list[str], destinations: list[str]) -> None:
-    for file, dest in zip(files, destinations):
+    for file, dest in zip(files, destinations, strict=False):
         shutil.move(file, dest)
 
 
@@ -692,14 +693,38 @@ def update_root_in_config(config: BlocksConfigDict, root: str) -> BlocksConfigDi
     root url has changed, all of the urls in the config that correspond to component
     file urls are updated to use the new root url.
     """
-    with config_lock:
-        previous_root = config.get("root")
-        if previous_root is None or previous_root != root:
-            config["root"] = root
-            config = processing_utils.add_root_url(config, root, previous_root)  # type: ignore
+    previous_root = config.get("root")
+    if previous_root is None or previous_root != root:
+        config["root"] = root
+        config = processing_utils.add_root_url(config, root, previous_root)  # type: ignore
     return config
 
 
+def update_example_values_to_use_public_url(api_info: dict[str, Any]) -> dict[str, Any]:
+    """
+    Updates the example values in the api_info dictionary to use a public url
+    """
+
+    def _add_root_url(file_dict: dict):
+        default_value = file_dict.get("parameter_default")
+        if default_value is not None and client_utils.is_file_obj_with_url(
+            default_value
+        ):
+            if client_utils.is_http_url_like(default_value["url"]):
+                return file_dict
+            # If the default value's url is not already a full public url,
+            # we use the example_input url. This makes it so that the example
+            # value for images, audio, and video components pass SSRF checks.
+            default_value["url"] = file_dict["example_input"]["url"]
+        return file_dict
+
+    return client_utils.traverse(
+        api_info,
+        _add_root_url,
+        lambda d: isinstance(d, dict) and "parameter_default" in d,
+    )
+
+
 def compare_passwords_securely(input_password: str, correct_password: str) -> bool:
     return hmac.compare_digest(input_password.encode(), correct_password.encode())
 
@@ -737,6 +762,7 @@ class CustomCORSMiddleware:
     def __init__(
         self,
         app: ASGIApp,
+        strict_cors: bool = True,
     ) -> None:
         self.app = app
         self.all_methods = ("DELETE", "GET", "HEAD", "OPTIONS", "PATCH", "POST", "PUT")
@@ -747,9 +773,12 @@ def __init__(
         }
         self.simple_headers = {"Access-Control-Allow-Credentials": "true"}
         # Any of these hosts suggests that the Gradio app is running locally.
-        # Note: "null" is a special case that happens if a Gradio app is running
-        # as an embedded web component in a local static webpage.
-        self.localhost_aliases = ["localhost", "127.0.0.1", "0.0.0.0", "null"]
+        self.localhost_aliases = ["localhost", "127.0.0.1", "0.0.0.0"]
+        if not strict_cors or os.getenv("GRADIO_LOCAL_DEV_MODE") is not None:  # type: ignore
+            # Note: "null" is a special case that happens if a Gradio app is running
+            # as an embedded web component in a local static webpage. However, it can
+            # also be used maliciously for CSRF attacks, so it is not allowed by default.
+            self.localhost_aliases.append("null")
 
     async def __call__(self, scope: Scope, receive: Receive, send: Send) -> None:
         if scope["type"] != "http":
@@ -801,6 +830,7 @@ def is_valid_origin(self, request_headers: Headers) -> bool:
         host = request_headers["Host"]
         host_name = get_hostname(host)
         origin_name = get_hostname(origin)
+
         return (
             host_name not in self.localhost_aliases
             or origin_name in self.localhost_aliases
@@ -864,20 +894,15 @@ async def _delete_state(app: App):
 @asynccontextmanager
 async def _delete_state_handler(app: App):
     """When the server launches, regularly delete expired state."""
-    # The stop event needs to get the current event loop for python 3.8
-    # but the loop parameter is deprecated for 3.8+
-    if sys.version_info < (3, 10):
-        loop = asyncio.get_running_loop()
-        app.stop_event = asyncio.Event(loop=loop)
     asyncio.create_task(_delete_state(app))
     yield
 
 
 def create_lifespan_handler(
-    user_lifespan: Callable[[App], AsyncContextManager] | None,
+    user_lifespan: Callable[[App], AbstractAsyncContextManager] | None,
     frequency: int | None = 1,
     age: int | None = 1,
-) -> Callable[[App], AsyncContextManager]:
+) -> Callable[[App], AbstractAsyncContextManager]:
     """Return a context manager that applies _lifespan_handler and user_lifespan if it exists."""
 
     @asynccontextmanager
@@ -891,3 +916,25 @@ async def _handler(app: App):
             yield
 
     return _handler
+
+
+class MediaStream:
+    def __init__(self, desired_output_format: str | None = None):
+        self.segments: list[MediaStreamChunk] = []
+        self.combined_file: str | None = None
+        self.ended = False
+        self.segment_index = 0
+        self.playlist = "#EXTM3U\n#EXT-X-PLAYLIST-TYPE:EVENT\n#EXT-X-TARGETDURATION:10\n#EXT-X-VERSION:4\n#EXT-X-MEDIA-SEQUENCE:0\n"
+        self.max_duration = 5
+        self.desired_output_format = desired_output_format
+
+    async def add_segment(self, data: MediaStreamChunk | None):
+        if not data:
+            return
+
+        segment_id = str(uuid.uuid4())
+        self.segments.append({"id": segment_id, **data})
+        self.max_duration = max(self.max_duration, data["duration"]) + 1
+
+    def end_stream(self):
+        self.ended = True
diff --git a/gradio/routes.py b/gradio/routes.py
index 3d24d16d964e1..b88ba89897e16 100644
--- a/gradio/routes.py
+++ b/gradio/routes.py
@@ -5,34 +5,26 @@
 
 import asyncio
 import contextlib
-import math
-import sys
-import warnings
-
-if sys.version_info >= (3, 9):
-    from importlib.resources import files
-else:
-    from importlib_resources import files
 import hashlib
+import importlib.resources
 import inspect
 import json
+import math
 import mimetypes
 import os
 import secrets
+import sys
 import time
 import traceback
+import warnings
+from collections.abc import AsyncIterator, Callable
 from pathlib import Path
 from queue import Empty as EmptyQueue
 from typing import (
     TYPE_CHECKING,
     Any,
-    AsyncIterator,
-    Callable,
-    Dict,
-    List,
     Literal,
     Optional,
-    Type,
     Union,
     cast,
 )
@@ -42,6 +34,7 @@
 import markupsafe
 import orjson
 from fastapi import (
+    APIRouter,
     BackgroundTasks,
     Depends,
     FastAPI,
@@ -53,9 +46,12 @@
     HTMLResponse,
     JSONResponse,
     PlainTextResponse,
+    Response,
+    StreamingResponse,
 )
 from fastapi.security import OAuth2PasswordRequestForm
 from fastapi.templating import Jinja2Templates
+from fastapi.websockets import WebSocket, WebSocketDisconnect
 from gradio_client import utils as client_utils
 from gradio_client.documentation import document
 from gradio_client.utils import ServerMessage
@@ -63,7 +59,7 @@
 from multipart.multipart import parse_options_header
 from starlette.background import BackgroundTask
 from starlette.datastructures import UploadFile as StarletteUploadFile
-from starlette.responses import RedirectResponse, StreamingResponse
+from starlette.responses import RedirectResponse
 
 import gradio
 from gradio import ranged_response, route_utils, utils, wasm_utils
@@ -81,8 +77,12 @@
     UserProvidedPath,
 )
 from gradio.exceptions import InvalidPathError
+from gradio.node_server import (
+    start_node_server,
+)
 from gradio.oauth import attach_oauth
 from gradio.route_utils import (  # noqa: F401
+    API_PREFIX,
     CustomCORSMiddleware,
     FileUploadProgress,
     FileUploadProgressNotQueuedError,
@@ -105,7 +105,12 @@
     UnexpectedErrorMessage,
 )
 from gradio.state_holder import StateHolder
-from gradio.utils import cancel_tasks, get_package_version, get_upload_folder
+from gradio.utils import (
+    cancel_tasks,
+    get_node_path,
+    get_package_version,
+    get_upload_folder,
+)
 
 if TYPE_CHECKING:
     from gradio.blocks import Block
@@ -115,15 +120,19 @@
 
 STATIC_TEMPLATE_LIB = cast(
     DeveloperPath,
-    files("gradio").joinpath("templates").as_posix(),  # type: ignore
+    importlib.resources.files("gradio").joinpath("templates").as_posix(),  # type: ignore
 )
 STATIC_PATH_LIB = cast(
     DeveloperPath,
-    files("gradio").joinpath("templates", "frontend", "static").as_posix(),  # type: ignore
+    importlib.resources.files("gradio")
+    .joinpath("templates/frontend/static")
+    .as_posix(),  # type: ignore
 )
 BUILD_PATH_LIB = cast(
     DeveloperPath,
-    files("gradio").joinpath("templates", "frontend", "assets").as_posix(),  # type: ignore
+    importlib.resources.files("gradio")
+    .joinpath("templates/frontend/assets")
+    .as_posix(),  # type: ignore
 )
 VERSION = get_package_version()
 XSS_SAFE_MIMETYPES = {
@@ -174,7 +183,13 @@ def toorjson(value):
 templates = Jinja2Templates(directory=STATIC_TEMPLATE_LIB)
 templates.env.filters["toorjson"] = toorjson
 
-client = httpx.AsyncClient()
+client = httpx.AsyncClient(
+    limits=httpx.Limits(
+        max_connections=100,
+        max_keepalive_connections=20,
+    ),
+    timeout=httpx.Timeout(10.0),
+)
 
 file_upload_statuses = FileUploadProgress()
 
@@ -184,6 +199,8 @@ class App(FastAPI):
     FastAPI App Wrapper
     """
 
+    app_port = None
+
     def __init__(
         self,
         auth_dependency: Callable[[fastapi.Request], str | None] | None = None,
@@ -210,6 +227,7 @@ def __init__(
         self.auth_dependency = auth_dependency
         self.api_info = None
         self.all_app_info = None
+
         # Allow user to manually set `docs_url` and `redoc_url`
         # when instantiating an App; when they're not set, disable docs and redoc.
         kwargs.setdefault("docs_url", None)
@@ -217,6 +235,52 @@ def __init__(
         self.custom_component_hashes: dict[str, str] = {}
         super().__init__(**kwargs)
 
+    # Create a single client to be reused across requests
+    # We're not overriding any defaults here
+
+    client = httpx.AsyncClient()
+
+    @staticmethod
+    async def proxy_to_node(
+        request: fastapi.Request,
+        server_name: str,
+        node_port: int,
+        python_port: int,
+        scheme: str = "http",
+        mounted_path: str = "",
+    ) -> Response:
+        full_path = request.url.path
+        if mounted_path:
+            full_path = full_path.replace(mounted_path, "")
+        if request.url.query:
+            full_path += f"?{request.url.query}"
+
+        url = f"{scheme}://{server_name}:{node_port}{full_path}"
+
+        server_url = f"{scheme}://{server_name}"
+        if python_port:
+            server_url += f":{python_port}"
+        if mounted_path:
+            server_url += mounted_path
+
+        headers = dict(request.headers)
+        headers["x-gradio-server"] = server_url
+        headers["x-gradio-port"] = str(python_port)
+
+        if os.getenv("GRADIO_LOCAL_DEV_MODE"):
+            headers["x-gradio-local-dev-mode"] = "1"
+
+        new_request = App.client.build_request(
+            request.method, httpx.URL(url), headers=headers
+        )
+        node_response = await App.client.send(new_request)
+
+        return Response(
+            content=node_response.content,
+            status_code=node_response.status_code,
+            headers=dict(node_response.headers),
+        )
+
     def configure_app(self, blocks: gradio.Blocks) -> None:
         auth = blocks.auth
         if auth is not None:
@@ -264,8 +328,10 @@ def _cancel_asyncio_tasks(self):
     @staticmethod
     def create_app(
         blocks: gradio.Blocks,
-        app_kwargs: Dict[str, Any] | None = None,
+        app_kwargs: dict[str, Any] | None = None,
         auth_dependency: Callable[[fastapi.Request], str | None] | None = None,
+        strict_cors: bool = True,
+        ssr_mode: bool = False,
     ) -> App:
         app_kwargs = app_kwargs or {}
         app_kwargs.setdefault("default_response_class", ORJSONResponse)
@@ -273,14 +339,57 @@ def create_app(
         app_kwargs["lifespan"] = create_lifespan_handler(
             app_kwargs.get("lifespan", None), *delete_cache
         )
-        app = App(auth_dependency=auth_dependency, **app_kwargs)
+        app = App(auth_dependency=auth_dependency, **app_kwargs, debug=True)
+        router = APIRouter(prefix=API_PREFIX)
+
         app.configure_app(blocks)
 
         if not wasm_utils.IS_WASM:
-            app.add_middleware(CustomCORSMiddleware)
+            app.add_middleware(CustomCORSMiddleware, strict_cors=strict_cors)
+
+        if ssr_mode:
+
+            @app.middleware("http")
+            async def conditional_routing_middleware(
+                request: fastapi.Request, call_next
+            ):
+                custom_mount_path = blocks.custom_mount_path
+                path = (
+                    request.url.path.replace(blocks.custom_mount_path or "", "")
+                    if custom_mount_path is not None
+                    else request.url.path
+                )
+
+                if (
+                    getattr(blocks, "node_process", None) is not None
+                    and blocks.node_port is not None
+                    and not path.startswith("/gradio_api")
+                    and path not in ["/config", "/login", "/favicon.ico"]
+                    and not path.startswith("/theme")
+                    and not path.startswith("/svelte")
+                    and not path.startswith("/static")
+                ):
+                    if App.app_port is None:
+                        App.app_port = request.url.port or int(
+                            os.getenv("GRADIO_SERVER_PORT", "7860")
+                        )
 
-        @app.get("/user")
-        @app.get("/user/")
+                    try:
+                        return await App.proxy_to_node(
+                            request,
+                            blocks.node_server_name or "0.0.0.0",
+                            blocks.node_port,
+                            App.app_port,
+                            request.url.scheme,
+                            custom_mount_path or "",
+                        )
+                    except Exception as e:
+                        print(e)
+                response = await call_next(request)
+                return response
+
+        @router.get("/user")
+        @router.get("/user/")
         def get_current_user(request: fastapi.Request) -> Optional[str]:
             if app.auth_dependency is not None:
                 return app.auth_dependency(request)
@@ -289,8 +398,8 @@ def get_current_user(request: fastapi.Request) -> Optional[str]:
             ) or request.cookies.get(f"access-token-unsecure-{app.cookie_id}")
             return app.tokens.get(token)
 
-        @app.get("/login_check")
-        @app.get("/login_check/")
+        @router.get("/login_check")
+        @router.get("/login_check/")
         def login_check(user: str = Depends(get_current_user)):
             if (app.auth is None and app.auth_dependency is None) or user is not None:
                 return
@@ -298,18 +407,18 @@ def login_check(user: str = Depends(get_current_user)):
                 status_code=status.HTTP_401_UNAUTHORIZED, detail="Not authenticated"
             )
 
-        @app.get("/token")
-        @app.get("/token/")
+        @router.get("/token")
+        @router.get("/token/")
         def get_token(request: fastapi.Request) -> dict:
             token = request.cookies.get(f"access-token-{app.cookie_id}")
             return {"token": token, "user": app.tokens.get(token)}
 
-        @app.get("/app_id")
-        @app.get("/app_id/")
+        @router.get("/app_id")
+        @router.get("/app_id/")
         def app_id(request: fastapi.Request) -> dict:  # noqa: ARG001
             return {"app_id": app.get_blocks().app_id}
 
-        @app.get("/dev/reload", dependencies=[Depends(login_check)])
+        @router.get("/dev/reload", dependencies=[Depends(login_check)])
         async def notify_changes(
             request: fastapi.Request,
         ):
@@ -400,6 +509,15 @@ def logout(user: str = Depends(get_current_user)):
         # Main Routes
         ###############
 
+        @app.get("/svelte/{path:path}")
+        def _(path: str):
+            svelte_path = Path(BUILD_PATH_LIB) / "svelte"
+            return FileResponse(
+                routes_safe_join(
+                    DeveloperPath(str(svelte_path)), UserProvidedPath(path)
+                )
+            )
+
         @app.head("/", response_class=HTMLResponse)
         @app.get("/", response_class=HTMLResponse)
         def main(request: fastapi.Request, user: str = Depends(get_current_user)):
@@ -409,7 +527,7 @@ def main(request: fastapi.Request, user: str = Depends(get_current_user)):
                 request=request, route_path="/", root_path=app.root_path
             )
             if (app.auth is None and app.auth_dependency is None) or user is not None:
-                config = blocks.config
+                config = utils.safe_deepcopy(blocks.config)
                 config = route_utils.update_root_in_config(config, root)
                 config["username"] = user
             elif app.auth_dependency:
@@ -428,7 +546,7 @@ def main(request: fastapi.Request, user: str = Depends(get_current_user)):
                 template = (
                     "frontend/share.html" if blocks.share else "frontend/index.html"
                 )
-                gradio_api_info = api_info(False)
+                gradio_api_info = api_info(request)
                 return templates.TemplateResponse(
                     template,
                     {
@@ -449,21 +567,24 @@ def main(request: fastapi.Request, user: str = Depends(get_current_user)):
                         "the frontend by running /scripts/build_frontend.sh"
                     ) from err
 
-        @app.get("/info/", dependencies=[Depends(login_check)])
-        @app.get("/info", dependencies=[Depends(login_check)])
-        def api_info(all_endpoints: bool = False):
+        @router.get("/info/", dependencies=[Depends(login_check)])
+        @router.get("/info", dependencies=[Depends(login_check)])
+        def api_info(request: fastapi.Request):
+            all_endpoints = request.query_params.get("all_endpoints", False)
             if all_endpoints:
                 if not app.all_app_info:
                     app.all_app_info = app.get_blocks().get_api_info(all_endpoints=True)
                 return app.all_app_info
             if not app.api_info:
-                app.api_info = app.get_blocks().get_api_info()
+                api_info = cast(dict[str, Any], app.get_blocks().get_api_info())
+                api_info = route_utils.update_example_values_to_use_public_url(api_info)
+                app.api_info = api_info
             return app.api_info
 
         @app.get("/config/", dependencies=[Depends(login_check)])
         @app.get("/config", dependencies=[Depends(login_check)])
         def get_config(request: fastapi.Request):
-            config = app.get_blocks().config
+            config = utils.safe_deepcopy(app.get_blocks().config)
             root = route_utils.get_root_url(
                 request=request, route_path="/config", root_path=app.root_path
             )
@@ -476,10 +597,18 @@ def static_resource(path: str):
             static_file = routes_safe_join(STATIC_PATH_LIB, UserProvidedPath(path))
             return FileResponse(static_file)
 
-        @app.get("/custom_component/{id}/{type}/{file_name}")
+        @router.get("/custom_component/{id}/{environment}/{type}/{file_name}")
         def custom_component_path(
-            id: str, type: str, file_name: str, req: fastapi.Request
+            id: str,
+            environment: Literal["client", "server"],
+            type: str,
+            file_name: str,
+            req: fastapi.Request,
         ):
+            if environment not in ["client", "server"]:
+                raise HTTPException(
+                    status_code=404, detail="Environment not supported."
+                )
             config = app.get_blocks().config
             components = config["components"]
             location = next(
@@ -496,16 +625,25 @@ def custom_component_path(
             if module_path is None or component_instance is None:
                 raise HTTPException(status_code=404, detail="Component not found.")
 
-            requested_path = utils.safe_join(
-                component_instance.__class__.TEMPLATE_DIR,
-                UserProvidedPath(f"{type}/{file_name}"),
-            )
+            try:
+                requested_path = utils.safe_join(
+                    component_instance.__class__.TEMPLATE_DIR,
+                    UserProvidedPath(f"{type}/{file_name}"),
+                )
+            except InvalidPathError:
+                raise HTTPException(
+                    status_code=404, detail="Component not found."
+                ) from None
 
             path = routes_safe_join(
                 DeveloperPath(str(Path(module_path).parent)),
                 UserProvidedPath(requested_path),
             )
 
+            # Uncomment when we support custom component SSR
+            # if environment == "server":
+            #     return PlainTextResponse(path)
+
             key = f"{id}-{type}-{file_name}"
 
             if key not in app.custom_component_hashes:
@@ -536,8 +674,8 @@ async def favicon():
             else:
                 return FileResponse(blocks.favicon_path)
 
-        @app.head("/proxy={url_path:path}", dependencies=[Depends(login_check)])
-        @app.get("/proxy={url_path:path}", dependencies=[Depends(login_check)])
+        @router.head("/proxy={url_path:path}", dependencies=[Depends(login_check)])
+        @router.get("/proxy={url_path:path}", dependencies=[Depends(login_check)])
         async def reverse_proxy(url_path: str):
             # Adapted from: https://github.com/tiangolo/fastapi/issues/1788
             try:
@@ -556,8 +694,8 @@ async def reverse_proxy(url_path: str):
                 background=BackgroundTask(rp_resp.aclose),
             )
 
-        @app.head("/file={path_or_url:path}", dependencies=[Depends(login_check)])
-        @app.get("/file={path_or_url:path}", dependencies=[Depends(login_check)])
+        @router.head("/file={path_or_url:path}", dependencies=[Depends(login_check)])
+        @router.get("/file={path_or_url:path}", dependencies=[Depends(login_check)])
         async def file(path_or_url: str, request: fastapi.Request):
             blocks = app.get_blocks()
             if client_utils.is_http_url_like(path_or_url):
@@ -569,47 +707,23 @@ async def file(path_or_url: str, request: fastapi.Request):
                 raise HTTPException(403, f"File not allowed: {path_or_url}.")
 
             abs_path = utils.abspath(path_or_url)
-
-            in_blocklist = any(
-                utils.is_in_or_equal(abs_path, blocked_path)
-                for blocked_path in blocks.blocked_paths
-            )
-
-            is_dir = abs_path.is_dir()
-
-            if is_dir or in_blocklist:
+            if abs_path.is_dir() or not abs_path.exists():
                 raise HTTPException(403, f"File not allowed: {path_or_url}.")
 
-            created_by_app = False
-            for temp_file_set in blocks.temp_file_sets:
-                if abs_path in temp_file_set:
-                    created_by_app = True
-                    break
-            in_allowlist = any(
-                utils.is_in_or_equal(abs_path, allowed_path)
-                for allowed_path in blocks.allowed_paths
-            )
-            is_static_file = utils.is_static_file(abs_path)
-            was_uploaded = utils.is_in_or_equal(abs_path, app.uploaded_file_dir)
-            is_cached_example = utils.is_in_or_equal(
-                abs_path, utils.abspath(utils.get_cache_folder())
-            )
+            from gradio.data_classes import _StaticFiles
 
-            if not (
-                created_by_app
-                or in_allowlist
-                or was_uploaded
-                or is_cached_example
-                or is_static_file
-            ):
+            allowed, reason = utils.is_allowed_file(
+                abs_path,
+                blocked_paths=blocks.blocked_paths,
+                allowed_paths=blocks.allowed_paths + _StaticFiles.all_paths,
+                created_paths=[app.uploaded_file_dir, utils.get_cache_folder()],
+            )
+            if not allowed:
                 raise HTTPException(403, f"File not allowed: {path_or_url}.")
 
-            if not abs_path.exists():
-                raise HTTPException(404, f"File not found: {path_or_url}.")
-
             mime_type, _ = mimetypes.guess_type(abs_path)
-            if mime_type in XSS_SAFE_MIMETYPES:
-                media_type = mime_type
+            if mime_type in XSS_SAFE_MIMETYPES or reason == "allowed":
+                media_type = mime_type or "application/octet-stream"
                 content_disposition_type = "inline"
             else:
                 media_type = "application/octet-stream"
@@ -641,55 +755,126 @@ async def file(path_or_url: str, request: fastapi.Request):
                 filename=abs_path.name,
             )
 
-        @app.get(
-            "/stream/{session_hash}/{run}/{component_id}",
-            dependencies=[Depends(login_check)],
-        )
-        async def stream(
-            session_hash: str,
-            run: int,
-            component_id: int,
-            request: fastapi.Request,  # noqa: ARG001
+        @router.post("/stream/{event_id}")
+        async def _(event_id: str, body: PredictBody, request: fastapi.Request):
+            event = app.get_blocks()._queue.event_ids_to_events[event_id]
+            body = PredictBodyInternal(**body.model_dump(), request=request)
+            event.data = body
+            event.signal.set()
+            return {"msg": "success"}
+
+        @router.websocket("/stream/{event_id}")
+        async def websocket_endpoint(websocket: WebSocket, event_id: str):
+            await websocket.accept()
+            try:
+                while True:
+                    data = await websocket.receive_json()
+                    body = PredictBody(**data)
+                    event = app.get_blocks()._queue.event_ids_to_events[event_id]
+                    body_internal = PredictBodyInternal(
+                        **body.model_dump(), request=None
+                    )
+                    event.data = body_internal
+                    event.signal.set()
+                    await websocket.send_json({"msg": "success"})
+            except WebSocketDisconnect:
+                pass
+
+        @router.post("/stream/{event_id}/close")
+        async def _(event_id: str):
+            event = app.get_blocks()._queue.event_ids_to_events[event_id]
+            event.run_time = math.inf
+            event.signal.set()
+            return {"msg": "success"}
+
+        @router.get("/stream/{session_hash}/{run}/{component_id}/playlist.m3u8")
+        async def _(session_hash: str, run: int, component_id: int):
+            stream: route_utils.MediaStream | None = (
+                app.get_blocks()
+                .pending_streams[session_hash]
+                .get(run, {})
+                .get(component_id, None)
+            )
+
+            if not stream:
+                return Response(status_code=404)
+
+            playlist = f"#EXTM3U\n#EXT-X-PLAYLIST-TYPE:EVENT\n#EXT-X-TARGETDURATION:{stream.max_duration}\n#EXT-X-VERSION:4\n#EXT-X-MEDIA-SEQUENCE:0\n"
+
+            for segment in stream.segments:
+                playlist += f"#EXTINF:{segment['duration']:.3f},\n"
+                playlist += f"{segment['id']}{segment['extension']}\n"  # type: ignore
+
+            if stream.ended:
+                playlist += "#EXT-X-ENDLIST\n"
+
+            return Response(
+                content=playlist, media_type="application/vnd.apple.mpegurl"
+            )
+
+        @router.get("/stream/{session_hash}/{run}/{component_id}/{segment_id}.{ext}")
+        async def _(
+            session_hash: str, run: int, component_id: int, segment_id: str, ext: str
         ):
-            stream: list = (
+            if ext not in ["aac", "ts"]:
+                return Response(status_code=400, content="Unsupported file extension")
+            stream: route_utils.MediaStream | None = (
                 app.get_blocks()
                 .pending_streams[session_hash]
                 .get(run, {})
                 .get(component_id, None)
             )
-            if stream is None:
-                raise HTTPException(404, "Stream not found.")
 
-            def stream_wrapper():
-                check_stream_rate = 0.01
-                max_wait_time = 120  # maximum wait between yields - assume generator thread has crashed otherwise.
-                wait_time = 0
-                while True:
-                    if len(stream) == 0:
-                        if wait_time > max_wait_time:
-                            return
-                        wait_time += check_stream_rate
-                        time.sleep(check_stream_rate)
-                        continue
-                    wait_time = 0
-                    next_stream = stream.pop(0)
-                    if next_stream is None:
-                        return
-                    yield next_stream
+            if not stream:
+                return Response(status_code=404, content="Stream not found")
+
+            segment = next((s for s in stream.segments if s["id"] == segment_id), None)  # type: ignore
+
+            if segment is None:
+                return Response(status_code=404, content="Segment not found")
+
+            if ext == "aac":
+                return Response(content=segment["data"], media_type="audio/aac")
+            else:
+                return Response(content=segment["data"], media_type="video/MP2T")
 
-            return StreamingResponse(stream_wrapper())
+        @router.get("/stream/{session_hash}/{run}/{component_id}/playlist-file")
+        async def _(session_hash: str, run: int, component_id: int):
+            stream: route_utils.MediaStream | None = (
+                app.get_blocks()
+                .pending_streams[session_hash]
+                .get(run, {})
+                .get(component_id, None)
+            )
 
-        @app.get("/file/{path:path}", dependencies=[Depends(login_check)])
+            if not stream:
+                return Response(status_code=404)
+
+            if not stream.combined_file:
+                stream_data = [s["data"] for s in stream.segments]
+                combined_file = (
+                    await app.get_blocks()
+                    .get_component(component_id)
+                    .combine_stream(  # type: ignore
+                        stream_data,
+                        only_file=True,
+                        desired_output_format=stream.desired_output_format,
+                    )
+                )
+                stream.combined_file = combined_file.path
+            return FileResponse(stream.combined_file)
+
+        @router.get("/file/{path:path}", dependencies=[Depends(login_check)])
         async def file_deprecated(path: str, request: fastapi.Request):
             return await file(path, request)
 
-        @app.post("/reset/")
-        @app.post("/reset")
+        @router.post("/reset/")
+        @router.post("/reset")
         async def reset_iterator(body: ResetBody):  # noqa: ARG001
             # No-op, all the cancelling/reset logic handled by /cancel
             return {"success": True}
 
-        @app.get("/heartbeat/{session_hash}")
+        @router.get("/heartbeat/{session_hash}")
         def heartbeat(
             session_hash: str,
             request: fastapi.Request,
@@ -728,7 +913,7 @@ async def iterator():
                         req = Request(request, username, session_hash=session_hash)
                         root_path = route_utils.get_root_url(
                             request=request,
-                            route_path=f"/hearbeat/{session_hash}",
+                            route_path=f"{API_PREFIX}/hearbeat/{session_hash}",
                             root_path=app.root_path,
                         )
                         body = PredictBodyInternal(
@@ -753,15 +938,25 @@ async def iterator():
                         # This will mark the state to be deleted in an hour
                         if session_hash in app.state_holder.session_data:
                             app.state_holder.session_data[session_hash].is_closed = True
+                        for (
+                            event_id
+                        ) in app.get_blocks()._queue.pending_event_ids_session.get(
+                            session_hash, []
+                        ):
+                            event = app.get_blocks()._queue.event_ids_to_events[
+                                event_id
+                            ]
+                            event.run_time = math.inf
+                            event.signal.set()
                         return
 
             return StreamingResponse(iterator(), media_type="text/event-stream")
 
         # had to use '/run' endpoint for Colab compatibility, '/api' supported for backwards compatibility
-        @app.post("/run/{api_name}", dependencies=[Depends(login_check)])
-        @app.post("/run/{api_name}/", dependencies=[Depends(login_check)])
-        @app.post("/api/{api_name}", dependencies=[Depends(login_check)])
-        @app.post("/api/{api_name}/", dependencies=[Depends(login_check)])
+        @router.post("/run/{api_name}", dependencies=[Depends(login_check)])
+        @router.post("/run/{api_name}/", dependencies=[Depends(login_check)])
+        @router.post("/api/{api_name}", dependencies=[Depends(login_check)])
+        @router.post("/api/{api_name}/", dependencies=[Depends(login_check)])
         async def predict(
             api_name: str,
             body: PredictBody,
@@ -785,7 +980,9 @@ async def predict(
                 request=request,
             )
             root_path = route_utils.get_root_url(
-                request=request, route_path=f"/api/{api_name}", root_path=app.root_path
+                request=request,
+                route_path=f"{API_PREFIX}/api/{api_name}",
+                root_path=app.root_path,
             )
             try:
                 output = await route_utils.call_process_api(
@@ -804,8 +1001,8 @@ async def predict(
                 )
             return output
 
-        @app.post("/call/{api_name}", dependencies=[Depends(login_check)])
-        @app.post("/call/{api_name}/", dependencies=[Depends(login_check)])
+        @router.post("/call/{api_name}", dependencies=[Depends(login_check)])
+        @router.post("/call/{api_name}/", dependencies=[Depends(login_check)])
         async def simple_predict_post(
             api_name: str,
             body: SimplePredictBody,
@@ -819,7 +1016,7 @@ async def simple_predict_post(
             full_body.fn_index = fn._id
             return await queue_join_helper(full_body, request, username)
 
-        @app.post("/queue/join", dependencies=[Depends(login_check)])
+        @router.post("/queue/join", dependencies=[Depends(login_check)])
         async def queue_join(
             body: PredictBody,
             request: fastapi.Request,
@@ -860,7 +1057,7 @@ async def queue_join_helper(
                 raise HTTPException(status_code=status_code, detail=event_id)
             return {"event_id": event_id}
 
-        @app.post("/cancel")
+        @router.post("/cancel")
         async def cancel_event(body: CancelBody):
             await cancel_tasks({f"{body.session_hash}_{body.fn_index}"})
             blocks = app.get_blocks()
@@ -885,7 +1082,7 @@ async def cancel_event(body: CancelBody):
                     app.iterators_to_reset.add(body.event_id)
             return {"success": True}
 
-        @app.get("/call/{api_name}/{event_id}", dependencies=[Depends(login_check)])
+        @router.get("/call/{api_name}/{event_id}", dependencies=[Depends(login_check)])
         async def simple_predict_get(
             request: fastapi.Request,
             event_id: str,
@@ -910,7 +1107,7 @@ def process_msg(message: EventMessage) -> str | None:
 
             return await queue_data_helper(request, event_id, process_msg)
 
-        @app.get("/queue/data", dependencies=[Depends(login_check)])
+        @router.get("/queue/data", dependencies=[Depends(login_check)])
         async def queue_data(
             request: fastapi.Request,
             session_hash: str,
@@ -1064,11 +1261,11 @@ async def get_item_or_file(
                         detail="Invalid JSON body.",
                     ) from None
 
-        @app.post(
+        @router.post(
             "/component_server",
             dependencies=[Depends(login_check)],
         )
-        @app.post(
+        @router.post(
             "/component_server/",
             dependencies=[Depends(login_check)],
         )
@@ -1089,9 +1286,12 @@ async def component_server(
                     status_code=status.HTTP_404_NOT_FOUND,
                     detail="Function not found.",
                 )
-            return fn(body.data)
+            if inspect.iscoroutinefunction(fn):
+                return await fn(body.data)
+            else:
+                return fn(body.data)
 
-        @app.get(
+        @router.get(
             "/queue/status",
             dependencies=[Depends(login_check)],
             response_model=EstimationMessage,
@@ -1099,7 +1299,7 @@ async def component_server(
         async def get_queue_status():
             return app.get_blocks()._queue.get_status()
 
-        @app.get("/upload_progress")
+        @router.get("/upload_progress")
         def get_upload_progress(upload_id: str, request: fastapi.Request):
             async def sse_stream(request: fastapi.Request):
                 last_heartbeat = time.perf_counter()
@@ -1140,7 +1340,7 @@ async def sse_stream(request: fastapi.Request):
                 media_type="text/event-stream",
             )
 
-        @app.post("/upload", dependencies=[Depends(login_check)])
+        @router.post("/upload", dependencies=[Depends(login_check)])
         async def upload_file(
             request: fastapi.Request,
             bg_tasks: BackgroundTasks,
@@ -1212,15 +1412,16 @@ async def upload_file(
                 )
             return output_files
 
-        @app.on_event("startup")
-        @app.get("/startup-events")
+        @router.get("/startup-events")
         async def startup_events():
             if not app.startup_events_triggered:
-                app.get_blocks().startup_events()
+                app.get_blocks().run_startup_events()
+                await app.get_blocks().run_extra_startup_events()
                 app.startup_events_triggered = True
                 return True
             return False
 
+        @router.get("/theme.css", response_class=PlainTextResponse)
         @app.get("/theme.css", response_class=PlainTextResponse)
         def theme_css():
             return PlainTextResponse(app.get_blocks().theme_css, media_type="text/css")
@@ -1232,20 +1433,22 @@ def robots_txt():
             else:
                 return "User-agent: *\nDisallow: "
 
-        @app.get("/monitoring", dependencies=[Depends(login_check)])
+        @router.get("/monitoring", dependencies=[Depends(login_check)])
         async def analytics_login(request: fastapi.Request):
             if not blocks.enable_monitoring:
                 raise HTTPException(
                     status_code=403, detail="Monitoring is not enabled."
                 )
             root_url = route_utils.get_root_url(
-                request=request, route_path="/monitoring", root_path=app.root_path
+                request=request,
+                route_path=f"{API_PREFIX}/monitoring",
+                root_path=app.root_path,
             )
             monitoring_url = f"{root_url}/monitoring/{app.analytics_key}"
             print(f"* Monitoring URL: {monitoring_url} *")
             return HTMLResponse("See console for monitoring URL.")
 
-        @app.get("/monitoring/{key}")
+        @router.get("/monitoring/{key}")
         async def analytics_dashboard(key: str):
             if not blocks.enable_monitoring:
                 raise HTTPException(
@@ -1268,6 +1471,8 @@ async def analytics_dashboard(key: str):
             else:
                 raise HTTPException(status_code=403, detail="Invalid key.")
 
+        app.include_router(router)
+
         return app
 
 
@@ -1278,7 +1483,8 @@ async def analytics_dashboard(key: str):
 
 def routes_safe_join(directory: DeveloperPath, path: UserProvidedPath) -> str:
     """Safely join the user path to the directory while performing some additional http-related checks,
-    e.g. ensuring that the full path exists on the local file system and is not a directory"""
+    e.g. ensuring that the full path exists on the local file system and is not a directory
+    """
     if path == "":
         raise fastapi.HTTPException(400)
     if route_utils.starts_with_protocol(path):
@@ -1294,7 +1500,7 @@ def routes_safe_join(directory: DeveloperPath, path: UserProvidedPath) -> str:
     return str(fullpath)
 
 
-def get_types(cls_set: List[Type]):
+def get_types(cls_set: list[type]):
     docset = []
     types = []
     for cls in cls_set:
@@ -1312,6 +1518,8 @@ def mount_gradio_app(
     app: fastapi.FastAPI,
     blocks: gradio.Blocks,
     path: str,
+    server_name: str = "0.0.0.0",
+    server_port: int = 7860,
     app_kwargs: dict[str, Any] | None = None,
     *,
     auth: Callable | tuple[str, str] | list[tuple[str, str]] | None = None,
@@ -1323,13 +1531,18 @@ def mount_gradio_app(
     favicon_path: str | None = None,
     show_error: bool = True,
     max_file_size: str | int | None = None,
+    ssr_mode: bool | None = None,
+    node_server_name: str | None = None,
+    node_port: int | None = None,
 ) -> fastapi.FastAPI:
     """Mount a gradio.Blocks to an existing FastAPI application.
 
     Parameters:
         app: The parent FastAPI application.
         blocks: The blocks object we want to mount to the parent app.
-        path: The path at which the gradio application will be mounted.
+        path: The path at which the gradio application will be mounted, e.g. "/gradio".
+        server_name: The server name on which the Gradio app will be run.
+        server_port: The port on which the Gradio app will be run.
         app_kwargs: Additional keyword arguments to pass to the underlying FastAPI app as a dictionary of parameter keys and argument values. For example, `{"docs_url": "/docs"}`
         auth: If provided, username and password (or list of username-password tuples) required to access the gradio app. Can also provide function that takes username and password and returns True if valid login.
         auth_message: If provided, HTML message provided on login page for this gradio app.
@@ -1340,6 +1553,9 @@ def mount_gradio_app(
         favicon_path: If a path to a file (.png, .gif, or .ico) is provided, it will be used as the favicon for this gradio app's page.
         show_error: If True, any errors in the gradio app will be displayed in an alert modal and printed in the browser console log. Otherwise, errors will only be visible in the terminal session running the Gradio app.
         max_file_size: The maximum file size in bytes that can be uploaded. Can be a string of the form "<value><unit>", where value is any positive integer and unit is one of "b", "kb", "mb", "gb", "tb". If None, no limit is set.
+        ssr_mode: If True, the Gradio app will be rendered using server-side rendering mode, which is typically more performant and provides better SEO, but this requires Node 18+ to be installed on the system. If False, the app will be rendered using client-side rendering mode. If None, will use GRADIO_SSR_MODE environment variable or default to False.
+        node_server_name: The name of the Node server to use for SSR. If None, will use GRADIO_NODE_SERVER_NAME environment variable or search for a node binary in the system.
+        node_port: The port on which the Node server should run. If None, will use GRADIO_NODE_SERVER_PORT environment variable or find a free port.
     Example:
         from fastapi import FastAPI
         import gradio as gr
@@ -1361,6 +1577,10 @@ def read_main():
     blocks.max_file_size = utils._parse_file_size(max_file_size)
     blocks.config = blocks.get_config_file()
     blocks.validate_queue_settings()
+    blocks.custom_mount_path = path
+    blocks.server_port = server_port
+    blocks.server_name = server_name
+
     if auth is not None and auth_dependency is not None:
         raise ValueError(
             "You cannot provide both `auth` and `auth_dependency` in mount_gradio_app(). Please choose one."
@@ -1388,8 +1608,37 @@ def read_main():
     if root_path is not None:
         blocks.root_path = root_path
 
+    blocks.ssr_mode = (
+        False
+        if wasm_utils.IS_WASM
+        else (
+            ssr_mode
+            if ssr_mode is not None
+            else os.getenv("GRADIO_SSR_MODE", "False").lower() == "true"
+        )
+    )
+
+    blocks.node_path = os.environ.get(
+        "GRADIO_NODE_PATH", "" if wasm_utils.IS_WASM else get_node_path()
+    )
+
+    blocks.node_server_name = node_server_name
+    blocks.node_port = node_port
+
+    if blocks.ssr_mode:
+        blocks.node_server_name, blocks.node_process, blocks.node_port = (
+            start_node_server(
+                server_name=blocks.node_server_name,
+                server_port=blocks.node_port,
+                node_path=blocks.node_path,
+            )
+        )
+
     gradio_app = App.create_app(
-        blocks, app_kwargs=app_kwargs, auth_dependency=auth_dependency
+        blocks,
+        app_kwargs=app_kwargs,
+        auth_dependency=auth_dependency,
+        ssr_mode=blocks.ssr_mode,
     )
     old_lifespan = app.router.lifespan_context
 
@@ -1397,9 +1646,10 @@ def read_main():
     async def new_lifespan(app: FastAPI):
         async with old_lifespan(
             app
-        ):  # Instert the startup events inside the FastAPI context manager
+        ):  # Insert the startup events inside the FastAPI context manager
             async with gradio_app.router.lifespan_context(gradio_app):
-                gradio_app.get_blocks().startup_events()
+                gradio_app.get_blocks().run_startup_events()
+                await gradio_app.get_blocks().run_extra_startup_events()
                 yield
 
     app.router.lifespan_context = new_lifespan
diff --git a/gradio/server_messages.py b/gradio/server_messages.py
index 4f83d9edd4421..0c746bef886c0 100644
--- a/gradio/server_messages.py
+++ b/gradio/server_messages.py
@@ -1,4 +1,4 @@
-from typing import List, Literal, Optional, Union
+from typing import Literal, Optional, Union
 
 from gradio_client.utils import ServerMessage
 from pydantic import BaseModel
@@ -19,7 +19,7 @@ class ProgressUnit(BaseModel):
 
 class ProgressMessage(BaseMessage):
     msg: Literal[ServerMessage.progress] = ServerMessage.progress  # type: ignore
-    progress_data: List[ProgressUnit] = []
+    progress_data: list[ProgressUnit] = []
 
 
 class LogMessage(BaseMessage):
@@ -49,9 +49,12 @@ class ProcessCompletedMessage(BaseMessage):
 
 
 class ProcessGeneratingMessage(BaseMessage):
-    msg: Literal[ServerMessage.process_generating] = ServerMessage.process_generating  # type: ignore
+    msg: Literal[ServerMessage.process_generating, ServerMessage.process_streaming] = (  # type: ignore
+        ServerMessage.process_generating
+    )
     output: dict
     success: bool
+    time_limit: Optional[float] = None
 
 
 class HeartbeatMessage(BaseMessage):
diff --git a/gradio/state_holder.py b/gradio/state_holder.py
index 13783fcc7a68e..133865dabb65f 100644
--- a/gradio/state_holder.py
+++ b/gradio/state_holder.py
@@ -4,8 +4,9 @@
 import os
 import threading
 from collections import OrderedDict
+from collections.abc import Iterator
 from copy import copy, deepcopy
-from typing import TYPE_CHECKING, Any, Iterator
+from typing import TYPE_CHECKING, Any
 
 if TYPE_CHECKING:
     from gradio.blocks import Blocks
diff --git a/gradio/strings.py b/gradio/strings.py
index f2e0a08409ce6..798e743c9508c 100644
--- a/gradio/strings.py
+++ b/gradio/strings.py
@@ -1,6 +1,5 @@
 import os
 import threading
-from typing import Dict
 
 import httpx
 
@@ -9,9 +8,9 @@
 MESSAGING_API_ENDPOINT = "https://api.gradio.app/gradio-messaging/en"
 
 en = {
-    "RUNNING_LOCALLY": "Running on local URL:  {}",
-    "RUNNING_LOCALLY_SEPARATED": "Running on local URL:  {}://{}:{}",
-    "SHARE_LINK_DISPLAY": "Running on public URL: {}",
+    "RUNNING_LOCALLY": "* Running on local URL:  {}://{}:{}",
+    "RUNNING_LOCALLY_SSR": "* Running on local URL:  {}://{}:{}, with SSR ⚡",
+    "SHARE_LINK_DISPLAY": "* Running on public URL: {}",
     "COULD_NOT_GET_SHARE_LINK": "\nCould not create share link. Please check your internet connection or our status page: https://status.gradio.app.",
     "COULD_NOT_GET_SHARE_LINK_MISSING_FILE": "\nCould not create share link. Missing file: {}. \n\nPlease check your internet connection. This can happen if your antivirus software blocks the download of this file. You can install manually by following these steps: \n\n1. Download this file: {}\n2. Rename the downloaded file to: {}\n3. Move the file to this location: {}",
     "COLAB_NO_LOCAL": "Cannot display local interface on google colab, public link created.",
@@ -23,12 +22,13 @@
     "To turn off, set debug=False in launch().",
     "COLAB_DEBUG_FALSE": "Colab notebook detected. To show errors in colab notebook, set debug=True in launch()",
     "COLAB_WARNING": "Note: opening Chrome Inspector may crash demo inside Colab notebooks.",
-    "SHARE_LINK_MESSAGE": "\nThis share link expires in 72 hours. For free permanent hosting and GPU upgrades, run `gradio deploy` from Terminal to deploy to Spaces (https://huggingface.co/spaces)",
+    "SHARE_LINK_MESSAGE": "\nThis share link expires in 72 hours. For free permanent hosting and GPU upgrades, run `gradio deploy` from the terminal in the working directory to deploy to Hugging Face Spaces (https://huggingface.co/spaces)",
     "INLINE_DISPLAY_BELOW": "Interface loading below...",
+    "COULD_NOT_GET_SHARE_LINK_CHECKSUM": "\nCould not create share link. Checksum mismatch for file: {}.",
 }
 
 
-def get_updated_messaging(en: Dict):
+def get_updated_messaging(en: dict):
     try:
         updated_messaging = httpx.get(MESSAGING_API_ENDPOINT, timeout=3).json()
         en.update(updated_messaging)
diff --git a/gradio/templates.py b/gradio/templates.py
index 9971a0093b1b0..33ed66cde5a9c 100644
--- a/gradio/templates.py
+++ b/gradio/templates.py
@@ -1,7 +1,8 @@
 from __future__ import annotations
 
+from collections.abc import Callable, Iterable, Sequence
 from pathlib import Path
-from typing import TYPE_CHECKING, Any, Callable, Iterable, Literal, Sequence
+from typing import TYPE_CHECKING, Any, Literal
 
 import numpy as np
 import PIL.Image
@@ -52,6 +53,8 @@ def __init__(
         rtl: bool = False,
         show_copy_button: bool = False,
         max_length: int | None = None,
+        submit_btn: str | bool | None = False,
+        stop_btn: str | bool | None = False,
     ):
         super().__init__(
             value=value,
@@ -79,6 +82,8 @@ def __init__(
             rtl=rtl,
             show_copy_button=show_copy_button,
             max_length=max_length,
+            submit_btn=submit_btn,
+            stop_btn=stop_btn,
         )
 
 
@@ -385,6 +390,7 @@ def __init__(
         min_length: int | None = None,
         max_length: int | None = None,
         loop: bool = False,
+        streaming: bool = False,
         watermark: str | Path | None = None,
     ):
         sources = ["upload"]
@@ -415,6 +421,7 @@ def __init__(
             min_length=min_length,
             max_length=max_length,
             loop=loop,
+            streaming=streaming,
             watermark=watermark,
         )
 
@@ -460,6 +467,7 @@ def __init__(
         max_length: int | None = None,
         waveform_options: WaveformOptions | dict | None = None,
         loop: bool = False,
+        recording: bool = False,
     ):
         sources = ["microphone"]
         super().__init__(
@@ -489,6 +497,7 @@ def __init__(
             max_length=max_length,
             waveform_options=waveform_options,
             loop=loop,
+            recording=recording,
         )
 
 
@@ -570,7 +579,7 @@ def __init__(
         | Sequence[components.Component]
         | set[components.Component]
         | None = None,
-        height: int = 500,
+        max_height: int = 500,
         scale: int | None = None,
         min_width: int = 160,
         interactive: bool | None = None,
@@ -603,7 +612,7 @@ def __init__(
             column_widths=column_widths,
             every=every,
             inputs=inputs,
-            height=height,
+            max_height=max_height,
             scale=scale,
             latex_delimiters=latex_delimiters,
             min_width=min_width,
@@ -634,7 +643,7 @@ def __init__(
         | Sequence[components.Component]
         | set[components.Component]
         | None = None,
-        height: int = 500,
+        max_height: int = 500,
         scale: int | None = None,
         min_width: int = 160,
         interactive: bool | None = None,
@@ -667,7 +676,7 @@ def __init__(
             column_widths=column_widths,
             every=every,
             inputs=inputs,
-            height=height,
+            max_height=max_height,
             scale=scale,
             latex_delimiters=latex_delimiters,
             min_width=min_width,
@@ -698,7 +707,7 @@ def __init__(
         | Sequence[components.Component]
         | set[components.Component]
         | None = None,
-        height: int = 500,
+        max_height: int = 500,
         scale: int | None = None,
         min_width: int = 160,
         interactive: bool | None = None,
@@ -731,7 +740,7 @@ def __init__(
             column_widths=column_widths,
             every=every,
             inputs=inputs,
-            height=height,
+            max_height=max_height,
             scale=scale,
             latex_delimiters=latex_delimiters,
             min_width=min_width,
diff --git a/gradio/themes/__init__.py b/gradio/themes/__init__.py
index f7adbe74eef8e..f8cfdd5a1f823 100644
--- a/gradio/themes/__init__.py
+++ b/gradio/themes/__init__.py
@@ -1,7 +1,10 @@
 from gradio.themes.base import Base, ThemeClass
+from gradio.themes.citrus import Citrus
 from gradio.themes.default import Default
 from gradio.themes.glass import Glass
 from gradio.themes.monochrome import Monochrome
+from gradio.themes.ocean import Ocean
+from gradio.themes.origin import Origin
 from gradio.themes.soft import Soft
 from gradio.themes.utils import colors, sizes
 from gradio.themes.utils.colors import Color
@@ -21,6 +24,9 @@
     "ThemeClass",
     "colors",
     "sizes",
+    "Origin",
+    "Citrus",
+    "Ocean",
 ]
 
 
diff --git a/gradio/themes/base.py b/gradio/themes/base.py
index 93c53f52a7f29..c44177ff153f5 100644
--- a/gradio/themes/base.py
+++ b/gradio/themes/base.py
@@ -5,8 +5,8 @@
 import tempfile
 import textwrap
 import warnings
+from collections.abc import Iterable
 from pathlib import Path
-from typing import Iterable
 
 import huggingface_hub
 import semantic_version as semver
@@ -27,6 +27,7 @@ class ThemeClass:
     def __init__(self):
         self._stylesheets = []
         self.name = None
+        self._font_css = []
 
     def _get_theme_css(self):
         css = {}
@@ -90,7 +91,9 @@ def repl_func(match):
             + "\n}"
         )
 
-        return f"{css_code}\n{dark_css_code}"
+        font_css = "\n".join(self._font_css)
+
+        return f"{font_css}\n{css_code}\n{dark_css_code}"
 
     def _get_computed_value(self, property: str, depth=0) -> str:
         max_depth = 100
@@ -185,7 +188,7 @@ def from_hub(cls, repo_name: str, hf_token: str | None = None):
 
         try:
             space_info = api.space_info(name)
-        except huggingface_hub.utils._errors.RepositoryNotFoundError as e:
+        except huggingface_hub.utils.RepositoryNotFoundError as e:
             raise ValueError(f"The space {name} does not exist") from e
 
         assets = get_theme_assets(space_info)
@@ -286,7 +289,7 @@ def push_to_hub(
             mode="w", delete=False, suffix=".json"
         ) as css_file:
             contents = self.to_dict()
-            contents["version"] = version
+            contents["version"] = {"version": version}
             json.dump(contents, css_file, cls=fonts.FontEncoder)
         with tempfile.NamedTemporaryFile(mode="w", delete=False) as readme_file:
             readme_content = README_CONTENT.format(
@@ -347,18 +350,18 @@ def __init__(
         *,
         primary_hue: colors.Color | str = colors.blue,
         secondary_hue: colors.Color | str = colors.blue,
-        neutral_hue: colors.Color | str = colors.gray,
+        neutral_hue: colors.Color | str = colors.zinc,
         text_size: sizes.Size | str = sizes.text_md,
         spacing_size: sizes.Size | str = sizes.spacing_md,
         radius_size: sizes.Size | str = sizes.radius_md,
         font: fonts.Font | str | Iterable[fonts.Font | str] = (
-            fonts.GoogleFont("Source Sans Pro"),
+            fonts.LocalFont("IBM Plex Sans"),
             "ui-sans-serif",
             "system-ui",
             "sans-serif",
         ),
         font_mono: fonts.Font | str | Iterable[fonts.Font | str] = (
-            fonts.GoogleFont("IBM Plex Mono"),
+            fonts.LocalFont("IBM Plex Mono"),
             "ui-monospace",
             "Consolas",
             "monospace",
@@ -377,6 +380,7 @@ def __init__(
         """
 
         self.name = "base"
+        self._font_css = []
 
         def expand_shortcut(shortcut, mode="color", prefix=None):
             if not isinstance(shortcut, str):
@@ -465,23 +469,29 @@ def expand_shortcut(shortcut, mode="color", prefix=None):
         if isinstance(font, (fonts.Font, str)):
             font = [font]
         self._font = [
-            fontfam if isinstance(fontfam, fonts.Font) else fonts.Font(fontfam)
+            fontfam if isinstance(fontfam, fonts.Font) else fonts.LocalFont(fontfam)
             for fontfam in font
         ]
-        if isinstance(font, fonts.Font) or isinstance(font_mono, str):
+        if isinstance(font_mono, (fonts.Font, str)):
             font_mono = [font_mono]
         self._font_mono = [
-            fontfam if isinstance(fontfam, fonts.Font) else fonts.Font(fontfam)
+            fontfam if isinstance(fontfam, fonts.Font) else fonts.LocalFont(fontfam)
             for fontfam in font_mono
         ]
         self.font = ", ".join(str(font) for font in self._font)
         self.font_mono = ", ".join(str(font) for font in self._font_mono)
 
         self._stylesheets = []
+        self._font_css = []
         for font in self._font + self._font_mono:
             font_stylesheet = font.stylesheet()
-            if font_stylesheet:
+            if isinstance(font_stylesheet, str):
                 self._stylesheets.append(font_stylesheet)
+            elif isinstance(font_stylesheet, dict):
+                if font_stylesheet["url"]:
+                    self._stylesheets.append(font_stylesheet["url"])
+                elif font_stylesheet["css"]:
+                    self._font_css.append(font_stylesheet["css"])
 
         self.set()
 
@@ -591,6 +601,7 @@ def set(
         table_text_color=None,
         table_text_color_dark=None,
         checkbox_background_color=None,
+        chatbot_text_size=None,
         checkbox_background_color_dark=None,
         checkbox_background_color_focus=None,
         checkbox_background_color_focus_dark=None,
@@ -622,6 +633,8 @@ def set(
         checkbox_label_border_color_dark=None,
         checkbox_label_border_color_hover=None,
         checkbox_label_border_color_hover_dark=None,
+        checkbox_label_border_color_selected=None,
+        checkbox_label_border_color_selected_dark=None,
         checkbox_label_border_width=None,
         checkbox_label_border_width_dark=None,
         checkbox_label_gap=None,
@@ -685,9 +698,8 @@ def set(
         # Buttons: These set the style for buttons.
         button_border_width=None,
         button_border_width_dark=None,
-        button_shadow=None,
-        button_shadow_active=None,
-        button_shadow_hover=None,
+        button_transform_hover=None,
+        button_transform_active=None,
         button_transition=None,
         button_large_padding=None,
         button_large_radius=None,
@@ -709,6 +721,12 @@ def set(
         button_primary_text_color_dark=None,
         button_primary_text_color_hover=None,
         button_primary_text_color_hover_dark=None,
+        button_primary_shadow=None,
+        button_primary_shadow_hover=None,
+        button_primary_shadow_active=None,
+        button_primary_shadow_dark=None,
+        button_primary_shadow_hover_dark=None,
+        button_primary_shadow_active_dark=None,
         button_secondary_background_fill=None,
         button_secondary_background_fill_dark=None,
         button_secondary_background_fill_hover=None,
@@ -721,6 +739,12 @@ def set(
         button_secondary_text_color_dark=None,
         button_secondary_text_color_hover=None,
         button_secondary_text_color_hover_dark=None,
+        button_secondary_shadow=None,
+        button_secondary_shadow_hover=None,
+        button_secondary_shadow_active=None,
+        button_secondary_shadow_dark=None,
+        button_secondary_shadow_hover_dark=None,
+        button_secondary_shadow_active_dark=None,
         button_cancel_background_fill=None,
         button_cancel_background_fill_dark=None,
         button_cancel_background_fill_hover=None,
@@ -832,6 +856,7 @@ def set(
             table_text_color_dark: The body text color in the table in dark mode.
             section_header_text_size: The text size of a section header (e.g. tab name).
             section_header_text_weight: The text weight of a section header (e.g. tab name).
+            chatbot_text_size: The text size of the chatbot text.
             checkbox_background_color: The background of a checkbox square or radio circle.
             checkbox_background_color_dark: The background of a checkbox square or radio circle in dark mode.
             checkbox_background_color_focus: The background of a checkbox square or radio circle when focused.
@@ -864,6 +889,8 @@ def set(
             checkbox_label_border_color_dark: The border color of the surrounding button of a checkbox or radio element in dark mode.
             checkbox_label_border_color_hover: The border color of the surrounding button of a checkbox or radio element when hovered over.
             checkbox_label_border_color_hover_dark: The border color of the surrounding button of a checkbox or radio element when hovered over in dark mode.
+            checkbox_label_border_color_selected: The border color of the surrounding button of a checkbox or radio element when selected.
+            checkbox_label_border_color_selected_dark: The border color of the surrounding button of a checkbox or radio element when selected in dark mode.
             checkbox_label_border_width: The border width of the surrounding button of a checkbox or radio element.
             checkbox_label_border_width_dark: The border width of the surrounding button of a checkbox or radio element in dark mode.
             checkbox_label_gap: The gap consecutive checkbox or radio elements.
@@ -952,6 +979,12 @@ def set(
             button_primary_text_color_dark: The text color of a button of "primary" variant in dark mode.
             button_primary_text_color_hover: The text color of a button of "primary" variant when hovered over.
             button_primary_text_color_hover_dark: The text color of a button of "primary" variant when hovered over in dark mode.
+            button_primary_shadow: The shadow under a primary button.
+            button_primary_shadow_active: The shadow under a primary button when pressed.
+            button_primary_shadow_hover: The shadow under a primary button when hovered over.
+            button_primary_shadow_dark: The shadow under a primary button in dark mode.
+            button_primary_shadow_active_dark: The shadow under a primary button when pressed in dark mode.
+            button_primary_shadow_hover_dark: The shadow under a primary button when hovered over in dark mode.
             button_secondary_background_fill: The background of a button of default "secondary" variant.
             button_secondary_background_fill_dark: The background of a button of default "secondary" variant in dark mode.
             button_secondary_background_fill_hover: The background of a button of default "secondary" variant when hovered over.
@@ -964,14 +997,19 @@ def set(
             button_secondary_text_color_dark: The text color of a button of default "secondary" variant in dark mode.
             button_secondary_text_color_hover: The text color of a button of default "secondary" variant when hovered over.
             button_secondary_text_color_hover_dark: The text color of a button of default "secondary" variant when hovered over in dark mode.
-            button_shadow: The shadow under a button.
-            button_shadow_active: The shadow under a button when pressed.
-            button_shadow_hover: The shadow under a button when hovered over.
+            button_secondary_shadow: The shadow under a secondary button.
+            button_secondary_shadow_active: The shadow under a secondary button when pressed.
+            button_secondary_shadow_hover: The shadow under a secondary button when hovered over.
+            button_secondary_shadow_dark: The shadow under a secondary button in dark mode.
+            button_secondary_shadow_active_dark: The shadow under a secondary button when pressed in dark mode.
+            button_secondary_shadow_hover_dark: The shadow under a secondary button when hovered over in dark mode.
             button_small_padding: The padding of a button set to "small" size.
             button_small_radius: The corner radius of a button set to "small" size.
             button_small_text_size: The text size of a button set to "small" size.
             button_small_text_weight: The text weight of a button set to "small" size.
             button_transition: The transition animation duration of a button between regular, hover, and focused states.
+            button_transform_hover: The transform animation of a button on hover.
+            button_transform_active: The transform animation of a button when pressed.
         """
 
         # Body
@@ -993,7 +1031,7 @@ def set(
         self.body_text_weight = body_text_weight or getattr(
             self, "body_text_weight", "400"
         )
-        self.embed_radius = embed_radius or getattr(self, "embed_radius", "*radius_lg")
+        self.embed_radius = embed_radius or getattr(self, "embed_radius", "*radius_sm")
         # Core Colors
         self.color_accent = color_accent or getattr(
             self, "color_accent", "*primary_500"
@@ -1157,12 +1195,12 @@ def set(
         self.block_label_radius = block_label_radius or getattr(
             self,
             "block_label_radius",
-            "calc(*radius_lg - 1px) 0 calc(*radius_lg - 1px) 0",
+            "calc(*radius_sm - 1px) 0 calc(*radius_sm - 1px) 0",
         )
         self.block_label_right_radius = block_label_right_radius or getattr(
             self,
             "block_label_right_radius",
-            "0 calc(*radius_lg - 1px) 0 calc(*radius_lg - 1px)",
+            "0 calc(*radius_sm - 1px) 0 calc(*radius_sm - 1px)",
         )
         self.block_label_text_size = block_label_text_size or getattr(
             self, "block_label_text_size", "*text_sm"
@@ -1173,7 +1211,7 @@ def set(
         self.block_padding = block_padding or getattr(
             self, "block_padding", "*spacing_xl calc(*spacing_xl + 2px)"
         )
-        self.block_radius = block_radius or getattr(self, "block_radius", "*radius_lg")
+        self.block_radius = block_radius or getattr(self, "block_radius", "*radius_sm")
         self.block_shadow = block_shadow or getattr(self, "block_shadow", "none")
         self.block_shadow_dark = block_shadow_dark or getattr(
             self, "block_shadow_dark", None
@@ -1216,7 +1254,7 @@ def set(
             self, "block_title_text_weight", "400"
         )
         self.container_radius = container_radius or getattr(
-            self, "container_radius", "*radius_lg"
+            self, "container_radius", "*radius_sm"
         )
         self.form_gap_width = form_gap_width or getattr(self, "form_gap_width", "0px")
         self.layout_gap = layout_gap or getattr(self, "layout_gap", "*spacing_xxl")
@@ -1258,6 +1296,9 @@ def set(
         self.code_background_fill_dark = code_background_fill_dark or getattr(
             self, "code_background_fill_dark", "*neutral_800"
         )
+        self.chatbot_text_size = chatbot_text_size or getattr(
+            self, "chatbot_text_size", "*text_lg"
+        )
         self.checkbox_background_color = checkbox_background_color or getattr(
             self, "checkbox_background_color", "*background_fill_primary"
         )
@@ -1294,13 +1335,11 @@ def set(
         )
         self.checkbox_background_color_selected = (
             checkbox_background_color_selected
-            or getattr(self, "checkbox_background_color_selected", "*secondary_600")
+            or getattr(self, "checkbox_background_color_selected", "*color_accent")
         )
         self.checkbox_background_color_selected_dark = (
             checkbox_background_color_selected_dark
-            or getattr(
-                self, "checkbox_background_color_selected_dark", "*secondary_600"
-            )
+            or getattr(self, "checkbox_background_color_selected_dark", "*color_accent")
         )
         self.checkbox_border_color = checkbox_border_color or getattr(
             self, "checkbox_border_color", "*neutral_300"
@@ -1309,11 +1348,11 @@ def set(
             self, "checkbox_border_color_dark", "*neutral_700"
         )
         self.checkbox_border_color_focus = checkbox_border_color_focus or getattr(
-            self, "checkbox_border_color_focus", "*secondary_500"
+            self, "checkbox_border_color_focus", "*color_accent"
         )
         self.checkbox_border_color_focus_dark = (
             checkbox_border_color_focus_dark
-            or getattr(self, "checkbox_border_color_focus_dark", "*secondary_500")
+            or getattr(self, "checkbox_border_color_focus_dark", "*color_accent")
         )
         self.checkbox_border_color_hover = checkbox_border_color_hover or getattr(
             self, "checkbox_border_color_hover", "*neutral_300"
@@ -1323,11 +1362,11 @@ def set(
             or getattr(self, "checkbox_border_color_hover_dark", "*neutral_600")
         )
         self.checkbox_border_color_selected = checkbox_border_color_selected or getattr(
-            self, "checkbox_border_color_selected", "*secondary_600"
+            self, "checkbox_border_color_selected", "*color_accent"
         )
         self.checkbox_border_color_selected_dark = (
             checkbox_border_color_selected_dark
-            or getattr(self, "checkbox_border_color_selected_dark", "*secondary_600")
+            or getattr(self, "checkbox_border_color_selected_dark", "*color_accent")
         )
         self.checkbox_border_radius = checkbox_border_radius or getattr(
             self, "checkbox_border_radius", "*radius_sm"
@@ -1406,6 +1445,22 @@ def set(
                 "*checkbox_label_border_color",
             )
         )
+        self.checkbox_label_border_color_selected = (
+            checkbox_label_border_color_selected
+            or getattr(
+                self,
+                "checkbox_label_border_color_selected",
+                "*checkbox_label_border_color",
+            )
+        )
+        self.checkbox_label_border_color_selected_dark = (
+            checkbox_label_border_color_selected_dark
+            or getattr(
+                self,
+                "checkbox_label_border_color_selected_dark",
+                "*checkbox_label_border_color",
+            )
+        )
         self.checkbox_label_border_width = checkbox_label_border_width or getattr(
             self, "checkbox_label_border_width", "*input_border_width"
         )
@@ -1498,11 +1553,11 @@ def set(
             self, "input_background_fill_dark", "*neutral_700"
         )
         self.input_background_fill_focus = input_background_fill_focus or getattr(
-            self, "input_background_fill_focus", "*secondary_500"
+            self, "input_background_fill_focus", "*input_background_fill"
         )
         self.input_background_fill_focus_dark = (
             input_background_fill_focus_dark
-            or getattr(self, "input_background_fill_focus_dark", "*secondary_600")
+            or getattr(self, "input_background_fill_focus_dark", None)
         )
         self.input_background_fill_hover = input_background_fill_hover or getattr(
             self, "input_background_fill_hover", "*input_background_fill"
@@ -1546,7 +1601,7 @@ def set(
         self.input_placeholder_color_dark = input_placeholder_color_dark or getattr(
             self, "input_placeholder_color_dark", "*neutral_500"
         )
-        self.input_radius = input_radius or getattr(self, "input_radius", "*radius_lg")
+        self.input_radius = input_radius or getattr(self, "input_radius", "*radius_sm")
         self.input_shadow = input_shadow or getattr(self, "input_shadow", "none")
         self.input_shadow_dark = input_shadow_dark or getattr(
             self, "input_shadow_dark", None
@@ -1579,7 +1634,7 @@ def set(
             self, "prose_header_text_weight", "600"
         )
         self.slider_color = slider_color or getattr(
-            self, "slider_color", colors.blue.c600
+            self, "slider_color", "*color_accent"
         )
         self.slider_color_dark = slider_color_dark or getattr(
             self, "slider_color_dark", None
@@ -1609,7 +1664,7 @@ def set(
         self.table_odd_background_fill_dark = table_odd_background_fill_dark or getattr(
             self, "table_odd_background_fill_dark", "*neutral_900"
         )
-        self.table_radius = table_radius or getattr(self, "table_radius", "*radius_lg")
+        self.table_radius = table_radius or getattr(self, "table_radius", "*radius_sm")
         self.table_row_focus = table_row_focus or getattr(
             self, "table_row_focus", "*color_accent_soft"
         )
@@ -1621,7 +1676,7 @@ def set(
             self, "button_border_width", "*input_border_width"
         )
         self.button_border_width_dark = button_border_width_dark or getattr(
-            self, "button_border_width_dark", "*input_border_width"
+            self, "button_border_width_dark", None
         )
         self.button_cancel_background_fill = button_cancel_background_fill or getattr(
             self, "button_cancel_background_fill", "*button_secondary_background_fill"
@@ -1639,7 +1694,7 @@ def set(
             or getattr(
                 self,
                 "button_cancel_background_fill_hover",
-                "*button_cancel_background_fill",
+                "*button_secondary_background_fill_hover",
             )
         )
         self.button_cancel_background_fill_hover_dark = (
@@ -1647,7 +1702,7 @@ def set(
             or getattr(
                 self,
                 "button_cancel_background_fill_hover_dark",
-                "*button_cancel_background_fill",
+                "*button_secondary_background_fill_hover",
             )
         )
         self.button_cancel_border_color = button_cancel_border_color or getattr(
@@ -1661,12 +1716,13 @@ def set(
                 "*button_secondary_border_color",
             )
         )
+
         self.button_cancel_border_color_hover = (
             button_cancel_border_color_hover
             or getattr(
                 self,
                 "button_cancel_border_color_hover",
-                "*button_cancel_border_color",
+                "*button_secondary_border_color_hover",
             )
         )
         self.button_cancel_border_color_hover_dark = (
@@ -1674,9 +1730,10 @@ def set(
             or getattr(
                 self,
                 "button_cancel_border_color_hover_dark",
-                "*button_cancel_border_color",
+                "*button_secondary_border_color_hover",
             )
         )
+
         self.button_cancel_text_color = button_cancel_text_color or getattr(
             self, "button_cancel_text_color", "*button_secondary_text_color"
         )
@@ -1684,19 +1741,28 @@ def set(
             self, "button_cancel_text_color_dark", "*button_secondary_text_color"
         )
         self.button_cancel_text_color_hover = button_cancel_text_color_hover or getattr(
-            self, "button_cancel_text_color_hover", "*button_cancel_text_color"
+            self, "button_cancel_text_color_hover", "*button_secondary_text_color_hover"
         )
         self.button_cancel_text_color_hover_dark = (
             button_cancel_text_color_hover_dark
-            or getattr(
-                self, "button_cancel_text_color_hover_dark", "*button_cancel_text_color"
-            )
+            or getattr(self, "button_cancel_text_color_hover_dark", "white")
+        )
+
+        self.button_transform_hover = button_transform_hover or getattr(
+            self, "button_transform_hover", "none"
+        )
+        self.button_transform_active = button_transform_active or getattr(
+            self, "button_transform_active", "none"
         )
+        self.button_transition = button_transition or getattr(
+            self, "button_transition", "all 0.2s ease"
+        )
+
         self.button_large_padding = button_large_padding or getattr(
             self, "button_large_padding", "*spacing_lg calc(2 * *spacing_lg)"
         )
         self.button_large_radius = button_large_radius or getattr(
-            self, "button_large_radius", "*radius_lg"
+            self, "button_large_radius", "*radius_md"
         )
         self.button_large_text_size = button_large_text_size or getattr(
             self, "button_large_text_size", "*text_lg"
@@ -1705,30 +1771,26 @@ def set(
             self, "button_large_text_weight", "600"
         )
         self.button_primary_background_fill = button_primary_background_fill or getattr(
-            self, "button_primary_background_fill", "*primary_200"
+            self, "button_primary_background_fill", "*primary_500"
         )
         self.button_primary_background_fill_dark = (
             button_primary_background_fill_dark
-            or getattr(self, "button_primary_background_fill_dark", "*primary_700")
+            or getattr(self, "button_primary_background_fill_dark", "*primary_600")
         )
         self.button_primary_background_fill_hover = (
             button_primary_background_fill_hover
-            or getattr(
-                self,
-                "button_primary_background_fill_hover",
-                "*button_primary_background_fill",
-            )
+            or getattr(self, "button_primary_background_fill_hover", "*primary_600")
         )
         self.button_primary_background_fill_hover_dark = (
             button_primary_background_fill_hover_dark
             or getattr(
                 self,
                 "button_primary_background_fill_hover_dark",
-                "*button_primary_background_fill",
+                "*primary_700",
             )
         )
         self.button_primary_border_color = button_primary_border_color or getattr(
-            self, "button_primary_border_color", "*primary_200"
+            self, "button_primary_border_color", "*primary_500"
         )
         self.button_primary_border_color_dark = (
             button_primary_border_color_dark
@@ -1739,7 +1801,7 @@ def set(
             or getattr(
                 self,
                 "button_primary_border_color_hover",
-                "*button_primary_border_color",
+                "*primary_500",
             )
         )
         self.button_primary_border_color_hover_dark = (
@@ -1747,11 +1809,11 @@ def set(
             or getattr(
                 self,
                 "button_primary_border_color_hover_dark",
-                "*button_primary_border_color",
+                "*primary_500",
             )
         )
         self.button_primary_text_color = button_primary_text_color or getattr(
-            self, "button_primary_text_color", "*primary_600"
+            self, "button_primary_text_color", "white"
         )
         self.button_primary_text_color_dark = button_primary_text_color_dark or getattr(
             self, "button_primary_text_color_dark", "white"
@@ -1770,6 +1832,30 @@ def set(
                 "*button_primary_text_color",
             )
         )
+        self.button_primary_shadow = button_primary_shadow or getattr(
+            self, "button_primary_shadow", "none"
+        )
+        self.button_primary_shadow_hover = button_primary_shadow_hover or getattr(
+            self, "button_primary_shadow_hover", "*button_primary_shadow"
+        )
+        self.button_primary_shadow_active = button_primary_shadow_active or getattr(
+            self, "button_primary_shadow_active", "*button_primary_shadow"
+        )
+        self.button_primary_shadow_dark = button_primary_shadow_dark or getattr(
+            self, "button_primary_shadow_dark", None
+        )
+        self.button_primary_shadow_hover_dark = (
+            button_primary_shadow_hover_dark
+            or getattr(
+                self, "button_primary_shadow_hover_dark", "*button_primary_shadow"
+            )
+        )
+        self.button_primary_shadow_active_dark = (
+            button_primary_shadow_active_dark
+            or getattr(
+                self, "button_primary_shadow_active_dark", "*button_primary_shadow"
+            )
+        )
         self.button_secondary_background_fill = (
             button_secondary_background_fill
             or getattr(self, "button_secondary_background_fill", "*neutral_200")
@@ -1780,18 +1866,12 @@ def set(
         )
         self.button_secondary_background_fill_hover = (
             button_secondary_background_fill_hover
-            or getattr(
-                self,
-                "button_secondary_background_fill_hover",
-                "*button_secondary_background_fill",
-            )
+            or getattr(self, "button_secondary_background_fill_hover", "*neutral_300")
         )
         self.button_secondary_background_fill_hover_dark = (
             button_secondary_background_fill_hover_dark
             or getattr(
-                self,
-                "button_secondary_background_fill_hover_dark",
-                "*button_secondary_background_fill",
+                self, "button_secondary_background_fill_hover_dark", "*neutral_700"
             )
         )
         self.button_secondary_border_color = button_secondary_border_color or getattr(
@@ -1806,7 +1886,7 @@ def set(
             or getattr(
                 self,
                 "button_secondary_border_color_hover",
-                "*button_secondary_border_color",
+                "*neutral_200",
             )
         )
         self.button_secondary_border_color_hover_dark = (
@@ -1814,11 +1894,11 @@ def set(
             or getattr(
                 self,
                 "button_secondary_border_color_hover_dark",
-                "*button_secondary_border_color",
+                "*neutral_500",
             )
         )
         self.button_secondary_text_color = button_secondary_text_color or getattr(
-            self, "button_secondary_text_color", "*neutral_700"
+            self, "button_secondary_text_color", "black"
         )
         self.button_secondary_text_color_dark = (
             button_secondary_text_color_dark
@@ -1840,26 +1920,42 @@ def set(
                 "*button_secondary_text_color",
             )
         )
-        self.button_shadow = button_shadow or getattr(self, "button_shadow", "none")
-        self.button_shadow_active = button_shadow_active or getattr(
-            self, "button_shadow_active", "none"
+        self.button_secondary_shadow = button_secondary_shadow or getattr(
+            self, "button_secondary_shadow", "*button_primary_shadow"
+        )
+        self.button_secondary_shadow_hover = button_secondary_shadow_hover or getattr(
+            self, "button_secondary_shadow_hover", "*button_secondary_shadow"
+        )
+        self.button_secondary_shadow_active = button_secondary_shadow_active or getattr(
+            self, "button_secondary_shadow_active", "*button_secondary_shadow"
+        )
+        self.button_secondary_shadow_dark = button_secondary_shadow_dark or getattr(
+            self, "button_secondary_shadow_dark", None
+        )
+        self.button_secondary_shadow_hover_dark = (
+            button_secondary_shadow_hover_dark
+            or getattr(
+                self, "button_secondary_shadow_hover_dark", "*button_secondary_shadow"
+            )
         )
-        self.button_shadow_hover = button_shadow_hover or getattr(
-            self, "button_shadow_hover", "none"
+        self.button_secondary_shadow_active_dark = (
+            button_secondary_shadow_active_dark
+            or getattr(
+                self, "button_secondary_shadow_active_dark", "*button_secondary_shadow"
+            )
         )
+
         self.button_small_padding = button_small_padding or getattr(
-            self, "button_small_padding", "*spacing_sm calc(2 * *spacing_sm)"
+            self, "button_small_padding", "*spacing_sm calc(1.5 * *spacing_sm)"
         )
         self.button_small_radius = button_small_radius or getattr(
-            self, "button_small_radius", "*radius_lg"
+            self, "button_small_radius", "*radius_md"
         )
         self.button_small_text_size = button_small_text_size or getattr(
-            self, "button_small_text_size", "*text_md"
+            self, "button_small_text_size", "*text_sm"
         )
         self.button_small_text_weight = button_small_text_weight or getattr(
             self, "button_small_text_weight", "400"
         )
-        self.button_transition = button_transition or getattr(
-            self, "button_transition", "background-color 0.2s ease"
-        )
+
         return self
diff --git a/gradio/themes/builder_app.py b/gradio/themes/builder_app.py
index 8d6dd5c2c6716..1faed9b93a39a 100644
--- a/gradio/themes/builder_app.py
+++ b/gradio/themes/builder_app.py
@@ -1,6 +1,6 @@
 import inspect
 import time
-from typing import Iterable
+from collections.abc import Iterable
 
 from gradio_client.documentation import document_fn
 
@@ -12,6 +12,9 @@
     gr.themes.Soft,
     gr.themes.Monochrome,
     gr.themes.Glass,
+    gr.themes.Origin,
+    gr.themes.Citrus,
+    gr.themes.Ocean,
 ]
 colors = gr.themes.Color.all
 sizes = gr.themes.Size.all
@@ -80,6 +83,7 @@ def get_doc_theme_var_groups():
     theme=gr.themes.Base(),
     css=css,
     title="Gradio Theme Builder",
+    head="<style id='theme_css'></style>",
 ) as demo:
     with gr.Row():
         with gr.Column(scale=1, elem_id="controls", min_width=400):
@@ -326,6 +330,8 @@ def get_doc_theme_var_groups():
                 interactive=True,
             )
 
+            gr.Interface(lambda x: x, "number", "textbox")
+
             with gr.Row():
                 slider1 = gr.Slider(label="Slider 1")
                 slider2 = gr.Slider(label="Slider 2")
@@ -435,6 +441,9 @@ def clear():
             with gr.Row():
                 with gr.Column(scale=2):
                     chatbot = gr.Chatbot([("Hello", "Hi")], label="Chatbot")
+                    multimodal = gr.MultimodalTextbox(
+                        interactive=True, show_label=False
+                    )
                     chat_btn = gr.Button("Add messages")
 
                     chat_btn.click(
@@ -462,7 +471,6 @@ def clear():
             None,
             None,
             js="""() => {
-                document.head.innerHTML += "<style id='theme_css'></style>";
                 let evt_listener = window.setTimeout(
                     () => {
                         load_theme_btn = document.querySelector('#load_theme');
@@ -598,6 +606,7 @@ def generate_theme_code(
                     gr.themes.Size,
                 ],
                 core_variables,
+                strict=False,
             ):
                 if base_value.name != final_value:
                     core_diffs[value_name] = final_value
@@ -649,7 +658,9 @@ def generate_theme_code(
                 if len(base_font_set) != len(theme_font_set) or any(
                     base_font.name != theme_font[0]
                     or isinstance(base_font, gr.themes.GoogleFont) != theme_font[1]
-                    for base_font, theme_font in zip(base_font_set, theme_font_set)
+                    for base_font, theme_font in zip(
+                        base_font_set, theme_font_set, strict=False
+                    )
                 ):
                     font_diffs[font_set_name] = [
                         f"gr.themes.GoogleFont('{font_name}')"
@@ -770,19 +781,19 @@ def render_variables(history, base_theme, *args):
 
             final_main_fonts = []
             font_weights = set()
-            for attr, val in zip(flat_variables, remaining_args):
+            for attr, val in zip(flat_variables, remaining_args, strict=False):
                 if "weight" in attr:
                     font_weights.add(val)
             font_weights = sorted(font_weights)
 
-            for main_font, is_google in zip(main_fonts, main_is_google):
+            for main_font, is_google in zip(main_fonts, main_is_google, strict=False):
                 if not main_font:
                     continue
                 if is_google:
                     main_font = gr.themes.GoogleFont(main_font, weights=font_weights)
                 final_main_fonts.append(main_font)
             final_mono_fonts = []
-            for mono_font, is_google in zip(mono_fonts, mono_is_google):
+            for mono_font, is_google in zip(mono_fonts, mono_is_google, strict=False):
                 if not mono_font:
                     continue
                 if is_google:
@@ -800,7 +811,7 @@ def render_variables(history, base_theme, *args):
                 font_mono=final_mono_fonts,
             )
 
-            theme.set(**dict(zip(flat_variables, remaining_args)))
+            theme.set(**dict(zip(flat_variables, remaining_args, strict=False)))
             new_step = (base_theme, args)
             if len(history) == 0 or str(history[-1]) != str(new_step):
                 history.append(new_step)
@@ -820,8 +831,8 @@ def render_variables(history, base_theme, *args):
                         spacing_size,
                         radius_size,
                     ),
-                    list(zip(main_fonts, main_is_google)),
-                    list(zip(mono_fonts, mono_is_google)),
+                    list(zip(main_fonts, main_is_google, strict=False)),
+                    list(zip(mono_fonts, mono_is_google, strict=False)),
                 ),
                 theme,
             )
diff --git a/gradio/themes/citrus.py b/gradio/themes/citrus.py
new file mode 100644
index 0000000000000..e07414dc25b12
--- /dev/null
+++ b/gradio/themes/citrus.py
@@ -0,0 +1,104 @@
+from __future__ import annotations
+
+from collections.abc import Iterable
+
+from gradio.themes.base import Base
+from gradio.themes.utils import colors, fonts, sizes
+
+
+class Citrus(Base):
+    def __init__(
+        self,
+        *,
+        primary_hue: colors.Color | str = colors.amber,
+        secondary_hue: colors.Color | str = colors.amber,
+        neutral_hue: colors.Color | str = colors.stone,
+        spacing_size: sizes.Size | str = sizes.spacing_lg,
+        radius_size: sizes.Size | str = sizes.radius_md,
+        text_size: sizes.Size | str = sizes.text_md,
+        font: fonts.Font | str | Iterable[fonts.Font | str] = (
+            fonts.GoogleFont("Ubuntu"),
+            "ui-sans-serif",
+            "system-ui",
+            "sans-serif",
+        ),
+        font_mono: fonts.Font | str | Iterable[fonts.Font | str] = (
+            fonts.GoogleFont("Roboto Mono"),
+            "ui-monospace",
+            "Consolas",
+            "monospace",
+        ),
+    ):
+        super().__init__(
+            primary_hue=primary_hue,
+            secondary_hue=secondary_hue,
+            neutral_hue=neutral_hue,
+            spacing_size=spacing_size,
+            radius_size=radius_size,
+            text_size=text_size,
+            font=font,
+            font_mono=font_mono,
+        )
+        self.name = "citrus"
+        super().set(
+            slider_color="*primary_400",
+            background_fill_primary="*neutral_50",
+            button_primary_background_fill="*primary_500",
+            button_primary_text_color="*button_secondary_text_color",
+            button_secondary_background_fill="*primary_400",
+            button_primary_background_fill_hover="*button_primary_background_fill",
+            button_secondary_background_fill_hover="*button_secondary_background_fill",
+            button_primary_shadow_hover="0px 5px 0px 0px *primary_400;",
+            button_primary_shadow="0px 3px 0px 0px *primary_400;",
+            button_primary_shadow_active="0px 2px 0px 0px *primary_400;",
+            button_secondary_shadow_hover="0px 5px 0px 0px *primary_300;",
+            button_secondary_shadow="0px 3px 0px 0px *primary_300;",
+            button_secondary_shadow_active="0px 2px 0px 0px *primary_300;",
+            input_shadow="0px -1px 0px 0px *neutral_300;",
+            input_shadow_focus="0px -1px 0px 0px *primary_300;",
+            input_background_fill="*neutral_50",
+            input_background_fill_focus="*primary_50",
+            block_shadow="0px 3px 0px 0px *neutral_300;",
+            checkbox_label_background_fill="*neutral_200",
+            checkbox_label_background_fill_hover="*checkbox_label_background_fill",
+            checkbox_label_background_fill_selected="*primary_400",
+            checkbox_label_border_color_selected="*primary_300",
+            checkbox_label_border_width="2px",
+            slider_color_dark="*primary_500",
+            button_primary_background_fill_dark="*primary_600",
+            button_secondary_text_color_dark="*neutral_900",
+            button_primary_text_color_dark="*button_secondary_text_color",
+            button_secondary_background_fill_dark="*primary_500",
+            button_primary_background_fill_hover_dark="*button_primary_background_fill",
+            button_secondary_background_fill_hover_dark="*button_secondary_background_fill",
+            button_primary_shadow_hover_dark="0px 5px 0px 0px *primary_700;",
+            button_primary_shadow_dark="0px 3px 0px 0px *primary_700;",
+            button_primary_shadow_active_dark="0px 2px 0px 0px *primary_700;",
+            button_secondary_shadow_hover_dark="0px 5px 0px 0px *primary_600;",
+            button_secondary_shadow_dark="0px 3px 0px 0px *primary_600;",
+            button_secondary_shadow_active_dark="0px 2px 0px 0px *primary_600;",
+            input_shadow_dark="0px -1px 0px 0px *neutral_700;",
+            input_shadow_focus_dark="0px -1px 0px 0px *primary_600;",
+            input_background_fill_dark="*neutral_900",
+            input_background_fill_focus_dark="none",
+            block_shadow_dark="0px 3px 0px 0px *neutral_700;",
+            checkbox_label_background_fill_dark="*neutral_700",
+            checkbox_label_background_fill_hover_dark="*checkbox_label_background_fill",
+            checkbox_label_background_fill_selected_dark="*primary_500",
+            checkbox_label_border_color_selected_dark="*primary_600",
+            checkbox_label_text_color_selected_dark="*button_primary_text_color",
+            checkbox_background_color_selected_dark="*primary_600",
+            checkbox_background_color_dark="*neutral_400",
+            checkbox_label_border_width_dark="2px",
+            button_transform_hover="translateY(-2px);",
+            button_transform_active="translateY(1px);",
+            button_transition="all 0.1s;",
+            button_border_width="0px",
+            panel_border_width="1px",
+            block_border_width="1px",
+            block_border_color="*neutral_300",
+            block_background_fill="*neutral_100",
+            input_border_width="1px",
+            block_label_shadow="none",
+            checkbox_shadow="none",
+        )
diff --git a/gradio/themes/default.py b/gradio/themes/default.py
index 8f5dd2d5a1954..e59b7fcb94d13 100644
--- a/gradio/themes/default.py
+++ b/gradio/themes/default.py
@@ -1,6 +1,6 @@
 from __future__ import annotations
 
-from typing import Iterable
+from collections.abc import Iterable
 
 from gradio.themes.base import Base
 from gradio.themes.utils import colors, fonts, sizes
@@ -12,7 +12,7 @@ def __init__(
         *,
         primary_hue: colors.Color | str = colors.orange,
         secondary_hue: colors.Color | str = colors.blue,
-        neutral_hue: colors.Color | str = colors.gray,
+        neutral_hue: colors.Color | str = colors.zinc,
         spacing_size: sizes.Size | str = sizes.spacing_md,
         radius_size: sizes.Size | str = sizes.radius_md,
         text_size: sizes.Size | str = sizes.text_md,
@@ -23,7 +23,7 @@ def __init__(
             "sans-serif",
         ),
         font_mono: fonts.Font | str | Iterable[fonts.Font | str] = (
-            fonts.GoogleFont("IBM Plex Mono"),
+            fonts.LocalFont("IBM Plex Mono"),
             "ui-monospace",
             "Consolas",
             "monospace",
@@ -49,44 +49,43 @@ def __init__(
             error_border_color_dark=colors.red.c500,
             error_icon_color=colors.red.c700,
             error_icon_color_dark=colors.red.c500,
-            # Transition
-            button_transition="none",
             # Shadows
-            button_shadow="*shadow_drop",
-            button_shadow_hover="*shadow_drop_lg",
-            button_shadow_active="*shadow_inset",
-            input_shadow="0 0 0 *shadow_spread transparent, *shadow_inset",
             input_shadow_focus="0 0 0 *shadow_spread *secondary_50, *shadow_inset",
             input_shadow_focus_dark="0 0 0 *shadow_spread *neutral_700, *shadow_inset",
-            checkbox_label_shadow="*shadow_drop",
-            block_shadow="*shadow_drop",
-            form_gap_width="1px",
             # Button borders
+            button_border_width="0px",
             input_border_width="1px",
             input_background_fill="white",
             # Gradients
             stat_background_fill="linear-gradient(to right, *primary_400, *primary_200)",
             stat_background_fill_dark="linear-gradient(to right, *primary_400, *primary_600)",
-            checkbox_label_background_fill="linear-gradient(to top, *neutral_50, white)",
-            checkbox_label_background_fill_dark="linear-gradient(to top, *neutral_900, *neutral_800)",
-            checkbox_label_background_fill_hover="linear-gradient(to top, *neutral_100, white)",
-            checkbox_label_background_fill_hover_dark="linear-gradient(to top, *neutral_900, *neutral_800)",
-            button_primary_background_fill="linear-gradient(to bottom right, *primary_100, *primary_300)",
-            button_primary_background_fill_dark="linear-gradient(to bottom right, *primary_500, *primary_600)",
-            button_primary_background_fill_hover="linear-gradient(to bottom right, *primary_100, *primary_200)",
-            button_primary_background_fill_hover_dark="linear-gradient(to bottom right, *primary_500, *primary_500)",
-            button_primary_border_color_dark="*primary_500",
-            button_secondary_background_fill="linear-gradient(to bottom right, *neutral_100, *neutral_200)",
-            button_secondary_background_fill_dark="linear-gradient(to bottom right, *neutral_600, *neutral_700)",
-            button_secondary_background_fill_hover="linear-gradient(to bottom right, *neutral_100, *neutral_100)",
-            button_secondary_background_fill_hover_dark="linear-gradient(to bottom right, *neutral_600, *neutral_600)",
-            button_cancel_background_fill=f"linear-gradient(to bottom right, {colors.red.c100}, {colors.red.c200})",
-            button_cancel_background_fill_dark=f"linear-gradient(to bottom right, {colors.red.c600}, {colors.red.c700})",
-            button_cancel_background_fill_hover=f"linear-gradient(to bottom right, {colors.red.c100}, {colors.red.c100})",
-            button_cancel_background_fill_hover_dark=f"linear-gradient(to bottom right, {colors.red.c600}, {colors.red.c600})",
-            button_cancel_border_color=colors.red.c200,
-            button_cancel_border_color_dark=colors.red.c600,
-            button_cancel_text_color=colors.red.c600,
+            checkbox_label_background_fill="*background_fill_primary",
+            checkbox_label_background_fill_dark="*neutral_800",
+            checkbox_label_background_fill_hover="*background_fill_secondary",
+            checkbox_label_background_fill_hover_dark="*checkbox_label_background_fill",
+            # Primary Button
+            button_primary_background_fill="*primary_500",
+            button_primary_background_fill_dark="*primary_600",
+            button_primary_background_fill_hover="*primary_600",
+            button_primary_background_fill_hover_dark="*primary_700",
+            button_primary_text_color="white",
+            button_primary_text_color_dark="white",
+            # Secondary Button
+            button_secondary_background_fill="*neutral_200",
+            button_secondary_background_fill_dark="*neutral_600",
+            button_secondary_background_fill_hover="*neutral_300",
+            button_secondary_background_fill_hover_dark="*neutral_700",
+            button_secondary_text_color="black",
+            button_secondary_text_color_dark="white",
+            # Cancel Button
+            button_cancel_background_fill=colors.red.c500,
+            button_cancel_background_fill_dark=colors.red.c700,
+            button_cancel_background_fill_hover=colors.red.c600,
+            button_cancel_background_fill_hover_dark=colors.red.c800,
+            button_cancel_text_color="white",
             button_cancel_text_color_dark="white",
+            button_cancel_text_color_hover="white",
+            button_cancel_text_color_hover_dark="white",
+            # Other
             border_color_accent_subdued="*primary_200",
         )
diff --git a/gradio/themes/glass.py b/gradio/themes/glass.py
index ec43ac696645b..f194546cad7f7 100644
--- a/gradio/themes/glass.py
+++ b/gradio/themes/glass.py
@@ -1,6 +1,6 @@
 from __future__ import annotations
 
-from typing import Iterable
+from collections.abc import Iterable
 
 from gradio.themes.base import Base
 from gradio.themes.utils import colors, fonts, sizes
@@ -10,9 +10,9 @@ class Glass(Base):
     def __init__(
         self,
         *,
-        primary_hue: colors.Color | str = colors.stone,
-        secondary_hue: colors.Color | str = colors.stone,
-        neutral_hue: colors.Color | str = colors.stone,
+        primary_hue: colors.Color | str = colors.blue,
+        secondary_hue: colors.Color | str = colors.slate,
+        neutral_hue: colors.Color | str = colors.slate,
         spacing_size: sizes.Size | str = sizes.spacing_sm,
         radius_size: sizes.Size | str = sizes.radius_sm,
         text_size: sizes.Size | str = sizes.text_sm,
@@ -24,7 +24,7 @@ def __init__(
             "sans-serif",
         ),
         font_mono: fonts.Font | str | Iterable[fonts.Font | str] = (
-            fonts.GoogleFont("IBM Plex Mono"),
+            fonts.LocalFont("IBM Plex Mono"),
             "ui-monospace",
             "Consolas",
             "monospace",
@@ -42,54 +42,56 @@ def __init__(
         )
         self.name = "glass"
         super().set(
-            body_background_fill_dark="*primary_800",
-            background_fill_secondary_dark="*primary_800",
-            block_background_fill_dark="*primary_800",
-            button_primary_background_fill="linear-gradient(180deg, *primary_50 0%, *primary_200 50%, *primary_300 50%, *primary_200 100%)",
-            button_primary_background_fill_hover="linear-gradient(180deg, *primary_100 0%, *primary_200 50%, *primary_300 50%, *primary_200 100%)",
-            button_primary_background_fill_dark="linear-gradient(180deg, *primary_400 0%, *primary_500 50%, *primary_600 50%, *primary_500 100%)",
-            button_primary_background_fill_hover_dark="linear-gradient(180deg, *primary_400 0%, *primary_500 50%, *primary_600 50%, *primary_500 100%)",
-            button_secondary_background_fill="*button_primary_background_fill",
-            button_secondary_background_fill_hover="*button_primary_background_fill_hover",
-            button_secondary_background_fill_dark="*button_primary_background_fill",
-            button_secondary_background_fill_hover_dark="*button_primary_background_fill_hover",
-            button_cancel_background_fill="*button_primary_background_fill",
-            button_cancel_background_fill_hover="*button_primary_background_fill_hover",
-            button_cancel_background_fill_dark="*button_primary_background_fill",
-            button_cancel_background_fill_hover_dark="*button_primary_background_fill_hover",
-            button_cancel_border_color="*button_secondary_border_color",
-            button_cancel_border_color_dark="*button_secondary_border_color",
-            button_cancel_text_color="*button_secondary_text_color",
+            body_background_fill_dark="*secondary_800",
+            background_fill_secondary_dark="*secondary_800",
+            block_background_fill_dark="*secondary_800",
+            button_primary_background_fill="linear-gradient(180deg, *primary_100 0%, *primary_200 30%)",
+            button_primary_background_fill_hover="linear-gradient(180deg, *primary_100 0%, *primary_200 30%)",
+            button_primary_background_fill_dark="linear-gradient(180deg, *primary_500 0%, *primary_600 30%)",
+            button_primary_background_fill_hover_dark="linear-gradient(180deg, *primary_500 0%, *primary_600 30%)",
+            button_primary_text_color="*body_text_color",
+            button_primary_border_color="*primary_200",
+            button_primary_border_color_hover="*button_primary_border_color",
+            button_secondary_background_fill="linear-gradient(180deg, *secondary_100 0%, *secondary_200 30%)",
+            button_secondary_background_fill_hover="linear-gradient(180deg, *secondary_100 0%, *secondary_200 30%)",
+            button_secondary_background_fill_dark="linear-gradient(180deg, *secondary_500 0%, *secondary_600 30%)",
+            button_secondary_background_fill_hover_dark="linear-gradient(180deg, *secondary_500 0%, *secondary_600 30%)",
             checkbox_border_width="0px",
+            checkbox_border_width_dark="0px",
             checkbox_label_background_fill="*button_secondary_background_fill",
             checkbox_label_background_fill_dark="*button_secondary_background_fill",
             checkbox_label_background_fill_hover="*button_secondary_background_fill_hover",
             checkbox_label_background_fill_hover_dark="*button_secondary_background_fill_hover",
             checkbox_label_border_width="1px",
-            checkbox_background_color_dark="*primary_600",
+            checkbox_label_border_width_dark="1px",
+            checkbox_label_border_color_dark="*secondary_700",
+            checkbox_background_color_dark="*secondary_400",
             button_border_width="1px",
-            button_shadow_active="*shadow_inset",
-            input_background_fill="linear-gradient(0deg, *secondary_50 0%, white 100%)",
+            shadow_inset="rgba(0,0,0,0.05) 0px 1px 2px 0px inset",
+            button_primary_shadow_active="*shadow_inset",
+            button_secondary_shadow_active="*shadow_inset",
+            input_background_fill="linear-gradient(0deg, *secondary_100 0%, white 100%)",
             input_background_fill_dark="*secondary_600",
-            input_border_color_focus_dark="*primary_400",
+            input_border_color_focus_dark="*secondary_500",
             input_border_width="1px",
-            slider_color="*primary_400",
-            block_label_text_color="*primary_500",
-            block_title_text_color="*primary_500",
+            input_border_color_dark="*secondary_600",
+            block_label_text_color="*secondary_500",
+            block_title_text_color="*secondary_500",
             block_label_text_weight="600",
             block_title_text_weight="600",
             block_label_text_size="*text_md",
             block_title_text_size="*text_md",
-            block_label_background_fill="*primary_200",
-            block_label_background_fill_dark="*primary_700",
+            block_label_background_fill="*secondary_200",
+            block_label_background_fill_dark="*secondary_700",
+            block_label_border_color_dark="*secondary_600",
             block_border_width="0px",
             block_border_width_dark="1px",
+            block_border_color_dark="*secondary_600",
             panel_border_width="1px",
-            border_color_primary_dark="*primary_500",
+            border_color_primary_dark="*secondary_600",
             background_fill_primary_dark="*neutral_700",
-            background_fill_secondary="*primary_100",
-            block_background_fill="*primary_50",
-            block_shadow="*primary_400 0px 0px 3px 0px",
+            background_fill_secondary="*secondary_100",
+            block_background_fill="*secondary_50",
             table_even_background_fill_dark="*neutral_700",
             table_odd_background_fill_dark="*neutral_700",
         )
diff --git a/gradio/themes/monochrome.py b/gradio/themes/monochrome.py
index b0911953d9961..0184f1bef99a1 100644
--- a/gradio/themes/monochrome.py
+++ b/gradio/themes/monochrome.py
@@ -1,6 +1,6 @@
 from __future__ import annotations
 
-from typing import Iterable
+from collections.abc import Iterable
 
 from gradio.themes.base import Base
 from gradio.themes.utils import colors, fonts, sizes
@@ -17,13 +17,13 @@ def __init__(
         radius_size: sizes.Size | str = sizes.radius_none,
         text_size: sizes.Size | str = sizes.text_md,
         font: fonts.Font | str | Iterable[fonts.Font | str] = (
-            fonts.GoogleFont("Quicksand"),
+            fonts.GoogleFont("Lora"),
             "ui-sans-serif",
             "system-ui",
             "sans-serif",
         ),
         font_mono: fonts.Font | str | Iterable[fonts.Font | str] = (
-            fonts.GoogleFont("IBM Plex Mono"),
+            fonts.LocalFont("IBM Plex Mono"),
             "ui-monospace",
             "Consolas",
             "monospace",
@@ -56,36 +56,41 @@ def __init__(
             background_fill_secondary_dark="*neutral_800",
             block_background_fill_dark="*neutral_800",
             input_background_fill_dark="*neutral_700",
-            # Button Colors
+            # Buttons
+            button_border_width="2px",
+            button_primary_border_color="*neutral_900",
             button_primary_background_fill="*neutral_900",
             button_primary_background_fill_hover="*neutral_700",
             button_primary_text_color="white",
             button_primary_background_fill_dark="*neutral_600",
             button_primary_background_fill_hover_dark="*neutral_600",
             button_primary_text_color_dark="white",
-            button_secondary_background_fill="*button_primary_background_fill",
-            button_secondary_background_fill_hover="*button_primary_background_fill_hover",
-            button_secondary_text_color="*button_primary_text_color",
-            button_cancel_background_fill="*button_primary_background_fill",
-            button_cancel_background_fill_hover="*button_primary_background_fill_hover",
-            button_cancel_text_color="*button_primary_text_color",
-            checkbox_label_background_fill="*button_primary_background_fill",
-            checkbox_label_background_fill_hover="*button_primary_background_fill_hover",
-            checkbox_label_text_color="*button_primary_text_color",
-            checkbox_background_color_selected="*neutral_600",
-            checkbox_background_color_dark="*neutral_700",
-            checkbox_background_color_selected_dark="*neutral_700",
-            checkbox_border_color_selected_dark="*neutral_800",
+            button_secondary_border_color="*neutral_900",
+            button_secondary_background_fill="white",
+            button_secondary_background_fill_hover="white",
+            button_secondary_background_fill_dark="*neutral_700",
+            button_secondary_border_color_hover="*neutral_400",
+            button_secondary_text_color="*neutral_900",
+            button_secondary_text_color_hover="*neutral_400",
+            button_cancel_border_color="*neutral_900",
+            button_cancel_background_fill="*button_secondary_background_fill",
+            button_cancel_background_fill_hover="*button_secondary_background_fill_hover",
+            button_cancel_text_color="*button_secondary_text_color",
+            checkbox_label_border_color="*checkbox_background_color",
+            checkbox_label_border_color_hover="*button_secondary_border_color_hover",
+            checkbox_label_border_color_selected="*button_primary_border_color",
+            checkbox_label_border_width="*button_border_width",
+            checkbox_background_color="*input_background_fill",
+            checkbox_label_background_fill_selected="*button_primary_background_fill",
+            checkbox_label_text_color_selected="*button_primary_text_color",
             # Padding
-            checkbox_label_padding="*spacing_md",
+            checkbox_label_padding="*spacing_sm",
             button_large_padding="*spacing_lg",
             button_small_padding="*spacing_sm",
             # Borders
-            block_border_width="0px",
-            block_border_width_dark="1px",
             shadow_drop_lg="0 1px 4px 0 rgb(0 0 0 / 0.1)",
-            block_shadow="*shadow_drop_lg",
-            block_shadow_dark="none",
+            block_shadow="none",
+            block_shadow_dark="*shadow_drop_lg",
             # Block Labels
             block_title_text_weight="600",
             block_label_text_weight="600",
diff --git a/gradio/themes/ocean.py b/gradio/themes/ocean.py
new file mode 100644
index 0000000000000..2a32a92f42da4
--- /dev/null
+++ b/gradio/themes/ocean.py
@@ -0,0 +1,73 @@
+from __future__ import annotations
+
+from collections.abc import Iterable
+
+from gradio.themes.base import Base
+from gradio.themes.utils import colors, fonts, sizes
+
+
+class Ocean(Base):
+    def __init__(
+        self,
+        *,
+        primary_hue: colors.Color | str = colors.emerald,
+        secondary_hue: colors.Color | str = colors.sky,
+        neutral_hue: colors.Color | str = colors.zinc,
+        spacing_size: sizes.Size | str = sizes.spacing_md,
+        radius_size: sizes.Size | str = sizes.radius_xxl,
+        text_size: sizes.Size | str = sizes.text_md,
+        font: fonts.Font | str | Iterable[fonts.Font | str] = (
+            fonts.GoogleFont("IBM Plex Sans"),
+            "ui-sans-serif",
+            "system-ui",
+            "sans-serif",
+        ),
+        font_mono: fonts.Font | str | Iterable[fonts.Font | str] = (
+            fonts.GoogleFont("Inter"),
+            "ui-monospace",
+            "Consolas",
+            "monospace",
+        ),
+    ):
+        super().__init__(
+            primary_hue=primary_hue,
+            secondary_hue=secondary_hue,
+            neutral_hue=neutral_hue,
+            spacing_size=spacing_size,
+            radius_size=radius_size,
+            text_size=text_size,
+            font=font,
+            font_mono=font_mono,
+        )
+        self.name = "ocean"
+        super().set(
+            button_border_width="0px",
+            checkbox_label_border_width="1px",
+            button_transform_hover="scale(1.02)",
+            button_transition="all 0.1s ease-in-out",
+            slider_color="*primary_400",
+            button_primary_background_fill="linear-gradient(120deg, *secondary_500 0%, *primary_300 60%, *primary_400 100%)",
+            button_primary_background_fill_hover="linear-gradient(120deg, *secondary_400 0%, *primary_300 60%, *primary_300 100%)",
+            button_primary_text_color="*button_secondary_text_color",
+            button_secondary_background_fill="linear-gradient(120deg, *neutral_300 0%, *neutral_100 60%, *neutral_200 100%)",
+            button_secondary_background_fill_hover="linear-gradient(120deg, *neutral_200 0%, *neutral_100 60%, *neutral_100 100%)",
+            checkbox_label_background_fill_selected="linear-gradient(120deg, *primary_400 0%, *primary_300 60%, *primary_400 100%)",
+            checkbox_label_border_color_selected="*primary_400",
+            checkbox_background_color_selected="*primary_400",
+            checkbox_label_text_color_selected="*button_secondary_text_color",
+            slider_color_dark="*primary_500",
+            button_primary_background_fill_dark="linear-gradient(120deg, *secondary_600 0%, *primary_500 60%, *primary_600 100%)",
+            button_primary_background_fill_hover_dark="linear-gradient(120deg, *secondary_500 0%, *primary_500 60%, *primary_500 100%)",
+            button_primary_text_color_dark="*button_secondary_text_color",
+            button_secondary_background_fill_dark="linear-gradient(120deg, *neutral_700 0%, *neutral_600 60%, *neutral_700 100%)",
+            button_secondary_background_fill_hover_dark="linear-gradient(120deg, *neutral_600 0%, *neutral_600 60%, *neutral_700 100%)",
+            checkbox_label_background_fill_selected_dark="linear-gradient(120deg, *primary_600 0%, *primary_500 60%, *primary_600 100%)",
+            checkbox_label_border_color_selected_dark="*primary_600",
+            checkbox_background_color_selected_dark="*primary_600",
+            checkbox_label_text_color_selected_dark="*button_secondary_text_color",
+            block_shadow="*shadow_drop_lg",
+            button_secondary_shadow_hover="*shadow_drop_lg",
+            button_primary_shadow_hover="0 1px 3px 0 *primary_200, 0 1px 2px -1px *primary_200",
+            button_secondary_shadow_dark="none",
+            button_primary_shadow_dark="none",
+        )
diff --git a/gradio/themes/origin.py b/gradio/themes/origin.py
new file mode 100644
index 0000000000000..efd9f51f8d82e
--- /dev/null
+++ b/gradio/themes/origin.py
@@ -0,0 +1,115 @@
+from __future__ import annotations
+
+from collections.abc import Iterable
+
+from gradio.themes.base import Base
+from gradio.themes.utils import colors, fonts, sizes
+
+
+class Origin(Base):
+    def __init__(
+        self,
+        *,
+        primary_hue: colors.Color | str = colors.orange,
+        secondary_hue: colors.Color | str = colors.blue,
+        neutral_hue: colors.Color | str = colors.gray,
+        spacing_size: sizes.Size | str = sizes.spacing_md,
+        radius_size: sizes.Size | str = sizes.radius_md,
+        text_size: sizes.Size | str = sizes.text_md,
+        font: fonts.Font | str | Iterable[fonts.Font | str] = (
+            fonts.GoogleFont("Source Sans Pro"),
+            "ui-sans-serif",
+            "system-ui",
+            "sans-serif",
+        ),
+        font_mono: fonts.Font | str | Iterable[fonts.Font | str] = (
+            fonts.LocalFont("IBM Plex Mono"),
+            "ui-monospace",
+            "Consolas",
+            "monospace",
+        ),
+    ):
+        super().__init__(
+            primary_hue=primary_hue,
+            secondary_hue=secondary_hue,
+            neutral_hue=neutral_hue,
+            spacing_size=spacing_size,
+            radius_size=radius_size,
+            text_size=text_size,
+            font=font,
+            font_mono=font_mono,
+        )
+        self.name = "origin"
+        super().set(
+            # Colors
+            input_background_fill_dark="*neutral_800",
+            error_background_fill=colors.red.c50,
+            error_background_fill_dark="*neutral_900",
+            error_border_color=colors.red.c700,
+            error_border_color_dark=colors.red.c500,
+            error_icon_color=colors.red.c700,
+            error_icon_color_dark=colors.red.c500,
+            # Transition
+            button_transition="none",
+            # Shadows
+            button_primary_shadow="*shadow_drop",
+            button_primary_shadow_hover="*shadow_drop_lg",
+            button_primary_shadow_active="*shadow_inset",
+            button_secondary_shadow="*shadow_drop",
+            button_secondary_shadow_hover="*shadow_drop_lg",
+            button_secondary_shadow_active="*shadow_inset",
+            input_shadow="0 0 0 *shadow_spread transparent, *shadow_inset",
+            input_shadow_focus="0 0 0 *shadow_spread *secondary_50, *shadow_inset",
+            input_shadow_focus_dark="0 0 0 *shadow_spread *neutral_700, *shadow_inset",
+            checkbox_label_shadow="*shadow_drop",
+            block_shadow="*shadow_drop",
+            form_gap_width="1px",
+            # Button borders
+            button_border_width="1px",
+            button_border_width_dark="1px",
+            input_border_width="1px",
+            input_background_fill="white",
+            # Gradients
+            stat_background_fill="linear-gradient(to right, *primary_400, *primary_200)",
+            stat_background_fill_dark="linear-gradient(to right, *primary_400, *primary_600)",
+            checkbox_label_background_fill="linear-gradient(to top, *neutral_50, white)",
+            checkbox_label_background_fill_dark="linear-gradient(to top, *neutral_900, *neutral_800)",
+            checkbox_label_background_fill_hover="linear-gradient(to top, *neutral_100, white)",
+            checkbox_label_background_fill_hover_dark="linear-gradient(to top, *neutral_900, *neutral_800)",
+            # Primary Button
+            button_primary_background_fill="linear-gradient(to bottom right, *primary_100, *primary_300)",
+            button_primary_background_fill_dark="linear-gradient(to bottom right, *primary_500, *primary_600)",
+            button_primary_background_fill_hover="linear-gradient(to bottom right, *primary_100, *primary_200)",
+            button_primary_background_fill_hover_dark="linear-gradient(to bottom right, *primary_500, *primary_500)",
+            button_primary_border_color="*primary_200",
+            button_primary_border_color_dark="*primary_500",
+            button_primary_border_color_hover="*button_primary_border_color",
+            button_primary_border_color_hover_dark="*primary_500",
+            button_primary_text_color="*primary_600",
+            button_primary_text_color_dark="white",
+            # Secondary Button
+            button_secondary_background_fill="linear-gradient(to bottom right, *neutral_100, *neutral_200)",
+            button_secondary_background_fill_dark="linear-gradient(to bottom right, *neutral_600, *neutral_700)",
+            button_secondary_background_fill_hover="linear-gradient(to bottom right, *neutral_100, *neutral_100)",
+            button_secondary_background_fill_hover_dark="linear-gradient(to bottom right, *neutral_600, *neutral_600)",
+            button_secondary_border_color="*neutral_200",
+            button_secondary_border_color_dark="*neutral_600",
+            button_secondary_border_color_hover="*neutral_200",
+            button_secondary_border_color_hover_dark="*neutral_600",
+            button_secondary_text_color="*neutral_800",
+            button_secondary_text_color_dark="white",
+            # Cancel Button
+            button_cancel_background_fill=f"linear-gradient(to bottom right, {colors.red.c100}, {colors.red.c200})",
+            button_cancel_background_fill_dark=f"linear-gradient(to bottom right, {colors.red.c600}, {colors.red.c700})",
+            button_cancel_background_fill_hover=f"linear-gradient(to bottom right, {colors.red.c100}, {colors.red.c100})",
+            button_cancel_background_fill_hover_dark=f"linear-gradient(to bottom right, {colors.red.c600}, {colors.red.c600})",
+            button_cancel_border_color=colors.red.c200,
+            button_cancel_border_color_dark=colors.red.c600,
+            button_cancel_border_color_hover=colors.red.c200,
+            button_cancel_border_color_hover_dark=colors.red.c600,
+            button_cancel_text_color=colors.red.c600,
+            button_cancel_text_color_dark="white",
+            # Other
+            border_color_accent_subdued="*primary_200",
+            button_transform_hover="none",
+        )
diff --git a/gradio/themes/soft.py b/gradio/themes/soft.py
index 5d9e30e57bb5b..f5ef2e4a04fab 100644
--- a/gradio/themes/soft.py
+++ b/gradio/themes/soft.py
@@ -1,6 +1,6 @@
 from __future__ import annotations
 
-from typing import Iterable
+from collections.abc import Iterable
 
 from gradio.themes.base import Base
 from gradio.themes.utils import colors, fonts, sizes
@@ -17,13 +17,13 @@ def __init__(
         radius_size: sizes.Size | str = sizes.radius_md,
         text_size: sizes.Size | str = sizes.text_md,
         font: fonts.Font | str | Iterable[fonts.Font | str] = (
-            fonts.GoogleFont("Montserrat"),
+            fonts.LocalFont("Montserrat"),
             "ui-sans-serif",
             "system-ui",
             "sans-serif",
         ),
         font_mono: fonts.Font | str | Iterable[fonts.Font | str] = (
-            fonts.GoogleFont("IBM Plex Mono"),
+            fonts.LocalFont("IBM Plex Mono"),
             "ui-monospace",
             "Consolas",
             "monospace",
@@ -73,10 +73,13 @@ def __init__(
             checkbox_shadow="none",
             # Buttons
             shadow_spread="6px",
-            button_shadow="*shadow_drop_lg",
-            button_shadow_hover="*shadow_drop_lg",
+            button_primary_shadow="*shadow_drop_lg",
+            button_primary_shadow_hover="*shadow_drop_lg",
+            button_primary_shadow_active="*shadow_inset",
+            button_secondary_shadow="*shadow_drop_lg",
+            button_secondary_shadow_hover="*shadow_drop_lg",
+            button_secondary_shadow_active="*shadow_inset",
             checkbox_label_shadow="*shadow_drop_lg",
-            button_shadow_active="*shadow_inset",
             button_primary_background_fill="*primary_500",
             button_primary_background_fill_hover="*primary_400",
             button_primary_background_fill_hover_dark="*primary_500",
diff --git a/gradio/themes/utils/colors.py b/gradio/themes/utils/colors.py
index 6b2d975bdd524..51c67e242e8e7 100644
--- a/gradio/themes/utils/colors.py
+++ b/gradio/themes/utils/colors.py
@@ -83,7 +83,7 @@ def expand(self) -> list[str]:
     c100="#f4f4f5",
     c200="#e4e4e7",
     c300="#d4d4d8",
-    c400="#a1a1aa",
+    c400="#bbbbc2",
     c500="#71717a",
     c600="#52525b",
     c700="#3f3f46",
@@ -137,7 +137,7 @@ def expand(self) -> list[str]:
     name="orange",
     c50="#fff7ed",
     c100="#ffedd5",
-    c200="#fed7aa",
+    c200="#ffddb3",
     c300="#fdba74",
     c400="#fb923c",
     c500="#f97316",
diff --git a/gradio/themes/utils/fonts.py b/gradio/themes/utils/fonts.py
index 5525c2c4d5809..4d2b8393e9ff1 100644
--- a/gradio/themes/utils/fonts.py
+++ b/gradio/themes/utils/fonts.py
@@ -1,7 +1,8 @@
 from __future__ import annotations
 
 import json
-from typing import Iterable
+import textwrap
+from collections.abc import Iterable
 
 
 class FontEncoder(json.JSONEncoder):
@@ -10,7 +11,14 @@ def default(self, obj):
             return {
                 "__gradio_font__": True,
                 "name": obj.name,
-                "class": "google" if isinstance(obj, GoogleFont) else "font",
+                "class": "google"
+                if isinstance(obj, GoogleFont)
+                else "local"
+                if isinstance(obj, LocalFont)
+                else "font",
+                "weights": obj.weights
+                if isinstance(obj, (GoogleFont, LocalFont))
+                else None,
             }
         # Let the base class default method raise the TypeError
         return json.JSONEncoder.default(self, obj)
@@ -19,7 +27,19 @@ def default(self, obj):
 def as_font(dct):
     if "__gradio_font__" in dct:
         name = dct["name"]
-        return GoogleFont(name) if dct["class"] == "google" else Font(name)
+        if dct["class"] == "google":
+            return (
+                GoogleFont(name, weights=dct["weights"])
+                if "weights" in dct
+                else GoogleFont(name)
+            )
+        if dct["class"] == "local":
+            return (
+                LocalFont(name, weights=dct["weights"])
+                if "weights" in dct
+                else LocalFont(name)
+            )
+        return Font(name)
     return dct
 
 
@@ -34,8 +54,8 @@ def __str__(self) -> str:
             else f"'{self.name}'"
         )
 
-    def stylesheet(self) -> str:
-        return None
+    def stylesheet(self) -> dict:
+        return {"url": None, "css": None}
 
     def __eq__(self, other: Font) -> bool:
         return self.name == other.name and self.stylesheet() == other.stylesheet()
@@ -52,5 +72,35 @@ def __init__(self, name: str, weights: Iterable[int] = (400, 600)):
         self.name = name
         self.weights = weights
 
-    def stylesheet(self) -> str:
-        return f'https://fonts.googleapis.com/css2?family={self.name.replace(" ", "+")}:wght@{";".join(str(weight) for weight in self.weights)}&display=swap'
+    def stylesheet(self) -> dict:
+        url = f'https://fonts.googleapis.com/css2?family={self.name.replace(" ", "+")}:wght@{";".join(str(weight) for weight in self.weights)}&display=swap'
+        return {"url": url, "css": None}
+
+
+class LocalFont(Font):
+    def __init__(self, name: str, weights: Iterable[int] = (400, 700)):
+        super().__init__(name)
+        self.weights = weights
+
+    def stylesheet(self) -> dict:
+        css_template = textwrap.dedent("""
+            @font-face {{
+                font-family: '{name}';
+                src: url('static/fonts/{file_name}/{file_name}-{weight}.woff2') format('woff2');
+                font-weight: {weight};
+                font-style: normal;
+            }}
+            """)
+        css_rules = []
+        for weight in self.weights:
+            weight_name = (
+                "Regular" if weight == 400 else "Bold" if weight == 700 else str(weight)
+            )
+            css_rules.append(
+                css_template.format(
+                    name=self.name,
+                    file_name=self.name.replace(" ", ""),
+                    weight=weight_name,
+                )
+            )
+        return {"url": None, "css": "\n".join(css_rules)}
diff --git a/gradio/themes/utils/sizes.py b/gradio/themes/utils/sizes.py
index 99ed6b1ce447d..164c56ebbd722 100644
--- a/gradio/themes/utils/sizes.py
+++ b/gradio/themes/utils/sizes.py
@@ -65,6 +65,17 @@ def expand(self) -> list[str]:
     xxl="24px",
 )
 
+radius_xxl = Size(
+    xxs="6px",
+    xs="8px",
+    sm="10px",
+    md="20px",
+    lg="24px",
+    xl="28px",
+    xxl="32px",
+    name="radius_xxl",
+)
+
 spacing_sm = Size(
     name="spacing_sm",
     xxs="1px",
diff --git a/gradio/tunneling.py b/gradio/tunneling.py
index b73602bffd5e7..0d7bf4d9b8b5b 100644
--- a/gradio/tunneling.py
+++ b/gradio/tunneling.py
@@ -7,30 +7,43 @@
 import subprocess
 import sys
 import time
-import warnings
 from pathlib import Path
-from typing import List
 
 import httpx
 
-VERSION = "0.2"
-CURRENT_TUNNELS: List["Tunnel"] = []
+from gradio.exceptions import ChecksumMismatchError
+
+VERSION = "0.3"
+CURRENT_TUNNELS: list["Tunnel"] = []
 
 machine = platform.machine()
 if machine == "x86_64":
     machine = "amd64"
+elif machine == "aarch64":
+    machine = "arm64"
 
 BINARY_REMOTE_NAME = f"frpc_{platform.system().lower()}_{machine.lower()}"
 EXTENSION = ".exe" if os.name == "nt" else ""
 BINARY_URL = f"https://cdn-media.huggingface.co/frpc-gradio-{VERSION}/{BINARY_REMOTE_NAME}{EXTENSION}"
 
 CHECKSUMS = {
-    "https://cdn-media.huggingface.co/frpc-gradio-0.2/frpc_windows_amd64.exe": "cdd756e16622e0e60b697022d8da827a11fefe689325861c58c1003f2f8aa519",
-    "https://cdn-media.huggingface.co/frpc-gradio-0.2/frpc_linux_amd64": "fb74b665633589410540c49dfcef5b6f0fd4a9bd7c9558bcdee2f0e43da0774d",
-    "https://cdn-media.huggingface.co/frpc-gradio-0.2/frpc_linux_arm64": "af13b93897512079ead398224bd58bbaa136fcc5679af023780ee6c0538b3d82",
-    "https://cdn-media.huggingface.co/frpc-gradio-0.2/frpc_darwin_amd64": "6d3bd9f7e92e82fe557ba1d223bdd25317fbc296173a829601926526263c6092",
-    "https://cdn-media.huggingface.co/frpc-gradio-0.2/frpc_darwin_arm64": "0227ae6dafbe59d4e2c4a827d983ecc463eaa61f152216a3ec809c429c08eb31",
+    "https://cdn-media.huggingface.co/frpc-gradio-0.3/frpc_windows_amd64.exe": "14bc0ea470be5d67d79a07412bd21de8a0a179c6ac1116d7764f68e942dc9ceb",
+    "https://cdn-media.huggingface.co/frpc-gradio-0.3/frpc_linux_amd64": "c791d1f047b41ff5885772fc4bf20b797c6059bbd82abb9e31de15e55d6a57c4",
+    "https://cdn-media.huggingface.co/frpc-gradio-0.3/frpc_linux_arm64": "823ced25104de6dc3c9f4798dbb43f20e681207279e6ab89c40e2176ccbf70cd",
+    "https://cdn-media.huggingface.co/frpc-gradio-0.3/frpc_darwin_amd64": "930f8face3365810ce16689da81b7d1941fda4466225a7bbcbced9a2916a6e15",
+    "https://cdn-media.huggingface.co/frpc-gradio-0.3/frpc_darwin_arm64": "dfac50c690aca459ed5158fad8bfbe99f9282baf4166cf7c410a6673fbc1f327",
+    "https://cdn-media.huggingface.co/frpc-gradio-0.3/frpc_linux_arm": "4b563beb2e36c448cc688174e20b53af38dc1ff2b5e362d4ddd1401f2affbfb7",
+    "https://cdn-media.huggingface.co/frpc-gradio-0.3/frpc_freebsd_386": "cb0a56c764ecf96dd54ed601d240c564f060ee4e58202d65ffca17c1a51ce19c",
+    "https://cdn-media.huggingface.co/frpc-gradio-0.3/frpc_freebsd_amd64": "516d9e6903513869a011ddcd1ec206167ad1eb5dd6640d21057acc258edecbbb",
+    "https://cdn-media.huggingface.co/frpc-gradio-0.3/frpc_linux_386": "4c2f2a48cd71571498c0ac8a4d42a055f22cb7f14b4b5a2b0d584220fd60a283",
+    "https://cdn-media.huggingface.co/frpc-gradio-0.3/frpc_linux_mips": "b309ecd594d4f0f7f33e556a80d4b67aef9319c00a8334648a618e56b23cb9e0",
+    "https://cdn-media.huggingface.co/frpc-gradio-0.3/frpc_linux_mips64": "0372ef5505baa6f3b64c6295a86541b24b7b0dbe4ef28b344992e21f47624b7b",
+    "https://cdn-media.huggingface.co/frpc-gradio-0.3/frpc_linux_riscv64": "1658eed7e8c14ea76e1d95749d58441ce24147c3d559381832c725c29cfc3df3",
+    "https://cdn-media.huggingface.co/frpc-gradio-0.3/frpc_linux_mipsle": "a2aaba16961d3372b79bd7a28976fcd0f0bbaebc2b50d5a7a71af2240747960f",
+    "https://cdn-media.huggingface.co/frpc-gradio-0.3/frpc_windows_386.exe": "721b90550195a83e15f2176d8f85a48d5a25822757cb872e9723d4bccc4e5bb6",
+    "https://cdn-media.huggingface.co/frpc-gradio-0.3/frpc_linux_mips64le": "796481edd609f31962b45cc0ab4c9798d040205ae3bf354ed1b72fb432d796b8",
 }
+
 CHUNK_SIZE = 128
 
 BINARY_FILENAME = f"{BINARY_REMOTE_NAME}_v{VERSION}"
@@ -43,6 +56,8 @@
     "Please check the appended log from frpc for more information:"
 )
 
+CERTIFICATE_PATH = ".gradio/certificate.pem"
+
 
 class Tunnel:
     def __init__(self, remote_host, remote_port, local_host, local_port, share_token):
@@ -81,9 +96,7 @@ def download_binary():
                 calculated_hash = sha.hexdigest()
 
                 if calculated_hash != CHECKSUMS[BINARY_URL]:
-                    warnings.warn(
-                        f"Checksum of downloaded binary for creating share links does not match expected value. Please verify the integrity of the downloaded binary located at {BINARY_PATH}."
-                    )
+                    raise ChecksumMismatchError()
 
     def start_tunnel(self) -> str:
         self.download_binary()
@@ -114,6 +127,9 @@ def _start_tunnel(self, binary: str) -> str:
             "--server_addr",
             f"{self.remote_host}:{self.remote_port}",
             "--disable_log_color",
+            "--tls_enable",
+            "--tls_trusted_ca_file",
+            CERTIFICATE_PATH,
         ]
         self.proc = subprocess.Popen(
             command, stdout=subprocess.PIPE, stderr=subprocess.PIPE
diff --git a/gradio/utils.py b/gradio/utils.py
index f24af9fb416b7..f82b6990c731f 100644
--- a/gradio/utils.py
+++ b/gradio/utils.py
@@ -16,6 +16,8 @@
 import pkgutil
 import posixpath
 import re
+import shutil
+import subprocess
 import sys
 import tempfile
 import threading
@@ -23,10 +25,18 @@
 import traceback
 import typing
 import urllib.parse
+import uuid
 import warnings
 from abc import ABC, abstractmethod
 from collections import OrderedDict
-from collections.abc import MutableMapping
+from collections.abc import (
+    Callable,
+    Hashable,
+    Iterable,
+    Iterator,
+    MutableMapping,
+    Sequence,
+)
 from contextlib import contextmanager
 from functools import wraps
 from io import BytesIO
@@ -35,14 +45,9 @@
 from typing import (
     TYPE_CHECKING,
     Any,
-    Callable,
     Generic,
-    Iterable,
-    Iterator,
-    List,
     Literal,
     Optional,
-    Sequence,
     TypeVar,
 )
 
@@ -62,7 +67,6 @@
     UserProvidedPath,
 )
 from gradio.exceptions import Error, InvalidPathError
-from gradio.strings import en
 
 if TYPE_CHECKING:  # Only import for type checking (is False at runtime).
     from gradio.blocks import BlockContext, Blocks
@@ -70,8 +74,6 @@
     from gradio.routes import App, Request
     from gradio.state_holder import SessionState
 
-JSON_PATH = os.path.join(os.path.dirname(gradio.__file__), "launches.json")
-
 P = ParamSpec("P")
 T = TypeVar("T")
 
@@ -120,7 +122,9 @@ def swap_blocks(self, demo: Blocks):
         # Copy over the blocks to get new components and events but
         # not a new queue
         demo._queue = self.running_app.blocks._queue
+        demo.has_launched = True
         demo.max_file_size = self.running_app.blocks.max_file_size
+        demo.is_running = True
         self.running_app.state_holder.reset(demo)
         self.running_app.blocks = demo
 
@@ -446,22 +450,21 @@ def download_if_url(article: str) -> str:
     return article
 
 
-def launch_counter() -> None:
+HASH_SEED_PATH = os.path.join(os.path.dirname(gradio.__file__), "hash_seed.txt")
+
+
+def get_hash_seed() -> str:
     try:
-        if not os.path.exists(JSON_PATH):
-            launches = {"launches": 1}
-            with open(JSON_PATH, "w+", encoding="utf-8") as j:
-                json.dump(launches, j)
+        if os.path.exists(HASH_SEED_PATH):
+            with open(HASH_SEED_PATH) as j:
+                return j.read().strip()
         else:
-            with open(JSON_PATH, encoding="utf-8") as j:
-                launches = json.load(j)
-            launches["launches"] += 1
-            if launches["launches"] in [25, 50, 150, 500, 1000]:
-                print(en["BETA_INVITE"])
-            with open(JSON_PATH, "w", encoding="utf-8") as j:
-                j.write(json.dumps(launches))
+            with open(HASH_SEED_PATH, "w") as j:
+                seed = uuid.uuid4().hex
+                j.write(seed)
+                return seed
     except Exception:
-        pass
+        return uuid.uuid4().hex
 
 
 def get_default_args(func: Callable) -> list[Any]:
@@ -472,6 +475,24 @@ def get_default_args(func: Callable) -> list[Any]:
     ]
 
 
+def safe_deepcopy(obj: Any) -> Any:
+    try:
+        return copy.deepcopy(obj)
+    except Exception:
+        if isinstance(obj, dict):
+            return {
+                safe_deepcopy(key): safe_deepcopy(value) for key, value in obj.items()
+            }
+        elif isinstance(obj, list):
+            return [safe_deepcopy(item) for item in obj]
+        elif isinstance(obj, tuple):
+            return tuple(safe_deepcopy(item) for item in obj)
+        elif isinstance(obj, set):
+            return {safe_deepcopy(item) for item in obj}
+        else:
+            return copy.copy(obj)
+
+
 def assert_configs_are_equivalent_besides_ids(
     config1: dict, config2: dict, root_keys: tuple = ("mode",)
 ):
@@ -513,7 +534,7 @@ def assert_same_components(config1_id, config2_id):
             raise ValueError(f"{c1} does not match {c2}")
 
     def same_children_recursive(children1, chidren2):
-        for child1, child2 in zip(children1, chidren2):
+        for child1, child2 in zip(children1, chidren2, strict=False):
             assert_same_components(child1["id"], child2["id"])
             if "children" in child1 or "children" in child2:
                 same_children_recursive(child1["children"], child2["children"])
@@ -522,12 +543,12 @@ def same_children_recursive(children1, chidren2):
     children2 = config2["layout"]["children"]
     same_children_recursive(children1, children2)
 
-    for d1, d2 in zip(config1["dependencies"], config2["dependencies"]):
-        for t1, t2 in zip(d1.pop("targets"), d2.pop("targets")):
+    for d1, d2 in zip(config1["dependencies"], config2["dependencies"], strict=False):
+        for t1, t2 in zip(d1.pop("targets"), d2.pop("targets"), strict=False):
             assert_same_components(t1[0], t2[0])
-        for i1, i2 in zip(d1.pop("inputs"), d2.pop("inputs")):
+        for i1, i2 in zip(d1.pop("inputs"), d2.pop("inputs"), strict=False):
             assert_same_components(i1, i2)
-        for o1, o2 in zip(d1.pop("outputs"), d2.pop("outputs")):
+        for o1, o2 in zip(d1.pop("outputs"), d2.pop("outputs"), strict=False):
             assert_same_components(o1, o2)
 
         if d1 != d2:
@@ -667,8 +688,7 @@ async def __anext__(self):
 
 
 async def async_iteration(iterator):
-    # anext not introduced until 3.10 :(
-    return await iterator.__anext__()
+    return await anext(iterator)
 
 
 @contextmanager
@@ -901,55 +921,13 @@ def get_cancelled_fn_indices(
 
 
 def get_type_hints(fn):
-    # Importing gradio with the canonical abbreviation. Used in typing._eval_type.
-    import gradio as gr  # noqa: F401
-    from gradio import OAuthProfile, OAuthToken, Request  # noqa: F401
-
     if inspect.isfunction(fn) or inspect.ismethod(fn):
         pass
     elif callable(fn):
         fn = fn.__call__
     else:
         return {}
-
-    try:
-        return typing.get_type_hints(fn)
-    except TypeError:
-        # On Python 3.9 or earlier, get_type_hints throws a TypeError if the function
-        # has a type annotation that include "|". We resort to parsing the signature
-        # manually using inspect.signature.
-        type_hints = {}
-        sig = inspect.signature(fn)
-        for name, param in sig.parameters.items():
-            if param.annotation is inspect.Parameter.empty:
-                continue
-            if param.annotation in ["gr.OAuthProfile | None", "None | gr.OAuthProfile"]:
-                # Special case: we want to inject the OAuthProfile value even on Python 3.9
-                type_hints[name] = Optional[OAuthProfile]
-            if param.annotation == ["gr.OAuthToken | None", "None | gr.OAuthToken"]:
-                # Special case: we want to inject the OAuthToken value even on Python 3.9
-                type_hints[name] = Optional[OAuthToken]
-            if param.annotation in [
-                "gr.Request | None",
-                "Request | None",
-                "None | gr.Request",
-                "None | Request",
-            ]:
-                # Special case: we want to inject the Request value even on Python 3.9
-                type_hints[name] = Optional[Request]
-            if "|" in str(param.annotation):
-                continue
-            # To convert the string annotation to a class, we use the
-            # internal typing._eval_type function. This is not ideal, but
-            # it's the only way to do it without eval-ing the string.
-            # Since the API is internal, it may change in the future.
-            try:
-                type_hints[name] = typing._eval_type(  # type: ignore
-                    typing.ForwardRef(param.annotation), globals(), locals()
-                )
-            except (NameError, TypeError):
-                pass
-        return type_hints
+    return typing.get_type_hints(fn)
 
 
 def is_special_typed_parameter(name, parameter_types):
@@ -1023,15 +1001,21 @@ def __str__(self):
 
 class MatplotlibBackendMananger:
     def __enter__(self):
-        import matplotlib
+        try:
+            import matplotlib
 
-        self._original_backend = matplotlib.get_backend()
-        matplotlib.use("agg")
+            self._original_backend = matplotlib.get_backend()
+            matplotlib.use("agg")
+        except ImportError:
+            pass
 
     def __exit__(self, exc_type, exc_val, exc_tb):
-        import matplotlib
+        try:
+            import matplotlib
 
-        matplotlib.use(self._original_backend)
+            matplotlib.use(self._original_backend)
+        except ImportError:
+            pass
 
 
 def tex2svg(formula, *_args):
@@ -1082,13 +1066,10 @@ def is_in_or_equal(path_1: str | Path, path_2: str | Path) -> bool:
         path_1: str or Path (to file or directory)
         path_2: str or Path (to file or directory)
     """
-    path_1, path_2 = abspath(path_1), abspath(path_2)
+    path_1, path_2 = abspath(path_1).resolve(), abspath(path_2).resolve()
     try:
-        relative_path = path_1.relative_to(path_2)
-        if str(relative_path) == ".":
-            return True
-        relative_path = path_1.parent.relative_to(path_2)
-        return ".." not in str(relative_path)
+        path_1.relative_to(path_2)
+        return True
     except ValueError:
         return False
 
@@ -1228,7 +1209,7 @@ def __getitem__(self, key: K) -> V:
 
 
 def get_cache_folder() -> Path:
-    return Path(os.environ.get("GRADIO_EXAMPLES_CACHE", "gradio_cached_examples"))
+    return Path(os.environ.get("GRADIO_EXAMPLES_CACHE", ".gradio/cached_examples"))
 
 
 def diff(old, new):
@@ -1378,6 +1359,7 @@ def connect_heartbeat(config: BlocksConfigDict, blocks) -> bool:
 
     any_state = any(isinstance(block, State) for block in blocks)
     any_unload = False
+    any_stream = False
 
     if "dependencies" not in config:
         raise ValueError(
@@ -1391,7 +1373,10 @@ def connect_heartbeat(config: BlocksConfigDict, blocks) -> bool:
                 any_unload = target[1] == "unload"
                 if any_unload:
                     break
-    return any_state or any_unload
+                any_stream = target[1] == "stream"
+                if any_stream:
+                    break
+    return any_state or any_unload or any_stream
 
 
 def deep_hash(obj):
@@ -1410,6 +1395,8 @@ def deep_hash(obj):
         items = tuple(deep_hash(x) for x in obj)
     elif isinstance(obj, set):
         items = tuple(deep_hash(x) for x in sorted(obj, key=hash))
+    elif isinstance(obj, Hashable):
+        items = str(hash(obj)).encode("utf-8")
     else:
         items = str(id(obj)).encode("utf-8")
     hasher.update(repr(items).encode("utf-8"))
@@ -1471,7 +1458,7 @@ def as_list(self):
 def safe_join(directory: DeveloperPath, path: UserProvidedPath) -> str:
     """Safely path to a base directory to avoid escaping the base directory.
     Borrowed from: werkzeug.security.safe_join"""
-    _os_alt_seps: List[str] = [
+    _os_alt_seps: list[str] = [
         sep for sep in [os.path.sep, os.path.altsep] if sep is not None and sep != "/"
     ]
 
@@ -1486,3 +1473,91 @@ def safe_join(directory: DeveloperPath, path: UserProvidedPath) -> str:
         raise InvalidPathError()
 
     return fullpath
+
+
+def is_allowed_file(
+    path: Path,
+    blocked_paths: Sequence[str | Path],
+    allowed_paths: Sequence[str | Path],
+    created_paths: Sequence[str | Path],
+) -> tuple[
+    bool, Literal["in_blocklist", "allowed", "created", "not_created_or_allowed"]
+]:
+    in_blocklist = any(
+        is_in_or_equal(path, blocked_path) for blocked_path in blocked_paths
+    )
+    if in_blocklist:
+        return False, "in_blocklist"
+    if any(is_in_or_equal(path, allowed_path) for allowed_path in allowed_paths):
+        return True, "allowed"
+    if any(is_in_or_equal(path, created_path) for created_path in created_paths):
+        return True, "created"
+    return False, "not_created_or_allowed"
+
+
+def get_node_path():
+    env_node_path = os.environ.get("GRADIO_NODE_PATH")
+    if env_node_path:
+        return env_node_path
+
+    which_node_path = shutil.which("node")
+    if which_node_path:
+        return which_node_path
+
+    try:
+        # On Windows, try using 'where' command
+        if sys.platform == "win32":
+            windows_path = (
+                subprocess.check_output(["where", "node"])
+                .decode()
+                .strip()
+                .split("\r\n")[0]
+            )
+            # Verify the path exists
+            if os.path.exists(windows_path):
+                return windows_path
+        # Try using the 'which' command on Unix-like systems
+        else:
+            return subprocess.check_output(["which", "node"]).decode().strip()
+
+    except subprocess.CalledProcessError:
+        # Command failed, fall back to checking common install locations
+        pass
+
+    # Check common install locations
+    common_paths = [
+        sys.executable,
+        "/usr/bin/node",
+        "/usr/local/bin/node",
+        "C:\\Program Files\\nodejs\\node.exe",
+        "C:\\Program Files (x86)\\nodejs\\node.exe",
+    ]
+
+    for node_path in common_paths:
+        if os.path.exists(node_path):
+            return node_path
+
+    # Check PATH environment variable
+    env_path = os.environ.get("PATH", "")
+    path_dirs = env_path.split(os.pathsep)
+
+    for directory in path_dirs:
+        full_path = os.path.join(
+            directory, "node.exe" if sys.platform == "win32" else "node"
+        )
+        if os.path.exists(full_path):
+            return full_path
+
+    print("Unable to find node install path, falling back to SPA mode.")
+    print(
+        "If you wish to use the node backend, please install node 18 and/ or set the path with the GRADIO_NODE_PATH environment variable."
+    )
+    return None
+
+
+def none_or_singleton_to_list(value: Any) -> list:
+    if value is None:
+        return []
+    if isinstance(value, (list, tuple)):
+        return list(value)
+    return [value]
diff --git a/guides/01_getting-started/01_quickstart.md b/guides/01_getting-started/01_quickstart.md
index 945246c9a0b0a..fad9d923aa522 100644
--- a/guides/01_getting-started/01_quickstart.md
+++ b/guides/01_getting-started/01_quickstart.md
@@ -1,6 +1,6 @@
 # Quickstart
 
-Gradio is an open-source Python package that allows you to quickly **build a demo** or web application for your machine learning model, API, or any arbitary Python function. You can then **share your demo** with a a public link in seconds using Gradio's built-in sharing features. *No JavaScript, CSS, or web hosting experience needed!*
+Gradio is an open-source Python package that allows you to quickly **build a demo** or web application for your machine learning model, API, or any arbitrary Python function. You can then **share your demo** with a a public link in seconds using Gradio's built-in sharing features. *No JavaScript, CSS, or web hosting experience needed!*
 
 <img src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/gradio-guides/lcm-screenshot-3.gif" style="padding-bottom: 10px">
 
@@ -8,7 +8,7 @@ It just takes a few lines of Python to create a demo like the one above, so let'
 
 ## Installation
 
-**Prerequisite**: Gradio requires [Python 3.8 or higher](https://www.python.org/downloads/).
+**Prerequisite**: Gradio requires [Python 3.10 or higher](https://www.python.org/downloads/).
 
 
 We recommend installing Gradio using `pip`, which is included by default in Python. Run this in your terminal or command prompt:
diff --git a/guides/03_building-with-blocks/01_blocks-and-event-listeners.md b/guides/03_building-with-blocks/01_blocks-and-event-listeners.md
index ab618d54ebb44..d9aab58f66a81 100644
--- a/guides/03_building-with-blocks/01_blocks-and-event-listeners.md
+++ b/guides/03_building-with-blocks/01_blocks-and-event-listeners.md
@@ -134,6 +134,17 @@ $demo_blocks_essay_simple
 
 See how we can configure the Textbox itself through a new `gr.Textbox()` method. The `value=` argument can still be used to update the value along with Component configuration. Any arguments we do not set will preserve their previous values.
 
+## Not Changing a Component's Value
+
+In some cases, you may want to leave a component's value unchanged. Gradio includes a special function, `gr.skip()`, which can be returned from your function. Returning this function will keep the output component (or components') values as is. Let us illustrate with an example:
+
+$code_skip
+$demo_skip
+
+Note the difference between returning `None` (which generally resets a component's value to an empty state) versus returning `gr.skip()`, which leaves the component value unchanged.
+
+Tip: if you have multiple output components, and you want to leave all of their values unchanged, you can just return a single `gr.skip()` instead of returning a tuple of skips, one for each element.
+
 ## Running Events Consecutively
 
 You can also run events consecutively by using the `then` method of an event listener. This will run an event after the previous event has finished running. This is useful for running events that update components in multiple steps.
diff --git a/guides/03_building-with-blocks/02_controlling-layout.md b/guides/03_building-with-blocks/02_controlling-layout.md
index 530ce5d012764..85524b58c914e 100644
--- a/guides/03_building-with-blocks/02_controlling-layout.md
+++ b/guides/03_building-with-blocks/02_controlling-layout.md
@@ -13,11 +13,11 @@ with gr.Blocks() as demo:
         btn2 = gr.Button("Button 2")
 ```
 
-By default, every element in a Row will have the same height. Configure this with the `equal_height` argument.
+You can set every element in a Row to have the same height. Configure this with the `equal_height` argument.
 
 ```python
 with gr.Blocks() as demo:
-    with gr.Row(equal_height=False):
+    with gr.Row(equal_height=True):
         textbox = gr.Textbox()
         btn2 = gr.Button("Button 2")
 ```
diff --git a/guides/03_building-with-blocks/03_state-in-blocks.md b/guides/03_building-with-blocks/03_state-in-blocks.md
index a502c8406d44c..6b56b7041ece4 100644
--- a/guides/03_building-with-blocks/03_state-in-blocks.md
+++ b/guides/03_building-with-blocks/03_state-in-blocks.md
@@ -14,7 +14,7 @@ Gradio supports session **state**, where data persists across multiple submits w
 2. In the event listener, put the `State` object as an input and output as needed.
 3. In the event listener function, add the variable to the input parameters and the return value.
 
-Let's take a look at a simple example. We have a simple checkout app below where you add items to a cart. You can also check the size of the cart.
+Let's take a look at a simple example. We have a simple checkout app below where you add items to a cart. You can also see the size of the cart.
 
 $code_simple_state
 $demo_simple_state
@@ -22,8 +22,12 @@ $demo_simple_state
 Notice how we do this with state:
 1. We store the cart items in a `gr.State()` object, initialized here to be an empty list.
 2. When adding items to the cart, the event listener uses the cart as both input and output - it returns the updated cart with all the items inside. 
-3. When calculating the cart size, we pass the cart as input.
+3. We can attach a `.change` listener to cart, that uses the state variable as input as well.
 
-You can think of `gr.State` as an invisible Component that can store any kind of value. Here, `cart` is not visible in the frontend but is used for calculations. 
+You can think of `gr.State` as an invisible Component that can store any kind of value. Here, `cart` is not visible in the frontend but is used for calculations.
 
-Learn more about `State` in the [docs](https://gradio.app/docs/state).
+The `.change` listener for a state variable triggers after any event listener changes the value of a state variable. If the state variable holds a sequence (like a list, set, or dict), a change is triggered if any of the elements inside change. If it holds an object or primitive, a change is triggered if the **hash** of the  value changes. So if you define a custom class and create a `gr.State` variable that is an instance of that class, make sure that the the class includes a sensible `__hash__` implementation.
+
+The value of a session State variable is cleared when the user refreshes the page. The value is stored on in the app backend for 60 minutes after the user closes the tab (this can be configured by the `delete_cache` parameter in `gr.Blocks`).
+
+Learn more about `State` in the [docs](https://gradio.app/docs/gradio/state).
diff --git a/guides/03_building-with-blocks/06_custom-CSS-and-JS.md b/guides/03_building-with-blocks/06_custom-CSS-and-JS.md
index 86d5d4055148a..a32278bcfca3b 100644
--- a/guides/03_building-with-blocks/06_custom-CSS-and-JS.md
+++ b/guides/03_building-with-blocks/06_custom-CSS-and-JS.md
@@ -31,7 +31,7 @@ with gr.Blocks(css=".gradio-container {background: url('file=clouds.jpg')}") as
     ...
 ```
 
-Note: By default, files in the host machine are not accessible to users running the Gradio app. As a result, you should make sure that any referenced files (such as `clouds.jpg` here) are either URLs or allowed via the `allow_list` parameter in `launch()`. Read more in our [section on Security and File Access](/guides/sharing-your-app#security-and-file-access).
+Note: By default, files in the host machine are not accessible to users running the Gradio app. As a result, you should make sure that any referenced files (such as `clouds.jpg` here) are either URLs or allowed via the `allow_list` parameter in `launch()`. Read more in our [section on Security and File Access](/main/guides/file-access).
 
 
 ## The `elem_id` and `elem_classes` Arguments
diff --git a/guides/04_additional-features/02_streaming-outputs.md b/guides/04_additional-features/02_streaming-outputs.md
index b3d41009052ed..ab0cd1ff00a8a 100644
--- a/guides/04_additional-features/02_streaming-outputs.md
+++ b/guides/04_additional-features/02_streaming-outputs.md
@@ -18,3 +18,57 @@ $demo_fake_diffusion
 Note that we've added a `time.sleep(1)` in the iterator to create an artificial pause between steps so that you are able to observe the steps of the iterator (in a real image generation model, this probably wouldn't be necessary).
 
 Similarly, Gradio can handle streaming inputs, e.g. an image generation model that reruns every time a user types a letter in a textbox. This is covered in more details in our guide on building [reactive Interfaces](/guides/reactive-interfaces). 
+
+## Streaming Media
+
+Gradio can stream audio and video directly from your generator function.
+This lets your user hear your audio or see your video nearly as soon as it's `yielded` by your function.
+All you have to do is 
+
+1. Set `streaming=True` in your `gr.Audio` or `gr.Video` output component.
+2. Write a python generator that yields the next "chunk" of audio or video.
+3. Set `autoplay=True` so that the media starts playing automatically.
+
+For audio, the next "chunk" can be either an `.mp3` or `.wav` file or a `bytes` sequence of audio.
+For video, the next "chunk" has to be either `.mp4` file or a file with `h.264` codec with a `.ts` extension.
+For smooth playback, make sure chunks are consistent lengths and larger than 1 second.
+
+We'll finish with some simple examples illustrating these points.
+
+### Streaming Audio
+
+```python
+import gradio as gr
+from time import sleep
+
+def keep_repeating(audio_file):
+    for _ in range(10):
+        sleep(0.5)
+        yield audio_file
+
+gr.Interface(keep_repeating,
+             gr.Audio(sources=["microphone"], type="filepath"),
+             gr.Audio(streaming=True, autoplay=True)
+).launch()
+```
+
+### Streaming Video
+
+```python
+import gradio as gr
+from time import sleep
+
+def keep_repeating(video_file):
+    for _ in range(10):
+        sleep(0.5)
+        yield video_file
+
+gr.Interface(keep_repeating,
+             gr.Video(sources=["webcam"], format="mp4"),
+             gr.Video(streaming=True, autoplay=True)
+).launch()
+```
+
+## End-to-End Examples
+
+For an end-to-end example of streaming media, see the object detection from video [guide](/main/guides/object-detection-from-video) or the streaming AI-generated audio with [transformers](https://huggingface.co/docs/transformers/index) [guide](/main/guides/streaming-ai-generated-audio).
\ No newline at end of file
diff --git a/guides/04_additional-features/03_streaming-inputs.md b/guides/04_additional-features/03_streaming-inputs.md
new file mode 100644
index 0000000000000..60729ec47ca88
--- /dev/null
+++ b/guides/04_additional-features/03_streaming-inputs.md
@@ -0,0 +1,68 @@
+# Streaming inputs
+
+In the previous guide, we covered how to stream a sequence of outputs from an event handler. Gradio also allows you to stream images from a user's camera or audio chunks from their microphone **into** your event handler. This can be used to create real-time object detection apps or conversational chat applications with Gradio.
+
+Currently, the `gr.Image` and the `gr.Audio` components support input streaming via the `stream` event.
+Let's create the simplest streaming app possible, which simply returns the webcam stream unmodified.
+
+$code_streaming_simple
+$demo_streaming_simple
+
+Try it out! The streaming event is triggered when the user starts recording. Under the hood, the webcam will take a photo every 0.1 seconds and send it to the server. The server will then return that image.
+
+There are two unique keyword arguments for the `stream` event:
+
+* `time_limit` - This is the amount of time the gradio server will spend processing the event. Media streams are naturally unbounded so it's important to set a time limit so that one user does not hog the Gradio queue. The time limit only counts the time spent processing the stream, not the time spent waiting in the queue. The orange bar displayed at the bottom of the input image represents the remaining time. When the time limit expires, the user will automatically rejoin the queue.
+
+* `stream_every` - This is the frequency (in seconds) with which the stream will capture input and send it to the server. For demos like image detection or manipulation, setting a smaller value is desired to get a "real-time" effect. For demos like speech transcription, a higher value is useful so that the transcription algorithm has more context of what's being said.
+
+## A Realistic Image Demo
+
+Let's create a demo where a user can choose a filter to apply to their webcam stream. Users can choose from an edge-detection filter, a cartoon filter, or simply flipping the stream vertically.
+
+$code_streaming_filter
+$demo_streaming_filter
+
+You will notice that if you change the filter value it will immediately take effect in the output stream. That is an important difference of stream events in comparison to other Gradio events. The input values of the stream can be changed while the stream is being processed. 
+
+Tip: We set the "streaming" parameter of the image output component to be "True". Doing so lets the server automatically convert our output images into base64 format, a format that is efficient for streaming.
+
+## Unified Image Demos
+
+For some image streaming demos, like the one above, we don't need to display separate input and output components. Our app would look cleaner if we could just display the modified output stream.
+
+We can do so by just specifying the input image component as the output of the stream event.
+
+$code_streaming_filter_unified
+$demo_streaming_filter_unified
+
+## Keeping track of past inputs or outputs
+
+Your streaming function should be stateless. It should take the current input and return its corresponding output. However, there are cases where you may want to keep track of past inputs or outputs. For example, you may want to keep a buffer of the previous `k` inputs to improve the accuracy of your transcription demo. You can do this with Gradio's `gr.State()` component.
+
+Let's showcase this with a sample demo:
+
+```python
+def transcribe_handler(current_audio, state, transcript):
+    next_text = transcribe(current_audio, history=state)
+    state.append(current_audio)
+    state = state[-3:]
+    return state, transcript + next_text
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        with gr.Column():
+            mic = gr.Audio(sources="microphone")
+            state = gr.State(value=[])
+        with gr.Column():
+            transcript = gr.Textbox(label="Transcript")
+    mic.stream(transcribe_handler, [mic, state, transcript], [state, transcript],
+               time_limit=10, stream_every=1)
+
+
+demo.launch()
+```
+
+## End-to-End Examples
+
+For an end-to-end example of streaming from the webcam, see the object detection from webcam [guide](/main/guides/object-detection-from-webcam-with-webrtc).
\ No newline at end of file
diff --git a/guides/04_additional-features/03_alerts.md b/guides/04_additional-features/04_alerts.md
similarity index 100%
rename from guides/04_additional-features/03_alerts.md
rename to guides/04_additional-features/04_alerts.md
diff --git a/guides/04_additional-features/07_sharing-your-app.md b/guides/04_additional-features/07_sharing-your-app.md
index 877de5e53ff36..62765e1b5474b 100644
--- a/guides/04_additional-features/07_sharing-your-app.md
+++ b/guides/04_additional-features/07_sharing-your-app.md
@@ -9,8 +9,7 @@ In this Guide, we dive more deeply into the various aspects of sharing a Gradio
 5. [Accessing network requests](#accessing-the-network-request-directly)
 6. [Mounting within FastAPI](#mounting-within-another-fast-api-app)
 7. [Authentication](#authentication)
-8. [Security and file access](#security-and-file-access)
-9. [Analytics](#analytics)
+8. [Analytics](#analytics)
 
 ## Sharing Demos
 
@@ -409,42 +408,6 @@ if __name__ == '__main__':
 There are actually two separate Gradio apps in this example! One that simply displays a log in button (this demo is accessible to any user), while the other main demo is only accessible to users that are logged in. You can try this example out on [this Space](https://huggingface.co/spaces/gradio/oauth-example).
 
 
-
-## Security and File Access
-
-Sharing your Gradio app with others (by hosting it on Spaces, on your own server, or through temporary share links) **exposes** certain files on the host machine to users of your Gradio app.
-
-In particular, Gradio apps ALLOW users to access to four kinds of files:
-
-- **Temporary files created by Gradio.** These are files that are created by Gradio as part of running your prediction function. For example, if your prediction function returns a video file, then Gradio will save that video to a temporary cache on your device and then send the path to the file to the front end. You can customize the location of temporary cache files created by Gradio by setting the environment variable `GRADIO_TEMP_DIR` to an absolute path, such as `/home/usr/scripts/project/temp/`. You can delete the files created by your app when it shuts down with the `delete_cache` parameter of `gradio.Blocks`, `gradio.Interface`, and `gradio.ChatInterface`. This parameter is a tuple of integers of the form `[frequency, age]` where `frequency` is how often to delete files and `age` is the time in seconds since the file was last modified.
-
-
-- **Cached examples created by Gradio.** These are files that are created by Gradio as part of caching examples for faster runtimes, if you set `cache_examples=True` or `cache_examples="lazy"` in `gr.Interface()`, `gr.ChatInterface()` or in `gr.Examples()`. By default, these files are saved in the `gradio_cached_examples/` subdirectory within your app's working directory. You can customize the location of cached example files created by Gradio by setting the environment variable `GRADIO_EXAMPLES_CACHE` to an absolute path or a path relative to your working directory.
-
-- **Files that you explicitly allow via the `allowed_paths` parameter in `launch()`**. This parameter allows you to pass in a list of additional directories or exact filepaths you'd like to allow users to have access to. (By default, this parameter is an empty list).
-
-- **Static files that you explicitly set via the `gr.set_static_paths` function**. This parameter allows you to pass in a list of directories or filenames that will be considered static. This means that they will not be copied to the cache and will be served directly from your computer. This can help save disk space and reduce the time your app takes to launch but be mindful of possible security implications.
-
-Gradio DOES NOT ALLOW access to:
-
-- **Files that you explicitly block via the `blocked_paths` parameter in `launch()`**. You can pass in a list of additional directories or exact filepaths to the `blocked_paths` parameter in `launch()`. This parameter takes precedence over the files that Gradio exposes by default or by the `allowed_paths`.
-
-- **Any other paths on the host machine**. Users should NOT be able to access other arbitrary paths on the host.
-
-Sharing your Gradio application will also allow users to upload files to your computer or server. You can set a maximum file size for uploads to prevent abuse and to preserve disk space. You can do this with the `max_file_size` parameter of `.launch`. For example, the following two code snippets limit file uploads to 5 megabytes per file.
-
-```python
-import gradio as gr
-
-demo = gr.Interface(lambda x: x, "image", "image")
-
-demo.launch(max_file_size="5mb")
-# or
-demo.launch(max_file_size=5 * gr.FileSize.MB)
-```
-
-Please make sure you are running the latest version of `gradio` for these security settings to apply.
-
 ## Analytics
 
 By default, Gradio collects certain analytics to help us better understand the usage of the `gradio` library. This includes the following information:
diff --git a/guides/04_additional-features/08_file-access.md b/guides/04_additional-features/08_file-access.md
new file mode 100644
index 0000000000000..f07c3a2687c18
--- /dev/null
+++ b/guides/04_additional-features/08_file-access.md
@@ -0,0 +1,65 @@
+# Security and File Access
+
+Sharing your Gradio app with others (by hosting it on Spaces, on your own server, or through temporary share links) **exposes** certain files on your machine to the internet.
+
+This guide explains which files are exposed as well as some best practices for making sure the files on your machine are secure.
+
+## The Gradio cache
+
+First, it's important to understand that Gradio copies files to a `cache` directory before returning them to the frontend. This prevents files from being overwritten by one user while they are still needed by another user of your application. For example, if your prediction function returns a video file, then Gradio will move that video to the `cache` after your prediction function runs and returns a URL the frontend can use to show the video. Any file in the `cache` is available via URL to all users of your running application.
+
+Tip: You can customize the location of the cache by setting the `GRADIO_TEMP_DIR` environment variable to an absolute path, such as `/home/usr/scripts/project/temp/`. 
+
+## The files Gradio will move to the cache
+
+Before placing a file in the cache, Gradio will check to see if the file meets at least one of following criteria:
+
+1. It was uploaded by a user.
+2. It is in the `allowed_paths` parameter of the `Blocks.launch` method.
+3. It is in the current working directory of the python interpreter.
+4. It is in the temp directory obtained by `tempfile.gettempdir()`.
+5. It was specified by the developer before runtime, e.g. cached examples or default values of components.
+
+Note: files in the current working directory whose name starts with a period (`.`) will not be moved to the cache, since they often contain sensitive information. 
+
+If none of these criteria are met, the prediction function that is returning that file will raise an exception instead of moving the file to cache. Gradio performs this check so that arbitrary files on your machine cannot be accessed.
+
+Tip: If at any time Gradio blocks a file that you would like it to process, add its path to the `allowed_paths` parameter.
+
+## The files Gradio will allow others to access 
+
+In short, these are the files located in the `cache` and any other additional paths **YOU** grant access to via `allowed_paths` or `gr.set_static_paths`.
+
+- **The `allowed_paths` parameter in `launch()`**. This parameter allows you to pass in a list of additional directories or exact filepaths you'd like to allow users to have access to. (By default, this parameter is an empty list).
+
+- **Static files that you explicitly set via the `gr.set_static_paths` function**. This parameter allows you to pass in a list of directories or filenames that will be considered static. This means that they will not be copied to the cache and will be served directly from your computer. This can help save disk space and reduce the time your app takes to launch but be mindful of possible security implications.
+
+## The files Gradio will not allow others to access
+
+While running, Gradio apps will NOT ALLOW users to access:
+
+- **Files that you explicitly block via the `blocked_paths` parameter in `launch()`**. You can pass in a list of additional directories or exact filepaths to the `blocked_paths` parameter in `launch()`. This parameter takes precedence over the files that Gradio exposes by default, or by the `allowed_paths` parameter or the `gr.set_static_paths` function.
+
+- **Any other paths on the host machine**. Users should NOT be able to access other arbitrary paths on the host.
+
+
+## Uploading Files
+
+Sharing your Gradio application will also allow users to upload files to your computer or server. You can set a maximum file size for uploads to prevent abuse and to preserve disk space. You can do this with the `max_file_size` parameter of `.launch`. For example, the following two code snippets limit file uploads to 5 megabytes per file.
+
+```python
+import gradio as gr
+
+demo = gr.Interface(lambda x: x, "image", "image")
+
+demo.launch(max_file_size="5mb")
+# or
+demo.launch(max_file_size=5 * gr.FileSize.MB)
+```
+
+## Best Practices
+
+* Set a `max_file_size` for your application.
+* Do not return arbitrary user input from a function that is connected to a file-based output component (`gr.Image`, `gr.File`, etc.). For example, the following interface would allow anyone to move an arbitrary file in your local directory to the cache: `gr.Interface(lambda s: s, "text", "file")`. This is because the user input is treated as an arbitrary file path. 
+* Make `allowed_paths` as small as possible. If a path in `allowed_paths` is a directory, any file within that directory can be accessed. Make sure the entires of `allowed_paths` only contains files related to your application.
+* Run your gradio application from the same directory the application file is located in. This will narrow the scope of files Gradio will be allowed to move into the cache. For example, prefer `python app.py` to `python Users/sources/project/app.py`.
\ No newline at end of file
diff --git a/guides/04_additional-features/04_styling.md b/guides/04_additional-features/08_styling.md
similarity index 100%
rename from guides/04_additional-features/04_styling.md
rename to guides/04_additional-features/08_styling.md
diff --git a/guides/04_additional-features/08_environment-variables.md b/guides/04_additional-features/09_environment-variables.md
similarity index 73%
rename from guides/04_additional-features/08_environment-variables.md
rename to guides/04_additional-features/09_environment-variables.md
index bd02a86ccdd47..1b82118c26f34 100644
--- a/guides/04_additional-features/08_environment-variables.md
+++ b/guides/04_additional-features/09_environment-variables.md
@@ -41,14 +41,14 @@ Environment variables in Gradio provide a way to customize your applications and
   export GRADIO_DEBUG=1
   ```
 
-### 5. `GRADIO_ALLOW_FLAGGING`
+### 5. `GRADIO_FLAGGING_MODE`
 
 - **Description**: Controls whether users can flag inputs/outputs in the Gradio interface. See [the Guide on flagging](/guides/using-flagging) for more details.
 - **Default**: `"manual"`
 - **Options**: `"never"`, `"manual"`, `"auto"`
 - **Example**:
   ```sh
-  export GRADIO_ALLOW_FLAGGING="never"
+  export GRADIO_FLAGGING_MODE="never"
   ```
 
 ### 6. `GRADIO_TEMP_DIR`
@@ -106,6 +106,37 @@ Environment variables in Gradio provide a way to customize your applications and
   export FORWARDED_ALLOW_IPS="127.0.0.1,192.168.1.100"
   ```
 
+### 12. `GRADIO_CACHE_EXAMPLES`
+
+- **Description**: Whether or not to cache examples by default in `gr.Interface()`, `gr.ChatInterface()` or in `gr.Examples()` when no explicit argument is passed for the `cache_examples` parameter. You can set this environment variable to either the string "true" or "false".
+- **Default**: `"false"`
+- **Example**:
+  ```sh
+  export GRADIO_CACHE_EXAMPLES="true"
+  ```
+
+
+### 13. `GRADIO_CACHE_MODE`
+
+- **Description**: How to cache examples. Only applies if `cache_examples` is set to `True` either via enviornment variable or by an explicit parameter, AND no no explicit argument is passed for the `cache_mode` parameter in `gr.Interface()`, `gr.ChatInterface()` or in `gr.Examples()`. Can be set to either the strings "lazy" or "eager." If "lazy", examples are cached after their first use for all users of the app. If "eager", all examples are cached at app launch.
+
+- **Default**: `"eager"`
+- **Example**:
+  ```sh
+  export GRADIO_CACHE_MODE="lazy"
+  ```
+
+
+### 14. `GRADIO_EXAMPLES_CACHE`
+
+- **Description**:  If you set `cache_examples=True` in `gr.Interface()`, `gr.ChatInterface()` or in `gr.Examples()`, Gradio will run your prediction function and save the results to disk. By default, this is in the `.gradio/cached_examples//` subdirectory within your app's working directory. You can customize the location of cached example files created by Gradio by setting the environment variable `GRADIO_EXAMPLES_CACHE` to an absolute path or a path relative to your working directory.
+- **Default**: `".gradio/cached_examples/"`
+- **Example**:
+  ```sh
+  export GRADIO_EXAMPLES_CACHE="custom_cached_examples/"
+  ```
+
+
 
 ## How to Set Environment Variables
 
@@ -124,3 +155,5 @@ GRADIO_SERVER_NAME="localhost"
 
 Then, use a tool like `dotenv` to load these variables when running your application.
 
+
+
diff --git a/guides/04_additional-features/09_resource-cleanup.md b/guides/04_additional-features/10_resource-cleanup.md
similarity index 100%
rename from guides/04_additional-features/09_resource-cleanup.md
rename to guides/04_additional-features/10_resource-cleanup.md
diff --git a/guides/05_chatbots/01_creating-a-chatbot-fast.md b/guides/05_chatbots/01_creating-a-chatbot-fast.md
index 96fccaad99ab4..228ac0cfc88ae 100644
--- a/guides/05_chatbots/01_creating-a-chatbot-fast.md
+++ b/guides/05_chatbots/01_creating-a-chatbot-fast.md
@@ -20,14 +20,26 @@ $ pip install --upgrade gradio
 
 ## Defining a chat function
 
-When working with `gr.ChatInterface()`, the first thing you should do is define your chat function. Your chat function should take two arguments: `message` and then `history` (the arguments can be named anything, but must be in this order).
+When working with `gr.ChatInterface()`, the first thing you should do is define your chat function. Your chat function should take two arguments: `message` and `history` (the arguments can be named anything, but must be in this order).
 
 - `message`: a `str` representing the user's input.
-- `history`: a `list` of `list` representing the conversations up until that point. Each inner list consists of two `str` representing a pair: `[user input, bot response]`.
+- `history`: If you set `type="messages"` in gr.ChatInterface, the history will be a list of dictionaries with `role` and `content` keys. Please see the chatbot [docs](/docs/gradio/chatbot) for an in-depth explanation of the chatbot format. 
+
+Here is an example value of the `history`:
+
+```python
+[
+    {"role": "user", "content": "What is the capital of France"},
+    {"role": "assistant", "content": "Paris"}
+]
+```
+
 
 Your function should return a single string response, which is the bot's response to the particular user input `message`. Your function can take into account the `history` of messages, as well as the current message.
 
-Let's take a look at a few examples.
+Tip: It's strongly recommended to set type="messages" in gr.ChatInterface. Setting type="tuples" is deprecated and will be removed in a future version of Gradio.
+
+Let's take a look at a few example applications.
 
 ## Example: a chatbot that responds yes or no
 
@@ -47,7 +59,7 @@ Now, we can plug this into `gr.ChatInterface()` and call the `.launch()` method
 ```python
 import gradio as gr
 
-gr.ChatInterface(random_response).launch()
+gr.ChatInterface(random_response, type="messages").launch()
 ```
 
 That's it! Here's our running demo, try it out:
@@ -63,12 +75,12 @@ import random
 import gradio as gr
 
 def alternatingly_agree(message, history):
-    if len(history) % 2 == 0:
+    if len([h for h in history if h['role'] == "assistant"]) % 2 == 0:
         return f"Yes, I do think that '{message}'"
     else:
         return "I don't think so"
 
-gr.ChatInterface(alternatingly_agree).launch()
+gr.ChatInterface(alternatingly_agree, type="messages").launch()
 ```
 
 ## Streaming chatbots
@@ -84,7 +96,7 @@ def slow_echo(message, history):
         time.sleep(0.3)
         yield "You typed: " + message[: i+1]
 
-gr.ChatInterface(slow_echo).launch()
+gr.ChatInterface(slow_echo, type="messages").launch()
 ```
 
 
@@ -96,7 +108,7 @@ If you're familiar with Gradio's `Interface` class, the `gr.ChatInterface` inclu
 
 - add a title and description above your chatbot using `title` and `description` arguments.
 - add a theme or custom css using `theme` and `css` arguments respectively.
-- add `examples` and even enable `cache_examples`, which make it easier for users to try it out .
+- add `examples` and even enable `cache_examples`, which make it easier for users to try it out. `examples` can be customized by adding `display_icon` or `display_text` keys to each example.
 - You can change the text or disable each of the buttons that appear in the chatbot interface: `submit_btn`, `retry_btn`, `undo_btn`, `clear_btn`.
 
 If you want to customize the `gr.Chatbot` or `gr.Textbox` that compose the `ChatInterface`, then you can pass in your own chatbot or textbox as well. Here's an example of how we can use these parameters:
@@ -112,12 +124,13 @@ def yes_man(message, history):
 
 gr.ChatInterface(
     yes_man,
+    type="messages",
     chatbot=gr.Chatbot(height=300),
     textbox=gr.Textbox(placeholder="Ask me a yes or no question", container=False, scale=7),
     title="Yes Man",
     description="Ask Yes Man any question",
     theme="soft",
-    examples=["Hello", "Am I cool?", "Are tomatoes vegetables?"],
+    examples=[{"text": "Hello"}, {"text": "Am I cool?"}, {"text": "Are tomatoes vegetables?"}],
     cache_examples=True,
     retry_btn=None,
     undo_btn="Delete Previous",
@@ -130,6 +143,7 @@ In particular, if you'd like to add a "placeholder" for your chat interface, whi
 ```python
 gr.ChatInterface(
     yes_man,
+    type="messages",
     chatbot=gr.Chatbot(placeholder="<strong>Your Personal Yes-Man</strong><br>Ask Me Anything"),
 ...
 ```
@@ -143,13 +157,12 @@ You may want to add multimodal capability to your chatbot. For example, you may
 
 ```python
 import gradio as gr
-import time
 
 def count_files(message, history):
     num_files = len(message["files"])
     return f"You uploaded {num_files} files"
 
-demo = gr.ChatInterface(fn=count_files, examples=[{"text": "Hello", "files": []}], title="Echo Bot", multimodal=True)
+demo = gr.ChatInterface(fn=count_files, type="messages", examples=[{"text": "Hello", "files": []}], title="Echo Bot", multimodal=True)
 
 demo.launch()
 ```
@@ -162,7 +175,7 @@ Tip: If you'd like to customize the UI/UX of the textbox for your multimodal cha
 
 You may want to add additional parameters to your chatbot and expose them to your users through the Chatbot UI. For example, suppose you want to add a textbox for a system prompt, or a slider that sets the number of tokens in the chatbot's response. The `ChatInterface` class supports an `additional_inputs` parameter which can be used to add additional input components.
 
-The `additional_inputs` parameters accepts a component or a list of components. You can pass the component instances directly, or use their string shortcuts (e.g. `"textbox"` instead of `gr.Textbox()`). If you pass in component instances, and they have _not_ already been rendered, then the components will appear underneath the chatbot (and any examples) within a `gr.Accordion()`. You can set the label of this accordion using the `additional_inputs_accordion_name` parameter.
+The `additional_inputs` parameters accepts a component or a list of components. You can pass the component instances directly, or use their string shortcuts (e.g. `"textbox"` instead of `gr.Textbox()`). If you pass in component instances, and they have _not_ already been rendered, then the components will appear underneath the chatbot within a `gr.Accordion()`. You can set the label of this accordion using the `additional_inputs_accordion_name` parameter.
 
 Here's a complete example:
 
@@ -185,7 +198,7 @@ with gr.Blocks() as demo:
     slider = gr.Slider(10, 100, render=False)
 
     gr.ChatInterface(
-        echo, additional_inputs=[system_prompt, slider]
+        echo, additional_inputs=[system_prompt, slider], type="messages"
     )
 
 demo.launch()
@@ -193,7 +206,7 @@ demo.launch()
 
 If you need to create something even more custom, then its best to construct the chatbot UI using the low-level `gr.Blocks()` API. We have [a dedicated guide for that here](/guides/creating-a-custom-chatbot-with-blocks).
 
-## Using Gradio Components inside the Chatbot
+## Displaying Files or Components in the Chatbot
 
 The `Chatbot` component supports using many of the core Gradio components (such as `gr.Image`, `gr.Plot`, `gr.Audio`, and `gr.HTML`) inside of the chatbot. Simply return one of these components from your function to use it with `gr.ChatInterface`. Here's an example:
 
@@ -207,12 +220,34 @@ def fake(message, history):
         return "Please provide the name of an artist"
 
 gr.ChatInterface(
-    fake, 
+    fake,
+    type="messages",
+    textbox=gr.Textbox(placeholder="Which artist's music do you want to listen to?", scale=7),
+    chatbot=gr.Chatbot(placeholder="Play music by any artist!"),
+).launch()
+```
+
+You can also return a dictionary with a `path` key that points to a local file or a publicly available URL.
+
+```py
+import gradio as gr
+
+def fake(message, history):
+    if message.strip():
+        return {"role": "assistant", "content": {"path": "https://github.com/gradio-app/gradio/raw/main/test/test_files/audio_sample.wav"}}
+    else:
+        return "Please provide the name of an artist"
+
+gr.ChatInterface(
+    fake,
+    type="messages",
     textbox=gr.Textbox(placeholder="Which artist's music do you want to listen to?", scale=7),
     chatbot=gr.Chatbot(placeholder="Play music by any artist!"),
 ).launch()
 ```
 
+ See the chatbot [docs](/docs/gradio/chatbot#behavior) for an explanation how.
+
 ## Using your chatbot via an API
 
 Once you've built your Gradio chatbot and are hosting it on [Hugging Face Spaces](https://hf.space) or somewhere else, then you can query it with a simple API at the `/chat` endpoint. The endpoint just expects the user's message (and potentially additional inputs if you have set any using the `additional_inputs` parameter), and will return the response, internally keeping track of the messages sent so far.
@@ -237,14 +272,16 @@ llm = ChatOpenAI(temperature=1.0, model='gpt-3.5-turbo-0613')
 
 def predict(message, history):
     history_langchain_format = []
-    for human, ai in history:
-        history_langchain_format.append(HumanMessage(content=human))
-        history_langchain_format.append(AIMessage(content=ai))
+    for msg in history:
+        if msg['role'] == "user":
+            history_langchain_format.append(HumanMessage(content=msg['content']))
+        elif msg['role'] == "assistant":
+            history_langchain_format.append(AIMessage(content=msg['content']))
     history_langchain_format.append(HumanMessage(content=message))
     gpt_response = llm(history_langchain_format)
     return gpt_response.content
 
-gr.ChatInterface(predict).launch()
+gr.ChatInterface(predict, type="messages").launch()
 ```
 
 ## A streaming example using `openai`
@@ -260,10 +297,9 @@ client = OpenAI(api_key=api_key)
 
 def predict(message, history):
     history_openai_format = []
-    for human, assistant in history:
-        history_openai_format.append({"role": "user", "content": human })
-        history_openai_format.append({"role": "assistant", "content":assistant})
-    history_openai_format.append({"role": "user", "content": message})
+    for msg in history:
+        history_openai_format.append(msg)
+    history_openai_format.append(message)
   
     response = client.chat.completions.create(model='gpt-3.5-turbo',
     messages= history_openai_format,
@@ -276,7 +312,7 @@ def predict(message, history):
               partial_message = partial_message + chunk.choices[0].delta.content
               yield partial_message
 
-gr.ChatInterface(predict).launch()
+gr.ChatInterface(predict, type="messages").launch()
 ```
 
 **Handling Concurrent Users with Threads**
@@ -305,7 +341,7 @@ def predict(message, history, request: gr.Request):
     
     ...
 
-gr.ChatInterface(predict).launch()
+gr.ChatInterface(predict, type="messages").launch()
 ```
 
 ## Example using a local, open-source LLM with Hugging Face
@@ -331,7 +367,7 @@ class StopOnTokens(StoppingCriteria):
         return False
 
 def predict(message, history):
-    history_transformer_format = history + [[message, ""]]
+    history_transformer_format = list(zip(history[:-1], history[1:])) + [[message, ""]]
     stop = StopOnTokens()
 
     messages = "".join(["".join(["\n<human>:"+item[0], "\n<bot>:"+item[1]])
diff --git a/guides/05_chatbots/02_creating-a-custom-chatbot-with-blocks.md b/guides/05_chatbots/02_creating-a-custom-chatbot-with-blocks.md
index 4a240a9c3668d..e8dff122eb110 100644
--- a/guides/05_chatbots/02_creating-a-custom-chatbot-with-blocks.md
+++ b/guides/05_chatbots/02_creating-a-custom-chatbot-with-blocks.md
@@ -16,7 +16,7 @@ You can [read the Guide to Blocks first](https://gradio.app/blocks-and-event-lis
 
 ## A Simple Chatbot Demo
 
-Let's start with recreating the simple demo above. As you may have noticed, our bot simply randomly responds "How are you?", "I love you", or "I'm very hungry" to any input. Here's the code to create this with Gradio:
+Let's start with recreating the simple demo above. As you may have noticed, our bot simply randomly responds "How are you?", "Today is a great day", or "I'm very hungry" to any input. Here's the code to create this with Gradio:
 
 $code_chatbot_simple
 
@@ -32,53 +32,32 @@ Of course, in practice, you would replace `respond()` with your own more complex
 
 $demo_chatbot_simple
 
+Tip: For better type hinting and auto-completion in your IDE, you can use the `gr.ChatMessage` dataclass:
+
+```python
+from gradio import ChatMessage
+
+def chat_function(message, history):
+    history.append(ChatMessage(role="user", content=message))
+    history.append(ChatMessage(role="assistant", content="Hello, how can I help you?"))
+    return history
+```
+
 ## Add Streaming to your Chatbot
 
 There are several ways we can improve the user experience of the chatbot above. First, we can stream responses so the user doesn't have to wait as long for a message to be generated. Second, we can have the user message appear immediately in the chat history, while the chatbot's response is being generated. Here's the code to achieve that:
 
 $code_chatbot_streaming
 
-You'll notice that when a user submits their message, we now _chain_ three event events with `.then()`:
+You'll notice that when a user submits their message, we now _chain_ two event events with `.then()`:
 
-1. The first method `user()` updates the chatbot with the user message and clears the input field. This method also makes the input field non interactive so that the user can't send another message while the chatbot is responding. Because we want this to happen instantly, we set `queue=False`, which would skip any queue had it been enabled. The chatbot's history is appended with `(user_message, None)`, the `None` signifying that the bot has not responded.
+1. The first method `user()` updates the chatbot with the user message and clears the input field. Because we want this to happen instantly, we set `queue=False`, which would skip any queue had it been enabled. The chatbot's history is appended with `{"role": "user", "content": user_message}`.
 
-2. The second method, `bot()` updates the chatbot history with the bot's response. Instead of creating a new message, we just replace the previously-created `None` message with the bot's response. Finally, we construct the message character by character and `yield` the intermediate outputs as they are being constructed. Gradio automatically turns any function with the `yield` keyword [into a streaming output interface](/guides/key-features/#iterative-outputs).
+2. The second method, `bot()` updates the chatbot history with the bot's response. Finally, we construct the message character by character and `yield` the intermediate outputs as they are being constructed. Gradio automatically turns any function with the `yield` keyword [into a streaming output interface](/guides/key-features/#iterative-outputs).
 
-3. The third method makes the input field interactive again so that users can send another message to the bot.
 
 Of course, in practice, you would replace `bot()` with your own more complex function, which might call a pretrained model or an API, to generate a response.
 
-Finally, we enable queuing by running `demo.queue()`, which is required for streaming intermediate outputs. You can try the improved chatbot by scrolling to the demo at the top of this page.
-
-## Liking / Disliking Chat Messages
-
-Once you've created your `gr.Chatbot`, you can add the ability for users to like or dislike messages. This can be useful if you would like users to vote on a bot's responses or flag inappropriate results. 
-
-To add this functionality to your Chatbot, simply attach a `.like()` event to your Chatbot. A chatbot that has the `.like()` event will automatically feature a thumbs-up icon and a thumbs-down icon next to every bot message. 
-
-The `.like()` method requires you to pass in a function that is called when a user clicks on these icons. In your function, you should have an argument whose type is `gr.LikeData`. Gradio will automatically supply the parameter to this argument with an object that contains information about the liked or disliked message. Here's a simplistic example of how you can have users like or dislike chat messages:
-
-```py
-import gradio as gr
-
-def greet(history, input):
-    return history + [(input, "Hello, " + input)]
-
-def vote(data: gr.LikeData):
-    if data.liked:
-        print("You upvoted this response: " + data.value["value"])
-    else:
-        print("You downvoted this response: " + data.value["value"])
-    
-
-with gr.Blocks() as demo:
-    chatbot = gr.Chatbot()
-    textbox = gr.Textbox()
-    textbox.submit(greet, [chatbot, textbox], [chatbot])
-    chatbot.like(vote, None, None)  # Adding this line causes the like/dislike icons to appear in your chatbot
-    
-demo.launch()
-```
 
 ## Adding Markdown, Images, Audio, or Videos
 
@@ -86,19 +65,19 @@ The `gr.Chatbot` component supports a subset of markdown including bold, italics
 
 ```py
 def bot(history):
-    response = "**That's cool!**"
-    history[-1][1] = response
+    response = {"role": "assistant", "content": "**That's cool!**"}
+    history.append(response)
     return history
 ```
 
-In addition, it can handle media files, such as images, audio, and video. You can use the `MultimodalTextbox` component to easily upload all types of media files to your chatbot. To pass in a media file, we must pass in the file as a tuple of two strings, like this: `(filepath, alt_text)`. The `alt_text` is optional, so you can also just pass in a tuple with a single element `(filepath,)`, like this:
+In addition, it can handle media files, such as images, audio, and video. You can use the `MultimodalTextbox` component to easily upload all types of media files to your chatbot. To pass in a media file, we must pass in the file a dictionary with a `path` key pointing to a local file and an `alt_text` key. The `alt_text` is optional, so you can also just pass in a tuple with a single element `{"path": "filepath"}`, like this:
 
 ```python
 def add_message(history, message):
     for x in message["files"]:
-        history.append(((x["path"],), None))  
+        history.append({"role": "user", "content": {"path": x}})
     if message["text"] is not None:
-        history.append((message["text"], None))
+        history.append({"role": "user", "content": message["text"]})
     return history, gr.MultimodalTextbox(value=None, interactive=False, file_types=["image"])
 ```
 
diff --git a/guides/05_chatbots/04_agents-and-tool-usage.md b/guides/05_chatbots/03_agents-and-tool-usage.md
similarity index 97%
rename from guides/05_chatbots/04_agents-and-tool-usage.md
rename to guides/05_chatbots/03_agents-and-tool-usage.md
index d14d5536ebe34..fa3be443b2317 100644
--- a/guides/05_chatbots/04_agents-and-tool-usage.md
+++ b/guides/05_chatbots/03_agents-and-tool-usage.md
@@ -3,7 +3,7 @@
 Tags: LLM, AGENTS, CHAT
 Related spaces: https://huggingface.co/spaces/gradio/agent_chatbot, https://huggingface.co/spaces/gradio/langchain-agent
 
-The Gradio Chatbot can natively display intermediate thoughts and tool usage. This makes it perfect for creating UIs for LLM agents. This guide will show you how. Before we begin, familiarize yourself with the `messages` chatbot data format documented in this [guide](./messages-format).
+The Gradio Chatbot can natively display intermediate thoughts and tool usage. This makes it perfect for creating UIs for LLM agents. This guide will show you how.
 
 ## The metadata key
 
diff --git a/guides/05_chatbots/03_messages-format.md b/guides/05_chatbots/03_messages-format.md
deleted file mode 100644
index a2d96eb10bdc0..0000000000000
--- a/guides/05_chatbots/03_messages-format.md
+++ /dev/null
@@ -1,97 +0,0 @@
-# Using the Messages data format
-
-In the previous guides, we built chatbots where the conversation history was stored in a list of tuple pairs.
-It is also possible to use the more flexible [Messages API](https://huggingface.co/docs/text-generation-inference/en/messages_api#messages-api), which is fully compatible with LLM API providers such as Hugging Face Text Generation Inference, Llama.cpp server, and OpenAI's chat completions API.
-
-To use this format, set the `type` parameter of `gr.Chatbot` or `gr.ChatInterface` to `'messages'`. This expects a list of dictionaries with content and role keys.
-
-The `role` key should be `'assistant'` for the bot/llm and `user` for the human.
-
-The `content` key can be one of three things:
-
-1. A string (markdown supported) to display a simple text message
-2. A dictionary (or `gr.FileData`) to display a file. At minimum this dictionary should contain a `path` key corresponding to the path to the file. Full documenation of this dictionary is in the appendix of this guide.
-3. A gradio component - at present `gr.Plot`, `gr.Image`, `gr.Gallery`, `gr.Video`, `gr.Audio` are supported. 
-
-For better type hinting and auto-completion in your IDE, you can use the `gr.ChatMessage` dataclass:
-
-```python
-from gradio import ChatMessage
-
-def chat_function(message, history):
-    history.append(ChatMessage(role="user", content=message))
-    history.append(ChatMessage(role="assistant", content="Hello, how can I help you?"))
-    return history
-```
-
-## Examples
-
-The following chatbot will always greet the user with "Hello"
-
-```python
-import gradio as gr
-
-def chat_greeter(msg, history):
-    history.append({"role": "assistant", "content": "Hello!"})
-    return history
-
-with gr.Blocks() as demo:
-    chatbot = gr.Chatbot(type="messages")
-    msg = gr.Textbox()
-    clear = gr.ClearButton([msg, chatbot])
-
-    msg.submit(chat_greeter, [msg, chatbot], [chatbot])
-
-demo.launch()
-```
-
-The messages format lets us seemlessly stream from the Hugging Face Inference API -
-
-```python
-import gradio as gr
-from huggingface_hub import InferenceClient
-
-client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
-
-def respond(message, history: list[dict]):
-
-    messages = history + [{"role": "user", "content": message}]
-
-    print(messages)
-
-    response = {"role": "assistant", "content": ""}
-
-    for message in client.chat_completion(
-        messages,
-        max_tokens=512,
-        stream=True,
-        temperature=0.7,
-        top_p=0.95,
-    ):
-        token = message.choices[0].delta.content
-
-        response['content'] += token
-        yield response
-
-
-demo = gr.ChatInterface(respond, type="messages")
-
-if __name__ == "__main__":
-    demo.launch()
-```
-
-
-### Appendix
-
-The full contents of the dictionary format for files is documented here
-
-```python
-class FileDataDict(TypedDict):
-    path: str  # server filepath
-    url: NotRequired[Optional[str]]  # normalised server url
-    size: NotRequired[Optional[int]]  # size in bytes
-    orig_name: NotRequired[Optional[str]]  # original filename
-    mime_type: NotRequired[Optional[str]]
-    is_stream: NotRequired[bool]
-    meta: dict[Literal["_type"], Literal["gradio.FileData"]]
-```
\ No newline at end of file
diff --git a/guides/05_chatbots/04_chatbot-specific-events.md b/guides/05_chatbots/04_chatbot-specific-events.md
new file mode 100644
index 0000000000000..b56907692723d
--- /dev/null
+++ b/guides/05_chatbots/04_chatbot-specific-events.md
@@ -0,0 +1,142 @@
+# Liking, Retrying and Undoing Messages
+
+Tags: LLM, CHAT
+
+Users expect modern chatbot UIs to let them easily interact with individual chat messages: for example, users might want to retry message generations, undo messages, or click on a like/dislike button to upvote or downvote a generated message.
+
+Thankfully, the Gradio Chatbot exposes three events, `.retry`, `.undo`, and `like`, to let you build this functionality into your application. As an application developer, you can attach functions to any of these event, allowing you to run arbitrary Python functions e.g. when a user interacts with a message.
+
+In this demo, we'll build a UI that implements these events. You can see our finished demo deployed on Hugging Face spaces here:
+
+$demo_chatbot_retry_undo_like
+
+Tip: `gr.ChatInterface` automatically uses the `retry` and `.undo` events so it's best to start there in order get a fully working application quickly.
+
+
+## The UI
+
+First, we'll build the UI without handling these events and build from there. 
+We'll use the Hugging Face InferenceClient in order to get started without setting up
+any API keys.
+
+This is what the first draft of our application looks like:
+
+```python
+from huggingface_hub import InferenceClient
+import gradio as gr
+
+client = InferenceClient()
+
+def respond(
+    prompt: str,
+    history,
+):
+    if not history:
+        history = [{"role": "system", "content": "You are a friendly chatbot"}]
+    history.append({"role": "user", "content": prompt})
+
+    yield history
+
+    response = {"role": "assistant", "content": ""}
+    for message in client.chat_completion(
+        history,
+        temperature=0.95,
+        top_p=0.9,
+        max_tokens=512,
+        stream=True,
+        model="HuggingFaceH4/zephyr-7b-beta"
+    ):
+        response["content"] += message.choices[0].delta.content or ""
+
+        yield history + [response]
+
+
+with gr.Blocks() as demo:
+    gr.Markdown("# Chat with Hugging Face Zephyr 7b 🤗")
+    chatbot = gr.Chatbot(
+        label="Agent",
+        type="messages",
+        avatar_images=(
+            None,
+            "https://em-content.zobj.net/source/twitter/376/hugging-face_1f917.png",
+        ),
+    )
+    prompt = gr.Textbox(max_lines=1, label="Chat Message")
+    prompt.submit(respond, [prompt, chatbot], [chatbot])
+    prompt.submit(lambda: "", None, [prompt])
+
+
+if __name__ == "__main__":
+    demo.launch()
+```
+
+## The Undo Event
+
+Our undo event will populate the textbox with the previous user message and also remove all subsequent assistant responses.
+
+In order to know the index of the last user message, we can pass `gr.UndoData` to our event handler function like so:
+
+``python
+def handle_undo(history, undo_data: gr.UndoData):
+    return history[:undo_data.index], history[undo_data.index]['content']
+```
+
+We then pass this function to the `undo` event!
+
+```python
+    chatbot.undo(handle_undo, chatbot, [chatbot, prompt])
+```
+
+You'll notice that every bot response will now have an "undo icon" you can use to undo the response - 
+
+![undo_event](https://github.com/user-attachments/assets/180b5302-bc4a-4c3e-903c-f14ec2adcaa6)
+
+Tip: You can also access the content of the user message with `undo_data.value`
+
+## The Retry Event
+
+The retry event will work similarly. We'll use `gr.RetryData` to get the index of the previous user message and remove all the subsequent messages from the history. Then we'll use the `respond` function to generate a new response. We could also get the previous prompt via the `value` property of `gr.RetryData`.
+
+```python
+def handle_retry(history, retry_data: gr.RetryData):
+    new_history = history[:retry_data.index]
+    previous_prompt = history[retry_data.index]['content']
+    yield from respond(previous_prompt, new_history)
+
+...
+
+chatbot.retry(handle_retry, chatbot, [chatbot])
+```
+
+You'll see that the bot messages have a "retry" icon now -
+
+![retry_event](https://github.com/user-attachments/assets/cec386a7-c4cd-4fb3-a2d7-78fd806ceac6)
+
+Tip: The Hugging Face inference API caches responses, so in this demo, the retry button will not generate a new response.
+
+## The Like Event
+
+By now you should hopefully be seeing the pattern!
+To let users like a message, we'll add a `.like` event to our chatbot.
+We'll pass it a function that accepts a `gr.LikeData` object.
+In this case, we'll just print the message that was either liked or disliked.
+
+```python
+def handle_like(data: gr.LikeData):
+    if data.liked:
+        print("You upvoted this response: ", data.value)
+    else:
+        print("You downvoted this response: ", data.value)
+
+...
+
+chatbot.like(vote, None, None)
+```
+
+
+## Conclusion
+
+That's it! You now know how you can implement the retry, undo, and like events for the Chatbot.
+
+
+
diff --git a/guides/07_streaming/01_streaming-ai-generated-audio.md b/guides/07_streaming/01_streaming-ai-generated-audio.md
new file mode 100644
index 0000000000000..2885e03be1a06
--- /dev/null
+++ b/guides/07_streaming/01_streaming-ai-generated-audio.md
@@ -0,0 +1,151 @@
+# Streaming AI Generated Audio
+
+Tags: AUDIO, STREAMING
+
+In this guide, we'll build a novel AI application to showcase Gradio's audio output streaming. We're going to a build a talking [Magic 8 Ball](https://en.wikipedia.org/wiki/Magic_8_Ball) 🎱
+
+A Magic 8 Ball is a toy that answers any question after you shake it. Our application will do the same but it will also speak its response!
+
+We won't cover all the implementation details in this blog post but the code is freely available on [Hugging Face Spaces](https://huggingface.co/spaces/gradio/magic-8-ball).
+
+## The Overview
+
+Just like the classic Magic 8 Ball, a user should ask it a question orally and then wait for a response. Under the hood, we'll use Whisper to transcribe the audio and then use an LLM to generate a magic-8-ball-style answer. Finally, we'll use Parler TTS to read the response aloud.
+
+## The UI
+
+First let's define the UI and put placeholders for all the python logic.
+
+```python
+with gr.Blocks() as block:
+    gr.HTML(
+        f"""
+        <h1 style='text-align: center;'> Magic 8 Ball 🎱 </h1>
+        <h3 style='text-align: center;'> Ask a question and receive wisdom </h3>
+        <p style='text-align: center;'> Powered by <a href="https://github.com/huggingface/parler-tts"> Parler-TTS</a>
+        """
+    )
+    with gr.Group():
+        with gr.Row():
+            audio_out = gr.Audio(label="Spoken Answer", streaming=True, autoplay=True)
+            answer = gr.Textbox(label="Answer")
+            state = gr.State()
+        with gr.Row():
+            audio_in = gr.Audio(label="Speak your question", sources="microphone", type="filepath")
+
+    audio_in.stop_recording(generate_response, audio_in, [state, answer, audio_out])\
+        .then(fn=read_response, inputs=state, outputs=[answer, audio_out])
+
+block.launch()
+```
+
+We're placing the output Audio and Textbox components and the input Audio component in separate rows. In order to stream the audio from the server, we'll set `streaming=True` in the output Audio component. We'll also set `autoplay=True` so that the audio plays as soon as it's ready.
+We'll be using the Audio input component's `stop_recording` event to trigger our application's logic when a user stops recording from their microphone.
+
+We're separating the logic into two parts. First, `generate_response` will take the recorded audio, transcribe it and generate a response with an LLM. We're going to store the response in a `gr.State` variable that then gets passed to the `read_response` function that generates the audio.
+
+We're doing this in two parts because only `read_response` will require a GPU. Our app will run on Hugging Faces [ZeroGPU](https://huggingface.co/zero-gpu-explorers) which has time-based quotas. Since generating the response can be done with Hugging Face's Inference API, we shouldn't include that code in our GPU function as it will needlessly use our GPU quota.
+
+## The Logic
+
+As mentioned above, we'll use [Hugging Face's Inference API](https://huggingface.co/docs/huggingface_hub/guides/inference) to transcribe the audio and generate a response from an LLM. After instantiating the client, I use the `automatic_speech_recognition` method (this automatically uses Whisper running on Hugging Face's Inference Servers) to transcribe the audio. Then I pass the question to an LLM (Mistal-7B-Instruct) to generate a response. We are prompting the LLM to act like a magic 8 ball with the system message.
+
+Our `generate_response` function will also send empty updates to the output textbox and audio components (returning `None`). 
+This is because I want the Gradio progress tracker to be displayed over the components but I don't want to display the answer until the audio is ready.
+
+
+```python
+from huggingface_hub import InferenceClient
+
+client = InferenceClient(token=os.getenv("HF_TOKEN"))
+
+def generate_response(audio):
+    gr.Info("Transcribing Audio", duration=5)
+    question = client.automatic_speech_recognition(audio).text
+
+    messages = [{"role": "system", "content": ("You are a magic 8 ball."
+                                              "Someone will present to you a situation or question and your job "
+                                              "is to answer with a cryptic adage or proverb such as "
+                                              "'curiosity killed the cat' or 'The early bird gets the worm'."
+                                              "Keep your answers short and do not include the phrase 'Magic 8 Ball' in your response. If the question does not make sense or is off-topic, say 'Foolish questions get foolish answers.'"
+                                              "For example, 'Magic 8 Ball, should I get a dog?', 'A dog is ready for you but are you ready for the dog?'")},
+                {"role": "user", "content": f"Magic 8 Ball please answer this question -  {question}"}]
+    
+    response = client.chat_completion(messages, max_tokens=64, seed=random.randint(1, 5000),
+                                      model="mistralai/Mistral-7B-Instruct-v0.3")
+
+    response = response.choices[0].message.content.replace("Magic 8 Ball", "").replace(":", "")
+    return response, None, None
+```
+
+
+Now that we have our text response, we'll read it aloud with Parler TTS. The `read_response` function will be a python generator that yields the next chunk of audio as it's ready.
+
+
+We'll be using the [Mini v0.1](https://huggingface.co/parler-tts/parler_tts_mini_v0.1) for the feature extraction but the [Jenny fine tuned version](https://huggingface.co/parler-tts/parler-tts-mini-jenny-30H) for the voice. This is so that the voice is consistent across generations.
+
+
+Streaming audio with transformers requires a custom Streamer class. You can see the implementation [here](https://huggingface.co/spaces/gradio/magic-8-ball/blob/main/streamer.py). Additionally, we'll convert the output to bytes so that it can be streamed faster from the backend. 
+
+
+```python
+from streamer import ParlerTTSStreamer
+from transformers import AutoTokenizer, AutoFeatureExtractor, set_seed
+import numpy as np
+import spaces
+import torch
+from threading import Thread
+
+
+device = "cuda:0" if torch.cuda.is_available() else "mps" if torch.backends.mps.is_available() else "cpu"
+torch_dtype = torch.float16 if device != "cpu" else torch.float32
+
+repo_id = "parler-tts/parler_tts_mini_v0.1"
+
+jenny_repo_id = "ylacombe/parler-tts-mini-jenny-30H"
+
+model = ParlerTTSForConditionalGeneration.from_pretrained(
+    jenny_repo_id, torch_dtype=torch_dtype, low_cpu_mem_usage=True
+).to(device)
+
+tokenizer = AutoTokenizer.from_pretrained(repo_id)
+feature_extractor = AutoFeatureExtractor.from_pretrained(repo_id)
+
+sampling_rate = model.audio_encoder.config.sampling_rate
+frame_rate = model.audio_encoder.config.frame_rate
+
+@spaces.GPU
+def read_response(answer):
+
+    play_steps_in_s = 2.0
+    play_steps = int(frame_rate * play_steps_in_s)
+
+    description = "Jenny speaks at an average pace with a calm delivery in a very confined sounding environment with clear audio quality."
+    description_tokens = tokenizer(description, return_tensors="pt").to(device)
+
+    streamer = ParlerTTSStreamer(model, device=device, play_steps=play_steps)
+    prompt = tokenizer(answer, return_tensors="pt").to(device)
+
+    generation_kwargs = dict(
+        input_ids=description_tokens.input_ids,
+        prompt_input_ids=prompt.input_ids,
+        streamer=streamer,
+        do_sample=True,
+        temperature=1.0,
+        min_new_tokens=10,
+    )
+
+    set_seed(42)
+    thread = Thread(target=model.generate, kwargs=generation_kwargs)
+    thread.start()
+
+    for new_audio in streamer:
+        print(f"Sample of length: {round(new_audio.shape[0] / sampling_rate, 2)} seconds")
+        yield answer, numpy_to_mp3(new_audio, sampling_rate=sampling_rate)
+```
+
+## Conclusion
+
+You can see our final application [here](https://huggingface.co/spaces/gradio/magic-8-ball)!
+
+
diff --git a/guides/07_streaming/02_object-detection-from-webcam-with-webrtc.md b/guides/07_streaming/02_object-detection-from-webcam-with-webrtc.md
new file mode 100644
index 0000000000000..3ee1b2ee68170
--- /dev/null
+++ b/guides/07_streaming/02_object-detection-from-webcam-with-webrtc.md
@@ -0,0 +1,102 @@
+# Real Time Object Detection from a Webcam Stream with WebRTC
+
+Tags: VISION, STREAMING, WEBCAM
+
+In this guide, we'll use YOLOv10 to perform real-time object detection in Gradio from a user's webcam feed. We'll utilize the latest streaming features introduced in Gradio 5.0. You can see the finished product in action below:
+
+<video src="https://github.com/user-attachments/assets/4584cec6-8c1a-401b-9b61-a4fe0718b558" controls
+height="600" width="600" style="display: block; margin: auto;" autoplay="true" loop="true">
+</video>
+
+## Setting up
+
+Start by installing all the dependencies. Add the following lines to a `requirements.txt` file and run `pip install -r requirements.txt`:
+
+```bash
+opencv-python
+twilio
+gradio>=5.0
+gradio-webrtc
+onnxruntime-gpu
+```
+
+We'll use the ONNX runtime to speed up YOLOv10 inference. This guide assumes you have access to a GPU. If you don't, change `onnxruntime-gpu` to `onnxruntime`. Without a GPU, the model will run slower, resulting in a laggy demo.
+
+We'll use OpenCV for image manipulation and the [Gradio WebRTC](https://github.com/freddyaboulton/gradio-webrtc) custom component to use [WebRTC](https://webrtc.org/) under the hood, achieving near-zero latency.
+
+**Note**: If you want to deploy this app on any cloud provider, you'll need to use the free Twilio API for their [TURN servers](https://www.twilio.com/docs/stun-turn). Create a free account on Twilio. If you're not familiar with TURN servers, consult this [guide](https://www.twilio.com/docs/stun-turn/faq#faq-what-is-nat).
+
+## The Inference Function
+
+We'll download the YOLOv10 model from the Hugging Face hub and instantiate a custom inference class to use this model. 
+
+The implementation of the inference class isn't covered in this guide, but you can find the source code [here](https://huggingface.co/spaces/freddyaboulton/webrtc-yolov10n/blob/main/inference.py#L9) if you're interested. This implementation borrows heavily from this [github repository](https://github.com/ibaiGorordo/ONNX-YOLOv8-Object-Detection).
+
+We're using the `yolov10-n` variant because it has the lowest latency. See the [Performance](https://github.com/THU-MIG/yolov10?tab=readme-ov-file#performance) section of the README in the YOLOv10 GitHub repository.
+
+```python
+from huggingface_hub import hf_hub_download
+from inference import YOLOv10
+
+model_file = hf_hub_download(
+    repo_id="onnx-community/yolov10n", filename="onnx/model.onnx"
+)
+
+model = YOLOv10(model_file)
+
+def detection(image, conf_threshold=0.3):
+    image = cv2.resize(image, (model.input_width, model.input_height))
+    new_image = model.detect_objects(image, conf_threshold)
+    return new_image
+```
+
+Our inference function, `detection`, accepts a numpy array from the webcam and a desired confidence threshold. Object detection models like YOLO identify many objects and assign a confidence score to each. The lower the confidence, the higher the chance of a false positive. We'll let users adjust the confidence threshold.
+
+The function returns a numpy array corresponding to the same input image with all detected objects in bounding boxes.
+
+## The Gradio Demo
+
+The Gradio demo is straightforward, but we'll implement a few specific features:
+
+1. Use the `WebRTC` custom component to ensure input and output are sent to/from the server with WebRTC. 
+2. The [WebRTC](https://github.com/freddyaboulton/gradio-webrtc) component will serve as both an input and output component.
+3. Utilize the `time_limit` parameter of the `stream` event. This parameter sets a processing time for each user's stream. In a multi-user setting, such as on Spaces, we'll stop processing the current user's stream after this period and move on to the next. 
+
+We'll also apply custom CSS to center the webcam and slider on the page.
+
+```python
+css = """.my-group {max-width: 600px !important; max-height: 600px !important;}
+         .my-column {display: flex !important; justify-content: center !important; align-items: center !important;}"""
+
+with gr.Blocks(css=css) as demo:
+    gr.HTML(
+        """
+        <h1 style='text-align: center'>
+        YOLOv10 Webcam Stream (Powered by WebRTC ⚡️)
+        </h1>
+        """
+    )
+    with gr.Column(elem_classes=["my-column"]):
+        with gr.Group(elem_classes=["my-group"]):
+            image = WebRTC(label="Stream", rtc_configuration=rtc_configuration)
+            conf_threshold = gr.Slider(
+                label="Confidence Threshold",
+                minimum=0.0,
+                maximum=1.0,
+                step=0.05,
+                value=0.30,
+            )
+
+        image.stream(
+            fn=detection, inputs=[image, conf_threshold], outputs=[image], time_limit=10
+        )
+
+if __name__ == "__main__":
+    demo.launch()
+```
+
+## Conclusion
+
+Our app is hosted on Hugging Face Spaces [here](https://huggingface.co/spaces/freddyaboulton/webrtc-yolov10n). 
+
+You can use this app as a starting point to build real-time image applications with Gradio. Don't hesitate to open issues in the space or in the [WebRTC component GitHub repo](https://github.com/freddyaboulton/gradio-webrtc) if you have any questions or encounter problems.
\ No newline at end of file
diff --git a/guides/07_streaming/03_object-detection-from-video.md b/guides/07_streaming/03_object-detection-from-video.md
new file mode 100644
index 0000000000000..cabc12af6b9ee
--- /dev/null
+++ b/guides/07_streaming/03_object-detection-from-video.md
@@ -0,0 +1,181 @@
+# Object Detection from a Webcam Stream
+
+Tags: VISION, STREAMING, VIDEO
+
+In this guide we'll use the [RT-DETR](https://huggingface.co/docs/transformers/en/model_doc/rt_detr) model to detect objects in a user uploaded video. We'll stream the results from the server using the new video streaming features introduced in Gradio 5.0.
+
+![video_object_detection_stream_latest](https://github.com/user-attachments/assets/4e27ac58-5ded-495d-9e0d-5e87e68b1355)
+
+## Setting up the Model
+
+First, we'll install the following requirements in our system:
+
+```
+opencv-python
+torch
+transformers>=4.43.0
+spaces
+```
+
+Then, we'll download the model from the Hugging Face Hub:
+
+```python
+from transformers import RTDetrForObjectDetection, RTDetrImageProcessor
+
+image_processor = RTDetrImageProcessor.from_pretrained("PekingU/rtdetr_r50vd")
+model = RTDetrForObjectDetection.from_pretrained("PekingU/rtdetr_r50vd").to("cuda")
+```
+
+We're moving the model to the GPU. We'll be deploying our model to Hugging Face Spaces and running the inference in the [free ZeroGPU cluster](https://huggingface.co/zero-gpu-explorers). 
+
+
+## The Inference Function
+
+Our inference function will accept a video and a desired confidence threshold.
+Object detection models identify many objects and assign a confidence score to each object. The lower the confidence, the higher the chance of a false positive. So we will let our users set the conference threshold.
+
+Our function will iterate over the frames in the video and run the RT-DETR model over each frame.
+We will then draw the bounding boxes for each detected object in the frame and save the frame to a new output video.
+The function will yield each output video in chunks of two seconds.
+
+In order to keep inference times as low as possible on ZeroGPU (there is a time-based quota),
+we will halve the original frames-per-second in the output video and resize the input frames to be half the original 
+size before running the model.
+
+The code for the inference function is below - we'll go over it piece by piece.
+
+```python
+import spaces
+import cv2
+from PIL import Image
+import torch
+import time
+import numpy as np
+import uuid
+
+from draw_boxes import draw_bounding_boxes
+
+SUBSAMPLE = 2
+
+@spaces.GPU
+def stream_object_detection(video, conf_threshold):
+    cap = cv2.VideoCapture(video)
+
+    # This means we will output mp4 videos
+    video_codec = cv2.VideoWriter_fourcc(*"mp4v") # type: ignore
+    fps = int(cap.get(cv2.CAP_PROP_FPS))
+
+    desired_fps = fps // SUBSAMPLE
+    width  = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH)) // 2
+    height = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT)) // 2
+
+    iterating, frame = cap.read()
+
+    n_frames = 0
+
+    # Use UUID to create a unique video file
+    output_video_name = f"output_{uuid.uuid4()}.mp4"
+
+    # Output Video
+    output_video = cv2.VideoWriter(output_video_name, video_codec, desired_fps, (width, height)) # type: ignore
+    batch = []
+
+    while iterating:
+        frame = cv2.resize( frame, (0,0), fx=0.5, fy=0.5)
+        frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
+        if n_frames % SUBSAMPLE == 0:
+            batch.append(frame)
+        if len(batch) == 2 * desired_fps:
+            inputs = image_processor(images=batch, return_tensors="pt").to("cuda")
+
+            with torch.no_grad():
+                outputs = model(**inputs)
+
+            boxes = image_processor.post_process_object_detection(
+                outputs,
+                target_sizes=torch.tensor([(height, width)] * len(batch)),
+                threshold=conf_threshold)
+            
+            for i, (array, box) in enumerate(zip(batch, boxes)):
+                pil_image = draw_bounding_boxes(Image.fromarray(array), box, model, conf_threshold)
+                frame = np.array(pil_image)
+                # Convert RGB to BGR
+                frame = frame[:, :, ::-1].copy()
+                output_video.write(frame)
+
+            batch = []
+            output_video.release()
+            yield output_video_name
+            output_video_name = f"output_{uuid.uuid4()}.mp4"
+            output_video = cv2.VideoWriter(output_video_name, video_codec, desired_fps, (width, height)) # type: ignore
+
+        iterating, frame = cap.read()
+        n_frames += 1
+```
+
+1. **Reading from the Webcam**
+
+One of the industry standards for creating videos in python is OpenCV so we will use it in this video.
+
+The `cap` variable is how we will read from the input video. Whenever we call `cap.read()`, we are reading the next frame in the video.
+
+In order to stream video in Gradio, we need to yield a different video file for each "chunk" of the output video.
+We create the next video file to write to with the `output_video = cv2.VideoWriter(output_video_name, video_codec, desired_fps, (width, height))` line. The `video_codec` is how we specify the type of video file. Only "mp4" and "ts" files are supported for video sreaming at the moment.
+
+
+2. **The Inference Loop**
+
+For each frame in the video, we will resize it to be half the size. OpenCV reads files in `BGR` format, so will convert to the expected `RGB` format of transfomers. That's what the first two lines of the while loop are doing. 
+
+We take every other frame and add it to a `batch` list so that the output video is half the original FPS. When the batch covers two seconds of video, we will run the model. The two second threshold was chosen to keep the processing time of each batch small enough so that video is smoothly displayed in the server while not requiring too many separate forward passes. In order for video streaming to work properly in Gradio, the batch size should be at least 1 second. 
+
+We run the forward pass of the model and then use the `post_process_object_detection` method of the model to scale the detected bounding boxes to the size of the input frame.
+
+We make use of a custom function to draw the bounding boxes (source [here](https://huggingface.co/spaces/gradio/rt-detr-object-detection/blob/main/draw_boxes.py#L14)). We then have to convert from `RGB` to `BGR` before writing back to the output video.
+
+Once we have finished processing the batch, we create a new output video file for the next batch.
+
+## The Gradio Demo
+
+The UI code is pretty similar to other kinds of Gradio apps. 
+We'll use a standard two-column layout so that users can see the input and output videos side by side.
+
+In order for streaming to work, we have to set `streaming=True` in the output video. Setting the video
+to autoplay is not necessary but it's a better experience for users.
+
+```python
+with gr.Blocks() as app:
+    gr.HTML(
+        """
+    <h1 style='text-align: center'>
+    Video Object Detection with <a href='https://huggingface.co/PekingU/rtdetr_r101vd_coco_o365' target='_blank'>RT-DETR</a>
+    </h1>
+    """)
+    with gr.Row():
+        with gr.Column():
+            video = gr.Video(label="Video Source")
+            conf_threshold = gr.Slider(
+                label="Confidence Threshold",
+                minimum=0.0,
+                maximum=1.0,
+                step=0.05,
+                value=0.30,
+            )
+        with gr.Column():
+            output_video = gr.Video(label="Processed Video", streaming=True, autoplay=True)
+
+    video.upload(
+        fn=stream_object_detection,
+        inputs=[video, conf_threshold],
+        outputs=[output_video],
+    )
+```
+
+
+## Conclusion
+
+You can check out our demo hosted on Hugging Face Spaces [here](https://huggingface.co/spaces/gradio/rt-detr-object-detection). 
+
+It is also embedded on this page below
+
+$demo_rt-detr-object-detection
\ No newline at end of file
diff --git a/guides/07_streaming/04_conversational-chatbot.md b/guides/07_streaming/04_conversational-chatbot.md
new file mode 100644
index 0000000000000..16bf6bacc53a0
--- /dev/null
+++ b/guides/07_streaming/04_conversational-chatbot.md
@@ -0,0 +1,189 @@
+# Building Conversational Chatbots with Gradio
+
+Tags: AUDIO, STREAMING, CHATBOTS
+
+## Introduction
+
+The next generation of AI user interfaces is moving towards audio-native experiences. Users will be able to speak to chatbots and receive spoken responses in return. Several models have been built under this paradigm, including GPT-4o and [mini omni](https://github.com/gpt-omni/mini-omni).
+
+In this guide, we'll walk you through building your own conversational chat application using mini omni as an example. You can see a demo of the finished app below:
+
+<video src="https://github.com/user-attachments/assets/db36f4db-7535-49f1-a2dd-bd36c487ebdf" controls
+height="600" width="600" style="display: block; margin: auto;" autoplay="true" loop="true">
+</video>
+
+## Application Overview
+
+Our application will enable the following user experience:
+
+1. Users click a button to start recording their message
+2. The app detects when the user has finished speaking and stops recording
+3. The user's audio is passed to the omni model, which streams back a response
+4. After omni mini finishes speaking, the user's microphone is reactivated
+5. All previous spoken audio, from both the user and omni, is displayed in a chatbot component
+
+Let's dive into the implementation details.
+
+## Processing User Audio
+
+We'll stream the user's audio from their microphone to the server and determine if the user has stopped speaking on each new chunk of audio.
+
+Here's our `process_audio` function:
+
+```python
+import numpy as np
+from utils import determine_pause
+
+def process_audio(audio: tuple, state: AppState):
+    if state.stream is None:
+        state.stream = audio[1]
+        state.sampling_rate = audio[0]
+    else:
+        state.stream = np.concatenate((state.stream, audio[1]))
+
+    pause_detected = determine_pause(state.stream, state.sampling_rate, state)
+    state.pause_detected = pause_detected
+
+    if state.pause_detected and state.started_talking:
+        return gr.Audio(recording=False), state
+    return None, state
+```
+
+This function takes two inputs:
+1. The current audio chunk (a tuple of `(sampling_rate, numpy array of audio)`)
+2. The current application state
+
+We'll use the following `AppState` dataclass to manage our application state:
+
+```python
+from dataclasses import dataclass
+
+@dataclass
+class AppState:
+    stream: np.ndarray | None = None
+    sampling_rate: int = 0
+    pause_detected: bool = False
+    stopped: bool = False
+    conversation: list = []
+```
+
+The function concatenates new audio chunks to the existing stream and checks if the user has stopped speaking. If a pause is detected, it returns an update to stop recording. Otherwise, it returns `None` to indicate no changes.
+
+The implementation of the `determine_pause` function is specific to the omni-mini project and can be found [here](https://huggingface.co/spaces/gradio/omni-mini/blob/eb027808c7bfe5179b46d9352e3fa1813a45f7c3/app.py#L98).
+
+## Generating the Response
+
+After processing the user's audio, we need to generate and stream the chatbot's response. Here's our `response` function:
+
+```python
+import io
+import tempfile
+from pydub import AudioSegment
+
+def response(state: AppState):
+    if not state.pause_detected and not state.started_talking:
+        return None, AppState()
+    
+    audio_buffer = io.BytesIO()
+
+    segment = AudioSegment(
+        state.stream.tobytes(),
+        frame_rate=state.sampling_rate,
+        sample_width=state.stream.dtype.itemsize,
+        channels=(1 if len(state.stream.shape) == 1 else state.stream.shape[1]),
+    )
+    segment.export(audio_buffer, format="wav")
+
+    with tempfile.NamedTemporaryFile(suffix=".wav", delete=False) as f:
+        f.write(audio_buffer.getvalue())
+    
+    state.conversation.append({"role": "user",
+                                "content": {"path": f.name,
+                                "mime_type": "audio/wav"}})
+    
+    output_buffer = b""
+
+    for mp3_bytes in speaking(audio_buffer.getvalue()):
+        output_buffer += mp3_bytes
+        yield mp3_bytes, state
+
+    with tempfile.NamedTemporaryFile(suffix=".mp3", delete=False) as f:
+        f.write(output_buffer)
+    
+    state.conversation.append({"role": "assistant",
+                    "content": {"path": f.name,
+                                "mime_type": "audio/mp3"}})
+    yield None, AppState(conversation=state.conversation)
+```
+
+This function:
+1. Converts the user's audio to a WAV file
+2. Adds the user's message to the conversation history
+3. Generates and streams the chatbot's response using the `speaking` function
+4. Saves the chatbot's response as an MP3 file
+5. Adds the chatbot's response to the conversation history
+
+Note: The implementation of the `speaking` function is specific to the omni-mini project and can be found [here](https://huggingface.co/spaces/gradio/omni-mini/blob/main/app.py#L116).
+
+## Building the Gradio App
+
+Now let's put it all together using Gradio's Blocks API:
+
+```python
+import gradio as gr
+
+def start_recording_user(state: AppState):
+    if not state.stopped:
+        return gr.Audio(recording=True)
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        with gr.Column():
+            input_audio = gr.Audio(
+                label="Input Audio", sources="microphone", type="numpy"
+            )
+        with gr.Column():
+            chatbot = gr.Chatbot(label="Conversation", type="messages")
+            output_audio = gr.Audio(label="Output Audio", streaming=True, autoplay=True)
+    state = gr.State(value=AppState())
+
+    stream = input_audio.stream(
+        process_audio,
+        [input_audio, state],
+        [input_audio, state],
+        stream_every=0.5,
+        time_limit=30,
+    )
+    respond = input_audio.stop_recording(
+        response,
+        [state],
+        [output_audio, state]
+    )
+    respond.then(lambda s: s.conversation, [state], [chatbot])
+
+    restart = output_audio.stop(
+        start_recording_user,
+        [state],
+        [input_audio]
+    )
+    cancel = gr.Button("Stop Conversation", variant="stop")
+    cancel.click(lambda: (AppState(stopped=True), gr.Audio(recording=False)), None,
+                [state, input_audio], cancels=[respond, restart])
+
+if __name__ == "__main__":
+    demo.launch()
+```
+
+This setup creates a user interface with:
+- An input audio component for recording user messages
+- A chatbot component to display the conversation history
+- An output audio component for the chatbot's responses
+- A button to stop and reset the conversation
+
+The app streams user audio in 0.5-second chunks, processes it, generates responses, and updates the conversation history accordingly.
+
+## Conclusion
+
+This guide demonstrates how to build a conversational chatbot application using Gradio and the mini omni model. You can adapt this framework to create various audio-based chatbot demos. To see the full application in action, visit the Hugging Face Spaces demo: https://huggingface.co/spaces/gradio/omni-mini
+
+Feel free to experiment with different models, audio processing techniques, or user interface designs to create your own unique conversational AI experiences!
\ No newline at end of file
diff --git a/guides/09_other-tutorials/real-time-speech-recognition.md b/guides/07_streaming/05_real-time-speech-recognition.md
similarity index 100%
rename from guides/09_other-tutorials/real-time-speech-recognition.md
rename to guides/07_streaming/05_real-time-speech-recognition.md
diff --git a/guides/07_custom-components/01_custom-components-in-five-minutes.md b/guides/08_custom-components/01_custom-components-in-five-minutes.md
similarity index 92%
rename from guides/07_custom-components/01_custom-components-in-five-minutes.md
rename to guides/08_custom-components/01_custom-components-in-five-minutes.md
index 84cf75c5f7f42..178bbfd4b2783 100644
--- a/guides/07_custom-components/01_custom-components-in-five-minutes.md
+++ b/guides/08_custom-components/01_custom-components-in-five-minutes.md
@@ -1,19 +1,18 @@
 # Custom Components in 5 minutes
 
-Gradio 4.0 introduces Custom Components -- the ability for developers to create their own custom components and use them in Gradio apps.
-You can publish your components as Python packages so that other users can use them as well.
-Users will be able to use all of Gradio's existing functions, such as `gr.Blocks`, `gr.Interface`, API usage, themes, etc. with Custom Components.
-This guide will cover how to get started making custom components.
+Gradio includes the ability for developers to create their own custom components and use them in Gradio apps.You can publish your components as Python packages so that other users can use them as well.
+
+Users will be able to use all of Gradio's existing functions, such as `gr.Blocks`, `gr.Interface`, API usage, themes, etc. with Custom Components. This guide will cover how to get started making custom components.
 
 ## Installation
 
 You will need to have:
 
-* Python 3.8+ (<a href="https://www.python.org/downloads/" target="_blank">install here</a>)
+* Python 3.10+ (<a href="https://www.python.org/downloads/" target="_blank">install here</a>)
 * pip 21.3+ (`python -m pip install --upgrade pip`)
 * Node.js v16.14+ (<a href="https://nodejs.dev/en/download/package-manager/" target="_blank">install here</a>)
 * npm 9+ (<a href="https://docs.npmjs.com/downloading-and-installing-node-js-and-npm/" target="_blank">install here</a>)
-* Gradio 4.0+ (`pip install --upgrade gradio`)
+* Gradio 5+ (`pip install --upgrade gradio`)
 
 ## The Workflow
 
diff --git a/guides/07_custom-components/02_key-component-concepts.md b/guides/08_custom-components/02_key-component-concepts.md
similarity index 100%
rename from guides/07_custom-components/02_key-component-concepts.md
rename to guides/08_custom-components/02_key-component-concepts.md
diff --git a/guides/07_custom-components/03_configuration.md b/guides/08_custom-components/03_configuration.md
similarity index 100%
rename from guides/07_custom-components/03_configuration.md
rename to guides/08_custom-components/03_configuration.md
diff --git a/guides/07_custom-components/04_backend.md b/guides/08_custom-components/04_backend.md
similarity index 100%
rename from guides/07_custom-components/04_backend.md
rename to guides/08_custom-components/04_backend.md
diff --git a/guides/07_custom-components/05_frontend.md b/guides/08_custom-components/05_frontend.md
similarity index 100%
rename from guides/07_custom-components/05_frontend.md
rename to guides/08_custom-components/05_frontend.md
diff --git a/guides/07_custom-components/06_frequently-asked-questions.md b/guides/08_custom-components/06_frequently-asked-questions.md
similarity index 88%
rename from guides/07_custom-components/06_frequently-asked-questions.md
rename to guides/08_custom-components/06_frequently-asked-questions.md
index f6cf7578a2df7..fb3261e469de1 100644
--- a/guides/07_custom-components/06_frequently-asked-questions.md
+++ b/guides/08_custom-components/06_frequently-asked-questions.md
@@ -1,7 +1,15 @@
 # Frequently Asked Questions
 
 ## What do I need to install before using Custom Components?
-Before using Custom Components, make sure you have Python 3.8+, Node.js v16.14+, npm 9+, and Gradio 4.0+ installed.
+
+Before using Custom Components, make sure you have Python 3.10+, Node.js v18+, npm 9+, and Gradio 4.0+ (preferably Gradio 5.0+) installed.
+
+## Are custom components compatible between Gradio 4.0 and 5.0?
+
+Custom components built with Gradio 5.0 should be compatible with Gradio 4.0. If you built your custom component in Gradio 4.0 you will have to rebuild your component to be compatible with Gradio 5.0. Simply follow these steps:
+1. Update the `@gradio/preview` package. `cd` into the `frontend` directory and run `npm update`.
+2.  Modify the `dependencies` key in `pyproject.toml` to pin the maximum allowed Gradio version at version 5, e.g. `dependencies = ["gradio>=4.0,<6.0"]`.
+3. Run the build and publish commands
 
 ## What templates can I use to create my custom component?
 Run `gradio cc show` to see the list of built-in templates.
diff --git a/guides/07_custom-components/07_pdf-component-example.md b/guides/08_custom-components/07_pdf-component-example.md
similarity index 99%
rename from guides/07_custom-components/07_pdf-component-example.md
rename to guides/08_custom-components/07_pdf-component-example.md
index 17efdd804c666..3dfb179d15f16 100644
--- a/guides/07_custom-components/07_pdf-component-example.md
+++ b/guides/08_custom-components/07_pdf-component-example.md
@@ -7,7 +7,7 @@ This is a sneak preview of what our finished component will look like:
 ![demo](https://gradio-builds.s3.amazonaws.com/assets/PDFDisplay.png)
 
 ## Step 0: Prerequisites
-Make sure you have gradio 4.0 installed as well as node 18+.
+Make sure you have gradio 4.0 or higher installed as well as node 18+.
 As of the time of publication, the latest release is 4.1.1.
 Also, please read the [Five Minute Tour](./custom-components-in-five-minutes) of custom components and the [Key Concepts](./key-component-concepts) guide before starting.
 
diff --git a/guides/07_custom-components/08_multimodal-chatbot-part1.md b/guides/08_custom-components/08_multimodal-chatbot-part1.md
similarity index 100%
rename from guides/07_custom-components/08_multimodal-chatbot-part1.md
rename to guides/08_custom-components/08_multimodal-chatbot-part1.md
diff --git a/guides/07_custom-components/09_documenting-custom-components.md b/guides/08_custom-components/09_documenting-custom-components.md
similarity index 100%
rename from guides/07_custom-components/09_documenting-custom-components.md
rename to guides/08_custom-components/09_documenting-custom-components.md
diff --git a/guides/08_gradio-clients-and-lite/01_getting-started-with-the-python-client.md b/guides/09_gradio-clients-and-lite/01_getting-started-with-the-python-client.md
similarity index 100%
rename from guides/08_gradio-clients-and-lite/01_getting-started-with-the-python-client.md
rename to guides/09_gradio-clients-and-lite/01_getting-started-with-the-python-client.md
diff --git a/guides/08_gradio-clients-and-lite/02_getting-started-with-the-js-client.md b/guides/09_gradio-clients-and-lite/02_getting-started-with-the-js-client.md
similarity index 100%
rename from guides/08_gradio-clients-and-lite/02_getting-started-with-the-js-client.md
rename to guides/09_gradio-clients-and-lite/02_getting-started-with-the-js-client.md
diff --git a/guides/08_gradio-clients-and-lite/03_querying-gradio-apps-with-curl.md b/guides/09_gradio-clients-and-lite/03_querying-gradio-apps-with-curl.md
similarity index 100%
rename from guides/08_gradio-clients-and-lite/03_querying-gradio-apps-with-curl.md
rename to guides/09_gradio-clients-and-lite/03_querying-gradio-apps-with-curl.md
diff --git a/guides/08_gradio-clients-and-lite/04_gradio-and-llm-agents.md b/guides/09_gradio-clients-and-lite/04_gradio-and-llm-agents.md
similarity index 100%
rename from guides/08_gradio-clients-and-lite/04_gradio-and-llm-agents.md
rename to guides/09_gradio-clients-and-lite/04_gradio-and-llm-agents.md
diff --git a/guides/08_gradio-clients-and-lite/05_gradio-lite.md b/guides/09_gradio-clients-and-lite/05_gradio-lite.md
similarity index 100%
rename from guides/08_gradio-clients-and-lite/05_gradio-lite.md
rename to guides/09_gradio-clients-and-lite/05_gradio-lite.md
diff --git a/guides/08_gradio-clients-and-lite/06_gradio-lite-and-transformers-js.md b/guides/09_gradio-clients-and-lite/06_gradio-lite-and-transformers-js.md
similarity index 100%
rename from guides/08_gradio-clients-and-lite/06_gradio-lite-and-transformers-js.md
rename to guides/09_gradio-clients-and-lite/06_gradio-lite-and-transformers-js.md
diff --git a/guides/08_gradio-clients-and-lite/07_fastapi-app-with-the-gradio-client.md b/guides/09_gradio-clients-and-lite/07_fastapi-app-with-the-gradio-client.md
similarity index 100%
rename from guides/08_gradio-clients-and-lite/07_fastapi-app-with-the-gradio-client.md
rename to guides/09_gradio-clients-and-lite/07_fastapi-app-with-the-gradio-client.md
diff --git a/guides/09_other-tutorials/01_using-hugging-face-integrations.md b/guides/10_other-tutorials/01_using-hugging-face-integrations.md
similarity index 100%
rename from guides/09_other-tutorials/01_using-hugging-face-integrations.md
rename to guides/10_other-tutorials/01_using-hugging-face-integrations.md
diff --git a/guides/09_other-tutorials/Gradio-and-Comet.md b/guides/10_other-tutorials/Gradio-and-Comet.md
similarity index 100%
rename from guides/09_other-tutorials/Gradio-and-Comet.md
rename to guides/10_other-tutorials/Gradio-and-Comet.md
diff --git a/guides/09_other-tutorials/Gradio-and-ONNX-on-Hugging-Face.md b/guides/10_other-tutorials/Gradio-and-ONNX-on-Hugging-Face.md
similarity index 100%
rename from guides/09_other-tutorials/Gradio-and-ONNX-on-Hugging-Face.md
rename to guides/10_other-tutorials/Gradio-and-ONNX-on-Hugging-Face.md
diff --git a/guides/09_other-tutorials/Gradio-and-Wandb-Integration.md b/guides/10_other-tutorials/Gradio-and-Wandb-Integration.md
similarity index 100%
rename from guides/09_other-tutorials/Gradio-and-Wandb-Integration.md
rename to guides/10_other-tutorials/Gradio-and-Wandb-Integration.md
diff --git a/guides/09_other-tutorials/create-your-own-friends-with-a-gan.md b/guides/10_other-tutorials/create-your-own-friends-with-a-gan.md
similarity index 100%
rename from guides/09_other-tutorials/create-your-own-friends-with-a-gan.md
rename to guides/10_other-tutorials/create-your-own-friends-with-a-gan.md
diff --git a/guides/09_other-tutorials/creating-a-dashboard-from-bigquery-data.md b/guides/10_other-tutorials/creating-a-dashboard-from-bigquery-data.md
similarity index 100%
rename from guides/09_other-tutorials/creating-a-dashboard-from-bigquery-data.md
rename to guides/10_other-tutorials/creating-a-dashboard-from-bigquery-data.md
diff --git a/guides/09_other-tutorials/creating-a-dashboard-from-supabase-data.md b/guides/10_other-tutorials/creating-a-dashboard-from-supabase-data.md
similarity index 100%
rename from guides/09_other-tutorials/creating-a-dashboard-from-supabase-data.md
rename to guides/10_other-tutorials/creating-a-dashboard-from-supabase-data.md
diff --git a/guides/09_other-tutorials/creating-a-realtime-dashboard-from-google-sheets.md b/guides/10_other-tutorials/creating-a-realtime-dashboard-from-google-sheets.md
similarity index 100%
rename from guides/09_other-tutorials/creating-a-realtime-dashboard-from-google-sheets.md
rename to guides/10_other-tutorials/creating-a-realtime-dashboard-from-google-sheets.md
diff --git a/guides/09_other-tutorials/deploying-gradio-with-docker.md b/guides/10_other-tutorials/deploying-gradio-with-docker.md
similarity index 98%
rename from guides/09_other-tutorials/deploying-gradio-with-docker.md
rename to guides/10_other-tutorials/deploying-gradio-with-docker.md
index b61b5c8da2190..b5b0c614b7b11 100644
--- a/guides/09_other-tutorials/deploying-gradio-with-docker.md
+++ b/guides/10_other-tutorials/deploying-gradio-with-docker.md
@@ -35,7 +35,7 @@ This app creates a simple interface that greets the user by name.
 Next, we'll create a Dockerfile to specify how our app should be built and run in a Docker container. Create a file named `Dockerfile` in the same directory as your app with the following content:
 
 ```dockerfile
-FROM python:3.8-slim
+FROM python:3.10-slim
 
 WORKDIR /usr/src/app
 COPY . .
@@ -47,7 +47,7 @@ CMD ["python", "app.py"]
 ```
 
 This Dockerfile performs the following steps:
-- Starts from a Python 3.8 slim image.
+- Starts from a Python 3.10 slim image.
 - Sets the working directory and copies the app into the container.
 - Installs Gradio (you should install all other requirements as well).
 - Exposes port 7860 (Gradio's default port).
diff --git a/guides/09_other-tutorials/developing-faster-with-reload-mode.md b/guides/10_other-tutorials/developing-faster-with-reload-mode.md
similarity index 100%
rename from guides/09_other-tutorials/developing-faster-with-reload-mode.md
rename to guides/10_other-tutorials/developing-faster-with-reload-mode.md
diff --git a/guides/09_other-tutorials/how-to-use-3D-model-component.md b/guides/10_other-tutorials/how-to-use-3D-model-component.md
similarity index 100%
rename from guides/09_other-tutorials/how-to-use-3D-model-component.md
rename to guides/10_other-tutorials/how-to-use-3D-model-component.md
diff --git a/guides/09_other-tutorials/image-classification-in-pytorch.md b/guides/10_other-tutorials/image-classification-in-pytorch.md
similarity index 100%
rename from guides/09_other-tutorials/image-classification-in-pytorch.md
rename to guides/10_other-tutorials/image-classification-in-pytorch.md
diff --git a/guides/09_other-tutorials/image-classification-in-tensorflow.md b/guides/10_other-tutorials/image-classification-in-tensorflow.md
similarity index 100%
rename from guides/09_other-tutorials/image-classification-in-tensorflow.md
rename to guides/10_other-tutorials/image-classification-in-tensorflow.md
diff --git a/guides/09_other-tutorials/image-classification-with-vision-transformers.md b/guides/10_other-tutorials/image-classification-with-vision-transformers.md
similarity index 100%
rename from guides/09_other-tutorials/image-classification-with-vision-transformers.md
rename to guides/10_other-tutorials/image-classification-with-vision-transformers.md
diff --git a/guides/09_other-tutorials/installing-gradio-in-a-virtual-environment.md b/guides/10_other-tutorials/installing-gradio-in-a-virtual-environment.md
similarity index 90%
rename from guides/09_other-tutorials/installing-gradio-in-a-virtual-environment.md
rename to guides/10_other-tutorials/installing-gradio-in-a-virtual-environment.md
index 6487db8204c2b..8b179902d4a93 100644
--- a/guides/09_other-tutorials/installing-gradio-in-a-virtual-environment.md
+++ b/guides/10_other-tutorials/installing-gradio-in-a-virtual-environment.md
@@ -16,7 +16,7 @@ Using virtual environments ensures that you can work on multiple Python projects
 
 To install Gradio on a Windows system in a virtual environment, follow these steps:
 
-1. **Install Python**: Ensure you have Python 3.8 or higher installed. You can download it from [python.org](https://www.python.org/). You can verify the installation by running `python --version` or `python3 --version` in Command Prompt.
+1. **Install Python**: Ensure you have Python 3.10 or higher installed. You can download it from [python.org](https://www.python.org/). You can verify the installation by running `python --version` or `python3 --version` in Command Prompt.
 
 
 2. **Create a Virtual Environment**:
@@ -62,7 +62,7 @@ The installation steps on MacOS and Linux are similar to Windows but with some d
 1. **Install Python**:
    Python usually comes pre-installed on MacOS and most Linux distributions. You can verify the installation by running `python --version` in the terminal (note that depending on how Python is installed, you might have to use `python3` instead of `python` throughout these steps). 
    
-   Ensure you have Python 3.8 or higher installed. If you do not have it installed, you can download it from [python.org](https://www.python.org/). 
+   Ensure you have Python 3.10 or higher installed. If you do not have it installed, you can download it from [python.org](https://www.python.org/). 
 
 2. **Create a Virtual Environment**:
    Open Terminal and navigate to your project directory. Then create a virtual environment using:
diff --git a/guides/09_other-tutorials/named-entity-recognition.md b/guides/10_other-tutorials/named-entity-recognition.md
similarity index 100%
rename from guides/09_other-tutorials/named-entity-recognition.md
rename to guides/10_other-tutorials/named-entity-recognition.md
diff --git a/guides/09_other-tutorials/plot-component-for-maps.md b/guides/10_other-tutorials/plot-component-for-maps.md
similarity index 100%
rename from guides/09_other-tutorials/plot-component-for-maps.md
rename to guides/10_other-tutorials/plot-component-for-maps.md
diff --git a/guides/09_other-tutorials/running-background-tasks.md b/guides/10_other-tutorials/running-background-tasks.md
similarity index 100%
rename from guides/09_other-tutorials/running-background-tasks.md
rename to guides/10_other-tutorials/running-background-tasks.md
diff --git a/guides/09_other-tutorials/running-gradio-on-your-web-server-with-nginx.md b/guides/10_other-tutorials/running-gradio-on-your-web-server-with-nginx.md
similarity index 100%
rename from guides/09_other-tutorials/running-gradio-on-your-web-server-with-nginx.md
rename to guides/10_other-tutorials/running-gradio-on-your-web-server-with-nginx.md
diff --git a/guides/09_other-tutorials/setting-up-a-demo-for-maximum-performance.md b/guides/10_other-tutorials/setting-up-a-demo-for-maximum-performance.md
similarity index 100%
rename from guides/09_other-tutorials/setting-up-a-demo-for-maximum-performance.md
rename to guides/10_other-tutorials/setting-up-a-demo-for-maximum-performance.md
diff --git a/guides/09_other-tutorials/styling-the-gradio-dataframe.md b/guides/10_other-tutorials/styling-the-gradio-dataframe.md
similarity index 100%
rename from guides/09_other-tutorials/styling-the-gradio-dataframe.md
rename to guides/10_other-tutorials/styling-the-gradio-dataframe.md
diff --git a/guides/09_other-tutorials/theming-guide.md b/guides/10_other-tutorials/theming-guide.md
similarity index 91%
rename from guides/09_other-tutorials/theming-guide.md
rename to guides/10_other-tutorials/theming-guide.md
index 48fd97c5c8908..b895982601c05 100644
--- a/guides/09_other-tutorials/theming-guide.md
+++ b/guides/10_other-tutorials/theming-guide.md
@@ -20,11 +20,16 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
 
 Gradio comes with a set of prebuilt themes which you can load from `gr.themes.*`. These are:
 
-- `gr.themes.Base()`
-- `gr.themes.Default()`
-- `gr.themes.Glass()`
-- `gr.themes.Monochrome()`
-- `gr.themes.Soft()`
+
+* `gr.themes.Base()` - the `"base"` theme sets the primary color to blue but otherwise has minimal styling, making it particularly useful as a base for creating new, custom themes.
+* `gr.themes.Default()` - the `"default"` Gradio 5 theme, with a vibrant orange primary color and gray secondary color.
+* `gr.themes.Origin()` - the `"origin"` theme is most similar to Gradio 4 styling. Colors, especially in light mode, are more subdued than the Gradio 5 default theme.
+* `gr.themes.Citrus()` - the `"citrus"` theme uses a yellow primary color, highlights form elements that are in focus, and includes fun 3D effects when buttons are clicked.
+* `gr.themes.Monochrome()` - the `"monochrome"` theme uses a black primary and white secondary color, and uses serif-style fonts, giving the appearance of a black-and-white newspaper. 
+* `gr.themes.Soft()` - the `"soft"` theme uses a purpose primary color and white secondary color. It also increases the border radii and around buttons and form elements and highlights labels.
+* `gr.themes.Glass()` - the `"glass"` theme has a blue primary color and a transclucent gray secondary color. The theme also uses vertical gradients to create a glassy effect.
+* `gr.themes.Ocean()` - the `"ocean"` theme has a blue-green primary color and gray secondary color. The theme also uses horizontal gradients, especially for buttons and some form elements.
+
 
 Each of these themes set values for hundreds of CSS variables. You can use prebuilt themes as a starting point for your own custom themes, or you can create your own themes from scratch. Let's take a look at each approach.
 
@@ -156,7 +161,7 @@ You could also create your own custom `Size` objects and pass them in.
 
 The final 2 constructor arguments set the fonts of the theme. You can pass a list of fonts to each of these arguments to specify fallbacks. If you provide a string, it will be loaded as a system font. If you provide a `gradio.themes.GoogleFont`, the font will be loaded from Google Fonts.
 
-- `font`: This sets the primary font of the theme. In the default theme, this is set to `gradio.themes.GoogleFont("Source Sans Pro")`.
+- `font`: This sets the primary font of the theme. In the default theme, this is set to `gradio.themes.GoogleFont("IBM Plex Sans")`.
 - `font_mono`: This sets the monospace font of the theme. In the default theme, this is set to `gradio.themes.GoogleFont("IBM Plex Mono")`.
 
 You could modify these values such as the following:
diff --git a/guides/09_other-tutorials/using-flagging.md b/guides/10_other-tutorials/using-flagging.md
similarity index 69%
rename from guides/09_other-tutorials/using-flagging.md
rename to guides/10_other-tutorials/using-flagging.md
index d97b4533ba2bd..50669d66d9526 100644
--- a/guides/09_other-tutorials/using-flagging.md
+++ b/guides/10_other-tutorials/using-flagging.md
@@ -15,24 +15,23 @@ Flagging with Gradio's `Interface` is especially easy. By default, underneath th
 
 There are [four parameters](https://gradio.app/docs/interface#initialization) in `gradio.Interface` that control how flagging works. We will go over them in greater detail.
 
-- `allow_flagging`: this parameter can be set to either `"manual"` (default), `"auto"`, or `"never"`.
+- `flagging_mode`: this parameter can be set to either `"manual"` (default), `"auto"`, or `"never"`.
   - `manual`: users will see a button to flag, and samples are only flagged when the button is clicked.
   - `auto`: users will not see a button to flag, but every sample will be flagged automatically.
   - `never`: users will not see a button to flag, and no sample will be flagged.
 - `flagging_options`: this parameter can be either `None` (default) or a list of strings.
   - If `None`, then the user simply clicks on the **Flag** button and no additional options are shown.
-  - If a list of strings are provided, then the user sees several buttons, corresponding to each of the strings that are provided. For example, if the value of this parameter is `["Incorrect", "Ambiguous"]`, then buttons labeled **Flag as Incorrect** and **Flag as Ambiguous** appear. This only applies if `allow_flagging` is `"manual"`.
+  - If a list of strings are provided, then the user sees several buttons, corresponding to each of the strings that are provided. For example, if the value of this parameter is `["Incorrect", "Ambiguous"]`, then buttons labeled **Flag as Incorrect** and **Flag as Ambiguous** appear. This only applies if `flagging_mode` is `"manual"`.
   - The chosen option is then logged along with the input and output.
 - `flagging_dir`: this parameter takes a string.
   - It represents what to name the directory where flagged data is stored.
 - `flagging_callback`: this parameter takes an instance of a subclass of the `FlaggingCallback` class
   - Using this parameter allows you to write custom code that gets run when the flag button is clicked
-  - By default, this is set to an instance of `gr.CSVLogger`
-  - One example is setting it to an instance of `gr.HuggingFaceDatasetSaver` which can allow you to pipe any flagged data into a HuggingFace Dataset. (See more below.)
+  - By default, this is set to an instance of `gr.JSONLogger`
 
 ## What happens to flagged data?
 
-Within the directory provided by the `flagging_dir` argument, a CSV file will log the flagged data.
+Within the directory provided by the `flagging_dir` argument, a JSON file will log the flagged data.
 
 Here's an example: The code below creates the calculator interface embedded below it:
 
@@ -108,7 +107,7 @@ iface = gr.Interface(
     calculator,
     ["number", gr.Radio(["add", "subtract", "multiply", "divide"]), "number"],
     "number",
-    allow_flagging="manual",
+    flagging_mode="manual",
     flagging_options=["wrong sign", "off by one", "other"]
 )
 
@@ -127,49 +126,6 @@ num1,operation,num2,Output,flag,timestamp
 6,subtract,1.5,3.5,off by one,2022-02-04 11:42:32.062512
 ```
 
-## The HuggingFaceDatasetSaver Callback
-
-Sometimes, saving the data to a local CSV file doesn't make sense. For example, on Hugging Face
-Spaces, developers typically don't have access to the underlying ephemeral machine hosting the Gradio
-demo. That's why, by default, flagging is turned off in Hugging Face Space. However,
-you may want to do something else with the flagged data.
-
-We've made this super easy with the `flagging_callback` parameter.
-
-For example, below we're going to pipe flagged data from our calculator example into a Hugging Face Dataset, e.g. so that we can build a "crowd-sourced" dataset:
-
-```python
-import os
-
-HF_TOKEN = os.getenv('HF_TOKEN')
-hf_writer = gr.HuggingFaceDatasetSaver(HF_TOKEN, "crowdsourced-calculator-demo")
-
-iface = gr.Interface(
-    calculator,
-    ["number", gr.Radio(["add", "subtract", "multiply", "divide"]), "number"],
-    "number",
-    description="Check out the crowd-sourced dataset at: [https://huggingface.co/datasets/aliabd/crowdsourced-calculator-demo](https://huggingface.co/datasets/aliabd/crowdsourced-calculator-demo)",
-    allow_flagging="manual",
-    flagging_options=["wrong sign", "off by one", "other"],
-    flagging_callback=hf_writer
-)
-
-iface.launch()
-```
-
-Notice that we define our own
-instance of `gradio.HuggingFaceDatasetSaver` using our Hugging Face token and
-the name of a dataset we'd like to save samples to. In addition, we also set `allow_flagging="manual"`
-because on Hugging Face Spaces, `allow_flagging` is set to `"never"` by default. Here's our demo:
-
-<gradio-app space="gradio/calculator-flagging-crowdsourced/"></gradio-app>
-
-You can now see all the examples flagged above in this [public Hugging Face dataset](https://huggingface.co/datasets/aliabd/crowdsourced-calculator-demo).
-
-![flagging callback hf](https://github.com/gradio-app/gradio/blob/main/guides/assets/flagging-callback-hf.png?raw=true)
-
-We created the `gradio.HuggingFaceDatasetSaver` class, but you can pass your own custom class as long as it inherits from `FLaggingCallback` defined in [this file](https://github.com/gradio-app/gradio/blob/master/gradio/flagging.py). If you create a cool callback, contribute it to the repo!
-
 ## Flagging with Blocks
 
 What about if you are using `gradio.Blocks`? On one hand, you have even more flexibility
@@ -192,6 +148,6 @@ $demo_blocks_flag
 
 ## Privacy
 
-Important Note: please make sure your users understand when the data they submit is being saved, and what you plan on doing with it. This is especially important when you use `allow_flagging=auto` (when all of the data submitted through the demo is being flagged)
+Important Note: please make sure your users understand when the data they submit is being saved, and what you plan on doing with it. This is especially important when you use `flagging_mode=auto` (when all of the data submitted through the demo is being flagged)
 
 ### That's all! Happy building :)
diff --git a/guides/09_other-tutorials/using-gradio-for-tabular-workflows.md b/guides/10_other-tutorials/using-gradio-for-tabular-workflows.md
similarity index 100%
rename from guides/09_other-tutorials/using-gradio-for-tabular-workflows.md
rename to guides/10_other-tutorials/using-gradio-for-tabular-workflows.md
diff --git a/guides/10_other-tutorials/using-gradio-in-other-programming-languages.md b/guides/10_other-tutorials/using-gradio-in-other-programming-languages.md
new file mode 100644
index 0000000000000..6be3ab36ea35a
--- /dev/null
+++ b/guides/10_other-tutorials/using-gradio-in-other-programming-languages.md
@@ -0,0 +1,176 @@
+# Using Gradio in Other Programming Languages
+
+The core `gradio` library is a Python library. But you can also use `gradio` to create UIs around programs written in other languages, thanks to Python's ability to interface with external processes. Using Python's `subprocess` module, you can call programs written in C++, Rust, or virtually any other language, allowing `gradio` to become a flexible UI layer for non-Python applications.
+
+In this post, we'll walk through how to integrate `gradio` with C++ and Rust, using Python's `subprocess` module to invoke code written in these languages. We'll also discuss how to use Gradio with R, which is even easier, thanks to the [reticulate](https://rstudio.github.io/reticulate/) R package, which makes it possible to install and import Python modules in R.
+
+## Using Gradio with C++
+
+Let’s start with a simple example of integrating a C++ program into a Gradio app. Suppose we have the following C++ program that adds two numbers:
+
+```cpp
+// add.cpp
+#include <iostream>
+
+int main() {
+    double a, b;
+    std::cin >> a >> b;
+    std::cout << a + b << std::endl;
+    return 0;
+}
+```
+
+This program reads two numbers from standard input, adds them, and outputs the result.
+
+We can build a Gradio interface around this C++ program using Python's `subprocess` module. Here’s the corresponding Python code:
+
+```python
+import gradio as gr
+import subprocess
+
+def add_numbers(a, b):
+    process = subprocess.Popen(
+        ['./add'], 
+        stdin=subprocess.PIPE, 
+        stdout=subprocess.PIPE, 
+        stderr=subprocess.PIPE
+    )
+    output, error = process.communicate(input=f"{a} {b}\n".encode())
+    
+    if error:
+        return f"Error: {error.decode()}"
+    return float(output.decode().strip())
+
+demo = gr.Interface(
+    fn=add_numbers, 
+    inputs=[gr.Number(label="Number 1"), gr.Number(label="Number 2")], 
+    outputs=gr.Textbox(label="Result")
+)
+
+demo.launch()
+```
+
+Here, `subprocess.Popen` is used to execute the compiled C++ program (`add`), pass the input values, and capture the output. You can compile the C++ program by running:
+
+```bash
+g++ -o add add.cpp
+```
+
+This example shows how easy it is to call C++ from Python using `subprocess` and build a Gradio interface around it.
+
+## Using Gradio with Rust
+
+Now, let’s move to another example: calling a Rust program to apply a sepia filter to an image. The Rust code could look something like this:
+
+```rust
+// sepia.rs
+extern crate image;
+
+use image::{GenericImageView, ImageBuffer, Rgba};
+
+fn sepia_filter(input: &str, output: &str) {
+    let img = image::open(input).unwrap();
+    let (width, height) = img.dimensions();
+    let mut img_buf = ImageBuffer::new(width, height);
+
+    for (x, y, pixel) in img.pixels() {
+        let (r, g, b, a) = (pixel[0] as f32, pixel[1] as f32, pixel[2] as f32, pixel[3]);
+        let tr = (0.393 * r + 0.769 * g + 0.189 * b).min(255.0);
+        let tg = (0.349 * r + 0.686 * g + 0.168 * b).min(255.0);
+        let tb = (0.272 * r + 0.534 * g + 0.131 * b).min(255.0);
+        img_buf.put_pixel(x, y, Rgba([tr as u8, tg as u8, tb as u8, a]));
+    }
+
+    img_buf.save(output).unwrap();
+}
+
+fn main() {
+    let args: Vec<String> = std::env::args().collect();
+    if args.len() != 3 {
+        eprintln!("Usage: sepia <input_file> <output_file>");
+        return;
+    }
+    sepia_filter(&args[1], &args[2]);
+}
+```
+
+This Rust program applies a sepia filter to an image. It takes two command-line arguments: the input image path and the output image path. You can compile this program using:
+
+```bash
+cargo build --release
+```
+
+Now, we can call this Rust program from Python and use Gradio to build the interface:
+
+```python
+import gradio as gr
+import subprocess
+
+def apply_sepia(input_path):
+    output_path = "output.png"
+    
+    process = subprocess.Popen(
+        ['./target/release/sepia', input_path, output_path], 
+        stdout=subprocess.PIPE, 
+        stderr=subprocess.PIPE
+    )
+    process.wait()
+    
+    return output_path
+
+demo = gr.Interface(
+    fn=apply_sepia, 
+    inputs=gr.Image(type="filepath", label="Input Image"), 
+    outputs=gr.Image(label="Sepia Image")
+)
+
+demo.launch()
+```
+
+Here, when a user uploads an image and clicks submit, Gradio calls the Rust binary (`sepia`) to process the image, and returns the sepia-filtered output to Gradio.
+
+This setup showcases how you can integrate performance-critical or specialized code written in Rust into a Gradio interface.
+
+## Using Gradio with R (via `reticulate`)
+
+Integrating Gradio with R is particularly straightforward thanks to the `reticulate` package, which allows you to run Python code directly in R. Let’s walk through an example of using Gradio in R. 
+
+**Installation**
+
+First, you need to install the `reticulate` package in R:
+
+```r
+install.packages("reticulate")
+```
+
+
+Once installed, you can use the package to run Gradio directly from within an R script.
+
+
+```r
+library(reticulate)
+
+py_install("gradio", pip = TRUE)
+
+gr <- import("gradio") # import gradio as gr
+```
+
+**Building a Gradio Application**
+
+With gradio installed and imported, we now have access to gradio's app building methods. Let's build a simple app for an R function that returns a greeting
+
+```r
+greeting <- \(name) paste("Hello", name)
+
+app <- gr$Interface(
+  fn = greeting,
+  inputs = gr$Text(label = "Name"),
+  outputs = gr$Text(label = "Greeting"),
+  title = "Hello! &#128515 &#128075"
+)
+
+app$launch(server_name = "localhost", 
+           server_port = as.integer(3000))
+```
+
+Credit to [@IfeanyiIdiaye](https://github.com/Ifeanyi55) for contributing this section. You can see more examples [here](https://github.com/Ifeanyi55/Gradio-in-R/tree/main/Code), including using Gradio Blocks to build a machine learning application in R.
diff --git a/guides/09_other-tutorials/wrapping-layouts.md b/guides/10_other-tutorials/wrapping-layouts.md
similarity index 100%
rename from guides/09_other-tutorials/wrapping-layouts.md
rename to guides/10_other-tutorials/wrapping-layouts.md
diff --git a/guides/cn/01_getting-started/01_quickstart.md b/guides/cn/01_getting-started/01_quickstart.md
index a863f67e36e8c..9a2a9abb009a7 100644
--- a/guides/cn/01_getting-started/01_quickstart.md
+++ b/guides/cn/01_getting-started/01_quickstart.md
@@ -1,6 +1,6 @@
 # 快速开始
 
-**先决条件**：Gradio 需要 Python 3.8 或更高版本，就是这样！
+**先决条件**：Gradio 需要 Python 3.10 或更高版本，就是这样！
 
 ## Gradio 是做什么的？
 
diff --git a/guides/cn/07_other-tutorials/theming-guide.md b/guides/cn/07_other-tutorials/theming-guide.md
index 89515a61bb023..f411f4203b758 100644
--- a/guides/cn/07_other-tutorials/theming-guide.md
+++ b/guides/cn/07_other-tutorials/theming-guide.md
@@ -156,7 +156,7 @@ with gr.Blocks(theme=gr.themes.Default(spacing_size=gr.themes.sizes.spacing_sm,
 
 最后的 2 个构造函数参数设置主题的字体。您可以将一系列字体传递给这些参数，以指定回退字体。如果提供了字符串，它将被加载为系统字体。如果提供了 `gradio.themes.GoogleFont`，则将从 Google Fonts 加载该字体。
 
-- `font`：此设置主题的主要字体。在默认主题中，此值设置为 `gradio.themes.GoogleFont("Source Sans Pro")`。
+- `font`：此设置主题的主要字体。在默认主题中，此值设置为 `gradio.themes.GoogleFont("IBM Plex Sans")`。
 - `font_mono`：此设置主题的等宽字体。在默认主题中，此值设置为 `gradio.themes.GoogleFont("IBM Plex Mono")`。
 
 您可以修改这些值，例如以下方式：
diff --git a/home/runner/work/gradio/gradio/js/utils/src/color.d.ts b/home/runner/work/gradio/gradio/js/utils/src/color.d.ts
new file mode 100644
index 0000000000000..2f90fecbe3e0e
--- /dev/null
+++ b/home/runner/work/gradio/gradio/js/utils/src/color.d.ts
@@ -0,0 +1,2 @@
+import { colors } from "@gradio/theme";
+export declare const get_next_color: (index: number) => keyof typeof colors;
diff --git a/home/runner/work/gradio/gradio/js/utils/src/index.d.ts b/home/runner/work/gradio/gradio/js/utils/src/index.d.ts
new file mode 100644
index 0000000000000..5119597e23cb0
--- /dev/null
+++ b/home/runner/work/gradio/gradio/js/utils/src/index.d.ts
@@ -0,0 +1,2 @@
+export * from "./color.js";
+export * from "./utils.js";
diff --git a/home/runner/work/gradio/gradio/js/utils/src/utils.d.ts b/home/runner/work/gradio/gradio/js/utils/src/utils.d.ts
new file mode 100644
index 0000000000000..9c16cfb511415
--- /dev/null
+++ b/home/runner/work/gradio/gradio/js/utils/src/utils.d.ts
@@ -0,0 +1,69 @@
+import type { ActionReturn } from "svelte/action";
+import type { Client } from "@gradio/client";
+import type { ComponentType, SvelteComponent } from "svelte";
+export interface ValueData {
+    value: any;
+    is_value_data: boolean;
+}
+export interface SelectData {
+    row_value?: any[];
+    index: number | [number, number];
+    value: any;
+    selected?: boolean;
+}
+export interface LikeData {
+    index: number | [number, number];
+    value: any;
+    liked?: boolean;
+}
+export interface KeyUpData {
+    key: string;
+    input_value: string;
+}
+export interface ShareData {
+    description: string;
+    title?: string;
+}
+export declare class ShareError extends Error {
+    constructor(message: string);
+}
+export declare function uploadToHuggingFace(data: string | {
+    url?: string;
+    path?: string;
+}, type: "base64" | "url"): Promise<string>;
+export declare function copy(node: HTMLDivElement): ActionReturn;
+export declare const format_time: (seconds: number) => string;
+interface Args {
+    api_url: string;
+    name: string;
+    id?: string;
+    variant: "component" | "example" | "base";
+}
+type component_loader = (args: Args) => {
+    name: "string";
+    component: {
+        default: ComponentType<SvelteComponent>;
+    };
+};
+export type I18nFormatter = any;
+export declare class Gradio<T extends Record<string, any> = Record<string, any>> {
+    #private;
+    theme: string;
+    version: string;
+    i18n: I18nFormatter;
+    root: string;
+    autoscroll: boolean;
+    max_file_size: number | null;
+    client: Client;
+    _load_component?: component_loader;
+    load_component: (name: string, variant?: "base" | "component" | "example" | undefined) => {
+        name: "string";
+        component: {
+            default: ComponentType<SvelteComponent>;
+        };
+    };
+    constructor(id: number, el: HTMLElement, theme: string, version: string, root: string, autoscroll: boolean, max_file_size: number | null, i18n: I18nFormatter, client: Client, virtual_component_loader?: component_loader);
+    dispatch<E extends keyof T>(event_name: E, data?: T[E]): void;
+}
+export declare const css_units: (dimension_value: string | number) => string;
+export {};
diff --git a/js/_cdn-test/index.html b/js/_cdn-test/index.html
index ea91273f74ca8..21dfe14af3898 100644
--- a/js/_cdn-test/index.html
+++ b/js/_cdn-test/index.html
@@ -5,7 +5,7 @@
 			html {
 				/* background: #111; */
 				/* color: #eee; */
-				font-family: Source Sans Pro;
+				font-family: IBM Plex Sans;
 			}
 		</style>
 		<meta charset="UTF-8" />
diff --git a/js/_spaces-test/CHANGELOG.md b/js/_spaces-test/CHANGELOG.md
index 42a2af435c526..c278b99a38dc2 100644
--- a/js/_spaces-test/CHANGELOG.md
+++ b/js/_spaces-test/CHANGELOG.md
@@ -4,8 +4,26 @@
 
 ### Dependency updates
 
-- @gradio/client@1.5.2
-- @gradio/theme@0.2.5
+- @gradio/client@1.6.0-beta.4
+
+## 0.0.1
+
+### Dependency updates
+
+- @gradio/client@1.6.0-beta.3
+
+## 0.0.1
+
+### Dependency updates
+
+- @gradio/client@1.6.0-beta.2
+
+## 0.0.1
+
+### Dependency updates
+
+- @gradio/client@1.6.0-beta.1
+- @gradio/theme@0.3.0-beta.1
 
 ## 0.0.1
 
diff --git a/js/_website/CHANGELOG.md b/js/_website/CHANGELOG.md
index 91028de64a8d4..892a9999dddf5 100644
--- a/js/_website/CHANGELOG.md
+++ b/js/_website/CHANGELOG.md
@@ -1,5 +1,101 @@
 # website
 
+## 0.39.0-beta.9
+
+### Dependency updates
+
+- @gradio/code@0.10.0-beta.8
+- @gradio/paramviewer@0.4.22-beta.5
+- @gradio/tabitem@0.3.0-beta.4
+- @gradio/tabs@0.3.0-beta.3
+
+## 0.39.0-beta.8
+
+### Dependency updates
+
+- @gradio/tabitem@0.3.0-beta.4
+- @gradio/code@0.10.0-beta.7
+- @gradio/paramviewer@0.4.22-beta.4
+
+## 0.39.0-beta.7
+
+### Dependency updates
+
+- @gradio/code@0.10.0-beta.6
+
+## 0.39.0-beta.6
+
+### Features
+
+- [#9460](https://github.com/gradio-app/gradio/pull/9460) [`7352a89`](https://github.com/gradio-app/gradio/commit/7352a89722da91461c32fd33588531f3edce9c48) - Playground requirements tab.  Thanks @whitphx!
+- [#9452](https://github.com/gradio-app/gradio/pull/9452) [`3ec8e63`](https://github.com/gradio-app/gradio/commit/3ec8e636766cc629444bc3cbc6b53deaf65f5ab1) - Expanding AI Playground Prompt for Qwen.  Thanks @aliabd!
+
+### Dependency updates
+
+- @gradio/tabs@0.3.0-beta.3
+- @gradio/tabitem@0.3.0-beta.3
+- @gradio/code@0.10.0-beta.5
+- @gradio/paramviewer@0.4.22-beta.3
+
+## 0.39.0-beta.5
+
+### Dependency updates
+
+- @gradio/code@0.10.0-beta.4
+- @gradio/paramviewer@0.4.22-beta.2
+
+## 0.39.0-beta.4
+
+### Features
+
+- [#9419](https://github.com/gradio-app/gradio/pull/9419) [`018c140`](https://github.com/gradio-app/gradio/commit/018c140ef86cacc8211df05b57b26924dab7fa08) - Start/stop recoding from the backend. Add guide on conversational chatbots.  Thanks @freddyaboulton!
+- [#9469](https://github.com/gradio-app/gradio/pull/9469) [`f7c3396`](https://github.com/gradio-app/gradio/commit/f7c3396f55a5b8364d3880a29d766bd092d7f840) - Fix. Triggered dataframe change event for header change.  Thanks @Joodith!
+- [#9426](https://github.com/gradio-app/gradio/pull/9426) [`4e54105`](https://github.com/gradio-app/gradio/commit/4e5410574002ea24067cf4e82b99a6a39f67632c) - Refactoring playground.  Thanks @whitphx!
+- [#9462](https://github.com/gradio-app/gradio/pull/9462) [`b622b1f`](https://github.com/gradio-app/gradio/commit/b622b1fcce888427e87aa1f70c9c2e60aa240e37) - Improve UI on the Playground.  Thanks @aliabd!
+
+## 0.39.0-beta.3
+
+### Dependency updates
+
+- @gradio/code@0.10.0-beta.3
+
+## 0.39.0-beta.2
+
+### Features
+
+- [#9326](https://github.com/gradio-app/gradio/pull/9326) [`7afb9a1`](https://github.com/gradio-app/gradio/commit/7afb9a14fa64310eb8b70f43a3bad373e46e36c1) - 5.0 merge take 2.  Thanks @pngwn!
+- [#9382](https://github.com/gradio-app/gradio/pull/9382) [`9e70832`](https://github.com/gradio-app/gradio/commit/9e7083286d5681b5fc623304a97d5a24fe6d6080) - Fixes website build in 5.0-dev.  Thanks @aliabd!
+- [#9379](https://github.com/gradio-app/gradio/pull/9379) [`0cad5f3`](https://github.com/gradio-app/gradio/commit/0cad5f348a846024b95b92fb48f88137ccfcd589) - Testing CI.  Thanks @aliabd!
+- [#9402](https://github.com/gradio-app/gradio/pull/9402) [`060acb3`](https://github.com/gradio-app/gradio/commit/060acb3b469530a3ea14275970b7028598052ef1) - Fixes annoying height bug in playground.  Thanks @aliabd!
+- [#9397](https://github.com/gradio-app/gradio/pull/9397) [`4be0933`](https://github.com/gradio-app/gradio/commit/4be0933d3a39099fd573d7db42416d7acef7f40f) - Fix gradio.js aws path.  Thanks @aliabd!
+- [#9343](https://github.com/gradio-app/gradio/pull/9343) [`322ac54`](https://github.com/gradio-app/gradio/commit/322ac5499ec5a8541039bf329e2525e9d24ed2cc) - Add info about Powershell client.  Thanks @abidlabs!
+- [#9233](https://github.com/gradio-app/gradio/pull/9233) [`9a85ccc`](https://github.com/gradio-app/gradio/commit/9a85cccf160118fccfb78dc1edcc7c51ff88de6c) - Adds LLM to the Playground.  Thanks @aliabd!
+
+### Dependency updates
+
+- @gradio/code@0.10.0-beta.2
+- @gradio/paramviewer@0.4.22-beta.2
+
+## 0.39.0-beta.1
+
+### Features
+
+- [#9204](https://github.com/gradio-app/gradio/pull/9204) [`3c73f00`](https://github.com/gradio-app/gradio/commit/3c73f00e3016b16917ebfe0bad390f2dff683457) - 🔡 Update default core Gradio font.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/code@0.9.1-beta.1
+- @gradio/paramviewer@0.4.22-beta.1
+
+## 0.39.0-beta.0
+
+### Features
+
+- [#9194](https://github.com/gradio-app/gradio/pull/9194) [`20c0836`](https://github.com/gradio-app/gradio/commit/20c0836ed0e0698dbc81d2a4bda04363fd857334) - Deprecate type='tuples for chatbot and focus chatbot docs on 'messages' type.  Thanks @freddyaboulton!
+- [#9213](https://github.com/gradio-app/gradio/pull/9213) [`ab4580b`](https://github.com/gradio-app/gradio/commit/ab4580bd5f755a07c9a9bd2a775220a9a2085f8c) - Remove grey background behind all components.  Thanks @hannahblair!
+- [#9206](https://github.com/gradio-app/gradio/pull/9206) [`bdbcf7b`](https://github.com/gradio-app/gradio/commit/bdbcf7b0e374c0769178767a1502cd310312278b) - Cloudflare migration.  Thanks @aliabd!
+- [#9156](https://github.com/gradio-app/gradio/pull/9156) [`8deeeb6`](https://github.com/gradio-app/gradio/commit/8deeeb6d1b83296e5174c2891b80fb317991289e) - File access security guide.  Thanks @freddyaboulton!
+
 ## 0.39.1
 
 ### Features
@@ -29,8 +125,8 @@
 
 ### Dependency updates
 
-- @gradio/code@0.9.1
-- @gradio/paramviewer@0.4.22
+- @gradio/paramviewer@0.4.22-beta.0
+- @gradio/code@0.9.1-beta.0
 
 ## 0.38.0
 
diff --git a/js/_website/generate_jsons/generate.py b/js/_website/generate_jsons/generate.py
index 8c87e14abd73c..e49c469c3b632 100644
--- a/js/_website/generate_jsons/generate.py
+++ b/js/_website/generate_jsons/generate.py
@@ -63,12 +63,12 @@ def get_latest_release():
                 .strip("'\n")
             )
             json.dump(
-                {
-                    "gradio_install": f"pip install https://gradio-builds.s3.amazonaws.com/{sha}/gradio-{version}-py3-none-any.whl",
-                    "gradio_py_client_install": f"pip install 'gradio-client @ git+https://github.com/gradio-app/gradio@{sha}#subdirectory=client/python'",
-                    "gradio_js_client_install": f"npm install https://gradio-builds.s3.amazonaws.com/{sha}/gradio-client-{js_client_version}.tgz",
-                    "gradio_lite_url": f"https://gradio-lite-previews.s3.amazonaws.com/{sha}"
-                },
+                    {
+                        "gradio_install": f"pip install https://gradio-builds.s3.amazonaws.com/{sha}/gradio-{version}-py3-none-any.whl",
+                        "gradio_py_client_install": f"pip install 'gradio-client @ git+https://github.com/gradio-app/gradio@{sha}#subdirectory=client/python'",
+                        "gradio_js_client_install": f"npm install https://gradio-builds.s3.amazonaws.com/{sha}/gradio-client-{js_client_version}.tgz",
+                        "gradio_lite_url": f"https://gradio-lite-previews.s3.amazonaws.com/{sha}"
+                    },
                 j,
             )
         if not os.path.exists(
@@ -91,9 +91,22 @@ def create_dir_if_not_exists(path):
 
 demos.generate(make_dir(WEBSITE_DIR, "src/lib/json/demos.json"))
 guides.generate(make_dir(WEBSITE_DIR, "src/lib/json/guides/") + "/")
-docs.generate(make_dir(WEBSITE_DIR, "src/lib/json/docs.json"))
-docs.generate(make_dir(WEBSITE_DIR, "src/lib/templates/docs.json"))
+SYSTEM_PROMPT = docs.generate(make_dir(WEBSITE_DIR, "src/lib/json/docs.json"))
+_ = docs.generate(make_dir(WEBSITE_DIR, "src/lib/templates/docs.json"))
 changelog.generate(make_dir(WEBSITE_DIR, "src/lib/json/changelog.json"))
 get_latest_release()
 
+# print("\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n")
+# print(SYSTEM_PROMPT)
+# print("\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n")
+
+
+with open(make_dir(WEBSITE_DIR, "src/lib/json/system_prompt.json"), "w+") as f:
+    json.dump(
+        {
+            "SYSTEM": SYSTEM_PROMPT,
+        },
+        f,
+    )
+
 print("JSON generated! " + make_dir(WEBSITE_DIR, "src/lib/json/"))
diff --git a/js/_website/generate_jsons/src/demos/__init__.py b/js/_website/generate_jsons/src/demos/__init__.py
index 71e1e235be308..a7e4e767993b3 100644
--- a/js/_website/generate_jsons/src/demos/__init__.py
+++ b/js/_website/generate_jsons/src/demos/__init__.py
@@ -1,20 +1,30 @@
 import json
-import os
+from pathlib import Path
 
-DIR = os.path.dirname(__file__)
-GRADIO_DEMO_DIR = os.path.abspath(os.path.join(DIR, "../../../../../demo/"))
 
-def get_code_description_and_reqs(demo_name):
-    with open(os.path.join(GRADIO_DEMO_DIR, demo_name, "run.py")) as f:
+HERE = Path(__file__).parent
+WEBSITE_DIR = HERE.joinpath("../../..").resolve()
+PROJECT_ROOT = WEBSITE_DIR.joinpath("../..").resolve()
+GRADIO_DEMO_DIR = PROJECT_ROOT / "demo"
+LITE_DEMO_DIR = PROJECT_ROOT / "js/lite/examples"
+
+
+def get_code_description_and_reqs(demo_dir):
+    with demo_dir.joinpath("run.py").open() as f:
         code = f.read()
+
     description = ""
-    if os.path.exists(os.path.join(GRADIO_DEMO_DIR, demo_name, "DESCRIPTION.md")):
-        with open(os.path.join(GRADIO_DEMO_DIR, demo_name, "DESCRIPTION.md")) as f:
-            description = f.read()
+    description_path = demo_dir.joinpath("DESCRIPTION.md")
+    if description_path.exists():
+      with description_path.open() as f:
+        description = f.read()
+
     requirements = []
-    if os.path.exists(os.path.join(GRADIO_DEMO_DIR, demo_name, "requirements.txt")):
-        with open(os.path.join(GRADIO_DEMO_DIR, demo_name, "requirements.txt")) as f:
-            requirements = f.read().strip().split("\n")
+    requirements_path = demo_dir.joinpath("requirements.txt")
+    if requirements_path.exists():
+      with requirements_path.open() as f:
+        requirements = [line.strip() for line in f.read().strip().split("\n")]
+
     return code, description, requirements
 
 
@@ -23,31 +33,31 @@ def get_code_description_and_reqs(demo_name):
         "category": "Text",
         "demos": [
             {
-                "name": "Hello World", 
-                "dir": "hello_world", 
+                "name": "Hello World",
+                "dir": "hello_world",
             },
             {
-                "name": "Hello Blocks", 
-                "dir": "hello_blocks", 
+                "name": "Hello Blocks",
+                "dir": "hello_blocks",
             },
             {
-                "name": "Sentence Builder", 
-                "dir": "sentence_builder", 
+                "name": "Sentence Builder",
+                "dir": "sentence_builder",
             },
             {
-                "name": "Diff Texts", 
-                "dir": "diff_texts", 
+                "name": "Diff Texts",
+                "dir": "diff_texts",
             },
-            
+
 
         ]
     },
-     {
+    {
         "category": "Media",
         "demos": [
             {
-                "name": "Sepia Filter", 
-                "dir": "sepia_filter", 
+                "name": "Sepia Filter",
+                "dir": "sepia_filter",
             },
             {
                 "name": "Video Identity",
@@ -58,8 +68,8 @@ def get_code_description_and_reqs(demo_name):
                 "dir": "fake_diffusion",
             },
             {
-                "name": "Generate Tone", 
-                "dir": "generate_tone", 
+                "name": "Generate Tone",
+                "dir": "generate_tone",
             },
         ]
     },
@@ -79,12 +89,12 @@ def get_code_description_and_reqs(demo_name):
                 "dir": "tax_calculator"
             },
             {
-                "name": "Kinematics", 
-                "dir": "blocks_kinematics", 
+                "name": "Kinematics",
+                "dir": "blocks_kinematics",
             },
             {
-                "name": "Stock Forecast", 
-                "dir": "stock_forecast", 
+                "name": "Stock Forecast",
+                "dir": "stock_forecast",
             },
         ]
     },
@@ -92,44 +102,66 @@ def get_code_description_and_reqs(demo_name):
         "category": "Other",
         "demos": [
             {
-                "name": "Tabbed Interface", 
-                "dir": "tabbed_interface_lite", 
+                "name": "Tabbed Interface",
+                "dir": "tabbed_interface_lite",
             },
             {
-                "name": "Chatbot", 
-                "dir": "chatinterface_random_response", 
+                "name": "Chatbot",
+                "dir": "chatinterface_random_response",
             },
             {
-                "name": "Streaming Chatbot", 
-                "dir": "chatinterface_streaming_echo", 
+                "name": "Streaming Chatbot",
+                "dir": "chatinterface_streaming_echo",
             },
             {
-                "name": "Layouts", 
-                "dir": "blocks_flipper", 
+                "name": "Layouts",
+                "dir": "blocks_flipper",
             },
             {
-                "name": "Error", 
-                "dir": "calculator", 
+                "name": "Error",
+                "dir": "calculator",
             },
             {
-                "name": "Chained Events", 
-                "dir": "blocks_chained_events", 
+                "name": "Chained Events",
+                "dir": "blocks_chained_events",
             },
             {
-                "name": "Change Listener", 
-                "dir": "blocks_hello", 
+                "name": "Change Listener",
+                "dir": "blocks_hello",
+            }
+        ]
+    },
+    {
+        "category": "Transformers",
+        "demos": [
+            {
+                "name": "Basic",
+                "dir": "transformers_basic",
+                "lite": True,
             }
         ]
     }
 ]
 
+
 for category in demos_by_category:
     for demo in category["demos"]:
-        code, description, requirements = get_code_description_and_reqs(demo["dir"])
+        is_lite = demo.get("lite", False)
+        base_dir = LITE_DEMO_DIR if is_lite else GRADIO_DEMO_DIR
+        demo_dir = base_dir / demo["dir"]
+
+        code, description, requirements = get_code_description_and_reqs(demo_dir)
         demo["code"] = code.replace("# type: ignore", "")
         demo["text"] = description
-        demo["requirements"] = requirements 
+        demo["requirements"] = requirements
+
 
 def generate(json_path):
     with open(json_path, 'w+') as f:
         json.dump(demos_by_category, f)
+
+
+if __name__ == "__main__":
+    dest_path = WEBSITE_DIR / "src/lib/json/demos.json"
+    print(f"Generating {dest_path}")
+    generate(dest_path)
diff --git a/js/_website/generate_jsons/src/docs/__init__.py b/js/_website/generate_jsons/src/docs/__init__.py
index 44d244df75734..524c81e8e226e 100644
--- a/js/_website/generate_jsons/src/docs/__init__.py
+++ b/js/_website/generate_jsons/src/docs/__init__.py
@@ -253,6 +253,380 @@ def organize_pages():
 
 docs = organize_docs(docs)
 
+gradio_docs = docs["docs"]["gradio"]
+
+SYSTEM_PROMPT = """
+Generate code for using the Gradio python library. 
+
+The following RULES must be followed.  Whenever you are forming a response, ensure all rules have been followed otherwise start over.
+
+RULES: 
+Only respond with code, not text.
+Only respond with valid Python syntax.
+Never include backticks in your response such as ``` or ```python. 
+Never use any external library aside from: gradio, numpy, pandas, plotly, transformers_js and matplotlib.
+Do not include any code that is not necessary for the app to run.
+Respond with a full Gradio app. 
+Respond with a full Gradio app using correct syntax and features of the latest Gradio version. DO NOT write code that doesn't follow the signatures listed.
+Add comments explaining the code, but do not include any text that is not formatted as a Python comment.
+
+
+
+Here's an example of a valid response:
+
+# This is a simple Gradio app that greets the user.
+import gradio as gr
+
+# Define a function that takes a name and returns a greeting.
+def greet(name):
+    return "Hello " + name + "!"
+
+# Create a Gradio interface that takes a textbox input, runs it through the greet function, and returns output to a textbox.`
+demo = gr.Interface(fn=greet, inputs="textbox", outputs="textbox")
+
+# Launch the interface.
+demo.launch()
+
+
+Below are all the class and function signatures in the Gradio library.
+
+"""
+
+for key in gradio_docs:
+    if key in ["events", "events_matrix"]:
+        continue
+    if "name" in key:
+        o = gradio_docs[key]
+        signature = f"""{o['name']}({', '.join([
+            p['name'] + 
+            ': ' + p['annotation']
+            + (' = ' + p['default'] if 'default' in p else '')
+            for p in o['parameters']])})"""
+        SYSTEM_PROMPT += f"{signature}\n"
+        SYSTEM_PROMPT += f"{o['description']}\n\n"
+    else: 
+        for c in gradio_docs[key]:
+            o = gradio_docs[key][c]
+            signature = f"""{o['name']}({', '.join([
+                p['name'] + 
+                ': ' + p['annotation']
+                + (' = ' + p['default'] if 'default' in p else '')
+                for p in o['parameters']])})"""          
+            SYSTEM_PROMPT += f"{signature}\n"
+            SYSTEM_PROMPT += f"{o['description']}\n\n"
+            if "fns" in o and key != "components":
+                for f in o["fns"]:
+                    signature = f"""{o['name']}.{f['name']}({', '.join([
+                        p['name'] + 
+                        ': ' + p['annotation']
+                        + (' = ' + p['default'] if 'default' in p else '')
+                        for p in f['parameters']])})"""
+                    SYSTEM_PROMPT += f"{signature}\n"
+                    SYSTEM_PROMPT += f"{f['description']}\n\n"
+
+SYSTEM_PROMPT += "\nEvent listeners allow Gradio to respond to user interactions with the UI components defined in a Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called.\n"
+
+SYSTEM_PROMPT += "All event listeners have the same signature:\n"
+
+f = gradio_docs["components"]["audio"]["fns"][0]
+signature = f"""<component_name>.<event_name>({', '.join([
+                        p['name'] + 
+                        ': ' + p['annotation']
+                        + (' = ' + p['default'] if 'default' in p else '')
+                        for p in f['parameters']])})"""
+SYSTEM_PROMPT += signature
+SYSTEM_PROMPT += "\nEach component only supports some specific events. Below is a list of all gradio components and every event that each component supports. If an event is supported by a component, it is a valid method of the component."
+for component in gradio_docs["events_matrix"]:
+    SYSTEM_PROMPT += f"{component}: {', '.join(gradio_docs['events_matrix'][component])}\n\n"
+
+
+SYSTEM_PROMPT += "Below are examples of full end-to-end Gradio apps:\n\n"
+
+# 'audio_component_events', 'audio_mixer', 'blocks_essay', 'blocks_chained_events', 'blocks_xray', 'chatbot_multimodal', 'sentence_builder', 'custom_css', 'blocks_update', 'fake_gan'
+# important_demos = ["annotatedimage_component", "blocks_essay_simple", "blocks_flipper", "blocks_form", "blocks_hello", "blocks_js_load", "blocks_js_methods", "blocks_kinematics", "blocks_layout", "blocks_plug", "blocks_simple_squares", "calculator", "chatbot_consecutive", "chatbot_simple", "chatbot_streaming", "chatinterface_multimodal", "datetimes", "diff_texts", "dropdown_key_up", "fake_diffusion", "fake_gan", "filter_records", "function_values", "gallery_component_events", "generate_tone", "hangman", "hello_blocks", "hello_blocks_decorator", "hello_world", "image_editor", "matrix_transpose", "model3D", "on_listener_decorator", "plot_component", "render_merge", "render_split", "reverse_audio_2", "sales_projections", "sepia_filter", "sort_records", "streaming_simple", "tabbed_interface_lite", "tax_calculator", "theme_soft", "timer", "timer_simple", "variable_outputs", "video_identity"]
+important_demos = ['custom_css', "annotatedimage_component", "blocks_essay_simple", "blocks_flipper", "blocks_form", "blocks_hello", "blocks_js_load", "blocks_js_methods", "blocks_kinematics", "blocks_layout", "blocks_plug", "blocks_simple_squares", "calculator", "chatbot_consecutive", "chatbot_simple", "chatbot_streaming", "chatinterface_multimodal", "datetimes", "diff_texts", "dropdown_key_up", "fake_diffusion", "filter_records", "function_values", "gallery_component_events", "generate_tone", "hangman", "hello_blocks", "hello_blocks_decorator", "hello_world", "image_editor", "matrix_transpose", "model3D", "on_listener_decorator", "plot_component", "render_merge", "render_split", "reverse_audio_2", "sales_projections", "sepia_filter", "sort_records", "streaming_simple", "tabbed_interface_lite", "tax_calculator", "theme_soft", "timer", "timer_simple", "variable_outputs", "video_identity"]
+
+
+def length(demo):
+    if os.path.exists(os.path.join(DEMOS_DIR, demo, "run.py")):
+        demo_file = os.path.join(DEMOS_DIR, demo, "run.py")
+    else: 
+        return 0
+    with open(demo_file) as run_py:
+        demo_code = run_py.read()
+        demo_code = demo_code.replace("# type: ignore", "").replace('if __name__ == "__main__":\n    ', "")
+    return len(demo_code)
+
+# important_demos = sorted(important_demos, key=length, reverse=True)
+# print(important_demos)
+
+for demo in important_demos:
+    if os.path.exists(os.path.join(DEMOS_DIR, demo, "run.py")):
+        demo_file = os.path.join(DEMOS_DIR, demo, "run.py")
+    else: 
+        continue
+    with open(demo_file) as run_py:
+        demo_code = run_py.read()
+        demo_code = demo_code.replace("# type: ignore", "").replace('if __name__ == "__main__":\n    ', "")
+    SYSTEM_PROMPT += f"Name: {demo.replace('_', ' ')}\n"
+    SYSTEM_PROMPT += "Code: \n\n"
+    SYSTEM_PROMPT += f"{demo_code}\n\n"
+
+
+SYSTEM_PROMPT += """
+The latest verstion of Gradio includes some breaking changes, and important new features you should be aware of. Here is a list of the important changes:
+
+1. Streaming audio, images, and video as input and output are now fully supported in Gradio. 
+
+Streaming Outputs:
+
+In some cases, you may want to stream a sequence of outputs rather than show a single output at once. For example, you might have an image generation model and you want to show the image that is generated at each step, leading up to the final image. Or you might have a chatbot which streams its response one token at a time instead of returning it all at once.
+In such cases, you can supply a generator function into Gradio instead of a regular function. 
+Here's an example of a Gradio app that streams a sequence of images:
+
+CODE: 
+
+import gradio as gr
+import numpy as np
+import time
+
+def fake_diffusion(steps):
+    rng = np.random.default_rng()
+    for i in range(steps):
+        time.sleep(1)
+        image = rng.random(size=(600, 600, 3))
+        yield image
+    image = np.ones((1000,1000,3), np.uint8)
+    image[:] = [255, 124, 0]
+    yield image
+
+demo = gr.Interface(fake_diffusion,
+                    inputs=gr.Slider(1, 10, 3, step=1),
+                    outputs="image")
+
+demo.launch()
+
+
+
+Gradio can stream audio and video directly from your generator function. This lets your user hear your audio or see your video nearly as soon as it's yielded by your function. All you have to do is
+
+Set streaming=True in your gr.Audio or gr.Video output component.
+Write a python generator that yields the next "chunk" of audio or video.
+Set autoplay=True so that the media starts playing automatically.
+
+For audio, the next "chunk" can be either an .mp3 or .wav file or a bytes sequence of audio. For video, the next "chunk" has to be either .mp4 file or a file with h.264 codec with a .ts extension. For smooth playback, make sure chunks are consistent lengths and larger than 1 second.
+
+Here's an example gradio app that streams audio:
+
+CODE: 
+
+import gradio as gr
+from time import sleep
+
+def keep_repeating(audio_file):
+    for _ in range(10):
+        sleep(0.5)
+        yield audio_file
+
+gr.Interface(keep_repeating,
+            gr.Audio(sources=["microphone"], type="filepath"),
+            gr.Audio(streaming=True, autoplay=True)
+).launch()
+
+
+Here's an example gradio app that streams video:
+
+CODE: 
+
+import gradio as gr
+from time import sleep
+
+def keep_repeating(video_file):
+    for _ in range(10):
+        sleep(0.5)
+        yield video_file
+
+gr.Interface(keep_repeating,
+             gr.Video(sources=["webcam"], format="mp4"),
+             gr.Video(streaming=True, autoplay=True)
+).launch()
+
+Streaming Inputs:
+
+Gradio also allows you to stream images from a user's camera or audio chunks from their microphone into your event handler. This can be used to create real-time object detection apps or conversational chat applications with Gradio.
+
+Currently, the gr.Image and the gr.Audio components support input streaming via the stream event. 
+
+Here's an example, which simply returns the webcam stream unmodified:
+
+CODE: 
+
+import gradio as gr
+import numpy as np
+import cv2
+
+def transform_cv2(frame, transform):
+    if transform == "cartoon":
+        # prepare color
+        img_color = cv2.pyrDown(cv2.pyrDown(frame))
+        for _ in range(6):
+            img_color = cv2.bilateralFilter(img_color, 9, 9, 7)
+        img_color = cv2.pyrUp(cv2.pyrUp(img_color))
+
+        # prepare edges
+        img_edges = cv2.cvtColor(frame, cv2.COLOR_RGB2GRAY)
+        img_edges = cv2.adaptiveThreshold(
+            cv2.medianBlur(img_edges, 7),
+            255,
+            cv2.ADAPTIVE_THRESH_MEAN_C,
+            cv2.THRESH_BINARY,
+            9,
+            2,
+        )
+        img_edges = cv2.cvtColor(img_edges, cv2.COLOR_GRAY2RGB)
+        # combine color and edges
+        img = cv2.bitwise_and(img_color, img_edges)
+        return img
+    elif transform == "edges":
+        # perform edge detection
+        img = cv2.cvtColor(cv2.Canny(frame, 100, 200), cv2.COLOR_GRAY2BGR)
+        return img
+    else:
+        return np.flipud(frame)
+
+
+css=".my-group {max-width: 500px !important; max-height: 500px !important;}\n.my-column {display: flex !important; justify-content: center !important; align-items: center !important};"
+
+with gr.Blocks(css=css) as demo:
+    with gr.Column(elem_classes=["my-column"]):
+        with gr.Group(elem_classes=["my-group"]):
+            transform = gr.Dropdown(choices=["cartoon", "edges", "flip"],
+                                    value="flip", label="Transformation")
+            input_img = gr.Image(sources=["webcam"], type="numpy")
+    input_img.stream(transform_cv2, [input_img, transform], [input_img], time_limit=30, stream_every=0.1)
+
+
+demo.launch()
+
+
+
+There are two unique keyword arguments for the stream event:
+
+time_limit - This is the amount of time the gradio server will spend processing the event. Media streams are naturally unbounded so it's important to set a time limit so that one user does not hog the Gradio queue. The time limit only counts the time spent processing the stream, not the time spent waiting in the queue. The orange bar displayed at the bottom of the input image represents the remaining time. When the time limit expires, the user will automatically rejoin the queue.
+
+stream_every - This is the frequency (in seconds) with which the stream will capture input and send it to the server. For demos like image detection or manipulation, setting a smaller value is desired to get a "real-time" effect. For demos like speech transcription, a higher value is useful so that the transcription algorithm has more context of what's being said.
+
+
+
+Your streaming function should be stateless. It should take the current input and return its corresponding output. However, there are cases where you may want to keep track of past inputs or outputs. For example, you may want to keep a buffer of the previous k inputs to improve the accuracy of your transcription demo. You can do this with Gradio's gr.State() component.
+
+Let's showcase this with a sample demo:
+
+CODE:
+
+def transcribe_handler(current_audio, state, transcript):
+    next_text = transcribe(current_audio, history=state)
+    state.append(current_audio)
+    state = state[-3:]
+    return state, transcript + next_text
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        with gr.Column():
+            mic = gr.Audio(sources="microphone")
+            state = gr.State(value=[])
+        with gr.Column():
+            transcript = gr.Textbox(label="Transcript")
+    mic.stream(transcribe_handler, [mic, state, transcript], [state, transcript],
+               time_limit=10, stream_every=1)
+
+
+demo.launch()
+
+
+2. Audio files are no longer converted to .wav automatically
+
+Previously, the default value of the format in the gr.Audio component was wav, meaning that audio files would be converted to the .wav format before being processed by a prediction function or being returned to the user. Now, the default value of format is None, which means any audio files that have an existing format are kept as is. 
+
+3. The 'every' parameter is no longer supported in event listeners
+
+Previously, if you wanted to run an event 'every' X seconds after a certain trigger, you could set `every=` in the event listener. This is no longer supported — do the following instead:
+
+- create a `gr.Timer` component, and
+- use the `.tick()` method to trigger the event.
+
+E.g., replace something like this:
+
+with gr.Blocks() as demo:
+    a = gr.Textbox()
+    b = gr.Textbox()
+    btn = gr.Button("Start")
+    btn.click(lambda x:x, a, b, every=1)
+
+with this:
+
+with gr.Blocks() as demo:
+    a = gr.Textbox()
+    b = gr.Textbox()
+    btn = gr.Button("Start")
+    t = gr.Timer(1, active=False)
+    t.tick(lambda x:x, a, b)
+    btn.click(lambda: gr.Timer(active=True), None, t)
+
+This makes it easy to configure the timer as well to change its frequency or stop the event, e.g.
+
+# some code...
+stop_btn = gr.Button("Stop")
+    stop_btn.click(lambda: gr.Timer(active=False), None, t) # deactivates timer
+fast_btn = gr.Button("Fast")
+    fast_btn.click(lambda: gr.Timer(0.1), None, t) # makes timer tick every 0.1s
+
+
+4. The `undo_btn`, `retry_btn` and `clear_btn` parameters of `ChatInterface` have been removed
+5. Passing a tuple to `gr.Code` is not supported
+6. The `concurrency_count` parameter has been removed from `.queue()`
+7. The `additional_inputs_accordion_name` parameter has been removed from `gr.ChatInterface`
+8. The `thumbnail` parameter has been removed from `gr.Interface`
+9. The `root` parameter in `gr.FileExplorer` has been removed 
+10. The `signed_in_value` parameter in `gr.LoginButton` has been removed
+11. The `gr.LogoutButton` component has been removed
+12. The `gr.make_waveform` method has been removed from the library
+13. SVGs are not accepted as input images into the `gr.Image` component unless `type=filepath` 
+14. The `height` parameter in `gr.DataFrame` has been renamed to `max_height` 
+15. The `likeable` parameter of `gr.Chatbot` has been removed. The chatbot will display like buttons whenever the `like` event is defined.
+16. By default user messages are not likeable in the `gr.Chatbot`. To display like buttons in the user message, set the `user_like_button` parameter of the `like` event to True.
+17. The argument for lazy-caching examples has been changed
+
+Previously, to lazy-cache examples, you would pass in “lazy” to the `cache_examples` parameter in `Interface`, `Chatinterface` , or `Examples`. Now, there is a separate `cache_mode` parameter, which governs whether caching should be `"lazy"` or `"eager"` . So if your code was previously:
+
+Now, your code should look like this:
+
+chatbot = gr.ChatInterface(
+    double,
+    examples=["hello", "hi"],
+    cache_examples=True,
+    cache_mode="lazy",
+)
+
+"""
+
+
+SYSTEM_PROMPT += """
+
+The following RULES must be followed.  Whenever you are forming a response, after each sentence ensure all rules have been followed otherwise start over, forming a new response and repeat until the finished response follows all the rules.  then send the response.
+
+RULES: 
+Only respond with code, not text.
+Only respond with valid Python syntax.
+Never include backticks in your response such as ``` or ```python. 
+Never import any external library aside from: gradio, numpy, pandas, plotly, transformers_js and matplotlib. Do not import any other library like pytesseract or PIL unless requested in the prompt. 
+Do not include any code that is not necessary for the app to run.
+Respond with a full Gradio app using correct syntax and features of the latest Gradio version. DO NOT write code that doesn't follow the signatures listed.
+Only respond with one full Gradio app.
+Add comments explaining the code, but do not include any text that is not formatted as a Python comment.
+"""
+
 def generate(json_path):
     with open(json_path, "w+") as f:
-        json.dump(docs, f)
\ No newline at end of file
+        json.dump(docs, f)
+    return  SYSTEM_PROMPT
\ No newline at end of file
diff --git a/js/_website/package.json b/js/_website/package.json
index 35646904fb779..a2f60ca6a7063 100644
--- a/js/_website/package.json
+++ b/js/_website/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "website",
-	"version": "0.39.1",
+	"version": "0.39.0-beta.9",
 	"private": true,
 	"scripts": {
 		"dev": "pip install boto3 && python generate_jsons/generate.py && vite dev",
@@ -24,6 +24,8 @@
 	"type": "module",
 	"dependencies": {
 		"@gradio/code": "workspace:^",
+		"@gradio/tabs": "workspace:^",
+		"@gradio/tabitem": "workspace:^",
 		"@gradio/paramviewer": "workspace:^",
 		"@sindresorhus/slugify": "^2.2.0",
 		"@sveltejs/adapter-vercel": "^5.3.0",
@@ -31,6 +33,6 @@
 		"mdsvex": "^0.11.0",
 		"postcss": "^8.4.27",
 		"prism-svelte": "^0.5.0",
-		"wrangler": "^3.72.3"
+		"wrangler": "^3.73.0"
 	}
 }
diff --git a/js/_website/src/lib/assets/style.css b/js/_website/src/lib/assets/style.css
index 480aa21e0303f..30e771f509dfd 100644
--- a/js/_website/src/lib/assets/style.css
+++ b/js/_website/src/lib/assets/style.css
@@ -336,6 +336,31 @@ strong {
 	padding-inline-start: 40px;
 }
 
+ol {
+	list-style: decimal;
+}
+
+ul {
+	list-style: circle;
+}
+
+li {
+	display: list-item;
+}
+
+.results ul {
+	list-style: none;
+}
+
+.results ol {
+	list-style: none;
+}
+
+:where(ol > li)::marker {
+	font-weight: 400;
+	color: #6b7280;
+}
+
 .embedded-component .gradio-container {
 	padding: var(--size-4) 0 0 0 !important;
 }
@@ -357,10 +382,6 @@ strong {
 	display: grid;
 }
 
-.prose li {
-	display: inline-block;
-}
-
 summary {
 	display: grid !important;
 }
diff --git a/js/_website/src/lib/components/Demos.svelte b/js/_website/src/lib/components/Demos.svelte
index b397097f08d3e..0df16036ffa33 100644
--- a/js/_website/src/lib/components/Demos.svelte
+++ b/js/_website/src/lib/components/Demos.svelte
@@ -6,6 +6,8 @@
 	export let highlighted_code: string;
 	export let url_version: string;
 
+	import WHEEL from "$lib/json/wheel.json";
+
 	$: url_version;
 </script>
 
diff --git a/js/_website/src/lib/components/DemosLite.svelte b/js/_website/src/lib/components/DemosLite.svelte
index 9d411d33388a0..652fd1c84ce17 100644
--- a/js/_website/src/lib/components/DemosLite.svelte
+++ b/js/_website/src/lib/components/DemosLite.svelte
@@ -1,15 +1,176 @@
 <script lang="ts">
-	import Code from "@gradio/code";
+	import { BaseCode as Code, BaseWidget as CodeWidget } from "@gradio/code";
+	import { BaseTabs as Tabs } from "@gradio/tabs";
+	import { BaseTabItem as TabItem } from "@gradio/tabitem";
 	import Slider from "./Slider.svelte";
 	import Fullscreen from "./icons/Fullscreen.svelte";
 	import Close from "./icons/Close.svelte";
 	import { page } from "$app/stores";
 	import share from "$lib/assets/img/anchor_gray.svg";
+	import spaces_logo from "$lib/assets/img/spaces-logo.svg";
 	import { svgCheck } from "$lib/assets/copy.js";
 	import { browser } from "$app/environment";
 	import { onMount } from "svelte";
+	import SYSTEM_PROMPT from "$lib/json/system_prompt.json";
 	import WHEEL from "$lib/json/wheel.json";
 
+	let generated = true;
+
+	let current_code = false;
+	let compare = false;
+
+	const workerUrl = "https://playground-worker.pages.dev/api/generate";
+	// const workerUrl = "http://localhost:5174/api/generate";
+	let model_info = "";
+
+	let abortController: AbortController | null = null;
+
+	async function* streamFromWorker(
+		query: string,
+		system_prompt: string,
+		signal: AbortSignal
+	) {
+		const response = await fetch(workerUrl, {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json"
+			},
+			body: JSON.stringify({
+				query: query,
+				SYSTEM_PROMPT: system_prompt
+			}),
+			signal
+		});
+
+		if (response.status == 429) {
+			generation_error = "Too busy... :( Please try again later.";
+			await new Promise((resolve) => setTimeout(resolve, 4000));
+			generation_error = "";
+			return;
+		}
+
+		const reader = response.body?.getReader();
+		const decoder = new TextDecoder();
+		let buffer = "";
+
+		while (true) {
+			if (signal.aborted) {
+				throw new DOMException("Aborted", "AbortError");
+			}
+			const { done, value } = reader
+				? await reader.read()
+				: { done: true, value: null };
+			if (done) break;
+
+			buffer += decoder.decode(value, { stream: true });
+			const lines = buffer.split("\n");
+			buffer = lines.pop() || "";
+
+			for (const line of lines) {
+				if (line.startsWith("data: ")) {
+					const data = line.slice(6).trim();
+					if (data === "[DONE]") {
+						return;
+					}
+					if (data) {
+						try {
+							const parsed = JSON.parse(data);
+							if (parsed.model) {
+								model_info = parsed.model;
+								console.log("Model used:", model_info);
+							} else if (parsed.error) {
+								console.log(parsed.error);
+								generation_error = "Failed to fetch...";
+								await new Promise((resolve) => setTimeout(resolve, 2000));
+								generation_error = "";
+								// }
+							} else if (parsed.info) {
+								console.log(parsed.info);
+							} else if (parsed.choices && parsed.choices.length > 0) {
+								yield parsed;
+							}
+						} catch (e) {
+							console.error("Error parsing JSON:", e);
+							throw e;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	async function generate_code(query: string, demo_name: string) {
+		generated = false;
+		let out = "";
+
+		if (current_code) {
+			query = "PROMPT: " + query;
+			query +=
+				"\n\nHere is the existing code that either you or the user has written. If it's relevant to the prompt, use it for context. If it's not relevant, ignore it.\n Existing Code: \n\n" +
+				code;
+			query +=
+				"\n\nDo NOT include text that is not commented with a #. Your code may ONLY use these libraries: gradio, numpy, pandas, plotly, transformers_js_py and matplotlib.";
+		}
+
+		let queried_index =
+			demos.findIndex((demo) => demo.name === demo_name) ?? demos[0];
+
+		let code_to_compare = demos[queried_index].code;
+
+		abortController = new AbortController();
+
+		for await (const chunk of streamFromWorker(
+			query,
+			SYSTEM_PROMPT.SYSTEM,
+			abortController.signal
+		)) {
+			if (chunk.choices && chunk.choices.length > 0) {
+				const content = chunk.choices[0].delta.content;
+				if (content) {
+					out += content;
+					demos[queried_index].code =
+						out ||
+						"# Describe your app above, and the LLM will generate the code here.";
+					demos[queried_index].code = demos[queried_index].code.replaceAll(
+						"```python\n",
+						""
+					);
+					demos[queried_index].code = demos[queried_index].code.replaceAll(
+						"```\n",
+						""
+					);
+					demos[queried_index].code = demos[queried_index].code.replaceAll(
+						"```",
+						""
+					);
+					demos[queried_index].code = addShowErrorToLaunch(
+						demos[queried_index].code
+					);
+				}
+			}
+		}
+		generated = true;
+		if (selected_demo.name === demo_name) {
+			highlight_changes(code_to_compare, demos[queried_index].code);
+		}
+		abortController = null;
+	}
+
+	function cancelGeneration() {
+		if (abortController) {
+			abortController.abort();
+		}
+		generated = true;
+	}
+
+	let user_query: string;
+
+	function handle_user_query_key_down(e: KeyboardEvent): void {
+		if (e.key === "Enter") {
+			generate_code(user_query, selected_demo.name);
+		}
+	}
+
 	export let demos: {
 		name: string;
 		dir: string;
@@ -19,20 +180,25 @@
 	export let current_selection: string;
 	export let show_nav = true;
 
-	let new_demo = {
+	const blank_demo = {
 		name: "Blank",
 		dir: "Blank",
-		code: "# Write your own Gradio code here and see what it looks like!\nimport gradio as gr\n\n",
+		code: "",
 		requirements: []
 	};
 
-	demos.push(new_demo);
+	function clear_code() {
+		selected_demo.code = "";
+		current_code = false;
+	}
 
-	let mounted = false;
-	let controller: any;
+	demos.push(blank_demo);
 
-	let dummy_elem: any = { classList: { contains: () => false } };
-	let dummy_gradio: any = { dispatch: (_) => {} };
+	let mounted = false;
+	let controller: {
+		run_code: (code: string) => Promise<void>;
+		install: (requirements: string[]) => Promise<void>;
+	};
 
 	function debounce<T extends any[]>(
 		func: (...args: T) => Promise<unknown>,
@@ -60,13 +226,17 @@
 		});
 	}
 
+	function cleanupRequirements(requirements: string[]): string[] {
+		return requirements.filter((r) => r.trim() !== "");
+	}
+
 	onMount(async () => {
 		try {
 			await loadScript(WHEEL.gradio_lite_url + "/dist/lite.js");
 			controller = createGradioApp({
 				target: document.getElementById("lite-demo"),
-				requirements: demos[0].requirements,
-				code: demos[0].code,
+				requirements: cleanupRequirements(requirements),
+				code,
 				info: true,
 				container: true,
 				isEmbed: true,
@@ -90,26 +260,64 @@
 	let copied_link = false;
 	let shared = false;
 	async function copy_link(name: string) {
-		let code_b64 = btoa(code);
-		name = name.replaceAll(" ", "_");
-		await navigator.clipboard.writeText(
-			`${$page.url.href.split("?")[0]}?demo=${name}&code=${code_b64}`
-		);
+		const name_encoded = name.replaceAll(" ", "_");
+		const code_b64 = btoa(code);
+		const reqs = requirements.join("\n");
+		const reqs_b64 = btoa(reqs);
+
+		const url = new URL($page.url);
+		url.searchParams.set("demo", name_encoded);
+		url.searchParams.set("code", code_b64);
+		url.searchParams.set("reqs", reqs_b64);
+
+		await navigator.clipboard.writeText(url.toString());
 		copied_link = true;
 		shared = true;
 		setTimeout(() => (copied_link = false), 2000);
 	}
 
-	$: code = demos.find((demo) => demo.name === current_selection)?.code || "";
-	$: requirements =
-		demos.find((demo) => demo.name === current_selection)?.requirements || [];
-	$: requirementsStr = JSON.stringify(requirements); // Use the stringified version to trigger reactivity only when the array values actually change, while the `requirements` object's identity always changes.
+	$: selected_demo =
+		demos.find((demo) => demo.name === current_selection) ?? demos[0];
+	$: code = selected_demo?.code || "";
+	$: requirements = selected_demo?.requirements || [];
+	$: requirementsStr = requirements.join("\n"); // Use the stringified version to trigger reactivity only when the array values actually change, while the `requirements` object's identity always changes.
 
+	function on_demo_selected(selection: typeof current_selection) {
+		const current_demo = demos.find((demo) => demo.name === selection);
+		if (!current_demo) {
+			return;
+		}
+
+		controller.install(cleanupRequirements(current_demo.requirements));
+		controller.install([
+			"numpy",
+			"pandas",
+			"matplotlib",
+			"plotly",
+			"transformers_js_py",
+			"requests",
+			"pillow"
+		]);
+	}
+	$: if (mounted) {
+		// When the selected demo changes, we need to call controller.install() immediately without debouncing.
+		on_demo_selected(current_selection);
+	}
 	$: if (mounted) {
 		debounced_run_code && debounced_run_code(code);
 	}
 	$: if (mounted) {
-		debounced_install && debounced_install(JSON.parse(requirementsStr));
+		debounced_install &&
+			debounced_install(cleanupRequirements(requirementsStr.split("\n"))) &&
+			debounced_install([
+				"numpy",
+				"pandas",
+				"matplotlib",
+				"plotly",
+				"transformers_js_py",
+				"requests",
+				"pillow"
+			]);
 	}
 
 	let position = 0.5;
@@ -121,14 +329,18 @@
 	$: lg_breakpoint = preview_width - 13 >= 688;
 
 	if (browser) {
-		let linked_demo = $page.url.searchParams.get("demo");
-		let b64_code = $page.url.searchParams.get("code");
+		const linked_demo = $page.url.searchParams.get("demo");
+		const b64_code = $page.url.searchParams.get("code");
+		const b64_reqs = $page.url.searchParams.get("reqs");
 
 		if (linked_demo && b64_code) {
 			current_selection = linked_demo.replaceAll("_", " ");
 			let demo = demos.find((demo) => demo.name === current_selection);
 			if (demo) {
 				demo.code = atob(b64_code);
+				if (b64_reqs) {
+					demo.requirements = atob(b64_reqs).split("\n");
+				}
 			}
 		}
 	}
@@ -154,24 +366,127 @@
 		}
 	}
 
-	let demos_copy: typeof demos = JSON.parse(JSON.stringify(demos));
+	const demos_copy: typeof demos = JSON.parse(JSON.stringify(demos));
 
 	$: show_dialog(demos, demos_copy, shared);
 	$: if (code) {
 		shared = false;
 	}
+	$: if (selected_demo.code !== "") {
+		current_code = true;
+	} else {
+		current_code = false;
+	}
+
+	function create_spaces_url() {
+		const base_URL = "https://huggingface.co/new-space";
+		const params = new URLSearchParams({
+			name: "new-space",
+			sdk: "gradio"
+		});
+		const encoded_content = code.trimStart();
+		params.append("files[0][path]", "app.py");
+		params.append("files[0][content]", encoded_content);
+		params.append("files[1][path]", "requirements.txt");
+		params.append("files[1][content]", requirementsStr);
+		window.open(`${base_URL}?${params.toString()}`, "_blank")?.focus();
+	}
+
+	function highlight_changes(old_answer: string, new_answer: string) {
+		const old_lines = old_answer.split("\n");
+		const new_lines = new_answer.split("\n");
+
+		if (
+			old_lines.length > 3 * new_lines.length ||
+			new_lines.length > 3 * old_lines.length
+		) {
+			return;
+		}
+
+		const inserted_lines = [];
+
+		for (let i = 0; i < new_lines.length; i++) {
+			if (!old_lines.includes(new_lines[i])) {
+				inserted_lines.push(i);
+			}
+		}
+
+		if (inserted_lines.length > new_lines.length / 2) {
+			return;
+		}
+		const cm = document.querySelectorAll(".cm-line");
+		for (let line of inserted_lines) {
+			cm[line].classList.add("highlight");
+		}
+	}
+
+	const addShowErrorToLaunch = (launch_code: string) => {
+		const pattern = /\.launch\((.*?)\)/;
+		const replacement = (match: any, p1: any) => {
+			const params = p1.trim();
+			if (params === "") {
+				return ".launch(show_error=True)";
+			} else if (!params.includes("show_error")) {
+				return `.launch(${params}, show_error=True)`;
+			}
+			return match;
+		};
+		return launch_code.replace(pattern, replacement);
+	};
+
+	let old_answer = "";
+
+	$: if (compare && browser) {
+		if (
+			selected_demo.code !==
+			"# Describe your app above, and the LLM will generate the code here."
+		) {
+			highlight_changes(old_answer, selected_demo.code);
+			old_answer = selected_demo.code;
+			compare = false;
+		}
+	}
+
+	const TABS = ["Code", "Packages"] as const;
+	let selected_tab: (typeof TABS)[number] = "Code";
+	let generate_placeholders = [
+		"What do you want to build?",
+		"What do you want to build? e.g. 'An image to audio app'",
+		"What do you want to build? e.g. 'Demo with event listeners'",
+		"What do you want to build? e.g. 'A tax calculator'",
+		"What do you want to build? e.g. 'Streaming audio'"
+	];
+
+	let update_placeholders = [
+		"What do you want to change?",
+		"What do you want to change? e.g. 'Add a title and description'",
+		"What do you want to change? e.g. 'Replace buttons with listeners'",
+		"What do you want to change? e.g. 'Add a cool animation with JS'",
+		"What do you want to change? e.g. 'Add examples'"
+	];
+
+	let current_placeholder_index = 0;
+
+	function cycle_placeholder() {
+		current_placeholder_index =
+			(current_placeholder_index + 1) % generate_placeholders.length;
+	}
+
+	$: setInterval(cycle_placeholder, 5000);
+
+	let generation_error = "";
+
+	$: generation_error;
 </script>
 
 <svelte:head>
 	<link rel="stylesheet" href="{WHEEL.gradio_lite_url}/dist/lite.css" />
+
 	<link rel="stylesheet" href="https://gradio-hello-world.hf.space/theme.css" />
 </svelte:head>
 
-<div class="flex flex-row" style="position: absolute; top: -6%; right: 0.4%">
-	<button
-		class="border border-gray-300 rounded-md mx-2 px-2 py-.5 my-[3px] text-md text-gray-600 hover:bg-gray-50 flex"
-		on:click={() => copy_link(current_selection)}
-	>
+<div class="share-btns flex flex-row absolute">
+	<button class="share-button" on:click={() => copy_link(current_selection)}>
 		{#if !copied_link}
 			<img
 				class="!w-5 align-text-top inline-block self-center mr-1"
@@ -185,6 +500,14 @@
 			<p class="inline-block">Copied Link!</p>
 		{/if}
 	</button>
+	<button class="share-button" on:click={() => create_spaces_url()}>
+		<p class="inline-block">Deploy to</p>
+		<img
+			class="!w-5 align-text-top inline-block self-center mr-.5 ml-1"
+			src={spaces_logo}
+		/>
+		<p class="inline-block font-bold">Spaces</p>
+	</button>
 </div>
 <div
 	class=" absolute top-0 bottom-0 right-0"
@@ -192,32 +515,149 @@
 >
 	<Slider bind:position bind:show_nav>
 		<div class="flex-row min-w-0 h-full" class:flex={!fullscreen}>
-			{#each demos as demo, i}
+			{#if selected_demo}
 				<div
-					hidden={current_selection !== demo.name}
-					class="code-editor w-full border-r"
+					class="code-editor w-full border-r flex flex-col"
+					id={selected_demo.dir}
 					style="width: {position * 100}%"
 				>
-					<div class="flex justify-between align-middle h-8 border-b pl-4 pr-2">
-						<h3 class="pt-1">Code</h3>
-						<div class="flex float-right"></div>
+					<div
+						class="mt-1 flex-1 flex flex-col relative overflow-scroll code-scroll"
+					>
+						<Tabs selected={selected_tab} elem_classes={["editor-tabs"]}>
+							<TabItem
+								name={TABS[0]}
+								visible
+								interactive
+								elem_classes={["editor-tabitem"]}
+							>
+								<div class="flex-1">
+									<CodeWidget value={selected_demo.code} language="python" />
+									<Code
+										bind:value={selected_demo.code}
+										language="python"
+										lines={10}
+										readonly={false}
+										dark_mode={false}
+									/>
+								</div>
+							</TabItem>
+							<TabItem
+								name={TABS[1]}
+								visible
+								interactive
+								elem_classes={["editor-tabitem"]}
+							>
+								<div class="flex-1">
+									<CodeWidget
+										value={selected_demo.requirements.join("\n")}
+										language="python"
+									/>
+									<Code
+										value={selected_demo.requirements.join("\n")}
+										on:change={(e) => {
+											selected_demo.requirements = e.detail.split("\n");
+										}}
+										language="text"
+										lines={10}
+										readonly={false}
+										dark_mode={false}
+									/>
+								</div>
+							</TabItem>
+						</Tabs>
 					</div>
 
-					<Code
-						bind:value={demos[i].code}
-						on:input={() => console.log("input")}
-						label=""
-						language="python"
-						target={dummy_elem}
-						gradio={dummy_gradio}
-						lines={10}
-						interactive="true"
-					/>
-				</div>
-			{/each}
+					<div class="mr-2 items-center -mt-7">
+						{#if generation_error}
+							<div
+								class="pl-2 relative z-10 bg-red-100 border border-red-200 px-2 my-1 rounded-lg text-red-800 w-fit text-xs float-right"
+							>
+								{generation_error}
+							</div>
+						{:else if current_code}
+							<div
+								class="pl-2 relative z-10 bg-white flex items-center float-right"
+							>
+								<p class="text-gray-600 my-1 text-xs">
+									Prompt will <span style="font-weight: 500">update</span> code in
+									editor
+								</p>
+								<div class="clear">
+									<button
+										class="button"
+										on:click={() => {
+											clear_code();
+										}}
+									>
+										CLEAR
+									</button>
+								</div>
+							</div>
+						{:else}
+							<div
+								class="pl-2 relative z-10 bg-white flex items-center float-right"
+							>
+								<p class="text-gray-600 my-1 text-xs">
+									<span style="font-weight: 500">Note:</span> This is still an
+									<span style="font-weight: 500">experimental</span> feature. The
+									generated code may be incorrect.
+								</p>
+							</div>
+						{/if}
+					</div>
 
+					<div class="search-bar border-t">
+						{#if !generated}
+							<div class="loader"></div>
+						{:else}
+							✨
+						{/if}
+						<input
+							bind:value={user_query}
+							on:keydown={handle_user_query_key_down}
+							placeholder={current_code
+								? update_placeholders[current_placeholder_index]
+								: generate_placeholders[current_placeholder_index]}
+							autocomplete="off"
+							autocorrect="off"
+							autocapitalize="off"
+							enterkeyhint="go"
+							spellcheck="false"
+							type="search"
+							id="user-query"
+							class:grayed={!generated}
+							autofocus={true}
+						/>
+						{#if generated}
+							<button
+								on:click={() => {
+									generate_code(user_query, selected_demo.name);
+								}}
+								class="flex items-center w-fit min-w-fit bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-0.5 rounded-full text-orange-800 hover:shadow"
+							>
+								<div class="enter">Ask AI</div>
+							</button>
+							<sup class="text-orange-800 text-xs ml-0.5">BETA</sup>
+						{:else}
+							<button
+								on:click={() => {
+									cancelGeneration();
+									generation_error = "Cancelled!";
+									setInterval(() => {
+										generation_error = "";
+									}, 2000);
+								}}
+								class="flex items-center w-fit min-w-fit bg-gradient-to-r from-red-100 to-red-50 border border-red-200 px-4 py-0.5 rounded-full text-red-800 hover:shadow"
+							>
+								<div class="enter">Cancel</div>
+							</button>
+						{/if}
+					</div>
+				</div>
+			{/if}
 			<div
-				class="preview w-full mx-auto"
+				class="preview w-full mx-auto flex flex-col"
 				style="width: {fullscreen ? 100 : (1 - position) * 100}%"
 				class:fullscreen
 				bind:clientWidth={preview_width}
@@ -276,7 +716,7 @@
 					</div>
 				</div>
 
-				<div class="lite-demo h-[93%] pl-3" id="lite-demo" />
+				<div class="flex-1 pl-3" id="lite-demo" />
 			</div>
 		</div>
 	</Slider>
@@ -297,30 +737,32 @@
 		width: 0;
 	}
 
-	:global(div.lite-demo div.gradio-container) {
+	:global(#lite-demo div.gradio-container) {
 		height: 100%;
 		overflow-y: scroll;
 		margin: 0 !important;
 	}
 
-	.code-editor :global(label) {
-		display: none;
+	.code-editor :global(.cm-scroller) {
+		height: 100% !important;
+		min-height: none !important;
+		max-height: none !important;
 	}
 
-	.code-editor :global(.codemirror-wrappper) {
-		border-radius: var(--block-radius);
+	#lite-demo {
+		overflow: scroll;
 	}
 
-	.code-editor :global(> .block) {
+	#lite-demo :global(.embed-container) {
 		border: none !important;
 	}
 
-	.code-editor :global(.cm-scroller) {
-		height: 100% !important;
+	:global(div.editor-tabitem) {
+		padding: 0;
+		height: 100%;
 	}
-
-	.lite-demo :global(.embed-container) {
-		border: none !important;
+	:global(div.editor-tabitem > div) {
+		height: 100%;
 	}
 
 	.fullscreen {
@@ -340,4 +782,123 @@
 			width: 100% !important;
 		}
 	}
+
+	.search-bar {
+		@apply font-sans z-10 px-4 relative flex flex-none items-center border-b text-gray-500;
+		border-color: #e5e7eb;
+	}
+
+	.search-bar input {
+		@apply appearance-none h-14 text-black mx-1	flex-auto min-w-0 border-none cursor-text;
+		outline: none;
+		box-shadow: none;
+		font-size: 1rem;
+	}
+
+	.loader {
+		border: 1px solid #fcc089;
+		border-top: 2px solid #ff7c00;
+		border-radius: 50%;
+		width: 15px;
+		height: 15px;
+		animation: spin 1.2s linear infinite;
+	}
+
+	@keyframes spin {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	.grayed {
+		color: #6b7280 !important;
+	}
+
+	.clear {
+		display: flex;
+		align-items: center;
+		color: #999b9e;
+		font-size: 11px;
+	}
+
+	.button {
+		display: flex;
+		align-items: center;
+		font-weight: 600;
+		padding-left: 0.3rem;
+		padding-right: 0.3rem;
+		border-radius: 0.375rem;
+		float: right;
+		margin: 0.25rem;
+		border: 1px solid #e5e7eb;
+		background: linear-gradient(to bottom right, #f3f4f6, #e5e7eb);
+		color: #374151;
+		cursor: pointer;
+		font-family: sans-serif;
+	}
+
+	.share-button {
+		display: flex;
+		align-items: center;
+		font-weight: 500;
+		padding-left: 0.5rem;
+		padding-right: 0.5rem;
+		padding-top: 0.1rem;
+		padding-bottom: 0.1rem;
+		border-radius: 0.375rem;
+		float: right;
+		margin: 0.25rem;
+		border: 1px solid #e5e7eb;
+		background: linear-gradient(to bottom right, #f9fafb, #e5e7eb);
+		color: #374151;
+		cursor: pointer;
+		font-family: sans-serif;
+		font-size: 14px;
+	}
+	.share-button:hover {
+		background: linear-gradient(to bottom right, #f9fafb, #d7dadf);
+	}
+
+	:global(.highlight) {
+		background: #e1f7e161;
+	}
+
+	.share-btns {
+		top: -6%;
+		right: 0.4%;
+	}
+
+	@media (min-height: 800px) {
+		.share-btns {
+			top: -5%;
+		}
+	}
+
+	.code-scroll {
+		overflow: auto;
+	}
+
+	/* For Webkit browsers (Chrome, Safari, etc.) */
+	.code-scroll::-webkit-scrollbar {
+		width: 10px; /* width of the entire scrollbar */
+	}
+
+	.code-scroll::-webkit-scrollbar-track {
+		background: transparent; /* color of the tracking area */
+	}
+
+	.code-scroll::-webkit-scrollbar-thumb {
+		background-color: #888; /* color of the scroll thumb */
+		border-radius: 20px; /* roundness of the scroll thumb */
+		border: 3px solid white; /* creates padding around scroll thumb */
+	}
+
+	/* For Firefox */
+	.code-scroll {
+		scrollbar-width: thin;
+		scrollbar-color: #888 transparent;
+	}
 </style>
diff --git a/js/_website/src/lib/components/VersionDropdown.svelte b/js/_website/src/lib/components/VersionDropdown.svelte
index da46773ef60b8..1a7a96ba9bc1f 100644
--- a/js/_website/src/lib/components/VersionDropdown.svelte
+++ b/js/_website/src/lib/components/VersionDropdown.svelte
@@ -57,8 +57,8 @@
 	<script
 		type="module"
 		src="https://gradio.s3-us-west-2.amazonaws.com/{value === 'main'
-			? version
-			: value}/gradio.js"
+			? version.replace('b', '-beta.')
+			: value.replace('b', '-beta.')}/gradio.js"
 	></script>
 </svelte:head>
 
diff --git a/js/_website/src/lib/templates/gradio/01_building-demos/02_chatinterface.svx b/js/_website/src/lib/templates/gradio/01_building-demos/02_chatinterface.svx
index 36f97abc9b1ed..318d6c78fd060 100644
--- a/js/_website/src/lib/templates/gradio/01_building-demos/02_chatinterface.svx
+++ b/js/_website/src/lib/templates/gradio/01_building-demos/02_chatinterface.svx
@@ -17,7 +17,7 @@
 
 <!--- Usage -->
 ```python
-gradio.ChatInterface(fn, ···)
+gradio.ChatInterface(fn, type="messages", ···)
 ```
 
 <!--- Description -->
@@ -36,7 +36,7 @@ import gradio as gr
 def echo(message, history):
     return message
 
-demo = gr.ChatInterface(fn=echo, examples=["hello", "hola", "merhaba"], title="Echo Bot")
+demo = gr.ChatInterface(fn=echo, type="messages", examples=["hello", "hola", "merhaba"], title="Echo Bot")
 demo.launch()
 ```
 
@@ -57,7 +57,7 @@ def vote(data: gr.LikeData):
 with gr.Blocks() as demo:
     chatbot = gr.Chatbot(placeholder="<strong>Your Personal Yes-Man</strong><br>Ask Me Anything")
     chatbot.like(vote, None, None)
-    gr.ChatInterface(fn=yes, chatbot=chatbot)
+    gr.ChatInterface(fn=yes, type="messages", chatbot=chatbot)
     
 demo.launch()
 ```
diff --git a/js/_website/src/lib/templates/gradio/03_components/chatbot.svx b/js/_website/src/lib/templates/gradio/03_components/chatbot.svx
index ce1d04308f13f..3cd1587b0e88c 100644
--- a/js/_website/src/lib/templates/gradio/03_components/chatbot.svx
+++ b/js/_website/src/lib/templates/gradio/03_components/chatbot.svx
@@ -10,6 +10,13 @@
     import { style_formatted_text } from "$lib/text";
 
     let obj = get_object("chatbot");
+
+    let embedded_demo_obj = `[
+        {"role": "user", "content": "Hello World"},
+        {"role": "assistant", "content": "Hey Gradio!"},
+        {"role": "user", "content": "❤️"},
+        {"role": "assistant", "content": "😍"}
+    ]`
 </script>
 
 <!--- Title -->
@@ -17,7 +24,7 @@
 
 <!--- Usage -->
 ```python
-gradio.Chatbot(···)
+gradio.Chatbot(type="messages", ···)
 ```
 
 <!-- Embedded Component -->
@@ -25,7 +32,8 @@ gradio.Chatbot(···)
 <gradio-lite shared-worker>
 import gradio as gr
 with gr.Blocks() as demo:
-    gr.Chatbot(value=[["Hello World","Hey Gradio!"],["❤️","😍"],["🔥","🤗"]])
+    gr.Chatbot(value={embedded_demo_obj},
+            type="messages")
 demo.launch()
 </gradio-lite>
 </div>
@@ -38,145 +46,105 @@ demo.launch()
 ### Behavior
 
 The data format accepted by the Chatbot is dictated by the `type` parameter.
-This parameter can take two values, `'tuples'` and `'messages'`.
-
-
-If `type` is `'tuples'`, then the data sent to/from the chatbot will be a list of tuples.
-The first element of each tuple is the user message and the second element is the bot's response.
-Each element can be a string (markdown/html is supported),
-a tuple (in which case the first element is a filepath that will be displayed in the chatbot),
-or a gradio component (see the Examples section for more details).
+This parameter can take two values, `'tuples'` and `'messages'`. 
+The `'tuples'` type is deprecated and will be removed in a future version of Gradio.
 
+### Message format
 
 If the `type` is `'messages'`, then the data sent to/from the chatbot will be a list of dictionaries
 with `role` and `content` keys. This format is compliant with the format expected by most LLM APIs (HuggingChat, OpenAI, Claude).
-The `role` key is either `'user'` or `'`assistant'` and the `content` key can be a string (markdown/html supported),
-a `FileDataDict` (to represent a file that is displayed in the chatbot - documented below), or a gradio component.
+The `role` key is either `'user'` or `'assistant'` and the `content` key can be one of the following:
 
+1. A string (markdown/html is also supported).
+2. A dictionary with `path` and `alt_text` keys. In this case, the file at `path` will be displayed in the chat history. Image, audio, and video files are fully embedded and visualized in the chat bubble. 
+The `path` key can point to a valid publicly available URL. The `alt_text` key is optional but it's good practice to provide [alt text](https://en.wikipedia.org/wiki/Alt_attribute).
+3. An instance of another Gradio component. 
 
-For convenience, you can use the `ChatMessage` dataclass so that your text editor can give you autocomplete hints and typechecks.
+<br>
+We will show examples for all three cases below -
 
 ```python
-from gradio import ChatMessage
-
 def generate_response(history):
+    # A plain text response
     history.append(
-        ChatMessage(role="assistant",
-                    content="How can I help you?")
-        )
+        {"role": "assistant", content="I am happy to provide you that report and plot."}
+    )
+    # Embed the quaterly sales report in the chat
+    history.append(
+        {"role": "assistant", content={"path": "quaterly_sales.txt", "alt_text": "Sales Report for Q2 2024"}}
+    )
+    # Make a plot of sales data
+    history.append(
+        {"role": "assistant", content=gr.Plot(value=make_plot_from_file('quaterly_sales.txt'))}
+    )
     return history
 ```
 
-Additionally, when `type` is `messages`, you can provide additional metadata regarding any tools used to generate the response.
-This is useful for displaying the thought process of LLM agents. For example,
+For convenience, you can use the `ChatMessage` dataclass so that your text editor can give you autocomplete hints and typechecks.
 
 ```python
+from gradio import ChatMessage
+
 def generate_response(history):
     history.append(
         ChatMessage(role="assistant",
-                    content="The weather API says it is 20 degrees Celcius in New York.",
-                    metadata={"title": "🛠️ Used tool Weather API"})
+                    content="How can I help you?")
         )
     return history
 ```
 
-Would be displayed as following:
-
-<img src="https://github.com/user-attachments/assets/c1514bc9-bc29-4af1-8c3f-cd4a7c2b217f" alt="Gradio chatbot tool display">
-
-
-All of the types expected by the messages format are documented below:
-
-```python
-class MetadataDict(TypedDict):
-    title: Union[str, None]
-
-class FileDataDict(TypedDict):
-    path: str  # server filepath
-    url: NotRequired[Optional[str]]  # normalised server url
-    size: NotRequired[Optional[int]]  # size in bytes
-    orig_name: NotRequired[Optional[str]]  # original filename
-    mime_type: NotRequired[Optional[str]]
-    is_stream: NotRequired[bool]
-    meta: dict[Literal["_type"], Literal["gradio.FileData"]]
-
+### Tuples format
 
-class MessageDict(TypedDict):
-    content: str | FileDataDict | Component
-    role: Literal["user", "assistant", "system"]
-    metadata: NotRequired[MetadataDict]
-
-
-@dataclass
-class Metadata:
-    title: Optional[str] = None
-
-
-@dataclass
-class ChatMessage:
-    role: Literal["user", "assistant", "system"]
-    content: str | FileData | Component | FileDataDict | tuple | list
-    metadata: MetadataDict | Metadata = field(default_factory=Metadata)
-```
+If `type` is `'tuples'`, then the data sent to/from the chatbot will be a list of tuples.
+The first element of each tuple is the user message and the second element is the bot's response.
+Each element can be a string (markdown/html is supported),
+a tuple (in which case the first element is a filepath that will be displayed in the chatbot),
+or a gradio component (see the Examples section for more details).
 
+<!--- Initialization -->
+### Initialization
+<ParamTable parameters={obj.parameters} />
 
-## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
-##### Your function should accept one of these types:
 
-If `type` is `tuples` - 
+{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
+<!--- Shortcuts -->
+### Shortcuts
+<ShortcutTable shortcuts={obj.string_shortcuts} />
+{/if}
 
-```python
-from gradio import Component
+### Examples
 
-def predict(
-	value: list[list[str | tuple[str, str] | Component | None]] | None
-):
-	...
-```
+** Displaying Thoughts/Tool Usage **
 
-If `type` is `messages` - 
+When `type` is `messages`, you can provide additional metadata regarding any tools used to generate the response.
+This is useful for displaying the thought process of LLM agents. For example,
 
 ```python
-from gradio import MessageDict
-
-def predict(value: list[MessageDict] | None):
-    ...
+def generate_response(history):
+    history.append(
+        ChatMessage(role="assistant",
+                    content="The weather API says it is 20 degrees Celcius in New York.",
+                    metadata={"title": "🛠️ Used tool Weather API"})
+        )
+    return history
 ```
-<br>
-
-## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
-##### Your function should return one of these types:
-
-If `type` is `tuples` - 
 
-```python
-def predict(···) -> list[list[str | tuple[str] | tuple[str, str] | None] | tuple] | None
-	...	
-	return value
-```
+Would be displayed as following:
 
-If `type` is `messages` - 
+<img src="https://github.com/user-attachments/assets/c1514bc9-bc29-4af1-8c3f-cd4a7c2b217f" alt="Gradio chatbot tool display">
 
-from gradio import ChatMessage, MessageDict
+You can also specify metadata with a plain python dictionary,
 
 ```python
-def predict(···) - > list[MessageDict] | list[ChatMessage]:
-    ...
+def generate_response(history):
+    history.append(
+        dict(role="assistant",
+             content="The weather API says it is 20 degrees Celcius in New York.",
+             metadata={"title": "🛠️ Used tool Weather API"})
+        )
+    return history
 ```
 
-<!--- Initialization -->
-### Initialization
-<ParamTable parameters={obj.parameters} />
-
-
-{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
-<!--- Shortcuts -->
-### Shortcuts
-<ShortcutTable shortcuts={obj.string_shortcuts} />
-{/if}
-
-### Examples
-
 **Using Gradio Components Inside `gr.Chatbot`**
 
 The `Chatbot` component supports using many of the core Gradio components (such as `gr.Image`, `gr.Plot`, `gr.Audio`, and `gr.HTML`) inside of the chatbot. Simply include one of these components in your list of tuples. Here's an example:
diff --git a/js/_website/src/lib/templates/gradio/03_components/logoutbutton.svx b/js/_website/src/lib/templates/gradio/03_components/logoutbutton.svx
deleted file mode 100644
index 155e0cbfc21af..0000000000000
--- a/js/_website/src/lib/templates/gradio/03_components/logoutbutton.svx
+++ /dev/null
@@ -1,78 +0,0 @@
-
-<script lang="ts">
-    import {get_object} from "../../process_json.ts";
-    import ParamTable from "$lib/components/ParamTable.svelte";
-    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
-    import DemosSection from "$lib/components/DemosSection.svelte";
-    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
-    import GuidesSection from "$lib/components/GuidesSection.svelte";
-    import CopyButton from "$lib/components/CopyButton.svelte";
-    import { style_formatted_text } from "$lib/text";
-
-    let obj = get_object("logoutbutton");
-</script>
-
-<!--- Title -->
-# {obj.name}
-
-<!--- Usage -->
-```python
-gradio.LogoutButton(···)
-```
-
-<!--- Description -->
-### Description
-## {@html style_formatted_text(obj.description)}
-
-<!-- Behavior -->
-### Behavior
-## **As input component**: {@html style_formatted_text(obj.preprocess.return_doc.doc)}
-##### Your function should accept one of these types:
-
-```python
-def predict(
-	value: str | None
-)
-	...
-```
-
-<br>
-
-## **As output component**: {@html style_formatted_text(obj.postprocess.parameter_doc[0].doc)}
-##### Your function should return one of these types:
-
-```python
-def predict(···) -> str | None
-	...	
-	return value
-```
-
-
-<!--- Initialization -->
-### Initialization
-<ParamTable parameters={obj.parameters} />
-
-
-{#if obj.string_shortcuts && obj.string_shortcuts.length > 0}
-<!--- Shortcuts -->
-### Shortcuts
-<ShortcutTable shortcuts={obj.string_shortcuts} />
-{/if}
-
-{#if obj.demos && obj.demos.length > 0}
-<!--- Demos -->
-### Demos 
-<DemosSection demos={obj.demos} />
-{/if}
-
-{#if obj.fns && obj.fns.length > 0}
-<!--- Event Listeners -->
-### Event Listeners 
-<FunctionsSection fns={obj.fns} event_listeners={true} />
-{/if}
-
-{#if obj.guides && obj.guides.length > 0}
-<!--- Guides -->
-### Guides
-<GuidesSection guides={obj.guides}/>
-{/if}
diff --git a/js/_website/src/lib/templates/gradio/04_helpers/make_waveform.svx b/js/_website/src/lib/templates/gradio/04_helpers/make_waveform.svx
deleted file mode 100644
index 7dd94e10fa41b..0000000000000
--- a/js/_website/src/lib/templates/gradio/04_helpers/make_waveform.svx
+++ /dev/null
@@ -1,57 +0,0 @@
-
-<script lang="ts">
-    import {get_object} from "../../process_json.ts";
-    import ParamTable from "$lib/components/ParamTable.svelte";
-    import ShortcutTable from "$lib/components/ShortcutTable.svelte";
-    import DemosSection from "$lib/components/DemosSection.svelte";
-    import FunctionsSection from "$lib/components/FunctionsSection.svelte";
-    import GuidesSection from "$lib/components/GuidesSection.svelte";
-    import CopyButton from "$lib/components/CopyButton.svelte";
-    import { style_formatted_text } from "$lib/text";
-
-    let obj = get_object("make_waveform");
-</script>
-
-<!--- Title -->
-# {obj.name}
-
-<!--- Usage -->
-```python
-gradio.make_waveform(···)
-```
-
-<!--- Description -->
-### Description
-## {@html style_formatted_text(obj.description)}
-
-<!-- Example Usage --> 
-
-{#if obj.example}
-### Example Usage
-```python
-None
-```
-{/if}
-
-<!--- Initialization -->
-### Initialization
-<ParamTable parameters={obj.parameters} />
-
-
-{#if obj.demos && obj.demos.length > 0}
-<!--- Demos -->
-### Demos 
-<DemosSection demos={obj.demos} />
-{/if}
-
-{#if obj.fns && obj.fns.length > 0}
-<!--- Methods -->
-### Methods 
-<FunctionsSection fns={obj.fns} event_listeners={false} />
-{/if}
-
-{#if obj.guides && obj.guides.length > 0}
-<!--- Guides -->
-### Guides
-<GuidesSection guides={obj.guides}/>
-{/if}
diff --git a/js/_website/src/lib/templates/gradio/other/01_flagging.svx b/js/_website/src/lib/templates/gradio/other/01_flagging.svx
index d7773b95105d1..e919a34976940 100644
--- a/js/_website/src/lib/templates/gradio/other/01_flagging.svx
+++ b/js/_website/src/lib/templates/gradio/other/01_flagging.svx
@@ -11,7 +11,6 @@
 
     let simple_csv_logger_obj = get_object("simplecsvlogger");
     let csv_logger_obj = get_object("csvlogger");
-    let hf_dataset_saver_obj = get_object("huggingfacedatasetsaver");
 </script>
 
 <!--- Title -->
@@ -128,58 +127,3 @@ demo = gr.Interface(fn=image_classifier, inputs="image", outputs="label",
 <GuidesSection guides={csv_logger_obj.guides}/>
 {/if}
 
-
-<!--------- HuggingFaceDatasetSaver --------->
-
-<!-- Title -->
-# {hf_dataset_saver_obj.name}
-
-
-<!--- Usage -->
-```python
-gradio.HuggingFaceDatasetSaver(hf_token, dataset_name, ···)
-```
-
-<!--- Description -->
-### Description
-## {@html style_formatted_text(hf_dataset_saver_obj.description)}
-
-<!-- Example Usage --> 
-
-{#if hf_dataset_saver_obj.example}
-### Example Usage
-```python
-import gradio as gr
-hf_writer = gr.HuggingFaceDatasetSaver(HF_API_TOKEN, "image-classification-mistakes")
-def image_classifier(inp):
-    return {'cat': 0.3, 'dog': 0.7}
-demo = gr.Interface(fn=image_classifier, inputs="image", outputs="label",
-                    allow_flagging="manual", flagging_callback=hf_writer)
-```
-{/if}
-
-{#if (hf_dataset_saver_obj.parameters.length > 0 && hf_dataset_saver_obj.parameters[0].name != "self") || hf_dataset_saver_obj.parameters.length > 1}
-<!--- Initialization -->
-### Initialization
-<ParamTable parameters={hf_dataset_saver_obj.parameters} />
-{/if}
-
-{#if hf_dataset_saver_obj.demos && hf_dataset_saver_obj.demos.length > 0}
-<!--- Demos -->
-### Demos 
-<DemosSection demos={hf_dataset_saver_obj.demos} />
-{/if}
-
-{#if hf_dataset_saver_obj.fns && hf_dataset_saver_obj.fns.length > 0}
-<!--- Methods -->
-### Methods 
-<FunctionsSection fns={hf_dataset_saver_obj.fns} event_listeners={false} />
-{/if}
-
-{#if hf_dataset_saver_obj.guides && hf_dataset_saver_obj.guides.length > 0}
-<!--- Guides -->
-### Guides
-<GuidesSection guides={hf_dataset_saver_obj.guides}/>
-{/if}
-
-
diff --git a/js/_website/src/lib/templates/third-party-clients/third-party-clients/01_introduction.svx b/js/_website/src/lib/templates/third-party-clients/third-party-clients/01_introduction.svx
index 396af07a87ccd..73a0c96b19d63 100644
--- a/js/_website/src/lib/templates/third-party-clients/third-party-clients/01_introduction.svx
+++ b/js/_website/src/lib/templates/third-party-clients/third-party-clients/01_introduction.svx
@@ -14,4 +14,5 @@
 ### Community Clients
 ## We also encourage the development and use of third party clients built by the community: 
 
-- [Rust Client](/docs/third-party-clients/rust-client): `gradio-rs` built by [@JacobLinCool](https://github.com/JacobLinCool) allows you to make requests in Rust. 
\ No newline at end of file
+- [Rust Client](/docs/third-party-clients/rust-client): `gradio-rs` built by [@JacobLinCool](https://github.com/JacobLinCool) allows you to make requests in Rust. 
+- [Powershell Client](https://github.com/rrg92/powershai): `powershai` built by [@rrg92](https://github.com/rrg92) allows you to make requests to Gradio apps directly from Powershell. See [here for documentation](https://github.com/rrg92/powershai/blob/main/docs/en-US/providers/HUGGING-FACE.md)
\ No newline at end of file
diff --git a/js/_website/src/routes/+page.svelte b/js/_website/src/routes/+page.svelte
index 408521931a912..526034365205b 100644
--- a/js/_website/src/routes/+page.svelte
+++ b/js/_website/src/routes/+page.svelte
@@ -30,7 +30,10 @@
 	<script
 		id="gradio-js-script"
 		type="module"
-		src="https://gradio.s3-us-west-2.amazonaws.com/{version}/gradio.js"
+		src="https://gradio.s3-us-west-2.amazonaws.com/{version.replace(
+			'b',
+			'-beta.'
+		)}/gradio.js"
 	></script>
 </svelte:head>
 
diff --git a/js/_website/src/routes/[[version]]/docs/gradio/[doc]/+page.svelte b/js/_website/src/routes/[[version]]/docs/gradio/[doc]/+page.svelte
index f7fbeba6d1682..116112c7f8c0f 100644
--- a/js/_website/src/routes/[[version]]/docs/gradio/[doc]/+page.svelte
+++ b/js/_website/src/routes/[[version]]/docs/gradio/[doc]/+page.svelte
@@ -117,8 +117,6 @@
 	canonical={$page.url.pathname}
 	description={"Gradio docs for using " + all_headers.page_title.title}
 />
-<link rel="stylesheet" href="https://gradio-hello-world.hf.space/theme.css" />
-
 <svelte:window bind:scrollY={y} />
 
 <main class="container mx-auto px-4 flex flex-col gap-4">
@@ -257,7 +255,7 @@
 				<a class="thin-link py-2 block text-lg" href="#{all_headers.page_title.id}">{all_headers.page_title.title}</a
 				>
 				{#if all_headers.headers && all_headers.headers.length > 0}
-					<ul class="text-slate-700 text-lg leading-6">
+					<ul class="text-slate-700 text-lg leading-6 list-none">
 						{#each all_headers.headers as header}
 							<li>
 								<a
diff --git a/js/_website/src/routes/[[version]]/docs/python-client/[doc]/+page.svelte b/js/_website/src/routes/[[version]]/docs/python-client/[doc]/+page.svelte
index fa72e99bc7d31..7323a98034c28 100644
--- a/js/_website/src/routes/[[version]]/docs/python-client/[doc]/+page.svelte
+++ b/js/_website/src/routes/[[version]]/docs/python-client/[doc]/+page.svelte
@@ -238,7 +238,7 @@
 					href="#{all_headers.page_title.id}">{all_headers.page_title.title}</a
 				>
 				{#if all_headers.headers && all_headers.headers.length > 0}
-					<ul class="text-slate-700 text-lg leading-6">
+					<ul class="text-slate-700 text-lg leading-6 list-none">
 						{#each all_headers.headers as header}
 							<li>
 								<a
diff --git a/js/_website/src/routes/[[version]]/docs/third-party-clients/[doc]/+page.svelte b/js/_website/src/routes/[[version]]/docs/third-party-clients/[doc]/+page.svelte
index fd1880bc27ba8..2510d2834b5ac 100644
--- a/js/_website/src/routes/[[version]]/docs/third-party-clients/[doc]/+page.svelte
+++ b/js/_website/src/routes/[[version]]/docs/third-party-clients/[doc]/+page.svelte
@@ -208,7 +208,7 @@
 					href="#{all_headers.page_title.id}">{all_headers.page_title.title}</a
 				>
 				{#if all_headers.headers && all_headers.headers.length > 0}
-					<ul class="text-slate-700 text-lg leading-6">
+					<ul class="text-slate-700 text-lg leading-6 list-none">
 						{#each all_headers.headers as header}
 							<li>
 								<a
diff --git a/js/_website/src/routes/playground/+page.svelte b/js/_website/src/routes/playground/+page.svelte
index e043ebeb378c9..9033d15bdf24b 100644
--- a/js/_website/src/routes/playground/+page.svelte
+++ b/js/_website/src/routes/playground/+page.svelte
@@ -7,7 +7,7 @@
 	import { gradio_logo } from "$lib/assets";
 	import { afterNavigate } from "$app/navigation";
 	import { clickOutside } from "$lib/components/clickOutside.js";
-	import Code from "@gradio/code";
+	import { BaseCode as Code } from "@gradio/code";
 	import version_json from "$lib/json/version.json";
 	import WHEEL from "$lib/json/wheel.json";
 
@@ -37,12 +37,8 @@
 
 	let show_nav = true;
 
-	$: show_nav;
-
 	let show_mobile_nav = false;
 
-	$: show_mobile_nav;
-
 	let show_preview = false;
 
 	let on_desktop = false;
@@ -57,9 +53,6 @@
 		show_mobile_nav = false;
 	};
 
-	let dummy_elem: any = { classList: { contains: () => false } };
-	let dummy_gradio: any = { dispatch: (_) => {} };
-
 	let version = version_json.version;
 </script>
 
@@ -76,7 +69,10 @@
 	<script
 		id="gradio-js-script"
 		type="module"
-		src="https://gradio.s3-us-west-2.amazonaws.com/{version}/gradio.js"
+		src="https://gradio.s3-us-west-2.amazonaws.com/{version.replace(
+			'b',
+			'-beta.'
+		)}/gradio.js"
 	></script>
 </svelte:head>
 
@@ -105,11 +101,14 @@
 
 <!-- Desktop -->
 {#if on_desktop}
-	<main class="playground flex-col justify-between hidden md:flex">
+	<main
+		class="playground flex-col justify-between hidden md:flex"
+		style="height: 94vh"
+	>
 		<div class="w-full border border-gray-200 shadow-xl h-full relative">
 			<div
-				class="w-[200px] h-full rounded-tr-none rounded-bl-xl overflow-y-scroll mb-0 p-0 pb-4 text-md block rounded-t-xl bg-gradient-to-r from-white to-gray-50 overflow-x-clip"
-				style="word-break: normal; overflow-wrap: break-word; white-space:nowrap; width: {show_nav
+				class="w-[200px] rounded-tr-none rounded-bl-xl overflow-y-scroll mb-0 p-0 pb-4 text-md block rounded-t-xl bg-gradient-to-r from-white to-gray-50 overflow-x-clip"
+				style="word-break: normal; overflow-wrap: break-word; white-space:nowrap; height: 100%; width: {show_nav
 					? 200
 					: 37}px;"
 			>
@@ -128,10 +127,10 @@
 						on:click={() => (current_selection = "Blank")}
 						class:current-playground-demo={current_selection == "Blank"}
 						class:shared-link={shared == "Blank"}
-						class="thin-link font-light px-4 mt-2 block">Blank</button
+						class="thin-link font-light px-4 block my-2">New Demo</button
 					>
 					{#each data.demos_by_category as { category, demos } (category)}
-						<p class="px-4 my-2">{category}</p>
+						<p class="px-4 my-2 font-medium">{category}</p>
 						{#each demos as demo, i}
 							<button
 								on:click={() => (current_selection = demo.name)}
@@ -246,12 +245,10 @@
 					{#if !show_preview}
 						<Code
 							bind:value={demos[i].code}
-							label=""
 							language="python"
-							target={dummy_elem}
-							gradio={dummy_gradio}
 							lines={10}
-							interactive="false"
+							readonly
+							dark_mode={false}
 						/>
 					{:else}
 						<gradio-app space={"gradio/" + demo.dir} />
@@ -288,9 +285,6 @@
 {/if}
 
 <style>
-	.code {
-		white-space: pre-wrap;
-	}
 	:global(body) {
 		min-height: 100vh;
 		display: grid;
@@ -341,13 +335,6 @@
 		box-shadow: 0 0 1px #fc963c;
 	}
 
-	input:checked + .code-btn {
-		color: #fc963c !important;
-	}
-	input:focus + .code-btn {
-		color: #fc963c !important;
-	}
-
 	input:checked + .slider:before {
 		-webkit-transform: translateX(26px);
 		-ms-transform: translateX(26px);
@@ -362,10 +349,6 @@
 		border-radius: 50%;
 	}
 
-	.code-mobile .block {
-		height: 100%;
-	}
-
 	.mobile-window {
 		height: 58vh;
 		overflow-y: scroll;
diff --git a/js/_website/src/routes/redirects.js b/js/_website/src/routes/redirects.js
index 32ae9f47eae25..4988495aea397 100644
--- a/js/_website/src/routes/redirects.js
+++ b/js/_website/src/routes/redirects.js
@@ -16,6 +16,9 @@ export const redirects = {
 	"/docs/textbox": "/docs/gradio/textbox",
 	"/docs/interface": "/docs/gradio/interface",
 	"/docs/python-client/python-client": "/docs/python-client/introduction",
+	"/guides/sharing-your-app#security-and-file-access": "/guides/file-access",
 	"/docs/gradio/interface#interface-queue": "/docs/gradio/interface",
-	"/using_hugging_face_integrations": "/guides/using-hugging-face-integrations"
+	"/using_hugging_face_integrations": "/guides/using-hugging-face-integrations",
+	"/main/guides/object-detection-from-webcam":
+		"/main/guides/object-detection-from-webcam-with-webrtc"
 };
diff --git a/js/_website/tailwind.config.cjs b/js/_website/tailwind.config.cjs
index 9272f8a112401..b975c6a590204 100644
--- a/js/_website/tailwind.config.cjs
+++ b/js/_website/tailwind.config.cjs
@@ -10,7 +10,7 @@ module.exports = {
 	theme: {
 		extend: {
 			fontFamily: {
-				sans: ["Source Sans Pro", ...defaultTheme.fontFamily.sans],
+				sans: ["IBM Plex Sans", ...defaultTheme.fontFamily.sans],
 				mono: ["IBM Plex Mono", ...defaultTheme.fontFamily.mono]
 			},
 			colors: {
diff --git a/js/_website/vite.config.ts.timestamp-1726131433344-c7204d80805fa.mjs b/js/_website/vite.config.ts.timestamp-1726131433344-c7204d80805fa.mjs
new file mode 100644
index 0000000000000..b595f0092f515
--- /dev/null
+++ b/js/_website/vite.config.ts.timestamp-1726131433344-c7204d80805fa.mjs
@@ -0,0 +1,170 @@
+// vite.config.ts
+import { sveltekit } from "file:///Users/aliabdalla/Documents/dev/gradio/node_modules/.pnpm/@sveltejs+kit@2.5.20_@sveltejs+vite-plugin-svelte@3.1.0_svelte@4.2.15_vite@5.2.11_@types+node_o7pp2p5svq4h5udxa4yf4mjnc4/node_modules/@sveltejs/kit/src/exports/vite/index.js";
+import { defineConfig } from "file:///Users/aliabdalla/Documents/dev/gradio/node_modules/.pnpm/vite@5.2.11_@types+node@20.12.8_lightningcss@1.24.1_sass@1.66.1_stylus@0.63.0_sugarss@4.0.1_postcss@8.4.38_/node_modules/vite/dist/node/index.js";
+
+// ../build/out/index.js
+import { parse } from "file:///Users/aliabdalla/Documents/dev/gradio/node_modules/.pnpm/node-html-parser@6.1.13/node_modules/node-html-parser/dist/index.js";
+import { join } from "path";
+import * as url from "url";
+import { readdirSync, existsSync, readFileSync, statSync } from "fs";
+var __vite_injected_original_import_meta_url =
+	"file:///Users/aliabdalla/Documents/dev/gradio/js/build/out/index.js";
+var __filename = url.fileURLToPath(__vite_injected_original_import_meta_url);
+var __dirname = url.fileURLToPath(
+	new URL(".", __vite_injected_original_import_meta_url)
+);
+function get_export_path(path, root, pkg_json) {
+	if (!pkg_json.exports) return false;
+	if (typeof pkg_json.exports[`${path}`] === "object") return true;
+	const _path = join(root, "..", `${pkg_json.exports[`${path}`]}`);
+	return existsSync(_path);
+}
+var ignore_list = [
+	"tootils",
+	"_cdn-test",
+	"_spaces-test",
+	"_website",
+	"app",
+	"atoms",
+	"fallback",
+	"icons",
+	"lite",
+	"preview",
+	"simpledropdown",
+	"simpleimage",
+	"simpletextbox",
+	"storybook",
+	"theme",
+	"timeseries",
+	"tooltip",
+	"upload",
+	"utils",
+	"wasm"
+];
+function generate_component_imports() {
+	const exports = readdirSync(join(__dirname, "..", ".."))
+		.map((dir) => {
+			if (ignore_list.includes(dir)) return void 0;
+			if (!statSync(join(__dirname, "..", "..", dir)).isDirectory())
+				return void 0;
+			const package_json_path = join(
+				__dirname,
+				"..",
+				"..",
+				dir,
+				"package.json"
+			);
+			if (existsSync(package_json_path)) {
+				const package_json = JSON.parse(
+					readFileSync(package_json_path, "utf8")
+				);
+				const component = get_export_path(".", package_json_path, package_json);
+				const example = get_export_path(
+					"./example",
+					package_json_path,
+					package_json
+				);
+				const base = get_export_path("./base", package_json_path, package_json);
+				if (!component && !example) return void 0;
+				return {
+					name: package_json.name,
+					component,
+					example,
+					base
+				};
+			}
+			return void 0;
+		})
+		.filter((x) => x !== void 0);
+	const imports = exports.reduce((acc, _export) => {
+		if (!_export) return acc;
+		const example = _export.example
+			? `example: () => import("${_export.name}/example"),
+`
+			: "";
+		const base = _export.base
+			? `base: () => import("${_export.name}/base"),
+`
+			: "";
+		return `${acc}"${_export.name.replace("@gradio/", "")}": {
+			${base}
+			${example}
+			component: () => import("${_export.name}")
+			},
+`;
+	}, "");
+	return imports;
+}
+function load_virtual_component_loader(mode) {
+	const loader_path = join(__dirname, "component_loader.js");
+	let component_map = "";
+	if (mode === "test") {
+		component_map = `
+		const component_map = {
+			"test-component-one": {
+				component: () => import("@gradio-test/test-one"),
+				example: () => import("@gradio-test/test-one/example")
+			},
+			"dataset": {
+				component: () => import("@gradio-test/test-two"),
+				example: () => import("@gradio-test/test-two/example")
+			},
+			"image": {
+				component: () => import("@gradio/image"),
+				example: () => import("@gradio/image/example"),
+				base: () => import("@gradio/image/base")
+			},
+			"audio": {
+				component: () => import("@gradio/audio"),
+				example: () => import("@gradio/audio/example"),
+				base: () => import("@gradio/audio/base")
+			},
+			"video": {
+				component: () => import("@gradio/video"),
+				example: () => import("@gradio/video/example"),
+				base: () => import("@gradio/video/base")
+			},
+			// "test-component-one": {
+			// 	component: () => import("@gradio-test/test-one"),
+			// 	example: () => import("@gradio-test/test-one/example")
+			// },
+		};
+		`;
+	} else {
+		component_map = `
+		const component_map = {
+			${generate_component_imports()}
+		};
+		`;
+	}
+	return `${component_map}
+
+${readFileSync(loader_path, "utf8")}`;
+}
+function inject_component_loader({ mode }) {
+	const v_id = "virtual:component-loader";
+	const resolved_v_id = "\0" + v_id;
+	return {
+		name: "inject-component-loader",
+		enforce: "pre",
+		resolveId(id) {
+			if (id === v_id) return resolved_v_id;
+		},
+		load(id) {
+			this.addWatchFile(join(__dirname, "component_loader.js"));
+			if (id === resolved_v_id) {
+				return load_virtual_component_loader(mode);
+			}
+		}
+	};
+}
+
+// vite.config.ts
+var vite_config_default = defineConfig(({ mode }) => ({
+	plugins: [sveltekit(), inject_component_loader({ mode })],
+	resolve: {
+		conditions: ["gradio"]
+	}
+}));
+export { vite_config_default as default };
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiLCAiLi4vYnVpbGQvb3V0L2luZGV4LmpzIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL1VzZXJzL2FsaWFiZGFsbGEvRG9jdW1lbnRzL2Rldi9ncmFkaW8vanMvX3dlYnNpdGVcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi9Vc2Vycy9hbGlhYmRhbGxhL0RvY3VtZW50cy9kZXYvZ3JhZGlvL2pzL193ZWJzaXRlL3ZpdGUuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9Vc2Vycy9hbGlhYmRhbGxhL0RvY3VtZW50cy9kZXYvZ3JhZGlvL2pzL193ZWJzaXRlL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgc3ZlbHRla2l0IH0gZnJvbSBcIkBzdmVsdGVqcy9raXQvdml0ZVwiO1xuaW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSBcInZpdGVcIjtcbmltcG9ydCB7IGluamVjdF9jb21wb25lbnRfbG9hZGVyIH0gZnJvbSBcIi4uL2J1aWxkL291dC9pbmRleC5qc1wiO1xuXG4vL0B0cy1pZ25vcmVcbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZygoeyBtb2RlIH0pID0+ICh7XG5cdHBsdWdpbnM6IFtzdmVsdGVraXQoKSwgaW5qZWN0X2NvbXBvbmVudF9sb2FkZXIoeyBtb2RlIH0pXSxcblx0cmVzb2x2ZToge1xuXHRcdGNvbmRpdGlvbnM6IFtcImdyYWRpb1wiXVxuXHR9XG59KSk7XG4iLCAiY29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2Rpcm5hbWUgPSBcIi9Vc2Vycy9hbGlhYmRhbGxhL0RvY3VtZW50cy9kZXYvZ3JhZGlvL2pzL2J1aWxkL291dFwiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2FsaWFiZGFsbGEvRG9jdW1lbnRzL2Rldi9ncmFkaW8vanMvYnVpbGQvb3V0L2luZGV4LmpzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9Vc2Vycy9hbGlhYmRhbGxhL0RvY3VtZW50cy9kZXYvZ3JhZGlvL2pzL2J1aWxkL291dC9pbmRleC5qc1wiOy8vIHNyYy9pbmRleC50c1xuaW1wb3J0IHsgcGFyc2UgfSBmcm9tIFwibm9kZS1odG1sLXBhcnNlclwiO1xuaW1wb3J0IHsgam9pbiB9IGZyb20gXCJwYXRoXCI7XG5pbXBvcnQgeyB3cml0ZUZpbGVTeW5jIH0gZnJvbSBcImZzXCI7XG5pbXBvcnQgKiBhcyB1cmwgZnJvbSBcInVybFwiO1xuaW1wb3J0IHsgcmVhZGRpclN5bmMsIGV4aXN0c1N5bmMsIHJlYWRGaWxlU3luYywgc3RhdFN5bmMgfSBmcm9tIFwiZnNcIjtcbmZ1bmN0aW9uIGluamVjdF9lanMoKSB7XG4gIHJldHVybiB7XG4gICAgbmFtZTogXCJpbmplY3QtZWpzXCIsXG4gICAgZW5mb3JjZTogXCJwb3N0XCIsXG4gICAgdHJhbnNmb3JtSW5kZXhIdG1sOiAoaHRtbCkgPT4ge1xuICAgICAgY29uc3QgcmVwbGFjZV9ncmFkaW9faW5mb19pbmZvX2h0bWwgPSBodG1sLnJlcGxhY2UoXG4gICAgICAgIC8lZ3JhZGlvX2FwaV9pbmZvJS8sXG4gICAgICAgIGA8c2NyaXB0PndpbmRvdy5ncmFkaW9fYXBpX2luZm8gPSB7eyBncmFkaW9fYXBpX2luZm8gfCB0b29yanNvbiB9fTs8L3NjcmlwdD5gXG4gICAgICApO1xuICAgICAgcmV0dXJuIHJlcGxhY2VfZ3JhZGlvX2luZm9faW5mb19odG1sLnJlcGxhY2UoXG4gICAgICAgIC8lZ3JhZGlvX2NvbmZpZyUvLFxuICAgICAgICBgPHNjcmlwdD53aW5kb3cuZ3JhZGlvX2NvbmZpZyA9IHt7IGNvbmZpZyB8IHRvb3Jqc29uIH19Ozwvc2NyaXB0PmBcbiAgICAgICk7XG4gICAgfVxuICB9O1xufVxuZnVuY3Rpb24gZ2VuZXJhdGVfY2RuX2VudHJ5KHtcbiAgdmVyc2lvbixcbiAgY2RuX2Jhc2Vcbn0pIHtcbiAgcmV0dXJuIHtcbiAgICBuYW1lOiBcImdlbmVyYXRlLWNkbi1lbnRyeVwiLFxuICAgIGVuZm9yY2U6IFwicG9zdFwiLFxuICAgIHdyaXRlQnVuZGxlKGNvbmZpZywgYnVuZGxlKSB7XG4gICAgICBpZiAoIWNvbmZpZy5kaXIgfHwgIWJ1bmRsZVtcImluZGV4Lmh0bWxcIl0gfHwgYnVuZGxlW1wiaW5kZXguaHRtbFwiXS50eXBlICE9PSBcImFzc2V0XCIpXG4gICAgICAgIHJldHVybjtcbiAgICAgIGNvbnN0IHNvdXJjZSA9IGJ1bmRsZVtcImluZGV4Lmh0bWxcIl0uc291cmNlO1xuICAgICAgY29uc3QgdHJlZSA9IHBhcnNlKHNvdXJjZSk7XG4gICAgICBjb25zdCBzY3JpcHQgPSBBcnJheS5mcm9tKFxuICAgICAgICB0cmVlLnF1ZXJ5U2VsZWN0b3JBbGwoXCJzY3JpcHRbdHlwZT1tb2R1bGVdXCIpXG4gICAgICApLmZpbmQoKG5vZGUpID0+IG5vZGUuYXR0cmlidXRlcy5zcmM/LmluY2x1ZGVzKFwiYXNzZXRzXCIpKTtcbiAgICAgIGNvbnN0IG91dHB1dF9sb2NhdGlvbiA9IGpvaW4oY29uZmlnLmRpciwgXCJncmFkaW8uanNcIik7XG4gICAgICB3cml0ZUZpbGVTeW5jKG91dHB1dF9sb2NhdGlvbiwgbWFrZV9lbnRyeShzY3JpcHQ/LmF0dHJpYnV0ZXMuc3JjIHx8IFwiXCIpKTtcbiAgICAgIGlmICghc2NyaXB0KSByZXR1cm47XG4gICAgICBjb25zdCB0cmFuc2Zvcm1lZF9odG1sID0gYnVuZGxlW1wiaW5kZXguaHRtbFwiXS5zb3VyY2Uuc3Vic3RyaW5nKDAsIHNjcmlwdD8ucmFuZ2VbMF0pICsgYDxzY3JpcHQgdHlwZT1cIm1vZHVsZVwiIGNyb3Nzb3JpZ2luIHNyYz1cIiR7Y2RuX2Jhc2V9LyR7dmVyc2lvbn0vZ3JhZGlvLmpzXCI+PC9zY3JpcHQ+YCArIGJ1bmRsZVtcImluZGV4Lmh0bWxcIl0uc291cmNlLnN1YnN0cmluZyhcbiAgICAgICAgc2NyaXB0Py5yYW5nZVsxXSxcbiAgICAgICAgc291cmNlLmxlbmd0aFxuICAgICAgKTtcbiAgICAgIGNvbnN0IHNoYXJlX2h0bWxfbG9jYXRpb24gPSBqb2luKGNvbmZpZy5kaXIsIFwic2hhcmUuaHRtbFwiKTtcbiAgICAgIHdyaXRlRmlsZVN5bmMoc2hhcmVfaHRtbF9sb2NhdGlvbiwgdHJhbnNmb3JtZWRfaHRtbCk7XG4gICAgfVxuICB9O1xufVxudmFyIFJFX1NWRUxURV9JTVBPUlQgPSAvaW1wb3J0XFxzKyhbXFx3Knt9LFxcc10rKVxccytmcm9tXFxzK1snXCJdKHN2ZWx0ZXxzdmVsdGVcXC9pbnRlcm5hbClbJ1wiXS9nO1xuZnVuY3Rpb24gZ2VuZXJhdGVfZGV2X2VudHJ5KHsgZW5hYmxlIH0pIHtcbiAgcmV0dXJuIHtcbiAgICBuYW1lOiBcImdlbmVyYXRlLWRldi1lbnRyeVwiLFxuICAgIHRyYW5zZm9ybShjb2RlLCBpZCkge1xuICAgICAgaWYgKCFlbmFibGUpIHJldHVybjtcbiAgICAgIGNvbnN0IG5ld19jb2RlID0gY29kZS5yZXBsYWNlKFJFX1NWRUxURV9JTVBPUlQsIChzdHIsICQxLCAkMikgPT4ge1xuICAgICAgICByZXR1cm4gYGNvbnN0ICR7JDEucmVwbGFjZSgvXFwqIGFzIC8sIFwiXCIpLnJlcGxhY2UoLyBhcyAvZywgXCI6IFwiKX0gPSB3aW5kb3cuX19ncmFkaW9fX3N2ZWx0ZV9faW50ZXJuYWw7YDtcbiAgICAgIH0pO1xuICAgICAgcmV0dXJuIHtcbiAgICAgICAgY29kZTogbmV3X2NvZGUsXG4gICAgICAgIG1hcDogbnVsbFxuICAgICAgfTtcbiAgICB9XG4gIH07XG59XG5mdW5jdGlvbiBtYWtlX2VudHJ5KHNjcmlwdCkge1xuICByZXR1cm4gYGltcG9ydChcIiR7c2NyaXB0fVwiKTtcbmA7XG59XG5mdW5jdGlvbiBoYW5kbGVfY2VfY3NzKCkge1xuICByZXR1cm4ge1xuICAgIGVuZm9yY2U6IFwicG9zdFwiLFxuICAgIG5hbWU6IFwiY3VzdG9tLWVsZW1lbnQtY3NzXCIsXG4gICAgd3JpdGVCdW5kbGUoY29uZmlnLCBidW5kbGUpIHtcbiAgICAgIGxldCBmaWxlX3RvX2luc2VydCA9IHtcbiAgICAgICAgZmlsZW5hbWU6IFwiXCIsXG4gICAgICAgIHNvdXJjZTogXCJcIlxuICAgICAgfTtcbiAgICAgIGlmICghY29uZmlnLmRpciB8fCAhYnVuZGxlW1wiaW5kZXguaHRtbFwiXSB8fCBidW5kbGVbXCJpbmRleC5odG1sXCJdLnR5cGUgIT09IFwiYXNzZXRcIilcbiAgICAgICAgcmV0dXJuO1xuICAgICAgZm9yIChjb25zdCBrZXkgaW4gYnVuZGxlKSB7XG4gICAgICAgIGNvbnN0IGNodW5rID0gYnVuZGxlW2tleV07XG4gICAgICAgIGlmIChjaHVuay50eXBlID09PSBcImNodW5rXCIpIHtcbiAgICAgICAgICBjb25zdCBfY2h1bmsgPSBjaHVuaztcbiAgICAgICAgICBjb25zdCBmb3VuZCA9IF9jaHVuay5jb2RlPy5pbmRleE9mKFwiRU5UUllfQ1NTXCIpO1xuICAgICAgICAgIGlmIChmb3VuZCA+IC0xKVxuICAgICAgICAgICAgZmlsZV90b19pbnNlcnQgPSB7XG4gICAgICAgICAgICAgIGZpbGVuYW1lOiBqb2luKGNvbmZpZy5kaXIsIGtleSksXG4gICAgICAgICAgICAgIHNvdXJjZTogX2NodW5rLmNvZGVcbiAgICAgICAgICAgIH07XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICAgIGNvbnN0IHRyZWUgPSBwYXJzZShidW5kbGVbXCJpbmRleC5odG1sXCJdLnNvdXJjZSk7XG4gICAgICBjb25zdCB7IHN0eWxlLCBmb250cyB9ID0gQXJyYXkuZnJvbShcbiAgICAgICAgdHJlZS5xdWVyeVNlbGVjdG9yQWxsKFwibGlua1tyZWw9c3R5bGVzaGVldF1cIilcbiAgICAgICkucmVkdWNlKFxuICAgICAgICAoYWNjLCBuZXh0KSA9PiB7XG4gICAgICAgICAgaWYgKC8uKlxcL2luZGV4KC4qPylcXC5jc3MvLnRlc3QobmV4dC5hdHRyaWJ1dGVzLmhyZWYpKSB7XG4gICAgICAgICAgICByZXR1cm4geyAuLi5hY2MsIHN0eWxlOiBuZXh0IH07XG4gICAgICAgICAgfVxuICAgICAgICAgIHJldHVybiB7IC4uLmFjYywgZm9udHM6IFsuLi5hY2MuZm9udHMsIG5leHQuYXR0cmlidXRlcy5ocmVmXSB9O1xuICAgICAgICB9LFxuICAgICAgICB7IGZvbnRzOiBbXSwgc3R5bGU6IHZvaWQgMCB9XG4gICAgICApO1xuICAgICAgd3JpdGVGaWxlU3luYyhcbiAgICAgICAgZmlsZV90b19pbnNlcnQuZmlsZW5hbWUsXG4gICAgICAgIGZpbGVfdG9faW5zZXJ0LnNvdXJjZS5yZXBsYWNlKFwiX19FTlRSWV9DU1NfX1wiLCBzdHlsZS5hdHRyaWJ1dGVzLmhyZWYpLnJlcGxhY2UoXG4gICAgICAgICAgJ1wiX19GT05UU19DU1NfX1wiJyxcbiAgICAgICAgICBgWyR7Zm9udHMubWFwKChmKSA9PiBgXCIke2Z9XCJgKS5qb2luKFwiLFwiKX1dYFxuICAgICAgICApXG4gICAgICApO1xuICAgICAgY29uc3Qgc2hhcmVfaHRtbF9sb2NhdGlvbiA9IGpvaW4oY29uZmlnLmRpciwgXCJzaGFyZS5odG1sXCIpO1xuICAgICAgY29uc3Qgc2hhcmVfaHRtbCA9IHJlYWRGaWxlU3luYyhzaGFyZV9odG1sX2xvY2F0aW9uLCBcInV0ZjhcIik7XG4gICAgICBjb25zdCBzaGFyZV90cmVlID0gcGFyc2Uoc2hhcmVfaHRtbCk7XG4gICAgICBjb25zdCBub2RlID0gQXJyYXkuZnJvbShcbiAgICAgICAgc2hhcmVfdHJlZS5xdWVyeVNlbGVjdG9yQWxsKFwibGlua1tyZWw9c3R5bGVzaGVldF1cIilcbiAgICAgICkuZmluZCgobm9kZTIpID0+IC8uKlxcL2luZGV4KC4qPylcXC5jc3MvLnRlc3Qobm9kZTIuYXR0cmlidXRlcy5ocmVmKSk7XG4gICAgICBpZiAoIW5vZGUpIHJldHVybjtcbiAgICAgIGNvbnN0IHRyYW5zZm9ybWVkX2h0bWwgPSBzaGFyZV9odG1sLnN1YnN0cmluZygwLCBub2RlLnJhbmdlWzBdKSArIHNoYXJlX2h0bWwuc3Vic3RyaW5nKG5vZGUucmFuZ2VbMV0sIHNoYXJlX2h0bWwubGVuZ3RoKTtcbiAgICAgIHdyaXRlRmlsZVN5bmMoc2hhcmVfaHRtbF9sb2NhdGlvbiwgdHJhbnNmb3JtZWRfaHRtbCk7XG4gICAgfVxuICB9O1xufVxudmFyIF9fZmlsZW5hbWUgPSB1cmwuZmlsZVVSTFRvUGF0aChpbXBvcnQubWV0YS51cmwpO1xudmFyIF9fZGlybmFtZSA9IHVybC5maWxlVVJMVG9QYXRoKG5ldyBVUkwoXCIuXCIsIGltcG9ydC5tZXRhLnVybCkpO1xuZnVuY3Rpb24gZ2V0X2V4cG9ydF9wYXRoKHBhdGgsIHJvb3QsIHBrZ19qc29uKSB7XG4gIGlmICghcGtnX2pzb24uZXhwb3J0cykgcmV0dXJuIGZhbHNlO1xuICBpZiAodHlwZW9mIHBrZ19qc29uLmV4cG9ydHNbYCR7cGF0aH1gXSA9PT0gXCJvYmplY3RcIikgcmV0dXJuIHRydWU7XG4gIGNvbnN0IF9wYXRoID0gam9pbihyb290LCBcIi4uXCIsIGAke3BrZ19qc29uLmV4cG9ydHNbYCR7cGF0aH1gXX1gKTtcbiAgcmV0dXJuIGV4aXN0c1N5bmMoX3BhdGgpO1xufVxudmFyIGlnbm9yZV9saXN0ID0gW1xuICBcInRvb3RpbHNcIixcbiAgXCJfY2RuLXRlc3RcIixcbiAgXCJfc3BhY2VzLXRlc3RcIixcbiAgXCJfd2Vic2l0ZVwiLFxuICBcImFwcFwiLFxuICBcImF0b21zXCIsXG4gIFwiZmFsbGJhY2tcIixcbiAgXCJpY29uc1wiLFxuICBcImxpdGVcIixcbiAgXCJwcmV2aWV3XCIsXG4gIFwic2ltcGxlZHJvcGRvd25cIixcbiAgXCJzaW1wbGVpbWFnZVwiLFxuICBcInNpbXBsZXRleHRib3hcIixcbiAgXCJzdG9yeWJvb2tcIixcbiAgXCJ0aGVtZVwiLFxuICBcInRpbWVzZXJpZXNcIixcbiAgXCJ0b29sdGlwXCIsXG4gIFwidXBsb2FkXCIsXG4gIFwidXRpbHNcIixcbiAgXCJ3YXNtXCJcbl07XG5mdW5jdGlvbiBnZW5lcmF0ZV9jb21wb25lbnRfaW1wb3J0cygpIHtcbiAgY29uc3QgZXhwb3J0cyA9IHJlYWRkaXJTeW5jKGpvaW4oX19kaXJuYW1lLCBcIi4uXCIsIFwiLi5cIikpLm1hcCgoZGlyKSA9PiB7XG4gICAgaWYgKGlnbm9yZV9saXN0LmluY2x1ZGVzKGRpcikpIHJldHVybiB2b2lkIDA7XG4gICAgaWYgKCFzdGF0U3luYyhqb2luKF9fZGlybmFtZSwgXCIuLlwiLCBcIi4uXCIsIGRpcikpLmlzRGlyZWN0b3J5KCkpIHJldHVybiB2b2lkIDA7XG4gICAgY29uc3QgcGFja2FnZV9qc29uX3BhdGggPSBqb2luKF9fZGlybmFtZSwgXCIuLlwiLCBcIi4uXCIsIGRpciwgXCJwYWNrYWdlLmpzb25cIik7XG4gICAgaWYgKGV4aXN0c1N5bmMocGFja2FnZV9qc29uX3BhdGgpKSB7XG4gICAgICBjb25zdCBwYWNrYWdlX2pzb24gPSBKU09OLnBhcnNlKFxuICAgICAgICByZWFkRmlsZVN5bmMocGFja2FnZV9qc29uX3BhdGgsIFwidXRmOFwiKVxuICAgICAgKTtcbiAgICAgIGNvbnN0IGNvbXBvbmVudCA9IGdldF9leHBvcnRfcGF0aChcIi5cIiwgcGFja2FnZV9qc29uX3BhdGgsIHBhY2thZ2VfanNvbik7XG4gICAgICBjb25zdCBleGFtcGxlID0gZ2V0X2V4cG9ydF9wYXRoKFxuICAgICAgICBcIi4vZXhhbXBsZVwiLFxuICAgICAgICBwYWNrYWdlX2pzb25fcGF0aCxcbiAgICAgICAgcGFja2FnZV9qc29uXG4gICAgICApO1xuICAgICAgY29uc3QgYmFzZSA9IGdldF9leHBvcnRfcGF0aChcIi4vYmFzZVwiLCBwYWNrYWdlX2pzb25fcGF0aCwgcGFja2FnZV9qc29uKTtcbiAgICAgIGlmICghY29tcG9uZW50ICYmICFleGFtcGxlKSByZXR1cm4gdm9pZCAwO1xuICAgICAgcmV0dXJuIHtcbiAgICAgICAgbmFtZTogcGFja2FnZV9qc29uLm5hbWUsXG4gICAgICAgIGNvbXBvbmVudCxcbiAgICAgICAgZXhhbXBsZSxcbiAgICAgICAgYmFzZVxuICAgICAgfTtcbiAgICB9XG4gICAgcmV0dXJuIHZvaWQgMDtcbiAgfSkuZmlsdGVyKCh4KSA9PiB4ICE9PSB2b2lkIDApO1xuICBjb25zdCBpbXBvcnRzID0gZXhwb3J0cy5yZWR1Y2UoKGFjYywgX2V4cG9ydCkgPT4ge1xuICAgIGlmICghX2V4cG9ydCkgcmV0dXJuIGFjYztcbiAgICBjb25zdCBleGFtcGxlID0gX2V4cG9ydC5leGFtcGxlID8gYGV4YW1wbGU6ICgpID0+IGltcG9ydChcIiR7X2V4cG9ydC5uYW1lfS9leGFtcGxlXCIpLFxuYCA6IFwiXCI7XG4gICAgY29uc3QgYmFzZSA9IF9leHBvcnQuYmFzZSA/IGBiYXNlOiAoKSA9PiBpbXBvcnQoXCIke19leHBvcnQubmFtZX0vYmFzZVwiKSxcbmAgOiBcIlwiO1xuICAgIHJldHVybiBgJHthY2N9XCIke19leHBvcnQubmFtZS5yZXBsYWNlKFwiQGdyYWRpby9cIiwgXCJcIil9XCI6IHtcblx0XHRcdCR7YmFzZX1cblx0XHRcdCR7ZXhhbXBsZX1cblx0XHRcdGNvbXBvbmVudDogKCkgPT4gaW1wb3J0KFwiJHtfZXhwb3J0Lm5hbWV9XCIpXG5cdFx0XHR9LFxuYDtcbiAgfSwgXCJcIik7XG4gIHJldHVybiBpbXBvcnRzO1xufVxuZnVuY3Rpb24gbG9hZF92aXJ0dWFsX2NvbXBvbmVudF9sb2FkZXIobW9kZSkge1xuICBjb25zdCBsb2FkZXJfcGF0aCA9IGpvaW4oX19kaXJuYW1lLCBcImNvbXBvbmVudF9sb2FkZXIuanNcIik7XG4gIGxldCBjb21wb25lbnRfbWFwID0gXCJcIjtcbiAgaWYgKG1vZGUgPT09IFwidGVzdFwiKSB7XG4gICAgY29tcG9uZW50X21hcCA9IGBcblx0XHRjb25zdCBjb21wb25lbnRfbWFwID0ge1xuXHRcdFx0XCJ0ZXN0LWNvbXBvbmVudC1vbmVcIjoge1xuXHRcdFx0XHRjb21wb25lbnQ6ICgpID0+IGltcG9ydChcIkBncmFkaW8tdGVzdC90ZXN0LW9uZVwiKSxcblx0XHRcdFx0ZXhhbXBsZTogKCkgPT4gaW1wb3J0KFwiQGdyYWRpby10ZXN0L3Rlc3Qtb25lL2V4YW1wbGVcIilcblx0XHRcdH0sXG5cdFx0XHRcImRhdGFzZXRcIjoge1xuXHRcdFx0XHRjb21wb25lbnQ6ICgpID0+IGltcG9ydChcIkBncmFkaW8tdGVzdC90ZXN0LXR3b1wiKSxcblx0XHRcdFx0ZXhhbXBsZTogKCkgPT4gaW1wb3J0KFwiQGdyYWRpby10ZXN0L3Rlc3QtdHdvL2V4YW1wbGVcIilcblx0XHRcdH0sXG5cdFx0XHRcImltYWdlXCI6IHtcblx0XHRcdFx0Y29tcG9uZW50OiAoKSA9PiBpbXBvcnQoXCJAZ3JhZGlvL2ltYWdlXCIpLFxuXHRcdFx0XHRleGFtcGxlOiAoKSA9PiBpbXBvcnQoXCJAZ3JhZGlvL2ltYWdlL2V4YW1wbGVcIiksXG5cdFx0XHRcdGJhc2U6ICgpID0+IGltcG9ydChcIkBncmFkaW8vaW1hZ2UvYmFzZVwiKVxuXHRcdFx0fSxcblx0XHRcdFwiYXVkaW9cIjoge1xuXHRcdFx0XHRjb21wb25lbnQ6ICgpID0+IGltcG9ydChcIkBncmFkaW8vYXVkaW9cIiksXG5cdFx0XHRcdGV4YW1wbGU6ICgpID0+IGltcG9ydChcIkBncmFkaW8vYXVkaW8vZXhhbXBsZVwiKSxcblx0XHRcdFx0YmFzZTogKCkgPT4gaW1wb3J0KFwiQGdyYWRpby9hdWRpby9iYXNlXCIpXG5cdFx0XHR9LFxuXHRcdFx0XCJ2aWRlb1wiOiB7XG5cdFx0XHRcdGNvbXBvbmVudDogKCkgPT4gaW1wb3J0KFwiQGdyYWRpby92aWRlb1wiKSxcblx0XHRcdFx0ZXhhbXBsZTogKCkgPT4gaW1wb3J0KFwiQGdyYWRpby92aWRlby9leGFtcGxlXCIpLFxuXHRcdFx0XHRiYXNlOiAoKSA9PiBpbXBvcnQoXCJAZ3JhZGlvL3ZpZGVvL2Jhc2VcIilcblx0XHRcdH0sXG5cdFx0XHQvLyBcInRlc3QtY29tcG9uZW50LW9uZVwiOiB7XG5cdFx0XHQvLyBcdGNvbXBvbmVudDogKCkgPT4gaW1wb3J0KFwiQGdyYWRpby10ZXN0L3Rlc3Qtb25lXCIpLFxuXHRcdFx0Ly8gXHRleGFtcGxlOiAoKSA9PiBpbXBvcnQoXCJAZ3JhZGlvLXRlc3QvdGVzdC1vbmUvZXhhbXBsZVwiKVxuXHRcdFx0Ly8gfSxcblx0XHR9O1xuXHRcdGA7XG4gIH0gZWxzZSB7XG4gICAgY29tcG9uZW50X21hcCA9IGBcblx0XHRjb25zdCBjb21wb25lbnRfbWFwID0ge1xuXHRcdFx0JHtnZW5lcmF0ZV9jb21wb25lbnRfaW1wb3J0cygpfVxuXHRcdH07XG5cdFx0YDtcbiAgfVxuICByZXR1cm4gYCR7Y29tcG9uZW50X21hcH1cblxuJHtyZWFkRmlsZVN5bmMobG9hZGVyX3BhdGgsIFwidXRmOFwiKX1gO1xufVxuZnVuY3Rpb24gaW5qZWN0X2NvbXBvbmVudF9sb2FkZXIoeyBtb2RlIH0pIHtcbiAgY29uc3Qgdl9pZCA9IFwidmlydHVhbDpjb21wb25lbnQtbG9hZGVyXCI7XG4gIGNvbnN0IHJlc29sdmVkX3ZfaWQgPSBcIlxcMFwiICsgdl9pZDtcbiAgcmV0dXJuIHtcbiAgICBuYW1lOiBcImluamVjdC1jb21wb25lbnQtbG9hZGVyXCIsXG4gICAgZW5mb3JjZTogXCJwcmVcIixcbiAgICByZXNvbHZlSWQoaWQpIHtcbiAgICAgIGlmIChpZCA9PT0gdl9pZCkgcmV0dXJuIHJlc29sdmVkX3ZfaWQ7XG4gICAgfSxcbiAgICBsb2FkKGlkKSB7XG4gICAgICB0aGlzLmFkZFdhdGNoRmlsZShqb2luKF9fZGlybmFtZSwgXCJjb21wb25lbnRfbG9hZGVyLmpzXCIpKTtcbiAgICAgIGlmIChpZCA9PT0gcmVzb2x2ZWRfdl9pZCkge1xuICAgICAgICByZXR1cm4gbG9hZF92aXJ0dWFsX2NvbXBvbmVudF9sb2FkZXIobW9kZSk7XG4gICAgICB9XG4gICAgfVxuICB9O1xufVxuZnVuY3Rpb24gcmVzb2x2ZV9zdmVsdGUoZW5hYmxlKSB7XG4gIHJldHVybiB7XG4gICAgZW5mb3JjZTogXCJwcmVcIixcbiAgICBuYW1lOiBcInJlc29sdmUtc3ZlbHRlXCIsXG4gICAgYXN5bmMgcmVzb2x2ZUlkKGlkKSB7XG4gICAgICBpZiAoIWVuYWJsZSkgcmV0dXJuO1xuICAgICAgaWYgKGlkID09PSBcIi4vc3ZlbHRlL3N2ZWx0ZS5qc1wiIHx8IGlkID09PSBcInN2ZWx0ZVwiIHx8IGlkID09PSBcInN2ZWx0ZS9pbnRlcm5hbFwiKSB7XG4gICAgICAgIGNvbnN0IG1vZCA9IGpvaW4oXG4gICAgICAgICAgX19kaXJuYW1lLFxuICAgICAgICAgIFwiLi5cIixcbiAgICAgICAgICBcIi4uXCIsXG4gICAgICAgICAgXCIuLlwiLFxuICAgICAgICAgIFwiZ3JhZGlvXCIsXG4gICAgICAgICAgXCJ0ZW1wbGF0ZXNcIixcbiAgICAgICAgICBcImZyb250ZW5kXCIsXG4gICAgICAgICAgXCJhc3NldHNcIixcbiAgICAgICAgICBcInN2ZWx0ZVwiLFxuICAgICAgICAgIFwic3ZlbHRlLmpzXCJcbiAgICAgICAgKTtcbiAgICAgICAgcmV0dXJuIHsgaWQ6IG1vZCwgZXh0ZXJuYWw6IFwiYWJzb2x1dGVcIiB9O1xuICAgICAgfVxuICAgIH1cbiAgfTtcbn1cbmZ1bmN0aW9uIG1vY2tfbW9kdWxlcygpIHtcbiAgY29uc3Qgdl9pZF8xID0gXCJAZ3JhZGlvLXRlc3QvdGVzdC1vbmVcIjtcbiAgY29uc3Qgdl9pZF8yID0gXCJAZ3JhZGlvLXRlc3QvdGVzdC10d29cIjtcbiAgY29uc3Qgdl9pZF8xX2V4YW1wbGUgPSBcIkBncmFkaW8tdGVzdC90ZXN0LW9uZS9leGFtcGxlXCI7XG4gIGNvbnN0IHZfaWRfMl9leGFtcGxlID0gXCJAZ3JhZGlvLXRlc3QvdGVzdC10d28vZXhhbXBsZVwiO1xuICBjb25zdCByZXNvbHZlZF92X2lkID0gXCJcXDBcIiArIHZfaWRfMTtcbiAgY29uc3QgcmVzb2x2ZWRfdl9pZF8yID0gXCJcXDBcIiArIHZfaWRfMjtcbiAgY29uc3QgcmVzb2x2ZWRfdl9pZF8xX2V4YW1wbGUgPSBcIlxcMFwiICsgdl9pZF8xX2V4YW1wbGU7XG4gIGNvbnN0IHJlc29sdmVkX3ZfaWRfMl9leGFtcGxlID0gXCJcXDBcIiArIHZfaWRfMl9leGFtcGxlO1xuICBjb25zdCBmYWxsYmFja19leGFtcGxlID0gXCJAZ3JhZGlvL2ZhbGxiYWNrL2V4YW1wbGVcIjtcbiAgY29uc3QgcmVzb2x2ZWRfZmFsbGJhY2tfZXhhbXBsZSA9IFwiXFwwXCIgKyBmYWxsYmFja19leGFtcGxlO1xuICByZXR1cm4ge1xuICAgIG5hbWU6IFwibW9jay1tb2R1bGVzXCIsXG4gICAgZW5mb3JjZTogXCJwcmVcIixcbiAgICByZXNvbHZlSWQoaWQpIHtcbiAgICAgIGlmIChpZCA9PT0gdl9pZF8xKSByZXR1cm4gcmVzb2x2ZWRfdl9pZDtcbiAgICAgIGlmIChpZCA9PT0gdl9pZF8yKSByZXR1cm4gcmVzb2x2ZWRfdl9pZF8yO1xuICAgICAgaWYgKGlkID09PSB2X2lkXzFfZXhhbXBsZSkgcmV0dXJuIHJlc29sdmVkX3ZfaWRfMV9leGFtcGxlO1xuICAgICAgaWYgKGlkID09PSB2X2lkXzJfZXhhbXBsZSkgcmV0dXJuIHJlc29sdmVkX3ZfaWRfMl9leGFtcGxlO1xuICAgICAgaWYgKGlkID09PSBmYWxsYmFja19leGFtcGxlKSByZXR1cm4gcmVzb2x2ZWRfZmFsbGJhY2tfZXhhbXBsZTtcbiAgICB9LFxuICAgIGxvYWQoaWQpIHtcbiAgICAgIGlmIChpZCA9PT0gcmVzb2x2ZWRfdl9pZCB8fCBpZCA9PT0gcmVzb2x2ZWRfdl9pZF8yIHx8IGlkID09PSByZXNvbHZlZF92X2lkXzFfZXhhbXBsZSB8fCBpZCA9PT0gcmVzb2x2ZWRfdl9pZF8yX2V4YW1wbGUgfHwgaWQgPT09IHJlc29sdmVkX2ZhbGxiYWNrX2V4YW1wbGUpIHtcbiAgICAgICAgcmV0dXJuIGBleHBvcnQgZGVmYXVsdCB7fWA7XG4gICAgICB9XG4gICAgfVxuICB9O1xufVxuZXhwb3J0IHtcbiAgZ2VuZXJhdGVfY2RuX2VudHJ5LFxuICBnZW5lcmF0ZV9kZXZfZW50cnksXG4gIGhhbmRsZV9jZV9jc3MsXG4gIGluamVjdF9jb21wb25lbnRfbG9hZGVyLFxuICBpbmplY3RfZWpzLFxuICBtb2NrX21vZHVsZXMsXG4gIHJlc29sdmVfc3ZlbHRlXG59O1xuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUF3VSxTQUFTLGlCQUFpQjtBQUNsVyxTQUFTLG9CQUFvQjs7O0FDQTdCLFNBQVMsYUFBYTtBQUN0QixTQUFTLFlBQVk7QUFFckIsWUFBWSxTQUFTO0FBQ3JCLFNBQVMsYUFBYSxZQUFZLGNBQWMsZ0JBQWdCO0FBTHdJLElBQU0sMkNBQTJDO0FBMkh6UCxJQUFJLGFBQWlCLGtCQUFjLHdDQUFlO0FBQ2xELElBQUksWUFBZ0Isa0JBQWMsSUFBSSxJQUFJLEtBQUssd0NBQWUsQ0FBQztBQUMvRCxTQUFTLGdCQUFnQixNQUFNLE1BQU0sVUFBVTtBQUM3QyxNQUFJLENBQUMsU0FBUztBQUFTLFdBQU87QUFDOUIsTUFBSSxPQUFPLFNBQVMsUUFBUSxHQUFHLElBQUksRUFBRSxNQUFNO0FBQVUsV0FBTztBQUM1RCxRQUFNLFFBQVEsS0FBSyxNQUFNLE1BQU0sR0FBRyxTQUFTLFFBQVEsR0FBRyxJQUFJLEVBQUUsQ0FBQyxFQUFFO0FBQy9ELFNBQU8sV0FBVyxLQUFLO0FBQ3pCO0FBQ0EsSUFBSSxjQUFjO0FBQUEsRUFDaEI7QUFBQSxFQUNBO0FBQUEsRUFDQTtBQUFBLEVBQ0E7QUFBQSxFQUNBO0FBQUEsRUFDQTtBQUFBLEVBQ0E7QUFBQSxFQUNBO0FBQUEsRUFDQTtBQUFBLEVBQ0E7QUFBQSxFQUNBO0FBQUEsRUFDQTtBQUFBLEVBQ0E7QUFBQSxFQUNBO0FBQUEsRUFDQTtBQUFBLEVBQ0E7QUFBQSxFQUNBO0FBQUEsRUFDQTtBQUFBLEVBQ0E7QUFBQSxFQUNBO0FBQ0Y7QUFDQSxTQUFTLDZCQUE2QjtBQUNwQyxRQUFNLFVBQVUsWUFBWSxLQUFLLFdBQVcsTUFBTSxJQUFJLENBQUMsRUFBRSxJQUFJLENBQUMsUUFBUTtBQUNwRSxRQUFJLFlBQVksU0FBUyxHQUFHO0FBQUcsYUFBTztBQUN0QyxRQUFJLENBQUMsU0FBUyxLQUFLLFdBQVcsTUFBTSxNQUFNLEdBQUcsQ0FBQyxFQUFFLFlBQVk7QUFBRyxhQUFPO0FBQ3RFLFVBQU0sb0JBQW9CLEtBQUssV0FBVyxNQUFNLE1BQU0sS0FBSyxjQUFjO0FBQ3pFLFFBQUksV0FBVyxpQkFBaUIsR0FBRztBQUNqQyxZQUFNLGVBQWUsS0FBSztBQUFBLFFBQ3hCLGFBQWEsbUJBQW1CLE1BQU07QUFBQSxNQUN4QztBQUNBLFlBQU0sWUFBWSxnQkFBZ0IsS0FBSyxtQkFBbUIsWUFBWTtBQUN0RSxZQUFNLFVBQVU7QUFBQSxRQUNkO0FBQUEsUUFDQTtBQUFBLFFBQ0E7QUFBQSxNQUNGO0FBQ0EsWUFBTSxPQUFPLGdCQUFnQixVQUFVLG1CQUFtQixZQUFZO0FBQ3RFLFVBQUksQ0FBQyxhQUFhLENBQUM7QUFBUyxlQUFPO0FBQ25DLGFBQU87QUFBQSxRQUNMLE1BQU0sYUFBYTtBQUFBLFFBQ25CO0FBQUEsUUFDQTtBQUFBLFFBQ0E7QUFBQSxNQUNGO0FBQUEsSUFDRjtBQUNBLFdBQU87QUFBQSxFQUNULENBQUMsRUFBRSxPQUFPLENBQUMsTUFBTSxNQUFNLE1BQU07QUFDN0IsUUFBTSxVQUFVLFFBQVEsT0FBTyxDQUFDLEtBQUssWUFBWTtBQUMvQyxRQUFJLENBQUM7QUFBUyxhQUFPO0FBQ3JCLFVBQU0sVUFBVSxRQUFRLFVBQVUsMEJBQTBCLFFBQVEsSUFBSTtBQUFBLElBQ3hFO0FBQ0EsVUFBTSxPQUFPLFFBQVEsT0FBTyx1QkFBdUIsUUFBUSxJQUFJO0FBQUEsSUFDL0Q7QUFDQSxXQUFPLEdBQUcsR0FBRyxJQUFJLFFBQVEsS0FBSyxRQUFRLFlBQVksRUFBRSxDQUFDO0FBQUEsS0FDcEQsSUFBSTtBQUFBLEtBQ0osT0FBTztBQUFBLDhCQUNrQixRQUFRLElBQUk7QUFBQTtBQUFBO0FBQUEsRUFHeEMsR0FBRyxFQUFFO0FBQ0wsU0FBTztBQUNUO0FBQ0EsU0FBUyw4QkFBOEIsTUFBTTtBQUMzQyxRQUFNLGNBQWMsS0FBSyxXQUFXLHFCQUFxQjtBQUN6RCxNQUFJLGdCQUFnQjtBQUNwQixNQUFJLFNBQVMsUUFBUTtBQUNuQixvQkFBZ0I7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxFQStCbEIsT0FBTztBQUNMLG9CQUFnQjtBQUFBO0FBQUEsS0FFZiwyQkFBMkIsQ0FBQztBQUFBO0FBQUE7QUFBQSxFQUcvQjtBQUNBLFNBQU8sR0FBRyxhQUFhO0FBQUE7QUFBQSxFQUV2QixhQUFhLGFBQWEsTUFBTSxDQUFDO0FBQ25DO0FBQ0EsU0FBUyx3QkFBd0IsRUFBRSxLQUFLLEdBQUc7QUFDekMsUUFBTSxPQUFPO0FBQ2IsUUFBTSxnQkFBZ0IsT0FBTztBQUM3QixTQUFPO0FBQUEsSUFDTCxNQUFNO0FBQUEsSUFDTixTQUFTO0FBQUEsSUFDVCxVQUFVLElBQUk7QUFDWixVQUFJLE9BQU87QUFBTSxlQUFPO0FBQUEsSUFDMUI7QUFBQSxJQUNBLEtBQUssSUFBSTtBQUNQLFdBQUssYUFBYSxLQUFLLFdBQVcscUJBQXFCLENBQUM7QUFDeEQsVUFBSSxPQUFPLGVBQWU7QUFDeEIsZUFBTyw4QkFBOEIsSUFBSTtBQUFBLE1BQzNDO0FBQUEsSUFDRjtBQUFBLEVBQ0Y7QUFDRjs7O0FEM1BBLElBQU8sc0JBQVEsYUFBYSxDQUFDLEVBQUUsS0FBSyxPQUFPO0FBQUEsRUFDMUMsU0FBUyxDQUFDLFVBQVUsR0FBRyx3QkFBd0IsRUFBRSxLQUFLLENBQUMsQ0FBQztBQUFBLEVBQ3hELFNBQVM7QUFBQSxJQUNSLFlBQVksQ0FBQyxRQUFRO0FBQUEsRUFDdEI7QUFDRCxFQUFFOyIsCiAgIm5hbWVzIjogW10KfQo=
diff --git a/js/accordion/CHANGELOG.md b/js/accordion/CHANGELOG.md
index 04b6b2c25c100..3d3d16f3fd186 100644
--- a/js/accordion/CHANGELOG.md
+++ b/js/accordion/CHANGELOG.md
@@ -1,5 +1,55 @@
 # @gradio/accordion
 
+## 0.3.23-beta.5
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/atoms@0.9.0-beta.5
+- @gradio/column@0.2.0-beta.2
+
+## 0.3.23-beta.4
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+- @gradio/column@0.2.0-beta.2
+
+## 0.3.23-beta.3
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/column@0.2.0-beta.1
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.3.23-beta.2
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+
+## 0.3.23-beta.2
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+- @gradio/column@0.2.0-beta.0
+
+## 0.3.23-beta.1
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/column@0.2.0-beta.0
+
+## 0.3.23-beta.0
+
 ## 0.3.23
 
 ### Fixes
@@ -8,10 +58,10 @@
 
 ### Dependency updates
 
-- @gradio/utils@0.6.1
-- @gradio/statustracker@0.7.6
-- @gradio/atoms@0.8.1
-- @gradio/column@0.1.4
+- @gradio/utils@0.7.0-beta.0
+- @gradio/statustracker@0.8.0-beta.0
+- @gradio/atoms@0.8.1-beta.0
+- @gradio/column@0.2.0-beta.0
 
 ## 0.3.22
 
diff --git a/js/accordion/package.json b/js/accordion/package.json
index 5d7c8fe34cdf7..d9ac889dc4505 100644
--- a/js/accordion/package.json
+++ b/js/accordion/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/accordion",
-	"version": "0.3.23",
+	"version": "0.3.23-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
@@ -10,7 +10,7 @@
 		"@gradio/atoms": "workspace:^",
 		"@gradio/column": "workspace:^",
 		"@gradio/statustracker": "workspace:^",
-		"@gradio/utils": "workspace:0.6.1"
+		"@gradio/utils": "workspace:0.7.0-beta.2"
 	},
 	"peerDependencies": {
 		"svelte": "^4.0.0"
diff --git a/js/annotatedimage/CHANGELOG.md b/js/annotatedimage/CHANGELOG.md
index d8dedb718a49e..44d681a4571ec 100644
--- a/js/annotatedimage/CHANGELOG.md
+++ b/js/annotatedimage/CHANGELOG.md
@@ -1,24 +1,94 @@
 # @gradio/annotatedimage
 
-## 0.7.2
+## 0.8.0-beta.7
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.7
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.8.0-beta.6
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+- @gradio/client@1.6.0-beta.4
+- @gradio/upload@0.13.0-beta.6
+
+## 0.8.0-beta.5
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.5
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.8.0-beta.4
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/upload@0.13.0-beta.4
+- @gradio/wasm@0.14.0-beta.3
+
+## 0.8.0-beta.3
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.3
+- @gradio/client@1.6.0-beta.3
+
+## 0.8.0-beta.2
+
+### Features
+
+- [#9250](https://github.com/gradio-app/gradio/pull/9250) [`350b0a5`](https://github.com/gradio-app/gradio/commit/350b0a5cafb9176f914f62e7c90de51d4352cc77) - Improve Icon Button consistency.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/upload@0.13.0-beta.2
+- @gradio/wasm@0.14.0-beta.2
+- @gradio/client@1.6.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.7.2-beta.1
 
 ### Features
 
 - [#9187](https://github.com/gradio-app/gradio/pull/9187) [`5bf00b7`](https://github.com/gradio-app/gradio/commit/5bf00b7524ebf399b48719120a49d15bb21bd65c) - make all component SSR compatible.  Thanks @pngwn!
 
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/client@1.6.0-beta.1
+- @gradio/upload@0.12.4-beta.1
+- @gradio/wasm@0.13.1-beta.1
+
+## 0.7.2-beta.0
+
 ### Fixes
 
 - [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types.  Thanks @pngwn!
 
 ### Dependency updates
 
-- @gradio/utils@0.6.1
-- @gradio/statustracker@0.7.6
-- @gradio/atoms@0.8.1
-- @gradio/icons@0.7.2
-- @gradio/wasm@0.13.1
-- @gradio/client@1.5.2
-- @gradio/upload@0.12.4
+- @gradio/utils@0.7.0-beta.0
+- @gradio/statustracker@0.8.0-beta.0
+- @gradio/atoms@0.8.1-beta.0
+- @gradio/client@1.6.0-beta.0
+- @gradio/icons@0.8.0-beta.0
+- @gradio/upload@0.12.4-beta.0
+- @gradio/wasm@0.13.1-beta.0
 
 ## 0.7.1
 
diff --git a/js/annotatedimage/Index.svelte b/js/annotatedimage/Index.svelte
index ec6b381517587..1b031e8946caa 100644
--- a/js/annotatedimage/Index.svelte
+++ b/js/annotatedimage/Index.svelte
@@ -2,7 +2,13 @@
 	import type { Gradio, SelectData } from "@gradio/utils";
 
 	import { onMount } from "svelte";
-	import { Block, BlockLabel, Empty, IconButton } from "@gradio/atoms";
+	import {
+		Block,
+		BlockLabel,
+		Empty,
+		IconButton,
+		IconButtonWrapper
+	} from "@gradio/atoms";
 	import { Image, Maximize, Minimize } from "@gradio/icons";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
@@ -159,7 +165,7 @@
 			<Empty size="large" unpadded_box={true}><Image /></Empty>
 		{:else}
 			<div class="image-container" bind:this={image_container}>
-				<div class="icon-buttons">
+				<IconButtonWrapper>
 					{#if !is_full_screen && show_fullscreen_button}
 						<IconButton
 							Icon={Maximize}
@@ -175,7 +181,7 @@
 							on:click={toggle_full_screen}
 						/>
 					{/if}
-				</div>
+				</IconButtonWrapper>
 
 				<img
 					class="base-image"
@@ -286,13 +292,4 @@
 		border-radius: var(--radius-sm);
 		padding: var(--spacing-sm);
 	}
-
-	.icon-buttons {
-		display: flex;
-		position: absolute;
-		top: 6px;
-		right: 6px;
-		gap: var(--size-1);
-		z-index: 1;
-	}
 </style>
diff --git a/js/annotatedimage/package.json b/js/annotatedimage/package.json
index 9a13378ba2621..dc42156b12c8b 100644
--- a/js/annotatedimage/package.json
+++ b/js/annotatedimage/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/annotatedimage",
-	"version": "0.7.2",
+	"version": "0.8.0-beta.7",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/app/CHANGELOG.md b/js/app/CHANGELOG.md
index cd14bfd0c1729..513cbfe3b4c78 100644
--- a/js/app/CHANGELOG.md
+++ b/js/app/CHANGELOG.md
@@ -1,6 +1,78 @@
 # @self/app
 
-## 1.40.1
+## 1.41.0-beta.7
+
+### Features
+
+- [#9590](https://github.com/gradio-app/gradio/pull/9590) [`e853c41`](https://github.com/gradio-app/gradio/commit/e853c413583d91186aef3aceb0849d0ec0494834) - SSR e2e + fixes.  Thanks @pngwn!
+- [#9482](https://github.com/gradio-app/gradio/pull/9482) [`bd6c5f2`](https://github.com/gradio-app/gradio/commit/bd6c5f237b0631d86273c7684c3bf2b1011992a3) - Fix custom component CLI on main/5.0.  Thanks @freddyaboulton!
+- [#9576](https://github.com/gradio-app/gradio/pull/9576) [`430a26a`](https://github.com/gradio-app/gradio/commit/430a26a4fbcbabb5e9ddb6173bf658a00960e88e) - Fix reload mode.  Thanks @freddyaboulton!
+- [#9592](https://github.com/gradio-app/gradio/pull/9592) [`24fe222`](https://github.com/gradio-app/gradio/commit/24fe222fd17583d04dd31aebf60b649224e8382f) - Fix favicon in ssr mode.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/core@0.1.0-beta.6
+- @self/build@0.1.0-beta.3
+
+## 1.41.0-beta.6
+
+### Dependency updates
+
+- @gradio/client@1.6.0-beta.4
+- @gradio/core@0.1.0-beta.5
+
+## 1.41.0-beta.5
+
+### Features
+
+- [#9428](https://github.com/gradio-app/gradio/pull/9428) [`a17c7b6`](https://github.com/gradio-app/gradio/commit/a17c7b6e01bcee88b57a5231d0ff876f79adb8b1) - Ensure media queries work for SSR mode.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/core@0.1.0-beta.4
+
+## 1.41.0-beta.4
+
+### Dependency updates
+
+- @gradio/wasm@0.14.0-beta.3
+- @gradio/core@0.1.0-beta.4
+
+## 1.41.0-beta.3
+
+### Features
+
+- [#9427](https://github.com/gradio-app/gradio/pull/9427) [`b672deb`](https://github.com/gradio-app/gradio/commit/b672deb240e1934f3cde6d257dbe93e3fa8b1857) - fix css.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/core@0.1.0-beta.3
+
+## 1.41.0-beta.2
+
+### Features
+
+- [#9412](https://github.com/gradio-app/gradio/pull/9412) [`c2c2fd9`](https://github.com/gradio-app/gradio/commit/c2c2fd989348f826566773c07c0e0bda200199ff) - fix SSR apps on spaces.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/client@1.6.0-beta.3
+- @gradio/core@0.1.0-beta.3
+
+## 1.41.0-beta.1
+
+### Features
+
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/wasm@0.14.0-beta.2
+- @gradio/client@1.6.0-beta.2
+- @gradio/core@0.1.0-beta.2
+- @self/build@0.1.0-beta.2
+
+## 1.40.1-beta.0
 
 ### Fixes
 
diff --git a/js/app/after_build.js b/js/app/after_build.js
new file mode 100644
index 0000000000000..18219e7f7b5e8
--- /dev/null
+++ b/js/app/after_build.js
@@ -0,0 +1,11 @@
+import { writeFileSync } from "fs";
+import { resolve } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = fileURLToPath(import.meta.url);
+const out_path = resolve(__dirname, "../../../gradio/templates/node/build");
+
+writeFileSync(
+	resolve(out_path, "package.json"),
+	JSON.stringify({ name: "gradio-server-app", type: "module" }, null, 2)
+);
diff --git a/js/app/package.json b/js/app/package.json
index 275239d0406c5..9e20ed82c6123 100644
--- a/js/app/package.json
+++ b/js/app/package.json
@@ -1,10 +1,10 @@
 {
 	"name": "@self/app",
-	"version": "1.40.1",
+	"version": "1.41.0-beta.7",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build",
+		"build": "vite build && node after_build.js",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -22,5 +22,14 @@
 		"typescript": "^5.0.0",
 		"vite": "^5.0.3"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@gradio/client": "workspace:^",
+		"@gradio/core": "workspace:^",
+		"@gradio/theme": "workspace:^",
+		"@gradio/wasm": "workspace:^",
+		"@huggingface/space-header": "^1.0.3",
+		"@self/build": "workspace:^",
+		"@sveltejs/adapter-node": "^5.2.2"
+	}
 }
diff --git a/js/app/postcss.config.js b/js/app/postcss.config.js
new file mode 100644
index 0000000000000..f053ebf7976e3
--- /dev/null
+++ b/js/app/postcss.config.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/js/app/src/app.html b/js/app/src/app.html
index 77a5ff52c9239..bccb5e7330828 100644
--- a/js/app/src/app.html
+++ b/js/app/src/app.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="icon" href="/favicon.ico" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
diff --git a/js/app/src/routes/+layout.server.ts b/js/app/src/routes/+layout.server.ts
new file mode 100644
index 0000000000000..a4e816fa45d65
--- /dev/null
+++ b/js/app/src/routes/+layout.server.ts
@@ -0,0 +1,13 @@
+import { redirect } from "@sveltejs/kit";
+import { dev } from "$app/environment";
+
+export function load({ url }): void {
+	const { pathname, search } = url;
+
+	if (dev && url.pathname.startsWith("/theme")) {
+		redirect(308, `http://127.0.0.1:7860${pathname}${search}`);
+	}
+	if (url.pathname !== "/") {
+		redirect(308, "/");
+	}
+}
diff --git a/js/app/src/routes/+layout.svelte b/js/app/src/routes/+layout.svelte
new file mode 100644
index 0000000000000..c9fe895a12625
--- /dev/null
+++ b/js/app/src/routes/+layout.svelte
@@ -0,0 +1,9 @@
+<script>
+	import "@gradio/theme/reset.css";
+	import "@gradio/theme/global.css";
+	import "@gradio/theme/pollen.css";
+	import "@gradio/theme/typography.css";
+	import "./svelte_init";
+</script>
+
+<slot></slot>
diff --git a/js/app/src/routes/+page.svelte b/js/app/src/routes/+page.svelte
deleted file mode 100644
index 33d0736b34672..0000000000000
--- a/js/app/src/routes/+page.svelte
+++ /dev/null
@@ -1,4 +0,0 @@
-<h1>Welcome to SvelteKit</h1>
-<p>
-	Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
-</p>
diff --git a/js/app/src/routes/[...catchall]/+page.server.ts b/js/app/src/routes/[...catchall]/+page.server.ts
new file mode 100644
index 0000000000000..480293cda26f2
--- /dev/null
+++ b/js/app/src/routes/[...catchall]/+page.server.ts
@@ -0,0 +1,19 @@
+import { dev } from "$app/environment";
+
+export async function load({ request }: { request: Request }): Promise<{
+	server: string;
+	port: string;
+	local_dev_mode: string | undefined;
+}> {
+	const server =
+		request.headers.get("x-gradio-server") || "http://127.0.0.1:7860";
+	const port = request.headers.get("x-gradio-port") || "7860";
+	const local_dev_mode =
+		request.headers.get("x-gradio-local-dev-mode") || dev ? "true" : undefined;
+
+	return {
+		server: server,
+		port: port,
+		local_dev_mode: local_dev_mode
+	};
+}
diff --git a/js/app/src/routes/[...catchall]/+page.svelte b/js/app/src/routes/[...catchall]/+page.svelte
new file mode 100644
index 0000000000000..5e348ddfb5f79
--- /dev/null
+++ b/js/app/src/routes/[...catchall]/+page.svelte
@@ -0,0 +1,363 @@
+<script context="module" lang="ts">
+	import { writable } from "svelte/store";
+	import { mount_css } from "@gradio/core";
+
+	import type { Client as ClientType } from "@gradio/client";
+
+	import type { ComponentMeta, Dependency, LayoutNode } from "@gradio/core";
+	declare let GRADIO_VERSION: string;
+
+	declare let BUILD_MODE: string;
+	interface Config {
+		auth_required?: true;
+		auth_message: string;
+		components: ComponentMeta[];
+		css: string | null;
+		js: string | null;
+		head: string | null;
+		dependencies: Dependency[];
+		dev_mode: boolean;
+		enable_queue: boolean;
+		layout: LayoutNode;
+		mode: "blocks" | "interface";
+		root: string;
+		theme: string;
+		title: string;
+		version: string;
+		space_id: string | null;
+		is_colab: boolean;
+		show_api: boolean;
+		stylesheets?: string[];
+		path: string;
+		app_id?: string;
+		fill_height?: boolean;
+		fill_width?: boolean;
+		theme_hash?: number;
+		username: string | null;
+	}
+
+	let id = -1;
+
+	function create_intersection_store(): {
+		register: (n: number, el: HTMLDivElement) => void;
+		subscribe: (typeof intersecting)["subscribe"];
+	} {
+		const intersecting = writable<Record<string, boolean>>({});
+
+		const els = new Map<HTMLDivElement, number>();
+
+		const observer = new IntersectionObserver((entries) => {
+			entries.forEach((entry) => {
+				if (entry.isIntersecting) {
+					let _el: number | undefined = els.get(entry.target as HTMLDivElement);
+					if (_el !== undefined)
+						intersecting.update((s) => ({ ...s, [_el as number]: true }));
+				}
+			});
+		});
+
+		function register(_id: number, el: HTMLDivElement): void {
+			els.set(el, _id);
+			observer.observe(el);
+		}
+
+		return { register, subscribe: intersecting.subscribe };
+	}
+</script>
+
+<script lang="ts">
+	import { onMount, createEventDispatcher, onDestroy } from "svelte";
+	import type { SpaceStatus } from "@gradio/client";
+	import { Embed } from "@gradio/core";
+	import type { ThemeMode } from "@gradio/core";
+	import { StatusTracker } from "@gradio/statustracker";
+	import { _ } from "svelte-i18n";
+	import { setupi18n } from "@gradio/core";
+	import { Client } from "@gradio/client";
+	import { page } from "$app/stores";
+
+	import { init } from "@huggingface/space-header";
+	import { browser } from "$app/environment";
+
+	setupi18n();
+
+	const dispatch = createEventDispatcher();
+	export let data;
+
+	export let autoscroll = false;
+	export let version = GRADIO_VERSION;
+	export let initial_height: string;
+	export let app_mode = true;
+	export let is_embed = false;
+	export let theme_mode: ThemeMode | null = "system";
+	export let control_page_title = true;
+	export let container: boolean;
+	let stream: EventSource;
+
+	// These utilities are exported to be injectable for the Wasm version.
+
+	// export let Client: typeof ClientType;
+
+	export let space: string | null;
+	// export let host: string | null;
+	// export let src: string | null;
+
+	let _id = id++;
+
+	let loader_status: "pending" | "error" | "complete" | "generating" =
+		"complete";
+	let app_id: string | null = null;
+	let wrapper: HTMLDivElement;
+	let ready = false;
+	let render_complete = false;
+	$: config = data.config;
+	let loading_text = $_("common.loading") + "...";
+	let active_theme_mode: ThemeMode;
+	let intersecting: ReturnType<typeof create_intersection_store> = {
+		register: () => {},
+		subscribe: writable({}).subscribe
+	};
+
+	$: if (config?.app_id) {
+		app_id = config.app_id;
+	}
+
+	let status: SpaceStatus = {
+		message: "",
+		load_status: "pending",
+		status: "sleeping",
+		detail: "SLEEPING"
+	};
+
+	let app: ClientType = data.app;
+	let css_ready = false;
+	function handle_status(_status: SpaceStatus): void {
+		status = _status;
+	}
+	//@ts-ignore
+
+	let gradio_dev_mode = "";
+
+	onMount(async () => {
+		active_theme_mode = handle_theme_mode(wrapper);
+
+		//@ts-ignore
+		config = data.config;
+		window.gradio_config = config;
+		window.gradio_config = data.config;
+		config = data.config;
+
+		if (!app.config) {
+			throw new Error("Could not resolve app config");
+		}
+
+		window.__gradio_space__ = config.space_id;
+		gradio_dev_mode = window?.__GRADIO_DEV__;
+
+		status = {
+			message: "",
+			load_status: "complete",
+			status: "running",
+			detail: "RUNNING"
+		};
+
+		css_ready = true;
+		window.__is_colab__ = config.is_colab;
+
+		dispatch("loaded");
+
+		if (config.dev_mode) {
+			setTimeout(() => {
+				const { host } = new URL(data.api_url);
+				let url = new URL(`http://${host}${app.api_prefix}/dev/reload`);
+				stream = new EventSource(url);
+				stream.addEventListener("error", async (e) => {
+					new_message_fn("Error reloading app", "error");
+					// @ts-ignore
+					console.error(JSON.parse(e.data));
+				});
+				stream.addEventListener("reload", async (event) => {
+					app.close();
+					app = await Client.connect(data.api_url, {
+						status_callback: handle_status,
+						with_null_state: true,
+						events: ["data", "log", "status", "render"]
+					});
+
+					if (!app.config) {
+						throw new Error("Could not resolve app config");
+					}
+
+					config = app.config;
+					window.__gradio_space__ = config.space_id;
+				});
+			}, 200);
+		}
+	});
+
+	let new_message_fn: (message: string, type: string) => void;
+
+	onMount(async () => {
+		intersecting = create_intersection_store();
+		intersecting.register(_id, wrapper);
+	});
+
+	$: if (render_complete) {
+		wrapper.dispatchEvent(
+			new CustomEvent("render", {
+				bubbles: true,
+				cancelable: false,
+				composed: true
+			})
+		);
+	}
+
+	$: app?.config &&
+		browser &&
+		mount_space_header(app?.config?.space_id, is_embed);
+	let spaceheader: HTMLElement | undefined;
+
+	async function mount_space_header(
+		space_id: string | null | undefined,
+		is_embed: boolean
+	): Promise<void> {
+		if (space_id && !is_embed && window.self === window.top) {
+			if (spaceheader) {
+				spaceheader.remove();
+				spaceheader = undefined;
+			}
+			const header = await init(space_id);
+			if (header) spaceheader = header.element;
+		}
+	}
+
+	onDestroy(() => {
+		spaceheader?.remove();
+	});
+
+	function handle_theme_mode(target: HTMLDivElement): "light" | "dark" {
+		let new_theme_mode: ThemeMode;
+
+		const url = new URL(window.location.toString());
+		const url_color_mode: ThemeMode | null = url.searchParams.get(
+			"__theme"
+		) as ThemeMode | null;
+		new_theme_mode = theme_mode || url_color_mode || "system";
+
+		if (new_theme_mode === "dark" || new_theme_mode === "light") {
+			apply_theme(target, new_theme_mode);
+		} else {
+			new_theme_mode = sync_system_theme(target);
+		}
+		return new_theme_mode;
+	}
+
+	function sync_system_theme(target: HTMLDivElement): "light" | "dark" {
+		const theme = update_scheme();
+		window
+			?.matchMedia("(prefers-color-scheme: dark)")
+			?.addEventListener("change", update_scheme);
+
+		function update_scheme(): "light" | "dark" {
+			let _theme: "light" | "dark" = window?.matchMedia?.(
+				"(prefers-color-scheme: dark)"
+			).matches
+				? "dark"
+				: "light";
+
+			apply_theme(target, _theme);
+			return _theme;
+		}
+		return theme;
+	}
+
+	function apply_theme(target: HTMLDivElement, theme: "dark" | "light"): void {
+		const dark_class_element = is_embed ? target.parentElement! : document.body;
+		const bg_element = is_embed ? target : target.parentElement!;
+		bg_element.style.background = "var(--body-background-fill)";
+		if (theme === "dark") {
+			dark_class_element.classList.add("dark");
+		} else {
+			dark_class_element.classList.remove("dark");
+		}
+	}
+</script>
+
+<svelte:head>
+	<link rel="stylesheet" href={"./theme.css?v=" + config?.theme_hash} />
+
+	{#if config.head}
+		{@html config.head}
+	{/if}
+</svelte:head>
+
+<Embed
+	display={container && is_embed}
+	{is_embed}
+	info={false}
+	{version}
+	{initial_height}
+	{space}
+	loaded={loader_status === "complete"}
+	fill_width={config?.fill_width || false}
+	bind:wrapper
+>
+	{#if config?.auth_required}
+		<svelte:component
+			this={data.Render}
+			auth_message={config.auth_message}
+			root={config.root}
+			space_id={space}
+			{app_mode}
+		/>
+	{:else if config && app}
+		<svelte:component
+			this={data.Render}
+			{app}
+			{...config}
+			fill_height={!is_embed && config.fill_height}
+			theme_mode={active_theme_mode}
+			{control_page_title}
+			target={wrapper}
+			{autoscroll}
+			bind:ready
+			bind:render_complete
+			bind:add_new_message={new_message_fn}
+			show_footer={!is_embed}
+			{app_mode}
+			{version}
+			search_params={$page.url.searchParams}
+			initial_layout={data.layout}
+		/>
+	{/if}
+</Embed>
+
+<!-- <style>
+	.error {
+		position: relative;
+		padding: var(--size-4);
+		color: var(--body-text-color);
+		text-align: center;
+	}
+
+	.error > * {
+		margin-top: var(--size-4);
+	}
+
+	a {
+		color: var(--link-text-color);
+	}
+
+	a:hover {
+		color: var(--link-text-color-hover);
+		text-decoration: underline;
+	}
+
+	a:visited {
+		color: var(--link-text-color-visited);
+	}
+
+	a:active {
+		color: var(--link-text-color-active);
+	}
+</style> -->
diff --git a/js/app/src/routes/[...catchall]/+page.ts b/js/app/src/routes/[...catchall]/+page.ts
new file mode 100644
index 0000000000000..9d003b12bcefb
--- /dev/null
+++ b/js/app/src/routes/[...catchall]/+page.ts
@@ -0,0 +1,56 @@
+// import { type LayoutServerLoad } from "./$types";
+import { browser } from "$app/environment";
+
+import { Client } from "@gradio/client";
+import { create_components } from "@gradio/core";
+import { get } from "svelte/store";
+import type { Config } from "@gradio/client";
+
+import Blocks from "@gradio/core/blocks";
+import Login from "@gradio/core/login";
+
+export async function load({
+	url,
+	data: { server, port, local_dev_mode, custom_path }
+}): Promise<{
+	Render: typeof Login | typeof Blocks;
+	config: Config;
+	api_url: string;
+	layout: unknown;
+	app: Client;
+}> {
+	const api_url =
+		browser && !local_dev_mode ? new URL(".", location.href).href : server;
+	// console.log("API URL", api_url, "-", location.href, "-");
+	const app = await Client.connect(api_url, {
+		with_null_state: true,
+		events: ["data", "log", "status", "render"]
+	});
+
+	if (!app.config) {
+		throw new Error("No config found");
+	}
+
+	const { create_layout, layout } = create_components();
+
+	await create_layout({
+		app,
+		components: app.config.components,
+		dependencies: app.config.dependencies,
+		layout: app.config.layout,
+		root: app.config.root + app.config.api_prefix,
+		options: {
+			fill_height: app.config.fill_height
+		}
+	});
+
+	const layouts = get(layout);
+
+	return {
+		Render: app.config?.auth_required ? Login : Blocks,
+		config: app.config,
+		api_url,
+		layout: layouts,
+		app
+	};
+}
diff --git a/js/app/src/routes/svelte_init.ts b/js/app/src/routes/svelte_init.ts
new file mode 100644
index 0000000000000..92146580eef5e
--- /dev/null
+++ b/js/app/src/routes/svelte_init.ts
@@ -0,0 +1,20 @@
+import * as svelte from "svelte";
+const is_browser = typeof window !== "undefined";
+if (is_browser) {
+	const o = {
+		SvelteComponent: svelte.SvelteComponent
+	};
+	for (const key in svelte) {
+		if (key === "SvelteComponent") continue;
+		if (key === "SvelteComponentDev") {
+			//@ts-ignore
+			o[key] = o["SvelteComponent"];
+		} else {
+			//@ts-ignore
+			o[key] = svelte[key];
+		}
+	}
+	window.__gradio__svelte__internal = o;
+	window.__gradio__svelte__internal["globals"] = {};
+	window.globals = window;
+}
diff --git a/js/app/static/favicon.png b/js/app/static/favicon.png
deleted file mode 100644
index 825b9e65af7c1..0000000000000
Binary files a/js/app/static/favicon.png and /dev/null differ
diff --git a/js/app/svelte.config.js b/js/app/svelte.config.js
index 578e765f43929..4c16def6192f6 100644
--- a/js/app/svelte.config.js
+++ b/js/app/svelte.config.js
@@ -1,17 +1,43 @@
-import adapter from "@sveltejs/adapter-auto";
+import adapter from "@sveltejs/adapter-node";
 import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+import sveltePreprocess from "svelte-preprocess";
+import custom_media from "postcss-custom-media";
+import global_data from "@csstools/postcss-global-data";
+import { resolve } from "path";
+import { fileURLToPath } from "url";
+import { join } from "path";
 
+const __dirname = fileURLToPath(import.meta.url);
+const out_path = resolve(__dirname, "../../../gradio/templates/node/build");
+const theme_token_path = join(
+	__dirname,
+	"..",
+	"..",
+
+	"theme",
+	"src",
+	"tokens.css"
+);
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: vitePreprocess(),
+	preprocess: [
+		vitePreprocess(),
+		sveltePreprocess({
+			postcss: {
+				plugins: [global_data({ files: [theme_token_path] }), custom_media()]
+			}
+		})
+	],
 
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter()
+		adapter: adapter({
+			out: out_path
+		})
 	}
 };
 
diff --git a/js/app/vite.config.ts b/js/app/vite.config.ts
index 328b1f5f9ad67..3ae0e59fbbb1b 100644
--- a/js/app/vite.config.ts
+++ b/js/app/vite.config.ts
@@ -1,6 +1,128 @@
 import { sveltekit } from "@sveltejs/kit/vite";
 import { defineConfig } from "vite";
 
-export default defineConfig({
-	plugins: [sveltekit()]
+// @ts-ignore
+import custom_media from "postcss-custom-media";
+import global_data from "@csstools/postcss-global-data";
+// @ts-ignore
+import prefixer from "postcss-prefix-selector";
+import { cpSync, readFileSync, writeFileSync } from "fs";
+import { resolve, join } from "path";
+
+import {
+	inject_ejs,
+	generate_cdn_entry,
+	generate_dev_entry,
+	handle_ce_css,
+	inject_component_loader,
+	resolve_svelte,
+	mock_modules
+} from "@self/build";
+
+const version_path = resolve(__dirname, "../../gradio/package.json");
+const theme_token_path = resolve(__dirname, "../theme/src/tokens.css");
+const version_raw = JSON.parse(
+	readFileSync(version_path, { encoding: "utf-8" })
+).version.trim();
+const version = version_raw.replace(/\./g, "-");
+
+const GRADIO_VERSION = version_raw || "asd_stub_asd";
+const CDN_BASE = "https://gradio.s3-us-west-2.amazonaws.com";
+
+export default defineConfig(({ mode }) => {
+	const production = mode === "production";
+	const development = mode === "development";
+	return {
+		// plugins: [],
+		server: {
+			port: 9876,
+			open: "/"
+		},
+		resolve: {
+			conditions: ["gradio"]
+		},
+		build: {
+			rollupOptions: {
+				external: [
+					"/svelte/svelte.js",
+					"/svelte/svelte-submodules.js",
+					"./svelte/svelte-submodules.js",
+					"./svelte/svelte.js"
+				]
+			},
+			minify: false
+		},
+		define: {
+			BUILD_MODE: production ? JSON.stringify("prod") : JSON.stringify("dev"),
+			BACKEND_URL: production
+				? JSON.stringify("")
+				: JSON.stringify("http://127.0.0.1:7860/"),
+			GRADIO_VERSION: JSON.stringify(version)
+		},
+		css: {
+			postcss: {
+				plugins: [
+					prefixer({
+						prefix: `.gradio-container-${version}`,
+						// @ts-ignore
+						transform(prefix, selector, prefixedSelector, fileName) {
+							if (selector.indexOf("gradio-container") > -1) {
+								return prefix;
+							} else if (
+								selector.indexOf(":root") > -1 ||
+								selector.indexOf("dark") > -1 ||
+								selector.indexOf("body") > -1 ||
+								fileName.indexOf(".svelte") > -1
+							) {
+								return selector;
+							}
+							return prefixedSelector;
+						}
+					}),
+					custom_media()
+				]
+			}
+		},
+		ssr: {
+			noExternal: ["@gradio/*", "@huggingface/space-header"],
+			external: ["svelte", "svelte/*"]
+		},
+		optimizeDeps: {
+			exclude: [
+				"@gradio/*",
+				"svelte",
+				"svelte/*",
+				"./svelte/svelte-submodules.js",
+				"./svelte/svelte.js"
+			]
+		},
+		plugins: [
+			sveltekit(),
+			// resolve_svelte(development),
+			// 	generate_dev_entry({
+			// 		enable: !development && mode !== "test"
+			// 	}),
+			// 	inject_ejs(),
+			// 	generate_cdn_entry({ version: GRADIO_VERSION, cdn_base: CDN_BASE }),
+			// 	handle_ce_css(),
+			inject_component_loader({ mode }),
+			{
+				name: "resolve_svelte",
+				enforce: "pre",
+				resolveId(id, importer, options) {
+					if (!options?.ssr) {
+						if (id === "svelte" || id === "svelte/internal") {
+							return { id: "../../../svelte/svelte.js", external: true };
+						}
+						if (id.startsWith("svelte/")) {
+							return {
+								id: "../../../svelte/svelte-submodules.js",
+								external: true
+							};
+						}
+					}
+				}
+			}
+		]
+	};
 });
diff --git a/js/atoms/CHANGELOG.md b/js/atoms/CHANGELOG.md
index 3c17b43e96ef9..e6256a194e3e0 100644
--- a/js/atoms/CHANGELOG.md
+++ b/js/atoms/CHANGELOG.md
@@ -1,6 +1,53 @@
 # @gradio/atoms
 
-## 0.8.1
+## 0.9.0-beta.5
+
+### Features
+
+- [#9437](https://github.com/gradio-app/gradio/pull/9437) [`c3d93be`](https://github.com/gradio-app/gradio/commit/c3d93bef94b9401747a363f7bad88a1d347d535b) - Adding new themes to Gradio 5.0.  Thanks @allisonwhilden!
+
+### Dependency updates
+
+- @gradio/icons@0.8.0-beta.4
+
+## 0.9.0-beta.4
+
+### Features
+
+- [#9521](https://github.com/gradio-app/gradio/pull/9521) [`06ef22e`](https://github.com/gradio-app/gradio/commit/06ef22e83cdd27e7afb381396d153d9db3dea16e) - Allow `info=` to render markdown.  Thanks @dawoodkhan82!
+- [#9571](https://github.com/gradio-app/gradio/pull/9571) [`148345d`](https://github.com/gradio-app/gradio/commit/148345d107763754710505281ad70368ebc6f3ec) - Fix chatinterface embedding height issues.  Thanks @aliabid94!
+
+## 0.9.0-beta.3
+
+### Features
+
+- [#9504](https://github.com/gradio-app/gradio/pull/9504) [`d054262`](https://github.com/gradio-app/gradio/commit/d054262f611d5f1eb1a1c936db7152347a891f8e) - Centre components within `Block` when height and width are set.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/icons@0.8.0-beta.3
+
+## 0.9.0-beta.2
+
+### Features
+
+- [#9261](https://github.com/gradio-app/gradio/pull/9261) [`73647a0`](https://github.com/gradio-app/gradio/commit/73647a07b0439efabe3dd218ff6c366ffa3b84a0) - Move icons into `IconButtonWrapper`.  Thanks @hannahblair!
+- [#9313](https://github.com/gradio-app/gradio/pull/9313) [`1fef9d9`](https://github.com/gradio-app/gradio/commit/1fef9d9a26f0ebce4de18c486702661f6539b1c6) - Standardize `height` across components and add `max_height` and `min_height` parameters where appropriate.  Thanks @abidlabs!
+- [#9250](https://github.com/gradio-app/gradio/pull/9250) [`350b0a5`](https://github.com/gradio-app/gradio/commit/350b0a5cafb9176f914f62e7c90de51d4352cc77) - Improve Icon Button consistency.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/icons@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.8.1-beta.1
+
+### Dependency updates
+
+- @gradio/icons@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+
+## 0.8.1-beta.0
 
 ### Fixes
 
@@ -8,8 +55,8 @@
 
 ### Dependency updates
 
-- @gradio/utils@0.6.1
-- @gradio/icons@0.7.2
+- @gradio/utils@0.7.0-beta.0
+- @gradio/icons@0.8.0-beta.0
 
 ## 0.8.0
 
diff --git a/js/atoms/package.json b/js/atoms/package.json
index c2ee0f653c251..bea157a9eb9ce 100644
--- a/js/atoms/package.json
+++ b/js/atoms/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/atoms",
-	"version": "0.8.1",
+	"version": "0.9.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"main": "src/index.ts",
diff --git a/js/atoms/src/Block.svelte b/js/atoms/src/Block.svelte
index 774a09236d05c..4024f2e2ea287 100644
--- a/js/atoms/src/Block.svelte
+++ b/js/atoms/src/Block.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	export let height: number | string | undefined = undefined;
+	export let min_height: number | string | undefined = undefined;
+	export let max_height: number | string | undefined = undefined;
 	export let width: number | string | undefined = undefined;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
@@ -12,8 +14,10 @@
 	export let container = true;
 	export let visible = true;
 	export let allow_overflow = true;
+	export let overflow_behavior: "visible" | "auto" = "auto";
 	export let scale: number | null = null;
 	export let min_width = 0;
+	export let flex = false;
 
 	let tag = type === "fieldset" ? "fieldset" : "div";
 
@@ -38,15 +42,18 @@
 	class:hidden={visible === false}
 	class="block {elem_classes.join(' ')}"
 	class:padded={padding}
+	class:flex
 	class:border_focus={border_mode === "focus"}
 	class:border_contrast={border_mode === "contrast"}
 	class:hide-container={!explicit_call && !container}
 	style:height={get_dimension(height)}
+	style:min-height={get_dimension(min_height)}
+	style:max-height={get_dimension(max_height)}
 	style:width={typeof width === "number"
 		? `calc(min(${width}px, 100%))`
 		: get_dimension(width)}
 	style:border-style={variant}
-	style:overflow={allow_overflow ? "visible" : "hidden"}
+	style:overflow={allow_overflow ? overflow_behavior : "hidden"}
 	style:flex-grow={scale}
 	style:min-width={`calc(min(${min_width}px, 100%))`}
 	style:border-width="var(--block-border-width)"
@@ -65,6 +72,8 @@
 		background: var(--block-background-fill);
 		width: 100%;
 		line-height: var(--line-sm);
+		margin-left: auto;
+		margin-right: auto;
 	}
 
 	.block.border_focus {
@@ -82,6 +91,11 @@
 	.hidden {
 		display: none;
 	}
+
+	.flex {
+		display: flex;
+		flex-direction: column;
+	}
 	.hide-container {
 		margin: 0;
 		box-shadow: none;
diff --git a/js/atoms/src/BlockLabel.svelte b/js/atoms/src/BlockLabel.svelte
index d68a1a74cd677..cf1fee22cafdc 100644
--- a/js/atoms/src/BlockLabel.svelte
+++ b/js/atoms/src/BlockLabel.svelte
@@ -26,7 +26,8 @@
 		align-items: center;
 		z-index: var(--layer-2);
 		box-shadow: var(--block-label-shadow);
-		border: var(--block-label-border-width) solid var(--border-color-primary);
+		border: var(--block-label-border-width) solid
+			var(--block-label-border-color);
 		border-top: none;
 		border-left: none;
 		border-radius: var(--block-label-radius);
diff --git a/js/atoms/src/BlockTitle.svelte b/js/atoms/src/BlockTitle.svelte
index b312449a1c5c8..526aa3b8689f3 100644
--- a/js/atoms/src/BlockTitle.svelte
+++ b/js/atoms/src/BlockTitle.svelte
@@ -2,6 +2,7 @@
 	import { default as Info } from "./Info.svelte";
 	export let show_label = true;
 	export let info: string | undefined = undefined;
+	export let root: string;
 </script>
 
 <span
@@ -13,7 +14,7 @@
 	<slot />
 </span>
 {#if info}
-	<Info>{info}</Info>
+	<Info {root} {info} />
 {/if}
 
 <style>
diff --git a/js/atoms/src/IconButton.svelte b/js/atoms/src/IconButton.svelte
index 3eb370d5375aa..edfbef22eeda7 100644
--- a/js/atoms/src/IconButton.svelte
+++ b/js/atoms/src/IconButton.svelte
@@ -11,8 +11,7 @@
 	export let hasPopup = false;
 	export let color = "var(--block-label-text-color)";
 	export let transparent = false;
-	export let background = "var(--background-fill-primary)";
-	export let offset = 0;
+	export let background = "var(--block-background-fill)";
 	$: _color = highlight ? "var(--color-accent)" : color;
 </script>
 
@@ -28,7 +27,6 @@
 	class:transparent
 	style:color={!disabled && _color ? _color : "var(--block-label-text-color)"}
 	style:--bg-color={!disabled ? background : "auto"}
-	style:margin-left={offset + "px"}
 >
 	{#if show_label}<span>{label}</span>{/if}
 	<div
@@ -36,7 +34,7 @@
 		class:large={size === "large"}
 		class:medium={size === "medium"}
 	>
-		<Icon />
+		<svelte:component this={Icon} />
 	</div>
 </button>
 
@@ -47,10 +45,14 @@
 		align-items: center;
 		gap: 1px;
 		z-index: var(--layer-2);
-		/* background: var(--background-fill-primary); */
-		border-radius: var(--radius-sm);
+		border-radius: var(--radius-xs);
 		color: var(--block-label-text-color);
 		border: 1px solid transparent;
+		padding: var(--spacing-xxs);
+	}
+
+	button:hover {
+		background-color: var(--background-fill-secondary);
 	}
 
 	button[disabled] {
@@ -60,15 +62,10 @@
 
 	button[disabled]:hover {
 		cursor: not-allowed;
-		/* border: 1px solid var(--button-secondary-border-color); */
-		/* padding: 2px; */
 	}
 
 	.padded {
-		padding: 2px;
 		background: var(--bg-color);
-		box-shadow: var(--shadow-drop);
-		border: 1px solid var(--button-secondary-border-color);
 	}
 
 	button:hover,
@@ -78,8 +75,6 @@
 	}
 
 	.padded:hover {
-		border: 2px solid var(--button-secondary-border-color-hover);
-		padding: 1px;
 		color: var(--block-label-text-color);
 	}
 
@@ -89,9 +84,10 @@
 	}
 
 	div {
-		padding: 2px;
 		display: flex;
-		align-items: flex-end;
+		align-items: center;
+		justify-content: center;
+		transition: filter 0.2s ease-in-out;
 	}
 
 	.small {
diff --git a/js/atoms/src/IconButtonWrapper.svelte b/js/atoms/src/IconButtonWrapper.svelte
new file mode 100644
index 0000000000000..8a4955865c9ce
--- /dev/null
+++ b/js/atoms/src/IconButtonWrapper.svelte
@@ -0,0 +1,59 @@
+<script>
+	export let top_panel = true;
+</script>
+
+<div class={`icon-button-wrapper ${top_panel ? "top-panel" : ""}`}>
+	<slot></slot>
+</div>
+
+<style>
+	.icon-button-wrapper {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		z-index: var(--layer-2);
+		gap: var(--spacing-sm);
+		box-shadow: var(--shadow-drop);
+		border: 1px solid var(--border-color-primary);
+		border-top: none;
+		border-right: none;
+		border-radius: var(--block-label-right-radius);
+		background: var(--block-background-fill);
+		padding: var(--spacing-xxs);
+	}
+
+	.icon-button-wrapper:not(.top-panel) {
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-sm);
+	}
+
+	.top-panel {
+		position: absolute;
+		top: var(--block-label-margin);
+		right: var(--block-label-margin);
+		margin: 0;
+	}
+
+	.icon-button-wrapper :global(button) {
+		margin: var(--spacing-xxs);
+		border-radius: var(--radius-xs);
+		position: relative;
+	}
+
+	.icon-button-wrapper :global(a.download-link:not(:last-child)),
+	.icon-button-wrapper :global(button:not(:last-child)) {
+		margin-right: var(--spacing-xxs);
+	}
+
+	.icon-button-wrapper :global(a.download-link:not(:last-child)::after),
+	.icon-button-wrapper :global(button:not(:last-child)::after) {
+		content: "";
+		position: absolute;
+		right: -4.5px;
+		top: 15%;
+		height: 70%;
+		width: 1px;
+		background-color: var(--border-color-primary);
+	}
+</style>
diff --git a/js/atoms/src/Info.svelte b/js/atoms/src/Info.svelte
index 9be5d6d4adea0..804cf1a34d42d 100644
--- a/js/atoms/src/Info.svelte
+++ b/js/atoms/src/Info.svelte
@@ -1,5 +1,11 @@
+<script lang="ts">
+	import { MarkdownCode as Markdown } from "@gradio/markdown";
+	export let info: string;
+	export let root: string;
+</script>
+
 <div>
-	<slot />
+	<Markdown {root} message={info} sanitize_html={true} />
 </div>
 
 <style>
diff --git a/js/atoms/src/index.ts b/js/atoms/src/index.ts
index 7a5748730a2f6..2279aed7ef881 100644
--- a/js/atoms/src/index.ts
+++ b/js/atoms/src/index.ts
@@ -8,5 +8,6 @@ export { default as ShareButton } from "./ShareButton.svelte";
 export { default as UploadText } from "./UploadText.svelte";
 export { default as Toolbar } from "./Toolbar.svelte";
 export { default as SelectSource } from "./SelectSource.svelte";
+export { default as IconButtonWrapper } from "./IconButtonWrapper.svelte";
 
 export const BLOCK_KEY = {};
diff --git a/js/audio/CHANGELOG.md b/js/audio/CHANGELOG.md
index 12588b8e74e8b..8da29638aa30d 100644
--- a/js/audio/CHANGELOG.md
+++ b/js/audio/CHANGELOG.md
@@ -1,5 +1,105 @@
 # @gradio/audio
 
+## 0.14.0-beta.8
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.7
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+- @gradio/button@0.3.0-beta.7
+
+## 0.14.0-beta.7
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+- @gradio/client@1.6.0-beta.4
+- @gradio/upload@0.13.0-beta.6
+- @gradio/button@0.3.0-beta.6
+
+## 0.14.0-beta.6
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.5
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+- @gradio/button@0.3.0-beta.5
+
+## 0.14.0-beta.5
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/upload@0.13.0-beta.4
+- @gradio/button@0.3.0-beta.4
+- @gradio/wasm@0.14.0-beta.3
+
+## 0.14.0-beta.4
+
+### Features
+
+- [#9419](https://github.com/gradio-app/gradio/pull/9419) [`018c140`](https://github.com/gradio-app/gradio/commit/018c140ef86cacc8211df05b57b26924dab7fa08) - Start/stop recoding from the backend. Add guide on conversational chatbots.  Thanks @freddyaboulton!
+
+## 0.14.0-beta.3
+
+### Features
+
+- [#9412](https://github.com/gradio-app/gradio/pull/9412) [`c2c2fd9`](https://github.com/gradio-app/gradio/commit/c2c2fd989348f826566773c07c0e0bda200199ff) - fix SSR apps on spaces.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.3
+- @gradio/client@1.6.0-beta.3
+- @gradio/button@0.3.0-beta.3
+
+## 0.14.0-beta.2
+
+### Features
+
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+- [#9250](https://github.com/gradio-app/gradio/pull/9250) [`350b0a5`](https://github.com/gradio-app/gradio/commit/350b0a5cafb9176f914f62e7c90de51d4352cc77) - Improve Icon Button consistency.  Thanks @hannahblair!
+- [#9253](https://github.com/gradio-app/gradio/pull/9253) [`99648ec`](https://github.com/gradio-app/gradio/commit/99648ec7c4443e74799941e47b0015ac9ca581e1) - Adds ability to block event trigger when file is uploading.  Thanks @dawoodkhan82!
+- [#9373](https://github.com/gradio-app/gradio/pull/9373) [`6443062`](https://github.com/gradio-app/gradio/commit/64430620449ab5b19ea32b02ab82a2d1804dcb2e) - Fix Cached Examples for Streamed Media.  Thanks @freddyaboulton!
+- [#9326](https://github.com/gradio-app/gradio/pull/9326) [`7afb9a1`](https://github.com/gradio-app/gradio/commit/7afb9a14fa64310eb8b70f43a3bad373e46e36c1) - 5.0 merge take 2.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/upload@0.13.0-beta.2
+- @gradio/wasm@0.14.0-beta.2
+- @gradio/client@1.6.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+- @gradio/button@0.3.0-beta.2
+
+## 0.14.0-beta.0
+
+### Features
+
+- [#9149](https://github.com/gradio-app/gradio/pull/9149) [`3d7a9b8`](https://github.com/gradio-app/gradio/commit/3d7a9b81f6fef06187eca832471dc1692eb493a0) - Open audio/image input stream only when queue is ready.  Thanks @freddyaboulton!
+- [#8941](https://github.com/gradio-app/gradio/pull/8941) [`97a7bf6`](https://github.com/gradio-app/gradio/commit/97a7bf66a79179d1b91a3199d68e5c11216ca500) - Streaming inputs for 5.0.  Thanks @freddyaboulton!
+
+### Fixes
+
+- [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/utils@0.7.0-beta.0
+- @gradio/statustracker@0.8.0-beta.0
+- @gradio/atoms@0.8.1-beta.0
+- @gradio/client@1.6.0-beta.0
+- @gradio/icons@0.8.0-beta.0
+- @gradio/button@0.2.51-beta.0
+- @gradio/upload@0.12.4-beta.0
+- @gradio/wasm@0.13.1-beta.0
+
 ## 0.13.5
 
 ### Fixes
@@ -11,6 +111,8 @@
 ### Features
 
 - [#9187](https://github.com/gradio-app/gradio/pull/9187) [`5bf00b7`](https://github.com/gradio-app/gradio/commit/5bf00b7524ebf399b48719120a49d15bb21bd65c) - make all component SSR compatible.  Thanks @pngwn!
+- [#9216](https://github.com/gradio-app/gradio/pull/9216) [`e137b30`](https://github.com/gradio-app/gradio/commit/e137b30b1a53ca32d3cd809d31e97d5d54a4e479) - Decrease component radii and remove input shadows.  Thanks @hannahblair!
+
 
 ### Fixes
 
diff --git a/js/audio/Index.svelte b/js/audio/Index.svelte
index fde97104bc6ef..d7f1e1b93fb13 100644
--- a/js/audio/Index.svelte
+++ b/js/audio/Index.svelte
@@ -39,6 +39,22 @@
 	export let waveform_options: WaveformOptions = {};
 	export let pending: boolean;
 	export let streaming: boolean;
+	export let stream_every: number;
+	export let input_ready: boolean;
+	export let recording = false;
+	let uploading = false;
+	$: input_ready = !uploading;
+
+	let stream_state = "closed";
+	let _modify_stream: (state: "open" | "closed" | "waiting") => void;
+	export function modify_stream_state(
+		state: "open" | "closed" | "waiting"
+	): void {
+		stream_state = state;
+		_modify_stream(state);
+	}
+	export const get_stream_state: () => void = () => stream_state;
+	export let set_time_limit: (time: number) => void;
 	export let gradio: Gradio<{
 		input: never;
 		change: typeof value;
@@ -57,6 +73,7 @@
 		clear: never;
 		share: ShareData;
 		clear_status: LoadingStatus;
+		close_stream: string;
 	}>;
 
 	let old_value: null | FileData = null;
@@ -224,11 +241,13 @@
 			{active_source}
 			{pending}
 			{streaming}
+			bind:recording
 			{loop}
 			max_file_size={gradio.max_file_size}
 			{handle_reset_value}
 			{editable}
 			bind:dragging
+			bind:uploading
 			on:edit={() => gradio.dispatch("edit")}
 			on:play={() => gradio.dispatch("play")}
 			on:pause={() => gradio.dispatch("pause")}
@@ -239,12 +258,16 @@
 			on:upload={() => gradio.dispatch("upload")}
 			on:clear={() => gradio.dispatch("clear")}
 			on:error={handle_error}
+			on:close_stream={() => gradio.dispatch("close_stream", "stream")}
 			i18n={gradio.i18n}
 			{waveform_settings}
 			{waveform_options}
 			{trim_region_settings}
-			upload={gradio.client.upload}
-			stream_handler={gradio.client.stream}
+			{stream_every}
+			bind:modify_stream={_modify_stream}
+			bind:set_time_limit
+			upload={(...args) => gradio.client.upload(...args)}
+			stream_handler={(...args) => gradio.client.stream(...args)}
 		>
 			<UploadText i18n={gradio.i18n} type="audio" />
 		</InteractiveAudio>
diff --git a/js/audio/interactive/InteractiveAudio.svelte b/js/audio/interactive/InteractiveAudio.svelte
index 4b7f04c964f7e..1157e5df96724 100644
--- a/js/audio/interactive/InteractiveAudio.svelte
+++ b/js/audio/interactive/InteractiveAudio.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-	import { onDestroy, createEventDispatcher } from "svelte";
+	import { onDestroy, createEventDispatcher, tick } from "svelte";
 	import { Upload, ModifyUpload } from "@gradio/upload";
 	import { prepare_files, type FileData, type Client } from "@gradio/client";
 	import { BlockLabel } from "@gradio/atoms";
 	import { Music } from "@gradio/icons";
+	import { StreamingBar } from "@gradio/statustracker";
 	import AudioPlayer from "../player/AudioPlayer.svelte";
 
 	import type { IBlobEvent, IMediaRecorder } from "extendable-media-recorder";
@@ -37,12 +38,34 @@
 	export let max_file_size: number | null = null;
 	export let upload: Client["upload"];
 	export let stream_handler: Client["stream"];
+	export let stream_every: number;
+	export let uploading = false;
+	export let recording = false;
+
+	let time_limit: number | null = null;
+	let stream_state: "open" | "waiting" | "closed" = "closed";
+
+	export const modify_stream: (state: "open" | "closed" | "waiting") => void = (
+		state: "open" | "closed" | "waiting"
+	) => {
+		if (state === "closed") {
+			time_limit = null;
+			stream_state = "closed";
+		} else if (state === "waiting") {
+			stream_state = "waiting";
+		} else {
+			stream_state = "open";
+		}
+	};
+
+	export const set_time_limit = (time: number): void => {
+		if (recording) time_limit = time;
+	};
 
 	$: dispatch("drag", dragging);
 
 	// TODO: make use of this
 	// export let type: "normal" | "numpy" = "normal";
-	let recording = false;
 	let recorder: IMediaRecorder;
 	let mode = "";
 	let header: Uint8Array | undefined = undefined;
@@ -50,7 +73,6 @@
 	let submit_pending_stream_on_pending_end = false;
 	let inited = false;
 
-	const STREAM_TIMESLICE = 500;
 	const NUM_HEADER_BYTES = 44;
 	let audio_chunks: Blob[] = [];
 	let module_promises: [
@@ -65,7 +87,8 @@
 		];
 	}
 
-	if (streaming) {
+	const is_browser = typeof window !== "undefined";
+	if (is_browser && streaming) {
 		get_modules();
 	}
 
@@ -84,6 +107,7 @@
 		start_recording: undefined;
 		pause_recording: undefined;
 		stop_recording: undefined;
+		close_stream: undefined;
 	}>();
 
 	const dispatch_blob = async (
@@ -123,6 +147,7 @@
 			throw err;
 		}
 		if (stream == null) return;
+
 		if (streaming) {
 			const [{ MediaRecorder, register }, { connect }] =
 				await Promise.all(module_promises);
@@ -134,13 +159,14 @@
 			recorder.addEventListener("dataavailable", (event) => {
 				audio_chunks.push(event.data);
 			});
-			recorder.addEventListener("stop", async () => {
-				recording = false;
-				await dispatch_blob(audio_chunks, "change");
-				await dispatch_blob(audio_chunks, "stop_recording");
-				audio_chunks = [];
-			});
 		}
+		recorder.addEventListener("stop", async () => {
+			recording = false;
+			// recorder.stop();
+			await dispatch_blob(audio_chunks, "change");
+			await dispatch_blob(audio_chunks, "stop_recording");
+			audio_chunks = [];
+		});
 		inited = true;
 	}
 
@@ -155,6 +181,7 @@
 			pending_stream.push(payload);
 		} else {
 			let blobParts = [header].concat(pending_stream, [payload]);
+			if (!recording || stream_state === "waiting") return;
 			dispatch_blob(blobParts, "stream");
 			pending_stream = [];
 		}
@@ -175,7 +202,7 @@
 		if (!inited) await prepare_audio();
 		header = undefined;
 		if (streaming) {
-			recorder.start(STREAM_TIMESLICE);
+			recorder.start(stream_every * 1000);
 		}
 	}
 
@@ -192,12 +219,14 @@
 		dispatch("upload", detail);
 	}
 
-	function stop(): void {
+	async function stop(): Promise<void> {
 		recording = false;
 
 		if (streaming) {
+			dispatch("close_stream");
 			dispatch("stop_recording");
 			recorder.stop();
+
 			if (pending) {
 				submit_pending_stream_on_pending_end = true;
 			}
@@ -206,6 +235,9 @@
 			mode = "";
 		}
 	}
+
+	$: if (!recording && recorder) stop();
+	$: if (recording && recorder) record();
 </script>
 
 <BlockLabel
@@ -215,9 +247,10 @@
 	label={label || i18n("audio.audio")}
 />
 <div class="audio-container">
+	<StreamingBar {time_limit} />
 	{#if value === null || streaming}
 		{#if active_source === "microphone"}
-			<ModifyUpload {i18n} on:clear={clear} absolute={true} />
+			<ModifyUpload {i18n} on:clear={clear} />
 			{#if streaming}
 				<StreamAudio
 					{record}
@@ -226,12 +259,14 @@
 					{i18n}
 					{waveform_settings}
 					{waveform_options}
+					waiting={stream_state === "waiting"}
 				/>
 			{:else}
 				<AudioRecorder
 					bind:mode
 					{i18n}
 					{editable}
+					{recording}
 					{dispatch_blob}
 					{waveform_settings}
 					{waveform_options}
@@ -247,6 +282,7 @@
 				filetype="audio/aac,audio/midi,audio/mpeg,audio/ogg,audio/wav,audio/x-wav,audio/opus,audio/webm,audio/flac,audio/vnd.rn-realaudio,audio/x-ms-wma,audio/x-aiff,audio/amr,audio/*"
 				on:load={handle_load}
 				bind:dragging
+				bind:uploading
 				on:error={({ detail }) => dispatch("error", detail)}
 				{root}
 				{max_file_size}
@@ -262,7 +298,6 @@
 			on:clear={clear}
 			on:edit={() => (mode = "edit")}
 			download={show_download_button ? value.url : null}
-			absolute={true}
 		/>
 
 		<AudioPlayer
diff --git a/js/audio/package.json b/js/audio/package.json
index 8709a97d426a2..6f0f70d47798a 100644
--- a/js/audio/package.json
+++ b/js/audio/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/audio",
-	"version": "0.13.5",
+	"version": "0.14.0-beta.8",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
@@ -15,12 +15,13 @@
 		"@gradio/upload": "workspace:^",
 		"@gradio/utils": "workspace:^",
 		"@gradio/wasm": "workspace:^",
+		"@types/wavesurfer.js": "^6.0.10",
 		"extendable-media-recorder": "^9.0.0",
 		"extendable-media-recorder-wav-encoder": "^7.0.76",
+		"hls.js": "^1.5.13",
 		"resize-observer-polyfill": "^1.5.1",
 		"svelte-range-slider-pips": "^2.0.1",
-		"wavesurfer.js": "^7.4.2",
-		"@types/wavesurfer.js": "^6.0.10"
+		"wavesurfer.js": "^7.4.2"
 	},
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
diff --git a/js/audio/player/AudioPlayer.svelte b/js/audio/player/AudioPlayer.svelte
index 59cf8b6d45ce6..7b5ffbd51c330 100644
--- a/js/audio/player/AudioPlayer.svelte
+++ b/js/audio/player/AudioPlayer.svelte
@@ -11,6 +11,8 @@
 	import type { WaveformOptions } from "../shared/types";
 	import { createEventDispatcher } from "svelte";
 
+	import Hls from "hls.js";
+
 	export let value: null | FileData = null;
 	$: url = value?.url;
 	export let label: string;
@@ -39,6 +41,9 @@
 	let trimDuration = 0;
 
 	let show_volume_slider = false;
+	let audio_player: HTMLAudioElement;
+
+	let stream_active = false;
 
 	const dispatch = createEventDispatcher<{
 		stop: undefined;
@@ -61,7 +66,7 @@
 		});
 	};
 
-	$: if (container !== undefined) {
+	$: if (!value?.is_stream && container !== undefined && container !== null) {
 		if (waveform !== undefined) waveform.destroy();
 		container.innerHTML = "";
 		create_waveform();
@@ -129,6 +134,7 @@
 	};
 
 	async function load_audio(data: string): Promise<void> {
+		stream_active = false;
 		await resolve_wasm_src(data).then((resolved_src) => {
 			if (!resolved_src || value?.is_stream) return;
 			return waveform?.load(resolved_src);
@@ -137,6 +143,52 @@
 
 	$: url && load_audio(url);
 
+	function load_stream(value: FileData | null): void {
+		if (!value || !value.is_stream || !value.url) return;
+		if (!audio_player) return;
+		if (Hls.isSupported() && !stream_active) {
+			// Set config to start playback after 1 second of data received
+			const hls = new Hls({
+				maxBufferLength: 1,
+				maxMaxBufferLength: 1,
+				lowLatencyMode: true
+			});
+			hls.loadSource(value.url);
+			hls.attachMedia(audio_player);
+			hls.on(Hls.Events.MANIFEST_PARSED, function () {
+				if (waveform_settings.autoplay) audio_player.play();
+			});
+			hls.on(Hls.Events.ERROR, function (event, data) {
+				console.error("HLS error:", event, data);
+				if (data.fatal) {
+					switch (data.type) {
+						case Hls.ErrorTypes.NETWORK_ERROR:
+							console.error(
+								"Fatal network error encountered, trying to recover"
+							);
+							hls.startLoad();
+							break;
+						case Hls.ErrorTypes.MEDIA_ERROR:
+							console.error("Fatal media error encountered, trying to recover");
+							hls.recoverMediaError();
+							break;
+						default:
+							console.error("Fatal error, cannot recover");
+							hls.destroy();
+							break;
+					}
+				}
+			});
+			stream_active = true;
+		} else if (!stream_active) {
+			audio_player.src = value.url;
+			if (waveform_settings.autoplay) audio_player.play();
+			stream_active = true;
+		}
+	}
+
+	$: load_stream(value);
+
 	onMount(() => {
 		window.addEventListener("keydown", (e) => {
 			if (!waveform || show_volume_slider) return;
@@ -149,20 +201,21 @@
 	});
 </script>
 
+<audio
+	class="standard-player"
+	class:hidden={!(value && value.is_stream)}
+	controls
+	autoplay={waveform_settings.autoplay}
+	on:load
+	bind:this={audio_player}
+	on:ended={() => dispatch("stop")}
+	on:play={() => dispatch("play")}
+/>
 {#if value === null}
 	<Empty size="small">
 		<Music />
 	</Empty>
-{:else if value.is_stream}
-	<audio
-		class="standard-player"
-		src={value.url}
-		controls
-		autoplay={waveform_settings.autoplay}
-		{loop}
-		on:load
-	/>
-{:else}
+{:else if !value.is_stream}
 	<div
 		class="component-wrapper"
 		data-testid={label ? "waveform-" + label : "unlabelled-audio"}
@@ -254,4 +307,8 @@
 		width: 100%;
 		padding: var(--size-2);
 	}
+
+	.hidden {
+		display: none;
+	}
 </style>
diff --git a/js/audio/recorder/AudioRecorder.svelte b/js/audio/recorder/AudioRecorder.svelte
index f35437284d1d9..df9368159d00f 100644
--- a/js/audio/recorder/AudioRecorder.svelte
+++ b/js/audio/recorder/AudioRecorder.svelte
@@ -23,6 +23,7 @@
 	};
 	export let handle_reset_value: () => void;
 	export let editable = true;
+	export let recording = false;
 
 	let micWaveform: WaveSurfer;
 	let recordingWaveform: WaveSurfer;
@@ -226,6 +227,7 @@
 			bind:record
 			{i18n}
 			{timing}
+			{recording}
 			show_recording_waveform={waveform_options.show_recording_waveform}
 			record_time={format_time(seconds)}
 		/>
diff --git a/js/audio/shared/DeviceSelect.svelte b/js/audio/shared/DeviceSelect.svelte
index da711e6e18552..287a5d2c817ee 100644
--- a/js/audio/shared/DeviceSelect.svelte
+++ b/js/audio/shared/DeviceSelect.svelte
@@ -10,24 +10,26 @@
 		error: string;
 	}>();
 
-	$: try {
-		let tempDevices: MediaDeviceInfo[] = [];
-		RecordPlugin.getAvailableAudioDevices().then(
-			(devices: MediaDeviceInfo[]) => {
-				micDevices = devices;
-				devices.forEach((device) => {
-					if (device.deviceId) {
-						tempDevices.push(device);
-					}
-				});
-				micDevices = tempDevices;
+	$: if (typeof window !== "undefined") {
+		try {
+			let tempDevices: MediaDeviceInfo[] = [];
+			RecordPlugin.getAvailableAudioDevices().then(
+				(devices: MediaDeviceInfo[]) => {
+					micDevices = devices;
+					devices.forEach((device) => {
+						if (device.deviceId) {
+							tempDevices.push(device);
+						}
+					});
+					micDevices = tempDevices;
+				}
+			);
+		} catch (err) {
+			if (err instanceof DOMException && err.name == "NotAllowedError") {
+				dispatch("error", i18n("audio.allow_recording_access"));
 			}
-		);
-	} catch (err) {
-		if (err instanceof DOMException && err.name == "NotAllowedError") {
-			dispatch("error", i18n("audio.allow_recording_access"));
+			throw err;
 		}
-		throw err;
 	}
 </script>
 
@@ -50,9 +52,9 @@
 		height: var(--size-8);
 		background: var(--block-background-fill);
 		padding: 0px var(--spacing-xxl);
-		border-radius: var(--radius-full);
+		border-radius: var(--button-large-radius);
 		font-size: var(--text-md);
-		border: 1px solid var(--neutral-400);
+		border: 1px solid var(--block-border-color);
 		gap: var(--size-1);
 	}
 
diff --git a/js/audio/shared/WaveformRecordControls.svelte b/js/audio/shared/WaveformRecordControls.svelte
index 7781d3e66e533..24de8dd14914c 100644
--- a/js/audio/shared/WaveformRecordControls.svelte
+++ b/js/audio/shared/WaveformRecordControls.svelte
@@ -6,6 +6,7 @@
 
 	export let record: RecordPlugin;
 	export let i18n: I18nFormatter;
+	export let recording = false;
 
 	let micDevices: MediaDeviceInfo[] = [];
 	let recordButton: HTMLButtonElement;
@@ -13,6 +14,7 @@
 	let resumeButton: HTMLButtonElement;
 	let stopButton: HTMLButtonElement;
 	let stopButtonPaused: HTMLButtonElement;
+	let recording_ongoing = false;
 
 	export let record_time: string;
 	export let show_recording_waveform: boolean | undefined;
@@ -53,6 +55,14 @@
 		stopButton.style.display = "flex";
 		stopButtonPaused.style.display = "none";
 	});
+
+	$: if (recording && !recording_ongoing) {
+		record.startRecording();
+		recording_ongoing = true;
+	} else {
+		record.stopRecording();
+		recording_ongoing = false;
+	}
 </script>
 
 <div class="controls">
@@ -131,9 +141,9 @@
 		height: var(--size-8);
 		width: var(--size-20);
 		background-color: var(--block-background-fill);
-		border-radius: var(--radius-3xl);
+		border-radius: var(--button-large-radius);
 		align-items: center;
-		border: 1px solid var(--neutral-400);
+		border: 1px solid var(--block-border-color);
 		margin: var(--size-1) var(--size-1) 0 0;
 	}
 
@@ -160,7 +170,7 @@
 		height: var(--size-8);
 		width: var(--size-20);
 		background-color: var(--block-background-fill);
-		border-radius: var(--radius-3xl);
+		border-radius: var(--button-large-radius);
 		align-items: center;
 		border: 1px solid var(--primary-600);
 		margin: var(--size-1) var(--size-1) 0 0;
@@ -179,10 +189,10 @@
 		height: var(--size-8);
 		width: var(--size-24);
 		background-color: var(--block-background-fill);
-		border-radius: var(--radius-3xl);
+		border-radius: var(--button-large-radius);
 		display: flex;
 		align-items: center;
-		border: 1px solid var(--neutral-400);
+		border: 1px solid var(--block-border-color);
 	}
 
 	.stop-button:disabled {
@@ -213,8 +223,8 @@
 		display: none;
 		height: var(--size-8);
 		width: var(--size-20);
-		border: 1px solid var(--neutral-400);
-		border-radius: var(--radius-3xl);
+		border: 1px solid var(--block-border-color);
+		border-radius: var(--button-large-radius);
 		padding: var(--spacing-md);
 		margin: var(--size-1) var(--size-1) 0 0;
 	}
@@ -223,8 +233,8 @@
 		display: none;
 		height: var(--size-8);
 		width: var(--size-20);
-		border: 1px solid var(--neutral-400);
-		border-radius: var(--radius-3xl);
+		border: 1px solid var(--block-border-color);
+		border-radius: var(--button-large-radius);
 		padding: var(--spacing-xl);
 		line-height: 1px;
 		font-size: var(--text-md);
@@ -235,8 +245,7 @@
 		display: flex;
 		height: var(--size-8);
 		width: var(--size-20);
-		border: 1px solid var(--neutral-400);
-		border-radius: var(--radius-3xl);
+		border: 1px solid var(--block-border-color);
 		padding: var(--spacing-md);
 		align-items: center;
 		justify-content: center;
diff --git a/js/audio/static/StaticAudio.svelte b/js/audio/static/StaticAudio.svelte
index dd2c5a20eaa2e..a4b56712fd79c 100644
--- a/js/audio/static/StaticAudio.svelte
+++ b/js/audio/static/StaticAudio.svelte
@@ -1,7 +1,12 @@
 <script lang="ts">
 	import { uploadToHuggingFace } from "@gradio/utils";
 	import { Empty } from "@gradio/atoms";
-	import { ShareButton, IconButton, BlockLabel } from "@gradio/atoms";
+	import {
+		ShareButton,
+		IconButton,
+		BlockLabel,
+		IconButtonWrapper
+	} from "@gradio/atoms";
 	import { Download, Music } from "@gradio/icons";
 	import type { I18nFormatter } from "@gradio/utils";
 	import AudioPlayer from "../player/AudioPlayer.svelte";
@@ -40,9 +45,14 @@
 />
 
 {#if value !== null}
-	<div class="icon-buttons">
+	<IconButtonWrapper>
 		{#if show_download_button}
-			<DownloadLink href={value.url} download={value.orig_name || value.path}>
+			<DownloadLink
+				href={value.is_stream
+					? value.url?.replace("playlist.m3u8", "playlist-file")
+					: value.url}
+				download={value.orig_name || value.path}
+			>
 				<IconButton Icon={Download} label={i18n("common.download")} />
 			</DownloadLink>
 		{/if}
@@ -59,7 +69,7 @@
 				{value}
 			/>
 		{/if}
-	</div>
+	</IconButtonWrapper>
 
 	<AudioPlayer
 		{value}
@@ -79,13 +89,3 @@
 		<Music />
 	</Empty>
 {/if}
-
-<style>
-	.icon-buttons {
-		display: flex;
-		position: absolute;
-		top: 6px;
-		right: 6px;
-		gap: var(--size-1);
-	}
-</style>
diff --git a/js/audio/streaming/StreamAudio.svelte b/js/audio/streaming/StreamAudio.svelte
index fe3ef5c6d59c2..6b715aaf206f6 100644
--- a/js/audio/streaming/StreamAudio.svelte
+++ b/js/audio/streaming/StreamAudio.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 	import type { I18nFormatter } from "@gradio/utils";
+	import { Spinner } from "@gradio/icons";
 	import WaveSurfer from "wavesurfer.js";
 	import RecordPlugin from "wavesurfer.js/dist/plugins/record.js";
 	import type { WaveformOptions } from "../shared/types";
@@ -15,6 +16,7 @@
 	export let waveform_options: WaveformOptions = {
 		show_recording_waveform: true
 	};
+	export let waiting = false;
 
 	let micWaveform: WaveSurfer;
 	let waveformRecord: RecordPlugin;
@@ -48,7 +50,7 @@
 		/>
 	{/if}
 	<div class="controls">
-		{#if recording}
+		{#if recording && !waiting}
 			<button
 				class={paused_recording ? "stop-button-paused" : "stop-button"}
 				on:click={() => {
@@ -62,6 +64,18 @@
 				</span>
 				{paused_recording ? i18n("audio.pause") : i18n("audio.stop")}
 			</button>
+		{:else if recording && waiting}
+			<button
+				class="spinner-button"
+				on:click={() => {
+					stop();
+				}}
+			>
+				<div class="icon">
+					<Spinner />
+				</div>
+				{i18n("audio.waiting")}
+			</button>
 		{:else}
 			<button
 				class="record-button"
@@ -95,14 +109,21 @@
 		margin: var(--spacing-xl);
 	}
 
+	.icon {
+		width: var(--size-4);
+		height: var(--size-4);
+		fill: var(--primary-600);
+		stroke: var(--primary-600);
+	}
+
 	.stop-button-paused {
 		display: none;
 		height: var(--size-8);
 		width: var(--size-20);
 		background-color: var(--block-background-fill);
-		border-radius: var(--radius-3xl);
+		border-radius: var(--button-large-radius);
 		align-items: center;
-		border: 1px solid var(--neutral-400);
+		border: 1px solid var(--block-border-color);
 		margin-right: 5px;
 	}
 
@@ -129,13 +150,25 @@
 		height: var(--size-8);
 		width: var(--size-20);
 		background-color: var(--block-background-fill);
-		border-radius: var(--radius-3xl);
+		border-radius: var(--button-large-radius);
 		align-items: center;
 		border: 1px solid var(--primary-600);
 		margin-right: 5px;
 		display: flex;
 	}
 
+	.spinner-button {
+		height: var(--size-8);
+		width: var(--size-24);
+		background-color: var(--block-background-fill);
+		border-radius: var(--radius-3xl);
+		align-items: center;
+		border: 1px solid var(--primary-600);
+		margin: 0 var(--spacing-xl);
+		display: flex;
+		justify-content: space-evenly;
+	}
+
 	.record-button::before {
 		content: "";
 		height: var(--size-4);
@@ -149,10 +182,10 @@
 		height: var(--size-8);
 		width: var(--size-24);
 		background-color: var(--block-background-fill);
-		border-radius: var(--radius-3xl);
+		border-radius: var(--button-large-radius);
 		display: flex;
 		align-items: center;
-		border: 1px solid var(--neutral-400);
+		border: 1px solid var(--block-border-color);
 	}
 
 	@keyframes scaling {
diff --git a/js/box/CHANGELOG.md b/js/box/CHANGELOG.md
index 7dc36a3f62eb8..cdf5e29214fdd 100644
--- a/js/box/CHANGELOG.md
+++ b/js/box/CHANGELOG.md
@@ -1,5 +1,39 @@
 # @gradio/box
 
+## 0.2.0-beta.3
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.2.0-beta.2
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.4
+
+## 0.2.0-beta.1
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.2.0-beta.0
+
+### Features
+
+- [#9326](https://github.com/gradio-app/gradio/pull/9326) [`7afb9a1`](https://github.com/gradio-app/gradio/commit/7afb9a14fa64310eb8b70f43a3bad373e46e36c1) - 5.0 merge take 2.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+
+## 0.1.25-beta.1
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+
 ## 0.1.25
 
 ### Fixes
@@ -8,7 +42,7 @@
 
 ### Dependency updates
 
-- @gradio/atoms@0.8.1
+- @gradio/atoms@0.8.1-beta.0
 
 ## 0.1.24
 
diff --git a/js/box/package.json b/js/box/package.json
index e36c63cfc20e9..d40a19c3686f7 100644
--- a/js/box/package.json
+++ b/js/box/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/box",
-	"version": "0.1.25",
+	"version": "0.2.0-beta.3",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/build/CHANGELOG.md b/js/build/CHANGELOG.md
index bc4d68eb70985..58fd2c968b06c 100644
--- a/js/build/CHANGELOG.md
+++ b/js/build/CHANGELOG.md
@@ -1,5 +1,24 @@
 # @self/build
 
+## 0.1.0-beta.3
+
+### Features
+
+- [#9482](https://github.com/gradio-app/gradio/pull/9482) [`bd6c5f2`](https://github.com/gradio-app/gradio/commit/bd6c5f237b0631d86273c7684c3bf2b1011992a3) - Fix custom component CLI on main/5.0.  Thanks @freddyaboulton!
+
+## 0.1.0-beta.2
+
+### Features
+
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+- [#9326](https://github.com/gradio-app/gradio/pull/9326) [`7afb9a1`](https://github.com/gradio-app/gradio/commit/7afb9a14fa64310eb8b70f43a3bad373e46e36c1) - 5.0 merge take 2.  Thanks @pngwn!
+
+## 0.0.3-beta.1
+
+### Dependency updates
+
+- @gradio/theme@0.3.0-beta.1
+
 ## 0.0.3
 
 ### Fixes
@@ -8,7 +27,7 @@
 
 ### Dependency updates
 
-- @gradio/theme@0.2.5
+- @gradio/theme@0.2.5-beta.0
 
 ## 0.0.2
 
diff --git a/js/build/out/component_loader.js b/js/build/out/component_loader.js
index 5b4362f8acc9f..c4e34d5d75258 100644
--- a/js/build/out/component_loader.js
+++ b/js/build/out/component_loader.js
@@ -2,8 +2,10 @@
 
 const request_map = {};
 
+const is_browser = typeof window !== "undefined";
+
 export function load_component({ api_url, name, id, variant }) {
-	const comps = window.__GRADIO__CC__;
+	const comps = is_browser && window.__GRADIO__CC__;
 
 	const _component_map = {
 		// eslint-disable-next-line no-undef
@@ -59,6 +61,9 @@ export function load_component({ api_url, name, id, variant }) {
 }
 
 function load_css(url) {
+	if(!is_browser) {
+		return Promise.resolve();
+	}
 	return new Promise((resolve, reject) => {
 		const link = document.createElement("link");
 		link.rel = "stylesheet";
@@ -70,12 +75,32 @@ function load_css(url) {
 }
 
 function get_component_with_css(api_url, id, variant) {
-	return Promise.all([
+	const environment = is_browser ? "client": "server";
+	let path;
+	if (environment === "server") {
+	  // uncomment when we make gradio cc build support ssr
+	  //path = await (await fetch(`${api_url}/custom_component/${id}/${variant}/index.js/server`)).text();
+	  return Promise.all([
 		load_css(`${api_url}/custom_component/${id}/${variant}/style.css`),
 		import(
-			/* @vite-ignore */ `${api_url}/custom_component/${id}/${variant}/index.js`
+		  /* @vite-ignore */
+		  "@gradio/fallback"
 		)
-	]).then(([_, module]) => {
+	  ]).then(([_, module]) => {
 		return module;
-	});
-}
+	  });
+	}
+
+	path = `${api_url}/custom_component/${id}/${environment}/${variant}/index.js`;
+
+	return Promise.all([
+		load_css(`${api_url}/custom_component/${id}/${environment}/${variant}/style.css`),
+		import(
+		  /* @vite-ignore */
+		  path
+		)
+	  ]).then(([_, module]) => {
+		return module;
+	  });
+
+  }
diff --git a/js/build/package.json b/js/build/package.json
index 0ca17e9b4aa5f..9bade3f34edb2 100644
--- a/js/build/package.json
+++ b/js/build/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@self/build",
-	"version": "0.0.3",
+	"version": "0.1.0-beta.3",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"main": "out/index.js",
@@ -8,7 +8,7 @@
 	"author": "",
 	"license": "ISC",
 	"scripts": {
-		"build": "esbuild src/index.ts --platform=node --format=esm --target=node18 --bundle --packages=external --outfile=out/index.js"
+		"build": "esbuild src/index.ts --platform=node --format=esm --target=node18 --bundle --packages=external --outfile=out/index.js && cp src/component_loader.js out/"
 	},
 	"dependencies": {
 		"@gradio/theme": "workspace:^",
diff --git a/js/build/src/component_loader.js b/js/build/src/component_loader.js
index 5b4362f8acc9f..c4e34d5d75258 100644
--- a/js/build/src/component_loader.js
+++ b/js/build/src/component_loader.js
@@ -2,8 +2,10 @@
 
 const request_map = {};
 
+const is_browser = typeof window !== "undefined";
+
 export function load_component({ api_url, name, id, variant }) {
-	const comps = window.__GRADIO__CC__;
+	const comps = is_browser && window.__GRADIO__CC__;
 
 	const _component_map = {
 		// eslint-disable-next-line no-undef
@@ -59,6 +61,9 @@ export function load_component({ api_url, name, id, variant }) {
 }
 
 function load_css(url) {
+	if(!is_browser) {
+		return Promise.resolve();
+	}
 	return new Promise((resolve, reject) => {
 		const link = document.createElement("link");
 		link.rel = "stylesheet";
@@ -70,12 +75,32 @@ function load_css(url) {
 }
 
 function get_component_with_css(api_url, id, variant) {
-	return Promise.all([
+	const environment = is_browser ? "client": "server";
+	let path;
+	if (environment === "server") {
+	  // uncomment when we make gradio cc build support ssr
+	  //path = await (await fetch(`${api_url}/custom_component/${id}/${variant}/index.js/server`)).text();
+	  return Promise.all([
 		load_css(`${api_url}/custom_component/${id}/${variant}/style.css`),
 		import(
-			/* @vite-ignore */ `${api_url}/custom_component/${id}/${variant}/index.js`
+		  /* @vite-ignore */
+		  "@gradio/fallback"
 		)
-	]).then(([_, module]) => {
+	  ]).then(([_, module]) => {
 		return module;
-	});
-}
+	  });
+	}
+
+	path = `${api_url}/custom_component/${id}/${environment}/${variant}/index.js`;
+
+	return Promise.all([
+		load_css(`${api_url}/custom_component/${id}/${environment}/${variant}/style.css`),
+		import(
+		  /* @vite-ignore */
+		  path
+		)
+	  ]).then(([_, module]) => {
+		return module;
+	  });
+
+  }
diff --git a/js/button/Button.stories.svelte b/js/button/Button.stories.svelte
index 8677141807a8f..caaac0f368a23 100644
--- a/js/button/Button.stories.svelte
+++ b/js/button/Button.stories.svelte
@@ -55,22 +55,41 @@
 	<Button value="Gradio Button" {...args} />
 </Template>
 
-<Story name="Primary" args={{ variant: "primary", size: "lg", scale: 1 }} />
-<Story name="Secondary" args={{ variant: "secondary", size: "lg" }} />
-<Story name="Stop" args={{ variant: "stop", size: "lg" }} />
+<Story
+	name="Primary"
+	args={{ variant: "primary", size: "lg", scale: 1, interactive: true }}
+/>
+<Story
+	name="Secondary"
+	args={{ variant: "secondary", size: "lg", interactive: true }}
+/>
+<Story name="Stop" args={{ variant: "stop", size: "lg", interactive: true }} />
 <Story
 	name="Button with link"
-	args={{ link: "https://huggingface.co/welcome" }}
+	args={{ link: "https://huggingface.co/welcome", interactive: true }}
 />
 <Story
 	name="Button with external image icon"
 	args={{
+		interactive: true,
 		icon: {
 			url: "https://huggingface.co/front/assets/huggingface_logo-noborder.svg",
 			path: "https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
 		}
 	}}
 />
+<Story
+	name="Button with external image icon and no text"
+	args={{
+		interactive: true,
+		icon: {
+			url: "https://huggingface.co/front/assets/huggingface_logo-noborder.svg",
+			path: "https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
+		},
+		value: ""
+	}}
+/>
+
 <Story
 	name="Button with visible equal to false"
 	args={{
diff --git a/js/button/CHANGELOG.md b/js/button/CHANGELOG.md
index b0828d14ab24a..a7ee21d4c7b80 100644
--- a/js/button/CHANGELOG.md
+++ b/js/button/CHANGELOG.md
@@ -1,5 +1,70 @@
 # @gradio/button
 
+## 0.3.0-beta.7
+
+### Features
+
+- [#9437](https://github.com/gradio-app/gradio/pull/9437) [`c3d93be`](https://github.com/gradio-app/gradio/commit/c3d93bef94b9401747a363f7bad88a1d347d535b) - Adding new themes to Gradio 5.0.  Thanks @allisonwhilden!
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.7
+
+## 0.3.0-beta.6
+
+### Dependency updates
+
+- @gradio/client@1.6.0-beta.4
+- @gradio/upload@0.13.0-beta.6
+
+## 0.3.0-beta.5
+
+### Features
+
+- [#9496](https://github.com/gradio-app/gradio/pull/9496) [`1647ebd`](https://github.com/gradio-app/gradio/commit/1647ebddc3e2ed6fc143a62629409e32afcc5801) - UI theme fixes.  Thanks @aliabid94!
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.5
+
+## 0.3.0-beta.4
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.4
+
+## 0.3.0-beta.3
+
+### Fixes
+
+- [#9405](https://github.com/gradio-app/gradio/pull/9405) [`bf27ff4`](https://github.com/gradio-app/gradio/commit/bf27ff4ac8ada33ea03dd26d5c1c1115aa1f318a) - Center icon in button when no text is present.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.3
+- @gradio/client@1.6.0-beta.3
+
+## 0.3.0-beta.2
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.2
+- @gradio/client@1.6.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.3.0-beta.1
+
+### Features
+
+- [#9167](https://github.com/gradio-app/gradio/pull/9167) [`e9e737e`](https://github.com/gradio-app/gradio/commit/e9e737eeeb61d0bbf43277c75b6ffed8b34aa445) - Redesign `gr.Button()`.  Thanks @hannahblair!
+- [#9254](https://github.com/gradio-app/gradio/pull/9254) [`03f3735`](https://github.com/gradio-app/gradio/commit/03f3735fba1fd4f1978b5431af9e67de3b6e7945) - Adds a "huggingface" button variant, and makes it the default for `gr.LoginButton` and `gr.DuplicateButton`.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/utils@0.7.0-beta.1
+- @gradio/client@1.6.0-beta.1
+- @gradio/upload@0.12.4-beta.1
+
 ## 0.2.51
 
 ### Fixes
diff --git a/js/button/package.json b/js/button/package.json
index d68c4f000d3dd..09e2a1eaf294b 100644
--- a/js/button/package.json
+++ b/js/button/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/button",
-	"version": "0.2.51",
+	"version": "0.3.0-beta.7",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/button/shared/Button.svelte b/js/button/shared/Button.svelte
index 576355286b3d5..605581d992d68 100644
--- a/js/button/shared/Button.svelte
+++ b/js/button/shared/Button.svelte
@@ -4,7 +4,8 @@
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
-	export let variant: "primary" | "secondary" | "stop" = "secondary";
+	export let variant: "primary" | "secondary" | "stop" | "huggingface" =
+		"secondary";
 	export let size: "sm" | "lg" = "lg";
 	export let value: string | null = null;
 	export let link: string | null = null;
@@ -49,7 +50,12 @@
 		{disabled}
 	>
 		{#if icon}
-			<img class="button-icon" src={icon.url} alt={`${value} icon`} />
+			<img
+				class="button-icon"
+				class:right-padded={value}
+				src={icon.url}
+				alt={`${value} icon`}
+			/>
 		{/if}
 		<slot />
 	</button>
@@ -62,21 +68,17 @@
 		justify-content: center;
 		align-items: center;
 		transition: var(--button-transition);
-		box-shadow: var(--button-shadow);
 		padding: var(--size-0-5) var(--size-2);
 		text-align: center;
 	}
 
-	button:hover,
-	button[disabled],
-	a:hover,
-	a.disabled {
-		box-shadow: var(--button-shadow-hover);
+	button:hover {
+		transform: var(--button-transform-hover);
 	}
 
 	button:active,
 	a:active {
-		box-shadow: var(--button-shadow-active);
+		transform: var(--button-transform-active);
 	}
 
 	button[disabled],
@@ -84,6 +86,7 @@
 		opacity: 0.5;
 		filter: grayscale(30%);
 		cursor: not-allowed;
+		transform: none;
 	}
 
 	.hidden {
@@ -94,39 +97,74 @@
 		border: var(--button-border-width) solid var(--button-primary-border-color);
 		background: var(--button-primary-background-fill);
 		color: var(--button-primary-text-color);
+		box-shadow: var(--button-primary-shadow);
 	}
 	.primary:hover,
 	.primary[disabled] {
-		border-color: var(--button-primary-border-color-hover);
 		background: var(--button-primary-background-fill-hover);
 		color: var(--button-primary-text-color-hover);
 	}
 
+	.primary:hover {
+		border-color: var(--button-primary-border-color-hover);
+		box-shadow: var(--button-primary-shadow-hover);
+	}
+	.primary:active {
+		box-shadow: var(--button-primary-shadow-active);
+	}
+
+	.primary[disabled] {
+		border-color: var(--button-primary-border-color);
+	}
+
 	.secondary {
 		border: var(--button-border-width) solid
 			var(--button-secondary-border-color);
 		background: var(--button-secondary-background-fill);
 		color: var(--button-secondary-text-color);
+		box-shadow: var(--button-secondary-shadow);
 	}
 
 	.secondary:hover,
 	.secondary[disabled] {
-		border-color: var(--button-secondary-border-color-hover);
 		background: var(--button-secondary-background-fill-hover);
 		color: var(--button-secondary-text-color-hover);
 	}
 
+	.secondary:hover {
+		border-color: var(--button-secondary-border-color-hover);
+		box-shadow: var(--button-secondary-shadow-hover);
+	}
+	.secondary:active {
+		box-shadow: var(--button-secondary-shadow-active);
+	}
+
+	.secondary[disabled] {
+		border-color: var(--button-secondary-border-color);
+	}
+
 	.stop {
-		border: var(--button-border-width) solid var(--button-cancel-border-color);
 		background: var(--button-cancel-background-fill);
 		color: var(--button-cancel-text-color);
+		border: var(--button-border-width) solid var(--button-cancel-border-color);
+		box-shadow: var(--button-secondary-shadow);
 	}
 
 	.stop:hover,
 	.stop[disabled] {
-		border-color: var(--button-cancel-border-color-hover);
 		background: var(--button-cancel-background-fill-hover);
-		color: var(--button-cancel-text-color-hover);
+	}
+
+	.stop:hover {
+		border-color: var(--button-cancel-border-color-hover);
+		box-shadow: var(--button-secondary-shadow-hover);
+	}
+	.stop:active {
+		box-shadow: var(--button-secondary-shadow-active);
+	}
+
+	.stop[disabled] {
+		border-color: var(--button-cancel-border-color);
 	}
 
 	.sm {
@@ -146,6 +184,14 @@
 	.button-icon {
 		width: var(--text-xl);
 		height: var(--text-xl);
+	}
+	.button-icon.right-padded {
 		margin-right: var(--spacing-xl);
 	}
+
+	.huggingface {
+		border: var(--button-border-width) solid
+			var(--button-secondary-border-color);
+		background: var(--background-fill-primary);
+	}
 </style>
diff --git a/js/chatbot/CHANGELOG.md b/js/chatbot/CHANGELOG.md
index b2a5b85642d84..c75fe28cafc24 100644
--- a/js/chatbot/CHANGELOG.md
+++ b/js/chatbot/CHANGELOG.md
@@ -1,5 +1,147 @@
 # @gradio/chatbot
 
+## 0.14.0-beta.9
+
+### Fixes
+
+- [#9600](https://github.com/gradio-app/gradio/pull/9600) [`9f71086`](https://github.com/gradio-app/gradio/commit/9f71086036339bfdd14f3aab29729041a01fc2d4) - Ensure undo/try shows for final bot message in gr.Chatbot.  Thanks @hannahblair!
+
+## 0.14.0-beta.8
+
+### Features
+
+- [#9593](https://github.com/gradio-app/gradio/pull/9593) [`cc61fe7`](https://github.com/gradio-app/gradio/commit/cc61fe7047ac61779a61cce52c666400b9517daa) - Some more chatbot fixes.  Thanks @dawoodkhan82!
+- [#9582](https://github.com/gradio-app/gradio/pull/9582) [`43a7f42`](https://github.com/gradio-app/gradio/commit/43a7f420d8ac34c7f7fa71d6e630a4c8618d3780) - Chatbot autoscroll.  Thanks @whitphx!
+- [#9598](https://github.com/gradio-app/gradio/pull/9598) [`ffc33fa`](https://github.com/gradio-app/gradio/commit/ffc33facaec1bcc92add5892afb86b7b5ba037d4) - Fix markdown code copy/check button in gr.Chatbot.  Thanks @hannahblair!
+- [#9499](https://github.com/gradio-app/gradio/pull/9499) [`17e6c84`](https://github.com/gradio-app/gradio/commit/17e6c84d6b11651cd03c1d47caec85de62030ea0) - Fix `gr.Chatbot` panels layout.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.7
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+- @gradio/image@0.16.0-beta.7
+- @gradio/video@0.11.0-beta.7
+- @gradio/markdown@0.10.0-beta.5
+- @gradio/gallery@0.13.0-beta.7
+- @gradio/plot@0.7.0-beta.6
+
+## 0.14.0-beta.7
+
+### Features
+
+- [#9571](https://github.com/gradio-app/gradio/pull/9571) [`148345d`](https://github.com/gradio-app/gradio/commit/148345d107763754710505281ad70368ebc6f3ec) - Fix chatinterface embedding height issues.  Thanks @aliabid94!
+
+### Dependency updates
+
+- @gradio/video@0.11.0-beta.6
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+- @gradio/client@1.6.0-beta.4
+- @gradio/upload@0.13.0-beta.6
+- @gradio/image@0.16.0-beta.6
+- @gradio/gallery@0.13.0-beta.6
+- @gradio/markdown@0.10.0-beta.4
+- @gradio/plot@0.7.0-beta.5
+
+## 0.14.0-beta.6
+
+### Features
+
+- [#9488](https://github.com/gradio-app/gradio/pull/9488) [`4e6a47f`](https://github.com/gradio-app/gradio/commit/4e6a47f5a29cb885d5bc01a79ca4cc45d298f0b1) - Fixes: Chatbot examples for custom chatbot + rename `suggestions` -> `examples`.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.5
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/video@0.11.0-beta.5
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+- @gradio/markdown@0.10.0-beta.3
+- @gradio/gallery@0.13.0-beta.5
+- @gradio/plot@0.7.0-beta.4
+- @gradio/image@0.16.0-beta.5
+
+## 0.14.0-beta.5
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/upload@0.13.0-beta.4
+- @gradio/markdown@0.10.0-beta.2
+- @gradio/image@0.16.0-beta.4
+- @gradio/video@0.11.0-beta.4
+- @gradio/wasm@0.14.0-beta.3
+- @gradio/plot@0.7.0-beta.3
+- @gradio/gallery@0.13.0-beta.4
+
+## 0.14.0-beta.4
+
+### Features
+
+- [#9453](https://github.com/gradio-app/gradio/pull/9453) [`56dbf77`](https://github.com/gradio-app/gradio/commit/56dbf77671012015efd3c745bc33e5074ab7158f) - Chatbot bug fixes.  Thanks @dawoodkhan82!
+
+## 0.14.0-beta.3
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.3
+- @gradio/video@0.11.0-beta.3
+- @gradio/client@1.6.0-beta.3
+- @gradio/gallery@0.13.0-beta.3
+- @gradio/image@0.16.0-beta.3
+
+## 0.14.0-beta.2
+
+### Features
+
+- [#9359](https://github.com/gradio-app/gradio/pull/9359) [`50c3a7f`](https://github.com/gradio-app/gradio/commit/50c3a7f1541f632853a96f3d979ebeef6ad82869) - Small tweak to how thoughts are shown in `gr.Chatbot`.  Thanks @abidlabs!
+- [#9323](https://github.com/gradio-app/gradio/pull/9323) [`06babda`](https://github.com/gradio-app/gradio/commit/06babda0395fd3fbd323c1c3cb33704ecfd6deb0) - Disable liking user message in chatbot by default but make it configurable.  Thanks @freddyaboulton!
+- [#8966](https://github.com/gradio-app/gradio/pull/8966) [`8e52b6a`](https://github.com/gradio-app/gradio/commit/8e52b6a3e75957462bc7fdbf6ff9c280084d5f08) - Chatbot Examples.  Thanks @dawoodkhan82!
+- [#9261](https://github.com/gradio-app/gradio/pull/9261) [`73647a0`](https://github.com/gradio-app/gradio/commit/73647a07b0439efabe3dd218ff6c366ffa3b84a0) - Move icons into `IconButtonWrapper`.  Thanks @hannahblair!
+- [#9316](https://github.com/gradio-app/gradio/pull/9316) [`4338f29`](https://github.com/gradio-app/gradio/commit/4338f29bce2430d765f20070d1823ecc19d940cb) - 9227 chatinterface retry bug.  Thanks @freddyaboulton!
+- [#9313](https://github.com/gradio-app/gradio/pull/9313) [`1fef9d9`](https://github.com/gradio-app/gradio/commit/1fef9d9a26f0ebce4de18c486702661f6539b1c6) - Standardize `height` across components and add `max_height` and `min_height` parameters where appropriate.  Thanks @abidlabs!
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/gallery@0.13.0-beta.2
+- @gradio/upload@0.13.0-beta.2
+- @gradio/wasm@0.14.0-beta.2
+- @gradio/markdown@0.10.0-beta.2
+- @gradio/client@1.6.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+- @gradio/plot@0.6.5-beta.2
+- @gradio/image@0.16.0-beta.2
+- @gradio/video@0.11.0-beta.2
+
+## 0.14.0-beta.1
+
+### Features
+
+- [#9201](https://github.com/gradio-app/gradio/pull/9201) [`5492e74`](https://github.com/gradio-app/gradio/commit/5492e742b1f1fa618208cce523f50ad22a6e86f1) - Move buttons from chat_interface into Chatbot.  Thanks @freddyaboulton!
+- [#9187](https://github.com/gradio-app/gradio/pull/9187) [`5bf00b7`](https://github.com/gradio-app/gradio/commit/5bf00b7524ebf399b48719120a49d15bb21bd65c) - make all component SSR compatible.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/video@0.11.0-beta.1
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/client@1.6.0-beta.1
+- @gradio/image@0.16.0-beta.1
+- @gradio/upload@0.12.4-beta.1
+- @gradio/markdown@0.9.4-beta.1
+- @gradio/wasm@0.13.1-beta.1
+- @gradio/theme@0.3.0-beta.1
+- @gradio/gallery@0.13.0-beta.1
+- @gradio/plot@0.6.5-beta.1
+
 ## 0.13.1
 
 ### Features
diff --git a/js/chatbot/Chatbot.stories.svelte b/js/chatbot/Chatbot.stories.svelte
index 1a8a6097c2c29..01828fa37724b 100644
--- a/js/chatbot/Chatbot.stories.svelte
+++ b/js/chatbot/Chatbot.stories.svelte
@@ -38,6 +38,7 @@
 
 <Template let:args>
 	<Chatbot
+		latex_delimiters={[{ left: "$$", right: "$$", display: true }]}
 		value={[
 			[
 				"Can you write a function in Python?",
@@ -60,6 +61,11 @@
 	args={{ latex_delimiters: [], height: 200 }}
 />
 
+<Story
+	name="Chatbot with math disabled, small max_height"
+	args={{ latex_delimiters: [], max_height: 200 }}
+/>
+
 <Story
 	name="Chatbot with text rendered right-to-left"
 	args={{
@@ -81,7 +87,6 @@
 <Story
 	name="Chatbot with copy button"
 	args={{
-		latex_delimiters: [{ left: "$$", right: "$$", display: true }],
 		show_copy_button: true
 	}}
 />
@@ -142,29 +147,6 @@
 	}}
 />
 
-<Story
-	name="Chatbot with headers and lists"
-	args={{
-		value: [
-			[
-				`# Markdown Example
-
-This document is a showcase of various Markdown capabilities.`
-			],
-			[
-				`## Table of Contents
-
-1. [Text Formatting](#text-formating)
-2. [Code Blocks](#code-blocks)
-3. [Tables](#tables)
-4. [Lists](#lists)
-5. [Links and Images](#links-and-images)
-6. [Quotes](#quotes)`
-			]
-		]
-	}}
-/>
-
 <Story
 	name="Chatbot with headers and lists"
 	args={{
diff --git a/js/chatbot/Index.svelte b/js/chatbot/Index.svelte
index 331b78d1c0739..c9373fb589a57 100644
--- a/js/chatbot/Index.svelte
+++ b/js/chatbot/Index.svelte
@@ -6,12 +6,18 @@
 	import type { Gradio, SelectData, LikeData } from "@gradio/utils";
 
 	import ChatBot from "./shared/ChatBot.svelte";
+	import type { UndoRetryData } from "./shared/utils";
 	import { Block, BlockLabel } from "@gradio/atoms";
 	import type { LoadingStatus } from "@gradio/statustracker";
 	import { Chat } from "@gradio/icons";
 	import type { FileData } from "@gradio/client";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { Message, TupleFormat, NormalisedMessage } from "./types";
+	import type {
+		Message,
+		ExampleMessage,
+		TupleFormat,
+		NormalisedMessage
+	} from "./types";
 
 	import { normalise_tuples, normalise_messages } from "./shared/utils";
 
@@ -36,6 +42,9 @@
 	export let type: "tuples" | "messages" = "tuples";
 	export let render_markdown = true;
 	export let line_breaks = true;
+	export let autoscroll = true;
+	export let _retryable = false;
+	export let _undoable = false;
 	export let latex_delimiters: {
 		left: string;
 		right: string;
@@ -48,8 +57,11 @@
 		error: string;
 		like: LikeData;
 		clear_status: LoadingStatus;
+		example_select: SelectData;
+		retry: UndoRetryData;
+		undo: UndoRetryData;
+		clear: null;
 	}>;
-	export let avatar_images: [FileData | null, FileData | null] = [null, null];
 
 	let _value: NormalisedMessage[] | null = [];
 
@@ -58,9 +70,14 @@
 			? normalise_tuples(value as TupleFormat, root)
 			: normalise_messages(value as Message[], root);
 
+	export let avatar_images: [FileData | null, FileData | null] = [null, null];
+	export let like_user_message = false;
 	export let loading_status: LoadingStatus | undefined = undefined;
-	export let height = 400;
+	export let height: number | string | undefined;
+	export let min_height: number | string | undefined;
+	export let max_height: number | string | undefined;
 	export let placeholder: string | null = null;
+	export let examples: ExampleMessage[] | null = null;
 	export let theme_mode: "system" | "light" | "dark";
 </script>
 
@@ -72,7 +89,11 @@
 	{scale}
 	{min_width}
 	{height}
-	allow_overflow={false}
+	{min_height}
+	{max_height}
+	allow_overflow={true}
+	flex={true}
+	overflow_behavior="auto"
 >
 	{#if loading_status}
 		<StatusTracker
@@ -105,21 +126,34 @@
 			{render_markdown}
 			{theme_mode}
 			pending_message={loading_status?.status === "pending"}
+			generating={loading_status?.status === "generating"}
 			{rtl}
 			{show_copy_button}
+			{like_user_message}
 			on:change={() => gradio.dispatch("change", value)}
 			on:select={(e) => gradio.dispatch("select", e.detail)}
 			on:like={(e) => gradio.dispatch("like", e.detail)}
 			on:share={(e) => gradio.dispatch("share", e.detail)}
 			on:error={(e) => gradio.dispatch("error", e.detail)}
+			on:example_select={(e) => gradio.dispatch("example_select", e.detail)}
+			on:retry={(e) => gradio.dispatch("retry", e.detail)}
+			on:undo={(e) => gradio.dispatch("undo", e.detail)}
+			on:clear={() => {
+				value = [];
+				gradio.dispatch("clear");
+			}}
 			{avatar_images}
 			{sanitize_html}
 			{bubble_full_width}
 			{line_breaks}
+			{autoscroll}
 			{layout}
 			{placeholder}
-			upload={gradio.client.upload}
-			_fetch={gradio.client.fetch}
+			{examples}
+			{_retryable}
+			{_undoable}
+			upload={(...args) => gradio.client.upload(...args)}
+			_fetch={(...args) => gradio.client.fetch(...args)}
 			load_component={gradio.load_component}
 			msg_format={type}
 			root={gradio.root}
@@ -135,5 +169,10 @@
 		align-items: start;
 		width: 100%;
 		height: 100%;
+		flex-grow: 1;
+	}
+
+	:global(.progress-text) {
+		right: auto;
 	}
 </style>
diff --git a/js/chatbot/package.json b/js/chatbot/package.json
index c1ec77647de3b..e795296be22a5 100644
--- a/js/chatbot/package.json
+++ b/js/chatbot/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/chatbot",
-	"version": "0.13.1",
+	"version": "0.14.0-beta.9",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/chatbot/shared/ButtonPanel.svelte b/js/chatbot/shared/ButtonPanel.svelte
index b1496e15132b9..d05814aa29125 100644
--- a/js/chatbot/shared/ButtonPanel.svelte
+++ b/js/chatbot/shared/ButtonPanel.svelte
@@ -6,13 +6,18 @@
 	import { DownloadLink } from "@gradio/wasm/svelte";
 	import type { NormalisedMessage, TextMessage } from "../types";
 	import { is_component_message } from "./utils";
+	import { Retry, Undo } from "@gradio/icons";
+	import { IconButtonWrapper, IconButton } from "@gradio/atoms";
 
 	export let likeable: boolean;
+	export let show_retry: boolean;
+	export let show_undo: boolean;
 	export let show_copy_button: boolean;
 	export let show: boolean;
 	export let message: NormalisedMessage | NormalisedMessage[];
 	export let position: "right" | "left";
 	export let avatar: FileData | null;
+	export let disable: boolean;
 
 	export let handle_action: (selected: string | null) => void;
 	export let layout: "bubble" | "panel";
@@ -45,80 +50,68 @@
 
 {#if show}
 	<div
-		class="message-buttons-{position} {layout}  message-buttons {avatar !==
+		class="message-buttons-{position} {layout} message-buttons {avatar !==
 			null && 'with-avatar'}"
 	>
-		{#if show_copy}
-			<Copy value={message_text} />
-		{/if}
-		{#if show_download && !Array.isArray(message) && is_component_message(message)}
-			<DownloadLink
-				href={message?.content?.value.url}
-				download={message.content.value.orig_name || "image"}
-			>
-				<span class="icon-wrap">
-					<DownloadIcon />
-				</span>
-			</DownloadLink>
-		{/if}
-		{#if likeable}
-			<LikeDislike {handle_action} padded={show_copy || show_download} />
-		{/if}
+		<IconButtonWrapper top_panel={false}>
+			{#if show_copy}
+				<Copy value={message_text} />
+			{/if}
+			{#if show_download && !Array.isArray(message) && is_component_message(message)}
+				<DownloadLink
+					href={message?.content?.value.url}
+					download={message.content.value.orig_name || "image"}
+				>
+					<IconButton Icon={DownloadIcon} />
+				</DownloadLink>
+			{/if}
+			{#if show_retry}
+				<IconButton
+					Icon={Retry}
+					on:click={() => handle_action("retry")}
+					disabled={disable}
+				/>
+			{/if}
+			{#if show_undo}
+				<IconButton
+					Icon={Undo}
+					on:click={() => handle_action("undo")}
+					disabled={disable}
+				/>
+			{/if}
+			{#if likeable}
+				<LikeDislike {handle_action} />
+			{/if}
+		</IconButtonWrapper>
 	</div>
 {/if}
 
 <style>
-	.icon-wrap {
-		display: block;
-		color: var(--body-text-color-subdued);
+	.bubble :global(.icon-button-wrapper) {
+		margin: 0px calc(var(--spacing-xl) * 2);
 	}
 
-	.icon-wrap:hover {
-		color: var(--body-text-color);
-	}
-
-	.message-buttons {
-		border-radius: var(--radius-md);
-		display: flex;
-		align-items: center;
-
-		height: var(--size-7);
-		align-self: self-end;
-		margin: 0px calc(var(--spacing-xl) * 3);
-		padding-left: 5px;
-		z-index: 1;
-		padding-bottom: var(--spacing-xl);
-		padding: var(--spacing-md) var(--spacing-md);
-		border: 1px solid var(--border-color-primary);
-		background: var(--border-color-secondary);
-		gap: var(--spacing-md);
-	}
 	.message-buttons-left {
-		align-self: start;
-		left: 0px;
+		align-self: flex-start;
 	}
 
-	.panel.message-buttons-left,
-	.panel.message-buttons-right {
-		margin: 10px 0 2px 0;
+	.bubble.message-buttons-right {
+		align-self: flex-end;
 	}
 
-	/* .message-buttons {
-		left: 0px;
-		right: 0px;
-		top: unset;
-		bottom: calc(-30px - var(--spacing-xl));
-		display: flex;
-		justify-content: flex-start;
-		align-items: center;
-		gap: 0px;
-	} */
+	.message-buttons-right :global(.icon-button-wrapper) {
+		margin-left: auto;
+	}
 
-	.message-buttons :global(> *) {
-		margin-right: 0px;
+	.bubble.with-avatar {
+		margin-left: calc(var(--spacing-xl) * 5);
+		margin-right: calc(var(--spacing-xl) * 5);
 	}
 
-	.with-avatar {
-		margin-left: calc(var(--spacing-xl) * 4 + 31px);
+	.panel {
+		display: flex;
+		align-self: flex-start;
+		padding: 0 var(--spacing-xl);
+		z-index: var(--layer-1);
 	}
 </style>
diff --git a/js/chatbot/shared/ChatBot.svelte b/js/chatbot/shared/ChatBot.svelte
index 87a8f9128d5be..9c0245e223a03 100644
--- a/js/chatbot/shared/ChatBot.svelte
+++ b/js/chatbot/shared/ChatBot.svelte
@@ -1,11 +1,18 @@
 <script lang="ts">
-	import { format_chat_for_sharing, is_component_message } from "./utils";
+	import {
+		format_chat_for_sharing,
+		type UndoRetryData,
+		is_last_bot_message,
+		group_messages,
+		load_components,
+		get_components_from_messages
+	} from "./utils";
 	import type { NormalisedMessage } from "../types";
-	import { Gradio, copy } from "@gradio/utils";
+	import { copy } from "@gradio/utils";
+	import Message from "./Message.svelte";
 
 	import { dequal } from "dequal/lite";
 	import {
-		beforeUpdate,
 		afterUpdate,
 		createEventDispatcher,
 		type SvelteComponent,
@@ -13,25 +20,22 @@
 		tick,
 		onMount
 	} from "svelte";
-	import { ShareButton } from "@gradio/atoms";
 	import { Image } from "@gradio/image/shared";
 
-	import { Clear } from "@gradio/icons";
+	import { Clear, Trash, Community, ScrollDownArrow } from "@gradio/icons";
+	import { IconButtonWrapper, IconButton } from "@gradio/atoms";
 	import type { SelectData, LikeData } from "@gradio/utils";
-	import type { MessageRole } from "../types";
+	import type { ExampleMessage } from "../types";
 	import { MarkdownCode as Markdown } from "@gradio/markdown";
 	import type { FileData, Client } from "@gradio/client";
 	import type { I18nFormatter } from "js/core/src/gradio_helper";
 	import Pending from "./Pending.svelte";
-	import MessageBox from "./MessageBox.svelte";
+	import { ShareError } from "@gradio/utils";
+	import { Gradio } from "@gradio/utils";
 
 	export let value: NormalisedMessage[] | null = [];
 	let old_value: NormalisedMessage[] | null = null;
 
-	import Component from "./Component.svelte";
-	import LikeButtons from "./ButtonPanel.svelte";
-	import type { LoadedComponent } from "../../core/src/types";
-
 	import CopyAll from "./CopyAll.svelte";
 
 	export let _fetch: typeof fetch;
@@ -39,40 +43,15 @@
 
 	let _components: Record<string, ComponentType<SvelteComponent>> = {};
 
-	async function load_components(component_names: string[]): Promise<void> {
-		let names: string[] = [];
-		let components: ReturnType<typeof load_component>["component"][] = [];
-		component_names.forEach((component_name) => {
-			if (_components[component_name] || component_name === "file") {
-				return;
-			}
-
-			const { name, component } = load_component(component_name, "base");
-			names.push(name);
-			components.push(component);
-			component_name;
-		});
-
-		const loaded_components: LoadedComponent[] = await Promise.all(components);
-		loaded_components.forEach((component, i) => {
-			_components[names[i]] = component.default;
-		});
+	async function update_components(): Promise<void> {
+		_components = await load_components(
+			get_components_from_messages(value),
+			_components,
+			load_component
+		);
 	}
 
-	$: load_components(get_components_from_messages(value));
-
-	function get_components_from_messages(
-		messages: NormalisedMessage[] | null
-	): string[] {
-		if (!messages) return [];
-		let components: Set<string> = new Set();
-		messages.forEach((message) => {
-			if (message.type === "component") {
-				components.add(message.content.component);
-			}
-		});
-		return Array.from(components);
-	}
+	$: value, update_components();
 
 	export let latex_delimiters: {
 		left: string;
@@ -80,6 +59,7 @@
 		display: boolean;
 	}[];
 	export let pending_message = false;
+	export let generating = false;
 	export let selectable = false;
 	export let likeable = false;
 	export let show_share_button = false;
@@ -91,78 +71,99 @@
 	export let bubble_full_width = true;
 	export let render_markdown = true;
 	export let line_breaks = true;
+	export let autoscroll = true;
 	export let theme_mode: "system" | "light" | "dark";
 	export let i18n: I18nFormatter;
 	export let layout: "bubble" | "panel" = "bubble";
 	export let placeholder: string | null = null;
 	export let upload: Client["upload"];
 	export let msg_format: "tuples" | "messages" = "tuples";
+	export let examples: ExampleMessage[] | null = null;
+	export let _retryable = false;
+	export let _undoable = false;
+	export let like_user_message = false;
 	export let root: string;
 
 	let target: HTMLElement | null = null;
 
 	onMount(() => {
 		target = document.querySelector("div.gradio-container");
-		adjust_text_size();
 	});
 
 	let div: HTMLDivElement;
-	let autoscroll: boolean;
-
-	function adjust_text_size(): void {
-		let style = getComputedStyle(document.body);
-		let body_text_size = style.getPropertyValue("--body-text-size");
-		let updated_text_size;
-
-		switch (body_text_size) {
-			case "13px":
-				updated_text_size = 14;
-				break;
-			case "14px":
-				updated_text_size = 16;
-				break;
-			case "16px":
-				updated_text_size = 20;
-				break;
-			default:
-				updated_text_size = 14;
-				break;
-		}
 
-		document.body.style.setProperty(
-			"--chatbot-body-text-size",
-			updated_text_size + "px"
-		);
-	}
+	let show_scroll_button = false;
 
 	const dispatch = createEventDispatcher<{
 		change: undefined;
 		select: SelectData;
 		like: LikeData;
+		undo: UndoRetryData;
+		retry: UndoRetryData;
+		clear: undefined;
+		share: any;
+		error: string;
+		example_select: SelectData;
 	}>();
 
-	beforeUpdate(() => {
-		autoscroll =
-			div && div.offsetHeight + div.scrollTop > div.scrollHeight - 100;
-	});
+	function is_at_bottom(): boolean {
+		return div && div.offsetHeight + div.scrollTop > div.scrollHeight - 100;
+	}
 
-	async function scroll(): Promise<void> {
+	function scroll_to_bottom(): void {
 		if (!div) return;
-		await tick();
-		requestAnimationFrame(() => {
-			if (autoscroll) {
-				div?.scrollTo(0, div.scrollHeight);
-			}
-		});
+		div.scrollTo(0, div.scrollHeight);
+		show_scroll_button = false;
+	}
+
+	let scroll_after_component_load = false;
+	function on_child_component_load(): void {
+		if (scroll_after_component_load) {
+			scroll_to_bottom();
+			scroll_after_component_load = false;
+		}
+	}
+
+	async function scroll_on_value_update(): Promise<void> {
+		if (!autoscroll) return;
+
+		if (is_at_bottom()) {
+			// Child components may be loaded asynchronously,
+			// so trigger the scroll again after they load.
+			scroll_after_component_load = true;
+
+			await tick(); // Wait for the DOM to update so that the scrollHeight is correct
+			scroll_to_bottom();
+		} else {
+			show_scroll_button = true;
+		}
+	}
+	onMount(() => {
+		scroll_on_value_update();
+	});
+	$: if (value || pending_message || _components) {
+		scroll_on_value_update();
 	}
 
+	onMount(() => {
+		function handle_scroll(): void {
+			if (is_at_bottom()) {
+				show_scroll_button = false;
+			} else {
+				scroll_after_component_load = false;
+			}
+		}
+
+		div?.addEventListener("scroll", handle_scroll);
+		return () => {
+			div?.removeEventListener("scroll", handle_scroll);
+		};
+	});
+
 	let image_preview_source: string;
 	let image_preview_source_alt: string;
 	let is_image_preview_open = false;
 
-	$: if (value || autoscroll || _components) {
-		scroll();
-	}
 	afterUpdate(() => {
 		if (!div) return;
 		div.querySelectorAll("img").forEach((n) => {
@@ -184,12 +185,12 @@
 		}
 	}
 
-	$: groupedMessages = value && group_messages(value);
+	$: groupedMessages = value && group_messages(value, msg_format);
 
-	function handle_select(i: number, message: NormalisedMessage): void {
-		dispatch("select", {
-			index: message.index,
-			value: message.content
+	function handle_example_select(i: number, example: ExampleMessage): void {
+		dispatch("example_select", {
+			index: i,
+			value: { text: example.text, files: example.files }
 		});
 	}
 
@@ -198,6 +199,21 @@
 		message: NormalisedMessage,
 		selected: string | null
 	): void {
+		if (selected === "undo" || selected === "retry") {
+			const val_ = value as NormalisedMessage[];
+			// iterate through messages until we find the last user message
+			// the index of this message is where the user needs to edit the chat history
+			let last_index = val_.length - 1;
+			while (val_[last_index].role === "assistant") {
+				last_index--;
+			}
+			dispatch(selected, {
+				index: val_[last_index].index,
+				value: val_[last_index].content
+			});
+			return;
+		}
+
 		if (msg_format === "tuples") {
 			dispatch("like", {
 				index: message.index,
@@ -220,85 +236,46 @@
 			});
 		}
 	}
-
-	function get_message_label_data(message: NormalisedMessage): string {
-		if (message.type === "text") {
-			return message.content;
-		} else if (
-			message.type === "component" &&
-			message.content.component === "file"
-		) {
-			if (Array.isArray(message.content.value)) {
-				return `file of extension type: ${message.content.value[0].orig_name?.split(".").pop()}`;
-			}
-			return (
-				`file of extension type: ${message.content.value?.orig_name?.split(".").pop()}` +
-				(message.content.value?.orig_name ?? "")
-			);
-		}
-		return `a component of type ${message.content.component ?? "unknown"}`;
-	}
-
-	function group_messages(
-		messages: NormalisedMessage[]
-	): NormalisedMessage[][] {
-		const groupedMessages: NormalisedMessage[][] = [];
-		let currentGroup: NormalisedMessage[] = [];
-		let currentRole: MessageRole | null = null;
-
-		for (const message of messages) {
-			if (msg_format === "tuples") {
-				currentRole = null;
-			}
-
-			if (!(message.role === "assistant" || message.role === "user")) {
-				continue;
-			}
-			if (message.role === currentRole) {
-				currentGroup.push(message);
-			} else {
-				if (currentGroup.length > 0) {
-					groupedMessages.push(currentGroup);
-				}
-				currentGroup = [message];
-				currentRole = message.role;
-			}
-		}
-
-		if (currentGroup.length > 0) {
-			groupedMessages.push(currentGroup);
-		}
-
-		return groupedMessages;
-	}
 </script>
 
-{#if show_share_button && value !== null && value.length > 0}
-	<div class="share-button">
-		<ShareButton
-			{i18n}
-			on:error
-			on:share
-			formatter={format_chat_for_sharing}
-			{value}
-		/>
-	</div>
-{/if}
-
-{#if show_copy_all_button}
-	<CopyAll {value} />
+{#if value !== null && value.length > 0}
+	<IconButtonWrapper>
+		{#if show_share_button}
+			<IconButton
+				Icon={Community}
+				on:click={async () => {
+					try {
+						// @ts-ignore
+						const formatted = await format_chat_for_sharing(value);
+						dispatch("share", {
+							description: formatted
+						});
+					} catch (e) {
+						console.error(e);
+						let message = e instanceof ShareError ? e.message : "Share failed.";
+						dispatch("error", message);
+					}
+				}}
+			>
+				<Community />
+			</IconButton>
+		{/if}
+		<IconButton Icon={Trash} on:click={() => dispatch("clear")}></IconButton>
+		{#if show_copy_all_button}
+			<CopyAll {value} />
+		{/if}
+	</IconButtonWrapper>
 {/if}
 
 <div
 	class={layout === "bubble" ? "bubble-wrap" : "panel-wrap"}
-	class:placeholder-container={value === null || value.length === 0}
 	bind:this={div}
 	role="log"
 	aria-label="chatbot conversation"
 	aria-live="polite"
 >
-	<div class="message-wrap" use:copy>
-		{#if value !== null && value.length > 0 && groupedMessages !== null}
+	{#if value !== null && value.length > 0 && groupedMessages !== null}
+		<div class="message-wrap" use:copy>
 			{#each groupedMessages as messages, i}
 				{@const role = messages[0].role === "user" ? "user" : "bot"}
 				{@const avatar_img = avatar_images[role === "user" ? 0 : 1]}
@@ -314,389 +291,223 @@
 						>
 					</div>
 				{/if}
-				<div
-					class="message-row {layout} {role}-row"
-					class:with_avatar={avatar_img !== null}
-					class:with_opposite_avatar={opposite_avatar_img !== null}
-				>
-					{#if avatar_img !== null}
-						<div class="avatar-container">
-							<Image
-								class="avatar-image"
-								src={avatar_img?.url}
-								alt="{role} avatar"
-							/>
-						</div>
-					{/if}
-					<div
-						class="flex-wrap {role} "
-						class:component-wrap={messages[0].type === "component"}
-					>
-						{#each messages as message, thought_index}
-							{@const msg_type = messages[0].type}
-							<div
-								class="message {role} {is_component_message(message)
-									? message?.content.component
-									: ''}"
-								class:message-fit={!bubble_full_width}
-								class:panel-full-width={true}
-								class:message-markdown-disabled={!render_markdown}
-								style:text-align={rtl && role === "user" ? "left" : "right"}
-								class:component={msg_type === "component"}
-								class:html={is_component_message(message) &&
-									message.content.component === "html"}
-								class:thought={thought_index > 0}
-							>
-								<button
-									data-testid={role}
-									class:latest={i === value.length - 1}
-									class:message-markdown-disabled={!render_markdown}
-									style:user-select="text"
-									class:selectable
-									style:cursor={selectable ? "pointer" : "default"}
-									style:text-align={rtl ? "right" : "left"}
-									on:click={() => handle_select(i, message)}
-									on:keydown={(e) => {
-										if (e.key === "Enter") {
-											handle_select(i, message);
-										}
-									}}
-									dir={rtl ? "rtl" : "ltr"}
-									aria-label={role +
-										"'s message: " +
-										get_message_label_data(message)}
-								>
-									{#if message.type === "text"}
-										{#if message.metadata.title}
-											<MessageBox title={message.metadata.title}>
-												<Markdown
-													message={message.content}
-													{latex_delimiters}
-													{sanitize_html}
-													{render_markdown}
-													{line_breaks}
-													on:load={scroll}
-													{root}
-												/>
-											</MessageBox>
-										{:else}
-											<Markdown
-												message={message.content}
-												{latex_delimiters}
-												{sanitize_html}
-												{render_markdown}
-												{line_breaks}
-												on:load={scroll}
-												{root}
-											/>
-										{/if}
-									{:else if message.type === "component" && message.content.component in _components}
-										<Component
-											{target}
-											{theme_mode}
-											props={message.content.props}
-											type={message.content.component}
-											components={_components}
-											value={message.content.value}
-											{i18n}
-											{upload}
-											{_fetch}
-											on:load={scroll}
-										/>
-									{:else if message.type === "component" && message.content.component === "file"}
-										<a
-											data-testid="chatbot-file"
-											class="file-pil"
-											href={message.content.value.url}
-											target="_blank"
-											download={window.__is_colab__
-												? null
-												: message.content.value?.orig_name ||
-													message.content.value?.path.split("/").pop() ||
-													"file"}
-										>
-											{message.content.value?.orig_name ||
-												message.content.value?.path.split("/").pop() ||
-												"file"}
-										</a>
-									{/if}
-								</button>
-							</div>
-						{/each}
-					</div>
-				</div>
-				<LikeButtons
-					show={likeable || show_copy_button}
-					handle_action={(selected) => handle_like(i, messages[0], selected)}
-					{likeable}
-					{show_copy_button}
-					message={msg_format === "tuples" ? messages[0] : messages}
-					position={role === "user" ? "right" : "left"}
-					avatar={avatar_img}
+				<Message
+					{messages}
+					{opposite_avatar_img}
+					{avatar_img}
+					{role}
 					{layout}
+					{dispatch}
+					{i18n}
+					{_fetch}
+					{line_breaks}
+					{theme_mode}
+					{target}
+					{root}
+					{upload}
+					{selectable}
+					{sanitize_html}
+					{bubble_full_width}
+					{render_markdown}
+					{rtl}
+					{i}
+					{value}
+					{latex_delimiters}
+					{_components}
+					{generating}
+					{msg_format}
+					show_like={role === "user" ? likeable && like_user_message : likeable}
+					show_retry={_retryable && is_last_bot_message(messages, value)}
+					show_undo={_undoable && is_last_bot_message(messages, value)}
+					{show_copy_button}
+					handle_action={(selected) => handle_like(i, messages[0], selected)}
+					{scroll}
 				/>
 			{/each}
 			{#if pending_message}
 				<Pending {layout} />
 			{/if}
-		{:else if placeholder !== null}
-			<center>
-				<Markdown message={placeholder} {latex_delimiters} {root} />
-			</center>
-		{/if}
-	</div>
+		</div>
+	{:else}
+		<div class="placeholder-content">
+			{#if placeholder !== null}
+				<div class="placeholder">
+					<Markdown message={placeholder} {latex_delimiters} {root} />
+				</div>
+			{/if}
+			{#if examples !== null}
+				<div class="examples">
+					{#each examples as example, i}
+						<button
+							class="example"
+							on:click={() => handle_example_select(i, example)}
+						>
+							{#if example.icon !== undefined}
+								<div class="example-icon-container">
+									<Image
+										class="example-icon"
+										src={example.icon.url}
+										alt="example-icon"
+									/>
+								</div>
+							{/if}
+							{#if example.display_text !== undefined}
+								<span class="example-display-text">{example.display_text}</span>
+							{:else}
+								<span class="example-text">{example.text}</span>
+							{/if}
+							{#if example.files !== undefined && example.files.length > 1}
+								<span class="example-file"
+									><em>{example.files.length} Files</em></span
+								>
+							{:else if example.files !== undefined && example.files[0] !== undefined && example.files[0].mime_type?.includes("image")}
+								<div class="example-image-container">
+									<Image
+										class="example-image"
+										src={example.files[0].url}
+										alt="example-image"
+									/>
+								</div>
+							{:else if example.files !== undefined && example.files[0] !== undefined}
+								<span class="example-file"
+									><em>{example.files[0].orig_name}</em></span
+								>
+							{/if}
+						</button>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/if}
 </div>
 
+{#if show_scroll_button}
+	<div class="scroll-down-button-container">
+		<IconButton
+			Icon={ScrollDownArrow}
+			label="Scroll down"
+			size="large"
+			on:click={scroll_to_bottom}
+		/>
+	</div>
+{/if}
+
 <style>
-	.placeholder-container {
+	.placeholder-content {
 		display: flex;
-		justify-content: center;
-		align-items: center;
-		height: 100%;
-	}
-	.panel-wrap {
-		width: 100%;
-		overflow-y: auto;
-	}
-
-	.flex-wrap {
-		width: 100%;
-		height: 100%;
-	}
-
-	.bubble-wrap {
-		width: 100%;
-		overflow-y: auto;
+		flex-direction: column;
 		height: 100%;
-		padding-top: var(--spacing-xxl);
-	}
-
-	:global(.dark) .bubble-wrap {
-		background: var(--background-fill-secondary);
 	}
 
-	.message-wrap {
+	.placeholder {
+		align-items: center;
 		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-		margin-bottom: var(--spacing-xxl);
+		justify-content: center;
+		height: 100%;
+		flex-grow: 1;
 	}
 
-	.bubble-gap {
-		gap: calc(var(--spacing-xxl) + var(--spacing-lg));
+	.examples :global(img) {
+		pointer-events: none;
 	}
 
-	.message-wrap > div :global(p:not(:first-child)) {
-		margin-top: var(--spacing-xxl);
+	.examples {
+		margin: auto;
+		padding: var(--spacing-xxl);
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+		gap: var(--spacing-xxl);
+		max-width: calc(min(4 * 200px + 5 * var(--spacing-xxl), 100%));
 	}
 
-	.message {
-		position: relative;
+	.example {
 		display: flex;
 		flex-direction: column;
-
-		width: calc(100% - var(--spacing-xxl));
-		color: var(--body-text-color);
-		font-size: var(--chatbot-body-text-size);
-		overflow-wrap: break-word;
-	}
-
-	.thought {
-		margin-top: var(--spacing-xxl);
-	}
-
-	.message :global(.prose) {
-		font-size: var(--chatbot-body-text-size);
-	}
-
-	.message-bubble-border {
-		border-width: 1px;
-		border-radius: var(--radius-md);
-	}
-
-	.user {
-		align-self: flex-end;
-	}
-
-	.message-fit {
-		width: fit-content !important;
-	}
-
-	.panel-full-width {
+		align-items: center;
+		padding: var(--spacing-xl);
+		border: 0.05px solid var(--border-color-primary);
+		border-radius: var(--radius-xl);
+		background-color: var(--background-fill-secondary);
+		cursor: pointer;
+		transition: var(--button-transition);
+		max-width: var(--size-56);
 		width: 100%;
 	}
-	.message-markdown-disabled {
-		white-space: pre-line;
-	}
 
-	.flex-wrap.user {
-		border-width: 1px;
-		border-radius: var(--radius-md);
-		align-self: flex-start;
-		border-bottom-right-radius: 0;
-		box-shadow: var(--shadow-drop);
-		align-self: flex-start;
-		text-align: right;
-		padding: var(--spacing-sm) var(--spacing-xl);
-		border-color: var(--border-color-accent-subdued);
+	.example:hover {
 		background-color: var(--color-accent-soft);
+		border-color: var(--border-color-accent);
 	}
 
-	:not(.component-wrap).flex-wrap.bot {
-		border-width: 1px;
-		border-radius: var(--radius-lg);
-		align-self: flex-start;
-		border-bottom-left-radius: 0;
-		box-shadow: var(--shadow-drop);
+	.example-icon-container {
+		display: flex;
 		align-self: flex-start;
-		text-align: right;
-		padding: var(--spacing-sm) var(--spacing-xl);
-		border-color: var(--border-color-primary);
-		background-color: var(--background-fill-secondary);
+		margin-left: var(--spacing-md);
+		width: var(--size-6);
+		height: var(--size-6);
 	}
 
-	.panel .user :global(*) {
-		text-align: right;
+	.example-display-text,
+	.example-text,
+	.example-file {
+		font-size: var(--text-md);
+		width: 100%;
+		text-align: center;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
-	/* Colors */
-	.bubble .bot {
-		border-color: var(--border-color-primary);
+	.example-display-text,
+	.example-file {
+		margin-top: var(--spacing-md);
 	}
 
-	.message-row {
+	.example-image-container {
+		flex-grow: 1;
 		display: flex;
-		/* flex-direction: column; */
-		position: relative;
-	}
-
-	.message-row.user-row {
-		align-self: flex-end;
-	}
-	.message-row.bubble {
-		margin: calc(var(--spacing-xl) * 3);
-		margin-bottom: var(--spacing-xl);
-	}
-
-	.with_avatar.message-row.panel {
-		padding-left: calc(var(--spacing-xl) * 2) !important;
-		padding-right: calc(var(--spacing-xl) * 2) !important;
-	}
-
-	.with_avatar.message-row.bubble.user-row {
-		margin-right: calc(var(--spacing-xl) * 2) !important;
-	}
-
-	.with_avatar.message-row.bubble.bot-row {
-		margin-left: calc(var(--spacing-xl) * 2) !important;
-	}
-
-	.with_opposite_avatar.message-row.bubble.user-row {
-		margin-left: calc(var(--spacing-xxl) + 35px + var(--spacing-xxl));
-	}
-
-	.message-row.panel {
-		margin: 0;
-		padding: calc(var(--spacing-xl) * 3) calc(var(--spacing-xxl) * 2);
-	}
-
-	.message-row.panel.bot-row {
-		background: var(--background-fill-secondary);
-	}
-
-	.message-row.panel.user-row {
-		align-self: flex-end;
-	}
-
-	.message-row.bubble.bot-row {
-		align-self: flex-start;
-		max-width: calc(100% - var(--spacing-xl) * 6);
-	}
-
-	.message-row:last-of-type {
-		margin-bottom: calc(var(--spacing-xxl) * 2);
-	}
-
-	.user-row.bubble {
-		flex-direction: row;
-		justify-content: flex-end;
+		justify-content: center;
+		align-items: center;
+		margin-top: var(--spacing-xl);
 	}
-	@media (max-width: 480px) {
-		.user-row.bubble {
-			align-self: flex-end;
-		}
 
-		.bot-row.bubble {
-			align-self: flex-start;
-		}
-		.message {
-			width: 100%;
-		}
+	.example-image-container :global(img) {
+		max-height: 100%;
+		max-width: 100%;
+		height: var(--size-32);
+		width: 100%;
+		object-fit: cover;
+		border-radius: var(--radius-xl);
 	}
 
-	.avatar-container {
-		align-self: flex-start;
-		position: relative;
-		display: flex;
-		justify-content: flex-start;
-		align-items: flex-start;
-		width: 35px;
-		height: 35px;
-		flex-shrink: 0;
-		bottom: 0;
-		border-radius: 50%;
-		border: 1px solid var(--border-color-primary);
-	}
-	.user-row > .avatar-container {
-		order: 2;
-		margin-left: var(--spacing-xxl);
-	}
-	.bot-row > .avatar-container {
-		margin-right: var(--spacing-xxl);
-		margin-left: 0;
-		margin-top: -5px;
+	.panel-wrap {
+		width: 100%;
+		overflow-y: auto;
 	}
 
-	.avatar-container:not(.thumbnail-item) :global(img) {
+	.bubble-wrap {
 		width: 100%;
+		overflow-y: auto;
 		height: 100%;
-		object-fit: cover;
-		border-radius: 50%;
-		padding: 6px;
+		padding-top: var(--spacing-xxl);
 	}
 
-	.share-button {
-		position: absolute;
-		top: 4px;
-		right: 6px;
+	:global(.dark) .bubble-wrap {
+		background: var(--background-fill-secondary);
 	}
 
-	.selectable {
-		cursor: pointer;
+	.message-wrap {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		margin-bottom: var(--spacing-xxl);
 	}
 
-	@keyframes dot-flashing {
-		0% {
-			opacity: 0.8;
-		}
-		50% {
-			opacity: 0.5;
-		}
-		100% {
-			opacity: 0.8;
-		}
-	}
-	.message-wrap > .message :not(.image-button) :global(img) {
-		margin: var(--size-2);
-		max-height: 200px;
+	.message-wrap :global(.prose.chatbot.md) {
+		opacity: 0.8;
+		overflow-wrap: break-word;
 	}
 
-	.message-wrap
-		> div
-		:not(.avatar-container)
-		div
-		:not(.image-button)
-		:global(img) {
+	.message-wrap :global(.message-row .md img) {
 		border-radius: var(--radius-xl);
 		margin: var(--size-2);
 		width: 400px;
@@ -704,22 +515,24 @@
 		max-height: 30vw;
 	}
 
-	.message-wrap .message :global(a) {
+	/* link styles */
+	.message-wrap :global(.message a) {
 		color: var(--color-text-link);
 		text-decoration: underline;
 	}
 
-	.message-wrap .bot :global(table),
-	.message-wrap .bot :global(tr),
-	.message-wrap .bot :global(td),
-	.message-wrap .bot :global(th) {
+	/* table styles */
+	.message-wrap :global(.bot table),
+	.message-wrap :global(.bot tr),
+	.message-wrap :global(.bot td),
+	.message-wrap :global(.bot th) {
 		border: 1px solid var(--border-color-primary);
 	}
 
-	.message-wrap .user :global(table),
-	.message-wrap .user :global(tr),
-	.message-wrap .user :global(td),
-	.message-wrap .user :global(th) {
+	.message-wrap :global(.user table),
+	.message-wrap :global(.user tr),
+	.message-wrap :global(.user td),
+	.message-wrap :global(.user th) {
 		border: 1px solid var(--border-color-accent);
 	}
 
@@ -729,38 +542,8 @@
 		direction: ltr;
 	}
 
-	/* Copy button */
-	.message-wrap :global(div[class*="code_wrap"] > button) {
-		position: absolute;
-		top: var(--spacing-md);
-		right: var(--spacing-md);
-		z-index: 1;
-		cursor: pointer;
-		border-bottom-left-radius: var(--radius-sm);
-		padding: var(--spacing-md);
-		width: 25px;
-		height: 25px;
-	}
-
-	.message-wrap :global(code > button > span) {
-		position: absolute;
-		top: var(--spacing-md);
-		right: var(--spacing-md);
-		width: 12px;
-		height: 12px;
-	}
-	.message-wrap :global(.check) {
-		position: absolute;
-		top: 0;
-		right: 0;
-		opacity: 0;
-		z-index: var(--layer-top);
-		transition: opacity 0.2s;
-		background: var(--background-fill-primary);
-		padding: var(--size-1);
-		width: 100%;
-		height: 100%;
-		color: var(--body-text-color);
+	.message-wrap :global(span.katex-display) {
+		margin-top: 0;
 	}
 
 	.message-wrap :global(pre) {
@@ -773,94 +556,39 @@
 		object-fit: contain;
 	}
 
-	/* Image preview */
-	.message :global(.preview) {
-		object-fit: contain;
-		width: 95%;
-		max-height: 93%;
-	}
-	.image-preview {
-		position: absolute;
-		z-index: 999;
-		left: 0;
-		top: 0;
-		width: 100%;
-		height: 100%;
-		overflow: auto;
-		background-color: rgba(0, 0, 0, 0.9);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-	.image-preview :global(svg) {
-		stroke: white;
-	}
-	.image-preview-close-button {
-		position: absolute;
-		top: 10px;
-		right: 10px;
-		background: none;
-		border: none;
-		font-size: 1.5em;
-		cursor: pointer;
-		height: 30px;
-		width: 30px;
-		padding: 3px;
-		background: var(--bg-color);
-		box-shadow: var(--shadow-drop);
-		border: 1px solid var(--button-secondary-border-color);
-		border-radius: var(--radius-lg);
-	}
-
-	.component {
-		padding: 0;
-		border-radius: var(--radius-md);
-		width: fit-content;
-		max-width: 80%;
-		max-height: 80%;
-		border: 1px solid var(--border-color-primary);
-		overflow: hidden;
-	}
-
-	.component.gallery {
-		border: none;
-	}
-
-	.file-pil {
-		display: block;
-		width: fit-content;
-		padding: var(--spacing-sm) var(--spacing-lg);
-		border-radius: var(--radius-md);
-		background: var(--background-fill-secondary);
-		color: var(--body-text-color);
-		text-decoration: none;
-		margin: 0;
-		font-family: var(--font-mono);
-		font-size: var(--text-sm);
-	}
-
-	.file {
-		width: auto !important;
-		max-width: fit-content !important;
+	.message-wrap > div :global(p:not(:first-child)) {
+		margin-top: var(--spacing-xxl);
 	}
 
-	@media (max-width: 600px) or (max-width: 480px) {
-		.component {
-			max-width: calc(100% - var(--spacing-xl) * 3);
-			width: 100%;
-		}
+	.message-wrap {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		margin-bottom: var(--spacing-xxl);
 	}
 
-	:global(.prose.chatbot.md) {
-		opacity: 0.8;
+	.panel-wrap :global(.message-row:first-child) {
+		padding-top: calc(var(--spacing-xxl) * 2);
 	}
 
-	.message > button {
-		width: 100%;
+	.scroll-down-button-container {
+		position: absolute;
+		bottom: 10px;
+		left: 50%;
+		transform: translateX(-50%);
+		z-index: var(--layer-top);
 	}
-	.html {
-		padding: 0;
-		border: none;
-		background: none;
+	.scroll-down-button-container :global(button) {
+		border-radius: 50%;
+		box-shadow: var(--shadow-drop);
+		transition:
+			box-shadow 0.2s ease-in-out,
+			transform 0.2s ease-in-out;
+	}
+	.scroll-down-button-container :global(button:hover) {
+		box-shadow:
+			var(--shadow-drop),
+			0 2px 2px rgba(0, 0, 0, 0.05);
+		transform: translateY(-2px);
 	}
 </style>
diff --git a/js/chatbot/shared/Copy.svelte b/js/chatbot/shared/Copy.svelte
index 3f21b209d588a..47e15c16b0297 100644
--- a/js/chatbot/shared/Copy.svelte
+++ b/js/chatbot/shared/Copy.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onDestroy } from "svelte";
 	import { Copy, Check } from "@gradio/icons";
+	import { IconButton } from "@gradio/atoms";
 
 	let copied = false;
 	export let value: string;
@@ -44,36 +45,8 @@
 	});
 </script>
 
-<button
+<IconButton
 	on:click={handle_copy}
-	class="action"
-	title="copy"
-	aria-label={copied ? "Copied message" : "Copy message"}
->
-	{#if !copied}
-		<Copy />
-	{/if}
-	{#if copied}
-		<Check />
-	{/if}
-</button>
-
-<style>
-	button {
-		position: relative;
-		top: 0;
-		right: 0;
-		cursor: pointer;
-		color: var(--body-text-color-subdued);
-		margin-right: 5px;
-	}
-
-	button:hover {
-		color: var(--body-text-color);
-	}
-
-	.action {
-		width: var(--size-4);
-		height: var(--size-4);
-	}
-</style>
+	label={copied ? "Copied message" : "Copy message"}
+	Icon={copied ? Check : Copy}
+/>
diff --git a/js/chatbot/shared/CopyAll.svelte b/js/chatbot/shared/CopyAll.svelte
index fcca6f03d375e..aa05eecb0561d 100644
--- a/js/chatbot/shared/CopyAll.svelte
+++ b/js/chatbot/shared/CopyAll.svelte
@@ -2,6 +2,7 @@
 	import { onDestroy } from "svelte";
 	import { Copy, Check } from "@gradio/icons";
 	import type { NormalisedMessage } from "../types";
+	import { IconButton } from "@gradio/atoms";
 
 	let copied = false;
 	export let value: NormalisedMessage[] | null;
@@ -45,40 +46,8 @@
 	});
 </script>
 
-<button
+<IconButton
+	Icon={copied ? Check : Copy}
 	on:click={handle_copy}
-	title="Copy conversation"
-	class={copied ? "copied" : "copy-text"}
-	aria-label={copied ? "Copied conversation" : "Copy conversation"}
->
-	{#if copied}
-		<Check />
-	{:else}
-		<Copy />
-	{/if}
-</button>
-
-<style>
-	button {
-		display: flex;
-		position: absolute;
-		top: var(--block-label-margin);
-		right: var(--block-label-margin);
-		align-items: center;
-		box-shadow: var(--shadow-drop);
-		border: 1px solid var(--border-color-primary);
-		border-top: none;
-		border-right: none;
-		border-radius: var(--block-label-right-radius);
-		background: var(--block-label-background-fill);
-		padding: var(--spacing-sm);
-		width: var(--size-6);
-		height: var(--size-6);
-		overflow: hidden;
-		color: var(--block-label-text-color);
-	}
-
-	button:hover {
-		color: var(--body-text-color);
-	}
-</style>
+	label={copied ? "Copied conversation" : "Copy conversation"}
+></IconButton>
diff --git a/js/chatbot/shared/LikeDislike.svelte b/js/chatbot/shared/LikeDislike.svelte
index 95f34ea2a9a93..71fbdab2ae150 100644
--- a/js/chatbot/shared/LikeDislike.svelte
+++ b/js/chatbot/shared/LikeDislike.svelte
@@ -1,67 +1,35 @@
 <script lang="ts">
+	import { IconButton } from "@gradio/atoms";
 	import ThumbDownActive from "./ThumbDownActive.svelte";
 	import ThumbDownDefault from "./ThumbDownDefault.svelte";
 	import ThumbUpActive from "./ThumbUpActive.svelte";
 	import ThumbUpDefault from "./ThumbUpDefault.svelte";
 
 	export let handle_action: (selected: string | null) => void;
-	export let padded = false;
-	export let position: "right" | "left" = "left";
 
 	let selected: "like" | "dislike" | null = null;
 </script>
 
-<button
+<IconButton
+	Icon={selected === "dislike" ? ThumbDownActive : ThumbDownDefault}
+	label={selected === "dislike" ? "clicked dislike" : "dislike"}
+	color={selected === "dislike"
+		? "var(--color-accent)"
+		: "var(--block-label-text-color)"}
 	on:click={() => {
 		selected = "dislike";
 		handle_action(selected);
 	}}
-	aria-label={selected === "dislike" ? "clicked dislike" : "dislike"}
-	class:padded
-	class:selected={selected === "dislike"}
-	class="dislike-button {position}"
->
-	{#if selected === "dislike"}
-		<ThumbDownActive />
-	{:else}
-		<ThumbDownDefault />
-	{/if}
-</button>
+/>
 
-<button
-	class="like-button"
-	class:padded
+<IconButton
+	Icon={selected === "like" ? ThumbUpActive : ThumbUpDefault}
+	label={selected === "like" ? "clicked like" : "like"}
+	color={selected === "like"
+		? "var(--color-accent)"
+		: "var(--block-label-text-color)"}
 	on:click={() => {
 		selected = "like";
 		handle_action(selected);
 	}}
-	aria-label={selected === "like" ? "clicked like" : "like"}
-	class:selected={selected === "like"}
->
-	{#if selected === "like"}
-		<ThumbUpActive />
-	{:else}
-		<ThumbUpDefault />
-	{/if}
-</button>
-
-<style>
-	button {
-		cursor: pointer;
-		color: var(--body-text-color-subdued);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	button:hover,
-	button:focus {
-		color: var(--body-text-color);
-	}
-
-	.selected,
-	.selected:focus,
-	.selected:hover {
-		color: var(--color-accent);
-	}
-</style>
+/>
diff --git a/js/chatbot/shared/Message.svelte b/js/chatbot/shared/Message.svelte
new file mode 100644
index 0000000000000..62c80457d455f
--- /dev/null
+++ b/js/chatbot/shared/Message.svelte
@@ -0,0 +1,592 @@
+<script lang="ts">
+	import { is_component_message, is_last_bot_message } from "../shared/utils";
+	import { Image } from "@gradio/image/shared";
+	import Component from "./Component.svelte";
+	import type { FileData, Client } from "@gradio/client";
+	import type { NormalisedMessage } from "../types";
+	import MessageBox from "./MessageBox.svelte";
+	import { MarkdownCode as Markdown } from "@gradio/markdown";
+	import type { I18nFormatter } from "js/core/src/gradio_helper";
+	import type { ComponentType, SvelteComponent } from "svelte";
+	import ButtonPanel from "./ButtonPanel.svelte";
+
+	export let value: NormalisedMessage[];
+	export let avatar_img: FileData | null;
+	export let opposite_avatar_img: FileData | null = null;
+	export let role = "user";
+	export let messages: NormalisedMessage[] = [];
+	export let layout: "bubble" | "panel";
+	export let bubble_full_width: boolean;
+	export let render_markdown: boolean;
+	export let latex_delimiters: {
+		left: string;
+		right: string;
+		display: boolean;
+	}[];
+	export let sanitize_html: boolean;
+	export let selectable: boolean;
+	export let _fetch: typeof fetch;
+	export let rtl: boolean;
+	export let dispatch: any;
+	export let i18n: I18nFormatter;
+	export let line_breaks: boolean;
+	export let upload: Client["upload"];
+	export let target: HTMLElement | null;
+	export let root: string;
+	export let theme_mode: "light" | "dark" | "system";
+	export let _components: Record<string, ComponentType<SvelteComponent>>;
+	export let i: number;
+	export let show_copy_button: boolean;
+	export let generating: boolean;
+	export let show_like: boolean;
+	export let show_retry: boolean;
+	export let show_undo: boolean;
+	export let msg_format: "tuples" | "messages";
+	export let handle_action: (selected: string | null) => void;
+	export let scroll: () => void;
+
+	function handle_select(i: number, message: NormalisedMessage): void {
+		dispatch("select", {
+			index: message.index,
+			value: message.content
+		});
+	}
+
+	function get_message_label_data(message: NormalisedMessage): string {
+		if (message.type === "text") {
+			return message.content;
+		} else if (
+			message.type === "component" &&
+			message.content.component === "file"
+		) {
+			if (Array.isArray(message.content.value)) {
+				return `file of extension type: ${message.content.value[0].orig_name?.split(".").pop()}`;
+			}
+			return (
+				`file of extension type: ${message.content.value?.orig_name?.split(".").pop()}` +
+				(message.content.value?.orig_name ?? "")
+			);
+		}
+		return `a component of type ${message.content.component ?? "unknown"}`;
+	}
+
+	type ButtonPanelProps = {
+		show: boolean;
+		handle_action: (selected: string | null) => void;
+		likeable: boolean;
+		show_retry: boolean;
+		show_undo: boolean;
+		disable: boolean;
+		show_copy_button: boolean;
+		message: NormalisedMessage[] | NormalisedMessage;
+		position: "left" | "right";
+		layout: "bubble" | "panel";
+		avatar: FileData | null;
+	};
+
+	let button_panel_props: ButtonPanelProps;
+	$: button_panel_props = {
+		show: show_like || show_retry || show_undo || show_copy_button,
+		handle_action,
+		likeable: show_like,
+		show_retry,
+		show_undo,
+		disable: generating,
+		show_copy_button,
+		message: msg_format === "tuples" ? messages[0] : messages,
+		position: role === "user" ? "right" : "left",
+		avatar: avatar_img,
+		layout
+	};
+</script>
+
+<div
+	class="message-row {layout} {role}-row"
+	class:with_avatar={avatar_img !== null}
+	class:with_opposite_avatar={opposite_avatar_img !== null}
+>
+	{#if avatar_img !== null}
+		<div class="avatar-container">
+			<Image class="avatar-image" src={avatar_img?.url} alt="{role} avatar" />
+		</div>
+	{/if}
+	<div
+		class:role
+		class="flex-wrap"
+		class:component-wrap={messages[0].type === "component"}
+	>
+		{#each messages as message, thought_index}
+			<div
+				class="message {role} {is_component_message(message)
+					? message?.content.component
+					: ''}"
+				class:message-fit={layout === "bubble" && !bubble_full_width}
+				class:panel-full-width={true}
+				class:message-markdown-disabled={!render_markdown}
+				style:text-align={rtl && role === "user" ? "left" : "right"}
+				class:component={message.type === "component"}
+				class:html={is_component_message(message) &&
+					message.content.component === "html"}
+				class:thought={thought_index > 0}
+			>
+				<button
+					data-testid={role}
+					class:latest={i === value.length - 1}
+					class:message-markdown-disabled={!render_markdown}
+					style:user-select="text"
+					class:selectable
+					style:cursor={selectable ? "pointer" : "default"}
+					style:text-align={rtl ? "right" : "left"}
+					on:click={() => handle_select(i, message)}
+					on:keydown={(e) => {
+						if (e.key === "Enter") {
+							handle_select(i, message);
+						}
+					}}
+					dir={rtl ? "rtl" : "ltr"}
+					aria-label={role + "'s message: " + get_message_label_data(message)}
+				>
+					{#if message.type === "text"}
+						{#if message.metadata.title}
+							<MessageBox
+								title={message.metadata.title}
+								expanded={is_last_bot_message(messages, value)}
+							>
+								<Markdown
+									message={message.content}
+									{latex_delimiters}
+									{sanitize_html}
+									{render_markdown}
+									{line_breaks}
+									on:load={scroll}
+									{root}
+								/>
+							</MessageBox>
+						{:else}
+							<Markdown
+								message={message.content}
+								{latex_delimiters}
+								{sanitize_html}
+								{render_markdown}
+								{line_breaks}
+								on:load={scroll}
+								{root}
+							/>
+						{/if}
+					{:else if message.type === "component" && message.content.component in _components}
+						<Component
+							{target}
+							{theme_mode}
+							props={message.content.props}
+							type={message.content.component}
+							components={_components}
+							value={message.content.value}
+							{i18n}
+							{upload}
+							{_fetch}
+							on:load={scroll}
+						/>
+					{:else if message.type === "component" && message.content.component === "file"}
+						<a
+							data-testid="chatbot-file"
+							class="file-pil"
+							href={message.content.value.url}
+							target="_blank"
+							download={window.__is_colab__
+								? null
+								: message.content.value?.orig_name ||
+									message.content.value?.path.split("/").pop() ||
+									"file"}
+						>
+							{message.content.value?.orig_name ||
+								message.content.value?.path.split("/").pop() ||
+								"file"}
+						</a>
+					{/if}
+				</button>
+			</div>
+
+			{#if layout === "panel"}
+				<ButtonPanel {...button_panel_props} />
+			{/if}
+		{/each}
+	</div>
+</div>
+
+{#if layout === "bubble"}
+	<ButtonPanel {...button_panel_props} />
+{/if}
+
+<style>
+	.message {
+		position: relative;
+		width: 100%;
+	}
+
+	/* avatar styles */
+	.avatar-container {
+		flex-shrink: 0;
+		width: 35px;
+		height: 35px;
+		border-radius: 50%;
+		border: 1px solid var(--border-color-primary);
+		overflow: hidden;
+	}
+
+	.avatar-container :global(img) {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		padding: 6px;
+	}
+
+	/* message wrapper */
+	.flex-wrap {
+		display: flex;
+		flex-direction: column;
+		width: calc(100% - var(--spacing-xxl));
+		max-width: 100%;
+		color: var(--body-text-color);
+		font-size: var(--chatbot-text-size);
+		overflow-wrap: break-word;
+		width: 100%;
+		height: 100%;
+	}
+
+	.component {
+		padding: 0;
+		border-radius: var(--radius-md);
+		width: fit-content;
+		overflow: hidden;
+	}
+
+	.component.gallery {
+		border: none;
+	}
+
+	.message-row :global(img) {
+		margin: var(--size-2);
+		max-height: 300px;
+	}
+
+	.file-pil {
+		display: block;
+		width: fit-content;
+		padding: var(--spacing-sm) var(--spacing-lg);
+		border-radius: var(--radius-md);
+		background: var(--background-fill-secondary);
+		color: var(--body-text-color);
+		text-decoration: none;
+		margin: 0;
+		font-family: var(--font-mono);
+		font-size: var(--text-sm);
+	}
+
+	.file {
+		width: auto !important;
+		max-width: fit-content !important;
+	}
+
+	@media (max-width: 600px) or (max-width: 480px) {
+		.component {
+			width: 100%;
+		}
+	}
+
+	.message :global(.prose) {
+		font-size: var(--chatbot-text-size);
+	}
+
+	.message-bubble-border {
+		border-width: 1px;
+		border-radius: var(--radius-md);
+	}
+
+	.message-fit {
+		width: fit-content !important;
+	}
+
+	.panel-full-width {
+		width: 100%;
+	}
+	.message-markdown-disabled {
+		white-space: pre-line;
+	}
+
+	.user {
+		border-width: 1px;
+		border-radius: var(--radius-md);
+		align-self: flex-start;
+		border-bottom-right-radius: 0;
+		box-shadow: var(--shadow-drop);
+		align-self: flex-start;
+		text-align: right;
+		padding: var(--spacing-sm) var(--spacing-xl);
+		border-color: var(--border-color-accent-subdued);
+		background-color: var(--color-accent-soft);
+	}
+
+	.bot {
+		border-width: 1px;
+		border-radius: var(--radius-lg);
+		border-bottom-left-radius: 0;
+		border-color: var(--border-color-primary);
+		background-color: var(--background-fill-secondary);
+		box-shadow: var(--shadow-drop);
+		align-self: flex-start;
+		text-align: right;
+		padding: var(--spacing-sm) var(--spacing-xl);
+	}
+
+	.panel .user :global(*) {
+		text-align: right;
+	}
+
+	/* Colors */
+	.bubble .bot {
+		border-color: var(--border-color-primary);
+	}
+
+	.message-row {
+		display: flex;
+		position: relative;
+	}
+
+	/* bubble mode styles */
+	.bubble {
+		margin: calc(var(--spacing-xl) * 2);
+		margin-bottom: var(--spacing-xl);
+	}
+
+	.bubble.user-row {
+		align-self: flex-end;
+		max-width: calc(100% - var(--spacing-xl) * 6);
+	}
+
+	.bubble.bot-row {
+		align-self: flex-start;
+		max-width: calc(100% - var(--spacing-xl) * 6);
+	}
+
+	.bubble .user-row {
+		flex-direction: row;
+		justify-content: flex-end;
+	}
+
+	.bubble .with_avatar.user-row {
+		margin-right: calc(var(--spacing-xl) * 2) !important;
+	}
+
+	.bubble .with_avatar.bot-row {
+		margin-left: calc(var(--spacing-xl) * 2) !important;
+	}
+
+	.bubble .with_opposite_avatar.user-row {
+		margin-left: calc(var(--spacing-xxl) + 35px + var(--spacing-xxl));
+	}
+
+	.bubble .message-fit {
+		width: fit-content !important;
+	}
+
+	/* panel mode styles */
+	.panel {
+		margin: 0;
+		padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-lg) * 2);
+	}
+
+	.panel.bot-row {
+		background: var(--background-fill-secondary);
+	}
+
+	.panel .with_avatar {
+		padding-left: calc(var(--spacing-xl) * 2) !important;
+		padding-right: calc(var(--spacing-xl) * 2) !important;
+	}
+
+	.panel .panel-full-width {
+		width: 100%;
+	}
+
+	.panel .user :global(*) {
+		text-align: right;
+	}
+
+	/* message content */
+	.flex-wrap {
+		display: flex;
+		flex-direction: column;
+		max-width: 100%;
+		color: var(--body-text-color);
+		font-size: var(--chatbot-text-size);
+		overflow-wrap: break-word;
+	}
+
+	.user {
+		border-width: 1px;
+		border-radius: var(--radius-md);
+		align-self: flex-start;
+		border-bottom-right-radius: 0;
+		box-shadow: var(--shadow-drop);
+		text-align: right;
+		padding: var(--spacing-sm) var(--spacing-xl);
+		border-color: var(--border-color-accent-subdued);
+		background-color: var(--color-accent-soft);
+	}
+	@media (max-width: 480px) {
+		.user-row.bubble {
+			align-self: flex-end;
+		}
+
+		.bot-row.bubble {
+			align-self: flex-start;
+		}
+		.message {
+			width: 100%;
+		}
+	}
+
+	.avatar-container {
+		align-self: flex-start;
+		position: relative;
+		display: flex;
+		justify-content: flex-start;
+		align-items: flex-start;
+		width: 35px;
+		height: 35px;
+		flex-shrink: 0;
+		bottom: 0;
+		border-radius: 50%;
+		border: 1px solid var(--border-color-primary);
+	}
+	.user-row > .avatar-container {
+		order: 2;
+	}
+
+	.user-row.bubble > .avatar-container {
+		margin-left: var(--spacing-xxl);
+	}
+
+	.bot-row.bubble > .avatar-container {
+		margin-left: var(--spacing-xxl);
+	}
+
+	.panel.user-row > .avatar-container {
+		order: 0;
+	}
+
+	.bot-row.bubble > .avatar-container {
+		margin-right: var(--spacing-xxl);
+		margin-left: 0;
+	}
+
+	.avatar-container:not(.thumbnail-item) :global(img) {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		border-radius: 50%;
+		padding: 6px;
+	}
+
+	.selectable {
+		cursor: pointer;
+	}
+
+	@keyframes dot-flashing {
+		0% {
+			opacity: 0.8;
+		}
+		50% {
+			opacity: 0.5;
+		}
+		100% {
+			opacity: 0.8;
+		}
+	}
+
+	/* Image preview */
+	.message :global(.preview) {
+		object-fit: contain;
+		width: 95%;
+		max-height: 93%;
+	}
+	.image-preview {
+		position: absolute;
+		z-index: 999;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		overflow: auto;
+		background-color: rgba(0, 0, 0, 0.9);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	.image-preview :global(svg) {
+		stroke: white;
+	}
+	.image-preview-close-button {
+		position: absolute;
+		top: 10px;
+		right: 10px;
+		background: none;
+		border: none;
+		font-size: 1.5em;
+		cursor: pointer;
+		height: 30px;
+		width: 30px;
+		padding: 3px;
+		background: var(--bg-color);
+		box-shadow: var(--shadow-drop);
+		border: 1px solid var(--button-secondary-border-color);
+		border-radius: var(--radius-lg);
+	}
+
+	.message > button {
+		width: 100%;
+	}
+	.html {
+		padding: 0;
+		border: none;
+		background: none;
+	}
+
+	.thought {
+		margin-top: var(--spacing-xxl);
+	}
+
+	.panel .bot,
+	.panel .user {
+		border: none;
+		box-shadow: none;
+		background-color: var(--background-fill-secondary);
+	}
+
+	.panel.user-row {
+		background-color: var(--color-accent-soft);
+	}
+
+	.panel .user-row,
+	.panel .bot-row {
+		align-self: flex-start;
+	}
+
+	.panel .user :global(*),
+	.panel .bot :global(*) {
+		text-align: left;
+	}
+
+	.panel .user {
+		background-color: var(--color-accent-soft);
+	}
+
+	.panel .user-row {
+		background-color: var(--color-accent-soft);
+		align-self: flex-start;
+	}
+
+	.panel .message {
+		margin-bottom: var(--spacing-md);
+	}
+</style>
diff --git a/js/chatbot/shared/MessageBox.svelte b/js/chatbot/shared/MessageBox.svelte
index 60da1464ea150..5affb8369c008 100644
--- a/js/chatbot/shared/MessageBox.svelte
+++ b/js/chatbot/shared/MessageBox.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	let expanded = false;
+	export let expanded = false;
 	export let title: string;
 
 	function toggleExpanded(): void {
diff --git a/js/chatbot/shared/Remove.svelte b/js/chatbot/shared/Remove.svelte
new file mode 100644
index 0000000000000..7dee223fcd198
--- /dev/null
+++ b/js/chatbot/shared/Remove.svelte
@@ -0,0 +1,11 @@
+<svg
+	id="fi_3502539"
+	fill="currentColor"
+	height="100%"
+	viewBox="0 0 24 24"
+	width="100%"
+	xmlns="http://www.w3.org/2000/svg"
+	><path
+		d="m7 16a1 1 0 0 0 .71-.3 1 1 0 0 0 0-1.41l-3.33-3.29h10.13a4.49 4.49 0 0 1 0 9h-2.51a1 1 0 0 0 0 2h2.51a6.49 6.49 0 0 0 0-13h-10.14l3.33-3.29a1 1 0 0 0 -1.4-1.42l-5.07 5a1 1 0 0 0 -.29.71 1 1 0 0 0 .3.71l5.06 5a1 1 0 0 0 .7.29z"
+	></path></svg
+>
diff --git a/js/chatbot/shared/ThumbDownActive.svelte b/js/chatbot/shared/ThumbDownActive.svelte
index eb7fb9bfad4f7..4b0e3b4984618 100644
--- a/js/chatbot/shared/ThumbDownActive.svelte
+++ b/js/chatbot/shared/ThumbDownActive.svelte
@@ -1,6 +1,6 @@
 <svg
-	width="16"
-	height="16"
+	width="100%"
+	height="100%"
 	viewBox="0 0 12 12"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"
diff --git a/js/chatbot/shared/ThumbDownDefault.svelte b/js/chatbot/shared/ThumbDownDefault.svelte
index 23fb11f2bf810..14ed5cd46ad0e 100644
--- a/js/chatbot/shared/ThumbDownDefault.svelte
+++ b/js/chatbot/shared/ThumbDownDefault.svelte
@@ -1,6 +1,6 @@
 <svg
-	width="16"
-	height="16"
+	width="100%"
+	height="100%"
 	viewBox="0 0 12 12"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"
diff --git a/js/chatbot/shared/ThumbUpActive.svelte b/js/chatbot/shared/ThumbUpActive.svelte
index 8b183a71f2fee..46d62c7a2a219 100644
--- a/js/chatbot/shared/ThumbUpActive.svelte
+++ b/js/chatbot/shared/ThumbUpActive.svelte
@@ -1,6 +1,6 @@
 <svg
-	width="16"
-	height="16"
+	width="100%"
+	height="100%"
 	viewBox="0 0 12 12"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"
diff --git a/js/chatbot/shared/ThumbUpDefault.svelte b/js/chatbot/shared/ThumbUpDefault.svelte
index c06a0acb9988c..65134c9349609 100644
--- a/js/chatbot/shared/ThumbUpDefault.svelte
+++ b/js/chatbot/shared/ThumbUpDefault.svelte
@@ -1,6 +1,6 @@
 <svg
-	width="16"
-	height="16"
+	width="100%"
+	height="100%"
 	viewBox="0 0 12 12"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"
diff --git a/js/chatbot/shared/utils.ts b/js/chatbot/shared/utils.ts
index 20b8b6605fbbc..a43604dc169ff 100644
--- a/js/chatbot/shared/utils.ts
+++ b/js/chatbot/shared/utils.ts
@@ -1,4 +1,5 @@
 import type { FileData } from "@gradio/client";
+import type { ComponentType, SvelteComponent } from "svelte";
 import { uploadToHuggingFace } from "@gradio/utils";
 import type {
 	TupleFormat,
@@ -6,9 +7,11 @@ import type {
 	ComponentData,
 	TextMessage,
 	NormalisedMessage,
-	Message
+	Message,
+	MessageRole
 } from "../types";
-
+import type { LoadedComponent } from "../../core/src/types";
+import { Gradio } from "@gradio/utils";
 export const format_chat_for_sharing = async (
 	chat: [string | FileData | null, string | FileData | null][]
 ): Promise<string> => {
@@ -64,6 +67,11 @@ export const format_chat_for_sharing = async (
 		.join("\n");
 };
 
+export interface UndoRetryData {
+	index: number | [number, number];
+	value: string | FileData | ComponentData;
+}
+
 const redirect_src_url = (src: string, root: string): string =>
 	src.replace('src="/file', `src="${root}file`);
 
@@ -162,3 +170,91 @@ export function is_component_message(
 ): message is ComponentMessage {
 	return message.type === "component";
 }
+
+export function is_last_bot_message(
+	messages: NormalisedMessage[],
+	all_messages: NormalisedMessage[]
+): boolean {
+	const is_bot = messages[messages.length - 1].role === "assistant";
+	const last_index = messages[messages.length - 1].index;
+	// use JSON.stringify to handle both the number and tuple cases
+	// when msg_format is tuples, last_index is an array and when it is messages, it is a number
+	const is_last =
+		JSON.stringify(last_index) ===
+		JSON.stringify(all_messages[all_messages.length - 1].index);
+	return is_last && is_bot;
+}
+
+export function group_messages(
+	messages: NormalisedMessage[],
+	msg_format: "messages" | "tuples"
+): NormalisedMessage[][] {
+	const groupedMessages: NormalisedMessage[][] = [];
+	let currentGroup: NormalisedMessage[] = [];
+	let currentRole: MessageRole | null = null;
+
+	for (const message of messages) {
+		if (msg_format === "tuples") {
+			currentRole = null;
+		}
+
+		if (!(message.role === "assistant" || message.role === "user")) {
+			continue;
+		}
+		if (message.role === currentRole) {
+			currentGroup.push(message);
+		} else {
+			if (currentGroup.length > 0) {
+				groupedMessages.push(currentGroup);
+			}
+			currentGroup = [message];
+			currentRole = message.role;
+		}
+	}
+
+	if (currentGroup.length > 0) {
+		groupedMessages.push(currentGroup);
+	}
+
+	return groupedMessages;
+}
+
+export async function load_components(
+	component_names: string[],
+	_components: Record<string, ComponentType<SvelteComponent>>,
+	load_component: Gradio["load_component"]
+): Promise<Record<string, ComponentType<SvelteComponent>>> {
+	let names: string[] = [];
+	let components: ReturnType<typeof load_component>["component"][] = [];
+
+	component_names.forEach((component_name) => {
+		if (_components[component_name] || component_name === "file") {
+			return;
+		}
+
+		const { name, component } = load_component(component_name, "base");
+		names.push(name);
+		components.push(component);
+		component_name;
+	});
+
+	const loaded_components: LoadedComponent[] = await Promise.all(components);
+	loaded_components.forEach((component, i) => {
+		_components[names[i]] = component.default;
+	});
+
+	return _components;
+}
+
+export function get_components_from_messages(
+	messages: NormalisedMessage[] | null
+): string[] {
+	if (!messages) return [];
+	let components: Set<string> = new Set();
+	messages.forEach((message) => {
+		if (message.type === "component") {
+			components.add(message.content.component);
+		}
+	});
+	return Array.from(components);
+}
diff --git a/js/chatbot/types.ts b/js/chatbot/types.ts
index 7f30ece60f9eb..3e7d7fc3d4e88 100644
--- a/js/chatbot/types.ts
+++ b/js/chatbot/types.ts
@@ -31,6 +31,13 @@ export interface ComponentMessage extends Message {
 	content: ComponentData;
 }
 
+export interface ExampleMessage {
+	icon?: FileData;
+	display_text?: string;
+	text: string;
+	files?: FileData[];
+}
+
 export type message_data =
 	| string
 	| { file: FileData | FileData[]; alt_text: string | null }
diff --git a/js/checkbox/CHANGELOG.md b/js/checkbox/CHANGELOG.md
index 18ad1b208b111..5f66899824461 100644
--- a/js/checkbox/CHANGELOG.md
+++ b/js/checkbox/CHANGELOG.md
@@ -1,5 +1,56 @@
 # @gradio/checkbox
 
+## 0.4.0-beta.5
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.4.0-beta.4
+
+### Features
+
+- [#9521](https://github.com/gradio-app/gradio/pull/9521) [`06ef22e`](https://github.com/gradio-app/gradio/commit/06ef22e83cdd27e7afb381396d153d9db3dea16e) - Allow `info=` to render markdown.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+
+## 0.4.0-beta.3
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.4.0-beta.2
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+
+## 0.4.0-beta.2
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.4.0-beta.1
+
+### Features
+
+- [#9216](https://github.com/gradio-app/gradio/pull/9216) [`e137b30`](https://github.com/gradio-app/gradio/commit/e137b30b1a53ca32d3cd809d31e97d5d54a4e479) - Decrease component radii and remove input shadows.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+
 ## 0.3.13
 
 ### Fixes
diff --git a/js/checkbox/Index.svelte b/js/checkbox/Index.svelte
index a995fd41b6dc2..8d9e4c7be3f86 100644
--- a/js/checkbox/Index.svelte
+++ b/js/checkbox/Index.svelte
@@ -18,6 +18,7 @@
 	export let value_is_output = false;
 	export let label = "Checkbox";
 	export let info: string | undefined = undefined;
+	export let root: string;
 	export let container = true;
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
@@ -53,7 +54,7 @@
 	/>
 
 	{#if info}
-		<Info>{info}</Info>
+		<Info {root} {info} />
 	{/if}
 
 	<BaseCheckbox
diff --git a/js/checkbox/package.json b/js/checkbox/package.json
index 47c81451290bf..316564a1d81c9 100644
--- a/js/checkbox/package.json
+++ b/js/checkbox/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/checkbox",
-	"version": "0.3.13",
+	"version": "0.4.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/checkbox/shared/Checkbox.svelte b/js/checkbox/shared/Checkbox.svelte
index 2481477b9b362..5507f82b8f4cc 100644
--- a/js/checkbox/shared/Checkbox.svelte
+++ b/js/checkbox/shared/Checkbox.svelte
@@ -51,15 +51,16 @@
 		name="test"
 		data-testid="checkbox"
 	/>
-	<span class="ml-2">{label}</span>
+	<span>{label}</span>
 </label>
 
 <style>
 	label {
 		display: flex;
 		align-items: center;
+		transition: var(--button-transition);
 		cursor: pointer;
-		color: var(--body-text-color);
+		color: var(--checkbox-label-text-color);
 		font-weight: var(--checkbox-label-text-weight);
 		font-size: var(--checkbox-label-text-size);
 		line-height: var(--line-md);
@@ -72,7 +73,7 @@
 	input {
 		--ring-color: transparent;
 		position: relative;
-		box-shadow: var(--input-shadow);
+		box-shadow: var(--checkbox-shadow);
 		border: 1px solid var(--checkbox-border-color);
 		border-radius: var(--checkbox-border-radius);
 		background-color: var(--checkbox-background-color);
@@ -82,9 +83,9 @@
 	input:checked,
 	input:checked:hover,
 	input:checked:focus {
-		border-color: var(--checkbox-border-color-selected);
 		background-image: var(--checkbox-check);
 		background-color: var(--checkbox-background-color-selected);
+		border-color: var(--checkbox-border-color-focus);
 	}
 
 	input:checked:focus {
@@ -107,4 +108,8 @@
 	.disabled {
 		cursor: not-allowed;
 	}
+
+	input:hover {
+		cursor: pointer;
+	}
 </style>
diff --git a/js/checkboxgroup/CHANGELOG.md b/js/checkboxgroup/CHANGELOG.md
index 767c3514e6bef..7b24e40a41fff 100644
--- a/js/checkboxgroup/CHANGELOG.md
+++ b/js/checkboxgroup/CHANGELOG.md
@@ -1,5 +1,60 @@
 # @gradio/checkboxgroup
 
+## 0.6.0-beta.5
+
+### Features
+
+- [#9437](https://github.com/gradio-app/gradio/pull/9437) [`c3d93be`](https://github.com/gradio-app/gradio/commit/c3d93bef94b9401747a363f7bad88a1d347d535b) - Adding new themes to Gradio 5.0.  Thanks @allisonwhilden!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.6.0-beta.4
+
+### Features
+
+- [#9521](https://github.com/gradio-app/gradio/pull/9521) [`06ef22e`](https://github.com/gradio-app/gradio/commit/06ef22e83cdd27e7afb381396d153d9db3dea16e) - Allow `info=` to render markdown.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+
+## 0.6.0-beta.3
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.6.0-beta.2
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+
+## 0.6.0-beta.2
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.6.0-beta.1
+
+### Features
+
+- [#9216](https://github.com/gradio-app/gradio/pull/9216) [`e137b30`](https://github.com/gradio-app/gradio/commit/e137b30b1a53ca32d3cd809d31e97d5d54a4e479) - Decrease component radii and remove input shadows.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+
 ## 0.5.13
 
 ### Fixes
diff --git a/js/checkboxgroup/Index.svelte b/js/checkboxgroup/Index.svelte
index 76a1e2393c9d1..34b0e2ec1238b 100644
--- a/js/checkboxgroup/Index.svelte
+++ b/js/checkboxgroup/Index.svelte
@@ -23,6 +23,7 @@
 	export let label = gradio.i18n("checkbox.checkbox_group");
 	export let info: string | undefined = undefined;
 	export let show_label = true;
+	export let root: string;
 
 	export let loading_status: LoadingStatus;
 	export let interactive = true;
@@ -60,7 +61,7 @@
 		{...loading_status}
 		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 	/>
-	<BlockTitle {show_label} {info}>{label}</BlockTitle>
+	<BlockTitle {root} {show_label} {info}>{label}</BlockTitle>
 
 	<div class="wrap" data-testid="checkbox-group">
 		{#each choices as [display_value, internal_value], i}
@@ -127,6 +128,7 @@
 	label.selected {
 		background: var(--checkbox-label-background-fill-selected);
 		color: var(--checkbox-label-text-color-selected);
+		border-color: var(--checkbox-label-border-color-selected);
 	}
 
 	label > * + * {
@@ -170,4 +172,8 @@
 	.disabled {
 		cursor: not-allowed;
 	}
+
+	input:hover {
+		cursor: pointer;
+	}
 </style>
diff --git a/js/checkboxgroup/package.json b/js/checkboxgroup/package.json
index bf7c486af1bb8..cc903a7571925 100644
--- a/js/checkboxgroup/package.json
+++ b/js/checkboxgroup/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/checkboxgroup",
-	"version": "0.5.13",
+	"version": "0.6.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/code/CHANGELOG.md b/js/code/CHANGELOG.md
index bed67bf662b6e..346590d8e7dd0 100644
--- a/js/code/CHANGELOG.md
+++ b/js/code/CHANGELOG.md
@@ -1,11 +1,87 @@
 # @gradio/code
 
-## 0.9.1
+## 0.10.0-beta.8
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.7
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.10.0-beta.7
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+- @gradio/upload@0.13.0-beta.6
+
+## 0.10.0-beta.6
+
+### Features
+
+- [#9545](https://github.com/gradio-app/gradio/pull/9545) [`098a009`](https://github.com/gradio-app/gradio/commit/098a009c05243967bd9e5acc28864eb40a135f6a) - Add Jinja2 language to Code component.  Thanks @CISC!
+
+## 0.10.0-beta.5
+
+### Features
+
+- [#9450](https://github.com/gradio-app/gradio/pull/9450) [`991883e`](https://github.com/gradio-app/gradio/commit/991883e217dc0a3512b3ae3245378812f373b8db) - Improve `gr.Code`.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.5
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.10.0-beta.4
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/upload@0.13.0-beta.4
+- @gradio/wasm@0.14.0-beta.3
+
+## 0.10.0-beta.3
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.3
+
+## 0.10.0-beta.2
+
+### Features
+
+- [#9311](https://github.com/gradio-app/gradio/pull/9311) [`c4afdcd`](https://github.com/gradio-app/gradio/commit/c4afdcdb1f1f80c5f95ab45d527236e9364ace82) - Added max lines and overflow scrollbar for `gr.Code`.  Thanks @micpst!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/upload@0.13.0-beta.2
+- @gradio/wasm@0.14.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.9.1-beta.1
 
 ### Features
 
 - [#9187](https://github.com/gradio-app/gradio/pull/9187) [`5bf00b7`](https://github.com/gradio-app/gradio/commit/5bf00b7524ebf399b48719120a49d15bb21bd65c) - make all component SSR compatible.  Thanks @pngwn!
 
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/upload@0.12.4-beta.1
+- @gradio/wasm@0.13.1-beta.1
+
+## 0.9.1-beta.0
+
 ### Fixes
 
 - [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types.  Thanks @pngwn!
diff --git a/js/code/Index.svelte b/js/code/Index.svelte
index 72d81801f897c..69c1832e6bc6b 100644
--- a/js/code/Index.svelte
+++ b/js/code/Index.svelte
@@ -29,6 +29,7 @@
 	export let value_is_output = false;
 	export let language = "";
 	export let lines = 5;
+	export let max_lines: number | undefined = undefined;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
@@ -36,6 +37,8 @@
 	export let show_label = true;
 	export let loading_status: LoadingStatus;
 	export let scale: number | null = null;
+	export let min_width: number | undefined = undefined;
+	export let wrap_lines = false;
 
 	export let interactive: boolean;
 
@@ -51,19 +54,17 @@
 		value_is_output = false;
 	});
 	$: value, handle_change();
-
-	const is_browser = typeof window !== "undefined";
-	const default_lines = interactive ? lines : 10.35;
 </script>
 
 <Block
-	height={is_browser ? undefined : default_lines * 25 + 4}
+	height={max_lines && "fit-content"}
 	variant={"solid"}
 	padding={false}
 	{elem_id}
 	{elem_classes}
 	{visible}
 	{scale}
+	{min_width}
 >
 	<StatusTracker
 		autoscroll={gradio.autoscroll}
@@ -72,7 +73,9 @@
 		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 	/>
 
-	<BlockLabel Icon={CodeIcon} {show_label} {label} float={false} />
+	{#if show_label}
+		<BlockLabel Icon={CodeIcon} {show_label} {label} float={false} />
+	{/if}
 
 	{#if !value && !interactive}
 		<Empty unpadded_box={true} size="large">
@@ -85,7 +88,9 @@
 			bind:value
 			{language}
 			{lines}
+			{max_lines}
 			{dark_mode}
+			{wrap_lines}
 			readonly={!interactive}
 			on:blur={() => gradio.dispatch("blur")}
 			on:focus={() => gradio.dispatch("focus")}
diff --git a/js/code/package.json b/js/code/package.json
index 25d2c22185521..11c3045644c34 100644
--- a/js/code/package.json
+++ b/js/code/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/code",
-	"version": "0.9.1",
+	"version": "0.10.0-beta.8",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/code/shared/Code.svelte b/js/code/shared/Code.svelte
index b5da7900bac7a..9f0c27efacbf9 100644
--- a/js/code/shared/Code.svelte
+++ b/js/code/shared/Code.svelte
@@ -20,10 +20,12 @@
 	export let basic = true;
 	export let language: string;
 	export let lines = 5;
+	export let max_lines: number | null = null;
 	export let extensions: Extension[] = [];
 	export let use_tab = true;
 	export let readonly = false;
 	export let placeholder: string | HTMLElement | null | undefined = undefined;
+	export let wrap_lines = false;
 
 	const dispatch = createEventDispatcher<{
 		change: string;
@@ -59,7 +61,7 @@
 
 	function update_lines(): void {
 		if (view) {
-			view.requestMeasure({ read: update_gutters });
+			view.requestMeasure({ read: resize });
 		}
 	}
 
@@ -96,18 +98,20 @@
 		return null;
 	}
 
-	function update_gutters(_view: EditorView): any {
-		let gutters = _view.dom.querySelectorAll<HTMLElement>(".cm-gutter");
-		let _lines = lines + 1;
-		let lineHeight = getGutterLineHeight(_view);
-		if (!lineHeight) {
+	function resize(_view: EditorView): any {
+		let scroller = _view.dom.querySelector<HTMLElement>(".cm-scroller");
+		if (!scroller) {
 			return null;
 		}
-		for (var i = 0; i < gutters.length; i++) {
-			let node = gutters[i];
-			node.style.minHeight = `calc(${lineHeight} * ${_lines})`;
+		const lineHeight = getGutterLineHeight(_view);
+		if (!lineHeight) {
+			return null;
 		}
-		return null;
+
+		const minLines = lines == 1 ? 1 : lines + 1;
+		scroller.style.minHeight = `calc(${lineHeight} * ${minLines})`;
+		if (max_lines)
+			scroller.style.maxHeight = `calc(${lineHeight} * ${max_lines + 1})`;
 	}
 
 	function handle_change(vu: ViewUpdate): void {
@@ -117,7 +121,7 @@
 			value = text;
 			dispatch("change", text);
 		}
-		view.requestMeasure({ read: update_gutters });
+		view.requestMeasure({ read: resize });
 	}
 
 	function get_extensions(): Extension[] {
@@ -148,6 +152,9 @@
 			fontFamily: "var(--font-mono)",
 			minHeight: "100%"
 		},
+		".cm-gutterElement": {
+			marginRight: "var(--spacing-xs)"
+		},
 		".cm-gutters": {
 			marginRight: "1px",
 			borderRight: "1px solid var(--border-color-primary)",
@@ -199,6 +206,9 @@
 		}
 
 		extensions.push(EditorView.updateListener.of(handle_change));
+		if (wrap_lines) {
+			extensions.push(EditorView.lineWrapping);
+		}
 		return extensions;
 	}
 
@@ -233,13 +243,13 @@
 	.wrap {
 		display: flex;
 		flex-direction: column;
-		flex-flow: column;
+		flex-grow: 1;
 		margin: 0;
 		padding: 0;
 		height: 100%;
 	}
 	.codemirror-wrapper {
-		height: 100%;
+		flex-grow: 1;
 		overflow: auto;
 	}
 
diff --git a/js/code/shared/Copy.svelte b/js/code/shared/Copy.svelte
index e8909fc1c55f9..c1979aa266216 100644
--- a/js/code/shared/Copy.svelte
+++ b/js/code/shared/Copy.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onDestroy } from "svelte";
-	import { fade } from "svelte/transition";
 	import { Copy, Check } from "@gradio/icons";
+	import { IconButton } from "@gradio/atoms";
 
 	let copied = false;
 	export let value: string;
@@ -27,36 +27,4 @@
 	});
 </script>
 
-<button
-	on:click={handle_copy}
-	title="Copy message"
-	class:copied
-	aria-label={copied ? "Message copied" : "Copy Message"}
->
-	{#if !copied}
-		<Copy />
-	{:else}
-		<span class="check">
-			<Check />
-		</span>
-	{/if}
-</button>
-
-<style>
-	button {
-		position: relative;
-		cursor: pointer;
-		padding: 5px;
-		width: 22px;
-		height: 22px;
-	}
-
-	.check {
-		top: 0;
-		right: 0;
-		z-index: var(--layer-top);
-		background: var(--block-label-background-fill);
-		width: 100%;
-		height: 100%;
-	}
-</style>
+<IconButton Icon={copied ? Check : Copy} on:click={handle_copy} />
diff --git a/js/code/shared/Download.svelte b/js/code/shared/Download.svelte
index aefdd499e57bb..f103f271ecad7 100644
--- a/js/code/shared/Download.svelte
+++ b/js/code/shared/Download.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { onDestroy } from "svelte";
-	import { fade } from "svelte/transition";
 	import { Download, Check } from "@gradio/icons";
 	import { DownloadLink } from "@gradio/wasm/svelte";
+	import { IconButton } from "@gradio/atoms";
 
 	export let value: string;
 	export let language: string;
@@ -53,38 +53,10 @@
 	});
 </script>
 
-<div class="container">
-	<DownloadLink
-		download="file.{ext}"
-		href={download_value}
-		on:click={copy_feedback}
-	>
-		<Download />
-		{#if copied}
-			<span class="check" transition:fade><Check /></span>
-		{/if}
-	</DownloadLink>
-</div>
-
-<style>
-	.container {
-		position: relative;
-		cursor: pointer;
-		padding: 5px;
-
-		width: 22px;
-		height: 22px;
-	}
-
-	.check {
-		position: absolute;
-		top: 0;
-		right: 0;
-		z-index: var(--layer-top);
-		background: var(--background-fill-primary);
-		padding: var(--size-1);
-		width: 100%;
-		height: 100%;
-		color: var(--body-text-color);
-	}
-</style>
+<DownloadLink
+	download="file.{ext}"
+	href={download_value}
+	on:click={copy_feedback}
+>
+	<IconButton Icon={copied ? Check : Download} />
+</DownloadLink>
diff --git a/js/code/shared/Widgets.svelte b/js/code/shared/Widgets.svelte
index 584c1944077ad..014676455e75e 100644
--- a/js/code/shared/Widgets.svelte
+++ b/js/code/shared/Widgets.svelte
@@ -1,35 +1,13 @@
 <script lang="ts">
 	import Copy from "./Copy.svelte";
 	import Download from "./Download.svelte";
+	import { IconButtonWrapper } from "@gradio/atoms";
 
 	export let value: string;
 	export let language: string;
 </script>
 
-<div>
+<IconButtonWrapper>
 	<Download {value} {language} />
 	<Copy {value} />
-</div>
-
-<style>
-	div {
-		display: flex;
-		position: absolute;
-		top: var(--block-label-margin);
-		right: var(--block-label-margin);
-		align-items: center;
-
-		z-index: var(--layer-2);
-		transition: 150ms;
-		box-shadow: var(--shadow-drop);
-		border: 1px solid var(--border-color-primary);
-		border-top: none;
-		border-right: none;
-		border-radius: var(--block-label-right-radius);
-		background: var(--block-label-background-fill);
-		overflow: hidden;
-		color: var(--block-label-text-color);
-		font: var(--font);
-		font-size: var(--button-small-text-size);
-	}
-</style>
+</IconButtonWrapper>
diff --git a/js/code/shared/language.ts b/js/code/shared/language.ts
index a4492bfd815c7..499bc2456e198 100644
--- a/js/code/shared/language.ts
+++ b/js/code/shared/language.ts
@@ -12,6 +12,7 @@ const possible_langs = [
 	"html",
 	"css",
 	"javascript",
+	"jinja2",
 	"typescript",
 	"yaml",
 	"dockerfile",
@@ -58,6 +59,10 @@ const lang_map: Record<string, (() => Promise<Extension>) | undefined> = {
 	css: () => import("@codemirror/lang-css").then((m) => m.css()),
 	javascript: () =>
 		import("@codemirror/lang-javascript").then((m) => m.javascript()),
+	jinja2: () =>
+		import("@codemirror/legacy-modes/mode/jinja2").then((m) =>
+			StreamLanguage.define(m.jinja2)
+		),
 	typescript: () =>
 		import("@codemirror/lang-javascript").then((m) =>
 			m.javascript({ typescript: true })
diff --git a/js/colorpicker/CHANGELOG.md b/js/colorpicker/CHANGELOG.md
index 46af56ff3745b..eff82c5ac6621 100644
--- a/js/colorpicker/CHANGELOG.md
+++ b/js/colorpicker/CHANGELOG.md
@@ -1,5 +1,54 @@
 # @gradio/colorpicker
 
+## 0.4.0-beta.5
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.4.0-beta.4
+
+### Features
+
+- [#9570](https://github.com/gradio-app/gradio/pull/9570) [`e0ee3d5`](https://github.com/gradio-app/gradio/commit/e0ee3d5bb1020744cefa1abf66009fbf07da8cbe) - Update gr.ColorPicker UI.  Thanks @hannahblair!
+- [#9521](https://github.com/gradio-app/gradio/pull/9521) [`06ef22e`](https://github.com/gradio-app/gradio/commit/06ef22e83cdd27e7afb381396d153d9db3dea16e) - Allow `info=` to render markdown.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+
+## 0.3.13-beta.3
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.3.13-beta.2
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+
+## 0.3.13-beta.2
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.3.13-beta.1
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+
 ## 0.3.13
 
 ### Fixes
diff --git a/js/colorpicker/ColorPicker.stories.svelte b/js/colorpicker/ColorPicker.stories.svelte
index c54482bb62ba5..d15f47fb659df 100644
--- a/js/colorpicker/ColorPicker.stories.svelte
+++ b/js/colorpicker/ColorPicker.stories.svelte
@@ -6,10 +6,10 @@
 <Meta title="Components/Color Picker" component={ColorPicker} argTypes={{}} />
 
 <Template let:args>
-	<ColorPicker value="Color Picker" {...args} />
+	<ColorPicker label="Color Picker" {...args} />
 </Template>
 
-<Story name="Default" />
+<Story name="Default" args={{ interactive: true }} />
 <Story
 	name="Color Picker with a color value and hidden label"
 	args={{ value: "#FFC0CB", show_label: false, interactive: true }}
diff --git a/js/colorpicker/Index.svelte b/js/colorpicker/Index.svelte
index 79f343fe051c2..65e00767aa09c 100644
--- a/js/colorpicker/Index.svelte
+++ b/js/colorpicker/Index.svelte
@@ -11,7 +11,6 @@
 	import { Block } from "@gradio/atoms";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
-	import exp from "constants";
 
 	export let label = "ColorPicker";
 	export let info: string | undefined = undefined;
@@ -25,6 +24,7 @@
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
+	export let root: string;
 	export let gradio: Gradio<{
 		change: never;
 		input: never;
@@ -34,6 +34,7 @@
 		clear_status: LoadingStatus;
 	}>;
 	export let interactive: boolean;
+	export let disabled = false;
 </script>
 
 <Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
@@ -47,10 +48,11 @@
 	<Colorpicker
 		bind:value
 		bind:value_is_output
+		{root}
 		{label}
 		{info}
 		{show_label}
-		disabled={!interactive}
+		disabled={!interactive || disabled}
 		on:change={() => gradio.dispatch("change")}
 		on:input={() => gradio.dispatch("input")}
 		on:submit={() => gradio.dispatch("submit")}
diff --git a/js/colorpicker/package.json b/js/colorpicker/package.json
index e00cf2513ce27..3c8bb90447fc9 100644
--- a/js/colorpicker/package.json
+++ b/js/colorpicker/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/colorpicker",
-	"version": "0.3.13",
+	"version": "0.4.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
@@ -24,7 +24,10 @@
 	"dependencies": {
 		"@gradio/atoms": "workspace:^",
 		"@gradio/statustracker": "workspace:^",
-		"@gradio/utils": "workspace:^"
+		"@gradio/utils": "workspace:^",
+		"@gradio/icons": "workspace:^",
+		"tinycolor2": "^1.6.0",
+		"@types/tinycolor2": "^1.4.6"
 	},
 	"devDependencies": {
 		"@gradio/preview": "workspace:^"
diff --git a/js/colorpicker/shared/Colorpicker.svelte b/js/colorpicker/shared/Colorpicker.svelte
index 7153989cf607c..5438201d9a522 100644
--- a/js/colorpicker/shared/Colorpicker.svelte
+++ b/js/colorpicker/shared/Colorpicker.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	import { createEventDispatcher, afterUpdate } from "svelte";
+	import { createEventDispatcher, afterUpdate, onMount, tick } from "svelte";
+	import tinycolor from "tinycolor2";
 	import { BlockTitle } from "@gradio/atoms";
+	import { click_outside } from "./events";
+	import { Eyedropper } from "@gradio/icons";
+	import { hsva_to_rgba, format_color } from "./utils";
 
 	export let value = "#000000";
 	export let value_is_output = false;
@@ -8,15 +12,143 @@
 	export let info: string | undefined = undefined;
 	export let disabled = false;
 	export let show_label = true;
+	export let root: string;
+
+	export let current_mode: "hex" | "rgb" | "hsl" = "hex";
+	export let dialog_open = false;
+
+	let eyedropper_supported = false;
+
+	let sl_wrap: HTMLDivElement;
+	let hue_wrap: HTMLDivElement;
 
 	const dispatch = createEventDispatcher<{
 		change: string;
+		click_outside: void;
 		input: undefined;
 		submit: undefined;
 		blur: undefined;
 		focus: undefined;
+		selected: string;
+		close: void;
 	}>();
 
+	let sl_marker_pos = [0, 0];
+	let sl_rect: DOMRect | null = null;
+	let sl_moving = false;
+	let sl = [0, 0];
+
+	let hue = 0;
+	let hue_marker_pos = 0;
+	let hue_rect: DOMRect | null = null;
+	let hue_moving = false;
+
+	function handle_hue_down(
+		event: MouseEvent & { currentTarget: HTMLDivElement }
+	): void {
+		hue_rect = event.currentTarget.getBoundingClientRect();
+		hue_moving = true;
+		update_hue_from_mouse(event.clientX);
+	}
+
+	function update_hue_from_mouse(x: number): void {
+		if (!hue_rect) return;
+		const _x = Math.max(0, Math.min(x - hue_rect.left, hue_rect.width)); // Get the x-coordinate relative to the box
+		hue_marker_pos = _x;
+		const _hue = (_x / hue_rect.width) * 360; // Scale the x position to a hue value (0-360)
+
+		hue = _hue;
+
+		value = hsva_to_rgba({ h: _hue, s: sl[0], v: sl[1], a: 1 });
+	}
+
+	function update_color_from_mouse(x: number, y: number): void {
+		if (!sl_rect) return;
+		const _x = Math.max(0, Math.min(x - sl_rect.left, sl_rect.width));
+		const _y = Math.max(0, Math.min(y - sl_rect.top, sl_rect.height));
+		sl_marker_pos = [_x, _y];
+		const _hsva = {
+			h: hue * 1,
+			s: _x / sl_rect.width,
+			v: 1 - _y / sl_rect.height,
+			a: 1
+		};
+
+		sl = [_hsva.s, _hsva.v];
+
+		value = hsva_to_rgba(_hsva);
+	}
+
+	function handle_sl_down(
+		event: MouseEvent & { currentTarget: HTMLDivElement }
+	): void {
+		sl_moving = true;
+		sl_rect = event.currentTarget.getBoundingClientRect();
+		update_color_from_mouse(event.clientX, event.clientY);
+	}
+
+	function handle_move(event: MouseEvent): void {
+		if (sl_moving) update_color_from_mouse(event.clientX, event.clientY);
+		if (hue_moving) update_hue_from_mouse(event.clientX);
+	}
+
+	function handle_end(): void {
+		sl_moving = false;
+		hue_moving = false;
+	}
+
+	async function update_mouse_from_color(color: string): Promise<void> {
+		if (sl_moving || hue_moving) return;
+		await tick();
+		if (!color) return;
+
+		if (!sl_rect && sl_wrap) {
+			sl_rect = sl_wrap.getBoundingClientRect();
+		}
+
+		if (!hue_rect && hue_wrap) {
+			hue_rect = hue_wrap.getBoundingClientRect();
+		}
+
+		// Exit if we still don't have valid rectangles
+		if (!sl_rect || !hue_rect) return;
+
+		const hsva = tinycolor(color).toHsv();
+		const _x = hsva.s * sl_rect.width;
+		const _y = (1 - hsva.v) * sl_rect.height;
+		sl_marker_pos = [_x, _y];
+		sl = [hsva.s, hsva.v];
+		hue = hsva.h;
+		hue_marker_pos = (hsva.h / 360) * hue_rect.width;
+	}
+
+	function request_eyedropper(): void {
+		// @ts-ignore
+		const eyeDropper = new EyeDropper();
+
+		eyeDropper.open().then((result: { sRGBHex: string }) => {
+			value = result.sRGBHex;
+		});
+	}
+
+	const modes = [
+		["Hex", "hex"],
+		["RGB", "rgb"],
+		["HSL", "hsl"]
+	] as const;
+
+	$: color_string = format_color(value, current_mode);
+	$: color_string && dispatch("selected", color_string);
+
+	onMount(async () => {
+		// @ts-ignore
+		eyedropper_supported = window !== undefined && !!window.EyeDropper;
+	});
+
+	function handle_click_outside(): void {
+		dialog_open = false;
+	}
+
 	function handle_change(): void {
 		dispatch("change", value);
 		if (!value_is_output) {
@@ -27,19 +159,258 @@
 	afterUpdate(() => {
 		value_is_output = false;
 	});
+
+	$: update_mouse_from_color(value);
 	$: value, handle_change();
+
+	function handle_click(): void {
+		dispatch("selected", color_string);
+		dispatch("close");
+	}
 </script>
 
-<label class="block">
-	<BlockTitle {show_label} {info}>{label}</BlockTitle>
-	<input type="color" bind:value on:focus on:blur {disabled} />
-</label>
+<BlockTitle {root} {show_label} {info}>{label}</BlockTitle>
+<button
+	class="dialog-button"
+	style:background={value}
+	{disabled}
+	on:click={() => {
+		update_mouse_from_color(value);
+		dialog_open = !dialog_open;
+	}}
+/>
+
+<svelte:window on:mousemove={handle_move} on:mouseup={handle_end} />
+
+{#if dialog_open}
+	<div
+		class="color-picker"
+		on:focus
+		on:blur
+		use:click_outside={handle_click_outside}
+	>
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div
+			class="color-gradient"
+			on:mousedown={handle_sl_down}
+			style="--hue:{hue}"
+			bind:this={sl_wrap}
+		>
+			<div
+				class="marker"
+				style:transform="translate({sl_marker_pos[0]}px,{sl_marker_pos[1]}px)"
+				style:background={value}
+			/>
+		</div>
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div class="hue-slider" on:mousedown={handle_hue_down} bind:this={hue_wrap}>
+			<div
+				class="marker"
+				style:background={"hsl(" + hue + ", 100%, 50%)"}
+				style:transform="translateX({hue_marker_pos}px)"
+			/>
+		</div>
+
+		<div class="input">
+			<button class="swatch" style:background={value} on:click={handle_click}
+			></button>
+			<div>
+				<div class="input-wrap">
+					<input
+						type="text"
+						bind:value={color_string}
+						on:change={(e) => (value = e.currentTarget.value)}
+					/>
+					<button class="eyedropper" on:click={request_eyedropper}>
+						{#if eyedropper_supported}
+							<Eyedropper />
+						{/if}
+					</button>
+				</div>
+
+				<div class="buttons">
+					{#each modes as [label, value]}
+						<button
+							class="button"
+							class:active={current_mode === value}
+							on:click={() => (current_mode = value)}>{label}</button
+						>
+					{/each}
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
 
 <style>
-	input {
+	.dialog-button {
 		display: block;
+		width: var(--size-10);
+		height: var(--size-5);
+		border: var(--block-border-width) solid var(--block-border-color);
+	}
+
+	.dialog-button:disabled {
+		cursor: not-allowed;
+	}
+
+	.input {
+		display: flex;
+		align-items: center;
+		padding: 0 10px 15px;
+	}
+
+	.input input {
+		height: 30px;
+		width: 100%;
+		flex-shrink: 1;
+		border-bottom-left-radius: 0;
+		border: 1px solid var(--block-border-color);
+		letter-spacing: -0.05rem;
+		border-left: none;
+		border-right: none;
+		font-family: var(--font-mono);
+		font-size: var(--scale-000);
+		padding-left: 15px;
+		padding-right: 0;
+		background-color: var(--background-fill-secondary);
+		color: var(--block-label-text-color);
+	}
+
+	.swatch {
+		width: 50px;
+		height: 50px;
+		border-top-left-radius: 15px;
+		border-bottom-left-radius: 15px;
+		flex-shrink: 0;
+		border: 1px solid var(--block-border-color);
+	}
+
+	.color-picker {
+		width: 230px;
+		background: var(--background-fill-secondary);
+		border: 1px solid var(--block-border-color);
+		border-radius: var(--block-radius);
+		margin: var(--spacing-sm) 0;
+	}
+
+	.buttons {
+		height: 20px;
+		display: flex;
+		justify-content: stretch;
+		gap: 0px;
+	}
+
+	.buttons button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 1px solid var(--block-border-color);
+		background: var(--background-fill-secondary);
+		padding: 3px 6px;
+		font-size: var(--scale-000);
+		cursor: pointer;
+		border-right: none;
+		width: 100%;
+		border-top: none;
+	}
+
+	.buttons button:first-child {
+		border-left: none;
+	}
+
+	.buttons button:last-child {
+		border-bottom-right-radius: 15px;
+		border-right: 1px solid var(--block-border-color);
+	}
+
+	.buttons button:hover {
+		background: var(--background-fill-secondary-hover);
+		font-weight: var(--weight-bold);
+	}
+
+	.buttons button.active {
+		background: var(--background-fill-secondary);
+		font-weight: var(--weight-bold);
+	}
+
+	.input-wrap {
+		display: flex;
+	}
+
+	.color-gradient {
 		position: relative;
-		background: var(--background-fill-primary);
-		line-height: var(--line-sm);
+		--hue: white;
+		background: linear-gradient(rgba(0, 0, 0, 0), #000),
+			linear-gradient(90deg, #fff, hsl(var(--hue), 100%, 50%));
+		width: 100%;
+		height: 150px;
+		border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+	}
+
+	.hue-slider {
+		position: relative;
+		width: 90%;
+		margin: 10px auto;
+		height: 10px;
+		border-radius: 5px;
+		background: linear-gradient(
+			to right,
+			hsl(0, 100%, 50%) 0%,
+			#ff0 17%,
+			lime 33%,
+			cyan 50%,
+			blue 67%,
+			magenta 83%,
+			red 100%
+		);
+	}
+
+	.swatch {
+		width: 50px;
+		height: 50px;
+		border-top-left-radius: 15px;
+		border-bottom-left-radius: 15px;
+		flex-shrink: 0;
+		border: 1px solid var(--block-border-color);
+	}
+
+	.eyedropper {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 25px;
+		height: 30px;
+		border-top-right-radius: 15px;
+		border: 1px solid var(--block-border-color);
+		border-left: none;
+		background: var(--background-fill-secondary);
+		height: 30px;
+		padding: 7px 7px 5px 0px;
+		cursor: pointer;
+	}
+
+	.marker {
+		position: absolute;
+		width: 14px;
+		height: 14px;
+		border-radius: 50%;
+		border: 2px solid white;
+		top: -2px;
+		left: -7px;
+		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
+		pointer-events: none;
+	}
+
+	input {
+		width: 100%;
+		height: 30px;
+		border: 1px solid var(--block-border-color);
+		border-radius: var(--radius-sm);
+		padding: 0 var(--size-2);
+		font-family: var(--font-mono);
+		font-size: var(--scale-000);
+		color: var(--block-label-text-color);
+		background-color: var(--background-fill-primary);
 	}
 </style>
diff --git a/js/colorpicker/shared/events.ts b/js/colorpicker/shared/events.ts
new file mode 100644
index 0000000000000..0f41b82293ef9
--- /dev/null
+++ b/js/colorpicker/shared/events.ts
@@ -0,0 +1,28 @@
+/**
+ * Svelte action to handle clicks outside of a DOM node
+ * @param node DOM node to check the click is outside of
+ * @param callback callback function to call if click is outside
+ * @returns svelte action return object with destroy method to remove event listener
+ */
+export function click_outside(
+	node: Node,
+	callback: (arg: MouseEvent) => void
+): any {
+	const handle_click = (event: MouseEvent): void => {
+		if (
+			node &&
+			!node.contains(event.target as Node) &&
+			!event.defaultPrevented
+		) {
+			callback(event);
+		}
+	};
+
+	document.addEventListener("mousedown", handle_click, true);
+
+	return {
+		destroy() {
+			document.removeEventListener("mousedown", handle_click, true);
+		}
+	};
+}
diff --git a/js/colorpicker/shared/utils.ts b/js/colorpicker/shared/utils.ts
new file mode 100644
index 0000000000000..d918dce692cc5
--- /dev/null
+++ b/js/colorpicker/shared/utils.ts
@@ -0,0 +1,37 @@
+import tinycolor from "tinycolor2";
+
+export function hsva_to_rgba(hsva: {
+	h: number;
+	s: number;
+	v: number;
+	a: number;
+}): string {
+	const saturation = hsva.s;
+	const value = hsva.v;
+	let chroma = saturation * value;
+	const hue_by_60 = hsva.h / 60;
+	let x = chroma * (1 - Math.abs((hue_by_60 % 2) - 1));
+	const m = value - chroma;
+
+	chroma = chroma + m;
+	x = x + m;
+
+	const index = Math.floor(hue_by_60) % 6;
+	const red = [chroma, x, m, m, x, chroma][index];
+	const green = [x, chroma, chroma, x, m, m][index];
+	const blue = [m, m, x, chroma, chroma, x][index];
+
+	return `rgba(${red * 255}, ${green * 255}, ${blue * 255}, ${hsva.a})`;
+}
+
+export function format_color(
+	color: string,
+	mode: "hex" | "rgb" | "hsl"
+): string {
+	if (mode === "hex") {
+		return tinycolor(color).toHexString();
+	} else if (mode === "rgb") {
+		return tinycolor(color).toRgbString();
+	}
+	return tinycolor(color).toHslString();
+}
diff --git a/js/column/CHANGELOG.md b/js/column/CHANGELOG.md
index b0a3e55f0c2af..c9676dd04a4c8 100644
--- a/js/column/CHANGELOG.md
+++ b/js/column/CHANGELOG.md
@@ -1,5 +1,57 @@
 # @gradio/column
 
+## 0.2.0-beta.2
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.5
+
+## 0.2.0-beta.2
+
+### Features
+
+- [#9577](https://github.com/gradio-app/gradio/pull/9577) [`9f532e0`](https://github.com/gradio-app/gradio/commit/9f532e03a6b91b9a5592152c19b9b2611774cae7) - Equal height columns.  Thanks @aliabid94!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+
+## 0.2.0-beta.1
+
+### Features
+
+- [#9496](https://github.com/gradio-app/gradio/pull/9496) [`1647ebd`](https://github.com/gradio-app/gradio/commit/1647ebddc3e2ed6fc143a62629409e32afcc5801) - UI theme fixes.  Thanks @aliabid94!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.3
+
+## 0.2.0-beta.0
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+
+## 0.2.0-beta.0
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.2.0-beta.0
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+
+## 0.2.0-beta.0
+
+### Features
+
+- [#9213](https://github.com/gradio-app/gradio/pull/9213) [`ab4580b`](https://github.com/gradio-app/gradio/commit/ab4580bd5f755a07c9a9bd2a775220a9a2085f8c) - Remove grey background behind all components.  Thanks @hannahblair!
+
 ## 0.1.4
 
 ### Fixes
diff --git a/js/column/Index.svelte b/js/column/Index.svelte
index 67cc50cbaaee8..e74f08da72fc9 100644
--- a/js/column/Index.svelte
+++ b/js/column/Index.svelte
@@ -17,7 +17,7 @@
 
 <div
 	id={elem_id}
-	class={elem_classes.join(" ")}
+	class="column {elem_classes.join(' ')}"
 	class:gap
 	class:compact={variant === "compact"}
 	class:panel={variant === "panel"}
diff --git a/js/column/package.json b/js/column/package.json
index c8dc42adeea9d..267ff5d940976 100644
--- a/js/column/package.json
+++ b/js/column/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/column",
-	"version": "0.1.4",
+	"version": "0.2.0-beta.2",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/component-test/CHANGELOG.md b/js/component-test/CHANGELOG.md
index 7baed850ff5aa..1e1ce2cbfe097 100644
--- a/js/component-test/CHANGELOG.md
+++ b/js/component-test/CHANGELOG.md
@@ -1,10 +1,59 @@
 # @self/component-test
 
+## 0.2.0-beta.7
+
+### Dependency updates
+
+- @gradio/video@0.11.0-beta.7
+- @self/build@0.1.0-beta.3
+
+## 0.2.0-beta.6
+
+### Dependency updates
+
+- @gradio/video@0.11.0-beta.6
+
+## 0.2.0-beta.5
+
+### Dependency updates
+
+- @gradio/video@0.11.0-beta.5
+
+## 0.2.0-beta.4
+
+### Dependency updates
+
+- @gradio/video@0.11.0-beta.4
+
+## 0.2.0-beta.3
+
+### Dependency updates
+
+- @gradio/video@0.11.0-beta.3
+
+## 0.2.0-beta.2
+
+### Features
+
+- [#9311](https://github.com/gradio-app/gradio/pull/9311) [`c4afdcd`](https://github.com/gradio-app/gradio/commit/c4afdcdb1f1f80c5f95ab45d527236e9364ace82) - Added max lines and overflow scrollbar for `gr.Code`.  Thanks @micpst!
+
+### Dependency updates
+
+- @gradio/video@0.11.0-beta.2
+- @self/build@0.1.0-beta.2
+
 ## 0.1.1
 
 ### Features
 
 - [#9187](https://github.com/gradio-app/gradio/pull/9187) [`5bf00b7`](https://github.com/gradio-app/gradio/commit/5bf00b7524ebf399b48719120a49d15bb21bd65c) - make all component SSR compatible.  Thanks @pngwn!
+- [#9204](https://github.com/gradio-app/gradio/pull/9204) [`3c73f00`](https://github.com/gradio-app/gradio/commit/3c73f00e3016b16917ebfe0bad390f2dff683457) - 🔡 Update default core Gradio font.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/video@0.11.0-beta.1
+
+## 0.1.1-beta.0
 
 ### Fixes
 
diff --git a/js/component-test/package.json b/js/component-test/package.json
index cbf33da9e07cb..39d7411aa67d0 100644
--- a/js/component-test/package.json
+++ b/js/component-test/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@self/component-test",
-	"version": "0.1.1",
+	"version": "0.2.0-beta.7",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
diff --git a/js/component-test/src/lib/component_json.ts b/js/component-test/src/lib/component_json.ts
index f3e056f62be45..1c1d3176072db 100644
--- a/js/component-test/src/lib/component_json.ts
+++ b/js/component-test/src/lib/component_json.ts
@@ -481,6 +481,7 @@ export default [
 		name: "code",
 		props: {
 			lines: 5,
+			max_lines: 20,
 			interactive: false,
 			show_label: true,
 			container: true,
@@ -498,6 +499,7 @@ export default [
 		name: "code",
 		props: {
 			lines: 5,
+			max_lines: 20,
 			interactive: true,
 			show_label: true,
 			container: true,
diff --git a/js/component-test/src/theme.css b/js/component-test/src/theme.css
index f931dc90bd0e8..f773c3d5b8dc6 100644
--- a/js/component-test/src/theme.css
+++ b/js/component-test/src/theme.css
@@ -54,7 +54,7 @@
 	--text-lg: 16px;
 	--text-xl: 22px;
 	--text-xxl: 26px;
-	--font: "Source Sans Pro", "ui-sans-serif", "system-ui", sans-serif;
+	--font: "IBM Plex Sans", "ui-sans-serif", "system-ui", sans-serif;
 	--font-mono: "IBM Plex Mono", "ui-monospace", "Consolas", monospace;
 	--body-background-fill: var(--background-fill-primary);
 	--body-text-color: var(--neutral-800);
@@ -432,7 +432,7 @@
 	--text-lg: 16px;
 	--text-xl: 22px;
 	--text-xxl: 26px;
-	--font: "Source Sans Pro", "ui-sans-serif", "system-ui", sans-serif;
+	--font: "IBM Plex Sans", "ui-sans-serif", "system-ui", sans-serif;
 	--font-mono: "IBM Plex Mono", "ui-monospace", "Consolas", monospace;
 	--body-text-size: var(--text-md);
 	--body-text-weight: 400;
diff --git a/js/core/.gitignore b/js/core/.gitignore
index 6f8fe001ac474..e69de29bb2d1d 100644
--- a/js/core/.gitignore
+++ b/js/core/.gitignore
@@ -1 +0,0 @@
-/src/lite/theme.css
diff --git a/js/core/CHANGELOG.md b/js/core/CHANGELOG.md
index bd048ad466b51..5ca53f73f4440 100644
--- a/js/core/CHANGELOG.md
+++ b/js/core/CHANGELOG.md
@@ -1,5 +1,206 @@
 # @gradio/core
 
+## 0.1.0-beta.6
+
+### Features
+
+- [#9590](https://github.com/gradio-app/gradio/pull/9590) [`e853c41`](https://github.com/gradio-app/gradio/commit/e853c413583d91186aef3aceb0849d0ec0494834) - SSR e2e + fixes.  Thanks @pngwn!
+- [#9575](https://github.com/gradio-app/gradio/pull/9575) [`4ec2feb`](https://github.com/gradio-app/gradio/commit/4ec2feb04e452d2c77482c09543c59948567be67) - Update gr.Dataframe UI with action popover.  Thanks @hannahblair!
+- [#9576](https://github.com/gradio-app/gradio/pull/9576) [`430a26a`](https://github.com/gradio-app/gradio/commit/430a26a4fbcbabb5e9ddb6173bf658a00960e88e) - Fix reload mode.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.7
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/code@0.10.0-beta.8
+- @gradio/paramviewer@0.4.22-beta.5
+- @gradio/tabitem@0.3.0-beta.4
+- @gradio/tabs@0.3.0-beta.3
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+- @gradio/image@0.16.0-beta.7
+- @gradio/video@0.11.0-beta.7
+- @gradio/button@0.3.0-beta.7
+- @gradio/markdown@0.10.0-beta.5
+- @gradio/gallery@0.13.0-beta.7
+- @gradio/plot@0.7.0-beta.6
+- @gradio/column@0.2.0-beta.2
+- @gradio/textbox@0.7.0-beta.5
+- @gradio/checkbox@0.4.0-beta.5
+- @gradio/file@0.10.0-beta.7
+
+## 0.1.0-beta.5
+
+### Features
+
+- [#9483](https://github.com/gradio-app/gradio/pull/9483) [`8dc7c12`](https://github.com/gradio-app/gradio/commit/8dc7c12389311b60efcde1b9d3e3668a34d2dc00) - Send Streaming data over Websocket if possible. Also support base64 output format for images.  Thanks @freddyaboulton!
+- [#9521](https://github.com/gradio-app/gradio/pull/9521) [`06ef22e`](https://github.com/gradio-app/gradio/commit/06ef22e83cdd27e7afb381396d153d9db3dea16e) - Allow `info=` to render markdown.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/tabitem@0.3.0-beta.4
+- @gradio/code@0.10.0-beta.7
+- @gradio/paramviewer@0.4.22-beta.4
+- @gradio/video@0.11.0-beta.6
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+- @gradio/client@1.6.0-beta.4
+- @gradio/upload@0.13.0-beta.6
+- @gradio/image@0.16.0-beta.6
+- @gradio/gallery@0.13.0-beta.6
+- @gradio/markdown@0.10.0-beta.4
+- @gradio/plot@0.7.0-beta.5
+- @gradio/column@0.2.0-beta.2
+- @gradio/button@0.3.0-beta.6
+- @gradio/textbox@0.7.0-beta.4
+- @gradio/checkbox@0.4.0-beta.4
+- @gradio/file@0.10.0-beta.6
+
+## 0.1.0-beta.4
+
+### Dependency updates
+
+- @gradio/code@0.10.0-beta.6
+
+## 0.1.0-beta.4
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.5
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/video@0.11.0-beta.5
+- @gradio/tabs@0.3.0-beta.3
+- @gradio/column@0.2.0-beta.1
+- @gradio/tabitem@0.3.0-beta.3
+- @gradio/code@0.10.0-beta.5
+- @gradio/paramviewer@0.4.22-beta.3
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+- @gradio/button@0.3.0-beta.5
+- @gradio/markdown@0.10.0-beta.3
+- @gradio/gallery@0.13.0-beta.5
+- @gradio/plot@0.7.0-beta.4
+- @gradio/file@0.10.0-beta.5
+- @gradio/checkbox@0.4.0-beta.3
+- @gradio/image@0.16.0-beta.5
+- @gradio/textbox@0.7.0-beta.3
+
+## 0.1.0-beta.4
+
+### Features
+
+- [#9464](https://github.com/gradio-app/gradio/pull/9464) [`3ac5d9c`](https://github.com/gradio-app/gradio/commit/3ac5d9c972576d82bc365a6532e6e12f55441a30) - Fix plots.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/upload@0.13.0-beta.4
+- @gradio/button@0.3.0-beta.4
+- @gradio/markdown@0.10.0-beta.2
+- @gradio/textbox@0.7.0-beta.2
+- @gradio/checkbox@0.4.0-beta.2
+- @gradio/file@0.10.0-beta.4
+- @gradio/image@0.16.0-beta.4
+- @gradio/video@0.11.0-beta.4
+- @gradio/code@0.10.0-beta.4
+- @gradio/paramviewer@0.4.22-beta.2
+- @gradio/wasm@0.14.0-beta.3
+- @gradio/plot@0.7.0-beta.3
+- @gradio/gallery@0.13.0-beta.4
+
+## 0.1.0-beta.3
+
+### Features
+
+- [#9412](https://github.com/gradio-app/gradio/pull/9412) [`c2c2fd9`](https://github.com/gradio-app/gradio/commit/c2c2fd989348f826566773c07c0e0bda200199ff) - fix SSR apps on spaces.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.3
+- @gradio/video@0.11.0-beta.3
+- @gradio/code@0.10.0-beta.3
+- @gradio/client@1.6.0-beta.3
+- @gradio/button@0.3.0-beta.3
+- @gradio/gallery@0.13.0-beta.3
+- @gradio/file@0.10.0-beta.3
+- @gradio/image@0.16.0-beta.3
+
+## 0.1.0-beta.2
+
+### Features
+
+- [#9323](https://github.com/gradio-app/gradio/pull/9323) [`06babda`](https://github.com/gradio-app/gradio/commit/06babda0395fd3fbd323c1c3cb33704ecfd6deb0) - Disable liking user message in chatbot by default but make it configurable.  Thanks @freddyaboulton!
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+- [#9269](https://github.com/gradio-app/gradio/pull/9269) [`e05f568`](https://github.com/gradio-app/gradio/commit/e05f568f47e9fa33ef91dbbe5cc477d32762bc36) - Fix reload mode and streaming in 5.0 dev.  Thanks @freddyaboulton!
+- [#9253](https://github.com/gradio-app/gradio/pull/9253) [`99648ec`](https://github.com/gradio-app/gradio/commit/99648ec7c4443e74799941e47b0015ac9ca581e1) - Adds ability to block event trigger when file is uploading.  Thanks @dawoodkhan82!
+- [#9335](https://github.com/gradio-app/gradio/pull/9335) [`b543465`](https://github.com/gradio-app/gradio/commit/b543465d06d7d1b399c4d0755da05e022611a97f) - Remove lite/theme.css from the Git-managed file tree.  Thanks @whitphx!
+
+### Fixes
+
+- [#9299](https://github.com/gradio-app/gradio/pull/9299) [`aa35b07`](https://github.com/gradio-app/gradio/commit/aa35b0788e613fdd45446d267513e6f94fa208ea) - Trigger state change event on iterators.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/gallery@0.13.0-beta.2
+- @gradio/upload@0.13.0-beta.2
+- @gradio/wasm@0.14.0-beta.2
+- @gradio/markdown@0.10.0-beta.2
+- @gradio/client@1.6.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+- @gradio/plot@0.6.5-beta.2
+- @gradio/button@0.3.0-beta.2
+- @gradio/file@0.10.0-beta.2
+- @gradio/image@0.16.0-beta.2
+- @gradio/video@0.11.0-beta.2
+- @gradio/code@0.10.0-beta.2
+- @gradio/paramviewer@0.4.22-beta.2
+- @gradio/checkbox@0.4.0-beta.2
+- @gradio/column@0.2.0-beta.0
+- @gradio/textbox@0.7.0-beta.2
+- @gradio/tabs@0.3.0-beta.2
+
+## 0.1.0-beta.1
+
+### Features
+
+- [#9200](https://github.com/gradio-app/gradio/pull/9200) [`2e179d3`](https://github.com/gradio-app/gradio/commit/2e179d35be6ed60a5a6bfc7303178d63e41781ad) - prefix api routes.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/video@0.11.0-beta.1
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/client@1.6.0-beta.1
+- @gradio/image@0.16.0-beta.1
+- @gradio/upload@0.12.4-beta.1
+- @gradio/markdown@0.9.4-beta.1
+- @gradio/wasm@0.13.1-beta.1
+- @gradio/theme@0.3.0-beta.1
+- @gradio/gallery@0.13.0-beta.1
+- @gradio/plot@0.6.5-beta.1
+- @gradio/tabs@0.3.0-beta.1
+- @gradio/column@0.2.0-beta.0
+- @gradio/button@0.3.0-beta.1
+- @gradio/textbox@0.7.0-beta.1
+- @gradio/code@0.9.1-beta.1
+- @gradio/paramviewer@0.4.22-beta.1
+- @gradio/file@0.9.4-beta.1
+- @gradio/checkbox@0.4.0-beta.1
+
+## 0.1.0-beta.0
+
+### Features
+
+- [#9149](https://github.com/gradio-app/gradio/pull/9149) [`3d7a9b8`](https://github.com/gradio-app/gradio/commit/3d7a9b81f6fef06187eca832471dc1692eb493a0) - Open audio/image input stream only when queue is ready.  Thanks @freddyaboulton!
+- [#9173](https://github.com/gradio-app/gradio/pull/9173) [`66349fe`](https://github.com/gradio-app/gradio/commit/66349fe26827e3a3c15b738a1177e95fec7f5554) - Streaming Guides.  Thanks @freddyaboulton!
+- [#9052](https://github.com/gradio-app/gradio/pull/9052) [`f3652eb`](https://github.com/gradio-app/gradio/commit/f3652ebe08211e12739df73c15fd97e5ff81276a) - Video gallery.  Thanks @dawoodkhan82!
+- [#8941](https://github.com/gradio-app/gradio/pull/8941) [`97a7bf6`](https://github.com/gradio-app/gradio/commit/97a7bf66a79179d1b91a3199d68e5c11216ca500) - Streaming inputs for 5.0.  Thanks @freddyaboulton!
+
 ## 0.0.4
 
 ### Dependency updates
diff --git a/js/core/index.ts b/js/core/index.ts
index 5f808cfb5dbb2..6db5a2efad10c 100644
--- a/js/core/index.ts
+++ b/js/core/index.ts
@@ -1,4 +1,5 @@
 export { default as Embed } from "./src/Embed.svelte";
 export { prefix_css, mount_css } from "./src/css";
+export { create_components } from "./src/init";
 export * from "./src/i18n";
 export * from "./src/types";
diff --git a/js/core/package.json b/js/core/package.json
index 025c432487e74..f5a63582b27d6 100644
--- a/js/core/package.json
+++ b/js/core/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/core",
-	"version": "0.0.4",
+	"version": "0.1.0-beta.6",
 	"type": "module",
 	"devDependencies": {
 		"@gradio/accordion": "workspace:^",
diff --git a/js/core/src/Blocks.svelte b/js/core/src/Blocks.svelte
index 6419b5750010d..13f0cb8d9e1bf 100644
--- a/js/core/src/Blocks.svelte
+++ b/js/core/src/Blocks.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { tick } from "svelte";
+	import { tick, onMount } from "svelte";
 	import { _ } from "svelte-i18n";
 	import { Client } from "@gradio/client";
 
@@ -12,8 +12,9 @@
 	import type { ThemeMode, Payload } from "./types";
 	import { Toast } from "@gradio/statustracker";
 	import type { ToastMessage } from "@gradio/statustracker";
-	import type { ShareData } from "@gradio/utils";
+	import type { ShareData, ValueData } from "@gradio/utils";
 	import MountComponents from "./MountComponents.svelte";
+	import { prefix_css } from "./css";
 
 	import logo from "./images/logo.svg";
 	import api_logo from "./api_docs/img/api-logo.svg";
@@ -45,36 +46,47 @@
 	export let fill_height = false;
 	export let ready: boolean;
 	export let username: string | null;
-
-	const {
+	export let api_prefix = "";
+	export let max_file_size: number | undefined = undefined;
+	export let initial_layout: ComponentMeta | undefined = undefined;
+	export let css: string | null | undefined = null;
+	let {
 		layout: _layout,
 		targets,
 		update_value,
 		get_data,
+		modify_stream,
+		get_stream_state,
+		set_time_limit,
 		loading_status,
 		scheduled_updates,
 		create_layout,
 		rerender_layout
-	} = create_components();
-
-	$: create_layout({
-		components,
-		layout,
-		dependencies,
-		root,
-		app,
-		options: {
-			fill_height
-		}
-	});
+	} = create_components(initial_layout);
+
+	$: components, layout, dependencies, root, app, fill_height, target, run();
 
 	$: {
 		ready = !!$_layout;
 	}
 
-	let params = new URLSearchParams(window.location.search);
-	let api_docs_visible = params.get("view") === "api" && show_api;
-	let api_recorder_visible = params.get("view") === "api-recorder" && show_api;
+	async function run(): Promise<void> {
+		await create_layout({
+			components,
+			layout,
+			dependencies,
+			root: root + api_prefix,
+			app,
+			options: {
+				fill_height
+			}
+		});
+	}
+
+	export let search_params: URLSearchParams;
+	let api_docs_visible = search_params.get("view") === "api" && show_api;
+	let api_recorder_visible =
+		search_params.get("view") === "api-recorder" && show_api;
 	function set_api_docs_visible(visible: boolean): void {
 		api_recorder_visible = false;
 		api_docs_visible = visible;
@@ -166,25 +178,19 @@
 	let _error_id = -1;
 
 	let user_left_page = false;
-	document.addEventListener("visibilitychange", function () {
-		if (document.visibilityState === "hidden") {
-			user_left_page = true;
-		}
-	});
 
 	const MESSAGE_QUOTE_RE = /^'([^]+)'$/;
 
 	const DUPLICATE_MESSAGE = $_("blocks.long_requests_queue");
 	const MOBILE_QUEUE_WARNING = $_("blocks.connection_can_break");
 	const MOBILE_RECONNECT_MESSAGE = $_("blocks.lost_connection");
+	const WAITING_FOR_INPUTS_MESSAGE = $_("blocks.waiting_for_inputs");
 	const SHOW_DUPLICATE_MESSAGE_ON_ETA = 15;
 	const SHOW_MOBILE_QUEUE_WARNING_ON_ETA = 10;
-	const is_mobile_device =
-		/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-			navigator.userAgent
-		);
+	let is_mobile_device = false;
 	let showed_duplicate_message = false;
 	let showed_mobile_warning = false;
+	let inputs_waiting: number[] = [];
 
 	// as state updates are not synchronous, we need to ensure updates are flushed before triggering any requests
 	function wait_then_trigger_api_call(
@@ -199,8 +205,10 @@
 		if ($scheduled_updates) {
 			_unsub = scheduled_updates.subscribe((updating) => {
 				if (!updating) {
-					trigger_api_call(dep_index, trigger_id, event_data);
-					unsub();
+					tick().then(() => {
+						trigger_api_call(dep_index, trigger_id, event_data);
+						unsub();
+					});
 				}
 			});
 		} else {
@@ -208,13 +216,36 @@
 		}
 	}
 
+	async function get_component_value_or_event_data(
+		component_id: number,
+		trigger_id: number | null,
+		event_data: unknown
+	): Promise<any> {
+		if (
+			component_id === trigger_id &&
+			event_data &&
+			(event_data as ValueData).is_value_data === true
+		) {
+			// @ts-ignore
+			return event_data.value;
+		}
+		return get_data(component_id);
+	}
+
 	async function trigger_api_call(
 		dep_index: number,
 		trigger_id: number | null = null,
 		event_data: unknown = null
 	): Promise<void> {
 		let dep = dependencies.find((dep) => dep.id === dep_index)!;
-
+		if (inputs_waiting.length > 0) {
+			for (const input of inputs_waiting) {
+				if (dep.inputs.includes(input)) {
+					add_new_message(WAITING_FOR_INPUTS_MESSAGE, "warning");
+					return;
+				}
+			}
+		}
 		const current_status = loading_status.get_status_for_fn(dep_index);
 		messages = messages.filter(({ fn_index }) => fn_index !== dep_index);
 		if (current_status === "pending" || current_status === "generating") {
@@ -223,7 +254,11 @@
 
 		let payload: Payload = {
 			fn_index: dep_index,
-			data: await Promise.all(dep.inputs.map((id) => get_data(id))),
+			data: await Promise.all(
+				dep.inputs.map((id) =>
+					get_component_value_or_event_data(id, trigger_id, event_data)
+				)
+			),
 			event_data: dep.collects_event_data ? event_data : null,
 			trigger_id: trigger_id
 		};
@@ -259,24 +294,49 @@
 
 		function trigger_prediction(dep: Dependency, payload: Payload): void {
 			if (dep.trigger_mode === "once") {
-				if (!dep.pending_request) make_prediction(payload);
+				if (!dep.pending_request)
+					make_prediction(payload, dep.connection == "stream");
 			} else if (dep.trigger_mode === "multiple") {
-				make_prediction(payload);
+				make_prediction(payload, dep.connection == "stream");
 			} else if (dep.trigger_mode === "always_last") {
 				if (!dep.pending_request) {
-					make_prediction(payload);
+					make_prediction(payload, dep.connection == "stream");
 				} else {
 					dep.final_event = payload;
 				}
 			}
 		}
 
-		async function make_prediction(payload: Payload): Promise<void> {
+		async function make_prediction(
+			payload: Payload,
+			streaming = false
+		): Promise<void> {
 			if (api_recorder_visible) {
 				api_calls = [...api_calls, JSON.parse(JSON.stringify(payload))];
 			}
 
 			let submission: ReturnType<typeof app.submit>;
+			app.set_current_payload(payload);
+			if (streaming) {
+				if (!submit_map.has(dep_index)) {
+					dep.inputs.forEach((id) => modify_stream(id, "waiting"));
+				} else if (
+					submit_map.has(dep_index) &&
+					dep.inputs.some((id) => get_stream_state(id) === "waiting")
+				) {
+					return;
+				} else if (
+					submit_map.has(dep_index) &&
+					dep.inputs.some((id) => get_stream_state(id) === "open")
+				) {
+					await app.send_ws_message(
+						// @ts-ignore
+						`${app.config.root + app.config.api_prefix}/stream/${submit_map.get(dep_index).event_id()}`,
+						{ ...payload, session_hash: app.session_hash }
+					);
+					return;
+				}
+			}
 			try {
 				submission = app.submit(
 					payload.fn_index,
@@ -316,7 +376,7 @@
 				const { data, fn_index } = message;
 				if (dep.pending_request && dep.final_event) {
 					dep.pending_request = false;
-					make_prediction(dep.final_event);
+					make_prediction(dep.final_event, dep.connection == "stream");
 				}
 				dep.pending_request = false;
 				handle_update(data, fn_index);
@@ -360,11 +420,34 @@
 				];
 			}
 
+			function open_stream_events(
+				status: StatusMessage,
+				id: number,
+				dep: Dependency
+			): void {
+				if (
+					status.original_msg === "process_starts" &&
+					dep.connection === "stream"
+				) {
+					modify_stream(id, "open");
+				}
+			}
+
+			/* eslint-disable complexity */
 			function handle_status_update(message: StatusMessage): void {
 				const { fn_index, ...status } = message;
+				if (status.stage === "streaming" && status.time_limit) {
+					dep.inputs.forEach((id) => {
+						set_time_limit(id, status.time_limit);
+					});
+				}
+				dep.inputs.forEach((id) => {
+					open_stream_events(message, id, dep);
+				});
 				//@ts-ignore
 				loading_status.update({
 					...status,
+					time_limit: status.time_limit,
 					status: status.stage,
 					progress: status.progress_data,
 					fn_index
@@ -397,7 +480,7 @@
 					];
 				}
 
-				if (status.stage === "complete") {
+				if (status.stage === "complete" || status.stage === "generating") {
 					status.changed_state_ids?.forEach((id) => {
 						dependencies
 							.filter((dep) => dep.targets.some(([_id, _]) => _id === id))
@@ -405,13 +488,17 @@
 								wait_then_trigger_api_call(dep.id, payload.trigger_id);
 							});
 					});
+				}
+				if (status.stage === "complete") {
 					dependencies.forEach(async (dep) => {
 						if (dep.trigger_after === fn_index) {
 							wait_then_trigger_api_call(dep.id, payload.trigger_id);
 						}
 					});
-
-					// submission.destroy();
+					dep.inputs.forEach((id) => {
+						modify_stream(id, "closed");
+					});
+					submit_map.delete(dep_index);
 				}
 				if (status.broken && is_mobile_device && user_left_page) {
 					window.setTimeout(() => {
@@ -451,6 +538,7 @@
 			}
 		}
 	}
+	/* eslint-enable complexity */
 
 	function trigger_share(title: string | undefined, description: string): void {
 		if (space_id === null) {
@@ -503,12 +591,18 @@
 			}
 		});
 
-		if (render_complete) return;
+		if (!target || render_complete) return;
 
 		target.addEventListener("prop_change", (e: Event) => {
 			if (!isCustomEvent(e)) throw new Error("not a custom event");
 			const { id, prop, value } = e.detail;
 			update_value([{ id, prop, value }]);
+			if (prop === "input_ready" && value === false) {
+				inputs_waiting.push(id);
+			}
+			if (prop === "input_ready" && value === true) {
+				inputs_waiting = inputs_waiting.filter((item) => item !== id);
+			}
 		});
 		target.addEventListener("gradio", (e: Event) => {
 			if (!isCustomEvent(e)) throw new Error("not a custom event");
@@ -522,6 +616,16 @@
 				messages = [new_message(data, -1, event), ...messages];
 			} else if (event == "clear_status") {
 				update_status(id, "complete", data);
+			} else if (event == "close_stream") {
+				const deps = $targets[id]?.[data];
+				deps?.forEach((dep_id) => {
+					if (submit_map.has(dep_id)) {
+						// @ts-ignore
+						const url = `${app.config.root + app.config.api_prefix}/stream/${submit_map.get(dep_id).event_id()}`;
+						app.post_data(`${url}/close`, {});
+						app.close_ws(url);
+					}
+				});
 			} else {
 				const deps = $targets[id]?.[event];
 
@@ -592,12 +696,28 @@
 	function isCustomEvent(event: Event): event is CustomEvent {
 		return "detail" in event;
 	}
+
+	onMount(() => {
+		document.addEventListener("visibilitychange", function () {
+			if (document.visibilityState === "hidden") {
+				user_left_page = true;
+			}
+		});
+
+		is_mobile_device =
+			/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+				navigator.userAgent
+			);
+	});
 </script>
 
 <svelte:head>
 	{#if control_page_title}
 		<title>{title}</title>
 	{/if}
+	{#if css}
+		{@html `\<style\>${prefix_css(css, version)}</style>`}
+	{/if}
 </svelte:head>
 
 <div class="wrap" style:min-height={app_mode ? "100%" : "auto"}>
@@ -611,7 +731,7 @@
 				on:mount={handle_mount}
 				{version}
 				{autoscroll}
-				max_file_size={app.config.max_file_size}
+				{max_file_size}
 				client={app}
 			/>
 		{/if}
diff --git a/js/core/src/Login.svelte b/js/core/src/Login.svelte
index 03a0ea6d07107..fd001d5192099 100644
--- a/js/core/src/Login.svelte
+++ b/js/core/src/Login.svelte
@@ -50,6 +50,7 @@
 		<Form>
 			<Block>
 				<Textbox
+					{root}
 					label="username"
 					lines={1}
 					show_label={true}
@@ -61,6 +62,7 @@
 
 			<Block>
 				<Textbox
+					{root}
 					label="password"
 					lines={1}
 					show_label={true}
diff --git a/js/core/src/MountComponents.svelte b/js/core/src/MountComponents.svelte
index e0fb9a79aae48..bbcc4df87d21a 100644
--- a/js/core/src/MountComponents.svelte
+++ b/js/core/src/MountComponents.svelte
@@ -18,13 +18,15 @@
 	});
 </script>
 
-<Render
-	node={rootNode}
-	{root}
-	{target}
-	{theme_mode}
-	{version}
-	{autoscroll}
-	{max_file_size}
-	{client}
-/>
+{#if rootNode}
+	<Render
+		node={rootNode}
+		{root}
+		{target}
+		{theme_mode}
+		{version}
+		{autoscroll}
+		{max_file_size}
+		{client}
+	/>
+{/if}
diff --git a/js/core/src/Render.svelte b/js/core/src/Render.svelte
index f79e619cd5cc9..9075c3b6d9af6 100644
--- a/js/core/src/Render.svelte
+++ b/js/core/src/Render.svelte
@@ -36,20 +36,24 @@
 		};
 	});
 
-	$: node.children =
-		node.children &&
-		node.children.filter((v) => {
-			const valid_node = node.type !== "statustracker";
-			if (!valid_node) {
-				filtered_children.push(v);
-			}
-			return valid_node;
-		});
+	$: {
+		if (node) {
+			node.children =
+				node.children &&
+				node.children.filter((v) => {
+					const valid_node = node.type !== "statustracker";
+					if (!valid_node) {
+						filtered_children.push(v);
+					}
+					return valid_node;
+				});
+		}
+	}
 
 	setContext("BLOCK_KEY", parent);
 
 	$: {
-		if (node.type === "form") {
+		if (node && node.type === "form") {
 			if (node.children?.every((c) => !c.props.visible)) {
 				node.props.visible = false;
 			} else {
@@ -58,7 +62,7 @@
 		}
 	}
 
-	$: gradio_class = new Gradio<Record<string, any>>(
+	$: node.props.gradio = new Gradio<Record<string, any>>(
 		node.id,
 		target,
 		theme_mode,
@@ -73,7 +77,7 @@
 </script>
 
 <RenderComponent
-	_id={node.id}
+	_id={node?.id}
 	component={node.component}
 	bind:instance={node.instance}
 	bind:value={node.props.value}
@@ -84,7 +88,6 @@
 	{...node.props}
 	{theme_mode}
 	{root}
-	gradio={gradio_class}
 >
 	{#if node.children && node.children.length}
 		{#each node.children as _node (_node.id)}
diff --git a/js/core/src/RenderComponent.svelte b/js/core/src/RenderComponent.svelte
index 10e515d2babb1..e3987ba494468 100644
--- a/js/core/src/RenderComponent.svelte
+++ b/js/core/src/RenderComponent.svelte
@@ -13,7 +13,7 @@
 	export let theme_mode: ThemeMode;
 	export let instance: ComponentMeta["instance"];
 	export let value: any;
-	export let gradio: Gradio;
+	// export let gradio: Gradio;
 	export let elem_id: string;
 	export let elem_classes: string[];
 	export let _id: number;
@@ -32,6 +32,7 @@
 
 				function report(props: string) {
 					return function (propargs: any) {
+						if (!target) return;
 						const ev = s(_id, props, propargs);
 						target.dispatchEvent(ev);
 					};
@@ -61,7 +62,6 @@
 	{...$$restProps}
 	{theme_mode}
 	{root}
-	{gradio}
 >
 	<slot />
 </svelte:component>
diff --git a/js/core/src/api_docs/ApiDocs.svelte b/js/core/src/api_docs/ApiDocs.svelte
index 6999b716503b0..495690e304373 100644
--- a/js/core/src/api_docs/ApiDocs.svelte
+++ b/js/core/src/api_docs/ApiDocs.svelte
@@ -59,7 +59,9 @@
 		named_endpoints: any;
 		unnamed_endpoints: any;
 	}> {
-		let response = await fetch(root + "info");
+		let response = await fetch(
+			root.replace(/\/$/, "") + app.api_prefix + "/info"
+		);
 		let data = await response.json();
 		return data;
 	}
@@ -235,6 +237,7 @@
 								{root}
 								{space_id}
 								{username}
+								api_prefix={app.api_prefix}
 							/>
 
 							<ParametersSnippet
diff --git a/js/core/src/api_docs/CodeSnippet.svelte b/js/core/src/api_docs/CodeSnippet.svelte
index 6b05a8a309c7e..2b2def1decd62 100644
--- a/js/core/src/api_docs/CodeSnippet.svelte
+++ b/js/core/src/api_docs/CodeSnippet.svelte
@@ -17,6 +17,7 @@
 	export let dependency: Dependency;
 	export let dependency_index: number;
 	export let root: string;
+	export let api_prefix: string;
 	export let space_id: string | null;
 	export let endpoint_parameters: any;
 	export let named: boolean;
@@ -35,6 +36,9 @@
 	let blob_examples: any[] = endpoint_parameters.filter(
 		(param: EndpointParameter) => blob_components.includes(param.component)
 	);
+
+	$: normalised_api_prefix = api_prefix ? api_prefix : "/";
+	$: normalised_root = root.replace(/\/$/, "");
 </script>
 
 <div class="container">
@@ -135,7 +139,7 @@ console.log(result.data);
 				</div>
 
 				<div bind:this={bash_post_code}>
-					<pre>curl -X POST {root}call/{dependency.api_name} -s -H "Content-Type: application/json" -d '{"{"}
+					<pre>curl -X POST {normalised_root}{normalised_api_prefix}/call/{dependency.api_name} -s -H "Content-Type: application/json" -d '{"{"}
   "data": [{#each endpoint_parameters as { label, parameter_name, type, python_type, component, example_input, serializer }, i}
 							<!-- 
 -->{represent_value(
@@ -147,7 +151,7 @@ console.log(result.data);
 						{/each}
 ]{"}"}' \
   | awk -F'"' '{"{"} print $4{"}"}'  \
-  | read EVENT_ID; curl -N {root}call/{dependency.api_name}/$EVENT_ID</pre>
+  | read EVENT_ID; curl -N {normalised_root}{normalised_api_prefix}/call/{dependency.api_name}/$EVENT_ID</pre>
 				</div>
 			</code>
 		</Block>
diff --git a/js/core/src/api_docs/ParametersSnippet.svelte b/js/core/src/api_docs/ParametersSnippet.svelte
index 5ffa37774f8d4..b504bec362c76 100644
--- a/js/core/src/api_docs/ParametersSnippet.svelte
+++ b/js/core/src/api_docs/ParametersSnippet.svelte
@@ -41,7 +41,7 @@
 				The input value that is provided in the "{label}" <!--
 	-->{component}
 				component<!--
-	-->.
+	-->. {python_type.description}
 			</p>
 		</div>
 	{/each}
diff --git a/js/core/src/css.ts b/js/core/src/css.ts
index d69917f61e065..ca58de5072fef 100644
--- a/js/core/src/css.ts
+++ b/js/core/src/css.ts
@@ -1,6 +1,7 @@
 let supports_adopted_stylesheets = false;
 
 if (
+	typeof window !== "undefined" &&
 	"attachShadow" in Element.prototype &&
 	"adoptedStyleSheets" in Document.prototype
 ) {
@@ -35,9 +36,12 @@ export function mount_css(url: string, target: HTMLElement): Promise<void> {
 export function prefix_css(
 	string: string,
 	version: string,
-	style_element = document.createElement("style")
-): HTMLStyleElement | null {
-	if (!supports_adopted_stylesheets) return null;
+	style_element?: HTMLStyleElement
+): string | null {
+	if (!supports_adopted_stylesheets) return string;
+	if (!style_element) {
+		style_element = document.createElement("style");
+	}
 	style_element.remove();
 
 	const stylesheet = new CSSStyleSheet();
@@ -52,7 +56,7 @@ export function prefix_css(
 	const rules = stylesheet.cssRules;
 
 	let css_string = "";
-	let gradio_css_infix = `gradio-app .gradio-container.gradio-container-${version} .contain `;
+	let gradio_css_infix = `.gradio-container.gradio-container-${version} .contain `;
 
 	for (let i = 0; i < rules.length; i++) {
 		const rule = rules[i];
@@ -108,9 +112,5 @@ export function prefix_css(
 			css_string += `@font-face { ${rule.style.cssText} }`;
 		}
 	}
-	css_string = importString + css_string;
-	style_element.textContent = css_string;
-
-	document.head.appendChild(style_element);
-	return style_element;
+	return importString + css_string;
 }
diff --git a/js/core/src/init.test.ts b/js/core/src/init.test.ts
index d302fc161b792..755d9dd309e4c 100644
--- a/js/core/src/init.test.ts
+++ b/js/core/src/init.test.ts
@@ -481,14 +481,17 @@ describe("get_component", () => {
 		const id = "test-random";
 		const variant = "component";
 		const handlers = [
-			http.get(`${api_url}/custom_component/${id}/${variant}/style.css`, () => {
-				return new HttpResponse('console.log("boo")', {
-					status: 200,
-					headers: {
-						"Content-Type": "text/css"
-					}
-				});
-			})
+			http.get(
+				`${api_url}/custom_component/${id}/client/${variant}/style.css`,
+				() => {
+					return new HttpResponse('console.log("boo")', {
+						status: 200,
+						headers: {
+							"Content-Type": "text/css"
+						}
+					});
+				}
+			)
 		];
 
 		// vi.mock calls are always hoisted out of the test function to the top of the file
@@ -498,7 +501,7 @@ describe("get_component", () => {
 		});
 
 		vi.mock(
-			`example.com/custom_component/test-random/component/index.js`,
+			`example.com/custom_component/test-random/client/component/index.js`,
 			async () => {
 				mock();
 				return {
diff --git a/js/core/src/init.ts b/js/core/src/init.ts
index 13e3ffe1bf066..471abba704049 100644
--- a/js/core/src/init.ts
+++ b/js/core/src/init.ts
@@ -18,16 +18,23 @@ export interface UpdateTransaction {
 }
 
 let pending_updates: UpdateTransaction[][] = [];
+const is_browser = typeof window !== "undefined";
+const raf = is_browser
+	? requestAnimationFrame
+	: async (fn: () => Promise<void> | void) => await fn();
 
 /**
  * Create a store with the layout and a map of targets
  * @returns A store with the layout and a map of targets
  */
-export function create_components(): {
+export function create_components(initial_layout: ComponentMeta | undefined): {
 	layout: Writable<ComponentMeta>;
 	targets: Writable<TargetMap>;
 	update_value: (updates: UpdateTransaction[]) => void;
 	get_data: (id: number) => any | Promise<any>;
+	modify_stream: (id: number, state: "open" | "waiting" | "closed") => void;
+	get_stream_state: (id: number) => "open" | "waiting" | "closed" | "not_set";
+	set_time_limit: (id: number, time_limit: number | undefined) => void;
 	loading_status: ReturnType<typeof create_loading_status_store>;
 	scheduled_updates: Writable<boolean>;
 	create_layout: (args: {
@@ -39,7 +46,7 @@ export function create_components(): {
 		options: {
 			fill_height: boolean;
 		};
-	}) => void;
+	}) => Promise<void>;
 	rerender_layout: (args: {
 		render_id: number;
 		components: ComponentMeta[];
@@ -58,13 +65,26 @@ export function create_components(): {
 	let instance_map: { [id: number]: ComponentMeta };
 	let loading_status: ReturnType<typeof create_loading_status_store> =
 		create_loading_status_store();
-	const layout_store: Writable<ComponentMeta> = writable();
+	const layout_store: Writable<ComponentMeta> = writable(initial_layout);
 	let _components: ComponentMeta[] = [];
 	let app: client_return;
 	let keyed_component_values: Record<string | number, any> = {};
 	let _rootNode: ComponentMeta;
 
-	function create_layout({
+	function set_event_specific_args(dependencies: Dependency[]): void {
+		dependencies.forEach((dep) => {
+			dep.targets.forEach((target) => {
+				const instance = instance_map[target[0]];
+				if (instance && dep.event_specific_args?.length > 0) {
+					dep.event_specific_args?.forEach((arg: string) => {
+						instance.props[arg] = dep[arg as keyof Dependency];
+					});
+				}
+			});
+		});
+	}
+
+	async function create_layout({
 		app: _app,
 		components,
 		layout,
@@ -80,7 +100,9 @@ export function create_components(): {
 		options: {
 			fill_height: boolean;
 		};
-	}): void {
+	}): Promise<void> {
+		// make sure the state is settled before proceeding
+		flush();
 		app = _app;
 		store_keyed_values(_components);
 
@@ -130,9 +152,10 @@ export function create_components(): {
 			{} as { [id: number]: ComponentMeta }
 		);
 
-		walk_layout(layout, root).then(() => {
-			layout_store.set(_rootNode);
-		});
+		await walk_layout(layout, root);
+
+		layout_store.set(_rootNode);
+		set_event_specific_args(dependencies);
 	}
 
 	/**
@@ -208,6 +231,8 @@ export function create_components(): {
 		walk_layout(layout, root, current_element.parent).then(() => {
 			layout_store.set(_rootNode);
 		});
+
+		set_event_specific_args(dependencies);
 	}
 
 	async function walk_layout(
@@ -301,7 +326,6 @@ export function create_components(): {
 			}
 			return layout;
 		});
-
 		pending_updates = [];
 		update_scheduled = false;
 		update_scheduled_store.set(false);
@@ -314,12 +338,15 @@ export function create_components(): {
 		if (!update_scheduled) {
 			update_scheduled = true;
 			update_scheduled_store.set(true);
-			requestAnimationFrame(flush);
+			raf(flush);
 		}
 	}
-
 	function get_data(id: number): any | Promise<any> {
-		const comp = _component_map.get(id);
+		let comp = _component_map.get(id);
+		if (!comp) {
+			const layout = get(layout_store);
+			comp = findComponentById(layout, id);
+		}
 		if (!comp) {
 			return null;
 		}
@@ -329,15 +356,61 @@ export function create_components(): {
 		return comp.props.value;
 	}
 
+	function findComponentById(
+		node: ComponentMeta,
+		id: number
+	): ComponentMeta | undefined {
+		if (node.id === id) {
+			return node;
+		}
+		if (node.children) {
+			for (const child of node.children) {
+				const result = findComponentById(child, id);
+				if (result) {
+					return result;
+				}
+			}
+		}
+		return undefined;
+	}
+
+	function modify_stream(
+		id: number,
+		state: "open" | "closed" | "waiting"
+	): void {
+		const comp = _component_map.get(id);
+		if (comp && comp.instance.modify_stream_state) {
+			comp.instance.modify_stream_state(state);
+		}
+	}
+
+	function get_stream_state(
+		id: number
+	): "open" | "closed" | "waiting" | "not_set" {
+		const comp = _component_map.get(id);
+		if (comp && comp.instance.get_stream_state)
+			return comp.instance.get_stream_state();
+		return "not_set";
+	}
+
+	function set_time_limit(id: number, time_limit: number | undefined): void {
+		const comp = _component_map.get(id);
+		if (comp && comp.instance.set_time_limit) {
+			comp.instance.set_time_limit(time_limit);
+		}
+	}
+
 	return {
 		layout: layout_store,
 		targets: target_map,
 		update_value,
 		get_data,
+		modify_stream,
+		get_stream_state,
+		set_time_limit,
 		loading_status,
 		scheduled_updates: update_scheduled_store,
-		create_layout: (...args) =>
-			requestAnimationFrame(() => create_layout(...args)),
+		create_layout: create_layout,
 		rerender_layout
 	};
 }
diff --git a/js/core/src/lang/en.json b/js/core/src/lang/en.json
index 35d662c993602..33512377d3275 100644
--- a/js/core/src/lang/en.json
+++ b/js/core/src/lang/en.json
@@ -16,12 +16,14 @@
 		"record": "Record",
 		"no_microphone": "No microphone found",
 		"pause": "Pause",
-		"play": "Play"
+		"play": "Play",
+		"waiting": "Waiting"
 	},
 	"blocks": {
 		"connection_can_break": "On mobile, the connection can break if this tab is unfocused or the device sleeps, losing your position in queue.",
 		"long_requests_queue": "There is a long queue of requests pending. Duplicate this Space to skip.",
-		"lost_connection": "Lost connection due to leaving page. Rejoining queue..."
+		"lost_connection": "Lost connection due to leaving page. Rejoining queue...",
+		"waiting_for_inputs": "Waiting for file(s) to finish uploading, please retry."
 	},
 	"checkbox": {
 		"checkbox": "Checkbox",
@@ -53,8 +55,12 @@
 	},
 	"dataframe": {
 		"incorrect_format": "Incorrect format, only CSV and TSV files are supported",
-		"new_column": "New column",
-		"new_row": "New row"
+		"new_column": "Add column",
+		"new_row": "New row",
+		"add_row_above": "Add row above",
+		"add_row_below": "Add row below",
+		"add_column_left": "Add column to the left",
+		"add_column_right": "Add column to the right"
 	},
 	"dropdown": {
 		"dropdown": "Dropdown"
@@ -112,7 +118,7 @@
 		"drop_file": "Drop File Here",
 		"drop_image": "Drop Image Here",
 		"drop_video": "Drop Video Here",
-		"drop_gallery": "Drop Image(s) Here",
+		"drop_gallery": "Drop Media Here",
 		"paste_clipboard": "Paste from Clipboard"
 	}
 }
diff --git a/js/core/src/lang/zh-CN.json b/js/core/src/lang/zh-CN.json
index 4f1e080370ddb..94bef996d6417 100644
--- a/js/core/src/lang/zh-CN.json
+++ b/js/core/src/lang/zh-CN.json
@@ -16,7 +16,8 @@
 		"record": "录制",
 		"no_microphone": "找不到麦克风",
 		"pause": "暂停",
-		"play": "播放"
+		"play": "播放",
+		"waiting": "等待"
 	},
 	"blocks": {
 		"connection_can_break": "在移动设备上，如果此标签页失去焦点或设备休眠，连接可能会中断，导致您在队列中失去位置。",
diff --git a/js/core/src/stores.ts b/js/core/src/stores.ts
index cb54d930aa80e..197b85a793eb8 100644
--- a/js/core/src/stores.ts
+++ b/js/core/src/stores.ts
@@ -2,7 +2,7 @@ import { type Writable, writable, get } from "svelte/store";
 
 export interface LoadingStatus {
 	eta: number | null;
-	status: "pending" | "error" | "complete" | "generating";
+	status: "pending" | "error" | "complete" | "generating" | "streaming";
 	queue: boolean;
 	queue_position: number | null;
 	queue_size?: number;
@@ -10,6 +10,7 @@ export interface LoadingStatus {
 	message?: string | null;
 	scroll_to_output?: boolean;
 	show_progress?: "full" | "minimal" | "hidden";
+	time_limit?: number | null | undefined;
 	progress?: {
 		progress: number | null;
 		index: number | null;
@@ -48,7 +49,8 @@ export function create_loading_status_store(): LoadingStatusStore {
 		position = null,
 		eta = null,
 		message = null,
-		progress
+		progress,
+		time_limit = null
 	}: {
 		fn_index: LoadingStatus["fn_index"];
 		status: LoadingStatus["status"];
@@ -58,6 +60,7 @@ export function create_loading_status_store(): LoadingStatusStore {
 		eta?: LoadingStatus["eta"];
 		message?: LoadingStatus["message"];
 		progress?: LoadingStatus["progress"];
+		time_limit?: LoadingStatus["time_limit"];
 	}): void {
 		const outputs = fn_outputs[fn_index];
 		const inputs = fn_inputs[fn_index];
diff --git a/js/core/src/types.ts b/js/core/src/types.ts
index 21711fa6b2a10..07827c74ae1a6 100644
--- a/js/core/src/types.ts
+++ b/js/core/src/types.ts
@@ -69,6 +69,11 @@ export interface Dependency {
 	final_event: Payload | null;
 	show_api: boolean;
 	rendered_in: number | null;
+	connection: "stream" | "sse";
+	time_limit: number;
+	stream_every: number;
+	like_user_message: boolean;
+	event_specific_args: string[];
 }
 
 interface TypeDescription {
diff --git a/js/dataframe/CHANGELOG.md b/js/dataframe/CHANGELOG.md
index e7875ae36182b..6124a871bd6c5 100644
--- a/js/dataframe/CHANGELOG.md
+++ b/js/dataframe/CHANGELOG.md
@@ -1,11 +1,103 @@
 # @gradio/dataframe
 
-## 0.10.1
+## 0.11.0-beta.8
+
+### Features
+
+- [#9601](https://github.com/gradio-app/gradio/pull/9601) [`c078892`](https://github.com/gradio-app/gradio/commit/c07889223cb64661b17560b707b977248809470a) - Tweak gr.Dataframe menu UX.  Thanks @hannahblair!
+- [#9575](https://github.com/gradio-app/gradio/pull/9575) [`4ec2feb`](https://github.com/gradio-app/gradio/commit/4ec2feb04e452d2c77482c09543c59948567be67) - Update gr.Dataframe UI with action popover.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.7
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/atoms@0.9.0-beta.5
+- @gradio/button@0.3.0-beta.7
+- @gradio/markdown@0.10.0-beta.5
+
+## 0.11.0-beta.7
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+- @gradio/client@1.6.0-beta.4
+- @gradio/upload@0.13.0-beta.6
+- @gradio/markdown@0.10.0-beta.4
+- @gradio/button@0.3.0-beta.6
+
+## 0.11.0-beta.6
+
+### Features
+
+- [#9496](https://github.com/gradio-app/gradio/pull/9496) [`1647ebd`](https://github.com/gradio-app/gradio/commit/1647ebddc3e2ed6fc143a62629409e32afcc5801) - UI theme fixes.  Thanks @aliabid94!
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.5
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+- @gradio/button@0.3.0-beta.5
+- @gradio/markdown@0.10.0-beta.3
+
+## 0.11.0-beta.5
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/upload@0.13.0-beta.4
+- @gradio/button@0.3.0-beta.4
+- @gradio/markdown@0.10.0-beta.2
+
+## 0.11.0-beta.4
+
+### Features
+
+- [#9469](https://github.com/gradio-app/gradio/pull/9469) [`f7c3396`](https://github.com/gradio-app/gradio/commit/f7c3396f55a5b8364d3880a29d766bd092d7f840) - Fix. Triggered dataframe change event for header change.  Thanks @Joodith!
+
+## 0.11.0-beta.3
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.3
+- @gradio/client@1.6.0-beta.3
+- @gradio/button@0.3.0-beta.3
+
+## 0.11.0-beta.2
+
+### Features
+
+- [#9313](https://github.com/gradio-app/gradio/pull/9313) [`1fef9d9`](https://github.com/gradio-app/gradio/commit/1fef9d9a26f0ebce4de18c486702661f6539b1c6) - Standardize `height` across components and add `max_height` and `min_height` parameters where appropriate.  Thanks @abidlabs!
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/upload@0.13.0-beta.2
+- @gradio/markdown@0.10.0-beta.2
+- @gradio/client@1.6.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+- @gradio/button@0.3.0-beta.2
+
+## 0.10.1-beta.1
 
 ### Features
 
 - [#9187](https://github.com/gradio-app/gradio/pull/9187) [`5bf00b7`](https://github.com/gradio-app/gradio/commit/5bf00b7524ebf399b48719120a49d15bb21bd65c) - make all component SSR compatible.  Thanks @pngwn!
 
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/client@1.6.0-beta.1
+- @gradio/upload@0.12.4-beta.1
+- @gradio/markdown@0.9.4-beta.1
+- @gradio/button@0.3.0-beta.1
+
+## 0.10.1-beta.0
+
 ### Fixes
 
 - [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types.  Thanks @pngwn!
diff --git a/js/dataframe/Dataframe.stories.svelte b/js/dataframe/Dataframe.stories.svelte
index 818a3094dcce5..2746617c8ff6b 100644
--- a/js/dataframe/Dataframe.stories.svelte
+++ b/js/dataframe/Dataframe.stories.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
 	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
 	import Table from "./shared/Table.svelte";
+	import { within } from "@testing-library/dom";
+	import { userEvent } from "@storybook/test";
+	import { get } from "svelte/store";
+	import { format } from "svelte-i18n";
 </script>
 
 <Meta
@@ -17,7 +21,7 @@
 />
 
 <Template let:args>
-	<Table {...args} i18n={(s) => s} />
+	<Table {...args} i18n={get(format)} />
 </Template>
 
 <Story
@@ -161,3 +165,28 @@
 		editable: false
 	}}
 />
+
+<Story
+	name="Dataframe with dialog interactions"
+	args={{
+		values: [
+			[800, 100, 400],
+			[200, 800, 700]
+		],
+		col_count: [3, "dynamic"],
+		row_count: [2, "dynamic"],
+		headers: ["Math", "Reading", "Writing"],
+		editable: true
+	}}
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+
+		const cell = canvas.getByText("200");
+		userEvent.click(cell);
+		const open_dialog_btn = canvas.getAllByText("⋮");
+		await userEvent.click(open_dialog_btn[0]);
+
+		const add_row_btn = canvas.getByText("Add row above");
+		await userEvent.click(add_row_btn);
+	}}
+/>
diff --git a/js/dataframe/Index.svelte b/js/dataframe/Index.svelte
index b2075cf77dc63..3d71cead10437 100644
--- a/js/dataframe/Index.svelte
+++ b/js/dataframe/Index.svelte
@@ -45,7 +45,7 @@
 		right: string;
 		display: boolean;
 	}[];
-	export let height: number | undefined = undefined;
+	export let max_height: number | undefined = undefined;
 
 	export let loading_status: LoadingStatus;
 	export let interactive: boolean;
@@ -149,11 +149,11 @@
 		{datatype}
 		{latex_delimiters}
 		editable={interactive}
-		{height}
+		{max_height}
 		i18n={gradio.i18n}
 		{line_breaks}
 		{column_widths}
-		upload={gradio.client.upload}
-		stream_handler={gradio.client.stream}
+		upload={(...args) => gradio.client.upload(...args)}
+		stream_handler={(...args) => gradio.client.stream(...args)}
 	/>
 </Block>
diff --git a/js/dataframe/package.json b/js/dataframe/package.json
index c0be10e65733b..e348f3082e7b4 100644
--- a/js/dataframe/package.json
+++ b/js/dataframe/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/dataframe",
-	"version": "0.10.1",
+	"version": "0.11.0-beta.8",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/dataframe/shared/Arrow.svelte b/js/dataframe/shared/Arrow.svelte
new file mode 100644
index 0000000000000..52000514b5a61
--- /dev/null
+++ b/js/dataframe/shared/Arrow.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	export let transform: string;
+</script>
+
+<svg viewBox="0 0 24 24" width="16" height="16">
+	<path
+		d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
+		{transform}
+	/>
+</svg>
diff --git a/js/dataframe/shared/CellMenu.svelte b/js/dataframe/shared/CellMenu.svelte
new file mode 100644
index 0000000000000..9ba1aaa3093fb
--- /dev/null
+++ b/js/dataframe/shared/CellMenu.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import Arrow from "./Arrow.svelte";
+	import type { I18nFormatter } from "js/utils/src";
+
+	export let x: number;
+	export let y: number;
+	export let on_add_row_above: () => void;
+	export let on_add_row_below: () => void;
+	export let on_add_column_left: () => void;
+	export let on_add_column_right: () => void;
+	export let row: number;
+
+	export let i18n: I18nFormatter;
+	let menu_element: HTMLDivElement;
+
+	$: is_header = row === -1;
+
+	onMount(() => {
+		position_menu();
+	});
+
+	function position_menu(): void {
+		if (!menu_element) return;
+
+		const viewport_width = window.innerWidth;
+		const viewport_height = window.innerHeight;
+		const menu_rect = menu_element.getBoundingClientRect();
+
+		let new_x = x - 30;
+		let new_y = y - 20;
+
+		if (new_x + menu_rect.width > viewport_width) {
+			new_x = x - menu_rect.width + 10;
+		}
+
+		if (new_y + menu_rect.height > viewport_height) {
+			new_y = y - menu_rect.height + 10;
+		}
+
+		menu_element.style.left = `${new_x}px`;
+		menu_element.style.top = `${new_y}px`;
+	}
+</script>
+
+<div bind:this={menu_element} class="cell-menu">
+	{#if !is_header}
+		<button on:click={() => on_add_row_above()}>
+			<Arrow transform="rotate(-90 12 12)" />
+			{i18n("dataframe.add_row_above")}
+		</button>
+		<button on:click={() => on_add_row_below()}>
+			<Arrow transform="rotate(90 12 12)" />
+			{i18n("dataframe.add_row_below")}
+		</button>
+	{/if}
+	<button on:click={() => on_add_column_left()}>
+		<Arrow transform="rotate(180 12 12)" />
+		{i18n("dataframe.add_column_left")}
+	</button>
+	<button on:click={() => on_add_column_right()}>
+		<Arrow transform="rotate(0 12 12)" />
+		{i18n("dataframe.add_column_right")}
+	</button>
+</div>
+
+<style>
+	.cell-menu {
+		position: fixed;
+		z-index: var(--layer-2);
+		background: var(--background-fill-primary);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-sm);
+		padding: var(--size-1);
+		display: flex;
+		flex-direction: column;
+		gap: var(--size-1);
+		box-shadow: var(--shadow-drop-lg);
+		min-width: 150px;
+	}
+
+	.cell-menu button {
+		background: none;
+		border: none;
+		cursor: pointer;
+		text-align: left;
+		padding: var(--size-1) var(--size-2);
+		border-radius: var(--radius-sm);
+		color: var(--body-text-color);
+		font-size: var(--text-sm);
+		transition:
+			background-color 0.2s,
+			color 0.2s;
+		display: flex;
+		align-items: center;
+		gap: var(--size-2);
+	}
+
+	.cell-menu button:hover {
+		background-color: var(--background-fill-secondary);
+	}
+
+	.cell-menu button :global(svg) {
+		fill: currentColor;
+		transition: fill 0.2s;
+	}
+
+	.cell-menu button:hover :global(svg) {
+		fill: var(--color-accent);
+	}
+</style>
diff --git a/js/dataframe/shared/Table.svelte b/js/dataframe/shared/Table.svelte
index 58e25e6fab115..72306a469854b 100644
--- a/js/dataframe/shared/Table.svelte
+++ b/js/dataframe/shared/Table.svelte
@@ -4,19 +4,14 @@
 	import { dequal } from "dequal/lite";
 	import { copy } from "@gradio/utils";
 	import { Upload } from "@gradio/upload";
-	import { BaseButton } from "@gradio/button";
+
 	import EditableCell from "./EditableCell.svelte";
 	import type { SelectData } from "@gradio/utils";
 	import type { I18nFormatter } from "js/core/src/gradio_helper";
 	import { type Client } from "@gradio/client";
 	import VirtualTable from "./VirtualTable.svelte";
-	import type {
-		Headers,
-		HeadersWithIDs,
-		Data,
-		Metadata,
-		Datatype
-	} from "./utils";
+	import type { Headers, HeadersWithIDs, Metadata, Datatype } from "./utils";
+	import CellMenu from "./CellMenu.svelte";
 
 	export let datatype: Datatype | Datatype[];
 	export let label: string | null = null;
@@ -36,7 +31,7 @@
 	export let root: string;
 	export let i18n: I18nFormatter;
 
-	export let height = 500;
+	export let max_height = 500;
 	export let line_breaks = true;
 	export let column_widths: string[] = [];
 	export let upload: Client["upload"];
@@ -64,7 +59,7 @@
 	$: {
 		if (selected !== false) {
 			const [row, col] = selected;
-			if (!isNaN(row) && !isNaN(col)) {
+			if (!isNaN(row) && !isNaN(col) && data[row]) {
 				dispatch("select", {
 					index: [row, col],
 					value: get_data_at(row, col),
@@ -346,7 +341,14 @@
 		}
 	}
 
+	let active_cell: { row: number; col: number } | null = null;
+
 	async function handle_cell_click(i: number, j: number): Promise<void> {
+		if (active_cell && active_cell.row === i && active_cell.col === j) {
+			active_cell = null;
+		} else {
+			active_cell = { row: i, col: j };
+		}
 		if (dequal(editing, [i, j])) return;
 		header_edit = false;
 		selected_header = false;
@@ -410,35 +412,39 @@
 			return;
 		}
 
-		data.splice(
-			index ? index + 1 : data.length,
-			0,
-			Array(data[0].length)
-				.fill(0)
-				.map((_, i) => {
-					const _id = make_id();
+		const new_row = Array(data[0].length)
+			.fill(0)
+			.map((_, i) => {
+				const _id = make_id();
+				els[_id] = { cell: null, input: null };
+				return { id: _id, value: "" };
+			});
 
-					els[_id] = { cell: null, input: null };
-					return { id: _id, value: "" };
-				})
-		);
+		if (index !== undefined && index >= 0 && index <= data.length) {
+			data.splice(index, 0, new_row);
+		} else {
+			data.push(new_row);
+		}
 
 		data = data;
-		selected = [index ? index + 1 : data.length - 1, 0];
+		selected = [index !== undefined ? index : data.length - 1, 0];
 	}
 
-	$: data && trigger_change();
+	$: (data || selected_header) && trigger_change();
 
-	async function add_col(): Promise<void> {
+	async function add_col(index?: number): Promise<void> {
 		parent.focus();
 		if (col_count[1] !== "dynamic") return;
+
+		const insert_index = index !== undefined ? index : data[0].length;
+
 		for (let i = 0; i < data.length; i++) {
 			const _id = make_id();
 			els[_id] = { cell: null, input: null };
-			data[i].push({ id: _id, value: "" });
+			data[i].splice(insert_index, 0, { id: _id, value: "" });
 		}
 
-		headers.push(`Header ${headers.length + 1}`);
+		headers.splice(insert_index, 0, `Header ${headers.length + 1}`);
 
 		data = data;
 		headers = headers;
@@ -446,13 +452,23 @@
 		await tick();
 
 		requestAnimationFrame(() => {
-			edit_header(headers.length - 1, true);
+			edit_header(insert_index, true);
 			const new_w = parent.querySelectorAll("tbody")[1].offsetWidth;
 			parent.querySelectorAll("table")[1].scrollTo({ left: new_w });
 		});
 	}
 
 	function handle_click_outside(event: Event): void {
+		if (
+			(active_cell_menu &&
+				!(event.target as HTMLElement).closest(".cell-menu")) ||
+			(active_header_menu &&
+				!(event.target as HTMLElement).closest(".cell-menu"))
+		) {
+			active_cell_menu = null;
+			active_header_menu = null;
+		}
+
 		event.stopImmediatePropagation();
 		const [trigger] = event.composedPath() as HTMLElement[];
 		if (parent.contains(trigger)) {
@@ -463,6 +479,9 @@
 		header_edit = false;
 		selected_header = false;
 		selected = false;
+		active_cell = null;
+		active_cell_menu = null;
+		active_header_menu = null;
 	}
 
 	function guess_delimitaor(
@@ -564,7 +583,7 @@
 	}
 
 	let table_height: number =
-		values.slice(0, (height / values.length) * 37).length * 37 + 37;
+		values.slice(0, (max_height / values.length) * 37).length * 37 + 37;
 	let scrollbar_width = 0;
 
 	function sort_data(
@@ -640,6 +659,107 @@
 			observer.disconnect();
 		};
 	});
+
+	let highlighted_column: number | null = null;
+
+	let active_cell_menu: {
+		row: number;
+		col: number;
+		x: number;
+		y: number;
+	} | null = null;
+
+	function toggle_cell_menu(event: MouseEvent, row: number, col: number): void {
+		event.stopPropagation();
+		if (
+			active_cell_menu &&
+			active_cell_menu.row === row &&
+			active_cell_menu.col === col
+		) {
+			active_cell_menu = null;
+		} else {
+			const cell = (event.target as HTMLElement).closest("td");
+			if (cell) {
+				const rect = cell.getBoundingClientRect();
+				active_cell_menu = {
+					row,
+					col,
+					x: rect.right,
+					y: rect.bottom
+				};
+			}
+		}
+	}
+
+	function add_row_at(index: number, position: "above" | "below"): void {
+		const row_index = position === "above" ? index : index + 1;
+		add_row(row_index);
+		active_cell_menu = null;
+		active_header_menu = null;
+	}
+
+	function add_col_at(index: number, position: "left" | "right"): void {
+		const col_index = position === "left" ? index : index + 1;
+		add_col(col_index);
+		active_cell_menu = null;
+		active_header_menu = null;
+	}
+
+	onMount(() => {
+		document.addEventListener("click", handle_click_outside);
+		return () => {
+			document.removeEventListener("click", handle_click_outside);
+		};
+	});
+
+	let active_button: {
+		type: "header" | "cell";
+		row?: number;
+		col: number;
+	} | null = null;
+
+	function toggle_header_button(col: number): void {
+		if (active_button?.type === "header" && active_button.col === col) {
+			active_button = null;
+		} else {
+			active_button = { type: "header", col };
+		}
+	}
+
+	function toggle_cell_button(row: number, col: number): void {
+		if (
+			active_button?.type === "cell" &&
+			active_button.row === row &&
+			active_button.col === col
+		) {
+			active_button = null;
+		} else {
+			active_button = { type: "cell", row, col };
+		}
+	}
+
+	let active_header_menu: {
+		col: number;
+		x: number;
+		y: number;
+	} | null = null;
+
+	function toggle_header_menu(event: MouseEvent, col: number): void {
+		event.stopPropagation();
+		if (active_header_menu && active_header_menu.col === col) {
+			active_header_menu = null;
+		} else {
+			const header = (event.target as HTMLElement).closest("th");
+			if (header) {
+				const rect = header.getBoundingClientRect();
+				active_header_menu = {
+					col,
+					x: rect.right,
+					y: rect.bottom
+				};
+			}
+		}
+	}
 </script>
 
 <svelte:window
@@ -744,7 +864,7 @@
 		>
 			<VirtualTable
 				bind:items={data}
-				max_height={height}
+				{max_height}
 				bind:actual_height={table_height}
 				bind:table_scrollbar_width={scrollbar_width}
 				selected={selected_index}
@@ -758,40 +878,58 @@
 							class:focus={header_edit === i || selected_header === i}
 							aria-sort={get_sort_status(value, sort_by, sort_direction)}
 							style="width: var(--cell-width-{i});"
+							on:click={() => {
+								toggle_header_button(i);
+							}}
 						>
 							<div class="cell-wrap">
-								<EditableCell
-									bind:value={_headers[i].value}
-									bind:el={els[id].input}
-									{latex_delimiters}
-									{line_breaks}
-									edit={header_edit === i}
-									on:keydown={end_header_edit}
-									on:dblclick={() => edit_header(i)}
-									{select_on_focus}
-									header
-									{root}
-								/>
-
-								<!-- TODO: fix -->
-								<!-- svelte-ignore a11y-click-events-have-key-events -->
-								<!-- svelte-ignore a11y-no-static-element-interactions-->
-								<div
-									class:sorted={sort_by === i}
-									class:des={sort_by === i && sort_direction === "des"}
-									class="sort-button {sort_direction} "
-									on:click={() => handle_sort(i)}
-								>
-									<svg
-										width="1em"
-										height="1em"
-										viewBox="0 0 9 7"
-										fill="none"
-										xmlns="http://www.w3.org/2000/svg"
+								<div class="header-content">
+									<EditableCell
+										bind:value={_headers[i].value}
+										bind:el={els[id].input}
+										{latex_delimiters}
+										{line_breaks}
+										edit={header_edit === i}
+										on:keydown={end_header_edit}
+										on:dblclick={() => edit_header(i)}
+										{select_on_focus}
+										header
+										{root}
+									/>
+									<!-- TODO: fix -->
+									<!-- svelte-ignore a11y-click-events-have-key-events -->
+									<!-- svelte-ignore a11y-no-static-element-interactions-->
+									<div
+										class:sorted={sort_by === i}
+										class:des={sort_by === i && sort_direction === "des"}
+										class="sort-button {sort_direction}"
+										on:click={(event) => {
+											event.stopPropagation();
+											handle_sort(i);
+										}}
 									>
-										<path d="M4.49999 0L8.3971 6.75H0.602875L4.49999 0Z" />
-									</svg>
+										<svg
+											width="1em"
+											height="1em"
+											viewBox="0 0 9 7"
+											fill="none"
+											xmlns="http://www.w3.org/2000/svg"
+										>
+											<path d="M4.49999 0L8.3971 6.75H0.602875L4.49999 0Z" />
+										</svg>
+									</div>
 								</div>
+
+								{#if editable}
+									<button
+										class="cell-menu-button"
+										class:visible={active_button?.type === "header" &&
+											active_button.col === i}
+										on:click={(event) => toggle_header_menu(event, i)}
+									>
+										⋮
+									</button>
+								{/if}
 							</div>
 						</th>
 					{/each}
@@ -802,11 +940,17 @@
 						<td
 							tabindex="0"
 							on:touchstart={() => start_edit(index, j)}
-							on:click={() => handle_cell_click(index, j)}
+							on:click={() => {
+								handle_cell_click(index, j);
+								toggle_cell_button(index, j);
+							}}
 							on:dblclick={() => start_edit(index, j)}
 							style:width="var(--cell-width-{j})"
 							style={styling?.[index]?.[j] || ""}
 							class:focus={dequal(selected, [index, j])}
+							class:menu-active={active_cell_menu &&
+								active_cell_menu.row === index &&
+								active_cell_menu.col === j}
 						>
 							<div class="cell-wrap">
 								<EditableCell
@@ -822,6 +966,17 @@
 									{clear_on_focus}
 									{root}
 								/>
+								{#if editable}
+									<button
+										class="cell-menu-button"
+										class:visible={active_button?.type === "cell" &&
+											active_button.row === index &&
+											active_button.col === j}
+										on:click={(event) => toggle_cell_menu(event, index, j)}
+									>
+										⋮
+									</button>
+								{/if}
 							</div>
 						</td>
 					{/each}
@@ -829,64 +984,35 @@
 			</VirtualTable>
 		</Upload>
 	</div>
-	{#if editable}
-		<div class="controls-wrap">
-			{#if row_count[1] === "dynamic"}
-				<span class="button-wrap">
-					<BaseButton
-						variant="secondary"
-						size="sm"
-						on:click={(e) => (e.stopPropagation(), add_row())}
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							xmlns:xlink="http://www.w3.org/1999/xlink"
-							aria-hidden="true"
-							role="img"
-							width="1em"
-							height="1em"
-							preserveAspectRatio="xMidYMid meet"
-							viewBox="0 0 32 32"
-						>
-							<path
-								fill="currentColor"
-								d="M24.59 16.59L17 24.17V4h-2v20.17l-7.59-7.58L6 18l10 10l10-10l-1.41-1.41z"
-							/>
-						</svg>
-						{i18n("dataframe.new_row")}
-					</BaseButton>
-				</span>
-			{/if}
-			{#if col_count[1] === "dynamic"}
-				<span class="button-wrap">
-					<BaseButton
-						variant="secondary"
-						size="sm"
-						on:click={(e) => (e.stopPropagation(), add_col())}
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							xmlns:xlink="http://www.w3.org/1999/xlink"
-							aria-hidden="true"
-							role="img"
-							width="1em"
-							height="1em"
-							preserveAspectRatio="xMidYMid meet"
-							viewBox="0 0 32 32"
-						>
-							<path
-								fill="currentColor"
-								d="m18 6l-1.43 1.393L24.15 15H4v2h20.15l-7.58 7.573L18 26l10-10L18 6z"
-							/>
-						</svg>
-						{i18n("dataframe.new_column")}
-					</BaseButton>
-				</span>
-			{/if}
-		</div>
-	{/if}
 </div>
 
+{#if active_cell_menu !== null}
+	<CellMenu
+		{i18n}
+		x={active_cell_menu.x}
+		y={active_cell_menu.y}
+		col={active_cell_menu.col}
+		row={active_cell_menu?.row ?? -1}
+		on_add_row_above={() => add_row_at(active_cell_menu?.row ?? -1, "above")}
+		on_add_row_below={() => add_row_at(active_cell_menu?.row ?? -1, "below")}
+		on_add_column_left={() => add_col_at(active_cell_menu?.col ?? -1, "left")}
+		on_add_column_right={() => add_col_at(active_cell_menu?.col ?? -1, "right")}
+	/>
+{/if}
+
+{#if active_header_menu !== null}
+	<CellMenu
+		{i18n}
+		x={active_header_menu.x}
+		y={active_header_menu.y}
+		col={active_header_menu.col}
+		row={-1}
+		on_add_column_left={() => add_col_at(active_header_menu?.col ?? -1, "left")}
+		on_add_column_right={() =>
+			add_col_at(active_header_menu?.col ?? -1, "right")}
+	/>
+{/if}
+
 <style>
 	.button-wrap:hover svg {
 		color: var(--color-accent);
@@ -956,7 +1082,6 @@
 		top: 0;
 		left: 0;
 		z-index: var(--layer-1);
-		box-shadow: var(--shadow-drop);
 	}
 
 	tr {
@@ -976,7 +1101,6 @@
 		--ring-color: transparent;
 		position: relative;
 		outline: none;
-		box-shadow: inset 0 0 0 1px var(--ring-color);
 		padding: 0;
 	}
 
@@ -989,8 +1113,9 @@
 	}
 
 	th.focus,
-	td.focus {
-		--ring-color: var(--color-accent);
+	td.focus,
+	td.menu-active {
+		z-index: 1;
 	}
 
 	tr:last-child td:first-child {
@@ -1039,21 +1164,22 @@
 	}
 
 	.cell-wrap {
+		position: relative;
 		display: flex;
 		align-items: center;
+		justify-content: space-between;
 		outline: none;
 		height: var(--size-full);
 		min-height: var(--size-9);
+		overflow: hidden;
 	}
 
-	.controls-wrap {
+	.header-content {
 		display: flex;
-		justify-content: flex-end;
-		padding-top: var(--size-2);
-	}
-
-	.controls-wrap > * + * {
-		margin-left: var(--size-1);
+		align-items: center;
+		overflow: hidden;
+		flex-grow: 1;
+		min-width: 0;
 	}
 
 	.row_odd {
@@ -1067,4 +1193,45 @@
 	table {
 		border-collapse: separate;
 	}
+
+	.select-column {
+		width: var(--size-3);
+		text-align: center;
+		padding: var(--size-1);
+		border-right: none;
+	}
+
+	.cell-menu-button {
+		flex-shrink: 0;
+		display: none;
+		background-color: var(--block-background-fill);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--block-radius);
+		width: var(--size-5);
+		height: var(--size-5);
+		min-width: var(--size-5);
+		padding: 0;
+		margin-right: var(--spacing-sm);
+		z-index: var(--layer-2);
+	}
+
+	.cell-menu-button:hover {
+		background-color: var(--color-bg-hover);
+	}
+
+	.cell-menu-button.visible {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	th .cell-wrap {
+		padding-right: var(--spacing-sm);
+	}
+
+	th .header-content {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
 </style>
diff --git a/js/dataframe/shared/VirtualTable.svelte b/js/dataframe/shared/VirtualTable.svelte
index 1aebc44f76650..ecc47252ef2bb 100644
--- a/js/dataframe/shared/VirtualTable.svelte
+++ b/js/dataframe/shared/VirtualTable.svelte
@@ -341,7 +341,6 @@
 		top: 0;
 		left: 0;
 		z-index: var(--layer-1);
-		box-shadow: var(--shadow-drop);
 		overflow: hidden;
 	}
 </style>
diff --git a/js/dataset/CHANGELOG.md b/js/dataset/CHANGELOG.md
index b632c49c27791..cc449a6b1e162 100644
--- a/js/dataset/CHANGELOG.md
+++ b/js/dataset/CHANGELOG.md
@@ -1,11 +1,70 @@
 # @gradio/dataset
 
-## 0.2.5
+## 0.2.5-beta.7
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.7
+- @gradio/atoms@0.9.0-beta.5
+- @gradio/textbox@0.7.0-beta.5
+
+## 0.2.5-beta.6
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.4
+- @gradio/client@1.6.0-beta.4
+- @gradio/upload@0.13.0-beta.6
+- @gradio/textbox@0.7.0-beta.4
+
+## 0.2.5-beta.5
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.5
+- @gradio/atoms@0.9.0-beta.3
+- @gradio/textbox@0.7.0-beta.3
+
+## 0.2.5-beta.4
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.4
+- @gradio/textbox@0.7.0-beta.2
+
+## 0.2.5-beta.3
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.3
+- @gradio/client@1.6.0-beta.3
+
+## 0.2.5-beta.2
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/upload@0.13.0-beta.2
+- @gradio/client@1.6.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+- @gradio/textbox@0.7.0-beta.2
+
+## 0.2.5-beta.1
 
 ### Features
 
 - [#9187](https://github.com/gradio-app/gradio/pull/9187) [`5bf00b7`](https://github.com/gradio-app/gradio/commit/5bf00b7524ebf399b48719120a49d15bb21bd65c) - make all component SSR compatible.  Thanks @pngwn!
 
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/client@1.6.0-beta.1
+- @gradio/upload@0.12.4-beta.1
+- @gradio/textbox@0.7.0-beta.1
+
+## 0.2.5-beta.0
+
 ### Fixes
 
 - [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types.  Thanks @pngwn!
diff --git a/js/dataset/package.json b/js/dataset/package.json
index a7433162d9de4..1f3aef53e0c17 100644
--- a/js/dataset/package.json
+++ b/js/dataset/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/dataset",
-	"version": "0.2.5",
+	"version": "0.2.5-beta.7",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/datetime/CHANGELOG.md b/js/datetime/CHANGELOG.md
index 2d2150c407ccf..be7a36b1ad9d3 100644
--- a/js/datetime/CHANGELOG.md
+++ b/js/datetime/CHANGELOG.md
@@ -1,5 +1,60 @@
 # @gradio/datetime
 
+## 0.2.0-beta.5
+
+### Features
+
+- [#9437](https://github.com/gradio-app/gradio/pull/9437) [`c3d93be`](https://github.com/gradio-app/gradio/commit/c3d93bef94b9401747a363f7bad88a1d347d535b) - Adding new themes to Gradio 5.0.  Thanks @allisonwhilden!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.2.0-beta.4
+
+### Features
+
+- [#9521](https://github.com/gradio-app/gradio/pull/9521) [`06ef22e`](https://github.com/gradio-app/gradio/commit/06ef22e83cdd27e7afb381396d153d9db3dea16e) - Allow `info=` to render markdown.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+
+## 0.1.4-beta.3
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.1.4-beta.2
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+
+## 0.1.4-beta.2
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.1.4-beta.1
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+
 ## 0.1.4
 
 ### Fixes
diff --git a/js/datetime/Index.svelte b/js/datetime/Index.svelte
index a5f401219fb6d..65adfe6b03785 100644
--- a/js/datetime/Index.svelte
+++ b/js/datetime/Index.svelte
@@ -21,6 +21,7 @@
 	let old_value = value;
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
+	export let root: string;
 
 	export let include_time = true;
 	$: if (value !== old_value) {
@@ -84,7 +85,7 @@
 	padding={true}
 >
 	<div class="label-content">
-		<BlockTitle {show_label} {info}>{label}</BlockTitle>
+		<BlockTitle {root} {show_label} {info}>{label}</BlockTitle>
 	</div>
 	<div class="timebox">
 		<input
@@ -186,7 +187,7 @@
 		justify-content: center;
 		align-items: center;
 		transition: var(--button-transition);
-		box-shadow: var(--button-shadow);
+		box-shadow: var(--button-primary-shadow);
 		text-align: center;
 		background: var(--button-secondary-background-fill);
 		color: var(--button-secondary-text-color);
@@ -199,9 +200,10 @@
 	}
 	.calendar:hover {
 		background: var(--button-secondary-background-fill-hover);
+		box-shadow: var(--button-primary-shadow-hover);
 	}
 	.calendar:active {
-		box-shadow: var(--button-shadow-active);
+		box-shadow: var(--button-primary-shadow-active);
 	}
 	.datetime {
 		width: 0px;
diff --git a/js/datetime/package.json b/js/datetime/package.json
index 26b6d2ebcbcaf..da682e7981433 100644
--- a/js/datetime/package.json
+++ b/js/datetime/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/datetime",
-	"version": "0.1.4",
+	"version": "0.2.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/downloadbutton/CHANGELOG.md b/js/downloadbutton/CHANGELOG.md
index e35f7c3f27421..63150d59de5a4 100644
--- a/js/downloadbutton/CHANGELOG.md
+++ b/js/downloadbutton/CHANGELOG.md
@@ -1,5 +1,53 @@
 # @gradio/downloadbutton
 
+## 0.1.28-beta.7
+
+### Dependency updates
+
+- @gradio/button@0.3.0-beta.7
+
+## 0.1.28-beta.6
+
+### Dependency updates
+
+- @gradio/client@1.6.0-beta.4
+- @gradio/button@0.3.0-beta.6
+
+## 0.1.28-beta.5
+
+### Dependency updates
+
+- @gradio/button@0.3.0-beta.5
+
+## 0.1.28-beta.4
+
+### Dependency updates
+
+- @gradio/button@0.3.0-beta.4
+
+## 0.1.28-beta.3
+
+### Dependency updates
+
+- @gradio/client@1.6.0-beta.3
+- @gradio/button@0.3.0-beta.3
+
+## 0.1.28-beta.2
+
+### Dependency updates
+
+- @gradio/client@1.6.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+- @gradio/button@0.3.0-beta.2
+
+## 0.1.28-beta.1
+
+### Dependency updates
+
+- @gradio/utils@0.7.0-beta.1
+- @gradio/client@1.6.0-beta.1
+- @gradio/button@0.3.0-beta.1
+
 ## 0.1.28
 
 ### Fixes
diff --git a/js/downloadbutton/package.json b/js/downloadbutton/package.json
index 0720b9e40c158..e9ed5291508e5 100644
--- a/js/downloadbutton/package.json
+++ b/js/downloadbutton/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/downloadbutton",
-	"version": "0.1.28",
+	"version": "0.1.28-beta.7",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/dropdown/CHANGELOG.md b/js/dropdown/CHANGELOG.md
index 129e4bdb3c6a8..5c32ac43e4acd 100644
--- a/js/dropdown/CHANGELOG.md
+++ b/js/dropdown/CHANGELOG.md
@@ -1,11 +1,76 @@
 # @gradio/dropdown
 
-## 0.7.13
+## 0.8.0-beta.6
+
+### Features
+
+- [#9437](https://github.com/gradio-app/gradio/pull/9437) [`c3d93be`](https://github.com/gradio-app/gradio/commit/c3d93bef94b9401747a363f7bad88a1d347d535b) - Adding new themes to Gradio 5.0.  Thanks @allisonwhilden!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.8.0-beta.5
+
+### Features
+
+- [#9521](https://github.com/gradio-app/gradio/pull/9521) [`06ef22e`](https://github.com/gradio-app/gradio/commit/06ef22e83cdd27e7afb381396d153d9db3dea16e) - Allow `info=` to render markdown.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+
+## 0.8.0-beta.4
+
+### Features
+
+- [#9526](https://github.com/gradio-app/gradio/pull/9526) [`f60bb68`](https://github.com/gradio-app/gradio/commit/f60bb68f52cd0863d9087b3fbc56635e297adef1) - Fix single select dropdown.  Thanks @whitphx!
+
+## 0.8.0-beta.3
+
+### Features
+
+- [#9519](https://github.com/gradio-app/gradio/pull/9519) [`0ab6ac5`](https://github.com/gradio-app/gradio/commit/0ab6ac5dc01b69e4f2462d00c4910f3354441227) - Fix change triggers for dropdown and radio.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.7.13-beta.2
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+
+## 0.7.13-beta.2
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.7.13-beta.1
 
 ### Features
 
 - [#9187](https://github.com/gradio-app/gradio/pull/9187) [`5bf00b7`](https://github.com/gradio-app/gradio/commit/5bf00b7524ebf399b48719120a49d15bb21bd65c) - make all component SSR compatible.  Thanks @pngwn!
 
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+
+## 0.7.13-beta.0
+
 ### Fixes
 
 - [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types.  Thanks @pngwn!
diff --git a/js/dropdown/Index.svelte b/js/dropdown/Index.svelte
index 88fdf66708c4d..76708b053d804 100644
--- a/js/dropdown/Index.svelte
+++ b/js/dropdown/Index.svelte
@@ -12,16 +12,18 @@
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
 
+	type Item = string | number;
+
 	export let label = "Dropdown";
 	export let info: string | undefined = undefined;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
-	export let value: string | string[] | undefined = undefined;
-	export let value_is_output = false;
 	export let multiselect = false;
+	export let value: Item | Item[] | undefined = multiselect ? [] : undefined;
+	export let value_is_output = false;
 	export let max_choices: number | null = null;
-	export let choices: [string, string | number][];
+	export let choices: [string, Item][];
 	export let show_label: boolean;
 	export let filterable: boolean;
 	export let container = true;
@@ -29,6 +31,7 @@
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
 	export let allow_custom_value = false;
+	export let root: string;
 	export let gradio: Gradio<{
 		change: never;
 		input: never;
@@ -63,6 +66,7 @@
 			bind:value_is_output
 			{choices}
 			{max_choices}
+			{root}
 			{label}
 			{info}
 			{show_label}
@@ -84,6 +88,7 @@
 			bind:value_is_output
 			{choices}
 			{label}
+			{root}
 			{info}
 			{show_label}
 			{filterable}
diff --git a/js/dropdown/dropdown.test.ts b/js/dropdown/dropdown.test.ts
index 5f68733a326ca..afd308016a95b 100644
--- a/js/dropdown/dropdown.test.ts
+++ b/js/dropdown/dropdown.test.ts
@@ -472,7 +472,7 @@ describe("Dropdown", () => {
 		await expect(item.value).toBe("apple_choice");
 	});
 
-	test("ensure dropdown can have an empty value", async () => {
+	test("ensure dropdown can have the first item of the choices as a default value", async () => {
 		const { getByLabelText } = await render(Dropdown, {
 			show_label: true,
 			loading_status,
@@ -488,7 +488,7 @@ describe("Dropdown", () => {
 		const item: HTMLInputElement = getByLabelText(
 			"Dropdown"
 		) as HTMLInputElement;
-		await expect(item.value).toBe("");
+		await expect(item.value).toBe("apple_choice");
 	});
 
 	test("ensure dropdown works when initial value is undefined and allow custom value is set", async () => {
@@ -508,6 +508,6 @@ describe("Dropdown", () => {
 		const item: HTMLInputElement = getByLabelText(
 			"Dropdown"
 		) as HTMLInputElement;
-		await expect(item.value).toBe("");
+		await expect(item.value).toBe("apple_choice");
 	});
 });
diff --git a/js/dropdown/package.json b/js/dropdown/package.json
index fbfe925fd754b..14e93b5468b5f 100644
--- a/js/dropdown/package.json
+++ b/js/dropdown/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/dropdown",
-	"version": "0.7.13",
+	"version": "0.8.0-beta.6",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/dropdown/shared/Dropdown.svelte b/js/dropdown/shared/Dropdown.svelte
index 5acb8948a853c..e64d72252f4a4 100644
--- a/js/dropdown/shared/Dropdown.svelte
+++ b/js/dropdown/shared/Dropdown.svelte
@@ -6,18 +6,21 @@
 	import type { SelectData, KeyUpData } from "@gradio/utils";
 	import { handle_filter, handle_change, handle_shared_keys } from "./utils";
 
+	type Item = string | number;
+
 	export let label: string;
 	export let info: string | undefined = undefined;
-	export let value: string | number | (string | number)[] | undefined = [];
-	let old_value: string | number | (string | number)[] | undefined = [];
+	export let value: Item | Item[] | undefined = undefined;
+	let old_value: typeof value = undefined;
 	export let value_is_output = false;
-	export let choices: [string, string | number][];
-	let old_choices: [string, string | number][];
+	export let choices: [string, Item][];
+	let old_choices: typeof choices;
 	export let disabled = false;
 	export let show_label: boolean;
 	export let container = true;
 	export let allow_custom_value = false;
 	export let filterable = true;
+	export let root: string;
 
 	let filter_input: HTMLElement;
 
@@ -80,12 +83,10 @@
 		}
 	}
 
-	$: {
-		if (value != old_value) {
-			set_input_text();
-			handle_change(dispatch, value, value_is_output);
-			old_value = value;
-		}
+	$: if (JSON.stringify(old_value) !== JSON.stringify(value)) {
+		set_input_text();
+		handle_change(dispatch, value, value_is_output);
+		old_value = value;
 	}
 
 	function set_choice_names_values(): void {
@@ -204,7 +205,7 @@
 </script>
 
 <div class:container>
-	<BlockTitle {show_label} {info}>{label}</BlockTitle>
+	<BlockTitle {root} {show_label} {info}>{label}</BlockTitle>
 
 	<div class="wrap">
 		<div class="wrap-inner" class:show_options>
@@ -277,6 +278,7 @@
 	.wrap:focus-within {
 		box-shadow: var(--input-shadow-focus);
 		border-color: var(--input-border-color-focus);
+		background: var(--input-background-fill-focus);
 	}
 
 	.wrap-inner {
diff --git a/js/dropdown/shared/Multiselect.svelte b/js/dropdown/shared/Multiselect.svelte
index 7c3213ac43ffe..d94532b5f31e0 100644
--- a/js/dropdown/shared/Multiselect.svelte
+++ b/js/dropdown/shared/Multiselect.svelte
@@ -1,26 +1,29 @@
 <script lang="ts">
 	import { afterUpdate, createEventDispatcher } from "svelte";
-	import { _, number } from "svelte-i18n";
+	import { _ } from "svelte-i18n";
 	import { BlockTitle } from "@gradio/atoms";
 	import { Remove, DropdownArrow } from "@gradio/icons";
 	import type { KeyUpData, SelectData, I18nFormatter } from "@gradio/utils";
 	import DropdownOptions from "./DropdownOptions.svelte";
 	import { handle_filter, handle_change, handle_shared_keys } from "./utils";
 
+	type Item = string | number;
+
 	export let label: string;
 	export let info: string | undefined = undefined;
-	export let value: string | number | (string | number)[] | undefined = [];
-	let old_value: string | number | (string | number)[] | undefined = [];
+	export let value: Item | Item[] | undefined = [];
+	let old_value: typeof value = [];
 	export let value_is_output = false;
 	export let max_choices: number | null = null;
-	export let choices: [string, string | number][];
-	let old_choices: [string, string | number][];
+	export let choices: [string, Item][];
+	let old_choices: typeof choices;
 	export let disabled = false;
 	export let show_label: boolean;
 	export let container = true;
 	export let allow_custom_value = false;
 	export let filterable = true;
 	export let i18n: I18nFormatter;
+	export let root: string;
 
 	let filter_input: HTMLElement;
 	let input_text = "";
@@ -218,7 +221,7 @@
 </script>
 
 <label class:container>
-	<BlockTitle {show_label} {info}>{label}</BlockTitle>
+	<BlockTitle {root} {show_label} {info}>{label}</BlockTitle>
 
 	<div class="wrap">
 		<div class="wrap-inner" class:show_options>
diff --git a/js/fallback/CHANGELOG.md b/js/fallback/CHANGELOG.md
index a0042b8b80bc4..95432c832fe86 100644
--- a/js/fallback/CHANGELOG.md
+++ b/js/fallback/CHANGELOG.md
@@ -1,5 +1,48 @@
 # @gradio/fallback
 
+## 0.3.13-beta.5
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.3.13-beta.4
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+
+## 0.3.13-beta.3
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.3.13-beta.2
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+
+## 0.3.13-beta.2
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.3.13-beta.1
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+
 ## 0.3.13
 
 ### Fixes
diff --git a/js/fallback/package.json b/js/fallback/package.json
index 2b9cd5e098e10..0c5ea0c508f92 100644
--- a/js/fallback/package.json
+++ b/js/fallback/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/fallback",
-	"version": "0.3.13",
+	"version": "0.3.13-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/file/CHANGELOG.md b/js/file/CHANGELOG.md
index 4de377419d2d3..bdfde37225d67 100644
--- a/js/file/CHANGELOG.md
+++ b/js/file/CHANGELOG.md
@@ -1,24 +1,96 @@
 # @gradio/file
 
-## 0.9.4
+## 0.10.0-beta.7
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.7
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.10.0-beta.6
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+- @gradio/client@1.6.0-beta.4
+- @gradio/upload@0.13.0-beta.6
+
+## 0.10.0-beta.5
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.5
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.10.0-beta.4
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/upload@0.13.0-beta.4
+- @gradio/wasm@0.14.0-beta.3
+
+## 0.10.0-beta.3
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.3
+- @gradio/client@1.6.0-beta.3
+
+## 0.10.0-beta.2
+
+### Features
+
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+- [#9250](https://github.com/gradio-app/gradio/pull/9250) [`350b0a5`](https://github.com/gradio-app/gradio/commit/350b0a5cafb9176f914f62e7c90de51d4352cc77) - Improve Icon Button consistency.  Thanks @hannahblair!
+- [#9253](https://github.com/gradio-app/gradio/pull/9253) [`99648ec`](https://github.com/gradio-app/gradio/commit/99648ec7c4443e74799941e47b0015ac9ca581e1) - Adds ability to block event trigger when file is uploading.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/upload@0.13.0-beta.2
+- @gradio/wasm@0.14.0-beta.2
+- @gradio/client@1.6.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.9.4-beta.1
 
 ### Features
 
 - [#9187](https://github.com/gradio-app/gradio/pull/9187) [`5bf00b7`](https://github.com/gradio-app/gradio/commit/5bf00b7524ebf399b48719120a49d15bb21bd65c) - make all component SSR compatible.  Thanks @pngwn!
 
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/client@1.6.0-beta.1
+- @gradio/upload@0.12.4-beta.1
+- @gradio/wasm@0.13.1-beta.1
+
+## 0.9.4-beta.0
+
 ### Fixes
 
 - [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types.  Thanks @pngwn!
 
 ### Dependency updates
 
-- @gradio/utils@0.6.1
-- @gradio/statustracker@0.7.6
-- @gradio/atoms@0.8.1
-- @gradio/icons@0.7.2
-- @gradio/wasm@0.13.1
-- @gradio/client@1.5.2
-- @gradio/upload@0.12.4
+- @gradio/utils@0.7.0-beta.0
+- @gradio/statustracker@0.8.0-beta.0
+- @gradio/atoms@0.8.1-beta.0
+- @gradio/client@1.6.0-beta.0
+- @gradio/icons@0.8.0-beta.0
+- @gradio/upload@0.12.4-beta.0
+- @gradio/wasm@0.13.1-beta.0
 
 ## 0.9.3
 
diff --git a/js/file/Index.svelte b/js/file/Index.svelte
index 7a7ff1374b0e4..8febc9c6c8227 100644
--- a/js/file/Index.svelte
+++ b/js/file/Index.svelte
@@ -44,6 +44,9 @@
 	}>;
 	export let file_count: "single" | "multiple" | "directory";
 	export let file_types: string[] = ["file"];
+	export let input_ready: boolean;
+	let uploading = false;
+	$: input_ready = !uploading;
 
 	let old_value = value;
 	$: if (JSON.stringify(old_value) !== JSON.stringify(value)) {
@@ -88,8 +91,8 @@
 		/>
 	{:else}
 		<FileUpload
-			upload={gradio.client.upload}
-			stream_handler={gradio.client.stream}
+			upload={(...args) => gradio.client.upload(...args)}
+			stream_handler={(...args) => gradio.client.stream(...args)}
 			{label}
 			{show_label}
 			{value}
@@ -98,6 +101,7 @@
 			selectable={_selectable}
 			{root}
 			{height}
+			bind:uploading
 			max_file_size={gradio.max_file_size}
 			on:change={({ detail }) => {
 				value = detail;
diff --git a/js/file/package.json b/js/file/package.json
index 0cdb8352eb191..0a8899d67453d 100644
--- a/js/file/package.json
+++ b/js/file/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/file",
-	"version": "0.9.4",
+	"version": "0.10.0-beta.7",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/file/shared/FileUpload.svelte b/js/file/shared/FileUpload.svelte
index 25677a4b5216f..81d9d5e567618 100644
--- a/js/file/shared/FileUpload.svelte
+++ b/js/file/shared/FileUpload.svelte
@@ -21,6 +21,7 @@
 	export let max_file_size: number | null = null;
 	export let upload: Client["upload"];
 	export let stream_handler: Client["stream"];
+	export let uploading = false;
 
 	async function handle_upload({
 		detail
@@ -53,7 +54,7 @@
 <BlockLabel {show_label} Icon={File} float={!value} label={label || "File"} />
 
 {#if value && (Array.isArray(value) ? value.length > 0 : true)}
-	<ModifyUpload {i18n} on:clear={handle_clear} absolute />
+	<ModifyUpload {i18n} on:clear={handle_clear} />
 	<FilePreview
 		{i18n}
 		on:select
@@ -71,6 +72,7 @@
 		{max_file_size}
 		{root}
 		bind:dragging
+		bind:uploading
 		on:error
 		{stream_handler}
 		{upload}
diff --git a/js/fileexplorer/CHANGELOG.md b/js/fileexplorer/CHANGELOG.md
index 60886ef19ae61..e58c25ad17a64 100644
--- a/js/fileexplorer/CHANGELOG.md
+++ b/js/fileexplorer/CHANGELOG.md
@@ -1,5 +1,85 @@
 # @gradio/fileexplorer
 
+## 0.5.0-beta.7
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.7
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+- @gradio/checkbox@0.4.0-beta.5
+- @gradio/file@0.10.0-beta.7
+
+## 0.5.0-beta.6
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+- @gradio/client@1.6.0-beta.4
+- @gradio/upload@0.13.0-beta.6
+- @gradio/checkbox@0.4.0-beta.4
+- @gradio/file@0.10.0-beta.6
+
+## 0.5.0-beta.5
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.5
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+- @gradio/file@0.10.0-beta.5
+- @gradio/checkbox@0.4.0-beta.3
+
+## 0.5.0-beta.4
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/upload@0.13.0-beta.4
+- @gradio/checkbox@0.4.0-beta.2
+- @gradio/file@0.10.0-beta.4
+
+## 0.5.0-beta.3
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.3
+- @gradio/client@1.6.0-beta.3
+- @gradio/file@0.10.0-beta.3
+
+## 0.5.0-beta.2
+
+### Features
+
+- [#9313](https://github.com/gradio-app/gradio/pull/9313) [`1fef9d9`](https://github.com/gradio-app/gradio/commit/1fef9d9a26f0ebce4de18c486702661f6539b1c6) - Standardize `height` across components and add `max_height` and `min_height` parameters where appropriate.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/upload@0.13.0-beta.2
+- @gradio/client@1.6.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+- @gradio/file@0.10.0-beta.2
+- @gradio/checkbox@0.4.0-beta.2
+
+## 0.4.19-beta.1
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/client@1.6.0-beta.1
+- @gradio/upload@0.12.4-beta.1
+- @gradio/file@0.9.4-beta.1
+- @gradio/checkbox@0.4.0-beta.1
+
 ## 0.4.19
 
 ### Fixes
diff --git a/js/fileexplorer/Index.svelte b/js/fileexplorer/Index.svelte
index 147fbb706ea1e..73840b760c857 100644
--- a/js/fileexplorer/Index.svelte
+++ b/js/fileexplorer/Index.svelte
@@ -20,7 +20,9 @@
 	let old_value: string[][];
 	export let label: string;
 	export let show_label: boolean;
-	export let height: number | undefined = undefined;
+	export let height: number | string | undefined;
+	export let min_height: number | string | undefined;
+	export let max_height: number | string | undefined;
 	export let file_count: "single" | "multiple" = "multiple";
 	export let root_dir: string;
 	export let glob: string;
@@ -56,8 +58,11 @@
 	{container}
 	{scale}
 	{min_width}
-	allow_overflow={false}
+	allow_overflow={true}
+	overflow_behavior="auto"
 	{height}
+	{max_height}
+	{min_height}
 >
 	<StatusTracker
 		{...loading_status}
diff --git a/js/fileexplorer/package.json b/js/fileexplorer/package.json
index 9c66229468f51..002b59d5a289d 100644
--- a/js/fileexplorer/package.json
+++ b/js/fileexplorer/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/fileexplorer",
-	"version": "0.4.19",
+	"version": "0.5.0-beta.7",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/form/CHANGELOG.md b/js/form/CHANGELOG.md
index 83f8fb7d49e59..19a756a179ec3 100644
--- a/js/form/CHANGELOG.md
+++ b/js/form/CHANGELOG.md
@@ -1,5 +1,45 @@
 # @gradio/form
 
+## 0.2.0-beta.5
+
+### Features
+
+- [#9437](https://github.com/gradio-app/gradio/pull/9437) [`c3d93be`](https://github.com/gradio-app/gradio/commit/c3d93bef94b9401747a363f7bad88a1d347d535b) - Adding new themes to Gradio 5.0.  Thanks @allisonwhilden!
+
+### Dependency updates
+
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.1.25-beta.4
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.4
+
+## 0.1.25-beta.3
+
+### Dependency updates
+
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.1.25-beta.2
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.1.25-beta.1
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+
 ## 0.1.25
 
 ### Fixes
diff --git a/js/form/Index.svelte b/js/form/Index.svelte
index 0f2ee48b4049a..365d8a2cd63f7 100644
--- a/js/form/Index.svelte
+++ b/js/form/Index.svelte
@@ -20,7 +20,7 @@
 		flex-wrap: wrap;
 		gap: var(--form-gap-width);
 		box-shadow: var(--block-shadow);
-		border: var(--block-border-width) solid var(--border-color-primary);
+		border: var(--block-border-width) solid var(--block-border-color);
 		border-radius: var(--block-radius);
 		background: var(--border-color-primary);
 		overflow-y: hidden;
diff --git a/js/form/package.json b/js/form/package.json
index bbab6699384c5..e2ddd4d29fe96 100644
--- a/js/form/package.json
+++ b/js/form/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/form",
-	"version": "0.1.25",
+	"version": "0.2.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/gallery/CHANGELOG.md b/js/gallery/CHANGELOG.md
index cdceda11a1798..16717ac1d17bd 100644
--- a/js/gallery/CHANGELOG.md
+++ b/js/gallery/CHANGELOG.md
@@ -1,5 +1,100 @@
 # @gradio/gallery
 
+## 0.13.0-beta.7
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.7
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+- @gradio/image@0.16.0-beta.7
+- @gradio/video@0.11.0-beta.7
+- @gradio/file@0.10.0-beta.7
+
+## 0.13.0-beta.6
+
+### Dependency updates
+
+- @gradio/video@0.11.0-beta.6
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+- @gradio/client@1.6.0-beta.4
+- @gradio/upload@0.13.0-beta.6
+- @gradio/image@0.16.0-beta.6
+- @gradio/file@0.10.0-beta.6
+
+## 0.13.0-beta.5
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.5
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/video@0.11.0-beta.5
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+- @gradio/file@0.10.0-beta.5
+- @gradio/image@0.16.0-beta.5
+
+## 0.13.0-beta.4
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/upload@0.13.0-beta.4
+- @gradio/file@0.10.0-beta.4
+- @gradio/image@0.16.0-beta.4
+- @gradio/video@0.11.0-beta.4
+
+## 0.13.0-beta.3
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.3
+- @gradio/video@0.11.0-beta.3
+- @gradio/client@1.6.0-beta.3
+- @gradio/file@0.10.0-beta.3
+- @gradio/image@0.16.0-beta.3
+
+## 0.13.0-beta.2
+
+### Features
+
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+- [#9250](https://github.com/gradio-app/gradio/pull/9250) [`350b0a5`](https://github.com/gradio-app/gradio/commit/350b0a5cafb9176f914f62e7c90de51d4352cc77) - Improve Icon Button consistency.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/upload@0.13.0-beta.2
+- @gradio/client@1.6.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+- @gradio/file@0.10.0-beta.2
+- @gradio/image@0.16.0-beta.2
+- @gradio/video@0.11.0-beta.2
+
+## 0.13.0-beta.1
+
+### Dependency updates
+
+- @gradio/video@0.11.0-beta.1
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/client@1.6.0-beta.1
+- @gradio/image@0.16.0-beta.1
+- @gradio/upload@0.12.4-beta.1
+- @gradio/file@0.9.4-beta.1
+
+## 0.13.0-beta.0
+
+### Features
+
+- [#9052](https://github.com/gradio-app/gradio/pull/9052) [`f3652eb`](https://github.com/gradio-app/gradio/commit/f3652ebe08211e12739df73c15fd97e5ff81276a) - Video gallery.  Thanks @dawoodkhan82!
+
 ## 0.12.2
 
 ### Fixes
diff --git a/js/gallery/Gallery.stories.svelte b/js/gallery/Gallery.stories.svelte
index b6478dde60f65..f195f719ae70e 100644
--- a/js/gallery/Gallery.stories.svelte
+++ b/js/gallery/Gallery.stories.svelte
@@ -86,6 +86,14 @@
 				},
 				caption: "A fast cheetah"
 			},
+			{
+				video: {
+					path: "https://gradio-builds.s3.amazonaws.com/demo-files/world.mp4",
+					url: "https://gradio-builds.s3.amazonaws.com/demo-files/world.mp4",
+					orig_name: "world.mp4"
+				},
+				caption: "The world"
+			},
 			{
 				image: {
 					path: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-002.jpg",
@@ -139,7 +147,7 @@
 	play={async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
 
-		const image = canvas.getByLabelText("Thumbnail 1 of 7");
+		const image = canvas.getByLabelText("Thumbnail 1 of 8");
 		await userEvent.click(image);
 		const expand_btn = canvas.getByRole("button", {
 			name: "View in full screen"
diff --git a/js/gallery/Gallery.test.ts b/js/gallery/Gallery.test.ts
index 777f21c444519..8560049be7699 100644
--- a/js/gallery/Gallery.test.ts
+++ b/js/gallery/Gallery.test.ts
@@ -33,8 +33,8 @@ describe("Gallery", () => {
 			value: [
 				{
 					image: {
-						path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
-						url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
+						path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/cheetah.jpg",
+						url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/cheetah.jpg"
 					},
 					caption: null
 				}
@@ -43,7 +43,30 @@ describe("Gallery", () => {
 		let item = getByTestId("detailed-image") as HTMLImageElement;
 		assert.equal(
 			item.src,
-			"https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
+			"https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/cheetah.jpg"
+		);
+	});
+
+	test("renders the video provided", async () => {
+		const { getByTestId } = await render(Gallery, {
+			show_label: true,
+			label: "Gallery",
+			loading_status: loading_status,
+			preview: true,
+			value: [
+				{
+					video: {
+						path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/world.mp4",
+						url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/world.mp4"
+					},
+					caption: null
+				}
+			]
+		});
+		let item = getByTestId("detailed-video") as HTMLVideoElement;
+		assert.equal(
+			item.src,
+			"https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/world.mp4"
 		);
 	});
 
@@ -56,8 +79,8 @@ describe("Gallery", () => {
 			value: [
 				{
 					image: {
-						path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
-						url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
+						path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/cheetah.jpg",
+						url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/cheetah.jpg"
 					},
 					caption: null
 				}
@@ -69,8 +92,8 @@ describe("Gallery", () => {
 			value: [
 				{
 					image: {
-						path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
-						url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
+						path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/cheetah.jpg",
+						url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/cheetah.jpg"
 					},
 					caption: null
 				}
diff --git a/js/gallery/Index.svelte b/js/gallery/Index.svelte
index 4ce1e2a126822..c23f0a7d23109 100644
--- a/js/gallery/Index.svelte
+++ b/js/gallery/Index.svelte
@@ -3,15 +3,17 @@
 </script>
 
 <script lang="ts">
+	import type { GalleryImage, GalleryVideo } from "./types";
 	import type { Gradio, ShareData, SelectData } from "@gradio/utils";
 	import { Block, UploadText } from "@gradio/atoms";
 	import Gallery from "./shared/Gallery.svelte";
 	import type { LoadingStatus } from "@gradio/statustracker";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { FileData } from "@gradio/client";
 	import { createEventDispatcher } from "svelte";
 	import { BaseFileUpload } from "@gradio/file";
 
+	type GalleryData = GalleryImage | GalleryVideo;
+
 	export let loading_status: LoadingStatus;
 	export let show_label: boolean;
 	export let label: string;
@@ -19,7 +21,8 @@
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
-	export let value: { image: FileData; caption: string | null }[] | null = null;
+	export let value: GalleryData[] | null = null;
+	export let file_types: string[] | null = ["image", "video"];
 	export let container = true;
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
@@ -47,7 +50,7 @@
 
 	const dispatch = createEventDispatcher();
 
-	$: no_value = Array.isArray(value) ? value.length === 0 : !value;
+	$: no_value = value === null ? true : value.length === 0;
 	$: selected_index, dispatch("prop_change", { selected_index });
 </script>
 
@@ -76,13 +79,17 @@
 			{label}
 			max_file_size={gradio.max_file_size}
 			file_count={"multiple"}
-			file_types={["image"]}
+			{file_types}
 			i18n={gradio.i18n}
-			upload={gradio.client.upload}
-			stream_handler={gradio.client.stream}
+			upload={(...args) => gradio.client.upload(...args)}
+			stream_handler={(...args) => gradio.client.stream(...args)}
 			on:upload={(e) => {
 				const files = Array.isArray(e.detail) ? e.detail : [e.detail];
-				value = files.map((x) => ({ image: x, caption: null }));
+				value = files.map((x) =>
+					x.mime_type?.includes("video")
+						? { video: x, caption: null }
+						: { image: x, caption: null }
+				);
 				gradio.dispatch("upload", value);
 			}}
 			on:error={({ detail }) => {
@@ -113,7 +120,7 @@
 			{show_share_button}
 			{show_download_button}
 			i18n={gradio.i18n}
-			_fetch={gradio.client.fetch}
+			_fetch={(...args) => gradio.client.fetch(...args)}
 			{show_fullscreen_button}
 		/>
 	{/if}
diff --git a/js/gallery/package.json b/js/gallery/package.json
index 6c2a43c32f606..019ea36bb5fb6 100644
--- a/js/gallery/package.json
+++ b/js/gallery/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/gallery",
-	"version": "0.12.2",
+	"version": "0.13.0-beta.7",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
@@ -14,6 +14,7 @@
 		"@gradio/statustracker": "workspace:^",
 		"@gradio/upload": "workspace:^",
 		"@gradio/utils": "workspace:^",
+		"@gradio/video": "workspace:^",
 		"@gradio/file": "workspace:^",
 		"dequal": "^2.0.2"
 	},
diff --git a/js/gallery/shared/Gallery.svelte b/js/gallery/shared/Gallery.svelte
index c9a1457b029c1..f39ef54e2a054 100644
--- a/js/gallery/shared/Gallery.svelte
+++ b/js/gallery/shared/Gallery.svelte
@@ -3,28 +3,30 @@
 	import { ModifyUpload } from "@gradio/upload";
 	import type { SelectData } from "@gradio/utils";
 	import { Image } from "@gradio/image/shared";
+	import { Video } from "@gradio/video/shared";
 	import { dequal } from "dequal";
 	import { createEventDispatcher, onMount } from "svelte";
 	import { tick } from "svelte";
+	import type { GalleryImage, GalleryVideo } from "../types";
 
 	import {
 		Download,
 		Image as ImageIcon,
 		Maximize,
 		Minimize,
-		Clear
+		Clear,
+		Play
 	} from "@gradio/icons";
 	import { FileData } from "@gradio/client";
 	import { format_gallery_for_sharing } from "./utils";
-	import { IconButton } from "@gradio/atoms";
+	import { IconButton, IconButtonWrapper } from "@gradio/atoms";
 	import type { I18nFormatter } from "@gradio/utils";
 
-	type GalleryImage = { image: FileData; caption: string | null };
-	type GalleryData = GalleryImage[];
+	type GalleryData = GalleryImage | GalleryVideo;
 
 	export let show_label = true;
 	export let label: string;
-	export let value: GalleryData | null = null;
+	export let value: GalleryData[] | null = null;
 	export let columns: number | number[] | undefined = [2];
 	export let rows: number | number[] | undefined = undefined;
 	export let height: number | "auto" = "auto";
@@ -54,16 +56,24 @@
 
 	$: was_reset = value == null || value.length === 0 ? true : was_reset;
 
-	let resolved_value: GalleryData | null = null;
+	let resolved_value: GalleryData[] | null = null;
+
 	$: resolved_value =
 		value == null
 			? null
-			: value.map((data) => ({
-					image: data.image as FileData,
-					caption: data.caption
-				}));
-
-	let prev_value: GalleryData | null = value;
+			: (value.map((data) => {
+					if ("video" in data) {
+						return {
+							video: data.video as FileData,
+							caption: data.caption
+						};
+					} else if ("image" in data) {
+						return { image: data.image as FileData, caption: data.caption };
+					}
+					return {};
+				}) as GalleryData[]);
+
+	let prev_value: GalleryData[] | null = value;
 	if (selected_index == null && preview && value?.length) {
 		selected_index = 0;
 	}
@@ -201,7 +211,7 @@
 		URL.revokeObjectURL(url);
 	}
 
-	$: selected_image =
+	$: selected_media =
 		selected_index != null && resolved_value != null
 			? resolved_value[selected_index]
 			: null;
@@ -230,19 +240,22 @@
 	<Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
 {:else}
 	<div class="gallery-container" bind:this={gallery_container}>
-		{#if selected_image && allow_preview}
+		{#if selected_media && allow_preview}
 			<button
 				on:keydown={on_keydown}
 				class="preview"
 				class:minimal={mode === "minimal"}
 			>
-				<div class="icon-buttons">
+				<IconButtonWrapper>
 					{#if show_download_button}
 						<IconButton
 							Icon={Download}
 							label={i18n("common.download")}
 							on:click={() => {
-								const image = selected_image?.image;
+								const image =
+									"image" in selected_media
+										? selected_media?.image
+										: selected_media?.video;
 								if (image == null) {
 									return;
 								}
@@ -279,27 +292,42 @@
 							on:click={() => (selected_index = null)}
 						/>
 					{/if}
-				</div>
+				</IconButtonWrapper>
 				<button
-					class="image-button"
-					on:click={(event) => handle_preview_click(event)}
-					style="height: calc(100% - {selected_image.caption
+					class="media-button"
+					on:click={"image" in selected_media
+						? (event) => handle_preview_click(event)
+						: null}
+					style="height: calc(100% - {selected_media.caption
 						? '80px'
 						: '60px'})"
 					aria-label="detailed view of selected image"
 				>
-					<Image
-						data-testid="detailed-image"
-						src={selected_image.image.url}
-						alt={selected_image.caption || ""}
-						title={selected_image.caption || null}
-						class={selected_image.caption && "with-caption"}
-						loading="lazy"
-					/>
+					{#if "image" in selected_media}
+						<Image
+							data-testid="detailed-image"
+							src={selected_media.image.url}
+							alt={selected_media.caption || ""}
+							title={selected_media.caption || null}
+							class={selected_media.caption && "with-caption"}
+							loading="lazy"
+						/>
+					{:else}
+						<Video
+							src={selected_media.video.url}
+							data-testid={"detailed-video"}
+							alt={selected_media.caption || ""}
+							loading="lazy"
+							loop={false}
+							is_stream={false}
+							muted={false}
+							controls={true}
+						/>
+					{/if}
 				</button>
-				{#if selected_image?.caption}
+				{#if selected_media?.caption}
 					<caption class="caption">
-						{selected_image.caption}
+						{selected_media.caption}
 					</caption>
 				{/if}
 				<div
@@ -307,7 +335,7 @@
 					class="thumbnails scroll-hide"
 					data-testid="container_el"
 				>
-					{#each resolved_value as image, i}
+					{#each resolved_value as media, i}
 						<button
 							bind:this={el[i]}
 							on:click={() => (selected_index = i)}
@@ -318,13 +346,26 @@
 								" of " +
 								resolved_value.length}
 						>
-							<Image
-								src={image.image.url}
-								title={image.caption || null}
-								data-testid={"thumbnail " + (i + 1)}
-								alt=""
-								loading="lazy"
-							/>
+							{#if "image" in media}
+								<Image
+									src={media.image.url}
+									title={media.caption || null}
+									data-testid={"thumbnail " + (i + 1)}
+									alt=""
+									loading="lazy"
+								/>
+							{:else}
+								<Play />
+								<Video
+									src={media.video.url}
+									title={media.caption || null}
+									is_stream={false}
+									data-testid={"thumbnail " + (i + 1)}
+									alt=""
+									loading="lazy"
+									loop={false}
+								/>
+							{/if}
 						</button>
 					{/each}
 				</div>
@@ -344,24 +385,22 @@
 			>
 				{#if interactive}
 					<div class="icon-button">
-						<ModifyUpload
-							{i18n}
-							absolute={false}
-							on:clear={() => (value = null)}
-						/>
-					</div>
-				{/if}
-				{#if show_share_button}
-					<div class="icon-button">
-						<ShareButton
-							{i18n}
-							on:share
-							on:error
-							value={resolved_value}
-							formatter={format_gallery_for_sharing}
-						/>
+						<ModifyUpload {i18n} on:clear={() => (value = [])} />
 					</div>
 				{/if}
+				<IconButtonWrapper>
+					{#if show_share_button}
+						<div class="icon-button">
+							<ShareButton
+								{i18n}
+								on:share
+								on:error
+								value={resolved_value}
+								formatter={format_gallery_for_sharing}
+							/>
+						</div>
+					{/if}
+				</IconButtonWrapper>
 				{#each resolved_value as entry, i}
 					<button
 						class="thumbnail-item thumbnail-lg"
@@ -369,13 +408,26 @@
 						on:click={() => (selected_index = i)}
 						aria-label={"Thumbnail " + (i + 1) + " of " + resolved_value.length}
 					>
-						<Image
-							alt={entry.caption || ""}
-							src={typeof entry.image === "string"
-								? entry.image
-								: entry.image.url}
-							loading="lazy"
-						/>
+						{#if "image" in entry}
+							<Image
+								alt={entry.caption || ""}
+								src={typeof entry.image === "string"
+									? entry.image
+									: entry.image.url}
+								loading="lazy"
+							/>
+						{:else}
+							<Play />
+							<Video
+								src={entry.video.url}
+								title={entry.caption || null}
+								is_stream={false}
+								data-testid={"thumbnail " + (i + 1)}
+								alt=""
+								loading="lazy"
+								loop={false}
+							/>
+						{/if}
 						{#if entry.caption}
 							<div class="caption-label">
 								{entry.caption}
@@ -440,12 +492,13 @@
 		}
 	}
 
-	.image-button {
+	.media-button {
 		height: calc(100% - 60px);
 		width: 100%;
 		display: flex;
 	}
-	.image-button :global(img) {
+	.media-button :global(img),
+	.media-button :global(video) {
 		width: var(--size-full);
 		height: var(--size-full);
 		object-fit: contain;
@@ -455,6 +508,14 @@
 		width: var(--size-full);
 		height: var(--size-full);
 	}
+	.thumbnails :global(svg) {
+		position: absolute;
+		top: var(--size-2);
+		left: var(--size-2);
+		width: 50%;
+		height: 50%;
+		opacity: 50%;
+	}
 	.preview :global(img.with-caption) {
 		height: var(--size-full);
 	}
@@ -516,6 +577,23 @@
 		border-color: var(--color-accent);
 	}
 
+	.thumbnail-item :global(svg) {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: 50%;
+		height: 50%;
+		opacity: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+	.thumbnail-item :global(video) {
+		width: var(--size-full);
+		height: var(--size-full);
+		overflow: hidden;
+		object-fit: cover;
+	}
+
 	.thumbnail-small {
 		flex: none;
 		transform: scale(0.9);
@@ -523,7 +601,6 @@
 		width: var(--size-9);
 		height: var(--size-9);
 	}
-
 	.thumbnail-small.selected {
 		--ring-color: var(--color-accent);
 		transform: scale(1);
@@ -583,19 +660,8 @@
 	}
 
 	.icon-button {
-		position: absolute;
-		top: 0px;
-		right: 0px;
-		z-index: var(--layer-1);
-	}
-
-	.icon-buttons {
-		display: flex;
-		position: absolute;
-		right: 0;
-		gap: var(--size-1);
-		z-index: 1;
-		margin: var(--size-1);
+		top: 1px;
+		right: 1px;
 	}
 
 	.grid-wrap.minimal {
diff --git a/js/gallery/types.ts b/js/gallery/types.ts
new file mode 100644
index 0000000000000..0ab7e98650085
--- /dev/null
+++ b/js/gallery/types.ts
@@ -0,0 +1,11 @@
+import type { FileData } from "@gradio/client";
+
+export interface GalleryImage {
+	image: FileData;
+	caption: string | null;
+}
+
+export interface GalleryVideo {
+	video: FileData;
+	caption: string | null;
+}
diff --git a/js/group/CHANGELOG.md b/js/group/CHANGELOG.md
index 0f2fd918b585e..d571f1bea2b3f 100644
--- a/js/group/CHANGELOG.md
+++ b/js/group/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @gradio/group
 
+## 0.2.0-beta.1
+
+### Features
+
+- [#9167](https://github.com/gradio-app/gradio/pull/9167) [`e9e737e`](https://github.com/gradio-app/gradio/commit/e9e737eeeb61d0bbf43277c75b6ffed8b34aa445) - Redesign `gr.Button()`.  Thanks @hannahblair!
+
 ## 0.1.3
 
 ### Fixes
diff --git a/js/group/Index.svelte b/js/group/Index.svelte
index 152bbe5f07d76..e8f3e66e5d8f6 100644
--- a/js/group/Index.svelte
+++ b/js/group/Index.svelte
@@ -26,7 +26,7 @@
 <style>
 	div {
 		border: var(--block-border-width) solid var(--border-color-primary);
-		background: var(--border-color-primary);
+		background: var(--block-border-color);
 		border-radius: var(--block-radius);
 		display: flex;
 		flex-direction: column;
diff --git a/js/group/package.json b/js/group/package.json
index 82a842d0dc088..7a260916bcabb 100644
--- a/js/group/package.json
+++ b/js/group/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/group",
-	"version": "0.1.3",
+	"version": "0.2.0-beta.1",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/highlightedtext/CHANGELOG.md b/js/highlightedtext/CHANGELOG.md
index 457e6b4cf9900..48823567adb1c 100644
--- a/js/highlightedtext/CHANGELOG.md
+++ b/js/highlightedtext/CHANGELOG.md
@@ -1,5 +1,53 @@
 # @gradio/highlightedtext
 
+## 0.7.7-beta.5
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.7.7-beta.4
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+
+## 0.7.7-beta.3
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.7.7-beta.2
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+
+## 0.7.7-beta.2
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.7.7-beta.1
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/theme@0.3.0-beta.1
+
 ## 0.7.7
 
 ### Fixes
diff --git a/js/highlightedtext/package.json b/js/highlightedtext/package.json
index 0f736a93bd232..e43da1eaec8b0 100644
--- a/js/highlightedtext/package.json
+++ b/js/highlightedtext/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/highlightedtext",
-	"version": "0.7.7",
+	"version": "0.7.7-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/html/CHANGELOG.md b/js/html/CHANGELOG.md
index bbf7134adc95b..e664f26bffefe 100644
--- a/js/html/CHANGELOG.md
+++ b/js/html/CHANGELOG.md
@@ -1,5 +1,56 @@
 # @gradio/html
 
+## 0.4.0-beta.5
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.4.0-beta.4
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+
+## 0.4.0-beta.3
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.4.0-beta.2
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+
+## 0.4.0-beta.2
+
+### Features
+
+- [#9363](https://github.com/gradio-app/gradio/pull/9363) [`3ad28c7`](https://github.com/gradio-app/gradio/commit/3ad28c7e310e8589e0c53b7efee8031e129bece8) - Prevent HTML and Markdown height changing when status is hidden.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.3.6-beta.1
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+
 ## 0.3.6
 
 ### Fixes
diff --git a/js/html/Index.svelte b/js/html/Index.svelte
index 57c82ab4cd2fb..3e6b79d0cfe11 100644
--- a/js/html/Index.svelte
+++ b/js/html/Index.svelte
@@ -5,6 +5,7 @@
 	import type { LoadingStatus } from "@gradio/statustracker";
 	import { Block, BlockLabel } from "@gradio/atoms";
 	import { Code as CodeIcon } from "@gradio/icons";
+	import { css_units } from "@gradio/utils";
 
 	export let label: string;
 	export let elem_id = "";
@@ -17,6 +18,8 @@
 		clear_status: LoadingStatus;
 	}>;
 	export let show_label = false;
+	export let min_height: number | undefined = undefined;
+	export let max_height: number | undefined = undefined;
 
 	$: label, gradio.dispatch("change");
 </script>
@@ -35,9 +38,14 @@
 		variant="center"
 		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 	/>
-	<div class:pending={loading_status?.status === "pending"}>
+	<div
+		class:pending={loading_status?.status === "pending"}
+		style:min-height={min_height && loading_status?.status !== "pending"
+			? css_units(min_height)
+			: undefined}
+		style:max-height={max_height ? css_units(max_height) : undefined}
+	>
 		<HTML
-			min_height={loading_status && loading_status?.status !== "complete"}
 			{value}
 			{elem_classes}
 			{visible}
diff --git a/js/html/package.json b/js/html/package.json
index de9ff37a014c2..ac6299d9cb1bf 100644
--- a/js/html/package.json
+++ b/js/html/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/html",
-	"version": "0.3.6",
+	"version": "0.4.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/html/shared/HTML.svelte b/js/html/shared/HTML.svelte
index 461a3c9579d10..23ee8ec74b18b 100644
--- a/js/html/shared/HTML.svelte
+++ b/js/html/shared/HTML.svelte
@@ -1,27 +1,20 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
+
 	export let elem_classes: string[] = [];
 	export let value: string;
 	export let visible = true;
-	export let min_height = false;
 
 	const dispatch = createEventDispatcher<{ change: undefined }>();
 
 	$: value, dispatch("change");
 </script>
 
-<div
-	class="prose {elem_classes.join(' ')}"
-	class:min={min_height}
-	class:hide={!visible}
->
+<div class="prose {elem_classes.join(' ')}" class:hide={!visible}>
 	{@html value}
 </div>
 
 <style>
-	.min {
-		min-height: var(--size-24);
-	}
 	.hide {
 		display: none;
 	}
diff --git a/js/icons/CHANGELOG.md b/js/icons/CHANGELOG.md
index 34a1ca4d7137e..3e1ea910cac68 100644
--- a/js/icons/CHANGELOG.md
+++ b/js/icons/CHANGELOG.md
@@ -1,5 +1,37 @@
 # @gradio/icons
 
+## 0.8.0-beta.4
+
+### Features
+
+- [#9582](https://github.com/gradio-app/gradio/pull/9582) [`43a7f42`](https://github.com/gradio-app/gradio/commit/43a7f420d8ac34c7f7fa71d6e630a4c8618d3780) - Chatbot autoscroll.  Thanks @whitphx!
+
+## 0.8.0-beta.3
+
+### Features
+
+- [#9450](https://github.com/gradio-app/gradio/pull/9450) [`991883e`](https://github.com/gradio-app/gradio/commit/991883e217dc0a3512b3ae3245378812f373b8db) - Improve `gr.Code`.  Thanks @hannahblair!
+
+## 0.8.0-beta.2
+
+### Features
+
+- [#9261](https://github.com/gradio-app/gradio/pull/9261) [`73647a0`](https://github.com/gradio-app/gradio/commit/73647a07b0439efabe3dd218ff6c366ffa3b84a0) - Move icons into `IconButtonWrapper`.  Thanks @hannahblair!
+- [#9280](https://github.com/gradio-app/gradio/pull/9280) [`7122420`](https://github.com/gradio-app/gradio/commit/712242047fde3a594dfde7f48a44c7ea16239dc8) - Match style of textbox stop button to submit button.  Thanks @freddyaboulton!
+
+## 0.8.0-beta.1
+
+### Features
+
+- [#9235](https://github.com/gradio-app/gradio/pull/9235) [`f8b411f`](https://github.com/gradio-app/gradio/commit/f8b411fe282ff0316ed4abebc0a043b044bf4dd9) - Built-in submit and stop buttons in `gr.ChatInterface(multimodal=False)`, adding `submit_btn` and `stop_btn` props to `gr.Textbox()` and `gr.MultimodalText()`.  Thanks @whitphx!
+- [#9201](https://github.com/gradio-app/gradio/pull/9201) [`5492e74`](https://github.com/gradio-app/gradio/commit/5492e742b1f1fa618208cce523f50ad22a6e86f1) - Move buttons from chat_interface into Chatbot.  Thanks @freddyaboulton!
+
+## 0.8.0-beta.0
+
+### Features
+
+- [#9149](https://github.com/gradio-app/gradio/pull/9149) [`3d7a9b8`](https://github.com/gradio-app/gradio/commit/3d7a9b81f6fef06187eca832471dc1692eb493a0) - Open audio/image input stream only when queue is ready.  Thanks @freddyaboulton!
+
 ## 0.7.2
 
 ### Fixes
diff --git a/js/icons/package.json b/js/icons/package.json
index 67ed2ffbe5f71..dd29aa7ae16da 100644
--- a/js/icons/package.json
+++ b/js/icons/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/icons",
-	"version": "0.7.2",
+	"version": "0.8.0-beta.4",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"main": "src/index.ts",
diff --git a/js/icons/src/Check.svelte b/js/icons/src/Check.svelte
index 7c5fb8b96b50a..7ea8b356991c7 100644
--- a/js/icons/src/Check.svelte
+++ b/js/icons/src/Check.svelte
@@ -4,7 +4,7 @@
 	fill="none"
 	stroke="currentColor"
 	aria-hidden="true"
-	stroke-width="2"
+	stroke-width="1.5"
 	stroke-linecap="round"
 	stroke-linejoin="round"><polyline points="20 6 9 17 4 12" /></svg
 >
diff --git a/js/icons/src/Retry.svelte b/js/icons/src/Retry.svelte
new file mode 100644
index 0000000000000..9d61bdd9c504e
--- /dev/null
+++ b/js/icons/src/Retry.svelte
@@ -0,0 +1,36 @@
+<svg
+	stroke-width="1.5"
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	color="currentColor"
+>
+	<path
+		d="M19.1679 9C18.0247 6.46819 15.3006 4.5 11.9999 4.5C8.31459 4.5 5.05104 7.44668 4.54932 11"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	></path>
+	<path
+		d="M16 9H19.4C19.7314 9 20 8.73137 20 8.4V5"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	></path>
+	<path
+		d="M4.88146 15C5.92458 17.5318 8.64874 19.5 12.0494 19.5C15.7347 19.5 18.9983 16.5533 19.5 13"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	></path>
+	<path
+		d="M8.04932 15H4.64932C4.31795 15 4.04932 15.2686 4.04932 15.6V19"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	></path>
+</svg>
diff --git a/js/icons/src/ScrollDownArrow.svelte b/js/icons/src/ScrollDownArrow.svelte
new file mode 100644
index 0000000000000..838acca0b0277
--- /dev/null
+++ b/js/icons/src/ScrollDownArrow.svelte
@@ -0,0 +1,15 @@
+<svg
+	width="100%"
+	height="100%"
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M12 20L12 4M12 20L7 15M12 20L17 15"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/js/icons/src/Spinner.svelte b/js/icons/src/Spinner.svelte
new file mode 100644
index 0000000000000..1f9c0c8c56951
--- /dev/null
+++ b/js/icons/src/Spinner.svelte
@@ -0,0 +1,40 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="100%"
+	height="100%"
+	viewBox="0 0 50 50"
+>
+	<circle
+		cx="25"
+		cy="25"
+		r="20"
+		fill="none"
+		stroke-width="3.0"
+		stroke-linecap="round"
+		stroke-dasharray="94.2477796076938 94.2477796076938"
+		stroke-dashoffset="0"
+	>
+		<animateTransform
+			attributeName="transform"
+			type="rotate"
+			from="0 25 25"
+			to="360 25 25"
+			repeatCount="indefinite"
+		/>
+	</circle>
+</svg>
+
+<style>
+	svg {
+		animation: spin 1.5s linear infinite;
+	}
+
+	@keyframes spin {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+</style>
diff --git a/js/icons/src/Square.svelte b/js/icons/src/Square.svelte
index a72a543cd517c..eda4127134a0b 100644
--- a/js/icons/src/Square.svelte
+++ b/js/icons/src/Square.svelte
@@ -1,9 +1,16 @@
+<script>
+	export let fill = "currentColor";
+	export let stroke_width = 1.5;
+</script>
+
 <svg
 	xmlns="http://www.w3.org/2000/svg"
 	width="100%"
 	height="100%"
 	viewBox="0 0 24 24"
-	stroke-width="1.5"
+	{fill}
+	stroke="currentColor"
+	stroke-width={`${stroke_width}`}
 	stroke-linecap="round"
 	stroke-linejoin="round"
 	class="feather feather-square"
diff --git a/js/icons/src/Undo.svelte b/js/icons/src/Undo.svelte
index 2e1ab9da6eddd..f5df83d669535 100644
--- a/js/icons/src/Undo.svelte
+++ b/js/icons/src/Undo.svelte
@@ -1,11 +1,12 @@
 <svg
+	aria-label="undo"
 	xmlns="http://www.w3.org/2000/svg"
 	width="100%"
 	height="100%"
 	viewBox="0 0 24 24"
 	fill="none"
 	stroke="currentColor"
-	stroke-width="2"
+	stroke-width="1.5"
 	stroke-linecap="round"
 	stroke-linejoin="round"
 	class="feather feather-rotate-ccw"
diff --git a/js/icons/src/index.ts b/js/icons/src/index.ts
index d2f1fedac84ee..75cdc71a921e3 100644
--- a/js/icons/src/index.ts
+++ b/js/icons/src/index.ts
@@ -58,3 +58,6 @@ export { default as VolumeHigh } from "./VolumeHigh.svelte";
 export { default as VolumeMuted } from "./VolumeMuted.svelte";
 export { default as Warning } from "./Warning.svelte";
 export { default as Webcam } from "./Webcam.svelte";
+export { default as Spinner } from "./Spinner.svelte";
+export { default as Retry } from "./Retry.svelte";
+export { default as ScrollDownArrow } from "./ScrollDownArrow.svelte";
diff --git a/js/image/CHANGELOG.md b/js/image/CHANGELOG.md
index f568bebcd4caf..92db7b5b82cfe 100644
--- a/js/image/CHANGELOG.md
+++ b/js/image/CHANGELOG.md
@@ -1,5 +1,94 @@
 # @gradio/image
 
+## 0.16.0-beta.7
+
+### Features
+
+- [#9582](https://github.com/gradio-app/gradio/pull/9582) [`43a7f42`](https://github.com/gradio-app/gradio/commit/43a7f420d8ac34c7f7fa71d6e630a4c8618d3780) - Chatbot autoscroll.  Thanks @whitphx!
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.7
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.16.0-beta.6
+
+### Features
+
+- [#9483](https://github.com/gradio-app/gradio/pull/9483) [`8dc7c12`](https://github.com/gradio-app/gradio/commit/8dc7c12389311b60efcde1b9d3e3668a34d2dc00) - Send Streaming data over Websocket if possible. Also support base64 output format for images.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+- @gradio/client@1.6.0-beta.4
+- @gradio/upload@0.13.0-beta.6
+
+## 0.16.0-beta.5
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.5
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.16.0-beta.4
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/upload@0.13.0-beta.4
+- @gradio/wasm@0.14.0-beta.3
+
+## 0.16.0-beta.3
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.3
+- @gradio/client@1.6.0-beta.3
+
+## 0.16.0-beta.2
+
+### Features
+
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+- [#9250](https://github.com/gradio-app/gradio/pull/9250) [`350b0a5`](https://github.com/gradio-app/gradio/commit/350b0a5cafb9176f914f62e7c90de51d4352cc77) - Improve Icon Button consistency.  Thanks @hannahblair!
+- [#9253](https://github.com/gradio-app/gradio/pull/9253) [`99648ec`](https://github.com/gradio-app/gradio/commit/99648ec7c4443e74799941e47b0015ac9ca581e1) - Adds ability to block event trigger when file is uploading.  Thanks @dawoodkhan82!
+- [#9270](https://github.com/gradio-app/gradio/pull/9270) [`b0b8500`](https://github.com/gradio-app/gradio/commit/b0b850081d8d10c1287b5d179b8db37482e21c8d) - Fix stop recording button colors.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/upload@0.13.0-beta.2
+- @gradio/wasm@0.14.0-beta.2
+- @gradio/client@1.6.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.16.0-beta.1
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/client@1.6.0-beta.1
+- @gradio/upload@0.12.4-beta.1
+- @gradio/wasm@0.13.1-beta.1
+
+## 0.16.0-beta.0
+
+### Features
+
+- [#9149](https://github.com/gradio-app/gradio/pull/9149) [`3d7a9b8`](https://github.com/gradio-app/gradio/commit/3d7a9b81f6fef06187eca832471dc1692eb493a0) - Open audio/image input stream only when queue is ready.  Thanks @freddyaboulton!
+- [#9173](https://github.com/gradio-app/gradio/pull/9173) [`66349fe`](https://github.com/gradio-app/gradio/commit/66349fe26827e3a3c15b738a1177e95fec7f5554) - Streaming Guides.  Thanks @freddyaboulton!
+- [#8941](https://github.com/gradio-app/gradio/pull/8941) [`97a7bf6`](https://github.com/gradio-app/gradio/commit/97a7bf66a79179d1b91a3199d68e5c11216ca500) - Streaming inputs for 5.0.  Thanks @freddyaboulton!
+
 ## 0.15.1
 
 ### Fixes
diff --git a/js/image/Index.svelte b/js/image/Index.svelte
index c067013961fd5..5e8cb68e0f0fe 100644
--- a/js/image/Index.svelte
+++ b/js/image/Index.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <script lang="ts">
-	import type { Gradio, SelectData } from "@gradio/utils";
+	import type { Gradio, SelectData, ValueData } from "@gradio/utils";
 	import StaticImage from "./shared/ImagePreview.svelte";
 	import ImageUploader from "./shared/ImageUploader.svelte";
 	import { afterUpdate } from "svelte";
@@ -17,11 +17,21 @@
 	import { Block, Empty, UploadText } from "@gradio/atoms";
 	import { Image } from "@gradio/icons";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { FileData } from "@gradio/client";
+	import { upload, type FileData } from "@gradio/client";
 	import type { LoadingStatus } from "@gradio/statustracker";
 
 	type sources = "upload" | "webcam" | "clipboard" | null;
 
+	let stream_state = "closed";
+	let _modify_stream: (state: "open" | "closed" | "waiting") => void = () => {};
+	export function modify_stream_state(
+		state: "open" | "closed" | "waiting"
+	): void {
+		stream_state = state;
+		_modify_stream(state);
+	}
+	export const get_stream_state: () => void = () => stream_state;
+	export let set_time_limit: (arg0: number) => void;
 	export let value_is_output = false;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
@@ -35,6 +45,7 @@
 
 	export let height: number | undefined;
 	export let width: number | undefined;
+	export let stream_every: number;
 
 	export let _selectable = false;
 	export let container = true;
@@ -53,19 +64,22 @@
 	export let mirror_webcam: boolean;
 	export let placeholder: string | undefined = undefined;
 	export let show_fullscreen_button: boolean;
-
+	export let input_ready: boolean;
+	let uploading = false;
+	$: input_ready = !uploading;
 	export let gradio: Gradio<{
 		input: never;
 		change: never;
 		error: string;
 		edit: never;
-		stream: never;
+		stream: ValueData;
 		drag: never;
 		upload: never;
 		clear: never;
 		select: SelectData;
 		share: ShareData;
 		clear_status: LoadingStatus;
+		close_stream: string;
 	}>;
 
 	$: {
@@ -77,6 +91,7 @@
 			}
 		}
 	}
+
 	afterUpdate(() => {
 		value_is_output = false;
 	});
@@ -171,6 +186,7 @@
 
 		<ImageUploader
 			bind:this={upload_component}
+			bind:uploading
 			bind:active_source
 			bind:value
 			bind:dragging
@@ -181,7 +197,7 @@
 			on:clear={() => {
 				gradio.dispatch("clear");
 			}}
-			on:stream={() => gradio.dispatch("stream")}
+			on:stream={({ detail }) => gradio.dispatch("stream", detail)}
 			on:drag={({ detail }) => (dragging = detail)}
 			on:upload={() => gradio.dispatch("upload")}
 			on:select={({ detail }) => gradio.dispatch("select", detail)}
@@ -191,15 +207,21 @@
 				loading_status.status = "error";
 				gradio.dispatch("error", detail);
 			}}
+			on:close_stream={() => {
+				gradio.dispatch("close_stream", "stream");
+			}}
 			{label}
 			{show_label}
 			{pending}
 			{streaming}
 			{mirror_webcam}
+			{stream_every}
+			bind:modify_stream={_modify_stream}
+			bind:set_time_limit
 			max_file_size={gradio.max_file_size}
 			i18n={gradio.i18n}
-			upload={gradio.client.upload}
-			stream_handler={gradio.client.stream}
+			upload={(...args) => gradio.client.upload(...args)}
+			stream_handler={gradio.client?.stream}
 		>
 			{#if active_source === "upload" || !active_source}
 				<UploadText i18n={gradio.i18n} type="image" {placeholder} />
diff --git a/js/image/package.json b/js/image/package.json
index 2cbf8328b5607..1d11d49effe0d 100644
--- a/js/image/package.json
+++ b/js/image/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/image",
-	"version": "0.15.1",
+	"version": "0.16.0-beta.7",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/image/shared/ClearImage.svelte b/js/image/shared/ClearImage.svelte
index 87a2ea653568c..8726267bbdfa3 100644
--- a/js/image/shared/ClearImage.svelte
+++ b/js/image/shared/ClearImage.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
-	import { IconButton } from "@gradio/atoms";
+	import { IconButton, IconButtonWrapper } from "@gradio/atoms";
 	import { Clear } from "@gradio/icons";
 
 	const dispatch = createEventDispatcher();
 </script>
 
-<div>
+<IconButtonWrapper>
 	<IconButton
 		Icon={Clear}
 		label="Remove Image"
@@ -15,16 +15,4 @@
 			event.stopPropagation();
 		}}
 	/>
-</div>
-
-<style>
-	div {
-		display: flex;
-		position: absolute;
-		top: var(--size-2);
-		right: var(--size-2);
-		justify-content: flex-end;
-		gap: var(--spacing-sm);
-		z-index: var(--layer-5);
-	}
-</style>
+</IconButtonWrapper>
diff --git a/js/image/shared/Image.svelte b/js/image/shared/Image.svelte
index 40b32d928f182..3f88fb2ec1cc2 100644
--- a/js/image/shared/Image.svelte
+++ b/js/image/shared/Image.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
 	import type { HTMLImgAttributes } from "svelte/elements";
-	import { createEventDispatcher } from "svelte";
 
-	const dispatch = createEventDispatcher<{ load?: void }>();
 	interface Props extends HTMLImgAttributes {
 		"data-testid"?: string;
 	}
@@ -37,7 +35,7 @@
 </script>
 
 <!-- svelte-ignore a11y-missing-attribute -->
-<img src={resolved_src} {...$$restProps} on:load={() => dispatch("load")} />
+<img src={resolved_src} {...$$restProps} on:load />
 
 <style>
 	img {
diff --git a/js/image/shared/ImagePreview.svelte b/js/image/shared/ImagePreview.svelte
index 3a93ad5a3a119..9bb77d5d0b113 100644
--- a/js/image/shared/ImagePreview.svelte
+++ b/js/image/shared/ImagePreview.svelte
@@ -2,7 +2,13 @@
 	import { createEventDispatcher, onMount } from "svelte";
 	import type { SelectData } from "@gradio/utils";
 	import { uploadToHuggingFace } from "@gradio/utils";
-	import { BlockLabel, Empty, IconButton, ShareButton } from "@gradio/atoms";
+	import {
+		BlockLabel,
+		Empty,
+		IconButton,
+		ShareButton,
+		IconButtonWrapper
+	} from "@gradio/atoms";
 	import { Download } from "@gradio/icons";
 	import { get_coordinates_of_clicked_image } from "./utils";
 	import Image from "./Image.svelte";
@@ -62,7 +68,7 @@
 	<Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
 {:else}
 	<div class="image-container" bind:this={image_container}>
-		<div class="icon-buttons">
+		<IconButtonWrapper>
 			{#if !is_full_screen && show_fullscreen_button}
 				<IconButton
 					Icon={Maximize}
@@ -97,7 +103,7 @@
 					{value}
 				/>
 			{/if}
-		</div>
+		</IconButtonWrapper>
 		<button on:click={handle_click}>
 			<div class:selectable class="image-frame">
 				<Image src={value.url} alt="" loading="lazy" on:load />
@@ -139,15 +145,6 @@
 		cursor: crosshair;
 	}
 
-	.icon-buttons {
-		display: flex;
-		position: absolute;
-		top: 6px;
-		right: 6px;
-		gap: var(--size-1);
-		z-index: 1;
-	}
-
 	:global(.fullscreen-controls svg) {
 		position: relative;
 		top: 0px;
diff --git a/js/image/shared/ImageUploader.svelte b/js/image/shared/ImageUploader.svelte
index 68f79961e4cb2..75c7780083676 100644
--- a/js/image/shared/ImageUploader.svelte
+++ b/js/image/shared/ImageUploader.svelte
@@ -2,17 +2,22 @@
 	import { createEventDispatcher, tick } from "svelte";
 	import { BlockLabel } from "@gradio/atoms";
 	import { Image as ImageIcon } from "@gradio/icons";
-	import type { SelectData, I18nFormatter } from "@gradio/utils";
+	import {
+		type SelectData,
+		type I18nFormatter,
+		type ValueData
+	} from "@gradio/utils";
 	import { get_coordinates_of_clicked_image } from "./utils";
 	import Webcam from "./Webcam.svelte";
 
 	import { Upload } from "@gradio/upload";
-	import type { FileData, Client } from "@gradio/client";
+	import { FileData, type Client } from "@gradio/client";
 	import ClearImage from "./ClearImage.svelte";
 	import { SelectSource } from "@gradio/atoms";
 	import Image from "./Image.svelte";
+	import type { Base64File } from "./types";
 
-	export let value: null | FileData;
+	export let value: null | FileData | Base64File = null;
 	export let label: string | undefined = undefined;
 	export let show_label: boolean;
 
@@ -28,14 +33,21 @@
 	export let max_file_size: number | null = null;
 	export let upload: Client["upload"];
 	export let stream_handler: Client["stream"];
+	export let stream_every: number;
+
+	export let modify_stream: (state: "open" | "closed" | "waiting") => void;
+	export let set_time_limit: (arg0: number) => void;
 
 	let upload_input: Upload;
-	let uploading = false;
+	export let uploading = false;
 	export let active_source: source_type = null;
 
 	function handle_upload({ detail }: CustomEvent<FileData>): void {
-		value = detail;
-		dispatch("upload");
+		// only trigger streaming event if streaming
+		if (!streaming) {
+			value = detail;
+			dispatch("upload");
+		}
 	}
 
 	function handle_clear(): void {
@@ -44,17 +56,27 @@
 		dispatch("change", null);
 	}
 
-	async function handle_save(img_blob: Blob | any): Promise<void> {
+	async function handle_save(
+		img_blob: Blob | any,
+		event: "change" | "stream" | "upload"
+	): Promise<void> {
+		if (event === "stream") {
+			dispatch("stream", {
+				value: { url: img_blob } as Base64File,
+				is_value_data: true
+			});
+			return;
+		}
 		pending = true;
 		const f = await upload_input.load_files([
-			new File([img_blob], `webcam.png`)
+			new File([img_blob], `image/${streaming ? "jpeg" : "png"}`)
 		]);
 
-		value = f?.[0] || null;
-
-		await tick();
-
-		dispatch(streaming ? "stream" : "change");
+		if (event === "change" || event === "upload") {
+			value = f?.[0] || null;
+			await tick();
+			dispatch("change");
+		}
 		pending = false;
 	}
 
@@ -63,11 +85,12 @@
 
 	const dispatch = createEventDispatcher<{
 		change?: never;
-		stream?: never;
+		stream: ValueData;
 		clear?: never;
 		drag: boolean;
 		upload?: never;
 		select: SelectData;
+		end_stream: never;
 	}>();
 
 	export let dragging = false;
@@ -135,17 +158,22 @@
 		{#if active_source === "webcam" && (streaming || (!streaming && !value))}
 			<Webcam
 				{root}
-				on:capture={(e) => handle_save(e.detail)}
-				on:stream={(e) => handle_save(e.detail)}
+				{value}
+				on:capture={(e) => handle_save(e.detail, "change")}
+				on:stream={(e) => handle_save(e.detail, "stream")}
 				on:error
 				on:drag
-				on:upload={(e) => handle_save(e.detail)}
+				on:upload={(e) => handle_save(e.detail, "upload")}
+				on:close_stream
 				{mirror_webcam}
+				{stream_every}
 				{streaming}
 				mode="image"
 				include_audio={false}
 				{i18n}
 				{upload}
+				bind:modify_stream
+				bind:set_time_limit
 			/>
 		{:else if value !== null && !streaming}
 			<!-- svelte-ignore a11y-click-events-have-key-events-->
diff --git a/js/image/shared/Webcam.svelte b/js/image/shared/Webcam.svelte
index 9c218751d5b31..cd8b509335be1 100644
--- a/js/image/shared/Webcam.svelte
+++ b/js/image/shared/Webcam.svelte
@@ -1,7 +1,14 @@
 <script lang="ts">
 	import { createEventDispatcher, onMount } from "svelte";
-	import { Camera, Circle, Square, DropdownArrow } from "@gradio/icons";
+	import {
+		Camera,
+		Circle,
+		Square,
+		DropdownArrow,
+		Spinner
+	} from "@gradio/icons";
 	import type { I18nFormatter } from "@gradio/utils";
+	import { StreamingBar } from "@gradio/statustracker";
 	import { type FileData, type Client, prepare_files } from "@gradio/client";
 	import WebcamPermissions from "./WebcamPermissions.svelte";
 	import { fade } from "svelte/transition";
@@ -10,31 +17,64 @@
 		get_video_stream,
 		set_available_devices
 	} from "./stream_utils";
+	import type { Base64File } from "./types";
 
 	let video_source: HTMLVideoElement;
 	let available_video_devices: MediaDeviceInfo[] = [];
 	let selected_device: MediaDeviceInfo | null = null;
+	let time_limit: number | null = null;
+	let stream_state: "open" | "waiting" | "closed" = "closed";
+
+	export const modify_stream: (state: "open" | "closed" | "waiting") => void = (
+		state: "open" | "closed" | "waiting"
+	) => {
+		if (state === "closed") {
+			time_limit = null;
+			stream_state = "closed";
+			value = null;
+		} else if (state === "waiting") {
+			stream_state = "waiting";
+		} else {
+			stream_state = "open";
+		}
+	};
+
+	export const set_time_limit = (time: number): void => {
+		if (recording) time_limit = time;
+	};
 
 	let canvas: HTMLCanvasElement;
 	export let streaming = false;
 	export let pending = false;
 	export let root = "";
+	export let stream_every = 1;
 
 	export let mode: "image" | "video" = "image";
 	export let mirror_webcam: boolean;
 	export let include_audio: boolean;
 	export let i18n: I18nFormatter;
 	export let upload: Client["upload"];
+	export let value: FileData | null | Base64File = null;
 
 	const dispatch = createEventDispatcher<{
-		stream: undefined;
+		stream: Blob | string;
 		capture: FileData | Blob | null;
 		error: string;
 		start_recording: undefined;
 		stop_recording: undefined;
+		close_stream: undefined;
 	}>();
 
-	onMount(() => (canvas = document.createElement("canvas")));
+	onMount(() => {
+		canvas = document.createElement("canvas");
+		if (streaming && mode === "image") {
+			window.setInterval(() => {
+				if (video_source && !pending) {
+					take_picture();
+				}
+			}, stream_every * 1000);
+		}
+	});
 
 	const handle_device_change = async (event: InputEvent): Promise<void> => {
 		const target = event.target as HTMLInputElement;
@@ -108,11 +148,20 @@
 				context.drawImage(video_source, -video_source.videoWidth, 0);
 			}
 
+			if (streaming && (!recording || stream_state === "waiting")) {
+				return;
+			}
+			if (streaming) {
+				const image_data = canvas.toDataURL("image/jpeg");
+				dispatch("stream", image_data);
+				return;
+			}
+
 			canvas.toBlob(
 				(blob) => {
 					dispatch(streaming ? "stream" : "capture", blob);
 				},
-				"image/png",
+				`image/${streaming ? "jpeg" : "png"}`,
 				0.8
 			);
 		}
@@ -136,10 +185,10 @@
 						"sample." + mimeType.substring(6)
 					);
 					const val = await prepare_files([_video_blob]);
-					let value = (
+					let val_ = (
 						(await upload(val, root))?.filter(Boolean) as FileData[]
 					)[0];
-					dispatch("capture", value);
+					dispatch("capture", val_);
 					dispatch("stop_recording");
 				}
 			};
@@ -181,20 +230,17 @@
 			take_recording();
 		}
 		if (!recording && stream) {
+			dispatch("close_stream");
 			stream.getTracks().forEach((track) => track.stop());
 			video_source.srcObject = null;
 			webcam_accessed = false;
+			window.setTimeout(() => {
+				value = null;
+			}, 500);
+			value = null;
 		}
 	}
 
-	if (streaming && mode === "image") {
-		window.setInterval(() => {
-			if (video_source && !pending) {
-				take_picture();
-			}
-		}, 500);
-	}
-
 	let options_open = false;
 
 	export function click_outside(node: Node, cb: any): any {
@@ -225,12 +271,18 @@
 </script>
 
 <div class="wrap">
+	<StreamingBar {time_limit} />
 	<!-- svelte-ignore a11y-media-has-caption -->
 	<!-- need to suppress for video streaming https://github.com/sveltejs/svelte/issues/5967 -->
 	<video
 		bind:this={video_source}
 		class:flip={mirror_webcam}
-		class:hide={!webcam_accessed}
+		class:hide={!webcam_accessed || (webcam_accessed && !!value)}
+	/>
+	<!-- svelte-ignore a11y-missing-attribute -->
+	<img
+		src={value?.url}
+		class:hide={!webcam_accessed || (webcam_accessed && !value)}
 	/>
 	{#if !webcam_accessed}
 		<div
@@ -247,13 +299,26 @@
 				aria-label={mode === "image" ? "capture photo" : "start recording"}
 			>
 				{#if mode === "video" || streaming}
-					{#if recording}
-						<div class="icon red" title="stop recording">
-							<Square />
+					{#if streaming && stream_state === "waiting"}
+						<div class="icon-with-text" style="width:var(--size-24);">
+							<div class="icon color-primary" title="spinner">
+								<Spinner />
+							</div>
+							{i18n("audio.waiting")}
+						</div>
+					{:else if (streaming && stream_state === "open") || (!streaming && recording)}
+						<div class="icon-with-text">
+							<div class="icon color-primary" title="stop recording">
+								<Square />
+							</div>
+							{i18n("audio.stop")}
 						</div>
 					{:else}
-						<div class="icon red" title="start recording">
-							<Circle />
+						<div class="icon-with-text">
+							<div class="icon color-primary" title="start recording">
+								<Circle />
+							</div>
+							{i18n("audio.record")}
 						</div>
 					{/if}
 				{:else}
@@ -335,6 +400,14 @@
 		color: var(--button-secondary-text-color);
 	}
 
+	.icon-with-text {
+		width: var(--size-20);
+		align-items: center;
+		margin: 0 var(--spacing-xl);
+		display: flex;
+		justify-content: space-evenly;
+	}
+
 	@media (--screen-md) {
 		button {
 			bottom: var(--size-4);
@@ -348,7 +421,6 @@
 	}
 
 	.icon {
-		opacity: 0.8;
 		width: 18px;
 		height: 18px;
 		display: flex;
@@ -356,9 +428,10 @@
 		align-items: center;
 	}
 
-	.red {
-		fill: red;
-		stroke: red;
+	.color-primary {
+		fill: var(--primary-600);
+		stroke: var(--primary-600);
+		color: var(--primary-600);
 	}
 
 	.flip {
diff --git a/js/image/shared/types.ts b/js/image/shared/types.ts
new file mode 100644
index 0000000000000..67d4f09ad4460
--- /dev/null
+++ b/js/image/shared/types.ts
@@ -0,0 +1,4 @@
+export interface Base64File {
+	url: string;
+	alt_text: string;
+}
diff --git a/js/imageeditor/CHANGELOG.md b/js/imageeditor/CHANGELOG.md
index 39779abb71f1d..c3a46db9a8dfa 100644
--- a/js/imageeditor/CHANGELOG.md
+++ b/js/imageeditor/CHANGELOG.md
@@ -1,5 +1,93 @@
 # @gradio/imageeditor
 
+## 0.11.0-beta.7
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.7
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+- @gradio/image@0.16.0-beta.7
+
+## 0.11.0-beta.6
+
+### Features
+
+- [#9525](https://github.com/gradio-app/gradio/pull/9525) [`7c367b6`](https://github.com/gradio-app/gradio/commit/7c367b6cf0472d478671b7c7476e892b4c61c812) - Fix cut off in gr.ImageEditor.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+- @gradio/client@1.6.0-beta.4
+- @gradio/upload@0.13.0-beta.6
+- @gradio/image@0.16.0-beta.6
+
+## 0.11.0-beta.5
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.5
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+- @gradio/image@0.16.0-beta.5
+
+## 0.11.0-beta.4
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/upload@0.13.0-beta.4
+- @gradio/image@0.16.0-beta.4
+- @gradio/wasm@0.14.0-beta.3
+
+## 0.11.0-beta.3
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.3
+- @gradio/client@1.6.0-beta.3
+- @gradio/image@0.16.0-beta.3
+
+## 0.11.0-beta.2
+
+### Features
+
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+- [#9250](https://github.com/gradio-app/gradio/pull/9250) [`350b0a5`](https://github.com/gradio-app/gradio/commit/350b0a5cafb9176f914f62e7c90de51d4352cc77) - Improve Icon Button consistency.  Thanks @hannahblair!
+- [#9371](https://github.com/gradio-app/gradio/pull/9371) [`7bf3e99`](https://github.com/gradio-app/gradio/commit/7bf3e9989392b7edcdc18c1d840fb8130b15040e) - Fix `gr.ImageEditor` toolbar cutoff.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/upload@0.13.0-beta.2
+- @gradio/wasm@0.14.0-beta.2
+- @gradio/client@1.6.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+- @gradio/image@0.16.0-beta.2
+
+## 0.11.0-beta.1
+
+### Features
+
+- [#9201](https://github.com/gradio-app/gradio/pull/9201) [`5492e74`](https://github.com/gradio-app/gradio/commit/5492e742b1f1fa618208cce523f50ad22a6e86f1) - Move buttons from chat_interface into Chatbot.  Thanks @freddyaboulton!
+- [#9187](https://github.com/gradio-app/gradio/pull/9187) [`5bf00b7`](https://github.com/gradio-app/gradio/commit/5bf00b7524ebf399b48719120a49d15bb21bd65c) - make all component SSR compatible.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/client@1.6.0-beta.1
+- @gradio/image@0.16.0-beta.1
+- @gradio/upload@0.12.4-beta.1
+- @gradio/wasm@0.13.1-beta.1
+
 ## 0.10.1
 
 ### Features
diff --git a/js/imageeditor/ImageEditor.stories.svelte b/js/imageeditor/ImageEditor.stories.svelte
index 0d0a528eddd6b..7a6fed1ec1823 100644
--- a/js/imageeditor/ImageEditor.stories.svelte
+++ b/js/imageeditor/ImageEditor.stories.svelte
@@ -54,7 +54,7 @@
 	}}
 />
 
-<Story
+<!-- <Story
 	name="Image Editor Drawing Interactions"
 	args={{
 		value: {
@@ -203,7 +203,7 @@
 
 		await userEvent.click(canvas.getByLabelText("Clear canvas"));
 	}}
-/>
+/> -->
 
 <Story
 	name="Image Editor Undo/Redo Interactions"
diff --git a/js/imageeditor/Index.svelte b/js/imageeditor/Index.svelte
index 9f78fa3614e81..b4c8851e7dda6 100644
--- a/js/imageeditor/Index.svelte
+++ b/js/imageeditor/Index.svelte
@@ -29,7 +29,7 @@
 	export let root: string;
 	export let value_is_output = false;
 
-	export let height: number | undefined = 400;
+	export let height: number | undefined = 450;
 	export let width: number | undefined;
 
 	export let _selectable = false;
@@ -91,7 +91,9 @@
 
 	$: value && handle_change();
 	const is_browser = typeof window !== "undefined";
-	const raf = is_browser ? window.requestAnimationFrame : () => {};
+	const raf = is_browser
+		? window.requestAnimationFrame
+		: (cb: (...args: any[]) => void) => cb();
 
 	function wait_for_next_frame(): Promise<void> {
 		return new Promise((resolve) => {
@@ -216,8 +218,8 @@
 			accept_blobs={server.accept_blobs}
 			{layers}
 			status={loading_status?.status}
-			upload={gradio.client.upload}
-			stream_handler={gradio.client.stream}
+			upload={(...args) => gradio.client.upload(...args)}
+			stream_handler={(...args) => gradio.client.stream(...args)}
 			{placeholder}
 		></InteractiveImageEditor>
 	</Block>
diff --git a/js/imageeditor/package.json b/js/imageeditor/package.json
index 99e643a15a9a6..4bc22a83e02ce 100644
--- a/js/imageeditor/package.json
+++ b/js/imageeditor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/imageeditor",
-	"version": "0.10.1",
+	"version": "0.11.0-beta.7",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/imageeditor/shared/Controls.svelte b/js/imageeditor/shared/Controls.svelte
index ec92e372f36e9..2bd8f4934f0c0 100644
--- a/js/imageeditor/shared/Controls.svelte
+++ b/js/imageeditor/shared/Controls.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
-	import { IconButton } from "@gradio/atoms";
-	import { Clear, Undo, Redo, Check, Trash } from "@gradio/icons";
+	import { IconButton, IconButtonWrapper } from "@gradio/atoms";
+	import { Undo, Redo, Check, Trash } from "@gradio/icons";
 
 	/**
 	 * Can the current image be undone?
@@ -35,66 +35,44 @@
 	}>();
 </script>
 
-<div class="controls-wrap">
-	<div class="row-wrap">
-		<IconButton
-			disabled={!can_undo}
-			Icon={Undo}
-			label="Undo"
-			on:click={(event) => {
-				dispatch("undo");
-				event.stopPropagation();
-			}}
-		/>
-		<IconButton
-			disabled={!can_redo}
-			Icon={Redo}
-			label="Redo"
-			on:click={(event) => {
-				dispatch("redo");
-				event.stopPropagation();
-			}}
-		/>
+<IconButtonWrapper>
+	{#if changeable}
 		<IconButton
-			Icon={Trash}
-			label="Clear canvas"
+			disabled={!can_save}
+			Icon={Check}
+			label="Save changes"
 			on:click={(event) => {
-				dispatch("remove_image");
+				dispatch("save");
 				event.stopPropagation();
 			}}
+			background={"var(--color-green-500)"}
+			color={"#fff"}
 		/>
-	</div>
-	{#if changeable}
-		<div class="row-wrap save">
-			<IconButton
-				disabled={!can_save}
-				Icon={Check}
-				label="Save changes"
-				on:click={(event) => {
-					dispatch("save");
-					event.stopPropagation();
-				}}
-				background={"var(--color-green-500)"}
-				color={"#fff"}
-			/>
-		</div>
 	{/if}
-</div>
-
-<style>
-	.controls-wrap {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-lg);
-		position: absolute;
-		top: var(--size-2);
-		right: var(--size-2);
-	}
-	.row-wrap {
-		display: flex;
-
-		justify-content: flex-end;
-		gap: var(--spacing-sm);
-		z-index: var(--layer-5);
-	}
-</style>
+	<IconButton
+		disabled={!can_undo}
+		Icon={Undo}
+		label="Undo"
+		on:click={(event) => {
+			dispatch("undo");
+			event.stopPropagation();
+		}}
+	/>
+	<IconButton
+		disabled={!can_redo}
+		Icon={Redo}
+		label="Redo"
+		on:click={(event) => {
+			dispatch("redo");
+			event.stopPropagation();
+		}}
+	/>
+	<IconButton
+		Icon={Trash}
+		label="Clear canvas"
+		on:click={(event) => {
+			dispatch("remove_image");
+			event.stopPropagation();
+		}}
+	/>
+</IconButtonWrapper>
diff --git a/js/imageeditor/shared/ImageEditor.svelte b/js/imageeditor/shared/ImageEditor.svelte
index 371464a453934..fcce62f787fe0 100644
--- a/js/imageeditor/shared/ImageEditor.svelte
+++ b/js/imageeditor/shared/ImageEditor.svelte
@@ -279,6 +279,9 @@
 			set_tool("bg");
 		}
 		dispatch("clear");
+
+		let _size = (canvas_size ? canvas_size : crop_size) || [800, 600];
+		editor_context.reset(true, _size);
 	}
 
 	onMount(() => {
@@ -349,29 +352,26 @@
 		on:remove_image={handle_remove}
 		on:save={handle_save}
 	/>
-	<div class="wrap" bind:this={canvas_wrap}>
+	<div class="container">
+		<div class="wrap" bind:this={canvas_wrap}>
+			<div bind:this={pixi_target} class="stage-wrap" class:bg={!bg}></div>
+		</div>
+		<div class="tools-wrap">
+			<slot />
+		</div>
 		<div
-			bind:this={pixi_target}
-			class="stage-wrap"
-			class:bg={!bg}
-			style:transform="translate({$position_spring.x}px, {$position_spring.y}px)"
+			class="canvas"
+			class:no-border={!bg && $active_tool === "bg" && !history}
+			style:width="{$crop[2] * $editor_box.child_width + 1}px"
+			style:height="{$crop[3] * $editor_box.child_height + 1}px"
+			style:top="{$crop[1] * $editor_box.child_height +
+				($editor_box.child_top - $editor_box.parent_top) -
+				0.5}px"
+			style:left="{$crop[0] * $editor_box.child_width +
+				($editor_box.child_left - $editor_box.parent_left) -
+				0.5}px"
 		></div>
 	</div>
-	<div class="tools-wrap">
-		<slot />
-	</div>
-	<div
-		class="canvas"
-		class:no-border={!bg && $active_tool === "bg" && !history}
-		style:width="{$crop[2] * $editor_box.child_width + 1}px"
-		style:height="{$crop[3] * $editor_box.child_height + 1}px"
-		style:top="{$crop[1] * $editor_box.child_height +
-			($editor_box.child_top - $editor_box.parent_top) -
-			0.5}px"
-		style:left="{$crop[0] * $editor_box.child_width +
-			($editor_box.child_left - $editor_box.parent_left) -
-			0.5}px"
-	></div>
 </div>
 
 <style>
@@ -381,7 +381,6 @@
 		height: 100%;
 		position: relative;
 		justify-content: center;
-		align-items: flex-start;
 	}
 	.canvas {
 		position: absolute;
@@ -390,15 +389,21 @@
 		border-radius: var(--radius-md);
 	}
 
+	.container {
+		position: relative;
+		margin: var(--spacing-md);
+	}
+
 	.no-border {
 		border: none;
 	}
 
 	.stage-wrap {
-		margin: var(--size-8);
 		margin-bottom: var(--size-1);
 		border-radius: var(--radius-md);
 		overflow: hidden;
+		height: fit-content;
+		width: auto;
 	}
 
 	.tools-wrap {
@@ -409,6 +414,8 @@
 		border: 1px solid var(--block-border-color);
 		border-radius: var(--radius-sm);
 		margin: var(--spacing-xxl) 0 var(--spacing-xxl) 0;
+		width: fit-content;
+		margin: 0 auto;
 	}
 
 	.image-container {
diff --git a/js/imageeditor/shared/InteractiveImageEditor.svelte b/js/imageeditor/shared/InteractiveImageEditor.svelte
index a54ef6216ec80..634730b021761 100644
--- a/js/imageeditor/shared/InteractiveImageEditor.svelte
+++ b/js/imageeditor/shared/InteractiveImageEditor.svelte
@@ -44,14 +44,19 @@
 	export let transforms: "crop"[] = ["crop"];
 	export let layers: boolean;
 	export let accept_blobs: (a: any) => void;
-	export let status: "pending" | "complete" | "error" = "complete";
+	export let status:
+		| "pending"
+		| "complete"
+		| "error"
+		| "generating"
+		| "streaming" = "complete";
 	export let canvas_size: [number, number] | undefined;
 	export let realtime: boolean;
 	export let upload: Client["upload"];
 	export let stream_handler: Client["stream"];
 	export let dragging: boolean;
 	export let placeholder: string | undefined = undefined;
-	export let height = 400;
+	export let height = 450;
 
 	const dispatch = createEventDispatcher<{
 		clear?: never;
diff --git a/js/imageeditor/shared/tools/IconButton.svelte b/js/imageeditor/shared/tools/IconButton.svelte
new file mode 100644
index 0000000000000..3eb370d5375aa
--- /dev/null
+++ b/js/imageeditor/shared/tools/IconButton.svelte
@@ -0,0 +1,133 @@
+<script lang="ts">
+	import { type ComponentType } from "svelte";
+	export let Icon: ComponentType;
+	export let label = "";
+	export let show_label = false;
+	export let pending = false;
+	export let size: "small" | "large" | "medium" = "small";
+	export let padded = true;
+	export let highlight = false;
+	export let disabled = false;
+	export let hasPopup = false;
+	export let color = "var(--block-label-text-color)";
+	export let transparent = false;
+	export let background = "var(--background-fill-primary)";
+	export let offset = 0;
+	$: _color = highlight ? "var(--color-accent)" : color;
+</script>
+
+<button
+	{disabled}
+	on:click
+	aria-label={label}
+	aria-haspopup={hasPopup}
+	title={label}
+	class:pending
+	class:padded
+	class:highlight
+	class:transparent
+	style:color={!disabled && _color ? _color : "var(--block-label-text-color)"}
+	style:--bg-color={!disabled ? background : "auto"}
+	style:margin-left={offset + "px"}
+>
+	{#if show_label}<span>{label}</span>{/if}
+	<div
+		class:small={size === "small"}
+		class:large={size === "large"}
+		class:medium={size === "medium"}
+	>
+		<Icon />
+	</div>
+</button>
+
+<style>
+	button {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: 1px;
+		z-index: var(--layer-2);
+		/* background: var(--background-fill-primary); */
+		border-radius: var(--radius-sm);
+		color: var(--block-label-text-color);
+		border: 1px solid transparent;
+	}
+
+	button[disabled] {
+		opacity: 0.5;
+		box-shadow: none;
+	}
+
+	button[disabled]:hover {
+		cursor: not-allowed;
+		/* border: 1px solid var(--button-secondary-border-color); */
+		/* padding: 2px; */
+	}
+
+	.padded {
+		padding: 2px;
+		background: var(--bg-color);
+		box-shadow: var(--shadow-drop);
+		border: 1px solid var(--button-secondary-border-color);
+	}
+
+	button:hover,
+	button.highlight {
+		cursor: pointer;
+		color: var(--color-accent);
+	}
+
+	.padded:hover {
+		border: 2px solid var(--button-secondary-border-color-hover);
+		padding: 1px;
+		color: var(--block-label-text-color);
+	}
+
+	span {
+		padding: 0px 1px;
+		font-size: 10px;
+	}
+
+	div {
+		padding: 2px;
+		display: flex;
+		align-items: flex-end;
+	}
+
+	.small {
+		width: 14px;
+		height: 14px;
+	}
+
+	.medium {
+		width: 20px;
+		height: 20px;
+	}
+
+	.large {
+		width: 22px;
+		height: 22px;
+	}
+
+	.pending {
+		animation: flash 0.5s infinite;
+	}
+
+	@keyframes flash {
+		0% {
+			opacity: 0.5;
+		}
+		50% {
+			opacity: 1;
+		}
+		100% {
+			opacity: 0.5;
+		}
+	}
+
+	.transparent {
+		background: transparent;
+		border: none;
+		box-shadow: none;
+	}
+</style>
diff --git a/js/imageeditor/shared/tools/Sources.svelte b/js/imageeditor/shared/tools/Sources.svelte
index 7d32c0195fabd..648d82fe0c509 100644
--- a/js/imageeditor/shared/tools/Sources.svelte
+++ b/js/imageeditor/shared/tools/Sources.svelte
@@ -10,7 +10,7 @@
 	import { Upload } from "@gradio/upload";
 	import { Webcam } from "@gradio/image";
 	import { type I18nFormatter } from "@gradio/utils";
-	import { IconButton } from "@gradio/atoms";
+	import { default as IconButton } from "./IconButton.svelte";
 	import { type Client } from "@gradio/client";
 
 	import { add_bg_color, add_bg_image } from "./sources";
diff --git a/js/imageeditor/shared/tools/Tools.svelte b/js/imageeditor/shared/tools/Tools.svelte
index 9faf031665819..3b8cd2a35dbe0 100644
--- a/js/imageeditor/shared/tools/Tools.svelte
+++ b/js/imageeditor/shared/tools/Tools.svelte
@@ -43,7 +43,8 @@
 </script>
 
 <script lang="ts">
-	import { Toolbar, IconButton } from "@gradio/atoms";
+	import { Toolbar } from "@gradio/atoms";
+	import { default as IconButton } from "./IconButton.svelte";
 	import { getContext, setContext } from "svelte";
 	import { writable } from "svelte/store";
 	import { EDITOR_KEY, type EditorContext } from "../ImageEditor.svelte";
diff --git a/js/json/CHANGELOG.md b/js/json/CHANGELOG.md
index c86e17a741aae..7655d9d14aa31 100644
--- a/js/json/CHANGELOG.md
+++ b/js/json/CHANGELOG.md
@@ -1,5 +1,57 @@
 # @gradio/json
 
+## 0.5.0-beta.5
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.5.0-beta.4
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+
+## 0.5.0-beta.3
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.5.0-beta.2
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+
+## 0.5.0-beta.2
+
+### Features
+
+- [#9313](https://github.com/gradio-app/gradio/pull/9313) [`1fef9d9`](https://github.com/gradio-app/gradio/commit/1fef9d9a26f0ebce4de18c486702661f6539b1c6) - Standardize `height` across components and add `max_height` and `min_height` parameters where appropriate.  Thanks @abidlabs!
+- [#9250](https://github.com/gradio-app/gradio/pull/9250) [`350b0a5`](https://github.com/gradio-app/gradio/commit/350b0a5cafb9176f914f62e7c90de51d4352cc77) - Improve Icon Button consistency.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.4.1-beta.1
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+
 ## 0.5.0
 
 ### Features
diff --git a/js/json/Index.svelte b/js/json/Index.svelte
index adfecb9c825c1..9406b8c763a76 100644
--- a/js/json/Index.svelte
+++ b/js/json/Index.svelte
@@ -29,7 +29,9 @@
 	export let open = false;
 	export let theme_mode: "system" | "light" | "dark";
 	export let show_indices: boolean;
-	export let height: string | number | undefined = undefined;
+	export let height: number | string | undefined;
+	export let min_height: number | string | undefined;
+	export let max_height: number | string | undefined;
 
 	$: {
 		if (value !== old_value) {
@@ -50,8 +52,11 @@
 	{scale}
 	{min_width}
 	padding={false}
-	allow_overflow={false}
+	allow_overflow={true}
+	overflow_behavior="auto"
 	{height}
+	{min_height}
+	{max_height}
 >
 	<div bind:clientHeight={label_height}>
 		{#if label}
diff --git a/js/json/package.json b/js/json/package.json
index eec772bdbcd65..e65b360bce2c6 100644
--- a/js/json/package.json
+++ b/js/json/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/json",
-	"version": "0.5.0",
+	"version": "0.5.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/json/shared/JSON.svelte b/js/json/shared/JSON.svelte
index b50db93aa5ecd..9bc7d130d9d72 100644
--- a/js/json/shared/JSON.svelte
+++ b/js/json/shared/JSON.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onDestroy } from "svelte";
 	import { JSON as JSONIcon } from "@gradio/icons";
-	import { Empty } from "@gradio/atoms";
+	import { Empty, IconButtonWrapper, IconButton } from "@gradio/atoms";
 	import JSONNode from "./JSONNode.svelte";
 	import { Copy, Check } from "@gradio/icons";
 
@@ -46,19 +46,14 @@
 </script>
 
 {#if value && value !== '""' && !is_empty(value)}
-	<button
-		on:click={handle_copy}
-		title="copy"
-		class={copied ? "copied" : "copy-text"}
-		aria-roledescription={copied ? "Copied value" : "Copy value"}
-		aria-label={copied ? "Copied" : "Copy"}
-	>
-		{#if copied}
-			<Check />
-		{:else}
-			<Copy />
-		{/if}
-	</button>
+	<IconButtonWrapper>
+		<IconButton
+			show_label={false}
+			label={copied ? "Copied" : "Copy"}
+			Icon={copied ? Check : Copy}
+			on:click={() => handle_copy()}
+		/>
+	</IconButtonWrapper>
 	<div class="json-holder" style:max-height={json_max_height}>
 		<JSONNode
 			{value}
@@ -101,24 +96,4 @@
 		min-height: calc(var(--size-32) - 20px);
 		height: 100%;
 	}
-	button {
-		display: flex;
-		position: absolute;
-		top: var(--block-label-margin);
-		right: var(--block-label-margin);
-		align-items: center;
-		box-shadow: var(--shadow-drop);
-		border: 1px solid var(--border-color-primary);
-		border-top: none;
-		border-right: none;
-		border-radius: var(--block-label-right-radius);
-		background: var(--block-label-background-fill);
-		padding: 5px;
-		width: 22px;
-		height: 22px;
-		overflow: hidden;
-		color: var(--block-label-text-color);
-		font: var(--font);
-		font-size: var(--button-small-text-size);
-	}
 </style>
diff --git a/js/label/CHANGELOG.md b/js/label/CHANGELOG.md
index 43ad90ed961d5..f62de9207da5d 100644
--- a/js/label/CHANGELOG.md
+++ b/js/label/CHANGELOG.md
@@ -1,5 +1,52 @@
 # @gradio/label
 
+## 0.3.13-beta.5
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.3.13-beta.4
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+
+## 0.3.13-beta.3
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.3.13-beta.2
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+
+## 0.3.13-beta.2
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.3.13-beta.1
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+
 ## 0.3.13
 
 ### Fixes
diff --git a/js/label/package.json b/js/label/package.json
index f665bdbfe655f..6fb92e463fe50 100644
--- a/js/label/package.json
+++ b/js/label/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/label",
-	"version": "0.3.13",
+	"version": "0.3.13-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/lite/.gitignore b/js/lite/.gitignore
new file mode 100644
index 0000000000000..385defb4088b0
--- /dev/null
+++ b/js/lite/.gitignore
@@ -0,0 +1 @@
+/src/theme.css
diff --git a/js/lite/CHANGELOG.md b/js/lite/CHANGELOG.md
index db7d0c7c68664..21f6a8c1b91e7 100644
--- a/js/lite/CHANGELOG.md
+++ b/js/lite/CHANGELOG.md
@@ -1,5 +1,77 @@
 # @gradio/lite
 
+## 4.43.0-beta.3
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.5
+- @gradio/core@0.1.0-beta.6
+- @self/build@0.1.0-beta.3
+
+## 4.43.0-beta.3
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.4
+- @gradio/core@0.1.0-beta.5
+
+## 4.43.0-beta.3
+
+### Features
+
+- [#9460](https://github.com/gradio-app/gradio/pull/9460) [`7352a89`](https://github.com/gradio-app/gradio/commit/7352a89722da91461c32fd33588531f3edce9c48) - Playground requirements tab.  Thanks @whitphx!
+
+### Dependency updates
+
+- @gradio/core@0.1.0-beta.4
+- @gradio/atoms@0.9.0-beta.3
+
+## 4.43.0-beta.2
+
+### Dependency updates
+
+- @gradio/wasm@0.14.0-beta.3
+- @gradio/core@0.1.0-beta.4
+
+## 4.43.0-beta.2
+
+### Dependency updates
+
+- @gradio/core@0.1.0-beta.3
+
+## 4.43.0-beta.2
+
+### Dependency updates
+
+- @gradio/core@0.1.0-beta.3
+
+## 4.43.0-beta.2
+
+### Features
+
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+- [#9335](https://github.com/gradio-app/gradio/pull/9335) [`b543465`](https://github.com/gradio-app/gradio/commit/b543465d06d7d1b399c4d0755da05e022611a97f) - Remove lite/theme.css from the Git-managed file tree.  Thanks @whitphx!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/wasm@0.14.0-beta.2
+- @gradio/core@0.1.0-beta.2
+- @self/build@0.1.0-beta.2
+
+## 4.43.0-beta.1
+
+### Features
+
+- [#9204](https://github.com/gradio-app/gradio/pull/9204) [`3c73f00`](https://github.com/gradio-app/gradio/commit/3c73f00e3016b16917ebfe0bad390f2dff683457) - 🔡 Update default core Gradio font.  Thanks @hannahblair!
+- [#9246](https://github.com/gradio-app/gradio/pull/9246) [`38cf712`](https://github.com/gradio-app/gradio/commit/38cf71234bf57fe9da6eea2d32b1d6e7ef35c700) - Stop using `multiprocessing` in `flagging.CSVLogger` on Lite v5.  Thanks @whitphx!
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/wasm@0.13.1-beta.1
+- @gradio/theme@0.3.0-beta.1
+
 ## 4.43.0
 
 ### Fixes
diff --git a/js/lite/examples/transformers_basic/requirements.txt b/js/lite/examples/transformers_basic/requirements.txt
new file mode 100644
index 0000000000000..645e15da18557
--- /dev/null
+++ b/js/lite/examples/transformers_basic/requirements.txt
@@ -0,0 +1 @@
+transformers_js_py
diff --git a/js/lite/examples/transformers_basic/run.py b/js/lite/examples/transformers_basic/run.py
new file mode 100644
index 0000000000000..adeb21b1fa6a0
--- /dev/null
+++ b/js/lite/examples/transformers_basic/run.py
@@ -0,0 +1,11 @@
+import gradio as gr
+from transformers_js_py import pipeline
+
+pipe = await pipeline('sentiment-analysis')
+
+async def process(text):
+    return await pipe(text)
+
+demo = gr.Interface(fn=process, inputs="text", outputs="json")
+
+demo.launch()
diff --git a/js/lite/package.json b/js/lite/package.json
index cbedc31a85cac..0137b86837388 100644
--- a/js/lite/package.json
+++ b/js/lite/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/lite",
-	"version": "4.43.0",
+	"version": "4.43.0-beta.3",
 	"description": "Serverless Gradio",
 	"type": "module",
 	"main": "dist/lite.js",
diff --git a/js/lite/src/LiteIndex.svelte b/js/lite/src/LiteIndex.svelte
index 87b0fcb8f9b3a..13ec67b02308d 100644
--- a/js/lite/src/LiteIndex.svelte
+++ b/js/lite/src/LiteIndex.svelte
@@ -155,8 +155,7 @@
 			{:else}
 				<Index
 					space={null}
-					src={null}
-					host={null}
+					src={`http://${FAKE_LITE_HOST}/`}
 					{info}
 					{container}
 					{is_embed}
@@ -181,8 +180,7 @@
 		{:else}
 			<Index
 				space={null}
-				src={null}
-				host={FAKE_LITE_HOST}
+				src={`http://${FAKE_LITE_HOST}/`}
 				{info}
 				{container}
 				{is_embed}
diff --git a/js/lite/src/dev/App.svelte b/js/lite/src/dev/App.svelte
index f113a7159f90c..8c82dd151ca23 100644
--- a/js/lite/src/dev/App.svelte
+++ b/js/lite/src/dev/App.svelte
@@ -13,22 +13,20 @@
 	let editorFiles: EditorFile[] = [
 		{
 			name: "app.py",
-			content: `import time
+			content: `
 import gradio as gr
 
 
-def greet_with_time():
-    return "Time is " + time.ctime()
-
-
-with gr.Blocks() as demo:
-    text = gr.Markdown(f"Time is {time.time()}")
-
-    dep = demo.load(greet_with_time, None, text, every=1)
+def fn(x):
+    return x
 
+demo = gr.Interface(
+    fn=fn,
+    inputs=gr.Textbox(),
+    outputs=gr.Textbox(),
+)
 
-if __name__ == "__main__":
-    demo.queue().launch()
+demo.launch()
 `
 		},
 		{
diff --git a/js/lite/src/theme.css b/js/lite/src/theme.css
deleted file mode 100644
index 19e647060cfcc..0000000000000
--- a/js/lite/src/theme.css
+++ /dev/null
@@ -1,424 +0,0 @@
-:root {
-  --name: default;
-  --primary-50: #fff7ed;
-  --primary-100: #ffedd5;
-  --primary-200: #fed7aa;
-  --primary-300: #fdba74;
-  --primary-400: #fb923c;
-  --primary-500: #f97316;
-  --primary-600: #ea580c;
-  --primary-700: #c2410c;
-  --primary-800: #9a3412;
-  --primary-900: #7c2d12;
-  --primary-950: #6c2e12;
-  --secondary-50: #eff6ff;
-  --secondary-100: #dbeafe;
-  --secondary-200: #bfdbfe;
-  --secondary-300: #93c5fd;
-  --secondary-400: #60a5fa;
-  --secondary-500: #3b82f6;
-  --secondary-600: #2563eb;
-  --secondary-700: #1d4ed8;
-  --secondary-800: #1e40af;
-  --secondary-900: #1e3a8a;
-  --secondary-950: #1d3660;
-  --neutral-50: #f9fafb;
-  --neutral-100: #f3f4f6;
-  --neutral-200: #e5e7eb;
-  --neutral-300: #d1d5db;
-  --neutral-400: #9ca3af;
-  --neutral-500: #6b7280;
-  --neutral-600: #4b5563;
-  --neutral-700: #374151;
-  --neutral-800: #1f2937;
-  --neutral-900: #111827;
-  --neutral-950: #0b0f19;
-  --spacing-xxs: 1px;
-  --spacing-xs: 2px;
-  --spacing-sm: 4px;
-  --spacing-md: 6px;
-  --spacing-lg: 8px;
-  --spacing-xl: 10px;
-  --spacing-xxl: 16px;
-  --radius-xxs: 1px;
-  --radius-xs: 2px;
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --radius-xl: 12px;
-  --radius-xxl: 22px;
-  --text-xxs: 9px;
-  --text-xs: 10px;
-  --text-sm: 12px;
-  --text-md: 14px;
-  --text-lg: 16px;
-  --text-xl: 22px;
-  --text-xxl: 26px;
-  --font: 'Source Sans Pro', 'ui-sans-serif', 'system-ui', sans-serif;
-  --font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
-  --body-background-fill: var(--background-fill-primary);
-  --body-text-color: var(--neutral-800);
-  --body-text-size: var(--text-md);
-  --body-text-weight: 400;
-  --embed-radius: var(--radius-lg);
-  --color-accent: var(--primary-500);
-  --color-accent-soft: var(--primary-50);
-  --background-fill-primary: white;
-  --background-fill-secondary: var(--neutral-50);
-  --border-color-accent: var(--primary-300);
-  --border-color-primary: var(--neutral-200);
-  --link-text-color: var(--secondary-600);
-  --link-text-color-active: var(--secondary-600);
-  --link-text-color-hover: var(--secondary-700);
-  --link-text-color-visited: var(--secondary-500);
-  --body-text-color-subdued: var(--neutral-400);
-  --accordion-text-color: var(--body-text-color);
-  --table-text-color: var(--body-text-color);
-  --shadow-drop: rgba(0,0,0,0.05) 0px 1px 2px 0px;
-  --shadow-drop-lg: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --shadow-inset: rgba(0,0,0,0.05) 0px 2px 4px 0px inset;
-  --shadow-spread: 3px;
-  --block-background-fill: var(--background-fill-primary);
-  --block-border-color: var(--border-color-primary);
-  --block-border-width: 1px;
-  --block-info-text-color: var(--body-text-color-subdued);
-  --block-info-text-size: var(--text-sm);
-  --block-info-text-weight: 400;
-  --block-label-background-fill: var(--background-fill-primary);
-  --block-label-border-color: var(--border-color-primary);
-  --block-label-border-width: 1px;
-  --block-label-shadow: var(--block-shadow);
-  --block-label-text-color: var(--neutral-500);
-  --block-label-margin: 0;
-  --block-label-padding: var(--spacing-sm) var(--spacing-lg);
-  --block-label-radius: calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px) 0;
-  --block-label-right-radius: 0 calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px);
-  --block-label-text-size: var(--text-sm);
-  --block-label-text-weight: 400;
-  --block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
-  --block-radius: var(--radius-lg);
-  --block-shadow: var(--shadow-drop);
-  --block-title-background-fill: none;
-  --block-title-border-color: none;
-  --block-title-border-width: 0px;
-  --block-title-text-color: var(--neutral-500);
-  --block-title-padding: 0;
-  --block-title-radius: none;
-  --block-title-text-size: var(--text-md);
-  --block-title-text-weight: 400;
-  --container-radius: var(--radius-lg);
-  --form-gap-width: 1px;
-  --layout-gap: var(--spacing-xxl);
-  --panel-background-fill: var(--background-fill-secondary);
-  --panel-border-color: var(--border-color-primary);
-  --panel-border-width: 0;
-  --section-header-text-size: var(--text-md);
-  --section-header-text-weight: 400;
-  --border-color-accent-subdued: var(--primary-200);
-  --code-background-fill: var(--neutral-100);
-  --checkbox-background-color: var(--background-fill-primary);
-  --checkbox-background-color-focus: var(--checkbox-background-color);
-  --checkbox-background-color-hover: var(--checkbox-background-color);
-  --checkbox-background-color-selected: var(--secondary-600);
-  --checkbox-border-color: var(--neutral-300);
-  --checkbox-border-color-focus: var(--secondary-500);
-  --checkbox-border-color-hover: var(--neutral-300);
-  --checkbox-border-color-selected: var(--secondary-600);
-  --checkbox-border-radius: var(--radius-sm);
-  --checkbox-border-width: var(--input-border-width);
-  --checkbox-label-background-fill: linear-gradient(to top, var(--neutral-50), white);
-  --checkbox-label-background-fill-hover: linear-gradient(to top, var(--neutral-100), white);
-  --checkbox-label-background-fill-selected: var(--checkbox-label-background-fill);
-  --checkbox-label-border-color: var(--border-color-primary);
-  --checkbox-label-border-color-hover: var(--checkbox-label-border-color);
-  --checkbox-label-border-width: var(--input-border-width);
-  --checkbox-label-gap: var(--spacing-lg);
-  --checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md));
-  --checkbox-label-shadow: var(--shadow-drop);
-  --checkbox-label-text-size: var(--text-md);
-  --checkbox-label-text-weight: 400;
-  --checkbox-check: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
-  --radio-circle: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
-  --checkbox-shadow: var(--input-shadow);
-  --checkbox-label-text-color: var(--body-text-color);
-  --checkbox-label-text-color-selected: var(--checkbox-label-text-color);
-  --error-background-fill: #fef2f2;
-  --error-border-color: #b91c1c;
-  --error-border-width: 1px;
-  --error-text-color: #b91c1c;
-  --error-icon-color: #b91c1c;
-  --input-background-fill: white;
-  --input-background-fill-focus: var(--secondary-500);
-  --input-background-fill-hover: var(--input-background-fill);
-  --input-border-color: var(--border-color-primary);
-  --input-border-color-focus: var(--secondary-300);
-  --input-border-color-hover: var(--input-border-color);
-  --input-border-width: 1px;
-  --input-padding: var(--spacing-xl);
-  --input-placeholder-color: var(--neutral-400);
-  --input-radius: var(--radius-lg);
-  --input-shadow: 0 0 0 var(--shadow-spread) transparent, var(--shadow-inset);
-  --input-shadow-focus: 0 0 0 var(--shadow-spread) var(--secondary-50), var(--shadow-inset);
-  --input-text-size: var(--text-md);
-  --input-text-weight: 400;
-  --loader-color: var(--color-accent);
-  --prose-text-size: var(--text-md);
-  --prose-text-weight: 400;
-  --prose-header-text-weight: 600;
-  --slider-color: #2563eb;
-  --stat-background-fill: linear-gradient(to right, var(--primary-400), var(--primary-200));
-  --table-border-color: var(--neutral-300);
-  --table-even-background-fill: white;
-  --table-odd-background-fill: var(--neutral-50);
-  --table-radius: var(--radius-lg);
-  --table-row-focus: var(--color-accent-soft);
-  --button-border-width: var(--input-border-width);
-  --button-cancel-background-fill: linear-gradient(to bottom right, #fee2e2, #fecaca);
-  --button-cancel-background-fill-hover: linear-gradient(to bottom right, #fee2e2, #fee2e2);
-  --button-cancel-border-color: #fecaca;
-  --button-cancel-border-color-hover: var(--button-cancel-border-color);
-  --button-cancel-text-color: #dc2626;
-  --button-cancel-text-color-hover: var(--button-cancel-text-color);
-  --button-large-padding: var(--spacing-lg) calc(2 * var(--spacing-lg));
-  --button-large-radius: var(--radius-lg);
-  --button-large-text-size: var(--text-lg);
-  --button-large-text-weight: 600;
-  --button-primary-background-fill: linear-gradient(to bottom right, var(--primary-100), var(--primary-300));
-  --button-primary-background-fill-hover: linear-gradient(to bottom right, var(--primary-100), var(--primary-200));
-  --button-primary-border-color: var(--primary-200);
-  --button-primary-border-color-hover: var(--button-primary-border-color);
-  --button-primary-text-color: var(--primary-600);
-  --button-primary-text-color-hover: var(--button-primary-text-color);
-  --button-secondary-background-fill: linear-gradient(to bottom right, var(--neutral-100), var(--neutral-200));
-  --button-secondary-background-fill-hover: linear-gradient(to bottom right, var(--neutral-100), var(--neutral-100));
-  --button-secondary-border-color: var(--neutral-200);
-  --button-secondary-border-color-hover: var(--button-secondary-border-color);
-  --button-secondary-text-color: var(--neutral-700);
-  --button-secondary-text-color-hover: var(--button-secondary-text-color);
-  --button-shadow: var(--shadow-drop);
-  --button-shadow-active: var(--shadow-inset);
-  --button-shadow-hover: var(--shadow-drop-lg);
-  --button-small-padding: var(--spacing-sm) calc(2 * var(--spacing-sm));
-  --button-small-radius: var(--radius-lg);
-  --button-small-text-size: var(--text-md);
-  --button-small-text-weight: 400;
-  --button-transition: none;
-}
-.dark {
-  --body-background-fill: var(--background-fill-primary);
-  --body-text-color: var(--neutral-100);
-  --color-accent-soft: var(--neutral-700);
-  --background-fill-primary: var(--neutral-950);
-  --background-fill-secondary: var(--neutral-900);
-  --border-color-accent: var(--neutral-600);
-  --border-color-primary: var(--neutral-700);
-  --link-text-color-active: var(--secondary-500);
-  --link-text-color: var(--secondary-500);
-  --link-text-color-hover: var(--secondary-400);
-  --link-text-color-visited: var(--secondary-600);
-  --body-text-color-subdued: var(--neutral-400);
-  --accordion-text-color: var(--body-text-color);
-  --table-text-color: var(--body-text-color);
-  --shadow-spread: 1px;
-  --block-background-fill: var(--neutral-800);
-  --block-border-color: var(--border-color-primary);
-  --block_border_width: None;
-  --block-info-text-color: var(--body-text-color-subdued);
-  --block-label-background-fill: var(--background-fill-secondary);
-  --block-label-border-color: var(--border-color-primary);
-  --block_label_border_width: None;
-  --block-label-text-color: var(--neutral-200);
-  --block_shadow: None;
-  --block_title_background_fill: None;
-  --block_title_border_color: None;
-  --block_title_border_width: None;
-  --block-title-text-color: var(--neutral-200);
-  --panel-background-fill: var(--background-fill-secondary);
-  --panel-border-color: var(--border-color-primary);
-  --panel_border_width: None;
-  --border-color-accent-subdued: var(--border-color-accent);
-  --code-background-fill: var(--neutral-800);
-  --checkbox-background-color: var(--neutral-800);
-  --checkbox-background-color-focus: var(--checkbox-background-color);
-  --checkbox-background-color-hover: var(--checkbox-background-color);
-  --checkbox-background-color-selected: var(--secondary-600);
-  --checkbox-border-color: var(--neutral-700);
-  --checkbox-border-color-focus: var(--secondary-500);
-  --checkbox-border-color-hover: var(--neutral-600);
-  --checkbox-border-color-selected: var(--secondary-600);
-  --checkbox-border-width: var(--input-border-width);
-  --checkbox-label-background-fill: linear-gradient(to top, var(--neutral-900), var(--neutral-800));
-  --checkbox-label-background-fill-hover: linear-gradient(to top, var(--neutral-900), var(--neutral-800));
-  --checkbox-label-background-fill-selected: var(--checkbox-label-background-fill);
-  --checkbox-label-border-color: var(--border-color-primary);
-  --checkbox-label-border-color-hover: var(--checkbox-label-border-color);
-  --checkbox-label-border-width: var(--input-border-width);
-  --checkbox-label-text-color: var(--body-text-color);
-  --checkbox-label-text-color-selected: var(--checkbox-label-text-color);
-  --error-background-fill: var(--neutral-900);
-  --error-border-color: #ef4444;
-  --error_border_width: None;
-  --error-text-color: #fef2f2;
-  --error-icon-color: #ef4444;
-  --input-background-fill: var(--neutral-800);
-  --input-background-fill-focus: var(--secondary-600);
-  --input-background-fill-hover: var(--input-background-fill);
-  --input-border-color: var(--border-color-primary);
-  --input-border-color-focus: var(--neutral-700);
-  --input-border-color-hover: var(--input-border-color);
-  --input_border_width: None;
-  --input-placeholder-color: var(--neutral-500);
-  --input_shadow: None;
-  --input-shadow-focus: 0 0 0 var(--shadow-spread) var(--neutral-700), var(--shadow-inset);
-  --loader_color: None;
-  --slider_color: None;
-  --stat-background-fill: linear-gradient(to right, var(--primary-400), var(--primary-600));
-  --table-border-color: var(--neutral-700);
-  --table-even-background-fill: var(--neutral-950);
-  --table-odd-background-fill: var(--neutral-900);
-  --table-row-focus: var(--color-accent-soft);
-  --button-border-width: var(--input-border-width);
-  --button-cancel-background-fill: linear-gradient(to bottom right, #dc2626, #b91c1c);
-  --button-cancel-background-fill-hover: linear-gradient(to bottom right, #dc2626, #dc2626);
-  --button-cancel-border-color: #dc2626;
-  --button-cancel-border-color-hover: var(--button-cancel-border-color);
-  --button-cancel-text-color: white;
-  --button-cancel-text-color-hover: var(--button-cancel-text-color);
-  --button-primary-background-fill: linear-gradient(to bottom right, var(--primary-500), var(--primary-600));
-  --button-primary-background-fill-hover: linear-gradient(to bottom right, var(--primary-500), var(--primary-500));
-  --button-primary-border-color: var(--primary-500);
-  --button-primary-border-color-hover: var(--button-primary-border-color);
-  --button-primary-text-color: white;
-  --button-primary-text-color-hover: var(--button-primary-text-color);
-  --button-secondary-background-fill: linear-gradient(to bottom right, var(--neutral-600), var(--neutral-700));
-  --button-secondary-background-fill-hover: linear-gradient(to bottom right, var(--neutral-600), var(--neutral-600));
-  --button-secondary-border-color: var(--neutral-600);
-  --button-secondary-border-color-hover: var(--button-secondary-border-color);
-  --button-secondary-text-color: white;
-  --button-secondary-text-color-hover: var(--button-secondary-text-color);
-  --name: default;
-  --primary-50: #fff7ed;
-  --primary-100: #ffedd5;
-  --primary-200: #fed7aa;
-  --primary-300: #fdba74;
-  --primary-400: #fb923c;
-  --primary-500: #f97316;
-  --primary-600: #ea580c;
-  --primary-700: #c2410c;
-  --primary-800: #9a3412;
-  --primary-900: #7c2d12;
-  --primary-950: #6c2e12;
-  --secondary-50: #eff6ff;
-  --secondary-100: #dbeafe;
-  --secondary-200: #bfdbfe;
-  --secondary-300: #93c5fd;
-  --secondary-400: #60a5fa;
-  --secondary-500: #3b82f6;
-  --secondary-600: #2563eb;
-  --secondary-700: #1d4ed8;
-  --secondary-800: #1e40af;
-  --secondary-900: #1e3a8a;
-  --secondary-950: #1d3660;
-  --neutral-50: #f9fafb;
-  --neutral-100: #f3f4f6;
-  --neutral-200: #e5e7eb;
-  --neutral-300: #d1d5db;
-  --neutral-400: #9ca3af;
-  --neutral-500: #6b7280;
-  --neutral-600: #4b5563;
-  --neutral-700: #374151;
-  --neutral-800: #1f2937;
-  --neutral-900: #111827;
-  --neutral-950: #0b0f19;
-  --spacing-xxs: 1px;
-  --spacing-xs: 2px;
-  --spacing-sm: 4px;
-  --spacing-md: 6px;
-  --spacing-lg: 8px;
-  --spacing-xl: 10px;
-  --spacing-xxl: 16px;
-  --radius-xxs: 1px;
-  --radius-xs: 2px;
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --radius-xl: 12px;
-  --radius-xxl: 22px;
-  --text-xxs: 9px;
-  --text-xs: 10px;
-  --text-sm: 12px;
-  --text-md: 14px;
-  --text-lg: 16px;
-  --text-xl: 22px;
-  --text-xxl: 26px;
-  --font: 'Source Sans Pro', 'ui-sans-serif', 'system-ui', sans-serif;
-  --font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
-  --body-text-size: var(--text-md);
-  --body-text-weight: 400;
-  --embed-radius: var(--radius-lg);
-  --color-accent: var(--primary-500);
-  --shadow-drop: rgba(0,0,0,0.05) 0px 1px 2px 0px;
-  --shadow-drop-lg: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --shadow-inset: rgba(0,0,0,0.05) 0px 2px 4px 0px inset;
-  --block-border-width: 1px;
-  --block-info-text-size: var(--text-sm);
-  --block-info-text-weight: 400;
-  --block-label-border-width: 1px;
-  --block-label-shadow: var(--block-shadow);
-  --block-label-margin: 0;
-  --block-label-padding: var(--spacing-sm) var(--spacing-lg);
-  --block-label-radius: calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px) 0;
-  --block-label-right-radius: 0 calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px);
-  --block-label-text-size: var(--text-sm);
-  --block-label-text-weight: 400;
-  --block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
-  --block-radius: var(--radius-lg);
-  --block-shadow: var(--shadow-drop);
-  --block-title-background-fill: none;
-  --block-title-border-color: none;
-  --block-title-border-width: 0px;
-  --block-title-padding: 0;
-  --block-title-radius: none;
-  --block-title-text-size: var(--text-md);
-  --block-title-text-weight: 400;
-  --container-radius: var(--radius-lg);
-  --form-gap-width: 1px;
-  --layout-gap: var(--spacing-xxl);
-  --panel-border-width: 0;
-  --section-header-text-size: var(--text-md);
-  --section-header-text-weight: 400;
-  --checkbox-border-radius: var(--radius-sm);
-  --checkbox-label-gap: var(--spacing-lg);
-  --checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md));
-  --checkbox-label-shadow: var(--shadow-drop);
-  --checkbox-label-text-size: var(--text-md);
-  --checkbox-label-text-weight: 400;
-  --checkbox-check: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
-  --radio-circle: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
-  --checkbox-shadow: var(--input-shadow);
-  --error-border-width: 1px;
-  --input-border-width: 1px;
-  --input-padding: var(--spacing-xl);
-  --input-radius: var(--radius-lg);
-  --input-shadow: 0 0 0 var(--shadow-spread) transparent, var(--shadow-inset);
-  --input-text-size: var(--text-md);
-  --input-text-weight: 400;
-  --loader-color: var(--color-accent);
-  --prose-text-size: var(--text-md);
-  --prose-text-weight: 400;
-  --prose-header-text-weight: 600;
-  --slider-color: #2563eb;
-  --table-radius: var(--radius-lg);
-  --button-large-padding: var(--spacing-lg) calc(2 * var(--spacing-lg));
-  --button-large-radius: var(--radius-lg);
-  --button-large-text-size: var(--text-lg);
-  --button-large-text-weight: 600;
-  --button-shadow: var(--shadow-drop);
-  --button-shadow-active: var(--shadow-inset);
-  --button-shadow-hover: var(--shadow-drop-lg);
-  --button-small-padding: var(--spacing-sm) calc(2 * var(--spacing-sm));
-  --button-small-radius: var(--radius-lg);
-  --button-small-text-size: var(--text-md);
-  --button-small-text-weight: 400;
-  --button-transition: none;
-}
\ No newline at end of file
diff --git a/js/markdown/CHANGELOG.md b/js/markdown/CHANGELOG.md
index e36a182f6e885..fea109d545a4c 100644
--- a/js/markdown/CHANGELOG.md
+++ b/js/markdown/CHANGELOG.md
@@ -1,11 +1,70 @@
 # @gradio/markdown
 
-## 0.9.4
+## 0.10.0-beta.5
+
+### Features
+
+- [#9598](https://github.com/gradio-app/gradio/pull/9598) [`ffc33fa`](https://github.com/gradio-app/gradio/commit/ffc33facaec1bcc92add5892afb86b7b5ba037d4) - Fix markdown code copy/check button in gr.Chatbot.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.10.0-beta.4
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+
+## 0.10.0-beta.3
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.10.0-beta.2
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+
+## 0.10.0-beta.2
+
+### Features
+
+- [#9313](https://github.com/gradio-app/gradio/pull/9313) [`1fef9d9`](https://github.com/gradio-app/gradio/commit/1fef9d9a26f0ebce4de18c486702661f6539b1c6) - Standardize `height` across components and add `max_height` and `min_height` parameters where appropriate.  Thanks @abidlabs!
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+- [#9356](https://github.com/gradio-app/gradio/pull/9356) [`1daf259`](https://github.com/gradio-app/gradio/commit/1daf259b52d0b1ce16d916ff25a15d322b51ecf5) - Use `container` param in `gr.Markdown`.  Thanks @hannahblair!
+- [#9363](https://github.com/gradio-app/gradio/pull/9363) [`3ad28c7`](https://github.com/gradio-app/gradio/commit/3ad28c7e310e8589e0c53b7efee8031e129bece8) - Prevent HTML and Markdown height changing when status is hidden.  Thanks @hannahblair!
+- [#9260](https://github.com/gradio-app/gradio/pull/9260) [`d47dd1f`](https://github.com/gradio-app/gradio/commit/d47dd1f8417a878ef731d2eeabf60f3069289dee) - Fix overflowing markdown in Chatbot.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.9.4-beta.1
 
 ### Features
 
 - [#9187](https://github.com/gradio-app/gradio/pull/9187) [`5bf00b7`](https://github.com/gradio-app/gradio/commit/5bf00b7524ebf399b48719120a49d15bb21bd65c) - make all component SSR compatible.  Thanks @pngwn!
 
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+
+## 0.9.4
+
 ### Fixes
 
 - [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types.  Thanks @pngwn!
diff --git a/js/markdown/Index.svelte b/js/markdown/Index.svelte
index 48a53060706fa..66a19bfc9693f 100644
--- a/js/markdown/Index.svelte
+++ b/js/markdown/Index.svelte
@@ -31,8 +31,11 @@
 		display: boolean;
 	}[];
 	export let header_links = false;
-	export let height: number | string | undefined = undefined;
+	export let height: number | string | undefined;
+	export let min_height: number | string | undefined;
+	export let max_height: number | string | undefined;
 	export let show_copy_button = false;
+	export let container = false;
 
 	$: label, gradio.dispatch("change");
 </script>
@@ -41,8 +44,12 @@
 	{visible}
 	{elem_id}
 	{elem_classes}
-	container={false}
+	{container}
 	allow_overflow={true}
+	overflow_behavior="auto"
+	{height}
+	{min_height}
+	{max_height}
 >
 	<StatusTracker
 		autoscroll={gradio.autoscroll}
@@ -53,7 +60,6 @@
 	/>
 	<div class:pending={loading_status?.status === "pending"}>
 		<Markdown
-			min_height={loading_status && loading_status.status !== "complete"}
 			{value}
 			{elem_classes}
 			{visible}
@@ -63,9 +69,9 @@
 			{sanitize_html}
 			{line_breaks}
 			{header_links}
-			{height}
 			{show_copy_button}
 			root={gradio.root}
+			{loading_status}
 		/>
 	</div>
 </Block>
diff --git a/js/markdown/Markdown.stories.svelte b/js/markdown/Markdown.stories.svelte
index 3684bdaf46013..97bc7fe1c8398 100644
--- a/js/markdown/Markdown.stories.svelte
+++ b/js/markdown/Markdown.stories.svelte
@@ -86,10 +86,11 @@ in two separate lines.`
 />
 
 <Story
-	name="Markdown with Copy Button"
+	name="Markdown with Copy Button and Container"
 	args={{
 		value:
 			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.",
-		show_copy_button: true
+		show_copy_button: true,
+		container: true
 	}}
 />
diff --git a/js/markdown/package.json b/js/markdown/package.json
index 0bd2c675f4440..c91b1efa3fe98 100644
--- a/js/markdown/package.json
+++ b/js/markdown/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/markdown",
-	"version": "0.9.4",
+	"version": "0.10.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
@@ -29,16 +29,20 @@
 		"@types/dompurify": "^3.0.2",
 		"@types/katex": "^0.16.0",
 		"@types/prismjs": "1.26.4",
+		"amuchina": "^1.0.12",
+		"dom-parser": "^1.1.5",
 		"github-slugger": "^2.0.0",
 		"isomorphic-dompurify": "^2.14.0",
 		"katex": "^0.16.7",
 		"marked": "^12.0.0",
 		"marked-gfm-heading-id": "^3.1.2",
 		"marked-highlight": "^2.0.1",
-		"prismjs": "1.29.0"
+		"prismjs": "1.29.0",
+		"sanitize-html": "^2.13.0"
 	},
 	"devDependencies": {
-		"@gradio/preview": "workspace:^"
+		"@gradio/preview": "workspace:^",
+		"@types/sanitize-html": "^2.13.0"
 	},
 	"peerDependencies": {
 		"svelte": "^4.0.0"
diff --git a/js/markdown/shared/Markdown.svelte b/js/markdown/shared/Markdown.svelte
index ee8d7ed98ab91..08e4abddfa13a 100644
--- a/js/markdown/shared/Markdown.svelte
+++ b/js/markdown/shared/Markdown.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
-	import { copy } from "@gradio/utils";
+	import { copy, css_units } from "@gradio/utils";
 	import { Copy, Check } from "@gradio/icons";
+	import type { LoadingStatus } from "@gradio/statustracker";
+	import { IconButton, IconButtonWrapper } from "@gradio/atoms";
 
 	import MarkdownCode from "./MarkdownCode.svelte";
-	import { fade } from "svelte/transition";
 
 	export let elem_classes: string[] = [];
 	export let visible = true;
 	export let value: string;
-	export let min_height = false;
+	export let min_height: number | string | undefined = undefined;
 	export let rtl = false;
 	export let sanitize_html = true;
 	export let line_breaks = false;
@@ -22,18 +23,13 @@
 	export let height: number | string | undefined = undefined;
 	export let show_copy_button = false;
 	export let root: string;
+	export let loading_status: LoadingStatus | undefined = undefined;
 
 	let copied = false;
 	let timer: NodeJS.Timeout;
 
 	const dispatch = createEventDispatcher<{ change: undefined }>();
 
-	const css_units = (dimension_value: string | number): string => {
-		return typeof dimension_value === "number"
-			? dimension_value + "px"
-			: dimension_value;
-	};
-
 	$: value, dispatch("change");
 
 	async function handle_copy(): Promise<void> {
@@ -53,28 +49,24 @@
 </script>
 
 <div
-	class:min={min_height}
 	class="prose {elem_classes.join(' ')}"
 	class:hide={!visible}
 	data-testid="markdown"
 	dir={rtl ? "rtl" : "ltr"}
 	use:copy
 	style={height ? `max-height: ${css_units(height)}; overflow-y: auto;` : ""}
+	style:min-height={min_height && loading_status?.status !== "pending"
+		? css_units(min_height)
+		: undefined}
 >
 	{#if show_copy_button}
-		{#if copied}
-			<button
-				in:fade={{ duration: 300 }}
-				aria-label="Copied"
-				aria-roledescription="Text copied"><Check /></button
-			>
-		{:else}
-			<button
+		<IconButtonWrapper>
+			<IconButton
+				Icon={copied ? Check : Copy}
 				on:click={handle_copy}
-				aria-label="Copy"
-				aria-roledescription="Copy text"><Copy /></button
-			>
-		{/if}
+				label={copied ? "Copied conversation" : "Copy conversation"}
+			></IconButton>
+		</IconButtonWrapper>
 	{/if}
 	<MarkdownCode
 		message={value}
@@ -105,31 +97,7 @@
 		max-width: 100%;
 	}
 
-	.min {
-		min-height: var(--size-24);
-	}
 	.hide {
 		display: none;
 	}
-
-	button {
-		display: flex;
-		position: absolute;
-		top: -10px;
-		right: -10px;
-		align-items: center;
-		box-shadow: var(--shadow-drop);
-		border: 1px solid var(--color-border-primary);
-		border-top: none;
-		border-right: none;
-		border-radius: var(--block-label-right-radius);
-		background: var(--block-label-background-fill);
-		padding: 5px;
-		width: 22px;
-		height: 22px;
-		overflow: hidden;
-		color: var(--block-label-color);
-		font: var(--font-sans);
-		font-size: var(--button-small-text-size);
-	}
 </style>
diff --git a/js/markdown/shared/MarkdownCode.svelte b/js/markdown/shared/MarkdownCode.svelte
index db600bc6c7f2d..84ce5b6be1410 100644
--- a/js/markdown/shared/MarkdownCode.svelte
+++ b/js/markdown/shared/MarkdownCode.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { afterUpdate, onMount } from "svelte";
-	import DOMPurify from "isomorphic-dompurify";
+	import { afterUpdate } from "svelte";
 	import render_math_in_element from "katex/contrib/auto-render";
 	import "katex/dist/katex.min.css";
 	import { create_marked } from "./utils";
-
+	import sanitize_server from "sanitize-html";
+	import Amuchina from "amuchina";
 	import "./prism.css";
 
 	export let chatbot = true;
@@ -29,6 +29,44 @@
 		latex_delimiters
 	});
 
+	const amuchina = new Amuchina();
+	const is_browser = typeof window !== "undefined";
+
+	let sanitize = is_browser ? sanitize_browser : sanitize_server;
+
+	function sanitize_browser(source: string): string {
+		const node = new DOMParser().parseFromString(source, "text/html");
+		walk_nodes(node.body, "A", (node) => {
+			if (node instanceof HTMLElement && "target" in node) {
+				if (is_external_url(node.getAttribute("href"))) {
+					node.setAttribute("target", "_blank");
+					node.setAttribute("rel", "noopener noreferrer");
+				}
+			}
+		});
+
+		return amuchina.sanitize(node).body.innerHTML;
+	}
+
+	function walk_nodes(
+		node: Node | null | HTMLElement,
+		test: string | ((node: Node | HTMLElement) => boolean),
+		callback: (node: Node | HTMLElement) => void
+	): void {
+		if (
+			node &&
+			((typeof test === "string" && node.nodeName === test) ||
+				(typeof test === "function" && test(node)))
+		) {
+			callback(node);
+		}
+		const children = node?.childNodes || [];
+		for (let i = 0; i < children.length; i++) {
+			// @ts-ignore
+			walk_nodes(children[i], test, callback);
+		}
+	}
+
 	const is_external_url = (link: string | null): boolean => {
 		try {
 			return !!link && new URL(link).origin !== new URL(root).origin;
@@ -37,15 +75,6 @@
 		}
 	};
 
-	DOMPurify.addHook("afterSanitizeAttributes", function (node) {
-		if ("target" in node) {
-			if (is_external_url(node.getAttribute("href"))) {
-				node.setAttribute("target", "_blank");
-				node.setAttribute("rel", "noopener noreferrer");
-			}
-		}
-	});
-
 	function escapeRegExp(string: string): string {
 		return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 	}
@@ -76,8 +105,8 @@
 			);
 		}
 
-		if (sanitize_html) {
-			parsedValue = DOMPurify.sanitize(parsedValue);
+		if (sanitize_html && sanitize) {
+			parsedValue = sanitize(parsedValue);
 		}
 
 		return parsedValue;
@@ -129,38 +158,25 @@
 	}
 
 	span :global(div[class*="code_wrap"] > button) {
-		position: absolute;
-		top: var(--spacing-sm);
-		right: var(--spacing-sm);
 		z-index: 1;
 		cursor: pointer;
 		border-bottom-left-radius: var(--radius-sm);
-		padding: 5px;
 		padding: var(--spacing-md);
 		width: 25px;
 		height: 25px;
-	}
-
-	span :global(code > button > span) {
 		position: absolute;
-		top: var(--spacing-sm);
-		right: var(--spacing-sm);
-		width: 12px;
-		height: 12px;
+		right: 0;
 	}
 
 	span :global(.check) {
-		position: absolute;
-		top: 0;
-		right: 0;
 		opacity: 0;
 		z-index: var(--layer-top);
 		transition: opacity 0.2s;
-		background: var(--background-fill-primary);
-		padding: var(--size-1);
-		width: 100%;
-		height: 100%;
+		background: var(--code-background-fill);
 		color: var(--body-text-color);
+		position: absolute;
+		top: var(--size-1-5);
+		left: var(--size-1-5);
 	}
 
 	span :global(p:not(:first-child)) {
@@ -188,4 +204,8 @@
 	span.md :global(.md-header-anchor > svg) {
 		color: var(--body-text-color-subdued);
 	}
+
+	span :global(table) {
+		word-break: break-word;
+	}
 </style>
diff --git a/js/markdown/shared/prism.css b/js/markdown/shared/prism.css
index 3766eba0ddf9e..6e055c8439bff 100644
--- a/js/markdown/shared/prism.css
+++ b/js/markdown/shared/prism.css
@@ -66,7 +66,7 @@ th {
 	border: none;
 	border-radius: var(--radius-md);
 	background: var(--code-background-fill);
-	padding: var(--spacing-lg) var(--spacing-xl);
+	padding: var(--spacing-xxl);
 	font-family: var(--font-mono);
 	/* font-size: var(--text-sm) !important; */
 	display: block;
diff --git a/js/markdown/shared/utils.ts b/js/markdown/shared/utils.ts
index c303789d5cc84..1ff6d974034d9 100644
--- a/js/markdown/shared/utils.ts
+++ b/js/markdown/shared/utils.ts
@@ -13,28 +13,22 @@ import GithubSlugger from "github-slugger";
 
 const LINK_ICON_CODE = `<svg class="md-link-icon" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true" fill="currentColor"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg>`;
 
-const COPY_ICON_CODE = `<svg
-xmlns="http://www.w3.org/2000/svg"
-width="100%"
-height="100%"
-viewBox="0 0 32 32"
-><path
-  fill="currentColor"
-  d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"
-/><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z" /></svg>`;
-const CHECK_ICON_CODE = `<svg
-xmlns="http://www.w3.org/2000/svg"
-width="100%"
-height="100%"
-viewBox="0 0 24 24"
-fill="none"
-stroke="currentColor"
-stroke-width="3"
-stroke-linecap="round"
-stroke-linejoin="round"><polyline points="20 6 9 17 4 12" /></svg>`;
+const COPY_ICON_CODE = `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" color="currentColor" aria-hidden="true" aria-label="Copy" stroke-width="1.3" width="15" height="15">
+  <path fill="currentColor" d="M12.728 4.545v8.182H4.545V4.545zm0 -0.909H4.545a0.909 0.909 0 0 0 -0.909 0.909v8.182a0.909 0.909 0 0 0 0.909 0.909h8.182a0.909 0.909 0 0 0 0.909 -0.909V4.545a0.909 0.909 0 0 0 -0.909 -0.909"/>
+  <path fill="currentColor" d="M1.818 8.182H0.909V1.818a0.909 0.909 0 0 1 0.909 -0.909h6.364v0.909H1.818Z"/>
+</svg>
+
+`;
+
+const CHECK_ICON_CODE = `<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" aria-hidden="true" aria-label="Copied" fill="none" stroke="currentColor" stroke-width="1.3">
+  <path d="m13.813 4.781 -7.438 7.438 -3.188 -3.188"/>
+</svg>
+`;
+
 const COPY_BUTTON_CODE = `<button title="copy" class="copy_code_button">
-<span class="copy-text">${COPY_ICON_CODE}</span>
-<span class="check">${CHECK_ICON_CODE}</span>
+  <span class="copy-text">${COPY_ICON_CODE}</span>
+  <span class="check">${CHECK_ICON_CODE}</span>
 </button>`;
 
 const escape_test = /[&<>"']/;
diff --git a/js/model3D/CHANGELOG.md b/js/model3D/CHANGELOG.md
index 49f96e5a299d0..9b69760c3f9e6 100644
--- a/js/model3D/CHANGELOG.md
+++ b/js/model3D/CHANGELOG.md
@@ -1,11 +1,84 @@
 # @gradio/model3d
 
-## 0.12.2
+## 0.13.0-beta.7
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.7
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.13.0-beta.6
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+- @gradio/client@1.6.0-beta.4
+- @gradio/upload@0.13.0-beta.6
+
+## 0.13.0-beta.5
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.5
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.13.0-beta.4
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/upload@0.13.0-beta.4
+- @gradio/wasm@0.14.0-beta.3
+
+## 0.13.0-beta.3
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.3
+- @gradio/client@1.6.0-beta.3
+
+## 0.13.0-beta.2
+
+### Features
+
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+- [#9250](https://github.com/gradio-app/gradio/pull/9250) [`350b0a5`](https://github.com/gradio-app/gradio/commit/350b0a5cafb9176f914f62e7c90de51d4352cc77) - Improve Icon Button consistency.  Thanks @hannahblair!
+- [#9253](https://github.com/gradio-app/gradio/pull/9253) [`99648ec`](https://github.com/gradio-app/gradio/commit/99648ec7c4443e74799941e47b0015ac9ca581e1) - Adds ability to block event trigger when file is uploading.  Thanks @dawoodkhan82!
+- [#9377](https://github.com/gradio-app/gradio/pull/9377) [`618e9fe`](https://github.com/gradio-app/gradio/commit/618e9fe941744cef4a4a06eb7840763c64b15e32) - Update babylon.js to `v7` for `gr.Model3D`.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/upload@0.13.0-beta.2
+- @gradio/wasm@0.14.0-beta.2
+- @gradio/client@1.6.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.12.2-beta.1
 
 ### Features
 
 - [#9187](https://github.com/gradio-app/gradio/pull/9187) [`5bf00b7`](https://github.com/gradio-app/gradio/commit/5bf00b7524ebf399b48719120a49d15bb21bd65c) - make all component SSR compatible.  Thanks @pngwn!
 
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/client@1.6.0-beta.1
+- @gradio/upload@0.12.4-beta.1
+- @gradio/wasm@0.13.1-beta.1
+
+## 0.12.2
+
 ### Fixes
 
 - [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types.  Thanks @pngwn!
diff --git a/js/model3D/Index.svelte b/js/model3D/Index.svelte
index db0880d1dc005..748215de10d8f 100644
--- a/js/model3D/Index.svelte
+++ b/js/model3D/Index.svelte
@@ -31,6 +31,10 @@
 	export let gradio: Gradio;
 	export let height: number | undefined = undefined;
 	export let zoom_speed = 1;
+	export let input_ready: boolean;
+	let uploading = false;
+	$: input_ready = !uploading;
+	export let has_change_history = false;
 
 	// alpha, beta, radius
 	export let camera_position: [number | null, number | null, number | null] = [
@@ -74,6 +78,7 @@
 				{show_label}
 				{camera_position}
 				{zoom_speed}
+				{has_change_history}
 			/>
 		{:else}
 			<!-- Not ideal but some bugs to work out before we can 
@@ -113,9 +118,13 @@
 			{value}
 			{camera_position}
 			{zoom_speed}
+			bind:uploading
 			on:change={({ detail }) => (value = detail)}
 			on:drag={({ detail }) => (dragging = detail)}
-			on:change={({ detail }) => gradio.dispatch("change", detail)}
+			on:change={({ detail }) => {
+				gradio.dispatch("change", detail);
+				has_change_history = true;
+			}}
 			on:clear={() => {
 				value = null;
 				gradio.dispatch("clear");
@@ -131,8 +140,8 @@
 			}}
 			i18n={gradio.i18n}
 			max_file_size={gradio.max_file_size}
-			upload={gradio.client.upload}
-			stream_handler={gradio.client.stream}
+			upload={(...args) => gradio.client.upload(...args)}
+			stream_handler={(...args) => gradio.client.stream(...args)}
 		>
 			<UploadText i18n={gradio.i18n} type="file" />
 		</Model3DUpload>
diff --git a/js/model3D/package.json b/js/model3D/package.json
index f3f5c9824ddb1..a76590370cc8a 100644
--- a/js/model3D/package.json
+++ b/js/model3D/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/model3d",
-	"version": "0.12.2",
+	"version": "0.13.0-beta.7",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
@@ -15,8 +15,8 @@
 		"@gradio/utils": "workspace:^",
 		"@gradio/wasm": "workspace:^",
 		"@types/babylon": "^6.16.6",
-		"babylonjs": "^4.2.1",
-		"babylonjs-loaders": "^4.2.1",
+		"babylonjs": "^7.25.1",
+		"babylonjs-loaders": "^7.25.1",
 		"dequal": "^2.0.2",
 		"gsplat": "^1.0.5"
 	},
diff --git a/js/model3D/shared/Model3D.svelte b/js/model3D/shared/Model3D.svelte
index 5b8fbac97da3e..bbfb06e571b39 100644
--- a/js/model3D/shared/Model3D.svelte
+++ b/js/model3D/shared/Model3D.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { FileData } from "@gradio/client";
-	import { BlockLabel, IconButton } from "@gradio/atoms";
+	import { BlockLabel, IconButton, IconButtonWrapper } from "@gradio/atoms";
 	import { File, Download, Undo } from "@gradio/icons";
 	import type { I18nFormatter } from "@gradio/utils";
 	import { dequal } from "dequal";
@@ -21,6 +21,7 @@
 		null,
 		null
 	];
+	export let has_change_history = false;
 
 	let current_settings = { camera_position, zoom_speed, pan_speed };
 
@@ -74,10 +75,15 @@
 />
 {#if value}
 	<div class="model3D">
-		<div class="buttons">
+		<IconButtonWrapper>
 			{#if !use_3dgs}
 				<!-- Canvas3DGS doesn't implement the undo method (reset_camera_position) -->
-				<IconButton Icon={Undo} label="Undo" on:click={() => handle_undo()} />
+				<IconButton
+					Icon={Undo}
+					label="Undo"
+					on:click={() => handle_undo()}
+					disabled={!has_change_history}
+				/>
 			{/if}
 			<a
 				href={resolved_url}
@@ -86,7 +92,7 @@
 			>
 				<IconButton Icon={Download} label={i18n("common.download")} />
 			</a>
-		</div>
+		</IconButtonWrapper>
 
 		{#if use_3dgs}
 			<svelte:component
@@ -127,13 +133,4 @@
 		object-fit: contain;
 		overflow: hidden;
 	}
-	.buttons {
-		display: flex;
-		position: absolute;
-		top: var(--size-2);
-		right: var(--size-2);
-		justify-content: flex-end;
-		gap: var(--spacing-sm);
-		z-index: var(--layer-5);
-	}
 </style>
diff --git a/js/model3D/shared/Model3DUpload.svelte b/js/model3D/shared/Model3DUpload.svelte
index 04fe663a7d9f2..4deea61e9c12e 100644
--- a/js/model3D/shared/Model3DUpload.svelte
+++ b/js/model3D/shared/Model3DUpload.svelte
@@ -18,6 +18,7 @@
 	export let zoom_speed = 1;
 	export let pan_speed = 1;
 	export let max_file_size: number | null = null;
+	export let uploading = false;
 
 	// alpha, beta, radius
 	export let camera_position: [number | null, number | null, number | null] = [
@@ -96,6 +97,7 @@
 		{max_file_size}
 		filetype={[".stl", ".obj", ".gltf", ".glb", "model/obj", ".splat", ".ply"]}
 		bind:dragging
+		bind:uploading
 		on:error
 	>
 		<slot />
@@ -107,7 +109,6 @@
 			on:clear={handle_clear}
 			{i18n}
 			on:undo={handle_undo}
-			absolute
 		/>
 
 		{#if use_3dgs}
diff --git a/js/multimodaltextbox/CHANGELOG.md b/js/multimodaltextbox/CHANGELOG.md
index ff5f85d1ae71d..c0ce525694ca7 100644
--- a/js/multimodaltextbox/CHANGELOG.md
+++ b/js/multimodaltextbox/CHANGELOG.md
@@ -1,5 +1,106 @@
 # @gradio/multimodaltextbox
 
+## 0.6.0-beta.7
+
+### Features
+
+- [#9437](https://github.com/gradio-app/gradio/pull/9437) [`c3d93be`](https://github.com/gradio-app/gradio/commit/c3d93bef94b9401747a363f7bad88a1d347d535b) - Adding new themes to Gradio 5.0.  Thanks @allisonwhilden!
+- [#9593](https://github.com/gradio-app/gradio/pull/9593) [`cc61fe7`](https://github.com/gradio-app/gradio/commit/cc61fe7047ac61779a61cce52c666400b9517daa) - Some more chatbot fixes.  Thanks @dawoodkhan82!
+- [#9583](https://github.com/gradio-app/gradio/pull/9583) [`b92a762`](https://github.com/gradio-app/gradio/commit/b92a7623e1ebd801587041e1ccca058a61058da9) - Disable the submit button and enter-key submit when the text is empty.  Thanks @whitphx!
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.7
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+- @gradio/image@0.16.0-beta.7
+- @gradio/video@0.11.0-beta.7
+
+## 0.6.0-beta.6
+
+### Features
+
+- [#9521](https://github.com/gradio-app/gradio/pull/9521) [`06ef22e`](https://github.com/gradio-app/gradio/commit/06ef22e83cdd27e7afb381396d153d9db3dea16e) - Allow `info=` to render markdown.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/video@0.11.0-beta.6
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+- @gradio/client@1.6.0-beta.4
+- @gradio/upload@0.13.0-beta.6
+- @gradio/image@0.16.0-beta.6
+
+## 0.6.0-beta.5
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.5
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/video@0.11.0-beta.5
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+- @gradio/image@0.16.0-beta.5
+
+## 0.6.0-beta.4
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/upload@0.13.0-beta.4
+- @gradio/image@0.16.0-beta.4
+- @gradio/video@0.11.0-beta.4
+
+## 0.6.0-beta.3
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.3
+- @gradio/video@0.11.0-beta.3
+- @gradio/client@1.6.0-beta.3
+- @gradio/image@0.16.0-beta.3
+
+## 0.6.0-beta.2
+
+### Features
+
+- [#8966](https://github.com/gradio-app/gradio/pull/8966) [`8e52b6a`](https://github.com/gradio-app/gradio/commit/8e52b6a3e75957462bc7fdbf6ff9c280084d5f08) - Chatbot Examples.  Thanks @dawoodkhan82!
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+- [#9280](https://github.com/gradio-app/gradio/pull/9280) [`7122420`](https://github.com/gradio-app/gradio/commit/712242047fde3a594dfde7f48a44c7ea16239dc8) - Match style of textbox stop button to submit button.  Thanks @freddyaboulton!
+
+### Fixes
+
+- [#9393](https://github.com/gradio-app/gradio/pull/9393) [`53ed0f0`](https://github.com/gradio-app/gradio/commit/53ed0f030551ad876a1fea28a9db9015ba6ec33e) - Fix File Types for MultimodalTextbox.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/upload@0.13.0-beta.2
+- @gradio/client@1.6.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+- @gradio/image@0.16.0-beta.2
+- @gradio/video@0.11.0-beta.2
+
+## 0.6.0-beta.1
+
+### Features
+
+- [#9235](https://github.com/gradio-app/gradio/pull/9235) [`f8b411f`](https://github.com/gradio-app/gradio/commit/f8b411fe282ff0316ed4abebc0a043b044bf4dd9) - Built-in submit and stop buttons in `gr.ChatInterface(multimodal=False)`, adding `submit_btn` and `stop_btn` props to `gr.Textbox()` and `gr.MultimodalText()`.  Thanks @whitphx!
+
+### Dependency updates
+
+- @gradio/video@0.11.0-beta.1
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/client@1.6.0-beta.1
+- @gradio/image@0.16.0-beta.1
+- @gradio/upload@0.12.4-beta.1
+
 ## 0.5.7
 
 ### Fixes
diff --git a/js/multimodaltextbox/Example.svelte b/js/multimodaltextbox/Example.svelte
index dde751badf741..695eb161a095c 100644
--- a/js/multimodaltextbox/Example.svelte
+++ b/js/multimodaltextbox/Example.svelte
@@ -42,7 +42,7 @@
 		{#if file.mime_type && file.mime_type.includes("image")}
 			<Image src={file.url} alt="" />
 		{:else if file.mime_type && file.mime_type.includes("video")}
-			<Video src={file.url} alt="" loop={true} />
+			<Video src={file.url} alt="" loop={true} is_stream={false} />
 		{:else if file.mime_type && file.mime_type.includes("audio")}
 			<audio src={file.url} controls />
 		{:else}
diff --git a/js/multimodaltextbox/Index.svelte b/js/multimodaltextbox/Index.svelte
index 0dbcb70898791..2a00705cc84e2 100644
--- a/js/multimodaltextbox/Index.svelte
+++ b/js/multimodaltextbox/Index.svelte
@@ -16,6 +16,7 @@
 	export let gradio: Gradio<{
 		change: typeof value;
 		submit: never;
+		stop: never;
 		blur: never;
 		select: SelectData;
 		input: never;
@@ -40,7 +41,8 @@
 	export let container = true;
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
-	export let submit_btn: string | null = null;
+	export let submit_btn: string | boolean | null = null;
+	export let stop_btn: string | boolean | null = null;
 	export let loading_status: LoadingStatus | undefined = undefined;
 	export let value_is_output = false;
 	export let rtl = false;
@@ -88,6 +90,7 @@
 		max_lines={!max_lines ? lines + 1 : max_lines}
 		{placeholder}
 		{submit_btn}
+		{stop_btn}
 		{autofocus}
 		{container}
 		{autoscroll}
@@ -96,6 +99,7 @@
 		on:change={() => gradio.dispatch("change", value)}
 		on:input={() => gradio.dispatch("input")}
 		on:submit={() => gradio.dispatch("submit")}
+		on:stop={() => gradio.dispatch("stop")}
 		on:blur={() => gradio.dispatch("blur")}
 		on:select={(e) => gradio.dispatch("select", e.detail)}
 		on:focus={() => gradio.dispatch("focus")}
@@ -103,15 +107,7 @@
 			gradio.dispatch("error", detail);
 		}}
 		disabled={!interactive}
-		upload={gradio.client.upload}
-		stream_handler={gradio.client.stream}
+		upload={(...args) => gradio.client.upload(...args)}
+		stream_handler={(...args) => gradio.client.stream(...args)}
 	/>
 </Block>
-
-<style>
-	:global(.form .block.multimodal-textbox) {
-		box-shadow: var(--block-shadow) !important;
-		border-width: var(--block-border-width) !important;
-		border-radius: var(--block-radius) !important;
-	}
-</style>
diff --git a/js/multimodaltextbox/package.json b/js/multimodaltextbox/package.json
index ee95fb0f8cce6..5f17bd2a8ca3f 100644
--- a/js/multimodaltextbox/package.json
+++ b/js/multimodaltextbox/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/multimodaltextbox",
-	"version": "0.5.7",
+	"version": "0.6.0-beta.7",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/multimodaltextbox/shared/MultimodalTextbox.svelte b/js/multimodaltextbox/shared/MultimodalTextbox.svelte
index 9de4bd3c7eff1..f9b8f55e70cea 100644
--- a/js/multimodaltextbox/shared/MultimodalTextbox.svelte
+++ b/js/multimodaltextbox/shared/MultimodalTextbox.svelte
@@ -10,7 +10,15 @@
 	import { Upload } from "@gradio/upload";
 	import { Image } from "@gradio/image/shared";
 	import type { FileData, Client } from "@gradio/client";
-	import { Clear, File, Music, Paperclip, Video, Send } from "@gradio/icons";
+	import {
+		Clear,
+		File,
+		Music,
+		Paperclip,
+		Video,
+		Send,
+		Square
+	} from "@gradio/icons";
 	import type { SelectData } from "@gradio/utils";
 
 	export let value: { text: string; files: FileData[] } = {
@@ -28,6 +36,7 @@
 	export let container = true;
 	export let max_lines: number;
 	export let submit_btn: string | boolean | null = null;
+	export let stop_btn: string | boolean | null = null;
 	export let rtl = false;
 	export let autofocus = false;
 	export let text_align: "left" | "right" | undefined = undefined;
@@ -56,25 +65,15 @@
 		dispatch("change", value);
 		oldValue = value.text;
 	}
-	let accept_file_types: string | null;
-	if (file_types == null) {
-		accept_file_types = null;
-	} else {
-		file_types = file_types.map((x) => {
-			if (x.startsWith(".")) {
-				return x;
-			}
-			return x + "/*";
-		});
-		accept_file_types = file_types.join(", ");
-	}
 
 	$: if (value === null) value = { text: "", files: [] };
 	$: value, el && lines !== max_lines && resize(el, lines, max_lines);
+	$: can_submit = value.text !== "" || value.files.length > 0;
 
 	const dispatch = createEventDispatcher<{
 		change: typeof value;
 		submit: undefined;
+		stop: undefined;
 		blur: undefined;
 		select: SelectData;
 		input: undefined;
@@ -129,7 +128,9 @@
 		await tick();
 		if (e.key === "Enter" && e.shiftKey && lines > 1) {
 			e.preventDefault();
-			dispatch("submit");
+			if (can_submit) {
+				dispatch("submit");
+			}
 		} else if (
 			e.key === "Enter" &&
 			!e.shiftKey &&
@@ -137,7 +138,9 @@
 			max_lines >= 1
 		) {
 			e.preventDefault();
-			dispatch("submit");
+			if (can_submit) {
+				dispatch("submit");
+			}
 		}
 	}
 
@@ -188,7 +191,11 @@
 		}
 	}
 
-	async function handle_submit(): Promise<void> {
+	function handle_stop(): void {
+		dispatch("stop");
+	}
+
+	function handle_submit(): void {
 		dispatch("submit");
 	}
 
@@ -245,7 +252,7 @@
 >
 	<!-- svelte-ignore a11y-autofocus -->
 	<label class:container>
-		<BlockTitle {show_label} {info}>{label}</BlockTitle>
+		<BlockTitle {root} {show_label} {info}>{label}</BlockTitle>
 		{#if value.files.length > 0 || uploading}
 			<div
 				class="thumbnails scroll-hide"
@@ -292,6 +299,7 @@
 				bind:this={upload_component}
 				on:load={handle_upload}
 				{file_count}
+				filetype={file_types}
 				{root}
 				{max_file_size}
 				bind:dragging
@@ -317,6 +325,7 @@
 					max_lines: max_lines
 				}}
 				class="scroll-hide"
+				class:no-label={!show_label}
 				dir={rtl ? "rtl" : "ltr"}
 				bind:value={value.text}
 				bind:this={el}
@@ -337,11 +346,25 @@
 					class="submit-button"
 					class:padded-button={submit_btn !== true}
 					on:click={handle_submit}
+					disabled={!can_submit}
 				>
 					{#if submit_btn === true}
 						<Send />
 					{:else}
-						Hello World
+						{submit_btn}
+					{/if}
+				</button>
+			{/if}
+			{#if stop_btn}
+				<button
+					class="stop-button"
+					class:padded-button={stop_btn !== true}
+					on:click={handle_stop}
+				>
+					{#if stop_btn === true}
+						<Square fill={"none"} stroke_width={2.5} />
+					{:else}
+						{stop_btn}
 					{/if}
 				</button>
 			{/if}
@@ -374,7 +397,7 @@
 	textarea {
 		flex-grow: 1;
 		outline: none !important;
-		background: var(--input-background-fill);
+		background: var(--block-background-fill);
 		padding: var(--input-padding);
 		color: var(--body-text-color);
 		font-weight: var(--input-text-weight);
@@ -387,6 +410,10 @@
 		position: relative;
 		z-index: 1;
 	}
+	textarea.no-label {
+		padding-top: 5px;
+		padding-bottom: 5px;
+	}
 
 	textarea:disabled {
 		-webkit-opacity: 1;
@@ -398,9 +425,8 @@
 	}
 
 	.upload-button,
-	.submit-button {
-		background: var(--button-secondary-background-fill);
-		color: var(--button-secondary-text-color);
+	.submit-button,
+	.stop-button {
 		border: none;
 		text-align: center;
 		text-decoration: none;
@@ -413,21 +439,29 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		margin-bottom: 5px;
 		z-index: var(--layer-1);
 	}
 	.padded-button {
 		padding: 0 10px;
 	}
 
+	.stop-button,
+	.upload-button,
+	.submit-button {
+		background: var(--button-secondary-background-fill);
+	}
+
+	.stop-button:hover,
 	.upload-button:hover,
 	.submit-button:hover {
 		background: var(--button-secondary-background-fill-hover);
 	}
 
-	.upload-button:active,
-	.submit-button:active {
-		box-shadow: var(--button-shadow-active);
+	.stop-button:disabled,
+	.upload-button:disabled,
+	.submit-button:disabled {
+		background: var(--button-secondary-background-fill);
+		cursor: initial;
 	}
 
 	.submit-button :global(svg) {
@@ -439,6 +473,11 @@
 		width: 17px;
 	}
 
+	.stop-button :global(svg) {
+		height: 16px;
+		width: 16px;
+	}
+
 	.loader {
 		display: flex;
 		justify-content: center;
@@ -475,6 +514,7 @@
 		gap: var(--spacing-lg);
 		overflow-x: scroll;
 		padding-top: var(--spacing-sm);
+		margin-bottom: 6px;
 	}
 
 	.thumbnail-item {
diff --git a/js/multimodaltextbox/shared/utils.ts b/js/multimodaltextbox/shared/utils.ts
index faba251b7fc68..a54f73891ac7b 100644
--- a/js/multimodaltextbox/shared/utils.ts
+++ b/js/multimodaltextbox/shared/utils.ts
@@ -14,13 +14,16 @@ export async function resize(
 	await tick();
 	if (lines === max_lines) return;
 
+	const computed_styles = window.getComputedStyle(target);
+	const padding_top = parseFloat(computed_styles.paddingTop);
+	const padding_bottom = parseFloat(computed_styles.paddingBottom);
+	const line_height = parseFloat(computed_styles.lineHeight);
+
 	let max =
 		max_lines === undefined
 			? false
-			: max_lines === undefined // default
-				? 21 * 11
-				: 21 * (max_lines + 1);
-	let min = 21 * (lines + 1);
+			: padding_top + padding_bottom + line_height * max_lines;
+	let min = padding_top + padding_bottom + lines * line_height;
 
 	target.style.height = "1px";
 
@@ -42,17 +45,16 @@ export function text_area_resize(
 ): any | undefined {
 	if (_value.lines === _value.max_lines) return;
 	_el.style.overflowY = "scroll";
-	_el.addEventListener("input", (event: Event) =>
-		resize(event.target as HTMLTextAreaElement, _value.lines, _value.max_lines)
-	);
+
+	function handle_input(event: Event): void {
+		resize(event.target as HTMLTextAreaElement, _value.lines, _value.max_lines);
+	}
+	_el.addEventListener("input", handle_input);
 
 	if (!_value.text.trim()) return;
 	resize(_el, _value.lines, _value.max_lines);
 
 	return {
-		destroy: () =>
-			_el.removeEventListener("input", (e: Event) =>
-				resize(e.target as HTMLTextAreaElement, _value.lines, _value.max_lines)
-			)
+		destroy: () => _el.removeEventListener("input", handle_input)
 	};
 }
diff --git a/js/nativeplot/CHANGELOG.md b/js/nativeplot/CHANGELOG.md
index 24fbfa5cc59a9..9c351963ff7f8 100644
--- a/js/nativeplot/CHANGELOG.md
+++ b/js/nativeplot/CHANGELOG.md
@@ -1,11 +1,77 @@
 # @gradio/nativeplot
 
-## 0.3.2
+## 0.4.0-beta.7
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.4.0-beta.6
+
+### Features
+
+- [#9521](https://github.com/gradio-app/gradio/pull/9521) [`06ef22e`](https://github.com/gradio-app/gradio/commit/06ef22e83cdd27e7afb381396d153d9db3dea16e) - Allow `info=` to render markdown.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+
+## 0.4.0-beta.5
+
+### Features
+
+- [#9497](https://github.com/gradio-app/gradio/pull/9497) [`d826faa`](https://github.com/gradio-app/gradio/commit/d826faa8c2584cf0772d4e66b4073e33b83f3a00) - Hide x axis labels.  Thanks @aliabid94!
+
+## 0.4.0-beta.4
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.4.0-beta.3
+
+### Features
+
+- [#9464](https://github.com/gradio-app/gradio/pull/9464) [`3ac5d9c`](https://github.com/gradio-app/gradio/commit/3ac5d9c972576d82bc365a6532e6e12f55441a30) - Fix plots.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+
+## 0.4.0-beta.2
+
+### Features
+
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.3.2-beta.1
 
 ### Features
 
 - [#9187](https://github.com/gradio-app/gradio/pull/9187) [`5bf00b7`](https://github.com/gradio-app/gradio/commit/5bf00b7524ebf399b48719120a49d15bb21bd65c) - make all component SSR compatible.  Thanks @pngwn!
 
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/theme@0.3.0-beta.1
+
+## 0.3.2
+
 ### Fixes
 
 - [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types.  Thanks @pngwn!
diff --git a/js/nativeplot/Index.svelte b/js/nativeplot/Index.svelte
index 29e3c224c96fa..20829000e1d29 100644
--- a/js/nativeplot/Index.svelte
+++ b/js/nativeplot/Index.svelte
@@ -7,7 +7,6 @@
 	import { onMount } from "svelte";
 
 	import type { TopLevelSpec as Spec } from "vega-lite";
-	import vegaEmbed from "vega-embed";
 	import type { View } from "vega";
 	import { LineChart as LabelIcon } from "@gradio/icons";
 	import { Empty } from "@gradio/atoms";
@@ -22,6 +21,7 @@
 	export let x: string;
 	export let y: string;
 	export let color: string | null = null;
+	export let root: string;
 	$: unique_colors =
 		color && value && value.datatypes[color] === "nominal"
 			? Array.from(new Set(_data.map((d) => d[color])))
@@ -44,6 +44,7 @@
 	export let y_lim: [number, number] | null = null;
 	export let x_label_angle: number | null = null;
 	export let y_label_angle: number | null = null;
+	export let x_axis_labels_visible = true;
 	export let caption: string | null = null;
 	export let sort: "x" | "y" | "-x" | "-y" | string[] | null = null;
 	function reformat_sort(
@@ -71,7 +72,6 @@
 	}
 	$: _sort = reformat_sort(sort);
 	export let _selectable = false;
-	export let target: HTMLDivElement;
 	let _data: {
 		[x: string]: string | number;
 	}[];
@@ -132,14 +132,16 @@
 
 	const is_browser = typeof window !== "undefined";
 	let chart_element: HTMLDivElement;
-	$: computed_style =
-		target && is_browser ? window.getComputedStyle(target) : null;
+	$: computed_style = chart_element
+		? window.getComputedStyle(chart_element)
+		: null;
 	let view: View;
 	let mounted = false;
 	let old_width: number;
 	let resizeObserver: ResizeObserver;
 
-	function load_chart(): void {
+	let vegaEmbed: typeof import("vega-embed").default;
+	async function load_chart(): Promise<void> {
 		if (view) {
 			view.finalize();
 		}
@@ -160,6 +162,10 @@
 				view.signal("width", el[0].target.offsetWidth).run();
 			}
 		});
+
+		if (!vegaEmbed) {
+			vegaEmbed = (await import("vega-embed")).default;
+		}
 		vegaEmbed(chart_element, spec, { actions: false }).then(function (result) {
 			view = result.view;
 
@@ -362,7 +368,11 @@
 											value: 0
 										},
 							x: {
-								axis: x_label_angle ? { labelAngle: x_label_angle } : {},
+								axis: {
+									...(x_label_angle !== null && { labelAngle: x_label_angle }),
+									labels: x_axis_labels_visible,
+									ticks: x_axis_labels_visible
+								},
 								field: x,
 								title: x_title || x,
 								type: value.datatypes[x],
@@ -507,7 +517,7 @@
 			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 		/>
 	{/if}
-	<BlockTitle {show_label} info={undefined}>{label}</BlockTitle>
+	<BlockTitle {root} {show_label} info={undefined}>{label}</BlockTitle>
 	{#if value && is_browser}
 		<div bind:this={chart_element}></div>
 
diff --git a/js/nativeplot/package.json b/js/nativeplot/package.json
index 6f52ed1cbd676..d589880c03958 100644
--- a/js/nativeplot/package.json
+++ b/js/nativeplot/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/nativeplot",
-	"version": "0.3.2",
+	"version": "0.4.0-beta.7",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/number/CHANGELOG.md b/js/number/CHANGELOG.md
index d7cd5039ef419..6875f13974897 100644
--- a/js/number/CHANGELOG.md
+++ b/js/number/CHANGELOG.md
@@ -1,5 +1,56 @@
 # @gradio/number
 
+## 0.5.0-beta.5
+
+### Features
+
+- [#9437](https://github.com/gradio-app/gradio/pull/9437) [`c3d93be`](https://github.com/gradio-app/gradio/commit/c3d93bef94b9401747a363f7bad88a1d347d535b) - Adding new themes to Gradio 5.0.  Thanks @allisonwhilden!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.5.0-beta.4
+
+### Features
+
+- [#9521](https://github.com/gradio-app/gradio/pull/9521) [`06ef22e`](https://github.com/gradio-app/gradio/commit/06ef22e83cdd27e7afb381396d153d9db3dea16e) - Allow `info=` to render markdown.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+
+## 0.4.13-beta.3
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.4.13-beta.2
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+
+## 0.4.13-beta.2
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.4.13-beta.1
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+
 ## 0.4.13
 
 ### Fixes
diff --git a/js/number/Index.svelte b/js/number/Index.svelte
index cff7bbc3c889a..48562507d9bcb 100644
--- a/js/number/Index.svelte
+++ b/js/number/Index.svelte
@@ -29,6 +29,7 @@
 	export let value_is_output = false;
 	export let step: number | null = null;
 	export let interactive: boolean;
+	export let root: string;
 
 	function handle_change(): void {
 		if (!isNaN(value) && value !== null) {
@@ -70,7 +71,7 @@
 		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 	/>
 	<label class="block" class:container>
-		<BlockTitle {show_label} {info}>{label}</BlockTitle>
+		<BlockTitle {root} {show_label} {info}>{label}</BlockTitle>
 		<input
 			aria-label={label}
 			type="number"
@@ -117,6 +118,7 @@
 	input:focus {
 		box-shadow: var(--input-shadow-focus);
 		border-color: var(--input-border-color-focus);
+		background: var(--input-background-fill-focus);
 	}
 
 	input::placeholder {
diff --git a/js/number/package.json b/js/number/package.json
index 433ba13a3888d..97dfd4934d746 100644
--- a/js/number/package.json
+++ b/js/number/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/number",
-	"version": "0.4.13",
+	"version": "0.5.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/paramviewer/CHANGELOG.md b/js/paramviewer/CHANGELOG.md
index a56c0238202f6..96533c423c3ac 100644
--- a/js/paramviewer/CHANGELOG.md
+++ b/js/paramviewer/CHANGELOG.md
@@ -1,11 +1,54 @@
 # @gradio/paramviewer
 
-## 0.4.22
+## 0.4.22-beta.5
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.4.22-beta.4
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+
+## 0.4.22-beta.3
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.4.22-beta.2
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+
+## 0.4.22-beta.2
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.4.22-beta.1
 
 ### Features
 
 - [#9187](https://github.com/gradio-app/gradio/pull/9187) [`5bf00b7`](https://github.com/gradio-app/gradio/commit/5bf00b7524ebf399b48719120a49d15bb21bd65c) - make all component SSR compatible.  Thanks @pngwn!
 
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+
+## 0.4.22
+
 ### Fixes
 
 - [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types.  Thanks @pngwn!
diff --git a/js/paramviewer/package.json b/js/paramviewer/package.json
index f45c21b5e2af0..068fb262cf317 100644
--- a/js/paramviewer/package.json
+++ b/js/paramviewer/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/paramviewer",
-	"version": "0.4.22",
+	"version": "0.4.22-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/plot/CHANGELOG.md b/js/plot/CHANGELOG.md
index 0a0e50ea425c4..1a2713f7b063b 100644
--- a/js/plot/CHANGELOG.md
+++ b/js/plot/CHANGELOG.md
@@ -1,5 +1,57 @@
 # @gradio/plot
 
+## 0.7.0-beta.6
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.7.0-beta.5
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+
+## 0.7.0-beta.4
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.7.0-beta.3
+
+### Features
+
+- [#9464](https://github.com/gradio-app/gradio/pull/9464) [`3ac5d9c`](https://github.com/gradio-app/gradio/commit/3ac5d9c972576d82bc365a6532e6e12f55441a30) - Fix plots.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+
+## 0.6.5-beta.2
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.6.5-beta.1
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/theme@0.3.0-beta.1
+
 ## 0.6.5
 
 ### Fixes
diff --git a/js/plot/Index.svelte b/js/plot/Index.svelte
index 749b21bc4da00..0b3214be5ddac 100644
--- a/js/plot/Index.svelte
+++ b/js/plot/Index.svelte
@@ -21,7 +21,6 @@
 	export let loading_status: LoadingStatus;
 	export let label: string;
 	export let show_label: boolean;
-	export let target: HTMLElement;
 	export let container = true;
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
@@ -61,7 +60,6 @@
 	/>
 	<Plot
 		{value}
-		{target}
 		{theme_mode}
 		{caption}
 		{bokeh_version}
diff --git a/js/plot/package.json b/js/plot/package.json
index 354be6a792f1d..d945f1f541b2d 100644
--- a/js/plot/package.json
+++ b/js/plot/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/plot",
-	"version": "0.6.5",
+	"version": "0.7.0-beta.6",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/plot/shared/Plot.svelte b/js/plot/shared/Plot.svelte
index c9befc3d8e0d6..3a77df95c85d7 100644
--- a/js/plot/shared/Plot.svelte
+++ b/js/plot/shared/Plot.svelte
@@ -6,7 +6,6 @@
 	import type { Gradio, SelectData } from "@gradio/utils";
 
 	export let value;
-	export let target: HTMLElement;
 	export let colors: string[] = [];
 	export let theme_mode: ThemeMode;
 	export let caption: string;
@@ -28,12 +27,14 @@
 		matplotlib: () => import("./plot_types/MatplotlibPlot.svelte")
 	};
 
+	const is_browser = typeof window !== "undefined";
+
 	$: {
 		let type = value?.type;
 		if (type !== _type) {
 			PlotComponent = null;
 		}
-		if (type && type in plotTypeMapping) {
+		if (type && type in plotTypeMapping && is_browser) {
 			plotTypeMapping[type]().then((module) => {
 				PlotComponent = module.default;
 			});
@@ -45,7 +46,6 @@
 	<svelte:component
 		this={PlotComponent}
 		{value}
-		{target}
 		{colors}
 		{theme_mode}
 		{caption}
diff --git a/js/plot/shared/plot_types/AltairPlot.svelte b/js/plot/shared/plot_types/AltairPlot.svelte
index 969c8a623b874..675d6e8c915cb 100644
--- a/js/plot/shared/plot_types/AltairPlot.svelte
+++ b/js/plot/shared/plot_types/AltairPlot.svelte
@@ -8,7 +8,6 @@
 	import type { View } from "vega";
 
 	export let value;
-	export let target: HTMLDivElement;
 	export let colors: string[] = [];
 	export let caption: string;
 	export let show_actions_button: bool;
@@ -20,7 +19,7 @@
 	let view: View;
 	export let _selectable: bool;
 
-	let computed_style = window.getComputedStyle(target);
+	let computed_style = window.getComputedStyle(document.body);
 
 	let old_spec: Spec;
 	let spec_width: number;
diff --git a/js/plot/shared/plot_types/PlotlyPlot.svelte b/js/plot/shared/plot_types/PlotlyPlot.svelte
index 1020d939351da..f7c6de4117e62 100644
--- a/js/plot/shared/plot_types/PlotlyPlot.svelte
+++ b/js/plot/shared/plot_types/PlotlyPlot.svelte
@@ -4,7 +4,6 @@
 	import { afterUpdate, createEventDispatcher } from "svelte";
 
 	export let value;
-	export let target;
 
 	$: plot = value?.plot;
 
@@ -17,7 +16,7 @@
 		if (!plotly_global_style) {
 			plotly_global_style = document.getElementById("plotly.js-style-global");
 			const plotly_style_clone = plotly_global_style.cloneNode();
-			target.appendChild(plotly_style_clone);
+			plot_div.appendChild(plotly_style_clone);
 			for (const rule of plotly_global_style.sheet.cssRules) {
 				plotly_style_clone.sheet.insertRule(rule.cssText);
 			}
diff --git a/js/preview/CHANGELOG.md b/js/preview/CHANGELOG.md
index 6058baa830ab3..e23203d0ed938 100644
--- a/js/preview/CHANGELOG.md
+++ b/js/preview/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @gradio/preview
 
+## 0.12.0-beta.1
+
+### Features
+
+- [#9482](https://github.com/gradio-app/gradio/pull/9482) [`bd6c5f2`](https://github.com/gradio-app/gradio/commit/bd6c5f237b0631d86273c7684c3bf2b1011992a3) - Fix custom component CLI on main/5.0.  Thanks @freddyaboulton!
+
+## 0.11.2-beta.0
+
+### Fixes
+
+- [#9468](https://github.com/gradio-app/gradio/pull/9468) [`36d6636`](https://github.com/gradio-app/gradio/commit/36d6636719b31aef07afbc0209713372edf672b5) - Fix package.json `exports` of @gradio/preview.  Thanks @Col0ring!
+
 ## 0.11.2
 
 ### Features
diff --git a/js/preview/package.json b/js/preview/package.json
index d19c506ff964e..20e31c111d4e6 100644
--- a/js/preview/package.json
+++ b/js/preview/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/preview",
-	"version": "0.11.2",
+	"version": "0.12.0-beta.1",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"main": "dist/index.js",
diff --git a/js/preview/src/build.ts b/js/preview/src/build.ts
index 9b6a1a765dd0e..619802c94a8b2 100644
--- a/js/preview/src/build.ts
+++ b/js/preview/src/build.ts
@@ -58,9 +58,9 @@ export async function make_build({
 				component_config.optimizeDeps = m.default.optimizeDeps || {};
 			}
 
-			const exports: string[][] = [
-				["component", pkg.exports["."] as string],
-				["example", pkg.exports["./example"] as string]
+			const exports: (string | any)[][] = [
+				["component", pkg.exports["."] as object],
+				["example", pkg.exports["./example"] as object]
 			].filter(([_, path]) => !!path);
 
 			for (const [entry, path] of exports) {
@@ -78,9 +78,9 @@ export async function make_build({
 						build: {
 							target: component_config.build.target,
 							emptyOutDir: true,
-							outDir: join(template_dir, entry),
+							outDir: join(template_dir, entry as string),
 							lib: {
-								entry: join(source_dir, path),
+								entry: join(source_dir, (path as any).gradio),
 								fileName: "index.js",
 								formats: ["es"]
 							},
diff --git a/js/preview/src/dev.ts b/js/preview/src/dev.ts
index 42b1fef6638d2..9d8abdb63788c 100644
--- a/js/preview/src/dev.ts
+++ b/js/preview/src/dev.ts
@@ -180,7 +180,7 @@ async function generate_imports(
 			fs.readFileSync(join(component.frontend_dir, "package.json"), "utf-8")
 		);
 
-		const exports: Record<string, string | undefined> = {
+		const exports: Record<string, any | undefined> = {
 			component: pkg.exports["."],
 			example: pkg.exports["./example"]
 		};
@@ -192,13 +192,13 @@ async function generate_imports(
 
 		const example = exports.example
 			? `example: () => import("/@fs/${to_posix(
-					join(component.frontend_dir, exports.example)
+					join(component.frontend_dir, exports.example.gradio)
 				)}"),\n`
 			: "";
 		return `${acc}"${component.component_class_id}": {
 			${example}
 			component: () => import("/@fs/${to_posix(
-				join(component.frontend_dir, exports.component)
+				join(component.frontend_dir, exports.component.gradio)
 			)}")
 			},\n`;
 	}, "");
diff --git a/js/preview/src/hooks.mjs b/js/preview/src/hooks.mjs
new file mode 100644
index 0000000000000..6edabab048b09
--- /dev/null
+++ b/js/preview/src/hooks.mjs
@@ -0,0 +1,19 @@
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export async function resolve(specifier, context, nextResolve) {
+	// Take an `import` or `require` specifier and resolve it to a URL.
+	if (specifier === "svelte/internal" || specifier === "svelte") {
+		return nextResolve(
+			join(__dirname, "frontend", "assets", "svelte", "svelte.js")
+		);
+	}
+	if (specifier.startsWith("svelte/")) {
+		return nextResolve(
+			join(__dirname, "frontend", "assets", "svelte", "svelte-submodules.js")
+		);
+	}
+	return nextResolve(specifier);
+}
diff --git a/js/preview/src/plugins.ts b/js/preview/src/plugins.ts
index 3348eed476822..2264920246eb7 100644
--- a/js/preview/src/plugins.ts
+++ b/js/preview/src/plugins.ts
@@ -44,7 +44,8 @@ export function plugins(config: ComponentConfig): PluginOption[] {
 			prebundleSvelteLibraries: false,
 			hot: true,
 			compilerOptions: {
-				discloseVersion: false
+				discloseVersion: false,
+				hydratable: true
 			},
 			extensions: _svelte_extensions,
 			preprocess: [
@@ -84,6 +85,7 @@ export function make_gradio_plugin({
 		transform(code) {
 			const new_code = code
 				.replace(RE_SVELTE_IMPORT, (str, $1, $2) => {
+					if ($1.trim().startsWith("type")) return str;
 					const identifier = $1.trim().startsWith("* as")
 						? $1.replace("* as", "").trim()
 						: $1.trim();
diff --git a/js/preview/src/register.mjs b/js/preview/src/register.mjs
new file mode 100644
index 0000000000000..aa948837ad0d3
--- /dev/null
+++ b/js/preview/src/register.mjs
@@ -0,0 +1,3 @@
+import { register } from "node:module";
+
+register("./hooks.mjs", import.meta.url);
diff --git a/js/preview/vite.config.ts b/js/preview/vite.config.ts
index 0e78dcd218f7c..decb9792bb082 100644
--- a/js/preview/vite.config.ts
+++ b/js/preview/vite.config.ts
@@ -1,5 +1,12 @@
 import { defineConfig } from "vite";
-import { cpSync } from "fs";
+import { cpSync, write } from "fs";
+import { join } from "node:path";
+import { createRequire } from "node:module";
+
+const require = createRequire(import.meta.url);
+const dir = require.resolve("./package.json");
+
+const template_dir = join(dir, "..", "..", "..", "gradio", "templates");
 
 export default defineConfig({
 	build: {
@@ -20,6 +27,13 @@ export function copy_files() {
 		name: "copy_files",
 		writeBundle() {
 			cpSync("./src/examine.py", "dist/examine.py");
+			cpSync("./src/register.mjs", join(template_dir, "register.mjs"));
+			cpSync("./src/hooks.mjs", join(template_dir, "hooks.mjs"));
+			cpSync(
+				join(template_dir, "frontend", "assets", "svelte"),
+				join(template_dir, "node", "build", "client", "_app"),
+				{ recursive: true }
+			);
 		}
 	};
 }
diff --git a/js/radio/CHANGELOG.md b/js/radio/CHANGELOG.md
index 9c87e96b4d5ff..cd9a1b626a612 100644
--- a/js/radio/CHANGELOG.md
+++ b/js/radio/CHANGELOG.md
@@ -1,5 +1,64 @@
 # @gradio/radio
 
+## 0.6.0-beta.5
+
+### Features
+
+- [#9437](https://github.com/gradio-app/gradio/pull/9437) [`c3d93be`](https://github.com/gradio-app/gradio/commit/c3d93bef94b9401747a363f7bad88a1d347d535b) - Adding new themes to Gradio 5.0.  Thanks @allisonwhilden!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.6.0-beta.4
+
+### Features
+
+- [#9521](https://github.com/gradio-app/gradio/pull/9521) [`06ef22e`](https://github.com/gradio-app/gradio/commit/06ef22e83cdd27e7afb381396d153d9db3dea16e) - Allow `info=` to render markdown.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+
+## 0.6.0-beta.3
+
+### Features
+
+- [#9519](https://github.com/gradio-app/gradio/pull/9519) [`0ab6ac5`](https://github.com/gradio-app/gradio/commit/0ab6ac5dc01b69e4f2462d00c4910f3354441227) - Fix change triggers for dropdown and radio.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.6.0-beta.2
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+
+## 0.6.0-beta.2
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.6.0-beta.1
+
+### Features
+
+- [#9216](https://github.com/gradio-app/gradio/pull/9216) [`e137b30`](https://github.com/gradio-app/gradio/commit/e137b30b1a53ca32d3cd809d31e97d5d54a4e479) - Decrease component radii and remove input shadows.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+
 ## 0.5.13
 
 ### Fixes
diff --git a/js/radio/Index.svelte b/js/radio/Index.svelte
index 8b0b5d49e067d..89e26abb5629d 100644
--- a/js/radio/Index.svelte
+++ b/js/radio/Index.svelte
@@ -31,13 +31,19 @@
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
 	export let interactive = true;
+	export let root: string;
 
 	function handle_change(): void {
 		gradio.dispatch("change");
 	}
 
-	$: value, handle_change();
-
+	let old_value = value;
+	$: {
+		if (value !== old_value) {
+			old_value = value;
+			handle_change();
+		}
+	}
 	$: disabled = !interactive;
 </script>
 
@@ -57,7 +63,7 @@
 		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 	/>
 
-	<BlockTitle {show_label} {info}>{label}</BlockTitle>
+	<BlockTitle {root} {show_label} {info}>{label}</BlockTitle>
 
 	<div class="wrap">
 		{#each choices as [display_value, internal_value], i (i)}
diff --git a/js/radio/package.json b/js/radio/package.json
index 550057534147f..a13daea8a7b9c 100644
--- a/js/radio/package.json
+++ b/js/radio/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/radio",
-	"version": "0.5.13",
+	"version": "0.6.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/radio/shared/Radio.svelte b/js/radio/shared/Radio.svelte
index b6d8ca7f2e46c..758da33ea626b 100644
--- a/js/radio/shared/Radio.svelte
+++ b/js/radio/shared/Radio.svelte
@@ -69,6 +69,7 @@
 	label.selected {
 		background: var(--checkbox-label-background-fill-selected);
 		color: var(--checkbox-label-text-color-selected);
+		border-color: var(--checkbox-label-border-color-selected);
 	}
 
 	label > * + * {
@@ -92,6 +93,16 @@
 		background-color: var(--checkbox-background-color-selected);
 	}
 
+	input:checked::after {
+		content: "";
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		border-radius: 50%;
+		background-color: white;
+	}
+
 	input:hover {
 		border-color: var(--checkbox-border-color-hover);
 		background-color: var(--checkbox-background-color-hover);
diff --git a/js/row/CHANGELOG.md b/js/row/CHANGELOG.md
index 9aa872acf8195..ac96c4211cd41 100644
--- a/js/row/CHANGELOG.md
+++ b/js/row/CHANGELOG.md
@@ -1,5 +1,55 @@
 # @gradio/row
 
+## 0.2.0-beta.3
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.5
+
+## 0.2.0-beta.3
+
+### Features
+
+- [#9577](https://github.com/gradio-app/gradio/pull/9577) [`9f532e0`](https://github.com/gradio-app/gradio/commit/9f532e03a6b91b9a5592152c19b9b2611774cae7) - Equal height columns.  Thanks @aliabid94!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+
+## 0.2.0-beta.2
+
+### Features
+
+- [#9496](https://github.com/gradio-app/gradio/pull/9496) [`1647ebd`](https://github.com/gradio-app/gradio/commit/1647ebddc3e2ed6fc143a62629409e32afcc5801) - UI theme fixes.  Thanks @aliabid94!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.3
+
+## 0.2.0-beta.1
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+
+## 0.2.0-beta.1
+
+### Features
+
+- [#9313](https://github.com/gradio-app/gradio/pull/9313) [`1fef9d9`](https://github.com/gradio-app/gradio/commit/1fef9d9a26f0ebce4de18c486702661f6539b1c6) - Standardize `height` across components and add `max_height` and `min_height` parameters where appropriate.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.1.5-beta.0
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+
 ## 0.1.5
 
 ### Fixes
diff --git a/js/row/Index.svelte b/js/row/Index.svelte
index 211ed51ef3b38..7a85a242af213 100644
--- a/js/row/Index.svelte
+++ b/js/row/Index.svelte
@@ -11,6 +11,22 @@
 	export let loading_status: LoadingStatus | undefined = undefined;
 	export let gradio: Gradio | undefined = undefined;
 	export let show_progress = false;
+	export let height: number | string | undefined;
+	export let min_height: number | string | undefined;
+	export let max_height: number | string | undefined;
+
+	const get_dimension = (
+		dimension_value: string | number | undefined
+	): string | undefined => {
+		if (dimension_value === undefined) {
+			return undefined;
+		}
+		if (typeof dimension_value === "number") {
+			return dimension_value + "px";
+		} else if (typeof dimension_value === "string") {
+			return dimension_value;
+		}
+	};
 </script>
 
 <div
@@ -19,8 +35,11 @@
 	class:unequal-height={equal_height === false}
 	class:stretch={equal_height}
 	class:hide={!visible}
+	style:height={get_dimension(height)}
+	style:max-height={get_dimension(max_height)}
+	style:min-height={get_dimension(min_height)}
 	id={elem_id}
-	class={elem_classes.join(" ")}
+	class="row {elem_classes.join(' ')}"
 >
 	{#if loading_status && show_progress && gradio}
 		<StatusTracker
@@ -67,6 +86,12 @@
 		align-items: stretch;
 	}
 
+	.stretch > :global(.column > *),
+	.stretch > :global(.column > .form > *) {
+		flex-grow: 1;
+		flex-shrink: 0;
+	}
+
 	div > :global(*),
 	div > :global(.form > *) {
 		flex: 1 1 0%;
diff --git a/js/row/package.json b/js/row/package.json
index b0ac64228f26b..4b04d46470a9f 100644
--- a/js/row/package.json
+++ b/js/row/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/row",
-	"version": "0.1.5",
+	"version": "0.2.0-beta.3",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/simpledropdown/CHANGELOG.md b/js/simpledropdown/CHANGELOG.md
index bf15f57fe20a5..37b628872c622 100644
--- a/js/simpledropdown/CHANGELOG.md
+++ b/js/simpledropdown/CHANGELOG.md
@@ -1,5 +1,56 @@
 # @gradio/simpledropdown
 
+## 0.3.0-beta.5
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.3.0-beta.4
+
+### Features
+
+- [#9521](https://github.com/gradio-app/gradio/pull/9521) [`06ef22e`](https://github.com/gradio-app/gradio/commit/06ef22e83cdd27e7afb381396d153d9db3dea16e) - Allow `info=` to render markdown.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+
+## 0.2.13-beta.3
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.2.13-beta.2
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+
+## 0.2.13-beta.2
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.2.13-beta.1
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+
 ## 0.2.13
 
 ### Fixes
diff --git a/js/simpledropdown/Index.svelte b/js/simpledropdown/Index.svelte
index a5bbf7c14d935..6f3d125630ad0 100644
--- a/js/simpledropdown/Index.svelte
+++ b/js/simpledropdown/Index.svelte
@@ -15,6 +15,7 @@
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
+	export let root: string;
 	export let gradio: Gradio<{
 		change: string;
 		input: never;
@@ -62,7 +63,7 @@
 	{/if}
 
 	<label class:container>
-		<BlockTitle {show_label} info={undefined}>{label}</BlockTitle>
+		<BlockTitle {root} {show_label} info={undefined}>{label}</BlockTitle>
 		<select disabled={!interactive} bind:value={display_value}>
 			{#each choices as choice}
 				<option>{choice[0]}</option>
diff --git a/js/simpledropdown/package.json b/js/simpledropdown/package.json
index a464756d56271..7cb00a4106964 100644
--- a/js/simpledropdown/package.json
+++ b/js/simpledropdown/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/simpledropdown",
-	"version": "0.2.13",
+	"version": "0.3.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/simpleimage/CHANGELOG.md b/js/simpleimage/CHANGELOG.md
index 06670ff6615b3..d899c035cc15b 100644
--- a/js/simpleimage/CHANGELOG.md
+++ b/js/simpleimage/CHANGELOG.md
@@ -1,5 +1,76 @@
 # @gradio/simpleimage
 
+## 0.8.0-beta.7
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.7
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.8.0-beta.6
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+- @gradio/client@1.6.0-beta.4
+- @gradio/upload@0.13.0-beta.6
+
+## 0.8.0-beta.5
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.5
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.8.0-beta.4
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/upload@0.13.0-beta.4
+- @gradio/wasm@0.14.0-beta.3
+
+## 0.8.0-beta.3
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.3
+- @gradio/client@1.6.0-beta.3
+
+## 0.8.0-beta.2
+
+### Features
+
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+- [#9250](https://github.com/gradio-app/gradio/pull/9250) [`350b0a5`](https://github.com/gradio-app/gradio/commit/350b0a5cafb9176f914f62e7c90de51d4352cc77) - Improve Icon Button consistency.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/upload@0.13.0-beta.2
+- @gradio/wasm@0.14.0-beta.2
+- @gradio/client@1.6.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.7.1-beta.1
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/client@1.6.0-beta.1
+- @gradio/upload@0.12.4-beta.1
+- @gradio/wasm@0.13.1-beta.1
+
 ## 0.7.1
 
 ### Fixes
diff --git a/js/simpleimage/Index.svelte b/js/simpleimage/Index.svelte
index fdd797236b105..8a7557d3906c6 100644
--- a/js/simpleimage/Index.svelte
+++ b/js/simpleimage/Index.svelte
@@ -91,8 +91,8 @@
 		/>
 
 		<ImageUploader
-			upload={gradio.client.upload}
-			stream_handler={gradio.client.stream}
+			upload={(...args) => gradio.client.upload(...args)}
+			stream_handler={(...args) => gradio.client.stream(...args)}
 			bind:value
 			{root}
 			on:clear={() => gradio.dispatch("clear")}
diff --git a/js/simpleimage/package.json b/js/simpleimage/package.json
index 1ebd423ca11ab..3b5ed69fa586e 100644
--- a/js/simpleimage/package.json
+++ b/js/simpleimage/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/simpleimage",
-	"version": "0.7.1",
+	"version": "0.8.0-beta.7",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/simpleimage/shared/ClearImage.svelte b/js/simpleimage/shared/ClearImage.svelte
index 87a2ea653568c..8726267bbdfa3 100644
--- a/js/simpleimage/shared/ClearImage.svelte
+++ b/js/simpleimage/shared/ClearImage.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
-	import { IconButton } from "@gradio/atoms";
+	import { IconButton, IconButtonWrapper } from "@gradio/atoms";
 	import { Clear } from "@gradio/icons";
 
 	const dispatch = createEventDispatcher();
 </script>
 
-<div>
+<IconButtonWrapper>
 	<IconButton
 		Icon={Clear}
 		label="Remove Image"
@@ -15,16 +15,4 @@
 			event.stopPropagation();
 		}}
 	/>
-</div>
-
-<style>
-	div {
-		display: flex;
-		position: absolute;
-		top: var(--size-2);
-		right: var(--size-2);
-		justify-content: flex-end;
-		gap: var(--spacing-sm);
-		z-index: var(--layer-5);
-	}
-</style>
+</IconButtonWrapper>
diff --git a/js/simpleimage/shared/ImagePreview.svelte b/js/simpleimage/shared/ImagePreview.svelte
index f522c92a79be7..b1bee67586b55 100644
--- a/js/simpleimage/shared/ImagePreview.svelte
+++ b/js/simpleimage/shared/ImagePreview.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
-	import { BlockLabel, Empty, IconButton } from "@gradio/atoms";
+	import {
+		BlockLabel,
+		Empty,
+		IconButton,
+		IconButtonWrapper
+	} from "@gradio/atoms";
 	import { Download } from "@gradio/icons";
 	import { DownloadLink } from "@gradio/wasm/svelte";
 
@@ -23,13 +28,13 @@
 {#if value === null || !value.url}
 	<Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
 {:else}
-	<div class="icon-buttons">
+	<IconButtonWrapper>
 		{#if show_download_button}
 			<DownloadLink href={value.url} download={value.orig_name || "image"}>
 				<IconButton Icon={Download} label={i18n("common.download")} />
 			</DownloadLink>
 		{/if}
-	</div>
+	</IconButtonWrapper>
 	<button>
 		<div class:selectable class="image-container">
 			<img src={value.url} alt="" loading="lazy" />
@@ -53,12 +58,4 @@
 	.selectable {
 		cursor: crosshair;
 	}
-
-	.icon-buttons {
-		display: flex;
-		position: absolute;
-		top: 6px;
-		right: 6px;
-		gap: var(--size-1);
-	}
 </style>
diff --git a/js/simpletextbox/CHANGELOG.md b/js/simpletextbox/CHANGELOG.md
index 9e566f5560f23..8fe74a334c4c7 100644
--- a/js/simpletextbox/CHANGELOG.md
+++ b/js/simpletextbox/CHANGELOG.md
@@ -1,5 +1,56 @@
 # @gradio/simpletextbox
 
+## 0.3.0-beta.5
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.3.0-beta.4
+
+### Features
+
+- [#9521](https://github.com/gradio-app/gradio/pull/9521) [`06ef22e`](https://github.com/gradio-app/gradio/commit/06ef22e83cdd27e7afb381396d153d9db3dea16e) - Allow `info=` to render markdown.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+
+## 0.2.13-beta.3
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.2.13-beta.2
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+
+## 0.2.13-beta.2
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.2.13-beta.1
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+
 ## 0.2.13
 
 ### Fixes
diff --git a/js/simpletextbox/Index.svelte b/js/simpletextbox/Index.svelte
index c9fa468926c7e..5e8e3d82cc2b6 100644
--- a/js/simpletextbox/Index.svelte
+++ b/js/simpletextbox/Index.svelte
@@ -27,6 +27,7 @@
 	export let value_is_output = false;
 	export let interactive: boolean;
 	export let rtl = false;
+	export let root: string;
 
 	let el: HTMLTextAreaElement | HTMLInputElement;
 	const container = true;
@@ -72,7 +73,7 @@
 	{/if}
 
 	<label class:container>
-		<BlockTitle {show_label} info={undefined}>{label}</BlockTitle>
+		<BlockTitle {root} {show_label} info={undefined}>{label}</BlockTitle>
 
 		<input
 			data-testid="textbox"
diff --git a/js/simpletextbox/package.json b/js/simpletextbox/package.json
index e3b934f085c29..3f09dac7f9072 100644
--- a/js/simpletextbox/package.json
+++ b/js/simpletextbox/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/simpletextbox",
-	"version": "0.2.13",
+	"version": "0.3.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/slider/CHANGELOG.md b/js/slider/CHANGELOG.md
index 4458067227221..638d4036a26ee 100644
--- a/js/slider/CHANGELOG.md
+++ b/js/slider/CHANGELOG.md
@@ -1,5 +1,62 @@
 # @gradio/slider
 
+## 0.5.0-beta.5
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.5.0-beta.4
+
+### Features
+
+- [#9521](https://github.com/gradio-app/gradio/pull/9521) [`06ef22e`](https://github.com/gradio-app/gradio/commit/06ef22e83cdd27e7afb381396d153d9db3dea16e) - Allow `info=` to render markdown.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+
+## 0.5.0-beta.3
+
+### Features
+
+- [#9481](https://github.com/gradio-app/gradio/pull/9481) [`2510a6e`](https://github.com/gradio-app/gradio/commit/2510a6e978a49432d7820e9518f164a70cf8acc8) - Fix `slider-color` var.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.5.0-beta.2
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+
+## 0.5.0-beta.2
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.5.0-beta.1
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+
+## 0.5.0-beta.0
+
+### Features
+
+- [#9197](https://github.com/gradio-app/gradio/pull/9197) [`6773c4d`](https://github.com/gradio-app/gradio/commit/6773c4da22f957a11b2a07f032ce13c7b4c94f8c) - Redesign `gr.Slider()`.  Thanks @hannahblair!
+
 ## 0.4.13
 
 ### Fixes
diff --git a/js/slider/Index.svelte b/js/slider/Index.svelte
index d5a6a22399485..8288c076b5605 100644
--- a/js/slider/Index.svelte
+++ b/js/slider/Index.svelte
@@ -19,6 +19,8 @@
 	export let elem_classes: string[] = [];
 	export let visible = true;
 	export let value = 0;
+	let initial_value = value;
+
 	export let label = gradio.i18n("slider.slider");
 	export let info: string | undefined = undefined;
 	export let container = true;
@@ -31,12 +33,17 @@
 	export let interactive: boolean;
 	export let loading_status: LoadingStatus;
 	export let value_is_output = false;
+	export let root: string;
 
-	let rangeInput: HTMLInputElement;
-	let numberInput: HTMLInputElement;
+	let range_input: HTMLInputElement;
+	let number_input: HTMLInputElement;
 
 	const id = `range_id_${_id++}`;
 
+	let window_width: number;
+
+	$: minimum_value = minimum ?? 0;
+
 	function handle_change(): void {
 		gradio.dispatch("change");
 		if (!value_is_output) {
@@ -45,7 +52,7 @@
 	}
 	afterUpdate(() => {
 		value_is_output = false;
-		setSlider();
+		set_slider();
 	});
 
 	function handle_release(e: MouseEvent): void {
@@ -56,16 +63,18 @@
 		value = Math.min(Math.max(value, minimum), maximum);
 	}
 
-	function setSlider(): void {
-		setSliderRange();
-		rangeInput.addEventListener("input", setSliderRange);
-		numberInput.addEventListener("input", setSliderRange);
+	function set_slider(): void {
+		set_slider_range();
+		range_input.addEventListener("input", set_slider_range);
+		number_input.addEventListener("input", set_slider_range);
 	}
-	function setSliderRange(): void {
-		const dividend = Number(rangeInput.value) - Number(rangeInput.min);
-		const divisor = Number(rangeInput.max) - Number(rangeInput.min);
-		const h = divisor === 0 ? 0 : dividend / divisor;
-		rangeInput.style.backgroundSize = h * 100 + "% 100%";
+	function set_slider_range(): void {
+		const range = range_input;
+		const min = Number(range.min) || 0;
+		const max = Number(range.max) || 100;
+		const val = Number(range.value) || 0;
+		const percentage = ((val - min) / (max - min)) * 100;
+		range.style.setProperty("--range_progress", `${percentage}%`);
 	}
 
 	$: disabled = !interactive;
@@ -73,8 +82,21 @@
 	// When the value changes, dispatch the change event via handle_change()
 	// See the docs for an explanation: https://svelte.dev/docs/svelte-components#script-3-$-marks-a-statement-as-reactive
 	$: value, handle_change();
+
+	function handle_resize(): void {
+		window_width = window.innerWidth;
+	}
+
+	function reset_value(): void {
+		value = initial_value;
+		set_slider_range();
+		gradio.dispatch("change");
+		gradio.dispatch("release", value);
+	}
 </script>
 
+<svelte:window on:resize={handle_resize} />
+
 <Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
 	<StatusTracker
 		autoscroll={gradio.autoscroll}
@@ -86,38 +108,51 @@
 	<div class="wrap">
 		<div class="head">
 			<label for={id}>
-				<BlockTitle {show_label} {info}>{label}</BlockTitle>
+				<BlockTitle {root} {show_label} {info}>{label}</BlockTitle>
 			</label>
+			<div class="tab-like-container">
+				<input
+					aria-label={`number input for ${label}`}
+					data-testid="number-input"
+					type="number"
+					bind:value
+					bind:this={number_input}
+					min={minimum}
+					max={maximum}
+					on:blur={clamp}
+					{step}
+					{disabled}
+					on:pointerup={handle_release}
+				/>
+				<button
+					class="reset-button"
+					on:click={reset_value}
+					{disabled}
+					aria-label="Reset to default value"
+				>
+					↺
+				</button>
+			</div>
+		</div>
 
+		<div class="slider_input_container">
+			<span class="min_value">{minimum_value}</span>
 			<input
-				aria-label={`number input for ${label}`}
-				data-testid="number-input"
-				type="number"
+				type="range"
+				{id}
+				name="cowbell"
 				bind:value
-				bind:this={numberInput}
+				bind:this={range_input}
 				min={minimum}
 				max={maximum}
-				on:blur={clamp}
 				{step}
 				{disabled}
 				on:pointerup={handle_release}
+				aria-label={`range slider for ${label}`}
 			/>
+			<span class="max_value">{maximum}</span>
 		</div>
 	</div>
-
-	<input
-		type="range"
-		{id}
-		name="cowbell"
-		bind:value
-		bind:this={rangeInput}
-		min={minimum}
-		max={maximum}
-		{step}
-		{disabled}
-		on:pointerup={handle_release}
-		aria-label={`range slider for ${label}`}
-	/>
 </Block>
 
 <style>
@@ -128,106 +163,202 @@
 	}
 
 	.head {
+		margin-bottom: var(--size-2);
 		display: flex;
 		justify-content: space-between;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+
+	.slider_input_container {
+		display: flex;
+		align-items: center;
+		gap: var(--size-2);
+	}
+
+	input[type="range"] {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 100%;
+		cursor: pointer;
+		outline: none;
+		border-radius: var(--radius-xl);
+		min-width: var(--size-28);
+	}
+
+	/* webkit track */
+	input[type="range"]::-webkit-slider-runnable-track {
+		height: var(--size-2);
+		background: var(--neutral-200);
+		border-radius: var(--radius-xl);
+	}
+
+	/* webkit thumb */
+	input[type="range"]::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		height: var(--size-4);
+		width: var(--size-4);
+		background-color: white;
+		border-radius: 50%;
+		margin-top: -5px;
+		box-shadow:
+			0 0 0 1px rgba(247, 246, 246, 0.739),
+			1px 1px 4px rgba(0, 0, 0, 0.1);
+	}
+
+	input[type="range"]::-webkit-slider-runnable-track {
+		background: linear-gradient(
+			to right,
+			var(--slider-color) var(--range_progress),
+			var(--neutral-200) var(--range_progress)
+		);
+	}
+
+	/* firefox */
+	input[type="range"]::-moz-range-track {
+		height: var(--size-2);
+		background: var(--neutral-200);
+		border-radius: var(--radius-xl);
+	}
+
+	input[type="range"]::-moz-range-thumb {
+		appearance: none;
+		height: var(--size-4);
+		width: var(--size-4);
+		background-color: white;
+		border-radius: 50%;
+		border: none;
+		margin-top: calc(-1 * (var(--size-4) - var(--size-2)) / 2);
+		box-shadow:
+			0 0 0 1px rgba(247, 246, 246, 0.739),
+			1px 1px 4px rgba(0, 0, 0, 0.1);
+	}
+
+	input[type="range"]::-moz-range-progress {
+		height: var(--size-2);
+		background-color: var(--slider-color);
+		border-radius: var(--radius-xl);
 	}
 
 	input[type="number"] {
 		display: block;
-		position: relative;
-		outline: none !important;
-		box-shadow: var(--input-shadow);
-		border: var(--input-border-width) solid var(--input-border-color);
-		border-radius: var(--input-radius);
+		outline: none;
+		border: 1px solid var(--input-border-color);
+		border-radius: var(--radius-sm);
 		background: var(--input-background-fill);
-		padding: var(--size-2) var(--size-2);
-		height: var(--size-6);
+		padding: var(--size-2) var(--size-3);
+		height: var(--size-8);
 		color: var(--body-text-color);
 		font-size: var(--input-text-size);
 		line-height: var(--line-sm);
 		text-align: center;
+		min-width: var(--size-16);
+		transition: border-color 0.15s ease-in-out;
 	}
 
-	input:disabled {
-		-webkit-text-fill-color: var(--body-text-color);
-		-webkit-opacity: 1;
-		opacity: 1;
+	input[type="number"]:focus {
+		box-shadow: none;
+		border-width: 2px;
 	}
 
-	input[type="number"]:focus {
-		box-shadow: var(--input-shadow-focus);
-		border-color: var(--input-border-color-focus);
+	input:disabled,
+	input[disabled] {
+		-webkit-text-fill-color: var(--body-text-color);
+		opacity: 1;
+		cursor: not-allowed;
 	}
 
 	input::placeholder {
 		color: var(--input-placeholder-color);
 	}
 
-	input[disabled] {
+	input[type="range"][disabled] {
+		opacity: 0.6;
+	}
+
+	input[type="range"][disabled]::-webkit-slider-thumb,
+	input[type="range"][disabled]::-moz-range-thumb,
+	input[type="range"][disabled]::-ms-thumb,
+	input[type="range"][disabled]::-webkit-slider-thumb:hover,
+	input[type="range"][disabled]::-moz-range-thumb:hover,
+	input[type="range"][disabled]::-moz-range-track:hover {
+		background-color: var(--body-text-color-subdued);
 		cursor: not-allowed;
 	}
 
-	input[type="range"] {
-		-webkit-appearance: none;
-		appearance: none;
-		width: 100%;
-		accent-color: var(--slider-color);
-		height: 4px;
-		background: var(--neutral-200);
-		border-radius: 5px;
-		background-image: linear-gradient(var(--slider-color), var(--slider-color));
-		background-size: 0% 100%;
-		background-repeat: no-repeat;
+	.min_value,
+	.max_value {
+		font-size: var(--text-sm);
+		color: var(--body-text-color-subdued);
 	}
 
-	input[type="range"]::-webkit-slider-thumb {
-		-webkit-appearance: none;
-		box-shadow: var(--input-shadow);
-		border: solid 0.5px #ddd;
-		height: 20px;
-		width: 20px;
-		border-radius: 50%;
-		background-color: white;
-		cursor: pointer;
-		margin-top: -2px;
-		transition: background-color 0.1s ease;
+	.min_value {
+		margin-right: var(--size-0-5);
 	}
 
-	input[type="range"]::-webkit-slider-thumb:hover {
-		background: var(--neutral-50);
+	.max_value {
+		margin-left: var(--size-0-5);
+		margin-right: var(--size-0-5);
 	}
 
-	input[type="range"][disabled] {
-		background: var(--body-text-color-subdued);
+	@media (max-width: 480px) {
+		.min_value,
+		.max_value {
+			display: none;
+		}
 	}
 
-	input[type="range"][disabled]::-webkit-slider-thumb {
-		cursor: not-allowed;
-		background-color: var(--body-text-color-subdued);
+	@media (max-width: 420px) {
+		.head .tab-like-container {
+			margin-bottom: var(--size-4);
+		}
 	}
 
-	input[type="range"][disabled]::-moz-range-track {
-		cursor: not-allowed;
-		background-color: var(--body-text-color-subdued);
+	.tab-like-container {
+		display: flex;
+		align-items: stretch;
+		border: 1px solid var(--input-border-color);
+		border-radius: var(--radius-sm);
+		overflow: hidden;
+		height: var(--size-6);
 	}
 
-	input[type="range"][disabled]::-webkit-slider-thumb:hover {
-		background-color: var(--body-text-color-subdued);
+	input[type="number"] {
+		border: none;
+		border-radius: 0;
+		padding: var(--size-1) var(--size-2);
+		height: 100%;
+		min-width: var(--size-14);
+		font-size: var(--text-sm);
 	}
 
-	input[type="range"][disabled]::-moz-range-track:hover {
-		background-color: var(--body-text-color-subdued);
+	input[type="number"]:focus {
+		box-shadow: inset 0 0 0 1px var(--color-accent);
+		border-radius: 3px 0 0px 3px;
 	}
 
-	input[type="range"]::-webkit-slider-runnable-track {
-		-webkit-appearance: none;
-		box-shadow: none;
+	.reset-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: none;
 		border: none;
-		background: transparent;
-		height: 400%;
+		border-left: 1px solid var(--input-border-color);
+		cursor: pointer;
+		font-size: var(--text-sm);
+		color: var(--body-text-color);
+		padding: 0 var(--size-2);
+		min-width: var(--size-6);
+		transition: background-color 0.15s ease-in-out;
 	}
 
-	input[type="range"]::-moz-range-track {
-		height: 12px;
+	.reset-button:hover:not(:disabled) {
+		background-color: var(--background-fill-secondary);
+	}
+
+	.reset-button:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
 	}
 </style>
diff --git a/js/slider/Slider.component.spec.ts b/js/slider/Slider.component.spec.ts
index 4ce0c206f43b6..cc9225dd98c7f 100644
--- a/js/slider/Slider.component.spec.ts
+++ b/js/slider/Slider.component.spec.ts
@@ -16,38 +16,6 @@ const loading_status: LoadingStatus = {
 	show_progress: "full"
 };
 
-//taken from: https://github.com/microsoft/playwright/issues/20032
-async function changeSlider(
-	page: Page,
-	thumb: Locator,
-	slider: Locator,
-	targetPercentage: number
-) {
-	const thumbBoundingBox = await thumb.boundingBox();
-	const sliderBoundingBox = await slider.boundingBox();
-
-	if (thumbBoundingBox === null || sliderBoundingBox === null) {
-		return; // NOTE it's probably better to throw an error here
-	}
-
-	// Start from the middle of the slider's thumb
-	const startPoint = {
-		x: thumbBoundingBox.x + thumbBoundingBox.width / 2,
-		y: thumbBoundingBox.y + thumbBoundingBox.height / 2
-	};
-
-	// Slide it to some endpoint determined by the target percentage
-	const endPoint = {
-		x: sliderBoundingBox.x + sliderBoundingBox.width * targetPercentage,
-		y: thumbBoundingBox.y + thumbBoundingBox.height / 2
-	};
-
-	await page.mouse.move(startPoint.x, startPoint.y);
-	await page.mouse.down();
-	await page.mouse.move(endPoint.x, endPoint.y);
-	await page.mouse.up();
-}
-
 test("Slider Default Value And Label rendered", async ({ mount }) => {
 	const component = await mount(Slider, {
 		props: {
@@ -113,22 +81,32 @@ test("Slider Maximum/Minimum values", async ({ mount, page }) => {
 		name: "My Slider"
 	});
 
-	await expect(sliderNumberInput).toHaveValue("3");
-
-	await sliderNumberInput.press("ArrowUp");
-
-	await expect(sliderNumberInput).toHaveValue("4");
-
-	const sliderRangeInput = component.getByRole("slider");
-
-	await sliderRangeInput.focus();
+	const sliderRangeInput = component.getByRole("slider", {
+		name: "range slider for My Slider"
+	});
 
-	sliderRangeInput.press("ArrowRight");
+	await expect(sliderNumberInput).toHaveValue("3");
 
+	// test number input
+	await sliderNumberInput.fill("5");
+	await sliderNumberInput.press("Enter");
 	await expect(sliderNumberInput).toHaveValue("5");
 
-	changeSlider(page, sliderRangeInput, sliderRangeInput, 2);
+	// test slider thumb movement
+	await sliderRangeInput.focus();
+	await sliderRangeInput.evaluate((el: HTMLInputElement) => {
+		el.value = "7";
+		el.dispatchEvent(new Event("input", { bubbles: true }));
+		el.dispatchEvent(new Event("change", { bubbles: true }));
+	});
+	await expect(sliderNumberInput).toHaveValue("7");
 
+	// test maximum value
+	await sliderRangeInput.evaluate((el: HTMLInputElement) => {
+		el.value = "10";
+		el.dispatchEvent(new Event("input", { bubbles: true }));
+		el.dispatchEvent(new Event("change", { bubbles: true }));
+	});
 	await expect(sliderNumberInput).toHaveValue("10");
 });
 
@@ -162,14 +140,25 @@ test("Slider Change event", async ({ mount, page }) => {
 		name: "My Slider"
 	});
 
-	const sliderRangeInput = component.getByRole("slider");
+	const sliderRangeInput = component.getByRole("slider", {
+		name: "range slider for My Slider"
+	});
 
 	await expect(sliderNumberInput).toHaveValue("3");
 
-	await changeSlider(page, sliderRangeInput, sliderRangeInput, 0.7);
+	// change value using slider thumb
+	await sliderRangeInput.evaluate((el: HTMLInputElement) => {
+		el.value = "7";
+		el.dispatchEvent(new Event("input", { bubbles: true }));
+		el.dispatchEvent(new Event("change", { bubbles: true }));
+	});
 
 	await expect(sliderNumberInput).toHaveValue("7");
 
+	await sliderRangeInput.evaluate((el: HTMLInputElement) => {
+		el.dispatchEvent(new Event("pointerup", { bubbles: true }));
+	});
+
 	// More than one change event and one release event.
 	await expect(events.change).toBeGreaterThanOrEqual(1);
 	await expect(events.release).toBeGreaterThanOrEqual(1);
diff --git a/js/slider/package.json b/js/slider/package.json
index 5ed0f3d8b07f2..3e16b109c690d 100644
--- a/js/slider/package.json
+++ b/js/slider/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/slider",
-	"version": "0.4.13",
+	"version": "0.5.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/spa/.gitignore b/js/spa/.gitignore
deleted file mode 100644
index 6f8fe001ac474..0000000000000
--- a/js/spa/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-/src/lite/theme.css
diff --git a/js/spa/CHANGELOG.md b/js/spa/CHANGELOG.md
index 58517af2b9866..1f6e05215b64e 100644
--- a/js/spa/CHANGELOG.md
+++ b/js/spa/CHANGELOG.md
@@ -1,5 +1,79 @@
 # @self/spa
 
+## 0.1.0-beta.3
+
+### Features
+
+- [#9590](https://github.com/gradio-app/gradio/pull/9590) [`e853c41`](https://github.com/gradio-app/gradio/commit/e853c413583d91186aef3aceb0849d0ec0494834) - SSR e2e + fixes.  Thanks @pngwn!
+- [#9482](https://github.com/gradio-app/gradio/pull/9482) [`bd6c5f2`](https://github.com/gradio-app/gradio/commit/bd6c5f237b0631d86273c7684c3bf2b1011992a3) - Fix custom component CLI on main/5.0.  Thanks @freddyaboulton!
+- [#9576](https://github.com/gradio-app/gradio/pull/9576) [`430a26a`](https://github.com/gradio-app/gradio/commit/430a26a4fbcbabb5e9ddb6173bf658a00960e88e) - Fix reload mode.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/core@0.1.0-beta.6
+- @self/build@0.1.0-beta.3
+
+## 0.1.0-beta.2
+
+### Dependency updates
+
+- @gradio/client@1.6.0-beta.4
+- @gradio/core@0.1.0-beta.5
+
+## 0.1.0-beta.2
+
+### Dependency updates
+
+- @gradio/core@0.1.0-beta.4
+
+## 0.1.0-beta.2
+
+### Features
+
+- [#9464](https://github.com/gradio-app/gradio/pull/9464) [`3ac5d9c`](https://github.com/gradio-app/gradio/commit/3ac5d9c972576d82bc365a6532e6e12f55441a30) - Fix plots.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/wasm@0.14.0-beta.3
+- @gradio/core@0.1.0-beta.4
+
+## 0.1.0-beta.1
+
+### Dependency updates
+
+- @gradio/core@0.1.0-beta.3
+
+## 0.1.0-beta.1
+
+### Dependency updates
+
+- @gradio/client@1.6.0-beta.3
+- @gradio/core@0.1.0-beta.3
+
+## 0.1.0-beta.1
+
+### Features
+
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+- [#9269](https://github.com/gradio-app/gradio/pull/9269) [`e05f568`](https://github.com/gradio-app/gradio/commit/e05f568f47e9fa33ef91dbbe5cc477d32762bc36) - Fix reload mode and streaming in 5.0 dev.  Thanks @freddyaboulton!
+- [#9367](https://github.com/gradio-app/gradio/pull/9367) [`1c94328`](https://github.com/gradio-app/gradio/commit/1c94328cfe6ce0676c3850f5e9da5bcabf9ee570) - add local fonts and update themes.  Thanks @hannahblair!
+- [#9335](https://github.com/gradio-app/gradio/pull/9335) [`b543465`](https://github.com/gradio-app/gradio/commit/b543465d06d7d1b399c4d0755da05e022611a97f) - Remove lite/theme.css from the Git-managed file tree.  Thanks @whitphx!
+
+### Dependency updates
+
+- @gradio/wasm@0.14.0-beta.2
+- @gradio/client@1.6.0-beta.2
+- @gradio/core@0.1.0-beta.2
+- @self/build@0.1.0-beta.2
+
+## 0.0.3-beta.0
+
+### Dependency updates
+
+- @gradio/client@1.6.0-beta.1
+- @gradio/wasm@0.13.1-beta.1
+- @gradio/theme@0.3.0-beta.1
+
 ## 0.0.3
 
 ### Fixes
diff --git a/js/spa/component_loader.js b/js/spa/component_loader.js
index 5b4362f8acc9f..96d75931af22a 100644
--- a/js/spa/component_loader.js
+++ b/js/spa/component_loader.js
@@ -1,6 +1,7 @@
 // @ts-nocheck
 
 const request_map = {};
+const is_browser = typeof window !== "undefined";
 
 export function load_component({ api_url, name, id, variant }) {
 	const comps = window.__GRADIO__CC__;
@@ -59,6 +60,9 @@ export function load_component({ api_url, name, id, variant }) {
 }
 
 function load_css(url) {
+	if (!is_browser) {
+		return Promise.resolve();
+	}
 	return new Promise((resolve, reject) => {
 		const link = document.createElement("link");
 		link.rel = "stylesheet";
@@ -73,7 +77,7 @@ function get_component_with_css(api_url, id, variant) {
 	return Promise.all([
 		load_css(`${api_url}/custom_component/${id}/${variant}/style.css`),
 		import(
-			/* @vite-ignore */ `${api_url}/custom_component/${id}/${variant}/index.js`
+			/* @vite-ignore */ `${api_url}/custom_component/${id}/client/${variant}/index.js`
 		)
 	]).then(([_, module]) => {
 		return module;
diff --git a/js/spa/package.json b/js/spa/package.json
index db858da734d44..af48164469c4a 100644
--- a/js/spa/package.json
+++ b/js/spa/package.json
@@ -1,26 +1,16 @@
 {
 	"name": "@self/spa",
-	"version": "0.0.3",
+	"version": "0.1.0-beta.3",
 	"private": true,
 	"type": "module",
 	"scripts": {
 		"dev": "vite --port 9876",
-		"dev:lite": "run-p dev:lite:*",
-		"dev:lite:self": "vite --port 9876 --mode development:lite",
-		"dev:lite:worker": "pnpm --filter @gradio/wasm dev",
 		"build": "vite build --mode production --emptyOutDir",
-		"cssbuild": "python ../../scripts/generate_theme.py --outfile ./src/lite/theme.css",
-		"pybuild:gradio": "cd ../../ && hatch build -t lite",
-		"pybuild:gradio-client": "cd ../../client/python && python -m build",
-		"pybuild": "run-p pybuild:*",
-		"build:lite": "pnpm pybuild && pnpm cssbuild && pnpm --filter @gradio/client build && pnpm --filter @gradio/wasm build && vite build --mode production:lite",
 		"preview": "vite preview",
 		"test:snapshot": "pnpm exec playwright test snapshots/ --config=../../.config/playwright.config.js",
 		"test:browser": "pnpm exec playwright test test/ --grep-invert 'reload.spec.ts' --config=../../.config/playwright.config.js",
 		"test:browser:dev": "pnpm exec playwright test test/ --ui --config=../../.config/playwright.config.js",
 		"test:browser:reload": "CI=1 pnpm exec playwright test test/ --grep 'reload.spec.ts' --config=../../.config/playwright.config.js",
-		"test:browser:lite": "GRADIO_E2E_TEST_LITE=1 pnpm test:browser",
-		"test:browser:lite:dev": "GRADIO_E2E_TEST_LITE=1 pnpm test:browser:dev",
 		"build:css": "pollen -c pollen.config.cjs -o src/pollen-dev.css"
 	},
 	"devDependencies": {
diff --git a/js/spa/public/static/fonts/IBMPlexMono/IBMPlexMono-Bold.woff2 b/js/spa/public/static/fonts/IBMPlexMono/IBMPlexMono-Bold.woff2
new file mode 100644
index 0000000000000..add42af3b3fa7
Binary files /dev/null and b/js/spa/public/static/fonts/IBMPlexMono/IBMPlexMono-Bold.woff2 differ
diff --git a/js/spa/public/static/fonts/IBMPlexMono/IBMPlexMono-Regular.woff2 b/js/spa/public/static/fonts/IBMPlexMono/IBMPlexMono-Regular.woff2
new file mode 100644
index 0000000000000..d0d7ded907912
Binary files /dev/null and b/js/spa/public/static/fonts/IBMPlexMono/IBMPlexMono-Regular.woff2 differ
diff --git a/js/spa/public/static/fonts/IBMPlexSans/IBMPlexSans-Bold.woff2 b/js/spa/public/static/fonts/IBMPlexSans/IBMPlexSans-Bold.woff2
new file mode 100644
index 0000000000000..0ded50b836c0b
Binary files /dev/null and b/js/spa/public/static/fonts/IBMPlexSans/IBMPlexSans-Bold.woff2 differ
diff --git a/js/spa/public/static/fonts/IBMPlexSans/IBMPlexSans-Regular.woff2 b/js/spa/public/static/fonts/IBMPlexSans/IBMPlexSans-Regular.woff2
new file mode 100644
index 0000000000000..163f065415ed0
Binary files /dev/null and b/js/spa/public/static/fonts/IBMPlexSans/IBMPlexSans-Regular.woff2 differ
diff --git a/js/spa/public/static/fonts/Inconsolata/Inconsolata-Bold.woff2 b/js/spa/public/static/fonts/Inconsolata/Inconsolata-Bold.woff2
new file mode 100644
index 0000000000000..c06f290dd3667
Binary files /dev/null and b/js/spa/public/static/fonts/Inconsolata/Inconsolata-Bold.woff2 differ
diff --git a/js/spa/public/static/fonts/Inconsolata/Inconsolata-Regular.woff2 b/js/spa/public/static/fonts/Inconsolata/Inconsolata-Regular.woff2
new file mode 100644
index 0000000000000..e3bddc0402df6
Binary files /dev/null and b/js/spa/public/static/fonts/Inconsolata/Inconsolata-Regular.woff2 differ
diff --git a/js/spa/public/static/fonts/Montserrat/Montserrat-Bold.woff2 b/js/spa/public/static/fonts/Montserrat/Montserrat-Bold.woff2
new file mode 100644
index 0000000000000..a75e620ac08ae
Binary files /dev/null and b/js/spa/public/static/fonts/Montserrat/Montserrat-Bold.woff2 differ
diff --git a/js/spa/public/static/fonts/Montserrat/Montserrat-Regular.woff2 b/js/spa/public/static/fonts/Montserrat/Montserrat-Regular.woff2
new file mode 100644
index 0000000000000..0fbe58830786a
Binary files /dev/null and b/js/spa/public/static/fonts/Montserrat/Montserrat-Regular.woff2 differ
diff --git a/js/spa/public/static/fonts/Quicksand/Quicksand-Bold.woff2 b/js/spa/public/static/fonts/Quicksand/Quicksand-Bold.woff2
new file mode 100644
index 0000000000000..fc81b59e6d32d
Binary files /dev/null and b/js/spa/public/static/fonts/Quicksand/Quicksand-Bold.woff2 differ
diff --git a/js/spa/public/static/fonts/Quicksand/Quicksand-Regular.woff2 b/js/spa/public/static/fonts/Quicksand/Quicksand-Regular.woff2
new file mode 100644
index 0000000000000..eb3616c4d6cdf
Binary files /dev/null and b/js/spa/public/static/fonts/Quicksand/Quicksand-Regular.woff2 differ
diff --git a/js/spa/public/static/fonts/Source Sans Pro/SourceSansPro-Bold.woff2 b/js/spa/public/static/fonts/Source Sans Pro/SourceSansPro-Bold.woff2
new file mode 100644
index 0000000000000..fe7236b54d9b8
Binary files /dev/null and b/js/spa/public/static/fonts/Source Sans Pro/SourceSansPro-Bold.woff2 differ
diff --git a/js/spa/public/static/fonts/Source Sans Pro/SourceSansPro-Regular.woff2 b/js/spa/public/static/fonts/Source Sans Pro/SourceSansPro-Regular.woff2
new file mode 100644
index 0000000000000..60773781470c2
Binary files /dev/null and b/js/spa/public/static/fonts/Source Sans Pro/SourceSansPro-Regular.woff2 differ
diff --git a/js/spa/src/Index.svelte b/js/spa/src/Index.svelte
index 73b660abd2231..9c0620ed3d4de 100644
--- a/js/spa/src/Index.svelte
+++ b/js/spa/src/Index.svelte
@@ -33,6 +33,8 @@
 		fill_width?: boolean;
 		theme_hash?: number;
 		username: string | null;
+		api_prefix?: string;
+		max_file_size?: number;
 	}
 
 	let id = -1;
@@ -107,7 +109,6 @@
 	}
 
 	export let space: string | null;
-	export let host: string | null;
 	export let src: string | null;
 
 	let _id = id++;
@@ -130,10 +131,14 @@
 	let css_text_stylesheet: HTMLStyleElement | null = null;
 	async function mount_custom_css(css_string: string | null): Promise<void> {
 		if (css_string) {
-			css_text_stylesheet = prefix_css(
+			if (!css_text_stylesheet) {
+				css_text_stylesheet = document.createElement("style");
+				document.head.appendChild(css_text_stylesheet);
+			}
+			css_text_stylesheet.textContent = prefix_css(
 				css_string,
 				version,
-				css_text_stylesheet || undefined
+				css_text_stylesheet
 			);
 		}
 		await mount_css(
@@ -279,7 +284,7 @@
 				? `http://localhost:${
 						typeof server_port === "number" ? server_port : 7860
 					}`
-				: host || space || src || location.origin;
+				: space || src || location.origin;
 
 		app = await Client.connect(api_url, {
 			status_callback: handle_status,
@@ -311,7 +316,7 @@
 		if (config.dev_mode) {
 			setTimeout(() => {
 				const { host } = new URL(api_url);
-				let url = new URL(`http://${host}/dev/reload`);
+				let url = new URL(`http://${host}${app.api_prefix}/dev/reload`);
 				stream = new EventSource(url);
 				stream.addEventListener("error", async (e) => {
 					new_message_fn("Error reloading app", "error");
@@ -333,6 +338,10 @@
 					config = app.config;
 					window.__gradio_space__ = config.space_id;
 					await mount_custom_css(config.css);
+					await add_custom_html_head(config.head);
+					css_ready = true;
+					window.__is_colab__ = config.is_colab;
+					dispatch("loaded");
 				});
 			}, 200);
 		}
@@ -507,6 +516,10 @@
 			show_footer={!is_embed}
 			{app_mode}
 			{version}
+			api_prefix={config.api_prefix || ""}
+			max_file_size={config.max_file_size}
+			initial_layout={undefined}
+			search_params={new URLSearchParams(window.location.search)}
 		/>
 	{/if}
 </Embed>
diff --git a/js/spa/src/main.ts b/js/spa/src/main.ts
index 2bca3438fe17a..11fcbe75ae95e 100644
--- a/js/spa/src/main.ts
+++ b/js/spa/src/main.ts
@@ -112,7 +112,6 @@ function create_custom_element(): void {
 					// embed source
 					space: this.space ? this.space.trim() : this.space,
 					src: this.src ? this.src.trim() : this.src,
-					host: this.host ? this.host.trim() : this.host,
 					// embed info
 					info: this.info === "false" ? false : true,
 					container: this.container === "false" ? false : true,
@@ -179,7 +178,6 @@ function create_custom_element(): void {
 						// embed source
 						space: this.space ? this.space.trim() : this.space,
 						src: this.src ? this.src.trim() : this.src,
-						host: this.host ? this.host.trim() : this.host,
 						// embed info
 						info: this.info === "false" ? false : true,
 						container: this.container === "false" ? false : true,
diff --git a/js/spa/test/cancel_events.spec.ts b/js/spa/test/cancel_events.spec.ts
index 5044816b8abff..07d99c2f9acd5 100644
--- a/js/spa/test/cancel_events.spec.ts
+++ b/js/spa/test/cancel_events.spec.ts
@@ -7,12 +7,11 @@ test("when using an iterative function the UI should update over time as iterati
 	const start_button = await page.locator("button", {
 		hasText: /Start Iterating/
 	});
-	const textbox = await page.getByLabel("Iterative Output");
 
 	let output_values: string[] = [];
 	let last_output_value = "";
 	let interval = setInterval(async () => {
-		let value = await textbox.inputValue();
+		let value = await page.getByLabel("Iterative Output").inputValue();
 		if (value !== last_output_value) {
 			output_values.push(value);
 			last_output_value = value;
@@ -20,7 +19,7 @@ test("when using an iterative function the UI should update over time as iterati
 	}, 100);
 
 	await start_button.click();
-	await expect(textbox).toHaveValue("8");
+	await expect(page.getByLabel("Iterative Output")).toHaveValue("8");
 	clearInterval(interval);
 	for (let i = 1; i < 8; i++) {
 		expect(output_values).toContain(i.toString());
diff --git a/js/spa/test/chatbot_multimodal.spec.ts b/js/spa/test/chatbot_multimodal.spec.ts
index 44d8f91842780..4d440664f77f6 100644
--- a/js/spa/test/chatbot_multimodal.spec.ts
+++ b/js/spa/test/chatbot_multimodal.spec.ts
@@ -4,8 +4,8 @@ for (const msg_format of ["tuples", "messages"]) {
 	test(`message format ${msg_format} - text input by a user should be shown in the chatbot as a paragraph`, async ({
 		page
 	}) => {
-		if (msg_format === "messages") {
-			await go_to_testcase(page, "messages");
+		if (msg_format === "tuples") {
+			await go_to_testcase(page, "tuples");
 		}
 		const textbox = await page.getByTestId("textbox");
 		await textbox.fill("Lorem ipsum");
@@ -27,8 +27,8 @@ for (const msg_format of ["tuples", "messages"]) {
 	test(`message format ${msg_format} - images uploaded by a user should be shown in the chat`, async ({
 		page
 	}) => {
-		if (msg_format === "messages") {
-			await go_to_testcase(page, "messages");
+		if (msg_format === "tuples") {
+			await go_to_testcase(page, "tuples");
 		}
 		const fileChooserPromise = page.waitForEvent("filechooser");
 		await page.getByTestId("upload-button").click();
@@ -64,8 +64,8 @@ for (const msg_format of ["tuples", "messages"]) {
 	test(`message format ${msg_format} - audio uploaded by a user should be shown in the chatbot`, async ({
 		page
 	}) => {
-		if (msg_format === "messages") {
-			await go_to_testcase(page, "messages");
+		if (msg_format === "tuples") {
+			await go_to_testcase(page, "tuples");
 		}
 		const fileChooserPromise = page.waitForEvent("filechooser");
 		await page.getByTestId("upload-button").click();
@@ -90,8 +90,8 @@ for (const msg_format of ["tuples", "messages"]) {
 	test(`message format ${msg_format} - videos uploaded by a user should be shown in the chatbot`, async ({
 		page
 	}) => {
-		if (msg_format === "messages") {
-			await go_to_testcase(page, "messages");
+		if (msg_format === "tuples") {
+			await go_to_testcase(page, "tuples");
 		}
 		const fileChooserPromise = page.waitForEvent("filechooser");
 		await page.getByTestId("upload-button").click();
@@ -118,8 +118,8 @@ for (const msg_format of ["tuples", "messages"]) {
 	test(`message format ${msg_format} - markdown input by a user should be correctly formatted: bold, italics, links`, async ({
 		page
 	}) => {
-		if (msg_format === "messages") {
-			await go_to_testcase(page, "messages");
+		if (msg_format === "tuples") {
+			await go_to_testcase(page, "tuples");
 		}
 		const textbox = await page.getByTestId("textbox");
 		await textbox.fill(
@@ -145,8 +145,8 @@ for (const msg_format of ["tuples", "messages"]) {
 	test(`message format ${msg_format} - inline code markdown input by the user should be correctly formatted`, async ({
 		page
 	}) => {
-		if (msg_format === "messages") {
-			await go_to_testcase(page, "messages");
+		if (msg_format === "tuples") {
+			await go_to_testcase(page, "tuples");
 		}
 		const textbox = await page.getByTestId("textbox");
 		await textbox.fill("This is `code`.");
@@ -168,8 +168,8 @@ for (const msg_format of ["tuples", "messages"]) {
 	test(`message format ${msg_format} - markdown code blocks input by a user should be rendered correctly with the correct language tag`, async ({
 		page
 	}) => {
-		if (msg_format === "messages") {
-			await go_to_testcase(page, "messages");
+		if (msg_format === "tuples") {
+			await go_to_testcase(page, "tuples");
 		}
 		const textbox = await page.getByTestId("textbox");
 		await textbox.fill("```python\nprint('Hello')\nprint('World!')\n```");
@@ -191,8 +191,8 @@ for (const msg_format of ["tuples", "messages"]) {
 	test(`message format ${msg_format} - LaTeX input by a user should be rendered correctly`, async ({
 		page
 	}) => {
-		if (msg_format === "messages") {
-			await go_to_testcase(page, "messages");
+		if (msg_format === "tuples") {
+			await go_to_testcase(page, "tuples");
 		}
 		const textbox = await page.getByTestId("textbox");
 		await textbox.fill("This is LaTeX $$x^2$$");
@@ -214,8 +214,8 @@ for (const msg_format of ["tuples", "messages"]) {
 	test(`message format ${msg_format} - when a new message is sent the chatbot should scroll to the latest message`, async ({
 		page
 	}) => {
-		if (msg_format === "messages") {
-			await go_to_testcase(page, "messages");
+		if (msg_format === "tuples") {
+			await go_to_testcase(page, "tuples");
 		}
 		const textbox = await page.getByTestId("textbox");
 		const line_break = "<br>";
@@ -233,8 +233,8 @@ for (const msg_format of ["tuples", "messages"]) {
 	test(`message format ${msg_format} - chatbot like and dislike functionality`, async ({
 		page
 	}) => {
-		if (msg_format === "messages") {
-			await go_to_testcase(page, "messages");
+		if (msg_format === "tuples") {
+			await go_to_testcase(page, "tuples");
 		}
 		await page.getByTestId("textbox").click();
 		await page.getByTestId("textbox").fill("hello");
@@ -252,8 +252,8 @@ for (const msg_format of ["tuples", "messages"]) {
 	test(`message format ${msg_format} - Users can upload multiple images and they will be shown as thumbnails`, async ({
 		page
 	}) => {
-		if (msg_format === "messages") {
-			await go_to_testcase(page, "messages");
+		if (msg_format === "tuples") {
+			await go_to_testcase(page, "tuples");
 		}
 
 		const fileChooserPromise = page.waitForEvent("filechooser");
diff --git a/js/spa/test/custom_css.spec.ts b/js/spa/test/custom_css.spec.ts
index 44782df86418c..36262d4295171 100644
--- a/js/spa/test/custom_css.spec.ts
+++ b/js/spa/test/custom_css.spec.ts
@@ -66,6 +66,6 @@ test(".dark styles are applied corrently", async ({ page }) => {
 	);
 	await expect(page.locator(".darktest h3")).toHaveCSS(
 		"color",
-		"rgb(31, 41, 55)"
+		"rgb(39, 39, 42)"
 	);
 });
diff --git a/js/spa/test/gallery_component_events.spec.ts b/js/spa/test/gallery_component_events.spec.ts
index fe26ceff282fb..a0bc9c82b9b70 100644
--- a/js/spa/test/gallery_component_events.spec.ts
+++ b/js/spa/test/gallery_component_events.spec.ts
@@ -1,14 +1,14 @@
 import { test, expect } from "@self/tootils";
 
-test("Gallery preview mode displays all images correctly.", async ({
+test("Gallery preview mode displays all images/videos correctly.", async ({
 	page
 }) => {
 	await page.getByRole("button", { name: "Run" }).click();
 	await page.getByLabel("Thumbnail 2 of 3").click();
 
 	await expect(
-		await page.getByTestId("detailed-image").getAttribute("src")
-	).toEqual("https://gradio-builds.s3.amazonaws.com/assets/lite-logo.png");
+		await page.getByTestId("detailed-video").getAttribute("src")
+	).toEqual("https://gradio-static-files.s3.amazonaws.com/world.mp4");
 
 	await expect(
 		await page.getByTestId("thumbnail 1").getAttribute("src")
@@ -21,20 +21,20 @@ test("Gallery select event returns the right value and the download button works
 	await page.getByRole("button", { name: "Run" }).click();
 	await page.getByLabel("Thumbnail 2 of 3").click();
 	await expect(page.getByLabel("Select Data")).toHaveValue(
-		"https://gradio-builds.s3.amazonaws.com/assets/lite-logo.png"
+		"https://gradio-static-files.s3.amazonaws.com/world.mp4"
 	);
 
 	const downloadPromise = page.waitForEvent("download");
 	await page.getByLabel("Download").click();
 	const download = await downloadPromise;
-	expect(download.suggestedFilename()).toBe("lite-logo.png");
+	expect(download.suggestedFilename()).toBe("world.mp4");
 });
 
 test("Gallery click-to-upload, upload and change events work correctly", async ({
 	page
 }) => {
 	await page
-		.getByRole("button", { name: "Drop Image(s) Here - or - Click to Upload" })
+		.getByRole("button", { name: "Drop Media Here - or - Click to Upload" })
 		.first()
 		.click();
 	const uploader = await page.locator("input[type=file]").first();
diff --git a/js/spa/test/gradio_pdf_demo.spec.ts b/js/spa/test/gradio_pdf_demo.spec.ts
index a1aa3e253448d..3cb6b41476e23 100644
--- a/js/spa/test/gradio_pdf_demo.spec.ts
+++ b/js/spa/test/gradio_pdf_demo.spec.ts
@@ -1,6 +1,6 @@
 import { test, expect } from "@self/tootils";
 
-test("Custom PDF component demo can be loaded and inference function works .", async ({
+test.skip("Custom PDF component demo can be loaded and inference function works .", async ({
 	page
 }) => {
 	await page
diff --git a/js/spa/test/image_remote_url.spec.ts b/js/spa/test/image_remote_url.spec.ts
new file mode 100644
index 0000000000000..6b74a27fbe749
--- /dev/null
+++ b/js/spa/test/image_remote_url.spec.ts
@@ -0,0 +1,30 @@
+import { test, expect } from "@self/tootils";
+
+test("Image displays remote image correctly", async ({ page }) => {
+	const example_image = page.locator(
+		'div.block:has(div.label:has-text("Examples")) img'
+	);
+	const input_image = page.locator(
+		'div.block:has(label:has-text("InputImage")) img'
+	);
+	const loopback_image = page.locator(
+		'div.block:has(label:has-text("Loopback")) img'
+	);
+	const remote_output_image = page.locator(
+		'div.block:has(label:has-text("RemoteImage")) img'
+	);
+	const submit_button = page.locator('button:has-text("Submit")');
+
+	await expect(example_image).toHaveJSProperty("complete", true);
+	await expect(example_image).not.toHaveJSProperty("naturalWidth", 0);
+
+	await expect(input_image).toHaveJSProperty("complete", true);
+	await expect(input_image).not.toHaveJSProperty("naturalWidth", 0);
+
+	await submit_button.click();
+
+	await expect(loopback_image).toHaveJSProperty("complete", true);
+	await expect(loopback_image).not.toHaveJSProperty("naturalWidth", 0);
+	await expect(remote_output_image).toHaveJSProperty("complete", true);
+	await expect(remote_output_image).not.toHaveJSProperty("naturalWidth", 0);
+});
diff --git a/js/spa/test/kitchen_sink.spec.ts b/js/spa/test/kitchen_sink.spec.ts
index 99ebaa2355107..2120759318b93 100644
--- a/js/spa/test/kitchen_sink.spec.ts
+++ b/js/spa/test/kitchen_sink.spec.ts
@@ -23,7 +23,6 @@ test("test inputs", async ({ page, browser }) => {
 
 	// Image Input
 	const image = page.getByTestId("image").nth(0).locator("input");
-	console.log(image);
 	await image.setInputFiles("./test/files/cheetah1.jpg");
 
 	const uploaded_image = await page.locator("img").nth(0);
@@ -67,7 +66,7 @@ test("test outputs", async ({ page }) => {
 		`{     "items": {     "item": [     "0": { Object(6) }    "id": "0001" ,   "type": null ,   "is_good": false ,   "ppu": 0.55 ,   "batters": { Object(1) } ,   "batter": [ Array(4) ]    "0": { Object(2) } ,   "id": "1001" ,   "type": "Regular"    } ,  "1": { Object(2) } ,   "id": "1002" ,   "type": "Chocolate"    } ,  "2": { Object(2) } ,   "id": "1003" ,   "type": "Blueberry"    } ,  "3": { Object(2) }    "id": "1004" ,   "type": "Devil's Food"    }   ]   } ,  "topping": [ Array(7) ]    "0": { Object(2) } ,   "id": "5001" ,   "type": "None"    } ,  "1": { Object(2) } ,   "id": "5002" ,   "type": "Glazed"    } ,  "2": { Object(2) } ,   "id": "5005" ,   "type": "Sugar"    } ,  "3": { Object(2) } ,   "id": "5007" ,   "type": "Powdered Sugar"    } ,  "4": { Object(2) } ,   "id": "5006" ,   "type": "Chocolate with Sprinkles"    } ,  "5": { Object(2) } ,   "id": "5003" ,   "type": "Chocolate"    } ,  "6": { Object(2) }    "id": "5004" ,   "type": "Maple"    }   ]   }   ]   }   } `
 	);
 
-	const image = page.locator("img").nth(0);
+	const image = page.locator("#output-img img");
 	const image_data = await image.getAttribute("src");
 	expect(image_data).toBeTruthy();
 
diff --git a/js/spa/test/outbreak_forecast.spec.ts b/js/spa/test/outbreak_forecast.spec.ts
index d3b3b24faeba6..b0e638904b027 100644
--- a/js/spa/test/outbreak_forecast.spec.ts
+++ b/js/spa/test/outbreak_forecast.spec.ts
@@ -52,7 +52,25 @@ test("selecting altair should show altair plot and pressing clear should clear o
 	await expect(altair).toHaveCount(0);
 });
 
-test("switching between all 3 plot types and pressing submit should update output component to corresponding plot type", async ({
+test("selecting bokeh should show bokeh plot and pressing clear should clear output", async ({
+	page
+}) => {
+	await page.getByLabel("Plot Type").click();
+	await page.getByRole("option", { name: "bokeh" }).click();
+	await page.getByLabel("Month").click();
+	await page.getByRole("option", { name: "January" }).click();
+	await page.getByLabel("Social Distancing?").check();
+
+	await page.click("text=Submit");
+
+	const altair = await page.getByTestId("bokeh");
+	await expect(altair).toHaveCount(1);
+
+	await page.getByRole("button", { name: "Clear" }).click();
+	await expect(altair).toHaveCount(0);
+});
+
+test("switching between all 4 plot types and pressing submit should update output component to corresponding plot type", async ({
 	page
 }) => {
 	//Matplotlib
@@ -82,4 +100,12 @@ test("switching between all 3 plot types and pressing submit should update outpu
 	await page.click("text=Submit");
 	const altair = await page.getByTestId("altair");
 	await expect(altair).toHaveCount(1);
+
+	//Bokeh
+	await page.getByLabel("Plot Type").click();
+	await page.getByRole("option", { name: "Bokeh" }).click();
+
+	await page.click("text=Submit");
+	const bokeh = await page.getByTestId("bokeh");
+	await expect(bokeh).toHaveCount(1);
 });
diff --git a/js/spa/test/state_change.spec.ts b/js/spa/test/state_change.spec.ts
index 04db71eabc7f4..dff575de05f2d 100644
--- a/js/spa/test/state_change.spec.ts
+++ b/js/spa/test/state_change.spec.ts
@@ -56,3 +56,30 @@ test("test datastructure-based state changes", async ({ page }) => {
 	await expect(page.getByLabel("Changes")).toHaveValue("2");
 	await expect(page.getByLabel("Clicks")).toHaveValue("5");
 });
+
+test("test generators properly trigger state changes", async ({ page }) => {
+	await page.getByRole("button", { name: "Iterator State Change" }).click();
+	await expect(page.getByTestId("markdown").first()).toHaveText(
+		"Success Box 0 added"
+	);
+	await page.getByRole("button", { name: "Iterator State Change" }).click();
+	await expect(page.getByTestId("markdown").nth(1)).toHaveText(
+		"Success Box 1 added"
+	);
+});
+
+test("test state change for custom hashes", async ({ page }) => {
+	await expect(page.getByLabel("Custom State Changes").first()).toHaveValue(
+		"0"
+	);
+	await page.getByRole("button", { name: "Set State to 10" }).click();
+	await expect(page.getByLabel("Custom State Clicks").first()).toHaveValue("1");
+	await expect(page.getByLabel("Custom State Changes").first()).toHaveValue(
+		"1"
+	);
+	await page.getByRole("button", { name: "Set State to 10" }).click();
+	await expect(page.getByLabel("Custom State Clicks").first()).toHaveValue("2");
+	await expect(page.getByLabel("Custom State Changes").first()).toHaveValue(
+		"1"
+	);
+});
diff --git a/js/spa/test/stream_audio_out.spec.ts b/js/spa/test/stream_audio_out.spec.ts
index 9d142da6c04e0..1f1faa575b575 100644
--- a/js/spa/test/stream_audio_out.spec.ts
+++ b/js/spa/test/stream_audio_out.spec.ts
@@ -1,18 +1,41 @@
 import { test, expect } from "@self/tootils";
 
-test("audio streams correctly", async ({ page }) => {
-	const uploader = await page.locator("input[type=file]");
-	await uploader.setInputFiles(["../../test/test_files/audio_sample.wav"]);
+test.skip("audio streams from wav file correctly", async ({ page }) => {
+	test.skip(!!process.env.CI, "Not supported in CI");
+	await page.getByRole("gridcell", { name: "wav" }).first().click();
 	await page.getByRole("button", { name: "Stream as File" }).click();
-	await page.waitForSelector("audio");
-	const isAudioPlaying = await page.evaluate(async () => {
-		const audio = document.querySelector("audio");
-		if (!audio) {
-			return false;
-		}
-		await audio.play();
-		await new Promise((resolve) => setTimeout(resolve, 2000));
-		return audio.currentTime > 0;
-	});
-	await expect(isAudioPlaying).toBeTruthy();
+	// @ts-ignore
+	await page
+		.locator("#stream_as_file_output audio")
+		.evaluate(async (el) => await el.play());
+	await expect
+		.poll(
+			async () =>
+				await page
+					.locator("#stream_as_file_output audio")
+					// @ts-ignore
+					.evaluate((el) => el.currentTime)
+		)
+		.toBeGreaterThan(0);
+});
+
+test.skip("audio streams from wav file correctly as bytes", async ({
+	page
+}) => {
+	test.skip(!!process.env.CI, "Not supported in CI");
+	await page.getByRole("gridcell", { name: "wav" }).first().click();
+	await page.getByRole("button", { name: "Stream as Bytes" }).click();
+	// @ts-ignore
+	await page
+		.locator("#stream_as_bytes_output audio")
+		.evaluate(async (el) => await el.play());
+	await expect
+		.poll(
+			async () =>
+				await page
+					.locator("#stream_as_bytes_output audio")
+					// @ts-ignore
+					.evaluate((el) => el.currentTime)
+		)
+		.toBeGreaterThan(0);
 });
diff --git a/js/spa/test/stream_video_out.spec.ts b/js/spa/test/stream_video_out.spec.ts
new file mode 100644
index 0000000000000..6d7c50ef2a011
--- /dev/null
+++ b/js/spa/test/stream_video_out.spec.ts
@@ -0,0 +1,33 @@
+import { test, expect } from "@self/tootils";
+
+test("video streams from ts files correctly", async ({ page }) => {
+	test.skip(!!process.env.CI, "Not supported in CI");
+	await page.getByRole("gridcell", { name: "false" }).click();
+	await page.waitForSelector("[data-testid='video'] video");
+	await page.getByRole("button", { name: "process video" }).click();
+	await expect
+		.poll(
+			async () =>
+				await page
+					.locator("#stream_video_output video")
+					// @ts-ignore
+					.evaluate((el) => el.currentTime)
+		)
+		.toBeGreaterThan(0);
+});
+
+test("video streams from mp4 files correctly", async ({ page }) => {
+	test.skip(!!process.env.CI, "Not supported in CI");
+	await page.getByRole("gridcell", { name: "true" }).click();
+	await page.waitForSelector("[data-testid='video'] video");
+	await page.getByRole("button", { name: "process video" }).click();
+	await expect
+		.poll(
+			async () =>
+				await page
+					.locator("#stream_video_output video")
+					// @ts-ignore
+					.evaluate((el) => el.currentTime)
+		)
+		.toBeGreaterThan(0);
+});
diff --git a/js/spa/test/test_chatinterface_streaming_echo.spec.ts b/js/spa/test/test_chatinterface_streaming_echo.spec.ts
index e20987f013f16..d1baf66a2b8ad 100644
--- a/js/spa/test/test_chatinterface_streaming_echo.spec.ts
+++ b/js/spa/test/test_chatinterface_streaming_echo.spec.ts
@@ -15,13 +15,7 @@ for (const test_case of cases) {
 		if (cases.slice(1).includes(test_case)) {
 			await go_to_testcase(page, test_case);
 		}
-		let submit_button = page.getByRole("button", { name: "Submit" });
-		if (test_case.startsWith("multimodal")) {
-			submit_button = page.locator(".submit-button");
-		}
-		const retry_button = page.getByRole("button", { name: "🔄 Retry" });
-		const undo_button = page.getByRole("button", { name: "↩️ Undo" });
-		const clear_button = page.getByRole("button", { name: "🗑️ Clear" });
+		const submit_button = page.locator(".submit-button");
 		const textbox = page.getByPlaceholder("Type a message...");
 
 		await textbox.fill("hello");
@@ -45,13 +39,13 @@ for (const test_case of cases) {
 		await expect(expected_text_el_1).toBeVisible();
 		await expect(page.locator(".bot.message")).toHaveCount(2);
 
-		await undo_button.click();
+		await page.getByLabel("undo button").click();
 		await expect(page.locator(".bot.message")).toHaveCount(1);
 		await expect(textbox).toHaveValue("hi");
 
-		await retry_button.click();
+		await page.getByLabel("retry button").click();
 		const expected_text_el_2 = page.locator(".bot p", {
-			hasText: "Run 3 - You typed: hi"
+			hasText: "Run 3 - You typed: hello"
 		});
 		await expect(expected_text_el_2).toBeVisible();
 
@@ -65,7 +59,7 @@ for (const test_case of cases) {
 		});
 		await expect(expected_text_el_3).toBeVisible();
 		await expect(page.locator(".bot.message")).toHaveCount(2);
-		await clear_button.click();
+		await page.getByLabel("clear button").click();
 		await expect(page.locator(".bot.message")).toHaveCount(0);
 	});
 
@@ -76,10 +70,7 @@ for (const test_case of cases) {
 			await go_to_testcase(page, test_case);
 		}
 		const textbox = page.getByPlaceholder("Type a message...");
-		let submit_button = page.getByRole("button", { name: "Submit" });
-		if (test_case.startsWith("multimodal")) {
-			submit_button = page.locator(".submit-button");
-		}
+		const submit_button = page.locator(".submit-button");
 		await textbox.fill("hi");
 
 		await page.getByRole("button", { name: "Use via API logo" }).click();
diff --git a/js/spa/test/upload_file_limit_test.spec.ts b/js/spa/test/upload_file_limit_test.spec.ts
index 15d4f1b1cbc38..1886705f78964 100644
--- a/js/spa/test/upload_file_limit_test.spec.ts
+++ b/js/spa/test/upload_file_limit_test.spec.ts
@@ -58,7 +58,7 @@ test("gr.Gallery() triggers the gr.Error modal when an uploaded file exceeds max
 	page
 }) => {
 	const locator = page.getByText(
-		"Gallery Drop Image(s) Here - or - Click to Upload"
+		"Gallery Drop Media Here - or - Click to Upload"
 	);
 	const file_chooser = await get_file_selector(page, locator);
 	await file_chooser.setFiles(["./test/files/cheetah1.jpg"]);
diff --git a/js/statustracker/CHANGELOG.md b/js/statustracker/CHANGELOG.md
index 0e9abb6944fe6..478806a57bb6d 100644
--- a/js/statustracker/CHANGELOG.md
+++ b/js/statustracker/CHANGELOG.md
@@ -1,5 +1,56 @@
 # @gradio/statustracker
 
+## 0.8.0-beta.5
+
+### Dependency updates
+
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.8.0-beta.4
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.4
+
+## 0.8.0-beta.3
+
+### Dependency updates
+
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.8.0-beta.2
+
+### Features
+
+- [#9261](https://github.com/gradio-app/gradio/pull/9261) [`73647a0`](https://github.com/gradio-app/gradio/commit/73647a07b0439efabe3dd218ff6c366ffa3b84a0) - Move icons into `IconButtonWrapper`.  Thanks @hannahblair!
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.8.0-beta.1
+
+### Features
+
+- [#9201](https://github.com/gradio-app/gradio/pull/9201) [`5492e74`](https://github.com/gradio-app/gradio/commit/5492e742b1f1fa618208cce523f50ad22a6e86f1) - Move buttons from chat_interface into Chatbot.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+
+## 0.8.0-beta.0
+
+### Features
+
+- [#8941](https://github.com/gradio-app/gradio/pull/8941) [`97a7bf6`](https://github.com/gradio-app/gradio/commit/97a7bf66a79179d1b91a3199d68e5c11216ca500) - Streaming inputs for 5.0.  Thanks @freddyaboulton!
+
 ## 0.7.6
 
 ### Fixes
diff --git a/js/statustracker/index.ts b/js/statustracker/index.ts
index b0caf38322aea..495ff989c53e9 100644
--- a/js/statustracker/index.ts
+++ b/js/statustracker/index.ts
@@ -1,5 +1,6 @@
 export { default as StatusTracker } from "./static/index.svelte";
 export { default as Toast } from "./static/Toast.svelte";
 export { default as Loader } from "./static/Loader.svelte";
+export { default as StreamingBar } from "./static/StreamingBar.svelte";
 export type * from "./static/types";
 export { default } from "./static/index.svelte";
diff --git a/js/statustracker/package.json b/js/statustracker/package.json
index b0f6988633443..124495d073239 100644
--- a/js/statustracker/package.json
+++ b/js/statustracker/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/statustracker",
-	"version": "0.7.6",
+	"version": "0.8.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"main": "./index.ts",
diff --git a/js/statustracker/static/StreamingBar.svelte b/js/statustracker/static/StreamingBar.svelte
new file mode 100644
index 0000000000000..b48b127a4fe81
--- /dev/null
+++ b/js/statustracker/static/StreamingBar.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	export let time_limit: number | null;
+</script>
+
+{#if time_limit}
+	<div class="streaming-bar" style:animation-duration="{time_limit}s"></div>
+{/if}
+
+<style>
+	.streaming-bar {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 4px;
+		background-color: var(--primary-600);
+		animation: countdown linear forwards;
+		z-index: 1;
+	}
+
+	@keyframes countdown {
+		from {
+			transform: translateX(0%);
+		}
+		to {
+			transform: translateX(-100%);
+		}
+	}
+</style>
diff --git a/js/statustracker/static/index.svelte b/js/statustracker/static/index.svelte
index b20c238426c22..ae506615c82c2 100644
--- a/js/statustracker/static/index.svelte
+++ b/js/statustracker/static/index.svelte
@@ -6,6 +6,11 @@
 
 	let called = false;
 
+	const is_browser = typeof window !== "undefined";
+	const raf = is_browser
+		? window.requestAnimationFrame
+		: (cb: (...args: any[]) => void) => {};
+
 	async function scroll_into_view(
 		el: HTMLDivElement,
 		enable: boolean | null = true
@@ -23,7 +28,7 @@
 
 		await tick();
 
-		requestAnimationFrame(() => {
+		raf(() => {
 			let min = [0, 0];
 
 			for (let i = 0; i < items.length; i++) {
@@ -61,7 +66,13 @@
 	export let eta: number | null = null;
 	export let queue_position: number | null;
 	export let queue_size: number | null;
-	export let status: "complete" | "pending" | "error" | "generating" | null;
+	export let status:
+		| "complete"
+		| "pending"
+		| "error"
+		| "generating"
+		| "streaming"
+		| null;
 	export let scroll_to_output = false;
 	export let timer = true;
 	export let show_progress: "full" | "minimal" | "hidden" = "full";
@@ -133,7 +144,7 @@
 	};
 
 	function run(): void {
-		requestAnimationFrame(() => {
+		raf(() => {
 			timer_diff = (performance.now() - timer_start) / 1000;
 			if (_timer) run();
 		});
@@ -193,7 +204,10 @@
 
 <div
 	class="wrap {variant} {show_progress}"
-	class:hide={!status || status === "complete" || show_progress === "hidden"}
+	class:hide={!status ||
+		status === "complete" ||
+		show_progress === "hidden" ||
+		status == "streaming"}
 	class:translucent={(variant === "center" &&
 		(status === "pending" || status === "error")) ||
 		translucent ||
@@ -406,7 +420,7 @@
 
 	.meta-text {
 		position: absolute;
-		top: 0;
+		bottom: 0;
 		right: 0;
 		z-index: var(--layer-2);
 		padding: var(--size-1) var(--size-2);
diff --git a/js/statustracker/static/index.ts b/js/statustracker/static/index.ts
index 550211d0afefb..912f9d16e0ec2 100644
--- a/js/statustracker/static/index.ts
+++ b/js/statustracker/static/index.ts
@@ -1,5 +1,6 @@
 export { default as StatusTracker } from "./index.svelte";
 export { default as Toast } from "./Toast.svelte";
 export { default as Loader } from "./Loader.svelte";
+export { default as StreamingBar } from "./StreamingBar.svelte";
 export type * from "./types";
 export { default } from "./index.svelte";
diff --git a/js/statustracker/static/types.ts b/js/statustracker/static/types.ts
index 0d74f6fa19117..36a193afcafc6 100644
--- a/js/statustracker/static/types.ts
+++ b/js/statustracker/static/types.ts
@@ -2,7 +2,7 @@ export interface LoadingStatus {
 	eta: number;
 	queue_position: number;
 	queue_size: number;
-	status: "pending" | "error" | "complete";
+	status: "pending" | "error" | "complete" | "generating" | "streaming";
 	show_progress: "full" | "minimal" | "hidden";
 	scroll_to_output: boolean;
 	visible: boolean;
@@ -15,6 +15,7 @@ export interface LoadingStatus {
 		unit: string | null;
 		desc: string | null;
 	}[];
+	time_limit?: number | null;
 }
 
 export interface ToastMessage {
diff --git a/js/storybook/CHANGELOG.md b/js/storybook/CHANGELOG.md
index 6b8d73140af0a..7d90844867e9f 100644
--- a/js/storybook/CHANGELOG.md
+++ b/js/storybook/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @self/storybook
 
+## 0.7.0-beta.1
+
+### Features
+
+- [#9204](https://github.com/gradio-app/gradio/pull/9204) [`3c73f00`](https://github.com/gradio-app/gradio/commit/3c73f00e3016b16917ebfe0bad390f2dff683457) - 🔡 Update default core Gradio font.  Thanks @hannahblair!
+
 ## 0.6.2
 
 ### Fixes
diff --git a/js/storybook/package.json b/js/storybook/package.json
index aa63ab4e66794..977552e839cb4 100644
--- a/js/storybook/package.json
+++ b/js/storybook/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@self/storybook",
-	"version": "0.6.2",
+	"version": "0.7.0-beta.1",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/storybook/themeLight.js b/js/storybook/themeLight.js
index 51d5170f32fe0..29925b72a4c84 100644
--- a/js/storybook/themeLight.js
+++ b/js/storybook/themeLight.js
@@ -8,7 +8,7 @@ export default create({
 	brandImage: Logo,
 	brandTarget: "_blank",
 
-	fontBase: '"Source Sans Pro", sans-serif',
+	fontBase: '"IBM Plex Sans", sans-serif',
 	fontCode: "monospace",
 
 	// theme colours
diff --git a/js/tabitem/CHANGELOG.md b/js/tabitem/CHANGELOG.md
index 875a538cbe2d3..0829fce23b705 100644
--- a/js/tabitem/CHANGELOG.md
+++ b/js/tabitem/CHANGELOG.md
@@ -1,5 +1,49 @@
 # @gradio/tabitem
 
+## 0.3.0-beta.4
+
+### Dependency updates
+
+- @gradio/tabs@0.3.0-beta.3
+- @gradio/column@0.2.0-beta.2
+
+## 0.3.0-beta.4
+
+### Dependency updates
+
+- @gradio/column@0.2.0-beta.2
+
+## 0.3.0-beta.3
+
+### Features
+
+- [#9460](https://github.com/gradio-app/gradio/pull/9460) [`7352a89`](https://github.com/gradio-app/gradio/commit/7352a89722da91461c32fd33588531f3edce9c48) - Playground requirements tab.  Thanks @whitphx!
+
+### Dependency updates
+
+- @gradio/tabs@0.3.0-beta.3
+- @gradio/column@0.2.0-beta.1
+
+## 0.3.0-beta.2
+
+### Dependency updates
+
+- @gradio/utils@0.7.0-beta.2
+- @gradio/column@0.2.0-beta.0
+- @gradio/tabs@0.3.0-beta.2
+
+## 0.3.0-beta.1
+
+### Features
+
+- [#9199](https://github.com/gradio-app/gradio/pull/9199) [`3175c7a`](https://github.com/gradio-app/gradio/commit/3175c7aebc6ad2466d31d6949580f5a3cb4cd698) - Redesign `gr.Tabs()`.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/utils@0.7.0-beta.1
+- @gradio/tabs@0.3.0-beta.1
+- @gradio/column@0.2.0-beta.0
+
 ## 0.2.15
 
 ### Fixes
diff --git a/js/tabitem/Index.svelte b/js/tabitem/Index.svelte
index da27274be6410..ff8e842b65483 100644
--- a/js/tabitem/Index.svelte
+++ b/js/tabitem/Index.svelte
@@ -1,3 +1,7 @@
+<script context="module" lang="ts">
+	export { default as BaseTabItem } from "./shared/TabItem.svelte";
+</script>
+
 <script lang="ts">
 	import type { Gradio, SelectData } from "@gradio/utils";
 	import TabItem from "./shared/TabItem.svelte";
diff --git a/js/tabitem/package.json b/js/tabitem/package.json
index f8afde9fa7854..a573bf74045df 100644
--- a/js/tabitem/package.json
+++ b/js/tabitem/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/tabitem",
-	"version": "0.2.15",
+	"version": "0.3.0-beta.4",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/tabitem/shared/TabItem.svelte b/js/tabitem/shared/TabItem.svelte
index 0199ae49298ca..16b7fd9639814 100644
--- a/js/tabitem/shared/TabItem.svelte
+++ b/js/tabitem/shared/TabItem.svelte
@@ -43,10 +43,10 @@
 	div {
 		display: flex;
 		position: relative;
-		border: 1px solid var(--border-color-primary);
-		border-top: none;
-		border-bottom-right-radius: var(--container-radius);
-		border-bottom-left-radius: var(--container-radius);
+		border: none;
+		border-radius: var(--radius-sm);
 		padding: var(--block-padding);
+		width: 100%;
+		box-sizing: border-box;
 	}
 </style>
diff --git a/js/tabs/CHANGELOG.md b/js/tabs/CHANGELOG.md
index e5a81bc6f9eba..3760f6e2c03df 100644
--- a/js/tabs/CHANGELOG.md
+++ b/js/tabs/CHANGELOG.md
@@ -1,5 +1,32 @@
 # @gradio/tabs
 
+## 0.3.0-beta.3
+
+### Features
+
+- [#9460](https://github.com/gradio-app/gradio/pull/9460) [`7352a89`](https://github.com/gradio-app/gradio/commit/7352a89722da91461c32fd33588531f3edce9c48) - Playground requirements tab.  Thanks @whitphx!
+- [#9496](https://github.com/gradio-app/gradio/pull/9496) [`1647ebd`](https://github.com/gradio-app/gradio/commit/1647ebddc3e2ed6fc143a62629409e32afcc5801) - UI theme fixes.  Thanks @aliabid94!
+
+## 0.3.0-beta.2
+
+### Features
+
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/utils@0.7.0-beta.2
+
+## 0.3.0-beta.1
+
+### Features
+
+- [#9199](https://github.com/gradio-app/gradio/pull/9199) [`3175c7a`](https://github.com/gradio-app/gradio/commit/3175c7aebc6ad2466d31d6949580f5a3cb4cd698) - Redesign `gr.Tabs()`.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/utils@0.7.0-beta.1
+
 ## 0.2.14
 
 ### Fixes
diff --git a/js/tabs/Index.svelte b/js/tabs/Index.svelte
index a51263abcd9bf..b5b261f7e1670 100644
--- a/js/tabs/Index.svelte
+++ b/js/tabs/Index.svelte
@@ -1,5 +1,5 @@
 <script context="module" lang="ts">
-	export { TABS } from "./shared/Tabs.svelte";
+	export { default as BaseTabs, TABS } from "./shared/Tabs.svelte";
 </script>
 
 <script lang="ts">
diff --git a/js/tabs/package.json b/js/tabs/package.json
index e42eac7a2d915..57a245a9b697a 100644
--- a/js/tabs/package.json
+++ b/js/tabs/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/tabs",
-	"version": "0.2.14",
+	"version": "0.3.0-beta.3",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/tabs/shared/OverflowIcon.svelte b/js/tabs/shared/OverflowIcon.svelte
new file mode 100644
index 0000000000000..08dc22e4d707d
--- /dev/null
+++ b/js/tabs/shared/OverflowIcon.svelte
@@ -0,0 +1,11 @@
+<svg
+	width="16"
+	height="16"
+	viewBox="0 0 16 16"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<circle cx="2.5" cy="8" r="1.5" fill="currentColor" />
+	<circle cx="8" cy="8" r="1.5" fill="currentColor" />
+	<circle cx="13.5" cy="8" r="1.5" fill="currentColor" />
+</svg>
diff --git a/js/tabs/shared/Tabs.svelte b/js/tabs/shared/Tabs.svelte
index ad2cef3b782d5..9e8458d489376 100644
--- a/js/tabs/shared/Tabs.svelte
+++ b/js/tabs/shared/Tabs.svelte
@@ -3,7 +3,13 @@
 </script>
 
 <script lang="ts">
-	import { setContext, createEventDispatcher } from "svelte";
+	import {
+		setContext,
+		createEventDispatcher,
+		onMount,
+		onDestroy
+	} from "svelte";
+	import OverflowIcon from "./OverflowIcon.svelte";
 	import { writable } from "svelte/store";
 	import type { SelectData } from "@gradio/utils";
 
@@ -16,11 +22,18 @@
 	}
 
 	export let visible = true;
-	export let elem_id = "id";
+	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let selected: number | string | object;
 
 	let tabs: Tab[] = [];
+	let overflow_menu_open = false;
+	let overflow_menu: HTMLElement;
+
+	$: has_tabs = tabs.length > 0;
+
+	let tab_nav_el: HTMLElement;
+	let overflow_nav: HTMLElement;
 
 	const selected_tab = writable<false | object | number | string>(false);
 	const selected_tab_index = writable<number>(0);
@@ -29,41 +42,31 @@
 		select: SelectData;
 	}>();
 
+	let is_overflowing = false;
+	let overflow_has_selected_tab = false;
+
 	setContext(TABS, {
 		register_tab: (tab: Tab) => {
-			let index: number;
-			let existingTab = tabs.find((t) => t.id === tab.id);
-			if (existingTab) {
-				// update existing tab with newer values
-				index = tabs.findIndex((t) => t.id === tab.id);
+			let index = tabs.findIndex((t) => t.id === tab.id);
+			if (index !== -1) {
 				tabs[index] = { ...tabs[index], ...tab };
 			} else {
-				tabs.push({
-					name: tab.name,
-					id: tab.id,
-					elem_id: tab.elem_id,
-					visible: tab.visible,
-					interactive: tab.interactive
-				});
+				tabs = [...tabs, tab];
 				index = tabs.length - 1;
 			}
-			selected_tab.update((current) => {
-				if (current === false && tab.visible && tab.interactive) {
-					return tab.id;
-				}
-
-				let nextTab = tabs.find((t) => t.visible && t.interactive);
-				return nextTab ? nextTab.id : current;
-			});
-			tabs = tabs;
+			if ($selected_tab === false && tab.visible && tab.interactive) {
+				$selected_tab = tab.id;
+			}
 			return index;
 		},
 		unregister_tab: (tab: Tab) => {
-			const i = tabs.findIndex((t) => t.id === tab.id);
-			tabs.splice(i, 1);
-			selected_tab.update((current) =>
-				current === tab.id ? tabs[i]?.id || tabs[tabs.length - 1]?.id : current
-			);
+			const index = tabs.findIndex((t) => t.id === tab.id);
+			if (index !== -1) {
+				tabs = tabs.filter((t) => t.id !== tab.id);
+				if ($selected_tab === tab.id) {
+					$selected_tab = tabs[0]?.id || false;
+				}
+			}
 		},
 		selected_tab,
 		selected_tab_index
@@ -80,49 +83,129 @@
 			$selected_tab = id;
 			$selected_tab_index = tabs.findIndex((t) => t.id === id);
 			dispatch("change");
+			overflow_menu_open = false;
 		} else {
 			console.warn("Attempted to select a non-interactive or hidden tab.");
 		}
 	}
 
 	$: tabs, selected !== null && change_tab(selected);
+
+	onMount(() => {
+		handle_menu_overflow();
+
+		window.addEventListener("resize", handle_menu_overflow);
+		window.addEventListener("click", handle_outside_click);
+	});
+
+	onDestroy(() => {
+		if (typeof window === "undefined") return;
+		window.removeEventListener("resize", handle_menu_overflow);
+		window.removeEventListener("click", handle_outside_click);
+	});
+
+	function handle_outside_click(event: MouseEvent): void {
+		if (
+			overflow_menu_open &&
+			overflow_menu &&
+			!overflow_menu.contains(event.target as Node)
+		) {
+			overflow_menu_open = false;
+		}
+	}
+
+	function handle_menu_overflow(): void {
+		if (!tab_nav_el) {
+			console.error("Menu elements not found");
+			return;
+		}
+
+		let all_items: HTMLElement[] = [];
+
+		[tab_nav_el, overflow_nav].forEach((menu) => {
+			Array.from(menu.querySelectorAll("button")).forEach((item) =>
+				all_items.push(item as HTMLElement)
+			);
+		});
+
+		all_items.forEach((item) => tab_nav_el.appendChild(item));
+
+		const nav_items: HTMLElement[] = [];
+		const overflow_items: HTMLElement[] = [];
+
+		Array.from(tab_nav_el.querySelectorAll("button")).forEach((item) => {
+			const tab_rect = item.getBoundingClientRect();
+			const tab_menu_rect = tab_nav_el.getBoundingClientRect();
+			is_overflowing =
+				tab_rect.right > tab_menu_rect.right ||
+				tab_rect.left < tab_menu_rect.left;
+
+			if (is_overflowing) {
+				overflow_items.push(item as HTMLElement);
+			} else {
+				nav_items.push(item as HTMLElement);
+			}
+		});
+
+		nav_items.forEach((item) => tab_nav_el.appendChild(item));
+		overflow_items.forEach((item) => overflow_nav.appendChild(item));
+
+		overflow_has_selected_tab = tabs.some(
+			(t) =>
+				t.id === $selected_tab &&
+				overflow_nav.contains(document.querySelector(`[data-tab-id="${t.id}"]`))
+		);
+	}
 </script>
 
-<div class="tabs {elem_classes.join(' ')}" class:hide={!visible} id={elem_id}>
-	<div class="tab-nav scroll-hide" role="tablist">
-		{#each tabs as t, i (t.id)}
-			{#if t.visible}
-				{#if t.id === $selected_tab}
-					<button
-						role="tab"
-						class="selected"
-						aria-selected={true}
-						aria-controls={t.elem_id}
-						id={t.elem_id ? t.elem_id + "-button" : null}
-					>
-						{t.name}
-					</button>
-				{:else}
+{#if has_tabs}
+	<div class="tabs {elem_classes.join(' ')}" class:hide={!visible} id={elem_id}>
+		<div class="tab-wrapper">
+			<div class="tab-container" bind:this={tab_nav_el} role="tablist">
+				{#each tabs as t, i (t.id)}
 					<button
 						role="tab"
-						aria-selected={false}
+						class:selected={t.id === $selected_tab}
+						aria-selected={t.id === $selected_tab}
 						aria-controls={t.elem_id}
 						disabled={!t.interactive}
 						aria-disabled={!t.interactive}
 						id={t.elem_id ? t.elem_id + "-button" : null}
+						data-tab-id={t.id}
 						on:click={() => {
-							change_tab(t.id);
-							dispatch("select", { value: t.name, index: i });
+							if (t.id !== $selected_tab) {
+								change_tab(t.id);
+								dispatch("select", { value: t.name, index: i });
+							}
 						}}
 					>
 						{t.name}
 					</button>
-				{/if}
-			{/if}
-		{/each}
+				{/each}
+			</div>
+			<span
+				class="overflow-menu"
+				class:hide={!is_overflowing}
+				bind:this={overflow_menu}
+			>
+				<button
+					on:click|stopPropagation={() =>
+						(overflow_menu_open = !overflow_menu_open)}
+					class:overflow-item-selected={overflow_has_selected_tab}
+				>
+					<OverflowIcon />
+				</button>
+				<div
+					class="overflow-dropdown"
+					bind:this={overflow_nav}
+					class:hide={!overflow_menu_open}
+				/>
+			</span>
+		</div>
 	</div>
-	<slot />
-</div>
+{/if}
+
+<slot />
 
 <style>
 	.tabs {
@@ -133,50 +216,140 @@
 		display: none;
 	}
 
-	.tab-nav {
+	.tab-wrapper {
 		display: flex;
+		align-items: center;
+		justify-content: space-between;
 		position: relative;
-		flex-wrap: wrap;
-		border-bottom: 1px solid var(--border-color-primary);
+		height: var(--size-8);
+		padding-bottom: var(--size-2);
+	}
+
+	.tab-container {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		position: relative;
+		overflow: hidden;
+		height: var(--size-8);
+	}
+
+	.tab-container::after {
+		content: "";
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 1px;
+		background-color: var(--border-color-primary);
+	}
+
+	.overflow-menu {
+		flex-shrink: 0;
+		margin-left: var(--size-2);
 	}
 
 	button {
-		margin-bottom: -1px;
-		border: 1px solid transparent;
-		border-color: transparent;
-		border-bottom: none;
-		border-top-right-radius: var(--container-radius);
-		border-top-left-radius: var(--container-radius);
-		padding: var(--size-1) var(--size-4);
-		color: var(--body-text-color-subdued);
+		margin-bottom: 0;
+		border: none;
+		border-radius: 0;
+		padding: 0 var(--size-4);
+		color: var(--body-text-color);
 		font-weight: var(--section-header-text-weight);
 		font-size: var(--section-header-text-size);
+		transition: all 0.2s ease-out;
+		background-color: transparent;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		white-space: nowrap;
+		position: relative;
 	}
 
 	button:disabled {
-		color: var(--body-text-color-subdued);
 		opacity: 0.5;
 		cursor: not-allowed;
 	}
 
-	button:hover {
+	button:hover:not(:disabled):not(.selected) {
+		background-color: var(--background-fill-secondary);
 		color: var(--body-text-color);
 	}
+
 	.selected {
-		border-color: var(--border-color-primary);
-		background: var(--background-fill-primary);
-		color: var(--body-text-color);
+		background-color: transparent;
+		color: var(--color-accent);
+		position: relative;
 	}
 
-	.bar {
-		display: block;
+	.selected::after {
+		content: "";
 		position: absolute;
-		bottom: -2px;
+		bottom: 0;
 		left: 0;
-		z-index: 999;
-		background: var(--background-fill-primary);
 		width: 100%;
 		height: 2px;
-		content: "";
+		background-color: var(--color-accent);
+		animation: fade-grow 0.2s ease-out forwards;
+		transform-origin: center;
+		z-index: 1;
+	}
+
+	@keyframes fade-grow {
+		from {
+			opacity: 0;
+			transform: scaleX(0.8);
+		}
+		to {
+			opacity: 1;
+			transform: scaleX(1);
+		}
+	}
+
+	.overflow-dropdown {
+		position: absolute;
+		top: calc(100% + var(--size-2));
+		right: 0;
+		background-color: var(--background-fill-primary);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-sm);
+		z-index: var(--layer-5);
+		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+		padding: var(--size-2);
+		min-width: 150px;
+		width: max-content;
+	}
+
+	.overflow-dropdown button {
+		display: block;
+		width: 100%;
+		text-align: left;
+		padding: var(--size-2);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.overflow-menu > button {
+		padding: var(--size-1) var(--size-2);
+		min-width: auto;
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-sm);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.overflow-menu > button:hover {
+		background-color: var(--background-fill-secondary);
+	}
+
+	.overflow-menu :global(svg) {
+		width: 16px;
+		height: 16px;
+	}
+
+	.overflow-item-selected :global(svg) {
+		color: var(--color-accent);
 	}
 </style>
diff --git a/js/textbox/CHANGELOG.md b/js/textbox/CHANGELOG.md
index f0814fe594105..25a77655e3a0c 100644
--- a/js/textbox/CHANGELOG.md
+++ b/js/textbox/CHANGELOG.md
@@ -1,5 +1,74 @@
 # @gradio/textbox
 
+## 0.7.0-beta.5
+
+### Features
+
+- [#9437](https://github.com/gradio-app/gradio/pull/9437) [`c3d93be`](https://github.com/gradio-app/gradio/commit/c3d93bef94b9401747a363f7bad88a1d347d535b) - Adding new themes to Gradio 5.0.  Thanks @allisonwhilden!
+- [#9583](https://github.com/gradio-app/gradio/pull/9583) [`b92a762`](https://github.com/gradio-app/gradio/commit/b92a7623e1ebd801587041e1ccca058a61058da9) - Disable the submit button and enter-key submit when the text is empty.  Thanks @whitphx!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.7.0-beta.4
+
+### Features
+
+- [#9521](https://github.com/gradio-app/gradio/pull/9521) [`06ef22e`](https://github.com/gradio-app/gradio/commit/06ef22e83cdd27e7afb381396d153d9db3dea16e) - Allow `info=` to render markdown.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+
+## 0.7.0-beta.3
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.7.0-beta.2
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+
+## 0.7.0-beta.2
+
+### Features
+
+- [#8966](https://github.com/gradio-app/gradio/pull/8966) [`8e52b6a`](https://github.com/gradio-app/gradio/commit/8e52b6a3e75957462bc7fdbf6ff9c280084d5f08) - Chatbot Examples.  Thanks @dawoodkhan82!
+- [#9280](https://github.com/gradio-app/gradio/pull/9280) [`7122420`](https://github.com/gradio-app/gradio/commit/712242047fde3a594dfde7f48a44c7ea16239dc8) - Match style of textbox stop button to submit button.  Thanks @freddyaboulton!
+
+### Fixes
+
+- [#9328](https://github.com/gradio-app/gradio/pull/9328) [`6a7f631`](https://github.com/gradio-app/gradio/commit/6a7f63180b4105622298dd742d6a0d25216ea629) - Set the color of placeholder in a disabled textbox to gray instead of black, and disable typing while a response is generating in `gr.ChatInterface`, allow `gr.MultimodalTextbox` to accept string values.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.7.0-beta.1
+
+### Features
+
+- [#9235](https://github.com/gradio-app/gradio/pull/9235) [`f8b411f`](https://github.com/gradio-app/gradio/commit/f8b411fe282ff0316ed4abebc0a043b044bf4dd9) - Built-in submit and stop buttons in `gr.ChatInterface(multimodal=False)`, adding `submit_btn` and `stop_btn` props to `gr.Textbox()` and `gr.MultimodalText()`.  Thanks @whitphx!
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+
 ## 0.7.0
 
 ### Features
diff --git a/js/textbox/Index.svelte b/js/textbox/Index.svelte
index d582877a20407..3e51e0c14ed56 100644
--- a/js/textbox/Index.svelte
+++ b/js/textbox/Index.svelte
@@ -19,6 +19,7 @@
 		select: SelectData;
 		input: never;
 		focus: never;
+		stop: never;
 		clear_status: LoadingStatus;
 	}>;
 	export let label = "Textbox";
@@ -35,6 +36,8 @@
 	export let container = true;
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
+	export let submit_btn: string | boolean | null = null;
+	export let stop_btn: string | boolean | null = null;
 	export let show_copy_button = false;
 	export let loading_status: LoadingStatus | undefined = undefined;
 	export let value_is_output = false;
@@ -43,6 +46,7 @@
 	export let autofocus = false;
 	export let autoscroll = true;
 	export let interactive: boolean;
+	export let root: string;
 	export let max_length: number | undefined = undefined;
 </script>
 
@@ -69,6 +73,7 @@
 		bind:value_is_output
 		{label}
 		{info}
+		{root}
 		{show_label}
 		{lines}
 		{type}
@@ -76,6 +81,8 @@
 		{text_align}
 		max_lines={!max_lines ? lines + 1 : max_lines}
 		{placeholder}
+		{submit_btn}
+		{stop_btn}
 		{show_copy_button}
 		{autofocus}
 		{container}
@@ -87,6 +94,7 @@
 		on:blur={() => gradio.dispatch("blur")}
 		on:select={(e) => gradio.dispatch("select", e.detail)}
 		on:focus={() => gradio.dispatch("focus")}
+		on:stop={() => gradio.dispatch("stop")}
 		disabled={!interactive}
 	/>
 </Block>
diff --git a/js/textbox/package.json b/js/textbox/package.json
index 62b4e2759c7ec..c2c09f3c1faf6 100644
--- a/js/textbox/package.json
+++ b/js/textbox/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/textbox",
-	"version": "0.7.0",
+	"version": "0.7.0-beta.5",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/textbox/shared/Textbox.svelte b/js/textbox/shared/Textbox.svelte
index 00d228188b65f..79eeea477cdb2 100644
--- a/js/textbox/shared/Textbox.svelte
+++ b/js/textbox/shared/Textbox.svelte
@@ -6,7 +6,7 @@
 		tick
 	} from "svelte";
 	import { BlockTitle } from "@gradio/atoms";
-	import { Copy, Check } from "@gradio/icons";
+	import { Copy, Check, Send, Square } from "@gradio/icons";
 	import { fade } from "svelte/transition";
 	import type { SelectData } from "@gradio/utils";
 
@@ -22,11 +22,14 @@
 	export let max_lines: number;
 	export let type: "text" | "password" | "email" = "text";
 	export let show_copy_button = false;
+	export let submit_btn: string | boolean | null = null;
+	export let stop_btn: string | boolean | null = null;
 	export let rtl = false;
 	export let autofocus = false;
 	export let text_align: "left" | "right" | undefined = undefined;
 	export let autoscroll = true;
 	export let max_length: number | undefined = undefined;
+	export let root: string;
 
 	let el: HTMLTextAreaElement | HTMLInputElement;
 	let copied = false;
@@ -35,13 +38,17 @@
 	let previous_scroll_top = 0;
 	let user_has_scrolled_up = false;
 
+	const show_textbox_border = !submit_btn;
+
 	$: value, el && lines !== max_lines && resize({ target: el });
+	$: can_submit = value !== "";
 
 	$: if (value === null) value = "";
 
 	const dispatch = createEventDispatcher<{
 		change: string;
 		submit: undefined;
+		stop: undefined;
 		blur: undefined;
 		select: SelectData;
 		input: undefined;
@@ -106,7 +113,9 @@
 		await tick();
 		if (e.key === "Enter" && e.shiftKey && lines > 1) {
 			e.preventDefault();
-			dispatch("submit");
+			if (can_submit) {
+				dispatch("submit");
+			}
 		} else if (
 			e.key === "Enter" &&
 			!e.shiftKey &&
@@ -114,7 +123,9 @@
 			max_lines >= 1
 		) {
 			e.preventDefault();
-			dispatch("submit");
+			if (can_submit) {
+				dispatch("submit");
+			}
 		}
 	}
 
@@ -133,21 +144,32 @@
 		}
 	}
 
+	function handle_stop(): void {
+		dispatch("stop");
+	}
+
+	function handle_submit(): void {
+		dispatch("submit");
+	}
+
 	async function resize(
 		event: Event | { target: HTMLTextAreaElement | HTMLInputElement }
 	): Promise<void> {
 		await tick();
 		if (lines === max_lines) return;
 
+		const target = event.target as HTMLTextAreaElement;
+		const computed_styles = window.getComputedStyle(target);
+		const padding_top = parseFloat(computed_styles.paddingTop);
+		const padding_bottom = parseFloat(computed_styles.paddingBottom);
+		const line_height = parseFloat(computed_styles.lineHeight);
+
 		let max =
 			max_lines === undefined
 				? false
-				: max_lines === undefined // default
-					? 21 * 11
-					: 21 * (max_lines + 1);
-		let min = 21 * (lines + 1);
+				: padding_top + padding_bottom + line_height * max_lines;
+		let min = padding_top + padding_bottom + lines * line_height;
 
-		const target = event.target as HTMLTextAreaElement;
 		target.style.height = "1px";
 
 		let scroll_height;
@@ -180,19 +202,92 @@
 </script>
 
 <!-- svelte-ignore a11y-autofocus -->
-<label class:container>
-	<BlockTitle {show_label} {info}>{label}</BlockTitle>
+<label class:container class:show_textbox_border>
+	<BlockTitle {root} {show_label} {info}>{label}</BlockTitle>
 
-	{#if lines === 1 && max_lines === 1}
-		{#if type === "text"}
-			<input
+	<div class="input-container">
+		{#if lines === 1 && max_lines === 1}
+			{#if type === "text"}
+				<input
+					data-testid="textbox"
+					type="text"
+					class="scroll-hide"
+					dir={rtl ? "rtl" : "ltr"}
+					bind:value
+					bind:this={el}
+					{placeholder}
+					{disabled}
+					{autofocus}
+					maxlength={max_length}
+					on:keypress={handle_keypress}
+					on:blur
+					on:select={handle_select}
+					on:focus
+					style={text_align ? "text-align: " + text_align : ""}
+				/>
+			{:else if type === "password"}
+				<input
+					data-testid="password"
+					type="password"
+					class="scroll-hide"
+					bind:value
+					bind:this={el}
+					{placeholder}
+					{disabled}
+					{autofocus}
+					maxlength={max_length}
+					on:keypress={handle_keypress}
+					on:blur
+					on:select={handle_select}
+					on:focus
+					autocomplete=""
+				/>
+			{:else if type === "email"}
+				<input
+					data-testid="textbox"
+					type="email"
+					class="scroll-hide"
+					bind:value
+					bind:this={el}
+					{placeholder}
+					{disabled}
+					{autofocus}
+					maxlength={max_length}
+					on:keypress={handle_keypress}
+					on:blur
+					on:select={handle_select}
+					on:focus
+					autocomplete="email"
+				/>
+			{/if}
+		{:else}
+			{#if show_label && show_copy_button}
+				{#if copied}
+					<button
+						in:fade={{ duration: 300 }}
+						class="copy-button"
+						aria-label="Copied"
+						aria-roledescription="Text copied"><Check /></button
+					>
+				{:else}
+					<button
+						on:click={handle_copy}
+						class="copy-button"
+						aria-label="Copy"
+						aria-roledescription="Copy text"><Copy /></button
+					>
+				{/if}
+			{/if}
+			<textarea
 				data-testid="textbox"
-				type="text"
+				use:text_area_resize={value}
 				class="scroll-hide"
 				dir={rtl ? "rtl" : "ltr"}
+				class:no-label={!show_label && submit_btn}
 				bind:value
 				bind:this={el}
 				{placeholder}
+				rows={lines}
 				{disabled}
 				{autofocus}
 				maxlength={max_length}
@@ -200,79 +295,38 @@
 				on:blur
 				on:select={handle_select}
 				on:focus
+				on:scroll={handle_scroll}
 				style={text_align ? "text-align: " + text_align : ""}
 			/>
-		{:else if type === "password"}
-			<input
-				data-testid="password"
-				type="password"
-				class="scroll-hide"
-				bind:value
-				bind:this={el}
-				{placeholder}
-				{disabled}
-				{autofocus}
-				maxlength={max_length}
-				on:keypress={handle_keypress}
-				on:blur
-				on:select={handle_select}
-				on:focus
-				autocomplete=""
-			/>
-		{:else if type === "email"}
-			<input
-				data-testid="textbox"
-				type="email"
-				class="scroll-hide"
-				bind:value
-				bind:this={el}
-				{placeholder}
-				{disabled}
-				{autofocus}
-				maxlength={max_length}
-				on:keypress={handle_keypress}
-				on:blur
-				on:select={handle_select}
-				on:focus
-				autocomplete="email"
-			/>
 		{/if}
-	{:else}
-		{#if show_label && show_copy_button}
-			{#if copied}
-				<button
-					in:fade={{ duration: 300 }}
-					aria-label="Copied"
-					aria-roledescription="Text copied"><Check /></button
-				>
-			{:else}
-				<button
-					on:click={handle_copy}
-					aria-label="Copy"
-					aria-roledescription="Copy text"><Copy /></button
-				>
-			{/if}
+		{#if submit_btn}
+			<button
+				class="submit-button"
+				class:padded-button={submit_btn !== true}
+				on:click={handle_submit}
+				disabled={!can_submit}
+			>
+				{#if submit_btn === true}
+					<Send />
+				{:else}
+					{submit_btn}
+				{/if}
+			</button>
 		{/if}
-		<textarea
-			data-testid="textbox"
-			use:text_area_resize={value}
-			class="scroll-hide"
-			dir={rtl ? "rtl" : "ltr"}
-			bind:value
-			bind:this={el}
-			{placeholder}
-			rows={lines}
-			{disabled}
-			{autofocus}
-			maxlength={max_length}
-			on:keypress={handle_keypress}
-			on:blur
-			on:select={handle_select}
-			on:focus
-			on:scroll={handle_scroll}
-			style={text_align ? "text-align: " + text_align : ""}
-		/>
-	{/if}
+		{#if stop_btn}
+			<button
+				class="stop-button"
+				class:padded-button={stop_btn !== true}
+				on:click={handle_stop}
+			>
+				{#if stop_btn === true}
+					<Square fill="none" stroke_width={2.5} />
+				{:else}
+					{stop_btn}
+				{/if}
+			</button>
+		{/if}
+	</div>
 </label>
 
 <style>
@@ -283,10 +337,15 @@
 
 	input,
 	textarea {
+		flex-grow: 1;
+		outline: none !important;
+		margin-top: 0px;
+		margin-bottom: 0px;
+		resize: none;
+		z-index: 1;
 		display: block;
 		position: relative;
 		outline: none !important;
-		box-shadow: var(--input-shadow);
 		background: var(--input-background-fill);
 		padding: var(--input-padding);
 		width: 100%;
@@ -296,34 +355,43 @@
 		line-height: var(--line-sm);
 		border: none;
 	}
+	textarea.no-label {
+		padding-top: 5px;
+		padding-bottom: 5px;
+	}
+	label.show_textbox_border input,
+	label.show_textbox_border textarea {
+		box-shadow: var(--input-shadow);
+	}
 	label:not(.container),
-	label:not(.container) > input,
-	label:not(.container) > textarea {
+	label:not(.container) input,
+	label:not(.container) textarea {
 		height: 100%;
 	}
-	.container > input,
-	.container > textarea {
+	label.container.show_textbox_border input,
+	label.container.show_textbox_border textarea {
 		border: var(--input-border-width) solid var(--input-border-color);
 		border-radius: var(--input-radius);
 	}
 	input:disabled,
 	textarea:disabled {
-		-webkit-text-fill-color: var(--body-text-color);
 		-webkit-opacity: 1;
 		opacity: 1;
 	}
 
-	input:focus,
-	textarea:focus {
+	label.container.show_textbox_border input:focus,
+	label.container.show_textbox_border textarea:focus {
 		box-shadow: var(--input-shadow-focus);
 		border-color: var(--input-border-color-focus);
+		background: var(--input-background-fill-focus);
 	}
 
 	input::placeholder,
 	textarea::placeholder {
 		color: var(--input-placeholder-color);
 	}
-	button {
+
+	.copy-button {
 		display: flex;
 		position: absolute;
 		top: var(--block-label-margin);
@@ -343,4 +411,53 @@
 		font: var(--font-sans);
 		font-size: var(--button-small-text-size);
 	}
+
+	/* Same submit button style as MultimodalTextbox for the consistent UI */
+	.input-container {
+		display: flex;
+		position: relative;
+		align-items: flex-end;
+	}
+	.submit-button,
+	.stop-button {
+		border: none;
+		text-align: center;
+		text-decoration: none;
+		font-size: 14px;
+		cursor: pointer;
+		border-radius: 15px;
+		min-width: 30px;
+		height: 30px;
+		flex-shrink: 0;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		z-index: var(--layer-1);
+	}
+	.stop-button,
+	.submit-button {
+		background: var(--button-secondary-background-fill);
+		color: var(--button-secondary-text-color);
+	}
+	.stop-button:hover,
+	.submit-button:hover {
+		background: var(--button-secondary-background-fill-hover);
+	}
+	.stop-button:disabled,
+	.submit-button:disabled {
+		background: var(--button-secondary-background-fill);
+		cursor: pointer;
+	}
+	.submit-button :global(svg) {
+		height: 22px;
+		width: 22px;
+	}
+
+	.stop-button :global(svg) {
+		height: 16px;
+		width: 16px;
+	}
+	.padded-button {
+		padding: 0 10px;
+	}
 </style>
diff --git a/js/theme/CHANGELOG.md b/js/theme/CHANGELOG.md
index f5c8e4b580c8c..b86da0efb57dd 100644
--- a/js/theme/CHANGELOG.md
+++ b/js/theme/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @gradio/theme
 
+## 0.3.0-beta.1
+
+### Features
+
+- [#9204](https://github.com/gradio-app/gradio/pull/9204) [`3c73f00`](https://github.com/gradio-app/gradio/commit/3c73f00e3016b16917ebfe0bad390f2dff683457) - 🔡 Update default core Gradio font.  Thanks @hannahblair!
+
 ## 0.2.5
 
 ### Fixes
diff --git a/js/theme/package.json b/js/theme/package.json
index 3f5ba631d25e3..75c70b12e174a 100644
--- a/js/theme/package.json
+++ b/js/theme/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/theme",
-	"version": "0.2.5",
+	"version": "0.3.0-beta.1",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"main": "src/index.ts",
diff --git a/js/theme/src/pollen.config.cjs b/js/theme/src/pollen.config.cjs
index b1e0f949109cb..8cf39001733f7 100644
--- a/js/theme/src/pollen.config.cjs
+++ b/js/theme/src/pollen.config.cjs
@@ -11,7 +11,7 @@ module.exports = defineConfig((pollen) => {
 			},
 			font: {
 				...pollen.font,
-				sans: `Source Sans Pro, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
+				sans: `IBM Plex Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
 				mono: `IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`
 			},
 			radius: {
diff --git a/js/timer/CHANGELOG.md b/js/timer/CHANGELOG.md
index 63f8bb623d70e..310a5365b0fe2 100644
--- a/js/timer/CHANGELOG.md
+++ b/js/timer/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @gradio/timer
 
+## 0.3.3-beta.2
+
+### Dependency updates
+
+- @gradio/utils@0.7.0-beta.2
+
+## 0.3.3-beta.1
+
+### Dependency updates
+
+- @gradio/utils@0.7.0-beta.1
+
 ## 0.3.3
 
 ### Fixes
diff --git a/js/timer/package.json b/js/timer/package.json
index 514106f2c8a06..5371258ab2649 100644
--- a/js/timer/package.json
+++ b/js/timer/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/timer",
-	"version": "0.3.3",
+	"version": "0.3.3-beta.2",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/tootils/CHANGELOG.md b/js/tootils/CHANGELOG.md
index 84e359a4ef0ea..d3d188a034f78 100644
--- a/js/tootils/CHANGELOG.md
+++ b/js/tootils/CHANGELOG.md
@@ -1,5 +1,47 @@
 # @self/tootils
 
+## 0.7.0-beta.5
+
+### Features
+
+- [#9590](https://github.com/gradio-app/gradio/pull/9590) [`e853c41`](https://github.com/gradio-app/gradio/commit/e853c413583d91186aef3aceb0849d0ec0494834) - SSR e2e + fixes.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.5
+
+## 0.6.5-beta.4
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+
+## 0.6.5-beta.3
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.3
+
+## 0.6.5-beta.2
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+
+## 0.6.5-beta.2
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.6.5-beta.1
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+
 ## 0.6.5
 
 ### Fixes
diff --git a/js/tootils/package.json b/js/tootils/package.json
index ef5ca753c3b7a..26d90f170a291 100644
--- a/js/tootils/package.json
+++ b/js/tootils/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@self/tootils",
-	"version": "0.6.5",
+	"version": "0.7.0-beta.5",
 	"description": "Internal test utilities",
 	"type": "module",
 	"main": "src/index.ts",
diff --git a/js/tootils/src/index.ts b/js/tootils/src/index.ts
index e8cf8784c56cf..bc5bce7cbf77b 100644
--- a/js/tootils/src/index.ts
+++ b/js/tootils/src/index.ts
@@ -31,6 +31,9 @@ const test_normal = base.extend<{ setup: void }>({
 			const test_name = path.basename(file, ".spec.ts");
 
 			await page.goto(`localhost:${port}/${test_name}`);
+			if (process.env?.GRADIO_SSR_MODE?.toLowerCase() === "true") {
+				await page.waitForSelector("#svelte-announcer");
+			}
 
 			await use();
 		},
@@ -235,4 +238,7 @@ export async function go_to_testcase(
 ): Promise<void> {
 	const url = page.url();
 	await page.goto(`${url.substring(0, url.length - 1)}_${test_case}_testcase`);
+	if (process.env?.GRADIO_SSR_MODE?.toLowerCase() === "true") {
+		await page.waitForSelector("#svelte-announcer");
+	}
 }
diff --git a/js/upload/CHANGELOG.md b/js/upload/CHANGELOG.md
index efa94fa6f5609..eb515c0418fc9 100644
--- a/js/upload/CHANGELOG.md
+++ b/js/upload/CHANGELOG.md
@@ -1,5 +1,63 @@
 # @gradio/upload
 
+## 0.13.0-beta.7
+
+### Dependency updates
+
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+
+## 0.13.0-beta.6
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.4
+- @gradio/client@1.6.0-beta.4
+
+## 0.13.0-beta.5
+
+### Dependency updates
+
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+
+## 0.13.0-beta.4
+
+### Dependency updates
+
+- @gradio/wasm@0.14.0-beta.3
+
+## 0.13.0-beta.3
+
+### Dependency updates
+
+- @gradio/client@1.6.0-beta.3
+
+## 0.13.0-beta.2
+
+### Features
+
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+- [#9250](https://github.com/gradio-app/gradio/pull/9250) [`350b0a5`](https://github.com/gradio-app/gradio/commit/350b0a5cafb9176f914f62e7c90de51d4352cc77) - Improve Icon Button consistency.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/wasm@0.14.0-beta.2
+- @gradio/client@1.6.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+
+## 0.12.4-beta.1
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/client@1.6.0-beta.1
+- @gradio/wasm@0.13.1-beta.1
+
 ## 0.12.4
 
 ### Fixes
diff --git a/js/upload/package.json b/js/upload/package.json
index 16bc54c6d883f..bc26798958601 100644
--- a/js/upload/package.json
+++ b/js/upload/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/upload",
-	"version": "0.12.4",
+	"version": "0.13.0-beta.7",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"main": "src/index.ts",
diff --git a/js/upload/src/ModifyUpload.svelte b/js/upload/src/ModifyUpload.svelte
index 7a1e190e5e5e7..525b6e8c86950 100644
--- a/js/upload/src/ModifyUpload.svelte
+++ b/js/upload/src/ModifyUpload.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { IconButton } from "@gradio/atoms";
+	import { IconButton, IconButtonWrapper } from "@gradio/atoms";
 	import type { I18nFormatter } from "@gradio/utils";
 	import { Edit, Clear, Undo, Download } from "@gradio/icons";
 	import { DownloadLink } from "@gradio/wasm/svelte";
@@ -9,7 +9,6 @@
 	export let editable = false;
 	export let undoable = false;
 	export let download: string | null = null;
-	export let absolute = true;
 	export let i18n: I18nFormatter;
 
 	const dispatch = createEventDispatcher<{
@@ -19,10 +18,7 @@
 	}>();
 </script>
 
-<div
-	class:not-absolute={!absolute}
-	style:position={absolute ? "absolute" : "static"}
->
+<IconButtonWrapper>
 	{#if editable}
 		<IconButton
 			Icon={Edit}
@@ -45,6 +41,8 @@
 		</DownloadLink>
 	{/if}
 
+	<slot />
+
 	<IconButton
 		Icon={Clear}
 		label={i18n("common.clear")}
@@ -53,19 +51,4 @@
 			event.stopPropagation();
 		}}
 	/>
-</div>
-
-<style>
-	div {
-		display: flex;
-		top: var(--size-2);
-		right: var(--size-2);
-		justify-content: flex-end;
-		gap: var(--spacing-sm);
-		z-index: var(--layer-1);
-	}
-
-	.not-absolute {
-		margin: var(--size-1);
-	}
-</style>
+</IconButtonWrapper>
diff --git a/js/upload/src/UploadProgress.svelte b/js/upload/src/UploadProgress.svelte
index 3beb4f4584c10..c31e162b7717f 100644
--- a/js/upload/src/UploadProgress.svelte
+++ b/js/upload/src/UploadProgress.svelte
@@ -39,7 +39,7 @@
 
 	onMount(async () => {
 		stream = await stream_handler(
-			new URL(`${root}/upload_progress?upload_id=${upload_id}`)
+			new URL(`${root}/gradio_api/upload_progress?upload_id=${upload_id}`)
 		);
 
 		if (stream == null) {
diff --git a/js/uploadbutton/CHANGELOG.md b/js/uploadbutton/CHANGELOG.md
index 3a53dcea194a5..e40c174ae2b0a 100644
--- a/js/uploadbutton/CHANGELOG.md
+++ b/js/uploadbutton/CHANGELOG.md
@@ -1,5 +1,64 @@
 # @gradio/uploadbutton
 
+## 0.7.0-beta.7
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.7
+- @gradio/button@0.3.0-beta.7
+
+## 0.7.0-beta.6
+
+### Dependency updates
+
+- @gradio/client@1.6.0-beta.4
+- @gradio/upload@0.13.0-beta.6
+- @gradio/button@0.3.0-beta.6
+
+## 0.7.0-beta.5
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.5
+- @gradio/button@0.3.0-beta.5
+
+## 0.7.0-beta.4
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.4
+- @gradio/button@0.3.0-beta.4
+
+## 0.7.0-beta.3
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.3
+- @gradio/client@1.6.0-beta.3
+- @gradio/button@0.3.0-beta.3
+
+## 0.7.0-beta.2
+
+### Features
+
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.2
+- @gradio/client@1.6.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+- @gradio/button@0.3.0-beta.2
+
+## 0.6.19-beta.1
+
+### Dependency updates
+
+- @gradio/utils@0.7.0-beta.1
+- @gradio/client@1.6.0-beta.1
+- @gradio/upload@0.12.4-beta.1
+- @gradio/button@0.3.0-beta.1
+
 ## 0.6.19
 
 ### Fixes
diff --git a/js/uploadbutton/Index.svelte b/js/uploadbutton/Index.svelte
index a0b455f72776e..dd6e12322ffd7 100644
--- a/js/uploadbutton/Index.svelte
+++ b/js/uploadbutton/Index.svelte
@@ -61,7 +61,7 @@
 	on:error={({ detail }) => {
 		gradio.dispatch("error", detail);
 	}}
-	upload={gradio.client.upload}
+	upload={(...args) => gradio.client.upload(...args)}
 >
 	{label ? gradio.i18n(label) : ""}
 </UploadButton>
diff --git a/js/uploadbutton/package.json b/js/uploadbutton/package.json
index e75babed2f542..c73904876b32f 100644
--- a/js/uploadbutton/package.json
+++ b/js/uploadbutton/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/uploadbutton",
-	"version": "0.6.19",
+	"version": "0.7.0-beta.7",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
diff --git a/js/utils/CHANGELOG.md b/js/utils/CHANGELOG.md
index 25b4ab244eb8c..718616797882b 100644
--- a/js/utils/CHANGELOG.md
+++ b/js/utils/CHANGELOG.md
@@ -1,11 +1,28 @@
 # @gradio/utils
 
-## 0.6.1
+## 0.7.0-beta.2
+
+### Features
+
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+- [#9363](https://github.com/gradio-app/gradio/pull/9363) [`3ad28c7`](https://github.com/gradio-app/gradio/commit/3ad28c7e310e8589e0c53b7efee8031e129bece8) - Prevent HTML and Markdown height changing when status is hidden.  Thanks @hannahblair!
+
+## 0.7.0-beta.1
 
 ### Features
 
 - [#9187](https://github.com/gradio-app/gradio/pull/9187) [`5bf00b7`](https://github.com/gradio-app/gradio/commit/5bf00b7524ebf399b48719120a49d15bb21bd65c) - make all component SSR compatible.  Thanks @pngwn!
 
+### Dependency updates
+
+- @gradio/theme@0.3.0-beta.1
+
+## 0.7.0
+
+### Features
+
+- [#9173](https://github.com/gradio-app/gradio/pull/9173) [`66349fe`](https://github.com/gradio-app/gradio/commit/66349fe26827e3a3c15b738a1177e95fec7f5554) - Streaming Guides.  Thanks @freddyaboulton!
+
 ### Fixes
 
 - [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types.  Thanks @pngwn!
diff --git a/js/utils/package.json b/js/utils/package.json
index f2cb578e13f6d..e1f950e7e1b2d 100644
--- a/js/utils/package.json
+++ b/js/utils/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/utils",
-	"version": "0.6.1",
+	"version": "0.7.0-beta.2",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"main": "./src/index.ts",
diff --git a/js/utils/src/utils.ts b/js/utils/src/utils.ts
index 1ca9aba13555e..b782a9fea7ce7 100644
--- a/js/utils/src/utils.ts
+++ b/js/utils/src/utils.ts
@@ -2,6 +2,11 @@ import type { ActionReturn } from "svelte/action";
 import type { Client } from "@gradio/client";
 import type { ComponentType, SvelteComponent } from "svelte";
 
+export interface ValueData {
+	value: any;
+	is_value_data: boolean;
+}
+
 export interface SelectData {
 	row_value?: any[];
 	index: number | [number, number];
@@ -209,6 +214,8 @@ type component_loader = (args: Args) => {
 	};
 };
 
+const is_browser = typeof window !== "undefined";
+
 export type I18nFormatter = any;
 export class Gradio<T extends Record<string, any> = Record<string, any>> {
 	#id: number;
@@ -250,6 +257,7 @@ export class Gradio<T extends Record<string, any> = Record<string, any>> {
 	}
 
 	dispatch<E extends keyof T>(event_name: E, data?: T[E]): void {
+		if (!is_browser || !this.#el) return;
 		const e = new CustomEvent("gradio", {
 			bubbles: true,
 			detail: { data, id: this.#id, event: event_name }
@@ -269,3 +277,9 @@ function _load_component(
 		variant
 	});
 }
+
+export const css_units = (dimension_value: string | number): string => {
+	return typeof dimension_value === "number"
+		? dimension_value + "px"
+		: dimension_value;
+};
diff --git a/js/video/CHANGELOG.md b/js/video/CHANGELOG.md
index 3810c56ea3b05..09e14ac6417e1 100644
--- a/js/video/CHANGELOG.md
+++ b/js/video/CHANGELOG.md
@@ -1,5 +1,93 @@
 # @gradio/video
 
+## 0.11.0-beta.7
+
+### Features
+
+- [#9582](https://github.com/gradio-app/gradio/pull/9582) [`43a7f42`](https://github.com/gradio-app/gradio/commit/43a7f420d8ac34c7f7fa71d6e630a4c8618d3780) - Chatbot autoscroll.  Thanks @whitphx!
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.7
+- @gradio/statustracker@0.8.0-beta.5
+- @gradio/icons@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.5
+- @gradio/image@0.16.0-beta.7
+
+## 0.11.0-beta.6
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.4
+- @gradio/atoms@0.9.0-beta.4
+- @gradio/client@1.6.0-beta.4
+- @gradio/upload@0.13.0-beta.6
+- @gradio/image@0.16.0-beta.6
+
+## 0.11.0-beta.5
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.5
+- @gradio/statustracker@0.8.0-beta.3
+- @gradio/icons@0.8.0-beta.3
+- @gradio/atoms@0.9.0-beta.3
+- @gradio/image@0.16.0-beta.5
+
+## 0.11.0-beta.4
+
+### Dependency updates
+
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/upload@0.13.0-beta.4
+- @gradio/image@0.16.0-beta.4
+- @gradio/wasm@0.14.0-beta.3
+
+## 0.11.0-beta.3
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.3
+- @gradio/client@1.6.0-beta.3
+- @gradio/image@0.16.0-beta.3
+
+## 0.11.0-beta.2
+
+### Features
+
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+- [#9250](https://github.com/gradio-app/gradio/pull/9250) [`350b0a5`](https://github.com/gradio-app/gradio/commit/350b0a5cafb9176f914f62e7c90de51d4352cc77) - Improve Icon Button consistency.  Thanks @hannahblair!
+- [#9253](https://github.com/gradio-app/gradio/pull/9253) [`99648ec`](https://github.com/gradio-app/gradio/commit/99648ec7c4443e74799941e47b0015ac9ca581e1) - Adds ability to block event trigger when file is uploading.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/upload@0.13.0-beta.2
+- @gradio/wasm@0.14.0-beta.2
+- @gradio/client@1.6.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+- @gradio/image@0.16.0-beta.2
+
+## 0.11.0-beta.1
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/client@1.6.0-beta.1
+- @gradio/image@0.16.0-beta.1
+- @gradio/upload@0.12.4-beta.1
+- @gradio/wasm@0.13.1-beta.1
+
+## 0.11.0
+
+### Features
+
+- [#8941](https://github.com/gradio-app/gradio/pull/8941) [`97a7bf6`](https://github.com/gradio-app/gradio/commit/97a7bf66a79179d1b91a3199d68e5c11216ca500) - Streaming inputs for 5.0.  Thanks @freddyaboulton!
 ## 0.10.4
 
 ### Fixes
diff --git a/js/video/Example.svelte b/js/video/Example.svelte
index 25de85ccabc2c..4d20b985098e7 100644
--- a/js/video/Example.svelte
+++ b/js/video/Example.svelte
@@ -36,6 +36,7 @@
 				on:mouseover={video.play.bind(video)}
 				on:mouseout={video.pause.bind(video)}
 				src={value?.video.url}
+				is_stream={false}
 				{loop}
 			/>
 		</div>
diff --git a/js/video/Index.svelte b/js/video/Index.svelte
index a2c88606df105..1b2e95de41a3a 100644
--- a/js/video/Index.svelte
+++ b/js/video/Index.svelte
@@ -54,6 +54,9 @@
 	export let mirror_webcam: boolean;
 	export let include_audio: boolean;
 	export let loop = false;
+	export let input_ready: boolean;
+	let uploading = false;
+	$: input_ready = !uploading;
 
 	let _video: FileData | null = null;
 	let _subtitle: FileData | null = null;
@@ -158,7 +161,7 @@
 			on:share={({ detail }) => gradio.dispatch("share", detail)}
 			on:error={({ detail }) => gradio.dispatch("error", detail)}
 			i18n={gradio.i18n}
-			upload={gradio.client.upload}
+			upload={(...args) => gradio.client.upload(...args)}
 		/>
 	</Block>
 {:else}
@@ -189,6 +192,7 @@
 			on:change={handle_change}
 			on:drag={({ detail }) => (dragging = detail)}
 			on:error={handle_error}
+			bind:uploading
 			{label}
 			{show_label}
 			{show_download_button}
@@ -210,8 +214,8 @@
 			on:stop_recording={() => gradio.dispatch("stop_recording")}
 			i18n={gradio.i18n}
 			max_file_size={gradio.max_file_size}
-			upload={gradio.client.upload}
-			stream_handler={gradio.client.stream}
+			upload={(...args) => gradio.client.upload(...args)}
+			stream_handler={(...args) => gradio.client.stream(...args)}
 		>
 			<UploadText i18n={gradio.i18n} type="video" />
 		</Video>
diff --git a/js/video/package.json b/js/video/package.json
index 48b267cb89e9e..905dca5dfc9fb 100644
--- a/js/video/package.json
+++ b/js/video/package.json
@@ -1,12 +1,14 @@
 {
 	"name": "@gradio/video",
-	"version": "0.10.4",
+	"version": "0.11.0-beta.7",
 	"description": "Gradio UI packages",
 	"type": "module",
 	"author": "",
 	"license": "ISC",
 	"private": false,
 	"dependencies": {
+		"@ffmpeg/ffmpeg": "^0.12.7",
+		"@ffmpeg/util": "^0.12.1",
 		"@gradio/atoms": "workspace:^",
 		"@gradio/client": "workspace:^",
 		"@gradio/icons": "workspace:^",
@@ -15,8 +17,7 @@
 		"@gradio/upload": "workspace:^",
 		"@gradio/utils": "workspace:^",
 		"@gradio/wasm": "workspace:^",
-		"@ffmpeg/ffmpeg": "^0.12.7",
-		"@ffmpeg/util": "^0.12.1",
+		"hls.js": "^1.5.13",
 		"mrmime": "^2.0.0"
 	},
 	"devDependencies": {
diff --git a/js/video/shared/InteractiveVideo.svelte b/js/video/shared/InteractiveVideo.svelte
index 684b51d5a96b7..3f1c2045c3d2b 100644
--- a/js/video/shared/InteractiveVideo.svelte
+++ b/js/video/shared/InteractiveVideo.svelte
@@ -32,6 +32,9 @@
 	export let upload: Client["upload"];
 	export let stream_handler: Client["stream"];
 	export let loop: boolean;
+	export let uploading = false;
+
+	let has_change_history = false;
 
 	const dispatch = createEventDispatcher<{
 		change: FileData | null;
@@ -59,6 +62,7 @@
 	}
 
 	function handle_change(video: FileData): void {
+		has_change_history = true;
 		dispatch("change", video);
 	}
 
@@ -79,6 +83,7 @@
 			{#if active_source === "upload"}
 				<Upload
 					bind:dragging
+					bind:uploading
 					filetype="video/x-m4v,video/*"
 					on:load={handle_load}
 					{max_file_size}
@@ -101,41 +106,41 @@
 					on:stop_recording
 					{i18n}
 					{upload}
+					stream_every={1}
 				/>
 			{/if}
 		</div>
-	{:else}
-		<ModifyUpload
-			{i18n}
-			on:clear={handle_clear}
-			download={show_download_button ? value.url : null}
-		/>
-		{#if playable()}
-			{#key value?.url}
-				<Player
-					{upload}
-					{root}
-					interactive
-					{autoplay}
-					src={value.url}
-					subtitle={subtitle?.url}
-					on:play
-					on:pause
-					on:stop
-					on:end
-					mirror={mirror_webcam && active_source === "webcam"}
-					{label}
-					{handle_change}
-					{handle_reset_value}
-					{loop}
-				/>
-			{/key}
-		{:else if value.size}
-			<div class="file-name">{value.orig_name || value.url}</div>
-			<div class="file-size">
-				{prettyBytes(value.size)}
-			</div>
-		{/if}
+	{:else if playable()}
+		{#key value?.url}
+			<Player
+				{upload}
+				{root}
+				interactive
+				{autoplay}
+				src={value.url}
+				subtitle={subtitle?.url}
+				is_stream={false}
+				on:play
+				on:pause
+				on:stop
+				on:end
+				mirror={mirror_webcam && active_source === "webcam"}
+				{label}
+				{handle_change}
+				{handle_reset_value}
+				{loop}
+				{value}
+				{i18n}
+				{show_download_button}
+				{handle_clear}
+				{has_change_history}
+			/>
+		{/key}
+	{:else if value.size}
+		<div class="file-name">{value.orig_name || value.url}</div>
+		<div class="file-size">
+			{prettyBytes(value.size)}
+		</div>
 	{/if}
 
 	<SelectSource {sources} bind:active_source {handle_clear} />
diff --git a/js/video/shared/Player.svelte b/js/video/shared/Player.svelte
index 46443d51ea4ab..9e06786edf6ba 100644
--- a/js/video/shared/Player.svelte
+++ b/js/video/shared/Player.svelte
@@ -6,6 +6,7 @@
 	import type { FileData, Client } from "@gradio/client";
 	import { prepare_files } from "@gradio/client";
 	import { format_time } from "@gradio/utils";
+	import type { I18nFormatter } from "@gradio/utils";
 
 	export let root = "";
 	export let src: string;
@@ -18,12 +19,19 @@
 	export let handle_change: (video: FileData) => void = () => {};
 	export let handle_reset_value: () => void = () => {};
 	export let upload: Client["upload"];
+	export let is_stream: boolean | undefined;
+	export let i18n: I18nFormatter;
+	export let show_download_button = false;
+	export let value: FileData | null = null;
+	export let handle_clear: () => void = () => {};
+	export let has_change_history = false;
 
 	const dispatch = createEventDispatcher<{
 		play: undefined;
 		pause: undefined;
 		stop: undefined;
 		end: undefined;
+		clear: undefined;
 	}>();
 
 	let time = 0;
@@ -98,6 +106,7 @@
 			preload="auto"
 			{autoplay}
 			{loop}
+			{is_stream}
 			on:click={play_pause}
 			on:play
 			on:pause
@@ -108,7 +117,9 @@
 			bind:node={video}
 			data-testid={`${label}-player`}
 			{processingVideo}
-			on:load
+			on:loadstart
+			on:loadeddata
+			on:loadedmetadata
 		>
 			<track kind="captions" src={subtitle} default />
 		</Video>
@@ -165,6 +176,11 @@
 		{handle_trim_video}
 		{handle_reset_value}
 		bind:processingVideo
+		{value}
+		{i18n}
+		{show_download_button}
+		{handle_clear}
+		{has_change_history}
 	/>
 {/if}
 
diff --git a/js/video/shared/Video.svelte b/js/video/shared/Video.svelte
index b2000986b5627..34aab69a913fb 100644
--- a/js/video/shared/Video.svelte
+++ b/js/video/shared/Video.svelte
@@ -5,6 +5,8 @@
 
 	import { resolve_wasm_src } from "@gradio/wasm/svelte";
 
+	import Hls from "hls.js";
+
 	export let src: HTMLVideoAttributes["src"] = undefined;
 
 	export let muted: HTMLVideoAttributes["muted"] = undefined;
@@ -19,10 +21,12 @@
 
 	export let node: HTMLVideoElement | undefined = undefined;
 	export let loop: boolean;
+	export let is_stream;
 
 	export let processingVideo = false;
 
 	let resolved_src: typeof src;
+	let stream_active = false;
 
 	// The `src` prop can be updated before the Promise from `resolve_wasm_src` is resolved.
 	// In such a case, the resolved value for the old `src` has to be discarded,
@@ -46,6 +50,53 @@
 	}
 
 	const dispatch = createEventDispatcher();
+
+	function load_stream(
+		src: string | null | undefined,
+		is_stream: boolean,
+		node: HTMLVideoElement | undefined
+	): void {
+		if (!src || !is_stream) return;
+		if (!node) return;
+		if (Hls.isSupported() && !stream_active) {
+			const hls = new Hls({
+				maxBufferLength: 1, // 0.5 seconds (500 ms)
+				maxMaxBufferLength: 1, // Maximum max buffer length in seconds
+				lowLatencyMode: true // Enable low latency mode
+			});
+			hls.loadSource(src);
+			hls.attachMedia(node);
+			hls.on(Hls.Events.MANIFEST_PARSED, function () {
+				(node as HTMLVideoElement).play();
+			});
+			hls.on(Hls.Events.ERROR, function (event, data) {
+				console.error("HLS error:", event, data);
+				if (data.fatal) {
+					switch (data.type) {
+						case Hls.ErrorTypes.NETWORK_ERROR:
+							console.error(
+								"Fatal network error encountered, trying to recover"
+							);
+							hls.startLoad();
+							break;
+						case Hls.ErrorTypes.MEDIA_ERROR:
+							console.error("Fatal media error encountered, trying to recover");
+							hls.recoverMediaError();
+							break;
+						default:
+							console.error("Fatal error, cannot recover");
+							hls.destroy();
+							break;
+					}
+				}
+			});
+			stream_active = true;
+		}
+	}
+
+	$: src, (stream_active = false);
+
+	$: load_stream(src, is_stream, node);
 </script>
 
 <!--
@@ -77,7 +128,9 @@ Then, even when `controls` is false, the compiled DOM would be `<video controls=
 	on:mouseout={dispatch.bind(null, "mouseout")}
 	on:focus={dispatch.bind(null, "focus")}
 	on:blur={dispatch.bind(null, "blur")}
-	on:load
+	on:loadstart
+	on:loadeddata
+	on:loadedmetadata
 	bind:currentTime
 	bind:duration
 	bind:paused
diff --git a/js/video/shared/VideoControls.svelte b/js/video/shared/VideoControls.svelte
index 01c61da34c9f8..30043a551b114 100644
--- a/js/video/shared/VideoControls.svelte
+++ b/js/video/shared/VideoControls.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
-	import { Undo, Trim } from "@gradio/icons";
+	import { Undo, Trim, Clear } from "@gradio/icons";
 	import VideoTimeline from "./VideoTimeline.svelte";
 	import { trimVideo } from "./utils";
 	import { FFmpeg } from "@ffmpeg/ffmpeg";
 	import loadFfmpeg from "./utils";
 	import { onMount } from "svelte";
 	import { format_time } from "@gradio/utils";
+	import { IconButton } from "@gradio/atoms";
+	import { ModifyUpload } from "@gradio/upload";
+	import type { FileData } from "@gradio/client";
 
 	export let videoElement: HTMLVideoElement;
 
@@ -15,6 +18,11 @@
 	export let handle_reset_value: () => void;
 	export let handle_trim_video: (videoBlob: Blob) => void;
 	export let processingVideo = false;
+	export let i18n: (key: string) => string;
+	export let value: FileData | null = null;
+	export let show_download_button = false;
+	export let handle_clear: () => void = () => {};
+	export let has_change_history = false;
 
 	let ffmpeg: FFmpeg;
 
@@ -41,7 +49,7 @@
 	};
 </script>
 
-<div class="container">
+<div class="container" class:hidden={mode !== "edit"}>
 	{#if mode === "edit"}
 		<div class="timeline-wrapper">
 			<VideoTimeline
@@ -60,62 +68,61 @@
 				aria-label="duration of selected region in seconds"
 				class:hidden={loadingTimeline}>{format_time(trimmedDuration)}</time
 			>
-		{:else}
-			<div />
-		{/if}
-
-		<div class="settings-wrapper">
-			{#if showRedo && mode === ""}
+			<div class="edit-buttons">
 				<button
-					class="action icon"
-					disabled={processingVideo}
-					aria-label="Reset video to initial value"
+					class:hidden={loadingTimeline}
+					class="text-button"
 					on:click={() => {
-						handle_reset_value();
 						mode = "";
-					}}
+						processingVideo = true;
+						trimVideo(ffmpeg, dragStart, dragEnd, videoElement)
+							.then((videoBlob) => {
+								handle_trim_video(videoBlob);
+							})
+							.then(() => {
+								processingVideo = false;
+							});
+					}}>Trim</button
 				>
-					<Undo />
-				</button>
-			{/if}
-
-			{#if interactive}
-				{#if mode === ""}
-					<button
-						disabled={processingVideo}
-						class="action icon"
-						aria-label="Trim video to selection"
-						on:click={toggleTrimmingMode}
-					>
-						<Trim />
-					</button>
-				{:else}
-					<button
-						class:hidden={loadingTimeline}
-						class="text-button"
-						on:click={() => {
-							mode = "";
-							processingVideo = true;
-							trimVideo(ffmpeg, dragStart, dragEnd, videoElement)
-								.then((videoBlob) => {
-									handle_trim_video(videoBlob);
-								})
-								.then(() => {
-									processingVideo = false;
-								});
-						}}>Trim</button
-					>
-					<button
-						class="text-button"
-						class:hidden={loadingTimeline}
-						on:click={toggleTrimmingMode}>Cancel</button
-					>
-				{/if}
-			{/if}
-		</div>
+				<button
+					class="text-button"
+					class:hidden={loadingTimeline}
+					on:click={toggleTrimmingMode}>Cancel</button
+				>
+			</div>
+		{:else}
+			<div />
+		{/if}
 	</div>
 </div>
 
+<ModifyUpload
+	{i18n}
+	on:clear={() => handle_clear()}
+	download={show_download_button ? value?.url : null}
+>
+	{#if showRedo && mode === ""}
+		<IconButton
+			Icon={Undo}
+			label="Reset video to initial value"
+			disabled={processingVideo || !has_change_history}
+			on:click={() => {
+				handle_reset_value();
+				mode = "";
+			}}
+		/>
+	{/if}
+
+	{#if interactive && mode === ""}
+		<IconButton
+			Icon={Trim}
+			label="Trim video to selection"
+			disabled={processingVideo}
+			on:click={toggleTrimmingMode}
+		/>
+	{/if}
+</ModifyUpload>
+
 <style>
 	.container {
 		width: 100%;
@@ -132,10 +139,7 @@
 		justify-content: center;
 		width: 100%;
 	}
-	.settings-wrapper {
-		display: flex;
-		justify-self: self-end;
-	}
+
 	.text-button {
 		border: 1px solid var(--neutral-400);
 		border-radius: var(--radius-sm);
@@ -148,9 +152,6 @@
 		padding: 0 5px;
 		margin-left: 5px;
 	}
-	.hidden {
-		display: none;
-	}
 
 	.text-button:hover,
 	.text-button:focus {
@@ -159,17 +160,26 @@
 	}
 
 	.controls {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
 		margin: var(--spacing-lg);
 		overflow: hidden;
-		text-align: left;
+	}
+
+	.edit-buttons {
+		display: flex;
+		gap: var(--spacing-sm);
 	}
 
 	@media (max-width: 320px) {
 		.controls {
-			display: flex;
-			flex-wrap: wrap;
+			flex-direction: column;
+			align-items: flex-start;
+		}
+
+		.edit-buttons {
+			margin-top: var(--spacing-sm);
 		}
 
 		.controls * {
@@ -180,29 +190,13 @@
 			margin-left: 0;
 		}
 	}
-	.action {
-		width: var(--size-5);
-		width: var(--size-5);
-		color: var(--neutral-400);
-		margin-left: var(--spacing-md);
-	}
-
-	.action:disabled {
-		cursor: not-allowed;
-		color: var(--border-color-accent-subdued);
-	}
-
-	.action:disabled:hover {
-		color: var(--border-color-accent-subdued);
-	}
-
-	.icon:hover,
-	.icon:focus {
-		color: var(--color-accent);
-	}
 
 	.container {
 		display: flex;
 		flex-direction: column;
 	}
+
+	.hidden {
+		display: none;
+	}
 </style>
diff --git a/js/video/shared/VideoPreview.svelte b/js/video/shared/VideoPreview.svelte
index 61a4d668d3559..470ab00d204dd 100644
--- a/js/video/shared/VideoPreview.svelte
+++ b/js/video/shared/VideoPreview.svelte
@@ -1,6 +1,12 @@
 <script lang="ts">
 	import { createEventDispatcher, afterUpdate, tick } from "svelte";
-	import { BlockLabel, Empty, IconButton, ShareButton } from "@gradio/atoms";
+	import {
+		BlockLabel,
+		Empty,
+		IconButton,
+		ShareButton,
+		IconButtonWrapper
+	} from "@gradio/atoms";
 	import type { FileData, Client } from "@gradio/client";
 	import { Video, Download } from "@gradio/icons";
 	import { uploadToHuggingFace } from "@gradio/utils";
@@ -29,6 +35,7 @@
 		pause: undefined;
 		end: undefined;
 		stop: undefined;
+		load: undefined;
 	}>();
 
 	$: value && dispatch("change", value);
@@ -51,54 +58,58 @@
 </script>
 
 <BlockLabel {show_label} Icon={Video} label={label || "Video"} />
-{#if value === null || value.url === undefined}
+{#if !value || value.url === undefined}
 	<Empty unpadded_box={true} size="large"><Video /></Empty>
 {:else}
 	{#key value.url}
 		<Player
 			src={value.url}
 			subtitle={subtitle?.url}
+			is_stream={value.is_stream}
 			{autoplay}
 			on:play
 			on:pause
 			on:stop
 			on:end
-			on:load
+			on:loadedmetadata={() => {
+				// Deal with `<video>`'s `loadedmetadata` event as `VideoPreview`'s `load` event
+				// to represent not only the video is loaded but also the metadata is loaded
+				// so its dimensions (w/h) are known. This is used for Chatbot's auto scroll.
+				dispatch("load");
+			}}
 			mirror={false}
 			{label}
 			{loop}
 			interactive={false}
 			{upload}
+			{i18n}
 		/>
 	{/key}
-	<div class="icon-buttons" data-testid="download-div">
-		{#if show_download_button}
-			<DownloadLink href={value.url} download={value.orig_name || value.path}>
-				<IconButton Icon={Download} label="Download" />
-			</DownloadLink>
-		{/if}
-		{#if show_share_button}
-			<ShareButton
-				{i18n}
-				on:error
-				on:share
-				{value}
-				formatter={async (value) => {
-					if (!value) return "";
-					let url = await uploadToHuggingFace(value.data, "url");
-					return url;
-				}}
-			/>
-		{/if}
+	<div data-testid="download-div">
+		<IconButtonWrapper>
+			{#if show_download_button}
+				<DownloadLink
+					href={value.is_stream
+						? value.url?.replace("playlist.m3u8", "playlist-file")
+						: value.url}
+					download={value.orig_name || value.path}
+				>
+					<IconButton Icon={Download} label="Download" />
+				</DownloadLink>
+			{/if}
+			{#if show_share_button}
+				<ShareButton
+					{i18n}
+					on:error
+					on:share
+					{value}
+					formatter={async (value) => {
+						if (!value) return "";
+						let url = await uploadToHuggingFace(value.data, "url");
+						return url;
+					}}
+				/>
+			{/if}
+		</IconButtonWrapper>
 	</div>
 {/if}
-
-<style>
-	.icon-buttons {
-		display: flex;
-		position: absolute;
-		top: 6px;
-		right: 6px;
-		gap: var(--size-1);
-	}
-</style>
diff --git a/js/wasm/CHANGELOG.md b/js/wasm/CHANGELOG.md
index cbc73eb98987a..420b5019c42d5 100644
--- a/js/wasm/CHANGELOG.md
+++ b/js/wasm/CHANGELOG.md
@@ -1,11 +1,26 @@
 # @gradio/wasm
 
-## 0.13.1
+## 0.14.0-beta.3
+
+### Features
+
+- [#9383](https://github.com/gradio-app/gradio/pull/9383) [`30d13ac`](https://github.com/gradio-app/gradio/commit/30d13ac8a932d53abfd236d3e4e845570480e701) - Pre/post-processing download requests.  Thanks @aliabid94!
+
+## 0.14.0-beta.2
+
+### Features
+
+- [#9250](https://github.com/gradio-app/gradio/pull/9250) [`350b0a5`](https://github.com/gradio-app/gradio/commit/350b0a5cafb9176f914f62e7c90de51d4352cc77) - Improve Icon Button consistency.  Thanks @hannahblair!
+- [#9312](https://github.com/gradio-app/gradio/pull/9312) [`7c0780b`](https://github.com/gradio-app/gradio/commit/7c0780b5677f8a1c05b9d2eee136e982917829b8) - Proposal: remove `gr.make_waveform` and remove `matplotlib` as a dependency.  Thanks @abidlabs!
+
+## 0.13.1-beta.1
 
 ### Features
 
 - [#9187](https://github.com/gradio-app/gradio/pull/9187) [`5bf00b7`](https://github.com/gradio-app/gradio/commit/5bf00b7524ebf399b48719120a49d15bb21bd65c) - make all component SSR compatible.  Thanks @pngwn!
 
+## 0.13.1-beta.0
+
 ### Fixes
 
 - [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types.  Thanks @pngwn!
diff --git a/js/wasm/package.json b/js/wasm/package.json
index 03ec52fbfbfef..650746f7e429f 100644
--- a/js/wasm/package.json
+++ b/js/wasm/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@gradio/wasm",
-	"version": "0.13.1",
+	"version": "0.14.0-beta.3",
 	"description": "Gradio Wasm package",
 	"type": "module",
 	"main": "./dist/src/index.js",
diff --git a/js/wasm/src/webworker/index.ts b/js/wasm/src/webworker/index.ts
index 4a90a0c35cd93..888fafe70cabf 100644
--- a/js/wasm/src/webworker/index.ts
+++ b/js/wasm/src/webworker/index.ts
@@ -140,7 +140,11 @@ async def _call_asgi_app_from_js(app_id, scope, receive, send):
 
 	async def rcv():
 			event = await receive()
-			return event.to_py()
+			py_event = event.to_py()
+			if "body" in py_event:
+					if isinstance(py_event["body"], memoryview):
+							py_event["body"] = py_event["body"].tobytes()
+			return py_event
 
 	async def snd(event):
 			await send(event)
@@ -167,16 +171,6 @@ anyio.to_thread.run_sync = mocked_anyio_to_thread_run_sync
 	`);
 	console.debug("Async libraries are mocked.");
 
-	console.debug("Setting matplotlib backend.");
-	updateProgress("Setting matplotlib backend");
-	// Ref: https://github.com/streamlit/streamlit/blob/1.22.0/lib/streamlit/web/bootstrap.py#L111
-	// This backend setting is required to use matplotlib in Wasm environment.
-	await pyodide.runPythonAsync(`
-import matplotlib
-matplotlib.use("agg")
-`);
-	console.debug("matplotlib backend is set.");
-
 	console.debug("Setting up Python utility functions.");
 	updateProgress("Setting up Python utility functions");
 	await pyodide.runPythonAsync(scriptRunnerPySource);
@@ -229,6 +223,22 @@ async function initializeApp(
 	updateProgress("Installing packages");
 	await micropip.install.callKwargs(options.requirements, { keep_going: true });
 	console.debug("Packages are installed.");
+
+	if (options.requirements.includes("matplotlib")) {
+		console.debug("Setting matplotlib backend.");
+		updateProgress("Setting matplotlib backend");
+		// Ref: https://github.com/pyodide/pyodide/issues/561#issuecomment-1992613717
+		// This backend setting is required to use matplotlib in Wasm environment.
+		await pyodide.runPythonAsync(`
+try:
+	import matplotlib
+	matplotlib.use("agg")
+except ImportError:
+	pass
+`);
+		console.debug("matplotlib backend is set.");
+	}
+
 	updateProgress("App is now loaded");
 }
 
@@ -434,12 +444,15 @@ function setupMessageHandler(receiver: MessageTransceiver): void {
 						.callKwargs(requirements, { keep_going: true })
 						.then(() => {
 							if (requirements.includes("matplotlib")) {
-								// Ref: https://github.com/streamlit/streamlit/blob/1.22.0/lib/streamlit/web/bootstrap.py#L111
+								// Ref: https://github.com/pyodide/pyodide/issues/561#issuecomment-1992613717
 								// This backend setting is required to use matplotlib in Wasm environment.
 								return pyodide.runPythonAsync(`
-									import matplotlib
-									matplotlib.use("agg")
-								`);
+try:
+	import matplotlib
+	matplotlib.use("agg")
+except ImportError:
+	pass
+`);
 							}
 						})
 						.then(() => {
diff --git a/js/wasm/svelte/DownloadLink.svelte b/js/wasm/svelte/DownloadLink.svelte
index 9ac06f3adff9d..25a3f4cc05c45 100644
--- a/js/wasm/svelte/DownloadLink.svelte
+++ b/js/wasm/svelte/DownloadLink.svelte
@@ -76,6 +76,8 @@
 	{/if}
 {:else}
 	<a
+		style:position="relative"
+		class="download-link"
 		{href}
 		target={typeof window !== "undefined" && window.__is_colab__
 			? "_blank"
@@ -88,3 +90,10 @@
 		<slot />
 	</a>
 {/if}
+
+<style>
+	.unstyled-link {
+		all: unset;
+		cursor: pointer;
+	}
+</style>
diff --git a/package.json b/package.json
index 4a3007231c815..3acbd7eeae0d9 100644
--- a/package.json
+++ b/package.json
@@ -3,10 +3,10 @@
 	"version": "0.0.1",
 	"description": "Gradio UI packages",
 	"scripts": {
-		"dev": "pnpm css && pnpm --filter @gradio/preview build && pnpm --filter @self/spa dev",
+		"dev": "pnpm css && pnpm --filter @gradio/preview build && pnpm --filter @self/app dev",
 		"dev:lite": "pnpm package && pnpm --filter @gradio/lite dev",
 		"css": "pnpm --filter @gradio/theme generate",
-		"build": "pnpm css && pnpm --filter @self/spa build --emptyOutDir && pnpm --filter @gradio/preview build",
+		"build": "pnpm css && pnpm --filter @self/app build --emptyOutDir && pnpm --filter @self/spa build --emptyOutDir && pnpm --filter @gradio/preview build",
 		"build:lite": "pnpm package && pnpm --filter @gradio/lite build",
 		"format:check": "prettier --ignore-path .config/.prettierignore --check --config .config/.prettierrc.json --plugin prettier-plugin-svelte .",
 		"format:write": "prettier --ignore-path .config/.prettierignore --write --config .config/.prettierrc.json --plugin prettier-plugin-svelte .",
@@ -55,8 +55,8 @@
 		"@typescript-eslint/eslint-plugin": "^7.8.0",
 		"@typescript-eslint/parser": "^7.8.0",
 		"autoprefixer": "^10.4.19",
-		"babylonjs": "^5.57.1",
-		"babylonjs-loaders": "^5.57.1",
+		"babylonjs": "^7.25.1",
+		"babylonjs-loaders": "^7.25.1",
 		"esbuild": "^0.21.0",
 		"eslint": "^9.1.1",
 		"eslint-plugin-svelte": "^2.38.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7c47a3c5c1e84..e2b029c6bd9fc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -80,11 +80,11 @@ importers:
         specifier: ^10.4.19
         version: 10.4.19(postcss@8.4.38)
       babylonjs:
-        specifier: ^5.57.1
-        version: 5.57.1
+        specifier: ^7.25.1
+        version: 7.25.2
       babylonjs-loaders:
-        specifier: ^5.57.1
-        version: 5.57.1
+        specifier: ^7.25.1
+        version: 7.25.2
       esbuild:
         specifier: ^0.21.0
         version: 0.21.0
@@ -459,6 +459,12 @@ importers:
       '@gradio/paramviewer':
         specifier: workspace:^
         version: link:../paramviewer
+      '@gradio/tabitem':
+        specifier: workspace:^
+        version: link:../tabitem
+      '@gradio/tabs':
+        specifier: workspace:^
+        version: link:../tabs
       '@sindresorhus/slugify':
         specifier: ^2.2.0
         version: 2.2.0
@@ -478,8 +484,8 @@ importers:
         specifier: ^0.5.0
         version: 0.5.0
       wrangler:
-        specifier: ^3.72.3
-        version: 3.72.3(bufferutil@4.0.7)
+        specifier: ^3.73.0
+        version: 3.73.0(bufferutil@4.0.7)
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^3.2.2
@@ -521,7 +527,7 @@ importers:
         specifier: workspace:^
         version: link:../statustracker
       '@gradio/utils':
-        specifier: workspace:0.6.1
+        specifier: workspace:0.7.0-beta.2
         version: link:../utils
       svelte:
         specifier: ^4.0.0
@@ -563,6 +569,28 @@ importers:
         version: link:../preview
 
   js/app:
+    dependencies:
+      '@gradio/client':
+        specifier: workspace:^
+        version: link:../../client/js
+      '@gradio/core':
+        specifier: workspace:^
+        version: link:../core
+      '@gradio/theme':
+        specifier: workspace:^
+        version: link:../theme
+      '@gradio/wasm':
+        specifier: workspace:^
+        version: link:../wasm
+      '@huggingface/space-header':
+        specifier: ^1.0.3
+        version: 1.0.3
+      '@self/build':
+        specifier: workspace:^
+        version: link:../build
+      '@sveltejs/adapter-node':
+        specifier: ^5.2.2
+        version: 5.2.2(@sveltejs/kit@2.5.20(@sveltejs/vite-plugin-svelte@3.1.0(svelte@4.2.15)(vite@5.2.11(@types/node@20.12.8)(lightningcss@1.24.1)(sass@1.66.1)(sugarss@4.0.1(postcss@8.4.38))))(svelte@4.2.15)(vite@5.2.11(@types/node@20.12.8)(lightningcss@1.24.1)(sass@1.66.1)(sugarss@4.0.1(postcss@8.4.38))))
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
@@ -639,6 +667,9 @@ importers:
       extendable-media-recorder-wav-encoder:
         specifier: ^7.0.76
         version: 7.0.76
+      hls.js:
+        specifier: ^1.5.13
+        version: 1.5.13
       resize-observer-polyfill:
         specifier: ^1.5.1
         version: 1.5.1
@@ -894,15 +925,24 @@ importers:
       '@gradio/atoms':
         specifier: workspace:^
         version: link:../atoms
+      '@gradio/icons':
+        specifier: workspace:^
+        version: link:../icons
       '@gradio/statustracker':
         specifier: workspace:^
         version: link:../statustracker
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      '@types/tinycolor2':
+        specifier: ^1.4.6
+        version: 1.4.6
       svelte:
         specifier: ^4.0.0
         version: 4.2.15
+      tinycolor2:
+        specifier: ^1.6.0
+        version: 1.6.0
     devDependencies:
       '@gradio/preview':
         specifier: workspace:^
@@ -1393,6 +1433,9 @@ importers:
       '@gradio/utils':
         specifier: workspace:^
         version: link:../utils
+      '@gradio/video':
+        specifier: workspace:^
+        version: link:../video
       dequal:
         specifier: ^2.0.2
         version: 2.0.2
@@ -1641,6 +1684,12 @@ importers:
       '@types/prismjs':
         specifier: 1.26.4
         version: 1.26.4
+      amuchina:
+        specifier: ^1.0.12
+        version: 1.0.12
+      dom-parser:
+        specifier: ^1.1.5
+        version: 1.1.5
       github-slugger:
         specifier: ^2.0.0
         version: 2.0.0
@@ -1662,6 +1711,9 @@ importers:
       prismjs:
         specifier: 1.29.0
         version: 1.29.0
+      sanitize-html:
+        specifier: ^2.13.0
+        version: 2.13.0
       svelte:
         specifier: ^4.0.0
         version: 4.2.15
@@ -1669,6 +1721,9 @@ importers:
       '@gradio/preview':
         specifier: workspace:^
         version: link:../preview
+      '@types/sanitize-html':
+        specifier: ^2.13.0
+        version: 2.13.0
 
   js/model3D:
     dependencies:
@@ -1697,11 +1752,11 @@ importers:
         specifier: ^6.16.6
         version: 6.16.6
       babylonjs:
-        specifier: ^4.2.1
-        version: 4.2.1
+        specifier: ^7.25.1
+        version: 7.25.2
       babylonjs-loaders:
-        specifier: ^4.2.1
-        version: 4.2.1
+        specifier: ^7.25.1
+        version: 7.25.2
       dequal:
         specifier: ^2.0.2
         version: 2.0.3
@@ -2321,6 +2376,9 @@ importers:
       '@gradio/wasm':
         specifier: workspace:^
         version: link:../wasm
+      hls.js:
+        specifier: ^1.5.13
+        version: 1.5.13
       mrmime:
         specifier: ^2.0.0
         version: 2.0.0
@@ -3111,8 +3169,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@cloudflare/workers-shared@0.4.0':
-    resolution: {integrity: sha512-XAFOldVQsbxQ7mjbqX2q1dNIgcLbKSytk41pwuZTn9e0p7OeTpFTosJef8uwosL6CcOAHqcW1f1HJxyjwmtGxw==}
+  '@cloudflare/workers-shared@0.4.1':
+    resolution: {integrity: sha512-nYh4r8JwOOjYIdH2zub++CmIKlkYFlpxI1nBHimoiHcytJXD/b7ldJ21TtfzUZMCgI78mxVlymMHA/ReaOxKlA==}
     engines: {node: '>=16.7.0'}
 
   '@codemirror/autocomplete@6.3.0':
@@ -4435,6 +4493,15 @@ packages:
       rollup:
         optional: true
 
+  '@rollup/plugin-commonjs@26.0.1':
+    resolution: {integrity: sha512-UnsKoZK6/aGIH6AdkptXhNvhaqftcjq3zZdT+LY5Ftms6JR06nADcDsYp5hTU9E2lbJUEOhdlY5J4DNTneM+jQ==}
+    engines: {node: '>=16.0.0 || 14 >= 14.17'}
+    peerDependencies:
+      rollup: ^2.68.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
   '@rollup/plugin-json@6.0.0':
     resolution: {integrity: sha512-i/4C5Jrdr1XUarRhVu27EEwjt4GObltD7c+MkCIpO2QIbojw8MUs+CCTqOphQi3Qtg1FLmYt+l+6YeoIf51J7w==}
     engines: {node: '>=14.0.0'}
@@ -4444,6 +4511,15 @@ packages:
       rollup:
         optional: true
 
+  '@rollup/plugin-json@6.1.0':
+    resolution: {integrity: sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
   '@rollup/plugin-node-resolve@15.1.0':
     resolution: {integrity: sha512-xeZHCgsiZ9pzYVgAo9580eCGqwh/XCEUM9q6iQfGNocjgkufHAqC3exA+45URvhiYV8sBF9RlBai650eNs7AsA==}
     engines: {node: '>=14.0.0'}
@@ -4453,6 +4529,15 @@ packages:
       rollup:
         optional: true
 
+  '@rollup/plugin-node-resolve@15.2.3':
+    resolution: {integrity: sha512-j/lym8nf5E21LwBT4Df1VD6hRO2L2iwUeUmP7litikRsVp1H6NWx20NEp0Y7su+7XGc476GnXXc4kFeZNGmaSQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.78.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
   '@rollup/plugin-sucrase@5.0.1':
     resolution: {integrity: sha512-3mYe28rR/sUTkV8v10yPCP55TQ/oJkvcxKZBj6NGx9ZfCn9BdBtBL1v1S0TQrcOV4WD3FTHJaI7TbbukALx9wA==}
     engines: {node: '>=14.0.0'}
@@ -4488,6 +4573,15 @@ packages:
       rollup:
         optional: true
 
+  '@rollup/pluginutils@5.1.0':
+    resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
   '@rollup/rollup-android-arm-eabi@4.14.3':
     resolution: {integrity: sha512-X9alQ3XM6I9IlSlmC8ddAvMSyG1WuHk5oUnXGw+yUBs3BFoTizmG1La/Gr8fVJvDWAq+zlYTZ9DBgrlKRVY06g==}
     cpu: [arm]
@@ -4876,6 +4970,11 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^2.0.0
 
+  '@sveltejs/adapter-node@5.2.2':
+    resolution: {integrity: sha512-BCX4zP0cf86TXpmvLQTnnT/tp7P12UMezf+5LwljP1MJC1fFzn9XOXpAHQCyP+pyHGy2K7p5gY0LyLcZFAL02w==}
+    peerDependencies:
+      '@sveltejs/kit': ^2.4.0
+
   '@sveltejs/adapter-static@3.0.2':
     resolution: {integrity: sha512-/EBFydZDwfwFfFEuF1vzUseBoRziwKP7AoHAwv+Ot3M084sE/HTVBHf9mCmXfdM9ijprY5YEugZjleflncX5fQ==}
     peerDependencies:
@@ -5138,6 +5237,9 @@ packages:
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
+  '@types/sanitize-html@2.13.0':
+    resolution: {integrity: sha512-X31WxbvW9TjIhZZNyNBZ/p5ax4ti7qsNDBDEnH4zAgmEh35YnFD1UiS6z9Cd34kKm0LslFW0KPmTQzu/oGtsqQ==}
+
   '@types/semver@7.5.8':
     resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
 
@@ -5357,6 +5459,9 @@ packages:
   ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
 
+  amuchina@1.0.12:
+    resolution: {integrity: sha512-Itv2NEwpiV53+bkpviJIC12+8SOlCSLR1HgQCv6wD7ldNFNesm4JSk7XjvTFkeVfLYzqKEZcEBZO1X/V2MYg4A==}
+
   ansi-colors@4.1.3:
     resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
     engines: {node: '>=6'}
@@ -5527,23 +5632,14 @@ packages:
     resolution: {integrity: sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==}
     engines: {node: '>= 10.0.0'}
 
-  babylonjs-gltf2interface@4.2.1:
-    resolution: {integrity: sha512-ZBfKgIoztO1x1nyf9aPQJ+WXmB6Kw0VlyxvcKchIixbICqeeExiN8nmjvypwXC4hl+5ZDMnUKQNrIhh7uzulnA==}
+  babylonjs-gltf2interface@7.25.2:
+    resolution: {integrity: sha512-Vzwp0FmgTdxXH1RsPW8jRReSTkhTcrpulE6uJk4Kd4UTsRi1lpER31LpeysEYrjFf5SS+vc5gx4li8/TAUAWNw==}
 
-  babylonjs-gltf2interface@5.57.1:
-    resolution: {integrity: sha512-RZnaKfJ6Q/AYLdIjBYMRxCW/HPEC8jabAL1U8wJ0KVziw6NSbSV6S80S22fUCPTyaZ7nCekn1TYg1IPmJ/eA6w==}
+  babylonjs-loaders@7.25.2:
+    resolution: {integrity: sha512-FMZ5G2x8QgGowLRMxVifVuMNFnY4aaQuUIwqxrgcrKigaHKx1uNuk1+A4+vCG7i43TJJnTr4++QJF7nn6JdU0g==}
 
-  babylonjs-loaders@4.2.1:
-    resolution: {integrity: sha512-WLpbadXDyxbBQogU0SOrpwgAWN/DJ1xn5kCRD31NVoCbBIpvkdDIvzpRvze2esxrlv/KM8wbDu62ShJd6rQnVQ==}
-
-  babylonjs-loaders@5.57.1:
-    resolution: {integrity: sha512-MGPv0rroDIky4aLHv8iitnZWUPvJfRB4dA0EbMbXJGatDzKclwwK1gJik3TjdmxwlpXpZKwa3reoj0OP00jl6A==}
-
-  babylonjs@4.2.1:
-    resolution: {integrity: sha512-FQdJ2VTENUpUJQ30ddihwTjV6K94kglET0P7jV8OQzjA4eez3sotmG22Fn9+8yb069SA26KnrAGOI2sKMQ7BCw==}
-
-  babylonjs@5.57.1:
-    resolution: {integrity: sha512-X1t3mi8GuJjFVziN1yBJtekphilGN9VfOHm2tn/H6gra+WS7UZkrOOHLlKwYEXKdU73opxOR95jHXmv692KR6g==}
+  babylonjs@7.25.2:
+    resolution: {integrity: sha512-hucoQfYHrBtgq7niZEHwSDcvcESDiJ74AYY42KSDA43bGI+lq8UkW2wgs6euOFrigR4RxSORHWm0nkNrXCn41Q==}
 
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@@ -6280,6 +6376,9 @@ packages:
   dom-accessibility-api@0.6.3:
     resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
 
+  dom-parser@1.1.5:
+    resolution: {integrity: sha512-lCiFG48ZUzGXjKN0qhSkxD/i3ndyV6I37zQ3W2VFYLjF1ob8A+QgSsM7Ps2UT0d3LpJxLMmMHiJJ34z5hkKLiA==}
+
   dom-serializer@1.4.1:
     resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
 
@@ -7023,6 +7122,10 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
 
+  glob@10.4.5:
+    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
+    hasBin: true
+
   glob@7.1.6:
     resolution: {integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==}
     deprecated: Glob versions prior to v9 are no longer supported
@@ -7173,6 +7276,9 @@ packages:
   headers-polyfill@4.0.3:
     resolution: {integrity: sha512-IScLbePpkvO846sIwOtOTDjutRMWdXdJmXdMvk6gCBHxFO8d+QKOQedyZSxFTTFYRSmlgSTDtXqqq4pcenBXLQ==}
 
+  hls.js@1.5.13:
+    resolution: {integrity: sha512-xRgKo84nsC7clEvSfIdgn/Tc0NOT+d7vdiL/wvkLO+0k0juc26NRBPPG1SfB8pd5bHXIjMW/F5VM8VYYkOYYdw==}
+
   hosted-git-info@2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
 
@@ -7183,6 +7289,9 @@ packages:
   htmlparser2-svelte@4.1.0:
     resolution: {integrity: sha512-+4f4RBFz7Rj2Hp0ZbFbXC+Kzbd6S9PgjiuFtdT76VMNgKogrEZy0pG2UrPycPbrZzVEIM5lAT3lAdkSTCHLPjg==}
 
+  htmlparser2@8.0.2:
+    resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
+
   http-errors@2.0.0:
     resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
     engines: {node: '>= 0.8'}
@@ -7400,6 +7509,10 @@ packages:
     resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==}
     engines: {node: '>=0.10.0'}
 
+  is-plain-object@5.0.0:
+    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
+    engines: {node: '>=0.10.0'}
+
   is-potential-custom-element-name@1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
 
@@ -7499,6 +7612,9 @@ packages:
     resolution: {integrity: sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==}
     engines: {node: '>=14'}
 
+  jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+
   jake@10.8.7:
     resolution: {integrity: sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==}
     engines: {node: '>=10'}
@@ -8044,6 +8160,10 @@ packages:
     resolution: {integrity: sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
   minizlib@2.1.2:
     resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
     engines: {node: '>= 8'}
@@ -8324,6 +8444,9 @@ packages:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
 
+  package-json-from-dist@1.0.0:
+    resolution: {integrity: sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==}
+
   pako@0.2.9:
     resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==}
 
@@ -8335,6 +8458,9 @@ packages:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
 
+  parse-srcset@1.0.2:
+    resolution: {integrity: sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==}
+
   parse5@7.1.2:
     resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
 
@@ -8375,6 +8501,10 @@ packages:
     resolution: {integrity: sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
+
   path-to-regexp@0.1.7:
     resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==}
 
@@ -9018,6 +9148,9 @@ packages:
   sander@0.5.1:
     resolution: {integrity: sha512-3lVqBir7WuKDHGrKRDn/1Ye3kwpXaDOMsiRP1wd6wpZW56gJhsbp5RqQpA6JG/P+pkXizygnr1dKR8vzWaVsfA==}
 
+  sanitize-html@2.13.0:
+    resolution: {integrity: sha512-Xff91Z+4Mz5QiNSLdLWwjgBDm5b1RU6xBT0+12rapjiaR7SwfRdjw8f+6Rir2MXKLrDicRFHdb51hGOAxmsUIA==}
+
   sass@1.66.1:
     resolution: {integrity: sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA==}
     engines: {node: '>=14.0.0'}
@@ -9721,8 +9854,8 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
-  ufo@1.5.3:
-    resolution: {integrity: sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==}
+  ufo@1.5.4:
+    resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
 
   uglify-js@3.17.4:
     resolution: {integrity: sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==}
@@ -9739,8 +9872,8 @@ packages:
     resolution: {integrity: sha512-72RFADWFqKmUb2hmmvNODKL3p9hcB6Gt2DOQMis1SEBaV6a4MH8soBvzg+95CYhCKPFedut2JY9bMfrDl9D23g==}
     engines: {node: '>=14.0'}
 
-  unenv-nightly@1.10.0-1717606461.a117952:
-    resolution: {integrity: sha512-u3TfBX02WzbHTpaEfWEKwDijDSFAHcgXkayUZ+MVDrjhLFvgAJzFGTSTmwlEhwWi2exyRQey23ah9wELMM6etg==}
+  unenv-nightly@2.0.0-1724863496.70db6f1:
+    resolution: {integrity: sha512-r+VIl1gnsI4WQxluruSQhy8alpAf1AsLRLm4sEKp3otCyTIVD6I6wHEYzeQnwsyWgaD4+3BD4A/eqrgOpdTzhw==}
 
   unicode-canonical-property-names-ecmascript@2.0.0:
     resolution: {integrity: sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==}
@@ -10201,8 +10334,8 @@ packages:
     engines: {node: '>=16'}
     hasBin: true
 
-  wrangler@3.72.3:
-    resolution: {integrity: sha512-EBlJGOcwanbzFkiJkRB47WKhvevh1AZK0ty0MyD0gptsgWnAxBfmFGiBuzOuRXbvH45ZrFrTqgi8c67EwcV1nA==}
+  wrangler@3.73.0:
+    resolution: {integrity: sha512-VrdDR2OpvsCQp+r5Of3rDP1W64cNN/LHLVx1roULOlPS8PZiv7rUYgkwhdCQ61+HICAaeSxWYIzkL5+B9+8W3g==}
     engines: {node: '>=16.17.0'}
     hasBin: true
     peerDependencies:
@@ -11335,7 +11468,7 @@ snapshots:
   '@cloudflare/workerd-windows-64@1.20240821.1':
     optional: true
 
-  '@cloudflare/workers-shared@0.4.0': {}
+  '@cloudflare/workers-shared@0.4.1': {}
 
   '@codemirror/autocomplete@6.3.0(@codemirror/language@6.6.0)(@codemirror/state@6.1.2)(@codemirror/view@6.4.1)(@lezer/common@1.0.2)':
     dependencies:
@@ -12522,12 +12655,29 @@ snapshots:
     optionalDependencies:
       rollup: 3.28.0
 
+  '@rollup/plugin-commonjs@26.0.1(rollup@4.17.2)':
+    dependencies:
+      '@rollup/pluginutils': 5.0.5(rollup@4.17.2)
+      commondir: 1.0.1
+      estree-walker: 2.0.2
+      glob: 10.4.5
+      is-reference: 1.2.1
+      magic-string: 0.30.10
+    optionalDependencies:
+      rollup: 4.17.2
+
   '@rollup/plugin-json@6.0.0(rollup@3.28.0)':
     dependencies:
       '@rollup/pluginutils': 5.0.5(rollup@3.28.0)
     optionalDependencies:
       rollup: 3.28.0
 
+  '@rollup/plugin-json@6.1.0(rollup@4.17.2)':
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@4.17.2)
+    optionalDependencies:
+      rollup: 4.17.2
+
   '@rollup/plugin-node-resolve@15.1.0(rollup@3.28.0)':
     dependencies:
       '@rollup/pluginutils': 5.0.5(rollup@3.28.0)
@@ -12539,6 +12689,17 @@ snapshots:
     optionalDependencies:
       rollup: 3.28.0
 
+  '@rollup/plugin-node-resolve@15.2.3(rollup@4.17.2)':
+    dependencies:
+      '@rollup/pluginutils': 5.0.5(rollup@4.17.2)
+      '@types/resolve': 1.20.2
+      deepmerge: 4.3.1
+      is-builtin-module: 3.2.1
+      is-module: 1.0.0
+      resolve: 1.22.8
+    optionalDependencies:
+      rollup: 4.17.2
+
   '@rollup/plugin-sucrase@5.0.1(rollup@3.28.0)':
     dependencies:
       '@rollup/pluginutils': 5.0.5(rollup@3.28.0)
@@ -12568,6 +12729,22 @@ snapshots:
     optionalDependencies:
       rollup: 3.28.0
 
+  '@rollup/pluginutils@5.0.5(rollup@4.17.2)':
+    dependencies:
+      '@types/estree': 1.0.5
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+    optionalDependencies:
+      rollup: 4.17.2
+
+  '@rollup/pluginutils@5.1.0(rollup@4.17.2)':
+    dependencies:
+      '@types/estree': 1.0.5
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+    optionalDependencies:
+      rollup: 4.17.2
+
   '@rollup/rollup-android-arm-eabi@4.14.3':
     optional: true
 
@@ -13321,6 +13498,14 @@ snapshots:
       '@sveltejs/kit': 2.5.20(@sveltejs/vite-plugin-svelte@3.1.0(svelte@4.2.15)(vite@5.2.11(@types/node@20.12.8)(lightningcss@1.24.1)(sass@1.66.1)(sugarss@4.0.1(postcss@8.4.38))))(svelte@4.2.15)(vite@5.2.11(@types/node@20.12.8)(lightningcss@1.24.1)(sass@1.66.1)(sugarss@4.0.1(postcss@8.4.38)))
       import-meta-resolve: 4.1.0
 
+  '@sveltejs/adapter-node@5.2.2(@sveltejs/kit@2.5.20(@sveltejs/vite-plugin-svelte@3.1.0(svelte@4.2.15)(vite@5.2.11(@types/node@20.12.8)(lightningcss@1.24.1)(sass@1.66.1)(sugarss@4.0.1(postcss@8.4.38))))(svelte@4.2.15)(vite@5.2.11(@types/node@20.12.8)(lightningcss@1.24.1)(sass@1.66.1)(sugarss@4.0.1(postcss@8.4.38))))':
+    dependencies:
+      '@rollup/plugin-commonjs': 26.0.1(rollup@4.17.2)
+      '@rollup/plugin-json': 6.1.0(rollup@4.17.2)
+      '@rollup/plugin-node-resolve': 15.2.3(rollup@4.17.2)
+      '@sveltejs/kit': 2.5.20(@sveltejs/vite-plugin-svelte@3.1.0(svelte@4.2.15)(vite@5.2.11(@types/node@20.12.8)(lightningcss@1.24.1)(sass@1.66.1)(sugarss@4.0.1(postcss@8.4.38))))(svelte@4.2.15)(vite@5.2.11(@types/node@20.12.8)(lightningcss@1.24.1)(sass@1.66.1)(sugarss@4.0.1(postcss@8.4.38)))
+      rollup: 4.17.2
+
   '@sveltejs/adapter-static@3.0.2(@sveltejs/kit@2.5.20(@sveltejs/vite-plugin-svelte@3.1.0(svelte@4.2.15)(vite@5.2.11(@types/node@20.12.8)(lightningcss@1.24.1)(sass@1.66.1)(stylus@0.63.0)(sugarss@4.0.1(postcss@8.4.38))))(svelte@4.2.15)(vite@5.2.11(@types/node@20.12.8)(lightningcss@1.24.1)(sass@1.66.1)(stylus@0.63.0)(sugarss@4.0.1(postcss@8.4.38))))':
     dependencies:
       '@sveltejs/kit': 2.5.20(@sveltejs/vite-plugin-svelte@3.1.0(svelte@4.2.15)(vite@5.2.11(@types/node@20.12.8)(lightningcss@1.24.1)(sass@1.66.1)(stylus@0.63.0)(sugarss@4.0.1(postcss@8.4.38))))(svelte@4.2.15)(vite@5.2.11(@types/node@20.12.8)(lightningcss@1.24.1)(sass@1.66.1)(stylus@0.63.0)(sugarss@4.0.1(postcss@8.4.38)))
@@ -13670,6 +13855,10 @@ snapshots:
 
   '@types/resolve@1.20.2': {}
 
+  '@types/sanitize-html@2.13.0':
+    dependencies:
+      htmlparser2: 8.0.2
+
   '@types/semver@7.5.8': {}
 
   '@types/send@0.17.4':
@@ -13946,6 +14135,8 @@ snapshots:
       json-schema-traverse: 0.4.1
       uri-js: 4.4.1
 
+  amuchina@1.0.12: {}
+
   ansi-colors@4.1.3: {}
 
   ansi-escapes@4.3.2:
@@ -14120,23 +14311,14 @@ snapshots:
     dependencies:
       '@babel/types': 7.23.3
 
-  babylonjs-gltf2interface@4.2.1: {}
-
-  babylonjs-gltf2interface@5.57.1: {}
-
-  babylonjs-loaders@4.2.1:
-    dependencies:
-      babylonjs: 4.2.1
-      babylonjs-gltf2interface: 4.2.1
+  babylonjs-gltf2interface@7.25.2: {}
 
-  babylonjs-loaders@5.57.1:
+  babylonjs-loaders@7.25.2:
     dependencies:
-      babylonjs: 5.57.1
-      babylonjs-gltf2interface: 5.57.1
-
-  babylonjs@4.2.1: {}
+      babylonjs: 7.25.2
+      babylonjs-gltf2interface: 7.25.2
 
-  babylonjs@5.57.1: {}
+  babylonjs@7.25.2: {}
 
   balanced-match@1.0.2: {}
 
@@ -14866,6 +15048,8 @@ snapshots:
 
   dom-accessibility-api@0.6.3: {}
 
+  dom-parser@1.1.5: {}
+
   dom-serializer@1.4.1:
     dependencies:
       domelementtype: 2.3.0
@@ -15886,6 +16070,15 @@ snapshots:
       minipass: 7.0.4
       path-scurry: 1.10.2
 
+  glob@10.4.5:
+    dependencies:
+      foreground-child: 3.1.1
+      jackspeak: 3.4.3
+      minimatch: 9.0.4
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.0
+      path-scurry: 1.11.1
+
   glob@7.1.6:
     dependencies:
       fs.realpath: 1.0.0
@@ -16045,6 +16238,8 @@ snapshots:
 
   headers-polyfill@4.0.3: {}
 
+  hls.js@1.5.13: {}
+
   hosted-git-info@2.8.9: {}
 
   html-encoding-sniffer@4.0.0:
@@ -16058,6 +16253,13 @@ snapshots:
       domutils: 2.8.0
       entities: 2.2.0
 
+  htmlparser2@8.0.2:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.1.0
+      entities: 4.5.0
+
   http-errors@2.0.0:
     dependencies:
       depd: 2.0.0
@@ -16261,6 +16463,8 @@ snapshots:
     dependencies:
       isobject: 3.0.1
 
+  is-plain-object@5.0.0: {}
+
   is-potential-custom-element-name@1.0.1: {}
 
   is-promise@2.2.2: {}
@@ -16352,6 +16556,12 @@ snapshots:
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
+  jackspeak@3.4.3:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+
   jake@10.8.7:
     dependencies:
       async: 3.2.5
@@ -16921,6 +17131,8 @@ snapshots:
 
   minipass@7.0.4: {}
 
+  minipass@7.1.2: {}
+
   minizlib@2.1.2:
     dependencies:
       minipass: 3.3.6
@@ -16941,7 +17153,7 @@ snapshots:
       acorn: 8.11.3
       pathe: 1.1.2
       pkg-types: 1.1.0
-      ufo: 1.5.3
+      ufo: 1.5.4
 
   mri@1.2.0: {}
 
@@ -17104,7 +17316,7 @@ snapshots:
       consola: 3.2.3
       execa: 8.0.1
       pathe: 1.1.2
-      ufo: 1.5.3
+      ufo: 1.5.4
 
   object-assign@4.1.1: {}
 
@@ -17211,6 +17423,8 @@ snapshots:
 
   p-try@2.2.0: {}
 
+  package-json-from-dist@1.0.0: {}
+
   pako@0.2.9: {}
 
   parent-module@1.0.1:
@@ -17224,6 +17438,8 @@ snapshots:
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
 
+  parse-srcset@1.0.2: {}
+
   parse5@7.1.2:
     dependencies:
       entities: 4.5.0
@@ -17254,6 +17470,11 @@ snapshots:
       lru-cache: 10.2.2
       minipass: 7.0.4
 
+  path-scurry@1.11.1:
+    dependencies:
+      lru-cache: 10.2.2
+      minipass: 7.1.2
+
   path-to-regexp@0.1.7: {}
 
   path-to-regexp@6.2.1: {}
@@ -17994,6 +18215,15 @@ snapshots:
       mkdirp: 0.5.6
       rimraf: 2.7.1
 
+  sanitize-html@2.13.0:
+    dependencies:
+      deepmerge: 4.3.1
+      escape-string-regexp: 4.0.0
+      htmlparser2: 8.0.2
+      is-plain-object: 5.0.0
+      parse-srcset: 1.0.2
+      postcss: 8.4.38
+
   sass@1.66.1:
     dependencies:
       chokidar: 3.5.3
@@ -18785,7 +19015,7 @@ snapshots:
 
   typescript@5.5.4: {}
 
-  ufo@1.5.3: {}
+  ufo@1.5.4: {}
 
   uglify-js@3.17.4:
     optional: true
@@ -18803,14 +19033,12 @@ snapshots:
     dependencies:
       '@fastify/busboy': 2.1.1
 
-  unenv-nightly@1.10.0-1717606461.a117952:
+  unenv-nightly@2.0.0-1724863496.70db6f1:
     dependencies:
-      consola: 3.2.3
       defu: 6.1.4
-      mime: 3.0.0
-      node-fetch-native: 1.6.4
+      ohash: 1.1.3
       pathe: 1.1.2
-      ufo: 1.5.3
+      ufo: 1.5.4
 
   unicode-canonical-property-names-ecmascript@2.0.0: {}
 
@@ -19469,10 +19697,10 @@ snapshots:
       '@cloudflare/workerd-linux-arm64': 1.20240821.1
       '@cloudflare/workerd-windows-64': 1.20240821.1
 
-  wrangler@3.72.3(bufferutil@4.0.7):
+  wrangler@3.73.0(bufferutil@4.0.7):
     dependencies:
       '@cloudflare/kv-asset-handler': 0.3.4
-      '@cloudflare/workers-shared': 0.4.0
+      '@cloudflare/workers-shared': 0.4.1
       '@esbuild-plugins/node-globals-polyfill': 0.2.3(esbuild@0.17.19)
       '@esbuild-plugins/node-modules-polyfill': 0.2.2(esbuild@0.17.19)
       blake3-wasm: 2.1.5
@@ -19486,7 +19714,7 @@ snapshots:
       resolve.exports: 2.0.2
       selfsigned: 2.4.1
       source-map: 0.6.1
-      unenv: unenv-nightly@1.10.0-1717606461.a117952
+      unenv: unenv-nightly@2.0.0-1724863496.70db6f1
       workerd: 1.20240821.1
       xxhash-wasm: 1.0.2
     optionalDependencies:
diff --git a/pyproject.toml b/pyproject.toml
index bcd2989597290..1aade61c27cd2 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -11,7 +11,7 @@ name = "gradio"
 dynamic = ["version", "dependencies", "optional-dependencies", "readme"]
 description = "Python library for easily interacting with trained machine learning models"
 license = "Apache-2.0"
-requires-python = ">=3.8"
+requires-python = ">=3.10"
 authors = [
   { name = "Abubakar Abid", email = "gradio-team@huggingface.co" },
   { name = "Ali Abid", email = "gradio-team@huggingface.co" },
@@ -138,6 +138,7 @@ ignore = [
   "B017",    # pytest.raises considered evil
   "B023",    # function definition in loop (TODO: un-ignore this)
   "B028",    # explicit stacklevel for warnings
+  "B905",    # zip without explicit `strict` argument
   "C901",    # function is too complex (TODO: un-ignore this)
   "E501",    # from scripts/lint_backend.sh
   "PLR091",  # complexity rules
@@ -147,6 +148,7 @@ ignore = [
   "SIM117",  # multiple nested with blocks (doesn't look good with gr.Row etc)
   "UP006",   # use `list` instead of `List` for type annotations (fails for 3.8)
   "UP007",   # use X | Y for type annotations (TODO: can be enabled once Pydantic plays nice with them)
+  "UP038",   # uses of isinstance and issubclass that take a tuple of types for comparison.
 ]
 
 [tool.ruff.lint.per-file-ignores]
diff --git a/readme_files/zh-cn/README.md b/readme_files/zh-cn/README.md
index 18708efd8eb35..d24dad211c68f 100644
--- a/readme_files/zh-cn/README.md
+++ b/readme_files/zh-cn/README.md
@@ -9,7 +9,7 @@
 [![gradio-js](https://github.com/gradio-app/gradio/actions/workflows/ui.yml/badge.svg)](https://github.com/gradio-app/gradio/actions/workflows/ui.yml)  
  [![PyPI](https://img.shields.io/pypi/v/gradio)](https://pypi.org/project/gradio/)
 [![PyPI downloads](https://img.shields.io/pypi/dm/gradio)](https://pypi.org/project/gradio/)
-![Python version](https://img.shields.io/badge/python-3.8+-important)
+![Python version](https://img.shields.io/badge/python-3.10+-important)
 [![Twitter follow](https://img.shields.io/twitter/follow/gradio?style=social&label=follow)](https://twitter.com/gradio)
 
 [官网](https://gradio.app)
diff --git a/readme_template.md b/readme_template.md
index 22fc2dccce302..aa1f31bcf8409 100644
--- a/readme_template.md
+++ b/readme_template.md
@@ -6,7 +6,7 @@
 [![gradio-ui](https://github.com/gradio-app/gradio/actions/workflows/ui.yml/badge.svg)](https://github.com/gradio-app/gradio/actions/workflows/ui.yml)  
  [![PyPI](https://img.shields.io/pypi/v/gradio)](https://pypi.org/project/gradio/)
 [![PyPI downloads](https://img.shields.io/pypi/dm/gradio)](https://pypi.org/project/gradio/)
-![Python version](https://img.shields.io/badge/python-3.8+-important)
+![Python version](https://img.shields.io/badge/python-3.10+-important)
 [![Twitter follow](https://img.shields.io/twitter/follow/gradio?style=social&label=follow)](https://twitter.com/gradio)
 
 [Website](https://gradio.app)
diff --git a/requirements.txt b/requirements.txt
index 7fde93406c1b7..09e0cba6c77b2 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -2,13 +2,11 @@ aiofiles>=22.0,<24.0
 anyio>=3.0,<5.0
 fastapi<1.0
 ffmpy
-gradio_client==1.3.0
+gradio_client==1.4.0-beta.5
 httpx>=0.24.1
-huggingface_hub>=0.19.3
-importlib_resources>=1.3,<7.0
+huggingface_hub>=0.25.1
 Jinja2<4.0
 markupsafe~=2.0
-matplotlib~=3.0
 numpy>=1.0,<3.0
 orjson~=3.0
 packaging
@@ -20,7 +18,7 @@ pydub
 pyyaml>=5.0,<7.0
 semantic_version~=2.0
 typing_extensions~=4.0
-urllib3~=2.0  # urllib3 is used for Lite support. Version spec can be omitted because urllib3==2.1.0 is prebuilt for Pyodide and urllib>=2.2.0 supports Pyodide as well.
+urllib3~=2.0; sys.platform == 'emscripten'  # urllib3 is used for Lite support. Version spec can be omitted because urllib3==2.1.0 is prebuilt for Pyodide and urllib>=2.2.0 supports Pyodide as well.
 uvicorn>=0.14.0; sys.platform != 'emscripten'
 typer>=0.12,<1.0; sys.platform != 'emscripten'
 tomlkit==0.12.0
diff --git a/scripts/copy_demos.py b/scripts/copy_demos.py
index c57f5f787b449..3a38fa8490305 100644
--- a/scripts/copy_demos.py
+++ b/scripts/copy_demos.py
@@ -38,6 +38,7 @@ def copy_all_demos(source_dir: str, dest_dir: str):
         "reverse_audio",
         "stt_or_tts",
         "stream_audio",
+        "stream_audio_out",
         "stream_frames",
         "video_component",
         "zip_files",
@@ -67,8 +68,9 @@ def copy_all_demos(source_dir: str, dest_dir: str):
         pathlib.Path(__file__).parent, "..", "demo", "all_demos", "requirements.txt"
     )
     requirements = f"""
-    {args.gradio_client_version}
-    {args.gradio_version}
+    gradio_client=={args.gradio_client_version}
+    gradio=={args.gradio_version}
+    matplotlib
     pypistats==1.1.0
     plotly
     altair
diff --git a/test/components/test_audio.py b/test/components/test_audio.py
index d94faa0b1f218..e4dd7d6f519bf 100644
--- a/test/components/test_audio.py
+++ b/test/components/test_audio.py
@@ -7,7 +7,6 @@
 import pytest
 from gradio_client import media_data
 from gradio_client import utils as client_utils
-from scipy.io import wavfile
 
 import gradio as gr
 from gradio import processing_utils, utils
@@ -56,7 +55,8 @@ async def test_component_functions(self, gradio_temp_dir):
             "interactive": None,
             "proxy_url": None,
             "type": "numpy",
-            "format": "wav",
+            "format": None,
+            "recording": False,
             "streamable": False,
             "max_length": None,
             "min_length": None,
@@ -106,6 +106,7 @@ async def test_component_functions(self, gradio_temp_dir):
             "container": True,
             "editable": True,
             "min_width": 160,
+            "recording": False,
             "scale": None,
             "elem_id": None,
             "elem_classes": [],
@@ -114,7 +115,7 @@ async def test_component_functions(self, gradio_temp_dir):
             "interactive": None,
             "proxy_url": None,
             "type": "filepath",
-            "format": "wav",
+            "format": None,
             "streamable": False,
             "sources": ["upload", "microphone"],
             "waveform_options": {
@@ -167,16 +168,6 @@ def generate_noise(duration):
         iface = gr.Interface(generate_noise, "slider", "audio")
         assert iface(100).endswith(".wav")
 
-    def test_audio_preprocess_can_be_read_by_scipy(self, gradio_temp_dir):
-        x_wav = FileData(
-            path=processing_utils.save_base64_to_cache(
-                media_data.BASE64_MICROPHONE["data"], cache_dir=gradio_temp_dir
-            )
-        )
-        audio_input = gr.Audio(type="filepath")
-        output = audio_input.preprocess(x_wav)
-        wavfile.read(output)
-
     def test_prepost_process_to_mp3(self, gradio_temp_dir):
         x_wav = FileData(
             path=processing_utils.save_base64_to_cache(
@@ -191,3 +182,21 @@ def test_prepost_process_to_mp3(self, gradio_temp_dir):
             (48000, np.random.randint(-256, 256, (5, 3)).astype(np.int16))
         ).model_dump()  # type: ignore
         assert output["path"].endswith("mp3")
+
+    @pytest.mark.asyncio
+    async def test_combine_stream_audio(self, gradio_temp_dir):
+        x_wav = FileData(
+            path=processing_utils.save_base64_to_cache(
+                media_data.BASE64_MICROPHONE["data"], cache_dir=gradio_temp_dir
+            )
+        )
+        bytes_output = [Path(x_wav.path).read_bytes()] * 2
+        output = await gr.Audio().combine_stream(
+            bytes_output, desired_output_format="wav"
+        )
+        assert str(output.path).endswith("wav")
+
+        output = await gr.Audio().combine_stream(
+            bytes_output, desired_output_format=None
+        )
+        assert str(output.path).endswith("mp3")
diff --git a/test/components/test_chatbot.py b/test/components/test_chatbot.py
index aee9241b672ca..a7aa3f298c3ea 100644
--- a/test/components/test_chatbot.py
+++ b/test/components/test_chatbot.py
@@ -43,9 +43,14 @@ def test_component_functions(self):
             "min_width": 160,
             "scale": None,
             "placeholder": None,
-            "height": None,
+            "height": 400,
+            "max_height": None,
+            "min_height": None,
+            "autoscroll": True,
             "proxy_url": None,
             "_selectable": False,
+            "_retryable": False,
+            "_undoable": False,
             "key": None,
             "type": "tuples",
             "latex_delimiters": [{"display": True, "left": "$$", "right": "$$"}],
@@ -59,6 +64,8 @@ def test_component_functions(self):
             "line_breaks": True,
             "layout": None,
             "show_copy_all_button": False,
+            "example_selectable": False,
+            "examples": None,
         }
 
     def test_avatar_images_are_moved_to_cache(self):
diff --git a/test/components/test_checkbox_group.py b/test/components/test_checkbox_group.py
index cf29c0132395a..bfb96647d525d 100644
--- a/test/components/test_checkbox_group.py
+++ b/test/components/test_checkbox_group.py
@@ -11,11 +11,14 @@ def test_component_functions(self):
         checkboxes_input = gr.CheckboxGroup(["a", "b", "c"])
         assert checkboxes_input.preprocess(["a", "c"]) == ["a", "c"]
         assert checkboxes_input.postprocess(["a", "c"]) == ["a", "c"]
+        with pytest.raises(gr.Error):
+            checkboxes_input.preprocess(["d"])
 
         checkboxes_input = gr.CheckboxGroup(["a", "b"], type="index")
         assert checkboxes_input.preprocess(["a"]) == [0]
         assert checkboxes_input.preprocess(["a", "b"]) == [0, 1]
-        assert checkboxes_input.preprocess(["a", "b", "c"]) == [0, 1, None]
+        with pytest.raises(gr.Error):
+            checkboxes_input.preprocess(["a", "b", "c"])
 
         # When a Gradio app is loaded with gr.load, the tuples are converted to lists,
         # so we need to test that case as well
diff --git a/test/components/test_code.py b/test/components/test_code.py
index 6a379b8f30851..1d4169c73c1fb 100644
--- a/test/components/test_code.py
+++ b/test/components/test_code.py
@@ -26,14 +26,13 @@ def fn(a):
 
         test_file_dir = Path(__file__).parent.parent / "test_files"
         path = str(test_file_dir / "test_label_json.json")
-        with open(path) as f:
-            assert code.postprocess(path) == path
-            assert code.postprocess((path,)) == f.read()
+        assert code.postprocess(path) == path
 
         assert code.get_config() == {
             "value": None,
             "language": None,
             "lines": 5,
+            "max_lines": None,
             "name": "code",
             "show_label": True,
             "label": None,
@@ -46,6 +45,7 @@ def fn(a):
             "interactive": None,
             "proxy_url": None,
             "_selectable": False,
+            "wrap_lines": False,
             "key": None,
         }
 
@@ -56,4 +56,4 @@ def test_process_example(self):
         )
         assert code.process_example(None) is None
         filename = str(Path("test/test_files/test_label_json.json"))
-        assert code.process_example((filename,)) == "test_label_json.json"
+        assert code.process_example(filename) == filename
diff --git a/test/components/test_dataframe.py b/test/components/test_dataframe.py
index bee2eea8e1867..5f87aeb909a8c 100644
--- a/test/components/test_dataframe.py
+++ b/test/components/test_dataframe.py
@@ -50,7 +50,7 @@ def test_component_functions(self):
             "wrap": False,
             "proxy_url": None,
             "name": "dataframe",
-            "height": 500,
+            "max_height": 500,
             "latex_delimiters": [{"display": True, "left": "$$", "right": "$$"}],
             "line_breaks": True,
             "column_widths": [],
@@ -94,7 +94,7 @@ def test_component_functions(self):
             "wrap": False,
             "proxy_url": None,
             "name": "dataframe",
-            "height": 500,
+            "max_height": 500,
             "latex_delimiters": [{"display": True, "left": "$$", "right": "$$"}],
             "line_breaks": True,
             "column_widths": [],
diff --git a/test/components/test_download_button.py b/test/components/test_download_button.py
new file mode 100644
index 0000000000000..e98588d4a437f
--- /dev/null
+++ b/test/components/test_download_button.py
@@ -0,0 +1,6 @@
+import gradio as gr
+
+
+def test_download_button_sets_origname():
+    value = gr.DownloadButton().postprocess("/home/image.png")
+    assert value.orig_name == "image.png"  # type: ignore
diff --git a/test/components/test_dropdown.py b/test/components/test_dropdown.py
index aaca9b18aaba7..2560cbfe56076 100644
--- a/test/components/test_dropdown.py
+++ b/test/components/test_dropdown.py
@@ -14,20 +14,29 @@ def test_component_functions(self):
         assert dropdown_input.preprocess("c full") == "c full"
         assert dropdown_input.postprocess("c full") == ["c full"]
 
-        # When a Gradio app is loaded with gr.load, the tuples are converted to lists,
-        # so we need to test that case as well
-        dropdown_input = gr.Dropdown(["a", "b", ["c", "c full"]])  # type: ignore
-        assert dropdown_input.choices == [("a", "a"), ("b", "b"), ("c", "c full")]
+        # When an external Gradio app is loaded with gr.load, the tuples are converted to lists,
+        # so we test that case as well
+        dropdown = gr.Dropdown(["a", "b", ["c", "c full"]])  # type: ignore
+        assert dropdown.choices == [("a", "a"), ("b", "b"), ("c", "c full")]
 
         dropdown = gr.Dropdown(choices=["a", "b"], type="index")
         assert dropdown.preprocess("a") == 0
         assert dropdown.preprocess("b") == 1
-        assert dropdown.preprocess("c") is None
+        with pytest.raises(gr.Error):
+            dropdown.preprocess("c")
 
         dropdown = gr.Dropdown(choices=["a", "b"], type="index", multiselect=True)
         assert dropdown.preprocess(["a"]) == [0]
         assert dropdown.preprocess(["a", "b"]) == [0, 1]
-        assert dropdown.preprocess(["a", "b", "c"]) == [0, 1, None]
+        with pytest.raises(gr.Error):
+            dropdown.preprocess(["a", "b", "c"])
+
+        dropdown = gr.Dropdown(["a", "b"], allow_custom_value=True)
+        assert dropdown.preprocess("a") == "a"
+        assert dropdown.preprocess("c") == "c"
+        dropdown = gr.Dropdown(["a", "b"], allow_custom_value=True, type="index")
+        assert dropdown.preprocess("a") == 0
+        assert dropdown.preprocess("c") is None
 
         dropdown_input_multiselect = gr.Dropdown(["a", "b", ("c", "c full")])
         assert dropdown_input_multiselect.preprocess(["a", "c full"]) == ["a", "c full"]
diff --git a/test/components/test_gallery.py b/test/components/test_gallery.py
index 157f25afc1972..9b9ca67022461 100644
--- a/test/components/test_gallery.py
+++ b/test/components/test_gallery.py
@@ -4,6 +4,7 @@
 import PIL
 
 import gradio as gr
+from gradio.components.gallery import GalleryImage
 from gradio.data_classes import FileData
 
 
@@ -16,7 +17,7 @@ def test_postprocess(self):
                 "image": {
                     "path": url,
                     "orig_name": "00015-20230906102032-7778-Wonderwoman VintageMagStyle   _lora_SDXL-VintageMagStyle-Lora_1_, Very detailed, clean, high quality, sharp image.jpg",
-                    "mime_type": None,
+                    "mime_type": "image/jpeg",
                     "size": None,
                     "url": url,
                     "is_stream": False,
@@ -45,7 +46,7 @@ def test_gallery(self):
                 "image": {
                     "path": str(Path("test") / "test_files" / "foo.png"),
                     "orig_name": "foo.png",
-                    "mime_type": None,
+                    "mime_type": "image/png",
                     "size": None,
                     "url": None,
                     "is_stream": False,
@@ -57,7 +58,7 @@ def test_gallery(self):
                 "image": {
                     "path": str(Path("test") / "test_files" / "bar.png"),
                     "orig_name": "bar.png",
-                    "mime_type": None,
+                    "mime_type": "image/png",
                     "size": None,
                     "url": None,
                     "is_stream": False,
@@ -69,7 +70,7 @@ def test_gallery(self):
                 "image": {
                     "path": str(Path("test") / "test_files" / "baz.png"),
                     "orig_name": "baz.png",
-                    "mime_type": None,
+                    "mime_type": "image/png",
                     "size": None,
                     "url": None,
                     "is_stream": False,
@@ -81,7 +82,7 @@ def test_gallery(self):
                 "image": {
                     "path": str(Path("test") / "test_files" / "qux.png"),
                     "orig_name": "qux.png",
-                    "mime_type": None,
+                    "mime_type": "image/png",
                     "size": None,
                     "url": None,
                     "is_stream": False,
@@ -125,4 +126,5 @@ def test_gallery_format(self):
         output = gallery.postprocess(
             [np.random.randint(0, 255, (100, 100, 3), dtype=np.uint8)]
         )
-        assert output.root[0].image.path.endswith(".jpeg")
+        if type(output.root[0]) == GalleryImage:
+            assert output.root[0].image.path.endswith(".jpeg")
diff --git a/test/components/test_highlighted_text.py b/test/components/test_highlighted_text.py
index 8c49b101e0d84..e94343ba5db36 100644
--- a/test/components/test_highlighted_text.py
+++ b/test/components/test_highlighted_text.py
@@ -82,7 +82,7 @@ def test_postprocess(self):
         entities = []
         assert (result_ := component.postprocess({"text": text, "entities": entities}))
         result_ = result_.model_dump()
-        assert [{"token": text, "class_or_confidence": None}] == result_
+        assert result_ == [{"token": text, "class_or_confidence": None}]
 
         text = "Wolfgang"
         entities = [
@@ -90,11 +90,11 @@ def test_postprocess(self):
         ]
         assert (result_ := component.postprocess({"text": text, "entities": entities}))
         result_ = result_.model_dump()
-        assert [
+        assert result_ == [
             {"token": "", "class_or_confidence": None},
             {"token": text, "class_or_confidence": "PER"},
             {"token": "", "class_or_confidence": None},
-        ] == result_
+        ]
 
     def test_component_functions(self):
         """
diff --git a/test/components/test_html.py b/test/components/test_html.py
index 785c5b5b6bfac..d39dccf09f15b 100644
--- a/test/components/test_html.py
+++ b/test/components/test_html.py
@@ -18,6 +18,8 @@ def test_component_functions(self):
             "name": "html",
             "_selectable": False,
             "key": None,
+            "min_height": None,
+            "max_height": None,
         }
 
     def test_in_interface(self):
diff --git a/test/components/test_image.py b/test/components/test_image.py
index 594df976ac99d..41d8c5cd2a589 100644
--- a/test/components/test_image.py
+++ b/test/components/test_image.py
@@ -7,7 +7,8 @@
 from gradio_client import utils as client_utils
 
 import gradio as gr
-from gradio.data_classes import FileData
+from gradio.components.image import ImageData
+from gradio.exceptions import Error
 
 
 class TestImage:
@@ -17,7 +18,7 @@ def test_component_functions(self, gradio_temp_dir):
         type: pil, file, filepath, numpy
         """
 
-        img = FileData(path="test/test_files/bus.png")
+        img = ImageData(path="test/test_files/bus.png", orig_name="bus.png")
         image_input = gr.Image()
 
         image_input = gr.Image(type="filepath")
@@ -60,11 +61,16 @@ def test_component_functions(self, gradio_temp_dir):
         image_input = gr.Image()
         assert image_input.preprocess(img) is not None
         image_input.preprocess(img)
-        file_image = gr.Image(type="filepath")
-        assert isinstance(file_image.preprocess(img), str)
+        file_image = gr.Image(type="filepath", image_mode=None)
+        assert img.path == file_image.preprocess(img)
         with pytest.raises(ValueError):
             gr.Image(type="unknown")  # type: ignore
 
+        with pytest.raises(Error):
+            gr.Image().preprocess(
+                ImageData(path="test/test_files/test.svg", orig_name="test.svg")
+            )
+
         string_source = gr.Image(sources="upload")
         assert string_source.sources == ["upload"]
         # Output functionalities
@@ -105,27 +111,31 @@ def test_images_upright_after_preprocess(self):
         file_path = "test/test_files/rotated_image.jpeg"
         im = PIL.Image.open(file_path)  # type: ignore
         assert im.getexif().get(274) != 1
-        image = component.preprocess(FileData(path=file_path))
+        image = component.preprocess(ImageData(path=file_path))
         assert image == PIL.ImageOps.exif_transpose(im)  # type: ignore
 
     def test_image_format_parameter(self):
         component = gr.Image(type="filepath", format="jpeg")
         file_path = "test/test_files/bus.png"
         assert (image := component.postprocess(file_path))
-        assert image.path.endswith("png")
+        assert image.path.endswith("png")  # type: ignore
         assert (
             image := component.postprocess(
                 np.random.randint(0, 256, (100, 100, 3), dtype=np.uint8)
             )
         )
-        assert image.path.endswith("jpeg")
+        assert image.path.endswith("jpeg")  # type: ignore
 
-        assert (image_pre := component.preprocess(FileData(path=file_path)))
+        assert (
+            image_pre := component.preprocess(
+                ImageData(path=file_path, orig_name="bus.png")
+            )
+        )
         assert isinstance(image_pre, str)
-        assert image_pre.endswith("webp")
+        assert image_pre.endswith("png")
 
         image_pre = component.preprocess(
-            FileData(path="test/test_files/cheetah1.jpg", orig_name="cheetah1.jpg")
+            ImageData(path="test/test_files/cheetah1.jpg", orig_name="cheetah1.jpg")
         )
         assert isinstance(image_pre, str)
-        assert image_pre.endswith("jpeg")
+        assert image_pre.endswith("jpg")
diff --git a/test/components/test_json.py b/test/components/test_json.py
index cea0f920ca1e2..b72c685053cc7 100644
--- a/test/components/test_json.py
+++ b/test/components/test_json.py
@@ -30,6 +30,8 @@ def test_component_functions(self):
             "open": False,
             "key": None,
             "show_indices": False,
+            "max_height": 500,
+            "min_height": None,
         }
         js_component = gr.Json(value={"a": 1, "b": 2})
         assert js_component.get_config()["value"] == {"a": 1, "b": 2}
@@ -84,6 +86,12 @@ def get_avg_age_per_gender(data):
             "O": 20,
         }
 
+    @pytest.mark.asyncio
+    async def test_dict_with_path_key_not_moved(self):
+        iface = gr.Interface(lambda x: x, "json", "json")
+        y_data = {"assets": {"path": "foo"}}
+        assert (await iface.process_api(0, [y_data]))["data"][0].model_dump() == y_data
+
     @pytest.mark.parametrize(
         "value, expected",
         [
diff --git a/test/components/test_label.py b/test/components/test_label.py
index fdd89c361ce8f..43e71ef959778 100644
--- a/test/components/test_label.py
+++ b/test/components/test_label.py
@@ -4,6 +4,7 @@
 import pytest
 
 import gradio as gr
+from gradio import FileData
 
 
 class TestLabel:
@@ -70,7 +71,7 @@ def test_in_interface(self):
         """
         Interface, process
         """
-        x_img = "test/test_files/bus.png"
+        x_img = FileData(path="test/test_files/bus.png")
 
         def rgb_distribution(img):
             rgb_dist = np.mean(img, axis=(0, 1))
diff --git a/test/components/test_radio.py b/test/components/test_radio.py
index 17e88d6b30c50..abfc75430e0f8 100644
--- a/test/components/test_radio.py
+++ b/test/components/test_radio.py
@@ -38,7 +38,8 @@ def test_component_functions(self):
         radio = gr.Radio(choices=["a", "b"], type="index")
         assert radio.preprocess("a") == 0
         assert radio.preprocess("b") == 1
-        assert radio.preprocess("c") is None
+        with pytest.raises(gr.Error):
+            radio.preprocess("c")
 
         # When a Gradio app is loaded with gr.load, the tuples are converted to lists,
         # so we need to test that case as well
diff --git a/test/components/test_textbox.py b/test/components/test_textbox.py
index 0c7500df7e9e0..e9fb5cac89dea 100644
--- a/test/components/test_textbox.py
+++ b/test/components/test_textbox.py
@@ -41,6 +41,8 @@ def test_component_functions(self):
             "info": None,
             "autoscroll": True,
             "max_length": None,
+            "submit_btn": False,
+            "stop_btn": False,
         }
 
     @pytest.mark.asyncio
diff --git a/test/components/test_video.py b/test/components/test_video.py
index 89053e4cc3931..935f71ce1c793 100644
--- a/test/components/test_video.py
+++ b/test/components/test_video.py
@@ -68,6 +68,7 @@ async def test_component_functions(self):
             "_selectable": False,
             "key": None,
             "loop": False,
+            "streaming": False,
             "watermark": None,
         }
         assert video_input.preprocess(None) is None
@@ -162,14 +163,6 @@ def test_in_interface(self):
         iface = gr.Interface(lambda x: x, "video", "playable_video")
         assert iface({"video": x_video})["video"].endswith(".mp4")
 
-    def test_with_waveform(self):
-        """
-        Interface, process
-        """
-        x_audio = media_data.BASE64_AUDIO["path"]
-        iface = gr.Interface(lambda x: gr.make_waveform(x), "audio", "video")
-        assert iface(x_audio)["video"].endswith(".mp4")
-
     def test_video_postprocess_converts_to_playable_format(self):
         test_file_dir = Path(__file__).parent.parent / "test_files"
         # This file has a playable container but not playable codec
diff --git a/test/conftest.py b/test/conftest.py
index 73260e7f334aa..cf175e72f8478 100644
--- a/test/conftest.py
+++ b/test/conftest.py
@@ -29,7 +29,6 @@ def io_components():
             gr.components.FormComponent,
             gr.State,
             gr.LoginButton,
-            gr.LogoutButton,
             gr.Timer,
         ]:
             continue
diff --git a/test/requirements.txt b/test/requirements.txt
index b42d63c5b5fc1..00bccd295f526 100644
--- a/test/requirements.txt
+++ b/test/requirements.txt
@@ -98,14 +98,6 @@ httpx==0.23.0
     #   gradio
     #   gradio-client
     #   respx
-huggingface-hub==0.21.4
-    # via
-    #   -r requirements.in
-    #   diffusers
-    #   gradio
-    #   gradio-client
-    #   tokenizers
-    #   transformers
 hypothesis==6.108.9
 idna==3.3
     # via
diff --git a/test/test_analytics.py b/test/test_analytics.py
index a7ad729bdd542..f4bae64d3f565 100644
--- a/test/test_analytics.py
+++ b/test/test_analytics.py
@@ -1,15 +1,12 @@
 import asyncio
-import ipaddress
 import json
 import os
 import warnings
 from unittest.mock import patch
 
-import httpx
 import pytest
 
 from gradio import analytics, wasm_utils
-from gradio.context import Context
 
 os.environ["GRADIO_ANALYTICS_ENABLED"] = "False"
 
@@ -62,26 +59,3 @@ async def test_error_analytics_successful_in_wasm_mode(
         await asyncio.wait(all_tasks)
 
         pyodide_pyfetch.assert_called()
-
-
-class TestIPAddress:
-    @pytest.mark.flaky
-    def test_get_ip(self):
-        Context.ip_address = None
-        ip = analytics.get_local_ip_address()
-        if ip in ("No internet connection", "Analytics disabled"):
-            return
-        ipaddress.ip_address(ip)
-
-    @patch("httpx.get")
-    def test_get_ip_without_internet(self, mock_get, monkeypatch):
-        mock_get.side_effect = httpx.ConnectError("Connection error")
-        monkeypatch.setenv("GRADIO_ANALYTICS_ENABLED", "True")
-        Context.ip_address = None
-        ip = analytics.get_local_ip_address()
-        assert ip == "No internet connection"
-
-        monkeypatch.setenv("GRADIO_ANALYTICS_ENABLED", "False")
-        Context.ip_address = None
-        ip = analytics.get_local_ip_address()
-        assert ip == "Analytics disabled"
diff --git a/test/test_api_info.py b/test/test_api_info.py
index 9da72ce4c881a..18ce52e60edff 100644
--- a/test/test_api_info.py
+++ b/test/test_api_info.py
@@ -2,7 +2,7 @@
 from datetime import datetime, timedelta
 from enum import Enum
 from pathlib import Path
-from typing import ClassVar, Dict, List, Literal, Optional, Set, Tuple, Union
+from typing import ClassVar, Literal, Optional, Union
 from uuid import UUID
 
 import pytest
@@ -31,19 +31,19 @@ class FloatModel(GradioModel):
 
 
 class ListModel(GradioModel):
-    items: List[int]
+    items: list[int]
 
     answer: ClassVar = "Dict(items: List[int])"
 
 
 class DictModel(GradioModel):
-    data_dict: Dict[str, int]
+    data_dict: dict[str, int]
 
     answer: ClassVar = "Dict(data_dict: Dict(str, int))"
 
 
 class DictModel2(GradioModel):
-    data_dict: Dict[str, List[float]]
+    data_dict: dict[str, list[float]]
 
     answer: ClassVar = "Dict(data_dict: Dict(str, List[float]))"
 
@@ -83,7 +83,7 @@ class RootWithNestedModel(GradioModel):
 class LessNestedModel(GradioModel):
     nested_int: int
     nested_enum: ColorEnum
-    nested_dict: Dict[str, List[Union[int, float]]]
+    nested_dict: dict[str, list[Union[int, float]]]
 
     answer: ClassVar = "Dict(nested_int: int, nested_enum: Literal['red', 'green', 'blue'], nested_dict: Dict(str, List[int | float]))"
 
@@ -95,7 +95,7 @@ class StatusModel(GradioModel):
 
 
 class PointModel(GradioRootModel):
-    root: Tuple[float, float]
+    root: tuple[float, float]
 
     answer: ClassVar = "Tuple[float, float]"
 
@@ -139,7 +139,7 @@ class DateTimeModel(GradioModel):
 
 
 class SetModel(GradioModel):
-    unique_numbers: Set[int]
+    unique_numbers: set[int]
 
     answer: ClassVar = "Dict(unique_numbers: List[int])"
 
@@ -150,7 +150,7 @@ class ItemModel(GradioModel):
 
 
 class OrderModel(GradioModel):
-    items: List[ItemModel]
+    items: list[ItemModel]
 
     answer: ClassVar = "Dict(items: List[Dict(name: str, price: float)])"
 
@@ -168,7 +168,7 @@ class CartItemModel(GradioModel):
 
 
 class ShoppingCartModel(GradioModel):
-    items: List[CartItemModel]
+    items: list[CartItemModel]
 
     answer: ClassVar = "Dict(items: List[Dict(product_name: str, quantity: int, price_per_unit: float)])"
 
@@ -179,13 +179,13 @@ class CoordinateModel(GradioModel):
 
 
 class TupleListModel(GradioModel):
-    data: List[Tuple[int, str]]
+    data: list[tuple[int, str]]
 
     answer: ClassVar = "Dict(data: List[Tuple[int, str]]"
 
 
 class PathListModel(GradioModel):
-    file_paths: List[Path]
+    file_paths: list[Path]
 
     answer: ClassVar = "Dict(file_paths: List[str])"
 
@@ -193,7 +193,7 @@ class PathListModel(GradioModel):
 class PostModel(GradioModel):
     author: str
     content: str
-    tags: List[str]
+    tags: list[str]
     likes: int = 0
 
     answer: ClassVar = "Dict(author: str, content: str, tags: List[str], likes: int)"
@@ -203,7 +203,7 @@ class PostModel(GradioModel):
 
 
 class NamedTupleDictionaryModel(GradioModel):
-    people: Dict[str, Person]
+    people: dict[str, Person]
 
     answer: ClassVar = "Dict(people: Dict(str, Tuple[Any, Any]))"
 
diff --git a/test/test_blocks.py b/test/test_blocks.py
index 77fafa3996175..e4d697ac62768 100644
--- a/test/test_blocks.py
+++ b/test/test_blocks.py
@@ -12,7 +12,7 @@
 from contextlib import contextmanager
 from functools import partial
 from string import capwords
-from unittest.mock import patch
+from unittest.mock import mock_open, patch
 
 import gradio_client as grc
 import numpy as np
@@ -27,6 +27,7 @@
 from gradio.data_classes import GradioModel, GradioRootModel
 from gradio.events import SelectData
 from gradio.exceptions import DuplicateBlockError
+from gradio.route_utils import API_PREFIX
 from gradio.utils import assert_configs_are_equivalent_besides_ids, cancel_tasks
 
 pytest_plugins = ("pytest_asyncio",)
@@ -333,7 +334,7 @@ def generator_function():
 
             greet_btn.click(lambda: "Hello!", inputs=None, outputs=[greeting])
             generator_btn.click(generator_function, inputs=None, outputs=[counter])
-            demo.load(continuous_fn, inputs=None, outputs=[meaning_of_life], every=1)
+            demo.load(continuous_fn, inputs=None, outputs=[meaning_of_life])
 
         assert "dependencies" in demo.config
         dependencies = demo.config["dependencies"]
@@ -353,10 +354,6 @@ def generator_function():
             "generator": False,
             "cancel": False,
         }
-        assert dependencies[4]["types"] == {
-            "generator": False,
-            "cancel": False,
-        }
 
     @patch(
         "gradio.themes.ThemeClass.from_hub",
@@ -558,7 +555,8 @@ def process_and_dump(component):
             return output
 
         assert all(
-            o["value"] == process_and_dump(c) for o, c in zip(output, io_components)
+            o["value"] == process_and_dump(c)
+            for o, c in zip(output, io_components, strict=False)
         )
 
     @pytest.mark.asyncio
@@ -680,7 +678,7 @@ def generic_update():
             assert output["data"][1] == {"__type__": "update", "interactive": True}
 
     @pytest.mark.asyncio
-    async def test_error_raised_if_num_outputs_mismatch(self):
+    async def test_error_raised_if_num_outputs_is_too_low(self):
         with gr.Blocks() as demo:
             textbox1 = gr.Textbox()
             textbox2 = gr.Textbox()
@@ -688,10 +686,23 @@ async def test_error_raised_if_num_outputs_mismatch(self):
             button.click(lambda x: x, textbox1, [textbox1, textbox2])
         with pytest.raises(
             ValueError,
-            match=r"^An event handler didn\'t receive enough output values \(needed: 2, received: 1\)\.\nWanted outputs:",
         ):
             await demo.postprocess_data(demo.fns[0], predictions=["test"], state=None)
 
+    @pytest.mark.asyncio
+    async def test_warning_raised_if_num_outputs_is_too_high(self):
+        with gr.Blocks() as demo:
+            textbox1 = gr.Textbox()
+            textbox2 = gr.Textbox()
+            button = gr.Button()
+            button.click(lambda x: (x, x), textbox1, [textbox1, textbox2])
+        with pytest.warns(
+            UserWarning,
+        ):
+            await demo.postprocess_data(
+                demo.fns[0], predictions=["test", "test2", "test3"], state=None
+            )
+
     @pytest.mark.asyncio
     async def test_error_raised_if_num_outputs_mismatch_with_function_name(self):
         def infer(x):
@@ -704,7 +715,6 @@ def infer(x):
             button.click(infer, textbox1, [textbox1, textbox2])
         with pytest.raises(
             ValueError,
-            match=r"^An event handler \(infer\) didn\'t receive enough output values \(needed: 2, received: 1\)\.\nWanted outputs:",
         ):
             await demo.postprocess_data(demo.fns[0], predictions=["test"], state=None)
 
@@ -717,7 +727,6 @@ async def test_error_raised_if_num_outputs_mismatch_single_output(self):
             btn.click(lambda a: a, num1, [num1, num2])
         with pytest.raises(
             ValueError,
-            match=r"^An event handler didn\'t receive enough output values \(needed: 2, received: 1\)\.\nWanted outputs:",
         ):
             await demo.postprocess_data(demo.fns[0], predictions=[1], state=None)
 
@@ -734,7 +743,6 @@ def infer(a, b):
             btn.click(infer, num1, [num1, num2, num3])
         with pytest.raises(
             ValueError,
-            match=r"^An event handler \(infer\) didn\'t receive enough output values \(needed: 3, received: 2\)\.\nWanted outputs:",
         ):
             await demo.postprocess_data(demo.fns[0], predictions=[1, 2], state=None)
 
@@ -755,12 +763,12 @@ def update(value):
         client = TestClient(app)
 
         session_1 = client.post(
-            "/api/predict/",
+            f"{API_PREFIX}/api/predict/",
             json={"data": [0], "session_hash": "1", "fn_index": 0},
         )
         assert "Original" in session_1.json()["data"][0]
         session_2 = client.post(
-            "/api/predict/",
+            f"{API_PREFIX}/api/predict/",
             json={"data": [0], "session_hash": "1", "fn_index": 0},
         )
         assert "New" in session_2.json()["data"][0]
@@ -785,37 +793,37 @@ def run(x, s):
         client = TestClient(app)
 
         session_1 = client.post(
-            "/api/predict/",
+            f"{API_PREFIX}/api/predict/",
             json={"data": [1, None], "session_hash": "1", "fn_index": 0},
         )
         assert session_1.json()["data"][0] == 0
         session_2 = client.post(
-            "/api/predict/",
+            f"{API_PREFIX}/api/predict/",
             json={"data": [1, None], "session_hash": "2", "fn_index": 0},
         )
         assert session_2.json()["data"][0] == 0
         session_1 = client.post(
-            "/api/predict/",
+            f"{API_PREFIX}/api/predict/",
             json={"data": [1, None], "session_hash": "1", "fn_index": 0},
         )
         assert session_1.json()["data"][0] == 1
         session_2 = client.post(
-            "/api/predict/",
+            f"{API_PREFIX}/api/predict/",
             json={"data": [1, None], "session_hash": "2", "fn_index": 0},
         )
         assert session_2.json()["data"][0] == 1
         session_3 = client.post(
-            "/api/predict/",
+            f"{API_PREFIX}/api/predict/",
             json={"data": [1, None], "session_hash": "3", "fn_index": 0},
         )
         assert session_3.json()["data"][0] == 0
         session_2 = client.post(
-            "/api/predict/",
+            f"{API_PREFIX}/api/predict/",
             json={"data": [1, None], "session_hash": "2", "fn_index": 0},
         )
         assert session_2.json()["data"][0] == 2
         session_1 = client.post(
-            "/api/predict/",
+            f"{API_PREFIX}/api/predict/",
             json={"data": [1, None], "session_hash": "1", "fn_index": 0},
         )
         assert (
@@ -840,23 +848,28 @@ def run(min, num):
         client = TestClient(app)
 
         session_1 = client.post(
-            "/api/predict/", json={"data": [5, 5], "session_hash": "1", "fn_index": 0}
+            f"{API_PREFIX}/api/predict/",
+            json={"data": [5, 5], "session_hash": "1", "fn_index": 0},
         )
         assert session_1.json()["data"][0] == 5
         session_1 = client.post(
-            "/api/predict/", json={"data": [2, 2], "session_hash": "1", "fn_index": 0}
+            f"{API_PREFIX}/api/predict/",
+            json={"data": [2, 2], "session_hash": "1", "fn_index": 0},
         )
         assert "error" in session_1.json()  # error because min is 5 and num is 2
         session_2 = client.post(
-            "/api/predict/", json={"data": [5, 5], "session_hash": "2", "fn_index": 0}
+            f"{API_PREFIX}/api/predict/",
+            json={"data": [5, 5], "session_hash": "2", "fn_index": 0},
         )
         assert session_2.json()["data"][0] == 5
         session_3 = client.post(
-            "/api/predict/", json={"data": [5, 5], "session_hash": "3", "fn_index": 0}
+            f"{API_PREFIX}/api/predict/",
+            json={"data": [5, 5], "session_hash": "3", "fn_index": 0},
         )
         assert session_3.json()["data"][0] == 5
         session_1 = client.post(
-            "/api/predict/", json={"data": [2, 2], "session_hash": "1", "fn_index": 0}
+            f"{API_PREFIX}/api/predict/",
+            json={"data": [2, 2], "session_hash": "1", "fn_index": 0},
         )
         assert (
             "error" not in session_1.json()
@@ -1017,7 +1030,9 @@ def generator(x):
 class TestBatchProcessing:
     def test_raise_exception_if_batching_an_event_thats_not_queued(self):
         def trim(words, lens):
-            trimmed_words = [word[: int(length)] for word, length in zip(words, lens)]
+            trimmed_words = [
+                word[: int(length)] for word, length in zip(words, lens, strict=False)
+            ]
             return [trimmed_words]
 
         msg = "In order to use batching, the queue must be enabled."
@@ -1068,7 +1083,7 @@ def regular_fn(word1, word2):
         def batch_fn(words, lengths):
             comparisons = []
             trim_words = []
-            for word, length in zip(words, lengths):
+            for word, length in zip(words, lengths, strict=False):
                 trim_words.append(word[:length])
                 comparisons.append(len(word) > length)
             return trim_words, comparisons
@@ -1143,7 +1158,7 @@ async def test_unequal_batch_sizes(self):
 
             def batch_fn(x, y):
                 results = []
-                for word1, word2 in zip(x, y):
+                for word1, word2 in zip(x, y, strict=False):
                     results.append(f"Hello {word1}{word2}")
                 return (results,)
 
@@ -1198,14 +1213,14 @@ async def test_root_path():
     demo = gr.Interface(lambda x: image_file, "textbox", "image")
     result = await demo.process_api(block_fn=0, inputs=[""], request=None, state=None)
     result_url = result["data"][0]["url"]
-    assert result_url.startswith("/file=")
+    assert result_url.startswith(f"{API_PREFIX}/file=")
     assert result_url.endswith("bus.png")
 
     result = await demo.process_api(
         block_fn=0, inputs=[""], request=None, state=None, root_path="abidlabs.hf.space"
     )
     result_url = result["data"][0]["url"]
-    assert result_url.startswith("abidlabs.hf.space/file=")
+    assert result_url.startswith(f"abidlabs.hf.space{API_PREFIX}/file=")
     assert result_url.endswith("bus.png")
 
 
@@ -1641,13 +1656,6 @@ def test_recover_kwargs():
     assert props == {"format": "wav", "autoplay": False}
 
 
-def test_deprecation_warning_emitted_when_concurrency_count_set():
-    with pytest.raises(DeprecationWarning):
-        gr.Interface(lambda x: x, gr.Textbox(), gr.Textbox()).queue(
-            concurrency_count=12
-        )
-
-
 def test_postprocess_update_dict():
     block = gr.Textbox()
     update_dict = {"value": 2.0, "visible": True, "invalid_arg": "hello"}
@@ -1817,6 +1825,39 @@ def delete_fn(v):
         demo.close()
 
 
+def test_post_process_file_blocked(connect):
+    dotfile = pathlib.Path(".foo.txt")
+    file = pathlib.Path(os.getcwd()) / ".." / "file.txt"
+
+    try:
+        demo = gr.Interface(lambda s: s, "text", "file")
+        with connect(demo, show_error=True) as client:
+            _ = client.predict("test/test_files/bus.png")
+            with pytest.raises(
+                ValueError,
+                match="to the gradio cache dir because it was not created by",
+            ):
+                file.write_text("Hi")
+                client.predict(str(file))
+
+        with connect(demo, allowed_paths=[str(file)]) as client:
+            _ = client.predict(str(file))
+
+        dotfile.write_text("foo")
+        with connect(demo, show_error=True) as client:
+            with pytest.raises(ValueError, match="Dotfiles located"):
+                _ = client.predict(str(dotfile))
+
+        with connect(demo, allowed_paths=[str(dotfile)]) as client:
+            _ = client.predict(str(dotfile))
+
+    finally:
+        try:
+            dotfile.unlink()
+        except FileNotFoundError:
+            pass
+
+
 def test_render_when_mounted_sets_root_path_for_files():
     app = FastAPI()
     test_video_path = "test/test_files/video_sample.mp4"
@@ -1833,7 +1874,7 @@ def show_video(data):
 
     with TestClient(app) as client:
         r = client.post(
-            "/test/queue/join",
+            f"/test{API_PREFIX}/queue/join",
             json={
                 "data": [""],
                 "fn_index": 0,
@@ -1843,7 +1884,7 @@ def show_video(data):
             },
         )
         assert r.status_code == 200
-        r = client.get("/test/queue/data?session_hash=foo")
+        r = client.get(f"/test{API_PREFIX}/queue/data?session_hash=foo")
         checked_component = False
         for msg in r.iter_lines():
             if "data" in msg:
@@ -1854,6 +1895,32 @@ def show_video(data):
                         if "value" in component.get("props", {}):
                             assert component["props"]["value"]["video"][
                                 "url"
-                            ].startswith("http://testserver/test/file=")
+                            ].startswith(f"http://testserver/test{API_PREFIX}/file=")
                             checked_component = True
         assert checked_component
+
+
+@pytest.fixture
+def mock_css_files():
+    css_contents = {
+        "file1.css": "h1 { font-size: 20px; }",
+        "file2.css": ".class { margin: 10px; }",
+    }
+
+    def mock_open_file(filename, encoding):
+        return mock_open(read_data=css_contents[filename])()
+
+    with patch("builtins.open", side_effect=mock_open_file):
+        yield
+
+
+def test_css_and_css_paths_parameters(mock_css_files):
+    css_paths = ["file1.css", "file2.css"]
+    instance = gr.Blocks(css="body { color: red; }", css_paths=css_paths)
+    expected_css = """
+body { color: red; }
+h1 { font-size: 20px; }
+.class { margin: 10px; }
+        """
+
+    assert instance.css.strip() == expected_css.strip()
diff --git a/test/test_buttons.py b/test/test_buttons.py
index 042fbb2ccb49f..039ae8c4c3f88 100644
--- a/test/test_buttons.py
+++ b/test/test_buttons.py
@@ -35,12 +35,6 @@ def test_login_button_warns_when_not_on_spaces(self):
             with gr.Blocks():
                 gr.LoginButton()
 
-    @pytest.mark.flaky
-    def test_logout_button_warns_when_not_on_spaces(self):
-        with pytest.warns(UserWarning):
-            with gr.Blocks():
-                gr.LogoutButton()
-
     @patch("gradio.oauth.get_space", lambda: "fake_space")
     @patch("gradio.oauth._add_oauth_routes")
     def test_login_button_setup_correctly(self, mock_add_oauth_routes):
diff --git a/test/test_chat_interface.py b/test/test_chat_interface.py
index 873b2b3cece02..bee72ff14e738 100644
--- a/test/test_chat_interface.py
+++ b/test/test_chat_interface.py
@@ -45,11 +45,6 @@ def test_no_fn(self):
         with pytest.raises(TypeError):
             gr.ChatInterface()  # type: ignore
 
-    def test_configuring_buttons(self):
-        chatbot = gr.ChatInterface(double, submit_btn=None, retry_btn=None)
-        assert chatbot.submit_btn is None
-        assert chatbot.retry_btn is None
-
     def test_concurrency_limit(self):
         chat = gr.ChatInterface(double, concurrency_limit=10)
         assert chat.concurrency_limit == 10
@@ -69,104 +64,95 @@ def chat():
             chatbot=gr.Chatbot(height=400),
             textbox=gr.Textbox(placeholder="Type Message", container=False, scale=7),
             title="Test",
-            clear_btn="Clear",
         )
         gr.ChatInterface(
             chat,
             chatbot=gr.Chatbot(height=400),
             textbox=gr.MultimodalTextbox(container=False, scale=7),
             title="Test",
-            clear_btn="Clear",
         )
 
     def test_events_attached(self):
         chatbot = gr.ChatInterface(double)
         dependencies = chatbot.fns.values()
         textbox = chatbot.textbox._id
-        assert chatbot.submit_btn
-        submit_btn = chatbot.submit_btn._id
         assert next(
-            (
-                d
-                for d in dependencies
-                if d.targets == [(textbox, "submit"), (submit_btn, "click")]
-            ),
+            (d for d in dependencies if d.targets == [(textbox, "submit")]),
             None,
         )
-        assert chatbot.retry_btn and chatbot.clear_btn and chatbot.undo_btn
-        for btn_id in [
-            chatbot.retry_btn._id,
-            chatbot.clear_btn._id,
-            chatbot.undo_btn._id,
-        ]:
-            assert next(
-                (d for d in dependencies if d.targets[0] == (btn_id, "click")),
-                None,
-            )
 
-    def test_example_caching(self):
+    def test_example_caching(self, connect):
         with patch(
             "gradio.utils.get_cache_folder", return_value=Path(tempfile.mkdtemp())
         ):
             chatbot = gr.ChatInterface(
                 double, examples=["hello", "hi"], cache_examples=True
             )
-            prediction_hello = chatbot.examples_handler.load_from_cache(0)
-            prediction_hi = chatbot.examples_handler.load_from_cache(1)
+            with connect(chatbot):
+                prediction_hello = chatbot.examples_handler.load_from_cache(0)
+                prediction_hi = chatbot.examples_handler.load_from_cache(1)
             assert prediction_hello[0].root[0] == ("hello", "hello hello")
             assert prediction_hi[0].root[0] == ("hi", "hi hi")
 
     @pytest.mark.asyncio
-    async def test_example_caching_lazy(self):
+    async def test_example_caching_lazy(self, connect):
         with patch(
             "gradio.utils.get_cache_folder", return_value=Path(tempfile.mkdtemp())
         ):
             chatbot = gr.ChatInterface(
-                double, examples=["hello", "hi"], cache_examples="lazy"
+                double,
+                examples=["hello", "hi"],
+                cache_examples=True,
+                cache_mode="lazy",
             )
             async for _ in chatbot.examples_handler.async_lazy_cache(
                 (0, ["hello"]), "hello"
             ):
                 pass
-            prediction_hello = chatbot.examples_handler.load_from_cache(0)
+            with connect(chatbot):
+                prediction_hello = chatbot.examples_handler.load_from_cache(0)
             assert prediction_hello[0].root[0] == ("hello", "hello hello")
             with pytest.raises(IndexError):
                 prediction_hi = chatbot.examples_handler.load_from_cache(1)
                 assert prediction_hi[0].root[0] == ("hi", "hi hi")
 
-    def test_example_caching_async(self):
+    def test_example_caching_async(self, connect):
         with patch(
             "gradio.utils.get_cache_folder", return_value=Path(tempfile.mkdtemp())
         ):
             chatbot = gr.ChatInterface(
                 async_greet, examples=["abubakar", "tom"], cache_examples=True
             )
-            prediction_hello = chatbot.examples_handler.load_from_cache(0)
-            prediction_hi = chatbot.examples_handler.load_from_cache(1)
+
+            with connect(chatbot):
+                prediction_hello = chatbot.examples_handler.load_from_cache(0)
+                prediction_hi = chatbot.examples_handler.load_from_cache(1)
             assert prediction_hello[0].root[0] == ("abubakar", "hi, abubakar")
             assert prediction_hi[0].root[0] == ("tom", "hi, tom")
 
-    def test_example_caching_with_streaming(self):
+    def test_example_caching_with_streaming(self, connect):
         with patch(
             "gradio.utils.get_cache_folder", return_value=Path(tempfile.mkdtemp())
         ):
             chatbot = gr.ChatInterface(
                 stream, examples=["hello", "hi"], cache_examples=True
             )
-            prediction_hello = chatbot.examples_handler.load_from_cache(0)
-            prediction_hi = chatbot.examples_handler.load_from_cache(1)
+            with connect(chatbot):
+                prediction_hello = chatbot.examples_handler.load_from_cache(0)
+                prediction_hi = chatbot.examples_handler.load_from_cache(1)
             assert prediction_hello[0].root[0] == ("hello", "hello")
             assert prediction_hi[0].root[0] == ("hi", "hi")
 
-    def test_example_caching_with_streaming_async(self):
+    def test_example_caching_with_streaming_async(self, connect):
         with patch(
             "gradio.utils.get_cache_folder", return_value=Path(tempfile.mkdtemp())
         ):
             chatbot = gr.ChatInterface(
                 async_stream, examples=["hello", "hi"], cache_examples=True
             )
-            prediction_hello = chatbot.examples_handler.load_from_cache(0)
-            prediction_hi = chatbot.examples_handler.load_from_cache(1)
+            with connect(chatbot):
+                prediction_hello = chatbot.examples_handler.load_from_cache(0)
+                prediction_hi = chatbot.examples_handler.load_from_cache(1)
             assert prediction_hello[0].root[0] == ("hello", "hello")
             assert prediction_hi[0].root[0] == ("hi", "hi")
 
@@ -197,7 +183,7 @@ def test_setting_accordion_params(self, monkeypatch):
         assert accordion.get_config().get("open") is True
         assert accordion.get_config().get("label") == "MOAR"
 
-    def test_example_caching_with_additional_inputs(self, monkeypatch):
+    def test_example_caching_with_additional_inputs(self, monkeypatch, connect):
         with patch(
             "gradio.utils.get_cache_folder", return_value=Path(tempfile.mkdtemp())
         ):
@@ -207,16 +193,19 @@ def test_example_caching_with_additional_inputs(self, monkeypatch):
                 examples=[["hello", "robot", 100], ["hi", "robot", 2]],
                 cache_examples=True,
             )
-            prediction_hello = chatbot.examples_handler.load_from_cache(0)
-            prediction_hi = chatbot.examples_handler.load_from_cache(1)
+            with connect(chatbot):
+                prediction_hello = chatbot.examples_handler.load_from_cache(0)
+                prediction_hi = chatbot.examples_handler.load_from_cache(1)
             assert prediction_hello[0].root[0] == ("hello", "robot hello")
             assert prediction_hi[0].root[0] == ("hi", "ro")
 
-    def test_example_caching_with_additional_inputs_already_rendered(self, monkeypatch):
+    def test_example_caching_with_additional_inputs_already_rendered(
+        self, monkeypatch, connect
+    ):
         with patch(
             "gradio.utils.get_cache_folder", return_value=Path(tempfile.mkdtemp())
         ):
-            with gr.Blocks():
+            with gr.Blocks() as demo:
                 with gr.Accordion("Inputs"):
                     text = gr.Textbox()
                     slider = gr.Slider()
@@ -226,8 +215,9 @@ def test_example_caching_with_additional_inputs_already_rendered(self, monkeypat
                         examples=[["hello", "robot", 100], ["hi", "robot", 2]],
                         cache_examples=True,
                     )
-            prediction_hello = chatbot.examples_handler.load_from_cache(0)
-            prediction_hi = chatbot.examples_handler.load_from_cache(1)
+            with connect(demo):
+                prediction_hello = chatbot.examples_handler.load_from_cache(0)
+                prediction_hi = chatbot.examples_handler.load_from_cache(1)
             assert prediction_hello[0].root[0] == ("hello", "robot hello")
             assert prediction_hi[0].root[0] == ("hi", "ro")
 
diff --git a/test/test_events.py b/test/test_events.py
index 392809e2bb2d5..1b3c6b6faad19 100644
--- a/test/test_events.py
+++ b/test/test_events.py
@@ -37,7 +37,7 @@ def fn_img_index(evt: gr.SelectData):
         client = TestClient(app)
 
         resp = client.post(
-            f"{demo.local_url}run/predict",
+            f"{demo.local_api_url}run/predict",
             json={"fn_index": 0, "data": [], "event_data": {"index": 1, "value": None}},
         )
         assert resp.status_code == 200
@@ -111,6 +111,7 @@ def sum(a, b, c):
             (num1._id, "change"),
             (num2._id, "change"),
             (num3._id, "change"),
+            (0, "load"),
         ]
 
     def test_load_chaining(self):
@@ -184,6 +185,21 @@ def test_event_pyi_file_matches_source_code():
     assert segment
     sig = inspect.signature(gr.Button.click)
     for param in sig.parameters.values():
-        if param.name == "block":
+        if param.name in ["block", "time_limit", "stream_every", "like_user_message"]:
             continue
         assert param.name in segment
+
+    code = (
+        Path(__file__).parent / ".." / "gradio" / "components" / "image.pyi"
+    ).read_text()
+    mod = ast.parse(code)
+    segment = None
+    for node in ast.walk(mod):
+        if isinstance(node, ast.FunctionDef) and node.name == "stream":
+            segment = ast.get_source_segment(code, node)
+
+    # This would fail if Image no longer has a stream method
+    assert segment
+    sig = inspect.signature(gr.Image.stream)
+    for param in ["time_limit", "stream_every"]:
+        assert param in segment
diff --git a/test/test_external.py b/test/test_external.py
index 5d06eadf993c4..91bb9a1756829 100644
--- a/test/test_external.py
+++ b/test/test_external.py
@@ -1,20 +1,20 @@
 import os
 import tempfile
 import textwrap
-import warnings
 from pathlib import Path
 from unittest.mock import MagicMock, patch
 
+import huggingface_hub
 import pytest
 from fastapi.testclient import TestClient
 from gradio_client import media_data
-from huggingface_hub import HfFolder
 
 import gradio as gr
 from gradio.context import Context
 from gradio.exceptions import GradioVersionIncompatibleError, InvalidApiNameError
 from gradio.external import TooManyRequestsError
 from gradio.external_utils import cols_to_rows, get_tabular_examples
+from gradio.route_utils import API_PREFIX
 
 """
 WARNING: These tests have an external dependency: namely that Hugging Face's
@@ -30,7 +30,7 @@
 
 os.environ["GRADIO_ANALYTICS_ENABLED"] = "False"
 
-HF_TOKEN = os.getenv("HF_TOKEN") or HfFolder.get_token()
+HF_TOKEN = huggingface_hub.get_token()
 
 
 class TestLoadInterface:
@@ -75,7 +75,7 @@ def test_text_generation(self):
     def test_summarization(self):
         model_type = "summarization"
         interface = gr.load(
-            "models/facebook/bart-large-cnn", hf_token=None, alias=model_type
+            "models/facebook/bart-large-cnn", hf_token=HF_TOKEN, alias=model_type
         )
         assert interface.__name__ == model_type
         assert interface.input_components and interface.output_components
@@ -85,7 +85,7 @@ def test_summarization(self):
     def test_translation(self):
         model_type = "translation"
         interface = gr.load(
-            "models/facebook/bart-large-cnn", hf_token=None, alias=model_type
+            "models/facebook/bart-large-cnn", hf_token=HF_TOKEN, alias=model_type
         )
         assert interface.__name__ == model_type
         assert interface.input_components and interface.output_components
@@ -95,7 +95,7 @@ def test_translation(self):
     def test_text2text_generation(self):
         model_type = "text2text-generation"
         interface = gr.load(
-            "models/sshleifer/tiny-mbart", hf_token=None, alias=model_type
+            "models/sshleifer/tiny-mbart", hf_token=HF_TOKEN, alias=model_type
         )
         assert interface.__name__ == model_type
         assert interface.input_components and interface.output_components
@@ -106,7 +106,7 @@ def test_text_classification(self):
         model_type = "text-classification"
         interface = gr.load(
             "models/distilbert-base-uncased-finetuned-sst-2-english",
-            hf_token=None,
+            hf_token=HF_TOKEN,
             alias=model_type,
         )
         assert interface.__name__ == model_type
@@ -116,7 +116,9 @@ def test_text_classification(self):
 
     def test_fill_mask(self):
         model_type = "fill-mask"
-        interface = gr.load("models/bert-base-uncased", hf_token=None, alias=model_type)
+        interface = gr.load(
+            "models/bert-base-uncased", hf_token=HF_TOKEN, alias=model_type
+        )
         assert interface.__name__ == model_type
         assert interface.input_components and interface.output_components
         assert isinstance(interface.input_components[0], gr.Textbox)
@@ -125,7 +127,7 @@ def test_fill_mask(self):
     def test_zero_shot_classification(self):
         model_type = "zero-shot-classification"
         interface = gr.load(
-            "models/facebook/bart-large-mnli", hf_token=None, alias=model_type
+            "models/facebook/bart-large-mnli", hf_token=HF_TOKEN, alias=model_type
         )
         assert interface.__name__ == model_type
         assert interface.input_components and interface.output_components
@@ -137,7 +139,7 @@ def test_zero_shot_classification(self):
     def test_automatic_speech_recognition(self):
         model_type = "automatic-speech-recognition"
         interface = gr.load(
-            "models/facebook/wav2vec2-base-960h", hf_token=None, alias=model_type
+            "models/facebook/wav2vec2-base-960h", hf_token=HF_TOKEN, alias=model_type
         )
         assert interface.__name__ == model_type
         assert interface.input_components and interface.output_components
@@ -147,7 +149,7 @@ def test_automatic_speech_recognition(self):
     def test_image_classification(self):
         model_type = "image-classification"
         interface = gr.load(
-            "models/google/vit-base-patch16-224", hf_token=None, alias=model_type
+            "models/google/vit-base-patch16-224", hf_token=HF_TOKEN, alias=model_type
         )
         assert interface.__name__ == model_type
         assert interface.input_components and interface.output_components
@@ -158,7 +160,7 @@ def test_feature_extraction(self):
         model_type = "feature-extraction"
         interface = gr.load(
             "models/sentence-transformers/distilbert-base-nli-mean-tokens",
-            hf_token=None,
+            hf_token=HF_TOKEN,
             alias=model_type,
         )
         assert interface.__name__ == model_type
@@ -170,7 +172,7 @@ def test_sentence_similarity(self):
         model_type = "text-to-speech"
         interface = gr.load(
             "models/julien-c/ljspeech_tts_train_tacotron2_raw_phn_tacotron_g2p_en_no_space_train",
-            hf_token=None,
+            hf_token=HF_TOKEN,
             alias=model_type,
         )
         assert interface.__name__ == model_type
@@ -182,7 +184,7 @@ def test_text_to_speech(self):
         model_type = "text-to-speech"
         interface = gr.load(
             "models/julien-c/ljspeech_tts_train_tacotron2_raw_phn_tacotron_g2p_en_no_space_train",
-            hf_token=None,
+            hf_token=HF_TOKEN,
             alias=model_type,
         )
         assert interface.__name__ == model_type
@@ -203,7 +205,7 @@ def test_english_to_spanish_v4(self):
 
     def test_sentiment_model(self):
         io = gr.load(
-            "models/distilbert-base-uncased-finetuned-sst-2-english", hf_token=False
+            "models/distilbert-base-uncased-finetuned-sst-2-english", hf_token=HF_TOKEN
         )
         try:
             assert io("I am happy, I love you")["label"] == "POSITIVE"
@@ -211,14 +213,14 @@ def test_sentiment_model(self):
             pass
 
     def test_image_classification_model(self):
-        io = gr.load(name="models/google/vit-base-patch16-224", hf_token=False)
+        io = gr.load(name="models/google/vit-base-patch16-224", hf_token=HF_TOKEN)
         try:
             assert io("gradio/test_data/lion.jpg")["label"].startswith("lion")
         except TooManyRequestsError:
             pass
 
     def test_translation_model(self):
-        io = gr.load(name="models/t5-base", hf_token=False)
+        io = gr.load(name="models/t5-base", hf_token=HF_TOKEN)
         try:
             output = io("My name is Sarah and I live in London")
             assert output == "Mein Name ist Sarah und ich lebe in London"
@@ -238,7 +240,7 @@ def test_numerical_to_label_space(self):
             pass
 
     def test_visual_question_answering(self):
-        io = gr.load("models/dandelin/vilt-b32-finetuned-vqa", hf_token=False)
+        io = gr.load("models/dandelin/vilt-b32-finetuned-vqa", hf_token=HF_TOKEN)
         try:
             output = io("gradio/test_data/lion.jpg", "What is in the image?")
             assert isinstance(output, dict) and "label" in output
@@ -246,7 +248,7 @@ def test_visual_question_answering(self):
             pass
 
     def test_image_to_text(self):
-        io = gr.load("models/nlpconnect/vit-gpt2-image-captioning", hf_token=False)
+        io = gr.load("models/nlpconnect/vit-gpt2-image-captioning", hf_token=HF_TOKEN)
         try:
             output = io("gradio/test_data/lion.jpg")
             assert isinstance(output, str)
@@ -254,31 +256,13 @@ def test_image_to_text(self):
             pass
 
     def test_speech_recognition_model(self):
-        io = gr.load("models/facebook/wav2vec2-base-960h", hf_token=False)
+        io = gr.load("models/facebook/wav2vec2-base-960h", hf_token=HF_TOKEN)
         try:
             output = io("gradio/test_data/test_audio.wav")
             assert output is not None
         except TooManyRequestsError:
             pass
 
-        app, _, _ = io.launch(prevent_thread_lock=True, show_error=True)
-        client = TestClient(app)
-        resp = client.post(
-            "api/predict",
-            json={"fn_index": 0, "data": [media_data.BASE64_AUDIO], "name": "sample"},
-        )
-        try:
-            if resp.status_code != 200:
-                warnings.warn("Request for speech recognition model failed!")
-                assert (
-                    "Could not complete request to HuggingFace API"
-                    not in resp.json()["error"]
-                )
-            else:
-                assert resp.json()["data"] is not None
-        finally:
-            io.close()
-
     def test_private_space(self):
         io = gr.load(
             "spaces/gradio-tests/not-actually-private-spacev4-sse", hf_token=HF_TOKEN
@@ -321,14 +305,14 @@ def test_loading_files_via_proxy_works(self):
         app, _, _ = io.launch(prevent_thread_lock=True)
         test_client = TestClient(app)
         r = test_client.get(
-            "/proxy=https://gradio-tests-test-loading-examples-privatev4-sse.hf.space/file=Bunny.obj"
+            f"{API_PREFIX}/proxy=https://gradio-tests-test-loading-examples-privatev4-sse.hf.space/file=Bunny.obj"
         )
         assert r.status_code == 200
 
     def test_private_space_v4_sse_v1(self):
         io = gr.load(
             "spaces/gradio-tests/not-actually-private-spacev4-sse-v1",
-            hf_token=HfFolder.get_token(),
+            hf_token=HF_TOKEN,
         )
         try:
             output = io("abc")
@@ -358,7 +342,7 @@ def test_interface_load_cache_examples(self, tmp_path):
                     name="models/google/vit-base-patch16-224",
                     examples=[Path(test_file_dir, "cheetah1.jpg")],
                     cache_examples=True,
-                    hf_token=False,
+                    hf_token=HF_TOKEN,
                 )
             except TooManyRequestsError:
                 pass
@@ -520,3 +504,22 @@ def test_load_inside_blocks():
     demo = gr.load("spaces/abidlabs/en2fr")
     output = demo("Hello")
     assert isinstance(output, str)
+
+
+def test_load_callable():
+    def mock_src(name: str, token: str | None, **kwargs) -> gr.Blocks:
+        assert name == "test_model"
+        assert token == "test_token"
+        assert kwargs == {"param1": "value1", "param2": "value2"}
+        return gr.Blocks()
+
+    result = gr.load(
+        "test_model",
+        mock_src,
+        "test_token",
+        None,
+        param1="value1",
+        param2="value2",
+    )
+
+    assert isinstance(result, gr.Blocks)
diff --git a/test/test_flagging.py b/test/test_flagging.py
index 7741851e7f4b0..d3b04cd5204cc 100644
--- a/test/test_flagging.py
+++ b/test/test_flagging.py
@@ -1,7 +1,7 @@
 import os
 import pathlib
 import tempfile
-from unittest.mock import MagicMock, patch
+from unittest.mock import MagicMock
 
 import pytest
 
@@ -30,12 +30,12 @@ def test_files_saved_as_file_paths(self):
                 "image",
                 "image",
                 flagging_dir=tmpdirname,
-                allow_flagging="auto",
+                flagging_mode="auto",
             )
             io.launch(prevent_thread_lock=True)
             io.flagging_callback.flag([image, image])
             io.close()
-            with open(os.path.join(tmpdirname, "log.csv")) as f:
+            with open(os.path.join(tmpdirname, "dataset1.csv")) as f:
                 flagged_data = f.readlines()[1].split(",")[0]
                 assert flagged_data.endswith("bus.png")
         io.close()
@@ -45,7 +45,7 @@ def test_flagging_does_not_create_unnecessary_directories(self):
             io = gr.Interface(lambda x: x, "text", "text", flagging_dir=tmpdirname)
             io.launch(prevent_thread_lock=True)
             io.flagging_callback.flag(["test", "test"])
-            assert os.listdir(tmpdirname) == ["log.csv"]
+            assert os.listdir(tmpdirname) == ["dataset1.csv"]
 
 
 class TestSimpleFlagging:
@@ -66,84 +66,6 @@ def test_simple_csv_flagging_callback(self):
         io.close()
 
 
-class TestHuggingFaceDatasetSaver:
-    @patch(
-        "huggingface_hub.create_repo",
-        return_value=MagicMock(repo_id="gradio-tests/test"),
-    )
-    @patch("huggingface_hub.hf_hub_download")
-    @patch("huggingface_hub.metadata_update")
-    def test_saver_setup(self, metadata_update, mock_download, mock_create):
-        flagger = flagging.HuggingFaceDatasetSaver("test_token", "test")
-        with tempfile.TemporaryDirectory() as tmpdirname:
-            flagger.setup([gr.Audio(), gr.Textbox()], tmpdirname)
-        mock_create.assert_called_once()
-        mock_download.assert_called()
-
-    @patch(
-        "huggingface_hub.create_repo",
-        return_value=MagicMock(repo_id="gradio-tests/test"),
-    )
-    @patch("huggingface_hub.hf_hub_download")
-    @patch("huggingface_hub.upload_folder")
-    @patch("huggingface_hub.upload_file")
-    @patch("huggingface_hub.metadata_update")
-    def test_saver_flag_same_dir(
-        self, metadata_update, mock_upload_file, mock_upload, mock_download, mock_create
-    ):
-        with tempfile.TemporaryDirectory() as tmpdirname:
-            io = gr.Interface(
-                lambda x: x,
-                "text",
-                "text",
-                flagging_dir=tmpdirname,
-                flagging_callback=flagging.HuggingFaceDatasetSaver("test", "test"),
-            )
-            row_count = io.flagging_callback.flag(["test", "test"], "")
-            assert row_count == 1  # 2 rows written including header
-            row_count = io.flagging_callback.flag(["test", "test"])
-            assert row_count == 2  # 3 rows written including header
-            for _, _, filenames in os.walk(tmpdirname):
-                for f in filenames:
-                    fname = os.path.basename(f)
-                    assert fname in ["data.csv", "dataset_info.json"] or fname.endswith(
-                        ".lock"
-                    )
-
-    @patch(
-        "huggingface_hub.create_repo",
-        return_value=MagicMock(repo_id="gradio-tests/test"),
-    )
-    @patch("huggingface_hub.hf_hub_download")
-    @patch("huggingface_hub.upload_folder")
-    @patch("huggingface_hub.upload_file")
-    @patch("huggingface_hub.metadata_update")
-    def test_saver_flag_separate_dirs(
-        self, metadata_update, mock_upload_file, mock_upload, mock_download, mock_create
-    ):
-        with tempfile.TemporaryDirectory() as tmpdirname:
-            io = gr.Interface(
-                lambda x: x,
-                "text",
-                "text",
-                flagging_dir=tmpdirname,
-                flagging_callback=flagging.HuggingFaceDatasetSaver(
-                    "test", "test", separate_dirs=True
-                ),
-            )
-            row_count = io.flagging_callback.flag(["test", "test"], "")
-            assert row_count == 1  # 2 rows written including header
-            row_count = io.flagging_callback.flag(["test", "test"])
-            assert row_count == 2  # 3 rows written including header
-            for _, _, filenames in os.walk(tmpdirname):
-                for f in filenames:
-                    fname = os.path.basename(f)
-                    assert fname in [
-                        "metadata.jsonl",
-                        "dataset_info.json",
-                    ] or fname.endswith(".lock")
-
-
 class TestDisableFlagging:
     def test_flagging_no_permission_error_with_flagging_disabled(self):
         tmpdirname = tempfile.mkdtemp()
@@ -153,7 +75,7 @@ def test_flagging_no_permission_error_with_flagging_disabled(self):
             lambda x: x,
             "text",
             "text",
-            allow_flagging="never",
+            flagging_mode="never",
             flagging_dir=nonwritable_path,
         )
         io.launch(prevent_thread_lock=True)
@@ -162,23 +84,23 @@ def test_flagging_no_permission_error_with_flagging_disabled(self):
 
 class TestInterfaceSetsUpFlagging:
     @pytest.mark.parametrize(
-        "allow_flagging, called",
+        "flagging_mode, called",
         [
             ("manual", True),
             ("auto", True),
             ("never", False),
         ],
     )
-    def test_flag_method_init_called(self, allow_flagging, called):
+    def test_flag_method_init_called(self, flagging_mode, called):
         flagging.FlagMethod.__init__ = MagicMock()
         flagging.FlagMethod.__init__.return_value = None
-        gr.Interface(lambda x: x, "text", "text", allow_flagging=allow_flagging)
+        gr.Interface(lambda x: x, "text", "text", flagging_mode=flagging_mode)
         assert flagging.FlagMethod.__init__.called == called
 
     @pytest.mark.parametrize(
         "options, processed_options",
         [
-            (None, [("Flag", "")]),
+            (None, [("Flag", None)]),
             (["yes", "no"], [("Flag as yes", "yes"), ("Flag as no", "no")]),
             ([("abc", "de"), ("123", "45")], [("abc", "de"), ("123", "45")]),
         ],
diff --git a/test/test_helpers.py b/test/test_helpers.py
index a5ef7af24a1a1..ec27f37f2a757 100644
--- a/test/test_helpers.py
+++ b/test/test_helpers.py
@@ -1,8 +1,5 @@
 import asyncio
-import json
 import os
-import shutil
-import subprocess
 import tempfile
 import time
 from pathlib import Path
@@ -18,6 +15,7 @@
 
 import gradio as gr
 from gradio import helpers, utils
+from gradio.route_utils import API_PREFIX
 
 
 @patch("gradio.utils.get_cache_folder", return_value=Path(tempfile.mkdtemp()))
@@ -79,8 +77,8 @@ def test_examples_per_page(self, patched_cache_folder):
         examples = gr.Examples(["hello", "hi"], gr.Textbox(), examples_per_page=2)
         assert examples.dataset.get_config()["samples_per_page"] == 2
 
-    def test_no_preprocessing(self, patched_cache_folder):
-        with gr.Blocks():
+    def test_no_preprocessing(self, patched_cache_folder, connect):
+        with gr.Blocks() as demo:
             image = gr.Image()
             textbox = gr.Textbox()
 
@@ -93,12 +91,13 @@ def test_no_preprocessing(self, patched_cache_folder):
                 preprocess=False,
             )
 
-        prediction = examples.load_from_cache(0)
+        with connect(demo):
+            prediction = examples.load_from_cache(0)
         assert (
             client_utils.encode_file_to_base64(prediction[0]) == media_data.BASE64_IMAGE
         )
 
-    def test_no_postprocessing(self, patched_cache_folder):
+    def test_no_postprocessing(self, patched_cache_folder, connect):
         def im(x):
             return [
                 {
@@ -109,7 +108,7 @@ def im(x):
                 }
             ]
 
-        with gr.Blocks():
+        with gr.Blocks() as demo:
             text = gr.Textbox()
             gall = gr.Gallery()
 
@@ -122,17 +121,18 @@ def im(x):
                 postprocess=False,
             )
 
-        prediction = examples.load_from_cache(0)
+        with connect(demo):
+            prediction = examples.load_from_cache(0)
         file = prediction[0].root[0].image.path
         assert client_utils.encode_url_or_file_to_base64(
             file
         ) == client_utils.encode_url_or_file_to_base64("test/test_files/bus.png")
 
 
-def test_setting_cache_dir_env_variable(monkeypatch):
+def test_setting_cache_dir_env_variable(monkeypatch, connect):
     temp_dir = tempfile.mkdtemp()
     monkeypatch.setenv("GRADIO_EXAMPLES_CACHE", temp_dir)
-    with gr.Blocks():
+    with gr.Blocks() as demo:
         image = gr.Image()
         image2 = gr.Image()
 
@@ -143,7 +143,9 @@ def test_setting_cache_dir_env_variable(monkeypatch):
             fn=lambda x: x,
             cache_examples=True,
         )
-    prediction = examples.load_from_cache(0)
+
+    with connect(demo):
+        prediction = examples.load_from_cache(0)
     path_to_cached_file = Path(prediction[0].path)
     assert utils.is_in_or_equal(path_to_cached_file, temp_dir)
     monkeypatch.delenv("GRADIO_EXAMPLES_CACHE", raising=False)
@@ -230,7 +232,7 @@ def combine(a, b):
 
 @patch("gradio.utils.get_cache_folder", return_value=Path(tempfile.mkdtemp()))
 class TestProcessExamples:
-    def test_caching(self, patched_cache_folder):
+    def test_caching(self, patched_cache_folder, connect):
         io = gr.Interface(
             lambda x: f"Hello {x}",
             "text",
@@ -238,7 +240,8 @@ def test_caching(self, patched_cache_folder):
             examples=[["World"], ["Dunya"], ["Monde"]],
             cache_examples=True,
         )
-        prediction = io.examples_handler.load_from_cache(1)
+        with connect(io):
+            prediction = io.examples_handler.load_from_cache(1)
         assert prediction[0] == "Hello Dunya"
 
     def test_example_caching_relaunch(self, patched_cache_folder, connect):
@@ -274,7 +277,7 @@ def combine(a, b):
                 "hello Eve",
             )
 
-    def test_caching_image(self, patched_cache_folder):
+    def test_caching_image(self, patched_cache_folder, connect):
         io = gr.Interface(
             lambda x: x,
             "image",
@@ -282,10 +285,11 @@ def test_caching_image(self, patched_cache_folder):
             examples=[["test/test_files/bus.png"]],
             cache_examples=True,
         )
-        prediction = io.examples_handler.load_from_cache(0)
+        with connect(io):
+            prediction = io.examples_handler.load_from_cache(0)
         assert prediction[0].path.endswith(".webp")
 
-    def test_caching_audio(self, patched_cache_folder):
+    def test_caching_audio(self, patched_cache_folder, connect):
         io = gr.Interface(
             lambda x: x,
             "audio",
@@ -293,13 +297,14 @@ def test_caching_audio(self, patched_cache_folder):
             examples=[["test/test_files/audio_sample.wav"]],
             cache_examples=True,
         )
-        prediction = io.examples_handler.load_from_cache(0)
+        with connect(io):
+            prediction = io.examples_handler.load_from_cache(0)
         file = prediction[0].path
         assert client_utils.encode_url_or_file_to_base64(file).startswith(
             "data:audio/wav;base64,UklGRgA/"
         )
 
-    def test_caching_with_update(self, patched_cache_folder):
+    def test_caching_with_update(self, patched_cache_folder, connect):
         io = gr.Interface(
             lambda x: gr.update(visible=False),
             "text",
@@ -307,13 +312,14 @@ def test_caching_with_update(self, patched_cache_folder):
             examples=[["World"], ["Dunya"], ["Monde"]],
             cache_examples=True,
         )
-        prediction = io.examples_handler.load_from_cache(1)
+        with connect(io):
+            prediction = io.examples_handler.load_from_cache(1)
         assert prediction[0] == {
             "visible": False,
             "__type__": "update",
         }
 
-    def test_caching_with_mix_update(self, patched_cache_folder):
+    def test_caching_with_mix_update(self, patched_cache_folder, connect):
         io = gr.Interface(
             lambda x: [gr.update(lines=4, value="hello"), "test/test_files/bus.png"],
             "text",
@@ -321,14 +327,15 @@ def test_caching_with_mix_update(self, patched_cache_folder):
             examples=[["World"], ["Dunya"], ["Monde"]],
             cache_examples=True,
         )
-        prediction = io.examples_handler.load_from_cache(1)
+        with connect(io):
+            prediction = io.examples_handler.load_from_cache(1)
         assert prediction[0] == {
             "lines": 4,
             "value": "hello",
             "__type__": "update",
         }
 
-    def test_caching_with_dict(self, patched_cache_folder):
+    def test_caching_with_dict(self, patched_cache_folder, connect):
         text = gr.Textbox()
         out = gr.Label()
 
@@ -339,13 +346,14 @@ def test_caching_with_dict(self, patched_cache_folder):
             examples=["abc"],
             cache_examples=True,
         )
-        prediction = io.examples_handler.load_from_cache(0)
+        with connect(io):
+            prediction = io.examples_handler.load_from_cache(0)
         assert prediction == [
             {"lines": 4, "__type__": "update", "interactive": False},
             gr.Label.data_model(**{"label": "lion", "confidences": None}),
         ]
 
-    def test_caching_with_generators(self, patched_cache_folder):
+    def test_caching_with_generators(self, patched_cache_folder, connect):
         def test_generator(x):
             for y in range(len(x)):
                 yield "Your output: " + x[: y + 1]
@@ -357,10 +365,13 @@ def test_generator(x):
             examples=["abcdef"],
             cache_examples=True,
         )
-        prediction = io.examples_handler.load_from_cache(0)
+        with connect(io):
+            prediction = io.examples_handler.load_from_cache(0)
         assert prediction[0] == "Your output: abcdef"
 
-    def test_caching_with_generators_and_streamed_output(self, patched_cache_folder):
+    def test_caching_with_generators_and_streamed_output(
+        self, patched_cache_folder, connect
+    ):
         file_dir = Path(Path(__file__).parent, "test_files")
         audio = str(file_dir / "audio_sample.wav")
 
@@ -375,14 +386,15 @@ def test_generator(x):
             examples=[3],
             cache_examples=True,
         )
-        prediction = io.examples_handler.load_from_cache(0)
-        len_input_audio = len(AudioSegment.from_wav(audio))
-        len_output_audio = len(AudioSegment.from_wav(prediction[0].path))
+        with connect(io):
+            prediction = io.examples_handler.load_from_cache(0)
+        len_input_audio = len(AudioSegment.from_file(audio))
+        len_output_audio = len(AudioSegment.from_file(prediction[0].path))
         length_ratio = len_output_audio / len_input_audio
-        assert round(length_ratio, 1) == 3.0  # might not be exactly 3x
+        assert 3 <= round(length_ratio, 1) < 4  # might not be exactly 3x
         assert float(prediction[1]) == 10.0
 
-    def test_caching_with_async_generators(self, patched_cache_folder):
+    def test_caching_with_async_generators(self, patched_cache_folder, connect):
         async def test_generator(x):
             for y in range(len(x)):
                 yield "Your output: " + x[: y + 1]
@@ -394,10 +406,12 @@ async def test_generator(x):
             examples=["abcdef"],
             cache_examples=True,
         )
-        prediction = io.examples_handler.load_from_cache(0)
+        with connect(io):
+            prediction = io.examples_handler.load_from_cache(0)
         assert prediction[0] == "Your output: abcdef"
 
-    def test_raise_helpful_error_message_if_providing_partial_examples(
+    @pytest.mark.asyncio
+    async def test_raise_helpful_error_message_if_providing_partial_examples(
         self, patched_cache_folder, tmp_path
     ):
         def foo(a, b):
@@ -408,26 +422,28 @@ def foo(a, b):
             match="^Examples will be cached but not all input components have",
         ):
             with pytest.raises(Exception):
-                gr.Interface(
+                io = gr.Interface(
                     foo,
                     inputs=["text", "text"],
                     outputs=["text"],
                     examples=[["foo"], ["bar"]],
                     cache_examples=True,
                 )
+                await io.examples_handler._start_caching()
 
         with pytest.warns(
             UserWarning,
             match="^Examples will be cached but not all input components have",
         ):
             with pytest.raises(Exception):
-                gr.Interface(
+                io = gr.Interface(
                     foo,
                     inputs=["text", "text"],
                     outputs=["text"],
                     examples=[["foo", "bar"], ["bar", None]],
                     cache_examples=True,
                 )
+                await io.examples_handler._start_caching()
 
         def foo_no_exception(a, b=2):
             return a * b
@@ -448,17 +464,20 @@ def many_missing(a, b, c):
             match="^Examples will be cached but not all input components have",
         ):
             with pytest.raises(Exception):
-                gr.Interface(
+                io = gr.Interface(
                     many_missing,
                     inputs=["text", "number", "number"],
                     outputs=["text"],
                     examples=[["foo", None, None], ["bar", 2, 3]],
                     cache_examples=True,
                 )
+                await io.examples_handler._start_caching()
 
-    def test_caching_with_batch(self, patched_cache_folder):
+    def test_caching_with_batch(self, patched_cache_folder, connect):
         def trim_words(words, lens):
-            trimmed_words = [word[:length] for word, length in zip(words, lens)]
+            trimmed_words = [
+                word[:length] for word, length in zip(words, lens, strict=False)
+            ]
             return [trimmed_words]
 
         io = gr.Interface(
@@ -470,12 +489,15 @@ def trim_words(words, lens):
             examples=[["hello", 3], ["hi", 4]],
             cache_examples=True,
         )
-        prediction = io.examples_handler.load_from_cache(0)
+        with connect(io):
+            prediction = io.examples_handler.load_from_cache(0)
         assert prediction == ["hel"]
 
-    def test_caching_with_batch_multiple_outputs(self, patched_cache_folder):
+    def test_caching_with_batch_multiple_outputs(self, patched_cache_folder, connect):
         def trim_words(words, lens):
-            trimmed_words = [word[:length] for word, length in zip(words, lens)]
+            trimmed_words = [
+                word[:length] for word, length in zip(words, lens, strict=False)
+            ]
             return trimmed_words, lens
 
         io = gr.Interface(
@@ -487,14 +509,15 @@ def trim_words(words, lens):
             examples=[["hello", 3], ["hi", 4]],
             cache_examples=True,
         )
-        prediction = io.examples_handler.load_from_cache(0)
+        with connect(io):
+            prediction = io.examples_handler.load_from_cache(0)
         assert prediction == ["hel", "3"]
 
-    def test_caching_with_non_io_component(self, patched_cache_folder):
+    def test_caching_with_non_io_component(self, patched_cache_folder, connect):
         def predict(name):
             return name, gr.update(visible=True)
 
-        with gr.Blocks():
+        with gr.Blocks() as demo:
             t1 = gr.Textbox()
             with gr.Column(visible=False) as c:
                 t2 = gr.Textbox()
@@ -507,7 +530,8 @@ def predict(name):
                 cache_examples=True,
             )
 
-        prediction = examples.load_from_cache(0)
+        with connect(demo):
+            prediction = examples.load_from_cache(0)
         assert prediction == ["John", {"visible": True, "__type__": "update"}]
 
     def test_end_to_end(self, patched_cache_folder):
@@ -528,7 +552,7 @@ def concatenate(str1, str2):
         app, _, _ = demo.launch(prevent_thread_lock=True)
         client = TestClient(app)
 
-        response = client.post("/api/load_example/", json={"data": [0]})
+        response = client.post(f"{API_PREFIX}/api/load_example/", json={"data": [0]})
         assert response.json()["data"] == [
             {
                 "lines": 1,
@@ -545,10 +569,12 @@ def concatenate(str1, str2):
                 "visible": True,
                 "value": "Hello,",
                 "type": "text",
+                "stop_btn": False,
+                "submit_btn": False,
             }
         ]
 
-        response = client.post("/api/load_example/", json={"data": [1]})
+        response = client.post(f"{API_PREFIX}/api/load_example/", json={"data": [1]})
         assert response.json()["data"] == [
             {
                 "lines": 1,
@@ -565,6 +591,8 @@ def concatenate(str1, str2):
                 "visible": True,
                 "value": "Michael",
                 "type": "text",
+                "stop_btn": False,
+                "submit_btn": False,
             }
         ]
 
@@ -589,10 +617,10 @@ def concatenate(str1, str2):
         app, _, _ = demo.launch(prevent_thread_lock=True)
         client = TestClient(app)
 
-        response = client.post("/api/load_example/", json={"data": [0]})
+        response = client.post(f"{API_PREFIX}/api/load_example/", json={"data": [0]})
         assert response.json()["data"] == ["Hello,", "World", "Hello, World"]
 
-        response = client.post("/api/load_example/", json={"data": [1]})
+        response = client.post(f"{API_PREFIX}/api/load_example/", json={"data": [1]})
         assert response.json()["data"] == ["Michael", "Jordan", "Michael Jordan"]
 
     def test_end_to_end_lazy_cache_examples(self, patched_cache_folder):
@@ -612,25 +640,26 @@ def image_identity(image, string):
                 inputs=[i1, t],
                 outputs=[i2],
                 fn=image_identity,
-                cache_examples="lazy",
+                cache_examples=True,
+                cache_mode="lazy",
                 api_name="load_example",
             )
 
         app, _, _ = demo.launch(prevent_thread_lock=True)
         client = TestClient(app)
 
-        response = client.post("/api/load_example/", json={"data": [0]})
+        response = client.post(f"{API_PREFIX}/api/load_example/", json={"data": [0]})
         data = response.json()["data"]
         assert data[0]["value"]["path"].endswith("cheetah1.jpg")
         assert data[1]["value"] == "cheetah"
 
-        response = client.post("/api/load_example/", json={"data": [1]})
+        response = client.post(f"{API_PREFIX}/api/load_example/", json={"data": [1]})
         data = response.json()["data"]
         assert data[0]["value"]["path"].endswith("bus.png")
         assert data[1]["value"] == "bus"
 
 
-def test_multiple_file_flagging(tmp_path):
+def test_multiple_file_flagging(tmp_path, connect):
     with patch("gradio.utils.get_cache_folder", return_value=tmp_path):
         io = gr.Interface(
             fn=lambda *x: list(x),
@@ -642,13 +671,14 @@ def test_multiple_file_flagging(tmp_path):
             examples=[["test/test_files/cheetah1.jpg", "test/test_files/bus.png"]],
             cache_examples=True,
         )
-        prediction = io.examples_handler.load_from_cache(0)
+        with connect(io):
+            prediction = io.examples_handler.load_from_cache(0)
 
         assert len(prediction[0].root) == 2
         assert all(isinstance(d, gr.FileData) for d in prediction[0].root)
 
 
-def test_examples_keep_all_suffixes(tmp_path):
+def test_examples_keep_all_suffixes(tmp_path, connect):
     with patch("gradio.utils.get_cache_folder", return_value=Path(tempfile.mkdtemp())):
         file_1 = tmp_path / "foo.bar.txt"
         file_1.write_text("file 1")
@@ -663,7 +693,8 @@ def test_examples_keep_all_suffixes(tmp_path):
             examples=[[str(file_1)], [str(file_2)]],
             cache_examples=True,
         )
-        prediction = io.examples_handler.load_from_cache(0)
+        with connect(io):
+            prediction = io.examples_handler.load_from_cache(0)
         assert Path(prediction[0].path).read_text() == "file 1"
         assert prediction[0].orig_name == "foo.bar.txt"
         assert prediction[0].path.endswith("foo.bar.txt")
@@ -673,56 +704,6 @@ def test_examples_keep_all_suffixes(tmp_path):
         assert prediction[0].path.endswith("foo.bar.txt")
 
 
-def test_make_waveform_with_spaces_in_filename():
-    with tempfile.TemporaryDirectory() as tmpdirname:
-        audio = os.path.join(tmpdirname, "test audio.wav")
-        shutil.copy("test/test_files/audio_sample.wav", audio)
-        waveform = gr.make_waveform(audio)
-        assert waveform.endswith(".mp4")
-
-        try:
-            command = [
-                "ffprobe",
-                "-v",
-                "error",
-                "-select_streams",
-                "v:0",
-                "-show_entries",
-                "stream=width,height",
-                "-of",
-                "json",
-                waveform,
-            ]
-
-            result = subprocess.run(command, capture_output=True, text=True, check=True)
-            output = result.stdout
-            data = json.loads(output)
-
-            width = data["streams"][0]["width"]
-            height = data["streams"][0]["height"]
-            assert width == 1000
-            assert height == 400
-
-        except subprocess.CalledProcessError as e:
-            print("Error retrieving resolution of output waveform video:", e)
-
-
-def test_make_waveform_raises_if_ffmpeg_fails(tmp_path, monkeypatch):
-    """
-    Test that make_waveform raises an exception if ffmpeg fails,
-    instead of returning a path to a non-existent or empty file.
-    """
-    audio = tmp_path / "test audio.wav"
-    shutil.copy("test/test_files/audio_sample.wav", audio)
-
-    def _failing_ffmpeg(*args, **kwargs):
-        raise subprocess.CalledProcessError(1, "ffmpeg")
-
-    monkeypatch.setattr(subprocess, "call", _failing_ffmpeg)
-    with pytest.raises(Exception):
-        gr.make_waveform(str(audio))
-
-
 class TestProgressBar:
     @pytest.mark.asyncio
     async def test_progress_bar(self):
diff --git a/test/test_networking.py b/test/test_networking.py
index c82bc7831af89..20231bfaa0830 100644
--- a/test/test_networking.py
+++ b/test/test_networking.py
@@ -5,6 +5,7 @@
 from fastapi.testclient import TestClient
 
 from gradio import Interface, networking
+from gradio.route_utils import API_PREFIX
 
 os.environ["GRADIO_ANALYTICS_ENABLED"] = "False"
 
@@ -14,7 +15,9 @@ def test_processing_error(self):
         io = Interface(lambda x: 1 / x, "number", "number")
         app, _, _ = io.launch(show_error=True, prevent_thread_lock=True)
         client = TestClient(app)
-        response = client.post("/api/predict/", json={"data": [0], "fn_index": 0})
+        response = client.post(
+            f"{API_PREFIX}/api/predict/", json={"data": [0], "fn_index": 0}
+        )
         assert response.status_code == 500
         assert "error" in response.json()
         io.close()
@@ -23,7 +26,7 @@ def test_validation_error(self):
         io = Interface(lambda x: 1 / x, "number", "number")
         app, _, _ = io.launch(show_error=True, prevent_thread_lock=True)
         client = TestClient(app)
-        response = client.post("/api/predict/", json={"fn_index": [0]})
+        response = client.post(f"{API_PREFIX}/api/predict/", json={"fn_index": [0]})
         assert response.status_code == 422
         io.close()
 
@@ -43,9 +46,9 @@ def test_start_server_app_kwargs():
         show_error=True,
         prevent_thread_lock=True,
         app_kwargs={
-            "docs_url": "/docs",
+            "docs_url": f"{API_PREFIX}/docs",
         },
     )
     client = TestClient(app)
-    assert client.get("/docs").status_code == 200
+    assert client.get(f"{API_PREFIX}/docs").status_code == 200
     io.close()
diff --git a/test/test_processing_utils.py b/test/test_processing_utils.py
index 4b159bcde07d4..7fd62e4b854ba 100644
--- a/test/test_processing_utils.py
+++ b/test/test_processing_utils.py
@@ -11,6 +11,7 @@
 from PIL import Image, ImageCms
 
 from gradio import components, data_classes, processing_utils, utils
+from gradio.route_utils import API_PREFIX
 
 
 class TestTempFileManagement:
@@ -76,7 +77,7 @@ def test_save_b64_to_cache(self, gradio_temp_dir):
         assert len([f for f in gradio_temp_dir.glob("**/*") if f.is_file()]) == 2
 
     @pytest.mark.flaky
-    def test_save_url_to_cache(self, gradio_temp_dir):
+    def test_ssrf_protected_download(self, gradio_temp_dir):
         url1 = "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/test_data/test_image.png"
         url2 = "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/test_data/cheetah1.jpg"
 
@@ -96,7 +97,7 @@ def test_save_url_to_cache(self, gradio_temp_dir):
         assert len([f for f in gradio_temp_dir.glob("**/*") if f.is_file()]) == 2
 
     @pytest.mark.flaky
-    def test_save_url_to_cache_with_redirect(self, gradio_temp_dir):
+    def test_ssrf_protected_download_with_redirect(self, gradio_temp_dir):
         url = "https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/bread_small.png"
         processing_utils.save_url_to_cache(url, cache_dir=gradio_temp_dir)
         assert len([f for f in gradio_temp_dir.glob("**/*") if f.is_file()]) == 1
@@ -275,7 +276,7 @@ def test_video_has_playable_codecs(self, test_file_dir):
         )
 
     def raise_ffmpy_runtime_exception(*args, **kwargs):
-        raise ffmpy.FFRuntimeError("", "", "", "")
+        raise ffmpy.FFRuntimeError("", "", "", "")  # type: ignore
 
     @pytest.mark.parametrize(
         "exception_to_raise", [raise_ffmpy_runtime_exception, KeyError(), IndexError()]
@@ -283,11 +284,12 @@ def raise_ffmpy_runtime_exception(*args, **kwargs):
     def test_video_has_playable_codecs_catches_exceptions(
         self, exception_to_raise, test_file_dir
     ):
-        with patch(
-            "ffmpy.FFprobe.run", side_effect=exception_to_raise
-        ), tempfile.NamedTemporaryFile(
-            suffix="out.avi", delete=False
-        ) as tmp_not_playable_vid:
+        with (
+            patch("ffmpy.FFprobe.run", side_effect=exception_to_raise),
+            tempfile.NamedTemporaryFile(
+                suffix="out.avi", delete=False
+            ) as tmp_not_playable_vid,
+        ):
             shutil.copy(
                 str(test_file_dir / "bad_video_sample.mp4"),
                 tmp_not_playable_vid.name,
@@ -330,7 +332,7 @@ def test_add_root_url():
     data = {
         "file": {
             "path": "path",
-            "url": "/file=path",
+            "url": f"{API_PREFIX}/file=path",
             "meta": {"_type": "gradio.FileData"},
         },
         "file2": {
@@ -343,7 +345,7 @@ def test_add_root_url():
     expected = {
         "file": {
             "path": "path",
-            "url": f"{root_url}/file=path",
+            "url": f"{root_url}{API_PREFIX}/file=path",
             "meta": {"_type": "gradio.FileData"},
         },
         "file2": {
@@ -357,7 +359,7 @@ def test_add_root_url():
     new_expected = {
         "file": {
             "path": "path",
-            "url": f"{new_root_url}/file=path",
+            "url": f"{new_root_url}{API_PREFIX}/file=path",
             "meta": {"_type": "gradio.FileData"},
         },
         "file2": {
@@ -383,7 +385,7 @@ async def test_json_data_not_moved_to_cache():
         root={
             "file": {
                 "path": "path",
-                "url": "/file=path",
+                "url": f"{API_PREFIX}/file=path",
                 "meta": {"_type": "gradio.FileData"},
             }
         }
@@ -404,3 +406,70 @@ async def test_json_data_not_moved_to_cache():
         )
         == data
     )
+
+
+@pytest.mark.asyncio
+@pytest.mark.parametrize(
+    "url",
+    [
+        "https://localhost",
+        "http://127.0.0.1/file/a/b/c",
+        "http://[::1]",
+        "https://192.168.0.1",
+        "http://10.0.0.1?q=a",
+        "http://192.168.1.250.nip.io",
+    ],
+)
+async def test_local_urls_fail(url):
+    with pytest.raises(ValueError, match="failed validation"):
+        await processing_utils.async_validate_url(url)
+
+
+@pytest.mark.asyncio
+@pytest.mark.parametrize(
+    "url",
+    [
+        "https://google.com",
+        "https://8.8.8.8/",
+        "http://93.184.215.14.nip.io/",
+        "https://huggingface.co/datasets/dylanebert/3dgs/resolve/main/luigi/luigi.ply",
+    ],
+)
+async def test_public_urls_pass(url):
+    await processing_utils.async_validate_url(url)
+
+
+def test_public_request_pass():
+    tempdir = tempfile.TemporaryDirectory()
+    file = processing_utils.ssrf_protected_download(
+        "https://en.wikipedia.org/static/images/icons/wikipedia.png", tempdir.name
+    )
+    assert os.path.exists(file)
+    assert os.path.getsize(file) == 13444
+
+
+@pytest.mark.asyncio
+async def test_async_public_request_pass():
+    tempdir = tempfile.TemporaryDirectory()
+    file = await processing_utils.async_ssrf_protected_download(
+        "https://en.wikipedia.org/static/images/icons/wikipedia.png", tempdir.name
+    )
+    assert os.path.exists(file)
+    assert os.path.getsize(file) == 13444
+
+
+def test_private_request_fail():
+    with pytest.raises(ValueError, match="failed validation"):
+        tempdir = tempfile.TemporaryDirectory()
+        processing_utils.ssrf_protected_download(
+            "http://192.168.1.250.nip.io/image.png", tempdir.name
+        )
+
+
+@pytest.mark.asyncio
+async def test_async_private_request_fail():
+    with pytest.raises(ValueError, match="failed validation"):
+        tempdir = tempfile.TemporaryDirectory()
+        await processing_utils.async_ssrf_protected_download(
+            "http://192.168.1.250.nip.io/image.png", tempdir.name
+        )
diff --git a/test/test_queueing.py b/test/test_queueing.py
index 3554e9022bbe9..3002cfff5f628 100644
--- a/test/test_queueing.py
+++ b/test/test_queueing.py
@@ -6,6 +6,7 @@
 from fastapi.testclient import TestClient
 
 import gradio as gr
+from gradio.route_utils import API_PREFIX
 
 
 class TestQueueing:
@@ -45,14 +46,14 @@ def greet(x):
 
         sizes = []
         while job4.status().code.value != "FINISHED":
-            queue_status = test_client.get("/queue/status").json()
+            queue_status = test_client.get(f"{API_PREFIX}/queue/status").json()
             queue_size = queue_status["queue_size"]
             if len(sizes) == 0 or queue_size != sizes[-1]:
                 sizes.append(queue_size)
             time.sleep(0.01)
 
         time.sleep(0.1)
-        queue_status = test_client.get("/queue/status").json()
+        queue_status = test_client.get(f"{API_PREFIX}/queue/status").json()
         queue_size = queue_status["queue_size"]
         if queue_size != sizes[-1]:
             sizes.append(queue_size)
diff --git a/test/test_reload.py b/test/test_reload.py
index 6bd65ae09a446..032e7a0ea52c3 100644
--- a/test/test_reload.py
+++ b/test/test_reload.py
@@ -1,6 +1,5 @@
 import dataclasses
 from pathlib import Path
-from typing import List
 
 import pytest
 
@@ -21,7 +20,7 @@ def build_demo():
 class Config:
     module_name: str
     path: Path
-    watch_dirs: List[str]
+    watch_dirs: list[str]
     demo_name: str
 
 
diff --git a/test/test_routes.py b/test/test_routes.py
index 3aaa7eb70d6b1..d085405e193ec 100644
--- a/test/test_routes.py
+++ b/test/test_routes.py
@@ -8,10 +8,11 @@
 import time
 from contextlib import asynccontextmanager, closing
 from pathlib import Path
-from typing import Dict
+from threading import Thread
 from unittest.mock import patch
 
 import gradio_client as grc
+import httpx
 import numpy as np
 import pandas as pd
 import pytest
@@ -33,6 +34,7 @@
     wasm_utils,
 )
 from gradio.route_utils import (
+    API_PREFIX,
     FnIndexInferError,
     compare_passwords_securely,
     get_root_url,
@@ -72,7 +74,7 @@ def test_favicon_route(self, test_client):
 
     def test_upload_path(self, test_client):
         with open("test/test_files/alphabet.txt", "rb") as f:
-            response = test_client.post("/upload", files={"files": f})
+            response = test_client.post(f"{API_PREFIX}/upload", files={"files": f})
         assert response.status_code == 200
         file = response.json()[0]
         assert "alphabet" in file
@@ -85,7 +87,7 @@ def test_custom_upload_path(self, gradio_temp_dir):
         app, _, _ = io.launch(prevent_thread_lock=True)
         test_client = TestClient(app)
         with open("test/test_files/alphabet.txt", "rb") as f:
-            response = test_client.post("/upload", files={"files": f})
+            response = test_client.post(f"{API_PREFIX}/upload", files={"files": f})
         assert response.status_code == 200
         file = response.json()[0]
         assert "alphabet" in file
@@ -96,7 +98,7 @@ def test_custom_upload_path(self, gradio_temp_dir):
 
     def test_predict_route(self, test_client):
         response = test_client.post(
-            "/api/predict/", json={"data": ["test"], "fn_index": 0}
+            f"{API_PREFIX}/api/predict/", json={"data": ["test"], "fn_index": 0}
         )
         assert response.status_code == 200
         output = dict(response.json())
@@ -111,12 +113,12 @@ def test_named_predict_route(self):
 
         app, _, _ = demo.launch(prevent_thread_lock=True)
         client = TestClient(app)
-        response = client.post("/api/p/", json={"data": ["test"]})
+        response = client.post(f"{API_PREFIX}/api/p/", json={"data": ["test"]})
         assert response.status_code == 200
         output = dict(response.json())
         assert output["data"] == ["test1"]
 
-        response = client.post("/api/q/", json={"data": ["test"]})
+        response = client.post(f"{API_PREFIX}/api/q/", json={"data": ["test"]})
         assert response.status_code == 200
         output = dict(response.json())
         assert output["data"] == ["test2"]
@@ -130,12 +132,12 @@ def test_same_named_predict_route(self):
 
         app, _, _ = demo.launch(prevent_thread_lock=True)
         client = TestClient(app)
-        response = client.post("/api/p/", json={"data": ["test"]})
+        response = client.post(f"{API_PREFIX}/api/p/", json={"data": ["test"]})
         assert response.status_code == 200
         output = dict(response.json())
         assert output["data"] == ["test0"]
 
-        response = client.post("/api/p_1/", json={"data": ["test"]})
+        response = client.post(f"{API_PREFIX}/api/p_1/", json={"data": ["test"]})
         assert response.status_code == 200
         output = dict(response.json())
         assert output["data"] == ["test1"]
@@ -150,23 +152,25 @@ def test_multiple_renamed(self):
 
         app, _, _ = demo.launch(prevent_thread_lock=True)
         client = TestClient(app)
-        response = client.post("/api/p/", json={"data": ["test"]})
+        response = client.post(f"{API_PREFIX}/api/p/", json={"data": ["test"]})
         assert response.status_code == 200
         output = dict(response.json())
         assert output["data"] == ["test0"]
 
-        response = client.post("/api/p_1/", json={"data": ["test"]})
+        response = client.post(f"{API_PREFIX}/api/p_1/", json={"data": ["test"]})
         assert response.status_code == 200
         output = dict(response.json())
         assert output["data"] == ["test1"]
 
-        response = client.post("/api/p_1_1/", json={"data": ["test"]})
+        response = client.post(f"{API_PREFIX}/api/p_1_1/", json={"data": ["test"]})
         assert response.status_code == 200
         output = dict(response.json())
         assert output["data"] == ["test2"]
 
     def test_predict_route_without_fn_index(self, test_client):
-        response = test_client.post("/api/predict/", json={"data": ["test"]})
+        response = test_client.post(
+            f"{API_PREFIX}/api/predict/", json={"data": ["test"]}
+        )
         assert response.status_code == 200
         output = dict(response.json())
         assert output["data"] == ["testtest"]
@@ -186,14 +190,15 @@ def batch_fn(x):
         demo.queue(api_open=True)
         app, _, _ = demo.launch(prevent_thread_lock=True)
         client = TestClient(app)
-        response = client.post("/api/pred/", json={"data": ["test"]})
+        response = client.post(f"{API_PREFIX}/api/pred/", json={"data": ["test"]})
         output = dict(response.json())
         assert output["data"] == ["Hello test"]
 
         app, _, _ = demo.launch(prevent_thread_lock=True)
         client = TestClient(app)
         response = client.post(
-            "/api/pred/", json={"data": [["test", "test2"]], "batched": True}
+            f"{API_PREFIX}/api/pred/",
+            json={"data": [["test", "test2"]], "batched": True},
         )
         output = dict(response.json())
         assert output["data"] == [["Hello test", "Hello test2"]]
@@ -209,13 +214,13 @@ def predict(input, history):
         app, _, _ = io.launch(prevent_thread_lock=True)
         client = TestClient(app)
         response = client.post(
-            "/api/predict/",
+            f"{API_PREFIX}/api/predict/",
             json={"data": ["test", None], "fn_index": 0, "session_hash": "_"},
         )
         output = dict(response.json())
         assert output["data"] == ["test", None]
         response = client.post(
-            "/api/predict/",
+            f"{API_PREFIX}/api/predict/",
             json={"data": ["test", None], "fn_index": 0, "session_hash": "_"},
         )
         output = dict(response.json())
@@ -229,7 +234,7 @@ def test_get_allowed_paths(self):
         io = gr.Interface(lambda s: s.name, gr.File(), gr.File())
         app, _, _ = io.launch(prevent_thread_lock=True)
         client = TestClient(app)
-        file_response = client.get(f"/file={allowed_file.name}")
+        file_response = client.get(f"{API_PREFIX}/file={allowed_file.name}")
         assert file_response.status_code == 403
         io.close()
 
@@ -239,7 +244,7 @@ def test_get_allowed_paths(self):
             allowed_paths=[os.path.dirname(allowed_file.name)],
         )
         client = TestClient(app)
-        file_response = client.get(f"/file={allowed_file.name}")
+        file_response = client.get(f"{API_PREFIX}/file={allowed_file.name}")
         assert file_response.status_code == 200
         assert len(file_response.text) == len(media_data.BASE64_IMAGE)
         io.close()
@@ -250,7 +255,7 @@ def test_get_allowed_paths(self):
             allowed_paths=[os.path.abspath(allowed_file.name)],
         )
         client = TestClient(app)
-        file_response = client.get(f"/file={allowed_file.name}")
+        file_response = client.get(f"{API_PREFIX}/file={allowed_file.name}")
         assert file_response.status_code == 200
         assert len(file_response.text) == len(media_data.BASE64_IMAGE)
         io.close()
@@ -268,17 +273,29 @@ def test_response_attachment_format(self):
         app, _, _ = io.launch(
             prevent_thread_lock=True,
             allowed_paths=[
-                os.path.dirname(image_file.name),
-                os.path.dirname(html_file.name),
+                image_file.name,
+                html_file.name,
             ],
         )
+
+        html_file2 = tempfile.NamedTemporaryFile(
+            mode="w", delete=False, suffix=".html", dir=app.uploaded_file_dir
+        )
+        html_file2.write("<html>Hello, world!</html>")
+        html_file2.flush()
+        html_file2_name = str(Path(app.uploaded_file_dir) / html_file2.name)
+
         client = TestClient(app)
 
-        file_response = client.get(f"/file={image_file.name}")
+        file_response = client.get(f"{API_PREFIX}/file={image_file.name}")
         assert file_response.headers["Content-Type"] == "image/png"
         assert "inline" in file_response.headers["Content-Disposition"]
 
-        file_response = client.get(f"/file={html_file.name}")
+        file_response = client.get(f"{API_PREFIX}/file={html_file.name}")
+        assert file_response.headers["Content-Type"] == "text/html; charset=utf-8"
+        assert "inline" in file_response.headers["Content-Disposition"]
+
+        file_response = client.get(f"{API_PREFIX}/file={html_file2_name}")
         assert file_response.headers["Content-Type"] == "application/octet-stream"
         assert "attachment" in file_response.headers["Content-Disposition"]
 
@@ -290,7 +307,7 @@ def test_allowed_and_blocked_paths(self):
                 allowed_paths=[os.path.dirname(tmp_file.name)],
             )
             client = TestClient(app)
-            file_response = client.get(f"/file={tmp_file.name}")
+            file_response = client.get(f"{API_PREFIX}/file={tmp_file.name}")
             assert file_response.status_code == 200
         io.close()
         os.remove(tmp_file.name)
@@ -303,7 +320,7 @@ def test_allowed_and_blocked_paths(self):
                 blocked_paths=[os.path.dirname(tmp_file.name)],
             )
             client = TestClient(app)
-            file_response = client.get(f"/file={tmp_file.name}")
+            file_response = client.get(f"{API_PREFIX}/file={tmp_file.name}")
             assert file_response.status_code == 403
         io.close()
         os.remove(tmp_file.name)
@@ -314,9 +331,9 @@ def test_get_file_created_by_app(self, test_client):
         )
         client = TestClient(app)
         with open("test/test_files/alphabet.txt", "rb") as f:
-            file_response = test_client.post("/upload", files={"files": f})
+            file_response = test_client.post(f"{API_PREFIX}/upload", files={"files": f})
         response = client.post(
-            "/api/predict/",
+            f"{API_PREFIX}/api/predict/",
             json={
                 "data": [
                     {
@@ -329,20 +346,22 @@ def test_get_file_created_by_app(self, test_client):
             },
         ).json()
         created_file = response["data"][0]["path"]
-        file_response = client.get(f"/file={created_file}")
+        file_response = client.get(f"{API_PREFIX}/file={created_file}")
         assert file_response.is_success
 
-        backwards_compatible_file_response = client.get(f"/file/{created_file}")
+        backwards_compatible_file_response = client.get(
+            f"{API_PREFIX}/file/{created_file}"
+        )
         assert backwards_compatible_file_response.is_success
 
         file_response_with_full_range = client.get(
-            f"/file={created_file}", headers={"Range": "bytes=0-"}
+            f"{API_PREFIX}/file={created_file}", headers={"Range": "bytes=0-"}
         )
         assert file_response_with_full_range.is_success
         assert file_response.text == file_response_with_full_range.text
 
         file_response_with_partial_range = client.get(
-            f"/file={created_file}", headers={"Range": "bytes=0-10"}
+            f"{API_PREFIX}/file={created_file}", headers={"Range": "bytes=0-10"}
         )
         assert file_response_with_partial_range.is_success
         assert len(file_response_with_partial_range.text) == 11
@@ -369,7 +388,10 @@ def test_mount_gradio_app_with_app_kwargs(self):
         app = FastAPI()
         demo = gr.Interface(lambda s: f"You said {s}!", "textbox", "textbox").queue()
         app = gr.mount_gradio_app(
-            app, demo, path="/echo", app_kwargs={"docs_url": "/docs-custom"}
+            app,
+            demo,
+            path="/echo",
+            app_kwargs={"docs_url": "/docs-custom"},
         )
         # Use context manager to trigger start up events
         with TestClient(app) as client:
@@ -381,15 +403,15 @@ def test_mount_gradio_app_with_auth_and_params(self):
         app = gr.mount_gradio_app(
             app,
             demo,
-            path="/echo",
+            path=f"{API_PREFIX}/echo",
             auth=("a", "b"),
-            root_path="/echo",
+            root_path=f"{API_PREFIX}/echo",
             allowed_paths=["test/test_files/bus.png"],
         )
         # Use context manager to trigger start up events
         with TestClient(app) as client:
-            assert client.get("/echo/config").status_code == 401
-        assert demo.root_path == "/echo"
+            assert client.get(f"{API_PREFIX}/echo/config").status_code == 401
+        assert demo.root_path == f"{API_PREFIX}/echo"
         assert demo.allowed_paths == ["test/test_files/bus.png"]
         assert demo.show_error
 
@@ -465,31 +487,33 @@ def get_user(request: Request):
             assert not client.get("/demo").is_success
 
     def test_static_file_missing(self, test_client):
-        response = test_client.get(r"/static/not-here.js")
+        response = test_client.get(rf"{API_PREFIX}/static/not-here.js")
         assert response.status_code == 404
 
     def test_asset_file_missing(self, test_client):
-        response = test_client.get(r"/assets/not-here.js")
+        response = test_client.get(rf"{API_PREFIX}/assets/not-here.js")
         assert response.status_code == 404
 
     def test_cannot_access_files_in_working_directory(self, test_client):
-        response = test_client.get(r"/file=not-here.js")
+        response = test_client.get(rf"{API_PREFIX}/file=not-here.js")
         assert response.status_code == 403
-        response = test_client.get(r"/file=subdir/.env")
+        response = test_client.get(rf"{API_PREFIX}/file=subdir/.env")
         assert response.status_code == 403
 
     def test_cannot_access_directories_in_working_directory(self, test_client):
-        response = test_client.get(r"/file=gradio")
+        response = test_client.get(rf"{API_PREFIX}/file=gradio")
         assert response.status_code == 403
 
     def test_block_protocols_that_expose_windows_credentials(self, test_client):
-        response = test_client.get(r"/file=//11.0.225.200/share")
+        response = test_client.get(rf"{API_PREFIX}/file=//11.0.225.200/share")
         assert response.status_code == 403
 
     def test_do_not_expose_existence_of_files_outside_working_directory(
         self, test_client
     ):
-        response = test_client.get(r"/file=../fake-file-that-does-not-exist.js")
+        response = test_client.get(
+            rf"{API_PREFIX}/file=../fake-file-that-does-not-exist.js"
+        )
         assert response.status_code == 403  # not a 404
 
     def test_proxy_route_is_restricted_to_load_urls(self):
@@ -538,7 +562,7 @@ def test_can_get_config_that_includes_non_pickle_able_objects(self):
         response = client.get("/config/")
         assert response.is_success
 
-    def test_cors_restrictions(self):
+    def test_default_cors_restrictions(self):
         io = gr.Interface(lambda s: s.name, gr.File(), gr.File())
         app, _, _ = io.launch(prevent_thread_lock=True)
         client = TestClient(app)
@@ -546,14 +570,43 @@ def test_cors_restrictions(self):
             "host": "localhost:7860",
             "origin": "https://example.com",
         }
-        file_response = client.get("/config", headers=custom_headers)
+        file_response = client.get(f"{API_PREFIX}/config", headers=custom_headers)
+        assert "access-control-allow-origin" not in file_response.headers
+
+        custom_headers = {
+            "host": "localhost:7860",
+            "origin": "null",
+        }
+        file_response = client.get(f"{API_PREFIX}/config", headers=custom_headers)
         assert "access-control-allow-origin" not in file_response.headers
+
         custom_headers = {
             "host": "localhost:7860",
             "origin": "127.0.0.1",
         }
-        file_response = client.get("/config", headers=custom_headers)
+        file_response = client.get(f"{API_PREFIX}/config", headers=custom_headers)
         assert file_response.headers["access-control-allow-origin"] == "127.0.0.1"
+
+        io.close()
+
+    def test_loose_cors_restrictions(self):
+        io = gr.Interface(lambda s: s.name, gr.File(), gr.File())
+        app, _, _ = io.launch(prevent_thread_lock=True, strict_cors=False)
+        client = TestClient(app)
+        custom_headers = {
+            "host": "localhost:7860",
+            "origin": "https://example.com",
+        }
+        file_response = client.get(f"{API_PREFIX}/config", headers=custom_headers)
+        assert "access-control-allow-origin" not in file_response.headers
+
+        custom_headers = {
+            "host": "localhost:7860",
+            "origin": "null",
+        }
+        file_response = client.get(f"{API_PREFIX}/config", headers=custom_headers)
+        assert file_response.headers["access-control-allow-origin"] == "null"
+
         io.close()
 
     def test_delete_cache(self, connect, gradio_temp_dir, capsys):
@@ -607,7 +660,7 @@ def test_monitoring_link(self):
 
         app, _, _ = demo.launch(prevent_thread_lock=True)
         client = TestClient(app)
-        response = client.get("/monitoring")
+        response = client.get(f"{API_PREFIX}/monitoring")
         assert response.status_code == 200
 
     def test_monitoring_link_disabled(self):
@@ -618,7 +671,7 @@ def test_monitoring_link_disabled(self):
 
         app, _, _ = demo.launch(prevent_thread_lock=True, enable_monitoring=False)
         client = TestClient(app)
-        response = client.get("/monitoring")
+        response = client.get(f"{API_PREFIX}/monitoring")
         assert response.status_code == 403
 
 
@@ -673,7 +726,7 @@ def test_logout(self):
         )
 
         response = client.post(
-            "/run/predict",
+            f"{API_PREFIX}/run/predict",
             json={"data": ["test"]},
         )
         assert response.status_code == 200
@@ -681,10 +734,10 @@ def test_logout(self):
         response = client.get("/logout")
 
         response = client.post(
-            "/run/predict",
+            "{API_PREFIX}/run/predict",
             json={"data": ["test"]},
         )
-        assert response.status_code == 401
+        assert response.status_code == 404
 
     def test_monitoring_route(self):
         io = Interface(lambda x: x, "text", "text")
@@ -699,14 +752,14 @@ def test_monitoring_route(self):
         )
 
         response = client.get(
-            "/monitoring",
+            f"{API_PREFIX}/monitoring",
         )
         assert response.status_code == 200
 
         response = client.get("/logout")
 
         response = client.get(
-            "/monitoring",
+            f"{API_PREFIX}/monitoring",
         )
         assert response.status_code == 401
 
@@ -727,14 +780,14 @@ class TestDevMode:
     def test_mount_gradio_app_set_dev_mode_false(self):
         app = FastAPI()
 
-        @app.get("/")
+        @app.get(f"{API_PREFIX}/")
         def read_main():
             return {"message": "Hello!"}
 
         with gr.Blocks() as blocks:
             gr.Textbox("Hello from gradio!")
 
-        app = routes.mount_gradio_app(app, blocks, path="/gradio")
+        app = routes.mount_gradio_app(app, blocks, path=f"{API_PREFIX}/gradio")
         gradio_fast_api = next(
             route for route in app.routes if isinstance(route, starlette.routing.Mount)
         )
@@ -752,7 +805,7 @@ def identity(name, request: gr.Request):
         )
         client = TestClient(app)
 
-        response = client.post("/api/predict/", json={"data": ["test"]})
+        response = client.post(f"{API_PREFIX}/api/predict/", json={"data": ["test"]})
         assert response.status_code == 200
         output = dict(response.json())
         assert output["data"] == ["test"]
@@ -767,7 +820,7 @@ def identity(x, y, request: gr.Request):
         )
         client = TestClient(app)
 
-        response = client.post("/api/chat/", json={"data": ["test", None]})
+        response = client.post(f"{API_PREFIX}/api/chat/", json={"data": ["test", None]})
         assert response.status_code == 200
         output = dict(response.json())
         assert output["data"] == ["test", None]
@@ -787,7 +840,7 @@ def identity(x, y, request: gr.Request):
         )
         client = TestClient(app)
 
-        response = client.post("/api/chat/", json={"data": ["test", None]})
+        response = client.post(f"{API_PREFIX}/api/chat/", json={"data": ["test", None]})
         assert response.status_code == 200
         output = dict(response.json())
         assert output["data"] == ["t", None]
@@ -808,7 +861,7 @@ def identity(name, request: gr.Request):
         )
         client = TestClient(app)
 
-        response = client.post("/api/predict/", json={"data": ["test"]})
+        response = client.post(f"{API_PREFIX}/api/predict/", json={"data": ["test"]})
         assert response.status_code == 200
         output = dict(response.json())
         assert output["data"] == ["test"]
@@ -823,7 +876,7 @@ def identity(name, request: gr.Request):
         )
         client = TestClient(app)
 
-        response = client.post("/api/predict/", json={"data": ["test"]})
+        response = client.post(f"{API_PREFIX}/api/predict/", json={"data": ["test"]})
         assert response.status_code == 200
         output = dict(response.json())
         assert output["data"] == ["test"]
@@ -842,7 +895,7 @@ def identity(name, request: gr.Request):
             "/login",
             data={"username": "admin", "password": "password"},
         )
-        response = client.post("/api/predict/", json={"data": ["test"]})
+        response = client.post(f"{API_PREFIX}/api/predict/", json={"data": ["test"]})
         assert response.status_code == 200
         output = dict(response.json())
         assert output["data"] == ["test"]
@@ -868,7 +921,7 @@ def identity(name, request: gr.Request):
         )
         client = TestClient(app)
 
-        response = client.post("/api/predict?a=b", json={"data": ["test"]})
+        response = client.post(f"{API_PREFIX}/api/predict?a=b", json={"data": ["test"]})
         assert response.status_code == 200
         output = dict(response.json())
         assert output["data"] == ["test"]
@@ -882,7 +935,8 @@ def test_predict_route_is_blocked_if_api_open_false():
     assert io.show_api
     client = TestClient(app)
     result = client.post(
-        "/api/predict", json={"fn_index": 0, "data": [5], "session_hash": "foo"}
+        f"{API_PREFIX}/api/predict",
+        json={"fn_index": 0, "data": [5], "session_hash": "foo"},
     )
     assert result.status_code == 404
 
@@ -903,10 +957,13 @@ def test_predict_route_not_blocked_if_queue_disabled():
     assert demo.show_api
     client = TestClient(app)
 
-    result = client.post("/api/blocked", json={"data": [], "session_hash": "foo"})
+    result = client.post(
+        f"{API_PREFIX}/api/blocked", json={"data": [], "session_hash": "foo"}
+    )
     assert result.status_code == 404
     result = client.post(
-        "/api/not_blocked", json={"data": ["freddy"], "session_hash": "foo"}
+        f"{API_PREFIX}/api/not_blocked",
+        json={"data": ["freddy"], "session_hash": "foo"},
     )
     assert result.status_code == 200
     assert result.json()["data"] == ["Hello, freddy!"]
@@ -927,7 +984,8 @@ def test_predict_route_not_blocked_if_routes_open():
     client = TestClient(app)
 
     result = client.post(
-        "/api/not_blocked", json={"data": ["freddy"], "session_hash": "foo"}
+        f"{API_PREFIX}/api/not_blocked",
+        json={"data": ["freddy"], "session_hash": "foo"},
     )
     assert result.status_code == 200
     assert result.json()["data"] == ["Hello, freddy!"]
@@ -1026,32 +1084,38 @@ def from_partial(a, b):
         app, _, _ = io.launch(prevent_thread_lock=True)
         client = TestClient(app)
         assert client.post(
-            "/api/greet", json={"data": ["freddy"], "session_hash": "foo"}
+            f"{API_PREFIX}/api/greet", json={"data": ["freddy"], "session_hash": "foo"}
         ).json()["data"] == ["Hello freddy"]
         assert client.post(
-            "/api/goodbye", json={"data": ["freddy"], "session_hash": "foo"}
+            f"{API_PREFIX}/api/goodbye",
+            json={"data": ["freddy"], "session_hash": "foo"},
         ).json()["data"] == ["Goodbye freddy"]
         assert client.post(
-            "/api/greet_me", json={"data": ["freddy"], "session_hash": "foo"}
+            f"{API_PREFIX}/api/greet_me",
+            json={"data": ["freddy"], "session_hash": "foo"},
         ).json()["data"] == ["Hello"]
         assert client.post(
-            "/api/Say__goodbye", json={"data": ["freddy"], "session_hash": "foo"}
+            f"{API_PREFIX}/api/Say__goodbye",
+            json={"data": ["freddy"], "session_hash": "foo"},
         ).json()["data"] == ["Goodbye"]
         assert client.post(
-            "/api/lambda", json={"data": ["freddy"], "session_hash": "foo"}
+            f"{API_PREFIX}/api/lambda", json={"data": ["freddy"], "session_hash": "foo"}
         ).json()["data"] == ["freddy"]
         assert client.post(
-            "/api/foo-2", json={"data": ["freddy"], "session_hash": "foo"}
+            f"{API_PREFIX}/api/foo-2", json={"data": ["freddy"], "session_hash": "foo"}
         ).json()["data"] == ["freddy foo"]
         assert client.post(
-            "/api/Callable", json={"data": ["freddy"], "session_hash": "foo"}
+            f"{API_PREFIX}/api/Callable",
+            json={"data": ["freddy"], "session_hash": "foo"},
         ).json()["data"] == ["From __call__"]
         assert client.post(
-            "/api/partial", json={"data": ["freddy"], "session_hash": "foo"}
+            f"{API_PREFIX}/api/partial",
+            json={"data": ["freddy"], "session_hash": "foo"},
         ).json()["data"] == ["From partial: freddy"]
         with pytest.raises(FnIndexInferError):
             client.post(
-                "/api/Say_goodbye", json={"data": ["freddy"], "session_hash": "foo"}
+                f"{API_PREFIX}/api/Say_goodbye",
+                json={"data": ["freddy"], "session_hash": "foo"},
             )
 
     with connect(demo) as client:
@@ -1086,7 +1150,7 @@ def test_component_server_endpoints(connect):
         app, _, _ = io.launch(prevent_thread_lock=True)
         client = TestClient(app)
         success_req = client.post(
-            "/component_server/",
+            f"{API_PREFIX}/component_server/",
             json={
                 "session_hash": "123",
                 "component_id": file_explorer._id,
@@ -1097,7 +1161,7 @@ def test_component_server_endpoints(connect):
         assert success_req.status_code == 200
         assert len(success_req.json()) > 0
         fail_req = client.post(
-            "/component_server/",
+            f"{API_PREFIX}/component_server/",
             json={
                 "session_hash": "123",
                 "component_id": file_explorer._id,
@@ -1111,29 +1175,28 @@ def test_component_server_endpoints(connect):
 @pytest.mark.parametrize(
     "request_url, route_path, root_path, expected_root_url",
     [
-        ("http://localhost:7860/", "/", None, "http://localhost:7860"),
         (
-            "http://localhost:7860/demo/test",
-            "/demo/test",
+            f"http://localhost:7860/{API_PREFIX}",
+            f"{API_PREFIX}/",
             None,
             "http://localhost:7860",
         ),
         (
-            "http://localhost:7860/demo/test/",
-            "/demo/test",
+            f"http://localhost:7860/{API_PREFIX}/demo/test",
+            f"{API_PREFIX}/demo/test",
             None,
             "http://localhost:7860",
         ),
         (
-            "http://localhost:7860/demo/test?query=1",
-            "/demo/test",
+            f"http://localhost:7860/{API_PREFIX}/demo/test?query=1",
+            f"{API_PREFIX}/demo/test",
             None,
             "http://localhost:7860",
         ),
         (
-            "http://localhost:7860/demo/test?query=1",
-            "/demo/test/",
-            "/gradio/",
+            f"http://localhost:7860/{API_PREFIX}/demo/test?query=1",
+            f"{API_PREFIX}/demo/test/",
+            "/gradio",
             "http://localhost:7860/gradio",
         ),
         (
@@ -1150,25 +1213,13 @@ def test_component_server_endpoints(connect):
         ),
         (
             "https://www.gradio.app/playground/",
-            "/",
+            f"{API_PREFIX}/",
             "/playground",
             "https://www.gradio.app/playground",
         ),
         (
             "https://www.gradio.app/playground/",
-            "/",
-            "/playground",
-            "https://www.gradio.app/playground",
-        ),
-        (
-            "https://www.gradio.app/playground/",
-            "/",
-            "",
-            "https://www.gradio.app/playground",
-        ),
-        (
-            "https://www.gradio.app/playground/",
-            "/",
+            f"{API_PREFIX}/",
             "http://www.gradio.app/",
             "http://www.gradio.app",
         ),
@@ -1190,8 +1241,18 @@ def test_get_root_url(
     "headers, root_path, route_path, expected_root_url",
     [
         ({}, "/gradio/", "/", "http://gradio.app/gradio"),
-        ({"x-forwarded-proto": "http"}, "/gradio/", "/", "http://gradio.app/gradio"),
-        ({"x-forwarded-proto": "https"}, "/gradio/", "/", "https://gradio.app/gradio"),
+        (
+            {"x-forwarded-proto": "http"},
+            "/gradio/",
+            "/",
+            "http://gradio.app/gradio",
+        ),
+        (
+            {"x-forwarded-proto": "https"},
+            "/gradio/",
+            "/",
+            "https://gradio.app/gradio",
+        ),
         (
             {"x-forwarded-host": "gradio.dev"},
             "/gradio/",
@@ -1228,7 +1289,7 @@ def test_get_root_url(
     ],
 )
 def test_get_root_url_headers(
-    headers: Dict[str, str], root_path: str, route_path: str, expected_root_url: str
+    headers: dict[str, str], root_path: str, route_path: str, expected_root_url: str
 ):
     scope = {
         "type": "http",
@@ -1269,14 +1330,16 @@ def test_successful_simple_route(self):
         demo = self.get_demo()
         demo.launch(prevent_thread_lock=True)
 
-        response = requests.post(f"{demo.local_url}call/fn1", json={"data": ["world"]})
+        response = requests.post(
+            f"{demo.local_api_url}call/fn1", json={"data": ["world"]}
+        )
 
         assert response.status_code == 200, "Failed to call fn1"
         response = response.json()
         event_id = response["event_id"]
 
         output = []
-        response = requests.get(f"{demo.local_url}call/fn1/{event_id}", stream=True)
+        response = requests.get(f"{demo.local_api_url}call/fn1/{event_id}", stream=True)
 
         for line in response.iter_lines():
             if line:
@@ -1284,14 +1347,14 @@ def test_successful_simple_route(self):
 
         assert output == ["event: complete", 'data: ["Hello, world!"]']
 
-        response = requests.post(f"{demo.local_url}call/fn3", json={"data": []})
+        response = requests.post(f"{demo.local_api_url}call/fn3", json={"data": []})
 
         assert response.status_code == 200, "Failed to call fn3"
         response = response.json()
         event_id = response["event_id"]
 
         output = []
-        response = requests.get(f"{demo.local_url}call/fn3/{event_id}", stream=True)
+        response = requests.get(f"{demo.local_api_url}call/fn3/{event_id}", stream=True)
 
         for line in response.iter_lines():
             if line:
@@ -1303,14 +1366,16 @@ def test_generative_simple_route(self):
         demo = self.get_demo()
         demo.launch(prevent_thread_lock=True)
 
-        response = requests.post(f"{demo.local_url}call/fn2", json={"data": ["world"]})
+        response = requests.post(
+            f"{demo.local_api_url}call/fn2", json={"data": ["world"]}
+        )
 
         assert response.status_code == 200, "Failed to call fn2"
         response = response.json()
         event_id = response["event_id"]
 
         output = []
-        response = requests.get(f"{demo.local_url}call/fn2/{event_id}", stream=True)
+        response = requests.get(f"{demo.local_api_url}call/fn2/{event_id}", stream=True)
 
         for line in response.iter_lines():
             if line:
@@ -1331,14 +1396,14 @@ def test_generative_simple_route(self):
             'data: ["Hello, world!"]',
         ]
 
-        response = requests.post(f"{demo.local_url}call/fn2", json={"data": ["w"]})
+        response = requests.post(f"{demo.local_api_url}call/fn2", json={"data": ["w"]})
 
         assert response.status_code == 200, "Failed to call fn2"
         response = response.json()
         event_id = response["event_id"]
 
         output = []
-        response = requests.get(f"{demo.local_url}call/fn2/{event_id}", stream=True)
+        response = requests.get(f"{demo.local_api_url}call/fn2/{event_id}", stream=True)
 
         for line in response.iter_lines():
             if line:
@@ -1392,10 +1457,10 @@ def test_max_file_size_used_in_upload_route(connect):
     app, _, _ = demo.launch(prevent_thread_lock=True, max_file_size="1kb")
     test_client = TestClient(app)
     with open("test/test_files/cheetah1.jpg", "rb") as f:
-        r = test_client.post("/upload", files={"files": f})
+        r = test_client.post(f"{API_PREFIX}/upload", files={"files": f})
         assert r.status_code == 413
     with open("test/test_files/alphabet.txt", "rb") as f:
-        r = test_client.post("/upload", files={"files": f})
+        r = test_client.post(f"{API_PREFIX}/upload", files={"files": f})
         assert r.status_code == 200
 
 
@@ -1405,11 +1470,13 @@ def test_docs_url():
         button = gr.Button()
         button.click(lambda n: n + 1, [num], [num])
 
-    app, _, _ = demo.launch(app_kwargs={"docs_url": "/docs"}, prevent_thread_lock=True)
+    app, _, _ = demo.launch(
+        app_kwargs={"docs_url": f"{API_PREFIX}/docs"}, prevent_thread_lock=True
+    )
     try:
         test_client = TestClient(app)
         with test_client:
-            r = test_client.get("/docs")
+            r = test_client.get(f"{API_PREFIX}/docs")
             assert r.status_code == 200
     finally:
         demo.close()
@@ -1435,21 +1502,21 @@ def test_file_access():
     test_client = TestClient(app)
     try:
         with test_client:
-            r = test_client.get(f"/file={allowed_dir}/allowed.txt")
+            r = test_client.get(f"{API_PREFIX}/file={allowed_dir}/allowed.txt")
             assert r.status_code == 200
-            r = test_client.get(f"/file={allowed_dir}/../not_allowed.txt")
+            r = test_client.get(f"{API_PREFIX}/file={allowed_dir}/../not_allowed.txt")
             assert r.status_code in [403, 404]  # 403 in Linux, 404 in Windows
-            r = test_client.get("/file=//test/test_files/cheetah1.jpg")
+            r = test_client.get(f"{API_PREFIX}/file=//test/test_files/cheetah1.jpg")
             assert r.status_code == 403
-            r = test_client.get("/file=test/test_files/cheetah1.jpg")
+            r = test_client.get(f"{API_PREFIX}/file=test/test_files/cheetah1.jpg")
             assert r.status_code == 403
-            r = test_client.get("/file=//test/test_files/cheetah1.jpg")
+            r = test_client.get(f"{API_PREFIX}/file=//test/test_files/cheetah1.jpg")
             assert r.status_code == 403
             tmp = Path(tempfile.gettempdir()) / "upload_test.txt"
             tmp.write_text("Hello")
             with open(str(tmp), "rb") as f:
                 files = {"files": ("..", f)}
-                response = test_client.post("/upload", files=files)
+                response = test_client.post(f"{API_PREFIX}/upload", files=files)
                 assert response.status_code == 400
     finally:
         demo.close()
@@ -1464,9 +1531,11 @@ def test_bash_api_serialization():
     test_client = TestClient(app)
 
     with test_client:
-        submit = test_client.post("/call/predict", json={"data": [{"a": 1}]})
+        submit = test_client.post(
+            f"{API_PREFIX}/call/predict", json={"data": [{"a": 1}]}
+        )
         event_id = submit.json()["event_id"]
-        response = test_client.get(f"/call/predict/{event_id}")
+        response = test_client.get(f"{API_PREFIX}/call/predict/{event_id}")
         assert response.status_code == 200
         assert "event: complete\ndata:" in response.text
         assert json.dumps({"a": 1}) in response.text
@@ -1481,9 +1550,66 @@ def test_bash_api_multiple_inputs_outputs():
     test_client = TestClient(app)
 
     with test_client:
-        submit = test_client.post("/call/predict", json={"data": ["abc", 123]})
+        submit = test_client.post(
+            f"{API_PREFIX}/call/predict", json={"data": ["abc", 123]}
+        )
         event_id = submit.json()["event_id"]
-        response = test_client.get(f"/call/predict/{event_id}")
+        response = test_client.get(f"{API_PREFIX}/call/predict/{event_id}")
         assert response.status_code == 200
         assert "event: complete\ndata:" in response.text
         assert json.dumps([123, "abc"]) in response.text
+
+
+def test_attacker_cannot_change_root_in_config(
+    attacker_threads=1, victim_threads=10, max_attempts=30
+):
+    def attacker(url):
+        """Simulates the attacker sending a request with a malicious header."""
+        for _ in range(max_attempts):
+            httpx.get(url + "config", headers={"X-Forwarded-Host": "evil"})
+
+    def victim(url, results):
+        """Simulates the victim making a normal request and checking the response."""
+        for _ in range(max_attempts):
+            res = httpx.get(url)
+            config = json.loads(
+                res.text.split("window.gradio_config =", 1)[1].split(";</script>", 1)[0]
+            )
+            if "evil" in config["root"]:
+                results.append(True)
+                return
+
+        results.append(False)
+
+    with gr.Blocks() as demo:
+        i1 = gr.Image("test/test_files/cheetah1.jpg")
+        t = gr.Textbox()
+        i2 = gr.Image()
+        t.change(lambda x: x, i1, i2)
+
+    _, url, _ = demo.launch(prevent_thread_lock=True)
+
+    threads = []
+    results = []
+
+    for _ in range(attacker_threads):
+        t_attacker = Thread(target=attacker, args=(url,))
+        threads.append(t_attacker)
+
+    for _ in range(victim_threads):
+        t_victim = Thread(
+            target=victim,
+            args=(
+                url,
+                results,
+            ),
+        )
+        threads.append(t_victim)
+
+    for t in threads:
+        t.start()
+
+    for t in threads:
+        t.join()
+
+    assert not any(results), "attacker was able to modify a victim's config root url"
diff --git a/test/test_utils.py b/test/test_utils.py
index ed09b314c6204..faa0a5b805714 100644
--- a/test/test_utils.py
+++ b/test/test_utils.py
@@ -4,14 +4,15 @@
 import os
 import sys
 import warnings
+from collections.abc import Sequence
 from pathlib import Path
+from typing import Literal
 from unittest.mock import MagicMock, patch
 
 import numpy as np
 import pytest
 from hypothesis import given, settings
 from hypothesis import strategies as st
-from typing_extensions import Literal
 
 from gradio import EventData, Request
 from gradio.external_utils import format_ner_list
@@ -31,9 +32,11 @@
     get_function_params,
     get_type_hints,
     ipython_check,
+    is_allowed_file,
     is_in_or_equal,
     is_special_typed_parameter,
     kaggle_check,
+    safe_deepcopy,
     sagemaker_check,
     sanitize_list_for_csv,
     sanitize_value_for_csv,
@@ -370,13 +373,16 @@ def test_is_in_or_equal():
     assert not is_in_or_equal("/home/usr/subdirectory", "/home/usr/notes.txt")
     assert not is_in_or_equal("/home/usr/../../etc/notes.txt", "/home/usr/")
     assert not is_in_or_equal("/safe_dir/subdir/../../unsafe_file.txt", "/safe_dir/")
+    assert is_in_or_equal("//foo/asd/", "/foo")
+    assert is_in_or_equal("//foo/..a", "//foo")
+    assert is_in_or_equal("//foo/..²", "/foo")
 
 
 def create_path_string():
     return st.lists(
         st.one_of(
             st.text(
-                alphabet="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_-",
+                alphabet="ab@1/(",
                 min_size=1,
             ),
             st.just(".."),
@@ -384,7 +390,11 @@ def create_path_string():
         ),
         min_size=1,
         max_size=10,  # Limit depth to avoid excessively long paths
-    ).map(lambda x: os.path.join(*x))
+    ).map(lambda x: os.path.join(*x).replace("(", ".."))
+
+
+def create_path_list():
+    return st.lists(create_path_string(), min_size=0, max_size=5)
 
 
 def my_check(path_1, path_2):
@@ -414,6 +424,58 @@ def test_is_in_or_equal_fuzzer(path_1, path_2):
         pytest.fail(f"Exception raised: {e}")
 
 
+@settings(derandomize=os.getenv("CI") is not None)
+@given(
+    path=create_path_string(),
+    blocked_paths=create_path_list(),
+    allowed_paths=create_path_list(),
+    created_paths=create_path_list(),
+)
+def test_is_allowed_file_fuzzer(
+    path: Path,
+    blocked_paths: Sequence[Path],
+    allowed_paths: Sequence[Path],
+    created_paths: Sequence[Path],
+):
+    result, reason = is_allowed_file(path, blocked_paths, allowed_paths, created_paths)
+
+    assert isinstance(result, bool)
+    assert reason in [
+        "in_blocklist",
+        "allowed",
+        "not_created_or_allowed",
+        "created",
+    ]
+
+    if result:
+        assert reason in ("allowed", "created")
+    elif reason == "in_blocklist":
+        assert any(is_in_or_equal(path, blocked_path) for blocked_path in blocked_paths)
+    elif reason == "not_created_or_allowed":
+        assert not any(
+            is_in_or_equal(path, allowed_path) for allowed_path in allowed_paths
+        )
+
+    if reason == "allowed":
+        assert any(is_in_or_equal(path, allowed_path) for allowed_path in allowed_paths)
+    elif reason == "created":
+        assert any(is_in_or_equal(path, created_path) for created_path in created_paths)
+
+
+@pytest.mark.parametrize(
+    "path,blocked_paths,allowed_paths",
+    [
+        ("/a/foo.txt", ["/a"], ["/b"], False),
+        ("/b/foo.txt", ["/a"], ["/b"], True),
+        ("/a/../c/foo.txt", ["/c/"], ["/a/"], False),
+        ("/c/../a/foo.txt", ["/c/"], ["/a/"], True),
+        ("/c/foo.txt", ["/c/"], ["/c/foo.txt"], True),
+    ],
+)
+def is_allowed_file_corner_cases(path, blocked_paths, allowed_paths, result):
+    assert is_allowed_file(path, blocked_paths, allowed_paths, []) == result
+
+
 # Additional test for known edge cases
 @pytest.mark.parametrize(
     "path_1,path_2,expected",
@@ -606,3 +668,44 @@ def test_get_nonexistent(self):
         d = UnhashableKeyDict()
         with pytest.raises(KeyError):
             d["nonexistent"]
+
+
+class TestSafeDeepCopy:
+    def test_safe_deepcopy_dict(self):
+        original = {"key1": [1, 2, {"nested_key": "value"}], "key2": "simple_string"}
+        copied = safe_deepcopy(original)
+
+        assert copied == original
+        assert copied is not original
+        assert copied["key1"] is not original["key1"]
+        assert copied["key1"][2] is not original["key1"][2]
+
+    def test_safe_deepcopy_list(self):
+        original = [1, 2, [3, 4, {"key": "value"}]]
+        copied = safe_deepcopy(original)
+
+        assert copied == original
+        assert copied is not original
+        assert copied[2] is not original[2]
+        assert copied[2][2] is not original[2][2]
+
+    def test_safe_deepcopy_custom_object(self):
+        class CustomClass:
+            def __init__(self, value):
+                self.value = value
+
+        original = CustomClass(10)
+        copied = safe_deepcopy(original)
+
+        assert copied.value == original.value
+        assert copied is not original
+
+    def test_safe_deepcopy_handles_undeepcopyable(self):
+        class Uncopyable:
+            def __deepcopy__(self, memo):
+                raise TypeError("Can't deepcopy")
+
+        original = Uncopyable()
+        result = safe_deepcopy(original)
+        assert result is not original
+        assert type(result) is type(original)
diff --git a/testing-guidelines/quality-strategy.md b/testing-guidelines/quality-strategy.md
index 1d9891f013a8c..22e32f259d4c4 100644
--- a/testing-guidelines/quality-strategy.md
+++ b/testing-guidelines/quality-strategy.md
@@ -90,7 +90,7 @@ All unspecified version segments (`x`) refer to latest.
 
 | Software | Version(s)            | Operating System(s)               |
 | -------- | --------------------- | --------------------------------- |
-| Python   | `3.8.x`               | `ubuntu-latest`, `windows-latest` |
+| Python   | `3.10.x`              | `ubuntu-latest`, `windows-latest` |
 | Node     | `18.x.x`              | `ubuntu-latest`                   |
 | Browser  | `playwright-chrome-x` | `ubuntu-latest`                   |
 
diff --git a/tsconfig.json b/tsconfig.json
index eb62f6971a3af..a99a2d07287c7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -35,6 +35,7 @@
 	},
 	"exclude": [
 		"**/_website/**/*",
+		"**/app/**/*",
 		"**/dist/**/*",
 		"**/public/**/*",
 		"**/.config/**/*",