基于Streamlit和OpenAI大模型的Chatbot App支持图片的多模态输入

一、背景与历史

随着人工智能技术的飞速发展，人机交互方式正经历着前所未有的变革。传统的基于命令行或图形用户界面的交互方式逐渐显现出其局限性，无法满足用户对于自然、高效、个性化交互的需求。多模态交互技术应运而生，它融合了语音、图像、文本等多种感知和表达方式，为用户提供了更加自然、直观、便捷的交互体验。

Streamlit 是一个开源框架，使开发人员能够快速构建和共享用于机器学习和数据科学项目的交互式 Web 应用程序。它提供了一种简洁的方式，通过几行代码即可创建图像、文本、音频和视频的交互控件，极大地降低了构建大模型应用的门槛。

OpenAI 是一家致力于推动人工智能技术研究和应用的公司，其提供的 API 接口允许开发者轻松集成先进的人工智能模型，如 GPT-3.5-turbo 等。这些接口支持多种输入和输出格式，包括文本、图像等，为多模态交互的实现提供了坚实基础。

二、业务场景

1. 智能客服：结合图像识别和自然语言处理，提供更精准的视觉引导和问题解答。
2. 内容审核：自动识别和分析图文内容，提高审核效率和准确性。
3. 智能教育：通过图像理解增强教学内容，为学生提供更直观的知识讲解。
4. 医疗诊断：辅助医生分析医学影像，提供初步诊断建议。
5. 智能零售：实现商品图像的自动描述和推荐，提升购物体验。

三、Java代码实现

由于 Streamlit 和 OpenAI 的 API 主要使用 Python 进行开发，因此下面的示例将使用 Python 实现。但我们可以理解其背后的逻辑，并将其应用于其他编程语言中。

示例一：基础版 Chatbot

代码实现：

python复制代码
import openai
import os
import streamlit as st
# 读取环境变量中的api_key
openai.api_key = os.environ.get("OPENAI_API_KEY")
if "prompts" not in st.session_state:
    st.session_state['prompts'] = [{"role": "system", "content": "您是一个乐于助人的助手。尽量简洁明了地回答问题，并带有一点幽默表达。"}]
if "generated" not in st.session_state:
    st.session_state['generated'] = []
if "past" not in st.session_state:
    st.session_state['past'] = []
def generate_response(prompt):
    st.session_state['prompts'].append({"role": "user", "content": prompt})
    completion = openai.ChatCompletion.create(
        model="gpt-3.5-turbo", messages=st.session_state['prompts']
    )
    message = completion.choices[0].message.content
return message
def end_click():
    st.session_state['prompts'] = [{"role": "system", "content": "您是一个乐于助人的助手。尽量简洁明了地回答问题，并带有一点幽默表达。"}]
    st.session_state['past'] = []
    st.session_state['generated'] = []
    st.session_state['user'] = ""
def chat_click():
if st.session_state['user'] != '':
        chat_input = st.session_state['user']
        output = generate_response(chat_input)
        st.session_state['past'].append(chat_input)
        st.session_state['generated'].append(output)
        st.session_state['prompts'].append({"role": "assistant", "content": output})
        st.session_state['user'] = ""
st.image("./logo.png", width=80)
st.title("我的聊天机器人")
user_input = st.text_input("输入:", key="user")
chat_button = st.button("发送", on_click=chat_click)
end_button = st.button("新聊天", on_click=end_click)
if st.session_state['generated']:
for i in range(0, len(st.session_state['generated']), 1):
        st.markdown(f"**{st.session_state['past'][i]}**")
        st.markdown(f"**{st.session_state['generated'][i]}**")

优缺点：

• 优点：

• • 实现简单，易于上手。
  • 支持多轮对话，可以记住历史记录。
  • 可以利用 OpenAI 的强大模型生成回复。

• 缺点：

• • 仅支持文本输入，不支持多模态输入。
  • 没有图形用户界面，用户体验相对单一。

流程图：

复制代码
用户输入 -> Chatbot接收输入 -> 调用OpenAI API生成回复 -> Chatbot显示回复 -> 用户继续输入

如何上手：

1. 安装必要的库：pip install openai streamlit
2. 创建 Python 文件，并复制上述代码。
3. 在环境变量中设置 OpenAI 的 API_KEY。
4. 运行 Python 文件：streamlit run your_file.py

示例二：支持图片输入的多模态 Chatbot

代码实现：

python复制代码
import openai
import os
import streamlit as st
from PIL import Image
# 读取环境变量中的api_key
openai.api_key = os.environ.get("OPENAI_API_KEY")
if "prompts" not in st.session_state:
    st.session_state['prompts'] = [{"role": "system", "content": "您是一个乐于助人的助手。尽量简洁明了地回答问题，并带有一点幽默表达。"}]
if "generated" not in st.session_state:
    st.session_state['generated'] = []
if "past" not in st.session_state:
    st.session_state['past'] = []
def generate_response(prompt):
    st.session_state['prompts'].append({"role": "user", "content": prompt})
    completion = openai.ChatCompletion.create(
        model="gpt-3.5-turbo", messages=st.session_state['prompts']
    )
    message = completion.choices[0].message.content
return message
def end_click():
    st.session_state['prompts'] = [{"role": "system", "content": "您是一个乐于助人的助手。尽量简洁明了地回答问题，并带有一点幽默表达。"}]
    st.session_state['past'] = []
    st.session_state['generated'] = []
    st.session_state['user'] = ""
def chat_click():
if st.session_state['user'] != '':
        chat_input = st.session_state['user']
        output = generate_response(chat_input)
        st.session_state['past'].append(chat_input)
        st.session_state['generated'].append(output)
        st.session_state['prompts'].append({"role": "assistant", "content": output})
        st.session_state['user'] = ""
def image_upload():
    uploaded_image = st.file_uploader("上传图片", type=["jpg", "png"])
if uploaded_image:
        image = Image.open(uploaded_image)
        image_url = st.image(image, caption="上传的图片")
        prompt = f"请描述这张图片: {image_url}"
        output = generate_response(prompt)
        st.session_state['past'].append(prompt)
        st.session_state['generated'].append(output)
        st.session_state['prompts'].append({"role": "assistant", "content": output})
st.image("./logo.png", width=80)
st.title("我的多模态聊天机器人")
st.write("你可以输入文本或上传图片与机器人交互")
user_input = st.text_input("输入:", key="user")
chat_button = st.button("发送", on_click=chat_click)
image_button = st.button("上传图片", on_click=image_upload)
end_button = st.button("新聊天", on_click=end_click)
if st.session_state['generated']:
for i in range(0, len(st.session_state['generated']), 1):
        st.markdown(f"**{st.session_state['past'][i]}**")
        st.markdown(f"**{st.session_state['generated'][i]}**")

优缺点：

• 优点：

• • 支持文本和图片输入，实现了多模态交互。
  • 可以利用 OpenAI 的强大模型生成对图片的描述。

• 缺点：

• • 图片处理相对简单，没有进行复杂的图像识别。
  • 用户体验仍需进一步优化，例如增加图片预览功能。

流程图：

复制代码
用户输入文本 -> Chatbot接收输入 -> 调用OpenAI API生成回复 -> Chatbot显示回复
用户上传图片 -> Chatbot接收图片 -> 调用OpenAI API生成图片描述 -> Chatbot显示描述
用户继续输入 -> 重复上述流程

如何上手：

1. 安装必要的库：pip install openai streamlit Pillow
2. 创建 Python 文件，并复制上述代码。
3. 在环境变量中设置 OpenAI 的 API_KEY。
4. 运行 Python 文件：streamlit run your_file.py

示例三：高级版多模态 Chatbot（支持文本、图片、音频和视频）

代码实现：

python复制代码
import openai
import os
import streamlit as st
from PIL import Image
# 读取环境变量中的api_key
openai.api_key = os.environ.get("OPENAI_API_KEY")
if "prompts" not in st.session_state:
    st.session_state['prompts'] = [{"role": "system", "content": "您是一个乐于助人的助手。尽量简洁明了地回答问题，并带有一点幽默表达。"}]
if "generated" not in st.session_state:
    st.session_state['generated'] = []
if "past" not in st.session_state:
    st.session_state['past'] = []
def generate_response(prompt):
    st.session_state['prompts'].append({"role": "user", "content": prompt})
    completion = openai.ChatCompletion.create(
        model="gpt-3.5-turbo", messages=st.session_state['prompts']
    )
    message = completion.choices[0].message.content
return message
def end_click():
    st.session_state['prompts'] = [{"role": "system", "content": "您是一个乐于助人的助手。尽量简洁明了地回答问题，并带有一点幽默表达。"}]
    st.session_state['past'] = []
    st.session_state['generated'] = []
    st.session_state['user'] = ""
def chat_click():
if st.session_state['user'] != '':
        chat_input = st.session_state['user']
        output = generate_response(chat_input)
        st.session_state['past'].append(chat_input)
        st.session_state['generated'].append(output)
        st.session_state['prompts'].append({"role": "assistant", "content": output})
        st.session_state['user'] = ""
def image_upload():
    uploaded_image = st.file_uploader("上传图片", type=["jpg", "png"])
if uploaded_image:
        image = Image.open(uploaded_image)
        image_url = st.image(image, caption="上传的图片")
        prompt = f"请描述这张图片: {image_url}"
        output = generate_response(prompt)
        st.session_state['past'].append(prompt)
        st.session_state['generated'].append(output)
        st.session_state['prompts'].append({"role": "assistant", "content": output})
def audio_upload():
    uploaded_audio = st.file_uploader("上传音频", type=["wav", "mp3"])
if uploaded_audio:
        audio_url = st.audio(uploaded_audio)
        prompt = f"请转录这段音频: {audio_url}"
        output = generate_response(prompt)
        st.session_state['past'].append(prompt)
        st.session_state['generated'].append(output)
        st.session_state['prompts'].append({"role": "assistant", "content": output})
def video_upload():
    uploaded_video = st.file_uploader("上传视频", type=["mp4"])
if uploaded_video:
        video_url = st.video(uploaded_video)
        prompt = f"请描述这段视频内容: {video_url}"
        output = generate_response(prompt)
        st.session_state['past'].append(prompt)
        st.session_state['generated'].append(output)
        st.session_state['prompts'].append({"role": "assistant", "content": output})
st.image("./logo.png", width=80)
st.title("我的高级多模态聊天机器人")
st.write("你可以输入文本、上传图片、音频或视频与机器人交互")
user_input = st.text_input("输入:", key="user")
chat_button = st.button("发送", on_click=chat_click)
image_button = st.button("上传图片", on_click=image_upload)
audio_button = st.button("上传音频", on_click=audio_upload)
video_button = st.button("上传视频", on_click=video_upload)
end_button = st.button("新聊天", on_click=end_click)
if st.session_state['generated']:
for i in range(0, len(st.session_state['generated']), 1):
        st.markdown(f"**{st.session_state['past'][i]}**")
        st.markdown(f"**{st.session_state['generated'][i]}**")

优缺点：

• 优点：

• • 支持文本、图片、音频和视频输入，实现了全面的多模态交互。
  • 可以利用 OpenAI 的强大模型生成对多种类型数据的回复。

• 缺点：

• • 对音频和视频的处理相对简单，没有进行复杂的语音识别和视频分析。
  • 用户体验需要进一步优化，例如增加实时预览和反馈功能。

流程图：

复制代码
用户输入文本 -> Chatbot接收输入 -> 调用OpenAI API生成回复 -> Chatbot显示回复
用户上传图片 -> Chatbot接收图片 -> 调用OpenAI API生成图片描述 -> Chatbot显示描述
用户上传音频 -> Chatbot接收音频 -> 调用OpenAI API进行音频转录 -> Chatbot显示转录结果
用户上传视频 -> Chatbot接收视频 -> 调用OpenAI API生成视频描述 -> Chatbot显示描述
用户继续输入 -> 重复上述流程

如何上手：

1. 安装必要的库：pip install openai streamlit Pillow
2. 创建 Python 文件，并复制上述代码。
3. 在环境变量中设置 OpenAI 的 API_KEY。
4. 运行 Python 文件：streamlit run your_file.py

四、总结

通过本文的介绍，我们了解了基于 Streamlit 和 OpenAI 大模型的 Chatbot App 的开发背景、历史、业务场景以及三种不同示例的实现。从基础版到高级版，每个示例都有其独特的优缺点和适用场景。通过不断优化和扩展功能，我们可以构建出更加智能、高效、个性化的多模态交互应用。

未来，随着人工智能技术的不断进步和应用场景的不断拓展，多模态交互技术将为我们带来更加自然、高效、个性化的交互体验。Streamlit 和 OpenAI 作为这一领域的佼佼者，将继续发挥重要作用，推动人机交互方式的变革和发展。