|
|
@@ -0,0 +1,256 @@
|
|
|
+<template>
|
|
|
+ <div class="page" :style="{ backgroundImage: `url(${require('@/assets/bgBody.png')})` }">
|
|
|
+ <van-sticky>
|
|
|
+ <div class="padding-safe-top">
|
|
|
+ <van-nav-bar title="ChatGPT小助手" left-text="" right-text="" left-arrow @click-left="$router.go(-1)" />
|
|
|
+ </div>
|
|
|
+ </van-sticky>
|
|
|
+ <div class="container" :style="{ backgroundImage: `url(${require('@/assets/aibg.png')})` }">
|
|
|
+ <div class="card">
|
|
|
+ <van-form @submit="submit">
|
|
|
+ <div class="title">问题描述</div>
|
|
|
+ <!-- <el-input
|
|
|
+ class="question"
|
|
|
+ v-model="prompt"
|
|
|
+ placeholder="请详细说明，以便于我们解决问题，您最多可填写300字。"
|
|
|
+ type="textarea"
|
|
|
+ :rows="5"
|
|
|
+ :autosize="{ minRows: 6, maxRows: 6 }"
|
|
|
+ maxlength="300"
|
|
|
+ show-word-limit
|
|
|
+ ></el-input> -->
|
|
|
+ <van-field
|
|
|
+ v-model="prompt"
|
|
|
+ rows="5"
|
|
|
+ autosize
|
|
|
+ label=""
|
|
|
+ type="textarea"
|
|
|
+ maxlength="300"
|
|
|
+ placeholder="请详细说明，以便于我们解决问题，您最多可填写300字。"
|
|
|
+ show-word-limit
|
|
|
+ :border="false"
|
|
|
+ />
|
|
|
+ <div class="btn-content">
|
|
|
+ <van-button
|
|
|
+ type="primary"
|
|
|
+ native-type="submit"
|
|
|
+ block
|
|
|
+ id="btn-submit"
|
|
|
+ auto-insert-space
|
|
|
+ :loading="loading"
|
|
|
+ size="large"
|
|
|
+ round
|
|
|
+ >提交</van-button
|
|
|
+ >
|
|
|
+
|
|
|
+ <!-- <el-button
|
|
|
+ @click="submit"
|
|
|
+ type="primary"
|
|
|
+ block
|
|
|
+ id="btn-submit"
|
|
|
+ auto-insert-space
|
|
|
+ :loading="loading"
|
|
|
+ size="large"
|
|
|
+ color="#3AB200"
|
|
|
+ round
|
|
|
+ >
|
|
|
+ 提交
|
|
|
+ </el-button> -->
|
|
|
+ </div>
|
|
|
+ </van-form>
|
|
|
+
|
|
|
+ <div class="title" style="color: #00d814; margin-top: 20px" v-if="answer">来自AI的回答：</div>
|
|
|
+ <div class="answer" v-if="answer">
|
|
|
+ <p style="word-break: break-word" v-html="answer"></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="tips">
|
|
|
+ RAEXBOT IMPORTANT NOTICE:<br />
|
|
|
+ 本版本为内部测试版，不得用于公开活动，请不要使用限定词汇或进行限定问题的提问，因此有可能产生的法律责任，由提问人承担。<br />RAEXBOT'S
|
|
|
+ open resource by ChatGPT Feb 13 Version. Free and testing research<br />
|
|
|
+ preview. Our goal is to make a systems more natural and safe to interact with. Your <br />feedback will
|
|
|
+ help us improve.<br />TEAM RAEXBOT<br />
|
|
|
+ FEB, 2023
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, onMounted } from 'vue';
|
|
|
+import { Toast } from 'vant';
|
|
|
+import http from '../../plugins/http';
|
|
|
+import axios from 'axios';
|
|
|
+
|
|
|
+const prompt = ref('');
|
|
|
+const loading = ref(false);
|
|
|
+const answer = ref('');
|
|
|
+const token = ref('');
|
|
|
+// axios.defaults.headers.common['Authorization'] = 'Bearer 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';
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ http.http.get('sysConfig/get/chatGPT_token').then(res => {
|
|
|
+ token.value = res.value;
|
|
|
+ axios.defaults.headers.common['Authorization'] = 'Bearer ' + res.value;
|
|
|
+ });
|
|
|
+});
|
|
|
+
|
|
|
+const submit = () => {
|
|
|
+ if (!prompt.value) {
|
|
|
+ Toast('请输入问题');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ loading.value = true;
|
|
|
+ answer.value = '';
|
|
|
+ axios
|
|
|
+ .post(
|
|
|
+ 'https://api.openai.com/v1/completions',
|
|
|
+ {
|
|
|
+ model: 'text-davinci-003',
|
|
|
+ prompt: prompt.value,
|
|
|
+ temperature: 1,
|
|
|
+ max_tokens: 2000
|
|
|
+ },
|
|
|
+ {
|
|
|
+ headers: {
|
|
|
+ Authorization: 'Bearer ' + token.value
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .then(res => {
|
|
|
+ console.log(res.data);
|
|
|
+ loading.value = false;
|
|
|
+ answer.value = res.data.choices[0].text.trim().replace(/\n/g, '<br />');
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ if (e.response) {
|
|
|
+ console.log(e.response.data);
|
|
|
+ loading.value = false;
|
|
|
+ Toast(e.response.data.error.message);
|
|
|
+ } else {
|
|
|
+ Toast('网络错误');
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.page {
|
|
|
+ background: #1c1c1c;
|
|
|
+ min-height: var(--app-height) !important;
|
|
|
+ background: repeat top/100% auto;
|
|
|
+}
|
|
|
+.van-nav-bar {
|
|
|
+ --van-nav-bar-background-color: #1c1c1c;
|
|
|
+ --van-nav-bar-icon-color: #fff;
|
|
|
+ --van-nav-bar-title-text-color: #fff;
|
|
|
+ --van-nav-bar-text-color: #fff;
|
|
|
+ --van-border-color: #1c1c1c;
|
|
|
+ --van-nav-bar-title-font-size: 16px;
|
|
|
+ --van-font-weight-bold: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.iframe-page {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(var(--app-height) - var(--van-nav-bar-height) - var(--safe-top));
|
|
|
+ border: none;
|
|
|
+ background-color: #1c1c1c;
|
|
|
+ display: block;
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.container {
|
|
|
+ background: no-repeat top/100% auto;
|
|
|
+ padding-top: calc(100vw * 207 / 375);
|
|
|
+}
|
|
|
+.card {
|
|
|
+ margin: 0 15px;
|
|
|
+ background: rgba(61, 61, 61, 0.77);
|
|
|
+ border-radius: 17px;
|
|
|
+ padding: 16px 16px 34px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ // min-height: calc(100vh - (100vw * 180 / 375));
|
|
|
+ textarea {
|
|
|
+ background-color: #575656;
|
|
|
+ border-width: 0;
|
|
|
+ outline: none;
|
|
|
+ color: #fff;
|
|
|
+ box-shadow: none;
|
|
|
+ border-radius: 16px;
|
|
|
+ padding: 16px;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 27px;
|
|
|
+ }
|
|
|
+ .question {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+#btn-submit {
|
|
|
+ width: 100%;
|
|
|
+ --van-button-primary-background-color: #00d814;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: normal;
|
|
|
+ box-shadow: 0px 0px 6px 2px #00d814;
|
|
|
+ height: 37px;
|
|
|
+}
|
|
|
+.btn-content {
|
|
|
+ padding: 34px 22px 0px;
|
|
|
+}
|
|
|
+.answer {
|
|
|
+ background: #575656;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #00d814;
|
|
|
+ line-height: 17px;
|
|
|
+ padding: 12px;
|
|
|
+ margin-top: 10px;
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.tips {
|
|
|
+ font-size: 9px;
|
|
|
+ font-weight: 700;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ line-height: 16px;
|
|
|
+ color: rgba(150, 150, 150, 1);
|
|
|
+ text-align: center;
|
|
|
+ vertical-align: top;
|
|
|
+ padding: 68px 16px;
|
|
|
+}
|
|
|
+@media screen and (min-width: 768px) {
|
|
|
+ .container {
|
|
|
+ width: 500px;
|
|
|
+ margin: auto;
|
|
|
+ padding-top: 240px;
|
|
|
+ }
|
|
|
+ .card {
|
|
|
+ min-height: calc(100vh - 240px);
|
|
|
+ }
|
|
|
+}
|
|
|
+.van-field {
|
|
|
+ background-color: #575656;
|
|
|
+ border-radius: 16px;
|
|
|
+ margin-top: 10px;
|
|
|
+ --van-cell-vertical-padding: 16px;
|
|
|
+ --van-cell-horizontal-padding: 16px;
|
|
|
+ --van-field-word-limit-color: #d3d9e0;
|
|
|
+ --van-field-input-text-color: #fff;
|
|
|
+}
|
|
|
+.el-textarea {
|
|
|
+ --el-fill-color-blank: rgba(0, 0, 0, 0);
|
|
|
+ --el-color-info: #d3d9e0;
|
|
|
+ .el-input__count {
|
|
|
+ bottom: 11px !important;
|
|
|
+ right: 15px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
