Spaces:

dataera2013
/

podcraft_web_app

Sleeping

App Files Files Community

Nagesh Muralidhar commited on Mar 20

Commit

2251ba3

1 Parent(s): 8f0bc94

added static

Browse files

Files changed (3) hide show

Dockerfile +15 -20
app.py +48 -15
static/index.html +256 -0

Dockerfile CHANGED Viewed

@@ -16,31 +16,26 @@ RUN apt-get update && \
 # Copy the application code
 COPY . .
-# Execute the build frontend script to prepare frontend code
-RUN chmod +x build_frontend.sh && ./build_frontend.sh
-# Build frontend
-WORKDIR /app/frontend/podcraft
-RUN npm install && \
-    npm run build || \
-    (echo "Frontend build failed, creating dummy build directory" && \
-    mkdir -p build && \
-    echo "<html><head><title>PodCraft</title></head><body><h1>PodCraft</h1><p>Frontend not built correctly. Please check logs.</p></body></html>" > build/index.html)
-# Return to app directory and install backend dependencies
-WORKDIR /app
-RUN pip install --no-cache-dir -r requirements.txt
-# Create static directory and copy the built frontend
-RUN mkdir -p ./static && \
-    cp -r frontend/podcraft/build/* ./static/ || echo "No frontend build files to copy"
-# Verify the static files were copied
 RUN ls -la ./static && \
-    if [ -f "./static/index.html" ]; then echo "Frontend build found"; else echo "Frontend build not found"; fi
-# Create directories for temp files
-RUN mkdir -p temp_audio temp
 # Default environment variables
 ENV PORT=7860

 # Copy the application code
 COPY . .
+# Make sure static directory exists and has the index.html file
+RUN mkdir -p ./static && \
+    if [ ! -f "./static/index.html" ]; then \
+    echo "WARNING: No index.html found in static directory"; \
+    else \
+    echo "Found index.html in static directory"; \
+    fi
+# Create directories for temp files
+RUN mkdir -p temp_audio temp
+# Execute the build frontend script to prepare frontend code
+RUN chmod +x build_frontend.sh && ./build_frontend.sh || echo "Frontend build script failed but continuing"
+# Install backend dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+# Verify the static files
 RUN ls -la ./static && \
+    if [ -f "./static/index.html" ]; then echo "Frontend index.html found"; else echo "WARNING: Frontend index.html not found"; fi
 # Default environment variables
 ENV PORT=7860

app.py CHANGED Viewed

@@ -14,6 +14,33 @@ sys.path.append(os.path.abspath("backend"))
 # Create necessary directories if they don't exist
 os.makedirs("./temp_audio", exist_ok=True)
 os.makedirs("./temp", exist_ok=True)
 # Set environment variables for MongoDB connection timeout
 os.environ["MONGODB_CONNECT_TIMEOUT_MS"] = "5000"  # 5 seconds timeout
@@ -21,17 +48,16 @@ os.environ["MONGODB_SERVER_SELECTION_TIMEOUT_MS"] = "5000"  # 5 seconds timeout
 # Create a FastAPI app - either the main one or an error one
 from fastapi import FastAPI, Request
-from fastapi.responses import HTMLResponse, JSONResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.middleware.cors import CORSMiddleware
 # Check if static directory exists with index.html
-static_path = Path("./static")
-static_index_exists = static_path.exists() and (static_path / "index.html").exists()
 logger.info(f"Static path exists: {static_path.exists()}")
 if static_path.exists():
     logger.info(f"Static directory contents: {os.listdir(static_path)}")
-    logger.info(f"Static index exists: {(static_path / 'index.html').exists()}")
 try:
     # Try to import the main app
@@ -54,11 +80,12 @@ try:
     # Override the root route to serve the frontend
     @app.get("/", response_class=HTMLResponse)
     async def read_root():
-        # If static files exist, return the index.html file
-        if static_index_exists:
-            with open(static_path / "index.html") as f:
-                return f.read()
         else:
             return """
             <html>
                 <head>
@@ -87,10 +114,13 @@ try:
             """
     # Mount static files
-    if static_index_exists:
-        # Use the mount approach for static assets like CSS/JS, but not for the root path
-        logger.info("Mounting static files at /static")
-        app.mount("/static", StaticFiles(directory="./static"), name="static")
     app_to_run = app
     logger.info("Using main application")
@@ -129,9 +159,12 @@ except Exception as e:
         </html>
         """
-    # Mount static files if they exist
-    if static_index_exists:
-        error_app.mount("/static", StaticFiles(directory="./static"), name="static")
     app_to_run = error_app
     logger.info("Using error application")

 # Create necessary directories if they don't exist
 os.makedirs("./temp_audio", exist_ok=True)
 os.makedirs("./temp", exist_ok=True)
+os.makedirs("./static", exist_ok=True)
+# Check for index.html and create a simple one if it doesn't exist
+static_path = Path("./static")
+index_path = static_path / "index.html"
+if not index_path.exists():
+    logger.warning("index.html not found in static directory, creating a simple one")
+    with open(index_path, "w") as f:
+        f.write("""<!DOCTYPE html>
+<html>
+<head>
+    <title>PodCraft API</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f8f9fa; }
+        .container { max-width: 800px; padding: 2rem; background-color: white; border-radius: 0.5rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
+        h1 { color: #6366F1; }
+        pre { background-color: #f5f5f5; padding: 1rem; border-radius: 0.25rem; overflow: auto; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>PodCraft API</h1>
+        <p>The PodCraft API is running. You can access the API at <a href="/docs">/docs</a>.</p>
+        <p>API Status: <a href="/api/status">/api/status</a></p>
+    </div>
+</body>
+</html>""")
 # Set environment variables for MongoDB connection timeout
 os.environ["MONGODB_CONNECT_TIMEOUT_MS"] = "5000"  # 5 seconds timeout
 # Create a FastAPI app - either the main one or an error one
 from fastapi import FastAPI, Request
+from fastapi.responses import HTMLResponse, JSONResponse, FileResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.middleware.cors import CORSMiddleware
 # Check if static directory exists with index.html
+static_index_exists = static_path.exists() and index_path.exists()
 logger.info(f"Static path exists: {static_path.exists()}")
 if static_path.exists():
     logger.info(f"Static directory contents: {os.listdir(static_path)}")
+    logger.info(f"Static index exists: {index_path.exists()}")
 try:
     # Try to import the main app
     # Override the root route to serve the frontend
     @app.get("/", response_class=HTMLResponse)
     async def read_root():
+        # If index.html exists, return it directly using FileResponse
+        if index_path.exists():
+            logger.info(f"Serving index.html from {index_path}")
+            return FileResponse(index_path)
         else:
+            logger.warning("index.html not found, returning fallback HTML")
             return """
             <html>
                 <head>
             """
     # Mount static files
+    # First, make sure we're not serving the root path via StaticFiles
+    @app.get("/static/{path:path}")
+    async def serve_static(path: str):
+        file_path = static_path / path
+        if file_path.exists() and file_path.is_file():
+            return FileResponse(file_path)
+        return {"error": "File not found"}
     app_to_run = app
     logger.info("Using main application")
         </html>
         """
+    @error_app.get("/static/{path:path}")
+    async def serve_static(path: str):
+        file_path = static_path / path
+        if file_path.exists() and file_path.is_file():
+            return FileResponse(file_path)
+        return {"error": "File not found"}
     app_to_run = error_app
     logger.info("Using error application")

static/index.html ADDED Viewed

	@@ -0,0 +1,256 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PodCraft - AI Podcast Generator</title>
+    <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>