AIClass/src/components/ai/image/ImageToImage.vue

<template>
  <!-- 图生图 -->
  <div class="number-people">
    <div class="content-box">
      <!-- AI对话框 -->
      <div class="chat-dialog">
        <!-- 对话消息列表 -->
        <div class="message-list">
          <div v-if="imageAllList.length > 0">
              <div  v-for="(item, index) in imageAllList" :key="index">
            <!-- 用户消息 -->
            <div class="user-message" v-if="item.type === 'user'">
              {{ item.content }}
              <div class="user-image-list" v-if="item.imageUrl">
                <el-image
                  style="width: fit-content; height: 180px; margin: 10px;"
                  :src="item.imageUrl"
                  :preview-src-list="[item.imageUrl]"
                  fit="cover"
                  show-progress
                >
                  <template
                    #toolbar="{ actions, prev, next, reset, activeIndex, setActiveItem }"
                  >
                    <el-icon @click="prev"><Back /></el-icon>
                    <el-icon @click="next"><Right /></el-icon>
                    <el-icon @click="setActiveItem(item.imageList.length - 1)">
                      <DArrowRight />
                    </el-icon>
                    <el-icon @click="actions('zoomOut')"><ZoomOut /></el-icon>
                    <el-icon @click="actions('zoomIn', { enableTransition: false, zoomRate: 2 })"><ZoomIn /></el-icon>
                    <el-icon @click="actions('clockwise', { rotateDeg: 180, enableTransition: false })"><RefreshRight /></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>
                  </template>
                </el-image>
              </div>
            </div>
            <!-- AI生成图片对话框 -->
            <div class="ai-message" v-if="item.type !== 'user'">
              {{ item.content }}
              <span v-if="item.loading" class="loading-dots">
                <span class="dot"></span>
                <span class="dot"></span>
                <span class="dot"></span>
              </span>
              <div class="image-list" v-if="item.imageList">
                <el-image
                    v-for="(image, index) in item.imageList"
                    :key="index"
                    style=" width: fit-content; height: 220px; margin: 10px;"
                    :src="image"
                    :preview-src-list="item.imageList"
                    fit="cover"
                    show-progress
                >
                  <template
                      #toolbar="{ actions,  reset, activeIndex}"
                  >
                    <el-icon @click="actions('zoomOut')"><ZoomOut /></el-icon>
                    <el-icon
                        @click="actions('zoomIn', { enableTransition: false, zoomRate: 2 })">
                      <ZoomIn />
                    </el-icon>
                    <el-icon
                        @click="actions('clockwise', { rotateDeg: 180, enableTransition: false })">
                      <RefreshRight />
                    </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>
                  </template>
                </el-image>
              </div>
            </div>
             </div>
          </div>
        </div>

        <!-- 输入框和发送按钮 -->
        <div class="input-section">
          <input
            ref="inputRef"
            type="text"
            v-model="inputMessage"
            placeholder="描述任何画面..."
            @keyup.enter="sendMessage"
            style="flex: 1; margin-right: 8px;"
          />
          <!-- 风格选择下拉框 -->
          <el-select 
            v-model="selectedStyle" 
            placeholder="选择风格"
            @change="handleStyleSelectChange"
            size="small"
            class="custom-style-select"
          >
            <el-option 
              v-for="style in styleList" 
              :key="style" 
              :label="style" 
              :value="style"
            />
          </el-select>
          <!-- 参考图 -->
           <ImageUpload v-model="uploadedImage" ref="imageUploadRef"/>
          <!-- 语音输入按钮 -->
          <button
              @click="toggleSpeechInput"
              class="speech-btn"
              :class="{ 'recording': isRecording }"
          >
            <el-icon v-if="!isRecording"><Microphone /></el-icon>
            <el-icon v-else><Mute /></el-icon>
            <!-- 显示倒计时（仅录音时显示） -->
            <span v-if="isRecording" class="countdown-text">{{ countdown }}s</span>
          </button>

          <!-- 终止按钮 -->
          <div
            v-if="conversationInProgress"
            @click="stopStream"
            class="stop-btn"
            title="终止问答"
          >
            <img :src="stopicon" alt="停止" />
          </div>
          <button v-if="!conversationInProgress"
            @click="sendMessage">发送</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted,onUnmounted} from 'vue'
import {AiImageStatusEnum, CreatePainting, PaintingGetMys} from '@/api/questions.js'
import { useRouter, useRoute } from 'vue-router'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  ArrowLeftBold,
  Fold,
  Expand,
  ChatLineRound,
  Picture,
  MagicStick,
  Tickets,
  User,
  Brush,
  Check,
  EditPen,
  ArrowDown,
  ArrowUp
} from '@element-plus/icons-vue'

import { saveRecord } from '@/api/personalized/index.js'

// 导入全局状态
import { globalState } from '@/utils/globalState.js'
// 语音图标
import { Microphone, Mute } from "@element-plus/icons-vue";
// 终止按钮
import stopicon from "@/assets/icon/stopicon.png";
// 消息组件
import {Message} from "@/utils/message/Message.js";

// 上传参考图
import ImageUpload from '@/components/ImageUpload/index.vue';

// 导入接口
import { getModelIdByType } from '@/api/teachers.js'
import { ModelTypeEnum } from '@/api/teachers.js'

// 存储上传的图片
const uploadedImage = ref('');

const imageUploadRef = ref(null);

// 当前选中的风格
const selectedStyle = ref('');
// 已移除dropdownVisible，使用el-select的v-model

// 语音输入响应式变量
const isRecording = ref(false); // 录音状态
const recognition = ref(null); // 语音识别实例
const countdown = ref(0); // 倒计时剩余秒数
const countdownTimer = ref(null); // 倒计时定时器

// 风格列表
const styleList = ['电影写真', '中国风', '卡通', '动漫', '素描', '像素风格'];
// 对话状态变量
const conversationInProgress = ref(false); // 对话是否正在进行中
const conversationInAbortController = ref(); // 对话进行中 abort 控制器

// tts 语音
import { useAudioPlayer } from '@/api/tts/useAudioPlayer';

// 添加抽屉显示状态
const drawerVisible = ref(true)

  // 年级ID相关
const gradeId = ref('')
// 添加消息计数器变量
const messageCount = ref(0)
// modelId响应式变量
const modelId = ref(0)
// 保存记录
onMounted(async () => {
    // 从全局状态初始化年级ID
  gradeId.value = globalState.initGradeId()
  try{
    const res = await saveRecord({
        brpNjId: gradeId.value,
        brpType: "aiCount",
        brpProgress: 1
      });
      // 获取modelId
    const modelRes = await getModelIdByType({ type: ModelTypeEnum.IMAGE_TO_IMAGE, platform: "DouBao" })
    modelId.value = modelRes.data
  }catch(error){
    console.error('保存记录失败:', error);
  }
});

// 消息列表和输入内容的响应式变量
const inputMessage = ref('')
// 输入框引用
const inputRef = ref(null)

// 初始化语音识别
const initSpeechRecognition = () => {
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  if (!SpeechRecognition) {
    alert("当前浏览器不支持语音输入功能");
    return null;
  }

  const instance = new SpeechRecognition();
  instance.lang = 'zh-CN';
  instance.interimResults = false;

  instance.onresult = (event) => {
    if (event.results?.[0]?.[0]) {
      inputMessage.value += event.results[0][0].transcript;
    }
  };

  // 识别器结束时清除定时器
  instance.onend = () => {
    clearInterval(countdownTimer.value);
    isRecording.value = false;
    countdown.value = 0;
  };

  instance.onerror = (event) => {
    console.error('语音识别错误:', event.error);
    clearInterval(countdownTimer.value); // 出错时清除定时器
    isRecording.value = false;
    Message().error('语音输入失败，请重试！', true)
    countdown.value = 0;
  };

  return instance;
};

// 切换录音状态
const toggleSpeechInput = () => {
  // 清除可能存在的旧定时器
  clearInterval(countdownTimer.value);
  countdownTimer.value = null;

  if (isRecording.value) {
    // 手动停止时重置状态
    countdown.value = 0;
    recognition.value?.stop();
    isRecording.value = false;
  } else {
    // 初始化倒计时前再次清除定时器（防止快速点击）
    clearInterval(countdownTimer.value);
    countdown.value = 10; // 重置为10秒

    recognition.value = initSpeechRecognition();
    if (!recognition.value) return;

    navigator.mediaDevices.getUserMedia({ audio: true })
      .then(() => {
        recognition.value.start();
        isRecording.value = true;

        // 启动新的倒计时定时器
        countdownTimer.value = setInterval(() => {
          countdown.value--;
          if (countdown.value <= 0) {
            clearInterval(countdownTimer.value); // 倒计时结束清除
            recognition.value.stop();
            isRecording.value = false;
            countdown.value = 0;
          }
        }, 1000);
      })
      .catch((err) => {
        console.error("麦克风权限获取失败:", err);
        alert("请允许麦克风权限以使用语音输入");
        // 出错时重置状态
        isRecording.value = false;
        countdown.value = 0;
      });
  }
};

// 停止操作函数
const stopStream = async () => {
  // tip：如果 stream 进行中的 message，就需要调用 controller 结束
  if (conversationInAbortController.value) {
    conversationInAbortController.value.abort();
  }
  // 设置为 false
  conversationInProgress.value = false;
};

// 发送消息函数，图片数据
const sendMessage = async() => {
  if (uploadedImage.value) {
    // 创建 AbortController 实例，以便中止请求
    conversationInAbortController.value = new AbortController();
    // 标记对话进行中
    conversationInProgress.value = true;
    // 先保存内容 再置空输入框
    let content = inputMessage.value;
    inputMessage.value = '';
    

    // 创建用户消息对象，包含可能的图片
    const userMessage = {
      type: 'user',
      content: content,
    };
    
    // 如果有上传的图片，添加到用户消息中
    if (uploadedImage.value) {
      userMessage.imageUrl = uploadedImage.value;
      // 清空上传的图片
      // uploadedImage.value = '';
    }
    
    imageAllList.value.push(userMessage);
    imageAllList.value.push({
      type: 'ai',
      content: "正在为您生成图片，请稍等",
      loading: true
    })

    // 递增消息计数器
    messageCount.value++
    // 发送saveRecord请求 保存消息次数
    try{
      await saveRecord({
         brpNjId: gradeId.value,
         brpType: "aiCount",
         brpProgress: messageCount.value
       });
       console.log('保存记录成功，消息次数:', messageCount.value);
   }catch(error){
     console.error('保存记录失败:', error);
     conversationInProgress.value = false;
   }

    try {
      CreatePainting({
        "modelId": modelId.value,
        "prompt":content,
        "width":1024,
        "height":1024,
        "promptImage":uploadedImage.value
      }).then(res=>{
        console.log("生成图片",res)
        //目前写死调用已生成的图片，全部通了后再改
        inProgressImageMap.value[res.data] = {id:res.data,status:AiImageStatusEnum.IN_PROGRESS}
        // inProgressImageMap.value[260] = {id:260,status:AiImageStatusEnum.IN_PROGRESS}
      }).finally(() => {
        // 图片生成请求完成后更新状态
        conversationInProgress.value = false;
      });
    } catch (error) {
      console.error('生成图片失败:', error);
      conversationInProgress.value = false;
    }
  } else {
    // 如果没有上传图片，显示提示信息
    Message().error('请先上传参考图！', true);
  }
  // 调用子组件的方法清除预览图
  imageUploadRef.value?.clearPreview();
};


// 生成图片
import { ElIcon } from 'element-plus'
import {
  Back,
  DArrowRight,
  Download,
  Refresh,
  RefreshLeft,
  RefreshRight,
  Right,
  ZoomIn,
  ZoomOut,
} from '@element-plus/icons-vue'


const imageAllList = ref([]) // 对话的消息列表
// 图片轮询相关的参数（正在生成中的）
const inProgressImageMap = ref({}) // 监听的 image 映射，一般是生成中（需要轮询），key 为 image 编号，value 为 image
const inProgressTimer = ref() // 生成中的 image 定时器，轮询生成进展


/** 轮询生成中的 image 列表 */
const refreshWatchImages = async () => {
  const imageIds = Object.keys(inProgressImageMap.value).map(Number)
  if (imageIds.length === 0) {
    return
  }
  const list = await PaintingGetMys(imageIds)
  const newWatchImages = {}
  list.data.forEach((image) => {
    
    if (image.status === AiImageStatusEnum.IN_PROGRESS) {
      newWatchImages[image.id] = image
    } else {
      imageAllList.value.pop();
      console.log('AI生成的图片地址:', image.picUrl);
      imageAllList.value.push({
        type: 'ai',
        content: "已为您生成图片：",
        imageList: [image.picUrl],
      })
    }
  })
  inProgressImageMap.value = newWatchImages
  if (newWatchImages.size === 0) {
    inProgressTimerFun()
  }
}


/** 组件挂在的时候 */
onMounted(async () => {
  refreshWatchImagesFun()
})

/** 组件取消挂在的时候 */
onUnmounted(async () => {
  inProgressTimerFun()
})

// 自动刷新 image 列表
const refreshWatchImagesFun = () => {
  inProgressTimer.value = setInterval(async () => {
    await refreshWatchImages()
  }, 1000 * 3)
}

// 停止刷新image列表
const inProgressTimerFun = () => {
  if (inProgressTimer.value) {
    clearInterval(inProgressTimer.value)
  }
}

// 处理风格选择变化事件
const handleStyleSelectChange = (style) => {
  // 检查输入框中是否已经包含风格描述，如果有则替换，没有则添加
  const styleRegex = /生成图片风格为[^,]+/g;
  if (styleRegex.test(inputMessage.value)) {
    // 替换现有的风格描述
    inputMessage.value = inputMessage.value.replace(styleRegex, `生成图片风格为${style}`);
  } else {
    // 添加新的风格描述
    inputMessage.value += `生成图片风格为${style}`;
  }
  // 选中风格后，将光标自动对焦到输入
  inputRef.value?.focus();
}

</script>

<style scoped lang="scss">
@use 'sass:math';
// 定义rpx转换函数
@function rpx($px) {
  @return math.div($px, 750) * 100vw;
}
// 用户图片列表样式
.user-image-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: rpx(5);
}
.number-people {
  flex: 1;
  height: 100%;
  display: flex;
  background-color: #ece9fd;
}

.content-box {
  flex: 1;
  // margin-top: rpx(10);
  // margin-bottom: rpx(10);
  margin: rpx(7);
  border-radius: rpx(15);
  background: rgba($color: #ffffff, $alpha: 0.5);
  overflow-y: auto;
}

// 对话框
.chat-dialog {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.message-list {
  flex: 1;
  overflow-y: auto;
  padding: rpx(15);
}
/* 自定义滚动条样式 */
.message-list::-webkit-scrollbar {
  width: rpx(2); /* 滚动条宽度 */
}
.message-list::-webkit-scrollbar-track {
  background: #f1effd; /* 滚动条轨道背景色 */
  border-radius: rpx(4);
}
.message-list::-webkit-scrollbar-thumb {
  background: #e2ddfc; /* 滚动条滑块颜色 */
  border-radius: rpx(4);
}
.message-list::-webkit-scrollbar-thumb:hover {
  background: #e2ddfc; /* 滚动条滑块 hover 状态颜色 */
}

.message-list .user-message {
  background-color: #ffffff;
  margin-left: auto; // 消息靠右显示
  margin-right: 0; // 重置右边距
  max-width: rpx(400);
  font-size: rpx(8);
  width: fit-content; // 宽度随文字内容变化
  border-radius: rpx(5);
  padding: rpx(5);
  text-align: left; // 文字左对齐
}

.message-list .ai-message {
  background-color: #ffdd55;
  margin-left: 0; // 消息靠左显示
  margin-right: auto; // 重置右边距
  margin-bottom: rpx(10);
  width: fit-content;
  max-width: rpx(400);
  padding: rpx(5);
  font-size: rpx(8);
  border-radius: rpx(5);
  text-align: left; // 文字左对齐
}

// 加载动画效果
.loading-dots {
  display: inline-block;
  margin-left: rpx(5);
}
.loading-dots .dot {
  display: inline-block;
  width: rpx(3);
  height: rpx(3);
  border-radius: 50%;
  background-color: #333;
  margin: 0 rpx(1);
  animation: loading-dot 1.4s infinite ease-in-out both;
}
.loading-dots .dot:nth-child(1) {
  animation-delay: -0.32s;
}
.loading-dots .dot:nth-child(2) {
  animation-delay: -0.16s;
}
@keyframes loading-dot {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.image-list {
  display: flex;
  flex-wrap: wrap;
}


.content-demo {
  background-color: #f4f2fa;
  border-radius: 15px;
  padding: 30px 10px;
}

// 风格下拉框
.style-dropdown{
  // min-width: auto;
  width: fit-content;
  padding: rpx(6);
}
.style-dropdown ::v-deep(.el-dropdown-menu__item) {
  font-size: rpx(8);
  color: black;
  border-radius: rpx(5);
  min-width: auto; 
  width: rpx(55);
  height: rpx(15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: rpx(10);
}
.selected-icon {
    color: black;
    font-size: rpx(10);
  }
  .style-dropdown ::v-deep(.el-dropdown-menu__item:hover),
  .style-dropdown ::v-deep(.el-dropdown-menu__item:focus),
  .style-dropdown ::v-deep(.el-dropdown-menu__item:active) {
    background: linear-gradient(
      to bottom,
      #fee78a,
      #ffce1b
    );
  }
  
  


.input-section {
  display: flex;
  padding: rpx(10);
  gap: rpx(5);
  .speech-btn {
    padding: rpx(5) rpx(10);
    background: #fff;
    border: 1px solid #ffce1b;
    border-radius: rpx(5);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: rpx(4);
    &.recording {
      background: #ffeeba;
      border-color: #ffc107;

      .el-icon {
        color: #dc3545;
      }
    }
    .el-icon {
      font-size: rpx(8);
      color: #666;
    }
    .dropdown-icon {
      font-size: rpx(6);
      transition: transform 0.3s ease;
    }
  }
  // 终止按钮样式
  .stop-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    img {
      width: rpx(20);
      height: rpx(20);
    }
  }
}
.input-section input {
  flex: 1;
  padding: rpx(5);
  font-size: rpx(7);
  border: 1px solid #ccc;
  border-radius: rpx(5);
}
.input-section button {
  padding: rpx(5) rpx(15);
  background: linear-gradient(
    to bottom,
    #fee78a,
    #ffce1b
  ); /* 设置悬停、聚焦、点击状态下的背景色 */
  color: black;
  border: none;
  font-size: rpx(7);
  border-radius: rpx(5);
  cursor: pointer;
    box-shadow: 0 0px 2px rgba(0, 0, 0, 0.3);

}

.image-upload-section {
  padding: rpx(10);
  display: flex;
  justify-content: center;
  align-items: center;
}

// 风格下拉框
.custom-style-select {
    width: rpx(55);
  }
.custom-style-select ::v-deep(.el-select__wrapper) {
    background-color: #ffff;
     width: rpx(55);
     height: rpx(20);
     font-size: rpx(6);
     color: black;
     border: 1px solid #ffce1b;
    border-radius: rpx(5);
  }
</style>