I want to build a demo frontend to host a sdk over streamlit, which will record a video (video frame) and in realtime give back few charts from the data retruned from sdk, i will share you the sdk data, so that you can build all the relavent charts possible and also give me the complete end to end code to run this sdk on a streamlit frontend. Here is the dummy facial emotion data - 
{
  "camera": {
    "frameTimestamp": 1727461724051
  },
  "face_arousal_valence": {
    "arousal": -0.18,
    "valence": 0.02,
    "affects38": {
      "Afraid": 0,
      "Amused": 0.57,
      "Angry": 0.04,
      "Annoyed": 0.09,
      "Anxious": 0.06,
      "Apathetic": 0.95,
      "Astonished": 0,
      "Bored": 0.5,
      "Calm": 0.21,
      "Conceited": 0.28,
      "Contemplative": 0.5,
      "Content": 0.21,
      "Convinced": 0.47,
      "Delighted": 0,
      "Depressed": 0.24,
      "Determined": 0.28,
      "Disappointed": 0.31,
      "Discontented": 0.27,
      "Distressed": 0,
      "Embarrassed": 0.72,
      "Enraged": 0.16,
      "Excited": 0,
      "Feel Well": 0.19,
      "Frustrated": 0.3,
      "Happy": 0.1,
      "Hopeful": 0.62,
      "Impressed": 0.85,
      "Melancholic": 0.77,
      "Peaceful": 0.34,
      "Pensive": 0.83,
      "Pleased": 0.25,
      "Relaxed": 0.29,
      "Sad": 0.25,
      "Satisfied": 0.23,
      "Sleepy": 0.34,
      "Tired": 0.34,
      "Uncomfortable": 0.5,
      "Worried": 0.97
    },
    "affects98": {
      "Adventurous": 0,
      "Afraid": 0,
      "Alarmed": 0,
      "Ambitious": 0.15,
      "Amorous": 0.3,
      "Amused": 0.57,
      "Angry": 0.04,
      "Annoyed": 0.09,
      "Anxious": 0.06,
      "Apathetic": 0.95,
      "Aroused": 0,
      "Ashamed": 0.69,
      "Astonished": 0,
      "At Ease": 0.25,
      "Attentive": 0.71,
      "Bellicose": 0,
      "Bitter": 0.14,
      "Bored": 0.5,
      "Calm": 0.21,
      "Compassionate": 0.32,
      "Conceited": 0.28,
      "Confident": 0.76,
      "Conscientious": 0.53,
      "Contemplative": 0.5,
      "Contemptuous": 0,
      "Content": 0.21,
      "Convinced": 0.47,
      "Courageous": 0,
      "Defient": 0,
      "Dejected": 0.26,
      "Delighted": 0,
      "Depressed": 0.24,
      "Desperate": 0.23,
      "Despondent": 0.59,
      "Determined": 0.28,
      "Disappointed": 0.31,
      "Discontented": 0.27,
      "Disgusted": 0.08,
      "Dissatisfied": 0.62,
      "Distressed": 0,
      "Distrustful": 0.69,
      "Doubtful": 0.31,
      "Droopy": 0.34,
      "Embarrassed": 0.72,
      "Enraged": 0.16,
      "Enthusiastic": 0.52,
      "Envious": 0,
      "Excited": 0,
      "Expectant": 0.85,
      "Feel Guilt": 0.76,
      "Feel Well": 0.19,
      "Feeling Superior": 0.36,
      "Friendly": 0.28,
      "Frustrated": 0.3,
      "Glad": 0.13,
      "Gloomy": 0.14,
      "Happy": 0.1,
      "Hateful": 0,
      "Hesitant": 0.59,
      "Hopeful": 0.62,
      "Hostile": 0,
      "Impatient": 0.78,
      "Impressed": 0.85,
      "Indignant": 0.53,
      "Insulted": 0.29,
      "Interested": 0.55,
      "Jealous": 0.44,
      "Joyous": 0.03,
      "Languid": 0.84,
      "Light Hearted": 0.62,
      "Loathing": 0,
      "Longing": 0.9,
      "Lusting": 0,
      "Melancholic": 0.77,
      "Miserable": 0.1,
      "Passionate": 0.81,
      "Peaceful": 0.34,
      "Pensive": 0.83,
      "Pleased": 0.25,
      "Polite": 0.64,
      "Relaxed": 0.29,
      "Reverent": 0.35,
      "Sad": 0.25,
      "Satisfied": 0.23,
      "Selfconfident": 0,
      "Serene": 0.22,
      "Serious": 0.73,
      "Sleepy": 0.34,
      "Solemn": 0.29,
      "Startled": 0.08,
      "Suspicious": 0.69,
      "Taken Aback": 0.82,
      "Tense": 0,
      "Tired": 0.34,
      "Triumphant": 0,
      "Uncomfortable": 0.5,
      "Wavering": 0.4,
      "Worried": 0.97
    },
    "quadrant": "Neutral"
  },
  "face_attention": {
    "attention": 0
  }
}

SDK code script for frontend integration (HTML 5 version) - 
<script>
class ScriptLoader{static loadScript(e,t=null){return new Promise((o=>{const a=document.createElement("script");a.type="text/javascript",a.readyState?a.onreadystatechange=function(){"loaded"!==a.readyState&&"complete"!==a.readyState||(a.onreadystatechange=null,o())}:a.onload=function(){o()},t&&a.setAttribute("data-config",t),a.src=e,document.getElementsByTagName("head")[0].appendChild(a)}))}}function downloadAiSDK(){return null==ScriptLoader.p&&(ScriptLoader.p=ScriptLoader.loadScript("https://sdk.morphcast.com/mphtools/v1.1/mphtools.js","cameraPrivacyPopup, compatibilityUI, compatibilityAutoCheck").then((()=>ScriptLoader.loadScript("https://ai-sdk.morphcast.com/v1.16/ai-sdk.js"))).then((()=>CY))),ScriptLoader.p}downloadAiSDK().then((e=>{e.loader().licenseKey("<MISSING_LICENSE_KEY>").addModule(e.modules().FACE_AROUSAL_VALENCE.name,{smoothness:.7}).addModule(e.modules().FACE_ATTENTION.name,{smoothness:.83}).addModule(e.modules().DATA_AGGREGATOR.name,{initialWaitMs:2e3,periodMs:1e3}).load().then((({start:e,stop:t})=>e())),window.addEventListener(e.modules().EVENT_BARRIER.eventName,(e=>{console.log("EVENT_BARRIER result",e.detail)})),window.addEventListener(e.modules().DATA_AGGREGATOR.eventName,(e=>{console.log("DATA_AGGREGATOR result",e.detail)})),MphTools.CameraPrivacyPopup.setText({title:"Allow us to use your camera",description:"This experience is designed to be viewed with your camera on. The next screen will ask your consent to access data from your camera.",url:"https://YOUR_DOMAIN/<YOUR_PRIVACY_POLICY>"})}));
</script>

Also share complete procedure on how to build it end to end.