Alon1
2024 年 9 月 24 日午後 3:33
1
ほとんどのコミュニティの範囲外であることは承知していますが、私たちは科学コミュニティであり、Pythonと多くのグラフ（Matplotlib）を使用しており、それらをDiscourseで共有しています。
静的なjpg/pngの代わりにインタラクティブなグラフを共有できたら、素晴らしい でしょう。
この例を検討してください。
import matplotlib.pyplot as plt
import mpld3
import numpy as np
Fs = 4000
f = 100
sample = 200
x = np.arange(sample)
y = np.sin(2 * np.pi * f * x / Fs)
fig, ax = plt.subplots(1,1)
ax.plot(x, y, marker=".")
html_str = mpld3.fig_to_html(fig)
Html_file= open("index.html","w")
Html_file.write(html_str)
Html_file.close()
index.htmlファイルを開くと、それが表示されます（インタラクティブになるだけですが…）。
ですから、私たちは半分まで来ていると感じていますよね？
Alteras
2024 年 9 月 24 日午後 4:24
2
説明された方法は、カスタムプラグインを介して実現可能であり、markdown-it スタイルのプラグインと HTML 用のオブジェクトストレージを組み合わせることができます。ただし、ユーザーが入力したコードをサーバー上のどこでも実行させることのセキュリティについては注意が必要です。Discourse は、バックエンドで安全に解析できるように、投稿を HTML および JS 用にサニタイズするためにすでに多くの作業を行っています。
代わりに、ブラウザに Python インタープリターを埋め込み、クライアントでコードを実行させることで、HTML 作成全体をスキップする方がうまくいくかもしれません。JupyterLite を使用すると、UI を備えた JupyterLab をブラウザで実行できます。ドキュメントによると、iframe 作成時にコードを自動実行 できるようです。カスタム HighlightJS プラグインを使用してコードを入力し、Python コードブロックにアクション可能なボタンを作成するか、自動実行させることができます。
たとえば、次のようになります。
ユーザーは Python コードブロックを含む投稿を表示します。
ユーザーがコードブロックにカーソルを合わせると、コードをブラウザで実行するためのボタンが表示されます。
ユーザーがボタンをクリックすると、コードブロックからコードをインポートして、コードブロックの下に JupyterLite の iframe が作成されます。
これは単なる HighlightJS プラグインであり、iframe を JupyterLite に作成するだけなので、サーバーコードを必要とせずにすべてをテーマコンポーネント内で作成できます。
注意点として、JupyterLite は JupyterLab ほど機能が完全ではないと説明されており、パッケージのインポートをどのように処理するかは不明なため、自分でホストする必要があるかもしれません。 JupyterLite は Pyodide を使用しており、PyPI の任意のホイールをサポートしているため、問題ないはずです。
「いいね！」 3
Alon1
2024 年 9 月 24 日午後 4:44
3
クライアント側（Discourseサーバーではなく、ユーザーのブラウザ）でindex.htmlが実行される場合、セキュリティリスクはそれほど大きくないと思います。
また、mpld3アプローチの利点は、依存関係のない単一ファイルであることです。生のPythonを実行する場合、プロットしたいもののソースであるCSVファイルやデータファイルなどのすべての依存関係をアップロードできる必要もあります。
とはいえ、Discourseの投稿内で生のPythonスクリプトを実行できるのは素晴らしいことです！
「いいね！」 2
Alteras
2024 年 9 月 24 日午後 5:11
4
Oh! HTML の生成方法を完全に誤解していました。ユーザーが HTML を事前に生成している場合、ドメインがホワイトリストに登録されている外部サイトから iframe で読み込むことができます。
iframes can now be whitelisted through the allowed iframes Site Setting.
例えば、デフォルトで許可されるはずの codepen です。
<iframe height="300" width="800" style="width: 100%;" scrolling="no" title="mplD3 example, actually working" src="https://codepen.io/gully/embed/BawMGr?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/gully/pen/BawMGr">
mplD3 example, actually working</a> by gully (<a href="https://codepen.io/gully">@gully</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
「いいね！」 3
必ず実現できます。
多数のユーザーがいる場合は、セットアップの自動化に役立つものが必要になる場合があります。
予算があればお手伝いできます。
「いいね！」 5
Alon1
2024 年 9 月 25 日午後 4:51
6
それは素晴らしいですね！
ipympl で動作すると思いますか（そうでない場合、図はインタラクティブではなくなり、全体が無効になります）。Jupyter を起動する前に PYTHONPATH 環境変数を設定できる基盤となるプロジェクトフォルダで動作すると思いますか。これにより、ユーザーは結合されたプロジェクトから関数や依存関係をインポートできますか。
そしてはい、これが合理的で実行可能であり、Discourse コミュニティ全体にオープンソースとして貢献できるのであれば、予算があります。
「いいね！」 2
非常に可能性が高いです
共同作業環境を作成する方法が見えます。
お気軽にダイレクトメッセージをお送りください。通話で話し合いましょう。
「いいね！」 2
Alon1
2024 年 9 月 26 日午後 2:53
8
@Alteras ありがとうございます。このソリューションは非常にわかりやすく、Discourse に「index.heml」ファイルをアップロードする方法（.html アップロードを簡単に有効にできます）を見つけて、それを iframe コードで提供できれば機能します。唯一の問題は、実際には機能しないことです。試してみると、iframe でレンダリングされるのではなく、index.html がダウンロードされるだけです。おそらく、iframe にファイルをダウンロードするのではなく表示するように指示するメタタグがあるのでしょうか？
Alteras
2024 年 9 月 26 日午後 11:55
9
ああ、なるほど。Discourse はデフォルトで、画像以外の添付ファイルに Content-Disposition を「attachment」として設定するため、ダウンロード専用として扱われます。
これは、PDF アップロードで同様の問題を処理しているように見える Inline PDF Previews に似たことを行うことができるかもしれません。
「いいね！」 1
system
2024 年 10 月 26 日午後 11:55
10
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
