chore: add advanced models

web/app/components/explore/try-app/app-info/index.tsx

@@ -77,7 +77,7 @@ const AppInfo: FC<Props> = ({
           <div className={headerClassName}>{t('explore.tryApp.requirements')}</div>
           <div className='space-y-0.5'>
             {requirements.map(item => (
-              <div className='flex items-center space-x-2 py-1'>
+              <div className='flex items-center space-x-2 py-1' key={item.name}>
                 <div className='size-5 rounded-md bg-cover shadow-xs' style={{ backgroundImage: `url(${item.iconUrl})` }} />
                 <div className='system-md-regular w-0 grow truncate text-text-secondary'>{item.name}</div>
               </div>

web/app/components/explore/try-app/app-info/use-get-requirements.ts

@@ -1,5 +1,8 @@
+import type { LLMNodeType } from '@/app/components/workflow/nodes/llm/types'
+import { BlockEnum } from '@/app/components/workflow/types'
 import { MARKETPLACE_API_PREFIX } from '@/config'
 import type { TryAppInfo } from '@/service/try-app'
+import { useGetTryAppFlowPreview } from '@/service/use-try-app'
 import type { AgentTool } from '@/types/app'
 import { uniqBy } from 'lodash-es'
 
@@ -19,6 +22,8 @@ const getIconUrl = (provider: string, tool: string) => {
 const useGetRequirements = ({ appDetail, appId }: Params) => {
   const isBasic = ['chat', 'completion', 'agent-chat'].includes(appDetail.mode)
   const isAgent = appDetail.mode === 'agent-chat'
+  const isAdvanced = !isBasic
+  const { data: flowData } = useGetTryAppFlowPreview(appId, isBasic)
 
   const requirements: RequirementItem[] = []
   if(isBasic) {
@@ -39,6 +44,18 @@ const useGetRequirements = ({ appDetail, appId }: Params) => {
       }
     }))
   }
+  if(isAdvanced && flowData && flowData?.graph?.nodes?.length > 0) {
+    const nodes = flowData.graph.nodes
+    const llmNodes = nodes.filter(node => node.data.type === BlockEnum.LLM)
+    requirements.push(...llmNodes.map((node) => {
+      const data = node.data as LLMNodeType
+      const modelProviderAndName = data.model.provider.split('/')
+      return {
+        name: data.model.name,
+        iconUrl: getIconUrl(modelProviderAndName[0], modelProviderAndName[1]),
+      }
+    }))
+  }
 
   const uniqueRequirements = uniqBy(requirements, 'name')
 

web/service/use-try-app.ts

@@ -33,9 +33,10 @@ export const useGetTryAppDataSets = (appId: string, ids: string[]) => {
   })
 }
 
-export const useGetTryAppFlowPreview = (appId: string) => {
+export const useGetTryAppFlowPreview = (appId: string, disabled?: boolean) => {
   return useQuery({
     queryKey: [NAME_SPACE, 'preview', appId],
+    enabled: !disabled,
     queryFn: () => {
       return fetchTryAppFlowPreview(appId)
     },