feat: custom model (Final2x-core v4.0.0)

[Tohrusky]

No description provided.

[gemini-code-assist]

Summary of Changes

Hello @Tohrusky, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request focuses on enhancing the user experience for selecting and managing custom Super-Resolution models within the Final2x application by upgrading the UI components. Additionally, it includes routine updates to various project dependencies, ensuring the codebase remains current and stable.

Highlights

• Enhanced Model Selection UI: The Super-Resolution (SR) model selection dropdown in the Final2x settings has been significantly improved with the addition of filterable, tag, and clearable functionalities. This makes it easier for users to find, manage, and potentially add custom SR models.
• Dependency Updates: Several project dependencies, including naive-ui, sass, systeminformation, vue, vue-i18n, @antfu/eslint-config, electron-vite, eslint, typescript, vite, and vue-tsc, have been updated to their latest minor or patch versions. This ensures the project benefits from the latest features, bug fixes, and security improvements.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces the ability for users to specify custom models by adding the tag prop to the model selection component, and also updates several dependencies. The change to allow custom models is a good feature, but it introduces a potential security vulnerability. My review includes a comment with high severity to address a path traversal risk, with a detailed explanation and code examples on how to fix it. The dependency updates in package.json look fine.

[gemini-code-assist]

Adding the tag prop is a great way to allow custom models. However, it introduces a potential security vulnerability. Since users can input any string, a malicious user could provide a path traversal payload (e.g., ../../some/other/file). If the backend Final2x-core uses this input to construct a file path without proper sanitization, it could lead to reading or executing arbitrary files on the user's system.

To mitigate this, you should validate the input to ensure it doesn't contain path characters like /, \, or ...

I recommend replacing v-model:value with a combination of :value and @update:value to intercept and validate the input before updating the store.

You can modify the <n-select> component like this:

<n-select
  :value="selectedSRModel"
  @update:value="handleModelUpdate"
  :options="modelOptions"
  filterable
  tag
  clearable
  style="width: 465px"
/>

And then, add the following to your <script setup> section. You'll need to import useNotification from naive-ui and get the notification instance.

import { useNotification } from 'naive-ui'
// ...
const notification = useNotification()

function handleModelUpdate(value: string | null): void {
  // Allow clearing the value
  if (value === null) {
    selectedSRModel.value = value
    return
  }

  const isExistingOption = modelOptions.some(option => option.value === value)
  
  // If it's a new custom model (not in the predefined options), validate it
  if (!isExistingOption && (value.includes('/') || value.includes('\\') || value.includes('..'))) {
    notification.error({
      // Consider adding a dedicated translation key for this message
      content: 'Invalid custom model name. It cannot contain path characters.',
      duration: 3000
    })
    // By not updating `selectedSRModel.value`, the select input will revert to the previous valid value.
  } else {
    selectedSRModel.value = value
  }
}

App.vue already wraps the app in NNotificationProvider, so useNotification is ready to be used.