Add AI photo import via Ollama Vision

Users can upload a photo of a nail polish bottle; a background queue
job sends it to Ollama (llama3.2-vision at 192.168.30.172:11434),
extracts name, number and manufacturer, then creates the nail polish
and adds it to the user's collection automatically.

- ProcessNailPolishImage job (180s timeout, 2 tries)
- NailPolishImport model + migration (status tracking)
- AiSetting model + migration (Ollama URL + model, admin-configurable)
- NailPolishImportController: upload, status page (auto-refresh every 5s)
- Admin\AiSettingController: configure Ollama connection
- Views: drag-drop upload form, live status page, import history
- Navbar: "Foto importieren" link for all users
- Admin dropdown: "KI-Einstellungen"
- neonail-worker.conf: Supervisor config for the queue worker

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

resources/views/admin/ai/show.blade.php

@@ -0,0 +1,72 @@
+@extends('layouts.app')
+
+@section('title', 'KI-Einstellungen – NeoNail DB')
+
+@section('content')
+
+<div class="page-hero mb-4">
+    <h1><i class="fas fa-robot me-2"></i>KI-Einstellungen</h1>
+    <p>Ollama-Konfiguration für den automatischen Foto-Import</p>
+</div>
+
+<div class="row g-4">
+    <div class="col-lg-7">
+        <div class="card">
+            <div class="card-header"><i class="fas fa-cog me-2"></i>Ollama Verbindung</div>
+            <div class="card-body p-4">
+                <form method="POST" action="{{ route('admin.ai.update') }}">
+                    @csrf
+                    @method('PUT')
+
+                    <div class="mb-3">
+                        <label class="form-label" for="ollama_url">Ollama URL <span class="text-danger">*</span></label>
+                        <input type="url" class="form-control @error('ollama_url') is-invalid @enderror"
+                               id="ollama_url" name="ollama_url"
+                               value="{{ old('ollama_url', $ai->ollama_url) }}"
+                               placeholder="http://192.168.30.172:11434">
+                        @error('ollama_url')
+                            <div class="invalid-feedback">{{ $message }}</div>
+                        @enderror
+                        <div class="form-text">URL des Ollama-Containers/Servers ohne abschließenden Slash.</div>
+                    </div>
+
+                    <div class="mb-4">
+                        <label class="form-label" for="ollama_model">Modell <span class="text-danger">*</span></label>
+                        <input type="text" class="form-control @error('ollama_model') is-invalid @enderror"
+                               id="ollama_model" name="ollama_model"
+                               value="{{ old('ollama_model', $ai->ollama_model) }}"
+                               placeholder="llama3.2-vision">
+                        @error('ollama_model')
+                            <div class="invalid-feedback">{{ $message }}</div>
+                        @enderror
+                        <div class="form-text">Muss ein Vision-fähiges Modell sein (z.B. <code>llama3.2-vision</code>, <code>llava</code>).</div>
+                    </div>
+
+                    <button type="submit" class="btn btn-primary">
+                        <i class="fas fa-save me-2"></i>Speichern
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-lg-5">
+        <div class="card">
+            <div class="card-header"><i class="fas fa-info-circle me-2"></i>Queue Worker</div>
+            <div class="card-body p-3">
+                <p style="font-size:.83rem; color:#374151; margin-bottom:10px;">
+                    Jobs werden über die <strong>Datenbank-Queue</strong> verarbeitet. Auf dem Server muss dauerhaft ein Worker laufen:
+                </p>
+                <code style="display:block; background:#f3f4f6; padding:10px 12px; border-radius:8px; font-size:.78rem; white-space:pre-wrap;">php artisan queue:work \
+  --timeout=180 \
+  --tries=2 \
+  --sleep=3</code>
+                <p style="font-size:.78rem; color:#9ca3af; margin-top:10px; margin-bottom:0;">
+                    Empfohlen: Als Supervisor-Dienst einrichten, damit der Worker nach Crashes neu startet.
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+
+@endsection

resources/views/layouts/app.blade.php

@@ -456,6 +456,12 @@
                                 <i class="fas fa-industry me-1"></i>Hersteller
                             </a>
                         </li>
+                        <li class="nav-item">
+                            <a class="nav-link {{ request()->routeIs('nail-polish-imports.*') ? 'active' : '' }}"
+                               href="{{ route('nail-polish-imports.create') }}">
+                                <i class="fas fa-camera me-1"></i>Foto importieren
+                            </a>
+                        </li>
                         @if(auth()->user()->isAdmin())
                             <li class="nav-item dropdown">
                                 <a class="nav-link dropdown-toggle {{ request()->routeIs('admin.*') || request()->routeIs('nail-polishes.*') ? 'active' : '' }}"
@@ -474,6 +480,8 @@
                                     <li><hr class="dropdown-divider" style="border-color:rgba(255,255,255,0.1);"></li>
                                     <li><a class="dropdown-item" href="{{ route('admin.sso.show') }}">
                                         <i class="fas fa-shield-alt me-2"></i>SSO-Konfiguration</a></li>
+                                    <li><a class="dropdown-item" href="{{ route('admin.ai.show') }}">
+                                        <i class="fas fa-robot me-2"></i>KI-Einstellungen</a></li>
                                 </ul>
                             </li>
                         @endif

resources/views/nail-polish-imports/create.blade.php

@@ -0,0 +1,93 @@
+@extends('layouts.app')
+
+@section('title', 'Foto importieren – NeoNail DB')
+
+@section('content')
+
+<div class="page-hero mb-4">
+    <h1><i class="fas fa-camera me-2"></i>Foto importieren</h1>
+    <p>Lade ein Foto deines Nagellacks hoch – die KI erkennt Name, Nummer und Hersteller automatisch.</p>
+</div>
+
+<div class="row justify-content-center">
+    <div class="col-lg-6">
+        <div class="card">
+            <div class="card-body p-4">
+                <form method="POST" action="{{ route('nail-polish-imports.store') }}" enctype="multipart/form-data" id="importForm">
+                    @csrf
+
+                    <div class="mb-4">
+                        <label class="form-label">Foto des Nagellacks</label>
+
+                        <div id="dropzone"
+                             style="border: 2px dashed #d1d5db; border-radius: 16px; padding: 48px 20px;
+                                    text-align: center; cursor: pointer; transition: all .2s;"
+                             onclick="document.getElementById('image').click()">
+                            <div id="dropzoneContent">
+                                <i class="fas fa-cloud-upload-alt" style="font-size: 2.5rem; color: #9ca3af; margin-bottom: 12px; display: block;"></i>
+                                <p style="color: #6b7280; margin: 0; font-weight: 500;">Foto hierher ziehen oder klicken</p>
+                                <p style="color: #9ca3af; font-size: .8rem; margin: 4px 0 0;">JPG, PNG, WebP – max. 10 MB</p>
+                            </div>
+                            <img id="preview" src="" alt="" style="display:none; max-height:280px; border-radius:10px; max-width:100%;">
+                        </div>
+
+                        <input type="file" id="image" name="image" accept="image/*" class="d-none" required>
+
+                        @error('image')
+                            <div class="text-danger mt-2" style="font-size:.85rem;">{{ $message }}</div>
+                        @enderror
+                    </div>
+
+                    <button type="submit" class="btn btn-primary w-100 btn-lg" id="submitBtn">
+                        <i class="fas fa-magic me-2"></i>KI-Analyse starten
+                    </button>
+                </form>
+            </div>
+        </div>
+
+        <div class="text-center mt-3">
+            <a href="{{ route('nail-polish-imports.index') }}" style="color: rgba(255,255,255,.65); font-size:.85rem;">
+                <i class="fas fa-history me-1"></i>Meine Importe ansehen
+            </a>
+        </div>
+    </div>
+</div>
+
+@endsection
+
+@section('scripts')
+<script>
+const dropzone = document.getElementById('dropzone');
+const input    = document.getElementById('image');
+const preview  = document.getElementById('preview');
+const content  = document.getElementById('dropzoneContent');
+
+input.addEventListener('change', e => showPreview(e.target.files[0]));
+
+dropzone.addEventListener('dragover', e => { e.preventDefault(); dropzone.style.borderColor = '#7c3aed'; });
+dropzone.addEventListener('dragleave', () => { dropzone.style.borderColor = '#d1d5db'; });
+dropzone.addEventListener('drop', e => {
+    e.preventDefault();
+    dropzone.style.borderColor = '#d1d5db';
+    const file = e.dataTransfer.files[0];
+    if (file) { input.files = e.dataTransfer.files; showPreview(file); }
+});
+
+function showPreview(file) {
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = e => {
+        preview.src = e.target.result;
+        preview.style.display = 'block';
+        content.style.display = 'none';
+    };
+    reader.readAsDataURL(file);
+}
+
+document.getElementById('importForm').addEventListener('submit', () => {
+    const btn = document.getElementById('submitBtn');
+    btn.disabled = true;
+    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Wird hochgeladen…';
+});
+</script>
+@endsection

resources/views/nail-polish-imports/index.blade.php

@@ -0,0 +1,83 @@
+@extends('layouts.app')
+
+@section('title', 'Meine Importe – NeoNail DB')
+
+@section('content')
+
+<div class="page-hero d-flex align-items-center justify-content-between flex-wrap gap-3 mb-4">
+    <div>
+        <h1><i class="fas fa-history me-2"></i>Meine Importe</h1>
+        <p>KI-Analysen deiner hochgeladenen Fotos</p>
+    </div>
+    <a href="{{ route('nail-polish-imports.create') }}" class="btn btn-glass">
+        <i class="fas fa-camera me-2"></i>Neues Foto
+    </a>
+</div>
+
+@if($imports->isEmpty())
+    <div class="empty-state">
+        <div class="empty-icon"><i class="fas fa-camera"></i></div>
+        <h4>Noch keine Importe</h4>
+        <p>Lade ein Foto hoch und lass die KI deinen Nagellack erkennen.</p>
+        <a href="{{ route('nail-polish-imports.create') }}" class="btn btn-primary">
+            <i class="fas fa-camera me-2"></i>Jetzt importieren
+        </a>
+    </div>
+@else
+    <div class="card">
+        <div class="card-body p-0">
+            <div class="table-responsive">
+                <table class="table mb-0" style="font-size:.875rem;">
+                    <thead style="background:#f9fafb; border-bottom:1px solid #f3f4f6;">
+                        <tr>
+                            <th style="padding:12px 16px; font-weight:600; color:#374151;">Bild</th>
+                            <th style="padding:12px 16px; font-weight:600; color:#374151;">Ergebnis</th>
+                            <th style="padding:12px 16px; font-weight:600; color:#374151;">Status</th>
+                            <th style="padding:12px 16px; font-weight:600; color:#374151;">Datum</th>
+                            <th style="padding:12px 16px;"></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        @foreach($imports as $import)
+                        <tr style="border-bottom:1px solid #f3f4f6;">
+                            <td style="padding:12px 16px;">
+                                <img src="{{ Storage::url($import->image_path) }}"
+                                     alt=""
+                                     style="width:52px; height:52px; object-fit:cover; border-radius:10px;">
+                            </td>
+                            <td style="padding:12px 16px;">
+                                @if($import->result)
+                                    <div style="font-weight:600; color:#111827;">{{ $import->result['name'] ?? '—' }}</div>
+                                    <div style="color:#9ca3af; font-size:.78rem;">{{ $import->result['manufacturer'] ?? '' }}</div>
+                                @elseif($import->status === 'failed')
+                                    <span style="color:#dc2626; font-size:.8rem;">{{ Str::limit($import->error_message, 60) }}</span>
+                                @else
+                                    <span style="color:#9ca3af;">wird analysiert…</span>
+                                @endif
+                            </td>
+                            <td style="padding:12px 16px;">
+                                <span class="badge bg-{{ $import->statusColor() }}">{{ $import->statusLabel() }}</span>
+                            </td>
+                            <td style="padding:12px 16px; color:#9ca3af;">
+                                {{ $import->created_at->format('d.m.Y H:i') }}
+                            </td>
+                            <td style="padding:12px 16px; text-align:right;">
+                                <a href="{{ route('nail-polish-imports.show', $import) }}"
+                                   class="btn btn-outline-secondary btn-sm">
+                                    <i class="fas fa-eye"></i>
+                                </a>
+                            </td>
+                        </tr>
+                        @endforeach
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <div class="mt-3">
+        {{ $imports->links() }}
+    </div>
+@endif
+
+@endsection

resources/views/nail-polish-imports/show.blade.php

@@ -0,0 +1,115 @@
+@extends('layouts.app')
+
+@section('title', 'Import-Status – NeoNail DB')
+
+@php $pending = $import->isPending(); @endphp
+
+@if($pending)
+<meta http-equiv="refresh" content="5">
+@endif
+
+@section('content')
+
+<div class="page-hero mb-4">
+    <h1><i class="fas fa-magic me-2"></i>KI-Analyse</h1>
+    <p>
+        <span class="badge bg-{{ $import->statusColor() }} fs-6">
+            {{ $import->statusLabel() }}
+        </span>
+    </p>
+</div>
+
+<div class="row g-4 justify-content-center">
+
+    {{-- Bild --}}
+    <div class="col-md-4">
+        <div class="card">
+            <div class="card-body p-3 text-center">
+                <img src="{{ Storage::url($import->image_path) }}"
+                     alt="Importiertes Bild"
+                     style="max-width:100%; border-radius:12px; max-height:320px; object-fit:contain;">
+            </div>
+        </div>
+    </div>
+
+    {{-- Status / Ergebnis --}}
+    <div class="col-md-6">
+        <div class="card">
+            <div class="card-header">
+                @if($pending)
+                    <i class="fas fa-spinner fa-spin me-2"></i>KI analysiert das Bild…
+                @elseif($import->status === 'done')
+                    <i class="fas fa-check-circle text-success me-2"></i>Ergebnis
+                @else
+                    <i class="fas fa-exclamation-circle text-danger me-2"></i>Fehler
+                @endif
+            </div>
+            <div class="card-body p-4">
+
+                @if($pending)
+                    <p style="color:#6b7280;">
+                        Ollama verarbeitet das Bild gerade. Diese Seite aktualisiert sich automatisch alle 5 Sekunden.
+                    </p>
+                    <div class="progress" style="height:6px; border-radius:3px;">
+                        <div class="progress-bar progress-bar-striped progress-bar-animated"
+                             style="width:100%; background: linear-gradient(135deg,#7c3aed,#ec4899);"></div>
+                    </div>
+
+                @elseif($import->status === 'done')
+                    @php $result = $import->result; @endphp
+                    <table class="table table-borderless mb-0">
+                        <tr>
+                            <th style="width:130px; color:#6b7280; font-size:.85rem;">Name</th>
+                            <td style="font-weight:600;">{{ $result['name'] ?? '—' }}</td>
+                        </tr>
+                        <tr>
+                            <th style="color:#6b7280; font-size:.85rem;">Nummer</th>
+                            <td>{{ $result['number'] ?? '—' }}</td>
+                        </tr>
+                        <tr>
+                            <th style="color:#6b7280; font-size:.85rem;">Hersteller</th>
+                            <td>{{ $result['manufacturer'] ?? '—' }}</td>
+                        </tr>
+                        @if($import->nailPolish)
+                        <tr>
+                            <th style="color:#6b7280; font-size:.85rem;">In Sammlung</th>
+                            <td>
+                                <span class="badge" style="background:linear-gradient(135deg,#7c3aed,#ec4899);">
+                                    <i class="fas fa-check me-1"></i>Hinzugefügt
+                                </span>
+                            </td>
+                        </tr>
+                        @endif
+                    </table>
+
+                    @if($import->nailPolish)
+                        <div class="mt-3">
+                            <a href="{{ route('user-nail-polishes.index') }}" class="btn btn-primary btn-sm">
+                                <i class="fas fa-home me-1"></i>Zur Sammlung
+                            </a>
+                        </div>
+                    @endif
+
+                @else
+                    <div class="alert alert-danger mb-3">
+                        <i class="fas fa-exclamation-circle me-2"></i>
+                        {{ $import->error_message ?? 'Unbekannter Fehler' }}
+                    </div>
+                    <a href="{{ route('nail-polish-imports.create') }}" class="btn btn-primary btn-sm">
+                        <i class="fas fa-redo me-1"></i>Nochmal versuchen
+                    </a>
+                @endif
+
+            </div>
+        </div>
+
+        <div class="mt-3">
+            <a href="{{ route('nail-polish-imports.index') }}" style="color:rgba(255,255,255,.65); font-size:.85rem;">
+                <i class="fas fa-arrow-left me-1"></i>Alle Importe
+            </a>
+        </div>
+    </div>
+
+</div>
+
+@endsection