Spaces:
Running
Running
| import { useState } from 'react'; | |
| import toast from 'react-hot-toast'; | |
| export default function Downloader() { | |
| const [url, setUrl] = useState(''); | |
| const [loading, setLoading] = useState(false); | |
| const [progress, setProgress] = useState(''); | |
| const [downloadLink, setDownloadLink] = useState(null); | |
| const isValidUrl = (string) => { | |
| try { | |
| new URL(string); | |
| return string.includes('deviantart.com'); | |
| } catch (_) { | |
| return false; | |
| } | |
| }; | |
| const handleProcess = async (e) => { | |
| e.preventDefault(); | |
| if (!url.trim()) { | |
| toast.error('Please enter a DeviantArt URL'); | |
| return; | |
| } | |
| if (!isValidUrl(url)) { | |
| toast.error('Please enter a valid DeviantArt URL'); | |
| return; | |
| } | |
| setLoading(true); | |
| setProgress('Initializing...'); | |
| setDownloadLink(null); | |
| try { | |
| const response = await fetch('/api/process', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ url }), | |
| }); | |
| if (!response.ok) { | |
| const errorData = await response.json(); | |
| throw new Error(errorData.error || 'Failed to process request'); | |
| } | |
| // Simulate progress updates if the backend is fast | |
| setProgress('Downloading images...'); | |
| await new Promise(r => setTimeout(r, 800)); | |
| setProgress('Creating ZIP archive...'); | |
| await new Promise(r => setTimeout(r, 800)); | |
| setProgress('Uploading to MediaFire...'); | |
| await new Promise(r => setTimeout(r, 800)); | |
| const data = await response.json(); | |
| if (data.success) { | |
| setDownloadLink(data.downloadUrl); | |
| setProgress('Complete!'); | |
| toast.success('ZIP file generated successfully!'); | |
| } else { | |
| throw new Error(data.error || 'Unknown error occurred'); | |
| } | |
| } catch (error) { | |
| console.error(error); | |
| toast.error(error.message || 'Something went wrong'); | |
| setProgress('Error occurred'); | |
| } finally { | |
| setLoading(false); | |
| } | |
| }; | |
| return ( | |
| <div className="bg-gray-800/50 border border-gray-700 rounded-2xl p-6 md:p-8 shadow-xl"> | |
| <form onSubmit={handleProcess} className="space-y-6"> | |
| <div> | |
| <label htmlFor="url" className="block text-sm font-medium text-gray-300 mb-2"> | |
| DeviantArt Artwork URL | |
| </label> | |
| <div className="relative"> | |
| <input | |
| type="url" | |
| id="url" | |
| value={url} | |
| onChange={(e) => setUrl(e.target.value)} | |
| placeholder="https://www.deviantart.com/username/art/artwork-title" | |
| disabled={loading} | |
| className="w-full bg-gray-900 border border-gray-600 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent transition-all disabled:opacity-50 disabled:cursor-not-allowed" | |
| /> | |
| {url && ( | |
| <button | |
| type="button" | |
| onClick={() => setUrl('')} | |
| disabled={loading} | |
| className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-white transition-colors" | |
| > | |
| ✕ | |
| </button> | |
| )} | |
| </div> | |
| <p className="mt-2 text-xs text-gray-500"> | |
| Paste the direct link to the DeviantArt artwork page. | |
| </p> | |
| </div> | |
| <button | |
| type="submit" | |
| disabled={loading} | |
| className="w-full bg-gradient-to-r from-brand-600 to-brand-500 hover:from-brand-500 hover:to-brand-400 text-white font-semibold py-3 px-6 rounded-lg shadow-lg shadow-brand-500/20 transform hover:-translate-y-0.5 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none" | |
| > | |
| {loading ? 'Processing...' : 'Download & Zip'} | |
| </button> | |
| </form> | |
| {loading && ( | |
| <div className="mt-8 space-y-4"> | |
| <div className="flex items-center justify-between text-sm"> | |
| <span className="text-gray-400">Status</span> | |
| <span className="text-brand-400 font-medium animate-pulse">{progress}</span> | |
| </div> | |
| <div className="h-2 bg-gray-700 rounded-full overflow-hidden"> | |
| <div className="h-full bg-gradient-to-r from-brand-600 to-purple-500 w-2/3 animate-[shimmer_1.5s_infinite]"></div> | |
| </div> | |
| </div> | |
| )} | |
| {downloadLink && !loading && ( | |
| <div className="mt-8 p-4 bg-green-900/20 border border-green-700/50 rounded-lg"> | |
| <div className="flex items-start gap-3"> | |
| <div className="flex-shrink-0 w-6 h-6 rounded-full bg-green-500/20 flex items-center justify-center mt-0.5"> | |
| <svg className="w-4 h-4 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /> | |
| </svg> | |
| </div> | |
| <div className="flex-grow"> | |
| <h4 className="text-green-400 font-medium mb-1">Ready for Download</h4> | |
| <p className="text-sm text-gray-400 mb-3"> | |
| Your image has been packaged and is ready to be downloaded. | |
| </p> | |
| <a | |
| href={downloadLink} | |
| download="deviantart-image.zip" | |
| className="inline-flex items-center gap-2 bg-green-600 hover:bg-green-500 text-white text-sm font-medium py-2 px-4 rounded transition-colors" | |
| > | |
| <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /> | |
| </svg> | |
| Download ZIP | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| } |