Experiments storing multiple settings in BrowserState

app.py

@@ -9,5 +9,5 @@ if __name__ == "__main__":
     # print_gradio_info()
     # from src.plan.app_text2plan import run_app_text2plan
     # run_app_text2plan()
-    from src.huggingface_spaces.app_state2 import demo
+    from src.huggingface_spaces.app_state4 import demo
     demo.launch()

src/huggingface_spaces/app_state3.py

@@ -1,9 +1,6 @@
 """
 Multi-user experiment. User data is isolated from other users.
-When the page is open in multiple tabs, the API key is shared across all tabs.
-When the user reloads the page, the API key is remembered.
-
-However when the server is restarted, the API key is lost.
+untested on Hugging Face Spaces.
 """
 import random
 import string

src/huggingface_spaces/app_state4.py

@@ -0,0 +1,71 @@
+"""
+Multi-user experiment. User data is isolated from other users.
+When the page is open in multiple tabs, the API key is shared across all tabs.
+When the user reloads the page, the API key is remembered.
+When the server is restarted, the API key is remembered.
+
+Store multiple settings.
+"""
+import gradio as gr
+import json
+
+def store_settings(api_key, setting1, setting2, browser_state):
+    # Load existing settings if any
+    try:
+        settings = json.loads(browser_state) if browser_state else {}
+    except json.JSONDecodeError:
+        settings = {}
+    
+    # Update settings with new values
+    settings.update({
+        "api_key": api_key,
+        "setting1": setting1,
+        "setting2": setting2
+    })
+    
+    # Convert back to JSON string to store
+    stored_value = json.dumps(settings)
+    return stored_value, f"Settings stored: {settings}"
+
+def perform_action(browser_state):
+    if browser_state:
+        try:
+            settings = json.loads(browser_state)
+            return f"Action performed using settings: {settings}"
+        except json.JSONDecodeError:
+            return "Stored settings are corrupted."
+    else:
+        return "No settings stored. Please enter and store them first."
+
+with gr.Blocks() as demo:
+    gr.Markdown("## Settings Persistence using BrowserState")
+    
+    # Create a BrowserState component.
+    # The initial value is an empty string, and the key "Test" is used to store/retrieve the value.
+    browser_state = gr.BrowserState("", storage_key="Test", secret="Test")
+    
+    with gr.Row():
+        api_key_input = gr.Textbox(label="Enter your API Key", elem_id="api_key_input")
+        setting1_input = gr.Textbox(label="Setting 1", elem_id="setting1_input")
+        setting2_input = gr.Textbox(label="Setting 2", elem_id="setting2_input")
+        store_button = gr.Button("Store Settings")
+    
+    action_button = gr.Button("Perform Action")
+    output_text = gr.Textbox(label="Output")
+    
+    # Save settings on button click.
+    store_button.click(
+        store_settings, 
+        inputs=[api_key_input, setting1_input, setting2_input, browser_state], 
+        outputs=[browser_state, output_text]
+    )
+    
+    # Use the stored settings on action button click.
+    action_button.click(
+        perform_action, 
+        inputs=browser_state, 
+        outputs=output_text
+    )
+
+if __name__ == "__main__":
+    demo.launch()