2024年9月4日水曜日

Gradio LiteをOracle APEXのアプリケーションに組み込む

ブラウザ上で動作するGradio-liteを、Oracle APEXのアプリケーションに組み込んでみます。Gradio-liteのページで紹介されているGetting Staredのサンプルを動かしてみます。

空のAPEXアプリケーションを作成し、ホーム・ページにGradio-liteを組み込みます。

最初にJavaScriptとCSSのファイルのインポートを設定します。Gradio-liteのページで紹介されている設定では、JavaScriptファイルをインポートする際にcrossorigin属性を付与しています。そのため、ページ・プロパティのJavaScriptのファイルURLによる設定はできません。

CSSのファイルについては、ページ・プロパティのCSSのファイルURLで設定できますが、別々に設定しても仕方がないので、両方ともページ・プロパティのHTMLヘッダーに設定します。
<script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />

Gradio-liteが生成したボタンを押すと、APEXアプリケーションのデフォルトの動作であるページの送信が実行されてしまいます。そのため、Gradio-liteのカスタム要素に含まれるボタンをクリックした場合は、ページの送信を抑制します。

Gradio-liteの初期化にはかなりの時間がかかります。ページ・ロードが完了した時点ではGradio-liteの初期化は完了していないため、その中にあるはずのボタン要素を取得することはできません。また、Gradio-liteの初期化が完了したときに発生するイベントを見つけることができなかったため、ドキュメントにたいしてclickイベントのハンドラを設定し、gradio-liteカスタム要素内のボタンから発生したclickイベントであれば、ページの送信を行わないようにします。

JavaScriptのページ・ロード時に実行に以下を記述します。

/*
* gradio-liteのカスタム要素に含まれるボタンをクリックしたときに、
* APEXがページを送信するのを抑制する。
*
* gradio-lite内のボタンをクリックできるということは、Gradio Liteの
* 初期化は完了しているから、document.querySelectorAllでボタンを取得できる。
*/
document.addEventListener('click', (event) => {
const buttons = document.querySelectorAll("gradio-lite button");
buttons.forEach( (button) => {
if (button === event.target) {
console.log('click on button within gradio-lite is ignored to prevent page submittion.', event.target);
event.preventDefault();
}
});
});
view raw prevent-submittion-for-gradio-lite.js hosted with ❤ by GitHub

後は静的コンテンツのリージョンを作成し、gradio-liteのカスタム要素を埋め込んでいきます。

リージョンFirst Sampleを作成し、ソースのHTMLコードとして以下を記述します。
<gradio-lite>
import gradio as gr

def greet(name):
	return "Hello, " + name + "!"

gr.Interface(greet, "textbox", "textbox").launch()
</gradio-lite>

ページを実行すると、以下のようにGradio-liteのアプリケーションが埋め込まれていることが確認できます。


Multiple Filesのサンプルを静的コンテンツとして埋め込むと、以下のように表示されます。
<gradio-lite>

<gradio-file name="app.py" entrypoint>
import gradio as gr
from utils import add

demo = gr.Interface(fn=add, inputs=["number", "number"], outputs="number")

demo.launch()
</gradio-file>

<gradio-file name="utils.py" >
def add(a, b):
	return a + b
</gradio-file>

</gradio-lite>


Additional Requirementsのサンプルを静的コンテンツとして埋め込むと、以下のように表示されます。
<gradio-lite>

<gradio-requirements>
transformers_js_py
</gradio-requirements>

<gradio-file name="app.py" entrypoint>
from transformers_js import import_transformers_js
import gradio as gr

transformers = await import_transformers_js()
pipeline = transformers.pipeline
pipe = await pipeline('sentiment-analysis')

async def classify(text):
	return await pipe(text)

demo = gr.Interface(classify, "textbox", "json")
demo.launch()
</gradio-file>

</gradio-lite>

Playgroundを埋め込むと、以下のように表示されます。
<gradio-lite playground layout="horizontal">
import gradio as gr

gr.Interface(fn=lambda x: x,
			inputs=gr.Textbox(),
			outputs=gr.Textbox()
		).launch()
</gradio-lite>


Gradio-liteの組み込み方法について、簡単に確認してみました。

今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/integrating-gradio-lite.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完
投稿者 時刻:
ラベル: