Duplicate from radames/gradio_window_localStorage

Co-authored-by: Radamés Ajna <radames@users.noreply.huggingface.co>

.gitattributes

@@ -0,0 +1,34 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

README.md

@@ -0,0 +1,13 @@
+---
+title: Gradio Window LocalStorage
+emoji: 🫙
+colorFrom: gray
+colorTo: green
+sdk: gradio
+sdk_version: 3.29.0
+app_file: app.py
+pinned: false
+duplicated_from: radames/gradio_window_localStorage
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,43 @@
+import gradio as gr
+
+get_local_storage = """
+    function() {
+      globalThis.setStorage = (key, value)=>{
+        localStorage.setItem(key, JSON.stringify(value))
+      }
+       globalThis.getStorage = (key, value)=>{
+        return JSON.parse(localStorage.getItem(key))
+      }
+       const text_input =  getStorage('text_input')
+       const dropdown =  getStorage('dropdown')
+       const local_data =  getStorage('local_data')
+       return [text_input, dropdown, local_data];
+      }
+    """
+
+
+def predict(text_input, dropdown):
+    return {
+        "text": text_input,
+        "dropdown": dropdown,
+        "something_else": [text_input] * 3 + [dropdown],
+    }
+
+
+with gr.Blocks() as block:
+    text_input = gr.Text(label="Input")
+    dropdown = gr.Dropdown(["first", "second", "third"], type="index")
+    local_data = gr.JSON({}, label="Local Storage")
+
+    dropdown.change(None, dropdown, None, _js="(v)=>{ setStorage('dropdown',v) }")
+    text_input.change(None, text_input, None, _js="(v)=>{ setStorage('text_input',v) }")
+    local_data.change(None, local_data, None, _js="(v)=>{ setStorage('local_data',v) }")
+    btn = gr.Button("Set New Data")
+    btn.click(fn=predict, inputs=[text_input, dropdown], outputs=[local_data])
+    block.load(
+        None,
+        inputs=None,
+        outputs=[text_input, dropdown, local_data],
+        _js=get_local_storage,
+    )
+block.launch(debug=True)