yichael
/
AIServer


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 服务</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        .navbar {
            display: flex;
            background: #333;
            padding: 0;
        }

        .navbar a {
            flex: 1;
            color: white;
            text-align: center;
            padding: 15px 20px;
            text-decoration: none;
            transition: background 0.3s;
            cursor: pointer;
        }

        .navbar a:hover,
        .navbar a.active {
            background: #555;
        }

        .view-container {
            flex: 1;
            overflow: auto;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 20px;
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <a href="#" data-view="text2text.html">文生文（text2text）</a>
        <a href="#" data-view="img2text.html">图生文（img2text）</a>
        <a href="#" data-view="img2img.html">图生图（img2img）</a>
        <a href="#" data-view="text2img.html">文生图（text2img）</a>
    </nav>
    <div class="view-container" id="viewContainer"></div>

    <script>
        const viewContainer = document.getElementById('viewContainer');
        const navLinks = document.querySelectorAll('.navbar a');

        const loadedStyles = new Set();

        async function loadView(viewFile) {
            try {
                const response = await fetch(viewFile);
                const html = await response.text();
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');
                
                document.querySelectorAll('style[data-view-style]').forEach(s => s.remove());
                loadedStyles.clear();
                
                viewContainer.innerHTML = '';
                
                const bodyContent = doc.body.innerHTML;
                const styles = doc.head.querySelectorAll('style');
                const scripts = doc.body.querySelectorAll('script');
                
                styles.forEach(style => {
                    let styleText = style.textContent;
                    styleText = styleText.replace(/body\s*\{[^}]*\}/g, '');
                    if (styleText.trim() && !loadedStyles.has(styleText)) {
                        const styleEl = document.createElement('style');
                        styleEl.setAttribute('data-view-style', 'true');
                        styleEl.textContent = styleText;
                        document.head.appendChild(styleEl);
                        loadedStyles.add(styleText);
                    }
                });
                
                viewContainer.innerHTML = bodyContent;
                
                scripts.forEach(script => {
                    const scriptEl = document.createElement('script');
                    if (script.src) {
                        scriptEl.src = script.src;
                    } else {
                        scriptEl.textContent = script.textContent;
                    }
                    viewContainer.appendChild(scriptEl);
                });
            } catch (error) {
                viewContainer.innerHTML = `<div style="padding: 20px;">加载失败: ${error.message}</div>`;
            }
        }

        navLinks.forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                navLinks.forEach(l => l.classList.remove('active'));
                link.classList.add('active');
                loadView(link.dataset.view);
            });
        });

        loadView('text2text.html');
        navLinks[0].classList.add('active');
    </script>
</body>
</html>