Skip to content

Commit f8ca209

Browse files
GermeyGermey
authored
Add price for model (#249)
1 parent a6b4cec commit f8ca209

File tree

15 files changed

+231
-227
lines changed

15 files changed

+231
-227
lines changed

‎.github/workflows/deploy.yaml‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,7 @@ jobs:
5252

5353
- name: Get Build Number
5454
run: |
55-
BUILD_NUMBER=$(echo $BUILD_NUMBER)
56-
BUILD_DATE=$(date +'%Y%m%d')
57-
BUILD_TAG="${BUILD_DATE}.${BUILD_NUMBER}"
58-
echo "BUILD_NUMBER=${BUILD_TAG}" >> $GITHUB_ENV
55+
echo $BUILD_NUMBER
5956
6057
- name: Build Docker images
6158
run: docker-compose build

‎change/@acedatacloud-nexior-381a7e51-3c31-4423-9631-18a91a17df97.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "minor",
3+
"comment": "add price support",
4+
"packageName": "@acedatacloud/nexior",
5+
"email": "cqc@cuiqingcai.com",
6+
"dependentChangeType": "patch"
7+
}

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@
5353
"file-saver": "^2.0.5",
5454
"github-markdown-css": "^5.8.1",
5555
"highlight.js": "^11.7.0",
56+
"json-logic-js": "^2.0.5",
5657
"katex": "^0.16.22",
5758
"mac-scrollbar": "^0.13.5",
5859
"markdown-it": "^14.1.0",
@@ -78,6 +79,7 @@
7879
"@rollup/plugin-replace": "^3.0.0",
7980
"@transmart/cli": "^0.5.2",
8081
"@types/file-saver": "^2.0.7",
82+
"@types/json-logic-js": "^2.0.8",
8183
"@types/markdown-it": "^14.1.0",
8284
"@types/node": "^16.7.4",
8385
"@types/psl": "^1.1.3",

‎src/components/common/Consumption.vue‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<div v-if="value !== null && value !== undefined" class="text-center text-[var(--el-text-color-secondary)] mb-1">
3+
<font-awesome-icon icon="fa-solid fa-coins" class="text-xs mr-1" />
4+
<span class="text-xs">
5+
{{ value }}
6+
{{ $t(`service.unit.${service?.unit || 'credits'}`) }}
7+
</span>
8+
</div>
9+
</template>
10+
11+
<script lang="ts">
12+
import { defineComponent } from 'vue';
13+
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
14+
import { IService } from '@/models';
15+
16+
export default defineComponent({
17+
name: 'Consumption',
18+
components: {
19+
FontAwesomeIcon
20+
},
21+
props: {
22+
value: {
23+
type: Number,
24+
required: false,
25+
default: null
26+
},
27+
service: {
28+
type: Object as () => IService | undefined,
29+
required: true
30+
}
31+
}
32+
});
33+
</script>

‎src/components/flux/ConfigPanel.vue‎

Lines changed: 19 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
<template>
2-
<div class="panel">
3-
<div class="config">
2+
<div class="flex flex-col h-full">
3+
<div class="flex-1 overflow-y-auto p-[15px]">
44
<prompt-input class="mb-4" />
55
<model-selector class="mb-4" />
66
<count-selector class="mb-4" />
7-
<div class="actions">
8-
<el-button type="primary" class="btn w-full" round @click="onGenerate">
9-
<font-awesome-icon icon="fa-solid fa-magic" class="mr-2" />
10-
{{ $t('flux.button.generate') }}
11-
</el-button>
12-
</div>
7+
</div>
8+
<div class="flex flex-col items-center justify-center px-[15px] pb-[15px]">
9+
<consumption :value="consumption" :service="service" />
10+
<el-button type="primary" class="btn w-full" round @click="onGenerate">
11+
<font-awesome-icon icon="fa-solid fa-magic" class="mr-2" />
12+
{{ $t('flux.button.generate') }}
13+
</el-button>
1314
</div>
1415
</div>
1516
</template>
@@ -21,6 +22,8 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
2122
import ModelSelector from './config/ModelSelector.vue';
2223
import CountSelector from './config/CountSelector.vue';
2324
import PromptInput from './config/PromptInput.vue';
25+
import Consumption from '../common/Consumption.vue';
26+
import { getConsumption } from '@/utils';
2427
2528
export default defineComponent({
2629
name: 'PresetPanel',
@@ -29,12 +32,19 @@ export default defineComponent({
2932
FontAwesomeIcon,
3033
PromptInput,
3134
ModelSelector,
32-
CountSelector
35+
CountSelector,
36+
Consumption
3337
},
3438
emits: ['generate'],
3539
computed: {
3640
config() {
3741
return this.$store.state.flux?.config;
42+
},
43+
consumption() {
44+
return getConsumption(this.config, this.service?.metadata?.price);
45+
},
46+
service() {
47+
return this.$store.state.flux?.service;
3848
}
3949
},
4050
methods: {
@@ -44,27 +54,3 @@ export default defineComponent({
4454
}
4555
});
4656
</script>
47-
48-
<style lang="scss" scoped>
49-
.panel {
50-
padding: 15px;
51-
display: flex;
52-
flex-direction: column;
53-
flex: 1;
54-
height: calc(100% - 40px);
55-
.config {
56-
width: 100%;
57-
height: calc(100% - 50px);
58-
flex: 1;
59-
}
60-
.actions {
61-
height: 50px;
62-
display: flex;
63-
justify-content: center;
64-
align-items: center;
65-
.btn {
66-
width: 100%;
67-
}
68-
}
69-
}
70-
</style>

‎src/components/hailuo/ConfigPanel.vue‎

Lines changed: 30 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,26 @@
11
<template>
2-
<div class="panel">
3-
<div class="config">
2+
<div class="flex flex-col h-full">
3+
<div class="flex-1 overflow-y-auto p-[15px]">
44
<prompt-input class="mb-4" />
55
<model-selector class="mb-4" />
66
<start-image-url-input v-if="config?.model === 'minimax-i2v'" class="mb-2" />
7-
<div class="actions">
8-
<el-button
9-
v-if="config?.video_url !== undefined || config?.custom"
10-
type="primary"
11-
class="btn w-full"
12-
round
13-
@click="onGenerate"
14-
>
15-
<font-awesome-icon icon="fa-solid fa-magic" class="mr-2" />
16-
{{ $t('hailuo.button.extend') }}
17-
</el-button>
18-
<el-button v-else type="primary" class="btn w-full" round @click="onGenerate">
19-
<font-awesome-icon icon="fa-solid fa-magic" class="mr-2" />
20-
{{ $t('hailuo.button.generate') }}
21-
</el-button>
22-
</div>
7+
</div>
8+
<div class="flex flex-col items-center justify-center px-[15px] pb-[15px]">
9+
<consumption :value="consumption" :service="service" />
10+
<el-button
11+
v-if="config?.video_url !== undefined || config?.custom"
12+
type="primary"
13+
class="btn w-full"
14+
round
15+
@click="onGenerate"
16+
>
17+
<font-awesome-icon icon="fa-solid fa-magic" class="mr-2" />
18+
{{ $t('hailuo.button.extend') }}
19+
</el-button>
20+
<el-button v-else type="primary" class="btn w-full" round @click="onGenerate">
21+
<font-awesome-icon icon="fa-solid fa-magic" class="mr-2" />
22+
{{ $t('hailuo.button.generate') }}
23+
</el-button>
2324
</div>
2425
</div>
2526
</template>
@@ -31,19 +32,29 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
3132
import ModelSelector from './config/ModelSelector.vue';
3233
import StartImageUrlInput from './config/StartImageUrlInput.vue';
3334
import PromptInput from './config/PromptInput.vue';
35+
import Consumption from '../common/Consumption.vue';
36+
import { getConsumption } from '@/utils';
37+
3438
export default defineComponent({
3539
name: 'PresetPanel',
3640
components: {
3741
ElButton,
3842
FontAwesomeIcon,
3943
PromptInput,
4044
StartImageUrlInput,
41-
ModelSelector
45+
ModelSelector,
46+
Consumption
4247
},
4348
emits: ['generate'],
4449
computed: {
4550
config() {
4651
return this.$store.state.hailuo?.config;
52+
},
53+
consumption() {
54+
return getConsumption(this.config, this.service?.metadata?.price);
55+
},
56+
service() {
57+
return this.$store.state.hailuo?.service;
4758
}
4859
},
4960
methods: {
@@ -53,28 +64,3 @@ export default defineComponent({
5364
}
5465
});
5566
</script>
56-
57-
<style lang="scss" scoped>
58-
.panel {
59-
height: 100%;
60-
padding: 15px;
61-
display: flex;
62-
flex-direction: column;
63-
flex: 1;
64-
height: calc(100% - 40px);
65-
.config {
66-
width: 100%;
67-
height: calc(100% - 50px);
68-
flex: 1;
69-
}
70-
.actions {
71-
height: 50px;
72-
display: flex;
73-
justify-content: center;
74-
align-items: center;
75-
.btn {
76-
width: 100%;
77-
}
78-
}
79-
}
80-
</style>

‎src/components/kling/ConfigPanel.vue‎

Lines changed: 28 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<div class="panel">
3-
<div class="config">
2+
<div class="flex flex-col h-full">
3+
<div class="flex-1 overflow-y-auto p-[15px]">
44
<prompt-input class="mb-4" />
55
<model-selector class="mb-4" />
66
<ratio-selector class="mb-4" />
@@ -10,22 +10,23 @@
1010
<mode-selector class="mb-4" />
1111
<cfg-scale-selector class="mb-4" />
1212
<negative-prompt-input class="mb-4" />
13-
<div class="actions">
14-
<el-button
15-
v-if="config?.video_url !== undefined || config?.custom"
16-
type="primary"
17-
class="btn w-full"
18-
round
19-
@click="onGenerate"
20-
>
21-
<font-awesome-icon icon="fa-solid fa-magic" class="mr-2" />
22-
{{ $t('kling.button.extend') }}
23-
</el-button>
24-
<el-button v-else type="primary" class="btn w-full" round @click="onGenerate">
25-
<font-awesome-icon icon="fa-solid fa-magic" class="mr-2" />
26-
{{ $t('kling.button.generate') }}
27-
</el-button>
28-
</div>
13+
</div>
14+
<div class="flex flex-col items-center justify-center px-[15px] pb-[15px]">
15+
<consumption :value="consumption" :service="service" />
16+
<el-button
17+
v-if="config?.video_url !== undefined || config?.custom"
18+
type="primary"
19+
class="btn w-full"
20+
round
21+
@click="onGenerate"
22+
>
23+
<font-awesome-icon icon="fa-solid fa-magic" class="mr-2" />
24+
{{ $t('kling.button.extend') }}
25+
</el-button>
26+
<el-button v-else type="primary" class="btn w-full" round @click="onGenerate">
27+
<font-awesome-icon icon="fa-solid fa-magic" class="mr-2" />
28+
{{ $t('kling.button.generate') }}
29+
</el-button>
2930
</div>
3031
</div>
3132
</template>
@@ -40,14 +41,17 @@ import DurationSelector from './config/DurationSelector.vue';
4041
import RatioSelector from './config/RatioSelector.vue';
4142
import StartImage from './config/StartImage.vue';
4243
import EndImage from './config/EndImage.vue';
44+
import Consumption from '../common/Consumption.vue';
4345
import CfgScaleSelector from './config/CfgScaleSelector.vue';
4446
import PromptInput from './config/PromptInput.vue';
4547
import NegativePromptInput from './config/NegativePromptInput.vue';
48+
import { getConsumption } from '@/utils';
4649
4750
export default defineComponent({
4851
name: 'ConfigPanel',
4952
components: {
5053
ElButton,
54+
Consumption,
5155
FontAwesomeIcon,
5256
PromptInput,
5357
NegativePromptInput,
@@ -63,6 +67,12 @@ export default defineComponent({
6367
computed: {
6468
config() {
6569
return this.$store.state.kling?.config;
70+
},
71+
consumption() {
72+
return getConsumption(this.config, this.service?.metadata?.price);
73+
},
74+
service() {
75+
return this.$store.state.kling?.service;
6676
}
6777
},
6878
methods: {
@@ -72,28 +82,3 @@ export default defineComponent({
7282
}
7383
});
7484
</script>
75-
76-
<style lang="scss" scoped>
77-
.panel {
78-
height: 100%;
79-
padding: 15px;
80-
display: flex;
81-
flex-direction: column;
82-
flex: 1;
83-
height: calc(100% - 40px);
84-
.config {
85-
width: 100%;
86-
height: calc(100% - 50px);
87-
flex: 1;
88-
}
89-
.actions {
90-
height: 50px;
91-
display: flex;
92-
justify-content: center;
93-
align-items: center;
94-
.btn {
95-
width: 100%;
96-
}
97-
}
98-
}
99-
</style>

‎src/components/kling/config/ModelSelector.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export default defineComponent({
8989
width: 30%;
9090
}
9191
.value {
92-
width: 80px;
92+
width: 120px;
9393
}
9494
}
9595
</style>

0 commit comments

Comments
 (0)