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

完