♿ optimize the image comparison component
This commit is contained in:
302
auto-import.d.ts
vendored
302
auto-import.d.ts
vendored
@@ -307,3 +307,305 @@ declare global {
|
|||||||
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
|
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
|
||||||
import('vue')
|
import('vue')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// for vue template auto import
|
||||||
|
import { UnwrapRef } from 'vue'
|
||||||
|
declare module 'vue' {
|
||||||
|
interface GlobalComponents {}
|
||||||
|
interface ComponentCustomProperties {
|
||||||
|
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
|
||||||
|
readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
|
||||||
|
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
|
||||||
|
readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
|
||||||
|
readonly computed: UnwrapRef<typeof import('vue')['computed']>
|
||||||
|
readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
|
||||||
|
readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
|
||||||
|
readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
|
||||||
|
readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
|
||||||
|
readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
|
||||||
|
readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
|
||||||
|
readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
|
||||||
|
readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
|
||||||
|
readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
|
||||||
|
readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
|
||||||
|
readonly createPinia: UnwrapRef<typeof import('pinia')['createPinia']>
|
||||||
|
readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
|
||||||
|
readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
|
||||||
|
readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
|
||||||
|
readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
|
||||||
|
readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
|
||||||
|
readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
|
||||||
|
readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
|
||||||
|
readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
|
||||||
|
readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
|
||||||
|
readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
|
||||||
|
readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
|
||||||
|
readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
|
||||||
|
readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
|
||||||
|
readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
|
||||||
|
readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
|
||||||
|
readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
|
||||||
|
readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
|
||||||
|
readonly h: UnwrapRef<typeof import('vue')['h']>
|
||||||
|
readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
|
||||||
|
readonly inject: UnwrapRef<typeof import('vue')['inject']>
|
||||||
|
readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
|
||||||
|
readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
|
||||||
|
readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
|
||||||
|
readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
|
||||||
|
readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
|
||||||
|
readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
|
||||||
|
readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
|
||||||
|
readonly mapActions: UnwrapRef<typeof import('pinia')['mapActions']>
|
||||||
|
readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']>
|
||||||
|
readonly mapState: UnwrapRef<typeof import('pinia')['mapState']>
|
||||||
|
readonly mapStores: UnwrapRef<typeof import('pinia')['mapStores']>
|
||||||
|
readonly mapWritableState: UnwrapRef<typeof import('pinia')['mapWritableState']>
|
||||||
|
readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
|
||||||
|
readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
|
||||||
|
readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
|
||||||
|
readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
|
||||||
|
readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
|
||||||
|
readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
|
||||||
|
readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
|
||||||
|
readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
|
||||||
|
readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
|
||||||
|
readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
|
||||||
|
readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
|
||||||
|
readonly onKeyStroke: UnwrapRef<typeof import('@vueuse/core')['onKeyStroke']>
|
||||||
|
readonly onLongPress: UnwrapRef<typeof import('@vueuse/core')['onLongPress']>
|
||||||
|
readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
|
||||||
|
readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
|
||||||
|
readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
|
||||||
|
readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
|
||||||
|
readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
|
||||||
|
readonly onStartTyping: UnwrapRef<typeof import('@vueuse/core')['onStartTyping']>
|
||||||
|
readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
|
||||||
|
readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
|
||||||
|
readonly onWatcherCleanup: UnwrapRef<typeof import('vue')['onWatcherCleanup']>
|
||||||
|
readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
|
||||||
|
readonly provide: UnwrapRef<typeof import('vue')['provide']>
|
||||||
|
readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
|
||||||
|
readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
|
||||||
|
readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
|
||||||
|
readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
|
||||||
|
readonly reactiveComputed: UnwrapRef<typeof import('@vueuse/core')['reactiveComputed']>
|
||||||
|
readonly reactiveOmit: UnwrapRef<typeof import('@vueuse/core')['reactiveOmit']>
|
||||||
|
readonly reactivePick: UnwrapRef<typeof import('@vueuse/core')['reactivePick']>
|
||||||
|
readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
|
||||||
|
readonly ref: UnwrapRef<typeof import('vue')['ref']>
|
||||||
|
readonly refAutoReset: UnwrapRef<typeof import('@vueuse/core')['refAutoReset']>
|
||||||
|
readonly refDebounced: UnwrapRef<typeof import('@vueuse/core')['refDebounced']>
|
||||||
|
readonly refDefault: UnwrapRef<typeof import('@vueuse/core')['refDefault']>
|
||||||
|
readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']>
|
||||||
|
readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
|
||||||
|
readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
|
||||||
|
readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
|
||||||
|
readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
|
||||||
|
readonly setActivePinia: UnwrapRef<typeof import('pinia')['setActivePinia']>
|
||||||
|
readonly setMapStoreSuffix: UnwrapRef<typeof import('pinia')['setMapStoreSuffix']>
|
||||||
|
readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
|
||||||
|
readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
|
||||||
|
readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
|
||||||
|
readonly storeToRefs: UnwrapRef<typeof import('pinia')['storeToRefs']>
|
||||||
|
readonly syncRef: UnwrapRef<typeof import('@vueuse/core')['syncRef']>
|
||||||
|
readonly syncRefs: UnwrapRef<typeof import('@vueuse/core')['syncRefs']>
|
||||||
|
readonly templateRef: UnwrapRef<typeof import('@vueuse/core')['templateRef']>
|
||||||
|
readonly throttledRef: UnwrapRef<typeof import('@vueuse/core')['throttledRef']>
|
||||||
|
readonly throttledWatch: UnwrapRef<typeof import('@vueuse/core')['throttledWatch']>
|
||||||
|
readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
|
||||||
|
readonly toReactive: UnwrapRef<typeof import('@vueuse/core')['toReactive']>
|
||||||
|
readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
|
||||||
|
readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
|
||||||
|
readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
|
||||||
|
readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
|
||||||
|
readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
|
||||||
|
readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
|
||||||
|
readonly tryOnMounted: UnwrapRef<typeof import('@vueuse/core')['tryOnMounted']>
|
||||||
|
readonly tryOnScopeDispose: UnwrapRef<typeof import('@vueuse/core')['tryOnScopeDispose']>
|
||||||
|
readonly tryOnUnmounted: UnwrapRef<typeof import('@vueuse/core')['tryOnUnmounted']>
|
||||||
|
readonly unref: UnwrapRef<typeof import('vue')['unref']>
|
||||||
|
readonly unrefElement: UnwrapRef<typeof import('@vueuse/core')['unrefElement']>
|
||||||
|
readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
|
||||||
|
readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
|
||||||
|
readonly useAnimate: UnwrapRef<typeof import('@vueuse/core')['useAnimate']>
|
||||||
|
readonly useArrayDifference: UnwrapRef<typeof import('@vueuse/core')['useArrayDifference']>
|
||||||
|
readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
|
||||||
|
readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
|
||||||
|
readonly useArrayFind: UnwrapRef<typeof import('@vueuse/core')['useArrayFind']>
|
||||||
|
readonly useArrayFindIndex: UnwrapRef<typeof import('@vueuse/core')['useArrayFindIndex']>
|
||||||
|
readonly useArrayFindLast: UnwrapRef<typeof import('@vueuse/core')['useArrayFindLast']>
|
||||||
|
readonly useArrayIncludes: UnwrapRef<typeof import('@vueuse/core')['useArrayIncludes']>
|
||||||
|
readonly useArrayJoin: UnwrapRef<typeof import('@vueuse/core')['useArrayJoin']>
|
||||||
|
readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
|
||||||
|
readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
|
||||||
|
readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
|
||||||
|
readonly useArrayUnique: UnwrapRef<typeof import('@vueuse/core')['useArrayUnique']>
|
||||||
|
readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
|
||||||
|
readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
|
||||||
|
readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
|
||||||
|
readonly useBase64: UnwrapRef<typeof import('@vueuse/core')['useBase64']>
|
||||||
|
readonly useBattery: UnwrapRef<typeof import('@vueuse/core')['useBattery']>
|
||||||
|
readonly useBluetooth: UnwrapRef<typeof import('@vueuse/core')['useBluetooth']>
|
||||||
|
readonly useBreakpoints: UnwrapRef<typeof import('@vueuse/core')['useBreakpoints']>
|
||||||
|
readonly useBroadcastChannel: UnwrapRef<typeof import('@vueuse/core')['useBroadcastChannel']>
|
||||||
|
readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
|
||||||
|
readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
|
||||||
|
readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
|
||||||
|
readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>
|
||||||
|
readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
|
||||||
|
readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
|
||||||
|
readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
|
||||||
|
readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
|
||||||
|
readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
|
||||||
|
readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
|
||||||
|
readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
|
||||||
|
readonly useCurrentElement: UnwrapRef<typeof import('@vueuse/core')['useCurrentElement']>
|
||||||
|
readonly useCycleList: UnwrapRef<typeof import('@vueuse/core')['useCycleList']>
|
||||||
|
readonly useDark: UnwrapRef<typeof import('@vueuse/core')['useDark']>
|
||||||
|
readonly useDateFormat: UnwrapRef<typeof import('@vueuse/core')['useDateFormat']>
|
||||||
|
readonly useDebounce: UnwrapRef<typeof import('@vueuse/core')['useDebounce']>
|
||||||
|
readonly useDebounceFn: UnwrapRef<typeof import('@vueuse/core')['useDebounceFn']>
|
||||||
|
readonly useDebouncedRefHistory: UnwrapRef<typeof import('@vueuse/core')['useDebouncedRefHistory']>
|
||||||
|
readonly useDeviceMotion: UnwrapRef<typeof import('@vueuse/core')['useDeviceMotion']>
|
||||||
|
readonly useDeviceOrientation: UnwrapRef<typeof import('@vueuse/core')['useDeviceOrientation']>
|
||||||
|
readonly useDevicePixelRatio: UnwrapRef<typeof import('@vueuse/core')['useDevicePixelRatio']>
|
||||||
|
readonly useDevicesList: UnwrapRef<typeof import('@vueuse/core')['useDevicesList']>
|
||||||
|
readonly useDisplayMedia: UnwrapRef<typeof import('@vueuse/core')['useDisplayMedia']>
|
||||||
|
readonly useDocumentVisibility: UnwrapRef<typeof import('@vueuse/core')['useDocumentVisibility']>
|
||||||
|
readonly useDraggable: UnwrapRef<typeof import('@vueuse/core')['useDraggable']>
|
||||||
|
readonly useDropZone: UnwrapRef<typeof import('@vueuse/core')['useDropZone']>
|
||||||
|
readonly useElementBounding: UnwrapRef<typeof import('@vueuse/core')['useElementBounding']>
|
||||||
|
readonly useElementByPoint: UnwrapRef<typeof import('@vueuse/core')['useElementByPoint']>
|
||||||
|
readonly useElementHover: UnwrapRef<typeof import('@vueuse/core')['useElementHover']>
|
||||||
|
readonly useElementSize: UnwrapRef<typeof import('@vueuse/core')['useElementSize']>
|
||||||
|
readonly useElementVisibility: UnwrapRef<typeof import('@vueuse/core')['useElementVisibility']>
|
||||||
|
readonly useEventBus: UnwrapRef<typeof import('@vueuse/core')['useEventBus']>
|
||||||
|
readonly useEventListener: UnwrapRef<typeof import('@vueuse/core')['useEventListener']>
|
||||||
|
readonly useEventSource: UnwrapRef<typeof import('@vueuse/core')['useEventSource']>
|
||||||
|
readonly useEyeDropper: UnwrapRef<typeof import('@vueuse/core')['useEyeDropper']>
|
||||||
|
readonly useFavicon: UnwrapRef<typeof import('@vueuse/core')['useFavicon']>
|
||||||
|
readonly useFetch: UnwrapRef<typeof import('@vueuse/core')['useFetch']>
|
||||||
|
readonly useFileDialog: UnwrapRef<typeof import('@vueuse/core')['useFileDialog']>
|
||||||
|
readonly useFileSystemAccess: UnwrapRef<typeof import('@vueuse/core')['useFileSystemAccess']>
|
||||||
|
readonly useFocus: UnwrapRef<typeof import('@vueuse/core')['useFocus']>
|
||||||
|
readonly useFocusWithin: UnwrapRef<typeof import('@vueuse/core')['useFocusWithin']>
|
||||||
|
readonly useFps: UnwrapRef<typeof import('@vueuse/core')['useFps']>
|
||||||
|
readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']>
|
||||||
|
readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
|
||||||
|
readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
|
||||||
|
readonly useId: UnwrapRef<typeof import('vue')['useId']>
|
||||||
|
readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
|
||||||
|
readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
|
||||||
|
readonly useInfiniteScroll: UnwrapRef<typeof import('@vueuse/core')['useInfiniteScroll']>
|
||||||
|
readonly useIntersectionObserver: UnwrapRef<typeof import('@vueuse/core')['useIntersectionObserver']>
|
||||||
|
readonly useInterval: UnwrapRef<typeof import('@vueuse/core')['useInterval']>
|
||||||
|
readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
|
||||||
|
readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
|
||||||
|
readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
|
||||||
|
readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
|
||||||
|
readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
|
||||||
|
readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
|
||||||
|
readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']>
|
||||||
|
readonly useMediaControls: UnwrapRef<typeof import('@vueuse/core')['useMediaControls']>
|
||||||
|
readonly useMediaQuery: UnwrapRef<typeof import('@vueuse/core')['useMediaQuery']>
|
||||||
|
readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
|
||||||
|
readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
|
||||||
|
readonly useModel: UnwrapRef<typeof import('vue')['useModel']>
|
||||||
|
readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
|
||||||
|
readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
|
||||||
|
readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']>
|
||||||
|
readonly useMousePressed: UnwrapRef<typeof import('@vueuse/core')['useMousePressed']>
|
||||||
|
readonly useMutationObserver: UnwrapRef<typeof import('@vueuse/core')['useMutationObserver']>
|
||||||
|
readonly useNavigatorLanguage: UnwrapRef<typeof import('@vueuse/core')['useNavigatorLanguage']>
|
||||||
|
readonly useNetwork: UnwrapRef<typeof import('@vueuse/core')['useNetwork']>
|
||||||
|
readonly useNow: UnwrapRef<typeof import('@vueuse/core')['useNow']>
|
||||||
|
readonly useObjectUrl: UnwrapRef<typeof import('@vueuse/core')['useObjectUrl']>
|
||||||
|
readonly useOffsetPagination: UnwrapRef<typeof import('@vueuse/core')['useOffsetPagination']>
|
||||||
|
readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']>
|
||||||
|
readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']>
|
||||||
|
readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>
|
||||||
|
readonly useParentElement: UnwrapRef<typeof import('@vueuse/core')['useParentElement']>
|
||||||
|
readonly usePerformanceObserver: UnwrapRef<typeof import('@vueuse/core')['usePerformanceObserver']>
|
||||||
|
readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
|
||||||
|
readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
|
||||||
|
readonly usePointerLock: UnwrapRef<typeof import('@vueuse/core')['usePointerLock']>
|
||||||
|
readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>
|
||||||
|
readonly usePreferredColorScheme: UnwrapRef<typeof import('@vueuse/core')['usePreferredColorScheme']>
|
||||||
|
readonly usePreferredContrast: UnwrapRef<typeof import('@vueuse/core')['usePreferredContrast']>
|
||||||
|
readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']>
|
||||||
|
readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
|
||||||
|
readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
|
||||||
|
readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
|
||||||
|
readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
|
||||||
|
readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
|
||||||
|
readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
|
||||||
|
readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
|
||||||
|
readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
|
||||||
|
readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
|
||||||
|
readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
|
||||||
|
readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
|
||||||
|
readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
|
||||||
|
readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
|
||||||
|
readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
|
||||||
|
readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
|
||||||
|
readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
|
||||||
|
readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
|
||||||
|
readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
|
||||||
|
readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
|
||||||
|
readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
|
||||||
|
readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
|
||||||
|
readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
|
||||||
|
readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
|
||||||
|
readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
|
||||||
|
readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
|
||||||
|
readonly useTemplateRef: UnwrapRef<typeof import('vue')['useTemplateRef']>
|
||||||
|
readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
|
||||||
|
readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
|
||||||
|
readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']>
|
||||||
|
readonly useTextareaAutosize: UnwrapRef<typeof import('@vueuse/core')['useTextareaAutosize']>
|
||||||
|
readonly useThrottle: UnwrapRef<typeof import('@vueuse/core')['useThrottle']>
|
||||||
|
readonly useThrottleFn: UnwrapRef<typeof import('@vueuse/core')['useThrottleFn']>
|
||||||
|
readonly useThrottledRefHistory: UnwrapRef<typeof import('@vueuse/core')['useThrottledRefHistory']>
|
||||||
|
readonly useTimeAgo: UnwrapRef<typeof import('@vueuse/core')['useTimeAgo']>
|
||||||
|
readonly useTimeout: UnwrapRef<typeof import('@vueuse/core')['useTimeout']>
|
||||||
|
readonly useTimeoutFn: UnwrapRef<typeof import('@vueuse/core')['useTimeoutFn']>
|
||||||
|
readonly useTimeoutPoll: UnwrapRef<typeof import('@vueuse/core')['useTimeoutPoll']>
|
||||||
|
readonly useTimestamp: UnwrapRef<typeof import('@vueuse/core')['useTimestamp']>
|
||||||
|
readonly useTitle: UnwrapRef<typeof import('@vueuse/core')['useTitle']>
|
||||||
|
readonly useToNumber: UnwrapRef<typeof import('@vueuse/core')['useToNumber']>
|
||||||
|
readonly useToString: UnwrapRef<typeof import('@vueuse/core')['useToString']>
|
||||||
|
readonly useToggle: UnwrapRef<typeof import('@vueuse/core')['useToggle']>
|
||||||
|
readonly useTransition: UnwrapRef<typeof import('@vueuse/core')['useTransition']>
|
||||||
|
readonly useUrlSearchParams: UnwrapRef<typeof import('@vueuse/core')['useUrlSearchParams']>
|
||||||
|
readonly useUserMedia: UnwrapRef<typeof import('@vueuse/core')['useUserMedia']>
|
||||||
|
readonly useVModel: UnwrapRef<typeof import('@vueuse/core')['useVModel']>
|
||||||
|
readonly useVModels: UnwrapRef<typeof import('@vueuse/core')['useVModels']>
|
||||||
|
readonly useVibrate: UnwrapRef<typeof import('@vueuse/core')['useVibrate']>
|
||||||
|
readonly useVirtualList: UnwrapRef<typeof import('@vueuse/core')['useVirtualList']>
|
||||||
|
readonly useWakeLock: UnwrapRef<typeof import('@vueuse/core')['useWakeLock']>
|
||||||
|
readonly useWebNotification: UnwrapRef<typeof import('@vueuse/core')['useWebNotification']>
|
||||||
|
readonly useWebSocket: UnwrapRef<typeof import('@vueuse/core')['useWebSocket']>
|
||||||
|
readonly useWebWorker: UnwrapRef<typeof import('@vueuse/core')['useWebWorker']>
|
||||||
|
readonly useWebWorkerFn: UnwrapRef<typeof import('@vueuse/core')['useWebWorkerFn']>
|
||||||
|
readonly useWindowFocus: UnwrapRef<typeof import('@vueuse/core')['useWindowFocus']>
|
||||||
|
readonly useWindowScroll: UnwrapRef<typeof import('@vueuse/core')['useWindowScroll']>
|
||||||
|
readonly useWindowSize: UnwrapRef<typeof import('@vueuse/core')['useWindowSize']>
|
||||||
|
readonly watch: UnwrapRef<typeof import('vue')['watch']>
|
||||||
|
readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']>
|
||||||
|
readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']>
|
||||||
|
readonly watchDebounced: UnwrapRef<typeof import('@vueuse/core')['watchDebounced']>
|
||||||
|
readonly watchDeep: UnwrapRef<typeof import('@vueuse/core')['watchDeep']>
|
||||||
|
readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
|
||||||
|
readonly watchIgnorable: UnwrapRef<typeof import('@vueuse/core')['watchIgnorable']>
|
||||||
|
readonly watchImmediate: UnwrapRef<typeof import('@vueuse/core')['watchImmediate']>
|
||||||
|
readonly watchOnce: UnwrapRef<typeof import('@vueuse/core')['watchOnce']>
|
||||||
|
readonly watchPausable: UnwrapRef<typeof import('@vueuse/core')['watchPausable']>
|
||||||
|
readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
|
||||||
|
readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
|
||||||
|
readonly watchThrottled: UnwrapRef<typeof import('@vueuse/core')['watchThrottled']>
|
||||||
|
readonly watchTriggerable: UnwrapRef<typeof import('@vueuse/core')['watchTriggerable']>
|
||||||
|
readonly watchWithFilter: UnwrapRef<typeof import('@vueuse/core')['watchWithFilter']>
|
||||||
|
readonly whenever: UnwrapRef<typeof import('@vueuse/core')['whenever']>
|
||||||
|
}
|
||||||
|
}
|
5
components.d.ts
vendored
5
components.d.ts
vendored
@@ -33,7 +33,6 @@ declare module 'vue' {
|
|||||||
AMenuItemGroup: typeof import('ant-design-vue/es')['MenuItemGroup']
|
AMenuItemGroup: typeof import('ant-design-vue/es')['MenuItemGroup']
|
||||||
AModal: typeof import('ant-design-vue/es')['Modal']
|
AModal: typeof import('ant-design-vue/es')['Modal']
|
||||||
AnimatedNature: typeof import('./src/components/AnimatedNature/AnimatedNature.vue')['default']
|
AnimatedNature: typeof import('./src/components/AnimatedNature/AnimatedNature.vue')['default']
|
||||||
AnimatedSvgIllustration: typeof import('./src/components/AnimatedSvgIllustration/AnimatedSvgIllustration.vue')['default']
|
|
||||||
APopover: typeof import('ant-design-vue/es')['Popover']
|
APopover: typeof import('ant-design-vue/es')['Popover']
|
||||||
AProgress: typeof import('ant-design-vue/es')['Progress']
|
AProgress: typeof import('ant-design-vue/es')['Progress']
|
||||||
AQrcode: typeof import('ant-design-vue/es')['QRCode']
|
AQrcode: typeof import('ant-design-vue/es')['QRCode']
|
||||||
@@ -62,6 +61,7 @@ declare module 'vue' {
|
|||||||
CommentInput: typeof import('./src/components/CommentReply/src/CommentInput/CommentInput.vue')['default']
|
CommentInput: typeof import('./src/components/CommentReply/src/CommentInput/CommentInput.vue')['default']
|
||||||
CommentList: typeof import('./src/components/CommentReply/src/CommentList/CommentList.vue')['default']
|
CommentList: typeof import('./src/components/CommentReply/src/CommentList/CommentList.vue')['default']
|
||||||
CommentReply: typeof import('./src/components/CommentReply/index.vue')['default']
|
CommentReply: typeof import('./src/components/CommentReply/index.vue')['default']
|
||||||
|
CompareImage: typeof import('./src/views/Upscale/CompareImage.vue')['default']
|
||||||
CompareResult: typeof import('./src/views/Upscale/CompareResult.vue')['default']
|
CompareResult: typeof import('./src/views/Upscale/CompareResult.vue')['default']
|
||||||
Countdown: typeof import('./src/components/MyUI/Countdown/Countdown.vue')['default']
|
Countdown: typeof import('./src/components/MyUI/Countdown/Countdown.vue')['default']
|
||||||
DatePicker: typeof import('./src/components/MyUI/DatePicker/DatePicker.vue')['default']
|
DatePicker: typeof import('./src/components/MyUI/DatePicker/DatePicker.vue')['default']
|
||||||
@@ -70,7 +70,6 @@ declare module 'vue' {
|
|||||||
Divider: typeof import('./src/components/MyUI/Divider/Divider.vue')['default']
|
Divider: typeof import('./src/components/MyUI/Divider/Divider.vue')['default']
|
||||||
Drawer: typeof import('./src/components/MyUI/Drawer/Drawer.vue')['default']
|
Drawer: typeof import('./src/components/MyUI/Drawer/Drawer.vue')['default']
|
||||||
DynamicTitle: typeof import('./src/components/DynamicTitle/DynamicTitle.vue')['default']
|
DynamicTitle: typeof import('./src/components/DynamicTitle/DynamicTitle.vue')['default']
|
||||||
EffectsCard: typeof import('./src/components/EffectsCard/EffectsCard.vue')['default']
|
|
||||||
Ellipsis: typeof import('./src/components/MyUI/Ellipsis/Ellipsis.vue')['default']
|
Ellipsis: typeof import('./src/components/MyUI/Ellipsis/Ellipsis.vue')['default']
|
||||||
Empty: typeof import('./src/components/MyUI/Empty/Empty.vue')['default']
|
Empty: typeof import('./src/components/MyUI/Empty/Empty.vue')['default']
|
||||||
Flex: typeof import('./src/components/MyUI/Flex/Flex.vue')['default']
|
Flex: typeof import('./src/components/MyUI/Flex/Flex.vue')['default']
|
||||||
@@ -102,6 +101,7 @@ declare module 'vue' {
|
|||||||
Phoalbum: typeof import('./src/views/Album/Phoalbum/Phoalbum.vue')['default']
|
Phoalbum: typeof import('./src/views/Album/Phoalbum/Phoalbum.vue')['default']
|
||||||
Popconfirm: typeof import('./src/components/MyUI/Popconfirm/Popconfirm.vue')['default']
|
Popconfirm: typeof import('./src/components/MyUI/Popconfirm/Popconfirm.vue')['default']
|
||||||
Popover: typeof import('./src/components/MyUI/Popover/Popover.vue')['default']
|
Popover: typeof import('./src/components/MyUI/Popover/Popover.vue')['default']
|
||||||
|
ProcessResult: typeof import('./src/views/Upscale/ProcessResult.vue')['default']
|
||||||
Progress: typeof import('./src/components/MyUI/Progress/Progress.vue')['default']
|
Progress: typeof import('./src/components/MyUI/Progress/Progress.vue')['default']
|
||||||
QRCode: typeof import('./src/components/MyUI/QRCode/QRCode.vue')['default']
|
QRCode: typeof import('./src/components/MyUI/QRCode/QRCode.vue')['default']
|
||||||
QRLogin: typeof import('./src/views/QRLogin/QRLogin.vue')['default']
|
QRLogin: typeof import('./src/views/QRLogin/QRLogin.vue')['default']
|
||||||
@@ -134,6 +134,7 @@ declare module 'vue' {
|
|||||||
TabletOutlined: typeof import('@ant-design/icons-vue')['TabletOutlined']
|
TabletOutlined: typeof import('@ant-design/icons-vue')['TabletOutlined']
|
||||||
Tabs: typeof import('./src/components/MyUI/Tabs/Tabs.vue')['default']
|
Tabs: typeof import('./src/components/MyUI/Tabs/Tabs.vue')['default']
|
||||||
Tag: typeof import('./src/components/MyUI/Tag/Tag.vue')['default']
|
Tag: typeof import('./src/components/MyUI/Tag/Tag.vue')['default']
|
||||||
|
TestCompare: typeof import('./src/views/Upscale/TestCompare.vue')['default']
|
||||||
Textarea: typeof import('./src/components/MyUI/Textarea/Textarea.vue')['default']
|
Textarea: typeof import('./src/components/MyUI/Textarea/Textarea.vue')['default']
|
||||||
TextScroll: typeof import('./src/components/MyUI/TextScroll/TextScroll.vue')['default']
|
TextScroll: typeof import('./src/components/MyUI/TextScroll/TextScroll.vue')['default']
|
||||||
ThingAlbum: typeof import('./src/views/Album/ThingAlbum/ThingAlbum.vue')['default']
|
ThingAlbum: typeof import('./src/views/Album/ThingAlbum/ThingAlbum.vue')['default']
|
||||||
|
@@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<link rel="icon" type="image/svg+xml" href="/logo.svg"/>
|
<link rel="icon" type="image/svg+xml" href="/logo.svg"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=yes"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"/>
|
||||||
<title><%- title %></title>
|
<title><%- title %></title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
@@ -47,7 +47,7 @@
|
|||||||
"qrcode": "^1",
|
"qrcode": "^1",
|
||||||
"seedrandom": "^3.0.5",
|
"seedrandom": "^3.0.5",
|
||||||
"swiper": "^11.1.15",
|
"swiper": "^11.1.15",
|
||||||
"unplugin-auto-import": "^0.18.6",
|
"unplugin-auto-import": "^0.19.0",
|
||||||
"vite-plugin-compression": "^0.5.1",
|
"vite-plugin-compression": "^0.5.1",
|
||||||
"vite-plugin-html": "^3.2.2",
|
"vite-plugin-html": "^3.2.2",
|
||||||
"vite-plugin-node-polyfills": "^0.22.0",
|
"vite-plugin-node-polyfills": "^0.22.0",
|
||||||
@@ -62,13 +62,13 @@
|
|||||||
"@vitejs/plugin-vue": "^5.2.1",
|
"@vitejs/plugin-vue": "^5.2.1",
|
||||||
"eslint-plugin-vue": "^9.32.0",
|
"eslint-plugin-vue": "^9.32.0",
|
||||||
"globals": "^15.13.0",
|
"globals": "^15.13.0",
|
||||||
"sass": "^1.82.0",
|
"sass": "^1.83.0",
|
||||||
"typescript": "^5.7.2",
|
"typescript": "^5.7.2",
|
||||||
"typescript-eslint": "^8.18.0",
|
"typescript-eslint": "^8.18.0",
|
||||||
"unplugin-vue-components": "^0.27.5",
|
"unplugin-vue-components": "^0.27.5",
|
||||||
"vite": "^6.0.3",
|
"vite": "^6.0.3",
|
||||||
"vite-plugin-bundle-obfuscator": "1.4.0",
|
"vite-plugin-bundle-obfuscator": "1.4.0",
|
||||||
"vite-plugin-chunk-split": "^0.5.0",
|
"vite-plugin-chunk-split": "^0.5.0",
|
||||||
"vue-tsc": "^2.1.10"
|
"vue-tsc": "https://pkg.pr.new/vuejs/language-tools/vue-tsc@3fb59af"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@@ -1,459 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import anime from 'animejs/lib/anime.es.js';
|
|
||||||
|
|
||||||
const planesCard = anime.timeline({
|
|
||||||
direction: 'forwards',
|
|
||||||
loop: true
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
planesCard.add({
|
|
||||||
targets: '#card2 .card_text',
|
|
||||||
scaleX: [0, 1],
|
|
||||||
delay: function (_target, index) {
|
|
||||||
return index * 300;
|
|
||||||
},
|
|
||||||
easing: [0.17, 0.17, 0.35, 1.00],
|
|
||||||
duration: 300,
|
|
||||||
offset: 0
|
|
||||||
}).add({
|
|
||||||
targets: '#plane1',
|
|
||||||
opacity: {
|
|
||||||
value: [0, 1],
|
|
||||||
duration: 100,
|
|
||||||
delay: 84
|
|
||||||
},
|
|
||||||
|
|
||||||
translateX: {
|
|
||||||
value: ['-199', '+888']
|
|
||||||
},
|
|
||||||
|
|
||||||
translateY: {
|
|
||||||
value: ['-36', '+404']
|
|
||||||
},
|
|
||||||
|
|
||||||
rotate: {
|
|
||||||
value: -12
|
|
||||||
},
|
|
||||||
|
|
||||||
scale: {
|
|
||||||
value: 0,
|
|
||||||
duration: 200,
|
|
||||||
delay: 300
|
|
||||||
},
|
|
||||||
|
|
||||||
easing: [0.17, 0.17, 0.79, 1.00],
|
|
||||||
duration: 541,
|
|
||||||
offset: 250
|
|
||||||
}).add({
|
|
||||||
targets: '#card1',
|
|
||||||
opacity: 0,
|
|
||||||
loop: true,
|
|
||||||
easing: [0.68, 0.00, 0.33, 1.00],
|
|
||||||
duration: 750,
|
|
||||||
offset: 708
|
|
||||||
}).add({
|
|
||||||
targets: '#card3_bg-white',
|
|
||||||
easing: [0.17, 0.11, 0.40, 1.26],
|
|
||||||
duration: 666,
|
|
||||||
offset: 625,
|
|
||||||
scale: [0, 1]
|
|
||||||
}).add({
|
|
||||||
targets: '#cards',
|
|
||||||
easing: [0.68, 0.00, 0.33, 1.00],
|
|
||||||
duration: 750,
|
|
||||||
offset: 708,
|
|
||||||
translateY: ['-=257']
|
|
||||||
}).add({
|
|
||||||
targets: '#card3_icon',
|
|
||||||
translateX: ['+=35', 0],
|
|
||||||
translateY: ['+=35', 0],
|
|
||||||
scale: [0, 1],
|
|
||||||
loop: true,
|
|
||||||
easing: [0.41, 1.9, 0.59, 0.94],
|
|
||||||
duration: 708,
|
|
||||||
offset: 780
|
|
||||||
}).add({
|
|
||||||
targets: '#card3 .card_text',
|
|
||||||
scaleX: [0, 1],
|
|
||||||
delay: function (_target, index) {
|
|
||||||
return index * 300;
|
|
||||||
},
|
|
||||||
easing: [0.17, 0.17, 0.35, 1.00],
|
|
||||||
duration: 300,
|
|
||||||
offset: 989
|
|
||||||
}).add({
|
|
||||||
targets: '#plane2',
|
|
||||||
opacity: {
|
|
||||||
value: [0, 1],
|
|
||||||
duration: 167,
|
|
||||||
delay: 84
|
|
||||||
},
|
|
||||||
|
|
||||||
scaleX: {
|
|
||||||
value: -1,
|
|
||||||
duration: 0
|
|
||||||
},
|
|
||||||
|
|
||||||
translateX: {
|
|
||||||
value: [-1620, -180]
|
|
||||||
},
|
|
||||||
|
|
||||||
translateY: {
|
|
||||||
value: [-78, 320]
|
|
||||||
},
|
|
||||||
|
|
||||||
rotate: {
|
|
||||||
value: -12,
|
|
||||||
duration: 500,
|
|
||||||
delay: 100
|
|
||||||
},
|
|
||||||
|
|
||||||
scale: {
|
|
||||||
value: 0,
|
|
||||||
duration: 250,
|
|
||||||
delay: 285
|
|
||||||
},
|
|
||||||
|
|
||||||
easing: [0.17, 0.17, 0.79, 1.00],
|
|
||||||
duration: 600,
|
|
||||||
offset: 1380
|
|
||||||
}).add({
|
|
||||||
targets: '#card2',
|
|
||||||
opacity: 0,
|
|
||||||
loop: true,
|
|
||||||
easing: [0.68, 0.00, 0.33, 1.00],
|
|
||||||
duration: 750,
|
|
||||||
offset: 1875
|
|
||||||
}).add({
|
|
||||||
targets: '#card4_bg-white',
|
|
||||||
easing: [0.17, 0.11, 0.40, 1.26],
|
|
||||||
duration: 666,
|
|
||||||
offset: 1793,
|
|
||||||
scale: [0, 1]
|
|
||||||
}).add({
|
|
||||||
targets: '#cards',
|
|
||||||
easing: [0.68, 0.00, 0.33, 1.00],
|
|
||||||
duration: 750,
|
|
||||||
offset: 1875,
|
|
||||||
translateY: ['-=257']
|
|
||||||
}).add({
|
|
||||||
targets: '#card4_icon',
|
|
||||||
translateX: ['+=35', 0],
|
|
||||||
translateY: ['+=35', 0],
|
|
||||||
scale: [0, 1],
|
|
||||||
loop: true,
|
|
||||||
easing: [0.41, 1.9, 0.59, 0.94],
|
|
||||||
duration: 708,
|
|
||||||
offset: 1957
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<svg viewBox="0 0 2579 1132" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
||||||
<title>hello@zajno.com</title>
|
|
||||||
<defs>
|
|
||||||
<linearGradient x1="118.314446%" y1="48.8841826%" x2="-30.2984871%" y2="51.1919321%" id="linearGradient-1">
|
|
||||||
<stop stop-color="#7F9BFC" offset="0%"></stop>
|
|
||||||
<stop stop-color="#839FFC" stop-opacity="0.9563" offset="5.509039%"></stop>
|
|
||||||
<stop stop-color="#849FFC" stop-opacity="0.9533" offset="5.884359%"></stop>
|
|
||||||
<stop stop-color="#8AA4FC" stop-opacity="0.8154" offset="23.03%"></stop>
|
|
||||||
<stop stop-color="#9CB1FD" stop-opacity="0.6239" offset="46.86%"></stop>
|
|
||||||
<stop stop-color="#BAC7FD" stop-opacity="0.4019" offset="74.47%"></stop>
|
|
||||||
<stop stop-color="#D3DAFE" stop-opacity="0.2445" offset="94.06%"></stop>
|
|
||||||
<stop stop-color="#F0F0FF" stop-opacity="0" offset="100%"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient x1="50.0334507%" y1="-143.800704%" x2="50.0334507%" y2="63.3151408%" id="linearGradient-2">
|
|
||||||
<stop stop-color="#FFF33B" stop-opacity="0" offset="0%"></stop>
|
|
||||||
<stop stop-color="#FFDE46" stop-opacity="0.1416" offset="15.24%"></stop>
|
|
||||||
<stop stop-color="#FFA764" stop-opacity="0.4337" offset="46.69%"></stop>
|
|
||||||
<stop stop-color="#FF916F" stop-opacity="0.5396" offset="58.08%"></stop>
|
|
||||||
<stop stop-color="#FF5782" offset="100%"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient x1="49.8485923%" y1="72.7804172%" x2="49.8485923%" y2="-43.2541461%" id="linearGradient-3">
|
|
||||||
<stop stop-color="#F7CF83" offset="0%"></stop>
|
|
||||||
<stop stop-color="#FFFFFF" offset="100%"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient x1="50.0154912%" y1="-52.011784%" x2="50.0154912%" y2="71.9581815%" id="linearGradient-4">
|
|
||||||
<stop stop-color="#FDFDFE" offset="0%"></stop>
|
|
||||||
<stop stop-color="#86DD87" offset="100%"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient x1="50.0074976%" y1="99.049164%" x2="50.0074976%" y2="-16.925746%" id="linearGradient-5">
|
|
||||||
<stop stop-color="#FFF33B" stop-opacity="0" offset="0%"></stop>
|
|
||||||
<stop stop-color="#FF57B0" offset="100%"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
<rect id="path-6" x="0" y="0" width="615" height="851"></rect>
|
|
||||||
<linearGradient x1="50.0327206%" y1="79.0175551%" x2="50.0327206%" y2="-44.8815257%" id="linearGradient-8">
|
|
||||||
<stop stop-color="#FE5E85" offset="21.81%"></stop>
|
|
||||||
<stop stop-color="#E94B96" offset="40.49%"></stop>
|
|
||||||
<stop stop-color="#B21CC1" offset="79.01%"></stop>
|
|
||||||
<stop stop-color="#9100DB" offset="99.97%"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient x1="50.0327206%" y1="79.0175551%" x2="50.0327206%" y2="-57.9189338%" id="linearGradient-9">
|
|
||||||
<stop stop-color="#FE5E85" offset="21.81%"></stop>
|
|
||||||
<stop stop-color="#E94B96" offset="40.49%"></stop>
|
|
||||||
<stop stop-color="#B21CC1" offset="79.01%"></stop>
|
|
||||||
<stop stop-color="#9100DB" offset="99.97%"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient x1="50.0078125%" y1="-14.3794118%" x2="50.0078125%" y2="84.3210478%" id="linearGradient-10">
|
|
||||||
<stop stop-color="#0025FF" offset="0%"></stop>
|
|
||||||
<stop stop-color="#00FFD7" offset="100%"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient x1="92.6689445%" y1="127.3586%" x2="11.4142528%" y2="14.4674737%" id="linearGradient-11">
|
|
||||||
<stop stop-color="#0025FF" offset="3.619557%"></stop>
|
|
||||||
<stop stop-color="#0025FF" stop-opacity="0.8587" offset="16.82%"></stop>
|
|
||||||
<stop stop-color="#0025FF" stop-opacity="0" offset="97.01%"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient x1="114.073989%" y1="198.165562%" x2="-10.8913485%" y2="-38.4110424%" id="linearGradient-12">
|
|
||||||
<stop stop-color="#7F9BFC" offset="0%"></stop>
|
|
||||||
<stop stop-color="#C9D3FE" offset="62.89%"></stop>
|
|
||||||
<stop stop-color="#F0F0FF" offset="99.91%"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient x1="140.812842%" y1="110.913212%" x2="45.1242839%" y2="33.8259447%" id="linearGradient-13">
|
|
||||||
<stop stop-color="#CFCFF6" offset="0%"></stop>
|
|
||||||
<stop stop-color="#F0F0FF" offset="99.91%"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient x1="101.805599%" y1="153.92944%" x2="40.0355701%" y2="46.5605817%" id="linearGradient-14">
|
|
||||||
<stop stop-color="#CFCFF6" offset="0%"></stop>
|
|
||||||
<stop stop-color="#F0F0FF" offset="99.91%"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
<g id="planes" transform="translate(-6.000000, -47.000000)">
|
|
||||||
<g id="bg" transform="translate(1013.000000, 123.000000)" fill-rule="nonzero">
|
|
||||||
<g id="board-header">
|
|
||||||
<path
|
|
||||||
d="M615.5,94.5 L0.8,94.5 L0.8,12.8 C0.8,5.9 6.4,0.3 13.3,0.3 L603,0.3 C609.9,0.3 615.5,5.9 615.5,12.8 L615.5,94.5 Z"
|
|
||||||
id="header-bg" fill="url(#linearGradient-1)"></path>
|
|
||||||
<g id="buttons" transform="translate(38.000000, 33.000000)">
|
|
||||||
<circle id="Oval" fill="url(#linearGradient-2)" cx="14.7" cy="14.3" r="14.2"></circle>
|
|
||||||
<circle id="Oval" fill="url(#linearGradient-3)" cx="63.2" cy="14.3" r="14.2"></circle>
|
|
||||||
<circle id="Oval" fill="url(#linearGradient-4)" cx="111.6" cy="14.3" r="14.2"></circle>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<path
|
|
||||||
d="M603.586617,1065 L12.5121604,1065 C5.60544785,1065 -5.68434189e-14,1059.4 -5.68434189e-14,1052.5 L-5.68434189e-14,120 L616,120 L615.99868,1052.6 C616.098777,1059.4 610.493329,1065 603.586617,1065 Z"
|
|
||||||
id="board-bg" fill="url(#linearGradient-5)"></path>
|
|
||||||
</g>
|
|
||||||
<g id="cards-wrap" transform="translate(1013.000000, 243.000000)" mask="url(#mask-7)">
|
|
||||||
<mask id="mask-7" fill="white">
|
|
||||||
<use xlink:href="#path-6"></use>
|
|
||||||
</mask>
|
|
||||||
<g id="Rectangle"></g>
|
|
||||||
<g id="cards" style="transform: translateY(-248.817px);">
|
|
||||||
<g id="card1" style="opacity: 0.0318414;">
|
|
||||||
<g transform="translate(38.000000, 97.000000)">
|
|
||||||
<g id="card1_bg">
|
|
||||||
<g id="Group" opacity="0.15">
|
|
||||||
<g></g>
|
|
||||||
</g>
|
|
||||||
<g id="Group"></g>
|
|
||||||
<path
|
|
||||||
d="M519.7,159.304348 L20.2,159.304348 C9.1,159.304348 0,150.360248 0,139.229814 L0,20.7701863 C0,9.73913043 9,0.695652174 20.2,0.695652174 L519.7,0.695652174 C530.8,0.695652174 539.9,9.63975155 539.9,20.7701863 L539.9,139.229814 C539.9,150.360248 530.8,159.304348 519.7,159.304348 Z"
|
|
||||||
fill="#FCDFCE" fill-rule="nonzero"></path>
|
|
||||||
<path id="card1_bg-white"
|
|
||||||
d="M519.796259,0.695652174 L20.2037414,0.695652174 C9.1016855,0.695652174 0,9.66216784 0,20.8204985 L0,139.577017 C0,150.63572 9.00166698,159.701863 20.2037414,159.701863 L519.796259,159.701863 C530.898315,159.701863 540,150.735348 540,139.577017 L540,20.8204985 C540,9.76179579 530.898315,0.695652174 519.796259,0.695652174 Z"
|
|
||||||
fill="#FFFFFF" fill-rule="nonzero"></path>
|
|
||||||
</g>
|
|
||||||
<g id="card1_text" opacity="0.25000" transform="translate(191.000000, 30.00000)">
|
|
||||||
<rect class="card_text" x="30" y="0" width="270" height="16" rx="8" fill="#7F9BFC"
|
|
||||||
fill-rule="nonzero"></rect>
|
|
||||||
<rect class="card_text" x="0" y="30" width="303" height="16" rx="8" fill="#7F9BFC"
|
|
||||||
fill-rule="nonzero"></rect>
|
|
||||||
<rect class="card_text" x="0" y="56" width="303" height="16" rx="8" fill="#7F9BFC"
|
|
||||||
fill-rule="nonzero"></rect>
|
|
||||||
<rect class="card_text" x="0" y="82" width="122" height="16" rx="8" fill="#7F9BFC"
|
|
||||||
fill-rule="nonzero"></rect>
|
|
||||||
</g>
|
|
||||||
<g id="card1-icon-wrap" transform="translate(45.000000, 25.838509)">
|
|
||||||
<g id="card1_icon">
|
|
||||||
<g id="Group" fill-rule="nonzero">
|
|
||||||
<ellipse id="Oval" fill="url(#linearGradient-8)" cx="54.8" cy="54.1614907" rx="54.4"
|
|
||||||
ry="54.0621118"></ellipse>
|
|
||||||
<g transform="translate(5.000000, 16.894410)" fill="#FFFFFF">
|
|
||||||
<path
|
|
||||||
d="M81.6,30.5093168 C77.9,25.9378882 70.8,25.8385093 67,30.5093168 L45.8,56.3478261 L28.2,43.6273292 C24.6,41.0434783 19.6,41.3416149 16.3,44.3229814 L-5.68434189e-14,59.2298137 C8.5,78.2111801 27.6,91.4285714 49.8,91.4285714 C73.7,91.4285714 94,76.1242236 101.3,54.8571429 L81.6,30.5093168 Z"></path>
|
|
||||||
<ellipse id="Oval" cx="37.7" cy="8.2484472" rx="7.5" ry="7.45341615"></ellipse>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<ellipse id="Oval" fill="url(#linearGradient-9)" fill-rule="nonzero" opacity="0.2" cx="54.8"
|
|
||||||
cy="54.1614907" rx="54.4" ry="54.0621118"></ellipse>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g id="card2" style="opacity: 1;">
|
|
||||||
<g transform="translate(38.000000, 354.000000)">
|
|
||||||
<g id="card2_bg">
|
|
||||||
<path
|
|
||||||
d="M519.796259,159.304348 L20.2037414,159.304348 C9.1016855,159.304348 0,150.337832 0,139.179502 L0,20.4229829 C0,9.36428027 9.00166698,0.298136646 20.2037414,0.298136646 L519.796259,0.298136646 C530.898315,0.298136646 540,9.26465231 540,20.4229829 L540,139.179502 C540,150.238204 530.898315,159.304348 519.796259,159.304348 Z"
|
|
||||||
fill="#FCDFCE" fill-rule="nonzero"></path>
|
|
||||||
<path id="card2_bg-white"
|
|
||||||
d="M519.796259,159.304348 L20.2037414,159.304348 C9.1016855,159.304348 0,150.337832 0,139.179502 L0,20.4229829 C0,9.36428027 9.00166698,0.298136646 20.2037414,0.298136646 L519.796259,0.298136646 C530.898315,0.298136646 540,9.26465231 540,20.4229829 L540,139.179502 C540,150.238204 530.898315,159.304348 519.796259,159.304348 Z"
|
|
||||||
fill="#FFFFFF" fill-rule="nonzero"></path>
|
|
||||||
</g>
|
|
||||||
<g id="card2-icon-wrap" transform="translate(42.000000, 24.844720)">
|
|
||||||
<g id="card2_icon">
|
|
||||||
<ellipse id="Oval" fill="url(#linearGradient-10)" fill-rule="nonzero" cx="54.8" cy="54.757764"
|
|
||||||
rx="54.4" ry="54.0621118"></ellipse>
|
|
||||||
<g id="Group" transform="translate(5.000000, 17.888199)" fill="#FFFFFF" fill-rule="nonzero">
|
|
||||||
<path
|
|
||||||
d="M81.6,30.1118012 C77.9,25.5403727 70.8,25.4409938 67,30.1118012 L45.8,55.9503106 L28.2,43.2298137 C24.6,40.6459627 19.6,40.9440994 16.3,43.9254658 L-5.68434189e-14,58.8322981 C8.5,77.8136646 27.6,91.0310559 49.8,91.0310559 C73.7,91.0310559 94,75.7267081 101.3,54.4596273 L81.6,30.1118012 Z"></path>
|
|
||||||
<ellipse id="Oval" cx="37.7" cy="7.85093168" rx="7.5" ry="7.45341615"></ellipse>
|
|
||||||
</g>
|
|
||||||
<ellipse id="Oval" fill="url(#linearGradient-10)" fill-rule="nonzero" opacity="0.2" cx="54.8"
|
|
||||||
cy="54.757764" rx="54.4" ry="54.0621118"></ellipse>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g id="card2_text" opacity="0.25000" transform="translate(191.000000, 30.00000)">
|
|
||||||
<rect class="card_text" x="30" y="0" width="270" height="16" rx="8" fill="#7F9BFC" fill-rule="nonzero"
|
|
||||||
style="transform: scaleX(1);"></rect>
|
|
||||||
<rect class="card_text" x="0" y="30" width="303" height="16" rx="8" fill="#7F9BFC" fill-rule="nonzero"
|
|
||||||
style="transform: scaleX(1);"></rect>
|
|
||||||
<rect class="card_text" x="0" y="56" width="303" height="16" rx="8" fill="#7F9BFC" fill-rule="nonzero"
|
|
||||||
style="transform: scaleX(1);"></rect>
|
|
||||||
<rect class="card_text" x="0" y="82" width="122" height="16" rx="8" fill="#7F9BFC" fill-rule="nonzero"
|
|
||||||
style="transform: scaleX(1);"></rect>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g id="card3">
|
|
||||||
<g transform="translate(38.000000, 611.000000)">
|
|
||||||
<g id="card3_bg">
|
|
||||||
<path
|
|
||||||
d="M519.796259,159.701863 L20.2037414,159.701863 C9.1016855,159.701863 0,150.735348 0,139.577017 L0,20.8204985 C0,9.76179579 9.00166698,0.695652174 20.2037414,0.695652174 L519.796259,0.695652174 C530.898315,0.695652174 540,9.66216784 540,20.8204985 L540,139.577017 C540,150.735348 530.898315,159.701863 519.796259,159.701863 Z"
|
|
||||||
fill="#FCDFCE" fill-rule="nonzero"></path>
|
|
||||||
<path id="card3_bg-white"
|
|
||||||
d="M519.796259,0.695652174 L20.2037414,0.695652174 C9.1016855,0.695652174 0,9.66216784 0,20.8204985 L0,139.577017 C0,150.63572 9.00166698,159.701863 20.2037414,159.701863 L519.796259,159.701863 C530.898315,159.701863 540,150.735348 540,139.577017 L540,20.8204985 C540,9.76179579 530.898315,0.695652174 519.796259,0.695652174 Z"
|
|
||||||
fill="#FFFFFF" fill-rule="nonzero" style="transform: scale(1);"></path>
|
|
||||||
</g>
|
|
||||||
<g id="card3_text" opacity="0.25000" transform="translate(191.000000, 30.00000)">
|
|
||||||
<rect class="card_text" x="30" y="0" width="270" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
|
|
||||||
fill-rule="nonzero" style="transform: scaleX(1);"></rect>
|
|
||||||
<rect class="card_text" x="0" y="30" width="303" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
|
|
||||||
fill-rule="nonzero" style="transform: scaleX(0.170117);"></rect>
|
|
||||||
<rect class="card_text" x="0" y="56" width="303" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
|
|
||||||
fill-rule="nonzero" style="transform: scaleX(0);"></rect>
|
|
||||||
<rect class="card_text" x="0" y="82" width="122" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
|
|
||||||
fill-rule="nonzero" style="transform: scaleX(0);"></rect>
|
|
||||||
</g>
|
|
||||||
<g id="card3-icon-wrap" transform="translate(45.000000, 25.838509)">
|
|
||||||
<g id="card3_icon" transform="scale(0)"
|
|
||||||
style="transform: translateX(-2.21467px) translateY(-2.21467px) scale(1.06328);">
|
|
||||||
<g id="Group" fill-rule="nonzero">
|
|
||||||
<ellipse id="Oval" fill="url(#linearGradient-8)" cx="54.8" cy="54.1614907" rx="54.4"
|
|
||||||
ry="54.0621118"></ellipse>
|
|
||||||
<g transform="translate(5.000000, 16.894410)" fill="#FFFFFF">
|
|
||||||
<path
|
|
||||||
d="M81.6,30.5093168 C77.9,25.9378882 70.8,25.8385093 67,30.5093168 L45.8,56.3478261 L28.2,43.6273292 C24.6,41.0434783 19.6,41.3416149 16.3,44.3229814 L-5.68434189e-14,59.2298137 C8.5,78.2111801 27.6,91.4285714 49.8,91.4285714 C73.7,91.4285714 94,76.1242236 101.3,54.8571429 L81.6,30.5093168 Z"></path>
|
|
||||||
<ellipse id="Oval" cx="37.7" cy="8.2484472" rx="7.5" ry="7.45341615"></ellipse>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<ellipse id="Oval" fill="url(#linearGradient-9)" fill-rule="nonzero" opacity="0.2" cx="54.8"
|
|
||||||
cy="54.1614907" rx="54.4" ry="54.0621118"></ellipse>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g id="card4">
|
|
||||||
<g transform="translate(38.000000, 868.000000)">
|
|
||||||
<g id="card4_bg">
|
|
||||||
<path
|
|
||||||
d="M519.796259,160 L20.2037414,160 C9.1016855,160 0,150.977444 0,139.749373 L0,20.2506266 C0,9.12280702 9.00166698,1.58206781e-13 20.2037414,1.58206781e-13 L519.796259,1.58206781e-13 C530.898315,1.58206781e-13 540,9.02255639 540,20.2506266 L540,139.749373 C540,150.877193 530.898315,160 519.796259,160 Z"
|
|
||||||
fill="#FCDFCE" fill-rule="nonzero"></path>
|
|
||||||
<path id="card4_bg-white"
|
|
||||||
d="M519.796259,159.006211 L20.2037414,159.006211 C9.1016855,159.006211 0,150.039696 0,138.881365 L0,20.1248463 C0,9.06614362 9.00166698,1.58206781e-13 20.2037414,1.58206781e-13 L519.796259,1.58206781e-13 C530.898315,1.58206781e-13 540,8.96651567 540,20.1248463 L540,138.881365 C540,149.940068 530.898315,159.006211 519.796259,159.006211 Z"
|
|
||||||
fill="#FFFFFF" fill-rule="nonzero" style="transform: scale(0);"></path>
|
|
||||||
</g>
|
|
||||||
<g id="card4-icon-wrap" transform="translate(42.000000, 25.000000)">
|
|
||||||
<g id="card4_icon" transform="scale(0)" style="transform: translateX(35px) translateY(35px) scale(0);">
|
|
||||||
<circle id="Oval" fill="url(#linearGradient-10)" fill-rule="nonzero" cx="54.8" cy="55.1"
|
|
||||||
r="54.4"></circle>
|
|
||||||
<g id="Group" transform="translate(5.000000, 18.000000)" fill="#FFFFFF" fill-rule="nonzero">
|
|
||||||
<path
|
|
||||||
d="M81.6,30.3 C77.9,25.7 70.8,25.6 67,30.3 L45.8,56.3 L28.2,43.5 C24.6,40.9 19.6,41.2 16.3,44.2 L-5.68434189e-14,59.2 C8.5,78.3 27.6,91.6 49.8,91.6 C73.7,91.6 94,76.2 101.3,54.8 L81.6,30.3 Z"></path>
|
|
||||||
<circle id="Oval" cx="37.7" cy="7.9" r="7.5"></circle>
|
|
||||||
</g>
|
|
||||||
<circle id="Oval" fill="url(#linearGradient-10)" fill-rule="nonzero" opacity="0.2" cx="54.8" cy="55.1"
|
|
||||||
r="54.4"></circle>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g id="card4_text" opacity="0.25000" transform="translate(191.000000, 30.00000)">
|
|
||||||
<rect class="card_text" x="30" y="0" width="270" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
|
|
||||||
fill-rule="nonzero"></rect>
|
|
||||||
<rect class="card_text" x="0" y="30" width="303" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
|
|
||||||
fill-rule="nonzero"></rect>
|
|
||||||
<rect class="card_text" x="0" y="56" width="303" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
|
|
||||||
fill-rule="nonzero"></rect>
|
|
||||||
<rect class="card_text" x="0" y="82" width="122" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
|
|
||||||
fill-rule="nonzero"></rect>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g id="card5">
|
|
||||||
<g transform="translate(38.000000, 1125.000000)">
|
|
||||||
<g id="card5_bg">
|
|
||||||
<path
|
|
||||||
d="M519.796259,160 L20.2037414,160 C9.1016855,160 0,150.977444 0,139.749373 L0,20.2506266 C0,9.12280702 9.00166698,1.58206781e-13 20.2037414,1.58206781e-13 L519.796259,1.58206781e-13 C530.898315,1.58206781e-13 540,9.02255639 540,20.2506266 L540,139.749373 C540,150.877193 530.898315,160 519.796259,160 Z"
|
|
||||||
fill="#FCDFCE" fill-rule="nonzero"></path>
|
|
||||||
<path id="card5_bg-white"
|
|
||||||
d="M519.796259,159.006211 L20.2037414,159.006211 C9.1016855,159.006211 0,150.039696 0,138.881365 L0,20.1248463 C0,9.06614362 9.00166698,1.58206781e-13 20.2037414,1.58206781e-13 L519.796259,1.58206781e-13 C530.898315,1.58206781e-13 540,8.96651567 540,20.1248463 L540,138.881365 C540,149.940068 530.898315,159.006211 519.796259,159.006211 Z"
|
|
||||||
fill="#FFFFFF" fill-rule="nonzero"></path>
|
|
||||||
</g>
|
|
||||||
<g id="card5-icon-wrap" transform="translate(42.000000, 25.000000)">
|
|
||||||
<g id="card5_icon" transform="scale(0)">
|
|
||||||
<circle id="Oval" fill="url(#linearGradient-10)" fill-rule="nonzero" cx="54.8" cy="55.1"
|
|
||||||
r="54.4"></circle>
|
|
||||||
<g id="Group" transform="translate(5.000000, 18.000000)" fill="#FFFFFF" fill-rule="nonzero">
|
|
||||||
<path
|
|
||||||
d="M81.6,30.3 C77.9,25.7 70.8,25.6 67,30.3 L45.8,56.3 L28.2,43.5 C24.6,40.9 19.6,41.2 16.3,44.2 L-5.68434189e-14,59.2 C8.5,78.3 27.6,91.6 49.8,91.6 C73.7,91.6 94,76.2 101.3,54.8 L81.6,30.3 Z"></path>
|
|
||||||
<circle id="Oval" cx="37.7" cy="7.9" r="7.5"></circle>
|
|
||||||
</g>
|
|
||||||
<circle id="Oval" fill="url(#linearGradient-10)" fill-rule="nonzero" opacity="0.2" cx="54.8" cy="55.1"
|
|
||||||
r="54.4"></circle>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g id="card5_text" opacity="0.25000" transform="translate(191.000000, 30.00000)">
|
|
||||||
<rect class="card_text" x="30" y="0" width="270" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
|
|
||||||
fill-rule="nonzero"></rect>
|
|
||||||
<rect class="card_text" x="0" y="30" width="303" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
|
|
||||||
fill-rule="nonzero"></rect>
|
|
||||||
<rect class="card_text" x="0" y="56" width="303" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
|
|
||||||
fill-rule="nonzero"></rect>
|
|
||||||
<rect class="card_text" x="0" y="82" width="122" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
|
|
||||||
fill-rule="nonzero"></rect>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g id="plane2-wrap" transform="translate(320.000000, 30.00000)">
|
|
||||||
<g id="plane2" fill-rule="nonzero"
|
|
||||||
style="opacity: 0; transform: scaleX(-1) translateX(-1620px) translateY(-78px) rotate(0deg) scale(1);">
|
|
||||||
<path
|
|
||||||
d="M832.927808,725.921924 L342.327808,31.8219235 C250.027808,-98.7780765 -111.072192,339.321924 46.3278083,403.821924 L832.927808,725.921924 Z"
|
|
||||||
fill="url(#linearGradient-11)" opacity="0.0458220109"
|
|
||||||
transform="translate(420.019183, 366.784851) rotate(1.000000) translate(-420.019183, -366.784851) "></path>
|
|
||||||
<polygon fill="url(#linearGradient-12)" points="832.3 734.9 680.2 679.8 697.9 616"></polygon>
|
|
||||||
<polygon fill="url(#linearGradient-13)" points="832.3 734.9 697.9 616 738.8 591.3"></polygon>
|
|
||||||
<polygon fill="url(#linearGradient-14)" points="832.3 734.9 624.1 660.4 671.7 631.8"></polygon>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
z
|
|
||||||
<g id="plane1-wrap" transform="translate(-320.000000, -30.00000)">
|
|
||||||
<g id="plane1" fill-rule="nonzero"
|
|
||||||
style="opacity: 1; transform: translateX(888px) translateY(404px) rotate(-12deg) scale(0);">
|
|
||||||
<path d="M826.3,718.9 L335.7,24.8 C243.4,-105.8 -117.7,332.3 39.7,396.8 L826.3,718.9 Z"
|
|
||||||
fill="url(#linearGradient-11)" opacity="0.0536345109"></path>
|
|
||||||
<polygon fill="url(#linearGradient-12)" points="826.3 718.9 674.2 663.8 691.9 600"></polygon>
|
|
||||||
<polygon fill="url(#linearGradient-13)" points="826.3 718.9 691.9 600 732.8 575.3"></polygon>
|
|
||||||
<polygon fill="url(#linearGradient-14)" points="826.3 718.9 618.1 644.4 665.7 615.8"></polygon>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss" src="./index.scss">
|
|
||||||
|
|
||||||
</style>
|
|
@@ -1,24 +0,0 @@
|
|||||||
svg {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#card1_bg-white, #card2_bg-white, #card3_bg-white, #card4_bg-white {
|
|
||||||
transform-origin: 2% 8%;
|
|
||||||
transform-style: preserve-3D;
|
|
||||||
}
|
|
||||||
|
|
||||||
#card3_bg-white,
|
|
||||||
#card4_bg-white,
|
|
||||||
#card5_bg-white {
|
|
||||||
transform: scale(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
#plane1 {
|
|
||||||
transform-origin: 620px 580px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#plane2 {
|
|
||||||
transform: scaleX(-1) translate(-1500px, -150px);
|
|
||||||
transform-origin: 500px 650px;
|
|
||||||
}
|
|
@@ -1,373 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="center">
|
|
||||||
<h1>Daily UI 002: Credit Card Checkout</h1>
|
|
||||||
<div class="wrapper">
|
|
||||||
<button class="checkout">Checkout</button>
|
|
||||||
<div class="card-wrap">
|
|
||||||
<div class="card">
|
|
||||||
<!--?xml version="1.0" encoding="utf-8"?-->
|
|
||||||
<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
||||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
|
||||||
y="0px" viewBox="0 0 216.3 234.1" enable-background="new 0 0 216.3 234.1" xml:space="preserve">
|
|
||||||
<g id="shadow">
|
|
||||||
<g>
|
|
||||||
<path fill="#5A488F" d="M178.1,211.7c14.8-2.1,23.9-5.1,23.9-8.3c0-6.6-37.8-11.9-84.4-11.9c-46.6,0-84.4,5.3-84.4,11.9
|
|
||||||
c0,5.1,23,9.5,55.3,11.2c-10.5,2.1-16.7,4.7-16.7,7.6c0,6.6,32.4,11.9,72.3,11.9c39.9,0,72.3-5.3,72.3-11.9
|
|
||||||
C216.3,217.7,200.8,213.7,178.1,211.7z"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g id="back_hand">
|
|
||||||
<g>
|
|
||||||
<path fill="#FFFFFF" d="M43.4,127.7c-2.6-4.5-3.7-9-1.9-17.2c0.4-1.6-1-3.1-2.6-2.8c-6.9,1.2-6.2,14.1-6.2,14.1H4.8
|
|
||||||
c-2,0-3.6,1.6-3.6,3.6v0.1c0,2,1.6,3.6,3.6,3.6h10.2v20.5c0,0.5,0.4,1,1,1H18h4.5h8.8c7.5,0,14-5.6,14.7-13.1
|
|
||||||
C46.4,133.8,45.3,130.4,43.4,127.7z"></path>
|
|
||||||
<g>
|
|
||||||
<path fill="#DAEDF7" d="M32.7,125.9h-3.4c-2.3,0-4-1.9-3.8-4.2v0h7.2L32.7,125.9z"></path>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<path fill="#665AA7" d="M18,130.2H4.8c-2.6,0-4.8-2.1-4.8-4.8c0-2.7,2.1-4.8,4.8-4.8h27.9c0.6,0,1.1,0.5,1.1,1.1
|
|
||||||
s-0.5,1.1-1.1,1.1H4.8c-1.4,0-2.5,1.1-2.5,2.5c0,1.4,1.1,2.6,2.5,2.6H18c0.6,0,1.1,0.5,1.1,1.1S18.6,130.2,18,130.2z"></path>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<path fill="#DAEDF7" d="M29.3,130.9c8.3-0.6,11.2,16.6,2,19.1c-3.3,0.6-2.8-0.8-2.8-0.8l0.6-2.6c0,0-2.7-2.4,0-7.4
|
|
||||||
C27.9,136.2,29.3,133.6,29.3,130.9z"></path>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<path fill="#665AA7" d="M31.7,151.6H18c-0.6,0-1.1-0.5-1.1-1.1s0.5-1.1,1.1-1.1h13.7c7.3,0,13.3-5.9,13.3-13.3
|
|
||||||
c0-2.8-0.9-5.5-2.5-7.7c0,0,0-0.1-0.1-0.1c-2.6-4.4-4-9.2-2-18.1c0.1-0.4,0-0.8-0.3-1.1c-0.3-0.3-0.7-0.4-1-0.4
|
|
||||||
c-3.6,0.6-5.5,7-5.3,17.1c0,0.6-0.5,1.1-1.1,1.2c-0.6,0-1.1-0.5-1.2-1.1c-0.3-11.7,2.3-18.6,7.2-19.4c1.1-0.2,2.2,0.2,3,1
|
|
||||||
c0.8,0.8,1.1,2,0.9,3.2c-1.8,8.1-0.7,12.3,1.7,16.4c1.9,2.7,2.9,5.8,2.9,9C47.2,144.7,40.3,151.6,31.7,151.6z"></path>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<path fill="#665AA7" d="M26.1,137.3h-8.5c-2.4,0-4.3-1.9-4.3-4.3v-0.8c0-2.4,1.9-4.3,4.3-4.3h8.5c2.4,0,4.3,1.9,4.3,4.3v0.8
|
|
||||||
C30.4,135.4,28.5,137.3,26.1,137.3z M17.6,130.2c-1.1,0-2.1,0.9-2.1,2.1v0.8c0,1.1,0.9,2.1,2.1,2.1h8.5c1.1,0,2.1-0.9,2.1-2.1
|
|
||||||
v-0.8c0-1.1-0.9-2.1-2.1-2.1H17.6z"></path>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<path fill="#665AA7" d="M26.1,144.5h-8.5c-2.4,0-4.3-1.9-4.3-4.3v-0.8c0-2.4,1.9-4.3,4.3-4.3h8.5c2.4,0,4.3,1.9,4.3,4.3v0.8
|
|
||||||
C30.4,142.5,28.5,144.5,26.1,144.5z M17.6,137.3c-1.1,0-2.1,0.9-2.1,2.1v0.8c0,1.1,0.9,2.1,2.1,2.1h8.5c1.1,0,2.1-0.9,2.1-2.1
|
|
||||||
v-0.8c0-1.1-0.9-2.1-2.1-2.1H17.6z"></path>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<path fill="#665AA7" d="M26.1,151.6h-8.5c-2.4,0-4.3-1.9-4.3-4.3v-0.8c0-2.4,1.9-4.3,4.3-4.3h8.5c2.4,0,4.3,1.9,4.3,4.3v0.8
|
|
||||||
C30.4,149.7,28.5,151.6,26.1,151.6z M17.6,144.5c-1.1,0-2.1,0.9-2.1,2.1v0.8c0,1.1,0.9,2.1,2.1,2.1h8.5c1.1,0,2.1-0.9,2.1-2.1
|
|
||||||
v-0.8c0-1.1-0.9-2.1-2.1-2.1H17.6z"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g id="card">
|
|
||||||
<g>
|
|
||||||
<path fill="#E02E92" d="M178.4,203.4H56.8c-4.8,0-8.6-3.9-8.6-8.6V8.6c0-4.8,3.9-8.6,8.6-8.6h121.5c4.8,0,8.6,3.9,8.6,8.6v186.2
|
|
||||||
C187,199.6,183.1,203.4,178.4,203.4z"></path>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<rect x="144" fill="#363284" width="27.9" height="203.4"></rect>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g id="front_hand">
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<path fill="#FFFFFF" d="M132.2,131.7c-2.6-4.5-3.7-9-1.9-17.2c0.4-1.6-1-3.1-2.6-2.8c-6.9,1.1-6.2,14.1-6.2,14.1H93.6
|
|
||||||
c-2,0-3.6,1.6-3.6,3.6v0.1c0,2,1.6,3.6,3.6,3.6H104l0.4,21.4h16.2c7.9,0,14.4-6.4,14.4-14.4C135,137,134,134.1,132.2,131.7z"></path>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<path fill="#DAEDF7" d="M125,125.7c0,0-0.6-2.5,0.8-6.9c0.6-1.9-2-2.9-3.3-0.6c0,0-0.9,1.5-0.9,7.3
|
|
||||||
C124.5,125.7,125,125.7,125,125.7z"></path>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<path fill="#665AA7" d="M120.6,155.6h-13.7c-2.6,0-4.7-2.1-4.7-4.7c0-1.4,0.6-2.7,1.6-3.6c-1-0.9-1.6-2.1-1.6-3.5
|
|
||||||
c0-1.4,0.6-2.7,1.6-3.6c-1-0.9-1.6-2.1-1.6-3.5c0-0.9,0.3-1.8,0.7-2.5h-9.3c-2.6,0-4.8-2.1-4.8-4.8c0-2.7,2.1-4.8,4.8-4.8h26.7
|
|
||||||
c0-4.1,0.8-13,7.2-14.1c1.1-0.2,2.2,0.2,3,1c0.8,0.8,1.1,2,0.9,3.2c-1.8,8.1-0.7,12.3,1.7,16.4c1.9,2.7,2.9,5.8,2.9,9
|
|
||||||
C136.1,148.7,129.1,155.6,120.6,155.6z M108,147.3c0,0.6-0.5,1.1-1.1,1.1c-1.3,0-2.4,1.1-2.4,2.4c0,1.4,1.1,2.5,2.4,2.5h13.7
|
|
||||||
c7.3,0,13.3-5.9,13.3-13.3c0-2.8-0.9-5.5-2.5-7.7c0,0,0-0.1-0.1-0.1c-2.6-4.4-4-9.2-2-18.1c0.1-0.4,0-0.8-0.3-1.1
|
|
||||||
c-0.3-0.3-0.7-0.4-1-0.4c-4.9,0.8-5.3,9.6-5.3,11.9h1.6c0.6,0,1.1,0.5,1.1,1.1s-0.5,1.1-1.1,1.1H93.6c-1.4,0-2.5,1.1-2.5,2.5
|
|
||||||
c0,1.4,1.1,2.6,2.5,2.6h13.2c0.6,0,1.1,0.5,1.1,1.1s-0.5,1.1-1.1,1.1c-1.3,0-2.4,1.1-2.4,2.4c0,1.2,0.8,2.2,2,2.4
|
|
||||||
c0.5,0.1,0.9,0.6,0.9,1.1l0,0.1c0,0.5-0.4,1-0.9,1.1c-1.1,0.2-2,1.2-2,2.4c0,1.4,1.1,2.5,2.4,2.5
|
|
||||||
C107.5,146.2,108,146.7,108,147.3z"></path>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<path fill="#FFFFFF" d="M88.3,136"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g id="coins">
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<path fill="#ED912F" d="M206.4,216c0,1.5-1,2.7-2.5,3c-5.6,1.1-20.3,3.2-38.2,3.2s-32.6-2-38.2-3.2c-1.4-0.3-2.5-1.6-2.5-3
|
|
||||||
v-4.8h81.4V216z"></path>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<ellipse fill="#F9C441" cx="165.8" cy="211.2" rx="40.7" ry="3.9"></ellipse>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<path fill="#ED912F" d="M206.4,207.8c0,1.5-1,2.7-2.5,3c-5.6,1.1-20.3,3.2-38.2,3.2s-32.6-2-38.2-3.2c-1.4-0.3-2.5-1.6-2.5-3
|
|
||||||
V203h81.4V207.8z"></path>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<ellipse fill="#F9C441" cx="165.8" cy="203" rx="40.7" ry="3.9"></ellipse>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<path fill="#ED912F" d="M213.7,200.5c0,1.5-1,2.7-2.5,3c-5.6,1.1-20.3,3.2-38.2,3.2s-32.6-2-38.2-3.2c-1.4-0.3-2.5-1.6-2.5-3
|
|
||||||
v-4.8h81.4V200.5z"></path>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<ellipse fill="#F9C441" cx="173" cy="195.7" rx="40.7" ry="3.9"></ellipse>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<path fill="#ED912F" d="M196.4,192.8c0,1.5-1,2.7-2.5,3c-5.6,1.1-20.3,3.2-38.2,3.2s-32.6-2-38.2-3.2c-1.4-0.3-2.5-1.6-2.5-3
|
|
||||||
V188h81.4V192.8z"></path>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<ellipse fill="#F9C441" cx="155.7" cy="188" rx="40.7" ry="3.9"></ellipse>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<defs>
|
|
||||||
<path id="SVGID_1_" d="M195.9,192.5V188c0-2.1-18.3-3.9-40.8-3.9s-40.8,1.7-40.8,3.9v4.8c0,1.5,1.3,2.7,2.8,3
|
|
||||||
c2.9,0.6,7.9,1.4,15.1,2v2.7c0,0.1,0.1,0.2,0.1,0.3c-4.6,0.6-7.2,1.4-7.2,2.2v4.8c0,1,0.5,1.9,1.3,2.5c-0.8,0.3-1.3,0.6-1.3,1
|
|
||||||
v4.8c0,1.5,0.9,2.7,2.3,3c5.6,1.1,20.3,3.2,38.1,3.2c17.9,0,32.3-2,38-3.2c1.4-0.3,2.2-1.6,2.2-3v-4.8c0-0.3-0.4-0.7-1.3-1
|
|
||||||
c0.8-0.6,1.3-1.5,1.3-2.5v-3.5c2.6-0.3,3.5-0.6,4.7-0.8c1.4-0.3,2.4-1.6,2.4-3v-4.8C212.7,194.4,205.6,193.2,195.9,192.5z"></path>
|
|
||||||
</defs>
|
|
||||||
<clipPath id="SVGID_2_">
|
|
||||||
<use xlink:href="#SVGID_1_" overflow="visible"></use>
|
|
||||||
</clipPath>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<defs>
|
|
||||||
<path id="SVGID_3_" d="M196.4,192.5V188c0-2.1-18.2-3.9-40.7-3.9c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2,0-0.3,0c-5.6,0-11,0.1-15.8,0.3
|
|
||||||
c3.5-3.5,6.1-6.3,7.6-8.1c0.9-1.1,1-2.8,0.1-3.9l-3-3.8c-1.3-1.7-16.7,8.3-34.3,22.3c-17.6,14-30.8,26.7-29.5,28.3l3,3.8
|
|
||||||
c0.9,1.2,2.5,1.5,3.8,0.8c5.1-2.6,17.9-10.2,31.9-21.3c2.3-1.9,4.6-3.7,6.7-5.5c2,0.2,4.2,0.5,6.6,0.7v2.7c0,0.1,0.1,0.2,0.1,0.3
|
|
||||||
c-4.6,0.6-7.2,1.4-7.2,2.2v4.8c0,1,0.5,1.9,1.3,2.5c-0.8,0.3-1.3,0.6-1.3,1v4.8c0,1.5,0.9,2.7,2.3,3c5.6,1.1,20.3,3.2,38.1,3.2
|
|
||||||
c0.1,0,0.1,0,0.2,0c0.1,0,0.1,0,0.2,0c17.9,0,32.6-2,38.2-3.2c1.4-0.3,2.5-1.6,2.5-3v-4.8c0-0.3-0.4-0.7-1.3-1
|
|
||||||
c0.8-0.6,1.3-1.5,1.3-2.5v-3.5c1.9-0.3,3.6-0.6,4.7-0.8c1.4-0.3,2.5-1.6,2.5-3v-4.8C213.7,194.4,206.8,193.2,196.4,192.5z"></path>
|
|
||||||
</defs>
|
|
||||||
<clipPath id="SVGID_4_">
|
|
||||||
<use xlink:href="#SVGID_3_" overflow="visible"></use>
|
|
||||||
</clipPath>
|
|
||||||
<polygon opacity="0.24" clip-path="url(#SVGID_4_)" fill="#ED1C24" points="146.8,176.4 150.7,184.1 173.6,191.5 173.4,198.3
|
|
||||||
179.8,199.6 179.8,206.6 179.7,221.8 137.1,236.3 97.8,224.2 "></polygon>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<path fill="#ED912F" d="M146.9,172.5c0.9,1.2,0.9,2.8-0.1,3.9c-3.7,4.4-14,15.1-28,26.2c-14,11.1-26.8,18.7-31.9,21.3
|
|
||||||
c-1.3,0.7-2.9,0.3-3.8-0.8l-3-3.8l63.7-50.6L146.9,172.5z"></path>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
|
|
||||||
<ellipse transform="matrix(0.7832 -0.6217 0.6217 0.7832 -96.3369 111.7049)" fill="#F9C441" cx="112"
|
|
||||||
cy="194" rx="40.7" ry="3.9"></ellipse>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g id="mouth">
|
|
||||||
<g>
|
|
||||||
<path fill="#363284" d="M106.3,86.3c-1,0-1.9-0.1-2.9-0.4c-0.6-0.2-0.9-0.8-0.8-1.4c0.2-0.6,0.8-0.9,1.4-0.8
|
|
||||||
c2.2,0.6,4.4,0.3,6.4-0.7c2-1.1,3.4-2.9,4-5.1c0.2-0.6,0.8-0.9,1.4-0.8c0.6,0.2,0.9,0.8,0.8,1.4C115.2,83.2,110.9,86.3,106.3,86.3
|
|
||||||
z"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g id="right_eye_wink">
|
|
||||||
<g display="inline">
|
|
||||||
<path fill="#363284" d="M116.4,40.9c-0.4,0-0.7-0.2-0.9-0.5c-0.3-0.5-0.2-1.2,0.3-1.6c2.6-1.7,9.5-5.2,17.8-0.4
|
|
||||||
c0.5,0.3,0.7,1,0.4,1.5c-0.3,0.5-1,0.7-1.5,0.4c-6.9-4-12.6-1.5-15.4,0.4C116.8,40.9,116.6,40.9,116.4,40.9z"></path>
|
|
||||||
</g>
|
|
||||||
<g display="inline">
|
|
||||||
<path fill="#363284" d="M130.7,55.9c-0.2,0-0.5-0.1-0.7-0.2c-4.1-3.1-11.8-2.8-11.9-2.8c-0.5,0-0.9-0.3-1.1-0.8
|
|
||||||
c-0.2-0.5,0-1,0.4-1.3c0.3-0.2,8.1-5.8,14.3-3.1c0.6,0.3,0.8,0.9,0.6,1.5c-0.3,0.6-0.9,0.8-1.5,0.6c-2.8-1.3-6.3-0.2-8.8,1
|
|
||||||
c2.9,0.3,6.7,1.1,9.4,3.1c0.5,0.4,0.6,1.1,0.2,1.6C131.4,55.8,131.1,55.9,130.7,55.9z"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g id="right_eye">
|
|
||||||
<g>
|
|
||||||
<path fill="#363284" d="M133.5,53.6c-0.6-0.3-1.2-0.6-1.8-0.9c0.1-0.5,0.2-0.9,0.2-1.4c0-4-3.2-7.3-7.3-7.3c-4,0-7.3,3.2-7.3,7.3
|
|
||||||
c0,0.6,0.1,1.2,0.2,1.7c-0.8,0.4-1.4,0.8-1.9,1.1c-0.5,0.3-0.7,1-0.3,1.6c0.2,0.3,0.6,0.5,0.9,0.5c0.2,0,0.4-0.1,0.6-0.2
|
|
||||||
c2.8-1.9,8.5-4.4,15.4-0.4c0.5,0.3,1.2,0.1,1.5-0.4C134.2,54.6,134,54,133.5,53.6z"></path>
|
|
||||||
<g>
|
|
||||||
<path fill="#FFFFFF"
|
|
||||||
d="M123,45.8c0.2,0.2,0.3,0.5,0.1,0.7s-0.4,0.2-0.6,0c-0.2-0.2-0.4-0.4-0.2-0.6S122.8,45.6,123,45.8z"></path>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<path fill="#FFFFFF" d="M122.2,47.5c0,0.6-0.5,0.4-1.1,0.4c-0.6,0-1.1,0.2-1.1-0.4c0-0.6,0.5-1.1,1.1-1.1
|
|
||||||
C121.7,46.5,122.2,46.9,122.2,47.5z"></path>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<path fill="#363284" d="M116.4,39.2c-0.4,0-0.7-0.2-0.9-0.5c-0.3-0.5-0.2-1.2,0.3-1.6c2.6-1.7,9.5-5.2,17.8-0.4
|
|
||||||
c0.5,0.3,0.7,1,0.4,1.5c-0.3,0.5-1,0.7-1.5,0.4c-6.9-4-12.6-1.5-15.4,0.4C116.8,39.2,116.6,39.2,116.4,39.2z"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g id="left_eye">
|
|
||||||
<g>
|
|
||||||
<path fill="#363284" d="M85.5,53.6c-0.6-0.3-1.2-0.6-1.8-0.9c0.1-0.5,0.2-0.9,0.2-1.4c0-4-3.2-7.3-7.3-7.3c-4,0-7.3,3.2-7.3,7.3
|
|
||||||
c0,0.6,0.1,1.2,0.2,1.7c-0.8,0.4-1.4,0.8-1.9,1.1c-0.5,0.3-0.7,1-0.3,1.6c0.2,0.3,0.6,0.5,0.9,0.5c0.2,0,0.4-0.1,0.6-0.2
|
|
||||||
c2.8-1.9,8.5-4.4,15.4-0.4c0.5,0.3,1.2,0.1,1.5-0.4C86.2,54.6,86,54,85.5,53.6z"></path>
|
|
||||||
<g>
|
|
||||||
<path fill="#FFFFFF"
|
|
||||||
d="M75,45.8c0.2,0.2,0.3,0.5,0.1,0.7s-0.4,0.2-0.6,0c-0.2-0.2-0.4-0.4-0.2-0.6S74.8,45.6,75,45.8z"></path>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<path fill="#FFFFFF" d="M74.2,47.5c0,0.6-0.5,0.4-1.1,0.4c-0.6,0-1.1,0.2-1.1-0.4c0-0.6,0.5-1.1,1.1-1.1
|
|
||||||
C73.7,46.5,74.2,46.9,74.2,47.5z"></path>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<path fill="#363284" d="M68.4,39.2c-0.4,0-0.7-0.2-0.9-0.5c-0.3-0.5-0.2-1.2,0.3-1.6c2.6-1.7,9.5-5.2,17.8-0.4
|
|
||||||
c0.5,0.3,0.7,1,0.4,1.5c-0.3,0.5-1,0.7-1.5,0.4c-6.9-4-12.6-1.5-15.4,0.4C68.8,39.2,68.6,39.2,68.4,39.2z"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g id="sunglasses">
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<path fill="#F9C441" d="M35.7,30v1.8c0,0.9,0.9,1.3,1.8,1.3h4.2v6.2c0,15.4,12.4,27.9,27.8,27.9l-0.1,0c12.6,0,23.2-8,26.6-19.6
|
|
||||||
c0.7-2.5,2.7-4.5,5.2-5.1c3.7-0.8,7.2,1.5,8.2,4.9c3.3,11.3,13.2,19.2,25.2,19.8c16.2,0.7,29.1-12.7,29.1-28.9v-5.2h4.1
|
|
||||||
c0.9,0,1.9-0.4,1.9-1.3V30c0-0.9-1-1.9-1.9-1.9H37.5C36.6,28.1,35.7,29.1,35.7,30z"></path>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<defs>
|
|
||||||
<path id="SVGID_5_" d="M67.9,60.1c-11.7,0-22.2-8.9-22.2-20.8v-6.2h111v5.7c0,12.4-9.5,22.9-21.6,22.9l-0.1,0
|
|
||||||
c-9.9-0.2-17.8-6.4-20.6-15.8c-1.5-5.3-6.3-9.1-11.8-9.1c-5.5,0-10.3,2.8-11.9,8.2c-2.8,9.5-11.4,15-21.4,15H67.9z"></path>
|
|
||||||
</defs>
|
|
||||||
<clipPath id="SVGID_6_">
|
|
||||||
<use xlink:href="#SVGID_5_" overflow="visible"></use>
|
|
||||||
</clipPath>
|
|
||||||
<g clip-path="url(#SVGID_6_)">
|
|
||||||
<path fill="#FFFFFF"
|
|
||||||
d="M157.3,23.1h-9.2l-26.3,57h9.2L157.3,23.1z M145,23.1h-2.7l-26.3,57h2.7L145,23.1z"></path>
|
|
||||||
</g>
|
|
||||||
<g clip-path="url(#SVGID_6_)">
|
|
||||||
<path fill="#FFFFFF"
|
|
||||||
d="M88.4,23.1h-9.2l-26.3,57h9.2L88.4,23.1z M76.1,23.1h-2.7l-26.3,57h2.7L76.1,23.1z"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<style scoped lang="scss">
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 1em;
|
|
||||||
font-family: "Montserrat";
|
|
||||||
text-transform: uppercase;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
text-align: center;
|
|
||||||
color: #b6d0e0;
|
|
||||||
position: relative;
|
|
||||||
margin-top: -15px;
|
|
||||||
line-height: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center {
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper {
|
|
||||||
width: 700px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
background: white;
|
|
||||||
overflow: hidden;
|
|
||||||
height: 364px;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-wrap {
|
|
||||||
width: 260px;
|
|
||||||
float: right;
|
|
||||||
background: #665aa7;
|
|
||||||
padding: 50px;
|
|
||||||
transform: scale(1.5) rotate(20deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
transform: scale(0.75) rotate(-20deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width: 150%;
|
|
||||||
position: relative;
|
|
||||||
right: 130px;
|
|
||||||
top: 10px;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg:not(:root) {
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sunglasses {
|
|
||||||
transition: transform 0.15s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkout:hover ~ .card-wrap #sunglasses {
|
|
||||||
transform: translateY(-40px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#right_eye_wink {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkout:active ~ .card-wrap #right_eye {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkout:active ~ .card-wrap #right_eye_wink {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mouth {
|
|
||||||
transition: transform 0.15s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkout:hover ~ .card-wrap #mouth {
|
|
||||||
transform: translateY(-10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#front_hand, #back_hand {
|
|
||||||
transition: transform 0.03s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkout:active ~ .card-wrap #front_hand, .checkout:active ~ .card-wrap #back_hand {
|
|
||||||
transform: translateX(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkout {
|
|
||||||
outline: none;
|
|
||||||
background: #665aa7;
|
|
||||||
border: 0;
|
|
||||||
color: white;
|
|
||||||
position: relative;
|
|
||||||
top: 50%;
|
|
||||||
left: 15%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
padding: 12px 16px;
|
|
||||||
font-family: "Montserrat",serif;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 1.1em;
|
|
||||||
letter-spacing: 0.1em;
|
|
||||||
border-radius: 4px;
|
|
||||||
transition: all 0.1s ease-out;
|
|
||||||
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkout:hover:not(:active) {
|
|
||||||
background: #857bb9;
|
|
||||||
}
|
|
||||||
</style>
|
|
@@ -82,7 +82,7 @@ const horizontal = !vertical.value;
|
|||||||
const containerRef = ref();
|
const containerRef = ref();
|
||||||
const rightImageRef = ref<HTMLImageElement | null>(null);
|
const rightImageRef = ref<HTMLImageElement | null>(null);
|
||||||
const leftImageRef = ref<HTMLImageElement | null>(null);
|
const leftImageRef = ref<HTMLImageElement | null>(null);
|
||||||
const sliderPosition = ref(sliderPositionPercentage.value);
|
const sliderPosition = ref(sliderPositionPercentage.value);
|
||||||
const containerWidth = ref(0);
|
const containerWidth = ref(0);
|
||||||
const containerHeight = ref(0);
|
const containerHeight = ref(0);
|
||||||
const leftImgLoaded = ref(false);
|
const leftImgLoaded = ref(false);
|
||||||
|
@@ -5,7 +5,7 @@ import i18n from "@/locales";
|
|||||||
import {NSFWJS} from "nsfwjs";
|
import {NSFWJS} from "nsfwjs";
|
||||||
import localForage from "localforage";
|
import localForage from "localforage";
|
||||||
import {message} from "ant-design-vue";
|
import {message} from "ant-design-vue";
|
||||||
import Module from "@/workers/imghelper.js";
|
import Module from "@/workers/imghelper.ts";
|
||||||
import Img from "@/workers/image.ts";
|
import Img from "@/workers/image.ts";
|
||||||
|
|
||||||
|
|
||||||
@@ -27,6 +27,11 @@ export const useUpscaleStore = defineStore(
|
|||||||
const canvas = document.createElement('canvas');
|
const canvas = document.createElement('canvas');
|
||||||
const ctx = canvas.getContext('2d', {willReadFrequently: true});
|
const ctx = canvas.getContext('2d', {willReadFrequently: true});
|
||||||
|
|
||||||
|
const imgLoaded = ref<boolean>(false);
|
||||||
|
|
||||||
|
// 处理后的图片
|
||||||
|
const processedImg = ref<HTMLImageElement>(new Image());
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 图片上传前的校验
|
* 图片上传前的校验
|
||||||
* @param file
|
* @param file
|
||||||
@@ -39,32 +44,23 @@ export const useUpscaleStore = defineStore(
|
|||||||
if (!window.FileReader) return false;
|
if (!window.FileReader) return false;
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
reader.readAsDataURL(file); // 文件转换
|
reader.readAsDataURL(file); // 文件转换
|
||||||
return new Promise((resolve, reject) => {
|
reader.onload = async function () {
|
||||||
reader.onload = async function () {
|
image.src = reader.result as string;
|
||||||
image.src = reader.result as string;
|
// 图片 NSFW 检测
|
||||||
|
const nsfw: NSFWJS = await initNSFWJs();
|
||||||
// 等待图片加载完成
|
const isNSFW: boolean = await predictNSFW(nsfw, image);
|
||||||
await new Promise((innerResolve, innerReject) => {
|
if (isNSFW) {
|
||||||
image.onload = innerResolve;
|
message.error(i18n.global.t('comment.illegalImage'));
|
||||||
image.onerror = innerReject;
|
fileList.value.pop();
|
||||||
});
|
|
||||||
// 图片 NSFW 检测
|
|
||||||
const nsfw: NSFWJS = await initNSFWJs();
|
|
||||||
const isNSFW: boolean = await predictNSFW(nsfw, image);
|
|
||||||
if (isNSFW) {
|
|
||||||
message.error(i18n.global.t('comment.illegalImage'));
|
|
||||||
fileList.value.pop();
|
|
||||||
uploading.value = false;
|
|
||||||
reject(false);
|
|
||||||
}
|
|
||||||
fileList.value.push(image.src);
|
|
||||||
// 加载图片
|
|
||||||
await loadImg(image.src);
|
|
||||||
uploading.value = false;
|
uploading.value = false;
|
||||||
resolve(true);
|
return false;
|
||||||
};
|
}
|
||||||
reader.onerror = reject;
|
fileList.value.push(image.src);
|
||||||
});
|
// 加载图片
|
||||||
|
await loadImg(image.src);
|
||||||
|
uploading.value = false;
|
||||||
|
return true;
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -88,38 +84,35 @@ export const useUpscaleStore = defineStore(
|
|||||||
* @param src
|
* @param src
|
||||||
*/
|
*/
|
||||||
async function loadImg(src: string) {
|
async function loadImg(src: string) {
|
||||||
return new Promise((resolve, reject) => {
|
img.value.src = src;
|
||||||
img.value.src = src;
|
img.value.onload = async () => {
|
||||||
img.value.onload = async () => {
|
wasmModule.value = await Module();
|
||||||
wasmModule.value = await Module();
|
if (ctx) {
|
||||||
if (ctx) {
|
canvas.width = img.value.width;
|
||||||
canvas.width = img.value.width;
|
canvas.height = img.value.height;
|
||||||
canvas.height = img.value.height;
|
ctx.drawImage(img.value, 0, 0);
|
||||||
ctx.drawImage(img.value, 0, 0);
|
const imageData = ctx.getImageData(0, 0, img.value.width, img.value.height);
|
||||||
const imageData = ctx.getImageData(0, 0, img.value.width, img.value.height);
|
const data = new Uint8Array(imageData.data.buffer);
|
||||||
const data = new Uint8Array(imageData.data.buffer);
|
input.value = new Img(img.value.width, img.value.height, data);
|
||||||
input.value = new Img(img.value.width, img.value.height, data);
|
const numPixels = input.value.width * input.value.height;
|
||||||
const numPixels = input.value.width * input.value.height;
|
const bytesPerImage = numPixels * 4;
|
||||||
const bytesPerImage = numPixels * 4;
|
const sourcePtr = wasmModule.value._malloc(bytesPerImage);
|
||||||
const sourcePtr = wasmModule.value._malloc(bytesPerImage);
|
const targetPtr = wasmModule.value._malloc(bytesPerImage);
|
||||||
const targetPtr = wasmModule.value._malloc(bytesPerImage);
|
wasmModule.value.HEAPU8.set(input.value.data, sourcePtr);
|
||||||
wasmModule.value.HEAPU8.set(input.value.data, sourcePtr);
|
hasAlpha.value = wasmModule.value._check_alpha(sourcePtr, numPixels);
|
||||||
hasAlpha.value = wasmModule.value._check_alpha(sourcePtr, numPixels);
|
if (hasAlpha.value) {
|
||||||
if (hasAlpha.value) {
|
inputAlpha.value = new Img(img.value.width, img.value.height);
|
||||||
inputAlpha.value = new Img(img.value.width, img.value.height);
|
wasmModule.value._copy_alpha_to_rgb(sourcePtr, targetPtr, numPixels);
|
||||||
wasmModule.value._copy_alpha_to_rgb(sourcePtr, targetPtr, numPixels);
|
inputAlpha.value.data.set(
|
||||||
inputAlpha.value.data.set(
|
wasmModule.value.HEAPU8.subarray(targetPtr, targetPtr + bytesPerImage)
|
||||||
wasmModule.value.HEAPU8.subarray(targetPtr, targetPtr + bytesPerImage)
|
);
|
||||||
);
|
|
||||||
}
|
|
||||||
wasmModule.value._free(sourcePtr);
|
|
||||||
wasmModule.value._free(targetPtr);
|
|
||||||
}
|
}
|
||||||
resolve(true);
|
wasmModule.value._free(sourcePtr);
|
||||||
|
wasmModule.value._free(targetPtr);
|
||||||
|
imgLoaded.value = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
};
|
|
||||||
img.value.onerror = reject;
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -131,6 +124,9 @@ export const useUpscaleStore = defineStore(
|
|||||||
hasAlpha,
|
hasAlpha,
|
||||||
inputAlpha,
|
inputAlpha,
|
||||||
wasmModule,
|
wasmModule,
|
||||||
|
img,
|
||||||
|
processedImg,
|
||||||
|
imgLoaded,
|
||||||
beforeUpload,
|
beforeUpload,
|
||||||
customUploadRequest,
|
customUploadRequest,
|
||||||
removeImage,
|
removeImage,
|
||||||
@@ -144,7 +140,12 @@ export const useUpscaleStore = defineStore(
|
|||||||
persist: true,
|
persist: true,
|
||||||
storage: localForage,
|
storage: localForage,
|
||||||
key: 'upscale',
|
key: 'upscale',
|
||||||
includePaths: ['imageList', 'fileList']
|
includePaths: [
|
||||||
|
'imageList',
|
||||||
|
'fileList',
|
||||||
|
'img',
|
||||||
|
'processedImg',
|
||||||
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
@@ -1,270 +0,0 @@
|
|||||||
import * as tf from "@tensorflow/tfjs";
|
|
||||||
|
|
||||||
import Img from "@/workers/image.ts";
|
|
||||||
import {ImageData} from "@/types/upscale";
|
|
||||||
import upscale from "@/workers/upscale.ts";
|
|
||||||
// import "@tensorflow/tfjs-backend-webgpu";
|
|
||||||
import "@tensorflow/tfjs-backend-webgl";
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 加载模型
|
|
||||||
* @param model_type 模型类型,可选值:realesrgan、realcugan
|
|
||||||
* @param model 模型名称,例如 realesrgan_x4
|
|
||||||
* @param tile_size 块大小,例如:64
|
|
||||||
* @param factor 超分辨率因子,例如:4
|
|
||||||
* @param backend 后端,可选值:webgpu、webgl
|
|
||||||
*/
|
|
||||||
export async function loadModel(model_type: string, model: string, tile_size: number, factor: number, backend: string): Promise<tf.GraphModel | null> {
|
|
||||||
let model_url: string;
|
|
||||||
let model_name: string;
|
|
||||||
|
|
||||||
if (model_type === "realesrgan") {
|
|
||||||
model_url = `/tfjs/realesrgan/${model}-${tile_size}/model.json`;
|
|
||||||
model_name = `realesrgan-${model}-${tile_size}`;
|
|
||||||
} else {
|
|
||||||
model_url = `/tfjs/realcugan/${factor}x-${model}-${tile_size}/model.json`;
|
|
||||||
model_name = `realcugan-${factor}x-${model}-${tile_size}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
await tf.ready();
|
|
||||||
if (backend === "webgpu") {
|
|
||||||
await import("@tensorflow/tfjs-backend-webgpu");
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
if (!(await tf.setBackend(backend || "webgl"))) {
|
|
||||||
console.error(`${backend} 后端在您的浏览器中不被支持。`);
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
console.log(`当前使用后端: ${tf.getBackend()}`);
|
|
||||||
} catch (error) {
|
|
||||||
console.error("设置后端时发生错误:", error);
|
|
||||||
console.log("支持的后端列表:", tf.getBackend());
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const Model = await tf.loadGraphModel(`indexeddb://${model_name}`);
|
|
||||||
console.log("模型加载成功");
|
|
||||||
return Model;
|
|
||||||
} catch (error) {
|
|
||||||
console.error("模型加载失败,开始下载模型:", error);
|
|
||||||
try {
|
|
||||||
const fetchedModel = await tf.loadGraphModel(model_url);
|
|
||||||
await fetchedModel.save(`indexeddb://${model_name}`);
|
|
||||||
console.log("模型下载并保存成功");
|
|
||||||
return fetchedModel;
|
|
||||||
} catch (error) {
|
|
||||||
console.error("模型下载失败:", error);
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 处理图片
|
|
||||||
* @param data
|
|
||||||
*/
|
|
||||||
export async function processImage(data: ImageData) {
|
|
||||||
const Model: tf.GraphModel | null = await loadModel(data.model_type, data.model, data.tile_size, data.factor, data.backend);
|
|
||||||
if (!Model) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
const input = new Img(data.width, data.height, new Uint8Array(data.input));
|
|
||||||
const width_ori = input.width;
|
|
||||||
const height_ori = input.height;
|
|
||||||
input.padToTileSize(data.tile_size || 64);
|
|
||||||
let withPadding = false;
|
|
||||||
if (input.width !== width_ori || input.height !== height_ori) {
|
|
||||||
withPadding = true;
|
|
||||||
}
|
|
||||||
const hasAlpha = data.hasAlpha;
|
|
||||||
|
|
||||||
const factor = data.factor || 4;
|
|
||||||
const tile_size = data.tile_size || 64;
|
|
||||||
const min_lap = data.min_lap || 12;
|
|
||||||
const start = Date.now();
|
|
||||||
|
|
||||||
const output = await enlargeImageWithFixedInput(
|
|
||||||
Model,
|
|
||||||
input,
|
|
||||||
factor,
|
|
||||||
tile_size,
|
|
||||||
min_lap,
|
|
||||||
hasAlpha
|
|
||||||
);
|
|
||||||
|
|
||||||
if (withPadding) {
|
|
||||||
output.cropToOriginalSize(width_ori * factor, height_ori * factor);
|
|
||||||
}
|
|
||||||
const end = Date.now();
|
|
||||||
console.log("Time:", end - start);
|
|
||||||
return output.data.buffer;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 超分辨率
|
|
||||||
* @param model
|
|
||||||
* @param inputImg
|
|
||||||
* @param factor
|
|
||||||
* @param input_size
|
|
||||||
* @param min_lap
|
|
||||||
* @param hasAlpha
|
|
||||||
*/
|
|
||||||
async function enlargeImageWithFixedInput(
|
|
||||||
model: tf.GraphModel,
|
|
||||||
inputImg: Img,
|
|
||||||
factor = 4,
|
|
||||||
input_size = 64,
|
|
||||||
min_lap = 12,
|
|
||||||
hasAlpha = false,
|
|
||||||
) {
|
|
||||||
const width = inputImg.width;
|
|
||||||
const height = inputImg.height;
|
|
||||||
const output = new Img(width * factor, height * factor);
|
|
||||||
let num_x = 1;
|
|
||||||
for (; (input_size * num_x - width) / (num_x - 1) < min_lap; num_x++) ;
|
|
||||||
let num_y = 1;
|
|
||||||
for (; (input_size * num_y - height) / (num_y - 1) < min_lap; num_y++) ;
|
|
||||||
const locs_x = new Array(num_x);
|
|
||||||
const locs_y = new Array(num_y);
|
|
||||||
const pad_left = new Array(num_x);
|
|
||||||
const pad_top = new Array(num_y);
|
|
||||||
const pad_right = new Array(num_x);
|
|
||||||
const pad_bottom = new Array(num_y);
|
|
||||||
const total_lap_x = input_size * num_x - width;
|
|
||||||
const total_lap_y = input_size * num_y - height;
|
|
||||||
const base_lap_x = Math.floor(total_lap_x / (num_x - 1));
|
|
||||||
const base_lap_y = Math.floor(total_lap_y / (num_y - 1));
|
|
||||||
const extra_lap_x = total_lap_x - base_lap_x * (num_x - 1);
|
|
||||||
const extra_lap_y = total_lap_y - base_lap_y * (num_y - 1);
|
|
||||||
locs_x[0] = 0;
|
|
||||||
for (let i = 1; i < num_x; i++) {
|
|
||||||
if (i <= extra_lap_x) {
|
|
||||||
locs_x[i] = locs_x[i - 1] + input_size - base_lap_x - 1;
|
|
||||||
} else {
|
|
||||||
locs_x[i] = locs_x[i - 1] + input_size - base_lap_x;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
locs_y[0] = 0;
|
|
||||||
for (let i = 1; i < num_y; i++) {
|
|
||||||
if (i <= extra_lap_y) {
|
|
||||||
locs_y[i] = locs_y[i - 1] + input_size - base_lap_y - 1;
|
|
||||||
} else {
|
|
||||||
locs_y[i] = locs_y[i - 1] + input_size - base_lap_y;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
pad_left[0] = 0;
|
|
||||||
pad_top[0] = 0;
|
|
||||||
pad_right[num_x - 1] = 0;
|
|
||||||
pad_bottom[num_y - 1] = 0;
|
|
||||||
for (let i = 1; i < num_x; i++) {
|
|
||||||
pad_left[i] = Math.floor((locs_x[i - 1] + input_size - locs_x[i]) / 2);
|
|
||||||
}
|
|
||||||
for (let i = 1; i < num_y; i++) {
|
|
||||||
pad_top[i] = Math.floor((locs_y[i - 1] + input_size - locs_y[i]) / 2);
|
|
||||||
}
|
|
||||||
for (let i = 0; i < num_x - 1; i++) {
|
|
||||||
pad_right[i] = locs_x[i] + input_size - locs_x[i + 1] - pad_left[i + 1];
|
|
||||||
}
|
|
||||||
for (let i = 0; i < num_y - 1; i++) {
|
|
||||||
pad_bottom[i] = locs_y[i] + input_size - locs_y[i + 1] - pad_top[i + 1];
|
|
||||||
}
|
|
||||||
// const total = num_x * num_y;
|
|
||||||
// let current = 0;
|
|
||||||
// const useModel = new Array(total).fill(false);
|
|
||||||
if (hasAlpha) {
|
|
||||||
for (let i = 0; i < num_x; i++) {
|
|
||||||
for (let j = 0; j < num_y; j++) {
|
|
||||||
const x1 = locs_x[i];
|
|
||||||
const y1 = locs_y[j];
|
|
||||||
const x2 = locs_x[i] + input_size;
|
|
||||||
const y2 = locs_y[j] + input_size;
|
|
||||||
const tile = new Img(input_size, input_size);
|
|
||||||
tile.getImageCrop(0, 0, inputImg, x1, y1, x2, y2);
|
|
||||||
for (let k = 4; k < tile.data.length; k += 4) {
|
|
||||||
if (tile.data[k + 3] !== tile.data[3]) {
|
|
||||||
// useModel[current] = true;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// if (useModel[current]) {
|
|
||||||
// current++;
|
|
||||||
// continue;
|
|
||||||
// }
|
|
||||||
const scaled = new Img(tile.width * factor, tile.height * factor);
|
|
||||||
for (let k = 0; k < scaled.data.length; k += 4) {
|
|
||||||
scaled.data[k] = tile.data[3];
|
|
||||||
scaled.data[k + 1] = tile.data[3];
|
|
||||||
scaled.data[k + 2] = tile.data[3];
|
|
||||||
}
|
|
||||||
output.getImageCrop(
|
|
||||||
(x1 + pad_left[i]) * factor,
|
|
||||||
(y1 + pad_top[j]) * factor,
|
|
||||||
scaled,
|
|
||||||
pad_left[i] * factor,
|
|
||||||
pad_top[j] * factor,
|
|
||||||
scaled.width - pad_right[i] * factor,
|
|
||||||
scaled.height - pad_bottom[j] * factor
|
|
||||||
);
|
|
||||||
// current++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// current = 0;
|
|
||||||
for (let i = 0; i < num_x; i++) {
|
|
||||||
for (let j = 0; j < num_y; j++) {
|
|
||||||
// if (!useModel[current]) {
|
|
||||||
// current++;
|
|
||||||
// const progress = (current / total) * 100;
|
|
||||||
// sendprogress(progress);
|
|
||||||
// continue;
|
|
||||||
// }
|
|
||||||
const x1 = locs_x[i];
|
|
||||||
const y1 = locs_y[j];
|
|
||||||
const x2 = locs_x[i] + input_size;
|
|
||||||
const y2 = locs_y[j] + input_size;
|
|
||||||
const tile = new Img(input_size, input_size);
|
|
||||||
tile.getImageCrop(0, 0, inputImg, x1, y1, x2, y2);
|
|
||||||
const scaled = await upscale(tile, model, true);
|
|
||||||
output.getImageCrop(
|
|
||||||
(x1 + pad_left[i]) * factor,
|
|
||||||
(y1 + pad_top[j]) * factor,
|
|
||||||
scaled,
|
|
||||||
pad_left[i] * factor,
|
|
||||||
pad_top[j] * factor,
|
|
||||||
scaled.width - pad_right[i] * factor,
|
|
||||||
scaled.height - pad_bottom[j] * factor
|
|
||||||
);
|
|
||||||
// current++;
|
|
||||||
// const progress = (current / total) * 100;
|
|
||||||
// sendprogress(progress);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
for (let i = 0; i < num_x; i++) {
|
|
||||||
for (let j = 0; j < num_y; j++) {
|
|
||||||
const x1 = locs_x[i];
|
|
||||||
const y1 = locs_y[j];
|
|
||||||
const x2 = locs_x[i] + input_size;
|
|
||||||
const y2 = locs_y[j] + input_size;
|
|
||||||
const tile = new Img(input_size, input_size);
|
|
||||||
tile.getImageCrop(0, 0, inputImg, x1, y1, x2, y2);
|
|
||||||
const scaled = await upscale(tile, model);
|
|
||||||
output.getImageCrop(
|
|
||||||
(x1 + pad_left[i]) * factor,
|
|
||||||
(y1 + pad_top[j]) * factor,
|
|
||||||
scaled,
|
|
||||||
pad_left[i] * factor,
|
|
||||||
pad_top[j] * factor,
|
|
||||||
scaled.width - pad_right[i] * factor,
|
|
||||||
scaled.height - pad_bottom[j] * factor
|
|
||||||
);
|
|
||||||
// current++;
|
|
||||||
// const progress = (current / total) * 100;
|
|
||||||
// sendprogress(progress);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return output;
|
|
||||||
}
|
|
@@ -1,15 +1,10 @@
|
|||||||
|
<template>
|
||||||
|
|
||||||
|
<CompareImage/>
|
||||||
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<p>AllPhoto</p>
|
|
||||||
<!-- <Folder/>-->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss" src="./index.scss">
|
<style scoped lang="scss" src="./index.scss">
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
532
src/views/Upscale/CompareImage.vue
Normal file
532
src/views/Upscale/CompareImage.vue
Normal file
@@ -0,0 +1,532 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
ref="canvasContainer"
|
||||||
|
class="canvas-container drag-over bg dark"
|
||||||
|
@mousedown="startDragging"
|
||||||
|
@mouseup="stopDragging"
|
||||||
|
@mouseleave="stopDragging"
|
||||||
|
@mousemove="dragImage"
|
||||||
|
@wheel="resizeImage"
|
||||||
|
@touchstart="touchStart"
|
||||||
|
@touchmove="touchMove"
|
||||||
|
@touchend="touchEnd"
|
||||||
|
>
|
||||||
|
<canvas ref="canvas"></canvas>
|
||||||
|
<div
|
||||||
|
class="dragLine"
|
||||||
|
ref="dragLine">
|
||||||
|
<div class="dragBall"
|
||||||
|
@mousedown.stop="startDraggingLine"
|
||||||
|
@mousemove.stop="dragLineFn"
|
||||||
|
@mouseup.stop="stopDraggingLine"
|
||||||
|
>
|
||||||
|
<svg width="30" viewBox="0 0 27 20">
|
||||||
|
<path fill="#ff3484" d="M9.6 0L0 9.6l9.6 9.6z"></path>
|
||||||
|
<path fill="#5fb3e5" d="M17 19.2l9.5-9.6L16.9 0z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import img1 from "@/assets/images/1.png";
|
||||||
|
import img2 from "@/assets/images/2.png";
|
||||||
|
|
||||||
|
const canvasContainer = ref<HTMLDivElement | null>(null);
|
||||||
|
const dragging = ref<boolean>(false);
|
||||||
|
const linePosition = ref(0);
|
||||||
|
const dpr = window.devicePixelRatio || 1;
|
||||||
|
const canvas = ref<HTMLCanvasElement | null>(null);
|
||||||
|
const draggingLine = ref(false);
|
||||||
|
const imgX = ref(0);
|
||||||
|
const imgY = ref(0);
|
||||||
|
const imgScale = ref(1);
|
||||||
|
const dragLine = ref<HTMLDivElement | null>(null);
|
||||||
|
const imgInitScale = ref(1);
|
||||||
|
const touching = ref(false);
|
||||||
|
const touchStartImgX = ref(0);
|
||||||
|
const touchStartImgY = ref(0);
|
||||||
|
|
||||||
|
const touchStartX = ref(0);
|
||||||
|
const touchStartY = ref(0);
|
||||||
|
const touchStartDistance = ref(0);
|
||||||
|
const imgScaleStart = ref(1);
|
||||||
|
|
||||||
|
const img = ref<HTMLImageElement>(new Image());
|
||||||
|
const processedImg = ref<HTMLImageElement>(new Image());
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 开始拖动
|
||||||
|
* @param event
|
||||||
|
*/
|
||||||
|
function startDragging(event: any) {
|
||||||
|
if (canvas.value) {
|
||||||
|
const rect = canvas.value.getBoundingClientRect();
|
||||||
|
const mouseX = event.clientX - rect.left;
|
||||||
|
if (Math.abs(mouseX - linePosition.value / dpr) < 12) {
|
||||||
|
startDraggingLine(event);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
dragging.value = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 停止拖动
|
||||||
|
*/
|
||||||
|
function stopDragging() {
|
||||||
|
if (draggingLine.value) {
|
||||||
|
stopDraggingLine();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
dragging.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 拖动图片
|
||||||
|
* @param event
|
||||||
|
*/
|
||||||
|
function dragImage(event: any) {
|
||||||
|
if (dragging.value) {
|
||||||
|
imgX.value += event.movementX * dpr;
|
||||||
|
imgY.value += event.movementY * dpr;
|
||||||
|
drawImage();
|
||||||
|
}
|
||||||
|
if (draggingLine.value) {
|
||||||
|
updateLinePosition(event);
|
||||||
|
drawImage();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 重置图片大小
|
||||||
|
* @param event
|
||||||
|
*/
|
||||||
|
function resizeImage(event: any) {
|
||||||
|
event.preventDefault();
|
||||||
|
if (canvas.value) {
|
||||||
|
const rect = canvas.value.getBoundingClientRect();
|
||||||
|
const mouseX = (event.clientX - rect.left) * dpr;
|
||||||
|
const mouseY = (event.clientY - rect.top) * dpr;
|
||||||
|
const prevScale = imgScale.value;
|
||||||
|
const maxSize = 20 * imgInitScale.value;
|
||||||
|
const minSize = 0.05 * imgInitScale.value;
|
||||||
|
if (event.deltaY > 0) {
|
||||||
|
const newScale = imgScale.value * 0.8;
|
||||||
|
imgScale.value = Math.min(Math.max(minSize, newScale), maxSize);
|
||||||
|
} else {
|
||||||
|
const newScale = imgScale.value * 1.2;
|
||||||
|
imgScale.value = Math.min(Math.max(minSize, newScale), maxSize);
|
||||||
|
}
|
||||||
|
|
||||||
|
const scaleRatio = imgScale.value / prevScale;
|
||||||
|
imgX.value = mouseX - (mouseX - imgX.value) * scaleRatio;
|
||||||
|
imgY.value = mouseY - (mouseY - imgY.value) * scaleRatio;
|
||||||
|
drawImage();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 开始拖动
|
||||||
|
* @param event
|
||||||
|
*/
|
||||||
|
function touchStart(event: any) {
|
||||||
|
touching.value = true;
|
||||||
|
touchStartImgX.value = imgX.value;
|
||||||
|
touchStartImgY.value = imgY.value;
|
||||||
|
if (event.touches.length == 1) {
|
||||||
|
if (
|
||||||
|
Math.abs(event.touches[0].clientX - linePosition.value / dpr) < 12
|
||||||
|
) {
|
||||||
|
draggingLine.value = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
touchStartX.value = event.touches[0].clientX * dpr;
|
||||||
|
touchStartY.value = event.touches[0].clientY * dpr;
|
||||||
|
} else {
|
||||||
|
imgScaleStart.value = imgScale.value;
|
||||||
|
const touch1 = event.touches[0];
|
||||||
|
const touch2 = event.touches[1];
|
||||||
|
touchStartDistance.value =
|
||||||
|
Math.sqrt(
|
||||||
|
Math.pow(touch2.clientX - touch1.clientX, 2) +
|
||||||
|
Math.pow(touch2.clientY - touch1.clientY, 2)
|
||||||
|
) * dpr;
|
||||||
|
touchStartX.value = ((touch1.clientX + touch2.clientX) / 2) * dpr;
|
||||||
|
touchStartY.value = ((touch1.clientY + touch2.clientY) / 2) * dpr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 移动
|
||||||
|
* @param event
|
||||||
|
*/
|
||||||
|
function touchMove(event: any) {
|
||||||
|
event.preventDefault();
|
||||||
|
if (!touching.value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (event.touches.length == 1) {
|
||||||
|
const touch = event.touches[0];
|
||||||
|
const movementX =
|
||||||
|
touch.clientX * dpr -
|
||||||
|
touchStartX.value +
|
||||||
|
touchStartImgX.value -
|
||||||
|
imgX.value;
|
||||||
|
const movementY =
|
||||||
|
touch.clientY * dpr -
|
||||||
|
touchStartY.value +
|
||||||
|
touchStartImgY.value -
|
||||||
|
imgY.value;
|
||||||
|
if (draggingLine.value) {
|
||||||
|
updateLinePosition(event.touches[0]);
|
||||||
|
drawImage();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (touching.value) {
|
||||||
|
imgX.value += movementX;
|
||||||
|
imgY.value += movementY;
|
||||||
|
drawImage();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const touch1 = event.touches[0];
|
||||||
|
const touch2 = event.touches[1];
|
||||||
|
const distance =
|
||||||
|
Math.sqrt(
|
||||||
|
Math.pow(touch2.clientX - touch1.clientX, 2) +
|
||||||
|
Math.pow(touch2.clientY - touch1.clientY, 2)
|
||||||
|
) * dpr;
|
||||||
|
if (canvas.value) {
|
||||||
|
const rect = canvas.value.getBoundingClientRect();
|
||||||
|
const mouseX = touchStartX.value - rect.left;
|
||||||
|
const mouseY = touchStartY.value - rect.top;
|
||||||
|
const scaleChange = distance / touchStartDistance.value;
|
||||||
|
const prevScale = imgScale.value;
|
||||||
|
const maxSize = 20 * imgInitScale.value;
|
||||||
|
const minSize = 0.05 * imgInitScale.value;
|
||||||
|
const newScale = imgScaleStart.value * scaleChange;
|
||||||
|
imgScale.value = Math.min(Math.max(minSize, newScale), maxSize);
|
||||||
|
|
||||||
|
const scaleRatio = imgScale.value / prevScale;
|
||||||
|
const movementX =
|
||||||
|
((touch1.clientX + touch2.clientX) / 2) * dpr - touchStartX.value;
|
||||||
|
const movementY =
|
||||||
|
((touch1.clientY + touch2.clientY) / 2) * dpr - touchStartY.value;
|
||||||
|
imgX.value = mouseX - (mouseX - imgX.value) * scaleRatio + movementX;
|
||||||
|
imgY.value = mouseY - (mouseY - imgY.value) * scaleRatio + movementY;
|
||||||
|
touchStartX.value = ((touch1.clientX + touch2.clientX) / 2) * dpr;
|
||||||
|
touchStartY.value = ((touch1.clientY + touch2.clientY) / 2) * dpr;
|
||||||
|
drawImage();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 结束移动
|
||||||
|
* @param event
|
||||||
|
*/
|
||||||
|
function touchEnd(event: any) {
|
||||||
|
if (event.touches.length == 2) {
|
||||||
|
touchStartImgX.value = imgX.value;
|
||||||
|
touchStartImgY.value = imgY.value;
|
||||||
|
const touch1 = event.touches[0];
|
||||||
|
const touch2 = event.touches[1];
|
||||||
|
touchStartDistance.value =
|
||||||
|
Math.sqrt(
|
||||||
|
Math.pow(touch2.clientX - touch1.clientX, 2) +
|
||||||
|
Math.pow(touch2.clientY - touch1.clientY, 2)
|
||||||
|
) * dpr;
|
||||||
|
touchStartX.value = ((touch1.clientX + touch2.clientX) / 2) * dpr;
|
||||||
|
touchStartY.value = ((touch1.clientY + touch2.clientY) / 2) * dpr;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (event.touches.length == 1) {
|
||||||
|
touchStartImgX.value = imgX.value;
|
||||||
|
touchStartImgY.value = imgY.value;
|
||||||
|
touchStartX.value = event.touches[0].clientX * dpr;
|
||||||
|
touchStartY.value = event.touches[0].clientY * dpr;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
touching.value = false;
|
||||||
|
draggingLine.value = false;
|
||||||
|
touchStartImgX.value = 0;
|
||||||
|
touchStartImgY.value = 0;
|
||||||
|
touchStartX.value = 0;
|
||||||
|
touchStartY.value = 0;
|
||||||
|
touchStartDistance.value = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 开始拖动线
|
||||||
|
* @param event
|
||||||
|
*/
|
||||||
|
function startDraggingLine(event: any) {
|
||||||
|
event.preventDefault();
|
||||||
|
draggingLine.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 停止拖动线
|
||||||
|
*/
|
||||||
|
function stopDraggingLine() {
|
||||||
|
draggingLine.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 绘制图片
|
||||||
|
*/
|
||||||
|
function drawImage() {
|
||||||
|
requestAnimationFrame(() => drawImage_());
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 渲染图片
|
||||||
|
*/
|
||||||
|
function drawImage_() {
|
||||||
|
if (canvas.value) {
|
||||||
|
const ctx = canvas.value.getContext("2d");
|
||||||
|
if (ctx && img.value) {
|
||||||
|
ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);
|
||||||
|
|
||||||
|
ctx.drawImage(
|
||||||
|
img.value,
|
||||||
|
imgX.value,
|
||||||
|
imgY.value,
|
||||||
|
img.value.width * imgScale.value,
|
||||||
|
img.value.height * imgScale.value
|
||||||
|
);
|
||||||
|
|
||||||
|
if (processedImg.value) {
|
||||||
|
ctx.drawImage(
|
||||||
|
processedImg.value,
|
||||||
|
((processedImg.value.width / img.value.width) *
|
||||||
|
(linePosition.value - imgX.value)) /
|
||||||
|
imgScale.value,
|
||||||
|
0,
|
||||||
|
processedImg.value.width -
|
||||||
|
((processedImg.value.width / img.value.width) *
|
||||||
|
(linePosition.value - imgX.value)) /
|
||||||
|
imgScale.value,
|
||||||
|
processedImg.value.height,
|
||||||
|
linePosition.value,
|
||||||
|
imgY.value,
|
||||||
|
imgX.value + img.value.width * imgScale.value - linePosition.value,
|
||||||
|
img.value.height * imgScale.value
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新线位置
|
||||||
|
* @param event
|
||||||
|
*/
|
||||||
|
function updateLinePosition(event: any) {
|
||||||
|
if (canvas.value && canvasContainer.value) {
|
||||||
|
const containerRect = canvasContainer.value.getBoundingClientRect();
|
||||||
|
const lineWidth = 5 * dpr; // 线的宽度为 5px
|
||||||
|
|
||||||
|
// 计算线的新位置,确保线的中心在鼠标位置
|
||||||
|
let newPosition = event.clientX - containerRect.left;
|
||||||
|
|
||||||
|
// 确保线不会超出 canvasContainer 的边界
|
||||||
|
newPosition = Math.max(0, Math.min(newPosition, containerRect.width - lineWidth));
|
||||||
|
|
||||||
|
// 更新线的位置
|
||||||
|
linePosition.value = newPosition * dpr;
|
||||||
|
const line: any = dragLine.value;
|
||||||
|
line.style.left = Math.floor(newPosition) + "px";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 拖动线
|
||||||
|
* @param event
|
||||||
|
*/
|
||||||
|
function dragLineFn(event: any) {
|
||||||
|
event.preventDefault();
|
||||||
|
if (draggingLine.value) {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
updateLinePosition(event);
|
||||||
|
drawImage();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新图片位置
|
||||||
|
*/
|
||||||
|
function updateCanvasSize() {
|
||||||
|
const container: any = canvasContainer.value;
|
||||||
|
if (container && canvas.value && img.value) {
|
||||||
|
// imgX.value =
|
||||||
|
// ((imgX.value + (img.value.width * imgScale.value) / 2) / canvas.value.width) *
|
||||||
|
// container.offsetWidth * dpr - (img.value.width * imgScale.value) / 2;
|
||||||
|
// imgY.value =
|
||||||
|
// ((imgY.value + (img.value.height * imgScale.value) / 2) /
|
||||||
|
// canvas.value.height) * container.offsetHeight * dpr - (img.value.height * imgScale.value) / 2;
|
||||||
|
imgX.value = (container.offsetWidth * dpr - img.value.width * imgScale.value) / 2;
|
||||||
|
imgY.value = (container.offsetHeight * dpr - img.value.height * imgScale.value) / 2;
|
||||||
|
linePosition.value = (linePosition.value / canvas.value.width) * container.offsetWidth * dpr;
|
||||||
|
// dragLine.value.style.left = linePosition.value / dpr + "px";
|
||||||
|
}
|
||||||
|
if (canvas.value) {
|
||||||
|
canvas.value.width = container.offsetWidth * dpr;
|
||||||
|
canvas.value.height = container.offsetHeight * dpr;
|
||||||
|
canvas.value.style.width = `${container.offsetWidth}px`;
|
||||||
|
canvas.value.style.height = `${container.offsetHeight}px`;
|
||||||
|
drawImage();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 监听大小变化
|
||||||
|
*/
|
||||||
|
function handleResize() {
|
||||||
|
updateCanvasSize();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 初始化 canvas 大小
|
||||||
|
*/
|
||||||
|
function initCanvasSize() {
|
||||||
|
updateCanvasSize();
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
img.value.src = img1;
|
||||||
|
processedImg.value.src = img2;
|
||||||
|
initCanvasSize();
|
||||||
|
|
||||||
|
window.addEventListener("resize", handleResize);
|
||||||
|
|
||||||
|
});
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
window.removeEventListener("resize", handleResize);
|
||||||
|
});
|
||||||
|
|
||||||
|
watchEffect(() => {
|
||||||
|
img.value.onload = () => {
|
||||||
|
drawImage();
|
||||||
|
};
|
||||||
|
processedImg.value.onload = () => {
|
||||||
|
drawImage();
|
||||||
|
};
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.canvas-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg {
|
||||||
|
background-color: #ffffff;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
45deg,
|
||||||
|
#f3f3f3 25%,
|
||||||
|
transparent 25%,
|
||||||
|
transparent 75%,
|
||||||
|
#f3f3f3 75%,
|
||||||
|
#f3f3f3
|
||||||
|
),
|
||||||
|
linear-gradient(
|
||||||
|
45deg,
|
||||||
|
#f3f3f3 25%,
|
||||||
|
#ffffff 25%,
|
||||||
|
#ffffff 75%,
|
||||||
|
#f3f3f3 75%,
|
||||||
|
#f3f3f3
|
||||||
|
);
|
||||||
|
background-size: 20px 20px;
|
||||||
|
background-position: 0 0, 10px 10px;
|
||||||
|
transition: all 0.5s ease;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg.dark {
|
||||||
|
background-color: #313131;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
45deg,
|
||||||
|
#333333 25%,
|
||||||
|
transparent 25%,
|
||||||
|
transparent 75%,
|
||||||
|
#333333 75%,
|
||||||
|
#333333
|
||||||
|
),
|
||||||
|
linear-gradient(
|
||||||
|
45deg,
|
||||||
|
#333333 25%,
|
||||||
|
#313131 25%,
|
||||||
|
#313131 75%,
|
||||||
|
#333333 75%,
|
||||||
|
#333333
|
||||||
|
);
|
||||||
|
background-size: 20px 20px;
|
||||||
|
background-position: 0 0, 10px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-over {
|
||||||
|
background-image: linear-gradient(
|
||||||
|
45deg,
|
||||||
|
#333333 25%,
|
||||||
|
transparent 25%,
|
||||||
|
transparent 75%,
|
||||||
|
#333333 75%,
|
||||||
|
#333333
|
||||||
|
),
|
||||||
|
linear-gradient(
|
||||||
|
45deg,
|
||||||
|
#333333 25%,
|
||||||
|
#313131 25%,
|
||||||
|
#313131 75%,
|
||||||
|
#333333 75%,
|
||||||
|
#333333
|
||||||
|
);
|
||||||
|
transition: all 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dragLine {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
width: 5px;
|
||||||
|
height: 100%;
|
||||||
|
transform: translate(-100%, 0);
|
||||||
|
background-color: rgba(0, 0, 0, 0.6);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dragLine:hover {
|
||||||
|
cursor: ew-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dragBall {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.9);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
cursor: ew-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
@@ -23,7 +23,7 @@
|
|||||||
<span class="upscale-content-params-title">模型:</span>
|
<span class="upscale-content-params-title">模型:</span>
|
||||||
<ASelect style="width: 100%" size="default"
|
<ASelect style="width: 100%" size="default"
|
||||||
v-model:value="model"
|
v-model:value="model"
|
||||||
:options="modes.map(item => ({label: item, value: item}))">
|
:options="modes.map((item: any) => ({label: item, value: item}))">
|
||||||
</ASelect>
|
</ASelect>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -32,7 +32,7 @@
|
|||||||
<span class="upscale-content-params-title">比列:</span>
|
<span class="upscale-content-params-title">比列:</span>
|
||||||
<ASelect style="width: 100%" size="default"
|
<ASelect style="width: 100%" size="default"
|
||||||
v-model:value="factor"
|
v-model:value="factor"
|
||||||
:options="scales.map(item => ({label: item, value: item}))">
|
:options="scales.map((item: any) => ({label: item, value: item}))">
|
||||||
|
|
||||||
</ASelect>
|
</ASelect>
|
||||||
</div>
|
</div>
|
||||||
@@ -40,7 +40,7 @@
|
|||||||
<span class="upscale-content-params-title">分块大小:</span>
|
<span class="upscale-content-params-title">分块大小:</span>
|
||||||
<ASelect style="width: 100%" size="default"
|
<ASelect style="width: 100%" size="default"
|
||||||
v-model:value="tile_size"
|
v-model:value="tile_size"
|
||||||
:options="tileSize.map(item => ({label: item, value: item}))">
|
:options="tileSize.map((item: any) => ({label: item, value: item}))">
|
||||||
|
|
||||||
</ASelect>
|
</ASelect>
|
||||||
</div>
|
</div>
|
||||||
@@ -50,14 +50,14 @@
|
|||||||
<span class="upscale-content-params-title">重复:</span>
|
<span class="upscale-content-params-title">重复:</span>
|
||||||
<ASelect style="width: 100%" size="default"
|
<ASelect style="width: 100%" size="default"
|
||||||
v-model:value="min_lap"
|
v-model:value="min_lap"
|
||||||
:options="overlapList.map(item => ({label: item, value: item}))">
|
:options="overlapList.map((item: any) => ({label: item, value: item}))">
|
||||||
</ASelect>
|
</ASelect>
|
||||||
</div>
|
</div>
|
||||||
<div class="upscale-content-params-item-content">
|
<div class="upscale-content-params-item-content">
|
||||||
<span class="upscale-content-params-title">运行环境:</span>
|
<span class="upscale-content-params-title">运行环境:</span>
|
||||||
<ASelect style="width: 100%" size="default"
|
<ASelect style="width: 100%" size="default"
|
||||||
v-model:value="backend"
|
v-model:value="backend"
|
||||||
:options="backendList.map(item => ({label: item, value: item}))">
|
:options="backendList.map((item: any) => ({label: item, value: item}))">
|
||||||
</ASelect>
|
</ASelect>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -74,7 +74,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="upscale-content-right">
|
<div class="upscale-content-right">
|
||||||
<ACard class="upscale-content-right-container">
|
<ACard class="upscale-content-right-container">
|
||||||
<CompareResult/>
|
<ProcessResult/>
|
||||||
</ACard>
|
</ACard>
|
||||||
</div>
|
</div>
|
||||||
</AFlex>
|
</AFlex>
|
||||||
@@ -84,7 +84,7 @@
|
|||||||
import UploadImage from "@/views/Upscale/UploadImage.vue";
|
import UploadImage from "@/views/Upscale/UploadImage.vue";
|
||||||
import ai from "@/assets/svgs/ai.svg";
|
import ai from "@/assets/svgs/ai.svg";
|
||||||
import run from "@/assets/svgs/run.svg";
|
import run from "@/assets/svgs/run.svg";
|
||||||
import CompareResult from "@/views/Upscale/CompareResult.vue";
|
import ProcessResult from "@/views/Upscale/ProcessResult.vue";
|
||||||
import useStore from "@/store";
|
import useStore from "@/store";
|
||||||
import {message} from "ant-design-vue";
|
import {message} from "ant-design-vue";
|
||||||
import Img from "@/workers/image.ts";
|
import Img from "@/workers/image.ts";
|
||||||
@@ -158,96 +158,10 @@ const backendList = ['webgl', 'webgpu'];
|
|||||||
const backend = ref<string>(backendList[0]);
|
const backend = ref<string>(backendList[0]);
|
||||||
|
|
||||||
// ********************处理图片*******************
|
// ********************处理图片*******************
|
||||||
/**
|
|
||||||
* 函数写法:已废弃,改用WebWorker
|
|
||||||
*/
|
|
||||||
// const output = ref<any>();
|
|
||||||
// const resultUrl = ref<string>();
|
|
||||||
//
|
|
||||||
// async function startTask() {
|
|
||||||
// if (!upscale.input) return;
|
|
||||||
// let outputData: any;
|
|
||||||
// if (upscale.hasAlpha && upscale.inputAlpha) {
|
|
||||||
// outputData = await processImage(
|
|
||||||
// {
|
|
||||||
// input: upscale.inputAlpha.data.buffer,
|
|
||||||
// factor: factor.value,
|
|
||||||
// tile_size: tile_size.value,
|
|
||||||
// min_lap: min_lap.value,
|
|
||||||
// model_type: model_type.value,
|
|
||||||
// width: upscale.inputAlpha.width,
|
|
||||||
// height: upscale.inputAlpha.height,
|
|
||||||
// model: model.value,
|
|
||||||
// backend: backend.value,
|
|
||||||
// hasAlpha: true,
|
|
||||||
// }
|
|
||||||
// );
|
|
||||||
// } else {
|
|
||||||
// outputData = await processImage({
|
|
||||||
// input: upscale.input.data.buffer,
|
|
||||||
// factor: factor.value,
|
|
||||||
// tile_size: tile_size.value,
|
|
||||||
// min_lap: min_lap.value,
|
|
||||||
// model_type: model_type.value,
|
|
||||||
// width: upscale.input.width,
|
|
||||||
// height: upscale.input.height,
|
|
||||||
// model: model.value,
|
|
||||||
// backend: backend.value,
|
|
||||||
// hasAlpha: false
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// if (outputData) {
|
|
||||||
// if (!upscale.hasAlpha || (upscale.hasAlpha && upscale.inputAlpha)) {
|
|
||||||
// if (upscale.input) {
|
|
||||||
// output.value = new Img(
|
|
||||||
// factor.value * upscale.input.width,
|
|
||||||
// factor.value * upscale.input.height,
|
|
||||||
// new Uint8Array(outputData)
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// if (upscale.hasAlpha && upscale.wasmModule) {
|
|
||||||
// const outputArray = new Uint8Array(outputData);
|
|
||||||
// const sourcePtr = upscale.wasmModule._malloc(outputArray.length);
|
|
||||||
// const targetPtr = upscale.wasmModule._malloc(outputArray.length);
|
|
||||||
// const numPixels = outputArray.length / 4;
|
|
||||||
// upscale.wasmModule.HEAPU8.set(outputArray, sourcePtr);
|
|
||||||
// upscale.wasmModule.HEAPU8.set(output.value.data, targetPtr);
|
|
||||||
// upscale.wasmModule._copy_alpha_channel(sourcePtr, targetPtr, numPixels);
|
|
||||||
// output.value.data.set(
|
|
||||||
// upscale.wasmModule.HEAPU8.subarray(
|
|
||||||
// targetPtr,
|
|
||||||
// targetPtr + outputArray.length
|
|
||||||
// )
|
|
||||||
// );
|
|
||||||
// upscale.wasmModule._free(sourcePtr);
|
|
||||||
// upscale.wasmModule._free(targetPtr);
|
|
||||||
// upscale.wasmModule = null;
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// const imgCanvas = document.createElement("canvas");
|
|
||||||
// const imgCtx = imgCanvas.getContext("2d");
|
|
||||||
// imgCanvas.width = output.value.width;
|
|
||||||
// imgCanvas.height = output.value.height;
|
|
||||||
// if (imgCtx) {
|
|
||||||
// let outImg = imgCtx.createImageData(output.value.width, output.value.height);
|
|
||||||
// outImg.data.set(output.value.data);
|
|
||||||
// imgCtx.putImageData(outImg, 0, 0);
|
|
||||||
// let type = "image/jpeg";
|
|
||||||
// let quality = 0.92;
|
|
||||||
// if (upscale.hasAlpha) type = "image/png";
|
|
||||||
// resultUrl.value = imgCanvas.toDataURL(type, quality);
|
|
||||||
// console.log(resultUrl.value);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
const isProcessing = ref<boolean>(false);
|
const isProcessing = ref<boolean>(false);
|
||||||
const msg = ref<string>("");
|
const msg = ref<string>("");
|
||||||
const progressBar = ref<number>(0);
|
const progressBar = ref<number>(0);
|
||||||
const outputData = ref<any>();
|
const outputData = ref<any>();
|
||||||
const processedImg = ref<HTMLImageElement>(new Image());
|
|
||||||
const isDone = ref<boolean>(false);
|
const isDone = ref<boolean>(false);
|
||||||
const imgCanvas = document.createElement("canvas");
|
const imgCanvas = document.createElement("canvas");
|
||||||
|
|
||||||
@@ -256,7 +170,7 @@ const worker = new Worker(new URL("@/workers/upscale.worker.ts", import.meta.url
|
|||||||
});
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* WebWorker写法:使用workerStore
|
* WebWorker 处理图片
|
||||||
*/
|
*/
|
||||||
async function startTask() {
|
async function startTask() {
|
||||||
if (upscale.input === null) return;
|
if (upscale.input === null) return;
|
||||||
@@ -340,27 +254,24 @@ async function startTask() {
|
|||||||
outputData.value = null;
|
outputData.value = null;
|
||||||
imgCtx.putImageData(outImg, 0, 0);
|
imgCtx.putImageData(outImg, 0, 0);
|
||||||
let type = "image/jpeg";
|
let type = "image/jpeg";
|
||||||
let quality = 0.92;
|
const quality = 0.92;
|
||||||
if (upscale.hasAlpha) type = "image/png";
|
if (upscale.hasAlpha) type = "image/png";
|
||||||
if (processedImg.value) {
|
if (upscale.processedImg) {
|
||||||
imgCanvas.toBlob(
|
imgCanvas.toBlob(
|
||||||
(blob: any) => {
|
(blob: any) => {
|
||||||
processedImg.value.src = URL.createObjectURL(blob);
|
upscale.processedImg.src = URL.createObjectURL(blob);
|
||||||
},
|
},
|
||||||
type,
|
type,
|
||||||
quality
|
quality
|
||||||
);
|
);
|
||||||
processedImg.value.onload = () => {
|
upscale.processedImg.onload = () => {
|
||||||
msg.value = "Done! Time used: " + (Date.now() - start) / 1000 + "s";
|
msg.value = "Done! Time used: " + (Date.now() - start) / 1000 + "s";
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
isProcessing.value = false;
|
isProcessing.value = false;
|
||||||
isDone.value = true;
|
isDone.value = true;
|
||||||
console.log(processedImg.value);
|
|
||||||
console.log(msg.value);
|
|
||||||
worker.terminate();
|
worker.terminate();
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
if (upscale.input) {
|
if (upscale.input) {
|
||||||
@@ -382,6 +293,96 @@ async function startTask() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss" src="./index.scss">
|
<style scoped lang="scss">
|
||||||
|
.upscale-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
|
||||||
|
.upscale-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upscale-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin-top: 5px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.upscale-content-left {
|
||||||
|
width: 49%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.upscale-content-left-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
.upscale-divider-title {
|
||||||
|
font-size: 13px;
|
||||||
|
color: rgba(126, 126, 135, 0.99);
|
||||||
|
}
|
||||||
|
|
||||||
|
.upscale-content-left-params {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.upscale-content-params-left {
|
||||||
|
width: 80%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.upscale-content-params-item {
|
||||||
|
width: 30%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.upscale-content-params-title {
|
||||||
|
font-size: 13px;
|
||||||
|
color: rgba(126, 126, 135, 0.99);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.upscale-content-params-right {
|
||||||
|
width: 20%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.upscale-content-right {
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.upscale-content-right-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
@@ -1,91 +0,0 @@
|
|||||||
.upscale-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
|
|
||||||
.upscale-title {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.upscale-content {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
margin-top: 5px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.upscale-content-left {
|
|
||||||
width: 49%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.upscale-content-left-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: auto;
|
|
||||||
|
|
||||||
.upscale-divider-title {
|
|
||||||
font-size: 13px;
|
|
||||||
color: rgba(126, 126, 135, 0.99);
|
|
||||||
}
|
|
||||||
|
|
||||||
.upscale-content-left-params {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.upscale-content-params-left {
|
|
||||||
width: 80%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.upscale-content-params-item {
|
|
||||||
width: 30%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.upscale-content-params-title {
|
|
||||||
font-size: 13px;
|
|
||||||
color: rgba(126, 126, 135, 0.99);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.upscale-content-params-right {
|
|
||||||
width: 20%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.upscale-content-right {
|
|
||||||
width: 50%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.upscale-content-right-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@@ -2,7 +2,7 @@
|
|||||||
#include <stdbool.h>
|
#include <stdbool.h>
|
||||||
|
|
||||||
// Usage - generate js and wasm files
|
// Usage - generate js and wasm files
|
||||||
// emcc imghelper.c -o imghelper.js -O2 -s WASM=1 -s EXPORTED_FUNCTIONS="['_copy_alpha_to_rgb','_check_alpha','_copy_alpha_channel','_malloc','_free']" -s EXPORTED_RUNTIME_METHODS="['ccall', 'cwrap']" -s ALLOW_MEMORY_GROWTH=1 -s MODULARIZE=1 -s EXPORT_ES6=1
|
// emcc imghelper.c -o imghelper.ts -O2 -s WASM=1 -s EXPORTED_FUNCTIONS="['_copy_alpha_to_rgb','_check_alpha','_copy_alpha_channel','_malloc','_free']" -s EXPORTED_RUNTIME_METHODS="['ccall', 'cwrap']" -s ALLOW_MEMORY_GROWTH=1 -s MODULARIZE=1 -s EXPORT_ES6=1
|
||||||
|
|
||||||
bool check_alpha(uint8_t *data, int pixelCount)
|
bool check_alpha(uint8_t *data, int pixelCount)
|
||||||
{
|
{
|
||||||
|
@@ -1,12 +1,15 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
// @ts-nocheck
|
||||||
|
// This file is a modified version of the original imghelper.ts file from Emscripten.
|
||||||
const Module = (() => {
|
const Module = (() => {
|
||||||
let _scriptDir = import.meta.url;
|
const _scriptDir = import.meta.url;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
async function (moduleArg = {}) {
|
async function (moduleArg = {}) {
|
||||||
|
|
||||||
let Module = moduleArg;
|
const Module = moduleArg;
|
||||||
let readyPromiseResolve, readyPromiseReject;
|
let readyPromiseResolve, readyPromiseReject;
|
||||||
let readyPromise = new Promise((resolve, reject) => {
|
const readyPromise = new Promise((resolve, reject) => {
|
||||||
readyPromiseResolve = resolve;
|
readyPromiseResolve = resolve;
|
||||||
readyPromiseReject = reject;
|
readyPromiseReject = reject;
|
||||||
});
|
});
|
||||||
@@ -16,9 +19,9 @@ const Module = (() => {
|
|||||||
let quit_ = (_status, toThrow) => {
|
let quit_ = (_status, toThrow) => {
|
||||||
throw toThrow;
|
throw toThrow;
|
||||||
};
|
};
|
||||||
let ENVIRONMENT_IS_WEB = typeof window == "object";
|
const ENVIRONMENT_IS_WEB = typeof window == "object";
|
||||||
let ENVIRONMENT_IS_WORKER = typeof importScripts == "function";
|
const ENVIRONMENT_IS_WORKER = typeof importScripts == "function";
|
||||||
let ENVIRONMENT_IS_NODE = typeof process == "object" && typeof process.versions == "object" && typeof process.versions.node == "string";
|
const ENVIRONMENT_IS_NODE = typeof process == "object" && typeof process.versions == "object" && typeof process.versions.node == "string";
|
||||||
let scriptDirectory = "";
|
let scriptDirectory = "";
|
||||||
|
|
||||||
function locateFile(path) {
|
function locateFile(path) {
|
||||||
@@ -31,9 +34,9 @@ const Module = (() => {
|
|||||||
let read_, readAsync, readBinary;
|
let read_, readAsync, readBinary;
|
||||||
if (ENVIRONMENT_IS_NODE) {
|
if (ENVIRONMENT_IS_NODE) {
|
||||||
const {createRequire: createRequire} = await import("module");
|
const {createRequire: createRequire} = await import("module");
|
||||||
let require = createRequire(import.meta.url);
|
const require = createRequire(import.meta.url);
|
||||||
let fs = require("fs");
|
const fs = require("fs");
|
||||||
let nodePath = require("path");
|
const nodePath = require("path");
|
||||||
if (ENVIRONMENT_IS_WORKER) {
|
if (ENVIRONMENT_IS_WORKER) {
|
||||||
scriptDirectory = nodePath.dirname(scriptDirectory) + "/";
|
scriptDirectory = nodePath.dirname(scriptDirectory) + "/";
|
||||||
} else {
|
} else {
|
||||||
@@ -80,14 +83,14 @@ const Module = (() => {
|
|||||||
}
|
}
|
||||||
{
|
{
|
||||||
read_ = url => {
|
read_ = url => {
|
||||||
let xhr = new XMLHttpRequest;
|
const xhr = new XMLHttpRequest;
|
||||||
xhr.open("GET", url, false);
|
xhr.open("GET", url, false);
|
||||||
xhr.send(null);
|
xhr.send(null);
|
||||||
return xhr.responseText;
|
return xhr.responseText;
|
||||||
};
|
};
|
||||||
if (ENVIRONMENT_IS_WORKER) {
|
if (ENVIRONMENT_IS_WORKER) {
|
||||||
readBinary = url => {
|
readBinary = url => {
|
||||||
let xhr = new XMLHttpRequest;
|
const xhr = new XMLHttpRequest;
|
||||||
xhr.open("GET", url, false);
|
xhr.open("GET", url, false);
|
||||||
xhr.responseType = "arraybuffer";
|
xhr.responseType = "arraybuffer";
|
||||||
xhr.send(null);
|
xhr.send(null);
|
||||||
@@ -95,7 +98,7 @@ const Module = (() => {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
readAsync = (url, onload, onerror) => {
|
readAsync = (url, onload, onerror) => {
|
||||||
let xhr = new XMLHttpRequest;
|
const xhr = new XMLHttpRequest;
|
||||||
xhr.open("GET", url, true);
|
xhr.open("GET", url, true);
|
||||||
xhr.responseType = "arraybuffer";
|
xhr.responseType = "arraybuffer";
|
||||||
xhr.onload = () => {
|
xhr.onload = () => {
|
||||||
@@ -110,28 +113,27 @@ const Module = (() => {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
const out = Module["print"] || console.log.bind(console);
|
||||||
let out = Module["print"] || console.log.bind(console);
|
const err = Module["printErr"] || console.error.bind(console);
|
||||||
let err = Module["printErr"] || console.error.bind(console);
|
|
||||||
Object.assign(Module, moduleOverrides);
|
Object.assign(Module, moduleOverrides);
|
||||||
moduleOverrides = null;
|
moduleOverrides = null;
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
||||||
if (Module["arguments"]) arguments_ = Module["arguments"];
|
if (Module["arguments"]) arguments_ = Module["arguments"];
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
||||||
if (Module["thisProgram"]) thisProgram = Module["thisProgram"];
|
if (Module["thisProgram"]) thisProgram = Module["thisProgram"];
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
||||||
if (Module["quit"]) quit_ = Module["quit"];
|
if (Module["quit"]) quit_ = Module["quit"];
|
||||||
let wasmBinary;
|
let wasmBinary;
|
||||||
if (Module["wasmBinary"]) wasmBinary = Module["wasmBinary"];
|
if (Module["wasmBinary"]) wasmBinary = Module["wasmBinary"];
|
||||||
let wasmMemory;
|
let wasmMemory;
|
||||||
let ABORT = false;
|
let ABORT = false;
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
||||||
let EXITSTATUS;
|
let EXITSTATUS;
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
||||||
let HEAP8, HEAPU8, HEAP16, HEAPU16, HEAP32, HEAPU32, HEAPF32, HEAPF64;
|
let HEAP8, HEAPU8, HEAP16, HEAPU16, HEAP32, HEAPU32, HEAPF32, HEAPF64;
|
||||||
|
|
||||||
function updateMemoryViews() {
|
function updateMemoryViews() {
|
||||||
let b = wasmMemory.buffer;
|
const b = wasmMemory.buffer;
|
||||||
Module["HEAP8"] = HEAP8 = new Int8Array(b);
|
Module["HEAP8"] = HEAP8 = new Int8Array(b);
|
||||||
Module["HEAP16"] = HEAP16 = new Int16Array(b);
|
Module["HEAP16"] = HEAP16 = new Int16Array(b);
|
||||||
Module["HEAPU8"] = HEAPU8 = new Uint8Array(b);
|
Module["HEAPU8"] = HEAPU8 = new Uint8Array(b);
|
||||||
@@ -142,10 +144,10 @@ const Module = (() => {
|
|||||||
Module["HEAPF64"] = HEAPF64 = new Float64Array(b);
|
Module["HEAPF64"] = HEAPF64 = new Float64Array(b);
|
||||||
}
|
}
|
||||||
|
|
||||||
let __ATPRERUN__ = [];
|
const __ATPRERUN__ = [];
|
||||||
let __ATINIT__ = [];
|
const __ATINIT__ = [];
|
||||||
let __ATPOSTRUN__ = [];
|
const __ATPOSTRUN__ = [];
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
||||||
let runtimeInitialized = false;
|
let runtimeInitialized = false;
|
||||||
|
|
||||||
function preRun() {
|
function preRun() {
|
||||||
@@ -203,7 +205,7 @@ const Module = (() => {
|
|||||||
runDependencyWatcher = null;
|
runDependencyWatcher = null;
|
||||||
}
|
}
|
||||||
if (dependenciesFulfilled) {
|
if (dependenciesFulfilled) {
|
||||||
let callback = dependenciesFulfilled;
|
const callback = dependenciesFulfilled;
|
||||||
dependenciesFulfilled = null;
|
dependenciesFulfilled = null;
|
||||||
callback();
|
callback();
|
||||||
}
|
}
|
||||||
@@ -217,14 +219,14 @@ const Module = (() => {
|
|||||||
ABORT = true;
|
ABORT = true;
|
||||||
EXITSTATUS = 1;
|
EXITSTATUS = 1;
|
||||||
what += ". Build with -sASSERTIONS for more info.";
|
what += ". Build with -sASSERTIONS for more info.";
|
||||||
let e = new WebAssembly.RuntimeError(what);
|
const e = new WebAssembly.RuntimeError(what);
|
||||||
readyPromiseReject(e);
|
readyPromiseReject(e);
|
||||||
throw e;
|
throw e;
|
||||||
}
|
}
|
||||||
|
|
||||||
let dataURIPrefix = "data:application/octet-stream;base64,";
|
const dataURIPrefix = "data:application/octet-stream;base64,";
|
||||||
let isDataURI = filename => filename.startsWith(dataURIPrefix);
|
const isDataURI = filename => filename.startsWith(dataURIPrefix);
|
||||||
let isFileURI = filename => filename.startsWith("file://");
|
const isFileURI = filename => filename.startsWith("file://");
|
||||||
let wasmBinaryFile;
|
let wasmBinaryFile;
|
||||||
if (Module["locateFile"]) {
|
if (Module["locateFile"]) {
|
||||||
wasmBinaryFile = "imghelper.wasm";
|
wasmBinaryFile = "imghelper.wasm";
|
||||||
@@ -273,7 +275,7 @@ const Module = (() => {
|
|||||||
function instantiateAsync(binary, binaryFile, imports, callback) {
|
function instantiateAsync(binary, binaryFile, imports, callback) {
|
||||||
if (!binary && typeof WebAssembly.instantiateStreaming == "function" && !isDataURI(binaryFile) && !isFileURI(binaryFile) && !ENVIRONMENT_IS_NODE && typeof fetch == "function") {
|
if (!binary && typeof WebAssembly.instantiateStreaming == "function" && !isDataURI(binaryFile) && !isFileURI(binaryFile) && !ENVIRONMENT_IS_NODE && typeof fetch == "function") {
|
||||||
return fetch(binaryFile, {credentials: "same-origin"}).then(response => {
|
return fetch(binaryFile, {credentials: "same-origin"}).then(response => {
|
||||||
let result = WebAssembly.instantiateStreaming(response, imports);
|
const result = WebAssembly.instantiateStreaming(response, imports);
|
||||||
return result.then(callback, function (reason) {
|
return result.then(callback, function (reason) {
|
||||||
err(`wasm streaming compile failed: ${reason}`);
|
err(`wasm streaming compile failed: ${reason}`);
|
||||||
err("falling back to ArrayBuffer instantiation");
|
err("falling back to ArrayBuffer instantiation");
|
||||||
@@ -285,7 +287,7 @@ const Module = (() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function createWasm() {
|
function createWasm() {
|
||||||
let info = {"env": wasmImports, "wasi_snapshot_preview1": wasmImports};
|
const info = {"env": wasmImports, "wasi_snapshot_preview1": wasmImports};
|
||||||
|
|
||||||
function receiveInstance(instance, _module) {
|
function receiveInstance(instance, _module) {
|
||||||
wasmExports = instance.exports;
|
wasmExports = instance.exports;
|
||||||
@@ -314,19 +316,19 @@ const Module = (() => {
|
|||||||
return {};
|
return {};
|
||||||
}
|
}
|
||||||
|
|
||||||
let callRuntimeCallbacks = callbacks => {
|
const callRuntimeCallbacks = callbacks => {
|
||||||
while (callbacks.length > 0) {
|
while (callbacks.length > 0) {
|
||||||
callbacks.shift()(Module);
|
callbacks.shift()(Module);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
||||||
let noExitRuntime = Module["noExitRuntime"] || true;
|
const noExitRuntime = Module["noExitRuntime"] || true;
|
||||||
let stackRestore = val => __emscripten_stack_restore(val);
|
const stackRestore = val => __emscripten_stack_restore(val);
|
||||||
let stackSave = () => _emscripten_stack_get_current();
|
const stackSave = () => _emscripten_stack_get_current();
|
||||||
let getHeapMax = () => 2147483648;
|
const getHeapMax = () => 2147483648;
|
||||||
let growMemory = size => {
|
const growMemory = size => {
|
||||||
let b = wasmMemory.buffer;
|
const b = wasmMemory.buffer;
|
||||||
let pages = (size - b.byteLength + 65535) / 65536;
|
const pages = (size - b.byteLength + 65535) / 65536;
|
||||||
try {
|
try {
|
||||||
wasmMemory.grow(pages);
|
wasmMemory.grow(pages);
|
||||||
updateMemoryViews();
|
updateMemoryViews();
|
||||||
@@ -334,36 +336,36 @@ const Module = (() => {
|
|||||||
} catch (_e) { /* empty */
|
} catch (_e) { /* empty */
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
let _emscripten_resize_heap = requestedSize => {
|
const _emscripten_resize_heap = requestedSize => {
|
||||||
let oldSize = HEAPU8.length;
|
const oldSize = HEAPU8.length;
|
||||||
requestedSize >>>= 0;
|
requestedSize >>>= 0;
|
||||||
let maxHeapSize = getHeapMax();
|
const maxHeapSize = getHeapMax();
|
||||||
if (requestedSize > maxHeapSize) {
|
if (requestedSize > maxHeapSize) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
let alignUp = (x, multiple) => x + (multiple - x % multiple) % multiple;
|
const alignUp = (x, multiple) => x + (multiple - x % multiple) % multiple;
|
||||||
for (let cutDown = 1; cutDown <= 4; cutDown *= 2) {
|
for (let cutDown = 1; cutDown <= 4; cutDown *= 2) {
|
||||||
let overGrownHeapSize = oldSize * (1 + .2 / cutDown);
|
let overGrownHeapSize = oldSize * (1 + .2 / cutDown);
|
||||||
overGrownHeapSize = Math.min(overGrownHeapSize, requestedSize + 100663296);
|
overGrownHeapSize = Math.min(overGrownHeapSize, requestedSize + 100663296);
|
||||||
let newSize = Math.min(maxHeapSize, alignUp(Math.max(requestedSize, overGrownHeapSize), 65536));
|
const newSize = Math.min(maxHeapSize, alignUp(Math.max(requestedSize, overGrownHeapSize), 65536));
|
||||||
let replacement = growMemory(newSize);
|
const replacement = growMemory(newSize);
|
||||||
if (replacement) {
|
if (replacement) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
};
|
};
|
||||||
let getCFunc = ident => {
|
const getCFunc = ident => {
|
||||||
let func = Module["_" + ident];
|
const func = Module["_" + ident];
|
||||||
return func;
|
return func;
|
||||||
};
|
};
|
||||||
let writeArrayToMemory = (array, buffer) => {
|
const writeArrayToMemory = (array, buffer) => {
|
||||||
HEAP8.set(array, buffer);
|
HEAP8.set(array, buffer);
|
||||||
};
|
};
|
||||||
let lengthBytesUTF8 = str => {
|
const lengthBytesUTF8 = str => {
|
||||||
let len = 0;
|
let len = 0;
|
||||||
for (let i = 0; i < str.length; ++i) {
|
for (let i = 0; i < str.length; ++i) {
|
||||||
let c = str.charCodeAt(i);
|
const c = str.charCodeAt(i);
|
||||||
if (c <= 127) {
|
if (c <= 127) {
|
||||||
len++;
|
len++;
|
||||||
} else if (c <= 2047) {
|
} else if (c <= 2047) {
|
||||||
@@ -377,14 +379,14 @@ const Module = (() => {
|
|||||||
}
|
}
|
||||||
return len;
|
return len;
|
||||||
};
|
};
|
||||||
let stringToUTF8Array = (str, heap, outIdx, maxBytesToWrite) => {
|
const stringToUTF8Array = (str, heap, outIdx, maxBytesToWrite) => {
|
||||||
if (!(maxBytesToWrite > 0)) return 0;
|
if (!(maxBytesToWrite > 0)) return 0;
|
||||||
let startIdx = outIdx;
|
const startIdx = outIdx;
|
||||||
let endIdx = outIdx + maxBytesToWrite - 1;
|
const endIdx = outIdx + maxBytesToWrite - 1;
|
||||||
for (let i = 0; i < str.length; ++i) {
|
for (let i = 0; i < str.length; ++i) {
|
||||||
let u = str.charCodeAt(i);
|
let u = str.charCodeAt(i);
|
||||||
if (u >= 55296 && u <= 57343) {
|
if (u >= 55296 && u <= 57343) {
|
||||||
let u1 = str.charCodeAt(++i);
|
const u1 = str.charCodeAt(++i);
|
||||||
u = 65536 + ((u & 1023) << 10) | u1 & 1023;
|
u = 65536 + ((u & 1023) << 10) | u1 & 1023;
|
||||||
}
|
}
|
||||||
if (u <= 127) {
|
if (u <= 127) {
|
||||||
@@ -410,17 +412,17 @@ const Module = (() => {
|
|||||||
heap[outIdx] = 0;
|
heap[outIdx] = 0;
|
||||||
return outIdx - startIdx;
|
return outIdx - startIdx;
|
||||||
};
|
};
|
||||||
let stringToUTF8 = (str, outPtr, maxBytesToWrite) => stringToUTF8Array(str, HEAPU8, outPtr, maxBytesToWrite);
|
const stringToUTF8 = (str, outPtr, maxBytesToWrite) => stringToUTF8Array(str, HEAPU8, outPtr, maxBytesToWrite);
|
||||||
let stackAlloc = sz => __emscripten_stack_alloc(sz);
|
const stackAlloc = sz => __emscripten_stack_alloc(sz);
|
||||||
let stringToUTF8OnStack = str => {
|
const stringToUTF8OnStack = str => {
|
||||||
let size = lengthBytesUTF8(str) + 1;
|
const size = lengthBytesUTF8(str) + 1;
|
||||||
let ret = stackAlloc(size);
|
const ret = stackAlloc(size);
|
||||||
stringToUTF8(str, ret, size);
|
stringToUTF8(str, ret, size);
|
||||||
return ret;
|
return ret;
|
||||||
};
|
};
|
||||||
let UTF8Decoder = typeof TextDecoder != "undefined" ? new TextDecoder("utf8") : undefined;
|
const UTF8Decoder = typeof TextDecoder != "undefined" ? new TextDecoder("utf8") : undefined;
|
||||||
let UTF8ArrayToString = (heapOrArray, idx, maxBytesToRead) => {
|
const UTF8ArrayToString = (heapOrArray, idx, maxBytesToRead) => {
|
||||||
let endIdx = idx + maxBytesToRead;
|
const endIdx = idx + maxBytesToRead;
|
||||||
let endPtr = idx;
|
let endPtr = idx;
|
||||||
while (heapOrArray[endPtr] && !(endPtr >= endIdx)) ++endPtr;
|
while (heapOrArray[endPtr] && !(endPtr >= endIdx)) ++endPtr;
|
||||||
if (endPtr - idx > 16 && heapOrArray.buffer && UTF8Decoder) {
|
if (endPtr - idx > 16 && heapOrArray.buffer && UTF8Decoder) {
|
||||||
@@ -433,12 +435,12 @@ const Module = (() => {
|
|||||||
str += String.fromCharCode(u0);
|
str += String.fromCharCode(u0);
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
let u1 = heapOrArray[idx++] & 63;
|
const u1 = heapOrArray[idx++] & 63;
|
||||||
if ((u0 & 224) == 192) {
|
if ((u0 & 224) == 192) {
|
||||||
str += String.fromCharCode((u0 & 31) << 6 | u1);
|
str += String.fromCharCode((u0 & 31) << 6 | u1);
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
let u2 = heapOrArray[idx++] & 63;
|
const u2 = heapOrArray[idx++] & 63;
|
||||||
if ((u0 & 240) == 224) {
|
if ((u0 & 240) == 224) {
|
||||||
u0 = (u0 & 15) << 12 | u1 << 6 | u2;
|
u0 = (u0 & 15) << 12 | u1 << 6 | u2;
|
||||||
} else {
|
} else {
|
||||||
@@ -447,15 +449,15 @@ const Module = (() => {
|
|||||||
if (u0 < 65536) {
|
if (u0 < 65536) {
|
||||||
str += String.fromCharCode(u0);
|
str += String.fromCharCode(u0);
|
||||||
} else {
|
} else {
|
||||||
let ch = u0 - 65536;
|
const ch = u0 - 65536;
|
||||||
str += String.fromCharCode(55296 | ch >> 10, 56320 | ch & 1023);
|
str += String.fromCharCode(55296 | ch >> 10, 56320 | ch & 1023);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return str;
|
return str;
|
||||||
};
|
};
|
||||||
let UTF8ToString = (ptr, maxBytesToRead) => ptr ? UTF8ArrayToString(HEAPU8, ptr, maxBytesToRead) : "";
|
const UTF8ToString = (ptr, maxBytesToRead) => ptr ? UTF8ArrayToString(HEAPU8, ptr, maxBytesToRead) : "";
|
||||||
let ccall = (ident, returnType, argTypes, args, _opts) => {
|
const ccall = (ident, returnType, argTypes, args, _opts) => {
|
||||||
let toC = {
|
const toC = {
|
||||||
"string": str => {
|
"string": str => {
|
||||||
let ret = 0;
|
let ret = 0;
|
||||||
if (str !== null && str !== undefined && str !== 0) {
|
if (str !== null && str !== undefined && str !== 0) {
|
||||||
@@ -463,7 +465,7 @@ const Module = (() => {
|
|||||||
}
|
}
|
||||||
return ret;
|
return ret;
|
||||||
}, "array": arr => {
|
}, "array": arr => {
|
||||||
let ret = stackAlloc(arr.length);
|
const ret = stackAlloc(arr.length);
|
||||||
writeArrayToMemory(arr, ret);
|
writeArrayToMemory(arr, ret);
|
||||||
return ret;
|
return ret;
|
||||||
}
|
}
|
||||||
@@ -477,12 +479,12 @@ const Module = (() => {
|
|||||||
return ret;
|
return ret;
|
||||||
}
|
}
|
||||||
|
|
||||||
let func = getCFunc(ident);
|
const func = getCFunc(ident);
|
||||||
let cArgs = [];
|
const cArgs = [];
|
||||||
let stack = 0;
|
let stack = 0;
|
||||||
if (args) {
|
if (args) {
|
||||||
for (let i = 0; i < args.length; i++) {
|
for (let i = 0; i < args.length; i++) {
|
||||||
let converter = toC[argTypes[i]];
|
const converter = toC[argTypes[i]];
|
||||||
if (converter) {
|
if (converter) {
|
||||||
if (stack === 0) stack = stackSave();
|
if (stack === 0) stack = stackSave();
|
||||||
cArgs[i] = converter(args[i]);
|
cArgs[i] = converter(args[i]);
|
||||||
@@ -501,15 +503,15 @@ const Module = (() => {
|
|||||||
ret = onDone(ret);
|
ret = onDone(ret);
|
||||||
return ret;
|
return ret;
|
||||||
};
|
};
|
||||||
let cwrap = (ident, returnType, argTypes, opts) => {
|
const cwrap = (ident, returnType, argTypes, opts) => {
|
||||||
let numericArgs = !argTypes || argTypes.every(type => type === "number" || type === "boolean");
|
const numericArgs = !argTypes || argTypes.every(type => type === "number" || type === "boolean");
|
||||||
let numericRet = returnType !== "string";
|
const numericRet = returnType !== "string";
|
||||||
if (numericRet && numericArgs && !opts) {
|
if (numericRet && numericArgs && !opts) {
|
||||||
return getCFunc(ident);
|
return getCFunc(ident);
|
||||||
}
|
}
|
||||||
return (...args) => ccall(ident, returnType, argTypes, args, opts);
|
return (...args) => ccall(ident, returnType, argTypes, args, opts);
|
||||||
};
|
};
|
||||||
let wasmImports = {emscripten_resize_heap: _emscripten_resize_heap};
|
const wasmImports = {emscripten_resize_heap: _emscripten_resize_heap};
|
||||||
let wasmExports = createWasm();
|
let wasmExports = createWasm();
|
||||||
let ___wasm_call_ctors = () => (___wasm_call_ctors = wasmExports["__wasm_call_ctors"])();
|
let ___wasm_call_ctors = () => (___wasm_call_ctors = wasmExports["__wasm_call_ctors"])();
|
||||||
let _check_alpha = Module["_check_alpha"] = (a0, a1) => (_check_alpha = Module["_check_alpha"] = wasmExports["check_alpha"])(a0, a1);
|
let _check_alpha = Module["_check_alpha"] = (a0, a1) => (_check_alpha = Module["_check_alpha"] = wasmExports["check_alpha"])(a0, a1);
|
@@ -25,9 +25,9 @@ self.onmessage = async function (e: MessageEvent): Promise<void> {
|
|||||||
try {
|
try {
|
||||||
Model = await tf.loadGraphModel(`indexeddb://${model_name}`);
|
Model = await tf.loadGraphModel(`indexeddb://${model_name}`);
|
||||||
console.log("Model loaded successfully");
|
console.log("Model loaded successfully");
|
||||||
self.postMessage({info: "Loaded from cache"});
|
self.postMessage({info: "Model loaded from cache successfully"});
|
||||||
} catch (_error) {
|
} catch (_error) {
|
||||||
self.postMessage({info: "Downloading model"});
|
self.postMessage({info: "Downloading model..."});
|
||||||
Model = await (async () => {
|
Model = await (async () => {
|
||||||
const fetchedModel = await tf.loadGraphModel(model_url);
|
const fetchedModel = await tf.loadGraphModel(model_url);
|
||||||
await fetchedModel.save(`indexeddb://${model_name}`);
|
await fetchedModel.save(`indexeddb://${model_name}`);
|
||||||
|
@@ -83,16 +83,31 @@ export default defineConfig(({mode}: { mode: string }): object => {
|
|||||||
],
|
],
|
||||||
}),
|
}),
|
||||||
AutoImport({
|
AutoImport({
|
||||||
//安装两行后你会发现在组件中不用再导入ref,reactive等
|
include: [
|
||||||
|
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
|
||||||
|
/\.vue$/,
|
||||||
|
/\.vue\?vue/, // .vue
|
||||||
|
/\.md$/, // .md
|
||||||
|
],
|
||||||
imports: ['vue', 'vue-router', 'pinia', '@vueuse/core'],
|
imports: ['vue', 'vue-router', 'pinia', '@vueuse/core'],
|
||||||
dts: 'auto-import.d.ts',
|
dts: './auto-import.d.ts',
|
||||||
|
defaultExportByFilename: true,
|
||||||
|
dirsScanOptions: {
|
||||||
|
types: true
|
||||||
|
},
|
||||||
|
vueTemplate: true,
|
||||||
|
vueDirectives: true,
|
||||||
|
viteOptimizeDeps: true,
|
||||||
|
injectAtEnd: true,
|
||||||
//ant-design-vue
|
//ant-design-vue
|
||||||
resolvers: [AntDesignVueResolver({
|
resolvers: [AntDesignVueResolver({
|
||||||
importStyle: false,
|
importStyle: false,
|
||||||
resolveIcons: true
|
resolveIcons: true
|
||||||
})],
|
})],
|
||||||
eslintrc: {
|
eslintrc: {
|
||||||
enabled: false // 1、改为true用于生成eslint配置。2、生成后改回false,避免重复生成消耗
|
enabled: false,
|
||||||
|
filepath: './.eslintrc-auto-import.json',
|
||||||
|
globalsPropValue: true
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
nodePolyfills(),
|
nodePolyfills(),
|
||||||
|
Reference in New Issue
Block a user