File size: 2,715 Bytes
d2036ee |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
class EmotionAnalysis extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
margin: 1rem 0;
}
.container {
background: rgba(15, 23, 42, 0.7);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.5rem;
padding: 1rem;
}
.metrics {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.metric {
text-align: center;
}
.metric-value {
font-size: 1.2rem;
font-weight: bold;
color: #7c3aed;
}
.metric-label {
font-size: 0.8rem;
color: #94a3b8;
}
.confidence-score {
font-size: 1.5rem;
font-weight: bold;
text-align: center;
margin: 1rem 0;
background: linear-gradient(90deg, #7c3aed 0%, #2563eb 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
</style>
<div class="container">
<h3>Emotion Analysis</h3>
<div class="confidence-score">
Confidence Score: <span id="score">0</span>/100
</div>
<div class="metrics">
<div class="metric">
<div class="metric-value" id="confidence">0%</div>
<div class="metric-label">Confidence</div>
</div>
<div class="metric">
<div class="metric-value" id="clarity">0%</div>
<div class="metric-label">Clarity</div>
</div>
<div class="metric">
<div class="metric-value" id="fluency">0%</div>
<div class="metric-label">Fluency</div>
</div>
<div class="metric">
<div class="metric-value" id="emotional">0%</div>
<div class="metric-label">Emotional Impact</div>
</div>
</div>
</div>
`;
}
updateAnalysis(data) {
if (!this.shadowRoot) return;
const { confidence, clarity, fluency, emotionalImpact, confidenceScore } = data;
this.shadowRoot.getElementById('score').textContent = confidenceScore;
this.shadowRoot.getElementById('confidence').textContent = `${confidence}%`;
this.shadowRoot.getElementById('clarity').textContent = `${clarity}%`;
this.shadowRoot.getElementById('fluency').textContent = `${fluency}%`;
this.shadowRoot.getElementById('emotional').textContent = `${emotionalImpact}%`;
}
}
customElements.define('emotion-analysis', EmotionAnalysis); |