wip: create course generate

2024-06-24 22:03:46 +08:00
parent 4ef71c2691
commit 48aced8b6e
4 changed files with 126 additions and 27 deletions
--- a/components/aigc/course-generate/CGTaskCard.vue
+++ b/components/aigc/course-generate/CGTaskCard.vue
@@ -1,20 +1,62 @@
 <script setup lang="ts">
+import type { PropType } from 'vue'
+import dayjs from 'dayjs'
+import { useDownload } from '~/composables/useDownload'

+const props = defineProps({
+  course: {
+    type: Object as PropType<resp.gen.CourseGenItem>,
+    required: true,
+  },
+})
+
+const stateDisplay = computed(() => {
+  if (props.course.progress === -1) return {
+    color: 'red',
+    text: '失败',
+  }
+  if (props.course.progress === 100) return {
+    color: 'green',
+    text: '完成',
+  }
+  return {
+    color: 'blue',
+    text: '进行中',
+  }
+})
 </script>

 <template>
  <div
-    class="w-full rounded-xl border border-neutral-200 dark:border-neutral-700 hover:shadow transition overflow-hidden">
+    class="w-full rounded-xl border border-neutral-200 dark:border-neutral-700 hover:shadow transition overflow-hidden"
+  >
    <div class="relative w-full aspect-video">
      <NuxtImg
-        :src="`http://localhost:3000/${Math.random() > 0.5 ? 'demo' : 'demo2'}.jpg`"
+        v-if="!!course.video_cover"
+        :src="course.video_cover"
        alt="image"
        class="w-full h-full object-cover pointer-events-none absolute inset-0"
      />
+      <div
+        v-else
+        class="absolute inset-0 bg-gradient-to-br from-purple-400 to-primary-400 flex justify-center items-center"
+      >
+        <Icon class="text-white text-[64px] animate-pulse" name="i-tabler-photo-video"/>
+      </div>
      <div class="absolute inset-2 flex justify-end items-start">
-        <UTooltip :prevent="false" :shortcuts="['Ctrl', 'C']" text="出现错误">
-          <UBadge class="shadow" color="green" size="sm" variant="soft">
-            已完成
+        <UTooltip :prevent="course.progress > -1" :text="course.message || ''">
+          <UBadge
+            :color="stateDisplay.color"
+            :variant="stateDisplay.color === 'red' ? 'solid' : 'subtle'"
+            class="shadow"
+            size="sm"
+          >
+            <Icon
+              v-if="stateDisplay.color === 'red'"
+              class="text-base mr-0.5"
+              name="i-tabler-alert-triangle"
+            />
+            {{ stateDisplay.text }}
          </UBadge>
        </UTooltip>
      </div>
@@ -24,14 +66,14 @@
        <h1 class="text-sm font-medium overflow-hidden text-ellipsis text-nowrap"
            title="课程名字课程名字课程名字课程名字课程名字课程名字课程名字课程名字">
          <Icon class="-mt-0.5 -ml-0.5 text-base" name="i-tabler-book-2"/>
-          <span>课程名字</span>
+          <span class="pl-0.5">{{ course.title }}</span>
        </h1>
        <p class="text-xs pt-0.5 text-neutral-400 space-x-2">
-          <span>2024-06-20 17:34:20</span>
+          <span>{{ dayjs(course.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
          <button
            class="hover:text-primary font-medium"
            tabindex="-1"
-            title="5cb35fbd-4f8a-4105-9b10-d828f3b0f553"
+            :title="course.task_id"
          >
            复制ID
          </button>
@@ -39,7 +81,16 @@
      </div>
      <div class="flex items-center gap-1">
        <UButtonGroup>
-          <UButton color="white" label="下载" leading-icon="i-tabler-download" size="xs"/>
+          <UButton
+            color="white"
+            label="下载"
+            leading-icon="i-tabler-download"
+            size="xs"
+            @click="() => {
+              const {download} = useDownload(course.video_url, `眩生花微课_${course.title}_${course.task_id}.mp4`)
+              download()
+            }"
+          />
          <UDropdown
            :items="[
              [{
--- a/components/aigc/course-generate/CourseGenerate.vue
+++ b/components/aigc/course-generate/CourseGenerate.vue
@@ -6,6 +6,7 @@ import { type InferType, number, object, string } from 'yup'
 import type { FormSubmitEvent } from '#ui/types'

 const loginState = useLoginState()
+const toast = useToast()

 const isCreateCourseModalOpen = ref(false)

@@ -23,7 +24,9 @@ const {
    to_user_id: loginState.user.id,
    page: 1,
    perpage: 10,
-  }),
+  }), {
+    transform: res => res?.data.items || [],
+  },
 )

 const onCreateCourseClick = () => {
@@ -44,8 +47,36 @@ const createCourseState = reactive({
  speed: 1.0,
 })

+const selected_file = ref<File[] | null>(null)
+
 const onCreateCourseSubmit = async (event: FormSubmitEvent<CreateCourseSchema>) => {
  console.log(event.data)
+  if (!selected_file.value) {
+    toast.add({
+      title: '未选择文件',
+      description: '请先选择 PPTX 文件',
+      color: 'red',
+      icon: 'i-tabler-alert-triangle',
+    })
+    return
+  }
+  // upload PPTX file
+  useFileGo(selected_file.value[0]).then(url => {
+    useFetchWrapped<req.gen.CourseGenCreate & AuthedRequest, resp.gen.CourseGenCreate>('App.Digital_Convert.Create', {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      task_title: event.data.task_title,
+      gen_server: event.data.gen_server as 'main' | 'standby1',
+      speed: event.data.speed,
+      ppt_url: url,
+      digital_human_id: '40696',
+      custom_video: '[]',
+      opening_url: '',
+      ending_url: '',
+    }).then(res => {
+      console.log(res)
+    })
+  })
 }
 </script>

@@ -63,12 +94,10 @@ const onCreateCourseSubmit = async (event: FormSubmitEvent<CreateCourseSchema>)
      />
    </div>
    <div class="p-4">
-      <pre>{{ JSON.stringify(courseList, null, 2) }}</pre>
      <div class="relative grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-4 gap-4">
-
-        <CGTaskCard v-for="i in [...new Array(9)]"/>
-
+        <CGTaskCard v-for="(course, index) in courseList" :key="index" :course="course"/>
      </div>
+      <pre class="overflow-hidden">{{ JSON.stringify(courseList, null, 2) }}</pre>
    </div>

    <UModal
@@ -99,7 +128,7 @@ const onCreateCourseSubmit = async (event: FormSubmitEvent<CreateCourseSchema>)
        >
          <div class="flex justify-between gap-2 *:flex-1">
            <UFormGroup label="微课标题" name="task_title">
-              <UInput v-model="createCourseState.task_title"/>
+              <UInput v-model="createCourseState.task_title" placeholder="请输入微课标题"/>
            </UFormGroup>

            <UFormGroup label="生成线路" name="gen_server">
@@ -130,7 +159,10 @@ const onCreateCourseSubmit = async (event: FormSubmitEvent<CreateCourseSchema>)
          </UFormGroup>

          <UFormGroup label="PPT 文件">
-            <FileDnD accept="application/vnd.openxmlformats-officedocument.presentationml.presentation"/>
+            <FileDnD
+              accept="application/vnd.openxmlformats-officedocument.presentationml.presentation"
+              @change="file => selected_file = file"
+            />
          </UFormGroup>

          <div class="flex justify-end space-x-4 pt-4">
--- a/composables/useDownload.ts
+++ b/composables/useDownload.ts
@@ -0,0 +1,16 @@
+export const useDownload = (url: string, filename: string) => {
+  const download = () => {
+    fetch(url)
+    .then((response) => response.blob())
+    .then((blob) => {
+      const url = window.URL.createObjectURL(new Blob([blob]))
+      const link = document.createElement('a')
+      link.href = url
+      link.setAttribute('download', filename)
+      document.body.appendChild(link)
+      link.click()
+      link.parentNode?.removeChild(link)
+    })
+  }
+  return { download }
+}
--- a/composables/useFileGo.ts
+++ b/composables/useFileGo.ts
@@ -1,4 +1,4 @@
-import {useFetchWrapped} from '~/composables/useFetchWrapped';
+import { useFetchWrapped } from '~/composables/useFetchWrapped'

 const putOSS = (file: File, signed_url: string) => new Promise<void>((resolve, reject) => {
  let xhr = new XMLHttpRequest()
@@ -16,17 +16,17 @@ const putOSS = (file: File, signed_url: string) => new Promise<void>((resolve, r
 })

 export const useFileGo = (file: File) => new Promise<string>((resolve, reject) => {
-  useFetchWrapped<req.file.Upload & AuthedRequest, string>('App.Tools_Upload.GoOss', {
+  useFetchWrapped<req.file.Upload & AuthedRequest, BaseResponse<string>>('App.Tools_Upload.UploadOssMaterial', {
    token: useLoginState().token!,
    user_id: useLoginState().user.id,
    file_name: file.name,
    file_type: file.type,
    file_size: file.size,
  }).then(async res => {
-    if (res !== '') {
+    if (res.data !== '') {
      try {
-        await putOSS(file, res)
-        let url = res.split('?')[0]
+        await putOSS(file, res.data)
+        let url = res.data.split('?')[0]
        resolve(url)
      } catch (err) {
        reject(err)