agent chat

backup/index copy.vue

-<script setup lang="ts">
-import utils from '@/utils/utils'
-import { onUpdated, onMounted, reactive, ref } from 'vue'
-import { detectDeviceType } from './compositions/common'
-import { myFileUpload } from './compositions/fileUpload'
-import { useCropBox } from './compositions/useCropBox'
-import { onProcessing } from './compositions/process'
-
-
-const title = ref('元芒数字')
-const form = reactive({
-  source: '',
-  task_id: '',
-  file_path: '',
-  file_path_domain: '',
-  file_name: '',
-  file_size: 0,
-  crop_range: {},
-  box_range: {},
-  is_set: false,
-  sample_path: '',
-})
-const steps_active = ref(0)
-const FileSizeLimitM = 500
-const file_loading = ref(false)
-const my_file_upload = myFileUpload(FileSizeLimitM, form, file_loading)
-const upload = my_file_upload.upload
-const actionUrl = my_file_upload.actionUrl
-// 裁剪
-const videoPlayer = ref<HTMLVideoElement | null>(null)
-const canvas = ref<HTMLCanvasElement | null>(null)
-const ctx = ref<CanvasRenderingContext2D | null>(null)
-
-const cropBox = useCropBox(form, canvas, ctx)
-
-const result_loading = ref(false)
-const processing = onProcessing(form, steps_active, result_loading)
-
-
-onMounted(async () => {
-  // 检测设备类型
-  form.source = detectDeviceType();
-  // 设置页面标题
-  document.title = title.value;
-  // 生成task_id
-  form.task_id = utils.genDateTimeStr();
-  console.log('页面加载，task_id =', form.task_id);
-})
-onUpdated(() => {
-  if (steps_active.value === 0 && form.is_set && form.sample_path !== '') {
-    console.log('切换到步骤 0 时执行脚本');
-    form.task_id = utils.genDateTimeStr();
-    console.log('返回首页，task_id =', form.task_id);
-    // 显示裁剪框
-    setTimeout(() => {
-      console.log('waiting for video size...')
-      cropBox.generate_canvas();
-    }, 1000)
-  }
-})
-
-</script>
-
-
-<template>
-  <main class="home-container">
-    <!-- 标题 -->
-    <div class="title"><el-text>生成训练样本</el-text></div>
-    <div class="subtitle"><el-text>上传视频生成训练样本</el-text></div>
-    <!-- 步骤条 -->
-    <div>
-      <el-steps :active="steps_active" align-center finish-status="success">
-        <el-step title="上传视频并设置范围"/>
-        <!-- <el-step title="选取背景图"/> -->
-        <el-step title="生成样本"/>
-      </el-steps>
-    </div>
-
-    <div class="content-container">
-      <!-- 文件页 -->
-      <div class="upload-section" v-if="steps_active === 0">
-        <div><el-text class="section-title">上传文件、设置范围</el-text></div>
-        <div><el-text class="section-desc">上传视频后，可以播放、暂停，然后点击设置，先画裁剪框，再画扫描框</el-text></div>
-        <div class="upload-div" v-loading="file_loading" v-if="!form.file_path">
-          <el-upload
-            ref="upload"
-            :show-file-list="false"
-            :limit="1"
-            drag
-            accept=".mp4"
-            :action="actionUrl"
-            :on-success="my_file_upload.handleUploadSuccess"
-            :on-exceed="my_file_upload.handleUploadExceed"
-            :on-error="my_file_upload.handleUploadError"
-            :on-remove="my_file_upload.handleRemoveFile"
-            :before-upload="my_file_upload.handleBeforeUpload"
-            :on-progress="my_file_upload.handleUploadProgress"
-            list-type="picture"
-          >
-            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
-            <div class="el-upload__text">拖拽文件到这里 或 <em>浏览文件</em></div>
-            <div class="el-upload__tip" slot="tip">文件格式mp4, 大小限制{{FileSizeLimitM}}M</div>
-          </el-upload>
-        </div>
-        
-        <div class="uploaded-div" v-if="form.file_path" >
-          <div class="uploaded-file-info">
-            <video id="video-player" :src="form.file_path_domain" controls></video>
-            <canvas
-              id="crop-canvas"
-              style="background-color: rgba(255, 0, 0, 0.1); position: absolute; left: 0; z-index: -1;"
-              @mousedown="cropBox.startDrawing"
-              @mousemove="cropBox.draw"
-              @mouseup="cropBox.endDrawing"
-            >
-            </canvas>
-          </div>
-
-          <el-button color="#181818" @click="cropBox.generate_canvas">设置</el-button>
-          <el-button color="#181818" @click="cropBox.reset">重置</el-button>
-          <p>裁剪框坐标：{{ form.crop_range }}</p>
-          <p>扫描框坐标：{{ form.box_range }}</p>
-          <!-- <p>{{ form.task_id }}</p> -->
-        </div>
-        
-        <div class="button">
-          <el-button class="next" color="#181818" size="large" @click="processing.onProcess" :disabled="!form.is_set">Next</el-button>
-        </div>
-      </div>
-
-      <!-- 结果页 -->
-      <div class="report-section" v-if="steps_active === 1">
-        <div><el-text class="section-title">结果</el-text></div>
-        <div><el-text class="section-desc">下载样本</el-text></div>
-        <!-- 预览 -->
-        <div v-loading="result_loading">
-          <el-text class="progress-info-sub">
-            {{ form.sample_path}}
-          </el-text>
-        </div>
-        <!-- 按钮 -->
-        <div class="button">
-          <el-button class="back" size="large" @click="processing.back_to_first">Back</el-button>
-          <el-button class="next" color="#181818" size="large" 
-            @click="processing.downloadFile(form.sample_path)"
-            :disabled="!(form.sample_path && form.sample_path.length > 0)"
-          >Download</el-button>
-        </div>
-      </div>
-
-
-    </div>
-  </main>
-
-
-
-</template>
-
-<style lang="scss" scoped src="./index.css"></style>

components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElForm: typeof import('element-plus/es')['ElForm']

src/router/index.ts

@@ -3,6 +3,8 @@ import HomeView from '../views/home/index.vue'
 import SampleHandleView from '../views/sample_handle/index.vue'
 import WmNanoBananaView from '../views/wm_nano_banana/index.vue'
 import SampleHandleViewV2 from '../views/sample_handle_v2/index.vue'
+import AgentChatView from '../views/agent_chat/index.vue'
+
 
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
@@ -10,7 +12,7 @@ const router = createRouter({
     {
       path: '/',
       name: 'home',
-      component: SampleHandleViewV2
+      component: AgentChatView
     },
     {
       path: '/report',
@@ -32,6 +34,11 @@ const router = createRouter({
       name: 'sample_handle_v2',
       component: SampleHandleViewV2
     },
+    {
+      path: '/agent_chat',
+      name: 'agent_chat',
+      component: AgentChatView
+    },
   ]
 })
 

src/views/agent_chat/index.css

+.home-container {
+    width: 100%;
+
+    .title {
+        :is(span) {
+            font-size: 25px;
+            font-weight: bold;
+            color: #181818;
+        }
+        text-align: center;
+        margin: 20px 0 0 0;
+    }
+    .subtitle {
+        :is(span) {
+            font-size: 13px;
+            color: #181818;
+        }
+        text-align: center;
+        margin: 0 0 20px 0;
+    }
+    .button {
+        text-align: center;
+        margin: 10px 0 20px 0;
+    }
+}
+
+
+
+
+

src/views/agent_chat/index.vue

+<script setup lang="ts">
+import utils from '@/utils/utils'
+import { onUpdated, onMounted, reactive, ref } from 'vue'
+import {
+  Check,
+  Delete,
+  Edit,
+  Message,
+  Search,
+  Star,
+} from '@element-plus/icons-vue'
+import aitoolsService from '@/api/service/aitoolsService';
+import { ElMessage } from 'element-plus';
+
+const title = ref('元芒数字')
+
+onMounted(async () => {
+  // 设置页面标题
+  document.title = title.value;
+})
+
+const onInitSubmit = async () => {
+  try {
+      let param: any = {}
+      await aitoolsService.commonApi('初始化session', 'take_customer_info', param);
+  } catch (error) {
+      ElMessage({
+          message: String(error),
+          type: 'error'
+      })
+  }
+}
+
+
+</script>
+
+
+<template>
+  <main class="home-container">
+    <!-- 标题 -->
+    <div class="title"><el-text>Agent Chat</el-text></div>
+    <div class="subtitle"><el-text>Agent Chat</el-text></div>
+
+    <div class="button"> 
+      <el-button type="success">start session</el-button>
+      <el-button type="success">clear session</el-button>
+    </div>
+
+    <div class="chat-container"> 
+      <div class="chat-item">
+        <div class="chat-item-avatar">
+          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
+        </div>
+        <div class="chat-item-content">
+          <div class="chat-item-content-text">
+            <el-text>你好，我是元小芒</el-text>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </main>
+</template>
+
+<!-- 样式 只在当前页面生效，优先级比组件样式低 -->
+<style lang="scss" scoped src="./index.css"></style>