| <!DOCTYPE html> |
| <html lang="en" class="h-full"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Kiro - Local LLM Interface</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 50: '#f0f9ff', |
| 100: '#e0f2fe', |
| 200: '#bae6fd', |
| 300: '#7dd3fc', |
| 400: '#38bdf8', |
| 500: '#0ea5e9', |
| 600: '#0284c7', |
| 700: '#0369a1', |
| 800: '#075985', |
| 900: '#0c4a6e', |
| }, |
| secondary: { |
| 50: '#f5f3ff', |
| 100: '#ede9fe', |
| 200: '#ddd6fe', |
| 300: '#c4b5fd', |
| 400: '#a78bfa', |
| 500: '#8b5cf6', |
| 600: '#7c3aed', |
| 700: '#6d28d9', |
| 800: '#5b21b6', |
| 900: '#4c1d95', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| </head> |
| <body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 h-full"> |
| <div class="flex flex-col h-full"> |
| <custom-header></custom-header> |
| <div class="flex flex-1 overflow-hidden"> |
| <custom-sidebar></custom-sidebar> |
| <main class="flex-1 overflow-auto"> |
| <div class="h-full flex"> |
| <div class="flex-1 flex flex-col border-r border-gray-200 dark:border-gray-700"> |
| <div class="h-12 border-b border-gray-200 dark:border-gray-700 flex items-center px-4"> |
| <span class="font-medium">Explorer</span> |
| </div> |
| <div class="flex-1 overflow-auto p-2"> |
| <div class="space-y-1"> |
| <div class="flex items-center gap-2 p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded cursor-pointer"> |
| <i data-feather="folder" class="w-4 h-4"></i> |
| <span>src</span> |
| </div> |
| <div class="flex items-center gap-2 p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded cursor-pointer ml-6"> |
| <i data-feather="file" class="w-4 h-4"></i> |
| <span>index.js</span> |
| </div> |
| <div class="flex items-center gap-2 p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded cursor-pointer"> |
| <i data-feather="file" class="w-4 h-4"></i> |
| <span>package.json</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="flex-1 flex flex-col"> |
| <editor-panel></editor-panel> |
| <terminal-panel></terminal-panel> |
| </div> |
| <ai-assistant style="width: 300px;"></ai-assistant> |
| </div> |
| <div class="space-y-4"> |
| <div class="flex items-start space-x-4"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center"> |
| <i data-feather="user" class="text-primary-600 dark:text-primary-400"></i> |
| </div> |
| <div class="flex-1 min-w-0"> |
| <p class="text-sm font-medium text-gray-900 dark:text-gray-100">You</p> |
| <p class="text-sm text-gray-500 dark:text-gray-400">What can you tell me about local LLMs?</p> |
| </div> |
| </div> |
| <div class="flex items-start space-x-4"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-secondary-100 dark:bg-secondary-900 flex items-center justify-center"> |
| <i data-feather="cpu" class="text-secondary-600 dark:text-secondary-400"></i> |
| </div> |
| <div class="flex-1 min-w-0"> |
| <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Kiro</p> |
| <p class="text-sm text-gray-500 dark:text-gray-400">Local LLMs (Large Language Models) allow you to run powerful AI models directly on your own hardware, ensuring privacy and full control over your data. They can perform tasks like text generation, summarization, and question answering without needing cloud services.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6"> |
| <div class="mb-4"> |
| <label for="model-select" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Select Model</label> |
| <select id="model-select" class="w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-primary-500 focus:ring-primary-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"> |
| <option>Llama 2 7B</option> |
| <option>Mistral 7B</option> |
| <option>GPT4All</option> |
| <option>Vicuna</option> |
| </select> |
| </div> |
| <div class="mb-4"> |
| <label for="prompt" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Your Prompt</label> |
| <textarea id="prompt" rows="4" class="w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-primary-500 focus:ring-primary-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="Ask me anything..."></textarea> |
| </div> |
| <div class="flex justify-between items-center"> |
| <div class="flex space-x-2"> |
| <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"> |
| <i data-feather="paperclip" class="w-5 h-5"></i> |
| </button> |
| <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"> |
| <i data-feather="mic" class="w-5 h-5"></i> |
| </button> |
| </div> |
| <button class="px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-md flex items-center space-x-2"> |
| <span>Send</span> |
| <i data-feather="send" class="w-4 h-4"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
| </div> |
| <script src="components/header.js"></script> |
| <script src="components/sidebar.js"></script> |
| <script src="components/editor-panel.js"></script> |
| <script src="components/terminal-panel.js"></script> |
| <script src="components/ai-assistant.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.40.0/min/vs/loader.min.js"></script> |
| <script src="script.js"></script> |
| <script> |
| feather.replace(); |
| </script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
