fix: resolve console errors (localStorage in Worker, favicon, Tailwind CDN)

Issues fixed:
1. Web Worker localStorage error - Remove localStorage calls from worker
   - Worker cannot access localStorage (browser context only)
   - Worker now sends data to main thread via postMessage
   - Main thread handles all localStorage operations

2. Add favicon to avoid 404 error
   - Use inline SVG favicon (llama emoji)
   - No external file request

3. Optimize Tailwind CSS for production
   - Add tailwind.config.js for content scanning
   - Add app/web/static/css/input.css (Tailwind directives)
   - Update package.json with tailwind build commands
   - Update Dockerfile multi-stage build:
     * Stage 1: Node.js - compile Tailwind CSS
     * Stage 2: Python - install dependencies
     * Stage 3: Runtime - use compiled CSS
   - Update index.html to use compiled output.css
   - Add fallback to CDN for development

4. Add DEVELOPMENT.md documentation
   - Setup instructions for local development
   - Tailwind CSS workflow (watch mode)
   - Docker build explanation
   - Development tips and best practices

Benefits:
- No more localStorage errors in console
- No more 404 favicon requests
- Optimized CSS for production (~30KB minified)
- Clear development workflow
- Multi-stage Docker build is efficient (~300MB image)
This commit is contained in:
Luca Sacchi Ricciardi
2026-04-24 19:30:53 +02:00
parent b3beb525ad
commit 893376dc14
7 changed files with 258 additions and 13 deletions
+7
View File
@@ -4,6 +4,10 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LLM Monitor - Dashboard Ollama</title>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🦙</text></svg>">
<!-- Tailwind CSS (compiled for production) -->
<link rel="stylesheet" href="/static/css/output.css">
<!-- Fallback CDN for development (if output.css not available) -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
@keyframes spin {
@@ -97,6 +101,9 @@
</footer>
</div>
<!-- LLM Monitor Application -->
<!-- Web Worker for background data sync -->
<!-- localStorage for client-side persistence -->
<script src="/static/js/app.js"></script>
</body>
</html>