ゲレの工房

ゲーム好きの中の人が、自分が作りたいアプリを作る記録です

FF14雑記:言語を超える力Web環境構築:ベータ版の公開

前回の記事はこちら

blog.gelehrte.com

とりあえずできたところまで。一旦遊べるところまでできたので、URLを公開します。
https://languageecho.com/


使い方

エオルゼア文字が写っている画像を用意します

スクショでもスマホの写真でも構いません。スマホのカメラから直接でも構いません。
「ファイルを選択」を押すと、PCの場合はフォルダから、スマホの場合はカメラロールもしくはカメラアプリから入力できます。

詳細設定

今回は説明を省きます。表示を変えられたり、スクショの一部分を切り抜いたりできます。

アップロード

画像をアップロードします。

結果の確認

申し訳ありませんが、間に広告を挟む予定です。広告より下に行ってください。
広告より下に行くと表示画面が出てきます。処理が終わると以下のように結果が表示されます。

画像はPCの場合は右クリック、スマホの場合は長押しで保存できると思います。将来的にはダウンロードボタンを用意すると思います。

ツイートする

結果をツイートしていただけるととても私が喜びます!
ツイートリンクは結果の下にありますので、そこからツイートお願いします。


以上で大まかな使い方の説明を終わります。以下は技術的な話です。

今回使用した参考記事

Cropper.jsを使ってみる

WebUIを作成するのに使いました。
cly7796.net

ブラウザから Amazon S3 への写真のアップロード

公式のサンプルコードが参考になりました。
docs.aws.amazon.com

AWSのLambda (Node.js) から他のLambdaを呼び出す

TensorFlowでの呼び出し時間がかかるため、この記事が参考になりました。
roku-ichi.com

AWS API Gateway】エラー解決方法 〜「blocked by CORS policy: No 'Access-Control-Allow-Origin' header 」

クロスドメイン対策で参考になりました。
qiita.com

AWS API GatewayでPOSTリクエスト受け取り時にエラー

maitakeramen.hatenablog.com

やったこと

WebUIを作る

作りました。
まだ正しくは動作していないです。
https://languageecho.com/

アップロードしたスクショのうち、エオルゼア文字部分だけを切り抜くためにCropperを使いました。これで認識精度が上がるはずです。

S3へ写真のアップロード

上記にも書きましたが、公式のサンプルコードが参考になりました。主にUpload部分だけを使っています。なおアップロード先はファイル受け取りしかできないようにしているので、外部からのアクセスを止めています。

Lambda関数をGateway APIで呼び出すとき29秒しか受け付けない

TensorFlowの処理は1分ほどかかるので、タイムアウトします。なので非同期読み込みするようにしました。
こんな感じのソースコードになりました。

このあたりのヘッダーの返し方がクロスドメイン対策に必要そうです。

Gateway APIでもクロスドメイン対策

ちょっとこの記事はいまいち理解できていなかったのですが、この手法で動きました。
qiita.com

AjaxからPOSTでGateway APIにデータを送れないときの対処

以下のようなエラーが吐き出されていました

{"readyState":4,"responseText":"","status":200,"statusText":"parsererror"}

これを対処。Gateway APIマッピングを設定する必要があるようです。
AWS API GatewayでPOSTリクエスト受け取り時にエラー - 新米エンジニアの失敗再発防止メモ


できていないこと

翻訳の精度向上

これからも引き続き頑張ります。

WebUIの完成に向けて

ダウンロード処理をなんとかしたいですね。その他使い勝手を良くしたいです。

こまかなバグの修正

実は結構バグを吐き出しながら動いています。少しずつ取り除いていきます。


後ちょっとですね。できるだけ早い段階に完成に向かいたいです。


広告