Spaces:

sqibhe
/

humanizer

Running

App Files Files Community

sqibhe commited on May 20, 2025

Commit

fdc3ce1

verified ·

1 Parent(s): 323f7cd

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +281 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Humanizer
-emoji: 🔥
-colorFrom: red
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: humanizer
+emoji: 🐳
+colorFrom: pink
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,281 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Humanizer Tool</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .gradient-bg {
+            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
+        }
+        .text-gradient {
+            background: linear-gradient(90deg, #6e8efb, #a777e3);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        .textarea-container {
+            position: relative;
+        }
+        .textarea-container::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, #6e8efb, #a777e3);
+            border-radius: 0 0 8px 8px;
+        }
+        .word-count {
+            position: absolute;
+            bottom: 10px;
+            right: 15px;
+            font-size: 0.8rem;
+            color: #6b7280;
+            background-color: rgba(255, 255, 255, 0.7);
+            padding: 2px 6px;
+            border-radius: 10px;
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { opacity: 0.6; }
+            50% { opacity: 1; }
+            100% { opacity: 0.6; }
+        }
+    </style>
+</head>
+<body class="min-h-screen bg-gray-50">
+    <div class="gradient-bg py-6 shadow-lg">
+        <div class="container mx-auto px-4">
+            <h1 class="text-3xl md:text-4xl font-bold text-center text-white">
+                <i class="fas fa-robot mr-2"></i> AI Humanizer Tool
+            </h1>
+            <p class="text-center text-white opacity-90 mt-2">
+                Transform AI-generated text into natural human-like writing
+            </p>
+        </div>
+    </div>
+    <div class="container mx-auto px-4 py-8 max-w-6xl">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            <!-- Input Section -->
+            <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+                <div class="gradient-bg px-6 py-4">
+                    <h2 class="text-xl font-semibold text-white">
+                        <i class="fas fa-keyboard mr-2"></i> AI Text Input
+                    </h2>
+                </div>
+                <div class="p-6 textarea-container">
+                    <textarea
+                        id="aiInput"
+                        class="w-full h-64 p-4 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-300 resize-none"
+                        placeholder="Paste your AI-generated text here..."></textarea>
+                    <div id="inputWordCount" class="word-count">0 words</div>
+                </div>
+            </div>
+            <!-- Output Section -->
+            <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+                <div class="gradient-bg px-6 py-4">
+                    <h2 class="text-xl font-semibold text-white">
+                        <i class="fas fa-user mr-2"></i> Humanized Output
+                    </h2>
+                </div>
+                <div class="p-6 textarea-container">
+                    <textarea
+                        id="humanOutput"
+                        class="w-full h-64 p-4 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-300 resize-none bg-gray-50"
+                        placeholder="Your humanized text will appear here..."
+                        readonly></textarea>
+                    <div id="outputWordCount" class="word-count">0 words</div>
+                </div>
+            </div>
+        </div>
+        <div class="mt-8 text-center">
+            <button
+                id="humanizeBtn"
+                class="gradient-bg hover:opacity-90 text-white font-bold py-3 px-8 rounded-full text-lg shadow-lg transform transition-all duration-200 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">
+                <i class="fas fa-magic mr-2"></i> Humanize Text
+            </button>
+            <div id="loadingIndicator" class="mt-4 hidden">
+                <div class="inline-flex items-center gradient-bg text-white py-2 px-4 rounded-full">
+                    <div class="pulse">
+                        <i class="fas fa-spinner fa-spin mr-2"></i>
+                    </div>
+                    <span>Processing your text...</span>
+                </div>
+            </div>
+            <div id="errorMessage" class="mt-4 hidden">
+                <div class="inline-flex items-center bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+                    <i class="fas fa-exclamation-circle mr-2"></i>
+                    <span id="errorText">Something went wrong. Please try again.</span>
+                </div>
+            </div>
+        </div>
+        <div class="mt-12 bg-white rounded-xl shadow-lg p-6">
+            <h3 class="text-xl font-semibold text-gray-800 mb-4">
+                <i class="fas fa-lightbulb mr-2 text-yellow-500"></i> How It Works
+            </h3>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div class="bg-purple-50 p-4 rounded-lg">
+                    <div class="text-purple-600 mb-2">
+                        <i class="fas fa-paste text-2xl"></i>
+                    </div>
+                    <h4 class="font-medium text-gray-800">1. Paste AI Text</h4>
+                    <p class="text-gray-600 mt-1 text-sm">Copy and paste any AI-generated content into the input box.</p>
+                </div>
+                <div class="bg-blue-50 p-4 rounded-lg">
+                    <div class="text-blue-600 mb-2">
+                        <i class="fas fa-magic text-2xl"></i>
+                    </div>
+                    <h4 class="font-medium text-gray-800">2. Humanize</h4>
+                    <p class="text-gray-600 mt-1 text-sm">Click the button to transform it into natural human-like writing.</p>
+                </div>
+                <div class="bg-green-50 p-4 rounded-lg">
+                    <div class="text-green-600 mb-2">
+                        <i class="fas fa-clipboard text-2xl"></i>
+                    </div>
+                    <h4 class="font-medium text-gray-800">3. Copy & Use</h4>
+                    <p class="text-gray-600 mt-1 text-sm">Get your humanized text and use it anywhere you need.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <footer class="gradient-bg text-white py-6 mt-12">
+        <div class="container mx-auto px-4 text-center">
+            <p>AI Humanizer Tool - Making AI content sound authentically human</p>
+            <p class="mt-2 text-sm opacity-80">Note: This tool uses a secure proxy to protect your API key.</p>
+        </div>
+    </footer>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const aiInput = document.getElementById('aiInput');
+            const humanOutput = document.getElementById('humanOutput');
+            const humanizeBtn = document.getElementById('humanizeBtn');
+            const loadingIndicator = document.getElementById('loadingIndicator');
+            const errorMessage = document.getElementById('errorMessage');
+            const inputWordCount = document.getElementById('inputWordCount');
+            const outputWordCount = document.getElementById('outputWordCount');
+            // Update word count for input
+            aiInput.addEventListener('input', function() {
+                const text = aiInput.value.trim();
+                const words = text ? text.split(/\s+/).length : 0;
+                inputWordCount.textContent = `${words} words`;
+            });
+            // Humanize button click handler
+            humanizeBtn.addEventListener('click', async function() {
+                const inputText = aiInput.value.trim();
+                if (!inputText) {
+                    showError("Please enter some text to humanize.");
+                    return;
+                }
+                // Show loading, hide error
+                loadingIndicator.classList.remove('hidden');
+                errorMessage.classList.add('hidden');
+                humanizeBtn.disabled = true;
+                humanizeBtn.classList.add('opacity-75');
+                try {
+                    // In a real implementation, you would call your serverless proxy here
+                    // For this demo, we'll simulate the API call
+                    const humanizedText = await simulateHumanizeApiCall(inputText);
+                    humanOutput.value = humanizedText;
+                    // Update output word count
+                    const words = humanizedText ? humanizedText.split(/\s+/).length : 0;
+                    outputWordCount.textContent = `${words} words`;
+                } catch (error) {
+                    console.error("Error:", error);
+                    showError("Failed to humanize text. Please try again later.");
+                } finally {
+                    loadingIndicator.classList.add('hidden');
+                    humanizeBtn.disabled = false;
+                    humanizeBtn.classList.remove('opacity-75');
+                }
+            });
+            // Function to simulate API call (replace with actual API call in production)
+            async function simulateHumanizeApiCall(text) {
+                // Simulate network delay
+                await new Promise(resolve => setTimeout(resolve, 1500));
+                // This is where you would normally make the actual API call to your proxy
+                // For example:
+                /*
+                const response = await fetch('/api/humanize', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        text: text
+                    })
+                });
+                if (!response.ok) {
+                    throw new Error('API request failed');
+                }
+                const data = await response.json();
+                return data.humanizedText;
+                */
+                // For demo purposes, we'll just return a modified version of the input
+                return text.replace(/AI|artificial intelligence/gi, match =>
+                    match.toLowerCase() === 'ai' ? 'human intelligence' : 'natural human thinking'
+                )
+                .replace(/\bhowever\b/gi, 'but')
+                .replace(/\bfurthermore\b/gi, 'also')
+                .replace(/\bmoreover\b/gi, 'what\'s more')
+                .replace(/\bthus\b/gi, 'so')
+                .replace(/\bhence\b/gi, 'that\'s why')
+                .replace(/\bnevertheless\b/gi, 'still')
+                .replace(/\bconsequently\b/gi, 'as a result')
+                + "\n\n[Note: In a real implementation, this would be the response from the DeepSeek API]";
+            }
+            function showError(message) {
+                errorText.textContent = message;
+                errorMessage.classList.remove('hidden');
+            }
+            // Add copy to clipboard functionality
+            humanOutput.addEventListener('click', function() {
+                if (humanOutput.value) {
+                    humanOutput.select();
+                    document.execCommand('copy');
+                    // Show temporary tooltip
+                    const tooltip = document.createElement('div');
+                    tooltip.className = 'fixed bg-gray-800 text-white px-3 py-1 rounded text-sm';
+                    tooltip.textContent = 'Copied!';
+                    tooltip.style.top = (event.pageY - 40) + 'px';
+                    tooltip.style.left = (event.pageX - 30) + 'px';
+                    document.body.appendChild(tooltip);
+                    setTimeout(() => {
+                        document.body.removeChild(tooltip);
+                    }, 1000);
+                }
+            });
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=sqibhe/humanizer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ Objective: Build a client-side web tool that sends user-inputted AI-generated text directly to the DeepSeek API and displays the humanized response in a second text box. Requirements Frontend: Simple HTML/CSS/JS interface with two text areas (input/output). A "Humanize" button to trigger the API request. Loading indicator during processing. Error handling for API failures. DeepSeek Integration: Direct API call to DeepSeek’s /v1/chat/completions endpoint. System prompt: "Rewrite this text to sound like a human wrote it. Use casual language, vary sentence structure, and avoid repetitive phrases. Keep technical terms intact." Include the user’s input text in the request. Security: Use a serverless proxy (e.g., Cloudflare Worker/Netlify Function) to hide the DeepSeek API key. Deployment: Host the static frontend on Netlify/Vercel. Deploy the proxy alongside the frontend.