Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Jux-Ai - Assistant IA Personnel</title> | |
| <meta name="description" content="Interface de chat moderne avec l'assistant Jux, propulsé par l'IA"> | |
| <meta name="author" content="JuxAi Team"> | |
| <!-- Styles intégrés --> | |
| <style> | |
| /* (Ton CSS d'origine inchangé) */ | |
| :root { | |
| --background: 218 23% 97%; | |
| --foreground: 222 47% 11%; | |
| --card: 0 0% 100%; | |
| --card-foreground: 222 47% 11%; | |
| --primary: 217 91% 60%; | |
| --primary-foreground: 0 0% 100%; | |
| --primary-glow: 217 91% 70%; | |
| --secondary: 214 32% 91%; | |
| --secondary-foreground: 222 47% 11%; | |
| --muted: 210 40% 96%; | |
| --muted-foreground: 215 16% 47%; | |
| --accent: 142 76% 36%; | |
| --accent-foreground: 0 0% 100%; | |
| --destructive: 0 84% 60%; | |
| --destructive-foreground: 210 40% 98%; | |
| --border: 214 32% 91%; | |
| --input: 214 32% 91%; | |
| --ring: 217 91% 60%; | |
| --chat-user: 217 91% 60%; | |
| --chat-user-foreground: 0 0% 100%; | |
| --chat-assistant: 0 0% 100%; | |
| --chat-assistant-foreground: 222 47% 11%; | |
| --radius: 0.5rem; | |
| --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-glow))); | |
| --gradient-subtle: linear-gradient(180deg, hsl(var(--background)), hsl(var(--muted))); | |
| --gradient-card: linear-gradient(145deg, hsl(var(--card)) 0%, hsl(var(--muted)) 100%); | |
| --shadow-elegant: 0 10px 25px -5px hsl(var(--primary) / 0.1); | |
| --shadow-chat: 0 2px 8px -1px hsl(222 47% 11% / 0.1); | |
| } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |
| background: hsl(var(--background)); | |
| color: hsl(var(--foreground)); | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| /* Utility classes */ | |
| .flex { display: flex; } | |
| .flex-col { flex-direction: column; } | |
| .flex-1 { flex: 1; } | |
| .items-center { align-items: center; } | |
| .justify-between { justify-content: space-between; } | |
| .justify-center { justify-content: center; } | |
| .justify-end { justify-content: flex-end; } | |
| .justify-start { justify-content: flex-start; } | |
| .space-x-2 > * + * { margin-left: 0.5rem; } | |
| .space-x-3 > * + * { margin-left: 0.75rem; } | |
| .gap-3 { gap: 0.75rem; } | |
| .h-full { height: 100%; } | |
| .h-screen { height: 100vh; } | |
| .min-h-96 { min-height: 24rem; } | |
| .max-w-xs { max-width: 20rem; } | |
| .max-w-sm { max-width: 24rem; } | |
| .max-w-md { max-width: 28rem; } | |
| .w-full { width: 100%; } | |
| .p-4 { padding: 1rem; } | |
| .p-3 { padding: 0.75rem; } | |
| .px-4 { padding-left: 1rem; padding-right: 1rem; } | |
| .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } | |
| .pb-20 { padding-bottom: 5rem; } | |
| .mb-2 { margin-bottom: 0.5rem; } | |
| .mb-4 { margin-bottom: 1rem; } | |
| .mb-6 { margin-bottom: 1.5rem; } | |
| .mt-1 { margin-top: 0.25rem; } | |
| .mt-2 { margin-top: 0.5rem; } | |
| .mr-2 { margin-right: 0.5rem; } | |
| .ml-auto { margin-left: auto; } | |
| .mx-auto { margin-left: auto; margin-right: auto; } | |
| .overflow-hidden { overflow: hidden; } | |
| .overflow-y-auto { overflow-y: auto; } | |
| .text-xs { font-size: 0.75rem; } | |
| .text-sm { font-size: 0.875rem; } | |
| .text-lg { font-size: 1.125rem; } | |
| .text-xl { font-size: 1.25rem; } | |
| .text-2xl { font-size: 1.5rem; } | |
| .font-bold { font-weight: bold; } | |
| .font-mono { font-family: monospace; } | |
| .text-center { text-align: center; } | |
| .text-right { text-align: right; } | |
| .text-left { text-align: left; } | |
| .leading-relaxed { line-height: 1.2; } | |
| .whitespace-pre-wrap { white-space: pre-wrap; } | |
| .border { border-width: 1px; } | |
| .border-b { border-bottom-width: 1px; } | |
| .border-t { border-top-width: 1px; } | |
| .border-2 { border-width: 2px; } | |
| .rounded { border-radius: 0.25rem; } | |
| .rounded-lg { border-radius: var(--radius); } | |
| .rounded-full { border-radius: 9999px; } | |
| .sticky { position: sticky; } | |
| .relative { position: relative; } | |
| .absolute { position: absolute; } | |
| .top-0 { top: 0; } | |
| .bottom-0 { bottom: 0; } | |
| .-bottom-1 { bottom: -0.25rem; } | |
| .-right-1 { right: -0.25rem; } | |
| .left-0 { left: 0; } | |
| .z-10 { z-index: 10; } | |
| .cursor-pointer { cursor: pointer; } | |
| .select-none { user-select: none; } | |
| .resize-none { resize: none; } | |
| .hidden { display: none; } | |
| .order-first { order: -1; } | |
| /* Color utilities */ | |
| .bg-background { background-color: hsl(var(--background)); } | |
| .bg-card { background-color: hsl(var(--card)); } | |
| .bg-primary { background-color: hsl(var(--primary)); } | |
| .bg-secondary { background-color: hsl(var(--secondary)); } | |
| .bg-accent { background-color: hsl(var(--accent)); } | |
| .bg-destructive { background-color: hsl(var(--destructive)); } | |
| .bg-muted { background-color: hsl(var(--muted)); } | |
| .bg-white { background-color: white; } | |
| .bg-transparent { background-color: transparent; } | |
| .text-foreground { color: hsl(var(--foreground)); } | |
| .text-primary { color: hsl(var(--primary)); } | |
| .text-white { color: white; } | |
| .text-muted-foreground { color: hsl(var(--muted-foreground)); } | |
| .text-destructive { color: hsl(var(--destructive)); } | |
| .border-border { border-color: hsl(var(--border)); } | |
| .border-destructive { border-color: hsl(var(--destructive)); } | |
| .border-primary { border-color: hsl(var(--primary) / 0.2); } | |
| .border-muted { border-color: hsl(var(--muted)); } | |
| /* Background gradients */ | |
| .bg-gradient-primary { background: var(--gradient-primary); } | |
| .bg-gradient-subtle { background: var(--gradient-subtle); } | |
| .bg-gradient-card { background: var(--gradient-card); } | |
| /* Chat specific colors */ | |
| .bg-chat-user { background-color: hsl(var(--chat-user)); } | |
| .text-chat-user-foreground { color: hsl(var(--chat-user-foreground)); } | |
| .bg-chat-assistant { background-color: hsl(var(--chat-assistant)); } | |
| .text-chat-assistant-foreground { color: hsl(var(--chat-assistant-foreground)); } | |
| /* Shadows */ | |
| .shadow-elegant { box-shadow: var(--shadow-elegant); } | |
| .shadow-chat { box-shadow: var(--shadow-chat); } | |
| /* Component specific styles */ | |
| .card { | |
| background-color: hsl(var(--card)); | |
| color: hsl(var(--card-foreground)); | |
| border: 1px solid hsl(var(--border)); | |
| border-radius: var(--radius); | |
| } | |
| .message-card { padding: 0.05rem 0.1rem; border-radius: 0.15rem; line-height: 1.2; } | |
| .button { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; transition: all 0.2s; cursor: pointer; border: none; padding: 0.5rem 1rem; min-height: 2.5rem; } | |
| .button-primary { background: var(--gradient-primary); color: hsl(var(--primary-foreground)); } | |
| .button-ghost { background: transparent; color: hsl(var(--foreground)); } | |
| .button-ghost:hover { background-color: hsl(var(--muted)); } | |
| .button:disabled { opacity: 0.5; cursor: not-allowed; } | |
| .badge { display: inline-flex; align-items: center; border-radius: calc(var(--radius) - 2px); padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 600; background-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); } | |
| .avatar { display: flex; align-items: center; justify-content: center; border-radius: 50%; width: 2rem; height: 2rem; } | |
| .textarea { width: 100%; border: none; background: transparent; resize: none; outline: none; font-family: inherit; font-size: 0.875rem; line-height: 1.5; padding: 0.5rem; } | |
| .textarea:focus { outline: none; } | |
| .chat-scroll { scrollbar-width: thin; scrollbar-color: hsl(var(--border)) transparent; } | |
| .chat-scroll::-webkit-scrollbar { width: 4px; } | |
| .chat-scroll::-webkit-scrollbar-track { background: transparent; } | |
| .chat-scroll::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 2px; } | |
| .chat-scroll::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground)); } | |
| @keyframes typing-dots { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-10px); } } | |
| .typing-dot { animation: typing-dots 1.5s infinite; width: 0.5rem; height: 0.5rem; background-color: hsl(var(--primary)); border-radius: 50%; } | |
| .typing-dot:nth-child(2) { animation-delay: 0.2s; } | |
| .typing-dot:nth-child(3) { animation-delay: 0.4s; } | |
| @keyframes message-appear { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } | |
| .message-appear { animation: message-appear 0.4s ease-out; } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| .animate-spin { animation: spin 1s linear infinite; } | |
| .icon { width: 1rem; height: 1rem; display: inline-block; vertical-align: middle; } | |
| .icon-lg { width: 1.25rem; height: 1.25rem; } | |
| @media (min-width: 640px) { .sm\\:flex { display: flex; } .sm\\:hidden { display: none; } .sm\\:inline { display: inline; } .sm\\:block { display: block; } } | |
| .message-container { display: inline-block; width: fit-content; } | |
| .user-message { margin-left: auto; } | |
| .assistant-message { margin-right: auto; } | |
| .alert { padding: 1rem; border-radius: var(--radius); border: 1px solid hsl(var(--border)); background-color: hsl(var(--card)); } | |
| .alert-destructive { border-color: hsl(var(--destructive)); color: hsl(var(--destructive)); } | |
| .backdrop-blur { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } | |
| .separator-vertical { width: 1px; height: 1.5rem; background-color: hsl(var(--border)); } | |
| .input-container { position: relative; } | |
| .button-sm { padding: 0.375rem 0.75rem; min-height: 2rem; font-size: 0.75rem; } | |
| .button-icon { width: 2.5rem; height: 2.5rem; padding: 0; } | |
| .message-bubble { word-wrap: break-word; overflow-wrap: break-word; } | |
| /* Small gallery for generation previews */ | |
| #generationPreview { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; } | |
| #generationPreview img { width:120px; height:auto; border-radius:8px; border:1px solid hsl(var(--border)); cursor:pointer; } | |
| .gen-status { font-size:0.85rem; color: hsl(var(--muted-foreground)); margin-top:6px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="flex flex-col h-screen bg-gradient-subtle"> | |
| <!-- En-tête --> | |
| <header class="sticky top-0 z-10 border-b bg-gradient-card backdrop-blur"> | |
| <div class="flex items-center justify-between p-4"> | |
| <!-- Logo et titre --> | |
| <div class="flex items-center space-x-3"> | |
| <div class="relative"> | |
| <div class="avatar bg-gradient-primary text-white shadow-elegant" style="width: 2.5rem; height: 2.5rem;"> | |
| <span class="text-lg font-bold">J</span> | |
| </div> | |
| <div class="absolute -bottom-1 -right-1 rounded-full bg-accent flex items-center justify-center" style="width: 1rem; height: 1rem;"> | |
| <div class="rounded-full bg-white" style="width: 0.5rem; height: 0.5rem;"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <h1 class="text-xl font-bold text-foreground">Jux-Ai</h1> | |
| <p class="text-sm text-muted-foreground">Assistant IA personnel</p> | |
| </div> | |
| </div> | |
| <!-- Informations sur le modèle et boutons --> | |
| <div class="flex items-center space-x-3"> | |
| <div class="hidden sm:flex items-center space-x-2"> | |
| <span class="text-sm text-muted-foreground">Modèle :</span> | |
| <span class="badge font-mono text-xs">google/gemma-3n-e4b</span> | |
| </div> | |
| <div class="separator-vertical hidden sm:block"></div> | |
| <!-- Boutons d'action --> | |
| <div class="flex items-center space-x-2"> | |
| <button class="button button-ghost button-sm hidden sm:flex" onclick="checkModels()"> | |
| <svg class="icon mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/> | |
| </svg> | |
| Vérifier modèles | |
| </button> | |
| <button class="button button-ghost button-sm hidden sm:flex" onclick="exportConversation()"> | |
| <svg class="icon mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/> | |
| </svg> | |
| Exporter | |
| </button> | |
| <button class="button button-ghost button-sm text-destructive" onclick="newConversation()"> | |
| <svg class="icon mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/> | |
| </svg> | |
| <span class="hidden sm:inline">Nouvelle conversation</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Version mobile : modèle affiché en bas --> | |
| <div class="sm:hidden px-4 pb-3"> | |
| <div class="flex items-center justify-center space-x-2"> | |
| <span class="text-xs text-muted-foreground">Modèle :</span> | |
| <span class="badge font-mono text-xs">google/gemma-3n-e4b</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Indicateur de connexion (masqué par défaut) --> | |
| <div id="connectionAlert" class="alert alert-destructive mx-4 mt-4 hidden"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M12 2.168l5.657 5.657a8 8 0 010 11.314L12 24.832l-5.657-5.657a8 8 0 010-11.314L12 2.168z"/> | |
| </svg> | |
| <span>Connexion impossible à l'API (http://192.168.0.11:1234). Vérifiez que le serveur est démarré et que CORS est configuré.</span> | |
| </div> | |
| <button class="button button-ghost button-sm" onclick="checkConnection()"> | |
| Réessayer | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Zone des messages --> | |
| <div class="flex-1 overflow-hidden"> | |
| <div class="h-full overflow-y-auto chat-scroll"> | |
| <div class="p-4 pb-20" id="messagesContainer"> | |
| <!-- Message de bienvenue --> | |
| <div id="welcomeMessage" class="flex items-center justify-center h-full min-h-96"> | |
| <div class="text-center max-w-md"> | |
| <div class="avatar bg-gradient-primary text-white mx-auto mb-4" style="width: 4rem; height: 4rem;"> | |
| <span class="text-2xl font-bold">J</span> | |
| </div> | |
| <h2 class="text-2xl font-bold mb-2">Bonjour ! Je suis Jux</h2> | |
| <p class="text-muted-foreground mb-6"> | |
| Votre assistant IA personnel. Comment puis-je vous aider aujourd'hui ? | |
| </p> | |
| <div class="flex items-center justify-center space-x-2 text-sm text-muted-foreground"> | |
| <svg class="icon text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"/> | |
| </svg> | |
| <span>Connecté et prêt</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Les messages s'afficheront ici --> | |
| <div id="messagesList"></div> | |
| <!-- Indicateur de frappe --> | |
| <div id="typingIndicator" class="message-appear mb-4 hidden"> | |
| <div class="flex gap-3 justify-start"> | |
| <div class="avatar border-2 border-primary bg-gradient-primary text-white"> | |
| <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/> | |
| </svg> | |
| </div> | |
| <div class="message-container"> | |
| <div class="card p-4 shadow-chat bg-chat-assistant text-chat-assistant-foreground"> | |
| <div class="flex items-center space-x-1"> | |
| <div class="typing-dot"></div> | |
| <div class="typing-dot"></div> | |
| <div class="typing-dot"></div> | |
| </div> | |
| </div> | |
| <div class="mt-1 text-xs text-muted-foreground text-left"> | |
| Jux réfléchit... | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="messagesEnd"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Zone de saisie --> | |
| <div class="sticky bottom-0 border-t bg-gradient-subtle backdrop-blur"> | |
| <div class="p-4"> | |
| <div class="card p-4 shadow-elegant"> | |
| <div class="flex gap-3 items-end"> | |
| <div class="flex-1 relative input-container"> | |
| <textarea | |
| id="messageInput" | |
| class="textarea" | |
| placeholder="Tapez votre message ici... (Entrée pour envoyer, Shift+Entrée pour une nouvelle ligne)" | |
| rows="1" | |
| style="min-height: 44px; max-height: 200px;" | |
| ></textarea> | |
| <!-- Indicateur de caractères --> | |
| <div id="charCounter" class="absolute -bottom-6 left-0 text-xs text-muted-foreground hidden"></div> | |
| </div> | |
| <!-- Génération d'image controls --> | |
| <div class="flex items-end gap-2"> | |
| <select id="genPreset" class="button button-ghost button-sm" title="Choisir preset génération"> | |
| <option value="fast">fast (preview)</option> | |
| <option value="hd">hd (final)</option> | |
| </select> | |
| <button id="generateImageBtn" class="button button-ghost button-sm" onclick="generateImage()" title="Générer une image à partir du prompt"> | |
| Générer Image | |
| </button> | |
| </div> | |
| <button | |
| id="sendButton" | |
| class="button button-primary button-icon" | |
| onclick="sendMessage()" | |
| > | |
| <svg id="sendIcon" class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M12 5l7 7-7 7"/> | |
| </svg> | |
| <svg id="loadingIcon" class="icon animate-spin hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/> | |
| </svg> | |
| </button> | |
| </div> | |
| <!-- Generation preview + conseils --> | |
| <div id="generationPanel" class="mt-3"> | |
| <div id="generationStatus" class="gen-status"></div> | |
| <div id="generationPreview" aria-live="polite"></div> | |
| </div> | |
| <!-- Conseils d'utilisation --> | |
| <div class="mt-2 text-xs text-muted-foreground text-center"> | |
| <span class="hidden sm:inline"> | |
| Entrée pour envoyer • Shift+Entrée pour une nouvelle ligne | |
| </span> | |
| <span class="sm:hidden"> | |
| Appuyez sur le bouton pour envoyer | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // État de l'application | |
| let messages = []; | |
| let isLoading = false; | |
| let isConnected = null; | |
| let isGenerating = false; | |
| const API_BASE_URL = 'http://192.168.0.11:1234'; // pour le chat (LM Studio) | |
| const GENERATION_API_BASE = 'http://192.168.0.11:8001'; // <-- si ton backend de génération est à une autre adresse, change ici | |
| const DEFAULT_MODEL = 'google/gemma-3n-e4b'; | |
| // Éléments DOM | |
| const messageInput = document.getElementById('messageInput'); | |
| const sendButton = document.getElementById('sendButton'); | |
| const messagesContainer = document.getElementById('messagesContainer'); | |
| const messagesList = document.getElementById('messagesList'); | |
| const welcomeMessage = document.getElementById('welcomeMessage'); | |
| const typingIndicator = document.getElementById('typingIndicator'); | |
| const charCounter = document.getElementById('charCounter'); | |
| const sendIcon = document.getElementById('sendIcon'); | |
| const loadingIcon = document.getElementById('loadingIcon'); | |
| const connectionAlert = document.getElementById('connectionAlert'); | |
| // Génération DOM | |
| const genPresetSelect = document.getElementById('genPreset'); | |
| const generationPreview = document.getElementById('generationPreview'); | |
| const generationStatus = document.getElementById('generationStatus'); | |
| // Polling handle | |
| let genPollInterval = null; | |
| let shownImages = new Set(); | |
| // Initialisation | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Add test message | |
| addMessage('assistant', "Hey there! 👋 \n\nHow can I help you today? Let me know what's on your mind. 😊 \n\nI can:\n\n* **Answer questions:** About pretty much anything!\n* **Generate creative content:** Like poems, code, scripts, musical pieces, email, letters, etc. \n* **Help you brainstorm ideas.**\n* **Just chat!** \n\nJust tell me what you'd like to do.\n\n\n\n "); | |
| messageInput.focus(); | |
| messageInput.addEventListener('input', function() { | |
| adjustTextareaHeight(); | |
| updateCharCounter(); | |
| }); | |
| messageInput.addEventListener('keydown', function(e) { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| sendMessage(); | |
| } | |
| }); | |
| checkConnection(); | |
| function adjustTextareaHeight() { | |
| messageInput.style.height = 'auto'; | |
| messageInput.style.height = Math.min(messageInput.scrollHeight, 200) + 'px'; | |
| } | |
| function updateCharCounter() { | |
| const length = messageInput.value.length; | |
| if (length > 1000) { | |
| charCounter.textContent = `${length}/2000 caractères`; | |
| charCounter.classList.remove('hidden'); | |
| } else { | |
| charCounter.classList.add('hidden'); | |
| } | |
| } | |
| async function checkConnection() { | |
| try { | |
| const response = await fetch(`${API_BASE_URL}/v1/models`, { method: 'GET' }); | |
| isConnected = response.ok; | |
| updateConnectionStatus(); | |
| } catch (error) { | |
| console.error('Erreur de connexion:', error); | |
| isConnected = false; | |
| updateConnectionStatus(); | |
| } | |
| } | |
| function updateConnectionStatus() { | |
| if (isConnected === false) { | |
| connectionAlert.classList.remove('hidden'); | |
| messageInput.disabled = true; | |
| messageInput.placeholder = "Connexion requise pour envoyer des messages..."; | |
| } else { | |
| connectionAlert.classList.add('hidden'); | |
| messageInput.disabled = false; | |
| messageInput.placeholder = "Tapez votre message ici... (Entrée pour envoyer, Shift+Entrée pour une nouvelle ligne)"; | |
| } | |
| } | |
| // Envoie un message (chat) | |
| async function sendMessage() { | |
| const content = messageInput.value.trim(); | |
| if (!content || isLoading || isConnected === false || isGenerating) return; | |
| addMessage('user', content); | |
| messageInput.value = ''; | |
| messageInput.style.height = 'auto'; | |
| charCounter.classList.add('hidden'); | |
| if (messages.length === 1) welcomeMessage.classList.add('hidden'); | |
| setLoading(true); | |
| const controller = new AbortController(); | |
| const timeoutId = setTimeout(() => controller.abort(), 30000); | |
| try { | |
| const response = await fetch(`${API_BASE_URL}/v1/chat/completions`, { | |
| method: 'POST', | |
| headers: {'Content-Type': 'application/json'}, | |
| body: JSON.stringify({ | |
| model: DEFAULT_MODEL, | |
| messages: messages.map(msg => ({ role: msg.role, content: msg.content })), | |
| max_tokens: 1000, | |
| temperature: 0.7 | |
| }), | |
| signal: controller.signal | |
| }); | |
| if (!response.ok) throw new Error(`Erreur HTTP: ${response.status}`); | |
| const data = await response.json(); | |
| let assistantResponse = ''; | |
| if (data.choices && data.choices[0]) { | |
| if (data.choices[0].message && data.choices[0].message.content) { | |
| assistantResponse = data.choices[0].message.content; | |
| } else if (data.choices[0].text) { | |
| assistantResponse = data.choices[0].text; | |
| } | |
| } else if (data.output) assistantResponse = data.output; | |
| if (!assistantResponse) throw new Error('Réponse vide de l\'API'); | |
| addMessage('assistant', assistantResponse); | |
| isConnected = true; | |
| } catch (error) { | |
| console.error('Erreur lors de l\'envoi du message:', error); | |
| isConnected = false; | |
| if (error.name === 'AbortError') { | |
| addMessage('assistant', 'Désolé, la requête a expiré. Le serveur ne répond pas.'); | |
| showToast('Timeout', 'La requête a expiré après 30 secondes', 'error'); | |
| } else { | |
| addMessage('assistant', `Désolé, je n'ai pas pu traiter votre message. Erreur : ${error.message}`); | |
| showToast('Erreur d\'envoi', error.message, 'error'); | |
| } | |
| } finally { | |
| clearTimeout(timeoutId); | |
| setLoading(false); | |
| } | |
| } | |
| function addMessage(role, content) { | |
| const message = { role, content, timestamp: new Date() }; | |
| messages.push(message); | |
| const messageElement = createMessageElement(message); | |
| messagesList.appendChild(messageElement); | |
| setTimeout(() => { | |
| document.getElementById('messagesEnd').scrollIntoView({ behavior: 'smooth' }); | |
| }, 100); | |
| } | |
| function createMessageElement(message) { | |
| const isUser = message.role === 'user'; | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = 'message-appear mb-4'; | |
| messageDiv.innerHTML = ` | |
| <div class="flex gap-1 ${isUser ? 'justify-end' : 'justify-start'}"> | |
| ${!isUser ? ` | |
| <div class="avatar border-2 border-primary bg-gradient-primary text-white"> | |
| <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/> | |
| </svg> | |
| </div> | |
| ` : ''} | |
| <div class="message-container ${isUser ? 'user-message order-first' : 'assistant-message'}"> | |
| <div class="card message-card shadow-chat message-bubble ${ | |
| isUser ? 'bg-chat-user text-chat-user-foreground' : 'bg-chat-assistant text-chat-assistant-foreground' | |
| }"> | |
| <div class="text-sm leading-relaxed whitespace-pre-wrap"> | |
| ${escapeHtml(message.content)} | |
| </div> | |
| </div> | |
| <div class="mt-0.5 text-xs text-muted-foreground ${isUser ? 'text-right' : 'text-left'}"> | |
| ${isUser ? 'Vous' : 'Jux'} | |
| </div> | |
| </div> | |
| ${isUser ? ` | |
| <div class="avatar border-2 border-muted bg-secondary"> | |
| <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/> | |
| </svg> | |
| </div> | |
| ` : ''} | |
| </div> | |
| `; | |
| return messageDiv; | |
| } | |
| // Propre échappement HTML basique pour éviter injection | |
| function escapeHtml(unsafe) { | |
| return unsafe | |
| .replace(/&/g, "&") | |
| .replace(/</g, "<") | |
| .replace(/>/g, ">") | |
| .replace(/"/g, """) | |
| .replace(/'/g, "'"); | |
| } | |
| function setLoading(loading) { | |
| isLoading = loading; | |
| if (loading) { | |
| typingIndicator.classList.remove('hidden'); | |
| sendIcon.classList.add('hidden'); | |
| loadingIcon.classList.remove('hidden'); | |
| sendButton.disabled = true; | |
| } else { | |
| typingIndicator.classList.add('hidden'); | |
| sendIcon.classList.remove('hidden'); | |
| loadingIcon.classList.add('hidden'); | |
| sendButton.disabled = false; | |
| } | |
| } | |
| async function checkModels() { | |
| try { | |
| const response = await fetch(`${API_BASE_URL}/v1/models`); | |
| const data = await response.json(); | |
| if (data.data && Array.isArray(data.data)) { | |
| const modelCount = data.data.length; | |
| showToast('Modèles récupérés', `${modelCount} modèle(s) disponible(s)`, 'success'); | |
| isConnected = true; | |
| updateConnectionStatus(); | |
| } else { | |
| throw new Error('Format de réponse invalide'); | |
| } | |
| } catch (error) { | |
| console.error('Erreur lors de la récupération des modèles:', error); | |
| showToast('Erreur', error.message, 'error'); | |
| isConnected = false; | |
| updateConnectionStatus(); | |
| } | |
| } | |
| function newConversation() { | |
| messages = []; | |
| messagesList.innerHTML = ''; | |
| welcomeMessage.classList.remove('hidden'); | |
| showToast('Nouvelle conversation', 'Conversation réinitialisée', 'success'); | |
| } | |
| function exportConversation() { | |
| if (messages.length === 0) { | |
| showToast('Aucune conversation', 'Aucune conversation à exporter', 'error'); | |
| return; | |
| } | |
| const exportData = { | |
| title: `Conversation Jux-Ai - ${new Date().toLocaleDateString('fr-FR')}`, | |
| model: DEFAULT_MODEL, | |
| timestamp: new Date().toISOString(), | |
| messages: messages | |
| }; | |
| const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' }); | |
| const url = URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = `jux-conversation-${Date.now()}.json`; | |
| document.body.appendChild(a); | |
| a.click(); | |
| document.body.removeChild(a); | |
| URL.revokeObjectURL(url); | |
| showToast('Conversation exportée', 'Le fichier a été téléchargé', 'success'); | |
| } | |
| // Toasts | |
| function showToast(title, message, type = 'info') { | |
| const toast = document.createElement('div'); | |
| toast.className = `fixed top-4 right-4 z-50 card p-4 shadow-elegant max-w-sm ${ | |
| type === 'error' ? 'border-destructive text-destructive' : | |
| type === 'success' ? 'border-accent text-accent' : 'border-primary text-primary' | |
| }`; | |
| toast.innerHTML = `<div class="font-bold text-sm">${title}</div><div class="text-xs mt-1 opacity-90">${escapeHtml(message)}</div>`; | |
| document.body.appendChild(toast); | |
| toast.style.transform = 'translateX(100%)'; | |
| toast.style.transition = 'transform 0.3s ease-out'; | |
| setTimeout(() => { toast.style.transform = 'translateX(0)'; }, 10); | |
| setTimeout(() => { | |
| toast.style.transform = 'translateX(100%)'; | |
| setTimeout(() => { document.body.removeChild(toast); }, 300); | |
| }, 4000); | |
| } | |
| // ----------------------- | |
| // Fonctionnalité de génération d'images | |
| // ----------------------- | |
| // Lance la génération en appelant le backend /generate | |
| async function generateImage() { | |
| const preset = genPresetSelect.value || 'fast'; | |
| // Utilise le contenu du textarea comme prompt si présent, sinon prompt par défaut | |
| const promptText = messageInput.value.trim() || 'un paysage de forêt ultra réaliste'; | |
| // Add user message | |
| addMessage('user', `Générer image: ${promptText}`); | |
| if (messages.length === 1) welcomeMessage.classList.add('hidden'); | |
| // Set generating state | |
| isGenerating = true; | |
| messageInput.disabled = true; | |
| sendButton.disabled = true; | |
| document.getElementById('generateImageBtn').disabled = true; | |
| // Reset preview UI | |
| generationPreview.innerHTML = ''; | |
| generationStatus.textContent = 'Envoi de la requête de génération...'; | |
| try { | |
| const res = await fetch(`${GENERATION_API_BASE}/generate`, { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ prompt: promptText, preset }) | |
| }); | |
| if (!res.ok) { | |
| const txt = await res.text(); | |
| throw new Error(`Erreur génération: ${res.status} ${txt}`); | |
| } | |
| const data = await res.json(); | |
| const runCode = data.run_code; | |
| generationStatus.textContent = `Génération démarrée — run: ${runCode}`; | |
| showToast('Génération démarrée', `run: ${runCode}`, 'success'); | |
| // Démarrer polling pour ces images | |
| startPollingGeneration(runCode); | |
| } catch (err) { | |
| console.error('Erreur generateImage:', err); | |
| generationStatus.textContent = `Erreur: ${err.message}`; | |
| showToast('Erreur génération', err.message, 'error'); | |
| document.getElementById('generateImageBtn').disabled = false; | |
| } | |
| } | |
| function startPollingGeneration(runCode) { | |
| // arrête l'ancien polling | |
| if (genPollInterval) { | |
| clearInterval(genPollInterval); | |
| genPollInterval = null; | |
| } | |
| // poll toutes les secondes | |
| genPollInterval = setInterval(async () => { | |
| try { | |
| const metaRes = await fetch(`${GENERATION_API_BASE}/runs/${runCode}/metadata`); | |
| if (!metaRes.ok) { | |
| // si pas trouvé, on attend et on continue | |
| generationStatus.textContent = `Run introuvable (code: ${runCode})`; | |
| return; | |
| } | |
| const meta = await metaRes.json(); | |
| generationStatus.textContent = `Statut: ${meta.status} — mis à jour: ${meta.last_update || '—'}`; | |
| // récupérer la liste d'images | |
| const imgsRes = await fetch(`${GENERATION_API_BASE}/runs/${runCode}/images`); | |
| if (imgsRes.ok) { | |
| const imgsJson = await imgsRes.json(); | |
| renderGenerationImages(runCode, imgsJson.images || []); | |
| } | |
| // stop si terminé ou erreur | |
| if (meta.status === 'done' || meta.status === 'error') { | |
| clearInterval(genPollInterval); | |
| genPollInterval = null; | |
| isGenerating = false; | |
| messageInput.disabled = false; | |
| sendButton.disabled = false; | |
| document.getElementById('generateImageBtn').disabled = false; | |
| if (meta.status === 'done') showToast('Génération terminée', `run: ${runCode}`, 'success'); | |
| if (meta.status === 'error') showToast('Erreur génération', meta.error || 'Erreur inconnue', 'error'); | |
| } | |
| } catch (e) { | |
| console.error('Erreur polling generation:', e); | |
| generationStatus.textContent = `Erreur polling: ${e.message}`; | |
| clearInterval(genPollInterval); | |
| genPollInterval = null; | |
| document.getElementById('generateImageBtn').disabled = false; | |
| } | |
| }, 1000); | |
| } | |
| // Affiche les miniatures et permet d'ouvrir l'image en grand (nouvel onglet) | |
| function renderGenerationImages(runCode, images) { | |
| generationPreview.innerHTML = ''; | |
| // images: [{file, mtime}, ...] — tri par mtime | |
| images.sort((a,b) => (a.mtime || 0) - (b.mtime || 0)); | |
| for (const it of images) { | |
| const imgSrc = `${GENERATION_API_BASE}/runs/${runCode}/files/${it.file}`; | |
| const img = document.createElement('img'); | |
| img.src = imgSrc; | |
| img.alt = it.file; | |
| img.title = it.file; | |
| img.onclick = () => window.open(img.src, '_blank'); | |
| generationPreview.appendChild(img); | |
| // Add to chat if new | |
| if (!shownImages.has(it.file)) { | |
| shownImages.add(it.file); | |
| addMessage('assistant', `<img src="${imgSrc}" alt="${it.file}" style="max-width:300px;">`); | |
| } | |
| } | |
| } | |
| // ----------------------- | |
| // Fin génération d'images | |
| // ----------------------- | |
| // Gestion du focus automatique | |
| document.addEventListener('click', function(e) { | |
| if (!e.target.closest('#messageInput') && !e.target.closest('button')) { | |
| setTimeout(() => { | |
| if (!isLoading && isConnected !== false) { | |
| messageInput.focus(); | |
| } | |
| }, 100); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |