Spaces:

jomasego
/

trade-flow-predictor

Sleeping

App Files Files Community

jomasego commited on Apr 21

Commit

5df66b9

verified ·

1 Parent(s): 9750e28

Upload templates/index.html with huggingface_hub

Browse files

Files changed (1) hide show

templates/index.html +741 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,741 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>International Trade Flow Predictor</title>
+    <link rel="stylesheet" href="/static/css/style.css">
+    <!-- Font Awesome for icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
+    <!-- Leaflet for maps -->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+    <style>
+        .advanced-chart-container {
+            width: 100%;
+            height: 400px;
+            margin-top: 1.5em;
+            position: relative;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+            border-radius: 8px;
+            overflow: hidden;
+        }
+        .treemap-container {
+            width: 100%;
+            border: 1px solid #eaeaea;
+            border-radius: 8px;
+        }
+        .treemap-title {
+            font-weight: bold;
+            padding: 10px;
+            background: #f8f9fa;
+            border-bottom: 1px solid #eaeaea;
+        }
+        .treemap-item:hover {
+            opacity: 0.9;
+            transform: scale(1.02);
+            transition: all 0.2s ease;
+            z-index: 5;
+        }
+        .chart-controls {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin: 1em 0;
+        }
+        .chart-type-btn {
+            padding: 6px 12px;
+            background: #f0f4f8;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        .chart-type-btn:hover {
+            background: #e3e9f6;
+        }
+        .chart-type-btn.active {
+            background: #1976d2;
+            color: white;
+            border-color: #1976d2;
+        }
+        .cached-data-panel {
+            margin-top: 2em;
+            border: 1px solid #eaeaea;
+            border-radius: 8px;
+            overflow: hidden;
+        }
+        .cached-data-header {
+            padding: 10px 15px;
+            background: #f8f9fa;
+            font-weight: bold;
+            border-bottom: 1px solid #eaeaea;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .cached-data-list {
+            max-height: 300px;
+            overflow-y: auto;
+            padding: 0;
+        }
+        .cached-data-item {
+            padding: 8px 15px;
+            border-bottom: 1px solid #eee;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .cached-data-item:hover {
+            background: #f9f9fa;
+        }
+        .cached-data-actions {
+            display: flex;
+            gap: 5px;
+        }
+        .cached-data-info {
+            font-size: 13px;
+            color: #666;
+        }
+        .action-btn {
+            background: none;
+            border: none;
+            color: #1976d2;
+            cursor: pointer;
+            padding: 3px 8px;
+            border-radius: 3px;
+        }
+        .action-btn:hover {
+            background: #e3e9f6;
+        }
+        .action-btn.delete {
+            color: #e53935;
+        }
+        .action-btn.delete:hover {
+            background: #ffebee;
+        }
+        /* AI Assistant styles */
+        .chat-container {
+            display: flex;
+            flex-direction: column;
+            height: 500px;
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+            overflow: hidden;
+        }
+        .chat-messages {
+            flex: 1;
+            overflow-y: auto;
+            padding: 15px;
+            background: #f9f9fa;
+        }
+        .chat-input-container {
+            display: flex;
+            border-top: 1px solid #e0e0e0;
+            padding: 10px;
+            background: #fff;
+        }
+        .chat-input {
+            flex: 1;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 20px;
+            margin-right: 10px;
+        }
+        .chat-send-btn {
+            background: #1976d2;
+            color: white;
+            border: none;
+            border-radius: 20px;
+            padding: 10px 20px;
+            cursor: pointer;
+        }
+        .message {
+            margin-bottom: 15px;
+            max-width: 80%;
+        }
+        .message-user {
+            align-self: flex-end;
+            margin-left: auto;
+            background: #e3f2fd;
+            border-radius: 18px 18px 0 18px;
+            padding: 10px 15px;
+        }
+        .message-assistant {
+            align-self: flex-start;
+            background: #fff;
+            border-radius: 18px 18px 18px 0;
+            padding: 10px 15px;
+            border: 1px solid #e0e0e0;
+        }
+        .message-loading {
+            display: flex;
+            align-items: center;
+            padding: 10px 15px;
+        }
+        .loading-dots span {
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background-color: #1976d2;
+            margin-right: 3px;
+            animation: loading-bounce 1.4s infinite ease-in-out both;
+        }
+        .loading-dots span:nth-child(1) { animation-delay: -0.32s; }
+        .loading-dots span:nth-child(2) { animation-delay: -0.16s; }
+        @keyframes loading-bounce {
+            0%, 80%, 100% { transform: scale(0); }
+            40% { transform: scale(1); }
+        }
+        .quick-questions {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            margin-top: 10px;
+        }
+        .quick-question-btn {
+            background: #f0f4f8;
+            border: 1px solid #ddd;
+            border-radius: 16px;
+            padding: 6px 12px;
+            font-size: 13px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        .quick-question-btn:hover {
+            background: #e3e9f6;
+        }
+        .badge {
+            display: inline-block;
+            padding: 2px 6px;
+            border-radius: 10px;
+            background-color: #E53935;
+            color: white;
+            font-size: 10px;
+            font-weight: bold;
+            margin-left: 5px;
+            vertical-align: top;
+        }
+    </style>
+</head>
+<body>
+    <!-- Banner for sources and rate-limit info -->
+    <div id="info-banner" style="background:#f8f9fa;border-bottom:1px solid #e0e0e0;padding:6px 16px;font-size:13px;display:flex;justify-content:space-between;align-items:center;">
+      <div>Sources: UN COMTRADE, WTO, World Bank. Limit: 1 request/sec, 100 requests/hour.</div>
+      <div style="display:flex;align-items:center;gap:8px;">
+        <span style="font-weight:500;">Powered by</span>
+        <a href="https://huggingface.co" target="_blank" style="display:flex;align-items:center;">
+          <img src="https://huggingface.co/front/assets/huggingface_logo.svg" alt="Hugging Face" style="height:20px;">
+        </a>
+      </div>
+    </div>
+    <!-- Tab Navigation -->
+    <nav>
+  <ul id="main-tabs" class="tab-bar">
+    <li class="tab active" data-tab="basics" tabindex="0" aria-selected="true">Basics</li>
+    <li class="tab" data-tab="exports-country" tabindex="0" aria-selected="false">Exports by Country</li>
+    <li class="tab" data-tab="imports-country" tabindex="0" aria-selected="false">Imports by Country</li>
+    <li class="tab" data-tab="exports-product" tabindex="0" aria-selected="false">Exports by Product</li>
+    <li class="tab" data-tab="imports-product" tabindex="0" aria-selected="false">Imports by Product</li>
+    <li class="tab" data-tab="rankings" tabindex="0" aria-selected="false">Rankings</li>
+    <li class="tab" data-tab="bilateral" tabindex="0" aria-selected="false">Bilateral Trade</li>
+    <li class="tab" data-tab="data-download" tabindex="0" aria-selected="false">Data Download</li>
+    <li class="tab" data-tab="prediction" tabindex="0" aria-selected="false">Prediction (ML)</li>
+    <li class="tab" data-tab="data-cache" tabindex="0" aria-selected="false">Data Cache</li>
+    <li class="tab" data-tab="assistant" tabindex="0" aria-selected="false">AI Assistant <span class="badge">New</span></li>
+  </ul>
+</nav>
+<style>
+.tab-bar {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  margin: 0 0 16px 0;
+  border-bottom: 2px solid #e4e4e4;
+  background: #f9f9fa;
+}
+.tab-bar .tab {
+  padding: 12px 28px 10px 28px;
+  margin: 0 2px;
+  border: none;
+  background: none;
+  font-size: 16px;
+  color: #444;
+  cursor: pointer;
+  border-radius: 8px 8px 0 0;
+  transition: background 0.18s, color 0.18s;
+  outline: none;
+  position: relative;
+}
+.tab-bar .tab.active,
+.tab-bar .tab:focus {
+  background: #fff;
+  color: #1976d2;
+  box-shadow: 0 -2px 8px rgba(25,118,210,0.07);
+  border-bottom: 2px solid #1976d2;
+  z-index: 2;
+}
+.tab-bar .tab:hover:not(.active) {
+  background: #e3e9f6;
+  color: #1976d2;
+}
+</style>
+    <!-- Tab Content Panels -->
+    <div id="tab-content-basics" class="tab-content" style="display:block;">
+    <div class="container">
+        <h1>International Trade Flow Predictor</h1>
+        <div id="alert" class="alert" style="display:none;"></div>
+        <form id="tradeForm">
+            <label for="reporterCode">Reporter Country:</label>
+            <select id="reporterCode" name="reporterCode"></select>
+            <label for="partnerCode">Partner Country:</label>
+            <select id="partnerCode" name="partnerCode"></select>
+            <label for="period">Year:</label>
+            <input type="text" id="period" name="period" value="2022" placeholder="e.g. 2022" title="Year (e.g. 2022)">
+            <label for="cmdCode">Commodity Code (HS or TOTAL):</label>
+            <input type="text" id="cmdCode" name="cmdCode" value="TOTAL" placeholder="e.g. TOTAL or 1001" title="HS code or TOTAL for all commodities">
+            <label for="flowCode">Flow (M=Import, X=Export, blank=All):</label>
+            <input type="text" id="flowCode" name="flowCode" placeholder="M, X or leave blank" title="M = Import, X = Export, blank = All">
+            <button type="submit">Fetch Trade Data</button>
+        </form>
+        <div id="spinner" class="spinner" style="display:none;"></div>
+        <div id="results"></div>
+        <canvas id="tradeChart" style="margin-top:2em;max-width:100%;display:none;"></canvas>
+    </div>
+    <!-- Select2 for searchable dropdowns -->
+    <!-- JavaScript modules -->
+    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+    <script src="/static/js/country_codes.js"></script>
+    <script src="/static/js/data_manager.js"></script>
+    <script src="/static/js/charts_module.js"></script>
+    <script src="/static/js/main.js"></script>
+    <script src="/static/js/enhanced_visualizations.js"></script>
+    <script src="/static/js/assistant.js"></script>
+    <div id="worldMap" style="width:100%;height:360px;margin-top:2em;"></div>
+    <div id="extraVisualizations" style="margin-top:2em;"></div>
+    <script>
+      // Populate country dropdowns from COUNTRY_CODES
+      document.addEventListener('DOMContentLoaded', function() {
+        function populateCountrySelect(selectId, defaultCode) {
+          const select = document.getElementById(selectId);
+          if (!select || typeof COUNTRY_CODES === 'undefined') return;
+          select.innerHTML = '';
+          COUNTRY_CODES.forEach(c => {
+            const opt = document.createElement('option');
+            opt.value = c.code;
+            opt.textContent = c.name + ' (' + c.code + ')';
+            if (c.code === defaultCode) opt.selected = true;
+            select.appendChild(opt);
+          });
+          // Make dropdown searchable with Select2
+          window.$ && window.$(select).select2 && window.$(select).select2();
+        }
+        populateCountrySelect('reporterCode', '842');
+        populateCountrySelect('partnerCode', '156');
+      });
+    </script>
+    <!-- jQuery for select2 -->
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    </div>
+    <div id="tab-content-exports-country" class="tab-content" style="display:none;">
+  <h3>Exports by Country</h3>
+  <form id="exportsCountryForm" style="margin-bottom:1em;">
+    <label for="exportsCountryYear">Year:</label>
+    <input type="number" id="exportsCountryYear" name="exportsCountryYear" value="2022" min="2000" max="2100" style="width:90px;">
+    <label for="exportsCountryCommodity">Commodity Code (HS or TOTAL):</label>
+    <input type="text" id="exportsCountryCommodity" name="exportsCountryCommodity" value="TOTAL" style="width:110px;">
+    <label for="exportsCountryFlow">Flow:</label>
+    <select id="exportsCountryFlow" name="exportsCountryFlow">
+      <option value="X">Export</option>
+      <option value="M">Import</option>
+      <option value="">All</option>
+    </select>
+    <button type="submit">Show Table</button>
+  </form>
+  <button id="exportsCountryDownloadBtn" style="display:none;margin-bottom:1em;">Download CSV</button>
+  <div id="exportsCountryResults"></div>
+  <div id="exportsCountryChart" style="margin-top:2em;"></div>
+</div>
+    <div id="tab-content-imports-country" class="tab-content" style="display:none;">
+  <h3>Imports by Country</h3>
+  <form id="importsCountryForm" style="margin-bottom:1em;">
+    <label for="importsCountryYear">Year:</label>
+    <input type="number" id="importsCountryYear" name="importsCountryYear" value="2022" min="2000" max="2100" style="width:90px;">
+    <label for="importsCountryCommodity">Commodity Code (HS or TOTAL):</label>
+    <input type="text" id="importsCountryCommodity" name="importsCountryCommodity" value="TOTAL" style="width:110px;">
+    <label for="importsCountryFlow">Flow:</label>
+    <select id="importsCountryFlow" name="importsCountryFlow">
+      <option value="M">Import</option>
+      <option value="X">Export</option>
+      <option value="">All</option>
+    </select>
+    <button type="submit">Show Table</button>
+  </form>
+  <button id="importsCountryDownloadBtn" style="display:none;margin-bottom:1em;">Download CSV</button>
+  <div id="importsCountryResults"></div>
+  <div id="importsCountryChart" style="margin-top:2em;"></div>
+</div>
+    <div id="tab-content-exports-product" class="tab-content" style="display:none;">
+  <h3>Exports by Product</h3>
+  <form id="exportsProductForm" style="margin-bottom:1em;">
+    <label for="exportsProductCountry">Country:</label>
+    <select id="exportsProductCountry" name="exportsProductCountry"></select>
+    <label for="exportsProductYear">Year:</label>
+    <input type="number" id="exportsProductYear" name="exportsProductYear" value="2022" min="2000" max="2100" style="width:90px;">
+    <button type="submit">Show Table</button>
+  </form>
+  <button id="exportsProductDownloadBtn" style="display:none;margin-bottom:1em;">Download CSV</button>
+  <div id="exportsProductResults"></div>
+  <div id="exportsProductChart" style="margin-top:2em;"></div>
+</div>
+    <div id="tab-content-imports-product" class="tab-content" style="display:none;">
+  <h3>Imports by Product</h3>
+  <form id="importsProductForm" style="margin-bottom:1em;">
+    <label for="importsProductCountry">Country:</label>
+    <select id="importsProductCountry" name="importsProductCountry"></select>
+    <label for="importsProductYear">Year:</label>
+    <input type="number" id="importsProductYear" name="importsProductYear" value="2022" min="2000" max="2100" style="width:90px;">
+    <button type="submit">Show Table</button>
+  </form>
+  <button id="importsProductDownloadBtn" style="display:none;margin-bottom:1em;">Download CSV</button>
+  <div id="importsProductResults"></div>
+  <div id="importsProductChart" style="margin-top:2em;"></div>
+</div>
+    <div id="tab-content-rankings" class="tab-content" style="display:none;">
+  <h3>Ranking of Countries</h3>
+  <form id="rankingsForm" style="margin-bottom:1em;">
+    <label for="rankingsYear">Year:</label>
+    <input type="number" id="rankingsYear" name="rankingsYear" value="2022" min="2000" max="2100" style="width:90px;">
+    <label for="rankingsCommodity">Commodity Code (HS or TOTAL):</label>
+    <input type="text" id="rankingsCommodity" name="rankingsCommodity" value="TOTAL" style="width:110px;">
+    <label for="rankingsFlow">Flow:</label>
+    <select id="rankingsFlow" name="rankingsFlow">
+      <option value="X">Exporters</option>
+      <option value="M">Importers</option>
+    </select>
+    <button type="submit">Show Rankings</button>
+  </form>
+  <button id="rankingsDownloadBtn" style="display:none;margin-bottom:1em;">Download CSV</button>
+  <div id="rankingsResults"></div>
+  <div id="rankingsChart" style="margin-top:2em;"></div>
+</div>
+    <div id="tab-content-bilateral" class="tab-content" style="display:none;">
+  <h3>Bilateral Trade</h3>
+  <form id="bilateralForm" style="margin-bottom:1em;">
+    <label for="bilateralReporter">Reporter Country:</label>
+    <select id="bilateralReporter" name="bilateralReporter"></select>
+    <label for="bilateralPartner">Partner Country:</label>
+    <select id="bilateralPartner" name="bilateralPartner"></select>
+    <label for="bilateralYear">Year:</label>
+    <input type="number" id="bilateralYear" name="bilateralYear" value="2022" min="2000" max="2100" style="width:90px;">
+    <label for="bilateralCommodity">Commodity Code (HS or TOTAL):</label>
+    <input type="text" id="bilateralCommodity" name="bilateralCommodity" value="TOTAL" style="width:110px;">
+    <button type="submit">Show Trade</button>
+  </form>
+  <button id="bilateralDownloadBtn" style="display:none;margin-bottom:1em;">Download CSV</button>
+  <div id="bilateralResults"></div>
+  <div id="bilateralChart" style="margin-top:2em;"></div>
+</div>
+    <div id="tab-content-data-download" class="tab-content" style="display:none;">
+  <h3>Data Download</h3>
+  <form id="dataDownloadForm" style="margin-bottom:1em;">
+    <label for="dataDownloadReporter">Reporter Country:</label>
+    <select id="dataDownloadReporter" name="dataDownloadReporter">
+      <option value="">All</option>
+    </select>
+    <label for="dataDownloadPartner">Partner Country:</label>
+    <select id="dataDownloadPartner" name="dataDownloadPartner">
+      <option value="">All</option>
+    </select>
+    <label for="dataDownloadYear">Year:</label>
+    <input type="number" id="dataDownloadYear" name="dataDownloadYear" min="2000" max="2100" style="width:90px;">
+    <label for="dataDownloadCommodity">Commodity Code (HS or TOTAL):</label>
+    <input type="text" id="dataDownloadCommodity" name="dataDownloadCommodity" style="width:110px;">
+    <label for="dataDownloadFlow">Flow:</label>
+    <select id="dataDownloadFlow" name="dataDownloadFlow">
+      <option value="">All</option>
+      <option value="X">Export</option>
+      <option value="M">Import</option>
+    </select>
+    <button type="submit">Download CSV</button>
+  </form>
+  <div id="dataDownloadStatus"></div>
+</div>
+<div id="tab-content-prediction" class="tab-content" style="display:none;">
+  <h3>Trade Flow Prediction (ML)</h3>
+  <form id="predictionForm" style="margin-bottom:1em;">
+    <label for="predictionReporter">Reporter Country:</label>
+    <select id="predictionReporter" name="predictionReporter"></select>
+    <label for="predictionPartner">Partner Country:</label>
+    <select id="predictionPartner" name="predictionPartner"></select>
+    <label for="predictionYear">Year to Predict:</label>
+    <input type="number" id="predictionYear" name="predictionYear" value="2023" min="2000" max="2100" style="width:90px;">
+    <label for="predictionCommodity">Commodity Code (HS or TOTAL):</label>
+    <input type="text" id="predictionCommodity" name="predictionCommodity" value="TOTAL" style="width:110px;">
+    <label for="predictionModel">Model:</label>
+    <select id="predictionModel" name="predictionModel">
+      <option value="linear">Linear Regression</option>
+      <option value="xgboost">XGBoost</option>
+      <option value="lstm">LSTM</option>
+    </select>
+    <button type="submit">Predict</button>
+  </form>
+  <button id="predictionDownloadBtn" style="display:none;margin-bottom:1em;">Download CSV</button>
+  <div id="predictionResults"></div>
+  <div id="predictionChart" style="margin-top:2em;"></div>
+</div>
+<!-- Data Cache Management Panel -->
+<div id="tab-content-data-cache" class="tab-content" style="display:none;">
+  <div class="container">
+    <h3>Data Cache Management</h3>
+    <p>View, use, and manage previously cached trade data to reduce API calls and work offline.</p>
+    <div class="cached-data-panel">
+      <div class="cached-data-header">
+        <span>Cached Datasets</span>
+        <div>
+          <button id="refreshCacheBtn" class="action-btn"><i class="fas fa-sync-alt"></i> Refresh</button>
+          <button id="clearAllCacheBtn" class="action-btn delete"><i class="fas fa-trash"></i> Clear All</button>
+        </div>
+      </div>
+      <div id="cachedDataList" class="cached-data-list">
+        <!-- Cache items will be populated here -->
+        <div class="cached-data-item" style="text-align:center;padding:20px;color:#666;">
+          <i class="fas fa-spinner fa-spin"></i> Loading cached data...
+        </div>
+      </div>
+    </div>
+    <div class="chart-controls">
+      <h4>Visualization Options:</h4>
+      <button class="chart-type-btn" data-type="bar"><i class="fas fa-chart-bar"></i> Bar Chart</button>
+      <button class="chart-type-btn" data-type="pie"><i class="fas fa-chart-pie"></i> Pie Chart</button>
+      <button class="chart-type-btn" data-type="line"><i class="fas fa-chart-line"></i> Line Chart</button>
+      <button class="chart-type-btn" data-type="treemap"><i class="fas fa-th-large"></i> Treemap</button>
+      <button class="chart-type-btn" data-type="map"><i class="fas fa-globe"></i> World Map</button>
+    </div>
+    <div id="cacheVisualization" class="advanced-chart-container" style="display:none;">
+      <!-- Visualizations will be rendered here -->
+    </div>
+  </div>
+</div>
+<div id="tab-content-assistant" class="tab-content" style="display:none;">
+  <div class="container">
+    <h3>AI Trade Assistant <span style="font-size:14px;color:#666;font-weight:normal;display:flex;align-items:center;gap:6px;">
+      (Powered by Google Gemma-2b on
+      <a href="https://huggingface.co/google/gemma-2b-it" target="_blank" style="display:flex;align-items:center;text-decoration:none;">
+        <img src="https://huggingface.co/front/assets/huggingface_logo.svg" alt="Hugging Face" style="height:18px;margin-right:3px;"> Hugging Face
+      </a>)
+    </span></h3>
+    <div class="chat-container" style="border: 1px solid #dee2e6; border-radius: 8px; height: 500px; display: flex; flex-direction: column; overflow: hidden;">
+      <div id="chat-messages" class="chat-messages" style="flex: 1; overflow-y: auto; padding: 20px; background-color: #f8f9fa;">
+        <!-- Welcome message -->
+        <div class="message message-assistant" style="background-color: white; border-radius: 10px; padding: 15px; margin-bottom: 15px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); max-width: 80%;">
+          <p style="margin-bottom: 10px;">👋 Hello! I'm your Trade Data Assistant powered by Google Gemma-2b.</p>
+          <p style="margin-bottom: 5px;">I can help you with:</p>
+          <ul style="padding-left: 20px; margin-bottom: 10px;">
+            <li>Understanding trade terminology and HS codes</li>
+            <li>Exploring interesting trade patterns</li>
+            <li>Finding specific trade data</li>
+            <li>Interpreting visualization results</li>
+            <li>Providing insights about international trade</li>
+          </ul>
+          <p>How can I assist you today?</p>
+        </div>
+      </div>
+      <div class="chat-input-area" style="display: flex; padding: 15px; background-color: white; border-top: 1px solid #dee2e6;">
+        <input type="text" id="chat-input" class="chat-input" placeholder="Ask me about trade data, HS codes, or how to use this application..." style="flex: 1; padding: 10px 15px; border: 1px solid #ced4da; border-radius: 4px; margin-right: 10px;">
+        <button id="chat-send-btn" class="chat-send-btn" style="background-color: #0d6efd; color: white; border: none; border-radius: 4px; padding: 10px 15px; cursor: pointer;">Send</button>
+      </div>
+    </div>
+    <div class="quick-questions" style="margin-top: 20px;">
+      <h5 style="margin-bottom: 15px;">Try asking:</h5>
+      <div style="display: flex; flex-wrap: wrap; gap: 10px;">
+        <button class="quick-question-btn" style="background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 8px 15px; cursor: pointer;">What are HS codes?</button>
+        <button class="quick-question-btn" style="background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 8px 15px; cursor: pointer;">Explain the difference between imports and exports</button>
+        <button class="quick-question-btn" style="background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 8px 15px; cursor: pointer;">What does HS code 8471 represent?</button>
+        <button class="quick-question-btn" style="background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 8px 15px; cursor: pointer;">How can I interpret trade data?</button>
+        <button class="quick-question-btn" style="background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 8px 15px; cursor: pointer;">Recommend interesting trade patterns to explore</button>
+      </div>
+    </div>
+    <div class="specialized-assistance" style="margin-top: 30px;">
+      <h5 style="margin-bottom: 15px;">Specialized Assistance:</h5>
+      <div style="display:flex; flex-wrap:wrap; gap:15px;">
+        <div style="flex:1; min-width:300px;">
+          <h6>HS Code Lookup</h6>
+          <div style="display: flex; gap: 10px;">
+            <input type="text" id="hs-code-input" placeholder="Enter HS code (e.g. 8471)" style="flex: 1; padding: 8px 12px; border: 1px solid #ced4da; border-radius: 4px;">
+            <button id="explain-hs-btn" style="background-color: #28a745; color: white; border: none; border-radius: 4px; padding: 8px 15px; cursor: pointer;">Explain</button>
+          </div>
+        </div>
+        <div style="flex:1; min-width:300px;">
+          <h6>Trade Recommendation</h6>
+          <div style="margin-bottom: 10px;">
+            <select id="recommendation-country" style="width: 100%; padding: 8px 12px; border: 1px solid #ced4da; border-radius: 4px;">
+              <option value="">Select a country (optional)</option>
+              <!-- Will be populated from COUNTRY_CODES -->
+            </select>
+          </div>
+          <div style="display: flex; gap: 10px;">
+            <input type="text" id="recommendation-product" placeholder="Product (optional)" style="flex: 1; padding: 8px 12px; border: 1px solid #ced4da; border-radius: 4px;">
+            <button id="get-recommendation-btn" style="background-color: #17a2b8; color: white; border: none; border-radius: 4px; padding: 8px 15px; cursor: pointer;">Get Insights</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- Specialized Assistance Panel -->
+<div id="tab-content-specialized" class="tab-content" style="display:none;">
+  <div class="container">
+    <h4>Specialized Assistance: <span style="font-size:14px;color:#666;font-weight:normal;display:inline-flex;align-items:center;">
+      <img src="https://huggingface.co/front/assets/huggingface_logo.svg" alt="Hugging Face" style="height:16px;margin:0 4px;"> Powered by Hugging Face
+    </span></h4>
+    <div style="display:flex;gap:10px;flex-wrap:wrap;">
+      <div style="flex:1;min-width:300px;">
+        <h5>HS Code Lookup</h5>
+        <div class="input-group">
+          <input type="text" id="hs-code-input" placeholder="Enter HS code (e.g. 8471)" class="chat-input" style="width:70%" />
+          <button id="explain-hs-btn" class="chat-send-btn" style="width:25%">Explain</button>
+        </div>
+      </div>
+      <div style="flex:1;min-width:300px;">
+          <h5>Trade Recommendation</h5>
+          <div class="input-group" style="margin-bottom:10px;">
+            <select id="recommendation-country" class="chat-input" style="width:100%">
+              <option value="">Select a country (optional)</option>
+              <!-- Will be populated from COUNTRY_CODES -->
+            </select>
+          </div>
+          <div class="input-group">
+            <input type="text" id="recommendation-product" placeholder="Product (optional)" class="chat-input" style="width:70%" />
+            <button id="get-recommendation-btn" class="chat-send-btn" style="width:25%">Get Insights</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- Animation styles -->
+<style>
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+</style>
+<!-- Direct tab navigation script -->
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    // Handle iframe loading
+    const iframe = document.getElementById('hf-assistant-iframe');
+    const loadingIndicator = document.getElementById('assistant-loading');
+    if (iframe && loadingIndicator) {
+      iframe.onload = function() {
+        loadingIndicator.style.display = 'none';
+      };
+      // Set a timeout in case the iframe fails to trigger onload
+      setTimeout(function() {
+        loadingIndicator.style.display = 'none';
+      }, 8000); // Hide after 8 seconds regardless
+    }
+    // Direct tab navigation logic
+    const tabs = document.querySelectorAll('#main-tabs .tab');
+    const tabContents = document.querySelectorAll('.tab-content');
+    tabs.forEach(tab => {
+      tab.addEventListener('click', function() {
+        const tabName = tab.getAttribute('data-tab');
+        // Check if this is the AI Assistant tab
+        if (tabName === 'assistant') {
+          // Option to redirect directly to Hugging Face Space
+          // Uncomment the next line if you want direct redirect
+          // window.open('https://huggingface.co/spaces/jomasego/ai-trade-assistant', '_blank');
+        }
+        // Hide any visible spinners
+        document.querySelectorAll('.spinner').forEach(spinner => {
+          spinner.style.display = 'none';
+        });
+        // Update active tab
+        tabs.forEach(t => {
+          t.classList.remove('active');
+          t.setAttribute('aria-selected', 'false');
+        });
+        tab.classList.add('active');
+        tab.setAttribute('aria-selected', 'true');
+        // Show corresponding tab content
+        tabContents.forEach(panel => {
+          if (panel.id === 'tab-content-' + tabName) {
+            panel.style.display = 'block';
+          } else {
+            panel.style.display = 'none';
+          }
+        });
+        // Focus the active tab
+        tab.focus();
+      });
+      // Keyboard navigation
+      tab.addEventListener('keydown', function(e) {
+        if (e.key === 'ArrowRight') {
+          e.preventDefault();
+          tabs[(idx + 1) % tabs.length].focus();
+        } else if (e.key === 'ArrowLeft') {
+          e.preventDefault();
+          tabs[(idx - 1 + tabs.length) % tabs.length].focus();
+        } else if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          tab.click();
+        }
+      });
+    });
+    // Initial load - make sure the active tab content is visible
+    const activeTab = document.querySelector('#main-tabs .tab.active');
+    if (activeTab) {
+      const tabName = activeTab.getAttribute('data-tab');
+      const activePanel = document.getElementById('tab-content-' + tabName);
+      if (activePanel) {
+        activePanel.style.display = 'block';
+      }
+    }
+  });
+</script>
+</body>
+</html>