Initial version
This commit is contained in:
commit
50d66c2985
GPG key ID:
D7026C21E81584BC
5 changed files with 1117 additions and 0 deletions
96
static/index.html
Normal file
96
static/index.html
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OpenAI Models Viewer</title>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>OpenAI Models Viewer</h1>
|
||||
<p>Enter an OpenAI-compatible endpoint URL to view available models</p>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Server Management Section -->
|
||||
<div class="server-section">
|
||||
<h3>Server Management</h3>
|
||||
<div class="server-select-group">
|
||||
<label for="server-selector">Select Server:</label>
|
||||
<div class="server-selector-container">
|
||||
<select id="server-selector">
|
||||
<option value="">Select a server...</option>
|
||||
</select>
|
||||
<button id="server-settings-btn" class="settings-btn" title="Server Settings">
|
||||
⚙️
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-section">
|
||||
<!-- Manual URL entry removed -->
|
||||
</div>
|
||||
|
||||
<div id="loading" class="loading hidden">
|
||||
<div class="spinner"></div>
|
||||
<p>Fetching models...</p>
|
||||
</div>
|
||||
|
||||
<div id="error-message" class="error hidden"></div>
|
||||
|
||||
<div id="results" class="results hidden">
|
||||
<h2>Available Models</h2>
|
||||
<div id="models-list"></div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Server Management Modal -->
|
||||
<div id="server-modal" class="modal hidden">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>Server Management</h3>
|
||||
<span class="close" id="close-server-modal">×</span>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="server-input-group">
|
||||
<label for="server-name">Server Name:</label>
|
||||
<input type="text" id="server-name" placeholder="Server Name (e.g., OpenAI Prod)">
|
||||
<label for="server-url">Server URL:</label>
|
||||
<input type="url" id="server-url" placeholder="https://api.openai.com">
|
||||
<label for="server-api-key">API Key:</label>
|
||||
<input type="password" id="server-api-key" placeholder="API Key">
|
||||
<button id="add-server">Add Server</button>
|
||||
</div>
|
||||
<div class="server-list">
|
||||
<h4>Saved Servers:</h4>
|
||||
<ul id="server-list-items"></ul>
|
||||
</div>
|
||||
<button id="remove-server">Remove Selected Server</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chat Modal -->
|
||||
<div id="chat-modal" class="modal hidden">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 id="chat-model-name">Chat with Model</h3>
|
||||
<span class="close">×</span>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="chat-messages" class="chat-messages"></div>
|
||||
<div class="chat-input-container">
|
||||
<textarea id="chat-input" placeholder="Type your message..." rows="3"></textarea>
|
||||
<button id="send-message" disabled>Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/static/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
533
static/script.js
Normal file
533
static/script.js
Normal file
|
|
@ -0,0 +1,533 @@
|
|||
// localStorage key for servers
|
||||
const LOCAL_STORAGE_SERVERS_KEY = 'openai_servers';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const loadingDiv = document.getElementById('loading');
|
||||
const errorMessageDiv = document.getElementById('error-message');
|
||||
const resultsDiv = document.getElementById('results');
|
||||
const modelsListDiv = document.getElementById('models-list');
|
||||
|
||||
// Server Management Elements
|
||||
const serverNameInput = document.getElementById('server-name');
|
||||
const serverUrlInput = document.getElementById('server-url');
|
||||
const serverApiKeyInput = document.getElementById('server-api-key');
|
||||
const addServerButton = document.getElementById('add-server');
|
||||
const serverSelector = document.getElementById('server-selector');
|
||||
const removeServerButton = document.getElementById('remove-server');
|
||||
const serverSettingsBtn = document.getElementById('server-settings-btn');
|
||||
const serverModal = document.getElementById('server-modal');
|
||||
const closeServerModal = document.getElementById('close-server-modal');
|
||||
const serverListItems = document.getElementById('server-list-items');
|
||||
|
||||
// Chat Modal Elements
|
||||
const chatModal = document.getElementById('chat-modal');
|
||||
const chatModelName = document.getElementById('chat-model-name');
|
||||
const chatMessages = document.getElementById('chat-messages');
|
||||
const chatInput = document.getElementById('chat-input');
|
||||
const sendMessageButton = document.getElementById('send-message');
|
||||
const closeChatModalButton = chatModal.querySelector('.close');
|
||||
const closeModalBackground = chatModal;
|
||||
|
||||
// Ensure modal is hidden on page load (defensive programming)
|
||||
if (chatModal) {
|
||||
chatModal.classList.add('hidden');
|
||||
}
|
||||
|
||||
// Current chat state
|
||||
let currentChatModel = null;
|
||||
let currentEndpointUrl = null;
|
||||
let currentApiKey = null;
|
||||
|
||||
// Initialize server management
|
||||
console.log('Initializing server management...');
|
||||
loadServers();
|
||||
console.log('Server management initialized');
|
||||
|
||||
// Add event listeners for server management
|
||||
addServerButton.addEventListener('click', addServer);
|
||||
removeServerButton.addEventListener('click', removeServer);
|
||||
serverSettingsBtn.addEventListener('click', () => {
|
||||
serverModal.classList.remove('hidden');
|
||||
updateServerListDisplay();
|
||||
});
|
||||
closeServerModal.addEventListener('click', () => {
|
||||
serverModal.classList.add('hidden');
|
||||
});
|
||||
|
||||
// Auto-fetch models when server selection changes
|
||||
serverSelector.addEventListener('change', fetchModels);
|
||||
|
||||
// Close modals when clicking outside
|
||||
serverModal.addEventListener('click', (e) => {
|
||||
if (e.target === serverModal) {
|
||||
serverModal.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// Chat Modal Event Listeners - Improved robustness
|
||||
if (closeChatModalButton) {
|
||||
closeChatModalButton.addEventListener('click', closeChatModal);
|
||||
}
|
||||
|
||||
if (closeModalBackground) {
|
||||
closeModalBackground.addEventListener('click', (e) => {
|
||||
if (e.target === closeModalBackground) {
|
||||
closeChatModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Also allow ESC key to close modal
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && chatModal && !chatModal.classList.contains('hidden')) {
|
||||
closeChatModal();
|
||||
}
|
||||
});
|
||||
sendMessageButton.addEventListener('click', sendMessage);
|
||||
chatInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
sendMessage();
|
||||
}
|
||||
});
|
||||
|
||||
function loadServers() {
|
||||
console.log('Loading servers from localStorage...');
|
||||
try {
|
||||
// Get the raw data from localStorage
|
||||
const rawData = localStorage.getItem(LOCAL_STORAGE_SERVERS_KEY);
|
||||
console.log('Raw localStorage data:', rawData);
|
||||
|
||||
// Handle case where no data exists
|
||||
if (rawData === null || rawData === undefined) {
|
||||
console.log('No servers found in localStorage');
|
||||
updateServerSelector([]);
|
||||
return;
|
||||
}
|
||||
|
||||
// Parse the JSON data
|
||||
const servers = JSON.parse(rawData || '{}');
|
||||
console.log('Parsed servers:', servers);
|
||||
|
||||
// Validate that parsed data is an object
|
||||
if (typeof servers !== 'object' || servers === null || Array.isArray(servers)) {
|
||||
console.warn('Invalid servers format in localStorage, resetting to empty object');
|
||||
localStorage.setItem(LOCAL_STORAGE_SERVERS_KEY, JSON.stringify({}));
|
||||
updateServerSelector([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const serverNames = Object.keys(servers);
|
||||
console.log('Server names found:', serverNames);
|
||||
updateServerSelector(serverNames);
|
||||
updateServerListDisplay(); // Update the modal list display
|
||||
console.log('Servers loaded successfully');
|
||||
|
||||
// Add visual feedback if servers were loaded
|
||||
if (serverNames.length > 0) {
|
||||
console.log(`Successfully loaded ${serverNames.length} server(s)`);
|
||||
// Briefly highlight the server selector to show it was updated
|
||||
serverSelector.style.border = '2px solid #27ae60';
|
||||
setTimeout(() => {
|
||||
serverSelector.style.border = '2px solid #ddd';
|
||||
}, 1000);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading servers from localStorage:', error);
|
||||
console.error('localStorage data that caused error:', localStorage.getItem(LOCAL_STORAGE_SERVERS_KEY));
|
||||
updateServerSelector([]);
|
||||
}
|
||||
}
|
||||
|
||||
function updateServerSelector(serverNames) {
|
||||
// Clear existing options except the default
|
||||
serverSelector.innerHTML = '<option value="">Select a server...</option>';
|
||||
|
||||
// Add available servers
|
||||
serverNames.forEach(serverName => {
|
||||
const option = document.createElement('option');
|
||||
option.value = serverName;
|
||||
option.textContent = serverName;
|
||||
serverSelector.appendChild(option);
|
||||
});
|
||||
}
|
||||
|
||||
function updateServerListDisplay() {
|
||||
try {
|
||||
const servers = JSON.parse(localStorage.getItem(LOCAL_STORAGE_SERVERS_KEY) || '{}');
|
||||
const serverNames = Object.keys(servers);
|
||||
|
||||
serverListItems.innerHTML = '';
|
||||
|
||||
if (serverNames.length === 0) {
|
||||
serverListItems.innerHTML = '<li>No servers saved</li>';
|
||||
return;
|
||||
}
|
||||
|
||||
serverNames.forEach(serverName => {
|
||||
const li = document.createElement('li');
|
||||
li.textContent = serverName;
|
||||
li.title = `URL: ${servers[serverName].url}`;
|
||||
serverListItems.appendChild(li);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error updating server list display:', error);
|
||||
serverListItems.innerHTML = '<li>Error loading servers</li>';
|
||||
}
|
||||
}
|
||||
|
||||
function addServer() {
|
||||
const name = serverNameInput.value.trim();
|
||||
const url = serverUrlInput.value.trim();
|
||||
const apiKey = serverApiKeyInput.value.trim();
|
||||
|
||||
if (!name || !url || !apiKey) {
|
||||
showError('Please enter a server name, URL, and API key');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate URL format
|
||||
try {
|
||||
new URL(url);
|
||||
} catch (e) {
|
||||
showError('Please enter a valid URL (e.g., https://api.openai.com)');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Get existing servers from localStorage
|
||||
const servers = JSON.parse(localStorage.getItem(LOCAL_STORAGE_SERVERS_KEY) || '{}');
|
||||
|
||||
// Add new server with both URL and API key
|
||||
servers[name] = {
|
||||
url: url,
|
||||
apiKey: apiKey
|
||||
};
|
||||
|
||||
// Save back to localStorage
|
||||
localStorage.setItem(LOCAL_STORAGE_SERVERS_KEY, JSON.stringify(servers));
|
||||
|
||||
// Clear inputs
|
||||
serverNameInput.value = '';
|
||||
serverUrlInput.value = '';
|
||||
serverApiKeyInput.value = '';
|
||||
|
||||
// Reload servers
|
||||
loadServers();
|
||||
|
||||
showError('Server added successfully', 'success');
|
||||
} catch (error) {
|
||||
console.error('Error adding server to localStorage:', error);
|
||||
showError('Failed to add server. Please try again.');
|
||||
}
|
||||
}
|
||||
|
||||
function removeServer() {
|
||||
const selectedServerName = serverSelector.value;
|
||||
|
||||
if (!selectedServerName) {
|
||||
showError('Please select a server to remove');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirm(`Are you sure you want to remove the server "${selectedServerName}"?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Get existing servers from localStorage
|
||||
const servers = JSON.parse(localStorage.getItem(LOCAL_STORAGE_SERVERS_KEY) || '{}');
|
||||
|
||||
// Remove the selected server
|
||||
delete servers[selectedServerName];
|
||||
|
||||
// Save back to localStorage
|
||||
localStorage.setItem(LOCAL_STORAGE_SERVERS_KEY, JSON.stringify(servers));
|
||||
|
||||
// Reload servers
|
||||
loadServers();
|
||||
|
||||
showError('Server removed successfully', 'success');
|
||||
} catch (error) {
|
||||
console.error('Error removing server from localStorage:', error);
|
||||
showError('Failed to remove server. Please try again.');
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchModels() {
|
||||
const selectedServerName = serverSelector.value;
|
||||
|
||||
// Must select a server
|
||||
if (!selectedServerName) {
|
||||
showError('Please select a server');
|
||||
return;
|
||||
}
|
||||
|
||||
// Get server configuration from localStorage
|
||||
try {
|
||||
const servers = JSON.parse(localStorage.getItem(LOCAL_STORAGE_SERVERS_KEY) || '{}');
|
||||
const selectedServer = servers[selectedServerName];
|
||||
|
||||
if (!selectedServer) {
|
||||
showError(`Server "${selectedServerName}" not found`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Show loading, hide results and errors
|
||||
showLoading();
|
||||
hideError();
|
||||
hideResults();
|
||||
|
||||
// Construct models endpoint URL
|
||||
let url = selectedServer.url;
|
||||
if (!url.endsWith('/models')) {
|
||||
url = url.replace(/\/$/, '') + '/models';
|
||||
}
|
||||
|
||||
// Set up headers
|
||||
const headers = {
|
||||
'Content-Type': 'application/json'
|
||||
};
|
||||
|
||||
if (selectedServer.apiKey) {
|
||||
headers['Authorization'] = `Bearer ${selectedServer.apiKey}`;
|
||||
}
|
||||
|
||||
// Make direct API call
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: headers
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text();
|
||||
throw new Error(`HTTP error! status: ${response.status}, details: ${errorText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!data.data || !Array.isArray(data.data)) {
|
||||
throw new Error('Invalid response format: expected "data" array');
|
||||
}
|
||||
|
||||
displayModels(data.data, selectedServer.url, selectedServer.apiKey);
|
||||
} catch (error) {
|
||||
console.error('Error fetching models:', error);
|
||||
showError(`Failed to fetch models: ${error.message}`);
|
||||
} finally {
|
||||
hideLoading();
|
||||
}
|
||||
}
|
||||
|
||||
function displayModels(models, endpointUrl, apiKey) {
|
||||
modelsListDiv.innerHTML = '';
|
||||
|
||||
if (models.length === 0) {
|
||||
modelsListDiv.innerHTML = '<p>No models found.</p>';
|
||||
} else {
|
||||
models.forEach(model => {
|
||||
const modelItem = document.createElement('div');
|
||||
modelItem.className = 'model-item';
|
||||
modelItem.dataset.modelId = model.id;
|
||||
modelItem.dataset.endpointUrl = endpointUrl;
|
||||
modelItem.dataset.apiKey = apiKey || '';
|
||||
|
||||
const modelName = model.name || model.id || 'Unknown Model';
|
||||
const modelId = model.id || 'Unknown ID';
|
||||
|
||||
modelItem.innerHTML = `
|
||||
<div class="model-name">${modelName}</div>
|
||||
<div class="model-id">${modelId}</div>
|
||||
`;
|
||||
|
||||
// Add click event listener to open chat
|
||||
modelItem.addEventListener('click', () => {
|
||||
openChatModal(modelId, modelName, endpointUrl, apiKey);
|
||||
});
|
||||
|
||||
modelsListDiv.appendChild(modelItem);
|
||||
});
|
||||
}
|
||||
|
||||
showResults();
|
||||
}
|
||||
|
||||
function openChatModal(modelId, modelName, endpointUrl, apiKey) {
|
||||
currentChatModel = modelId;
|
||||
currentEndpointUrl = endpointUrl;
|
||||
currentApiKey = apiKey;
|
||||
|
||||
chatModelName.textContent = `Chat with ${modelName}`;
|
||||
chatMessages.innerHTML = '';
|
||||
chatInput.value = '';
|
||||
|
||||
chatModal.classList.remove('hidden');
|
||||
chatInput.focus();
|
||||
|
||||
// Add welcome message
|
||||
addMessage('ai', `Hello! I'm ${modelName}. How can I help you today?`);
|
||||
}
|
||||
|
||||
function closeChatModal() {
|
||||
// Defensive programming - ensure modal exists
|
||||
if (chatModal) {
|
||||
chatModal.classList.add('hidden');
|
||||
// Additional safety - ensure all chat state is cleared
|
||||
currentChatModel = null;
|
||||
currentEndpointUrl = null;
|
||||
currentApiKey = null;
|
||||
|
||||
// Clear chat messages when closing
|
||||
if (chatMessages) {
|
||||
chatMessages.innerHTML = '';
|
||||
}
|
||||
|
||||
// Clear input
|
||||
if (chatInput) {
|
||||
chatInput.value = '';
|
||||
}
|
||||
|
||||
// Disable send button
|
||||
if (sendMessageButton) {
|
||||
sendMessageButton.disabled = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addMessage(role, content) {
|
||||
const messageDiv = document.createElement('div');
|
||||
messageDiv.className = `chat-message ${role}`;
|
||||
messageDiv.textContent = content;
|
||||
chatMessages.appendChild(messageDiv);
|
||||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||||
}
|
||||
|
||||
function sendMessage() {
|
||||
const message = chatInput.value.trim();
|
||||
if (!message || !currentChatModel) return;
|
||||
|
||||
// Add user message
|
||||
addMessage('user', message);
|
||||
chatInput.value = '';
|
||||
sendMessageButton.disabled = true;
|
||||
|
||||
// Add AI response placeholder for streaming
|
||||
const aiMessageDiv = document.createElement('div');
|
||||
aiMessageDiv.className = 'chat-message ai streaming';
|
||||
aiMessageDiv.textContent = 'Thinking...';
|
||||
chatMessages.appendChild(aiMessageDiv);
|
||||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||||
|
||||
// Construct chat completions endpoint URL
|
||||
let chatUrl = currentEndpointUrl;
|
||||
if (chatUrl.endsWith('/chat/completions')) {
|
||||
// Already correct format
|
||||
} else if (chatUrl.endsWith('/v1')) {
|
||||
chatUrl = `${chatUrl}/chat/completions`;
|
||||
} else {
|
||||
chatUrl = `${chatUrl.replace(/\/$/, '')}/v1/chat/completions`;
|
||||
}
|
||||
|
||||
// Prepare the request body for direct API call
|
||||
const requestBody = {
|
||||
model: currentChatModel,
|
||||
messages: [
|
||||
{ role: 'user', content: message }
|
||||
],
|
||||
stream: false // Set to true for streaming support if needed
|
||||
};
|
||||
|
||||
// Set up headers
|
||||
const headers = {
|
||||
'Content-Type': 'application/json'
|
||||
};
|
||||
|
||||
if (currentApiKey) {
|
||||
headers['Authorization'] = `Bearer ${currentApiKey}`;
|
||||
}
|
||||
|
||||
// Make direct API call
|
||||
fetch(chatUrl, {
|
||||
method: 'POST',
|
||||
headers: headers,
|
||||
body: JSON.stringify(requestBody)
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
return response.text().then(errorText => {
|
||||
throw new Error(`HTTP error! status: ${response.status}, details: ${errorText}`);
|
||||
});
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
// Remove streaming placeholder
|
||||
chatMessages.removeChild(aiMessageDiv);
|
||||
|
||||
// Extract the response content
|
||||
const content = data.choices && data.choices[0] && data.choices[0].message
|
||||
? data.choices[0].message.content
|
||||
: 'No response received.';
|
||||
|
||||
// Add actual AI response
|
||||
const responseDiv = document.createElement('div');
|
||||
responseDiv.className = 'chat-message ai';
|
||||
responseDiv.textContent = content;
|
||||
chatMessages.appendChild(responseDiv);
|
||||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||||
})
|
||||
.catch(error => {
|
||||
// Remove streaming placeholder
|
||||
chatMessages.removeChild(aiMessageDiv);
|
||||
|
||||
// Add error message
|
||||
const errorDiv = document.createElement('div');
|
||||
errorDiv.className = 'chat-message ai';
|
||||
errorDiv.textContent = `Error: ${error.message}`;
|
||||
chatMessages.appendChild(errorDiv);
|
||||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||||
})
|
||||
.finally(() => {
|
||||
sendMessageButton.disabled = false;
|
||||
});
|
||||
}
|
||||
|
||||
function showLoading() {
|
||||
loadingDiv.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function hideLoading() {
|
||||
loadingDiv.classList.add('hidden');
|
||||
}
|
||||
|
||||
function showError(message, type = 'error') {
|
||||
errorMessageDiv.textContent = message;
|
||||
errorMessageDiv.classList.remove('hidden');
|
||||
|
||||
// Add success styling for success messages
|
||||
if (type === 'success') {
|
||||
errorMessageDiv.style.backgroundColor = '#27ae60';
|
||||
} else {
|
||||
errorMessageDiv.style.backgroundColor = '#e74c3c';
|
||||
}
|
||||
|
||||
// Auto-hide success messages after 3 seconds
|
||||
if (type === 'success') {
|
||||
setTimeout(() => {
|
||||
hideError();
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
|
||||
function hideError() {
|
||||
errorMessageDiv.classList.add('hidden');
|
||||
}
|
||||
|
||||
function showResults() {
|
||||
resultsDiv.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function hideResults() {
|
||||
resultsDiv.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
468
static/style.css
Normal file
468
static/style.css
Normal file
|
|
@ -0,0 +1,468 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
header p {
|
||||
color: #7f8c8d;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.input-section {
|
||||
background: white;
|
||||
padding: 25px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Server Management Section */
|
||||
.server-section {
|
||||
background: white;
|
||||
padding: 25px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.server-section h3 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Server Selector Container with Settings Button */
|
||||
.server-selector-container {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.settings-btn {
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 15px;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.settings-btn:hover {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
|
||||
/* Server Management Modal Styles */
|
||||
#server-modal .modal-content {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.server-list {
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.server-list h4 {
|
||||
margin-bottom: 10px;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
#server-list-items {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#server-list-items li {
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 5px;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
#server-list-items li:hover {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
|
||||
.server-input-group,
|
||||
.server-select-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.server-input-group label,
|
||||
.server-select-group label {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.input-section label {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
#endpoint-url,
|
||||
#server-url,
|
||||
#server-api-key,
|
||||
#server-name {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 15px;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
#endpoint-url:focus,
|
||||
#server-url:focus,
|
||||
#server-api-key:focus,
|
||||
#server-name:focus {
|
||||
outline: none;
|
||||
border-color: #3498db;
|
||||
}
|
||||
|
||||
#fetch-button,
|
||||
#add-server,
|
||||
#remove-server {
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
#fetch-button:hover,
|
||||
#add-server:hover,
|
||||
#remove-server:hover {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
|
||||
#fetch-button:disabled {
|
||||
background-color: #bdc3c7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Server Selector Styling */
|
||||
#server-selector {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 15px;
|
||||
transition: border-color 0.3s;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#server-selector:focus {
|
||||
outline: none;
|
||||
border-color: #3498db;
|
||||
}
|
||||
|
||||
/* Server Button Styling */
|
||||
#add-server,
|
||||
#remove-server {
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#add-server:hover,
|
||||
#remove-server:hover {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
|
||||
/* Green button for add */
|
||||
#add-server {
|
||||
background-color: #27ae60;
|
||||
}
|
||||
|
||||
#add-server:hover {
|
||||
background-color: #219653;
|
||||
}
|
||||
|
||||
/* Red button for remove */
|
||||
#remove-server {
|
||||
background-color: #e74c3c;
|
||||
}
|
||||
|
||||
#remove-server:hover {
|
||||
background-color: #c0392b;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid #3498db;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto 15px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.error {
|
||||
background-color: #e74c3c;
|
||||
color: white;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.results {
|
||||
background: white;
|
||||
padding: 25px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.results h2 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.model-item {
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 6px;
|
||||
padding: 15px;
|
||||
margin-bottom: 10px;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.model-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.model-name {
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.model-id {
|
||||
color: #7f8c8d;
|
||||
font-family: monospace;
|
||||
font-size: 0.9em;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.input-section,
|
||||
.results {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Chat Modal Styles */
|
||||
.modal {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Ensure hidden modals are completely invisible and don't interfere with page interaction */
|
||||
.modal.hidden {
|
||||
display: none !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
width: 90%;
|
||||
max-width: 600px;
|
||||
max-height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.close {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.close:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 20px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 20px;
|
||||
min-height: 300px;
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.chat-message {
|
||||
margin-bottom: 15px;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.chat-message.user {
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.chat-message.ai {
|
||||
background-color: #f8f9fa;
|
||||
color: #333;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.chat-input-container {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
#chat-input {
|
||||
flex: 1;
|
||||
padding: 12px;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
#chat-input:focus {
|
||||
outline: none;
|
||||
border-color: #3498db;
|
||||
}
|
||||
|
||||
#send-message {
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 20px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
#send-message:hover:not(:disabled) {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
|
||||
#send-message:disabled {
|
||||
background-color: #bdc3c7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.chat-message.streaming {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.modal-content {
|
||||
width: 95%;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
min-height: 200px;
|
||||
max-height: 300px;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue