GGUF Model Editor (html pages) - Mungert69/GGUFModelBuilder GitHub Wiki

Frontend HTML Templates

Base Template

base.html

Purpose: Main layout template extended by all other pages

Features:

<!DOCTYPE html>
<html>
<head>
    <!-- Bootstrap CSS -->
    <!-- Custom styles -->
</head>
<body>
    {% with messages = get_flashed_messages() %}
        <!-- Flash message display -->
    {% endwith %}
    
    <nav class="navbar">
        <!-- Navigation bar -->
    </nav>
    
    <div class="container">
        {% block content %}{% endblock %}
    </div>
    
    <!-- Bootstrap JS -->
</body>
</html>

Navigation Bar Items:

  • 🏠 Home (index.html)
  • ➕ Add New Model (add_model.html)
  • 🔍 Search (search.html)
  • 📥 Import (import.html)
  • 📤 Export (direct download)
  • ♻️ Restore (restore.html)
  • ⚙️ Settings (settings.html)

Core Pages

1. index.html

Purpose: Main catalog listing

Features:

  • Paginated model display (20 items per page)
  • Status badges (✅ Converted / ⏳ Pending)
  • Edit links for each model
  • Pagination controls at bottom

Screenshot:

[Model ID]      [Status]      [Last Updated]
-------------------------------------------
model_001       ✅ Converted   2023-01-01 ▶
model_002       ⏳ Pending    2023-01-02 ▶
...
[Previous] [1] [2] [3] [Next]

2. edit_model.html

Purpose: Edit individual model details

Form Fields:

  • Model ID (display only)
  • Editable fields (dynamic based on model)
  • Save/Cancel buttons
  • ❌ Delete button (with confirmation modal)

Confirmation Dialog:

confirm("Are you sure you want to delete this model?");

3. add_model.html

Purpose: Create new model entry

Form Fields:

  • Required: Model ID
  • Optional: Additional metadata fields
  • Add/Cancel buttons

4. search.html

Purpose: Advanced model search

Search Types:

  1. By Model ID (exact match)
  2. Across All Fields (contains text)
  3. Specific Field (dropdown selector)

Results Display:

  • Paginated matches
  • Highlighted search terms
  • Edit links for each result

Import/Export Pages

5. import.html

Purpose: Bulk import models

Requirements:

{
    "models": ["id1", "id2", "id3"]
}
  • File upload input
  • Shows import summary after processing

6. restore.html

Purpose: Full catalog restore

Features:

  • Warning about data overwrite
  • JSON file upload
  • Restore confirmation button

Warning Message: ⚠️ This will replace ALL current models in the catalog!

Configuration Page

7. settings.html

Purpose: Redis connection configuration

Form Fields:

  • Host
  • Port
  • Username
  • Password (masked input)
  • SSL checkbox
  • Test Connection button
  • Save Settings button

Direct Download (No Template)

Export Functionality

  • Triggered from navbar
  • Returns application/json download
  • Filename: catalog_backup_YYYY-MM-DD.json

UI Components

Component Location Description
Status Badges index.html Color-coded model status indicators
Pagination index.html, search.html Page navigation controls
Field Highlighting search.html Yellow background for matched terms
Confirmation Modals edit_model.html Delete/restore verification
Flash Messages All pages Temporary status notifications
⚠️ **GitHub.com Fallback** ⚠️