harshit.pathak
/
content_quality_tool


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
							
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Attribute Extraction</title>
  <link rel="stylesheet" href="{% static './css/adminlte.css' %}">
  <link rel="stylesheet" href="{% static 'css/attr-extraction-revised.css' %}">
</head>
<body>
  {% include 'header.html' %}
  {% include 'sidebar.html' %}

  <main class="container">
    <header class="hero">
      <div class="title">
        <div class="title-logo" aria-hidden="true">
          <svg width="26" height="26" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 12l7-7v5h4V5l7 7-7 7v-5h-4v5l-7-7z" fill="#fff"/>
          </svg>
        </div>
        <div>
          <h1>⚒️ Attribute Extraction</h1>
          <div class="sub">Upload products, select attributes, and compare AI vs. existing values.</div>
        </div>
      </div>
      <div class="actions">
        <button id="uploadOpen" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#uploadModal">Upload</button>
        <button id="btnReset" class="btn btn-ghost">Reset</button>
        <button id="btnSubmit" class="btn btn-success">Extract</button>
      </div>
    </header>

    <section class="card">
      <div class="card-header api-header-flex">
        <h2>API Summary</h2>
        <div class="download-section">
          <button id="downloadResultBtn" class="btn btn-secondary">Download</button>
        </div>
      </div>
      <div id="api-summary" class="card-body" style="display:none;">
        <div class="summary">
          <div class="stat"><div class="label">Total products</div><div id="statTotal" class="value">0</div></div>
          <div class="stat"><div class="label">Successful</div><div id="statOk" class="value">0</div></div>
          <div class="stat"><div class="label">Failed</div><div id="statKo" class="value">0</div></div>
        </div>
      </div>
    </section>

    <section class="card">
      <div class="card-header">
        <h2>Product Inventory</h2>
        <div class="toolbar">
          <div class="seg" role="tablist" aria-label="Layout switcher">
            <button id="btnTable" class="active" role="tab" aria-selected="true">Table</button>
            <button id="btnCards" role="tab" aria-selected="false">Cards</button>
          </div>
          <span id="selectionInfo" class="pill">No products selected</span>
          <button id="btnSelectAll" class="btn btn-secondary">Select all</button>
          <label class="pill">Threshold: <input id="thresholdRange" type="range" min="0" max="1" step="0.05" value="0.5"/> <strong id="thresholdValue">0.5</strong></label>
          <label class="pill"><input id="extract_additional" type="checkbox" checked/> Extract Additional</label>
          <label class="pill"><input id="process_image" type="checkbox"/> Process Image</label>
          <select id="mandatory-attributes" class="attribute-select" multiple></select>
        </div>
      </div>
      <div class="card-body">
        <div id="tableContainer" class="table-wrap"></div>
        <div id="cardsContainer" class="list" style="display:none;"></div>
        <div id="paginationBar" class="pagination-bar" style="display:none;"></div>
      </div>
    </section>
  </main>

  <!-- Upload Modal -->
  <div class="modal fade" id="uploadModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Upload files</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div id="dropzone" class="dropzone">
            <p>Drag & drop files here or browse</p>
            <input id="uploadFiles" type="file" multiple hidden>
            <div id="fileInfo" class="file-info">No files selected.</div>
          </div>
          <div class="progress mt-3">
            <div id="uploadBar" class="progress-bar" role="progressbar" style="width:0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <div id="uploadStatus" class="mt-2 small"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-ghost" data-bs-dismiss="modal">Cancel</button>
          <button type="button" id="uploadStart" class="btn btn-success">Start upload</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Full page loader -->
  <div id="full-page-loader" class="loader-overlay" style="display:none;">
    <div class="spinner-border text-light" role="status"></div>
  </div>

  {% include 'footer.html' %}
  <script src="{% static 'js/attr-extraction.js' %}"></script>
</body>
</html>