ComfyUI-SixGod_Prompt插件开发原理深入了解VuePython混合架构设计【免费下载链接】comfyui-sixgod_prompt项目地址: https://gitcode.com/gh_mirrors/co/comfyui-sixgod_promptComfyUI-SixGod_Prompt是一款强大的AI绘图提示词辅助插件它采用VuePython混合架构设计为用户提供直观的提示词编辑界面和高效的后端处理能力。本文将深入剖析该插件的开发原理帮助开发者理解其架构设计和实现方式。插件整体架构概览ComfyUI-SixGod_Prompt插件采用前后端分离的架构设计前端使用Vue框架构建用户界面后端使用Python处理核心业务逻辑。这种混合架构的优势在于可以充分发挥Vue在构建交互式界面方面的优势同时利用Python在数据处理和AI模型集成方面的强大能力。技术栈选择前端技术栈Vue 3、Pinia状态管理、SCSS样式处理后端技术栈Python、抽象基类ABC、翻译接口设计构建工具Vite项目目录结构插件的主要目录结构如下src/前端Vue代码目录包含组件、样式和工具函数transerver/后端Python代码目录包含翻译接口和实现json/提示词模板JSON文件目录javascript/前端JavaScript代码目录imgs/图片资源目录前端Vue架构设计前端部分采用Vue 3框架构建使用Pinia进行状态管理通过组件化设计实现了灵活的界面布局。应用入口文件分析应用的入口文件是src/main.js它负责创建Vue应用实例并挂载到页面上import { createApp } from vue import { createPinia } from pinia import App from ./App.vue import common from /src/js/utils/index.js import eventBus from /src/js/utils/eventBus.js import draggable from /src/js/utils/drag.js const div document.createElement(div) div.id six_god_k const pinia createPinia() const vueapp createApp(App) const body document.querySelector(body) body.appendChild(div) vueapp.use(pinia) vueapp.provide(common, common) vueapp.provide(eventBus, eventBus) vueapp.directive(draggable, draggable) vueapp.mount(div)这段代码创建了一个新的div元素将Vue应用挂载到这个元素上并通过provide方法提供了全局可用的工具函数和事件总线。同时注册了一个自定义的draggable指令用于实现拖拽功能。核心组件设计前端核心组件位于src/components/promptRender/目录下包括PromptTextArea.vue提示词编辑区域AutoComplete.vue自动补全组件Favorites.vue收藏夹组件RandPrompt.vue随机提示词生成组件这些组件共同构成了提示词编辑界面提供了丰富的功能如提示词分类、自动补全、拖拽排序等。用户界面展示插件的用户界面设计直观友好主要分为提示词编辑区和提示词分类区两大部分。上图展示了插件的主界面顶部是提示词编辑区域用户可以在这里输入和编辑提示词。下方是分类标签栏包含起手式、人物、服饰等多个分类点击分类可以展开相应的提示词列表。上图展示了展开多个分类后的界面每个分类下列出了相关的提示词选项用户可以通过点击快速添加提示词到编辑区域。界面右侧还提供了构图视角、风格和光影等高级选项。后端Python架构设计后端部分采用Python编写主要负责提示词的处理、翻译等功能。通过抽象基类定义了统一的接口便于扩展不同的实现。翻译接口设计transerver/Translator.py文件定义了翻译器的抽象基类from abc import ABC, abstractmethod import hashlib class TranslatorInterface(ABC): def __init__(self): self.headers { User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.182 Safari/537.36, content-type: application/x-www-form-urlencoded; charsetUTF-8 } self.lang_fromzh self.lang_toen abstractmethod def translate(self,*args, **kwargs) - str: pass def encrypt_string_to_md5(self,input_string): encoded_string input_string.encode() md5_hash hashlib.md5() md5_hash.update(encoded_string) hashed_value md5_hash.hexdigest() return hashed_value def translate_text(translator: TranslatorInterface,*args, **kwargs): return translator.translate(*args, **kwargs)这个抽象基类定义了翻译器的基本结构包括HTTP请求头、源语言和目标语言设置以及一个抽象的translate方法。同时提供了一个encrypt_string_to_md5方法用于字符串加密。翻译实现类基于TranslatorInterface插件实现了多种翻译方式BaiduTranslator百度翻译接口实现FreeBDTranslator免费百度翻译接口实现LLMTranslator基于大型语言模型的翻译实现以BaiduTranslator为例其实现如下class BaiduTranslator(Translator.TranslatorInterface): def translate(self,appid:str,secretKey:str,text: str) - str: # 百度翻译API实现 pass这种设计模式使得插件可以灵活切换不同的翻译服务提高了代码的可扩展性和可维护性。LLM集成在transerver/llm.py文件中实现了与大型语言模型的集成def chat(question,**kwargs): # LLM对话实现 pass def chat_imagine(question,settings): # 基于LLM的图像生成提示词实现 pass这些函数允许插件利用大型语言模型的能力生成更丰富、更准确的提示词提升AI绘图的质量。前后端交互设计ComfyUI-SixGod_Prompt插件的前后端交互主要通过以下方式实现1.** 提示词模板加载前端通过读取json/目录下的JSON文件加载预设的提示词模板。 2.翻译服务调用前端通过API调用后端的翻译服务将中文提示词翻译成英文。 3.LLM服务调用 **前端通过API调用后端的LLM服务生成或优化提示词。插件特色功能实现提示词分类管理插件将提示词分为多个类别如起手式、人物、服饰等每个类别对应一个JSON文件如json/01起手式.json、json/02人物.json等。这种分类管理方式使得提示词的组织更加清晰用户可以快速找到需要的提示词。拖拽排序功能插件实现了提示词的拖拽排序功能通过src/js/utils/drag.js文件中的拖拽工具函数结合Vue的自定义指令实现了直观的拖拽交互效果。自动补全功能AutoComplete组件实现了提示词的自动补全功能根据用户输入的内容动态显示匹配的提示词选项提高了输入效率。总结与展望ComfyUI-SixGod_Prompt插件通过VuePython的混合架构设计实现了一个功能丰富、交互友好的AI绘图提示词辅助工具。前端Vue框架提供了灵活的组件化界面后端Python代码则提供了强大的数据处理和AI集成能力。未来插件可以进一步优化以下方面1.** 扩展更多翻译服务增加更多的翻译接口实现提高翻译的准确性和可用性。 2.增强LLM集成优化与大型语言模型的交互提供更智能的提示词生成和优化功能。 3.增加自定义提示词库 **允许用户创建和管理自己的提示词库提高个性化体验。通过不断优化和扩展ComfyUI-SixGod_Prompt插件有望成为AI绘图爱好者的必备工具帮助用户更轻松地创建出高质量的AI图像。要开始使用ComfyUI-SixGod_Prompt插件请先克隆仓库git clone https://gitcode.com/gh_mirrors/co/comfyui-sixgod_prompt然后按照项目中的安装说明进行部署。【免费下载链接】comfyui-sixgod_prompt项目地址: https://gitcode.com/gh_mirrors/co/comfyui-sixgod_prompt创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考