Pundit_Feynman

Sleeping

App Files Files Community

Wckd314 commited on Feb 25

Commit

a893a6b

verified ·

1 Parent(s): 58bd9f7

Upload 2 files

Browse files

Files changed (2) hide show

static/index.html +143 -0
static/script.js +383 -0

static/index.html ADDED Viewed

	@@ -0,0 +1,143 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pundit Feynman — Research Paper to Code</title>
+    <link rel="stylesheet" href="/style.css">
+    <link
+        href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
+        rel="stylesheet">
+</head>
+<body>
+    <!-- Left Panel: Upload & Status -->
+    <aside class="left-panel" id="left-panel">
+        <div class="panel-inner">
+            <header>
+                <h1>Pundit Feynman</h1>
+                <p class="tagline">Upload a research paper.<br>Learn it the Feynman way.</p>
+                <button id="visualize-btn" class="header-visualize hidden" style="display: none !important;">🎨
+                    Visualize Concept</button>
+            </header>
+            <!-- Upload State -->
+            <div id="upload-section">
+                <div id="drop-zone" class="drop-zone">
+                    <svg class="upload-icon" width="32" height="32" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                        <polyline points="17 8 12 3 7 8"></polyline>
+                        <line x1="12" y1="3" x2="12" y2="15"></line>
+                    </svg>
+                    <p class="drop-text">Drop your PDF here</p>
+                    <span class="drop-hint">or click to browse</span>
+                    <input type="file" id="file-input" accept="application/pdf" hidden>
+                </div>
+                <!-- Divider -->
+                <div class="divider">
+                    <span>or paste arXiv link</span>
+                </div>
+                <!-- arXiv URL Input -->
+                <div class="arxiv-input-row">
+                    <input type="text" id="arxiv-input" class="arxiv-input"
+                        placeholder="https://arxiv.org/abs/2401.12345">
+                    <button id="arxiv-btn" class="btn btn-primary arxiv-btn">Go →</button>
+                </div>
+            </div>
+            <!-- Extraction Progress -->
+            <div id="extract-status" class="status-box hidden">
+                <div class="spinner"></div>
+                <p class="status-label" id="extract-label">Analyzing paper…</p>
+                <p class="status-sub">This may take a few minutes for long papers.</p>
+            </div>
+            <!-- Stream Active Indicator -->
+            <div id="stream-status" class="status-box hidden">
+                <div class="pulse-dot"></div>
+                <p class="status-label">Generating code live…</p>
+                <p class="status-sub">Watch the output in the code viewer →</p>
+            </div>
+            <!-- Done -->
+            <div id="done-section" class="status-box hidden">
+                <p class="done-check">✓</p>
+                <p class="status-label">Generation complete</p>
+                <div class="btn-row">
+                    <a id="download-btn" class="btn btn-primary" download="pundit_feynman_notebook.ipynb">⬇ Download
+                        .ipynb</a>
+                    <button id="reset-btn" class="btn btn-secondary">↻ New Paper</button>
+                </div>
+            </div>
+            <!-- Error -->
+            <div id="error-section" class="status-box hidden">
+                <p class="error-x">✕</p>
+                <p class="status-label">Something went wrong</p>
+                <p class="status-sub" id="error-text"></p>
+                <button id="error-reset-btn" class="btn btn-secondary">↻ Try Again</button>
+            </div>
+            <footer>
+                <p>Powered by <strong>NVIDIA NIM</strong></p>
+                <div class="feedback-footer">
+                    <p>please give feedback, so that i can make it better</p>
+                    <a href="https://mail.google.com/mail/?view=cm&to=Avijitshil52460@gmail.com&su=Pundit%20Feynman%20Feedback"
+                        target="_blank" class="feedback-link">Avijitshil52460@gmail.com</a>
+                </div>
+            </footer>
+        </div>
+    </aside>
+    <!-- Right Panel: Live Code Viewer -->
+    <main class="right-panel" id="right-panel">
+        <div class="code-header">
+            <span class="code-title">Code Output</span>
+            <span class="code-badge" id="code-badge">waiting</span>
+        </div>
+        <pre class="code-viewer"
+            id="code-viewer"><code id="code-output">// Upload a paper to see the generated code here…</code></pre>
+    </main>
+    <script src="/script.js?v=4"></script>
+    <!-- Floating Image Window (Hidden) -->
+    <div id="image-float" class="float-window hidden" style="display: none !important;">
+        <div class="float-header" id="float-header">
+            <span class="float-title">🎨 Concept Illustration</span>
+            <div class="float-actions">
+                <button id="float-download" class="float-btn" title="Download PNG">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                        stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                        <polyline points="7 10 12 15 17 10" />
+                        <line x1="12" y1="15" x2="12" y2="3" />
+                    </svg>
+                </button>
+                <button id="float-minimize" class="float-btn" title="Minimize">─</button>
+                <button id="float-close" class="float-btn" title="Close">✕</button>
+            </div>
+        </div>
+        <div class="float-body" id="float-body">
+            <div class="float-spinner" id="float-spinner">
+                <div class="paint-brush-container">
+                    <div class="brush">🖌️</div>
+                    <div class="shimmer-line"></div>
+                </div>
+                <p id="visualize-status">FLUX is painting your concept…</p>
+            </div>
+            <img id="float-image" class="float-image hidden" alt="Concept Illustration" />
+        </div>
+    </div>
+    <!-- Minimized Pill (Hidden) -->
+    <div id="image-pill" class="float-pill hidden" style="display: none !important;">
+        <span>🎨 Illustration</span>
+    </div>
+</body>
+</html>

static/script.js ADDED Viewed

	@@ -0,0 +1,383 @@

+console.log('🚀 Pundit Feynman Script Loading... [v3.2]');
+window.onerror = function (msg, url, lineNo, columnNo, error) {
+    alert(`JS Error: ${msg}\nLine: ${lineNo}\nCheck browser console!`);
+    return false;
+};
+// ── DOM Refs ──
+const getEl = (id) => document.getElementById(id);
+const dropZone = getEl('drop-zone');
+const fileInput = getEl('file-input');
+const uploadSection = getEl('upload-section');
+const extractStatus = getEl('extract-status');
+const extractLabel = getEl('extract-label');
+const streamStatus = getEl('stream-status');
+const doneSection = getEl('done-section');
+const errorSection = getEl('error-section');
+const errorText = getEl('error-text');
+const downloadBtn = getEl('download-btn');
+const resetBtn = getEl('reset-btn');
+const errorResetBtn = getEl('error-reset-btn');
+const codeOutput = getEl('code-output');
+const codeViewer = getEl('code-viewer');
+const codeBadge = getEl('code-badge');
+const arxivInput = getEl('arxiv-input');
+const arxivBtn = getEl('arxiv-btn');
+const visualizeBtn = getEl('visualize-btn');
+const imageFloat = getEl('image-float');
+const imagePill = getEl('image-pill');
+const floatHeader = getEl('float-header');
+const floatImage = getEl('float-image');
+const floatSpinner = getEl('float-spinner');
+const floatDownload = getEl('float-download');
+const floatMinimize = getEl('float-minimize');
+const floatClose = getEl('float-close');
+console.log('🎨 UI elements mapped. Visualize button:', !!visualizeBtn);
+// Test backend connectivity
+fetch('/api/ping').then(r => r.json()).then(d => console.log('🏓 Backend connectivity:', d.status)).catch(e => console.error('❌ Backend UNREACHABLE:', e));
+// ── Visual Illustration State ──
+let currentJobId = null;
+window._debugJobId = () => currentJobId; // Access via console: window._debugJobId()
+// ── State Manager ──
+function showSection(section) {
+    [uploadSection, extractStatus, streamStatus, doneSection, errorSection]
+        .forEach(el => el.classList.add('hidden'));
+    if (section) section.classList.remove('hidden');
+}
+// ── Drag & Drop ──
+if (dropZone) {
+    dropZone.addEventListener('click', () => {
+        if (fileInput) fileInput.click();
+    });
+    dropZone.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        dropZone.classList.add('drag-over');
+    });
+    dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
+    dropZone.addEventListener('drop', (e) => {
+        e.preventDefault();
+        dropZone.classList.remove('drag-over');
+        if (e.dataTransfer.files.length > 0) handleUpload(e.dataTransfer.files[0]);
+    });
+}
+if (fileInput) {
+    fileInput.addEventListener('change', (e) => {
+        if (e.target.files.length > 0) handleUpload(e.target.files[0]);
+    });
+}
+// ── arXiv URL Handler ──
+if (arxivBtn) {
+    arxivBtn.addEventListener('click', () => handleArxiv());
+}
+if (arxivInput) {
+    arxivInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') handleArxiv();
+    });
+}
+async function handleArxiv() {
+    const url = arxivInput.value.trim();
+    if (!url) return;
+    if (!url.includes('arxiv.org')) {
+        alert('Please enter a valid arXiv URL (e.g. https://arxiv.org/abs/2401.12345)');
+        return;
+    }
+    showSection(extractStatus);
+    extractLabel.textContent = 'Downloading & analyzing arXiv paper…';
+    codeOutput.textContent = '// Downloading PDF from arXiv…';
+    codeBadge.textContent = 'extracting';
+    codeBadge.className = 'code-badge';
+    try {
+        const res = await fetch('/api/extract-arxiv', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ url })
+        });
+        if (!res.ok) {
+            const err = await res.json().catch(() => ({ detail: 'arXiv extraction failed' }));
+            throw new Error(err.detail || 'arXiv extraction failed');
+        }
+        const data = await res.json();
+        console.log('arXiv extraction complete:', data);
+        startStream(data.job_id);
+    } catch (err) {
+        showError(err.message);
+    }
+}
+// ── Upload & Extract (Step 1) ──
+async function handleUpload(file) {
+    if (!file.name.toLowerCase().endsWith('.pdf')) {
+        alert('Please upload a PDF file.');
+        return;
+    }
+    // Show extraction spinner
+    showSection(extractStatus);
+    extractLabel.textContent = 'Uploading & analyzing paper…';
+    codeOutput.textContent = '// Waiting for paper analysis to complete…';
+    codeBadge.textContent = 'extracting';
+    codeBadge.className = 'code-badge';
+    const formData = new FormData();
+    formData.append('file', file);
+    try {
+        const res = await fetch('/api/extract', {
+            method: 'POST',
+            body: formData
+        });
+        if (!res.ok) {
+            const err = await res.json().catch(() => ({ detail: 'Extraction failed' }));
+            throw new Error(err.detail || 'Extraction failed');
+        }
+        const data = await res.json();
+        console.log('Extraction complete:', data);
+        // Hide visualize button from previous run if any
+        visualizeBtn.classList.add('hidden');
+        // Start streaming (Step 2)
+        startStream(data.job_id);
+    } catch (err) {
+        showError(err.message);
+    }
+}
+// ── Live Streaming (Step 2) ──
+function startStream(jobId) {
+    currentJobId = jobId; // Store immediately
+    showSection(streamStatus);
+    codeOutput.textContent = '';
+    codeBadge.textContent = 'streaming';
+    codeBadge.className = 'code-badge streaming';
+    const source = new EventSource(`/api/generate_stream/${jobId}`);
+    let hasError = false;
+    source.onmessage = (event) => {
+        try {
+            const payload = JSON.parse(event.data);
+            if (payload.done) {
+                source.close();
+                if (payload.success) {
+                    onStreamComplete(jobId);
+                } else {
+                    // Pipeline finished but failed — show error state
+                    showError('Pipeline failed to generate notebook. Check the code output panel for details.');
+                    codeBadge.textContent = 'failed';
+                    codeBadge.className = 'code-badge';
+                }
+                return;
+            }
+            if (payload.analysis_done) {
+                // Show visualize button early!
+                if (visualizeBtn) visualizeBtn.classList.remove('hidden');
+                return;
+            }
+            if (payload.text) {
+                // Check if it's an error message
+                if (payload.text.includes('❌')) {
+                    hasError = true;
+                }
+                codeOutput.textContent += payload.text;
+                // Auto-scroll to bottom
+                codeViewer.scrollTop = codeViewer.scrollHeight;
+            }
+        } catch (e) {
+            console.error('Parse error:', e);
+        }
+    };
+    source.onerror = (err) => {
+        console.error('SSE error:', err);
+        source.close();
+        showError('Stream connection lost. Please try again.');
+    };
+}
+function onStreamComplete(jobId) {
+    showSection(doneSection);
+    if (downloadBtn) {
+        downloadBtn.href = `/api/download/${jobId}`;
+        downloadBtn.download = "pundit_feynman_notebook.ipynb";
+    }
+    currentJobId = jobId; // Store for visualization
+    if (codeBadge) {
+        codeBadge.textContent = 'complete';
+        codeBadge.className = 'code-badge done';
+    }
+}
+// ── Visual Illustration Logic ──
+if (visualizeBtn) {
+    visualizeBtn.addEventListener('click', async (e) => {
+        console.log('🖱️ Visualize button CLICKED. Event object:', e);
+        if (!currentJobId) {
+            console.error('❌ Cannot visualize: currentJobId is null');
+            alert('Software Error: Job ID not captured yet. Please wait for analysis or refresh.');
+            return;
+        }
+        console.log('🎨 Requesting visualization for Job:', currentJobId);
+        // Disable button to prevent double-clicks
+        visualizeBtn.disabled = true;
+        const originalText = visualizeBtn.textContent;
+        visualizeBtn.textContent = '🎨 Painting...';
+        // Show float UI
+        if (imageFloat) imageFloat.classList.remove('hidden');
+        if (imagePill) imagePill.classList.add('hidden');
+        if (floatImage) floatImage.classList.add('hidden');
+        if (floatSpinner) floatSpinner.classList.remove('hidden');
+        try {
+            const url = `/api/visualize/${currentJobId}`;
+            console.log('🌐 Fetching:', url);
+            const res = await fetch(url, { method: 'POST' });
+            console.log('📥 Response status:', res.status);
+            if (!res.ok) {
+                const errDetail = await res.json().catch(() => ({ detail: 'Network error' }));
+                throw new Error(errDetail.detail || `Server error ${res.status}`);
+            }
+            const data = await res.json();
+            console.log('🖼️ Image received! Length:', data.image.length);
+            if (floatImage) {
+                floatImage.src = data.image;
+                floatImage.classList.remove('hidden');
+            }
+            if (floatSpinner) floatSpinner.classList.add('hidden');
+        } catch (err) {
+            console.error('❌ Visualization flow error:', err);
+            alert(`Painting failed: ${err.message}`);
+            if (imageFloat) imageFloat.classList.add('hidden');
+        } finally {
+            visualizeBtn.disabled = false;
+            visualizeBtn.textContent = originalText;
+            console.log('🏁 Visualize flow completed.');
+        }
+    });
+}
+// Drag Logic
+let isDragging = false;
+let startX, startY, initialX, initialY;
+if (floatHeader && imageFloat) {
+    floatHeader.addEventListener('mousedown', (e) => {
+        isDragging = true;
+        startX = e.clientX;
+        startY = e.clientY;
+        initialX = imageFloat.offsetLeft;
+        initialY = imageFloat.offsetTop;
+        imageFloat.style.transition = 'none';
+    });
+}
+document.addEventListener('mousemove', (e) => {
+    if (!isDragging || !imageFloat) return;
+    const dx = e.clientX - startX;
+    const dy = e.clientY - startY;
+    imageFloat.style.left = (initialX + dx) + 'px';
+    imageFloat.style.top = (initialY + dy) + 'px';
+    imageFloat.style.bottom = 'auto'; // Remove fixed positioning
+    imageFloat.style.right = 'auto';
+});
+document.addEventListener('mouseup', () => {
+    isDragging = false;
+    if (imageFloat) imageFloat.style.transition = '';
+});
+// Minimize/Close/Download
+if (floatMinimize && imageFloat && imagePill) {
+    floatMinimize.addEventListener('click', () => {
+        imageFloat.classList.add('hidden');
+        imagePill.classList.remove('hidden');
+    });
+}
+if (imagePill && imageFloat) {
+    imagePill.addEventListener('click', () => {
+        imageFloat.classList.remove('hidden');
+        imagePill.classList.add('hidden');
+    });
+}
+if (floatClose && imageFloat && imagePill) {
+    floatClose.addEventListener('click', () => {
+        imageFloat.classList.add('hidden');
+        imagePill.classList.add('hidden');
+    });
+}
+if (floatDownload && floatImage) {
+    floatDownload.addEventListener('click', () => {
+        if (!floatImage.src) return;
+        const link = document.createElement('a');
+        link.href = floatImage.src;
+        link.download = `pundit_feynman_illustration_${currentJobId}.png`;
+        link.click();
+    });
+}
+// ── Error & Reset ──
+function showError(msg) {
+    showSection(errorSection);
+    if (errorText) errorText.textContent = msg;
+    if (codeBadge) {
+        codeBadge.textContent = 'error';
+        codeBadge.className = 'code-badge';
+    }
+    // Cleanup float on error — with null checks!
+    if (imageFloat) imageFloat.classList.add('hidden');
+    if (imagePill) imagePill.classList.add('hidden');
+}
+function resetUI() {
+    showSection(uploadSection);
+    if (fileInput) fileInput.value = '';
+    if (arxivInput) arxivInput.value = '';
+    if (codeOutput) codeOutput.textContent = '// Upload a paper to see the generated code here…';
+    if (codeBadge) {
+        codeBadge.textContent = 'waiting';
+        codeBadge.className = 'code-badge';
+    }
+    currentJobId = null;
+    if (visualizeBtn) visualizeBtn.classList.add('hidden');
+    // Cleanup float on reset
+    if (imageFloat) imageFloat.classList.add('hidden');
+    if (imagePill) imagePill.classList.add('hidden');
+}
+if (resetBtn) resetBtn.addEventListener('click', resetUI);
+if (errorResetBtn) errorResetBtn.addEventListener('click', resetUI);