Hugging Face's logo

Spaces:
lengfeng1360
/
api
Build error

App Files Community
api
File size: 2,928 Bytes
4ef3a0e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
/*

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 from 'react';
import { Layout, ImagePreview } from '@douyinfe/semi-ui';
import PricingSidebar from './PricingSidebar';
import PricingContent from './content/PricingContent';
import ModelDetailSideSheet from '../modal/ModelDetailSideSheet';
import { useModelPricingData } from '../../../../hooks/model-pricing/useModelPricingData';
import { useIsMobile } from '../../../../hooks/common/useIsMobile';

const PricingPage = () => {
  const pricingData = useModelPricingData();
  const { Sider, Content } = Layout;
  const isMobile = useIsMobile();
  const [showRatio, setShowRatio] = React.useState(false);
  const [viewMode, setViewMode] = React.useState('card');
  const allProps = {
    ...pricingData,
    showRatio,
    setShowRatio,
    viewMode,
    setViewMode,
  };

  return (
    <div className='bg-white'>

      <Layout className='pricing-layout'>

        {!isMobile && (

          <Sider className='pricing-scroll-hide pricing-sidebar'>

            <PricingSidebar {...allProps} />

          </Sider>

        )}



        <Content className='pricing-scroll-hide pricing-content'>

          <PricingContent

            {...allProps}

            isMobile={isMobile}

            sidebarProps={allProps}

          />

        </Content>

      </Layout>



      <ImagePreview

        src={pricingData.modalImageUrl}

        visible={pricingData.isModalOpenurl}

        onVisibleChange={(visible) => pricingData.setIsModalOpenurl(visible)}

      />



      <ModelDetailSideSheet

        visible={pricingData.showModelDetail}

        onClose={pricingData.closeModelDetail}

        modelData={pricingData.selectedModel}

        groupRatio={pricingData.groupRatio}

        usableGroup={pricingData.usableGroup}

        currency={pricingData.currency}

        tokenUnit={pricingData.tokenUnit}

        displayPrice={pricingData.displayPrice}

        showRatio={allProps.showRatio}

        vendorsMap={pricingData.vendorsMap}

        endpointMap={pricingData.endpointMap}

        autoGroups={pricingData.autoGroups}

        t={pricingData.t}

      />

    </div>
  );
};

export default PricingPage;