diff --git "a/index.html" "b/index.html"
new file mode 100644--- /dev/null
+++ "b/index.html"
@@ -0,0 +1,3041 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AI Chatbot Assistant</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link
+      href="https://cdn.jsdelivr.net/npm/daisyui@3.1.0/dist/full.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-auth.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-database.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+    />
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <style>
+      body {
+        font-family: "Inter", sans-serif;
+      }
+      .chat-bubble-enter-active,
+      .chat-bubble-leave-active {
+        transition: all 0.3s ease;
+      }
+      .chat-bubble-enter,
+      .chat-bubble-leave-to {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      .typing-indicator {
+        display: inline-flex;
+        align-items: center;
+        padding: 12px 16px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border-radius: 18px;
+        color: white;
+      }
+      .typing-indicator span {
+        height: 8px;
+        width: 8px;
+        background: white;
+        border-radius: 50%;
+        display: inline-block;
+        margin: 0 2px;
+        animation: bounce 1.4s infinite ease-in-out both;
+      }
+      .typing-indicator span:nth-child(1) {
+        animation-delay: -0.32s;
+      }
+      .typing-indicator span:nth-child(2) {
+        animation-delay: -0.16s;
+      }
+      @keyframes bounce {
+        0%,
+        80%,
+        100% {
+          transform: scale(0.8);
+          opacity: 0.5;
+        }
+        40% {
+          transform: scale(1);
+          opacity: 1;
+        }
+      }
+      .gradient-bg {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      }
+      .message-area {
+        height: calc(100vh - 200px);
+        overflow-y: auto;
+        scrollbar-width: thin;
+        scrollbar-color: #cbd5e0 #f7fafc;
+      }
+      .message-area::-webkit-scrollbar {
+        width: 6px;
+      }
+      .message-area::-webkit-scrollbar-track {
+        background: #f7fafc;
+      }
+      .message-area::-webkit-scrollbar-thumb {
+        background: #cbd5e0;
+        border-radius: 3px;
+      }
+      .keyword-tag {
+        display: inline-flex;
+        align-items: center;
+        background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+        color: #0069d9;
+        padding: 0.25rem 0.75rem;
+        border-radius: 9999px;
+        font-size: 0.75rem;
+        font-weight: 500;
+        margin: 0.25rem;
+      }
+      .keyword-tag button {
+        background: none;
+        border: none;
+        color: #0069d9;
+        cursor: pointer;
+        margin-left: 0.25rem;
+        padding: 0;
+        font-size: 1rem;
+        line-height: 1;
+      }
+      .dataset-item {
+        background: #f8f9fa;
+        border-radius: 8px;
+        padding: 0.75rem;
+        margin-bottom: 0.5rem;
+        border-left: 3px solid #667eea;
+      }
+      .model-card {
+        transition: all 0.3s ease;
+      }
+      .model-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.15);
+      }
+      .toggle-switch {
+        position: relative;
+        width: 48px;
+        height: 24px;
+      }
+      .toggle-switch input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+      }
+      .toggle-switch .slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #cbd5e0;
+        transition: 0.3s;
+        border-radius: 24px;
+      }
+      .toggle-switch .slider:before {
+        position: absolute;
+        content: "";
+        height: 18px;
+        width: 18px;
+        left: 3px;
+        bottom: 3px;
+        background-color: white;
+        transition: 0.3s;
+        border-radius: 50%;
+      }
+      .toggle-switch input:checked + .slider {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      }
+      .toggle-switch input:checked + .slider:before {
+        transform: translateX(24px);
+      }
+    </style>
+  </head>
+  <body class="bg-gray-50">
+    <div id="app">
+      <div class="min-h-screen flex flex-col">
+        <!-- Header -->
+        <header class="gradient-bg shadow-lg">
+          <div class="container mx-auto px-4 py-4">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center space-x-3">
+                <span class="material-icons text-white text-3xl"
+                  >smart_toy</span
+                >
+                <h1 class="text-2xl font-bold text-white">AI Chat Assistant</h1>
+              </div>
+              <div class="flex items-center space-x-4">
+                <!-- Navigation Links -->
+                <a
+                  href="/"
+                  class="btn btn-sm btn-ghost text-white hover:bg-white/20 bg-white/20"
+                >
+                  <span class="material-icons">chat</span>
+                  <span class="hidden sm:inline">Chat</span>
+                </a>
+                <a
+                  href="/models"
+                  class="btn btn-sm btn-ghost text-white hover:bg-white/20"
+                >
+                  <span class="material-icons">psychology</span>
+                  <span class="hidden sm:inline">Models</span>
+                </a>
+                <span
+                  id="statsIcon"
+                  class="material-icons text-white cursor-pointer hover:scale-110 transition-transform"
+                  >analytics</span
+                >
+                <span
+                  id="mapIcon"
+                  class="material-icons text-white cursor-pointer hover:scale-110 transition-transform"
+                  >map</span
+                >
+                <span
+                  id="modelsBtn"
+                  class="material-icons text-white cursor-pointer hover:scale-110 transition-transform"
+                  style="display: none"
+                  >psychology</span
+                >
+                <button
+                  id="logoutBtn"
+                  style="display: none"
+                  class="btn btn-sm btn-error text-white"
+                >
+                  <span class="material-icons text-sm">logout</span> Logout
+                </button>
+              </div>
+            </div>
+          </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="flex-1 container mx-auto px-4 py-6">
+          <!-- Stats Modal -->
+          <div
+            id="statsModal"
+            style="display: none"
+            class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
+          >
+            <div
+              class="bg-white rounded-lg p-6 max-w-2xl w-full max-h-[80vh] overflow-y-auto"
+            >
+              <div class="flex justify-between items-center mb-4">
+                <h2 class="text-xl font-bold">Chat Analytics</h2>
+                <button id="closeStatsBtn" class="btn btn-sm btn-circle">
+                  <span class="material-icons">close</span>
+                </button>
+              </div>
+              <canvas id="statsChart" width="400" height="200"></canvas>
+            </div>
+          </div>
+
+          <!-- Map Modal -->
+          <div
+            id="mapModal"
+            style="display: none"
+            class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
+          >
+            <div class="bg-white rounded-lg p-6 max-w-2xl w-full">
+              <div class="flex justify-between items-center mb-4">
+                <h2 class="text-xl font-bold">Location</h2>
+                <button id="closeMapBtn" class="btn btn-sm btn-circle">
+                  <span class="material-icons">close</span>
+                </button>
+              </div>
+              <div
+                id="map"
+                style="height: 400px; width: 100%; border-radius: 8px"
+              ></div>
+            </div>
+          </div>
+
+          <!-- Models Management Modal -->
+          <div
+            id="modelsModal"
+            style="display: none"
+            class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
+          >
+            <div
+              class="bg-white rounded-lg p-6 max-w-4xl w-full max-h-[90vh] overflow-y-auto"
+            >
+              <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold">AI Models Management</h2>
+                <button id="closeModelsBtn" class="btn btn-sm btn-circle">
+                  <span class="material-icons">close</span>
+                </button>
+              </div>
+
+              <!-- Model Search Section -->
+              <div
+                class="bg-blue-50 rounded-lg p-4 mb-6 border border-blue-200"
+              >
+                <div class="flex items-center gap-2 mb-3">
+                  <span class="material-icons text-blue-600">search</span>
+                  <h3 class="font-semibold text-blue-900">
+                    Search HuggingFace Models
+                  </h3>
+                  <button
+                    id="refreshModelsBtn"
+                    onclick="refreshModelsRealtime()"
+                    class="btn btn-sm btn-ghost ml-auto"
+                    title="Refresh model info from HuggingFace"
+                  >
+                    <span class="material-icons text-sm">refresh</span>
+                    Refresh Models
+                  </button>
+                </div>
+                <div class="flex gap-2">
+                  <input
+                    id="modelSearchInput"
+                    type="text"
+                    class="input input-bordered input-sm flex-1"
+                    placeholder="Search models (e.g., 'code', 'chat', 'image')..."
+                  />
+                  <button
+                    id="searchModelsBtn"
+                    onclick="searchHFModels()"
+                    class="btn btn-primary btn-sm"
+                  >
+                    <span class="material-icons text-sm">search</span>
+                    Search
+                  </button>
+                </div>
+                <div id="searchResultsContainer" class="hidden mt-3"></div>
+              </div>
+
+              <!-- Add/Edit Model Form -->
+              <div class="bg-gray-50 rounded-lg p-6 mb-6">
+                <h3 id="modelFormTitle" class="font-semibold text-lg mb-4">
+                  Add New Model
+                </h3>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div class="form-control">
+                    <label class="label"
+                      ><span class="label-text">Model Name *</span></label
+                    >
+                    <input
+                      id="modelName"
+                      type="text"
+                      class="input input-bordered"
+                      placeholder="e.g., Code Assistant"
+                    />
+                  </div>
+                  <div class="form-control">
+                    <label class="label"
+                      ><span class="label-text"
+                        >HuggingFace Model ID *</span
+                      ></label
+                    >
+                    <div class="flex gap-2">
+                      <input
+                        id="modelId"
+                        type="text"
+                        class="input input-bordered flex-1"
+                        placeholder="e.g., meta-llama/Llama-3.2-3B-Instruct"
+                        value="meta-llama/Llama-3.2-3B-Instruct"
+                      />
+                      <button
+                        id="fetchModelInfoBtn"
+                        type="button"
+                        class="btn btn-outline btn-sm"
+                      >
+                        <span class="material-icons text-sm">sync</span>
+                        Fetch
+                      </button>
+                    </div>
+                    <div id="modelInfoStatus" class="text-xs mt-1"></div>
+                  </div>
+                  <div class="form-control">
+                    <label class="label"
+                      ><span class="label-text">Role *</span></label
+                    >
+                    <select id="modelRole" class="select select-bordered">
+                      <option value="assistant">Assistant</option>
+                      <option value="expert">Expert</option>
+                      <option value="coder">Coder</option>
+                      <option value="analyst">Analyst</option>
+                      <option value="teacher">Teacher</option>
+                      <option value="creative">Creative</option>
+                      <option value="custom">Custom</option>
+                    </select>
+                  </div>
+                  <div class="form-control">
+                    <label class="label"
+                      ><span class="label-text">Temperature</span></label
+                    >
+                    <input
+                      id="modelTemp"
+                      type="range"
+                      min="0"
+                      max="1"
+                      step="0.1"
+                      value="0.3"
+                      class="range"
+                    />
+                    <span id="tempValue" class="text-xs text-gray-500"
+                      >0.3</span
+                    >
+                  </div>
+                  <div class="form-control">
+                    <label class="label"
+                      ><span class="label-text">Max Tokens</span></label
+                    >
+                    <input
+                      id="modelMaxTokens"
+                      type="number"
+                      class="input input-bordered"
+                      placeholder="500"
+                      value="500"
+                    />
+                  </div>
+                  <div class="form-control flex items-center pt-6">
+                    <label class="flex items-center cursor-pointer">
+                      <div class="toggle-switch">
+                        <input id="modelEnabled" type="checkbox" checked />
+                        <span class="slider"></span>
+                      </div>
+                      <span class="ml-3">Enable Model</span>
+                    </label>
+                  </div>
+                  <div class="form-control md:col-span-2">
+                    <label class="label"
+                      ><span class="label-text">System Prompt</span></label
+                    >
+                    <textarea
+                      id="modelSystemPrompt"
+                      class="textarea textarea-bordered h-24"
+                      placeholder="Define the system behavior for this model..."
+                    ></textarea>
+                  </div>
+
+                  <!-- Keywords Section -->
+                  <div class="form-control md:col-span-2">
+                    <label class="label">
+                      <span class="label-text">Keywords</span>
+                      <span class="label-text-alt text-gray-400"
+                        >Auto-synced from HuggingFace</span
+                      >
+                    </label>
+                    <div
+                      id="keywordsContainer"
+                      class="flex flex-wrap gap-2 p-3 bg-white border rounded-lg min-h-[60px]"
+                    >
+                      <span class="text-gray-400 text-sm"
+                        >Click "Fetch" to load keywords from HuggingFace</span
+                      >
+                    </div>
+                    <div class="flex gap-2 mt-2">
+                      <input
+                        id="customKeyword"
+                        type="text"
+                        class="input input-bordered input-sm flex-1"
+                        placeholder="Add custom keyword..."
+                      />
+                      <button
+                        id="addKeywordBtn"
+                        type="button"
+                        class="btn btn-outline btn-sm"
+                      >
+                        <span class="material-icons text-sm">add</span>
+                      </button>
+                    </div>
+                  </div>
+
+                  <!-- Model Info Panel -->
+                  <div
+                    id="modelInfoPanel"
+                    class="md:col-span-2 bg-blue-50 rounded-lg p-4 hidden"
+                  >
+                    <h4 class="font-semibold text-blue-800 mb-2">
+                      <span class="material-icons text-sm align-middle mr-1"
+                        >info</span
+                      >
+                      Model Information
+                    </h4>
+                    <div
+                      id="modelInfoContent"
+                      class="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm"
+                    ></div>
+                  </div>
+                </div>
+                <div class="flex gap-2 mt-4">
+                  <button id="saveModelBtn" class="btn btn-primary flex-1">
+                    <span class="material-icons text-sm mr-1">add</span>
+                    Add Model
+                  </button>
+                  <button
+                    id="cancelEditBtn"
+                    style="display: none"
+                    class="btn btn-ghost"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+
+              <!-- Models List -->
+              <div id="modelsList"></div>
+            </div>
+          </div>
+
+          <!-- Preset Manager Modal -->
+          <div
+            id="presetManagerModal"
+            style="display: none"
+            class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
+          >
+            <div
+              class="bg-white rounded-lg p-6 max-w-4xl w-full max-h-[90vh] overflow-y-auto"
+            >
+              <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold flex items-center">
+                  <span class="material-icons mr-2">person_pin</span>
+                  Preset Manager
+                </h2>
+                <button id="closePresetManagerBtn" class="btn btn-sm btn-circle">
+                  <span class="material-icons">close</span>
+                </button>
+              </div>
+
+              <div class="mb-4 flex justify-end">
+                <button
+                  id="newPresetBtn"
+                  class="btn btn-primary"
+                >
+                  <span class="material-icons text-sm mr-1">add</span>
+                  Create New Preset
+                </button>
+              </div>
+
+              <div id="presetManagerContent">
+                <div class="text-center py-8 text-gray-500">Loading presets...</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Preset Editor Modal -->
+          <div
+            id="presetsModal"
+            style="display: none"
+            class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4"
+          >
+            <div
+              class="bg-white rounded-lg p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto"
+            >
+              <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold flex items-center">
+                  <span class="material-icons mr-2">edit</span>
+                  <span id="presetModalTitle">Create New Preset</span>
+                </h2>
+                <button id="closePresetsModalBtn" class="btn btn-sm btn-circle">
+                  <span class="material-icons">close</span>
+                </button>
+              </div>
+
+              <div class="space-y-4">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div class="form-control">
+                    <label class="label"><span class="label-text">Name *</span></label>
+                    <input
+                      id="presetName"
+                      type="text"
+                      class="input input-bordered"
+                      placeholder="e.g., Code Expert"
+                    />
+                  </div>
+                  <div class="form-control">
+                    <label class="label"><span class="label-text">Icon</span></label>
+                    <input
+                      id="presetIcon"
+                      type="text"
+                      class="input input-bordered"
+                      placeholder="🎯"
+                      value="🎯"
+                      maxlength="2"
+                    />
+                  </div>
+                </div>
+
+                <div class="form-control">
+                  <label class="label"><span class="label-text">Description</span></label>
+                  <input
+                    id="presetDescription"
+                    type="text"
+                    class="input input-bordered"
+                    placeholder="Brief description of this preset..."
+                  />
+                </div>
+
+                <div class="form-control">
+                  <label class="label"><span class="label-text">HuggingFace Model ID *</span></label>
+                  <input
+                    id="presetModelId"
+                    type="text"
+                    class="input input-bordered"
+                    placeholder="meta-llama/Llama-3.2-3B-Instruct"
+                    value="meta-llama/Llama-3.2-3B-Instruct"
+                  />
+                </div>
+
+                <div class="form-control">
+                  <label class="label"><span class="label-text">System Prompt *</span></label>
+                  <textarea
+                    id="presetSystemPrompt"
+                    class="textarea textarea-bordered h-24"
+                    placeholder="Define the AI's behavior and personality..."
+                  ></textarea>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div class="form-control">
+                    <label class="label"><span class="label-text">Temperature</span></label>
+                    <input
+                      id="presetTemperature"
+                      type="range"
+                      min="0.1"
+                      max="1"
+                      step="0.1"
+                      value="0.5"
+                      class="range"
+                    />
+                    <span id="presetTempValue" class="text-xs text-gray-500"
+                      >0.5</span
+                    >
+                  </div>
+                  <div class="form-control">
+                    <label class="label"><span class="label-text">Max Tokens</span></label>
+                    <input
+                      id="presetMaxTokens"
+                      type="number"
+                      class="input input-bordered"
+                      placeholder="500"
+                      value="500"
+                    />
+                  </div>
+                </div>
+
+                <!-- Keywords Section -->
+                <div class="form-control">
+                  <label class="label">
+                    <span class="label-text">Keywords for Auto-Routing</span>
+                    <span class="label-text-alt text-gray-400"
+                      >Add keywords to automatically select this preset</span
+                    >
+                  </label>
+                  <div
+                    id="presetKeywordsContainer"
+                    class="flex flex-wrap gap-2 p-3 bg-white border rounded-lg min-h-[60px]"
+                  >
+                    <span class="text-gray-400 text-sm">No keywords</span>
+                  </div>
+                  <div class="flex gap-2 mt-2">
+                    <input
+                      id="presetKeywordInput"
+                      type="text"
+                      class="input input-bordered input-sm flex-1"
+                      placeholder="Add keyword..."
+                    />
+                    <button
+                      id="addPresetKeywordBtn"
+                      type="button"
+                      class="btn btn-outline btn-sm"
+                    >
+                      <span class="material-icons text-sm">add</span>
+                    </button>
+                  </div>
+                </div>
+
+                <!-- Datasets Section -->
+                <div class="form-control">
+                  <label class="label">
+                    <span class="label-text font-medium cursor-pointer" onclick="toggleDatasetAccordion()">
+                      <span class="material-icons text-sm align-middle">folder_open</span>
+                      Datasets (Optional)
+                    </label>
+                  </label>
+                  <div id="presetDatasetAccordion" class="hidden bg-gray-50 rounded-lg p-4">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-2 mb-2">
+                      <input
+                        id="presetDatasetName"
+                        type="text"
+                        class="input input-bordered input-sm"
+                        placeholder="Dataset name..."
+                      />
+                      <input
+                        id="presetDatasetUrl"
+                        type="text"
+                        class="input input-bordered input-sm"
+                        placeholder="Dataset URL..."
+                      />
+                    </div>
+                    <button
+                      id="addPresetDatasetBtn"
+                      type="button"
+                      class="btn btn-outline btn-sm"
+                    >
+                      <span class="material-icons text-sm mr-1">add</span>
+                      Add Dataset
+                    </button>
+                    <div id="presetDatasetsContainer" class="mt-3">
+                      <span class="text-gray-400 text-sm">No datasets added</span>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="flex gap-2 pt-4 border-t">
+                  <button id="presetSaveBtn" class="btn btn-primary flex-1">
+                    <span class="material-icons text-sm mr-1">save</span>
+                    Save Preset
+                  </button>
+                  <button id="presetCancelBtn" class="btn btn-ghost">
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Auth Section -->
+          <div id="authSection" class="max-w-md mx-auto">
+            <div class="bg-white rounded-lg shadow-lg p-8">
+              <div class="text-center mb-6">
+                <span class="material-icons text-6xl text-purple-500"
+                  >chat</span
+                >
+                <h2 class="text-2xl font-bold mt-4">Welcome to AI Chat</h2>
+                <p class="text-gray-600 mt-2">
+                  Sign in to start chatting with our AI assistant
+                </p>
+              </div>
+              <button
+                id="signInBtn"
+                class="btn btn-primary w-full gradient-bg border-0 text-white hover:opacity-90 transition-opacity"
+              >
+                <span class="material-icons mr-2">person_outline</span> Continue
+                as Guest
+              </button>
+            </div>
+          </div>
+
+          <!-- Chat Interface -->
+          <div id="chatSection" style="display: none" class="flex gap-4 h-full">
+            <div class="flex-1 bg-white rounded-lg shadow-lg flex flex-col">
+              <div class="border-b p-4">
+                <div class="flex items-center justify-between">
+                  <div class="flex items-center space-x-3">
+                    <div
+                      class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center"
+                    >
+                      <span class="material-icons text-white">smart_toy</span>
+                    </div>
+                    <div>
+                      <h3 id="selectedModelName" class="font-semibold">
+                        AI Assistant
+                      </h3>
+                      <p id="selectedModelRole" class="text-sm text-gray-500">
+                        Powered by Llama 3.2
+                      </p>
+                    </div>
+                  </div>
+                  <div class="flex items-center gap-2 dropdown dropdown-end">
+                    <select
+                      id="presetSelect"
+                      class="select select-bordered select-sm min-w-[180px]"
+                    >
+                      <option value="">No Preset</option>
+                    </select>
+                    <select
+                      id="modelSelect"
+                      class="select select-bordered select-sm min-w-[180px]"
+                      onchange="selectModel(this.value)"
+                    >
+                      <option value="">Default (Auto-route)</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Model Quick Switcher Bar -->
+              <div
+                id="modelSwitcherBar"
+                class="border-b px-4 py-2 bg-gray-50 hidden"
+              >
+                <div class="flex items-center gap-2 overflow-x-auto">
+                  <span class="text-xs text-gray-500 whitespace-nowrap"
+                    >Quick switch:</span
+                  >
+                  <div id="modelQuickSwitcher" class="flex gap-2"></div>
+                </div>
+              </div>
+
+              <!-- Messages Area -->
+              <div
+                class="message-area flex-1 p-4 space-y-4"
+                id="messageArea"
+              ></div>
+
+              <!-- Input Area -->
+              <div class="border-t p-4">
+                <!-- Chat Mode Tabs -->
+                <div class="tabs tabs-boxed mb-3 bg-gray-100">
+                  <button
+                    id="modeChat"
+                    class="tab tab-active"
+                    onclick="setChatMode('chat')"
+                  >
+                    <span class="material-icons text-sm mr-1">chat</span>Chat
+                  </button>
+                  <button
+                    id="modeTextGen"
+                    class="tab"
+                    onclick="setChatMode('text-generation')"
+                  >
+                    <span class="material-icons text-sm mr-1">text_fields</span
+                    >Text
+                  </button>
+                  <button
+                    id="modeImage"
+                    class="tab"
+                    onclick="setChatMode('image-generation')"
+                  >
+                    <span class="material-icons text-sm mr-1">image</span>Image
+                  </button>
+                  <button
+                    id="modeTranslate"
+                    class="tab"
+                    onclick="setChatMode('translation')"
+                  >
+                    <span class="material-icons text-sm mr-1">translate</span
+                    >Translate
+                  </button>
+                  <button
+                    id="modeQA"
+                    class="tab"
+                    onclick="setChatMode('question-answering')"
+                  >
+                    <span class="material-icons text-sm mr-1">quiz</span>Q&A
+                  </button>
+                  <button
+                    id="modeSummary"
+                    class="tab"
+                    onclick="setChatMode('summarization')"
+                  >
+                    <span class="material-icons text-sm mr-1">summarize</span
+                    >Summary
+                  </button>
+                </div>
+
+                <!-- Context Input (for QA mode) -->
+                <div id="contextInputArea" class="hidden mb-3">
+                  <label class="label"
+                    ><span class="label-text text-xs"
+                      >Context (for Q&A)</span
+                    ></label
+                  >
+                  <textarea
+                    id="contextInput"
+                    class="textarea textarea-bordered w-full h-20 text-sm"
+                    placeholder="Paste the context text here for question answering..."
+                  ></textarea>
+                </div>
+
+                <!-- Translation Options -->
+                <div id="translationOptions" class="hidden mb-3">
+                  <div class="flex gap-2">
+                    <select
+                      id="translateModel"
+                      class="select select-bordered select-sm flex-1"
+                    >
+                      <option value="Helsinki-NLP/opus-mt-en-zh">
+                        English → Chinese
+                      </option>
+                      <option value="Helsinki-NLP/opus-mt-en-ja">
+                        English → Japanese
+                      </option>
+                      <option value="Helsinki-NLP/opus-mt-en-ko">
+                        English → Korean
+                      </option>
+                      <option value="Helsinki-NLP/opus-mt-en-fr">
+                        English → French
+                      </option>
+                      <option value="Helsinki-NLP/opus-mt-en-de">
+                        English → German
+                      </option>
+                      <option value="Helsinki-NLP/opus-mt-en-es">
+                        English → Spanish
+                      </option>
+                      <option value="Helsinki-NLP/opus-mt-zh-en">
+                        Chinese → English
+                      </option>
+                      <option value="Helsinki-NLP/opus-mt-ja-en">
+                        Japanese → English
+                      </option>
+                    </select>
+                  </div>
+                </div>
+
+                <!-- Image Generation Options -->
+                <div id="imageOptions" class="hidden mb-3">
+                  <div class="flex gap-2">
+                    <input
+                      id="negativePrompt"
+                      type="text"
+                      class="input input-bordered input-sm flex-1"
+                      placeholder="Negative prompt (what to avoid)..."
+                    />
+                    <select
+                      id="imageModel"
+                      class="select select-bordered select-sm"
+                    >
+                      <option value="stabilityai/stable-diffusion-xl-base-1.0">
+                        SDXL Base
+                      </option>
+                      <option value="runwayml/stable-diffusion-v1-5">
+                        SD v1.5
+                      </option>
+                      <option value="CompVis/stable-diffusion-v1-4">
+                        SD v1.4
+                      </option>
+                    </select>
+                  </div>
+                </div>
+
+                <div class="flex space-x-2">
+                  <input
+                    id="messageInput"
+                    type="text"
+                    placeholder="Type your message..."
+                    class="flex-1 input input-bordered focus:outline-none focus:ring-2 focus:ring-purple-500"
+                  />
+                  <button
+                    id="sendBtn"
+                    class="btn btn-primary gradient-bg border-0 text-white hover:opacity-90 transition-opacity"
+                  >
+                    <span class="material-icons">send</span>
+                  </button>
+                </div>
+                <div class="flex justify-center mt-2 space-x-2 flex-wrap">
+                  <button id="quickReply1" class="btn btn-xs btn-outline">
+                    👋 Hello
+                  </button>
+                  <button id="quickReply2" class="btn btn-xs btn-outline">
+                    😄 Joke
+                  </button>
+                  <button id="quickReply3" class="btn btn-xs btn-outline">
+                    💻 Coding
+                  </button>
+                  <button id="quickReply4" class="btn btn-xs btn-outline">
+                    🤖 AI
+                  </button>
+                  <button id="quickReply5" class="btn btn-xs btn-outline">
+                    📚 Story
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <!-- Sidebar -->
+            <div class="w-80 bg-white rounded-lg shadow-lg p-4 hidden lg:block">
+              <h3 class="font-semibold mb-4 flex items-center">
+                <span class="material-icons mr-2">history</span> Chat History
+              </h3>
+              <div
+                id="chatHistory"
+                class="space-y-2 max-h-48 overflow-y-auto"
+              ></div>
+
+              <div class="mt-6 pt-6 border-t">
+                <h3 class="font-semibold mb-3 flex items-center">
+                  <span class="material-icons mr-2">psychology</span> Active
+                  Models
+                </h3>
+                <div
+                  id="activeModels"
+                  class="space-y-2 max-h-48 overflow-y-auto"
+                ></div>
+                <button
+                  id="manageModelsBtn"
+                  class="btn btn-sm btn-outline w-full mt-3"
+                >
+                  <span class="material-icons text-sm">add</span> Manage Models
+                </button>
+                <button
+                  id="managePresetsBtn"
+                  class="btn btn-sm btn-outline w-full mt-2"
+                >
+                  <span class="material-icons text-sm">person_pin</span> Manage Presets
+                </button>
+              </div>
+
+              <div class="mt-6 pt-6 border-t">
+                <h3 class="font-semibold mb-3 flex items-center">
+                  <span class="material-icons mr-2">share</span> Share Chat
+                </h3>
+                <button id="shareBtn" class="btn btn-sm btn-outline w-full">
+                  <span class="material-icons text-sm">share</span> Share
+                  Conversation
+                </button>
+              </div>
+
+              <div class="mt-4">
+                <h3 class="font-semibold mb-3 flex items-center">
+                  <span class="material-icons mr-2">settings</span> Global
+                  Settings
+                </h3>
+                <label class="label"
+                  ><span class="label-text">API Key</span></label
+                >
+                <input
+                  id="apiKey"
+                  type="password"
+                  class="input input-bordered input-sm w-full mb-2"
+                  placeholder="HuggingFace API Key"
+                  value=""
+                />
+                <label class="label"
+                  ><span class="label-text">Temperature</span></label
+                >
+                <select
+                  id="globalTemp"
+                  class="select select-bordered select-sm w-full"
+                >
+                  <option value="0.1">Precise (0.1)</option>
+                  <option value="0.3" selected>Balanced (0.3)</option>
+                  <option value="0.5">Creative (0.5)</option>
+                  <option value="0.7">Very Creative (0.7)</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+
+    <script>
+      // Default Firebase config (will be overridden by settings)
+      let firebaseConfig = {
+        apiKey: "AIzaSyCvkk4P_PPidbmxql863MJI0VDt4GdGdPk",
+        authDomain: "ai-assistant-fbfb7.firebaseapp.com",
+        projectId: "ai-assistant-fbfb7",
+        storageBucket: "ai-assistant-fbfb7.firebasestorage.app",
+        messagingSenderId: "19639341578",
+        appId: "1:19639341578:web:88545e8fe038656a1745f3",
+        measurementId: "G-6F1GP7V42N",
+      };
+
+      // Settings storage
+      let appSettings = {};
+      let modelSettings = { models: [] };
+
+      // Initialize Firebase (will be reinitialized after loading settings)
+      firebase.initializeApp(firebaseConfig);
+      let auth = firebase.auth();
+      let database = firebase.database();
+
+      const app = {
+        user: null,
+        messages: [],
+        models: [],
+        chatSessions: [],
+        currentSessionId: null,
+        selectedModelId: "",
+        editingModelId: null,
+        isTyping: false,
+        chatMode: "chat", // chat, text-generation, image-generation, translation, question-answering, summarization
+        // Preset/Persona state
+        presets: [],
+        userPresets: [],
+        curatedPresets: [],
+        activePresetId: "",
+        editingPresetId: null,
+        presetKeywords: [],
+        presetDatasets: [],
+      };
+
+      // Curated presets - available offline
+      const CURATED_PRESETS = [
+        {
+          id: "curated-helper",
+          name: "Helpful Assistant",
+          icon: "🤖",
+          modelId: "meta-llama/Llama-3.2-3B-Instruct",
+          systemPrompt: "You are a helpful, friendly, and knowledgeable AI assistant. You provide clear, accurate, and concise answers to questions. You are polite and respectful.",
+          temperature: 0.3,
+          maxTokens: 500,
+          keywords: ["help", "assistant", "general", "question", "answer"],
+          isCustom: false,
+          description: "General purpose helper for everyday tasks"
+        },
+        {
+          id: "curated-coder",
+          name: "Code Expert",
+          icon: "💻",
+          modelId: "meta-llama/Llama-3.2-3B-Instruct",
+          systemPrompt: "You are an expert programmer with deep knowledge of multiple programming languages, algorithms, and best practices. You provide clean, well-documented code with explanations.",
+          temperature: 0.2,
+          maxTokens: 800,
+          keywords: ["code", "programming", "bug", "debug", "function", "class", "algorithm", "software"],
+          isCustom: false,
+          description: "Expert programming help and code review"
+        },
+        {
+          id: "curated-creative",
+          name: "Creative Writer",
+          icon: "✨",
+          modelId: "NousResearch/Hermes-3-Llama-3.1-8B",
+          systemPrompt: "You are a creative writer with a vivid imagination and a flair for storytelling. You help users craft engaging narratives, poems, stories, and creative content.",
+          temperature: 0.8,
+          maxTokens: 1000,
+          keywords: ["story", "creative", "write", "poem", "narrative", "imagine", "fiction"],
+          isCustom: false,
+          description: "Creative writing and storytelling assistance"
+        },
+        {
+          id: "curated-teacher",
+          name: "Learning Tutor",
+          icon: "📚",
+          modelId: "meta-llama/Llama-3.2-3B-Instruct",
+          systemPrompt: "You are a patient and encouraging teacher who explains complex concepts clearly. You use analogies, examples, and step-by-step explanations to help learners understand.",
+          temperature: 0.3,
+          maxTokens: 600,
+          keywords: ["teach", "learn", "explain", "concept", "understand", "tutorial", "education"],
+          isCustom: false,
+          description: "Patient educational assistance and tutoring"
+        },
+        {
+          id: "curated-analyst",
+          name: "Data Analyst",
+          icon: "📊",
+          modelId: "meta-llama/Llama-3.2-3B-Instruct",
+          systemPrompt: "You are a data analyst who helps interpret data, identify patterns, and provide insights. You are thorough, analytical, and data-driven in your approach.",
+          temperature: 0.2,
+          maxTokens: 700,
+          keywords: ["data", "analyze", "statistics", "insight", "pattern", "report", "metrics"],
+          isCustom: false,
+          description: "Data analysis and interpretation"
+        }
+      ];
+
+      // Toast notification system
+      function showToast(message, type = "info", duration = 3000) {
+        // Remove existing toasts
+        const existingContainer = document.getElementById("toastContainer");
+        if (existingContainer) {
+          existingContainer.remove();
+        }
+
+        // Create toast container
+        const container = document.createElement("div");
+        container.id = "toastContainer";
+        container.className = "fixed top-4 right-4 z-50 flex flex-col gap-2";
+
+        // Create toast element
+        const toast = document.createElement("div");
+        const typeClasses = {
+          success: "bg-success text-white",
+          error: "bg-error text-white",
+          info: "bg-info text-white",
+          warning: "bg-warning text-black"
+        };
+
+        toast.className = `alert ${typeClasses[type] || typeClasses.info} shadow-lg max-w-md`;
+        toast.innerHTML = `<span>${message}</span>`;
+
+        container.appendChild(toast);
+        document.body.appendChild(container);
+
+        // Auto dismiss
+        setTimeout(() => {
+          toast.remove();
+          if (container.children.length === 0) {
+            container.remove();
+          }
+        }, duration);
+      }
+
+      document.addEventListener("DOMContentLoaded", async () => {
+        await loadAllSettings();
+        setupEventListeners();
+        setupAuthListener();
+        loadApiKey();
+      });
+
+      async function loadAllSettings() {
+        try {
+          // Load model settings
+          const modelResponse = await fetch("/api/settings/models");
+          if (modelResponse.ok) {
+            modelSettings = await modelResponse.json();
+            console.log("Model settings loaded:", modelSettings);
+          }
+
+          // Load app settings
+          const appResponse = await fetch("/api/settings/app");
+          if (appResponse.ok) {
+            appSettings = await appResponse.json();
+            console.log("App settings loaded:", appSettings);
+          }
+        } catch (error) {
+          console.error("Error loading settings:", error);
+        }
+      }
+
+      function setupEventListeners() {
+        document
+          .getElementById("signInBtn")
+          .addEventListener("click", signInAnonymously);
+        document.getElementById("logoutBtn").addEventListener("click", logout);
+        document
+          .getElementById("statsIcon")
+          .addEventListener("click", () => toggleModal("statsModal"));
+        document
+          .getElementById("mapIcon")
+          .addEventListener("click", () => toggleModal("mapModal"));
+        document
+          .getElementById("modelsBtn")
+          .addEventListener("click", () => toggleModal("modelsModal"));
+        document
+          .getElementById("closeStatsBtn")
+          .addEventListener("click", () => toggleModal("statsModal"));
+        document
+          .getElementById("closeMapBtn")
+          .addEventListener("click", () => toggleModal("mapModal"));
+        document
+          .getElementById("closeModelsBtn")
+          .addEventListener("click", () => toggleModal("modelsModal"));
+        document
+          .getElementById("manageModelsBtn")
+          .addEventListener("click", () => toggleModal("modelsModal"));
+        document
+          .getElementById("sendBtn")
+          .addEventListener("click", sendMessage);
+        document
+          .getElementById("messageInput")
+          .addEventListener("keyup", (e) => {
+            if (e.key === "Enter") sendMessage();
+          });
+        document
+          .getElementById("shareBtn")
+          .addEventListener("click", shareChat);
+        document
+          .getElementById("quickReply1")
+          .addEventListener("click", () => quickReply("Hello!"));
+        document
+          .getElementById("quickReply2")
+          .addEventListener("click", () => quickReply("Tell me a joke"));
+        document
+          .getElementById("quickReply3")
+          .addEventListener("click", () => quickReply("Help me with coding"));
+        document
+          .getElementById("quickReply4")
+          .addEventListener("click", () => quickReply("Explain AI"));
+        document
+          .getElementById("quickReply5")
+          .addEventListener("click", () => quickReply("Write a story"));
+        document
+          .getElementById("saveModelBtn")
+          .addEventListener("click", saveModel);
+        document
+          .getElementById("cancelEditBtn")
+          .addEventListener("click", cancelEditModel);
+        document.getElementById("modelTemp").addEventListener("input", (e) => {
+          document.getElementById("tempValue").textContent = e.target.value;
+        });
+        document.getElementById("apiKey").addEventListener("change", (e) => {
+          localStorage.setItem("huggingface_api_key", e.target.value);
+        });
+        // Model info and keywords event listeners
+        document
+          .getElementById("fetchModelInfoBtn")
+          .addEventListener("click", fetchModelInfo);
+        document
+          .getElementById("addKeywordBtn")
+          .addEventListener("click", addCustomKeyword);
+        document
+          .getElementById("customKeyword")
+          .addEventListener("keyup", (e) => {
+            if (e.key === "Enter") addCustomKeyword();
+          });
+
+        // Preset-related event listeners
+        const presetSelect = document.getElementById("presetSelect");
+        if (presetSelect) {
+          presetSelect.addEventListener("change", (e) => {
+            const presetId = e.target.value;
+            if (presetId) {
+              selectPreset(presetId);
+            } else {
+              clearPreset();
+            }
+          });
+        }
+
+        const managePresetsBtn = document.getElementById("managePresetsBtn");
+        if (managePresetsBtn) {
+          managePresetsBtn.addEventListener("click", () => toggleModal("presetManagerModal"));
+        }
+
+        const closePresetManagerBtn = document.getElementById("closePresetManagerBtn");
+        if (closePresetManagerBtn) {
+          closePresetManagerBtn.addEventListener("click", () => toggleModal("presetManagerModal"));
+        }
+
+        const closePresetsModalBtn = document.getElementById("closePresetsModalBtn");
+        if (closePresetsModalBtn) {
+          closePresetsModalBtn.addEventListener("click", () => toggleModal("presetsModal"));
+        }
+
+        const presetSaveBtn = document.getElementById("presetSaveBtn");
+        if (presetSaveBtn) {
+          presetSaveBtn.addEventListener("click", savePreset);
+        }
+
+        const presetCancelBtn = document.getElementById("presetCancelBtn");
+        if (presetCancelBtn) {
+          presetCancelBtn.addEventListener("click", () => {
+            resetPresetForm();
+            toggleModal("presetsModal");
+          });
+        }
+
+        const presetTempInput = document.getElementById("presetTemperature");
+        if (presetTempInput) {
+          presetTempInput.addEventListener("input", (e) => {
+            document.getElementById("presetTempValue").textContent = e.target.value;
+          });
+        }
+
+        const presetKeywordBtn = document.getElementById("addPresetKeywordBtn");
+        if (presetKeywordBtn) {
+          presetKeywordBtn.addEventListener("click", addPresetKeyword);
+        }
+
+        const presetKeywordInput = document.getElementById("presetKeywordInput");
+        if (presetKeywordInput) {
+          presetKeywordInput.addEventListener("keyup", (e) => {
+            if (e.key === "Enter") addPresetKeyword();
+          });
+        }
+
+        const presetDatasetBtn = document.getElementById("addPresetDatasetBtn");
+        if (presetDatasetBtn) {
+          presetDatasetBtn.addEventListener("click", addPresetDataset);
+        }
+
+        const newPresetBtn = document.getElementById("newPresetBtn");
+        if (newPresetBtn) {
+          newPresetBtn.addEventListener("click", () => {
+            resetPresetForm();
+            toggleModal("presetsModal");
+          });
+        }
+      }
+
+      // Keywords state
+      let modelKeywords = [];
+
+      async function fetchModelInfo() {
+        const modelId = document.getElementById("modelId").value.trim();
+        const statusEl = document.getElementById("modelInfoStatus");
+        const infoPanel = document.getElementById("modelInfoPanel");
+        const infoContent = document.getElementById("modelInfoContent");
+
+        if (!modelId) {
+          statusEl.innerHTML =
+            '<span class="text-red-500">Please enter a model ID</span>';
+          return;
+        }
+
+        statusEl.innerHTML =
+          '<span class="text-blue-500"><span class="loading loading-spinner loading-xs"></span> Fetching...</span>';
+
+        try {
+          const response = await fetch(
+            `/api/model-info?model_id=${encodeURIComponent(modelId)}`,
+          );
+          const data = await response.json();
+
+          if (data.error) {
+            throw new Error(data.error);
+          }
+
+          // Update keywords
+          modelKeywords = data.keywords || [];
+          renderKeywords();
+
+          // Update model name if empty
+          const nameInput = document.getElementById("modelName");
+          if (!nameInput.value.trim()) {
+            nameInput.value = modelId.split("/").pop();
+          }
+
+          // Show model info panel
+          infoPanel.classList.remove("hidden");
+          infoContent.innerHTML = `
+            <div class="bg-white rounded p-2">
+              <span class="text-gray-500 text-xs">Author</span>
+              <p class="font-medium">${data.author || "Unknown"}</p>
+            </div>
+            <div class="bg-white rounded p-2">
+              <span class="text-gray-500 text-xs">Task</span>
+              <p class="font-medium">${data.pipeline_tag || "N/A"}</p>
+            </div>
+            <div class="bg-white rounded p-2">
+              <span class="text-gray-500 text-xs">Downloads</span>
+              <p class="font-medium">${formatNumber(data.downloads)}</p>
+            </div>
+            <div class="bg-white rounded p-2">
+              <span class="text-gray-500 text-xs">Likes</span>
+              <p class="font-medium">❤️ ${formatNumber(data.likes)}</p>
+            </div>
+          `;
+
+          statusEl.innerHTML =
+            '<span class="text-green-500">✓ Model info loaded</span>';
+        } catch (error) {
+          console.error("Error fetching model info:", error);
+          statusEl.innerHTML = `<span class="text-red-500">Error: ${error.message}</span>`;
+          infoPanel.classList.add("hidden");
+        }
+      }
+
+      function renderKeywords() {
+        const container = document.getElementById("keywordsContainer");
+
+        if (modelKeywords.length === 0) {
+          container.innerHTML =
+            '<span class="text-gray-400 text-sm">No keywords. Click "Fetch" or add custom keywords.</span>';
+          return;
+        }
+
+        container.innerHTML = modelKeywords
+          .map(
+            (keyword, index) => `
+          <span class="keyword-tag">
+            ${keyword}
+            <button onclick="removeKeyword(${index})" class="ml-1 hover:text-red-500">&times;</button>
+          </span>
+        `,
+          )
+          .join("");
+      }
+
+      function removeKeyword(index) {
+        modelKeywords.splice(index, 1);
+        renderKeywords();
+      }
+
+      function addCustomKeyword() {
+        const input = document.getElementById("customKeyword");
+        const keyword = input.value.trim().toLowerCase();
+
+        if (keyword && !modelKeywords.includes(keyword)) {
+          modelKeywords.push(keyword);
+          renderKeywords();
+          input.value = "";
+        }
+      }
+
+      function formatNumber(num) {
+        if (num >= 1000000) return (num / 1000000).toFixed(1) + "M";
+        if (num >= 1000) return (num / 1000).toFixed(1) + "K";
+        return num.toString();
+      }
+
+      function setupAuthListener() {
+        auth.onAuthStateChanged((user) => {
+          if (user) {
+            app.user = user;
+            console.log("User authenticated:", user.uid);
+            showChatInterface();
+            loadModels();
+            loadPresets();
+            setupPresetFirebaseListeners();
+            loadChatSessions();
+            startNewSession();
+          } else {
+            hideChatInterface();
+          }
+        });
+      }
+
+      function toggleModal(modalId) {
+        const modal = document.getElementById(modalId);
+        modal.style.display = modal.style.display === "none" ? "flex" : "none";
+      }
+
+      function showChatInterface() {
+        document.getElementById("authSection").style.display = "none";
+        document.getElementById("chatSection").style.display = "flex";
+        document.getElementById("modelsBtn").style.display = "block";
+        document.getElementById("logoutBtn").style.display = "block";
+      }
+
+      function hideChatInterface() {
+        document.getElementById("authSection").style.display = "block";
+        document.getElementById("chatSection").style.display = "none";
+        document.getElementById("modelsBtn").style.display = "none";
+        document.getElementById("logoutBtn").style.display = "none";
+      }
+
+      async function signInAnonymously() {
+        try {
+          const result = await auth.signInAnonymously();
+          console.log("Anonymous sign-in success:", result.user.uid);
+        } catch (error) {
+          console.error("Error signing in anonymously:", error);
+        }
+      }
+
+      function logout() {
+        auth
+          .signOut()
+          .catch((error) => console.error("Error signing out:", error));
+      }
+
+      async function loadModels() {
+        try {
+          // Combine models from settings file and Firebase
+          let allModels = [];
+
+          // Load from settings file
+          if (modelSettings.models && modelSettings.models.length > 0) {
+            allModels = [...modelSettings.models];
+          }
+
+          // Load from Firebase if user is authenticated
+          if (app.user) {
+            try {
+              const snapshot = await database
+                .ref(`users/${app.user.uid}/models`)
+                .once("value");
+              const firebaseData = snapshot.val() || {};
+              const firebaseModels = Object.entries(firebaseData).map(
+                ([id, model]) => ({
+                  id,
+                  ...model,
+                }),
+              );
+
+              // Merge Firebase models (avoid duplicates by ID)
+              firebaseModels.forEach((fbModel) => {
+                const existingIndex = allModels.findIndex(
+                  (m) => m.id === fbModel.id,
+                );
+                if (existingIndex >= 0) {
+                  // Update existing model with Firebase data if newer
+                  if (fbModel.updatedAt > allModels[existingIndex].updatedAt) {
+                    allModels[existingIndex] = fbModel;
+                  }
+                } else {
+                  allModels.push(fbModel);
+                }
+              });
+            } catch (fbError) {
+              console.log("Firebase models not available:", fbError.message);
+            }
+          }
+
+          app.models = allModels;
+          renderModels();
+          renderModelSelect();
+        } catch (error) {
+          console.error("Error loading models:", error);
+        }
+      }
+
+      function renderModels() {
+        const modelsList = document.getElementById("modelsList");
+        if (app.models.length === 0) {
+          modelsList.innerHTML =
+            '<div class="text-center py-12 bg-gray-50 rounded-lg"><span class="material-icons text-6xl text-gray-300">psychology</span><p class="text-gray-500 mt-4">No models configured yet. Add your first AI model above!</p></div>';
+          return;
+        }
+        modelsList.innerHTML = `<h3 class="font-semibold text-lg mb-4">Your Models (${app.models.length})</h3><div class="grid grid-cols-1 md:grid-cols-2 gap-4">${app.models.map((model) => `<div class="model-card bg-white border rounded-lg p-4 ${model.enabled ? "border-green-400 bg-green-50" : "border-gray-200"}"><div class="flex justify-between items-start mb-2"><div><h4 class="font-semibold flex items-center">${model.name}<span class="badge badge-sm ml-2 ${model.enabled ? "badge-success" : "badge-ghost"}">${model.enabled ? "Active" : "Disabled"}</span></h4><p class="text-sm text-gray-500">${model.role} • ${model.modelId.split("/").pop()}</p></div><div class="flex gap-1"><button class="btn btn-sm btn-ghost btn-circle" onclick="editModel('${model.id}')"><span class="material-icons text-sm">edit</span></button><button class="btn btn-sm btn-ghost btn-circle text-red-500" onclick="deleteModel('${model.id}')"><span class="material-icons text-sm">delete</span></button></div></div><p class="text-xs text-gray-400 truncate">${model.systemPrompt || "No system prompt"}</p></div>`).join("")}</div>`;
+      }
+
+      function renderModelSelect() {
+        const select = document.getElementById("modelSelect");
+        const enabledModels = app.models.filter((m) => m.enabled);
+
+        // Get default model from settings
+        const defaultModelId =
+          modelSettings.defaultModel || "meta-llama/Llama-3.2-3B-Instruct";
+
+        select.innerHTML =
+          `<option value="">Default (${defaultModelId.split("/").pop()})</option>` +
+          enabledModels
+            .map(
+              (model) =>
+                `<option value="${model.id}" ${app.selectedModelId === model.id ? "selected" : ""}>${model.name} (${model.role})</option>`,
+            )
+            .join("");
+
+        // Render quick switcher bar
+        renderQuickSwitcher(enabledModels);
+
+        // Also render active models in sidebar
+        renderActiveModels();
+
+        // Update header with selected model info
+        updateSelectedModelDisplay();
+      }
+
+      function renderQuickSwitcher(models) {
+        const bar = document.getElementById("modelSwitcherBar");
+        const container = document.getElementById("modelQuickSwitcher");
+
+        if (!models || models.length === 0) {
+          bar.classList.add("hidden");
+          return;
+        }
+
+        bar.classList.remove("hidden");
+        container.innerHTML = models
+          .slice(0, 5)
+          .map(
+            (model) => `
+          <button 
+            onclick="selectModel('${model.id}')" 
+            class="btn btn-xs ${app.selectedModelId === model.id ? "btn-primary" : "btn-ghost"} whitespace-nowrap"
+          >
+            <span class="material-icons text-xs mr-1">${getRoleIcon(model.role)}</span>
+            ${model.name}
+          </button>
+        `,
+          )
+          .join("");
+      }
+
+      function renderActiveModels() {
+        const container = document.getElementById("activeModels");
+        const enabledModels = app.models.filter((m) => m.enabled);
+
+        if (enabledModels.length === 0) {
+          container.innerHTML =
+            '<p class="text-sm text-gray-400">No active models</p>';
+          return;
+        }
+
+        container.innerHTML = enabledModels
+          .map(
+            (model) => `
+          <div class="p-2 rounded-lg cursor-pointer transition-all hover:bg-purple-50 ${app.selectedModelId === model.id ? "bg-purple-100 border-2 border-purple-400" : "bg-gray-50 border border-gray-200"}"
+               onclick="selectModel('${model.id}')">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center space-x-2">
+                <div class="w-8 h-8 rounded-full ${app.selectedModelId === model.id ? "gradient-bg" : "bg-gray-300"} flex items-center justify-center">
+                  <span class="material-icons text-white text-sm">${getRoleIcon(model.role)}</span>
+                </div>
+                <div>
+                  <p class="text-sm font-medium">${model.name}</p>
+                  <p class="text-xs text-gray-500">${model.role}</p>
+                </div>
+              </div>
+              ${app.selectedModelId === model.id ? '<span class="material-icons text-purple-500 text-sm">check_circle</span>' : ""}
+            </div>
+          </div>
+        `,
+          )
+          .join("");
+      }
+
+      function getRoleIcon(role) {
+        const icons = {
+          assistant: "smart_toy",
+          expert: "school",
+          coder: "code",
+          analyst: "analytics",
+          teacher: "menu_book",
+          creative: "palette",
+          custom: "settings",
+        };
+        return icons[role] || "smart_toy";
+      }
+
+      // Auto-routing function - find best matching model/preset based on keywords
+      function findMatchingModel(message, presetId = null) {
+        const messageLower = message.toLowerCase();
+        const words = messageLower.split(/\s+/).filter(w => w.length > 2);
+
+        // If a preset is specified, check its keywords first
+        if (presetId) {
+          const preset = app.presets.find(p => p.id === presetId);
+          if (preset && preset.keywords) {
+            const presetMatches = preset.keywords.filter(kw =>
+              messageLower.includes(kw.toLowerCase())
+            );
+            if (presetMatches.length > 0) {
+              return preset.modelId;
+            }
+          }
+        }
+
+        // Fall back to checking model keywords
+        let bestMatch = null;
+        let bestScore = 0;
+
+        for (const model of app.models.filter(m => m.enabled)) {
+          if (!model.keywords) continue;
+
+          let score = 0;
+          for (const keyword of model.keywords) {
+            const kwLower = keyword.toLowerCase();
+            if (messageLower.includes(kwLower)) {
+              score += 1;
+              // Boost score for exact word matches
+              if (words.includes(kwLower)) {
+                score += 1;
+              }
+            }
+          }
+
+          if (score > bestScore) {
+            bestScore = score;
+            bestMatch = model.modelId;
+          }
+        }
+
+        return bestMatch || (modelSettings.defaultModel || "meta-llama/Llama-3.2-3B-Instruct");
+      }
+
+      // ============ Preset/Persona Functions ============
+
+      // Load presets from Firebase and merge with curated presets
+      async function loadPresets() {
+        try {
+          app.curatedPresets = [...CURATED_PRESETS];
+          app.userPresets = [];
+
+          if (app.user) {
+            try {
+              const snapshot = await database
+                .ref(`users/${app.user.uid}/presets`)
+                .once("value");
+              const firebaseData = snapshot.val() || {};
+              app.userPresets = Object.entries(firebaseData).map(
+                ([id, preset]) => ({
+                  id,
+                  ...preset,
+                  isCustom: true
+                })
+              );
+            } catch (fbError) {
+              console.log("Firebase presets not available:", fbError.message);
+            }
+          }
+
+          // Load active preset from settings
+          if (app.user) {
+            try {
+              const activeSnapshot = await database
+                .ref(`users/${app.user.uid}/settings/activePresetId`)
+                .once("value");
+              app.activePresetId = activeSnapshot.val() || "";
+            } catch (e) {
+              console.log("Could not load active preset:", e);
+            }
+          }
+
+          updatePresetsList();
+        } catch (error) {
+          console.error("Error loading presets:", error);
+        }
+      }
+
+      // Set up Firebase real-time listeners for presets
+      function setupPresetFirebaseListeners() {
+        if (!app.user) return;
+
+        const presetsRef = database.ref(`users/${app.user.uid}/presets`);
+
+        presetsRef.on("child_added", (snapshot) => {
+          const preset = { id: snapshot.key, ...snapshot.val(), isCustom: true };
+          const existingIndex = app.userPresets.findIndex(p => p.id === preset.id);
+          if (existingIndex < 0) {
+            app.userPresets.push(preset);
+            updatePresetsList();
+          }
+        });
+
+        presetsRef.on("child_changed", (snapshot) => {
+          const preset = { id: snapshot.key, ...snapshot.val(), isCustom: true };
+          const index = app.userPresets.findIndex(p => p.id === preset.id);
+          if (index >= 0) {
+            app.userPresets[index] = preset;
+            updatePresetsList();
+          }
+        });
+
+        presetsRef.on("child_removed", (snapshot) => {
+          app.userPresets = app.userPresets.filter(p => p.id !== snapshot.key);
+          updatePresetsList();
+        });
+      }
+
+      // Update combined presets list and re-render
+      function updatePresetsList() {
+        app.presets = [...app.curatedPresets, ...app.userPresets];
+        renderPresetSelector();
+        renderPresetManager();
+
+        // Apply active preset if set
+        if (app.activePresetId) {
+          applyPreset(app.activePresetId);
+        }
+      }
+
+      // Select a preset and save to Firebase
+      async function selectPreset(presetId) {
+        app.activePresetId = presetId;
+
+        if (app.user) {
+          await database
+            .ref(`users/${app.user.uid}/settings/activePresetId`)
+            .set(presetId);
+        }
+
+        // Save to current session
+        if (app.currentSessionId) {
+          await database
+            .ref(`chats/${app.user.uid}/${app.currentSessionId}/presetId`)
+            .set(presetId);
+        }
+
+        applyPreset(presetId);
+        showToast("Preset applied successfully", "success");
+      }
+
+      // Apply preset settings to current session
+      function applyPreset(presetId) {
+        const preset = app.presets.find(p => p.id === presetId);
+        if (!preset) return;
+
+        // Update header display
+        document.getElementById("selectedModelName").textContent = preset.name;
+        document.getElementById("selectedModelRole").textContent = preset.description || preset.modelId.split("/").pop();
+
+        // Update model select dropdown
+        const modelSelect = document.getElementById("modelSelect");
+        modelSelect.value = presetId;
+
+        console.log("Applied preset:", preset.name);
+      }
+
+      // Get the currently active preset
+      function getActivePreset() {
+        return app.presets.find(p => p.id === app.activePresetId) || null;
+      }
+
+      // Clear active preset
+      async function clearPreset() {
+        app.activePresetId = "";
+
+        if (app.user) {
+          await database
+            .ref(`users/${app.user.uid}/settings/activePresetId`)
+            .set("");
+        }
+
+        const modelSelect = document.getElementById("modelSelect");
+        modelSelect.value = "";
+
+        updateSelectedModelDisplay();
+        showToast("Preset cleared", "info");
+      }
+
+      // Save a preset to Firebase
+      async function savePreset() {
+        const name = document.getElementById("presetName").value.trim();
+        const modelId = document.getElementById("presetModelId").value.trim();
+        const systemPrompt = document.getElementById("presetSystemPrompt").value.trim();
+        const description = document.getElementById("presetDescription").value.trim();
+        const icon = document.getElementById("presetIcon").value.trim() || "🎯";
+        const temperature = parseFloat(document.getElementById("presetTemperature").value);
+        const maxTokens = parseInt(document.getElementById("presetMaxTokens").value);
+
+        if (!name || !modelId || !systemPrompt) {
+          showToast("Please fill in required fields", "error");
+          return;
+        }
+
+        const id = app.editingPresetId || `preset-${Date.now()}`;
+        const presetData = {
+          id,
+          name,
+          description,
+          icon,
+          modelId,
+          systemPrompt,
+          temperature,
+          maxTokens,
+          keywords: app.presetKeywords,
+          datasets: app.presetDatasets,
+          isCustom: true,
+          createdAt: app.editingPresetId ? undefined : Date.now(),
+          updatedAt: Date.now(),
+        };
+
+        try {
+          // Validate with backend
+          const validationResponse = await fetch("/api/presets/validate", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(presetData),
+          });
+
+          if (!validationResponse.ok) {
+            const error = await validationResponse.json();
+            throw new Error(error.error || "Validation failed");
+          }
+
+          // Save to Firebase if user is authenticated
+          if (app.user) {
+            await database
+              .ref(`users/${app.user.uid}/presets/${id}`)
+              .set(presetData);
+            console.log("Preset saved to Firebase");
+          }
+
+          resetPresetForm();
+          toggleModal("presetsModal");
+          showToast("Preset saved successfully!", "success");
+        } catch (error) {
+          console.error("Error saving preset:", error);
+          showToast("Error saving preset: " + error.message, "error");
+        }
+      }
+
+      // Delete a preset
+      async function deletePreset(presetId) {
+        const preset = app.presets.find(p => p.id === presetId);
+        if (preset && !preset.isCustom) {
+          showToast("Cannot delete curated presets", "warning");
+          return;
+        }
+
+        if (!confirm("Are you sure you want to delete this preset?")) return;
+
+        try {
+          if (app.user) {
+            await database
+              .ref(`users/${app.user.uid}/presets/${presetId}`)
+              .remove();
+          }
+
+          if (app.activePresetId === presetId) {
+            clearPreset();
+          }
+
+          showToast("Preset deleted successfully", "success");
+        } catch (error) {
+          console.error("Error deleting preset:", error);
+          showToast("Error deleting preset", "error");
+        }
+      }
+
+      // Edit a preset
+      function editPreset(presetId) {
+        const preset = app.presets.find(p => p.id === presetId);
+        if (!preset) return;
+
+        app.editingPresetId = presetId;
+        document.getElementById("presetName").value = preset.name;
+        document.getElementById("presetDescription").value = preset.description || "";
+        document.getElementById("presetIcon").value = preset.icon || "🎯";
+        document.getElementById("presetModelId").value = preset.modelId;
+        document.getElementById("presetSystemPrompt").value = preset.systemPrompt || "";
+        document.getElementById("presetTemperature").value = preset.temperature;
+        document.getElementById("presetMaxTokens").value = preset.maxTokens;
+        document.getElementById("presetTempValue").textContent = preset.temperature;
+
+        app.presetKeywords = preset.keywords || [];
+        renderPresetKeywords();
+
+        app.presetDatasets = preset.datasets || [];
+        renderPresetDatasets();
+
+        document.getElementById("presetSaveBtn").textContent = "Update Preset";
+        toggleModal("presetsModal");
+      }
+
+      // Duplicate a preset
+      function duplicatePreset(sourceId) {
+        const source = app.presets.find(p => p.id === sourceId);
+        if (!source) return;
+
+        const newId = `preset-${Date.now()}`;
+        const duplicatePreset = {
+          ...source,
+          id: newId,
+          name: `${source.name} (Copy)`,
+          isCustom: true,
+          createdAt: Date.now(),
+          updatedAt: Date.now(),
+        };
+
+        if (app.user) {
+          database
+            .ref(`users/${app.user.uid}/presets/${newId}`)
+            .set(duplicatePreset);
+          showToast("Preset duplicated successfully", "success");
+        }
+      }
+
+      // Reset preset form
+      function resetPresetForm() {
+        app.editingPresetId = null;
+        app.presetKeywords = [];
+        app.presetDatasets = [];
+        document.getElementById("presetName").value = "";
+        document.getElementById("presetDescription").value = "";
+        document.getElementById("presetIcon").value = "🎯";
+        document.getElementById("presetModelId").value = "meta-llama/Llama-3.2-3B-Instruct";
+        document.getElementById("presetSystemPrompt").value = "";
+        document.getElementById("presetTemperature").value = 0.5;
+        document.getElementById("presetTempValue").textContent = "0.5";
+        document.getElementById("presetMaxTokens").value = 500;
+        document.getElementById("presetSaveBtn").textContent = "Save Preset";
+        renderPresetKeywords();
+        renderPresetDatasets();
+      }
+
+      // Keyword management functions
+      function renderPresetKeywords() {
+        const container = document.getElementById("presetKeywordsContainer");
+        if (!container) return;
+
+        if (app.presetKeywords.length === 0) {
+          container.innerHTML = '<span class="text-gray-400 text-sm">No keywords. Add keywords above for auto-routing.</span>';
+          return;
+        }
+
+        container.innerHTML = app.presetKeywords
+          .map((keyword, index) => `
+            <span class="keyword-tag">
+              ${keyword}
+              <button onclick="removePresetKeyword(${index})">&times;</button>
+            </span>
+          `)
+          .join("");
+      }
+
+      function addPresetKeyword() {
+        const input = document.getElementById("presetKeywordInput");
+        const keyword = input.value.trim().toLowerCase();
+
+        if (keyword && !app.presetKeywords.includes(keyword)) {
+          app.presetKeywords.push(keyword);
+          renderPresetKeywords();
+          input.value = "";
+        }
+      }
+
+      function removePresetKeyword(index) {
+        app.presetKeywords.splice(index, 1);
+        renderPresetKeywords();
+      }
+
+      // Dataset management functions
+      function renderPresetDatasets() {
+        const container = document.getElementById("presetDatasetsContainer");
+        if (!container) return;
+
+        if (app.presetDatasets.length === 0) {
+          container.innerHTML = '<span class="text-gray-400 text-sm">No datasets added.</span>';
+          return;
+        }
+
+        container.innerHTML = app.presetDatasets
+          .map((dataset, index) => `
+            <div class="dataset-item">
+              <div class="flex justify-between items-start">
+                <div>
+                  <p class="font-medium text-sm">${dataset.name || "Unnamed Dataset"}</p>
+                  <p class="text-xs text-gray-500">${dataset.url || "No URL"}</p>
+                </div>
+                <button class="btn btn-sm btn-ghost text-error" onclick="removePresetDataset(${index})">
+                  <span class="material-icons text-sm">delete</span>
+                </button>
+              </div>
+            </div>
+          `)
+          .join("");
+      }
+
+      function addPresetDataset() {
+        const name = document.getElementById("presetDatasetName").value.trim();
+        const url = document.getElementById("presetDatasetUrl").value.trim();
+
+        if (name && url) {
+          app.presetDatasets.push({ name, url });
+          renderPresetDatasets();
+          document.getElementById("presetDatasetName").value = "";
+          document.getElementById("presetDatasetUrl").value = "";
+        }
+      }
+
+      function removePresetDataset(index) {
+        app.presetDatasets.splice(index, 1);
+        renderPresetDatasets();
+      }
+
+      function toggleDatasetAccordion() {
+        const content = document.getElementById("presetDatasetAccordion");
+        content.classList.toggle("hidden");
+      }
+
+      // Preset rendering functions
+      function renderPresetSelector() {
+        const select = document.getElementById("presetSelect");
+        if (!select) return;
+
+        // Group presets
+        const curated = app.curatedPresets;
+        const custom = app.userPresets;
+
+        let html = `<option value="">No Preset</option>`;
+
+        if (curated.length > 0) {
+          html += `<optgroup label="🌟 Curated Presets">`;
+          curated.forEach(preset => {
+            const selected = app.activePresetId === preset.id ? "selected" : "";
+            html += `<option value="${preset.id}" ${selected}>${preset.icon} ${preset.name}</option>`;
+          });
+          html += `</optgroup>`;
+        }
+
+        if (custom.length > 0) {
+          html += `<optgroup label="👤 My Presets">`;
+          custom.forEach(preset => {
+            const selected = app.activePresetId === preset.id ? "selected" : "";
+            html += `<option value="${preset.id}" ${selected}>${preset.icon || "🎯"} ${preset.name}</option>`;
+          });
+          html += `</optgroup>`;
+        }
+
+        select.innerHTML = html;
+      }
+
+      function renderPresetManager() {
+        const container = document.getElementById("presetManagerContent");
+        if (!container) return;
+
+        const curated = app.curatedPresets;
+        const custom = app.userPresets;
+
+        let html = "";
+
+        if (curated.length > 0) {
+          html += `<div class="mb-6">
+            <h4 class="font-semibold text-lg mb-3 flex items-center">
+              <span class="material-icons mr-2">auto_awesome</span>Curated Presets
+            </h4>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              ${curated.map(p => renderPresetCard(p)).join("")}
+            </div>
+          </div>`;
+        }
+
+        if (custom.length > 0) {
+          html += `<div>
+            <h4 class="font-semibold text-lg mb-3 flex items-center">
+              <span class="material-icons mr-2">person</span>My Presets (${custom.length})
+            </h4>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              ${custom.map(p => renderPresetCard(p)).join("")}
+            </div>
+          </div>`;
+        }
+
+        if (!html) {
+          html = '<div class="text-center py-8 text-gray-500">No presets available</div>';
+        }
+
+        container.innerHTML = html;
+      }
+
+      function renderPresetCard(preset) {
+        const isActive = app.activePresetId === preset.id;
+        const isCustom = preset.isCustom;
+
+        return `
+          <div class="model-card bg-white border rounded-lg p-4 ${isActive ? "border-primary bg-primary/5" : "border-gray-200"}">
+            <div class="flex justify-between items-start mb-2">
+              <div class="flex items-center gap-2">
+                <span class="text-2xl">${preset.icon || "🎯"}</span>
+                <div>
+                  <h4 class="font-semibold">${preset.name}</h4>
+                  <p class="text-xs text-gray-500">${preset.description || preset.modelId.split("/").pop()}</p>
+                </div>
+              </div>
+              <div class="flex gap-1">
+                ${isActive ? '<span class="badge badge-sm badge-primary">Active</span>' : ''}
+                <button class="btn btn-sm btn-ghost btn-circle" onclick="selectPreset('${preset.id}')">
+                  <span class="material-icons text-sm">play_arrow</span>
+                </button>
+                <button class="btn btn-sm btn-ghost btn-circle" onclick="duplicatePreset('${preset.id}')">
+                  <span class="material-icons text-sm">content_copy</span>
+                </button>
+                ${isCustom ? `
+                  <button class="btn btn-sm btn-ghost btn-circle" onclick="editPreset('${preset.id}')">
+                    <span class="material-icons text-sm">edit</span>
+                  </button>
+                  <button class="btn btn-sm btn-ghost btn-circle text-error" onclick="deletePreset('${preset.id}')">
+                    <span class="material-icons text-sm">delete</span>
+                  </button>
+                ` : ''}
+              </div>
+            </div>
+            <p class="text-xs text-gray-400 truncate">${preset.systemPrompt?.substring(0, 60) || "No system prompt"}...</p>
+            ${preset.keywords?.length > 0 ? `
+              <div class="flex flex-wrap gap-1 mt-2">
+                ${preset.keywords.slice(0, 3).map(kw => `<span class="badge badge-xs badge-ghost">${kw}</span>`).join("")}
+                ${preset.keywords.length > 3 ? `<span class="badge badge-xs badge-ghost">+${preset.keywords.length - 3}</span>` : ''}
+              </div>
+            ` : ''}
+          </div>
+        `;
+      }
+
+      function selectModel(modelId) {
+        app.selectedModelId = modelId;
+
+        // Update dropdown
+        const select = document.getElementById("modelSelect");
+        select.value = modelId;
+
+        // Re-render active models to show selection
+        renderActiveModels();
+
+        // Re-render quick switcher
+        const enabledModels = app.models.filter((m) => m.enabled);
+        renderQuickSwitcher(enabledModels);
+
+        // Update header display
+        updateSelectedModelDisplay();
+
+        // Save selection to localStorage
+        localStorage.setItem("selectedModelId", modelId);
+
+        console.log("Selected model:", modelId);
+      }
+
+      function updateSelectedModelDisplay() {
+        const nameEl = document.getElementById("selectedModelName");
+        const roleEl = document.getElementById("selectedModelRole");
+
+        if (app.selectedModelId) {
+          const model = app.models.find((m) => m.id === app.selectedModelId);
+          if (model) {
+            nameEl.textContent = model.name;
+            roleEl.textContent = `${model.role} • ${model.modelId.split("/").pop()}`;
+            return;
+          }
+        }
+
+        // Default display
+        const defaultModel =
+          modelSettings.defaultModel || "meta-llama/Llama-3.2-3B-Instruct";
+        nameEl.textContent = "AI Assistant";
+        roleEl.textContent = `Powered by ${defaultModel.split("/").pop()}`;
+      }
+
+      function getSelectedModel() {
+        // Check if a preset is active and merge its settings
+        if (app.activePresetId) {
+          const preset = app.presets.find((p) => p.id === app.activePresetId);
+          if (preset) {
+            return {
+              modelId: preset.modelId,
+              temperature: preset.temperature,
+              maxTokens: preset.maxTokens,
+              systemPrompt: preset.systemPrompt,
+              name: preset.name,
+              keywords: preset.keywords,
+            };
+          }
+        }
+
+        if (app.selectedModelId) {
+          const model = app.models.find((m) => m.id === app.selectedModelId);
+          if (model) return model;
+        }
+        // Return default model config
+        return {
+          modelId:
+            modelSettings.defaultModel || "meta-llama/Llama-3.2-3B-Instruct",
+          temperature: 0.3,
+          maxTokens: 500,
+          systemPrompt: "",
+          name: "AI Assistant",
+        };
+      }
+
+      async function saveModel() {
+        const name = document.getElementById("modelName").value.trim();
+        const modelId = document.getElementById("modelId").value.trim();
+        if (!name || !modelId) {
+          alert("Please fill in required fields");
+          return;
+        }
+
+        const id = app.editingModelId || `model-${Date.now()}`;
+        const modelData = {
+          id,
+          name,
+          modelId,
+          role: document.getElementById("modelRole").value,
+          temperature: parseFloat(document.getElementById("modelTemp").value),
+          maxTokens: parseInt(document.getElementById("modelMaxTokens").value),
+          systemPrompt: document.getElementById("modelSystemPrompt").value,
+          keywords: modelKeywords,
+          datasets: [],
+          enabled: document.getElementById("modelEnabled").checked,
+          createdAt: app.editingModelId ? undefined : Date.now(),
+          updatedAt: Date.now(),
+        };
+
+        try {
+          // Save to settings file via API
+          const settingsResponse = await fetch("/api/settings/models/add", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(modelData),
+          });
+
+          if (!settingsResponse.ok) {
+            const error = await settingsResponse.json();
+            throw new Error(error.error || "Failed to save to settings");
+          }
+
+          console.log("Model saved to settings file");
+
+          // Also save to Firebase if user is authenticated
+          if (app.user) {
+            await database
+              .ref(`users/${app.user.uid}/models/${id}`)
+              .set(modelData);
+            console.log("Model saved to Firebase");
+          }
+
+          // Reload settings
+          await loadAllSettings();
+
+          resetModelForm();
+          loadModels();
+
+          // Show success message
+          alert("Model saved successfully!");
+        } catch (error) {
+          console.error("Error saving model:", error);
+          alert("Error saving model: " + error.message);
+        }
+      }
+
+      async function refreshModelsRealtime() {
+        const btn = document.getElementById("refreshModelsBtn");
+        if (!btn) return;
+
+        btn.disabled = true;
+        btn.innerHTML =
+          '<span class="material-icons animate-spin">refresh</span>Refreshing...';
+
+        try {
+          // Fetch latest model info from server
+          const response = await fetch("/api/search-models?limit=20");
+          const data = await response.json();
+
+          if (data.models && data.models.length > 0) {
+            // Update model info with latest data from HuggingFace
+            for (const model of app.models) {
+              const hfModel = data.models.find((m) => m.id === model.modelId);
+              if (hfModel) {
+                model.downloads = hfModel.downloads;
+                model.likes = hfModel.likes;
+                model.lastUpdated = Date.now();
+              }
+            }
+            renderModels();
+            alert("✓ Models updated with latest info from HuggingFace!");
+          }
+        } catch (error) {
+          console.error("Error refreshing models:", error);
+          alert("Failed to refresh models: " + error.message);
+        } finally {
+          btn.disabled = false;
+          btn.innerHTML =
+            '<span class="material-icons">refresh</span>Refresh Models';
+        }
+      }
+
+      async function searchHFModels() {
+        const searchInput = document.getElementById("modelSearchInput");
+        const query = searchInput.value.trim();
+
+        if (!query) {
+          alert("Please enter a search query");
+          return;
+        }
+
+        const searchBtn = document.getElementById("searchModelsBtn");
+        searchBtn.disabled = true;
+        searchBtn.innerHTML =
+          '<span class="material-icons animate-spin">search</span>Searching...';
+
+        try {
+          const response = await fetch(
+            `/api/search-models?search=${encodeURIComponent(query)}&limit=10`,
+          );
+          const data = await response.json();
+
+          if (data.models && data.models.length > 0) {
+            displaySearchResults(data.models);
+          } else {
+            alert("No models found matching your search");
+          }
+        } catch (error) {
+          console.error("Error searching models:", error);
+          alert("Search failed: " + error.message);
+        } finally {
+          searchBtn.disabled = false;
+          searchBtn.innerHTML =
+            '<span class="material-icons">search</span>Search';
+        }
+      }
+
+      function displaySearchResults(models) {
+        const resultsContainer = document.getElementById(
+          "searchResultsContainer",
+        );
+        if (!resultsContainer) {
+          alert("Search results container not found");
+          return;
+        }
+
+        resultsContainer.classList.remove("hidden");
+        resultsContainer.innerHTML = `
+          <div class="bg-white rounded-lg border border-primary/20 p-4 mb-4">
+            <h4 class="font-semibold mb-3">Found ${models.length} Models</h4>
+            <div class="space-y-2 max-h-60 overflow-y-auto">
+              ${models
+                .map(
+                  (model) => `
+                <div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded-lg transition-colors border border-gray-200">
+                  <div class="flex-1 min-w-0">
+                    <p class="font-medium truncate">${model.name || model.id}</p>
+                    <p class="text-xs text-gray-500 truncate">${model.id}</p>
+                    <div class="flex gap-2 mt-1 text-xs text-gray-400">
+                      <span>📥 ${(model.downloads || 0).toLocaleString()}</span>
+                      <span>❤️ ${model.likes || 0}</span>
+                    </div>
+                  </div>
+                  <button class="btn btn-sm btn-primary" onclick="quickAddModel('${model.id}', '${(model.name || model.id).replace(/'/g, "\\'")}')">
+                    Add
+                  </button>
+                </div>
+              `,
+                )
+                .join("")}
+            </div>
+          </div>
+        `;
+      }
+
+      function quickAddModel(modelId, modelName) {
+        document.getElementById("modelId").value = modelId;
+        document.getElementById("modelName").value = modelName;
+
+        // Fetch model info if available
+        fetch(`/api/model-info?model_id=${encodeURIComponent(modelId)}`)
+          .then((r) => r.json())
+          .then((data) => {
+            if (data.summary) {
+              document.getElementById("modelSystemPrompt").value =
+                data.summary.substring(0, 200);
+            }
+          })
+          .catch((e) => console.log("Could not fetch model info:", e));
+
+        // Hide search results
+        const resultsContainer = document.getElementById(
+          "searchResultsContainer",
+        );
+        if (resultsContainer) resultsContainer.classList.add("hidden");
+
+        alert(
+          `Model "${modelName}" added to form. Customize settings and click Add Model.`,
+        );
+      }
+
+      function editModel(modelId) {
+        const model = app.models.find((m) => m.id === modelId);
+        if (!model) return;
+        app.editingModelId = modelId;
+        document.getElementById("modelFormTitle").textContent = "Edit Model";
+        document.getElementById("modelName").value = model.name;
+        document.getElementById("modelId").value = model.modelId;
+        document.getElementById("modelRole").value = model.role;
+        document.getElementById("modelTemp").value = model.temperature;
+        document.getElementById("tempValue").textContent = model.temperature;
+        document.getElementById("modelMaxTokens").value = model.maxTokens;
+        document.getElementById("modelSystemPrompt").value =
+          model.systemPrompt || "";
+        document.getElementById("modelEnabled").checked = model.enabled;
+        document.getElementById("saveModelBtn").innerHTML =
+          '<span class="material-icons text-sm mr-1">save</span>Update Model';
+        document.getElementById("cancelEditBtn").style.display = "block";
+        // Load keywords for editing
+        modelKeywords = model.keywords || [];
+        renderKeywords();
+        // Hide model info panel when editing
+        document.getElementById("modelInfoPanel").classList.add("hidden");
+        document.getElementById("modelInfoStatus").innerHTML = "";
+      }
+
+      async function deleteModel(modelId) {
+        if (!confirm("Are you sure you want to delete this model?")) return;
+        try {
+          // Delete from settings file
+          const settingsResponse = await fetch(
+            `/api/settings/models/${modelId}`,
+            {
+              method: "DELETE",
+            },
+          );
+
+          if (!settingsResponse.ok) {
+            console.log("Could not delete from settings file");
+          }
+
+          // Delete from Firebase if user is authenticated
+          if (app.user) {
+            try {
+              await database
+                .ref(`users/${app.user.uid}/models/${modelId}`)
+                .remove();
+            } catch (fbError) {
+              console.log("Could not delete from Firebase:", fbError.message);
+            }
+          }
+
+          // Reload settings
+          await loadAllSettings();
+
+          app.models = app.models.filter((m) => m.id !== modelId);
+          renderModels();
+          renderModelSelect();
+        } catch (error) {
+          console.error("Error deleting model:", error);
+        }
+      }
+
+      function cancelEditModel() {
+        resetModelForm();
+      }
+
+      function resetModelForm() {
+        app.editingModelId = null;
+        document.getElementById("modelFormTitle").textContent = "Add New Model";
+        document.getElementById("modelName").value = "Llama 3.2";
+        document.getElementById("modelId").value =
+          "meta-llama/Llama-3.2-3B-Instruct";
+        document.getElementById("modelRole").value = "assistant";
+        document.getElementById("modelTemp").value = 0.3;
+        document.getElementById("tempValue").textContent = "0.3";
+        document.getElementById("modelMaxTokens").value = 500;
+        document.getElementById("modelSystemPrompt").value = "";
+        document.getElementById("modelEnabled").checked = true;
+        document.getElementById("saveModelBtn").innerHTML =
+          '<span class="material-icons text-sm mr-1">add</span>Add Model';
+        document.getElementById("cancelEditBtn").style.display = "none";
+        // Reset keywords
+        modelKeywords = [];
+        renderKeywords();
+        // Reset search
+        const searchInput = document.getElementById("modelSearchInput");
+        if (searchInput) searchInput.value = "";
+        const resultsContainer = document.getElementById(
+          "searchResultsContainer",
+        );
+        if (resultsContainer) resultsContainer.classList.add("hidden");
+        // Hide model info panel
+        document.getElementById("modelInfoPanel").classList.add("hidden");
+        document.getElementById("modelInfoStatus").innerHTML = "";
+      }
+
+      async function sendMessage() {
+        const input = document.getElementById("messageInput");
+        const message = input.value.trim();
+        if (!message) return;
+        app.isTyping = true;
+        input.disabled = true;
+
+        const userMessage = {
+          text: message,
+          sender: "user",
+          timestamp: Date.now(),
+          mode: app.chatMode,
+        };
+        app.messages.push(userMessage);
+        renderMessages();
+        saveMessage(userMessage);
+        input.value = "";
+
+        // Get selected model with its settings
+        const selectedModel = getSelectedModel();
+        const modelId = selectedModel.modelId;
+        const apiKey = document.getElementById("apiKey").value;
+
+        // Use model-specific settings or fallback to global
+        const temperature =
+          selectedModel.temperature ||
+          parseFloat(document.getElementById("globalTemp").value);
+        const maxTokens = selectedModel.maxTokens || 500;
+        const systemPrompt = selectedModel.systemPrompt || "";
+
+        try {
+          let botMessage;
+
+          if (app.chatMode === "chat") {
+            // Standard chat mode
+            let finalInput = message;
+            if (systemPrompt) {
+              finalInput = `System: ${systemPrompt}\n\nUser: ${message}`;
+            }
+
+            const response = await fetch("/api/chat", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                model_id: modelId,
+                api_key: apiKey,
+                inputs: finalInput,
+                parameters: {
+                  temperature: temperature,
+                  max_new_tokens: maxTokens,
+                  return_full_text: false,
+                },
+              }),
+            });
+            const data = await response.json();
+            if (data.error) throw new Error(data.error);
+            const aiResponse =
+              data[0]?.generated_text ||
+              "Sorry, I could not generate a response.";
+            botMessage = {
+              text: aiResponse,
+              sender: "bot",
+              timestamp: Date.now(),
+              modelName: selectedModel.name || "AI Assistant",
+              mode: "chat",
+            };
+          } else if (app.chatMode === "text-generation") {
+            const response = await fetch("/api/text-generation", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                model_id: modelId,
+                prompt: message,
+                parameters: {
+                  max_new_tokens: maxTokens,
+                  temperature: temperature,
+                },
+              }),
+            });
+            const data = await response.json();
+            if (data.error) throw new Error(data.error);
+            botMessage = {
+              text: data.generated_text || "No text generated.",
+              sender: "bot",
+              timestamp: Date.now(),
+              modelName: selectedModel.name || "Text Generator",
+              mode: "text-generation",
+            };
+          } else if (app.chatMode === "image-generation") {
+            const imageModelId = document.getElementById("imageModel").value;
+            const negativePrompt =
+              document.getElementById("negativePrompt").value;
+
+            // Show loading message
+            const loadingMsg = {
+              text: "🎨 Generating image...",
+              sender: "bot",
+              timestamp: Date.now(),
+              mode: "image-generation",
+            };
+            app.messages.push(loadingMsg);
+            renderMessages();
+
+            const response = await fetch("/api/image-generation", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                model_id: imageModelId,
+                prompt: message,
+                negative_prompt: negativePrompt || null,
+                parameters: { num_inference_steps: 30 },
+              }),
+            });
+            const data = await response.json();
+
+            // Remove loading message
+            app.messages.pop();
+
+            if (data.error) throw new Error(data.error);
+            botMessage = {
+              text: `<img src="data:image/png;base64,${data.image}" class="max-w-full rounded-lg" alt="${message}" /><p class="text-xs mt-2 opacity-70">Prompt: ${message}</p>`,
+              sender: "bot",
+              timestamp: Date.now(),
+              modelName: imageModelId.split("/").pop(),
+              mode: "image-generation",
+              isHtml: true,
+            };
+          } else if (app.chatMode === "translation") {
+            const translateModelId =
+              document.getElementById("translateModel").value;
+            const response = await fetch("/api/translation", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                model_id: translateModelId,
+                text: message,
+              }),
+            });
+            const data = await response.json();
+            if (data.error) throw new Error(data.error);
+            botMessage = {
+              text: `📝 **Translation:**\n${data.translation}\n\n📄 **Original:**\n${data.original}`,
+              sender: "bot",
+              timestamp: Date.now(),
+              modelName: translateModelId.split("/").pop(),
+              mode: "translation",
+            };
+          } else if (app.chatMode === "question-answering") {
+            const context = document
+              .getElementById("contextInput")
+              .value.trim();
+            if (!context) {
+              throw new Error("Please provide context for question answering.");
+            }
+            const response = await fetch("/api/question-answering", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                model_id: "deepset/roberta-base-squad2",
+                question: message,
+                context: context,
+              }),
+            });
+            const data = await response.json();
+            if (data.error) throw new Error(data.error);
+            const confidence = (data.score * 100).toFixed(1);
+            botMessage = {
+              text: `✅ **Answer:** ${data.answer}\n\n📊 **Confidence:** ${confidence}%`,
+              sender: "bot",
+              timestamp: Date.now(),
+              modelName: "Q&A Model",
+              mode: "question-answering",
+            };
+          } else if (app.chatMode === "summarization") {
+            const response = await fetch("/api/summarization", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                model_id: "facebook/bart-large-cnn",
+                text: message,
+                parameters: { max_length: 150, min_length: 30 },
+              }),
+            });
+            const data = await response.json();
+            if (data.error) throw new Error(data.error);
+            botMessage = {
+              text: `📋 **Summary:**\n${data.summary}`,
+              sender: "bot",
+              timestamp: Date.now(),
+              modelName: "Summarizer",
+              mode: "summarization",
+            };
+          }
+
+          app.messages.push(botMessage);
+          renderMessages();
+          saveMessage(botMessage);
+        } catch (error) {
+          console.error("Error getting AI response:", error);
+          const errorMessage = {
+            text: `Sorry, I encountered an error: ${error.message}. Please check your API key and try again.`,
+            sender: "bot",
+            timestamp: Date.now(),
+            mode: app.chatMode,
+          };
+          app.messages.push(errorMessage);
+          renderMessages();
+        } finally {
+          app.isTyping = false;
+          input.disabled = false;
+          input.focus();
+          scrollToBottom();
+        }
+      }
+
+      function setChatMode(mode) {
+        app.chatMode = mode;
+
+        // Update tab styles
+        document
+          .querySelectorAll(".tabs .tab")
+          .forEach((tab) => tab.classList.remove("tab-active"));
+        document
+          .getElementById("mode" + getModeTabId(mode))
+          .classList.add("tab-active");
+
+        // Show/hide mode-specific inputs
+        document
+          .getElementById("contextInputArea")
+          .classList.toggle("hidden", mode !== "question-answering");
+        document
+          .getElementById("translationOptions")
+          .classList.toggle("hidden", mode !== "translation");
+        document
+          .getElementById("imageOptions")
+          .classList.toggle("hidden", mode !== "image-generation");
+
+        // Update placeholder
+        const placeholders = {
+          chat: "Type your message...",
+          "text-generation": "Enter a prompt to continue...",
+          "image-generation": "Describe the image you want to generate...",
+          translation: "Enter text to translate...",
+          "question-answering": "Ask a question about the context...",
+          summarization: "Paste text to summarize...",
+        };
+        document.getElementById("messageInput").placeholder =
+          placeholders[mode] || "Type your message...";
+
+        console.log("Chat mode set to:", mode);
+      }
+
+      function getModeTabId(mode) {
+        const ids = {
+          chat: "Chat",
+          "text-generation": "TextGen",
+          "image-generation": "Image",
+          translation: "Translate",
+          "question-answering": "QA",
+          summarization: "Summary",
+        };
+        return ids[mode] || "Chat";
+      }
+
+      function quickReply(text) {
+        document.getElementById("messageInput").value = text;
+        sendMessage();
+      }
+
+      function renderMessages() {
+        const messageArea = document.getElementById("messageArea");
+        messageArea.innerHTML = app.messages
+          .map((msg) => {
+            const modeBadge =
+              msg.mode && msg.mode !== "chat"
+                ? `<span class="badge badge-xs badge-primary ml-2">${getModeBadgeLabel(msg.mode)}</span>`
+                : "";
+            const content = msg.isHtml
+              ? msg.text
+              : `<p class="text-sm whitespace-pre-wrap">${formatMessageText(msg.text)}</p>`;
+            return `<div class="flex ${msg.sender === "user" ? "justify-end" : "justify-start"}"><div class="max-w-xs lg:max-w-md xl:max-w-lg"><div class="rounded-lg px-4 py-3 shadow-md ${msg.sender === "user" ? "gradient-bg text-white" : "bg-gray-100"}"><div class="message-content">${content}</div><div class="flex items-center justify-between mt-1 flex-wrap gap-1"><p class="text-xs opacity-70">${formatTime(msg.timestamp)}</p>${msg.modelName ? `<span class="text-xs opacity-70 ml-2">• ${msg.modelName}</span>` : ""}${modeBadge}</div></div></div></div>`;
+          })
+          .join("");
+        scrollToBottom();
+      }
+
+      function getModeBadgeLabel(mode) {
+        const labels = {
+          "text-generation": "📝 Text",
+          "image-generation": "🎨 Image",
+          translation: "🌐 Translate",
+          "question-answering": "❓ Q&A",
+          summarization: "📋 Summary",
+        };
+        return labels[mode] || mode;
+      }
+
+      function formatMessageText(text) {
+        // Simple markdown-like formatting
+        return text
+          .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
+          .replace(/\n/g, "<br>");
+      }
+
+      function scrollToBottom() {
+        const messageArea = document.getElementById("messageArea");
+        messageArea.scrollTop = messageArea.scrollHeight;
+      }
+
+      async function loadChatSessions() {
+        try {
+          const snapshot = await database
+            .ref(`chats/${app.user.uid}`)
+            .once("value");
+          const sessions = snapshot.val() || {};
+          app.chatSessions = Object.values(sessions)
+            .sort((a, b) => b.timestamp - a.timestamp)
+            .slice(0, 10);
+          renderChatHistory();
+        } catch (error) {
+          console.error("Error loading chat sessions:", error);
+        }
+      }
+
+      function renderChatHistory() {
+        const chatHistory = document.getElementById("chatHistory");
+        chatHistory.innerHTML = app.chatSessions
+          .map((session) => {
+            const messageCount = session.messages
+              ? Object.keys(session.messages).length
+              : 0;
+            const preview = session.lastMessage
+              ? session.lastMessage.substring(0, 40) +
+                (session.lastMessage.length > 40 ? "..." : "")
+              : "No messages";
+            return `<div class="p-3 rounded-lg hover:bg-gray-100 cursor-pointer transition-colors border-l-4 border-transparent hover:border-primary ${app.currentSessionId === session.id ? "bg-primary/10 border-primary" : ""}" onclick="loadSession('${session.id}')">
+                <div class="flex items-center justify-between">
+                  <p class="text-sm font-medium truncate flex-1">${session.title}</p>
+                  <button onclick="event.stopPropagation(); deleteSession('${session.id}')" class="btn btn-ghost btn-xs text-error opacity-0 group-hover:opacity-100 hover:opacity-100">×</button>
+                </div>
+                <p class="text-xs text-gray-600 truncate">${preview}</p>
+                <div class="flex items-center justify-between mt-1">
+                  <p class="text-xs text-gray-400">${formatTime(session.timestamp)}</p>
+                  <span class="badge badge-xs badge-ghost">${messageCount} msgs</span>
+                </div>
+              </div>`;
+          })
+          .join("");
+      }
+
+      async function deleteSession(sessionId) {
+        if (!confirm("Delete this chat session?")) return;
+        try {
+          await database.ref(`chats/${app.user.uid}/${sessionId}`).remove();
+          if (app.currentSessionId === sessionId) {
+            startNewSession();
+          }
+          loadChatSessions();
+        } catch (error) {
+          console.error("Error deleting session:", error);
+        }
+      }
+
+      async function loadSession(sessionId) {
+        try {
+          const snapshot = await database
+            .ref(`chats/${app.user.uid}/${sessionId}`)
+            .once("value");
+          const session = snapshot.val();
+          if (session) {
+            app.currentSessionId = sessionId;
+            app.messages = Object.values(session.messages || {});
+            renderMessages();
+          }
+        } catch (error) {
+          console.error("Error loading session:", error);
+        }
+      }
+
+      function startNewSession() {
+        app.currentSessionId = Date.now().toString();
+        app.messages = [];
+        const session = {
+          id: app.currentSessionId,
+          title: "New Chat",
+          timestamp: Date.now(),
+          messages: [],
+        };
+        database
+          .ref(`chats/${app.user.uid}/${app.currentSessionId}`)
+          .set(session);
+        loadChatSessions();
+        renderMessages();
+      }
+
+      function saveMessage(message) {
+        if (!app.currentSessionId) return;
+        database
+          .ref(`chats/${app.user.uid}/${app.currentSessionId}/messages`)
+          .push(message);
+        database
+          .ref(`chats/${app.user.uid}/${app.currentSessionId}`)
+          .update({ lastMessage: message.text, timestamp: message.timestamp });
+      }
+
+      function shareChat() {
+        if (navigator.share) {
+          navigator
+            .share({
+              title: "AI Chat Conversation",
+              text: "Check out my conversation with AI Assistant",
+              url: window.location.href,
+            })
+            .catch((error) => console.log("Share cancelled or failed:", error));
+        } else {
+          const chatText = app.messages
+            .map((m) => `${m.sender}: ${m.text}`)
+            .join("\n");
+          navigator.clipboard.writeText(chatText).then(() => {
+            alert("Chat copied to clipboard!");
+          });
+        }
+      }
+
+      function formatTime(timestamp) {
+        const date = new Date(timestamp);
+        return date.toLocaleTimeString("en-US", {
+          hour: "2-digit",
+          minute: "2-digit",
+        });
+      }
+
+      function loadApiKey() {
+        const savedApiKey = localStorage.getItem("huggingface_api_key");
+        if (savedApiKey) {
+          document.getElementById("apiKey").value = savedApiKey;
+        }
+
+        // Load saved model selection
+        const savedModelId = localStorage.getItem("selectedModelId");
+        if (savedModelId) {
+          app.selectedModelId = savedModelId;
+        }
+      }
+
+      // Handle model select dropdown change
+      document.addEventListener("DOMContentLoaded", () => {
+        const modelSelect = document.getElementById("modelSelect");
+        if (modelSelect) {
+          modelSelect.addEventListener("change", (e) => {
+            selectModel(e.target.value);
+          });
+        }
+      });
+    </script>
+  </body>
+</html>
