零、最终效果
Unity结合大模型实现智能问答功能
一、文本自动换行效果
新建一个Text文本,设置文本的最大宽度
然后添加Content Size Fitter组件,Vertical Fit选择Preferred Size
二、背景随文本长度变化效果
新建一个Image作为文本的背景,并将其作为文本的父对象
编写脚本,让图片跟随文本长度的变化而变化
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;public class Bubble : MonoBehaviour
{// Start is called before the first frame update[Header("气泡内容")] public Text texContentt;[Header("气泡背景图")] public Image imageBG;[Header("文本与气泡四周的距离")] public float padding = 2f;//四周的距离// Update is called once per framevoid Update(){float textWidth = texContentt.preferredWidth;//当前文本内容在当前字体设置下,完全显示所需的最小宽度(以像素为单位)float textHeight = texContentt.preferredHeight;//当前文本内容在当前字体设置下,完全显示所需的最小高度(以像素为单位)if (texContentt.rectTransform.rect.width>textWidth){//当文本内容没有超出最大宽度时imageBG.rectTransform.sizeDelta = new Vector2(textWidth+padding*2, textHeight+padding*2);this.GetComponent<RectTransform>().sizeDelta = new Vector2(textWidth + padding * 2, textHeight + padding * 2);texContentt.rectTransform.anchoredPosition = new Vector2(padding,-padding); }else{//当文本内容超出最大宽度时,保持最大宽度,只改变高度imageBG.rectTransform.sizeDelta = new Vector2(texContentt.rectTransform.rect.width+padding*2, textHeight+padding*2);this.GetComponent<RectTransform>().sizeDelta = new Vector2(texContentt.rectTransform.rect.width + padding * 2, textHeight + padding * 2);texContentt.rectTransform.anchoredPosition = new Vector2(padding, -padding);}}}
三、文本流式输出(打字机)效果
通过协程实现文本流式输出效果
/// <summary>/// 模拟打字机效果/// </summary>/// <param name="bubbleAnswer">要模拟的气泡</param>/// <param name="content">气泡文本的全部内容</param>/// <returns></returns>IEnumerator showText(GameObject bubbleAnswer,string content,PlayAudioButton playAudioButton){float beforeHeight = bubbleAnswer.GetComponent<Bubble>().texContentt.preferredHeight;for (int i = 0; i < content.Length+1; i++){bubbleAnswer.GetComponent<Bubble>().texContentt.text = content.Substring(0, i);yield return new WaitForSeconds(0.1f);}playAudioButton.AddPlayAudioButton(new Vector2(380f, nowHegight + bubbleInterval + 30),gameObjectContent);}
四、文本流式输出介绍显示语音播报按钮效果
按钮在文本流式显示结束后在进行添加,在发送问题时进行销毁
/// <summary>/// 新建语音播报按钮/// </summary>/// <param name="vector2">位置</param>/// <param name="gameObject">父对象</param>public void AddPlayAudioButton(Vector2 vector2,Transform gameObject){gameObjectPlayAudio = Instantiate(this.gameObject, gameObject);gameObjectPlayAudio.GetComponent<RectTransform>().anchoredPosition = vector2;}/// <summary>/// 语音播报按钮销毁方法/// </summary>public void DestroyPlayAudioButton(){Destroy(gameObjectPlayAudio);}
五、完整的智能问答界面ui逻辑
void SendQustion(){//发送新的问题前先将上次的语音内容和语音按钮进行删除if (playAudioButton.gameObjectPlayAudio!=null){playAudioButton.DestroyPlayAudioButton(); }//首先,发送问题,并添加问题气泡qaControl.AddBubble("question", inputFieldQuestion.text);//将问题发送给大模并得到回答StartCoroutine(llm.SendQueryToModel(inputFieldQuestion.text, conversationId, success =>{//输入框内容清空inputFieldQuestion.text = "";//将得到的回答转为语音tts.StartTTS(success, ttsSucess =>{playAudioButton.audioSource.clip = ttsSucess; });//添加回答气泡qaControl.AddBubble("answer", success);}));}