| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8" /> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| | <title>Emojiifier</title> |
| | <script nonce="<%= nonce %>" src="/static/script.js"></script> |
| | <link |
| | rel="stylesheet" |
| | href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" |
| | integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" |
| | crossorigin="anonymous" |
| | /> |
| | <link |
| | href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap" |
| | rel="stylesheet" |
| | /> |
| | <link |
| | rel="stylesheet" |
| | href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" |
| | integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" |
| | crossorigin="anonymous" |
| | /> |
| | <style nonce="<%= nonce %>"> |
| | body { |
| | background-color: rgb(255, 187, 0); |
| | } |
| | |
| | .navbar { |
| | transition: transform 0.3s ease-in-out, padding 0.3s ease-in-out, |
| | background-color 0.3s ease-in-out; |
| | padding: 1rem 2rem; |
| | background-color: #ffdc6b; |
| | border: black 2px solid; |
| | border-radius: 30px; |
| | width: 100%; |
| | margin: 0 auto; |
| | transform: scale(1); |
| | position: relative; |
| | padding-left: 20px; |
| | padding-right: 20px; |
| | } |
| | |
| | .navbar.scrolled { |
| | padding: 0.5rem 2rem; |
| | border-radius: 0; |
| | width: 100%; |
| | position: fixed; |
| | top: 0; |
| | left: 0; |
| | background-color: #ffffff6e; |
| | backdrop-filter: blur(3px); |
| | -webkit-backdrop-filter: blur(3px); |
| | border: none !important; |
| | } |
| | |
| | .navbar-brand { |
| | transition: transform 1s ease-in-out; |
| | position: absolute; |
| | left: 50%; |
| | transform: translateX(-50%); |
| | } |
| | |
| | .navbar.scrolled .navbar-brand { |
| | transform: translateX(-50%) scale(0.8); |
| | } |
| | |
| | .content-area { |
| | width: 100vw; |
| | height: calc(90vh); |
| | padding: 20px; |
| | } |
| | |
| | @keyframes emojiChange { |
| | 0% { |
| | content: "😃"; |
| | } |
| | 25% { |
| | content: "😎"; |
| | } |
| | 50% { |
| | content: "🤪"; |
| | } |
| | 75% { |
| | content: "🥳"; |
| | } |
| | 100% { |
| | content: "😃"; |
| | } |
| | } |
| | |
| | .emoji-text::after { |
| | content: "😃"; |
| | animation: emojiChange 4s infinite; |
| | } |
| | |
| | .spacer { |
| | margin-top: 13.6vh; |
| | } |
| | |
| | .content-wrapper { |
| | margin-top: -13.6vh; |
| | } |
| | |
| | .main-content { |
| | width: 95%; |
| | margin: 0 auto; |
| | min-height: calc(100vh - 13.6vh); |
| | } |
| | |
| | .bg-light-gray { |
| | background-color: #f0f0f0; |
| | min-height: 70vh; |
| | border-top-left-radius: 30px !important; |
| | border-bottom-left-radius: 30px; |
| | } |
| | |
| | .bg-dark-red { |
| | background-color: #324376; |
| | color: white; |
| | min-height: 70vh; |
| | border-top-right-radius: 30px; |
| | border-bottom-right-radius: 30px; |
| | } |
| | |
| | .webcam-video { |
| | object-fit: cover; |
| | border-top-left-radius: 30px !important; |
| | border-bottom-left-radius: 30px; |
| | } |
| | |
| | .instructions-container { |
| | padding: 1.5rem; |
| | background-color: rgba(255, 255, 255, 0.043); |
| | border-radius: 20px; |
| | margin: 1rem; |
| | height: calc(100% - 2rem); |
| | display: flex; |
| | flex-direction: column; |
| | } |
| | |
| | .instructions-container h1 { |
| | font-size: 1.6rem; |
| | font-weight: 600; |
| | margin-bottom: 1rem; |
| | color: #ffc857; |
| | } |
| | |
| | .instructions-container h2, |
| | .instructions-container h3 { |
| | font-size: 1.1rem; |
| | font-weight: 500; |
| | color: #ffb627; |
| | margin-top: 0.8rem; |
| | } |
| | |
| | .instructions-container ul { |
| | margin-left: 0; |
| | padding-left: 0; |
| | } |
| | |
| | .instructions-container li { |
| | margin-bottom: 0.6rem; |
| | font-size: 0.95rem; |
| | line-height: 1.4; |
| | color: #f0f0f0; |
| | } |
| | |
| | .instructions-container p { |
| | color: #ffb627; |
| | font-weight: 500; |
| | } |
| | |
| | .capture-btn { |
| | margin-top: auto; |
| | background-color: #ffc857; |
| | color: #15224b; |
| | border: none; |
| | padding: 1rem; |
| | border-radius: 10px; |
| | font-weight: 600; |
| | transition: all 0.3s ease; |
| | opacity: 1; |
| | } |
| | |
| | .capture-btn:hover { |
| | background-color: #ffb627; |
| | transform: scale(1.02); |
| | } |
| | |
| | .calculating-container { |
| | display: none; |
| | text-align: center; |
| | height: 100%; |
| | justify-content: center; |
| | align-items: center; |
| | flex-direction: column; |
| | } |
| | |
| | .calculating-text { |
| | font-size: 2rem; |
| | color: #ffc857; |
| | margin-bottom: 2rem; |
| | } |
| | |
| | .result-emoji { |
| | font-size: 8rem; |
| | margin-bottom: 1rem; |
| | animation: pulse 2s infinite; |
| | } |
| | |
| | .result-comment { |
| | font-size: 1.2rem; |
| | color: #f0f0f0; |
| | } |
| | |
| | @keyframes bounce { |
| | 0%, |
| | 20%, |
| | 50%, |
| | 80%, |
| | 100% { |
| | transform: translateY(0); |
| | } |
| | 40% { |
| | transform: translateY(-20px); |
| | } |
| | 60% { |
| | transform: translateY(-10px); |
| | } |
| | } |
| | |
| | @keyframes pulse { |
| | 0% { |
| | transform: scale(1); |
| | } |
| | 50% { |
| | transform: scale(1.1); |
| | } |
| | 100% { |
| | transform: scale(1); |
| | } |
| | } |
| | |
| | @keyframes spin { |
| | 0% { |
| | transform: rotate(0deg); |
| | } |
| | 100% { |
| | transform: rotate(360deg); |
| | } |
| | } |
| | |
| | .loading-spinner { |
| | width: 50px; |
| | height: 50px; |
| | border: 5px solid #f3f3f3; |
| | border-top: 5px solid #ffc857; |
| | border-radius: 50%; |
| | animation: spin 1s linear infinite; |
| | margin: 20px auto; |
| | } |
| | |
| | .bounce { |
| | animation: bounce 2s infinite; |
| | } |
| | |
| | #capturedImage { |
| | display: none; |
| | width: 100%; |
| | height: 100%; |
| | object-fit: cover; |
| | border-top-left-radius: 30px !important; |
| | border-bottom-left-radius: 30px; |
| | } |
| | |
| | .technical-section { |
| | background-color: #324376; |
| | color: white; |
| | padding: 4rem 2rem; |
| | } |
| | |
| | .technical-section h2 { |
| | color: #ffc857; |
| | margin-bottom: 2rem; |
| | } |
| | |
| | .step-box { |
| | background: rgba(255, 255, 255, 0.1); |
| | border-radius: 10px; |
| | padding: 1.5rem; |
| | margin-bottom: 1.5rem; |
| | } |
| | |
| | .step-box h3 { |
| | color: #ffb627; |
| | margin-bottom: 1rem; |
| | } |
| | |
| | .step-box p { |
| | color: #f0f0f0; |
| | line-height: 1.6; |
| | } |
| | |
| | .code-block { |
| | background: #1e2a4a; |
| | padding: 1rem; |
| | border-radius: 5px; |
| | margin: 1rem 0; |
| | font-family: monospace; |
| | } |
| | |
| | .probability-bar { |
| | height: 20px; |
| | background: #ffc857; |
| | border-radius: 10px; |
| | margin: 5px 0; |
| | } |
| | |
| | .probability-label { |
| | display: flex; |
| | justify-content: space-between; |
| | color: #f0f0f0; |
| | margin-bottom: 5px; |
| | } |
| | |
| | .detected-emoji { |
| | font-size: 4rem; |
| | } |
| | |
| | .highlight-text { |
| | color: #ffc857; |
| | } |
| | |
| | .confidence-text { |
| | color: #ffc857; |
| | } |
| | |
| | .preprocessed-image { |
| | max-width: 100%; |
| | border-radius: 5px; |
| | } |
| | |
| | .probability-bar-custom { |
| | width: var(--percentage); |
| | } |
| | |
| | .processing-info { |
| | margin-top: 10px; |
| | font-size: 0.9em; |
| | color: #666; |
| | } |
| | |
| | .step-list { |
| | list-style: none; |
| | padding: 0; |
| | } |
| | |
| | .step-list li { |
| | padding: 5px 0; |
| | color: #f0f0f0; |
| | position: relative; |
| | padding-left: 20px; |
| | } |
| | |
| | .step-list li:before { |
| | content: "→"; |
| | position: absolute; |
| | left: 0; |
| | color: #ffc857; |
| | } |
| | |
| | .final-analysis { |
| | background: #324376 !important; |
| | border-radius: 30px !important; |
| | padding: 40px !important; |
| | margin-top: 40px; |
| | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| | } |
| | |
| | .analysis-container { |
| | padding: 0; |
| | } |
| | |
| | .analysis-box { |
| | background: rgba(255, 255, 255, 0.05) !important; |
| | padding: 30px; |
| | border-radius: 30px; |
| | height: 100%; |
| | border: none !important; |
| | margin: 10px; |
| | text-align: center; |
| | } |
| | |
| | .analysis-box h4 { |
| | color: #f0f0f0; |
| | font-size: 1.5rem; |
| | margin-bottom: 20px; |
| | font-weight: 300; |
| | letter-spacing: 1px; |
| | } |
| | |
| | .detected-emoji { |
| | font-size: 4.5rem; |
| | margin: 15px 0; |
| | } |
| | |
| | .highlight-text { |
| | color: #ffc857; |
| | font-size: 2rem; |
| | margin-top: 15px !important; |
| | text-transform: capitalize; |
| | font-weight: 300; |
| | } |
| | |
| | .confidence-text { |
| | color: #ffc857; |
| | font-size: 2rem; |
| | font-weight: 300; |
| | } |
| | |
| | .final-analysis h3 { |
| | color: #f0f0f0; |
| | font-size: 2rem; |
| | margin-bottom: 30px; |
| | font-weight: 300; |
| | letter-spacing: 1px; |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | <div class="container-fluid mt-4 fixed-top px-3"> |
| | <nav class="navbar navbar-expand navbar-light"> |
| | <div class="container-fluid"> |
| | <button |
| | id="settingsBtn" |
| | class="btn btn-link text-dark d-none d-lg-block" |
| | > |
| | <i class="fas fa-cog fa-lg"></i> |
| | </button> |
| |
|
| | <a class="navbar-brand font-weight-bold" href="#"> |
| | EM<span class="emoji-text"></span>JIFIER |
| | </a> |
| |
|
| | <button class="btn btn-link text-dark d-none d-lg-block"> |
| | <i class="fas fa-user fa-lg"></i> |
| | </button> |
| | </div> |
| | </nav> |
| | </div> |
| |
|
| | <div class="spacer"></div> |
| |
|
| | <div class="content-area"> |
| | <div class="row no-gutters camera-emoji-container"> |
| | <div class="col-md-6 w-100 vh-100 bg-light-gray"> |
| | <video |
| | id="webcam" |
| | autoplay |
| | playsinline |
| | class="w-100 h-100 webcam-video" |
| | ></video> |
| | <img id="capturedImage" alt="Captured Image" /> |
| | </div> |
| | <div class="col-md-6 no-guttter w-100 vh-100 bg-dark-red"> |
| | <div class="instructions-container"> |
| | <div id="initial-content"> |
| | <h1>Welcome to our Emotion Detection Website!</h1> |
| |
|
| | <h2>Getting Started:</h2> |
| | <ul class="list-unstyled"> |
| | <li> |
| | 1. Allow webcam access and ensure your face is well-lit and |
| | centered |
| | </li> |
| | <li> |
| | 2. Click "DETECT" to capture your image and display your |
| | emotion (e.g., Happy, Sad) |
| | </li> |
| | <li> |
| | 3. Click "Show It's Working" to see how the system uses facial |
| | landmarks and SVM model analysis |
| | </li> |
| | </ul> |
| |
|
| | <h3>Best Practices:</h3> |
| | <ul class="list-unstyled"> |
| | <li>• Ensure clear lighting</li> |
| | <li>• Keep face unobstructed</li> |
| | <li>• Check webcam permissions if issues arise</li> |
| | <li>• Adjust lighting if needed</li> |
| | </ul> |
| | </div> |
| |
|
| | <div id="calculating-content" class="calculating-container"> |
| | <div class="loading-spinner"></div> |
| | <div class="result-emoji"></div> |
| | <div class="result-comment"></div> |
| | </div> |
| |
|
| | <button id="detectBtn" class="capture-btn"> |
| | <i class="fas fa-smile mr-2"></i>Detect Emotion |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <div id="technical-section" class="technical-section"> |
| | <div class="container"> |
| | <h2 class="text-center mb-4">Real-Time Model Analysis</h2> |
| |
|
| | <div class="step-box"> |
| | <h3>Step 1: Image Acquisition</h3> |
| | <p>Capturing and preparing your image:</p> |
| | <div id="preprocessed-image"></div> |
| | </div> |
| |
|
| | <div class="step-box"> |
| | <h3>Step 2: Model Prediction</h3> |
| | <p>Confidence scores for each emotion:</p> |
| | <div id="emotion-probabilities"> |
| | |
| | </div> |
| | </div> |
| |
|
| | <div class="step-box final-analysis"> |
| | <h3>Final Analysis</h3> |
| | <div class="analysis-container"> |
| | <div class="row align-items-stretch"> |
| | <div class="col-md-6"> |
| | <div class="analysis-box"> |
| | <h4>Primary Emotion</h4> |
| | <div id="primary-emotion" class="text-center"> |
| | <span id="detected-emoji" class="detected-emoji"></span> |
| | <h4 id="detected-emotion" class="highlight-text"></h4> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="col-md-6"> |
| | <div class="analysis-box"> |
| | <h4>Confidence Level</h4> |
| | <div id="confidence-score" class="text-center"> |
| | <h4 class="confidence-text"></h4> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </body> |
| | <script nonce="<%= nonce %>"> |
| | const navbar = document.querySelector(".navbar"); |
| | |
| | window.addEventListener("scroll", () => { |
| | if (window.scrollY > 10) { |
| | navbar.classList.add("scrolled"); |
| | } else { |
| | navbar.classList.remove("scrolled"); |
| | } |
| | }); |
| | |
| | |
| | function updateTechnicalSection(result) { |
| | |
| | document.getElementById("preprocessed-image").innerHTML = ` |
| | <img src="${result.grayscale_image}" alt="Preprocessed Image" class="preprocessed-image"> |
| | `; |
| | |
| | |
| | const probContainer = document.getElementById("emotion-probabilities"); |
| | probContainer.innerHTML = ""; |
| | |
| | Object.entries(result.model_probabilities).forEach( |
| | ([emotion, probability]) => { |
| | const percentage = (probability * 100).toFixed(1); |
| | probContainer.innerHTML += ` |
| | <div class="probability-label"> |
| | <span>${emotion}</span> |
| | <span>${percentage}%</span> |
| | </div> |
| | <div class="probability-bar probability-bar-custom" style="--percentage: ${percentage}%"></div> |
| | `; |
| | } |
| | ); |
| | |
| | |
| | document.getElementById("detected-emoji").textContent = result.emoji; |
| | document.getElementById("detected-emotion").textContent = result.emotion; |
| | |
| | |
| | const confidence = ( |
| | result.model_probabilities[result.emotion] * 100 |
| | ).toFixed(1); |
| | document |
| | .getElementById("confidence-score") |
| | .querySelector("h4").textContent = `${confidence}% Confident`; |
| | } |
| | </script> |
| | <script |
| | nonce="<%= nonce %>" |
| | src="https://code.jquery.com/jquery-3.2.1.slim.min.js" |
| | integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" |
| | crossorigin="anonymous" |
| | ></script> |
| | <script |
| | nonce="<%= nonce %>" |
| | src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" |
| | integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" |
| | crossorigin="anonymous" |
| | ></script> |
| | <script |
| | nonce="<%= nonce %>" |
| | src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" |
| | integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" |
| | crossorigin="anonymous" |
| | ></script> |
| | <script nonce="<%= nonce %>"> |
| | async function initWebcam() { |
| | try { |
| | const stream = await navigator.mediaDevices.getUserMedia({ |
| | video: true, |
| | }); |
| | const video = document.getElementById("webcam"); |
| | video.srcObject = stream; |
| | } catch (err) { |
| | console.error("Error accessing webcam:", err); |
| | } |
| | } |
| | |
| | function captureImage() { |
| | const video = document.getElementById("webcam"); |
| | const canvas = document.createElement("canvas"); |
| | canvas.width = video.videoWidth; |
| | canvas.height = video.videoHeight; |
| | canvas |
| | .getContext("2d") |
| | .drawImage(video, 0, 0, canvas.width, canvas.height); |
| | |
| | |
| | video.style.display = "none"; |
| | const capturedImage = document.getElementById("capturedImage"); |
| | capturedImage.src = canvas.toDataURL("image/png"); |
| | capturedImage.style.display = "block"; |
| | |
| | |
| | const initialContent = document.getElementById("initial-content"); |
| | const calculatingContent = document.getElementById("calculating-content"); |
| | const detectBtn = document.getElementById("detectBtn"); |
| | |
| | initialContent.style.display = "none"; |
| | calculatingContent.style.display = "flex"; |
| | detectBtn.style.opacity = "0"; |
| | |
| | return capturedImage; |
| | } |
| | |
| | initWebcam(); |
| | </script> |
| | </html> |
| |
|
