common.title
Cloud support

Nobisuke

Dekisugi

RAG


autoQAOA
RAG for dev
Fortune telling app
Annealing

Community

Overview
Service overview
Terms of service

Privacy policy

Contact
Research

Sign in
Sign up
common.title

v0 by Vercel でフロントエンド + Difyでバックエンド

Yuichiro Minato

2024/09/30 13:09

こんちは、v0とDifyを両方触ってみて、フロントはv0でNextを書いてくれて、バックエンドはワークフローで処理を書いてくれるのでDifyが便利そうです。自分自身はフルスクラッチでPythonを書くことが多いのですが、PoCや簡単なトライアルはとても便利かと感じました。

v0だとNextできちんと処理がかけるのでDifyでAPIをONにして、APIキーを取得した上、それを使ってv0から処理をしてみました。

結果的には特に問題なく動かせました。PoC向けのクローズドなシステムであればAPIキーをハードコーディングしても問題ないかと思いますが、もちろんv0からは警告されます。

image

1、Difyでワークフローを作る。
2、Difyで左からAPIアクセスを選び、右上からAPIキーを発行
3、APIキーをコピーし、v0でDifyに処理を渡す。

Difyのdocumentによると、簡単なチャットは、

curl -X POST 'https://api.dify.ai/v1/chat-messages'
--header 'Authorization: Bearer {api_key}'
--header 'Content-Type: application/json'
--data-raw '{ "inputs": {}, "query": "ここにクエリ", "response_mode": "streaming", "conversation_id": "", "user": "abc-123", "files": [ { "type": "image", "transfer_method": "remote_url", "url": "https://cloud.dify.ai/logo/logo-site.png" } ] }'

となっています。filesとかはいらないのと、api_keyはheaderに入ってます。
response_modeはstreamingがきちんと処理できればいいですが、拘らない場合、blockingモードの方が扱いやすいです。
blockingモードのレスポンス例はDifyのドキュメントから、下記のようになります。

Response
{
    "event": "message",
    "message_id": "9da23599-e713-473b-982c-4328d4f5c78a",
    "conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2",
    "mode": "chat",
    "answer": "iPhone 13 Pro Max specs are listed here:...",
    "metadata": {
        "usage": {
            "prompt_tokens": 1033,
            "prompt_unit_price": "0.001",
            "prompt_price_unit": "0.001",
            "prompt_price": "0.0010330",
            "completion_tokens": 128,
            "completion_unit_price": "0.002",
            "completion_price_unit": "0.001",
            "completion_price": "0.0002560",
            "total_tokens": 1161,
            "total_price": "0.0012890",
            "currency": "USD",
            "latency": 0.7682376249867957
        },
        "retriever_resources": [
            {
                "position": 1,
                "dataset_id": "101b4c97-fc2e-463c-90b1-5261a4cdcafb",
                "dataset_name": "iPhone",
                "document_id": "8dd1ad74-0b5f-4175-b735-7d98bbbb4e00",
                "document_name": "iPhone List",
                "segment_id": "ed599c7f-2766-4294-9d1d-e5235a61270a",
                "score": 0.98457545,
                "content": "\"Model\",\"Release Date\",\"Display Size\",\"Resolution\",\"Processor\",\"RAM\",\"Storage\",\"Camera\",\"Battery\",\"Operating System\"\n\"iPhone 13 Pro Max\",\"September 24, 2021\",\"6.7 inch\",\"1284 x 2778\",\"Hexa-core (2x3.23 GHz Avalanche + 4x1.82 GHz Blizzard)\",\"6 GB\",\"128, 256, 512 GB, 1TB\",\"12 MP\",\"4352 mAh\",\"iOS 15\""
            }
        ]
    },
    "created_at": 1705407629
}

適切に処理できれば問題ないですが、Streamingだとひと工夫必要でしょうか。この例題をそのままv0のプロンプトに渡せばよしなにAPIを処理してくれました。

v0とDifyの連携はAPIキーの扱いだけ問題がありますが、特に難しいところなくできました。Difyのドキュメントをv0に渡せばうまくやってくれました。個人的にはあまり使わない連携ですが、デモとか見せたい場合には手軽にできて便利かもしれません。

以上です。

© 2024, blueqat Inc. All rights reserved