利用react和chainlit开发大模型结果人工评测平台

news2024/9/21 14:45:32

项目背景

  利用LLM的prompt做了个简单的服务推荐助手，依据用户的提问找出合适的服务项目推荐给的用户。为了测评prompt的效果，使用react+chainlit开发了一个简单的效果测评平台。在该平台上，可以模拟用户向LLM发出问题，并对大模型返回的服务项目进行评判。其最终呈现结果如下：
在这里插入图片描述
鉴于后端prompt暂时无法公开，这里仅公开前端的react代码，至于后端代码可以参考chainlit官方提供的样例(https://github.com/Chainlit/cookbook/tree/main/custom-frontend)。
文件1:src/components/Page.tsx

import "./Page.css";
import {
  useChatInteract,
  IStep,
  useChatMessages
} from "@chainlit/react-client";
import { useState} from "react";
import {BiSolidDislike,BiDislike } from "react-icons/bi";

function Page() {
  const [inputValue, setInputValue] = useState("");
  const { sendMessage } = useChatInteract();
  const { messages } = useChatMessages();
  const [multiClickStates,setMultiClickStates]=useState([Array(5).fill(false)]);
  const [disableStates,setDisableStates]=useState([false]);
  const handleSendMessage = () => {
    const content = inputValue.trim();
    if (content) {
      const message = {
        name: "User",
        type: "user_message" as const,
        output: content,
      };
      sendMessage(message, []);
      setInputValue("");
    }
  };
  const handleSubmit=(index:number,length:number)=>{
    if (index===disableStates.length-1){
      setDisableStates((prevDisableStates)=>{
        const newDisableStates=[...prevDisableStates];
        newDisableStates[newDisableStates.length-1]=true;
        newDisableStates.push(false);
        return newDisableStates;
      });
      setMultiClickStates((prevClickStates)=>{
        const newMultiClickStates = [...prevClickStates];
        const clickLength=newMultiClickStates.length-1;
        newMultiClickStates[clickLength]=newMultiClickStates[clickLength].slice(0,length);
        newMultiClickStates.push(Array(5).fill(false));
        return newMultiClickStates;
      });
    }
  };

  const handleClick = (index:number) => {
    setMultiClickStates((prevClickStates)=>{
      const clickLength=prevClickStates.length-1;
      const newMultiClickStates = [...prevClickStates];
      newMultiClickStates[clickLength]=[...newMultiClickStates[clickLength]];
      newMultiClickStates[clickLength][index]=!newMultiClickStates[clickLength][index];
      return newMultiClickStates;
    });
  };

  const BotMessage = (output: string,idx:number) => {
    const result=JSON.parse(output);
    if (result.flag==="F"){
      return (
        <div>
          <div className="chat-message">{result.content}</div>
          {idx!==-1 && <button onClick={()=>handleSubmit(idx,0)} className="submit-button">
            {disableStates[idx]?<span>已提交</span>:<span>提交(必选)</span>}
          </button>}
        </div>
      )
    } else { 
      return (
        <div>
          <div className="chat-message">好的,根据您的问题我向您推荐以下服务:</div>
          {result.content.map((item:string,index:number)=>{
            return (
              <div className="chat-service-item" key={index}>
                <span>{item}</span>
                <div className="dislike-icon" onClick={()=>handleClick(index)}>
                  {multiClickStates[idx][index]?<BiSolidDislike size={24} className="dislike-clicked"/>:<BiDislike size={24} className="dislike-unclick"/>}
                </div>
              </div>
            )})
          }
          <button onClick={()=>handleSubmit(idx,result.content.length)} className="submit-button">
            {disableStates[idx]?<span>已提交</span>:<span>提交(必选)</span>}
          </button>
        </div>
      )
    } 
  };
      
  const renderMessage = (message: IStep,index:number) => {
    const dateOptions: Intl.DateTimeFormatOptions = {
      hour: "2-digit",
      minute: "2-digit",
    };
    const date = new Date(message.createdAt).toLocaleTimeString(
      undefined,
      dateOptions
    );
    if(message.type === "user_message") {
      return (
          <div key={message.id} className="chat-box-user">
            <div className="user-avatar">U</div>
            <div className="bot-user-content">
              <div className="user-icon">
                <div className="bot-user-name">{message.name}</div>
                <div className="bot-user-time">{date}</div>
              </div>
              <div className="user-chat-message">{message.output}</div>
            </div>
          </div>
      );
    } else {
        return (
          <div key={message.id} className="chat-box-bot">
            <div className="bot-avatar">B</div>
            <div className="bot-user-content">
              <div className="bot-icon">
                  <div className="bot-user-name">{message.name}</div>
                  <div className="bot-user-time">{date}</div>
              </div>
              {BotMessage(message.output,Math.floor(index/2)-1)}
            </div>
          </div>
        );
    };
  };
  return (
    <div className="chat-container">
      <div className="chat-box">
          {messages.map((message,index) => renderMessage(message,index))}
      </div>
      <div className="fixed-bottom">
        <input className="fixed-bottom-input" 
                type="text" 
                placeholder="输入你的问题..."
                value={inputValue}
                onChange={(e) => setInputValue(e.target.value)}
                onKeyUp={(e) => {
                  if (e.key === "Enter") {
                    handleSendMessage();
                  }
                }}>
        </input>
        <button onClick={handleSendMessage} className="button" type="submit">Send</button>
      </div>
    </div>
  );
}
export default Page;

文件2:src/components/Page.css

.chat-container{
    display: flex;
    flex-direction: column;
    align-items: center; /* 水平方向居中 */
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
  }
  .chat-box{
    height:550px;
    width:70%;
    overflow-y:auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
  }
  .chat-box-bot{
    align-self: flex-start;
    margin-bottom:10px;
  }
  .chat-box-user{
    align-self: flex-end;
    margin-bottom:10px;
  }
  @media (max-width: 991px) {
    .chat-box-bot,.chat-box-user {
      max-width: 100%;
    }
  }
  .bot-user-content{
    overflow:auto;
    margin-bottom:5px;
    padding-top:5px;
    padding-bottom:5px;
  }
  .user-avatar{
    float:right;
    width: 40px;
    height: 40px;
    background-color: #f92672;  
    display: flex;
    justify-content:center;
    align-items: center;
    border-radius: 50%;
    font-size: 24px;
    color: white;
    margin-left: 10px;
    font-weight:bold;
    margin-top:5px;
  }
  .bot-avatar{
    float:left;
    width: 40px;
    height: 40px;
    background-color: #f92672;  
    display: flex;
    justify-content:center;
    align-items: center;
    border-radius: 50%;
    font-size: 24px;
    color: white;
    margin-right: 10px;
    font-weight: bold;
    margin-top:5px;
  }
  .bot-icon{
    align-content: center;
    flex-wrap: wrap;
    display: flex;
    gap: 12px;
  }
  .user-icon{
    align-content: center;
    flex-wrap: wrap;
    display: flex;
    gap: 12px;
    text-align: right; 
    flex-direction: row-reverse; /* 让子元素从右到左排列 */  
    justify-content: flex-start; 
  }
  .bot-user-name{
    color: #000;
    font-feature-settings: "dlig" on;
    font: 700 16px Manrope, sans-serif;
  }
  .bot-user-time{
    color: #6b6b6b;
    font-feature-settings: "dlig" on;
    font: 400 16px/150% Manrope, -apple-system, Roboto, Helvetica,
      sans-serif;
  }
  @media (max-width: 991px) {
    .bot-user-time{
      max-width: 100%;
    }
  }
  .chat-message {
    color: #000;
    font-feature-settings: "dlig" on;
    margin-top: 4px;
    font: 400 18px/24px Manrope, -apple-system, Roboto, Helvetica,
      sans-serif;
    width:918px;
  }
  @media (max-width: 991px) {
    .chat-message {
      max-width: 100%;
    }
  }
  .user-chat-message{
    color: #000;
    font-feature-settings: "dlig" on;
    margin-top: 4px;
    font: 400 18px/24px Manrope, -apple-system, Roboto, Helvetica,
      sans-serif;
    text-align: right;
  }
  @media (max-width: 991px) {
    .user-chat-message {
      max-width: 100%;
    }
  }
  .chat-service-item{
    background-color:rgb(229, 246, 253);
    padding:15px;
    height:25px;
    border-radius: 12px 12px 12px 12px;
    margin: 10px 0px 10px 0px;
    font: 400 14px/24px Manrope, -apple-system, Roboto, Helvetica,sans-serif;
    color:rgb(1, 67, 97);
    position:relative;
    width:700px;
    line-height: 25px;
  }
  .dislike-icon{
    position:absolute;
    margin-top:2px;
    top:50%;
    right:50px;
    transform:translateY(-50%);
  }
  .dislike-clicked{
    color:rgb(1, 67, 97);
  }
  .dislike-unclicked{
    color:rgb(1, 67, 97);
  }
  .submit-button{
    height:45px;
    border-radius: 12px;
    width:100px;
    background-color:rgb(229, 246, 253);
    border: 0px;
    font: 400 14px/24px Manrope, -apple-system, Roboto, Helvetica,sans-serif;
    color:rgb(1, 67, 97);

  }
  .fixed-bottom {
    position: sticky;  
    padding-top:40px;
    bottom: 0;   
    z-index: 1000; 
    border-radius: 12px;
    display: flex;
    width: 100%;
    max-width: 850px;
    gap: 0px;
    line-height: 0%;
  }
  @media (max-width: 991px) {
    .fixed-bottom {
      max-width: 100%;
      flex-wrap: wrap;
      margin-bottom: 40px;
    }
  }
  .fixed-bottom-input {
    height:35px;
    font-feature-settings: "dlig" on;
    align-items: start;
    border-radius: 12px 12px 12px 12px;
    background-color: #ededed;
    color: #6b6b6b;
    justify-content: center;
    flex: 1;
    padding: 8px 8px 8px 8px;
    width:85%;
    font: 400 16px Manrope, sans-serif;
  }
  @media (max-width: 991px) {
    .fixed-bottom-input {
      max-width: 100%;
      padding-right: 20px;
    }
  }
  .button {
    justify-content: center;
    border-radius: 12px 12px 12px 12px;
    background-color: #000;
    font-family: Manrope, sans-serif;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
    text-align: center;
    padding: 8px 8px 8px 8px;
    margin-left:10px;
  }
  @media (max-width: 991px) {
    .button {
      white-space: initial;
    }
  }

文件3: App.tsx

import './App.css';
import Page from './components/Page';
import { useEffect } from "react";
import { sessionState, useChatSession } from "@chainlit/react-client";
import { useRecoilValue } from "recoil";

const userEnv = {};

function App() {
  const { connect } = useChatSession();
  const session = useRecoilValue(sessionState);
  useEffect(() => {
    if (session?.socket.connected) {
      return;
    }
    fetch("http://localhost:80/custom-auth")
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        connect({
          userEnv,
          accessToken: `Bearer: ${data.token}`,
        });
      });
  }, [connect]);
  return (
      <div className="App">
        <div className="App-container">
          <div className="title">意图识别效果评测平台</div>
          <Page />
        </div>
      </div>
  );
}
export default App;

文件4: App.css

.App {
  background-color: #FAFAFA;
  display: flex;
  justify-content: center;
  overflow: hidden;
  min-height: 100vh;
}
.App-container{
  min-height:100vh;
  width:100%;
  position: relative;
}
.title {
  align-self: start;
  color: #000;
  font-feature-settings: "dlig" on;
  text-align: center;
  font: 700 32px Manrope, sans-serif;
  margin-bottom: 25px;
  margin-top:25px;
}
@media (max-width: 991px) {
  .title {
    margin-left: 10px;
  }
}

文件5: index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { RecoilRoot } from "recoil";
import "./index.css";
import { ChainlitAPI, ChainlitContext } from "@chainlit/react-client";

const CHAINLIT_SERVER = "http://localhost:80/chainlit";

const apiClient = new ChainlitAPI(CHAINLIT_SERVER, "webapp");

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ChainlitContext.Provider value={apiClient}>
      <RecoilRoot>
        <App />
      </RecoilRoot>
    </ChainlitContext.Provider>
  </React.StrictMode>
);

目前版本还未完成将评测结果返回保存下来的功能，后续会补充上来。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1927716.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

阿里通义音频生成大模型 FunAudioLLM 开源

阿里通义音频生成大模型 FunAudioLLM 开源

简介 近年来&#xff0c;人工智能&#xff08;AI&#xff09;技术的进步极大地改变了人类与机器的互动方式&#xff0c;特别是在语音处理领域。阿里巴巴通义实验室最近开源了一个名为FunAudioLLM的语音大模型项目&#xff0c;旨在促进人类与大型语言模型&#xff08;LLMs&…
阅读更多...
【过题笔记】 7.15

【过题笔记】 7.15

Array Without Local Maximums 算法&#xff1a;动态规划 简要思路&#xff1a; 考虑左边的数跟当前位置的关系&#xff0c;不难想到只有三种情况&#xff1a;大于&#xff0c;小于&#xff0c;等于。 于是可以得到状态 f [ i ] [ j ] [ 0 / 1 / 2 ] f[i][j][0/1/2] f[i][j][…
阅读更多...
数据库的管理

数据库的管理

目录 远程连接的方式 修改数据库uuid流程 数据库的概念 关系型数据库 非关系型数据库 关系型数据和非关系型数据库优缺点 mysql的数据类型 数据库的管理 sql中的名词 sql语言的分类 1.DDL&#xff1a;创建库和表的语句 create 2.DML: 插入数据 insert 修改和更…
阅读更多...
内存函数(C语言)

内存函数(C语言)

内存函数 以下函数的头文件&#xff1a;string.h 针对内存块进行处理的函数 memcpy 函数原型&#xff1a; void* memcpy(void* destination, const void* source, size_t num);目标空间地址 源空间地址num&#xff0c;被拷贝的字节个数 返回目标空间的起始地…
阅读更多...
STM32智能医疗监测系统教程

STM32智能医疗监测系统教程

目录 引言环境准备智能医疗监测系统基础代码实现&#xff1a;实现智能医疗监测系统 4.1 数据采集模块 4.2 数据处理与控制模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景&#xff1a;医疗监测与管理问题解决方案与优化收尾与总结 1. 引言 智能医疗监测系统通…
阅读更多...
RocketMQ源码学习笔记：Producer发送消息流程

RocketMQ源码学习笔记：Producer发送消息流程

这是本人学习的总结&#xff0c;主要学习资料如下 马士兵教育rocketMq官方文档 目录 1、Overview2、验证消息3、查找路由4、选择消息发送队列4.1、选择队列的策略4.2、源码阅读4.2.1、轮询规避4.2.2、故障延迟规避4.2.2.1、计算规避时间4.2.2.2、选择队列 4.2.3、ThreadLocal的…
阅读更多...
正运动控制器：EtherCAT总线初始化

正运动控制器：EtherCAT总线初始化

1、EtherCAT总线初始化的目的 运动控制器的EtherCAT 总线接口可用于连接 EtherCAT 伺服驱动器和 EtherCAT 扩展模块&#xff0c;无论连接什么模块&#xff0c; EtherCAT 总线都需要编写一段 EtherCAT 总线初始化程序来进行电机和 EtherCAT 扩展模块的使能。使能之后的应用与脉…
阅读更多...
QT多线程下，信号槽分别在什么线程中执行，如何控制？

QT多线程下，信号槽分别在什么线程中执行，如何控制？

可以通过connect的第五个参数进行控制信号槽执行时所在的线程 connect有几种连接方式&#xff0c;直接连接、队列连接和 自动连接 直接连接&#xff08;Qt::DirectConnection&#xff09;&#xff1a;信号槽在信号发出者所在的线程中执行 队列连接&#xff08;Qt::QueuedConn…
阅读更多...
LeetCode-返回链表倒数第K个节点、链表的回文结构，相交链表

LeetCode-返回链表倒数第K个节点、链表的回文结构，相交链表

一、返回链表倒数第k个节点 . - 力扣&#xff08;LeetCode&#xff09; 本体思路参展寻找中间节点的方法&#xff0c;寻找中间节点是定义快慢指针&#xff0c;快指针每次走两步&#xff0c;慢指针每次走一步&#xff0c;当快指针为空或者快指针的下一个节点是空时&#xff0c;…
阅读更多...
vue实现提交时对不同板块的表单内容进行校验

vue实现提交时对不同板块的表单内容进行校验

需求 1、需要对第一个红色框框板块内所有带星号的地方进行校验&#xff0c;并将提示语显示到对应的输入框下面&#xff0c;如图&#xff1a; 2、第二个红色框框板块中&#xff0c;点击 “添加相关人员” 能实现对多人的添加功能&#xff0c;并且能绑定相对应的校验规则 3、在…
阅读更多...
linux进行redis的安装并使用RDB进行数据迁移

linux进行redis的安装并使用RDB进行数据迁移

现在有两台电脑&#xff0c;分别是A&#xff0c;B&#xff0c;现在我要把A电脑上的redis的数据迁移到B电脑上&#xff0c;B电脑上是没有安装redis的 1.找到A电脑的redis的版本 1.先启动A电脑的redis&#xff0c;一般来说&#xff0c;都是直接在linux的控制台输入&#xff1a;re…
阅读更多...
数据结构与算法（1）：递归函数的设计技巧

数据结构与算法（1）：递归函数的设计技巧

1.前言 哈喽小伙伴们大家好哦~从今天开始笔者就要开始正式学习数据结构与算法了&#xff0c;在这里写知识博客既是做一些学习笔记&#xff0c;又相当于给大家做知识分享咯&#xff0c;希望大家一起加油哦&#xff01; 2.正文 2.1递归的引入 在正式讲解递归之前&#xff0c;…
阅读更多...
创建鸿蒙手机模拟器（HarmonyOS Emulator）

创建鸿蒙手机模拟器（HarmonyOS Emulator）

文 | Promise Sun 一.前提条件&#xff1a; 鸿蒙项目开发需要使用模拟器进行开发测试&#xff0c;但目前想在DevEco Studio开发工具中使用模拟器就必须到华为官网进行报名申请&#xff0c;参加“鸿蒙模拟器&#xff08;HarmonyOS Emulator&#xff09;Beta活动申请”。 申请审…
阅读更多...
中间件的理解

中间件的理解

内容来源于学习网站整理。【一看就会】什么是前端开发的中间件&#xff1f;_哔哩哔哩_bilibili 每日八股文~白话说mq&#xff0c;消息中间件_哔哩哔哩_bilibili 例如&#xff1a; 1&#xff09;两个人打电话&#xff0c;中间的通信网络就是中间件。 2&#xff09;菜鸟驿站&…
阅读更多...
SpringBoot以及swagger的基本使用

SpringBoot以及swagger的基本使用

1、SpringBoot是什么&#xff1f; 一种快速开发、启动Spring的框架、脚手架 遵循“约定优于配置”的思想&#xff0c;使得能够快速创建和配置Spring应用 2、SpringBoot的核心特性 自动配置&#xff0c;一些依赖、默认配置都预设好了&#xff0c;减少了配置量起步依赖&#x…
阅读更多...
ROS2-Navigation2初体验:Gazebo“打不开”

ROS2-Navigation2初体验:Gazebo“打不开”

输入ros2 launch nav2_bringup tb3_simulation_launch.py headless:False后只能打开RVIZ而无法打开Gazebo的问题&#xff0c;多次尝试解决后发现只是多等待一会儿即可&#xff0c;在此给同样学习Navigation2的朋友们提个醒 。 Getting Started — Nav2 1.0.0 documentation 1…
阅读更多...
Mindspore框架CycleGAN模型实现图像风格迁移|（二）实例数据集（苹果2橘子）

Mindspore框架CycleGAN模型实现图像风格迁移|（二）实例数据集（苹果2橘子）

Mindspore框架&#xff1a;CycleGAN模型实现图像风格迁移算法 Mindspore框架CycleGAN模型实现图像风格迁移|&#xff08;一&#xff09;CycleGAN神经网络模型构建Mindspore框架CycleGAN模型实现图像风格迁移|&#xff08;二&#xff09;实例数据集&#xff08;苹果2橘子&#…
阅读更多...
补充性文件

补充性文件

第一 二章 1&#xff0c;关系型数据库是什么&#xff1f;其中的关系是指什么&#xff1f; 答&#xff1a; 关系型数据库是一些相关的表和其他数据库对象的集合。数据模型符合满足一定条件的二维表格式。 2&#xff0c;E-R模型&#xff1f; 实体为表。用矩形表示。属性为字…
阅读更多...
嵌入式物联网在工业中的应用——案例分析

嵌入式物联网在工业中的应用——案例分析

作者主页: 知孤云出岫 目录 嵌入式物联网在工业中的应用——案例分析引言1. 智能工厂1.1 实时监控与数据采集 2. 智能物流2.1 库存管理 3. 智能维护3.1 设备故障预测 4. 智能交通4.1 交通流量监测 总结 嵌入式物联网在工业中的应用——案例分析 引言 嵌入式物联网&#xff08;…
阅读更多...
回车不搜索直接页面刷新问题解决

回车不搜索直接页面刷新问题解决

使用技术栈&#xff1a;vue3、elementUiPlus 问题&#xff1a;回车触发方法&#xff0c;会刷新整个页面&#xff0c;不执行搜索 解决方法&#xff1a;在搜索的表单中增加submit.native.prevent submit.native.prevent
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023