From e5e86fc0332b3cfaac20e068a5109b373c4db727 Mon Sep 17 00:00:00 2001 From: zxhlyh Date: Mon, 14 Aug 2023 12:46:28 +0800 Subject: [PATCH] Feat/apply free quota (#828) Co-authored-by: Joel --- .../[appId]/overview/page.tsx | 2 - web/app/(commonLayout)/apps/Apps.tsx | 11 +- .../app/overview/apikey-info-panel/index.tsx | 52 ++++----- .../model-page/configs/spark.tsx | 26 ++--- .../model-page/declarations.ts | 4 + .../model-page/model-item/FreeQuota.tsx | 100 ++++++++++++++++++ .../model-page/model-item/Setting.tsx | 13 +++ .../model-page/model-item/index.tsx | 2 + web/config/index.ts | 1 + web/i18n/lang/app-overview.en.ts | 1 + web/i18n/lang/app-overview.zh.ts | 1 + web/i18n/lang/common.en.ts | 1 + web/i18n/lang/common.zh.ts | 1 + web/service/common.ts | 4 + web/utils/format.ts | 37 ++++--- 15 files changed, 199 insertions(+), 57 deletions(-) create mode 100644 web/app/components/header/account-setting/model-page/model-item/FreeQuota.tsx diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/page.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/page.tsx index caf31cecb0..e9fb69969c 100644 --- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/page.tsx +++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/page.tsx @@ -1,5 +1,4 @@ import React from 'react' -import { EditKeyPopover } from './welcome-banner' import ChartView from './chartView' import CardView from './cardView' import { getLocaleOnServer } from '@/i18n/server' @@ -21,7 +20,6 @@ const Overview = async ({
{t('overview.title')} -
diff --git a/web/app/(commonLayout)/apps/Apps.tsx b/web/app/(commonLayout)/apps/Apps.tsx index e264cc2301..7f24f59544 100644 --- a/web/app/(commonLayout)/apps/Apps.tsx +++ b/web/app/(commonLayout)/apps/Apps.tsx @@ -4,12 +4,13 @@ import { useEffect, useRef } from 'react' import useSWRInfinite from 'swr/infinite' import { debounce } from 'lodash-es' import { useTranslation } from 'react-i18next' +import { useSearchParams } from 'next/navigation' import AppCard from './AppCard' import NewAppCard from './NewAppCard' import type { AppListResponse } from '@/models/app' import { fetchAppList } from '@/service/apps' import { useSelector } from '@/context/app-context' -import { NEED_REFRESH_APP_LIST_KEY } from '@/config' +import { NEED_REFRESH_APP_LIST_KEY, SPARK_FREE_QUOTA_PENDING } from '@/config' const getKey = (pageIndex: number, previousPageData: AppListResponse) => { if (!pageIndex || previousPageData.has_more) @@ -23,6 +24,7 @@ const Apps = () => { const loadingStateRef = useRef(false) const pageContainerRef = useSelector(state => state.pageContainerRef) const anchorRef = useRef(null) + const searchParams = useSearchParams() useEffect(() => { document.title = `${t('app.title')} - Dify` @@ -30,6 +32,13 @@ const Apps = () => { localStorage.removeItem(NEED_REFRESH_APP_LIST_KEY) mutate() } + if ( + localStorage.getItem(SPARK_FREE_QUOTA_PENDING) !== '1' + && searchParams.get('type') === 'provider_apply_callback' + && searchParams.get('provider') === 'spark' + && searchParams.get('result') === 'success' + ) + localStorage.setItem(SPARK_FREE_QUOTA_PENDING, '1') }, []) useEffect(() => { diff --git a/web/app/components/app/overview/apikey-info-panel/index.tsx b/web/app/components/app/overview/apikey-info-panel/index.tsx index 8c1368c7b3..0a34a822ad 100644 --- a/web/app/components/app/overview/apikey-info-panel/index.tsx +++ b/web/app/components/app/overview/apikey-info-panel/index.tsx @@ -3,18 +3,17 @@ import type { FC } from 'react' import React, { useState } from 'react' import { useTranslation } from 'react-i18next' import cn from 'classnames' -import useSWR from 'swr' import Progress from './progress' import Button from '@/app/components/base/button' import { LinkExternal02, XClose } from '@/app/components/base/icons/src/vender/line/general' import AccountSetting from '@/app/components/header/account-setting' -import { fetchTenantInfo } from '@/service/common' import { IS_CE_EDITION } from '@/config' import { useProviderContext } from '@/context/provider-context' +import { formatNumber } from '@/utils/format' const APIKeyInfoPanel: FC = () => { const isCloud = !IS_CE_EDITION - const { providers }: any = useProviderContext() + const { textGenerationModelList } = useProviderContext() const { t } = useTranslation() @@ -22,37 +21,42 @@ const APIKeyInfoPanel: FC = () => { const [isShow, setIsShow] = useState(true) - const { data: userInfo } = useSWR({ url: '/info' }, fetchTenantInfo) - if (!userInfo) - return null + const hasSetAPIKEY = !!textGenerationModelList?.find(({ model_provider: provider }) => { + if (provider.provider_type === 'system' && provider.quota_type === 'paid') + return true - const hasBindAPI = userInfo?.providers?.find(({ token_is_set }) => token_is_set) - if (hasBindAPI) + if (provider.provider_type === 'custom') + return true + + return false + }) + if (hasSetAPIKEY) return null // first show in trail and not used exhausted, else find the exhausted - const [used, total, providerName] = (() => { - if (!providers || !isCloud) + const [used, total, unit, providerName] = (() => { + if (!textGenerationModelList || !isCloud) return [0, 0, ''] let used = 0 let total = 0 + let unit = 'times' let trailProviderName = '' let hasFoundNotExhausted = false - Object.keys(providers).forEach((providerName) => { + textGenerationModelList?.filter(({ model_provider: provider }) => { + return provider.quota_type === 'trial' + }).forEach(({ model_provider: provider }) => { if (hasFoundNotExhausted) return - providers[providerName].providers.forEach(({ quota_type, quota_limit, quota_used }: any) => { - if (quota_type === 'trial') { - if (quota_limit !== quota_used) - hasFoundNotExhausted = true - - used = quota_used - total = quota_limit - trailProviderName = providerName - } - }) + const { provider_name, quota_used, quota_limit, quota_unit } = provider + if (quota_limit !== quota_used) + hasFoundNotExhausted = true + used = quota_used + total = quota_limit + unit = quota_unit + trailProviderName = provider_name }) - return [used, total, trailProviderName] + + return [used, total, unit, trailProviderName] })() const usedPercent = Math.round(used / total * 100) const exhausted = isCloud && usedPercent === 100 @@ -81,9 +85,9 @@ const APIKeyInfoPanel: FC = () => { {isCloud && (
-
{t('appOverview.apiKeyInfo.callTimes')}
+
{t(`appOverview.apiKeyInfo.${unit === 'times' ? 'callTimes' : 'usedToken'}`)}
·
-
{used}/{total}
+
{formatNumber(used)}/{formatNumber(total)}
diff --git a/web/app/components/header/account-setting/model-page/configs/spark.tsx b/web/app/components/header/account-setting/model-page/configs/spark.tsx index c37fdf0252..4ddec68e5a 100644 --- a/web/app/components/header/account-setting/model-page/configs/spark.tsx +++ b/web/app/components/header/account-setting/model-page/configs/spark.tsx @@ -50,19 +50,6 @@ const config: ProviderConfig = { 'zh-Hans': '在此输入您的 API ID', }, }, - { - type: 'text', - key: 'api_key', - required: true, - label: { - 'en': 'API Key', - 'zh-Hans': 'API Key', - }, - placeholder: { - 'en': 'Enter your API key here', - 'zh-Hans': '在此输入您的 API Key', - }, - }, { type: 'text', key: 'api_secret', @@ -76,6 +63,19 @@ const config: ProviderConfig = { 'zh-Hans': '在此输入您的 API Secret', }, }, + { + type: 'text', + key: 'api_key', + required: true, + label: { + 'en': 'API Key', + 'zh-Hans': 'API Key', + }, + placeholder: { + 'en': 'Enter your API key here', + 'zh-Hans': '在此输入您的 API Key', + }, + }, ], }, } diff --git a/web/app/components/header/account-setting/model-page/declarations.ts b/web/app/components/header/account-setting/model-page/declarations.ts index 6e9ad06d11..9162562753 100644 --- a/web/app/components/header/account-setting/model-page/declarations.ts +++ b/web/app/components/header/account-setting/model-page/declarations.ts @@ -74,6 +74,10 @@ export type BackendModel = { model_provider: { provider_name: ProviderEnum provider_type: PreferredProviderTypeEnum + quota_type: 'trial' | 'paid' + quota_unit: 'times' | 'tokens' + quota_used: number + quota_limit: number } features: ModelFeature[] } diff --git a/web/app/components/header/account-setting/model-page/model-item/FreeQuota.tsx b/web/app/components/header/account-setting/model-page/model-item/FreeQuota.tsx new file mode 100644 index 0000000000..03eb0adc96 --- /dev/null +++ b/web/app/components/header/account-setting/model-page/model-item/FreeQuota.tsx @@ -0,0 +1,100 @@ +import { useEffect, useState } from 'react' +import type { FC } from 'react' +import { useTranslation } from 'react-i18next' +import { useContext } from 'use-context-selector' +import type { ProviderConfigItem, ProviderWithQuota, TypeWithI18N } from '../declarations' +import { ProviderEnum as ProviderEnumValue } from '../declarations' +import s from './index.module.css' +import I18n from '@/context/i18n' +import Button from '@/app/components/base/button' +import { submitFreeQuota } from '@/service/common' +import { SPARK_FREE_QUOTA_PENDING } from '@/config' + +const TIP_MAP: { [k: string]: TypeWithI18N } = { + [ProviderEnumValue.minimax]: { + 'en': 'Earn 1 million tokens for free', + 'zh-Hans': '免费获取 100 万个 token', + }, + [ProviderEnumValue.spark]: { + 'en': 'Earn 3 million tokens for free', + 'zh-Hans': '免费获取 300 万个 token', + }, +} +const FREE_QUOTA_TIP = { + 'en': 'Your 3 million tokens will be credited in 5 minutes.', + 'zh-Hans': '您的 300 万 token 将在 5 分钟内到账。', +} +type FreeQuotaProps = { + modelItem: ProviderConfigItem + onUpdate: () => void + freeProvider?: ProviderWithQuota +} +const FreeQuota: FC = ({ + modelItem, + onUpdate, + freeProvider, +}) => { + const { locale } = useContext(I18n) + const { t } = useTranslation() + const [loading, setLoading] = useState(false) + const [freeQuotaPending, setFreeQuotaPending] = useState(false) + + useEffect(() => { + if ( + modelItem.key === ProviderEnumValue.spark + && localStorage.getItem(SPARK_FREE_QUOTA_PENDING) === '1' + && freeProvider + && !freeProvider.is_valid + ) + setFreeQuotaPending(true) + }, [freeProvider, modelItem.key]) + + const handleClick = async () => { + try { + setLoading(true) + const res = await submitFreeQuota(`/workspaces/current/model-providers/${modelItem.key}/free-quota-submit`) + + if (res.type === 'redirect' && res.redirect_url) + window.location.href = res.redirect_url + else if (res.type === 'submit' && res.result === 'success') + onUpdate() + } + finally { + setLoading(false) + } + } + + if (freeQuotaPending) { + return ( +
+ ⏳ +
{FREE_QUOTA_TIP[locale]}
+ +
+
+ ) + } + + return ( +
+ 📣 +
{TIP_MAP[modelItem.key][locale]}
+ +
+
+ ) +} + +export default FreeQuota diff --git a/web/app/components/header/account-setting/model-page/model-item/Setting.tsx b/web/app/components/header/account-setting/model-page/model-item/Setting.tsx index 83853f1ad1..7fc4e042e3 100644 --- a/web/app/components/header/account-setting/model-page/model-item/Setting.tsx +++ b/web/app/components/header/account-setting/model-page/model-item/Setting.tsx @@ -2,8 +2,10 @@ import type { FC } from 'react' import { useTranslation } from 'react-i18next' import { useContext } from 'use-context-selector' import type { FormValue, Provider, ProviderConfigItem, ProviderWithConfig, ProviderWithQuota } from '../declarations' +import { ProviderEnum } from '../declarations' import Indicator from '../../../indicator' import Selector from '../selector' +import FreeQuota from './FreeQuota' import I18n from '@/context/i18n' import Button from '@/app/components/base/button' import { IS_CE_EDITION } from '@/config' @@ -13,6 +15,7 @@ type SettingProps = { modelItem: ProviderConfigItem onOpenModal: (v?: FormValue) => void onOperate: (v: Record) => void + onUpdate: () => void } const Setting: FC = ({ @@ -20,6 +23,7 @@ const Setting: FC = ({ modelItem, onOpenModal, onOperate, + onUpdate, }) => { const { locale } = useContext(I18n) const { t } = useTranslation() @@ -29,6 +33,15 @@ const Setting: FC = ({ return (
+ { + (modelItem.key === ProviderEnum.minimax || modelItem.key === ProviderEnum.spark) && systemFree && !systemFree?.is_valid && !IS_CE_EDITION && ( + + ) + } { modelItem.disable && !IS_CE_EDITION && (
diff --git a/web/app/components/header/account-setting/model-page/model-item/index.tsx b/web/app/components/header/account-setting/model-page/model-item/index.tsx index 1bcd0cd4f3..e8cb63c259 100644 --- a/web/app/components/header/account-setting/model-page/model-item/index.tsx +++ b/web/app/components/header/account-setting/model-page/model-item/index.tsx @@ -26,6 +26,7 @@ const ModelItem: FC = ({ modelItem, onOpenModal, onOperate, + onUpdate, }) => { const { locale } = useContext(I18n) const custom = currentProvider?.providers.find(p => p.provider_type === 'custom') as ProviderWithModels @@ -47,6 +48,7 @@ const ModelItem: FC = ({ modelItem={modelItem} onOpenModal={onOpenModal} onOperate={onOperate} + onUpdate={onUpdate} />
{ diff --git a/web/config/index.ts b/web/config/index.ts index 991de2e6d3..82908b3555 100644 --- a/web/config/index.ts +++ b/web/config/index.ts @@ -120,3 +120,4 @@ export const VAR_ITEM_TEMPLATE = { export const appDefaultIconBackground = '#D5F5F6' export const NEED_REFRESH_APP_LIST_KEY = 'needRefreshAppList' +export const SPARK_FREE_QUOTA_PENDING = 'sparkFreeQuotaPending' diff --git a/web/i18n/lang/app-overview.en.ts b/web/i18n/lang/app-overview.en.ts index 9fb0dca058..23ce0d0199 100644 --- a/web/i18n/lang/app-overview.en.ts +++ b/web/i18n/lang/app-overview.en.ts @@ -23,6 +23,7 @@ const translation = { }, }, callTimes: 'Call times', + usedToken: 'Used token', setAPIBtn: 'Go to setup model provider', tryCloud: 'Or try the cloud version of Dify with free quote', }, diff --git a/web/i18n/lang/app-overview.zh.ts b/web/i18n/lang/app-overview.zh.ts index 957b08d4bb..82a7ccaa5b 100644 --- a/web/i18n/lang/app-overview.zh.ts +++ b/web/i18n/lang/app-overview.zh.ts @@ -23,6 +23,7 @@ const translation = { }, }, callTimes: '调用次数', + usedToken: '使用 Tokens', setAPIBtn: '设置模型提供商', tryCloud: '或者尝试使用 Dify 的云版本并使用试用配额', }, diff --git a/web/i18n/lang/common.en.ts b/web/i18n/lang/common.en.ts index a2ff780799..e197d05be1 100644 --- a/web/i18n/lang/common.en.ts +++ b/web/i18n/lang/common.en.ts @@ -25,6 +25,7 @@ const translation = { download: 'Download', setup: 'Setup', getForFree: 'Get for free', + reload: 'Reload', }, placeholder: { input: 'Please enter', diff --git a/web/i18n/lang/common.zh.ts b/web/i18n/lang/common.zh.ts index 5ff5bdcd0d..855d634b45 100644 --- a/web/i18n/lang/common.zh.ts +++ b/web/i18n/lang/common.zh.ts @@ -25,6 +25,7 @@ const translation = { download: '下载', setup: '设置', getForFree: '免费获取', + reload: '刷新', }, placeholder: { input: '请输入', diff --git a/web/service/common.ts b/web/service/common.ts index 6466073753..d66fe166aa 100644 --- a/web/service/common.ts +++ b/web/service/common.ts @@ -169,3 +169,7 @@ export const fetchDefaultModal: Fetcher = (url) => { export const updateDefaultModel: Fetcher = ({ url, body }) => { return post(url, { body }) as Promise } + +export const submitFreeQuota: Fetcher<{ type: string; redirect_url?: string; result?: string }, string> = (url) => { + return post(url) as Promise<{ type: string; redirect_url?: string; result?: string }> +} diff --git a/web/utils/format.ts b/web/utils/format.ts index fc30c62369..1eeb6af807 100644 --- a/web/utils/format.ts +++ b/web/utils/format.ts @@ -1,33 +1,36 @@ /* -* Formats a number with comma separators. +* Formats a number with comma separators. formatNumber(1234567) will return '1,234,567' formatNumber(1234567.89) will return '1,234,567.89' */ export const formatNumber = (num: number | string) => { - if (!num) return num; - let parts = num.toString().split("."); - parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); - return parts.join("."); + if (!num) + return num + const parts = num.toString().split('.') + parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',') + return parts.join('.') } export const formatFileSize = (num: number) => { - if (!num) return num; - const units = ['', 'K', 'M', 'G', 'T', 'P']; - let index = 0; + if (!num) + return num + const units = ['', 'K', 'M', 'G', 'T', 'P'] + let index = 0 while (num >= 1024 && index < units.length) { - num = num / 1024; - index++; + num = num / 1024 + index++ } - return num.toFixed(2) + `${units[index]}B`; + return `${num.toFixed(2)}${units[index]}B` } export const formatTime = (num: number) => { - if (!num) return num; - const units = ['sec', 'min', 'h']; - let index = 0; + if (!num) + return num + const units = ['sec', 'min', 'h'] + let index = 0 while (num >= 60 && index < units.length) { - num = num / 60; - index++; + num = num / 60 + index++ } - return `${num.toFixed(2)} ${units[index]}`; + return `${num.toFixed(2)} ${units[index]}` }