singhkunal1908 commited on
Commit
709152d
·
verified ·
1 Parent(s): 2bc1a14

develop an advanced AI-powered **Corrosion Bot** designed to assist engineers, scientists, and maintenance professionals in analyzing corrosion data and providing actionable insights. The bot should have a user-friendly chat interface inspired by Google’s Gemini chat, enabling natural, contextual conversations. Additionally, it must support uploading various types of data files related to corrosion testing and analysis, automatically extracting and interpreting the results to provide clear, precise information.

Browse files

### Key Features and Requirements:

1. **Conversational AI Interface (Gemini-like Chat):**

* The bot should support natural language conversations, understanding complex queries about corrosion mechanisms, material properties, and analysis results.
* It should maintain context across multiple turns in the conversation, allowing users to ask follow-up questions or clarify previous points.
* Responses should be clear, technically accurate, and tailored to different user expertise levels (e.g., beginner, intermediate, expert).

2. **Multi-format File Upload and Analysis:**

* Users can upload any type of file containing corrosion test data, such as:

* CSV, Excel spreadsheets with corrosion rate measurements
* PDFs of lab reports or inspection summaries
* Images (e.g., microscopy photos, corrosion maps)
* JSON or XML data exports from corrosion monitoring equipment
* The bot should automatically extract and analyze relevant data from these files, identifying corrosion rates, pit depths, material degradation trends, or other key parameters.

3. **Automated Data Interpretation and Insights:**

* After data extraction, the bot should generate a comprehensive summary, highlighting critical findings like:

* Corrosion severity and trends over time
* Comparison against industry standards or historical benchmarks
* Recommendations for inspection frequency, material replacement, or protective measures
* Provide visualizations where applicable (e.g., corrosion rate graphs, heatmaps).

4. **User Interaction & Feedback:**

* Allow users to ask for explanations on technical terms or corrosion mechanisms.
* Provide citations or links to relevant standards, research papers, or guidelines when requested.
* Enable exporting the conversation and analysis reports as PDFs for documentation purposes.

5. **Security and Privacy:**

* Ensure uploaded files and conversation data are handled securely and confidentially.
* Implement appropriate access controls if integrated into a larger enterprise system.

### Additional Considerations:

* The bot should be deployable as a web application or integrated into existing maintenance management systems.
* It should support multiple languages or technical jargon related to corrosion engineering.
* Optionally, integration with corrosion sensor networks or IoT devices for real-time monitoring could be considered for future updates.

---

**End Goal:**
To create an intelligent corrosion analysis assistant that streamlines data interpretation, facilitates expert-level discussions through a conversational interface, and helps users make informed decisions about corrosion management and mitigation

Files changed (3) hide show
  1. README.md +7 -4
  2. features.html +241 -0
  3. index.html +322 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Rust Whisperer Ai
3
- emoji: 🐠
4
  colorFrom: red
5
- colorTo: indigo
 
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: Rust Whisperer AI 🦾
 
3
  colorFrom: red
4
+ colorTo: yellow
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).
features.html ADDED
@@ -0,0 +1,241 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Features - Rust Whisperer AI</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
12
+ <style>
13
+ .feature-card:hover .feature-icon {
14
+ transform: rotate(5deg) scale(1.1);
15
+ }
16
+ .feature-icon {
17
+ transition: all 0.3s ease;
18
+ }
19
+ </style>
20
+ </head>
21
+ <body class="bg-gray-50 font-sans">
22
+ <div id="vanta-bg" class="fixed inset-0 z-0"></div>
23
+ <div class="relative z-10 min-h-screen flex flex-col">
24
+ <!-- Header -->
25
+ <header class="bg-gradient-to-r from-blue-600 to-blue-800 text-white shadow-lg">
26
+ <div class="container mx-auto px-4 py-6 flex justify-between items-center">
27
+ <div class="flex items-center space-x-3">
28
+ <i data-feather="shield" class="w-8 h-8 text-blue-200"></i>
29
+ <h1 class="text-2xl font-bold">Rust Whisperer AI</h1>
30
+ </div>
31
+ <nav class="hidden md:flex space-x-6">
32
+ <a href="index.html" class="hover:text-blue-200 transition">Home</a>
33
+ <a href="features.html" class="text-blue-200 font-medium">Features</a>
34
+ <a href="#" class="hover:text-blue-200 transition">Documentation</a>
35
+ <a href="#" class="hover:text-blue-200 transition">Contact</a>
36
+ </nav>
37
+ <button class="md:hidden text-white">
38
+ <i data-feather="menu"></i>
39
+ </button>
40
+ </div>
41
+ </header>
42
+
43
+ <!-- Main Content -->
44
+ <main class="flex-grow container mx-auto px-4 py-12">
45
+ <div class="max-w-6xl mx-auto">
46
+ <!-- Hero Section -->
47
+ <section class="text-center mb-16">
48
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">Advanced Corrosion Analysis Features</h2>
49
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
50
+ Discover how Rust Whisperer AI transforms complex corrosion data into actionable insights.
51
+ </p>
52
+ </section>
53
+
54
+ <!-- Features Grid -->
55
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
56
+ <!-- Feature 1 -->
57
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition">
58
+ <div class="feature-icon w-16 h-16 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
59
+ <i data-feather="file-text" class="w-8 h-8 text-blue-600"></i>
60
+ </div>
61
+ <h3 class="text-xl font-semibold mb-3">Smart File Analysis</h3>
62
+ <p class="text-gray-600 mb-4">
63
+ Automatically extract corrosion data from CSV, Excel, PDF, JSON, and image files with industry-leading accuracy.
64
+ </p>
65
+ <ul class="space-y-2 text-sm text-gray-600">
66
+ <li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> CSV/Excel rate measurements</li>
67
+ <li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> PDF inspection reports</li>
68
+ <li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> Microscopy images</li>
69
+ </ul>
70
+ </div>
71
+
72
+ <!-- Feature 2 -->
73
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition">
74
+ <div class="feature-icon w-16 h-16 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
75
+ <i data-feather="trending-up" class="w-8 h-8 text-blue-600"></i>
76
+ </div>
77
+ <h3 class="text-xl font-semibold mb-3">Visual Trend Analysis</h3>
78
+ <p class="text-gray-600 mb-4">
79
+ Generate interactive corrosion rate graphs, pit depth maps, and degradation timelines automatically.
80
+ </p>
81
+ <ul class="space-y-2 text-sm text-gray-600">
82
+ <li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> Time-series charts</li>
83
+ <li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> 3D corrosion maps</li>
84
+ <li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> Custom visualization</li>
85
+ </ul>
86
+ </div>
87
+
88
+ <!-- Feature 3 -->
89
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition">
90
+ <div class="feature-icon w-16 h-16 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
91
+ <i data-feather="alert-circle" class="w-8 h-8 text-blue-600"></i>
92
+ </div>
93
+ <h3 class="text-xl font-semibold mb-3">Risk Assessment</h3>
94
+ <p class="text-gray-600 mb-4">
95
+ Get severity ratings and maintenance recommendations based on industry standards and predictive models.
96
+ </p>
97
+ <ul class="space-y-2 text-sm text-gray-600">
98
+ <li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> ASTM/NACE standards</li>
99
+ <li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> Predictive analytics</li>
100
+ <li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> Mitigation strategies</li>
101
+ </ul>
102
+ </div>
103
+
104
+ <!-- Feature 4 -->
105
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition">
106
+ <div class="feature-icon w-16 h-16 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
107
+ <i data-feather="cpu" class="w-8 h-8 text-blue-600"></i>
108
+ </div>
109
+ <h3 class="text-xl font-semibold mb-3">AI-Powered Insights</h3>
110
+ <p class="text-gray-600 mb-4">
111
+ Our advanced machine learning models identify patterns and predict future corrosion behavior.
112
+ </p>
113
+ <ul class="space-y-2 text-sm text-gray-600">
114
+ <li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> Anomaly detection</li>
115
+ <li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> Predictive modeling</li>
116
+ <li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> Material degradation</li>
117
+ </ul>
118
+ </div>
119
+
120
+ <!-- Feature 5 -->
121
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition">
122
+ <div class="feature-icon w-16 h-16 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
123
+ <i data-feather="book" class="w-8 h-8 text-blue-600"></i>
124
+ </div>
125
+ <h3 class="text-xl font-semibold mb-3">Knowledge Base</h3>
126
+ <p class="text-gray-600 mb-4">
127
+ Access corrosion science references, standards, and case studies right in the chat interface.
128
+ </p>
129
+ <ul class="space-y-2 text-sm text-gray-600">
130
+ <li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> Technical references</li>
131
+ <li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> Industry standards</li>
132
+ <li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> Case studies</li>
133
+ </ul>
134
+ </div>
135
+
136
+ <!-- Feature 6 -->
137
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition">
138
+ <div class="feature-icon w-16 h-16 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
139
+ <i data-feather="download" class="w-8 h-8 text-blue-600"></i>
140
+ </div>
141
+ <h3 class="text-xl font-semibold mb-3">Report Generation</h3>
142
+ <p class="text-gray-600 mb-4">
143
+ Export professional reports with analysis summaries, visualizations, and recommendations.
144
+ </p>
145
+ <ul class="space-y-2 text-sm text-gray-600">
146
+ <li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> PDF reports</li>
147
+ <li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> Custom templates</li>
148
+ <li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-green-500"></i> Shareable links</li>
149
+ </ul>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- CTA Section -->
154
+ <section class="mt-16 bg-gradient-to-r from-blue-600 to-blue-700 rounded-xl p-8 text-white text-center">
155
+ <h3 class="text-2xl font-bold mb-4">Ready to transform your corrosion analysis?</h3>
156
+ <p class="max-w-2xl mx-auto mb-6 text-blue-100">
157
+ Get started with Rust Whisperer AI today and experience intelligent corrosion analysis powered by AI.
158
+ </p>
159
+ <button class="bg-white text-blue-700 hover:bg-blue-50 px-8 py-3 rounded-lg font-semibold transition inline-flex items-center">
160
+ <i data-feather="zap" class="mr-2"></i> Start Free Trial
161
+ </button>
162
+ </section>
163
+ </div>
164
+ </main>
165
+
166
+ <!-- Footer -->
167
+ <footer class="bg-gray-800 text-white py-8">
168
+ <div class="container mx-auto px-4">
169
+ <div class="grid md:grid-cols-4 gap-8">
170
+ <div>
171
+ <h4 class="text-lg font-semibold mb-4">Rust Whisperer AI</h4>
172
+ <p class="text-gray-400">
173
+ Advanced corrosion analysis powered by AI for engineers and maintenance professionals.
174
+ </p>
175
+ </div>
176
+ <div>
177
+ <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
178
+ <ul class="space-y-2">
179
+ <li><a href="index.html" class="text-gray-400 hover:text-white transition">Home</a></li>
180
+ <li><a href="features.html" class="text-gray-400 hover:text-white transition">Features</a></li>
181
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
182
+ </ul>
183
+ </div>
184
+ <div>
185
+ <h4 class="text-lg font-semibold mb-4">Resources</h4>
186
+ <ul class="space-y-2">
187
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
188
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Support</a></li>
189
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Community</a></li>
190
+ </ul>
191
+ </div>
192
+ <div>
193
+ <h4 class="text-lg font-semibold mb-4">Contact</h4>
194
+ <ul class="space-y-2">
195
+ <li class="flex items-center text-gray-400"><i data-feather="mail" class="mr-2 w-4 h-4"></i> support@rustwhisperer.ai</li>
196
+ <li class="flex items-center text-gray-400"><i data-feather="phone" class="mr-2 w-4 h-4"></i> +1 (555) 123-4567</li>
197
+ </ul>
198
+ </div>
199
+ </div>
200
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
201
+ <p>© 2023 Rust Whisperer AI. All rights reserved.</p>
202
+ </div>
203
+ </div>
204
+ </footer>
205
+ </div>
206
+
207
+ <script>
208
+ // Initialize Vanta.js background
209
+ VANTA.NET({
210
+ el: "#vanta-bg",
211
+ mouseControls: true,
212
+ touchControls: true,
213
+ gyroControls: false,
214
+ minHeight: 200.00,
215
+ minWidth: 200.00,
216
+ scale: 1.00,
217
+ scaleMobile: 1.00,
218
+ color: 0x3b82f6,
219
+ backgroundColor: 0xf8fafc,
220
+ points: 12.00,
221
+ maxDistance: 22.00,
222
+ spacing: 18.00
223
+ });
224
+
225
+ // Initialize Feather Icons
226
+ feather.replace();
227
+
228
+ // Animation for feature cards
229
+ document.querySelectorAll('.feature-card').forEach((card, index) => {
230
+ anime({
231
+ targets: card,
232
+ opacity: [0, 1],
233
+ translateY: [20, 0],
234
+ duration: 800,
235
+ delay: index * 100,
236
+ easing: 'easeOutExpo'
237
+ });
238
+ });
239
+ </script>
240
+ </body>
241
+ </html>
index.html CHANGED
@@ -1,19 +1,323 @@
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>Rust Whisperer AI - Corrosion Analysis Assistant</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
13
+ <style>
14
+ .chat-container {
15
+ scrollbar-width: thin;
16
+ scrollbar-color: #3b82f6 #f1f1f1;
17
+ }
18
+ .chat-container::-webkit-scrollbar {
19
+ width: 6px;
20
+ }
21
+ .chat-container::-webkit-scrollbar-track {
22
+ background: #f1f1f1;
23
+ }
24
+ .chat-container::-webkit-scrollbar-thumb {
25
+ background-color: #3b82f6;
26
+ border-radius: 20px;
27
+ }
28
+ .file-upload:hover {
29
+ transform: translateY(-2px);
30
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
31
+ }
32
+ .pulse {
33
+ animation: pulse 2s infinite;
34
+ }
35
+ @keyframes pulse {
36
+ 0% { opacity: 0.6; }
37
+ 50% { opacity: 1; }
38
+ 100% { opacity: 0.6; }
39
+ }
40
+ </style>
41
+ </head>
42
+ <body class="bg-gray-50 font-sans">
43
+ <div id="vanta-bg" class="fixed inset-0 z-0"></div>
44
+ <div class="relative z-10 min-h-screen flex flex-col">
45
+ <!-- Header -->
46
+ <header class="bg-gradient-to-r from-blue-600 to-blue-800 text-white shadow-lg">
47
+ <div class="container mx-auto px-4 py-6 flex justify-between items-center">
48
+ <div class="flex items-center space-x-3">
49
+ <i data-feather="shield" class="w-8 h-8 text-blue-200"></i>
50
+ <h1 class="text-2xl font-bold">Rust Whisperer AI</h1>
51
+ </div>
52
+ <nav class="hidden md:flex space-x-6">
53
+ <a href="#" class="hover:text-blue-200 transition">Home</a>
54
+ <a href="#" class="hover:text-blue-200 transition">Features</a>
55
+ <a href="#" class="hover:text-blue-200 transition">Documentation</a>
56
+ <a href="#" class="hover:text-blue-200 transition">Contact</a>
57
+ </nav>
58
+ <button class="md:hidden text-white">
59
+ <i data-feather="menu"></i>
60
+ </button>
61
+ </div>
62
+ </header>
63
+
64
+ <!-- Main Content -->
65
+ <main class="flex-grow container mx-auto px-4 py-8">
66
+ <div class="max-w-6xl mx-auto">
67
+ <!-- Hero Section -->
68
+ <section class="text-center mb-12">
69
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">AI-Powered Corrosion Analysis</h2>
70
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
71
+ Your intelligent assistant for corrosion data interpretation, material degradation analysis, and maintenance recommendations.
72
+ </p>
73
+ </section>
74
+
75
+ <!-- Chat Interface -->
76
+ <div class="bg-white rounded-xl shadow-xl overflow-hidden">
77
+ <div class="bg-blue-700 text-white px-6 py-4 flex items-center">
78
+ <i data-feather="message-square" class="mr-3"></i>
79
+ <h3 class="text-lg font-semibold">Corrosion Analysis Chat</h3>
80
+ <div class="ml-auto flex space-x-2">
81
+ <button class="p-1 rounded-full hover:bg-blue-600 transition">
82
+ <i data-feather="settings" class="w-4 h-4"></i>
83
+ </button>
84
+ <button class="p-1 rounded-full hover:bg-blue-600 transition">
85
+ <i data-feather="refresh-cw" class="w-4 h-4"></i>
86
+ </button>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Chat Messages -->
91
+ <div class="chat-container h-96 overflow-y-auto p-4 bg-gray-50">
92
+ <!-- Welcome Message -->
93
+ <div class="flex mb-4">
94
+ <div class="flex-shrink-0 mr-3">
95
+ <div class="bg-blue-100 text-blue-800 rounded-full w-10 h-10 flex items-center justify-center">
96
+ <i data-feather="shield" class="w-5 h-5"></i>
97
+ </div>
98
+ </div>
99
+ <div class="bg-white p-4 rounded-lg shadow-sm max-w-3/4">
100
+ <p class="font-medium text-blue-700 mb-1">Rust Whisperer AI</p>
101
+ <p class="text-gray-700">
102
+ Hello! I'm your corrosion analysis assistant. You can ask me questions about corrosion mechanisms, upload test data files, or request material degradation analysis. How can I help you today?
103
+ </p>
104
+ <div class="mt-2 text-xs text-gray-500">Just now</div>
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <!-- Input Area -->
110
+ <div class="border-t border-gray-200 p-4 bg-white">
111
+ <div class="flex items-center space-x-2 mb-2">
112
+ <button class="text-gray-500 hover:text-blue-600 transition">
113
+ <i data-feather="paperclip"></i>
114
+ </button>
115
+ <div class="relative flex-grow">
116
+ <input
117
+ type="text"
118
+ placeholder="Ask about corrosion analysis or upload a file..."
119
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"
120
+ >
121
+ <button class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-blue-600">
122
+ <i data-feather="mic"></i>
123
+ </button>
124
+ </div>
125
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition flex items-center">
126
+ <i data-feather="send" class="mr-2"></i> Send
127
+ </button>
128
+ </div>
129
+
130
+ <!-- File Upload Card -->
131
+ <div class="file-upload mt-4 bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg p-6 text-center transition cursor-pointer hover:border-blue-400">
132
+ <div class="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-3">
133
+ <i data-feather="upload" class="w-8 h-8 text-blue-600"></i>
134
+ </div>
135
+ <h4 class="font-medium text-gray-700 mb-1">Upload Corrosion Data</h4>
136
+ <p class="text-sm text-gray-500 mb-3">CSV, Excel, PDF, JSON, or images</p>
137
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm transition inline-flex items-center">
138
+ <i data-feather="folder" class="mr-2"></i> Select Files
139
+ </button>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </main>
145
+
146
+ <!-- Features Section -->
147
+ <section class="bg-white py-12">
148
+ <div class="container mx-auto px-4">
149
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Advanced Corrosion Analysis Features</h2>
150
+ <div class="grid md:grid-cols-3 gap-8">
151
+ <!-- Feature 1 -->
152
+ <div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition">
153
+ <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-4">
154
+ <i data-feather="file-text" class="text-blue-600"></i>
155
+ </div>
156
+ <h3 class="text-xl font-semibold mb-2">Multi-format Data Analysis</h3>
157
+ <p class="text-gray-600">
158
+ Upload CSV, Excel, PDF, JSON or images for automatic corrosion data extraction and interpretation.
159
+ </p>
160
+ </div>
161
+
162
+ <!-- Feature 2 -->
163
+ <div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition">
164
+ <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-4">
165
+ <i data-feather="trending-up" class="text-blue-600"></i>
166
+ </div>
167
+ <h3 class="text-xl font-semibold mb-2">Trend Visualization</h3>
168
+ <p class="text-gray-600">
169
+ Automatic generation of corrosion rate graphs, pit depth maps, and degradation timelines.
170
+ </p>
171
+ </div>
172
+
173
+ <!-- Feature 3 -->
174
+ <div class="bg-gray-50 p-6 rounded-xl shadow-sm hover:shadow-md transition">
175
+ <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-4">
176
+ <i data-feather="alert-circle" class="text-blue-600"></i>
177
+ </div>
178
+ <h3 class="text-xl font-semibold mb-2">Risk Assessment</h3>
179
+ <p class="text-gray-600">
180
+ Get severity ratings and maintenance recommendations based on industry standards.
181
+ </p>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ </section>
186
+
187
+ <!-- Footer -->
188
+ <footer class="bg-gray-800 text-white py-8">
189
+ <div class="container mx-auto px-4">
190
+ <div class="grid md:grid-cols-4 gap-8">
191
+ <div>
192
+ <h4 class="text-lg font-semibold mb-4">Rust Whisperer AI</h4>
193
+ <p class="text-gray-400">
194
+ Advanced corrosion analysis powered by AI for engineers and maintenance professionals.
195
+ </p>
196
+ </div>
197
+ <div>
198
+ <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
199
+ <ul class="space-y-2">
200
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
201
+ <li><a href="#" class="text-gray-400 hover:text-white transition">API Reference</a></li>
202
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Case Studies</a></li>
203
+ </ul>
204
+ </div>
205
+ <div>
206
+ <h4 class="text-lg font-semibold mb-4">Resources</h4>
207
+ <ul class="space-y-2">
208
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
209
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Support</a></li>
210
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Community</a></li>
211
+ </ul>
212
+ </div>
213
+ <div>
214
+ <h4 class="text-lg font-semibold mb-4">Contact</h4>
215
+ <ul class="space-y-2">
216
+ <li class="flex items-center text-gray-400"><i data-feather="mail" class="mr-2 w-4 h-4"></i> support@rustwhisperer.ai</li>
217
+ <li class="flex items-center text-gray-400"><i data-feather="phone" class="mr-2 w-4 h-4"></i> +1 (555) 123-4567</li>
218
+ </ul>
219
+ </div>
220
+ </div>
221
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
222
+ <p>© 2023 Rust Whisperer AI. All rights reserved.</p>
223
+ </div>
224
+ </div>
225
+ </footer>
226
+ </div>
227
+
228
+ <script>
229
+ // Initialize Vanta.js background
230
+ VANTA.WAVES({
231
+ el: "#vanta-bg",
232
+ mouseControls: true,
233
+ touchControls: true,
234
+ gyroControls: false,
235
+ minHeight: 200.00,
236
+ minWidth: 200.00,
237
+ scale: 1.00,
238
+ scaleMobile: 1.00,
239
+ color: 0x3b82f6,
240
+ shininess: 35.00,
241
+ waveHeight: 15.00,
242
+ waveSpeed: 0.85,
243
+ zoom: 0.75
244
+ });
245
+
246
+ // Initialize Feather Icons
247
+ feather.replace();
248
+
249
+ // Animation for the upload card
250
+ anime({
251
+ targets: '.file-upload',
252
+ scale: [0.98, 1],
253
+ duration: 1500,
254
+ loop: true,
255
+ direction: 'alternate',
256
+ easing: 'easeInOutSine'
257
+ });
258
+
259
+ // Simulate typing indicator
260
+ function showTypingIndicator() {
261
+ const chatContainer = document.querySelector('.chat-container');
262
+ const typingElement = document.createElement('div');
263
+ typingElement.className = 'flex mb-4';
264
+ typingElement.innerHTML = `
265
+ <div class="flex-shrink-0 mr-3">
266
+ <div class="bg-blue-100 text-blue-800 rounded-full w-10 h-10 flex items-center justify-center">
267
+ <i data-feather="shield" class="w-5 h-5"></i>
268
+ </div>
269
+ </div>
270
+ <div class="bg-white p-3 rounded-lg shadow-sm max-w-xs">
271
+ <div class="flex space-x-1">
272
+ <div class="w-2 h-2 bg-gray-400 rounded-full pulse"></div>
273
+ <div class="w-2 h-2 bg-gray-400 rounded-full pulse" style="animation-delay: 0.2s"></div>
274
+ <div class="w-2 h-2 bg-gray-400 rounded-full pulse" style="animation-delay: 0.4s"></div>
275
+ </div>
276
+ </div>
277
+ `;
278
+ chatContainer.appendChild(typingElement);
279
+ chatContainer.scrollTop = chatContainer.scrollHeight;
280
+ return typingElement;
281
+ }
282
+
283
+ // Example of adding a message
284
+ function addMessage(sender, text, isUser = false) {
285
+ const chatContainer = document.querySelector('.chat-container');
286
+ const messageDiv = document.createElement('div');
287
+ messageDiv.className = `flex mb-4 ${isUser ? 'justify-end' : ''}`;
288
+ messageDiv.innerHTML = `
289
+ ${!isUser ? `
290
+ <div class="flex-shrink-0 mr-3">
291
+ <div class="bg-blue-100 text-blue-800 rounded-full w-10 h-10 flex items-center justify-center">
292
+ <i data-feather="shield" class="w-5 h-5"></i>
293
+ </div>
294
+ </div>
295
+ ` : ''}
296
+ <div class="bg-${isUser ? 'blue-600 text-white' : 'white'} p-4 rounded-lg shadow-sm max-w-3/4">
297
+ ${!isUser ? `<p class="font-medium ${isUser ? 'text-white' : 'text-blue-700'} mb-1">${sender}</p>` : ''}
298
+ <p class="${isUser ? 'text-white' : 'text-gray-700'}">${text}</p>
299
+ <div class="mt-2 text-xs ${isUser ? 'text-blue-200' : 'text-gray-500'}">Just now</div>
300
+ </div>
301
+ ${isUser ? `
302
+ <div class="flex-shrink-0 ml-3">
303
+ <div class="bg-gray-200 text-gray-700 rounded-full w-10 h-10 flex items-center justify-center">
304
+ <i data-feather="user" class="w-5 h-5"></i>
305
+ </div>
306
+ </div>
307
+ ` : ''}
308
+ `;
309
+ chatContainer.appendChild(messageDiv);
310
+ chatContainer.scrollTop = chatContainer.scrollHeight;
311
+ feather.replace();
312
+ }
313
+
314
+ // Example interaction
315
+ document.addEventListener('DOMContentLoaded', function() {
316
+ // Simulate a welcome interaction after a delay
317
+ setTimeout(() => {
318
+ addMessage('Rust Whisperer AI', 'I can analyze various corrosion data formats including:<br><br>• CSV/Excel corrosion rate measurements<br>• PDF inspection reports<br>• Microscopy images<br>• JSON/XML from monitoring systems<br><br>Try uploading a file or ask a question about corrosion analysis!');
319
+ }, 1000);
320
+ });
321
+ </script>
322
+ </body>
323
  </html>