diff --git a/api/defects.php b/api/defects.php index eb3c70e..d74ad1e 100644 --- a/api/defects.php +++ b/api/defects.php @@ -39,7 +39,7 @@ $payload = [ 'messages' => [ [ 'role' => 'system', - 'content' => 'You are an expert in vehicle damage assessment. Analyze the provided image and identify all damages. Respond with a JSON object containing a single key "defects". The value of "defects" should be an array of strings, where each string is a description of a single detected defect.' + 'content' => 'You are an expert in vehicle damage assessment. Analyze the provided image to identify the vehicle\'s make, model, and color, and find all damages. Respond with a single JSON object with two top-level keys: "carInfo" and "defects". The "carInfo" key should contain an object with "make", "model", and "color". The "defects" key should contain an array of objects, where each object has two keys: "defect" (a string describing the damage) and "cost" (a number representing the estimated repair cost in EUR).' ], [ 'role' => 'user', @@ -93,7 +93,7 @@ if (isset($result['choices'][0]['message']['content'])) { $defects_json = $result['choices'][0]['message']['content']; $defects_data = json_decode($defects_json, true); - if (json_last_error() === JSON_ERROR_NONE && isset($defects_data['defects'])) { + if (json_last_error() === JSON_ERROR_NONE && (isset($defects_data['defects']) || isset($defects_data['carInfo']))) { echo json_encode($defects_data); } else { // Handle cases where the response is not the expected JSON @@ -104,4 +104,4 @@ if (isset($result['choices'][0]['message']['content'])) { http_response_code(500); echo json_encode(['error' => 'No content received from API.', 'raw_response' => $response]); } -?> \ No newline at end of file +?> diff --git a/assets/pasted-20251029-135800-b50f3ffc.jpg b/assets/pasted-20251029-135800-b50f3ffc.jpg new file mode 100644 index 0000000..50cc4bf --- /dev/null +++ b/assets/pasted-20251029-135800-b50f3ffc.jpg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/index.php b/index.php index 51d74fd..03ca62b 100644 --- a/index.php +++ b/index.php @@ -61,14 +61,20 @@ } main .grid-container { + display: flex; + flex-direction: column; + gap: 2rem; + } + + .top-row { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 992px) { - main .grid-container { - grid-template-columns: 400px 1fr; + .top-row { + grid-template-columns: 1fr 1fr 1fr; } } @@ -239,8 +245,7 @@ } footer { - text-align: center; - padding: 3rem 0; + padding: 2rem 0; font-size: 0.875rem; color: var(--text-secondary); } @@ -255,7 +260,8 @@
-
+
+

Fahrzeugbild hochladen

Foto zur Analyse von Schäden hochladen.

@@ -278,6 +284,21 @@
+ + + +
+

Analyseergebnisse

Erkannte Schäden.

@@ -287,11 +308,12 @@ # Erkannter Schaden + Reparaturkosten - Laden Sie ein Bild hoch, um die Analyse zu sehen. + Laden Sie ein Bild hoch, um die Analyse zu sehen. @@ -301,8 +323,9 @@
@@ -314,14 +337,27 @@ const buttonSpinner = uploadButton.querySelector('.spinner'); const buttonText = uploadButton.querySelector('.button-text'); const resultsBody = document.getElementById('results-body'); + const imagePreviewContainer = document.getElementById('image-preview-container'); + const imagePreview = document.getElementById('image-preview'); + const carInfoContainer = document.getElementById('car-info-container'); + const carInfoDetails = document.getElementById('car-info-details'); const placeholderText = 'Laden Sie ein Bild hoch, um die Analyse zu sehen.'; const errorPlaceholder = (message) => `Fehler: ${message}`; fileInput.addEventListener('change', function() { if (this.files.length > 0) { fileNameDisplay.textContent = `Ausgewählt: ${this.files[0].name}`; + const reader = new FileReader(); + reader.onload = function(e) { + imagePreview.src = e.target.result; + imagePreviewContainer.style.display = 'block'; + } + reader.readAsDataURL(this.files[0]); } else { fileNameDisplay.textContent = ''; + imagePreview.src = ''; + imagePreviewContainer.style.display = 'none'; + carInfoContainer.style.display = 'none'; } }); @@ -357,6 +393,13 @@ setTableEmpty(); } + if (result.carInfo) { + populateCarInfo(result.carInfo); + carInfoContainer.style.display = 'block'; + } else { + carInfoContainer.style.display = 'none'; + } + } catch (error) { console.error('Error during analysis:', error); setTableError(error.message); @@ -377,15 +420,15 @@ } function setTableLoading() { - resultsBody.innerHTML = `Analysiere Bild...`; + resultsBody.innerHTML = `Analysiere Bild...`; } function setTableError(message) { - resultsBody.innerHTML = `${errorPlaceholder(message)}`; + resultsBody.innerHTML = `${errorPlaceholder(message)}`; } function setTableEmpty() { - resultsBody.innerHTML = `Keine Schäden im Bild erkannt.`; + resultsBody.innerHTML = `Keine Schäden im Bild erkannt.`; } function populateTable(defects) { @@ -397,15 +440,27 @@ cellIndex.textContent = index + 1; const cellDefect = document.createElement('td'); - cellDefect.textContent = defect; + cellDefect.textContent = defect.defect; + + const cellCost = document.createElement('td'); + cellCost.textContent = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(defect.cost); row.appendChild(cellIndex); row.appendChild(cellDefect); + row.appendChild(cellCost); resultsBody.appendChild(row); }); } + function populateCarInfo(carInfo) { + carInfoDetails.innerHTML = ` +

Marke: ${carInfo.make}

+

Modell: ${carInfo.model}

+

Farbe: ${carInfo.color}

+ `; + } + \ No newline at end of file