Streamlit Project: Develop Web Intelligent Dialogue Application Based on Xunfei Xinghuo Cognitive Big Model

1 Introduction

HKUST Xunfei released the Xunfei Cognitive Model V2.0 on August 15, 2023 , which is a new generation of cognitive intelligence model that integrates cross-domain knowledge and language understanding capabilities. The day before yesterday, the blogger conducted a detailed analysis of the Xunfei Cognitive Model. For details, please refer to the blog post " Spark of the Spark: The Actual Experience of Using the Domestic Xunfei Xunhuo Model (Compared with GPT) ".

In general, the Xunfei Xinghuo Cognitive Big Model shows excellent overall performance, showing excellent levels in many fields, and its unique ability of multi-modal interaction makes it applicable to a wider range of fields. Of particular note are the semantic tests, common sense tests, and event classification tests. These test items reveal the differences between Xunfei’s cognitive model and GPT. In common sense and event classification tests, Xunfei Cognitive Big Model showed better performance, while in semantic tests, GPT was even better in accurately identifying irony!

本篇博文聚焦于利用讯飞星火认知大模型的API，基于Streamlit构建个人Web智能对话应用的实践案例。

In this article, we will discuss in depth how to use the powerful functions of Xunfei Xinghuo Cognitive Big Model to endow personal web applications with the ability of intelligent dialogue. We will introduce the steps and technical details of the entire development process, and share some key usage experiences and optimization strategies. Whether you are a developer interested in the development of intelligent dialogue applications, or a researcher who wants to understand the performance of Xunfei Xinghuo cognitive large model in practical applications, this article will provide you with valuable reference and practical experience.

If you are interested in Streamlit and want to learn more about it, I strongly recommend you to pay attention to my column - " The Most Complete Streamlit Tutorial ".

In this column, I will share a series of in-depth and detailed Streamlit tutorials and practical cases. We will explore the wide application of Streamlit in web application development, covering all aspects from basic concepts to advanced functions.

Through these tutorials, you will gain a deep understanding of Streamlit's core principles, workflow, and common usage. I will analyze the various components and functions of Streamlit, and provide practical sample codes and tips to help you get started quickly and build amazing interactive applications.

2 API acquisition

To use the functions of Xunfei Spark Cognitive Big Model, you need to submit an application form ( official website address ) to Xunfei official .

Click "API Test Application" on the page, fill in and create the application according to the instructions, and after filling in the correct information, you only need to wait a day or two before receiving the SMS notification from Xunfei. Then, you can log in to the developer workbench to obtain key information such as appid, api_secret, and api_key.

3 The calling code of the official document

In order to use the Streamlit tool in the Python environment, the blogger downloaded the Python call example in the official documentation of Xunfei to better understand and apply the tool. You can download the official documentation via the following link: Download Link

In the unzipped folder, you will find two Python files: SparkApi.py and test.py. Among them, SparkApi.py is the official library file provided by Xunfei, and no modification is required. And our focus will be on the research and modification of the test.py file.

In your environment, in order to successfully build the project described in this blog post, you need to install at least the following necessary libraries:

pip install streamlit
pip install websocket-client
pip install streamlit_chat

Let's take a look at the code in the test.py file:

import SparkApi
#以下密钥信息从控制台获取
appid = "XXXXXXXX"     #填写控制台中获取的 APPID 信息
api_secret = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"   #填写控制台中获取的 APISecret 信息
api_key ="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"    #填写控制台中获取的 APIKey 信息

#用于配置大模型版本，默认“general/generalv2”
domain = "general"   # v1.5版本
# domain = "generalv2"    # v2.0版本
#云端环境的服务地址
Spark_url = "ws://spark-api.xf-yun.com/v1.1/chat"  # v1.5环境的地址
# Spark_url = "ws://spark-api.xf-yun.com/v2.1/chat"  # v2.0环境的地址


text =[]

# length = 0

def getText(role,content):
    jsoncon = {
    
    }
    jsoncon["role"] = role
    jsoncon["content"] = content
    text.append(jsoncon)
    return text

def getlength(text):
    length = 0
    for content in text:
        temp = content["content"]
        leng = len(temp)
        length += leng
    return length

def checklen(text):
    while (getlength(text) > 8000):
        del text[0]
    return text
    


if __name__ == '__main__':
    text.clear
    while(1):
        Input = input("\n" +"我:")
        question = checklen(getText("user",Input))
        SparkApi.answer =""
        print("星火:",end = "")
        SparkApi.main(appid,api_key,api_secret,Spark_url,domain,question)
        getText("assistant",SparkApi.answer)
        # print(str(text))

在上述代码中，我们需要从控制台获取以下信息：appid、api_secret、api_key。为了确保代码顺利运行，我们需要将 domain 和 Spark_url 更改为 V2.0 版本。

此外，确保 SparkApi.py 文件与 test.py 文件在同一目录下，以便能够轻松地进行导入操作。同样，在将此功能嵌入到 Streamlit 网页项目时，也需要遵循同样的文件路径规则和导入方式。

These information are the credentials and authentication information necessary to access Xunfei API. You can get this information in iFLYTEK's developer console. Make sure that the credential information you enter is correct, so that you can normally connect to the Xunfei API and obtain the required data and results.

The following are the results of the operation:

very good! The iFLYTEK API has been successfully called and the desired result has been obtained. Now, we can embed this function into a Streamlit web page for user convenience and experience.

4 Construction of Streamlit web page

4.1 Code and effect display

Based on the official sample code, we have successfully built a webpage using Streamlit. The following is the complete web page source code (the comments are very detailed):

import streamlit as st
from streamlit_chat import message

import SparkApi

# 以下密钥信息从控制台获取
appid = "XXXXXXXX"  # 填写控制台中获取的 APPID 信息
api_secret = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"  # 填写控制台中获取的 APISecret 信息
api_key = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"  # 填写控制台中获取的 APIKey 信息

# 用于配置大模型版本，默认“general/generalv2”
# domain = "general"   # v1.5版本
domain = "generalv2"  # v2.0版本
# 云端环境的服务地址
# Spark_url = "ws://spark-api.xf-yun.com/v1.1/chat"  # v1.5环境的地址
Spark_url = "ws://spark-api.xf-yun.com/v2.1/chat"  # v2.0环境的地址

text = []  # 用于存储对话内容的列表

def getText(role, content):
    """
    构造包含角色和内容的对话信息，并添加到对话列表中
    
    参数：
    role (str): 对话角色，可以是 "user"（用户）或 "assistant"（助手）
    content (str): 对话内容
    
    返回值：
    text (list): 更新后的对话列表
    """
    jsoncon = {
    
    }
    jsoncon["role"] = role
    jsoncon["content"] = content
    text.append(jsoncon)
    return text

def getlength(text):
    """
    计算对话列表中所有对话内容的字符长度之和
    
    参数：
    text (list): 对话列表
    
    返回值：
    length (int): 对话内容的字符长度之和
    """
    length = 0
    for content in text:
        temp = content["content"]
        leng = len(temp)
        length += leng
    return length

def checklen(text):
    """
    检查对话列表中的对话内容字符长度是否超过限制（8000个字符）
    如果超过限制，删除最早的对话内容，直到满足字符长度限制
    
    参数：
    text (list): 对话列表
    
    返回值：
    text (list): 更新后满足字符长度限制的对话列表
    """
    while getlength(text) > 8000:
        del text[0]
    return text

if __name__ == '__main__':
    # 在 Streamlit 网页上显示欢迎文本
    st.markdown("#### 我是讯飞星火认知模型机器人，我可以回答您的任何问题！")
    
    # 初始化对话历史和生成的响应列表
    if 'generated' not in st.session_state:
        st.session_state['generated'] = []
    if 'past' not in st.session_state:
        st.session_state['past'] = []
    
    # 获取用户输入的问题
    user_input = st.text_input("请输入您的问题:", key='input')
    
    if user_input:
        # 构造用户输入的对话信息
        question = checklen(getText("user", user_input))
        
        # 调用 SparkApi 中的函数进行问题回答
        SparkApi.answer = ""
        print("星火:", end="")
        SparkApi.main(appid, api_key, api_secret, Spark_url, domain, question)
        output = getText("assistant", SparkApi.answer)
        
        # 将用户输入和生成的响应添加到对话历史和生成的响应列表中
        st.session_state['past'].append(user_input)
        st.session_state['generated'].append(str(output[1]['content']))
        
    if st.session_state['generated']:
        # 在网页上显示对话历史和生成的响应
        for i in range(len(st.session_state['generated']) - 1, -1, -1):
            message(st.session_state["generated"][i], key=str(i))
            message(st.session_state['past'][i], is_user=True, key=str(i) + '_user')

In the code, replace the following variables with the information you got from Xunfei Open Platform:

• appid: Replace with your APPID.
• api_secret: Replace with your APISecret.
• api_key: Replace with your APIKey.

Terminal to run the Streamlit application:

streamlit run your_app.py

4.2 Streamlit related knowledge points

1. st.markdown(): Used to display Markdown-formatted text in Streamlit applications.
2. st.text_input(): Used to create a text input box in the Streamlit application to obtain user input.
3. st.session_state: Used to store and access session state in Streamlit applications, and can pass data between different functions. In this code, use st.session_state to save and get the conversation history and generated responses.
4. st.session_state['generated'] and st.session_state['past']: These variables are used to store the conversation history and the list of generated responses.
5. message() function: This is a custom Streamlit component for displaying messages. In this code, the message() function is used to display the dialog history and generated responses.

If you are interested in Streamlit and want to learn more about it, I strongly recommend you to pay attention to my column - " The Most Complete Streamlit Tutorial ".

5 Conclusion

This blog post describes how to build a Q&A application using Streamlit and Xunfei Xinghuo Cognitive Model Robot. By integrating the API of the Xunfei open platform and the custom Streamlit component, we can realize the real-time question-and-answer function, and display the conversation history and generated responses on the web page.

Before using this code, you need to complete some preparatory work, including registering an account on the Xunfei open platform, creating an application and obtaining relevant information. Then, you need to install the required Python libraries and modify the provided source code to apply to your own API key and address information. Finally, just run the Streamlit application and visit the generated URL in your browser.

In the process of implementing the question-and-answer function, we learned some knowledge points related to Streamlit, including displaying Markdown text, creating text input boxes, storing session state, etc. These features make it easy to build interactive web applications.

With the introduction of this blog post, you can now start building your own question-answering application using Xunfei Xinghuo Cognitive Model Robot. Hope this helps, and good luck with your development!