Spaces:

DEB1M
/

documagic-webwizard

Running

After Browsing the files, "Generate HTML" function does not work, please fix.

d9b0010 verified 12 months ago

7.72 kB

// File processing logic
document.addEventListener('DOMContentLoaded', () => {
    console.log('BlogVista initialized');
    
    // Handle file uploads and generation
    const handleFileUpload = async (files) => {
        if (!files || files.length === 0) return;
        
        // Convert FileList to array
        const filesArray = Array.from(files);
        
        // Process each file
        for (const file of filesArray) {
            try {
                const content = await extractFileContent(file);
                const html = generateBlogHTML(file.name.replace(/\.[^/.]+$/, ""), content);
                downloadHTMLFile(file.name.replace(/\.[^/.]+$/, ".html"), html);


// Initialize Feather Icons when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    feather.replace();
    
    // Handle file uploads and generation
    const handleFileUpload = async (files) => {
        if (!files || files.length === 0) return;
        
        // Convert FileList to array
        const filesArray = Array.from(files);
        
        // Process each file
        for (const file of filesArray) {
            try {
                const content = await extractFileContent(file);
                const html = generateBlogHTML(file.name.replace(/\.[^/.]+$/, ""), content);
                downloadHTMLFile(file.name.replace(/\.[^/.]+$/, ".html"), html);
            } catch (error) {
                console.error(`Error processing ${file.name}:`, error);
                showErrorNotification(`Failed to process ${file.name}`);
            }
        }
    };

    // Listen for custom event from file-upload component
    document.addEventListener('files-uploaded', (e) => {
        if (e.detail && e.detail.files) {
            handleFileUpload(e.detail.files);
        }
    });
});
catch (error) {
console.error(`Error processing ${file.name}:`, error);
                showErrorNotification(`Failed to process ${file.name}`);
    }
}
};

    // Listen for custom event from file-upload component
    document.addEventListener('files-uploaded', (e) => {
        if (e.detail && e.detail.files) {
            handleFileUpload(e.detail.files);
        }
    });
});
function showErrorNotification(message) {
    const notification = document.createElement('div');
    notification.style.position = 'fixed';
    notification.style.bottom = '20px';
    notification.style.right = '20px';
    notification.style.backgroundColor = '#ef4444';
    notification.style.color = 'white';
    notification.style.padding = '12px 24px';
    notification.style.borderRadius = '8px';
    notification.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';
    notification.style.zIndex = '1000';
    notification.textContent = message;
    
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.style.transition = 'opacity 0.5s';
        notification.style.opacity = '0';
        setTimeout(() => notification.remove(), 500);
    }, 3000);
}
// Simulate file content extraction with improved mock content
async function extractFileContent(file) {
    return new Promise((resolve) => {
        // Simulate processing delay
        setTimeout(() => {
            const isPPT = file.type.includes('powerpoint');
            const mockContent = `
                <h1>${file.name.replace(/\.[^/.]+$/, "")}</h1>
                <p class="text-lg text-secondary-500 mb-6">Auto-generated from ${isPPT ? 'PowerPoint' : 'Word'} document</p>
                
                <div class="grid ${isPPT ? 'md:grid-cols-2' : 'md:grid-cols-1'} gap-6 mb-8">
                    ${isPPT ? 
                        `<div class="bg-stone-100 p-6 rounded-lg">
                            <h2 class="text-xl font-bold mb-3">Presentation Slides</h2>
                            <p>This would contain your PowerPoint slides content.</p>
                            <img src="http://static.photos/business/640x360/42" alt="Presentation" class="mt-4 rounded-lg">
                        </div>` : ''}
                    
                    <div class="bg-stone-100 p-6 rounded-lg">
                        <h2 class="text-xl font-bold mb-3">Document Content</h2>
                        <p>This would contain the formatted text content from your document with proper headings, lists, and paragraphs.</p>
                        <ul class="mt-4 pl-5 space-y-2">
                            <li class="list-disc">Document: ${file.name}</li>
                            <li class="list-disc">Size: ${(file.size / 1024).toFixed(2)} KB</li>
                            <li class="list-disc">Pages: ${Math.ceil(Math.random() * 10)}</li>
                        </ul>
                    </div>
                </div>
                
                ${isPPT ? 
                    `<div class="bg-stone-100 p-6 rounded-lg mb-8">
                        <h2 class="text-xl font-bold mb-3">Slide Notes</h2>
                        <p>This section would contain any speaker notes from your presentation.</p>
                    </div>` : ''}
                
                <div class="prose max-w-none">
                    <h2>About This Conversion</h2>
                    <p>This HTML was automatically generated from your original document while preserving the structure and key content elements.</p>
                    
                    <h3>Features</h3>
                    <ul>
                        <li>Responsive design for all devices</li>
                        <li>Clean, professional typography</li>
                        <li>Automatic image optimization</li>
                        <li>SEO-friendly structure</li>
                    </ul>
                </div>
            `;
            resolve(mockContent);
        }, 1500);
    });
}
function generateBlogHTML(title, content) {
    return `
<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>${title}</title>
            <link rel="stylesheet" href="style.css">
            <script src="https://cdn.tailwindcss.com"></script>
            <script src="components/navbar.js"></script>
            <script src="components/footer.js"></script>
        </head>
        <body class="bg-stone-50 min-h-screen flex flex-col">
            <custom-navbar></custom-navbar>
            <article class="container mx-auto px-4 py-12 max-w-4xl flex-grow">
                <header class="mb-12 text-center">
                    <h1 class="text-4xl font-bold text-primary-500 mb-4">${title}</h1>
                    <div class="h-1 w-24 bg-primary-500 mx-auto"></div>
                </header>
                <div class="prose prose-lg max-w-none bg-white p-8 rounded-xl shadow-lg">
                    ${content}
                </div>
            </article>
            <custom-footer></custom-footer>
            <script>
                feather.replace();
            </script>
        </body>
        </html>
    `;
}
function downloadHTMLFile(filename, content) {
    try {
const blob = new Blob([content], { type: 'text/html' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        
        // Revoke the object URL after a delay to ensure download completes
        setTimeout(() => {
            URL.revokeObjectURL(url);
        }, 100);
    } catch (error) {
        console.error('Error downloading file:', error);
        showErrorNotification('Failed to download file');
    }
}
}


	// File processing logic
	document.addEventListener('DOMContentLoaded', () => {
	console.log('BlogVista initialized');

	// Handle file uploads and generation
	const handleFileUpload = async (files) => {
	if (!files \|\| files.length === 0) return;

	// Convert FileList to array
	const filesArray = Array.from(files);

	// Process each file
	for (const file of filesArray) {
	try {
	const content = await extractFileContent(file);
	const html = generateBlogHTML(file.name.replace(/\.[^/.]+$/, ""), content);
	downloadHTMLFile(file.name.replace(/\.[^/.]+$/, ".html"), html);


	// Initialize Feather Icons when DOM is loaded
	document.addEventListener('DOMContentLoaded', () => {
	feather.replace();

	// Handle file uploads and generation
	const handleFileUpload = async (files) => {
	if (!files \|\| files.length === 0) return;

	// Convert FileList to array
	const filesArray = Array.from(files);

	// Process each file
	for (const file of filesArray) {
	try {
	const content = await extractFileContent(file);
	const html = generateBlogHTML(file.name.replace(/\.[^/.]+$/, ""), content);
	downloadHTMLFile(file.name.replace(/\.[^/.]+$/, ".html"), html);
	} catch (error) {
	console.error(`Error processing ${file.name}:`, error);
	showErrorNotification(`Failed to process ${file.name}`);
	}
	}
	};

	// Listen for custom event from file-upload component
	document.addEventListener('files-uploaded', (e) => {
	if (e.detail && e.detail.files) {
	handleFileUpload(e.detail.files);
	}
	});
	});
	catch (error) {
	console.error(`Error processing ${file.name}:`, error);
	showErrorNotification(`Failed to process ${file.name}`);
	}
	}
	};

	// Listen for custom event from file-upload component
	document.addEventListener('files-uploaded', (e) => {
	if (e.detail && e.detail.files) {
	handleFileUpload(e.detail.files);
	}
	});
	});
	function showErrorNotification(message) {
	const notification = document.createElement('div');
	notification.style.position = 'fixed';
	notification.style.bottom = '20px';
	notification.style.right = '20px';
	notification.style.backgroundColor = '#ef4444';
	notification.style.color = 'white';
	notification.style.padding = '12px 24px';
	notification.style.borderRadius = '8px';
	notification.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';
	notification.style.zIndex = '1000';
	notification.textContent = message;

	document.body.appendChild(notification);

	setTimeout(() => {
	notification.style.transition = 'opacity 0.5s';
	notification.style.opacity = '0';
	setTimeout(() => notification.remove(), 500);
	}, 3000);
	}
	// Simulate file content extraction with improved mock content
	async function extractFileContent(file) {
	return new Promise((resolve) => {
	// Simulate processing delay
	setTimeout(() => {
	const isPPT = file.type.includes('powerpoint');
	const mockContent = `
	<h1>${file.name.replace(/\.[^/.]+$/, "")}</h1>
	<p class="text-lg text-secondary-500 mb-6">Auto-generated from ${isPPT ? 'PowerPoint' : 'Word'} document</p>

	<div class="grid ${isPPT ? 'md:grid-cols-2' : 'md:grid-cols-1'} gap-6 mb-8">
	${isPPT ?
	`<div class="bg-stone-100 p-6 rounded-lg">
	<h2 class="text-xl font-bold mb-3">Presentation Slides</h2>
	<p>This would contain your PowerPoint slides content.</p>
	<img src="http://static.photos/business/640x360/42" alt="Presentation" class="mt-4 rounded-lg">
	</div>` : ''}

	<div class="bg-stone-100 p-6 rounded-lg">
	<h2 class="text-xl font-bold mb-3">Document Content</h2>
	<p>This would contain the formatted text content from your document with proper headings, lists, and paragraphs.</p>
	<ul class="mt-4 pl-5 space-y-2">
	<li class="list-disc">Document: ${file.name}</li>
	<li class="list-disc">Size: ${(file.size / 1024).toFixed(2)} KB</li>
	<li class="list-disc">Pages: ${Math.ceil(Math.random() * 10)}</li>
	</ul>
	</div>
	</div>

	${isPPT ?
	`<div class="bg-stone-100 p-6 rounded-lg mb-8">
	<h2 class="text-xl font-bold mb-3">Slide Notes</h2>
	<p>This section would contain any speaker notes from your presentation.</p>
	</div>` : ''}

	<div class="prose max-w-none">
	<h2>About This Conversion</h2>
	<p>This HTML was automatically generated from your original document while preserving the structure and key content elements.</p>

	<h3>Features</h3>
	<ul>
	<li>Responsive design for all devices</li>
	<li>Clean, professional typography</li>
	<li>Automatic image optimization</li>
	<li>SEO-friendly structure</li>
	</ul>
	</div>
	`;
	resolve(mockContent);
	}, 1500);
	});
	}
	function generateBlogHTML(title, content) {
	return `
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>${title}</title>
	<link rel="stylesheet" href="style.css">
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="components/navbar.js"></script>
	<script src="components/footer.js"></script>
	</head>
	<body class="bg-stone-50 min-h-screen flex flex-col">
	<custom-navbar></custom-navbar>
	<article class="container mx-auto px-4 py-12 max-w-4xl flex-grow">
	<header class="mb-12 text-center">
	<h1 class="text-4xl font-bold text-primary-500 mb-4">${title}</h1>
	<div class="h-1 w-24 bg-primary-500 mx-auto"></div>
	</header>
	<div class="prose prose-lg max-w-none bg-white p-8 rounded-xl shadow-lg">
	${content}
	</div>
	</article>
	<custom-footer></custom-footer>
	<script>
	feather.replace();
	</script>
	</body>
	</html>
	`;
	}
	function downloadHTMLFile(filename, content) {
	try {
	const blob = new Blob([content], { type: 'text/html' });
	const url = URL.createObjectURL(blob);
	const a = document.createElement('a');
	a.href = url;
	a.download = filename;
	document.body.appendChild(a);
	a.click();
	document.body.removeChild(a);

	// Revoke the object URL after a delay to ensure download completes
	setTimeout(() => {
	URL.revokeObjectURL(url);
	}, 100);
	} catch (error) {
	console.error('Error downloading file:', error);
	showErrorNotification('Failed to download file');
	}
	}
	}