Dalle supported image to image

web/src/components/ChatPrompt.vue

@@ -232,6 +232,7 @@ const copyContent = (text) => {
             flex-flow: row;
             margin-right: 10px;
             position: relative;
+            justify-content: start;
 
             .el-image {
               border: 1px solid #e3e3e3;
@@ -365,6 +366,7 @@ const copyContent = (text) => {
             flex-flow: row;
             margin-right: 10px;
             position: relative;
+            justify-content: end;
 
             .el-image {
               border: 1px solid #e3e3e3;

web/src/components/ImageUpload.vue

@@ -85,7 +85,7 @@
           <el-icon :size="40" class="el-icon--upload"><UploadFilled /></el-icon>
           <div class="el-upload__text">拖拽图片到此处，或 <em>点击上传</em></div>
           <template #tip>
-            <div class="el-upload__tip text-center">
+            <div class="el-upload__tip text-gray-500 text-sm">
               支持 JPG、PNG 格式，最多上传 {{ maxCount }} 张，单张最大 5MB
             </div>
           </template>

web/src/views/Dalle.vue

@@ -101,6 +101,13 @@
                   <span v-else>生成中...</span>
                 </el-button>
               </div>
+
+              <div class="mt-2 mb-2">
+                <label class="text-gray-700 font-semibold">参考图(可选)</label>
+                <div class="py-2">
+                  <ImageUpload v-model="params.image" :max-count="5" :multiple="true" />
+                </div>
+              </div>
             </el-form>
           </div>
           <div class="py-4">
@@ -295,6 +302,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { onMounted, onUnmounted, ref } from 'vue'
 import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
 import 'vue-waterfall-plugin-next/dist/style.css'
+import ImageUpload from '@/components/ImageUpload.vue'
 
 const listBoxHeight = ref(0)
 // const paramBoxHeight = ref(0)