Spaces:
Paused
Paused
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AGI Telecom Interface</title> | |
| <style> | |
| :root { | |
| --primary: #3498db; | |
| --primary-dark: #2980b9; | |
| --success: #2ecc71; | |
| --warning: #f39c12; | |
| --danger: #e74c3c; | |
| --light: #f8f9fa; | |
| --dark: #343a40; | |
| --gray: #6c757d; | |
| --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| --transition: all 0.3s ease; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| line-height: 1.6; | |
| background-color: #f5f7fa; | |
| color: var(--dark); | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .container { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| header { | |
| background-color: white; | |
| padding: 20px; | |
| box-shadow: var(--shadow); | |
| position: relative; | |
| z-index: 100; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .logo h1 { | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| margin: 0; | |
| } | |
| .logo-icon { | |
| width: 36px; | |
| height: 36px; | |
| background-color: var(--primary); | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| } | |
| main { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 20px; | |
| margin-top: 20px; | |
| } | |
| @media (min-width: 768px) { | |
| main { | |
| grid-template-columns: 3fr 1fr; | |
| } | |
| } | |
| .card { | |
| background-color: white; | |
| border-radius: 10px; | |
| box-shadow: var(--shadow); | |
| overflow: hidden; | |
| } | |
| .card-header { | |
| padding: 15px 20px; | |
| background-color: var(--light); | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.1); | |
| font-weight: 600; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .card-body { | |
| padding: 20px; | |
| } | |
| .conversation { | |
| height: 400px; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| padding: 15px; | |
| } | |
| .message { | |
| max-width: 80%; | |
| padding: 12px 15px; | |
| border-radius: 18px; | |
| position: relative; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .user-message { | |
| background-color: var(--primary); | |
| color: white; | |
| align-self: flex-end; | |
| border-bottom-right-radius: 5px; | |
| } | |
| .bot-message { | |
| background-color: var(--light); | |
| align-self: flex-start; | |
| border-bottom-left-radius: 5px; | |
| } | |
| .system-message { | |
| align-self: center; | |
| background-color: rgba(0, 0, 0, 0.05); | |
| padding: 8px 12px; | |
| border-radius: 10px; | |
| font-size: 0.8rem; | |
| color: var(--gray); | |
| max-width: 90%; | |
| } | |
| .message-input { | |
| display: flex; | |
| gap: 10px; | |
| margin-top: 15px; | |
| } | |
| .message-input input { | |
| flex: 1; | |
| padding: 12px 15px; | |
| border: 1px solid rgba(0, 0, 0, 0.1); | |
| border-radius: 10px; | |
| font-size: 1rem; | |
| outline: none; | |
| transition: var(--transition); | |
| } | |
| .message-input input:focus { | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); | |
| } | |
| .btn { | |
| padding: 12px 20px; | |
| background-color: var(--primary); | |
| color: white; | |
| border: none; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 5px; | |
| } | |
| .btn:hover { | |
| background-color: var(--primary-dark); | |
| } | |
| .btn-success { | |
| background-color: var(--success); | |
| } | |
| .btn-success:hover { | |
| background-color: #27ae60; | |
| } | |
| .btn-danger { | |
| background-color: var(--danger); | |
| } | |
| .btn-danger:hover { | |
| background-color: #c0392b; | |
| } | |
| .btn-icon { | |
| padding: 12px; | |
| } | |
| .call-controls { | |
| display: flex; | |
| gap: 10px; | |
| margin-top: 20px; | |
| } | |
| .call-controls .btn { | |
| flex: 1; | |
| } | |
| .status { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-bottom: 15px; | |
| } | |
| .status-indicator { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| } | |
| .status-disconnected { | |
| background-color: var(--gray); | |
| } | |
| .status-connecting { | |
| background-color: var(--warning); | |
| animation: pulse 1.5s infinite; | |
| } | |
| .status-connected { | |
| background-color: var(--success); | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.6; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.6; } | |
| } | |
| .audio-visualizer { | |
| height: 60px; | |
| display: flex; | |
| align-items: center; | |
| gap: 3px; | |
| padding: 0 10px; | |
| } | |
| .audio-bar { | |
| flex: 1; | |
| background-color: var(--primary); | |
| height: 5px; | |
| max-height: 50px; | |
| border-radius: 2px; | |
| transition: height 0.1s ease; | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 10px; | |
| } | |
| .stat-card { | |
| background-color: var(--light); | |
| border-radius: 8px; | |
| padding: 15px; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .stat-label { | |
| font-size: 0.8rem; | |
| color: var(--gray); | |
| } | |
| .stat-value { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| margin-top: 5px; | |
| } | |
| .tabs { | |
| display: flex; | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.1); | |
| } | |
| .tab { | |
| padding: 10px 15px; | |
| cursor: pointer; | |
| border-bottom: 2px solid transparent; | |
| transition: var(--transition); | |
| } | |
| .tab.active { | |
| border-bottom-color: var(--primary); | |
| color: var(--primary); | |
| font-weight: 500; | |
| } | |
| .tab:hover { | |
| background-color: rgba(0, 0, 0, 0.02); | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .icon { | |
| display: inline-block; | |
| width: 20px; | |
| height: 20px; | |
| stroke-width: 0; | |
| stroke: currentColor; | |
| fill: currentColor; | |
| } | |
| .file-upload { | |
| display: none; | |
| } | |
| .upload-btn { | |
| display: inline-block; | |
| margin-bottom: 15px; | |
| } | |
| .gradio-link { | |
| text-align: center; | |
| margin-top: 20px; | |
| padding: 15px; | |
| background-color: var(--light); | |
| border-radius: 10px; | |
| } | |
| .gradio-link a { | |
| color: var(--primary); | |
| text-decoration: none; | |
| font-weight: 500; | |
| } | |
| .gradio-link a:hover { | |
| text-decoration: underline; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="container"> | |
| <div class="logo"> | |
| <div class="logo-icon">AI</div> | |
| <h1>AGI Telecom Interface</h1> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="container"> | |
| <div class="gradio-link"> | |
| <p>The full interactive demo is available in the Gradio interface. <a href="/gradio">Open Gradio Interface</a></p> | |
| </div> | |
| <main> | |
| <div class="left-section"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <div>Conversation</div> | |
| <div class="status"> | |
| <div class="status-indicator status-disconnected" id="connectionStatus"></div> | |
| <span id="statusText">Disconnected</span> | |
| </div> | |
| </div> | |
| <div class="card-body"> | |
| <div class="audio-visualizer" id="audioVisualizer"> | |
| <div class="audio-bar" style="height: 10px;"></div> | |
| <div class="audio-bar" style="height: 15px;"></div> | |
| <div class="audio-bar" style="height: 20px;"></div> | |
| <div class="audio-bar" style="height: 25px;"></div> | |
| <div class="audio-bar" style="height: 18px;"></div> | |
| <div class="audio-bar" style="height: 12px;"></div> | |
| <div class="audio-bar" style="height: 8px;"></div> | |
| <div class="audio-bar" style="height: 15px;"></div> | |
| <div class="audio-bar" style="height: 22px;"></div> | |
| <div class="audio-bar" style="height: 17px;"></div> | |
| <div class="audio-bar" style="height: 10px;"></div> | |
| <div class="audio-bar" style="height: 7px;"></div> | |
| <div class="audio-bar" style="height: 12px;"></div> | |
| <div class="audio-bar" style="height: 18px;"></div> | |
| <div class="audio-bar" style="height: 15px;"></div> | |
| <div class="audio-bar" style="height: 10px;"></div> | |
| <div class="audio-bar" style="height: 8px;"></div> | |
| <div class="audio-bar" style="height: 5px;"></div> | |
| <div class="audio-bar" style="height: 10px;"></div> | |
| <div class="audio-bar" style="height: 15px;"></div> | |
| </div> | |
| <div class="conversation" id="conversation"> | |
| <div class="bot-message message">Hello! I'm your AGI assistant. How can I help you today?</div> | |
| <div class="system-message">This is a demo version. For the interactive experience, please use the Gradio interface.</div> | |
| </div> | |
| <div class="message-input"> | |
| <input type="text" placeholder="Type your message..." id="messageInput" disabled> | |
| <button class="btn btn-icon" id="micButton" disabled> | |
| <svg class="icon" viewBox="0 0 24 24"> | |
| <path d="M12 2a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V5a3 3 0 0 1 3-3zm7 9a1 1 0 0 1 1 1 8 8 0 0 1-16 0 1 1 0 0 1 2 0 6 6 0 1 0 12 0 1 1 0 0 1 1-1z"/> | |
| </svg> | |
| </button> | |
| <button class="btn" id="sendButton" disabled>Send</button> | |
| </div> | |
| <div class="call-controls"> | |
| <button class="btn btn-success" id="startCallButton" disabled> | |
| <svg class="icon" viewBox="0 0 24 24"> | |
| <path d="M20 15.5c-1.2 0-2.4-.2-3.6-.6-.3-.1-.7 0-1 .2l-2.5 2.5c-2.8-1.4-5.1-3.8-6.6-6.6l2.5-2.5c.3-.3.4-.7.2-1-.3-1.1-.5-2.3-.5-3.5 0-.6-.4-1-1-1H4c-.6 0-1 .4-1 1 0 9.4 7.6 17 17 17 .6 0 1-.4 1-1v-3.5c0-.6-.4-1-1-1z"/> | |
| </svg> | |
| Start Call | |
| </button> | |
| <button class="btn btn-danger" id="endCallButton" disabled> | |
| <svg class="icon" viewBox="0 0 24 24"> | |
| <path d="M21 6l-18 18m0-18l18 18"/> | |
| </svg> | |
| End Call | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="right-section"> | |
| <div class="card"> | |
| <div class="card-header">Information</div> | |
| <div class="card-body"> | |
| <p>This is a static preview of the AGI Telecom Interface. For a fully interactive experience, please use the Gradio interface.</p> | |
| <p style="margin-top: 15px;">The complete interface includes:</p> | |
| <ul style="margin-left: 20px; margin-top: 10px;"> | |
| <li>Real-time voice interaction</li> | |
| <li>Text-based messaging</li> | |
| <li>Session management</li> | |
| <li>Call statistics</li> | |
| </ul> | |
| <div style="margin-top: 20px;"> | |
| <a href="/gradio" class="btn" style="text-decoration: none; display: inline-block;"> | |
| Open Gradio Interface | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| // This is a static preview only | |
| // For the full interactive experience, please use the Gradio interface | |
| </script> | |
| </body> | |
| </html> |