fix(zopk): Naprawka importu func + ładne toasty/modale w UI
Poprawki: - Dodano brakujący import `func` w find_similar_to_verified_facts() - Dodano brakujący import `func` w auto_verify_similar_to_verified() UI/UX: - Zamieniono brzydkie alert() na stylizowane toasty - Zamieniono confirm() na ładne modale z ikonami - Dodano animacje slideIn/slideOut dla toastów - Dodano animacje fadeIn/scaleIn dla modali Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
009cd09492
commit
f126341eed
@ -271,10 +271,187 @@
|
||||
.breadcrumb a:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
/* Toast notifications */
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.toast {
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
||||
padding: var(--spacing-md) var(--spacing-lg);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-md);
|
||||
animation: slideIn 0.3s ease-out;
|
||||
border-left: 4px solid var(--primary);
|
||||
}
|
||||
|
||||
.toast.success { border-left-color: #10b981; }
|
||||
.toast.error { border-left-color: #ef4444; }
|
||||
.toast.warning { border-left-color: #f59e0b; }
|
||||
.toast.info { border-left-color: #3b82f6; }
|
||||
|
||||
.toast-icon {
|
||||
font-size: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toast-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.toast-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.toast-message {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.toast-close {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
color: var(--text-tertiary);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.toast-close:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from { transform: translateX(100%); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes slideOut {
|
||||
from { transform: translateX(0); opacity: 1; }
|
||||
to { transform: translateX(100%); opacity: 0; }
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10000;
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||||
max-width: 440px;
|
||||
width: 90%;
|
||||
animation: scaleIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: var(--spacing-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.modal-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: var(--spacing-lg);
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: var(--spacing-md) var(--spacing-lg);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--spacing-sm);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
padding: 10px 20px;
|
||||
border-radius: var(--radius);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.modal-btn-secondary {
|
||||
background: var(--background);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.modal-btn-secondary:hover {
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.modal-btn-primary {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.modal-btn-primary:hover {
|
||||
background: var(--primary-dark);
|
||||
}
|
||||
|
||||
.modal-btn-danger {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.modal-btn-danger:hover {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from { transform: scale(0.95); opacity: 0; }
|
||||
to { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Toast container -->
|
||||
<div id="toastContainer" class="toast-container"></div>
|
||||
|
||||
<div class="container">
|
||||
<div class="breadcrumb">
|
||||
<a href="{{ url_for('admin_zopk') }}">Panel Admina</a>
|
||||
@ -430,7 +607,65 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
// Load stats on page load
|
||||
// ===== Toast & Modal System =====
|
||||
function showToast(type, title, message, duration = 5000) {
|
||||
const container = document.getElementById('toastContainer');
|
||||
const icons = { success: '✅', error: '❌', warning: '⚠️', info: 'ℹ️' };
|
||||
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `toast ${type}`;
|
||||
toast.innerHTML = `
|
||||
<div class="toast-icon">${icons[type] || 'ℹ️'}</div>
|
||||
<div class="toast-content">
|
||||
<div class="toast-title">${title}</div>
|
||||
<div class="toast-message">${message}</div>
|
||||
</div>
|
||||
<button class="toast-close" onclick="this.parentElement.remove()">×</button>
|
||||
`;
|
||||
|
||||
container.appendChild(toast);
|
||||
|
||||
if (duration > 0) {
|
||||
setTimeout(() => {
|
||||
toast.style.animation = 'slideOut 0.3s ease-out forwards';
|
||||
setTimeout(() => toast.remove(), 300);
|
||||
}, duration);
|
||||
}
|
||||
}
|
||||
|
||||
function showConfirm(title, message, icon = '❓') {
|
||||
return new Promise((resolve) => {
|
||||
const overlay = document.createElement('div');
|
||||
overlay.className = 'modal-overlay';
|
||||
overlay.innerHTML = `
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<div class="modal-icon">${icon}</div>
|
||||
<div class="modal-title">${title}</div>
|
||||
</div>
|
||||
<div class="modal-body">${message}</div>
|
||||
<div class="modal-footer">
|
||||
<button class="modal-btn modal-btn-secondary" data-action="cancel">Anuluj</button>
|
||||
<button class="modal-btn modal-btn-primary" data-action="confirm">Potwierdź</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(overlay);
|
||||
|
||||
overlay.addEventListener('click', (e) => {
|
||||
if (e.target === overlay || e.target.dataset.action === 'cancel') {
|
||||
overlay.remove();
|
||||
resolve(false);
|
||||
} else if (e.target.dataset.action === 'confirm') {
|
||||
overlay.remove();
|
||||
resolve(true);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ===== Page Load =====
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadStats();
|
||||
});
|
||||
@ -539,7 +774,8 @@ function updatePipelineStatus(data) {
|
||||
}
|
||||
|
||||
async function runExtraction() {
|
||||
if (!confirm('Uruchomić ekstrakcję wiedzy z artykułów?')) return;
|
||||
const confirmed = await showConfirm('Ekstrakcja wiedzy', 'Uruchomić ekstrakcję wiedzy z artykułów?', '🔄');
|
||||
if (!confirmed) return;
|
||||
|
||||
try {
|
||||
const response = await fetch('/admin/zopk/knowledge/extract', {
|
||||
@ -552,15 +788,20 @@ async function runExtraction() {
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
alert(data.message || data.error);
|
||||
if (data.success !== false) {
|
||||
showToast('success', 'Ekstrakcja zakończona', data.message || 'Przetworzono artykuły');
|
||||
} else {
|
||||
showToast('error', 'Błąd ekstrakcji', data.error || 'Nieznany błąd');
|
||||
}
|
||||
loadStats();
|
||||
} catch (error) {
|
||||
alert('Błąd: ' + error.message);
|
||||
showToast('error', 'Błąd połączenia', error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function generateEmbeddings() {
|
||||
if (!confirm('Wygenerować embeddingi dla chunków?')) return;
|
||||
const confirmed = await showConfirm('Generowanie embeddingów', 'Wygenerować embeddingi dla chunków bez wektorów?', '🧲');
|
||||
if (!confirmed) return;
|
||||
|
||||
try {
|
||||
const response = await fetch('/admin/zopk/knowledge/embeddings', {
|
||||
@ -573,15 +814,20 @@ async function generateEmbeddings() {
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
alert(data.message || data.error);
|
||||
if (data.success !== false) {
|
||||
showToast('success', 'Embeddingi wygenerowane', data.message || 'Operacja zakończona');
|
||||
} else {
|
||||
showToast('error', 'Błąd generowania', data.error || 'Nieznany błąd');
|
||||
}
|
||||
loadStats();
|
||||
} catch (error) {
|
||||
alert('Błąd: ' + error.message);
|
||||
showToast('error', 'Błąd połączenia', error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function autoVerifyEntities() {
|
||||
if (!confirm('Auto-weryfikować encje z ≥5 wzmiankami?')) return;
|
||||
const confirmed = await showConfirm('Auto-weryfikacja encji', 'Zweryfikować automatycznie encje z minimum 5 wzmiankami?', '✅');
|
||||
if (!confirmed) return;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/zopk/knowledge/auto-verify/entities', {
|
||||
@ -595,19 +841,20 @@ async function autoVerifyEntities() {
|
||||
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
alert(`✅ Zweryfikowano ${data.verified_count} encji`);
|
||||
showToast('success', 'Encje zweryfikowane', `Zweryfikowano ${data.verified_count} encji z ≥5 wzmiankami`);
|
||||
loadStats();
|
||||
loadVerificationStats();
|
||||
} else {
|
||||
alert('Błąd: ' + data.error);
|
||||
showToast('error', 'Błąd weryfikacji', data.error);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Błąd: ' + error.message);
|
||||
showToast('error', 'Błąd połączenia', error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function autoVerifyFacts() {
|
||||
if (!confirm('Auto-weryfikować fakty z ważnością ≥70%?')) return;
|
||||
const confirmed = await showConfirm('Auto-weryfikacja faktów', 'Zweryfikować automatycznie fakty z pewnością ≥70%?', '📌');
|
||||
if (!confirmed) return;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/zopk/knowledge/auto-verify/facts', {
|
||||
@ -621,19 +868,24 @@ async function autoVerifyFacts() {
|
||||
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
alert(`✅ Zweryfikowano ${data.verified_count} faktów`);
|
||||
showToast('success', 'Fakty zweryfikowane', `Zweryfikowano ${data.verified_count} faktów z pewnością ≥70%`);
|
||||
loadStats();
|
||||
loadVerificationStats();
|
||||
} else {
|
||||
alert('Błąd: ' + data.error);
|
||||
showToast('error', 'Błąd weryfikacji', data.error);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Błąd: ' + error.message);
|
||||
showToast('error', 'Błąd połączenia', error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function learnFromVerified() {
|
||||
if (!confirm('Szukać faktów podobnych do już zweryfikowanych (≥80% podobieństwa)?')) return;
|
||||
const confirmed = await showConfirm(
|
||||
'Uczenie z weryfikacji',
|
||||
'Szukać faktów podobnych do już zweryfikowanych?<br><br>System znajdzie fakty z ≥80% podobieństwem tekstowym do zweryfikowanych wzorców i automatycznie je zweryfikuje.',
|
||||
'🧠'
|
||||
);
|
||||
if (!confirmed) return;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/zopk/knowledge/auto-verify/similar', {
|
||||
@ -648,17 +900,19 @@ async function learnFromVerified() {
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
if (data.verified_count > 0) {
|
||||
alert(`🧠 Uczenie zakończone!\n\n✅ Zweryfikowano ${data.verified_count} nowych faktów\n📚 Na podstawie ${data.learned_from} zweryfikowanych wzorców`);
|
||||
showToast('success', 'Uczenie zakończone!',
|
||||
`Zweryfikowano ${data.verified_count} nowych faktów na podstawie ${data.learned_from} wzorców`, 8000);
|
||||
} else {
|
||||
alert(`🧠 Nie znaleziono nowych faktów do weryfikacji.\n\nMożliwe przyczyny:\n• Brak zweryfikowanych faktów (potrzebne wzorce)\n• Brak podobnych niezweryfikowanych faktów\n• Wszystkie podobne już zweryfikowane`);
|
||||
showToast('warning', 'Brak nowych faktów',
|
||||
'Nie znaleziono podobnych faktów do weryfikacji. Zweryfikuj więcej faktów ręcznie aby stworzyć wzorce.', 8000);
|
||||
}
|
||||
loadStats();
|
||||
loadVerificationStats();
|
||||
} else {
|
||||
alert('Błąd: ' + data.error);
|
||||
showToast('error', 'Błąd uczenia', data.error);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Błąd: ' + error.message);
|
||||
showToast('error', 'Błąd połączenia', error.message);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2082,7 +2082,7 @@ def find_similar_to_verified_facts(
|
||||
|
||||
Returns list of suggestions with similarity scores.
|
||||
"""
|
||||
from sqlalchemy import text
|
||||
from sqlalchemy import text, func
|
||||
|
||||
# Check if we have any verified facts to learn from
|
||||
verified_count = db_session.query(func.count(ZOPKKnowledgeFact.id)).filter(
|
||||
@ -2148,7 +2148,7 @@ def auto_verify_similar_to_verified(
|
||||
Returns:
|
||||
Dict with success status and count of verified facts
|
||||
"""
|
||||
from sqlalchemy import text
|
||||
from sqlalchemy import text, func
|
||||
|
||||
# Check if we have any verified facts to learn from
|
||||
verified_count = db_session.query(func.count(ZOPKKnowledgeFact.id)).filter(
|
||||
|
||||
Loading…
Reference in New Issue
Block a user