Hugging Face's logo

Spaces:
AZILS
/
new-api
Paused

App Files Community
new-api
File size: 4,149 Bytes 
4674012
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
 
/*
Copyright (C) 2025 QuantumNous

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.

For commercial licensing, please contact support@quantumnous.com
*/

import React, { useEffect, useState } from 'react';
import { Modal, RadioGroup, Radio, Steps, Button } from '@douyinfe/semi-ui';
import { useIsMobile } from '../../../../hooks/common/useIsMobile';

const SyncWizardModal = ({ visible, onClose, onConfirm, loading, t }) => {
  const [step, setStep] = useState(0);
  const [option, setOption] = useState('official');
  const [locale, setLocale] = useState('zh');
  const isMobile = useIsMobile();

  useEffect(() => {
    if (visible) {
      setStep(0);
      setOption('official');
      setLocale('zh');
    }
  }, [visible]);

  return (
    <Modal
      title={t('同步向导')}
      visible={visible}
      onCancel={onClose}
      footer={
        <div className='flex justify-end'>
          {step === 1 && (
            <Button onClick={() => setStep(0)}>{t('上一步')}</Button>
          )}
          <Button onClick={onClose}>{t('取消')}</Button>
          {step === 0 && (
            <Button
              type='primary'
              onClick={() => setStep(1)}
              disabled={option !== 'official'}
            >
              {t('下一步')}
            </Button>
          )}
          {step === 1 && (
            <Button
              type='primary'
              theme='solid'
              loading={loading}
              onClick={async () => {
                await onConfirm?.({ option, locale });
              }}
            >
              {t('开始同步')}
            </Button>
          )}
        </div>
      }
      width={isMobile ? '100%' : 'small'}
    >
      <div className='mb-3'>
        <Steps type='basic' current={step} size='small'>
          <Steps.Step title={t('选择方式')} description={t('选择同步来源')} />
          <Steps.Step title={t('选择语言')} description={t('选择同步语言')} />
        </Steps>
      </div>

      {step === 0 && (
        <div className='mt-2 flex justify-center'>
          <RadioGroup
            value={option}
            onChange={(e) => setOption(e?.target?.value ?? e)}
            type='card'
            direction='horizontal'
            aria-label='同步方式选择'
            name='sync-mode-selection'
          >
            <Radio value='official' extra={t('从官方模型库同步')}>
              {t('官方模型同步')}
            </Radio>
            <Radio value='config' extra={t('从配置文件同步')} disabled>
              {t('配置文件同步')}
            </Radio>
          </RadioGroup>
        </div>
      )}

      {step === 1 && (
        <div className='mt-2'>
          <div className='mb-2 text-[var(--semi-color-text-2)]'>
            {t('请选择同步语言')}
          </div>
          <div className='flex justify-center'>
            <RadioGroup
              value={locale}
              onChange={(e) => setLocale(e?.target?.value ?? e)}
              type='card'
              direction='horizontal'
              aria-label='语言选择'
              name='sync-locale-selection'
            >
              <Radio value='en' extra='English'>
                EN
              </Radio>
              <Radio value='zh' extra='中文'>
                ZH
              </Radio>
              <Radio value='ja' extra='日本語'>
                JA
              </Radio>
            </RadioGroup>
          </div>
        </div>
      )}
    </Modal>
  );
};

export default SyncWizardModal;