No content

Noriyuki TAKEI ෢Ҫ ٓߦ Information • サイオステクノロジー株式会社 • Microsoft MVP for Microsoft Azure Favorites • Azure • パデル • スキー • ライブ配信 • ⽢いもの • ⾛ること blog https://tech-lab.sios.jp/ core skill Azureによるクラウドネイティブな アプリ開発 Twitter @noriyukitakei

౷߹։ൃ؀ڥ 1SPNQUGMPX

Prompt Flowってなに︖ Web上のエディタで全て開発が完了するため、ローカルに開発 環境を構築する必要はない。 ローカルPCに 開発環境不要 ⼤量データを⽤いたテストも、Web上で使えるテスト環境が⽤ 意されているので、テスト⽤のプログラムを作成する必要がな い。 ⼤量データの テストも簡単 作成したフローは、ボタンポチポチで実⾏環境にデプロイでき 、エンドポイントも発⾏される。わざわざVirtual Machineや App Service等の実⾏環境を⽤意する必要はない。 デプロイも 簡単

「特定のURLの記事のカテゴリを分類する」フローを考えてみる 指定したURLから コンテンツを取得する コンテンツを要約する 要約したコンテンツを もとにカテゴリを決定する。 データを整形する。 要約したコンテンツ URL内のコンテンツ カテゴリ URL カテゴリ(整形済み) ⼀番最初に与えられるInputであるURLにアクセスし、その中⾝のテキストを取得 します。画像データなどのバイナリは取得しません。この取得したテキストを以降 では「コンテンツ」と呼ぶことにします。 Azure OpenAI Serviceに、先程取得したコンテンツの要約を依頼します。 先程要約したコンテンツをもとに、Azure OpenAI Serviceにカテゴリの決定を依 頼します。 APIなどで取得しやすいようにデータを整形します。具体的にはJSONに変換します。

要件をヒアリングして フローを設計する。 フローを開発する。 ⼤量のデータで テストを⾏う。 本番環境にデプロイして エンドユーザーに 利⽤してもらう。 Prompt flowを使わないばい場合 要件 フィードバック フロー開発の流れ 実現⼿段 お客様と対⾯ないしはオンラインで 会話しながら要件を聞き出し、 設計を⾏う。 Visual Studio Codeなどの 開発環境を⽤意し、ログなどから ボトルネックの解析を⾏う。 テストデータを⼤量に実⾏する プログラムを⽤意し、 結果を可視化して評価を⾏う。 VMやApp Serviceとの実⾏基盤を ⽤意し、ビルド・デプロイを⾏う。 開発環境を⽤意したり、 解析⽤のログを⼊れ込む のが⾯倒 テストデータ実⾏⽤プロ グラムの開発や結果の可 視化のためのツール (Excelなど)の⽤意・利⽤ が⾯倒 VMなどの実⾏基盤の⽤意 やビルド・デプロイが⾯ 倒

要件をヒアリングして フローを設計する。 フローを開発する。 ⼤量のデータで テストを⾏う。 本番環境にデプロイして エンドユーザーに 利⽤してもらう。 Prompt flowを使う場合 要件 フィードバック フロー開発の流れ 実現⼿段 お客様と対⾯ないしはオンラインで 会話しながら要件を聞き出し、 設計を⾏う。 Prompt flowのエディタで 開発を⾏う。 Prompt flowのBatch runで テスト・評価を⾏う。 Prompt FlowからDeployボタンで ポチッとデプロイを⾏う。 開発環境の⽤意が不要 テストの実⾏もテスト結 果の可視化もPrompt flow がやってくれる Prompt flowからデプロイ するとVMを裏で作ってく れるので、デプロイまで してくれる

② ① ③ ④ ⑤ Prompt flowのエディタ 指定したURLから コンテンツを取得する コンテンツを要約する 要約したコンテンツを もとにカテゴリを決定する。 データを整形する。 URL カテゴリ(整形済み) フロー ノード

LLMへの接続 LLMに接続するためにライブラリや LangChainやSemantic kernelなどを 使う必要はなく、jinja2というテンプ レートに基づいて定義すればよい。

フローの実⾏ ノードごとの結果 フロー全体の結果 「実⾏」ボタンをクリックすると、 フローが実⾏される

⼤量データによるテスト url,category https://tech-lab.sios.jp/archives/30628,App https://eiga.com,Movie https://tech-lab.sios.jp/archives/31704,Movie テスト⽤データをアップロード テスト結果 出⼒

ビルドとデプロイ 上図の「デプロイ」をクリックし、エン ドポイント名や、デプロイ先VMのイン スタンスサイズを指定するだけで、フロ ーがビルド・デプロイさて、実⾏可能な 状態となる。

ΞϓϦΛ࡞ͬͯΈΑ͏

ブログ記事から画像付きTipsをXにPostするフローを考えてみる Feedからランダムに 記事を1件抽出 画像へのリンクURL付き Tipsを作成する。 画像を取得して XにPostする ⽣成したTips 記事のコンテンツ WordPressのFeedのURL ⼊⼒で与えられたWordPressのFeedのURLから記事⼀覧を取得して、ランダムに1 件抽出する。 記事のコンテンツをベースにして、Azure OpenAI Serviceに問い合わせを⾏い、 記事内の任意の画像へのURLを付与したTipsを作成する。 画像へのURLから画像を取得して、画像付きTipsをXにPostする。

知っておくとちょっと便利︕時刻の確 認や修正を⾏う date コマンド〜その2〜 … Feed プロンプト 回答 AzureのApp Serviceは多機能でアプリの公開を簡単 に⾏うことが可能。またスケールアップ・スケールア ウトによる性能調整や、Azure AADとの認証統合など も可能。詳しくはこのブログを⾒てね! → tech- lab.sios.jp/archives/36497 #Azure #AppService https://tech-lab.sios.jp/wp- content/uploads/2021/06/Screen-Shot-2021-06- 12-at-1.37.18.png AzureのApp Serviceは多機能でアプリの公開を簡単に⾏うことが 可能。またスケールアップ・スケールアウトによる性能調整や、 Azure AADとの認証統合なども可能。詳しくはこのブログを⾒て ね! → tech-lab.sios.jp/archives/36497 #Azure #AppService system: あなたは、与えられたブログの記事から、なにか画像を⼀ つ引⽤して、そのブログにある役に⽴つTIPSを⼀つ作成す るAIアシスタントです。 プロンプトには、「記事の本⽂」「記事のURL」「ハッ シュタグ」が与えられます。… WordPress Azure OpenAI Service X Post TipsをPostする アプリ

プロンプト system: あなたは、与えられたブログの記事から、なにか画像を⼀つ引⽤して、そのブログにある役に⽴つTIPSを⼀つ作成するAIアシスタントです。 プロンプトには、「記事の本⽂」「記事のURL」「ハッシュタグ」が与えられます。それをもとに、記事内にある画像を引⽤した役に⽴つ TIPSを⼀つ作成してください。これを「TIPS」と呼びます。 次に、「TIPS」の後に「詳しくはこのブログを⾒てね!」という⽂⾔とともに、記事のURLを挿⼊してください。これを「記事のURLへのリ ンク」と呼びます。 次に、「記事のURLへのリンク」の後に「# ハッシュタグ」で指定されたハッシュタグを挿⼊してください。これを「ハッシュタグ」と呼び ます。 ここまでで⽣成したテキスト(TIPS + 記事のURLへのリンク + ハッシュタグ)は、X(旧Twitter)の制限である140字を超えないようにして下 さい。 そして最後に⼀旦改⾏して、最後の⾏には引⽤した画像のURLを挿⼊してください。挿⼊するURLには余計な⽂字は⼊れないでください。 もし引⽤するための適当な画像が⾒つからない場合は、「no image」という⽂字列を最後の⾏に挿⼊して下さい。 プロンプトの例は以下のとおりです。 # 本⽂ ここに記事の本⽂が⼊ります。 # 記事のURL ここに記事のURLが⼊ります。 # ハッシュタグ ここにハッシュタグが⼊ります。

プロンプト user: # 本⽂ AzureのApp Serviceは多機能でアプリの公開を簡単に⾏うことが可能。 またスケールアップ・スケールアウトによる性能調整や、Azure Active Directoryとの認証統合なども可能で、 とにかくすごい機能ばかりです。 # 記事のURL tech-lab.sios.jp/archives/36497 # ハッシュタグ #Azure #AppService assistant: AzureのApp Serviceは多機能でアプリの公開を簡単に⾏うことが可能。またスケールアップ・スケールアウトによる性能調整や、Azure AADとの認証統合なども可能。詳しくはこのブログを⾒てね! → tech-lab.sios.jp/archives/36497 #Azure #AppService https://tech-lab.sios.jp/wp-content/uploads/2021/06/Screen-Shot-2021-06-12-at-1.37.18.png

プロンプト user: # 本⽂ {{article_content}} # 記事のURL {{aricle_url_without_scheme}} # ハッシュタグ {{hash_tags}}

環境とランタイムとコンピューティングインスタンスとフローの関係 FROM mcr.microsoft.com/azureml/promptfl ow/promptflow-runtime-stable COPY ./* ./ RUN pip install -r requirements.txt コンピューティングインスタンスA ランタイムA 環境A フロー フロー … ランタイムB フロー フロー … コンピューティングインスタンスB ランタイムC フロー フロー … ランタイムD フロー フロー … FROM mcr.microsoft.com/azureml/promptfl ow/promptflow-runtime-stable COPY ./* ./ RUN pip install -r requirements.txt 環境B

作業の流れ FROM mcr.microsoft.com/azureml/promptfl ow/promptflow-runtime-stable COPY ./* ./ RUN pip install -r requirements.txt Azure OpenAI Service X 接続(開発環境) 接続(開発環境) Azure OpenAI Service X 接続(本番環境) 接続(本番環境) ランタイム Feedからランダムに 記事を1件抽出 画像へのリンクURL付き Tipsを作成する。 画像を取得して XにPostする WordPressの FeedのURL get_entry generate_tips tweet_tips フロー 環境 コンピューティング インスタンス(開発環境) ランタイム Feedからランダムに 記事を1件抽出 画像へのリンクURL付き Tipsを作成する。 画像を取得して XにPostする WordPressの FeedのURL get_entry generate_tips tweet_tips フロー コンピューティング インスタンス(本番環境) 環境からランタイムを作成 注⼊ 注⼊ 注⼊ 注⼊ ① ② ③ ④ ⑤ ⑦ ⑥ 環境からランタイムを作成

SIOS Tech.Lab https://tech-lab.sios.jp/ 世界⼀わかりみの深い クラウドネイティブ on Azure https://youtube.com/playlist?list=PLbTt_DSTMYgGLUtZ0ewuBwhTBSZnNE2-w 様々なメティアで情報発信しています！！ 是非みてね！！ 技術ブログ YouTube配信

エンジニア募集（プロフェッショナルサービスチーム） エンジニアファーストの環境で、技術⼒を⾼めませんか︖ 変化や進化を楽しみながら、私たちとともに歩んでくれる仲間を募集してい ます︕ OSS ＆ クラウド技術をコアテクノロジーとしたシステム開発 ● 統合認証システム＆クラウド連携 ● OSS＆クラウド基盤導⼊、OSSカスタマイズや開発、OSSサポート ● クラウドネイティブシステム、データ分析基盤、アプリ開発 ● APIエコノミーコンサルティング＆技術⽀援サービス 詳細はこちらのサイトからご覧ください︕ https://tech-lab-engineer.sios.jp/

࠷ޙ·Ͱ͝ਗ਼ௌ௖͖ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂʂ