Spaces:
Sleeping
Sleeping
File size: 6,537 Bytes
6bc325a dedc4d5 6bc325a 8246e35 6bc325a dedc4d5 cbba23d dedc4d5 cbba23d dedc4d5 6bc325a 8246e35 cbba23d 8246e35 6bc325a dedc4d5 6bc325a dedc4d5 78eed41 dedc4d5 6bc325a 78eed41 2968a62 dedc4d5 6bc325a dedc4d5 6bc325a dedc4d5 6bc325a 8246e35 6bc325a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Upload Images for Generative AI</title>
<script src="https://cdn.tailwindcss.com"></script>
<!-- Marked library to render markdown results -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body class="bg-gray-100">
<div class="container mx-auto p-4">
<h1 class="text-3xl font-bold text-center mb-6">Upload Images</h1>
<div class="flex flex-col items-center">
<!-- Upload/Paste Area -->
<div id="upload-area" class="border-2 border-dashed border-gray-400 p-8 rounded w-full sm:w-11/12 md:w-3/4 lg:w-1/2 bg-white">
<p class="mb-4 text-center">
Paste images with <strong>Ctrl + V</strong> or click "Add Image".
</p>
<input type="file" id="fileInput" name="files" accept="image/*" multiple class="hidden" />
<button id="addImageBtn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mb-4">
Add Image
</button>
<!-- Thumbnails container -->
<div id="thumbnails" class="flex flex-wrap gap-4"></div>
</div>
<!-- Send Button -->
<div class="mt-6">
<button id="sendBtn" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
Send
</button>
</div>
<!-- Result Display -->
<div id="resultArea" class="mt-6 w-full sm:w-11/12 md:w-3/4 lg:w-1/2 overflow-x-auto"></div>
</div>
</div>
<!-- Popup Card for First Time -->
<div id="popupCard" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
<div class="bg-white rounded-lg p-6 w-11/12 sm:max-w-md mx-auto shadow-2xl transform transition-all duration-300">
<div class="mb-4">
<h2 class="text-2xl font-bold">👋 Hey, I'm Aditya Devarshi</h2>
<p class="mt-2 text-gray-700">I'm an AI Engineer 🤖, here to help with your assignments 📚, support multiple images 📷, and provide keyboard shortcuts ⌨️.</p>
<p class="mt-2 text-gray-700">Connect with me:</p>
<ul class="list-disc list-inside mt-2 text-blue-600">
<li><a href="https://www.adityadevarshi.online/" target="_blank">🌐 Website</a></li>
<li><a href="https://www.linkedin.com/in/aditya-devarshi/" target="_blank">🔗 LinkedIn</a></li>
<li><a href="https://github.com/devarshiadi" target="_blank">🐙 GitHub</a></li>
<li><a href="https://medium.com/@devarshia5" target="_blank">✍️ Medium</a></li>
</ul>
</div>
<div class="text-right">
<button id="closePopup" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Close
</button>
</div>
</div>
</div>
<script>
const fileInput = document.getElementById('fileInput');
const addImageBtn = document.getElementById('addImageBtn');
const thumbnails = document.getElementById('thumbnails');
const sendBtn = document.getElementById('sendBtn');
const resultArea = document.getElementById('resultArea');
// Array to hold selected image files.
let selectedFiles = [];
// Trigger file input when Add Image button is clicked.
addImageBtn.addEventListener('click', () => {
fileInput.click();
});
// Handle file selection.
fileInput.addEventListener('change', () => {
for (let file of fileInput.files) {
selectedFiles.push(file);
addThumbnail(file);
}
fileInput.value = ""; // reset input
});
// Function to add image thumbnail.
function addThumbnail(file) {
const reader = new FileReader();
reader.onload = function(e) {
const thumbContainer = document.createElement('div');
thumbContainer.classList.add('relative');
thumbContainer.innerHTML = `
<img src="${e.target.result}" alt="${file.name}" class="w-24 h-24 object-cover rounded border" />
<button class="removeBtn absolute -top-2 -right-2 bg-red-500 text-white rounded-full px-1 text-xs">x</button>
`;
thumbnails.appendChild(thumbContainer);
// Remove image on click.
thumbContainer.querySelector('.removeBtn').addEventListener('click', () => {
selectedFiles = selectedFiles.filter(f => f !== file);
thumbContainer.remove();
});
}
reader.readAsDataURL(file);
}
// Listen for paste events (Ctrl+V) to add images.
window.addEventListener('paste', (event) => {
const items = event.clipboardData.items;
for (let item of items) {
if (item.type.indexOf("image") !== -1) {
const file = item.getAsFile();
selectedFiles.push(file);
addThumbnail(file);
}
}
});
// Handle Send button click.
sendBtn.addEventListener('click', async () => {
if (selectedFiles.length === 0) {
alert("Please add at least one image.");
return;
}
const formData = new FormData();
selectedFiles.forEach(file => {
formData.append('files', file);
});
resultArea.innerHTML = `<p class="text-gray-500">Processing...</p>`;
try {
const response = await fetch('/upload', {
method: 'POST',
body: formData
});
const data = await response.json();
if (response.ok && data.result) {
// Convert markdown result to HTML using marked.parse
resultArea.innerHTML = `<div class="bg-gray-200 p-4 rounded whitespace-pre-wrap">${marked.parse(data.result)}</div>`;
// Reset the UI.
selectedFiles = [];
thumbnails.innerHTML = "";
} else {
resultArea.innerHTML = `<p class="text-red-500">${data.detail || 'No result received.'}</p>`;
}
} catch (error) {
resultArea.innerHTML = `<p class="text-red-500">Error processing the images: ${error.message}</p>`;
}
});
// Show popup only if it hasn't been shown before
if (!localStorage.getItem('popupShown')) {
document.getElementById('popupCard').style.display = 'flex';
} else {
document.getElementById('popupCard').style.display = 'none';
}
document.getElementById('closePopup').addEventListener('click', function() {
document.getElementById('popupCard').style.display = 'none';
localStorage.setItem('popupShown', 'true');
});
</script>
</body>
</html>
|