Spaces:
Running
Running
| <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> |