| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>CodeCraft Studio</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| </head> |
| <body class="bg-gray-900 text-gray-100"> |
| <div id="app" class="flex h-screen overflow-hidden"> |
|
|
| |
| <aside class="sidebar w-64 bg-gray-800 p-4 flex flex-col border-r border-gray-700"> |
| <div class="flex items-center mb-6"> |
| <i data-feather="code" class="text-blue-400 mr-2"></i> |
| <h1 class="text-xl font-bold text-blue-400">CodeCraft Studio</h1> |
| </div> |
| |
| <div class="relative mb-6"> |
| <input |
| type="text" |
| placeholder="Rechercher..." |
| class="w-full bg-gray-700 rounded-lg px-4 py-2 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" |
| > |
| <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400 w-4 h-4"></i> |
| </div> |
|
|
| <nav class="flex-1 space-y-2"> |
| <button class="sidebar-btn"> |
| <i data-feather="folder" class="mr-2"></i> |
| Projet 1 |
| </button> |
| <button class="sidebar-btn"> |
| <i data-feather="folder" class="mr-2"></i> |
| Projet 2 |
| </button> |
| <button class="sidebar-btn"> |
| <i data-feather="book" class="mr-2"></i> |
| Bibliothèque |
| </button> |
| <button class="sidebar-btn" onclick="showSettings()"> |
| <i data-feather="settings" class="mr-2"></i> |
| Paramètres Ollama |
| </button> |
| </nav> |
|
|
| <div class="mt-auto pt-4 border-t border-gray-700"> |
| <div class="flex items-center text-xs text-gray-400"> |
| <i data-feather="cpu" class="mr-2"></i> |
| <span id="aiStatus">Mode démonstration</span> |
| </div> |
| </div> |
| </aside> |
|
|
| |
| <main class="main flex-1 flex flex-col bg-gray-900 relative"> |
| <div class="empty flex-1 flex flex-col items-center justify-center text-center p-8"> |
| <i data-feather="code" class="w-16 h-16 text-blue-400 mb-4"></i> |
| <h3 class="text-2xl font-semibold mb-2">Zone de création</h3> |
| <p class="text-gray-400 max-w-md">Commencez à taper votre prompt ci-dessous pour générer du contenu.</p> |
| </div> |
|
|
| |
| <div class="prompt sticky bottom-0 bg-gray-800 p-4 border-t border-gray-700"> |
| <div class="flex items-center rounded-lg bg-gray-700 overflow-hidden"> |
| <input |
| id="promptInput" |
| type="text" |
| placeholder="Écrivez votre prompt ici..." |
| class="flex-1 bg-transparent p-3 focus:outline-none" |
| > |
| <button |
| onclick="sendPrompt()" |
| class="bg-blue-600 hover:bg-blue-700 px-4 py-2 transition-colors" |
| > |
| <i data-feather="send" class="w-4 h-4"></i> |
| </button> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="bg-gray-800 rounded-lg p-6 w-full max-w-md"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-lg font-semibold">Configuration Ollama</h3> |
| <button onclick="hideSettings()" class="text-gray-400 hover:text-white"> |
| <i data-feather="x"></i> |
| </button> |
| </div> |
| |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium mb-1">URL de l'API</label> |
| <input |
| id="ollamaUrl" |
| type="text" |
| value="http://localhost:11434" |
| class="w-full bg-gray-700 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" |
| > |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium mb-1">Modèle par défaut</label> |
| <select |
| id="ollamaModel" |
| class="w-full bg-gray-700 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" |
| > |
| <option value="llama2">Llama 2</option> |
| <option value="mistral">Mistral</option> |
| <option value="codellama">CodeLlama</option> |
| </select> |
| </div> |
| |
| <div class="flex justify-end space-x-2 pt-4"> |
| <button |
| onclick="testOllamaConnection()" |
| class="px-4 py-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors" |
| > |
| Tester la connexion |
| </button> |
| <button |
| onclick="saveOllamaSettings()" |
| class="px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors" |
| > |
| Enregistrer |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <aside class="preview w-80 bg-gray-800 border-l border-gray-700 flex flex-col"> |
| <div class="p-4 border-b border-gray-700"> |
| <h3 class="font-semibold flex items-center"> |
| <i data-feather="eye" class="mr-2"></i> |
| Aperçu |
| </h3> |
| </div> |
| <div |
| id="previewBox" |
| class="flex-1 p-4 overflow-y-auto text-gray-300" |
| > |
| <div class="flex flex-col items-center justify-center h-full text-gray-400 p-4 text-center"> |
| <i data-feather="cpu" class="w-12 h-12 mb-4 text-blue-400"></i> |
| <h4 class="font-medium mb-2">Configuration Ollama requise</h4> |
| <p class="text-sm max-w-xs mb-4"> |
| Ollama fonctionne en local. Aucune clé API n'est requise. |
| </p> |
| <div class="bg-gray-700 p-3 rounded-lg text-left w-full max-w-xs"> |
| <p class="text-xs mb-1">1. Téléchargez et installez Ollama</p> |
| <p class="text-xs mb-1">2. Lancez l'application Ollama</p> |
| <p class="text-xs">3. Configurez l'URL dans les paramètres</p> |
| </div> |
| <button |
| onclick="showSettings()" |
| class="mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm transition-colors" |
| > |
| <i data-feather="settings" class="w-4 h-4 mr-2"></i> |
| Configurer Ollama |
| </button> |
| </div> |
| </div> |
| </aside> |
| </div> |
|
|
| <script src="config.js"></script> |
| <script src="ai-adapter.js"></script> |
| <script src="app.js"></script> |
| <script> |
| feather.replace(); |
| </script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
