UI优化 by NangInShell · Pull Request #66 · NangInShell/VSET

NangInShell · 2025-10-11T02:14:40Z

No description provided.

Tohrusky · 2025-12-10T13:42:19Z

Copilot

Pull request overview

This pull request implements UI optimizations for VSET version 4.4.1, focusing on improved system information display, enhanced UI components, and better model management capabilities.

Key Changes:

Added system memory information and dynamic extra SR model loading functionality
Implemented custom window frame with frameless design and custom window controls
Reorganized UI components with card-based layouts and improved styling across all pages

Reviewed changes

Copilot reviewed 24 out of 26 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/shared/constant/ipc.ts	Added IPC channels for memory info and extra SR model list retrieval
src/renderer/src/store/SystemInfoStore.ts	New store for centralized system information management with caching
src/renderer/src/utils/getVpy.ts	Added QTGMC filter support and improved extra SR model file handling
src/renderer/src/utils/getFFmpeg.ts	Changed bitrate suffix from uppercase to lowercase
src/renderer/src/utils/checkSetting.ts	Replaced strict equality with loose equality operators
src/renderer/src/components/*.vue	Enhanced UI with card layouts, improved spacing, and visual refinements
src/renderer/src/App.vue	Implemented frameless window with custom title bar and window controls
src/main/index.ts	Added window control handlers and increased default window size
src/main/getSystemInfo.ts	Implemented memory info and extra SR model list retrieval
src/main/getCorePath.ts	Changed vpy file storage location to dedicated vpyFile directory
src/main/runCommand.ts	Refactored video info retrieval into separate functions for better maintainability
src/preload/index.ts	Exposed window control methods to renderer process
package.json	Version bump to 4.4.1

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-10T13:44:44Z

src/renderer/src/utils/checkSetting.ts

+  if (useVfi.value == true) {
    // ensemble参数判断
-    if (RifeEnsembleValue.value === true) {
-      if (RifeModelValue.value === 'v4_21' || RifeModelValue.value === 'v4_22' || RifeModelValue.value === 'v4_22_lite' || RifeModelValue.value === 'v4_23'
-        || RifeModelValue.value === 'v4_25' || RifeModelValue.value === 'v4_25_lite' || RifeModelValue.value === 'v4_25_heavy' || RifeModelValue.value === 'v4_26'
-        || RifeModelValue.value === 'v4_26_heavy') {
+    if (RifeEnsembleValue.value == true) {
+      if (RifeModelValue.value == 'v4_21' || RifeModelValue.value == 'v4_22' || RifeModelValue.value == 'v4_22_lite' || RifeModelValue.value == 'v4_23'
+        || RifeModelValue.value == 'v4_25' || RifeModelValue.value == 'v4_25_lite' || RifeModelValue.value == 'v4_25_heavy' || RifeModelValue.value == 'v4_26'
+        || RifeModelValue.value == 'v4_26_heavy') {
        return false
      }
-      if (RifeScaleValue.value !== 1.0) {
+      if (RifeScaleValue.value != 1.0) {
        return false
      }
    }
    // 光流参数判断
-    if (RifeScaleValue.value !== 1) {
-      if (RifeModelValue.value !== 'v4_0' && RifeModelValue.value !== 'v4_2' && RifeModelValue.value !== 'v4_3'
-        && RifeModelValue.value !== 'v4_4' && RifeModelValue.value !== 'v4_5' && RifeModelValue.value !== 'v4_6') {
+    if (RifeScaleValue.value != 1.0) {
+      if (RifeModelValue.value != 'v4_0' && RifeModelValue.value != 'v4_2' && RifeModelValue.value != 'v4_3'
+        && RifeModelValue.value != 'v4_4' && RifeModelValue.value != 'v4_5' && RifeModelValue.value != 'v4_6') {


Inconsistent use of == instead of === for equality comparisons. In JavaScript/TypeScript, it's a best practice to use strict equality (===) instead of loose equality (==) to avoid type coercion issues.

Copilot · 2025-12-10T13:44:45Z

src/renderer/src/store/SystemInfoStore.ts

+
+  async function fetchExtraSRModelList() {
+    // 每次都重新加载，以支持添加新模型文件
+    extraSrModelList.value = await window.electron.ipcRenderer.invoke(IpcChannelInvoke.GET_EXTRA_SR_MODEL_LIST)


Missing error handling for IPC calls. The fetchExtraSRModelList function doesn't handle errors from the IPC call, which could cause the application to fail silently if the main process encounters an error reading the model directory.

Suggested change

extraSrModelList.value = await window.electron.ipcRenderer.invoke(IpcChannelInvoke.GET_EXTRA_SR_MODEL_LIST)

try {

extraSrModelList.value = await window.electron.ipcRenderer.invoke(IpcChannelInvoke.GET_EXTRA_SR_MODEL_LIST)

} catch (error) {

console.error('Failed to fetch extra SR model list:', error)

extraSrModelList.value = []

}

Copilot · 2025-12-10T13:44:45Z

src/renderer/src/App.vue

+
+/* 左侧边栏 */
+.left-sider {
+  ackground: #ffffff; /* 白色背景 */


Typo in CSS property: ackground should be background. This will prevent the background color from being applied correctly.

Suggested change

ackground: #ffffff; /* 白色背景 */

background: #ffffff; /* 白色背景 */

Copilot · 2025-12-10T13:44:46Z

src/renderer/src/App.vue

+    onMounted(() => {
+      systemInfoStore.initSystemInfo()
+      // 清空并重新加载模型列表，确保每次启动都获取最新模型
+      systemInfoStore.extraSrModelList = []


Potential race condition when directly setting extraSrModelList to an empty array. This bypasses the reactive store mechanism and could cause issues if other components are watching this value. Consider using a store action or setter method instead.

Suggested change

systemInfoStore.extraSrModelList = []

systemInfoStore.clearExtraSrModelList()

Copilot · 2025-12-10T13:44:46Z

src/renderer/src/utils/getFFmpeg.ts

    }
    else {
-      cmd_minor += `"-b:v" "${bitValue.value}M" `
+      cmd_minor += `"-b:v" "${bitValue.value}m" `


Case sensitivity issue: The bitrate suffix has been changed from "M" (uppercase) to "m" (lowercase). This could cause compatibility issues with ffmpeg if it expects a specific case, as some command-line tools are case-sensitive with their options.

Suggested change

cmd_minor += `"-b:v" "${bitValue.value}m" `

cmd_minor += `"-b:v" "${bitValue.value}M" `

gemini-code-assist

Code Review

本次 PR 进行了大量的 UI 优化和代码重构，整体质量很高。主要亮点包括：

实现了自定义窗口标题栏，提升了应用的视觉一致性。
对多个设置页面进行了重构，使用卡片式布局，使界面更加清晰、有条理。
引入了 SystemInfoStore 来统一管理系统信息，优化了状态管理架构。
后端 runCommand 函数被重构为更小、更易于维护的模块。
实现了动态加载额外超分模型的功能，增强了应用的扩展性。

我发现了一些可以改进的小问题，主要涉及代码整洁性和最佳实践，具体请看我的评论。修复这些问题后，代码会更加完美。

gemini-code-assist · 2025-12-10T13:46:18Z

src/renderer/src/App.vue

+
+/* 左侧边栏 */
+.left-sider {
+  ackground: #ffffff; /* 白色背景 */


这里有一个拼写错误。ackground 应该是 background。这个错误会导致侧边栏的背景样式失效。

background: #ffffff; /* 白色背景 */

gemini-code-assist · 2025-12-10T13:46:18Z

src/main/runCommand.ts

+    let vspipeOut = '' // 用于保存 stdout 内容
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    let stderrOut = '' // 用于保存 stderr 内容
+
+    vspipeInfoProcess.stdout.on('data', (data: Buffer) => {
+      const str = iconv.decode(data, 'gbk')
+      vspipeOut += str
+      event.sender.send(IpcChannelOn.FFMPEG_OUTPUT, `${str}`)
+    })
+
+    vspipeInfoProcess.stderr.on('data', (data: Buffer) => {
+      const str = iconv.decode(data, 'gbk')
+      stderrOut += str
+      event.sender.send(IpcChannelOn.FFMPEG_OUTPUT, `${str}`)
+    })


变量 stderrOut 已声明但其值从未使用。为了代码整洁，建议移除此变量及其相关的所有赋值操作。

let vspipeOut = '' // 用于保存 stdout 内容 vspipeInfoProcess.stdout.on('data', (data: Buffer) => { const str = iconv.decode(data, 'gbk') vspipeOut += str event.sender.send(IpcChannelOn.FFMPEG_OUTPUT, `${str}`) }) vspipeInfoProcess.stderr.on('data', (data: Buffer) => { const str = iconv.decode(data, 'gbk') event.sender.send(IpcChannelOn.FFMPEG_OUTPUT, `${str}`) })

gemini-code-assist · 2025-12-10T13:46:18Z

src/renderer/src/utils/checkSetting.ts

+  if (useVfi.value == true) {
    // ensemble参数判断
-    if (RifeEnsembleValue.value === true) {
-      if (RifeModelValue.value === 'v4_21' || RifeModelValue.value === 'v4_22' || RifeModelValue.value === 'v4_22_lite' || RifeModelValue.value === 'v4_23'
-        || RifeModelValue.value === 'v4_25' || RifeModelValue.value === 'v4_25_lite' || RifeModelValue.value === 'v4_25_heavy' || RifeModelValue.value === 'v4_26'
-        || RifeModelValue.value === 'v4_26_heavy') {
+    if (RifeEnsembleValue.value == true) {
+      if (RifeModelValue.value == 'v4_21' || RifeModelValue.value == 'v4_22' || RifeModelValue.value == 'v4_22_lite' || RifeModelValue.value == 'v4_23'
+        || RifeModelValue.value == 'v4_25' || RifeModelValue.value == 'v4_25_lite' || RifeModelValue.value == 'v4_25_heavy' || RifeModelValue.value == 'v4_26'
+        || RifeModelValue.value == 'v4_26_heavy') {
        return false
      }
-      if (RifeScaleValue.value !== 1.0) {
+      if (RifeScaleValue.value != 1.0) {
        return false
      }
    }
    // 光流参数判断
-    if (RifeScaleValue.value !== 1) {
-      if (RifeModelValue.value !== 'v4_0' && RifeModelValue.value !== 'v4_2' && RifeModelValue.value !== 'v4_3'
-        && RifeModelValue.value !== 'v4_4' && RifeModelValue.value !== 'v4_5' && RifeModelValue.value !== 'v4_6') {
+    if (RifeScaleValue.value != 1.0) {
+      if (RifeModelValue.value != 'v4_0' && RifeModelValue.value != 'v4_2' && RifeModelValue.value != 'v4_3'
+        && RifeModelValue.value != 'v4_4' && RifeModelValue.value != 'v4_5' && RifeModelValue.value != 'v4_6') {
        return false
      }
    }


建议使用严格相等运算符 === 和 !== 来代替 == 和 !=。这可以避免因类型转换带来的潜在问题，并提高代码的健壮性和可读性。

Suggested change

if (useVfi.value == true) {

// ensemble参数判断

if (RifeEnsembleValue.value === true) {

if (RifeModelValue.value === 'v4_21' || RifeModelValue.value === 'v4_22' || RifeModelValue.value === 'v4_22_lite' || RifeModelValue.value === 'v4_23'

|| RifeModelValue.value === 'v4_25' || RifeModelValue.value === 'v4_25_lite' || RifeModelValue.value === 'v4_25_heavy' || RifeModelValue.value === 'v4_26'

|| RifeModelValue.value === 'v4_26_heavy') {

if (RifeEnsembleValue.value == true) {

if (RifeModelValue.value == 'v4_21' || RifeModelValue.value == 'v4_22' || RifeModelValue.value == 'v4_22_lite' || RifeModelValue.value == 'v4_23'

|| RifeModelValue.value == 'v4_25' || RifeModelValue.value == 'v4_25_lite' || RifeModelValue.value == 'v4_25_heavy' || RifeModelValue.value == 'v4_26'

|| RifeModelValue.value == 'v4_26_heavy') {

return false

}

if (RifeScaleValue.value !== 1.0) {

if (RifeScaleValue.value != 1.0) {

return false

}

}

// 光流参数判断

if (RifeScaleValue.value !== 1) {

if (RifeModelValue.value !== 'v4_0' && RifeModelValue.value !== 'v4_2' && RifeModelValue.value !== 'v4_3'

&& RifeModelValue.value !== 'v4_4' && RifeModelValue.value !== 'v4_5' && RifeModelValue.value !== 'v4_6') {

if (RifeScaleValue.value != 1.0) {

if (RifeModelValue.value != 'v4_0' && RifeModelValue.value != 'v4_2' && RifeModelValue.value != 'v4_3'

&& RifeModelValue.value != 'v4_4' && RifeModelValue.value != 'v4_5' && RifeModelValue.value != 'v4_6') {

return false

}

}

if (useVfi.value === true) {

// ensemble参数判断

if (RifeEnsembleValue.value === true) {

if (RifeModelValue.value === 'v4_21' || RifeModelValue.value === 'v4_22' || RifeModelValue.value === 'v4_22_lite' || RifeModelValue.value === 'v4_23'

|| RifeModelValue.value === 'v4_25' || RifeModelValue.value === 'v4_25_lite' || RifeModelValue.value === 'v4_25_heavy' || RifeModelValue.value === 'v4_26'

|| RifeModelValue.value === 'v4_26_heavy') {

return false

}

if (RifeScaleValue.value !== 1.0) {

return false

}

}

// 光流参数判断

if (RifeScaleValue.value !== 1.0) {

if (RifeModelValue.value !== 'v4_0' && RifeModelValue.value !== 'v4_2' && RifeModelValue.value !== 'v4_3'

&& RifeModelValue.value !== 'v4_4' && RifeModelValue.value !== 'v4_5' && RifeModelValue.value !== 'v4_6') {

return false

}

}

gemini-code-assist · 2025-12-10T13:46:18Z

src/renderer/src/utils/getVpy.ts

+      // 自动添加 .onnx 扩展名
+      const modelFileName = SR_ExtraModelValue.value.endsWith('.onnx') 
+        ? SR_ExtraModelValue.value 
+        : `${SR_ExtraModelValue.value}.onnx`
+      const model = `${MagicStr.EXTRA_MODEL_PATH}/${modelFileName}`


这里的 SR_ExtraModelValue.value.endsWith('.onnx') 判断是多余的。根据 getExtraSRModelList 函数的实现，从 store 中获取的模型名称 SR_ExtraModelValue 已经移除了 .onnx 后缀。因此，可以直接拼接后缀，简化代码。

// 自动添加 .onnx 扩展名 const modelFileName = `${SR_ExtraModelValue.value}.onnx` const model = `${MagicStr.EXTRA_MODEL_PATH}/${modelFileName}`

NangInShell added 3 commits October 11, 2025 10:12

UI优化

373662e

样式修改；新增自定义导入模型；新增QTGMC滤镜

c022525

修改vpy文件位置；修复rife补帧参数错误

4d32441

NangInShell marked this pull request as ready for review December 10, 2025 13:40

Tohrusky requested a review from Copilot December 10, 2025 13:41

Copilot started reviewing on behalf of Tohrusky December 10, 2025 13:41 View session

NangInShell closed this Dec 10, 2025

Copilot AI reviewed Dec 10, 2025

View reviewed changes

gemini-code-assist bot reviewed Dec 10, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

UI优化#66

UI优化#66
NangInShell wants to merge 3 commits intomainfrom
main

NangInShell commented Oct 11, 2025

Uh oh!

Tohrusky commented Dec 10, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Dec 10, 2025

Uh oh!

Copilot AI Dec 10, 2025

Uh oh!

Copilot AI Dec 10, 2025

Uh oh!

Copilot AI Dec 10, 2025

Uh oh!

Copilot AI Dec 10, 2025

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Dec 10, 2025

Uh oh!

gemini-code-assist bot Dec 10, 2025

Uh oh!

gemini-code-assist bot Dec 10, 2025

Uh oh!

gemini-code-assist bot Dec 10, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-    extraSrModelList.value = await window.electron.ipcRenderer.invoke(IpcChannelInvoke.GET_EXTRA_SR_MODEL_LIST)
+    try {
+      extraSrModelList.value = await window.electron.ipcRenderer.invoke(IpcChannelInvoke.GET_EXTRA_SR_MODEL_LIST)
+    } catch (error) {
+      console.error('Failed to fetch extra SR model list:', error)
+      extraSrModelList.value = []
+    }

	ackground: #ffffff; /* 白色背景 */
	background: #ffffff; /* 白色背景 */

	systemInfoStore.extraSrModelList = []
	systemInfoStore.clearExtraSrModelList()

	cmd_minor += `"-b:v" "${bitValue.value}m" `
	cmd_minor += `"-b:v" "${bitValue.value}M" `

Comments

Conversation

NangInShell commented Oct 11, 2025

Uh oh!

Tohrusky commented Dec 10, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants