Spaces:

Elias207
/

imageediting

Running

App Files Files Community

Elias207 commited on Aug 23, 2025

Commit

0a41c97

verified ·

1 Parent(s): f3143f3

Update index.html

Browse files

Files changed (1) hide show

index.html +428 -19

index.html CHANGED Viewed

@@ -1,19 +1,428 @@
-<!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="fa" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>فتوشاپ هوش مصنوعی</title>
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-color: #f8f9fa;
+            --text-color: #212529;
+            --card-bg: #ffffff;
+            --border-color: #dee2e6;
+            --primary-color-start: #3b82f6;
+            --primary-color-end: #8b5cf6;
+            --shadow-color: rgba(0, 0, 0, 0.1);
+            --drop-zone-bg: #f1f5f9;
+            --drop-zone-border-active: #a5b4fc;
+        }
+        .dark {
+            --bg-color: #111827;
+            --text-color: #d1d5db;
+            --card-bg: #1f2937;
+            --border-color: #374151;
+            --shadow-color: rgba(0, 0, 0, 0.25);
+            --drop-zone-bg: #374151;
+            --drop-zone-border-active: #6366f1;
+        }
+        body {
+            font-family: 'Vazirmatn', sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            margin: 0;
+            padding: 2rem;
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+            min-height: 100vh;
+            transition: background-color 0.3s, color 0.3s;
+        }
+        .container {
+            max-width: 900px;
+            width: 100%;
+        }
+        header {
+            text-align: center;
+            margin-bottom: 2.5rem;
+        }
+        h1 {
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin: 0;
+            background: linear-gradient(45deg, var(--primary-color-start), var(--primary-color-end));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            color: transparent;
+        }
+        p.subtitle {
+            font-size: 1.1rem;
+            color: #6b7280;
+            margin-top: 0.5rem;
+        }
+        .dark p.subtitle {
+             color: #9ca3af;
+        }
+        main {
+            background-color: var(--card-bg);
+            border-radius: 1.5rem;
+            box-shadow: 0 10px 30px var(--shadow-color);
+            padding: 2.5rem;
+            transition: background-color 0.3s;
+        }
+        .editor-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 2.5rem;
+        }
+        .panel {
+            display: flex;
+            flex-direction: column;
+        }
+        h2 {
+            font-size: 1.25rem;
+            font-weight: 600;
+            margin-top: 0;
+            margin-bottom: 1.5rem;
+            border-bottom: 2px solid var(--border-color);
+            padding-bottom: 0.75rem;
+        }
+        #drop-zone {
+            border: 3px dashed var(--border-color);
+            border-radius: 1rem;
+            padding: 2rem;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+            background-color: var(--drop-zone-bg);
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+        }
+        #drop-zone.dragover {
+            border-color: var(--drop-zone-border-active);
+            background-color: rgba(99, 102, 241, 0.1);
+        }
+        #drop-zone-text {
+            color: #4b5563;
+        }
+        .dark #drop-zone-text { color: #d1d5db; }
+        #image-preview {
+            max-width: 100%;
+            max-height: 300px;
+            border-radius: 0.75rem;
+            object-fit: contain;
+            display: none;
+        }
+        .controls {
+            margin-top: 2rem;
+        }
+        textarea {
+            width: 100%;
+            padding: 1rem;
+            border: 2px solid var(--border-color);
+            border-radius: 0.75rem;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            font-family: 'Vazirmatn', sans-serif;
+            font-size: 1rem;
+            resize: vertical;
+            min-height: 80px;
+            box-sizing: border-box;
+            transition: all 0.3s ease;
+        }
+        textarea:focus {
+            outline: none;
+            border-color: var(--primary-color-start);
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+        }
+        button#submit-btn {
+            width: 100%;
+            padding: 1rem;
+            border: none;
+            border-radius: 0.75rem;
+            background: linear-gradient(45deg, var(--primary-color-start), var(--primary-color-end));
+            color: white;
+            font-size: 1.1rem;
+            font-weight: 600;
+            cursor: pointer;
+            margin-top: 1rem;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+        }
+        button#submit-btn:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+        }
+        button#submit-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        #result-container {
+            border: 3px solid var(--border-color);
+            border-radius: 1rem;
+            min-height: 300px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            background-color: var(--drop-zone-bg);
+            overflow: hidden;
+        }
+        #result-image {
+            max-width: 100%;
+            max-height: 400px;
+            border-radius: 0.75rem;
+            object-fit: contain;
+            display: none;
+        }
+        .spinner {
+            width: 50px;
+            height: 50px;
+            border: 5px solid rgba(0,0,0,0.1);
+            border-left-color: var(--primary-color-start);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            position: absolute;
+            display: none;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        #error-message {
+            color: #ef4444;
+            text-align: center;
+            margin-top: 1rem;
+            display: none;
+            font-weight: 500;
+        }
+        @media (max-width: 800px) {
+            .editor-grid {
+                grid-template-columns: 1fr;
+                gap: 2rem;
+            }
+            body {
+                padding: 1rem;
+            }
+            main {
+                padding: 1.5rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>فتوشاپ هوش مصنوعی</h1>
+            <p class="subtitle">تصاویر خود را با قدرت هوش مصنوعی و به زبان ساده ویرایش کنید</p>
+        </header>
+        <main>
+            <div class="editor-grid">
+                <div class="panel">
+                    <h2>۱. تصویر خود را آپلود کنید</h2>
+                    <div id="drop-zone">
+                        <span id="drop-zone-text">تصویر را اینجا بکشید یا برای انتخاب کلیک کنید</span>
+                        <img id="image-preview" src="#" alt="پیش‌نمایش تصویر" />
+                    </div>
+                    <input type="file" id="file-input" accept="image/*" hidden>
+                </div>
+                <div class="panel">
+                    <h2>۲. نتیجه را مشاهده کنید</h2>
+                    <div id="result-container">
+                        <div class="spinner" id="loader"></div>
+                        <img id="result-image" src="#" alt="تصویر ویرایش شده" />
+                    </div>
+                </div>
+            </div>
+            <div class="controls">
+                <h2>۳. دستور ویرایش را وارد کنید</h2>
+                <textarea id="prompt-input" rows="3" placeholder="مثال: پس‌زمینه را حذف کن و یک ساحل آفتابی قرار بده"></textarea>
+                <button id="submit-btn" disabled>ویرایش کن</button>
+                <p id="error-message"></p>
+            </div>
+        </main>
+    </div>
+    <script>
+        // API Endpoint from the provided chatbot code
+        const API_URL = 'https://alfa-editor-worker.onrender.com/api/edit';
+        // DOM Elements
+        const dropZone = document.getElementById('drop-zone');
+        const fileInput = document.getElementById('file-input');
+        const imagePreview = document.getElementById('image-preview');
+        const dropZoneText = document.getElementById('drop-zone-text');
+        const promptInput = document.getElementById('prompt-input');
+        const submitBtn = document.getElementById('submit-btn');
+        const resultImage = document.getElementById('result-image');
+        const loader = document.getElementById('loader');
+        const errorMessage = document.getElementById('error-message');
+        let uploadedFile = null;
+        // --- File Upload Logic ---
+        dropZone.addEventListener('click', () => fileInput.click());
+        fileInput.addEventListener('change', (e) => {
+            const file = e.target.files[0];
+            if (file) {
+                handleFile(file);
+            }
+        });
+        // Drag and Drop events
+        dropZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            dropZone.classList.add('dragover');
+        });
+        dropZone.addEventListener('dragleave', () => {
+            dropZone.classList.remove('dragover');
+        });
+        dropZone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            dropZone.classList.remove('dragover');
+            const file = e.dataTransfer.files[0];
+            if (file) {
+                handleFile(file);
+            }
+        });
+        function handleFile(file) {
+            if (!file.type.startsWith('image/')) {
+                displayError('لطفا یک فایل تصویری انتخاب کنید.');
+                return;
+            }
+            uploadedFile = file;
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                imagePreview.src = e.target.result;
+                imagePreview.style.display = 'block';
+                dropZoneText.style.display = 'none';
+                submitBtn.disabled = false;
+                clearResult();
+            };
+            reader.readAsDataURL(file);
+        }
+        // --- API Call Logic ---
+        submitBtn.addEventListener('click', async () => {
+            if (!uploadedFile) {
+                displayError('ابتدا باید یک تصویر آپلود کنید.');
+                return;
+            }
+            const prompt = promptInput.value.trim();
+            if (!prompt) {
+                displayError('لطفا دستور ویرایش را وارد کنید.');
+                return;
+            }
+            // Start loading state
+            setLoading(true);
+            // Create FormData to send to the API
+            const formData = new FormData();
+            formData.append('image', uploadedFile);
+            formData.append('prompt', prompt);
+            try {
+                const response = await fetch(API_URL, {
+                    method: 'POST',
+                    body: formData,
+                });
+                if (!response.ok) {
+                    const errorData = await response.json().catch(() => ({ error: `خطای سرور: ${response.statusText}` }));
+                    throw new Error(errorData.error || `یک خطای ناشناخته رخ داد.`);
+                }
+                const result = await response.json();
+                if (result.image_urls && result.image_urls.length > 0) {
+                    displayResult(result.image_urls[0]);
+                } else {
+                    throw new Error('پاسخ معتبری از سرور دریافت نشد.');
+                }
+            } catch (error) {
+                displayError(error.message);
+            } finally {
+                setLoading(false);
+            }
+        });
+        // --- UI Helper Functions ---
+        function setLoading(isLoading) {
+            if (isLoading) {
+                loader.style.display = 'block';
+                submitBtn.disabled = true;
+                submitBtn.textContent = 'در حال پردازش...';
+                resultImage.style.display = 'none';
+                errorMessage.style.display = 'none';
+            } else {
+                loader.style.display = 'none';
+                submitBtn.disabled = false;
+                submitBtn.textContent = 'ویرایش کن';
+            }
+        }
+        function displayResult(imageUrl) {
+            resultImage.src = imageUrl;
+            resultImage.style.display = 'block';
+        }
+        function clearResult() {
+            resultImage.src = '#';
+            resultImage.style.display = 'none';
+            errorMessage.style.display = 'none';
+        }
+        function displayError(message) {
+            errorMessage.textContent = message;
+            errorMessage.style.display = 'block';
+        }
+    </script>
+</body>
+</html>