Hugging Face's logo

Spaces:
SyedomarAli
/
wordpress-site
Running

App Files Community
SyedomarAli commited on
Commit
82e272b
·
verified ·
1 Parent(s): 5b80ce2

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +253 -258
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,18 +3,21 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>AI Content Detector + Humanizer | Powered by DeepSeek</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
  .gradient-bg {
11
- background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
12
  }
13
- .text-gradient {
14
- background: linear-gradient(90deg, #6e8efb, #a777e3);
15
- -webkit-background-clip: text;
16
- background-clip: text;
17
- color: transparent;
 
 
 
18
  }
19
  .result-box {
20
  transition: all 0.3s ease;
@@ -26,21 +29,23 @@
26
  .progress-bar {
27
  height: 8px;
28
  border-radius: 4px;
29
- background: linear-gradient(90deg, #6e8efb, #a777e3);
30
  transition: width 0.5s ease;
31
  }
32
- .textarea-container {
33
  position: relative;
 
 
34
  }
35
- .word-count {
36
  position: absolute;
37
- bottom: 10px;
38
- right: 10px;
39
- background: rgba(255, 255, 255, 0.8);
40
- padding: 2px 8px;
41
- border-radius: 10px;
42
- font-size: 12px;
43
- color: #555;
44
  }
45
  .tooltip {
46
  position: relative;
@@ -72,11 +77,11 @@
72
  <div class="gradient-bg py-4 px-6 shadow-lg">
73
  <div class="container mx-auto flex justify-between items-center">
74
  <div class="flex items-center">
75
- <i class="fas fa-robot text-white text-2xl mr-3"></i>
76
- <h1 class="text-white text-2xl font-bold">AI Content Detector <span class="font-normal">+ Humanizer</span></h1>
77
  </div>
78
  <div class="text-white text-sm">
79
- <span class="font-semibold">Powered by</span> <span class="font-bold">DeepSeek</span>
80
  </div>
81
  </div>
82
  </div>
@@ -84,56 +89,71 @@
84
  <div class="container mx-auto px-4 py-8">
85
  <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
86
  <div class="p-6">
87
- <h2 class="text-2xl font-bold text-gray-800 mb-4">Detect AI-generated content and transform it into natural human-like text</h2>
88
- <p class="text-gray-600 mb-6">Paste your text below to analyze its AI probability and humanize it for better engagement.</p>
89
 
90
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
91
- <div class="textarea-container">
92
- <label for="input-text" class="block text-sm font-medium text-gray-700 mb-2">Enter your text to analyze</label>
93
- <textarea id="input-text" rows="12" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition" placeholder="Paste your content here..."></textarea>
94
- <div class="word-count" id="word-count">0 words</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
95
  </div>
96
 
97
  <div>
98
- <div class="result-box bg-gray-50 border border-gray-200 rounded-lg p-6 h-full">
99
  <div class="flex justify-between items-center mb-4">
100
- <h3 class="text-lg font-semibold text-gray-800">Analysis Results</h3>
101
  <span class="text-xs bg-gray-200 px-2 py-1 rounded-full">Powered by DeepSeek</span>
102
  </div>
103
 
104
  <div id="results-placeholder" class="text-center py-10">
105
- <i class="fas fa-search text-gray-300 text-4xl mb-3"></i>
106
- <p class="text-gray-400">Results will appear here after analysis</p>
107
  </div>
108
 
109
  <div id="results-container" class="hidden">
110
- <div class="mb-6">
111
- <div class="flex justify-between items-center mb-2">
112
- <span class="text-sm font-medium text-gray-700">AI Probability</span>
113
- <span id="ai-percentage" class="text-sm font-bold text-purple-600">0%</span>
114
- </div>
115
- <div class="w-full bg-gray-200 rounded-full h-2">
116
- <div id="ai-progress" class="progress-bar h-2 rounded-full" style="width: 0%"></div>
117
- </div>
118
- <p id="ai-verdict" class="text-sm text-gray-500 mt-2"></p>
119
  </div>
120
 
121
- <div class="mb-6">
122
- <h4 class="text-sm font-medium text-gray-700 mb-2">Humanized Version</h4>
123
- <div id="humanized-text" class="bg-white border border-gray-200 rounded-lg p-4 text-gray-700"></div>
124
- <button id="copy-btn" class="mt-3 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition flex items-center">
125
- <i class="fas fa-copy mr-2"></i> Copy Text
 
 
 
 
126
  </button>
127
  </div>
128
 
129
- <div class="bg-blue-50 border-l-4 border-blue-400 p-4">
130
  <div class="flex">
131
  <div class="flex-shrink-0">
132
  <i class="fas fa-lightbulb text-blue-400"></i>
133
  </div>
134
  <div class="ml-3">
135
  <p class="text-sm text-blue-700">
136
- <span class="font-semibold">Tip:</span> The humanizer adds natural variations, idioms, and conversational elements to make text sound more authentic.
137
  </p>
138
  </div>
139
  </div>
@@ -144,11 +164,8 @@
144
  </div>
145
 
146
  <div class="mt-6 flex flex-wrap gap-3">
147
- <button id="analyze-btn" class="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition font-medium flex items-center">
148
- <i class="fas fa-search mr-2"></i> Analyze for AI Content
149
- </button>
150
- <button id="humanize-btn" class="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition font-medium flex items-center">
151
- <i class="fas fa-magic mr-2"></i> Humanize Text
152
  </button>
153
  <button id="clear-btn" class="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition font-medium flex items-center">
154
  <i class="fas fa-trash-alt mr-2"></i> Clear All
@@ -158,7 +175,7 @@
158
  <button class="px-4 py-3 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 transition">
159
  <i class="fas fa-question-circle"></i>
160
  </button>
161
- <span class="tooltip-text">Our AI detector analyzes linguistic patterns, word choice, and sentence structure to determine AI probability. The humanizer adds natural variations to make text sound more authentic.</span>
162
  </div>
163
  </div>
164
  </div>
@@ -166,65 +183,65 @@
166
 
167
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
168
  <div class="result-box bg-white border border-gray-200 rounded-lg p-6 hover:shadow-md transition">
169
- <div class="text-purple-500 mb-3">
170
- <i class="fas fa-shield-alt text-2xl"></i>
171
  </div>
172
- <h3 class="text-lg font-semibold text-gray-800 mb-2">Advanced Detection</h3>
173
- <p class="text-gray-600">Identifies content from GPT-4, Claude, Gemini, and other leading AI models with high accuracy.</p>
174
  </div>
175
 
176
  <div class="result-box bg-white border border-gray-200 rounded-lg p-6 hover:shadow-md transition">
177
  <div class="text-green-500 mb-3">
178
- <i class="fas fa-user-edit text-2xl"></i>
179
  </div>
180
- <h3 class="text-lg font-semibold text-gray-800 mb-2">Human-like Rewriting</h3>
181
- <p class="text-gray-600">Transforms robotic text into natural human writing while preserving the original meaning.</p>
182
  </div>
183
 
184
  <div class="result-box bg-white border border-gray-200 rounded-lg p-6 hover:shadow-md transition">
185
- <div class="text-blue-500 mb-3">
186
- <i class="fas fa-tachometer-alt text-2xl"></i>
187
  </div>
188
- <h3 class="text-lg font-semibold text-gray-800 mb-2">Real-time Analysis</h3>
189
- <p class="text-gray-600">Get instant results with our powerful DeepSeek AI engine processing your text.</p>
190
  </div>
191
  </div>
192
 
193
  <div class="bg-white rounded-xl shadow-lg overflow-hidden">
194
  <div class="p-6">
195
- <h2 class="text-xl font-bold text-gray-800 mb-4">How It Works</h2>
196
 
197
  <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
198
  <div class="flex flex-col items-center text-center p-4">
199
- <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-3">
200
- <i class="fas fa-paste text-purple-600"></i>
201
  </div>
202
- <h3 class="font-medium text-gray-800 mb-1">Paste Text</h3>
203
- <p class="text-sm text-gray-600">Copy and paste your content into the input box</p>
204
  </div>
205
 
206
  <div class="flex flex-col items-center text-center p-4">
207
- <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-3">
208
- <i class="fas fa-search text-blue-600"></i>
209
  </div>
210
- <h3 class="font-medium text-gray-800 mb-1">Analyze</h3>
211
- <p class="text-sm text-gray-600">Click "Analyze" to detect AI probability</p>
212
  </div>
213
 
214
  <div class="flex flex-col items-center text-center p-4">
215
  <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-3">
216
- <i class="fas fa-magic text-green-600"></i>
217
  </div>
218
- <h3 class="font-medium text-gray-800 mb-1">Humanize</h3>
219
- <p class="text-sm text-gray-600">Click "Humanize" to rewrite for authenticity</p>
220
  </div>
221
 
222
  <div class="flex flex-col items-center text-center p-4">
223
  <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mb-3">
224
- <i class="fas fa-clipboard-check text-yellow-600"></i>
225
  </div>
226
- <h3 class="font-medium text-gray-800 mb-1">Use Content</h3>
227
- <p class="text-sm text-gray-600">Copy the humanized version for your needs</p>
228
  </div>
229
  </div>
230
  </div>
@@ -236,8 +253,8 @@
236
  <div class="flex flex-col md:flex-row justify-between items-center">
237
  <div class="mb-4 md:mb-0">
238
  <div class="flex items-center">
239
- <i class="fas fa-robot text-purple-400 text-xl mr-2"></i>
240
- <span class="text-xl font-bold">AI Content Detector <span class="font-normal">+ Humanizer</span></span>
241
  </div>
242
  <p class="text-gray-400 text-sm mt-1">Powered by DeepSeek AI Technology</p>
243
  </div>
@@ -256,230 +273,208 @@
256
  </div>
257
 
258
  <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm">
259
- <p>© 2023 AI Content Detector + Humanizer. All rights reserved.</p>
260
  </div>
261
  </div>
262
  </footer>
263
 
264
  <script>
265
  document.addEventListener('DOMContentLoaded', function() {
266
- const inputText = document.getElementById('input-text');
267
- const wordCount = document.getElementById('word-count');
268
- const analyzeBtn = document.getElementById('analyze-btn');
269
- const humanizeBtn = document.getElementById('humanize-btn');
 
 
 
 
270
  const clearBtn = document.getElementById('clear-btn');
271
- const copyBtn = document.getElementById('copy-btn');
272
  const resultsPlaceholder = document.getElementById('results-placeholder');
273
  const resultsContainer = document.getElementById('results-container');
274
- const aiPercentage = document.getElementById('ai-percentage');
275
- const aiProgress = document.getElementById('ai-progress');
276
- const aiVerdict = document.getElementById('ai-verdict');
277
- const humanizedText = document.getElementById('humanized-text');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
278
 
279
- // Update word count
280
- inputText.addEventListener('input', function() {
281
- const text = inputText.value.trim();
282
- const words = text ? text.split(/\s+/).length : 0;
283
- wordCount.textContent = `${words} words`;
284
  });
285
 
286
- // Analyze button click
287
- analyzeBtn.addEventListener('click', function() {
288
- const text = inputText.value.trim();
289
- if (!text) {
290
- alert('Please enter some text to analyze');
 
291
  return;
292
  }
293
 
294
- // Show loading state
295
- analyzeBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Analyzing...';
296
- analyzeBtn.disabled = true;
 
297
 
298
- // Simulate API call with timeout
299
- setTimeout(function() {
300
- // Calculate random AI probability (for demo)
301
- const aiProbability = Math.min(Math.floor(Math.random() * 100), 95);
302
-
303
- // Update UI
304
- aiPercentage.textContent = `${aiProbability}%`;
305
- aiProgress.style.width = `${aiProbability}%`;
306
-
307
- // Set verdict text
308
- if (aiProbability < 30) {
309
- aiVerdict.textContent = "This text appears to be mostly human-written with minimal AI influence.";
310
- } else if (aiProbability < 70) {
311
- aiVerdict.textContent = "This text shows signs of AI assistance but has some human elements.";
312
- } else {
313
- aiVerdict.textContent = "This text is highly likely to be AI-generated based on our analysis.";
314
- }
315
-
316
- // Show results
317
- resultsPlaceholder.classList.add('hidden');
318
- resultsContainer.classList.remove('hidden');
319
-
320
- // Reset button
321
- analyzeBtn.innerHTML = '<i class="fas fa-search mr-2"></i> Analyze for AI Content';
322
- analyzeBtn.disabled = false;
323
- }, 1500);
324
- });
325
 
326
- // Humanize button click
327
- humanizeBtn.addEventListener('click', function() {
328
- const text = inputText.value.trim();
329
- if (!text) {
330
- alert('Please enter some text to humanize');
331
  return;
332
  }
333
 
334
  // Show loading state
335
- humanizeBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Humanizing...';
336
- humanizeBtn.disabled = true;
337
 
338
- // Simulate API call with timeout
 
339
  setTimeout(function() {
340
- // Create a humanized version (for demo)
341
- const humanized = humanizeText(text);
342
 
343
- // Update UI
344
- humanizedText.textContent = humanized;
345
-
346
- // Show results if not already shown
347
  resultsPlaceholder.classList.add('hidden');
348
  resultsContainer.classList.remove('hidden');
349
 
350
  // Reset button
351
- humanizeBtn.innerHTML = '<i class="fas fa-magic mr-2"></i> Humanize Text';
352
- humanizeBtn.disabled = false;
353
  }, 2000);
354
  });
355
 
356
  // Clear button click
357
  clearBtn.addEventListener('click', function() {
358
- inputText.value = '';
359
- wordCount.textContent = '0 words';
 
 
 
 
360
  resultsPlaceholder.classList.remove('hidden');
361
  resultsContainer.classList.add('hidden');
362
  });
363
 
364
- // Copy button click
365
- copyBtn.addEventListener('click', function() {
366
- const textToCopy = humanizedText.textContent;
367
- if (!textToCopy) return;
368
-
369
- navigator.clipboard.writeText(textToCopy).then(function() {
370
- // Change button temporarily
371
- const originalText = copyBtn.innerHTML;
372
- copyBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Copied!';
373
- copyBtn.classList.remove('bg-purple-600', 'hover:bg-purple-700');
374
- copyBtn.classList.add('bg-green-600', 'hover:bg-green-700');
375
-
376
- setTimeout(function() {
377
- copyBtn.innerHTML = originalText;
378
- copyBtn.classList.remove('bg-green-600', 'hover:bg-green-700');
379
- copyBtn.classList.add('bg-purple-600', 'hover:bg-purple-700');
380
- }, 2000);
381
- });
382
  });
383
 
384
- // Simple text humanizer (for demo purposes)
385
- function humanizeText(text) {
386
- // These are just simple replacements for demonstration
387
- // A real implementation would use more sophisticated NLP techniques
388
- const replacements = {
389
- "utilize": "use",
390
- "in order to": "to",
391
- "due to the fact that": "because",
392
- "at this point in time": "now",
393
- "commence": "start",
394
- "terminate": "end",
395
- "individual": "person",
396
- "facilitate": "help",
397
- "optimal": "best",
398
- "utilization": "use",
399
- "prior to": "before",
400
- "subsequent to": "after",
401
- "in the event that": "if",
402
- "with regard to": "about",
403
- "it is important to note that": "",
404
- "as a matter of fact": "actually",
405
- "in light of the fact that": "since"
406
- };
407
-
408
- // Add some natural variations
409
- const variations = [
410
- "You know,",
411
- "Actually,",
412
- "Well,",
413
- "I mean,",
414
- "Basically,",
415
- "So,",
416
- "Anyway,",
417
- "Like,",
418
- "Right?"
419
- ];
420
 
421
- // Add some filler words occasionally
422
- const fillers = ["uh", "um", "ah", "er", "hmm"];
 
 
423
 
424
- // Process the text
425
- let result = text;
 
 
 
 
 
 
 
 
 
426
 
427
- // Replace formal words
428
- for (const [formal, casual] of Object.entries(replacements)) {
429
- const regex = new RegExp(`\\b${formal}\\b`, 'gi');
430
- result = result.replace(regex, casual);
431
- }
432
 
433
- // Shorten some sentences
434
- result = result.replace(/\. ([A-Z][a-z]+)/g, function(match, p1) {
435
- // 30% chance to add a filler word
436
- if (Math.random() < 0.3) {
437
- return `. ${fillers[Math.floor(Math.random() * fillers.length)]}... ${p1}`;
438
- }
439
- // 20% chance to add a variation
440
- if (Math.random() < 0.2) {
441
- return `. ${variations[Math.floor(Math.random() * variations.length)]} ${p1}`;
 
 
 
 
442
  }
443
- return match;
444
  });
 
445
 
446
- // Add some contractions
447
- result = result.replace(/\bdo not\b/gi, "don't")
448
- .replace(/\bdoes not\b/gi, "doesn't")
449
- .replace(/\bis not\b/gi, "isn't")
450
- .replace(/\bare not\b/gi, "aren't")
451
- .replace(/\bwas not\b/gi, "wasn't")
452
- .replace(/\bwere not\b/gi, "weren't")
453
- .replace(/\bhave not\b/gi, "haven't")
454
- .replace(/\bhas not\b/gi, "hasn't")
455
- .replace(/\bhad not\b/gi, "hadn't")
456
- .replace(/\bwill not\b/gi, "won't")
457
- .replace(/\bwould not\b/gi, "wouldn't")
458
- .replace(/\bcan not\b/gi, "can't")
459
- .replace(/\bcould not\b/gi, "couldn't")
460
- .replace(/\bshould not\b/gi, "shouldn't")
461
- .replace(/\bmust not\b/gi, "mustn't")
462
- .replace(/\bmight not\b/gi, "mightn't")
463
- .replace(/\bcannot\b/gi, "can't")
464
- .replace(/\bI am\b/gi, "I'm")
465
- .replace(/\byou are\b/gi, "you're")
466
- .replace(/\bhe is\b/gi, "he's")
467
- .replace(/\bshe is\b/gi, "she's")
468
- .replace(/\bit is\b/gi, "it's")
469
- .replace(/\bwe are\b/gi, "we're")
470
- .replace(/\bthey are\b/gi, "they're");
471
-
472
- // Add some personality
473
- if (Math.random() < 0.5) {
474
- const sentences = result.split('. ');
475
- if (sentences.length > 1) {
476
- const randomIndex = Math.floor(Math.random() * (sentences.length - 1)) + 1;
477
- sentences[randomIndex] = variations[Math.floor(Math.random() * variations.length)] + " " + sentences[randomIndex];
478
- result = sentences.join('. ');
479
- }
480
- }
481
-
482
- return result;
483
  }
484
  });
485
  </script>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Background Remover | Powered by DeepSeek</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
  .gradient-bg {
11
+ background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
12
  }
13
+ .dropzone {
14
+ border: 2px dashed #0072ff;
15
+ border-radius: 8px;
16
+ transition: all 0.3s ease;
17
+ }
18
+ .dropzone.active {
19
+ border-color: #00c6ff;
20
+ background-color: rgba(0, 198, 255, 0.05);
21
  }
22
  .result-box {
23
  transition: all 0.3s ease;
 
29
  .progress-bar {
30
  height: 8px;
31
  border-radius: 4px;
32
+ background: linear-gradient(90deg, #00c6ff, #0072ff);
33
  transition: width 0.5s ease;
34
  }
35
+ .image-container {
36
  position: relative;
37
+ overflow: hidden;
38
+ border-radius: 8px;
39
  }
40
+ .download-btn {
41
  position: absolute;
42
+ bottom: 15px;
43
+ right: 15px;
44
+ opacity: 0;
45
+ transition: opacity 0.3s ease;
46
+ }
47
+ .image-container:hover .download-btn {
48
+ opacity: 1;
49
  }
50
  .tooltip {
51
  position: relative;
 
77
  <div class="gradient-bg py-4 px-6 shadow-lg">
78
  <div class="container mx-auto flex justify-between items-center">
79
  <div class="flex items-center">
80
+ <i class="fas fa-image text-white text-2xl mr-3"></i>
81
+ <h1 class="text-white text-2xl font-bold">Background Remover</h1>
82
  </div>
83
  <div class="text-white text-sm">
84
+ <span class="font-semibold">Powered by</span> <span class="font-bold">DeepSeek AI</span>
85
  </div>
86
  </div>
87
  </div>
 
89
  <div class="container mx-auto px-4 py-8">
90
  <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
91
  <div class="p-6">
92
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Remove backgrounds from images instantly</h2>
93
+ <p class="text-gray-600 mb-6">Upload your image to automatically remove the background with AI precision.</p>
94
 
95
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
96
+ <div id="dropzone" class="dropzone p-8 text-center cursor-pointer">
97
+ <div id="upload-container">
98
+ <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-4"></i>
99
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Drag & drop your image here</h3>
100
+ <p class="text-gray-500 mb-4">or click to browse files</p>
101
+ <input type="file" id="file-input" class="hidden" accept="image/*">
102
+ <button id="select-file-btn" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition font-medium">
103
+ Select Image
104
+ </button>
105
+ <p class="text-xs text-gray-400 mt-4">Supports JPG, PNG, WEBP up to 10MB</p>
106
+ </div>
107
+ <div id="preview-container" class="hidden">
108
+ <div class="image-container relative">
109
+ <img id="preview-image" src="" alt="Preview" class="w-full h-auto rounded-lg">
110
+ <button id="change-image-btn" class="absolute top-3 left-3 bg-white text-blue-600 px-3 py-1 rounded-full text-sm font-medium shadow-md hover:bg-gray-100">
111
+ <i class="fas fa-sync-alt mr-1"></i> Change
112
+ </button>
113
+ </div>
114
+ </div>
115
  </div>
116
 
117
  <div>
118
+ <div id="result-box" class="result-box bg-gray-50 border border-gray-200 rounded-lg p-6 h-full">
119
  <div class="flex justify-between items-center mb-4">
120
+ <h3 class="text-lg font-semibold text-gray-800">Result</h3>
121
  <span class="text-xs bg-gray-200 px-2 py-1 rounded-full">Powered by DeepSeek</span>
122
  </div>
123
 
124
  <div id="results-placeholder" class="text-center py-10">
125
+ <i class="fas fa-image text-gray-300 text-4xl mb-3"></i>
126
+ <p class="text-gray-400">Your background-free image will appear here</p>
127
  </div>
128
 
129
  <div id="results-container" class="hidden">
130
+ <div class="image-container relative mb-4">
131
+ <img id="result-image" src="" alt="Result" class="w-full h-auto rounded-lg">
132
+ <button id="download-btn" class="download-btn px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition font-medium flex items-center">
133
+ <i class="fas fa-download mr-2"></i> Download
134
+ </button>
 
 
 
 
135
  </div>
136
 
137
+ <div class="flex flex-wrap gap-3">
138
+ <button id="download-png-btn" class="px-4 py-2 bg-white border border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50 transition font-medium flex items-center">
139
+ <i class="fas fa-file-image mr-2"></i> PNG
140
+ </button>
141
+ <button id="download-jpg-btn" class="px-4 py-2 bg-white border border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50 transition font-medium flex items-center">
142
+ <i class="fas fa-file-image mr-2"></i> JPG
143
+ </button>
144
+ <button id="download-webp-btn" class="px-4 py-2 bg-white border border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50 transition font-medium flex items-center">
145
+ <i class="fas fa-file-image mr-2"></i> WEBP
146
  </button>
147
  </div>
148
 
149
+ <div class="bg-blue-50 border-l-4 border-blue-400 p-4 mt-4">
150
  <div class="flex">
151
  <div class="flex-shrink-0">
152
  <i class="fas fa-lightbulb text-blue-400"></i>
153
  </div>
154
  <div class="ml-3">
155
  <p class="text-sm text-blue-700">
156
+ <span class="font-semibold">Tip:</span> For best results, use high-quality images with clear contrast between subject and background.
157
  </p>
158
  </div>
159
  </div>
 
164
  </div>
165
 
166
  <div class="mt-6 flex flex-wrap gap-3">
167
+ <button id="process-btn" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition font-medium flex items-center">
168
+ <i class="fas fa-magic mr-2"></i> Remove Background
 
 
 
169
  </button>
170
  <button id="clear-btn" class="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition font-medium flex items-center">
171
  <i class="fas fa-trash-alt mr-2"></i> Clear All
 
175
  <button class="px-4 py-3 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 transition">
176
  <i class="fas fa-question-circle"></i>
177
  </button>
178
+ <span class="tooltip-text">Our AI uses advanced computer vision to detect and remove backgrounds with pixel-perfect precision, preserving fine details like hair and transparent objects.</span>
179
  </div>
180
  </div>
181
  </div>
 
183
 
184
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
185
  <div class="result-box bg-white border border-gray-200 rounded-lg p-6 hover:shadow-md transition">
186
+ <div class="text-blue-500 mb-3">
187
+ <i class="fas fa-bolt text-2xl"></i>
188
  </div>
189
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">Instant Processing</h3>
190
+ <p class="text-gray-600">Get results in seconds with our high-performance DeepSeek AI engine.</p>
191
  </div>
192
 
193
  <div class="result-box bg-white border border-gray-200 rounded-lg p-6 hover:shadow-md transition">
194
  <div class="text-green-500 mb-3">
195
+ <i class="fas fa-cut text-2xl"></i>
196
  </div>
197
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">Precision Edges</h3>
198
+ <p class="text-gray-600">Perfectly clean cuts around hair, fur, and complex shapes.</p>
199
  </div>
200
 
201
  <div class="result-box bg-white border border-gray-200 rounded-lg p-6 hover:shadow-md transition">
202
+ <div class="text-purple-500 mb-3">
203
+ <i class="fas fa-lock text-2xl"></i>
204
  </div>
205
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">Secure Processing</h3>
206
+ <p class="text-gray-600">Your images are processed securely and never stored permanently.</p>
207
  </div>
208
  </div>
209
 
210
  <div class="bg-white rounded-xl shadow-lg overflow-hidden">
211
  <div class="p-6">
212
+ <h2 class="text-xl font-bold text-gray-800 mb-4">How To Remove Backgrounds</h2>
213
 
214
  <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
215
  <div class="flex flex-col items-center text-center p-4">
216
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-3">
217
+ <i class="fas fa-upload text-blue-600"></i>
218
  </div>
219
+ <h3 class="font-medium text-gray-800 mb-1">Upload Image</h3>
220
+ <p class="text-sm text-gray-600">Drag & drop or select your image file</p>
221
  </div>
222
 
223
  <div class="flex flex-col items-center text-center p-4">
224
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-3">
225
+ <i class="fas fa-magic text-purple-600"></i>
226
  </div>
227
+ <h3 class="font-medium text-gray-800 mb-1">Process</h3>
228
+ <p class="text-sm text-gray-600">Click "Remove Background" button</p>
229
  </div>
230
 
231
  <div class="flex flex-col items-center text-center p-4">
232
  <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-3">
233
+ <i class="fas fa-check-circle text-green-600"></i>
234
  </div>
235
+ <h3 class="font-medium text-gray-800 mb-1">Review</h3>
236
+ <p class="text-sm text-gray-600">Check the transparent background result</p>
237
  </div>
238
 
239
  <div class="flex flex-col items-center text-center p-4">
240
  <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mb-3">
241
+ <i class="fas fa-download text-yellow-600"></i>
242
  </div>
243
+ <h3 class="font-medium text-gray-800 mb-1">Download</h3>
244
+ <p class="text-sm text-gray-600">Save in PNG, JPG or WEBP format</p>
245
  </div>
246
  </div>
247
  </div>
 
253
  <div class="flex flex-col md:flex-row justify-between items-center">
254
  <div class="mb-4 md:mb-0">
255
  <div class="flex items-center">
256
+ <i class="fas fa-image text-blue-400 text-xl mr-2"></i>
257
+ <span class="text-xl font-bold">Background Remover</span>
258
  </div>
259
  <p class="text-gray-400 text-sm mt-1">Powered by DeepSeek AI Technology</p>
260
  </div>
 
273
  </div>
274
 
275
  <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm">
276
+ <p>© 2023 Background Remover Tool. All rights reserved.</p>
277
  </div>
278
  </div>
279
  </footer>
280
 
281
  <script>
282
  document.addEventListener('DOMContentLoaded', function() {
283
+ const dropzone = document.getElementById('dropzone');
284
+ const fileInput = document.getElementById('file-input');
285
+ const selectFileBtn = document.getElementById('select-file-btn');
286
+ const changeImageBtn = document.getElementById('change-image-btn');
287
+ const previewImage = document.getElementById('preview-image');
288
+ const uploadContainer = document.getElementById('upload-container');
289
+ const previewContainer = document.getElementById('preview-container');
290
+ const processBtn = document.getElementById('process-btn');
291
  const clearBtn = document.getElementById('clear-btn');
 
292
  const resultsPlaceholder = document.getElementById('results-placeholder');
293
  const resultsContainer = document.getElementById('results-container');
294
+ const resultImage = document.getElementById('result-image');
295
+ const downloadBtn = document.getElementById('download-btn');
296
+ const downloadPngBtn = document.getElementById('download-png-btn');
297
+ const downloadJpgBtn = document.getElementById('download-jpg-btn');
298
+ const downloadWebpBtn = document.getElementById('download-webp-btn');
299
+
300
+ let selectedFile = null;
301
+
302
+ // Handle drag and drop events
303
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
304
+ dropzone.addEventListener(eventName, preventDefaults, false);
305
+ });
306
+
307
+ function preventDefaults(e) {
308
+ e.preventDefault();
309
+ e.stopPropagation();
310
+ }
311
+
312
+ ['dragenter', 'dragover'].forEach(eventName => {
313
+ dropzone.addEventListener(eventName, highlight, false);
314
+ });
315
+
316
+ ['dragleave', 'drop'].forEach(eventName => {
317
+ dropzone.addEventListener(eventName, unhighlight, false);
318
+ });
319
+
320
+ function highlight() {
321
+ dropzone.classList.add('active');
322
+ }
323
+
324
+ function unhighlight() {
325
+ dropzone.classList.remove('active');
326
+ }
327
+
328
+ // Handle dropped files
329
+ dropzone.addEventListener('drop', handleDrop, false);
330
+
331
+ function handleDrop(e) {
332
+ const dt = e.dataTransfer;
333
+ const files = dt.files;
334
+ handleFiles(files);
335
+ }
336
+
337
+ // Handle file selection via button
338
+ selectFileBtn.addEventListener('click', function() {
339
+ fileInput.click();
340
+ });
341
+
342
+ changeImageBtn.addEventListener('click', function() {
343
+ fileInput.click();
344
+ });
345
 
346
+ fileInput.addEventListener('change', function() {
347
+ handleFiles(this.files);
 
 
 
348
  });
349
 
350
+ function handleFiles(files) {
351
+ if (files.length === 0) return;
352
+
353
+ const file = files[0];
354
+ if (!file.type.match('image.*')) {
355
+ alert('Please select an image file');
356
  return;
357
  }
358
 
359
+ if (file.size > 10 * 1024 * 1024) {
360
+ alert('File size should be less than 10MB');
361
+ return;
362
+ }
363
 
364
+ selectedFile = file;
365
+
366
+ const reader = new FileReader();
367
+ reader.onload = function(e) {
368
+ previewImage.src = e.target.result;
369
+ uploadContainer.classList.add('hidden');
370
+ previewContainer.classList.remove('hidden');
371
+ };
372
+ reader.readAsDataURL(file);
373
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
374
 
375
+ // Process button click
376
+ processBtn.addEventListener('click', function() {
377
+ if (!selectedFile) {
378
+ alert('Please select an image first');
 
379
  return;
380
  }
381
 
382
  // Show loading state
383
+ processBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Processing...';
384
+ processBtn.disabled = true;
385
 
386
+ // In a real implementation, you would call the DeepSeek API here
387
+ // For demo purposes, we'll simulate the API call with a timeout
388
  setTimeout(function() {
389
+ // Simulate successful processing
390
+ resultImage.src = previewImage.src; // In real use, this would be the processed image from API
391
 
392
+ // Show results
 
 
 
393
  resultsPlaceholder.classList.add('hidden');
394
  resultsContainer.classList.remove('hidden');
395
 
396
  // Reset button
397
+ processBtn.innerHTML = '<i class="fas fa-magic mr-2"></i> Remove Background';
398
+ processBtn.disabled = false;
399
  }, 2000);
400
  });
401
 
402
  // Clear button click
403
  clearBtn.addEventListener('click', function() {
404
+ selectedFile = null;
405
+ fileInput.value = '';
406
+ previewImage.src = '';
407
+ resultImage.src = '';
408
+ uploadContainer.classList.remove('hidden');
409
+ previewContainer.classList.add('hidden');
410
  resultsPlaceholder.classList.remove('hidden');
411
  resultsContainer.classList.add('hidden');
412
  });
413
 
414
+ // Download buttons
415
+ downloadBtn.addEventListener('click', function() {
416
+ downloadImage('png');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
417
  });
418
 
419
+ downloadPngBtn.addEventListener('click', function() {
420
+ downloadImage('png');
421
+ });
422
+
423
+ downloadJpgBtn.addEventListener('click', function() {
424
+ downloadImage('jpg');
425
+ });
426
+
427
+ downloadWebpBtn.addEventListener('click', function() {
428
+ downloadImage('webp');
429
+ });
430
+
431
+ function downloadImage(format) {
432
+ if (!resultImage.src) return;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
433
 
434
+ // Create a temporary link
435
+ const link = document.createElement('a');
436
+ link.href = resultImage.src;
437
+ link.download = `background-removed.${format}`;
438
 
439
+ // Trigger download
440
+ document.body.appendChild(link);
441
+ link.click();
442
+ document.body.removeChild(link);
443
+ }
444
+
445
+ // In a real implementation, you would have a function to call the DeepSeek API
446
+ function callDeepSeekAPI(file) {
447
+ // This is where you would implement the actual API call
448
+ // The implementation would depend on the specific API requirements
449
+ // Here's a conceptual example:
450
 
451
+ /*
452
+ const formData = new FormData();
453
+ formData.append('image', file);
 
 
454
 
455
+ return fetch('https://api.deepseek.com/v1/background-removal', {
456
+ method: 'POST',
457
+ headers: {
458
+ 'Authorization': 'Bearer YOUR_DEEPSEEK_API_KEY'
459
+ },
460
+ body: formData
461
+ })
462
+ .then(response => response.json())
463
+ .then(data => {
464
+ if (data.success) {
465
+ return data.processed_image_url;
466
+ } else {
467
+ throw new Error(data.message || 'Failed to process image');
468
  }
 
469
  });
470
+ */
471
 
472
+ // For demo purposes, we'll return a promise that resolves after a delay
473
+ return new Promise((resolve) => {
474
+ setTimeout(() => {
475
+ resolve(previewImage.src); // In real use, this would be the processed image URL
476
+ }, 1500);
477
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
478
  }
479
  });
480
  </script>
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- create a wordpress tool AI Content Detector + Humanizer Detect AI-generated content and transform it into natural human-like text POWERED BY DEEPSEEK
 
 
1
+ create a wordpress tool AI Content Detector + Humanizer Detect AI-generated content and transform it into natural human-like text POWERED BY DEEPSEEK
2
+ background removal tool for my wordpress website its deepseek api using in this tool