Hugging Face's logo

Spaces:
amn23
/
car-image-classification
Sleeping

App Files Community
Amina commited on
Commit
e122ef4
·
1 Parent(s): 18611fc

Fix

Browse files
Files changed (1) hide show
  1. front/index.html +84 -129
front/index.html CHANGED
@@ -1,139 +1,94 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Car Damage Detector</title>
7
- <style>
8
- body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; text-align: center; margin: 0; background-color: #f0f2f5; }
9
- .container { max-width: 600px; margin: 50px auto; padding: 30px; background-color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-radius: 8px; }
10
- h1 { color: #333; }
11
- #image-preview { display: none; max-width: 100%; height: auto; margin-top: 20px; border-radius: 4px; border: 1px solid #ddd; }
12
- .upload-area { border: 2px dashed #007bff; border-radius: 8px; padding: 40px; margin: 20px 0; cursor: pointer; background-color: #f8f9fa; }
13
- .upload-area p { margin: 0; color: #555; }
14
- .button-group { display: flex; justify-content: center; gap: 10px; margin-top: 15px; }
15
- button { font-size: 1.1em; padding: 12px 25px; cursor: pointer; border: none; border-radius: 5px; transition: background-color 0.3s; }
16
- #check-button { background-color: #007bff; color: white; }
17
- #check-button:hover { background-color: #0056b3; }
18
- #check-button:disabled { background-color: #aaa; cursor: not-allowed; }
19
- #delete-button { background-color: #dc3545; color: white; display: none; }
20
- #delete-button:hover { background-color: #c82333; }
21
- #results { margin-top: 30px; font-size: 1.1em; text-align: left; }
22
- #results ul { list-style-type: none; padding: 0; }
23
- #results li { background-color: #e9ecef; padding: 10px; margin-bottom: 8px; border-radius: 4px; }
24
- #results .confidence { color: #28a745; font-weight: bold; }
25
- </style>
26
- </head>
27
- <body>
28
-
29
- <div class="container">
30
- <h1>🚗 Car Damage Detector</h1>
31
- <p>Upload a photo to automatically check for scratches, dents, or rust.</p>
32
-
33
- <div class="upload-area" id="upload-area">
34
- <p>Click here or drag & drop an image</p>
35
- </div>
36
-
37
- <input type="file" id="image-upload" accept="image/*" hidden>
38
-
39
- <div class="button-group">
40
- <button id="check-button" disabled>Check for Damage</button>
41
- <button id="delete-button">Delete</button>
42
- </div>
43
-
44
- <img id="image-preview" src="" alt="Your uploaded image">
45
-
46
- <div id="results"></div>
47
- </div>
48
-
49
- <script>
50
- // ⚠️ IMPORTANT: REPLACE THIS URL with your actual Hugging Face Space URL!
51
- const API_URL = "https://amn23-car-image-classification.hf.space/detect";
52
-
53
- const uploadArea = document.getElementById('upload-area');
54
- const imageUpload = document.getElementById('image-upload');
55
- const checkButton = document.getElementById('check-button');
56
- const imagePreview = document.getElementById('image-preview');
57
- const resultsDiv = document.getElementById('results');
58
- const deleteButton = document.getElementById('delete-button');
59
- let selectedFile = null;
60
-
61
- uploadArea.addEventListener('click', () => imageUpload.click());
62
- imageUpload.addEventListener('change', handleFileSelect);
63
-
64
- function handleFileSelect(event) {
65
- selectedFile = event.target.files[0];
66
- if (selectedFile) {
67
- imagePreview.src = URL.createObjectURL(selectedFile);
68
- imagePreview.style.display = 'block';
69
- checkButton.disabled = false;
70
- // --- THIS IS THE FIXED LINE ---
71
- deleteButton.style.display = 'inline-block'; // Show delete button
72
- // --- END OF FIX ---
73
- resultsDiv.innerHTML = '';
74
- }
75
- }
76
-
77
- deleteButton.addEventListener('click', () => {
78
- selectedFile = null;
79
- imageUpload.value = '';
80
- imagePreview.src = '';
81
- imagePreview.style.display = 'none';
82
  resultsDiv.innerHTML = '';
83
- checkButton.disabled = true;
84
- deleteButton.style.display = 'none';
85
- });
86
-
87
- checkButton.addEventListener('click', async () => {
88
- if (!selectedFile) {
89
- alert("Please select an image first!");
90
- return;
91
- }
92
-
93
- resultsDiv.innerHTML = "<p>Analyzing, please wait... 🧐</p>";
94
- checkButton.disabled = true;
95
- deleteButton.disabled = true;
96
-
97
- const formData = new FormData();
98
- formData.append('file', selectedFile);
 
 
99
 
100
- try {
101
- const response = await fetch(API_URL, {
102
- method: 'POST',
103
- body: formData,
104
- });
105
 
106
- if (!response.ok) {
107
- throw new Error(`Server error: ${response.statusText}`);
108
- }
109
 
110
- const data = await response.json();
111
- displayResults(data.detections);
 
 
 
112
 
113
- } catch (error) {
114
- resultsDiv.innerHTML = `<p style="color: red;">An error occurred: ${error.message}</p>`;
115
- console.error("Error:", error);
116
- } finally {
117
- checkButton.disabled = false;
118
- deleteButton.disabled = false;
119
  }
120
- });
121
 
122
- function displayResults(detections) {
123
- if (detections.length === 0) {
124
- resultsDiv.innerHTML = "<p>✅ No damage detected!</p>";
125
- return;
126
- }
127
 
128
- let html = "<h3>Detected Issues:</h3><ul>";
129
- detections.forEach(det => {
130
- const confidence = (det.confidence * 100).toFixed(1);
131
- html += `<li><strong>${det.name}</strong> <span class="confidence">(${confidence}%)</span></li>`;
132
- });
133
- html += "</ul>";
134
- resultsDiv.innerHTML = html;
 
 
 
 
 
 
 
 
135
  }
136
- </script>
137
 
138
- </body>
139
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <script>
2
+ // ⚠️ IMPORTANT: Make sure this URL is correct
3
+ const API_URL = "https://your-username-your-spacename.hf.space/detect";
4
+
5
+ const uploadArea = document.getElementById('upload-area');
6
+ const imageUpload = document.getElementById('image-upload');
7
+ const checkButton = document.getElementById('check-button');
8
+ const imagePreview = document.getElementById('image-preview');
9
+ const resultsDiv = document.getElementById('results');
10
+ const deleteButton = document.getElementById('delete-button');
11
+ let selectedFile = null;
12
+
13
+ uploadArea.addEventListener('click', () => imageUpload.click());
14
+ imageUpload.addEventListener('change', handleFileSelect);
15
+
16
+ function handleFileSelect(event) {
17
+ selectedFile = event.target.files[0];
18
+ if (selectedFile) {
19
+ imagePreview.src = URL.createObjectURL(selectedFile);
20
+ imagePreview.style.display = 'block';
21
+ checkButton.disabled = false;
22
+ deleteButton.style.display = 'inline-block';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  resultsDiv.innerHTML = '';
24
+ }
25
+ }
26
+
27
+ deleteButton.addEventListener('click', () => {
28
+ selectedFile = null;
29
+ imageUpload.value = '';
30
+ imagePreview.src = '';
31
+ imagePreview.style.display = 'none';
32
+ resultsDiv.innerHTML = '';
33
+ checkButton.disabled = true;
34
+ deleteButton.style.display = 'none';
35
+ });
36
+
37
+ checkButton.addEventListener('click', async () => {
38
+ if (!selectedFile) {
39
+ alert("Please select an image first!");
40
+ return;
41
+ }
42
 
43
+ resultsDiv.innerHTML = "<p>Analyzing, please wait... 🧐</p>";
44
+ checkButton.disabled = true;
45
+ deleteButton.disabled = true;
 
 
46
 
47
+ const formData = new FormData();
48
+ formData.append('file', selectedFile);
 
49
 
50
+ try {
51
+ const response = await fetch(API_URL, {
52
+ method: 'POST',
53
+ body: formData,
54
+ });
55
 
56
+ if (!response.ok) {
57
+ throw new Error(`Server error: ${response.statusText}`);
 
 
 
 
58
  }
 
59
 
60
+ const data = await response.json();
61
+ displayResults(data.conditions);
 
 
 
62
 
63
+ } catch (error) {
64
+ resultsDiv.innerHTML = `<p style="color: red;">An error occurred: ${error.message}</p>`;
65
+ console.error("Error:", error);
66
+ } finally {
67
+ checkButton.disabled = false;
68
+ deleteButton.disabled = false;
69
+ }
70
+ });
71
+
72
+ // --- UPDATED FUNCTION ---
73
+ // This function now correctly handles your new backend messages
74
+ function displayResults(conditions) {
75
+ if (!conditions || conditions.length === 0) {
76
+ resultsDiv.innerHTML = "<p>❓ Could not determine condition.</p>";
77
+ return;
78
  }
 
79
 
80
+ // Check for the specific "no damage" message
81
+ if (conditions.length === 1 && conditions[0] === 'No damage detected.') {
82
+ resultsDiv.innerHTML = "<p>✅ No damage detected!</p>";
83
+ return;
84
+ }
85
+
86
+ // Display "Broken", "Dirty", etc.
87
+ let html = "<h3>Determined Conditions:</h3><ul>";
88
+ conditions.forEach(condition => {
89
+ html += `<li><strong>${condition}</strong></li>`;
90
+ });
91
+ html += "</ul>";
92
+ resultsDiv.innerHTML = html;
93
+ }
94
+ </script>