Hugging Face's logo

Spaces:
anktechsol
/
portfolio
Running

App Files Community
anktechsol commited on
Commit
fbb7e9e
·
verified ·
1 Parent(s): d0c3994

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +492 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Portfolio
3
- emoji: 🏢
4
- colorFrom: gray
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: portfolio
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,492 @@
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>GenAI & Data Science Portfolio</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .tab-content {
11
+ display: none;
12
+ }
13
+ .tab-content.active {
14
+ display: block;
15
+ animation: fadeIn 0.5s;
16
+ }
17
+ @keyframes fadeIn {
18
+ from { opacity: 0; }
19
+ to { opacity: 1; }
20
+ }
21
+ .model-output {
22
+ min-height: 150px;
23
+ transition: all 0.3s ease;
24
+ }
25
+ .shap-plot {
26
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
27
+ border-radius: 0.5rem;
28
+ }
29
+ #sentiment-meter {
30
+ transition: all 0.5s ease;
31
+ }
32
+ </style>
33
+ </head>
34
+ <body class="bg-gray-50 font-sans">
35
+ <!-- Header -->
36
+ <header class="bg-gradient-to-r from-blue-600 to-indigo-800 text-white shadow-lg">
37
+ <div class="container mx-auto px-4 py-8">
38
+ <div class="flex flex-col md:flex-row items-center">
39
+ <div class="md:w-1/3 mb-6 md:mb-0">
40
+ <img src="https://avatars.githubusercontent.com/u/1869139?s=400&v=4" alt="Profile" class="w-32 h-32 rounded-full border-4 border-white shadow-md mx-auto md:mx-0">
41
+ </div>
42
+ <div class="md:w-2/3 text-center md:text-left">
43
+ <h1 class="text-3xl md:text-4xl font-bold mb-2">GenAI & Data Science Portfolio</h1>
44
+ <p class="text-xl text-blue-100 mb-4">LLM Fine-Tuning | Prompt Engineering | Explainable AI</p>
45
+ <div class="flex flex-wrap justify-center md:justify-start gap-2">
46
+ <span class="bg-blue-500 px-3 py-1 rounded-full text-sm">Hugging Face</span>
47
+ <span class="bg-purple-500 px-3 py-1 rounded-full text-sm">PyTorch</span>
48
+ <span class="bg-green-500 px-3 py-1 rounded-full text-sm">TensorFlow</span>
49
+ <span class="bg-yellow-500 px-3 py-1 rounded-full text-sm">Streamlit</span>
50
+ <span class="bg-red-500 px-3 py-1 rounded-full text-sm">SHAP</span>
51
+ </div>
52
+ </div>
53
+ </div>
54
+ </div>
55
+ </header>
56
+
57
+ <!-- Main Content -->
58
+ <main class="container mx-auto px-4 py-8">
59
+ <!-- Tabs Navigation -->
60
+ <div class="flex overflow-x-auto mb-6 border-b border-gray-200">
61
+ <button class="tab-btn active px-6 py-3 font-medium text-sm border-b-2 border-blue-500 text-blue-600 bg-blue-50" data-tab="llm-playground">
62
+ <i class="fas fa-robot mr-2"></i>LLM Playground
63
+ </button>
64
+ <button class="tab-btn px-6 py-3 font-medium text-sm text-gray-500 hover:text-blue-600" data-tab="prompt-engineering">
65
+ <i class="fas fa-magic mr-2"></i>Prompt Engineering
66
+ </button>
67
+ <button class="tab-btn px-6 py-3 font-medium text-sm text-gray-500 hover:text-blue-600" data-tab="forecasting">
68
+ <i class="fas fa-chart-line mr-2"></i>Trend Forecasting
69
+ </button>
70
+ <button class="tab-btn px-6 py-3 font-medium text-sm text-gray-500 hover:text-blue-600" data-tab="sentiment">
71
+ <i class="fas fa-smile mr-2"></i>Sentiment Analysis
72
+ </button>
73
+ </div>
74
+
75
+ <!-- Tab Contents -->
76
+ <div class="bg-white rounded-lg shadow-md p-6">
77
+ <!-- LLM Playground Tab -->
78
+ <div id="llm-playground" class="tab-content active">
79
+ <h2 class="text-2xl font-bold mb-6 text-gray-800">
80
+ <i class="fas fa-robot text-blue-500 mr-2"></i>LLM Fine-Tuning Playground
81
+ </h2>
82
+
83
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
84
+ <!-- Sidebar Controls -->
85
+ <div class="lg:col-span-1 bg-gray-50 p-4 rounded-lg">
86
+ <h3 class="font-semibold mb-4 text-gray-700">Model Settings</h3>
87
+
88
+ <div class="mb-4">
89
+ <label class="block text-sm font-medium text-gray-700 mb-1">Model</label>
90
+ <select class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
91
+ <option>GPT-2</option>
92
+ <option>T5-small</option>
93
+ <option>DistilBERT</option>
94
+ <option>BERT-base</option>
95
+ </select>
96
+ </div>
97
+
98
+ <div class="mb-4">
99
+ <label class="block text-sm font-medium text-gray-700 mb-1">Task</label>
100
+ <select class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
101
+ <option>Text Classification</option>
102
+ <option>Summarization</option>
103
+ <option>Question Answering</option>
104
+ <option>Text Generation</option>
105
+ </select>
106
+ </div>
107
+
108
+ <div class="mb-4">
109
+ <label class="block text-sm font-medium text-gray-700 mb-1">Temperature</label>
110
+ <input type="range" min="0" max="1" step="0.1" value="0.7" class="w-full">
111
+ <div class="flex justify-between text-xs text-gray-500">
112
+ <span>Precise</span>
113
+ <span>Creative</span>
114
+ </div>
115
+ </div>
116
+
117
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition duration-300">
118
+ <i class="fas fa-play mr-2"></i>Run Model
119
+ </button>
120
+ </div>
121
+
122
+ <!-- Main Content -->
123
+ <div class="lg:col-span-2">
124
+ <div class="mb-6">
125
+ <label class="block text-sm font-medium text-gray-700 mb-2">Input Text</label>
126
+ <textarea class="w-full p-3 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 h-32" placeholder="Enter your text here...">The quick brown fox jumps over the lazy dog. This sentence contains all the letters in the English alphabet.</textarea>
127
+ </div>
128
+
129
+ <div class="mb-6">
130
+ <label class="block text-sm font-medium text-gray-700 mb-2">Model Output</label>
131
+ <div class="model-output bg-gray-50 p-4 rounded-md border border-gray-200">
132
+ <div class="flex items-center mb-2">
133
+ <div class="h-2.5 w-2.5 rounded-full bg-blue-500 mr-2"></div>
134
+ <span class="text-sm font-medium">Text Classification</span>
135
+ </div>
136
+ <p class="text-gray-700">This text is likely an example sentence used for typing practice (probability: 87%).</p>
137
+ </div>
138
+ </div>
139
+
140
+ <div class="bg-blue-50 p-4 rounded-md border border-blue-200">
141
+ <h4 class="font-medium text-blue-800 mb-2">
142
+ <i class="fas fa-info-circle mr-2"></i>Fine-Tuning Details
143
+ </h4>
144
+ <p class="text-sm text-blue-700">This model was fine-tuned on a custom dataset of 10,000 example sentences using PyTorch and Hugging Face Transformers. Achieved 92% accuracy on validation set.</p>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Prompt Engineering Tab -->
151
+ <div id="prompt-engineering" class="tab-content">
152
+ <h2 class="text-2xl font-bold mb-6 text-gray-800">
153
+ <i class="fas fa-magic text-purple-500 mr-2"></i>Prompt Engineering Toolkit
154
+ </h2>
155
+
156
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
157
+ <!-- Sidebar Controls -->
158
+ <div class="lg:col-span-1 bg-gray-50 p-4 rounded-lg">
159
+ <h3 class="font-semibold mb-4 text-gray-700">Prompt Strategy</h3>
160
+
161
+ <div class="space-y-4">
162
+ <div class="flex items-center">
163
+ <input id="zero-shot" name="prompt-strategy" type="radio" class="h-4 w-4 text-purple-600 focus:ring-purple-500" checked>
164
+ <label for="zero-shot" class="ml-3 block text-sm font-medium text-gray-700">Zero-Shot</label>
165
+ </div>
166
+
167
+ <div class="flex items-center">
168
+ <input id="few-shot" name="prompt-strategy" type="radio" class="h-4 w-4 text-purple-600 focus:ring-purple-500">
169
+ <label for="few-shot" class="ml-3 block text-sm font-medium text-gray-700">Few-Shot (3 examples)</label>
170
+ </div>
171
+
172
+ <div class="flex items-center">
173
+ <input id="cot" name="prompt-strategy" type="radio" class="h-4 w-4 text-purple-600 focus:ring-purple-500">
174
+ <label for="cot" class="ml-3 block text-sm font-medium text-gray-700">Chain-of-Thought</label>
175
+ </div>
176
+
177
+ <div class="flex items-center">
178
+ <input id="react" name="prompt-strategy" type="radio" class="h-4 w-4 text-purple-600 focus:ring-purple-500">
179
+ <label for="react" class="ml-3 block text-sm font-medium text-gray-700">ReAct</label>
180
+ </div>
181
+ </div>
182
+
183
+ <div class="mt-6">
184
+ <label class="block text-sm font-medium text-gray-700 mb-1">Model</label>
185
+ <select class="w-full p-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
186
+ <option>GPT-3.5</option>
187
+ <option>GPT-4</option>
188
+ <option>Claude 2</option>
189
+ <option>LLaMA 2</option>
190
+ </select>
191
+ </div>
192
+
193
+ <button class="w-full mt-6 bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-md transition duration-300">
194
+ <i class="fas fa-wand-magic-sparkles mr-2"></i>Generate Prompt
195
+ </button>
196
+ </div>
197
+
198
+ <!-- Main Content -->
199
+ <div class="lg:col-span-2">
200
+ <div class="mb-6">
201
+ <label class="block text-sm font-medium text-gray-700 mb-2">Task Description</label>
202
+ <input type="text" class="w-full p-3 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500" value="Determine if this product review is positive or negative">
203
+ </div>
204
+
205
+ <div class="mb-6">
206
+ <label class="block text-sm font-medium text-gray-700 mb-2">Generated Prompt</label>
207
+ <div class="model-output bg-gray-50 p-4 rounded-md border border-gray-200">
208
+ <p class="text-gray-700 font-mono text-sm">Classify the following product review as either "positive" or "negative":</p>
209
+ <p class="text-gray-700 font-mono text-sm mt-2">"{review_text}"</p>
210
+ <p class="text-gray-700 font-mono text-sm mt-2">Answer:</p>
211
+ </div>
212
+ </div>
213
+
214
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
215
+ <div class="bg-purple-50 p-4 rounded-md border border-purple-200">
216
+ <h4 class="font-medium text-purple-800 mb-2">
217
+ <i class="fas fa-lightbulb mr-2"></i>Strategy Benefits
218
+ </h4>
219
+ <ul class="text-sm text-purple-700 list-disc pl-5">
220
+ <li class="mb-1">No training examples needed</li>
221
+ <li class="mb-1">Fastest to implement</li>
222
+ <li>Works for broad tasks</li>
223
+ </ul>
224
+ </div>
225
+
226
+ <div class="bg-purple-50 p-4 rounded-md border border-purple-200">
227
+ <h4 class="font-medium text-purple-800 mb-2">
228
+ <i class="fas fa-exclamation-triangle mr-2"></i>Limitations
229
+ </h4>
230
+ <ul class="text-sm text-purple-700 list-disc pl-5">
231
+ <li class="mb-1">Lower accuracy on niche tasks</li>
232
+ <li class="mb-1">May require prompt tuning</li>
233
+ <li>Vulnerable to ambiguous tasks</li>
234
+ </ul>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </div>
240
+
241
+ <!-- Trend Forecasting Tab -->
242
+ <div id="forecasting" class="tab-content">
243
+ <h2 class="text-2xl font-bold mb-6 text-gray-800">
244
+ <i class="fas fa-chart-line text-green-500 mr-2"></i>Social Trend Forecasting
245
+ </h2>
246
+
247
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
248
+ <!-- Sidebar Controls -->
249
+ <div class="lg:col-span-1 bg-gray-50 p-4 rounded-lg">
250
+ <h3 class="font-semibold mb-4 text-gray-700">Forecast Settings</h3>
251
+
252
+ <div class="mb-4">
253
+ <label class="block text-sm font-medium text-gray-700 mb-1">Model</label>
254
+ <select class="w-full p-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500">
255
+ <option>Prophet</option>
256
+ <option>ARIMA</option>
257
+ <option>LSTM</option>
258
+ <option>XGBoost</option>
259
+ </select>
260
+ </div>
261
+
262
+ <div class="mb-4">
263
+ <label class="block text-sm font-medium text-gray-700 mb-1">Horizon (days)</label>
264
+ <input type="number" min="1" max="30" value="7" class="w-full p-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500">
265
+ </div>
266
+
267
+ <div class="mb-4">
268
+ <label class="block text-sm font-medium text-gray-700 mb-1">Upload Data</label>
269
+ <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
270
+ <div class="space-y-1 text-center">
271
+ <div class="flex text-sm text-gray-600">
272
+ <label class="relative cursor-pointer bg-white rounded-md font-medium text-green-600 hover:text-green-500 focus-within:outline-none">
273
+ <span>Upload CSV</span>
274
+ <input type="file" class="sr-only">
275
+ </label>
276
+ </div>
277
+ <p class="text-xs text-gray-500">or drag and drop</p>
278
+ </div>
279
+ </div>
280
+ </div>
281
+
282
+ <button class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-md transition duration-300">
283
+ <i class="fas fa-chart-bar mr-2"></i>Generate Forecast
284
+ </button>
285
+ </div>
286
+
287
+ <!-- Main Content -->
288
+ <div class="lg:col-span-2">
289
+ <div class="mb-6">
290
+ <label class="block text-sm font-medium text-gray-700 mb-2">Forecast Visualization</label>
291
+ <div class="bg-white p-4 rounded-md border border-gray-200">
292
+ <div class="shap-plot h-64 flex items-center justify-center">
293
+ <div class="text-center">
294
+ <i class="fas fa-chart-line text-4xl text-gray-300 mb-2"></i>
295
+ <p class="text-gray-500">Forecast visualization will appear here</p>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </div>
300
+
301
+ <div class="mb-6">
302
+ <label class="block text-sm font-medium text-gray-700 mb-2">SHAP Explanation</label>
303
+ <div class="bg-white p-4 rounded-md border border-gray-200">
304
+ <div class="shap-plot h-64 flex items-center justify-center">
305
+ <div class="text-center">
306
+ <i class="fas fa-brain text-4xl text-gray-300 mb-2"></i>
307
+ <p class="text-gray-500">Feature importance analysis will appear here</p>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+
313
+ <div class="bg-green-50 p-4 rounded-md border border-green-200">
314
+ <h4 class="font-medium text-green-800 mb-2">
315
+ <i class="fas fa-project-diagram mr-2"></i>Model Architecture
316
+ </h4>
317
+ <p class="text-sm text-green-700">This forecasting pipeline combines time-series analysis with social media metadata (likes, shares, author credibility) to predict virality. The SHAP explainer highlights which features most influence predictions.</p>
318
+ </div>
319
+ </div>
320
+ </div>
321
+ </div>
322
+
323
+ <!-- Sentiment Analysis Tab -->
324
+ <div id="sentiment" class="tab-content">
325
+ <h2 class="text-2xl font-bold mb-6 text-gray-800">
326
+ <i class="fas fa-smile text-yellow-500 mr-2"></i>Real-Time Sentiment Analysis
327
+ </h2>
328
+
329
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
330
+ <!-- Sidebar Controls -->
331
+ <div class="lg:col-span-1 bg-gray-50 p-4 rounded-lg">
332
+ <h3 class="font-semibold mb-4 text-gray-700">Model Settings</h3>
333
+
334
+ <div class="mb-4">
335
+ <label class="block text-sm font-medium text-gray-700 mb-1">Model</label>
336
+ <select class="w-full p-2 border border-gray-300 rounded-md focus:ring-yellow-500 focus:border-yellow-500">
337
+ <option>DistilBERT (fine-tuned)</option>
338
+ <option>RoBERTa-base</option>
339
+ <option>VADER</option>
340
+ <option>Custom Ensemble</option>
341
+ </select>
342
+ </div>
343
+
344
+ <div class="mb-4">
345
+ <label class="block text-sm font-medium text-gray-700 mb-1">Confidence Threshold</label>
346
+ <input type="range" min="50" max="95" step="5" value="75" class="w-full">
347
+ <div class="flex justify-between text-xs text-gray-500">
348
+ <span>50%</span>
349
+ <span>95%</span>
350
+ </div>
351
+ </div>
352
+
353
+ <div class="mb-4">
354
+ <label class="block text-sm font-medium text-gray-700 mb-1">Output Format</label>
355
+ <select class="w-full p-2 border border-gray-300 rounded-md focus:ring-yellow-500 focus:border-yellow-500">
356
+ <option>Simple (Positive/Neutral/Negative)</option>
357
+ <option>Detailed (0-100 scale)</option>
358
+ <option>Emoji Visualization</option>
359
+ </select>
360
+ </div>
361
+
362
+ <button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white py-2 px-4 rounded-md transition duration-300">
363
+ <i class="fas fa-play mr-2"></i>Analyze Text
364
+ </button>
365
+ </div>
366
+
367
+ <!-- Main Content -->
368
+ <div class="lg:col-span-2">
369
+ <div class="mb-6">
370
+ <label class="block text-sm font-medium text-gray-700 mb-2">Input Text</label>
371
+ <textarea class="w-full p-3 border border-gray-300 rounded-md focus:ring-yellow-500 focus:border-yellow-500 h-32" placeholder="Enter your text here...">I'm absolutely thrilled with this product! It exceeded all my expectations and arrived earlier than promised. The quality is outstanding and worth every penny.</textarea>
372
+ </div>
373
+
374
+ <div class="mb-6">
375
+ <label class="block text-sm font-medium text-gray-700 mb-2">Sentiment Analysis</label>
376
+ <div class="bg-white p-6 rounded-md border border-gray-200">
377
+ <div class="flex items-center justify-between mb-4">
378
+ <div>
379
+ <span class="text-lg font-semibold">Positive</span>
380
+ <span class="ml-2 text-sm text-gray-500">(94% confidence)</span>
381
+ </div>
382
+ <div class="w-24 h-6 bg-gray-200 rounded-full overflow-hidden">
383
+ <div id="sentiment-meter" class="h-full bg-gradient-to-r from-red-500 via-yellow-400 to-green-500" style="width: 94%"></div>
384
+ </div>
385
+ </div>
386
+
387
+ <div class="grid grid-cols-3 gap-2 text-center">
388
+ <div class="bg-red-50 p-2 rounded">
389
+ <span class="block text-xs text-red-600">Negative</span>
390
+ <span class="block text-sm font-medium text-red-800">2%</span>
391
+ </div>
392
+ <div class="bg-yellow-50 p-2 rounded">
393
+ <span class="block text-xs text-yellow-600">Neutral</span>
394
+ <span class="block text-sm font-medium text-yellow-800">4%</span>
395
+ </div>
396
+ <div class="bg-green-50 p-2 rounded">
397
+ <span class="block text-xs text-green-600">Positive</span>
398
+ <span class="block text-sm font-medium text-green-800">94%</span>
399
+ </div>
400
+ </div>
401
+
402
+ <div class="mt-4">
403
+ <h4 class="text-sm font-medium text-gray-700 mb-2">Key Sentiment Drivers</h4>
404
+ <div class="flex flex-wrap gap-2">
405
+ <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">thrilled (+0.42)</span>
406
+ <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">exceeded (+0.38)</span>
407
+ <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">outstanding (+0.35)</span>
408
+ <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">earlier (+0.28)</span>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </div>
413
+
414
+ <div class="bg-yellow-50 p-4 rounded-md border border-yellow-200">
415
+ <h4 class="font-medium text-yellow-800 mb-2">
416
+ <i class="fas fa-cogs mr-2"></i>Model Details
417
+ </h4>
418
+ <p class="text-sm text-yellow-700">This sentiment analyzer was fine-tuned on 50,000 product reviews from multiple domains. Achieves 89% accuracy on held-out test data with F1-score of 0.91 for positive/negative classification.</p>
419
+ </div>
420
+ </div>
421
+ </div>
422
+ </div>
423
+ </div>
424
+ </main>
425
+
426
+ <!-- Footer -->
427
+ <footer class="bg-gray-800 text-white mt-12">
428
+ <div class="container mx-auto px-4 py-8">
429
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
430
+ <div>
431
+ <h3 class="text-lg font-semibold mb-4">About This Portfolio</h3>
432
+ <p class="text-gray-300 text-sm">Showcasing practical applications of Generative AI and Data Science with a focus on explainability and production-ready implementations.</p>
433
+ </div>
434
+ <div>
435
+ <h3 class="text-lg font-semibold mb-4">Technologies Used</h3>
436
+ <ul class="text-gray-300 text-sm space-y-2">
437
+ <li><i class="fas fa-check-circle text-blue-400 mr-2"></i>Hugging Face Transformers</li>
438
+ <li><i class="fas fa-check-circle text-blue-400 mr-2"></i>PyTorch & TensorFlow</li>
439
+ <li><i class="fas fa-check-circle text-blue-400 mr-2"></i>SHAP & LIME</li>
440
+ <li><i class="fas fa-check-circle text-blue-400 mr-2"></i>Streamlit & Plotly</li>
441
+ </ul>
442
+ </div>
443
+ <div>
444
+ <h3 class="text-lg font-semibold mb-4">Contact</h3>
445
+ <p class="text-gray-300 text-sm mb-2"><i class="fas fa-envelope mr-2"></i>data.scientist@example.com</p>
446
+ <p class="text-gray-300 text-sm mb-4"><i class="fas fa-link mr-2"></i>linkedin.com/in/datascientist</p>
447
+ <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition duration-300">
448
+ <i class="fas fa-paper-plane mr-2"></i>Get in Touch
449
+ </button>
450
+ </div>
451
+ </div>
452
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">
453
+ <p>© 2023 GenAI & Data Science Portfolio. All demos use placeholder models or public APIs.</p>
454
+ </div>
455
+ </div>
456
+ </footer>
457
+
458
+ <script>
459
+ // Tab switching functionality
460
+ document.addEventListener('DOMContentLoaded', function() {
461
+ const tabButtons = document.querySelectorAll('.tab-btn');
462
+ const tabContents = document.querySelectorAll('.tab-content');
463
+
464
+ tabButtons.forEach(button => {
465
+ button.addEventListener('click', function() {
466
+ const tabId = this.getAttribute('data-tab');
467
+
468
+ // Remove active class from all buttons and contents
469
+ tabButtons.forEach(btn => btn.classList.remove('active', 'border-blue-500', 'text-blue-600', 'bg-blue-50'));
470
+ tabContents.forEach(content => content.classList.remove('active'));
471
+
472
+ // Add active class to clicked button and corresponding content
473
+ this.classList.add('active', 'border-blue-500', 'text-blue-600', 'bg-blue-50');
474
+ document.getElementById(tabId).classList.add('active');
475
+ });
476
+ });
477
+
478
+ // Simulate sentiment meter animation
479
+ const sentimentInput = document.querySelector('textarea');
480
+ sentimentInput.addEventListener('input', function() {
481
+ const text = this.value.toLowerCase();
482
+ let sentiment = 50; // neutral
483
+
484
+ if (text.includes('thrilled') || text.includes('exceeded') || text.includes('outstanding')) {
485
+ sentiment = 90 + Math.random() * 10;
486
+ } else if (text.includes('disappointed') || text.includes('terrible') || text.includes('awful')) {
487
+ sentiment = 10 + Math.random() * 10;
488
+ } else if (text.length > 20) {
489
+ // Simple heuristic based on text length
490
+ sentiment = 50 + (text.length % 40);
491
+
492
+ </html>
prompts.txt ADDED
File without changes