Fix craco.config.js to use emotion plugin and fix the CSP for <img>, …

…<video>, and <audio> to work

packages/desktop/craco.config.js

@@ -2,6 +2,12 @@ const path = require('path');
 const HtmlWebpackPlugin = require("html-webpack-plugin")
 
 module.exports = {
+  babel: {
+    plugins: ["@emotion"],
+    loaderOptions: {
+      cacheDirectory: true,
+    },
+  },
   webpack: {
     configure: (webpackConfig, { env: webpackEnv, paths}) => {
       const isEnvDevelopment = webpackEnv === 'development';
@@ -19,7 +25,11 @@ module.exports = {
         'worker-src blob:',
         "script-src-elem 'self' blob: https://cdn.jsdelivr.net/",
         // Allow loading the hosted wheels
-        'connect-src https://cdn.jsdelivr.net/ https://pypi.org/ https://files.pythonhosted.org/' + (isEnvDevelopment ? ' http://localhost:3000/ ws://localhost:3000/' : '')
+        'connect-src https://cdn.jsdelivr.net/ https://pypi.org/ https://files.pythonhosted.org/' + (isEnvDevelopment ? ' http://localhost:3000/ ws://localhost:3000/' : ''),
+        // Allow <img> to load any resources
+        'img-src * blob:',
+        // Allow <audio> and <video> to load any resources
+        'media-src * blob:',
       ].join("; ")
       htmlWebpackPlugin.options.meta['Content-Security-Policy'] = { 'http-equiv': 'Content-Security-Policy', 'content': csp }
 

packages/desktop/src/App.tsx

@@ -26,7 +26,20 @@ function App() {
             data: `import streamlit as st
 
 name = st.text_input("name")
-st.write("Hello,", name or "Electron!")`,
+st.write("Hello,", name or "Electron!")
+
+import matplotlib.pyplot as plt
+import numpy as np
+
+size = st.slider("Sample size", 100, 1000, 100)
+arr = np.random.normal(1, 1, size=size)
+fig, ax = plt.subplots()
+ax.hist(arr, bins=20)
+
+st.pyplot(fig)
+
+st.image("https://raw.githubusercontent.com/whitphx/stlite/main/docs/images/logo.svg")
+`,
           },
           [snapshotMountFilePath]: {
             data: snapshotFileBin,