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>

效果展示

源码下载

• GitHub: https://github.com/hengzq/orange-tiny-vue3-ui
• Gitee: https://gitee.com/hengzq/orange-tiny-vue3-ui