Spaces:
Running
Running
Please build a high quality Front End-Gui around this application and create the database schema for the backend. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AI Agent Integration Dashboard</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); color: #fff; line-height: 1.6; } .dashboard { max-width: 1600px; margin: 0 auto; padding: 20px; } .header { text-align: center; margin-bottom: 30px; background: rgba(255, 255, 255, 0.1); padding: 30px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); } .header h1 { font-size: 3em; color: #00d4ff; margin-bottom: 10px; text-shadow: 0 0 20px rgba(0, 212, 255, 0.5); } .header p { font-size: 1.2em; color: #b0c4de; max-width: 800px; margin: 0 auto; } .stats-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; } .stat-card { background: rgba(255, 255, 255, 0.1); padding: 20px; border-radius: 15px; text-align: center; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; } .stat-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 212, 255, 0.2); } .stat-number { font-size: 2.5em; font-weight: bold; color: #00d4ff; margin-bottom: 5px; } .stat-label { color: #b0c4de; font-size: 1.1em; } .agent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 25px; margin-bottom: 30px; } .agent-card { background: rgba(255, 255, 255, 0.1); padding: 25px; border-radius: 15px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; } .agent-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); } .agent-header { display: flex; align-items: center; margin-bottom: 20px; } .agent-icon { width: 50px; height: 50px; border-radius: 50%; margin-right: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.5em; font-weight: bold; } .claude-icon { background: linear-gradient(135deg, #ff6b6b, #ee5a24); } .gpt-icon { background: linear-gradient(135deg, #00d4ff, #0984e3); } .gemini-icon { background: linear-gradient(135deg, #fd79a8, #fdcb6e); } .deepseek-icon { background: linear-gradient(135deg, #a29bfe, #6c5ce7); } .llama-icon { background: linear-gradient(135deg, #00b894, #00cec9); } .agent-title { font-size: 1.5em; color: #00d4ff; margin-bottom: 5px; } .agent-provider { color: #b0c4de; font-size: 0.9em; } .agent-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; } .agent-stat { background: rgba(0, 0, 0, 0.2); padding: 10px; border-radius: 8px; text-align: center; } .agent-stat-value { font-size: 1.3em; font-weight: bold; color: #00d4ff; } .agent-stat-label { font-size: 0.8em; color: #b0c4de; } .capabilities { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .capability { background: rgba(0, 212, 255, 0.2); color: #00d4ff; padding: 5px 12px; border-radius: 15px; font-size: 0.9em; border: 1px solid rgba(0, 212, 255, 0.3); } .api-section { margin-top: 20px; } .api-tabs { display: flex; margin-bottom: 15px; background: rgba(0, 0, 0, 0.2); border-radius: 8px; overflow: hidden; flex-wrap: wrap; } .api-tab { flex: 1; padding: 10px; background: transparent; border: none; color: #b0c4de; cursor: pointer; transition: all 0.3s ease; font-size: 0.9em; min-width: 120px; } .api-tab.active { background: rgba(0, 212, 255, 0.3); color: #00d4ff; } .api-content { display: none; } .api-content.active { display: block; } .code-block { background: rgba(0, 0, 0, 0.4); border-radius: 8px; overflow: hidden; margin-bottom: 15px; } .code-header { background: rgba(0, 0, 0, 0.6); padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .code-title { color: #00d4ff; font-weight: bold; font-size: 0.9em; } .copy-btn { background: rgba(0, 212, 255, 0.2); color: #00d4ff; border: 1px solid rgba(0, 212, 255, 0.3); padding: 5px 10px; border-radius: 5px; cursor: pointer; font-size: 0.8em; transition: all 0.3s ease; } .copy-btn:hover { background: rgba(0, 212, 255, 0.3); } .code-content { padding: 15px; overflow-x: auto; } .code-content pre { margin: 0; font-size: 0.85em; line-height: 1.4; } /* Chat Interface Styles */ .chat-interface { background: rgba(0, 0, 0, 0.3); border-radius: 12px; overflow: hidden; border: 1px solid rgba(0, 212, 255, 0.2); } .chat-header { background: rgba(0, 212, 255, 0.1); padding: 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(0, 212, 255, 0.2); } .chat-title { color: #00d4ff; font-weight: bold; font-size: 1.1em; } .chat-controls { display: flex; gap: 10px; } .chat-btn { padding: 6px 12px; border-radius: 6px; border: none; cursor: pointer; font-size: 0.9em; transition: all 0.3s ease; } .chat-btn.primary { background: linear-gradient(135deg, #00d4ff, #0984e3); color: white; } .chat-btn.secondary { background: rgba(255, 255, 255, 0.1); color: #b0c4de; border: 1px solid rgba(255, 255, 255, 0.2); } .chat-btn:hover { transform: translateY(-1px); } .chat-messages { height: 300px; overflow-y: auto; padding: 15px; background: rgba(0, 0, 0, 0.2); } .chat-message { display: flex; margin-bottom: 20px; align-items: flex-start; } .message-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #00d4ff, #0984e3); display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0; } .message-content { flex: 1; } .message-text { background: rgba(255, 255, 255, 0.1); padding: 10px 15px; border-radius: 12px; margin-bottom: 5px; line-height: 1.4; } .message-time { font-size: 0.8em; color: #b0c4de; opacity: 0.7; } .chat-input-area { border-top: 1px solid rgba(0, 212, 255, 0.2); } .chat-settings { padding: 12px 15px; background: rgba(0, 0, 0, 0.2); display: flex; gap: 20px; flex-wrap: wrap; align-items: center; border-bottom: 1px solid rgba(0, 212, 255, 0.1); } .setting-group { display: flex; align-items: center; gap: 8px; } .setting-group label { font-size: 0.9em; color: #b0c4de; white-space: nowrap; } .setting-group input[type="number"], .setting-group input[type="range"] { background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(0, 212, 255, 0.3); border-radius: 4px; padding: 4px 8px; color: #fff; font-size: 0.9em; width: 80px; } .setting-group input[type="range"] { width: 100px; } .chat-input-container { display: flex; padding: 15px; gap: 10px; align-items: flex-end; } .chat-input { flex: 1; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(0, 212, 255, 0.3); border-radius: 8px; padding: 12px; color: #fff; font-family: inherit; resize: vertical; min-height: 20px; } .chat-input:focus { outline: none; border-color: #00d4ff; box-shadow: 0 0 10px rgba(0, 212, 255, 0.3); } .send-btn { background: linear-gradient(135deg, #00d4ff, #0984e3); border: none; border-radius: 8px; width: 45px; height: 45px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .send-btn:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(0, 212, 255, 0.4); } .send-icon { color: white; font-size: 1.2em; font-weight: bold; } /* Knowledge Base Styles */ .knowledge-base-manager { background: rgba(0, 0, 0, 0.3); border-radius: 12px; padding: 20px; border: 1px solid rgba(0, 212, 255, 0.2); } .kb-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid rgba(0, 212, 255, 0.2); } .kb-title { color: #00d4ff; font-size: 1.3em; margin: 0; } .kb-stats { display: flex; gap: 15px; } .kb-stat { font-size: 0.9em; color: #b0c4de; } .kb-controls { display: flex; gap: 20px; margin-bottom: 20px; align-items: center; } .kb-upload-area { flex: 1; } .upload-dropzone { border: 2px dashed rgba(0, 212, 255, 0.3); border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; } .upload-dropzone:hover { border-color: #00d4ff; background: rgba(0, 212, 255, 0.1); } .upload-icon { font-size: 2em; margin-bottom: 10px; } .upload-text { color: #b0c4de; } .kb-actions { display: flex; gap: 10px; flex-wrap: wrap; } .kb-btn { padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer; font-size: 0.9em; transition: all 0.3s ease; } .kb-btn.primary { background: linear-gradient(135deg, #00d4ff, #0984e3); color: white; } .kb-btn.secondary { background: rgba(255, 255, 255, 0.1); color: #b0c4de; border: 1px solid rgba(255, 255, 255, 0.2); } .kb-content { margin-bottom: 20px; } .kb-search { display: flex; gap: 10px; margin-bottom: 20px; } .kb-search-input { flex: 1; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(0, 212, 255, 0.3); border-radius: 6px; padding: 10px; color: #fff; } .search-btn { background: linear-gradient(135deg, #00d4ff, #0984e3); border: none; border-radius: 6px; padding: 10px 15px; color: white; cursor: pointer; } .kb-documents { display: flex; flex-direction: column; gap: 15px; } .kb-document { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 15px; } .kb-doc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .kb-doc-name { color: #00d4ff; font-weight: bold; } .kb-doc-actions { display: flex; gap: 8px; } .kb-doc-btn { background: rgba(255, 255, 255, 0.1); border: none; border-radius: 4px; padding: 6px 8px; color: #b0c4de; cursor: pointer; transition: all 0.3s ease; } .kb-doc-btn:hover { background: rgba(255, 255, 255, 0.2); } .kb-doc-meta { display: flex; gap: 15px; margin-bottom: 10px; font-size: 0.8em; color: #b0c4de; } .kb-doc-status { padding: 2px 8px; border-radius: 10px; font-weight: bold; } .kb-doc-status.active { background: rgba(0, 184, 148, 0.3); color: #00b894; } .kb-doc-preview { color: #b0c4de; font-size: 0.9em; line-height: 1.4; } .kb-integration-code { margin-top: 20px; } /* System Prompt Styles */ .system-prompt-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 1000; backdrop-filter: blur(5px); } .system-prompt-modal.active { display: flex; align-items: center; justify-content: center; } .system-prompt-content { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border-radius: 15px; padding: 30px; max-width: 800px; width: 90%; max-height: 80%; overflow-y: auto; border: 1px solid rgba(0, 212, 255, 0.3); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); } .system-prompt-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid rgba(0, 212, 255, 0.3); } .system-prompt-title { color: #00d4ff; font-size: 1.8em; margin: 0; } .close-modal { background: rgba(255, 76, 76, 0.2); color: #ff4c4c; border: 1px solid rgba(255, 76, 76, 0.3); padding: 8px 15px; border-radius: 8px; cursor: pointer; font-size: 1.1em; transition: all 0.3s ease; } .close-modal:hover { background: rgba(255, 76, 76, 0.3); transform: scale(1.05); } .prompt-templates { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 25px; } .prompt-template { background: rgba(0, 212, 255, 0.1); border: 1px solid rgba(0, 212, 255, 0.3); border-radius: 10px; padding: 15px; cursor: pointer; transition: all 0.3s ease; text-align: center; } .prompt-template:hover { background: rgba(0, 212, 255, 0.2); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 212, 255, 0.2); } .prompt-template.active { background: rgba(0, 212, 255, 0.3); border-color: #00d4ff; } .template-name { color: #00d4ff; font-weight: bold; margin-bottom: 5px; } .template-description { color: #b0c4de; font-size: 0.9em; } .prompt-editor { margin-bottom: 20px; } .prompt-editor label { display: block; color: #00d4ff; margin-bottom: 8px; font-weight: bold; } .prompt-textarea { width: 100%; height: 200px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(0, 212, 255, 0.3); border-radius: 8px; padding: 15px; color: #fff; font-family: 'Courier New', monospace; font-size: 0.9em; line-height: 1.5; resize: vertical; } .prompt-textarea:focus { outline: none; border-color: #00d4ff; box-shadow: 0 0 10px rgba(0, 212, 255, 0.3); } .prompt-actions { display: flex; gap: 15px; justify-content: flex-end; } .prompt-btn { padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; font-weight: bold; transition: all 0.3s ease; } .prompt-btn.primary { background: linear-gradient(135deg, #00d4ff, #0984e3); color: white; } .prompt-btn.secondary { background: rgba(255, 255, 255, 0.1); color: #b0c4de; border: 1px solid rgba(255, 255, 255, 0.2); } .prompt-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .system-prompt-indicator { display: inline-block; width: 8px; height: 8px; background: #50fa7b; border-radius: 50%; margin-left: 8px; animation: pulse-green 2s infinite; } @keyframes pulse-green { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } .status-indicator { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; } .status-connected { background: #00b894; } .status-available { background: #fdcb6e; } .status-error { background: #e17055; } @media (max-width: 768px) { .agent-grid { grid-template-columns: 1fr; } .stats-overview { grid-template-columns: repeat(2, 1fr); } .api-tabs { flex-direction: column; } .api-tab { min-width: unset; } } </style> </head> <body> <div class="dashboard"> <div class="header"> <h1>🤖 AI Agent Integration Dashboard</h1> <p>Comprehensive API integration scripts for embedding AI models into any application with Chat, MCP, and Knowledge Base capabilities</p> </div> <div class="stats-overview"> <div class="stat-card"> <div class="stat-number">200+</div> <div class="stat-label">AI Models</div> </div> <div class="stat-card"> <div class="stat-number">15+</div> <div class="stat-label">Providers</div> </div> <div class="stat-card"> <div class="stat-number">50+</div> <div class="stat-label">Integration Examples</div> </div> <div class="stat-card"> <div class="stat-number">99.9%</div> <div class="stat-label">Uptime</div> </div> </div> <div class="agent-grid"> <!-- Claude 3.5 Sonnet --> <div class="agent-card"> <div class="agent-header"> <div class="agent-icon claude-icon">C</div> <div> <div class="agent-title"> <span class="status-indicator status-connected"></span> Claude 3.5 Sonnet </div> <div class="agent-provider">Anthropic</div> </div> </div> <div class="agent-stats"> <div class="agent-stat"> <div class="agent-stat-value">9.5/10</div> <div class="agent-stat-label">Accuracy</div> </div> <div class="agent-stat"> <div class="agent-stat-value">42ms</div> <div class="agent-stat-label">Speed</div> </div> <div class="agent-stat"> <div class="agent-stat-value">200K</div> <div class="agent-stat-label">Context</div> </div> </div> <div class="capabilities"> <span class="capability">Text Analysis</span> <span class="capability">Code Generation</span> <span class="capability">Reasoning</span> <span class="capability">Creative Writing</span> </div> <div class="api-section"> <div class="api-tabs"> <button class="api-tab active" onclick="showApiTab(this, 'claude-node')">Node.js</button> <button class="api-tab" onclick="showApiTab(this, 'claude-python')">Python</button> <button class="api-tab" onclick="showApiTab(this, 'claude-curl')">cURL</button> <button class="api-tab" onclick="showApiTab(this, 'claude-chat')">💬 Chat</button> <button class="api-tab" onclick="showApiTab(this, 'claude-mcp')">🔧 MCP</button> <button class="api-tab" onclick="showApiTab(this, 'claude-kb')">📚 Knowledge</button> <button class="api-tab" onclick="showSystemPrompt('claude')">System Prompt<span class="system-prompt-indicator"></span></button> </div> <div id="claude-node" class="api-content active"> <div class="code-block"> <div class="code-header"> <span class="code-title">Node.js Integration</span> <button class="copy-btn" onclick="copyCode(this)">Copy</button> </div> <div class="code-content"> <pre><code>const Anthropic = require('@anthropic-ai/sdk'); const anthropic = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY, }); async function callClaude(prompt, maxTokens = 1000) { try { const response = await anthropic.messages.create({ model: "claude-3-5-sonnet-20241022", max_tokens: maxTokens, messages: [ { role: "user", content: prompt } ] }); return response.content[0].text; } catch (error) { console.error('Claude API Error:', error); throw error; } } // Usage Example (async () => { const result = await callClaude("Analyze this data and provide insights..."); console.log(result); })();</code></pre> </div> </div> </div> <div id="claude-python" class="api-content"> <div class="code-block"> <div class="code-header"> <span class="code-title">Python Integration</span> <button class="copy-btn" onclick="copyCode(this)">Copy</button> </div> <div class="code-content"> <pre><code>import anthropic import os client = anthropic.Anthropic( api_key=os.environ.get("ANTHROPIC_API_KEY"), ) def call_claude(prompt, max_tokens=1000): try: message = client.messages.create( model="claude-3-5-sonnet-20241022", max_tokens=max_tokens, messages=[ { "role": "user", "content": prompt } ] ) return message.content[0].text except Exception as e: print(f"Claude API Error: {e}") raise e # Usage Example result = call_claude("Generate a marketing strategy for...") print(result)</code></pre> </div> </div> </div> <div id="claude-curl" class="api-content"> <div class="code-block"> <div class="code-header"> <span class="code-title">cURL Command</span> <button class="copy-btn" onclick="copyCode(this)">Copy</button> </div> <div class="code-content"> <pre><code>curl https://api.anthropic.com/v1/messages \ -H "Content-Type: application/json" \ -H "x-api-key: $ANTHROPIC_API_KEY" \ -H "anthropic-version: 2023-06-01" \ -d '{ "model": "claude-3-5-sonnet-20241022", "max_tokens": 1000, "messages": [ { "role": "user", "content": "Your prompt here" } ] }'</code></pre> </div> </div> </div> <div id="claude-chat" class="api-content"> <div class="chat-interface"> <div class="chat-header"> <span class="chat-title">🤖 Test Claude Integration</span> <div class="chat-controls"> <button class="chat-btn secondary" onclick="clearChat('claude')">Clear</button> <button class="chat-btn primary" onclick="exportChat('claude')">Export</button> </div> </div> <div class="chat-messages" id="claude-messages"> <div class="chat-message assistant"> <div class="message-avatar">🤖</div> <div class="message-content"> <div class="message-text">Hello! I'm Claude 3.5 Sonnet. Send me a message to test the integration with your custom system prompt and settings.</div> <div class="message-time">Just now</div> </div> </div> </div> <div class="chat-input-area"> <div class="chat-settings"> <div class="setting-group"> <label>Max Tokens:</label> <input type="number" value="1000" min="1" max="4000" id="claude-max-tokens"> </div> <div class="setting-group"> <label>Temperature:</label> <input type="range" min="0" max="1" step="0.1" value="0.7" id="claude-temperature"> <span id="claude-temp-display">0.7</span> </div> </div> <div class="chat-input-container"> <textarea class="chat-input" id="claude-input" placeholder="Type your message here..." rows="3"></textarea> <button class="send-btn" onclick="sendMessage('claude')"> <span class="send-icon">→</span> </button> </div> </div> </div> </div> <div id="claude-mcp" class="api-content"> <div class="code-block"> <div class="code-header"> <span class="code-title">MCP Server Integration</span> <button class="copy-btn" onclick="copyCode(this)">Copy</button> </div> <div class="code-content"> <pre><code>// Claude with MCP (Model Context Protocol) Integration const { MCPClient } = require('@anthropic-ai/mcp-client'); const Anthropic = require('@anthropic-ai/sdk'); class ClaudeMCPIntegration { constructor(apiKey, mcpServers = []) { this.anthropic = new Anthropic({ apiKey }); this.mcpClient = new MCPClient(); this.mcpServers = mcpServers; this.connectedServers = new Map(); } async connectMCPServers() { for (const server of this.mcpServers) { try { const connection = await this.mcpClient.connect(server); this.connectedServers.set(server.name, connection); console.log(`Connected to MCP server: ${server.name}`); } catch (error) { console.error(`Failed to connect to ${server.name}:`, error); } } } async callClaudeWithMCP(prompt, options = {}) { // Get available tools from MCP servers const tools = await this.getAvailableTools(); const response = await this.anthropic.messages.create({ model: "claude-3-5-sonnet-20241022", max_tokens: options.maxTokens || 1000, messages: [ { role: "user", content: prompt } ], tools: tools }); // Handle tool calls through MCP if (response.stop_reason === "tool_use") { return await this.handleToolCalls(response.content, prompt); } return response.content[0].text; } } // Usage Example const claude = new ClaudeMCPIntegration(process.env.ANTHROPIC_API_KEY, mcpServers); await claude.connectMCPServers(); const response = await claude.callClaudeWithMCP( "Analyze the sales data from last quarter and search for market trends" );</code></pre> </div> </div> </div> <div id="claude-kb" class="api-content"> <div class="knowledge-base-manager"> <div class="kb-header"> <h4 class="kb-title">📚 Knowledge Base Management</h4> <div class="kb-stats"> <span class="kb-stat"> <strong>12</strong> Documents </span> <span class="kb-stat"> <strong>2.4MB</strong> Total Size </span> <span class="kb-stat"> <strong>Active</strong> Status </span> </div> </div> <div class="kb-controls"> <div class="kb-upload-area"> <div class="upload-dropzone" onclick="document.getElementById('claude-file-input').click()"> <div class="upload-icon">📎</div> <div class="upload-text"> <strong>Click to upload</strong> or drag files here <br><small>Supports: PDF, TXT, MD, JSON, CSV</small> </div> </div> <input type="file" id="claude-file-input" multiple accept=".pdf,.txt,.md,.json,.csv" style="display: none;"> </div> <div class="kb-actions"> <button class="kb-btn primary" onclick="addManualEntry('claude')"> ➕ Add Entry </button> <button class="kb-btn secondary" onclick="importFromURL('claude')"> 🌐 Import URL </button> <button class="kb-btn secondary" onclick="syncKnowledgeBase('claude')"> 🔄 Sync </button> </div> </div> <div class="kb-content"> <div class="kb-search"> <input type="text" placeholder="Search knowledge base..." class="kb-search-input" id="claude-kb-search"> <button class="search-btn" onclick="searchKB('claude')">🔍</button> </div> <div class="kb-documents" id="claude-kb-docs"> <div class="kb-document"> <div class="kb-doc-header"> <span class="kb-doc-name">📄 Company Guidelines.pdf</span> <div class="kb-doc-actions"> <button class="kb-doc-btn" onclick="editKBDoc('claude', 'guidelines')">✏️</button> <button class="kb-doc-btn" onclick="removeKBDoc('claude', 'guidelines')">🗑️</button> </div> </div> <div class="kb-doc-meta"> <span>Added: 2024-01-15</span> <span>Size: 245KB</span> <span class="kb-doc-status active">Active</span> </div> <div class="kb-doc-preview"> Company policies and procedures for AI integration projects... </div> </div> <div class="kb-document"> <div class="kb-doc-header"> <span class="kb-doc-name">📊 Sales Data Q4.csv</span> <div class="kb-doc-actions"> <button class="kb-doc-btn" onclick="editKBDoc('claude', 'salesdata')">✏️</button> <button class="kb-doc-btn" onclick="removeKBDoc('claude', 'salesdata')">🗑️</button> </div> </div> <div class="kb-doc-meta"> <span>Added: 2024-01-12</span> <span>Size: 189KB</span> <span class="kb-doc-status active">Active</span> </div> <div class="kb-doc-preview"> Quarterly sales performance metrics and customer analytics... </div> </div> </div> </div> <div class="kb-integration-code"> <div class="code-block"> <div class="code-header"> <span class="code-title">Knowledge Base Integration</span> <button class="copy-btn" onclick="copyCode(this)">Copy</button> </div> <div class="code-content"> <pre><code>// Claude with Knowledge Base Integration class ClaudeKBIntegration { constructor(apiKey, knowledgeBaseId) { this.anthropic = new Anthropic({ apiKey }); this.kbId = knowledgeBaseId; this.vectorStore = new VectorStore(); // Your vector database } async queryWithKnowledge(question, context = {}) { // Retrieve relevant knowledge const relevantDocs = await this.searchKnowledgeBase(question); // Build context-aware prompt const prompt = this.buildKnowledgePrompt(question, relevantDocs, context); const response = await this.anthropic.messages.create({ model: "claude-3-5-sonnet-20241022", max_tokens: 2000, messages: [ { role: "user", content: prompt } ] }); return { answer: response.content[0].text, sources: relevantDocs.map(doc => doc.metadata), confidence: this.calculateConfidence(relevantDocs) }; } }</code></pre> </div> </div> </div> </div> </div> </div> </div> <!-- OpenRouter Multi-Model Hub --> <div class="agent-card" style="grid-column: 1 / -1;"> <div class="agent-header"> <div class="agent-icon" style="background: linear-gradient(135deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57);">🌐</div> <div> <div class="agent-title"> <span class="status-indicator status-connected"></span> OpenRouter Multi-Model Hub </div> <div class="agent-provider">OpenRouter.ai - Access 200+ AI Models</div> </div> </div> <div class="agent-stats"> <div class="agent-stat"> <div class="agent-stat-value">200+</div> <div class="agent-stat-label">Models</div> </div> <div class="agent-stat"> <div class="agent-stat-value">15+</div> <div class="agent-stat-label">Providers</div> </div> <div class="agent-stat"> <div class="agent-stat-value">99.9%</div> <div class="agent-stat-label">Uptime</div> </div> <div class="agent-stat"> <div class="agent-stat-value">$0.02</div> <div class="agent-stat-label">Min Cost/1M</div> </div> </div> <div class="capabilities"> <span class="capability">Unified API</span> <span class="capability">Cost Optimization</span> <span class="capability">Fallback Routing</span> <span class="capability">Real-time Pricing</span> <span class="capability">Model Comparison</span> </div> <div class="api-section"> <div class="api-tabs"> <button class="api-tab active" onclick="showApiTab(this, 'openrouter-unified')">Unified API</button> <button class="api-tab" onclick="showApiTab(this, 'openrouter-routing')">Smart Routing</button> <button class="api-tab" onclick="showApiTab(this, 'openrouter-chat')">💬 Chat</button> <button class="api-tab" onclick="showApiTab(this, 'openrouter-mcp')">🔧 MCP</button> <button class="api-tab" onclick="showApiTab(this, 'openrouter-kb')">📚 Knowledge</button> <button class="api-tab" onclick="showSystemPrompt('openrouter')">System Prompt<span class="system-prompt-indicator"></span></button> </div> <div id="openrouter-unified" class="api-content active"> <div class="code-block"> <div class="code-header"> <span class="code-title">OpenRouter Unified API</span> <button class="copy-btn" onclick="copyCode(this)">Copy</button> </div> <div class="code-content"> <pre><code>const OpenAI = require('openai'); // OpenRouter acts as a unified gateway to 200+ models const openrouter = new OpenAI({ baseURL: "https://openrouter.ai/api/v1", apiKey: process.env.OPENROUTER_API_KEY, defaultHeaders: { "HTTP-Referer": "https://yourapp.com", // Optional "X-Title": "Your App Name" // Optional } }); // Universal function that works with ANY model async function callAnyModel(prompt, model = "openai/gpt-4-turbo", options = {}) { try { const response = await openrouter.chat.completions.create({ model: model, messages: [ { role: "user", content: prompt } ], max_tokens: options.maxTokens || 1000, temperature: options.temperature || 0.7 }); return { content: response.choices[0].message.content, model: response.model, usage: response.usage, cost: calculateCost(response.usage, model) }; } catch (error) { console.error(`Error with model ${model}:`, error); throw error; } } // Available models (constantly updated) const POPULAR_MODELS = { // OpenAI Models "openai/gpt-4-turbo": "Latest GPT-4 Turbo", "openai/gpt-4": "GPT-4 Base", "openai/gpt-3.5-turbo": "GPT-3.5 Turbo", // Anthropic Models "anthropic/claude-3-opus": "Claude 3 Opus (Most Capable)", "anthropic/claude-3-sonnet": "Claude 3 Sonnet (Balanced)", "anthropic/claude-3-haiku": "Claude 3 Haiku (Fast)", // Google Models "google/gemini-pro": "Gemini Pro", "google/gemini-pro-vision": "Gemini Pro Vision", // Meta Models "meta-llama/llama-3-70b-instruct": "Llama 3 70B", "meta-llama/llama-3-8b-instruct": "Llama 3 8B" };</code></pre> </div> </div> </div> <div id="openrouter-routing" class="api-content"> <div class="code-block"> <div class="code-header"> <span class="code-title">Smart Model Routing & Fallbacks</span> <button class="copy-btn" onclick="copyCode(this)">Copy</button> </div> <div class="code-content"> <pre><code>class OpenRouterSmartClient { constructor(apiKey) { this.client = new OpenAI({ baseURL: "https://openrouter.ai/api/v1", apiKey: apiKey }); // Model tiers for different use cases this.modelTiers = { premium: [ "openai/gpt-4-turbo", "anthropic/claude-3-opus", "google/gemini-pro" ], balanced: [ "openai/gpt-3.5-turbo", "anthropic/claude-3-sonnet", "mistralai/mixtral-8x7b-instruct" ], economical: [ "meta-llama/llama-3-8b-instruct", "mistralai/mistral-7b-instruct" ] }; } async smartRoute(prompt, options = {}) { const { tier = 'balanced', maxCost = 0.10, timeout = 30000, fallbackTiers = ['economical'] } = options; // Try primary tier for (const model of this.modelTiers[tier]) { try { const result = await this.callWithTimeout(prompt, model, timeout); if (result.estimatedCost <= maxCost) { return { ...result, tier: tier, selectedModel: model, fallbackUsed: false }; } } catch (error) { console.warn(`Model ${model} failed:`, error.message); continue; } } // Try fallback tiers for (const fallbackTier of fallbackTiers) { for (const model of this.modelTiers[fallbackTier]) { try { const result = await this.callWithTimeout(prompt, model, timeout); return { ...result, tier: fallbackTier, selectedModel: model, fallbackUsed: true }; } catch (error) { continue; } } } throw new Error('All models failed'); } }</code></pre> </div> </div> </div> <div id="openrouter-chat" class="api-content"> <div class="chat-interface"> <div class="chat-header"> <span class="chat-title">🌐 OpenRouter Multi-Model Chat</span> <div class="chat-controls"> <select id="openrouter-model-select" style="background: rgba(0,0,0,0.4); border: 1px solid rgba(0,212,255,0.3); border-radius: 6px; padding: 8px; color: #fff; margin-right: 10px;"> <option value="openai/gpt-4-turbo">GPT-4 Turbo</option> <option value="anthropic/claude-3-opus">Claude 3 Opus</option> <option value="google/gemini-pro">Gemini Pro</option> <option value="meta-llama/llama-3-70b-instruct">Llama 3 70B</option> </select> <button class="chat-btn secondary" onclick="clearChat('openrouter')">Clear</button> <button class="chat-btn primary" onclick="exportChat('openrouter')">Export</button> </div> </div> <div class="chat-messages" id="openrouter-messages"> <div class="chat-message assistant"> <div class="message-avatar">🌐</div> <div class="message-content"> <div class="message-text">Welcome to OpenRouter! I can connect you to 200+ AI models. Select any model from the dropdown and start chatting.</div> <div class="message-time">Just now</div> </div> </div> </div> <div class="chat-input-area"> <div class="chat-settings"> <div class="setting-group"> <label>Max Tokens:</label> <input type="number" value="1000" min="1" max="4000" id="openrouter-max-tokens"> </div> <div class="setting-group"> <label>Temperature:</label> <input type="range" min="0" max="2" step="0.1" value="0.7" id="openrouter-temperature"> <span id="openrouter-temp-display">0.7</span> </div> </div> <div class="chat-input-container"> <textarea class="chat-input" id="openrouter-input" placeholder="Ask any model anything..." rows="3"></textarea> <button class="send-btn" onclick="sendMessage('openrouter')"> <span class="send-icon">→</span> </button> </div> </div> </div> </div> <div id="openrouter-mcp" class="api-content"> <div class="code-block"> <div class="code-header"> <span class="code-title">OpenRouter + MCP Integration</span> <button class="copy-btn" onclick="copyCode(this)">Copy</button> </div> <div class="code-content"> <pre><code>// OpenRouter with MCP - Ultimate flexibility class OpenRouterMCPHub { constructor(apiKey) { this.openrouter = new OpenAI({ baseURL: "https://openrouter.ai/api/v1", apiKey: apiKey }); this.mcpClient = new MCPClient(); this.connectedServers = new Map(); } async routeWithMCP(prompt, options = {}) { const { preferredModel = "anthropic/claude-3-opus", fallbackModels = ["openai/gpt-4-turbo", "google/gemini-pro"], mcpServers = ["filesystem", "web-search", "database"] } = options; // Connect to required MCP servers await this.connectMCPServers(mcpServers); // Get available tools const tools = await this.getAvailableTools(); // Try preferred model first try { return await this.callModelWithMCP(preferredModel, prompt, tools, options); } catch (error) { console.warn(`Preferred model ${preferredModel} failed:`, error.message); // Try fallback models for (const fallbackModel of fallbackModels) { try { return await this.callModelWithMCP(fallbackModel, prompt, tools, options); } catch (fallbackError) { continue; } } throw new Error('All models failed'); } } }</code></pre> </div> </div> </div> <div id="openrouter-kb" class="api-content"> <div class="knowledge-base-manager"> <div class="kb-header"> <h4 class="kb-title">📚 OpenRouter Knowledge Hub</h4> <div class="kb-stats"> <span class="kb-stat"> <strong>Multi-Model</strong> RAG </span> <span class="kb-stat"> <strong>Cost</strong> Optimized </span> <span class="kb-stat"> <strong>200+</strong> Models </span> </div> </div> <div class="kb-integration-code"> <div class="code-block"> <div class="code-header"> <span class="code-title">Multi-Model RAG System</span> <button class="copy-btn" onclick="copyCode(this)">Copy</button> </div> <div class="code-content"> <pre><code>// OpenRouter Multi-Model Knowledge System class OpenRouterRAG { constructor(apiKey, vectorStore) { this.openrouter = new OpenAI({ baseURL: "https://openrouter.ai/api/v1", apiKey: apiKey }); this.vectorStore = vectorStore; // Model specializations this.modelSpecializations = { "reasoning": ["anthropic/claude-3-opus", "openai/gpt-4-turbo"], "creative": ["anthropic/claude-3-opus", "meta-llama/llama-3-70b-instruct"], "factual": ["google/gemini-pro", "openai/gpt-4-turbo"], "economical": ["mistralai/mixtral-8x7b-instruct", "meta-llama/llama-3-8b-instruct"] }; } async queryWithOptimalModel(question, options = {}) { const { maxCost = 0.05, requireSpeed = false, domain = 'general' } = options; // 1. Search knowledge base const relevantChunks = await this.searchKnowledgeBase(question); // 2. Determine optimal model const optimalModel = await this.selectOptimalModel(question, options); // 3. Build context-aware prompt const prompt = this.buildRAGPrompt(question, relevantChunks); // 4. Get response from optimal model const response = await this.callWithCostLimit(optimalModel, prompt, maxCost); return { answer: response.content, model: response.model, sources: relevantChunks.map(c => c.metadata), cost: response.cost }; } }</code></pre> </div> </div> </div> </div> </div> </div> </div> </div> <!-- System Prompt Modal --> <div id="systemPromptModal" class="system-prompt-modal"> <div class="system-prompt-content"> <div class="system-prompt-header"> <h2 class="system-prompt-title" id="modalTitle">Configure System Prompt</h2> <button class="close-modal" onclick="closeSystemPrompt()">✕ Close</button> </div> <div class="prompt-templates"> <div class="prompt-template" onclick="selectTemplate('expert')"> <div class="template-name">🎯 Expert Assistant</div> <div class="template-description">Professional, knowledgeable responses</div> </div> <div class="prompt-template" onclick="selectTemplate('creative')"> <div class="template-name">🎨 Creative Writer</div> <div class="template-description">Imaginative, engaging content</div> </div> <div class="prompt-template" onclick="selectTemplate('analyst')"> <div class="template-name">📊 Data Analyst</div> <div class="template-description">Analytical, data-driven insights</div> </div> </div> <div class="prompt-editor"> <label for="systemPromptText">System Prompt:</label> <textarea id="systemPromptText" class="prompt-textarea" placeholder="Enter your custom system prompt here..." ></textarea> </div> <div class="prompt-actions"> <button class="prompt-btn secondary" onclick="resetSystemPrompt()">Reset to Default</button> <button class="prompt-btn primary" onclick="saveSystemPrompt()">Save & Apply</button> </div> </div> </div> </div> <script> function showApiTab(button, contentId) { // Don't process if this is a system prompt button if (button.textContent.includes('System Prompt')) { return; } // Get the parent agent card const agentCard = button.closest('.agent-card'); // Hide all api content in this card agentCard.querySelectorAll('.api-content').forEach(content => { content.classList.remove('active'); }); // Remove active class from all tabs in this card (except system prompt) agentCard.querySelectorAll('.api-tab').forEach(tab => { if (!tab.textContent.includes('System Prompt')) { tab.classList.remove('active'); } }); // Show selected content and activate tab const targetContent = document.getElementById(contentId); if (targetContent) { targetContent.classList.add('active'); button.classList.add('active'); } } function copyCode(button) { const codeBlock = button.closest('.code-block').querySelector('code'); const text = codeBlock.textContent; navigator.clipboard.writeText(text).then(() => { button.textContent = 'Copied!'; setTimeout(() => { button.textContent = 'Copy'; }, 2000); }).catch(err => { console.error('Failed to copy code:', err); }); } // System Prompt functionality let currentModel = ''; const systemPrompts = { claude: '', gpt4: '', gemini: '', deepseek: '', llama: '', mistral: '', openrouter: '' }; const promptTemplates = { expert: "You are an expert AI assistant with deep knowledge across multiple domains. Provide comprehensive, accurate, and well-structured responses.", creative: "You are a highly creative AI assistant specializing in imaginative content creation. Approach every task with originality and flair.", analyst: "You are a professional data analyst and business intelligence expert. Focus on data-driven insights and actionable recommendations." }; function showSystemPrompt(model) { currentModel = model; const modal = document.getElementById('systemPromptModal'); const title = document.getElementById('modalTitle'); const textarea = document.getElementById('systemPromptText'); title.textContent = `Configure System Prompt - ${model.toUpperCase()}`; textarea.value = systemPrompts[model] || ''; modal.classList.add('active'); } function closeSystemPrompt() { document.getElementById('systemPromptModal').classList.remove('active'); } function selectTemplate(templateKey) { const textarea = document.getElementById('systemPromptText'); textarea.value = promptTemplates[templateKey]; // Update active template document.querySelectorAll('.prompt-template').forEach(template => { template.classList.remove('active'); }); event.target.closest('.prompt-template').classList.add('active'); } function resetSystemPrompt() { const textarea = document.getElementById('systemPromptText'); textarea.value = ''; systemPrompts[currentModel] = ''; } function saveSystemPrompt() { const textarea = document.getElementById('systemPromptText'); systemPrompts[currentModel] = textarea.value; const saveBtn = document.querySelector('.prompt-btn.primary'); saveBtn.textContent = '✓ Saved!'; setTimeout(() => { saveBtn.textContent = 'Save & Apply'; closeSystemPrompt(); }, 1000); } // Chat Interface Functions const chatStates = { claude: { messages: [] }, openrouter: { messages: [] } }; function sendMessage(modelName) { const inputElement = document.getElementById(`${modelName}-input`); const messagesContainer = document.getElementById(`${modelName}-messages`); const message = inputElement.value.trim(); if (!message) return; // Add user message addMessageToChat(modelName, message, 'user'); inputElement.value = ''; // Add loading indicator const loadingDiv = addLoadingMessage(modelName); // Simulate response setTimeout(() => { loadingDiv.remove(); const response = `[${modelName.toUpperCase()} Response] Thank you for your message: "${message}". This is a simulated response demonstrating the chat interface.`; addMessageToChat(modelName, response, 'assistant'); }, 1500); } function addMessageToChat(modelName, message, role) { const messagesContainer = document.getElementById(`${modelName}-messages`); const messageDiv = document.createElement('div'); messageDiv.className = `chat-message ${role}`; const avatar = role === 'user' ? '👤' : getModelAvatar(modelName); const time = new Date().toLocaleTimeString(); messageDiv.innerHTML = ` <div class="message-avatar">${avatar}</div> <div class="message-content"> <div class="message-text">${message}</div> <div class="message-time">${time}</div> </div> `; messagesContainer.appendChild(messageDiv); messagesContainer.scrollTop = messagesContainer.scrollHeight; } function addLoadingMessage(modelName) { const messagesContainer = document.getElementById(`${modelName}-messages`); const loadingDiv = document.createElement('div'); loadingDiv.className = 'chat-message assistant loading'; loadingDiv.innerHTML = ` <div class="message-avatar">${getModelAvatar(modelName)}</div> <div class="message-content"> <div class="message-text">Thinking...</div> </div> `; messagesContainer.appendChild(loadingDiv); messagesContainer.scrollTop = messagesContainer.scrollHeight; return loadingDiv; } function getModelAvatar(modelName) { const avatars = { claude: '🤖', openrouter: '🌐' }; return avatars[modelName] || '🤖'; } function clearChat(modelName) { const messagesContainer = document.getElementById(`${modelName}-messages`); if (messagesContainer) { const welcomeMessage = messagesContainer.querySelector('.chat-message.assistant'); messagesContainer.innerHTML = ''; if (welcomeMessage) { messagesContainer.appendChild(welcomeMessage.cloneNode(true)); } } } function exportChat(modelName) { const messagesContainer = document.getElementById(`${modelName}-messages`); const messages = messagesContainer.querySelectorAll('.chat-message:not(.loading)'); let exportText = `Chat Export - ${modelName.toUpperCase()}\n`; exportText += `Generated: ${new Date().toLocaleString()}\n\n`; messages.forEach(msg => { const role = msg.classList.contains('assistant') ? 'Assistant' : 'User'; const text = msg.querySelector('.message-text').textContent; const time = msg.querySelector('.message-time').textContent; exportText += `[${time}] ${role}: ${text}\n\n`; }); const blob = new Blob([exportText], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `${modelName}-chat-export-${Date.now()}.txt`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } // Knowledge Base Functions function addManualEntry(modelName) { const title = prompt('Enter document title:'); const content = prompt('Enter document content:'); if (title && content) { alert(`Document "${title}" added to ${modelName} knowledge base!`); } } function importFromURL(modelName) { const url = prompt('Enter URL to import:'); if (url) { alert(`URL "${url}" imported to ${modelName} knowledge base!`); } } function syncKnowledgeBase(modelName) { const button = event.target; button.textContent = '🔄 Syncing...'; button.disabled = true; setTimeout(() => { button.textContent = '✓ Synced'; setTimeout(() => { button.textContent = '🔄 Sync'; button.disabled = false; }, 1000); }, 2000); } function searchKB(modelName) { alert(`Searching ${modelName} knowledge base...`); } function editKBDoc(modelName, docName) { alert(`Edit functionality for ${docName} would open here`); } function removeKBDoc(modelName, docName) { if (confirm(`Remove ${docName} from knowledge base?`)) { alert(`${docName} removed from ${modelName} knowledge base`); } } // Initialize temperature displays document.addEventListener('DOMContentLoaded', function() { document.querySelectorAll('input[type="range"]').forEach(slider => { const displayId = slider.id.replace('-temperature', '-temp-display'); const display = document.getElementById(displayId); if (display) { slider.addEventListener('input', function() { display.textContent = this.value; }); } }); // Close modal when clicking outside document.getElementById('systemPromptModal').addEventListener('click', function(e) { if (e.target === this) { closeSystemPrompt(); } }); // Keyboard shortcuts document.addEventListener('keydown', function(e) { if (e.key === 'Escape') { closeSystemPrompt(); } }); }); </script> </body> </html> - Initial Deployment
Browse files- README.md +7 -5
- index.html +1348 -19
README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
-
colorFrom:
|
| 5 |
-
colorTo:
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
|
| 1 |
---
|
| 2 |
+
title: ai-embedding-app
|
| 3 |
+
emoji: 🐳
|
| 4 |
+
colorFrom: purple
|
| 5 |
+
colorTo: pink
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite
|
| 10 |
---
|
| 11 |
|
| 12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
index.html
CHANGED
|
@@ -1,19 +1,1348 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>AI Agent Integration Dashboard</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
|
| 9 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 10 |
+
|
| 11 |
+
<style>
|
| 12 |
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
| 13 |
+
|
| 14 |
+
:root {
|
| 15 |
+
--primary: #3b82f6;
|
| 16 |
+
--primary-dark: #2563eb;
|
| 17 |
+
--secondary: #10b981;
|
| 18 |
+
--accent: #8b5cf6;
|
| 19 |
+
--dark: #1e293b;
|
| 20 |
+
--darker: #0f172a;
|
| 21 |
+
--light: #f8fafc;
|
| 22 |
+
--gray: #94a3b8;
|
| 23 |
+
--danger: #ef4444;
|
| 24 |
+
}
|
| 25 |
+
|
| 26 |
+
body {
|
| 27 |
+
font-family: 'Inter', sans-serif;
|
| 28 |
+
background-color: var(--darker);
|
| 29 |
+
color: var(--light);
|
| 30 |
+
min-height: 100vh;
|
| 31 |
+
}
|
| 32 |
+
|
| 33 |
+
.gradient-text {
|
| 34 |
+
background: linear-gradient(90deg, var(--primary), var(--accent));
|
| 35 |
+
-webkit-background-clip: text;
|
| 36 |
+
background-clip: text;
|
| 37 |
+
color: transparent;
|
| 38 |
+
}
|
| 39 |
+
|
| 40 |
+
.card-gradient {
|
| 41 |
+
background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.9));
|
| 42 |
+
backdrop-filter: blur(10px);
|
| 43 |
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
| 44 |
+
}
|
| 45 |
+
|
| 46 |
+
.model-card {
|
| 47 |
+
transition: all 0.3s ease;
|
| 48 |
+
background: rgba(30, 41, 59, 0.7);
|
| 49 |
+
border: 1px solid rgba(255, 255, 255, 0.05);
|
| 50 |
+
}
|
| 51 |
+
|
| 52 |
+
.model-card:hover {
|
| 53 |
+
transform: translateY(-5px);
|
| 54 |
+
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.2);
|
| 55 |
+
border-color: rgba(59, 130, 246, 0.3);
|
| 56 |
+
}
|
| 57 |
+
|
| 58 |
+
.tab-active {
|
| 59 |
+
background: rgba(59, 130, 246, 0.2);
|
| 60 |
+
border-bottom: 2px solid var(--primary);
|
| 61 |
+
}
|
| 62 |
+
|
| 63 |
+
.code-block {
|
| 64 |
+
background: rgba(15, 23, 42, 0.8);
|
| 65 |
+
border-radius: 0.5rem;
|
| 66 |
+
overflow: hidden;
|
| 67 |
+
}
|
| 68 |
+
|
| 69 |
+
.chat-bubble-user {
|
| 70 |
+
background: rgba(59, 130, 246, 0.2);
|
| 71 |
+
border: 1px solid rgba(59, 130, 246, 0.3);
|
| 72 |
+
}
|
| 73 |
+
|
| 74 |
+
.chat-bubble-assistant {
|
| 75 |
+
background: rgba(30, 41, 59, 0.7);
|
| 76 |
+
border: 1px solid rgba(255, 255, 255, 0.05);
|
| 77 |
+
}
|
| 78 |
+
|
| 79 |
+
.status-indicator {
|
| 80 |
+
width: 10px;
|
| 81 |
+
height: 10px;
|
| 82 |
+
border-radius: 50%;
|
| 83 |
+
display: inline-block;
|
| 84 |
+
}
|
| 85 |
+
|
| 86 |
+
.status-connected {
|
| 87 |
+
background-color: var(--secondary);
|
| 88 |
+
box-shadow: 0 0 10px var(--secondary);
|
| 89 |
+
}
|
| 90 |
+
|
| 91 |
+
.status-disconnected {
|
| 92 |
+
background-color: var(--gray);
|
| 93 |
+
}
|
| 94 |
+
|
| 95 |
+
.status-error {
|
| 96 |
+
background-color: var(--danger);
|
| 97 |
+
box-shadow: 0 0 10px var(--danger);
|
| 98 |
+
}
|
| 99 |
+
|
| 100 |
+
.upload-dropzone {
|
| 101 |
+
border: 2px dashed rgba(255, 255, 255, 0.1);
|
| 102 |
+
transition: all 0.3s ease;
|
| 103 |
+
}
|
| 104 |
+
|
| 105 |
+
.upload-dropzone:hover {
|
| 106 |
+
border-color: var(--primary);
|
| 107 |
+
background: rgba(59, 130, 246, 0.05);
|
| 108 |
+
}
|
| 109 |
+
|
| 110 |
+
.animate-pulse {
|
| 111 |
+
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
| 112 |
+
}
|
| 113 |
+
|
| 114 |
+
@keyframes pulse {
|
| 115 |
+
0%, 100% { opacity: 1; }
|
| 116 |
+
50% { opacity: 0.5; }
|
| 117 |
+
}
|
| 118 |
+
|
| 119 |
+
/* Custom scrollbar */
|
| 120 |
+
::-webkit-scrollbar {
|
| 121 |
+
width: 8px;
|
| 122 |
+
height: 8px;
|
| 123 |
+
}
|
| 124 |
+
|
| 125 |
+
::-webkit-scrollbar-track {
|
| 126 |
+
background: rgba(30, 41, 59, 0.5);
|
| 127 |
+
}
|
| 128 |
+
|
| 129 |
+
::-webkit-scrollbar-thumb {
|
| 130 |
+
background: var(--primary);
|
| 131 |
+
border-radius: 4px;
|
| 132 |
+
}
|
| 133 |
+
|
| 134 |
+
::-webkit-scrollbar-thumb:hover {
|
| 135 |
+
background: var(--primary-dark);
|
| 136 |
+
}
|
| 137 |
+
</style>
|
| 138 |
+
</head>
|
| 139 |
+
<body class="min-h-screen">
|
| 140 |
+
<!-- Navigation -->
|
| 141 |
+
<nav class="bg-gray-900 border-b border-gray-800">
|
| 142 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 143 |
+
<div class="flex items-center justify-between h-16">
|
| 144 |
+
<div class="flex items-center">
|
| 145 |
+
<div class="flex-shrink-0">
|
| 146 |
+
<span class="text-2xl font-bold gradient-text">AI Nexus</span>
|
| 147 |
+
</div>
|
| 148 |
+
<div class="hidden md:block">
|
| 149 |
+
<div class="ml-10 flex items-baseline space-x-4">
|
| 150 |
+
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-gray-800">Dashboard</a>
|
| 151 |
+
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Models</a>
|
| 152 |
+
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">API Keys</a>
|
| 153 |
+
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Analytics</a>
|
| 154 |
+
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Settings</a>
|
| 155 |
+
</div>
|
| 156 |
+
</div>
|
| 157 |
+
</div>
|
| 158 |
+
<div class="hidden md:block">
|
| 159 |
+
<div class="ml-4 flex items-center md:ml-6">
|
| 160 |
+
<button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
|
| 161 |
+
<span class="sr-only">View notifications</span>
|
| 162 |
+
<i class="fas fa-bell"></i>
|
| 163 |
+
</button>
|
| 164 |
+
<div class="ml-3 relative">
|
| 165 |
+
<div>
|
| 166 |
+
<button class="max-w-xs flex items-center text-sm rounded-full focus:outline-none" id="user-menu">
|
| 167 |
+
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
| 168 |
+
</button>
|
| 169 |
+
</div>
|
| 170 |
+
</div>
|
| 171 |
+
</div>
|
| 172 |
+
</div>
|
| 173 |
+
<div class="-mr-2 flex md:hidden">
|
| 174 |
+
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false">
|
| 175 |
+
<span class="sr-only">Open main menu</span>
|
| 176 |
+
<i class="fas fa-bars"></i>
|
| 177 |
+
</button>
|
| 178 |
+
</div>
|
| 179 |
+
</div>
|
| 180 |
+
</div>
|
| 181 |
+
</nav>
|
| 182 |
+
|
| 183 |
+
<!-- Main Content -->
|
| 184 |
+
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
| 185 |
+
<!-- Header -->
|
| 186 |
+
<div class="card-gradient rounded-xl p-8 mb-8 shadow-lg">
|
| 187 |
+
<div class="flex flex-col md:flex-row justify-between items-start md:items-center">
|
| 188 |
+
<div>
|
| 189 |
+
<h1 class="text-3xl md:text-4xl font-bold text-white mb-2">AI Agent Integration Dashboard</h1>
|
| 190 |
+
<p class="text-gray-300 max-w-3xl">Unified platform for managing, testing, and deploying AI models with comprehensive API integration scripts for embedding AI into any application.</p>
|
| 191 |
+
</div>
|
| 192 |
+
<div class="mt-4 md:mt-0">
|
| 193 |
+
<button class="bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white px-6 py-3 rounded-lg font-medium shadow-md transition-all duration-300 transform hover:scale-105">
|
| 194 |
+
<i class="fas fa-plus mr-2"></i> New Integration
|
| 195 |
+
</button>
|
| 196 |
+
</div>
|
| 197 |
+
</div>
|
| 198 |
+
</div>
|
| 199 |
+
|
| 200 |
+
<!-- Stats Overview -->
|
| 201 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
| 202 |
+
<div class="model-card rounded-xl p-6">
|
| 203 |
+
<div class="flex items-center justify-between">
|
| 204 |
+
<div>
|
| 205 |
+
<p class="text-gray-400 text-sm font-medium">Active Models</p>
|
| 206 |
+
<h3 class="text-2xl font-bold text-white mt-1">24</h3>
|
| 207 |
+
</div>
|
| 208 |
+
<div class="bg-blue-500/20 p-3 rounded-lg">
|
| 209 |
+
<i class="fas fa-robot text-blue-400 text-xl"></i>
|
| 210 |
+
</div>
|
| 211 |
+
</div>
|
| 212 |
+
<div class="mt-4">
|
| 213 |
+
<div class="flex items-center text-green-400 text-sm">
|
| 214 |
+
<i class="fas fa-arrow-up mr-1"></i>
|
| 215 |
+
<span>12% from last month</span>
|
| 216 |
+
</div>
|
| 217 |
+
</div>
|
| 218 |
+
</div>
|
| 219 |
+
|
| 220 |
+
<div class="model-card rounded-xl p-6">
|
| 221 |
+
<div class="flex items-center justify-between">
|
| 222 |
+
<div>
|
| 223 |
+
<p class="text-gray-400 text-sm font-medium">API Requests</p>
|
| 224 |
+
<h3 class="text-2xl font-bold text-white mt-1">1.2M</h3>
|
| 225 |
+
</div>
|
| 226 |
+
<div class="bg-green-500/20 p-3 rounded-lg">
|
| 227 |
+
<i class="fas fa-bolt text-green-400 text-xl"></i>
|
| 228 |
+
</div>
|
| 229 |
+
</div>
|
| 230 |
+
<div class="mt-4">
|
| 231 |
+
<div class="flex items-center text-green-400 text-sm">
|
| 232 |
+
<i class="fas fa-arrow-up mr-1"></i>
|
| 233 |
+
<span>28% from last month</span>
|
| 234 |
+
</div>
|
| 235 |
+
</div>
|
| 236 |
+
</div>
|
| 237 |
+
|
| 238 |
+
<div class="model-card rounded-xl p-6">
|
| 239 |
+
<div class="flex items-center justify-between">
|
| 240 |
+
<div>
|
| 241 |
+
<p class="text-gray-400 text-sm font-medium">Knowledge Docs</p>
|
| 242 |
+
<h3 class="text-2xl font-bold text-white mt-1">142</h3>
|
| 243 |
+
</div>
|
| 244 |
+
<div class="bg-purple-500/20 p-3 rounded-lg">
|
| 245 |
+
<i class="fas fa-book text-purple-400 text-xl"></i>
|
| 246 |
+
</div>
|
| 247 |
+
</div>
|
| 248 |
+
<div class="mt-4">
|
| 249 |
+
<div class="flex items-center text-green-400 text-sm">
|
| 250 |
+
<i class="fas fa-arrow-up mr-1"></i>
|
| 251 |
+
<span>7% from last month</span>
|
| 252 |
+
</div>
|
| 253 |
+
</div>
|
| 254 |
+
</div>
|
| 255 |
+
|
| 256 |
+
<div class="model-card rounded-xl p-6">
|
| 257 |
+
<div class="flex items-center justify-between">
|
| 258 |
+
<div>
|
| 259 |
+
<p class="text-gray-400 text-sm font-medium">API Latency</p>
|
| 260 |
+
<h3 class="text-2xl font-bold text-white mt-1">42ms</h3>
|
| 261 |
+
</div>
|
| 262 |
+
<div class="bg-yellow-500/20 p-3 rounded-lg">
|
| 263 |
+
<i class="fas fa-tachometer-alt text-yellow-400 text-xl"></i>
|
| 264 |
+
</div>
|
| 265 |
+
</div>
|
| 266 |
+
<div class="mt-4">
|
| 267 |
+
<div class="flex items-center text-red-400 text-sm">
|
| 268 |
+
<i class="fas fa-arrow-down mr-1"></i>
|
| 269 |
+
<span>5% improvement</span>
|
| 270 |
+
</div>
|
| 271 |
+
</div>
|
| 272 |
+
</div>
|
| 273 |
+
</div>
|
| 274 |
+
|
| 275 |
+
<!-- Model Grid -->
|
| 276 |
+
<div class="mb-8">
|
| 277 |
+
<div class="flex justify-between items-center mb-6">
|
| 278 |
+
<h2 class="text-2xl font-bold text-white">Available AI Models</h2>
|
| 279 |
+
<div class="flex space-x-2">
|
| 280 |
+
<div class="relative">
|
| 281 |
+
<select class="appearance-none bg-gray-800 border border-gray-700 text-white rounded-lg pl-4 pr-8 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
| 282 |
+
<option>All Providers</option>
|
| 283 |
+
<option>OpenAI</option>
|
| 284 |
+
<option>Anthropic</option>
|
| 285 |
+
<option>Google</option>
|
| 286 |
+
<option>Meta</option>
|
| 287 |
+
<option>Mistral</option>
|
| 288 |
+
</select>
|
| 289 |
+
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400">
|
| 290 |
+
<i class="fas fa-chevron-down"></i>
|
| 291 |
+
</div>
|
| 292 |
+
</div>
|
| 293 |
+
<button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg border border-gray-700">
|
| 294 |
+
<i class="fas fa-sliders-h"></i>
|
| 295 |
+
</button>
|
| 296 |
+
</div>
|
| 297 |
+
</div>
|
| 298 |
+
|
| 299 |
+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
| 300 |
+
<!-- Claude 3.5 Sonnet -->
|
| 301 |
+
<div class="model-card rounded-xl p-6">
|
| 302 |
+
<div class="flex items-start justify-between mb-4">
|
| 303 |
+
<div class="flex items-center">
|
| 304 |
+
<div class="bg-gradient-to-br from-orange-500 to-pink-600 p-3 rounded-lg mr-4">
|
| 305 |
+
<i class="fas fa-brain text-white text-xl"></i>
|
| 306 |
+
</div>
|
| 307 |
+
<div>
|
| 308 |
+
<h3 class="text-xl font-bold text-white flex items-center">
|
| 309 |
+
<span class="status-indicator status-connected mr-2"></span>
|
| 310 |
+
Claude 3.5 Sonnet
|
| 311 |
+
</h3>
|
| 312 |
+
<p class="text-gray-400 text-sm">Anthropic</p>
|
| 313 |
+
</div>
|
| 314 |
+
</div>
|
| 315 |
+
<div class="flex items-center space-x-2">
|
| 316 |
+
<span class="bg-blue-900/50 text-blue-300 text-xs px-2 py-1 rounded">Latest</span>
|
| 317 |
+
<button class="text-gray-400 hover:text-white">
|
| 318 |
+
<i class="fas fa-ellipsis-v"></i>
|
| 319 |
+
</button>
|
| 320 |
+
</div>
|
| 321 |
+
</div>
|
| 322 |
+
|
| 323 |
+
<div class="mb-4">
|
| 324 |
+
<div class="flex flex-wrap gap-2">
|
| 325 |
+
<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">Text Analysis</span>
|
| 326 |
+
<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">Code Generation</span>
|
| 327 |
+
<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">Reasoning</span>
|
| 328 |
+
<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">200K Context</span>
|
| 329 |
+
</div>
|
| 330 |
+
</div>
|
| 331 |
+
|
| 332 |
+
<div class="grid grid-cols-3 gap-4 mb-6">
|
| 333 |
+
<div class="bg-gray-800/50 p-3 rounded-lg text-center">
|
| 334 |
+
<p class="text-gray-400 text-xs">Accuracy</p>
|
| 335 |
+
<p class="text-white font-bold">9.5/10</p>
|
| 336 |
+
</div>
|
| 337 |
+
<div class="bg-gray-800/50 p-3 rounded-lg text-center">
|
| 338 |
+
<p class="text-gray-400 text-xs">Speed</p>
|
| 339 |
+
<p class="text-white font-bold">42ms</p>
|
| 340 |
+
</div>
|
| 341 |
+
<div class="bg-gray-800/50 p-3 rounded-lg text-center">
|
| 342 |
+
<p class="text-gray-400 text-xs">Cost</p>
|
| 343 |
+
<p class="text-white font-bold">$3/M</p>
|
| 344 |
+
</div>
|
| 345 |
+
</div>
|
| 346 |
+
|
| 347 |
+
<div class="flex justify-between">
|
| 348 |
+
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
|
| 349 |
+
<i class="fas fa-comment-dots mr-2"></i> Chat
|
| 350 |
+
</button>
|
| 351 |
+
<button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
|
| 352 |
+
<i class="fas fa-code mr-2"></i> API
|
| 353 |
+
</button>
|
| 354 |
+
<button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
|
| 355 |
+
<i class="fas fa-book mr-2"></i> Docs
|
| 356 |
+
</button>
|
| 357 |
+
</div>
|
| 358 |
+
</div>
|
| 359 |
+
|
| 360 |
+
<!-- GPT-4 Turbo -->
|
| 361 |
+
<div class="model-card rounded-xl p-6">
|
| 362 |
+
<div class="flex items-start justify-between mb-4">
|
| 363 |
+
<div class="flex items-center">
|
| 364 |
+
<div class="bg-gradient-to-br from-green-500 to-blue-600 p-3 rounded-lg mr-4">
|
| 365 |
+
<i class="fab fa-openai text-white text-xl"></i>
|
| 366 |
+
</div>
|
| 367 |
+
<div>
|
| 368 |
+
<h3 class="text-xl font-bold text-white flex items-center">
|
| 369 |
+
<span class="status-indicator status-connected mr-2"></span>
|
| 370 |
+
GPT-4 Turbo
|
| 371 |
+
</h3>
|
| 372 |
+
<p class="text-gray-400 text-sm">OpenAI</p>
|
| 373 |
+
</div>
|
| 374 |
+
</div>
|
| 375 |
+
<div class="flex items-center space-x-2">
|
| 376 |
+
<span class="bg-blue-900/50 text-blue-300 text-xs px-2 py-1 rounded">Popular</span>
|
| 377 |
+
<button class="text-gray-400 hover:text-white">
|
| 378 |
+
<i class="fas fa-ellipsis-v"></i>
|
| 379 |
+
</button>
|
| 380 |
+
</div>
|
| 381 |
+
</div>
|
| 382 |
+
|
| 383 |
+
<div class="mb-4">
|
| 384 |
+
<div class="flex flex-wrap gap-2">
|
| 385 |
+
<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">Multimodal</span>
|
| 386 |
+
<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">Function Calling</span>
|
| 387 |
+
<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">128K Context</span>
|
| 388 |
+
<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">JSON Mode</span>
|
| 389 |
+
</div>
|
| 390 |
+
</div>
|
| 391 |
+
|
| 392 |
+
<div class="grid grid-cols-3 gap-4 mb-6">
|
| 393 |
+
<div class="bg-gray-800/50 p-3 rounded-lg text-center">
|
| 394 |
+
<p class="text-gray-400 text-xs">Accuracy</p>
|
| 395 |
+
<p class="text-white font-bold">9.3/10</p>
|
| 396 |
+
</div>
|
| 397 |
+
<div class="bg-gray-800/50 p-3 rounded-lg text-center">
|
| 398 |
+
<p class="text-gray-400 text-xs">Speed</p>
|
| 399 |
+
<p class="text-white font-bold">58ms</p>
|
| 400 |
+
</div>
|
| 401 |
+
<div class="bg-gray-800/50 p-3 rounded-lg text-center">
|
| 402 |
+
<p class="text-gray-400 text-xs">Cost</p>
|
| 403 |
+
<p class="text-white font-bold">$10/M</p>
|
| 404 |
+
</div>
|
| 405 |
+
</div>
|
| 406 |
+
|
| 407 |
+
<div class="flex justify-between">
|
| 408 |
+
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
|
| 409 |
+
<i class="fas fa-comment-dots mr-2"></i> Chat
|
| 410 |
+
</button>
|
| 411 |
+
<button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
|
| 412 |
+
<i class="fas fa-code mr-2"></i> API
|
| 413 |
+
</button>
|
| 414 |
+
<button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
|
| 415 |
+
<i class="fas fa-book mr-2"></i> Docs
|
| 416 |
+
</button>
|
| 417 |
+
</div>
|
| 418 |
+
</div>
|
| 419 |
+
|
| 420 |
+
<!-- Gemini 1.5 Pro -->
|
| 421 |
+
<div class="model-card rounded-xl p-6">
|
| 422 |
+
<div class="flex items-start justify-between mb-4">
|
| 423 |
+
<div class="flex items-center">
|
| 424 |
+
<div class="bg-gradient-to-br from-red-500 to-yellow-500 p-3 rounded-lg mr-4">
|
| 425 |
+
<i class="fab fa-google text-white text-xl"></i>
|
| 426 |
+
</div>
|
| 427 |
+
<div>
|
| 428 |
+
<h3 class="text-xl font-bold text-white flex items-center">
|
| 429 |
+
<span class="status-indicator status-connected mr-2"></span>
|
| 430 |
+
Gemini 1.5 Pro
|
| 431 |
+
</h3>
|
| 432 |
+
<p class="text-gray-400 text-sm">Google</p>
|
| 433 |
+
</div>
|
| 434 |
+
</div>
|
| 435 |
+
<div class="flex items-center space-x-2">
|
| 436 |
+
<span class="bg-blue-900/50 text-blue-300 text-xs px-2 py-1 rounded">Multimodal</span>
|
| 437 |
+
<button class="text-gray-400 hover:text-white">
|
| 438 |
+
<i class="fas fa-ellipsis-v"></i>
|
| 439 |
+
</button>
|
| 440 |
+
</div>
|
| 441 |
+
</div>
|
| 442 |
+
|
| 443 |
+
<div class="mb-4">
|
| 444 |
+
<div class="flex flex-wrap gap-2">
|
| 445 |
+
<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">Vision</span>
|
| 446 |
+
<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">Audio</span>
|
| 447 |
+
<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">1M Context</span>
|
| 448 |
+
<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">Multilingual</span>
|
| 449 |
+
</div>
|
| 450 |
+
</div>
|
| 451 |
+
|
| 452 |
+
<div class="grid grid-cols-3 gap-4 mb-6">
|
| 453 |
+
<div class="bg-gray-800/50 p-3 rounded-lg text-center">
|
| 454 |
+
<p class="text-gray-400 text-xs">Accuracy</p>
|
| 455 |
+
<p class="text-white font-bold">8.9/10</p>
|
| 456 |
+
</div>
|
| 457 |
+
<div class="bg-gray-800/50 p-3 rounded-lg text-center">
|
| 458 |
+
<p class="text-gray-400 text-xs">Speed</p>
|
| 459 |
+
<p class="text-white font-bold">72ms</p>
|
| 460 |
+
</div>
|
| 461 |
+
<div class="bg-gray-800/50 p-3 rounded-lg text-center">
|
| 462 |
+
<p class="text-gray-400 text-xs">Cost</p>
|
| 463 |
+
<p class="text-white font-bold">$7/M</p>
|
| 464 |
+
</div>
|
| 465 |
+
</div>
|
| 466 |
+
|
| 467 |
+
<div class="flex justify-between">
|
| 468 |
+
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
|
| 469 |
+
<i class="fas fa-comment-dots mr-2"></i> Chat
|
| 470 |
+
</button>
|
| 471 |
+
<button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
|
| 472 |
+
<i class="fas fa-code mr-2"></i> API
|
| 473 |
+
</button>
|
| 474 |
+
<button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
|
| 475 |
+
<i class="fas fa-book mr-2"></i> Docs
|
| 476 |
+
</button>
|
| 477 |
+
</div>
|
| 478 |
+
</div>
|
| 479 |
+
|
| 480 |
+
<!-- Llama 3 70B -->
|
| 481 |
+
<div class="model-card rounded-xl p-6">
|
| 482 |
+
<div class="flex items-start justify-between mb-4">
|
| 483 |
+
<div class="flex items-center">
|
| 484 |
+
<div class="bg-gradient-to-br from-purple-500 to-pink-600 p-3 rounded-lg mr-4">
|
| 485 |
+
<i class="fas fa-robot text-white text-xl"></i>
|
| 486 |
+
</div>
|
| 487 |
+
<div>
|
| 488 |
+
<h3 class="text-xl font-bold text-white flex items-center">
|
| 489 |
+
<span class="status-indicator status-connected mr-2"></span>
|
| 490 |
+
Llama 3 70B
|
| 491 |
+
</h3>
|
| 492 |
+
<p class="text-gray-400 text-sm">Meta</p>
|
| 493 |
+
</div>
|
| 494 |
+
</div>
|
| 495 |
+
<div class="flex items-center space-x-2">
|
| 496 |
+
<span class="bg-blue-900/50 text-blue-300 text-xs px-2 py-1 rounded">Open Source</span>
|
| 497 |
+
<button class="text-gray-400 hover:text-white">
|
| 498 |
+
<i class="fas fa-ellipsis-v"></i>
|
| 499 |
+
</button>
|
| 500 |
+
</div>
|
| 501 |
+
</div>
|
| 502 |
+
|
| 503 |
+
<div class="mb-4">
|
| 504 |
+
<div class="flex flex-wrap gap-2">
|
| 505 |
+
<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">Self-hosted</span>
|
| 506 |
+
<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">8K Context</span>
|
| 507 |
+
<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">Commercial Use</span>
|
| 508 |
+
<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">Multilingual</span>
|
| 509 |
+
</div>
|
| 510 |
+
</div>
|
| 511 |
+
|
| 512 |
+
<div class="grid grid-cols-3 gap-4 mb-6">
|
| 513 |
+
<div class="bg-gray-800/50 p-3 rounded-lg text-center">
|
| 514 |
+
<p class="text-gray-400 text-xs">Accuracy</p>
|
| 515 |
+
<p class="text-white font-bold">8.7/10</p>
|
| 516 |
+
</div>
|
| 517 |
+
<div class="bg-gray-800/50 p-3 rounded-lg text-center">
|
| 518 |
+
<p class="text-gray-400 text-xs">Speed</p>
|
| 519 |
+
<p class="text-white font-bold">120ms</p>
|
| 520 |
+
</div>
|
| 521 |
+
<div class="bg-gray-800/50 p-3 rounded-lg text-center">
|
| 522 |
+
<p class="text-gray-400 text-xs">Cost</p>
|
| 523 |
+
<p class="text-white font-bold">$0.5/M</p>
|
| 524 |
+
</div>
|
| 525 |
+
</div>
|
| 526 |
+
|
| 527 |
+
<div class="flex justify-between">
|
| 528 |
+
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
|
| 529 |
+
<i class="fas fa-comment-dots mr-2"></i> Chat
|
| 530 |
+
</button>
|
| 531 |
+
<button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
|
| 532 |
+
<i class="fas fa-code mr-2"></i> API
|
| 533 |
+
</button>
|
| 534 |
+
<button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
|
| 535 |
+
<i class="fas fa-book mr-2"></i> Docs
|
| 536 |
+
</button>
|
| 537 |
+
</div>
|
| 538 |
+
</div>
|
| 539 |
+
</div>
|
| 540 |
+
</div>
|
| 541 |
+
|
| 542 |
+
<!-- Model Details Section -->
|
| 543 |
+
<div class="mb-8">
|
| 544 |
+
<div class="flex justify-between items-center mb-6">
|
| 545 |
+
<h2 class="text-2xl font-bold text-white">Claude 3.5 Sonnet Integration</h2>
|
| 546 |
+
<div class="flex items-center space-x-2">
|
| 547 |
+
<span class="text-sm text-gray-400">Last updated: 2 hours ago</span>
|
| 548 |
+
<button class="text-blue-400 hover:text-blue-300">
|
| 549 |
+
<i class="fas fa-sync-alt"></i>
|
| 550 |
+
</button>
|
| 551 |
+
</div>
|
| 552 |
+
</div>
|
| 553 |
+
|
| 554 |
+
<div class="bg-gray-900 rounded-xl overflow-hidden">
|
| 555 |
+
<!-- Tabs -->
|
| 556 |
+
<div class="flex border-b border-gray-800">
|
| 557 |
+
<button class="px-6 py-4 text-sm font-medium text-white border-b-2 border-blue-500 tab-active">
|
| 558 |
+
<i class="fas fa-code mr-2"></i> API Integration
|
| 559 |
+
</button>
|
| 560 |
+
<button class="px-6 py-4 text-sm font-medium text-gray-400 hover:text-white">
|
| 561 |
+
<i class="fas fa-comment-dots mr-2"></i> Chat Interface
|
| 562 |
+
</button>
|
| 563 |
+
<button class="px-6 py-4 text-sm font-medium text-gray-400 hover:text-white">
|
| 564 |
+
<i class="fas fa-tools mr-2"></i> MCP Tools
|
| 565 |
+
</button>
|
| 566 |
+
<button class="px-6 py-4 text-sm font-medium text-gray-400 hover:text-white">
|
| 567 |
+
<i class="fas fa-book mr-2"></i> Knowledge Base
|
| 568 |
+
</button>
|
| 569 |
+
<button class="px-6 py-4 text-sm font-medium text-gray-400 hover:text-white">
|
| 570 |
+
<i class="fas fa-cog mr-2"></i> Settings
|
| 571 |
+
</button>
|
| 572 |
+
</div>
|
| 573 |
+
|
| 574 |
+
<!-- Tab Content -->
|
| 575 |
+
<div class="p-6">
|
| 576 |
+
<!-- Subtabs -->
|
| 577 |
+
<div class="flex mb-6 overflow-x-auto">
|
| 578 |
+
<button class="px-4 py-2 text-sm font-medium text-white bg-blue-900/50 rounded-l-lg">
|
| 579 |
+
Node.js
|
| 580 |
+
</button>
|
| 581 |
+
<button class="px-4 py-2 text-sm font-medium text-gray-400 hover:text-white bg-gray-800">
|
| 582 |
+
Python
|
| 583 |
+
</button>
|
| 584 |
+
<button class="px-4 py-2 text-sm font-medium text-gray-400 hover:text-white bg-gray-800">
|
| 585 |
+
cURL
|
| 586 |
+
</button>
|
| 587 |
+
<button class="px-4 py-2 text-sm font-medium text-gray-400 hover:text-white bg-gray-800">
|
| 588 |
+
Java
|
| 589 |
+
</button>
|
| 590 |
+
<button class="px-4 py-2 text-sm font-medium text-gray-400 hover:text-white bg-gray-800">
|
| 591 |
+
Go
|
| 592 |
+
</button>
|
| 593 |
+
<button class="px-4 py-2 text-sm font-medium text-gray-400 hover:text-white bg-gray-800 rounded-r-lg">
|
| 594 |
+
PHP
|
| 595 |
+
</button>
|
| 596 |
+
</div>
|
| 597 |
+
|
| 598 |
+
<!-- Code Block -->
|
| 599 |
+
<div class="code-block mb-6">
|
| 600 |
+
<div class="flex justify-between items-center bg-gray-800 px-4 py-3">
|
| 601 |
+
<div class="flex items-center">
|
| 602 |
+
<span class="text-gray-300 text-sm font-mono">claude-integration.js</span>
|
| 603 |
+
</div>
|
| 604 |
+
<button class="text-gray-400 hover:text-white" onclick="copyCode(this)">
|
| 605 |
+
<i class="far fa-copy mr-1"></i> Copy
|
| 606 |
+
</button>
|
| 607 |
+
</div>
|
| 608 |
+
<div class="p-4 overflow-x-auto">
|
| 609 |
+
<pre class="text-gray-300 text-sm font-mono"><code>const Anthropic = require('@anthropic-ai/sdk');
|
| 610 |
+
|
| 611 |
+
const anthropic = new Anthropic({
|
| 612 |
+
apiKey: process.env.ANTHROPIC_API_KEY,
|
| 613 |
+
});
|
| 614 |
+
|
| 615 |
+
async function callClaude(prompt, maxTokens = 1000) {
|
| 616 |
+
try {
|
| 617 |
+
const response = await anthropic.messages.create({
|
| 618 |
+
model: "claude-3-5-sonnet-20241022",
|
| 619 |
+
max_tokens: maxTokens,
|
| 620 |
+
messages: [
|
| 621 |
+
{
|
| 622 |
+
role: "user",
|
| 623 |
+
content: prompt
|
| 624 |
+
}
|
| 625 |
+
]
|
| 626 |
+
});
|
| 627 |
+
|
| 628 |
+
return response.content[0].text;
|
| 629 |
+
} catch (error) {
|
| 630 |
+
console.error('Claude API Error:', error);
|
| 631 |
+
throw error;
|
| 632 |
+
}
|
| 633 |
+
}
|
| 634 |
+
|
| 635 |
+
// Usage Example
|
| 636 |
+
(async () => {
|
| 637 |
+
const result = await callClaude("Analyze this data and provide insights...");
|
| 638 |
+
console.log(result);
|
| 639 |
+
})();</code></pre>
|
| 640 |
+
</div>
|
| 641 |
+
</div>
|
| 642 |
+
|
| 643 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
| 644 |
+
<!-- API Parameters -->
|
| 645 |
+
<div class="bg-gray-800/50 rounded-lg p-6">
|
| 646 |
+
<h3 class="text-lg font-bold text-white mb-4">API Parameters</h3>
|
| 647 |
+
<div class="space-y-4">
|
| 648 |
+
<div>
|
| 649 |
+
<label class="block text-gray-400 text-sm mb-1">Model</label>
|
| 650 |
+
<input type="text" value="claude-3-5-sonnet-20241022" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm" readonly>
|
| 651 |
+
</div>
|
| 652 |
+
<div>
|
| 653 |
+
<label class="block text-gray-400 text-sm mb-1">Max Tokens</label>
|
| 654 |
+
<input type="number" value="1000" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm">
|
| 655 |
+
</div>
|
| 656 |
+
<div>
|
| 657 |
+
<label class="block text-gray-400 text-sm mb-1">Temperature</label>
|
| 658 |
+
<div class="flex items-center">
|
| 659 |
+
<input type="range" min="0" max="1" step="0.1" value="0.7" class="w-full mr-3">
|
| 660 |
+
<span class="text-white text-sm">0.7</span>
|
| 661 |
+
</div>
|
| 662 |
+
</div>
|
| 663 |
+
<div>
|
| 664 |
+
<label class="block text-gray-400 text-sm mb-1">System Prompt</label>
|
| 665 |
+
<div class="flex">
|
| 666 |
+
<input type="text" placeholder="Custom system prompt..." class="w-full bg-gray-700 border border-gray-600 rounded-l-lg px-3 py-2 text-white text-sm">
|
| 667 |
+
<button class="bg-blue-600 hover:bg-blue-700 text-white px-3 rounded-r-lg">
|
| 668 |
+
<i class="fas fa-edit"></i>
|
| 669 |
+
</button>
|
| 670 |
+
</div>
|
| 671 |
+
</div>
|
| 672 |
+
</div>
|
| 673 |
+
</div>
|
| 674 |
+
|
| 675 |
+
<!-- Test API -->
|
| 676 |
+
<div class="bg-gray-800/50 rounded-lg p-6">
|
| 677 |
+
<h3 class="text-lg font-bold text-white mb-4">Test API</h3>
|
| 678 |
+
<div class="space-y-4">
|
| 679 |
+
<div>
|
| 680 |
+
<label class="block text-gray-400 text-sm mb-1">Prompt</label>
|
| 681 |
+
<textarea class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm h-24" placeholder="Enter your prompt here..."></textarea>
|
| 682 |
+
</div>
|
| 683 |
+
<div class="flex justify-between">
|
| 684 |
+
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium">
|
| 685 |
+
<i class="fas fa-play mr-2"></i> Run
|
| 686 |
+
</button>
|
| 687 |
+
<button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg text-sm font-medium">
|
| 688 |
+
<i class="fas fa-history mr-2"></i> History
|
| 689 |
+
</button>
|
| 690 |
+
</div>
|
| 691 |
+
<div class="bg-gray-900 rounded-lg p-4">
|
| 692 |
+
<label class="block text-gray-400 text-sm mb-2">Response</label>
|
| 693 |
+
<div class="text-gray-300 text-sm">
|
| 694 |
+
<p>Run the API to see the response here...</p>
|
| 695 |
+
</div>
|
| 696 |
+
</div>
|
| 697 |
+
</div>
|
| 698 |
+
</div>
|
| 699 |
+
</div>
|
| 700 |
+
</div>
|
| 701 |
+
</div>
|
| 702 |
+
</div>
|
| 703 |
+
|
| 704 |
+
<!-- Chat Interface -->
|
| 705 |
+
<div class="mb-8">
|
| 706 |
+
<div class="flex justify-between items-center mb-6">
|
| 707 |
+
<h2 class="text-2xl font-bold text-white">Chat Interface</h2>
|
| 708 |
+
<div class="flex items-center space-x-3">
|
| 709 |
+
<button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
|
| 710 |
+
<i class="fas fa-sliders-h mr-2"></i> Settings
|
| 711 |
+
</button>
|
| 712 |
+
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
|
| 713 |
+
<i class="fas fa-plus mr-2"></i> New Chat
|
| 714 |
+
</button>
|
| 715 |
+
</div>
|
| 716 |
+
</div>
|
| 717 |
+
|
| 718 |
+
<div class="bg-gray-900 rounded-xl overflow-hidden">
|
| 719 |
+
<div class="p-6">
|
| 720 |
+
<!-- Chat Messages -->
|
| 721 |
+
<div class="bg-gray-800/50 rounded-lg p-4 mb-4 h-96 overflow-y-auto">
|
| 722 |
+
<!-- Assistant Message -->
|
| 723 |
+
<div class="flex mb-4">
|
| 724 |
+
<div class="flex-shrink-0 mr-3">
|
| 725 |
+
<div class="bg-gradient-to-br from-orange-500 to-pink-600 w-8 h-8 rounded-full flex items-center justify-center text-white">
|
| 726 |
+
<i class="fas fa-brain"></i>
|
| 727 |
+
</div>
|
| 728 |
+
</div>
|
| 729 |
+
<div class="flex-1">
|
| 730 |
+
<div class="text-sm text-gray-400 mb-1">Claude 3.5 Sonnet</div>
|
| 731 |
+
<div class="chat-bubble-assistant rounded-lg p-3">
|
| 732 |
+
<p class="text-white">Hello! I'm Claude 3.5 Sonnet, an AI assistant created by Anthropic. How can I help you today?</p>
|
| 733 |
+
</div>
|
| 734 |
+
<div class="text-xs text-gray-500 mt-1">2:45 PM</div>
|
| 735 |
+
</div>
|
| 736 |
+
</div>
|
| 737 |
+
|
| 738 |
+
<!-- User Message -->
|
| 739 |
+
<div class="flex mb-4">
|
| 740 |
+
<div class="flex-shrink-0 mr-3">
|
| 741 |
+
<div class="bg-gradient-to-br from-blue-500 to-indigo-600 w-8 h-8 rounded-full flex items-center justify-center text-white">
|
| 742 |
+
<i class="fas fa-user"></i>
|
| 743 |
+
</div>
|
| 744 |
+
</div>
|
| 745 |
+
<div class="flex-1">
|
| 746 |
+
<div class="text-sm text-gray-400 mb-1">You</div>
|
| 747 |
+
<div class="chat-bubble-user rounded-lg p-3">
|
| 748 |
+
<p class="text-white">Can you explain how to integrate you into a Node.js application?</p>
|
| 749 |
+
</div>
|
| 750 |
+
<div class="text-xs text-gray-500 mt-1">2:46 PM</div>
|
| 751 |
+
</div>
|
| 752 |
+
</div>
|
| 753 |
+
|
| 754 |
+
<!-- Assistant Message -->
|
| 755 |
+
<div class="flex mb-4">
|
| 756 |
+
<div class="flex-shrink-0 mr-3">
|
| 757 |
+
<div class="bg-gradient-to-br from-orange-500 to-pink-600 w-8 h-8 rounded-full flex items-center justify-center text-white">
|
| 758 |
+
<i class="fas fa-brain"></i>
|
| 759 |
+
</div>
|
| 760 |
+
</div>
|
| 761 |
+
<div class="flex-1">
|
| 762 |
+
<div class="text-sm text-gray-400 mb-1">Claude 3.5 Sonnet</div>
|
| 763 |
+
<div class="chat-bubble-assistant rounded-lg p-3">
|
| 764 |
+
<p class="text-white">Certainly! Here's a step-by-step guide to integrate Claude into a Node.js app:</p>
|
| 765 |
+
<ol class="list-decimal pl-5 mt-2 space-y-1">
|
| 766 |
+
<li>Install the Anthropic SDK: <code class="bg-gray-700 px-1 rounded">npm install @anthropic-ai/sdk</code></li>
|
| 767 |
+
<li>Get your API key from the Anthropic console</li>
|
| 768 |
+
<li>Initialize the client with your API key</li>
|
| 769 |
+
<li>Create a function to send messages</li>
|
| 770 |
+
</ol>
|
| 771 |
+
<p class="mt-2">Would you like me to show you a complete code example?</p>
|
| 772 |
+
</div>
|
| 773 |
+
<div class="text-xs text-gray-500 mt-1">2:47 PM</div>
|
| 774 |
+
</div>
|
| 775 |
+
</div>
|
| 776 |
+
</div>
|
| 777 |
+
|
| 778 |
+
<!-- Chat Input -->
|
| 779 |
+
<div class="bg-gray-800/50 rounded-lg p-4">
|
| 780 |
+
<div class="flex items-center mb-3 space-x-4">
|
| 781 |
+
<div class="flex-1">
|
| 782 |
+
<label class="text-gray-400 text-sm">Model</label>
|
| 783 |
+
<select class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm mt-1">
|
| 784 |
+
<option>Claude 3.5 Sonnet</option>
|
| 785 |
+
<option>Claude 3 Opus</option>
|
| 786 |
+
<option>Claude 3 Haiku</option>
|
| 787 |
+
</select>
|
| 788 |
+
</div>
|
| 789 |
+
<div class="flex-1">
|
| 790 |
+
<label class="text-gray-400 text-sm">Temperature</label>
|
| 791 |
+
<div class="flex items-center mt-1">
|
| 792 |
+
<input type="range" min="0" max="1" step="0.1" value="0.7" class="w-full mr-2">
|
| 793 |
+
<span class="text-white text-sm w-8">0.7</span>
|
| 794 |
+
</div>
|
| 795 |
+
</div>
|
| 796 |
+
<div class="flex-1">
|
| 797 |
+
<label class="text-gray-400 text-sm">Max Tokens</label>
|
| 798 |
+
<input type="number" value="1000" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm mt-1">
|
| 799 |
+
</div>
|
| 800 |
+
</div>
|
| 801 |
+
|
| 802 |
+
<div class="flex items-end">
|
| 803 |
+
<div class="flex-1 mr-3">
|
| 804 |
+
<textarea class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm" rows="2" placeholder="Type your message here..."></textarea>
|
| 805 |
+
</div>
|
| 806 |
+
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg h-12 w-12 flex items-center justify-center">
|
| 807 |
+
<i class="fas fa-paper-plane"></i>
|
| 808 |
+
</button>
|
| 809 |
+
</div>
|
| 810 |
+
|
| 811 |
+
<div class="flex justify-between items-center mt-3">
|
| 812 |
+
<div class="flex space-x-2">
|
| 813 |
+
<button class="text-gray-400 hover:text-white">
|
| 814 |
+
<i class="fas fa-paperclip"></i>
|
| 815 |
+
</button>
|
| 816 |
+
<button class="text-gray-400 hover:text-white">
|
| 817 |
+
<i class="fas fa-code"></i>
|
| 818 |
+
</button>
|
| 819 |
+
<button class="text-gray-400 hover:text-white">
|
| 820 |
+
<i class="fas fa-magic"></i>
|
| 821 |
+
</button>
|
| 822 |
+
</div>
|
| 823 |
+
<div class="text-xs text-gray-500">
|
| 824 |
+
<span class="text-green-400">Connected</span> • Claude 3.5 Sonnet
|
| 825 |
+
</div>
|
| 826 |
+
</div>
|
| 827 |
+
</div>
|
| 828 |
+
</div>
|
| 829 |
+
</div>
|
| 830 |
+
</div>
|
| 831 |
+
|
| 832 |
+
<!-- Knowledge Base -->
|
| 833 |
+
<div class="mb-8">
|
| 834 |
+
<div class="flex justify-between items-center mb-6">
|
| 835 |
+
<h2 class="text-2xl font-bold text-white">Knowledge Base</h2>
|
| 836 |
+
<div class="flex items-center space-x-3">
|
| 837 |
+
<button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
|
| 838 |
+
<i class="fas fa-sync-alt mr-2"></i> Sync
|
| 839 |
+
</button>
|
| 840 |
+
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
|
| 841 |
+
<i class="fas fa-plus mr-2"></i> Add Document
|
| 842 |
+
</button>
|
| 843 |
+
</div>
|
| 844 |
+
</div>
|
| 845 |
+
|
| 846 |
+
<div class="bg-gray-900 rounded-xl overflow-hidden">
|
| 847 |
+
<div class="p-6">
|
| 848 |
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
| 849 |
+
<!-- Upload Area -->
|
| 850 |
+
<div class="upload-dropzone rounded-lg p-6 text-center col-span-1">
|
| 851 |
+
<div class="bg-blue-900/20 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
|
| 852 |
+
<i class="fas fa-cloud-upload-alt text-blue-400 text-2xl"></i>
|
| 853 |
+
</div>
|
| 854 |
+
<h3 class="text-lg font-medium text-white mb-2">Upload Documents</h3>
|
| 855 |
+
<p class="text-gray-400 text-sm mb-4">Drag & drop files here or click to browse</p>
|
| 856 |
+
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium">
|
| 857 |
+
Select Files
|
| 858 |
+
</button>
|
| 859 |
+
<p class="text-gray-500 text-xs mt-3">Supports: PDF, DOCX, TXT, CSV, PPTX</p>
|
| 860 |
+
</div>
|
| 861 |
+
|
| 862 |
+
<!-- Stats -->
|
| 863 |
+
<div class="bg-gray-800/50 rounded-lg p-6 col-span-2">
|
| 864 |
+
<h3 class="text-lg font-medium text-white mb-4">Knowledge Base Stats</h3>
|
| 865 |
+
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
| 866 |
+
<div class="bg-gray-700/50 p-4 rounded-lg">
|
| 867 |
+
<p class="text-gray-400 text-sm">Total Documents</p>
|
| 868 |
+
<p class="text-white text-2xl font-bold">142</p>
|
| 869 |
+
</div>
|
| 870 |
+
<div class="bg-gray-700/50 p-4 rounded-lg">
|
| 871 |
+
<p class="text-gray-400 text-sm">Indexed Chunks</p>
|
| 872 |
+
<p class="text-white text-2xl font-bold">8,742</p>
|
| 873 |
+
</div>
|
| 874 |
+
<div class="bg-gray-700/50 p-4 rounded-lg">
|
| 875 |
+
<p class="text-gray-400 text-sm">Storage Used</p>
|
| 876 |
+
<p class="text-white text-2xl font-bold">124 MB</p>
|
| 877 |
+
</div>
|
| 878 |
+
<div class="bg-gray-700/50 p-4 rounded-lg">
|
| 879 |
+
<p class="text-gray-400 text-sm">Last Updated</p>
|
| 880 |
+
<p class="text-white text-2xl font-bold">2h ago</p>
|
| 881 |
+
</div>
|
| 882 |
+
</div>
|
| 883 |
+
</div>
|
| 884 |
+
</div>
|
| 885 |
+
|
| 886 |
+
<!-- Search and Documents -->
|
| 887 |
+
<div class="mb-6">
|
| 888 |
+
<div class="flex items-center bg-gray-800/50 rounded-lg px-4 py-3">
|
| 889 |
+
<i class="fas fa-search text-gray-500 mr-3"></i>
|
| 890 |
+
<input type="text" placeholder="Search knowledge base..." class="bg-transparent border-none w-full text-white focus:outline-none">
|
| 891 |
+
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-1 rounded-lg text-sm font-medium ml-2">
|
| 892 |
+
Search
|
| 893 |
+
</button>
|
| 894 |
+
</div>
|
| 895 |
+
</div>
|
| 896 |
+
|
| 897 |
+
<!-- Document List -->
|
| 898 |
+
<div class="bg-gray-800/50 rounded-lg overflow-hidden">
|
| 899 |
+
<div class="grid grid-cols-12 bg-gray-900 p-4 border-b border-gray-800 font-medium text-gray-400 text-sm">
|
| 900 |
+
<div class="col-span-5">Document</div>
|
| 901 |
+
<div class="col-span-2">Type</div>
|
| 902 |
+
<div class="col-span-2">Size</div>
|
| 903 |
+
<div class="col-span-2">Status</div>
|
| 904 |
+
<div class="col-span-1 text-right">Actions</div>
|
| 905 |
+
</div>
|
| 906 |
+
|
| 907 |
+
<!-- Document Item -->
|
| 908 |
+
<div class="grid grid-cols-12 p-4 border-b border-gray-800 hover:bg-gray-700/30">
|
| 909 |
+
<div class="col-span-5 flex items-center">
|
| 910 |
+
<div class="bg-blue-900/20 w-8 h-8 rounded flex items-center justify-center mr-3">
|
| 911 |
+
<i class="fas fa-file-pdf text-blue-400 text-sm"></i>
|
| 912 |
+
</div>
|
| 913 |
+
<div>
|
| 914 |
+
<p class="text-white">Company Guidelines.pdf</p>
|
| 915 |
+
<p class="text-gray-500 text-xs">Uploaded: Jan 15, 2024</p>
|
| 916 |
+
</div>
|
| 917 |
+
</div>
|
| 918 |
+
<div class="col-span-2 flex items-center text-gray-400 text-sm">PDF</div>
|
| 919 |
+
<div class="col-span-2 flex items-center text-gray-400 text-sm">245 KB</div>
|
| 920 |
+
<div class="col-span-2 flex items-center">
|
| 921 |
+
<span class="bg-green-900/30 text-green-400 text-xs px-2 py-1 rounded-full">Indexed</span>
|
| 922 |
+
</div>
|
| 923 |
+
<div class="col-span-1 flex items-center justify-end space-x-2">
|
| 924 |
+
<button class="text-gray-400 hover:text-blue-400">
|
| 925 |
+
<i class="fas fa-eye"></i>
|
| 926 |
+
</button>
|
| 927 |
+
<button class="text-gray-400 hover:text-yellow-400">
|
| 928 |
+
<i class="fas fa-edit"></i>
|
| 929 |
+
</button>
|
| 930 |
+
<button class="text-gray-400 hover:text-red-400">
|
| 931 |
+
<i class="fas fa-trash"></i>
|
| 932 |
+
</button>
|
| 933 |
+
</div>
|
| 934 |
+
</div>
|
| 935 |
+
|
| 936 |
+
<!-- Document Item -->
|
| 937 |
+
<div class="grid grid-cols-12 p-4 border-b border-gray-800 hover:bg-gray-700/30">
|
| 938 |
+
<div class="col-span-5 flex items-center">
|
| 939 |
+
<div class="bg-green-900/20 w-8 h-8 rounded flex items-center justify-center mr-3">
|
| 940 |
+
<i class="fas fa-file-excel text-green-400 text-sm"></i>
|
| 941 |
+
</div>
|
| 942 |
+
<div>
|
| 943 |
+
<p class="text-white">Sales Data Q4.csv</p>
|
| 944 |
+
<p class="text-gray-500 text-xs">Uploaded: Jan 12, 2024</p>
|
| 945 |
+
</div>
|
| 946 |
+
</div>
|
| 947 |
+
<div class="col-span-2 flex items-center text-gray-400 text-sm">CSV</div>
|
| 948 |
+
<div class="col-span-2 flex items-center text-gray-400 text-sm">189 KB</div>
|
| 949 |
+
<div class="col-span-2 flex items-center">
|
| 950 |
+
<span class="bg-green-900/30 text-green-400 text-xs px-2 py-1 rounded-full">Indexed</span>
|
| 951 |
+
</div>
|
| 952 |
+
<div class="col-span-1 flex items-center justify-end space-x-2">
|
| 953 |
+
<button class="text-gray-400 hover:text-blue-400">
|
| 954 |
+
<i class="fas fa-eye"></i>
|
| 955 |
+
</button>
|
| 956 |
+
<button class="text-gray-400 hover:text-yellow-400">
|
| 957 |
+
<i class="fas fa-edit"></i>
|
| 958 |
+
</button>
|
| 959 |
+
<button class="text-gray-400 hover:text-red-400">
|
| 960 |
+
<i class="fas fa-trash"></i>
|
| 961 |
+
</button>
|
| 962 |
+
</div>
|
| 963 |
+
</div>
|
| 964 |
+
|
| 965 |
+
<!-- Document Item -->
|
| 966 |
+
<div class="grid grid-cols-12 p-4 border-b border-gray-800 hover:bg-gray-700/30">
|
| 967 |
+
<div class="col-span-5 flex items-center">
|
| 968 |
+
<div class="bg-purple-900/20 w-8 h-8 rounded flex items-center justify-center mr-3">
|
| 969 |
+
<i class="fas fa-file-word text-purple-400 text-sm"></i>
|
| 970 |
+
</div>
|
| 971 |
+
<div>
|
| 972 |
+
<p class="text-white">Product Specifications.docx</p>
|
| 973 |
+
<p class="text-gray-500 text-xs">Uploaded: Jan 10, 2024</p>
|
| 974 |
+
</div>
|
| 975 |
+
</div>
|
| 976 |
+
<div class="col-span-2 flex items-center text-gray-400 text-sm">DOCX</div>
|
| 977 |
+
<div class="col-span-2 flex items-center text-gray-400 text-sm">512 KB</div>
|
| 978 |
+
<div class="col-span-2 flex items-center">
|
| 979 |
+
<span class="bg-yellow-900/30 text-yellow-400 text-xs px-2 py-1 rounded-full">Processing</span>
|
| 980 |
+
</div>
|
| 981 |
+
<div class="col-span-1 flex items-center justify-end space-x-2">
|
| 982 |
+
<button class="text-gray-400 hover:text-blue-400">
|
| 983 |
+
<i class="fas fa-eye"></i>
|
| 984 |
+
</button>
|
| 985 |
+
<button class="text-gray-400 hover:text-yellow-400">
|
| 986 |
+
<i class="fas fa-edit"></i>
|
| 987 |
+
</button>
|
| 988 |
+
<button class="text-gray-400 hover:text-red-400">
|
| 989 |
+
<i class="fas fa-trash"></i>
|
| 990 |
+
</button>
|
| 991 |
+
</div>
|
| 992 |
+
</div>
|
| 993 |
+
|
| 994 |
+
<!-- Document Item -->
|
| 995 |
+
<div class="grid grid-cols-12 p-4 hover:bg-gray-700/30">
|
| 996 |
+
<div class="col-span-5 flex items-center">
|
| 997 |
+
<div class="bg-gray-900/20 w-8 h-8 rounded flex items-center justify-center mr-3">
|
| 998 |
+
<i class="fas fa-file-alt text-gray-400 text-sm"></i>
|
| 999 |
+
</div>
|
| 1000 |
+
<div>
|
| 1001 |
+
<p class="text-white">API Documentation.md</p>
|
| 1002 |
+
<p class="text-gray-500 text-xs">Uploaded: Jan 5, 2024</p>
|
| 1003 |
+
</div>
|
| 1004 |
+
</div>
|
| 1005 |
+
<div class="col-span-2 flex items-center text-gray-400 text-sm">Markdown</div>
|
| 1006 |
+
<div class="col-span-2 flex items-center text-gray-400 text-sm">87 KB</div>
|
| 1007 |
+
<div class="col-span-2 flex items-center">
|
| 1008 |
+
<span class="bg-green-900/30 text-green-400 text-xs px-2 py-1 rounded-full">Indexed</span>
|
| 1009 |
+
</div>
|
| 1010 |
+
<div class="col-span-1 flex items-center justify-end space-x-2">
|
| 1011 |
+
<button class="text-gray-400 hover:text-blue-400">
|
| 1012 |
+
<i class="fas fa-eye"></i>
|
| 1013 |
+
</button>
|
| 1014 |
+
<button class="text-gray-400 hover:text-yellow-400">
|
| 1015 |
+
<i class="fas fa-edit"></i>
|
| 1016 |
+
</button>
|
| 1017 |
+
<button class="text-gray-400 hover:text-red-400">
|
| 1018 |
+
<i class="fas fa-trash"></i>
|
| 1019 |
+
</button>
|
| 1020 |
+
</div>
|
| 1021 |
+
</div>
|
| 1022 |
+
</div>
|
| 1023 |
+
|
| 1024 |
+
<!-- Pagination -->
|
| 1025 |
+
<div class="flex justify-between items-center mt-4">
|
| 1026 |
+
<div class="text-gray-400 text-sm">
|
| 1027 |
+
Showing 1 to 4 of 142 documents
|
| 1028 |
+
</div>
|
| 1029 |
+
<div class="flex space-x-2">
|
| 1030 |
+
<button class="bg-gray-800 hover:bg-gray-700 text-white px-3 py-1 rounded-lg text-sm">
|
| 1031 |
+
Previous
|
| 1032 |
+
</button>
|
| 1033 |
+
<button class="bg-blue-600 text-white px-3 py-1 rounded-lg text-sm">
|
| 1034 |
+
1
|
| 1035 |
+
</button>
|
| 1036 |
+
<button class="bg-gray-800 hover:bg-gray-700 text-white px-3 py-1 rounded-lg text-sm">
|
| 1037 |
+
2
|
| 1038 |
+
</button>
|
| 1039 |
+
<button class="bg-gray-800 hover:bg-gray-700 text-white px-3 py-1 rounded-lg text-sm">
|
| 1040 |
+
3
|
| 1041 |
+
</button>
|
| 1042 |
+
<button class="bg-gray-800 hover:bg-gray-700 text-white px-3 py-1 rounded-lg text-sm">
|
| 1043 |
+
Next
|
| 1044 |
+
</button>
|
| 1045 |
+
</div>
|
| 1046 |
+
</div>
|
| 1047 |
+
</div>
|
| 1048 |
+
</div>
|
| 1049 |
+
</div>
|
| 1050 |
+
|
| 1051 |
+
<!-- Database Schema Section -->
|
| 1052 |
+
<div class="mb-8">
|
| 1053 |
+
<div class="flex justify-between items-center mb-6">
|
| 1054 |
+
<h2 class="text-2xl font-bold text-white">Database Schema</h2>
|
| 1055 |
+
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
|
| 1056 |
+
<i class="fas fa-download mr-2"></i> Export Schema
|
| 1057 |
+
</button>
|
| 1058 |
+
</div>
|
| 1059 |
+
|
| 1060 |
+
<div class="bg-gray-900 rounded-xl overflow-hidden">
|
| 1061 |
+
<div class="p-6">
|
| 1062 |
+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
| 1063 |
+
<!-- ER Diagram -->
|
| 1064 |
+
<div class="bg-gray-800/50 rounded-lg p-6">
|
| 1065 |
+
<h3 class="text-lg font-bold text-white mb-4">Entity Relationship Diagram</h3>
|
| 1066 |
+
<div class="bg-gray-900 rounded-lg p-4 flex items-center justify-center">
|
| 1067 |
+
<img src="https://mermaid.ink/img/eyJjb2RlIjoiZXJEaWFncmFtXG4gICAgVVNFUiB8fC0tb3sgQVBJX0tFWSA6IGhhc1xuICAgIFVTRVIgfHwtLW97IElOVEVHUkFUSU9OIDogaGFzXG4gICAgVVNFUiB8fC0tb3sgS05PV0xFR0VfQkFTRSA6IGhhc1xuICAgIElOVEVHUkFUSU9OIHx8LS1veyBNT0RFTCA6IGhhc1xuICAgIElOVEVHUkFUSU9OIHx8LS1veyBBUElfQ0FMTCA6IGdlbmVyYXRlc1xuICAgIEtOT1dMRURHRV9CQVNFIHx8LS1veyBET0NVTUVOVCA6IGNvbnRhaW5zXG4gICAgS05PV0xFR0VfQkFTRSB8fC0tb3sgQ0hVTksgOiBoYXNcbiAgICBNT0RFTCB8fC0tb3sgUFJPVklERVIgOiBiZWxvbmdzX3RvXG4gICAgTU9ERUwgfHwtLW97IE1PREVMX1ZFUlNJT04gOiBoYXNcbiAgICBNT0RFTCB8fC0tb3sgTU9ERUxfQ0FQQUJJTElUWSA6IGhhc1xuICAgIE1PREVMX1ZFUlNJT04gfHwtLW97IE1PREVMX1BBUkFNRVRFUiA6IGhhc1xuICAgIERPQ1VNRU5UIHx8LS1veyBET0NVTUVOVF9NRVRBREFUQSA6IGhhc1xuICAgIERPQ1VNRU5UIHx8LS1veyBET0NVTUVOVF9TVEFUVVMgOiBoYXNcbiAgICBDTFVTVEVSX05PREUgfHwtLW97IE1PREVMX0RFUExPWU1FTlQgOiBydW5zXG4gICAgQ0xVU1RFUl9OT0RFIHx8LS1veyBDTFVTVEVSX1JFU09VUkNFIDogdXNlc1xuICAgIENMVVNURVJfTk9ERSB8fC0tb3sgQ0xVU1RFUl9TVEFUVVMgOiBoYXNcbiAgICBDTFVTVEVSX05PREUgfHwtLW97IENMVVNURVJfTE9HIDogZ2VuZXJhdGVzIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRhcmsiLCJ0aGVtZVZhcmlhYmxlcyI6eyJiYWNrZ3JvdW5kIjoiIzFhMWIxZSIsInRlcnRpYXJ5Q29sb3IiOiIjMWEyYzJlIiwicHJpbWFyeUNvbG9yIjoiIzNhODdmNiIsInNlY29uZGFyeUNvbG9yIjoiIzEwYjk4MSIsInRleHRDb2xvciI6IiNlMmUyZTIiLCJub3RlQ29sb3IiOiIjMWEyYzJlIiwibGluZUNvbG9yIjoiIzNhODdmNiIsIm5vdGVCZ0NvbG9yIjoiIzFhMWIxZSJ9fSwidXBkYXRlRWRpdG9yIjpmYWxzZX0" alt="ER Diagram" class="w-full h-auto">
|
| 1068 |
+
</div>
|
| 1069 |
+
</div>
|
| 1070 |
+
|
| 1071 |
+
<!-- Schema Documentation -->
|
| 1072 |
+
<div class="bg-gray-800/50 rounded-lg p-6">
|
| 1073 |
+
<h3 class="text-lg font-bold text-white mb-4">Schema Documentation</h3>
|
| 1074 |
+
<div class="space-y-4">
|
| 1075 |
+
<div class="bg-gray-900 rounded-lg p-4">
|
| 1076 |
+
<h4 class="text-blue-400 font-medium mb-2">Main Tables</h4>
|
| 1077 |
+
<ul class="list-disc pl-5 text-gray-300 text-sm space-y-1">
|
| 1078 |
+
<li><strong>USER</strong> - Stores user account information</li>
|
| 1079 |
+
<li><strong>API_KEY</strong> - Manages API keys for model access</li>
|
| 1080 |
+
<li><strong>INTEGRATION</strong> - Tracks model integrations</li>
|
| 1081 |
+
<li><strong>MODEL</strong> - Contains AI model definitions</li>
|
| 1082 |
+
<li><strong>KNOWLEDGE_BASE</strong> - Manages knowledge repositories</li>
|
| 1083 |
+
</ul>
|
| 1084 |
+
</div>
|
| 1085 |
+
<div class="bg-gray-900 rounded-lg p-4">
|
| 1086 |
+
<h4 class="text-blue-400 font-medium mb-2">Supporting Tables</h4>
|
| 1087 |
+
<ul class="list-disc pl-5 text-gray-300 text-sm space-y-1">
|
| 1088 |
+
<li><strong>DOCUMENT</strong> - Stores uploaded knowledge files</li>
|
| 1089 |
+
<li><strong>CHUNK</strong> - Text chunks for vector search</li>
|
| 1090 |
+
<li><strong>API_CALL</strong> - Logs API request history</li>
|
| 1091 |
+
<li><strong>MODEL_VERSION</strong> - Tracks model variants</li>
|
| 1092 |
+
<li><strong>CLUSTER_NODE</strong> - Manages deployment nodes</li>
|
| 1093 |
+
</ul>
|
| 1094 |
+
</div>
|
| 1095 |
+
</div>
|
| 1096 |
+
</div>
|
| 1097 |
+
</div>
|
| 1098 |
+
|
| 1099 |
+
<!-- Complete Schema SQL -->
|
| 1100 |
+
<div class="code-block">
|
| 1101 |
+
<div class="flex justify-between items-center bg-gray-800 px-4 py-3">
|
| 1102 |
+
<div class="flex items-center">
|
| 1103 |
+
<span class="text-gray-300 text-sm font-mono">ai_nexus_schema.sql</span>
|
| 1104 |
+
</div>
|
| 1105 |
+
<button class="text-gray-400 hover:text-white" onclick="copyCode(this)">
|
| 1106 |
+
<i class="far fa-copy mr-1"></i> Copy
|
| 1107 |
+
</button>
|
| 1108 |
+
</div>
|
| 1109 |
+
<div class="p-4 overflow-x-auto">
|
| 1110 |
+
<pre class="text-gray-300 text-sm font-mono"><code>-- Main Tables
|
| 1111 |
+
CREATE TABLE USER (
|
| 1112 |
+
user_id VARCHAR(36) PRIMARY KEY,
|
| 1113 |
+
email VARCHAR(255) NOT NULL UNIQUE,
|
| 1114 |
+
password_hash VARCHAR(255) NOT NULL,
|
| 1115 |
+
name VARCHAR(100),
|
| 1116 |
+
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
| 1117 |
+
last_login TIMESTAMP,
|
| 1118 |
+
is_active BOOLEAN DEFAULT TRUE
|
| 1119 |
+
);
|
| 1120 |
+
|
| 1121 |
+
CREATE TABLE API_KEY (
|
| 1122 |
+
key_id VARCHAR(36) PRIMARY KEY,
|
| 1123 |
+
user_id VARCHAR(36) REFERENCES USER(user_id),
|
| 1124 |
+
key_name VARCHAR(100) NOT NULL,
|
| 1125 |
+
key_value VARCHAR(255) NOT NULL UNIQUE,
|
| 1126 |
+
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
| 1127 |
+
expires_at TIMESTAMP,
|
| 1128 |
+
is_active BOOLEAN DEFAULT TRUE,
|
| 1129 |
+
scopes JSONB
|
| 1130 |
+
);
|
| 1131 |
+
|
| 1132 |
+
CREATE TABLE PROVIDER (
|
| 1133 |
+
provider_id VARCHAR(36) PRIMARY KEY,
|
| 1134 |
+
name VARCHAR(100) NOT NULL,
|
| 1135 |
+
description TEXT,
|
| 1136 |
+
website VARCHAR(255),
|
| 1137 |
+
api_docs_url VARCHAR(255),
|
| 1138 |
+
is_active BOOLEAN DEFAULT TRUE
|
| 1139 |
+
);
|
| 1140 |
+
|
| 1141 |
+
CREATE TABLE MODEL (
|
| 1142 |
+
model_id VARCHAR(36) PRIMARY KEY,
|
| 1143 |
+
provider_id VARCHAR(36) REFERENCES PROVIDER(provider_id),
|
| 1144 |
+
name VARCHAR(100) NOT NULL,
|
| 1145 |
+
description TEXT,
|
| 1146 |
+
context_window INTEGER,
|
| 1147 |
+
is_multimodal BOOLEAN DEFAULT FALSE,
|
| 1148 |
+
is_finetunable BOOLEAN DEFAULT FALSE,
|
| 1149 |
+
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
| 1150 |
+
updated_at TIMESTAMP
|
| 1151 |
+
);
|
| 1152 |
+
|
| 1153 |
+
CREATE TABLE MODEL_VERSION (
|
| 1154 |
+
version_id VARCHAR(36) PRIMARY KEY,
|
| 1155 |
+
model_id VARCHAR(36) REFERENCES MODEL(model_id),
|
| 1156 |
+
version_name VARCHAR(50) NOT NULL,
|
| 1157 |
+
release_date DATE,
|
| 1158 |
+
is_current BOOLEAN DEFAULT FALSE,
|
| 1159 |
+
deprecated_at TIMESTAMP
|
| 1160 |
+
);
|
| 1161 |
+
|
| 1162 |
+
CREATE TABLE MODEL_CAPABILITY (
|
| 1163 |
+
capability_id VARCHAR(36) PRIMARY KEY,
|
| 1164 |
+
model_id VARCHAR(36) REFERENCES MODEL(model_id),
|
| 1165 |
+
capability_name VARCHAR(100) NOT NULL,
|
| 1166 |
+
capability_description TEXT
|
| 1167 |
+
);
|
| 1168 |
+
|
| 1169 |
+
CREATE TABLE MODEL_PARAMETER (
|
| 1170 |
+
parameter_id VARCHAR(36) PRIMARY KEY,
|
| 1171 |
+
version_id VARCHAR(36) REFERENCES MODEL_VERSION(version_id),
|
| 1172 |
+
param_name VARCHAR(100) NOT NULL,
|
| 1173 |
+
param_type VARCHAR(50) NOT NULL,
|
| 1174 |
+
default_value VARCHAR(100),
|
| 1175 |
+
min_value VARCHAR(100),
|
| 1176 |
+
max_value VARCHAR(100),
|
| 1177 |
+
description TEXT
|
| 1178 |
+
);
|
| 1179 |
+
|
| 1180 |
+
-- Integration Tables
|
| 1181 |
+
CREATE TABLE INTEGRATION (
|
| 1182 |
+
integration_id VARCHAR(36) PRIMARY KEY,
|
| 1183 |
+
user_id VARCHAR(36) REFERENCES USER(user_id),
|
| 1184 |
+
model_id VARCHAR(36) REFERENCES MODEL(model_id),
|
| 1185 |
+
name VARCHAR(100) NOT NULL,
|
| 1186 |
+
description TEXT,
|
| 1187 |
+
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
| 1188 |
+
updated_at TIMESTAMP,
|
| 1189 |
+
is_active BOOLEAN DEFAULT TRUE,
|
| 1190 |
+
config JSONB
|
| 1191 |
+
);
|
| 1192 |
+
|
| 1193 |
+
CREATE TABLE API_CALL (
|
| 1194 |
+
call_id VARCHAR(36) PRIMARY KEY,
|
| 1195 |
+
integration_id VARCHAR(36) REFERENCES INTEGRATION(integration_id),
|
| 1196 |
+
timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
| 1197 |
+
endpoint VARCHAR(255),
|
| 1198 |
+
status_code INTEGER,
|
| 1199 |
+
duration_ms INTEGER,
|
| 1200 |
+
prompt_tokens INTEGER,
|
| 1201 |
+
completion_tokens INTEGER,
|
| 1202 |
+
cost NUMERIC(10,6),
|
| 1203 |
+
error_message TEXT,
|
| 1204 |
+
request_body TEXT,
|
| 1205 |
+
response_body TEXT
|
| 1206 |
+
);
|
| 1207 |
+
|
| 1208 |
+
-- Knowledge Base Tables
|
| 1209 |
+
CREATE TABLE KNOWLEDGE_BASE (
|
| 1210 |
+
kb_id VARCHAR(36) PRIMARY KEY,
|
| 1211 |
+
user_id VARCHAR(36) REFERENCES USER(user_id),
|
| 1212 |
+
name VARCHAR(100) NOT NULL,
|
| 1213 |
+
description TEXT,
|
| 1214 |
+
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
| 1215 |
+
updated_at TIMESTAMP,
|
| 1216 |
+
vector_store_type VARCHAR(50),
|
| 1217 |
+
index_status VARCHAR(20) DEFAULT 'empty'
|
| 1218 |
+
);
|
| 1219 |
+
|
| 1220 |
+
CREATE TABLE DOCUMENT (
|
| 1221 |
+
document_id VARCHAR(36) PRIMARY KEY,
|
| 1222 |
+
kb_id VARCHAR(36) REFERENCES KNOWLEDGE_BASE(kb_id),
|
| 1223 |
+
name VARCHAR(255) NOT NULL,
|
| 1224 |
+
file_path VARCHAR(255),
|
| 1225 |
+
file_size INTEGER,
|
| 1226 |
+
file_type VARCHAR(50),
|
| 1227 |
+
upload_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
| 1228 |
+
processing_status VARCHAR(20) DEFAULT 'pending'
|
| 1229 |
+
);
|
| 1230 |
+
|
| 1231 |
+
CREATE TABLE DOCUMENT_METADATA (
|
| 1232 |
+
metadata_id VARCHAR(36) PRIMARY KEY,
|
| 1233 |
+
document_id VARCHAR(36) REFERENCES DOCUMENT(document_id),
|
| 1234 |
+
metadata_key VARCHAR(100) NOT NULL,
|
| 1235 |
+
metadata_value TEXT,
|
| 1236 |
+
metadata_type VARCHAR(20)
|
| 1237 |
+
);
|
| 1238 |
+
|
| 1239 |
+
CREATE TABLE CHUNK (
|
| 1240 |
+
chunk_id VARCHAR(36) PRIMARY KEY,
|
| 1241 |
+
document_id VARCHAR(36) REFERENCES DOCUMENT(document_id),
|
| 1242 |
+
chunk_text TEXT NOT NULL,
|
| 1243 |
+
chunk_index INTEGER,
|
| 1244 |
+
vector_embedding VECTOR(1536),
|
| 1245 |
+
metadata JSONB
|
| 1246 |
+
);
|
| 1247 |
+
|
| 1248 |
+
-- Cluster Management Tables
|
| 1249 |
+
CREATE TABLE CLUSTER_NODE (
|
| 1250 |
+
node_id VARCHAR(36) PRIMARY KEY,
|
| 1251 |
+
hostname VARCHAR(255) NOT NULL,
|
| 1252 |
+
ip_address VARCHAR(50),
|
| 1253 |
+
node_type VARCHAR(50),
|
| 1254 |
+
gpu_type VARCHAR(50),
|
| 1255 |
+
cpu_cores INTEGER,
|
| 1256 |
+
memory_gb INTEGER,
|
| 1257 |
+
join_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
| 1258 |
+
last_heartbeat TIMESTAMP
|
| 1259 |
+
);
|
| 1260 |
+
|
| 1261 |
+
CREATE TABLE CLUSTER_STATUS (
|
| 1262 |
+
status_id VARCHAR(36) PRIMARY KEY,
|
| 1263 |
+
node_id VARCHAR(36) REFERENCES CLUSTER_NODE(node_id),
|
| 1264 |
+
timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
| 1265 |
+
cpu_usage NUMERIC(5,2),
|
| 1266 |
+
memory_usage NUMERIC(5,2),
|
| 1267 |
+
gpu_usage NUMERIC(5,2),
|
| 1268 |
+
disk_usage NUMERIC(5,2),
|
| 1269 |
+
network_in NUMERIC(10,2),
|
| 1270 |
+
network_out NUMERIC(10,2)
|
| 1271 |
+
);
|
| 1272 |
+
|
| 1273 |
+
CREATE TABLE MODEL_DEPLOYMENT (
|
| 1274 |
+
deployment_id VARCHAR(36) PRIMARY KEY,
|
| 1275 |
+
model_id VARCHAR(36) REFERENCES MODEL(model_id),
|
| 1276 |
+
node_id VARCHAR(36) REFERENCES CLUSTER_NODE(node_id),
|
| 1277 |
+
version_id VARCHAR(36) REFERENCES MODEL_VERSION(version_id),
|
| 1278 |
+
start_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
| 1279 |
+
last_activity TIMESTAMP,
|
| 1280 |
+
status VARCHAR(20) DEFAULT 'running',
|
| 1281 |
+
replicas INTEGER DEFAULT 1,
|
| 1282 |
+
config JSONB
|
| 1283 |
+
);
|
| 1284 |
+
|
| 1285 |
+
CREATE TABLE CLUSTER_LOG (
|
| 1286 |
+
log_id VARCHAR(36) PRIMARY KEY,
|
| 1287 |
+
node_id VARCHAR(36) REFERENCES CLUSTER_NODE(node_id),
|
| 1288 |
+
deployment_id VARCHAR(36) REFERENCES MODEL_DEPLOYMENT(deployment_id),
|
| 1289 |
+
timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
| 1290 |
+
log_level VARCHAR(10),
|
| 1291 |
+
message TEXT,
|
| 1292 |
+
context JSONB
|
| 1293 |
+
);</code></pre>
|
| 1294 |
+
</div>
|
| 1295 |
+
</div>
|
| 1296 |
+
</div>
|
| 1297 |
+
</div>
|
| 1298 |
+
</div>
|
| 1299 |
+
</main>
|
| 1300 |
+
|
| 1301 |
+
<!-- Footer -->
|
| 1302 |
+
<footer class="bg-gray-900 border-t border-gray-800">
|
| 1303 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
| 1304 |
+
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
| 1305 |
+
<div>
|
| 1306 |
+
<h3 class="text-white text-lg font-medium mb-4">AI Nexus</h3>
|
| 1307 |
+
<p class="text-gray-400 text-sm">Unified platform for AI model integration, deployment, and management.</p>
|
| 1308 |
+
</div>
|
| 1309 |
+
<div>
|
| 1310 |
+
<h3 class="text-white text-lg font-medium mb-4">Product</h3>
|
| 1311 |
+
<ul class="space-y-2">
|
| 1312 |
+
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Features</a></li>
|
| 1313 |
+
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Pricing</a></li>
|
| 1314 |
+
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Documentation</a></li>
|
| 1315 |
+
<li><a href="#" class="text-gray-400 hover:text-white text-sm">API Status</a></li>
|
| 1316 |
+
</ul>
|
| 1317 |
+
</div>
|
| 1318 |
+
<div>
|
| 1319 |
+
<h3 class="text-white text-lg font-medium mb-4">Company</h3>
|
| 1320 |
+
<ul class="space-y-2">
|
| 1321 |
+
<li><a href="#" class="text-gray-400 hover:text-white text-sm">About</a></li>
|
| 1322 |
+
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Blog</a></li>
|
| 1323 |
+
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Careers</a></li>
|
| 1324 |
+
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Contact</a></li>
|
| 1325 |
+
</ul>
|
| 1326 |
+
</div>
|
| 1327 |
+
<div>
|
| 1328 |
+
<h3 class="text-white text-lg font-medium mb-4">Connect</h3>
|
| 1329 |
+
<div class="flex space-x-4">
|
| 1330 |
+
<a href="#" class="text-gray-400 hover:text-white">
|
| 1331 |
+
<i class="fab fa-twitter"></i>
|
| 1332 |
+
</a>
|
| 1333 |
+
<a href="#" class="text-gray-400 hover:text-white">
|
| 1334 |
+
<i class="fab fa-github"></i>
|
| 1335 |
+
</a>
|
| 1336 |
+
<a href="#" class="text-gray-400 hover:text-white">
|
| 1337 |
+
<i class="fab fa-linkedin"></i>
|
| 1338 |
+
</a>
|
| 1339 |
+
<a href="#" class="text-gray-400 hover:text-white">
|
| 1340 |
+
<i class="fab fa-discord"></i>
|
| 1341 |
+
</a>
|
| 1342 |
+
</div>
|
| 1343 |
+
<div class="mt-4">
|
| 1344 |
+
<p class="text-gray-400 text-sm">Subscribe to our newsletter</p>
|
| 1345 |
+
<div class="flex mt-2">
|
| 1346 |
+
<input type="email" placeholder="Your email" class="bg-gray-800 text-white px-3 py-2 rounded-l-lg text-sm w-full focus
|
| 1347 |
+
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=mikeschlottig/ai-embedding-app" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
| 1348 |
+
</html>
|