feat: Upgrade NordaGPT to Gemini 2.5 Flash-Lite + add model info modal

- Changed AI model from Gemini 2.0 Flash to Gemini 2.5 Flash-Lite
- Added info button next to model badge in chat header
- Created modal with technical specs and development history timeline
- Benefits: 8x longer responses (65k tokens), 4x daily limit (1000 RPD)
- Model remains FREE (Free Tier)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Maciej Pienczyn 2026-01-14 08:09:04 +01:00
parent c16fe79724
commit c06df1f69a
2 changed files with 390 additions and 2 deletions

2
app.py
View File

@ -225,7 +225,7 @@ login_manager.login_message = 'Zaloguj się, aby uzyskać dostęp do tej strony.
# Initialize Gemini service
try:
gemini_service.init_gemini_service(model='flash-2.0') # Gemini 2.0 Flash (DARMOWY w preview)
gemini_service.init_gemini_service(model='flash-lite') # Gemini 2.5 Flash-Lite (DARMOWY, 1000 RPD)
logger.info("Gemini service initialized successfully")
except Exception as e:
logger.error(f"Failed to initialize Gemini service: {e}")

View File

@ -444,6 +444,269 @@
justify-content: center;
margin-right: var(--spacing-sm);
}
/* ============================================
Model Info Button & Modal
============================================ */
.model-info-btn {
background: rgba(255,255,255,0.2);
border: none;
color: white;
width: 24px;
height: 24px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
margin-left: var(--spacing-xs);
transition: var(--transition);
}
.model-info-btn:hover {
background: rgba(255,255,255,0.4);
transform: scale(1.1);
}
.model-info-modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
z-index: 1000;
padding: var(--spacing-lg);
overflow-y: auto;
animation: fadeIn 0.2s ease;
}
.model-info-modal.active {
display: flex;
align-items: flex-start;
justify-content: center;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.model-info-content {
background: white;
border-radius: var(--radius-lg);
max-width: 600px;
width: 100%;
padding: var(--spacing-xl);
margin-top: 60px;
position: relative;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
animation: slideUp 0.3s ease;
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.model-info-close {
position: absolute;
top: var(--spacing-md);
right: var(--spacing-md);
background: none;
border: none;
font-size: 1.5rem;
color: var(--text-secondary);
cursor: pointer;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.model-info-close:hover {
background: #f3f4f6;
color: var(--text-primary);
}
.model-info-content h2 {
font-size: var(--font-size-xl);
color: var(--text-primary);
margin-bottom: var(--spacing-lg);
padding-right: var(--spacing-xl);
}
.model-info-content h3 {
font-size: var(--font-size-md);
color: var(--text-primary);
margin: var(--spacing-lg) 0 var(--spacing-md);
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.model-current {
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
border: 1px solid #c4b5fd;
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
}
.model-current h3 {
margin-top: 0;
}
.model-badge-large {
display: flex;
align-items: center;
gap: var(--spacing-md);
margin-bottom: var(--spacing-md);
}
.model-name {
background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
color: white;
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius);
font-weight: 600;
font-size: var(--font-size-md);
}
.model-provider {
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
.model-description {
color: var(--text-secondary);
font-size: var(--font-size-sm);
line-height: 1.6;
margin: 0;
}
.specs-table {
width: 100%;
border-collapse: collapse;
}
.specs-table td {
padding: var(--spacing-sm) 0;
border-bottom: 1px solid var(--border);
}
.specs-table td:first-child {
color: var(--text-secondary);
width: 40%;
}
.specs-table td:last-child {
text-align: right;
}
.timeline {
position: relative;
padding-left: var(--spacing-lg);
}
.timeline::before {
content: '';
position: absolute;
left: 6px;
top: 8px;
bottom: 8px;
width: 2px;
background: #e5e7eb;
}
.timeline-item {
position: relative;
padding-bottom: var(--spacing-lg);
}
.timeline-item:last-child {
padding-bottom: 0;
}
.timeline-item::before {
content: '';
position: absolute;
left: calc(-1 * var(--spacing-lg) + 2px);
top: 6px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #d1d5db;
border: 2px solid white;
}
.timeline-item.current::before {
background: #7c3aed;
box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2);
}
.timeline-date {
font-size: var(--font-size-xs);
color: var(--text-secondary);
margin-bottom: var(--spacing-xs);
font-weight: 600;
}
.timeline-content strong {
color: var(--text-primary);
display: block;
margin-bottom: var(--spacing-xs);
}
.timeline-content p {
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin: 0 0 var(--spacing-sm);
line-height: 1.5;
}
.timeline-badge {
display: inline-block;
font-size: var(--font-size-xs);
padding: 2px var(--spacing-sm);
border-radius: var(--radius);
background: #f3f4f6;
color: var(--text-secondary);
}
.timeline-badge.upgrade {
background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
color: white;
}
.timeline-badge.feature {
background: #dbeafe;
color: #1d4ed8;
}
.timeline-badge.launch {
background: #dcfce7;
color: #16a34a;
}
.model-benefits ul {
margin: 0;
padding-left: var(--spacing-lg);
}
.model-benefits li {
padding: var(--spacing-xs) 0;
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
.model-benefits li strong {
color: var(--text-primary);
}
</style>
{% endblock %}
@ -478,10 +741,107 @@
</button>
<span style="font-size: 1.5rem;">🤖</span>
<h1>NordaGPT</h1>
<span class="chat-header-badge">Gemini 2.0</span>
<span class="chat-header-badge">Gemini 2.5</span>
<button class="model-info-btn" onclick="openModelInfoModal()" title="Informacje o modelu AI">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="16" height="16">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</button>
</div>
</header>
<!-- Modal z informacjami o modelu AI i historią rozwoju -->
<div class="model-info-modal" id="modelInfoModal">
<div class="model-info-content">
<button class="model-info-close" onclick="closeModelInfoModal()">&times;</button>
<h2>🤖 NordaGPT - Informacje techniczne</h2>
<div class="model-current">
<h3>Aktualny model AI</h3>
<div class="model-badge-large">
<span class="model-name">Gemini 2.5 Flash-Lite</span>
<span class="model-provider">Google AI</span>
</div>
<p class="model-description">
Najnowszy model Google zoptymalizowany pod kątem szybkości i przepustowości.
Oferuje do 65 000 tokenów w odpowiedzi (8x więcej niż poprzedni model).
</p>
</div>
<div class="model-specs">
<h3>📊 Specyfikacja techniczna</h3>
<table class="specs-table">
<tr>
<td>Kontekst:</td>
<td><strong>1 000 000 tokenów</strong></td>
</tr>
<tr>
<td>Max. odpowiedź:</td>
<td><strong>65 536 tokenów</strong></td>
</tr>
<tr>
<td>Limit dzienny:</td>
<td><strong>1 000 zapytań</strong></td>
</tr>
<tr>
<td>Koszt:</td>
<td><strong>Bezpłatny (Free Tier)</strong></td>
</tr>
</table>
</div>
<div class="model-history">
<h3>📜 Historia rozwoju NordaGPT</h3>
<div class="timeline">
<div class="timeline-item current">
<div class="timeline-date">14.01.2026</div>
<div class="timeline-content">
<strong>Gemini 2.5 Flash-Lite</strong>
<p>Upgrade do najnowszego modelu. 8x dłuższe odpowiedzi, pełny thinking mode, 4x większy limit dzienny.</p>
<span class="timeline-badge upgrade">Aktualna wersja</span>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date">13.01.2026</div>
<div class="timeline-content">
<strong>Historia konwersacji</strong>
<p>Dodano sidebar z historią rozmów - możliwość powrotu do wcześniejszych konwersacji.</p>
<span class="timeline-badge feature">Nowa funkcja</span>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date">Grudzień 2025</div>
<div class="timeline-content">
<strong>Gemini 2.0 Flash</strong>
<p>Pierwszy model AI w NordaGPT. Kontekst 1M tokenów, limit 8192 tokenów na odpowiedź.</p>
<span class="timeline-badge">Poprzednia wersja</span>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date">Listopad 2025</div>
<div class="timeline-content">
<strong>Uruchomienie NordaGPT</strong>
<p>Premiera asystenta AI dla członków Norda Biznes. Integracja z bazą 80 firm.</p>
<span class="timeline-badge launch">Premiera</span>
</div>
</div>
</div>
</div>
<div class="model-benefits">
<h3>✨ Co zyskaliśmy przy ostatniej aktualizacji?</h3>
<ul>
<li><strong>8x dłuższe odpowiedzi</strong> - szczegółowe analizy i rekomendacje</li>
<li><strong>Lepsze rozumowanie</strong> - pełny thinking mode zamiast eksperymentalnego</li>
<li><strong>4x większy limit</strong> - 1000 zapytań/dzień vs 250</li>
<li><strong>Szybsza odpowiedź</strong> - model zoptymalizowany pod kątem szybkości</li>
<li><strong>Nadal bezpłatny</strong> - pełny Free Tier bez ukrytych kosztów</li>
</ul>
</div>
</div>
</div>
<div class="chat-messages" id="chatMessages">
<!-- Empty state - pokazywany gdy brak wiadomości -->
<div class="empty-state" id="emptyState">
@ -542,6 +902,34 @@
let currentConversationId = null;
let conversations = [];
// ============================================
// Model Info Modal Functions
// ============================================
function openModelInfoModal() {
document.getElementById('modelInfoModal').classList.add('active');
document.body.style.overflow = 'hidden';
}
function closeModelInfoModal() {
document.getElementById('modelInfoModal').classList.remove('active');
document.body.style.overflow = '';
}
// Close modal on backdrop click
document.addEventListener('click', function(e) {
const modal = document.getElementById('modelInfoModal');
if (e.target === modal) {
closeModelInfoModal();
}
});
// Close modal on Escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
closeModelInfoModal();
}
});
// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
loadConversations();