一、本章诉求
由于前期设计的提示词均是英文输入,后期用户要求增加中文提示词输入,这个需求更改有两个方法,一个是修改comfyui工作流,另一个是修改前端,在前端将用户输入的中文翻译成英文,再推送到工作流中运行。
考虑到工作流功能较多,修改工作流也较为麻烦,本章选择修改前端的方式,封装一个前端vue翻译组件,实现提示词翻译功能的复用。
二、开发翻译接口
argos-translate 是一款基于OpenNMT(神经网络机器翻译框架)的离线翻译库,不依赖第三方翻译接口,支持翻译包括中文在内的 30 多种语言
python">pip install argostranslate# add by ywz 20240925 argostranslate翻译 用于提示词翻译
import argostranslate.package
import argostranslate.translatedef argos_translate(query: str) -> str:from_code = "zh"to_code = "en"argostranslate.package.update_package_index()available_packages = argostranslate.package.get_available_packages()package_to_install = next(filter(lambda x: x.from_code == from_code and x.to_code == to_code, available_packages))argostranslate.package.install_from_path(package_to_install.download())translatedText = argostranslate.translate.translate(query, from_code, to_code)return translatedText
from utils.argostranslate import argos_translate@app.get("/translate")
def translate(query: str = Query()):prompt = argos_translate(query)return prompt
三、封装前端翻译组件
<template><div><p><span style="font-size: medium; color: #333333">{{ cardTitle }}</span><span style="font-size: smaller; color: grey; margin-left: 5px">可选</span></p><a-textareav-model="inputText":placeholder="placeholder":auto-size="{ minRows: 4, maxRows: 5 }"/><p v-if="translationResult">翻译结果: {{ translationResult }}</p></div>
</template><script>export default {props: {cardTitle: {type: String,default: '',},promptFlag: {type: String,default: '',},placeholderText: {type: String,default: '',},},data() {return {inputText: '',promptFlagText: this.promptFlag,placeholder: this.placeholderText,translationResult: ''};},methods: {translate() {return new Promise((resolve, reject) => {fetch(`/seg/translate?query=${encodeURIComponent(this.inputText)}`, {method: "GET",}).then((response) => {if (!response.ok) {throw new Error('网络响应不正确');}return response.json();}).then((data) => {console.log("Success:", data);this.translationResult = dataif (this.promptFlagText === '正向') {resolve(data); // 返回结果} else {if (data != '') {let negativeInitPrompt = ",(worst quality:2.0),poorly drawn,bad anatomy,(bad proportions:1.3),ugly,disgusting,amputation,bugly,geometry,bad_prompt,multiple limbs,(bad hand:2.0),extra limb,(deformed fingers:2.0),mutated hands and fingers,disconnected limbs, geometry, bad_prompt,(missing fingers), (interlocked fingers:1.2), (extra digit and hands and fingers and legs and arms:1.4),(long fingers:1.2),(bad-artist-anime),(shinny skin, reflections on the skin, skin reflections:1.5)";resolve(data + negativeInitPrompt);} else {let negativeInitPrompt = "(worst quality:2.0),poorly drawn,bad anatomy,(bad proportions:1.3),ugly,disgusting,amputation,bugly,geometry,bad_prompt,multiple limbs,(bad hand:2.0),extra limb,(deformed fingers:2.0),mutated hands and fingers,disconnected limbs, geometry, bad_prompt,(missing fingers), (interlocked fingers:1.2), (extra digit and hands and fingers and legs and arms:1.4),(long fingers:1.2),(bad-artist-anime),(shinny skin, reflections on the skin, skin reflections:1.5)";resolve(negativeInitPrompt);}}}).catch((error) => {console.error("Error:", error);alert("'翻译出错: ' + error.message")reject('翻译出错: ' + error.message);});});},},};
</script><style scoped>* {margin: 0;}
</style>
//html
<div style="padding-left: 20px; padding-right: 20px;margin-top: 20px"><TranslationInputref="positiveTranslationInput":card-title="'正向提示词'":promptFlag="'正向'":placeholderText="'请输入正向提示词(中文)'"@translationComplete="handlePositiveTranslation"/></div><div style="padding-left: 20px; padding-right: 20px;margin-top: 20px"><TranslationInputref="negativeTranslationInput":card-title="'负向提示词'":promptFlag="'负向'":placeholderText="'请输入负向提示词(中文)'"@translationComplete="handleNegativeTranslation"/></div>//script
import TranslationInput from './TranslationInput.vue';components: {TranslationInput},confirmTranslation() {this.$refs.positiveTranslationInput.translate().then(result => {this.handlePositiveTranslation(result);this.confirmNegativeTranslation()})},confirmNegativeTranslation() {this.$refs.negativeTranslationInput.translate().then(result => {this.handleNegativeTranslation(result);this.generate()})},handlePositiveTranslation(result) {this.positive = result;},handleNegativeTranslation(result) {this.negative = result;},