vogto/neonail-database
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve AI import UX and recognition quality

Browse Source 
- AJAX upload with progress bar — browser no longer blocks during upload;
  redirects to status page immediately after file transfer completes
- Improved Ollama prompt: clearly separates manufacturer (brand logo),
  product name (descriptive text) and number (article code) to fix
  misidentification like treating the product name as manufacturer

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Housemann
2026-06-13 17:52:19 +02:00
co-authored by Claude Sonnet 4.6
parent f715bc4552
commit f94f53abbd
3 changed files with 107 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Http/Controllers/NailPolishImportController.php
+7 -1
View File
@@ -40,7 +40,13 @@ class NailPolishImportController extends Controller
ProcessNailPolishImage::dispatch($import->id);
return redirect()->route('nail-polish-imports.show', $import)
$redirectUrl = route('nail-polish-imports.show', $import);
if (request()->ajax()) {
return response()->json(['redirect' => $redirectUrl]);
}
return redirect($redirectUrl)
->with('success', 'Bild hochgeladen! Die KI analysiert es jetzt im Hintergrund.');
}
app/Jobs/ProcessNailPolishImage.php
+10 -6
View File
@@ -34,14 +34,18 @@ class ProcessNailPolishImage implements ShouldQueue
$imageB64 = base64_encode(Storage::disk('public')->get($import->image_path));
$prompt = <<<PROMPT
Analyze this nail polish bottle image carefully.
Extract the following data and respond ONLY with valid JSON, no other text:
You are analyzing a nail polish or nail product bottle/container image.
Extract exactly these three fields and respond ONLY with a valid JSON object, no explanation, no markdown:
{
"name": "the nail polish color name",
"number": "the product number or color code (often printed on bottle or cap)",
"manufacturer": "the brand name printed on the bottle"
"name": "the full product name or color description (e.g. 'Modeling Base Calcium Neutral Pink', 'Ruby Red', 'French White')",
"number": "the product code or article number printed on the label or cap (digits, letters, hyphens only — e.g. '12392-7', '123', 'NP-05')",
"manufacturer": "the brand or company name (the logo/brand printed on the product — e.g. 'NEONAIL', 'OPI', 'essie', 'Catrice')"
}
If a value is not visible or unclear, use null.
Rules:
- manufacturer = the brand/logo name (usually prominent on the label)
- name = the descriptive product/color name (NOT the brand)
- number = numeric or alphanumeric code (NOT the color name)
- If a value is genuinely not visible, use null
PROMPT;
$response = Http::timeout(160)->post("{$ai->ollama_url}/api/generate", [
resources/views/nail-polish-imports/create.blade.php
+90 -33
View File
@@ -13,35 +13,41 @@
<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 id="errorBox" class="alert alert-danger mb-3 d-none"></div>
<div class="mb-4">
<label class="form-label">Foto des Nagellacks</label>
<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 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>
<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
<img id="preview" src="" alt="" style="display:none; max-height:280px; border-radius:10px; max-width:100%;">
</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>
<input type="file" id="image" name="image" accept="image/*" class="d-none">
</div>
{{-- Upload-Progress --}}
<div id="progressWrap" class="d-none mb-3">
<div class="d-flex justify-content-between mb-1" style="font-size:.82rem; color:#6b7280;">
<span>Wird hochgeladen…</span>
<span id="progressPct">0%</span>
</div>
<div class="progress" style="height:6px; border-radius:3px;">
<div id="progressBar" class="progress-bar"
style="width:0%; background:linear-gradient(135deg,#7c3aed,#ec4899); transition:width .2s;"></div>
</div>
</div>
<button id="submitBtn" class="btn btn-primary w-100 btn-lg" onclick="startUpload()" disabled>
<i class="fas fa-magic me-2"></i>KI-Analyse starten
</button>
</div>
</div>
@@ -61,8 +67,9 @@ const dropzone = document.getElementById('dropzone');
const input = document.getElementById('image');
const preview = document.getElementById('preview');
const content = document.getElementById('dropzoneContent');
const submitBtn = document.getElementById('submitBtn');
input.addEventListener('change', e => showPreview(e.target.files[0]));
input.addEventListener('change', e => { if (e.target.files[0]) selectFile(e.target.files[0]); });
dropzone.addEventListener('dragover', e => { e.preventDefault(); dropzone.style.borderColor = '#7c3aed'; });
dropzone.addEventListener('dragleave', () => { dropzone.style.borderColor = '#d1d5db'; });
@@ -70,11 +77,10 @@ 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); }
if (file) { input.files = e.dataTransfer.files; selectFile(file); }
});
function showPreview(file) {
if (!file) return;
function selectFile(file) {
const reader = new FileReader();
reader.onload = e => {
preview.src = e.target.result;
@@ -82,12 +88,63 @@ function showPreview(file) {
content.style.display = 'none';
};
reader.readAsDataURL(file);
submitBtn.disabled = false;
}
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…';
});
function startUpload() {
const file = input.files[0];
if (!file) return;
submitBtn.disabled = true;
submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Wird hochgeladen…';
document.getElementById('progressWrap').classList.remove('d-none');
document.getElementById('errorBox').classList.add('d-none');
const formData = new FormData();
formData.append('image', file);
formData.append('_token', '{{ csrf_token() }}');
const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', e => {
if (e.lengthComputable) {
const pct = Math.round(e.loaded / e.total * 100);
document.getElementById('progressBar').style.width = pct + '%';
document.getElementById('progressPct').textContent = pct + '%';
}
});
xhr.addEventListener('load', () => {
if (xhr.status === 200) {
try {
const data = JSON.parse(xhr.responseText);
if (data.redirect) { window.location.href = data.redirect; return; }
} catch(e) {}
}
showError('Upload fehlgeschlagen (Status ' + xhr.status + '). Bitte erneut versuchen.');
resetBtn();
});
xhr.addEventListener('error', () => {
showError('Netzwerkfehler beim Upload. Bitte erneut versuchen.');
resetBtn();
});
xhr.open('POST', '{{ route('nail-polish-imports.store') }}');
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.send(formData);
}
function showError(msg) {
const box = document.getElementById('errorBox');
box.textContent = msg;
box.classList.remove('d-none');
document.getElementById('progressWrap').classList.add('d-none');
}
function resetBtn() {
submitBtn.disabled = false;
submitBtn.innerHTML = '<i class="fas fa-magic me-2"></i>KI-Analyse starten';
}
</script>
@endsection