Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>AI Chat Hub - 50+ Free Models</title> | |
| <meta name="description" content="Chat with 50+ AI models including OpenAI GPT OSS 120B, 20B, and more. Free access to cutting-edge language models."> | |
| <meta name="theme-color" content="#6366f1"> | |
| <meta name="keywords" content="AI chat, GPT, language models, free AI, OpenAI, chatbot"> | |
| <link rel="stylesheet" href="assets/css/styles.css"> | |
| <style> | |
| /* Ensure modals are properly positioned */ | |
| .settings-modal, .model-info-modal { | |
| position: fixed ; | |
| top: 0 ; | |
| left: 0 ; | |
| width: 100% ; | |
| height: 100% ; | |
| z-index: 1000 ; | |
| } | |
| /* Fix modal display */ | |
| .settings-modal.active, .model-info-modal.active { | |
| display: flex ; | |
| } | |
| </style> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🤖</text></svg>"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" crossorigin="anonymous"> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <div class="header-container"> | |
| <div class="logo"> | |
| <i class="fas fa-robot"></i> | |
| <span>AI Chat Hub</span> | |
| </div> | |
| <nav class="nav"> | |
| <a href="#" class="nav-link" onclick="showModelInfo()"> | |
| <i class="fas fa-info-circle"></i> Models | |
| </a> | |
| <a href="#" class="nav-link" onclick="toggleSettings()"> | |
| <i class="fas fa-cog"></i> Settings | |
| </a> | |
| coder-link"> | |
| Built with anycoder | |
| </a> | |
| </nav> | |
| </div> | |
| </header> | |
| <main class="main-container"> | |
| <aside class="sidebar"> | |
| <div class="model-selector"> | |
| <h3>Select Model</h3> | |
| <div class="search-box"> | |
| <i class="fas fa-search"></i> | |
| <input type="text" id="modelSearch" placeholder="Search models..."> | |
| </div> | |
| <div class="model-categories"> | |
| <button class="category-btn active" data-category="all">All Models</button> | |
| <button class="category-btn" data-category="openai">OpenAI OSS</button> | |
| <button class="category-btn" data-category="meta">Meta</button> | |
| <button class="category-btn" data-category="google">Google</button> | |
| <button class="category-btn" data-category="mistral">Mistral</button> | |
| <button class="category-btn" data-category="other">Other</button> | |
| </div> | |
| <div class="model-list" id="modelList"> | |
| <!-- Models will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| </aside> | |
| <section class="chat-container"> | |
| <div class="chat-header"> | |
| <div class="current-model"> | |
| <i class="fas fa-brain"></i> | |
| <span id="currentModelName">OpenAI GPT OSS 120B</span> | |
| <span class="model-status online"></span> | |
| </div> | |
| <div class="chat-actions"> | |
| <button onclick="clearChat()" class="action-btn" title="Clear chat"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| <button onclick="exportChat()" class="action-btn" title="Export chat"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| <button onclick="toggleDarkMode()" class="action-btn" title="Toggle dark mode"> | |
| <i class="fas fa-moon"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="chat-messages" id="chatMessages"> | |
| <div class="welcome-message"> | |
| <i class="fas fa-robot"></i> | |
| <h2>Welcome to AI Chat Hub</h2> | |
| <p>Select a model from the sidebar and start chatting. Access 50+ cutting-edge AI models for free!</p> | |
| <div class="quick-actions"> | |
| <button onclick="sendExample('Tell me about yourself')" class="example-btn"> | |
| <i class="fas fa-comment"></i> Tell me about yourself | |
| </button> | |
| <button onclick="sendExample('Help me write a story')" class="example-btn"> | |
| <i class="fas fa-pen"></i> Help me write a story | |
| </button> | |
| <button onclick="sendExample('Explain quantum computing')" class="example-btn"> | |
| <i class="fas fa-atom"></i> Explain quantum computing | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chat-input-container"> | |
| <div class="input-wrapper"> | |
| <textarea | |
| id="messageInput" | |
| placeholder="Type your message here..." | |
| rows="1" | |
| maxlength="4000" | |
| ></textarea> | |
| <div class="input-actions"> | |
| <button onclick="attachFile()" class="input-action-btn" title="Attach file"> | |
| <i class="fas fa-paperclip"></i> | |
| </button> | |
| <button onclick="sendVoiceMessage()" class="input-action-btn" title="Voice input"> | |
| <i class="fas fa-microphone"></i> | |
| </button> | |
| <button onclick="sendMessage()" class="send-btn" id="sendBtn"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="input-info"> | |
| <span id="charCount">0 / 4000</span> | |
| <span id="modelInfo">Model: OpenAI GPT OSS 120B • Free tier</span> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <div class="settings-modal" id="settingsModal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h3>Settings</h3> | |
| <button onclick="toggleSettings()" class="close-btn"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="setting-group"> | |
| <label>Temperature</label> | |
| <input type="range" id="temperature" min="0" max="100" value="70"> | |
| <span id="tempValue">0.7</span> | |
| </div> | |
| <div class="setting-group"> | |
| <label>Max Tokens</label> | |
| <select id="maxTokens"> | |
| <option value="512">512</option> | |
| <option value="1024">1024</option> | |
| <option value="2048" selected>2048</option> | |
| <option value="4096">4096</option> | |
| </select> | |
| </div> | |
| <div class="setting-group"> | |
| <label>System Prompt</label> | |
| <textarea id="systemPrompt" placeholder="Enter system prompt...">You are a helpful AI assistant.</textarea> | |
| </div> | |
| <div class="setting-group"> | |
| <label> | |
| <input type="checkbox" id="streamResponse" checked> | |
| Stream responses | |
| </label> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button onclick="saveSettings()" class="btn-primary">Save Settings</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="model-info-modal" id="modelInfoModal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h3>Available Models</h3> | |
| <button onclick="closeModelInfo()" class="close-btn"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="model-stats"> | |
| <div class="stat-card"> | |
| <i class="fas fa-brain"></i> | |
| <div> | |
| <h4>50+</h4> | |
| <p>Total Models</p> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <i class="fas fa-bolt"></i> | |
| <div> | |
| <h4>Free</h4> | |
| <p>Access</p> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <i class="fas fa-server"></i> | |
| <div> | |
| <h4>120B</h4> | |
| <p>Max Parameters</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="model-categories-info"> | |
| <h4>Model Categories</h4> | |
| <ul> | |
| <li><strong>OpenAI OSS:</strong> GPT-120B, GPT-20B, and more</li> | |
| <li><strong>Meta:</strong> LLaMA 2 70B, 13B, 7B variants</li> | |
| <li><strong>Google:</strong> PaLM 2, Gemini models</li> | |
| <li><strong>Mistral:</strong> Mixtral 8x7B, Mistral 7B</li> | |
| <li><strong>Other:</strong> Falcon, Claude, Vicuna, and more</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="assets/js/app.js"></script> | |
| <script> | |
| // Initialize theme on load | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const savedTheme = localStorage.getItem('theme'); | |
| if (savedTheme) { | |
| document.body.setAttribute('data-theme', savedTheme); | |
| const darkModeBtn = document.querySelector('.action-btn:nth-child(3) i'); | |
| darkModeBtn.className = savedTheme === 'dark' ? 'fas fa-sun' : 'fas fa-moon'; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |