deckly / index.html
nedrzbb's picture
Please create or update the file at pages/api/generate-slides.js with the following code: js Copy Edit import { InferenceClient } from "huggingface_hub"; export default async function handler(req, res) { const client = new InferenceClient({ provider: "hyperbolic", apiKey: process.env.HF_TOKEN, }); const text = req.body.text; try { const completion = await client.chat.completions.create({ model: "deepseek-ai/DeepSeek-V2.5", messages: [ { role: "system", content: "You convert text into slides with titles and bullets." }, { role: "user", content: text }, ], }); const slides = completion.choices[0].message.content; res.status(200).json({ slides }); } catch (error) { console.error("Hugging Face API error:", error); res.status(500).json({ error: "Failed to generate slides from text" }); } } Also ensure the .env.local file contains the Hugging Face token as HF_TOKEN=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, and that this file is NOT exposed publicly. This endpoint will receive the extracted text from uploaded files and return AI-generated slides - Initial Deployment
6a75821 verified
Raw History Blame Contribute Delete
35.4 kB
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Deckly - Turn your documents into beautiful slide decks instantly. No sign-up required. Free PDF to PowerPoint conversion.">
<title>Deckly | Instant Document to Slide Deck Converter</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
:root {
--primary: #0066FF;
--primary-dark: #0052CC;
--dark: #1A1A1A;
--light: #F5F5F7;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background-color: white;
color: var(--dark);
overflow-x: hidden;
}
.gradient-text {
background: linear-gradient(90deg, #0066FF 0%, #00C6FF 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.file-drop-area {
transition: all 0.3s ease;
border: 2px dashed rgba(0, 102, 255, 0.3);
}
.file-drop-area.active {
border-color: var(--primary);
background-color: rgba(0, 102, 255, 0.05);
}
.slide-preview {
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.slide-preview:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px -5px rgba(0, 0, 0, 0.15);
}
.fade-in {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.btn-primary {
background-color: var(--primary);
transition: all 0.3s ease;
}
.btn-primary:hover {
background-color: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 102, 255, 0.2);
}
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background-color: var(--primary);
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
</style>
</head>
<body class="antialiased">
<!-- Navigation -->
<nav class="fixed top-0 left-0 right-0 bg-white bg-opacity-90 backdrop-blur-sm z-50 border-b border-gray-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16 items-center">
<div class="flex items-center">
<a href="#" class="flex items-center">
<span class="text-2xl font-bold gradient-text">Deckly</span>
</a>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#features" class="nav-link text-gray-700 hover:text-gray-900">Features</a>
<a href="#faq" class="nav-link text-gray-700 hover:text-gray-900">FAQ</a>
</div>
<div class="flex items-center">
<button onclick="openUploadModal()" class="btn-primary text-white px-4 py-2 rounded-lg font-medium">
Try for Free
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="pt-32 pb-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
<div class="text-center">
<h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6">
Turn Documents into <span class="gradient-text">Beautiful Slide Decks</span> Instantly
</h1>
<p class="text-xl text-gray-600 max-w-3xl mx-auto mb-10">
Upload your PDF or DOCX file and get a professionally designed PowerPoint presentation in seconds. No sign-up required.
</p>
<div class="flex justify-center">
<button onclick="openUploadModal()" class="btn-primary text-white px-8 py-4 rounded-lg font-medium text-lg flex items-center gap-2">
<i class="fas fa-upload"></i> Upload Document
</button>
</div>
</div>
<div class="mt-20 relative">
<div class="absolute inset-0 bg-gradient-to-b from-blue-50 to-transparent rounded-3xl -z-10"></div>
<div class="max-w-4xl mx-auto">
<div class="relative">
<img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Deckly presentation example" class="rounded-2xl shadow-xl w-full h-auto">
<div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-xl shadow-lg">
<div class="flex items-center gap-2">
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
<i class="fas fa-file-powerpoint text-blue-500 text-xl"></i>
</div>
<div>
<p class="text-sm text-gray-500">Export as</p>
<p class="font-medium">Presentation.pptx</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-gray-50 rounded-3xl my-10">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Professional Presentations in Seconds</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Deckly transforms your documents into beautiful, ready-to-present slides with AI-powered design.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-2xl shadow-sm hover:shadow-md transition-shadow">
<div class="w-14 h-14 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
<i class="fas fa-bolt text-blue-500 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Instant Conversion</h3>
<p class="text-gray-600">Upload your document and get a presentation in seconds. No waiting, no hassle.</p>
</div>
<div class="bg-white p-8 rounded-2xl shadow-sm hover:shadow-md transition-shadow">
<div class="w-14 h-14 bg-purple-100 rounded-xl flex items-center justify-center mb-6">
<i class="fas fa-magic text-purple-500 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">AI-Powered Design</h3>
<p class="text-gray-600">Our AI analyzes your content and creates visually stunning slides automatically.</p>
</div>
<div class="bg-white p-8 rounded-2xl shadow-sm hover:shadow-md transition-shadow">
<div class="w-14 h-14 bg-green-100 rounded-xl flex items-center justify-center mb-6">
<i class="fas fa-lock-open text-green-500 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">No Sign-Up Needed</h3>
<p class="text-gray-600">Start converting documents immediately without creating an account.</p>
</div>
</div>
</section>
<!-- How It Works Section -->
<section id="how-it-works" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">How Deckly Works</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Three simple steps to transform your document into a presentation.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="text-center">
<div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
<span class="text-blue-500 text-2xl font-bold">1</span>
</div>
<h3 class="text-xl font-bold mb-3">Upload Your Document</h3>
<p class="text-gray-600">Drag and drop your PDF or DOCX file (up to 25MB) into the upload area.</p>
</div>
<div class="text-center">
<div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
<span class="text-blue-500 text-2xl font-bold">2</span>
</div>
<h3 class="text-xl font-bold mb-3">AI Generates Slides</h3>
<p class="text-gray-600">Our AI analyzes your content and creates a structured presentation.</p>
</div>
<div class="text-center">
<div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
<span class="text-blue-500 text-2xl font-bold">3</span>
</div>
<h3 class="text-xl font-bold mb-3">Download & Present</h3>
<p class="text-gray-600">Edit if needed, then export as PowerPoint or PDF and you're ready to go!</p>
</div>
</div>
<div class="mt-20 text-center">
<button onclick="openUploadModal()" class="btn-primary text-white px-8 py-4 rounded-lg font-medium text-lg flex items-center gap-2 mx-auto">
<i class="fas fa-upload"></i> Try It Now - Free
</button>
</div>
</section>
<!-- Testimonials -->
<section class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-gray-50 rounded-3xl my-10">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Trusted by Professionals</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Join thousands of users who save hours every week with Deckly.</p>
</div>
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-white p-8 rounded-2xl shadow-sm">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-gray-200 overflow-hidden mr-4">
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah Johnson" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold">Sarah Johnson</h4>
<p class="text-gray-500 text-sm">Marketing Director</p>
</div>
</div>
<p class="text-gray-700">"Deckly has transformed how we create client presentations. What used to take hours now takes minutes, and the results look more professional than what we were making manually!"</p>
<div class="flex mt-4">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
</div>
<div class="bg-white p-8 rounded-2xl shadow-sm">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-gray-200 overflow-hidden mr-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold">Michael Chen</h4>
<p class="text-gray-500 text-sm">University Professor</p>
</div>
</div>
<p class="text-gray-700">"As an educator, I need to convert my lecture notes into slides every week. Deckly saves me so much time and the AI does a surprisingly good job at organizing the content logically."</p>
<div class="flex mt-4">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section id="faq" class="py-20 px-4 sm:px-6 lg:px-8 max-w-4xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Frequently Asked Questions</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Everything you need to know about Deckly.</p>
</div>
<div class="space-y-4">
<div class="border-b border-gray-200 pb-4">
<button onclick="toggleFAQ(1)" class="flex justify-between items-center w-full text-left font-medium text-lg">
<span>Is Deckly really free to use?</span>
<i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-1"></i>
</button>
<div id="faq-content-1" class="hidden mt-2 text-gray-600">
Yes! Deckly is completely free with no sign-up required.
</div>
</div>
<div class="border-b border-gray-200 pb-4">
<button onclick="toggleFAQ(2)" class="flex justify-between items-center w-full text-left font-medium text-lg">
<span>What file types are supported?</span>
<i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-2"></i>
</button>
<div id="faq-content-2" class="hidden mt-2 text-gray-600">
PDF and DOCX files up to 25MB.
</div>
</div>
<div class="border-b border-gray-200 pb-4">
<button onclick="toggleFAQ(3)" class="flex justify-between items-center w-full text-left font-medium text-lg">
<span>Can I edit the slides before exporting?</span>
<i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-3"></i>
</button>
<div id="faq-content-3" class="hidden mt-2 text-gray-600">
Yes, you can edit slide titles and bullet points right in the browser.
</div>
</div>
<div class="border-b border-gray-200 pb-4">
<button onclick="toggleFAQ(4)" class="flex justify-between items-center w-full text-left font-medium text-lg">
<span>Is my data stored?</span>
<i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-4"></i>
</button>
<div id="faq-content-4" class="hidden mt-2 text-gray-600">
No, we do not save your files or generated slides.
</div>
</div>
<div class="border-b border-gray-200 pb-4">
<button onclick="toggleFAQ(5)" class="flex justify-between items-center w-full text-left font-medium text-lg">
<span>Can I use Deckly on mobile?</span>
<i class="fas fa-chevron-down transition-transform duration-300" id="faq-icon-5"></i>
</button>
<div id="faq-content-5" class="hidden mt-2 text-gray-600">
Yes, Deckly is fully responsive and works on all modern devices.
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto text-center">
<div class="bg-gradient-to-r from-blue-500 to-blue-600 rounded-3xl p-12 text-white">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Documents?</h2>
<p class="text-xl text-blue-100 max-w-2xl mx-auto mb-8">Join thousands of professionals who save hours every week with Deckly.</p>
<button onclick="openUploadModal()" class="bg-white text-blue-600 px-8 py-4 rounded-lg font-medium text-lg hover:bg-blue-50 transition-colors">
<i class="fas fa-upload mr-2"></i> Upload Your First Document
</button>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="grid md:grid-cols-4 gap-8 mb-12">
<div>
<h3 class="text-xl font-bold gradient-text mb-4">Deckly</h3>
<p class="text-gray-600">The fastest way to turn documents into beautiful presentations.</p>
</div>
<div>
<h4 class="font-bold text-gray-900 mb-4">Product</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 hover:text-gray-900">Features</a></li>
<li><a href="#" class="text-gray-600 hover:text-gray-900">How It Works</a></li>
<li><a href="#" class="text-gray-600 hover:text-gray-900">Pricing</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-gray-900 mb-4">Resources</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 hover:text-gray-900">Blog</a></li>
<li><a href="#" class="text-gray-600 hover:text-gray-900">Help Center</a></li>
<li><a href="#" class="text-gray-600 hover:text-gray-900">Contact</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-gray-900 mb-4">Legal</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 hover:text-gray-900">Privacy Policy</a></li>
<li><a href="#" class="text-gray-600 hover:text-gray-900">Terms of Service</a></li>
<li><a href="#" class="text-gray-600 hover:text-gray-900">Cookie Policy</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-200 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-500 mb-4 md:mb-0">© 2025 Deckly. All rights reserved.</p>
<div class="flex space-x-6">
<a href="https://www.instagram.com/nr_7.7.7/" target="_blank" class="text-gray-500 hover:text-gray-900"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</footer>
<!-- Upload Modal -->
<div id="uploadModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4 hidden">
<div class="bg-white rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
<div class="p-6">
<div class="flex justify-between items-center mb-6">
<h3 class="text-2xl font-bold">Upload Your Document</h3>
<button onclick="closeUploadModal()" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div id="uploadStep1">
<div id="fileDropArea" class="file-drop-area rounded-xl p-12 text-center mb-6">
<div class="flex flex-col items-center justify-center">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
<i class="fas fa-file-upload text-blue-500 text-2xl"></i>
</div>
<p class="font-medium mb-1">Drag & drop your file here</p>
<p class="text-gray-500 mb-4">or</p>
<label for="fileInput" class="btn-primary text-white px-6 py-3 rounded-lg font-medium cursor-pointer inline-block">
Select File
</label>
<input type="file" id="fileInput" class="hidden" accept=".pdf,.docx">
<p class="text-gray-500 text-sm mt-4">Supported formats: PDF, DOCX (Max 25MB)</p>
</div>
</div>
<div class="bg-blue-50 border border-blue-100 rounded-lg p-4 flex items-start">
<div class="text-blue-500 mr-3 mt-1">
<i class="fas fa-info-circle"></i>
</div>
<div>
<p class="text-blue-800 font-medium">No sign-up required</p>
<p class="text-blue-700 text-sm">Your document is processed securely and never stored permanently.</p>
</div>
</div>
</div>
<div id="uploadStep2" class="hidden">
<div class="flex justify-center mb-6">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
<i class="fas fa-cog fa-spin text-blue-500 text-2xl"></i>
</div>
</div>
<h4 class="text-center text-xl font-medium mb-2">Processing your document</h4>
<p class="text-center text-gray-600 mb-6">Our AI is analyzing your content and creating beautiful slides.</p>
<div class="w-full bg-gray-200 rounded-full h-2.5 mb-6">
<div id="progressBar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
</div>
</div>
<div id="uploadStep3" class="hidden">
<h4 class="text-center text-xl font-medium mb-6">Your Presentation is Ready!</h4>
<div class="grid md:grid-cols-2 gap-6 mb-8">
<div class="slide-preview bg-white rounded-xl overflow-hidden border border-gray-200">
<div class="h-48 bg-gradient-to-r from-blue-500 to-blue-600 flex items-center justify-center">
<i class="fas fa-file-powerpoint text-white text-6xl"></i>
</div>
<div class="p-4">
<h5 class="font-bold mb-2">Slide 1: Introduction</h5>
<ul class="text-sm text-gray-600 space-y-1">
<li>• Overview of document content</li>
<li>• Key objectives and goals</li>
<li>• Presentation structure</li>
</ul>
</div>
</div>
<div class="slide-preview bg-white rounded-xl overflow-hidden border border-gray-200">
<div class="h-48 bg-gradient-to-r from-purple-500 to-purple-600 flex items-center justify-center">
<i class="fas fa-chart-bar text-white text-6xl"></i>
</div>
<div class="p-4">
<h5 class="font-bold mb-2">Slide 2: Key Findings</h5>
<ul class="text-sm text-gray-600 space-y-1">
<li>• Summary of main points</li>
<li>• Supporting data analysis</li>
<li>• Visual representation</li>
</ul>
</div>
</div>
</div>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<button class="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center gap-2 hover:bg-blue-700 transition-colors">
<i class="fas fa-edit"></i> Edit Slides
</button>
<button class="bg-white border border-gray-300 text-gray-700 px-6 py-3 rounded-lg font-medium flex items-center justify-center gap-2 hover:bg-gray-50 transition-colors">
<i class="fas fa-file-powerpoint"></i> Download PPTX
</button>
<button class="bg-white border border-gray-300 text-gray-700 px-6 py-3 rounded-lg font-medium flex items-center justify-center gap-2 hover:bg-gray-50 transition-colors">
<i class="fas fa-file-pdf"></i> Download PDF
</button>
</div>
</div>
</div>
</div>
</div>
<script>
// API endpoint to process document with AI
async function processDocumentWithAI({ text, fileType }) {
try {
const response = await fetch('/api/generate-slides', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ text, fileType }),
});
if (!response.ok) {
throw new Error('Failed to generate slides');
}
return await response.json();
} catch (error) {
console.error('Error processing document:', error);
return null;
}
}
// Toggle FAQ items
function toggleFAQ(num) {
const content = document.getElementById(`faq-content-${num}`);
const icon = document.getElementById(`faq-icon-${num}`);
if (content.classList.contains('hidden')) {
content.classList.remove('hidden');
icon.classList.add('rotate-180');
} else {
content.classList.add('hidden');
icon.classList.remove('rotate-180');
}
}
// Upload modal functions
function openUploadModal() {
document.getElementById('uploadModal').classList.remove('hidden');
document.body.style.overflow = 'hidden';
}
function closeUploadModal() {
document.getElementById('uploadModal').classList.add('hidden');
document.body.style.overflow = 'auto';
resetUploadModal();
}
function resetUploadModal() {
document.getElementById('uploadStep1').classList.remove('hidden');
document.getElementById('uploadStep2').classList.add('hidden');
document.getElementById('uploadStep3').classList.add('hidden');
document.getElementById('progressBar').style.width = '0%';
}
// File upload handling
const fileDropArea = document.getElementById('fileDropArea');
const fileInput = document.getElementById('fileInput');
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
fileDropArea.addEventListener(eventName, preventDefaults, false);
});
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
['dragenter', 'dragover'].forEach(eventName => {
fileDropArea.addEventListener(eventName, highlight, false);
});
['dragleave', 'drop'].forEach(eventName => {
fileDropArea.addEventListener(eventName, unhighlight, false);
});
function highlight() {
fileDropArea.classList.add('active');
}
function unhighlight() {
fileDropArea.classList.remove('active');
}
fileDropArea.addEventListener('drop', handleDrop, false);
function handleDrop(e) {
const dt = e.dataTransfer;
const files = dt.files;
handleFiles(files);
}
fileInput.addEventListener('change', function() {
handleFiles(this.files);
});
function handleFiles(files) {
if (files.length > 0) {
const file = files[0];
const validTypes = ['application/pdf', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
const maxSize = 25 * 1024 * 1024; // 25MB
if (!validTypes.includes(file.type) && !file.name.endsWith('.pdf') && !file.name.endsWith('.docx')) {
alert('Please upload a PDF or DOCX file.');
return;
}
if (file.size > maxSize) {
alert('File size exceeds 25MB limit.');
return;
}
// Proceed with upload
simulateUpload(file);
}
}
async function simulateUpload(file) {
// Show processing step
document.getElementById('uploadStep1').classList.add('hidden');
document.getElementById('uploadStep2').classList.remove('hidden');
try {
// Read file as base64
const base64Content = await new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result.split(',')[1]);
reader.onerror = reject;
reader.readAsDataURL(file);
});
// Process with AI
const result = await processDocumentWithAI({
text: base64Content,
fileType: file.type
});
if (result) {
// Update UI with generated slides
updateSlidePreviews(result.slides);
}
// Complete progress
document.getElementById('progressBar').style.width = '100%';
setTimeout(() => {
document.getElementById('uploadStep2').classList.add('hidden');
document.getElementById('uploadStep3').classList.remove('hidden');
}, 500);
} catch (error) {
console.error('Error processing file:', error);
alert('Error processing document. Please try again.');
resetUploadModal();
}
}
function readFileContent(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (e) => resolve(e.target.result);
reader.onerror = (e) => reject(new Error('Failed to read file'));
if (file.type === 'application/pdf') {
// For PDFs we'd need a PDF parser library
alert('PDF processing requires additional libraries. Please upload a DOCX file for now.');
reject(new Error('PDF not supported in this example'));
} else {
reader.readAsText(file);
}
});
}
function updateSlidePreviews(slides) {
const previewContainer = document.querySelector('#uploadStep3 .grid');
if (!previewContainer || !slides || slides.length === 0) return;
// Clear existing previews
previewContainer.innerHTML = '';
// Add new slide previews
slides.forEach((slide, index) => {
const colors = ['from-blue-500 to-blue-600', 'from-purple-500 to-purple-600',
'from-green-500 to-green-600', 'from-yellow-500 to-yellow-600'];
const color = colors[index % colors.length];
const slideHTML = `
<div class="slide-preview bg-white rounded-xl overflow-hidden border border-gray-200">
<div class="h-48 bg-gradient-to-r ${color} flex items-center justify-center">
<i class="fas fa-file-powerpoint text-white text-6xl"></i>
</div>
<div class="p-4">
<h5 class="font-bold mb-2">${slide.title || `Slide ${index + 1}`}</h5>
<ul class="text-sm text-gray-600 space-y-1">
${slide.bullets.map(bullet => `<li>• ${bullet}</li>`).join('')}
</ul>
</div>
</div>
`;
previewContainer.innerHTML += slideHTML;
});
}
// Close modal when clicking outside
document.getElementById('uploadModal').addEventListener('click', function(e) {
if (e.target === this) {
closeUploadModal();
}
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=nedrzbb/deckly" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>