Skip to content

Commit

Permalink
feat: Add bing and google operator infiniflow#918 (infiniflow#1745)
Browse files Browse the repository at this point in the history
### What problem does this PR solve?

feat: Add bing and google operator infiniflow#918

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
  • Loading branch information
cike8899 authored Jul 30, 2024
1 parent 82e4b71 commit fb543fb
Show file tree
Hide file tree
Showing 16 changed files with 2,018 additions and 29 deletions.
7 changes: 7 additions & 0 deletions web/src/assets/svg/bing.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions web/src/assets/svg/google.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions web/src/locales/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -639,6 +639,15 @@ The above is the content you need to summarize.`,
submittedDate: 'Submitted date',
lastUpdatedDate: 'Last updated date',
relevance: 'Relevance',
google: 'Google',
googleTip:
'This component is used to get search result fromhttps://www.google.com/ . Typically, it performs as a supplement to knowledgebases. Top N and SerpApi API key specifies the number of search results you need to adapt.',
bing: 'Bing',
bingTip:
'This component is used to get search result from https://www.bing.com/. Typically, it performs as a supplement to knowledgebases. Top N and Bing Subscription-Key specifies the number of search results you need to adapt.',
apiKey: 'Api Key',
country: 'Country',
language: 'Language',
},
footer: {
profile: 'All rights reserved @ React',
Expand Down
9 changes: 9 additions & 0 deletions web/src/locales/zh-traditional.ts
Original file line number Diff line number Diff line change
Expand Up @@ -599,6 +599,15 @@ export default {
submittedDate: '提交日期',
lastUpdatedDate: '最後更新日期',
relevance: '關聯',
google: 'Google',
googleTip:
'此元件用於從https://www.google.com/取得搜尋結果。通常,它作為知識庫的補充。 Top N 和 SerpApi API 金鑰指定您需要調整的搜尋結果數量。',
bing: 'Bing',
bingTip:
'此元件用於從 https://www.bing.com/ 取得搜尋結果。通常,它充當知識庫的補充。 Top N 和 Bing Subscription-Key 指定您需要適配的搜尋結果數量。',
apiKey: 'Api Key',
country: '國家',
language: '語言',
},
footer: {
profile: '“保留所有權利 @ react”',
Expand Down
9 changes: 9 additions & 0 deletions web/src/locales/zh.ts
Original file line number Diff line number Diff line change
Expand Up @@ -617,6 +617,15 @@ export default {
submittedDate: '提交日期',
lastUpdatedDate: '最后更新日期',
relevance: '关联',
google: 'Google',
googleTip:
'此组件用于从https://www.google.com/获取搜索结果。通常,它作为知识库的补充。Top N 和 SerpApi API 密钥指定您需要调整的搜索结果数量。',
bing: 'Bing',
bingTip:
'此组件用于从 https://www.bing.com/ 获取搜索结果。通常,它作为知识库的补充。Top N 和 Bing Subscription-Key 指定您需要调整的搜索结果数量。',
apiKey: 'Api Key',
country: '国家',
language: '语言',
},
footer: {
profile: 'All rights reserved @ React',
Expand Down
41 changes: 41 additions & 0 deletions web/src/pages/flow/bing-form/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import TopNItem from '@/components/top-n-item';
import { useTranslate } from '@/hooks/common-hooks';
import { Form, Input, Select } from 'antd';
import { useMemo } from 'react';
import { BingCountryOptions, BingLanguageOptions } from '../constant';
import { IOperatorForm } from '../interface';

const BingForm = ({ onValuesChange, form }: IOperatorForm) => {
const { t } = useTranslate('flow');

const options = useMemo(() => {
return ['Webpages', 'News'].map((x) => ({ label: x, value: x }));
}, []);

return (
<Form
name="basic"
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }}
autoComplete="off"
form={form}
onValuesChange={onValuesChange}
>
<TopNItem initialValue={10}></TopNItem>
<Form.Item label={t('channel')} name={'channel'}>
<Select options={options}></Select>
</Form.Item>
<Form.Item label={t('apiKey')} name={'api_key'}>
<Input></Input>
</Form.Item>
<Form.Item label={t('country')} name={'country'}>
<Select options={BingCountryOptions}></Select>
</Form.Item>
<Form.Item label={t('language')} name={'language'}>
<Select options={BingLanguageOptions}></Select>
</Form.Item>
</Form>
);
};

export default BingForm;
2 changes: 2 additions & 0 deletions web/src/pages/flow/canvas/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,15 @@ import ChatDrawer from '../chat/drawer';
import styles from './index.less';
import { BeginNode } from './node/begin-node';
import { CategorizeNode } from './node/categorize-node';
import { LogicNode } from './node/logic-node';
import { RelevantNode } from './node/relevant-node';

const nodeTypes = {
ragNode: RagNode,
categorizeNode: CategorizeNode,
beginNode: BeginNode,
relevantNode: RelevantNode,
logicNode: LogicNode,
};

const edgeTypes = {
Expand Down
2 changes: 1 addition & 1 deletion web/src/pages/flow/canvas/node/categorize-node.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export function CategorizeNode({ id, data, selected }: NodeProps<NodeData>) {
return (
<NodePopover nodeId={id}>
<section
className={classNames(styles.ragNode, {
className={classNames(styles.logicNode, {
[styles.selectedNode]: selected,
})}
style={{
Expand Down
56 changes: 54 additions & 2 deletions web/src/pages/flow/canvas/node/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
padding: 5px;
border-radius: 5px;
background: white;
width: 100px;
height: 100px;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
// align-items: center;
Expand Down Expand Up @@ -48,6 +48,7 @@
white-space: nowrap;
}
}

.selectedNode {
border: 1px solid rgb(59, 118, 244);
}
Expand All @@ -64,3 +65,54 @@
max-width: 300px;
max-height: 500px;
}

.logicNode {
position: relative;
box-shadow:
-6px 0 12px 0 rgba(179, 177, 177, 0.08),
-3px 0 6px -4px rgba(0, 0, 0, 0.12),
-6px 0 16px 6px rgba(0, 0, 0, 0.05);

padding: 5px;
border-radius: 5px;
background: white;
width: 100px;
height: 100px;
border-radius: 50%;
display: flex;
// align-items: center;
// justify-self: center;
justify-content: center;
.nodeName {
font-size: 10px;
color: black;
}
label {
display: block;
color: #777;
font-size: 12px;
}
.type {
// font-size: 12px;
}
.description {
font-size: 10px;
}
.bottomBox {
position: absolute;
bottom: -34px;
background: white;
padding: 2px 5px;
border-radius: 5px;
box-shadow:
-6px 0 12px 0 rgba(179, 177, 177, 0.08),
-3px 0 6px -4px rgba(0, 0, 0, 0.12),
-6px 0 16px 6px rgba(0, 0, 0, 0.05);
}
.categorizeAnchorPointText {
position: absolute;
top: -4px;
left: 8px;
white-space: nowrap;
}
}
22 changes: 9 additions & 13 deletions web/src/pages/flow/canvas/node/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { useTranslate } from '@/hooks/common-hooks';
import { Flex } from 'antd';
import classNames from 'classnames';
import lowerFirst from 'lodash/lowerFirst';
import pick from 'lodash/pick';
import { Handle, NodeProps, Position } from 'reactflow';
import { Operator, operatorMap } from '../../constant';
Expand Down Expand Up @@ -32,7 +31,9 @@ export function RagNode({
className={classNames(styles.ragNode, {
[styles.selectedNode]: selected,
})}
style={pick(style, ['backgroundColor', 'width', 'height', 'color'])}
style={{
...pick(style, ['backgroundColor', 'color']),
}}
>
<Handle
id="c"
Expand All @@ -54,24 +55,19 @@ export function RagNode({
vertical
align="center"
justify={'space-around'}
gap={ZeroGapOperators.some((x) => x === data.label) ? 0 : 6}
// gap={ZeroGapOperators.some((x) => x === data.label) ? 0 : 6}
>
<Flex flex={1} justify="center" align="center">
<label htmlFor=""> </label>
</Flex>

<Flex flex={1}>
<OperatorIcon
name={data.label as Operator}
fontSize={style?.iconFontSize ?? 24}
fontSize={style?.iconFontSize ?? 16}
width={style?.iconWidth}
></OperatorIcon>
</Flex>

<Flex flex={1}>
<span
className={styles.type}
style={{ fontSize: style?.fontSize ?? 14 }}
>
{t(lowerFirst(data.label))}
</span>
</Flex>
<Flex flex={1}>
<NodeDropdown
id={id}
Expand Down
89 changes: 89 additions & 0 deletions web/src/pages/flow/canvas/node/logic-node.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import { useTranslate } from '@/hooks/common-hooks';
import { Flex } from 'antd';
import classNames from 'classnames';
import lowerFirst from 'lodash/lowerFirst';
import pick from 'lodash/pick';
import { Handle, NodeProps, Position } from 'reactflow';
import { Operator, operatorMap } from '../../constant';
import { NodeData } from '../../interface';
import OperatorIcon from '../../operator-icon';
import NodeDropdown from './dropdown';
import styles from './index.less';
import NodePopover from './popover';

const ZeroGapOperators = [
Operator.RewriteQuestion,
Operator.KeywordExtract,
Operator.ArXiv,
];

export function LogicNode({
id,
data,
isConnectable = true,
selected,
}: NodeProps<NodeData>) {
const style = operatorMap[data.label as Operator];
const { t } = useTranslate('flow');

return (
<NodePopover nodeId={id}>
<section
className={classNames(styles.logicNode, {
[styles.selectedNode]: selected,
})}
style={pick(style, ['backgroundColor', 'width', 'height', 'color'])}
>
<Handle
id="c"
type="source"
position={Position.Left}
isConnectable={isConnectable}
className={styles.handle}
></Handle>
<Handle type="source" position={Position.Top} id="d" isConnectable />
<Handle
type="source"
position={Position.Right}
isConnectable={isConnectable}
className={styles.handle}
id="b"
></Handle>
<Handle type="source" position={Position.Bottom} id="a" isConnectable />
<Flex
vertical
align="center"
justify={'space-around'}
gap={ZeroGapOperators.some((x) => x === data.label) ? 0 : 6}
>
<Flex flex={1} justify="center" align="center">
<OperatorIcon
name={data.label as Operator}
fontSize={style?.iconFontSize ?? 24}
width={style?.iconWidth}
></OperatorIcon>
</Flex>

<Flex flex={1}>
<span
className={styles.type}
style={{ fontSize: style?.fontSize ?? 14 }}
>
{t(lowerFirst(data.label))}
</span>
</Flex>
<Flex flex={1}>
<NodeDropdown
id={id}
iconFontColor={style?.moreIconColor}
></NodeDropdown>
</Flex>
</Flex>

<section className={styles.bottomBox}>
<div className={styles.nodeName}>{data.name}</div>
</section>
</section>
</NodePopover>
);
}
2 changes: 1 addition & 1 deletion web/src/pages/flow/canvas/node/relevant-node.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function RelevantNode({ id, data, selected }: NodeProps<NodeData>) {
return (
<NodePopover nodeId={id}>
<section
className={classNames(styles.ragNode, {
className={classNames(styles.logicNode, {
[styles.selectedNode]: selected,
})}
style={pick(style, ['backgroundColor', 'width', 'height', 'color'])}
Expand Down
Loading

0 comments on commit fb543fb

Please sign in to comment.