ServerモードのLayaを外側のJSで使用

やりたいこと
前準備
環境構築
1. コード修正
  1. importの追加
  2. 設定の変更
2. HTMLの作成
実行
改造

やりたいこと

以下の記事でLayaをローカル環境でサーバモード動作させてみました。

やりたいこと以下の記事でLayaをローカル環境で動作させてみました。しかし実行のたびにモデルの読み込みが走り速度があまり出ません。またプロンプトの変更にはPythonの呼び出しを変更する必要です。これではいろいろ使いにくいのでサーバモードでの起動と実行を試します。前準備まずは以下の記事を参考にしてローカル環境を構築します。環境構築ライブラリのインストールローカル環境でLayaが動作するようになったら以下のコマンドを作業フォルダで実行してServerに必要なライブラリのインストールを行います。pip install "laya"コードの取得以下のページに移動します。スクリプトの右上のダウンロード…

ここでは起動したサーバのLayaをJSから読んでみます。

*　スクリプトの修正が必要です。Pythonなのでビルドは不要です。

前準備

まずは以下の記事を参考にしてローカル環境/サーバ環境を構築します。

System One Models(Laya)をCudaなしローカル環境で動かしてみる

やりたいこと最近話題のSystem One ModelsをCudaなし,Windowsのローカル環境で動かしてみます。Jevが話題ですがローカルモデルではないのでローカルモデルのLayaを試します。環境構築PythonPythonを以下のページからダウンロードしてインストールします。3.10以上が必要です。環境のPythonが3.10未満の場合はアップデートしてください。venv環境への移動(任意)必要であればコマンドプロンプトを開き、以下のコマンドを作業フォルダで実行して、Venvの環境を作成してアクティブにします。python -mvenv venvvenv\scripts\activat…

LayaをCudaなしローカル環境/サーバモードで動かしてみる

環境構築

コード修正

server.pyを開いて以下の2点を修正します。

この修正をしないと別のJSからREST APIを読んだ時に失敗します。（CORS Policy違反）

importの追加

以下のimportを追加します。（初めの方に似たimport文が並んでいるところに追加してください）

from fastapi.middleware.cors import CORSMiddleware

設定の変更

app = FastAPI(、、、)を探し、直後に以下の処理を追加します。

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_methods=["*"],
    allow_headers=["*"],
)

HTMLの作成

以下の内容を保存してHTMLファイルを作成します。

（表示時にhttp://127.0.0.1:8000にアクセスして結果を取得します）

<html>
<body>
    <script>
        async function predict() {
            try {
                const response = await fetch('http://127.0.0.1:8000/predict', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        state: {
                            body: 'Hi, we were billed twice for March. Please refund the duplicate today or we will cancel our plan.'
                        },
                        questions: {
                            department: {
                                type: 'choice',
                                instructions: 'Which department should handle this?',
                                criteria: {
                                    billing: 'invoices, payments, refunds',
                                    technical: 'bugs, outages, system errors'
                                }
                            }
                        }
                    })
                });

                const data = await response.json();
                console.log(data);
            } catch (error) {
                console.error('Error:', error);
            }
        }
        predict();
    </script>
</body>
</html>

実行

以下の記事を参考にして作成したHTMLをローカルサーバ上で表示します。

Visual studio codeからローカルサーバーを起動する

やりたいことVisual studio codeからローカルサーバーを起動、HTMLの確認を行いたい。なぜ必要なのか？ローカルで作成したHTMLファイルをchromeなどのブラウザで表示することで、動作確認を行うことができます。しかし一部の機能はローカルファイルからは実行することはできません。そのためローカルにHTTPサーバーを起動し作成したHTMLファイルをサーバー上のファイルとしてブラウザから読広必要があります。例えばmoduleのjava scriptをローカルのHTMLから読み込もうとした場合、以下のようなエラーが表示され、動作しません。（Chromeの起動パラメータで動作するようにで…

結果の確認

HTMLを表示した後にdeveloperToolのConsoleを確認します。

以下のように結果が表示されれば成功です。

改造

上記で動作確認ができたので、好きなことを聞けるように改造します。

下の部分で質問を設定してます。

                    body: JSON.stringify({
                        state: {
                            body: 'Hi, we were billed twice for March. Please refund the duplicate today or we will cancel our plan.'
                        },
                        questions: {
                            department: {
                                type: 'choice',
                                instructions: 'Which department should handle this?',
                                criteria: {
                                    billing: 'invoices, payments, refunds',
                                    technical: 'bugs, outages, system errors'
                                }
                            }
                        }
                    })

魚を食べたい状態で今日の献立を聞きたい場合は以下のようにします。

                    body: JSON.stringify({
                        state: {
                            body: '今日は魚を食べたいです。'
                        },
                        questions: {
                            dish: {
                                type: 'choice',
                                instructions: '今日の献立はなにがいい？',
                                criteria: {
                                 "Curry": "カレー",
                                 "Sushi": "寿司",
                                 "Steak": "ステーキ",
                                 "other": "その他"
                                }
                            }
                        }
                    })

下のように寿司と帰ってきました。