Repository: moeru-ai/airi
File: packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/VRM.vue (Vue)

Code before:
const { t } = useI18n()

const modelFileDialog = useFileDialog({
  accept: '.vrm',
})

const vrm = useVRM()
const {
  modelFile,
  loadSource,
  loadingModel,
  modelUrl,
  modelSize,
  modelOffset,
  cameraFOV,
  selectedModel,
  modelRotationY,
  cameraDistance,
  trackingMode,
} = storeToRefs(vrm)
const localModelUrl = ref(modelUrl.value)
const trackingOptions = [
  { value: 'camera', label: 'Camera', class: 'col-start-3' },
  { value: 'mouse', label: 'Mouse', class: 'col-start-4' },
  { value: 'none', label: 'Disabled', class: 'col-start-5' },
]

modelFileDialog.onChange((files) => {
  if (files && files.length > 0) {
    modelFile.value = files[0]
    loadSource.value = 'file'
    loadingModel.value = true
    localModelUrl.value = ''
  }
})

function urlUploadClick() {
  modelUrl.value = localModelUrl.value
  // same URL will let the loader be lazy and forgot to reset loading state
  // If the loading state is still true, then the URL input will be locked
  if (modelUrl.value === selectedModel.value) {
    console.warn('Model URL is the same as the selected model, no need to reload.')
    return
  }
  // Can't let the default model URL be reentered into the loader, otherwise it will still be too lazy to reset the loading state
  if (!modelUrl.value && selectedModel.value === vrm.defaultModelUrl) {
    localModelUrl.value = vrm.defaultModelUrl
    return
  }
  // Only when real different URL is entered, then the loader will be triggered
  loadSource.value = 'url'

Review comment (suggestion):
```suggestion
const trackingOptions = computed(() => [
  { value: 'camera', label: t('settings.vrm.scale-and-position.eye-tracking-mode.options.option.camera'), class: 'col-start-3' },
  { value: 'mouse', label: t('settings.vrm.scale-and-position.eye-tracking-mode.options.option.mouse'), class: 'col-start-4' },
  { value: 'none', label: t('settings.vrm.scale-and-position.eye-tracking-mode.options.option.disabled'), class: 'col-start-5' },
])
```

Code after:
const { t } = useI18n()

const modelFileDialog = useFileDialog({
  accept: '.vrm',
})

const vrm = useVRM()
const {
  modelFile,
  loadSource,
  loadingModel,
  modelUrl,
  modelSize,
  modelOffset,
  cameraFOV,
  selectedModel,
  modelRotationY,
  cameraDistance,
  trackingMode,
} = storeToRefs(vrm)
const localModelUrl = ref(modelUrl.value)
const trackingOptions = computed(() => [
  { value: 'camera', label: t('settings.vrm.scale-and-position.eye-tracking-mode.options.option.camera'), class: 'col-start-3' },
  { value: 'mouse', label: t('settings.vrm.scale-and-position.eye-tracking-mode.options.option.mouse'), class: 'col-start-4' },
  { value: 'none', label: t('settings.vrm.scale-and-position.eye-tracking-mode.options.option.disabled'), class: 'col-start-5' },
])

modelFileDialog.onChange((files) => {
  if (files && files.length > 0) {
    modelFile.value = files[0]
    loadSource.value = 'file'
    loadingModel.value = true
    localModelUrl.value = ''
  }
})

function urlUploadClick() {
  modelUrl.value = localModelUrl.value
  // same URL will let the loader be lazy and forgot to reset loading state
  // If the loading state is still true, then the URL input will be locked
  if (modelUrl.value === selectedModel.value) {
    console.warn('Model URL is the same as the selected model, no need to reload.')
    return
  }
  // Can't let the default model URL be reentered into the loader, otherwise it will still be too lazy to reset the loading state
  if (!modelUrl.value && selectedModel.value === vrm.defaultModelUrl) {
    localModelUrl.value = vrm.defaultModelUrl
    return
  }
  // Only when real different URL is entered, then the loader will be triggered
  loadSource.value = 'url'