Skip to content

Commit

Permalink
update models
Browse files Browse the repository at this point in the history
  • Loading branch information
Germey committed Dec 30, 2023
1 parent e2d1b83 commit e9474ba
Show file tree
Hide file tree
Showing 9 changed files with 160 additions and 26 deletions.
144 changes: 129 additions & 15 deletions src/components/chat/InputBox.vue
Original file line number Diff line number Diff line change
@@ -1,23 +1,58 @@
<template>
<div class="input-box">
<el-upload
v-model:file-list="fileList"
class="upload"
name="file"
:show-file-list="true"
:limit="1"
:multiple="false"
action="/api/v1/files/"
:on-exceed="onExceed"
:on-error="onError"
:headers="headers"
>
<el-tooltip class="box-item" effect="dark" :content="$t('chat.message.uploadFile')" placement="top">
<span class="btn btn-upload">
<font-awesome-icon icon="fa-solid fa-paperclip" class="icon icon-attachment" />
</span>
</el-tooltip>
</el-upload>
<span
:class="{
btn: true,
'btn-send': true,
disabled: !value
}"
@click="onSubmit"
>
<font-awesome-icon icon="fa-solid fa-location-arrow" class="icon icon-send" />
</span>
<el-input
v-model="value"
:rows="2"
:rows="1"
class="input"
type="textarea"
:placeholder="$t('chat.message.newMessagePlaceholder')"
@keydown.enter.exact.prevent="onSubmit"
/>
>
</el-input>
<p class="info">{{ $t('chat.message.howToUse') }}</p>
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { ElInput } from 'element-plus';
import { ElInput, ElMessage, ElTooltip, ElUpload } from 'element-plus';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
export default defineComponent({
name: 'InputBox',
components: {
ElInput
ElInput,
ElTooltip,
FontAwesomeIcon,
ElUpload
},
props: {
modelValue: {
Expand All @@ -28,9 +63,21 @@ export default defineComponent({
emits: ['update:modelValue', 'submit'],
data() {
return {
value: this.modelValue
value: this.modelValue,
fileList: []
};
},
computed: {
headers() {
return {
Authorization: `Bearer ${this.$store.state.token.access}`
};
},
urls() {
// @ts-ignore
return this.fileList.map((file: UploadFile) => file?.response?.file_url);
}
},
watch: {
value(val) {
this.$emit('update:modelValue', val);
Expand All @@ -43,24 +90,91 @@ export default defineComponent({
},
methods: {
onSubmit() {
if (!this.value) {
return;
}
this.$emit('submit', this.value);
},
onExceed() {
ElMessage.warning(this.$t('chat.message.uploadReferencesExceed'));
},
onError() {
ElMessage.error(this.$t('chat.message.uploadReferencesError'));
}
}
});
</script>

<style lang="scss">
.input-box {
.input {
textarea {
border: none;
background: none;
box-shadow: none;
resize: none;
line-height: 25px;
}
}
.el-upload-list {
position: absolute;
width: 200px;
bottom: 40px;
}
}
</style>

<style lang="scss" scoped>
.sidebar {
display: flex;
flex-direction: column;
align-items: flex-end;
.top {
display: flex;
flex-direction: column;
.input-box {
position: relative;
width: 100%;
border: 1px solid #eee;
border-radius: 10px;
background: none;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
top: 40px;
.upload {
display: inline-block;
}
.input {
border: none;
width: calc(100% - 80px);
margin-left: 30px;
}
.bottom {
display: flex;
flex-direction: column;
.info {
display: block;
position: absolute;
font-size: 12px;
color: #666;
margin-top: 5px;
margin-left: 3px;
}
.btn {
display: block;
z-index: 10000;
cursor: pointer;
position: absolute;
top: 4px;
&.btn-upload {
left: 10px;
.icon-attachment {
font-size: 14px;
color: #666;
}
}
&.btn-send {
right: 15px;
&.disabled {
.icon-send {
color: #eee;
}
cursor: not-allowed;
}
.icon-send {
font-size: 16px;
color: #666;
}
}
}
}
</style>
3 changes: 2 additions & 1 deletion src/components/chat/ModelSelector.vue
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import {
CHAT_MODEL_CHATGPT,
CHAT_MODEL_CHATGPT4,
CHAT_MODEL_CHATGPT4_BROWSING,
CHAT_MODEL_CHATGPT4_VISION,
CHAT_MODEL_CHATGPT_16K,
CHAT_MODEL_CHATGPT_BROWSING
} from '@/operators/chat/constants';
Expand All @@ -52,7 +53,7 @@ const GROUPS = [
label: '4.0',
value: 'plus',
icon: 'fa-solid fa-wand-magic-sparkles',
options: [CHAT_MODEL_CHATGPT4, CHAT_MODEL_CHATGPT4_BROWSING]
options: [CHAT_MODEL_CHATGPT4, CHAT_MODEL_CHATGPT4_BROWSING, CHAT_MODEL_CHATGPT4_VISION]
}
];
Expand Down
2 changes: 1 addition & 1 deletion src/components/midjourney/tasks/TaskPreview.vue
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
<font-awesome-icon icon="fa-solid fa-circle-info" class="mr-1" />
{{ $t('midjourney.field.failureReason') }}:
{{ modelValue?.response?.detail }}
<copy-to-clipboard :content="modelValue?.response?.detail" class="btn-copy" />
<copy-to-clipboard :content="modelValue?.response?.detail!" class="btn-copy" />
</p>
<p class="description">
<font-awesome-icon icon="fa-solid fa-hashtag" class="mr-1" />
Expand Down
5 changes: 4 additions & 1 deletion src/i18n/zh/chat/message.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
export default {
startNewChat: '开始新的会话',
uploadFile: '上传文件',
noToken: '请先申请对应服务',
newMessagePlaceholder: '请输入你的问题...',
noInput: '问题不能为空',
uploadReferencesExceed: '最多只能上传 1 个文件',
uploadReferencesError: '上传文件失败,请稍后重试',
notApplied: '您尚未申请该服务,请先申请',
tryForFree: '免费使用',
initializing: '初始化中,请稍后...',
Expand All @@ -23,6 +26,6 @@ export default {
errorUsedUp: '您的套餐次数已经用完,请购买更多次数继续使用',
errorUnknown: '服务器出现未知错误,请稍后重试或联系客服',
errorTimeout: '回答问题超时,请稍后重试',
howToBreakLine: '按 Shift+Enter 键可以换行',
howToUse: '按 Shift+Enter 键可以换行',
noConversations: '没有历史会话,请先发起一个新的会话'
};
14 changes: 11 additions & 3 deletions src/operators/chat/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,14 @@ export const CHAT_MODEL_NAME_CHATGPT4 = 'chatgpt4';
export const CHAT_MODEL_NAME_CHATGPT_16K = 'chatgpt-16k';
export const CHAT_MODEL_NAME_CHATGPT_BROWSING = 'chatgpt-browsing';
export const CHAT_MODEL_NAME_CHATGPT4_BROWSING = 'chatgpt4-browsing';
export const CHAT_MODEL_NAME_CHATGPT4_VISION = 'chatgpt4-vision';

export const API_ID_CHATGPT = '1d58971c-e3cd-4713-a3ce-854a731adb14';
export const API_ID_CHATGPT_16K = 'bf93bb28-55a7-4428-ad82-156bf410f4e2';
export const API_ID_CHATGPT_BROWSING = '12271e2e-794f-4079-a714-f68dd0df7808';
export const API_ID_CHATGPT4 = '1c4e8fa3-362b-4e0a-b0fd-9ff9fc173b77';
export const API_ID_CHATGPT4_BROWSING = 'a61de51b-d0d0-48a2-9a17-1d4986d5d497';
export const API_ID_CHATGPT4_VISION = '098c6e4a-14ae-4ff1-8d2f-0968532a4638';

export const CHAT_MODEL_CHATGPT: IChatModel = {
apiId: API_ID_CHATGPT,
Expand All @@ -25,13 +27,13 @@ export const CHAT_MODEL_CHATGPT: IChatModel = {
export const CHAT_MODEL_CHATGPT_16K: IChatModel = {
apiId: API_ID_CHATGPT_16K,
name: CHAT_MODEL_NAME_CHATGPT_16K,
displayName: '3.5 - 16k'
displayName: '3.5 - 16K'
};

export const CHAT_MODEL_CHATGPT_BROWSING: IChatModel = {
apiId: API_ID_CHATGPT_BROWSING,
name: CHAT_MODEL_NAME_CHATGPT_BROWSING,
displayName: '3.5 - 联网版'
displayName: '3.5 - 联网'
};

export const CHAT_MODEL_CHATGPT4: IChatModel = {
Expand All @@ -43,5 +45,11 @@ export const CHAT_MODEL_CHATGPT4: IChatModel = {
export const CHAT_MODEL_CHATGPT4_BROWSING: IChatModel = {
apiId: API_ID_CHATGPT4_BROWSING,
name: CHAT_MODEL_NAME_CHATGPT4_BROWSING,
displayName: '4.0 - 联网版'
displayName: '4.0 - 联网'
};

export const CHAT_MODEL_CHATGPT4_VISION: IChatModel = {
apiId: API_ID_CHATGPT4_VISION,
name: CHAT_MODEL_NAME_CHATGPT4_VISION,
displayName: '4.0 - 视觉'
};
4 changes: 3 additions & 1 deletion src/operators/chat/models.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {
CHAT_MODEL_NAME_CHATGPT,
CHAT_MODEL_NAME_CHATGPT4,
CHAT_MODEL_NAME_CHATGPT4_BROWSING,
CHAT_MODEL_NAME_CHATGPT4_VISION,
CHAT_MODEL_NAME_CHATGPT_16K,
CHAT_MODEL_NAME_CHATGPT_BROWSING,
ROLE_ASSISTANT,
Expand All @@ -14,7 +15,8 @@ export type IChatModelName =
| typeof CHAT_MODEL_NAME_CHATGPT4
| typeof CHAT_MODEL_NAME_CHATGPT_16K
| typeof CHAT_MODEL_NAME_CHATGPT_BROWSING
| typeof CHAT_MODEL_NAME_CHATGPT4_BROWSING;
| typeof CHAT_MODEL_NAME_CHATGPT4_BROWSING
| typeof CHAT_MODEL_NAME_CHATGPT4_VISION;

export interface IChatModel {
apiId: string;
Expand Down
2 changes: 1 addition & 1 deletion src/pages/chat/Conversation.vue
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,7 @@ export default defineComponent({
}
.bottom {
width: 100%;
height: 70px;
height: 100px;
}
}
</style>
4 changes: 4 additions & 0 deletions src/plugins/font-awesome.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import {
faClock as faRegularClock
} from '@fortawesome/free-regular-svg-icons';
import {
faLocationArrow as faSolidLocationArrow,
faPaperclip as faSolidPaperclip,
faHashtag as faSolidHashtag,
faCircleInfo as faSolidCircleInfo,
faChevronLeft as faSolidChevronLeft,
Expand Down Expand Up @@ -38,10 +40,12 @@ import {
faXmark as faSolidXmark
} from '@fortawesome/free-solid-svg-icons';
library.add(faRegularCopy);
library.add(faSolidPaperclip);
library.add(faSolidXmark);
library.add(faSolidRotateRight);
library.add(faSolidPenToSquare);
library.add(faSolidCheck);
library.add(faSolidLocationArrow);
library.add(faRegularUser);
library.add(faRegularSun);
library.add(faSolidBolt);
Expand Down
8 changes: 5 additions & 3 deletions src/store/chat/actions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {
CHAT_MODEL_CHATGPT,
CHAT_MODEL_CHATGPT4,
CHAT_MODEL_CHATGPT4_BROWSING,
CHAT_MODEL_CHATGPT4_VISION,
CHAT_MODEL_CHATGPT_16K,
CHAT_MODEL_CHATGPT_BROWSING,
IApplication,
Expand Down Expand Up @@ -36,7 +37,7 @@ export const setConversation = async ({ commit, state }: any, payload: IChatConv
if (index > -1) {
conversations[index] = payload;
} else {
conversations.push(payload);
conversations.unshift(payload);
}
commit('setConversations', conversations);
log(setConversation, 'set conversation success', conversations);
Expand All @@ -55,7 +56,8 @@ export const getApplications = async ({
CHAT_MODEL_CHATGPT_16K.apiId,
CHAT_MODEL_CHATGPT_BROWSING.apiId,
CHAT_MODEL_CHATGPT4.apiId,
CHAT_MODEL_CHATGPT4_BROWSING.apiId
CHAT_MODEL_CHATGPT4_BROWSING.apiId,
CHAT_MODEL_CHATGPT4_VISION.apiId
]
});
log(getApplications, 'get application for chat success', applications);
Expand All @@ -78,7 +80,7 @@ export const getConversations = async ({
// @ts-ignore
application_id: state.applications?.map((application) => application.id),
offset: 0,
limit: 30,
limit: 50,
ordering: '-created_at'
});
log(getConversations, 'get api usages success', apiUsages);
Expand Down

0 comments on commit e9474ba

Please sign in to comment.