topdog/supersonic
1
0
Fork 0
mirror of https://github.com/tencentmusic/supersonic.git synced 2025-12-12 20:51:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

(feature)(chat-sdk) add Few-shot examples (#599)

Browse Source
This commit is contained in:
williamhliu
2024-01-05 10:17:17 +08:00
committed by GitHub
parent 72bd79fe73
commit 062f7340e5
3 changed files with 91 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx
View File

@@ -10,12 +10,13 @@ import { SqlInfoType } from '../../common/type';
type Props = {
llmReq?: any;
llmResp?: any;
integrateSystem?: string;
sqlInfo: SqlInfoType;
sqlTimeCost?: number;
};
const SqlItem: React.FC<Props> = ({ llmReq, integrateSystem, sqlInfo, sqlTimeCost }) => {
const SqlItem: React.FC<Props> = ({ llmReq, llmResp, integrateSystem, sqlInfo, sqlTimeCost }) => {
const [sqlType, setSqlType] = useState('');
const tipPrefixCls = `${PREFIX_CLS}-item`;
@@ -35,6 +36,8 @@ const SqlItem: React.FC<Props> = ({ llmReq, integrateSystem, sqlInfo, sqlTimeCos
const { schema, linking, priorExts } = llmReq || {};
const fewShots = (Object.values(llmResp?.sqlRespMap || {})[0] as any)?.fewShots || [];
return (
<div className={`${tipPrefixCls}-parse-tip`}>
<div className={`${tipPrefixCls}-title-bar`}>
@@ -64,6 +67,18 @@ const SqlItem: React.FC<Props> = ({ llmReq, integrateSystem, sqlInfo, sqlTimeCos
Schema映射
</div>
)}
{fewShots.length > 0 && (
<div
className={`${tipPrefixCls}-content-option ${
sqlType === 'fewShots' ? `${tipPrefixCls}-content-option-active` : ''
}`}
onClick={() => {
setSqlType(sqlType === 'fewShots' ? '' : 'fewShots');
}}
>
Few-shot示例
</div>
)}
{sqlInfo.s2SQL && (
<div
className={`${tipPrefixCls}-content-option ${
@@ -141,6 +156,37 @@ const SqlItem: React.FC<Props> = ({ llmReq, integrateSystem, sqlInfo, sqlTimeCos
)}
</div>
)}
{sqlType === 'fewShots' && (
<div className={`${prefixCls}-code`}>
{fewShots.map((item: any, index: number) => {
return (
<div key={index} className={`${prefixCls}-few-shot-item`}>
<div className={`${prefixCls}-few-shot-title`}>示例{index + 1}：</div>
<div className={`${prefixCls}-few-shot-content`}>
<div className={`${prefixCls}-few-shot-content-item`}>
<div className={`${prefixCls}-few-shot-content-title`}>问题：</div>
<div className={`${prefixCls}-few-shot-content-text`}>
{item.questionAugmented}
</div>
</div>
<div className={`${prefixCls}-few-shot-content-item`}>
<div className={`${prefixCls}-few-shot-content-title`}>SQL：</div>
<div className={`${prefixCls}-few-shot-content-text`}>
<SyntaxHighlighter
className={`${prefixCls}-few-shot-code`}
language="sql"
style={solarizedlight}
>
{item.sql}
</SyntaxHighlighter>
</div>
</div>
</div>
</div>
);
})}
</div>
)}
{sqlType && sqlInfo[sqlType] && (
<>
<SyntaxHighlighter