Hugging Face's logo

Spaces:
yaswanth8390
/
imagesearch
Runtime error

App Files Community
yaswanth8390 commited on
Commit
b76d405
·
verified ·
1 Parent(s): a0e158e

Upload result.html

Browse files
Files changed (1) hide show
  1. templates/result.html +186 -0
templates/result.html ADDED
@@ -0,0 +1,186 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Training Result</title>
6
+ <style>
7
+ body {
8
+ background: #1e1e2f;
9
+ color: white;
10
+ font-family: Arial, sans-serif;
11
+ padding: 40px;
12
+ }
13
+ .container {
14
+ background: #2e2e42;
15
+ padding: 30px;
16
+ border-radius: 10px;
17
+ max-width: 900px;
18
+ margin: auto;
19
+ }
20
+ h1, h2, h3 {
21
+ color: #00bcd4;
22
+ }
23
+ pre {
24
+ background: #111122;
25
+ padding: 20px;
26
+ border-radius: 10px;
27
+ white-space: pre-wrap;
28
+ overflow-x: auto;
29
+ }
30
+ .download-btn {
31
+ padding: 10px 20px;
32
+ background-color: #00bcd4;
33
+ color: white;
34
+ text-decoration: none;
35
+ border-radius: 6px;
36
+ display: inline-block;
37
+ margin-top: 10px;
38
+ }
39
+ table {
40
+ width: 100%;
41
+ border-collapse: collapse;
42
+ margin-top: 20px;
43
+ }
44
+ th, td {
45
+ padding: 10px;
46
+ border: 1px solid #444;
47
+ text-align: center;
48
+ }
49
+ th {
50
+ background-color: #333;
51
+ }
52
+ input[type="file"], button, input[type="text"] {
53
+ margin-top: 10px;
54
+ }
55
+ .test-section, .search-section {
56
+ margin-top: 40px;
57
+ }
58
+ .result-box {
59
+ margin-top: 15px;
60
+ font-weight: bold;
61
+ color: #00ffcc;
62
+ }
63
+ .search-results {
64
+ display: flex;
65
+ flex-wrap: wrap;
66
+ margin-top: 20px;
67
+ gap: 10px;
68
+ }
69
+ .search-results img {
70
+ width: 150px;
71
+ height: 150px;
72
+ object-fit: cover;
73
+ border-radius: 8px;
74
+ border: 2px solid #00bcd4;
75
+ }
76
+ </style>
77
+ </head>
78
+ <body>
79
+ <div class="container">
80
+ <h1>✅ Model Trained Successfully</h1>
81
+ <p><strong>Training Time:</strong> {{ training_time }} seconds</p>
82
+ <p><strong>Final Accuracy:</strong> {{ accuracy }}%</p>
83
+
84
+ <h3>📦 Download Trained Model</h3>
85
+ <a class="download-btn" href="{{ url_for('download_file', filename=zipname) }}">Download Model + Labels + CSV</a>
86
+
87
+ <h3>📁 Class Labels</h3>
88
+ <ul>
89
+ {% for label, index in label_map.items() %}
90
+ <li><strong>{{ index }}:</strong> {{ label }}</li>
91
+ {% endfor %}
92
+ </ul>
93
+
94
+ <h3>📊 Epoch-wise Accuracy and Loss</h3>
95
+ <table>
96
+ <tr><th>Epoch</th><th>Accuracy</th><th>Loss</th></tr>
97
+ {% for row in history %}
98
+ <tr><td>{{ row.epoch }}</td><td>{{ row.accuracy }}</td><td>{{ row.loss }}</td></tr>
99
+ {% endfor %}
100
+ </table>
101
+
102
+ <h3>🧠 Model Summary</h3>
103
+ <pre>{{ model_summary }}</pre>
104
+
105
+ <!-- Test Section -->
106
+ <div class="test-section">
107
+ <h2>🧪 Test the Model with an Image</h2>
108
+ <form id="testForm" enctype="multipart/form-data">
109
+ <input type="file" name="test_image" required>
110
+ <input type="hidden" name="model_path" value="{{ model_file }}">
111
+ <button type="submit">Predict</button>
112
+ </form>
113
+ <div class="result-box" id="resultBox"></div>
114
+ </div>
115
+
116
+ <div class="chat-search">
117
+ <h3>🛋️ Search Your Trained Images</h3>
118
+ <input type="text" id="chatQuery" placeholder="Type something like 'fridge'">
119
+ <button id="chatSearchBtn">Search</button>
120
+ <div id="chatResults" style="margin-top:20px; display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:10px;"></div>
121
+ </div>
122
+
123
+ <script>
124
+ const sessionId = "{{ session_id }}";
125
+
126
+
127
+ document.getElementById("chatSearchBtn").addEventListener("click", function() {
128
+ const query = document.getElementById("chatQuery").value;
129
+ fetch("/chat_search", {
130
+ method: "POST",
131
+ headers: { "Content-Type": "application/json" },
132
+ body: JSON.stringify({query: query, session_id: sessionId})
133
+ })
134
+ .then(res => res.json())
135
+ .then(data => {
136
+ const container = document.getElementById("chatResults");
137
+ container.innerHTML = "";
138
+ if(data.results && data.results.length > 0){
139
+ data.results.forEach(item => {
140
+ const img = document.createElement("img");
141
+ img.src = item.url;
142
+ img.style.width = "100%";
143
+ img.style.borderRadius = "6px";
144
+ container.appendChild(img);
145
+ });
146
+ } else {
147
+ container.innerHTML = "<p>No products found for you</p>";
148
+ }
149
+ });
150
+ });
151
+ </script>
152
+
153
+ </div>
154
+
155
+
156
+
157
+
158
+ <script>
159
+ // --- Test Image Prediction ---
160
+ document.getElementById("testForm").addEventListener("submit", function(e) {
161
+ e.preventDefault();
162
+ const formData = new FormData(this);
163
+
164
+ fetch("/test_model", {
165
+ method: "POST",
166
+ body: formData
167
+ })
168
+ .then(res => res.json())
169
+ .then(data => {
170
+ const resultBox = document.getElementById("resultBox");
171
+ if (data.error) {
172
+ resultBox.textContent = "❌ Error: " + data.error;
173
+ } else {
174
+ resultBox.innerHTML = `✅ Predicted Class: <strong>${data.label}</strong> <br>Confidence: <strong>${data.confidence}%</strong>`;
175
+ }
176
+ })
177
+ .catch(err => {
178
+ document.getElementById("resultBox").textContent = "❌ Error: " + err;
179
+ });
180
+ });
181
+
182
+ // --- Chat-like Search ---
183
+ // Handled in the separate script block above
184
+ </script>
185
+ </body>
186
+ </html>