Auto Commit

e3685f1a · InsCode · 7c1aa84d · e3685f1a · e3685f1a
隐藏空白更改
内联并排

Showing with 72 addition and 4 deletion

index.html index.html +1 -1

src/App.vue src/App.vue +71 -3

未找到文件。
--- 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>

--- 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>