turns-00053.parquet:19584
19df0ae894239277ba16e6a3degenerate_repetitionAbsentFinal dense release
USER
کد اچ تی ام ال هم میشه
ASSISTANT
برای استفاده از HTML و JavaScript شما به PHP برای پردازش فایلها نیاز دارید. اما میتوانید بخشهای مربوط به HTML و جاوااسکریپت را در یک فایل `.html` قرار دهید و سپس از یک فایل PHP برای پردازش آپلود استفاده کنید. در اینجا چگونگی انجام این کار با دو فایل جداگانه توضیح داده میشود:
### ۱. فایل HTML (index.html)
این فایل شامل ساختار HTML و منطق جاوااسکریپت است و نمایش UI را انجام میدهد:
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: auto;
background-color: #f4f4f9;
font-family: sans-serif;
position: relative;
}
a {
display: none;
}
#loader {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f4f4f9;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
text-align: center;
}
#progress {
width: 80%;
height: 30px;
background-color: #eee;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
margin-bottom: 10px;
}
#bar {
width: 0;
height: 100%;
background-color: #76c7c0;
text-align: center;
line-height: 30px;
color: white;
transition: width 0.2s ease;
}
gradio-app {
display: flex;
justify-content: center;
align-items: center;
zoom: 0.8;
min-height: 100vh;
margin-top: 0;
}
.modal, .notification {
display: none;
position: fixed;
z-index: 10002;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
text-align: center;
color: #333;
max-width: 400px;
width: 90%;
}
.modal img, .notification img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
border-radius: 8px;
}
.modal button, .notification button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
margin: 5px;
font-size: 16px;
}
.modal button:hover, .notification button:hover {
background-color: #45a049;
}
.close-button {
background-color: #d9534f;
color: white;
}
.close-button:hover {
background-color: #c9302c;
}
#downloadButton {
display: none;
position: fixed;
bottom: 20px;
left: 20px;
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
z-index: 10003;
font-size: 16px;
}
#downloadButton:hover {
background-color: #45a049;
}
.fullscreen-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 10004;
justify-content: center;
align-items: center;
overflow: hidden;
}
.fullscreen-image {
max-width: 90%;
max-height: 90%;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.close-fullscreen {
position: absolute;
top: 10px;
right: 10px;
background-color: transparent;
color: white;
font-size: 24px;
border: none;
cursor: pointer;
}
.error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
</style>
</head>
<body>
<div id="loader">
<div id="progress">
<div id="bar">0%</div>
</div>
<div>لطفاً صبر کنید...</div>
<div id="einsteinTip">اگر این هوش مصنوعی باز نشد فیلتر شکن تونو روشن کنید</div>
</div>
<gradio-app src="https://victorestrada-diffusers-image-outpaint.hf.space/"></gradio-app>
<button id="downloadButton">دانلود تصویر 📥</button>
<div class="modal" id="imageModal">
<h3>پیشنمایش تصویر</h3>
<img id="modalImage" alt="Image Preview" />
<button id="nextImageButton">تصویر بعدی ⏭️</button>
<button id="saveImageButton">ذخیره تصویر 💾</button>
<button class="close-button">لغو ❌</button>
</div>
<div class="notification" id="saveNotification">
<p>در حال آپلود تصویر...</p>
</div>
<div id="uploadLinkNotification" class="notification">
<p>لینک دانلود تصویر: <a href="#" id="downloadLink" target="_blank"></a></p>
<button id="copyLinkButton">کپی لینک 📋</button>
<button class="close-button">بستن</button>
</div>
<div class="notification error" id="noImageNotification">
<p>هیچ تصویر ساخته شده ای یافت نشد.</p>
<button id="noImageButton">باشه</button>
</div>
<div class="fullscreen-overlay" id="fullscreenOverlay">
<img id="fullscreenImage" class="fullscreen-image" />
<button class="close-fullscreen" id="closeFullscreenButton">❌</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const downloadButton = document.getElementById('downloadButton');
const saveImageButton = document.getElementById('saveImageButton');
const saveNotification = document.getElementById('saveNotification');
const uploadLinkNotification = document.getElementById('uploadLinkNotification');
const downloadLink = document.getElementById('downloadLink');
const copyLinkButton = document.getElementById('copyLinkButton');
downloadButton.addEventListener('click', function() {
const images = document.querySelectorAll('gradio-app img[src$=".webp"], gradio-app img[src$=".png"], gradio-app img[src$=".jpg"], gradio-app img[src$=".jpeg"]');
const ignoredUrl = 'https://victorestrada-diffusers-image-outpaint.hf.space/file=/tmp/gradio/58d27ee015923ff8867291e88910c3b1fc5e49698a7a06372037c6d58cd5452e/example_1.webp';
let imageArray = [];
images.forEach(img => {
if (!img.src.includes(ignoredUrl)) {
imageArray.push(img.src);
}
});
if (imageArray.length > 0) {
let currentIndex = 0;
displayImage(imageArray, currentIndex);
document.getElementById('nextImageButton').onclick = function() {
currentIndex = (currentIndex + 1) % imageArray.length;
displayImage(imageArray, currentIndex);
};
} else {
const noImageNotification = document.getElementById('noImageNotification');
noImageNotification.style.display = 'block';
}
});
function displayImage(imageList, index) {
const modalImage = document.getElementById('modalImage');
modalImage.src = imageList[index];
const imageModal = document.getElementById('imageModal');
imageModal.style.display = 'block';
}
saveImageButton.addEventListener('click', function() {
const modalImage = document.getElementById('modalImage');
uploadImageToServer(modalImage.src);
});
function uploadImageToServer(imageUrl) {
const saveNotification = document.getElementById('saveNotification');
saveNotification.style.display = 'block';
fetch(imageUrl)
.then(response => response.blob())
.then(blob => {
const formData = new FormData();
formData.append('image', blob, 'downloaded_image.png');
return fetch('upload.php', { // به مسیر فایل PHP بروی سرور اشاره دارد
method: 'POST',
body: formData,
});
})
.then(response => response.json())
.then(data => {
saveNotification.style.display = 'none';
if (data.success) {
downloadLink.href = data.url;
downloadLink.textContent = data.url;
uploadLinkNotification.style.display = 'block';
copyLinkButton.onclick = function() {
navigator.clipboard.writeText(data.url).then(() => {
alert('لینک کپی شد');
});
};
} else {
alert('خطا در آپلود تصویر');
}
})
.catch(error => {
console.error('خطا:', error);
saveNotification.style.display = 'none';
});
}
document.querySelectorAll('.close-button').forEach(button => {
button.addEventListener('click', function(event) {
event.stopPropagation();
button.closest('.modal, .notification').style.display = 'none';
});
});
const noImageButton = document.getElementById('noImageButton');
noImageButton.addEventListener('click', function() {
const noImageNotification = document.getElementById('noImageNotification');
noImageNotification.style.display = 'none';
});
document.addEventListener('click', function(event) {
if (!event.target.closest('.modal, .notification') && !event.target.matches('#downloadButton')) {
document.querySelectorAll('.modal, .notification').forEach(modal => {
modal.style.display = 'none';
});
}
});
});
</script>
</body>
</html>
```
### ۲. فایل PHP (`upload.php`)
این فایل را در سرور خود بارگذاری کنید تا تصاویر را دریافت و ذخیرهکند:
```php
<?php
$storagePath = __DIR__ . '/storage/'; // مسیر فولدر ذخیرهسازی
if (!is_dir($storagePath)) {
mkdir($storagePath, 0777, true);
}
$response = ['success' => false, 'url' => ''];
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['image'])) {
$file = $_FILES['image'];
$fileExtension = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
$allowedExtensions = ['png', 'jpg', 'jpeg', 'webp'];
if (!in_array($fileExtension, $allowedExtensions)) {
echo json_encode($response);
exit;
}
$fileName = uniqid() . '.' . $fileExtension;
$filePath = $storagePath . $fileName;
if (move_uploaded_file($file['tmp_name'], $filePath)) {
$response['success'] = true;
$response['url'] = 'http://yourdomain.com/storage/' . $fileName;
}
}
echo json_encode($response);
```
### نکات:
- اطمینان حاصل کنید که `http://yourdomain.com` را با دامنه واقعی خود جایگزین کنید.
- سطح دسترسی پوشه `storage` باید به گونهای تنظیم شود که قابلنوشتن باشد (به عنوان مثال `0777` برای آزمایش).
- کد جاوااسکریپت تصاویر را به `upload.php` ارسال میکند که فایلها روی سرور ذخیره شوند و لینک آنها بازگردانده شود.
این تنظیمات باید به شما کمک کند تا یک فرآیند کامل را از طریق HTML و PHP به اجرا در آورید. اگر سوال یا مشکل دیگری دارید، خوشحال میشوم که کمک کنم.