【これは使える！】画像からデータを抽出してNotionに送るアプリ

Non

2024年11月13日 19:58

Difyの活用事例の紹介です。

Difyに
❶スクショ画像をアップロードして、
❷LLMを使ってデータを抽出し、
❸抽出したデータをNotionに送る
というものです。

具体的には、
SBI証券アプリから
株式チャート（例えば日経平均）をスクショし、
そのチャートデータ（四本値・移動平均など）をNotionに送る
アプリを作成していきます。

はじめに、今回作るアプリのイメージをつかみましょう。

アプリのイメージ

ざっとした流れは以下の通りです。

具体的に見てみましょう。

画像として、マーケット指標のチャートデータを用意します。

以下は、SBI証券アプリから、
ある日の日経平均株価の日足チャートをスクショしたものです。

この中から、
指標名（日経平均）、日付、日足か週足か月足かの別、
始値、高値、安値、終値
移動平均短期、移動平均中期、移動平均長期
を取得します。

Difyを通して、Notionに送ると
以下のようなデータベースに転記されます。

Notion側のイメージ

ここから実際に手を動かして
作っていきます。

Difyでワークフローを作る前に、
まずは、NotionとDifyが連携できるよう
Notion側で必要な設定を行います。

Notion側の設定

❶データベースの作成

difyからのデータを送る先のデータベースになります。
テーブルビューを使って空のデータベースを作ります。

データを抽出するプロパティ（名称とデータ型）を適切に設定します。
difyでデータを抽出する際にも使います。

❷インテグレーションの作成

右上の3点マークからコネクトの管理を選択し、
インテグレーションを作成または管理するをクリックします。

新しいインテグレーションをクリックし、
❶インテグレーションの名前
❷関連ワークスペース
❸種類→ここでは内部
を入力して、保存を押します。

❸APIキーの取得

内部インテグレーションシークレット欄にある英数字がAPIキーになります。
コピペして取得します。

❹コネクト先の設定

データベースのページに戻って、
再び3点マークから接続先→先ほど作成したコネクト先を選択します。
以下の画面がでるので「はい」を押します。

❺database_idの取得

テーブルビューの新規タブの隣にある3点マークをクリックし、
ビューのリンクをコピーをクリックします。

クリップボードにリンクがコピーされるので、
適当なエディタに貼り付けて表示させて下さい。
以下のようなリンクになっていると思います。

この赤字の部分がdatabase_idになります。
www.notion.so/に続く、32の英数字です。?v＝の直前の文字までが対象になります。

Difyでワークフローを作成

最初から作成→ワークフローを選び
名前を入力します。

環境変数の設定

環境変数として、
NOTION_INTEGRATION_SECRET_KEYにAPIキーを
NOTION_VERSIONに2022-06-28を設定します。

ワークフロー

ワークフローの全体像は以下の通りです。
見やすいように前半部分と後半部分で分けてお示しします。

前半部分

後半部分

全部で7ブロック使います。
ここから一つずつ見ていきましょう。

❶開始ブロック

入力フィールドでファイルを読み込めるようにします。

❷LLMブロック

モデルはGPT-4o-mini-2024-07-18を使っています。
SYSTEMプロンプトで、
データを抽出し、JSON形式で出力することを指示します。

SYSTEMプロンプト

あなたは優秀なマーケットデータ解析者です。
受け取ったスクリーンショット（以下、スクショ）を解析して、テキスト・数値を抽出してください。

## 制約条件
- JSON形式で出力する
- 特記すべき事項についてはnoticeに記載する
- データが存在しない場合、もしくは分からない場合は、nullと記入する

## 取得する情報の説明
- index_name: スクショの上部に記載のある指標の名称。
- term: 日足、週足、月足のいずれかを出力する。
-date:日時　yyyy/mm/dd形式で出力する。
- start: 始値
- high: 高値
- low: 安値
- close :終値
-average_short:移動平均の短期
-average_middle:移動平均の中期
-average_long:移動平均の長期

## json schema
{
  "type": "object",
  "properties": {
    "index_name": {
      "type": "string",
    },
    "term": {
      "type": "string",
      "enum": ["日足", "週足", "月足"],
        },
    "date": {
      "type": "string",
      "format": "date",
      "pattern": "^\\d{4}/\\d{2}/\\d{2}$",      
    },
    "start": {
      "type": "float",
      "description": "小数点がある場合は少数点以下第2位まで表示"
    },
"high": {
      "type": "float",
      "description": "小数点がある場合は少数点以下第2位まで表示"
    },
"low": {
      "type": "float",
      "description": "小数点がある場合は少数点以下第2位まで表示"
    },
"close": {
      "type": "float",
      "description": "小数点がある場合は少数点以下第2位まで表示"
    },
"average_short": {
      "type": "float",
      "description": "小数点がある場合は少数点以下第2位まで表示"
    },
"average_middle": {
      "type": "float",
      "description": "小数点がある場合は少数点以下第2位まで表示"
    },
"average_long": {
      "type": "float",
      "description": "小数点がある場合は少数点以下第2位まで表示"
    },
 
    "note": {
      "type": "string",
      "description": "注記。標準的でない形式や追加情報がある場合の付加情報。付加情報がない場合「N/A」と記載する。"
    }
  },
  "required": ["index_name", "date", "term", "start", "high","low","close", "average_short", "average_middle", "average_long","note"]
}

❸コードブロック

LLMの出力からJSONデータを抽出します。
JavaScriptを使っています。
抽出したデータは出力変数でデータ型を指定します。

JavaScriptのコード

function main({json}) {
    const data = JSON.parse(json);
    return {
        index_name: data.index_name,
        date: data.date,
        term: data.term,
        start: data.start,
        high: data.high,
        low: data.low,
        close: data.close,
        average_short: data.average_short,
        average_middle: data.average_middle,
        average_long: data.average_long,
        note: data.note
    }
}

❹テンプレートブロック

Notionに連携できるようデータ整形します。

コード

1行目にさきほど取得したdatabase_idを入力します。

{
  "parent": { "database_id": "***************************" },
  "properties": {
    "Name": {
      "title": [
        {
          "text": {
            "content": "{{ index_name }}"
          }
        }
      ]
    },
    "date": {
      "rich_text": [
        {
          "text": {
            "content": "{{ date }}"
          }
        }
      ]
    },
    "term": {
      "rich_text": [
        {
          "text": {
            "content": "{{ term }}"
          }
        }
      ]
    },
    "start": {
      "number": {{ start }}
    },
    "high": {
      "number": {{ high }}
    },
    "low": {
      "number": {{ low }}
    },
    "close": {
      "number": {{ close }}
    },
    "average_short": {
      "number": {{ average_short }}
    },
    "average_middle": {
      "number": {{ average_middle }}
    },
    "average_long": {
      "number": {{ average_long }}
    },
    "note": {
      "rich_text": [
        {
          "text": {
            "content": "{{ note }}"
          }
        }
      ]
    }
  }
}

❺HTTPリクエストブロック

右上の認証APIキーをクリックして、
環境変数のAPIキーを入力します。

❻IF/ELIFブロック

HTTPリクエストブロックの
status_codeを見て、
送信が成功したか失敗したかを判定します。

❼終了ブロック

HTTPリクエストブロックのstatus_codeを出力させます。

さいごに

いかがでしたでしょうか。

このアプリ、
少しアレンジするだけで
いろんな場面で使えると思います。
ぜひ、試してみてください。

いいなと思ったら応援しよう！

よろしければサポートお願いします！いただいたサポートはクリエイターとしての活動費に使わせていただきます！