update

app.py

@@ -349,380 +349,13 @@ with gr.Blocks(css="""
         font-weight: 600 !important;
         color: #374151 !important;
     }
-    
-    /* 截图工具区域样式 */
-    .screenshot-tip {
-        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
-        border: 1px solid #bae6fd !important;
-        border-radius: 8px !important;
-        padding: 12px !important;
-        margin-top: 8px !important;
-    }
-    
-    .screenshot-tip div {
-        line-height: 1.5 !important;
-    }
-    
-    /* 截图按钮特殊样式 */
-    .gr-button[data-testid="Take Screenshot"] {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-        color: white !important;
-        border: none !important;
-        font-weight: 600 !important;
-        transition: all 0.3s ease !important;
-    }
-    
-    .gr-button[data-testid="Take Screenshot"]:hover {
-        transform: translateY(-2px) !important;
-        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
-    }
-    
-    /* 全屏截图按钮样式 */
-    .gr-button:has-text("Full Screen") {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-        color: white !important;
-        border: none !important;
-        font-weight: 600 !important;
-        transition: all 0.3s ease !important;
-    }
-    
-    .gr-button:has-text("Full Screen"):hover {
-        transform: translateY(-2px) !important;
-        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
-    }
-    
-    /* 区域截图按钮样式 */
-    .gr-button:has-text("Select Area") {
-        background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
-        color: white !important;
-        border: none !important;
-        font-weight: 600 !important;
-        transition: all 0.3s ease !important;
-    }
-    
-    .gr-button:has-text("Select Area"):hover {
-        transform: translateY(-2px) !important;
-        box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4) !important;
-    }
-    
-    /* 截图工具区域容器 */
-    .screenshot-tools-container {
-        background: #f8fafc !important;
-        border: 1px solid #e2e8f0 !important;
-        border-radius: 12px !important;
-        padding: 16px !important;
-        margin-bottom: 16px !important;
-    }
 """) as demo:
     gr.Markdown("# ScreenCoder: Screenshot to Code")
     with gr.Row():
         with gr.Column(scale=1):
             gr.Markdown("## Step 1: Provide an Image")
-            
-            # 添加截图功能区域
-            with gr.Row(elem_classes=["screenshot-tools-container"]):
-                with gr.Column(scale=1):
-                    active_image = gr.Image(type="filepath", height=400)
-                    upload_button = gr.UploadButton("Click to Upload", file_types=["image"], variant="primary")
-                
-                with gr.Column(scale=1):
-                    gr.Markdown("**📸 Screenshot Tools**")
-                    with gr.Row():
-                        screenshot_btn = gr.Button("🎯 Full Screen", variant="secondary", size="sm")
-                        area_screenshot_btn = gr.Button("✂️ Select Area", variant="secondary", size="sm")
-                    gr.Markdown("""
-                    <div style="font-size: 12px; color: #666; margin-top: 8px;">
-                    💡 Click "Full Screen" to capture entire screen.
-                    <br>Click "Select Area" to choose specific region.
-                    <br>Press ESC to cancel area selection.
-                    </div>
-                    """, elem_classes=["screenshot-tip"])
-            
-            # 添加截图功能的JavaScript
-            gr.HTML("""
-            <script>
-            // 截图功能
-            async function takeScreenshot() {
-                try {
-                    // 检查浏览器是否支持截图API
-                    if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
-                        alert('Screenshot feature is not supported in this browser. Please use Chrome, Firefox, or Edge.');
-                        return;
-                    }
-                    
-                    // 请求屏幕共享权限
-                    const stream = await navigator.mediaDevices.getDisplayMedia({
-                        video: {
-                            mediaSource: 'screen',
-                            width: { ideal: 1920 },
-                            height: { ideal: 1080 }
-                        }
-                    });
-                    
-                    // 创建视频元素来捕获屏幕
-                    const video = document.createElement('video');
-                    video.srcObject = stream;
-                    video.onloadedmetadata = () => {
-                        video.play();
-                        
-                        // 创建canvas来绘制截图
-                        const canvas = document.createElement('canvas');
-                        const ctx = canvas.getContext('2d');
-                        
-                        // 设置canvas尺寸
-                        canvas.width = video.videoWidth;
-                        canvas.height = video.videoHeight;
-                        
-                        // 绘制视频帧到canvas
-                        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-                        
-                        // 停止视频流
-                        stream.getTracks().forEach(track => track.stop());
-                        
-                        // 将canvas转换为blob
-                        canvas.toBlob((blob) => {
-                            // 创建文件对象
-                            const file = new File([blob], 'screenshot.png', { type: 'image/png' });
-                            
-                            // 创建文件列表
-                            const dataTransfer = new DataTransfer();
-                            dataTransfer.items.add(file);
-                            
-                            // 找到图片上传组件并设置文件
-                            const imageInput = document.querySelector('input[type="file"]');
-                            if (imageInput) {
-                                imageInput.files = dataTransfer.files;
-                                // 触发change事件
-                                const event = new Event('change', { bubbles: true });
-                                imageInput.dispatchEvent(event);
-                            }
-                            
-                            // 显示成功消息
-                            showNotification('Screenshot captured successfully!', 'success');
-                        }, 'image/png');
-                    };
-                    
-                } catch (error) {
-                    console.error('Screenshot error:', error);
-                    if (error.name === 'NotAllowedError') {
-                        alert('Screenshot permission denied. Please allow screen sharing when prompted.');
-                    } else {
-                        alert('Failed to take screenshot: ' + error.message);
-                    }
-                }
-            }
-            
-            // 区域截图功能
-            async function takeAreaScreenshot() {
-                try {
-                    // 检查浏览器是否支持截图API
-                    if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
-                        alert('Area screenshot feature is not supported in this browser.');
-                        return;
-                    }
-                    
-                    // 请求屏幕共享权限
-                    const stream = await navigator.mediaDevices.getDisplayMedia({
-                        video: {
-                            mediaSource: 'screen',
-                            width: { ideal: 1920 },
-                            height: { ideal: 1080 }
-                        }
-                    });
-                    
-                    // 创建视频元素
-                    const video = document.createElement('video');
-                    video.srcObject = stream;
-                    video.onloadedmetadata = () => {
-                        video.play();
-                        
-                        // 创建选择区域界面
-                        createSelectionOverlay(video, stream);
-                    };
-                    
-                } catch (error) {
-                    console.error('Area screenshot error:', error);
-                    if (error.name === 'NotAllowedError') {
-                        alert('Screenshot permission denied. Please allow screen sharing when prompted.');
-                    } else {
-                        alert('Failed to take area screenshot: ' + error.message);
-                    }
-                }
-            }
-            
-            // 创建选择区域覆盖层
-            function createSelectionOverlay(video, stream) {
-                // 创建覆盖层
-                const overlay = document.createElement('div');
-                overlay.style.cssText = `
-                    position: fixed;
-                    top: 0;
-                    left: 0;
-                    width: 100vw;
-                    height: 100vh;
-                    background: rgba(0, 0, 0, 0.3);
-                    z-index: 9999;
-                    cursor: crosshair;
-                `;
-                
-                // 创建选择框
-                const selectionBox = document.createElement('div');
-                selectionBox.style.cssText = `
-                    position: absolute;
-                    border: 2px dashed #3b82f6;
-                    background: rgba(59, 130, 246, 0.1);
-                    display: none;
-                `;
-                
-                overlay.appendChild(selectionBox);
-                document.body.appendChild(overlay);
-                
-                let isSelecting = false;
-                let startX, startY;
-                
-                // 鼠标事件处理
-                overlay.addEventListener('mousedown', (e) => {
-                    isSelecting = true;
-                    startX = e.clientX;
-                    startY = e.clientY;
-                    selectionBox.style.display = 'block';
-                    selectionBox.style.left = startX + 'px';
-                    selectionBox.style.top = startY + 'px';
-                    selectionBox.style.width = '0px';
-                    selectionBox.style.height = '0px';
-                });
-                
-                overlay.addEventListener('mousemove', (e) => {
-                    if (!isSelecting) return;
-                    
-                    const currentX = e.clientX;
-                    const currentY = e.clientY;
-                    
-                    const left = Math.min(startX, currentX);
-                    const top = Math.min(startY, currentY);
-                    const width = Math.abs(currentX - startX);
-                    const height = Math.abs(currentY - startY);
-                    
-                    selectionBox.style.left = left + 'px';
-                    selectionBox.style.top = top + 'px';
-                    selectionBox.style.width = width + 'px';
-                    selectionBox.style.height = height + 'px';
-                });
-                
-                overlay.addEventListener('mouseup', (e) => {
-                    if (!isSelecting) return;
-                    isSelecting = false;
-                    
-                    const rect = selectionBox.getBoundingClientRect();
-                    captureSelectedArea(video, rect, stream);
-                    
-                    // 清理
-                    document.body.removeChild(overlay);
-                });
-                
-                // ESC键取消
-                const handleKeyDown = (e) => {
-                    if (e.key === 'Escape') {
-                        document.body.removeChild(overlay);
-                        stream.getTracks().forEach(track => track.stop());
-                        document.removeEventListener('keydown', handleKeyDown);
-                    }
-                };
-                document.addEventListener('keydown', handleKeyDown);
-            }
-            
-            // 捕获选定区域
-            function captureSelectedArea(video, rect, stream) {
-                const canvas = document.createElement('canvas');
-                const ctx = canvas.getContext('2d');
-                
-                // 设置canvas尺寸为选择区域大小
-                canvas.width = rect.width;
-                canvas.height = rect.height;
-                
-                // 绘制选定区域
-                ctx.drawImage(video, rect.left, rect.top, rect.width, rect.height, 0, 0, rect.width, rect.height);
-                
-                // 停止视频流
-                stream.getTracks().forEach(track => track.stop());
-                
-                // 转换为blob并上传
-                canvas.toBlob((blob) => {
-                    const file = new File([blob], 'area_screenshot.png', { type: 'image/png' });
-                    const dataTransfer = new DataTransfer();
-                    dataTransfer.items.add(file);
-                    
-                    const imageInput = document.querySelector('input[type="file"]');
-                    if (imageInput) {
-                        imageInput.files = dataTransfer.files;
-                        const event = new Event('change', { bubbles: true });
-                        imageInput.dispatchEvent(event);
-                    }
-                    
-                    showNotification('Area screenshot captured successfully!', 'success');
-                }, 'image/png');
-            }
-            
-            // 显示通知的函数
-            function showNotification(message, type = 'info') {
-                const notification = document.createElement('div');
-                notification.style.cssText = `
-                    position: fixed;
-                    top: 20px;
-                    right: 20px;
-                    padding: 12px 20px;
-                    border-radius: 8px;
-                    color: white;
-                    font-weight: 500;
-                    z-index: 10000;
-                    animation: slideIn 0.3s ease-out;
-                    background: ${type === 'success' ? '#10b981' : '#3b82f6'};
-                    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-                `;
-                notification.textContent = message;
-                
-                // 添加动画样式
-                const style = document.createElement('style');
-                style.textContent = `
-                    @keyframes slideIn {
-                        from { transform: translateX(100%); opacity: 0; }
-                        to { transform: translateX(0); opacity: 1; }
-                    }
-                `;
-                document.head.appendChild(style);
-                
-                document.body.appendChild(notification);
-                
-                // 3秒后自动移除
-                setTimeout(() => {
-                    notification.remove();
-                }, 3000);
-            }
-            
-            // 等待页面加载完成后绑定事件
-            document.addEventListener('DOMContentLoaded', function() {
-                // 查找截图按钮并绑定点击事件
-                const observer = new MutationObserver(function(mutations) {
-                    mutations.forEach(function(mutation) {
-                        mutation.addedNodes.forEach(function(node) {
-                            if (node.nodeType === 1) { // 元素节点
-                                const buttons = node.querySelectorAll ? node.querySelectorAll('button') : [];
-                                buttons.forEach(function(button) {
-                                    if (button.textContent.includes('Full Screen')) {
-                                        button.addEventListener('click', takeScreenshot);
-                                    } else if (button.textContent.includes('Select Area')) {
-                                        button.addEventListener('click', takeAreaScreenshot);
-                                    }
-                                });
-                            }
-                        });
-                    });
-                });
-                
-                observer.observe(document.body, { childList: true, subtree: true });
-            });
-            </script>
-            """)
+            active_image = gr.Image(type="filepath", height=400)
+            upload_button = gr.UploadButton("Click to Upload", file_types=["image"], variant="primary")
             
             gr.Markdown("## Step 2: Write Prompts (Optional)")
             with gr.Accordion("Component-specific Prompts", open=False):