OpenAI调用接口多轮对话Multi Turn Multi Agent 多轮多角色对话调试和可视化工具Dialogue Visualization

1. 调用OpenAI多轮对话接口对话可视化前端在线工具

伴随着生成式人工智能技术发展，进2年涌现出大语言模型LLM/Agent系统/AI推理等众多方向的技术项目和论文。其中对话系统，智能体交互是用户通过UX界面和AI系统进行交互，这种交互有时候也是多模态（用户输入文字/语音/图像）等等。在调用OpenAI 的对话接口时候，有时候需要把对话结果打印出来检查是否有bug，JSON数据格式就比较难看出来了，尤其是有多角色的多轮对话。这个时候可以借助一些在线的"对话"可视化的工具 (Online Dialogue Visualization Tool) DeepNLP Dialogue Visualization Tool，方便产品经理，算法研发，学术研究过程中可视化多智能体多轮对话 ( Multi-Agent Multi-TurnDialogue Visualization)。用户只用把多轮对话的Json数据输入，前端渲染的图片和分享H5 链接可以方便加到产品原型文档，学术论文，技术博客中。

1.1 以一个OpenAI的API产出多轮对话为例

多轮对话轮流调用OpenAI o1 的API, 获取对话返回结果，包含了两个key: 'role'和 'content'，最终得到一个对话结果的list的json格式。

  [

    {"role":"user","content":"User message 1"},

  {"role":"assistant","content":"Assistant message 1"},

  {"role":"system","content":"System message 1"},

  {"role":"user","content":"User message 2"},

  {"role":"assistant","content":"Assistant message 2"},

  {"role":"system","content":"System message 3"}

  ]

OpenAI调用Complete接口产出多轮对话ChatGPT 实例

import os

import openai

from dotenv import load_dotenv

from flask import Flask, render_template, request

load_dotenv()  # load env vars from .env file

openai.api_key = os.getenv("OPENAI_API_KEY")

app = Flask(__name__)

# Global variable to hold the conversation

conversation = []

@app.route("/get_response", methods=["GET", "POST"])

def get_response():

   global conversation

   message = request.args.get("message")

   conversation.append({"role": "user", "content": message})

   completion = openai.ChatCompletion.create(

       model="gpt-3.5-turbo",

       messages=conversation

   )

   response = completion["choices"][0]["message"]["content"]

   conversation.append({"role": "assistant", "content": response})

   return response

1.2 JSON数据效果检查

JSON对话数据有时候看着不是很直观，可以借助一些对话可视化工具，给每个角色配置对应的头像，然后可以方便截图汇报。适当在原先的对话格式上加入几个JSON的key

就可以完成：

产出Json数据：

• agent: 定义对话角色ID，以及每个角色的 头像URL,我们定义3个对话角色：老板(Agent)，同事A(Agent)，Human(用户)。

例如我们网上搜到的icon：

特朗普Avatar: https://t11.baidu.com/it/u=1413379684,507496555&fm=58

马斯克Avatar: https://t11.baidu.com/it/u=2978706694,1411251294&fm=58

多智能体：Multi-Agent中每个角色的ID放到 "agent" 这个key下面，包含两个字段：id,avatar，方便用户更改对话模拟器的Agent头像的URL。

• messages：包含调用OpenAI产出的 对话列表，每个对话的message包含了key为role和content
• 其他可选的key，如 dialogue_title, dialogue_background

{

 "agent": {

   "老板": {

     "id": "老板",

     "avatar": "https://t11.baidu.com/it/u=2978706694,1411251294&fm=58"

   },

   "同事A": {

     "id": "同事A",

     "avatar": "https://t11.baidu.com/it/u=1413379684,507496555&fm=58"

   },

   "Human": {

     "id": "Human",

     "avatar": "/scripts/img/dialogue_visualization/male_icon_1.webp"

   }

 },

 "messages": [

   {

     "timestamp": "2024-09-19 17:06:11",

     "id": "老板",

     "content": "你为什么刚刚离开工位了10分钟",

     "role": "ai"

   },

   {

     "timestamp": "2024-09-19 17:07:11",

     "id": "Human",

     "content": "我去一趟卫生间",

     "role": "human"

   },

   {

     "timestamp": "2024-09-19 17:06:19",

     "id": "同事A",

     "content": "是吗? 你今天可已经去了不下5次了，我们都在忙着出报表，你还真是闲哈",

     "role": "ai"

   },

   {

     "timestamp": "2024-09-19 17:07:11",

     "id": "Human",

     "content": "小仙男！",

     "role": "human"

   },

   {

     "timestamp": "2024-09-19 17:08:19",

     "id": "老板",

     "content": "好了我们还是要专业一些，不要内斗影响团队战斗力",

     "role": "ai"

   },

   {

     "timestamp": "2024-09-19 17:09:19",

     "id": "同事A",

     "content": "那要看这个人了。。。",

     "role": "ai"

   }

 ]

}

1.3 GUI方式输入Demo

1.4 Reference

http://www.deepnlp.org/blog/ai-agent-visualization-review-asynchronous-multi-agent-simulation

http://www.deepnlp.org/blog/dialogue-agent-multimodal-visualization-tools-for-ai-systems

http://www.deepnlp.org/workspace/dialogue_visualization

http://www.deepnlp.org/workspace/agent_visualization