提交

src/api/questions.js

@@ -1,6 +1,6 @@
 import axios from "@/utils/request";
 
-import { fetchEventSource } from '@microsoft/fetch-event-source'
+// import { fetchEventSource } from '@microsoft/fetch-event-source'
 
 // 数字人对话框
 export function CreateDialogue (data){

src/views/AIPainting.vue

@@ -22,18 +22,25 @@
             <!-- AI生成图片对话框 -->
             <div class="ai-message">
               接下来我将生成四张会飞的猪的图片。画面风格是写实风，主体是一只身体肥硕、粉色皮肤、小短腿的猪，它长着两只大耳朵和一条卷曲的尾巴，正扇动着一对白色的翅膀在空中飞行。<br />
-               <div class="image-list">
+              <div class="image-list">
                 <el-image
                   v-for="(image, index) in srcList"
                   :key="index"
-                  style=" width: fit-content; height: 150px; margin: 10px;"
+                  style="width: fit-content; height: 150px; margin: 10px"
                   :src="image"
                   :preview-src-list="srcList"
                   fit="cover"
                   show-progress
                 >
                   <template
-                    #toolbar="{ actions, prev, next, reset, activeIndex, setActiveItem }"
+                    #toolbar="{
+                      actions,
+                      prev,
+                      next,
+                      reset,
+                      activeIndex,
+                      setActiveItem
+                    }"
                   >
                     <el-icon @click="prev"><Back /></el-icon>
                     <el-icon @click="next"><Right /></el-icon>
@@ -42,16 +49,32 @@
                     </el-icon>
                     <el-icon @click="actions('zoomOut')"><ZoomOut /></el-icon>
                     <el-icon
-                      @click="actions('zoomIn', { enableTransition: false, zoomRate: 2 })">
+                      @click="
+                        actions('zoomIn', {
+                          enableTransition: false,
+                          zoomRate: 2
+                        })
+                      "
+                    >
                       <ZoomIn />
                     </el-icon>
                     <el-icon
-                      @click="actions('clockwise', { rotateDeg: 180, enableTransition: false })">
+                      @click="
+                        actions('clockwise', {
+                          rotateDeg: 180,
+                          enableTransition: false
+                        })
+                      "
+                    >
                       <RefreshRight />
                     </el-icon>
-                    <el-icon @click="actions('anticlockwise')"><RefreshLeft /></el-icon>
+                    <el-icon @click="actions('anticlockwise')"
+                      ><RefreshLeft
+                    /></el-icon>
                     <el-icon @click="reset"><Refresh /></el-icon>
-                    <el-icon @click="download(activeIndex)"><Download /></el-icon>
+                    <el-icon @click="download(activeIndex)"
+                      ><Download
+                    /></el-icon>
                   </template>
                 </el-image>
               </div>
@@ -74,7 +97,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-// import { CreatePainting,CreatePaintingGetMy} from '@/api/questions.js'
+import { CreatePainting, CreatePaintingGetMy } from '@/api/questions.js'
 import { useRouter, useRoute } from 'vue-router'
 import {
   Document,
@@ -84,6 +107,11 @@ import {
   ArrowLeftBold
 } from '@element-plus/icons-vue'
 
+const myPaintings = ref([])
+
+// 消息列表
+const messageList = ref([])
+
 // 返回上一页
 const goBack = () => {
   router.go(-1)
@@ -91,30 +119,60 @@ const goBack = () => {
 const router = useRouter()
 const route = useRoute()
 
-// AI生成图片
-// CreatePainting({
-//   modelId: 56,
-//   prompt:''
-// }).then(res=>{
-//   console.log(res);
-// })
+// AI生成图片函数，传递输入的提示词
+const generatePainting = prompt => {
+  // 传递提示词参数
+  CreatePainting({
+    modelId: 56,
+    prompt,
+    width: 1024,
+    height: 1024
+  })
+    .then(res => {
+      console.log(res)
+      console.log(prompt)
+      // 添加处理响应逻辑，更新图片列表
+      // 添加消息到消息列表
+      messageList.value.push({ type: 'user', content: prompt })
+       // 响应中包含图片id
+      if (res.data && res.data.id) {
+        // 添加AI响应消息到消息列表
+        messageList.value.push({ type: 'ai', content: `生成图片成功，ID为 ${res.data.id}` })
+      }
+    })
+    .catch(error => {
+      console.error('生成图片失败:',  error)
+       messageList.value.push({ type: 'ai', content: '生成图片失败，请重试' })
+    })
+}
+
+// 修改发送消息函数，调用生成图片方法并传递提示词
+const sendMessage = () => { 
+  const prompt = inputMessage.value.trim() 
+  if (prompt) { 
+    // 直接调用 generatePainting 函数，不再需要 messages 变量
+    generatePainting(prompt) 
+    inputMessage.value = '' 
+  } 
+}
 
-// 获取绘图记录
-// CreatePaintingGetMy().then(res=>{
-//   console.log(res);
-// })
+// 获取绘图记录函数
+// const getMyPaintings = () => {
+//   CreatePaintingGetMy().then(res => {
+//     console.log(res);
+//     // 可添加处理响应逻辑，如更新本地数据
+//   });
+// }
 
 // 消息列表和输入内容的响应式变量
 const messages = ref([])
-
 const inputMessage = ref('')
-// 发送消息函数
-const sendMessage = () => {
-  if (inputMessage.value.trim()) {
-    messages.value.push(inputMessage.value.trim())
-    inputMessage.value = ''
-  }
-}
+
+// 在组件挂载时获取所有绘图记录
+onMounted(() => {
+  // getPaintingRecordById()
+  generatePainting()
+})
 
 // 生成图片
 import { ElIcon } from 'element-plus'
@@ -127,7 +185,7 @@ import {
   RefreshRight,
   Right,
   ZoomIn,
-  ZoomOut,
+  ZoomOut
 } from '@element-plus/icons-vue'
 
 const url =
@@ -139,10 +197,8 @@ const srcList = [
   'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
   'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
   'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
-  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
+  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
 ]
-
-
 </script>
 
 <style scoped lang="scss">

src/views/AIQuestions.vue

@@ -404,13 +404,10 @@ onMounted(async () => {
     }).catch(error => {
       console.error('请求出错:', error);
     });
-
     await getConversation(personId.value)
   }
-
   // 获取列表数据
   // activeMessageListLoading.value = true
-
 })
 </script>