upgraded

app.py

@@ -227,6 +227,7 @@ if __name__ == "__main__":
     from lollms.server.endpoints.lollms_configuration_infos import router as lollms_configuration_infos_router
     from lollms.server.endpoints.lollms_skills_library import router as lollms_skills_library_router
 
+    from lollms.server.endpoints.lollms_tti import router as lollms_tti_router
     
 
     from lollms.server.endpoints.lollms_user import router as lollms_user_router
@@ -283,6 +284,8 @@ if __name__ == "__main__":
         app.include_router(lollms_models_infos_router)   
         app.include_router(lollms_personalities_infos_router)   
         app.include_router(lollms_skills_library_router)   
+        app.include_router(lollms_tti_router)   
+        
         
         app.include_router(lollms_webui_infos_router)
         app.include_router(lollms_discussion_router)

endpoints/docs/lollms_tti/DOC.md

@@ -0,0 +1,26 @@
+# Lollms Text to Image Library
+1. Include the library:
+   ```html
+   <script src="/lollms_assets/js/lollms_tti"></script>
+   ```
+
+2. Initialize in your JavaScript:
+   ```javascript
+   const ttiClient = new LollmsTTI();
+   ```
+
+3. Generate and display an image:
+   ```javascript
+   const container = document.getElementById('image-container');
+   await ttiClient.generateAndDisplayImage('prompt', 'negative prompt', 512, 512, container); // The container must be a div
+   ```
+
+4. Or generate image separately:
+   ```javascript
+   ttiClient.generateImage('prompt', 'negative prompt', 512, 512)// prompt, negative prompt, width, height
+     .then(base64Image => {
+       // Use base64Image
+     });
+   ```
+
+This library simplifies image generation requests to the LoLLMs backend, handling the API call and image display.

endpoints/libraries/lollms_tti.js

@@ -0,0 +1,55 @@
+class LollmsTTI {
+    constructor(baseUrl = 'http://localhost:9600') {
+      this.baseUrl = baseUrl;
+    }
+  
+    async generateImage(prompt, negativePrompt = '', width = 512, height = 512) {
+      const url = `${this.baseUrl}/generate_image`;
+      const requestBody = {
+        prompt,
+        negative_prompt: negativePrompt,
+        width,
+        height
+      };
+  
+      try {
+        const response = await fetch(url, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(requestBody)
+        });
+  
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+  
+        const data = await response.json();
+        return data.image; // This is the base64 encoded image
+      } catch (error) {
+        console.error('Error generating image:', error);
+        throw error;
+      }
+    }
+  
+    createImageElement(base64Image) {
+      const img = document.createElement('img');
+      img.src = `data:image/jpeg;base64,${base64Image}`;
+      img.alt = 'Generated Image';
+      return img;
+    }
+  
+    async generateAndDisplayImage(prompt, negativePrompt = '', width = 512, height = 512, container) {
+      try {
+        const base64Image = await this.generateImage(prompt, negativePrompt, width, height);
+        const imgElement = this.createImageElement(base64Image);
+        console.log("base64Image", base64Image)
+        container.appendChild(imgElement);
+      } catch (error) {
+        console.error('Error generating and displaying image:', error);
+        container.innerHTML = `<p>Error generating image: ${error.message}</p>`;
+      }
+    }
+  }
+  

lollms_core

@@ -1 +1 @@
-Subproject commit 92109353b8e11d7d35a95c0640ca155f8d818cc7
+Subproject commit 533183115f6fef94ed1d0c5a9dc8c1f6aa893328

web/dist/index.html

@@ -6,7 +6,7 @@
     <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>LoLLMS WebUI</title>
-    <script type="module" crossorigin src="/assets/index-da8c411f.js"></script>
+    <script type="module" crossorigin src="/assets/index-ca63ea78.js"></script>
     <link rel="stylesheet" href="/assets/index-d070ef20.css">
   </head>
   <body>

web/src/views/AppsZoo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-zoo background-color w-full p-6 overflow-y-auto scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">
-    <nav class="panels-color shadow-lg rounded-lg p-4 max-w-4xl mx-auto mb-8">
+    <nav class="panels-color shadow-lg rounded-lg p-4 max-w-4xl mx-auto mb-50 pb-50">
       <div class="flex flex-wrap items-center justify-between gap-4">
         <div class="flex items-center space-x-4">
           <button 

zoos/models_zoo

@@ -1 +1 @@
-Subproject commit 37ef0a3bd6a8659677212b3e42c65972574f3fbd
+Subproject commit f09f8a61a7cbce12710b197ae8bcce915eef7121

zoos/personalities_zoo

@@ -1 +1 @@
-Subproject commit 31a63be27ac43e6a344220f40aeab559394d8eb5
+Subproject commit f1a15ef749cd6eee08eaa189b2d46019917ca50f