sion/sionrui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 功能优化

Browse Source
This commit is contained in:
sion123
2025-12-28 15:15:27 +08:00
parent bbf8093ca3
commit 5ed0cfff07
4 changed files with 115 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
CLAUDE.md
View File

@@ -35,6 +35,7 @@ Keep this managed block so 'openspec update' can refresh the instructions.
- TypeScript类型定义规范 - TypeScript类型定义规范
- 组件保持小巧专注，逻辑清晰 - 组件保持小巧专注，逻辑清晰
- 样式优先使用less 示例:`<style scoped lang="less"><style>` - 样式优先使用less 示例:`<style scoped lang="less"><style>`
- 代码简洁，只包含核心的功能
### Java开发规范 ### Java开发规范
- 分层架构：Controller → Service → Mapper → VO/DO - 分层架构：Controller → Service → Mapper → VO/DO
@@ -42,6 +43,7 @@ Keep this managed block so 'openspec update' can refresh the instructions.
- DO继承 `BaseDO` 或 `TenantBaseDO` - DO继承 `BaseDO` 或 `TenantBaseDO`
- API响应统一使用 `CommonResult<T>` - API响应统一使用 `CommonResult<T>`
- 权限注解：`@PreAuthorize("hasPermission(...)")` - 权限注解：`@PreAuthorize("hasPermission(...)")`
- 代码简洁，只包含核心的功能
## 项目结构 ## 项目结构
``` ```

40
frontend/app/web-gold/src/views/content-style/components/BenchmarkForm.vue
View File

@@ -39,6 +39,7 @@ function handleReset() {
</a-form-item> </a-form-item>
<a-form-item label="主页/视频链接"> <a-form-item label="主页/视频链接">
<a-input <a-input
class="search-input"
v-model:value="form.url" v-model:value="form.url"
placeholder="粘贴抖音主页或视频链接，或点击下方示例试一试" placeholder="粘贴抖音主页或视频链接，或点击下方示例试一试"
allow-clear allow-clear
@@ -86,19 +87,6 @@ function handleReset() {
color: var(--color-text-secondary); color: var(--color-text-secondary);
} }
:deep(.ant-input), :deep(.ant-input-affix-wrapper), :deep(textarea) {
background: var(--color-surface);
border-color: var(--color-border);
}
:deep(.ant-input:hover), :deep(.ant-input-affix-wrapper:hover), :deep(textarea:hover) {
border-color: color-mix(in oklab, var(--color-primary) 60%, var(--color-border));
}
:deep(.ant-input:focus), :deep(.ant-input-affix-wrapper-focused), :deep(textarea:focus) {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 25%, transparent);
}
:deep(.ant-slider) { :deep(.ant-slider) {
padding: 10px 0; padding: 10px 0;
@@ -127,5 +115,31 @@ function handleReset() {
:deep(.ant-slider-handle:active::after) { :deep(.ant-slider-handle:active::after) {
box-shadow: 0 0 0 3px var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary);
} }
.search-input {
flex: 1;
padding: 8px 12px;
font-size: 14px;
color: var(--color-text);
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 6px;
transition: all 0.2s;
}
.search-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(0, 176, 48, 0.1);
}
.search-input:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.search-input::placeholder {
color: var(--color-text-secondary);
opacity: 0.6;
}
</style> </style>

3
frontend/app/web-gold/src/views/kling/hooks/useDigitalHumanGeneration.ts
View File

@@ -79,11 +79,8 @@ export function useDigitalHumanGeneration(): UseDigitalHumanGeneration {
videoState.value.videoFile = null videoState.value.videoFile = null
videoState.value.videoSource = 'select' videoState.value.videoSource = 'select'
videoState.value.selectorVisible = false videoState.value.selectorVisible = false
resetIdentifyState() resetIdentifyState()
identifyState.value.videoFileId = video.id identifyState.value.videoFileId = video.id
performFaceRecognition()
} }
/** /**

175
frontend/app/web-gold/src/views/kling/hooks/useIdentifyFaceController.ts
View File

@@ -22,13 +22,32 @@ import { useDigitalHumanGeneration } from './useDigitalHumanGeneration'
* 内部直接创建和管理两个子 Hook * 内部直接创建和管理两个子 Hook
*/ */
export function useIdentifyFaceController(): UseIdentifyFaceController { export function useIdentifyFaceController(): UseIdentifyFaceController {
// ==================== 创建子 Hooks ==================== // ==================== 创建子 Hooks 并解构 ====================
// 1. 创建语音生成 Hook（独立管理状态） // 1. 语音生成 Hook - 解构响应式变量
const voiceGeneration = useVoiceGeneration() const {
ttsText,
speechRate,
selectedVoiceMeta,
audioState,
canGenerateAudio,
suggestedMaxChars,
generateAudio,
resetAudioState,
} = useVoiceGeneration()
// 2. 创建数字人生成 Hook（独立管理状态） // 2. 数字人生成 Hook - 解构响应式变量
const digitalHuman = useDigitalHumanGeneration() const {
videoState,
identifyState,
faceDuration,
performFaceRecognition,
handleFileUpload,
handleVideoSelect: _handleVideoSelect,
getVideoPreviewUrl,
resetVideoState,
resetIdentifyState,
} = useDigitalHumanGeneration()
// 3. Controller 统一管理跨 Hook 的状态 // 3. Controller 统一管理跨 Hook 的状态
const materialValidation = ref<MaterialValidation>({ const materialValidation = ref<MaterialValidation>({
@@ -40,15 +59,15 @@ export function useIdentifyFaceController(): UseIdentifyFaceController {
// 4. 监听音频状态变化，自动触发素材校验 // 4. 监听音频状态变化，自动触发素材校验
watch( watch(
() => voiceGeneration.audioState.value.generated && voiceGeneration.audioState.value.durationMs > 0, () => audioState.value.generated && audioState.value.durationMs > 0,
(newVal, oldVal) => { (newVal, oldVal) => {
if (newVal && !oldVal) { if (newVal && !oldVal) {
// 音频生成完成，获取视频时长并校验 // 音频生成完成，获取视频时长并校验
const videoDuration = digitalHuman.faceDuration.value || 0 const videoDurationMs = faceDuration.value || 0
const audioDuration = voiceGeneration.audioState.value.durationMs const audioDurationMs = audioState.value.durationMs
if (videoDuration > 0) { if (videoDurationMs > 0) {
validateMaterialDuration(videoDuration, audioDuration) validateMaterialDuration(videoDurationMs, audioDurationMs)
} }
} }
}, },
@@ -57,19 +76,19 @@ export function useIdentifyFaceController(): UseIdentifyFaceController {
// 5. 监听人脸识别状态变化，更新素材校验的视频时长 // 5. 监听人脸识别状态变化，更新素材校验的视频时长
watch( watch(
() => digitalHuman.identifyState.value.identified, () => identifyState.value.identified,
(newVal, oldVal) => { (newVal, oldVal) => {
if (newVal && !oldVal) { if (newVal && !oldVal) {
// 人脸识别成功，获取视频时长 // 人脸识别成功，获取视频时长
const videoDuration = digitalHuman.faceDuration.value const videoDurationMs = faceDuration.value
// 如果已有音频，则重新校验 // 如果已有音频，则重新校验
if (voiceGeneration.audioState.value.generated && voiceGeneration.audioState.value.durationMs > 0) { if (audioState.value.generated && audioState.value.durationMs > 0) {
const audioDuration = voiceGeneration.audioState.value.durationMs const audioDurationMs = audioState.value.durationMs
validateMaterialDuration(videoDuration, audioDuration) validateMaterialDuration(videoDurationMs, audioDurationMs)
} else { } else {
// 否则只更新视频时长 // 否则只更新视频时长
materialValidation.value.videoDuration = videoDuration materialValidation.value.videoDuration = videoDurationMs
} }
} }
}, },
@@ -81,11 +100,15 @@ export function useIdentifyFaceController(): UseIdentifyFaceController {
* 是否可以生成数字人视频（综合检查） * 是否可以生成数字人视频（综合检查）
*/ */
const canGenerate = computed(() => { const canGenerate = computed(() => {
const hasText = voiceGeneration.ttsText.value.trim() const hasText = ttsText.value.trim()
const hasVoice = voiceGeneration.selectedVoiceMeta.value const hasVoice = selectedVoiceMeta.value
const hasVideo = digitalHuman.videoState.value.uploadedVideo || digitalHuman.videoState.value.selectedVideo const hasVideo = videoState.value.uploadedVideo || videoState.value.selectedVideo
const audioValidated = voiceGeneration.audioState.value.validationPassed
const materialValidated = materialValidation.value.isValid // 音频校验：只有生成过音频后才需要校验通过
const audioValidated = !audioState.value.generated || audioState.value.validationPassed
// 素材校验：只有进行过校验后才需要校验通过
const materialValidated = materialValidation.value.videoDuration === 0 || materialValidation.value.isValid
return !!(hasText && hasVoice && hasVideo && audioValidated && materialValidated) return !!(hasText && hasVoice && hasVideo && audioValidated && materialValidated)
}) })
@@ -93,18 +116,18 @@ export function useIdentifyFaceController(): UseIdentifyFaceController {
* 最大的文本长度 * 最大的文本长度
*/ */
const maxTextLength = computed(() => { const maxTextLength = computed(() => {
if (!digitalHuman.identifyState.value.identified || digitalHuman.faceDuration.value <= 0) { if (!identifyState.value.identified || faceDuration.value <= 0) {
return 4000 return 4000
} }
return Math.min(4000, Math.floor(voiceGeneration.suggestedMaxChars.value * 1.2)) return Math.min(4000, Math.floor(suggestedMaxChars.value * 1.2))
}) })
/** /**
* 文本框占位符 * 文本框占位符
*/ */
const textareaPlaceholder = computed(() => { const textareaPlaceholder = computed(() => {
if (digitalHuman.identifyState.value.identified && digitalHuman.faceDuration.value > 0) { if (identifyState.value.identified && faceDuration.value > 0) {
return `请输入文案，建议不超过${voiceGeneration.suggestedMaxChars.value}字以确保与视频匹配` return `请输入文案，建议不超过${suggestedMaxChars.value}字以确保与视频匹配`
} }
return '请输入你想让角色说话的内容' return '请输入你想让角色说话的内容'
}) })
@@ -117,7 +140,7 @@ export function useIdentifyFaceController(): UseIdentifyFaceController {
/** /**
* 语速显示 * 语速显示
*/ */
const speechRateDisplay = computed(() => `${voiceGeneration.speechRate.value.toFixed(1)}x`) const speechRateDisplay = computed(() => `${speechRate.value.toFixed(1)}x`)
// ==================== 业务流程方法 ==================== // ==================== 业务流程方法 ====================
@@ -130,13 +153,13 @@ export function useIdentifyFaceController(): UseIdentifyFaceController {
return return
} }
const text = voiceGeneration.ttsText.value.trim() const text = ttsText.value.trim()
if (!text) { if (!text) {
message.warning('请输入文案内容') message.warning('请输入文案内容')
return return
} }
const voice = voiceGeneration.selectedVoiceMeta.value const voice = selectedVoiceMeta.value
if (!voice) { if (!voice) {
message.warning('请选择音色') message.warning('请选择音色')
return return
@@ -144,9 +167,9 @@ export function useIdentifyFaceController(): UseIdentifyFaceController {
try { try {
// 如果未识别，先进行人脸识别 // 如果未识别，先进行人脸识别
if (!digitalHuman.identifyState.value.identified) { if (!identifyState.value.identified) {
const hasUploadFile = digitalHuman.videoState.value.videoFile const hasUploadFile = videoState.value.videoFile
const hasSelectedVideo = digitalHuman.videoState.value.selectedVideo const hasSelectedVideo = videoState.value.selectedVideo
if (!hasUploadFile && !hasSelectedVideo) { if (!hasUploadFile && !hasSelectedVideo) {
message.warning('请先选择或上传视频') message.warning('请先选择或上传视频')
@@ -154,27 +177,27 @@ export function useIdentifyFaceController(): UseIdentifyFaceController {
} }
try { try {
await digitalHuman.performFaceRecognition() await performFaceRecognition()
message.success('人脸识别完成') message.success('人脸识别完成')
} catch (error) { } catch (error) {
return return
} }
} }
const videoFileId = digitalHuman.identifyState.value.videoFileId const videoFileId = identifyState.value.videoFileId
const taskData: LipSyncTaskData = { const taskData: LipSyncTaskData = {
taskName: `数字人任务_${Date.now()}`, taskName: `数字人任务_${Date.now()}`,
videoFileId: videoFileId!, videoFileId: videoFileId!,
inputText: voiceGeneration.ttsText.value, inputText: ttsText.value,
speechRate: voiceGeneration.speechRate.value, speechRate: speechRate.value,
volume: 0, volume: 0,
guidanceScale: 1, guidanceScale: 1,
seed: 8888, seed: 8888,
kling_session_id: digitalHuman.identifyState.value.sessionId, kling_session_id: identifyState.value.sessionId,
kling_face_id: digitalHuman.identifyState.value.faceId, kling_face_id: identifyState.value.faceId,
kling_face_start_time: digitalHuman.identifyState.value.faceStartTime, kling_face_start_time: identifyState.value.faceStartTime,
kling_face_end_time: digitalHuman.identifyState.value.faceEndTime, kling_face_end_time: identifyState.value.faceEndTime,
ai_provider: 'kling', ai_provider: 'kling',
voiceConfigId: voice.rawId || extractIdFromString(voice.id), voiceConfigId: voice.rawId || extractIdFromString(voice.id),
} }
@@ -185,13 +208,13 @@ export function useIdentifyFaceController(): UseIdentifyFaceController {
} }
// 如果有预生成的音频，添加到任务数据中 // 如果有预生成的音频，添加到任务数据中
if (voiceGeneration.audioState.value.generated && voiceGeneration.audioState.value.durationMs > 0) { if (audioState.value.generated && audioState.value.durationMs > 0) {
taskData.pre_generated_audio = { taskData.pre_generated_audio = {
audioBase64: voiceGeneration.audioState.value.generated.audioBase64, audioBase64: audioState.value.generated.audioBase64,
format: voiceGeneration.audioState.value.generated.format || 'mp3', format: audioState.value.generated.format || 'mp3',
} }
taskData.sound_end_time = voiceGeneration.audioState.value.durationMs taskData.sound_end_time = audioState.value.durationMs
} }
const res = await createLipSyncTask(taskData) const res = await createLipSyncTask(taskData)
@@ -210,25 +233,25 @@ export function useIdentifyFaceController(): UseIdentifyFaceController {
* 更换视频 * 更换视频
*/ */
const replaceVideo = (): void => { const replaceVideo = (): void => {
if (digitalHuman.videoState.value.videoSource === 'upload') { if (videoState.value.videoSource === 'upload') {
digitalHuman.videoState.value.videoFile = null videoState.value.videoFile = null
digitalHuman.videoState.value.uploadedVideo = '' videoState.value.uploadedVideo = ''
} else { } else {
digitalHuman.videoState.value.selectedVideo = null videoState.value.selectedVideo = null
digitalHuman.videoState.value.videoFile = null videoState.value.videoFile = null
digitalHuman.videoState.value.uploadedVideo = '' videoState.value.uploadedVideo = ''
} }
// 重置所有状态 // 重置所有状态
digitalHuman.resetVideoState() resetVideoState()
voiceGeneration.resetAudioState() resetAudioState()
} }
/** /**
* 处理音色选择 * 处理音色选择
*/ */
const handleVoiceSelect = (voice: any): void => { const handleVoiceSelect = (voice: any): void => {
voiceGeneration.selectedVoiceMeta.value = voice selectedVoiceMeta.value = voice
} }
/** /**
@@ -238,7 +261,7 @@ export function useIdentifyFaceController(): UseIdentifyFaceController {
const input = event.target as HTMLInputElement const input = event.target as HTMLInputElement
const file = input.files?.[0] const file = input.files?.[0]
if (file) { if (file) {
digitalHuman.handleFileUpload(file) handleFileUpload(file)
} }
} }
@@ -249,7 +272,7 @@ export function useIdentifyFaceController(): UseIdentifyFaceController {
event.preventDefault() event.preventDefault()
const file = event.dataTransfer?.files[0] const file = event.dataTransfer?.files[0]
if (file) { if (file) {
digitalHuman.handleFileUpload(file) handleFileUpload(file)
} }
} }
@@ -265,26 +288,26 @@ export function useIdentifyFaceController(): UseIdentifyFaceController {
* 选择上传模式 * 选择上传模式
*/ */
const handleSelectUpload = (): void => { const handleSelectUpload = (): void => {
digitalHuman.videoState.value.videoSource = 'upload' videoState.value.videoSource = 'upload'
digitalHuman.videoState.value.selectedVideo = null videoState.value.selectedVideo = null
digitalHuman.resetIdentifyState() resetIdentifyState()
} }
/** /**
* 从素材库选择 * 从素材库选择
*/ */
const handleSelectFromLibrary = (): void => { const handleSelectFromLibrary = (): void => {
digitalHuman.videoState.value.videoSource = 'select' videoState.value.videoSource = 'select'
digitalHuman.videoState.value.videoFile = null videoState.value.videoFile = null
digitalHuman.videoState.value.uploadedVideo = '' videoState.value.uploadedVideo = ''
digitalHuman.videoState.value.selectorVisible = true videoState.value.selectorVisible = true
} }
/** /**
* 处理视频选择器选择 * 处理视频选择器选择
*/ */
const handleVideoSelect = (video: any): void => { const handleVideoSelect = (video: any): void => {
digitalHuman.handleVideoSelect(video) _handleVideoSelect(video)
} }
/** /**
@@ -302,7 +325,7 @@ export function useIdentifyFaceController(): UseIdentifyFaceController {
* 处理视频加载 * 处理视频加载
*/ */
const handleVideoLoaded = (videoUrl: string): void => { const handleVideoLoaded = (videoUrl: string): void => {
digitalHuman.videoState.value.previewVideoUrl = videoUrl videoState.value.previewVideoUrl = videoUrl
} }
// ==================== UI 辅助方法 ==================== // ==================== UI 辅助方法 ====================
@@ -359,32 +382,6 @@ export function useIdentifyFaceController(): UseIdentifyFaceController {
return materialValidation.value.isValid return materialValidation.value.isValid
} }
// ==================== 解构子 Hooks 的响应式变量 ====================
// 语音生成相关
const {
ttsText,
speechRate,
selectedVoiceMeta,
audioState,
canGenerateAudio,
suggestedMaxChars,
generateAudio,
resetAudioState,
} = voiceGeneration
// 数字人生成相关
const {
videoState,
identifyState,
faceDuration,
performFaceRecognition,
handleFileUpload,
getVideoPreviewUrl,
resetVideoState,
resetIdentifyState,
} = digitalHuman
return { return {
// ==================== 语音生成相关 ==================== // ==================== 语音生成相关 ====================
ttsText, ttsText,