update

app.py

@@ -349,13 +349,380 @@ 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")
-            active_image = gr.Image(type="filepath", height=400)
-            upload_button = gr.UploadButton("Click to Upload", file_types=["image"], variant="primary")
+            
+            # 添加截图功能区域
+            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>
+            """)
             
             gr.Markdown("## Step 2: Write Prompts (Optional)")
             with gr.Accordion("Component-specific Prompts", open=False):
@@ -379,9 +746,9 @@ with gr.Blocks(css="""
                     html_preview = gr.HTML(label="Rendered HTML", show_label=False)
                 with gr.TabItem("Preview"):
                     with gr.Row():
-                        scale_slider_with_placeholder = gr.Slider(0.2, 1.5, value=0.55, step=0.05, label="🔍 Zoom")
-                        width_slider_with_placeholder = gr.Slider(400, 2000, value=1920, step=100, label="📏 Canvas Width (px)")
-                        height_slider_with_placeholder = gr.Slider(300, 1200, value=1080, step=50, label="📐 Canvas Height (px)")
+                        scale_slider_with_placeholder = gr.Slider(0.2, 1.5, value=0.55, step=0.05, label="Zoom")
+                        width_slider_with_placeholder = gr.Slider(400, 2000, value=1920, step=100, label="Canvas Width (px)")
+                        height_slider_with_placeholder = gr.Slider(300, 1200, value=1080, step=50, label="Canvas Height (px)")
                     
                     html_preview_with_placeholder = gr.HTML(label="Rendered HTML", show_label=False)
                 with gr.TabItem("Code"):