profils

scenaristeur · Dec 17, 2023 · 126c16d · 126c16d
1 parent 385433e
commit 126c16d
Show file tree

Hide file tree

Showing 12 changed files with 518 additions and 158 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,22 @@
 # Equilibre
 
+# launch
+
+- get an OpenAi api Key , rename .env_sample to .env and fill you openai_api_key in it
+- in a first terminal run the backend :
+```
+cd chatgpt-backend
+node index.js
+```
+
+- in a second terminal
+```
+npm run dev
+```
+
+
+
+
 This template should help get you started developing with Vue 3 in Vite.
 
 ## Recommended IDE Setup

diff --git a/chatgpt-backend/.env copy → chatgpt-backend/.env_sample b/chatgpt-backend/.env copy → chatgpt-backend/.env_sample
diff --git a/chatgpt-backend/chatGpt.controller.js b/chatgpt-backend/chatGpt.controller.js
@@ -1,4 +1,4 @@
-import OpenAI from 'openai';
+import OpenAI from 'openai'
 import 'dotenv/config'
 
 export const askToChatGpt = async function (req, res) {
@@ -7,37 +7,48 @@ export const askToChatGpt = async function (req, res) {
    */
   const openai = new OpenAI({
     // eslint-disable-next-line no-undef
-    apiKey: process.env['OPENAI_API_KEY'], // This is the default and can be omitted
-  });
+    apiKey: process.env['OPENAI_API_KEY'] // This is the default and can be omitted
+  })
 
   /**
    * 2. Let's talk to chatGPT
    */
 
+
+console.log(req.body.messages)
+
+
+
   const chatCompletion = await openai.chat.completions.create({
-    messages: [{ role: 'user', content: req.body.message }],
-    model: 'gpt-3.5-turbo',
-  });
+    // messages: [
+    //   { role: 'system', content: req.body.system_prompt },
+    //   { role: 'user', content: req.body.message }
+    // ],
+    messages: req.body.messages,
+    model: 'gpt-3.5-turbo'
+  })
   console.log(chatCompletion)
   console.log(chatCompletion.choices[0].message)
-// res.send(chatCompletion.choices[0].message);
-      res.send({ from: "chatGpt", data: chatCompletion.choices[0].message });
-//   await openAIInstance
-//     .createCompletion({
-//       model: "text-davinci-003",
-//       prompt: req.body.message,
-//       temperature: 0,
-//       max_tokens: 500,
-//     })
-//     .then((response) => {
-//       const repliedMessage = response.data.choices[0].text;
-//       res.send({ from: "chatGpt", data: repliedMessage });
-//     })
-//     .catch((error) => {
-//       // Report error
-//       console.log("Error ", error);
-//     });
-};
+   res.send(chatCompletion.choices[0].message.content);
+  //res.send({ role: 'assistant', data: chatCompletion.choices[0].message })
+
 
 
 
+
+  //   await openAIInstance
+  //     .createCompletion({
+  //       model: "text-davinci-003",
+  //       prompt: req.body.message,
+  //       temperature: 0,
+  //       max_tokens: 500,
+  //     })
+  //     .then((response) => {
+  //       const repliedMessage = response.data.choices[0].text;
+  //       res.send({ from: "chatGpt", data: repliedMessage });
+  //     })
+  //     .catch((error) => {
+  //       // Report error
+  //       console.log("Error ", error);
+  //     });
+}
diff --git a/oups/2023-12-17_04-27.png b/oups/2023-12-17_04-27.png
diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from './components/HelloWorld.vue'
+// import ContactView from './views/ContactView.vue'
 </script>
 
 <template>
@@ -14,10 +15,12 @@ import HelloWorld from './components/HelloWorld.vue'
         <RouterLink to="/">Accueil</RouterLink>
         <RouterLink to="/about">A propos</RouterLink>
       </nav>
+
     </div>
   </header>
 
   <RouterView />
+  <!-- <ContactView /> -->
 </template>
 
 <style scoped>

diff --git a/src/components/ChatBox.vue b/src/components/ChatBox.vue
@@ -1,32 +1,30 @@
 <template>
-    <div class="chatbox-container">
-<div class="container">
-  <h1>Ai Chat Bot</h1>
-<div class="messageBox mt-8">
-  <template v-for="(message, index) in messages" :key="index">
-    <div :class="message.from == 'user' ? 'messageFromUser' : 'messageFromChatGpt'">
-      <div :class="message.from == 'user' ? 'userMessageWrapper' : 'chatGptMessageWrapper'">
-        <div :class="message.from == 'user' ? 'userMessageContent' : 'chatGptMessageContent'">{{ message.data }}</div>
+  <div class="chatbox-container">
+    <div class="container">
+      <h1>{{sexe}} {{ type }} <RouterLink to="/">X</RouterLink></h1>
+      <!-- 
+      target {{ target }}
+      <hr>
+      prompt {{ system_prompt }} -->
+      <div class="messageBox mt-8">
+        <template v-for="(message, index) in messages" :key="index">
+          <div v-if="message.role != 'system'" :class="message.role == 'user' ? 'messageFromUser' : 'messageFromChatGpt'">
+            <div :class="message.role == 'user' ? 'userMessageWrapper' : 'chatGptMessageWrapper'">
+              <div :class="message.role == 'user' ? 'userMessageContent' : 'chatGptMessageContent'">{{ message.content }}
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+      <div class="inputContainer">
+        <input v-on:keyup.enter="sendMessage(currentMessage)" v-model="currentMessage" type="text" class="messageInput"
+          placeholder="Demande-moi ce que tu veux..." />
+        <button @click="sendMessage(currentMessage)" class="askButton">
+          Envoyer
+        </button>
       </div>
     </div>
-  </template>
-</div>
-<div class="inputContainer">
-  <input
-    v-model="currentMessage"
-    type="text"
-    class="messageInput"
-    placeholder="Ask me anything..."
-  />
-  <button
-    @click="sendMessage(currentMessage)"
-    class="askButton"
-  >
-    Ask
-  </button>
-</div>
-</div>
-</div>
+  </div>
 </template>
 <script>
 import axios from 'axios';
@@ -39,26 +37,73 @@ export default {
       messages: [],
     };
   },
+  created() {
+    this.initMessages()
+  },
   methods: {
     async sendMessage(message) {
       this.messages.push({
-        from: 'user',
-        data: message,
+        role: 'user',
+        content: message,
       });
       await axios
         .post('http://localhost:3000/chatbot', {
-          message: message,
+          messages: this.messages
         })
-       .then((response) => {
-        console.log('response', response)
-  this.messages.push({
-    from: 'chatGpt',
-    data: response.data.data, // Access the 'data' property of the response object
-  });
-});
+        .then((response) => {
+          console.log('response', response)
+          this.messages.push({
+            role: 'assistant',
+            content: response.data, // Access the 'data' property of the response object
+          });
+          console.log(this.messages)
+        });
+      this.currentMessage = ''
+    },
+    initMessages() {
+      if (this.system_prompt == undefined) {
+        this.$router.push('/')
+      } else {
+        this.messages = [{ role: 'system', content: this.system_prompt }, 
+      {role: 'assistant', content:'Bonjour...'}]
+        console.log(this.messages)
+      }
+    }
+  },
+  watch: {
+    sexe() {
+      console.log(this.sexe)
 
     },
   },
+  // watch:{
+  // system_prompt(){
+  //   console.log('target', this.system_prompt)
+  //   this.initMessages()
+
+  //     // messages: [
+  //     //   { role: 'system', content: req.body.system_prompt },
+  //     //   { role: 'user', content: req.body.message }
+  //     // ],
+  // }
+  // },
+
+  computed: {
+    target() {
+      return this.$store.state.core.target
+    },
+    sexe() {
+      return this.$store.state.core.sexe
+    },
+    type() {
+      return this.$store.state.core.type
+    },
+    system_prompt() {
+      return this.$store.state.core.system_prompt
+    },
+  }
+
+
 };
 </script>
 
@@ -75,7 +120,7 @@ export default {
 
 .container {
   width: 360px;
-  height: 600px;
+  height: 95vh; /*700px;*/
   background-color: white;
   border-radius: 8px;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
@@ -107,12 +152,13 @@ h1 {
 
 .messageFromUser,
 .messageFromChatGpt {
-  display: flex; }
+  display: flex;
+}
 
 
 
 .messageBox {
-  max-height: 400px;
+  /*max-height: 400px;*/
   overflow-y: auto;
   padding: 0 16px;
   border-top: 1px solid #f0f0f0;
@@ -134,6 +180,8 @@ h1 {
 
 .userMessageWrapper {
   align-self: flex-end;
+  width: 100%;
+  text-align: right;
 }
 
 .chatGptMessageWrapper {
@@ -142,21 +190,22 @@ h1 {
 
 .userMessageContent,
 .chatGptMessageContent {
-  max-width: 60%;
+  /* max-width: 60%;*/
   padding: 8px 12px;
   border-radius: 18px;
   margin-bottom: 2px;
   font-size: 14px;
   line-height: 1.4;
 }
 
-.userMessageContent {
+.chatGptMessageContent {
   background-color: #1877F2;
   color: white;
   border-top-left-radius: 0;
 }
 
-.chatGptMessageContent {
+
+  .userMessageContent {
   background-color: #EDEDED;
   color: #222;
   border-top-right-radius: 0;
@@ -218,6 +267,7 @@ h1 {
     border-radius: 0;
   }
 }
+
 .chatbox-container {
   position: fixed;
   bottom: 24px;