From e3685f1a483b32d7325128a1d32bd32cb13b6467 Mon Sep 17 00:00:00 2001
From: InsCode <InsCode@devide>
Date: Thu, 7 Sep 2023 11:46:52 +0800
Subject: [PATCH] Auto Commit

---
 index.html  |  2 +-
 src/App.vue | 74 ++++++++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 72 insertions(+), 4 deletions(-)
diff --git a/index.html b/index.html
index 620f3c3..abd6638 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <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>
   <body>
     <div id="app"></div>
diff --git a/src/App.vue b/src/App.vue
index 664cd3b..2af39da 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,7 +8,7 @@
       </template>
     </div>
     <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">
         <Col>
           <Button type="primary" size="large" icon="md-send" :loading="loading" @click="handleSend">发送</Button>
@@ -16,23 +16,44 @@
         <Col>
           <Button size="large" class="ivu-ml" icon="md-add" :disabled="loading" @click="handleNewChat">新对话</Button>
         </Col>
+        <Col>
+          <Button size="large" class="ivu-ml" icon="md-settings" :disabled="loading" @click="handleOpenPrompt">设置 Prompt</Button>
+        </Col>
       </Row>
       <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>
       </Typography>
     </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>
 </template>
 <script>
 import { fetchEventSource } from '@microsoft/fetch-event-source';
 import { apiKey, apiUrl } from './api';
 
+let prompt = '';
+
 export default {
   data() {
     return {
       question: '',
       loading: false,
-      dialogs: []
+      dialogs: [],
+      prompt: '',
+      showPrompt: false
     }
   },
   methods: {
@@ -69,7 +90,7 @@ export default {
         messages: [
           {
             role: 'user',
-            content: question
+            content: prompt + question
           }
         ],
         apikey: apiKey
@@ -108,7 +129,54 @@ export default {
     },
     handleNewChat() {
       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>
-- 
GitLab

