Project IDXでFastAPIベースのPanelアプリを作りたかったんだけど結局よく分からなかった

1
from src import panel
2

3
from fastapi import FastAPI
4
from panel.io.fastapi import add_applications
5
from fastapi.middleware.cors import CORSMiddleware
6

7
import uvicorn
8
import os
9

10
app = FastAPI()
11

12
origins = ["*"]
13
app.add_middleware(
14
    CORSMiddleware,
15
    allow_origins=origins,  # List of allowed origins
16
    allow_credentials=True,
17
    allow_methods=["*"],  # Allow all methods
18
    allow_headers=["*"],  # Allow all headers
19
)
20

21
@app.get("/")
22
async def read_root():
23
    return {"Hello": "World"}
24

25
def create_panel_app():
26
    return panel.create_slider(10, 3, "⭐")
27

28
add_applications({
29
    "/panel_app1": create_panel_app
30
    , "/panel_app2": panel.create_column("I am a Panel object!")
31
    , "/panel_app3": "my_panel_app.py"
32
    , "/panel_app4": panel.create_figure_linking_slider()
33
    , "/panel_app5": panel.create_tabs()
34
    , "/panel_app6": panel.create_data_frame(400)
35
    , "/panel_app7": panel.create_text_input("Input file path.")
36
    , "/panel_app8": panel.create_button("Read the specified file")
37
    , "/panel_app9": panel.create_other_widgets()
38
    , "/panel_app10": panel.create_big_tabs()
39
    , "/panel_app11": panel.create_sine_wave()
40
    , "/panel_app12": panel.create_figure_linking_slider()
41
}, app=app)
42

43
if __name__ == "__main__":
44
    uvicorn.run(app, host="0.0.0.0", port=int(os.environ.get("PORT", 8080)))

1
import panel as pn
2
import numpy as np
3
import pandas as pd
4
import matplotlib.pyplot as plt
5
import matplotlib.figure
6
import datetime as dt
7
from bokeh.models import CustomJS, Slider
8

9
pn.extension(comms="vscode")  # to use on VSCode
10
# pn.extension(comms="bokeh")  # to use on Bokeh
11

12
# slider = pn.widgets.FloatSlider(name="Slider", start=0, end=10, value=5)
13

14
def create_slider(end: int, default_value: int, gauge_icon: str = "⭐") -> pn.widgets.IntSlider:
15
    slider = pn.widgets.IntSlider(name='Slider', start=0, end=end, value=default_value)
16
    return slider.rx() * gauge_icon
17

18
slider = pn.widgets.FloatSlider(name="Slider", start=0, end=10, value=5)
19
@pn.depends(slider.param.value)
20
def plot_sine_curve(value) -> matplotlib.figure:
21
    fig, ax = plt.subplots()
22
    x = np.linspace(0, 10, 100)
23
    y = np.sin(x + value)
24
    ax.plot(x, y)
25
    plt.close(fig) # Prevent from memory leak.
26
    return fig
27

28
def create_figure_linking_slider() -> pn.Column:
29
    return pn.Column(slider, plot_sine_curve).servable()
30

31
def create_column(title: str) -> pn.Column:
32
    return pn.Column(title)
33

34
def create_tabs() -> pn.Column:
35
    tab1 = pn.Column("This is tab 1")
36
    tab2 = pn.Column("This is tab 2")
37
    tabs = pn.Tabs(("Tab 1", tab1), ("Tab 2", tab2))
38
    return tabs.servable()
39

40
def create_big_tabs() -> pn.Column:
41
    tab1 = create_other_widgets()
42
    tab2 = create_other_widgets()
43
    tabs = pn.Tabs(("Tab 11", tab1), ("Tab 12", tab2))
44
    return tabs.servable()
45

46
def create_data_frame(width: int) -> pn.widgets.DataFrame:
47
    data = {"col1": [1, 2, 3], "col2": [4, 5, 6]}
48
    df = pd.DataFrame(data)
49
    table = pn.widgets.DataFrame(df, width=width)
50
    return table.servable()
51

52
def create_text_input(title: str, placeholder: str = "Input me."):
53
    return pn.widgets.TextInput(name=title, placeholder=placeholder)
54

55
def create_button(title: str, button_type: str = "primary"):
56
    return pn.widgets.Button(name=title, button_type=button_type)
57

58
def create_other_widgets():
59
    # 2. チェックボックスタグルグループ
60
    checkbutton_group = pn.widgets.CheckButtonGroup(
61
        name="Checkbox Group"
62
        , value=["Apple", "Pear"]
63
        , options=["Apple", "Banana", "Pear", "Strawberry"]
64
        , orientation="horizontal"
65
    )
66
    # 2. チェックボックスタグルグループ
67
    checkbox_group = pn.widgets.CheckBoxGroup(
68
        name="Checkbox Group"
69
        , value=["Apple", "Pear"]
70
        , options=["Apple", "Banana", "Pear", "Strawberry"]
71
        , inline=True
72
    )
73
    # 3. ラジオボタングループ
74
    radio_group = pn.widgets.RadioButtonGroup(
75
        name="Radio Button Group"
76
        , options=["Biology", "Chemistry", "Physics"]
77
        , button_type="success"
78
    )
79
    multi_choice = pn.widgets.MultiChoice(
80
        name="MultiChoice"
81
        , value=["Apple", "Pear"]
82
        , options=["Apple", "Banana", "Pear", "Strawberry", "melon", "dragon fruit", "orange", "grape", "muscat", "avocado", "peach", "tomato"]
83
    )
84
    # 5. マルチセレクト
85
    multi_select = pn.widgets.MultiSelect(
86
        name="MultiSelect"
87
        , value=["Apple", "Pear"]
88
        , options=["Apple", "Banana", "Pear", "Strawberry"]
89
        , size=8
90
    )
91
    # 6. トグルボタン
92
    toggle_group = pn.widgets.ToggleGroup(
93
        name="ToggleGroup"
94
        , options=["Biology", "Chemistry", "Physics"]
95
    )
96
    # 7. セレクター (様々なウィジェットのラッパー)
97
    selector = pn.widgets.Select(
98
        name="Select"
99
        , options=["Biology", "Chemistry", "Physics"]
100
    )
101
    # 8. カラーピッカー
102
    color_picker = pn.widgets.ColorPicker(
103
        name="Color Picker"
104
        , value="#99ef78"
105
    )
106
    # 9. 日付ピッカー
107
    date_picker = pn.widgets.DatePicker(
108
        name="Date Picker"
109
        , value=dt.datetime(2024, 4, 1, 11, 37)
110
    )
111
    # 10. 静的なテキスト (既に使用済み)
112
    data_slider = pn.widgets.DateSlider(
113
        name="Date Slider"
114
        , start=dt.datetime(2019, 1, 1)
115
        , end=dt.datetime(2019, 6, 1)
116
        , value=dt.datetime(2019, 2, 8)
117
    )
118
    # 11. text editor
119
    text_editor = pn.widgets.TextEditor(placeholder="Enter some text")
120
    # 12. json editor
121
    spinner = pn.widgets.JSONEditor(value={
122
        "dict"  : {"key": "value"},
123
        "float" : 3.14,
124
        "int"   : 1,
125
        "list"  : [1, 2, 3],
126
        "string": "A string",
127
    }, width=400)
128
    # 13. ファイル入力
129
    file_input = pn.widgets.FileInput(name="File Input")
130
    # 14. リテラル入力 (コード入力)
131
    literal_input = pn.widgets.LiteralInput(
132
        name="Literal Input (dict)"
133
        , value={"key": [1, 2, 3]}
134
        , type=dict
135
    )
136
    # 15. パスワード入力
137
    password_input = pn.widgets.PasswordInput(
138
        name="Password"
139
        , placeholder="Enter your password here..."
140
    )
141
    # 16. テキストエリア入力
142
    textarea_input = pn.widgets.TextAreaInput(
143
        name="Text Area Input"
144
        , placeholder="Enter a string here..."
145
    )
146
    # 17. Switch
147
    switch = pn.widgets.Switch(name="Switch")
148
    # 18. file dropper
149
    file_dropper = pn.widgets.FileDropper()
150

151
    player = pn.widgets.Player(
152
        name="Player"
153
        , start=0
154
        , end=100
155
        , value=32
156
        , loop_policy="loop"
157
        , show_value=True
158
        , value_align="start"
159
    )
160

161
    autocomplete = pn.widgets.AutocompleteInput(
162
        name="Autocomplete Input"
163
        , options=["Biology", "Chemistry", "Physics"]
164
        , case_sensitive=False
165
        , search_strategy="includes"
166
        , placeholder="Write something here"
167
    )
168
    # 全てのウィジェットをカラムに配置
169
    return pn.Column(
170
        checkbutton_group
171
        , checkbox_group
172
        , radio_group
173
        , multi_choice
174
        , multi_select
175
        , toggle_group
176
        , selector
177
        , color_picker
178
        , date_picker
179
        , data_slider
180
        , text_editor
181
        , spinner
182
        , file_input
183
        , literal_input
184
        , password_input
185
        , textarea_input
186
        , switch
187
        , file_dropper
188
        , player
189
        , autocomplete
190
        , create_slider(10, 5)
191
        , create_figure_linking_slider()
192
        , create_column("Column Title")
193
        , create_tabs()
194
        , create_data_frame(400)
195
        , create_text_input("Text Input")
196
        , create_button("Button")
197
    ).servable()
198

199
def create_sine_wave():
200
    # Create the initial plot
201
    x = np.linspace(0, 10, 500)
202
    y = np.sin(2 * np.pi * x)
203

204
    fig, ax = plt.subplots()
205
    line, = ax.plot(x, y)
206
    ax.set_xlabel("x")
207
    ax.set_ylabel("sin(2πx)")
208
    ax.set_title("Sine Wave")
209

210
    # Create sliders for frequency and amplitude
211
    frequency_slider = Slider(start=0.1, end=5, value=1, step=.1, title="Frequency")
212
    amplitude_slider = Slider(start=0.1, end=5, value=1, step=.1, title="Amplitude")
213

214

215
    # Define the update function (using CustomJS for interactivity,  better for larger datasets than pn.bind)
216
    code = """
217
        const data = source.data;
218
        const f = cb_obj.value;
219
        const a = amplitude_slider.value;
220
        const x = data['x'];
221
        const y = data['y'];
222
        for (var i = 0; i < x.length; i++) {
223
            y[i] = a * Math.sin(2 * Math.PI * f * x[i]);
224
        }
225
        source.change.emit();
226
    """
227

228
    # Convert the matplotlib figure to a bokeh figure (required for interaction within panel)
229
    from bokeh.io import show
230
    from bokeh.plotting import figure
231
    from bokeh.models import ColumnDataSource
232

233
    source = ColumnDataSource(data=dict(x=x, y=y))
234

235
    p = figure(width=400, height=400, tools="crosshair,pan,wheel_zoom,box_zoom,reset")
236
    p.line('x', 'y', source=source, line_width=3, line_alpha=0.6)
237

238

239
    # Attach the callback to the sliders
240
    callback = CustomJS(args={'source': source, 'frequency_slider': frequency_slider, 'amplitude_slider': amplitude_slider}, code=code)
241
    frequency_slider.js_on_change('value', callback)
242
    amplitude_slider.js_on_change('value', callback)
243

244
    # Arrange the elements in a Panel layout
245
    dashboard = pn.Column(
246
        pn.Row(frequency_slider, amplitude_slider),
247
        p  # Use the Bokeh figure directly
248
    )
249

250
    return dashboard.servable()

1
# To learn more about how to use Nix to configure your environment
2
# see: https://developers.google.com/idx/guides/customize-idx-env
3
{ pkgs, ... }: {
4
  # Which nixpkgs channel to use.
5
  channel = "stable-24.05"; # or "unstable"
6
  # Use https://search.nixos.org/packages to find packages
7
  packages = [ pkgs.python3 ];
8
  idx = {
9
    # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
10
    extensions = [ "ms-python.python" ];
11
    workspace = {
12
      # Runs when a workspace is first created with this `dev.nix` file
13
      onCreate = {
14
        install =
15
          "python -m venv .venv && source .venv/bin/activate && pip install -r requirements.txt";
16
        # Open editors for the following files by default, if they exist:
17
        default.openFiles = [ "README.md" "src/index.html" "main.py" ];
18
      }; # To run something each time the workspace is (re)started, use the `onStart` hook
19
    };
20
    # Enable previews and customize configuration
21
    previews = {
22
      enable = true;
23
      previews = {
24
        web = {
25
          command = [ "./devserver.sh" ];
26
          env = { PORT = "$PORT"; };
27
          manager = "web";
28
        };
29
      };
30
    };
31
  };
32
}

1
# To learn more about how to use Nix to configure your environment
2
# see: https://developers.google.com/idx/guides/customize-idx-env
3
{ pkgs, ... }: {
4
  channel = "stable-24.05"; # "stable-23.05" or "unstable"
5
  # Use https://search.nixos.org/packages to  find packages
6
  packages = [
7
    pkgs.python3
8
    pkgs.python311Packages.pip
9
    pkgs.google-cloud-sdk
10
    pkgs.python311Packages.fastapi
11
    pkgs.python311Packages.uvicorn
12
    pkgs.python311Packages.panel
13
  ];
14
  # Sets environment variables in the workspace
15
  env = { };
16

17
  idx = {
18
    # search for the extension on https://open-vsx.org/ and use "publisher.id"
19
    extensions = [
20
      "ms-python.python"
21
      "rangav.vscode-thunder-client"
22
    ];
23
    workspace = {
24
      # runs when a workspace is first created with this `dev.nix` file
25
      # to run something each time the environment is rebuilt, use the `onStart` hook
26
      onCreate = {
27
        create-venv = ''
28
          python -m venv .venv
29
          source .venv/bin/activate
30
          pip install --no-cache-dir -r requirements/dev.txt
31
        '';
32
      };
33
      onStart = {
34
        # install = ''
35
        #   python -m venv .venv
36
        #   source .venv/bin/activate
37
        #   pip install --no-cache-dir -r requirements/dev.txt
38
        # '';
39
        # Open editors for the following files by default, if they exist:
40
        default.openFiles = [ "README.md" "app.py"];
41
        # default.openFiles = [ "README.md" ];
42
        # run-server = "./devserver.sh";
43
        # Example: start a background task to watch and re-build backend code
44
        # watch-backend = "npm run watch-backend";
45
      };
46

47
    };
48
    # preview configuration, identical to monospace.json
49
    previews = {
50
      enable = true;
51
      previews = [
52
        {
53
          command = [
54
            "./devserver.sh"
55
          ];
56
          env = {
57
            PORT = "$PORT";
58
          };
59
          id = "web";
60
          manager = "web";
61
        }
62
      ];
63
    };
64
    # previews = {
65
    #   enable = true;
66
    #   previews = [
67
    #     {
68
    #       command = [
69
    #         "./devserver.sh"
70
    #       ];
71
    #       env = {
72
    #         PORT = "$PORT";
73
    #       };
74
    #       id = "web";
75
    #       manager = "web";
76
    #     }
77
    #   ];
78
    # }
79
  };
80
}

1
annotated-types==0.7.0
2
anyio==4.7.0
3
autopep8==2.0.4
4
click==8.1.7
5
exceptiongroup==1.2.0
6
fastapi==0.115.6
7
h11==0.14.0
8
idna==3.10
9
pycodestyle==2.11.1
10
pydantic==2.10.3
11
pydantic_core==2.27.1
12
sniffio==1.3.1
13
starlette==0.41.3
14
tomli==2.0.1
15
typing_extensions==4.12.2
16
uvicorn>=0.32.1
17
# Panel
18
panel[fastapi]>=1.5.2
19
# Google Cloud
20
functions_framework>=3.5.0
21
# Cloud SQL
22
cloud-sql-python-connector[pg8000]
23
sqlalchemy>=2.0.36