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的AI,获取对话返回结果，包含了两个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接口产出多轮对话实例
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
