dify

2025-12-01 17:21:38 +08:00
parent 32fee2b8ab
commit fab8c13cb3
7511 changed files with 996300 additions and 0 deletions
--- a/dify/web/app/components/base/param-item/index.stories.tsx
+++ b/dify/web/app/components/base/param-item/index.stories.tsx
@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useState } from 'react'
+import ParamItem from '.'
+
+type ParamConfig = {
+  id: string
+  name: string
+  tip: string
+  value: number
+  min: number
+  max: number
+  step: number
+  allowToggle?: boolean
+}
+
+const PARAMS: ParamConfig[] = [
+  {
+    id: 'temperature',
+    name: 'Temperature',
+    tip: 'Controls randomness. Lower values make the model more deterministic, higher values encourage creativity.',
+    value: 0.7,
+    min: 0,
+    max: 2,
+    step: 0.1,
+    allowToggle: true,
+  },
+  {
+    id: 'top_p',
+    name: 'Top P',
+    tip: 'Nucleus sampling keeps only the most probable tokens whose cumulative probability exceeds this threshold.',
+    value: 0.9,
+    min: 0,
+    max: 1,
+    step: 0.05,
+  },
+  {
+    id: 'frequency_penalty',
+    name: 'Frequency Penalty',
+    tip: 'Discourages repeating tokens. Increase to reduce repetition.',
+    value: 0.2,
+    min: 0,
+    max: 1,
+    step: 0.05,
+  },
+]
+
+const ParamItemPlayground = () => {
+  const [state, setState] = useState<Record<string, { value: number; enabled: boolean }>>(() => {
+    return PARAMS.reduce((acc, item) => {
+      acc[item.id] = { value: item.value, enabled: true }
+      return acc
+    }, {} as Record<string, { value: number; enabled: boolean }>)
+  })
+
+  const handleChange = (id: string, value: number) => {
+    setState(prev => ({
+      ...prev,
+      [id]: {
+        ...prev[id],
+        value: Number.parseFloat(value.toFixed(3)),
+      },
+    }))
+  }
+
+  const handleToggle = (id: string, enabled: boolean) => {
+    setState(prev => ({
+      ...prev,
+      [id]: {
+        ...prev[id],
+        enabled,
+      },
+    }))
+  }
+
+  return (
+    <div className="flex w-full max-w-2xl flex-col gap-5 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
+      <div className="flex items-center justify-between text-xs uppercase tracking-[0.18em] text-text-tertiary">
+        <span>Generation parameters</span>
+        <code className="rounded-md border border-divider-subtle bg-background-default px-2 py-1 text-[11px] text-text-tertiary">
+          {JSON.stringify(state, null, 0)}
+        </code>
+      </div>
+      {PARAMS.map(param => (
+        <ParamItem
+          key={param.id}
+          className="rounded-xl border border-transparent px-3 py-2 hover:border-divider-subtle hover:bg-background-default-subtle"
+          id={param.id}
+          name={param.name}
+          tip={param.tip}
+          value={state[param.id].value}
+          enable={state[param.id].enabled}
+          min={param.min}
+          max={param.max}
+          step={param.step}
+          hasSwitch={param.allowToggle}
+          onChange={handleChange}
+          onSwitchChange={handleToggle}
+        />
+      ))}
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Base/Data Entry/ParamItem',
+  component: ParamItemPlayground,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Slider + numeric input pairing used for model parameter tuning. Supports optional enable toggles per parameter.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ParamItemPlayground>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}