Upload 7 files

Dockerfile

@@ -0,0 +1,25 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements first to leverage Docker cache
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application
+COPY app/ ./app/
+
+# Set environment variables
+ENV PORT=7860
+ENV HOST=0.0.0.0
+
+# Expose the port
+EXPOSE 7860
+
+# Command to run the application
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860"] 

app/main.py

@@ -0,0 +1,62 @@
+from fastapi import FastAPI, Request
+from fastapi.templating import Jinja2Templates
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import JSONResponse
+from optimum.neuron import utils
+
+app = FastAPI()
+
+# Mount static files and templates
+app.mount("/static", StaticFiles(directory="app/static"), name="static")
+templates = Jinja2Templates(directory="app/templates")
+
+@app.get("/health")
+async def health_check():
+    return {"status": "healthy"}
+
+@app.get("/")
+async def home(request: Request):
+    return templates.TemplateResponse("index.html", {"request": request})
+
+@app.get("/api/models")
+async def get_model_list():
+    try:
+        # Get actual model configurations
+        model_list = utils.get_hub_cached_models(mode="inference")
+        
+        # Transform the data into the expected format
+        models = []
+        seen_models = set()
+        
+        for model_tuple in model_list:
+            architecture, org, model_id = model_tuple
+            full_model_id = f"{org}/{model_id}"
+            
+            if full_model_id not in seen_models:
+                models.append({
+                    "id": full_model_id,
+                    "name": full_model_id,  # This will be used as the title
+                    "type": architecture     # This will be used as the subtitle
+                })
+                seen_models.add(full_model_id)
+                
+        return JSONResponse(content=models)
+    except Exception as e:
+        return JSONResponse(
+            status_code=500,
+            content={"error": str(e)}
+        )
+
+@app.get("/api/models/{model_id}")
+async def get_model_info_endpoint(model_id: str):
+    try:
+        configs = utils.get_hub_cached_entries(model_id=model_id, mode="inference")
+        # Return empty list if no configurations found
+        if not configs:
+            return JSONResponse(content={"configurations": []})
+        return JSONResponse(content={"configurations": configs})
+    except Exception as e:
+        return JSONResponse(
+            status_code=500,
+            content={"error": str(e)}
+        ) 

app/static/css/styles.css

@@ -0,0 +1,328 @@
+:root {
+    --primary: #4a6bdf;
+    --primary-dark: #3a56b2;
+    --secondary: #f8f9fa;
+    --text: #333;
+    --text-light: #555;
+    --border: #e0e0e0;
+    --card-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    --transition: all 0.3s ease;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+body {
+    background-color: #f5f7fa;
+    color: var(--text);
+    line-height: 1.6;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+/* Component 1: Search Section */
+.search-section {
+    background: white;
+    border-radius: 10px;
+    padding: 30px;
+    margin-bottom: 30px;
+    box-shadow: var(--card-shadow);
+    text-align: center;
+    transition: var(--transition);
+}
+
+.search-section:hover {
+    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
+}
+
+.search-section h1 {
+    font-size: 2.5rem;
+    margin-bottom: 10px;
+    color: var(--primary);
+}
+
+.search-section p {
+    font-size: 1.1rem;
+    color: var(--text-light);
+    margin-bottom: 25px;
+}
+
+.search-box {
+    display: flex;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.search-box input {
+    flex: 1;
+    padding: 15px 20px;
+    border: 1px solid var(--border);
+    border-radius: 50px 0 0 50px;
+    font-size: 1rem;
+    outline: none;
+    transition: var(--transition);
+}
+
+.search-box input:focus {
+    border-color: var(--primary);
+}
+
+.search-box button {
+    padding: 0 25px;
+    background-color: var(--primary);
+    color: white;
+    border: none;
+    border-radius: 0 50px 50px 0;
+    cursor: pointer;
+    font-size: 1rem;
+    transition: var(--transition);
+}
+
+.search-box button:hover {
+    background-color: var(--primary-dark);
+}
+
+/* Component 2: Model Grid */
+.model-grid-section {
+    background: white;
+    border-radius: 10px;
+    padding: 30px;
+    margin-bottom: 30px;
+    box-shadow: var(--card-shadow);
+}
+
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 25px;
+}
+
+.section-header h2 {
+    font-size: 1.8rem;
+    color: var(--primary);
+}
+
+.model-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+    margin-bottom: 30px;
+}
+
+.model-card {
+    background: white;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 20px;
+    transition: var(--transition);
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+
+.model-card:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--card-shadow);
+    border-color: var(--primary);
+}
+
+.model-card h3 {
+    font-size: 1.3rem;
+    margin-bottom: 8px;
+    color: var(--primary);
+    font-weight: 600;
+}
+
+.model-card .subtitle {
+    color: var(--text-light);
+    font-size: 0.9rem;
+    margin-bottom: 12px;
+    font-weight: 500;
+}
+
+.model-card p {
+    color: var(--text-light);
+    font-size: 0.9rem;
+    margin-bottom: 5px;
+}
+
+.model-card .meta {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 15px;
+    font-size: 0.85rem;
+    color: var(--text-light);
+    border-top: 1px solid var(--border);
+    padding-top: 12px;
+}
+
+.pagination {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.pagination button {
+    padding: 8px 16px;
+    background-color: var(--primary);
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: var(--transition);
+}
+
+.pagination button:disabled {
+    background-color: #ccc;
+    cursor: not-allowed;
+}
+
+.pagination button:hover:not(:disabled) {
+    background-color: var(--primary-dark);
+}
+
+/* Component 3: Configuration Details */
+.config-section {
+    background: white;
+    border-radius: 10px;
+    padding: 30px;
+    margin-bottom: 30px;
+    box-shadow: var(--card-shadow);
+    display: none;
+    animation: fadeIn 0.5s ease;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.config-section.active {
+    display: block;
+}
+
+.config-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.config-header h3 {
+    font-size: 1.5rem;
+    color: var(--primary);
+}
+
+.config-list {
+    display: grid;
+    gap: 15px;
+}
+
+.config-card {
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 20px;
+}
+
+.config-card h4 {
+    font-size: 1.1rem;
+    margin-bottom: 10px;
+    color: var(--primary-dark);
+}
+
+.config-details {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.config-group {
+    background: var(--secondary);
+    border-radius: 6px;
+    padding: 15px;
+}
+
+.config-group h5 {
+    color: var(--primary);
+    font-size: 1rem;
+    margin-bottom: 12px;
+    font-weight: 600;
+}
+
+.detail-item {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+    padding: 4px 0;
+    border-bottom: 1px solid var(--border);
+}
+
+.detail-item:last-child {
+    border-bottom: none;
+}
+
+.detail-item strong {
+    color: var(--text);
+    font-weight: 500;
+}
+
+.detail-item span {
+    color: var(--text-light);
+}
+
+/* Empty State */
+.empty-state {
+    text-align: center;
+    padding: 40px 20px;
+    color: var(--text-light);
+}
+
+.empty-state i {
+    font-size: 3rem;
+    margin-bottom: 20px;
+    color: var(--border);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .model-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .search-section h1 {
+        font-size: 2rem;
+    }
+    
+    .section-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 15px;
+    }
+}
+
+/* Loading spinner */
+.spinner {
+    display: none;
+    width: 40px;
+    height: 40px;
+    margin: 20px auto;
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    border-top: 4px solid var(--primary);
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+} 

app/static/js/main.js

@@ -0,0 +1,217 @@
+let models = [];
+let currentPage = 1;
+const modelsPerPage = 10;
+
+// DOM Elements
+const modelGrid = document.getElementById('modelGrid');
+const configSection = document.getElementById('configSection');
+const configList = document.getElementById('configList');
+const selectedModelId = document.getElementById('selectedModelId');
+const configModelTitle = document.getElementById('configModelTitle');
+const noConfig = document.getElementById('noConfig');
+const prevPageBtn = document.getElementById('prevPage');
+const nextPageBtn = document.getElementById('nextPage');
+const pageInfo = document.getElementById('pageInfo');
+const searchButton = document.getElementById('searchButton');
+const modelIdSearch = document.getElementById('modelIdSearch');
+const closeConfig = document.getElementById('closeConfig');
+const loadingModels = document.getElementById('loadingModels');
+const loadingConfig = document.getElementById('loadingConfig');
+
+// Fetch models from the API
+async function fetchModels() {
+    loadingModels.style.display = 'block';
+    
+    try {
+        const response = await fetch('/api/models');
+        const data = await response.json();
+        models = data;
+        renderModels();
+        updatePagination();
+    } catch (error) {
+        console.error('Error fetching models:', error);
+        alert('Failed to fetch models. Please try again later.');
+    } finally {
+        loadingModels.style.display = 'none';
+    }
+}
+
+// Fetch configurations for a specific model
+async function showModelConfigurations(modelId) {
+    configSection.style.display = 'block';
+    selectedModelId.textContent = modelId;
+    configList.innerHTML = '';
+    loadingConfig.style.display = 'block';
+    noConfig.style.display = 'none';
+
+    try {
+        const response = await fetch(`/api/models/${modelId}`);
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+        const configs = data.configurations;
+
+        if (!configs || configs.length === 0) {
+            noConfig.style.display = 'block';
+            configList.innerHTML = '';
+        } else {
+            configs.forEach((config, idx) => {
+                const configCard = document.createElement('div');
+                configCard.className = 'config-card';
+                
+                // Group related configurations
+                const groups = {
+                    'Model Information': {
+                        'checkpoint_id': config.checkpoint_id,
+                        'checkpoint_revision': config.checkpoint_revision,
+                        'task': config.task
+                    },
+                    'Hardware Configuration': {
+                        'num_cores': config.num_cores,
+                        'auto_cast_type': config.auto_cast_type
+                    },
+                    'Compiler Settings': {
+                        'compiler_type': config.compiler_type,
+                        'compiler_version': config.compiler_version
+                    },
+                    'Model Parameters': {
+                        'batch_size': config.batch_size,
+                        'sequence_length': config.sequence_length
+                    }
+                };
+
+                let detailsHtml = '';
+                for (const [groupName, groupFields] of Object.entries(groups)) {
+                    detailsHtml += `
+                        <div class="config-group">
+                            <h5>${groupName}</h5>
+                            ${Object.entries(groupFields)
+                                .map(([key, value]) => `
+                                    <div class="detail-item">
+                                        <strong>${key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}:</strong>
+                                        <span>${value}</span>
+                                    </div>
+                                `).join('')}
+                        </div>
+                    `;
+                }
+                
+                configCard.innerHTML = `
+                    <h4>Configuration ${idx + 1}</h4>
+                    <div class="config-details">
+                        ${detailsHtml}
+                    </div>
+                `;
+                configList.appendChild(configCard);
+            });
+        }
+    } catch (error) {
+        console.error('Error fetching configurations:', error);
+        noConfig.style.display = 'block';
+        noConfig.innerHTML = `
+            <i class="fas fa-exclamation-circle"></i>
+            <h4>Error loading configurations</h4>
+            <p>Failed to fetch configurations. Please try again later.</p>
+        `;
+        configList.innerHTML = '';
+    } finally {
+        loadingConfig.style.display = 'none';
+    }
+}
+
+// Initialize the page
+document.addEventListener('DOMContentLoaded', () => {
+    fetchModels();
+    
+    // Add event listeners
+    document.getElementById('searchButton').addEventListener('click', handleSearch);
+    document.getElementById('prevPage').addEventListener('click', goToPrevPage);
+    document.getElementById('nextPage').addEventListener('click', goToNextPage);
+    document.getElementById('closeConfig').addEventListener('click', () => {
+        document.getElementById('configSection').style.display = 'none';
+    });
+});
+
+function renderModels() {
+    loadingModels.style.display = 'block';
+    modelGrid.innerHTML = '';
+    
+    // Simulate API delay
+    setTimeout(() => {
+        const startIdx = (currentPage - 1) * modelsPerPage;
+        const endIdx = startIdx + modelsPerPage;
+        const paginatedModels = models.slice(startIdx, endIdx);
+        
+        if (paginatedModels.length === 0) {
+            modelGrid.innerHTML = `
+                <div class="empty-state">
+                    <i class="fas fa-exclamation-circle"></i>
+                    <h4>No models available</h4>
+                    <p>There are currently no models to display.</p>
+                </div>
+            `;
+        } else {
+            paginatedModels.forEach(model => {
+                const modelCard = document.createElement('div');
+                modelCard.className = 'model-card';
+                modelCard.innerHTML = `
+                    <h3>${model.name}</h3>
+                    <p class="subtitle">Architecture: ${model.type}</p>
+                `;
+                modelCard.addEventListener('click', () => showModelConfigurations(model.id));
+                modelGrid.appendChild(modelCard);
+            });
+        }
+        
+        loadingModels.style.display = 'none';
+    }, 500);
+}
+
+function getModelIcon(type) {
+    switch(type.toLowerCase()) {
+        case 'regression': return 'fa-chart-line';
+        case 'classification': return 'fa-tags';
+        case 'ensemble': return 'fa-layer-group';
+        case 'forecasting': return 'fa-calendar-alt';
+        case 'clustering': return 'fa-object-group';
+        default: return 'fa-cube';
+    }
+}
+
+function handleSearch() {
+    const searchTerm = modelIdSearch.value.trim();
+    if (!searchTerm) {
+        alert('Please enter a Model ID');
+        return;
+    }
+    
+    // Show configurations for the searched model
+    showModelConfigurations(searchTerm);
+}
+
+function updatePagination() {
+    const totalPages = Math.ceil(models.length / modelsPerPage);
+    
+    prevPageBtn.disabled = currentPage <= 1;
+    nextPageBtn.disabled = currentPage >= totalPages;
+    pageInfo.textContent = `Page ${currentPage} of ${totalPages}`;
+}
+
+function goToPrevPage() {
+    if (currentPage > 1) {
+        currentPage--;
+        renderModels();
+        updatePagination();
+    }
+}
+
+function goToNextPage() {
+    const totalPages = Math.ceil(models.length / modelsPerPage);
+    
+    if (currentPage < totalPages) {
+        currentPage++;
+        renderModels();
+        updatePagination();
+    }
+} 

app/templates/index.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Model Configuration Explorer</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="{{ url_for('static', path='/css/styles.css') }}">
+</head>
+<body>
+    <div class="container">
+        <!-- Component 1: Search Section -->
+        <section class="search-section">
+            <h1>Model Configuration Explorer</h1>
+            <p>Search for model configurations by entering a Model ID below</p>
+            <div class="search-box">
+                <input type="text" id="modelIdSearch" placeholder="Enter Model ID (e.g., MODEL123)">
+                <button id="searchButton"><i class="fas fa-search"></i> Search</button>
+            </div>
+        </section>
+
+        <!-- Component 2: Model Grid -->
+        <section class="model-grid-section">
+            <div class="section-header">
+                <h2><i class="fas fa-list"></i> Available Models</h2>
+            </div>
+            
+            <div id="modelGrid" class="model-grid">
+                <!-- Models will be populated here -->
+            </div>
+            
+            <div id="loadingModels" class="spinner"></div>
+            
+            <div class="pagination">
+                <button id="prevPage" disabled><i class="fas fa-chevron-left"></i> Previous</button>
+                <span id="pageInfo">Page 1 of 1</span>
+                <button id="nextPage" disabled>Next <i class="fas fa-chevron-right"></i></button>
+            </div>
+        </section>
+
+        <!-- Component 3: Configuration Details -->
+        <section id="configSection" class="config-section">
+            <div class="config-header">
+                <h3 id="configModelTitle">Configurations for <span id="selectedModelId"></span></h3>
+                <button id="closeConfig" class="close-btn"><i class="fas fa-times"></i></button>
+            </div>
+            
+            <div id="configList" class="config-list">
+                <!-- Configurations will be populated here -->
+            </div>
+            
+            <div id="loadingConfig" class="spinner"></div>
+            
+            <div id="noConfig" class="empty-state">
+                <i class="far fa-folder-open"></i>
+                <h4>No configurations found</h4>
+                <p>This model has no saved configurations yet.</p>
+            </div>
+        </section>
+    </div>
+
+    <script src="{{ url_for('static', path='/js/main.js') }}"></script>
+</body>
+</html> 

docker-compose.yml

@@ -0,0 +1,10 @@
+version: '3.8'
+services:
+  web:
+    build: .
+    ports:
+      - "7860:7860"
+    environment:
+      - HF_TOKEN=${HF_TOKEN}
+    volumes:
+      - ./app:/app/app 

requirements.txt

@@ -0,0 +1,5 @@
+fastapi==0.104.1
+uvicorn==0.24.0
+jinja2==3.1.2
+optimum-neuron==0.1.0
+python-multipart==0.0.6