third/APIPark
1
0
Fork 0
mirror of https://github.com/APIParkLab/APIPark.git synced 2026-06-14 20:41:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: block

Browse Source
This commit is contained in:
scarqin
2024-12-23 14:09:53 +08:00
parent 5d638b8bf4
commit 4aa4238943
1 changed files with 73 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/packages/core/src/pages/playground/index.tsx
+73 -32
View File
@@ -15,11 +15,11 @@ interface ModelCardProps {
}
const ModelCard: React.FC<ModelCardProps> = ({ title, status, defaultModel, onSettingClick }) => (
<div className="bg-white rounded-lg shadow-sm p-4 w-[280px] border border-[#ededed]">
<div className="flex justify-between items-center mb-3">
<div className="node-card bg-white rounded-lg shadow-sm p-4 min-w-[280px]">
<div className="flex justify-between items-center">
<div className="flex gap-2 items-center">
<Icon icon="mdi:robot" className="text-xl text-[--primary-color]" />
<span className="font-medium text-gray-800">{title}</span>
<span className="text-base text-gray-900">{title}</span>
</div>
<div className="flex gap-2 items-center">
<span
@@ -33,7 +33,7 @@ const ModelCard: React.FC<ModelCardProps> = ({ title, status, defaultModel, onSe
/>
</div>
</div>
<div className="text-sm text-gray-500">{defaultModel}</div>
<div className="mt-2 text-sm text-gray-500">{defaultModel}</div>
</div>
)
@@ -43,15 +43,17 @@ interface KeyStatusCardProps {
}
const KeyStatusCard: React.FC<KeyStatusCardProps> = ({ keys, title }) => (
<div className="bg-white rounded-lg shadow-sm p-4 w-[280px] border border-[#ededed]">
<div className="flex items-center mb-3">
<span className="text-sm font-medium text-gray-700">{title}</span>
</div>
<div className="node-card bg-white rounded-lg shadow-sm p-4 min-w-[280px]">
<div className="mb-3 text-sm text-gray-900">{title}</div>
<div className="grid grid-cols-4 gap-2">
{keys.map((status, index) => (
<div
key={index}
className={`aspect-square rounded-md ${status === 'success' ? 'bg-green-500' : 'bg-red-500'}`}
className={`
aspect-square rounded-md
${status === 'success' ? 'bg-green-500' : 'bg-red-500'}
transition-transform hover:scale-105
`}
title={status === 'success' ? 'Active' : 'Inactive'}
/>
))}
@@ -60,10 +62,10 @@ const KeyStatusCard: React.FC<KeyStatusCardProps> = ({ keys, title }) => (
)
const ServiceCard: React.FC = () => (
<div className="bg-white rounded-lg shadow-sm p-4 w-[200px] border border-[#ededed]">
<div className="flex flex-col gap-3 items-center">
<div className="node-card bg-white rounded-lg shadow-sm p-4 min-w-[200px]">
<div className="flex flex-col gap-2 items-center">
<Icon icon="mdi:robot" className="text-3xl text-[--primary-color]" />
<span className="font-medium text-gray-800">AI Service</span>
<span className="text-base text-gray-900">AI Service</span>
</div>
</div>
)
@@ -71,67 +73,106 @@ const ServiceCard: React.FC = () => (
const initialNodes: Node[] = [
{
id: 'service',
type: 'custom',
type: 'default',
position: { x: 50, y: 100 },
data: { component: <ServiceCard /> }
data: { label: <ServiceCard /> }
},
{
id: 'openai',
type: 'custom',
type: 'default',
position: { x: 400, y: 50 },
data: {
component: <ModelCard title="OpenAI" status="success" defaultModel="gpt-4" />
label: <ModelCard title="OpenAI" status="success" defaultModel="gpt-4" />
}
},
{
id: 'anthropic',
type: 'custom',
type: 'default',
position: { x: 400, y: 200 },
data: {
component: <ModelCard title="Anthropic" status="success" defaultModel="claude-2" />
label: <ModelCard title="Anthropic" status="success" defaultModel="claude-2" />
}
},
{
id: 'gemini',
type: 'custom',
type: 'default',
position: { x: 400, y: 350 },
data: {
component: <ModelCard title="Google Gemini" status="failure" defaultModel="gemini-pro" />
label: <ModelCard title="Google Gemini" status="failure" defaultModel="gemini-pro" />
}
},
{
id: 'openai-keys',
type: 'custom',
type: 'default',
position: { x: 750, y: 50 },
data: {
component: <KeyStatusCard title="API Keys" keys={['success', 'success', 'failure', 'success']} />
label: <KeyStatusCard title="API Keys" keys={['success', 'success', 'failure', 'success']} />
}
},
{
id: 'anthropic-keys',
type: 'custom',
type: 'default',
position: { x: 750, y: 200 },
data: {
component: <KeyStatusCard title="API Keys" keys={['success', 'success', 'success']} />
label: <KeyStatusCard title="API Keys" keys={['success', 'success', 'success']} />
}
},
{
id: 'gemini-keys',
type: 'custom',
type: 'default',
position: { x: 750, y: 350 },
data: {
component: <KeyStatusCard title="API Keys" keys={['failure', 'failure']} />
label: <KeyStatusCard title="API Keys" keys={['failure', 'failure']} />
}
}
]
const initialEdges: Edge[] = [
{ id: 'service-openai', source: 'service', target: 'openai', animated: true, label: 'Connected' },
{ id: 'service-anthropic', source: 'service', target: 'anthropic', animated: true, label: 'Connected' },
{ id: 'service-gemini', source: 'service', target: 'gemini', animated: true, label: 'Disconnected' },
{ id: 'openai-keys', source: 'openai', target: 'openai-keys', animated: true },
{ id: 'anthropic-keys', source: 'anthropic', target: 'anthropic-keys', animated: true },
{ id: 'gemini-keys', source: 'gemini', target: 'gemini-keys', animated: true }
{
id: 'service-openai',
source: 'service',
target: 'openai',
animated: true,
label: 'Connected',
style: { stroke: '#3d46f2' }
},
{
id: 'service-anthropic',
source: 'service',
target: 'anthropic',
animated: true,
label: 'Connected',
style: { stroke: '#3d46f2' }
},
{
id: 'service-gemini',
source: 'service',
target: 'gemini',
animated: true,
label: 'Disconnected',
style: { stroke: '#3d46f2' }
},
{
id: 'openai-keys',
source: 'openai',
target: 'openai-keys',
animated: true,
style: { stroke: '#3d46f2' }
},
{
id: 'anthropic-keys',
source: 'anthropic',
target: 'anthropic-keys',
animated: true,
style: { stroke: '#3d46f2' }
},
{
id: 'gemini-keys',
source: 'gemini',
target: 'gemini-keys',
animated: true,
style: { stroke: '#3d46f2' }
}
]
const Playground: React.FC = () => {