Hugging Face's logo

Spaces:
febrianntikaa
/
hullscanai
Running

App Files Community
febrianntikaa commited on
Commit
0923509
·
verified ·
1 Parent(s): fbba7b1

Modern and minimalist web interface design for SHIP HULL PLATE DAMAGE CLASSIFICATION supported by image processing and machine learning, inspired by object detection dashboard layouts.The interface should use a dark theme with soft contrast, rounded corners, and subtle shadows. Use a clean two-column layout: Left panel for input: Image upload area with drag-and-drop or “Click to Upload” functionality. Two buttons: Run Detection (marked in aqua green or blue) and Delete (gray). Right panel displays detection results: Large preview window labeled “Detected Image.” Table or grid displaying detected defects with columns such as Defect Type. Image Properties table displaying Accuracy, Precision, Recall, F1-score. Option to download report (PDF/CSV). Visual style: Color palette: navy blue, steel gray, light blue—conveying a maritime theme. Typography: use a modern sans-serif font such as Poppins or Inter. Include a loading spinner, fade-in animation, and highlighting when hovering for interactivity. The design should be responsive and look good on desktop, tablet, and mobile screens. Ensure the interface conveys precision, innovation, and reliability, appropriate for an AI-powered ship inspection and maintenance platform.

Browse files
Files changed (2) hide show
  1. README.md +9 -5
  2. index.html +160 -19
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Hullscanai
3
- emoji: 📈
4
- colorFrom: indigo
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: HullScanAI ⚓
3
+ colorFrom: pink
4
+ colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,160 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>HullScanAI | Ship Damage Detection</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <script src="https://cdn.tailwindcss.com"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script>
13
+ tailwind.config = {
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ navy: '#0a192f',
18
+ steel: '#4a5568',
19
+ aqua: '#64ffda',
20
+ },
21
+ fontFamily: {
22
+ sans: ['Inter', 'sans-serif'],
23
+ },
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ <style>
29
+ .drag-drop-area {
30
+ border: 2px dashed #64ffda;
31
+ transition: all 0.3s ease;
32
+ }
33
+ .drag-drop-area:hover {
34
+ background-color: rgba(100, 255, 218, 0.05);
35
+ }
36
+ .result-card {
37
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
38
+ transition: transform 0.2s ease;
39
+ }
40
+ .result-card:hover {
41
+ transform: translateY(-2px);
42
+ }
43
+ </style>
44
+ </head>
45
+ <body class="bg-navy text-gray-200 min-h-screen">
46
+ <div class="container mx-auto px-4 py-8">
47
+ <header class="mb-10">
48
+ <h1 class="text-4xl font-bold text-aqua mb-2">HullScanAI<span class="text-white">⚓</span></h1>
49
+ <p class="text-steel">AI-powered ship hull damage detection and classification</p>
50
+ </header>
51
+
52
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
53
+ <!-- Left Panel - Input -->
54
+ <div class="bg-navy rounded-xl p-6 border border-steel">
55
+ <h2 class="text-xl font-semibold mb-4">Upload Hull Image</h2>
56
+
57
+ <div class="drag-drop-area rounded-lg p-8 text-center cursor-pointer mb-6">
58
+ <i data-feather="upload-cloud" class="w-12 h-12 mx-auto text-aqua mb-4"></i>
59
+ <p class="mb-2">Drag & drop your hull image here</p>
60
+ <p class="text-sm text-steel">or</p>
61
+ <button class="mt-4 px-6 py-2 bg-aqua text-navy font-medium rounded-lg hover:bg-opacity-90 transition">
62
+ Click to Browse
63
+ </button>
64
+ <input type="file" class="hidden" accept="image/*">
65
+ </div>
66
+
67
+ <div class="flex space-x-4">
68
+ <button class="flex-1 bg-aqua text-navy py-3 rounded-lg font-medium hover:bg-opacity-90 transition flex items-center justify-center">
69
+ <i data-feather="play" class="mr-2"></i> Run Detection
70
+ </button>
71
+ <button class="flex-1 bg-steel text-white py-3 rounded-lg font-medium hover:bg-opacity-90 transition flex items-center justify-center">
72
+ <i data-feather="trash-2" class="mr-2"></i> Delete
73
+ </button>
74
+ </div>
75
+ </div>
76
+
77
+ <!-- Right Panel - Results -->
78
+ <div class="bg-navy rounded-xl p-6 border border-steel">
79
+ <h2 class="text-xl font-semibold mb-4">Detection Results</h2>
80
+
81
+ <div class="mb-6">
82
+ <div class="bg-steel bg-opacity-20 rounded-lg p-4 mb-2">
83
+ <p class="text-sm text-steel mb-1">Detected Image</p>
84
+ <div class="aspect-video bg-steel bg-opacity-10 rounded flex items-center justify-center">
85
+ <p class="text-steel">Results will appear here</p>
86
+ </div>
87
+ </div>
88
+ </div>
89
+
90
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
91
+ <!-- Defects Table -->
92
+ <div class="result-card bg-steel bg-opacity-20 rounded-lg p-4">
93
+ <h3 class="font-medium mb-3">Detected Defects</h3>
94
+ <div class="overflow-x-auto">
95
+ <table class="w-full text-sm">
96
+ <thead>
97
+ <tr class="text-steel border-b border-steel border-opacity-20">
98
+ <th class="pb-2 text-left">Type</th>
99
+ <th class="pb-2 text-right">Confidence</th>
100
+ </tr>
101
+ </thead>
102
+ <tbody>
103
+ <tr class="border-b border-steel border-opacity-10">
104
+ <td class="py-2">Corrosion</td>
105
+ <td class="py-2 text-right">94%</td>
106
+ </tr>
107
+ <tr class="border-b border-steel border-opacity-10">
108
+ <td class="py-2">Crack</td>
109
+ <td class="py-2 text-right">87%</td>
110
+ </tr>
111
+ </tbody>
112
+ </table>
113
+ </div>
114
+ </div>
115
+
116
+ <!-- Metrics Table -->
117
+ <div class="result-card bg-steel bg-opacity-20 rounded-lg p-4">
118
+ <h3 class="font-medium mb-3">Detection Metrics</h3>
119
+ <div class="space-y-3">
120
+ <div>
121
+ <p class="text-steel text-sm">Accuracy</p>
122
+ <p class="text-aqua">0.96</p>
123
+ </div>
124
+ <div>
125
+ <p class="text-steel text-sm">Precision</p>
126
+ <p class="text-aqua">0.94</p>
127
+ </div>
128
+ <div>
129
+ <p class="text-steel text-sm">Recall</p>
130
+ <p class="text-aqua">0.97</p>
131
+ </div>
132
+ <div>
133
+ <p class="text-steel text-sm">F1-Score</p>
134
+ <p class="text-aqua">0.95</p>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ </div>
139
+
140
+ <button class="mt-6 w-full py-3 border border-aqua text-aqua rounded-lg hover:bg-aqua hover:bg-opacity-10 transition flex items-center justify-center">
141
+ <i data-feather="download" class="mr-2"></i> Download Report (PDF/CSV)
142
+ </button>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <script>
148
+ feather.replace();
149
+
150
+ // Animation for loading state
151
+ document.querySelector('.drag-drop-area').addEventListener('click', function() {
152
+ this.innerHTML = '<div class="flex flex-col items-center justify-center h-full"><div class="animate-spin rounded-full h-12 w-12 border-t-2 border-aqua border-b-2 border-navy mb-4"></div><p>Processing image...</p></div>';
153
+ setTimeout(() => {
154
+ this.innerHTML = '<i data-feather="check-circle" class="w-12 h-12 mx-auto text-aqua mb-4"></i><p class="mb-2">Analysis complete!</p><p class="text-sm text-steel">View results on the right</p>';
155
+ feather.replace();
156
+ }, 3000);
157
+ });
158
+ </script>
159
+ </body>
160
+ </html>