Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <link rel="icon" type="image/svg+xml" href="/vite.svg" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PodCraft - AI Podcast Generator</title> | |
| <script type="text/javascript"> | |
| // Set the API base URL dynamically based on the current domain | |
| window.API_BASE_URL = ''; // Empty string means use current domain | |
| // Override fetch to rewrite localhost:8000 URLs | |
| const originalFetch = window.fetch; | |
| window.fetch = function(url, options) { | |
| if (typeof url === 'string' && url.includes('localhost:8000')) { | |
| // Replace localhost:8000 with current origin (empty string) | |
| url = url.replace('http://localhost:8000', ''); | |
| } | |
| return originalFetch.call(this, url, options); | |
| }; | |
| </script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" /> | |
| <style> | |
| body { | |
| margin: 0; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', | |
| 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| background-color: #1a1a2e; | |
| color: #ffffff; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| .App { | |
| text-align: center; | |
| } | |
| .App-header { | |
| background-color: #0f0f1a; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: flex-start; | |
| padding: 2rem; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| } | |
| .logo i { | |
| font-size: 3rem; | |
| color: #6366F1; | |
| margin-right: 1rem; | |
| } | |
| .logo h1 { | |
| font-size: 3rem; | |
| margin: 0; | |
| background: linear-gradient(90deg, #6366F1, #8B5CF6); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .tagline { | |
| font-size: 1.5rem; | |
| margin-bottom: 3rem; | |
| color: #94a3b8; | |
| } | |
| .status-container { | |
| width: 100%; | |
| max-width: 800px; | |
| margin-bottom: 3rem; | |
| } | |
| .status-card { | |
| background-color: #1e1e2d; | |
| border-radius: 0.5rem; | |
| padding: 1.5rem; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .status-header { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| } | |
| .status-header i { | |
| font-size: 1.5rem; | |
| color: #6366F1; | |
| margin-right: 0.5rem; | |
| } | |
| .status-header h3 { | |
| margin: 0; | |
| font-size: 1.2rem; | |
| } | |
| .status-content { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .status-indicator { | |
| padding: 0.5rem 1.5rem; | |
| border-radius: 2rem; | |
| font-weight: bold; | |
| margin-bottom: 1rem; | |
| } | |
| .status-indicator.checking { | |
| background-color: #374151; | |
| color: #d1d5db; | |
| } | |
| .status-indicator.online { | |
| background-color: #065f46; | |
| color: #a7f3d0; | |
| } | |
| .status-indicator.offline { | |
| background-color: #991b1b; | |
| color: #fecaca; | |
| } | |
| .status-message { | |
| font-style: italic; | |
| color: #94a3b8; | |
| } | |
| .features { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 2rem; | |
| margin-bottom: 3rem; | |
| width: 100%; | |
| max-width: 1000px; | |
| } | |
| .feature { | |
| background-color: #1e1e2d; | |
| border-radius: 0.5rem; | |
| padding: 1.5rem; | |
| width: 100%; | |
| max-width: 300px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| transition: transform 0.3s ease; | |
| } | |
| .feature:hover { | |
| transform: translateY(-5px); | |
| } | |
| .feature i { | |
| font-size: 2.5rem; | |
| color: #8B5CF6; | |
| margin-bottom: 1rem; | |
| } | |
| .feature h3 { | |
| margin: 0; | |
| margin-bottom: 0.5rem; | |
| font-size: 1.2rem; | |
| } | |
| .feature p { | |
| margin: 0; | |
| color: #94a3b8; | |
| font-size: 0.9rem; | |
| } | |
| .note { | |
| margin-top: 2rem; | |
| padding: 1rem; | |
| background-color: #1e1e2d; | |
| border-radius: 0.5rem; | |
| width: 100%; | |
| max-width: 800px; | |
| } | |
| .note p { | |
| margin: 0.5rem 0; | |
| color: #94a3b8; | |
| font-size: 0.9rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="App"> | |
| <header class="App-header"> | |
| <div class="logo"> | |
| <i class="fas fa-microphone-alt"></i> | |
| <h1>PodCraft</h1> | |
| </div> | |
| <p class="tagline">AI-Powered Podcast Generator</p> | |
| <div class="status-container"> | |
| <div class="status-card"> | |
| <div class="status-header"> | |
| <i class="fas fa-server"></i> | |
| <h3>API Status</h3> | |
| </div> | |
| <div class="status-content"> | |
| <div id="status-indicator" class="status-indicator checking"> | |
| Checking... | |
| </div> | |
| <p id="status-message" class="status-message"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="features"> | |
| <div class="feature"> | |
| <i class="fas fa-robot"></i> | |
| <h3>AI Debate</h3> | |
| <p>Create engaging debates between AI personalities</p> | |
| </div> | |
| <div class="feature"> | |
| <i class="fas fa-podcast"></i> | |
| <h3>Podcast Generation</h3> | |
| <p>Convert debates into audio podcasts</p> | |
| </div> | |
| <div class="feature"> | |
| <i class="fas fa-cogs"></i> | |
| <h3>Workflow Editor</h3> | |
| <p>Customize the podcast creation process</p> | |
| </div> | |
| </div> | |
| <div class="note"> | |
| <p>Note: This is a simplified UI for the application.</p> | |
| <p>Access the API at <a href="/docs" style="color: #8B5CF6;">/docs</a> for full functionality.</p> | |
| <p>Check API status at <a href="/api/status" style="color: #8B5CF6;">/api/status</a>.</p> | |
| </div> | |
| </header> | |
| </div> | |
| <script> | |
| // Check API status on load | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const statusIndicator = document.getElementById('status-indicator'); | |
| const statusMessage = document.getElementById('status-message'); | |
| fetch('/api/status') | |
| .then(response => response.json()) | |
| .then(data => { | |
| statusIndicator.className = 'status-indicator online'; | |
| statusIndicator.textContent = 'Online'; | |
| statusMessage.textContent = data.message || 'API is running'; | |
| }) | |
| .catch(error => { | |
| statusIndicator.className = 'status-indicator offline'; | |
| statusIndicator.textContent = 'Offline'; | |
| statusMessage.textContent = 'Could not connect to API'; | |
| console.error('API Error:', error); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |