api_test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Paper2Poster API Test</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 30px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #34495e;
        }
        input, select {
            width: 100%;
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }
        input:focus, select:focus {
            border-color: #3498db;
            outline: none;
        }
        button {
            background-color: #3498db;
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin-right: 10px;
        }
        button:hover {
            background-color: #2980b9;
        }
        button:disabled {
            background-color: #bdc3c7;
            cursor: not-allowed;
        }
        .status {
            margin-top: 20px;
            padding: 15px;
            border-radius: 5px;
            display: none;
        }
        .status.success {
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        .status.error {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        .status.info {
            background-color: #d1ecf1;
            border: 1px solid #bee5eb;
            color: #0c5460;
        }
        .status.warning {
            background-color: #fff3cd;
            border: 1px solid #ffeaa7;
            color: #856404;
        }
        .spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(0,0,0,.1);
            border-radius: 50%;
            border-top-color: #3498db;
            animation: spin 1s ease-in-out infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .results {
            margin-top: 20px;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 5px;
            display: none;
        }
        .results h3 {
            margin-top: 0;
            color: #2c3e50;
        }
        .results p {
            margin: 10px 0;
        }
        .download-btn {
            display: inline-block;
            margin: 10px 10px 10px 0;
            padding: 10px 20px;
            background-color: #27ae60;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-size: 14px;
        }
        .download-btn:hover {
            background-color: #229954;
        }
        .format-options {
            margin-top: 10px;
        }
        .format-options label {
            display: inline;
            margin-right: 15px;
            font-weight: normal;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎓 Paper2Poster API Test</h1>
        
        <form id="posterForm">
            <div class="form-group">
                <label for="pdfFile">Select PDF Paper:</label>
                <input type="file" id="pdfFile" accept=".pdf" required>
            </div>
            
            <div class="form-group">
                <label for="modelT">Text Model:</label>
                <select id="modelT">
                    <option value="4o">GPT-4o</option>
                    <option value="4o-mini">GPT-4o Mini</option>
                    <option value="vllm_qwen">Qwen2.5-7B (vLLM)</option>
                    <option value="claude-3-5-sonnet">Claude 3.5 Sonnet</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="modelV">Vision Model:</label>
                <select id="modelV">
                    <option value="4o">GPT-4o Vision</option>
                    <option value="vllm_qwen_vl">Qwen2.5-VL-7B (vLLM)</option>
                    <option value="claude-3-5-sonnet">Claude 3.5 Sonnet</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="width">Poster Width (inches):</label>
                <input type="number" id="width" value="48" min="12" max="60">
            </div>
            
            <div class="form-group">
                <label for="height">Poster Height (inches):</label>
                <input type="number" id="height" value="36" min="12" max="60">
            </div>
            

            
            <button type="submit" id="generateBtn">Generate Poster</button>
        </form>
        
        <div id="status" class="status"></div>
        
        <div id="results" class="results">
            <h3>Generation Results</h3>
            <div id="resultsContent"></div>
        </div>
    </div>

    <script>
        const API_BASE = 'http://localhost:6025';
        let currentRequest = null;

        document.getElementById('posterForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const formData = new FormData();
            const pdfFile = document.getElementById('pdfFile').files[0];
            
            if (!pdfFile) {
                showStatus('Please select a PDF file', 'error');
                return;
            }
            
            formData.append('pdf_file', pdfFile);
            formData.append('model_name_t', document.getElementById('modelT').value);
            formData.append('model_name_v', document.getElementById('modelV').value);
            formData.append('poster_width_inches', document.getElementById('width').value);
            formData.append('poster_height_inches', document.getElementById('height').value);
            
            try {
                document.getElementById('generateBtn').disabled = true;
                document.getElementById('results').style.display = 'none';
                
                showStatus(
                    '<span class="spinner"></span> Starting poster generation...',
                    'info'
                );
                
                const startTime = Date.now();
                
                const response = await fetch(`${API_BASE}/generate-poster`, {
                    method: 'POST',
                    body: formData,
                    timeout: 60000  // 60 second timeout for initial request
                });
                
                if (!response.ok) {
                    let errorMsg = `HTTP error! status: ${response.status}`;
                    try {
                        const errorData = await response.json();
                        errorMsg = errorData.error || errorData.detail || errorMsg;
                    } catch (e) {
                        errorMsg = response.statusText || errorMsg;
                    }
                    throw new Error(errorMsg);
                }
                
                const contentType = response.headers.get('content-type');
                
                // Check if response is JSON (could be S3 mode or legacy mode)
                if (contentType && contentType.includes('application/json')) {
                    const result = await response.json();
                    
                    // Check if this is S3 response
                    if (result.s3_path) {
                        showStatus(
                            `✅ Job started! S3 Path: ${result.s3_path}`,
                            'success'
                        );
                        
                        showStatus(
                            `<span class="spinner"></span> Polling S3 for completion... Estimated time: 3-5 minutes`,
                            'info'
                        );
                        
                        // Convert S3 path to HTTPS URL
                        const s3Path = result.s3_path;
                        let s3Url;
                        if (s3Path.startsWith('s3://')) {
                            const parts = s3Path.substring(5).split('/', 2);
                            const bucket = parts[0];
                            const key = parts[1] || '';
                            s3Url = `https://${bucket}.s3.amazonaws.com/${key}`;
                        } else {
                            showStatus('❌ Invalid S3 path format', 'error');
                            document.getElementById('generateBtn').disabled = false;
                            return;
                        }
                        
                        // Poll S3 for file existence
                        const pollInterval = 10000; // 10 seconds
                        const maxWaitTime = 600000; // 10 minutes
                        let pollCount = 0;
                        
                        const pollTimer = setInterval(async () => {
                            pollCount++;
                            const elapsedTime = ((Date.now() - startTime) / 1000).toFixed(0);
                            
                            try {
                                // Check if file exists
                                const headResponse = await fetch(s3Url, { method: 'HEAD' });
                                
                                if (headResponse.ok) {
                                    clearInterval(pollTimer);
                                    showStatus(
                                        `✅ Poster ready in ${elapsedTime} seconds!`,
                                        'success'
                                    );
                                    
                                    // Download from S3
                                    const downloadResponse = await fetch(s3Url);
                                    
                                    if (downloadResponse.ok) {
                                        const blob = await downloadResponse.blob();
                                        const filename = `poster_${pdfFile.name.replace('.pdf', '')}.pptx`;
                                        const url = window.URL.createObjectURL(blob);
                                        displayFileResults(url, filename, blob.size, 'pptx');
                                    } else {
                                        throw new Error('Failed to download from S3');
                                    }
                                    
                                    document.getElementById('generateBtn').disabled = false;
                                    
                                } else {
                                    // Still processing
                                    showStatus(
                                        `<span class="spinner"></span> [${elapsedTime}s] Still processing...`,
                                        'info'
                                    );
                                }
                                
                            } catch (error) {
                                // Still processing (CORS error is expected)
                                showStatus(
                                    `<span class="spinner"></span> [${elapsedTime}s] Still processing...`,
                                    'info'
                                );
                            }
                            
                            // Check for timeout
                            if (pollCount * pollInterval >= maxWaitTime) {
                                clearInterval(pollTimer);
                                showStatus(
                                    '❌ Timeout: Poster generation took longer than 10 minutes',
                                    'error'
                                );
                                document.getElementById('generateBtn').disabled = false;
                            }
                            
                        }, pollInterval);
                        
                    } else {
                        // Legacy JSON mode
                        const elapsedTime = ((Date.now() - startTime) / 1000).toFixed(1);
                        showStatus(`✅ Poster generated successfully in ${elapsedTime} seconds!`, 'success');
                        displayJsonResults(result);
                        document.getElementById('generateBtn').disabled = false;
                    }
                    
                } else {
                    // Legacy file response (PPTX or PNG)
                    const blob = await response.blob();
                    const filename = `poster_${pdfFile.name.replace('.pdf', '')}.${returnType}`;
                    const url = window.URL.createObjectURL(blob);
                    const elapsedTime = ((Date.now() - startTime) / 1000).toFixed(1);
                    
                    showStatus(`✅ Poster generated successfully in ${elapsedTime} seconds!`, 'success');
                    displayFileResults(url, filename, blob.size, returnType);
                    document.getElementById('generateBtn').disabled = false;
                }
                
            } catch (error) {
                showStatus(`❌ Error: ${error.message}`, 'error');
                document.getElementById('generateBtn').disabled = false;
            }
        });
        
        function showStatus(message, type) {
            const statusDiv = document.getElementById('status');
            statusDiv.innerHTML = message;
            statusDiv.className = `status ${type}`;
            statusDiv.style.display = 'block';
            
            // Auto-hide success messages after 10 seconds
            if (type === 'success') {
                setTimeout(() => {
                    statusDiv.style.display = 'none';
                }, 10000);
            }
        }
        
        function displayJsonResults(data) {
            const resultsDiv = document.getElementById('results');
            const contentDiv = document.getElementById('resultsContent');
            
            let html = '<p><strong>Generation Details:</strong></p>';
            html += `<p>📏 Poster Size: ${data.poster_size || 'N/A'}</p>`;
            html += `<p>⏱️ Processing Time: ${data.processing_time || 'N/A'}</p>`;
            
            if (data.token_usage) {
                html += '<p><strong>Token Usage:</strong></p>';
                html += `<p>Text Model: ${data.token_usage.input_tokens_t || 0} → ${data.token_usage.output_tokens_t || 0}</p>`;
                html += `<p>Vision Model: ${data.token_usage.input_tokens_v || 0} → ${data.token_usage.output_tokens_v || 0}</p>`;
            }
            
            // Pretty print the full JSON
            html += '<p><strong>Full Response:</strong></p>';
            html += `<pre style="background: #f0f0f0; padding: 10px; border-radius: 5px; overflow-x: auto;">${JSON.stringify(data, null, 2)}</pre>`;
            
            contentDiv.innerHTML = html;
            resultsDiv.style.display = 'block';
        }
        
        function displayFileResults(url, filename, size, type) {
            const resultsDiv = document.getElementById('results');
            const contentDiv = document.getElementById('resultsContent');
            
            const fileSize = (size / 1024 / 1024).toFixed(2); // Convert to MB
            
            let html = `<p>📄 File: <strong>${filename}</strong></p>`;
            html += `<p>💾 Size: ${fileSize} MB</p>`;
            html += `<p>🎯 Type: ${type.toUpperCase()}</p>`;
            html += `<a href="${url}" download="${filename}" class="download-btn">⬇️ Download ${type.toUpperCase()}</a>`;
            
            if (type === 'png') {
                html += `<p style="margin-top: 20px;"><strong>Preview:</strong></p>`;
                html += `<img src="${url}" style="max-width: 100%; border: 1px solid #ddd; border-radius: 5px;">`;
            }
            
            contentDiv.innerHTML = html;
            resultsDiv.style.display = 'block';
        }
        

        
        // Check API health on page load
        window.addEventListener('load', async () => {
            try {
                const response = await fetch(`${API_BASE}/health`);
                if (response.ok) {
                    showStatus('✅ API service is running and healthy', 'success');
                } else {
                    showStatus('⚠️ API service is not responding properly', 'warning');
                }
            } catch (error) {
                showStatus('❌ Cannot connect to API service. Make sure it is running on localhost:6025', 'error');
            }
        });
    </script>
</body>
</html>