deloy prj on hf

.gitignore

@@ -0,0 +1 @@
+.env

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "bracketSpacing": true,
+  "arrowParens": "always"
+}

Dockerfile

@@ -0,0 +1,9 @@
+FROM nginx:alpine
+
+RUN rm /etc/nginx/conf.d/default.conf
+
+COPY default.conf /etc/nginx/conf.d/default.conf
+
+COPY . /usr/share/nginx/html
+
+EXPOSE 7860

constants.js

@@ -0,0 +1,81 @@
+export const closeIcon = `<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 26L26 14M14 14L26 26" stroke="#9BA5B7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
+export const fileIcon = `<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" rx="20" fill="#FFF6EE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.5383 11.8375L26.9133 16.2125C27.0889 16.3883 27.1875 16.6266 27.1875 16.875V26.875C27.1875 27.2894 27.0229 27.6868 26.7299 27.9799C26.4368 28.2729 26.0394 28.4375 25.625 28.4375H14.375C13.9606 28.4375 13.5632 28.2729 13.2701 27.9799C12.9771 27.6868 12.8125 27.2894 12.8125 26.875V13.125C12.8125 12.7106 12.9771 12.3132 13.2701 12.0201C13.5632 11.7271 13.9606 11.5625 14.375 11.5625H21.875C21.9982 11.5625 22.1202 11.5868 22.234 11.634C22.3478 11.6812 22.4512 11.7503 22.5383 11.8375ZM22.5 16.25H24.2969L22.5 14.4531V16.25ZM14.6875 13.4375V26.5625H25.3125V18.125H21.5625C21.3139 18.125 21.0754 18.0262 20.8996 17.8504C20.7238 17.6746 20.625 17.4361 20.625 17.1875V13.4375H14.6875Z" fill="#FD7E14"/>
+</svg>`;
+export const eyeIcon = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.06202 12.348C1.97868 12.1235 1.97868 11.8765 2.06202 11.652C2.87372 9.68385 4.25153 8.00103 6.02079 6.81689C7.79004 5.63275 9.87106 5.00061 12 5.00061C14.129 5.00061 16.21 5.63275 17.9792 6.81689C19.7485 8.00103 21.1263 9.68385 21.938 11.652C22.0214 11.8765 22.0214 12.1235 21.938 12.348C21.1263 14.3161 19.7485 15.999 17.9792 17.1831C16.21 18.3672 14.129 18.9994 12 18.9994C9.87106 18.9994 7.79004 18.3672 6.02079 17.1831C4.25153 15.999 2.87372 14.3161 2.06202 12.348Z" stroke="#454545" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="#454545" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
+export const trashIcon = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.25 4.5H3.75C3.45163 4.5 3.16548 4.61853 2.9545 4.8295C2.74353 5.04048 2.625 5.32663 2.625 5.625C2.625 5.92337 2.74353 6.20952 2.9545 6.4205C3.16548 6.63147 3.45163 6.75 3.75 6.75H4.125V19.5C4.125 19.9973 4.32254 20.4742 4.67417 20.8258C5.02581 21.1775 5.50272 21.375 6 21.375H18C18.4973 21.375 18.9742 21.1775 19.3258 20.8258C19.6775 20.4742 19.875 19.9973 19.875 19.5V6.75H20.25C20.5484 6.75 20.8345 6.63147 21.0455 6.4205C21.2565 6.20952 21.375 5.92337 21.375 5.625C21.375 5.32663 21.2565 5.04048 21.0455 4.8295C20.8345 4.61853 20.5484 4.5 20.25 4.5ZM17.625 19.125H6.375V6.75H17.625V19.125ZM7.125 1.875C7.125 1.57663 7.24353 1.29048 7.4545 1.0795C7.66548 0.868526 7.95163 0.75 8.25 0.75H15.75C16.0484 0.75 16.3345 0.868526 16.5455 1.0795C16.7565 1.29048 16.875 1.57663 16.875 1.875C16.875 2.17337 16.7565 2.45952 16.5455 2.6705C16.3345 2.88147 16.0484 3 15.75 3H8.25C7.95163 3 7.66548 2.88147 7.4545 2.6705C7.24353 2.45952 7.125 2.17337 7.125 1.875Z" fill="#FF5773"/>
+</svg>`;
+export const completedIcon = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_89_885)">
+<path d="M10.0001 18.3333C14.6025 18.3333 18.3334 14.6024 18.3334 9.99999C18.3334 5.39762 14.6025 1.66666 10.0001 1.66666C5.39771 1.66666 1.66675 5.39762 1.66675 9.99999C1.66675 14.6024 5.39771 18.3333 10.0001 18.3333Z" stroke="#4BED73" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.66675 10L9.16675 12.5L14.1667 7.5" stroke="#4BED73" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_89_885">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>`;
+export const processingIcon = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_89_954)">
+<path d="M10 5V10L11.3 10.65" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.0224 18.2708C9.33144 18.48 7.61704 18.1657 6.11018 17.3705C4.60332 16.5753 3.37643 15.3373 2.59482 13.8233C1.81322 12.3093 1.51447 10.5922 1.73883 8.90317C1.96319 7.21419 2.69988 5.63456 3.84963 4.37715C4.99937 3.11973 6.50692 2.24496 8.16913 1.8707C9.83134 1.49645 11.5683 1.64069 13.146 2.28401C14.7237 2.92732 16.0663 4.03879 16.9929 5.46863C17.9195 6.89848 18.3855 8.57798 18.3282 10.2808" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.6667 15L15.0001 11.6667L18.3334 15" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 18.3334V11.6667" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_89_954">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>`;
+export const pendingIcon = `<svg
+                        width="20"
+                        height="20"
+                        viewBox="0 0 20 20"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <g clip-path="url(#clip0_89_973)">
+                          <path
+                            d="M10.0001 18.3334C14.6025 18.3334 18.3334 14.6024 18.3334 10C18.3334 5.39765 14.6025 1.66669 10.0001 1.66669C5.39771 1.66669 1.66675 5.39765 1.66675 10C1.66675 14.6024 5.39771 18.3334 10.0001 18.3334Z"
+                            stroke="white"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          />
+                        </g>
+                        <defs>
+                          <clipPath id="clip0_89_973">
+                            <rect width="20" height="20" fill="white" />
+                          </clipPath>
+                        </defs>
+                      </svg>`;
+export const confirmIcon = `<svg
+                  width="48"
+                  height="48"
+                  viewBox="0 0 48 48"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <rect
+                    width="48"
+                    height="48"
+                    rx="24"
+                    fill="#00BC7D"
+                    fill-opacity="0.16"
+                  />
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M24 15C19.0294 15 15 19.0294 15 24C15 28.9706 19.0294 33 24 33C28.9706 33 33 28.9706 33 24C33 19.0294 28.9706 15 24 15ZM13 24C13 17.9249 17.9249 13 24 13C30.0751 13 35 17.9249 35 24C35 30.0751 30.0751 35 24 35C17.9249 35 13 30.0751 13 24ZM29.2071 20.2929C29.5976 20.6834 29.5976 21.3166 29.2071 21.7071L23.2071 27.7071C22.8166 28.0976 22.1834 28.0976 21.7929 27.7071L18.7929 24.7071C18.4024 24.3166 18.4024 23.6834 18.7929 23.2929C19.1834 22.9024 19.8166 22.9024 20.2071 23.2929L22.5 25.5858L27.7929 20.2929C28.1834 19.9024 28.8166 19.9024 29.2071 20.2929Z"
+                    fill="#00BC7D"
+                  />
+                </svg>`;

default.conf

@@ -0,0 +1,9 @@
+server {
+    listen 8004;
+    server_name localhost;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html;
+    }
+}

feedback.js

@@ -0,0 +1,239 @@
+import { confirmIcon } from './constants.js';
+import { apiBaseUrl } from './main.js';
+const feedbackButton = document.getElementById('btn-feedback-face-check');
+const closeFeedback = document.getElementById('close-feedback-1765253515534');
+const liveChat = document.getElementById('live-chat-1765253515534');
+const feedbackContainer = document.getElementById('feedback-1765253515534');
+const blockNotification = document.getElementById(
+  'block-notification-1765336324468'
+);
+const blockQuestion = document.getElementById('block-question-1765336324468');
+const footerFeedback = document.getElementById('footer-feedback-1765336324468');
+const isSuccess = {};
+const isLoading = {};
+const isFailed = {};
+Object.defineProperty(isSuccess, 'value', {
+  set(newValue) {
+    if (newValue) {
+      if (blockNotification) {
+        const contentSentSuccessfully = `<div class="notification-content-feedback">
+                ${confirmIcon}
+                <p class="notification-message">Feedback sent successfully!</p>
+              </div>`;
+        blockNotification.innerHTML = contentSentSuccessfully;
+        blockNotification.classList.remove('display-none');
+        feedbackButton.disabled = true;
+        feedbackButton.classList.add('btn-disabled');
+        footerFeedback.classList.add('display-none');
+      }
+
+      if (blockQuestion) {
+        blockQuestion.classList.add('display-none');
+      }
+    } else {
+      blockNotification.classList.add('display-none');
+      blockQuestion.classList.remove('display-none');
+      blockNotification.innerHTML = '';
+      feedbackButton.disabled = false;
+      feedbackButton.classList.remove('btn-disabled');
+      footerFeedback.classList.remove('display-none');
+    }
+    this._value = newValue;
+  },
+  get() {
+    return this._value;
+  },
+});
+Object.defineProperty(isLoading, 'value', {
+  set(newValue) {
+    if (newValue) {
+      feedbackButton.disabled = true;
+      feedbackButton.classList.add('btn-disabled');
+      feedbackButton.innerText = 'Sending...';
+    } else {
+      feedbackButton.disabled = false;
+      feedbackButton.classList.remove('btn-disabled');
+      feedbackButton.innerText = 'Send';
+    }
+    this._value = newValue;
+  },
+  get() {
+    return this._value;
+  },
+});
+
+function resetFeedbackForm() {
+  const radios = document.querySelectorAll('.question input[type="radio"]');
+  const textareas = document.querySelectorAll('.feedback textarea');
+  const stars = document.querySelectorAll('.options-stars .star');
+
+  radios.forEach((radio) => {
+    radio.checked = false;
+  });
+
+  textareas.forEach((textarea) => {
+    textarea.value = '';
+  });
+
+  stars.forEach((star) => {
+    star.classList.remove('active');
+  });
+}
+
+function assignRadioValues() {
+  const questions = document.querySelectorAll('.question');
+
+  questions.forEach((question) => {
+    const questionId = question.id;
+    const options = question.querySelectorAll('.option');
+
+    options.forEach((option, index) => {
+      const radio = option.querySelector('input[type="radio"]');
+      if (!radio) return;
+
+      if (questionId === 'q0') {
+        radio.value = String(index + 1);
+      } else {
+        const optionText = option
+          .querySelector('.option-text')
+          ?.textContent?.trim();
+        if (optionText) {
+          radio.value = optionText;
+        } else if (!radio.value) {
+          radio.value = String(index + 1);
+        }
+      }
+    });
+  });
+}
+
+function initializeStarRatings() {
+  const starGroups = document.querySelectorAll('.options-stars');
+
+  starGroups.forEach((group) => {
+    const options = Array.from(group.querySelectorAll('.option'));
+    const radios = options
+      .map((option) => option.querySelector('input[type="radio"]'))
+      .filter(Boolean);
+    const stars = options
+      .map((option) => option.querySelector('.star'))
+      .filter(Boolean);
+
+    const updateStars = (activeIndex) => {
+      stars.forEach((star, index) => {
+        star.classList.toggle('active', index <= activeIndex);
+      });
+    };
+
+    if (radios.length === 0 || stars.length === 0) {
+      return;
+    }
+
+    radios.forEach((radio, index) => {
+      radio.value = radio.value || String(index + 1);
+      radio.addEventListener('change', () => {
+        updateStars(index);
+      });
+
+      if (radio.checked) {
+        updateStars(index);
+      }
+    });
+
+    if (!radios.some((radio) => radio.checked)) {
+      updateStars(-1);
+    }
+  });
+}
+
+function collectFeedbackData() {
+  const responses = {};
+  const questions = document.querySelectorAll('.question');
+
+  questions.forEach((question) => {
+    if (!question.id) return;
+    const radios = question.querySelectorAll('input[type="radio"]');
+    const selected = question.querySelector('input[type="radio"]:checked');
+    const textarea = question.querySelector('textarea');
+
+    if (radios.length > 0) {
+      if (!selected) {
+        responses[question.id] = '-';
+      } else {
+        let value = selected.value;
+        if (!value) {
+          const optionText = selected
+            .closest('.opt')
+            ?.querySelector('.option-text')
+            ?.textContent?.trim();
+          value = optionText || '-';
+        }
+        responses[question.id] = value;
+      }
+
+      if (textarea) {
+        const textValue = textarea.value.trim();
+        responses[`${question.id}_comments`] = textValue || '-';
+      }
+    } else if (textarea) {
+      const textValue = textarea.value.trim();
+      responses[question.id] = textValue || '-';
+    } else {
+      responses[question.id] = '-';
+    }
+  });
+
+  return responses;
+}
+
+async function handleFeedbackSubmit(event) {
+  event.preventDefault();
+  isLoading.value = true;
+  // Simulate async feedback submission
+  const feedbackData = collectFeedbackData();
+
+  axios
+    .post(`${apiBaseUrl}/survey`, feedbackData, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+    .then((response) => {
+      console.log('Feedback submitted successfully:', response.data);
+      isLoading.value = false;
+      resetFeedbackForm();
+      isSuccess.value = true;
+    })
+    .catch((error) => {
+      console.error('Error submitting feedback:', error);
+      isLoading.value = false;
+      isFailed.value = true;
+    });
+}
+
+assignRadioValues();
+initializeStarRatings();
+
+if (feedbackButton) {
+  feedbackButton.addEventListener('click', handleFeedbackSubmit);
+}
+
+window.collectFeedbackData = collectFeedbackData;
+
+closeFeedback.addEventListener('click', () => {
+  if (feedbackContainer) {
+    feedbackContainer.classList.add('display-none');
+    liveChat.classList.remove('display-none');
+
+    isLoading.value = false;
+    isFailed.value = false;
+    isSuccess.value = false;
+  }
+});
+
+liveChat.addEventListener('click', () => {
+  if (feedbackContainer) {
+    feedbackContainer.classList.remove('display-none');
+    liveChat.classList.add('display-none');
+  }
+});

index.html

@@ -0,0 +1,788 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>News Verification</title>
+    <link rel="stylesheet" href="styles.css" />
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script
+      type="text/javascript"
+      src="https://unpkg.com/mediainfo.js"
+    ></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
+  </head>
+  <body>
+    <div class="container">
+      <header class="header-face-check">
+        <h1 class="title-header-face-check">News Verification</h1>
+      </header>
+      <main class="main-content">
+        <section class="upload-section">
+          <div class="wrapper-upload-box scroll-box">
+            <div class="upload-box">
+              <p>Upload a json file</p>
+              <label for="metadata-input" class="drop-zone">
+                <div id="wrapper-upload-face-check" class="wrapper-upload">
+                  <svg
+                    class="drop-zone-icon"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke-width="1.5"
+                    stroke="currentColor"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+                    />
+                  </svg>
+                  <p>
+                    <span class="primary-1">Click here</span> to upload your
+                    file or drag.
+                  </p>
+                  <p>Supported Format: JSON</p>
+                </div>
+              </label>
+              <input
+                type="file"
+                id="metadata-input"
+                class="display-none"
+                accept=".json"
+              />
+            </div>
+            <div
+              id="wrapper-metadata-face-check"
+              class="display-none list-file"
+            ></div>
+            <div class="line"></div>
+            <div class="upload-box">
+              <p>Upload media files</p>
+              <label for="file-input" class="drop-zone">
+                <div
+                  id="wrapper-upload-face-check-media"
+                  class="wrapper-upload"
+                >
+                  <svg
+                    class="drop-zone-icon"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke-width="1.5"
+                    stroke="currentColor"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+                    />
+                  </svg>
+                  <p>
+                    <span class="primary-1">Click here</span> to upload your
+                    files or drag.
+                  </p>
+                  <p>Supported Format: PNG, JPG, JPEG, GIF, MP4</p>
+                </div>
+              </label>
+              <input
+                type="file"
+                id="file-input"
+                class="display-none"
+                multiple
+                accept=".png,.jpg,.jpeg,.gif,.mp4"
+              />
+            </div>
+            <div
+              id="wrapper-files-face-check"
+              class="display-none list-file"
+            ></div>
+          </div>
+          <div class="button-group">
+            <button id="btn-clear-face-check" class="btn btn-clear">
+              Clear
+            </button>
+            <button id="btn-submit-face-check" class="btn btn-submit">
+              Submit
+            </button>
+          </div>
+        </section>
+        <section class="output-section">
+          <div id="menu-1762855257376" class="menu">
+            <div onclick="changeTab('case_summary', this)" class="item active">
+              Case Summary
+            </div>
+            <div
+              onclick="changeTab('content_classification', this)"
+              class="item"
+            >
+              Content Classification
+            </div>
+            <div onclick="changeTab('verified_evidence', this)" class="item">
+              Verified Evidence
+            </div>
+            <div onclick="changeTab('forensic_analysis', this)" class="item">
+              Forensic Analysis
+            </div>
+            <div
+              id="other_evidence-1763023210526"
+              onclick="changeTab('other_evidence', this)"
+              class="item"
+            >
+              Other Evidence & Findings
+            </div>
+          </div>
+          <div class="output-wrapper">
+            <div id="output-area" class="output-face-check scroll-box">
+              <p class="opacity-50">Verification result comes here...</p>
+            </div>
+            <div
+              id="status-face-check"
+              class="wrapper-status-face-check display-none"
+            ></div>
+          </div>
+          <div class="wrapper-btn-save">
+            <button id="btn-save-face-check" class="btn btn-save">Save</button>
+          </div>
+        </section>
+        <section id="feedback-1765253515534" class="feedback display-none">
+          <div class="header-feedback">
+            <p class="content-header-feedback">Help us improve!</p>
+            <div id="close-feedback-1765253515534" class="close-feedback">
+              <svg
+                width="40"
+                height="40"
+                viewBox="0 0 40 40"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M14 26L26 14M14 14L26 26"
+                  stroke="#38393E"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </div>
+          </div>
+          <div class="content-feedback">
+            <div id="block-question-1765336324468" class="flex flex-col gap-6">
+              <div class="question" id="q0">
+                <div class="q-title">How accurate was the conclusion?</div>
+                <div class="options-stars">
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q0" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q0" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q0" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q0" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q0" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <div class="question" id="q1">
+                <div class="q-title">
+                  Did the algorithm correctly classify this content?
+                </div>
+                <div class="options">
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q1" />
+                      <div class="radio"></div>
+                      <div class="option-text">Yes</div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q1" />
+                      <div class="radio"></div>
+                      <div class="option-text">No - It was actually Real</div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q1" />
+                      <div class="radio"></div>
+                      <div class="option-text">
+                        No - It was actually AI-Generated
+                      </div>
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <div class="question" id="q2">
+                <div class="q-title">Were the provided links relevant?</div>
+                <div class="options links-list">
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q2" />
+                      <div class="radio"></div>
+                      <div class="option-text">
+                        ✅ All links worked and were relevant
+                      </div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q2" />
+                      <div class="radio"></div>
+                      <div class="option-text">
+                        ⚠️ Some links were broken/dead
+                      </div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input class="radio" type="radio" name="q2" />
+                      <div class="radio"></div>
+                      <div class="option-text">
+                        ❌ Links were unrelated to the topic
+                      </div>
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <div class="question" id="q3">
+                <div class="q-title">
+                  Was the technical analysis understandable?
+                </div>
+                <div class="options links-list">
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q3" />
+                      <div class="radio"></div>
+                      <div class="option-text">Yes, clear</div></label
+                    >
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q3" />
+                      <div class="radio"></div>
+                      <div class="option-text">
+                        Too technical / Hard to understand
+                      </div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input class="radio" type="radio" name="q3" />
+                      <div class="radio"></div>
+                      <div class="option-text">Not enough detail</div>
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <div class="question" id="q4">
+                <div class="q-title">
+                  Did the report contain any hallucinations (made-up facts)?
+                </div>
+                <div class="options links-list">
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q4" />
+                      <div class="radio"></div>
+                      <div class="option-text">No issues</div></label
+                    >
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q4" />
+                      <div class="radio"></div>
+                      <div class="option-text">Invented dates/times</div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input class="radio" type="radio" name="q4" />
+                      <div class="radio"></div>
+                      <div class="option-text">Invented people/names</div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input class="radio" type="radio" name="q4" />
+                      <div class="radio"></div>
+                      <div class="option-text">Citations that don't exist</div>
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <!-- 2.4 -->
+              <div class="question" id="q5">
+                <div class="q-title">
+                  Did the app clearly identify the main people, organizations,
+                  or sources involved in the news item?
+                </div>
+                <div class="options-stars">
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q5" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q5" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q5" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q5" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q5" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <div class="question" id="q6">
+                <div class="q-title">
+                  How accurate did the app's assessment of the credibility of
+                  the "Who" (e.g., source, expert, witness) seem to you?
+                </div>
+                <div class="options-stars">
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q6" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q6" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q6" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q6" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q6" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <!-- 2.5 -->
+              <div class="question" id="q7">
+                <div class="q-title">
+                  Did the app correctly identify the central claim or action of
+                  the news story?
+                </div>
+                <div class="options links-list">
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q7" />
+                      <div class="radio"></div>
+                      <div class="option-text">Yes</div></label
+                    >
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q7" />
+                      <div class="radio"></div>
+                      <div class="option-text">No</div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input class="radio" type="radio" name="q7" />
+                      <div class="radio"></div>
+                      <div class="option-text">Partially</div>
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <div class="question" id="q8">
+                <div class="q-title">
+                  How well did the app's verification evidence address the
+                  specific details of the "What"?"
+                </div>
+                <div class="options-stars">
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q8" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q8" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q8" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q8" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q8" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <!-- 2.6 -->
+              <div class="question" id="q9">
+                <div class="q-title">
+                  Did the app clearly show when the original event/information
+                  was first published or occurred?
+                </div>
+                <div class="options-stars">
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q9" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q9" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q9" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q9" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q9" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <div class="question" id="q10">
+                <div class="q-title">
+                  How useful was the time context (e.g., date, timeline of
+                  events) in helping you determine the news' authenticity?
+                </div>
+                <div class="options-stars">
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q10" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q10" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q10" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q10" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q10" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <!-- 2.7 -->
+              <div class="question" id="q11">
+                <div class="q-title">
+                  Was the location of the event ("Where") specified and verified
+                  by the app's output?
+                </div>
+                <div class="options links-list">
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q11" />
+                      <div class="radio"></div>
+                      <div class="option-text">Yes</div></label
+                    >
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q11" />
+                      <div class="radio"></div>
+                      <div class="option-text">No</div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input class="radio" type="radio" name="q11" />
+                      <div class="radio"></div>
+                      <div class="option-text">Not Applicable</div>
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <div class="question" id="q12">
+                <div class="q-title">
+                  Did the app provide sufficient evidence (e.g., images, maps,
+                  source addresses) to confirm the "Where" of the event?
+                </div>
+                <div class="options-stars">
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q12" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q12" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q12" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q12" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q12" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <!-- 2.8 -->
+              <div class="question" id="q13">
+                <div class="q-title">
+                  How well did the app explain the motive or purpose behind the
+                  original claim (e.g., persuasion, profit, error)?
+                </div>
+                <div class="options-stars">
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q13" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q13" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q13" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q13" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q13" />
+                      <div class="star"></div>
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <div class="question" id="q14">
+                <div class="q-title">
+                  Did the "Why" section help you understand if the news was
+                  designed to be misleading or biased?
+                </div>
+                <div class="options links-list">
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q14" />
+                      <div class="radio"></div>
+                      <div class="option-text">Yes</div></label
+                    >
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q14" />
+                      <div class="radio"></div>
+                      <div class="option-text">No</div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input class="radio" type="radio" name="q14" />
+                      <div class="radio"></div>
+                      <div class="option-text">Already Clear</div>
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <!-- 2.9 -->
+              <div class="question" id="q15">
+                <div class="q-title">What is your profession?</div>
+                <div class="options links-list">
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q15" />
+                      <div class="radio"></div>
+                      <div class="option-text">
+                        Journalist / Fact Checker
+                      </div></label
+                    >
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input type="radio" name="q15" />
+                      <div class="radio"></div>
+                      <div class="option-text">Researcher / Student</div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input class="radio" type="radio" name="q15" />
+                      <div class="radio"></div>
+                      <div class="option-text">Law Enforcement / OSINT</div>
+                    </label>
+                  </div>
+                  <div class="option">
+                    <label class="opt">
+                      <input class="radio" type="radio" name="q15" />
+                      <div class="radio"></div>
+                      <div class="option-text">General User</div>
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <div class="question" id="q16">
+                <label class="textarea" for="feedback-q16-comments">
+                  <span class="textarea-label">
+                    Help us improve. If the verification failed, what did we
+                    miss?
+                  </span>
+                </label>
+                <textarea
+                  id="feedback-q16-comments"
+                  class="feedback-textarea"
+                  name="q16_comments"
+                  rows="4"
+                  placeholder="Text value"
+                ></textarea>
+              </div>
+            </div>
+            <div
+              id="block-notification-1765336324468"
+              class="display-none"
+            ></div>
+          </div>
+          <div id="footer-feedback-1765336324468" class="footer-feedback">
+            <button id="btn-feedback-face-check" class="btn btn-feedback">
+              Send
+            </button>
+          </div>
+        </section>
+      </main>
+    </div>
+    <div id="wrapper-modal-1760410479496" class="wrapper-modal">
+      <div id="model-1760410479496" class="modal"></div>
+    </div>
+    <div id="live-chat-1765253515534" class="live-chat">
+      <div>
+        <svg
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          focusable="false"
+          aria-hidden="true"
+        >
+          <path
+            d="M18.96 28.84C17.3867 28.84 15.16 27.7333 13.4 22.44L12.44 19.56L9.56001 18.6C4.28001 16.84 3.17334 14.6133 3.17334 13.04C3.17334 11.48 4.28001 9.23997 9.56001 7.46664L20.88 3.69331C23.7067 2.74664 26.0667 3.02664 27.52 4.46664C28.9733 5.90664 29.2533 8.27997 28.3067 11.1066L24.5333 22.4266C22.76 27.7333 20.5333 28.84 18.96 28.84ZM10.1867 9.37331C6.48001 10.6133 5.16001 12.08 5.16001 13.04C5.16001 14 6.48001 15.4666 10.1867 16.6933L13.5467 17.8133C13.84 17.9066 14.08 18.1466 14.1733 18.44L15.2933 21.8C16.52 25.5066 18 26.8266 18.96 26.8266C19.92 26.8266 21.3867 25.5066 22.6267 21.8L26.4 10.48C27.08 8.42664 26.96 6.74664 26.0933 5.87997C25.2267 5.01331 23.5467 4.90664 21.5067 5.58664L10.1867 9.37331Z"
+            fill="#ffffff"
+          ></path>
+          <path
+            d="M13.48 19.2C13.2267 19.2 12.9733 19.1066 12.7733 18.9066C12.3867 18.52 12.3867 17.88 12.7733 17.4933L17.5467 12.7066C17.9333 12.32 18.5733 12.32 18.96 12.7066C19.3467 13.0933 19.3467 13.7333 18.96 14.12L14.1867 18.9066C14 19.1066 13.7333 19.2 13.48 19.2Z"
+            fill="#ffffff"
+          ></path>
+        </svg>
+      </div>
+      <div class="live-chat-text">Send your feedback</div>
+    </div>
+    <script type="module" src="constants.js"></script>
+    <script type="module" src="main.js"></script>
+    <script type="module" src="serverSentEvents.js"></script>
+    <script type="module" src="feedback.js"></script>
+  </body>
+</html>

main.js

@@ -0,0 +1,948 @@
+import { closeIcon, eyeIcon, fileIcon, trashIcon } from './constants.js';
+
+const inputElement = document.getElementById('file-input');
+const metadataElement = document.getElementById('metadata-input');
+
+const outputElement = document.getElementById('output-area');
+const btnClear = document.getElementById('btn-clear-face-check');
+const btnSubmit = document.getElementById('btn-submit-face-check');
+const btnSave = document.getElementById('btn-save-face-check');
+const wrapperFilesElement = document.getElementById('wrapper-files-face-check');
+const wrapperMetadataElement = document.getElementById(
+  'wrapper-metadata-face-check'
+);
+const wrapperUploadElement = document.getElementById(
+  'wrapper-upload-face-check'
+);
+const wrapperModalElement = document.getElementById(
+  'wrapper-modal-1760410479496'
+);
+const contentModalElement = document.getElementById('model-1760410479496');
+const dropZones = document.getElementsByClassName('drop-zone');
+const fileRemoves = document.getElementsByClassName('file-remove');
+const statusFaceCheckElement = document.getElementById('status-face-check');
+const tabMenuElement = document.getElementById('menu-1762855257376');
+const tabItems = tabMenuElement.getElementsByClassName('item');
+const livechat = document.getElementById('live-chat-1765253515534');
+
+const REQUIRED_METADATA_FIELDS = [
+  'title',
+  'location',
+  'category',
+  'violence level',
+  'description',
+  'social media link',
+];
+export const clientId =
+  Date.now().toString(36) + Math.random().toString(36).substring(2, 8);
+export const apiBaseUrl = 'http://localhost:3010/v1';
+export let estTimeStep1 = 0;
+export let estTimeStep2 = 0;
+
+let currentPreviewURL = null;
+const mediaPreviewUrls = new Map();
+
+const renderer = new marked.Renderer();
+renderer.link = function ({ href, text }) {
+  return `<a class="image-bg" href="${href}" target="_blank" rel="noopener noreferrer">${text}</a>`;
+};
+
+let isReplaced = true;
+let isReplacedBlock = true;
+renderer.text = function ({ text }) {
+  const hiddenTexts = [
+    'Verification Tools & Methods:',
+    'Synthetic Type (if applicable):',
+    'Other Artifacts:',
+  ];
+  const noReplaces = [
+    '**Tags:**',
+    '**Authenticity Assessment:**',
+    '**Verification Tools & Methods:**',
+    '**Synthetic Type (if applicable):**',
+    '**Other Artifacts:**',
+    '**Supporting Sources:**',
+    '**Cross-Checking Information:**',
+    '**Other Info:**',
+  ];
+  isReplaced = !noReplaces.some((item) => text.includes(item));
+  if (isReplacedBlock) {
+    isReplacedBlock = !text.includes('**Supporting Sources:**');
+  }
+
+  const normalizedText = text.trim().replace(/^[-*]\s*/, '');
+  if (hiddenTexts.some((item) => normalizedText === item)) {
+    return '';
+  }
+
+  if (!isReplaced) {
+    const inlineHtml =
+      typeof marked.parseInline === 'function'
+        ? marked.parseInline(text)
+        : marked.Renderer.prototype.text.call(renderer, text);
+    return inlineHtml;
+  }
+  const replaced = text.replace(
+    /(?:\b([\w-]+)\s*)?(?:\[((?:Image\s+[^\]]+|Source\s+[^\]]+|URL\s+[^\]]+|[^,\]]+(?:\s*,\s*[^,\]]+)*))\]|\((Sources?\s+[^)]+)\))/gi,
+    (match, beforeWord, insideSquare, insideSource) => {
+      const beforeWordLower = (beforeWord || '').toLowerCase();
+      const insideLower = (insideSquare || '').toLowerCase();
+
+      const isImages = ['image', 'images', 'photo', 'photos'];
+
+      if (
+        isImages.includes(beforeWordLower) ||
+        isImages.some((item) => insideLower.includes(item))
+      ) {
+        const listImage = insideSquare
+          .split(',')
+          .map(
+            (item) =>
+              `<span class="${
+                isReplacedBlock ? 'image-bg' : ''
+              }" onClick="previewImage('${item}')">${item}</span>`
+          );
+        return `${
+          beforeWord ? beforeWord + ' ' : ''
+        } <span>&#91;${listImage.join(', ')}&#93;</span>`;
+      }
+      const listUrl = (insideSquare || insideSource)
+        .split(',')
+        .map(
+          (item) =>
+            `<span class="${
+              isReplacedBlock ? 'image-bg' : ''
+            }" onClick=goToEvidence()>${item}</span>`
+        );
+
+      return `${beforeWord ? beforeWord + ' ' : ''} \n<span>&#91;${listUrl.join(
+        ', '
+      )}&#93;</span>`;
+    }
+  );
+
+  return replaced;
+};
+
+marked.setOptions({
+  renderer,
+  breaks: true,
+});
+
+let files = {};
+Object.defineProperty(files, 'value', {
+  set(newValue) {
+    const activeIds = new Set(
+      newValue.map((file) => `${file.name}|${file.size}|${file.lastModified}`)
+    );
+    mediaPreviewUrls.forEach((url, id) => {
+      if (!activeIds.has(id)) {
+        URL.revokeObjectURL(url);
+        mediaPreviewUrls.delete(id);
+      }
+    });
+
+    if (newValue.length > 0) {
+      const displayNames = newValue
+        .map((file) => {
+          const fileId = `${file.name}|${file.size}|${file.lastModified}`;
+          if (!mediaPreviewUrls.has(fileId)) {
+            mediaPreviewUrls.set(fileId, URL.createObjectURL(file));
+          }
+          const previewUrl = mediaPreviewUrls.get(fileId);
+          const previewMarkup = file.type.startsWith('video/')
+            ? `<div class="file-thumbnail file-thumbnail-video">
+        <video src="${previewUrl}" preload="metadata" muted playsinline></video>
+      </div>`
+            : `<img class="file-thumbnail file-thumbnail-image" src="${previewUrl}" alt="${file.name}" />`;
+          return `<div onclick="previewFile(event, '${fileId}')" id="${fileId}" class="file-item pointer">
+      ${previewMarkup}
+      <span class="file-name" data-full-name="${file.name}">${file.name}</span>
+      <div class="preview">${eyeIcon}</div>
+      <div onclick="removeFile(event, '${fileId}', 'media')" class="file-remove" data-file="${fileId}">${trashIcon}</div>
+    </div>`;
+        })
+        .join('');
+      wrapperFilesElement.innerHTML = displayNames;
+      wrapperFilesElement.classList.remove('display-none');
+
+      // Add tooltips only for truncated text
+      setTimeout(() => {
+        document.querySelectorAll('.file-name').forEach((span) => {
+          const fullName = span.getAttribute('data-full-name');
+          if (fullName && span.scrollWidth > span.clientWidth) {
+            span.setAttribute('title', fullName);
+          }
+        });
+      }, 0);
+    } else {
+      wrapperFilesElement.innerHTML = '';
+      wrapperFilesElement.classList.add('display-none');
+    }
+    this._value = newValue;
+  },
+  get() {
+    return this._value;
+  },
+});
+files.value = [];
+
+function validateMetadataJson(file) {
+  return new Promise((resolve, reject) => {
+    if (!file) {
+      reject('Please provide a metadata file.');
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const text = event.target?.result;
+      if (typeof text !== 'string' || text.trim().length === 0) {
+        reject('Metadata file must contain valid JSON.');
+        return;
+      }
+      try {
+        const parsed = JSON.parse(text);
+        if (
+          typeof parsed !== 'object' ||
+          parsed === null ||
+          Array.isArray(parsed)
+        ) {
+          reject('Metadata file must be a JSON object.');
+          return;
+        }
+        const keys = Object.keys(parsed);
+        const missingFields = REQUIRED_METADATA_FIELDS.filter(
+          (field) => !keys.includes(field)
+        );
+        if (missingFields.length > 0) {
+          reject(
+            `Metadata file is missing required fields: ${missingFields.join(
+              ', '
+            )}`
+          );
+          return;
+        }
+        const extraFields = keys.filter(
+          (key) => !REQUIRED_METADATA_FIELDS.includes(key)
+        );
+        if (extraFields.length > 0) {
+          reject(
+            `Metadata file contains unsupported fields: ${extraFields.join(
+              ', '
+            )}`
+          );
+          return;
+        }
+        resolve();
+      } catch (error) {
+        reject('Metadata file must contain valid JSON.');
+      }
+    };
+    reader.onerror = () => {
+      reject('Unable to read the metadata file.');
+    };
+    reader.readAsText(file);
+  });
+}
+
+let metadata = {};
+Object.defineProperty(metadata, 'value', {
+  set(newValue) {
+    if (newValue.length > 0) {
+      const displayNames = newValue
+        .map((meta) => {
+          const fileId = `${meta.name}|${meta.size}|${meta.lastModified}`;
+          return `<div onclick="previewMetadata(event, '${fileId}')" id="${fileId}" class="file-item pointer">
+          <div class="file-icon">${fileIcon}</div>
+      <span class="file-name" data-full-name="${meta.name}">${meta.name}</span>
+      <div class="preview">${eyeIcon}</div>
+      <div  onclick="removeFile(event, '${fileId}', 'metadata')" class="file-remove" data-file="${fileId}">${trashIcon}</div>
+    </div>`;
+        })
+        .join('');
+      wrapperMetadataElement.innerHTML = displayNames;
+      wrapperMetadataElement.classList.remove('display-none');
+
+      // Add tooltips only for truncated text
+      setTimeout(() => {
+        document.querySelectorAll('.file-name').forEach((span) => {
+          const fullName = span.getAttribute('data-full-name');
+          if (fullName && span.scrollWidth > span.clientWidth) {
+            span.setAttribute('title', fullName);
+          }
+        });
+      }, 0);
+    } else {
+      wrapperMetadataElement.innerHTML = '';
+      wrapperMetadataElement.classList.add('display-none');
+    }
+    this._value = newValue;
+  },
+  get() {
+    return this._value;
+  },
+});
+metadata.value = [];
+
+let data = {};
+Object.defineProperty(data, 'value', {
+  set(newValue) {
+    if (newValue) {
+      btnSave.classList.add('active');
+      // livechat.classList.remove('display-none');
+    } else {
+      btnSave.classList.remove('active');
+      // livechat.classList.add('display-none');
+    }
+    this._value = newValue;
+  },
+  get() {
+    return this._value;
+  },
+});
+// data.value = {}
+
+let selectedTab = {};
+Object.defineProperty(selectedTab, 'value', {
+  set(newValue) {
+    if (data.value) {
+      const menuItems =
+        newValue === 'verified_evidence'
+          ? `<div class="menu-children menu pt-0 mb-4">
+          <div onclick="changeTabChildren('source_details', this)" class="item active">Source Details</div>
+        <div onclick="changeTabChildren('where', this)" class="item">Where</div>
+        <div onclick="changeTabChildren('when', this)" class="item">When</div>
+        <div onclick="changeTabChildren('who', this)" class="item">Who</div>
+        <div onclick="changeTabChildren('why', this)" class="item">Why</div>
+      </div>`
+          : '';
+
+      outputElement.innerHTML =
+        menuItems +
+        marked.parse(
+          data.value.readme_content[newValue]?.content ||
+            data.value.readme_content[newValue]?.source_details?.content ||
+            ''
+        );
+    }
+    isReplacedBlock = true;
+    this._value = newValue;
+  },
+  get() {
+    return this._value;
+  },
+});
+selectedTab.value = 'case_summary';
+
+let selectedTabChildren = {};
+Object.defineProperty(selectedTabChildren, 'value', {
+  set(newValue) {
+    if (data.value) {
+      const menuItems = `<div class="menu-children menu pt-0 mb-4">
+      <div onclick="changeTabChildren('source_details', this)" class="item ${
+        newValue === 'source_details' ? 'active' : ''
+      }">Source Details</div>
+        <div onclick="changeTabChildren('where', this)" class="item ${
+          newValue === 'where' ? 'active' : ''
+        }">Where</div>
+        <div onclick="changeTabChildren('when', this)" class="item ${
+          newValue === 'when' ? 'active' : ''
+        }">When</div>
+        <div onclick="changeTabChildren('who', this)" class="item ${
+          newValue === 'who' ? 'active' : ''
+        }">Who</div>
+        <div onclick="changeTabChildren('why', this)" class="item ${
+          newValue === 'why' ? 'active' : ''
+        }">Why</div>
+      </div>`;
+      outputElement.innerHTML =
+        menuItems +
+        marked.parse(
+          data.value.readme_content[selectedTab.value]?.[newValue]?.content ||
+            ''
+        );
+    }
+    isReplacedBlock = true;
+    this._value = newValue;
+  },
+  get() {
+    return this._value;
+  },
+});
+selectedTab.value = 'case_summary';
+
+let isLoading = {};
+Object.defineProperty(isLoading, 'value', {
+  set(newValue) {
+    if (newValue) {
+      btnClear.disabled = true;
+      btnSave.disabled = true;
+      btnSubmit.disabled = true;
+      inputElement.disabled = true;
+      metadataElement.disabled = true;
+      Array.from(dropZones).forEach((dropZone) => {
+        dropZone.disabled = true;
+        dropZone.classList.add('btn-disabled');
+      });
+      Array.from(fileRemoves).forEach((fileRemove) => {
+        fileRemove.disabled = true;
+        fileRemove.classList.add('btn-disabled');
+      });
+
+      btnClear.classList.add('btn-disabled');
+      btnSave.classList.add('btn-disabled');
+      btnSubmit.classList.add('btn-disabled');
+
+      Array.from(tabItems).forEach((tabItem) => {
+        tabItem.disabled = true;
+        tabItem.classList.add('btn-disabled', 'no-hover');
+      });
+    } else {
+      btnClear.disabled = false;
+      btnSave.disabled = false;
+      btnSubmit.disabled = false;
+      inputElement.disabled = false;
+      metadataElement.disabled = false;
+      Array.from(dropZones).forEach((dropZone) => {
+        dropZone.disabled = false;
+        dropZone.classList.remove('btn-disabled');
+      });
+      Array.from(fileRemoves).forEach((fileRemove) => {
+        fileRemove.disabled = false;
+        fileRemove.classList.remove('btn-disabled');
+      });
+      btnClear.classList.remove('btn-disabled');
+      btnSave.classList.remove('btn-disabled');
+      btnSubmit.classList.remove('btn-disabled');
+      btnSubmit.innerText = 'Submit';
+
+      Array.from(tabItems).forEach((tabItem) => {
+        tabItem.disabled = false;
+        tabItem.classList.remove('btn-disabled', 'no-hover');
+      });
+    }
+    this._value = newValue;
+  },
+  get() {
+    return this._value;
+  },
+});
+
+inputElement.addEventListener('change', (event) => {
+  const allowedExtensions = ['.png', '.jpg', '.jpeg', '.gif', '.mp4'];
+  const selectedFiles = Array.from(event.target.files);
+  const invalidFiles = selectedFiles.filter((file) => {
+    return !allowedExtensions.some((ext) =>
+      file.name.toLowerCase().endsWith(ext)
+    );
+  });
+  if (invalidFiles.length > 0) {
+    createTemplateModal(
+      'Only the following formats are accepted: ' + allowedExtensions.join(', ')
+    );
+    inputElement.value = '';
+    return;
+  }
+
+  for (const file of selectedFiles) {
+    if (
+      !files.value.some((f) => f.name === file.name && f.size === file.size)
+    ) {
+      files.value = [...files.value, file];
+    }
+  }
+  inputElement.value = '';
+});
+
+metadataElement.addEventListener('change', (event) => {
+  const allowedExtensions = ['.json'];
+  const selectedFiles = Array.from(event.target.files || []);
+
+  if (selectedFiles.length === 0) {
+    metadataElement.value = '';
+    return;
+  }
+
+  const invalidFiles = selectedFiles.filter((file) => {
+    return !allowedExtensions.some((ext) =>
+      file.name.toLowerCase().endsWith(ext)
+    );
+  });
+
+  if (invalidFiles.length > 0) {
+    createTemplateModal(
+      'Only the following formats are accepted: ' + allowedExtensions.join(', ')
+    );
+    metadataElement.value = '';
+    return;
+  }
+
+  const file = selectedFiles[0];
+
+  validateMetadataJson(file)
+    .then(() => {
+      metadata.value = [file];
+    })
+    .catch((message) => {
+      createTemplateModal(`<div>
+    <div class="note">
+      The content of the JSON file is invalid. Please follow the format below.
+    </div>
+    <div class="json-box">
+{
+  "title": "",
+  "location": "",
+  "category": "",
+  "violence level": "",
+  "description": "",
+  "social media link": ""
+}
+    </div>
+  </div>`);
+    })
+    .finally(() => {
+      metadataElement.value = '';
+    });
+});
+
+// Drag and drop for metadata (JSON files)
+const metadataDropZone = document.querySelector('label[for="metadata-input"]');
+metadataDropZone.addEventListener('dragover', (e) => {
+  e.preventDefault();
+  metadataDropZone.classList.add('drag-over');
+});
+metadataDropZone.addEventListener('dragleave', (e) => {
+  e.preventDefault();
+  metadataDropZone.classList.remove('drag-over');
+});
+metadataDropZone.addEventListener('drop', (e) => {
+  e.preventDefault();
+  metadataDropZone.classList.remove('drag-over');
+  const droppedFiles = Array.from(e.dataTransfer.files);
+  const allowedExtensions = ['.json'];
+  const invalidFiles = droppedFiles.filter((file) => {
+    return !allowedExtensions.some((ext) =>
+      file.name.toLowerCase().endsWith(ext)
+    );
+  });
+  if (invalidFiles.length > 0) {
+    createTemplateModal(
+      'Only the following formats are accepted: ' + allowedExtensions.join(', ')
+    );
+    return;
+  }
+  if (droppedFiles.length > 0) {
+    const file = droppedFiles[0]; // Only allow one JSON file
+    validateMetadataJson(file)
+      .then(() => {
+        metadata.value = [file];
+      })
+      .catch((message) => {
+        createTemplateModal(
+          `<div>
+    <div class="note">
+      The content of the JSON file is invalid. Please follow the format below.
+    </div>
+    <div class="json-box">
+{
+  "title": "",
+  "location": "",
+  "category": "",
+  "violence level": "",
+  "description": "",
+  "social media link": ""
+}
+    </div>
+  </div>`
+        );
+      });
+  }
+});
+
+// Drag and drop for media files
+const mediaDropZone = document.querySelector('label[for="file-input"]');
+mediaDropZone.addEventListener('dragover', (e) => {
+  e.preventDefault();
+  mediaDropZone.classList.add('drag-over');
+});
+mediaDropZone.addEventListener('dragleave', (e) => {
+  e.preventDefault();
+  mediaDropZone.classList.remove('drag-over');
+});
+mediaDropZone.addEventListener('drop', (e) => {
+  e.preventDefault();
+  mediaDropZone.classList.remove('drag-over');
+  const droppedFiles = Array.from(e.dataTransfer.files);
+  const allowedExtensions = ['.png', '.jpg', '.jpeg', '.gif', '.mp4'];
+  const invalidFiles = droppedFiles.filter((file) => {
+    return !allowedExtensions.some((ext) =>
+      file.name.toLowerCase().endsWith(ext)
+    );
+  });
+  if (invalidFiles.length > 0) {
+    createTemplateModal(
+      'Only the following formats are accepted: ' + allowedExtensions.join(', ')
+    );
+    return;
+  }
+  for (const file of droppedFiles) {
+    if (
+      !files.value.some((f) => f.name === file.name && f.size === file.size)
+    ) {
+      files.value = [...files.value, file];
+    }
+  }
+});
+
+btnSubmit.addEventListener('click', () => handleSubmit());
+btnClear.addEventListener('click', () => reset());
+btnSave.addEventListener('click', () => handleDownload('report.md'));
+
+function reset() {
+  inputElement.value = '';
+  metadataElement.value = '';
+  outputElement.innerHTML =
+    '<p class="opacity-50">Verification result comes here...</p>';
+  files.value = [];
+  metadata.value = [];
+  data.value = null;
+}
+
+async function handleSubmit() {
+  if (isLoading.value) return;
+
+  data.value = null;
+  outputElement.innerHTML =
+    '<p class="opacity-50">Verification result comes here...</p>';
+
+  if (files.value.length === 0 && metadata.value.length === 0) {
+    createTemplateModal('Please upload text-based file and media files');
+    return;
+  }
+
+  if (metadata.value.length === 0) {
+    createTemplateModal('Please upload text-based file');
+    return;
+  }
+
+  if (files.value.length === 0) {
+    createTemplateModal('Please upload media files');
+    return;
+  }
+
+  isLoading.value = true;
+  btnSubmit.innerText = 'Processing...';
+  statusFaceCheckElement.classList.remove('display-none');
+  const formData = new FormData();
+  formData.append('metadata_file', metadata.value[0]);
+
+  const mediainfo = await new Promise((resolve) => {
+    MediaInfo.mediaInfoFactory({ format: 'JSON' }, resolve);
+  });
+  let isGetTimed = false;
+  for (const [index, file] of files.value.entries()) {
+    const readChunk = async (chunkSize, offset) =>
+      new Uint8Array(
+        await file.slice(offset, offset + chunkSize).arrayBuffer()
+      );
+
+    try {
+      if (file.type.startsWith('video/') && !isGetTimed) {
+        const result = await mediainfo.analyzeData(file.size, readChunk);
+        const data = JSON.parse(result);
+
+        const video =
+          data.media.track.find((t) => t['@type'] === 'Video') || {};
+        const duration = +video.Duration || 0;
+        const frameRate = +video.FrameRate || 0;
+        const heightV = +video.Height || 0;
+        const widthV = +video.Width || 0;
+
+        const calcEstimatedTimeCode = Math.ceil(
+          (duration * frameRate * heightV * widthV * 3.17e-7) / 60
+        );
+
+        estTimeStep1 = calcEstimatedTimeCode;
+        isGetTimed = true;
+      }
+
+      formData.append('files', file);
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  }
+
+  estTimeStep1 = estTimeStep1 + 5;
+  estTimeStep2 = 5;
+
+  axios
+    .post(`${apiBaseUrl}/face_check`, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+        'X-Client-ID': clientId,
+      },
+    })
+    .then((res) => {
+      data.value = res.data;
+      const menuItems =
+        selectedTab.value === 'verified_evidence'
+          ? `<div class="menu-children menu pt-0 mb-4">
+          <div onclick="changeTabChildren('source_details', this)" class="item active">Source Details</div>
+        <div onclick="changeTabChildren('where', this)" class="item">Where</div>
+        <div onclick="changeTabChildren('when', this)" class="item">When</div>
+        <div onclick="changeTabChildren('who', this)" class="item">Who</div>
+        <div onclick="changeTabChildren('why', this)" class="item">Why</div>
+      </div>`
+          : '';
+      outputElement.innerHTML =
+        menuItems +
+        marked.parse(
+          res.data.readme_content[selectedTab.value]?.content ||
+            res.data.readme_content[selectedTab.value]?.source_details
+              ?.content ||
+            ''
+        );
+      estTimeStep1 = 0;
+      estTimeStep2 = 0;
+      isLoading.value = false;
+    })
+    .catch((err) => {
+      outputElement.innerText =
+        'Error: An error occurred while processing your request. Please try again later.';
+      isLoading.value = false;
+    });
+}
+
+function handleHyperLinkImages(text) {
+  return text.replace(/[\[\(]Image\s+([\d,\s]+)[\]\)]/g, (match, numbers) => {
+    const list = numbers
+      .split(',')
+      .map((n) => n.trim())
+      .filter((n) => n !== '');
+
+    const result = list.map((n) => {
+      return `[![Image ${n}]](./media/image-${n}.png)`;
+    });
+
+    return result.join('');
+  });
+}
+
+async function handleDownload(filename) {
+  if (!data.value) {
+    createTemplateModal('No data to save.');
+    return;
+  }
+  const dataReport =
+    handleHyperLinkImages(`${data.value.readme_content.case_summary.title}${data.value.readme_content.case_summary.content}${data.value.readme_content.content_classification.title}${data.value.readme_content.content_classification.content}${data.value.readme_content.verified_evidence.title}
+${data.value.readme_content.verified_evidence.source_details.title}${data.value.readme_content.verified_evidence.source_details.content}${data.value.readme_content.verified_evidence.where.title}${data.value.readme_content.verified_evidence.where.content}${data.value.readme_content.verified_evidence.when.title}${data.value.readme_content.verified_evidence.when.content}${data.value.readme_content.verified_evidence.who.title}${data.value.readme_content.verified_evidence.who.content}${data.value.readme_content.verified_evidence.why.title}${data.value.readme_content.verified_evidence.why.content}${data.value.readme_content.forensic_analysis.title}${data.value.readme_content.forensic_analysis.content}${data.value.readme_content.other_evidence.title}${data.value.readme_content.other_evidence.content}
+  `);
+
+  const mediaItems = Array.isArray(data.value.readme_content.media)
+    ? data.value.readme_content.media
+    : [];
+
+  if (mediaItems.length === 0) {
+    const blob = new Blob([dataReport], {
+      type: 'text/markdown',
+    });
+
+    const url = URL.createObjectURL(blob);
+
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+
+    document.body.appendChild(a);
+    a.click();
+
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+    return;
+  }
+
+  if (typeof JSZip === 'undefined') {
+    createTemplateModal(
+      'Unable to prepare the download. Please check your connection and try again.'
+    );
+    return;
+  }
+
+  const zip = new JSZip();
+  zip.file(filename, dataReport);
+
+  // Package each available media asset alongside the markdown report
+  mediaItems.forEach((raw, index) => {
+    if (typeof raw !== 'string' || !raw.trim()) {
+      return;
+    }
+    const base64Data = raw.replace(/\s+/g, '');
+    zip.file(`media/image-${index + 1}.png`, base64Data, { base64: true });
+  });
+
+  try {
+    const archiveBlob = await zip.generateAsync({ type: 'blob' });
+    const baseName = filename ? filename.replace(/\.[^/.]+$/, '') : 'report';
+    const archiveName = `${baseName || 'report'}-assets.zip`;
+    const url = URL.createObjectURL(archiveBlob);
+
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = archiveName;
+
+    document.body.appendChild(a);
+    a.click();
+
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  } catch (error) {
+    console.error('Failed to generate download archive', error);
+    createTemplateModal(
+      'Unable to prepare the download. Please try again later.'
+    );
+  }
+}
+
+window.goToEvidence = function () {
+  if (selectedTab.value === 'other_evidence') return;
+  document.querySelectorAll('.menu .item').forEach((item) => {
+    item.classList.remove('active');
+  });
+  document
+    .getElementById('other_evidence-1763023210526')
+    .classList.add('active');
+  selectedTab.value = 'other_evidence';
+};
+
+window.previewImage = function (imageRaw) {
+  const match = (imageRaw.match(/\d+/) || 1) - 1;
+  const image = data.value.readme_content.media[+match];
+  createTemplateModal(
+    `<img src="data:image/jpeg;base64,${image}" alt="Image Preview" style="max-width: 100%; height: auto;" />`,
+    `Image ${+match + 1}`
+  );
+};
+
+window.changeTabChildren = function (tab, element) {
+  if (isLoading.value) return;
+  document.querySelectorAll('.menu-children .item').forEach((item) => {
+    item.classList.remove('active');
+  });
+  element.classList.add('active');
+
+  selectedTabChildren.value = tab;
+};
+
+window.changeTab = function (tab, element) {
+  if (isLoading.value) return;
+  document.querySelectorAll('.menu .item').forEach((item) => {
+    item.classList.remove('active');
+  });
+  element.classList.add('active');
+
+  selectedTab.value = tab;
+};
+
+window.removeFile = function (event, fileId, fileType) {
+  event.preventDefault();
+  event.stopPropagation();
+  if (isLoading.value) return;
+  const [fileName, fileSize, fileLastModified] = fileId.split('|');
+  if (fileType === 'metadata') {
+    metadata.value = metadata.value.filter(
+      (file) =>
+        !(
+          file.name === fileName &&
+          file.size.toString() === fileSize &&
+          file.lastModified.toString() === fileLastModified
+        )
+    );
+    return;
+  }
+  files.value = files.value.filter(
+    (file) =>
+      !(
+        file.name === fileName &&
+        file.size.toString() === fileSize &&
+        file.lastModified.toString() === fileLastModified
+      )
+  );
+};
+
+function createTemplateModal(content, title = 'Notification') {
+  const modal = `<div class="header-modal">
+      <span class="title">${title}</span>
+      <div onclick="closeModal()" class="close">${closeIcon}</div>
+    </div>
+    <div class="content-modal scroll-box">
+      ${content}
+    </div>`;
+  openModal(modal);
+}
+
+window.previewMetadata = function (event, fileId) {
+  event.preventDefault();
+  event.stopPropagation();
+  const [fileName, fileSize, fileLastModified] = fileId.split('|');
+  const file = metadata.value.find(
+    (f) =>
+      f.name === fileName &&
+      f.size.toString() === fileSize &&
+      f.lastModified.toString() === fileLastModified
+  );
+  if (!file) return;
+
+  const reader = new FileReader();
+  reader.onload = function (e) {
+    const content = `<pre style="white-space: pre-wrap; word-wrap: break-word;">${e.target.result}</pre>`;
+    const modal = createTemplateModal(content, file.name);
+  };
+  reader.readAsText(file);
+};
+
+window.previewFile = function (event, fileId) {
+  event.preventDefault();
+  event.stopPropagation();
+  const [fileName, fileSize, fileLastModified] = fileId.split('|');
+  const file = files.value.find(
+    (f) =>
+      f.name === fileName &&
+      f.size.toString() === fileSize &&
+      f.lastModified.toString() === fileLastModified
+  );
+  if (!file) return;
+
+  const fileURL = URL.createObjectURL(file);
+  currentPreviewURL = fileURL;
+  let content = '';
+  if (file.type.startsWith('image/')) {
+    content = `<img src="${fileURL}" alt="${file.name}" style="max-width: 100%; height: auto;" />`;
+  } else if (file.type.startsWith('video/')) {
+    content = `<video controls style="max-width: 100%; height: auto;">
+                 <source src="${fileURL}" type="${file.type}">
+                 Your browser does not support the video tag.
+               </video>`;
+  } else {
+    content = 'Preview not available for this file type.';
+  }
+
+  createTemplateModal(content, file.name);
+};
+
+function openModal(content) {
+  contentModalElement.innerHTML = content;
+  wrapperModalElement.style.display = 'flex';
+}
+
+window.closeModal = function () {
+  wrapperModalElement.style.display = 'none';
+  const video = contentModalElement.querySelector('video');
+  if (video) {
+    video.pause();
+    video.currentTime = 0;
+  }
+  if (currentPreviewURL) {
+    URL.revokeObjectURL(currentPreviewURL);
+    currentPreviewURL = null;
+  }
+};

serverSentEvents.js

@@ -0,0 +1,225 @@
+import { completedIcon, pendingIcon, processingIcon } from './constants.js';
+import { apiBaseUrl, clientId, estTimeStep1, estTimeStep2 } from './main.js';
+
+const statusFaceCheckElement = document.getElementById('status-face-check');
+const initData = [
+  {
+    id: 1,
+    name: 'Geolocation',
+    displayName: 'Location Analysis',
+    status: 'pending',
+    percent: 0,
+  },
+  {
+    id: 2,
+    name: 'Timestamp',
+    displayName: 'Time Analysis',
+    status: 'pending',
+    percent: 0,
+  },
+  {
+    id: 3,
+    name: 'AIGVDetection',
+    displayName: 'AI-Generated Content Detection',
+    status: 'pending',
+    percent: 0,
+  },
+  {
+    id: 4,
+    name: 'Report',
+    displayName: 'Comprehensive Report',
+    status: 'pending',
+    percent: 0,
+  },
+];
+export let statusStep1 = 'pending';
+export let statusStep2 = 'pending';
+let _estTimeStep1 = 0;
+let _estTimeStep2 = 0;
+
+let data = {};
+Object.defineProperty(data, 'value', {
+  set(newValue) {
+    const countItem = newValue.length;
+    const countItemCompleted = newValue.filter(
+      (item) => item.status === 'completed'
+    ).length;
+    statusStep1 = 'pending';
+    statusStep2 = newValue.find((i) => i.name === 'Report').status;
+    if (
+      ['Geolocation', 'Timestamp', 'AIGVDetection'].every((item) => {
+        return newValue.find((i) => i.name === item).status === 'completed';
+      })
+    ) {
+      statusStep1 = 'completed';
+    } else if (
+      ['Geolocation', 'Timestamp', 'AIGVDetection'].some((item) => {
+        return newValue.find((i) => i.name === item).status === 'processing';
+      })
+    ) {
+      statusStep1 = 'processing';
+    }
+
+    const content = `<div class="status-face-check">
+                <div class="header-status-face-check">
+                  <div class="title-status-face-check">
+                    <p>${countItemCompleted}/${countItem} completed</p>
+                    <p>${Math.round(
+                      (countItemCompleted / countItem) * 100
+                    )}%</p>
+                  </div>
+                  <div class="wrapper-processing">
+                    <div class="processing" style="width: ${Math.round(
+                      (countItemCompleted / countItem) * 100
+                    )}%;"></div>
+                  </div>
+                </div>
+                <div class="body-status-face-check">
+                  ${newValue
+                    .map((item, index) => {
+                      return `
+                      ${
+                        index === 0
+                          ? `<div class="step">Step 1: ${
+                              statusStep1 === 'pending'
+                                ? `Waiting - ${
+                                    _estTimeStep1 === 0
+                                      ? 'Calculating...'
+                                      : `${_estTimeStep1} minutes remaining.`
+                                  }`
+                                : statusStep1 === 'processing'
+                                ? `Processing - Estimated time: ${_estTimeStep1} minutes.`
+                                : `Completed`
+                            }</div>`
+                          : ''
+                      }
+                      ${
+                        index === 3
+                          ? `<div class="step">Step 2: ${
+                              statusStep2 === 'pending'
+                                ? `Waiting - ${
+                                    _estTimeStep2 === 0
+                                      ? 'Calculating...'
+                                      : `Begins after Step 1 is completed (Estimated time: ${_estTimeStep2} minutes).`
+                                  }`
+                                : statusStep2 === 'processing'
+                                ? `Processing - Estimated time: ${_estTimeStep2} minutes.`
+                                : `Completed`
+                            } </div>`
+                          : ''
+                      }
+                      <div class="item-status-face-check">
+                    <span
+                      >${
+                        item.status === 'completed'
+                          ? completedIcon
+                          : item.status === 'processing'
+                          ? processingIcon
+                          : pendingIcon
+                      }
+                    </span>
+                    <div class="content-status-face-check">
+                      <p class="name-service">Service ${
+                        index + 1
+                      }/${countItem}: ${item.displayName}</p>
+                      <p class="status-service ${
+                        item.status === 'pending'
+                          ? 'display-none'
+                          : item.status === 'processing'
+                          ? 'processing-dots'
+                          : ''
+                      }">${
+                        item.status === 'processing'
+                          ? 'Processing'
+                          : item.status === 'completed'
+                          ? 'Completed'
+                          : 'Pending'
+                      }<span class="dots "></span></p>
+                    </div>
+                  </div>`;
+                    })
+                    .join('')}
+                </div>
+              </div>`;
+    statusFaceCheckElement.innerHTML = content;
+    this._value = newValue;
+  },
+  get() {
+    return this._value;
+  },
+});
+data.value = initData;
+
+export function initValueData() {
+  console.log('test...');
+}
+
+let isLoading = {};
+Object.defineProperty(isLoading, 'value', {
+  set(newValue) {
+    if (newValue) {
+      // statusFaceCheckElement.classList.remove('display-none');
+      data.value = initData;
+    } else {
+      statusFaceCheckElement.classList.add('display-none');
+      data.value = initData;
+    }
+    this._value = newValue;
+  },
+  get() {
+    return this._value;
+  },
+});
+const source = new EventSource(`${apiBaseUrl}/sse?client_id=${clientId}`);
+
+source.onopen = () => console.log('✅ SSE connected');
+
+let _interval;
+source.onmessage = (event) => {
+  try {
+    const _data = JSON.parse(event.data);
+
+    console.log(_data);
+
+    if (_data?.status) {
+      if (_data.status === 'start') {
+        isLoading.value = true;
+        _estTimeStep1 = estTimeStep1;
+        _estTimeStep2 = estTimeStep2;
+        _interval = setInterval(() => {
+          if (statusStep1 === 'processing' && _estTimeStep1 > 1) {
+            _estTimeStep1 -= 1;
+          }
+          if (statusStep2 === 'processing' && _estTimeStep2 > 1) {
+            _estTimeStep2 -= 1;
+          }
+          data.value = data.value;
+        }, 60000);
+      } else {
+        isLoading.value = false;
+        _estTimeStep1 = 0;
+        _estTimeStep2 = 0;
+        data.value = initData;
+        clearInterval(_interval);
+      }
+    }
+    if (_data?.status_service) {
+      const updatedData = data.value?.map((item) => {
+        if (_data.service === item.name) {
+          if (_data.status_service === 'completed') {
+            return { ...item, status: _data.status_service, percent: 100 };
+          }
+          return { ...item, status: _data.status_service };
+        }
+        return item;
+      });
+      data.value = updatedData;
+    }
+  } catch (err) {
+    console.log('err', err);
+  }
+};
+
+source.onerror = (err) => {
+  console.error('❌ SSE error:', err);
+};

styles.css

@@ -0,0 +1,954 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  user-select: none;
+}
+
+html,
+body {
+  height: 100%;
+  font-family: Arial, Helvetica, sans-serif;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+/* General Body Styling */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif;
+  background-color: #f8f9fa;
+  color: #333;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+/* Main Container */
+.container {
+  background-color: #ffffff;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+/* Header Section */
+.header-face-check {
+  text-align: center;
+  border-bottom: 1px solid #e2e8f0;
+  padding: 15px 0;
+}
+
+.title-header-face-check {
+  font-size: 28px;
+  font-weight: 600;
+}
+
+/* Main Content Layout */
+.main-content {
+  display: flex;
+}
+
+.description-upload-section {
+  color: #6c757d;
+  padding-bottom: 4px;
+}
+
+/* Upload Section Styling */
+.upload-section {
+  display: flex;
+  flex-direction: column;
+  width: 25%;
+  height: calc(100vh - 73px);
+}
+
+.wrapper-upload-box {
+  flex-grow: 1;
+  overflow: scroll;
+}
+
+.upload-box {
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.upload-box > p {
+  font-size: 18px;
+  font-weight: 600;
+  color: #454545;
+  margin-bottom: 12px;
+}
+
+.drop-zone {
+  border: 2px dashed #ced4da;
+  border-radius: 8px;
+  padding: 24px 4px;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.drop-zone:hover {
+  background-color: #f8f9fa;
+  border-color: #adb5bd;
+}
+
+.drop-zone.drag-over {
+  background-color: #e3f2fd;
+  border-color: #2196f3;
+}
+
+.drop-zone-icon {
+  width: 48px;
+  height: 48px;
+  color: #6c757d;
+  margin-bottom: 1rem;
+}
+
+.drop-zone p {
+  margin: 0.25rem 0;
+  font-weight: 500;
+}
+
+.drop-zone span {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 22px;
+  color: #fd7e14;
+}
+
+.wrapper-upload {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.list-file {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 0 1rem 1rem 1rem;
+}
+
+.file-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border: 1px solid #ced4da;
+  border-radius: 16px;
+  cursor: default;
+}
+
+.file-item .file-icon {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+}
+
+.file-item .file-name {
+  flex-grow: 1;
+  text-decoration: underline;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 22px;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+
+.file-item .file-name:hover {
+  opacity: 0.8;
+}
+
+.file-item .file-thumbnail {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  flex-shrink: 0;
+  background-color: #f1f3f5;
+  overflow: hidden;
+}
+
+.file-item .file-thumbnail-image {
+  object-fit: cover;
+  display: inline-block;
+}
+
+.file-item .file-thumbnail-video {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  background-color: #10151a;
+}
+
+.file-item .file-thumbnail-video video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+}
+
+.file-item .file-thumbnail-video::before {
+  content: '';
+  position: absolute;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(2px);
+}
+
+.file-item .file-thumbnail-video::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-left: 10px solid #ffffff;
+  border-top: 7px solid transparent;
+  border-bottom: 7px solid transparent;
+  margin-left: 3px;
+}
+
+.file-item .preview {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.file-item .preview:hover {
+  opacity: 0.8;
+}
+
+.file-item .file-remove {
+  cursor: pointer;
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+#file-input {
+  display: none;
+}
+
+/* Button Styling */
+.button-group {
+  display: flex;
+  gap: 0.75rem;
+  padding: 20px 24px;
+  border-top: 1px solid #e2e8f0;
+}
+
+.btn {
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 6px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  width: 50%;
+}
+
+.btn-clear {
+  background-color: #e9ecef;
+  color: #495057;
+  border: 1px solid #dee2e6;
+}
+
+.btn-clear:hover {
+  background-color: #dee2e6;
+}
+
+.wrapper-btn-save {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  background-color: #ffffff;
+  border-top: 1px solid #e2e8f0;
+  padding: 20px 24px;
+}
+
+.btn-submit {
+  background-color: #fd7e14;
+  color: #ffffff;
+}
+
+.btn-submit:hover {
+  background-color: #f96d00;
+}
+
+/* Output Section Styling */
+.output-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid #dee2e6;
+  border-right: 1px solid #dee2e6;
+  height: calc(100vh - 73px);
+  background-color: #f5f5f5;
+}
+
+.output-section label {
+  font-weight: 600;
+  display: block;
+  padding-left: 1rem;
+}
+
+.output-wrapper {
+  position: relative;
+  width: 100%;
+  flex: 1 1;
+  padding: 1rem;
+  overflow: auto;
+}
+
+.wrapper-loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+
+.output-face-check {
+  position: relative;
+  flex-grow: 1;
+  width: 100%;
+  height: 100%;
+  padding: 1rem;
+  border: 1px solid #ced4da;
+  border-radius: 8px;
+  resize: none;
+  font-family: inherit;
+  font-size: 1rem;
+  box-sizing: border-box;
+  background-color: #ffffff;
+}
+
+.btn-save {
+  background-color: #e9ecef;
+  color: #495057;
+  border: 1px solid #dee2e6;
+  align-self: flex-start; /* Align to the left */
+  width: 300px;
+}
+
+.btn-save:hover {
+  background-color: #dee2e6;
+}
+.btn-save.active {
+  background-color: #fd7e14;
+  color: #ffffff;
+}
+.btn-save.active:hover {
+  background-color: #f96d00;
+}
+
+.btn-disabled {
+  cursor: not-allowed !important;
+}
+
+.display-none {
+  display: none !important;
+}
+
+.wrapper-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: none;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal {
+  display: flex;
+  gap: 24px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 12px 16px 24px 16px;
+  background: white;
+  border-radius: 16px;
+  width: 700px;
+}
+
+.header-modal {
+  /* height: 40px; */
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #eef1f4;
+}
+
+.header-modal .title {
+  flex: 1;
+  color: #454545;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.header-modal .close {
+  height: 40px;
+  width: 40px;
+  display: block;
+  cursor: pointer;
+}
+
+.content-modal {
+  width: 100%;
+  max-height: 80vh;
+  overflow: auto;
+  text-align: center;
+}
+
+.content-modal img,
+.content-modal video {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+}
+
+.content-modal > pre {
+  text-align: left;
+}
+
+.line {
+  width: 100%;
+  height: 1px;
+  background-color: #e9e9e9;
+}
+
+.menu {
+  display: flex;
+  padding-top: 12px;
+  border-bottom: 1px solid #e2e8f0;
+  background-color: #ffffff;
+  overflow: auto;
+}
+
+.menu .item {
+  flex-shrink: 0;
+  padding: 8px 16px;
+  cursor: pointer;
+  border-bottom: 2px solid #cbd5e1;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
+  color: #454545;
+
+  white-space: normal;
+  overflow: hidden;
+}
+
+.menu .item:hover {
+  border-bottom: 2px solid #fd7e14;
+}
+
+.menu .item.no-hover {
+  pointer-events: none;
+}
+
+.menu .item.active {
+  border-bottom: 2px solid #fd7e14;
+}
+
+/* Responsive Design for smaller screens */
+@media (max-width: 768px) {
+  .main-content {
+    flex-direction: column;
+  }
+  body {
+    padding: 1rem;
+  }
+  .container {
+    padding: 1.5rem;
+  }
+  .upload-section {
+    width: 100%;
+  }
+}
+@keyframes l2 {
+  100% {
+    transform: rotate(calc(var(--s, 1) * 1turn));
+  }
+}
+
+.scroll-box {
+  overflow: auto;
+  /* scrollbar-width: none; */
+  -ms-overflow-style: none;
+}
+.scroll-box::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.opacity-50 {
+  opacity: 0.5;
+}
+
+.wrapper-status-face-check {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #454545a8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.status-face-check {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 360px;
+  color: #ffffff;
+}
+
+.header-status-face-check {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.title-status-face-check {
+  display: flex;
+  justify-content: space-between;
+}
+
+.step {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.wrapper-processing {
+  width: 100%;
+  height: 12px;
+  border-radius: 1234px;
+  background-color: #ffffff4d;
+}
+
+.processing {
+  height: 100%;
+  border-radius: 1234px;
+  background-color: #4bed73;
+  width: 30%;
+  transition: width 0.3s ease;
+}
+
+.body-status-face-check {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.item-status-face-check {
+  display: flex;
+  gap: 8px;
+  padding-left: 12px;
+}
+
+.content-status-face-check {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.name-service {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.status-service {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 100%;
+}
+
+.wrapper-processing-item {
+  width: 100%;
+  height: 8px;
+  border-radius: 1234px;
+  background-color: #ffffff4d;
+  overflow: hidden;
+  position: relative;
+}
+
+.processing-item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  border-radius: inherit;
+  background-color: #fd7e14;
+}
+
+.pt-0 {
+  padding-top: 0;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.loader {
+  position: relative;
+  width: 100%;
+  height: 8px;
+  border-radius: 1234px;
+  background: #d6cccc;
+  overflow: hidden;
+}
+
+.loader::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -50%;
+  width: 50%;
+  height: 100%;
+  background: #fd7e14;
+  border-radius: inherit;
+  animation: loading 2s infinite linear;
+}
+
+@keyframes loading {
+  0% {
+    left: -50%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+.status-service.processing-dots .dots::after {
+  content: '';
+  animation: dots 1.5s steps(4, end) infinite;
+}
+
+@keyframes dots {
+  0% {
+    content: '';
+  }
+  25% {
+    content: '.';
+  }
+  50% {
+    content: '..';
+  }
+  75% {
+    content: '...';
+  }
+  100% {
+    content: '';
+  }
+}
+
+.json-box {
+  background-color: #e9ecef;
+  border-radius: 6px;
+  padding: 16px 20px;
+  font-family: Consolas, monospace;
+  font-size: 14px;
+  line-height: 1.6;
+  color: #333;
+  white-space: pre;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
+  text-align: left;
+}
+
+.note {
+  margin-bottom: 12px;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  color: #444;
+}
+
+.image-bg {
+  color: #176ebf;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.image-bg:hover {
+  opacity: 0.8;
+}
+
+.whitespace-pre-line {
+  white-space: pre-line;
+}
+
+p {
+  overflow-wrap: anywhere;
+}
+
+.live-chat {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  position: absolute;
+  bottom: 20px;
+  right: 50px;
+  border-radius: 1234px;
+  padding: 12px 20px;
+  background-color: #28a745;
+  color: #ffffff;
+  cursor: pointer;
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
+  z-index: 999;
+}
+
+.live-chat:hover {
+  opacity: 0.8;
+}
+
+.live-chat-text {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  font-weight: 600;
+}
+
+.feedback {
+  display: flex;
+  flex-direction: column;
+  width: 25%;
+  height: calc(100vh - 73px);
+}
+.feedback .header-feedback {
+  height: 51px;
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  align-items: center;
+  padding-left: 16px;
+  padding-right: 8px;
+  border-bottom: 1px solid #e2e8f0;
+}
+.feedback .header-feedback .close-feedback {
+  cursor: pointer;
+}
+
+.feedback .content-feedback {
+  flex: 1 1;
+  padding: 18px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  overflow: auto;
+}
+
+.content-feedback .question {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.content-feedback .question .textarea .textarea-label,
+.content-feedback .question .q-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #454545;
+  line-height: 18px;
+}
+
+.content-feedback .question .options {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.content-feedback .question .options .option {
+  width: fit-content;
+}
+
+.content-feedback .question .options-stars {
+  display: flex;
+  gap: 12px;
+}
+
+.content-feedback .question .options .option .opt .option-text {
+  line-height: 20px;
+}
+
+.content-feedback .question .options .option .opt {
+  display: flex;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.star {
+  width: 32px;
+  height: 32px;
+  background: #e9ecef;
+  cursor: pointer;
+  clip-path: polygon(
+    50% 0%,
+    61% 35%,
+    98% 35%,
+    68% 57%,
+    79% 91%,
+    50% 70%,
+    21% 91%,
+    32% 57%,
+    2% 35%,
+    39% 35%
+  );
+}
+.options-stars .star.active {
+  background: gold;
+}
+
+input[type='radio'] {
+  display: none;
+}
+.radio {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #ced4da;
+  border-radius: 50%;
+  position: relative;
+  cursor: cusror;
+}
+input[type='radio']:checked + .radio {
+  border-color: #fd7e14;
+}
+input[type='radio']:checked + .radio::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 8px;
+  height: 8px;
+  background-color: #fd7e14;
+  border-radius: 50%;
+}
+
+textarea {
+  border-radius: 16px;
+  padding: 16px;
+  border: 1px solid #cbd5e1;
+}
+textarea:focus {
+  outline: none;
+  border-color: #fd7e14;
+}
+
+.feedback .footer-feedback {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  background-color: #ffffff;
+  border-top: 1px solid #e2e8f0;
+  padding: 20px 24px;
+}
+
+.feedback .footer-feedback .btn-feedback {
+  background-color: #28a745;
+  color: #ffffff;
+  border: 1px solid transparent;
+}
+
+.feedback .footer-feedback .btn-feedback:hover {
+  opacity: 0.8;
+}
+
+.feedback .header-feedback .content-header-feedback {
+  font-size: 18px;
+  font-weight: 600;
+  color: #454545;
+}
+
+.shrink-0 {
+  flex-shrink: 0;
+}
+
+.notification-content-feedback {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 24px 16px;
+}
+
+.notification-content-feedback .notification-message {
+  font-size: 20px;
+  line-height: 20px;
+  font-weight: 600;
+  color: #454545;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.gap-6 {
+  gap: 1.5rem;
+}