Spaces:

dataera2013
/

podcraft_web_app

Sleeping

App Files Files Community

Nagesh Muralidhar commited on Mar 20

Commit

8f0bc94

1 Parent(s): 1bcce96

adding app.py

Browse files

Files changed (3) hide show

Dockerfile +5 -1
app.py +85 -39
build_frontend.sh +224 -12

Dockerfile CHANGED Viewed

@@ -25,7 +25,7 @@ RUN npm install && \
     npm run build || \
     (echo "Frontend build failed, creating dummy build directory" && \
     mkdir -p build && \
-    echo "<html><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
@@ -35,6 +35,10 @@ RUN pip install --no-cache-dir -r requirements.txt
 RUN mkdir -p ./static && \
     cp -r frontend/podcraft/build/* ./static/ || echo "No frontend build files to copy"
 # Create directories for temp files
 RUN mkdir -p temp_audio temp

     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 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

app.py CHANGED Viewed

@@ -19,11 +19,25 @@ os.makedirs("./temp", exist_ok=True)
 os.environ["MONGODB_CONNECT_TIMEOUT_MS"] = "5000"  # 5 seconds timeout
 os.environ["MONGODB_SERVER_SELECTION_TIMEOUT_MS"] = "5000"  # 5 seconds timeout
 try:
-    # Set up CORS headers to allow frontend to access backend
     from backend.app.main import app
-    from fastapi.middleware.cors import CORSMiddleware
     app.add_middleware(
         CORSMiddleware,
         allow_origins=["*"],
@@ -31,31 +45,59 @@ try:
         allow_methods=["*"],
         allow_headers=["*"],
     )
-    # Serve static files from the frontend build directory
-    from fastapi.staticfiles import StaticFiles
-    # Check if static directory exists with index.html
-    static_path = Path("./static")
-    if static_path.exists() and (static_path / "index.html").exists():
-        app.mount("/", StaticFiles(directory="./static", html=True), name="static")
-    # For Hugging Face Spaces - expose the app
-    if __name__ == "__main__":
-        import uvicorn
-        port = int(os.environ.get("PORT", 7860))
-        host = os.environ.get("HOST", "0.0.0.0")
-        logger.info(f"Starting server on {host}:{port}")
-        uvicorn.run(app, host=host, port=port)
 except Exception as e:
-    # If there's an error, create a minimal FastAPI app to show the error
-    from fastapi import FastAPI
-    from fastapi.responses import HTMLResponse
-    from fastapi.staticfiles import StaticFiles
     error_app = FastAPI()
     @error_app.get("/", response_class=HTMLResponse)
@@ -79,23 +121,27 @@ except Exception as e:
                     <p>Please check your environment variables and configuration.</p>
                     <p>MongoDB URL format should be: <code>mongodb+srv://username:[email protected]/...</code></p>
                     <p>API keys should be properly formatted and valid.</p>
                 </div>
             </body>
         </html>
         """
-    # Check if static directory exists with index.html
-    static_path = Path("./static")
-    if static_path.exists() and (static_path / "index.html").exists():
         error_app.mount("/static", StaticFiles(directory="./static"), name="static")
-    if __name__ == "__main__":
-        import uvicorn
-        port = int(os.environ.get("PORT", 7860))
-        host = os.environ.get("HOST", "0.0.0.0")
-        logger.error(f"Application failed to start normally. Starting error app on {host}:{port}")
-        logger.error(f"Error: {str(e)}")
-        uvicorn.run(error_app, host=host, port=port)

 os.environ["MONGODB_CONNECT_TIMEOUT_MS"] = "5000"  # 5 seconds timeout
 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
     from backend.app.main import app
+    # Add CORS middleware
     app.add_middleware(
         CORSMiddleware,
         allow_origins=["*"],
         allow_methods=["*"],
         allow_headers=["*"],
     )
+    # Add an index route to check if the API is accessible
+    @app.get("/api/status")
+    async def status():
+        return {"status": "ok", "message": "PodCraft API is running"}
+    # 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>
+                    <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, but the frontend static files were not found.</p>
+                        <p>Static directory: <code>./static</code></p>
+                        <p>Static directory exists: <code>{static_path.exists()}</code></p>
+                        <p>If you need to access the API directly, you can use the following endpoints:</p>
+                        <ul>
+                            <li><code>/api/status</code> - Check API status</li>
+                            <li><code>/docs</code> - API documentation</li>
+                        </ul>
+                    </div>
+                </body>
+            </html>
+            """
+    # 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")
 except Exception as e:
+    # If there's an error, create a minimal FastAPI app
+    logger.error(f"Error initializing main app: {str(e)}")
     error_app = FastAPI()
     @error_app.get("/", response_class=HTMLResponse)
                     <p>Please check your environment variables and configuration.</p>
                     <p>MongoDB URL format should be: <code>mongodb+srv://username:[email protected]/...</code></p>
                     <p>API keys should be properly formatted and valid.</p>
+                    <p>Static directory exists: <code>{static_path.exists()}</code></p>
+                    {f"<p>Static directory contents: <code>{os.listdir(static_path)}</code></p>" if static_path.exists() else ""}
+                    <p>Static index exists: <code>{static_index_exists}</code></p>
                 </div>
             </body>
         </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")
+# For Hugging Face Spaces - expose the app
+if __name__ == "__main__":
+    import uvicorn
+    port = int(os.environ.get("PORT", 7860))
+    host = os.environ.get("HOST", "0.0.0.0")
+    logger.info(f"Starting server on {host}:{port}")
+    uvicorn.run(app_to_run, host=host, port=port)

build_frontend.sh CHANGED Viewed

@@ -8,7 +8,7 @@ set -e  # Exit on error
 if [ -d "frontend/podcraft" ]; then
     echo "Frontend code already exists"
 else
-    echo "Frontend code not found, creating dummy placeholder"
     mkdir -p frontend/podcraft/public
     mkdir -p frontend/podcraft/src
@@ -51,7 +51,8 @@ EOF
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>PodCraft</title>
   </head>
   <body>
     <div id="root"></div>
@@ -94,18 +95,78 @@ ReactDOM.createRoot(document.getElementById('root')).render(
 )
 EOF
-    # Create a minimal App.jsx
     cat > frontend/podcraft/src/App.jsx << EOF
-import React from 'react'
 import './App.css'
 function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <h1>PodCraft</h1>
-        <p>Welcome to PodCraft API. This is the backend server for the PodCraft application.</p>
-        <p>Please use the API endpoints to interact with the application.</p>
       </header>
     </div>
   )
@@ -114,7 +175,7 @@ function App() {
 export default App
 EOF
-    # Create minimal CSS files
     cat > frontend/podcraft/src/index.css << EOF
 body {
   margin: 0;
@@ -123,6 +184,12 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 EOF
@@ -132,18 +199,163 @@ EOF
 }
 .App-header {
-  background-color: #282c34;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
 }
 EOF
-    echo "Created dummy frontend code"
 fi
 # Make the script executable

 if [ -d "frontend/podcraft" ]; then
     echo "Frontend code already exists"
 else
+    echo "Frontend code not found, creating a fallback UI"
     mkdir -p frontend/podcraft/public
     mkdir -p frontend/podcraft/src
   <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" />
   </head>
   <body>
     <div id="root"></div>
 )
 EOF
+    # Create a minimal App.jsx with a more functional UI
     cat > frontend/podcraft/src/App.jsx << EOF
+import React, { useState, useEffect } from 'react'
 import './App.css'
 function App() {
+  const [apiStatus, setApiStatus] = useState('checking')
+  const [mongoStatus, setMongoStatus] = useState('unknown')
+  const [apiMessage, setApiMessage] = useState('')
+  useEffect(() => {
+    // Check the API status
+    fetch('/api/status')
+      .then(response => response.json())
+      .then(data => {
+        setApiStatus('online')
+        setApiMessage(data.message || 'API is running')
+      })
+      .catch(error => {
+        setApiStatus('offline')
+        console.error('API Error:', error)
+      })
+  }, [])
   return (
     <div className="App">
       <header className="App-header">
+        <div className="logo">
+          <i className="fas fa-microphone-alt"></i>
+          <h1>PodCraft</h1>
+        </div>
+        <p className="tagline">AI-Powered Podcast Generator</p>
+        <div className="status-container">
+          <div className="status-card">
+            <div className="status-header">
+              <i className="fas fa-server"></i>
+              <h3>API Status</h3>
+            </div>
+            <div className="status-content">
+              <div className={`status-indicator \${apiStatus}`}>
+                {apiStatus === 'checking' ? 'Checking...' :
+                 apiStatus === 'online' ? 'Online' : 'Offline'}
+              </div>
+              {apiMessage && <p className="status-message">{apiMessage}</p>}
+            </div>
+          </div>
+        </div>
+        <div className="features">
+          <div className="feature">
+            <i className="fas fa-robot"></i>
+            <h3>AI Debate</h3>
+            <p>Create engaging debates between AI personalities</p>
+          </div>
+          <div className="feature">
+            <i className="fas fa-podcast"></i>
+            <h3>Podcast Generation</h3>
+            <p>Convert debates into audio podcasts</p>
+          </div>
+          <div className="feature">
+            <i className="fas fa-cogs"></i>
+            <h3>Workflow Editor</h3>
+            <p>Customize the podcast creation process</p>
+          </div>
+        </div>
+        <div className="note">
+          <p>Note: This is a simplified UI for the application.</p>
+          <p>The full application UI is unavailable in this build.</p>
+          <p>API endpoints can still be accessed directly for testing.</p>
+        </div>
       </header>
     </div>
   )
 export default App
 EOF
+    # Create enhanced CSS files
     cat > frontend/podcraft/src/index.css << EOF
 body {
   margin: 0;
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: #1a1a2e;
+  color: #ffffff;
+}
+* {
+  box-sizing: border-box;
 }
 EOF
 }
 .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;
 }
 EOF
+    echo "Created fallback frontend code"
 fi
 # Make the script executable