Spaces:

Asrasahar
/

Ok-Uploader-Bot

Running

App Files Files Community

Asrasahar commited on Aug 2

Commit

7802703

verified ·

1 Parent(s): 0824edc

Create static/index.html

Browse files

Files changed (1) hide show

static/index.html +238 -0

static/index.html ADDED Viewed

	@@ -0,0 +1,238 @@

+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>آپلودر پیشرفته فایل به Hugging Face</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            text-align: right;
+            margin: 20px;
+            background-color: #f4f4f9;
+            color: #333;
+        }
+        .container {
+            max-width: 600px;
+            margin: 40px auto;
+            padding: 30px;
+            background-color: #fff;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        }
+        h1, h2 {
+            color: #4a4a4a;
+            text-align: center;
+        }
+        .upload-section {
+            margin-bottom: 25px;
+            padding: 20px;
+            border: 1px dashed #ccc;
+            border-radius: 5px;
+        }
+        label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: bold;
+        }
+        input[type="file"], input[type="text"] {
+            width: calc(100% - 22px);
+            padding: 10px;
+            margin-bottom: 15px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-sizing: border-box;
+        }
+        button {
+            background-color: #5e72e4;
+            color: white;
+            padding: 12px 20px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            width: 100%;
+            font-size: 16px;
+            transition: background-color 0.2s;
+        }
+        button:hover {
+            background-color: #485ab8;
+        }
+        button:disabled {
+            background-color: #cccccc;
+            cursor: not-allowed;
+        }
+        #result {
+            margin-top: 25px;
+            padding: 15px;
+            border-radius: 5px;
+            background-color: #f0f0f0;
+            min-height: 50px;
+            word-wrap: break-word;
+            text-align: left;
+        }
+        .progress-container {
+            width: 100%;
+            background-color: #e0e0e0;
+            border-radius: 4px;
+            display: none;
+            margin-top: 15px;
+            overflow: hidden; /* برای گرد شدن گوشه های نوار پیشرفت */
+        }
+        .progress-bar {
+            width: 0%;
+            height: 20px;
+            background-color: #4caf50;
+            border-radius: 4px;
+            text-align: center;
+            line-height: 20px;
+            color: white;
+            transition: width 0.3s ease-in-out;
+        }
+        .success { color: #28a745; }
+        .error { color: #dc3545; }
+        .loading { color: #ffc107; }
+        .result-link {
+            font-weight: bold;
+            color: #5e72e4;
+            text-decoration: none;
+        }
+        .result-link:hover {
+            text-decoration: underline;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>آپلودر پیشرفته فایل</h1>
+        <div class="upload-section">
+            <h2>آپلود از کامپیوتر</h2>
+            <input type="file" id="fileInput" accept="*/*">
+            <button id="uploadFileBtn">آپلود فایل</button>
+        </div>
+        <div class="upload-section">
+            <h2>آپلود از طریق لینک</h2>
+            <input type="text" id="urlInput" placeholder="آدرس URL فایل را وارد کنید">
+            <button id="uploadUrlBtn">آپلود از لینک</button>
+        </div>
+        <div class="progress-container" id="progressContainer">
+            <div class="progress-bar" id="progressBar">0%</div>
+        </div>
+        <div id="result"><p>نتیجه اینجا نمایش داده می‌شود.</p></div>
+    </div>
+    <script>
+        const fileInput = document.getElementById('fileInput');
+        const uploadFileBtn = document.getElementById('uploadFileBtn');
+        const urlInput = document.getElementById('urlInput');
+        const uploadUrlBtn = document.getElementById('uploadUrlBtn');
+        const resultDiv = document.getElementById('result');
+        const progressContainer = document.getElementById('progressContainer');
+        const progressBar = document.getElementById('progressBar');
+        const API_URL = '/upload';
+        function showResult(message, type = 'info') {
+            resultDiv.innerHTML = `<p class="${type}">${message}</p>`;
+        }
+        function setButtonsEnabled(enabled) {
+            uploadFileBtn.disabled = !enabled;
+            uploadUrlBtn.disabled = !enabled;
+        }
+        function updateProgress(percent) {
+            progressContainer.style.display = 'block';
+            progressBar.style.width = percent + '%';
+            progressBar.textContent = percent + '%';
+        }
+        function hideProgress() {
+            setTimeout(() => {
+                progressContainer.style.display = 'none';
+                updateProgress(0);
+            }, 2000);
+        }
+        function uploadWithXHR(requestData, isFormData = false) {
+            return new Promise((resolve, reject) => {
+                const xhr = new XMLHttpRequest();
+                xhr.open('POST', API_URL, true);
+                xhr.upload.onprogress = function(event) {
+                    if (event.lengthComputable && isFormData) {
+                        const percentComplete = Math.round((event.loaded / event.total) * 100);
+                        updateProgress(percentComplete);
+                    }
+                };
+                xhr.onload = function() {
+                    if (xhr.status >= 200 && xhr.status < 300) {
+                        resolve(JSON.parse(xhr.responseText));
+                    } else {
+                        try {
+                            const errorData = JSON.parse(xhr.responseText);
+                            reject(errorData.error || `Error ${xhr.status}: ${xhr.statusText}`);
+                        } catch (e) {
+                            reject(`Error ${xhr.status}: ${xhr.statusText}`);
+                        }
+                    }
+                };
+                xhr.onerror = function() {
+                    reject('خطای ارتباط با شبکه رخ داد.');
+                };
+                if (isFormData) {
+                    xhr.send(requestData);
+                } else {
+                    xhr.setRequestHeader('Content-Type', 'application/json');
+                    xhr.send(JSON.stringify(requestData));
+                }
+            });
+        }
+        uploadFileBtn.addEventListener('click', async () => {
+            const file = fileInput.files[0];
+            if (!file) {
+                showResult('لطفاً یک فایل انتخاب کنید.', 'error');
+                return;
+            }
+            showResult('در حال آماده سازی برای آپلود...', 'loading');
+            setButtonsEnabled(false);
+            updateProgress(0);
+            const formData = new FormData();
+            formData.append('file', file);
+            try {
+                const data = await uploadWithXHR(formData, true);
+                showResult(`فایل با موفقیت آپلود شد! <br> لینک: <a href="${data.hf_url}" target="_blank" class="result-link">${data.hf_url}</a>`, 'success');
+            } catch (error) {
+                showResult(`خطا در آپلود: ${error}`, 'error');
+            } finally {
+                setButtonsEnabled(true);
+                hideProgress();
+            }
+        });
+        uploadUrlBtn.addEventListener('click', async () => {
+            const url = urlInput.value.trim();
+            if (!url) {
+                showResult('لطفاً آدرس URL را وارد کنید.', 'error');
+                return;
+            }
+            showResult('در حال ارسال درخواست به سرور... (این ممکن است زمان ببرد)', 'loading');
+            setButtonsEnabled(false);
+            progressContainer.style.display = 'none';
+            try {
+                // ***** این خط اصلاح شد *****
+                const data = await uploadWithXHR({ url: url }, false);
+                showResult(`فایل با موفقیت از لینک آپلود شد! <br> لینک: <a href="${data.hf_url}" target="_blank" class="result-link">${data.hf_url}</a>`, 'success');
+            } catch (error) {
+                showResult(`خطا در آپلود: ${error}`, 'error');
+            } finally {
+                setButtonsEnabled(true);
+            }
+        });
+    </script>
+</body>
+</html>