使用带有 DCC.Store 组件的复杂 numpy 数组 (Dash/Python)

Posted 2023-02-14

【中文标题】使用带有 DCC.Store 组件的复杂 numpy 数组 (Dash/Python)

【英文标题】：Using complex numpy arrays with DCC.Store component (Dash/Python)

【发布时间】：2022-01-19 14:38:42

【问题描述】：

所以我正在使用相对较大的数组（大小 (13, 8192)）在网站上绘制一些图形。已经这样实现了，所以很难做出改变。

由于使用浏览器的本地存储内存不足，我必须直接使用给定的复杂 NumPy 数组，然后在另一个回调中将其拆分为实部和虚部。问题是我不能 JSON 序列化复杂的数组。有人知道我可以做些什么来使用 Dash 的dcc.Store component“保存”这种数组吗？提前致谢。

这是一个代码示例（它是一个非常简短的版本）。

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output


import plotly.graph_objects as go  
import numpy as np

app = dash.Dash(__name__)


T0 = 1E-12 # duration of input 
N = 8192   # number of points 
dt = 750*T0/N 
T = np.arange(-N/2, N/2)*dt
m = 1 
C = 0 


def envelopef(T,T0,C,m):
    U = (np.exp(-((1+1j*C)/2)*((T/T0)**(2*m)))).astype(complex) 
    UI = np.absolute(U)**2
    return U, UI

z = np.arange(-10,10)
U, UI = envelopef(T,T0,C,m)

scatter1 = go.Scatter(x=T/T0,y=UI)
    
figure1 = go.Figure(data=[scatter1]).update_layout( )

env_graph = dcc.Graph(id='envelopesss', 
                        animate=True,
                        figure=figure1.update_layout(width=600, height=600,
                                                    xaxis = dict(range = [-8, 8])))  

M_slider = dcc.Slider(
        id='m_slider',
        min=1,
        max=10,
        step=1,
        value=m,
        marks=
        1: 'label': '1',
        10: 'label': '10',
    )

app.layout = html.Div([
    M_slider,
    dcc.Store(id='session', storage_type='local'),
     dcc.Loading(id="loading1",children=[html.Div([env_graph]) ],type="circle",),
])





@app.callback(
    Output("loading1", "children"), 
    Output("session", "data"),
    [Input("m_slider", "value")])
def update_bar_chart(mn):
    U, UI = envelopef(T,T0,C,mn)
    phase = np.angle(U)

    scatter1 = go.Scatter(x=T/T0,y=UI)
    
    figure1 = go.Figure(data=[scatter1]).update_layout(width=600, height=600,
                                                    xaxis = dict(range = [-8, 8])) 
    data = 'u': U , 'ui':UI, 'up': phase

    env_graph = dcc.Graph(figure=figure1)  
    return env_graph, data

app.run_server(debug=True)

【参考方案1】：

您可能想看看dash-extensions 中的ServersideOutput 组件。它保留了数据服务器端（这应该会提高应用程序的性能），并且由于默认的序列化程序是 pickle，因此复值数组可以开箱即用。可以通过pip安装，

pip install dash-extensions==0.0.66

要启用服务器端输出，请将应用初始化代码替换为

from dash_extensions.enrich import DashProxy, html, dcc, Input, Output, ServersideOutput, ServersideOutputTransform

app = DashProxy(__name__, transforms=[ServersideOutputTransform()])

接下来，将Output 替换为ServersideOutput，

@app.callback(
    Output("loading1", "children"),
    ServersideOutput("session", "data"),
    [Input("m_slider", "value")])

就是这样。您的应用程序现在应该可以工作了。为了完整起见，这里是完整的应用代码，

import plotly.graph_objects as go
import numpy as np

from dash_extensions.enrich import DashProxy, html, dcc, Input, Output, ServersideOutput, ServersideOutputTransform

app = DashProxy(__name__, transforms=[ServersideOutputTransform()])

T0 = 1E-12  # duration of input
N = 8192    # number of points
dt = 750 * T0 / N
T = np.arange(-N / 2, N / 2) * dt
m = 1
C = 0


def envelopef(T, T0, C, m):
    U = (np.exp(-((1 + 1j * C) / 2) * ((T / T0) ** (2 * m)))).astype(complex)
    UI = np.absolute(U) ** 2
    return U, UI


z = np.arange(-10, 10)
U, UI = envelopef(T, T0, C, m)
scatter1 = go.Scatter(x=T / T0, y=UI)
figure1 = go.Figure(data=[scatter1]).update_layout()
env_graph = dcc.Graph(id='envelopesss',
                      animate=True,
                      figure=figure1.update_layout(width=600, height=600,
                                                   xaxis=dict(range=[-8, 8])))

M_slider = dcc.Slider(
    id='m_slider',
    min=1,
    max=10,
    step=1,
    value=m,
    marks=
        1: 'label': '1',
        10: 'label': '10',
)

app.layout = html.Div([
    M_slider,
    dcc.Store(id='session', storage_type='local'),
    dcc.Loading(id="loading1", children=[html.Div([env_graph])], type="circle", ),
])


@app.callback(
    Output("loading1", "children"),
    ServersideOutput("session", "data"),
    [Input("m_slider", "value")])
def update_bar_chart(mn):
    U, UI = envelopef(T, T0, C, mn)
    phase = np.angle(U)
    scatter1 = go.Scatter(x=T / T0, y=UI)
    figure1 = go.Figure(data=[scatter1]).update_layout(width=600, height=600,
                                                       xaxis=dict(range=[-8, 8]))
    data = 'u': U, 'ui': UI, 'up': phase
    env_graph = dcc.Graph(figure=figure1)
    return env_graph, data


app.run_server(port=7777)