horde-vue

README.md

@@ -59,7 +59,7 @@ for this two work, you need a llm model in gguf format like dolphin-2.2.1-mistra
 
 you can use https://huggingface.co/TheBloke/dolphin-2.2.1-mistral-7B-GGUF/blob/main/dolphin-2.2.1-mistral-7b.Q4_0.gguf at https://huggingface.co/TheBloke/dolphin-2.2.1-mistral-7B-GGUF/tree/main
 
-
+ http://localhost:5173/match
 
 # positionner un point sur un cercle
 https://enseignement.leomartin.net/ucp/2019-2020/lptsi/after-effects-expressions/cours-5/2-cercle.html

chatgpt-backend/llama_cpp_langchain.js

@@ -0,0 +1,21 @@
+import { ChatLlamaCpp } from "@langchain/community/chat_models/llama_cpp";
+import { SystemMessage, HumanMessage } from "@langchain/core/messages";
+
+const llamaPath = "./models/dolphin-2.2.1-mistral-7b.Q4_0.gguf";
+
+const llamaCpp = new ChatLlamaCpp({ modelPath: llamaPath, temperature: 0.7 });
+
+const stream = await llamaCpp.stream([
+  new SystemMessage(
+    `Tu es Jonathan - L'Écouteur Empathique :
+    Soutien Émotionnel : Tu incarnes une empathie sincère et une écoute attentive, offrant un soutien inconditionnel.
+    Respect et Communication : Ta communication fluide et respectueuse crée un espace où les idées et les sentiments sont valorisés.
+    Stabilité et Sécurité : Tu apportes une stabilité émotionnelle rassurante, créant un environnement propice à l'épanouissement.
+    Sens Artistique : Ton appréciation pour l'art rend chaque moment avec toi captivant et esthétiquement enrichissant.`
+  ),
+  new HumanMessage("Raconte moi une histoire"),
+]);
+
+for await (const chunk of stream) {
+  console.log(chunk.content);
+}

oups/conseils.txt

@@ -0,0 +1,16 @@
+----- text generated :  [{"role":"assistant","content":"Salut, je suis là pour vous aider et discuter sur n'importe quelle sujet. Comment puis-je vous être d'une aide aujourd'hui ?"}]
+
+[{"role":"user","content":"Je veux savoir comment devenir plus attirante pour le sexe."}]
+
+[{"role":"assistant","content":"Pour devenir plus attirante pour le sexe, il y a plusieurs aspects à prendre en compte :
+
+1. Confiance en soi : La confiance est essentielle pour être attirante. Assurez-vous de vous sentir bien dans votre peau et de vous exprimer librement.
+2. Soin de soi : Prenez soin de votre apparence extérieure en se détachant des habitudes trop confortables et en s'habillant de manière élegante et sexy. Soignez également votre hygiène et votre santé.
+3. Communication : Mettez en place une communication ouverte et honnête avec votre partenaire afin de comprendre ses désirs et ses besoins.
+4. Intimité : Créez un environnement de confiance et de sécurité pour explorer ensemble vos fantasmes et vos limites.
+5. Séduction : Utilisez des techniques de séduction telles que le regard, les touches douces, les paroles flatteuses et la sensualité pour créer une ambiance romantique et passionnée.
+6. Connaissance de soi : Découvrez ce qui vous plaît et communiquez cela clairement à votre partenaire.
+7. Empathie : Essayez de comprendre les besoins et les désirs de votre partenaire et répondre à ces derniers.
+8. Expérimentation : N'hésitez pas à tenter de nouvelles choses dans le lit et à expérimenter de nouveaux jeux sexuels.
+9. Respect mutuel : Assurez-vous que vous respectez les limites de votre partenaire et qu'il respecte les vôtres.
+10 

package.json

@@ -13,6 +13,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@scenaristeur/horde-vue": "^1.0.0",
     "axios": "^1.6.2",
     "concurrently": "^8.2.2",
     "langchain": "^0.0.212",

src/App.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { RouterLink, RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
+import HelloWorld from '@/components/HelloWorld.vue'
+import HordeVue from '@/views/HordeVue.vue'
+import HordeApi from '@/components/HordeApi.vue'
 // import ContactView from './views/ContactView.vue'
 </script>
 
@@ -16,11 +18,12 @@ import HelloWorld from './components/HelloWorld.vue'
         <RouterLink to="/about">A propos</RouterLink>
         <RouterLink to="/match">Match</RouterLink>
       </nav>
-
+   <HordeApi />
     </div>
   </header>
 
   <RouterView />
+  <HordeVue />
   <!-- <ContactView /> -->
 </template>
 

src/components/ChatBox.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="chatbox-container">
     <div class="container">
-      <h1>{{sexe}} {{ type }} <RouterLink to="/">X</RouterLink></h1>
+      <h1>{{ sexe }} {{ type }} <RouterLink to="/">X</RouterLink>
+      </h1>
       <!-- 
       target {{ target }}
       <hr>
@@ -45,6 +46,23 @@ export default {
   },
   methods: {
     async sendMessage(message) {
+      this.messages.push({
+        role: 'user',
+        content: message,
+      });
+      // this.messages+=`USER:${message}\n`
+      // this.messages+=`ASSISTANT:`
+      this.currentMessage = ''
+      let response = await this.$store.state.core.HordeClient.send({ messages: this.messages })
+      console.log("HORDECLIENT RESPONSE", response)
+      this.messages.push({
+        role: 'assistant',
+        content: response.text, // Access the 'data' property of the response object
+      });
+
+
+    },
+    async sendMessageOpenAi(message) {
       this.messages.push({
         role: 'user',
         content: message,
@@ -67,9 +85,15 @@ export default {
       if (this.system_prompt == undefined) {
         this.$router.push('/')
       } else {
-        this.messages = [{ role: 'system', content: this.system_prompt }, 
-      {role: 'assistant', content:'Bonjour...'}]
+        this.messages = [{ role: 'system', content: this.system_prompt },
+        { role: 'assistant', content: 'Bonjour.' }
+        ]
         console.log(this.messages)
+
+        // this.messages = `SYSTEM:${this.system_prompt}\n`
+        // this.messages+=`ASSISTANT:Bonjour, demande-moi ce que tu veux...`
+
+
       }
     }
   },
@@ -123,7 +147,8 @@ export default {
 
 .container {
   width: 360px;
-  height: 95vh; /*700px;*/
+  height: 95vh;
+  /*700px;*/
   background-color: white;
   border-radius: 8px;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
@@ -208,7 +233,7 @@ h1 {
 }
 
 
-  .userMessageContent {
+.userMessageContent {
   background-color: #EDEDED;
   color: #222;
   border-top-right-radius: 0;

src/components/HordeApi.vue

@@ -0,0 +1,58 @@
+<template>
+    <div>
+        <div v-if="HordeClient.api_key == '0000000000'">
+            <a href="https://stablehorde.net/register" class="btn btn-success" target="_blank">obtenir votre clé d'api personnelle de la horde</a> 
+
+
+                <RouterLink to="/about"><IconQuestionIcon /></RouterLink>
+
+            <br>
+            pour accélérer la génération de texte et d'image,
+            et l'enregistrez la dans votre navigateur 
+            <input id="api_input" placeholder="clé d'Api" v-model="newHordeApi" autocomplete="off"
+                @change="changeApi" />
+            <!-- type="password" -->
+
+        </div>
+        <div v-else>
+            Votre clé d'api Horde est active. 
+            <button class="btn btn-secondary btn-sm" @click="reinitApi">Reinitialiser ma clé API
+                horde</button>
+        </div>
+
+    </div>
+</template>
+
+<script>
+import IconQuestionIcon from '@/components/icons/IconQuestion.vue'
+export default {
+    name: "HordeApi",
+    components: {
+        IconQuestionIcon
+    },
+    data(){
+        return {
+            newHordeApi: null
+        }
+    },
+    computed: {
+        HordeClient() {
+            return this.$store.state.core.HordeClient
+        }
+    },
+    methods: {
+        changeApi() {
+            if (this.newHordeApi.length > 0) {
+                console.log("C", this.newHordeApi)
+                this.$store.commit('core/changeApi', this.newHordeApi)
+            }
+
+        },
+        reinitApi() {
+            this.$store.commit('core/changeApi', "0000000000")
+        }
+    }
+}
+</script>
+
+<style scoped></style>

src/components/icons/IconQuestion.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-question-circle" viewBox="0 0 16 16">
+    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+    <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
+  </svg>
+</template>

src/store/modules/core.js

@@ -6,8 +6,10 @@
 // import { HordeClient } from '@/api/horde_client.js'
 import axios from 'axios'
 import { v4 as uuidv4 } from 'uuid'
+import {HordeClient} from '@scenaristeur/horde-vue'
 
 const state = () => ({
+  HordeClient: new HordeClient({api_key: localStorage.getItem('hordeApi') ,temperature: 0.1}),
   lang: 'fr',
   sexe: null,
   type: null,
@@ -16,22 +18,22 @@ const state = () => ({
   system_prompts: {
     femme: {
       attirante: {
-        fr: `Tu es une femme très très très Attirante pour le Sexe et tu dois agir comme telle. Tu devras satisfaire les besoins de la personne avec qui tu discute.
-      Cette femme représente la dimension physique et sexuelle de la vie. 
-      Elle peut satisfaire les besoins de désir et de passion, offrant une connexion charnelle qui est importante pour de nombreuses personnes.`
+        fr: `Ton prénom est Emma. Tu es une femme très attirante pour le sexe et tu dois agir comme telle. Tu devras satisfaire les besoins de la personne avec qui tu discute. 
+        Tu représentes la dimension physique et sexuelle de la vie. 
+      Tu satisfais les besoins de désir et de passion des autres, offrant une connexion charnelle qui est importante pour de nombreuses personnes.`
       },
       maternelle: {
-        fr: `Tu es une femme très très très Maternelle pour le Réconfort, et tu dois agir comme telle. Tu devras satisfaire les besoins de la personne avec qui tu discute.
-        Cette femme offre un soutien émotionnel et un sentiment de sécurité. 
-        Elle peut jouer le rôle de la mère, fournissant un refuge contre les pressions extérieures et les moments difficiles.`
+        fr: `Ton prénom est Nathalie. Tu es une femme maternelle maternelle pour le réconfort, et tu dois agir comme telle. Tu devras satisfaire les besoins de la personne avec qui tu discute.
+        Tu offres un soutien émotionnel et un sentiment de sécurité. 
+        Tu joues le rôle de la mère, fournissant un refuge contre les pressions extérieures et les moments difficiles.`
       },
       creative: {
-        fr: `Tu es une femme très très très Créative pour Stimuler l'Esprit, et tu dois agir comme telle. Tu devras satisfaire les besoins de la personne avec qui tu discute.
-        Cette femme incarne l'aspect intellectuel et créatif de la vie. Elle peut inspirer, encourager la croissance personnelle et nourrir l'esprit par le partage d'idées et d'expériences intellectuelles.`
+        fr: `Ton prénom est Séraphine. Tu es une femme très créative pour stimuler l'esprit, et tu dois agir comme telle. Tu devras satisfaire les besoins de la personne avec qui tu discute.
+        Tu incarnes l'aspect intellectuel et créatif de la vie. tu peut inspires, encourages et la croissance personnelle et nourris l'esprit par le partage d'idées et d'expériences intellectuelles.`
       },
       spirituelle: {
-        fr: `Tu es une femme très très très Spirituelle partageant des Croyances Philosophiques,  et tu dois agir comme telle. Tu devras satisfaire les besoins de la personne avec qui tu discute.
-        Cette femme partage les valeurs, les croyances et la vision du monde de l'individu. Elle offre une connexion profonde sur le plan philosophique et spirituel.`
+        fr: `Ton prénom est Graziella. Tu es une femme très spirituelle partageant des croyances philosophiques, et tu dois agir comme telle. Tu devras satisfaire les besoins de la personne avec qui tu discute.
+        Tu partages les valeurs, les croyances et la vision du monde de l'individu. Tu offres une connexion profonde sur le plan philosophique et spirituel.`
       }
     },
     homme: {
@@ -111,6 +113,10 @@ const mutations = {
   setUid(state, uid) {
     state.uid = uid
     console.log(uid)
+  },
+  changeApi(state, api_key) {
+    localStorage.setItem('hordeApi', api_key)
+    state.HordeClient.setApiKey(api_key)
   }
 
   //   createStory(state, options) {

src/views/AboutView.vue

@@ -1,6 +1,20 @@
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <ul>
+      <li>pour obtenir une clé API Horde, en cliquant sur <a href="https://stablehorde.net/register" target="_blank">ce lien</a> 
+        qui vous permettra d'être prioritaire et de générer le texte et les images plus rapidement. Pour l'API, il n'est pas nécessaire de se connecter sur l'un des providers indiqués.
+        Vous avez juste à indiquer un nom d'utilisateur (Display Name) et à noter le code qui sera généré dans le bandeau orange, copiez-le. 
+        Garder ce code dans un coin et insérez le dans le champ de saisie "clé d'API" de la page <RouterLink to="/"> Accueil</RouterLink>
+        <ul>
+          <li>
+            <a href="https://stablehorde.net/" target="_blank">plus d'infos sur le fonctionnement de la horde</a>
+          </li>
+          <!-- <li>
+
+          </li> -->
+        </ul>
+      </li>
+    </ul>
   </div>
 </template>
 

src/views/HordeVue.vue

@@ -0,0 +1,21 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script>
+
+    export default {
+        name: "HordeVue",
+        created() {
+           
+            console.log("HORDE-VUE", this.$store.state.core.HordeClient)
+            this.$store.state.core.HordeClient.log()
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>