|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Tools - Crypto Intelligence Hub</title> |
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; |
|
|
background: linear-gradient(135deg, #050816 0%, #0a1128 100%); |
|
|
color: #e2e8f0; |
|
|
min-height: 100vh; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.header { |
|
|
text-align: center; |
|
|
margin-bottom: 40px; |
|
|
padding: 30px 20px; |
|
|
background: rgba(15, 23, 42, 0.6); |
|
|
border-radius: 16px; |
|
|
backdrop-filter: blur(10px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.header h1 { |
|
|
font-size: 2.5rem; |
|
|
font-weight: 700; |
|
|
margin-bottom: 10px; |
|
|
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
background-clip: text; |
|
|
} |
|
|
|
|
|
.header p { |
|
|
color: #94a3b8; |
|
|
font-size: 1.1rem; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 1400px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.card { |
|
|
background: rgba(15, 23, 42, 0.8); |
|
|
border-radius: 16px; |
|
|
padding: 30px; |
|
|
margin-bottom: 30px; |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); |
|
|
backdrop-filter: blur(10px); |
|
|
} |
|
|
|
|
|
.card-title { |
|
|
font-size: 1.8rem; |
|
|
font-weight: 600; |
|
|
margin-bottom: 25px; |
|
|
color: #f1f5f9; |
|
|
} |
|
|
|
|
|
.form-group { |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.form-label { |
|
|
display: block; |
|
|
margin-bottom: 8px; |
|
|
color: #cbd5e1; |
|
|
font-weight: 500; |
|
|
font-size: 0.95rem; |
|
|
} |
|
|
|
|
|
.form-input, |
|
|
.form-textarea, |
|
|
.form-select { |
|
|
width: 100%; |
|
|
padding: 12px 16px; |
|
|
background: rgba(30, 41, 59, 0.8); |
|
|
border: 1px solid rgba(255, 255, 255, 0.15); |
|
|
border-radius: 8px; |
|
|
color: #e2e8f0; |
|
|
font-size: 1rem; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.form-input:focus, |
|
|
.form-textarea:focus, |
|
|
.form-select:focus { |
|
|
outline: none; |
|
|
border-color: #60a5fa; |
|
|
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1); |
|
|
} |
|
|
|
|
|
.form-textarea { |
|
|
min-height: 120px; |
|
|
resize: vertical; |
|
|
font-family: inherit; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
padding: 12px 24px; |
|
|
font-size: 1rem; |
|
|
font-weight: 600; |
|
|
border: none; |
|
|
border-radius: 8px; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.btn-primary:hover:not(:disabled) { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4); |
|
|
} |
|
|
|
|
|
.btn-primary:disabled { |
|
|
opacity: 0.6; |
|
|
cursor: not-allowed; |
|
|
} |
|
|
|
|
|
.btn-secondary { |
|
|
background: rgba(71, 85, 105, 0.8); |
|
|
color: #e2e8f0; |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.btn-secondary:hover:not(:disabled) { |
|
|
background: rgba(100, 116, 139, 0.9); |
|
|
} |
|
|
|
|
|
.result-box { |
|
|
margin-top: 25px; |
|
|
padding: 20px; |
|
|
background: rgba(30, 41, 59, 0.6); |
|
|
border-radius: 12px; |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.error-box { |
|
|
margin-top: 25px; |
|
|
padding: 16px; |
|
|
background: rgba(239, 68, 68, 0.1); |
|
|
border: 1px solid rgba(239, 68, 68, 0.3); |
|
|
border-radius: 8px; |
|
|
color: #fca5a5; |
|
|
} |
|
|
|
|
|
.success-box { |
|
|
margin-top: 25px; |
|
|
padding: 20px; |
|
|
background: rgba(34, 197, 94, 0.1); |
|
|
border: 1px solid rgba(34, 197, 94, 0.3); |
|
|
border-radius: 12px; |
|
|
} |
|
|
|
|
|
.badge { |
|
|
display: inline-block; |
|
|
padding: 6px 14px; |
|
|
border-radius: 20px; |
|
|
font-size: 0.9rem; |
|
|
font-weight: 600; |
|
|
margin-right: 10px; |
|
|
} |
|
|
|
|
|
.badge-positive { |
|
|
background: rgba(34, 197, 94, 0.2); |
|
|
color: #4ade80; |
|
|
border: 1px solid rgba(34, 197, 94, 0.3); |
|
|
} |
|
|
|
|
|
.badge-negative { |
|
|
background: rgba(239, 68, 68, 0.2); |
|
|
color: #f87171; |
|
|
border: 1px solid rgba(239, 68, 68, 0.3); |
|
|
} |
|
|
|
|
|
.badge-neutral { |
|
|
background: rgba(148, 163, 184, 0.2); |
|
|
color: #94a3b8; |
|
|
border: 1px solid rgba(148, 163, 184, 0.3); |
|
|
} |
|
|
|
|
|
.badge-success { |
|
|
background: rgba(34, 197, 94, 0.2); |
|
|
color: #4ade80; |
|
|
border: 1px solid rgba(34, 197, 94, 0.3); |
|
|
} |
|
|
|
|
|
.badge-danger { |
|
|
background: rgba(239, 68, 68, 0.2); |
|
|
color: #f87171; |
|
|
border: 1px solid rgba(239, 68, 68, 0.3); |
|
|
} |
|
|
|
|
|
.score-bar { |
|
|
margin-top: 15px; |
|
|
} |
|
|
|
|
|
.score-item { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
margin-bottom: 8px; |
|
|
} |
|
|
|
|
|
.score-label { |
|
|
min-width: 80px; |
|
|
font-size: 0.9rem; |
|
|
color: #cbd5e1; |
|
|
} |
|
|
|
|
|
.score-progress { |
|
|
flex: 1; |
|
|
height: 8px; |
|
|
background: rgba(30, 41, 59, 0.8); |
|
|
border-radius: 4px; |
|
|
overflow: hidden; |
|
|
margin: 0 12px; |
|
|
} |
|
|
|
|
|
.score-fill { |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%); |
|
|
border-radius: 4px; |
|
|
transition: width 0.5s ease; |
|
|
} |
|
|
|
|
|
.score-value { |
|
|
min-width: 50px; |
|
|
text-align: right; |
|
|
font-weight: 600; |
|
|
color: #e2e8f0; |
|
|
} |
|
|
|
|
|
.table-container { |
|
|
overflow-x: auto; |
|
|
margin-top: 20px; |
|
|
} |
|
|
|
|
|
table { |
|
|
width: 100%; |
|
|
border-collapse: collapse; |
|
|
} |
|
|
|
|
|
th { |
|
|
background: rgba(30, 41, 59, 0.8); |
|
|
padding: 12px; |
|
|
text-align: left; |
|
|
font-weight: 600; |
|
|
color: #f1f5f9; |
|
|
border-bottom: 2px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
td { |
|
|
padding: 12px; |
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05); |
|
|
color: #cbd5e1; |
|
|
} |
|
|
|
|
|
tr:hover { |
|
|
background: rgba(30, 41, 59, 0.4); |
|
|
} |
|
|
|
|
|
.info-box { |
|
|
padding: 16px; |
|
|
background: rgba(59, 130, 246, 0.1); |
|
|
border: 1px solid rgba(59, 130, 246, 0.3); |
|
|
border-radius: 8px; |
|
|
margin: 15px 0; |
|
|
color: #93c5fd; |
|
|
} |
|
|
|
|
|
.warning-box { |
|
|
padding: 16px; |
|
|
background: rgba(251, 191, 36, 0.1); |
|
|
border: 1px solid rgba(251, 191, 36, 0.3); |
|
|
border-radius: 8px; |
|
|
margin: 15px 0; |
|
|
color: #fcd34d; |
|
|
} |
|
|
|
|
|
.status-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
|
gap: 15px; |
|
|
margin: 20px 0; |
|
|
} |
|
|
|
|
|
.status-item { |
|
|
padding: 15px; |
|
|
background: rgba(30, 41, 59, 0.6); |
|
|
border-radius: 8px; |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.status-label { |
|
|
font-size: 0.85rem; |
|
|
color: #94a3b8; |
|
|
margin-bottom: 5px; |
|
|
} |
|
|
|
|
|
.status-value { |
|
|
font-size: 1.3rem; |
|
|
font-weight: 700; |
|
|
color: #f1f5f9; |
|
|
} |
|
|
|
|
|
.summary-text { |
|
|
padding: 20px; |
|
|
background: rgba(30, 41, 59, 0.8); |
|
|
border-radius: 8px; |
|
|
border-left: 4px solid #60a5fa; |
|
|
font-size: 1.05rem; |
|
|
line-height: 1.7; |
|
|
color: #e2e8f0; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.sentences-list { |
|
|
list-style: none; |
|
|
padding: 0; |
|
|
} |
|
|
|
|
|
.sentences-list li { |
|
|
padding: 12px 15px; |
|
|
background: rgba(30, 41, 59, 0.6); |
|
|
border-radius: 8px; |
|
|
margin-bottom: 10px; |
|
|
border-left: 3px solid #8b5cf6; |
|
|
color: #cbd5e1; |
|
|
} |
|
|
|
|
|
.sentences-list li:before { |
|
|
content: "→"; |
|
|
margin-right: 10px; |
|
|
color: #8b5cf6; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.loading { |
|
|
display: inline-block; |
|
|
width: 16px; |
|
|
height: 16px; |
|
|
border: 2px solid rgba(255, 255, 255, 0.3); |
|
|
border-top-color: #fff; |
|
|
border-radius: 50%; |
|
|
animation: spin 0.6s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
to { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
.two-column { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 1fr; |
|
|
gap: 20px; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.header h1 { |
|
|
font-size: 1.8rem; |
|
|
} |
|
|
|
|
|
.header p { |
|
|
font-size: 0.95rem; |
|
|
} |
|
|
|
|
|
.card { |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.card-title { |
|
|
font-size: 1.4rem; |
|
|
} |
|
|
|
|
|
.two-column { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.status-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
} |
|
|
|
|
|
.hidden { |
|
|
display: none; |
|
|
} |
|
|
</style> |
|
|
|
|
|
<script src="/static/js/api-config.js"></script> |
|
|
<script> |
|
|
|
|
|
window.apiReady = new Promise((resolve) => { |
|
|
if (window.apiClient) { |
|
|
console.log('✅ API Client ready'); |
|
|
resolve(window.apiClient); |
|
|
} else { |
|
|
console.error('❌ API Client not loaded'); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
|
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="header"> |
|
|
<h1>AI Tools – Crypto Intelligence Hub</h1> |
|
|
<p>Sentiment, Summaries, and Model Diagnostics</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card"> |
|
|
<h2 class="card-title">Sentiment Playground</h2> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label class="form-label" for="sentiment-input">Enter Text</label> |
|
|
<textarea |
|
|
id="sentiment-input" |
|
|
class="form-textarea" |
|
|
placeholder="Enter text to analyze sentiment (tweets, news, or any text)..." |
|
|
></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="two-column"> |
|
|
<div class="form-group"> |
|
|
<label class="form-label" for="sentiment-source">Analysis Mode</label> |
|
|
<select id="sentiment-source" class="form-select"> |
|
|
<option value="auto">Auto (Crypto)</option> |
|
|
<option value="crypto">Crypto</option> |
|
|
<option value="financial">Financial</option> |
|
|
<option value="social">Social/Twitter</option> |
|
|
<option value="news">News</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label class="form-label" for="sentiment-symbol">Asset Symbol (Optional)</label> |
|
|
<input |
|
|
type="text" |
|
|
id="sentiment-symbol" |
|
|
class="form-input" |
|
|
placeholder="e.g., BTC, ETH" |
|
|
style="text-transform: uppercase;" |
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button id="analyze-sentiment-btn" class="btn btn-primary"> |
|
|
Analyze Sentiment |
|
|
</button> |
|
|
|
|
|
<div id="sentiment-result" class="hidden"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card"> |
|
|
<h2 class="card-title">Text Summarizer</h2> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label class="form-label" for="summary-input">Enter Long Text</label> |
|
|
<textarea |
|
|
id="summary-input" |
|
|
class="form-textarea" |
|
|
placeholder="Paste article or long text to summarize..." |
|
|
style="min-height: 180px;" |
|
|
></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label class="form-label" for="max-sentences">Maximum Sentences</label> |
|
|
<select id="max-sentences" class="form-select"> |
|
|
<option value="2">2 sentences</option> |
|
|
<option value="3" selected>3 sentences</option> |
|
|
<option value="4">4 sentences</option> |
|
|
<option value="5">5 sentences</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<button id="summarize-btn" class="btn btn-primary"> |
|
|
Summarize |
|
|
</button> |
|
|
|
|
|
<div id="summary-result" class="hidden"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card"> |
|
|
<h2 class="card-title">Model Status & Diagnostics</h2> |
|
|
|
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;"> |
|
|
<h3 style="color: #cbd5e1; font-size: 1.2rem;">Registry Status</h3> |
|
|
<button id="refresh-status-btn" class="btn btn-secondary"> |
|
|
Refresh |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="registry-status"></div> |
|
|
|
|
|
<h3 style="color: #cbd5e1; font-size: 1.2rem; margin: 30px 0 15px 0;">Models Table</h3> |
|
|
<div id="models-table"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
(function() { |
|
|
'use strict'; |
|
|
|
|
|
const AITools = { |
|
|
|
|
|
async analyzeSentiment() { |
|
|
const text = document.getElementById('sentiment-input').value.trim(); |
|
|
const mode = document.getElementById('sentiment-source').value; |
|
|
const symbol = document.getElementById('sentiment-symbol').value.trim().toUpperCase(); |
|
|
const btn = document.getElementById('analyze-sentiment-btn'); |
|
|
const resultDiv = document.getElementById('sentiment-result'); |
|
|
|
|
|
if (!text) { |
|
|
this.showError(resultDiv, 'Please enter text to analyze'); |
|
|
return; |
|
|
} |
|
|
|
|
|
btn.disabled = true; |
|
|
btn.innerHTML = '<span class="loading"></span> Analyzing...'; |
|
|
resultDiv.classList.add('hidden'); |
|
|
|
|
|
try { |
|
|
const payload = { text, mode, source: 'ai_tools' }; |
|
|
if (symbol) payload.symbol = symbol; |
|
|
|
|
|
const response = await fetch('/api/sentiment/analyze', { |
|
|
method: 'POST', |
|
|
headers: { 'Content-Type': 'application/json' }, |
|
|
body: JSON.stringify(payload) |
|
|
}); |
|
|
|
|
|
const data = await response.json(); |
|
|
|
|
|
if (!response.ok || !data.ok) { |
|
|
throw new Error(data.error || 'Sentiment analysis failed'); |
|
|
} |
|
|
|
|
|
this.displaySentimentResult(resultDiv, data); |
|
|
} catch (error) { |
|
|
this.showError(resultDiv, error.message); |
|
|
} finally { |
|
|
btn.disabled = false; |
|
|
btn.innerHTML = 'Analyze Sentiment'; |
|
|
} |
|
|
}, |
|
|
|
|
|
displaySentimentResult(container, data) { |
|
|
const label = data.label || 'unknown'; |
|
|
const score = (data.score * 100).toFixed(1); |
|
|
const labelClass = label.toLowerCase(); |
|
|
const engine = data.engine || 'unknown'; |
|
|
|
|
|
|
|
|
let displayLabel = label; |
|
|
if (label === 'bullish' || label === 'positive') displayLabel = 'Bullish/Positive'; |
|
|
else if (label === 'bearish' || label === 'negative') displayLabel = 'Bearish/Negative'; |
|
|
else if (label === 'neutral') displayLabel = 'Neutral'; |
|
|
|
|
|
let html = '<div class="result-box">'; |
|
|
html += '<h3 style="margin-bottom: 15px; color: #f1f5f9;">Sentiment Analysis Result</h3>'; |
|
|
html += `<div style="margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">`; |
|
|
html += `<div>`; |
|
|
html += `<span class="badge badge-${labelClass}">${displayLabel.toUpperCase()}</span>`; |
|
|
html += `<span style="font-size: 1.3rem; font-weight: 700; color: #e2e8f0; margin-left: 10px;">${score}%</span>`; |
|
|
html += `</div>`; |
|
|
html += `<div style="font-size: 0.85rem; color: #94a3b8;">Engine: ${engine}</div>`; |
|
|
html += `</div>`; |
|
|
|
|
|
if (data.model) { |
|
|
html += `<p style="color: #94a3b8; font-size: 0.9rem; margin-bottom: 15px;">Model: ${data.model}</p>`; |
|
|
} |
|
|
|
|
|
if (data.details && data.details.labels && data.details.scores) { |
|
|
html += '<div class="score-bar">'; |
|
|
for (let i = 0; i < data.details.labels.length; i++) { |
|
|
const lbl = data.details.labels[i]; |
|
|
const scr = (data.details.scores[i] * 100).toFixed(1); |
|
|
html += '<div class="score-item">'; |
|
|
html += `<span class="score-label">${lbl}</span>`; |
|
|
html += '<div class="score-progress">'; |
|
|
html += `<div class="score-fill" style="width: ${scr}%"></div>`; |
|
|
html += '</div>'; |
|
|
html += `<span class="score-value">${scr}%</span>`; |
|
|
html += '</div>'; |
|
|
} |
|
|
html += '</div>'; |
|
|
} |
|
|
|
|
|
|
|
|
if (engine === 'fallback_lexical') { |
|
|
html += '<div class="info-box" style="margin-top: 15px;">'; |
|
|
html += '<strong>Note:</strong> Using fallback lexical analysis. HF models may be unavailable.'; |
|
|
html += '</div>'; |
|
|
} |
|
|
|
|
|
html += '</div>'; |
|
|
container.innerHTML = html; |
|
|
container.classList.remove('hidden'); |
|
|
}, |
|
|
|
|
|
|
|
|
async summarizeText() { |
|
|
const text = document.getElementById('summary-input').value.trim(); |
|
|
const maxSentences = parseInt(document.getElementById('max-sentences').value); |
|
|
const btn = document.getElementById('summarize-btn'); |
|
|
const resultDiv = document.getElementById('summary-result'); |
|
|
|
|
|
if (!text) { |
|
|
this.showError(resultDiv, 'Please enter text to summarize'); |
|
|
return; |
|
|
} |
|
|
|
|
|
btn.disabled = true; |
|
|
btn.innerHTML = '<span class="loading"></span> Summarizing...'; |
|
|
resultDiv.classList.add('hidden'); |
|
|
|
|
|
try { |
|
|
const response = await fetch('/api/ai/summarize', { |
|
|
method: 'POST', |
|
|
headers: { 'Content-Type': 'application/json' }, |
|
|
body: JSON.stringify({ text, max_sentences: maxSentences }) |
|
|
}); |
|
|
|
|
|
const data = await response.json(); |
|
|
|
|
|
if (!response.ok || !data.ok) { |
|
|
throw new Error(data.error || 'Summarization failed'); |
|
|
} |
|
|
|
|
|
this.displaySummaryResult(resultDiv, data); |
|
|
} catch (error) { |
|
|
this.showError(resultDiv, error.message); |
|
|
} finally { |
|
|
btn.disabled = false; |
|
|
btn.innerHTML = 'Summarize'; |
|
|
} |
|
|
}, |
|
|
|
|
|
displaySummaryResult(container, data) { |
|
|
let html = '<div class="result-box">'; |
|
|
html += '<h3 style="margin-bottom: 15px; color: #f1f5f9;">Summary</h3>'; |
|
|
|
|
|
if (data.summary) { |
|
|
html += `<div class="summary-text">${this.escapeHtml(data.summary)}</div>`; |
|
|
} |
|
|
|
|
|
if (data.sentences && data.sentences.length > 0) { |
|
|
html += '<h4 style="margin: 20px 0 10px 0; color: #cbd5e1; font-size: 1.1rem;">Key Sentences</h4>'; |
|
|
html += '<ul class="sentences-list">'; |
|
|
data.sentences.forEach(sentence => { |
|
|
html += `<li>${this.escapeHtml(sentence)}</li>`; |
|
|
}); |
|
|
html += '</ul>'; |
|
|
} |
|
|
|
|
|
html += '</div>'; |
|
|
container.innerHTML = html; |
|
|
container.classList.remove('hidden'); |
|
|
}, |
|
|
|
|
|
|
|
|
async loadModelStatus() { |
|
|
const statusDiv = document.getElementById('registry-status'); |
|
|
const tableDiv = document.getElementById('models-table'); |
|
|
const btn = document.getElementById('refresh-status-btn'); |
|
|
|
|
|
btn.disabled = true; |
|
|
btn.innerHTML = '<span class="loading"></span> Loading...'; |
|
|
|
|
|
try { |
|
|
const [statusRes, listRes] = await Promise.all([ |
|
|
fetch('/api/models/status'), |
|
|
fetch('/api/models/list') |
|
|
]); |
|
|
|
|
|
const statusData = await statusRes.json(); |
|
|
const listData = await listRes.json(); |
|
|
|
|
|
this.displayRegistryStatus(statusDiv, statusData); |
|
|
this.displayModelsTable(tableDiv, listData); |
|
|
} catch (error) { |
|
|
this.showError(statusDiv, 'Failed to load model status: ' + error.message); |
|
|
} finally { |
|
|
btn.disabled = false; |
|
|
btn.innerHTML = 'Refresh'; |
|
|
} |
|
|
}, |
|
|
|
|
|
displayRegistryStatus(container, data) { |
|
|
let html = '<div class="status-grid">'; |
|
|
|
|
|
html += '<div class="status-item">'; |
|
|
html += '<div class="status-label">HF Mode</div>'; |
|
|
html += `<div class="status-value">${data.hf_mode || 'unknown'}</div>`; |
|
|
html += '</div>'; |
|
|
|
|
|
html += '<div class="status-item">'; |
|
|
html += '<div class="status-label">Overall Status</div>'; |
|
|
html += `<div class="status-value">${data.status || 'unknown'}</div>`; |
|
|
html += '</div>'; |
|
|
|
|
|
html += '<div class="status-item">'; |
|
|
html += '<div class="status-label">Models Loaded</div>'; |
|
|
html += `<div class="status-value">${data.models_loaded || 0}</div>`; |
|
|
html += '</div>'; |
|
|
|
|
|
html += '<div class="status-item">'; |
|
|
html += '<div class="status-label">Models Failed</div>'; |
|
|
html += `<div class="status-value">${data.models_failed || 0}</div>`; |
|
|
html += '</div>'; |
|
|
|
|
|
html += '</div>'; |
|
|
|
|
|
if (data.status === 'disabled' || data.hf_mode === 'off') { |
|
|
html += '<div class="info-box">'; |
|
|
html += '<strong>Note:</strong> HF models are disabled. To enable them, set HF_MODE=public or HF_MODE=auth in the environment.'; |
|
|
html += '</div>'; |
|
|
} else if (data.models_loaded === 0 && data.status !== 'disabled') { |
|
|
html += '<div class="warning-box">'; |
|
|
html += '<strong>Warning:</strong> No models could be loaded. Check model IDs or HF credentials.'; |
|
|
html += '</div>'; |
|
|
} |
|
|
|
|
|
if (data.error) { |
|
|
html += '<div class="error-box" style="margin-top: 15px;">'; |
|
|
html += `<strong>Error:</strong> ${this.escapeHtml(data.error)}`; |
|
|
html += '</div>'; |
|
|
} |
|
|
|
|
|
if (data.failed && data.failed.length > 0) { |
|
|
html += '<div style="margin-top: 20px;">'; |
|
|
html += '<h4 style="color: #cbd5e1; margin-bottom: 10px;">Failed Models</h4>'; |
|
|
html += '<div style="background: rgba(30, 41, 59, 0.6); border-radius: 8px; padding: 15px;">'; |
|
|
data.failed.forEach(([key, error]) => { |
|
|
html += `<div style="margin-bottom: 8px; padding: 8px; background: rgba(239, 68, 68, 0.1); border-left: 3px solid #ef4444; border-radius: 4px;">`; |
|
|
html += `<strong style="color: #fca5a5;">${key}:</strong> `; |
|
|
html += `<span style="color: #cbd5e1;">${this.escapeHtml(error)}</span>`; |
|
|
html += `</div>`; |
|
|
}); |
|
|
html += '</div>'; |
|
|
html += '</div>'; |
|
|
} |
|
|
|
|
|
container.innerHTML = html; |
|
|
}, |
|
|
|
|
|
displayModelsTable(container, data) { |
|
|
if (!data.models || data.models.length === 0) { |
|
|
container.innerHTML = '<div class="info-box">No models configured</div>'; |
|
|
return; |
|
|
} |
|
|
|
|
|
let html = '<div class="table-container">'; |
|
|
html += '<table>'; |
|
|
html += '<thead><tr>'; |
|
|
html += '<th>Key</th>'; |
|
|
html += '<th>Task</th>'; |
|
|
html += '<th>Model ID</th>'; |
|
|
html += '<th>Loaded</th>'; |
|
|
html += '<th>Error</th>'; |
|
|
html += '</tr></thead>'; |
|
|
html += '<tbody>'; |
|
|
|
|
|
data.models.forEach(model => { |
|
|
html += '<tr>'; |
|
|
html += `<td><strong>${model.key || 'N/A'}</strong></td>`; |
|
|
html += `<td>${model.task || 'N/A'}</td>`; |
|
|
html += `<td style="font-family: monospace; font-size: 0.85rem;">${model.model_id || 'N/A'}</td>`; |
|
|
html += '<td>'; |
|
|
if (model.loaded) { |
|
|
html += '<span class="badge badge-success">Yes</span>'; |
|
|
} else { |
|
|
html += '<span class="badge badge-danger">No</span>'; |
|
|
} |
|
|
html += '</td>'; |
|
|
html += `<td style="color: #f87171; font-size: 0.85rem;">${model.error ? this.escapeHtml(model.error) : '-'}</td>`; |
|
|
html += '</tr>'; |
|
|
}); |
|
|
|
|
|
html += '</tbody>'; |
|
|
html += '</table>'; |
|
|
html += '</div>'; |
|
|
|
|
|
container.innerHTML = html; |
|
|
}, |
|
|
|
|
|
|
|
|
showError(container, message) { |
|
|
container.innerHTML = `<div class="error-box"><strong>Error:</strong> ${this.escapeHtml(message)}</div>`; |
|
|
container.classList.remove('hidden'); |
|
|
}, |
|
|
|
|
|
escapeHtml(text) { |
|
|
const div = document.createElement('div'); |
|
|
div.textContent = text; |
|
|
return div.innerHTML; |
|
|
}, |
|
|
|
|
|
|
|
|
init() { |
|
|
document.getElementById('analyze-sentiment-btn').addEventListener('click', () => this.analyzeSentiment()); |
|
|
document.getElementById('summarize-btn').addEventListener('click', () => this.summarizeText()); |
|
|
document.getElementById('refresh-status-btn').addEventListener('click', () => this.loadModelStatus()); |
|
|
|
|
|
this.loadModelStatus(); |
|
|
} |
|
|
}; |
|
|
|
|
|
if (document.readyState === 'loading') { |
|
|
document.addEventListener('DOMContentLoaded', () => AITools.init()); |
|
|
} else { |
|
|
AITools.init(); |
|
|
} |
|
|
})(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
