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

Gradio JavaScript Clientを、Oracle APEXのアプリケーションに組み込んでみます。Getting Started with the Gradio JavaScript Clientのページに掲載されている、いくつかの例を実装してみます。

空のAPEXアプリケーションを作成し、ホーム・ページにGradio JavaScript Clientを呼び出すコードを埋め込みます。

最初にページ・プロパティのHTMLヘッダーにimportmapを設定します。

<script type="importmap">
    {
        "imports": {
            "@gradio/client": "https://cdn.jsdelivr.net/npm/@gradio/client/+esm"
        }
    }
</script>

Gradio JavaScript Clientを呼び出した結果を出力するページ・アイテムとしてP1_RESULTを作成します。タイプはテキスト領域です。

外観の高さを10に変更し、少し表示領域を広げます。また、セッション・ステートのストレージにリクエストごと(メモリーのみ)を選択し、以前の値が記憶されないようにします。

最初にWhisperを呼び出すサンプルを実装します。

静的コンテンツのリージョンを作成し、ソースのHTMLコードに以下を記述します。

<script type="module">
import { Client, handle_file } from "@gradio/client";

const response = await fetch(
	"https://audio-samples.github.io/samples/mp3/blizzard_unconditional/sample-0.mp3"
);
const audio_file = await response.blob();

const app = await Client.connect("abidlabs/whisper");
const result = await app.predict("/predict", [handle_file(audio_file)]);
// 
let text = result.data[0];
apex.item("P1_RESULT").setValue(text);
</script>

ページを実行すると、ページ・アイテムP1_RESULTに以下が表示されます。

Using eventsのサンプルを実装します。

<script type="module">
import { Client } from "@gradio/client";

function log_result(payload) {
	const {
		data: [translation]
	} = payload;

	apex.item("P1_RESULT").setValue(`The translated result is: ${translation}`);
}

const app = await Client.connect("abidlabs/en2fr");
const job = app.submit("/predict", ["Hello"]);

for await (const message of job) {
	log_result(message);
}
</script>

ページを実行すると、ページ・アイテムP1_RESULTに以下が表示されます。

Statusのサンプルを実装します。

<script type="module">
import { Client } from "@gradio/client";

function log_status(status) {
	apex.item("P1_RESULT").setValue(
		`The current status for this job is: ${JSON.stringify(status, null, 2)}.`
	);
}

const app = await Client.connect("abidlabs/en2fr", {
	events: ["status", "data"]
});
const job = app.submit("/predict", ["Hello"]);

for await (const message of job) {
	if (message.type === "status") {
		log_status(message);
	}
}
</script>

ページを実行すると、ページ・アイテムP1_RESULTに以下が表示されます。

Generator Endpointsのサンプルを実装します。

<script type="module">
import { Client } from "@gradio/client";

const app = await Client.connect("gradio/count_generator");
const job = app.submit(0, [9]);

for await (const message of job) {
    console.log(message.data);
    apex.item("P1_RESULT").setValue(JSON.stringify(message.data));
}

setTimeout(() => {
	job.cancel();
}, 3000);
</script>

ページを実行すると、ページ・アイテムP1_RESULTに以下が表示されます。

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

今回作成したAPEXアプリケーションのエクスポートを以下に置きました。

https://github.com/ujnak/apexapps/blob/master/exports/integrating-gradio-client.zip

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

完

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のカスタム要素を埋め込んでいきます。

リージョン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のアプリケーション作成の参考になれば幸いです。

完