Spaces:
Running
Running
Kanka selamlar, Bana URL/Yüklenen Dosya'daki fotoğraf'ın tüm detaylı prompt'unu hem prompt hem de json prompt halinde istemlerini kusursuzca bir mühendis gibi çıkaran text haline getiren bir site
6590e5d
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Prompt Analyzer Pro</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); | |
| } | |
| .dropzone { | |
| border: 2px dashed #a777e3; | |
| transition: all 0.3s ease; | |
| } | |
| .dropzone-active { | |
| border-color: #6e8efb; | |
| background-color: rgba(110, 142, 251, 0.1); | |
| } | |
| .prompt-card { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .prompt-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gray-50"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i data-feather="camera" class="w-8 h-8 mr-2"></i> | |
| <h1 class="text-2xl font-bold">Prompt Analyzer Pro</h1> | |
| </div> | |
| <nav class="flex space-x-6"> | |
| <a href="#" class="hover:text-gray-200 font-medium">Home</a> | |
| <a href="#" class="hover:text-gray-200 font-medium">How It Works</a> | |
| <a href="#" class="hover:text-gray-200 font-medium">API</a> | |
| </nav> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white py-16"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-4xl font-bold mb-4">Extract Perfect Prompts from Any Image</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Upload an image or paste a URL to get detailed prompt analysis in both human-readable and JSON formats.</p> | |
| <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-xl overflow-hidden"> | |
| <div class="p-1 gradient-bg"> | |
| <div class="bg-white p-4 rounded"> | |
| <div id="dropzone" class="dropzone rounded-lg p-8 text-center cursor-pointer"> | |
| <i data-feather="upload-cloud" class="w-12 h-12 mx-auto text-purple-500 mb-4"></i> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">Drag & Drop Image Here</h3> | |
| <p class="text-gray-600 mb-4">or click to browse files</p> | |
| <input type="file" id="fileInput" class="hidden" accept="image/*"> | |
| <input type="text" id="urlInput" placeholder="Or paste image URL here" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Powerful Prompt Analysis</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Our AI extracts comprehensive metadata and generates perfect prompts for AI image generation.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="prompt-card bg-gray-50 p-6 rounded-xl"> | |
| <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="file-text" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2 text-gray-800">Detailed Text Prompt</h3> | |
| <p class="text-gray-600">Get a comprehensive, human-readable description of all image elements.</p> | |
| </div> | |
| <div class="prompt-card bg-gray-50 p-6 rounded-xl"> | |
| <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="code" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2 text-gray-800">Structured JSON Data</h3> | |
| <p class="text-gray-600">Receive machine-readable metadata in perfect JSON format.</p> | |
| </div> | |
| <div class="prompt-card bg-gray-50 p-6 rounded-xl"> | |
| <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center mb-4"> | |
| <i data-feather="zap" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2 text-gray-800">Instant Results</h3> | |
| <p class="text-gray-600">Analyze images in seconds with our optimized AI pipeline.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Results Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Example Analysis Output</h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <!-- Text Prompt Card --> | |
| <div class="prompt-card bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <i data-feather="file-text" class="w-6 h-6 text-purple-500 mr-2"></i> | |
| <h3 class="text-xl font-semibold text-gray-800">Text Prompt</h3> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <pre class="text-gray-800 whitespace-pre-wrap font-mono text-sm">A serene landscape at sunset featuring a calm lake reflecting the vibrant colors of the sky, surrounded by lush green pine trees. In the foreground, a wooden dock extends into the water with a red canoe tied to it. The scene has warm golden hour lighting with soft clouds partially covering the sun. The composition is cinematic with a shallow depth of field, shot on a professional DSLR camera with a 50mm lens.</pre> | |
| </div> | |
| <button class="mt-4 gradient-bg text-white px-4 py-2 rounded-lg hover:opacity-90 transition flex items-center"> | |
| <i data-feather="copy" class="w-4 h-4 mr-2"></i> | |
| Copy Prompt | |
| </button> | |
| </div> | |
| <!-- JSON Prompt Card --> | |
| <div class="prompt-card bg-white p-6 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <i data-feather="code" class="w-6 h-6 text-purple-500 mr-2"></i> | |
| <h3 class="text-xl font-semibold text-gray-800">JSON Metadata</h3> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg overflow-x-auto"> | |
| <pre class="text-gray-800 whitespace-pre-wrap font-mono text-sm">{ | |
| "scene": "serene landscape at sunset", | |
| "elements": { | |
| "main_subject": "calm lake", | |
| "secondary_elements": ["pine trees", "wooden dock", "red canoe"], | |
| "foreground": "dock with canoe", | |
| "background": "sky and trees" | |
| }, | |
| "lighting": { | |
| "type": "golden hour", | |
| "quality": "warm and soft", | |
| "direction": "side lighting" | |
| }, | |
| "composition": { | |
| "style": "cinematic", | |
| "depth_of_field": "shallow", | |
| "focal_length": "50mm" | |
| }, | |
| "technical": { | |
| "camera": "professional DSLR", | |
| "lens": "50mm prime", | |
| "aperture": "f/1.8", | |
| "iso": "100", | |
| "shutter_speed": "1/200s" | |
| }, | |
| "mood": "peaceful, serene, nostalgic", | |
| "color_palette": ["golden", "orange", "green", "blue"] | |
| }</pre> | |
| </div> | |
| <button class="mt-4 gradient-bg text-white px-4 py-2 rounded-lg hover:opacity-90 transition flex items-center"> | |
| <i data-feather="copy" class="w-4 h-4 mr-2"></i> | |
| Copy JSON | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <div class="flex items-center"> | |
| <i data-feather="camera" class="w-6 h-6 mr-2"></i> | |
| <span class="text-xl font-bold">Prompt Analyzer Pro</span> | |
| </div> | |
| <p class="text-gray-400 mt-2">Extracting perfection from every pixel.</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="github"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 Prompt Analyzer Pro. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Dropzone functionality | |
| const dropzone = document.getElementById('dropzone'); | |
| const fileInput = document.getElementById('fileInput'); | |
| dropzone.addEventListener('click', () => { | |
| fileInput.click(); | |
| }); | |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { | |
| dropzone.addEventListener(eventName, preventDefaults, false); | |
| }); | |
| function preventDefaults(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| } | |
| ['dragenter', 'dragover'].forEach(eventName => { | |
| dropzone.addEventListener(eventName, highlight, false); | |
| }); | |
| ['dragleave', 'drop'].forEach(eventName => { | |
| dropzone.addEventListener(eventName, unhighlight, false); | |
| }); | |
| function highlight() { | |
| dropzone.classList.add('dropzone-active'); | |
| } | |
| function unhighlight() { | |
| dropzone.classList.remove('dropzone-active'); | |
| } | |
| dropzone.addEventListener('drop', handleDrop, false); | |
| function handleDrop(e) { | |
| const dt = e.dataTransfer; | |
| const files = dt.files; | |
| handleFiles(files); | |
| } | |
| fileInput.addEventListener('change', function() { | |
| handleFiles(this.files); | |
| }); | |
| function handleFiles(files) { | |
| if (files.length) { | |
| const file = files[0]; | |
| if (file.type.match('image.*')) { | |
| // Here you would process the file | |
| console.log('Image file selected:', file.name); | |
| // In a real app, you would upload and process the image here | |
| } else { | |
| alert('Please select an image file.'); | |
| } | |
| } | |
| } | |
| // URL input handling | |
| const urlInput = document.getElementById('urlInput'); | |
| urlInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| const url = this.value.trim(); | |
| if (url) { | |
| if (isValidHttpUrl(url)) { | |
| console.log('Processing URL:', url); | |
| // In a real app, you would fetch and process the image from URL here | |
| } else { | |
| alert('Please enter a valid HTTP/HTTPS URL'); | |
| } | |
| } | |
| } | |
| }); | |
| function isValidHttpUrl(string) { | |
| try { | |
| const url = new URL(string); | |
| return url.protocol === "http:" || url.protocol === "https:"; | |
| } catch (_) { | |
| return false; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |