import gradio as gr
import requests
import time
import socket

def check_url_status():
    """检查目标URL的状态"""
    target_url = "http://47.95.6.204:51000/"
    
    # 首先检查端口是否开放
    try:
        sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
        sock.settimeout(5)
        result = sock.connect_ex(('47.95.6.204', 51000))

        sock.close()
        if result != 0:
            return f"❌ 端口连接失败: 无法连接到 47.95.6.204:51000 (端口可能未开放)"
    except Exception as e:
        return f"❌ 网络错误: {str(e)}"
    
    # 然后尝试HTTP请求
    try:
        response = requests.get(target_url, timeout=10)
        return f"✅ URL状态: {response.status_code} - 可访问"
    except requests.exceptions.ConnectTimeout:
        return f"❌ 连接超时: 服务器响应时间过长"
    except requests.exceptions.ConnectionError:
        return f"❌ 连接错误: 无法连接到服务器"
    except Exception as e:
        return f"❌ URL错误: {str(e)}"

def ping_server():
    """简单的服务器连通性测试"""
    try:
        import subprocess
        result = subprocess.run(['ping', '-n', '2', '47.95.6.204'], 
                              capture_output=True, text=True, timeout=10)
        if result.returncode == 0:
            return "✅ 服务器IP可达"
        else:
            return "❌ 服务器IP不可达"
    except Exception as e:
        return f"❌ Ping测试失败: {str(e)}"

def create_webpage_display():
    """创建显示指定网页的HTML内容"""
    # 添加详细的调试信息
    debug_info = f"调试时间: {time.strftime('%Y-%m-%d %H:%M:%S')}<br>"
    debug_info += f"目标URL: http://47.95.6.204:51000/<br>"
    debug_info += f"网络连通性: {ping_server()}<br>"
    debug_info += f"服务状态: {check_url_status()}<br><br>"
    
    iframe_html = f'''
    <div style="border: 2px solid #ccc; padding: 10px; margin: 10px 0;">
        <h3>🔍 详细诊断信息:</h3>
        <div style="background: #f8f9fa; padding: 10px; border-radius: 5px; font-family: monospace;">
            {debug_info}
        </div>
        
        <h3>📋 可能的解决方案:</h3>
        <div style="background: #fff3cd; padding: 10px; border-radius: 5px; border-left: 4px solid #ffc107;">
            <p><strong>如果服务器不可达，可以尝试以下方案：</strong></p>
            <ol>
                <li>检查服务器是否正在运行</li>
                <li>确认端口47.95.6.204:51000是否开放</li>
                <li>检查防火墙设置</li>
                <li>使用下面的演示URL进行测试</li>
            </ol>
        </div>
        
        <h3>🌐 方式1: 直接链接测试</h3>
        <p><a href="http://47.95.6.204:51000/" target="_blank" style="font-size: 18px; color: blue;">🔗 点击测试原始链接</a></p>
        <p><a href="https://httpbin.org/html" target="_blank" style="font-size: 18px; color: green;">🔗 点击测试演示链接 (httpbin.org)</a></p>
        
        <h3>🖼️ 方式2: iframe嵌入测试</h3>
        <div style="margin: 10px 0;">
            <p><strong>原始URL iframe:</strong></p>
            <div style="width: 100%; height: 300px; border: 2px solid #dc3545; background: #f8d7da;">
                <iframe src="http://47.95.6.204:51000/" 
                        width="100%" 
                        height="100%" 
                        frameborder="1" 
                        allowfullscreen>
                    <p style="color: red; text-align: center; padding: 50px;">
                        ⚠️ 原始服务器无法访问
                    </p>
                </iframe>
            </div>
        </div>
        
        <div style="margin: 10px 0;">
            <p><strong>演示URL iframe (应该可以正常显示):</strong></p>
            <div style="width: 100%; height: 300px; border: 2px solid #28a745;">
                <iframe src="https://httpbin.org/html" 
                        width="100%" 
                        height="100%" 
                        frameborder="1" 
                        allowfullscreen>
                    <p>演示iframe加载失败</p>
                </iframe>
            </div>
        </div>
        
        <h3>📊 技术说明</h3>
        <div style="background: #e7f3ff; padding: 10px; border-radius: 5px; border-left: 4px solid #007bff;">
            <p><strong>在Hugging Face Spaces上部署时需要注意：</strong></p>
            <ul>
                <li>HF Spaces运行在HTTPS环境中，可能无法加载HTTP内容</li>
                <li>某些网站设置了X-Frame-Options禁止iframe嵌入</li>
                <li>需要确保目标服务器对外开放且稳定运行</li>
                <li>建议使用HTTPS协议的目标URL</li>
            </ul>
        </div>
    </div>
    '''
    return iframe_html

# 创建 Gradio 界面
with gr.Blocks(title="网页显示器", theme=gr.themes.Soft()) as demo:
    gr.Markdown("# 🌐 网页内容显示器")
    gr.Markdown("**目标**: 显示来自 `http://47.95.6.204:51000/` 的网页内容")
    
    with gr.Tab("📋 诊断信息"):
        # 显示网页内容
        webpage_html = gr.HTML(value=create_webpage_display())
        
        # 添加刷新按钮
        refresh_btn = gr.Button("🔄 刷新诊断", variant="primary")
        refresh_btn.click(fn=create_webpage_display, outputs=webpage_html)
    
    with gr.Tab("🔧 备用方案"):
        gr.Markdown("### 如果原始服务器无法访问，可以尝试以下方案：")
        
        # 添加获取网页源码的功能
        def get_webpage_content():
            try:
                response = requests.get("http://47.95.6.204:51000/", timeout=5)
                content = response.text
                # 简单处理HTML内容
                import re
                content = re.sub(r'<script.*?</script>', '', content, flags=re.DOTALL)
                return f"<div style='border: 1px solid #28a745; padding: 10px; max-height: 400px; overflow-y: auto; background: #f8f9fa;'><h4>✅ 网页源码获取成功:</h4><pre style='white-space: pre-wrap; font-size: 12px;'>{content[:3000]}{'...' if len(content) > 3000 else ''}</pre></div>"
            except Exception as e:
                return f"<div style='border: 1px solid #dc3545; padding: 10px; background: #f8d7da; color: #721c24;'><h4>❌ 获取失败:</h4><p>{str(e)}</p><p><strong>建议:</strong></p><ul><li>检查服务器是否运行</li><li>确认网络连接</li><li>尝试在浏览器中直接访问URL</li></ul></div>"
        
        content_btn = gr.Button("📄 尝试获取网页源码", variant="secondary")
        content_output = gr.HTML()
        content_btn.click(fn=get_webpage_content, outputs=content_output)
        
        gr.Markdown("---")
        
        # 添加演示功能
        def show_demo_content():
            demo_html = '''
            <div style="border: 2px solid #28a745; padding: 20px; border-radius: 10px; background: #d4edda;">
                <h3>🎉 演示网页内容</h3>
                <p>这是一个演示，说明iframe功能正常工作。</p>
                <div style="background: white; padding: 15px; border-radius: 5px; margin: 10px 0;">
                    <h4>如果你的服务器恢复，应该显示类似的内容：</h4>
                    <iframe src="https://example.com" width="100%" height="300" frameborder="1"></iframe>
                </div>
                <p><strong>部署到Hugging Face时注意:</strong></p>
                <ul>
                    <li>确保你的服务器URL可以从公网访问</li>
                    <li>使用HTTPS协议更安全</li>
                    <li>检查服务器的CORS设置</li>
                </ul>
            </div>
            '''
            return demo_html
        
        demo_btn = gr.Button("🎬 显示演示内容", variant="secondary")
        demo_output = gr.HTML()
        demo_btn.click(fn=show_demo_content, outputs=demo_output)

# 启动应用
if __name__ == "__main__":
    demo.launch()