app.py

import json
import gradio as gr
from pingpong import PingPong
from pingpong.gradio import GradioAlpacaChatPPManager

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 local_data =  globalThis.getStorage('local_data');
  console.log(local_data);
  return local_data;
}
"""

def add_pingpong(ld, ping, pong):
  if ld is not None:
    ppm = GradioAlpacaChatPPManager.from_json(json.dumps(ld))
    ppm.add_pingpong(PingPong(ping, pong))
    return str(ppm)
  
  else:
    ppm = GradioAlpacaChatPPManager()
    ppm.add_pingpong(PingPong(ping, pong))
    return str(ppm)

with gr.Blocks() as block:
  local_data = gr.JSON(
      {},
      label="Local Storage"
  )

  ping = gr.Text(label="ping")
  pong = gr.Text(label="pong")

  btn = gr.Button("Add new ping pong")
  btn.click(
      fn=add_pingpong, 
      inputs=[local_data, ping, pong], 
      outputs=local_data
  ).then(
      None, local_data, None, 
      _js="(v)=>{ setStorage('local_data',v) }"
  )

  block.load(
      None,
      inputs=None,
      outputs=local_data,
      _js=get_local_storage,
  )

block.launch(debug=True)