✌️

【Dify】ハンズオン:じゃんけんゲーム

2024/10/07に公開

こんにちは。三菱UFJインフォメーションテクノロジーの小林と申します。

生成AIアプリを作って生産性を向上させたい!と思う方は一定数いらっしゃると思います。
しかし、自分でコーディングをするのは難しいと感じる方も多いでしょう。
そのような方のためにDifyがあります。

この記事では、Difyとは何かを実際にアプリを作りながら学んでいきます。

この記事の趣旨

  • Difyは生成AIアプリを簡単に作れる
  • WebアプリもAPIも利用できる
  • 一度試してみると概観がつかめるので、この記事を参考にしてやってみてください

Difyとは

公式には以下の記載があります。(日本語があるのが嬉しいですね。)

https://docs.dify.ai/ja-jp

DifyはオープンソースのAIアプリ開発プラットフォームです。Backend as ServiceとLLMOpsの理念を融合し、開発者が迅速にAIアプリケーションを構築できるようにします。同時に、プログラミングが得意でない方でも、自分のアイデアをすぐにAIアプリにできる直感的なインターフェースを提供しています。

Difyを使えば、最新のAI技術を活用して誰でも簡単にAIアプリを作ることができます。

つまり、DifyはAIアプリを簡単に作れるオープンソースソフトウェア(OSS)です。

じゃんけんゲームハンズオン

今回の内容は、Difyの操作やできることを学ぶために、じゃんけんゲームを作るハンズオンです。

本来は、LLM(大規模言語モデル)もつなげてこそ意味があるのですが、まずはDifyの操作そのものの感覚をつかむために、あえてLLMの利用はしていません。

作るアプリのイメージは以下の通りです。

アプリ画面

左側で自分の手(グー・チョキ・パー)を指定して実行すると、右側でじゃんけんの結果が表示されるというものです。

前提

社内ではDifyをコミュニティ版として利用しており、「Docker Compose デプロイ」にてセットアップしています。

https://docs.dify.ai/ja-jp/getting-started/install-self-hosted/docker-compose

もし同様に実施したい場合は、DifyのSaaS版を使うか、社内と同様にコミュニティ版としてセットアップしてください。
(本記事は、Docker Composeのコミュニティ版およびSaaS版で動作を検証しております。)

最終ゴール

以下のような形でじゃんけんゲームを構成してみます。

最終形

  1. 開始:ユーザから「グー」「チョキ」「パー」を入力してもらいます。
  2. じゃんけん処理:以下処理をPythonで実装します。
    1. ユーザの手番を取得する
    2. コンピュータの手番を計算する
    3. じゃんけん判定をする
    4. 結果を出力する
  3. テンプレート:前述のじゃんけん処理をベースに結果出力を整形します。
  4. 終了:結果を出力します。

(生成AIアプリを作る場合は、この処理の中にLLMの処理を追加することになります。)

Workflow作成

では実際にアプリ開発を進めていきます。

ログイン

早速Difyにログインしてみましょう。

ログイン画面

メールアドレスとパスワードを入れます。

アプリを作る

「アプリを作成する」から「最初から作成」を選び、「ワークフロー」としてアプリ名を入力します。

アプリ作成

開始処理を作る

開始処理をクリックし、右側の入力フィードの「+」を押します。

開始処理

ユーザに入力させるので「選択」を選び、以下のように定義します。

開始処理定義

  • 変数名:User
  • ラベル名:じゃんけん
  • オプション:グー、チョキ、パーを作る
  • 必須:True

これで、保存を押すと開始処理が定義できます。

じゃんけん処理を作る

次に、実際のじゃんけん処理を作っていきます。

開始の右の「+」を押し、「コード」を選びます。

じゃんけん処理

右側で、入力変数のarg2をゴミ箱で消し、arg1を「開始:User string」とします。

じゃんけん処理入力変数

次に、Python3のコードの中に以下をコピペします。

import random

def janken():
    choices = ["グー", "チョキ", "パー"]
    return random.choice(choices)

def determine_winner(user_choice, computer_choice):
    if user_choice == computer_choice:
        return "引き分け"
    elif (user_choice == "グー" and computer_choice == "チョキ") or \
         (user_choice == "チョキ" and computer_choice == "パー") or \
         (user_choice == "パー" and computer_choice == "グー"):
        return "勝ち"
    else:
        return "負け"

def main(arg1: str):
    computer_choice = janken()
    result = determine_winner(arg1, computer_choice)
    return {
        "user_choice": arg1,
        "computer_choice": computer_choice,
        "result": result,
    }

このコードは、arg1を引数に取り、じゃんけん処理をして結果を出力するものです。

また、その結果を何として定義するかは右下の「出力変数」で定義します。

じゃんけん処理出力変数

今回は以下を出力しているので、そのように定義します。

  • user_choice:String
  • computer_choice:String
  • result:String

出力を成型する

ここまでで、じゃんけんの計算処理まで終わりました。

次に、その結果を整形してみましょう。

じゃんけん処理の右側の+を押して、テンプレートを選びます。

テンプレート

次に、以下のように定義します。

テンプレート定義

  • 入力変数
    • arg1 : user_choice String
    • arg2 : computer_choice String
    • arg3 : result String
  • コード
    • 以下をコピペ
あなたの手番:{{ arg1 }}
コンピュータの手番:{{ arg2 }}
結果:{{ arg3 }}

これで、じゃんけん処理の結果を整形して出力できるようになりました。

終了処理を作る

最後に結果を出力するための終了処理を作ります。

今までと同じようにテンプレートの右側の「+」を押し、「終了」を選びます。

終了処理

ここでは、テンプレートのoutputを選択します。

終了処理定義

これでおしまいです。

公開してアクセスする

ではさっそく試してみます。

右上の「公開する」を押します。

公開する

そうすると、「アプリを実行」が選択できるようになるので、クリックします。

アプリを実行

そうするとWebアプリ画面になるので、左側の「じゃんけん」から選択してExecuteしてみてください。

アプリ画面

これで、じゃんけんができます。

APIで実行

せっかくなので、API実行も試してみましょう。

準備

左側の上から二番目の「APIアクセス」を押します。

APIアクセス

右上の「APIキー」を押し、APIシークレットキーを発行します。

APIキー

実行

ご自身の端末でPowershellを開き、以下をコピペします。 APIキーは自分のものにしてくださいね。

また、APIのエンドポイントに関しては、APIサーバのURLに末尾に「workflows/run」を付けたものになります。

# APIエンドポイント
$uri = 'ここにURLエンドポイントを設定'

# 正しいアクセストークンを設定
$api_key = 'ここにAPIキーを設定'

# ヘッダー情報
$headers = @{
    'Authorization' = "Bearer $api_key"
    'Content-Type'  = 'application/json'
}

# POSTデータ
$body = @{
    "inputs"        = @{"User" = "パー"}
    "response_mode" = "streaming"
    "user"          = "api-user"
} | ConvertTo-Json

# UTF-8エンコーディングを使用して文字列をバイト配列に変換
$utf8NoBomEncoding = New-Object System.Text.UTF8Encoding $false
$bodyBytes = [System.Text.Encoding]::UTF8.GetBytes($body)

# HTTP POSTリクエストの実行
$response = Invoke-RestMethod -Uri $uri -Method Post -Headers $headers -Body $BodyBytes

# レスポンスの表示
$response

実行すると、応答が返ってくると思います。
文字コードの関係で出力は見づらいので、Dify側の実行ログから確認してみましょう。

実行ログ

左側のメニューの上から3番目の「ログ」を押します。

ログ

そうすると実行ログが見れます。

ログ一覧

(おそらく)一番上のエンドユーザが「api-user」になっているので、その行を押すと結果が見れます。

ログ結果

何がうれしいのか?

  • (ほとんど)ノーコードで処理が実装できました。
  • 今回はPythonでコードを書きましたが、本来はここがLLMとして生成AIに接続するということになります。
  • WebアプリとしてもAPIとしても作ることができました。
  • ログも見れました。

つまり、「手軽に生成AIのアプリを作る」ことができたということです。

活用想定エリア

今回はやりませんでしたが、例えば情報源を指定することもできるため、特定の文書を検索して応答することも簡単にできます。
例えば「社内情報照会系のQAチャットボット」が簡単に作れるわけです。

テンプレート

Difyはテンプレートが豊富なので、ここから選ぶというのも選択肢としてあります。 テンプレートをベースに、自分の作りたいアプリが簡単に作れるというのは魅力ですね。

おわり

以上、いかがでしたでしょうか。 Difyは便利なので、積極的に使っていきたいと思います。

以前の記事でも書きましたが、当社も生成AIの活用・検討が進んでおります。
今後もモダンなシステム開発を一緒に進めていくメンバーを募集しています。
興味を持たれた方は是非ご連絡ください!お待ちしております。

なお、掲載したソースコードはサンプルになります。本ソースコードを使用することで発生するいかなる損害や不利益について、当社は一切の責任を負いませんので、自己の責任においてご利用ください。

Discussion