Bokeh를 embed해서 사용하고자 하는 경우 케이스는 2가지입니다.

1. 별도의 Widget (Dropdown, Slider 등)없이 그래프만 화면에 띄우는 경우: Standalone App
2. 그래프와 연동되는 Widget을 화면에 추가해서, 사용자와 인터렉트하는 웹 어플리케이션을 만드는 경우: Bokeh Server APP

이 둘의 차이는, 1번째 케이스의 경우 Content를 Embed하는 것이고, 2번째 케이스의 경우 Bokeh Server을 Library로 Embed하는 것입니다.
(Bokeh는 과거 버전에서는 Flask를 Backend로 사용했지만, 버전이 업데이트되면서 Tornado로 바뀌었기 때문에 Flask를 사용할 때 적용해야 할 방법을 공식 사이트에서 안내해주고 있습니다)

Standalone App

우선,별도의 Widget 없이 그래프만 렌더링해서 Flask의 route중 하나로 return 하려는 경우부터 설명하겠습니다.
매우 간단하게 html로 렌더링해서 return 하면 됩니다.

@app.route('/bokeh_standalone_HTML')
def bokeh_standalone_HTML():

    from bokeh.plotting import figure
    from bokeh.resources import CDN
    from bokeh.embed import file_html

    plot = figure()
    plot.circle([1,2,3,4,5], [6,7,8], size=20, color="blue", alpha=0.5)

    return file_html(models=[plot, plot1], resources=CDN, title="my plot")

다만, Bokeh가 여러차례 Update 되면서 library가 deprecated되었을 수도 있습니다.
(가령,bokeh.util.string의 encode_utf8 같은 경우는 Bokeh 버전 2 이상부터는 제거되어서, 사용하고자 안되면 그 아래 버전을 이용해야 하니 공식 사이트 를 참고하시기 바랍니다)

이 점만 주의해서 그래프를 렌더링하는 코드를 짜주시면 됩니다.

---

Bokeh Server App

이제, Bokeh server를 사용해서 (Flask 기반의)인터렉티브한 웹 어플리케이션을 만드는 방법을 설명하겠습니다.

위에서 언급하였듯이, Widget을 사용하고자 하는 경우 Bokeh Server를 사용해야 되고, 저희는 Flask와 함께 사용할것임으로 Bokeh Server를 Library로 Embed해주면 됩니다.

우선 이 Bokeh 공식 사이트에 들어가셔서, 아래 사진의 빨간 네모 박스 친 부분을 클릭하시길 바랍니다.

그러면 Flask를 Embed하는 Sample 코드가 나오는데 이 코드를 긁어서 복사한 후 사용하시면 됩니다.

주의할 점 3가지가 있습니다.

1. 보통 Flask는 디폴트로 5000포트로 사용하지만 샘플 코드에서는 8000코드로 하고 있음으로 Flask를 실행할때도 8000포트로 로컬 서버를 열어주면 됩니다.

   export FLASK_RUN_PORT=8000 #5000 포트 -> 8000 포트

2. Flask는 기본적으로 template폴더의 index.html을 대상으로 페이지를 렌더링하지만, 해당 코드는 embed.html를 찾아서 렌더링하도록 되어있습니다.
   따라서 해당 git repository에서 embed.html를 복사해서, 사용하시는 template폴더에 넣어주어야 정상적으로 작동합니다.

3. 테마를 theme.yaml를 사용하도록 되어있음으로 이 파일도 repository에서 받아서 루트 폴더에 넣어주시길 바랍니다.

이 모든 절차를 성공적으로 수행한다면, 다음과 같은 화면이 정상적으로 뜹니다.
(저는 flask의 '/embed'로 route를 연결했음으로 localhost:8000/embed로 접속했습니다)