Vue Flow 设计大模型工作流

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"></Run