Zenn
🪧

書かれたアイパスを撮るだけでWi‑Fi接続＆QR発行🤳Streamlit×Dify×Cloud Runで簡単アプリ実装

2025/02/14に公開
Python
Cloud Run
Streamlit
Dify
AI Agent Hackathon
tech

概要

飲食店やホテル、イベント会場などでよく見かけるWi‑Fi接続情報。
実際に接続する際、ポスターやカードに記載されたSSIDやパスワードを手入力するのは面倒で、ミスも発生しがちです。

こういうやつ（画像のは架空のものなので繋げません）↓

そこで今回、「VTQ Wi‑Fi Reader」（Vision to QR）は、スマホのカメラでWi‑Fi情報が記載された書類やポスターの写真を撮影するだけで、バックエンドのAI（LLM）によって即時に、接続用QRコードを生成してくれるAIエージェントとして開発しました。

本記事では、Streamlitを利用したフロントエンド実装、Difyワークフローによるバックエンド連携、そしてCloud Runへのデプロイについて解説します。

※デモ動画
https://youtube.com/watch?v=G8Bx4dTZCaY
某カフェチェーン（〇ローチェ）や有名ホテル（〇リンスホテル）でも実地の読み取りテストをさせていただきました！() ・・・精度は実証済みです！

アプリの機能

概要

「VTQ Wi‑Fi Reader」は、スマホのブラウザから画像をアップロードするだけで、撮影したWi‑Fi情報の写真からOCR処理を行い、SSID・パスワードを抽出。その情報をもとに、Wi‑Fi接続用のQRコードを自動生成するAIエージェントです！

目的

  • 手入力の手間を減らす！
    スマホで撮影し、OCRで自動抽出することで手入力を不要にします。
  • 入力ミスを防止する！
    AIエージェントによる自動処理で、誤入力による接続トラブルを防ぎます。
  • グループでの活動を楽しく！
    生成されたQRコードは、旅行やイベント、会議など、複数人に共有したい場合でもSNSで画像共有できるので便利です。

ポイント

  1. カメラ撮影機能の追加
    スマホカメラでの撮影機能をつけました。ブラウザ上で直接カメラを起動し、撮影した画像をアップロードできます！アルバムからのアップロードももちろん可能です。

  2. シンプルで扱いやすいコード設計
    Python、JavaScript、HTMLを組み合わせることで、直感的かつメンテナンスしやすいコードを目指しています。

  3. Cloud Runによるデプロイ
    GCPのコンテナデプロイサービスである Cloud Runを利用し、インフラ面も管理しやすくしました。独自ドメインを使いたい場合も、DNS設定やSSL作成までボタンポチポチで簡単にできて便利です。

システムの設計

システムアーキテクチャ

アーキテクチャ図（詳細は後述のGithubリポジトリをご覧ください。）

1. フロントエンド：Streamlit

Streamlitは、PythonベースでインタラクティブなWebアプリを短時間で開発できるフレームワークです。

本アプリでは、ユーザーがスマホから画像をアップロードできるようにし、さらにJavaScriptとの連携でエラー時のリロード対応も自動的に行います。この機能は、Dify単体では提供されていないため、ユーザビリティが良くなっていると思います。

2. バックエンド：Difyワークフロー

バックエンドの主要な処理は、Difyワークフローによって実現しています。
具体的には、以下の処理を自動で行います。

  • OCR処理
    アップロードされた画像から、Wi‑Fi情報（SSID、パスワード）を抽出します。
  • LLMによる解析
    抽出したテキスト情報をもとに、QRコード生成用データを作成します。
  • QRコード生成
    Wi‑Fi接続用のQRコードを生成し、フロントエンドにリターンします。

Difyの構築方法については、こちらの別記事をご参照ください！
「貼り紙やメモを撮ってWi‑Fi接続！QR生成までサクッとやってくれるAIエージェントを作った」

※またGithubリボジトリにて、同ワークフローをインポートできるDSLファイルを配布していますのでDifyが使える方はご活用ください！

3. デプロイ：Google Cloud Run

Cloud Runでのデプロイ

Google Cloud Runを利用することで、コンテナ化したアプリケーションをサーバレスで運用可能にしました。

Cloud Runのメリットとして、以下が挙げられます。

  • スケーラビリティ：トラフィックに応じた自動スケールを実現。
  • 管理の容易さ：インフラ管理から解放され、コードに専念できます。
  • セキュリティ：自動でSSL証明書が発行されるため、HTTPS通信が標準で利用可能です。

DNS設定のポイント

Cloud Run上でサービスを運用する際、独自ドメインの利用は必須となるケースも多いですね。DNS設定について説明します！

設定手順の概要：

  1. Cloud Runサービスの作成
    アプリをCloud Runにデプロイし、サービスURLを取得します。

  2. カスタムドメインの登録
    Google Cloud Consoleからカスタムドメインを登録し、サービスURLにドメインを紐付けます。

  3. DNSレコードの追加
    独自ドメインのDNS設定で、Cloud Runサービスに向けたAレコードとAAAAレコードを設定します。

  4. SSL証明書の自動管理
    Cloud Runが自動でSSL証明書を発行・更新するため、セキュアな通信が保証されます。

このように、DNS設定を正しく行うことで、ユーザーは独自ドメイン経由でシームレスにアプリへアクセスできます。

msetoさんの記事「Cloud Runと独自ドメインの設定」が分かりやすかったので、参考にさせていただきました！

今後の展望

今後さらに利便性を向上させるために、以下の機能を増やしたいな〜と思っています！

  • LINE共有ボタン
    生成されたQRコードを、ワンタップでLINEなどのメッセージングアプリに共有できる機能。グループ内での情報共有がよりスムーズになります。

  • ホーム画面への追加ボタン
    ホーム画面への追加を促し、自動化したいです。ホーム画面からアクセスしてもらうことで、スマホアプリのように使いたい時にすぐに使える状態になるでしょう。

ソースコードの共有

今回の「VTQ Wi‑Fi Reader」は、Streamlitを使った直感的なフロントエンド、Difyワークフローを利用したバックエンド処理、そしてCloud Runによる安定した運用環境を組み合わせました。

ソースコードはGitHubリポジトリで公開しています。
ぜひ、ご自身のプロジェクトにも取り入れてみてください！

皆さんの生活で、手入力の煩わしさを解消する一助となれば幸いです。

Discussion