Spaces:

mistpe
/

AMCI

Running

App Files Files Community

mistpe commited on Feb 8, 2025

Commit

210d4e9

verified ·

1 Parent(s): 0e2d960

Create index.html

Browse files

Files changed (1) hide show

index.html +300 -0

index.html ADDED Viewed

	@@ -0,0 +1,300 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Model Comparison Interface</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            background: linear-gradient(135deg, #F0F4FF 0%, #E6E9FF 100%);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 1.5rem;
+            color: #1E293B;
+        }
+        .container {
+            width: 95%;
+            max-width: 1400px;
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 24px;
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+            backdrop-filter: blur(10px);
+        }
+        .header {
+            padding: 1.5rem 2rem;
+            background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
+            border-bottom: 1px solid #E2E8F0;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 2rem;
+        }
+        .title-group {
+            flex-shrink: 1;
+            min-width: 0;
+        }
+        .title {
+            font-size: 1.5rem;
+            font-weight: 700;
+            margin-bottom: 0.25rem;
+            background: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .subtitle {
+            color: #64748B;
+            font-size: 0.9rem;
+        }
+        .model-selector {
+            display: flex;
+            gap: 0.75rem;
+            flex-shrink: 0;
+        }
+        .model-button {
+            position: relative;
+            padding: 0.75rem 1.25rem;
+            background: white;
+            border: 1px solid #E2E8F0;
+            border-radius: 12px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            min-width: 200px;
+        }
+        .model-button:hover:not(.active) {
+            background: #F8FAFC;
+            border-color: #CBD5E1;
+        }
+        .model-button.active {
+            background: #F0F7FF;
+            border-color: #3B82F6;
+        }
+        .model-icon {
+            flex-shrink: 0;
+        }
+        .model-icon svg {
+            width: 20px;
+            height: 20px;
+            stroke: #64748B;
+            stroke-width: 2;
+            transition: stroke 0.3s ease;
+        }
+        .model-button.active .model-icon svg {
+            stroke: #3B82F6;
+        }
+        .model-info {
+            text-align: left;
+        }
+        .model-title {
+            font-weight: 600;
+            font-size: 0.9rem;
+            color: #1E293B;
+            margin-bottom: 0.125rem;
+        }
+        .model-subtitle {
+            font-size: 0.75rem;
+            color: #64748B;
+        }
+        .content {
+            height: calc(90vh - 90px);
+            position: relative;
+            background: white;
+        }
+        .iframe-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: none;
+            padding: 0.5rem;
+        }
+        .iframe-container.active {
+            display: block;
+            animation: fadeIn 0.3s ease;
+        }
+        iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+            border-radius: 12px;
+            background: white;
+        }
+        @media (max-width: 768px) {
+    .container {
+        padding: 0;
+    }
+    .header {
+        padding: 1rem;
+        flex-direction: column;
+        gap: 1rem;
+    }
+    .title-group {
+        text-align: center;
+    }
+    .model-selector {
+        width: 100%;
+        justify-content: space-between;
+        gap: 0.1rem;
+    }
+    .model-button {
+        width: 17%;
+        min-width: unset;
+        padding: 0.75rem 0.5rem;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+    .model-button:not(.active) .model-info {
+        display: none;
+    }
+    .model-button.active {
+        width: auto;
+        flex-direction: row;
+        padding: 0.75rem 1rem;
+    }
+    .model-icon {
+        margin: 0;
+    }
+    .content {
+        height: calc(90vh - 160px);
+    }
+}
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(5px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header class="header">
+            <div class="title-group">
+                <h1 class="title">AI模型深度思维能力对比实验平台</h1>
+                <p class="subtitle">探索不同配置下的模型推理与问题解决能力</p>
+            </div>
+            <div class="model-selector">
+                <button class="model-button active" onclick="switchModel(0)">
+                    <div class="model-icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                            <path d="M12 2a9 9 0 0 1 9 9c0 3.18-2.32 6.72-5.33 8.47a.2.2 0 0 1-.27-.19V16a4 4 0 0 0-6.8-2.87A4 4 0 0 0 10 20h4a2 2 0 0 1 2 2v.5a.2.2 0 0 1-.27.19A10.32 10.32 0 0 1 12 21a9 9 0 0 1 0-18z"/>
+                            <path d="M12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/>
+                        </svg>
+                    </div>
+                    <div class="model-info">
+                        <div class="model-title">双模型深度思考</div>
+                        <div class="model-subtitle">R1 + gpt-4o-mini</div>
+                    </div>
+                </button>
+                <button class="model-button" onclick="switchModel(1)">
+                    <div class="model-icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                            <path d="M6 3v12"/>
+                            <path d="M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
+                            <path d="M6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
+                            <path d="M15 6a9 9 0 0 0-9 9"/>
+                        </svg>
+                    </div>
+                    <div class="model-info">
+                        <div class="model-title">思维链引导</div>
+                        <div class="model-subtitle">gpt-4o-mini + 提示词</div>
+                    </div>
+                </button>
+                <button class="model-button" onclick="switchModel(2)">
+                    <div class="model-icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
+                        </svg>
+                    </div>
+                    <div class="model-info">
+                        <div class="model-title">基准模型</div>
+                        <div class="model-subtitle">标准 gpt-4o-mini</div>
+                    </div>
+                </button>
+            </div>
+        </header>
+        <div class="content">
+            <div class="iframe-container active">
+                <iframe
+                    src="https://mistpe-fastgpt.hf.space/chat/share?shareId=8m4krw4h6vy0kdqsi59ougyg"
+                    allow="*">
+                </iframe>
+            </div>
+            <div class="iframe-container">
+                <iframe
+                    src="https://mistpe-fastgpt.hf.space/chat/share?shareId=r7nbj4t788ewjk5myjiuyoo3"
+                    allow="*">
+                </iframe>
+            </div>
+            <div class="iframe-container">
+                <iframe
+                    src="https://mistpe-fastgpt.hf.space/chat/share?shareId=ynkbojkhm7dzokc518bw7vc3"
+                    allow="*">
+                </iframe>
+            </div>
+        </div>
+    </div>
+    <script>
+        function switchModel(index) {
+            const buttons = document.querySelectorAll('.model-button');
+            const wasActive = buttons[index].classList.contains('active');
+            buttons.forEach(button => button.classList.remove('active'));
+            if (!wasActive) {
+                buttons[index].classList.add('active');
+            }
+            const iframes = document.querySelectorAll('.iframe-container');
+            iframes.forEach(iframe => iframe.classList.remove('active'));
+            iframes[index].classList.add('active');
+        }
+    </script>
+</body>
+</html>