From 7bc825ecc51fcddf8358c1615766c8a845d384cf Mon Sep 17 00:00:00 2001 From: congzc Date: Fri, 26 May 2023 18:09:53 +0800 Subject: [PATCH] 1 --- package.json | 1 + src/apis/createVideo.js | 22 + src/lang/package/en.ts | 3 +- src/lang/package/zh-cn.ts | 5 +- src/layout/components/Sidebar/Logo.vue | 1 + src/layout/components/Sidebar/index.vue | 2 +- src/layout/index.vue | 2 +- src/types/components.d.ts | 2 + src/views/createVideo/index copy.vue | 510 ++ src/views/createVideo/index.vue | 360 +- vite.config.ts | 3 + yarn-error.log | 6470 +++++++++++++++++++++++ yarn.lock | 5 + 13 files changed, 7352 insertions(+), 34 deletions(-) create mode 100644 src/apis/createVideo.js create mode 100644 src/views/createVideo/index copy.vue create mode 100644 yarn-error.log diff --git a/package.json b/package.json index d58f989..6b00c2f 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "axios": "^1.3.4", "echarts": "^5.2.2", "element-plus": "^2.3.1", + "js-audio-recorder": "^1.0.7", "nprogress": "^0.2.0", "path-browserify": "^1.0.1", "path-to-regexp": "^6.2.0", diff --git a/src/apis/createVideo.js b/src/apis/createVideo.js new file mode 100644 index 0000000..6d9bc39 --- /dev/null +++ b/src/apis/createVideo.js @@ -0,0 +1,22 @@ +import request from "@/utils/request.js"; + +/** + * @description 上传图片 + * @params ticket + * @returns data + */ +export function awsImgUpload(formData) { + return request({ + url: `/api/upload/awsImgUpload`, + method: 'post', + data: formData + }) +} + +export function awsMp3Upload(formData) { + return request({ + url: `/api/upload/awsImgUpload`, + method: 'post', + data: formData + }) +} \ No newline at end of file diff --git a/src/lang/package/en.ts b/src/lang/package/en.ts index f95a529..d380dbe 100644 --- a/src/lang/package/en.ts +++ b/src/lang/package/en.ts @@ -40,7 +40,8 @@ export default { languages: "Languages", voices: "Voices", styles: "Styles", - reload: "Reload", + reselect: "reselect", + sureUpload:'Confirm upload', generateVideo: "Generate Video", }, diff --git a/src/lang/package/zh-cn.ts b/src/lang/package/zh-cn.ts index a37681e..728da26 100644 --- a/src/lang/package/zh-cn.ts +++ b/src/lang/package/zh-cn.ts @@ -32,7 +32,7 @@ export default { createVideo: { title: "创作视频", typeScript: "输入文案", - uploadAudio: "上传视频", + uploadAudio: "上传音频", aiScript: "AI生成文本", typeTitle: "输入标题", confirm: "确定", @@ -40,7 +40,8 @@ export default { languages: "选择语言", voices: "选择声音", styles: "选择风格", - reload: "重新上传", + reselect: "重新选择", + sureUpload:'确认上传', generateVideo: "生成视频", }, diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue index 45f3b15..0d3a5c4 100644 --- a/src/layout/components/Sidebar/Logo.vue +++ b/src/layout/components/Sidebar/Logo.vue @@ -55,6 +55,7 @@ const logo = ref(new URL(`../../../assets/logo.png`, import.meta.url).href); // https://cn.vuejs.org/guide/built-ins/transition.html#the-transition-component .left-top-box { + height: 80px; background-color: #000; } diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index c973cb8..4d4fb74 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -76,7 +76,7 @@ function routerTo(url: RouteLocationRaw) { diff --git a/src/views/createVideo/index.vue b/src/views/createVideo/index.vue index ffca4c3..91d07f9 100644 --- a/src/views/createVideo/index.vue +++ b/src/views/createVideo/index.vue @@ -15,10 +15,15 @@ - +
+ + +
@@ -34,7 +39,17 @@
+ - + +
×
@@ -51,10 +66,15 @@
Generate By Ai
-
-
- -

{{ item }}name

+
+ + +

{{ item.title }}

@@ -64,19 +84,117 @@ -
111111111111111111
+
+
+ + + {{ $t("createVideo.confirm") }} + + + + + +
+

{{ $t("createVideo.languages") }}

+ + + +

{{ $t("createVideo.voices") }}

+ + + +

{{ $t("createVideo.styles") }}

+ + + + {{ + $t("createVideo.generateVideo") + }} +
-
+ +
+
+ + +
+ + + +
+ +
+ 上传视频 - +
- +
import { ref } from "vue"; import { getCurrentInstance } from "vue"; +import Recorder from "js-audio-recorder"; +import axios from "axios"; +import { awsImgUpload, awsMp3Upload } from "@/apis/createVideo"; +import { ElMessage } from "element-plus"; +// 获取AI头像 +const AiFace = ref([]); +function getAiFace() { + axios({ + url: "https://photo.metavatar.cc/C//api/personPhoto/list?pageNum=1&pageSize=1", + method: "get", + }).then((res) => { + AiFace.value = res.data.data.list; + console.log(res.data.data.list); + }); +} +getAiFace(); + // 标题 let title = ref(""); // 上传图片 let imgUrl = ref(""); -function changeFile(e) { +const imgData = ref(""); +// 预览图片 +function lookImg(e) { imgUrl.value = URL.createObjectURL(e.target.files[0]); + imgData.value = e.target.files[0]; +} +// 上传图片 +async function changeFile() { + imgUrl.value = URL.createObjectURL(imgData.value); + let formData = new FormData(); + const timestamp = Date.now(); + formData.append("file", imgData.value, timestamp + ".png"); + try { + const res = await awsImgUpload(formData); + ElMessage.success("上传成功!"); + } catch (error) { + ElMessage.error(error); + } } -// $t在script中的使用 +// 点击aifece +function setImgUrl(url) { + imgUrl.value = url; +} -const { - appContext: { - config: { globalProperties }, - }, -} = getCurrentInstance(); +// 录制MP3上传语音 +const parameter = { + sampleBits: 16, // 采样位数,支持 8 或 16,默认是16 + sampleRate: 8000, // 采样率,支持 11025、16000、22050、24000、44100、48000,根据浏览器默认值,我的chrome是48000 + numChannels: 1, // 声道,支持 1 或 2, 默认是1 +}; +const recorder = new Recorder(parameter); +const isRecording = ref(true); +const audioUrl = ref(null); +const audioData = ref(""); + +const startRecording = async () => { + try { + await recorder.start(); + console.log("Recording started"); + isRecording.value = false; + } catch (error) { + console.error(error); + } +}; + +const stopRecording = async () => { + try { + const recording = await recorder.stop(); + audioUrl.value = URL.createObjectURL(recorder.getWAVBlob()); + audioData.value = recorder.getWAVBlob(); + isRecording.value = true; + } catch (error) { + console.error(error); + } +}; -const string = "createVideo.typeScript"; -const t = globalProperties.$t(string); +const playRecording = () => { + if (audioUrl.value) { + const audio = new Audio(audioUrl.value); + audio.play(); + } +}; +async function uploadAudio(params) { + let formData = new FormData(); + const timestamp = Date.now(); + formData.append("file", audioData.value, timestamp + ".mp3"); + try { + const res = await awsMp3Upload(formData); + ElMessage.success("上传成功!"); + } catch (error) { + ElMessage.error(error); + } +} + +// 上传视频功能 +const fileInput = ref(null); +const videoSrc = ref(null); +const handleFileChange = () => { + const file = fileInput.value.files[0]; + if (file) { + const videoUrl = URL.createObjectURL(file); + videoSrc.value = videoUrl; + } +}; // card3的 -let language = reactive(""); +let language = ref(""); let languageOptions = reactive([ { @@ -179,6 +385,16 @@ let languageOptions = reactive([ label: "Option2", }, ]); + +// $t在script中的使用 +const { + appContext: { + config: { globalProperties }, + }, +} = getCurrentInstance(); + +const string = "createVideo.typeScript"; +const t = globalProperties.$t(string);