当前位置：首页 > news >正文

Vue Flow 设计大模型工作流

news 2025/8/26 9:24:41

Vue Flow 设计大模型工作流

vue-flow 是一个基于 Vue 3 的库，用于创建可交互的节点式编辑器。它非常适合用来设计工作流、数据流或可视化编程界面。

Orange AI 管理平台在线演示

Orange 官网: http://hengzq.cn
在线体验: http://tiny.hengzq.cn
项目文档: http://hengzq.cn/community/index

部分源码展示

自定义大模型节点

<template><div class="node-container"><div class="node-title"><div class="flex items-center"><svg-icon name="wf-llm" /> {{ node.name ?? '大模型' }}</div><div class="right-btn" @click.stop><tiny-button :icon="IconDeltaRight" type="text" @click="runNode"></tiny-button><tiny-action-menu :options="options" mode="card" :max-show-num="0" @item-click="(data: any) => optionsClick(data.itemData.label)"><template #item="{ data }"><span v-if="data.label == 'opt.delete'" style="color: var(--button-delete-color)">{{ $t(data.label) }}</span><span v-else> {{ $t(data.label) }} </span></template></tiny-action-menu></div></div><NodeToolbar :is-visible="runResult ? true : false" :position="Position.Bottom"><RunResultIndex :run-result="runResult"></RunResultIndex></NodeToolbar><Handle id="llm-target-left" type="target" :position="Position.Left" /><Handle id="llm-source-right" type="source" :position="Position.Right" /></div>
</template>

大模型节点配置

<template><tiny-drawer class="config-dialog" :title="title" :visible="visible" :mask="false" width="30%" @close="onClose"><tiny-input v-model="formData.description" class="description" placeholder="请输入描述..." @change="updateFormData" /><tiny-divider /><tiny-collapse v-model="activeNames"><tiny-collapse-item title="模型配置" name="modelConfig"><tiny-cascader v-model="llmParam.modelId" :options="modelList" :props="{ emitPath: false }" style="width: 100%"@change="updateFormData" /></tiny-collapse-item></tiny-collapse><tiny-collapse v-model="activeNames"><tiny-collapse-item title="输入" name="inputParams"><template #title-right><tiny-button type="info" :icon="IconPlus()" size="mini" @click="addInputAttr"></tiny-button></template><tiny-grid ref="inputGridTableRef" :data="inputData" show-overflow="tooltip":edit-config="{ trigger: 'click', mode: 'row', showStatus: true }" @edit-closed="updateFormData"><tiny-grid-column field="name" title="变量名" width="150px" :editor="{ component: 'input', type: 'visible' }"><template #edit="data"><tiny-input v-model="data.row.name" placeholder="请输入内容" @change="updateFormData"></tiny-input></template></tiny-grid-column><tiny-grid-column title="变量值" :editor="{ type: 'visible' }"><template #edit="data"><param-value-index :param="data.row" :node="formData" @delete-value="deleteInputParam" /></template></tiny-grid-column><template #empty></template></tiny-grid></tiny-collapse-item></tiny-collapse><tiny-collapse v-model="activeNames"><tiny-collapse-item title="系统提示词" name="systemPrompt"><tiny-input v-model="llmParam.systemPrompt" type="textarea" :autosize="{ minRows: 5 }" :maxlength="5000"show-word-limit :placeholder="$t('llm.app.systemPrompt.placeholder')" @change="updateFormData" /></tiny-collapse-item></tiny-collapse><tiny-collapse v-model="activeNames"><tiny-collapse-item title="用户提示词" name="prompt"><tiny-input v-model="llmParam.prompt" type="textarea" :autosize="{ minRows: 5 }" :maxlength="5000"show-word-limit :placeholder="$t('llm.app.systemPrompt.placeholder')" @change="updateFormData" /></tiny-collapse-item></tiny-collapse><tiny-collapse v-model="activeNames"><tiny-collapse-item title="输出变量" name="outputParams"><template #title-right><tiny-button type="info" :icon="IconPlus()" size="mini" @click="addOutputAttr"></tiny-button></template><tiny-grid ref="outputGridTableRef" :data="outputData" show-overflow="tooltip":edit-config="{ trigger: 'click', mode: 'row', showStatus: true }" @edit-closed="updateFormData"><tiny-grid-column field="name" title="变量名" :editor="{ component: 'input' }"><template #edit="data"><tiny-input v-model="data.row.name" placeholder="请输入内容" @change="updateFormData"></tiny-input></template></tiny-grid-column><tiny-grid-column title="变量值" :editor="{ type: 'visible' }" width="145px"><template #edit="data"><param-value-index :param="data.row" :node="formData" :input-visible="false"@delete-value="deleteInputParam" /></template></tiny-grid-column><template #empty></template></tiny-grid></tiny-collapse-item></tiny-collapse></tiny-drawer>
</template>