templates/sentiment.html

{% extends "layout.html" %}

{% block title %}Empathy Engine - Quantum AI{% endblock %}

{% block page_header %}
<h1>Empathy Engine</h1>
<p>Contextual sentiment analysis for text and vocal recordings.</p>
{% endblock %}

{% block content %}
<div class="sentiment-container">
  <div class="glass-card sentiment-analyzer">
    <form action="/sentiment" method="post" enctype="multipart/form-data" class="quantum-form">
      <div class="tabs">
        <button type="button" class="tab-btn active" onclick="switchTab('text')">Text Analysis</button>
        <button type="button" class="tab-btn" onclick="switchTab('voice')">Vocal Analysis</button>
      </div>

      <div id="textSection" class="tab-content active">
        <div class="input-group">
          <label>Input Text</label>
          <textarea name="text" placeholder="Explain how you're feeling..."></textarea>
        </div>
      </div>

      <div id="voiceSection" class="tab-content">
        <div class="upload-zone">
          <i class="fas fa-microphone-alt upload-icon"></i>
          <div class="upload-text">
            <strong>Upload Voice Recording</strong>
            <span>WAV or MP3 format required</span>
          </div>
          <input type="file" name="voice" accept="audio/*">
        </div>
      </div>

      <button type="submit" class="btn-quantum full-width">
        <i class="fas fa-heartbeat"></i> Analyze Sentiment
      </button>
    </form>

    {% if result %}
    <div class="result-container animate-fade-in">
      <div class="result-header">Engine Output</div>

      {% if transcript %}
      <div class="transcript-box">
        <label>Vocal Transcription</label>
        <p>"{{ transcript }}"</p>
      </div>
      {% endif %}

      <div class="sentiment-meter">
        <div class="meter-label">
          <span>Detected Sentiment</span>
          <span class="sentiment-value highlight-{{ result|lower }}">{{ result }}</span>
        </div>
        <!-- Simple visual score if available, or just a themed box -->
        <div class="sentiment-score-box {{ result|lower }}">
          {% if result|lower == 'positive' %}
          <i class="fas fa-laugh-beam"></i>
          {% elif result|lower == 'negative' %}
          <i class="fas fa-frown-open"></i>
          {% else %}
          <i class="fas fa-meh"></i>
          {% endif %}
        </div>
      </div>
    </div>
    {% endif %}
  </div>
</div>

<style>
  .sentiment-container {
    max-width: 800px;
    margin: 0 auto;
  }

  .tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 1rem;
  }

  .tab-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    padding: 0.5rem 1rem;
    transition: var(--transition);
    border-radius: var(--radius-md);
  }

  .tab-btn.active {
    color: var(--accent-blue);
    background: rgba(0, 210, 255, 0.1);
  }

  .tab-content {
    display: none;
  }

  .tab-content.active {
    display: block;
  }

  .upload-zone {
    border: 2px dashed var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    text-align: center;
    position: relative;
  }

  .upload-zone input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
  }

  .transcript-box {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
  }

  .transcript-box label {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--accent-blue);
  }

  .sentiment-meter {
    display: flex;
    align-items: center;
    gap: 2rem;
    background: rgba(255, 255, 255, 0.03);
    padding: 1.5rem;
    border-radius: var(--radius-md);
  }

  .meter-label {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .sentiment-value {
    font-size: 2.5rem;
    font-weight: 800;
    text-transform: capitalize;
  }

  .highlight-positive {
    color: #22c55e;
  }

  .highlight-negative {
    color: #ef4444;
  }

  .highlight-neutral {
    color: var(--accent-blue);
  }

  .sentiment-score-box {
    font-size: 3.5rem;
  }

  .sentiment-score-box.positive {
    color: #22c55e;
  }

  .sentiment-score-box.negative {
    color: #ef4444;
  }

  .sentiment-score-box.neutral {
    color: var(--accent-blue);
  }

  textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    color: var(--text-primary);
    min-height: 150px;
  }
</style>

<script>
  function switchTab(type) {
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));

    event.target.classList.add('active');
    document.getElementById(type + 'Section').classList.add('active');
  }
</script>
{% endblock %}