Skip to content

C
ChatGPT With Prompt

inscode / ChatGPT With Prompt
与 Fork 源项目一致

Fork自 inscode / ChatGPT Template With Vue

通知 3
Star 172
Fork 4932
C
ChatGPT With Prompt
提交 e3685f1a 编写于 作者: I InsCode
浏览文件
操作

Auto Commit

上级 7c1aa84d
隐藏空白更改
内联 并排
Showing with 72 addition and 4 deletion
index.html
浏览文件 @ e3685f1a
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chat GPT - InsCode.net</title> <title>Chat GPT With Prompt - InsCode.net</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
......
src/App.vue
浏览文件 @ e3685f1a
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
</template> </template>
</div> </div>
<div class="question ivu-mt"> <div class="question ivu-mt">
<Input v-model="question" type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" placeholder="输入你的问题" /> <Input v-model="question" type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" placeholder="输入内容..." />
<Row class="ivu-mt"> <Row class="ivu-mt">
<Col> <Col>
<Button type="primary" size="large" icon="md-send" :loading="loading" @click="handleSend">发送</Button> <Button type="primary" size="large" icon="md-send" :loading="loading" @click="handleSend">发送</Button>
...@@ -16,23 +16,44 @@ ...@@ -16,23 +16,44 @@
<Col> <Col>
<Button size="large" class="ivu-ml" icon="md-add" :disabled="loading" @click="handleNewChat">新对话</Button> <Button size="large" class="ivu-ml" icon="md-add" :disabled="loading" @click="handleNewChat">新对话</Button>
</Col> </Col>
<Col>
<Button size="large" class="ivu-ml" icon="md-settings" :disabled="loading" @click="handleOpenPrompt">设置 Prompt</Button>
</Col>
</Row> </Row>
<Typography class="ivu-text-center ivu-m"> <Typography class="ivu-text-center ivu-m">
Powered By <img src="./assets/logo.png" class="logo"> <a href="https://inscode.net" target="_blank">InsCode.net</a> Powered By <img src="./assets/logo.png" class="logo"> <a href="https://inscode.net" target="_blank">InsCode.net</a>
</Typography> </Typography>
</div> </div>
<Modal v-model="showPrompt" title="设置 Prompt" footer-hide>
<Title :level="4">Prompt：</Title>
<Input v-model="prompt" type="textarea" :autosize="{minRows: 3,maxRows: 5}" placeholder="例如：写一个策划，主题是_____" />
<Title class="ivu-mt" :level="4">推荐：</Title>
<Space :wrap="true">
<Button @click="handleSetPrompt('写一篇140字以内的朋友圈配文，语言风格要浪漫文艺的，主题是__________')">朋友圈神器</Button>
<Button @click="handleSetPrompt('扮演一位知心姐姐进行在线聊天。__________')">知心姐姐</Button>
<Button @click="handleSetPrompt('你现在需要扮演一个高情商、幽默的人，去参加一些聚会社交，请帮我回应接下来的问题，__________')">高情商回复</Button>
<Button @click="handleSetPrompt('我是你的专属心理咨询师，你有什么想咨询的么？')">心理咨询师</Button>
</Space>
<Title class="ivu-mt" :level="4">操作：</Title>
<Button icon="md-trash" @click="handleClearPrompt">清空 Prompt</Button>
<Button size="large" type="primary" long class="ivu-mt" @click="handleSavePrompt">保存</Button>
</Modal>
</div> </div>
</template> </template>
<script> <script>
import { fetchEventSource } from '@microsoft/fetch-event-source'; import { fetchEventSource } from '@microsoft/fetch-event-source';
import { apiKey, apiUrl } from './api'; import { apiKey, apiUrl } from './api';
let prompt = '';
export default { export default {
data() { data() {
return { return {
question: '', question: '',
loading: false, loading: false,
dialogs: [] dialogs: [],
prompt: '',
showPrompt: false
} }
}, },
methods: { methods: {
...@@ -69,7 +90,7 @@ export default { ...@@ -69,7 +90,7 @@ export default {
messages: [ messages: [
{ {
role: 'user', role: 'user',
content: question content: prompt + question
} }
], ],
apikey: apiKey apikey: apiKey
...@@ -108,7 +129,54 @@ export default { ...@@ -108,7 +129,54 @@ export default {
}, },
handleNewChat() { handleNewChat() {
this.dialogs = []; this.dialogs = [];
},
handleOpenPrompt () {
this.showPrompt = true;
},
handleSetPrompt (prompt) {
this.prompt = prompt;
},
handleSavePrompt () {
if (!this.prompt) {
this.$Message.error({
content: '提示词内容不能为空',
duration: 3,
background: true
});
} else {
const prompt = this.prompt;
localStorage.setItem('setting-prompt', prompt);
this.showPrompt = false;
this.handleLoadPrompt();
}
},
handleLoadPrompt () {
const localPrompt = localStorage.getItem('setting-prompt');
if (localPrompt) {
this.prompt = localPrompt;
prompt = localPrompt;
this.$nextTick(() => {
this.$Message.success({
content: '已加载 Prompt',
background: true
});
});
}
},
handleClearPrompt () {
localStorage.removeItem('setting-prompt');
this.prompt = '';
prompt = '';
this.$nextTick(() => {
this.$Message.success({
content: '已清空 Prompt',
background: true
});
});
} }
},
mounted () {
this.handleLoadPrompt();
} }
} }
</script> </script>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或